:root{color-scheme:dark;--bg:#050d13;--panel:#0c1c29;--card:#182d3d;--line:#365367;--text:#e9f2fa;--muted:#b0c4d5;--mint:#a1e4c5}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 35%,#142a35 0%,var(--bg) 70%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:44px 24px;display:grid;place-items:center}a{color:var(--mint)}.selection-shell{width:min(1200px,100%);background:var(--panel);border:1px solid #1c3444;border-radius:26px;overflow:hidden;box-shadow:0 28px 90px #0008}.selection-shell>header{padding:26px 32px 20px}.brand{font-size:16px;letter-spacing:2px;font-weight:800;text-decoration:none;color:var(--muted)}.selection-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.world-selection{padding:6px 30px 26px}h1{font-size:36px;line-height:1.2;letter-spacing:-1px;margin:0 0 12px}.intro{font-size:18px;line-height:1.5;color:var(--muted);margin:0 0 24px}fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:14px}.world-option{position:relative;cursor:pointer;display:block}.world-option input{position:absolute;left:15px;top:50%;opacity:0;width:1px;height:1px}.world-card{display:grid;grid-template-columns:140px minmax(0,1fr) 25px;gap:16px;align-items:center;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--card);min-height:120px;transition:background .15s,border-color .15s}.world-card img{display:block;aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;border-radius:8px}.world-copy{display:grid;gap:7px}.world-copy strong{font-size:23px;line-height:1.2}.world-copy>span{font-size:15px;line-height:1.5;color:var(--muted)}.selection-mark{height:24px;width:24px;border:2px solid #7991a2;border-radius:50%;color:transparent;display:grid;place-items:center;font-size:16px;font-weight:800}.world-option input:checked+.world-card{border-color:var(--mint);background:#183b38}.world-option input:checked+.world-card .selection-mark{background:var(--mint);color:#112c27;border-color:var(--mint)}.world-option input:focus-visible+.world-card{outline:3px solid #fff0a0;outline-offset:3px}.world-option:hover .world-card{border-color:#c1dbeb}.world-option input:disabled+.world-card{opacity:.65;cursor:wait}.play-action{margin-top:24px}#playWorld{width:100%;min-height:66px;display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 22px;border:0;border-radius:12px;background:var(--mint);color:#10332a;font:750 23px/1.3 system-ui;cursor:pointer}#playWorld:hover{background:#b9f5d8}#playWorld:focus-visible,a:focus-visible{outline:3px solid #fff0a0;outline-offset:4px}#playWorld:disabled{cursor:wait;opacity:.75}#playStatus{font-size:16px;line-height:1.5;color:var(--muted);margin:14px 0 0;min-height:24px}#playStatus[data-error=true]{color:#ffc1b5}#enterWorld{display:inline-block;padding:14px 0;font-size:20px;font-weight:700}#enterWorld[hidden]{display:none}.character-panel{background:#112433;padding:20px 28px 30px;display:flex;flex-direction:column}.character-stage{background:radial-gradient(ellipse at 55% 35%,#284556,#182d3d 75%);border-radius:20px;display:grid;place-items:center;flex:1;min-height:370px}.character{width:min(100%,340px);height:auto}.character-note{padding:24px 2px 0}.character-note h2{font-size:24px;line-height:1.3;margin:0 0 10px}.character-note p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:960px){.world-card{grid-template-columns:108px minmax(0,1fr) 22px;gap:12px}.world-copy strong{font-size:21px}.world-copy>span{font-size:14px}.world-selection{padding:6px 22px 24px}.character-panel{padding:18px}.character-note h2{font-size:21px}}@media(max-width:700px){body{padding:16px 12px;display:block}.selection-shell{border-radius:20px}.selection-shell>header{padding:22px 20px}.selection-layout{grid-template-columns:1fr}.world-selection{padding:0 18px 24px}h1{font-size:30px}.intro{font-size:17px}.world-card{grid-template-columns:90px minmax(0,1fr) 20px;gap:10px;padding:10px;min-height:112px}.world-copy strong{font-size:21px}.world-copy>span{font-size:14px}.selection-mark{height:20px;width:20px;font-size:13px}.character-panel{display:none}#playWorld{font-size:22px;min-height:64px}.play-action{position:sticky;bottom:0;background:var(--panel);padding:14px 0 8px;margin-top:12px}#playStatus{font-size:15px}}@media(prefers-reduced-motion:reduce){.world-card{transition:none}}

/* Compact selector and selected-world detail panel. */
.selection-layout{grid-template-columns:minmax(280px,.85fr) minmax(0,1.4fr);margin:0}
.world-selection{padding:6px 28px 30px}
h1{font-size:32px}.intro{font-size:17px}
.world-card{grid-template-columns:112px minmax(0,1fr);gap:16px;min-height:104px;padding:12px}
.world-copy strong{font-size:22px}
.world-preview{padding:24px 28px 28px;background:#112433;min-width:0;display:flex;flex-direction:column}
.preview-details h2{font-size:30px;line-height:1.2;margin:0 0 10px}
.preview-details p{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 22px;min-height:58px}
.preview-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--card)}
.play-action{position:static;margin-top:18px;padding:0;background:transparent}
.settings-button{display:block;margin:0 0 12px auto;padding:10px 18px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:600 18px/1.4 system-ui;cursor:pointer;min-height:48px}
.settings-button:hover,#closeSettings:hover{background:#294457}
button:focus-visible{outline:3px solid #fff0a0;outline-offset:3px}
#avatarSettings{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text);box-shadow:0 24px 90px #0009}
#avatarSettings::backdrop{background:#02080dc9;backdrop-filter:blur(5px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.dialog-heading h2{font-size:26px;margin:0}
#closeSettings{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:30px;cursor:pointer}
#avatarSettings .character-stage{min-height:0}.character{width:min(100%,260px);max-height:52dvh}
.avatar-caption{text-align:center;color:var(--muted);font-size:17px;margin:18px 0 0}
@media(max-width:960px){.selection-layout{grid-template-columns:minmax(250px,.85fr) minmax(0,1.2fr)}.world-selection{padding:6px 18px 24px}.world-card{grid-template-columns:86px minmax(0,1fr);gap:12px}.world-copy strong{font-size:20px}.world-preview{padding:22px}.preview-details h2{font-size:27px}}
@media(max-width:700px){.selection-layout{grid-template-columns:1fr}.world-selection{padding:0 18px 22px}.world-card{grid-template-columns:96px minmax(0,1fr);min-height:80px;padding:9px}.world-copy strong{font-size:21px}fieldset{gap:10px}.world-preview{padding:22px 18px}.preview-details p{font-size:17px;min-height:0}.preview-details h2{font-size:28px}.play-action{position:static}.settings-button{font-size:17px}}

/* Entry controls keep the primary action at the foot of the preview. */
.world-selection h1{font-size:25px;margin-bottom:22px;letter-spacing:-.4px}
.preview-details h2{font-size:25px;margin-bottom:20px}
.play-action{margin-top:auto;padding-top:18px}
.launch-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:14px;align-items:end}
.launch-fields label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
.launch-fields input{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:16px;padding:12px;min-height:46px}
.launch-fields input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.launch-fields .room-field{grid-column:1/-1;grid-row:2}
.launch-fields .settings-button{grid-column:2;grid-row:1;margin:0;font-size:15px;min-height:46px}
#playStatus:empty{display:none}
#avatarSettings .character-stage{height:260px;min-height:160px}
.character-colors legend{font-size:13px;color:var(--muted);margin-bottom:10px}
#landingColors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
#landingColors button,.animation-controls button{border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer;min-height:44px;font:inherit;font-size:13px;padding:8px 4px}
#landingColors button{display:grid;justify-items:center;gap:6px;font-size:11px}
#landingColors .swatch{width:26px;height:26px;border-radius:50%}
#landingColors button[aria-pressed=true],.animation-controls button[aria-pressed=true]{border-color:var(--mint);background:#183b38}
.animation-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
#characterStatus{color:var(--muted);font-size:13px;margin-bottom:0}
#characterStatus:empty{display:none}
button:disabled{cursor:default;opacity:.6}
@media(max-width:400px){.launch-fields{grid-template-columns:1fr}.launch-fields .settings-button{grid-column:1;grid-row:3;justify-self:end}.launch-fields .room-field{grid-row:2}#landingColors{grid-template-columns:repeat(3,1fr)}}
