/* Игра «Что раньше?». Отдельная таблица: своя страница, общим файлам она
   ничего не должна.

   Графический язык взят у карты, а не у игр: кружок-станция, перегон между
   станциями, охра линии. Ничего не мигает и не отсчитывает время — думать
   тут важнее, чем успевать. */

.game{max-width:900px}
.game .subtitle{max-width:640px;line-height:1.6}
.game .crumbs{margin-bottom:16px}
.game h1{margin:4px 0 10px}

/* Цвета ответа. Бирюза палитры (--link) для галочки не годится: она
   здесь цвет ссылок, и знак читался бы как ещё одна ссылка. Зелёный и
   красный — свои, по одному на тему. */
.game{--hit:#35b87a; --miss:#e0736b}
html[data-theme="light"] .game{--hit:#12855a; --miss:#c2392c}

/* карточки будущих игр на витрине: видно, что это анонс, а не ссылка */
.line-card.soon{opacity:.55}
.line-card.soon .lc-title{color:var(--text-dim)}
.line-card.soon .lc-meta{color:var(--gold)}

/* Правила читают один раз: со второго вопроса врезка схлопывается.
   Не display:none — иначе карточки прыгнут вверх рывком на пол-экрана. */
.g-intro{overflow:hidden;max-height:16em;
  transition:opacity .3s ease,max-height .45s ease,margin .45s ease}
.g-intro.gone{opacity:0;max-height:0;margin-top:0;margin-bottom:0}
/* Врезка ушла — подтягиваем всё вверх: цель в том, чтобы вопрос, ответ,
   перегон и пояснение помещались на один экран без прокрутки. */
.g-intro.gone+.g-bar{margin-top:4px}

/* ── Полоска захода: семь станций на линии, справа — кнопка «Дальше» ─── */
.g-bar{display:flex;align-items:center;gap:18px;margin:24px 0 18px;min-height:38px}
.g-progress{display:flex;align-items:center;gap:0;flex:1;min-width:0;height:14px}
/* пока кнопки нет, блок ничего не занимает и полоска идёт во всю ширину */
.g-next{flex:none;display:flex;align-items:center;gap:14px}
.g-dot{width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--sky-hi);border:1.5px solid var(--hairline);
  transition:background .25s,border-color .25s,transform .25s}
.g-dot.now{transform:scale(1.5);border-color:var(--gold);background:var(--gold)}
.g-dot.hit{background:var(--hit);border-color:var(--hit)}
.g-dot.miss{background:var(--miss);border-color:var(--miss)}
.g-rail{flex:1;height:1.5px;background:var(--hairline)}
.g-count{margin-left:14px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap}

/* ── Две карточки ────────────────────────────────────────────────────── */
.g-cards{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;gap:0}

.gc{
  display:block;background:var(--sky-hi);
  border:1px solid var(--hairline);border-radius:14px;
  padding:16px 18px 14px;text-align:left;font:inherit;color:var(--text);
  cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s,opacity .3s}
.gc:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.28)}
html[data-theme="light"] .gc:hover:not(:disabled){box-shadow:0 14px 34px rgba(50,80,140,.16)}
.gc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gc:disabled{cursor:default}

/* Кружок-станция обтекается текстом: отдельной строкой он съедал
   полсотни пикселей высоты на каждой карточке. */
.gc-figure{position:relative;float:left;width:56px;height:56px;margin:1px 15px 4px 0}
.gc-thumb{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  background:var(--panel);border:1.5px solid var(--hairline)}
.gc-city{display:block;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px}
.gc-text{display:block;font-size:15.5px;line-height:1.55;color:var(--text-soft)}

/* то, что открывается после ответа */
.gc-after{clear:both;border-top:1px solid var(--hairline);padding-top:10px;margin-top:12px;
  display:none}
.gc.done .gc-after{display:block;animation:g-fade .4s ease both}
.gc-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gc-when{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim)}
.gc.hit .gc-when,.gc.first .gc-when{color:var(--gold)}
.gc-year{display:block;font-family:Georgia,serif;font-size:25px;line-height:1.1;color:var(--gold)}
.gc-date{display:block;font-size:12.5px;color:var(--text-dim);margin-top:3px}
.gc-title{display:inline-block;margin-top:9px;font-size:14px;color:var(--link);
  text-decoration:none;border-bottom:1px solid transparent}
.gc-title:hover{border-bottom-color:currentColor}

