/* Стиль «Таверна» для экранов вокруг матча. Роли токенов как у темы Telegram, значения свои.
   Тема всегда тёмная, светлая тема Telegram не применяется: светлые экраны не сходятся с таверной. Макет: docs/ui-screens.md */
:root{
  --bg:#1a120c; --bg2:#140e09; --card:#251a12; --fg:#f2e7d6; --hint:#a8957a; --sub:#b9a88f; --sec-h:#c9a77a;
  --accent:#e2a24a; --btn:#c9822f; --btn-ink:#1c1208; --btn2:#3a2a1b; --btn2-ink:#e2a24a; --line:#3a2b1d; --bad:#ef6f5e;
  --ic-green:#7d9a46; --ic-gray:#6e5a46; --ok:#8fbf5a;
  --scene:#1a100a; --hud-bg:rgba(20,14,10,.8); --hud-fg:#f2e7d6; --hud-muted:#c7b49a; --hud-accent:#e2a24a; --hud-bad:#ef6f5e;
  --ink:#3b2a1a; --ink2:#7a5a36;
  --f-display:"Alegreya SC",Georgia,serif; --f-body:"Onest",system-ui,sans-serif;
  --safe-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  color-scheme:dark;
}

/* ---------- экран поверх сцены ---------- */
.screen{position:fixed;inset:0;z-index:10;overflow-y:auto;overscroll-behavior:contain;background:var(--bg2);color:var(--fg);
  font:15px/1.4 var(--f-body);display:flex;flex-direction:column;
  padding:calc(var(--safe-top) + 12px) 0 calc(var(--safe-bottom) + 16px)}
.screen[hidden]{display:none}
.screen.plain{background:var(--bg)}
/* лобби: стол из сцены просвечивает сверху и уходит в фон */
.screen.lobby{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 46%,color-mix(in srgb,var(--bg2) 75%,transparent) 62%,var(--bg2) 72%)}
.screen .wrap{width:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;flex:1}

/* ---------- компоненты в духе telegram-ui: Section, Cell, Placeholder ---------- */
.sec{display:grid;gap:6px;margin:0 16px 18px}
.sec-h{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--sec-h);padding:0 16px}
.sec-f{font-size:12.5px;line-height:1.35;color:var(--hint);padding:0 16px}
.sec-f.ok{color:var(--accent)}
.list{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
/* полупрозрачная плашка поверх сцены: под ней сцена таверны */
.list.glass{background:rgba(28,18,11,.55);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,236,205,.12),0 6px 18px rgba(0,0,0,.25)}
.list.glass .tx b,.list.glass .tx span{color:#f4ead9}
.list.glass .tx small,.list.glass .tx small span{color:#d9c8ad}
.list.glass .af{color:#d9c8ad}
.cell{display:flex;align-items:center;gap:12px;min-height:48px;padding:7px 14px;position:relative;width:100%;
  font:inherit;color:inherit;text-align:left;background:none;border:0}
button.cell{cursor:pointer}
button.cell:active{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.cell + .cell::before{content:"";position:absolute;top:0;right:0;left:56px;border-top:1px solid var(--line)}
.list.plain-rows .cell + .cell::before{left:14px}
.cell .ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff}
.cell .ic svg{width:18px;height:18px}
.cell .tx{flex:1;min-width:0;display:grid}
.cell .tx b{font-weight:400;font-size:16px}
.cell .tx small{color:var(--sub);font-size:13px}
.cell .af{color:var(--hint);display:flex;align-items:center;gap:6px;white-space:nowrap}
.cell .af.v{color:var(--fg);font-variant-numeric:tabular-nums}
.chev::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.6}
.ph{display:grid;justify-items:center;text-align:center;gap:8px;padding:0 28px;margin:auto 0}
.ph h1{margin:0;font:700 24px/1.2 var(--f-display);letter-spacing:.01em;text-wrap:balance}
.ph p{margin:0;color:var(--hint)}
.ava{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none;overflow:hidden;
  background:linear-gradient(180deg,#f2a65a,#d9772f)}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.bot{background:var(--ic-gray)}
.bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--hint) 25%,transparent);overflow:hidden}
.bar i{display:block;height:100%;background:var(--btn);border-radius:3px;transition:width .3s}
.dsp{font-family:var(--f-display);font-weight:700;letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums}
.chip{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--sub);margin-top:auto;padding:12px 16px 0}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.slots{display:flex;justify-content:space-between;gap:4px}
.slot{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:9px;font-weight:600;font-size:13px;color:var(--hint);
  border:2px dashed color-mix(in srgb,var(--hint) 55%,transparent)}
