/* ==========================================================================
   骰寶練習桌 — Macau electronic sic bo table
   Deliberate single visual world: a dark felt gaming table. Every colour is
   painted explicitly so the page holds on any host background.
   ========================================================================== */

:root{
  /* felt */
  --felt-0:#071309;
  --felt-1:#0C2317;
  --felt-2:#123020;
  --felt-3:#17402B;
  --felt-4:#1C4E34;
  --seam:#20593C;
  --seam-soft:rgba(32,89,60,.55);

  /* brass rail */
  --brass-1:#2A2111;
  --brass-2:#5C4620;
  --gold:#E0B65C;
  --gold-2:#C99A3F;
  --gold-dim:#8C6F30;

  /* ink */
  --bone:#F3EEE0;
  --bone-2:#B9C6BB;
  --bone-3:#8FA396;

  /* road-map / semantics (CVD-validated trio) */
  --red:#D9483C;
  --red-ink:#EF7E6F;
  --blue:#4C9BD6;
  --jade:#32A87A;
  --jade-ink:#5FD3A4;

  /* chips */
  --chip-1:#EDE7DA;
  --chip-5:#C4392E;
  --chip-25:#2E7D52;
  --chip-100:#1C1C1C;
  --chip-500:#6B4A9E;

  --r-sm:4px;
  --r-md:8px;
  --r-lg:14px;

  --ff-display:"Noto Serif TC",Georgia,"Songti TC",serif;
  --ff-ui:"Archivo","Noto Sans TC",system-ui,-apple-system,"Helvetica Neue",sans-serif;

  --shadow-cell:inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-ui);
  font-size:15px;
  line-height:1.5;
  color:var(--bone);
  background-color:var(--felt-0);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #14442C 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 110%, #0E2B1B 0%, transparent 70%),
    linear-gradient(180deg,#0A1D12 0%,#071309 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
/* woven felt grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)}
table{border-collapse:collapse}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pos{color:var(--jade-ink)}
.neg{color:var(--red-ink)}

/* ---------- shell ------------------------------------------------------- */
.shell{
  position:relative;z-index:1;max-width:1460px;margin:0 auto;
  padding:18px max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));
}

.rail{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 18px;margin-bottom:16px;
  border:1px solid var(--brass-2);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#3A2C13 0%,#241B0C 45%,#181206 100%);
  box-shadow:inset 0 1px 0 rgba(224,182,92,.35),0 6px 22px rgba(0,0,0,.5);
}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto}
.brand h1{
  margin:0;font-family:var(--ff-display);font-weight:900;font-size:26px;letter-spacing:.06em;
  color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.6);text-wrap:balance;
}
.brand .tag{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);
  font-stretch:87%;font-weight:600;
}
.rail-stat{display:flex;flex-direction:column;gap:1px;min-width:96px}
.rail-stat .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);font-weight:600}
.rail-stat .v{font-size:20px;font-weight:800;color:var(--bone);font-stretch:87%}
.rail-stat .v.gold{color:var(--gold)}
.rail-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- board ------------------------------------------------------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:16px;align-items:start}
.felt{
  border:1px solid var(--seam-soft);
  border-radius:var(--r-lg);
  background:
    radial-gradient(130% 90% at 50% 0%, #17452D 0%, #0E2A1B 55%, #0A2015 100%);
  box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 0 0 6px rgba(0,0,0,.18);
  padding:16px;
}

/* ---------- stage: shaker + readout + road ------------------------------ */
.stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-bottom:18px}

.dome{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  width:280px;height:150px;padding:10px;
  border-radius:80px/64px;
  border:1px solid rgba(224,182,92,.28);
  background:
    radial-gradient(70% 55% at 50% 22%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 120%, #16402A 0%, #0B2015 70%);
  box-shadow:inset 0 -14px 30px rgba(0,0,0,.55),inset 0 3px 12px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.45);
  perspective:700px;
}
.dome.shaking{animation:shake .62s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  15%{transform:translate3d(-7px,2px,0) rotate(-1.4deg)}
  30%{transform:translate3d(6px,-3px,0) rotate(1.2deg)}
  45%{transform:translate3d(-5px,3px,0) rotate(-1deg)}
  60%{transform:translate3d(5px,-2px,0) rotate(.9deg)}
  80%{transform:translate3d(-3px,1px,0) rotate(-.5deg)}
}

