/* Triple Lines — vanilla DOM, no framework, no iframe.
   Mounted into #flags-game in the outer SEO shell.
   Visual language inherited from this site's own Dice game
   (web/games/dice/play/dice.css); multi-row flag layout on top. */

#flags-game {
  --panel-bg: #1C1C1D;
  --panel-radius: 10px;
  --text-muted: #8C8C91;
  --text-yellow: #FFCC00;
  --track-active: #2E8B4A;   /* muted forest green (was iOS #35C759) */
  --track-inactive: #A83B31;  /* muted brick red   (was iOS #FF3B31) */
  --win: #35C759;
  --lose: #FF3B31;
  --grey: #8E8E92;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Inner column — matches Flutter ConstrainedBox(maxWidth: 560).
   On wider viewports (>500px) leave more breathing room at the top so
   the game content sits visually centered under the SEO shell header. */
#flags-game .lf-inner {
  width: 100%;
  max-width: 560px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 501px) {
  #flags-game .lf-inner { padding-top: 48px; }
}

/* ============== Sound button (lives in the auto-bet row) ============== */
#flags-game .lf-sound-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, transform 0.1s;
}
#flags-game .lf-sound-btn:hover { background: rgba(255,255,255,0.06); }
#flags-game .lf-sound-btn:active { transform: scale(0.94); }
#flags-game .lf-sound-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* ============== Result panel (center number + win/lose text) ============== */
#flags-game .lf-result {
  width: 100%;
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  padding: 22px 8px;
  box-sizing: border-box;
  border: 4px solid transparent;
  transition: border-color 0.25s ease;
  text-align: center;
}
#flags-game .lf-result.win { border-color: var(--text-yellow); }
#flags-game .lf-result-number {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-yellow);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
#flags-game .lf-result-text {
  font-size: 20px;
  font-weight: 700;
  min-height: 22px;
  letter-spacing: 0.3px;
}
#flags-game .lf-result-text.win    { color: var(--win); }
#flags-game .lf-result-text.lose   { color: var(--lose); }
#flags-game .lf-result-text.rolling{ color: var(--grey); }

/* Compact for short viewports */
@media (max-height: 750px) {
  #flags-game .lf-result { padding: 14px 8px; }
  #flags-game .lf-result-number { font-size: 36px; }
  #flags-game .lf-result-text { font-size: 15px; }
}

/* ============== Hero panel — the ONE live odds display ============== */
#flags-game .lf-hero {
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  border: 3px solid transparent;
  padding: 16px 8px 10px;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.25s ease;
}
#flags-game .lf-hero-odds {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-yellow);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
#flags-game .lf-hero-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
#flags-game .lf-hero-msg {
  min-height: 20px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
#flags-game .lf-hero.win  { border-color: var(--text-yellow); }
#flags-game .lf-hero.win .lf-hero-odds { text-shadow: 0 0 20px rgba(255, 204, 0, 0.55); }
#flags-game .lf-hero.part { border-color: rgba(255, 204, 0, 0.4); }
#flags-game .lf-hero.lose .lf-hero-odds { color: var(--lose); }
#flags-game .lf-hero-msg.win  { color: var(--win); }
#flags-game .lf-hero-msg.part { color: var(--text-yellow); }
@media (max-height: 750px) {
  #flags-game .lf-hero { padding: 10px 8px 8px; }
  #flags-game .lf-hero-odds { font-size: 34px; }
}

/* ============== History row ============== */
#flags-game .lf-history {
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  height: 30px;
  position: relative;
  overflow: hidden;
}
/* 10 equal columns — every cell is centered inside its slot, so the
   ten cells are always evenly distributed across the available width
   regardless of container size. The conveyor animation (see pushHistory)
   shifts the whole row one slot left on each new roll via FLIP. */
#flags-game .lf-history-track {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  justify-items: center;
  height: 100%;
  position: relative;
  width: 100%;
}
#flags-game .lf-hist-cell {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  /* GPU-promote so the FLIP transform runs off the main thread. */
  will-change: transform, opacity;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.20, 1),
              opacity   0.42s ease-in;
}
#flags-game .lf-hist-cell.win  { background: rgba(46, 139, 74, 0.15);  color: #2E8B4A; }  /* 同滑轨暗绿 */
#flags-game .lf-hist-cell.lose { background: rgba(168, 59, 49, 0.15);  color: #A83B31; }  /* 同滑轨暗红 */
/* New cell entering when the row isn't yet full — slides in from the right. */
#flags-game .lf-hist-cell.enter {
  animation: lf-hist-enter 0.42s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
