/* ==========================================================================
   The house style.

   This file loads after each table's own stylesheet and redefines the tokens
   they were all written against, so one palette change re-skins every game on
   the site. Below the tokens are the pieces that only exist here: the run HUD
   that sits on top of every table, and the overrides that bring the older
   panels up to the same finish.

   The six tables share an identical `:root` block -- that is what makes this
   possible, and it is worth keeping true.
   ========================================================================== */

:root{
  /* surfaces -- cool near-black, so the neon has something to sit on */
  --bg:#08070f;
  --bg-2:#0d0c18;
  --panel:#15142230;
  --panel-solid:#151422;
  --panel-2:#1e1c30;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.16);

  /* felt -- still green, because a casino table is green, but lit differently */
  --felt:#0e4433;
  --felt-2:#072a20;
  --felt-line:rgba(255,192,67,.24);

  /* ink */
  --text:#f4f2ff;
  --dim:#a29ec0;
  --mute:#6f6b8c;

  /* accents */
  --gold:#ffc043;
  --gold-2:#ffe6a8;
  --gold-3:#b87d14;
  --neon:#a855f7;
  --neon-2:#ff4fd8;
  --red:#ff4d6d;
  --red-2:#a3123a;
  --green:#2ee6a0;
  --green-2:#0f8f60;
  --blue:#4dd2ff;

  /* type */
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Consolas,monospace;
  --display:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --gap:14px;
  --shadow:0 24px 60px -18px rgba(0,0,0,.9);
  --glow-gold:0 0 0 1px rgba(255,192,67,.28), 0 12px 40px -10px rgba(255,192,67,.4);
  --glow-neon:0 0 0 1px rgba(168,85,247,.3), 0 14px 44px -12px rgba(168,85,247,.5);

  /* the HUD's height, so tables can leave room for it */
  --hud-h:52px;
}

/* The ambient light every page sits in. */
body::before{
  background:
    radial-gradient(50% 60% at 50% -6%,rgba(168,85,247,.16),transparent 70%),
    radial-gradient(42% 55% at 8% 4%,rgba(255,79,216,.10),transparent 70%),
    radial-gradient(46% 60% at 92% 2%,rgba(255,192,67,.10),transparent 70%) !important;
}

/* ==========================================================================
   Shared primitives.
   ========================================================================== */

.t-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);
}
.t-pill.gold{color:var(--gold-2);border-color:rgba(255,192,67,.32);background:rgba(255,192,67,.09)}
.t-pill.neon{color:#e9d5ff;border-color:rgba(168,85,247,.36);background:rgba(168,85,247,.12)}
.t-pill.green{color:var(--green);border-color:rgba(46,230,160,.3);background:rgba(46,230,160,.09)}
.t-pill.red{color:var(--red);border-color:rgba(255,77,109,.32);background:rgba(255,77,109,.1)}

.t-num{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums}

/* ==========================================================================
   The run HUD.

   One strip, pinned above every table, carrying the only four numbers that
   matter while you are playing: which day it is, how long is left, what you
   are holding, and what you have to reach. Everything else is one tap away.
   ========================================================================== */

.hud{
  position:sticky;top:0;z-index:35;flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  height:var(--hud-h);padding:0 14px;
  background:linear-gradient(180deg,rgba(13,12,24,.97),rgba(13,12,24,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(150%);
}
.hud-back{
  display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim);
  font-size:17px;line-height:1;transition:.16s;
}
.hud-back:hover{color:var(--gold);border-color:rgba(255,192,67,.4);transform:translateX(-2px)}

.hud-day{
  display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;line-height:1.15;
}
.hud-day b{font-size:13px;font-weight:800;letter-spacing:.04em}
.hud-day span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* The clock. It goes amber under a minute and red under fifteen seconds, and
   the pulse is the only thing on the page that moves for its own sake. */
.hud-clock{
  display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:12px;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;
}
.hud-clock.warn{color:var(--gold);border-color:rgba(255,192,67,.45);background:rgba(255,192,67,.1)}
.hud-clock.danger{
  color:var(--red);border-color:rgba(255,77,109,.5);background:rgba(255,77,109,.12);
  animation:hudpulse 1s ease-in-out infinite;
}
.hud-clock.paused{color:var(--mute)}
@keyframes hudpulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Bankroll against target, as a bar you can read without reading. */
.hud-bar{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.hud-bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px}
.hud-bank{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--gold-2)}
.hud-bank.up{animation:bankup .5s ease}
.hud-bank.down{animation:bankdown .5s ease}
@keyframes bankup{0%{color:var(--green);transform:scale(1.1)}100%{color:var(--gold-2);transform:none}}
@keyframes bankdown{0%{color:var(--red)}100%{color:var(--gold-2)}}
.hud-goal{color:var(--mute);white-space:nowrap}
.hud-goal b{color:var(--dim);font-family:var(--mono)}
.hud-track{
  position:relative;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);
}
.hud-fill{
  position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:linear-gradient(90deg,var(--neon),var(--gold));
  box-shadow:0 0 14px rgba(255,192,67,.5);
  transition:width .45s cubic-bezier(.2,.9,.25,1);
}
.hud-fill.done{background:linear-gradient(90deg,var(--green),#a7f3d0);box-shadow:0 0 16px rgba(46,230,160,.6)}

.hud-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.hud-chip{
  display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);
  font-family:var(--mono);font-weight:700;font-size:13px;white-space:nowrap;
}
.hud-chip.tokens{color:var(--neon-2);border-color:rgba(255,79,216,.3)}

/* Owned comps, shown as a row of small badges that light up when they fire. */
.hud-items{display:flex;align-items:center;gap:5px}
.hud-item{
  position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);font-size:14px;line-height:1;
}
.hud-item i{
  position:absolute;right:-3px;bottom:-3px;
  min-width:14px;height:14px;padding:0 3px;border-radius:999px;
  display:grid;place-items:center;font:800 9px/1 var(--mono);font-style:normal;
  background:var(--gold);color:#231701;
}
.hud-item.fired{animation:itemfire .7s ease}
@keyframes itemfire{
  0%{transform:scale(1);box-shadow:none}
  30%{transform:scale(1.25);box-shadow:0 0 0 3px rgba(255,192,67,.5),0 0 20px rgba(255,192,67,.7)}
  100%{transform:scale(1);box-shadow:none}
}

