/* Sherlock — The Game of Logic: static mock stylesheet.
 * Source: Claude-design hand-off ("design/Sherlock — The Game of Logic.html",
 * unpacked template.html). Changes vs hand-off:
 *   - sprite URL -> sprite.png (relative, same directory);
 *   - palette literals routed through the :root tokens the hand-off defined;
 *   - --hrows/--vslots set to the design-brief capacity contract:
 *     hSlots = max(4h, 2w+4) -> 6x6: 24 (2 cols x 12), 8x8: 32 (2 cols x 16);
 *     vSlots = max(3w-4, 2h) -> 6x6: 14, 8x8: 20.
 * Sprite layout: 8 x 10 grid of 32px tiles; rows 0-7 = categories
 * (F faces, H houses, N numbers, R fruits, S signs, L letters, G flags,
 * T tools), rows 8-9 = service tiles (crossed circle, 3-tile arrow, dots,
 * one-of bracket with the "1" badge).
 */

body{margin:0}
a{color:#1a1a8c}a:hover{color:#000060}
:root{
  --scene-bg:#367b7a;
  --panel-bg:#e9d3c5;
  --panel-ink:#000000;
  --panel-edge:#8c7a70;
  --bevel-hi:#ffffff;
  --bevel-mid:#9a9aa4;
  --bevel-dk:#3c3c44;
  --btn-face:#b9c0d4;
  --btn-face-on:#e2e9fb;
  --btn-face-plain:#d8d4d0;
  --hint-face:#8dbd8a;
  --pause-face:#f2cccc;
  --pause-dot:#e01c1c;
  --banner-bg:#000000;
  --banner-ink:#ffffff;
  --board-bg:#000000;
  --board-edge:#4f7372;
  --stub-top:#4a4a50;   /* legacy: осталось для совместимости токенов */
  --stub-bot:#2a2a2e;
  --stub-bg:#3a3a40;    /* плоская заливка пустых слотов (без градиентов) */
  --deco-red:#e01020;
  --num-unsolved:#e41b1b;
  --num-solved:#64ee4a;
  --num-ink:#000000;
  --cat-faces:#f2c81e;
  --cat-houses:#b04ccf;
  --cat-numbers:#2fd52f;
  --cat-fruits:#e44fb2;
  --cat-signs:#9ea6ff;
  --cat-letters:#e6dc2c;
  --cat-flags:#dcdce6;
  --cat-tools:#b08a52;
  --sprite:url("sprite.svg");
}
.sherlock{width:1440px;height:900px;display:flex;background:var(--scene-bg);font-family:Tahoma,"Segoe UI","MS Sans Serif",Geneva,sans-serif;color:var(--panel-ink);overflow:hidden}
.size-6x6{--m:40px;--per:3;--cellh:82px;--cellw:124px;--big:78px;--rowgap:14px;--th:44px;--tv:44px;--hrows:12;--vslots:14}
.size-8x8{--m:28px;--per:4;--cellh:58px;--cellw:118px;--big:56px;--rowgap:14px;--th:32px;--tv:40px;--hrows:16;--vslots:20}

/* sprite tiles: --t = rendered tile size, --sx/--sy = sprite cell */
.tile,.candidate,.solved,.ovl{--fw:2px;--frame:transparent;background-image:var(--sprite);background-repeat:no-repeat;background-size:calc(var(--t)*8) calc(var(--t)*10);background-position:calc(var(--sx)*var(--t)*-1) calc(var(--sy)*var(--t)*-1);image-rendering:auto;box-shadow:inset 0 0 0 var(--fw) var(--frame);width:var(--t);height:var(--t);display:block;flex:none;box-sizing:border-box}
[data-item^="F"]{--sy:0;--frame:var(--cat-faces)}
[data-item^="H"]{--sy:1;--frame:var(--cat-houses)}
[data-item^="N"]{--sy:2;--frame:var(--cat-numbers)}
[data-item^="R"]{--sy:3;--frame:var(--cat-fruits)}
[data-item^="S"]{--sy:4;--frame:var(--cat-signs)}
[data-item^="L"]{--sy:5;--frame:var(--cat-letters)}
[data-item^="G"]{--sy:6;--frame:var(--cat-flags)}
[data-item^="T"]{--sy:7;--frame:var(--cat-tools)}
[data-item$="0"]{--sx:0}[data-item$="1"]{--sx:1}[data-item$="2"]{--sx:2}[data-item$="3"]{--sx:3}
[data-item$="4"]{--sx:4}[data-item$="5"]{--sx:5}[data-item$="6"]{--sx:6}[data-item$="7"]{--sx:7}
.tile-dots{--sx:5;--sy:8}
.tile{position:relative}
.clues-h .ovl{--t:var(--th)}
.clues-v .ovl{--t:var(--tv)}
.ovl-no{--sx:1;--sy:8;position:absolute;left:0;top:0;pointer-events:none}
.ovl-arrow{--sx:2;--sy:8;position:absolute;left:0;top:calc(var(--t)*-0.12);width:calc(var(--t)*3);pointer-events:none}
.ovl-bracket{--sx:6;--sy:8;position:absolute;left:0;height:calc(var(--t)*2);pointer-events:none}

/* left control panel */
.toolbar{width:84px;flex:none;background:var(--panel-bg);border-right:2px solid var(--panel-edge);box-sizing:border-box;padding:6px 6px 0;display:flex;flex-direction:column;align-items:stretch;gap:2px}
.menu{display:flex;flex-direction:column;padding:2px 2px 6px;margin:0 0 4px;border-bottom:2px solid var(--panel-edge);list-style:none}
.menu a{font-size:16px;line-height:22px;color:var(--panel-ink);text-decoration:none}
.menu a:hover{color:#1a1a8c}
.menu u{text-decoration:underline}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.bevel{border:2px solid;border-color:var(--bevel-hi) var(--bevel-dk) var(--bevel-dk) var(--bevel-hi);background:var(--btn-face-plain);box-sizing:border-box;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:36px}
.bevel:active,.bevel.on{border-color:var(--bevel-dk) var(--bevel-hi) var(--bevel-hi) var(--bevel-dk)}
.bevel:disabled{cursor:default;color:var(--bevel-mid)}
.size-btn{background:var(--btn-face);font:900 26px/1 "Arial Black",Arial,sans-serif;min-height:38px}
.size-btn.on{background:var(--btn-face-on)}
.puzzle-number{height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--num-ink);border:2px solid;border-color:var(--bevel-dk) var(--bevel-hi) var(--bevel-hi) var(--bevel-dk);margin:2px 0}
.puzzle-number.is-unsolved{background:var(--num-unsolved)}
.puzzle-number.is-solved{background:var(--num-solved)}
.btn-hint{background:var(--hint-face);font-weight:700;font-size:16px}
.btn-pause{background:var(--pause-face);font-size:14px;letter-spacing:0;justify-content:flex-start;padding-left:2px;gap:0}
.pause-p{width:26px;height:26px;border-radius:50%;background:var(--pause-dot);color:#fff;font:700 20px/26px Tahoma,sans-serif;text-align:center;flex:none}
.timer{font-size:18px;text-align:center;margin-top:4px;font-variant-numeric:tabular-nums}
.counters{display:flex;flex-direction:column;align-items:center;font-size:18px;line-height:28px;margin:0}
.ico{width:24px;height:24px;display:block}

/* play area */
.play{flex:1;min-width:0;padding:8px;display:flex;flex-direction:column;gap:8px}
.banner{height:44px;flex:none;background:var(--banner-bg);color:var(--banner-ink);font-size:20px;line-height:44px;padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;row-gap:8px;align-items:start;justify-content:start}
.board{grid-column:1;grid-row:1;display:flex;gap:6px}
.board-col{background:var(--board-bg);border:2px solid var(--board-edge);padding:8px 4px;display:flex;flex-direction:column;gap:var(--rowgap)}
.cell{width:var(--cellw);height:var(--cellh);display:grid;place-items:center}
.cands{display:grid;grid-template-columns:repeat(var(--per),var(--m));gap:2px;justify-content:center;align-content:center}
.candidate{--t:var(--m);--fw:1px;cursor:pointer;padding:0;border:0}
.candidate.eliminated{visibility:hidden}
.solved{--t:var(--big);--fw:3px}
.clues-v{grid-column:1;grid-row:2;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--vslots),calc(var(--tv) + 10px));background:var(--board-bg);border:2px solid var(--board-edge);justify-content:start;width:max-content}
.clues-h{grid-column:2;grid-row:1 / span 2;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--hrows),calc(var(--th) + 8px));grid-template-columns:repeat(2,calc(var(--th)*3 + 12px));column-gap:6px}
.clues-h .clue,.clues-h .slot-empty{background:var(--board-bg);display:flex;align-items:center;justify-content:center;border-left:2px solid var(--board-edge);border-right:2px solid var(--board-edge)}
.clues-h .tile{--t:var(--th)}
.clues-h .clue-tiles{position:relative;display:flex}
.clues-h .slot-empty::before{content:"";width:calc(var(--th)*3);height:var(--th);background:var(--stub-bg)}
.clues-v .clue,.clues-v .slot-empty{display:flex;justify-content:center;padding:6px 0}
.clues-v .tile,.clues-v .v-fill{--t:var(--tv)}
.clues-v .clue-tiles{position:relative;display:flex;flex-direction:column;gap:2px}
.v-fill{width:var(--tv);height:var(--tv);background:var(--stub-bg)}
.clues-v .slot-empty::before{content:"";width:var(--tv);height:calc(var(--tv)*3 + 4px);background:var(--stub-bg)}
.clues-v .ovl-bracket{top:calc(var(--t) + 2px)}
.clue{cursor:pointer;position:relative}
.clue.other{display:none}
.show-other .clue{display:none}
.show-other .clue.other{display:flex}
.clue.marked .clue-tiles::after{content:"";position:absolute;inset:-3px;border:3px solid var(--deco-red);pointer-events:none}
.paused .stage,.paused .banner{visibility:hidden}