@keyframes lf-hist-enter {
  from { transform: translate3d(30px, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
/* The oldest cell's exit (ride the belt one slot left + fade) is driven by
   inline styles in pushHistory so it moves in lockstep with the survivors. */

/* ============== Odds + Probability row ============== */
#flags-game .lf-odds {
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  padding: 11px 16px;
  box-sizing: border-box;
}
#flags-game .lf-odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#flags-game .lf-odds-label {
  font-size: 12px;
  color: var(--text-muted);
}
#flags-game .lf-odds-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ============== Slider ============== */
#flags-game .lf-slider-wrap {
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  padding: 30px 8px 15px;
  box-sizing: border-box;
}
/* Track layout — Flutter parity (slider_track_shape.dart):
     The painted bar spans the full track width.
     The thumb's CENTER moves between [thumb-r, trackW - thumb-r], i.e.
     it stays inset from both edges by one thumb radius — so the thumb
     circle never overflows the bar.
     Green/red boundary lines up with the thumb because both --pct and the
     native thumb use the same fraction (value - min)/(max - min). */
#flags-game .lf-slider-track {
  position: relative;
  height: 38px;
  /* Flutter parity: thumb radius = 20 (slider_track_shape.dart:25 thumbRadius)
     but Flutter draws semi-transparent thumb on a 25px track, so visually
     the thumb hugs the bar. We use a 32px thumb (radius 16) so the white
     circle sits centered on the 25px bar without dwarfing it. */
  --thumb-r: 10px;
  --thumb-d: 20px;
  padding: 0 var(--thumb-r);
  box-sizing: border-box;
}
/* Painted bar fills the whole track width (full extent, like Flutter's
   trackLeft..trackRight in the CustomPainter). */
#flags-game .lf-slider-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: linear-gradient(to right,
    var(--track-active) 0%,
    var(--track-active) calc(var(--pct, 50) * 1%),
    var(--track-inactive) calc(var(--pct, 50) * 1%),
    var(--track-inactive) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Native input occupies the full track and lets thumb sweep edge-to-edge.
   Browsers render the thumb so its CENTER aligns to the value fraction,
   which lands exactly on the same percentage of the bar. */
#flags-game .lf-slider-input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: var(--thumb-d);
  background: transparent;
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 2;
  touch-action: none;
}
#flags-game .lf-slider-input:disabled { cursor: not-allowed; }

/* Random pointer — Flutter parity (slider_track_shape.dart:252-253):
   `randomValue / 100 * totalTrackWidth`. Uses the bar's coordinate system
   (left:0..right:0 inside the padded track), so 0%..100% lines up with
   the bar 0%..100%. */
#flags-game .lf-slider-pointer {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  opacity: var(--rand-opacity, 1);
  transition: opacity 0.2s ease;
}
#flags-game .lf-slider-pointer-inner {
  position: absolute;
  top: 0;
  left: calc(var(--rand-pct, 0) * 1%);
  width: 0;
  height: 100%;
  transition: left 0.08s linear;
}
#flags-game .lf-pointer-line {
  position: absolute;
  width: 2px;
  height: calc(100% + 8px);   /* 上下各突出 4px,不与色条齐平 */
  background: rgba(255,255,255,0.9);
  left: 0;
  top: -4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
/* Rolled-value pill — embedded IN the track at the landing point,
   vertically centered on the bar. Keeps the layer above the bar
   exclusively for the player's flag (no more collisions). */
#flags-game .lf-pointer-val {
  position: absolute;
  left: 0;
  top: 100%;                       /* fully below the bar (mirror of the old above-bar spot) */
  transform: translate(-50%, 3px);
  min-width: 22px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Custom thumb (white circle) — center-aligns to the painted bar */
#flags-game .lf-slider-input::-webkit-slider-runnable-track {
  height: 16px;
  background: transparent;
  border-radius: 4px;
}
#flags-game .lf-slider-input::-moz-range-track {
  height: 16px;
  background: transparent;
  border-radius: 4px;
}
/* Thumb — Flutter parity (slider_track_shape.dart:161-162):
   Color.fromRGBO(255, 255, 255, 0.8) — semi-transparent white so the
   green/red bar shows through where the thumb overlaps it. */
