/* ============================================================================
 *  XenoXanadu — Bubble Craps — palette, the acrylic dome, and the felt layout.
 *  Structural chrome (control bar, segmented toggles, scoreboard, AI panel)
 *  comes from the shared lib/arcade.css. This file carries the machine itself:
 *  the glowing dice bubble, the stickperson callout, the chip rail, the full
 *  stadium layout, the coach line and the session ledger.
 * ========================================================================== */
:root {
  --bg:        #0b0d0f;
  --bg-2:      #121417;
  --panel:     #121417;
  --panel-2:   #191c20;
  --grid:      #23262b;
  --line:      #2f3339;
  --text:      #e7e6e0;
  --muted:     #868a91;
  --accent:    #38c6e0;          /* acrylic-bubble cyan */
  --on-accent: #08191d;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --wrap-max: 980px;

  --seg-bg:        #121417;
  --seg-active-bg: #191c20;
  --ai-on:  #38c6e0;
  --ai-err: #cf5a52;

  --felt:   #0f1a17;
  --felt-2: #13221e;
  --win:    #6dbf95;
  --lose:   #cf5a52;
  --push:   #c7a24a;
  --gold:   #c7a24a;

  /* bet-quality tiers, used by the coach and the chip stacks alike */
  --t-free:  #38c6e0;
  --t-good:  #6dbf95;
  --t-ok:    #c7a24a;
  --t-poor:  #cf8a52;
  --t-awful: #cf5a52;
}

body { background: var(--bg); }

h1 {
  text-align: center; margin: 4px 0 6px; font-size: clamp(26px, 6vw, 46px);
  font-weight: 800; letter-spacing: 5px; text-transform: uppercase; color: var(--text);
}
h1 .b { color: var(--accent); }
.tagline {
  text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 22px;
}

/* ---------- scoreboard ---------- */
.score-card.bank .score { color: var(--accent); }
.score-card.risk .score { color: var(--gold); }
.score-card.pt   .score { color: var(--muted); }
.score-card.pt.on { border-color: var(--win); }
.score-card.pt.on .score { color: var(--win); }
.score-card .score { font-variant-numeric: tabular-nums; }

/* ============================ THE BUBBLE ============================ */
.machine {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center;
  background: var(--panel); border: 1px solid var(--grid); padding: 18px; margin-bottom: 16px;
}

.dome {
  position: relative; width: 200px; height: 200px; margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(56,198,224,.20), transparent 46%),
    radial-gradient(circle at 50% 118%, rgba(56,198,224,.16), transparent 55%),
    var(--felt);
  border: 2px solid #1e3a41;
  box-shadow: inset 0 0 40px #0009, 0 0 26px rgba(56,198,224,.10);
  overflow: hidden;
}
/* the acrylic highlight that sells "there is glass in front of this" */
.dome::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.13) 0 26%, transparent 42%);
}
/* the air jet in the base */
.dome .puff {
  position: absolute; left: 50%; bottom: -14px; width: 74px; height: 74px; margin-left: -37px;
  border-radius: 50%; background: radial-gradient(circle, rgba(56,198,224,.5), transparent 70%);
  opacity: 0; pointer-events: none;
}
.dome.blowing .puff { animation: puff .5s ease-out; }
@keyframes puff {
  0%   { opacity: .9; transform: scale(.3); }
  100% { opacity: 0;  transform: scale(2.6); }
}