.die{position:relative;width:58px;height:58px;transform-style:preserve-3d;transition:transform 900ms cubic-bezier(.2,.8,.25,1)}
.die-face{
  position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  padding:7px;border-radius:9px;
  background:linear-gradient(155deg,#FCFAF4 0%,#E4DDCB 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 -5px 9px rgba(0,0,0,.14);
  backface-visibility:hidden;
}
.die-face .pip{width:100%;height:100%;display:block;position:relative}
.die-face .pip::after{
  content:"";position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#4A4A4A 0%,#111 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25);
}
.die-face.red .pip::after{background:radial-gradient(circle at 32% 28%,#E4695C 0%,#B21F16 72%)}
.f1{transform:translateZ(29px)}
.f6{transform:rotateY(180deg) translateZ(29px)}
.f2{transform:rotateY(90deg) translateZ(29px)}
.f5{transform:rotateY(-90deg) translateZ(29px)}
.f3{transform:rotateX(90deg) translateZ(29px)}
.f4{transform:rotateX(-90deg) translateZ(29px)}

.readout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.total-plate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:132px;padding:10px 16px;border-radius:var(--r-md);
  border:1px solid var(--seam);
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.18));
}
.total-plate .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);font-weight:600}
.total-plate .total{font-size:60px;line-height:1;font-weight:800;font-stretch:112%;color:var(--gold);font-variant-numeric:tabular-nums}
.total-plate .verdict{margin-top:4px;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--bone-2)}
.total-plate .verdict[data-v="big"]{color:var(--red-ink)}
.total-plate .verdict[data-v="small"]{color:var(--blue)}
.total-plate .verdict[data-v="triple"]{color:var(--jade-ink)}
.total-plate.idle .total{color:var(--bone-3);opacity:.5}

/* bead plate road (珠盤路) */
.road-wrap{min-width:0}
.road-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.road-head h2{margin:0;font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.08em}
.road-head .legend{display:flex;gap:10px;font-size:11px;color:var(--bone-3)}
.road-head .legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.road{
  display:grid;grid-template-rows:repeat(3,22px);grid-auto-flow:column;grid-auto-columns:22px;gap:3px;
  padding:7px;border-radius:var(--r-md);overflow-x:auto;overflow-y:hidden;
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.28);
  scrollbar-width:thin;scrollbar-color:var(--seam) transparent;
}
.bead{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:#08170F;
  border:1px solid rgba(0,0,0,.35);
}
.bead[data-t="big"]{background:var(--red)}
.bead[data-t="small"]{background:var(--blue)}
.bead[data-t="triple"]{background:var(--jade)}
.road.is-empty{display:block}
.road-empty{color:var(--bone-3);font-size:12px;padding:4px 2px;line-height:1.6}