#flags-game .lf-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8ee 55%, #cfcfd8 100%);
  border: 1px solid rgba(20, 20, 30, 0.45);
  margin-top: -2px; /* center the 20px thumb on the 16px painted bar */
  cursor: grab;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(0,0,0,0.35);
  transition: transform 0.1s;
}
#flags-game .lf-slider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
#flags-game .lf-slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8ee 55%, #cfcfd8 100%);
  border: 1px solid rgba(20, 20, 30, 0.45);
  cursor: grab;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 2px 6px rgba(0,0,0,0.35);
}

/* Tick labels under track — same horizontal extent as the painted bar.
   Track has padding-x = thumb-r (16px) so ticks must also be inset by
   that amount to line up with bar's 0%..100%. */
#flags-game .lf-slider-ticks {
  position: relative;
  height: 12px;
  /* Same coordinate space as the bar (full width, no inset) so each
     label centers exactly on its percentage point — 0 on the start
     edge, 100 on the end edge. */
  margin: -6px 0 0;
}
#flags-game .lf-tick {
  position: absolute;
  top: 0;
  font-size: 11px;
  color: var(--text-muted);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
/* 0 and 100 center on the track edges like every other tick. */

/* ============== Action row (Bet | Credits | Play) — limbo-style ==============
   Ported from web/games/limbo/play/limbo.css .lm-actions family; the
   BET CTA keeps this game's green (user request) instead of limbo gold. */
#flags-game .lf-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(96px, 1fr) minmax(110px, 1fr);
  gap: 10px;
  align-items: stretch;
}
#flags-game .lf-actions > * { min-width: 0; }

#flags-game .lf-bet {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
}
#flags-game .lf-bet-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 0;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
#flags-game .lf-bet-btn:hover { background: rgba(255,255,255,0.12); }
#flags-game .lf-bet-btn:active { transform: scale(0.94); }
#flags-game .lf-bet-btn svg { width: 18px; height: 18px; fill: currentColor; }
#flags-game .lf-bet-readout { text-align: center; min-width: 0; padding: 0 4px; }
#flags-game .lf-bet-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
#flags-game .lf-bet-value { font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

#flags-game .lf-balance {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  gap: 0;
}
#flags-game .lf-balance-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
#flags-game .lf-balance-value { font-size: 18px; font-weight: 800; color: #ffd54a; text-shadow: 0 0 12px rgba(255,213,74,.25); font-variant-numeric: tabular-nums; }

#flags-game .lf-launch { display: flex; }
#flags-game .lf-play {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  border-radius: var(--panel-radius);
  background: linear-gradient(180deg, #27A24D 0%, #17703A 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
  cursor: pointer;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 16px rgba(39,162,77,0.25);
  transition: transform 0.1s, filter 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#flags-game .lf-play:hover { filter: brightness(1.05); }
#flags-game .lf-play:active { transform: scale(0.96); }
#flags-game .lf-play:disabled {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.5);
  box-shadow: none;
  cursor: not-allowed;
}

/* Narrow viewport (limbo parity) */
@media (max-width: 480px) {
  #flags-game .lf-actions { grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(96px, 1fr); gap: 8px; }
  #flags-game .lf-bet-value, #flags-game .lf-balance-value { font-size: 16px; }
  #flags-game .lf-play { font-size: 16px; letter-spacing: 0.5px; }
}

/* ============== Auto bet row (Auto Bet + switch on left, sound on right) ============== */
/* Pulled up tight against the action row by overriding the .lf-inner gap */
#flags-game .lf-auto-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -10px;
}
#flags-game .lf-auto-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
#flags-game .lf-auto-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}
#flags-game .lf-auto-count { color: #FFEB3B; font-weight: 700; margin-left: 4px; }
#flags-game .lf-auto-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #1B1B2C;
  cursor: pointer;
  transition: background 0.2s;
  border: 0;
  padding: 0;
}
#flags-game .lf-auto-switch[data-on="1"] { background: #2da046; }
#flags-game .lf-auto-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s ease;
}
#flags-game .lf-auto-switch[data-on="1"]::after { left: 23px; }

