/* ---------- type ---------- */
.mono, .num, kbd, .kpi-v, .seg.mono button { font-family: var(--fontMono); font-variant-numeric: tabular-nums; }
.eyebrow { margin: 0; font-family: var(--fontMono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--textMuted); }
.muted { color: var(--textMuted); }
.note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--textMuted); text-wrap: pretty; }
.fine { margin: 0; font-size: 12px; color: var(--textMuted); }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; }

/* ---------- rail ---------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: var(--accentPrimary); display: grid; place-items: center; flex: none; }
.logo svg { stroke: var(--onAccent); }
.brand-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.brand-sub { font-family: var(--fontMono); font-size: 11px; color: var(--textMuted); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border: none; border-radius: 10px;
  background: transparent; color: var(--textMuted); font-size: 14px; font-weight: 500; text-align: left; transition: background .15s;
}
.nav button:hover { background: var(--bgCanvas); }
.nav button.on { background: var(--bgCanvas); color: var(--textPrimary); }
.nav .lbl { flex: 1; }
.tag { font-family: var(--fontMono); font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--accentPrimary); color: var(--onAccent); }
.rail-sec { display: flex; flex-direction: column; gap: 8px; }
.rail select, .sel {
  height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--borderSubtle);
  background: var(--bgCanvas); color: var(--textPrimary); font-size: 13px;
}
.sc { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sc kbd { min-width: 44px; text-align: center; }
kbd { font-size: 11px; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--borderSubtle); background: var(--bgCanvas); color: inherit; }
.rail-foot { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--textMuted); }

/* ---------- header ---------- */
.hdr-title { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.hdr-title h1 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; }
.hdr-title span { font-size: 13px; color: var(--textMuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accentPrimary); place-items: center; flex: none; }
.pill {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 18px;
  background: var(--bgCanvas); border: 1px solid var(--borderSubtle); font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px;
}
.pill.sm { gap: 4px; padding: 0 10px; font-size: 13px; }
button.pill { color: var(--textPrimary); font-family: var(--fontDisplay); font-size: 13px; font-weight: 600; }
button.pill.icon { color: var(--accentPrimary); padding: 0 10px; }
button.pill:active, .btn:active, .seg button:active { transform: scale(.96); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq i { width: 3px; height: 16px; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-duration: .6s; animation-delay: .12s; } .eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: .24s; } .eq i:nth-child(4) { animation-duration: .75s; animation-delay: .36s; }
.eq.off i { animation: none; transform: scaleY(.2); opacity: .5; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.tg-btn { height: 36px; padding: 0 14px; border-radius: 18px; border: none; background: var(--accentPrimary); color: var(--onAccent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pro-badge { font-family: var(--fontMono); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--accentPrimary); color: var(--accentPrimary); }
.pro-badge.on { background: var(--accentPrimary); color: var(--onAccent); }

/* ---------- panels + controls ---------- */
.panel {
  background: var(--bgPanel); border: 1px solid var(--borderSubtle); border-radius: 16px; padding: 16px;
  min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: auto;
}
.ws.flow .panel { overflow: visible; }
.well { padding: 12px; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); min-width: 0; }

.seg { display: grid; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); }
.seg button { height: 30px; border: none; border-radius: 7px; font-size: 12px; font-weight: 600; background: transparent; color: var(--textMuted); transition: background .15s, color .15s; }
.seg:not(.mono) button { font-size: 13px; }
.seg button.on { background: var(--accentPrimary); color: var(--onAccent); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.seg.sm { padding: 2px; border-radius: 8px; } .seg.sm button { height: 28px; border-radius: 6px; }
.seg.tall button { height: 34px; }
.ctrl { display: flex; flex-direction: column; gap: 6px; }
.ctrl-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--textMuted); }
.rule { display: flex; align-items: center; gap: 8px; }
.rule > span { width: 56px; font-size: 12px; color: var(--textMuted); flex: none; }
.rule > .seg { flex: 1; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.auto { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kpi { padding: 12px; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); min-width: 0; }
.kpi-k { font-size: 12px; color: var(--textMuted); }
.kpi-v { margin-top: 4px; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-v.kv-lg { font-size: 24px; } .kpi-v.kv-sm { font-size: 16px; } .kpi-v.kv-md { font-size: 18px; }
.kpi-sub { font-family: var(--fontMono); font-size: 11px; color: var(--textMuted); }

.btn {
  height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--borderSubtle); background: var(--bgCanvas);
  color: var(--textPrimary); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; transition: transform .2s var(--ease), opacity .2s;
}
.btn.primary { border: none; background: var(--accentPrimary); color: var(--onAccent); font-weight: 700; }
.btn.lg { height: 52px; font-size: 15px; flex: none; }
.btn.ghost { background: transparent; }
.btn.link { height: auto; padding: 4px; border: none; background: none; color: var(--textMuted); font-size: 12px; text-decoration: underline; font-weight: 400; }
.btn:disabled, .btn.dim { opacity: .4; cursor: not-allowed; }
.btn kbd { border-color: currentColor; background: transparent; padding: 2px 6px; font-weight: 500; }

/* ---------- roulette ---------- */
.wheel-wrap { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; flex: none; overflow: hidden; border-radius: 50%; }
.wheel-img { display: block; width: 100%; height: 100%; transition: transform 2.5s var(--ease); }
.wheel-ptr { position: absolute; top: 3%; left: 50%; margin-left: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 13px solid var(--textPrimary); }
.result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); }
.res-num { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--bgPanel); color: #fff; font-family: var(--fontMono); font-weight: 700; font-size: 19px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.res-t { font-weight: 600; font-size: 14px; } .res-s { font-family: var(--fontMono); font-size: 12px; color: var(--textMuted); }
.res-pip { font-size: 20px; line-height: 1; }
.targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.targets button { height: 44px; border-radius: 10px; border: none; background: var(--bgCanvas); color: #fff; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--borderSubtle); display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .2s var(--ease); }
.targets button.red { background: var(--pocketRed); } .targets button.black { background: var(--pocketBlack); }
.targets button.on { box-shadow: 0 0 0 2px var(--accentPrimary); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--fontMono); font-size: 11px; color: var(--textMuted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.lg-bal { width: 14px; height: 2px; background: var(--chartLine); } .lg-ev { width: 14px; border-top: 2px dashed var(--evBaseline); } .lg-mc { width: 14px; height: 1px; background: var(--textMuted); }
.chart-box { flex: 1; min-height: 0; position: relative; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); overflow: hidden; }
.chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.chart-lbl { position: absolute; font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--textMuted); pointer-events: none; }
.chart-tip { top: 8px; right: 10px; padding: 2px 8px; border-radius: 6px; background: var(--bgPanel); color: var(--textPrimary); }
.log { flex: 1; min-height: 140px; overflow: auto; border-radius: 10px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-size: 12px; }
.log > div { display: grid; grid-template-columns: 58px 46px 1fr 1fr; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--borderSubtle); }
.log .r { text-align: right; } .log .empty { display: block; color: var(--textMuted); }
.custom-rules { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 1px dashed var(--borderSubtle); }

