/* Полилилиритм — оформление «тёплый хром» (germandia.ru, вариант B).
   Базовые токены (--bg, --fg, --mute, --glass, --accent, --chrome, шрифт Onest) приходят из ../../assets/site.css. */
:root{
  --brass:#C8B373;--ink:#191C18;--btn:rgba(255,255,255,.06);--btn-h:rgba(255,255,255,.12);--field:rgba(0,0,0,.3);--good:#b9d98f;
  /* палитра холста (только визуал) */
  --pr-bg:#0d0c0b;--pr-fg:#fffaf0;--pr-fg2:#efe7d6;--pr-fg3:#c9bfae;--pr-dim:#8f8676;--pr-dim2:#4d463a;--pr-bad:#ff6f5a;--pr-life:#C97860;
  --pr-shade:rgba(13,12,11,.6);--pr-blob:rgba(201,170,110,.14);--pr-blob0:rgba(13,12,11,0);
  --pr-l07:rgba(243,238,226,.07);--pr-l08:rgba(243,238,226,.08);--pr-l18:rgba(243,238,226,.18);--pr-l25:rgba(243,238,226,.25);
  --pr-lane0:#e3c77a;--pr-lane1:#e58f74;--pr-lane2:#b7a6e6;--pr-lane3:#a8d18a;--pr-lane4:#86cfd6;--pr-lane5:#eda5c9;--pr-lane6:#f0b97a;
}
:root[data-theme=light]{
  --btn:rgba(255,255,255,.55);--btn-h:rgba(255,255,255,.9);--field:rgba(255,255,255,.65);--good:#3f6e22;
  --pr-bg:#efebe3;--pr-fg:#191C18;--pr-fg2:#2a2620;--pr-fg3:#4d463a;--pr-dim:#7a705f;--pr-dim2:#c4baa6;--pr-bad:#c0381f;--pr-life:#6C302D;
  --pr-shade:rgba(239,235,227,.75);--pr-blob:rgba(147,128,98,.16);--pr-blob0:rgba(239,235,227,0);
  --pr-l07:rgba(25,28,24,.07);--pr-l08:rgba(25,28,24,.06);--pr-l18:rgba(25,28,24,.18);--pr-l25:rgba(25,28,24,.25);
  --pr-lane0:#9a7414;--pr-lane1:#b8472c;--pr-lane2:#5b47b0;--pr-lane3:#3f7a22;--pr-lane4:#1f7c86;--pr-lane5:#a8347a;--pr-lane6:#b8661a;
}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){
  --accent:#6C302D;--bg:#efebe3; /* site.css варианта B не переопределяет эти два токена в media-ветке */
  --btn:rgba(255,255,255,.55);--btn-h:rgba(255,255,255,.9);--field:rgba(255,255,255,.65);--good:#3f6e22;
  --pr-bg:#efebe3;--pr-fg:#191C18;--pr-fg2:#2a2620;--pr-fg3:#4d463a;--pr-dim:#7a705f;--pr-dim2:#c4baa6;--pr-bad:#c0381f;--pr-life:#6C302D;
  --pr-shade:rgba(239,235,227,.75);--pr-blob:rgba(147,128,98,.16);--pr-blob0:rgba(239,235,227,0);
  --pr-l07:rgba(25,28,24,.07);--pr-l08:rgba(25,28,24,.06);--pr-l18:rgba(25,28,24,.18);--pr-l25:rgba(25,28,24,.25);
  --pr-lane0:#9a7414;--pr-lane1:#b8472c;--pr-lane2:#5b47b0;--pr-lane3:#3f7a22;--pr-lane4:#1f7c86;--pr-lane5:#a8347a;--pr-lane6:#b8661a;
}}
*{box-sizing:border-box}
html,body.gpr{margin:0;height:100%;overflow:hidden}
body.gpr{background:var(--pr-bg);color:var(--fg);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.gbar{position:fixed;top:12px;left:50%;transform:translateX(-50%);margin:0;width:min(var(--max),calc(100% - 24px));z-index:8}
body.gpr:not(:has(.screen.on)) .gbar{display:none}
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:5;padding:84px 20px 24px;overflow:auto}
.screen.on{display:flex}
.panel{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r);padding:26px 30px;max-width:960px;width:100%;
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.panel.narrow{max-width:420px}.panel.mid{max-width:560px}
h1{font-weight:620;font-size:clamp(40px,8vw,104px);line-height:.9;letter-spacing:-.055em;margin:0 0 14px;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;animation:spin 18s linear infinite}
:root[data-theme=light] h1{background:conic-gradient(from var(--a),#1a1c1f,#7d848d 15%,#2b2f34 30%,#a9afb7 45%,#16181b 60%,#6b727b 78%,#1a1c1f);-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) h1{background:conic-gradient(from var(--a),#1a1c1f,#7d848d 15%,#2b2f34 30%,#a9afb7 45%,#16181b 60%,#6b727b 78%,#1a1c1f);-webkit-background-clip:text;background-clip:text}}
h2{font-weight:600;font-size:clamp(26px,1rem + 1.6vw,38px);letter-spacing:-.04em;line-height:1.05;margin:0 0 16px}
.sub{color:var(--mute);margin:0 auto 24px;font-size:15px;max-width:52ch}
button,.btn{font:inherit;font-size:15px;color:var(--fg);background:var(--btn);border:1px solid var(--glass-b);border-radius:999px;padding:10px 20px;
  cursor:pointer;margin:5px;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
button:hover:not(:disabled){background:var(--btn-h);border-color:color-mix(in srgb,var(--fg) 40%,transparent);transform:translateY(-1px)}
button:focus-visible,select:focus-visible,input:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.sel{background:linear-gradient(180deg,#e9dcc0,#b49b6a);color:var(--ink);border-color:var(--brass)}
button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.menuBtns{display:flex;flex-direction:column;align-items:center}
.menuBtns button{min-width:300px;font-size:17px;padding:13px 24px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.menuBtns button:first-child{background:linear-gradient(180deg,#e9dcc0,#b49b6a);color:var(--ink);border-color:var(--brass);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:14px}
.card{border:1px solid var(--glass-b);border-radius:22px;padding:14px 16px;cursor:pointer;position:relative;background:var(--field);transition:transform .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.card.locked{opacity:.38;cursor:not-allowed;transform:none}
.card .ratio{font-size:32px;font-weight:560;letter-spacing:-.05em;line-height:1.1}
.card .nm{color:var(--mute);font-size:13px;min-height:18px}
.card .best{font-size:12px;color:var(--good);margin-top:6px;min-height:15px}
.card .lock{position:absolute;right:12px;top:10px;font-size:16px}
.card canvas{width:100%;height:34px;display:block;margin:4px 0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.row label{min-width:220px;color:var(--mute)}
.lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.back{margin-top:16px}
#clInfo{min-height:44px}
#reMsg{color:var(--mute)}
input[type=range]{width:240px;accent-color:var(--accent)}
select,input[type=number]{font:inherit;background:var(--field);color:var(--fg);border:1px solid var(--glass-b);border-radius:999px;padding:6px 12px}
select option{background:var(--bg);color:var(--fg)}
#hudBtn{position:fixed;right:18px;top:62px;z-index:4;display:none;padding:7px 16px;font-size:13px;letter-spacing:.12em;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.big{font-size:clamp(56px,10vw,96px);font-weight:620;letter-spacing:-.05em;line-height:1;margin:6px 0;color:var(--accent)}
.stats{display:grid;grid-template-columns:auto auto;gap:4px 24px;margin:14px 0;font-size:16px;justify-content:center}
.stats div:nth-child(odd){color:var(--mute)}
.stats div:nth-child(even){font-weight:560;text-align:right}
.small{font-size:12px;color:var(--mute)}
.small.keys{margin-top:22px;max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.9}
kbd{border:1px solid var(--glass-b);background:var(--glass);border-radius:6px;padding:1px 7px;font-family:inherit;color:var(--fg)}
.center{text-align:center}
@media (max-width:860px){
  .screen{padding:76px 12px 16px;justify-content:flex-start}
  #scrMenu{justify-content:center}
  .panel{padding:20px 16px}
  .menuBtns button{min-width:0;width:min(320px,100%);font-size:16px}
  .row label{min-width:100%}
  input[type=range]{width:min(240px,60vw)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* «Мои результаты» / таблица */
.h3{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:20px 0 6px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#scrStats .panel{text-align:left}
#reLb{max-width:440px;margin:10px auto}
#scrResult .panel{max-height:none}