:root{
  --bg:#0b0f14;
  --card:#121926;
  --card2:#0f151f;
  --txt:#e8eef7;
  --mut:#93a4ba;
  --acc:#1fd18a;
  --br:#243247;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --r:18px;

  /* reserved space for bottom bar */
  --navH: 98px; /* WIP02: prevent bottom-nav overlap */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 20% -10%, #132235 0%, var(--bg) 60%);
  color:var(--txt);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  padding:14px 12px calc(var(--navH) + 24px + env(safe-area-inset-bottom)) 12px;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:12px;
}
.brand{font-weight:800;letter-spacing:.12em}
.meta{
  color:var(--mut);
  font-size:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  text-align:right;
}

.grid{display:flex;flex-direction:column;gap:12px}

.card{
  background:linear-gradient(180deg, var(--card) 0%, var(--card2) 100%);
  border:1px solid var(--br);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:12px;
}
.card.wide{grid-column:1/-1}
.h{font-weight:700;margin-bottom:10px}

.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px}
.k{color:var(--mut)}
.v{font-weight:600}

.row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}

.btn{
  border:1px solid var(--br);
  background:#0c1320;
  color:var(--txt);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
}
.btn:hover{border-color:var(--acc)}
.btn:active{transform:translateY(1px)}

.inp{
  width:120px;
  border:1px solid var(--br);
  background:#0c1320;
  color:var(--txt);
  padding:10px 10px;
  border-radius:14px;
}
.lbl{color:var(--mut)}
.hint{color:var(--mut);font-size:12px;margin-top:8px}

.pre{
  margin:0;
  background:#08101b;
  border:1px solid var(--br);
  border-radius:14px;
  padding:10px;
  overflow:auto;
  max-height:220px;
  color:#cfe1ff;
}

.is-hidden{display:none !important}

/* ===== Compact Bottom Nav (top apps style) ===== */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:transparent; /* IMPORTANT: no giant strip */
  pointer-events:none;    /* only inner bar clickable */
}

.nav-inner{
  max-width:560px;
  margin:0 auto;
  display:flex;
  gap:2px;
  padding:8px 6px;
  background:rgba(8,12,18,.86);
  border:1px solid rgba(36,50,71,.75);
  border-radius:20px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  pointer-events:auto;
}

.nav-btn{
  flex:1;
  border:0;
  background:transparent;
  color:var(--mut);
  padding:8px 0;
  border-radius:16px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  min-height:44px; /* tap target */
}

.nav-btn .ico{
  width:28px;height:28px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--mut);
  background:rgba(12,19,32,.35);
  border:1px solid rgba(36,50,71,.7);
}

.nav-btn .lbl{
  font-size:10px;
  letter-spacing:.02em;
  color:var(--mut);
}

.nav-btn.is-active .ico{
  color:var(--acc);
  background:rgba(31,209,138,.12);
  border-color:rgba(31,209,138,.45);
}
.nav-btn.is-active .lbl{ color:var(--txt); }
.nav-btn.is-active::after{
  content:"";
  width:6px;height:6px;
  border-radius:6px;
  background:var(--acc);
  margin-top:2px;
}

/* desktop: keep bar centered, still compact */
@media (min-width: 980px){
  .wrap{max-width:980px}
  .nav-inner{max-width:980px}
  .grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .card.wide{grid-column:1/-1}
}


/* ===== UIAPP_WIP05_DETAILS_TOGGLE_V1 ===== */
.hrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.btn.sm{
  padding:7px 10px;
  border-radius:12px;
  font-size:12px;
  min-height:34px;
}
.pre{
  position:relative;
}
.pre.is-collapsed{
  max-height:120px;
}
.pre.is-collapsed::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:54px;
  background:linear-gradient(to bottom, rgba(8,16,27,0), rgba(8,16,27,1));
  pointer-events:none;
  border-radius:14px;
}


