:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
#intro{padding:max(36px,var(--safe-top)) 6vw max(45px,var(--safe-bottom));overflow-y:auto;align-items:center;background:linear-gradient(90deg,#122b21f5,#182d24e8 52%,#142b21a6)}
.intro-layout{width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:center}.intro-copy{max-width:410px}.intro-copy h2{font-size:clamp(45px,5.5vw,72px);margin:22px 0}.intro-copy p{max-width:310px}.intro-copy .eyebrow{font-size:9px}
.lobby{background:#162b22ed;border:1px solid #b5a17b4a;border-radius:9px;padding:27px;box-shadow:0 18px 70px #071d193b}.lobby-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.lobby-top h3{font:25px Georgia;margin:0}.capacity{color:#d4c197;font-size:10px;letter-spacing:1px;white-space:nowrap}.lobby-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lobby label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:#c6cbb8}.lobby input{min-width:0;width:100%;background:#0f241bd9;color:#f1e8d5;border:1px solid #9cae8b59;border-radius:4px;padding:12px 10px;font:14px system-ui;outline:none}.lobby input:focus{border-color:#e0c490;box-shadow:0 0 0 2px #d9bb7c1a}.lobby input:disabled{opacity:.7}.lobby input::placeholder{color:#8b9e8b;font-size:11px}.character-heading{margin:20px 0 11px;font-size:10px;color:#c7cfba}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.character-card{position:relative;min-height:84px;padding:11px 6px;background:linear-gradient(145deg,#2d4435,#1c3428);border:1px solid #8b9b7559;border-radius:5px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;transition:background .16s,border-color .16s;cursor:pointer}.character-card:hover{background:#344c3a}.character-card[aria-pressed=true]{border-color:#e3c892;background:linear-gradient(140deg,#4e5039,#2c4030);box-shadow:inset 0 0 0 1px #dec18a55}.character-symbol{color:var(--character-color);font:24px Georgia;line-height:1.2}.character-name{font-size:10px;color:#eee8d3;text-align:center}.character-state{font-size:8px;color:#bec6af;min-height:11px}.character-card:disabled{opacity:.43;cursor:default}.lobby-actions{display:grid;gap:10px;margin-top:18px}.lobby #joinBtn{width:100%;border:1px solid #e0c28a;border-radius:4px;background:#dfc28b;color:#213021;padding:14px 15px;font:12px system-ui;display:flex;align-items:center;justify-content:space-between}.lobby #startBtn{width:100%;border:1px solid #9aaa805c;border-radius:4px;background:#20392b;color:#cfdbc1;padding:11px;font:11px system-ui;text-align:center}.lobby-message{min-height:33px;color:#ddcda8;font-size:10px;line-height:1.6;margin:11px 0 0}.lobby-bottom{display:flex;justify-content:space-between;gap:12px;font-size:10px;margin-top:8px}.lobby-bottom button{padding:5px 0;color:#c5cfb4}.lobby-bottom button:hover{color:#edd3a1}.intro-note{line-height:1.7}.intro-bottom{position:static;grid-column:1/-1;margin-top:8px;display:flex;justify-content:space-between;gap:20px}.intro-bottom span{font-size:6px;letter-spacing:1.3px;color:#b4bfaa}.online-badge{position:fixed;right:35px;top:88px;font-size:9px;color:#d6ddc9;background:#163025bb;border:1px solid #b5c29a42;border-radius:4px;padding:5px 9px;pointer-events:none}.online-badge[data-state=reconnecting],.online-badge[data-state=connecting]{color:#e7c98c}.online-badge i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a0b98b;margin-right:6px}.online-badge[data-state=connected] i{background:#a0d295}.online-badge[data-state=reconnecting] i{background:#e2be80}
@media(max-width:800px){#intro{padding:calc(var(--safe-top) + 24px) 5vw calc(var(--safe-bottom) + 25px);align-items:flex-start}.intro-layout{max-width:520px;grid-template-columns:1fr;gap:22px}.intro-copy{padding:0;max-width:none}.intro-copy h2{font-size:40px;line-height:1.07;margin:12px 0}.intro-copy h2 br{display:none}.intro-copy h2 br:after{content:' '}.intro-copy p{margin:12px 0 0;max-width:100%;font-size:11px;line-height:1.75}.intro-copy .eyebrow{font-size:7px}.lobby{padding:20px}.lobby-top h3{font-size:24px}.character-card{min-height:76px}.intro-bottom{margin:0}.online-badge{right:22px;top:95px;font-size:8px}.scene-caption{max-width:160px}.lobby input{font-size:16px}.lobby-fields{gap:9px}.lobby label{font-size:9px}header{top:calc(var(--safe-top) + 14px)}.mobile-controls{bottom:calc(var(--safe-bottom) + 28px);left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.mobile-actions{gap:14px}.mobile-actions button{width:49px;height:49px}#interact{bottom:calc(var(--safe-bottom) + 155px)}#viewHint{bottom:calc(var(--safe-bottom) + 13px)}footer{bottom:calc(var(--safe-bottom) + 12px)}.modal section{max-height:calc(100dvh - 40px);overflow-y:auto}}
@media(max-width:800px) and (orientation:landscape){.intro-layout{max-width:1000px;grid-template-columns:.75fr 1.25fr;gap:24px}.intro-copy h2{font-size:35px}.intro-copy p{font-size:10px}.lobby{padding:14px 18px}.lobby-top{margin-bottom:10px}.character-card{min-height:59px;padding:5px}.character-symbol{font-size:18px}.character-heading{margin:12px 0 7px}.lobby-actions{margin-top:12px;grid-template-columns:1fr 1fr}.lobby-fields input{padding:9px}.lobby-message{min-height:0}.intro-bottom{display:none}#intro{padding-top:18px}.mobile-controls{bottom:calc(var(--safe-bottom) + 20px)}}
@media(max-width:650px){header .location{display:none}header{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}.lobby-top h3{font-size:22px}}