/* The mission, folded down to a single line while you play. */
.hud-mission{
  display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:11px;flex:0 0 auto;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.28);
  font-size:12px;max-width:270px;
}
.hud-mission .mi{font-size:13px}
.hud-mission .mt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e9d5ff}
.hud-mission .mp{font-family:var(--mono);font-weight:800;color:var(--neon-2);white-space:nowrap}
.hud-mission.done{background:rgba(46,230,160,.1);border-color:rgba(46,230,160,.34)}
.hud-mission.done .mt,.hud-mission.done .mp{color:var(--green)}

/* A comp firing, or a mission clearing: says what happened and gets out. */
#hud-flash{
  position:fixed;top:calc(var(--hud-h) + 10px);left:50%;transform:translateX(-50%);
  z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;
}
.hud-flash{
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  font-size:13px;font-weight:700;
  background:rgba(21,20,34,.96);border:1px solid var(--line-2);box-shadow:var(--shadow);
  animation:flashin .22s cubic-bezier(.2,.9,.25,1);
}
.hud-flash.good{border-color:rgba(46,230,160,.5);color:var(--green)}
.hud-flash.token{border-color:rgba(255,79,216,.5);color:var(--neon-2)}
.hud-flash.out{opacity:0;transform:translateY(-8px);transition:.35s}
@keyframes flashin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ==========================================================================
   The day-over curtain.

   Drawn over whatever table you were sitting at when the clock ran out, so the
   run always ends where you were playing rather than somewhere else.
   ========================================================================== */