/* C1 additions — ui-слой (этап C1). Правила выше — копия design/assets/page.css,
 * их не менять. Позиции спрайта везде выражены через токен --t (background-size
 * масштабирует весь лист: calc(var(--t)*8/10)) — замена спрайта на 96px-версию
 * не потребует правок ни здесь, ни в JS. */

/* Фолбэк-токены для типов поля без собственного набора (в макете есть только
 * size-6x6 и size-8x8): значения = size-6x6; :where даёт нулевую специфичность,
 * поэтому .size-6x6/.size-8x8 выше всегда побеждают. С C7 ВСЕ размерные
 * токены считает layoutTokens (ui/app.js) и инлайнит на корень в loadSession;
 * формула на канонах 6x6/8x8 совпадает с наборами выше (ui-layout.test.js) —
 * фолбэк остаётся страховкой первого кадра до инициализации JS. */
:where(.sherlock){--m:40px;--per:3;--cellh:82px;--cellw:124px;--big:78px;--rowgap:14px;--th:44px;--tv:44px;--hrows:12;--vslots:14}

/* Игровая зона: без выделения и drag'а картинок (UX §4 риск 8, §6 п.9). */
.stage{user-select:none;-webkit-user-select:none}
.stage .tile,.stage .candidate,.stage .solved{-webkit-user-drag:none}