/* ============== Modal (auto times picker + insufficient balance) ============== */
.lf-modal-overlay {
  position: absolute;   /* 相对 .game-player-wrapper,弹窗在游戏区域内居中 */
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: lf-fade-in 0.2s ease;
}
@keyframes lf-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lf-modal {
  background: #1F1F22;
  color: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  min-width: 240px;
  max-width: 320px;
  width: 80%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: lf-modal-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes lf-modal-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.lf-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  text-align: center;
}
.lf-modal-msg {
  font-size: 13px;
  color: #ddd;
  text-align: center;
  margin: 0 0 16px;
}
.lf-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.lf-modal-btn {
  background: var(--win, #35C759);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lf-modal-btn--ghost { background: #3A3A3F; }
.lf-modal-btn:hover { filter: brightness(1.1); }

/* ============== Sound settings dialog — ported from keno (.kn-ss-*) ============== */
.lf-ss-mask {
  position: absolute;   /* 相对 .game-player-wrapper,弹窗在游戏区域内居中 */
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: lf-ss-mask-in 180ms ease;
  font-family: 'Inter', system-ui, sans-serif;
}
@keyframes lf-ss-mask-in { from { opacity: 0; } to { opacity: 1; } }
.lf-ss-dialog {
  width: 340px;
  max-width: 100%;
  background: #1C1C1D;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  animation: lf-ss-dialog-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes lf-ss-dialog-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lf-ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lf-ss-title { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; }
.lf-ss-close {
  background: transparent; border: 0;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.lf-ss-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.lf-ss-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.lf-ss-row:last-child { border-bottom: none; }
.lf-ss-label { flex: 0 0 40%; color: rgba(255,255,255,.6); font-size: 15px; }
.lf-ss-switch {
  position: relative;
  display: inline-block;
  margin-left: auto;
  cursor: pointer;
}
.lf-ss-switch input {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.lf-ss-switch-track {
  display: inline-block;
  width: 44px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  transition: background .2s;
  position: relative;
}
.lf-ss-switch-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  transition: transform .2s, background .2s;
}
.lf-ss-switch input:checked + .lf-ss-switch-track { background: rgba(255,255,255,.30); }
.lf-ss-switch input:checked + .lf-ss-switch-track .lf-ss-switch-thumb {
  transform: translateX(20px);
  background: #FFFFFF;
}
input.lf-ss-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    #FFFFFF 0%, #FFFFFF var(--fill, 100%),
    rgba(255,255,255,.12) var(--fill, 100%), rgba(255,255,255,.12) 100%);
  outline: none;
  cursor: pointer;
}
input.lf-ss-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}
input.lf-ss-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
}

/* Ad slot (mirrors flutter version when isAds true — kept hidden by default) */
#flags-game .lf-ad-slot {
  display: none;
}

/* ============== Auto Times dialog — ported from keno (.kn-auto-modal-*) ============== */
.lf-modal-back {
  position: absolute;   /* 相对 .game-player-wrapper,弹窗在游戏区域内居中 */
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  pointer-events: auto;
  font-family: 'Inter', system-ui, sans-serif;
}
.lf-auto-modal {
  width: min(360px, 92%);
  padding: 26px 16px 18px;
  background: #17173A;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(178, 111, 255, 0.12) inset;
  font-family: 'Inter', system-ui, sans-serif;
  animation: lf-auto-modal-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes lf-auto-modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lf-auto-modal-title {
  margin: 0 0 22px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #FFE94A;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(255, 233, 74, 0.25);
}
.lf-auto-modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.lf-auto-modal-opt {
  position: relative;
  width: 100%;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, #B26FFF 0%, #E58CB6 50%, #FFC466 100%);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    0 4px 12px rgba(178, 111, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.lf-auto-modal-opt::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 13px 13px 50% 50% / 13px 13px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.lf-auto-modal-opt:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 8px 18px rgba(178, 111, 255, 0.38),
    0 0 0 1px rgba(255, 196, 102, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18);
}
.lf-auto-modal-opt:active {
  transform: translateY(1px);
  filter: brightness(0.96);
  box-shadow:
    0 2px 6px rgba(178, 111, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 3px rgba(0, 0, 0, 0.18);
}
.lf-auto-modal-num {
  position: relative;
  font-variant-numeric: tabular-nums;
}
.lf-auto-modal-suffix {
  position: relative;
  margin-left: 6px;
  font-weight: 600;
  opacity: 0.92;
}
.lf-auto-modal-cancel {
  width: 100%;
  height: 42px;
  background: #283151;
  color: #fff;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}
.lf-auto-modal-cancel:hover  { background: #34406d; }
.lf-auto-modal-cancel:active { transform: translateY(1px); }

/* ============================================================
   Lucky Flags additions — flag rows, flag marker, add button
   ============================================================ */

/* Rows column */
#flags-game .lf-rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* One flag row = its own compact panel (headerless — the track IS the row) */
#flags-game .lf-row {
  position: relative;
  width: 100%;
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  padding: 26px 38px 20px 18px;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: border-color 0.25s ease, opacity 0.25s ease;
}

/* Row header: FLAG N | chance + solo odds | remove */
#flags-game .lf-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 2px;
}
#flags-game .lf-row-name {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--text-yellow);
}
#flags-game .lf-row-stats {
  margin-left: auto;
  display: inline-flex;
  gap: 14px;
}
#flags-game .lf-row-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
#flags-game .lf-row-stat i {
  font-style: normal;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}