/* ---------- betting layout ---------------------------------------------- */
.band{margin-bottom:12px}
.band-head{
  display:flex;align-items:baseline;gap:10px;width:100%;margin:0 0 6px;padding:4px 2px;
  text-align:left;border-radius:var(--r-sm);touch-action:manipulation;
}
.band-head:hover{background:rgba(224,182,92,.06)}
.band-head .chev{
  width:14px;flex:0 0 auto;color:var(--gold-dim);font-size:10px;line-height:1;
  transition:transform 160ms ease;transform:rotate(90deg);align-self:center;
}
.band.collapsed .band-head .chev{transform:rotate(0deg)}
.band.collapsed .grid{display:none}
.band-head .count{
  display:none;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;
  color:#20180A;background:var(--gold);font-variant-numeric:tabular-nums;
}
.band.collapsed .band-head .count.on{display:inline-block}
.band-head h3{
  margin:0;font-family:var(--ff-display);font-size:13px;font-weight:700;
  color:var(--gold);letter-spacing:.14em;
}
.band-head .odds{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold-dim);
  font-stretch:87%;text-transform:uppercase;
}
.band-head .hint{margin-left:auto;font-size:11px;color:var(--bone-3)}
.grid{display:grid;gap:6px}
.g-triples{grid-template-columns:repeat(7,minmax(0,1fr))}
.g-main{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-doubles{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-totals{grid-template-columns:repeat(7,minmax(0,1fr))}
.g-combos{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-singles{grid-template-columns:repeat(6,minmax(0,1fr))}

.cell{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:60px;padding:7px 5px;
  border:1px solid var(--seam);border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--felt-3) 0%,var(--felt-2) 100%);
  box-shadow:var(--shadow-cell);
  transition:background 140ms ease,border-color 140ms ease,transform 90ms ease;
  text-align:center;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.cell:hover{background:linear-gradient(180deg,var(--felt-4) 0%,var(--felt-3) 100%);border-color:var(--gold-dim)}
.cell:active{transform:translateY(1px)}
.cell .name{font-size:14px;font-weight:700;color:var(--bone);line-height:1.15}
.cell .odds{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--gold);font-stretch:87%;font-variant-numeric:tabular-nums}
.cell .he{font-size:9px;color:var(--bone-3);font-variant-numeric:tabular-nums}
.cell.tall{min-height:70px}
.cell.main .name{font-family:var(--ff-display);font-size:26px;font-weight:900;letter-spacing:.1em}
.cell[data-tone="big"] .name{color:var(--red-ink)}
.cell[data-tone="small"] .name{color:var(--blue)}
.cell.num-cell .name{font-size:24px;font-weight:800;font-stretch:112%;font-variant-numeric:tabular-nums}
.cell .face{display:flex;gap:3px;align-items:center;justify-content:center}
.cell .face:empty{display:none}

.cell.has-bet{border-color:var(--gold);background:linear-gradient(180deg,#1F5537 0%,#153B27 100%)}
.cell.win{
  border-color:var(--gold);
  background:linear-gradient(180deg,#3A5B22 0%,#22401C 100%);
  animation:winpulse 1.5s ease-out 2;
}
@keyframes winpulse{
  0%,100%{box-shadow:var(--shadow-cell),0 0 0 0 rgba(224,182,92,0)}
  40%{box-shadow:var(--shadow-cell),0 0 18px 3px rgba(224,182,92,.55)}
}
.cell.hit{border-color:var(--gold-dim)}
.cell.lost{opacity:.42}

/* mini dice printed on the felt */
.mini-row{display:flex;gap:3px;align-items:center;justify-content:center}
.mini{
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
  flex:0 0 auto;width:20px;height:20px;padding:2px;border-radius:3px;
  background:linear-gradient(155deg,#F7F3E9,#DED7C5);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.mini .pip{position:relative}
.mini .pip::after{content:"";position:absolute;inset:12%;border-radius:50%;background:#15140F}
.mini.red .pip::after{background:#B7241A}
.mini.lg{width:26px;height:26px;padding:3px;border-radius:4px}

/* chip stack sitting on a cell */
.stack{
  position:absolute;right:3px;bottom:3px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#0D0D0D;border:2px dashed rgba(255,255,255,.75);
  box-shadow:0 2px 5px rgba(0,0,0,.55),0 4px 0 -2px rgba(0,0,0,.35);
}
.stack.dark{color:#F6F2E6;border-color:rgba(255,255,255,.6)}

/* ---------- console ----------------------------------------------------- */
.console{display:flex;flex-direction:column;gap:12px;min-width:0}
.panel{
  border:1px solid var(--seam-soft);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(18,48,32,.92),rgba(10,29,18,.92));
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  padding:14px;
}
.panel h2{
  margin:0 0 10px;font-family:var(--ff-display);font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--gold);
}

/* dock: balance + chips + actions (fixed to the bottom on phones) */
.dock{display:flex;flex-direction:column;gap:12px}
.meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.meter{
  padding:8px 10px;border-radius:var(--r-md);
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.3);
}
.meter .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);font-weight:600;white-space:nowrap}
.meter .v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;font-stretch:87%}
.meter .sub{font-size:10px;color:var(--bone-3);font-variant-numeric:tabular-nums}

.tray{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.chip{
  position:relative;flex:0 0 auto;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:#111;
  border:3px dashed rgba(255,255,255,.8);
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 3px rgba(0,0,0,.12);
  transition:transform 120ms ease,box-shadow 120ms ease;
}
.chip.dark{color:#F6F2E6;border-color:rgba(255,255,255,.55)}
.chip:hover{transform:translateY(-3px)}
.chip[aria-pressed="true"]{
  transform:translateY(-6px);
  box-shadow:0 0 0 2px var(--gold),0 8px 16px rgba(0,0,0,.6);
}

.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;border-radius:var(--r-md);font-weight:700;font-size:14px;
  border:1px solid var(--seam);background:linear-gradient(180deg,var(--felt-3),var(--felt-2));
  color:var(--bone);transition:background 130ms ease,border-color 130ms ease,transform 90ms ease;
}
.btn:hover:not(:disabled){background:linear-gradient(180deg,var(--felt-4),var(--felt-3));border-color:var(--gold-dim)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{
  grid-column:1/-1;padding:14px;font-size:18px;font-family:var(--ff-display);font-weight:900;letter-spacing:.24em;
  color:#20180A;border-color:var(--gold);
  background:linear-gradient(180deg,#F0CC79 0%,#D4A548 55%,#B8862F 100%);
  box-shadow:0 4px 0 #8A6321,0 8px 18px rgba(0,0,0,.5);
}
.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#F7D98E 0%,#DDB055 55%,#C08F33 100%)}
.btn.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #8A6321,0 4px 10px rgba(0,0,0,.5)}
.btn.sm{padding:7px 9px;font-size:12px;font-weight:600}

/* tabs */
.tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--seam-soft)}
.tab{
  padding:7px 11px;font-size:13px;font-weight:700;color:var(--bone-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tab:hover{color:var(--bone-2)}
.tab[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold);background:rgba(224,182,92,.07)}
.tabpanel[hidden]{display:none}

/* result list */
.rows{display:flex;flex-direction:column;gap:5px}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;
  padding:7px 9px;border-radius:var(--r-sm);
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.24);font-size:13px;
}
.row .r-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r-stake{color:var(--bone-3);font-variant-numeric:tabular-nums}
.row .r-net{font-weight:800;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.row.won{border-color:rgba(50,168,122,.55);background:rgba(50,168,122,.1)}
.empty{color:var(--bone-3);font-size:13px;padding:10px 2px;line-height:1.7}

/* stat grid + table */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.dl{width:100%;font-size:13px}
.dl th,.dl td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--seam-soft)}
.dl th{color:var(--bone-3);font-weight:600}
.dl td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.dl tr:last-child th,.dl tr:last-child td{border-bottom:none}

.odds-table{width:100%;font-size:12px}
.odds-table th{
  position:sticky;top:0;z-index:1;padding:6px 6px;text-align:left;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);font-weight:700;
  background:var(--felt-2);border-bottom:1px solid var(--seam);
}
.odds-table td{padding:5px 6px;border-bottom:1px solid rgba(32,89,60,.3);vertical-align:middle}
.odds-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.odds-table tr:hover td{background:rgba(224,182,92,.06)}
.scroll{max-height:420px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--seam) transparent}
.he-bar{position:relative;display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:3px}
.he-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--gold-2)}
.he-bar.good i{background:var(--jade)}
.he-bar.bad i{background:var(--red)}

