*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;color:#243f49;background:#edf3f4;display:flex;flex-direction:column}header{height:104px;display:flex;align-items:center;gap:15px;padding:24px 40px;flex-shrink:0}.mark{display:grid;place-items:center;width:43px;height:43px;background:#243f49;color:#fff;font-size:14px;font-weight:700;border-radius:12px}h1{font-size:21px;letter-spacing:-.7px;margin:0 0 5px}header p{font-size:14px;margin:0;color:#586e77}.tag{margin-left:auto;font-size:12px;letter-spacing:2px;border:1px solid #b8c8cf;border-radius:30px;padding:10px 15px}main{position:relative;flex:1;min-height:0}canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}canvas:focus-visible{outline:2px solid #406c80;outline-offset:-4px}.caption{position:absolute;top:35px;left:40px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;color:#627982}.caption p{font-size:clamp(24px,3vw,42px);line-height:1.15;letter-spacing:-1.5px;margin:14px 0}.controls{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:24px;padding:8px 8px 8px 22px;border:1px solid #d6e0e4;background:#ffffffdb;border-radius:16px;white-space:nowrap;box-shadow:0 6px 25px #243f4908;font-size:14px;color:#586e77}.controls i{font-style:normal;margin:0 8px}button{border:0;background:#243f49;color:white;border-radius:10px;padding:13px 17px;font:inherit;cursor:pointer}button:hover{background:#365b68}button:focus-visible{outline:3px solid #d49a43;outline-offset:3px}footer{display:flex;justify-content:space-between;padding:20px 40px;font-size:12px;color:#586e77}footer span:first-child{letter-spacing:1.7px}@media(max-width:600px){header{padding:20px;height:90px}.tag{font-size:10px;padding:8px;letter-spacing:1px}.caption{left:20px;top:12px}.caption p{font-size:28px}.controls{gap:10px;padding-left:13px;font-size:12px;bottom:15px}button{padding:12px}footer{padding:16px 20px}footer span:last-child{display:none}}
.caption{top:12px}.caption p{font-size:30px;margin:10px 0}.caption small{display:block;color:#586e77;line-height:1.6;margin-top:7px;font-size:11px}#scene-stats{font-size:12px;color:#586e77}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}footer a:first-child{letter-spacing:0}@media(max-width:600px){.caption p{font-size:23px}.caption small{font-size:10px}header .tag{display:none}footer{gap:12px;font-size:10px}.controls{gap:8px}}
canvas,canvas:active{cursor:crosshair}.controls{white-space:normal;max-width:calc(100% - 24px);width:max-content}.controls>span{line-height:1.5}body:has(canvas:focus) .caption{opacity:.65}
.minimap{position:absolute;right:20px;top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;z-index:2}#map-toggle{pointer-events:auto;box-shadow:0 3px 14px #243f4926;min-width:76px}#map-toggle[aria-expanded="true"]{background:#426977}#map-panel{width:min(440px,calc(100vw - 40px),calc(100dvh - 240px));padding:12px;background:#f8fbf5f5;border:1px solid #bac9c5;border-radius:12px;box-shadow:0 4px 18px #243f4920}.minimap-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:8px}.minimap #minimap{width:100%;height:auto;aspect-ratio:1;cursor:default;border-radius:5px}.minimap-key{font-size:11px;margin-top:7px;color:#354e51}@media(max-width:600px){.minimap{right:12px;top:12px}#map-panel{width:min(440px,calc(100vw - 24px),calc(100dvh - 220px));padding:8px}.caption{max-width:calc(100% - 110px)}.eyebrow{font-size:9px;letter-spacing:.5px}}
header{position:relative}#current-road{position:absolute;left:50%;transform:translateX(-50%);width:clamp(180px,28vw,360px);padding:13px 18px;border:1px solid #b8c8cf;border-radius:10px;background:#ffffffd9;color:#243f49;font-size:16px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:850px){header .tag{display:none}}@media(max-width:600px){header{height:124px;align-items:flex-start;padding-top:12px}#current-road{bottom:10px;width:calc(100% - 40px);padding:9px;font-size:14px}}
/* Village editor + touch controls */
.admin-toggle{position:absolute;left:18px;top:16px;z-index:5;background:#243f49;box-shadow:0 3px 14px #243f4926}.editor-panel{position:absolute;left:18px;top:66px;z-index:6;width:min(320px,calc(100vw - 36px));padding:16px;background:#fffef9f2;border:1px solid #bac9c5;border-radius:14px;box-shadow:0 12px 35px #243f4930}.editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.editor-head strong{font-size:17px}.editor-head button{padding:5px 10px;background:#6d7f84}.editor-panel p{font-size:13px;margin:8px 0 14px;color:#536970}.editor-panel label{display:block;font-size:12px;font-weight:700;margin:10px 0}.editor-panel select{display:block;width:100%;margin-top:5px;padding:10px;border:1px solid #b8c8cf;border-radius:8px;background:#fff;color:#243f49}.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.editor-actions button,.editor-panel .secondary{padding:10px;font-size:12px}.editor-panel .secondary{width:100%;margin-top:8px;background:#6d7f84}.editor-panel small{display:block;margin-top:10px;color:#687c82}.mobile-controls{display:none;position:absolute;left:18px;bottom:18px;z-index:5;user-select:none;-webkit-user-select:none;touch-action:none}.mobile-controls>button{display:block;margin:0 auto 6px}.mobile-controls div{display:flex;gap:6px}.mobile-controls button{width:52px;height:52px;padding:0;border-radius:50%;font-size:20px;background:#243f49dd;box-shadow:0 3px 12px #0002}.editor-active canvas{cursor:pointer!important}.editor-active .controls{opacity:.35;pointer-events:none}@media(max-width:700px),(pointer:coarse){.mobile-controls{display:block}.controls{bottom:12px;right:12px;left:auto;transform:none;max-width:50%;padding:7px}.controls>span{display:none}.admin-toggle{top:10px;left:10px;padding:10px 12px}.editor-panel{top:58px;left:10px;width:min(310px,calc(100vw - 20px));max-height:calc(100dvh - 75px);overflow:auto}.caption{display:none}.minimap{top:10px}.mobile-controls button{width:48px;height:48px}footer{display:none}}