:root{--cell:#0000000d;--board:#faf8ef;--board-border:#e8e4d8}:root[data-theme=dark]{--cell:#ffffff0f;--board:#17171a;--board-border:#2a2a2e}.game{gap:.9rem;max-width:26rem;margin:0 auto;display:grid}.hud{justify-content:space-between;align-items:center;gap:1rem;display:flex}.scores{gap:.5rem;display:flex}.score{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:8px;min-width:4.75rem;padding:.35rem .9rem}.score span{letter-spacing:.09em;color:var(--text-muted);font-size:.6rem;display:block}.score strong{font-variant-numeric:tabular-nums;font-size:1.15rem}.new-game{background:var(--text);color:var(--bg);cursor:pointer;border:none;border-radius:8px;padding:.6rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600}.new-game:hover{opacity:.85}.board{aspect-ratio:1;background:var(--board);border:1px solid var(--board-border);touch-action:none;user-select:none;border-radius:12px;width:100%;padding:6px;position:relative}.field{width:100%;height:100%;position:relative}.cells{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);display:grid;position:absolute;inset:0}.cell{background:var(--cell);border-radius:7px;margin:5px}.tile{width:25%;height:25%;transition:transform .11s ease-out;position:absolute;top:0;left:0}.tile-inner{font-variant-numeric:tabular-nums;color:#f9f6f2;background:#3c3a32;border-radius:7px;justify-content:center;align-items:center;font-size:clamp(1.05rem,6vw,1.85rem);font-weight:700;display:flex;position:absolute;inset:5px}.tile-inner[data-value="2"]{color:#776e65;background:#eee4da}.tile-inner[data-value="4"]{color:#776e65;background:#ede0c8}.tile-inner[data-value="8"]{background:#f2b179}.tile-inner[data-value="16"]{background:#f59563}.tile-inner[data-value="32"]{background:#f67c5f}.tile-inner[data-value="64"]{background:#f65e3b}.tile-inner[data-value="128"]{background:#edcf72;font-size:clamp(.95rem,5.2vw,1.6rem)}.tile-inner[data-value="256"]{background:#edcc61;font-size:clamp(.95rem,5.2vw,1.6rem)}.tile-inner[data-value="512"]{background:#edc850;font-size:clamp(.95rem,5.2vw,1.6rem)}.tile-inner[data-value="1024"]{background:#edc53f;font-size:clamp(.8rem,4.2vw,1.3rem)}.tile-inner[data-value="2048"]{background:#edc22e;font-size:clamp(.8rem,4.2vw,1.3rem)}.tile-inner[data-value="1024"],.tile-inner[data-value="2048"]{box-shadow:0 0 18px #edc22e80}@keyframes tile-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes tile-bump{0%{transform:scale(1)}55%{transform:scale(1.14)}to{transform:scale(1)}}.tile.is-new .tile-inner{animation:.14s ease-out tile-appear}.tile.is-merged .tile-inner{animation:.17s ease-out tile-bump}.overlay{z-index:3;background:color-mix(in srgb, var(--board) 82%, transparent);backdrop-filter:blur(2px);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:absolute;inset:0}.overlay-title{font-size:1.5rem;font-weight:700}.overlay-actions{gap:.6rem;display:flex}.overlay-actions button{background:var(--text);color:var(--bg);cursor:pointer;border:none;border-radius:8px;padding:.55rem 1.1rem;font-family:inherit;font-size:.9rem;font-weight:600}.overlay-actions button:hover{opacity:.85}.hint{color:var(--text-muted);text-align:center;font-size:.875rem}.hint strong{color:var(--text);font-weight:600}@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile.is-new .tile-inner,.tile.is-merged .tile-inner{animation:none}}.snake-board{--cells:17}.snake-field{background-image:repeating-linear-gradient(to right, var(--cell) 0 1px, transparent 1px calc(100% / var(--cells))), repeating-linear-gradient(to bottom, var(--cell) 0 1px, transparent 1px calc(100% / var(--cells)));border-radius:8px;overflow:hidden}.seg,.food{width:calc(100% / var(--cells));height:calc(100% / var(--cells));transition:transform var(--tick,.15s) linear;position:absolute;top:0;left:0}.seg:after,.food:after{content:"";background:var(--accent);border-radius:3px;position:absolute;inset:1px}.seg-head:after{background:var(--text);border-radius:4px}.food{transition:none}.food:after{background:#f65e3b;border-radius:50%;animation:1.1s ease-in-out infinite food-pulse}@keyframes food-pulse{0%,to{transform:scale(1)}50%{transform:scale(.72)}}@media (prefers-reduced-motion:reduce){.seg,.food{transition:none}.food:after{animation:none}}.hud-actions{align-items:center;gap:.5rem;display:flex}.ghost-btn{color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;padding:.55rem .9rem;font-family:inherit;font-size:.9rem;font-weight:500}.ghost-btn:hover:not(:disabled){background:var(--card)}.ghost-btn:disabled{opacity:.4;cursor:default}.dpad{display:none}@media (pointer:coarse){.dpad{grid-template-rows:repeat(2,3.25rem);grid-template-columns:repeat(3,3.25rem);justify-content:center;gap:.4rem;display:grid}.dpad button{background:var(--card);color:var(--text);border:1px solid var(--border);cursor:pointer;touch-action:manipulation;user-select:none;border-radius:10px;font-family:inherit;font-size:1.2rem}.dpad button:active{background:var(--accent);color:var(--bg)}.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-down{grid-area:2/2}.dpad-right{grid-area:2/3}}.difficulty{background:var(--card);border:1px solid var(--border);border-radius:10px;justify-self:center;gap:.25rem;padding:.25rem;display:inline-flex}.difficulty-option{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:.35rem .9rem;font-family:inherit;font-size:.85rem;font-weight:500}.difficulty-option.active{background:var(--bg);color:var(--text);font-weight:600;box-shadow:0 1px 2px #0000000f}.ttt-grid{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.ttt-cell{background:var(--cell);color:var(--text);cursor:pointer;touch-action:manipulation;border:none;border-radius:8px;font-family:inherit;font-size:clamp(2rem,12vw,3.25rem);font-weight:700;line-height:1;transition:background .12s,color .12s}.ttt-cell:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 18%, var(--cell))}.ttt-cell:disabled{cursor:default}.ttt-cell[data-mark=X]{color:var(--accent)}.ttt-cell[data-mark=O]{color:#f65e3b}.ttt-cell.is-winning{background:color-mix(in srgb, var(--accent) 26%, var(--cell))}
