/* ============================================================
   Раздел игр. Палитра — сайта (assets/style.css), подача — «эппловская»:
   системный шрифт, крупный заголовок с плотным трекингом, много воздуха,
   один акцентный элемент на экран, тени вместо рамок.
   Шрифт: на устройствах Apple выигрывает SF (та же гарнитура, что в системе),
   на остальных — Plus Jakarta Sans, которым набран весь сайт.
   ============================================================ */
:root{
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
            "Plus Jakarta Sans", "Segoe UI", system-ui,
            "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --g-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --g-ink-2:#3f3f46;
  --g-hair:rgba(24,24,27,.09);
  --g-hair-2:rgba(24,24,27,.16);
  --g-red:#d1453b;
  --g-black:#1c1c1e;
  --g-felt:#eeefec;          /* сукно: не зелёное — стол должен молчать */
  --g-slot:rgba(24,24,27,.07);
  --g-t:.28s cubic-bezier(.22,.61,.36,1);
}

/* Атрибут hidden должен побеждать классы: у .sol-win задан display:flex, и без
   этой строки окно победы висит на экране с самой загрузки — правило браузера
   [hidden]{display:none} проигрывает селектору по классу. */
[hidden]{display:none !important}

/* ---------- Витрина ---------- */
.games-page{align-items:flex-start}
.games-wrap{width:100%;max-width:900px;font-family:var(--g-font)}
.games-head{text-align:center;margin-bottom:clamp(32px,6vw,64px)}
.games-title{font-size:clamp(2.4rem,7vw,4rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.02;margin:0;color:var(--ink);text-wrap:balance}
.games-sub{margin:18px auto 0;max-width:34em;font-size:1.06rem;line-height:1.6;color:var(--muted)}

/* Верхняя граница колонки, а не 1fr: пока игра одна, карточка не должна
   растягиваться на всю ширину — она выглядела бы пустой. */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,420px));gap:20px;
  justify-content:center}
.game-card{display:flex;flex-direction:column;background:var(--card);border-radius:22px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform var(--g-t),box-shadow var(--g-t)}
.game-card:hover{transform:translateY(-3px);box-shadow:0 26px 60px -26px rgba(17,24,39,.28)}
.game-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Обложка кроссворда — решётка из клеток, тем же CSS-способом */
.game-art-crossword{display:flex;align-items:center;justify-content:center}
.mini-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;transform:rotate(-4deg)}
.mini-grid i{width:26px;height:26px;border-radius:3px;background:#fff;
  box-shadow:0 6px 16px -10px rgba(17,24,39,.5);border:1px solid var(--g-hair)}
.mini-grid i.off{background:transparent;box-shadow:none;border-color:transparent}
.mini-grid i.hit{background:#eaf4ef}

/* Обложка — не картинка, а три карты: рисуются CSS, грузить нечего */
.game-art{position:relative;height:170px;background:var(--g-felt);overflow:hidden}
.mini-card{position:absolute;bottom:-14px;width:78px;height:110px;border-radius:9px;background:#fff;
  box-shadow:0 10px 24px -12px rgba(17,24,39,.4);border:1px solid var(--g-hair);
  display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:19px;font-weight:600;color:var(--g-black);letter-spacing:-.02em}
.mini-card i{font-style:normal;font-size:17px}
.mini-card i.red{color:var(--g-red)}
.mini-1{left:calc(50% - 108px);transform:rotate(-9deg)}
.mini-2{left:calc(50% - 39px);transform:rotate(0deg);bottom:-6px}
.mini-3{left:calc(50% + 30px);transform:rotate(9deg)}

.game-meta{padding:24px 26px 26px}
.game-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.game-name{margin:10px 0 6px;font-size:1.45rem;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.game-desc{margin:0;font-size:.97rem;line-height:1.6;color:var(--muted)}
.game-go{display:inline-block;margin-top:16px;font-size:.95rem;font-weight:600;color:var(--accent)}
.game-go::after{content:" →"}

/* ---------- Экран игры ---------- */
.sol-page{align-items:flex-start;padding-top:clamp(16px,3vw,36px)}
.sol-wrap{width:100%;max-width:1040px;font-family:var(--g-font)}

.sol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:18px}
.sol-back{font-size:.92rem;color:var(--muted);text-decoration:none}
.sol-back:hover{color:var(--ink)}
.sol-title{margin:6px 0 0;font-size:clamp(1.9rem,4.6vw,2.6rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.sol-stats{display:flex;gap:26px;margin:0}
.sol-stats div{text-align:right}
.sol-stats dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sol-stats dd{margin:5px 0 0;font-family:var(--g-mono);font-variant-numeric:tabular-nums;
  font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}

.sol-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:16px}
.sol-seg{display:inline-flex;background:rgba(24,24,27,.05);border-radius:999px;padding:3px}
.sol-seg button{font:inherit;font-size:.88rem;font-weight:600;color:var(--muted);background:none;border:0;
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:background var(--g-t),color var(--g-t)}
.sol-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);
  box-shadow:0 2px 8px -3px rgba(17,24,39,.28)}
