:root{color-scheme:dark;--bg:#10141d;--card:#191f2b;--line:#303747;--muted:#9ba6ba;--mint:#72efca}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 15%,#1c2d32 0,transparent 42%),var(--bg);color:#f4f6fc;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:15px}header,main,footer{max-width:1320px;margin:auto}header{height:96px;display:flex;align-items:center;gap:25px;padding:0 35px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:var(--mint);text-decoration:none;font-size:32px;font-weight:900}.brand>span{color:white;font-size:20px;letter-spacing:-1px}.mint,em{color:var(--mint)}.tag{font-size:10px;letter-spacing:1.5px;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:8px 12px}header #sound{margin-left:auto}main{padding:42px 35px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px}#welcome{display:grid;grid-template-columns:1.3fr .85fr;gap:70px;align-items:center;min-height:620px}.hero{position:relative;min-height:570px;padding-top:28px}h1{font-size:clamp(40px,4.5vw,66px);line-height:1.08;letter-spacing:-3px;margin:25px 0}em{font-style:normal}p{color:var(--muted);line-height:1.7}h2{font-size:28px;letter-spacing:-.8px;margin:14px 0}h3{font-size:15px;margin:0 0 14px}.features{display:flex;gap:18px;font-size:11px;color:#c2cbdb;margin-top:30px}.card{background:linear-gradient(135deg,#202735,#191f2b);border:1px solid var(--line);border-radius:18px}.entry{padding:32px}.entry h2{font-size:30px}.entry>p{font-size:13px;margin-bottom:25px}label{display:block;font-size:10px;letter-spacing:1.4px;color:#bac5d7;font-weight:700;margin:20px 0 10px}input{width:100%;background:#101620;border:1px solid #3a4457;color:white;padding:15px;border-radius:9px;font:inherit;outline:none}input:focus{border-color:var(--mint);box-shadow:0 0 0 3px #72efca16}button{font:inherit;border:1px solid #3a4558;border-radius:9px;background:#273244;color:white;padding:12px 16px;cursor:pointer;transition:.15s}button:hover{filter:brightness(1.15)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--mint);color:#10241f;font-weight:800;border-color:var(--mint)}.entry .primary{display:flex;justify-content:space-between;width:100%;margin-top:16px}.divider{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted);margin:26px 0}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.joinrow{display:flex;gap:9px}.joinrow input{text-transform:uppercase;letter-spacing:3px}.joinrow button{white-space:nowrap}.hint{font-size:11px;color:var(--muted);line-height:1.8;margin-top:25px}.quiet{background:transparent;font-size:12px}.illustration{position:relative;height:140px;width:280px;margin:30px 0 0 70px;transform:rotate(-8deg)}.orb{position:absolute;width:100px;height:100px;left:80px;top:22px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#596174,#171b26 65%);box-shadow:10px 15px 0 #080c1455,0 0 70px #72efca12;border:2px solid #4a5262}.orb:before{content:'';position:absolute;width:18px;height:22px;background:#667284;left:57px;top:-16px;transform:rotate(22deg);border-radius:3px}.orb:after{content:'';position:absolute;left:76px;top:-32px;width:25px;height:23px;border-top:5px solid #edc275;border-right:5px solid #edc275;border-radius:0 20px 0 0}.fuse{position:absolute;left:173px;top:-34px;font-size:48px;color:#f9c87d}.chip{position:absolute;background:#253b37;border:1px solid #426459;padding:8px 12px;border-radius:6px;font-size:9px;letter-spacing:1px;color:var(--mint);font-weight:800}.c1{left:-20px;top:40px;transform:rotate(-4deg)}.c2{right:-20px;bottom:15px;transform:rotate(14deg)}footer{border-top:1px solid var(--line);padding:24px 35px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#768297}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topline h2{margin-bottom:0}.topbuttons{display:flex;gap:10px;align-items:center}#copy{padding:3px 8px;margin-left:6px;color:var(--mint);font-size:12px;letter-spacing:1px;background:#23382f}.layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:22px}.boardwrap{overflow:hidden}.boardtop,.boardbottom{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;padding:17px 20px;color:var(--muted)}#timer{color:var(--mint);font-weight:700}.canvaswrap{position:relative;background:#111923}canvas{width:100%;display:block;image-rendering:auto}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#0b121bd9;padding:25px;backdrop-filter:blur(3px)}#overlay[hidden]{display:none}#overlay h2{font-size:clamp(24px,3vw,42px);margin:18px 0 0}#overlay p{font-size:13px;max-width:340px}.roster,.guide{padding:20px}.paneltitle{display:flex;justify-content:space-between}.paneltitle span{font-size:11px;color:var(--muted)}.player{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.avatar{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:#121c24;font-weight:900}.playername{font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playername small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.score{font-size:12px;color:#f1cf86}.roster>button{width:100%;margin-top:12px;font-size:12px}.small{font-size:10px;line-height:1.7}.guide{margin-top:18px}.guide p{font-size:11px}kbd{background:#101620;border:1px solid #3c4658;border-radius:4px;padding:3px 5px;font-size:10px;color:#d4deec}.power{display:flex;align-items:center;gap:11px;margin:15px 0;font-size:11px}.power b{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#3e344b;color:#c6a1ff;font-size:21px}.power small{display:block;color:var(--muted);font-size:10px;margin-top:3px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#e9f9f3;color:#132920;border-radius:12px;padding:14px 22px;box-shadow:0 8px 50px #0009;display:none;z-index:20;font-size:13px;max-width:90vw}.touch{display:none;justify-content:space-between;padding:20px 10px;user-select:none;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,48px);gap:5px}.dpad button{padding:12px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}#touchbomb{border-radius:50%;width:90px;height:90px;font-size:28px;color:#132920;background:var(--mint)}#touchbomb small{display:block;font-size:9px}body.playing{overscroll-behavior:none}[hidden]{display:none!important}@media(pointer:coarse){.touch{display:flex}}@media(max-width:950px){#welcome{gap:30px}.features{flex-wrap:wrap}.layout{grid-template-columns:minmax(0,1fr) 230px}.roster,.guide{padding:15px}header,main{padding-left:20px;padding-right:20px}header>.tag{display:none}}@media(max-width:700px){header{height:76px}.brand>span{font-size:17px}main{padding-top:22px}#welcome{grid-template-columns:1fr;gap:10px}.hero{min-height:unset;padding-top:0}.hero h1{font-size:43px}.hero>p{font-size:13px}.illustration{display:none}.features{margin:20px 0 25px}.entry{padding:25px}.layout{grid-template-columns:1fr}.guide{display:none}.topline h2{font-size:21px}.topbuttons .tag{font-size:8px;padding:7px}.topline{gap:10px}footer{gap:20px;font-size:8px;padding:20px}.boardtop,.boardbottom{padding:13px 10px;font-size:8px}#players{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.touch{display:flex}#overlay p{font-size:11px}.topbuttons{gap:5px}}