.die {
  position: absolute; width: 46px; height: 46px; border-radius: 8px;
  background: #f2f1ec; border: 1px solid #cfcec8; box-shadow: 0 3px 10px #000a;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 6px; gap: 2px;
  transition: transform .18s ease, left .18s ease, top .18s ease;
}
#die1 { left: 52px; top: 68px; }
#die2 { left: 104px; top: 88px; }
.die .pip { border-radius: 50%; background: #16171a; }
.die .pip.off { background: transparent; }
.die.hot { box-shadow: 0 0 0 2px var(--accent), 0 3px 10px #000a; }   /* doubles = hardway */
.dome.blowing .die { animation: tumble .62s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes tumble {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(16px,-34px) rotate(120deg); }
  50%  { transform: translate(-12px,18px) rotate(230deg); }
  75%  { transform: translate(22px,6px) rotate(330deg); }
  100% { transform: translate(0,0) rotate(360deg); }
}

/* ---------- the caller's side of the machine ---------- */
.callbox { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rolltotal {
  font-size: clamp(30px, 7vw, 52px); font-weight: 800; letter-spacing: 3px;
  line-height: 1; color: var(--text); text-transform: uppercase;
}
.rolltotal .small { font-size: 15px; color: var(--muted); letter-spacing: 2px; }
.callout {
  font-size: 14px; letter-spacing: 1px; color: var(--accent); min-height: 20px;
  text-transform: uppercase; font-weight: 700;
}
.stick {
  font-size: 13px; font-style: italic; color: var(--muted); min-height: 34px; line-height: 1.45;
}
.payline { font-size: 14px; font-weight: 800; letter-spacing: 1px; min-height: 20px; }
.payline.win  { color: var(--win); }
.payline.lose { color: var(--lose); }
.payline.push { color: var(--push); }

#rollBtn {
  cursor: pointer; border: 1px solid var(--accent); padding: 14px 34px;
  font-size: 16px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  font-family: var(--mono); color: var(--accent); background: transparent; width: 100%;
  transition: transform .06s ease, background .15s ease, color .15s ease;
}
#rollBtn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
#rollBtn:active:not(:disabled) { transform: translateY(2px); }
#rollBtn:disabled { opacity: .35; cursor: default; }

/* ============================ CHIP RAIL ============================ */
.rail {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--grid); padding: 14px; margin-bottom: 16px;
}
.chip {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; flex: none;
  border: 3px dashed rgba(255,255,255,.32); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  transition: transform .07s ease, box-shadow .12s ease;
}
.chip:hover { transform: translateY(-3px); }
.chip.sel { box-shadow: 0 0 0 3px var(--accent); transform: translateY(-3px); }
.chip[data-v="1"]   { background: #4a4f57; }
.chip[data-v="5"]   { background: #a83226; }
.chip[data-v="25"]  { background: #2a6b3c; }
.chip[data-v="100"] { background: #1b2a44; }
.chip[data-v="500"] { background: #4a1a6a; }
.chip.disabled { opacity: .3; pointer-events: none; }

.rail-btn {
  cursor: pointer; border: 1px solid var(--grid); padding: 10px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  font-family: var(--mono); color: var(--text); background: var(--panel-2);
  transition: color .12s, border-color .12s, background .12s;
}
.rail-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rail-btn:disabled { opacity: .3; cursor: default; }
.rail-btn.on { border-color: var(--lose); color: var(--lose); background: #1d1315; }
.rail-hint { font-size: 11px; color: var(--muted); flex-basis: 100%; text-align: center; letter-spacing: 1px; }

/* ============================ THE FELT ============================ */
.felt {
  background: var(--felt); border: 1px solid #1e3a35; padding: 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.felt-band { display: grid; gap: 8px; }
.band-numbers { grid-template-columns: repeat(6, 1fr); }
.band-come    { grid-template-columns: 1fr 1fr; }
.band-field   { grid-template-columns: 1fr; }
.band-line    { grid-template-columns: 1.4fr 1.4fr .8fr .8fr; }
.band-big     { grid-template-columns: 1fr 1fr; }
.band-hard    { grid-template-columns: repeat(4, 1fr); }
.band-prop    { grid-template-columns: repeat(4, 1fr); }

.band-title {
  grid-column: 1 / -1; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: #5d7a74; margin-top: 4px;
}

.numcol { display: flex; flex-direction: column; gap: 4px; }
.numhead {
  position: relative; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 2px;
  color: var(--text); background: var(--felt-2); border: 1px solid #1e3a35; padding: 6px 0;
}
.numcol.ispoint .numhead { border-color: var(--win); color: var(--win); }
.puck {
  position: absolute; top: -8px; right: -6px; font-size: 8px; font-weight: 800; letter-spacing: 1px;
  background: #eae7dd; color: #14150f; border-radius: 50%; width: 26px; height: 26px;
  display: none; align-items: center; justify-content: center; border: 2px solid #9a9a90;
}
.numcol.ispoint .puck { display: flex; background: var(--win); color: #08191d; border-color: #bfe8d3; }

/* ---------- a bet slot ---------- */
.slot {
  position: relative; cursor: pointer; background: var(--felt-2);
  border: 1px solid #1e3a35; padding: 7px 8px 6px; min-height: 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  transition: border-color .12s ease, background .12s ease;
}
.slot:hover { border-color: var(--accent); background: #16292a; }
.slot .name {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b9c8c4;
  line-height: 1.25;
}
.slot .pays { font-size: 9px; letter-spacing: .5px; color: #7f9c95; line-height: 1.2; }
.slot.closed { opacity: .3; cursor: not-allowed; }
.slot.closed:hover { border-color: #1e3a35; background: var(--felt-2); }
/* a slot you can't bet right now but that already holds money must stay legible —
 * travelled come bets live here and the player needs to see them */
.slot.has.closed { opacity: .92; cursor: default; }
.slot.has.closed:hover { border-color: var(--accent); }
.slot.has.closed.dont:hover { border-color: var(--lose); }
.slot.flash-bad { animation: badflash .4s ease; }
.slot.flash-win { animation: winflash .8s ease; }
.slot.flash-lose { animation: loseflash .8s ease; }
@keyframes badflash { 0%,100% { border-color:#1e3a35; } 40% { border-color: var(--lose); background:#241416; } }
@keyframes winflash { 0%,100% { border-color:#1e3a35; } 30% { border-color: var(--win); background:#14261e; box-shadow:0 0 16px rgba(109,191,149,.4); } }
@keyframes loseflash { 0%,100% { border-color:#1e3a35; } 30% { border-color: var(--lose); background:#241416; } }

.slot.wide { min-height: 54px; }
.slot.wide .name { font-size: 13px; letter-spacing: 2px; }
.slot.field .name { font-size: 14px; letter-spacing: 3px; }
.slot.field .nums { font-size: 11px; letter-spacing: 2px; color: #8fb0a8; }
.slot.dont { background: #1a1618; border-color: #3a2226; }
.slot.dont:hover { border-color: var(--lose); background: #221a1c; }
.slot.odds-slot { border-style: dashed; }

/* a chip resting on a slot */
.slot .stack {
  position: absolute; top: 4px; right: 4px; min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: 13px; display: none; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #08191d; background: var(--accent);
  box-shadow: 0 2px 5px #000a; border: 2px solid #0b0d0f;
}
.slot.has .stack { display: flex; }
.slot.has { border-color: var(--accent); }
.slot.has.dont { border-color: var(--lose); }
.slot.has.dont .stack { background: var(--lose); color: #fff; }

/* a tiny house-edge pill in the corner */
.slot .edge {
  position: absolute; bottom: 3px; right: 5px; font-size: 8px; font-weight: 700; letter-spacing: .5px;
  opacity: .75;
}
.edge[data-tier="free"]  { color: var(--t-free); }
.edge[data-tier="good"]  { color: var(--t-good); }
.edge[data-tier="ok"]    { color: var(--t-ok); }
.edge[data-tier="poor"]  { color: var(--t-poor); }
.edge[data-tier="awful"] { color: var(--t-awful); }
.felt.hide-edges .edge { display: none; }

/* ============================ COACH + LEDGER ============================ */
.coach {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 14px; margin-bottom: 16px;
  background: var(--panel); border: 1px dashed var(--gold);
}
.coach-tag {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--on-accent);
  background: var(--gold); padding: 3px 8px;
}
.coach-body { font-size: 13px; color: var(--text); line-height: 1.5; }
.coach-body b { color: var(--gold); }
.coach-body .free  { color: var(--t-free); }
.coach-body .good  { color: var(--t-good); }
.coach-body .ok    { color: var(--t-ok); }
.coach-body .poor  { color: var(--t-poor); }
.coach-body .awful { color: var(--t-awful); }

/* eight cells — lock to 4 or 2 columns so the last one never orphans on its own row */
.ledger {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--grid); border: 1px solid var(--grid); margin-bottom: 18px;
}
.ledger div { background: var(--panel); padding: 10px 12px; }
.ledger .k { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ledger .v { font-size: 19px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ledger .v.up   { color: var(--win); }
.ledger .v.down { color: var(--lose); }

.xeno-ai { max-width: 100%; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 780px) {
  .machine { grid-template-columns: 1fr; }
  .band-numbers { grid-template-columns: repeat(3, 1fr); }
  .band-line    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ledger { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .band-numbers { grid-template-columns: repeat(2, 1fr); }
  .band-hard, .band-prop { grid-template-columns: repeat(2, 1fr); }
  .dome { width: 168px; height: 168px; }
}