: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, .85);--cell-glow: rgba(255, 255, 255, .6);--preview-outline: rgba(255, 255, 255, .8);--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, .4);--cell-glow: rgba(255, 255, 255, .25);--preview-outline: rgba(255, 255, 255, .55);--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}.topbar-actions{display:flex;align-items:center;gap:.5rem}.icon-button{background:transparent;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--ghost-border);transition:all .15s ease}.icon-button:hover{border-color:var(--accent);transform:scale(1.05)}.settings-popover{position:relative}.settings-button{color:var(--text-primary)}.settings-icon{transition:transform .2s ease}.settings-button:hover .settings-icon{transform:rotate(30deg)}.settings-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--panel-bg);border:1px solid var(--ghost-border);border-radius:16px;padding:8px;box-shadow:0 20px 60px #11171e26,0 0 0 1px #ffffff1a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;animation:popover-in .15s ease}@keyframes popover-in{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.settings-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .15s ease;background:transparent;border:none;width:100%;text-align:left;font-size:.95rem;color:var(--text-primary)}.settings-item:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}.settings-item.active{background:color-mix(in srgb,var(--accent) 15%,transparent)}.settings-icon-wrap{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}.settings-label{flex:1;font-weight:500}.settings-divider{height:1px;background:var(--ghost-border);margin:6px 0}.settings-check{color:var(--accent);display:grid;place-items:center}.colorblind-svg{color:var(--text-primary)}.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),0 0 calc(8px + 6px * var(--pulse)) var(--cell-glow)}.cell.preview{outline:3px solid var(--preview-outline);outline-offset:-2px;box-shadow:inset 0 0 0 2px #ffffff80,0 0 20px #fff6}.cell.active:hover{transform:scale(1.06);box-shadow:inset 0 0 0 4px var(--cell-ring),0 0 24px #ffffffb3}.cell-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(14px,2.5vmin,24px);font-weight:800;color:#fffffff2;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1}.cell.has-symbol{position:relative}@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}}