/* Roll — line-spin roulette.
   The strip is a horizontal flexbox of repeated logical-strip clones. JS
   sets `--roll-x` (a translateX in px) when the round transitions
   betting → spinning, and the cubic-bezier easing on the transform
   creates the classic "fast then slow" CSGO-style ride. */

:root {
  --roll-black:  #1a1f2c;
  --roll-black-2:#2a2f3d;
  --roll-red:    #d23939;
  --roll-red-2:  #ff5b5b;
  --roll-blue:   #2a7fff;
  --roll-blue-2: #4ea0ff;
  --roll-gold:   #f1b14a;
  --roll-gold-2: #ffd47a;
  --roll-bg:     #14151b;
  --roll-card:   #1d1f28;
  --roll-card-2: #262a37;
  --roll-line:   #00d066;
  --roll-line-2: #00ff88;
  --roll-text:   #eef1f6;
  --roll-muted:  #8a93a6;
  --roll-segment-w: 76px;     /* logical width of each strip segment */
  --roll-strip-h: 96px;       /* height of the strip (and segments) */
}

body[data-game="roll"] {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,140,40,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0,208,102,.05) 0%, transparent 60%),
    var(--roll-bg);
}

.roll-canvas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

/* ------- History ribbon (top) ------- */
.roll-history {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
  min-height: 28px;
}
.roll-history::-webkit-scrollbar { display: none; }
.roll-history-chip {
  flex: 0 0 auto;
  height: 22px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(0,0,0,.2) inset, 0 0 0 1px rgba(255,255,255,.05);
}
.roll-history-chip.opt-black { background: var(--roll-black); color: #c8d0e0; }
.roll-history-chip.opt-red   { background: linear-gradient(180deg, var(--roll-red-2), var(--roll-red)); }
.roll-history-chip.opt-blue  { background: linear-gradient(180deg, var(--roll-blue-2), var(--roll-blue)); }
.roll-history-chip.opt-gold  { background: linear-gradient(180deg, var(--roll-gold-2), var(--roll-gold)); color: #1a1f2c; }

/* ------- Strip stage ------- */
.roll-stage {
  position: relative;
  height: var(--roll-strip-h);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #11131a 0%, #1a1d28 50%, #11131a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 8px 30px rgba(0,0,0,.5);
}
.roll-stage::before,
.roll-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 3;
}
.roll-stage::before { left: 0;  background: linear-gradient(90deg, rgba(20,21,27,.95), transparent); }
.roll-stage::after  { right: 0; background: linear-gradient(270deg, rgba(20,21,27,.95), transparent); }
.roll-strip-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.roll-strip {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
  transform: translateX(0);
  /* Transform + transition are set DIRECTLY by JS via .style.transform
     and .style.transition. Using a CSS var indirection here historically
     caused the transition to be skipped on the very first spin (browsers
     don't always animate transform when only the underlying var
     changes). Direct inline assignment is unambiguous. */
}
.roll-segment {
  flex: 0 0 var(--roll-segment-w);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  border-right: 1px solid rgba(0,0,0,.35);
  position: relative;
}
.roll-segment::before {
  /* Subtle inner highlight along the top to give the segment depth. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.roll-segment.opt-black { background: linear-gradient(180deg, #2a2f3d, #1a1f2c); }
.roll-segment.opt-red   { background: linear-gradient(180deg, var(--roll-red-2), var(--roll-red)); }
.roll-segment.opt-blue  { background: linear-gradient(180deg, var(--roll-blue-2), var(--roll-blue)); }
.roll-segment.opt-gold  { background: linear-gradient(180deg, var(--roll-gold-2), var(--roll-gold)); color: #1a1f2c; text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* ------- Center marker (the cursor that picks the winner) ------- */
.roll-marker {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}
.roll-marker-line {
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--roll-line-2), var(--roll-line));
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(0,255,136,.7);
}
.roll-marker-tri-top,
.roll-marker-tri-bot {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.roll-marker-tri-top {
  top: 0;
  border-top: 9px solid var(--roll-line-2);
  filter: drop-shadow(0 0 4px rgba(0,255,136,.5));
}
.roll-marker-tri-bot {
  bottom: 0;
  border-bottom: 9px solid var(--roll-line-2);
  filter: drop-shadow(0 0 4px rgba(0,255,136,.5));
}

/* ------- Status row ------- */
.roll-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.roll-status {
  font-size: 14px;
  color: var(--roll-text);
  font-weight: 600;
  letter-spacing: .01em;
}
.roll-status.is-rolling { color: var(--roll-line-2); }
.roll-countdown {
  font-size: 14px;
  color: var(--roll-muted);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}

/* ------- Green countdown bar ------- */
/* Drains from 100% width down to 0% as the betting window closes.
   Width is set imperatively from JS each poll; we use a short CSS
   transition so the bar animates smoothly between 250 ms server polls
   instead of stepping. */
.roll-timer-wrap {
  height: 6px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 4px 0;
  display: none;
}
.roll-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--roll-line), var(--roll-line-2));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0,255,136,.45);
  transition: width 280ms linear;
}

