/* style.css */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#0c0d10;color:#f4f1e9;--gold:#dfb271;--muted:#9b9ea4;--line:#ffffff22;--display:Impact,'Arial Narrow',Arial,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:wait}button:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}button{border:1px solid var(--line);background:#17191e}button:active{filter:brightness(1.25)}.screen{max-width:1600px;margin:auto;padding:22px 4vw;min-height:100svh;background:radial-gradient(ellipse at 60% 30%,#422a253f,transparent 65%)}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px}.brand{font-family:var(--display);font-size:32px;letter-spacing:-.5px}.brand b{font-weight:inherit;color:var(--gold)}.brand small{display:block;font:10px Arial;letter-spacing:4px;margin-top:5px;color:var(--muted)}.tools{display:flex;gap:7px}.tools button{padding:10px 12px;background:transparent;font-size:12px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold)}.select-heading{display:flex;align-items:end;justify-content:space-between;margin:24px 0 18px}.select-heading h1{margin:8px 0 0;font-size:clamp(32px,4.8vw,64px);line-height:1;font-family:var(--display);font-weight:400;letter-spacing:1px}.select-heading h1 span{color:var(--gold)}#record{font-size:12px;color:var(--muted);max-width:210px;line-height:1.6;text-align:right}#roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.card{height:clamp(170px,34vh,380px);position:relative;overflow:hidden;text-align:left;background:#ffffff;border:2px solid #ffffff20;transition:border-color .2s,box-shadow .2s}.card.selected{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold);z-index:5}.card canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}.card:after{display:none}.card .index{position:absolute;left:8px;top:8px;font-size:11px;color:#f4f1e9;z-index:1;background:#0c0d10e6;padding:3px 6px;border-radius:3px}.card .label{position:absolute;left:8px;bottom:8px;z-index:2;font:clamp(17px,2.2vw,28px) var(--display);letter-spacing:.4px;background:#0c0d10e6;padding:8px 10px;border-radius:4px;max-width:calc(100% - 16px);box-sizing:border-box}.card .label small{display:block;font:10px Arial;letter-spacing:2px;color:#c2b5a4;margin-top:4px}.setup{display:grid;grid-template-columns:1fr 1.3fr .75fr;gap:24px;align-items:center;padding:24px 0}h2{font:30px var(--display);letter-spacing:1px;font-weight:400;margin:0 0 8px}.hero-info p{font-size:12px;letter-spacing:3px;color:var(--gold);margin:0 0 12px}#heroCombo{display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted)}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:27px;padding:6px;background:#ffffff0b;border:1px solid var(--line);font:12px Arial;color:#eee}.segmented{display:flex;margin-bottom:12px;border-bottom:1px solid var(--line)}.segmented button{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px;padding:12px 5px;border-bottom:2px solid transparent}.segmented button.active{color:var(--gold);border-bottom-color:var(--gold)}#towers{display:flex;gap:6px}#towers button{flex:1;padding:12px 6px;font-size:12px;background:#ffffff04}#towers button.active{border-color:var(--gold);color:var(--gold)}#towers small{display:block;color:var(--muted);font-size:10px;margin-top:7px}#duelOptions{display:flex;gap:10px}#duelOptions>label:not([hidden]){flex:0 0 auto;min-width:8.5em}label{font-size:12px;color:var(--muted)}select{display:block;margin-top:7px;border:1px solid var(--line);padding:8px;background:#16191d;color:#f4f1e9;width:100%}.primary{padding:16px 20px;color:#131215;background:var(--gold);border:0;font-size:15px;letter-spacing:1px;font-weight:700}.secondary{background:transparent;border:1px solid var(--line);padding:12px 16px;font-size:12px;letter-spacing:1px}.start-actions button{width:100%;margin-bottom:8px}.start-actions small{display:block;font-size:11px;color:var(--muted);text-align:center;line-height:1.5}footer{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;font-size:11px;color:#7f838c}.ladder-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.ladder-header h1{font:44px var(--display);margin:10px 0}.ladder-header .secondary{max-width:160px}#tourProgress{color:var(--gold);font-size:20px}#ladderList{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0}.rung{display:flex;align-items:center;gap:12px;padding:16px;background:#16181d;border:1px solid var(--line);position:relative}.rung.current{border-color:var(--gold);background:#3d2f21}.rung.cleared{opacity:.45}.rung strong{font:22px var(--display)}.rung small{display:block;color:var(--muted);font-size:10px;margin-top:7px}.rung>span{color:var(--gold);font:24px var(--display)}#enterFight{display:block;width:min(400px,100%);margin:auto}
#game{height:100svh;width:100%;background:#08090b;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}#arena,#arena3d,#arenaPixi{position:absolute;width:100%;height:100%;object-fit:contain}#arena{z-index:1}#arena3d{z-index:0}#arenaPixi{z-index:1;pointer-events:none}#hud{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;gap:22px;pointer-events:none}.health{flex:1}.health>div:first-child{display:flex;justify-content:space-between;align-items:center;font:24px var(--display);text-shadow:0 2px 6px black}.health span{font-size:16px;letter-spacing:6px;color:var(--gold)}.health-track{height:15px;background:#4e1c22;border:1px solid #f4d29d80;box-shadow:0 3px 12px #0008;margin-top:6px}.health-track>div{height:100%;width:100%;background:linear-gradient(90deg,#a98047,#f1d494);transition:width .1s linear}.right .health-track,.right .run-track{transform:scaleX(-1)}.run-track{height:4px;background:#ffffff20;width:70%;margin-top:5px}.guard-track{height:4px;background:#ffffff18;width:70%;margin-top:3px}.guard-track>div{height:100%;background:#7fb6d8;width:100%;transition:width .08s linear}.right .guard-track{transform:scaleX(-1);margin-left:auto}.run-track>div{height:100%;background:#789ca3;width:100%}.right .run-track{margin-left:auto}.health small{display:block;color:#cbc8bf;text-shadow:0 1px 3px black;margin-top:6px;font-size:10px;letter-spacing:2px}.right small{text-align:right}.timer{text-align:center;min-width:70px;padding-top:3px}.timer strong{font:42px/1 var(--display);display:block;text-shadow:0 3px 12px black}.timer span{font-size:10px;letter-spacing:1px}.battle-tools{position:absolute;top:100px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.battle-tools button{width:35px;height:28px;background:#10182099;font-size:15px}#announcement{position:absolute;top:28%;left:10%;right:10%;font:clamp(30px,7vw,86px)/1 var(--display);letter-spacing:3px;text-align:center;color:#f1c68b;text-shadow:0 4px 15px black;pointer-events:none}#subAnnouncement{position:absolute;top:47%;left:10%;right:10%;text-align:center;font-size:14px;letter-spacing:3px;color:#dfc6a6;text-shadow:0 2px 6px black;pointer-events:none}#combo,#enemyCombo{position:absolute;top:30%;left:6%;font:22px var(--display);color:#f0c084;pointer-events:none}#enemyCombo{left:auto;right:6%;text-align:right}#combo small,#enemyCombo small{display:block;font:12px Arial;margin-top:6px}.controls{position:absolute;bottom:max(17px,env(safe-area-inset-bottom));display:grid;gap:7px;touch-action:none}.controls button{width:59px;height:59px;border-radius:50%;border:1px solid #ffffff55;background:#111922b8;box-shadow:inset 0 0 16px #ffffff0b,0 2px 6px #0008;font-size:14px;touch-action:none}.controls button.down,.quick-specials button.down{background:#d5b27a;color:#16171a;border-color:#ffe2a9;transform:scale(.94)}.movement{left:max(23px,env(safe-area-inset-left));grid-template-columns:repeat(3,59px)}.movement .up{grid-column:2}.movement button:nth-child(2){grid-column:1}.movement .run{position:absolute;bottom:73px;left:0;width:46px;height:46px;font-size:11px;color:#bfcfd2;border-color:#789ca3}.attacks{right:max(23px,env(safe-area-inset-right));grid-template-columns:repeat(3,59px)}.attacks button:nth-child(4){grid-column:1}.attacks button:nth-child(5){grid-column:3}.attacks .block{grid-column:2;grid-row:1/span 2;align-self:center;color:#d2c3ad;border-color:var(--gold);font-size:12px}.attacks b{font-size:20px;display:block}.attacks small{display:block;font-size:8px;letter-spacing:1px;margin-top:3px}.quick-specials{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.quick-specials button{border:1px solid #bca37b77;border-radius:6px;background:#111921cc;color:var(--gold);width:37px;height:34px;font:14px var(--display);touch-action:none}.quick-specials.cooling{opacity:.4}#finish{position:absolute;top:63%;left:50%;transform:translateX(-50%);z-index:4;touch-action:none}#inputHistory{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);font:12px monospace;color:#d4cbbb;white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px black}#practiceHud{position:absolute;top:110px;left:24px;display:flex;align-items:center;gap:12px;font-size:11px}#practiceHud button{font-size:10px;padding:6px}#practiceHud label{font-size:11px}#frameData{color:var(--gold)}#rotate{display:none}dialog{padding:0;border:1px solid #c1a17655;background:#14161d;color:#f4f1e9;width:min(620px,90vw);max-height:85svh}dialog::backdrop{background:#03070cdf;backdrop-filter:blur(8px)}.modal{padding:30px}.modal h2{font-size:40px;margin:12px 0 20px}.modal p{font-size:15px;line-height:1.65;color:#b6b9c0}.modal button{margin-top:10px;width:100%}#modalButtons{margin-top:15px}.moves-table{width:100%;border-collapse:collapse;font-size:13px}.moves-table td{border-bottom:1px solid var(--line);padding:10px 0;line-height:1.5}.moves-table td:last-child{text-align:right;color:var(--gold)}.moves-table small{font-size:11px;color:var(--muted)}.modal .hint{font-size:12px;color:#9b9ea4}.medal{font:72px var(--display);color:var(--gold);text-align:center}.ending{text-align:center}
@media(max-height:520px) and (orientation:landscape){.screen{padding:10px 4vw}header{padding-bottom:7px}.brand{font-size:25px}.brand small{font-size:8px}.tools button{padding:8px 10px;font-size:10px}.select-heading{margin:10px 0}.select-heading h1{font-size:30px}.eyebrow{font-size:9px}.select-heading>div{display:flex;align-items:center;gap:15px}.select-heading>div .eyebrow{display:none}#record{font-size:10px;margin:0}.card{height:39vh}.card .label{bottom:9px;font-size:18px}.card .label small{font-size:8px;letter-spacing:1px;margin-top:4px}.setup{padding:10px 0;gap:15px;grid-template-columns:.9fr 1.4fr .9fr}.hero-info h2{font-size:21px}.hero-info p{font-size:9px;margin-bottom:7px}kbd{padding:4px;min-width:23px;font-size:10px}#heroCombo{font-size:10px;gap:3px}.segmented{margin-bottom:6px}.segmented button{font-size:10px;padding:7px 3px}#towers button{padding:8px 3px;font-size:10px}#towers small{font-size:8px;margin-top:4px}.primary{padding:13px 10px;font-size:12px}.start-actions small{font-size:9px}.start-actions .secondary{font-size:9px;padding:8px}footer{display:none}.health>div:first-child{font-size:19px}.health-track{height:11px;margin-top:3px}.health small{font-size:8px}.timer strong{font-size:31px}.timer span{font-size:9px}.battle-tools{top:76px}.battle-tools button{width:29px;height:24px}.controls{gap:5px;bottom:max(10px,env(safe-area-inset-bottom))}.controls button{width:48px;height:48px}.movement,.attacks{grid-template-columns:repeat(3,48px)}.movement .run{bottom:57px;width:38px;height:38px;font-size:10px}.attacks b{font-size:17px}.attacks small{font-size:7px}.quick-specials{bottom:12px}.quick-specials button{height:27px;width:31px;font-size:12px}#inputHistory{bottom:45px;font-size:10px}#practiceHud{top:87px;font-size:9px}#announcement{top:30%;font-size:54px}#subAnnouncement{font-size:11px;top:49%}.modal{padding:20px}.modal h2{font-size:30px;margin:8px 0 12px}.moves-table{font-size:12px}.moves-table td{padding:7px 0}.ladder-header h1{font-size:28px;margin:7px 0}#ladderList{margin:16px 0;gap:7px}.rung{padding:10px}.rung strong{font-size:17px}.rung small{font-size:8px}.rung>span{font-size:18px}}
@media(max-width:650px) and (orientation:portrait){.screen{padding:18px}.tools button{padding:9px;font-size:10px}.brand{font-size:26px}.brand small{font-size:8px;letter-spacing:3px}.select-heading{margin:22px 0 16px}.select-heading h1{font-size:34px}.eyebrow{font-size:9px;letter-spacing:2px}#record{font-size:10px;max-width:90px}.card{height:180px;grid-column:span 2}#roster{grid-template-columns:repeat(6,1fr);gap:6px}.card:nth-child(4){grid-column:2/span 2}.card .label{font-size:16px;left:6px;bottom:9px}.card .label small{font-size:8px;letter-spacing:.5px}.card .index{font-size:9px;left:7px;top:7px}.setup{grid-template-columns:1fr;gap:17px;padding:20px 0}.hero-info{display:grid;grid-template-columns:1fr 1fr;align-items:center}.hero-info h2{font-size:25px;grid-column:1/span 2}.hero-info p{font-size:10px;margin:0}.hero-info #heroCombo{justify-content:end}.start-actions .primary{padding:17px;font-size:15px}.start-actions small{font-size:11px}footer{font-size:9px;line-height:1.6;gap:20px}footer span:last-child{text-align:right}.health>div:first-child{font-size:16px}.health span{font-size:12px}#hud{left:12px;right:12px;gap:8px}.timer strong{font-size:30px}.health small{font-size:8px}.health-track{height:10px}.timer{min-width:45px}.battle-tools{top:90px}#rotate{position:absolute;inset:0;background:#0c0d10f5;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate span{font-size:80px;color:var(--gold)}#rotate p{color:var(--muted);font-size:14px}#rotate.dismissed{display:none}.controls button{width:43px;height:43px}.movement,.attacks{grid-template-columns:repeat(3,43px)}.controls{gap:4px;bottom:35px}.movement{left:10px}.attacks{right:10px}.movement .run{bottom:55px;width:36px;height:36px}.attacks b{font-size:16px}.attacks .block{font-size:10px}.attacks small{font-size:7px}.quick-specials{bottom:150px}.quick-specials button{width:40px;height:34px}#inputHistory{bottom:195px}#announcement{font-size:33px;top:32%}#subAnnouncement{top:39%;font-size:11px}#finish{top:65%;font-size:13px}#ladderList{grid-template-columns:1fr 1fr}.rung{padding:12px 8px;gap:7px}.rung strong{font-size:18px}.rung small{font-size:8px}.ladder-header{flex-wrap:wrap;gap:10px}.ladder-header h1{font-size:32px}.ladder-header>.secondary{width:100%;max-width:100%}.modal{padding:22px}.modal h2{font-size:30px}.moves-table{font-size:12px}#practiceHud{top:135px;left:12px;flex-wrap:wrap;max-width:90%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Метка происхождения сборки. Неяркая: она для проверки, а не для игрока. */
.build-stamp{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;opacity:.45}

/* Телефон в руках повёрнут, а окно Telegram осталось вертикальным. Такое
   бывает, когда Telegram не отдал полный экран: замок ориентации он держит
   только в нём. Тогда разворачиваем не окно, а саму игру: коробка получает
   размеры окна наоборот и поворачивается на 90°. Игрок держит телефон боком и
   видит арену во весь экран. Попадания по кнопкам браузер пересчитывает сам,
   а вот смещения пальца на стике — нет, их доворачивает simple-controls.
   Просьбу повернуть телефон прячет не это правило, а data-rotate="dismissed"
   на #game: так устроен показ просьбы в phone-layout.css. */
/* Свой разворот игры описан в phone-layout.css: здесь он проигрывал по порядку
   подключения правилу .telegram-app #game с таким же весом. */
#rotate button{margin-top:12px;min-width:220px}

/* Панель тренировки лежала под холстом арены: у #arena z-index 1, а у панели
   его не было вовсе. Из-за этого её кнопки не нажимались вообще — ни СБРОС, ни
   показ добивания: палец попадал в холст. Поднимаем её над ареной, как HUD. */
#practiceHud{z-index:6}

/* «ПОВЕРНИТЕ ТЕЛЕФОН» — только тем, у кого есть что поворачивать.
   Владелец 21.09.2026: «на десктопе при старте боя всплывает „Поверни
   телефон“ — само пропадает». Просьбу показывает правило выше по ширине и
   ориентации окна: узкое вертикальное окно Telegram Web на десктопе под него
   подходит, а через мгновение окно разворачивается — отсюда и «само
   пропадает». Ширина окна про устройство не говорит; про него говорит курсор.
   pointer:fine — мышь или трекпад, там поворачивать нечего. */
@media (pointer:fine){#rotate{display:none!important}}

/* КНОПКИ ДИАЛОГА, ДО КОТОРЫХ НЕЛЬЗЯ ДОТЯНУТЬСЯ.
   Владелец 21.09.2026: «„Сдаться" в паузе часто срабатывает только со второго
   клика», «кнопка „Закрыть" не нажималась». У dialog высота ограничена в трёх
   местах (style.css 85svh, phone-layout.css и telegram.css — по высоте окна),
   а `overflow` не задан нигде. Содержимое, не влезшее в эту высоту, уезжает
   за край экрана: прокрутить его нельзя — диалог не страница. В паузе четыре
   кнопки, и нижняя, «К ВЫБОРУ БОЙЦА» или «СДАТЬСЯ», уходила первой.
   Меню приёмов — таблица на весь экран — уезжало вместе с «ЗАКРЫТЬ». */
dialog{overflow:auto}

/* Выбранный брекет виден на телефоне, а не угадывается по оттенку рамки. */
#towers button.active{background:#3d2f21;box-shadow:inset 0 0 0 1px var(--gold)}

/* Шкала «Заряд»: три полосы по сто, деления — на трети. Светится, когда
   хватает хотя бы на усиление. */
.meter-track{position:relative;height:6px;background:#ffffff14;width:70%;margin-top:4px;border-radius:2px;overflow:hidden}.meter-track>div{height:100%;width:0;background:linear-gradient(90deg,#e58a1f,#ffd66b);transition:width .1s linear}.meter-track::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - 1px),#08090bdd calc(33.33% - 1px) 33.33%,transparent 33.33% calc(66.66% - 1px),#08090bdd calc(66.66% - 1px) 66.66%,transparent 66.66%)}.meter-track.ready>div{box-shadow:0 0 8px #ffcf5a;background:linear-gradient(90deg,#ffb52e,#fff0a8)}.right .meter-track{transform:scaleX(-1);margin-left:auto}

/* Выбор соперника в боях с компьютером и в тренировке (владелец 15.10.2026). */
#opponentOption:not([hidden]){display:block;margin:10px 0}
#challenges{display:flex;flex-wrap:wrap;gap:6px}#challenges button{flex:1 1 30%;min-width:7.5em;padding:10px 6px;font-size:12px;background:#ffffff04;text-align:left}#challenges small{display:block;color:var(--muted);font-size:10px;margin-top:6px;line-height:1.35}#challenges button.active{background:#3d2f21;box-shadow:inset 0 0 0 1px var(--gold);border-color:var(--gold);color:var(--gold)}

/* roster-eight.css */
#roster{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{height:clamp(130px,25vh,260px)}
.card .fighter-name{display:block;text-transform:uppercase}
span.fighter-name-accent{font:inherit;letter-spacing:inherit;color:#ff4d4d;white-space:nowrap}
.card canvas,.card>img{position:absolute;inset:0;width:100%;height:100%}
.card>img{object-fit:cover;object-position:center 14%;background:#ffffff}
.card:nth-child(3)>img{object-position:center 12%}
.card:nth-child(4)>img,.card:nth-child(5)>img{object-position:center 9%}
.card:nth-child(6)>img{object-position:center 10%}
.card:nth-child(7)>img{object-position:center 15%}
.card:nth-child(8)>img{object-position:center 11%}
@media(max-width:760px){
 #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .card,.card:nth-child(4){height:clamp(88px,23vh,124px);grid-column:auto}
 .card .label{font-size:clamp(12px,3vw,17px);left:6px;bottom:7px}
 .card .label small{font-size:7px;letter-spacing:.35px;margin-top:3px}
 .card .index{font-size:8px;left:6px;top:6px}
}
@media(max-height:460px) and (orientation:landscape){
 .screen{padding-top:8px;padding-bottom:8px}
 header{padding-bottom:7px}
 .select-heading{margin:8px 0 7px}
 .select-heading h1{font-size:27px}
 #roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .card,.card:nth-child(4){height:112px;grid-column:auto}
 .card>img{object-position:center top}
 .setup{padding:8px 0;gap:10px}
}
.audio-levels{display:grid;gap:16px;margin:20px 0}
.audio-levels label{display:grid;grid-template-columns:100px 1fr 42px;align-items:center;gap:12px;color:#f4f1e9}
.audio-levels input{width:100%;accent-color:var(--gold)}
.audio-levels output{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}
.audio-levels .blood-setting input{width:auto;justify-self:end;transform:scale(1.25)}

/* input-stability.css */
.attacks button:not(.block){
  border-width:2px;
  font-family:var(--display);
  transition:transform 60ms ease,background-color 60ms ease,box-shadow 60ms ease;
}
.attacks [data-key="hp"]{--pad-color:#4fc879}
.attacks [data-key="lp"]{--pad-color:#e45c62}
.attacks [data-key="hk"]{--pad-color:#5ca7e8}
.attacks [data-key="lk"]{--pad-color:#e5be50}
.attacks button:not(.block){border-color:color-mix(in srgb,var(--pad-color) 65%,white 12%);box-shadow:inset 0 0 18px #ffffff0d,0 0 0 1px #0008,0 3px 9px #000a}
.attacks button:not(.block) b{font-size:28px;line-height:.9;color:var(--pad-color);text-shadow:0 2px 4px #000}
.attacks button:not(.block).down{
  background:var(--pad-color);
  color:#080a0c;
  border-color:#fff;
  box-shadow:0 0 0 3px #ffffff35,0 0 18px var(--pad-color);
  transform:scale(.91);
}
.attacks button:not(.block).down b{color:#080a0c;text-shadow:none}
#controlLegend{
  position:absolute;
  right:max(18px,env(safe-area-inset-right));
  bottom:145px;
  width:190px;
  color:#e8e3d8;
  background:#080b10a8;
  border:1px solid #ffffff18;
  border-radius:5px;
  padding:4px 7px;
  font:9px/1.35 Arial,sans-serif;
  letter-spacing:.65px;
  text-align:center;
  pointer-events:none;
  text-shadow:0 1px 3px #000;
}
@media(max-height:520px) and (orientation:landscape){
  .controls button{width:52px;height:52px}
  .movement,.attacks{grid-template-columns:repeat(3,52px)}
  .attacks button:not(.block) b{font-size:25px}
  #controlLegend{right:max(16px,env(safe-area-inset-right));bottom:125px;width:166px;font-size:8px}
}
@media(max-width:650px) and (orientation:portrait){
  .controls button{width:47px;height:47px}
  .movement,.attacks{grid-template-columns:repeat(3,47px)}
  .attacks button:not(.block) b{font-size:22px}
  #controlLegend{right:max(8px,env(safe-area-inset-right));bottom:188px;width:149px;font-size:7px;padding:3px}
  #inputHistory{bottom:225px}
}
@media(prefers-reduced-motion:reduce){
  .attacks button:not(.block){transition:none}
}

/* cinema.css */
#opening{position:fixed;inset:0;z-index:20;display:grid;place-content:center;text-align:center;padding:24px;background:linear-gradient(#04060988,#040609ee),url('arena.png') center/cover;isolation:isolate}
#opening .opening-title{font:clamp(60px,13vw,164px)/.88 var(--display);letter-spacing:-.03em;margin:0;text-shadow:0 5px 30px #000;animation:title-reveal 900ms ease-out both}
#opening .opening-title b{display:block;color:var(--gold);font-weight:inherit}
#opening p{font:14px/1.6 Arial;letter-spacing:5px;color:#e4d4bd;margin:28px 0}
#opening button{min-width:240px;margin:auto}
#opening .opening-rule{height:2px;background:var(--gold);width:100%;margin:30px 0;transform-origin:left;animation:rule-reveal 1s ease-out both}
#faceoff{position:absolute;inset:0;z-index:7;overflow:hidden;background:linear-gradient(120deg,#070d17e8,#17100be8);display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;padding:5vh max(6vw,env(safe-area-inset-left));gap:12px}
.versus-fighter{height:75%;min-height:170px;max-height:550px;position:relative;background:#fff;overflow:hidden;border-bottom:4px solid var(--gold);animation:face-in 380ms ease-out both}
.versus-fighter:last-of-type{animation-name:face-in-right}
.versus-fighter img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.versus-caption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#06090df5 35%);padding:50px 18px 18px}
.versus-caption strong{font:clamp(20px,4vw,52px)/1.05 var(--display);display:block;color:#fff;overflow-wrap:anywhere}
.versus-caption small{display:block;font-size:12px;letter-spacing:2px;color:var(--gold);margin-top:8px}
.versus-mark{font:clamp(40px,8vw,92px)/1 var(--display);color:var(--gold);text-align:center;text-shadow:0 0 35px #dfb27150}
#versusStage{position:absolute;top:5%;left:0;right:0;text-align:center;letter-spacing:4px;font-size:12px;color:#eadac3}
#skipIntro{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:14px;padding:10px 20px;min-height:44px;background:#080b10bb}
#game[data-phase="intro"] .controls,#game[data-phase="intro"] .quick-specials,#game[data-phase="intro"] #controlLegend,#game[data-phase="fatality"] .controls,#game[data-phase="fatality"] .quick-specials,#game[data-phase="fatality"] #controlLegend,#game[data-phase="complete"] .controls,#game[data-phase="complete"] .quick-specials{opacity:0;pointer-events:none}
/* Добивание выбрано — бой решён: полоски, время и счёт гаснут, остаются
   добивание и титры (закон 35, разбор MK от владельца 15.10.2026). */
#game[data-phase="fatality"] #hud{opacity:0;transition:opacity 250ms}
#game[data-phase="fatality"] #announcement{top:15%;color:#edc385;font-size:clamp(30px,6vw,78px)}
#game[data-phase="fatality"] #subAnnouncement{top:29%;font-weight:bold}
#announcement[data-cue]:not(:empty){animation:combat-cue 230ms ease-out both}
.health-track{position:relative;overflow:hidden}
.health-track .damage-trail{position:absolute;inset:0 auto 0 0;width:100%;background:#fff3bd;transition:width 550ms 160ms ease-out;opacity:.7}
.health-track>div:not(.damage-trail){position:relative;z-index:1}
#hitCallout{position:absolute;top:43%;left:50%;transform:translateX(-50%);font:clamp(14px,2vw,22px) var(--display);letter-spacing:2px;color:#fff0d8;text-shadow:0 2px 6px #000;pointer-events:none;white-space:nowrap}
#hitCallout:empty{display:none}
.rung img{width:48px;height:60px;object-fit:cover;object-position:center 12%;background:#fff;flex-shrink:0}
.rung.current{box-shadow:inset 3px 0 var(--gold)}
.result-portrait{float:right;width:32%;max-width:150px;max-height:180px;object-fit:cover;object-position:center 14%;margin:0 0 16px 18px;border-bottom:3px solid var(--gold);background:#fff}
#modalBody:after{content:'';display:block;clear:both}
@keyframes title-reveal{from{opacity:0;transform:scale(1.07);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rule-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes face-in{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes face-in-right{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes combat-cue{from{opacity:0;translate:0 -8px;scale:1.12}to{opacity:1;translate:0 0;scale:1}}
@media(max-height:520px) and (orientation:landscape){#faceoff{padding:3vh 12vw;grid-template-columns:1fr 66px 1fr}.versus-fighter{height:77%;min-height:130px}.versus-caption{padding:35px 12px 12px}.versus-caption strong{font-size:28px}.versus-caption small{font-size:11px}#versusStage{top:2%;font-size:11px}.rung img{width:34px;height:44px}.rung{gap:8px}}
@media(orientation:portrait){#faceoff{grid-template-columns:1fr 40px 1fr;padding:6vh 16px;gap:6px}.versus-fighter{height:49%;min-height:190px}.versus-caption{padding:40px 8px 14px}.versus-caption strong{font-size:22px}.versus-caption small{font-size:10px;letter-spacing:.5px}.versus-mark{font-size:40px}.rung img{width:32px;height:46px}.rung{gap:6px}.rung strong{font-size:16px}#hitCallout{top:47%;font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.health-track .damage-trail{transition:none}}

/* Заставка при входе: трейлер поверх титульного экрана, кнопка «ПРОПУСТИТЬ» внизу
   в зоне большого пальца, с учётом безопасных отступов Telegram. */
#intro{position:fixed;inset:0;z-index:40;background:#000;display:grid;place-items:center}
#intro[hidden]{display:none!important}
#intro video{width:100%;height:100%;object-fit:contain;background:#000}
#skipTrailer[hidden],#introLoad[hidden]{display:none!important}
#introLoad{--доля:0;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(22px,env(safe-area-inset-bottom)) + var(--tg-content-safe-area-inset-bottom,0px));width:min(78vw,320px);display:grid;gap:8px;justify-items:center;pointer-events:none}
#introLoad i{display:block;width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
#introLoad i::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--доля));background:linear-gradient(90deg,#b0702c,#dfb271);transition:transform .25s linear}
#introLoad span{font:700 13px/1 system-ui,sans-serif;letter-spacing:.14em;color:#e9dcc6;text-shadow:0 1px 3px #000}
#skipTrailer{white-space:nowrap;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--tg-content-safe-area-inset-bottom,0px));min-width:200px;padding:14px 26px;font:700 15px/1 Arial;letter-spacing:3px;color:#fff;background:#0009;border:1px solid #ffffff66;border-radius:999px;backdrop-filter:blur(6px)}

/* coffee-league.css */
:root{--gold:#e4ad6b;--cream:#fff0d5}
body{background:#0d0907;color:var(--cream)}
#selection{background:linear-gradient(145deg,#201209e8,#090909f5 60%),url('coffee-roastery.webp') center/cover fixed}
header .brand b,.eyebrow{color:var(--gold)}
#opening{background:linear-gradient(90deg,#070605ee,#160e089e,#070605cc),url('coffee-roastery.webp') center/cover}
#opening .opening-title{text-shadow:0 8px 42px #000}
.opening-story{max-width:38rem;font-size:clamp(16px,2.3vw,22px);line-height:1.55;letter-spacing:normal!important;color:#f4d7b5}
.league-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #89623855}
.league-bar button{background:#291b12;border:1px solid #a97443;padding:12px 16px;font-size:14px;color:var(--cream);text-align:left}
.league-bar b{color:#ffc985}.league-bar a{color:#ffd0a0;font-size:14px;white-space:nowrap}
#leagueStatus{font-size:14px;line-height:1.4;color:#d9c3ab;min-height:1.4em;margin:10px 0}
#leagueBusy{color:#ffcf8c;font-size:14px}
#walletPanel,#roomPanel{padding:22px;margin:14px 0;background:#20160f;border:1px solid #8f673e}
#walletPanel p,#roomPanel p,#onlineOptions p{font-size:16px;line-height:1.5;color:#e4ccb0}
.wallet-totals{display:flex;flex-wrap:wrap;gap:28px}.wallet-totals b{font-size:32px;color:#ffd99b}.wallet-totals span{font-size:14px}
.wallet-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.wallet-actions button,#roomPanel button{border:1px solid #ad7f4c;background:#3d2718;color:var(--cream);padding:14px;font-size:14px}
.wallet-actions label{font-size:14px}.wallet-actions input{width:88px}
#tapCoffee{font-weight:800;background:#c08042;color:#100906;touch-action:manipulation;min-height:54px;transition:transform 90ms,filter 90ms}
#tapCoffee:active{transform:scale(.96);filter:brightness(1.3)}#tapPending{font-size:14px;min-width:90px}
#ledger{padding-left:20px;font-size:14px;line-height:1.9;color:#c8b398;max-height:140px;overflow:auto}
#wagerOptions{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border-top:1px solid #704b30;padding:16px 0;margin-top:12px}
#wagerOptions small{grid-column:1/-1;font-size:14px;line-height:1.45;color:#baa58e}#potPreview{color:#ffd99b;font-size:16px}
#wagerOptions label,#arenaOption,#onlineOptions label{font-size:14px;display:grid;gap:8px}#arenaOption{margin:12px 0}
input[type=number],#roomCode,#roomPanel input,select{background:#0f0b08;color:#ffe8ca;border:1px solid #795637;padding:12px;font:inherit;min-width:0;max-width:100%;box-sizing:border-box}
#roomPanel input{display:block;width:100%;font-size:14px;margin:12px 0}#roomPanel button{margin:5px 8px 5px 0}
#onlineOptions>button{margin-top:10px}.game-options .segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.segmented button{font-size:14px;padding-inline:5px}
#networkStatus{position:absolute;z-index:12;top:17%;left:50%;transform:translateX(-50%);padding:5px 10px;background:#130c09bd;color:#ffe2b8;font-size:12px;pointer-events:none;white-space:nowrap}
#networkStatus.error{color:#ffb5a5;background:#361810dc}
#ladderScreen{background:linear-gradient(90deg,#100a08f5,#0d0907d9),url('coffee-plantation.webp') center/cover}
.rung.current{border-color:#f2bd77;background:#6b3c1f66}.rung.cleared{background:#31512722}
.card{background:#fff!important}.card img{background:#fff!important}.card .index{color:#75583d}
.primary{background:linear-gradient(115deg,#b4783d,#f0c78b 55%,#be8448);color:#160c05;border-color:#e5b77e}
.bank-result{font-size:24px;color:#ffd28a}.bank-result small{display:block;font-size:14px;color:#d6bfa4;margin-top:8px}
@media(max-width:600px){.league-bar{align-items:stretch}.league-bar button{font-size:12px;padding:10px;line-height:1.6}.league-bar a{align-self:center}#walletPanel,#roomPanel{padding:15px}#wagerOptions{grid-template-columns:1fr}#wagerOptions small{grid-column:auto}.game-options .segmented{grid-template-columns:repeat(2,1fr)}.wallet-actions{align-items:stretch}.wallet-actions button{flex:1 1 140px}#networkStatus{top:16%;max-width:80%;white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){#tapCoffee{transition:none}}
.coffee-chapters{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.chapter{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;animation:coffee-chapter 21s infinite}.chapter.plantation{background-image:linear-gradient(90deg,#080605d9,#08060580),url('coffee-plantation.webp')}.chapter.roastery{background-image:linear-gradient(90deg,#080605e9,#08060590),url('coffee-roastery.webp');animation-delay:7s}.chapter.bazaar{background-image:linear-gradient(90deg,#080605e9,#08060580),url('coffee-bazaar.webp');animation-delay:14s}
#opening{isolation:isolate}.coffee-chapters~*{position:relative}#arenaOption{background:linear-gradient(90deg,#120d0afa,#120d0a75),url('coffee-roastery.webp') center 55%/cover;padding:18px;border:1px solid #715030}#arenaOption[data-stage="1"]{background-image:linear-gradient(90deg,#120d0afa,#120d0a75),url('coffee-bazaar.webp')}#arenaOption[data-stage="2"]{background-image:linear-gradient(90deg,#120d0afa,#120d0a75),url('coffee-plantation.webp')}
@keyframes coffee-chapter{0%{opacity:0;transform:scale(1)}5%,28%{opacity:1}34%,100%{opacity:0;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.chapter{animation:none}.chapter.roastery{opacity:1}}

#leagueToast{position:fixed;z-index:100;bottom:20px;left:50%;transform:translateX(-50%);background:#3b2115;color:#fff0dc;border:1px solid #e8ae73;padding:16px;max-width:min(88vw,520px);font-size:16px;box-shadow:0 6px 24px #000b}
.tools{flex-wrap:wrap;justify-content:flex-end}.tools button{font-size:14px!important;min-height:40px}.brand{flex-shrink:0}
@media(max-width:600px){#selection>header{flex-wrap:wrap;gap:14px}.tools{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tools button{padding:9px 5px!important}}

.bean-harvest{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;margin:24px 0}
#tapCoffee{position:relative;width:200px;height:220px;padding:0;border:1px solid #c48a43;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 35px #c887281c;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#tapCoffee img{width:100%;height:100%;object-fit:cover;pointer-events:none}#tapCoffee span{position:absolute;bottom:0;left:0;right:0;padding:13px 4px;background:#271609ed;color:#ffe0a4;font-size:14px}
.harvest-info h3{font-size:20px;margin:0;color:#f6cc83}/* «Сегодня…» и «Заработано сегодня…» — каждая своей строкой на любом экране (владелец 17.10.2026: «осталось 0Заработано» слиплось на компьютере). */.harvest-info strong{display:block}.harvest-info p{max-width:460px}.harvest-info progress{display:block;width:100%;height:12px;margin:12px 0;accent-color:#e7b65b}.harvest-info small,.harvest-info output{display:block;line-height:1.6;font-size:13px}.harvest-info output{color:#ffd28a;min-height:24px}
#withdrawDoff:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:600px){.bean-harvest{grid-template-columns:130px 1fr;gap:14px}#tapCoffee{width:130px;height:160px}.harvest-info h3{font-size:16px}.harvest-info p{font-size:13px!important;margin:7px 0}.harvest-info strong{font-size:13px;display:block}#tapCoffee span{font-size:11px;padding:10px 2px}}

/* The golden bean is a transparent cutout, with no white card behind it. */
.bean-harvest{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
#tapCoffee{width:min(68vw,280px);height:290px;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;perspective:700px}
#tapCoffee img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 20px #c482192d)}
#tapCoffee span{bottom:-2px;background:none;color:#ffd892;font-size:14px;padding:0}
.harvest-info{width:min(100%,460px)}.harvest-info p{margin:8px auto}
#tapCoffee:disabled{opacity:.72;cursor:default}
@media(max-width:600px){#tapCoffee{width:210px;height:225px}.harvest-info h3{font-size:18px}}
#game{contain:layout paint}#arena{contain:strict}.controls button{will-change:transform}
body:has(#game:not([hidden])) .chapter{animation-play-state:paused}

/* Зерно объёмное: лёгкий постоянный поворот и удар при тапе, а осколки летят
   поверх картинки, не задевая нажатие. */
#tapCoffee{perspective:620px}
#tapCoffee img{transform-origin:50% 52%;will-change:transform;backface-visibility:hidden}

@media(prefers-reduced-motion:reduce){#tapCoffee img{transform:none!important}}

/* Баланс DOFF стоит рядом со знаком токена: цифра без знака читается как
   «какие-то очки игры», а знак делает её тем, что она есть. Круглый, потому
   что знак круглый; размер по строке, чтобы не спорить с зёрнами. */
.wallet-totals .doff-total{display:inline-flex;align-items:center;gap:.4rem}
.wallet-totals .doff-total img{border-radius:50%;width:1.75rem;height:1.75rem;object-fit:cover;
 box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* Пока токен не подключён, баланс показывает прочерк — знак при этом приглушён,
   чтобы не обещать того, чего нет. */
.wallet-totals .doff-total img[data-empty="1"]{opacity:.45;filter:grayscale(.5)}

/* Отладочная строка связи — только с ?debug=1 (задача владельца 09.10.2026, п. 4).
   Игроку — точка пинга в углу, цветная только при плохой связи; важные
   сообщения («бой не идёт», «соперник не отвечает») остаются. */
#networkStatus.служебное{display:none!important}
#pingDot{position:absolute;z-index:12;top:calc(8px + var(--guard-top,0px));right:calc(10px + var(--guard-right,0px));width:8px;height:8px;border-radius:50%;background:#ffffff3d;pointer-events:none}
#pingDot.плохо{background:#ffb02e;box-shadow:0 0 6px #ffb02e}
#pingDot.нет{background:#ff4d3a;box-shadow:0 0 6px #ff4d3a}

/* telegram.css */
/* Insets are independent of the arena coordinate system and hitboxes. */
.telegram-app{--mini-safe-top:0px;--mini-safe-right:0px;--mini-safe-bottom:0px;--mini-safe-left:0px}
.telegram-app body{overscroll-behavior-y:none}
.telegram-app #app{padding-top:var(--mini-safe-top);padding-bottom:var(--mini-safe-bottom);padding-left:var(--mini-safe-left);padding-right:var(--mini-safe-right)}
.telegram-app #game{height:calc(var(--mini-height,100svh) - var(--mini-safe-top) - var(--mini-safe-bottom));min-height:200px}
.telegram-app #opening{inset:var(--mini-safe-top) var(--mini-safe-right) var(--mini-safe-bottom) var(--mini-safe-left)}
.telegram-app dialog{max-height:calc(var(--mini-height,100svh) - var(--mini-safe-top) - var(--mini-safe-bottom) - 24px)}
.telegram-app .token-only{display:none!important}

/* menu-pages.css */
#selection{height:calc(var(--mini-height,100dvh) - var(--mini-safe-top,0px) - var(--mini-safe-bottom,0px));min-height:0;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;padding:12px max(14px,var(--tg-safe-left,0px)) max(10px,var(--tg-safe-bottom,0px));background-attachment:scroll}
#selection[hidden],.menu-page[hidden]{display:none!important}
#selection header{flex:none;padding:4px 0 10px}#selection .brand{font-size:28px}#selection .brand small{font-size:10px;letter-spacing:2px}
.menu-tabs{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:5px;flex:none;padding:8px 0}
.menu-tabs button{padding:12px 4px;font-size:13px;border:1px solid #73512f;background:#1b130e;color:#decab3;touch-action:manipulation}
.menu-tabs button.active{background:#dfb174;color:#170e08;border-color:#dfb174}
.menu-page{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 0 14px;scrollbar-width:thin}
#selection .league-bar{padding:4px 0;flex:none}#selection .league-bar button{padding:7px 10px;font-size:12px}#leagueStatus{font-size:12px;margin:4px 0;flex:none}
#menu-hero .select-heading{margin:3px 0 10px}#menu-hero h1{font-size:28px}#menu-hero .eyebrow{display:none}
#menu-hero #roster{gap:6px}#menu-hero .card{height:clamp(98px,19dvh,180px);grid-column:auto}#menu-hero .hero-info{display:block;padding:10px 0}#menu-hero .hero-info h2{font-size:22px;margin:0}#menu-hero .hero-info p{font-size:13px;margin:4px 0}#menu-hero #heroCombo{display:none}#menu-hero>.primary{width:100%;padding:14px}
#menu-settings .tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}#menu-settings .tools button{font-size:14px;padding:10px}#menu-settings .game-options{display:block}#menu-settings .start-actions{margin-top:18px}#menu-settings input,#menu-settings select,.wallet-actions input{font-size:16px;max-width:100%;box-sizing:border-box}
#menu-beans #walletPanel{margin:0;padding:10px;border:0;background:transparent}#menu-beans .bean-harvest{display:flex;flex-direction:column;gap:8px;text-align:center;margin:8px 0}#menu-beans #tapCoffee{touch-action:none;transform:none!important;transition:filter .1s;width:min(55vw,230px);height:220px;flex:none}#tapCoffee:active{filter:brightness(1.15)}#menu-beans .harvest-info p{display:none}#menu-beans .harvest-info h3{font-size:16px;margin:4px}#menu-beans .wallet-totals{gap:10px;justify-content:space-between}#menu-beans .wallet-totals b{font-size:23px}
#selection button{touch-action:manipulation}#selection #tapCoffee{touch-action:none}#selection img{-webkit-user-drag:none}#selection .segmented button{font-size:12px}
@media(orientation:landscape) and (max-height:500px){#menu-hero #roster{grid-template-columns:repeat(8,minmax(0,1fr))}#menu-hero .card{height:112px}#menu-hero .hero-info{display:none}#selection .brand small,#leagueStatus{display:none}#selection header{padding:0}#selection .brand{font-size:22px}.menu-tabs{padding:4px 0}.menu-tabs button{padding:7px}#menu-beans .bean-harvest{flex-direction:row;justify-content:center}#menu-beans #tapCoffee{height:160px;width:170px}}
/* The page itself never pans; only menu panes and dialogs may scroll. */
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
#app{width:100%;height:100%;min-height:0;overflow:hidden;box-sizing:border-box}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea{font-size:16px!important}
.menu-page,dialog,.modal,#ledger,#ladderScreen{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#ladderScreen{height:100%;overflow:auto;box-sizing:border-box}
#tapCoffee,#tapCoffee img{touch-action:none!important;transform:none!important;animation:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#tapAccess{font-size:14px;line-height:1.4;color:#ffd49b;max-width:30rem;margin:10px auto;text-align:center}
#tapCoffee[aria-disabled=true]{opacity:.7}
#combatPreviewOption{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:14px;color:#ffd49b}#combatPreviewOption[hidden]{display:none}#combatPreview{width:20px;height:20px;padding:0;flex:none;accent-color:#dfb174}

/* ОБЪЁМНОЕ ЗЕРНО (bean-tap.mjs; владелец 15.10.2026: «сделай это зерно 3D-шным,
   чтобы когда человек на него тапал, прям видно, что она тапалась»). Слои — <i>,
   а не <img>: правила выше гасят трансформации у картинок кнопки. */
#tapCoffee{overflow:visible}
#tapCoffee img.bean3d-source{display:none}
#tapCoffee>span{z-index:2}
#tapCoffee .bean3d{position:absolute;left:0;right:0;top:0;bottom:26px;display:block;perspective:640px;perspective-origin:50% 40%;pointer-events:none}
#tapCoffee .bean3d-body{position:absolute;inset:3%;display:block;transform-style:preserve-3d;will-change:transform;transform-origin:43% 55%}
#tapCoffee .bean3d-edge,#tapCoffee .bean3d-face,#tapCoffee .bean3d-glare{position:absolute;inset:0;display:block;pointer-events:none;background-position:center;background-size:contain;background-repeat:no-repeat}
#tapCoffee .bean3d-face{transform:translateZ(0);filter:drop-shadow(0 0 16px rgba(255,176,64,.28))}
#tapCoffee .bean3d-glare{transform:translateZ(.6px);background-image:radial-gradient(circle at var(--gx,46%) var(--gy,38%),rgba(255,247,220,var(--glow,.55)) 0,rgba(255,220,150,.2) 20%,rgba(255,220,150,0) 44%);-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
#tapCoffee .bean3d-shadow{position:absolute;left:50%;bottom:0;width:56%;height:13%;display:block;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,.26) 55%,rgba(0,0,0,0));filter:blur(2px)}
#tapCoffee .bean-burst{position:absolute;left:-40%;top:-35%;width:180%;height:145%;display:block;pointer-events:none;z-index:3}

/* simple-controls.css */
#moveStick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:132px;height:132px;border:2px solid #edc99180;border-radius:50%;background:#100e0b88;box-shadow:inset 0 0 0 18px #e5b27110;touch-action:none;user-select:none;z-index:6;display:flex;align-items:center;justify-content:center}
.stick-knob{width:56px;height:56px;border-radius:50%;border:2px solid #f2d4a3;background:linear-gradient(145deg,#dfb477,#77512b);box-shadow:0 5px 14px #0008;pointer-events:none;will-change:transform}
.simple-attacks{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));display:flex;gap:16px;z-index:6}
.simple-attacks button{width:88px;height:88px;border:2px solid #e6bd80;border-radius:50%;background:#271b10d9;color:#ffe4b9;font-size:16px;font-weight:800;touch-action:none;user-select:none}
.simple-attacks button.down{background:#d9ad70;color:#1c1108;box-shadow:0 0 22px #d7a96755}
#controlLegend{bottom:12px;font-size:11px;pointer-events:none}#inputHistory{bottom:35px}#finish{display:none!important}
@media(orientation:portrait){#moveStick{width:112px;height:112px;left:14px;bottom:45px}.simple-attacks{right:14px;bottom:56px;gap:9px}.simple-attacks button{width:72px;height:72px;font-size:14px}}
@media(max-height:400px){#moveStick{width:104px;height:104px;bottom:16px}.simple-attacks button{width:70px;height:70px}.simple-attacks{bottom:20px}}
#specialAttack{position:absolute;right:0;bottom:calc(100% + 12px);width:68px;height:68px;border-color:var(--special-color,#ffcf84);background:radial-gradient(circle,#24190f 62%,transparent 64%),conic-gradient(var(--special-color,#ffcf84) var(--charge,100%),#4c463e 0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
#specialAttack b{font-size:24px;line-height:1}#specialCountdown{font-size:11px}#specialAttack:disabled{opacity:.75;cursor:default}
#finisherChoices{position:absolute;z-index:7;left:50%;top:54%;transform:translateX(-50%);width:min(340px,90%);padding:14px;background:#100c0df2;border:1px solid #e9b96a;border-radius:12px;text-align:center}
#finisherChoices strong{font-size:11px;letter-spacing:2px;color:#e9bd83}#finisherChoices>div{display:flex;gap:10px;margin-top:10px}#finisherChoices button{min-height:52px;flex:1;font-size:14px;font-weight:bold;border:1px solid #e9bd83;border-radius:7px;color:#ffe1b2;background:#392513;touch-action:none}#chooseBrutality{border-color:#ed7c70!important;background:#431e1b!important;color:#ffc5b6!important}
#game:not([data-phase="fight"]) .simple-attacks{opacity:0;pointer-events:none}#game[data-phase="intro"] #moveStick,#game[data-phase="fatality"] #moveStick,#game[data-phase="complete"] #moveStick{opacity:0;pointer-events:none}
@media(orientation:portrait){#specialAttack{width:60px;height:60px;bottom:calc(100% + 10px)}#finisherChoices{top:47%;padding:12px}}
@media(max-height:400px){#specialAttack{width:54px;height:54px;bottom:calc(100% + 8px)}#specialAttack b{font-size:18px}#finisherChoices{top:53%;padding:9px}}

/* combat-polish.css */
/* Opaque panels and vector accents keep the arena readable without live blur. */
#hud .health,#hud .timer{background:#0a1018ed;border:1px solid #ffffff38;padding:7px 10px;border-radius:4px}
#hud .health{min-width:0}
#pname,#ename{border-bottom:3px solid transparent;padding-bottom:2px;color:#fff}
#hud .health-track{border-color:#ffffffa0;background:#30101a}
#hud .run-track{height:5px;background:#ffffff26}
#hud .timer strong{color:#fff}
#combo,#enemyCombo{color:#fff6ba;text-shadow:0 2px 4px #000;background:#090e17e8;padding:8px 11px;border-left:3px solid #ffe779;border-radius:3px}
#combo:empty,#enemyCombo:empty{display:none}
#combo small,#enemyCombo small{color:#fff}
#linkFeedback{position:absolute;top:42%;left:6%;max-width:40%;padding:7px 10px;background:#080d15ef;border:1px solid currentColor;font:bold 12px Arial;pointer-events:none;z-index:3}
#linkFeedback[data-side="enemy"]{left:auto;right:6%}
#combatDebug{position:absolute;top:155px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));margin:0;padding:8px;background:#050b13ee;color:#e5f1ff;border:1px solid #8da8c780;font:10px/1.45 monospace;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;z-index:4;contain:layout paint}
#debugToggle{font:bold 10px Arial;width:38px}
#debugToggle[aria-pressed="true"]{color:#06121c;background:#79d9ff}
.debug-setting{display:flex;gap:10px;align-items:center;color:#eef6ff;font-size:14px;line-height:1.5}
#debugReport{width:100%;height:40vh;background:#07101a;color:#fff;font:12px monospace;user-select:text;-webkit-user-select:text;touch-action:pan-y}
#heroProfile{display:grid;gap:4px;margin-top:6px;font:12px/1.35 Arial;color:#c9d8dc}
#heroWeakness{color:#e9bc9b}
.card .label{border-left:3px solid var(--fighter-accent,#ffc354)}
.card.selected{border-color:var(--fighter-accent,#ffc354);box-shadow:0 0 0 2px var(--fighter-accent,#ffc354)}
@media(orientation:landscape) and (max-height:520px){
 #hud .health,#hud .timer{padding:4px 7px}
 #combatDebug{top:114px;font-size:9px;line-height:1.25;padding:5px}
 #linkFeedback{top:47%;font-size:10px;padding:4px 7px}
 #menu-hero .hero-info{display:block;padding:5px 0}
 #menu-hero .hero-info h2,#menu-hero .hero-info p{display:none}
 #heroProfile{grid-template-columns:1fr 1fr;gap:10px;margin:0;font-size:10px}
}
@media(max-width:650px) and (orientation:portrait){
 #hud .health,#hud .timer{padding:5px}
 #combatDebug{font-size:9px;top:166px}
 #linkFeedback{top:44%;font-size:10px}
}
/* Пробития блока больше нет (03.10.2026): полоска защиты всегда полная и ничего не сообщает. */
.guard-track{display:none}

/* phone-layout.css */
/* One safe-area boundary for the whole app; children must not add it twice. */
:root{
 --phone-top:max(env(safe-area-inset-top,0px),var(--mini-safe-top,0px));
 --phone-right:max(env(safe-area-inset-right,0px),var(--mini-safe-right,0px));
 --phone-bottom:max(env(safe-area-inset-bottom,0px),var(--mini-safe-bottom,0px));
 --phone-left:max(env(safe-area-inset-left,0px),var(--mini-safe-left,0px));
}
#app,.telegram-app #app{
 position:relative;box-sizing:border-box;min-width:0;min-height:0;
 width:min(100%,var(--visible-width,100vw));
 height:min(100%,var(--visible-height,100dvh),var(--mini-height,100dvh));
 padding:var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left);
 overflow:hidden;
}
#game,.telegram-app #game,#selection,#ladderScreen{
 box-sizing:border-box;width:100%;max-width:100%;height:100%;max-height:100%;min-height:0;min-width:0;
}
#game{isolation:isolate}
/* Свой разворот: коробка игры становится горизонтальной внутри вертикального
   окна телефона.
   Размеры обязаны перебить общее правило #game выше. У «#game[data-view]» и у
   «.telegram-app #game» вес одинаковый, и побеждает то, что ниже по порядку, —
   поэтому здесь есть и вариант с .telegram-app, и правило стоит после общего.
   max-width и max-height снимаются намеренно: они держали коробку в размерах
   вертикального окна, и повёрнутая коробка вылезала за края экрана — кнопки
   уходили за левый край, полоски здоровья за правый. Ровно это владелец и
   увидел: «не работает игра, ни кнопок, не на весь экран». */
#game[data-view="rotated"],.telegram-app #game[data-view="rotated"]{
 position:fixed;top:50%;left:50%;
 width:var(--visible-height,100dvh);height:var(--visible-width,100dvw);
 max-width:none;max-height:none;min-width:0;min-height:0;
 transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;
}
/* ЗАПРЕТНЫЕ УГЛЫ ТЕЛЕФОНА, ПЕРЕСЧИТАННЫЕ ЧЕРЕЗ ПОВОРОТ.
   Игра развёрнута на 90°, а Telegram и система рисуют свои кнопки в
   координатах ТЕЛЕФОНА. Поэтому «верх телефона» — это левый край игры, и
   отступы обязаны ехать вместе с поворотом, иначе запас остаётся не с той
   стороны, а кнопка ложится на стик. Владелец прислал снимок ровно этого:
   «‹ Назад» поверх стика.
   Соответствие выведено из самого поворота (локальная точка (x,y) после
   rotate(90deg) попадает в (-y,x)):
     верх телефона → левый край игры;  право телефона → верх игры;
     низ телефона  → правый край игры; лево телефона  → низ игры. */
:root{
 /* Ноль, а не отступы телефона: в обычном виде их уже держит padding у #app,
    и второй раз тот же запас отодвинул бы кнопки в пустоту. Повёрнутая игра
    стоит position:fixed и padding #app не получает — там запас и нужен. */
 --guard-top:0px;--guard-right:0px;--guard-bottom:0px;--guard-left:0px;
}
#game[data-view="rotated"],.telegram-app #game[data-view="rotated"]{
 --guard-top:var(--phone-right);--guard-right:var(--phone-bottom);
 --guard-bottom:var(--phone-left);--guard-left:var(--phone-top);
}
/* В полном экране Telegram рисует поверх игры свои кнопки (закрыть и «…»), и
   сообщает их место не всякий клиент. Поэтому запас в 48 px — размер пальца —
   ставится там, где они бывают, и только пока полный экран включён: держать
   его всегда значило бы отнимать место у игры без причины. */
.tg-fullscreen #game[data-view="rotated"]{
 --guard-top:var(--phone-right);
 --guard-left:max(var(--phone-top),48px);
}
.classic-attacks{position:absolute;right:var(--control-pad);bottom:var(--control-bottom);display:grid;grid-template-columns:repeat(3,var(--control-button));gap:var(--control-gap);pointer-events:auto}
.classic-attacks[hidden]{display:none}
.classic-attacks button{width:var(--control-button);height:var(--control-button);padding:0;border:2px solid #edc58f;border-radius:12px;background:#181e29ed;color:#fff1d8;font:bold 16px Arial;touch-action:none;user-select:none}
.classic-attacks [data-key="block"],.classic-attacks [data-key="run"]{font-size:12px;border-color:#92c6de}
.classic-attacks button.down{background:#edc58f;color:#17120c}
/* Заслон «поверни телефон». Он был написан, но его никто не показывал:
   элемент так и стоял hidden, а обработчик висел только на кнопке «играть
   вертикально». В портрете игрок получал сжатую арену без единого намёка. */
#rotate{display:none}
#game[data-layout="portrait"]:not([data-rotate="dismissed"]) #rotate{display:flex;position:absolute;inset:0;z-index:9;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:#0a0b0ef2}
#rotate span{font-size:64px;line-height:1;color:#ffcf84;animation:rotate-hint 2.4s ease-in-out infinite}
#rotate h2{margin:0;font:800 22px/1.2 Arial,sans-serif;letter-spacing:2px;color:#fff1d8}
#rotate p{margin:0;max-width:22em;color:#b9b0a0;font:13px/1.5 Arial,sans-serif}
#rotate button{margin-top:6px}
@keyframes rotate-hint{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(76deg)}}
@media(prefers-reduced-motion:reduce){#rotate span{animation:none}}
#game[data-controls="classic"] .simple-attacks{display:none}
/* Режим «жесты»: весь экран — поверхность управления. Стик и кнопки ударов
   убраны, остаётся только крупный спецприём. */
#game[data-controls="gesture"] #moveStick{display:none}
#game[data-controls="gesture"] .simple-attacks [data-simple],#game[data-controls="gesture"] .simple-attacks .simple-block{display:none}
#game[data-controls="gesture"] .simple-attacks{width:var(--control-special,64px);height:var(--control-special,64px);grid-template-columns:1fr;grid-template-rows:1fr}
#game[data-controls="gesture"] .simple-attacks #specialAttack{grid-column:1;grid-row:1}
#game:not([data-phase="fight"]) .classic-attacks{visibility:hidden;pointer-events:none}
#controlMode{width:52px;font-size:12px}
.league-bar{flex-wrap:wrap}
.league-entry{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
#telegramLaunch{font-weight:700}
#arena,#arena3d,#arenaPixi{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#opening,.telegram-app #opening{position:absolute;inset:var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left);min-width:0;min-height:0;padding:16px;overflow:auto}
#opening .opening-title{font-size:clamp(42px,min(14vw,18dvh),110px)}
#opening p{margin:12px 0;font-size:12px;letter-spacing:2px}
#opening .opening-story{font-size:14px;letter-spacing:0}
#opening .opening-rule{margin:10px 0}
#opening button{min-width:0;width:min(100%,280px);flex:none}
#faceoff{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);padding:24px 16px 64px}
.versus-fighter{min-width:0;min-height:0}
#skipIntro{bottom:10px;max-width:calc(100% - 24px);white-space:nowrap}
dialog,.telegram-app dialog{max-width:calc(var(--visible-width,100vw) - 24px);max-height:calc(var(--visible-height,100dvh) - var(--phone-top) - var(--phone-bottom) - 20px)}

/* Two deliberate thumb zones. Every button, including special, is in the grid. */
#combatControls{
 box-sizing:border-box;padding:var(--guard-top,0px) var(--guard-right,0px) var(--guard-bottom,0px) var(--guard-left,0px);
 position:absolute;inset:auto 0 0;height:var(--control-deck,184px);max-height:100%;
 pointer-events:none;z-index:6;
 background:linear-gradient(0deg,#080b12e8,#080b1270 70%,transparent);
}
#moveStick{
 left:calc(var(--control-pad,12px) + var(--guard-left,0px));
 bottom:calc(var(--control-bottom,36px) + var(--guard-bottom,0px));right:auto;top:auto;
 width:var(--control-stick,104px);height:var(--control-stick,104px);padding:0;
 border:2px solid #d3b083a6;border-radius:50%;
 background:radial-gradient(circle at 50% 45%,#303033e8,#17191ded 62%,#080b11);
 box-shadow:inset 0 0 0 10px #f5d1a60b,inset 0 2px 4px #ffffff12,0 4px 10px #0007;
 pointer-events:auto;touch-action:none;overflow:hidden;
}
#moveStick::before,#moveStick::after{content:'';position:absolute;background:#ebc68a32;pointer-events:none;border-radius:2px}
#moveStick::before{width:1px;height:72%}#moveStick::after{width:72%;height:1px}
#moveStick .stick-knob{
 position:relative;z-index:1;width:44%;height:44%;flex:none;box-sizing:border-box;
 border:2px solid #ffddb0;border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#f5d3a1,#be874c 65%,#815329);
 box-shadow:inset 0 2px 3px #fff4,0 3px 8px #0008;
}
.simple-attacks{
 left:auto;right:calc(var(--control-pad,12px) + var(--guard-right,0px));
 bottom:calc(var(--control-bottom,36px) + var(--guard-bottom,0px));top:auto;
 width:calc(var(--control-column,64px)*2 + var(--control-gap,8px));
 height:calc(var(--control-button,64px) + var(--control-special,51px) + var(--control-gap,8px));
 display:grid;grid-template-columns:repeat(2,var(--control-column,64px));
 grid-template-rows:var(--control-special,51px) var(--control-button,64px);
 gap:var(--control-gap,8px);align-items:end;justify-items:end;pointer-events:auto;
}
.simple-attacks button{
 box-sizing:border-box;position:relative;inset:auto;margin:0;padding:0;min-width:0;min-height:0;
 width:var(--control-button,64px);height:var(--control-button,64px);
 border:2px solid var(--button-accent,#e6bd80);border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#36302a,#1d1c20 72%);color:#fff1d8;
 box-shadow:inset 0 2px 3px #fff2,0 3px 8px #0008;
 font:800 14px/1 Arial,sans-serif;letter-spacing:.4px;touch-action:none;
 transition:background-color 60ms,color 60ms;user-select:none;-webkit-user-select:none;
}
.simple-attacks .simple-block{grid-column:1;grid-row:1;justify-self:start;width:var(--control-special,51px);height:var(--control-special,51px);--button-accent:#9fd3b4;font-size:12px}
.simple-attacks [data-simple="hand"]{grid-column:1;grid-row:2;--button-accent:#f3c485}
.simple-attacks [data-simple="foot"]{grid-column:2;grid-row:2;--button-accent:#a6d9ea}
.simple-attacks button.down{background:#edc58f;color:#140e0a;box-shadow:inset 0 3px 7px #50300d60,0 0 0 2px #ffedd266}
.simple-attacks #specialAttack{
 position:relative;inset:auto;grid-column:2;grid-row:1;justify-self:end;
 width:var(--control-special,51px);height:var(--control-special,51px);
 border-color:var(--special-color,#ffcf84);
 background:radial-gradient(circle,#181820 61%,transparent 64%),conic-gradient(var(--special-color,#ffcf84) var(--charge,100%),#45434b 0);
}
#specialAttack b{font-size:22px;line-height:1}#specialCountdown{font:700 11px/1.2 Arial,sans-serif;letter-spacing:0}
#controlLegend{
 position:absolute;left:var(--control-pad,12px);right:var(--control-pad,12px);bottom:6px;top:auto;
 width:auto;max-width:100%;height:var(--control-legend,24px);overflow:hidden;
 display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:none;
 /* Две строки вместо одной обрезанной: на 320 px подсказка целиком не
    помещается в строку, а высота деки при этом не меняется. */
 font:10px/1.1 Arial,sans-serif;letter-spacing:0;color:#c5bda9;pointer-events:none;text-align:center;
}
#inputHistory{bottom:calc(var(--control-deck,184px) + 4px);left:50%;max-width:90%;overflow:hidden;text-overflow:ellipsis}
#finisherChoices{top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100% - 24px));box-sizing:border-box;max-height:calc(100% - 16px);overflow:auto}
/* ВЫБОР ДОБИВАНИЯ НЕ ЗАКРЫВАЕТ СЦЕНУ (образец MK, владелец 13.10.2026): там
   «FINISH HIM!» — крупно сверху, а бойцы видны целиком. Наше окно стояло
   посередине и закрывало обоих. Теперь кнопки — внизу, между джойстиком и
   кнопками ударов; в вертикальной раскладке — над декой управления. */
#game #finisherChoices{top:auto;bottom:10px;left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 300px));min-width:236px;
 background:linear-gradient(#100c0d00,#100c0dd9 45%);border:0;padding:8px 10px 6px}
#game[data-layout="portrait"] #finisherChoices{bottom:calc(var(--control-deck,184px) + 10px);width:min(380px,calc(100% - 24px))}
#game #finisherChoices>div{margin-top:6px}

/* Names may shrink within their track; the HUD can never widen the game. */
/* Полоски здоровья тоже уходят из запретного угла: при развороте верх игры —
   это правый край телефона, где Telegram держит «закрыть» и «…». */
#hud{inset:calc(8px + var(--guard-top,0px)) calc(8px + var(--guard-right,0px)) auto calc(8px + var(--guard-left,0px));
 gap:8px;max-width:none}
#hud .health{flex:1 1 0;min-width:0;padding:5px 7px}
#hud .health>div:first-child{min-width:0;gap:4px}
#pname,#ename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,2.5vw,22px)}
#pscore,#escore{flex:none;font-size:12px;letter-spacing:1px;white-space:nowrap}
#hud .timer{flex:none;min-width:44px;padding:5px}
#hud .timer strong{font-size:30px}#hud .timer span{font-size:9px}
#hud .health small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;letter-spacing:.5px}
/* Панель боя уходит ПОД полосы здоровья, а не на них.
   На записи владельца 18.09 в середине HUD сошлись четверо: таймер «94»,
   надпись «РАУНД 1», кнопки Ⅱ, ? и DBG. Причина не в отступах: #hud держит
   таймер по центру, а .battle-tools прибита к center по горизонтали и к 84
   точкам сверху — то есть внутрь полосы. Столкновение было неизбежным.
   Высота HUD меряется в game.js и приезжает сюда переменной: подбирать её
   числом нельзя, она зависит от отступов телефона и от Telegram. */
.battle-tools{top:calc(4px + var(--guard-top,0px) + var(--hud-height,96px) + 6px);gap:6px;z-index:7}
/* Диагностика — инструмент исполнителя. Игроку она видна только после того,
   как он сам включил её в настройках, иначе это просто шум в бою. */
#debugToggle[aria-pressed="false"]{display:none}
.battle-tools button,#debugToggle{width:36px;height:30px}
#practiceHud{top:120px;left:8px;right:8px;max-width:calc(100% - 16px);gap:8px;flex-wrap:wrap}
#networkStatus{top:120px;max-width:calc(100% - 20px);white-space:normal;text-align:center}
#combatDebug{top:150px;left:8px;right:8px;max-height:calc(100% - 155px);overflow:hidden}
#game[data-layout="portrait"] #arena{top:132px;bottom:auto;height:max(0px,calc(100% - var(--control-deck,184px) - 142px))}#game[data-layout="portrait"] #arena3d,#game[data-layout="portrait"] #arenaPixi{top:132px;bottom:auto;height:max(0px,calc(100% - var(--control-deck,184px) - 142px))}
#game[data-layout="portrait"] #faceoff{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:6px;padding-inline:10px}
#game[data-layout="portrait"] #combo,#game[data-layout="portrait"] #enemyCombo{top:34%;font-size:17px}
#game[data-layout="landscape"] #combatControls{background:linear-gradient(0deg,#080b1260,transparent)}
#game[data-layout="landscape"] #inputHistory{bottom:10px;max-width:35%}
@media(max-height:400px){
 #opening .opening-story{display:none}
 #hud{top:calc(4px + var(--guard-top,0px));left:calc(6px + var(--guard-left,0px));right:calc(6px + var(--guard-right,0px))}
 #hud .health-track{height:8px;margin-top:3px}#hud .health small{display:none}
 #hud .timer strong{font-size:24px}#hud .health,#hud .timer{padding:3px 5px}
 .battle-tools{top:calc(4px + var(--guard-top,0px) + var(--hud-height,72px) + 4px)}.battle-tools button,#debugToggle{height:28px}
 #practiceHud,#networkStatus{top:95px;font-size:10px}
 #combatDebug{top:120px;max-height:calc(100% - 125px);font-size:9px}
 #specialAttack b{font-size:18px}
}


/* Compact combat surface: applies to the logical game orientation, including
   Telegram's CSS rotation. Chrome must stay outside the fighters' head space. */
#game[data-layout="landscape"] #hud{top:calc(4px + var(--guard-top));gap:8px;align-items:flex-start}
#game[data-layout="landscape"] #hud .health,#game[data-layout="landscape"] #hud .timer{padding:2px 4px;border:0;border-radius:0;background:linear-gradient(#080d1799,transparent)}
#game[data-layout="landscape"] #hud .health>div:first-child{height:16px;font:700 12px/16px Arial,sans-serif}
#game[data-layout="landscape"] #pname,#game[data-layout="landscape"] #ename{font:700 12px/16px Arial,sans-serif;border-bottom:0;padding-bottom:0}
#game[data-layout="landscape"] #pscore,#game[data-layout="landscape"] #escore{font-size:9px;letter-spacing:1px}
#game[data-layout="landscape"] #hud .health-track{height:8px;margin-top:2px}
#game[data-layout="landscape"] #hud .run-track,#game[data-layout="landscape"] #hud .guard-track{height:2px;margin-top:2px}#game[data-layout="landscape"] #hud .meter-track{height:4px;margin-top:2px}
#game[data-layout="landscape"] #hud .health small{display:none}
#game[data-layout="landscape"] #hud .timer{min-width:38px}
#game[data-layout="landscape"] #hud .timer strong{font-size:26px;line-height:1}
#game[data-layout="landscape"] #hud .timer span{font:700 8px/12px Arial,sans-serif;display:block;letter-spacing:0}
#game[data-layout="landscape"] #combatControls{background:none}
#game[data-layout="landscape"] #controlLegend{display:none}
#game[data-layout="landscape"] .simple-attacks button{font-size:11px;letter-spacing:0;background-color:#151b2499}
#game[data-layout="landscape"] #specialCountdown{font-size:9px}
#game[data-layout="landscape"] .battle-tools{top:auto;bottom:calc(8px + var(--guard-bottom));gap:2px}
#game[data-layout="landscape"] .battle-tools button{width:44px;height:44px;padding:0;background:#10182066;font-size:12px}
#game[data-layout="landscape"] .battle-tools #controlMode{font-size:10px}
#game[data-layout="landscape"] #networkStatus{top:auto;bottom:calc(56px + var(--guard-bottom));max-width:42%;padding:3px 5px;font:10px/12px Arial,sans-serif;max-height:36px;overflow:hidden;overflow-wrap:anywhere}
#game[data-layout="landscape"] #inputHistory{bottom:calc(96px + var(--guard-bottom))}
.classic-attacks{right:calc(var(--control-pad) + var(--guard-right));bottom:calc(var(--control-bottom) + var(--guard-bottom))}
#game[data-phase="fatality"] #hud{visibility:hidden}
#game[data-phase="fatality"] #networkStatus:not(.error){visibility:hidden}

/* community.css */
.menu-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
.menu-tabs button{min-width:0;font-size:14px;letter-spacing:.35px}
.social-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}
.social-heading h1{font-size:clamp(26px,5vw,38px);line-height:1.1;margin:5px 0}
.social-heading .eyebrow{font-size:12px;letter-spacing:2px;color:#c7a57b}
.social-heading button{flex:none}
.social-status{font:14px/1.5 Arial,sans-serif;color:#e7c597;min-height:0;margin:8px 0}
.social-status:empty{display:none}
.social-card{padding:18px;background:linear-gradient(130deg,#271c15e8,#161515ee);border:1px solid #9d73434d;border-radius:14px;margin-bottom:14px}
.social-card h2{font-size:17px;letter-spacing:1px;margin:0 0 14px}
.social-button,.social-more,.friend-tabs button,.player-id button{background:#2c221c;color:#f9d8a7;border:1px solid #b3875066;border-radius:8px;padding:11px 13px;min-height:44px;font:700 13px/1.25 Arial,sans-serif;cursor:pointer;white-space:normal}
.social-button:hover,.social-more:hover{background:#453123}
.social-button.subtle{background:transparent;color:#c8b69e;border-color:#8c775c44}
.social-more{display:block;margin:16px auto;width:100%;max-width:420px}
.social-more[hidden],.online-filter[hidden],.profile-edit [hidden]{display:none!important}
.social-button:disabled,.social-more:disabled{opacity:.5;cursor:wait}
.social-login{color:#ffdc9c;font-weight:700;text-decoration:underline}
.profile-top{display:flex;gap:20px;align-items:center;min-width:0}
.profile-top>.player-avatar,.profile-top #ownAvatar{flex:none}
.profile-top .player-avatar{width:108px;height:108px;border-radius:22px}
.player-avatar{width:52px;height:52px;object-fit:cover;object-position:center 28%;border-radius:14px;border:1px solid #b4957266;background:#ede7df;flex:none}
.profile-identity{min-width:0;flex:1}
.profile-identity h2{font-size:26px;letter-spacing:0;overflow-wrap:anywhere;margin:0 0 8px}
.profile-identity p{font:14px/1.4 Arial,sans-serif;color:#c3b29e;margin:6px 0}
.player-id{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.player-id input{width:140px;min-width:0;flex:0 1 155px;background:#121417;color:#edc997;border:1px solid #665445;border-radius:6px;padding:9px;font-family:monospace}
/* Ссылка приглашения длиннее ID игрока: в поле шириной с «DF-000123» её не
   видно целиком, и игрок не понимает, что он вообще копирует. */
#referralLink{flex:1 1 260px;width:auto}
.profile-edit summary,.ranking-rules summary{cursor:pointer;font-size:14px;font-weight:700;color:#e8c79a;padding:4px 0;min-height:32px}
.profile-edit form{margin-top:15px;display:grid;gap:14px}
.profile-edit label,.friend-search label{display:grid;gap:8px;font-size:14px;color:#d9c6ae;min-width:0}
.profile-edit input:not([type=file]),.friend-search input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:12px;color:#fff4e2;background:#111316;border:1px solid #796047;border-radius:8px;font-size:16px}
.profile-edit p{margin:0;font:14px/1.4 Arial,sans-serif}
.avatar-upload{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.avatar-upload span{font:13px/1.4 Arial,sans-serif;color:#bdae9d}
.avatar-upload label{display:block;cursor:pointer}
.avatar-choices{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.avatar-choice{display:flex;flex-direction:column;align-items:center;gap:7px;padding:5px;background:#171616;border:2px solid transparent;border-radius:10px;min-width:0;color:#ceb998;font-size:11px;overflow:hidden}
.avatar-choice img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 28%;border-radius:6px}
.avatar-choice[aria-pressed=true]{border-color:#f2ba6b;background:#43301b;color:#ffe9c4}
#saveProfile{width:100%;min-width:0;min-height:48px;font-size:15px}
#profileSaveStatus,#playerActionStatus{color:#f2ca96;font:14px/1.5 Arial,sans-serif}
.social-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.social-stat{display:flex;flex-direction:column;gap:7px;min-width:0;background:#11151bd4;border:1px solid #89795d30;border-radius:10px;padding:14px}
.social-stat strong{font-size:clamp(23px,4.2vw,34px);line-height:1.15;color:#f4cc90;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.social-stat span{font:13px/1.4 Arial,sans-serif;color:#c2b7a8;overflow-wrap:anywhere}
.social-stats.small .social-stat strong{font-size:25px}
.mode-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-bottom:1px solid #88715235;padding:10px 0;font:14px/1.5 Arial,sans-serif}
.mode-row b{color:#e7c497;font-size:14px}
.behavior-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.behavior-stats .social-stat{padding:12px}
.behavior-stats strong{font-size:24px}
.social-note{font:13px/1.5 Arial,sans-serif;color:#bdae9a;margin:12px 0}
.match-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #80684840;padding:13px 0;font-family:Arial,sans-serif;min-width:0}
.match-row>div{min-width:0;display:grid;gap:5px}
.match-row strong{font-size:14px;color:#dccbbb;overflow-wrap:anywhere}
.match-row span{font-size:12px;color:#bbae9a}
.match-row small{font-size:12px;color:#958a7d}
.match-row>b{flex:none;display:grid;gap:4px;text-align:right;font-size:17px;color:#e0c5a0}
.match-row.win>div strong,.match-row.win>b{color:#8cdbb2}
.match-row.loss>div strong{color:#e7a493}
.friend-search{display:flex;align-items:end;gap:10px;margin:14px 0 18px}
.friend-search label{flex:1}
.friend-search button{min-width:0;flex:none;min-height:46px;padding:12px 18px;font-size:14px}
.friend-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:16px 0}
.friend-tabs button{font-size:12px;padding:11px 5px;letter-spacing:0}
.friend-tabs button.active{background:#d9aa6d;color:#211609;border-color:#d9aa6d}
.friend-tabs span{display:inline-block;border-radius:4px;padding:2px 4px;background:#0002}
.online-filter{display:flex;gap:10px;align-items:center;font:14px/1.4 Arial,sans-serif;margin:12px 0 16px}
.online-filter select{max-width:180px;min-height:42px;padding:8px 12px;color:#f0d4ac;background:#201b17;border:1px solid #806342;border-radius:8px}
.players-list{display:grid;gap:8px}
.player-row{display:flex;align-items:center;gap:12px;border:1px solid #7961484d;border-radius:12px;padding:12px;background:#1c1714e8;min-width:0}
.player-row.is-you{border-color:#b78f55;background:#352618}
.player-main{padding:0;border:0;display:flex;gap:12px;align-items:center;flex:1;min-width:0;background:none;text-align:left;color:#ecdfcb;cursor:pointer}
.player-info{display:grid;gap:5px;min-width:0}
.player-info strong{font:700 15px/1.2 Arial,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-info small{font:12px/1.2 monospace;color:#a9957f}
.presence{font:12px/1.35 Arial,sans-serif;color:#a7a097;letter-spacing:0}
.presence.online{color:#93d4b3}
.presence.online::before{content:'●';font-size:8px;vertical-align:middle;margin-right:5px}
.friend-actions{display:flex;flex-wrap:wrap;gap:6px;max-width:185px;justify-content:flex-end}
.friend-actions button{font-size:12px;padding:8px;min-height:44px}
.player-rank{width:44px;flex:none;color:#ab9780;font:700 17px/1.2 Arial,sans-serif;text-align:center}
.player-rank.podium{color:#f5cd83;font-size:21px}
.player-score{display:grid;text-align:right;gap:3px;font:12px/1.4 Arial,sans-serif;color:#b9a68f;flex:none}
.player-score strong{font-size:21px;color:#f2cb95}
.player-score small{font-size:12px}
.ranking-summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.ranking-summary>strong{font-size:35px;color:#f6ce8e}
.ranking-summary>span{font-size:12px;letter-spacing:1px}
.ranking-summary>b{margin-left:auto;font:14px/1.4 Arial,sans-serif;color:#c3b29c}
.ranking-rules{margin:14px 0 18px;padding:0 5px}
.ranking-rules p{font:14px/1.6 Arial,sans-serif;color:#bbaa95;max-width:760px}
.social-empty{margin:18px 0;padding:25px 18px;text-align:center;border:1px dashed #80664560;border-radius:12px;font:15px/1.6 Arial,sans-serif;color:#c9b89e}
.player-dialog{width:min(620px,calc(100vw - 24px));padding:0;background:#171617;color:#f3ddbb;border:1px solid #9b724e;border-radius:16px;max-height:calc(var(--visible-height,100dvh) - var(--phone-top,0px) - var(--phone-bottom,0px) - 24px);overflow:auto}
.player-dialog::backdrop{background:#080a0dd9}
.player-dialog .modal{padding:20px}
.player-close{display:block;margin:0 0 16px auto}
.player-dialog h2{font-size:25px;overflow-wrap:anywhere;margin:0 0 8px}
.player-dialog h3{font-size:15px;margin:24px 0 8px}
.player-dialog .profile-top p{font:14px/1.4 Arial,sans-serif;margin:6px 0}
#publicPlayerActions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:650px){
 .menu-tabs{grid-template-columns:repeat(3,minmax(0,1fr));padding:5px 0}
 .menu-tabs button{padding:10px 3px;font-size:13px;min-height:38px}
 .social-card{padding:14px}
 .profile-top{gap:12px}.profile-top .player-avatar{width:76px;height:76px;border-radius:17px}
 .profile-identity h2{font-size:22px}.player-id{gap:6px}.player-id button{font-size:11px;padding:8px}
 .avatar-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
 .social-stat{padding:11px 9px}.social-stat span{font-size:12px}
 .friend-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .player-row{gap:7px;padding:10px 8px;flex-wrap:wrap}.player-main{gap:8px}.player-avatar{width:44px;height:44px;border-radius:10px}
 .player-rank{width:32px;font-size:14px}.player-rank.podium{font-size:17px}.player-score strong{font-size:18px}.player-score span{font-size:11px}
 .friend-actions{max-width:none;width:100%;justify-content:flex-start;padding-left:52px;box-sizing:border-box}
 .friend-actions:empty{display:none}
}
@media(orientation:landscape) and (max-height:500px){
 .menu-tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.menu-tabs button{font-size:12px;padding:7px 2px;min-height:34px}
 .social-heading{margin:6px 0 10px}.social-heading h1{font-size:24px}
 .social-heading .eyebrow{display:none}
}

.wallet-address{overflow-wrap:anywhere;user-select:text;font-size:14px;line-height:1.5}.ton-wallet button{margin:6px 6px 0 0;min-height:44px}.ton-wallet [hidden]{display:none!important}

/* Вызовы на бой: карточка «кто зовёт и на сколько» плюс две кнопки. */
.challenge-list{display:grid;gap:8px;margin:10px 0}
.challenge-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;background:#17191ecc;border:1px solid #b3875044;border-radius:10px;padding:11px 12px}
.challenge-row strong{font:700 13px/1.3 Arial,sans-serif;color:#f9d8a7}
.challenge-row small{display:block;color:#9b9ea4;font-size:11px;margin-top:3px}
.challenge-row .challenge-actions{display:flex;gap:7px;flex-wrap:wrap}
.challenge-row.incoming{border-color:#dfb271}
#invitePlayer,#findFight{width:100%;margin-top:8px}
#inviteByLink{margin-top:12px;color:#9b9ea4;font-size:12px}
#inviteByLink summary{cursor:pointer;padding:6px 0}

/* Вызов приходит поверх любого раздела: принять бой можно прямо отсюда,
   не разыскивая, где он лежит. */
#challengePopup{position:fixed;z-index:120;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
 width:min(92vw,460px);display:flex;flex-direction:column;gap:4px;
 background:linear-gradient(180deg,#2b1d14,#1a1410);color:#f7e6cd;border:1px solid #dfb271;border-radius:14px;
 padding:15px 16px;box-shadow:0 12px 34px #000c}
#challengePopup[hidden]{display:none}
#challengePopupTitle{font:700 16px/1.25 Arial,sans-serif;color:#f9d8a7}
#challengePopupStake{font-size:13px;color:#c9bba9}
.challenge-popup-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.challenge-popup-actions button{flex:1 1 120px;min-height:46px;border-radius:9px}
.challenge-popup-actions .subtle{flex:0 0 auto;opacity:.75}

/* Аккаунт читается с первого экрана: сверху кто ты и кошелёк, остальное
   сворачивается. Раскрывается нажатием, а не прокруткой всей страницы. */
.fold{padding:0}
.fold>summary{cursor:pointer;list-style:none;padding:15px 16px;font:700 14px/1.3 Arial,sans-serif;color:#f9d8a7;
 display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:'▾';color:#b38750;font-size:13px;transition:transform 140ms}
.fold[open]>summary::after{transform:rotate(180deg)}
.fold>summary .fold-brief{font-weight:400;font-size:12px;color:#9b9ea4;text-align:right}
.fold>*:not(summary){margin-left:16px;margin-right:16px}
.fold>*:last-child{margin-bottom:15px}

/* telegram-entry.css */
#app[hidden],#telegramGate[hidden]{display:none!important}
#telegramGate{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 22px;background:#0c0d10;color:#f4d09a;text-align:center;font-family:Arial,sans-serif}
#telegramGate h1{margin:0;font-size:clamp(28px,7vw,44px);letter-spacing:1px}
#telegramGate p{margin:0;max-width:420px;font-size:16px;line-height:1.5;color:#dccab0}
#telegramOnlyLink{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;padding:14px 24px;background:#e0b375;color:#1b120b;border-radius:10px;text-decoration:none;font-size:16px;font-weight:700}
#telegramOnlyLink:focus-visible{outline:3px solid #fff;outline-offset:5px}
#telegramEntryStatus:empty{display:none}

/* menu-2026.css */
/* ГЛАВНОЕ МЕНЮ: объём светом, а не украшением.
 *
 * Владелец: «чтобы кнопки были объёмные, дизайн очень качественный, уровень и
 * простота минимализма в 2026 году». Эти два требования тянут в разные
 * стороны, и разрешаются они одним решением: ОБЪЁМ ДАЁТ СВЕТ, А НЕ ФОРМА.
 * Ни фасок, ни глянца, ни рамок в рамках — только то, что делает настоящая
 * поверхность под настоящим светом:
 *
 *   1. светлая кромка сверху — там, где поверхность ловит свет;
 *   2. мягкая тень снизу — там, где она отрывается от фона;
 *   3. едва заметный градиент по телу — верх светлее низа;
 *   4. при нажатии кнопка УХОДИТ ВНИЗ: кромка гаснет, тень сжимается.
 *
 * Четвёртое важнее прочих. Объём, который не меняется при нажатии, —
 * нарисованный объём; палец ему не верит.
 *
 * ПОЧЕМУ CSS, А НЕ КАРТИНКИ ОТ ГЕНЕРАТОРА. Кнопку-картинку нельзя растянуть
 * под длину слова, она мылится на плотном экране, требует нарезки на девять
 * кусков и весит килобайты на каждое состояние. Свет в CSS точен на любом
 * размере и не весит ничего. Генератор здесь занят тем, что умеет лучше
 * кода, — задником.
 *
 * ЧТО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ. Не трогает ни одного идентификатора и ни одного
 * обработчика: вся проводка меню остаётся прежней. Стереть этот файл из
 * index.html — и меню вернётся ровно к прежнему виду.
 */

:root{
 /* Поверхности. Ступени яркости, а не случайные цвета: каждая следующая
  * ближе к свету, и по ним читается, что выше, а что глубже. */
 --дно:#0b0c0f;
 --низ:#131519;
 --верх:#1b1e24;
 --кромка:#ffffff14;        /* кромка, ловящая свет */
 --кромка-ярче:#ffffff2e;
 --тень:0 1px 2px #00000059, 0 6px 16px -6px #00000080;
 --тень-глубже:0 2px 4px #0000006b, 0 18px 40px -12px #000000a6;
 /* Золото у игры уже есть (--gold). Здесь только его тёплая тень. */
 --золото-тень:0 1px 2px #00000066, 0 10px 26px -8px #dfb27159;
}

/* ── ОБЩАЯ ПОВЕРХНОСТЬ ─────────────────────────────────────────────────── */
/* Один набор правил на все кнопки меню. Разными их делает размер и цвет, а
 * не отдельная порода: так меню читается как одна вещь, а не как собрание. */
#selection .tools button,
#selection .league-bar button,
#selection .secondary,
#opening .primary,
#selection .primary{
 position:relative;
 border:0;
 border-radius:14px;
 background:linear-gradient(180deg,var(--верх),var(--низ));
 box-shadow:
   inset 0 1px 0 var(--кромка-ярче),      /* кромка сверху */
   inset 0 -1px 0 #00000055,              /* подрез снизу */
   inset 0 0 0 1px var(--кромка),         /* тонкий контур по всей форме */
   var(--тень);
 transition:transform .12s cubic-bezier(.2,.8,.3,1),
            box-shadow .12s cubic-bezier(.2,.8,.3,1),
            filter .12s linear;
 will-change:transform;
}

/* НАЖАТИЕ ДВИГАЕТ КНОПКУ. Один пиксель вниз, тень сжимается, кромка гаснет —
 * ровно то, что делает настоящая клавиша. Больше пикселя уже дёрганно. */
#selection .tools button:active,
#selection .league-bar button:active,
#selection .secondary:active,
#opening .primary:active,
#selection .primary:active{
 transform:translateY(1px);
 box-shadow:
   inset 0 1px 0 #ffffff0f,
   inset 0 0 0 1px var(--кромка),
   0 1px 2px #00000066;
 filter:none;                              /* прежняя игра осветляла — это плоско */
}

/* ── ГЛАВНОЕ ДЕЙСТВИЕ ──────────────────────────────────────────────────── */
/* Золотая кнопка светится собственным светом: тень у неё тёплая, потому что
 * поверхность такого цвета подсвечивает то, на чём лежит. */
#opening .primary,
#selection .primary{
 background:linear-gradient(180deg,#f0c98d,#d3a463 62%,#bb8e50);
 color:#15120d;
 box-shadow:
   inset 0 1px 0 #fff6e2a8,
   inset 0 -1px 0 #7d5a2e66,
   var(--золото-тень);
 letter-spacing:.06em;
 font-weight:700;
}
#opening .primary:active,
#selection .primary:active{
 background:linear-gradient(180deg,#e3ba7e,#c79a5c 62%,#b0854a);
 box-shadow:inset 0 1px 0 #fff0d480, 0 1px 3px #0007;
}

/* ── ШАПКА ─────────────────────────────────────────────────────────────── */
#selection header{
 border-bottom:0;
 padding-bottom:0;
 gap:16px;
}
#selection .brand{line-height:1}
#selection .brand small{color:#8d8f96}

/* РОВНАЯ СЕТКА ВМЕСТО РВАНОЙ. Было пять кнопок в ряд, которые переносились
 * как 3 + 2 и оставляли сироту-иконку на отдельной строке. Сетка из равных
 * долей не переносит ничего и не оставляет дыр при любой ширине. */
#selection .tools{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
 width:100%;
}
#selection .tools button{
 padding:0 6px;
 height:48px;                              /* палец: не меньше 44 */
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:11px;
 letter-spacing:.04em;
 white-space:nowrap;                       /* перенос внутри кнопки — всегда брак */
 color:#d8d5cd;
}
/* ТРИ КОЛОНКИ, А НЕ ЧЕТЫРЕ, И ЭТО ЗАМЕР, А НЕ ВКУС. На четырёх при ширине
 * 390 «НАСТРОЙКИ» обрезалось, «ЗВУК ВКЛ» переносилось в две строки, а иконка
 * всё равно уходила на вторую строку сиротой. На трёх самое длинное слово
 * помещается целиком, а вторая строка заполняется нарочно: «ПРИЁМЫ» берёт
 * две доли, иконка — одну. Пустых клеток не остаётся. */
#selection #help{grid-column:span 2}
#selection #full{font-size:16px;color:var(--gold)}

/* Выпадающие списки — та же поверхность, что у кнопок. Иначе низ экрана
 * остаётся «прежней игрой» рядом с новым верхом. */
#selection select,
#selection input[type=number],
#selection input[type=text]{
 border:0;
 border-radius:12px;
 padding:13px 14px;
 background:linear-gradient(180deg,var(--верх),var(--низ));
 box-shadow:inset 0 1px 0 var(--кромка-ярче), inset 0 0 0 1px var(--кромка), var(--тень);
 color:#f4f1e9;
}

/* ── КОШЕЛЁК ───────────────────────────────────────────────────────────── */
/* Был прочерк вместо числа посреди строки. Число — главное, что тут есть,
 * поэтому оно набрано крупно и заглавным шрифтом игры, а подпись уведена. */
#selection .league-bar{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-top:14px;
 border:0;
}
#selection .league-bar button{
 flex:1;
 display:flex;
 align-items:baseline;
 gap:8px;
 padding:14px 16px;
 font-size:10px;
 letter-spacing:.14em;
 color:#9b9ea4;
 text-align:left;
}
#selection .league-bar button b{
 font:20px/1 var(--display);
 letter-spacing:0;
 color:var(--gold);
}
#selection .league-bar span{font-size:10px;letter-spacing:.14em}
#selection .league-entry a{
 display:inline-block;
 padding:14px 16px;
 font-size:11px;
 letter-spacing:.12em;
 color:var(--gold);
 text-decoration:none;
 border-radius:14px;
 box-shadow:inset 0 0 0 1px var(--кромка);
}

/* ── ФОН ───────────────────────────────────────────────────────────────── */
/* Пустота — часть замысла, а не нехватка содержимого. Снимок стоит внизу и
 * гаснет кверху, чтобы текст лежал на ровном тёмном, а не на фотографии.
 * `background-attachment` нарочно не фиксируется: на iOS это дёргается. */
/* Снимок сделан генератором нарочно почти пустым: одно зерно, тёплый
 * контровой свет и две трети темноты сверху. Он стоит ВНИЗУ и почти целиком
 * погашен слоем поверх — от него остаётся тёплое свечение под содержимым.
 * Так текст лежит на ровном тёмном, а не на фотографии, и при этом экран не
 * выглядит пустым листом.
 *
 * Вес: 26 КБ (WebP 1080 в ширину) против 4,7 МБ у исходного PNG. Задник,
 * который стоит трафика больше, чем весит вся остальная страница, — плохой
 * задник, сколь угодно красивый. */
#selection.screen{
 background:
   linear-gradient(180deg,var(--дно) 0%,#0b0c0fe8 34%,#0b0c0fcf 58%,#0b0c0fe0 100%),
   url(menu-backdrop.webp) bottom center / cover no-repeat,
   var(--дно);
}

/* ── ДЫХАНИЕ ───────────────────────────────────────────────────────────── */
/* Минимализм — это не «мало элементов», а «много воздуха вокруг немногих».
 * Панели ниже по экрану получают ту же поверхность и тот же радиус, чтобы
 * меню не распадалось на верх «нового» и низ «старого». */
#selection #walletPanel,
#selection .bean-harvest,
#selection #prizePanel{
 border-radius:18px;
 border:0;
 background:linear-gradient(180deg,#14161bcc,#0f1115cc);
 box-shadow:inset 0 1px 0 var(--кромка-ярче), inset 0 0 0 1px var(--кромка), var(--тень);
}

@media(prefers-reduced-motion:reduce){
 #selection .tools button,
 #selection .league-bar button,
 #selection .secondary,
 #opening .primary,
 #selection .primary{transition:none}
}

/* ── ПОРЯДОК: ИГРА ПЕРВОЙ ──────────────────────────────────────────────────
 *
 * Это самая важная правка файла, и она не про красоту.
 *
 * Замер до правки: экран меню — 2019 точек содержимого в окне 844. Порядок в
 * разметке такой: заголовок, пять кнопок настроек, полоса кошелька, панель
 * сбора зёрен во весь экран, призовая панель — и только потом бойцы и кнопка
 * боя. То есть игрок, открыв ИГРУ, видит «ЗВУК ВКЛ» и кофейное зерно, а
 * чтобы подраться, должен пролистать два экрана.
 *
 * Порядок переставлен ТОЛЬКО стилями: `order` на колонке. Ни один
 * идентификатор, ни один обработчик, ни одна строка разметки не тронуты —
 * значит, ломаться нечему, и откат — это удаление файла.
 */
#selection.screen{display:flex;flex-direction:column;gap:0}
#selection header{order:0}
#selection .select-heading{order:1;margin:26px 0 14px}
#selection #roster{order:2}
#selection .setup{order:3}
#selection .start-actions{order:4}
#selection .league-bar{order:5;margin-top:26px}
#selection #walletPanel{order:6}
#selection #prizePanel{order:7}
#selection #leagueStatus{order:8}
#selection footer{order:9;margin-top:auto;padding-top:22px}

/* Зерно было почти в пол-экрана. Побочная механика не должна быть крупнее
 * бойцов: она остаётся на месте и работает, но перестаёт кричать. */
#selection .bean-harvest button img{max-width:min(46vw,190px);height:auto}

/* ── ЛИНИИ ─────────────────────────────────────────────────────────────────
 *
 * По экрану шли золотые волосяные линейки — по одной на каждый блок. Золото
 * в интерфейсе стоит дорого: если им отчёркнут КАЖДЫЙ раздел, оно перестаёт
 * значить «важное» и становится просто узором. Здесь золото остаётся ровно
 * у двух вещей — у имени игры и у главного действия, — а разделители уходят
 * в ту же еле заметную кромку, что и у поверхностей. */
#selection hr,
#selection .divider,
#selection .setup{border-color:var(--кромка)}
#selection .setup{border-top:1px solid var(--кромка);border-bottom:0}
#selection .arena-pick,
#selection .stake-box,
#selection [class*="box"],
#selection fieldset{
 border:0;
 border-radius:18px;
 box-shadow:inset 0 0 0 1px var(--кромка);
 overflow:hidden;
}

/* Вкладки режимов: подчёркивание вместо рамки, активная — золотом. Так уже
 * было задумано в игре, здесь только выровнен ритм и убран лишний контур. */
#selection .segmented{border-bottom:1px solid var(--кромка);gap:0}
#selection .segmented button{
 border-radius:0;
 background:transparent;
 box-shadow:none;
 min-height:46px;
 letter-spacing:.08em;
}
#selection .segmented button:active{transform:none;box-shadow:none}
#selection .segmented button.active{box-shadow:inset 0 -2px 0 var(--gold)}

/* ── ЗАСТАВКА ──────────────────────────────────────────────────────────────
 * Единственное действие на экране обязано выглядеть как единственное. */
#opening .primary{
 border-radius:16px;
 padding:19px 24px;
 font-size:16px;
 width:100%;
}

/* spectacle.css */
/* Зрелищность экрана боя (владелец 10.10.2026, пункты 38 и 40). */
/* 38. Полоски жизни: удар виден на самой полоске — она вспыхивает красным,
   отнятая часть сначала горит красным и только потом тает. Полоска на месте:
   интерфейс от удара не дрожит (закон 35, разбор MK от владельца 15.10.2026). */
#hud .health{position:relative}
#hud .health.удар .health-track{box-shadow:0 0 0 2px #ff4d3d,0 0 14px #ff4d3d99}
#hud .health.удар .damage-trail{background:#ff5a3c;opacity:.95}
#hud .health-track{height:16px}
#hud .health-track #php,#hud .health-track #ehp{background-image:linear-gradient(180deg,#ffffff55 0,#ffffff00 45%,#00000033 100%)!important;transition:width 90ms linear}
/* Лицо бойца у полоски, из его же кадра: краснеет при ударе. */
#hud .лицо{display:block;position:absolute;flex:none;aspect-ratio:1/1;box-sizing:border-box;top:-6px;width:46px;height:46px;border-radius:50%;border:2px solid var(--акцент,#ffd77a);background:#0a1018;overflow:hidden;box-shadow:0 2px 10px #0009}
#hud .health.left{padding-left:58px!important}#hud .health.right{padding-right:58px!important}
#hud .health.left .лицо{left:6px}#hud .health.right .лицо{right:6px}
#hud .лицо canvas{width:100%;height:100%;display:block}
#hud .health.удар .лицо{filter:sepia(1) saturate(4) hue-rotate(-30deg) brightness(.9)}
/* Счёт раундов кофейными зёрнами вместо точек. */
#hud .зерно{display:inline-block;width:12px;height:16px;margin:0 2px;border-radius:50%/45%;background:#3a2417;border:1px solid #ffffff40;transform:rotate(18deg);position:relative;vertical-align:middle}
#hud .зерно::after{content:'';position:absolute;left:5px;top:2px;width:1.5px;height:11px;border-radius:2px;background:#0006}
#hud .зерно.есть{background:radial-gradient(circle at 35% 30%,#d99b64,#7a4a26 70%);border-color:#ffd77a;box-shadow:0 0 8px #ffb44a}
@media(max-height:500px),(max-width:700px){#hud .лицо{width:36px;height:36px;top:2px}#hud .health.left{padding-left:46px!important}#hud .health.right{padding-right:46px!important}#hud .health.left .лицо{left:4px}#hud .health.right .лицо{right:4px}}

/* 40. Окно победы как постер: крупный победитель, цифры боя крупно. */
dialog.постер{background:radial-gradient(120% 90% at 50% 0%,#3a2010 0%,#120a06 55%,#07070a 100%);border:2px solid #ffd77a;box-shadow:0 0 60px #ffb44a55}
dialog.постер #modalTitle{font-size:clamp(40px,9vw,72px);letter-spacing:.06em;color:#ffe9b0;text-shadow:0 0 24px #ffb44a,0 4px 0 #6a3a12}
dialog.постер.поражение{border-color:#8a2d2d;box-shadow:0 0 50px #ff3d3d33;background:radial-gradient(120% 90% at 50% 0%,#2a0e0e 0%,#0d0707 60%,#07070a 100%)}
dialog.постер.поражение #modalTitle{color:#ffb3a8;text-shadow:0 0 20px #ff3d3d}
dialog.постер .result-portrait{max-height:34vh;filter:drop-shadow(0 0 22px #ffb44a88);animation:постер-выход .5s ease-out both}
dialog.постер .цифры{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
dialog.постер .цифры div{min-width:84px;padding:6px 10px;border:1px solid #ffd77a55;border-radius:6px;background:#0007}
dialog.постер .цифры b{display:block;font-size:24px;color:#ffe9b0}
dialog.постер .цифры small{font-size:11px;letter-spacing:.08em;color:#d9c3a0}
dialog.постер .bank-result{font-size:22px}
@keyframes постер-выход{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){dialog.постер .result-portrait{animation:none}}

#hud .лицо img.лицо-фото{width:100%;height:100%;object-fit:cover;display:block}
/* Кнопки окна итога всегда на виду. Телефон боком — 390 точек высоты, и
   «ЧЕМПИОН» с цифрами боя выше экрана: единственная кнопка «ВЫБРАТЬ СЛЕДУЮЩИЙ
   ТУР» уходила под край, а окно не показывало, что его надо листать (прогон
   турнира 15.10.2026, tools/tower-e2e.mjs). Кнопки прилипают к низу окна,
   крупные заголовки на низком экране меньше. */
dialog #modalButtons{position:sticky;bottom:0;z-index:1;margin-top:12px;padding:10px 0 6px;background:linear-gradient(180deg,#07070a00 0,#07070ae6 22%,#07070af2 100%)}
@media (max-height:520px){
 dialog.постер #modalTitle{font-size:clamp(30px,7vh,48px)}
 .medal{font-size:44px}
 dialog.постер .result-portrait{max-height:26vh}
}

/* mk-screens.css */
/* ЭКРАН ВЫБОРА БОЙЦА И БАШНЯ В СТИЛЕ MORTAL KOMBAT (этап 4б плана, 12.10.2026).
 *
 * Выбор: сетка лиц 5×3 (четырнадцать бойцов и запертая клетка со знаком
 * вопроса) и выбранный боец в полный рост — витрина (#selectStage, кадры
 * ролика входа, см. select-screen.mjs). Рамка выбора мигает, как курсор MK.
 * Башня: столб лиц соперников на огненном фоне — лестница поднимается слева
 * направо; пройденные лица гаснут, текущий горит золотом с именем и ареной,
 * будущие закрыты знаком вопроса.
 *
 * Фоны: public/select-wall.webp и public/tower-fire.webp — gpt_image_2_5
 * (docs/assets/clips/extras.md). Огонь и искры поверх — CSS, при «меньше
 * движения» они стоят, рамка не мигает.
 *
 * Ни один идентификатор и обработчик не тронут: файл только переопределяет
 * вид; убрать его из index.html — и экраны вернутся к прежнему виду. Слой боя
 * (kombat-hud.css) остаётся последним.
 */

/* ── ВЫБОР ─────────────────────────────────────────────────────────────── */
#selection[data-page="hero"]{
 background:linear-gradient(180deg,#07070acc,#07070a55 45%,#07070a00 70%),url('select-wall.webp') center/cover no-repeat #07070a;
}
#menu-hero{
 display:grid;
 grid-template-columns:minmax(150px,1fr) minmax(0,1.25fr);
 grid-template-rows:auto minmax(0,1fr) auto auto;
 grid-template-areas:"heading heading" "stage roster" "info roster" "next next";
 column-gap:14px;row-gap:4px;align-content:start;
 padding:4px 0 10px;
}
#menu-hero .select-heading{grid-area:heading;margin:0 0 4px;align-items:center}
#menu-hero .select-heading h1{font-size:clamp(22px,3.4vw,40px);letter-spacing:2px;color:#f3e6cf;text-shadow:0 2px 0 #000,0 0 18px #c8893366}
#menu-hero .select-heading h1 span{color:#f6c15a}
#menu-hero .eyebrow{display:block;color:#d8a65a}
#menu-hero #record{color:#b9ab96;text-shadow:0 1px 0 #000}

/* Витрина: боец стоит на «полу» холста (9/10 высоты), под ним пятно света. */
#selectStage{grid-area:stage;position:relative;min-height:0;min-width:0;display:flex;align-items:flex-end;justify-content:center}
#selectStage canvas{width:100%;height:100%;object-fit:contain;object-position:bottom center;position:relative;z-index:1;filter:drop-shadow(0 6px 10px #000c)}
#selectStage .stage-floor{position:absolute;left:8%;right:8%;bottom:6%;height:18%;border-radius:50%;background:radial-gradient(ellipse at center,#f6b04a33 0,#f6b04a12 40%,#0000 70%);filter:blur(6px);pointer-events:none}

/* Табличка с именем под витриной: имя золотом, роль — цветом бойца. */
#menu-hero .hero-info{grid-area:info;display:block;padding:2px 0 0;text-align:center;min-width:0}
#menu-hero .hero-info h2{font:clamp(22px,3vw,40px) var(--display);letter-spacing:2px;margin:0;color:#f6d27a;text-shadow:0 2px 0 #3a2200,0 0 16px #f6b04a66;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu-hero .hero-info p{font-size:11px;letter-spacing:3px;margin:3px 0 0}
#menu-hero #heroProfile{display:flex;justify-content:center;gap:14px;font-size:10px;color:#c7b8a0;margin-top:4px;letter-spacing:1px;flex-wrap:wrap}
#menu-hero #heroCombo{display:none}

/* Сетка лиц: квадратные плитки в тёмных рамах, без подписей и номеров —
 * имя говорит табличка витрины и диктор. */
#menu-hero #roster{grid-area:roster;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-content:center;align-self:center;min-height:0;min-width:0}
#menu-hero .card,#menu-hero .card:nth-child(n){height:auto;width:100%;aspect-ratio:1/1;grid-column:auto;border:2px solid #4b3824;border-radius:3px;background:#000!important;box-shadow:inset 0 0 0 1px #000,0 3px 8px #000c;padding:0;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
#menu-hero .card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;background:#000!important;filter:saturate(.9) contrast(1.05)}
#menu-hero .card .label,#menu-hero .card .index{display:none}
#menu-hero .card:hover{border-color:#9b7a4a;transform:translateY(-1px)}
#menu-hero .card.selected{border-color:#f6d27a;box-shadow:inset 0 0 0 1px #fff8,0 0 0 2px #f6d27a,0 0 22px #f6b04acc;z-index:2;animation:курсор-выбора .6s steps(2,end) infinite}
#menu-hero .card.selected>img{filter:saturate(1.05) contrast(1.08) brightness(1.06)}
/* Босс до прохождения «МАСТЕРА»: лицо скрыто, знак вопроса (game.js, обновитьБосса). */
#menu-hero .card .замок{display:none}
#menu-hero .card.locked{background:#0b0a0c!important;border-style:dashed;border-color:#3a2d1f;box-shadow:inset 0 0 0 1px #000;cursor:default}
#menu-hero .card.locked>img{display:none}
#menu-hero .card.locked .замок{display:grid;place-items:center;position:absolute;inset:0;color:#6c5536;font:clamp(26px,4vw,52px) var(--display);text-shadow:0 0 10px #f6b04a33}
#menu-hero .card.locked:hover{transform:none;border-color:#3a2d1f}
@keyframes курсор-выбора{50%{border-color:#fff;box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #fff,0 0 26px #ffe9b0}}
#menu-hero>.primary{grid-area:next;width:100%;margin-top:6px}

/* Ландшафт телефона: витрина и табличка слева, сетка справа, всё в один
 * экран без прокрутки — размер плитки идёт от высоты. */
@media(orientation:landscape){
 #menu-hero #roster{height:100%;grid-template-rows:repeat(3,minmax(0,1fr));justify-content:center;grid-template-columns:repeat(5,auto)}
 #menu-hero .card,#menu-hero .card:nth-child(n){width:auto;height:100%;aspect-ratio:1/1;justify-self:center}
}
@media(orientation:landscape) and (max-height:500px){
 #menu-hero{row-gap:2px;padding:2px 0 6px;grid-template-columns:minmax(140px,.7fr) minmax(0,1.6fr)}
 #menu-hero .select-heading{margin:0}
 #menu-hero .select-heading h1{font-size:20px}
 #menu-hero #record{display:none}
 #menu-hero .hero-info{display:block;padding:0}
 /* combat-polish.css прячет имя и роль на коротком экране: здесь они нужны —
  * табличка под витриной и есть подпись выбранного бойца. */
 #menu-hero .hero-info h2,#menu-hero .hero-info p{display:block}
 #menu-hero .hero-info h2{font-size:22px}
 /* Полоса кошелька на странице бойца отнимала четверть высоты: зёрна и DOFF
  * есть на вкладке «ЗЁРНА», а здесь место нужно лицам. */
 #selection[data-page="hero"] .league-bar{display:none}
 #menu-hero .hero-info p{font-size:9px;letter-spacing:2px;margin-top:1px}
 #menu-hero #heroProfile,#menu-hero #heroCombo{display:none}
 #menu-hero>.primary{padding:9px;font-size:12px;margin-top:2px}
}
/* Портрет: витрина сверху, сетка под ней на всю ширину. Колонка, а не
 * сетка: у вложенной сетки плиток с aspect-ratio строка «auto» внешней сетки
 * считалась по содержимому без учёта ширины и выходила вдвое ниже плиток
 * (снимок 12.10.2026) — плитки наезжали на имя и кнопку. */
@media(orientation:portrait){
 #menu-hero{display:flex;flex-direction:column;gap:6px}
 #menu-hero .select-heading{order:0}
 #selectStage{order:1;flex:none;height:38vh;min-height:220px}
 #menu-hero .hero-info{order:2;padding:4px 0 8px}
 #menu-hero #roster{order:3;flex:none;height:auto;align-self:stretch}
 #menu-hero>.primary{order:4}
}
@media(prefers-reduced-motion:reduce){
 #menu-hero .card.selected{animation:none}
 #menu-hero .card{transition:none}
}

/* ── БАШНЯ ──────────────────────────────────────────────────────────────── */
#ladderScreen{
 position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0;
 padding:10px max(14px,var(--tg-safe-left,0px)) max(10px,var(--tg-safe-bottom,0px));
 background:linear-gradient(180deg,#000000d9 0,#00000066 35%,#0000 60%),url('tower-fire.webp') center bottom/cover no-repeat #050406;
}
/* Искры поднимаются, пламя дышит. Два слоя гradientов, ни одной картинки. */
#ladderScreen::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background:radial-gradient(circle,#ffc06a 0 1.2px,#0000 2px) 0 0/97px 151px,radial-gradient(circle,#ff7a1a 0 1px,#0000 1.8px) 37px 61px/131px 203px,radial-gradient(circle,#ffe2a8 0 .8px,#0000 1.4px) 70px 20px/173px 257px;
 opacity:.75;animation:искры-башни 9s linear infinite;mix-blend-mode:screen}
#ladderScreen::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;z-index:1;
 background:radial-gradient(ellipse at 15% 100%,#ff6a1a4d,#0000 55%),radial-gradient(ellipse at 55% 100%,#ffb03a40,#0000 50%),radial-gradient(ellipse at 88% 100%,#ff4a0a4d,#0000 55%);
 transform-origin:bottom;animation:пламя-башни 1.7s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes искры-башни{to{background-position:0 -604px,37px -751px,70px -1008px}}
@keyframes пламя-башни{from{transform:scaleY(1);opacity:.8}to{transform:scaleY(1.18);opacity:1}}
#ladderScreen>*{position:relative;z-index:2}
.ladder-header{gap:12px;flex:none}
.ladder-header h1{font-size:clamp(26px,4vw,46px);margin:4px 0;color:#f3e6cf;letter-spacing:2px;text-shadow:0 2px 0 #000,0 0 18px #ff8a2a66}
.ladder-header .eyebrow{color:#f6c15a;text-shadow:0 1px 0 #000}
#tourProgress{font:clamp(18px,3vw,28px) var(--display);color:#f6d27a;text-shadow:0 1px 0 #000,0 0 12px #f6b04a88;letter-spacing:1px}
#ladderList{flex:1;min-height:0;margin:6px 0;display:flex;align-items:flex-end;justify-content:center;gap:4px;--подъём:clamp(8px,2.4vh,18px);padding:30px 28px 10px}
#ladderList .rung{position:relative;flex:0 1 calc((100% - 13*4px)/14);max-width:92px;aspect-ratio:1/1;padding:0;display:block;
 border:2px solid #4b3824;border-radius:3px;background:#0b0908;box-shadow:inset 0 0 0 1px #000,0 6px 14px #000d;opacity:1;
 transform:translateY(calc(var(--n,0)*-1*var(--подъём)))}
#ladderList .rung-face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
#ladderList .rung img{width:100%;height:100%;object-fit:cover;object-position:center;background:#000;border:0;flex:none}
#ladderList .rung-face b{font:clamp(22px,4vw,44px) var(--display);color:#8a6a3c;text-shadow:0 0 12px #ff9a3a66}
#ladderList .rung-n{display:none}
#ladderList .rung.пройден{opacity:.55;border-color:#2e2419}
#ladderList .rung.пройден img{filter:grayscale(.85) brightness(.7)}
#ladderList .rung.пройден::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font:clamp(20px,3.5vw,40px) var(--display);color:#f6d27a;text-shadow:0 0 10px #000}
#ladderList .rung.скрыт{background:#0a0809 radial-gradient(circle at 50% 40%,#2a1c10,#0a0809 70%)}
#ladderList .rung.текущий{border-color:#f6d27a;box-shadow:inset 0 0 0 1px #fff8,0 0 0 2px #f6d27a,0 0 26px #ff9a3acc;z-index:3;
 transform:translateY(calc(var(--n,0)*-1*var(--подъём) - 6px)) scale(1.4);animation:курсор-башни .7s steps(2,end) infinite}
@keyframes курсор-башни{50%{border-color:#fff;box-shadow:inset 0 0 0 1px #fff,0 0 0 2px #fff,0 0 30px #ffe9b0}}
#ladderList .rung.финал{border-color:#8a2a12}
#ladderList .rung.финал.скрыт .rung-face b{color:#d85a2a}
/* Имя соперника — табличкой в шапке (#tourNext), а не над плиткой: у крайних
 * ступеней табличка уходила за край экрана. На плитке текст остаётся для
 * чтения вслух, но не виден. */
#ladderList .rung .rung-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#tourNext{display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin-top:4px;padding:5px 16px;background:#000c;border:1px solid #f6d27a99;box-shadow:0 4px 14px #000,0 0 18px #ff8a2a33}
#tourNext:empty{display:none}
#tourNext span{font-size:9px;letter-spacing:3px;color:#f6c15a}
#tourNext strong{font:clamp(20px,3vw,30px) var(--display);letter-spacing:1px;color:#fff;text-shadow:0 1px 0 #000;line-height:1.05}
#tourNext small{font-size:10px;letter-spacing:2px;color:#f6d27a}
.ladder-header>div{text-align:center}
#enterFight{flex:none;margin:0 auto}
@media(orientation:portrait){
 #ladderList{flex-wrap:wrap-reverse;align-content:center;gap:6px;padding:20px 10px;--подъём:0px}
 #ladderList .rung{flex:0 0 calc((100% - 6*6px)/7);max-width:none}
 #ladderList .rung.текущий{transform:scale(1.3)}
}
@media(prefers-reduced-motion:reduce){
 #ladderScreen::before,#ladderScreen::after{animation:none}
 #ladderList .rung.текущий{animation:none}
}

/* kombat-hud.css */
/* ЭКРАН БОЯ В ДУХЕ MORTAL KOMBAT TRILOGY (этап 1, закон 19).
   Полосы жизни — толстые, в рамке, зелёное поверх красного, со вспышкой
   потерянного куска. Надписи — крупные, с обводкой и тенью «в глубину»,
   влетают ударом, а не проявляются. Счётчик серии — «N УДАРОВ / X% УРОНА»
   на стороне того, кто бьёт.
   Слой стоит последним и только переопределяет: убери файл — вернётся
   прежний вид, логика боя от него не зависит. */

/* ── Полосы жизни ───────────────────────────────────────────────── */
#game #hud .health .health-track{
 height:15px;margin-top:4px;background:#5c0a0a;
 border:2px solid #c9a35a;border-radius:2px;
 box-shadow:0 0 0 1px #000,0 3px 10px #000a,inset 0 2px 4px #000c;
}
#game #hud .health .health-track #php,#game #hud .health .health-track #ehp{
 background:linear-gradient(#7dff6a 0,#2fce2c 35%,#159a16 70%,#0b6b0d 100%)!important;
 box-shadow:inset 0 1px 0 #ffffff80,inset 0 -2px 0 #0004;
 transition:width .08s linear;
}
#game #hud .health .health-track #php.мало,#game #hud .health .health-track #ehp.мало{
 background:linear-gradient(#ffd36a 0,#f0a21c 40%,#c2410c 100%)!important;
 animation:жизнь-на-исходе .55s ease-in-out infinite alternate;
}
#game #hud .health .health-track .damage-trail{background:linear-gradient(#fff 0,#ffe27a 60%,#e8b330 100%);opacity:.95}
/* Блик стекла поверх полосы: без него заливка читается плоским прямоугольником. */
#game #hud .health .health-track::after{content:'';position:absolute;inset:0 0 55% 0;z-index:2;background:linear-gradient(#ffffff38,#fff0);pointer-events:none}
#game #hud .health>div:first-child b{font:400 15px/1 var(--display);letter-spacing:1.5px;color:#fff;text-transform:uppercase;
 -webkit-text-stroke:.6px #000;text-shadow:2px 2px 0 #000,0 0 6px #000}
#game #hud .timer strong{font-family:var(--display);color:#ffe7a3;-webkit-text-stroke:1px #2a1300;text-shadow:2px 2px 0 #000,0 0 10px #ff9a2a66}
#game[data-layout="landscape"] #hud .health .health-track{height:12px;margin-top:3px;border-width:1.5px}
#game[data-layout="portrait"] #hud .health .health-track{height:11px}
@keyframes жизнь-на-исходе{from{filter:brightness(1)}to{filter:brightness(1.45)}}

/* ── Объявления ─────────────────────────────────────────────────── */
/* Надписи боя — НАД холстом арены. У #arena z-index 1, у надписей его не было:
   «В БОЙ!», «РАУНД», счётчик серии лежали под картинкой и видны были только
   хвостами за её краем (снимок 12.10.2026: от «2 УДАРА / 9% УРОНА» соперника
   торчало «РА / НА» справа от арены). Ниже панели жизни (5) и окон (7). */
#game #announcement,#game #subAnnouncement,#game #combo,#game #enemyCombo,#game #hitCallout{z-index:4}
#game #announcement{font-family:var(--display);color:#ffd27a;letter-spacing:4px;
 -webkit-text-stroke:2px #2b0b00;
 text-shadow:3px 3px 0 #5a1d00,6px 6px 0 #1d0800,0 0 24px #000}
#game #announcement[data-cue]:not(:empty){animation:удар-надписи .32s cubic-bezier(.2,1.6,.4,1) both}
/* «В БОЙ!» — красное, огромное, как FIGHT! в MK. */
#game #announcement[data-cue="В БОЙ!"]{color:#ff2a1a;font-size:clamp(46px,12vw,140px);top:24%;letter-spacing:6px;
 -webkit-text-stroke:3px #1a0000;
 text-shadow:4px 4px 0 #7a0000,8px 8px 0 #2a0000,0 0 40px #ff2a0099}
/* Добивание и его имя — кровью. */
#game #announcement[data-cue="ЗАВАЛИТЬ"],#game #announcement[data-cue="ПОКАЛЕЧИТЬ"],#game #announcement[data-cue="ДОБЕЙ ЕГО"]{
 color:#e3120b;font-size:clamp(40px,10vw,120px);letter-spacing:5px;-webkit-text-stroke:3px #140000;
 text-shadow:4px 4px 0 #5e0000,8px 8px 0 #200000,0 0 34px #ff000080}
#game #announcement[data-cue="ДОБЕЙ ЕГО"]{animation:удар-надписи .32s cubic-bezier(.2,1.6,.4,1) both,мигает .5s steps(2,end) .32s infinite}
/* «ДОБЕЙ ЕГО» — выше окна выбора добивания: окно стоит по центру экрана, и
   крупная надпись на прежней высоте ложилась прямо на него. */
/* «ДОБЕЙ ЕГО» крупно, как «FINISH HIM!» в образце: от длинной стороны экрана, а не от ширины — в повёрнутом бою ширина окна — узкая сторона телефона. */
#game[data-phase="finish"] #announcement{top:10%;font-size:clamp(34px,7.5vmax,104px)}
#game[data-phase="finish"] #subAnnouncement{top:29%}
#game #subAnnouncement{font-family:var(--display);letter-spacing:4px;color:#fff1cf;text-shadow:2px 2px 0 #000,0 0 8px #000}
/* Титры добивания по образцу UMK3 (закон 33): «ИМЯ ПОБЕДИЛ» белым курсивом
   над названием, «ЗАВАЛИТЬ» — проступающей кровью, «ПОКАЛЕЧИТЬ» — сталью,
   как BRUTALITY. Цвет — заливкой букв, тень — фильтром, чтобы её не было
   видно сквозь прозрачные буквы. */
#game #winnerLine{position:absolute;left:8%;right:8%;top:4%;z-index:5;text-align:center;pointer-events:none;
 font-family:var(--display);font-style:italic;font-size:clamp(16px,3.4vmax,40px);letter-spacing:3px;color:#fff;
 -webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #000,0 0 12px #000}
#game #winnerLine:not(:empty){animation:победил .35s ease-out both}
/* Три строки друг под другом, без нахлёста: победитель, название, имя приёма. */
#game[data-phase="fatality"] #announcement,#game[data-phase="complete"] #announcement{top:calc(4% + 4.6vmax);font-size:clamp(34px,8vmax,96px)}
#game[data-phase="fatality"] #subAnnouncement,#game[data-phase="complete"] #subAnnouncement{top:calc(4% + 14.2vmax)}
#game #announcement[data-cue="ЗАВАЛИТЬ"]{background:linear-gradient(#ff6a50 0%,#e3120b 35%,#8a0000 52%,#d40d0d 70%,#ff3b2a 100%);background-size:100% 260%;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #1a0000;text-shadow:none;
 filter:drop-shadow(4px 4px 0 #3a0000) drop-shadow(0 0 22px #ff000088);animation:кровь-проступает .7s ease-out both,кровь-течёт 2.6s linear .7s infinite}
#game #announcement[data-cue="ПОКАЛЕЧИТЬ"]{background:linear-gradient(#ffffff 0%,#d3d8df 28%,#5d636d 50%,#b4bac3 66%,#eef0f3 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #15181d;text-shadow:none;
 filter:drop-shadow(4px 4px 0 #0b0d10) drop-shadow(0 0 16px #ffffff44);animation:сталь-куётся .55s cubic-bezier(.2,1.5,.4,1) both}
/* «ДОБЕЙ ЕГО» вырастает из глубины, как FINISH HIM! в MK Project, и мигает. */
#game #announcement[data-cue="ДОБЕЙ ЕГО"]{animation:вырастает .42s cubic-bezier(.2,1.5,.4,1) both,мигает .5s steps(2,end) .42s infinite}
/* Уход «ДОБЕЙ ЕГО» спиралью из букв (game.js, разлётНадписи). */
#game .разлёт{position:absolute;left:8%;right:8%;top:10%;z-index:6;text-align:center;pointer-events:none;white-space:nowrap;
 font-family:var(--display);font-size:clamp(34px,7.5vmax,104px);letter-spacing:5px;color:#e3120b;-webkit-text-stroke:3px #140000;
 text-shadow:4px 4px 0 #5e0000,8px 8px 0 #200000}
#game .разлёт span{display:inline-block;animation:спираль .62s cubic-bezier(.45,0,.85,.4) both;animation-delay:calc(var(--i)*22ms)}
@keyframes победил{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}}
@keyframes кровь-проступает{0%{opacity:0;scale:1.18 1.5;translate:0 -18px;filter:blur(6px)}60%{opacity:1;filter:blur(0) drop-shadow(4px 4px 0 #3a0000)}100%{opacity:1;scale:1;translate:0 0}}
@keyframes кровь-течёт{from{background-position:0 0}to{background-position:0 100%}}
@keyframes сталь-куётся{0%{opacity:0;scale:2.2;filter:brightness(3) blur(3px)}55%{opacity:1;scale:.94;filter:brightness(1.6)}100%{opacity:1;scale:1}}
@keyframes вырастает{0%{opacity:0;scale:.2}65%{opacity:1;scale:1.14}100%{opacity:1;scale:1}}
@keyframes спираль{0%{transform:none;opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.25);opacity:0}}
@keyframes удар-надписи{0%{opacity:0;scale:2.6;filter:blur(4px)}55%{opacity:1;scale:.93;filter:blur(0)}100%{opacity:1;scale:1}}
@keyframes мигает{50%{opacity:.25}}

/* ── Счётчик серии ──────────────────────────────────────────────── */
#game #combo,#game #enemyCombo{background:none;border:0;padding:0;
 font:400 24px/1 var(--display);letter-spacing:2px;color:#ffe25a;
 -webkit-text-stroke:1.2px #3a0000;text-shadow:2px 2px 0 #8a0000,4px 4px 0 #2a0000;
 animation:удар-серии .22s cubic-bezier(.2,1.8,.4,1) both}
#game #combo b,#game #enemyCombo b{font-weight:400;font-size:1.9em;color:#fff3a0;margin-right:.12em}
#game #combo small,#game #enemyCombo small{font:400 15px/1 var(--display);letter-spacing:2px;color:#fff;-webkit-text-stroke:.5px #000;text-shadow:2px 2px 0 #000;margin-top:4px}
#game[data-layout="landscape"] #combo,#game[data-layout="landscape"] #enemyCombo{top:26%;font-size:20px}
@keyframes удар-серии{from{scale:1.5;opacity:.2}to{scale:1;opacity:1}}

@media(prefers-reduced-motion:reduce){
 #game #announcement[data-cue]:not(:empty),#game #announcement[data-cue="ЗАВАЛИТЬ"],#game #announcement[data-cue="ПОКАЛЕЧИТЬ"],#game #announcement[data-cue="ДОБЕЙ ЕГО"],#game #winnerLine:not(:empty),#game #combo,#game #enemyCombo,#game #hud .health .health-track #php.мало,#game #hud .health .health-track #ehp.мало{animation:none}
}