:root{--bg:#fafbfc;--surface:#ffffff;--border:#ecedf1;--border-strong:#dfe1e7;--text:#16181d;--muted:#7c828d;--accent:#4f46e5;--accent-soft:#eef0ff;--win:#15a34a;--win-soft:#e9f7ef;--lose:#e5484d;--draw:#8b8f98;--radius:16px;--radius-sm:12px;--shadow:0 1px 2px rgba(20,22,29,0.04),0 10px 30px rgba(20,22,29,0.06)}*{box-sizing:border-box}body,html{margin:0;padding:0}body{min-height:100vh;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{max-width:940px;margin:0 auto;padding:56px 20px 72px}.hero{text-align:center;margin-bottom:44px}.hero .logo{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.3px;font-size:13px;color:var(--muted);margin-bottom:20px}.hero .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin:0 0 14px}.hero p{color:var(--muted);font-size:clamp(15px,2.2vw,17px);line-height:1.55;max-width:500px;margin:0 auto}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-gap:16px;gap:16px}.card{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;min-height:196px}.card.playable{cursor:pointer}.card.playable:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}.card.soon{opacity:.55}.card .emoji{font-size:34px;line-height:1}.card h2{font-size:18px;font-weight:650;letter-spacing:-.01em;margin:0}.card .desc{color:var(--muted);font-size:14px;line-height:1.5;flex:1 1}.card .foot{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}.badge{font-size:11px;font-weight:600;letter-spacing:.2px;padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong)}.badge.play{color:#fff;background:var(--accent);border-color:transparent}.badge.soon{color:var(--muted)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:15px;font-weight:600;padding:13px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:transform .1s ease,background .15s ease,border-color .15s ease}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:transparent;color:#fff}.btn.primary:hover:not(:disabled){background:#4338ca;color:#fff}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover:not(:disabled){color:var(--accent);border-color:transparent}.btn.small{padding:8px 13px;font-size:13px}.input{width:100%;padding:14px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:16px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input::placeholder{color:#b3b7bf}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.input.code{text-transform:uppercase;letter-spacing:8px;font-weight:700;text-align:center;font-size:22px}.game{max-width:560px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.topbar a{color:var(--muted);font-size:14px;transition:color .15s ease}.topbar a:hover{color:var(--accent)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}.panel h1{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.02em}.panel .sub{color:var(--muted);margin:0 0 22px;font-size:15px;line-height:1.55}.stack{flex-direction:column}.divider,.stack{display:flex;gap:12px}.divider{align-items:center;color:var(--muted);font-size:13px;margin:4px 0}.divider:after,.divider:before{content:"";flex:1 1;height:1px;background:var(--border)}.error{background:#fdecec;border:1px solid #f7c9ca;color:#b4262b;padding:11px 14px;border-radius:var(--radius-sm);font-size:14px}.codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent-soft);border:1px solid #dcdcfb;border-radius:var(--radius-sm);padding:16px 18px}.codebox .code{font-size:32px;font-weight:800;letter-spacing:10px;color:var(--accent)}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:10px;gap:10px;margin-bottom:22px}.player{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center;transition:border-color .15s ease}.player.me{border-color:var(--accent);background:var(--accent-soft)}.player .name{font-size:13px;color:var(--muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .pts{font-size:32px;font-weight:800;letter-spacing:-.02em}.vs{font-weight:600;font-size:13px}.status,.vs{color:var(--muted)}.status{text-align:center;font-size:15px;min-height:22px;margin-bottom:4px}.status.turn{color:var(--accent);font-weight:600}.round-label{text-align:center;font-size:13px;color:var(--muted);margin-bottom:12px}.reveal{text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px 16px;margin-bottom:18px}.duel{display:flex;align-items:center;justify-content:center;gap:20px}.hand{line-height:1;display:inline-block;transform-origin:center;color:var(--text)}.hand svg{display:block;width:52px;height:52px}.choice .icon{color:var(--text)}.choice .icon,.game-icon{display:flex;justify-content:center}.game-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);align-items:center}.hand.mine,.hand.theirs{animation:handIn .5s cubic-bezier(.25,1.4,.5,1) both}.hand.theirs{animation-delay:.12s}.hand.win{color:var(--win);animation:handIn .5s cubic-bezier(.25,1.4,.5,1) both,winnerBounce .9s ease-in-out .5s 2;filter:drop-shadow(0 6px 14px rgba(21,163,74,.25))}.hand.lose{color:var(--muted);opacity:.5}.duel .vs2{font-size:14px;font-weight:700;color:var(--muted);animation:fadeIn .4s ease .24s both}.verdict{margin-top:14px;font-weight:700;font-size:16px;animation:fadeIn .4s ease .4s both}.verdict.win{color:var(--win)}.verdict.lose{color:var(--lose)}.verdict.draw{color:var(--draw)}@keyframes handIn{0%{transform:translateY(-16px) scale(.5) rotate(-8deg);opacity:0}60%{transform:translateY(0) scale(1.18) rotate(0deg);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes winnerBounce{0%,to{transform:translateY(0) scale(1.08)}50%{transform:translateY(-8px) scale(1.16)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.choices{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px;margin-top:14px}.choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-sm);padding:20px 8px;color:var(--text);transition:transform .12s ease,border-color .15s ease,background .15s ease}.choice:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}.choice:disabled{opacity:.4;cursor:not-allowed}.choice .big{font-size:40px;line-height:1;display:block}.choice .lbl{display:block;margin-top:8px;font-size:13px;color:var(--muted)}.center{text-align:center}.muted{color:var(--muted);font-size:14px}.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:480px){.wrap{padding:36px 16px 56px}.codebox .code{font-size:26px;letter-spacing:6px}.hand svg{width:44px;height:44px}}@media (prefers-reduced-motion:reduce){.duel .vs2,.hand.mine,.hand.theirs,.hand.win,.verdict{animation:none}}.actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.ttt{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;max-width:300px;margin:8px auto 0}.ttt-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;background:var(--bg);border:1px solid var(--border-strong);border-radius:14px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease}.ttt-cell:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}.ttt-cell:disabled{cursor:default}.ttt-cell.win{background:var(--win-soft);border-color:var(--win)}.mark{line-height:1;animation:pop .25s ease}.mark.p1{color:var(--accent)}.mark.p2{color:#f59e0b}.c4{display:grid;grid-template-columns:repeat(7,1fr);grid-gap:6px;gap:6px;background:var(--accent-soft);border:1px solid #dcdcfb;padding:8px;border-radius:16px;max-width:384px;margin:8px auto 0}.c4-col{display:flex;flex-direction:column;gap:6px;background:transparent;border:none;padding:0;cursor:pointer}.c4-col:disabled{cursor:default}.c4-col:hover:not(:disabled) .c4-disc.empty{background:#e3e4fb}.c4-disc,.c4-slot{display:block}.c4-disc{aspect-ratio:1;border-radius:50%;background:#fff;transition:background .15s ease}.c4-disc.p1{background:var(--accent);animation:pop .25s ease}.c4-disc.p2{background:#f59e0b;animation:pop .25s ease}.c4-disc.win{box-shadow:0 0 0 3px var(--win)}.bs-section-label{font-weight:600;margin:0 0 8px}.bs-legend,.bs-section-label{font-size:13px;color:var(--muted);text-align:center}.bs-legend{margin-top:12px;letter-spacing:2px}.bs-grid{display:grid;grid-gap:4px;gap:4px;max-width:344px;margin:0 auto}.bs-cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--border-strong);background:#eef2fb;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;transition:background .12s ease}button.bs-cell{cursor:pointer}button.bs-cell:disabled{cursor:default}button.bs-cell.water:hover:not(:disabled){background:#dbe3f7}.bs-cell.water{background:#eef2fb;color:#8ea2c4}.bs-cell.ship{background:#475569;border-color:#334155}.bs-cell.hit{background:var(--lose);border-color:#c93b40;animation:pop .2s ease}.bs-cell.miss{background:#cdd5e3;color:#5b6472}.bs-cell.reveal{background:#94a3b8;border-color:#7c8494}