.slot svg{width:100%;height:100%;display:block}
.slot.owned{border:0}
.slot.today{border:2.5px solid var(--btn);color:var(--btn)}
.slots.set .slot{width:44px;height:44px}
.slot.pick{padding:0;background:none;cursor:pointer;border-radius:10px;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s,transform .15s}
.slot.pick.on{box-shadow:0 0 0 2.5px var(--btn);transform:translateY(-3px)}
.tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;font-size:12px;vertical-align:1px;
  background:color-mix(in srgb,var(--btn) 22%,transparent);color:var(--accent)}
.locked .slot{opacity:.45;filter:grayscale(.6)}
.beta-card{padding:14px 14px 13px;display:grid;gap:11px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px)}
.beta-card .hd{display:flex;justify-content:space-between;align-items:baseline}
.beta-card .hd b{font-size:19px}
.beta-card .hd span{font-size:13px;color:var(--hint)}
.ring{position:relative;width:132px;height:132px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0}
.ring .rt{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;line-height:1.1}
.ring .rt small{display:block;font-size:12px;color:var(--hint);font-weight:400}
.linkbox{display:flex;align-items:center;gap:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;padding:10px 12px;margin:20px 16px 0}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.linkbox button{font:500 15px var(--f-body);color:var(--accent);background:none;border:0;padding:6px 0;cursor:pointer}
.linkish{font:500 14px var(--f-body);color:var(--accent);background:none;border:0;padding:8px 0;cursor:pointer}
.score-bars{display:grid;gap:7px;font-size:14px;padding:0 16px 18px}
.score-bars .row{display:flex;justify-content:space-between}
.score-bars .bar{height:8px}
.score-bars .bar.them i{background:var(--hint)}
.medal{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--hint);
  background:color-mix(in srgb,var(--hint) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hint) 35%,transparent)}