/* Мигание баннера на блокированный ход («Wrong deduction!», GAME-SPEC §1):
 * 3 вспышки красным за 1.5 c — тайминг согласован с FLASH_MS в app.js. */
@keyframes banner-flash{50%{color:var(--banner-ink)}}
.banner.flash{color:var(--deco-red);animation:banner-flash .5s step-end 3}

/* C2 additions — панели подсказок (ui/clues.js). Рамка-закладка .clue.marked
 * и видимость корзин (.clue.other / .show-other) уже в базовой части выше. */

/* СКМ-удержание (GAME-SPEC §5.2): обводка вхождений картинки на поле… */
.candidate.highlight,.solved.highlight{outline:3px solid var(--deco-red);outline-offset:1px}
/* …и мигание подсказок, содержащих её. */
@keyframes clue-blink{50%{opacity:.3}}
.clue.blink .clue-tiles{animation:clue-blink .6s step-end infinite}

/* Лупа в нажатом состоянии (корзина Other Clues показана): бевель даёт
 * .bevel.on, подсветка грани — как у активных size-btn. */
[data-action="other-clues"].on{background:var(--btn-face-on)}

/* C3 additions — левая панель и состояния игры (ui/panel.js + app.js).
 * Модал подтверждения, меню Game, инлайн-ввод номера, PAUSE-оверлей с
 * человечком (DECISIONS «Гейт B2», реф design/reference/zoom/pause-runner.png). */