/* chart */
.chart-legend{display:flex;gap:14px;font-size:11px;color:var(--bone-2);margin-bottom:6px}
.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.chart-wrap{width:100%;overflow-x:auto}
.chart text{font-family:var(--ff-ui);font-variant-numeric:tabular-nums}

/* prose */
.prose{font-size:13.5px;line-height:1.75;color:var(--bone-2)}
.prose h3{margin:16px 0 6px;font-family:var(--ff-display);font-size:14px;color:var(--gold);letter-spacing:.06em}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 8px}
.prose ul{margin:0 0 10px;padding-left:18px}
.prose li{margin-bottom:4px}
.prose b{color:var(--bone)}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.35);color:var(--gold)
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;
  border:1px solid var(--gold-dim);background:rgba(12,35,23,.96);color:var(--gold);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity 200ms ease,transform 200ms ease;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.foot{margin-top:18px;font-size:12px;color:var(--bone-3);text-align:center;line-height:1.8}
.foot b{color:var(--bone-2)}

/* ---------- 教學導覽 overlay -------------------------------------------- */
.tour{position:fixed;inset:0;z-index:60}
.tour[hidden]{display:none}
.tour-mask{
  position:fixed;border-radius:10px;pointer-events:none;
  border:2px solid var(--gold);
  box-shadow:0 0 0 9999px rgba(4,12,8,.76),0 0 22px 4px rgba(224,182,92,.35);
  transition:top .3s cubic-bezier(.3,.8,.3,1),left .3s cubic-bezier(.3,.8,.3,1),
             width .3s cubic-bezier(.3,.8,.3,1),height .3s cubic-bezier(.3,.8,.3,1);
}
.tour-mask.center{border-color:transparent;box-shadow:0 0 0 9999px rgba(4,12,8,.76)}
.tour-card{
  position:fixed;width:min(360px,calc(100vw - 24px));z-index:61;
  padding:16px 16px 14px;border-radius:var(--r-lg);
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,#12301F 0%,#0B2015 100%);
  box-shadow:0 16px 44px rgba(0,0,0,.7);
}
.tour-step{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);font-weight:700}
.tour-card h4{
  margin:4px 0 6px;font-family:var(--ff-display);font-size:17px;font-weight:700;
  color:var(--gold);letter-spacing:.04em;text-wrap:balance;
}
.tour-card p{margin:0 0 12px;font-size:14px;line-height:1.7;color:var(--bone-2)}
.tour-card p b{color:var(--bone)}
.tour-actions{display:flex;gap:8px;align-items:center}
.tour-actions .spacer{margin-left:auto}
.tour-actions .btn{padding:8px 14px;font-size:13px}
.tour-actions .btn.primary{
  font-family:var(--ff-ui);font-size:14px;letter-spacing:.06em;padding:9px 18px;box-shadow:0 3px 0 #8A6321;
}

