.world-viewport{cursor:default;background:#294c45}.world-viewport canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none;touch-action:none}.world-viewport canvas:focus-visible{outline:3px solid #f4d88d;outline-offset:-3px}
.city-location{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:12px 27px 9px;min-width:280px;color:#fff1ca;background:#214743f2;border:3px solid #1a3638;box-shadow:0 4px 0 #132f30,inset 0 2px 0 #689078;text-align:center}.city-location>span{display:block;font:9px HakkenPixel,monospace;color:#d5be7b;letter-spacing:.08em}.city-location>strong{font:18px/1.5 HakkenPixel,monospace;display:block;margin:3px 0}.city-location p{margin:0;font-size:11px;display:flex;gap:13px;justify-content:center;align-items:center}.city-location i{font-style:normal}.city-location i:before{content:'';display:inline-block;width:6px;height:6px;background:#e4b45e;margin-right:6px}.city-location i[data-state=connected]:before{background:#94d380}.city-location i[data-state=disconnected]:before{background:#e78661}
.city-player{position:absolute;top:93px;left:28px;pointer-events:auto}.city-player .hud-button{font-family:inherit;padding:7px 12px;min-height:35px;font-size:12px;gap:8px}.city-player .hud-button>span:last-child{font-size:12px;color:#fff1d2}.player-dot{width:8px;height:8px;background:#eed481;box-shadow:3px 0 0 #9d5545}.city-player small{font:8px HakkenPixel,monospace;display:block;margin-top:8px;padding-left:5px;color:#fff2ce;text-shadow:1px 2px #23433e}
.city-instructions{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 500px);text-align:center;color:#fff5d5;text-shadow:0 2px #193e3b;background:#234741ec;border:2px solid #496e59;box-shadow:0 3px #153633;padding:10px 20px;pointer-events:auto}.city-instructions p{font-size:12px;margin:0 0 4px}.keyboard-hint{font:8px HakkenPixel,monospace;color:#bcd3b1;white-space:nowrap}.keyboard-hint kbd{font:9px HakkenPixel,monospace;display:inline-block;background:#eee4b8;color:#29433a;border-bottom:2px solid #b3ae83;padding:2px 3px;margin-right:3px;text-shadow:none}.city-instructions button{display:block;margin:8px auto 0;pointer-events:auto}.city-position{position:absolute;left:28px;bottom:87px;color:#f7edcc;background:#244b44ad;padding:2px 7px;font-size:10px;pointer-events:none;font-variant-numeric:tabular-nums}
.city-joystick{position:absolute;left:23px;bottom:85px;width:122px;height:122px;border-radius:50%;border:3px solid #fff1c8a8;background:#1b443f72;box-shadow:inset 0 0 0 7px #1f443f69,0 3px #1a36377a;touch-action:none;pointer-events:auto;display:none;user-select:none}.joystick-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:62px monospace;line-height:1;color:#ffffff2b}.city-joystick #city-stick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:49px;height:49px;border:3px solid #f6e4b1;border-radius:50%;background:#d8b566db;box-shadow:0 4px #75674b85}
#city-transition{pointer-events:none;position:absolute;inset:0;background:#f7ebbc;opacity:0}#city-transition.flash{animation:room-enter .5s ease-out}@keyframes room-enter{from{opacity:.8}to{opacity:0}}.reduced-motion #city-transition.flash{animation:none}
.review-mode .city-instructions{bottom:63px}.review-mode .city-position{bottom:125px}
@media(pointer:coarse){.city-joystick{display:block}.keyboard-hint{display:none}.city-position{display:none}.city-instructions{max-width:calc(100vw - 330px);bottom:100px;left:auto;right:23px;transform:none}.review-mode .city-instructions{bottom:130px}.review-mode .city-joystick{bottom:120px}}
@media(max-width:1000px){.city-location{min-width:230px;padding:9px 16px;top:17px}.city-location>strong{font-size:15px}.city-location>span{font-size:8px}.city-instructions{max-width:calc(100vw - 430px);padding:9px 13px}.city-player{left:18px;top:79px}}
@media(max-width:720px){.hud-brand{width:115px}.hud-top-right{top:15px}.city-location{left:12px;top:69px;transform:none;min-width:0;padding:10px 13px;text-align:left;max-width:210px}.city-location>strong{font-size:15px}.city-location>span{font-size:7px;letter-spacing:0}.city-location p{font-size:10px;gap:8px;justify-content:start}.city-player{left:auto;right:12px;top:75px;max-width:150px}.city-player .hud-button{font-size:10px;padding:6px 8px;min-height:33px;max-width:150px;overflow:hidden}.city-player .hud-button>span:last-child{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.city-player small{font-size:6px;text-align:right;padding:0}.city-joystick{display:block;left:18px;bottom:85px;width:113px;height:113px}.keyboard-hint{display:none}.city-instructions{bottom:109px;right:14px;left:auto;transform:none;max-width:calc(100vw - 160px);padding:9px 11px}.city-instructions p{font-size:11px;margin:0}.city-instructions button{font-size:10px!important;padding:10px!important}.city-position{display:none}.hud-bottom-left,.hud-bottom-right{bottom:22px}.hud-bottom-left .hud-button,.hud-bottom-right .hud-button{font-size:10px;padding:8px}.review-mode .hud-bottom-left,.review-mode .hud-bottom-right{bottom:54px}.review-mode .city-joystick{bottom:120px}.review-mode .city-instructions{bottom:143px}.toast-root{bottom:225px}}
@media(max-height:520px) and (min-width:721px){.city-location{top:12px;padding:5px 18px}.city-location>span{display:none}.city-player{top:70px}.city-instructions{bottom:20px}.city-joystick{width:96px;height:96px;bottom:68px}.review-mode .city-joystick{bottom:104px}.review-mode .city-instructions{bottom:58px}}
/* Keep the south doorway and the fighter's feet clear of the instruction HUD. */
#world-hud .city-instructions{top:121px;bottom:auto;max-width:min(560px,calc(100vw - 420px));padding:8px 14px;pointer-events:none}
#world-hud .city-instructions button{pointer-events:auto}
@media(max-width:720px){#world-hud .city-instructions{top:163px;bottom:auto;left:12px;right:auto;transform:none;width:calc(100vw - 24px);max-width:430px;text-align:left;padding:8px 11px}#world-hud .city-instructions button{margin:7px 0 0}}
@media(max-height:520px) and (min-width:721px){#world-hud .city-instructions{top:auto;bottom:18px;padding:7px 12px;max-width:360px}.review-mode #world-hud .city-instructions{bottom:58px}#world-hud .city-instructions .keyboard-hint{display:none}}
/* Contextual actions only: movement instructions live in Game Guide. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.city-context{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;gap:10px}.city-context button{pointer-events:auto;box-shadow:0 4px #183b36}.city-context button[hidden]{display:none}
.region-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#214943f2;border:3px solid #d5bc78;box-shadow:0 5px #173836;color:#fff0c7;padding:20px;font:12px/1.8 HakkenPixel,monospace;text-align:center;max-width:85%;z-index:5}.region-loading[hidden]{display:none}
.city-channel{position:absolute;top:113px;left:50%;transform:translateX(-50%);padding:5px 10px!important;min-height:26px!important;font:8px HakkenPixel,monospace!important}
.city-minimap{position:absolute;right:24px;bottom:82px;width:210px;background:#214642;border:3px solid #183b38;box-shadow:0 4px #173733;color:#fff0c8;pointer-events:auto}.minimap-heading{display:flex;width:100%;justify-content:space-between;border:0;background:#214642;color:#fff0c8;padding:9px 8px;font:8px HakkenPixel,monospace;cursor:pointer}.city-minimap canvas{display:block;width:100%;height:140px;image-rendering:pixelated}.city-minimap>span{display:block;font:8px/1.6 HakkenPixel,monospace;padding:0 8px}.city-minimap>span:not(:empty){padding:8px}.city-map-button{display:none!important}.city-position{display:none}
.avatar-select{display:grid;grid-template-columns:230px 1fr;gap:28px}.avatar-preview{text-align:center;align-self:center}.avatar-preview .layered-figure{height:310px;width:210px;margin:0 auto}.avatar-preview h3{font:20px HakkenPixel,monospace;color:#28504a;margin:12px 0}.avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.avatar-grid>button{display:flex;align-items:center;flex-direction:column;min-width:0;cursor:pointer;border:2px solid #b7bb98;background:#e1e2c6;color:#2d4b43;padding:4px 4px 10px;box-shadow:0 3px #a3a886}.avatar-grid>button:hover,.avatar-grid>button[aria-pressed=true]{border-color:#2d6154;background:#f3de9f;box-shadow:0 3px #2d6154}.avatar-grid .layered-figure{height:90px;width:75px;pointer-events:none}.avatar-grid strong{font:9px HakkenPixel,monospace;margin:3px 0 6px}.avatar-grid small{font-size:10px}.avatar-confirm{margin-top:20px;text-align:right}.action-dialog:has(.avatar-select){width:min(940px,calc(100vw - 30px));max-width:none}
.district-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:12px;max-width:690px;margin:20px auto}.district-grid button{cursor:pointer;padding:0 0 10px;background:#d4dcc0;border:3px solid #a2b296;color:#294e45;box-shadow:0 4px #9eac8c}.district-grid button.current{background:#f4dfa4;border-color:#b27b38}.district-grid img{width:100%;height:82px;object-fit:cover;image-rendering:pixelated;display:block;margin-bottom:9px}.district-grid strong{display:block;font:10px/1.7 HakkenPixel,monospace}.district-grid small{display:block;margin-top:6px;font-size:9px}.channel-list{display:grid;gap:12px}.channel-list button{display:flex;align-items:center;justify-content:space-between;gap:20px;border:2px solid #9aac8e;padding:20px;background:#d6dec2;color:#284c43;cursor:pointer}.channel-list button strong{font:12px HakkenPixel,monospace}.channel-list button:disabled{opacity:.65;cursor:default}
.review-mode .city-minimap{bottom:118px}.review-mode .city-context{bottom:132px}
@media(max-width:1000px){.avatar-select{grid-template-columns:160px 1fr;gap:15px}.avatar-preview .layered-figure{width:150px;height:240px}.city-minimap{width:175px}.city-minimap canvas{height:116px}.city-channel{top:106px}}
@media(max-width:720px){.city-minimap{display:none}.city-map-button{display:block!important;position:absolute;bottom:23px;left:50%;transform:translateX(-50%);font-size:10px!important;padding:8px!important}.city-channel{top:143px;left:12px;transform:none}.city-context{bottom:109px;left:auto;right:14px;transform:none;max-width:calc(100vw - 155px)}.city-context button{font-size:9px!important;padding:12px!important}.avatar-select{display:flex;flex-direction:column;gap:14px}.avatar-preview{display:grid;grid-template-columns:90px 1fr;grid-template-rows:30px 40px;text-align:left;width:100%;align-items:center}.avatar-preview .layered-figure{grid-row:1/4;width:80px;height:105px}.avatar-preview h3{font-size:18px;margin:0}.avatar-preview p{margin:0}.avatar-preview .small-copy{display:none}.avatar-grid{gap:7px}.avatar-grid .layered-figure{height:68px;width:52px}.avatar-grid strong{font-size:7px}.avatar-grid small{font-size:8px}.avatar-confirm{text-align:center;margin-top:15px}.district-grid{gap:7px}.district-grid strong{font-size:7px}.district-grid img{height:65px}.district-grid small{font-size:7px}.review-mode .city-map-button{bottom:55px!important}.review-mode .city-context{bottom:145px}.city-player small{max-width:150px;line-height:1.7}.hud-bottom-right{gap:5px}}
.city-wayfinding-mobile{display:none}@media(max-width:720px){.city-wayfinding-mobile:not(:empty){position:absolute;display:block;bottom:71px;right:12px;max-width:205px;padding:8px;background:#214943ed;color:#fff1bd;font:8px/1.6 HakkenPixel,monospace;box-shadow:0 3px #173734;pointer-events:none}.review-mode .city-wayfinding-mobile{bottom:105px}}
/* Keep the world visible: compact location, collision-aware HUD and a short fade. */
.city-location{top:20px;padding:9px 17px;min-width:0;max-width:410px;width:max-content;display:flex;align-items:center;gap:18px;text-align:left;border-width:2px;transition:opacity .12s}
.city-location>span{display:none}.city-location>strong{font-size:13px;line-height:1.4;margin:0;white-space:nowrap}.city-location p{font-size:11px;gap:10px;flex-direction:column;align-items:flex-start;line-height:1.25}.city-location p>span{font-size:10px;color:#c7d7b5}.city-channel{top:85px;left:50%;min-height:24px!important;padding:5px 9px!important;transition:opacity .12s}.city-player{transition:opacity .12s}.city-player small{font-size:8px;line-height:1.7}.hud-occluded{opacity:.12!important;transition:opacity .12s;pointer-events:none!important}.city-minimap,.hud-top-right,.hud-brand{transition:opacity .12s}
#city-transition{background:#163b35}#city-transition.flash{animation:district-arrival .18s ease-out}@keyframes district-arrival{from{opacity:.25}to{opacity:0}}
.toast-root{pointer-events:none}.toast{max-width:460px;font-size:13px}.loading-cancel{display:block;margin:14px auto 0;font-size:11px;color:#456358}.region-loading{background:#1e4542e6;font-size:10px;box-shadow:0 4px #193e37;padding:14px 20px}
.location-panel[data-place=dojo],.location-panel[data-place=marketplace]{width:min(960px,94vw);height:fit-content;max-height:90dvh;background:#e4e4c7;border-color:#5c684d;box-shadow:0 9px #193b34,0 0 0 4px #c6b576}.location-panel[data-place=dojo] .panel-header{background:#375247;border-bottom-color:#b69252}.location-panel[data-place=marketplace] .panel-header{background:#624834;border-bottom-color:#d1a65b}
.dojo-desk{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px}.dojo-passport{background:#c2cdb0;border:3px solid #7b9270;box-shadow:0 4px #a0b18c;display:flex;flex-direction:column;align-items:center;padding:16px 12px 18px;text-align:center}.desk-tag{font:9px/1.6 HakkenPixel,monospace;letter-spacing:.04em;color:#476448}.dojo-passport>.layered-figure{width:170px;height:250px;margin:10px 0}.dojo-passport>strong{font:16px HakkenPixel,monospace;color:#244d40;line-height:1.7}.dojo-passport>span:not(.desk-tag){font-size:13px;color:#4e6650}.dojo-passport>small{font-size:11px;line-height:1.5;color:#53674d;margin-top:17px}.desk-workbench .tabs{margin-bottom:23px}.desk-workbench h2{font-size:23px;margin:7px 0 15px}.desk-workbench>.eyebrow{font-size:9px}.desk-workbench>p{font-size:14px;line-height:1.6}.training-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.training-fields .field{margin:0}.training-fields input,.training-fields select{background:#fff8dd;box-shadow:inset 0 3px #e3d8b6;min-height:46px}.desk-fineprint{font-size:12px!important;line-height:1.65;color:#62715a;margin:17px 0 12px}.desk-service-state{margin-top:21px}.desk-service-state .status-chip{font-size:11px}.strategy-hand{display:flex;gap:7px;margin:17px 0;align-items:stretch}.strategy-hand>button{background:#d3d7b8;border:2px solid #899d76;box-shadow:0 4px #9baa83;padding:13px 4px 11px;flex:1;min-width:0;color:#385743;cursor:pointer;transition:transform .1s}.strategy-hand>button>span{display:block;font:24px HakkenPixel,monospace;margin:4px 0 14px;color:#8b713e}.strategy-hand>button>strong{font:8px HakkenPixel,monospace}.strategy-hand>button[aria-pressed=true]{background:#f5dea2;border-color:#8c703b;transform:translateY(-4px);box-shadow:0 7px #baa36a}.strategy-detail{background:#f7efd2;border-left:4px solid #b29043;padding:15px 17px}.strategy-detail>strong{font:13px HakkenPixel,monospace;color:#385746}.strategy-detail p{font-size:13px;line-height:1.5;margin:10px 0 15px}.desk-workbench .text-link{font-size:11px;line-height:1.7;text-align:left}
.exchange-banner{padding:0 0 20px;margin-bottom:20px;border-bottom:2px solid #bec49e}.exchange-banner .eyebrow{font-size:9px;color:#8a6d42}.exchange-banner h2{font-size:24px;margin:10px 0 13px;color:#4f4d36}.exchange-banner>p:last-child{font-size:14px;margin:0;color:#6b7055}.exchange-closed{display:grid;grid-template-columns:.9fr 1.1fr;background:#eef0d5;border:3px solid #a5b38a;box-shadow:0 4px #b4bf99;overflow:hidden}.exchange-scenery{min-height:290px;background:linear-gradient(0deg,#173d3c22,#173d3c22),url('./assets/pixel/interior-marketplace.webp') 78% 45%/auto 135%;image-rendering:pixelated;border-right:3px solid #a5b38a}.exchange-closed>section{align-self:center;padding:27px}.exchange-closed h3{font:17px/1.65 HakkenPixel,monospace;color:#4d563c;margin:14px 0}.exchange-closed p{font-size:14px;line-height:1.7;color:#667257}.exchange-closed .doc-links{gap:10px}.exchange-closed .pixel-button{font-size:11px}
@media(max-width:1000px){.city-location{padding:8px 13px;gap:12px}.city-location>strong{font-size:11px}.city-channel{top:82px}.dojo-desk{grid-template-columns:175px minmax(0,1fr);gap:18px}.dojo-passport>.layered-figure{width:145px;height:220px}.strategy-hand>button>strong{font-size:7px}.exchange-closed>section{padding:20px}}
@media(max-width:720px){.city-location{top:66px;left:12px;transform:none;max-width:210px;padding:8px 11px;display:block}.city-location>strong{font-size:11px}.city-location p{flex-direction:row;gap:9px;font-size:9px;margin-top:6px}.city-location p>span{font-size:9px}.city-channel{top:124px;left:12px;transform:none}.city-player{top:69px;max-width:140px}.city-player .hud-button{max-width:140px;min-height:32px}.city-player small{font-size:6px}.dojo-desk{grid-template-columns:1fr;gap:17px}.dojo-passport{display:grid;grid-template-columns:85px 1fr;grid-template-rows:26px 29px 24px;text-align:left;padding:10px 14px;align-items:center}.dojo-passport>.layered-figure{grid-row:1/5;grid-column:1;width:70px;height:110px;margin:0}.dojo-passport>.desk-tag{grid-column:2;font-size:8px}.dojo-passport>strong{grid-column:2;font-size:15px}.dojo-passport>span:not(.desk-tag){grid-column:2;font-size:12px}.dojo-passport>small{grid-column:2;margin:0;font-size:9px}.desk-workbench h2{font-size:20px}.desk-workbench .tabs{margin-bottom:18px}.training-fields{gap:11px;margin:18px 0}.training-fields label{font-size:11px}.strategy-hand{gap:5px}.strategy-hand>button{padding:10px 2px}.strategy-hand>button>strong{font-size:6px}.strategy-hand>button>span{font-size:19px}.exchange-banner h2{font-size:20px;line-height:1.6}.exchange-closed{grid-template-columns:1fr}.exchange-scenery{min-height:120px;background-size:100% auto;background-position:60% 54%;border-right:0;border-bottom:3px solid #a5b38a}.exchange-closed>section{padding:20px}.exchange-closed h3{font-size:14px}.location-panel[data-place=dojo],.location-panel[data-place=marketplace]{height:calc(100dvh - 28px);max-height:calc(100dvh - 28px)}.toast{font-size:11px;max-width:calc(100vw - 35px)}.loading-cancel{font-size:10px}}
@media(prefers-reduced-motion:reduce){.strategy-hand>button{transition:none}}.reduced-motion .strategy-hand>button{transition:none}

/* Keep native number/select controls inside the narrow game desk. */
.dojo-desk,.dojo-passport,.desk-workbench,.training-fields .field{min-width:0}.training-fields input,.training-fields select{width:100%;min-width:0;box-sizing:border-box}.dojo-passport>small{min-width:0;overflow-wrap:anywhere}.desk-workbench .pixel-button{max-width:100%;white-space:normal;line-height:1.6}