#flags-game .lf-row-stat b {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* 裸 × 按钮,紧贴行右上角(仅 2+ 旗时可见) */
#flags-game .lf-row-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.30);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
  z-index: 4;
}
#flags-game .lf-row-remove:hover { color: #fff; }

/* Flag marker — pole + pennant planted on the thumb. Same coordinate
   system as the native thumb center: inset by thumb radius, scaled by
   (100% − thumb diameter). */
#flags-game .lf-flag-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3; /* above the native thumb so the flag reads as the marker */
}
#flags-game .lf-flag-mark .lf-flag-pole,
#flags-game .lf-flag-mark .lf-flag-face {
  position: absolute;
  left: calc((100% - var(--thumb-d, 24px)) * var(--flag-pct, 50) / 100 + var(--thumb-r, 12px));
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: bottom center;
}
#flags-game .lf-flag-pole {
  width: 2.5px;
  height: 36px;
  top: -28px;
  margin-left: -1.25px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e8e8ee, #a9a9b6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
/* Numbered flag face — muted amber banner that harmonizes with the
   dark forest/brick track palette; the set value lives ON the flag
   (golf-pin style). Swallow-tail cut on the flying edge. */
#flags-game .lf-flag-face {
  top: -28px;
  margin-left: 1px;
  min-width: 26px;
  height: 17px;
  padding: 0 7px 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #C79A2E 0%, #A87E1E 100%);
  color: #1d1503;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Near the right edge (value > 85) the flag flies LEFT of the pole so
   it never sticks out past the track. */
#flags-game .lf-flag-mark.flip .lf-flag-face {
  transform: translateX(-100%);
  margin-left: -1px;
  padding: 0 5px 0 7px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
}

/* Outcome states — intentionally none. Per product decision the rows
   keep a constant look on win/lose (no dimming, no color shift, no
   flag tilt); the round outcome is communicated by the hero panel
   flash and the history chips only. The .hit/.miss classes are still
   applied by flags.js in case a subtle effect is wanted later. */

/* ADD FLAG button — dashed ghost row */
#flags-game .lf-add-flag {
  width: 100%;
  height: 34px;
  border: 1.5px dashed rgba(255, 204, 0, 0.4);
  border-radius: var(--panel-radius);
  background: rgba(255, 204, 0, 0.04);
  color: var(--text-yellow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
#flags-game .lf-add-flag:hover:not(:disabled) {
  background: rgba(255, 204, 0, 0.1);
  border-color: rgba(255, 204, 0, 0.7);
}
#flags-game .lf-add-flag:active:not(:disabled) { transform: scale(0.99); }
#flags-game .lf-add-flag:disabled { opacity: 0.4; cursor: not-allowed; }
#flags-game .lf-add-flag-icon {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

/* Consolation note inside the totals panel */
#flags-game .lf-consolation-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* Result kinds */
#flags-game .lf-result-text.part { color: var(--text-yellow); }
#flags-game .lf-hist-cell.part { background: rgba(199, 154, 46, 0.15); color: #C79A2E; }  /* 同旗面暗金 */

/* History cells are wider ("2/3") than Dice's plain numbers */
#flags-game .lf-hist-cell { width: 34px; font-size: 12px; }

