:root{color-scheme:dark;--bg:#0d1521;--panel:#172232;--border:#344458;--text:#e7edf2;--muted:#adb9c7;--gold:#dfba70;--blue:#4e9de8;font:14px/1.45 system-ui,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}header{padding:18px max(18px,3vw);display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--border);align-items:center}header h1{font-size:23px;margin:0;font-weight:650}header h1 strong{color:var(--gold)}header p{margin:3px 0 0;color:var(--muted)}.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{padding:6px 10px;background:#243649;border-radius:20px;font-size:12px}main{padding:20px max(18px,3vw);display:grid;grid-template-columns:minmax(500px,1fr) 350px;align-items:start;gap:18px}.scene-area,.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.scene-top{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px}.scene-top h2,.panel h2{margin:0 0 6px;font-size:16px}.scene-top p,.panel p{color:var(--muted);margin:0 0 10px}.actions,.inline-actions{display:flex;gap:8px;flex-wrap:wrap}button{border-radius:7px;border:1px solid #465d75;background:#25374a;color:var(--text);font:inherit;cursor:pointer;padding:7px 10px}button:hover{background:#37536c}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button.primary{background:#25608e;border-color:#3b80b3}.viewport{height:min(65vh,700px);min-height:400px;position:relative;background:#152837}canvas{display:block;width:100%;height:100%;outline:none}.scene-hint{position:absolute;bottom:10px;left:12px;border-radius:6px;padding:5px 9px;background:#0a1524bf;font-size:12px;color:#e1d3b7;pointer-events:none}.asset-row{border-top:1px solid var(--border);padding:14px 16px}.kicker{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.assets{display:flex;gap:12px;margin-top:9px;align-items:center}.assets img{max-width:30%;height:70px;object-fit:contain;image-rendering:auto;background:#121c29;border-radius:5px;border:1px solid var(--border)}aside{display:flex;flex-direction:column;gap:12px}.panel{padding:16px}textarea{background:#0c1521;border:1px solid var(--border);color:#ddd;width:100%;resize:vertical;padding:10px;font:12px/1.5 ui-monospace,Consolas,monospace;border-radius:7px}.note{font-size:12px;margin:8px 0 0!important;min-height:12px}code{background:#0f1a28;border:1px solid #2c4358;border-radius:6px;padding:7px 9px;display:block;margin-top:10px;white-space:pre-wrap;overflow-wrap:anywhere;color:#eacb94}.warehouse{height:110px;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;align-content:start;overflow:auto;margin:10px 0}.slot{aspect-ratio:1;background:#0f1d2d;border:1px solid #304356;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#e6c276;position:relative}.slot:empty:after{content:'·';color:#35465a}.slot b{font-size:9px;position:absolute;bottom:0;right:2px;color:#a5cfe4}dl{margin:0;display:grid;grid-template-columns:1fr 1.1fr;row-gap:8px;column-gap:5px;font-size:12px}dt{color:var(--muted)}dd{margin:0}footer{text-align:center;color:#72859d;border-top:1px solid var(--border);padding:14px;font-size:12px}@media(max-width:990px){main{grid-template-columns:1fr}.viewport{min-height:340px;height:55vh}}@media(max-width:600px){main{padding:10px;grid-template-columns:1fr}.scene-top,header{align-items:start;flex-direction:column}.viewport{height:390px;min-height:390px}}

#loginPanel form{display:grid;gap:7px}#loginPanel input{border:1px solid var(--border);border-radius:6px;background:#0c1521;color:var(--text);font:inherit;padding:8px}#loginPanel label{font-size:12px;color:#b9cadd}#loginPanel h3{font-size:13px;margin:16px 0 7px}.channel-list{display:grid;gap:5px}.channel-list button{text-align:left}#worldStatus{margin-top:10px!important}

/* FIX17 Web 3: the original game draws four slots (TCharacterSelectWidget). */
.game-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(165deg,#10243af7,#101b2cf9);padding:clamp(15px,2.5vw,34px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;overflow:auto}
.game-overlay[hidden]{display:none!important}.overlay-heading{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:22px;color:#f1d09b}.overlay-heading small{font-size:13px;color:var(--muted)}.character-slots{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;width:min(100%,850px)}.character-card{min-height:142px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(#20384f,#15263b);border:1px solid #4b6584}.character-card[aria-pressed="true"]{border:2px solid #e7bd6c;background:#344659}.character-card:disabled{opacity:.55;cursor:not-allowed}.character-card .class-icon{font-size:26px;color:#d2af76}.character-card .char-name{font-size:16px;font-weight:650;overflow-wrap:anywhere}.character-card .char-level{font-size:12px;color:#b8cedf}.overlay-actions{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}.overlay-actions span{font-size:12px;color:#b6c8d8}.overlay-actions button{padding:11px 26px}.world-overlay{align-items:stretch;margin:auto}.world-overlay h2,.world-overlay p{text-align:center}.world-overlay dl{max-width:450px;margin:0 auto;grid-template-columns:160px 1fr;gap:12px}.world-overlay dd{overflow-wrap:anywhere}@media(max-width:750px){.character-slots{grid-template-columns:repeat(2,minmax(130px,1fr))}.game-overlay{gap:10px;padding:12px}.character-card{min-height:100px}}

/* Stage 4: WebGL2 map is an independent context, separate from Mini-Land test canvas. */
#world3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab;background:#112337}
#world3d[hidden]{display:none!important}
#world3d:active{cursor:grabbing}
body.in-world #gameScreen.world-overlay{inset:12px auto auto 12px;z-index:2;width:min(390px,calc(100% - 24px));height:auto;min-height:0;max-height:calc(100% - 24px);display:block;overflow:auto;padding:12px 14px;gap:6px;background:#10213ee8;border:1px solid #4a637b;border-radius:8px;pointer-events:none}
body.in-world #gameScreen h2{font-size:15px;margin:0 0 5px}
body.in-world #gameScreen p{font-size:11px;margin:3px 0;color:#d1e1ef;text-align:left}
body.in-world #gameScreen dl{font-size:11px;grid-template-columns:110px 1fr;gap:2px;margin:6px 0}
body.in-world #gameScreen .stage4-status{color:#efcb88;font-weight:600}
body.in-world .scene-hint{display:none}