/* Токены C3 (аддитивно к базовым). */
:root{
  --run-ink:#16161e;      /* силуэт человечка паузы */
  --run-skin:#e8b878;     /* голова человечка */
  --run-rope:#d0862e;     /* верёвка (1px, как в оригинале — охра) */
  --run-sign:#20318c;     /* табличка-логотип */
}

/* Модал Win3.x «Abandon current puzzle?» (UX §2.3). Фон не затемняем —
 * верность оригиналу; прозрачный backdrop ловит клики мимо диалога. */
.modal-backdrop{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--panel-bg);border:2px solid;border-color:var(--bevel-hi) var(--bevel-dk) var(--bevel-dk) var(--bevel-hi);box-shadow:2px 2px 0 var(--bevel-dk);min-width:320px;max-width:440px;padding:12px 18px;text-align:center}
.modal-title{margin:0 0 6px;font-weight:700;font-size:16px}
.modal-text{margin:0 0 12px;font-size:14px}
.modal-buttons{display:flex;justify-content:center;gap:14px}
.modal-buttons .bevel{min-width:76px;padding:4px 10px;min-height:28px}

/* Меню Game → Open saved position (решение WORKPLAN §2.6). */
.menu-item{position:relative}
.menu-drop{position:absolute;left:0;top:100%;z-index:30;min-width:160px;background:var(--panel-bg);border:2px solid;border-color:var(--bevel-hi) var(--bevel-dk) var(--bevel-dk) var(--bevel-hi);padding:2px}
.menu-drop[hidden]{display:none}
.menu-entry{display:block;width:100%;border:0;background:none;font:inherit;font-size:14px;text-align:left;padding:3px 6px;cursor:pointer;color:var(--panel-ink)}
.menu-entry:hover:not(:disabled){background:var(--btn-face-on)}
.menu-entry:disabled{color:var(--bevel-mid);cursor:default}

/* Инлайн-ввод номера: внешне табло не меняется (UX §2.3) — input прозрачен
 * поверх красного/зелёного фона. */
.puzzle-number{cursor:text}
.num-edit{width:100%;height:100%;border:0;padding:0;background:transparent;font:inherit;color:inherit;text-align:center;outline:none}

/* PAUSE-оверлей (GAME-SPEC §5.1): .paused прячет stage и banner (правило в
 * базовой части), остаётся чистый фон сцены; поверх него по центру слева
 * направо идёт пиксельный человечек и тянет на верёвке табличку-логотип;
 * дошёл до края — начинает заново (линейный infinite-цикл). */
