/* ── Limbo Strike: trading-terminal presentation layer ──
   Loaded after styles.css, which still owns fonts, drawer/modal mechanics and
   toasts. This sheet re-points the shared design tokens to the trading palette
   (so every drawer and modal follows) and styles the game screen.
   Green/red = round outcome · blue = target + active controls · green = primary action. */
:root{
  --tr-bg: #070B12;
  --tr-bg-2: #0A1019;
  --tr-panel: #0D141F;
  --tr-panel-2: #121B28;
  --tr-field: #070C14;
  --tr-border: #1A2332;
  --tr-border-2: #253145;
  --tr-text: #ECF1F8;
  --tr-muted: #8D98AB;
  --tr-dim: #5F6B7E;
  --tr-green: #1FE07A;
  --tr-green-rgb: 31, 224, 122;
  --tr-red: #FF4057;
  --tr-red-rgb: 255, 64, 87;
  --tr-blue: #1E9BFF;
  --tr-blue-rgb: 30, 155, 255;
  --tr-radius: 10px;
  --tr-ease: cubic-bezier(.2, .8, .2, 1);
  --gap: 10px;
}
/* Shared Originals tokens → trading palette (drawers, modals, toasts, loading).
   Unconditional: this is the game's own look on every brand, neutral included. */
:root{
  --bg: var(--tr-bg);
  --bg-secondary: var(--tr-bg-2);
  --surface-default: var(--tr-panel-2);
  --surface-raised: #1A2535;
  --surface-overlay: var(--tr-panel);
  --border-default: var(--tr-border);
  --border-strong: var(--tr-border-2);
  --content-primary: var(--tr-text);
  --content-secondary: #C1CADA;
  --content-tertiary: var(--tr-muted);
  --content-disabled: var(--tr-dim);
  --content-inverse: #FFFFFF;
  --brand-primary: var(--tr-blue);
  --brand-rgb: var(--tr-blue-rgb);
  --brand-secondary: #3AA8FF;
  --brand-highlight: #6CC0FF;
  --brand-border: #1478CC;
  --action-primary: #17D16E;
  --action-rgb: var(--tr-green-rgb);
  --action-secondary: #0BAA55;
  --action-text: #FFFFFF;
  --status-success: var(--tr-green);
  --status-success-strong: #12B860;
  --status-success-rgb: var(--tr-green-rgb);
  --status-error: var(--tr-red);
  --status-error-rgb: var(--tr-red-rgb);
  --shadow-neutral: #000000;
}

html, body{ background: var(--tr-bg); }
#root{ height: var(--app-height, 100dvh); }

