:root{--ink:#07152f;--navy:#071a3d;--blue:#2459f3;--cyan:#28d7d0;--yellow:#ffd447;--paper:#f4f7fc}*{box-sizing:border-box}html{min-width:320px;background:var(--navy)}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 10%,rgba(36,89,243,.12),transparent 30rem),linear-gradient(135deg,#fbfcfe,#e9eef8);font-family:Arial,Helvetica,sans-serif}button,a{font:inherit}.skip{position:fixed;left:1rem;top:-5rem;background:#fff;padding:1rem;z-index:10}.skip:focus{top:1rem}header{min-height:72px;padding:12px clamp(16px,4vw,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;color:#fff;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.14)}.brand{color:#fff;text-decoration:none;font-size:1.2rem;letter-spacing:-.05em}.brand span{color:#7aa1ff}header p{margin:0;color:#a9bff1;font-size:.68rem;font-weight:900;letter-spacing:.16em}.return{justify-self:end;color:#fff;font-size:.8rem;font-weight:800;text-underline-offset:4px}main{width:min(1380px,calc(100% - 36px));margin:auto;padding:clamp(34px,6vw,80px) 0;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(590px,1.35fr);gap:clamp(28px,5vw,80px);align-items:center}.eyebrow{margin:0 0 18px;color:var(--blue);font-size:.72rem;font-weight:900;letter-spacing:.16em}.intro h1{margin:0;font-size:clamp(3rem,5.8vw,6rem);line-height:.83;letter-spacing:-.075em}.intro h1 span{color:var(--blue)}.lead{max-width:540px;margin:28px 0;color:#51617c;font-size:1.1rem;line-height:1.65}.keys{display:flex;flex-wrap:wrap;gap:8px}.keys span{padding:8px 10px;border:1px solid rgba(7,21,47,.14);border-radius:8px;background:rgba(255,255,255,.7);color:#586681;font-size:.7rem;font-weight:700}kbd{display:inline-block;min-width:23px;margin-right:3px;padding:3px 5px;border:1px solid #bbc4d4;border-bottom-width:3px;border-radius:5px;color:var(--ink);background:#fff;font-weight:900;text-align:center}.console{overflow:hidden;color:#fff;background:var(--navy);border:1px solid rgba(255,255,255,.13);border-radius:27px;box-shadow:0 30px 80px rgba(7,26,61,.25)}.console-head{min-height:62px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.13)}.console-head div{display:flex;flex-direction:column;gap:3px}.console-head small,.stat span,.next>span{color:#9bb4ef;font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.console-head button{padding:7px 10px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:99px;font-size:.64rem;font-weight:900}.play-area{padding:18px;display:grid;grid-template-columns:minmax(260px,1fr) 180px;gap:18px}.board{position:relative;width:min(100%,390px);aspect-ratio:1/2;justify-self:center;overflow:hidden;background:#020e22;border:1px solid rgba(255,255,255,.17);border-radius:15px;box-shadow:inset 0 0 45px rgba(0,0,0,.4)}#board{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(2,14,34,.85);backdrop-filter:blur(4px);transition:.2s}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay small{margin-bottom:12px;color:var(--cyan);font-size:.65rem;font-weight:900;letter-spacing:.15em}.overlay strong{font-size:clamp(1.8rem,3.5vw,3rem);line-height:.95;letter-spacing:-.05em}.overlay strong small{font-size:1rem;color:#fff}.overlay button,.actions button{margin-top:22px;padding:13px 16px;border:0;border-radius:9px;color:var(--navy);background:var(--yellow);font-weight:900;cursor:pointer}aside{display:flex;flex-direction:column;gap:9px}.stat,.next{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:12px}.stat strong{font-size:1.3rem;font-variant-numeric:tabular-nums}.stat.main{background:var(--blue)}.stat.main span{color:#dfe7ff}.stat.main strong{font-size:1.9rem}.next{flex-direction:column}.next canvas{width:100%;max-width:120px;height:auto}.actions{margin-top:auto;display:grid;gap:7px}.actions button{width:100%;margin:0;padding:10px;font-size:.72rem}.actions button+button{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.2)}.touch{display:none;grid-template-columns:repeat(5,1fr);gap:7px;padding:0 12px 12px}.touch button{min-height:54px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);border-radius:10px;font-size:1.45rem;font-weight:900;touch-action:manipulation}.touch .drop{color:var(--navy);background:var(--yellow);font-size:.66rem}footer{padding:22px clamp(16px,4vw,64px);display:flex;justify-content:space-between;gap:18px;color:#a9b9dc;background:var(--navy);font-size:.72rem}footer strong,footer a{color:#fff}@media(max-width:1000px){main{grid-template-columns:1fr}.intro{text-align:center}.lead,.keys{margin-left:auto;margin-right:auto;justify-content:center}.console{width:min(750px,100%);margin:auto}}@media(max-width:650px){header{min-height:58px;padding:9px 12px;grid-template-columns:1fr auto}header p{display:none}.return{font-size:.68rem}main{width:min(100% - 18px,530px);padding:24px 0;gap:22px}.intro h1{font-size:clamp(2.8rem,16vw,5rem)}.lead{margin:18px 0;font-size:.95rem}.keys{display:none}.console{border-radius:17px}.console-head{min-height:52px;padding:9px 11px}.play-area{padding:9px;grid-template-columns:minmax(210px,1fr) 82px;gap:7px}.board{border-radius:9px}aside{gap:5px}.stat,.next{padding:7px 6px;align-items:flex-start;flex-direction:column;gap:2px;border-radius:8px}.stat strong{font-size:1rem}.stat.main strong{font-size:1.25rem}.stat span,.next>span{font-size:.46rem}.next{align-items:center}.actions{display:none}.touch{display:grid}footer{flex-direction:column;align-items:center;text-align:center}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}