/* ------- Spectacular win overlay ------- */
/* Pinned over the canvas, never blocks clicks. Pops in with a scale +
   slight rotate + green glow. Auto-fades. */
.roll-win-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}
.roll-win-overlay.show {
  animation: roll-win-overlay-fade 2.5s ease forwards;
}
@keyframes roll-win-overlay-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.roll-win-pop {
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,208,102,.25), rgba(0,208,102,0) 70%);
  padding: 24px 48px;
  border-radius: 16px;
  transform: scale(.6) rotate(-3deg);
  animation: roll-win-pop-in 600ms cubic-bezier(.18,.89,.32,1.28) forwards;
}
@keyframes roll-win-pop-in {
  0%   { transform: scale(.6) rotate(-3deg); }
  60%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.roll-win-headline {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 0 20px rgba(0,255,136,.7), 0 2px 0 rgba(0,0,0,.4);
}
.roll-win-amount {
  font-size: 56px;
  font-weight: 900;
  color: var(--roll-line-2);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(0,255,136,.85), 0 2px 0 rgba(0,0,0,.4);
}
.roll-win-sub {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin-top: 8px;
  letter-spacing: .04em;
}
@media (max-width: 640px) {
  .roll-win-headline { font-size: 28px; }
  .roll-win-amount   { font-size: 40px; }
}

/* The canvas needs to be the positioning context for the overlay. */
.roll-canvas { position: relative; }

/* ------- Result banner ------- */
/* Big bold center-stage announcement during the settling phase. The
   user should never miss who won. */
.roll-banner {
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--roll-card);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  border: 2px solid rgba(255,255,255,.06);
  animation: roll-banner-in 380ms cubic-bezier(.18,.89,.32,1.28) both;
}
@keyframes roll-banner-in {
  from { transform: translateY(-8px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.roll-banner.win {
  background: linear-gradient(135deg, rgba(0,208,102,.28), rgba(0,208,102,.10));
  border-color: rgba(0,255,136,.6);
  color: var(--roll-line-2);
  text-shadow: 0 0 14px rgba(0,255,136,.55);
}
.roll-banner.lose {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: #cdd2dd;
  font-weight: 700;
}

/* ------- Option tiles + live feed ------- */
.roll-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.roll-option {
  background: var(--roll-card);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.roll-option:hover {
  transform: translateY(-1px);
  background: var(--roll-card-2);
}
.roll-option:focus { outline: none; }
.roll-option:focus-visible { outline: 2px solid var(--roll-line); outline-offset: 2px; }
.roll-option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.roll-option.is-disabled:hover {
  transform: none;
  background: var(--roll-card);
}
.roll-option[data-option="black"] { border-color: rgba(132,140,160,.18); }
.roll-option[data-option="red"]   { border-color: rgba(210,57,57,.30); }
.roll-option[data-option="blue"]  { border-color: rgba(42,127,255,.30); }
.roll-option[data-option="gold"]  { border-color: rgba(241,177,74,.40); }
/* Winner state — only applied during 'settling' (after the strip has
   stopped), never during 'spinning'. The JS gates this so we never
   telegraph the outcome mid-spin. Once revealed though it should be
   clearly visible to all viewers, not just the player who won.
   `is-mywin` adds the spectacular pulse on top for the player who
   actually had a bet on that color. */
.roll-option.is-winner {
  background: linear-gradient(180deg, rgba(0,255,136,.18), var(--roll-card-2));
  border-color: rgba(0,255,136,.55);
  box-shadow: 0 0 0 2px rgba(0,255,136,.45), 0 6px 24px rgba(0,255,136,.18);
  transform: translateY(-1px);
}
.roll-option.is-loser {
  opacity: .55;
  filter: grayscale(.25);
}
.roll-option.is-mywin {
  animation: roll-mywin-pulse 1s ease-in-out infinite;
  box-shadow:
    0 0 0 3px var(--roll-line-2),
    0 0 38px rgba(0,255,136,.85),
    inset 0 0 28px rgba(0,255,136,.18);
  transform: translateY(-2px) scale(1.03);
  z-index: 2;
}
@keyframes roll-mywin-pulse {
  0%,100% {
    box-shadow:
      0 0 0 3px var(--roll-line-2),
      0 0 38px rgba(0,255,136,.85),
      inset 0 0 28px rgba(0,255,136,.18);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--roll-line-2),
      0 0 60px rgba(0,255,136,1),
      inset 0 0 38px rgba(0,255,136,.30);
  }
}

/* The colored "face" — the entire identity of the option lives here.
   No text labels (Black / Red / Blue / Gold) anymore: the color IS the
   label. Multiplier is the headline, pseudo-% is the small print. */
.roll-opt-face {
  height: 84px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.18);
  user-select: none;
}
.roll-opt-face::before {
  /* Top sheen for depth. */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.roll-option[data-option="black"] .roll-opt-face {
  background: linear-gradient(135deg, #353a48 0%, #1a1f2c 100%);
}
.roll-option[data-option="red"] .roll-opt-face {
  background: linear-gradient(135deg, var(--roll-red-2) 0%, var(--roll-red) 100%);
}
.roll-option[data-option="blue"] .roll-opt-face {
  background: linear-gradient(135deg, var(--roll-blue-2) 0%, var(--roll-blue) 100%);
}
.roll-option[data-option="gold"] .roll-opt-face {
  background: linear-gradient(135deg, var(--roll-gold-2) 0%, var(--roll-gold) 100%);
}
.roll-opt-mult {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
  line-height: 1;
  position: relative;
  z-index: 1;
}
.roll-opt-chance {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.85);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
/* Gold has a light face, so dark text reads better. */
.roll-option[data-option="gold"] .roll-opt-mult {
  color: #1a1f2c;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.roll-option[data-option="gold"] .roll-opt-chance {
  color: rgba(26,31,44,.75);
}
.roll-opt-totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--roll-muted);
}
.roll-opt-total {
  color: var(--roll-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.roll-opt-count {
  font-size: 11px;
  background: rgba(255,255,255,.04);
  padding: 1px 7px;
  border-radius: 999px;
}

.roll-opt-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  max-height: 120px;
  overflow: hidden;
}
.roll-feed-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  font-size: 11px;
  animation: roll-feed-in .25s ease;
}
@keyframes roll-feed-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.roll-feed-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
.roll-feed-name {
  flex: 1;
  color: var(--roll-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roll-feed-amount {
  color: var(--roll-line-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.roll-feed-row.is-mine {
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.25);
}

/* You-bet pip on the option header */
.roll-option .roll-mybet-pip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--roll-line-2);
  color: #061a0d;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  display: none;
  font-variant-numeric: tabular-nums;
  cursor: context-menu;
}
.roll-option.has-mybet .roll-mybet-pip { display: inline-block; }
.roll-option.has-mybet .roll-mybet-pip::after {
  content: " ✕";
  opacity: .7;
  font-weight: 700;
}

/* ------- Right panel ------- */
.roll-pick-hint {
  font-size: 12px;
  color: var(--roll-muted);
  text-align: center;
  margin-top: 4px;
}
/* Repeat-bet button — itemized per-color label so the player sees
   exactly what's about to be re-issued (e.g. "Repeat: ⬛$2 • 🟥$1"). */
#roll-repeat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
}
.roll-repeat-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
}
.roll-repeat-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.roll-repeat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--roll-text);
}
.roll-repeat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.roll-repeat-chip.opt-black .roll-repeat-dot { background: linear-gradient(135deg, #353a48, #1a1f2c); border: 1px solid #4a5060; }
.roll-repeat-chip.opt-red   .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-red-2), var(--roll-red)); }
.roll-repeat-chip.opt-blue  .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-blue-2), var(--roll-blue)); }
.roll-repeat-chip.opt-gold  .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-gold-2), var(--roll-gold)); }
.roll-repeat-sep {
  color: var(--roll-muted);
  margin: 0 6px;
  font-weight: 400;
}