.tr-app{
  width: 100%; margin: 0;
  height: var(--app-height, 100dvh);
  display: flex; flex-direction: column;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  color: var(--tr-text);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(var(--tr-blue-rgb), 0.07), transparent 60%),
    var(--tr-bg);
  font-variant-numeric: tabular-nums;
  scrollbar-width: none;
}
.tr-app::-webkit-scrollbar{ display: none; }
.tr-app button{ font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tr-app button:disabled{ cursor: default; }
.tr-app :focus-visible{ outline: 2px solid var(--tr-blue); outline-offset: 2px; }

/* ── Header ── */
.th{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 54px; padding-top: env(safe-area-inset-top);
}
.th-logo{ font-size: 19px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.th-logo b{ font-weight: 800; }
.th-logo span{ font-weight: 300; }
.th-right{ display: flex; align-items: center; gap: 6px; }
.th-balance{
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px;
  border: 1px solid var(--tr-border-2); border-radius: 8px; background: var(--tr-panel);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.th-cur{ color: var(--tr-muted); font-weight: 500; }
.th-balance--up{ color: var(--tr-green); border-color: rgba(var(--tr-green-rgb), .55); box-shadow: 0 0 16px rgba(var(--tr-green-rgb), .18); }
.th-balance--down{ color: #FF8A98; border-color: rgba(var(--tr-red-rgb), .4); }
.th-menu-wrap{ position: relative; }
.th-menu-btn{
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--tr-border-2); border-radius: 8px; background: var(--tr-panel);
}
.th-menu-btn svg{ width: 17px; height: 17px; }
.th-backdrop{ position: fixed; inset: 0; z-index: 40; }
.th-menu{
  position: absolute; right: 0; top: 42px; z-index: 41; min-width: 190px; padding: 5px;
  background: var(--tr-panel-2); border: 1px solid var(--tr-border-2); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); animation: tr-pop .16s var(--tr-ease);
}
.th-menu-item{
  width: 100%; display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
  font-size: 13px; text-align: left;
}
.th-menu-item:hover{ background: rgba(255,255,255,.05); }
.th-menu-item svg{ width: 16px; height: 16px; color: var(--tr-muted); }
@keyframes tr-pop{ from{ opacity: 0; transform: translateY(-4px) scale(.98); } to{ opacity: 1; transform: none; } }

/* ── Layout ── */
.tr-body{ display: flex; flex-direction: column; gap: var(--gap); }
.tr-left, .tr-right{ display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }


/* ── Chart ── */
/* Chart + vertical target dial side by side */
.tr-chartrow{
  display: flex; height: clamp(240px, 44vh, 460px); overflow: hidden;
  border: 1px solid var(--tr-border); border-radius: 12px; background: var(--tr-field);
}
.tc{ position: relative; flex: 1; min-width: 0; }
.tc-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.tc-wins{
  position: absolute; right: 22px; top: 8px; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  transition: opacity .4s ease;
}
.tc-wins--out{ opacity: 0; }
.tc-payout{
  padding: 4px 9px; border-radius: 7px;
  background: rgba(var(--tr-green-rgb), .12); border: 1px solid rgba(var(--tr-green-rgb), .45);
  color: var(--tr-green); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  animation: tc-pay .35s var(--tr-ease) both;
}
/* a streak: every pill glows */
.tc-payout--streak{ box-shadow: 0 0 14px rgba(var(--tr-green-rgb), .35); border-color: rgba(var(--tr-green-rgb), .75); animation: tc-pay .35s var(--tr-ease) both, tc-glow 1.4s ease-in-out infinite alternate; }
@keyframes tc-pay{ from{ opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes tc-glow{ to{ box-shadow: 0 0 22px rgba(var(--tr-green-rgb), .6); } }
.tc .insufficient-toast, .tc .alert-toast{ top: 46%; }

/* ── Target presets ── */
.tp{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tp-btn{
  height: 40px; border: 1px solid var(--tr-border); border-radius: var(--tr-radius);
  background: var(--tr-panel); font-size: 15px; font-weight: 600;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .1s ease;
}
/* Hover only on real pointers, and never over the selected state (touch
   screens keep :hover on the last tapped button, which hid the selection). */
@media (hover: hover){ .tp-btn:hover:not(:disabled):not(.tp-btn--on){ border-color: var(--tr-border-2); background: var(--tr-panel-2); } }
.tp-btn:active:not(:disabled){ transform: scale(.98); }
/* Selected preset: no stroke or glow, the value goes blue on a tinted panel (same as the stepper chips) */
.tp-btn--on{
  border-color: transparent; background: rgba(var(--tr-blue-rgb), .14);
}
.tp-btn:disabled{ opacity: .45; }
.tr-app .tp-btn--on{ color: #FFFFFF; } /* selected preset: white value on the blue tint */

/* ── BET button ── */
.tb{
  position: relative; width: 100%; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #2BEA86 0%, #12C463 55%, #0AA853 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  transition: transform .1s ease, filter .18s ease, box-shadow .18s ease;
}
.tr-app .tb{ color: #FFFFFF; }
.tb-label{ font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-shadow: none; }
.tr-app .tb .tb-label{ color: #06130B; } /* dark text on the green BET button, pot or not */
.tb:hover:not(:disabled){ filter: brightness(1.06); }
.tb:active:not(:disabled){ transform: scale(.985); }
.tb:disabled{ filter: grayscale(.75) brightness(.7); box-shadow: none; }
.tb--busy::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  animation: tb-shine 0.9s linear infinite;
}
.tr-app .tb--busy:disabled{ filter: none; }
.tb--stop{
  background: linear-gradient(180deg, #FF5A6E 0%, #E8344B 60%, #CC2239 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
@keyframes tb-shine{ from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }

/* ── BET + CASHOUT side by side (the cashout appears once a pot is on the table) ── */
.tb-row{ display: flex; gap: 8px; }
.tb-row .tb{ flex: 1; width: auto; min-width: 0; }
/* Pot on the table — dice's action row, 1:1: Cashout = content-width secondary
   (icon 20px, gap 4px, padding 10px 16px), Bet = the flexible primary; both one
   line, 600 weight, 16px (14px on phones), sentence case. */
.tb--cashout{
  order: -1; flex: none; gap: 4px; padding: 10px 16px;
  background: var(--tr-panel-2); /* neutral panel, no green border: only the text is green */
  border: 1px solid var(--tr-border);
  box-shadow: none;
  animation: tb-cashout-in .22s var(--tr-ease, ease-out) both;
}
.tr-app .tb--cashout{ color: #2BEA86; }
.tb-row .tb--cashout, .tb-row .tb--pot{ flex: 1 1 50%; width: 50%; min-width: 0; box-sizing: border-box; padding-inline: 8px; } /* exactly half and half, whatever the padding */
.tb--cashout svg{ width: 20px; height: 20px; flex: none; }
.tb--cashout .tb-label, .tb--pot .tb-label{ font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; text-shadow: none; white-space: nowrap; font-variant-numeric: tabular-nums; } /* tabular digits: the count-up does not shift the icon */
.tr-app .tb--cashout .tb-label{ color: #2BEA86; }

.tb--cashout:hover:not(:disabled){ filter: brightness(1.12); }
.tb--cashout:disabled{ filter: grayscale(.4) brightness(.7); animation: none; box-shadow: none; }
@keyframes tb-cashout-in{ from{ opacity: 0; transform: translateX(-12px); } to{ opacity: 1; transform: none; } }
/* "+amount" drifting up out of the Cashout button on every pot increase */
.tb--cashout{ position: relative; overflow: visible; }
.tb-float{
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -40%); pointer-events: none;
  padding: 3px 9px; border-radius: 999px; background: #0E2A1B; border: 1px solid rgba(var(--tr-green-rgb), .6);
  color: #2BEA86; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0;
  animation: tb-float 1.25s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes tb-float{ 0%{ opacity: 0; transform: translate(-50%, 10%) scale(.85); } 18%{ opacity: 1; transform: translate(-50%, -55%) scale(1); } 75%{ opacity: 1; } 100%{ opacity: 0; transform: translate(-50%, -150%) scale(1); } }

/* ── Auto button (idle, in the Cashout slot) and the Stop state ── */
.tb-auto{
  flex: none; width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid var(--tr-border-2); border-radius: 12px; background: var(--tr-panel-2);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tr-app .tb-auto{ color: var(--tr-text); }
.tb-auto svg{ width: 20px; height: 20px; }
.tb-auto:hover:not(:disabled){ border-color: var(--tr-blue); }
.tb-auto:disabled{ opacity: .45; }
/* Auto Play (idle) and Stop (running) sit to the RIGHT of BET, half width like Cashout */
.tb-row .tb--auto{ order: -1; } /* Auto Play on the LEFT, like Cashout; BET stays right */
.tb-row .tb--stop{ order: 1; }
.tb-row .tb--auto{ background: var(--tr-panel-2); border-color: var(--tr-border-2); animation: none; }
.tr-app .tb--auto, .tr-app .tb--auto .tb-label{ color: var(--tr-text); }
.tb--auto svg{ width: 18px; height: 18px; }
.tb--auto:hover:not(:disabled), .tb--auto:active:not(:disabled), .tb--auto:focus-visible{ border-color: var(--tr-border-2); filter: none; outline: none; } /* no blue press state */
.tb-row .tb--stop{ background: var(--tr-panel-2); border-color: rgba(var(--tr-red-rgb), .55); } /* running: live P/L left, Stop right (Oto, 2026-10-12) */
/* Live profit / loss of the auto run, in the Cashout slot (not a button) */
.tb-row .tb--pl{ order: -1; cursor: default; animation: none; background: var(--tr-panel-2); border-color: rgba(var(--tr-green-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--tr-green-rgb), .12) inset; }
.tr-app .tb--pl, .tr-app .tb--pl .tb-label{ color: #2BEA86; }
.tb-row .tb--pl-neg{ border-color: rgba(var(--tr-red-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--tr-red-rgb), .12) inset; }
.tr-app .tb--pl-neg, .tr-app .tb--pl-neg .tb-label{ color: #FF6E80; }
.tr-app .tb--stop, .tr-app .tb--stop .tb-label{ color: #FF6E80; }
.tb--stop svg{ width: 18px; height: 18px; }
.tb--stop:disabled{ opacity: .6; filter: none; }
/* Auto play sheet */
.as{ display: flex; flex-direction: column; gap: 12px; }
.as-dial{ flex: none; height: 64px; border: 1px solid var(--tr-border); border-radius: 12px; background: var(--tr-field); overflow: hidden; }
.as-dial .wr{ height: 100%; }
.as-label{ font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tr-muted); }
.as-hint{ margin: -6px 0 0; font-size: 12px; color: var(--tr-muted); }
.tq--4{ grid-template-columns: repeat(4, 1fr); }
.as-money-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-money{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.as-money-in{ display: flex; align-items: center; width: 100%; height: 40px; padding: 0 10px; gap: 6px; border: 1px solid var(--tr-border); border-radius: 10px; background: var(--tr-field); color: var(--tr-text); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; text-align: left; }
.as-money-in--empty{ color: var(--tr-muted); font-weight: 500; }
.as-money-sym{ color: var(--tr-muted); font-size: 13px; }
.drawer .tq-btn{ color: var(--tr-text); font-family: inherit; cursor: pointer; }
.as .drw-card{ margin: 0; }
@media (max-width: 480px){ .tb-auto{ width: 46px; height: 46px; } }

/* ── How to Play quick start: illustrated snap-scrolling cards + dots ── */
.htp{ display: flex; flex-direction: column; gap: 10px; }
.htp-cards{
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; margin: 0 -2px; padding: 0 2px;
}
.htp-cards::-webkit-scrollbar{ display: none; }
.htp-card{
  flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 14px; background: var(--tr-field); border: 1px solid var(--tr-border);
}
.htp-art{ border-radius: 12px; overflow: hidden; }
.htp-svg{ display: block; width: 100%; height: auto; font-family: var(--font-mono), var(--font-sans, inherit); }
.htp-text{ display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px; align-items: start; }
.htp-n{ grid-row: 1 / span 2; font-size: 22px; font-weight: 800; line-height: 1; color: var(--tr-blue); font-variant-numeric: tabular-nums; }
.htp-text b{ font-size: 13.5px; font-weight: 700; color: var(--tr-text); }
.htp-desc{ font-size: 12px; line-height: 1.5; color: var(--content-secondary); }
.htp-nav{ display: flex; align-items: center; justify-content: center; gap: 14px; }
.htp-arrow{
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--tr-border-2); border-radius: 50%; background: var(--tr-panel-2); color: var(--tr-text); cursor: pointer;
  transition: border-color .18s ease, opacity .18s ease;
}
.htp-arrow svg{ width: 14px; height: 14px; }
@media (hover: hover){ .htp-arrow:hover:not(:disabled){ border-color: var(--tr-blue); } } /* no sticky blue ring after a tap on phones */
.htp-arrow:disabled{ opacity: .3; cursor: default; }
.htp-dots{ display: flex; justify-content: center; gap: 6px; }
.htp-dot{ width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.18); cursor: pointer; transition: width .2s ease, background .2s ease; }
.htp-dot--on{ width: 18px; background: var(--tr-blue); }
/* a touch of motion in the art */
.htp-anim-bar{ animation: htp-rise 2.4s cubic-bezier(.2,.8,.3,1) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes htp-rise{ 0%{ height: 0; y: 104; } 45%{ height: 72; y: 32; } 85%{ height: 72; y: 32; } 100%{ height: 0; y: 104; } }
.htp-anim-tag{ animation: htp-tag 2.4s ease infinite; }
@keyframes htp-tag{ 0%, 40%{ opacity: 0; } 55%, 85%{ opacity: 1; } 100%{ opacity: 0; } }
.htp-anim-handle{ animation: htp-nudge 2s ease-in-out infinite; }
@keyframes htp-nudge{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
.htp-anim-next{ animation: htp-pulse 1.6s ease-in-out infinite; }
@keyframes htp-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: .55; } }
/* first-visit modal */
.htp-modal{ text-align: left; }
.drawer--htp{ max-width: 440px; }
/* short phones: tighter cards so the Start button stays on screen */
@media (max-height: 760px){
  .htp-modal .htp-card{ gap: 8px; padding: 8px; }
  .htp-modal .htp-text b{ font-size: 13px; }
  .htp-modal .htp-desc{ font-size: 11.5px; line-height: 1.45; }
  .htp-modal .htp-n{ font-size: 19px; }
  .htp-foot{ gap: 8px; margin-top: 10px; }
  .htp-modal .fbs-btn{ height: 42px; margin-top: 0; }
}
.htp-modal h2{ text-align: center; }
.htp-foot{ display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.htp-dont{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--content-secondary); cursor: pointer; user-select: none; }
.htp-dont input{ position: absolute; opacity: 0; width: 0; height: 0; }
.htp-box{ width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--tr-border-2); background: var(--tr-field); position: relative; flex: none; }
.htp-dont input:checked + .htp-box{ background: var(--tr-blue); border-color: var(--tr-blue); }
.htp-dont input:checked + .htp-box::after{ content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.htp-start{ width: 100%; }
.ab-content .htp{ margin-bottom: 2px; }
.ab-more{ margin: 6px 0 -4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tr-muted); }

/* Advanced: switch + a target row per step */
.as-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.as-switch{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--content-secondary); cursor: pointer; user-select: none; }
.as-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.as-switch-track{ position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--tr-border-2); transition: background .18s ease; }
.as-switch-track::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.as-switch input:checked + .as-switch-track{ background: var(--tr-blue); }
.as-switch input:checked + .as-switch-track::after{ transform: translateX(14px); }
.as-row--turbo{ padding: 10px 12px; border: 1px solid var(--tr-border); border-radius: 10px; background: var(--tr-field); }
.as-turbo-text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-turbo-text b{ font-size: 13px; font-weight: 600; color: var(--tr-text); }
.as-hint-inline{ font-size: 11.5px; color: var(--tr-muted); line-height: 1.4; }
.as-switch-bolt, .tb-bolt{ display: inline-flex; align-items: center; color: #2BEA86; }
.as-switch-bolt svg, .tb-bolt svg{ width: 14px; height: 14px; filter: drop-shadow(0 0 4px rgba(43,234,134,.55)); }
.tb-bolt{ margin-left: 6px; vertical-align: -2px; }
.tb--stop .tb-bolt svg{ width: 13px; height: 13px; }
.as-steps{ display: flex; flex-direction: column; gap: 6px; }
.as-step{ display: grid; grid-template-columns: 52px 1fr 68px; align-items: center; gap: 6px; }
.as-step-n{ font-size: 11px; font-weight: 600; color: var(--tr-muted); white-space: nowrap; }
.as-step-chips{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; min-width: 0; }
.as-step-chips .tq-btn{ height: 30px; font-size: 11px; padding: 0; }
.as-step-in{ display: flex; align-items: center; justify-content: flex-end; height: 30px; padding: 0 8px; border: 1px solid var(--tr-border); border-radius: 8px; background: var(--tr-field); color: var(--tr-text); font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.as-step-in:hover{ border-color: var(--tr-border-2); }
.as-step-in i{ font-style: normal; font-size: 11px; color: var(--tr-muted); margin-left: 1px; }

/* ── Round toast over the chart: pot cashed out (green) or lost (red) ── */
.rt{
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  z-index: 60; pointer-events: none; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 190px; max-width: calc(100% - 32px); padding: 14px 24px 13px;
  border-radius: 16px; background: rgba(13,20,31,.95); border: 1px solid var(--tr-border-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  animation: rt-in .3s var(--tr-ease) both;
}
.rt--cashout{ border-color: rgba(var(--tr-green-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--tr-green-rgb), .25), 0 0 44px rgba(var(--tr-green-rgb), .3), 0 18px 50px rgba(0,0,0,.55); }
.rt--lost{ border-color: rgba(var(--tr-red-rgb), .75); box-shadow: 0 0 0 1px rgba(var(--tr-red-rgb), .22), 0 0 40px rgba(var(--tr-red-rgb), .25), 0 18px 50px rgba(0,0,0,.55); }
.rt-kicker{ font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rt--cashout .rt-kicker{ color: #2BEA86; }
.rt--lost .rt-kicker{ color: var(--tr-red); }
.rt-amount{ font-family: var(--font-mono); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rt--cashout .rt-amount{ color: #FFFFFF; text-shadow: 0 0 22px rgba(var(--tr-green-rgb), .6); }
.rt--lost .rt-amount{ color: var(--tr-red); text-shadow: 0 0 18px rgba(var(--tr-red-rgb), .45); }
@keyframes rt-in{ from{ opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
@keyframes rt-shake{ 0%,100%{ transform: translate(-50%, -50%); } 20%{ transform: translate(calc(-50% - 6px), -50%); } 40%{ transform: translate(calc(-50% + 6px), -50%); } 60%{ transform: translate(calc(-50% - 4px), -50%); } 80%{ transform: translate(calc(-50% + 4px), -50%); } }
@media (max-width: 480px){ .rt{ min-width: 160px; padding: 12px 18px 11px; } .rt-amount{ font-size: 26px; } }

/* ── Multiplier stepper in the locked bet field (dice's MultiplierTimeline):
   played targets muted, the compounded pot multiplier current (green border),
   the next value with the step-forward icon ── */
.bstep--pot .bstep-amount:disabled{ opacity: 1; padding: 0 6px; overflow: hidden; }
.bstep--pot .bstep-adj:disabled{ opacity: .3; }
/* Dice's ladder: left-to-right, chips never move; the row scrolls so the current
   chip sits in the centre. A soft fade on both edges where rungs scroll off. */
.mt{
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 100%; padding-inline: 4px; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; cursor: grab;
}
.mt::-webkit-scrollbar{ display: none; }
.mt-slot{ flex: none; display: inline-flex; }
.mt .mt-slot:last-child{ margin-right: 2px; } /* keeps the rounded border clear of the scroll edge */
.mt-chip{
  flex: none; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
  height: 30px; padding: 0 11px; border-radius: 9px; border: 2px solid transparent;
  font-family: var(--font-mono); font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap;
  background: var(--tr-panel-2); color: var(--tr-text);
  animation: tr-pop .2s var(--tr-ease) backwards; /* backwards, not both: a filled "transform: none" would override the slide */
}
.mt-chip--played{ color: #5B6B80; background: rgba(255,255,255,.04); }
/* No outer stroke: the value itself carries the colour (green = won, blue = next) */
.mt-chip--current{ color: #2BEA86; background: rgba(var(--tr-green-rgb), .1); }
.mt-chip--next{ color: #FFFFFF; background: rgba(30,155,255,.16); } /* next: white value + icon on the blue tint */
.mt-chip--upcoming{ color: #FFFFFF; opacity: .85; } /* dice: white value only, flat */
.mt-chip--next svg{ width: 16px; height: 16px; opacity: .85; }
/* Motion (dice's dd-settle / dd-shimmer): the promoted chip pops and a light sweeps it */
.mt-chip{ position: relative; overflow: hidden; }
.mt-chip--promoted{ animation: tr-pop .2s var(--tr-ease) backwards, dd-settle 560ms cubic-bezier(.34, 1.25, .64, 1) backwards; } /* tr-pop stays first so it is not restarted when the class drops */
.mt-shimmer{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-120%); animation: dd-shimmer 800ms cubic-bezier(.33, .9, .4, 1) forwards; }
@keyframes dd-settle{ 0%{ transform: scale(.96); } 55%{ transform: scale(1.05); } 100%{ transform: scale(1); } }
@keyframes dd-shimmer{ 0%{ transform: translateX(-120%); } 100%{ transform: translateX(120%); } }
@media (max-width: 480px){ .mt-chip{ height: 28px; padding: 0 9px; font-size: 12px; } .mt{ gap: 6px; } }

/* ── Bet amount (full-width row: label · field) ── */
@keyframes tc-shake{ 0%,100%{ transform: none; } 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }

/* ── Quick bet / rounds chips ── */
.tq{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tq-btn{
  height: 34px; border: 1px solid var(--tr-border); border-radius: 8px; background: var(--tr-panel);
  font-size: 13px; font-weight: 600;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover){ .tq-btn:hover:not(:disabled):not(.tq-btn--on){ border-color: var(--tr-border-2); background: var(--tr-panel-2); } }
.tq-btn--on{ border-color: var(--tr-blue); background: rgba(var(--tr-blue-rgb), .13); box-shadow: 0 0 14px rgba(var(--tr-blue-rgb), .2); }
.tq-btn:disabled{ opacity: .4; }

.tr-right .fr-bar{ margin: 0; }

/* ── Desktop: chart + target tools left, betting panel right ── */
/* ── Desktop: full-width chart on top, one horizontal order bar underneath ──
   (bet amount · quick amounts · BET + auto). The page never scrolls; the
   chart takes whatever height is left. */
@media (min-width: 960px){
  .tr-app{ padding: 0 24px 18px; --gap: 12px; overflow: hidden; }
  .th{ min-height: 64px; }
  .th-logo{ font-size: 22px; }
  .tr-body{ flex: 1; min-height: 0; }
  .tr-left{ flex: 1; min-height: 0; }
  .tr-chartrow{ flex: 1 1 0; height: auto; min-height: 280px; }
  .tr-right{
    display: grid; grid-template-columns: minmax(360px, 1fr) minmax(320px, 1fr);
    align-items: center; gap: 12px;
    padding: 12px; border: 1px solid var(--tr-border); border-radius: 16px;
    background: linear-gradient(180deg, rgba(13,20,31,.9), rgba(10,16,25,.9));
  }
  .tr-right .fr-bar{ grid-column: 1 / -1; }
}

/* ── Phones / tablets: everything on one screen, whatever the height ──
   The page never scrolls: the chart takes whatever height is left and every
   control scales with the viewport height. */
@media (max-width: 959px){
  .tr-app{ overflow: hidden; padding-bottom: max(8px, env(safe-area-inset-bottom)); --gap: clamp(5px, 1dvh, 10px); }
  .tr-body{ flex: 1; min-height: 0; }
  .tr-left{ flex: 1; min-height: 0; }
  .tr-chartrow{ flex: 1 1 0; height: auto; min-height: 96px; }

  .th{ min-height: clamp(42px, 6.4dvh, 54px); }
  .th-balance, .th-menu-btn{ height: clamp(30px, 4.4dvh, 34px); }
  .th-menu-btn{ width: clamp(30px, 4.4dvh, 34px); }
  .tp-btn{ height: clamp(32px, 4.8dvh, 40px); font-size: clamp(13px, 1.9dvh, 15px); }
  .tb{ height: clamp(42px, 6dvh, 50px); }
  .tb-label{ font-size: clamp(15px, 2.1dvh, 17px); }
  .tq-btn{ height: clamp(28px, 4.2dvh, 34px); }
}
/* Landscape phones: chart + target tools left, betting panel right. */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 540px){
  .th{ min-height: 40px; }
  .tr-body{ flex-direction: row; align-items: stretch; }
  .tr-right{ flex: none; width: min(300px, 42vw); overflow-y: auto; scrollbar-width: none; }
}
/* The narrowest phones. */
@media (max-width: 359px){
  .tr-app{ padding-left: 10px; padding-right: 10px; }
  .th-logo{ font-size: 15px; }
  .th-balance{ font-size: 12.5px; padding: 0 8px; gap: 3px; }
  .tq-btn{ font-size: 11.5px; }
}

/* =============================================================================
   Drawers & modals in the trading style
   ============================================================================= */
.drawer-backdrop, .modal-overlay, .modal-overlay--fr, .se-overlay{
  background: rgba(3, 6, 11, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.drawer{
  background: var(--tr-bg-2);
  border: 1px solid var(--tr-border); border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -18px 50px rgba(0,0,0,.55), 0 -1px 0 rgba(var(--tr-blue-rgb), .25);
}
.drawer::before{
  content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 7px auto 0;
  border-radius: 2px; background: var(--tr-border-2);
}
.drawer-header{
  height: 46px; padding: 0 12px 0 16px; background: transparent;
  border-bottom: 1px solid var(--tr-border);
}
.drawer--history .drawer-header{ border-bottom: 1px solid var(--tr-border); }
.drawer-title{ font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.drawer-close{
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--tr-border-2); background: var(--tr-panel); color: var(--tr-muted);
}
.drawer-close:hover{ color: var(--tr-text); border-color: var(--tr-blue); }
.drawer-close svg{ width: 13px; height: 13px; }
.drawer-content{ background: transparent; padding: 12px 14px 16px; }
/* sticky footer (Auto Play's Start button): the content scrolls underneath it */
.drawer-footer{ flex: none; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tr-border); background: var(--tr-bg-2); }
.drawer-footer .pf-btn{ width: 100%; margin: 0; }
@media (min-width: 681px){ .drawer-footer{ border-radius: 0 0 16px 16px; } }
.drawer-tabs{
  margin: 12px 14px 4px; padding: 3px; gap: 3px;
  background: var(--tr-field); border: 1px solid var(--tr-border); border-radius: 10px;
}
.drawer-tab{ height: 30px; border-radius: 7px; font-size: 12px; color: var(--tr-muted); filter: none; }
.drawer-tab--active{
  background: rgba(var(--tr-blue-rgb), .14); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(var(--tr-blue-rgb), .55);
}
.pf-desc, .ab-intro{ font-size: 12px; line-height: 1.55; color: var(--content-secondary); }

/* Cards / panels inside drawers */
.drw-card, .pf-steps, .ab-sec, .hx-item{
  background: var(--tr-panel); border: 1px solid var(--tr-border); border-radius: 12px;
}
.drw-card{ padding: 12px; gap: 6px; }
.drw-stat-row{ height: 26px; }
.drw-stat-label{ color: var(--tr-muted); }
.ab-inner, .hx-block, .hx-money{ background: var(--tr-field); border: 1px solid var(--tr-border); border-radius: 10px; }
.ab-inner{ padding: 12px; gap: 10px; }
.ab-sec-head{ padding: 11px 12px 0; }
.ab-sec-title{ font-size: 13px; font-weight: 600; }
.ab-sec-body{ padding: 11px 10px 10px; gap: 10px; }
.ab-list{ margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.55; color: var(--content-secondary); }
.ab-list li::marker{ color: var(--tr-blue); }
.ab-odds{ width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-odds th{ padding: 0 0 6px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tr-muted); }
.ab-odds td{ padding: 6px 0; border-top: 1px solid var(--tr-border); color: var(--content-primary); font-weight: 600; }
.ab-odds th:not(:first-child), .ab-odds td:not(:first-child){ text-align: right; }
.ab-steps{ gap: 9px; font-size: 12px; line-height: 1.5; color: var(--content-secondary); }
.ab-steps li{ align-items: flex-start; }
.ab-step-n{
  flex: 0 0 18px; height: 18px; display: inline-grid; place-items: center; text-align: center;
  border-radius: 5px; background: rgba(var(--tr-blue-rgb), .14); color: #8CCBFF;
  font-size: 10.5px; font-weight: 700;
}
.ab-lr{ font-size: 12px; color: var(--tr-muted); }
.ab-lr b{ color: var(--tr-text); font-weight: 600; }

/* Provably fair */
.pf-steps{ padding: 12px; }
.pf-step-icon{
  width: 24px; height: 24px; min-width: 24px; padding: 0; border-radius: 6px;
  background: rgba(var(--tr-blue-rgb), .14); color: #8CCBFF; font-size: 11px;
}
.pf-step-text{ font-size: 12px; }
.pf-step-arrow-line{ height: 14px; border-left-color: var(--tr-border-2); }
.pf-input{
  min-height: 48px; padding: 6px 8px 6px 12px; gap: 10px;
  background: var(--tr-field); border: 1px solid var(--tr-border-2); border-radius: 10px;
}
.pf-input:focus-within{ border-color: var(--tr-blue); }
.pf-input-label{ font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tr-muted); }
.pf-input-value{ font-size: 13px; font-variant-numeric: tabular-nums; }
.pf-input-value.green, .pf-input-value .green{ color: var(--tr-green); }
.pf-input-btn{ width: 28px; height: 28px; min-width: 28px; border-radius: 7px; background: var(--tr-panel-2); border: 1px solid var(--tr-border-2); }
.pf-btn{
  height: 40px; min-height: 40px; border-radius: 10px; font-size: 13px;
  background: var(--tr-panel-2); border: 1px solid var(--tr-border-2);
}
.pf-btn:hover:not(:disabled){ border-color: var(--tr-blue); }
.pf-btn--primary, .hx-verify{
  background: linear-gradient(180deg, #2BEA86, #0FB85B); border: 0; color: #06130B;
  font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(18,196,99,.25);
}

/* History */
.hx-list{ gap: 8px; }
.hx-head{ min-height: 46px; padding: 8px 12px; gap: 9px; }
.hx-icon, .hx-ic{ width: 16px; height: 16px; }
.hx-txt{ font-size: 13px; }
.hx-chip{ height: 22px; padding: 0 8px; border-radius: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hx-chip--win{ background: rgba(var(--tr-green-rgb), .1); color: var(--tr-green); box-shadow: inset 0 0 0 1px rgba(var(--tr-green-rgb), .35); }
.hx-chip--lose{ background: rgba(var(--tr-red-rgb), .1); color: var(--tr-red); box-shadow: inset 0 0 0 1px rgba(var(--tr-red-rgb), .35); }
.hx-body{ padding: 0 10px 10px; gap: 8px; }
.hx-mr{ font-size: 12px; }
.hx-verify{ height: 36px; border-radius: 9px; font-size: 12.5px; }
.hx-verify--ok{ background: rgba(var(--tr-green-rgb), .12); color: var(--tr-green); box-shadow: inset 0 0 0 1px rgba(var(--tr-green-rgb), .4); }
.hx-verify--fail{ background: rgba(var(--tr-red-rgb), .12); color: var(--tr-red); box-shadow: inset 0 0 0 1px rgba(var(--tr-red-rgb), .4); }
.hx-vres{ border-radius: 10px; border: 1px solid var(--tr-border); }

/* Centered modals (auto summary, free rounds, session expired) */
.modal--fr, .modal, .se-modal{
  background: linear-gradient(180deg, var(--tr-panel-2), var(--tr-bg-2));
  border: 1px solid var(--tr-border-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--tr-blue-rgb), .12), 0 -1px 0 rgba(var(--tr-blue-rgb), .35) inset;
}
.modal--fr{ max-width: 360px; padding: 20px 16px 16px; }
.fr-wordmark, .se-logo--text{
  display: block; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted);
  margin-bottom: 10px;
}
.fr-wordmark b, .se-logo--text b{ font-weight: 800; color: var(--tr-text); }
.fr-wordmark span, .se-logo--text span{ font-weight: 300; }
.modal--fr h2{ font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--tr-text); }
.fbs-stats{ gap: 6px; margin-bottom: 8px; }
.fbs-stat{
  display: flex; flex-direction: column; gap: 2px; padding: 9px 6px;
  background: var(--tr-field); border: 1px solid var(--tr-border); border-radius: 10px;
}
.fbs-stat-label{ font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--tr-muted); }
.fbs-stat-val{ font-size: 17px; font-variant-numeric: tabular-nums; }
.fbs-winnings{
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--tr-field); border: 1px solid var(--tr-border); border-radius: 10px;
  font-size: 13px;
}
.fbs-winnings-val{ font-size: 16px; font-variant-numeric: tabular-nums; }
/* Auto summary hero: the net result as the cashout card (green glow, count-up) or a quiet red */
.fbs-hero{
  display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0 0 12px; padding: 14px 16px 13px;
  border-radius: 14px; background: var(--tr-field); border: 1px solid var(--tr-border);
}
.fbs-hero--win{ border-color: rgba(var(--tr-green-rgb), .75); background: rgba(13,20,31,.6); box-shadow: 0 0 0 1px rgba(var(--tr-green-rgb), .25), 0 0 40px rgba(var(--tr-green-rgb), .28); animation: fbs-hero-in .45s cubic-bezier(.34, 1.25, .64, 1) both; }
.fbs-hero--loss{ border-color: rgba(var(--tr-red-rgb), .45); }
.fbs-hero-kicker{ font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tr-muted); }
.fbs-hero--win .fbs-hero-kicker{ color: #2BEA86; }
.fbs-hero--loss .fbs-hero-kicker{ color: var(--tr-red); }
.fbs-hero-amount{ font-family: var(--font-mono); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--tr-text); }
.fbs-hero--win .fbs-hero-amount{ color: #FFFFFF; text-shadow: 0 0 22px rgba(var(--tr-green-rgb), .6); }
.fbs-hero--loss .fbs-hero-amount{ color: var(--tr-red); }
.fbs--win{ border-color: rgba(var(--tr-green-rgb), .45) !important; box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--tr-green-rgb), .18), 0 0 60px rgba(var(--tr-green-rgb), .22) !important; }
@keyframes fbs-hero-in{ from{ opacity: 0; transform: scale(.86); } }
.fbs-btn, .fbw-btn{
  height: 44px; margin-top: 12px; border-radius: 11px; font-size: 14px; letter-spacing: .05em;
  background: linear-gradient(180deg, #2BEA86 0%, #12C463 55%, #0AA853 100%);
  box-shadow: 0 8px 22px rgba(18,196,99,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.fbs-btn, .fbw-btn, .modal .fbs-btn, .modal .fbw-btn, .tr-app .pf-btn--primary, .tr-app .hx-verify{ color: #06130B; } /* dark text on every green button (modals live outside .tr-app) */
.fbw-desc{ font-size: 14px; }
.fbw-hl{ color: var(--tr-green); }
.fbw-sub{ font-size: 12.5px; }
.fbs-played{ font-size: 13px; }
.fbs-total{ font-size: 18px; }
.se-title{ font-size: 18px; font-weight: 800; }
.se-text{ font-size: 13px; color: var(--content-secondary); }

/* Toasts */
.alert-toast, .insufficient-toast{
  background: rgba(13,20,31,.96); border: 1px solid var(--tr-border-2); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 12px;
}
.insufficient-toast .m-bet-currency{ background: rgba(var(--tr-red-rgb), .15); color: var(--tr-red); border-radius: 6px; }
.fr-bar{ background: rgba(var(--tr-green-rgb), .06); border-color: rgba(var(--tr-green-rgb), .3); font-size: 12px; }
/* Inside the locked bet field: no box of its own, fills the field */
.bstep--pot .bstep-amount .fr-bar{ width: 100%; height: 100%; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bstep--pot .bstep-amount .fr-bar-win{ margin-left: auto; }
.fr-bar-bet{ color: var(--tr-muted); font-weight: 600; }

/* Loading screen */
/* Loading: dark green-black stage, the plate wordmark, a glowing green bar with
   its percentage, and a perspective grid floor rolling towards the player. */
/* Loading: a still, layered gradient backdrop. Dark green-black stage, a soft
   glow above, a bright mint horizon that fades down into the floor. */
.loading-screen{
  overflow: hidden;
  /* one quiet green wash over the whole screen: strongest low-centre, fading evenly to the edges */
  background:
    radial-gradient(90% 70% at 50% 72%, rgba(31,224,122,.16) 0, rgba(31,224,122,.07) 45%, rgba(31,224,122,0) 100%),
    radial-gradient(80% 50% at 50% 12%, rgba(31,224,122,.05) 0, rgba(31,224,122,0) 70%),
    linear-gradient(180deg, #050908 0%, #061009 50%, #06130E 100%);
}
.loading-screen::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 50%, rgba(0,0,0,0) 0, rgba(0,0,0,.3) 100%); pointer-events: none; }
/* one quiet motion: the wash breathes */
.loading-screen::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 70%, rgba(31,224,122,.10) 0, rgba(31,224,122,0) 70%); animation: ld-breathe 6s ease-in-out infinite; }
@keyframes ld-breathe{ 0%, 100%{ opacity: .3; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .loading-screen::before{ animation: none; } }
.loading-content{ position: relative; z-index: 2; transform: translateY(-10vh); }
.loading-text{ text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.loading-wordmark{ font-size: 30px; letter-spacing: .05em; text-transform: uppercase; }
.loading-wordmark b{ font-weight: 800; }
.loading-wordmark span{ font-weight: 300; }
.loading-bar-wrap{ position: relative; overflow: visible; height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); }
.loading-bar{ position: relative; overflow: hidden; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1FD47A, #8DFFC9); box-shadow: 0 0 16px rgba(31,224,122,.75), 0 0 3px #B8FFDD; }
/* a light sweeps along the filled part, so the bar feels alive even while it waits at 90% */
.loading-bar::after{ content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); animation: ld-shimmer 1.6s ease-in-out infinite; }
@keyframes ld-shimmer{ to{ left: 100%; } }
/* exit: the loading screen fades while the game settles in beneath it */
@media (prefers-reduced-motion: reduce){ .loading-bar::after{ animation: none; } }
.loading-pct{ position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px; text-align: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: .32em; color: #B9CFC5; font-variant-numeric: tabular-nums; }
.loading-text{ color: var(--tr-muted); }

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

/* ── Target ruler: vertical swipe dial beside the chart (marker + exact value fixed in the middle) ── */
.wr{
  position: relative; flex: none; width: 56px; overflow: hidden;
  border-left: 1px solid var(--tr-border); background: rgba(13,20,31,.55);
  touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: grab;
}
.wr:focus-visible{ box-shadow: 0 0 0 2px var(--tr-blue); }
.wr:active{ cursor: grabbing; }
.wr-viewport{
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.wr-strip{ position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.wr-tick{ position: absolute; right: 5px; width: 5px; height: 1px; margin-top: -.5px; background: rgba(255,255,255,.22); }
.wr-tick--mid{ width: 8px; background: rgba(255,255,255,.36); }
.wr-tick--major{ width: 12px; height: 1.5px; margin-top: -.75px; background: rgba(255,255,255,.6); }
.wr-tick--off{ opacity: .3; }
.wr-label{
  --k: 0;
  position: absolute; right: 21px;
  transform: translateY(-50%) scale(calc(1 + .15 * var(--k))); transform-origin: 100% 50%;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, #FFFFFF calc(var(--k) * 100%), #8D98AB);
}
.wr-label--off{ opacity: .3; }
.wr-marker{ position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.wr-value{
  position: absolute; left: 50%; top: 0; z-index: 1; transform: translate(-50%, -50%);
  height: 22px; padding: 0 5px; display: flex; align-items: center;
  border-radius: 6px; background: var(--tr-blue); color: #FFFFFF;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px rgba(var(--tr-blue-rgb), .18), 0 0 16px rgba(var(--tr-blue-rgb), .6);
}
.wr-stem{
  position: absolute; right: 0; left: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, #CFE7FF, var(--tr-blue) 30%, var(--tr-blue) 70%, #CFE7FF);
  box-shadow: 0 0 12px rgba(var(--tr-blue-rgb), .85);
}
.wr--off{ opacity: .6; cursor: default; }

.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Chart scrolled back: jump to the newest rounds */
.tc-latest{
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border: 1px solid rgba(var(--tr-blue-rgb), .6); border-radius: 14px;
  background: rgba(10,26,46,.92); color: #CFE7FF; font: 600 12px var(--font-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; animation: tr-pop .18s var(--tr-ease);
}
.tc-latest span{ font-size: 16px; line-height: 1; }

/* Auto play sheet */
.as{ display: flex; flex-direction: column; gap: 12px; }
.as-label{ font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tr-muted); }
.drawer .tq-btn{ color: var(--tr-text); font-family: inherit; cursor: pointer; }
.as .drw-card{ margin: 0; }

/* Presets row (+ the horizontal dial on desktop) */
.tp-row{ display: flex; gap: 8px; align-items: stretch; }
.tp-row .tp{ flex: 1; }

/* Desktop: the same dial, horizontal, beside the presets under the chart */
.wr.wr--h{
  flex: 1; width: auto; height: 64px; align-self: center;
  border: 1px solid var(--tr-border); border-radius: 12px; background: var(--tr-panel);
}
.wr--h .wr-viewport{
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.wr--h .wr-strip{ right: auto; bottom: 0; }
.wr--h .wr-tick{ right: auto; top: 32px; width: 1px; height: 7px; margin: 0 0 0 -.5px; }
.wr--h .wr-tick--mid{ top: 30px; height: 11px; }
.wr--h .wr-tick--major{ top: 28px; width: 1.5px; height: 15px; margin-left: -.75px; }
.wr--h .wr-label{ right: auto; top: 46px; transform: translateX(-50%) scale(calc(1 + .15 * var(--k))); transform-origin: 50% 0; }
.wr--h .wr-marker{ left: 50%; right: auto; top: 0; bottom: 0; width: 0; height: auto; }
.wr--h .wr-value{ left: 0; top: 4px; transform: translateX(-50%); }
.wr--h .wr-stem{ left: -1px; right: auto; top: 26px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, #CFE7FF, var(--tr-blue)); }
@media (min-width: 960px){
  .tp-row .tp{ flex: 0 0 440px; }
  .tp-row .tp-btn{ height: 64px; }
}
/* Inputs inside a field: the field shows focus (border + soft ring), not the input itself. */

/* Phones: bet amount field and quick amounts share one row */
/* Desktop: the wrapper dissolves so field and chips stay separate cells of the order bar */
/* Phones ≥550px tall: the horizontal dial gets its own full-width row under the presets */
@media (max-width: 959px){
  .tp-row{ flex-direction: column; gap: var(--gap); }
  .wr.wr--h{ flex: none; align-self: stretch; }
}

/* ── Phones: bet stepper [ − | amount | + ] [½] [2×]; tap the amount for the bet sheet ── */
.bstep{ position: relative; }
.tr-right{ position: relative; z-index: 5; }
.tr-app .bp-input:focus-visible{ outline: none; }
/* Desktop bet popover: opens above the amount */
.bp{
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 40; width: max(100%, 320px);
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--tr-border-2); border-radius: 12px; background: #0E1622;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--tr-blue-rgb), .1);
  animation: bp-in .16s var(--tr-ease) both;
}
@keyframes bp-in{ from{ opacity: 0; transform: translateY(6px); } }
.bp-field{ display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px 0 12px; border: 1px solid var(--tr-border-2); border-radius: 10px; background: var(--tr-field); }
.bp-field:focus-within{ border-color: var(--tr-blue); }
.bp-field--err{ border-color: rgba(var(--tr-red-rgb), .7); }
.bp-cur{ color: var(--tr-muted); font-weight: 700; font-size: 16px; }
.bp-input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #FFFFFF; font: 700 18px var(--font-primary); font-variant-numeric: tabular-nums; }
.bp-ok{ height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--tr-green); color: #04110A; font: 800 13px var(--font-primary); cursor: pointer; }
.bp-ok:disabled{ opacity: .4; cursor: default; }
.bp-hint{ font-size: 11.5px; color: var(--tr-muted); }
.bp-field--err + .bp-hint{ color: #FF6E80; }
.bp-quick{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.bp-chip{ height: 32px; border: 1px solid var(--tr-border); border-radius: 8px; background: var(--tr-panel-2); color: var(--content-primary); font: 600 12.5px var(--font-primary); cursor: pointer; }
.bp-chip:hover{ border-color: var(--tr-blue); background: rgba(var(--tr-blue-rgb), .12); }
.bstep{ display: grid; grid-template-columns: 1fr 48px 48px; gap: 6px; height: clamp(38px, 5.2dvh, 44px); }
.bstep-field{
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: stretch; min-width: 0;
  border: 1px solid var(--tr-border-2); border-radius: 10px; background: var(--tr-field); overflow: hidden;
}
.bstep-adj, .bstep-btn{ border: 0; background: transparent; font-size: 18px; font-weight: 600; }
.tr-app .bstep-adj, .tr-app .bstep-btn, .tr-app .bstep-amount{ color: var(--tr-text); }
.bstep-adj:active:not(:disabled){ background: rgba(var(--tr-blue-rgb), .14); }
.bstep-amount{
  min-width: 0; border: 0; border-inline: 1px solid var(--tr-border); background: transparent;
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bstep-amount:active:not(:disabled){ background: rgba(var(--tr-blue-rgb), .1); }
.bstep-btn{ border: 1px solid var(--tr-border-2); border-radius: 10px; background: var(--tr-panel-2); font-size: 15px; }
.bstep-btn:active:not(:disabled){ border-color: var(--tr-blue); background: rgba(var(--tr-blue-rgb), .14); }
.bstep button:disabled{ opacity: .45; }
.bstep--err .bstep-field{ border-color: rgba(var(--tr-red-rgb), .7); }
.bstep--flash .bstep-field{ animation: tc-shake .4s ease; border-color: var(--tr-red); }

/* Bet sheet */
.bs{ display: flex; flex-direction: column; gap: 12px; }
.bs-display{
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 64px;
  border: 1px solid var(--tr-border-2); border-radius: 12px; background: var(--tr-field);
  font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tr-text);
}
.bs-display--err{ border-color: rgba(var(--tr-red-rgb), .7); }
.bs-cur{ color: var(--tr-muted); font-weight: 600; }
.bs-suf{ color: var(--tr-muted); font-weight: 600; font-size: .6em; margin-left: 2px; }
.bs-caret{ width: 2px; height: 30px; background: var(--tr-blue); animation: bs-blink 1s steps(1) infinite; }
@keyframes bs-blink{ 50%{ opacity: 0; } }
.bs-hint{ text-align: center; font-size: 12px; color: var(--tr-muted); margin-top: -4px; }
.bs-display--err + .bs-hint{ color: var(--tr-red); }
.bs-keys{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bs-key{ height: 48px; border: 0; border-radius: 10px; background: var(--tr-panel-2); color: var(--tr-text); font-family: inherit; font-size: 20px; font-weight: 600; cursor: pointer; }
.bs-key:active{ background: rgba(var(--tr-blue-rgb), .2); }

@media (min-width: 960px){
  .bstep{ height: 50px; grid-template-columns: 1fr 56px 56px; }
  .bstep-field{ grid-template-columns: 52px 1fr 52px; }
  .bstep-amount{ font-size: 18px; }
  .bstep-adj:hover:not(:disabled), .bstep-amount:hover:not(:disabled){ background: rgba(var(--tr-blue-rgb), .08); }
  .bstep-btn:hover:not(:disabled){ border-color: var(--tr-blue); }
}
@media (min-width: 960px){
  .tr-right .bstep{ order: 1; }
  .tr-right .tb-row{ order: 2; }
}

/* Logos (images): wordmark in the header / modals, badge on splash screens */
.th-logo, .fr-wordmark, .se-logo--text, .loading-wordmark{ display: flex; align-items: center; justify-content: center; line-height: 0; }
.th-logo{ justify-content: flex-start; }
.wm-img{ display: block; height: 100%; width: auto; user-select: none; -webkit-user-drag: none; }
.th-logo{ height: 30px; }
@media (max-width: 959px){ .th-logo{ height: 22px; } }
.fr-wordmark, .se-logo--text{ height: 24px; margin-bottom: 12px; }
.loading-wordmark{ height: auto; margin-bottom: 18px; }
.loading-wordmark .wm-img{ width: min(340px, 78vw); height: auto; }
.th-logo .wm-img{ height: 100%; width: auto; }
.fr-wordmark .wm-img, .se-logo--text .wm-img{ height: 100%; width: auto; }
@media (min-width: 960px){ .th-logo{ height: 36px; } .loading-wordmark .wm-img{ width: 300px; } }
@media (max-width: 359px){ .th-logo{ height: 18px; } }


/* Bet history as a trade table */
.hx-table{ gap: 0; border: 1px solid var(--tr-border); border-radius: 12px; overflow: hidden; background: var(--tr-panel); }
.hx-thead, .hx-row{ display: grid; grid-template-columns: 66px 1fr 1fr 1.15fr 16px; align-items: center; gap: 6px; }
.hx-thead{
  padding: 8px 12px; border-bottom: 1px solid var(--tr-border); background: var(--tr-field);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tr-muted);
}
.hx-thead span:nth-child(n+2):not(:last-child){ text-align: right; }
.hx-table .hx-item{ border: 0; border-radius: 0; background: transparent; }
.hx-table .hx-item + .hx-item{ border-top: 1px solid var(--tr-border); }
.hx-table .hx-item--open{ background: rgba(var(--tr-blue-rgb), .05); }
.hx-row{ width: 100%; min-height: 40px; padding: 6px 12px; font-variant-numeric: tabular-nums; }
.hx-c{ font-size: 12.5px; font-weight: 600; color: var(--content-primary); text-align: right; white-space: nowrap; }
.hx-time{ text-align: left; font-weight: 500; color: var(--tr-muted); font-size: 11.5px; }
.hx-res.pos, .hx-pl.pos{ color: var(--tr-green); }
.hx-res.neg, .hx-pl.neg{ color: var(--tr-red); }
.hx-table .hx-body{ padding: 0 12px 12px; }

/* Splash badge: settles in, a light sweeps across, the candle strikes the line */
.wm-badge{ position: relative; display: inline-block; line-height: 0; animation: ld-in .65s cubic-bezier(.2,.8,.3,1) .1s both; }
@keyframes ld-in{ from{ opacity: 0; transform: translateY(14px) scale(.96); filter: blur(5px); } to{ opacity: 1; transform: none; filter: none; } }
@keyframes ld-shine{ 0%{ background-position: 160% 0; } 55%, 100%{ background-position: -60% 0; } }
@keyframes ld-spark{ 0%{ opacity: 0; transform: scale(.15); } 8%{ opacity: 1; transform: scale(.9); } 22%{ opacity: .85; transform: scale(1.15); } 42%{ opacity: 0; transform: scale(1.6); } 100%{ opacity: 0; transform: scale(1.6); } }
@keyframes ld-glow{ 0%, 100%{ filter: drop-shadow(0 0 18px rgba(30,155,255,.3)); } 12%{ filter: drop-shadow(0 0 34px rgba(30,155,255,.75)); } }
@media (prefers-reduced-motion: reduce){ .wm-badge, .wm-badge .wm-img, .ld-shine, .ld-spark{ animation: none !important; } }

/* ── Statistics ── */
.st{ display: flex; flex-direction: column; gap: 12px; }
.st-tabs{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--tr-border); border-radius: 10px; background: var(--tr-field); }
.st-tab{ height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--tr-muted); font: 600 12px var(--font-primary); cursor: pointer; white-space: nowrap; }
.st-tab--on{ background: rgba(var(--tr-blue-rgb), .16); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(var(--tr-blue-rgb), .5); }
.st-sub{ margin: 0; font-size: 11.5px; color: var(--tr-muted); }
.st-win{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-chips{ display: flex; gap: 4px; }
.st-chip{ min-width: 34px; height: 26px; padding: 0 7px; border: 1px solid var(--tr-border); border-radius: 7px; background: var(--tr-field); color: var(--tr-muted); font: 600 11.5px var(--font-primary); font-variant-numeric: tabular-nums; cursor: pointer; }
.st-chip--on{ color: #FFFFFF; border-color: rgba(var(--tr-blue-rgb), .6); background: rgba(var(--tr-blue-rgb), .16); }
.st-empty{ margin: 8px 0; font-size: 13px; color: var(--tr-muted); text-align: center; }
.st-zones{ display: flex; flex-direction: column; gap: 9px; }
.st-zone{ display: grid; grid-template-columns: 54px 1fr 38px; align-items: center; gap: 10px; }
.st-zl{ font-size: 12.5px; font-weight: 600; color: var(--content-primary); font-variant-numeric: tabular-nums; }
.st-zp{ font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--content-primary); }
.st-bar{ position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,.06); }
.st-bar i{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #1478CC, var(--tr-blue)); transition: width .4s var(--tr-ease); }
.st-zone:first-child .st-bar i{ background: linear-gradient(90deg, #1E9BFF, #6CC0FF); }
.st-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-card{ display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px; border: 1px solid var(--tr-border); border-radius: 10px; background: var(--tr-field); }
.st-card span{ font-size: 11px; color: var(--tr-muted); line-height: 1.3; }
.st-card b{ font-size: 20px; font-weight: 800; color: var(--content-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-card small{ font-size: 10.5px; color: var(--tr-dim); }
.st-note{ margin: 0; padding-top: 10px; border-top: 1px solid var(--tr-border); font-size: 11px; line-height: 1.45; color: var(--tr-dim); }

/* Desktop: stats column inside the chart card */
.tr-stage{ display: contents; }
@media (min-width: 960px){
  .tr-stage{ display: flex; flex: 1 1 0; min-height: 280px; gap: var(--gap); }
  .tr-stage .tr-chartrow{ flex: 1 1 0; min-width: 0; min-height: 0; }
}
/* Desktop: stats as its own card beside the chart, same height and chrome */
.st-side{
  flex: none; width: 320px; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin;
  padding: 14px 16px 16px; border: 1px solid var(--tr-border); border-radius: 12px; background: var(--tr-field);
}
.st-side-head{ display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--content-primary); }
.st-side-head svg{ width: 15px; height: 15px; color: var(--tr-blue); }
.st-side .st{ flex: 1; gap: 14px; }
.st-side .st-zones{ gap: 14px; }
.st-side .st-note{ margin-top: auto; }

@media (prefers-reduced-motion: reduce){ .st-bar i{ transition: none; } }

/* Header: stats + history icon buttons beside the balance and menu */
.th-icon-btn svg{ width: 17px; height: 17px; }
@media (max-width: 959px){ .th-logo{ height: 20px; } .th-right{ gap: 5px; } .th-balance{ padding: 0 9px; font-size: 13.5px; } }
@media (max-width: 359px){ .th-logo{ height: 16px; } .th-menu-btn{ width: 30px; } .th-balance{ font-size: 12px; padding: 0 7px; } }
/* Desktop: drawers render as centred cards, so round all corners, close the border and drop the sheet grabber */
@media (min-width: 681px){
  .drawer{ border-radius: 16px; border-bottom: 1px solid var(--tr-border); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--tr-blue-rgb), .12); }
  .drawer::before{ display: none; }
  .drawer-header{ border-radius: 16px 16px 0 0; }
  .drawer-content{ border-radius: 0 0 16px 16px; }
}

/* Game UI: no accidental text selection / long-press callouts. Fields, seeds
   and hashes stay selectable so they can still be copied. */
body{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable], .mono, .pf-input-value{ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* No zoom on phones: double-tap zoom off everywhere (pinch is blocked in app.jsx),
   and fields at 16px+ so iOS doesn't zoom in when one is focused. */
html, body{ touch-action: manipulation; }
@media (max-width: 959px){ input, textarea, select{ font-size: 16px !important; } }
@media (max-width: 480px){
  .tb--cashout{ padding: 10px 14px; }
  .tb--cashout .tb-label, .tb--pot .tb-label{ font-size: 14px; }
}
/* Pot on the table: 1/2 and 2x act on the bet amount, which is locked, so they go */
.bstep--pot{ grid-template-columns: 1fr; }
.bstep--pot .bstep-btn{ display: none; }
/* Pot on the table: the − / + steppers act on the locked bet amount, so they go too */
.bstep--pot .bstep-adj{ display: none; }
.bstep--pot .bstep-field{ grid-template-columns: 1fr; }
.bstep--pot .bstep-amount{ border-inline: 0; }
.bstep--pot .bstep-amount{ padding: 0; }

/* ── Strike (Oto, 19 Oct): the chain's total multiplier ──
   Badge in the chart's top-right corner while a chain runs: blue under 10x, green
   (the big-win look) from 10x, gold from 100x. */
.sk{ position: absolute; right: 10px; top: 10px; z-index: 40; pointer-events: none; --sk: var(--tr-blue-rgb); --sk-txt: #CFE7FF; }
.tc-latest ~ .sk{ top: 46px; }
.sk--big{ --sk: var(--tr-green-rgb); --sk-txt: #2BEA86; }
.sk--gold{ --sk: 255,196,64; --sk-txt: #FFD36B; }
.sk-card{
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 92px; padding: 7px 11px 6px;
  border-radius: 12px; background: rgba(10,18,30,.94); border: 1px solid rgba(var(--sk), .7);
  box-shadow: 0 0 0 1px rgba(var(--sk), .18), 0 0 26px rgba(var(--sk), .28), 0 10px 26px rgba(0,0,0,.5);
  animation: sk-in .32s var(--tr-ease) both; transition: border-color .3s ease, box-shadow .3s ease;
}
.sk-k{ font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--sk-txt); }
.sk-v{ font-family: var(--font-mono); font-size: 21px; font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(var(--sk), .6); }
.sk-n{ font-size: 10px; font-weight: 600; color: var(--tr-muted); }
.sk-card--hit{ animation: sk-hit .42s cubic-bezier(.3, 1.6, .5, 1) both; }
.sk-card--tier{ animation: sk-tier .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.sk-fly{
  position: absolute; right: 18px; top: calc(100% + 4px); font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--sk-txt);
  text-shadow: 0 0 12px rgba(var(--sk), .8); animation: sk-fly .5s cubic-bezier(.5, 0, .7, .4) both;
}
.sk--out .sk-card{ animation: sk-out .8s ease forwards; }
.sk--lost .sk-card{ --sk: var(--tr-red-rgb); --sk-txt: var(--tr-red); border-color: rgba(var(--tr-red-rgb), .8); animation: sk-lost .85s ease forwards; }
.sk--lost .sk-v{ color: var(--tr-red); }
@keyframes sk-in{ from{ opacity: 0; transform: translateY(-8px) scale(.85); } }
@keyframes sk-hit{ 0%{ transform: scale(1); } 35%{ transform: scale(1.18); } 100%{ transform: scale(1); } }
@keyframes sk-tier{ 0%{ transform: scale(1); filter: brightness(1); } 30%{ transform: scale(1.32); filter: brightness(1.7); } 60%{ transform: scale(.96); } 100%{ transform: scale(1); filter: none; } }
@keyframes sk-fly{ 0%{ opacity: 0; transform: translateY(14px) scale(.8); } 30%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(-34px) scale(1.15); } }
@keyframes sk-out{ to{ opacity: 0; transform: translate(-30%, 40%) scale(.7); } }
@keyframes sk-lost{ 0%{ transform: none; } 15%{ transform: translateX(-5px); } 30%{ transform: translateX(5px); } 45%{ transform: translateX(-3px); } 100%{ opacity: 0; transform: translateY(18px) scale(.9); } }
@media (max-width: 480px){ .sk-card{ min-width: 80px; padding: 6px 9px 5px; } .sk-v{ font-size: 18px; } }

/* The chain as chips (cashout card and history) */
.kc{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.kc-chip{
  display: inline-flex; align-items: baseline; gap: 4px; height: 22px; padding: 0 7px; border-radius: 7px; line-height: 22px;
  background: rgba(var(--tr-green-rgb), .12); color: #2BEA86; font: 700 11.5px var(--font-mono); font-variant-numeric: tabular-nums;
}
.kc-chip em{ font-style: normal; font-weight: 600; font-size: 10px; color: rgba(255,255,255,.55); }
.kc-chip--lost{ background: rgba(var(--tr-red-rgb), .14); color: var(--tr-red); }
.kc-chip--more{ background: rgba(255,255,255,.07); color: var(--tr-muted); font-family: var(--font-primary); font-weight: 600; }
.kc--anim .kc-chip{ animation: kc-in .3s var(--tr-ease) both; }
@keyframes kc-in{ from{ opacity: 0; transform: translateY(6px) scale(.8); } }
.rt--chain{ max-width: min(340px, calc(100% - 24px)); }
.rt-chain{ display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); width: 100%; }
.rt-bet{ font-size: 11px; font-weight: 600; color: var(--tr-muted); }
.rt-strike{ font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #CFE7FF; animation: kc-in .35s var(--tr-ease) both; }
.rt-strike b{ font-family: var(--font-mono); font-size: 15px; letter-spacing: 0; color: #fff; }
.rt--big .rt-strike{ color: #2BEA86; } .rt--gold .rt-strike{ color: #FFD36B; }
.rt--gold.rt--cashout{ border-color: rgba(255,196,64,.8); box-shadow: 0 0 0 1px rgba(255,196,64,.25), 0 0 48px rgba(255,196,64,.3), 0 18px 50px rgba(0,0,0,.55); }

/* History: the strike in the row, the chain in the body */
.hx-strike{ display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.hx-strike small{ font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8CCBFF; }
.hx-strike--big small{ color: #2BEA86; } .hx-strike--gold small{ color: #FFD36B; } .hx-strike--lost small{ color: var(--tr-red); }
.hx-chain{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.hx-chain-h{ display: flex; justify-content: space-between; font-size: 12px; color: var(--content-secondary); }
.hx-chain-h b{ font-weight: 700; } .hx-chain-h b.pos{ color: var(--tr-green); } .hx-chain-h b.neg{ color: var(--tr-red); }
.hx-chain .kc{ justify-content: flex-start; }
.rt-strike b{ text-transform: none; }
.hx-chain{ padding: 10px 14px 4px; margin-top: 0; }

/* Strike v2 (19 Oct): the badge is one stroke-less pill; the cashout card shows bet × strike */
.sk-card{
  flex-direction: row; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 12px 0 10px;
  border: 0; border-radius: 16px; background: rgba(10,18,30,.9);
  box-shadow: 0 0 22px rgba(var(--sk), .22), 0 8px 20px rgba(0,0,0,.45);
}
.sk-card svg{ width: 14px; height: 14px; color: var(--sk-txt); flex: none; }
.sk-k{ font-size: 10.5px; letter-spacing: .14em; }
.sk-v{ font-size: 16px; line-height: 1; color: var(--sk-txt); text-shadow: none; }
.sk--big .sk-card{ background: rgba(8,30,20,.92); }
.sk--gold .sk-card{ background: rgba(34,26,6,.92); }
.sk--lost .sk-card{ background: rgba(40,10,16,.92); }
.sk-fly{ right: 14px; }
@media (max-width: 480px){ .sk-card{ height: 30px; padding: 0 10px 0 9px; min-width: 0; } .sk-v{ font-size: 15px; } }
.rt-formula{ margin-top: 2px; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; animation: kc-in .35s .25s var(--tr-ease) both; }
.rt-formula i{ font-style: normal; color: var(--tr-muted); margin: 0 3px; }
.rt-formula b{ color: #8CCBFF; }
.rt--big .rt-formula b{ color: #2BEA86; } .rt--gold .rt-formula b{ color: #FFD36B; }
/* Chain chips = the pot stepper's chips (same size, font and radius), equal widths */
.kc{ gap: 6px; }
.kc-chip{
  justify-content: center; align-items: center; box-sizing: border-box; min-width: 64px; height: 30px; padding: 0 11px;
  border-radius: 9px; line-height: 1; font: 800 13px var(--font-mono); color: #2BEA86; background: rgba(var(--tr-green-rgb), .1);
}
.kc-chip--lost{ color: var(--tr-red); background: rgba(var(--tr-red-rgb), .1); }
@media (max-width: 480px){ .kc-chip{ height: 28px; min-width: 60px; padding: 0 9px; font-size: 12px; } .kc{ gap: 6px; } }
/* The climb on the cashout card: running totals in the pot stepper's chips */
.rp{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; max-width: 300px; }
.rp-chip{
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 60px; height: 28px; padding: 0 9px;
  border-radius: 9px; font: 800 12px var(--font-mono); line-height: 1; font-variant-numeric: tabular-nums;
  color: #8796AB; background: rgba(255,255,255,.06); animation: kc-in .3s var(--tr-ease) both;
}
.rp-chip--top{ color: #8CCBFF; background: rgba(30,155,255,.16); }
.rp--big .rp-chip--top{ color: #2BEA86; background: rgba(var(--tr-green-rgb), .14); }
.rp--gold .rp-chip--top{ color: #FFD36B; background: rgba(255,196,64,.14); }
.rp-chip--more{ min-width: 0; font-family: var(--font-primary); font-weight: 700; }
.rt--chain{ width: min(330px, calc(100% - 24px)); padding-left: 18px; padding-right: 18px; }
.rt--chain .rp{ max-width: none; }
/* Cashout card (19 Oct, Oto): only the strike total, no per-step chips */
.rt--chain{ width: auto; padding-left: 24px; padding-right: 24px; }
.rp-chip--strike{ gap: 6px; height: 30px; padding: 0 12px; font-family: var(--font-primary); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; animation-delay: .2s; }
.rp-chip--strike svg{ width: 13px; height: 13px; }
.rp-chip--strike b{ font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; text-transform: none; }
@media (max-width: 480px){ .rt--chain{ padding-left: 18px; padding-right: 18px; } }
/* Cashout card: the strike pill is always green, STRIKE and the total alike */
.rt--chain .rp-chip--strike, .rt--chain .rp-chip--strike b{ color: #2BEA86; }
.rt--chain .rp-chip--strike{ background: rgba(var(--tr-green-rgb), .14); }
/* A lost pot: the Cashout button turns red with the strike badge, then gives way to Auto Play */
.tr-app .tb--lost, .tr-app .tb--lost .tb-label{ color: var(--tr-red); }