/* ---------- blackjack ---------- */
.bar { height: 14px; border-radius: 7px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); overflow: hidden; position: relative; }
.bar > i { display: block; height: 100%; background: var(--accentSecondary); transition: width .3s; }
.bar > b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--dangerSpike); }
.bust-bar { margin-top: 8px; height: 8px; border-radius: 4px; background: var(--bgPanel); overflow: hidden; }
.bust-bar i { display: block; height: 100%; transition: width .3s; }
.felt {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, var(--bgPanel), var(--bgCanvas) 70%); border: 1px solid var(--borderSubtle);
}
.seat { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.seat-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--textMuted); }
.tot { font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--textPrimary); padding: 2px 8px; border-radius: 6px; background: var(--bgPanel); }
.cards { display: flex; gap: 8px; min-height: 90px; justify-content: center; flex-wrap: wrap; }
.card {
  width: 64px; height: 90px; border-radius: 8px; background: #F8F8F4; color: #111; position: relative; flex: none; font-family: var(--fontMono);
  box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.2); animation: deal .18s var(--ease);
}
.card.red { color: #C81E3A; }
.card.back { background: repeating-linear-gradient(45deg, var(--accentPrimary) 0 2px, var(--bgPanel) 2px 9px); }
.card .tl, .card .br { position: absolute; font-weight: 700; font-size: 15px; line-height: 1; }
.card .tl { top: 6px; left: 7px; } .card .br { bottom: 6px; right: 7px; transform: rotate(180deg); }
.card .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; }
@keyframes deal { from { transform: translateY(-12px); opacity: 0; } }
.hands { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hand { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; }
.hand.active { box-shadow: 0 0 0 2px var(--accentPrimary); }
.hand-h { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--textMuted); white-space: nowrap; }
.coach { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bgCanvas); font-size: 13px; line-height: 1.4; }
.coach i { width: 22px; height: 22px; border-radius: 50%; color: var(--bgCanvas); display: grid; place-items: center; font-weight: 800; flex: none; font-size: 13px; font-style: normal; }
.bj-msg { text-align: center; font-size: 14px; font-weight: 600; min-height: 20px; }
.actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.actions button { height: 54px; border-radius: 12px; border: none; background: var(--bgCanvas); color: var(--textPrimary); font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform .2s var(--ease), opacity .2s; }
.actions button.primary { background: var(--accentPrimary); color: var(--onAccent); }
.actions button:disabled { opacity: .35; cursor: default; }
.actions kbd { font-size: 10px; padding: 1px 5px; border-radius: 4px; border-color: currentColor; background: transparent; }
.mx { display: flex; flex-direction: column; gap: 2px; }
.mx-row { display: grid; grid-template-columns: 30px repeat(10, minmax(0, 1fr)); gap: 2px; }
.mx-row > span:first-child { font-family: var(--fontMono); font-size: 10px; color: var(--textMuted); display: flex; align-items: center; }
.mx-head { font-family: var(--fontMono); font-size: 10px; color: var(--textMuted); text-align: center; }
.mx-c { aspect-ratio: 1; border-radius: 3px; display: grid; place-items: center; font-family: var(--fontMono); font-size: 10px; font-weight: 700; position: relative; cursor: help; }
.a-H { background: var(--pocketBlack); color: var(--textPrimary); } .a-S { background: var(--accentSecondary); color: #06120d; }
.a-D { background: var(--accentPrimary); color: var(--onAccent); } .a-P { background: var(--dangerSpike); color: #1a0508; }
.mx-c.cur { box-shadow: 0 0 0 2px var(--textPrimary), 0 0 12px var(--textPrimary); z-index: 2; }
.mx-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--textMuted); }
.mx-legend span { display: flex; align-items: center; gap: 5px; } .mx-legend b { width: 16px; height: 16px; border-radius: 3px; display: grid; place-items: center; font-family: var(--fontMono); font-size: 10px; }
.drill { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding: 12px; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); }
.drill-card { width: 52px; height: 74px; border-radius: 7px; background: #F8F8F4; color: #111; display: grid; place-items: center; font-family: var(--fontMono); font-weight: 700; font-size: 20px; line-height: 1.1; text-align: center; }
.drill-card.red { color: #C81E3A; }
.drill-opts { display: flex; gap: 6px; }
.drill-opts button { width: 52px; height: 38px; border-radius: 9px; border: 1px solid var(--borderSubtle); background: var(--bgPanel); font-family: var(--fontMono); font-weight: 700; }

/* ---------- slots ---------- */
.machine-h { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .01em; }
.gacha { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: 2px; height: 12px; }
.gacha i { border-radius: 2px; background: var(--bgCanvas); } .gacha i.on { background: var(--accentPrimary); }
.frame {
  position: relative; aspect-ratio: 16 / 10; width: 100%; margin: 0 auto; flex: none; padding: 26px 30px;
  border-radius: var(--frameRadius); background: var(--frameBg); box-shadow: var(--frameShadow); display: flex; flex-direction: column; gap: 12px;
}
.frame .led { height: var(--ledH); margin: 0 22px; border-radius: 3px; background: var(--led); flex: none; }
.frame .screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--screw); display: var(--screwDisp); }
.frame .dial { position: absolute; right: -14px; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; background: var(--dial); display: var(--dialDisp); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.cells { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cell { border-radius: var(--cellRadius); background: var(--reelWell); box-shadow: var(--cellShadow); display: grid; place-items: center; overflow: hidden; min-height: 0; transition: box-shadow .3s; }
.cell img { display: block; width: 84%; height: 70%; object-fit: contain; transition: transform .25s var(--ease), filter .2s; }
.cell.spin img { filter: blur(2.5px); transform: translateY(8px) scale(.92); }
.cell.hit { box-shadow: var(--cellShadow), 0 0 0 2px var(--accentPrimary), 0 0 28px var(--glow); }
.cell.hit img { transform: scale(1.08); filter: drop-shadow(0 0 10px var(--glow)); }
.cell.tease { box-shadow: var(--cellShadow), 0 0 0 2px var(--accentSecondary), 0 0 28px var(--accentSecondary); }
.banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .4s var(--ease); }
.banner.on { opacity: 1; transform: scale(1); }
.banner > div { text-align: center; padding: 12px 26px; border-radius: 14px; background: var(--accentPrimary); color: var(--onAccent); box-shadow: 0 0 0 4px var(--bgCanvas), 0 0 50px var(--glow); }
.banner b { display: block; font-family: var(--fontMono); font-size: 12px; letter-spacing: .2em; }
.banner span { font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 700; line-height: 1.1; }
.spin-btn {
  height: 64px; flex: none; border: none; border-radius: 14px; background: var(--accentPrimary); color: var(--onAccent);
  font-size: 20px; font-weight: 800; letter-spacing: .16em; display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 30px var(--glow); transition: transform .2s var(--ease), opacity .2s;
}
.spin-btn:active { transform: scale(.97); } .spin-btn:disabled { opacity: .65; }
.spin-btn kbd { font-size: 11px; letter-spacing: 0; font-weight: 500; border-color: currentColor; background: transparent; }
.rtp-box { position: relative; height: 110px; border-radius: 12px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); overflow: hidden; flex: none; }
.rtp-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rtp-box .chart-lbl { top: 6px; left: 10px; }
.pays { display: grid; gap: 6px 14px; }
.pay { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--reelWell); display: grid; place-items: center; flex: none; }
.pay .ic img { width: 28px; height: 28px; }
.pay .nm { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay .px { font-family: var(--fontMono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
.machines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcard { position: relative; padding: 10px; border-radius: 12px; border: none; text-align: left; display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: transform .2s var(--ease); }
.mcard:active { transform: scale(.97); }
.mcard .nm { font-size: 12px; font-weight: 700; line-height: 1.2; }
.mcard .sy { display: flex; gap: 4px; } .mcard .sy span { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; }
.mcard .sy img { width: 24px; height: 24px; }
.mcard.locked .nm, .mcard.locked .sy { opacity: .5; filter: saturate(.3); }
.lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.5); color: #fff; font-family: var(--fontMono); font-size: 12px; font-weight: 700; }

/* ---------- vault ---------- */
.rank { font-size: 34px; font-weight: 800; color: var(--accentPrimary); line-height: 1; }
.rank-bar { height: 8px; border-radius: 4px; background: var(--bgCanvas); overflow: hidden; } .rank-bar i { display: block; height: 100%; background: var(--accentPrimary); }
.vthemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.vt { border-radius: 14px; overflow: hidden; border: 1px solid var(--borderSubtle); background: var(--bgCanvas); display: flex; flex-direction: column; }
.vt-art { height: 86px; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.vt-art img { width: 44px; height: 44px; } .vt-art .dot { width: 26px; height: 26px; border-radius: 6px; }
.vt-art .acc { position: absolute; left: 10px; bottom: 8px; width: 34px; height: 4px; border-radius: 2px; }
.vt.locked .vt-art { filter: saturate(.35) brightness(.75); }
.vt-foot { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vt-foot b { display: block; font-size: 13px; font-weight: 600; } .vt-foot small { font-size: 12px; color: var(--textMuted); }
.vt-foot button { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borderSubtle); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vt-foot button.unlock { background: var(--accentPrimary); color: var(--onAccent); border-color: transparent; }
.runs { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.runs > div { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bgCanvas); border: 1px solid var(--borderSubtle); }

/* ---------- mobile toggle + dock ---------- */
.mob-tog { grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bgPanel); border: 1px solid var(--borderSubtle); }
.mob-tog button { height: 36px; border: none; border-radius: 9px; font-size: 13px; font-weight: 600; background: transparent; color: var(--textMuted); }
.mob-tog button.on { background: var(--accentPrimary); color: var(--onAccent); }
.dock button { border: none; background: none; color: var(--textMuted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; }
.dock button.on { color: var(--accentPrimary); }

/* ---------- modal, toast ---------- */
.ov { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.md { width: 100%; max-width: 420px; padding: 22px; border-radius: 20px; background: var(--bgPanel); border: 1px solid var(--borderSubtle); box-shadow: 0 30px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 14px; color: var(--textPrimary); }
.md.narrow { max-width: 380px; }
.md h3, .md > h2 { margin: 0; font-size: 22px; font-weight: 700; }
.md p.muted { margin: 0; font-size: 14px; line-height: 1.55; }
.md-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--accentPrimary); display: grid; place-items: center; }
.md-close { border: none; background: none; color: var(--textMuted); font-size: 13px; padding: 6px; }
.code-row { display: flex; gap: 8px; }
.code { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borderSubtle); background: var(--bgCanvas); color: var(--textPrimary); font-family: var(--fontMono); letter-spacing: .1em; text-transform: uppercase; }
.md .center { text-align: center; }
.capsule-art { display: block; width: 110px; height: 110px; margin: 0 auto; filter: drop-shadow(0 0 24px var(--glow)); }
.share-prev { width: 302px; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; margin: 0 auto; border: 1px solid var(--borderSubtle); display: block; background: var(--bgCanvas); }
.share-prev.wide { width: 100%; aspect-ratio: 16 / 9; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: all .3s var(--ease); max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 12px;
  background: var(--textPrimary); color: var(--bgCanvas); font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) { .toast { bottom: 80px; } }

/* ---------- bonus mini-games ---------- */
.big { font: 700 44px var(--fontMono); color: var(--accentPrimary); text-align: center; font-variant-numeric: tabular-nums; }
.md .note { text-align: center; }
.arena { position: relative; height: 260px; background: var(--bgCanvas); border-radius: 12px; overflow: hidden; touch-action: manipulation; border: 1px solid var(--borderSubtle); }
.bug { position: absolute; font-size: 2rem; user-select: none; cursor: pointer; }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick button { font-size: 2.4rem; padding: 18px 0; border-radius: 14px; background: var(--reelWell); border: 1px solid var(--borderSubtle); }
.spinbtn { width: 100%; }

/* ---------- strategy notes (SEO) ---------- */
.notes { max-width: 1080px; width: 100%; margin: 0 auto; padding: 56px 20px 40px; display: flex; flex-direction: column; gap: 22px; }
.notes h2.big { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; text-wrap: pretty; }
.notes h3 { margin: 8px 0 0; font-size: 20px; font-weight: 700; }
.notes p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--textMuted); text-wrap: pretty; max-width: 760px; }
.formulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.formulas > div { padding: 14px 16px; border-radius: 12px; background: var(--bgPanel); border: 1px solid var(--borderSubtle); }
.formulas small { font-size: 12px; color: var(--textMuted); } .formulas div div { margin-top: 6px; font-family: var(--fontMono); font-size: 14px; line-height: 1.5; }
.cmp { overflow-x: auto; border-radius: 12px; border: 1px solid var(--borderSubtle); }
.cmp table { min-width: 560px; width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 10px 14px; border-bottom: 1px solid var(--borderSubtle); text-align: left; }
.cmp th { background: var(--bgPanel); font-weight: 700; }
.cmp td.risk { color: var(--textMuted); } .cmp td.risk.hot { color: var(--dangerSpike); }
.notes .faq h3 { font-size: 16px; } .notes .faq p { font-size: 14px; }
.notes ul { margin: 0; padding-left: 18px; line-height: 1.8; }
footer.foot { padding: 20px 20px 24px; border-top: 1px solid var(--borderSubtle); font-size: 12px; line-height: 1.6; color: var(--textMuted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}