/* ==========================================================================
   The floor, the comp desk, and the screens either side of a run.

   Loaded only on the home page. theme.css carries the tokens; everything below
   is furniture that exists nowhere else on the site.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body.floor-body{
  min-height:100dvh;
  font-family:var(--sans);
  font-size:14px;line-height:1.55;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
body.floor-body::before{
  content:"";position:fixed;inset:-20% -10% auto -10%;height:90vh;pointer-events:none;z-index:0;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.15}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.booting,.noscript{display:grid;place-items:center;min-height:60vh;color:var(--mute);padding:24px;text-align:center}

.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:24px 18px 60px}
.wrap.narrow{max-width:720px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:12px;font-weight:650;font-size:14px;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  transition:.16s;white-space:nowrap;
}
.btn:hover:not(:disabled){background:#2a2745;border-color:rgba(255,255,255,.28)}
.btn:disabled{opacity:.38;cursor:not-allowed}
.btn-lg{padding:14px 28px;font-size:15px}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn-gold{background:linear-gradient(150deg,var(--gold),#e08c1a);border-color:transparent;color:#221602;box-shadow:var(--glow-gold)}
.btn-gold:hover:not(:disabled){background:linear-gradient(150deg,var(--gold-2),var(--gold))}
.btn-red{background:linear-gradient(150deg,var(--red),var(--red-2));border-color:transparent;color:#fff}
.linkish{color:var(--mute);font-size:12.5px}
.linkish:hover{color:var(--red)}

/* ------------------------------------------------------------ start screen */

.start{max-width:640px;text-align:center;padding-top:52px}
.start-mark{
  width:74px;height:74px;margin:0 auto 20px;border-radius:22px;
  display:grid;place-items:center;font-size:36px;color:#12091f;
  background:conic-gradient(from 210deg,var(--neon),var(--neon-2),var(--gold),var(--neon));
  box-shadow:var(--glow-neon);
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.start-title{font-size:clamp(38px,9vw,60px);letter-spacing:.02em;margin-bottom:14px}
.start-title b{
  background:linear-gradient(100deg,var(--gold),var(--gold-2) 50%,var(--neon-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.start-line{color:var(--dim);font-size:15.5px;max-width:480px;margin:0 auto 28px}

.start-facts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.fact{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);
  background:var(--panel-solid);border:1px solid var(--line);text-align:left;
}
.fact-i{font-size:20px}
.fact b{display:block;font-family:var(--mono);font-size:16px;color:var(--gold-2)}
.fact span{font-size:11px;color:var(--mute)}

.start-btn{width:min(300px,100%);padding:16px;font-size:16px}
.start-best{margin-top:14px;font-size:12.5px;color:var(--mute)}

.start-note{
  margin-top:38px;padding:22px;border-radius:var(--r-lg);text-align:left;
  background:var(--panel-solid);border:1px solid var(--line);
}
.start-note h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.start-note ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.start-note li{position:relative;padding-left:20px;color:var(--dim);font-size:13.5px}
.start-note li::before{content:"→";position:absolute;left:0;color:var(--neon)}
.start-note li b{color:var(--text)}
.start-fine{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}

/* -------------------------------------------------------------- floor head */

.floor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fh-kicker{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--neon-2);margin-bottom:3px}
.floor-head h1{font-size:clamp(24px,5vw,33px)}
.fh-vi{margin-top:2px;font-size:12.5px;color:var(--mute)}
.fh-right{display:flex;gap:8px}
.fh-chip{
  display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:13px;
  background:var(--panel-solid);border:1px solid var(--line);
}
.fh-chip b{font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums}
.fh-chip span{font-size:11px;color:var(--mute)}
.fh-chip.tok b{color:var(--neon-2)}
.fh-chip.big{padding:12px 20px}
.fh-chip.big b{font-size:22px}

/* -------------------------------------------------------------- goal meter */

.goalbar{
  padding:20px 22px;border-radius:var(--r-lg);margin-bottom:14px;
  background:linear-gradient(150deg,#181630,#111020);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.gb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.gb-label{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
.gb-bank{font-family:var(--mono);font-weight:800;font-size:clamp(28px,6vw,38px);color:var(--gold-2);line-height:1}
.gb-target{text-align:right}
.gb-goal{font-family:var(--mono);font-weight:800;font-size:20px;color:var(--dim)}
.gb-goal.done{color:var(--green)}
.gb-track{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;position:relative}
.gb-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--neon),var(--neon-2) 55%,var(--gold));
  box-shadow:0 0 18px rgba(255,192,67,.45);
  transition:width .5s cubic-bezier(.2,.9,.25,1);
}
.gb-fill.done{background:linear-gradient(90deg,var(--green),#a7f3d0);box-shadow:0 0 20px rgba(46,230,160,.55)}
.gb-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--dim)}
.gb-foot b{font-family:var(--mono);color:var(--text)}
.gb-ok{color:var(--green)}
.gb-limit{color:var(--mute)}

/* ---------------------------------------------------------------- mission */

.mission{
  display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r);margin-bottom:20px;
  background:rgba(168,85,247,.09);border:1px solid rgba(168,85,247,.26);
}
.mission.done{background:rgba(46,230,160,.08);border-color:rgba(46,230,160,.3)}
.mission-i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:rgba(168,85,247,.18);font-size:18px;
}
.mission.done .mission-i{background:rgba(46,230,160,.18);color:var(--green)}
.mission-body{flex:1;min-width:0}
.mission-name{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.mission-pay{font-size:11px;font-family:var(--mono);color:var(--neon-2);background:rgba(255,79,216,.13);padding:2px 7px;border-radius:999px}
.mission-text{font-size:13px;color:var(--dim)}
.mission-count{font-family:var(--mono);font-weight:800;font-size:16px;color:var(--neon-2);flex:0 0 auto}
.mission.done .mission-count{color:var(--green)}

.broke{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-radius:var(--r);margin-bottom:20px;font-size:13.5px;
  background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.34);color:#ffc2cd;
}

