@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101820;--panel:#17242c;--line:#31434e;--muted:#acc0cb;--accent:#ffb55d;--green:#c9f77f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(ellipse at 85% 0,#294234,transparent 45%),var(--bg);color:#f4f7fa;font:14px 'DM Sans',system-ui,sans-serif}header{max-width:1440px;margin:auto;padding:24px 5%;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--line)}header a{color:#fff;text-decoration:none;letter-spacing:.12em;font-weight:800}header a span{font-weight:400;color:var(--muted)}.badge{font-size:10px;letter-spacing:.12em;color:var(--green);border:1px solid var(--line);border-radius:24px;padding:8px 12px}main{max-width:1440px;margin:auto;padding:40px 5%}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--green)}h1{font:800 clamp(68px,11vw,136px)/.85 'Barlow Condensed',Impact,sans-serif;margin:22px 0;letter-spacing:-.02em}h1 span{color:var(--accent)}h2{font:700 34px/1.1 'Barlow Condensed',Impact,sans-serif;margin:4px 0 12px}h3{font-size:15px;margin:0 0 16px}p{line-height:1.65;color:var(--muted)}.intro>p:last-child{max-width:640px;font-size:17px}.panel{border:1px solid var(--line);border-radius:16px;background:var(--panel)}button,input{font:inherit}button{min-height:44px;border:1px solid transparent;background:var(--accent);color:#1c1b16;padding:11px 16px;border-radius:8px;font-weight:800;cursor:pointer}button:disabled{opacity:.4;cursor:default}button.secondary{background:#2a3d48;color:#fff;border-color:#506772}button.subtle{background:transparent;color:var(--muted);border-color:var(--line)}button:hover:enabled{filter:brightness(1.1)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:8px}input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:12px;background:#0c161f;color:#fff}label{display:grid;gap:8px;font-size:12px;color:var(--muted)}#notice{margin:26px 0;padding:12px 16px;border-left:3px solid var(--green);background:#ffffff05;font-size:13px;line-height:1.6}#notice.error{border-color:#ff907b;color:#ffc8bb}#entry{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:28px}#entry-form{display:grid;gap:14px}#enter{min-height:52px;font-size:16px}.room-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px 0 16px}.room-heading p{font-size:12px;margin:5px 0}.invite-link{margin-bottom:18px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}.screen{position:relative;overflow:hidden;display:grid;min-width:0;grid-template-areas:'video' 'players' 'tools' 'touch'}.screen #screen-wrap{grid-area:video;position:relative;aspect-ratio:4/3;background:#04080c;min-width:0;min-height:0}#game,#relay-video{display:block;width:100%;height:100%;object-fit:contain;outline:none}#cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:radial-gradient(ellipse,#2d443e,#0d1722)}#cover>span{font-size:74px}#cover p{max-width:350px;font-size:13px}#players{grid-area:players;display:flex;gap:6px;padding:8px;background:#0b151b;overflow:auto}.player-card{flex:1 0 100px;padding:9px 11px;min-width:0;border-top:3px solid var(--player);border-radius:6px;background:#1b2b34}.player-card.you{box-shadow:inset 0 0 0 1px var(--green)}.player-card strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.player-card small{color:var(--muted);font-size:10px}.screen-toolbar{grid-area:tools;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.screen-toolbar button{min-height:36px;font-size:11px;padding:8px 10px}.volume{display:flex;gap:6px;align-items:center;font-size:10px}.volume input{width:80px;padding:0;min-height:30px;accent-color:var(--accent)}.volume output{min-width:4ch}.lobby{padding:24px}.lobby h3:not(:first-child){margin-top:26px}.member{display:flex;align-items:center;gap:9px;margin:14px 0;min-width:0}.member .details{flex:1;min-width:0}.member strong{display:block;font-size:13px;overflow-wrap:anywhere}.member small{display:block;color:var(--muted);font-size:10px}.seat{width:32px;height:32px;display:grid;place-items:center;background:#304731;border-radius:50%;color:var(--green);font-weight:800}.dot{width:7px;height:7px;border-radius:50%;background:#687c89}.dot.online{background:var(--green)}.kick{min-height:34px;padding:6px 8px;font-size:10px;background:#54313a;color:#ffdae1;border-color:#986271}.lobby ol{padding-left:18px;font-size:12px;color:var(--muted);line-height:1.7}.lobby li{margin:10px 0}.small{font-size:11px}.controls{padding:22px;margin-top:20px}.controls p{font-size:12px}kbd{color:#fff;background:#2c3c48;padding:3px 5px;border-radius:4px;font:inherit}footer{font-size:11px;color:#879eac;padding-top:30px;line-height:1.9}footer a{color:var(--green)}dialog{max-width:420px;width:calc(100% - 32px);border:1px solid #697e8d;border-radius:16px;background:#1c2b35;color:#fff;padding:24px}dialog::backdrop{background:#02070bc9}dialog .buttons{justify-content:end}dialog p{font-size:13px}
.screen:fullscreen{height:100dvh;width:100%;border:none;border-radius:0;grid-template-rows:minmax(0,1fr) auto auto auto;background:#070e15}.screen:fullscreen #screen-wrap{height:100%;aspect-ratio:auto}
#phone-launch-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px;margin:16px 0;background:linear-gradient(120deg,#2a3d2d,#17242c)}#phone-launch-bar p{font-size:12px;margin:4px 0}#phone-head{display:none}#touch-controls{grid-area:touch;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;padding:18px;background:#111d27;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#movement{display:grid;justify-items:center;gap:8px}#stick{width:142px;height:142px;position:relative;border-radius:50%;border:1px solid #7d9aaa90;background:radial-gradient(circle,#384c60,#15232f 65%);box-shadow:inset 0 0 0 12px #0d182455;touch-action:none}#stick-knob{position:absolute;left:calc(50% - 31px);top:calc(50% - 31px);width:62px;height:62px;border:2px solid #b7d1e390;border-radius:50%;background:radial-gradient(circle at 30% 20%,#7d93aa,#3b5368);box-shadow:0 4px 12px #0005;pointer-events:none}.stick-label{font-size:9px;letter-spacing:.15em;color:#9fb4c6}.touch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:300px;width:100%;justify-self:center}.touch-actions button{min-height:62px;padding:8px 5px;border-radius:18px;background:#2f4555;color:#fff;border:1px solid #8ba2b690;touch-action:none;font-size:12px;box-shadow:0 3px 0 #080e16}.touch-actions button.held{transform:translateY(2px);filter:brightness(1.3)}#touch-pass{background:#ffbd70;color:#192020}#touch-jump{background:#68548f;border-color:#b9a3e2}#touch-turbo.active{background:#c9f77f;color:#17220f;border-color:#ecffd2}#phone-hint{margin:0;background:#0d1720;font-size:10px;line-height:1.5;text-align:center;color:#b5c6d9;padding:3px}
#phone-settings{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#071019ec;padding:12px;overflow:auto}#phone-settings section{max-width:500px;width:100%;max-height:100%;overflow:auto;padding:22px;border:1px solid #6a8192;border-radius:16px;background:#1a2c36}#phone-settings p{font-size:12px}#phone-settings .check{display:flex;align-items:center;gap:10px;margin:16px 0 6px;font-size:14px;color:#fff}.check input{width:24px;min-height:24px;accent-color:var(--green)}
body.phone-playing{overflow:hidden;overscroll-behavior:none}.screen.phone-view,.screen.phone-view:fullscreen{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;border:0;border-radius:0;display:grid;grid-template-areas:'head head head' 'left video right' 'players players players' 'hint hint hint';grid-template-columns:clamp(110px,18vw,170px) minmax(0,1fr) clamp(158px,24vw,230px);grid-template-rows:46px minmax(0,1fr) 50px 22px;gap:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at top,#233d3b,#09141f);overflow:hidden}.phone-view #screen-wrap{height:100%;width:100%;aspect-ratio:auto}.phone-view #phone-head{display:flex;grid-area:head;gap:6px;align-items:center;padding:3px 8px;min-width:0;border-bottom:1px solid #778f9d35}.phone-view #phone-head button{font-size:11px;min-height:38px;padding:6px 10px}#phone-state{flex:1;font-size:10px;color:var(--green);font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phone-view #touch-controls{display:contents}.phone-view #movement{grid-area:left;align-self:center}.phone-view .touch-actions{grid-area:right;align-self:center;padding:8px 10px;gap:10px}.phone-view .touch-actions button{min-height:62px}.phone-view #stick{width:clamp(100px,16vw,144px);height:clamp(100px,16vw,144px)}.phone-view .screen-toolbar{display:none}.phone-view #players{padding:4px 6px;gap:5px;align-items:stretch}.phone-view .player-card{padding:5px 8px;flex-basis:90px}.phone-view .player-card strong{font-size:12px}.phone-view .player-card small{font-size:10px}.phone-view #phone-hint{grid-area:hint;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phone-view #cover>span{display:none}.phone-view #cover h2{font-size:24px}.phone-view #cover p{font-size:12px}.phone-view #cover{padding:12px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr) 240px}.lobby{padding:18px}}@media(max-width:720px){main{padding:24px 5%}header a span{display:none}.badge{font-size:8px}.layout{grid-template-columns:minmax(0,1fr)}.room-heading{flex-direction:column;align-items:start}.room-heading .buttons{width:100%}#start{flex:1}#entry{grid-template-columns:1fr;gap:16px;padding:22px}#members{display:grid;grid-template-columns:1fr 1fr;gap:10px}.member{flex-wrap:wrap}.intro>p:last-child{font-size:15px}#phone-launch-bar{padding:14px}#phone-launch-bar strong{font-size:14px}}
@media(orientation:portrait){.screen.phone-view{grid-template-areas:'head head' 'video video' 'players players' 'left right' 'hint hint';grid-template-columns:42% minmax(0,1fr);grid-template-rows:46px minmax(130px,1fr) 52px 198px 24px}.phone-view #stick{width:126px;height:126px}.phone-view #phone-sound{display:none}.phone-view #phone-state{font-size:9px}.phone-view .touch-actions button{min-height:64px}.phone-view #phone-hint{font-size:9px}}

@media(max-width:720px){.intro h1{font-size:clamp(50px,14vw,80px)}}