/* Итог выбора. Цвет рамки и знак говорят об одном и том же — о выборе
   игрока, а не о том, где верный ответ: где верный, видно по годам и по
   слову «раньше» под ними. Знак висит на правом верхнем углу карточки,
   наполовину снаружи: на кружке-станции он перечёркивал портрет и терялся
   на светлых снимках, а здесь под ним всегда ровный фон страницы. Внутрь
   заходит только скруглённый угол, где текста нет, — ни одна строка не
   перевёрстывается. */
.gc.done{transform:none;box-shadow:none}
.gc.hit{border-color:var(--hit)}
.gc.miss{border-color:var(--miss)}
.gc.dim{opacity:.66}
.gc{position:relative}

.gc-sign{position:absolute;top:-17px;right:-17px;width:62px;height:62px;z-index:2;
  pointer-events:none;fill:none;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px var(--sky))}
.gc-sign.ok{stroke:var(--hit)}
.gc-sign.no{stroke:var(--miss)}
.gc-sign path{stroke-dasharray:80;stroke-dashoffset:80;
  animation:g-draw .42s cubic-bezier(.3,.8,.4,1) forwards}
.gc-sign path:nth-child(2){animation-delay:.16s}

.g-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* развилка между карточками */
.g-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-dim);font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
.g-vs::before,.g-vs::after{content:'';flex:1;width:1.5px;background:var(--hairline)}

/* ── Перегон: длина отрезка говорит о величине разрыва ───────────────── */
.g-gap{margin:16px 0 0;animation:g-fade .45s ease both}
.g-track{position:relative;height:40px}
.g-line{position:absolute;top:21px;height:2px;background:var(--gold);
  transform-origin:left center;animation:g-grow .55s cubic-bezier(.22,.7,.3,1) both}
.g-stop{position:absolute;top:15px;width:13px;height:13px;border-radius:50%;
  background:var(--sky);border:2.5px solid var(--gold);margin-left:-6.5px;
  animation:g-pop .3s ease both .45s}
.g-gap-label{position:absolute;top:-6px;font-family:Georgia,serif;font-size:14.5px;
  color:var(--gold);white-space:nowrap;transform:translateX(-50%);
  animation:g-fade .3s ease both .55s}
.g-ends{position:absolute;top:31px;left:0;right:0;font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-dim);animation:g-fade .3s ease both .6s}
.g-end-l{position:absolute;transform:translateX(-50%)}
.g-end-r{position:absolute;transform:translateX(-50%)}

.g-note{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--text);
  padding-left:15px;border-left:2px solid var(--gold);animation:g-fade .35s ease both .5s}

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.g-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.g-btn{background:var(--gold);border:none;border-radius:22px;color:#141414;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:.4px;
  padding:10px 24px;cursor:pointer;transition:filter .18s,transform .18s}
.g-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.g-btn:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.g-btn.ghost{background:transparent;border:1px solid var(--hairline);color:var(--text-dim);
  font-weight:400}
.g-btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.g-hint{font-size:12px;color:var(--text-dim)}
.g-hint b{color:var(--text-soft);font-weight:600}

/* ── Итог захода ─────────────────────────────────────────────────────── */
.g-final{animation:g-fade .4s ease both}
.g-score{display:flex;align-items:baseline;gap:14px;margin:10px 0 6px}
.g-score b{font-family:Georgia,serif;font-size:56px;font-weight:400;color:var(--gold);
  line-height:1}
.g-score span{font-size:15.5px;color:var(--text-soft);max-width:420px;line-height:1.55}
.g-missed{margin-top:26px}
.g-missed h2{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;margin-bottom:12px}
.g-missed ol{list-style:none;display:flex;flex-direction:column;gap:12px}
.g-missed li{border-left:2px solid var(--miss);padding-left:14px;font-size:14.5px;
  line-height:1.6;color:var(--text-soft)}
.g-missed a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent}
.g-missed a:hover{border-bottom-color:currentColor}
.g-missed .g-when{color:var(--gold);font-family:Georgia,serif}

@keyframes g-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes g-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes g-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes g-draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .gc,.g-gap,.g-line,.g-stop,.g-gap-label,.g-ends,.g-note,.g-final,.gc.done .gc-after{
    animation:none!important;transition:none!important}
  .gc-sign path{animation:none;stroke-dashoffset:0}
  .g-intro{transition:none}
  .g-intro.gone{display:none}
}