.play{position:relative}
.pause-scene{display:none}
.paused .pause-scene{display:block;position:absolute;inset:0;overflow:hidden}
.pause-runner{position:absolute;top:50%;left:-160px;transform:translateY(-50%);display:flex;align-items:flex-end;animation:pause-walk 40s linear infinite}
@keyframes pause-walk{from{left:-160px}to{left:100%}}
.pause-sign{background:var(--run-sign);color:var(--banner-ink);border:2px solid;border-color:var(--bevel-hi) var(--bevel-dk) var(--bevel-dk) var(--bevel-hi);font:700 8px/1 Tahoma,Verdana,sans-serif;letter-spacing:1px;padding:4px 5px;flex:none}
.pause-rope{width:26px;border-top:1px solid var(--run-rope);margin:0 0 8px;flex:none}
/* Человечек: два кадра шага пиксель-артом box-shadow (сетка 8×8, пиксель
 * 2px → 16×16). Кадр A — шаг (ноги врозь), кадр B — ноги вместе; смена
 * кадров — мигание opacity в противофазе. */
.pause-man{position:relative;width:16px;height:16px;flex:none}
.pm{position:absolute;left:0;top:0;width:2px;height:2px;background:transparent}
.pm.fa{box-shadow:
  8px 0 0 var(--run-skin),10px 0 0 var(--run-skin),
  8px 2px 0 var(--run-skin),10px 2px 0 var(--run-skin),
  8px 4px 0 var(--run-ink),10px 4px 0 var(--run-ink),
  4px 6px 0 var(--run-ink),6px 6px 0 var(--run-ink),8px 6px 0 var(--run-ink),10px 6px 0 var(--run-ink),
  8px 8px 0 var(--run-ink),10px 8px 0 var(--run-ink),
  6px 10px 0 var(--run-ink),12px 10px 0 var(--run-ink),
  4px 12px 0 var(--run-ink),14px 12px 0 var(--run-ink),
  2px 14px 0 var(--run-ink),14px 14px 0 var(--run-ink)}
.pm.fb{box-shadow:
  8px 0 0 var(--run-skin),10px 0 0 var(--run-skin),
  8px 2px 0 var(--run-skin),10px 2px 0 var(--run-skin),
  8px 4px 0 var(--run-ink),10px 4px 0 var(--run-ink),
  4px 6px 0 var(--run-ink),6px 6px 0 var(--run-ink),8px 6px 0 var(--run-ink),10px 6px 0 var(--run-ink),
  8px 8px 0 var(--run-ink),10px 8px 0 var(--run-ink),
  8px 10px 0 var(--run-ink),10px 10px 0 var(--run-ink),
  8px 12px 0 var(--run-ink),10px 12px 0 var(--run-ink),
  8px 14px 0 var(--run-ink),10px 14px 0 var(--run-ink)}