/* ============== Info dialog (outcome explainer) ============== */
#flags-game .lf-auto-right { display: flex; align-items: center; gap: 2px; }
.lf-info-modal { max-width: 400px; padding: 24px 22px 18px; }
.lf-info-modal .lf-modal-title {
  color: #FFD700;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
/* 赔付矩阵:行 = 档位,列 = 旗数 */
.lf-pay-grid {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr 1fr 1fr;   /* 三列等宽等间距 */
  gap: 13px 8px;
  align-items: center;
  margin: 0 2px 18px;
}
.lf-pg-div {
  grid-column: 1 / -1;
  height: 1px;
  margin: -2px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.25), transparent);
}
.lf-pg-div.soft { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent); }
.lf-pg-h { font-size: 11px; color: #9a9aa5; text-align: center; letter-spacing: 0.6px; text-transform: uppercase; }
.lf-pg-l { font-size: 13px; font-weight: 700; text-align: left; letter-spacing: 0.2px; }
.lf-pg-l.win  { color: #3FA968; }
.lf-pg-l.part { color: #D4AC45; }
.lf-pg-l.lose { color: #C05248; }
.lf-pg-c { display: inline-flex; justify-content: center; gap: 4px; }
.lf-pg-none { color: #555; font-size: 13px; }
/* 弹窗内色块:描边版,略大 */
.lf-info-modal .lf-oc {
  min-width: 38px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
}
.lf-info-modal .lf-oc.win  { border: 1px solid rgba(46, 139, 74, 0.5);  color: #3FA968; }
.lf-info-modal .lf-oc.part { border: 1px solid rgba(199, 154, 46, 0.5); color: #D4AC45; }
.lf-info-modal .lf-oc.lose { border: 1px solid rgba(168, 59, 49, 0.5);  color: #C05248; }
/* 幽灵关闭按钮:通栏,低调 */
.lf-info-close {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.lf-info-close:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.25); filter: none; }
.lf-oc { width: 36px; padding: 0; }
.lf-info-row p { margin: 0; font-size: 14px; color: #ddd; flex: 1; }
/* 与历史记录同款配色的小块 */
.lf-oc {
  min-width: 30px;
  height: 24px;
  padding: 0 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.lf-oc.win  { background: rgba(46, 139, 74, 0.15);  color: #2E8B4A; }
.lf-oc.part { background: rgba(199, 154, 46, 0.15); color: #C79A2E; }
.lf-oc.lose { background: rgba(168, 59, 49, 0.15);  color: #A83B31; }

/* 广告栏在 wrapper 内部时(≥880px),遮罩让出栏宽,使弹窗以游戏列为中心
   —— 与 game-ad-rail.css 对 .game-cover 的处理同款(right: 326px)。 */
@media (min-width: 880px) {
  .car-has-rail .game-player-wrapper .lf-modal-overlay,
  .car-has-rail .game-player-wrapper .lf-modal-back,
  .car-has-rail .game-player-wrapper .lf-ss-mask { right: 326px; }
}

/* 手机端(≤480px):赔付弹窗整体缩字缩距,避免拥挤 */
@media (max-width: 480px) {
  /* 收窄行左右内边距,消除右侧多余留白 */
  #flags-game .lf-row { padding: 22px 16px 14px 12px; }
  .lf-info-modal { max-width: 300px; padding: 18px 16px 14px; }
  .lf-info-modal .lf-modal-title { font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
  .lf-pay-grid { gap: 9px 5px; margin: 0 0 14px; grid-template-columns: minmax(84px, auto) 1fr 1fr 1fr; }
  .lf-pg-h { font-size: 9.5px; letter-spacing: 0.3px; }
  .lf-pg-l { font-size: 11.5px; }
  .lf-info-modal .lf-oc { min-width: 32px; height: 22px; font-size: 11px; }
  .lf-info-close { padding: 9px; font-size: 13px; }
}

/* 窄屏:10 格历史记录太挤,分两档缩小 */
@media (max-width: 465px) {
  #flags-game .lf-history { height: 26px; }
  #flags-game .lf-hist-cell { width: 20px; height: 20px; font-size: 11px; border-radius: 3px; }
}
@media (max-width: 360px) {
  #flags-game .lf-hist-cell { width: 17px; height: 17px; font-size: 9.5px; }
}