.sol-actions{display:flex;gap:9px;flex-wrap:wrap}
.sol-btn{font:inherit;font-size:.9rem;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--g-hair-2);background:#fff;color:var(--ink);
  transition:background var(--g-t),border-color var(--g-t),opacity var(--g-t)}
.sol-btn:hover:not(:disabled){border-color:rgba(24,24,27,.3)}
.sol-btn:disabled{opacity:.4;cursor:default}
.sol-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sol-btn.primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.sol-btn:focus-visible,.sol-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Стол ---------- */
.sol-board{position:relative;background:var(--g-felt);border-radius:22px;
  padding:clamp(12px,2vw,20px);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.sol-top,.sol-tableau{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--cg,10px)}
.sol-top{margin-bottom:clamp(14px,2.4vw,24px)}
/* Пустое место между колодой и стопками сброса — как на настоящем столе */
.sol-gap{pointer-events:none}
.sol-slot,.sol-col{position:relative;border-radius:calc(var(--cw,80px) * .09)}
.sol-slot{aspect-ratio:5/7;box-shadow:inset 0 0 0 1px var(--g-slot)}
.sol-col{min-height:calc(var(--ch,112px) + 10px)}
/* значок «сюда» в пустом основании: суть слота, а не украшение */
.sol-slot[data-pile="foundation"]::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, var(--g-slot) 0 30%, transparent 31%);
  background-size:100% 100%;background-repeat:no-repeat;opacity:.9;pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 22%, transparent 23%);
          mask:radial-gradient(circle at 50% 50%, #000 0 22%, transparent 23%)}

/* карта */
.sol-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;border-radius:calc(var(--cw,80px) * .09);
  background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.14),0 6px 14px -10px rgba(17,24,39,.5);
  border:1px solid var(--g-hair);cursor:default;
  transition:box-shadow var(--g-t),transform var(--g-t)}
.sol-card.up{cursor:grab}
.sol-card.up:active{cursor:grabbing}
.sol-card .idx{position:absolute;top:calc(var(--cw,80px) * .07);left:calc(var(--cw,80px) * .09);
  display:flex;flex-direction:column;align-items:center;line-height:1;
  font-weight:700;letter-spacing:-.04em;font-size:calc(var(--cw,80px) * .26)}
.sol-card .idx i{font-style:normal;font-size:calc(var(--cw,80px) * .2);margin-top:calc(var(--cw,80px) * .03)}
.sol-card .pip{position:absolute;right:calc(var(--cw,80px) * .08);bottom:calc(var(--cw,80px) * .05);
  font-size:calc(var(--cw,80px) * .46);line-height:1;opacity:.16}
