@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap";:root{color:#eaf4ff;font-synthesis:none;background:#050b14;font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}.shell{background-color:#0000;background-image:radial-gradient(circle at 18% 12%,#ff5d3a2e,#0000 30%),radial-gradient(circle at 82% 78%,#189dff33,#0000 34%),linear-gradient(145deg,#07111f,#050b14 60%);background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;min-height:100vh;padding:24px;display:grid}.lobby{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(145deg,#0d1b2ef0,#050c17ed);border:1px solid #ffffff1a;border-radius:28px;width:min(880px,100%);padding:clamp(28px,6vw,52px);position:relative;overflow:hidden;box-shadow:0 34px 110px #00000094,inset 0 1px #ffffff0f}.lobby:before{content:"";filter:blur(4px);pointer-events:none;background:#36aaff1f;border-radius:50%;width:360px;height:360px;position:absolute;top:-190px;right:-170px}.lobby:after{content:"";pointer-events:none;background:#ff5b371a;border-radius:50%;width:300px;height:300px;position:absolute;bottom:-180px;left:-180px}.lobby>*{z-index:1;position:relative}.eyebrow{color:#7dc9ff;text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:800}h1{letter-spacing:-.055em;text-shadow:0 12px 34px #00000080;margin:10px 0;font-size:clamp(42px,9vw,76px);line-height:.96}.fire{color:#ff7256;text-shadow:0 0 30px #ff533247}.water{color:#58c4ff;text-shadow:0 0 30px #35b2ff4d}.brand-seals{align-items:center;gap:9px;margin-top:18px;display:flex}.brand-seals i{opacity:.7;background:linear-gradient(90deg,#ff6b4d,#56c2ff);width:24px;height:1px}.brand-seal{border-radius:10px;place-items:center;width:31px;height:31px;font:800 12px ui-monospace,monospace;display:grid;transform:rotate(45deg)}.brand-seal:first-letter{transform:rotate(-45deg)}.ember-seal{color:#ffd6cc;background:#ff5b3724;border:1px solid #ff70508c;box-shadow:0 0 22px #ff552d29}.tide-seal{color:#d4f1ff;background:#34a6ff24;border:1px solid #47b9ff8c;box-shadow:0 0 22px #30adff29}.subtitle{color:#9fb0c5;margin:0 0 34px;line-height:1.65}.or{color:#687b91;align-items:center;gap:12px;margin:24px 0;font-size:12px;font-weight:700;display:flex}.or:before,.or:after{content:"";background:#ffffff17;flex:1;height:1px}.join-row{grid-template-columns:1fr auto;gap:12px;display:grid}input{color:#fff;text-transform:uppercase;letter-spacing:.22em;background:#ffffff0e;border:1px solid #ffffff21;border-radius:14px;outline:none;width:100%;padding:15px 18px;font-weight:800}input:focus{border-color:#51b8ff;box-shadow:0 0 0 3px #51b8ff1f}.primary,.secondary,.ghost{color:#06101d;background:linear-gradient(110deg,#ff6b4e,#a86cbe 48%,#48bfff);border:0;border-radius:14px;padding:15px 22px;font-weight:800;transition:transform .16s,filter .16s,border-color .16s;box-shadow:0 10px 30px #329adc26}.primary:hover,.secondary:hover,.ghost:hover,.solo-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary{width:100%}.secondary{background:#e7f4ff}.ghost{color:#c9d7e7;background:#ffffff12}.solo-button{color:#dcecff;background:#ffffff0e;border:1px solid #ffffff24;border-radius:14px;width:100%;margin-top:10px;padding:13px 20px;font-weight:800}.solo-button small{color:#7f96ad;margin-left:8px;font-weight:600}.online-create{color:#ffd4cb;border-color:#ff6f5040}.level-progress{margin-top:22px}.progress-heading{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.progress-heading div{align-items:baseline;gap:12px;display:flex}.progress-heading strong{font-size:14px}.progress-heading span{color:#7f96ad;font-size:12px}.reset-progress{color:#8195aa;background:#ffffff0d;border:0;border-radius:8px;padding:6px 9px;font-size:11px;font-weight:700}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.level-card{color:#b9c9da;text-align:left;background:linear-gradient(145deg,#ffffff0e,#ffffff05);border:1px solid #ffffff17;border-radius:12px;align-content:center;gap:3px;min-width:0;min-height:88px;padding:10px;transition:transform .16s,border-color .16s,background .16s;display:grid;position:relative;overflow:hidden}.level-card:after{content:"";filter:blur(8px);background:#3fb4ff14;border-radius:50%;height:55px;position:absolute;inset:auto -25% -42% 35%}.level-card:hover{background:#4babeb17;border-color:#5cc0ff80}.level-card.complete{background:#52dc910f;border-color:#52dc914d}.level-number{color:#65c2ff;font:800 11px ui-monospace,monospace}.level-card strong{color:#dce9f7;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.level-card small{color:#71859a;font-size:9px}.level-card.complete small{color:#68c995}button:disabled{opacity:.45;cursor:wait}.error{color:#ff8975;min-height:22px;margin:14px 0 0;font-size:13px}.game-shell{background:radial-gradient(circle at 50% 0,#0b1c31,#030812 58%);place-items:center;min-height:100vh;padding:20px;display:grid}.game-frame{width:min(1120px,100%);position:relative}#game{border:1px solid #78c6ff29;border-radius:20px;width:100%;overflow:hidden;box-shadow:0 28px 100px #000,0 0 50px #207fc414}#game canvas{display:block;width:100%!important;height:auto!important}.topbar{background:#0a1524b8;border:1px solid #ffffff12;border-radius:16px;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding:8px 10px;display:flex;box-shadow:inset 0 1px #ffffff09}.top-actions{align-items:center;gap:10px;display:flex}.level-select{color:#dcecff;background:#101b2b;border:1px solid #ffffff1f;border-radius:14px;max-width:210px;padding:13px 14px;font-weight:800}.switch-role{color:#8fd4ff}.restart-level{color:#ffbe92}.test-complete{color:#d8b7ff}.sound-button{color:#b7efc9}.fullscreen-button{color:#f0dc8d}.room-meta{align-items:center;gap:12px;display:flex}.room-code{letter-spacing:.16em;font-size:19px;font-weight:800}.status-dot{background:#f4b942;border-radius:50%;width:9px;height:9px;box-shadow:0 0 12px}.status-dot.online{background:#52dc91}.status-dot.offline{background:#ff675e}.objective{color:#91a5bb;background:linear-gradient(90deg,#ff66480b,#ffffff09 40%,#45b7ff0d);border:1px solid #ffffff14;border-radius:13px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:12px;padding:11px 15px;font-size:12px;display:grid}.objective strong{color:#eaf4ff}.objective time{color:#78c8ff;font:700 13px ui-monospace,monospace}.waiting,.victory{z-index:4;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#030812b8;border-radius:20px;place-items:center;display:grid;position:absolute;inset:112px 0 0}.waiting-card{text-align:center;padding:28px}.waiting-card h2{margin:0 0 8px;font-size:26px}.waiting-card p{color:#9fb0c5}.waiting-code{letter-spacing:.22em;margin:18px 0;font-size:38px;font-weight:800}.victory{z-index:6;background:#030812d1}.victory-card{text-align:center;background:#0a1727;border:1px solid #ffffff1f;border-radius:24px;width:min(430px,90%);padding:38px;box-shadow:0 28px 80px #000}.victory-card h2{margin:10px 0;font-size:30px}.victory-card p{color:#9fb0c5;margin:0 0 24px}.hidden{display:none!important}.diagnostics{z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#030812e0;border:1px solid #ffffff1a;border-radius:14px;width:270px;position:absolute;top:124px;right:12px}.diagnostics summary{cursor:pointer;text-transform:uppercase;letter-spacing:.13em;padding:12px 14px;font-size:12px;font-weight:800}.diagnostics-grid{color:#8fa3ba;grid-template-columns:1fr auto;gap:8px 14px;padding:4px 14px 14px;font:12px/1.4 ui-monospace,monospace;display:grid}.diagnostics-grid strong{color:#e8f4ff;text-align:right}.game-frame:fullscreen{background:#030812;flex-direction:column;width:100%;height:100%;padding:16px;display:flex}.game-frame:fullscreen #game{background:#081424;flex:1;place-items:center;min-height:0;display:grid;container-type:size}.game-frame:fullscreen #game canvas{width:min(100cqw,177.778cqh)!important;max-width:none!important;height:min(100cqh,56.25cqw)!important;max-height:none!important}@media (width<=600px){.join-row{grid-template-columns:1fr}.topbar{align-items:flex-start}.objective{grid-template-columns:1fr auto}.objective span{grid-area:2/1/auto/-1}.diagnostics{width:100%;margin-top:12px;position:static}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}