/* ── Узкий экран: карточки друг под другом ───────────────────────────── */
@media (max-width:720px){
  .g-cards{grid-template-columns:1fr;grid-template-rows:auto 40px auto}
  .g-vs{flex-direction:row}
  .g-vs::before,.g-vs::after{width:auto;height:1.5px}
  .gc{padding:14px 14px 12px}
  .gc-text{font-size:15px}
  .gc-figure{width:48px;height:48px;margin-right:13px}
  /* на телефоне карточка почти во всю ширину — вынос меньше, иначе знак
     упирается в край экрана */
  .gc-sign{top:-12px;right:-12px;width:48px;height:48px}
  .g-bar{gap:12px}
  .g-score b{font-size:44px}
  .g-count{margin-left:10px;font-size:11px}
}


/* ══ Игра «Поставь на шкалу» ═════════════════════════════════════════ */

.game-scale{max-width:960px}

/* карточка события: та же врезка с кружком, что и в «Что раньше» */
.sc-card{display:block;background:var(--sky-hi);border:1px solid var(--hairline);
  border-radius:14px;padding:16px 18px 14px;margin-bottom:18px}
.sc-card .gc-text{font-size:16px}

/* ── Шкала ───────────────────────────────────────────────────────────── */
.sc-scale{margin:0 0 8px;padding:0 8px}

/* год под бегунком: едет за меткой и всегда крупный — по нему и целятся */
.sc-value{position:relative;height:34px;font-family:Georgia,serif;font-size:27px;
  color:var(--gold);white-space:nowrap;pointer-events:none}
.sc-value{transform:translateX(-50%);left:50%;display:inline-block}

.sc-track{position:relative;height:66px;cursor:pointer;touch-action:none;
  padding-top:10px}
.sc-track:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:8px}
.sc-track.dragging{cursor:grabbing}
.sc-track.done{cursor:default}
.sc-axis{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--hairline)}

.sc-tick{position:absolute;top:16px;transform:translateX(-50%);text-align:center;
  pointer-events:none}
.sc-tick i{display:block;width:1.5px;height:13px;margin:0 auto;background:var(--hairline)}
.sc-tick b{display:block;margin-top:5px;font-size:10.5px;font-weight:400;letter-spacing:.6px;
  color:var(--text-dim);white-space:nowrap}
.sc-tick.first b{transform:translateX(calc(50% - 1px))}
.sc-tick.last b{transform:translateX(calc(-50% + 1px))}

/* метка игрока */
.sc-knob{position:absolute;top:11px;left:50%;width:16px;height:26px;margin-left:-8px;
  border-radius:8px;background:var(--gold);cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .2s}
.sc-track.dragging .sc-knob{cursor:grabbing}
.sc-knob.ok{background:var(--hit)}
.sc-knob.no{background:var(--miss)}

/* истинный год: та же станция, что и на карте */
.sc-true{position:absolute;top:15px;transform:translateX(-50%);text-align:center;
  animation:g-pop .32s ease both .1s;pointer-events:none;z-index:3}
.sc-true::before{content:'';display:block;width:15px;height:15px;margin:0 auto;
  border-radius:50%;background:var(--sky);border:2.5px solid var(--gold)}
/* подпись настоящего года стоит на той же высоте, что и подписи засечек, и
   у краёв шкалы налезала на них — своя подложка решает это без вёрстки */
.sc-true b{display:inline-block;margin-top:4px;font-family:Georgia,serif;font-size:14px;
  font-weight:400;color:var(--gold);white-space:nowrap;
  background:var(--sky);padding:0 5px;border-radius:3px}

/* перегон между вашей меткой и настоящим годом */
.sc-span{position:absolute;top:22.5px;height:2px;background:var(--miss);
  transform-origin:left center;animation:g-grow .4s ease both;pointer-events:none}

/* ── Разбор ──────────────────────────────────────────────────────────── */
.sc-answer{margin-top:30px;animation:g-fade .35s ease both}
.sc-miss{font-family:Georgia,serif;font-size:23px;line-height:1.2}
.sc-miss.ok{color:var(--hit)}
.sc-miss.no{color:var(--miss)}
.sc-about{margin-top:8px;font-size:15px;line-height:1.5}
.sc-about a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent}
.sc-about a:hover{border-bottom-color:currentColor}
.sc-date{color:var(--text-dim);font-size:13.5px}

/* в итоговом списке попадания отмечаем зелёной чертой, промахи — красной */
.g-missed li.ok{border-left-color:var(--hit)}

@media (max-width:720px){
  .sc-card .gc-text{font-size:15px}
  .sc-value{font-size:23px;height:30px}
  .sc-track{height:72px}
  /* на телефоне подписей меньше: иначе годы налезают друг на друга */
  .sc-tick.minor b{display:none}
  .sc-knob{width:20px;height:30px;margin-left:-10px;top:9px}
}