/* ------------------------------------------------------------------ tiles */

.tiles{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  aspect-ratio:1/.92;padding:20px 14px;border-radius:var(--r-lg);
  background:linear-gradient(165deg,#1a1830,#111020);
  border:1px solid var(--line);color:var(--text);
  transition:transform .18s cubic-bezier(.2,.9,.25,1),border-color .18s,box-shadow .18s;
}
.tile:hover,.tile:focus-visible{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 22px 46px -18px color-mix(in srgb,var(--accent) 70%,transparent);
  color:var(--text);
}
.tile-glow{
  position:absolute;inset:auto -30% -55% -30%;height:130%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 100%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%);
  opacity:.5;transition:opacity .25s;
}
.tile:hover .tile-glow{opacity:1}

.g-mark{
  position:relative;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--accent) 70%,#fff 12%),color-mix(in srgb,var(--accent) 40%,#07060d));
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 12px 28px -10px color-mix(in srgb,var(--accent) 80%,transparent);
}
.g-lg{width:82px;height:82px}
.g-md{width:44px;height:44px}
.g-ic{
  width:56%;height:56%;display:block;
  fill:none;stroke:#0b0912;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.g-ic .solid{fill:#0b0912;stroke:none}
.g-md .g-ic{stroke-width:3}

.tile-name{
  position:relative;font-size:14.5px;font-weight:700;letter-spacing:.01em;text-align:center;
}
/* Tên tiếng Việt của bàn. Nhỏ hơn, nhưng luôn có mặt. */
.tile-vi{
  position:relative;margin-top:-8px;
  font-size:11px;color:var(--mute);text-align:center;letter-spacing:.02em;
}
.tile:hover .tile-vi{color:var(--dim)}

/* ------------------------------------------------------------- floor foot */

.floor-foot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mute);
}
.floor-foot a{color:var(--dim)}
.floor-foot a:hover{color:var(--gold)}

/* --------------------------------------------------- review / over screens */