/* ===== UIAPP_WIP06_HUMAN_RESULT_CARD_V1 ===== */
.res-head{
  margin:0 0 10px 0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(36,50,71,.75);
  background:rgba(8,12,18,.55);
  color:var(--txt);
  font-weight:700;
  letter-spacing:.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* UIAPP_WIP07_COLLAPSE_DETAILS_DEFAULT_V2 */
.mtr-details.is-hidden{ display:none !important; }


/* ===== UIAPP_WIP08_GAMES_UX_V1 ===== */
.stake-box{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.stake-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.inp.inp-lg{
  width:140px;
  padding:12px 12px;
  border-radius:16px;
  font-size:18px;
  font-weight:800;
}
.stake-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
}
.stake-btn{
  border:1px solid var(--br);
  background:#0c1320;
  color:var(--txt);
  padding:12px 0;
  border-radius:14px;
  cursor:pointer;
  min-height:46px;
  font-size:16px;
  font-weight:900;
}
.stake-btn:hover{border-color:var(--acc)}
.stake-btn:active{transform:translateY(1px)}
.stake-btn.is-on{
  border-color:rgba(31,209,138,.65);
  background:rgba(31,209,138,.12);
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.btn.cta{
  padding:14px 12px;
  border-radius:16px;
  font-size:16px;
  font-weight:900;
  min-height:54px;
  border-color:rgba(31,209,138,.45);
  background:linear-gradient(180deg, rgba(31,209,138,.18), rgba(12,19,32,.85));
}
@media (max-width: 380px){
  .stake-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cta-grid{grid-template-columns:1fr}
  .inp.inp-lg{width:120px}
}


/* ===== UIAPP_WIP09_HEADER_CHIPS_V1 ===== */
.meta .chip{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(36,50,71,.75);
  background:rgba(12,19,32,.35);
  color:var(--mut);
  line-height:1.2;
}
.meta .chip.ok{
  color:var(--acc);
  border-color:rgba(31,209,138,.45);
  background:rgba(31,209,138,.10);
}
.meta .chip.warn{
  color:#ffd36a;
  border-color:rgba(255,211,106,.45);
  background:rgba(255,211,106,.10);
}
.meta .chip.stop{
  color:#ff6b6b;
  border-color:rgba(255,107,107,.45);
  background:rgba(255,107,107,.10);
}


/* UIAPP_WIP10_QUESTS_UI_V1 */
.mtr-quests{ display:flex; flex-direction:column; gap:10px; }
.mtr-quest{ border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:10px; }
.mtr-quest .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mtr-quest .title{ font-weight:700; font-size:14px; line-height:1.2; }
.mtr-quest .meta{ opacity:0.85; font-size:12px; white-space:nowrap; }
.mtr-quest .bar{ margin-top:8px; height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
.mtr-quest .bar > i{ display:block; height:100%; width:0%; background:rgba(120,255,120,0.35); }
.mtr-quest .row{ margin-top:10px; display:flex; gap:8px; align-items:center; justify-content:space-between; }
.mtr-quest .tag{ font-size:12px; opacity:0.9; }

/* UIAPP_WIP02_HOME_CSS_POLISH_V1 (safe: CSS-only) */
:root{
  /* keep palette; only improve readability */
}

.card .h{
  font-weight:700;
  letter-spacing:.2px;
}

.card .kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin-top: 10px;
}

.card .k{
  opacity:.72;
  font-size:13px;
}

.card .v{
  font-weight:650;
  font-size:18px;
  letter-spacing:.2px;
  font-variant-numeric: tabular-nums;
}

.card .row{
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
}

.btn{
  border-radius:14px;
  padding:10px 14px;
}

.btn.cta{
  padding:12px 16px;
  font-size:16px;
}

.top .chip{
  font-variant-numeric: tabular-nums;
}

.res-head{
  font-weight:650;
}

/* UIAPP_WIP10_HOME_CSS_POLISH_V1
   Home readability pass (CSS-only). No wiring/JS changes.
*/
:root{
  --mtr-card-border: rgba(255,255,255,.08);
  --mtr-text-dim: rgba(232,238,247,.72);
  --mtr-text-dimmer: rgba(232,238,247,.58);
}

.card{
  border: 1px solid var(--mtr-card-border);
}

.card .h{
  letter-spacing: .04em;
  font-weight: 700;
}

.kv .k{ color: var(--mtr-text-dimmer); }
.kv .v{ color: rgba(232,238,247,.92); font-variant-numeric: tabular-nums; }

.top .brand{
  letter-spacing: .22em;
}

.chip{
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(232,238,247,.82);
}

.btn{
  border: 1px solid rgba(255,255,255,.10);
}

@media (min-width: 920px){
  /* главное: Weekly на Home/Weekly — во всю ширину (убираем пустое поле справа) */
  .grid > .card[data-view~="weekly"]{ grid-column: 1 / -1; }

  /* wide секции — тоже во всю ширину */
  .grid > .card.wide{ grid-column: 1 / -1; }

  /* чуть воздуха */
  .grid{ gap: 18px; }
  .card{ padding: 18px; border-radius: 20px; }
}

/* UIAPP_WIP10_HOME_WEEKLY_WIDE_V1
   Goal: Home dashboard on desktop — remove empty right column.
   Safety: CSS-only (no wiring/JS).
*/
@media (min-width: 980px){
  /* Weekly card on Home spans full width */
  .grid > .card[data-view~="home"][data-view~="weekly"]{ grid-column: 1 / -1; }
}


/* ===== UIAPP_WIP02_HOME_HUB_TILES_V1 ===== */
.hub-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.btn.hub{
  width:100%;
  min-height:56px;
  border-radius:16px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  border-color:rgba(31,209,138,.45);
  background:linear-gradient(180deg, rgba(31,209,138,.16), rgba(12,19,32,.88));
}
.btn.hub:active{transform:translateY(1px)}
@media (max-width: 420px){
  .hub-grid{grid-template-columns:1fr}
}

/* ===== UIAPP_WIP03_WALLET_QUESTS_ARCADE_SKIN_V1 =====
   Goal: wallet + quests look closer to Blum-like dark arcade UI.
   Safety: CSS-only overrides + one Wallet HTML block already updated.
*/

/* fix: bottom nav overlap (reserve a bit more space) */
:root{ --navH: 96px; }

body{
  background: #000 !important;
}

/* softer, bigger cards */
.card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(0,0,0,.60);
}

.card .h{
  font-size: 15px;
  letter-spacing: .02em;
}

/* wallet hero */
.card-wallet .wallet-hero{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  margin-top:10px;
}

.card-wallet .lbl{
  color: rgba(232,238,247,.55);
  font-size: 12px;
}

.card-wallet .wallet-bal .num{
  margin-top:6px;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.card-wallet .wallet-bal .unit{
  margin-left:8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,238,247,.55);
  letter-spacing: .12em;
}

.card-wallet .wallet-day .val{
  margin-top:6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(232,238,247,.90);
  font-variant-numeric: tabular-nums;
}

.card-wallet .wallet-actions{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

.card-wallet .wact{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(232,238,247,.92);
  border-radius: 18px;
  min-height: 64px;
  padding: 10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.card-wallet .wact .ico{
  width:30px;height:30px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(232,238,247,.70);
  font-size: 14px;
}
.card-wallet .wact .t{
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,238,247,.85);
}

.btn.pill{
  border-radius: 999px;
  padding: 10px 16px;
}

/* quests: arcade cards with individuality by code (no JS changes) */
.mtr-quests{ gap: 12px; }

.mtr-quest{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 14px 14px 14px 56px; /* space for badge */
  overflow:hidden;
}

.mtr-quest::before{
  content: "★";
  position:absolute;
  left:14px; top:14px;
  width:34px; height:34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(232,238,247,.75);
  font-size: 14px;
}

.mtr-quest[data-qcode="PLAY_SNAKE_3"]{
  background: radial-gradient(520px 240px at 0% 0%, rgba(31,209,138,.16), rgba(255,255,255,.02) 55%);
}
.mtr-quest[data-qcode="PLAY_SNAKE_3"]::before{ content:"🐍"; }

.mtr-quest[data-qcode="PLAY_MINES_3"]{
  background: radial-gradient(520px 240px at 0% 0%, rgba(120,160,255,.16), rgba(255,255,255,.02) 55%);
}
.mtr-quest[data-qcode="PLAY_MINES_3"]::before{ content:"💣"; }

.mtr-quest[data-qcode="BUY_WEEKLY_1"]{
  background: radial-gradient(520px 240px at 0% 0%, rgba(255,211,106,.16), rgba(255,255,255,.02) 55%);
}
.mtr-quest[data-qcode="BUY_WEEKLY_1"]::before{ content:"🎟"; }

.mtr-quest .title{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
}

.mtr-quest .meta{
  opacity: .85;
  font-size: 12px;
  white-space: nowrap;
}

.mtr-quest .bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.mtr-quest .bar > i{
  background: rgba(31,209,138,.35);
}

/* action button only inside quest cards: white pill */
.mtr-quest .btn.sm{
  border: 0;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  min-height: 36px;
}

/* UIAPP_WIP03_WEEKLY_WALLET_STYLE_V2 */
.weekly-card { padding-bottom: 18px; }
.weekly-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom: 12px;
}
.weekly-title{ font-weight:700; font-size: 18px; letter-spacing: .02em; }
.weekly-pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.weekly-hero-box{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.weekly-label{
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  margin-bottom: 6px;
}
.weekly-value{
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.weekly-unit{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.55);
}
.weekly-meta{
  margin-top: 12px;
  display:grid;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.70);
}
.weekly-meta-val{ color: rgba(255,255,255,0.85); }
.weekly-cta{
  width: 100%;
  margin-top: 14px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(0, 255, 170, 0.22);
  background: rgba(0, 255, 170, 0.06);
  font-weight: 700;
}
@media (max-width: 820px){
  .weekly-value{ font-size: 40px; }
}

/* UIAPP_WIP03_WEEKLY_WALLET_STYLE_V3 */
.weekly-card { padding-bottom: 18px; }
.weekly-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom: 12px;
}
.weekly-title{ font-weight:800; font-size: 20px; letter-spacing: .02em; }
.weekly-pill{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.weekly-hero-box{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.weekly-label{
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  margin-bottom: 6px;
}
.weekly-value{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.weekly-unit{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.55);
}
.weekly-meta{
  margin-top: 12px;
  display:grid;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}
.weekly-cta{
  width: 100%;
  margin-top: 14px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(0, 255, 170, 0.22);
  background: rgba(0, 255, 170, 0.06);
  font-weight: 800;
}

/* ===== UIAPP_WIP11_WEEKLY_ARCADE_V1 =====
   Facts:
   - shell.js refresh() writes: vWRound, vWPool, vWTickets
   - buy button id: bWeekly
   Scope: CSS only
*/
.card-weekly{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(0,0,0,.60);
}

.card-weekly .weekly-pill{
  font-size: 12px;
  color: rgba(232,238,247,.80);
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid rgba(36,50,71,.7);
  background: rgba(12,19,32,.55);
}

.card-weekly .weekly-hero{
  margin-top: 10px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
}

.card-weekly .weekly-amount{
  margin-top: 6px;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.card-weekly .weekly-amount .unit{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,238,247,.55);
  letter-spacing: .12em;
}

.card-weekly .weekly-stats{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.card-weekly .wstat{
  flex: 1;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(12,19,32,.35);
  border: 1px solid rgba(36,50,71,.7);
}
.card-weekly .wstat .k{
  color: rgba(232,238,247,.55);
  font-size: 12px;
}
.card-weekly .wstat .v{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.card-weekly .weekly-cta{
  width:100%;
  min-height:56px;
  border-radius:18px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.02em;
  border-color:rgba(31,209,138,.45);
  background:linear-gradient(180deg, rgba(31,209,138,.16), rgba(12,19,32,.88));
}


/* UIAPP_WIP12_WEEKLY_DETAILS_V2 */.weekly-v2 .weekly-panel{
  margin-top:10px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.weekly-v2 .weekly-label{
  color: rgba(232,238,247,.55);
  font-size: 12px;
  letter-spacing: .02em;
}
.weekly-v2 .weekly-value{
  margin-top:6px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.weekly-v2 .unit{
  margin-left:8px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(232,238,247,.55);
  letter-spacing: .12em;
}
.weekly-v2 .weekly-stats{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.weekly-v2 .stat{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(36,50,71,.75);
  background:rgba(8,12,18,.55);
}
.weekly-v2 .stat .k{
  color: rgba(232,238,247,.55);
  font-size: 12px;
}
.weekly-v2 .stat .v{
  margin-top:6px;
  font-size: 18px;
  font-weight: 850;
  color: rgba(232,238,247,.95);
  font-variant-numeric: tabular-nums;
}
.weekly-v2 .weekly-foot{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.weekly-v2 .weekly-status{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(36,50,71,.75);
  background:rgba(12,19,32,.55);
  color: rgba(232,238,247,.75);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  min-width:66px;
  text-align:center;
}
.weekly-v2 .weekly-cta{
  flex: 1 1 auto;
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 900;
  border-color: rgba(31,209,138,.45);
  background: linear-gradient(180deg, rgba(31,209,138,.18), rgba(12,19,32,.88));
}

/* ===== UIAPP_WIP14_GAMES_HUB_CARDS_V1 ===== */
.games-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 980px){
  .games-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

.gcard{
  position:relative;
  border:1px solid rgba(36,50,71,.85);
  background:rgba(8,12,18,.55);
  border-radius:18px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  min-height:92px;
}
.gcard:hover{ border-color: rgba(31,209,138,.55); }
.gcard:active{ transform: translateY(1px); }

.gposter{
  height:86px;
  border-radius:14px;
  border:1px solid rgba(36,50,71,.75);
  background:linear-gradient(135deg, rgba(31,209,138,.12), rgba(12,19,32,.65));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.gbody{ padding-top:10px; }
.gt{ font-weight:800; font-size:16px; letter-spacing:.01em; }
.gs{ color:var(--mut); font-size:12px; margin-top:2px; }

.gbadge{
  position:absolute;
  top:10px; right:10px;
  font-size:10px;
  letter-spacing:.06em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(36,50,71,.75);
  background:rgba(12,19,32,.72);
}
.gbadge.live{
  color:var(--acc);
  border-color:rgba(31,209,138,.45);
  background:rgba(31,209,138,.10);
}
.gbadge.soon{
  color:rgba(255,255,255,.70);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.gcard.is-soon{ opacity:.88; }

/* poster placeholders per game (later replaced by real images) */
.p-snake{ background:linear-gradient(135deg, rgba(31,209,138,.18), rgba(10,12,18,.70)); }
.p-mines{ background:linear-gradient(135deg, rgba(115,189,255,.16), rgba(10,12,18,.70)); }
.p-nardy{ background:linear-gradient(135deg, rgba(255,205,115,.14), rgba(10,12,18,.70)); }
.p-plinko{ background:linear-gradient(135deg, rgba(255,115,193,.14), rgba(10,12,18,.70)); }
.p-bj{    background:linear-gradient(135deg, rgba(255,115,115,.14), rgba(10,12,18,.70)); }
.p-lev{   background:linear-gradient(135deg, rgba(179,115,255,.14), rgba(10,12,18,.70)); }

/* ===== UIAPP_WIP14_GAME_STAGE_V1 ===== */
/* UIAPP_WIP15_GAME_STAGE_CSS_V1 */
.game-stage{
  margin:10px 0 10px 0;
  height:220px;
  border-radius:16px;
  border:1px solid rgba(36,50,71,.85);
  background:radial-gradient(900px 260px at 20% 10%, rgba(31,209,138,.10), rgba(8,12,18,.72));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(147,164,186,.9);
  font-weight:700;
  letter-spacing:.04em;
}


/* ===== UIAPP_WIP16_BOTTOM_NAV_CENTER_GAMES_V1 ===== */
/* order: home - weekly - games(center) - quests - wallet */
.bottom-nav .nav-inner.nav16{
  display:flex;
  gap:10px;
  align-items:flex-end;
}

.bottom-nav .nav-inner.nav16 .nav-btn{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px 12px;
  border-radius:16px;
  border:1px solid rgba(36,50,71,.75);
  background: rgba(8,12,18,.55);
  color: rgba(232,238,247,.78);
}

.bottom-nav .nav-inner.nav16 .nav-btn .ico{
  width:28px; height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bottom-nav .nav-inner.nav16 .nav-btn svg{
  width:24px; height:24px;
  stroke: currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.92;
}
.bottom-nav .nav-inner.nav16 .nav-btn .lbl{
  font-size:11px;
  font-weight:750;
  letter-spacing:.02em;
}

.bottom-nav .nav-inner.nav16 .nav-btn.is-center{
  flex:1.25 1 0;
  padding:14px 6px 14px;
  border-radius:18px;
  border-color: rgba(31,209,138,.45);
  background: linear-gradient(180deg, rgba(31,209,138,.18), rgba(12,19,32,.88));
  color: rgba(232,238,247,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.bottom-nav .nav-inner.nav16 .nav-btn.is-active{
  border-color: rgba(31,209,138,.55);
  color: rgba(232,238,247,.95);
}
.bottom-nav .nav-inner.nav16 .nav-btn.is-active svg{ opacity:1; }
/* ===== UIAPP_WIP17_HOME_HERO_CAROUSEL_V1 ===== */
.hero{
  position:relative;
  margin-top:12px;
  border-radius:18px;
  border:1px solid rgba(36,50,71,.75);
  background: radial-gradient(120% 140% at 20% 10%, rgba(31,209,138,.18), rgba(8,12,18,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:96px;
}
.hero-slide{
  position:absolute;
  inset:0;
  padding:14px 16px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .26s ease, transform .26s ease;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.hero-slide.is-active{
  opacity:1;
  transform: translateY(0);
}
.hero-k{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(232,238,247,.62);
}
.hero-t{
  font-size:18px;
  font-weight:800;
  color: rgba(232,238,247,.96);
}
.hero-s{
  font-size:13px;
  color: rgba(232,238,247,.72);
}
.hero-slide[data-soon="1"] .hero-t{
  color: rgba(232,238,247,.82);
}
.hero-dots{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:center;
}
.hero-dot{
  width:8px; height:8px;
  border-radius:99px;
  border:0;
  background: rgba(232,238,247,.20);
  cursor:pointer;
}
.hero-dot.is-active{
  background: rgba(31,209,138,.75);
}


/* ===== UIAPP_WIP17_HOME_HERO_CAROUSEL_V2 ===== */
.hero{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--br);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(31,209,138,.14), rgba(12,19,32,.88));
  box-shadow: var(--shadow);
}
.hero-slide{
  width:100%;
  text-align:left;
  border:0;
  background: transparent;
  color: var(--txt);
  padding:14px 14px;
  border-radius:14px;
  cursor:pointer;
  display:none;
}
.hero-slide.is-active{ display:block; }
.hero-k{
  font-size:12px;
  letter-spacing:.08em;
  color: rgba(232,238,247,.68);
}
.hero-t{
  margin-top:4px;
  font-size:18px;
  font-weight:760;
}
.hero-s{
  margin-top:4px;
  font-size:13px;
  color: rgba(232,238,247,.78);
}
.hero-dots{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:center;
  opacity:.9;
}
.hero-dot{
  width:7px; height:7px;
  border-radius:999px;
  background: rgba(232,238,247,.28);
  border:1px solid rgba(232,238,247,.18);
  cursor:pointer;
}
.hero-dot.is-on{
  background: rgba(31,209,138,.85);
  border-color: rgba(31,209,138,.55);
}

/* ===== UIAPP_WIP16_GAME_ONE_SCREEN_V1 ===== */
/* Goal: snake/mines fit into one phone screen. No scroll. Play always visible. */
.wrap{ min-height: 100vh; display:flex; flex-direction:column; }
main.grid{ flex: 1 1 auto; }

/* only for game routes */
body[data-route="snake"], body[data-route="mines"]{ overflow:hidden; }
body[data-route="snake"] .grid, body[data-route="mines"] .grid{
  flex: 1 1 auto;
  overflow:hidden;
}

/* make the game card fill remaining height */
body[data-route="snake"] .grid > .card[data-view~="snake"],
body[data-route="mines"] .grid > .card[data-view~="mines"]{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
}

/* keep action buttons pinned to bottom of card */
body[data-route="snake"] .grid > .card[data-view~="snake"] > .row,
body[data-route="mines"] .grid > .card[data-view~="mines"] > .row{
  margin-top:auto;
  padding-top:10px;
}

/* Stage: static, text-only states (idle / rolling / result) */
.game-stage{
  border:1px solid rgba(36,50,71,.9);
  background: linear-gradient(180deg, rgba(31,209,138,.12), rgba(12,19,32,.78));
  border-radius:16px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(232,238,247,.78);
  font-weight:750;
  letter-spacing:.02em;
  min-height:140px;
  flex:1 1 auto;
}
.game-stage.is-rolling{ opacity:.92; }
.game-stage.is-win{ border-color: rgba(31,209,138,.55); }
.game-stage.is-lose{ border-color: rgba(255,90,90,.45); }

/* Stake presets: horizontal scroll only on game routes (prevents vertical overflow) */
body[data-route="snake"] .stake-grid,
body[data-route="mines"] .stake-grid{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:8px;
  padding:2px 2px 4px;
  -webkit-overflow-scrolling: touch;
}
body[data-route="snake"] .stake-grid .btn,
body[data-route="mines"] .stake-grid .btn{
  white-space:nowrap;
}


/* UIAPP_WIP18_GAMES_FIT_NOSCROLL_V3 */
/* We mark current route on <body data-route="..."> from shell.js */
body[data-route="snake"], body[data-route="mines"]{ overflow:hidden; }

/* On game screens, force phone-like centered canvas even on desktop */
body[data-route="snake"] .wrap,
body[data-route="mines"] .wrap{
  max-width:560px !important;   /* override desktop max-width:980 */
  height:100dvh;
  display:flex;
  flex-direction:column;
}

/* No scroll on game route */
body[data-route="snake"] main.grid,
body[data-route="mines"] main.grid{
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* Game card fills the available height */
body[data-route="snake"] .card[data-view~="snake"],
body[data-route="mines"] .card[data-view~="mines"]{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Stage takes remaining space and is centered */
body[data-route="snake"] .game-stage,
body[data-route="mines"] .game-stage{
  flex:1 1 auto;
  min-height:180px;
  max-height:44vh;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Make KV tighter */
body[data-route="snake"] .kv,
body[data-route="mines"] .kv{
  grid-template-columns: 90px 1fr;
}

/* Stake input full width (less "thin") */
body[data-route="snake"] .stake-top .inp,
body[data-route="mines"] .stake-top .inp{
  width:100%;
  min-width:0;
}

/* Presets: grid with real tap targets (no skinny pills) */
#stakePresetsSnake, #stakePresetsMines{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap:10px;
}
#stakePresetsSnake button, #stakePresetsMines button{
  width:100%;
  min-height:46px;
  padding:12px 0;
  border-radius:14px;
  font-weight:700;
}

/* CTA row always visible and big */
body[data-route="snake"] .row,
body[data-route="mines"] .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:12px;
}
body[data-route="snake"] .btn.cta,
body[data-route="mines"] .btn.cta{
  min-height:50px;
  font-size:16px;
}

/* UIAPP_WIP19_MOBILE_GAME_FIT_V1 */
/* Goal: snake/mines fit in phone viewport, no scroll, sane tap targets */
@media (max-width: 560px){
  body[data-route="snake"], body[data-route="mines"]{
    height: 100dvh;
    overflow: hidden;
  }

  body[data-route="snake"] .wrap,
  body[data-route="mines"] .wrap{
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: calc(var(--navH) + 14px + env(safe-area-inset-bottom));
  }

  body[data-route="snake"] .grid,
  body[data-route="mines"] .grid{
    flex: 1;
    min-height: 0; /* allow internal flex children to shrink */
  }

  body[data-route="snake"] section.card[data-view="snake"],
  body[data-route="mines"] section.card[data-view="mines"]{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body[data-route="snake"] .game-stage,
  body[data-route="mines"] .game-stage{
    flex: 1;
    min-height: 170px;
    max-height: 42dvh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body[data-route="snake"] .stake-box,
  body[data-route="mines"] .stake-box{
    margin-top: 10px;
  }

  body[data-route="snake"] .stake-grid,
  body[data-route="mines"] .stake-grid{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  body[data-route="snake"] .stake-grid .btn,
  body[data-route="mines"] .stake-grid .btn{
    min-width: 60px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  body[data-route="snake"] .btn.cta,
  body[data-route="mines"] .btn.cta{
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 16px;
  }

  body[data-route="snake"] .row,
  body[data-route="mines"] .row{
    gap: 10px;
  }
}

/* UIAPP_WIP18_GAMES_FIT_NOSCROLL_V4 */
/* goal: snake/mines fit in phone screen, no scroll; controls not tiny; center card */
body[data-route="snake"], body[data-route="mines"] {
  overflow: hidden;
}

body[data-route="snake"] .wrap,
body[data-route="mines"] .wrap {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  /* keep bottom nav space inside fixed height */
  padding-bottom: calc(var(--navH) + 14px + env(safe-area-inset-bottom));
}

body[data-route="snake"] .top,
body[data-route="mines"] .top {
  margin-bottom: 8px;
}

body[data-route="snake"] .grid,
body[data-route="mines"] .grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
  align-items: stretch;
  gap: 12px;
}

body[data-route="snake"] section.card[data-view~="snake"],
body[data-route="mines"] section.card[data-view~="mines"] {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;            /* horizontal center */
}

body[data-route="snake"] .game-stage,
body[data-route="mines"] .game-stage {
  /* stable stage size across devices */
  height: clamp(160px, 26vh, 230px);
  border-radius: 18px;
}

body[data-route="snake"] .stake-top,
body[data-route="mines"] .stake-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

body[data-route="snake"] .stake-top .inp,
body[data-route="mines"] .stake-top .inp {
  width: 100%;
  min-width: 0;
}

body[data-route="snake"] .stake-grid,
body[data-route="mines"] .stake-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="snake"] .row,
body[data-route="mines"] .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-route="snake"] .btn,
body[data-route="mines"] .btn {
  min-height: 50px;
  border-radius: 16px;
}
/* /UIAPP_WIP18_GAMES_FIT_NOSCROLL_V4 */

/* UIAPP_WIP20_GAME_CENTER_MOBILEFIT_V1 */

/* Telegram/iOS viewport stability */
:root {
  --mtr-top-h: 72px;          /* header approx */
  --mtr-nav-h: 132px;         /* bottom nav approx */
  --mtr-gap: 14px;
  --mtr-vh: 100vh;
}
@supports (height: 100dvh) { :root { --mtr-vh: 100dvh; } }
@supports (height: 100svh) { :root { --mtr-vh: 100svh; } }

/* make sure content never hides behind bottom nav */
body .wrap {
  min-height: var(--mtr-vh);
  box-sizing: border-box;
  padding-bottom: calc(var(--mtr-nav-h) + env(safe-area-inset-bottom));
}

/* Snake/Mines: force single-column, center card (both axes-ish) */
body[data-route="snake"] .wrap,
body[data-route="mines"] .wrap {
  display: flex;
  flex-direction: column;
}

body[data-route="snake"] main.grid,
body[data-route="mines"] main.grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  padding: var(--mtr-gap);
  box-sizing: border-box;
  /* available space minus header+nav */
  min-height: calc(var(--mtr-vh) - var(--mtr-top-h) - var(--mtr-nav-h) - var(--mtr-gap));
}

/* target the active game card by data-view containing route keyword */
body[data-route="snake"] section.card[data-view*="snake"],
body[data-route="mines"] section.card[data-view*="mines"] {
  width: min(560px, calc(100vw - (var(--mtr-gap) * 2)));
  margin-left: auto;
  margin-right: auto;
  max-height: calc(var(--mtr-vh) - var(--mtr-top-h) - var(--mtr-nav-h) - (var(--mtr-gap) * 2));
  overflow: hidden;
}

/* stage height: adaptive to short screens */
body[data-route="snake"] .game-stage,
body[data-route="mines"] .game-stage {
  height: clamp(150px, 26vh, 320px);
}

@media (max-height: 740px) {
  body[data-route="snake"] .game-stage,
  body[data-route="mines"] .game-stage {
    height: clamp(130px, 22vh, 240px);
  }
}

/* Stake presets: 2 columns, big tap targets */
#stakePresetsSnake,
#stakePresetsMines {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#stakePresetsSnake button,
#stakePresetsMines button {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  font-size: 16px;
}

/* Inputs inside game cards: comfortable on phones */
body[data-route="snake"] section.card[data-view*="snake"] input[type="number"],
body[data-route="mines"] section.card[data-view*="mines"] input[type="number"],
body[data-route="snake"] section.card[data-view*="snake"] input[type="text"],
body[data-route="mines"] section.card[data-view*="mines"] input[type="text"] {
  min-height: 46px;
  font-size: 16px;
  border-radius: 14px;
}

/* Play/Back buttons: if they are .btn inside the game card, enlarge */
body[data-route="snake"] section.card[data-view*="snake"] .btn,
body[data-route="mines"] section.card[data-view*="mines"] .btn {
  min-height: 48px;
  border-radius: 14px;
}



/* UIAPP_WIP21_GAMES_PRESETS_ONLY_COMPACT_V1 (ts=20260106_234736)
   Goal:
   - kill duplicate Stake lines (KV already removed in HTML)
   - hide stake input field (keep value in DOM)
   - make presets the only control + compact sizing
   - stage height clamp so Play/Back never gets clipped
   - for many stakes (Gold): horizontal scroll presets bar on small screens
*/
body[data-route="snake"] [data-stake-input="snake"],
body[data-route="mines"] [data-stake-input="mines"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-route="snake"] .game-stage,
body[data-route="mines"] .game-stage {
  height: clamp(140px, 22vh, 220px) !important;
}

@media (max-height: 740px) {
  body[data-route="snake"] .game-stage,
  body[data-route="mines"] .game-stage {
    height: clamp(120px, 20vh, 200px) !important;
  }
}

body[data-route="snake"] #stakePresetsSnake > button,
body[data-route="mines"] #stakePresetsMines > button {
  min-height: 40px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

body[data-route="snake"] #stakePresetsSnake > button.is-on,
body[data-route="mines"] #stakePresetsMines > button.is-on {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 1px rgba(31,209,138,.35), 0 8px 24px rgba(0,0,0,.45) !important;
}

@media (max-width: 560px) {
  body[data-route="snake"] #stakePresetsSnake,
  body[data-route="mines"] #stakePresetsMines {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  body[data-route="snake"] #stakePresetsSnake > button,
  body[data-route="mines"] #stakePresetsMines > button {
    min-width: 72px !important;
    scroll-snap-align: start;
  }
}


/* UIAPP_WIP20_PHONE_GAME_FIT_SHIFTUP_V1 */
/* goal: keep Snake/Mines controls fully visible on short phone viewports (bottom nav overlap) */
@media (max-width: 520px) and (max-height: 900px) {
  body[data-route="snake"] section[data-view~="snake"],
  body[data-route="mines"] section[data-view~="mines"]{
    transform: translateY(-14px);
  }
}

/* future-proof stake presets (more buttons on higher club levels) */
@media (max-width: 520px){
  .stake-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
  }
  .stake-grid .btn{
    min-height: 42px;
    padding: 10px 12px;
    font-size: 16px;
  }
}
@media (max-width: 380px){
  .stake-grid{
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 8px;
  }
  .stake-grid .btn{
    min-height: 38px;
    padding: 9px 10px;
    font-size: 15px;
  }
}



/* UIAPP_WIP22_MOBILE_FIT_ABOVE_NAV_V1 */
:root{
  /* big bottom nav: keep content above it (mobile + tg webview) */
  --mtr-bottomnav-h: clamp(92px, 13svh, 140px);
  --mtr-safe-bot: env(safe-area-inset-bottom, 0px);
}

/* IMPORTANT: nav is fixed; grid is centered -> bottom gets clipped.
   Give grid enough bottom padding so centered card never goes under nav. */
main.grid{
  padding-bottom: calc(var(--mtr-bottomnav-h) + var(--mtr-safe-bot) + 24px);
  box-sizing: border-box;
}

/* tighten games vertical rhythm on small screens */
@media (max-width: 520px), (max-height: 780px){
  /* reduce card padding a bit */
  section.card[data-view~="snake"],
  section.card[data-view~="mines"]{
    padding: 14px 14px 12px;
  }

  /* stage: clamp so it doesn't eat the whole height */
  .game-stage{
    height: clamp(150px, 26vh, 220px);
  }

  /* stake buttons: ready for Bronze/Silver/Gold (many buttons) */
  .stake-grid{
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  }

  /* make all buttons a bit shorter so Play/Back fit */
  section.card[data-view~="snake"] .btn,
  section.card[data-view~="mines"] .btn,
  section.card[data-view~="snake"] button,
  section.card[data-view~="mines"] button{
    min-height: 44px;
  }
}

/* selected stake highlight (works with different js variants) */
.stake-grid button[aria-pressed="true"],
.stake-grid button.is-on,
.stake-grid button.is-active{
  border-color: rgba(31,209,138,.75) !important;
  box-shadow: 0 0 0 1px rgba(31,209,138,.35) inset;
}


/* UIAPP_WIP24_VH_GUARD_CSS_V1 */
:root{ --mtr-vh: 100vh; } /* overwritten by shell.js on mobile */
html, body{ height: 100%; }
body{ min-height: var(--mtr-vh, 100vh); }
.wrap{ min-height: var(--mtr-vh, 100vh); }

/* Mobile: stop fighting padding-bottom, just slightly shrink the stage + tighten gaps */
@media (max-height: 760px), (max-width: 420px){
  .game-stage{ height: clamp(150px, 24vh, 210px); }
  #stakePresetsSnake, #stakePresetsMines { gap: 10px; }
}


/* UIAPP_WIP22_GAMES_COMPACT_CONTROLS_V1 */
/* goal: on small screens keep Play/Back fully visible + prepare for many stake buttons */
@media (max-width: 520px), (max-height: 760px) {
  /* compact spacing inside game cards */
  section[data-view~="snake"], section[data-view~="mines"]{
    padding-top: 16px;
    padding-bottom: 18px;
  }

  /* stage: slightly less vertical greed */
  .game-stage{
    margin-top: 10px;
    margin-bottom: 14px;
    min-height: 140px;
  }

  /* stake grid: smaller buttons, auto-wrap */
  .stake-grid{
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  }
  section[data-view~="snake"] .stake-grid button,
  section[data-view~="mines"] .stake-grid button{
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
    border-radius: 14px;
  }

  /* action buttons: a bit shorter */
  section[data-view~="snake"] .btn,
  section[data-view~="mines"] .btn{
    height: 44px;
    border-radius: 14px;
  }
}

/* UI2_WIP01_STAKE_SCROLLER_V1:BEGIN
   Goal: stake presets never increase vertical height (Gold-safe).
   UX: horizontal timer-style scroll (snap + inertia). Play/Back always visible.
*/
body[data-route="snake"] section[data-view~="snake"],
body[data-route="mines"] section[data-view~="mines"]{
  /* keep game card as a vertical stack: stage grows, controls fixed */
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;

  /* cap by viewport minus top+bottom bars (fallbacks are conservative) */
  max-height: calc(
    var(--mtr-vh, 100vh)
    - var(--mtr-top-h, 64px)
    - var(--mtr-bottomnav-h, var(--mtr-nav-h, var(--navH, 110px)))
    - 24px
  );
}

body[data-route="snake"] section[data-view~="snake"] .game-stage,
body[data-route="mines"] section[data-view~="mines"] .game-stage{
  flex: 1 1 auto !important;
  min-height: 120px;
}

/* remove vertical-heavy stake row on game routes */
body[data-route="snake"] section[data-view~="snake"] .stake-top,
body[data-route="mines"] section[data-view~="mines"] .stake-top{
  display:none !important;
}

/* stake presets -> horizontal scroller (timer style) */
body[data-route="snake"] section[data-view~="snake"] .stake-grid,
body[data-route="mines"] section[data-view~="mines"] .stake-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:10px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  padding: 6px 2px 10px !important;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
body[data-route="snake"] section[data-view~="snake"] .stake-grid::-webkit-scrollbar,
body[data-route="mines"] section[data-view~="mines"] .stake-grid::-webkit-scrollbar{
  display:none;
}

body[data-route="snake"] section[data-view~="snake"] .stake-grid .stake-btn,
body[data-route="mines"] section[data-view~="mines"] .stake-grid .stake-btn{
  flex: 0 0 auto;
  min-width: 64px;
  height: 42px;

  padding: 10px 14px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* tighten control block a bit on short phones */
body[data-route="snake"] section[data-view~="snake"] .stake-box,
body[data-route="mines"] section[data-view~="mines"] .stake-box{
  flex: 0 0 auto;
  gap: 10px !important;
}

body[data-route="snake"] section[data-view~="snake"] .btn,
body[data-route="mines"] section[data-view~="mines"] .btn{
  min-height: 46px;
}
/* UI2_WIP01_STAKE_SCROLLER_V1:END */

/* UI2_ROLL_REEL_ANIM_V5:BEGIN
   Cyber quest panel (non-casino) for Roll (backend: mines).
*/
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-reel.roll-cyber{
  width:100%;
  max-width:320px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-frame{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:2px 2px 0;
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-title{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.92;
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-sub{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.55;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-window{
  width:100%;
  height:86px;
  overflow:hidden;
  border-radius:18px;
  position:relative;

  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(31,209,138,.18), rgba(0,0,0,0) 55%),
    radial-gradient(120% 160% at 90% 100%, rgba(120,92,255,.16), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.55) inset;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage.roll-is-spinning .roll-window{
  box-shadow:
    0 20px 44px rgba(0,0,0,.52),
    0 0 0 1px rgba(0,0,0,.58) inset,
    0 0 22px rgba(31,209,138,.12);
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-strip{
  will-change:transform;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-cell{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile{
  width:100%;
  height:66px;
  border-radius:16px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;

  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.40);
  overflow:hidden;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(100% 140% at 0% 50%, rgba(31,209,138,.20), rgba(0,0,0,0) 60%),
    radial-gradient(120% 160% at 100% 50%, rgba(120,92,255,.18), rgba(0,0,0,0) 60%);
  opacity:.95;
  pointer-events:none;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile .roll-art{
  position:relative;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.86);
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-svg{
  width:52px; height:52px;
  color: rgba(255,255,255,.86);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-label{
  position:relative;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.78;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile.kind-x3,
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile.kind-x10{
  border-color: rgba(31,209,138,.18);
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-tile.kind-void{
  border-color: rgba(255,255,255,.10);
  opacity:.92;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-mult{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
  color: rgba(255,255,255,.92);
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-mult .m{
  font-size:26px;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-mult .t{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.74;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-caption{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.78;
}

body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-fx{
  position:absolute; inset:0;
  pointer-events:none;
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-scan{
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.00) 6px,
      rgba(255,255,255,.045) 7px
    );
  opacity:.18;
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-grid{
  background:
    repeating-linear-gradient(90deg, rgba(31,209,138,.05) 0, rgba(31,209,138,.05) 1px, rgba(0,0,0,0) 18px),
    repeating-linear-gradient(180deg, rgba(120,92,255,.045) 0, rgba(120,92,255,.045) 1px, rgba(0,0,0,0) 18px);
  opacity:.22;
}
body[data-route="mines"] section[data-view~="mines"] .game-stage .roll-vignette{
  background: radial-gradient(120% 140% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  opacity:.55;
}

/* UI2_ROLL_REEL_ANIM_V5:END */

/* UI2_INFO_BUTTON_STYLE_V1
   Replace topbar debug chips with a compact (i) button.
*/
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.info-btn{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,70,70,.85);
  background:rgba(255,70,70,.14);
  color:#fff;
  font-weight:800;
  line-height:1;
  user-select:none;
}
.info-btn:active{ transform:scale(.98); }

/* UI2_HERO_DOTS_BOTTOM_OVERRIDE_V1
   Goal: hero dots must be at bottom-center (not top).
   Safe: override-only, no layout refactor.
*/
.hero{ position:relative; padding-bottom:18px; }
.hero-slide{ position:relative; z-index:1; }
.hero-dots{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  top:auto !important;
  display:flex;
  justify-content:center !important;
  align-items:center;
  gap:6px;
  z-index:5;
}


/* UI2_NAV_CANON_V2
   Goal: Blum-like bottom nav: NO full-width strip, NO blue.
   Keep: active animation + bigger center button.
*/
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:999;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none; /* only inner is clickable */
}

/* main rail (single “plinth”) */
.bottom-nav .nav-inner{
  max-width:560px;
  margin:0 auto;
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:22px;
  background:rgba(12,14,16,0.92) !important; /* graphite, no blue */
  border:1px solid rgba(255,255,255,0.05) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events:auto;
}

/* buttons */
.bottom-nav .nav-btn{
  flex:1;
  border:0 !important;
  background:transparent !important;
  border-radius:18px;
  padding:10px 8px;
  color:rgba(255,255,255,0.62) !important;
  transition: transform 140ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.bottom-nav .nav-btn .ico{
  opacity:.74;
  transform:scale(1.0);
  transition: transform 140ms ease, opacity 160ms ease, filter 160ms ease;
}
.bottom-nav .nav-btn .lbl{ opacity:.86; }

/* active */
.bottom-nav .nav-btn.is-active{
  background:rgba(26,28,30,0.90) !important;
  color:rgba(255,255,255,0.92) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}
.bottom-nav .nav-btn.is-active .ico{
  opacity:1.0;
  transform:scale(1.14);
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.35)) !important;
}

/* center stays bigger */
.bottom-nav .nav-btn.is-center .ico{ transform: scale(1.18); }
.bottom-nav .nav-btn.is-center.is-active .ico{ transform: scale(1.28); }

/* END_UI2_NAV_CANON_V2 */

/* UI2_HOME_DEFRAME_V2
   Goal: remove visual noise on Home:
   - no "Home" header inside the first card
   - no Router(soon) button row
   - make that card frameless (Yandex-like), hero becomes the only surface
*/
section.card.wide[data-view="home"]{
  padding:0;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
/* hide inner header + the extra row (Router soon) ONLY in this card */
section.card.wide[data-view="home"] > .h{ display:none !important; }
section.card.wide[data-view="home"] > .row{ display:none !important; }

section.card.wide[data-view="home"] .hero{
  margin:0;
  border:0;
  box-shadow:none;
  border-radius:20px;
  overflow:hidden;
}

/* keep readable insets inside hero now that outer padding is zero */
section.card.wide[data-view="home"] .hero-slide{
  padding:18px 18px 28px;
}

section.card.wide[data-view="home"] .hero-dots{
  bottom:12px;
}
/* UI2_HOME_DEFRAME_V2:END */

/* UI2_WALLET_HIDE_REFRESH_V1:BEGIN */
  /* Hide Refresh button on Wallet card (CSS-only, like Router row) */
  section.card.card-wallet #bRefresh{ display:none !important; }
  section.card.card-wallet .row{ display:none !important; }
/* UI2_WALLET_HIDE_REFRESH_V1:END */


/* UI2_HOME_CLUB_EXTRAS_V1 */
.kv .v.clip{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#vClubNext,#vClubStakes{font-size:12px; line-height:1.2;}