.pm.fa{animation:pause-gait-a .8s step-end infinite}
.pm.fb{opacity:0;animation:pause-gait-b .8s step-end infinite}
@keyframes pause-gait-a{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pause-gait-b{0%,49%{opacity:0}50%,100%{opacity:1}}

/* C5 additions — победа (ui/victory.js + app.js): Fireworks-канвас поверх
 * игровой зоны и модал «Play another game?» (GAME-SPEC §5.7, UX §2.2 п.5). */

/* Канвас фейерверка: оверлей на .play (position:relative — C3), поверх
 * stage, но ниже модалов (z-40); клики проходят сквозь. */
.fireworks{position:absolute;inset:0;z-index:20;pointer-events:none}
.fireworks[hidden]{display:none}

/* Модал победы: тот же вид Win3.x, что .modal-backdrop (C3) — прозрачный
 * backdrop ловит клики мимо диалога, фон не затемняем. */
.victory-backdrop{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.victory-backdrop[hidden]{display:none}
.victory-solved{margin:0 0 8px;font-size:15px;font-weight:700}
.victory-puzzle{margin-bottom:4px}

/* C6 additions — диалоги Player (Handicaps, имя), Help-модал, меню
 * Help/Player, клавиша O (ui/dialogs.js + app.js). */

/* Выпадашки меню Help/Player: вид .menu-drop (C3), другой класс —
 * panel.js требует ровно один .menu-drop в тулбаре (контракт findOne). */
.menu-pop{position:absolute;left:0;top:100%;z-index:30;min-width:160px;background:var(--panel-bg);border:2px solid;border-color:var(--bevel-hi) var(--bevel-dk) var(--bevel-dk) var(--bevel-hi);padding:2px}
.menu-pop[hidden]{display:none}

/* Backdrop'ы диалогов C6 — как .modal-backdrop (C3): прозрачные, ловят
 * клики мимо диалога. */
.handicap-backdrop,.name-backdrop,.help-backdrop{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center}
.handicap-backdrop[hidden],.name-backdrop[hidden],.help-backdrop[hidden]{display:none}

/* Handicaps: сетка 6×6 «[input] WxH (default, max)» (реф handicaps.png);
 * DOM-порядок row-major → визуальная колонка = фиксированная ширина поля. */
.modal-handicaps{max-width:none;width:780px}
.handicap-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px 12px;margin:0 0 12px;text-align:left}
.handicap-item{display:flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap;cursor:pointer}
.handicap-input{width:26px;border:2px solid;border-color:var(--bevel-dk) var(--bevel-hi) var(--bevel-hi) var(--bevel-dk);background:#fff;font:inherit;font-size:13px;text-align:center;padding:1px 0}

/* Player name: инпут в рамке-«впадине», как табло номера. */
.name-input{width:220px;border:2px solid;border-color:var(--bevel-dk) var(--bevel-hi) var(--bevel-hi) var(--bevel-dk);background:#fff;font:inherit;padding:3px 6px}

/* Help: прокрутка внутри модала; иллюстрации — те же .clue/.tile, что
 * панели, но вне .clues-h/.clues-v — размер плитки задаётся здесь. */
.modal-help{max-width:none;width:600px;text-align:left}
.help-body{max-height:62vh;overflow-y:auto;padding-right:10px;margin:0 0 12px;font-size:13px;line-height:1.45}
.help-body h3{margin:14px 0 6px;font-size:14px}
.help-body p{margin:0 0 8px}
.help-body ul{margin:0;padding-left:18px}
.help-body li{margin:0 0 4px}
.help-clue{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.help-clue .clue{cursor:default;flex:none}
.help-clue .clue-tiles{position:relative;display:flex;background:var(--board-bg);padding:4px}
.help-clue.v .clue-tiles{flex-direction:column;gap:2px}
.help-clue .tile,.help-clue .ovl,.help-clue .v-fill{--t:32px}
.help-clue .ovl-arrow{left:4px;top:calc(var(--t)*-0.12 + 4px)}
.help-clue .ovl-no{left:0;top:0}
.help-clue .ovl-bracket{left:4px;top:calc(var(--t) + 6px)}
.help-clue p{margin:0}

/* Клавиша O (GAME-SPEC §5.5): класс hide-ovl на корне гасит декорации
 * подсказок — Ø, стрелки, дуги-«①» (.ovl) и «три точки» (.tile-dots) —
 * на OKEY_OFF_MS (app.js), затем возврат. */
.sherlock.hide-ovl .ovl,.sherlock.hide-ovl .tile-dots{opacity:0}

/* E1 additions — вход через Google и синк прогресса (UX §2.6):
 * пункт меню Player → Sign in with Google / Sign out и строка состояния
 * входа в диалоге имени. Видимых изменений в покое нет — сцена не
 * меняется, новых цветов не вводим (все значения — существующие токены). */

/* Строка состояния входа под инпутом имени: подпись, а не поле ввода.
 * Цвет — существующий токен чернил панели (новых цветов V1 не вводит;
 * приглушать нечем — у палитры оригинала нет «серого текста»). */
.name-status{margin:6px 0 12px;font-size:12px;color:var(--panel-ink)}