/* ---------- Manual / Auto custom autobet ---------- */

/* Selection-mode hint banner — explains the click-to-select model so
   the user knows clicks aren't placing real bets. */
.roll-auto-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,255,136,.10), rgba(0,255,136,.03));
  border: 1px solid rgba(0,255,136,.25);
  color: var(--roll-text);
  font-size: 12px;
  line-height: 1.45;
}
.roll-auto-hint strong {
  color: var(--roll-line-2);
  font-size: 13px;
  letter-spacing: .02em;
}
.roll-auto-hint span {
  color: rgba(255,255,255,.85);
}

/* Live "Selected" summary — chips per color with the cumulative
   per-round wager. Mirrors the Repeat-bet button's chip layout. */
.roll-auto-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--roll-card-2);
  border: 1px dashed rgba(255,255,255,.10);
  font-size: 12px;
  min-height: 36px;
}
.roll-auto-summary.is-empty {
  color: var(--roll-muted);
  font-style: italic;
}
.roll-auto-summary-head {
  font-weight: 700;
  color: var(--roll-text);
  margin-right: 4px;
}

/* Per-color progression card — used twice (On win / On loss). */
.roll-auto-progression {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border-radius: 8px;
}
.roll-auto-progression-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--roll-text);
  margin-bottom: 8px;
}
.roll-auto-progression-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}
.roll-auto-progression-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--roll-text);
}
.roll-auto-progression-label.opt-black .roll-repeat-dot { background: linear-gradient(135deg, #353a48, #1a1f2c); border: 1px solid #4a5060; }
.roll-auto-progression-label.opt-red   .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-red-2), var(--roll-red)); }
.roll-auto-progression-label.opt-blue  .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-blue-2), var(--roll-blue)); }
.roll-auto-progression-label.opt-gold  .roll-repeat-dot { background: linear-gradient(135deg, var(--roll-gold-2), var(--roll-gold)); }

