/* 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}

/* 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}
#game[data-phase="fatality"] #hud{opacity:.45;transition:opacity 200ms}
#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{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}.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}
#exchangeGold: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}
#tapCoffee .bean-shards{position:absolute;inset:0;pointer-events:none;z-index:2}
@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)}

/* 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}

/* 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}

/* 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]{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%;
}