.sol-card.red{color:var(--g-red)}
.sol-card.black{color:var(--g-black)}
/* рубашка: тихий тон и волосяная внутренняя линия, без узора */
.sol-card.down{background:linear-gradient(160deg,#e7e9e6,#dcdfdb);border-color:rgba(24,24,27,.12)}
.sol-card.down::after{content:"";position:absolute;inset:calc(var(--cw,80px) * .07);
  border-radius:calc(var(--cw,80px) * .05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.sol-card.sel{box-shadow:0 0 0 2px var(--accent),0 10px 24px -12px rgba(17,24,39,.5)}
.sol-card.hint{box-shadow:0 0 0 2px var(--accent)}
/* стопка, которую тащат: летит над столом и не мешает попаданиям курсора */
.sol-drag{position:absolute;z-index:40;pointer-events:none;will-change:transform}
.sol-drag .sol-card{box-shadow:0 18px 36px -14px rgba(17,24,39,.55)}
.sol-slot.over,.sol-col.over{box-shadow:inset 0 0 0 2px var(--accent)}
/* колода: пустая показывает, что её можно перевернуть */
.sol-slot#solStock{cursor:pointer}
.sol-slot#solStock .recycle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cw,80px) * .34);color:rgba(24,24,27,.22)}

/* ---------- Правила ---------- */
.sol-how{margin:clamp(26px,4vw,44px) 0 0;max-width:52ch}
.sol-how h2{margin:0 0 12px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.sol-how ol{margin:0;padding-left:1.25em;color:var(--muted);font-size:.96rem;line-height:1.7}
.sol-how li+li{margin-top:6px}

/* ---------- Стартовый экран ---------- */
/* Лежит поверх готового стола: стол под ним уже разложен и измерен, поэтому
   после нажатия ничего не пересчитывается и не прыгает. */
.sol-start{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(246,246,244,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sol-start-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);
  padding:clamp(28px,5vw,44px);max-width:520px;width:100%;font-family:var(--g-font);
  max-height:calc(100vh - 48px);overflow-y:auto}
.sol-start-card .game-tag{display:block}
.sol-start-card h2{margin:12px 0 0;font-size:clamp(1.9rem,5vw,2.4rem);font-weight:700;
  letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.sol-start-lead{margin:14px 0 0;font-size:1.02rem;line-height:1.6;color:var(--muted)}
.sol-start-rules{margin:24px 0 0;padding-left:1.2em;color:var(--muted);font-size:.95rem;line-height:1.65}
.sol-start-rules li+li{margin-top:6px}
/* Одна кнопка на экран — она и есть весь экран действия */
.sol-start-btn{display:block;width:100%;margin-top:28px;padding:15px 24px;font-size:1.02rem}
.sol-start-note{margin:14px 0 0;font-size:.88rem;color:var(--muted);text-align:center}

/* ---------- Победа ---------- */
.sol-win{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(246,246,244,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sol-win-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:44px 40px;
  text-align:center;max-width:420px;width:100%;font-family:var(--g-font)}
.sol-win-card h2{margin:0;font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.sol-win-card p{margin:10px 0 0;color:var(--muted);font-size:1rem}
.sol-win-stats{font-family:var(--g-mono);font-variant-numeric:tabular-nums;font-size:.95rem}
.sol-win-card .sol-btn{margin-top:26px}

@media (max-width:640px){
  /* На телефоне ширина карты — единственный дефицитный ресурс: отдаём столу
     поля страницы и внутренние отступы доски, иначе карта уходит под 40 px и
     достоинство читается с трудом. */
  .sol-page{padding-left:8px;padding-right:8px}
  .sol-board{padding:10px;border-radius:16px;--cg:6px}
  .sol-wrap>.sol-head,.sol-wrap>.sol-bar,.sol-how{padding-left:8px;padding-right:8px}
  .sol-head{align-items:flex-start}
  .sol-stats{gap:18px}
  .sol-how{font-size:.94rem}
  .game-art{height:140px}
}
@media (prefers-reduced-motion:reduce){
  .game-card,.sol-card,.sol-btn,.sol-seg button{transition:none}
}

/* Вход в раздел с главной: одна строка, не карточка — чтобы не спорить со
   списком квизов, ради которого страница существует. */
.games-teaser{display:flex;flex-direction:column;gap:4px;margin-top:26px;padding:18px 20px;
  border-radius:16px;border:1px solid var(--g-hair);text-decoration:none;color:inherit;
  font-family:var(--g-font);transition:border-color var(--g-t),background var(--g-t)}
.games-teaser:hover{border-color:var(--g-hair-2);background:rgba(24,24,27,.02)}
.games-teaser:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.games-teaser-t{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.games-teaser-t::after{content:" →";color:var(--accent)}
.games-teaser-d{font-size:.92rem;line-height:1.5;color:var(--muted)}

/* ============================================================
   Кроссворд
   ============================================================ */
.xw-page{align-items:flex-start;padding-top:clamp(16px,3vw,36px)}
.xw-wrap{width:100%;max-width:1040px;font-family:var(--g-font)}
/* Строка с текущей подсказкой занимает место всегда, даже пустая: иначе панель
   кнопок подпрыгивает на каждый выбор слова. */
.xw-current{flex:1;min-width:220px;min-height:22px;font-size:.98rem;color:var(--ink);
  font-weight:600;letter-spacing:-.01em}
.xw-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:28px;align-items:start}
.xw-gridwrap{background:var(--g-felt);border-radius:22px;padding:clamp(12px,2vw,20px)}
/* Потолок ширины: без него на десктопе клетка раздувается до 75 px и сетка
   выглядит как таблица, а не как кроссворд. */
.xw-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;
  max-width:calc(var(--cols) * 52px);margin:0 auto;
  touch-action:manipulation;user-select:none;-webkit-user-select:none}
.xw-blank{aspect-ratio:1}
.xw-cell{position:relative;aspect-ratio:1;background:#fff;border-radius:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--g-t),box-shadow var(--g-t)}
.xw-cell i{position:absolute;top:2px;left:3px;font-style:normal;font-weight:700;
  font-size:clamp(7px,1.1vw,10px);color:var(--muted);line-height:1}
.xw-cell .ch{font-size:clamp(14px,2.4vw,22px);font-weight:600;color:var(--ink);
  text-transform:uppercase;line-height:1}
.xw-cell.on{background:#eaf4ef}
.xw-cell.cur{background:#d8ece1;box-shadow:inset 0 0 0 2px var(--accent)}
.xw-cell.done .ch{color:var(--accent)}
.xw-cell.bad{background:#fcebe9}
.xw-cell.bad .ch{color:var(--g-red)}
/* Настоящее поле ввода нужно, чтобы на телефоне поднялась клавиатура: клетки —
   обычные div-ы, экранную клавиатуру они не вызывают. Прячем, но не через
   display:none — скрытый элемент не получает фокус. */
.xw-input{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;border:0;padding:0}

.xw-clues{display:flex;flex-direction:column;gap:24px}
.xw-clues h2{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.xw-clues ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.xw-clues li{display:flex;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;
  font-size:.94rem;line-height:1.45;color:var(--ink);transition:background var(--g-t)}
.xw-clues li b{flex:none;min-width:1.4em;color:var(--muted);font-weight:700}
.xw-clues li:hover{background:rgba(24,24,27,.04)}
.xw-clues li.on{background:#eaf4ef}
.xw-clues li.on b{color:var(--accent)}
.xw-clues li.done{color:var(--muted)}
.xw-clues li.done span{text-decoration:line-through;text-decoration-color:rgba(24,24,27,.25)}

@media (max-width:820px){
  .xw-body{grid-template-columns:1fr;gap:20px}
  .xw-page{padding-left:8px;padding-right:8px}
  .xw-gridwrap{padding:10px;border-radius:16px}
  .xw-current{order:-1;width:100%}
}