/* Шрифты лежат в static/fonts, из интернета ничего не грузится. У каждого два файла: латиница с цифрами и кириллица.
   Один файл обслуживает все начертания (font-weight: 100 900), чтобы браузер не «жирнил» пиксели сам.
   «Game Pixel» составной: латиница и цифры — Pixelify Sans, кириллица — Tiny5. У Pixelify Sans кириллица неполная
   (нет букв О и П, часть букв похожа на строчные), а высота прописных у этих двух шрифтов совпадает. */
@font-face{font-family:'Game Pixel';src:url('/static/fonts/pixelify-sans-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Game Pixel';src:url('/static/fonts/tiny5-cyrillic.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Handjet';src:url('/static/fonts/handjet-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Handjet';src:url('/static/fonts/handjet-cyrillic.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* У Tektur знак % с едва заметными точками и мелко читается как «/»: исключаем U+0025, его нарисует Golos Text. */
@font-face{font-family:'Tektur';src:url('/static/fonts/tektur-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-0024,U+0026-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Tektur';src:url('/static/fonts/tektur-cyrillic.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-text-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-text-cyrillic.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{color-scheme:dark;--bg:#13111b;--panel:#1d1c2b;--line:#41394a;--text:#efe9de;--muted:#aaa1b0;--gold:#e1bc75;--blue:#75bdff;--yellow:#f6d576;--red:#ff8b7c;--green:#89d4a1;--gray:#a9a8b6}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 'Golos Text','Segoe UI',sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button:hover:not(:disabled){filter:brightness(1.14)}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}h1,h2,p{margin:0}kbd{display:inline-flex;justify-content:center;align-items:center;height:22px;min-width:24px;padding:0 5px;border:1px solid #675d6c;border-radius:4px;font:10px 'Golos Text',sans-serif;color:#d2c6cc}.hidden{display:none!important}.blue{--school:var(--blue)}.yellow{--school:var(--yellow)}.red{--school:var(--red)}.green{--school:var(--green)}.gray{--school:var(--gray)}

/* ============ Игра: верхняя полоса, арена, нижняя полоса ============ */
/* Пиксельный шрифт заголовков, меню и цифр. Вариант выбирается в настройках: app.js ставит data-font на <html>. */
/* --pixel — крупные надписи: название, меню, заголовки. --hud — мелкие: цифры маны, подписи кнопок, подсказки меню.
   Пиксельный шрифт мелким кеглем расплывается (цифры 5 и 9 становятся похожи на S и 3), поэтому мелкое набрано чётким Tektur. */
:root{--pixel:'Game Pixel','Golos Text','Segoe UI',sans-serif;--hud:'Tektur','Golos Text','Segoe UI',sans-serif;--cell:26px}
:root[data-font=handjet]{--pixel:'Handjet','Golos Text','Segoe UI',sans-serif;--hud:'Handjet','Golos Text','Segoe UI',sans-serif}
:root[data-font=tektur]{--pixel:'Tektur','Golos Text','Segoe UI',sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 24px;border-bottom:1px solid #39313c;background:#15121c}
.brand{text-decoration:none;display:flex;gap:8px;align-items:center;color:var(--text);letter-spacing:4px;font:600 19px var(--pixel)}
.brand>span{font-size:24px;color:var(--gold);font-weight:400}
.brand>b{font-weight:800}
.top-actions{display:flex;gap:20px;align-items:center}
.nav-button{background:none;border:0;color:#c0b5c3;padding:5px 0;font-size:12px}
.nav-button kbd{margin-left:5px;height:20px;min-width:20px;font-size:9px}
.connection{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.connection i{width:6px;height:6px;background:#837480;border-radius:50%}
.connection.connected i{background:var(--green);box-shadow:0 0 8px #89d4a170}
.game-shell{max-width:1920px;margin:auto;padding:12px 16px 0}
.scene-error{position:relative;z-index:2147483647;margin:0 0 10px;padding:10px 14px;border:2px solid var(--red);background:#2a1418;color:#ffd9d2;font-size:13px;line-height:1.5}

/* Арена — сетка: слева вы, по центру карточка, справа соперник. Холст сцены лежит под всем. */
.arena{--s:3;position:relative;overflow:hidden;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr auto;
  grid-template-areas:"hud hud hud" "own scribe enemy" "own actions enemy";
  column-gap:12px;padding:12px 18px 14px;min-height:min(calc(100dvh - 150px),820px);
  border:1px solid #554552;background:#29232d}
.scene-canvas{position:absolute;left:0;top:0;z-index:-1;image-rendering:pixelated}
.arena.shaken{animation:arena-shake .22s steps(4)}
@keyframes arena-shake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}

.hud{grid-area:hud;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 6px 8px}
.score{display:flex;align-items:center;gap:12px;min-width:0;font:600 17px var(--pixel);text-shadow:0 2px 0 #0d0a14}
.score>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enemy-score{justify-content:flex-end}
.hearts{color:var(--gold);font-size:17px;letter-spacing:3px;white-space:nowrap}
.enemy-score .hearts{color:#c9add6}
.heart-empty{opacity:.22}
.phase-block{display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 0 #0d0a14}
.phase-block>span{font:500 10px var(--hud);letter-spacing:2px;color:#b6a1bc}
.phase-block strong{font:600 19px var(--pixel);letter-spacing:2px;color:var(--gold)}
.phase-block.preparation strong{color:#ffe2a0}

.fighter{--hand-h:84px;width:250px;justify-self:center;align-self:end;display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.own-fighter{grid-area:own}.enemy-fighter{grid-area:enemy}

/* Мана: полоска, запас и заметная цветная скорость восстановления */
.fighter-mana{display:grid;gap:5px;padding:8px 10px;background:#13121dd9;border:1px solid #5b4a5e;box-shadow:0 4px 0 #0806104d}
.mana-row{display:grid;grid-template-columns:9px 1fr 46px 58px;gap:7px;align-items:center;position:relative;min-height:19px}
.mana-symbol{width:8px;height:8px;background:var(--school);transform:rotate(45deg)}
.mana-track{height:9px;background:#343039;overflow:hidden}
.mana-track>i{display:block;height:100%;background:var(--school);transition:width .1s linear}
.mana-value{font:500 12px var(--hud);color:#d9d0dc;text-align:right;white-space:nowrap}
.mana-rate{font:600 13px var(--hud);color:var(--school);text-align:left;white-space:nowrap;text-shadow:0 1px 0 #0008}
.mana-rate.slow{opacity:.8}
.mana-rate.stalled{color:#1b1422;background:var(--school);padding:0 4px;text-shadow:none;animation:rate-blink 1s steps(2) infinite}
@keyframes rate-blink{50%{opacity:.55}}
.mana-row.spent{animation:mana-spend .5s ease-out}.mana-row.gained{animation:mana-gain .5s ease-out}
@keyframes mana-spend{0%{background:#ff717250}100%{background:transparent}}
@keyframes mana-gain{0%{background:#a6e3ae40}100%{background:transparent}}
.mana-delta{position:absolute;right:62px;top:-9px;z-index:5;color:#ffaba0;font:600 13px var(--hud);pointer-events:none;animation:delta-out .85s forwards;text-shadow:0 1px 0 #000}
.mana-delta.positive{color:#b8f0bc}
@keyframes delta-out{to{transform:translateY(-16px);opacity:0}}

.shield-slots{display:flex;gap:6px;justify-content:center}
.shield-slot{width:28px;height:26px;border:1px solid #695965;background:#1d1925d9;color:#90818d;padding:0;font:500 12px var(--hud)}
.shield-slot:disabled{opacity:1}
.shield-slot.filled{color:var(--school);border-color:var(--school);background:color-mix(in srgb,var(--school) 20%,#1d1925)}
.shield-slot.enhanced{box-shadow:0 0 0 1px var(--school),0 0 10px color-mix(in srgb,var(--school) 35%,transparent)}
/* Перестановка соседних щитов: на компьютере — клавиши Q и E, на телефоне — кнопки ⇄ между щитами (см. мобильную вёрстку) */
.shield-swap{display:none}

/* Невидимая область над магом: сюда перетаскивают карты; по её низу сцена ставит пол */
.mage-target{position:relative;height:calc(var(--s) * 66px);border:1px dashed transparent;touch-action:none}
.drop-label{display:none;position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);padding:8px 10px;white-space:nowrap;font:500 12px var(--hud);color:#ffe2a1;background:#18101fe0;border:1px solid var(--gold);z-index:4}
.dragging .drop-target{border-color:#c4b1757a;background:#e1bc7508}
.dragging .mage-target .drop-label{display:block}
.drop-target.drop-valid{border-color:#f4d484;background:#e1bc7520}
.drop-target.drop-invalid{border-color:#d68b89;background:#df666612}
.drop-target.drop-invalid .drop-label{color:#ffad9c;border-color:#d68b89}

.hand-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:6px;height:calc(var(--hand-h) + 10px);padding:4px;margin:2px -4px 0;border:1px dashed transparent}
.hand-card{height:var(--hand-h);border:1px dashed #655566;background:#19141fd9;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:5px 3px;color:#b2a1b8;min-width:0;touch-action:none;user-select:none}
.hand-card.empty{color:#806a88}
.hand-card.empty>span{font:500 20px var(--hud);opacity:.3}
.hand-card.filled{border:1px solid color-mix(in srgb,var(--school) 60%,#655566);cursor:pointer;box-shadow:0 3px 0 #0005}
.hand-card.filled:hover{background:color-mix(in srgb,var(--school) 14%,#19141f)}
.hand-card.unplayable{cursor:grab}
.hand-card strong{font:400 9px/1.2 'Golos Text',sans-serif;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hand-card .hand-key{position:absolute;left:3px;top:2px;font:500 9px var(--hud);color:#8f7d97}
.enhanced-star{position:absolute;right:4px;top:0;color:var(--gold);font-size:12px}
.card-back{border-style:solid;background:repeating-linear-gradient(45deg,#362736,#362736 3px,#302332 3px,#302332 6px)}
.card-back>span{color:#b6a289;font-size:20px}
.enemy-hand .hand-card{height:calc(var(--hand-h) * .64)}
.fighter-note{font:500 12px var(--hud);color:#d8c7dc;text-shadow:0 2px 0 #0d0a14;height:calc(var(--hand-h) + 10px);display:flex;align-items:flex-start;justify-content:center;padding:10px 4px 4px;margin-top:2px}

/* Карточка висит в воздухе: без панели, под ней только полоса узнавания */
.scribe{grid-area:scribe;align-self:start;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:8px}
.card-float{display:flex;align-items:flex-start;gap:10px;position:relative}
.card-float::before{content:'';position:absolute;inset:-34px -28px -30px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow,#e1bc75) 22%,transparent),transparent)}
.drawing-card{display:grid;grid-template-columns:var(--edge) auto var(--edge);background:#17131fe8;border:2px solid var(--glow,#8d7a5e);box-shadow:0 0 0 2px #0d0a14,0 10px 0 -4px #0d0a1480;--edge:15px}
.drawing-card.ready{box-shadow:0 0 0 2px #0d0a14,0 0 18px color-mix(in srgb,var(--glow) 55%,transparent)}
.drawing-card.enhanced{box-shadow:0 0 0 2px #0d0a14,0 0 0 4px var(--gold),0 0 26px color-mix(in srgb,var(--glow) 70%,transparent)}
/* Поля карточки: за них готовый знак перетаскивают. Точки — «насечка» для пальца; у готового знака поля загораются цветом школы. */
.card-edge{min-height:var(--edge);touch-action:none;user-select:none;background:radial-gradient(circle,#ffffff2e 1.1px,transparent 1.5px) center/6px 6px}
.card-edge.top-edge,.card-edge.bottom-edge{grid-column:1/-1}
.drawing-card.ready .card-edge{cursor:grab;background-color:color-mix(in srgb,var(--glow) 26%,transparent);background-image:radial-gradient(circle,color-mix(in srgb,var(--glow) 75%,white) 1.3px,transparent 1.7px)}
.drawing-card.ready .card-edge:hover{background-color:color-mix(in srgb,var(--glow) 42%,transparent)}
.drawing-card.ready .card-edge:active{cursor:grabbing}
.pixel-grid{display:grid;grid-template-columns:repeat(5,var(--cell));grid-auto-rows:var(--cell);gap:3px;padding:1px;touch-action:none;user-select:none}
.pixel-cell{border:1px solid #4a3f57;background:#2a2536;padding:0;position:relative;touch-action:none}
.pixel-cell:hover{border-color:#c5ae77}
.pixel-cell.painted{background:var(--school);border-color:color-mix(in srgb,var(--school) 70%,white);box-shadow:inset -2px -2px 0 #0003,inset 2px 2px 0 #fff3}
.pixel-cell.ghost::after{content:'';position:absolute;inset:6px;background:var(--school);opacity:.42}
.pixel-cell.cursor{outline:2px solid #fff;outline-offset:1px;z-index:2}
.palette{display:flex;flex-direction:column;gap:6px;padding-top:11px}
#palette-colors{display:grid;gap:6px}
.palette-color,.palette>button{width:30px;height:30px;border:1px solid #625168;background:#18121fd9;color:#b5a9ba;padding:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.palette-color>i{width:14px;height:14px;background:var(--school)}
.palette-color.active{border-color:var(--school);box-shadow:0 0 0 1px var(--school),0 0 12px color-mix(in srgb,var(--school) 45%,transparent)}
.palette-color.active>i{width:18px;height:18px}
#eraser{margin-top:6px}
.palette>button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.recognition{width:calc(var(--cell) * 5 + 34px);display:grid;gap:5px;margin-right:40px}
.match-track{position:relative;height:9px;background:#17131fe8;border:1px solid #5b4a5e;box-shadow:0 0 0 1px #0d0a14}
.match-track>i{display:block;height:100%;width:0;background:var(--glow,var(--gold));transition:width .12s}
.match-track>b{position:absolute;top:-3px;bottom:-3px;width:2px;background:#efe9de;opacity:.7}
.match-line{display:flex;justify-content:space-between;gap:8px;font:500 12px var(--hud);color:#e6d9ea;background:#17131fd9;padding:1px 6px;min-height:20px}
.match-line>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-line strong{color:var(--gold);font-weight:600;white-space:nowrap}

/* Нулевая ширина: кнопки стоят по центру, но смена подписи («Каст» → «На врага») не раздвигает колонку и не сдвигает магов */
.quick-actions{grid-area:actions;align-self:end;justify-self:center;display:flex;justify-content:center;width:0;gap:8px;padding-bottom:6px}
.quick-actions button{display:flex;align-items:center;gap:7px;border:1px solid #6b5760;background:#221a29e8;color:#ecdcc2;padding:5px 9px;font:500 12px var(--hud);white-space:nowrap}
.quick-actions kbd{height:18px;min-width:20px;font-size:9px}
.quick-actions button.attack:not(:disabled){border-color:var(--red)}
.quick-actions button.shield:not(:disabled){border-color:var(--blue)}

.mini-glyph{display:grid;grid-template-columns:repeat(5,4px);grid-auto-rows:4px;gap:1px;flex:none}
.mini-glyph>i{background:#ffffff08}
.mini-glyph>i.on{background:var(--school)}
.mini-glyph>i.blue{--school:var(--blue)}.mini-glyph>i.yellow{--school:var(--yellow)}.mini-glyph>i.red{--school:var(--red)}.mini-glyph>i.green{--school:var(--green)}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;background:#281b32f5;border:2px solid var(--gold);padding:12px;box-shadow:0 12px 35px #0009;transform:translate(-50%,-50%) rotate(-4deg);color:var(--text);text-align:center;width:110px;font-size:10px}
.drag-ghost .mini-glyph{grid-template-columns:repeat(5,7px);grid-auto-rows:7px;gap:2px;justify-content:center;margin-bottom:8px}
.dragging{cursor:grabbing;user-select:none}.drag-source{opacity:.4}

.arena-overlay{position:absolute;inset:0;background:#140e1dd9;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;z-index:8;padding:25px}
.arena-overlay.result{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 26px;border:2px solid var(--gold);box-shadow:0 0 0 2px #0d0a14,0 14px 40px #000a}
.arena-overlay h1{font:600 28px var(--pixel);color:var(--gold)}
.arena-overlay p{color:#cdb8d2;font-size:13px;max-width:340px;margin:10px 0 18px}
.gold-button{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--gold);color:#2b1e2d;padding:13px 20px;border:1px solid #f1cf8b;border-radius:5px;font-size:12px;min-height:45px}
.arena-overlay .gold-button{min-height:38px;padding:9px 16px}

.bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 6px 14px;flex-wrap:wrap}
.chronicle{display:flex;gap:14px;align-items:center;min-width:0}
.chronicle>span{color:#9e80a5;letter-spacing:1.5px;font-size:9px}
#battle-log{display:grid;gap:2px;color:#c3a8c8;font-size:12px}
#battle-log>div{display:flex;gap:8px}
#battle-log time{color:#7e648a;font-size:11px;flex:none}
.room-bar{display:flex;gap:15px;align-items:center;font-size:11px;color:#bd9fc1;flex:none}
.room-bar strong{letter-spacing:2px;color:var(--gold);margin-left:6px}
.bottom-bar button{background:#291c2d;border:1px solid #634967;color:#c6a6ca;font-size:11px;padding:6px 9px}
.training-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ============ Окна: меню, гримуар, управление ============ */
.fullscreen-dialog{background:radial-gradient(ellipse at 50% 0%,#342237,transparent 70%),#15111df7;color:var(--text);border:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;overflow:auto}.fullscreen-dialog::backdrop{background:#0c0714ee}.menu-content,.overlay-content{max-width:1200px;margin:auto;padding:70px 45px 45px;position:relative}.dialog-close{position:absolute;top:30px;right:40px;font-size:30px;color:#b093b5;border:0;background:none}.eyebrow{display:block;font-size:9px;letter-spacing:2.5px;color:#a187ac}.menu-content h1,.overlay-content h1{font:500 37px/1.4 'Golos Text',sans-serif;letter-spacing:-1px;margin-top:9px}h1>span{color:var(--gold)}.menu-intro{color:#b397bd;margin-top:10px;font-size:12px}input:not([type=checkbox]){display:block;margin-top:7px;width:100%;padding:12px;border:1px solid #634a6e;background:#1c1426;color:var(--text);border-radius:4px}#join-code{letter-spacing:3px;font-family:monospace;text-transform:uppercase}.gold-button{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--gold);color:#2b1e2d;padding:13px 20px;border:1px solid #f1cf8b;border-radius:5px;font-size:12px;min-height:45px}.error-copy{font-size:11px;color:var(--red);min-height:18px;margin-top:14px}
.grimoire-schools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:35px}.grimoire-school{border-top:2px solid var(--school);padding-top:12px}.grimoire-school>h2{display:flex;justify-content:space-between;font:500 14px 'Golos Text',sans-serif;color:var(--school);margin-bottom:15px}.grimoire-school>h2>small{font:8px 'Golos Text',sans-serif;color:#94799e;padding-top:5px}.spell-choice{display:flex;align-items:center;gap:18px;background:#24192de8;color:var(--text);border:1px solid #584261;width:100%;padding:17px 14px;margin-bottom:11px;border-radius:5px;text-align:left}.spell-choice.selected{border-color:var(--school);background:color-mix(in srgb,var(--school) 10%,#24192d)}.spell-choice .mini-glyph{grid-template-columns:repeat(5,6px);grid-auto-rows:6px;gap:2px}.spell-choice strong{font-weight:500;font-size:11px;display:block}.spell-choice small{color:#b196bc;font-size:9px;display:block;margin-top:6px}.grimoire-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;font-size:10px;color:#aa8fb5}.grimoire-footer input{accent-color:var(--gold);vertical-align:middle;margin-right:7px}.help-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:35px 0}.help-columns h2{font:500 17px 'Golos Text',sans-serif;margin-bottom:18px;color:#e5c49a}.help-columns ul{padding-left:16px}.help-columns li,.help-columns p{font-size:12px;color:#b49bbe;line-height:1.85;margin:10px 0}.key-row{display:flex;gap:7px;align-items:center;margin-top:13px;font-size:10px;color:#c1a6ca}.help-content>.gold-button{width:260px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,130px);background:#302334;border:1px solid #bc9566;padding:12px 20px;max-width:calc(100vw - 30px);color:var(--text);font-size:12px;border-radius:6px;z-index:60;pointer-events:none;transition:transform .2s;text-align:center}.toast.visible{transform:translate(-50%,0)}
.help-columns .key-row{flex-wrap:wrap}
.toast{opacity:0}.toast.visible{opacity:1}

/* ============ Главное меню: текстовые пункты прямо поверх демо-боя, как в старых аркадах ============ */
.menu-dialog{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:transparent;color:var(--text);overflow:auto}
.menu-dialog[open]{display:flex}
.menu-dialog::backdrop{background:radial-gradient(ellipse 30% 58% at 50% 48%,#000000c4,#00000078 55%,transparent 80%),linear-gradient(#000000a8,#00000028 24%,#00000028 76%,#000000b0)}
.menu-stack{margin:auto;display:flex;flex-direction:column;align-items:center;width:min(560px,100vw);padding:18px 12px}
.menu-screen{display:flex;flex-direction:column;gap:10px}
.text-menu{align-items:center;text-align:center;gap:0}
.menu-title h1{--title-len:8;font:600 min(88px,calc(620px / var(--title-len)))/1 var(--pixel);letter-spacing:.2em;margin:0 0 0 .2em;white-space:nowrap;color:var(--gold);text-shadow:0 4px 0 #6b4a1c,0 9px 0 #000,0 0 30px #000}
.menu-title h2{font:600 54px/1 var(--pixel);letter-spacing:10px;margin:0 0 18px 10px;color:var(--gold);text-shadow:0 3px 0 #6b4a1c,0 7px 0 #000,0 0 26px #000}
.menu-title p{font:500 15px var(--pixel);letter-spacing:9px;color:#e6dccb;text-shadow:0 2px 0 #000;margin:10px 0 26px 9px}
.menu-items{display:flex;flex-direction:column;align-items:center;gap:2px}
.menu-items button{position:relative;background:none;border:0;padding:3px 40px;font:600 31px/1.25 var(--pixel);letter-spacing:3px;color:#d9d0c0;text-shadow:0 3px 0 #000,0 0 16px #000}
.menu-items button:focus{outline:none;color:var(--gold)}
.menu-items button:focus::before,.menu-items button:focus::after{content:'✧';position:absolute;top:3px;animation:menu-blink .8s steps(2) infinite}
.menu-items button:focus::before{left:4px}.menu-items button:focus::after{right:4px}
@keyframes menu-blink{50%{opacity:.2}}
.code-row{display:flex;flex-direction:column;align-items:center;gap:4px;margin:12px 0 4px;font:500 13px var(--hud);letter-spacing:4px;color:#cfc4b4;text-shadow:0 2px 0 #000}
.code-row input#join-code{display:block;width:230px;margin:0;padding:4px 0 2px 10px;border:0;border-bottom:3px solid #8d7a5e;border-radius:0;background:#000000a0;color:var(--gold);font:600 30px var(--pixel);letter-spacing:10px;text-align:center;text-transform:uppercase}
.code-row input#join-code:focus{outline:none;border-bottom-color:var(--gold)}
.menu-hint{height:calc(3 * 1.45em);line-height:1.45;overflow:hidden;margin:22px 0 0;font:500 14px var(--hud);color:#d9d0c0;text-shadow:0 2px 0 #000,0 0 10px #000;text-align:center}
.menu-dialog .error-copy{min-height:0;margin:8px 0 0;font:500 14px var(--hud);text-shadow:0 2px 0 #000;text-align:center}
.menu-dialog .error-copy:empty{display:none}
/* подсказка под списком занимает постоянные три строки (на телефоне — четыре): меню не прыгает, когда меняется её длина */
@media(max-width:760px){.menu-hint{height:calc(4 * 1.45em)}}
.menu-keys{margin:14px 0 0;font-size:11px;color:#a39a8c;text-shadow:0 1px 0 #000;display:flex;align-items:center;gap:5px}
.menu-keys kbd{height:18px;min-width:18px;font-size:9px;background:#00000080}
/* Настройки — единственный экран меню с панелью: ползункам нужен спокойный фон */
.menu-panel{width:min(430px,calc(100vw - 24px));padding:18px 22px 16px;background:#100e14f2;border:2px solid #8d7a5e;box-shadow:0 0 0 2px #000,0 18px 50px #000a}
.settings-head{display:flex;align-items:center;gap:14px}
.settings-head h2{font:600 24px var(--pixel);color:var(--gold);letter-spacing:2px}
.settings-head button{background:none;border:0;color:#c9c0b4;font-size:12px;padding:4px 0}
.settings-head button:hover{color:var(--gold)}
.menu-panel .field{font-size:11px;color:#b9ae9f}
.menu-panel .field input{display:block;margin-top:4px;width:100%;padding:8px 10px;border:1px solid #5b5148;background:#1a171d;color:var(--text);border-radius:0;font-size:14px}
.menu-screen h3{font:600 14px var(--hud);letter-spacing:1px;color:#e9e1d5;margin:6px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.menu-screen h3 small{font:400 10px 'Golos Text',sans-serif;letter-spacing:0;color:#8f8679}
.background-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.background-choice{height:62px;padding:0;border:1px solid #4a433d;background:#1a171d 50% 78%/190% auto no-repeat;image-rendering:pixelated;position:relative;color:var(--text);overflow:hidden}
.background-choice span{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;background:#000000c8;font:500 11px var(--hud);text-align:left}
.background-choice[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.background-choice[aria-pressed=true] span{color:var(--gold)}
.presets{display:flex;gap:6px}
.presets button{flex:1;padding:6px 4px;background:#1a171d;border:1px solid #4a433d;color:#d9d0c0;font:500 12px var(--hud)}
.presets button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.sliders{display:flex;flex-direction:column;gap:7px}
.slider{display:grid;grid-template-columns:1fr auto;gap:1px 10px;font-size:12px;color:#d9d0c0}
.slider output{font:600 12px var(--hud);color:var(--gold);white-space:nowrap}
.slider small{grid-column:1/-1;font-size:10px;color:#8f8679;line-height:1.3}
.slider input[type=range]{grid-column:1/-1;display:block;width:100%;margin:2px 0 0;padding:0;border:0;background:none;accent-color:var(--gold)}
/* Пока игра не начата, за меню идёт демо-бой: игровые панели спрятаны, остаются только маги */
.arena.attract .hud,.arena.attract .scribe,.arena.attract .quick-actions,.arena.attract .fighter>:not(.mage-target),.arena.attract .arena-overlay{visibility:hidden}
.game-shell.attract .bottom-bar{visibility:hidden}
@media(max-width:760px){.menu-title h1{font-size:min(58px,calc((100vw - 40px) / var(--title-len) / 1.05))}.menu-title h2{font-size:40px}.menu-title p{letter-spacing:6px;margin-bottom:18px}.menu-items button{font-size:25px;padding:3px 32px}.menu-keys{display:none}.menu-panel{padding:14px 14px 12px}}
@media(max-height:620px){.menu-title h1{font-size:min(56px,calc(520px / var(--title-len)))}.menu-title p{margin-bottom:10px}.menu-items button{font-size:24px}.menu-hint{margin-top:10px}}

@media(min-width:1700px){:root{--cell:30px}.fighter{--hand-h:100px;width:300px}.mana-row{min-height:22px}}
@media(max-width:1050px){.fighter{width:210px}.mana-row{grid-template-columns:8px 1fr 40px 50px;gap:5px}.mana-rate{font-size:12px}.top-actions{gap:14px}.grimoire-schools{gap:12px}.spell-choice{gap:10px;padding:12px 8px}.spell-choice strong{font-size:10px}}
@media(max-width:760px){
  :root{--cell:23px}
  .topbar{padding:8px 12px;flex-wrap:wrap;gap:6px}.top-actions{gap:10px;flex:1;justify-content:flex-end}.nav-button{font-size:11px;white-space:nowrap}.nav-button kbd{display:none}.connection span{display:none}
  .game-shell{padding:8px 8px 0}
  .arena{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto;grid-template-areas:"hud hud" "scribe scribe" "own enemy" "actions actions";column-gap:8px;row-gap:10px;padding:10px 8px 12px;min-height:0}
  .hud{gap:8px;padding:0 2px}.score,.phase-block strong{font-family:var(--hud)}.score{font-size:13px;gap:6px}.hearts{font-size:13px;letter-spacing:1px}.phase-block strong{font-size:13px;letter-spacing:1px}.phase-block>span{font-size:8px;letter-spacing:1px}
  .fighter{--hand-h:70px;width:100%;max-width:190px;gap:6px}
  .fighter-mana{padding:4px 6px;gap:2px}.mana-row{grid-template-columns:6px 1fr 34px 42px;gap:4px;min-height:13px}.mana-track{height:5px}.mana-value{font-size:9px}.mana-rate{font-size:10px;line-height:13px}.mana-symbol{width:5px;height:5px}.mana-delta{right:44px;font-size:11px}
  /* Свои щиты: между ними кнопки ⇄ — поменять местами соседние слои */
  .shield-slots{gap:3px}.shield-slot{width:26px;height:24px}
  .shield-swap{display:block;width:20px;height:24px;padding:0;border:0;background:none;color:var(--gold);font:600 14px var(--hud)}
  .shield-swap:disabled{color:#5f5366}
  /* Карточка: ластик, очистка и подсветка образца — слева от неё, цвета — справа */
  .scribe{margin-top:4px;gap:6px;padding-bottom:2px}
  .card-float{display:grid;grid-template-columns:30px auto 30px;grid-template-rows:auto auto auto 1fr;column-gap:10px;row-gap:6px}
  .palette{display:contents}
  .drawing-card{grid-column:2;grid-row:1/-1}
  #palette-colors{grid-column:3;grid-row:1/-1;align-self:start;padding-top:11px}
  #eraser{grid-column:1;grid-row:1;margin-top:11px}#clear{grid-column:1;grid-row:2}#guide-toggle{grid-column:1;grid-row:3}
  .recognition{margin-right:0;gap:3px}.match-track{height:5px}.match-track>b{top:-2px;bottom:-2px}
  .match-line{font-size:10px;min-height:15px;line-height:15px;padding:0 5px}
  .hand-slots{gap:4px}.hand-card strong{font-size:8px}.hand-card .mini-glyph{grid-template-columns:repeat(5,3px);grid-auto-rows:3px}.fighter-note{font-size:11px}
  .quick-actions{padding-bottom:0}.quick-actions button{padding:9px 14px;font-size:13px}.quick-actions kbd{display:none}
  .bottom-bar{padding:10px 3px}#battle-log{font-size:11px}
  .menu-content,.overlay-content{padding:45px 20px 30px}.dialog-close{right:17px;top:12px}.menu-content h1,.overlay-content h1{font-size:27px}.menu-intro{font-size:11px}.grimoire-schools{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px;margin-top:25px}.spell-choice{padding:12px 7px;gap:7px}.spell-choice .mini-glyph{grid-template-columns:repeat(5,4px);grid-auto-rows:4px;gap:1px}.spell-choice strong{font-size:9px}.spell-choice small{font-size:7px}.grimoire-school>h2{font-size:13px}.grimoire-school>h2>small{font-size:6px}.grimoire-footer{font-size:9px;gap:12px}.help-columns{grid-template-columns:1fr;gap:20px;margin:25px 0}.help-columns h2{margin-bottom:10px}.arena-overlay h1{font-size:22px}
}
@media(min-width:761px) and (max-height:760px){:root{--cell:22px}.arena{min-height:0;padding-top:8px}.fighter{--hand-h:70px;gap:6px}.fighter-mana{padding:6px 10px;gap:3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============ Обучение: реплика наставника внизу по центру, под линией полёта заклинаний ============ */
.arena{--fw:250px}
.lesson{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);z-index:4;width:min(540px,calc(50% + 70px - var(--fw)));
  padding:8px 13px 10px;background:#15121ef2;border:2px solid #8d7a5e;box-shadow:0 0 0 2px #0d0a14,0 8px 0 -3px #0d0a1480;text-align:left}
.lesson::after{content:'';position:absolute;right:-12px;bottom:20px;border:8px solid transparent;border-left:10px solid #8d7a5e;border-right:0}
.lesson-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.lesson-head b{font:600 12px var(--hud);letter-spacing:2px;color:var(--gold)}
.lesson-dots{display:flex;gap:4px;flex:1}
.lesson-dots i{width:8px;height:8px;background:#2a2433;border:1px solid #5b4a5e}
.lesson-dots i.done{background:var(--gold);border-color:var(--gold)}
.lesson-dots i.now{border-color:var(--gold);animation:menu-blink .8s steps(2) infinite}
.lesson-links{display:flex;gap:12px}
.lesson-links button{background:none;border:0;padding:0;font:500 11px var(--hud);color:#9c8f9f;white-space:nowrap}
.lesson-links button:hover{color:var(--gold)}
.lesson-say{margin:0;font-size:14px;line-height:1.45;color:#f3ecdf}
/* Подсказка и кнопка «Дальше» / «Начать бой» стоят в одной строке, чтобы панель не росла вверх */
.lesson-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 14px;margin-top:5px}
.lesson-hint{flex:1 1 200px;margin:0;font-size:12px;line-height:1.55;color:#b9adbd}
.lesson-hint:empty{display:none}
.lesson kbd,.grimoire-lesson kbd{height:18px;min-width:20px;padding:0 4px;margin:0 1px;font-size:10px;vertical-align:1px;background:#00000066;color:#efe3c8}
.lesson-next{margin-top:3px;display:inline-flex;white-space:nowrap;align-items:center;gap:8px;border:1px solid var(--gold);background:#3a2b1cf0;color:#ffe9bd;padding:5px 13px;font:600 13px var(--hud)}
.lesson-next kbd{border-color:var(--gold)}
.lesson.passed{border-color:var(--gold)}.lesson.passed::after{border-left-color:var(--gold)}
.lesson.passed .lesson-say{color:#ffe9bd}
.lesson.retry{border-color:var(--red)}.lesson.retry::after{border-left-color:var(--red)}
.lesson.fresh{animation:lesson-in .28s steps(4)}
@keyframes lesson-in{from{transform:translateX(-50%) translateY(6px);opacity:.3}}
/* На что наставник просит посмотреть: мигающая золотая рамка */
.lesson-focus{outline:2px solid var(--gold)!important;outline-offset:4px;animation:lesson-focus 1s steps(2) infinite}
@keyframes lesson-focus{50%{outline-color:#e1bc7540}}
.arena.attract .lesson{visibility:hidden}
.grimoire-lesson{margin:16px 0 0;padding:8px 13px;max-width:780px;border-left:3px solid var(--gold);background:#0000004d;font-size:13px;line-height:1.5;color:#f3ecdf}
.grimoire-lesson small{display:block;font-size:12px;color:#b9adbd}
/* Список уроков в меню */
.lesson-list button{font-size:24px;letter-spacing:2px;padding:2px 40px}
.lesson-list button small{font:inherit;color:#8f8676;margin-right:10px}
.lesson-list button.done::after,.lesson-list button.done:focus::after{content:'✓';position:absolute;right:8px;top:2px;color:var(--green);animation:none}
.lesson-list button.back{margin-top:10px}
@media(min-width:1700px){.arena{--fw:300px}}
@media(max-width:1050px){.arena{--fw:210px}.lesson-say{font-size:13px}.lesson-links button:first-child{display:none}}
@media(max-width:760px){
  .arena.tutorial{grid-template-rows:auto auto auto auto auto;grid-template-areas:"hud hud" "lesson lesson" "scribe scribe" "own enemy" "actions actions"}
  .lesson{position:static;transform:none;width:auto;grid-area:lesson;padding:8px 10px 9px}.lesson::after{display:none}
  .lesson.fresh{animation:none}.lesson-links button:first-child{display:inline}
  .lesson-list button{font-size:19px;padding:2px 30px}
}
@media(max-height:620px){.lesson-list button{font-size:19px}}
/* На невысоком экране арена в уроках чуть выше обычного, чтобы реплика поместилась под карточкой */
@media(min-width:761px) and (max-height:760px){.arena.tutorial{min-height:612px}}
@media(min-width:761px) and (max-width:1100px) and (max-height:760px){.arena.tutorial{min-height:650px}}
.mana-rate.frozen{color:#8f8796}
.font-choices button{font-size:15px;padding:7px 4px;letter-spacing:1px}
.spell-choice.fresh{border-color:var(--gold)}
.spell-choice strong em{font:600 9px var(--hud);font-style:normal;letter-spacing:1px;text-transform:uppercase;color:#1b1422;background:var(--gold);padding:1px 5px;margin-left:8px;vertical-align:1px}

/* ============ Профиль, поиск соперника, таблица лидеров ============ */
.search-chip{background:#2a1f12;border:1px solid var(--gold);color:var(--gold);font:600 12px var(--hud);padding:4px 9px;white-space:nowrap;animation:menu-blink 1.6s steps(2) infinite}
.search-chip b{margin-left:4px;color:#ffe9bd}
.search-status{margin:0 0 6px;font:600 22px var(--pixel);letter-spacing:2px;color:#ffe9bd;text-shadow:0 3px 0 #000,0 0 16px #000}
.search-lobby{margin:0 0 18px;font:500 14px var(--hud);color:#d9d0c0;text-shadow:0 2px 0 #000,0 0 10px #000;min-height:20px}
.panel-note{margin:10px 0;font-size:12px;line-height:1.55;color:#c9c0b4}
.panel-note.small{font-size:11px;color:#9a9186;margin-bottom:0}
.menu-panel .presets{margin-top:12px}
.menu-panel .presets button{font-size:13px;padding:9px 6px}
.menu-panel .error-copy{text-align:left;color:var(--red);min-height:0}
.profile-card{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 14px;margin:14px 0 4px;padding:12px 14px;border:1px solid #5b4a5e;background:#17131f}
.profile-card strong{font:600 22px var(--pixel);color:#f3ecdf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-card span{grid-row:2;font:500 13px var(--hud);color:var(--gold)}
.profile-card b{grid-column:2;grid-row:1 / span 2;font:600 38px/1 var(--hud);color:var(--gold)}
.match-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;max-height:190px;overflow:auto}
.match-list li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:baseline;padding:4px 8px;background:#17131f;font-size:12px}
.match-list li b{font:600 13px var(--hud);color:var(--red)}
.match-list li.won b{color:var(--green)}
.match-list li small{color:#9a9186}
.match-list li.empty{display:block;color:#9a9186}
.leaders{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.leaders th{font:500 11px var(--hud);letter-spacing:1px;color:#9a9186;text-align:left;padding:4px 6px;border-bottom:1px solid #4a433d}
.leaders td{padding:5px 6px;border-bottom:1px solid #2a2530}
.leaders td:first-child,.leaders td:nth-child(3){font:600 13px var(--hud);color:var(--gold)}
.leaders tr.own td{background:#2a1f12;color:#ffe9bd}
.leaders tr.gap td{border-bottom:0;color:#9a9186;text-align:center;padding:2px}
.overlay-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.arena-overlay p b{color:var(--gold);font:600 15px var(--hud)}
.arena-overlay p b.down{color:var(--red)}
.score small{font:500 12px var(--hud);color:var(--gold);margin:0 2px}
#surrender.sure{color:var(--red)}
@media(max-width:760px){.search-chip{font-size:11px;padding:3px 6px}.search-status{font-size:17px}.profile-card b{font-size:30px}.leaders th:nth-child(4),.leaders td:nth-child(4){display:none}}
/* ---------- лестница ---------- */
.ladder-status{margin:-6px 0 12px;font:500 13px/1.5 var(--hud);color:#d9d0c0;text-shadow:0 2px 0 #000,0 0 10px #000;display:flex;flex-direction:column;align-items:center}
.ladder-status b{font:600 17px var(--pixel);letter-spacing:2px;color:#ffe9bd}
.ladder-status small{font-size:11px;color:#a39a8c}
.ladder-list{gap:0}
.ladder-list button.rung{display:flex;align-items:center;gap:10px;width:min(440px,96vw);padding:0 38px;font-size:21px;letter-spacing:1px;text-align:left}
.ladder-list button.rung small{font:600 15px var(--hud);color:#8f8676;width:14px;flex:none;text-align:center}
.ladder-list button.rung span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder-list .portrait{flex:none;width:48px;height:44px;background-repeat:no-repeat;background-position:-8px -6px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #000)}
.ladder-list button.locked{color:#8a8377}
.ladder-list button.locked .portrait{filter:brightness(.5) saturate(.45)}
.ladder-list button.now{color:#ffe9bd}
.ladder-list button.done span{color:#b7c9b0}
.ladder-list button.done::after,.ladder-list button.done:focus::after{content:'✓';position:absolute;right:10px;top:8px;color:var(--green);animation:none}
.ladder-list button.rung:focus::before,.ladder-list button.rung:focus::after{top:8px}
.ladder-list button.back{margin-top:8px;font-size:24px}
#overlay-again:not(.hidden)+#overlay-action{background:#2a2233;color:#e6dccb;border-color:#6d5f72}   /* вторая кнопка итога — спокойнее главной */
@media(max-width:760px){.ladder-list button.rung{font-size:17px;padding:0 28px;gap:7px}.ladder-list .portrait{width:44px;height:38px;background-position:-10px -8px}}
@media(max-height:700px){.ladder-list .portrait{height:36px;background-position:-8px -9px}.ladder-status{margin-bottom:6px}.ladder-list button.rung{font-size:19px}}
.gold-button kbd{background:#2b1e2d;color:#f1cf8b;border-color:#2b1e2d;font-size:9px;height:18px}
/* ---------- настройки: соперник в бою с ботом ---------- */
.opponent-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.opponent-choice{display:flex;flex-direction:column;align-items:center;padding:3px 2px 4px;border:1px solid #4a433d;background:#1a171d;color:#d9d0c0;font:500 11px var(--hud);overflow:hidden}
.opponent-choice i{width:48px;height:44px;background-repeat:no-repeat;background-position:-8px -6px;image-rendering:pixelated;font:600 26px/44px var(--hud);font-style:normal;color:#8f8676}
.opponent-choice span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opponent-choice[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);color:var(--gold)}
/* ---------- настройки: клавиши ---------- */
.bind-list h3{margin:12px 0 4px}
.bind-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0;font-size:12px;color:#d9d0c0}
.bind-key{min-width:86px;padding:4px 10px;background:#1a171d;border:1px solid #4a433d;border-bottom-width:3px;color:#efe3c8;font:600 13px 'Golos Text','Segoe UI',sans-serif}   /* обычный шрифт: в пиксельном S похожа на 5 */
.bind-key.changed{border-color:#8d7a5e;color:var(--gold)}
.bind-key.listening{border-color:var(--gold);color:var(--gold);font-weight:500}
/* ---------- управление: выезжающая панель ---------- */
.help-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;overflow:auto;color:var(--text);
  background:#100e14f5;border:0;border-left:2px solid #8d7a5e;box-shadow:-2px 0 0 #000,-20px 0 50px #000a;animation:drawer-in .18s ease-out}
.help-drawer::backdrop{background:#0c071466}
@keyframes drawer-in{from{transform:translateX(100%)}}
.drawer-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px;background:#100e14;border-bottom:1px solid #3a3242}
.drawer-head h2{margin:0;font:600 26px var(--pixel);letter-spacing:3px;color:var(--gold);text-shadow:0 3px 0 #6b4a1c,0 5px 0 #000}
.drawer-close{display:flex;align-items:center;gap:7px;background:none;border:1px solid #5b5148;color:#d9d0c0;font:500 12px var(--hud);padding:5px 9px}
.drawer-close:hover{border-color:var(--gold);color:var(--gold)}
.drawer-close kbd{height:18px;min-width:18px;font-size:9px}
.drawer-part{padding:12px 18px 6px}
.drawer-part h3{margin:0 0 8px;font:600 17px var(--pixel);letter-spacing:2px;color:#ffe9bd;text-shadow:0 2px 0 #000}
.key-list{display:grid;grid-template-columns:116px 1fr;gap:7px 12px;margin:0;align-items:center}
.key-list dt{display:flex;gap:3px;flex-wrap:wrap}
.key-list dd{margin:0;font-size:12px;line-height:1.4;color:#d9d0c0}
.key-list kbd{min-width:22px;height:22px;font-size:10px}
.drawer-note{margin:9px 0 4px;font-size:11px;line-height:1.5;color:#a39a8c}
.drawer-note b{color:var(--gold);font-family:var(--hud)}
.rule-list{margin:0;padding:0 0 0 16px;display:grid;gap:6px;font-size:12px;line-height:1.45;color:#d9d0c0}
.rule-list b{color:#f3ecdf}
.chip{display:inline-block;width:9px;height:9px;margin:0 2px;vertical-align:0;background:var(--c);box-shadow:0 0 0 1px #0d0a14}
.chip.blue{--c:var(--blue)}.chip.yellow{--c:var(--yellow)}.chip.red{--c:var(--red)}.chip.green{--c:var(--green)}.chip.gray{--c:var(--gray)}
.drawer-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 18px 16px;border-top:1px solid #3a3242;font-size:11px;color:#8f8676}
.drawer-foot kbd{height:18px;font-size:9px}
/* гардероб */
.wardrobe-panel{width:min(760px,calc(100vw - 24px))}
.wardrobe{display:flex;gap:18px;align-items:flex-start;margin-top:10px}
.wardrobe-preview{flex:none;margin:0;width:192px;text-align:center;background:radial-gradient(circle at 50% 62%,#2a2333 0,#16131b 70%);border:1px solid #3d3540;padding:8px 0 10px}
.wardrobe-preview canvas{display:block;width:192px;height:192px;image-rendering:pixelated}
.wardrobe-preview figcaption{font-size:12px;line-height:1.45;color:#c9c0b4;padding:0 8px}
.wardrobe-preview figcaption b{display:block;color:var(--gold);font:600 15px var(--pixel);letter-spacing:1px}
.wardrobe-shelves{flex:1;min-width:0}
.wardrobe-shelves h3{margin:4px 0 6px}
.wardrobe-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.ward-item{position:relative;width:52px;height:52px;padding:0;background:#1a171d;border:1px solid #4a4148;border-radius:0;overflow:hidden;cursor:pointer}
.ward-item canvas{position:absolute;left:-6px;top:-6px;width:64px;height:64px;image-rendering:pixelated}
.ward-item.hat canvas{left:-22px;top:4px;width:96px;height:96px}
.ward-item.staff canvas{left:-74px;top:-8px;width:128px;height:128px}
.ward-item:hover,.ward-item:focus-visible{border-color:#c8a86a;outline:none}
.ward-item.worn{border:2px solid var(--gold);box-shadow:0 0 0 1px #000,0 0 10px #e6c37a66}
.ward-item.locked canvas{filter:brightness(.32) saturate(0)}
.ward-item.locked::after{content:"🔒";position:absolute;right:2px;bottom:1px;font-size:11px;opacity:.8}
.ward-item.fresh::before{content:"";position:absolute;inset:0;border:2px solid #9be3a8;animation:fresh-blink 1s steps(2) infinite}
@keyframes fresh-blink{50%{opacity:0}}
.wardrobe-note{min-height:58px;margin-top:4px;padding:8px 10px;border-top:1px solid #3d3540;font-size:12px;line-height:1.5;color:#c9c0b4}
.wardrobe-note b{color:var(--gold)}
.wardrobe-note .bar{display:inline-block;vertical-align:middle;width:120px;height:6px;margin:0 8px 0 0;background:#2b2530;border:1px solid #4a4148}
.wardrobe-note .bar i{display:block;height:100%;background:#c8a86a}
.reward-line{display:block;margin-top:6px;color:#9be3a8}
@media(max-width:760px){.wardrobe{flex-direction:column;align-items:center}.wardrobe-preview{width:100%}.wardrobe-preview canvas{margin:0 auto}.ward-item{width:46px;height:46px}}

/* уголок меню: язык и письма */
.menu-corner{position:fixed;top:70px;right:30px;display:flex;gap:8px;z-index:2}
.corner-button{position:relative;display:flex;align-items:center;gap:6px;height:36px;padding:0 9px;background:#100e14e6;border:2px solid #8d7a5e;box-shadow:0 0 0 2px #000;color:#e9dcc0;font:600 13px var(--hud);letter-spacing:1px;cursor:pointer}
.corner-button:hover,.corner-button:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.corner-button .pix{width:26px;height:auto;image-rendering:pixelated;shape-rendering:crispEdges}
#mail-open .pix{width:30px}
.corner-badge{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 4px;background:#c9483f;border:2px solid #000;color:#fff;font:700 11px/14px var(--hud);text-align:center}
/* письма */
.mail-panel{width:min(560px,calc(100vw - 24px))}
.mail-panel textarea{display:block;width:100%;margin-top:8px;padding:9px 10px;min-height:92px;resize:vertical;border:1px solid #5b5148;background:#1a171d;color:var(--text);font:14px/1.45 'Golos Text',sans-serif;border-radius:0}
.mail-panel textarea:focus{outline:none;border-color:var(--gold)}
.mail-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px;color:#9a9186}
.mail-row button,.mail-item button{background:#2a2430;border:1px solid #8d7a5e;color:#e9dcc0;padding:7px 14px;font-size:13px;cursor:pointer}
.mail-row button:hover,.mail-item button:hover{border-color:var(--gold);color:var(--gold)}
.mail-list{list-style:none;margin:6px 0 0;padding:0;max-height:min(46vh,420px);overflow:auto}
.mail-item{padding:10px 0;border-top:1px solid #3d3540;font-size:13px;line-height:1.5;color:#d9d0c0}
.mail-item header{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#9a9186;margin-bottom:3px}
.mail-item header b{color:#e9dcc0;font-weight:600}
.mail-item p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.mail-item .mail-reply{margin-top:7px;padding:7px 10px;border-left:3px solid var(--gold);background:#1c1820}
.mail-item .mail-reply small{display:block;font-size:11px;color:var(--gold);margin-bottom:2px}
.mail-item.fresh .mail-reply{border-left-color:#9be3a8;background:#1a2420}
.mail-item.fresh .mail-reply small::after{content:" · новое";color:#9be3a8}
html[lang=en] .mail-item.fresh .mail-reply small::after{content:" · new"}
.mail-item textarea{min-height:56px}
.mail-actions{display:flex;gap:8px;margin-top:6px}
.mail-item .guest{color:#9a9186;font-weight:400}
@media(max-width:760px){.menu-corner{top:92px;right:14px}.corner-button{height:32px;padding:0 7px}}


/* статистика */
.stats-panel{width:min(880px,calc(100vw - 24px));--series-a:#b8862c;--series-b:#4d93dd;--grid:#2c2632;--ink:#e9dcc0;--ink-2:#b9ae9f;--ink-3:#8a8178}
.stats-updated{margin-left:auto;font-size:11px;color:var(--ink-3)}
.stats-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:12px 0 4px}
.stat-tile{padding:9px 11px 8px;background:#1a161f;border:1px solid #3d3540}
.stat-tile b{display:block;font:600 26px/1.1 var(--pixel);color:var(--ink);letter-spacing:1px}
.stat-tile span{font-size:11px;color:var(--ink-2)}
.stats-chart{margin-top:14px}
.stats-chart h3{margin:0 0 4px;font-size:14px}
.stats-chart h3 small{font-weight:400;font-size:11px;color:var(--ink-3);margin-left:6px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid line{stroke:var(--grid);stroke-width:1;shape-rendering:crispEdges}
.chart text{fill:var(--ink-3);font:11px 'Golos Text',sans-serif}
.chart .band{fill:#ffffff06}
.chart .band.odd{fill:#ffffff0d}
.chart .band-label{fill:var(--ink-2);font-size:10px}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:hover{fill:#ffffff0c}
.chart .empty{fill:var(--ink-3);font-size:12px}
.chart-legend{display:flex;gap:16px;margin:2px 0 4px;font-size:11px;color:var(--ink-2)}
.chart-legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.chart details{margin-top:2px;font-size:11px;color:var(--ink-3)}
.chart details summary{cursor:pointer;width:max-content}
.chart table{border-collapse:collapse;margin-top:4px;font-size:11px;color:var(--ink-2)}
.chart td,.chart th{padding:1px 10px 1px 0;text-align:left;font-weight:400}
.chart-tip{position:fixed;z-index:5;pointer-events:none;padding:7px 10px;background:#0c0a10f2;border:1px solid #8d7a5e;box-shadow:0 0 0 1px #000;font-size:12px;line-height:1.45;color:var(--ink-2);min-width:120px}
.chart-tip b{display:block;color:#e9dcc0;font-weight:600;margin-bottom:2px}
.chart-tip .row{display:flex;align-items:center;gap:7px}
.chart-tip .row i{width:12px;height:2px;flex:none}
.chart-tip .row strong{color:#e9dcc0;font-weight:600;min-width:18px}