/* Мини-игры: одна страница, два мира.
   Отдых — яркие контрастные пары (фиолетовый+жёлтый, оранжевый+синий, красный+зелёный для итогов).
   Логика — неоновый чёрно-белый. Общий каркас — тёмный, крупная геометричная типографика. */
:root{
  --void:#08080c; --ink:#f5f5f7; --muted:#9a9aab; --line:rgba(255,255,255,.14);
  --purple:#4b1fd1; --purple-2:#6a4dff; --yellow:#ffd60a;
  --orange:#ff7a1a; --blue:#1f4fff; --navy:#152a7a;
  --red:#ff3b47; --green:#25d366;
  --neon:#ffffff; --glow:0 0 6px rgba(255,255,255,.75),0 0 18px rgba(255,255,255,.35);
  --display:Unbounded,"Arial Black",system-ui,sans-serif;
  --body:Manrope,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%}
body{min-height:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
[hidden]{display:none!important}
kbd{font-family:var(--mono);font-size:.78em;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;margin:0 2px;background:rgba(255,255,255,.05)}

/* ---------- Главная */
.home{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);padding-block:clamp(28px,6vw,64px) 40px}
.hero{display:grid;gap:14px;margin-bottom:clamp(36px,6vw,64px)}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(40px,8.4vw,112px);line-height:.9;letter-spacing:-.04em;margin:0}
.hero h1 span{color:var(--yellow)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:48ch;margin:0;line-height:1.5}
.cat{margin-bottom:clamp(40px,6vw,64px)}
.cat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;border-top:1px solid var(--line);padding-top:16px;margin-bottom:20px}
.cat-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,40px);margin:0;letter-spacing:-.02em}
.cat-head p{margin:0;color:var(--muted)}
.cat-fun .cat-head h2{color:var(--yellow)}
.cat-logic .cat-head h2{color:#fff;text-shadow:var(--glow)}
.cards{display:grid;gap:18px}
.cards.fun{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.logic{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:grid;grid-template-rows:auto 1fr;text-align:left;border:0;padding:0;border-radius:22px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;min-width:0}
.card:hover{transform:translateY(-4px)}
.card .art{display:block;width:100%;height:auto}
.card-body{display:grid;gap:8px;padding:18px 20px 20px;align-content:start}
.card-body b{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em}
.card-body span{line-height:1.45}
.rec{font-family:var(--mono);font-size:13px;font-weight:700;min-height:1em}
.card-snake{background:var(--yellow);color:#1d0b5e}
.card-snake:hover{box-shadow:0 14px 0 -4px var(--purple)}
.card-race{background:var(--orange);color:#0b1a55}
.card-race:hover{box-shadow:0 14px 0 -4px var(--blue)}
.card.neon{background:#000;color:#fff;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 0 rgba(255,255,255,0)}
.card.neon:hover{box-shadow:var(--glow)}
.card.neon .art{border-bottom:1px solid rgba(255,255,255,.2)}
.card.neon .card-body span{color:#c9c9d4}
.card.neon .rec{color:#fff}
.foot{border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:14px;line-height:1.7}
.foot p{margin:0 0 6px}
@media (max-width:900px){.cards.logic{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards.fun,.cards.logic{grid-template-columns:1fr}.card-body b{font-size:21px}}

/* ---------- Экран игры */
.view{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr;background:var(--bg,var(--void));color:var(--fg,var(--ink));z-index:10;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.view.theme-snake{--bg:#2a0f8f;--fg:#fff;--acc:var(--yellow);--acc-ink:#1d0b5e;--soft:rgba(255,214,10,.14)}
.view.theme-race{--bg:#0f1f66;--fg:#fff;--acc:var(--orange);--acc-ink:#0b1a55;--soft:rgba(255,122,26,.16)}
.view.theme-logic{--bg:#000;--fg:#fff;--acc:#fff;--acc-ink:#000;--soft:rgba(255,255,255,.08)}
.view-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:8px clamp(12px,3vw,24px);border-bottom:1px solid rgba(255,255,255,.12)}
.view-bar h2{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.4vw,22px);margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px}
.back:hover{border-color:#fff}
.view-info{display:flex;gap:8px;justify-content:flex-end;font-family:var(--mono);font-size:13px;font-weight:700;flex-wrap:wrap}
.pill{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill b{color:var(--acc)}
.view-body{position:relative;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;padding:clamp(10px,2.5vw,24px) 16px;min-width:0}
.theme-logic .view-bar h2{text-shadow:var(--glow)}

/* общие элементы игр */
.btn{font-family:var(--display);font-weight:700;font-size:17px;background:var(--acc);color:var(--acc-ink);border:0;border-radius:14px;padding:13px 22px;transition:transform .1s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.theme-logic .btn{box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--fg);border:1.5px solid rgba(255,255,255,.35);border-radius:14px;padding:11px 18px;font-weight:800}
.btn-ghost:hover{border-color:#fff}
.btn-ghost[aria-pressed="true"]{background:#fff;color:#000}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.overlay{position:fixed;left:0;right:0;bottom:0;top:calc(58px + env(safe-area-inset-top,0px));display:flex;overflow:auto;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:5}
.overlay>.dialog{margin:auto}
.dialog{width:min(460px,100%);display:grid;gap:16px;text-align:center;background:var(--bg);border:1.5px solid rgba(255,255,255,.3);border-radius:22px;padding:24px 22px}
.dialog h3{font-family:var(--display);font-size:clamp(26px,5vw,36px);margin:0;line-height:1.05}
.dialog p{margin:0;color:rgba(255,255,255,.75);line-height:1.5}
.dialog .big{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--acc)}
.dialog.win h3{color:var(--green)} .dialog.lose h3{color:var(--red)}
.theme-logic .dialog{box-shadow:var(--glow)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.seg{display:grid;gap:8px}
.seg.cols-2{grid-template-columns:1fr 1fr}
.seg button{background:transparent;border:1.5px solid rgba(255,255,255,.3);border-radius:12px;padding:11px 10px;font-weight:800}
.seg button{min-width:0}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.seg button[aria-pressed="true"] .label{color:inherit;opacity:.7}
.seg.levels5{grid-template-columns:repeat(5,minmax(0,1fr))}
.hint-line{font-size:13px;color:rgba(255,255,255,.6);text-align:center;line-height:1.6}
.stage{position:relative;display:grid;gap:12px;justify-items:center;width:100%}
canvas.game{display:block;max-width:100%;border-radius:14px;touch-action:none}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#fff;color:#000;font-weight:800;padding:10px 18px;border-radius:999px;z-index:50;box-shadow:0 6px 30px rgba(0,0,0,.4)}

/* ---------- Судоку */
.sudoku{display:grid;gap:14px;justify-items:center;width:min(520px,100%)}
.sgrid{display:grid;grid-template-columns:repeat(9,1fr);width:min(520px,92vw,calc(100dvh - 300px));aspect-ratio:1;border:2.5px solid #fff;box-shadow:var(--glow);max-width:100%;min-width:260px}
.sgrid button{border:0;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);background:#000;color:#fff;font-family:var(--mono);font-size:clamp(16px,3.6vw,26px);font-weight:700;padding:0;display:grid;place-items:center;position:relative;aspect-ratio:1}
.sgrid button:nth-child(9n+3),.sgrid button:nth-child(9n+6){border-right:2.5px solid #fff}
.sgrid button:nth-child(n+19):nth-child(-n+27),.sgrid button:nth-child(n+46):nth-child(-n+54){border-bottom:2.5px solid #fff}
.sgrid button.given{color:#fff}
.sgrid button.user{color:#9fd4ff}
.sgrid button.peer{background:#141418}
.sgrid button.same{background:#26262e}
.sgrid button.sel{background:#fff;color:#000}
.sgrid button.err{color:var(--red)}
.sgrid button.sel.err{background:var(--red);color:#fff}
.sgrid .notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font-size:clamp(7px,1.3vw,11px);color:#bdbdc8;font-weight:500;line-height:1}
.sgrid .notes i{font-style:normal;display:grid;place-items:center}
.sgrid button.sel .notes{color:#333}
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;width:min(520px,92vw)}
.numpad button{background:#000;border:1.5px solid rgba(255,255,255,.6);border-radius:10px;font-family:var(--mono);font-size:20px;font-weight:700;padding:8px 0;display:grid;gap:2px}
.numpad button small{font-size:10px;color:var(--muted)}
.numpad button.done{opacity:.3}
.tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------- Доски: шахматы и шашки */
.boardwrap{display:grid;grid-template-columns:minmax(0,auto) minmax(180px,260px);gap:20px;align-items:start;justify-content:center;width:100%}
.board{display:grid;grid-template-columns:repeat(8,1fr);width:min(600px,92vw,calc(100dvh - 170px));aspect-ratio:1;border:2px solid #fff;box-shadow:var(--glow);min-width:260px;position:relative;user-select:none;-webkit-user-select:none}
.sq{position:relative;display:grid;place-items:center;border:0;padding:0;background:#24242d;aspect-ratio:1}
.sq.dark{background:#000}
.sq.last{background:#3a3a48}
.sq.dark.last{background:#2a2a36}
.sq.sel{box-shadow:inset 0 0 0 3px #fff}
.sq.cursor::after{content:"";position:absolute;inset:3px;border:2px dashed var(--yellow);border-radius:4px;pointer-events:none}
.sq.check{background:radial-gradient(circle,rgba(255,59,71,.85) 0,rgba(255,59,71,.25) 60%,transparent 75%)}
.sq .dot{position:absolute;width:26%;height:26%;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
.sq .ring{position:absolute;inset:6%;border-radius:50%;border:3px solid rgba(255,255,255,.55);pointer-events:none}
.sq .coord{position:absolute;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.35);pointer-events:none}
.sq .coord.f{right:3px;bottom:1px}.sq .coord.r{left:3px;top:1px}
.piece{font-family:"DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2","Apple Symbols",serif;font-size:min(9vw,62px,calc((100dvh - 170px)/10));line-height:1;pointer-events:none;transition:transform .12s}
.piece.w{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.8)}
.piece.b{color:#08080c;-webkit-text-stroke:1.6px #fff;text-shadow:0 0 6px rgba(255,255,255,.45)}
.disc{width:76%;height:76%;border-radius:50%;pointer-events:none;display:grid;place-items:center;transition:transform .12s}
.disc.w{background:radial-gradient(circle at 35% 30%,#fff,#d8d8e0);box-shadow:0 0 10px rgba(255,255,255,.7),inset 0 -4px 0 rgba(0,0,0,.18)}
.disc.b{background:#000;border:3px solid #fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
.disc .crown{font-size:min(5vw,30px);line-height:1}
.disc.w .crown{color:#000}.disc.b .crown{color:#fff}
.side{display:grid;gap:12px;align-content:start}
.side .box{border:1.5px solid rgba(255,255,255,.3);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.status{font-weight:800;font-size:16px;line-height:1.4;min-height:2.8em}
.thinking::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:#fff;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.15}}
.moves{font-family:var(--mono);font-size:13px;line-height:1.7;max-height:220px;overflow:auto;color:#d6d6de;display:grid;grid-template-columns:2.2em 1fr 1fr;column-gap:6px}
.moves span:nth-child(3n+1){color:var(--muted)}
.captured{font-family:"DejaVu Sans","Segoe UI Symbol",serif;font-size:22px;line-height:1.2;min-height:1.2em;letter-spacing:-2px;overflow-wrap:anywhere}
.promo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.promo button{background:#000;border:1.5px solid #fff;border-radius:12px;font-size:44px;padding:6px 0;font-family:"DejaVu Sans","Segoe UI Symbol",serif;color:#fff}
@media (max-width:820px){.boardwrap{grid-template-columns:minmax(0,1fr);justify-items:center}.side{width:min(600px,92vw)}.moves{max-height:120px}}

/* ---------- Лабиринт */
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.levels button{aspect-ratio:1;background:#000;border:1.5px solid rgba(255,255,255,.5);border-radius:10px;font-family:var(--mono);font-weight:700;font-size:16px}
.levels button.done{background:#fff;color:#000}
.levels button:disabled{opacity:.25;cursor:not-allowed}

@media (max-width:560px){.back span{display:none}.view-info .pill:nth-child(n+3){display:none}.view-info{font-size:11px}.seg.levels5 small{display:none}.seg button{padding:10px 4px}.dialog{padding:20px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}