/* ── Сводка: где результат среди остальных ───────────────────────────── */
.g-standings{margin-top:30px}
.g-standings h2{font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-dim);font-weight:400;margin-bottom:12px}
.st-wait{font-size:13px;color:var(--text-dim)}

.st-chart{display:flex;flex-direction:column;gap:5px}
.st-row{display:flex;align-items:center;gap:12px}
.st-label{flex:none;width:74px;text-align:right;font-size:12.5px;color:var(--text-dim);
  font-family:Georgia,serif}
.st-bar-box{flex:1;min-width:0;height:16px;display:flex;align-items:center}
.st-bar{display:block;height:100%;border-radius:3px;background:var(--hairline);
  transform-origin:left center;animation:g-grow .5s cubic-bezier(.22,.7,.3,1) both}
.st-n{flex:none;width:44px;font-size:12px;color:var(--text-dim)}

/* своя корзина — золотом, как всё «моё» на этом сайте */
.st-row.mine .st-label{color:var(--gold)}
.st-row.mine .st-bar{background:var(--gold)}
.st-row.mine .st-n{color:var(--gold)}

.st-foot{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--text-soft)}
.st-note{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--text-dim);
  max-width:640px}

@media (max-width:720px){
  .st-label{width:62px;font-size:11.5px}
  .st-n{width:34px}
}


/* ══ Игра «Кто это» ═══════════════════════════════════════════════════ */

.game-who{max-width:900px}

.wh-wrap{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}

.wh-face{border-radius:14px;overflow:hidden;background:var(--sky-hi);
  border:1px solid var(--hairline);aspect-ratio:1/1}
/* Кадр прижат к верху и срезает нижнюю пятую часть картинки. Причин две.
   Портреты в полный рост (Нётер, Ковалевская) при центровке теряли голову.
   И, что важнее для этой игры, на старых гравюрах внизу подписано имя
   изображённого — у Тартальи прямо под портретом стоит «NICOLAVS
   TARTAGLIA», то есть готовый ответ. Подпись почти всегда снизу, лицо
   почти всегда в верхней трети — один и тот же кадр решает обе беды.
   Что осталось видно, показывает контрольный лист /_faces.php. */
.wh-face img{display:block;width:100%;height:124%;object-fit:cover;object-position:50% 0}

.wh-ask{font-family:Georgia,serif;font-size:21px;color:var(--text);margin:2px 0 14px}

.wh-options{display:flex;flex-direction:column;gap:9px}
.wh-opt{display:flex;align-items:center;gap:10px;width:100%;
  background:var(--sky-hi);border:1px solid var(--hairline);border-radius:12px;
  padding:13px 16px;font:inherit;font-size:16px;color:var(--text);text-align:left;
  cursor:pointer;transition:border-color .18s,transform .18s,opacity .3s}
.wh-opt:hover:not(:disabled){border-color:var(--gold);transform:translateX(3px)}
.wh-opt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wh-opt:disabled{cursor:default}
.wh-name{flex:1;min-width:0}

/* цвет говорит о выборе игрока, золотая рамка — где был верный ответ */
.wh-opt.picked.ok{border-color:var(--hit)}
.wh-opt.picked.no{border-color:var(--miss)}
.wh-opt.right{border-color:var(--gold)}
.wh-opt.dim{opacity:.5}

.wh-sign{flex:none;width:22px;height:22px;fill:none;stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round}
.wh-sign.ok{stroke:var(--hit)}
.wh-sign.no{stroke:var(--miss)}
.wh-sign path{stroke-dasharray:80;stroke-dashoffset:80;
  animation:g-draw .4s cubic-bezier(.3,.8,.4,1) forwards}
.wh-sign path:nth-child(2){animation-delay:.14s}

/* ── Разбор ──────────────────────────────────────────────────────────── */
.wh-about{margin-top:22px;animation:g-fade .35s ease both;max-width:760px}
.wh-who{font-family:Georgia,serif;font-size:20px}
.wh-who a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent}
.wh-who a:hover{border-bottom-color:currentColor}
.wh-years{font-size:15px;color:var(--gold)}
.wh-bio{margin-top:7px;font-size:15px;line-height:1.6;color:var(--text-soft)}

@media (max-width:720px){
  .wh-wrap{grid-template-columns:1fr;gap:18px}
  /* портрет во всю ширину съедал бы экран целиком — оставляем его карточкой */
  .wh-face{width:190px;aspect-ratio:1/1}
  .wh-ask{font-size:19px;margin-bottom:10px}
  .wh-opt{font-size:15px;padding:11px 14px}
}