.medal.on{color:var(--btn-ink);background:radial-gradient(circle at 35% 30%,#f3c27a,var(--btn) 70%);box-shadow:inset 0 0 0 1.5px #f0b866,0 2px 6px rgba(0,0,0,.35)}
.cell.ach + .cell.ach::before{left:60px}
.cell.ach{padding-top:9px;padding-bottom:9px}
.cell.ach .tx small{line-height:1.3}
.cell.ach .tx small.rare{color:var(--sec-h);font-size:12.5px}
.cell.ach.locked .tx small.rare{color:var(--hint)}
.cell.ach.locked .tx b{color:var(--sub)}
.mini-dice{display:flex;gap:2px;margin-top:3px}
.mini-dice svg{width:14px;height:14px}

/* ---------- кнопки вне Telegram ---------- */
#fallbackBar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;background:var(--bg2);border-top:1px solid var(--line);
  padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
#fallbackBar[hidden]{display:none}
#fallbackBar button{flex:1;font:600 16px var(--f-body);border:0;border-radius:12px;padding:14px 8px;cursor:pointer;background:var(--btn);color:var(--btn-ink)}
#fallbackBar button.sec{background:var(--btn2);color:var(--btn2-ink)}
#fallbackBar button:disabled{opacity:.45}
.has-fallback .screen{padding-bottom:calc(var(--safe-bottom) + 84px)}

/* ---------- свиток комбинаций (матч) ---------- */
.parch{color:var(--ink);background:radial-gradient(120% 80% at 50% 40%,#f6ead0 0%,#ecd9b2 70%,#dcc092 100%);
  box-shadow:inset 0 0 24px rgba(110,70,25,.35),0 10px 30px rgba(0,0,0,.5)}
.combos-sheet{position:fixed;left:8px;right:8px;bottom:0;z-index:6;max-width:464px;margin:0 auto;border-radius:16px 16px 0 0;
  padding:10px 12px calc(14px + var(--safe-bottom));display:grid;gap:8px;transform:translateY(105%);transition:transform .25s ease-out;touch-action:none}
.combos-sheet.open{transform:none}
.combos-sheet .grab{width:38px;height:4px;border-radius:2px;background:rgba(59,42,26,.35);justify-self:center}
.combos-sheet .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.combos-sheet h2{margin:0;font:700 20px var(--f-display)}
.combos-sheet .sub{font-size:14px;color:var(--ink2)}
.combos-shade{position:fixed;inset:0;z-index:5;background:rgba(0,0,0,.25)}
.combos-shade[hidden]{display:none}
.cmb{display:grid;grid-template-columns:1fr 1.3fr;gap:2px 10px}
.cmb .col{display:grid;gap:1px;align-content:start}
.crow{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 8px;border-radius:8px;min-height:34px}
.crow .mini-dice{margin:0}
.crow .mini-dice svg{width:19px;height:19px}
.crow b{font:700 17px var(--f-display);font-variant-numeric:tabular-nums}
.crow.hit{background:rgba(201,130,47,.22);box-shadow:inset 0 0 0 1.5px #c9822f}
.crow .x2{font:600 13px var(--f-body);color:var(--ink2);margin-left:2px}

/* ---------- деньги: кошелёк, пополнение, вывод, столы (web/money.js) ---------- */
.ttl{margin:0 16px 16px;font:700 28px/1.1 var(--f-display);letter-spacing:.01em}
.ph .subnote{font-size:14px;color:var(--hint)}
.ph .big,.money-hero .big{font:700 46px/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums}
.ph .big small{font:500 18px var(--f-body);color:var(--sub)}
.money-hero{display:grid;gap:4px;margin:0 16px 20px}
.money-hero .big{font-size:52px}
.money-hero .cur{color:var(--sub)}
.in{color:var(--ok)!important}
.dim{color:var(--hint)!important}
.medal-lg{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;flex:none}
.medal-lg.ok{color:var(--btn-ink);background:radial-gradient(circle at 35% 30%,#f3c27a,var(--btn) 70%);box-shadow:inset 0 0 0 2px #f0b866,0 4px 14px rgba(0,0,0,.4)}
.medal-lg.wait{color:var(--accent);background:color-mix(in srgb,var(--btn) 14%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--btn) 55%,transparent)}
.medal-lg.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bad) 45%,transparent)}
.ava.ic-coins{background:var(--btn2);color:var(--accent)}
.coin{width:30px;height:30px;flex:none;border-radius:50%;display:inline-block;background-size:100% 100%}
.coin.sm{width:18px;height:18px}
.coin.usdt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2326a17b'/%3E%3Cpath d='M7 7.2h10M12 7.2V18M7.6 11.1c1.3.7 2.8 1 4.4 1s3.1-.3 4.4-1' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.coin.ton{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230098ea'/%3E%3Cpath d='M7.3 7.8h9.4L12 17.4zM12 7.8v9.6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cell .af.v.bal{font-size:20px}
.opic{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--hint) 16%,transparent);color:var(--sub)}
.cell.op-row{min-height:58px}
.cell.op-row + .cell.op-row::before{left:58px}
.st.ok{color:var(--ok)} .st.wait{color:var(--accent)} .st.bad{color:var(--bad)}
.seg{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;gap:3px;margin:0 16px 14px;background:var(--card);border-radius:12px;padding:3px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{height:40px;border:0;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:8px;font:500 15px var(--f-body);color:var(--sub);background:none;cursor:pointer}
.seg button.on{background:var(--btn2);color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--btn) 50%,transparent)}
.flabel{display:block;font-size:13px;color:var(--sub);margin:0 18px 6px}
.amt{margin:0 16px;background:var(--card);border-radius:14px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:10px;box-shadow:inset 0 0 0 1.5px var(--line)}
.amt:focus-within{box-shadow:inset 0 0 0 1.5px var(--btn)}
.amt input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;color:var(--fg);caret-color:var(--accent);padding:0;
  font:700 36px/1.1 var(--f-display);font-variant-numeric:lining-nums tabular-nums}