/* Empty-state hint inside On-win / On-loss progression cards when no
   colors are selected yet. */
.roll-auto-progression-empty {
  font-size: 11px;
  color: var(--roll-muted);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}

/* Sticky "Start autobet" button — pinned to the bottom of the viewport
   so the user can scroll the auto panel (advanced rules, status text)
   without losing the action button. The button "rises with you" as you
   scroll the page up. Drop shadow lifts it off the content scrolling
   behind it. */
body[data-game="roll"] .qk-ab-start {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 255, 136, .25);
}

/* "Selecting" tile state — visual cue that clicks are recording a
   selection rather than placing a bet. Dashed outline + a subtle
   pulsing ring around the pip. */
.roll-option.is-selecting {
  outline: 2px dashed rgba(0,255,136,.55);
  outline-offset: -2px;
}
.roll-option.is-selecting .roll-mybet-pip {
  background: var(--roll-line-2);
  color: #061a0d;
  animation: roll-selecting-pip 1.4s ease-in-out infinite;
}
.roll-option.is-selecting .roll-mybet-pip::after {
  content: '';
}
@keyframes roll-selecting-pip {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,136,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(0,255,136,0); }
}

.roll-pending-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(241,177,74,.10);
  color: var(--roll-gold-2);
  font-size: 12px;
  border: 1px solid rgba(241,177,74,.25);
  text-align: center;
}

/* ------- Mobile shrinking ------- */
@media (max-width: 640px) {
  .roll-options { grid-template-columns: repeat(2, 1fr); }
  :root { --roll-segment-w: 60px; --roll-strip-h: 84px; }
  .roll-segment { font-size: 18px; }
  .roll-opt-feed { max-height: 80px; }
}