/* ==== Игры: страница игры (панель счёта, сцена, оверлей, экранные кнопки, полный экран) ==== */
[hidden]{display:none!important}
.g-wrap{display:flex;flex-direction:column;gap:12px}
.g-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.g-stat{display:flex;flex-direction:column;line-height:1.15;min-width:56px}
.g-stat small{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.g-stat b{font-size:1.3rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.g-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.g-ibtn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;font-size:1.05rem;line-height:1;padding:0}
.g-ibtn:hover{border-color:var(--accent)}
.g-new{width:auto;height:42px;padding:0 14px;font-size:.92rem;white-space:nowrap}
.g-sel{height:42px;width:auto;padding:0 34px 0 12px;font-size:.92rem}
.g-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.g-frame{position:relative;max-width:100%}
.g-stage canvas{display:block;border-radius:var(--radius);background:var(--bg);border:1px solid var(--line)}
.g-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;border-radius:var(--radius);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(5px);cursor:pointer}
.g-ov-ico{font-size:2.8rem;line-height:1;margin-bottom:4px}
.g-ov-title{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.g-ov-text{color:var(--muted);max-width:42ch;font-size:.95rem;line-height:1.45}
.g-ov-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.g-ov-btn{width:auto;height:46px;padding:0 22px;font-size:.98rem}
.g-pad{display:none;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap}
.g-pad.show{display:flex}
.g-pad button{width:62px;height:62px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:16px;font:inherit;font-size:1.35rem;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:var(--shadow);padding:0;display:grid;place-items:center}
.g-pad button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.g-pad .g-abtn{width:82px;height:82px;border-radius:50%;font-size:1.05rem;font-weight:700}
.g-pad .g-wide{width:min(100%,320px);height:64px;border-radius:32px}
.g-dpad{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,62px);gap:6px}
.g-dpad i{display:block}
.g-keys{margin:0;color:var(--muted);font-size:.85rem;text-align:center;line-height:1.45}
.g-wrap.g-fs{position:fixed;inset:0;z-index:1000;background:var(--bg);padding:10px 12px;justify-content:center;overflow:hidden;margin:0;gap:10px}
.g-wrap.g-fs .g-keys{display:none}
.g-wrap.g-fs .g-stage{align-items:center}
body.g-lock{overflow:hidden}
.g-note{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--accent-soft);font-size:.92rem;line-height:1.5}
@media (max-width:640px){
  .g-bar{gap:6px 12px}
  .g-stat b{font-size:1.1rem}
  .g-ibtn{width:38px;height:38px}
  .g-new{height:38px;padding:0 12px;font-size:.86rem}
  .g-sel{height:38px;font-size:.86rem}
  .g-pad button{width:56px;height:56px}
  .g-dpad{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px)}
  .g-pad .g-abtn{width:74px;height:74px}
}

/* 2048 */
.t48{position:relative;--gap:10px;background:color-mix(in srgb,var(--ink) 16%,var(--bg));border-radius:12px;padding:var(--gap);aspect-ratio:1;max-width:100%}
.t48-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);width:100%;height:100%}
.t48-cells i{display:block;background:color-mix(in srgb,var(--ink) 7%,var(--bg));border-radius:8px}
.t48-tiles{position:absolute;left:var(--gap);top:var(--gap);right:var(--gap);bottom:var(--gap)}
.t48-tile{position:absolute;left:0;top:0;display:grid;place-items:center;border-radius:8px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#776e65;background:#eee4da;transition:transform .1s ease-in-out;will-change:transform;font-variant-numeric:tabular-nums}
.t48-tile.new{animation:t48pop .2s ease}
.t48-tile.merged{animation:t48merge .22s ease}
@keyframes t48pop{0%{scale:.2;opacity:0}60%{scale:1.08}100%{scale:1;opacity:1}}
@keyframes t48merge{0%{scale:1}45%{scale:1.2}100%{scale:1}}
.t48-tile.v4{background:#ede0c8}
.t48-tile.v8{background:#f2b179;color:#fff}
.t48-tile.v16{background:#f59563;color:#fff}
.t48-tile.v32{background:#f67c5f;color:#fff}
.t48-tile.v64{background:#f65e3b;color:#fff}
.t48-tile.v128{background:#edcf72;color:#fff;box-shadow:0 0 18px rgba(243,215,116,.35)}
.t48-tile.v256{background:#edcc61;color:#fff;box-shadow:0 0 22px rgba(243,215,116,.4)}
.t48-tile.v512{background:#edc850;color:#fff;box-shadow:0 0 26px rgba(243,215,116,.45)}
.t48-tile.v1024{background:#edc53f;color:#fff;box-shadow:0 0 30px rgba(243,215,116,.5)}
.t48-tile.v2048{background:#edc22e;color:#fff;box-shadow:0 0 34px rgba(243,215,116,.6)}
.t48-tile.vbig{background:#3c3a32;color:#fff}

/* Сапёр */
.ms-wrap{max-width:100%;overflow:auto;touch-action:pan-x pan-y;padding:2px;border-radius:12px}
.ms-board{display:grid;gap:2px;--cs:32px;width:max-content;margin:0 auto}
.ms-c{width:var(--cs);height:var(--cs);padding:0;border:none;border-radius:5px;background:color-mix(in srgb,var(--accent) 55%,var(--surface));box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;font:inherit;font-weight:800;font-size:calc(var(--cs)*.55);line-height:1;display:grid;place-items:center;color:var(--ink);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ms-c:hover:not(.open){filter:brightness(1.08)}
.ms-c.open{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.ms-c.flag{font-size:calc(var(--cs)*.5)}
.ms-c.boom{background:var(--warn)}
.ms-c.wrong{color:var(--warn);background:color-mix(in srgb,var(--warn) 18%,var(--bg))}
.ms-c.n1{color:#2563eb}.ms-c.n2{color:#16a34a}.ms-c.n3{color:#dc2626}.ms-c.n4{color:#1e3a8a}.ms-c.n5{color:#9a3412}.ms-c.n6{color:#0d9488}.ms-c.n7{color:#111827}.ms-c.n8{color:#6b7280}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ms-c.n1{color:#60a5fa}
  :root:not([data-theme="light"]) .ms-c.n4{color:#a5b4fc}
  :root:not([data-theme="light"]) .ms-c.n7{color:#e5e7eb}
}
:root[data-theme="dark"] .ms-c.n1{color:#60a5fa}
:root[data-theme="dark"] .ms-c.n4{color:#a5b4fc}
:root[data-theme="dark"] .ms-c.n7{color:#e5e7eb}
.g-ibtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Пятнашки */
.p15{position:relative;--gap:6px;background:color-mix(in srgb,var(--ink) 14%,var(--bg));border-radius:12px;padding:var(--gap);aspect-ratio:1;max-width:100%}
.p15-t{position:absolute;left:var(--gap);top:var(--gap);border:none;border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;letter-spacing:-.03em;cursor:pointer;box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .12s ease-out;padding:0;line-height:1;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.p15-t:hover{background:var(--accent-soft)}
.p15-t:active{box-shadow:none;translate:0 2px}