.amt input::placeholder{color:var(--hint)}
.amt .cur{font:500 17px var(--f-body);color:var(--sub)}
.amt .all{font:600 14px var(--f-body);color:var(--accent);background:var(--btn2);border:0;border-radius:8px;padding:9px 12px;cursor:pointer}
.ferr{color:var(--bad);font-size:13.5px;line-height:1.35;margin:6px 18px 0}
.qs{display:flex;gap:8px;margin:10px 16px 18px}
.qs button{flex:1;height:40px;border:0;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:500 15px var(--f-body);color:var(--fg);cursor:pointer}
.qs button.on{box-shadow:inset 0 0 0 1.5px var(--btn);color:var(--accent)}
.sum .cell{min-height:44px}
.sum .cell.tot .tx b,.sum .cell.tot .af{font-weight:600;color:var(--fg)}
.banner{margin:0 16px 14px;border-radius:12px;padding:11px 14px;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35;
  background:color-mix(in srgb,var(--bad) 12%,var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 40%,transparent)}
.banner svg{flex:none;color:var(--bad);margin-top:1px}
.balrow{display:flex;justify-content:space-between;align-items:center;margin:0 16px 12px;padding:0 2px;color:var(--sub)}
.balrow b{color:var(--fg);font-weight:600}
.fchips{display:flex;gap:6px;margin:0 16px 16px;overflow-x:auto;scrollbar-width:none}
.fchips button{flex:none;height:36px;padding:0 14px;border:0;border-radius:18px;font:500 14px var(--f-body);color:var(--sub);background:var(--card);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.fchips button.on{background:var(--btn2);color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--btn) 60%,transparent)}
.cell.trow{min-height:62px}
.cell.trow + .cell.trow::before{left:66px}
.cell.own{box-shadow:inset 3px 0 0 var(--btn)}
.stk{display:grid;justify-items:end;font:700 22px/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;color:var(--fg)}
.stk small{font:500 11.5px var(--f-body);color:var(--hint);margin-top:2px}
.sit{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:10px;font:700 14px var(--f-body);background:var(--btn);color:var(--btn-ink);cursor:pointer}
.sit.s{background:var(--btn2);color:var(--btn2-ink)}
.tcard{width:190px;border-radius:14px;padding:10px;display:grid;gap:8px;
  background:repeating-linear-gradient(90deg,#5a3720 0 7px,#633e24 7px 15px,#56341e 15px 19px);box-shadow:inset 0 0 0 1px rgba(255,220,170,.12),0 6px 14px rgba(0,0,0,.4)}
.tc-board{border-radius:9px;padding:14px 6px 10px;display:grid;justify-items:center;color:#2a1a0c;
  background:linear-gradient(180deg,#b98552,#a06d3e);box-shadow:inset 0 0 0 4px #4a2b16,inset 0 3px 10px rgba(0,0,0,.35)}
.tc-board b{font:700 44px/1 var(--f-display);font-variant-numeric:lining-nums}
.tc-board small{font:600 12px var(--f-body);opacity:.8}
.tc-goal{text-align:center;font-size:13px;color:#f1dfc2}

@media (prefers-reduced-motion:reduce){.combos-sheet,.bar i{transition:none}}
/* проверка бросков: экран в приложении и /fair.html */
.fair-verdict{margin:0 16px 18px;padding:14px 16px;border-radius:12px;font-weight:600;box-shadow:inset 0 0 0 1px var(--line);background:var(--card)}
.fair-verdict.ok{color:var(--ok)} .fair-verdict.bad{color:var(--bad)}
.fair-mark{font-weight:700;width:18px;text-align:center;flex:none} .fair-mark.ok{color:var(--ok)} .fair-mark.bad{color:var(--bad)} .fair-mark.na{color:var(--hint)}
.fair-faces{font-variant-numeric:tabular-nums;letter-spacing:.08em}
.fair-how{margin:0;padding:12px 16px 12px 34px;font-size:14.5px;line-height:1.45} .fair-how li{margin:4px 0}
.cell .tx code{font:12px/1.4 ui-monospace,Menlo,monospace;word-break:break-all;color:var(--sub)}
.fair-lead{color:var(--sub);margin:0 16px 16px;font-size:14.5px}