.review{
  padding:34px 30px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(165deg,#1b1930,#111020);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.review-mark{font-size:48px;line-height:1;margin-bottom:10px}
.review h1{font-size:30px;margin-bottom:8px}
.review h1.win{color:var(--green)}
.review h1.lose{color:var(--red)}
.review-sub{color:var(--dim);font-size:14px;margin-bottom:22px}

.review-rows{
  display:flex;flex-direction:column;gap:1px;text-align:left;margin-bottom:22px;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
}
.rrow{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;background:rgba(255,255,255,.03);font-size:13px}
.rrow span:first-child{color:var(--dim)}
.rrow span:last-child{font-family:var(--mono);font-weight:750}
.rrow .good{color:var(--green)}
.rrow .bad{color:var(--red)}

.review-next{font-size:13.5px;color:var(--dim);margin-bottom:22px}
.review-next b{color:var(--gold-2)}
.lesson{
  text-align:left;font-size:13px;color:var(--dim);line-height:1.7;
  padding:15px 17px;border-radius:var(--r);margin-bottom:22px;
  background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.22);
}

.timeline{display:flex;flex-direction:column;gap:5px;margin-bottom:22px;text-align:left}
.tl-row{
  display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:11px;font-size:12.5px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.tl-row.ok{border-color:rgba(46,230,160,.24)}
.tl-row.no{border-color:rgba(255,77,109,.28)}
.tl-day{font-weight:700;flex:0 0 46px}
.tl-name{flex:1;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-num{font-family:var(--mono);color:var(--dim)}
.tl-mark{flex:0 0 auto;font-weight:800}
.tl-row.ok .tl-mark{color:var(--green)}
.tl-row.no .tl-mark{color:var(--red)}

.curtain-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ----------------------------------------------------------- the comp desk */

.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.shop-head h1{font-size:clamp(24px,5vw,32px)}
.shop-intro{color:var(--dim);font-size:13.5px;margin-bottom:22px;max-width:620px}

.shop-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.shop-card{
  display:flex;flex-direction:column;gap:10px;padding:17px 18px;border-radius:var(--r);
  background:var(--panel-solid);border:1px solid var(--line);transition:border-color .18s;
}
.shop-card:not(.maxed):not(.poor):hover{border-color:rgba(255,192,67,.35)}
.shop-card.poor{opacity:.62}
.shop-card.maxed{border-color:rgba(46,230,160,.3)}

.sc-top{display:flex;align-items:center;gap:12px}
.sc-icon{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:0 0 auto;
  background:rgba(255,192,67,.12);font-size:19px;
}
.sc-name{flex:1;min-width:0}
.sc-name b{display:block;font-size:14.5px}
.sc-name span{font-size:12px;color:var(--mute)}
.sc-level{flex:0 0 auto}
.dots{display:flex;gap:4px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.dots i.on{background:var(--gold);box-shadow:0 0 7px rgba(255,192,67,.7)}

.sc-detail{font-size:12.5px;color:var(--dim);line-height:1.6}
.sc-owned{font-size:12px;color:var(--green);font-family:var(--mono)}
.sc-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.sc-next{font-size:12.5px;color:var(--gold-2);font-family:var(--mono)}
.sc-maxed{font-size:12.5px;color:var(--green)}

.shop-actions{display:flex;justify-content:center;margin-top:26px}

@media (max-width:520px){
  .wrap{padding:18px 13px 48px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:11px}
  .g-lg{width:64px;height:64px}
  .tile{gap:11px;padding:16px 10px}
  .tile-name{font-size:13px}
  .review{padding:26px 18px}
  .start{padding-top:32px}
}

/* ==========================================================================
   The two reading pages: what every bet costs, and how to check a result.

   Same shell as the floor, but laid out for prose and tables rather than for
   picking a game in one glance.
   ========================================================================== */

.page-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line);
}
.page-back{font-size:13px;color:var(--dim);font-weight:600}
.page-back:hover{color:var(--gold)}
.page-nav{display:flex;gap:16px;font-size:13px}
.page-nav a{color:var(--dim)}
.page-nav a:hover{color:var(--gold)}

.page-hero{max-width:640px;margin-bottom:34px}
.page-hero h1{font-size:clamp(28px,6vw,42px);margin:2px 0 12px}
.page-hero h1 span{
  background:linear-gradient(100deg,var(--gold),var(--gold-2) 55%,var(--neon-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero p{color:var(--dim);font-size:15px;line-height:1.65}
.page-hero b{color:var(--text)}

.notes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-bottom:38px}
.note{
  padding:20px;border-radius:var(--r-lg);
  background:var(--panel-solid);border:1px solid var(--line);
}
.note.warn{border-color:rgba(255,192,67,.35);background:rgba(255,192,67,.05)}
.note h3{font-size:15px;margin-bottom:11px}
.note p{color:var(--dim);font-size:13.5px;line-height:1.7;margin-bottom:11px}
.note p:last-child{margin-bottom:0}
.note b{color:var(--text)}
.note code{
  font-family:var(--mono);font-size:.88em;padding:1px 5px;border-radius:5px;
  background:rgba(255,255,255,.07);color:var(--gold-2);
}
.formula{
  display:block;margin:0 0 12px;padding:10px 13px;border-radius:10px;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--gold-2);
  background:rgba(0,0,0,.4);border:1px solid var(--line);
}

.section-title{margin-bottom:14px}
.section-title h2{font-size:20px;margin-bottom:4px}
.section-title p{color:var(--mute);font-size:13px}

.scroll-x{overflow-x:auto;margin-bottom:38px;border-radius:var(--r);border:1px solid var(--line)}
.odds-table{width:100%;border-collapse:collapse;font-size:13px;min-width:460px}
.odds-table th{
  text-align:left;padding:11px 15px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.odds-table td{padding:10px 15px;border-bottom:1px solid rgba(255,255,255,.04)}
.odds-table tr:last-child td{border-bottom:0}
.odds-table tbody tr:hover{background:rgba(255,255,255,.025)}
.odds-table td:not(:first-child){font-family:var(--mono);white-space:nowrap}

/* The three price bands, the same everywhere they appear. */
.num-cheap{color:var(--green)}
.num-mid{color:var(--gold-2)}
.num-dear{color:var(--red)}

.site-foot{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute);line-height:1.7;
}
.site-foot div:first-child{max-width:520px}
.site-foot a{color:var(--dim)}
.site-foot a:hover{color:var(--gold)}

/* ------------------------------------------------- tables behind the rope */

/* A locked table is drawn, not hidden. Knowing what is coming is most of the
   reason to survive another day. */
.tile.locked {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(255,255,255,.12);
}
.tile.locked .g-mark { filter: grayscale(1) brightness(.55); box-shadow: none; }
.tile.locked .tile-name { color: var(--mute); }
.tile.locked:hover { transform: none; box-shadow: none; border-color: rgba(255,255,255,.18); }

.tile-lock {
  position: relative;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--dim);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 2px 9px;
}

.unlock-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--mute);
}

/* The reward moment on the day-review screen. */
.unlocked {
  margin: 0 0 22px;
  padding: 15px 17px;
  border-radius: var(--r);
  background: rgba(46,230,160,.07);
  border: 1px solid rgba(46,230,160,.28);
}
.unlocked-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 11px;
}
.unlocked-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.unlocked-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  font-size: 13px; font-weight: 650;
}