:root{
    --steel:#31363f; --panel:#3a404a; --panel2:#434a55; --edge:#565e6b;
    --chamber:#13151a; --gridline:#262b32;
    --txt:#e8e6df; --txt2:#9aa0a8; --txt3:#6b7078;
    --field:#20242b; --dim:#3a3f47; --neutral:#454c58;
    --eco:#5db075; --hazard:#e0a32e; --danger:#d8533a; --cyan:#52c5c0;
    --mono:'SFMono-Regular',ui-monospace,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  /* без двойного тап-зума на iOS: тап по кнопкам/доске срабатывает сразу (скролл-панели используют pan-y отдельно) */
  button, .iconbtn, canvas, select, .ps-card, .zthead{ touch-action:manipulation; }
  /* видимый фокус для клавиатуры/геймпада (Steam Deck): только при focus-visible, мышь не трогает */
  *:focus-visible{ outline:2px solid var(--hazard); outline-offset:2px; border-radius:6px; }
  body{
    background:radial-gradient(130% 120% at 50% 0%, var(--bgtop,#3d434d) 0%, var(--steel) 65%);
    color:var(--txt); font-family:var(--sans);
    display:block;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px)); min-height:100%;
  }
  .machine{
    zoom: var(--ui-scale, 1);   /* B5: масштаб всего интерфейса на больших экранах (Electron/десктоп) */
    width:100%; max-width:760px; margin:0 auto;
    background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
    border:1px solid var(--edge); border-radius:16px; padding:16px;
    box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  }
  /* --- мобильная раскладка: и по ширине экрана, и принудительно --- */
  .mobile-layout .machine{padding:10px 8px}
  .mobile-layout.body-pad{padding:8px 6px}
  .mobile-layout .stage{flex-direction:column; align-items:stretch; gap:10px}
  .mobile-layout .playrow{justify-content:center}
  .mobile-layout .sidepad{display:none}
  .mobile-layout .bottompad{display:flex}
  .mobile-layout .chamber-wrap{margin:0 auto}
  .mobile-layout .hud{width:100%; display:flex; flex-direction:column}
  .mobile-layout .top{gap:6px}
  .mobile-layout .totals{gap:8px}
  .mobile-layout .menubar button, .mobile-layout .topline > button{min-width:0}
  /* компактная верхняя панель на мобильном */
  .mobile-layout .machine{padding:8px 6px; border-radius:12px}
  .mobile-layout .top{flex-wrap:wrap; gap:6px; margin-bottom:8px}
  .mobile-layout .brand{font-size:15px; flex:1 1 100%}
  .mobile-layout .brand small{font-size:9px}
  .mobile-layout .totals{width:100%; justify-content:flex-start; gap:6px; flex-wrap:wrap}
  .mobile-layout .totals > div:not(.topbtns){text-align:center; padding:4px 8px; min-width:0}
  /* компактные счётчики на мобильном, чтобы 3 кнопки-иконки влезли в ряд при DE/EN */
  .mobile-layout .totals{ gap:6px; }
  .mobile-layout .totals .k{ font-size:9px; letter-spacing:.3px; color:var(--txt); font-weight:600; }
  .mobile-layout .totals .v{ font-size:15px; }
  .mobile-layout .totals > div:not(.topbtns){ min-width:0; padding:4px 8px; }
  .mobile-layout .iconbtn{ padding:6px 8px; font-size:14px; }

  .mobile-layout .iconbtn{padding:7px 9px; font-size:13px}
  .mobile-layout .nextmini{display:flex}
  .mobile-layout #nextcard{display:none}
  body.force-mobile .nextmini{display:flex}
  body.force-mobile #nextcard{display:none}
  @media(max-width:620px){
    body:not(.force-pc){padding:8px 6px}
    body:not(.force-pc) .machine{padding:10px 8px}
    body:not(.force-pc) .stage{flex-direction:column; align-items:stretch; gap:10px}
    body:not(.force-pc) .playrow{justify-content:center}
    body:not(.force-pc) .sidepad{display:none}
    body:not(.force-pc) .bottompad{display:flex}
    body:not(.force-pc) .chamber-wrap{margin:0 auto}
    body:not(.force-pc) .hud{width:100%; display:flex; flex-direction:column}
    body:not(.force-pc) .top{gap:6px}
    body:not(.force-pc) .totals{gap:8px}
    body:not(.force-pc) .menubar button, body:not(.force-pc) .topline > button{min-width:0}
    body:not(.force-pc) .nextmini{display:flex}
    body:not(.force-pc) #nextcard{display:none}
    body:not(.force-pc){padding:6px 4px}
    body:not(.force-pc) .machine{padding:8px 6px; border-radius:12px}
    body:not(.force-pc) .top{flex-wrap:wrap; gap:6px; margin-bottom:8px}
    body:not(.force-pc) .brand{font-size:15px; flex:1 1 100%}
    body:not(.force-pc) .brand small{font-size:9px}
    body:not(.force-pc) .totals{width:100%; justify-content:flex-start; gap:6px; flex-wrap:wrap}
    body:not(.force-pc) .totals > div:not(.topbtns){text-align:center; padding:4px 8px; min-width:0}
  /* компактные счётчики на мобильном, чтобы 3 кнопки-иконки влезли в ряд при DE/EN */
  body:not(.force-pc) .totals{ gap:6px; }
  body:not(.force-pc) .totals .k{ font-size:9px; letter-spacing:.3px; color:var(--txt); font-weight:600; }
  body:not(.force-pc) .totals .v{ font-size:15px; }
  body:not(.force-pc) .totals > div:not(.topbtns){ min-width:0; padding:4px 8px; }
  body:not(.force-pc) .iconbtn{ padding:6px 8px; font-size:14px; }

    body:not(.force-pc) .iconbtn{padding:7px 9px; font-size:13px}
  }
  /* принудительный моб. режим на любом экране */
  body.force-mobile .stage{flex-direction:column; align-items:stretch; gap:10px}
  body.force-mobile .playrow{justify-content:center}
  body.force-mobile .sidepad{display:none}
  body.force-mobile .bottompad{display:flex}
  body.force-mobile .chamber-wrap{margin:0 auto}
  body.force-mobile .hud{width:100%; display:flex; flex-direction:column}
  body.force-mobile .machine{max-width:520px; padding:8px 6px; border-radius:12px}
  body.force-mobile .top{flex-wrap:wrap; gap:6px; margin-bottom:8px}
  body.force-mobile .brand{font-size:15px; flex:1 1 100%}
  body.force-mobile .brand small{font-size:9px}
  body.force-mobile .totals{width:100%; justify-content:flex-start; gap:6px; flex-wrap:wrap}
  body.force-mobile .totals > div:not(.topbtns){text-align:center; padding:4px 8px; min-width:0}
  /* компактные счётчики на мобильном, чтобы 3 кнопки-иконки влезли в ряд при DE/EN */
  body.force-mobile .totals{ gap:6px; }
  body.force-mobile .totals .k{ font-size:9px; letter-spacing:.3px; color:var(--txt); font-weight:600; }
  body.force-mobile .totals .v{ font-size:15px; }
  body.force-mobile .totals > div:not(.topbtns){ min-width:0; padding:4px 8px; }
  body.force-mobile .iconbtn{ padding:6px 8px; font-size:14px; }

  body.force-mobile .iconbtn{padding:7px 9px; font-size:13px}
  /* принудительный ПК-режим: сбоку кнопки даже на узком экране */
  body.force-pc .sidepad{display:none}
  body.force-pc .bottompad{display:flex}
  body.force-pc .stage{flex-direction:column}
  .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap}
  /* ПК: верхняя панель той же ширины, что доска — всё единой колонкой по центру */
  body.force-pc .top, body:not(.force-mobile):not(.mobile-layout) .top{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  /* ПК: totals (счётчики+иконки) на своей строке во всю ширину — тогда иконки прижмутся точно к правому краю, кубок под EN */
  /* (снято) .totals больше не внутри .top — счётчики вынесены отдельной строкой */
  .brand{font-weight:600; letter-spacing:.5px; font-size:18px; display:flex; align-items:center; gap:10px}
  .brand .logo-mark{flex:0 0 auto}
  .brand-txt{display:flex; flex-direction:column; line-height:1.05}
  .brand-mark{font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#f0a020; opacity:.9}
  .brand-name{font-weight:700; letter-spacing:.3px; font-size:17px; white-space:nowrap}
  .logo-arrow{transform-origin:20px 20px; animation:logoSpin 6s linear infinite}
  .logo-balls{transform-origin:20px 20px; animation:logoTumble 6s ease-in-out infinite}
  .logo-mark{cursor:pointer}
  .arrow-ccw{display:none}                                        /* по умолчанию видна стрелка по часовой */
  .logo-mark.spin-reverse .arrow-cw{display:none}                 /* реверс: прячем cw, показываем ccw */
  .logo-mark.spin-reverse .arrow-ccw{display:block}
  .logo-mark.spin-reverse .logo-arrow{animation-direction:reverse}
  .logo-mark.spin-reverse .logo-balls{animation-direction:reverse}
  .logo-mark.spin-paused .logo-arrow,.logo-mark.spin-paused .logo-balls{animation-play-state:paused}
  @keyframes logoSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes logoTumble{ 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-20deg)} 50%{transform:rotate(16deg)} 75%{transform:rotate(-10deg)} }
  @media(prefers-reduced-motion:reduce){ .logo-arrow,.logo-balls{animation:none} }
  .brand small{color:var(--hazard); font-family:var(--mono); font-size:11px; letter-spacing:1px; display:block; font-weight:400}
  .topline{display:flex; gap:8px; align-items:center; flex-wrap:nowrap}
  .topline > button{flex:0 0 auto; min-width:65px}
  .topline .topbtns{flex:1 1 auto; justify-content:space-between}
  .topline .topbtns .iconbtn{flex:1 1 0}
  /* ПК: строка кнопок своей строкой и ровно по ширине доски — Старт у левой кромки */
  body.force-pc .topline, body:not(.force-mobile):not(.mobile-layout) .topline{
    flex-basis:100%; width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  /* счётчики — отдельной строкой во всю ширину: место под счёт > 1000 */
  .totals{display:flex; gap:8px; text-align:center; align-items:stretch; margin-bottom:12px}
  body.force-pc .totals, body:not(.force-mobile):not(.mobile-layout) .totals{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  .totals > div:not(.topbtns){
    flex:1 1 0;                       /* 4 блока делят ширину доски поровну */
    background:var(--steel); border:1px solid var(--edge); border-radius:9px;
    padding:5px 12px; min-width:58px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
  }
  .totals .k{font-size:9.5px; color:var(--txt); text-transform:uppercase; letter-spacing:.6px; font-weight:600}
  .totals .v{font-family:var(--mono); font-size:17px; color:var(--txt); line-height:1.1}
  #goal-total .v{color:var(--hazard)}
  /* неактивная цель: место занято всегда, но приглушена */
  #goal-total.idle{opacity:.45}
  #goal-total.idle .v{color:var(--txt3)}
  /* счётчики могут сжиматься, иконки переносятся — строка не вылезает за ширину доски */
  .totals{min-width:0; flex-wrap:wrap}
  .totals > div{min-width:0}
  .totals .v{white-space:nowrap}
  /* ---- телефон: верхняя панель ровно в 2 строки ----
     Раньше 4 счётчика и 6 иконок делили один flex-контейнер и на узком экране
     (длинные немецкие подписи) расползались на 3 ряда. Теперь счётчики делят
     первую строку поровну, а .topbtns всегда занимает свою строку целиком. */
  .mobile-layout .totals > div:not(.topbtns),
  body.force-mobile .totals > div:not(.topbtns){ flex:1 1 0; min-width:0; padding:3px 3px }
  .mobile-layout .totals .k,
  body.force-mobile .totals .k{ font-size:7px; letter-spacing:0; max-width:100%;
    white-space:normal; overflow:visible; text-overflow:clip; line-height:1.12; word-break:normal; hyphens:none }
  .mobile-layout .totals .v,
  body.force-mobile .totals .v{ font-size:13px }
  .mobile-layout .totals,
  body.force-mobile .totals{ flex-wrap:nowrap; gap:4px }
  .mobile-layout .topline,
  body.force-mobile .topline{ flex:1 1 100%; margin-left:0; gap:4px; flex-wrap:nowrap }
  .mobile-layout .topline > button,
  body.force-mobile .topline > button{ flex:0 0 auto; min-width:0; padding:9px 11px; font-size:19px }
  .mobile-layout .topbtns,
  body.force-mobile .topbtns{ flex:1 1 auto; margin-left:0; display:flex; gap:3px; flex-wrap:nowrap; min-width:0 }
  .mobile-layout .topbtns .iconbtn,
  body.force-mobile .topbtns .iconbtn{ flex:1 1 auto; min-width:34px; height:42px; padding:0;
    font-size:21px; line-height:1; display:flex; align-items:center; justify-content:center }
  .mobile-layout .topbtns .star-pill,
  body.force-mobile .topbtns .star-pill{ flex:0 0 auto; font-size:10px; padding:2px 4px }
  @media(max-width:620px){
    body:not(.force-pc) .totals > div:not(.topbtns){ flex:1 1 0; min-width:0; padding:3px 3px }
    body:not(.force-pc) .totals .k{ font-size:7px; letter-spacing:0; max-width:100%;
      white-space:normal; overflow:visible; text-overflow:clip; line-height:1.15; word-break:normal; hyphens:none }
    body:not(.force-pc) .totals .v{ font-size:13px }
    body:not(.force-pc) .totals{ flex-wrap:nowrap; gap:4px }
    body:not(.force-pc) .topline{ flex:1 1 100%; margin-left:0; gap:4px; flex-wrap:nowrap }
    body:not(.force-pc) .topline > button{ flex:0 0 auto; min-width:0; padding:9px 11px; font-size:19px }
    body:not(.force-pc) .topbtns{ flex:1 1 auto; margin-left:0; display:flex; gap:3px; flex-wrap:nowrap; min-width:0 }
    body:not(.force-pc) .topbtns .iconbtn{ flex:1 1 auto; min-width:34px; height:42px; padding:0;
      font-size:21px; line-height:1; display:flex; align-items:center; justify-content:center }
    body:not(.force-pc) .topbtns .star-pill{ flex:0 0 auto; font-size:10px; padding:2px 4px }
  }
  /* ПК: компактные счётчики и иконки, чтобы 4 счётчика + 6 иконок влезали в ширину доски */
  body.force-pc .totals > div:not(.topbtns), body:not(.force-mobile):not(.mobile-layout) .totals > div:not(.topbtns){ min-width:46px; padding:4px 8px; flex:1 1 0; overflow:hidden }
  body.force-pc .totals .v, body:not(.force-mobile):not(.mobile-layout) .totals .v{ font-size:15px }
  body.force-pc .topbtns .iconbtn, body:not(.force-mobile):not(.mobile-layout) .topbtns .iconbtn{ padding:7px 9px; flex:1 1 0 }
  body.force-pc .topbtns, body:not(.force-mobile):not(.mobile-layout) .topbtns{ flex:1 1 auto; margin-left:8px }
  body.force-pc .topline > button, body:not(.force-mobile):not(.mobile-layout) .topline > button{ flex:0 1 auto; min-width:65px }
  body.force-pc .totals, body:not(.force-mobile):not(.mobile-layout) .totals{ gap:6px; flex-wrap:nowrap }
  /* длинные подписи (исп./фр.) ужимаются с многоточием — строка не переносится */
  body.force-pc .totals .k, body:not(.force-mobile):not(.mobile-layout) .totals .k{ font-size:9px; letter-spacing:.2px; white-space:normal; overflow:visible; text-overflow:clip; max-width:100%; line-height:1.15 }
  /* на телефоне подписи (напр. немецкое ENTFERNT) должны влезать — перебиваем правило выше по ширине */
  @media(max-width:620px){ .totals .k{ font-size:7px !important; letter-spacing:0 !important; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.12 } }
  .topbtns{display:flex; gap:6px; margin-left:auto; flex:0 0 auto}
  .iconbtn{
    border:1px solid var(--edge); background:var(--steel); color:var(--txt);
    border-radius:9px; padding:8px 12px; cursor:pointer; font-size:14px; font-weight:600; font-family:var(--sans);
  }
  /* кнопка протокола: буква «i» по центру свитка (инфо-свиток) */
  .logbtn{position:relative}
  .logbtn .logi{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-42%);
    font-style:normal; font-weight:800; font-size:.62em; line-height:1;
    color:#5b4a34; font-family:Georgia,"Times New Roman",serif; pointer-events:none;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  .iconbtn:active{background:var(--field)}
  .menubar{display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
  /* ПК: верхние кнопки (Старт/Пауза/раскладка/язык) не шире доски — по центру над ней */
  body.force-pc .menubar, body:not(.force-mobile):not(.mobile-layout) .menubar{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  .menubar button, .topline > button{
    flex:1; min-width:90px; padding:10px 8px; border-radius:10px; border:1px solid var(--edge);
    background:var(--hazard); color:#2a1c00; font-weight:700; font-size:14px; cursor:pointer; font-family:var(--sans);
    box-shadow:0 3px 0 #9a6f14, inset 0 1px 0 rgba(255,255,255,.3);
  }
  .menubar button:active, .topline > button:active{transform:translateY(2px); box-shadow:0 1px 0 #9a6f14}
  .menubar button:disabled, .topline > button:disabled{background:var(--dim); color:var(--txt3); box-shadow:none; cursor:default}
  .menubar button.ghost, .topline > button.ghost{background:var(--panel2); color:var(--txt); box-shadow:none; border:1px solid var(--edge)}
  .menubar select{width:auto; min-width:74px; padding:9px 8px}
  .stage{display:flex; flex-direction:column; gap:14px; align-items:center}
  /* ПК: доска и кнопки поворота по центру, той же ширины — симметрия; HUD во всю ширину */
  body.force-pc .chamber-wrap, body:not(.force-mobile):not(.mobile-layout) .chamber-wrap{ margin-left:auto; margin-right:auto }
  body.force-pc .bottompad, body:not(.force-mobile):not(.mobile-layout) .bottompad{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  @media(max-width:620px){ .stage{flex-direction:column; align-items:center} }
  .chamber-wrap{position:relative; max-width:100%; width:fit-content; overflow:visible}
  .chamber-wrap > canvas#board{position:relative; z-index:1; display:block}
  /* ⬇ индикатор гравитации: тонкий вверху, плотный внизу, всегда вертикальный */
  .gstrip{position:absolute; top:4px; bottom:4px; width:8px; z-index:6; pointer-events:none;
    opacity:0; transition:opacity .25s; border-radius:4px;
    background:repeating-linear-gradient(180deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 10px,
      var(--gstrip, rgba(150,200,255,.7)) 10px, var(--gstrip, rgba(150,200,255,.7)) 22px);
    background-size:100% 22px;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,1));
    mask-image:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,1));
    animation:gdrift 1.7s linear infinite}
  .gstrip.l{left:-14px} .gstrip.r{right:-14px}
  @keyframes gdrift{ from{background-position:0 0} to{background-position:0 22px} }
  body.grav-on .gstrip{opacity:.9}
  body.grav-half .gstrip{opacity:.4}
  /* выключено: гравитация есть в мире, но не действует — серые поперечные засечки */
  body.grav-off .gstrip{opacity:.5; animation:none;
    background:repeating-linear-gradient(180deg,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 7px,
      var(--gstrip-off, rgba(150,160,175,.7)) 7px, var(--gstrip-off, rgba(150,160,175,.7)) 10px);
    background-size:100% 10px;
    -webkit-mask-image:none; mask-image:none}
  @media(prefers-reduced-motion:reduce){ .gstrip{animation:none} }
  body.force-pc .playrow, body:not(.force-mobile):not(.mobile-layout) .playrow{ display:block; width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  body.force-pc .playrow .chamber-wrap, body:not(.force-mobile):not(.mobile-layout) .playrow .chamber-wrap{ width:100%; margin:0 }
  .mobile-layout .chamber-wrap{margin:0 auto; text-align:center}
  .mobile-layout canvas#board{margin:0 auto}
  body.force-mobile .chamber-wrap{margin:0 auto; text-align:center}
  body.force-mobile canvas#board{margin:0 auto}
  @media(max-width:620px){ body:not(.force-pc) .chamber-wrap{text-align:center} body:not(.force-pc) canvas#board{margin:0 auto} }
  canvas#board{
    display:block; margin:0 auto; background:var(--chamber); border-radius:8px;
    border:2px solid var(--edge); cursor:pointer;
    max-width:100%; height:auto;
    box-shadow:
      0 0 0 1px var(--brd-ring, rgba(0,0,0,.25)),      /* контурная линия по внешнему краю рамки */
      0 0 0 4px var(--brd-halo, rgba(255,255,255,.06)),/* гало — отрывает доску от фона */
      0 2px 3px var(--brd-drop2, rgba(0,0,0,.18)),     /* близкая тень: даёт толщину */
      0 14px 30px var(--brd-drop1, rgba(0,0,0,.28)),   /* дальняя тень: приподнимает доску */
      inset 0 1px 0 var(--brd-in-hi, rgba(255,255,255,.18)),
      inset 0 -2px 7px var(--brd-in-lo, rgba(0,0,0,.30));
  }
  .hud{width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; align-items:stretch}
  /* ПК: HUD той же ширины, что доска — весь блок единой колонкой по центру (как в мобильной раскладке) */
  body.force-pc .hud, body:not(.force-mobile):not(.mobile-layout) .hud{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  .card{background:var(--panel2); border:1px solid var(--edge); border-radius:10px; padding:10px 12px}
  .card h4{margin:0 0 7px; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--txt3); font-weight:600}
  .card h4 span{color:var(--eco)}
  .legend{font-size:12px; color:var(--txt2); line-height:1.7}
  .legend b{color:var(--txt)}
  select{
    width:100%; background:var(--field); color:var(--txt); border:1px solid var(--edge);
    border-radius:7px; padding:6px 8px; font-family:var(--sans); font-size:13px;
  }
  .lvlrow{display:flex; align-items:center; gap:8px; margin-top:8px}
  .lvlrow button{
    width:36px; height:32px; border-radius:8px; border:1px solid var(--edge);
    background:var(--panel); color:var(--txt); cursor:pointer; font-size:15px;
  }
  .lvlrow button:disabled{opacity:.35; cursor:default}
  .lvlrow .lvlnum{flex:1; text-align:center; font-family:var(--mono); font-size:15px}
  .lvljump{display:flex; gap:8px; margin-top:8px; align-items:center}
  .lvljump input{flex:1; min-width:0; background:var(--field); color:var(--txt); border:1px solid var(--edge); border-radius:7px; padding:8px 10px; font-family:var(--sans); font-size:14px; text-align:center; height:38px; box-sizing:border-box}
  .lvljump input::-webkit-outer-spin-button, .lvljump input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  .lvljump input{-moz-appearance:textfield; appearance:textfield}
  .lvljump button#lvl-go{padding:0 16px; height:38px; border-radius:8px; border:1px solid var(--edge); background:var(--hazard); color:#2a1c00; font-weight:700; cursor:pointer; font-size:13px; white-space:nowrap; box-sizing:border-box}
  .lvljump button:disabled{opacity:.4; cursor:default}
  .goalbar{height:8px; border-radius:5px; background:var(--field); overflow:hidden; margin-top:8px}
  .goalfill{height:100%; background:var(--eco); width:0%; transition:width .3s}
  .goaltxt{font-size:11px; color:var(--txt2); margin-top:4px; font-family:var(--mono)}
  .turnpad{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .turnpad button{
    padding:13px 6px; border-radius:10px; border:1px solid var(--edge); cursor:pointer;
    background:var(--hazard); color:#2a1c00; font-weight:700; font-size:15px; font-family:var(--sans);
    box-shadow:0 4px 0 #9a6f14, inset 0 1px 0 rgba(255,255,255,.3); transition:transform .05s, box-shadow .05s;
  }
  .turnpad button:active{transform:translateY(3px); box-shadow:0 1px 0 #9a6f14}
  .turnpad button:disabled{background:var(--dim); color:var(--txt3); box-shadow:none; cursor:default}
  .turnpad button small{display:block; font-size:10px; font-weight:600; opacity:.75; margin-top:2px}
  .playrow{display:flex; gap:8px; align-items:flex-start; width:100%; max-width:100%; justify-content:center}
  .chamber-wrap{margin:0 auto}

  .bottompad{display:flex; gap:10px; justify-content:stretch; margin:14px 0 4px}
  .bottompad button{
    flex:1; max-width:none; height:66px; padding:5px 0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; line-height:1;
    border-radius:12px; border:1px solid rgba(0,0,0,.35);
    background:linear-gradient(180deg, var(--hazard) 0%, color-mix(in srgb, var(--hazard) 78%, #000) 100%);
    box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
    color:#2a1c00; font-family:var(--sans);
  }
  .bottompad button:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35)}
  .bottompad button:disabled{background:var(--dim); color:var(--txt3); box-shadow:none}
  .bottompad button.grav{background:var(--neutral); color:var(--txt); border-color:var(--edge)}
  .bottompad button .ico{font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center}
  .bottompad button .deg{font-family:var(--mono); font-size:14px; font-weight:800; opacity:.95}
  /* кнопки управления — фиксированные цвета, читаемы на любой теме (в т.ч. «Карточный стол») */
  .turnpad button[data-deg]{background:#e0a72e !important; color:#241800 !important; border-color:rgba(0,0,0,.35) !important}
  .turnpad button[data-deg]:disabled{background:#3a3f4b !important; color:#8b93a3 !important; box-shadow:none !important}
  .bottompad button[data-deg]{background:linear-gradient(180deg,#e0a72e 0%,#b5821f 100%) !important; color:#241800 !important; border-color:rgba(0,0,0,.4) !important}
  .bottompad button[data-deg]:disabled{background:#3a3f4b !important; color:#8b93a3 !important; box-shadow:none !important; border-color:rgba(255,255,255,.10) !important}
  .turnpad button.grav, .bottompad button.grav{background:#4a5162 !important; color:#f2f3f5 !important; border-color:rgba(255,255,255,.16) !important}
  .stampbtn:not(.on):not(.ready):not(:disabled):not(.locked){background:#4a5162 !important; color:#f2f3f5 !important; border-color:rgba(255,255,255,.16) !important}
  .stampbtn:disabled{background:#3a3f4b !important; color:#8b93a3 !important}
  .sidepad{display:none; flex-direction:column; gap:8px; width:74px; flex:0 0 74px}
  .sidepad button{
    width:74px; height:70px; padding:6px 0 5px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; line-height:1;
    border-radius:12px; border:1px solid rgba(0,0,0,.35);
    background:linear-gradient(180deg, var(--hazard) 0%, color-mix(in srgb, var(--hazard) 78%, #000) 100%);
    box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
    transition:transform .06s, box-shadow .06s, filter .12s;
  }
  .sidepad button:hover:not(:disabled){filter:brightness(1.08)}
  .sidepad button:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35)}
  .sidepad button .ico{font-size:32px; font-weight:800; line-height:1}
  .turnpad button.adbtn{background:linear-gradient(180deg,#4bbf76 0%,#2f8a52 100%); color:#08210f; box-shadow:0 4px 0 #1f5c37, inset 0 1px 0 rgba(255,255,255,.4)}
  .brandrow{display:flex; align-items:center; gap:6px; width:100%; flex:1 1 100%; min-width:0}
  .brandrow .brand{flex:1 1 auto; min-width:0; overflow:hidden}
  .brandrow .brand-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%; vertical-align:bottom}
  .compact-layout .brand-name, body.force-mobile .brand-name{font-size:14px; letter-spacing:.1px}
  .adbtn-top{flex:0 0 auto !important}
  .compact-layout .adbtn-top, body.force-mobile .adbtn-top{padding:4px 8px !important; gap:4px !important; border-radius:8px}
  .compact-layout .adbtn-top .ico, body.force-mobile .adbtn-top .ico{font-size:13px}
  .compact-layout .adbtn-top .deg, body.force-mobile .adbtn-top .deg{font-size:11px; letter-spacing:.2px}
  .adbtn-top{flex:0 0 auto; margin-left:auto; align-self:center; background:linear-gradient(180deg,#4bbf76 0%,#2f8a52 100%); color:#08210f; border:1px solid #2f8a52; border-radius:10px; padding:6px 13px; cursor:pointer; font-weight:700; font-family:var(--sans); display:flex; flex-direction:row; align-items:center; gap:6px; line-height:1; box-shadow:0 3px 0 #1f5c37, inset 0 1px 0 rgba(255,255,255,.4)}
  .adbtn-top .ico{font-size:16px}
  .adbtn-top .deg{font-size:13px}
  .adbtn-top:active{transform:translateY(2px); box-shadow:0 1px 0 #1f5c37}
  .turnpad button.adbtn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #1f5c37}
  .sidepad button#t-180 .ico{display:flex; align-items:center; justify-content:center}
  .sidepad button .deg{
    font-family:var(--mono); font-size:15px; font-weight:800; letter-spacing:.2px;
    opacity:.95; line-height:1;
  }
  .sidepad button:disabled{
    background:var(--dim);
    color:var(--txt3); box-shadow:none; border-color:rgba(0,0,0,.25);
  }
  .sidepad button.grav{
    background:var(--neutral); color:var(--txt);
    box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .sidepad button.grav:disabled{background:var(--dim); color:var(--txt3); box-shadow:none}
  #nextballs{display:flex; gap:6px; align-items:center; min-height:22px}
  #nextballs .nb{width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.4); box-shadow:inset -2px -3px 4px rgba(0,0,0,.35), inset 2px 3px 4px rgba(255,255,255,.35)}
  .nextmini{display:none; flex-direction:column; gap:3px; align-items:center; justify-content:center; padding:0 4px}
  /* ПК: «Следующие шары» — компактно у кнопок поворота (как в мобильной раскладке) */
  body.force-pc .bottompad .nextmini, body:not(.force-mobile):not(.mobile-layout) .bottompad .nextmini{
    display:flex; flex:0 0 auto; gap:4px; padding:0 8px 0 2px;
  }
  body.force-pc .bottompad .nextmini .nb, body:not(.force-mobile):not(.mobile-layout) .bottompad .nextmini .nb{ width:15px; height:15px }
  body.force-pc #nextcard, body:not(.force-mobile):not(.mobile-layout) #nextcard{ display:none }
  .nextmini .nb{width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.4); box-shadow:inset -1px -2px 2px rgba(0,0,0,.35), inset 1px 1px 2px rgba(255,255,255,.35); display:block}
  .nextmini img.nb{object-fit:cover}
  .hint{margin-top:12px; font-size:11.5px; color:var(--txt3); text-align:center; line-height:1.6}
  .hint b{color:var(--txt2); font-weight:600}
  .overlay{position:absolute; inset:0; display:none; align-items:center; justify-content:center; border-radius:8px; background:rgba(15,17,21,.88); flex-direction:column; gap:10px; padding:20px; text-align:center; z-index:5;
    /* ⚑ 0818-2200: если содержимое длиннее доски — прокручиваем сам оверлей,
       не пуская жест на страницу под ним */
    overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain}
  .overlay.show{display:flex}
  /* ⚑ 0818-1900: кегли и отступы оверлея пропорциональны ширине доски (--ovk ставит applyLayout).
     Только на телефоне: на ПК доска всегда крупная, там прежние размеры. !important — потому что
     размеры заданы инлайном в index.html, а инлайн бьёт таблицу стилей. */
  @media(max-width:620px){
    /* страховка: если содержимое всё же не влезло (длинный перевод, две строки заданий) —
       оверлей прокручивается, а не обрезается */
    .overlay{gap:calc(9px*var(--ovk,1)); padding:calc(14px*var(--ovk,1)); overflow-y:auto}
    #titleOv h3{font-size:calc(26px*var(--ovk,1))!important}
    #titleOv .sub, #pauseOv .sub{font-size:calc(13px*var(--ovk,1))}
    #m-start2{font-size:calc(16px*var(--ovk,1))!important; padding:calc(12px*var(--ovk,1)) calc(30px*var(--ovk,1))!important}
    #btn-continue{font-size:calc(14px*var(--ovk,1))!important; padding:calc(10px*var(--ovk,1)) calc(26px*var(--ovk,1))!important}
    #btn-resume{font-size:calc(15px*var(--ovk,1))!important; padding:calc(11px*var(--ovk,1)) calc(30px*var(--ovk,1))!important}
    #btn-savequit{font-size:calc(13px*var(--ovk,1))!important; padding:calc(9px*var(--ovk,1)) calc(20px*var(--ovk,1))!important}
    #m-defaults{font-size:calc(12px*var(--ovk,1))!important; padding:calc(7px*var(--ovk,1)) calc(16px*var(--ovk,1))!important}
    .daily-teaser, .daily-box{font-size:calc(12px*var(--ovk,1))}
    #title-lock{font-size:calc(13px*var(--ovk,1))!important}
  }
  .overlay h3{margin:0; font-size:20px}
  .overlay .big{font-family:var(--mono); font-size:34px; color:var(--danger)}
  .overlay .big.good{color:var(--eco)}
  .overlay .sub{font-size:13px; color:var(--txt2)}
  .overlay button{margin-top:6px; padding:10px 22px; border-radius:9px; border:1px solid var(--edge); background:var(--hazard); color:#2a1c00; font-weight:700; cursor:pointer; font-size:14px}
  /* модалка ввода (замена системного prompt) */
  .askov{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(8,10,14,.72); padding:20px; box-sizing:border-box}
  .askov.show{display:flex}
  .askbox{background:var(--panel2); border:1px solid var(--edge); border-radius:14px; padding:18px; width:100%; max-width:340px; box-shadow:0 12px 40px rgba(0,0,0,.5); max-height:80vh; overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain}
  .askbox h3{margin:0 0 12px; font-size:16px; color:var(--txt); font-weight:700}
  .askbox input{width:100%; box-sizing:border-box; background:var(--field); color:var(--txt); border:1px solid var(--edge); border-radius:9px; padding:11px 12px; font-size:15px}
  .askbtns{display:flex; gap:8px; margin-top:14px; justify-content:flex-end}
  .askbtns button{padding:9px 16px; border-radius:9px; border:1px solid var(--edge); background:var(--hazard); color:#2a1c00; font-weight:700; cursor:pointer; font-size:13px}
  .askbtns button.ghost{background:transparent; color:var(--txt2)}
  /* Пауза на телефоне — полноэкранная и прокручиваемая, иначе задания/кнопки наезжают на шапку и панель */
  .compact-layout #pauseOv, body.force-mobile #pauseOv{
    position:fixed; inset:0; z-index:60; justify-content:flex-start; overflow-y:auto;
    background:rgba(12,14,18,.97); border-radius:0;
    padding: calc(22px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  }

  /* fullscreen screens (help / records / name) */
  /* ⚑ 0818-2200: длинная подсказка ведёт себя как окно, а не как всплывашка:
     принимает касания, прокручивается внутри себя и не пускает скролл на страницу. */
  #toast.sticky{
    /* инлайн-стиль у #toast сильнее таблицы стилей — отсюда !important */
    pointer-events:auto!important;
    max-height:min(62vh, 460px);
    overflow-y:auto; overflow-x:hidden;
    touch-action:pan-y;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start!important;
  }
  #toast.sticky #toast-close{position:sticky; top:0}
  /* текст поместился — прокрутки внутри нет, поэтому жест не должен уходить на страницу */
  #toast.sticky.fits{touch-action:none}
  .screen{
    position:fixed; inset:0; z-index:50; display:none; overflow-y:auto; overflow-x:hidden;
    background:rgba(15,17,21,.96); padding: calc(24px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
    touch-action:pan-y;                 /* палец двигает только вверх/вниз — экран не уезжает вбок */
    overscroll-behavior:contain;
  }
  .screen.show{display:block}
  .screen .inner{max-width:640px; margin:0 auto; background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:22px; overflow-wrap:break-word; word-break:break-word}
  .screen img, .screen pre, .screen table{max-width:100%}
  .screen pre{white-space:pre-wrap; word-break:break-word}
  .help-lang h3{ scroll-margin-top:14px }
  .help-jump{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; padding:0; border-radius:50%; border:1px solid var(--edge); background:var(--field); color:var(--txt2); font-weight:800; font-size:11px; line-height:1; cursor:pointer; vertical-align:middle }
  .help-jump:hover{ color:var(--txt); border-color:var(--hazard) }
  .help-toc{ margin:0 0 14px; border:1px solid var(--edge); border-radius:12px; background:var(--field); overflow:hidden }
  .help-toc>summary{ cursor:pointer; padding:10px 14px; font-weight:700; font-size:13px; color:var(--txt); list-style:none }
  .help-toc>summary::-webkit-details-marker{ display:none }
  .help-toc>summary::after{ content:'▸'; float:right; color:var(--txt3); transition:transform .15s }
  .help-toc[open]>summary::after{ transform:rotate(90deg) }
  .help-toc-list{ display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px 12px; max-height:38vh; overflow-y:auto }
  .toc-item{ font-size:11.5px; padding:5px 9px; border-radius:999px; border:1px solid var(--edge); background:var(--panel2); color:var(--txt2); cursor:pointer; line-height:1.2; text-align:left }
  .toc-item:hover{ color:var(--txt); border-color:var(--hazard) }
  .help-q{ position:absolute; right:-3px; bottom:-2px; font-size:12px; font-weight:900; line-height:1;
    color:var(--hazard); pointer-events:none;
    text-shadow:0 0 2px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000 }
  .screen h2{margin:0 0 4px; font-size:24px}
  .screen h3{margin:22px 0 8px; font-size:18px; color:var(--hazard)}
  .screen p, .screen li{font-size:15px; line-height:1.65; color:var(--txt2)}
  .screen b{color:var(--txt)}
  .screen ul{padding-left:20px; margin:6px 0}
  .screen .closebar{position:sticky; top:0; display:flex; justify-content:flex-end; margin-bottom:8px}
  .screen .closebar button{border:1px solid var(--edge); background:var(--panel2); color:var(--txt); border-radius:9px; padding:8px 16px; cursor:pointer; font-weight:600; font-size:14px}
  table.rec{width:100%; border-collapse:collapse; margin-top:10px; font-size:14px}
  table.rec th{font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); text-align:left; padding:6px 8px; border-bottom:1px solid var(--edge)}
  table.rec td{padding:7px 8px; border-bottom:1px solid #2a2f37; font-family:var(--mono)}
  table.rec td.name{font-family:var(--sans); color:var(--txt)}
  .stub{border:1px dashed var(--edge); border-radius:10px; padding:14px; margin-top:14px; color:var(--txt3); font-size:13.5px; line-height:1.6; text-align:center}
  .namebox{display:flex; gap:8px; margin-top:12px}
  .namebox input{flex:1; background:var(--field); border:1px solid var(--edge); color:var(--txt); border-radius:9px; padding:10px 12px; font-size:15px; font-family:var(--sans)}
  .namebox button{border:none; background:var(--hazard); color:#2a1c00; font-weight:700; border-radius:9px; padding:10px 18px; cursor:pointer; font-size:14px}
  /* модальный оверлей: игра видна позади */
  #adScreen{
    background:rgba(10,12,16,.45);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    display:none; align-items:flex-start; justify-content:center; padding:0;
  }
  #adScreen.show{display:flex}
  #adScreen .inner{
    margin-top:14vh; box-shadow:0 24px 70px rgba(0,0,0,.6);
    border:1px solid var(--edge); background:var(--panel);
    max-width:380px; width:calc(100% - 32px); padding:16px 16px 18px;
  }
  @media(max-width:620px){ #adScreen .inner{ margin-top:9vh } }
  /* theme designer */
  .trow{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:9px 0; font-size:14px; color:var(--txt2)}
  /* ⚑ 0818-1010: у `.screen .inner` стоит word-break:break-word (ради длинных слов в справке).
     В строках дизайнера это ломало подписи по буквам — «К/о/н/т/р/а/с/т»: min-content подписи
     становился шириной в один символ, а label{flex:1} даёт базис 0, и подпись схлопывалась.
     Возвращаем перенос по словам и даём подписи гарантированный минимум. */
  .trow label{flex:1 1 auto; min-width:6.5em; word-break:normal; overflow-wrap:normal; hyphens:none}
  .trow .stepwrap{flex:0 1 180px; max-width:180px; min-width:110px}
  .trow select{flex:0 1 180px; min-width:0}
  .trow > span{flex:0 0 auto; white-space:nowrap}   /* «150 %» больше не рвётся на две строки */
  .trow input[type=color]{width:44px; height:30px; border:1px solid var(--edge); border-radius:6px; background:var(--field); padding:2px; cursor:pointer}
  .trow select, .trow input[type=range]{max-width:180px}
  .trow input[type=range]{accent-color:var(--hazard)}
  @media(max-width:620px){
    /* на телефоне ужимаем именно управляющий элемент, а не подпись */
    .trow label{min-width:5.5em; font-size:13px}
    .trow .stepwrap{flex:0 1 140px; max-width:140px; min-width:96px}
    .trow select{flex:0 1 150px; max-width:150px; font-size:13px}
  }
  .ballrow{display:flex; align-items:center; gap:8px; margin:7px 0}
  .ballrow .bnum{width:20px; color:var(--txt3); font-family:var(--mono); font-size:12px}
  .ballrow img.prev, .ballrow .prev-dot{width:26px; height:26px; border-radius:50%; border:1px solid var(--edge); object-fit:cover}
  .ballrow .filebtn{border:1px solid var(--edge); background:var(--panel2); color:var(--txt2); border-radius:7px; padding:5px 10px; font-size:12px; cursor:pointer}
  .ballrow .filebtn:active{background:var(--field)}
  .ballrow .clr{border:1px solid var(--edge); background:var(--panel2); color:var(--danger); border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:12px}
  .tgroup{border:1px solid var(--edge); border-radius:10px; padding:12px 14px; background:var(--field); margin-top:14px}
  .tgroup h3{margin:0 0 6px !important}

  /* блок настройки для игрока (свободная игра) */
  /* --- тизеры в справке (заглушки под будущие GIF) --- */
  .teasers{border:1px solid var(--edge); border-radius:12px; padding:12px 14px; background:var(--field); margin:0 0 16px}
  .teaser-head{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--txt); margin-bottom:10px}
  .teaser-pro{font-size:10px; font-weight:800; letter-spacing:1px; color:#2a1c00; background:var(--hazard); border-radius:5px; padding:2px 7px}
  /* ⭐ индикатор общего числа звёзд в шапке */
  .star-pill{display:inline-flex; align-items:center; font-size:13px; font-weight:700; color:var(--hazard);
    background:rgba(0,0,0,.20); border:1px solid var(--edge); border-radius:8px; padding:3px 9px; cursor:pointer; user-select:none}
  .star-pill b{color:var(--txt); font-weight:800}
  .star-hdr{display:inline-flex; align-items:center; gap:3px; font-size:15px; font-weight:800; color:var(--hazard); cursor:pointer; user-select:none}
  .star-hdr b{color:var(--txt); font-weight:800}
  .star-hdr:active{transform:scale(.94)}
  .star-pill:active{transform:scale(.94)}
  .compact-layout .star-pill{font-size:12px; padding:2px 6px}
  /* 📜 протокол партии */
  .log-settings{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin:4px 0 6px}
  .log-srow{display:flex; justify-content:space-between; gap:8px; font-size:13px; border-bottom:1px solid var(--edge); padding:4px 0; min-width:0}
  .log-sk{color:var(--txt2); min-width:0} .log-sv{color:var(--txt); font-weight:600; text-align:right; overflow-wrap:anywhere}
  /* телефон: в 2 колонки длинные (немецкие) подписи + значения не влезают — одна колонка на всю ширину */
  .mobile-layout .log-settings, body.force-mobile .log-settings{ grid-template-columns:1fr; gap:0 }
  @media(max-width:620px){ body:not(.force-pc) .log-settings{ grid-template-columns:1fr; gap:0 } }
  .log-entries{max-height:44vh; overflow-y:auto; border:1px solid var(--edge); border-radius:10px; background:var(--panel2); padding:6px}
  .log-row{display:flex; gap:10px; font-size:13px; padding:5px 6px; border-radius:6px; line-height:1.35}
  .log-row + .log-row{border-top:1px solid rgba(255,255,255,.05)}
  .log-t{color:var(--txt3,#8a8f98); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:44px}
  .log-m{color:var(--txt2); flex:1}
  .log-row.ls-clear .log-m{color:var(--txt)}
  .log-row.ls-drop{background:rgba(232,195,74,.08)}
  .log-row.ls-start .log-m{color:var(--hazard); font-weight:700}
  .log-empty{color:var(--txt3,#8a8f98); font-size:13px; text-align:center; padding:18px 0}
  /* 🎯 ежедневные задания */
  .daily-box{width:100%; max-width:340px; margin:14px auto 0; text-align:left}
  .daily-box .dh{font-size:13px; font-weight:800; color:var(--txt); margin-bottom:2px}
  .daily-box .dh .dh-stars{float:right; color:var(--hazard); font-weight:800}
  .daily-box .dsub{font-size:10px; color:var(--txt2); margin-bottom:9px; line-height:1.35}
  .daily-task{display:flex; align-items:center; gap:9px; background:var(--panel2); border:1px solid var(--edge);
    border-radius:9px; padding:8px 10px; margin-bottom:7px}
  .daily-task.done{border-color:var(--good,#39d353)}
  .daily-task .dt-main{flex:1; min-width:0}
  .daily-task .dt-name{font-size:12px; color:var(--txt); line-height:1.25}
  .daily-task .dt-bar{height:5px; border-radius:3px; background:rgba(255,255,255,.10); margin-top:5px; overflow:hidden}
  .daily-task .dt-fill{height:100%; background:var(--accent,#4a9eff); border-radius:3px; transition:width .3s}
  .daily-task.done .dt-fill{background:var(--good,#39d353)}
  .daily-task .dt-prog{font-size:10px; color:var(--txt2); margin-top:3px}
  .daily-task .dt-star{font-size:11px; font-weight:800; color:var(--hazard); white-space:nowrap}
  .daily-task .dt-claim{font-size:11px; font-weight:700; padding:6px 10px; border-radius:7px; border:none;
    background:var(--good,#39d353); color:#08240f; cursor:pointer; white-space:nowrap}
  .daily-task .dt-claim:active{transform:scale(.95)}
  .daily-teaser{margin-top:10px; font-size:12px; font-weight:700; color:var(--hazard); cursor:pointer;
    background:rgba(0,0,0,.18); border:1px solid var(--edge); border-radius:8px; padding:6px 12px}
  .teaser-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px}
  .teaser{border:1px solid var(--edge); border-radius:10px; overflow:hidden; background:var(--panel2)}
  .teaser-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(160deg, var(--chamber) 0%, var(--panel) 100%)}
  .teaser-media img{width:100%; height:100%; object-fit:cover; display:block}
  .teaser-txt{padding:8px 10px}
  .teaser-txt b{font-size:12.5px; color:var(--txt); display:block}
  .teaser-txt p{margin:3px 0 0; font-size:11px; color:var(--txt3); line-height:1.35}
  .teaser-cta{margin-top:10px; font-size:11.5px; color:var(--txt2); text-align:center}
  /* демо 1 — каскад: шары выстраиваются в линию и вспыхивают */
  .demo-combo .db{position:absolute; width:15%; aspect-ratio:1; border-radius:50%; top:38%; animation:dbLine 3.4s ease-in-out infinite}
  .demo-combo .b1{left:6%;  background:#e33b3b; animation-delay:0s}
  .demo-combo .b2{left:24%; background:#f0a017; animation-delay:.12s}
  .demo-combo .b3{left:42%; background:#38b24a; animation-delay:.24s}
  .demo-combo .b4{left:60%; background:#2f6fe0; animation-delay:.36s}
  .demo-combo .b5{left:78%; background:#9b3fd4; animation-delay:.48s}
  @keyframes dbLine{ 0%,12%{transform:translateY(-140%) scale(.8); opacity:0} 30%,60%{transform:translateY(0) scale(1); opacity:1} 74%{transform:scale(1.25); opacity:1} 86%,100%{transform:scale(0); opacity:0} }
  .demo-combo .flash{position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.85), transparent 62%); opacity:0; animation:dbFlash 3.4s ease-in-out infinite}
  @keyframes dbFlash{ 0%,68%{opacity:0} 76%{opacity:.9} 92%,100%{opacity:0} }
  /* демо 2 — редкий шар: пульс и искры */
  .demo-rare .rb{position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; margin:-15% 0 0 -15%; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, #fff 0%, #67d7ff 26%, #2f6fe0 70%, #123a7a 100%);
    box-shadow:0 0 18px rgba(90,190,255,.75); animation:rbPulse 2.6s ease-in-out infinite}
  @keyframes rbPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} }
  .demo-rare .spark{position:absolute; color:#fff; font-size:13px; opacity:0; animation:spk 2.6s ease-in-out infinite}
  .demo-rare .s1{left:22%; top:24%; animation-delay:.1s}
  .demo-rare .s2{right:20%; top:32%; animation-delay:.7s}
  .demo-rare .s3{left:38%; bottom:16%; animation-delay:1.3s}
  @keyframes spk{ 0%,60%{opacity:0; transform:scale(.4)} 72%{opacity:1; transform:scale(1.1)} 100%{opacity:0; transform:scale(.5)} }
  /* демо 3 — парашют: спуск в отмеченную клетку */
  .demo-chute .para{position:absolute; left:50%; margin-left:-11px; font-size:22px; animation:paraFall 3s cubic-bezier(.25,.7,.4,1) infinite}
  @keyframes paraFall{ 0%{top:-18%; opacity:0} 12%{opacity:1} 70%{top:52%} 82%{top:52%} 100%{top:52%; opacity:0} }
  .demo-chute .target{position:absolute; left:50%; top:66%; width:24%; aspect-ratio:1; margin-left:-12%;
    border:2px dashed var(--hazard); border-radius:5px; opacity:.75; animation:tgt 3s ease-in-out infinite}
  @keyframes tgt{ 0%,60%{opacity:.4} 78%{opacity:1; box-shadow:0 0 12px var(--hazard)} 100%{opacity:.4} }
  /* демо 4 — осколок времени: автоповорот замирает */
  .demo-shard .ring{position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1; margin:-22% 0 0 -22%;
    border:2px dashed var(--hazard); border-radius:50%; opacity:.7; animation:shSpin 3.4s cubic-bezier(.3,0,.2,1) infinite}
  @keyframes shSpin{ 0%{transform:rotate(0deg)} 30%{transform:rotate(300deg)} 40%,80%{transform:rotate(330deg)} 100%{transform:rotate(720deg)} }
  .demo-shard .sh{position:absolute; left:50%; top:50%; margin:-13px 0 0 -12px; font-size:23px; animation:shPulse 3.4s ease-in-out infinite}
  @keyframes shPulse{ 0%,25%{opacity:.25; transform:scale(.7)} 42%{opacity:1; transform:scale(1.15)} 80%{opacity:1; transform:scale(1)} 100%{opacity:.25; transform:scale(.7)} }
  /* 🚁 дрон переносит шар */
  .demo-drone .dz{position:absolute; top:12%; font-size:19px; animation:drMove 3.4s ease-in-out infinite}
  .demo-drone .dball{position:absolute; width:13%; aspect-ratio:1; border-radius:50%; background:#2f6fe0; box-shadow:inset -2px -2px 3px rgba(0,0,0,.35); animation:drBall 3.4s ease-in-out infinite}
  .demo-drone .dcell{position:absolute; right:14%; top:58%; width:15%; aspect-ratio:1; border-radius:4px; border:2px dashed rgba(255,255,255,.4); animation:drCell 3.4s ease-in-out infinite}
  @keyframes drMove{ 0%,38%{left:16%} 56%,100%{left:60%} }
  @keyframes drBall{ 0%,10%{left:18%; top:62%; opacity:1} 26%,40%{left:18%; top:24%} 56%{left:62%; top:24%} 72%,100%{left:62%; top:58%} }
  @keyframes drCell{ 0%,66%{background:transparent; border-color:rgba(255,255,255,.4)} 80%,100%{background:#2f6fe0; border-color:#ffd23f} }

  /* 📐 штамп T-фигуры */
  .demo-stamp .tc{position:absolute; width:15%; aspect-ratio:1; border-radius:3px; background:#38b24a; box-shadow:inset -2px -2px 3px rgba(0,0,0,.3); animation:stPop 3s ease-in-out infinite}
  .demo-stamp .t1{left:31%; top:28%} .demo-stamp .t2{left:46%; top:28%} .demo-stamp .t3{left:61%; top:28%} .demo-stamp .t4{left:46%; top:46%}
  .demo-stamp .sflash{position:absolute; left:39%; top:26%; width:28%; aspect-ratio:1; border:2px solid #fff; border-radius:50%; opacity:0; animation:stFlash 3s ease-in-out infinite}
  @keyframes stPop{ 0%,55%{transform:scale(1); opacity:1} 70%{transform:scale(.15); opacity:0} 80%,100%{transform:scale(1); opacity:1} }
  @keyframes stFlash{ 0%,55%{opacity:0; transform:scale(.5)} 63%{opacity:.9; transform:scale(1)} 82%{opacity:0; transform:scale(1.6)} 100%{opacity:0} }

  /* 🔷 жетоны: серия одного символа */
  .demo-cards .cb{position:absolute; top:38%; width:16%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; background:#b23b3b; box-shadow:inset -2px -2px 3px rgba(0,0,0,.3)}
  .demo-cards .k1{left:8%} .demo-cards .k2{left:28%} .demo-cards .k3{left:48%} .demo-cards .k4{left:68%}
  .demo-cards .sweep{position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); animation:cdSweep 3s ease-in-out infinite}
  .demo-cards .cpop{position:absolute; left:50%; top:8%; transform:translateX(-50%); font-size:11px; font-weight:800; color:#ffd23f; opacity:0; animation:cdPop 3s ease-in-out infinite}
  @keyframes cdSweep{ 0%,45%{transform:translateX(-60%)} 68%,100%{transform:translateX(60%)} }
  @keyframes cdPop{ 0%,58%{opacity:0; transform:translate(-50%,4px)} 72%{opacity:1; transform:translate(-50%,-2px)} 92%,100%{opacity:0; transform:translate(-50%,-8px)} }

  /* 🧩 пазл-бонус: два тайла меняются местами */
  .demo-puzzle .pt{position:absolute; width:19%; aspect-ratio:1; border-radius:4px; box-shadow:inset -2px -2px 3px rgba(0,0,0,.3)}
  .demo-puzzle .p1{left:26%; top:24%; background:linear-gradient(150deg,#d98a3a,#b5641f); animation:pzR 3.2s ease-in-out infinite}
  .demo-puzzle .p2{left:48%; top:24%; background:linear-gradient(150deg,#6a86c9,#3f5aa0); animation:pzL 3.2s ease-in-out infinite}
  .demo-puzzle .p3{left:26%; top:48%; background:linear-gradient(150deg,#57a06a,#2f6b44)} .demo-puzzle .p4{left:48%; top:48%; background:linear-gradient(150deg,#9b6ac9,#5f3f8f)}
  .demo-puzzle .pbonus{position:absolute; right:12%; top:36%; font-size:16px; opacity:0; animation:pzBonus 3.2s ease-in-out infinite}
  @keyframes pzR{ 0%,30%{transform:translate(0,0)} 50%,100%{transform:translate(116%,0)} }
  @keyframes pzL{ 0%,30%{transform:translate(0,0)} 50%,100%{transform:translate(-116%,0)} }
  @keyframes pzBonus{ 0%,55%{opacity:0; transform:scale(.5)} 70%{opacity:1; transform:scale(1.15)} 92%,100%{opacity:0; transform:scale(1)} }

  @media(prefers-reduced-motion:reduce){ .teaser-media *{animation:none !important} }
  .th-skins{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:8px; margin-bottom:10px}
  .th-skin{border:1px solid var(--edge); border-radius:10px; padding:7px; cursor:pointer; background:var(--panel2); font-family:var(--sans); text-align:left}
  .th-skin:hover{border-color:var(--txt3)}
  .th-skin.on{border-color:var(--hazard); box-shadow:0 0 0 1px var(--hazard) inset}
  .th-skin .sw{display:flex; gap:3px; margin-bottom:5px}
  .th-skin .sw i{width:11px; height:11px; border-radius:50%; display:block}
  .th-skin .bar{height:14px; border-radius:4px; margin-bottom:5px; border:1px solid rgba(0,0,0,.25)}
  .th-skin .nm{font-size:11.5px; font-weight:600; color:var(--txt)}
  .ps-label{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--txt2); font-weight:700; margin-bottom:6px}
  .ps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:6px}
  .ps-card{border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:7px 8px; cursor:pointer; background:#242832; text-align:left; font-family:var(--sans)}
  .ps-card:hover{border-color:rgba(255,255,255,.32)}
  .ps-card.on{border-color:#e8c34a; background:#33302a; box-shadow:0 0 0 1px #e8c34a inset}
  #ps-mine .ps-card.sel{border-color:#e8c34a; border-style:dashed; box-shadow:0 0 0 1px #e8c34a inset}
  .ps-card .ic{font-size:15px; line-height:1}
  .ps-card .nm{font-size:12px; font-weight:600; color:#f2f3f5; margin-top:3px}
  .ps-card .ds{font-size:10px; color:#aab0bb; line-height:1.25; margin-top:1px}
  .ps-mine-actions{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
  .pma-name{font-size:12px; font-weight:700; color:var(--hazard); margin-right:2px}
  .pma-btn{border:1px solid var(--edge); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:12px; font-weight:600; font-family:var(--sans)}
  .pma-load{background:var(--accent,#e0a32e); color:#1a1400; border-color:transparent}
  .pma-load:hover{filter:brightness(1.08)}
  .pma-del{background:var(--panel2); color:var(--txt2)}
  .pma-del:hover{border-color:#e05252; color:#e05252}
  .ps-rows{display:flex; flex-direction:column; gap:6px}
  /* вся панель набора — свой тёмный фон, чтобы текст читался на любой теме (в т.ч. «Карточный стол») */
  #playerSetup{background:#20242e; border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:10px 11px}
  #playerSetup .ps-label{color:#c3c9d4}
  #playerSetup .ps-row{color:#e6e8ec}
  #playerSetup .ps-row b{color:#f2f3f5}
  #playerSetup .ps-chip{background:#2b3040; color:#d7dbe3; border-color:rgba(255,255,255,.14)}
  #playerSetup .ps-chip.on{border-color:#e8c34a; background:rgba(224,163,46,.20); color:#fff}
  #playerSetup .ps-sum{color:#aab0bb; border-top-color:rgba(255,255,255,.12)}
  /* карты «Режим игры»/«Эффективность» и подсказка — фиксированный тёмный фон, читаемо на любой теме (в т.ч. «Карточный стол»): раньше светлый текст ложился на тан --panel2 и сливался */
  #modeCard, #perfCard{background:#20242e; border-color:rgba(255,255,255,.10)}
  #modeCard>h4{color:#c3c9d4}
  #perfCard>h4{color:#c3c9d4}
  #perfCard>div{color:#cfd4dd !important}
  /* оверлеи наследуют выбранную тему, но фон панели берём из тёмного pageBg темы (--steel),
     а вторичные тексты поднимаем к основному цвету темы — так стиль темы (золото/сериф/фетр) сохраняется, а текст читается */
  .screen{ --panel:var(--steel); --panel2:var(--steel); --txt2:var(--txt); --txt3:var(--txt); }
  .screen .inner{ background:var(--steel); color:var(--txt) }
  #perfCard #statrow{color:#cfd4dd !important}
  .hint{color:#c3c9d4; background:#20242e; border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:7px 10px}
  .ps-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; font-size:12px; color:var(--txt2)}
  .ps-row input[type=range]{width:104px}
  .ps-row b{font-family:var(--mono); font-size:12px; color:var(--txt); min-width:16px; text-align:right}
  .ps-chips{display:flex; gap:4px; grid-column:2/4}
  .ps-chip{border:1px solid var(--edge); background:var(--panel2); color:var(--txt2); border-radius:7px; padding:3px 8px; font-size:11px; cursor:pointer; font-family:var(--sans)}
  .ps-chip.on{border-color:var(--hazard); background:rgba(224,163,46,.15); color:var(--txt)}
  .ps-sum{margin-top:9px; padding-top:8px; border-top:1px dashed var(--edge); font-size:11px; color:var(--txt3); line-height:1.4}
  .ps-save{margin-top:8px}
  .ps-save button{width:100%; font-size:12px; padding:6px 10px}
  details.settings{margin-top:14px; border:1px solid var(--edge); border-radius:12px; background:var(--panel2); overflow:hidden}
  /* ПК: панель настроек той же ширины по центру — единая колонка (как на мобильном) */
  body.force-pc details.settings, body:not(.force-mobile):not(.mobile-layout) details.settings{ width:var(--board-w,100%); max-width:100%; margin-left:auto; margin-right:auto }
  details.settings>summary{
    cursor:pointer; list-style:none; padding:12px 14px; font-weight:600; font-size:14px;
    display:flex; justify-content:space-between; align-items:center; user-select:none;
  }
  details.settings>summary::after{content:'▸'; color:var(--txt3); transition:transform .15s}
  details.settings[open]>summary::after{transform:rotate(90deg)}
  .set-body{padding:0 14px 14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
  .set-body > *{min-width:0}
  .set-body input, .set-body textarea, .set-body select{max-width:100%; box-sizing:border-box}
  @media(max-width:620px){
    details.settings[open] .set-body{ max-height:70vh; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  }
  body.force-mobile details.settings[open] .set-body{ max-height:70vh; overflow-y:auto; overflow-x:hidden; touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  @media(max-width:620px){
    .set-body{grid-template-columns:1fr}
    .sr{grid-template-columns:minmax(0,1fr) 100px 32px; gap:5px; font-size:11.5px}
    .sr input[type=range]{height:22px}
    .sr .val{font-size:11.5px}
    .sr.chk{grid-template-columns:1fr 40px}
    .set-group select, .set-body select{max-width:100%}
    .stepbtn{width:16px; height:18px; flex:0 0 16px; font-size:8px}
    .stepwrap{gap:2px}
    .sr label{font-size:11px}
  }
  body.force-mobile .set-body{grid-template-columns:1fr}
  body.force-mobile .sr{grid-template-columns:minmax(0,1fr) 100px 32px; gap:5px; font-size:11.5px}
  body.force-mobile .sr .val{font-size:11.5px}
  body.force-mobile .sr.chk{grid-template-columns:1fr 40px}
  .set-group{border:1px solid var(--edge); border-radius:9px; padding:10px 12px; background:var(--field)}
  .set-group h5{margin:0 0 8px; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--hazard); font-weight:600}
  .set-group h5 small{color:var(--txt3); text-transform:none; letter-spacing:0; font-weight:400; margin-left:6px}
  /* карточки типов зон: чёткое разделение — воздух между ними, выделение активной */
  .ztcard{
    border:1px solid var(--edge); border-radius:11px; margin-bottom:14px; overflow:hidden;
    background:var(--field); box-shadow:0 2px 0 rgba(0,0,0,.28);
  }
  .ztcard:last-child{margin-bottom:6px}
  .ztcard:has(.ztchk:checked){
    border-color:var(--hazard); background:var(--panel2);
    box-shadow:0 0 0 1px rgba(224,163,46,.35), 0 3px 0 rgba(0,0,0,.3);
  }
  .zthead{display:flex; align-items:center; gap:8px; padding:11px 12px; cursor:pointer; user-select:none; font-size:13px; background:rgba(255,255,255,.028)}
  .ztcard:has(.ztchk:checked) .zthead{background:rgba(224,163,46,.10)}
  .zthead input{width:17px; height:17px; accent-color:var(--hazard); flex:0 0 auto}
  .zthead span{font-weight:600; color:var(--txt)}
  .zthead small{color:var(--txt3); font-size:11px; margin-left:auto; text-align:right; line-height:1.25}
  /* тело карточки — визуально вложено: отступ слева и своя подложка */
  .ztbody{
    padding:9px 12px 11px; border-top:1px solid var(--edge); display:none;
    background:rgba(0,0,0,.16); margin-left:8px; border-left:2px solid rgba(224,163,46,.35);
  }
  .ztcard:has(.ztchk:checked) .ztbody{display:block}
  .sr{display:grid; grid-template-columns:minmax(0,1fr) 110px 38px; gap:8px; align-items:center; margin-bottom:7px; font-size:12px; color:var(--txt2)}
  .sr label{overflow:visible; white-space:normal; line-height:1.25}
  .sr input[type=range]{width:100%; accent-color:var(--hazard); height:18px}
  .stepwrap{display:flex; gap:3px; align-items:center; min-width:0}
  .stepwrap input[type=range]{flex:1; min-width:0; width:auto}
  .stepbtn{width:20px; height:20px; flex:0 0 20px; border-radius:5px; border:1px solid var(--edge); background:var(--panel); color:var(--txt2); font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; user-select:none}
  .stepbtn:active{background:var(--field); color:var(--txt)}
  .sr .val{font-family:var(--mono); font-size:12px; color:var(--txt); text-align:right}
  .sr.chk{grid-template-columns:1fr 44px}
  .sr input[type=checkbox]{width:17px; height:17px; accent-color:var(--hazard); justify-self:end}
  .zone-row{border-top:1px dashed var(--edge); padding-top:7px; margin-top:7px}
  .zone-row .zname{font-size:11px; font-weight:600; margin-bottom:5px}
  .set-actions{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}
  .set-actions button{
    flex:1; min-width:120px; padding:10px; border-radius:9px; border:1px solid var(--edge);
    background:var(--panel); color:var(--txt); font-weight:600; cursor:pointer; font-size:13px;
  }
  .set-actions button:active{background:var(--field)}
  .note{grid-column:1/-1; font-size:11px; color:var(--txt3); line-height:1.5}
  /* компактная таблица комбинаций в справке */
  .cmbtab{width:100%; border-collapse:collapse; margin:8px 0 12px; font-size:12px}
  .cmbtab th,.cmbtab td{border:1px solid var(--edge); padding:4px 6px; text-align:left; vertical-align:top}
  .cmbtab th{background:var(--panel2); font-weight:700; font-size:11px; white-space:nowrap; word-break:normal}
  .cmbtab th:nth-child(1),.cmbtab th:nth-child(2){text-align:center}
  .cmbtab td:nth-child(1),.cmbtab td:nth-child(2){text-align:center; white-space:nowrap; width:1%}
  .stampbtn{background:var(--panel2); border:1px solid var(--edge)}
  .stampbtn.on, .stampbtn:active{background:var(--accent,#39d353); color:#fff; outline:3px solid #ffd23f; outline-offset:2px; animation:ringPulse 1.1s ease-in-out infinite}
  .stampbtn:disabled{background:var(--panel2); border-color:var(--edge); color:var(--txt3); opacity:1; filter:none; cursor:default}
  .turnpad button.scanbtn:not(.locked){background:linear-gradient(180deg,#4ac8e0 0%,#2f9ab5 100%); color:#04303a; box-shadow:0 4px 0 #1f6f80, inset 0 1px 0 rgba(255,255,255,.4)}
  .turnpad button.scanbtn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #1f6f80}
  .turnpad button.scanbtn:disabled{background:var(--panel2); border:1px solid var(--edge); color:var(--txt3); opacity:1; filter:none; cursor:default; box-shadow:none}
  canvas#board.stamp-cursor{cursor:crosshair}
  canvas#board.drone-cursor{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%233aa0d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='5' x2='21' y2='5'/><ellipse cx='7' cy='5' rx='3' ry='1.4'/><ellipse cx='17' cy='5' rx='3' ry='1.4'/><line x1='12' y1='5' x2='12' y2='8'/><circle cx='12' cy='11' r='3'/><path d='M12 14v3'/></svg>") 15 15, grab}
  .turnpad button.dronebtn{background:linear-gradient(180deg,#4bb4e0 0%,#2f86bd 100%); color:#04283a; box-shadow:0 4px 0 #1f5c7c, inset 0 1px 0 rgba(255,255,255,.4)}
  .turnpad button.dronebtn:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 #1f5c7c}
  .dronebtn.on{background:#2b6f96 !important; color:#fff; outline:3px solid #ffd23f; outline-offset:2px; animation:ringPulse 1.1s ease-in-out infinite}
  .dronebtn.ready{background:#2f8a52 !important; color:#fff; outline:3px solid #6ee7a0; outline-offset:2px; animation:ringPulseG 0.7s ease-in-out infinite}
  .dronebtn.holding{outline:2px solid #7fd0f0; outline-offset:2px}   /* шар в кармане, дрон не вооружён — спокойная метка без пульса */
  @keyframes ringPulseG{ 0%,100%{outline-color:#6ee7a0} 50%{outline-color:#b6f5cf} }
  .stampbtn.ready{background:#2f8a52 !important; color:#fff; outline:3px solid #ffd23f; outline-offset:2px; animation:ringPulse 0.7s ease-in-out infinite}
  @keyframes ringPulse2{ 0%,100%{outline-color:#4ac8e0} 50%{outline-color:#8fe0f0} }
  @keyframes ringPulse{ 0%,100%{outline-color:#ffd23f} 50%{outline-color:#ffe27a} }
  .turnpad button.dronebtn:disabled{background:var(--panel2); border:1px solid var(--edge); color:var(--txt3); opacity:1; filter:none; cursor:default; box-shadow:none}
  .dronegroup{display:flex; align-items:stretch; gap:6px; padding:5px; background:rgba(74,180,224,.10); border:2px solid rgba(74,180,224,.6); border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  /* заблокированные/запертые кнопки управления/режимов — читаемая тёмная заливка на любой теме (в т.ч. «Карточный стол») */
  .turnpad button:disabled, .bottompad button:disabled, .sidepad button:disabled,
  .stampbtn:disabled, .scanbtn:disabled, .dronebtn:disabled,
  .stampbtn.locked, .scanbtn.locked, .dronebtn.locked{
    background:#363b45 !important; color:#c3c8d1 !important; border-color:rgba(255,255,255,.12) !important; box-shadow:none !important; outline:none !important; animation:none !important; opacity:1 !important;
  }
  .dockrow{display:flex; gap:6px; align-items:center; pointer-events:auto; padding:0 6px}
  .dronegroup .dronebtn{box-shadow:0 3px 0 #1f5c7c, inset 0 1px 0 rgba(255,255,255,.4)}
  .dockdrone{color:#3aa0d8; display:flex; align-items:center; margin-right:1px; position:relative}
  .dockcharge{position:absolute; top:-6px; right:-7px; background:#3aa0d8; color:#fff; font-size:9px; font-weight:700;
    min-width:13px; height:13px; border-radius:7px; display:flex; align-items:center; justify-content:center; padding:0 2px; line-height:1}
  .nexttop{display:flex !important; flex-direction:row; gap:4px; align-items:center; padding:0 6px; flex:0 0 auto; min-width:auto !important}
  .nexttop .nb{width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.4); box-shadow:inset -1px -2px 2px rgba(0,0,0,.35), inset 1px 1px 2px rgba(255,255,255,.35); display:block}
  .nexttop img.nb{object-fit:cover}
  /* слоты-буфер: маленькие пунктирные кружки */
  /* карман: ряд ячеек — пустые контуры / цветные шары, активный с ободком */
  .dockcell{width:22px; height:22px; border-radius:50%; border:2px dashed rgba(255,255,255,.42); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); flex:0 0 auto}
  .dockcell.full{border-style:solid; border-color:rgba(255,255,255,.5); background:var(--dc); cursor:pointer}
  .dockcell.active{border-style:dashed; border-color:#ffd23f; outline:2px solid #ffd23f; outline-offset:2px; animation:ringPulse 1.1s ease-in-out infinite}

  /* растянуть иконки шапки на всё свободное место */
  .top .topline .topbtns{ flex:1 1 auto !important; margin-left:8px !important; justify-content:space-between !important; gap:6px }
  .top .topline .topbtns .iconbtn{ flex:1 1 0 !important; width:auto !important; min-width:0 }
  .top .topline > button#m-start, .top .topline > button#m-pause{ flex:0 0 auto !important; min-width:60px !important }

  /* ================= КОМПАКТНЫЙ РЕЖИМ (малые экраны, напр. iPhone 11 Pro 375x812) =================
     Работает поверх мобильной раскладки: тело получает и .force-mobile, и .compact-layout.
     Цель — освободить вертикаль: шапка в одну строку, счётчики ниже, hud скрыт во время партии. */
  .compact-layout .machine{padding:6px 5px; border-radius:10px}
  .compact-layout.body-pad{padding:4px 4px}
  .compact-layout .top{margin-bottom:6px; gap:5px}
  /* шапка: бренд компактнее, подзаголовок прячем */
  .compact-layout .brand{font-size:13px}
  .compact-layout .brand small, .compact-layout .brand-sub, .compact-layout .brand-build{display:none}
  .compact-layout .brand-mark{font-size:8px}
  /* счётчики ниже и теснее */
  .compact-layout .totals{gap:4px; margin-bottom:6px}
  .compact-layout .totals > div:not(.topbtns){padding:2px 5px}
  .compact-layout .totals .k{font-size:7px; letter-spacing:0; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.12}
  .compact-layout .totals .v{font-size:13px}
  /* строка Старт/Пауза + иконки — ниже */
  .compact-layout .topline > button{padding:6px 10px; font-size:13px; min-width:0}
  .compact-layout .topbtns .iconbtn{padding:5px 6px; font-size:13px}
  /* панель кнопок — компактнее, но все повороты остаются видимыми */
  .compact-layout .turnpad button{padding:8px 4px; font-size:13px}
  .compact-layout .turnpad button .deg{font-size:9px}
  .compact-layout .turnpad{gap:5px}
  /* во время партии в компакте прячем только выбор режима и «следующие шары»;
     доска противника (или строка «робот не активен») и эффективность остаются под доской */
  .compact-layout.in-play #modeCard, .compact-layout.in-play #nextcard{display:none}
  /* панель кнопок в две строки:
     строка 1 — карман+дрон, штамп, поиск (инструменты, жмут реже)
     строка 2 — четыре поворота во всю ширину (главное действие, кнопки крупные)
     порядок задаётся через order, разрыв строки — псевдоэлементом. */
  .compact-layout .bottompad{flex-wrap:wrap; gap:5px; margin:8px 0 4px}
  .compact-layout .bottompad > .dronegroup{order:1; flex:0 1 auto; padding:3px 6px}
  .compact-layout .bottompad > .stampbtn{order:2; flex:1 1 0}
  .compact-layout .bottompad > .scanbtn{order:3; flex:1 1 0}
  .compact-layout .bottompad::after{content:''; order:4; flex:1 0 100%; height:0}
  .compact-layout .bottompad > button[data-deg]{order:5; flex:1 1 0}
  .compact-layout .bottompad > button{height:50px; padding:5px 2px; min-width:0}
  /* дрон не растягивается: базовое .bottompad button{flex:1} его раздувало */
  .compact-layout .dronegroup .dronebtn{flex:0 0 auto; height:38px; padding:4px 9px}
  .compact-layout .dockcell{width:16px; height:16px; border-width:1.5px}
  .compact-layout .dockdrone svg{width:14px; height:14px}
  /* Выход/Пауза в компактном виде — только значок, слово уходит в подсказку;
     освободившаяся ширина достаётся шести иконкам справа */
  .compact-layout #m-start .bl, .compact-layout #m-pause .bl{display:none}
  .compact-layout .topline > button#m-start,
  .compact-layout .topline > button#m-pause{min-width:0 !important; flex:0 0 auto !important; padding:6px 11px; font-size:16px}
  .compact-layout .topline{gap:5px}
  .compact-layout .topbtns{gap:4px}
  .compact-layout .topbtns .iconbtn{padding:6px 7px; font-size:15px}
  #m-start .bl, #m-pause .bl{margin-left:5px}
  /* ---- зум доски ---- */
  .zoombtn{display:none}                                  /* на ПК не нужен: клетка и так крупная */
  .mobile-layout .zoombtn, body.force-mobile .zoombtn{display:flex}
  @media(max-width:620px){ body:not(.force-pc) .zoombtn{display:flex} }
  .turnpad button.zoombtn{background:#4a5162 !important; color:#f2f3f5 !important; border-color:rgba(255,255,255,.16) !important}
  .turnpad button.zoombtn.on{background:#3aa0d8 !important; color:#fff !important}
  .chamber-wrap{scrollbar-width:thin}
  body.zoomed .chamber-wrap{-webkit-overflow-scrolling:touch; border-radius:10px}
  /* порядок в компактной панели: карман, штамп, поиск, зум | перенос | четыре поворота */
  .compact-layout .bottompad > .zoombtn{order:4; flex:1 1 0}
  .compact-layout .bottompad::after{order:5}
  .compact-layout .bottompad > button[data-deg]{order:6}
  /* индикатор «следующие шары» показывает и РЕЖИМ СБОРА расположением кубиков:
     линия — в ряд, прямоугольники — квадратом, оба — треугольником */
  /* !important — потому что .nexttop и .nextmini задают display:flex !important */
  .nextshape{display:grid !important; gap:3px; align-items:center; justify-items:center; cursor:help;
    flex-direction:unset !important; width:fit-content}
  .nextshape .nb{width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.35);
    box-shadow:inset -1px -1px 2px rgba(0,0,0,.3), inset 1px 1px 2px rgba(255,255,255,.3); display:block}
  .nextshape.m-lines{grid-auto-flow:column !important; grid-template-columns:none !important}   /* ▪▪▪ в линию */
  .nextshape.m-rects{grid-auto-flow:row !important; grid-template-columns:repeat(2,auto) !important} /* блоком */
  .nextshape.m-both{grid-auto-flow:row !important; grid-template-columns:repeat(2,auto) !important}  /* пирамидка */
  .nextshape.m-both .nb:first-child{grid-column:1/3}
  .mobile-layout .nextshape, body.force-mobile .nextshape{gap:2px}
  .compact-layout .nextshape .nb{width:9px; height:9px}
  .brand-build{font-size:11px; font-weight:600; color:var(--txt3); letter-spacing:.2px; white-space:nowrap}
  .compact-layout .brand-build{font-size:10px}
  /* иконка-фигура штампа: масштабируется от font-size .ico, как эмодзи в соседних кнопках */
  .turnpad button .ico svg{width:1em; height:1em; display:block}
  .zoombtn .ico{font-size:22px !important}   /* ⛶ визуально крупнее прочих глифов — выравниваем */
  .compact-layout .turnpad button .ico{font-size:26px}
  /* иконки инструментов внутри текста правил — тот же вид, что на кнопках */
  .hico{width:1.15em; height:1.15em; vertical-align:-0.22em; display:inline-block}
  .iconbtn.muted{opacity:.55; filter:grayscale(.5)}
  /* галерея фигур для штампа в правилах */
  .shape-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0}
  .shcard{background:var(--panel2); border:1px solid var(--edge); border-radius:9px; padding:8px 4px;
    display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
  .shcard b{font-size:12px}
  .shcard small{font-size:10px; color:var(--txt3); line-height:1.2}
  .shbox{width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--hazard)}
  .shico{width:28px; height:28px}
  @media(max-width:480px){ .shape-gallery{grid-template-columns:repeat(2,1fr)} }
  /* мини-иконки активных форм рядом со штампом */
  .stampshapes{display:inline-flex; gap:2px; align-items:center; margin-left:4px; opacity:.85; cursor:help}
  .mshico{width:11px; height:11px; color:var(--hazard)}
  .compact-layout .stampshapes{margin-left:2px}
  .compact-layout .mshico{width:9px; height:9px}
  .cx-examples{margin:12px 0}
  .cx-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:2px}
  /* жетон-овал (как в игре: символ сверху, номинал снизу) вместо игральной карты */
  .cx-card{position:relative; width:42px; height:50px; border:2.5px solid; border-radius:50%;
    background:radial-gradient(120% 120% at 50% 32%, #fbf6ea, #e6dbc4);
    box-shadow:inset 0 -2px 4px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.28);
    display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
  .cx-r{order:2; position:static; font-size:12px; font-weight:800; margin-top:1px}
  .cx-r2{display:none}
  .cx-s{order:1; font-size:19px}
  .cx-cap{font-size:12.5px; color:var(--txt2); text-align:center; margin:2px 0 12px}