/* ---------- 手機結果卡 --------------------------------------------------- */
.sheet{
  position:fixed;left:10px;right:10px;z-index:45;display:none;
  align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,rgba(20,52,34,.98),rgba(9,26,16,.98));
  box-shadow:0 14px 38px rgba(0,0,0,.7);
  animation:sheetIn .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.sheet-dice{display:flex;gap:4px;flex:0 0 auto}
.sheet-main{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sheet-total{font-size:30px;font-weight:800;color:var(--gold);font-stretch:112%}
.sheet-verdict{font-size:12px;font-weight:700;color:var(--bone-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-net{margin-left:auto;font-size:22px;font-weight:800;flex:0 0 auto}
.sheet-hint{position:absolute;right:14px;bottom:3px;font-size:9px;color:var(--bone-3)}

/* ---------- 教學分頁 ----------------------------------------------------- */
.tour-cta{width:100%;margin-bottom:16px;font-size:15px;letter-spacing:.1em}
.prose ol.steps{margin:0 0 12px;padding-left:20px}
.prose ol.steps li{margin-bottom:5px}
.prose .note{font-size:12px;color:var(--bone-3)}
.learn-bets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.lb{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:10px 11px;border-radius:var(--r-md);
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.26);
}
.lb-art{display:flex;gap:3px;align-items:center;padding-top:2px}
.lb-name{font-size:14px;font-weight:700;color:var(--bone);margin-bottom:2px}
.lb-when{font-size:12.5px;color:var(--bone-2);line-height:1.6}
.lb-meta{
  display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11px;
  color:var(--bone-3);font-variant-numeric:tabular-nums;
}
.lb-meta b{color:var(--gold);font-weight:700}
.lb-meta .he{color:var(--bone-2)}
.lb-meta .he.good{color:var(--jade-ink)}
.lb-meta .he.bad{color:var(--red-ink)}

.btn.gold-line{border-color:var(--gold-dim);color:var(--gold)}
.btn.gold-line:hover:not(:disabled){border-color:var(--gold)}

/* ---------- 賠率表切換 --------------------------------------------------- */
.pt-pick{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.pt{
  flex:1 1 auto;padding:7px 10px;border-radius:var(--r-sm);font-size:12.5px;font-weight:700;
  border:1px solid var(--seam);background:rgba(0,0,0,.24);color:var(--bone-2);
  touch-action:manipulation;white-space:nowrap;
}
.pt:hover{border-color:var(--gold-dim);color:var(--bone)}
.pt[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(224,182,92,.1)}
.pt-note{margin:0 0 10px;font-size:12px;color:var(--bone-3);line-height:1.6}
.pt-editor{
  display:grid;grid-template-columns:minmax(0,1fr);gap:5px;
  margin-bottom:12px;padding:10px;border-radius:var(--r-md);
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.24);
}
.pt-editor .sec{
  margin-top:4px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dim);font-weight:700;
}
.pt-editor .sec:first-child{margin-top:0}
.pt-reset{margin-top:6px;justify-self:start;padding:6px 12px;font-size:12px}
.pt-editor .f{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bone-2)}
.pt-editor .f span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-editor .f em{flex:0 0 auto;font-style:normal;font-size:10px;color:var(--bone-3);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
input[type="number"],select{
  width:64px;flex:0 0 auto;padding:5px 6px;border-radius:var(--r-sm);
  border:1px solid var(--seam);background:rgba(0,0,0,.4);color:var(--bone);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;text-align:right;
}
select{width:auto;text-align:left}
input[type="number"]:focus,select:focus{border-color:var(--gold);outline:none}

/* ---------- 投注系統實驗室 ----------------------------------------------- */
.lab-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-bottom:12px;
  padding:11px;border-radius:var(--r-md);border:1px solid var(--seam-soft);background:rgba(0,0,0,.24);
}
.lab-form .f{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--bone-2)}
.btn.lab-go{width:100%;margin-bottom:12px;font-size:15px;letter-spacing:.14em}
.lab-out{display:flex;flex-direction:column;gap:10px}
.lab-table{width:100%;font-size:12px}
.lab-table th{
  padding:6px 5px;text-align:right;font-size:10px;letter-spacing:.08em;color:var(--gold-dim);font-weight:700;
  border-bottom:1px solid var(--seam);
}
.lab-table th:first-child{text-align:left}
.lab-table td{padding:7px 5px;text-align:right;border-bottom:1px solid rgba(32,89,60,.3);font-variant-numeric:tabular-nums}
.lab-table td:first-child{text-align:left;font-weight:700;color:var(--bone)}
.lab-table tr{cursor:pointer}
.lab-table tbody tr:hover td{background:rgba(224,182,92,.06)}
.lab-table tr.on td{background:rgba(224,182,92,.12)}
.lab-table tr.on td:first-child{color:var(--gold)}
.lab-take{
  padding:11px 12px;border-radius:var(--r-md);font-size:13px;line-height:1.7;
  border:1px solid var(--gold-dim);background:rgba(224,182,92,.07);color:var(--bone-2);
}
.lab-take b{color:var(--gold)}
.lab-cap{font-size:11px;color:var(--bone-3);line-height:1.6}