.curtain{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(4,3,10,.86);backdrop-filter:blur(10px);animation:fade .25s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.curtain-card{
  width:min(460px,100%);padding:30px 28px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(165deg,#1b1930,#111020);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  animation:cardin .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes cardin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.curtain-mark{font-size:44px;line-height:1;margin-bottom:10px}
.curtain-card h2{font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
.curtain-card h2.win{color:var(--green)}
.curtain-card h2.lose{color:var(--red)}
.curtain-sub{color:var(--dim);font-size:13.5px;line-height:1.6;margin-bottom:18px}
.curtain-rows{
  display:flex;flex-direction:column;gap:1px;margin-bottom:20px;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
}
.curtain-row{
  display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  background:rgba(255,255,255,.03);font-size:13px;
}
.curtain-row span:first-child{color:var(--dim)}
.curtain-row span:last-child{font-family:var(--mono);font-weight:750}
.curtain-row .good{color:var(--green)}
.curtain-row .bad{color:var(--red)}
.curtain-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Bringing the tables up to the same finish.

   Structure is untouched -- these are the six pages' own elements, restyled.
   ========================================================================== */

.topbar{
  background:linear-gradient(180deg,rgba(13,12,24,.96),rgba(13,12,24,.7)) !important;
}
.brand-mark{
  background:conic-gradient(from 210deg,var(--neon),var(--neon-2),var(--gold),var(--neon)) !important;
  color:#12091f !important;box-shadow:var(--glow-neon) !important;
}
/* The `!important` background shorthand also forces background-clip, so the
   clip has to be important too or the text is painted over by its own fill. */
.brand-text b{
  background:linear-gradient(100deg,var(--gold),var(--gold-2)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}

.chip,.iconbtn,.stakebox,.card-box,.feed-row{background:var(--panel-2) !important}
.iconbtn:hover{background:#272441 !important}
.iconbtn.on{color:var(--gold);border-color:rgba(255,192,67,.4)}

.felt{
  background:
    radial-gradient(120% 90% at 50% -12%,rgba(168,85,247,.16),transparent 58%),
    radial-gradient(95% 75% at 50% 42%,var(--felt),var(--felt-2) 72%,#04150f 100%) !important;
}
.betbar{background:linear-gradient(0deg,rgba(13,12,24,.99),rgba(13,12,24,.9)) !important}

.btn{background:var(--panel-2);border-color:var(--line-2)}
.btn:hover:not(:disabled){background:#2a2745 !important;border-color:rgba(255,255,255,.28)}
.btn-gold{
  background:linear-gradient(150deg,var(--gold),#e08c1a) !important;
  color:#221602 !important;box-shadow:var(--glow-gold) !important;
}
.btn-gold:hover:not(:disabled){background:linear-gradient(150deg,var(--gold-2),var(--gold)) !important}
.btn-green{background:linear-gradient(150deg,var(--green),var(--green-2)) !important;color:#03150d !important}
.btn-red{background:linear-gradient(150deg,var(--red),var(--red-2)) !important;color:#fff !important}

.token.t1{background:radial-gradient(circle at 35% 30%,#8b88b0,#4a4763)}
.token.t5{background:radial-gradient(circle at 35% 30%,#ff6b8a,#a3123a)}
.token.t25{background:radial-gradient(circle at 35% 30%,#3ff0ae,#0f8f60)}
.token.t100{background:radial-gradient(circle at 35% 30%,#c07bff,#5b1f96)}
.token.t500{background:radial-gradient(circle at 35% 30%,#ffd166,#b87d14)}
.token.on{outline-color:var(--gold)}

.verdict.win{color:var(--green);border-color:rgba(46,230,160,.5);box-shadow:0 0 34px -8px rgba(46,230,160,.65)}
.verdict.lose{color:var(--red);border-color:rgba(255,77,109,.5)}

.drawer{background:var(--bg-2)}
.toast{background:#1b1930;border-color:var(--line-2)}
.toast-win{border-color:rgba(46,230,160,.6);color:#8ff5cd}
.toast-lose,.toast-error{border-color:rgba(255,77,109,.55);color:#ffb0c0}

/* The play-money strip the build injects under the header of every table. */
.playmoney-strip{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:6px 14px;font-size:11.5px;color:var(--mute);
  background:rgba(168,85,247,.07);border-bottom:1px solid var(--line);
}
.playmoney-strip .pm-dot{
  width:6px;height:6px;border-radius:50%;background:var(--neon-2);
  box-shadow:0 0 8px var(--neon-2);flex:0 0 auto;
}
.playmoney-strip a{color:var(--gold)}

@media (max-width:900px){
  .hud{gap:9px;padding:0 9px}
  .hud-mission{display:none}
  .hud-day span{display:none}
}
@media (max-width:620px){
  .hud-items,.hud-day{display:none}
  .hud-goal{display:none}
}

/* ==========================================================================
   While a run is on.

   The HUD already carries the wallet and the day, so the table's own header
   stops repeating them -- three stacked bars above the felt is two too many.
   ========================================================================== */

.run-active .chip-wallet,
.run-active .chip-name,
.run-active .btn-reset,
.run-active #btnReset{display:none}

/* Rocket Cash Out puts the house bankroll and the player name in its header
   too. Neither is a number you are playing against during a run, and both cost
   room the clock and the target need more. */
.run-active .chip-house,
.run-active .chip-player{display:none}

.run-active .topbar{padding-top:7px;padding-bottom:7px}
.run-active .playmoney-strip{padding:4px 14px;font-size:10.5px}