*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,Arial,sans-serif;color:#f4f4ed;background:#101316;font-synthesis:none;--accent:#b2ff71;--muted:#a8b2b7}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button,a{color:inherit}a{text-decoration:none}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:1px solid #485157;border-radius:8px;padding:12px 18px;background:#252c31;min-height:48px}button.primary{background:var(--accent);color:#142012;border-color:var(--accent);font-weight:700}input,select{min-width:0;background:#11171c;border:1px solid #485157;border-radius:6px;padding:12px;color:inherit;min-height:48px;font-size:16px}label{font-size:14px;display:grid;gap:7px}h1,h2,h3,p{margin:0}p{line-height:1.5}.eyebrow{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}.muted{color:var(--muted)}header{padding:22px max(5vw,env(safe-area-inset-right)) 22px max(5vw,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #30383d}.brand{font-size:20px;font-weight:900;letter-spacing:-.06em}.brand span{color:var(--accent)}nav{display:flex;gap:20px;font-size:14px}nav a[aria-current=page]{color:var(--accent)}main{max-width:1440px;margin:auto;padding:40px max(5vw,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left))}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}h1{font-size:clamp(32px,5vw,68px);letter-spacing:-.055em;line-height:1.05}.intro p{max-width:290px;font-size:16px;color:var(--muted)}.halls{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hall{position:relative;overflow:hidden;background:#181e22;border:1px solid #394349;border-radius:12px;min-height:430px;display:flex;flex-direction:column;justify-content:space-between;padding:26px}.hall img{position:absolute;inset:0 0 0 25%;width:75%;height:100%;object-fit:contain;opacity:.8;transition:transform .3s}.hall:hover img{transform:scale(1.025)}.hall .top,.hall .bottom{position:relative;z-index:1}.hall h2{font-size:clamp(30px,4vw,54px);letter-spacing:-.06em}.hall .bottom{display:flex;align-items:center;justify-content:space-between;background:#101316dd;border-radius:8px;padding:16px;gap:16px}.pill{display:inline-flex;border:1px solid #4c575d;border-radius:99px;padding:6px 10px;font-size:13px;color:#c5cdd1}.floor{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:36px}.cabinet{position:relative;min-width:0;background:#151b1f;border-radius:12px;overflow:hidden}.cabinet img{width:100%;max-height:710px;object-fit:contain;display:block}.cabinet-label{position:absolute;bottom:20px;left:20px;right:20px;padding:16px;background:#0b1014ed;border:1px solid #485157;border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:12px}.cabinet-label strong{display:block;margin-bottom:4px}.panel{display:grid;gap:22px;align-content:start}.panel h2{font-size:25px;letter-spacing:-.03em}.card{border:1px solid #394349;border-radius:10px;background:#181e22;padding:22px}.card h3{font-size:18px;margin-bottom:18px}.guest-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.guest-form button{grid-column:1/-1}.country-options{display:flex;gap:8px;flex-wrap:wrap}.country-options input{width:80px;text-transform:uppercase}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.status{font-size:14px;color:var(--muted);margin-top:14px;min-height:21px}.roster{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}.roster li{display:flex;gap:12px;align-items:center;padding:12px;background:#0e1519;border-radius:6px}.seat{color:var(--accent);font-size:13px;font-weight:bold;min-width:30px}.chat-log{height:180px;overflow:auto;list-style:none;padding:0;margin:0 0 16px;overscroll-behavior:contain}.chat-log li{padding:7px 0;overflow-wrap:anywhere;line-height:1.4}.chat-log strong{display:block;font-size:13px;color:#b4c3cc}.chat-form{display:flex;gap:8px}.chat-form input{flex:1;width:0}.chat-empty{font-size:14px;color:var(--muted)}details{border-top:1px solid #394349;padding-top:20px}summary{cursor:pointer;min-height:44px;font-weight:600}.diagnostic{margin-top:18px}.game-screen{aspect-ratio:4/3;background:#05090c;display:grid;place-items:center;border:1px solid #394349;border-radius:8px;overflow:hidden}.game-screen canvas{width:100%;height:100%;object-fit:contain}.control-row{display:flex;justify-content:space-between;gap:16px;margin-top:16px}.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:5px}.dpad button{padding:0;touch-action:none;user-select:none}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:3/2}.right{grid-area:2/3}.buttons{display:flex;align-items:center;gap:10px}.buttons button{height:56px;width:56px;border-radius:50%;touch-action:none;user-select:none}.control-row button[data-held=true]{background:var(--accent);color:#102016}.test-note{font-size:14px;margin-top:14px;color:var(--muted)}footer{font-size:13px;color:var(--muted);padding-top:28px}.error{color:#ffc09e}
@media(max-width:800px){header{padding-top:18px;padding-bottom:18px}.intro{align-items:start;flex-direction:column}.intro p{max-width:none}.floor{grid-template-columns:1fr}.cabinet img{max-height:520px}.halls{grid-template-columns:1fr}.hall{min-height:380px}.panel{gap:18px}main{padding-top:28px}.guest-form{grid-template-columns:1fr}nav{gap:12px}.card{padding:18px}}
@media(max-height:500px) and (orientation:landscape){.floor{grid-template-columns:minmax(240px,1fr) minmax(300px,1fr);gap:20px}.cabinet img{max-height:500px}.diagnostic{display:grid;grid-template-columns:1fr 1fr;gap:16px}.control-row{align-items:center;margin:0}.test-note{grid-column:1/-1}.intro{margin-bottom:20px}main{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Warm ink-and-paper interface around the hand-drawn RPG room. */
@font-face{font-family:'Inter';src:url('/inter-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--accent:#edb66b;--muted:#bbab99;--ui-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;background:#191f24;color:#f6ead5;font-family:var(--ui-font)}
button,input,select,textarea{font:inherit}
header{background:#20252a;border-bottom:2px solid #0d151a}
.brand{letter-spacing:-.04em}.brand span{color:#e9b575}
main{max-width:1536px;padding-top:26px}
h1{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.04em}
.intro{margin-bottom:22px}.intro .eyebrow{margin-bottom:10px;letter-spacing:.11em}
.intro p{color:#cdbca7}.floor{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:24px}
button{background:#343630;border:2px solid #080e12;border-radius:7px;box-shadow:2px 3px 0 #0c1318;font-weight:600}
button.primary{color:#2a211b;background:#edb66b;border-color:#0d1519}
button:hover:not(:disabled){filter:brightness(1.1)}
.card{background:#2b2c2a;border:2px solid #111a20;border-radius:9px;box-shadow:3px 4px 0 #11191f}
input,select{background:#20272b;border-color:#776553}.roster li{background:#20272b}
.world{position:relative;width:100%;height:clamp(400px,66dvh,780px);overflow:hidden;border:3px solid #0c161d;border-radius:12px;background:#28231e;box-shadow:5px 6px 0 #0c151b}
.world canvas{display:block;width:100%;height:100%;touch-action:pan-y;outline-offset:-5px}
.world-caption{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.world-caption span{padding:8px 12px;background:#192328eb;border:1px solid #8d795a;border-radius:4px;font-size:12px;letter-spacing:.08em}
.world-interact{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#f0c688;color:#25231d;max-width:90%;white-space:normal}
.world-help{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;margin-top:12px;line-height:1.5;color:#d5c1a7}
.world-loading{position:absolute;inset:40% 10% auto;background:#1b2529;padding:16px;border:1px solid #8d795a;border-radius:6px;text-align:center}
.world-loading[hidden],.world-interact[hidden]{display:none}
.cabinet-list{margin-top:28px;padding:22px 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid #4c504c}
.cabinet-list>div{flex:1;min-width:240px}.cabinet-list h2{font-size:22px;margin-bottom:7px}.cabinet-list button{text-align:left;min-width:155px;background:#3c4647}.cabinet-list span{display:block;font-size:13px;color:#d0bba0;margin-top:6px}
.floor .world{position:sticky;top:20px;height:clamp(440px,72dvh,850px)}
@media(max-width:900px){.floor{grid-template-columns:1fr}.floor .world{position:relative;top:0;height:58dvh;min-height:400px}.panel{grid-template-columns:1fr}.intro{gap:14px}.intro p{max-width:none}.world-caption span:nth-child(2){display:none}}
@media(max-width:520px){header{gap:10px}.brand{font-size:18px}.intro h1{font-size:32px}.world{height:60dvh;min-height:400px}.cabinet-list{gap:12px}.cabinet-list button{flex:1;min-width:130px}.world-help{font-size:12px}.world-caption{top:10px;left:10px;right:10px}}
@media(max-height:500px) and (orientation:landscape){.world,.floor .world{height:75dvh;min-height:300px}.floor{grid-template-columns:minmax(280px,1fr) minmax(300px,1fr)}}

/* Portrait phones keep the native game shape above reachable touch controls. */
[hidden]{display:none!important}
.game-card{max-width:980px;margin:0 auto 26px}
.session-media{max-width:980px;margin:0 auto 26px}.session-media video{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#000;border-radius:8px}.session-media[data-state=live] .stream-status{color:#a2dc9c}
.game-card h2{margin:8px 0}.game-status{color:var(--muted);font-size:14px;margin-top:10px}
.play-surface{margin-top:18px;outline-offset:4px}
.runtime-screen{width:100%;aspect-ratio:4/3;background:#000;overflow:hidden;box-shadow:0 0 0 3px #0c151b;border-radius:8px}
.runtime-screen iframe{display:block;border:0;width:100%;height:100%;pointer-events:none}
.game-card .buttons{display:grid;grid-template-columns:repeat(2,48px);gap:8px;align-content:center}
.game-card .buttons button{width:48px;height:48px;padding:0}
.game-card .buttons button:last-child{grid-column:2}
.credit-controls{display:flex;justify-content:center;gap:14px;margin-top:10px}
.credit-controls button{touch-action:none;user-select:none;min-width:76px}
.game-card button[data-held=true]{background:var(--accent);color:#211d17}
@media(max-width:520px){.game-card{padding:12px}.game-card .control-row{gap:10px}.game-card .actions{gap:8px}.game-card h2{font-size:24px}}
@media(max-height:500px) and (orientation:landscape){
  .game-card{max-width:none}.play-surface{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:12px;align-items:center}
  .runtime-screen{grid-row:1/3;max-height:75dvh;width:auto;max-width:100%;justify-self:center;height:75dvh}
  .game-card .control-row{flex-direction:column;gap:6px;margin:0;align-items:center}
  .game-card .buttons{display:flex}.credit-controls{margin:0;gap:8px}
}

@media(max-width:520px){
  .playing header,.playing .intro,.playing #world-container,.watching header,.watching .intro,.watching #world-container{display:none}
  .playing main{padding-top:12px}
  .playing .game-card{margin-bottom:18px}
}

.session-controls{max-width:980px;margin:0 auto 20px}.remote-pad:focus{outline:2px solid var(--accent);outline-offset:4px}

.remote-pad .buttons{display:grid;grid-template-columns:repeat(2,48px);gap:8px;align-content:center}.remote-pad .buttons button{width:48px;height:48px;padding:0}.remote-pad .buttons button:last-child{grid-column:2}@media(max-width:520px){.session-controls{padding:12px}.remote-pad .control-row{gap:10px}}

/* Viewers need the received game, not the unavailable local-host launcher. */
.watching .game-card{display:none}
@media(max-width:520px){
  .watching main{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .watching .session-media,.watching .session-controls{padding:12px;margin-bottom:10px}
  .watching .session-media h2,.watching .session-controls h2{font-size:20px;line-height:1.2}
  .watching .session-media .eyebrow,.watching .session-media .test-note{display:none}
  .watching .stream-status,.watching .session-controls [role=status]{font-size:14px;line-height:1.4}
  .watching .session-media .actions{margin-top:8px}
  .watching .remote-pad .control-row{margin-top:8px}
}
@media(max-height:500px) and (orientation:landscape){
  .watching header,.watching .intro,.watching #world-container,.watching .game-container{display:none}
  .watching main{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:8px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .watching main:has(.session-controls:not([hidden])){grid-template-columns:minmax(0,1fr) 300px}
  .watching .floor{grid-column:1/-1;grid-template-columns:1fr}
  .watching .session-media,.watching .session-controls{padding:8px;margin:0;min-width:0}
  .watching .session-media h2,.watching .session-controls h2{font-size:20px;line-height:1.2}
  .watching .stream-status,.watching .session-controls [role=status]{font-size:14px;line-height:1.4}
  .watching .session-media .eyebrow,.watching .session-media .test-note{display:none}
  .watching .session-media video{width:min(100%,calc((100dvh - 132px)*4/3));margin:auto}
  .watching .session-media .actions{margin-top:8px;justify-content:center}
  .watching .remote-pad .control-row{margin-top:8px}
}
.roster li{flex-wrap:wrap}.chat-mute{margin-left:auto;font-size:13px;padding:8px 12px;min-height:48px}.chat-mute[aria-pressed=true]{border-color:var(--accent)}
.chat-report{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.chat-report select,.chat-report button{min-height:48px;max-width:100%;font-size:13px;padding:8px 12px}