/* ---------- 賠率快問快答 ------------------------------------------------- */
.quiz{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:14px;
  background:rgba(4,12,8,.82)}
.quiz[hidden]{display:none}
.quiz-card{
  width:min(440px,100%);max-height:calc(100vh - 28px);overflow-y:auto;
  padding:16px;border-radius:var(--r-lg);
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,#12301F 0%,#0B2015 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.7);
}
.quiz-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.quiz-head h3{
  margin:0;flex:1 1 auto;font-family:var(--ff-display);font-size:15px;font-weight:700;
  color:var(--gold);letter-spacing:.08em;
}
.quiz-head .n{font-size:12px;color:var(--bone-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.quiz-x{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;font-size:16px;line-height:1;
  color:var(--bone-3);border:1px solid var(--seam);
}
.quiz-x:hover{color:var(--bone);border-color:var(--gold-dim)}
.quiz-dots{display:flex;gap:4px;margin-bottom:14px}
.quiz-dots i{flex:1 1 0;height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.quiz-dots i.ok{background:var(--jade)}
.quiz-dots i.no{background:var(--red)}
.quiz-dots i.now{background:var(--gold)}

.quiz-dice{display:flex;gap:6px;align-items:center;justify-content:center;margin-bottom:10px}
.quiz-dice .tot{
  margin-left:6px;font-size:13px;font-weight:700;color:var(--bone-2);font-variant-numeric:tabular-nums;
}
.quiz-q{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.5;color:var(--bone);text-wrap:balance}
.quiz-hint{margin:0 0 14px;font-size:12.5px;color:var(--bone-3)}

.quiz-opts{display:flex;flex-direction:column;gap:8px}
.quiz-opt{
  display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;
  border:1px solid var(--seam);border-radius:var(--r-md);text-align:left;
  background:linear-gradient(180deg,var(--felt-3),var(--felt-2));
  transition:border-color 130ms ease,background 130ms ease,transform 90ms ease;
  touch-action:manipulation;
}
.quiz-opt:hover:not(:disabled){border-color:var(--gold-dim)}
.quiz-opt:active:not(:disabled){transform:translateY(1px)}
.quiz-opt .t{flex:1 1 auto;font-size:15px;font-weight:700;color:var(--bone)}
.quiz-opt .s{flex:0 0 auto;font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.quiz-opt .mark{flex:0 0 auto;width:20px;text-align:center;font-size:15px;font-weight:800}
.quiz-opt.right{border-color:var(--jade);background:linear-gradient(180deg,#23543A,#173A28)}
.quiz-opt.right .mark{color:var(--jade-ink)}
.quiz-opt.wrong{border-color:var(--red);background:linear-gradient(180deg,#4A2620,#331A16)}
.quiz-opt.wrong .mark{color:var(--red-ink)}
.quiz-opt:disabled{cursor:default;opacity:1}
.quiz-opt.faded{opacity:.45}

.quiz-fb{margin-top:14px;padding:12px 13px;border-radius:var(--r-md);font-size:13.5px;line-height:1.75}
.quiz-fb.ok{border:1px solid rgba(50,168,122,.5);background:rgba(50,168,122,.1);color:var(--bone-2)}
.quiz-fb.no{border:1px solid rgba(217,72,60,.5);background:rgba(217,72,60,.1);color:var(--bone-2)}
.quiz-fb b{color:var(--bone)}
.quiz-fb .v{display:block;margin-bottom:4px;font-weight:800}
.quiz-fb.ok .v{color:var(--jade-ink)}
.quiz-fb.no .v{color:var(--red-ink)}
.quiz-next{width:100%;margin-top:12px}

.quiz-end{text-align:center;padding:6px 0 2px}
.quiz-score{font-size:52px;font-weight:800;font-stretch:112%;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.quiz-score small{font-size:20px;color:var(--bone-3);font-weight:700}
.quiz-verdict{margin:8px 0 14px;font-size:14px;font-weight:700;color:var(--bone-2)}
.quiz-break{
  display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding:11px;
  border-radius:var(--r-md);border:1px solid var(--seam-soft);background:rgba(0,0,0,.26);
}
.quiz-break .r{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--bone-2)}
.quiz-break .r span:first-child{flex:1 1 auto;text-align:left}
.quiz-break .r b{font-variant-numeric:tabular-nums;color:var(--bone)}
.quiz-again{display:flex;gap:8px}
.quiz-again .btn{flex:1 1 0}

/* ---------- 可收合的教學段落 --------------------------------------------- */
.prose details{
  margin-bottom:8px;border:1px solid var(--seam-soft);border-radius:var(--r-md);
  background:rgba(0,0,0,.2);overflow:hidden;
}
.prose details[open]{background:rgba(0,0,0,.28)}
.prose summary{
  padding:11px 13px;cursor:pointer;list-style:none;
  font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--gold);
  letter-spacing:.04em;touch-action:manipulation;position:relative;padding-right:34px;
}
.prose summary::-webkit-details-marker{display:none}
.prose summary::after{
  content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--gold-dim);border-bottom:2px solid var(--gold-dim);
  transform:translateY(-70%) rotate(45deg);transition:transform 160ms ease;
}
.prose details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.prose summary:hover{background:rgba(224,182,92,.06)}
.prose details > *:not(summary){margin-left:13px;margin-right:13px}
.prose details > *:last-child{margin-bottom:13px}
.prose details h4{
  margin:14px 13px 5px;font-size:13.5px;font-weight:700;color:var(--bone);letter-spacing:.02em;
}
.prose details.guide summary{color:var(--jade-ink)}
.prose details.guide summary::after{border-color:var(--jade)}
.prose details.guide[open]{border-color:rgba(50,168,122,.4)}

/* ---------- 一晚要花多少 -------------------------------------------------- */
.lab-hr{margin:20px 0;border:none;border-top:1px solid var(--seam-soft)}
.cost-hero{
  padding:14px;border-radius:var(--r-md);text-align:center;
  border:1px solid var(--gold-dim);background:rgba(224,182,92,.08);
}
.cost-hero .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);font-weight:700}
.cost-hero .v{font-size:40px;font-weight:800;font-stretch:112%;line-height:1.1;color:var(--red-ink);font-variant-numeric:tabular-nums}
.cost-hero .s{margin-top:4px;font-size:13px;color:var(--bone-2)}
.cost-hero .s b{color:var(--bone)}
.cost-rows{display:flex;flex-direction:column;gap:6px}
.cost-row{
  display:flex;align-items:baseline;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--seam-soft);background:rgba(0,0,0,.24);font-size:13px;
}
.cost-row .k{flex:1 1 auto;color:var(--bone-2)}
.cost-row .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-note{
  padding:12px 13px;border-radius:var(--r-md);font-size:13px;line-height:1.75;
  border:1px solid var(--seam);background:rgba(0,0,0,.26);color:var(--bone-2);
}
.cost-note b{color:var(--gold)}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1120px){
  .board{grid-template-columns:minmax(0,1fr)}
  .stage{grid-template-columns:minmax(0,1fr)}
  .dome{width:100%;max-width:330px;margin:0 auto}
}
@media (max-width:860px){
  .shell{padding:12px max(10px,env(safe-area-inset-right)) 200px max(10px,env(safe-area-inset-left))}
  /* 開骰後把結果推到眼前：此時檯面通常已經捲到下方，骰盅看不見 */
  .sheet{display:flex;bottom:200px}
  .band-head{padding:8px 4px;margin-bottom:5px}
  .tabs{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;padding:7px 9px;font-size:12.5px}
  .lab-form{grid-template-columns:minmax(0,1fr)}
  .band-head h3{font-size:14px}
  .road{grid-template-rows:repeat(2,22px)}
  .rail{padding:10px 12px;gap:12px}
  .brand h1{font-size:21px}
  .brand .tag{display:none}
  .rail-stat{min-width:74px}
  .rail-stat .v{font-size:16px}
  .rail-tools{width:100%;gap:6px}
  .rail-tools .btn{flex:1 1 auto;padding:8px 6px;font-size:12px}
  .felt{padding:11px}
  .readout{grid-template-columns:minmax(0,1fr);gap:10px}
  .total-plate{flex-direction:row;gap:12px;align-items:baseline;justify-content:center}
  .total-plate .total{font-size:42px}
  .g-triples{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-doubles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-combos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-singles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cell{min-height:56px}
  .cell.main .name{font-size:22px}

  .dock{
    position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid var(--gold-dim);border-radius:0;
    background:linear-gradient(180deg,rgba(11,30,19,.97),rgba(7,19,9,.99));
    box-shadow:0 -8px 26px rgba(0,0,0,.6);
    backdrop-filter:blur(6px);
  }
  .dock .meters{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .dock .meter{padding:4px 7px}
  .dock .meter .k{font-size:9px;letter-spacing:.1em}
  .dock .meter .v{font-size:16px}
  .dock .meter .sub{display:none}
  .dock .tray{padding:0;gap:8px}
  .dock .chip{width:46px;height:46px;font-size:14px;border-width:3px}
  .dock .actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .dock .btn.primary{grid-column:span 2;padding:12px;font-size:16px;letter-spacing:.14em;box-shadow:0 3px 0 #8A6321}
  .dock .btn.sm{padding:8px 4px;font-size:11.5px}
  .dock .btn.hide-sm{display:none}
  .tour-card{padding:14px 14px 12px}
  .tour-card h4{font-size:16px}
  .tour-card p{font-size:13.5px;margin-bottom:10px}
}
@media (max-width:420px){
  .g-totals{grid-template-columns:repeat(5,minmax(0,1fr))}
  .cell .odds{font-size:9px}
}

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