:root{font-family:Trebuchet MS,Verdana,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#121416;background-color:#f3efe9;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{color:#f5f7f9;background-color:#0d1117}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:inherit;color:inherit}button{font-family:inherit}#root{height:100vh}:root{--panel-bg: rgba(255, 255, 255, .88);--board-bg: rgba(255, 255, 255, .82);--text-primary: #121416;--text-muted: #5b626a;--accent: #2e5aac;--accent-2: #2f8f5e;--ghost-border: #cdd4db;--cell-ring: rgba(255, 255, 255, .75);--cell-glow: rgba(255, 255, 255, .45);--preview-outline: rgba(255, 255, 255, .65);--background: radial-gradient( circle at 15% 20%, rgba(255, 245, 214, .9), transparent 55% ), radial-gradient( circle at 80% 0%, rgba(213, 238, 255, .85), transparent 55% ), radial-gradient( circle at 80% 90%, rgba(213, 242, 221, .9), transparent 60% ), linear-gradient(140deg, #fef8ea 0%, #f4efe8 42%, #e7f1eb 100%)}[data-theme=dark]{--panel-bg: rgba(15, 20, 26, .9);--board-bg: rgba(22, 28, 34, .92);--text-primary: #f5f7f9;--text-muted: #c2cad3;--accent: #7aa2ff;--accent-2: #6de2a1;--ghost-border: #38424f;--cell-ring: rgba(255, 255, 255, .25);--cell-glow: rgba(255, 255, 255, .18);--preview-outline: rgba(255, 255, 255, .35);--background: radial-gradient(circle at 15% 20%, rgba(32, 46, 64, .8), transparent 55%), radial-gradient(circle at 80% 0%, rgba(44, 30, 66, .75), transparent 55%), radial-gradient(circle at 80% 90%, rgba(20, 64, 56, .7), transparent 60%), linear-gradient(140deg, #0d1117 0%, #121821 50%, #0f1b16 100%)}.app{min-height:100vh;display:flex;flex-direction:column;color:var(--text-primary);background:var(--background)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem .75rem;gap:1rem}.icon-button{border:none;background:transparent;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--ghost-border)}.theme-icon{width:18px;height:18px;border-radius:50%;position:relative;display:inline-block;background:var(--text-primary);box-shadow:inset 0 0 0 4px var(--panel-bg)}.theme-icon.dark{background:#f5f7f9;box-shadow:inset 6px -6px #0d1117}.title{font-size:1.4rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.counter{font-size:1rem;font-weight:600;color:var(--text-primary)}.spacer{flex:1}.panel{margin:auto;background:var(--panel-bg);border-radius:28px;padding:2.5rem;width:min(520px,90vw);box-shadow:0 20px 60px #11171e1f,0 0 0 1px #ffffff80;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.home{width:min(1100px,92vw);margin:auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}.home-hero{background:var(--panel-bg);border-radius:28px;padding:2.5rem;box-shadow:0 24px 60px #11171e1f;display:grid;gap:1rem;align-content:start}.home-hero h1{margin:0;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.2}.home-hero p{margin:0;color:var(--text-muted)}.status-pill{background:color-mix(in srgb,var(--accent) 20%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding:.5rem .9rem;border-radius:999px;font-weight:600;color:var(--text-primary);width:fit-content}.start{width:100%;font-size:1.05rem;padding:1rem 1.5rem}.home-actions{display:grid;gap:1rem;align-content:start}.action-card{background:var(--panel-bg);border-radius:20px;padding:1.5rem;text-align:left;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:0 18px 40px #11171e1a;display:grid;gap:.4rem;font-size:1rem;color:var(--text-primary);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.action-card:before{content:"";width:44px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-bottom:.2rem}.action-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 22px 44px #11171e29}.action-card:active{transform:translateY(0);box-shadow:0 14px 30px #11171e1f}.action-card span:first-child{font-weight:700}.action-meta{color:var(--text-muted);font-size:.95rem}.panel.center{display:grid;place-items:center}.panel.howto{text-align:left;display:grid;gap:1rem}.panel.gameover{text-align:center;display:grid;gap:1rem}.entry-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center}.entry-row input{padding:.9rem 1rem;border-radius:12px;border:1px solid var(--ghost-border);background:transparent;color:var(--text-primary);font-size:1rem}.panel.gameover h2{margin:0;font-size:1.6rem}.gameover-score{font-size:2.6rem;font-weight:700;margin:0}.gameover-actions{display:grid;gap:.75rem}.panel.leaderboard{text-align:left;display:grid;gap:1.5rem}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.leaderboard-header h2{margin:0 0 .35rem;font-size:1.2rem}.leaderboard-header p{margin:0;color:var(--text-muted)}.leaderboard-list{display:grid;gap:.75rem}.leaderboard-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.75rem 1rem;border-radius:16px;background:color-mix(in srgb,var(--panel-bg) 80%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}.leaderboard-row .rank{font-weight:700;color:var(--accent)}.leaderboard-row .name{font-weight:600}.leaderboard-row .score,.muted{color:var(--text-muted)}.error-text{color:#e15353;font-weight:600}.success-text{color:var(--accent-2);font-weight:700}.inline-leaderboard{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.6rem;margin-top:.4rem}.inline-leaderboard input{padding:.75rem .9rem;border-radius:12px;border:1px solid var(--ghost-border);background:transparent;color:var(--text-primary);font-size:1rem}.confirm{width:44px;height:44px;border-radius:12px;border:none;background:var(--accent-2);color:#fff;font-weight:700;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 20px #11171e33}.panel.howto h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em;margin:.25rem 0 0}.panel.howto p{margin:0;color:var(--text-muted)}.panel.howto ul{margin:0;padding-left:1.2rem;color:var(--text-muted);display:grid;gap:.4rem}.logo{width:88px;height:88px;border-radius:24px;margin:0 auto 1.75rem;display:grid;place-items:center;font-weight:800;font-size:2rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.headline{font-size:1.35rem;font-weight:600;margin:0 0 2rem;color:var(--text-primary)}.cta-row,.cta-row-group{display:flex;flex-direction:column;gap:1rem}.primary,.accent,.secondary,.ghost{border:none;padding:.9rem 1.4rem;border-radius:999px;font-size:1rem;font-weight:600;cursor:pointer}.primary{background:var(--accent);color:#fff}.accent{background:var(--accent-2);color:#fff}.secondary{background:linear-gradient(135deg,#7aa2ff33,#6de2a133);color:var(--text-primary);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--ghost-border)}.board{--board-size: min(92vmin, 720px, calc(100svh - 160px) );display:grid;gap:6px;margin:0 auto 1.5rem;width:var(--board-size);height:min(calc(var(--board-size) * 1.12),calc(100svh - 120px));padding:clamp(.8rem,2vw,1.6rem);background:var(--board-bg);border-radius:24px;box-shadow:0 24px 70px #19222a1f,inset 0 0 0 1px #ffffffb3;animation:board-pulse 1.6s ease-in-out infinite}.cell{border:none;border-radius:10px;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;cursor:pointer;position:relative;overflow:hidden}.cell:disabled{opacity:.75;cursor:default}.cell.active{box-shadow:inset 0 0 0 calc(2px + 2px * var(--pulse)) var(--cell-ring)}.cell.preview{outline:3px solid var(--preview-outline);outline-offset:-2px;box-shadow:inset 0 0 0 2px #ffffff59}.cell.active:hover{transform:scale(1.03)}@property --pulse{syntax: "<number>"; inherits: true; initial-value: 0;}@keyframes board-pulse{0%{--pulse: 0}50%{--pulse: 1}to{--pulse: 0}}@media(prefers-reduced-motion:reduce){.board{animation:none}}@media(max-width:720px){.panel{padding:2rem 1.5rem}.home{width:min(520px,92vw)}.home-hero{padding:2rem}.board{padding:.8rem;gap:4px}}