/* SweatBook. Charcoal and hi-vis: a sportsbook's dark board, lit like a job site. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(../fonts/barlow-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); }

:root {
  --bg: #0D1015; --bg2: #11151C; --card: #171C25; --card2: #1E2531; --line: #2A3241; --line2: #364054;
  --text: #EEF1F5; --muted: #929CAD; --dim: #5F6A7C;
  --hv: #FFD60A; --hv2: #FFE45C; --hv-ink: #1C1700;
  --green: #2BD17E; --red: #FF5C5C; --blue: #4AA8FF; --orange: #FF8A1F; --silver: #C9CED8;
  --r: 14px; --r-sm: 10px;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tabs: 66px; --top: 58px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.4; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--hv); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: .01em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

#app { height: 100%; display: flex; flex-direction: column; }
.top { height: var(--top); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.logo { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .02em; transform: skewX(-8deg); }
.logo b { color: var(--hv); font-weight: 800; }
.logo svg { width: 20px; height: 24px; transform: skewX(8deg); }
.top .grow { flex: 1; }
.wallet { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.wallet small { font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.wallet span { font-family: var(--display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--card2); border: 2px solid var(--line2); flex: none; }
.avatar img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 12%; }

.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 24px; }
.tabs { height: var(--tabs); flex: none; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg2); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tab svg { width: 24px; height: 24px; }
.tab[aria-selected="true"] { color: var(--hv); }

.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 10px; }
.section-h:first-child { margin-top: 4px; }
.section-h h2 { font-size: 22px; text-transform: uppercase; }
.section-h small { color: var(--muted); font-size: 12px; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pos { color: var(--green); } .neg { color: var(--red); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 12px; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; background: var(--hv); color: var(--hv-ink); box-shadow: 0 4px 0 #9d8400; transition: transform .06s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #9d8400; }
.btn[disabled] { background: var(--card2); color: var(--dim); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line2); box-shadow: none; }
.btn.dark { background: var(--card2); color: var(--text); box-shadow: 0 4px 0 #0a0d12; }
.btn.small { min-height: 40px; font-size: 16px; padding: 0 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; }
.iconbtn svg { width: 24px; height: 24px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; background: var(--card2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.pill.hv { background: rgba(255, 214, 10, .12); color: var(--hv); border-color: rgba(255, 214, 10, .35); }
.pill.red { background: rgba(255, 92, 92, .12); color: var(--red); border-color: rgba(255, 92, 92, .35); }
.pill.green { background: rgba(43, 209, 126, .12); color: var(--green); border-color: rgba(43, 209, 126, .35); }
.edge { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 92, 92, .08); border: 1px solid rgba(255, 92, 92, .28); font-size: 13px; color: #ffc9c9; }
.edge b { color: var(--red); font-weight: 700; }
.edge svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--red); }

/* the hazard stripe used on locked things and warnings */
.hazard { background: repeating-linear-gradient(-45deg, var(--hv) 0 12px, #1a1a1a 12px 24px); }

/* ---- welcome / picker */
.hero-work { padding: 18px 16px; display: grid; gap: 6px; background: linear-gradient(160deg, #1b2230, #141922); }
.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pick { position: relative; aspect-ratio: 34 / 40; border-radius: var(--r); overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #273043, #151a23 70%); border: 1.5px solid var(--line); text-align: left; }
.pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(8, 10, 14, .92)); font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; }
.pick .nm small { display: block; font-family: var(--body); font-weight: 500; text-transform: none; font-size: 12px; color: var(--muted); margin-top: 3px; }
.pick[aria-pressed="true"] { border-color: var(--hv); box-shadow: 0 0 0 2px var(--hv) inset; }

/* ---- work */
.worker { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 14px; align-items: center; overflow: hidden; position: relative; }
.worker img { width: 104px; height: 217px; object-fit: contain; margin: -12px 0 -18px; }
.clockbar { height: 10px; border-radius: 6px; background: var(--card2); overflow: hidden; display: flex; }
.clockbar i { display: block; height: 100%; background: var(--hv); }
.clockbar i.tired { background: var(--orange); }
.stat { display: grid; gap: 1px; }
.stat b { font-family: var(--display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.job { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; text-align: left; width: 100%; }
.job .ic { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: var(--card2); }
.job .ic svg { width: 32px; height: 32px; }
.job h3 { font-size: 21px; text-transform: uppercase; }
.job .rate { font-family: var(--display); font-weight: 700; font-size: 22px; text-align: right; line-height: 1; font-variant-numeric: tabular-nums; }
.job .rate small { display: block; font-family: var(--body); font-size: 11px; color: var(--muted); font-weight: 600; }
.job.locked { opacity: .55; }
.job.locked .ic { background: repeating-linear-gradient(-45deg, #2a2f38 0 6px, #20242c 6px 12px); }

/* ---- casino lobby */
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.game { position: relative; min-height: 158px; padding: 14px; border-radius: var(--r); overflow: hidden; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; border: 1px solid var(--line); }
.game h3 { font-size: 26px; text-transform: uppercase; position: relative; text-shadow: 0 2px 8px #000c; }
.game .ed { position: relative; font-size: 12px; font-weight: 700; color: #ffd0d0; }
.game .art { position: absolute; inset: 0; }
.game.soon { opacity: .5; }
.game.soon::after { content: 'SOON'; position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 3px 8px; border-radius: 6px; background: var(--card2); color: var(--muted); }

/* ---- full-screen game pages */
.page { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; }
.page-top { height: var(--top); display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; border-bottom: 1px solid var(--line); flex: none; }
.page-top h1 { font-size: 24px; text-transform: uppercase; flex: 1; }
.page-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* bet slip / wager bar, shared by the table games */
.betbar { padding: 12px 14px 14px; background: var(--bg2); border-top: 1px solid var(--line); display: grid; gap: 10px; flex: none; }
.chips { display: flex; gap: 8px; justify-content: space-between; }
.chip { flex: 1; height: 46px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 18px; background: var(--card2); border: 2px dashed var(--line2); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--hv); color: var(--hv-ink); border: 2px solid var(--hv); }
.cost { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.cost b { color: var(--text); font-weight: 600; }

/* ---- slots */
.slot-wrap { padding: 16px 14px 8px; display: grid; gap: 12px; }
.machine { border-radius: 18px; padding: 14px; background: linear-gradient(180deg, #2b3242, #1a1f29); border: 1px solid var(--line2); box-shadow: 0 10px 30px #0008; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.reel { height: 246px; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #cfd4dc, #fff 30%, #fff 70%, #cfd4dc); position: relative; }
.reel .strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.reel .sym { height: 82px; display: grid; place-items: center; }
.reel .sym svg { width: 62px; height: 62px; }
.payline { position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--red); box-shadow: 0 0 10px var(--red); border-radius: 2px; pointer-events: none; }
.win-line { min-height: 56px; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; }
.win-line small { display: block; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--muted); text-transform: none; }
.paytable { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 10px; align-items: center; font-size: 15px; }
.paytable .syms { display: flex; gap: 2px; }
.paytable .syms svg { width: 26px; height: 26px; }
.paytable b { font-family: var(--display); font-size: 18px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- blackjack */
.felt { flex: 1; min-height: 430px; background: radial-gradient(120% 80% at 50% 0%, #17583c, #0c3323 70%); display: grid; grid-template-rows: auto auto 1fr; align-items: start; padding: 14px 10px; gap: 10px; position: relative; }
.felt .rules { text-align: center; font-family: var(--display); font-weight: 700; letter-spacing: .08em; color: #a8e7c5; opacity: .75; font-size: 14px; text-transform: uppercase; }
.hand-area { display: grid; justify-items: center; align-content: start; gap: 6px; }
.hand-area .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #bfeed4; font-weight: 700; }
.cards { display: flex; justify-content: center; min-height: 104px; }
.cardv { width: 70px; height: 100px; border-radius: 8px; background: #fbfbf7; color: #111; margin-left: -34px; box-shadow: -2px 3px 8px #0006; position: relative; font-family: var(--display); font-weight: 700; animation: deal .22s ease-out both; }
.cardv:first-child { margin-left: 0; }
.cardv .c1 { position: absolute; top: 5px; left: 7px; font-size: 22px; line-height: .9; text-align: center; }
.cardv .c1 i { display: block; font-style: normal; font-size: 18px; }
.cardv .pip { position: absolute; right: 7px; bottom: 5px; font-size: 34px; line-height: 1; }
.cardv.red { color: #c8102e; }
.cardv.back { background: repeating-linear-gradient(45deg, var(--hv) 0 6px, #1b1b1b 6px 12px); border: 3px solid #fbfbf7; }
@keyframes deal { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } }
.hands { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.phand { display: grid; justify-items: center; gap: 4px; padding: 6px; border-radius: 12px; }
.phand.active { background: rgba(255, 214, 10, .12); box-shadow: 0 0 0 2px var(--hv) inset; }
.tot { font-family: var(--display); font-weight: 800; font-size: 20px; min-width: 44px; text-align: center; padding: 0 8px; border-radius: 8px; background: #0008; }
.res { font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.actions .btn { min-height: 50px; font-size: 18px; padding: 0 6px; }
.hint { font-size: 13px; text-align: center; color: #d6f5e4; min-height: 18px; }

/* ---- shifts (the job mini-games) */
.shift { position: fixed; inset: 0; z-index: 20; background: #0B0E13; display: flex; flex-direction: column; }
.shift-hud { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
.shift-hud .clock { font-family: var(--display); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; }
.shift-hud .meter { flex: 1; height: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.shift-hud .meter i { display: block; height: 100%; background: var(--hv); transition: width .2s; }
.shift-card { margin: auto 16px; padding: 20px; display: grid; gap: 12px; }
.shift-card h2 { font-size: 34px; text-transform: uppercase; }
.shift-card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #cdd3dd; }
.report-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.report-row:last-child { border: 0; }
.report-row b { font-variant-numeric: tabular-nums; }
.tired-flag { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 138, 31, .12); border: 1px solid rgba(255, 138, 31, .4); color: #ffd1a6; font-size: 13px; }

/* fast food */
.ff { flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.tickets { display: flex; gap: 8px; padding: 10px; overflow-x: auto; flex: none; min-height: 142px; background: #10141a; border-bottom: 1px solid var(--line); }
.ticket { flex: none; width: 118px; padding: 8px 9px 10px; border-radius: 4px 4px 10px 10px; background: #fffdf3; color: #1a1a1a; font-size: 13px; line-height: 1.25; position: relative; text-align: left; box-shadow: 0 3px 0 #0005; border-top: 5px solid #e53935; }
.ticket b { font-family: var(--display); font-size: 17px; display: block; }
.ticket .late { position: absolute; left: 0; bottom: 0; height: 4px; background: #e53935; border-radius: 0 0 0 10px; }
.ticket[aria-pressed="true"] { outline: 3px solid var(--hv); outline-offset: 2px; }
.ticket ul { margin: 3px 0 0; padding: 0; list-style: none; }
.ticket li::before { content: '▸ '; color: #999; }
.tray { display: grid; place-items: end center; padding: 10px; position: relative; min-height: 0; background: radial-gradient(80% 60% at 50% 100%, #2a2f3a, #10141a 70%); }
.stackv { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; margin-bottom: 12px; }
.layer { border-radius: 8px; margin-top: -4px; animation: drop .16s ease-out; }
@keyframes drop { from { transform: translateY(-36px); opacity: 0; } }
.sides { position: absolute; right: 14px; bottom: 16px; display: flex; gap: 8px; }
.side { width: 44px; height: 58px; border-radius: 6px 6px 10px 10px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.ingredients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 10px; background: #10141a; border-top: 1px solid var(--line); }
.ing { height: 58px; border-radius: 10px; background: var(--card2); display: grid; place-items: center; font-size: 12px; font-weight: 700; gap: 2px; padding-top: 4px; }
.ing i { display: block; width: 36px; height: 12px; border-radius: 6px; }
.ing.act { background: var(--hv); color: var(--hv-ink); font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.ing.trash { background: #3a2226; color: #ffb4b4; }
/* demolition */
.demo-wrap { flex: 1; position: relative; min-height: 0; }
.demo-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.demo-legend { display: flex; gap: 8px; padding: 8px 10px; flex-wrap: wrap; border-top: 1px solid var(--line); flex: none; font-size: 12px; color: var(--muted); }

/* ---- ledger */
.big-num { font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger-top { padding: 16px; display: grid; gap: 10px; }
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ledger-grid > div { background: var(--card); padding: 12px 14px; display: grid; gap: 2px; }
.ledger-grid b { font-family: var(--display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-grid span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.log { display: grid; }
.log-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-row:last-child { border: 0; }
.log-row small { color: var(--muted); font-size: 12px; }
.log-row b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.help { padding: 14px; display: grid; gap: 8px; background: linear-gradient(135deg, #16202e, #121821); border-color: #2c3e57; }
.help a, .help button.link { color: var(--blue); font-weight: 700; text-decoration: none; text-align: left; }

/* ---- sheets and modals */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4, 6, 9, .72); display: flex; align-items: flex-end; animation: fade .15s; }
.scrim.center { align-items: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-height: 90%; overflow-y: auto; background: var(--bg2); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line2); padding: 8px 16px 20px; display: grid; gap: 14px; animation: up .2s ease-out; }
.scrim.center .sheet { border-radius: 18px; border: 1px solid var(--line2); max-width: 420px; margin: 0 auto; }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: 4px auto 0; }
.opt { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); gap: 12px; text-align: left; width: 100%; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--card2); position: relative; flex: none; border: 1px solid var(--line2); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--hv); border-color: var(--hv); }
.switch[aria-checked="true"]::after { left: 23px; background: var(--hv-ink); }
#toast { position: fixed; left: 50%; top: calc(var(--top) + 10px); transform: translate(-50%, -16px); opacity: 0; z-index: 60; background: #262e3b; color: var(--text); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; pointer-events: none; transition: .2s; max-width: 90%; text-align: center; box-shadow: 0 6px 20px #0008; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.lockbox { padding: 22px 18px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.lockbox .stripe { height: 12px; width: 100%; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===================== v2 polish ===================== */
.top { background: linear-gradient(180deg, #121720, var(--bg)); }
.tabs { position: relative; }
.tab { position: relative; transition: color .15s; }
.tab[aria-selected="true"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--hv); }
.card { box-shadow: 0 1px 0 #ffffff08 inset, 0 6px 18px #0004; }
button.card:active, .game:active, .odd:active { transform: scale(.985); }
.page, .shift { animation: pagein .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pagein { from { transform: translateX(22px); opacity: 0; } }
.grow { flex: 1; }

/* shift HUD meter with the 70% line */
.meter-wrap { flex: 1; display: grid; gap: 4px; }
.meter { position: relative; height: 10px; }
.meter i { transition: width .25s, background .25s; }
.meter i.ok { background: var(--green); } .meter i.warn { background: var(--hv); } .meter i.bad { background: var(--red); }
.meter .bar70 { position: absolute; left: 70%; top: -3px; bottom: -3px; width: 2px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 2px #0B0E13; }
.meter-lbl { font-size: 11px; color: var(--muted); line-height: 1.2; }

/* fast food, v2 */
.rail-wrap { position: relative; background: linear-gradient(180deg, #151a22, #10141a); border-bottom: 1px solid var(--line); }
.tickets { background: none; border: 0; min-height: 150px; }
.waiting { position: absolute; right: 10px; bottom: 8px; background: var(--red); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 10px #0008; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.ticket { width: 124px; border-top: 0; padding: 0 0 12px; overflow: hidden; background: #FFFEF6; box-shadow: 0 4px 12px #0007; }
.ticket .tk-top { display: flex; justify-content: space-between; align-items: baseline; background: #1d2330; color: #fff; padding: 6px 9px; }
.ticket .tk-top b { font-family: var(--display); font-size: 18px; display: inline; }
.ticket .tk-top span { font-size: 12px; opacity: .8; }
.ticket ul { padding: 6px 9px 0; }
.ticket li { font-size: 13px; font-weight: 600; }
.ticket li.sd { color: #b3261e; }
.ticket .late { height: 5px; background: var(--green); transition: width .25s linear; }
.ticket .late.over { background: #d32f2f; }
.tray { background: radial-gradient(90% 70% at 50% 100%, #3a4250, #1a1f28 60%, #10141a); }
.tray::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 14px; height: 20px; border-radius: 50%; background: #0007; filter: blur(6px); }
.wrap-paper { position: absolute; left: 50%; bottom: 10px; width: 210px; height: 26px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, #f3e9d2 0 14px, #e8dcc0 14px 28px); border-radius: 4px; box-shadow: 0 2px 0 #0004; }
.tray-hint { position: absolute; left: 0; right: 0; bottom: 56px; text-align: center; color: #ffffff30; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; display: none; }
.tray.empty .tray-hint { display: block; }
.stackv { position: relative; z-index: 1; margin-bottom: 26px; }
.layer { margin-top: -6px; filter: drop-shadow(0 2px 1px #0005); }
.side { width: 52px; height: 56px; background: none; }
.ingredients { gap: 6px; padding: 8px; background: #0e1217; }
.ing { height: 62px; border-radius: 12px; background: linear-gradient(180deg, #232a36, #1b212b); border: 1px solid #2d3644; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 6px 2px 5px; font-size: 12px; font-weight: 700; color: #d9dee6; }
.ing:active { background: #2e3746; transform: translateY(1px); }
.ing .ing-ic { display: grid; place-items: center; min-height: 26px; }
.ing.act { background: var(--hv); color: var(--hv-ink); border-color: var(--hv); font-family: var(--display); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; grid-template-rows: 1fr; }
.ing.trash { background: #2c1d21; border-color: #4a2a30; color: #ffb4b4; grid-template-rows: 1fr; }

/* sportsbook */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { height: 38px; border-radius: 9px; font-weight: 700; color: var(--muted); font-size: 14px; }
.seg button[aria-selected="true"] { background: var(--card2); color: var(--text); box-shadow: 0 1px 0 #ffffff10 inset, 0 2px 6px #0006; }
.seg button[disabled] { opacity: .4; }
.gcard { padding: 10px 10px 8px; display: grid; gap: 6px; }
.ghead, .grow2 { display: grid; grid-template-columns: 1fr 64px 70px 62px; gap: 6px; align-items: center; }
.ghead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ghead span:first-child { grid-column: 2; } 
.ghead span { text-align: center; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tbadge { flex: none; display: grid; place-items: center; border-radius: 9px; font-family: var(--display); font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 -3px 0 #0003; }
.tn { display: grid; min-width: 0; line-height: 1.15; }
.tn b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odd { height: 50px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line2); display: grid; place-content: center; text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums; transition: background .12s; }
.odd b { font-family: var(--display); font-size: 17px; font-weight: 700; }
.odd small { font-size: 11px; color: var(--muted); }
.odd.on { background: var(--hv); border-color: var(--hv); color: var(--hv-ink); }
.odd.on small { color: #5c4d00; }
.gfoot { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); padding: 0 2px; }
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lcard { padding: 10px; display: grid; gap: 6px; text-align: left; }
.lrow { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; }
.lrow .ln { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .ls { font-family: var(--display); font-size: 22px; color: var(--muted); }
.lrow .ls.win { color: var(--text); }
.lfoot { display: flex; align-items: center; gap: 6px; }
.lfoot .watch { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--hv); }
.pill.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.slipbar { position: relative; z-index: 4; margin: 0 10px 8px; height: 54px; border-radius: 14px; background: var(--hv); color: var(--hv-ink); display: flex; align-items: center; gap: 10px; padding: 0 16px; font-family: var(--display); font-size: 20px; font-weight: 800; text-transform: uppercase; box-shadow: 0 8px 24px #000a; animation: up .2s; flex: none; }
.slipbar .cnt { width: 28px; height: 28px; border-radius: 50%; background: var(--hv-ink); color: var(--hv); display: grid; place-items: center; font-size: 16px; }
.leg { display: grid; grid-template-columns: 1fr auto 40px; gap: 8px; align-items: center; padding: 10px 6px 10px 14px; border-bottom: 1px solid var(--line); }
.leg:last-child { border: 0; }
.sumbox { padding: 4px 14px; }
.betrow { padding: 12px 14px; display: grid; gap: 4px; border-bottom: 1px solid var(--line); }
.betrow:last-child { border: 0; }
.link { color: var(--blue); font-weight: 700; }
.strow { display: grid; grid-template-columns: 22px 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 14px; font-size: 14px; }

/* watch page */
.scoreboard { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 10px 22px; background: radial-gradient(120% 120% at 50% 0%, #1d2533, #0f131a); border-bottom: 1px solid var(--line); gap: 6px; }
.sb-team { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sb-badge { width: 58px; height: 58px; border-radius: 16px; background: var(--c1); color: var(--c2); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; box-shadow: inset 0 -5px 0 #0003, 0 6px 16px #0007; }
.sb-name { display: grid; line-height: 1.1; }
.sb-name b { font-size: 15px; } .sb-name small { font-size: 11px; color: var(--muted); }
.sb-score { font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; color: var(--muted); transition: color .2s; }
.sb-score.lead { color: var(--text); }
.sb-mid { display: grid; justify-items: center; gap: 8px; }
.sb-clock { font-family: var(--display); font-size: 20px; font-weight: 700; }
.sb-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #ffffff10; }
.sb-prog i { display: block; height: 100%; background: var(--hv); transition: width .1s linear; }
.boxscore { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.boxscore th, .boxscore td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
.boxscore tr:last-child td { border-bottom: 0; }
.boxscore th { font-size: 11px; color: var(--muted); font-weight: 700; }
.boxscore td:first-child { text-align: left; padding-left: 12px; font-weight: 700; }
.boxscore .dim { color: var(--dim); }
.leadchart { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.leadchart svg { width: 100%; height: 90px; display: block; }
.lc-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.feed { display: grid; gap: 6px; }
.play { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.play.score { border-left: 4px solid var(--c1, var(--hv)); }
.play.period { background: transparent; border: 0; border-top: 1px dashed var(--line2); border-radius: 0; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.play.new { animation: flashin .5s; }
@keyframes flashin { from { background: #ffd60a33; transform: translateY(-6px); } }
.play .pq { font-size: 11px; color: var(--muted); font-weight: 700; }
.play .pt { display: grid; } .play .pt small { color: var(--muted); font-size: 12px; }
.play .ps { font-family: var(--display); font-weight: 700; font-size: 15px; }
.tracker { padding: 12px 14px; display: grid; gap: 8px; border-color: #3a3a1a; background: linear-gradient(135deg, #1d1f18, #171b22); }
.trk { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 14px; }
.trk i { width: 10px; height: 10px; border-radius: 50%; }
.trk.good i { background: var(--green); box-shadow: 0 0 8px var(--green); } .trk.bad i { background: var(--red); }
.trk span { font-size: 13px; color: var(--muted); text-align: right; }
.fieldwrap { padding: 12px 12px 0; }
.fieldcv { width: 100%; height: 160px; display: block; border-radius: 12px; background: #1c2a1f; box-shadow: 0 6px 18px #0006; }

/* onboarding */
.onb-dots { display: flex; justify-content: center; gap: 6px; }
.onb-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line2); transition: width .2s; }
.onb-dots i.on { width: 22px; background: var(--hv); }
.onb-ic { width: 74px; height: 74px; margin: 6px auto 0; border-radius: 22px; display: grid; place-items: center; color: var(--hv); background: radial-gradient(circle, #ffd60a22, #ffd60a08 70%); border: 1px solid #ffd60a44; }
.onb-ic svg { width: 40px; height: 40px; }

/* pay stub */
.stub { background: #F7F5EE; color: #1b1f27; border-radius: 12px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 10px 30px #0008; position: relative; }
.stub::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px 0, #F7F5EE 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x; }
.stub-head { display: flex; justify-content: space-between; border-bottom: 2px solid #1b1f27; padding-bottom: 8px; }
.stub-head b { font-family: var(--display); font-size: 20px; text-transform: uppercase; display: block; }
.stub small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6a6f7a; font-weight: 700; }
.stub-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stub-who b { font-size: 14px; }
.stub-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.stub-t th { text-align: right; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6a6f7a; padding: 4px 0; border-bottom: 1px solid #d6d2c4; }
.stub-t th:first-child, .stub-t td:first-child { text-align: left; }
.stub-t td { text-align: right; padding: 6px 0; border-bottom: 1px dashed #d6d2c4; }
.stub-net { display: flex; justify-content: space-between; align-items: baseline; }
.stub-net span { font-size: 13px; font-weight: 600; color: #444a55; }
.stub-net b { font-family: var(--display); font-size: 36px; color: #11813f; }
.stub .pos { color: #11813f; }
.stub-ytd { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; color: #444a55; border-top: 1px solid #d6d2c4; padding-top: 8px; }

/* slot cabinet */
.machine { padding: 0; overflow: hidden; background: linear-gradient(180deg, #3a4152, #1c212b 40%, #151920); border: 1px solid #4a5366; }
.marquee { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; background: repeating-linear-gradient(-45deg, var(--hv) 0 14px, #1a1a1a 14px 28px); border-bottom: 3px solid #0008; }
.marquee span { background: #111; color: var(--hv); font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 16px; border-radius: 8px; border: 2px solid var(--hv); box-shadow: 0 0 18px #ffd60a66; }
.bulbs { width: 44px; height: 10px; background: radial-gradient(circle, #fff6b0 2.5px, transparent 3px) 0 0 / 11px 10px repeat-x; animation: chase 0.8s steps(2) infinite; filter: drop-shadow(0 0 3px #ffe45c); }
@keyframes chase { 50% { opacity: .35; } }
.reel-window { margin: 14px 12px 10px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #0b0d11, #20252f); box-shadow: inset 0 4px 12px #000c, 0 1px 0 #ffffff14; position: relative; }
.reel { box-shadow: inset 0 18px 18px -12px #0007, inset 0 -18px 18px -12px #0007; }
.leds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 12px 14px; }
.led { background: #090b0e; border: 1px solid #2c323d; border-radius: 8px; padding: 5px 8px; display: grid; }
.led small { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6b7384; font-weight: 700; }
.led b { font-family: 'Courier New', monospace; font-size: 18px; color: #ff9d2e; text-shadow: 0 0 8px #ff7a0088; text-align: right; }

/* card faces */
.cardv { background: linear-gradient(160deg, #ffffff, #f1efe8); border: 1px solid #0002; }
.cardv .c2 { position: absolute; right: 7px; bottom: 5px; font-size: 22px; line-height: .9; text-align: center; transform: rotate(180deg); }
.cardv .c2 i { display: block; font-style: normal; font-size: 18px; }
.cardv .pip { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 38px; }
.cardv .pip.ace { font-size: 50px; }
.cardv .facebox { position: absolute; left: 17px; right: 17px; top: 20px; bottom: 20px; border: 1.5px solid currentColor; border-radius: 4px; display: grid; place-content: center; text-align: center; background: repeating-linear-gradient(45deg, #0000 0 5px, #00000008 5px 10px); line-height: .9; }
.cardv .facebox b { font-size: 30px; } .cardv .facebox i { font-style: normal; font-size: 18px; }
.cardv.back { background: radial-gradient(circle at 50% 50%, #FFD60A 0 9px, transparent 10px), repeating-linear-gradient(45deg, #1d2330 0 6px, #252c3b 6px 12px); border: 4px solid #fbfbf7; }

/* casino lobby art */
.game .art-ic { position: absolute; left: 0; right: 0; top: 8px; height: 88px; display: grid; place-items: center; }
.game .art-ic svg { width: 150px; height: 88px; }
.game.soon { opacity: .72; }
.ticket li.bun { color: #9a6a1f; }

/* sportsbook realism */
.ticker { display: flex; gap: 6px; overflow-x: auto; margin: -4px -14px 0; padding: 0 14px 4px; scrollbar-width: none; }
.ticker::-webkit-scrollbar { display: none; }
.tk { flex: none; display: grid; grid-template-columns: auto auto; gap: 0 8px; padding: 6px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: left; }
.tk .tk-s { grid-column: 1 / -1; font-size: 9px; letter-spacing: .12em; color: var(--red); }
.tk .w { color: var(--text); }
.odd { position: relative; }
.odd .mv { position: absolute; top: 4px; right: 4px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.odd .mv.up { border-bottom: 6px solid var(--green); } .odd .mv.down { border-top: 6px solid var(--red); }
.gfoot { align-items: center; gap: 8px; }
.gfoot .link { margin-left: auto; font-size: 12px; }
.injpill { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #ff9d9d; background: #ff5c5c1f; border: 1px solid #ff5c5c55; border-radius: 6px; padding: 2px 6px; }
.team { text-align: left; }
.mu-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-top: 6px; }
.mu-t { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mu-t small, .mu-mid small { font-size: 11px; color: var(--muted); }
.mu-mid { display: grid; justify-items: center; gap: 2px; }
.mu-mid b { font-family: var(--display); font-size: 24px; color: var(--dim); }
.lrow3 { display: grid; grid-template-columns: 1fr 90px 90px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lrow3:last-child { border: 0; } .lrow3 > :not(:first-child) { text-align: right; }
.split { display: grid; gap: 4px; }
.split-lbl { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; }
.split-lbl small { color: var(--muted); font-weight: 600; }
.split-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--card2); }
.split-bar i { display: block; height: 100%; }
.inj { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.inj:last-child { border: 0; }
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cmp:last-child { border: 0; } .cmp > span { color: var(--muted); text-align: center; } .cmp > b:last-child { text-align: right; }
.form { display: flex; gap: 3px; }
.form i { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; }
.form i.w { background: #2bd17e33; color: var(--green); } .form i.l { background: #ff5c5c26; color: var(--red); }
.strow { grid-template-columns: 16px 24px minmax(0,1fr) 34px 36px 78px; gap: 8px; padding: 8px 10px; }
.strow > b:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strow .form { gap: 2px; } .strow .form i { width: 14px; height: 16px; font-size: 9px; border-radius: 3px; }
.strow.head { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; padding-top: 10px; padding-bottom: 4px; }
.receipt { background: #F7F5EE; color: #1b1f27; border-radius: 12px; padding: 16px; display: grid; gap: 10px; position: relative; }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px 0, #F7F5EE 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #1b1f27; padding-bottom: 8px; }
.rc-head b { font-family: var(--display); font-size: 24px; text-transform: uppercase; color: #11813f; }
.rc-head small { color: #6a6f7a; font-weight: 700; }
.rc-bet { display: grid; gap: 2px; border-bottom: 1px dashed #d6d2c4; padding-bottom: 8px; }
.rc-bet small { color: #6a6f7a; }
.rc-row { display: flex; justify-content: space-between; font-size: 14px; color: #444a55; }
.cashout { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 6px; padding: 10px; border-radius: 10px; background: #ffd60a12; border: 1px solid #ffd60a44; }
.cashout small { display: block; font-size: 11px; color: var(--muted); }

/* apprenticeship progress on a job card */
.appr { height: 4px; border-radius: 3px; background: var(--line2); overflow: hidden; margin-top: 5px; width: 120px; }
.appr i { display: block; height: 100%; background: var(--hv, #FFC21A); }
.appr-note { font-size: 13px; line-height: 1.35; color: var(--hv); background: #ffd60a14; border: 1px solid #ffd60a55; border-radius: 10px; padding: 8px 10px; }

/* ---- table games ---- */
.tchip { position: absolute; right: 3px; bottom: 3px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px; background: var(--hv); color: var(--hv-ink); border: 2px dashed #fff8; font-family: var(--display); font-weight: 800; font-size: 12px; display: grid; place-items: center; box-shadow: 0 2px 4px #0007; pointer-events: none; }
.tresult { text-align: center; font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; display: grid; gap: 2px; }
.tresult small { font-family: var(--body); font-weight: 500; font-size: 13px; text-transform: none; color: var(--muted); }
.rl-called { text-align: center; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rl-called.red { color: #ff6b6b; } .rl-called.green { color: var(--green); } .rl-called.black { color: var(--text); }
.rl-top { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; padding: 0 12px; }
.rl-wheel { width: min(250px, 70vw); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 10px 30px #0009; }
.rl-hist { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.rl-hist small { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.rl-h { min-width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; padding: 0 4px; }
.rl-h.red { background: #c8102e; } .rl-h.black { background: #222; border: 1px solid #444; } .rl-h.green { background: #12804a; }
.rl-h.now { outline: 2px solid var(--hv); outline-offset: 1px; }
.rl-board { background: #0f4a31; border: 2px solid #d4a64a88; border-radius: 12px; padding: 6px; display: grid; gap: 4px; }
.rl-c { position: relative; min-height: 34px; border: 1px solid #ffffff38; border-radius: 4px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; display: grid; place-items: center; background: #0f4a31; }
.rl-c.red { background: #b3122a; } .rl-c.blk { background: #1b1b1b; } .rl-c.z { background: #12804a; }
.rl-c.won { outline: 3px solid var(--hv); outline-offset: -3px; box-shadow: 0 0 14px var(--hv); z-index: 1; }
.rl-c:disabled { opacity: 1; }
.rl-zeros { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-right: 52px; }
.rl-zeros .wide { grid-column: 1 / -1; }
.rl-main { display: grid; grid-template-columns: 1fr 48px; gap: 4px; }
.rl-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-doz { display: grid; grid-template-rows: repeat(3, 1fr); gap: 4px; }
.rl-c.dz span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; }
.rl-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-right: 52px; }
.rl-c.col { font-size: 13px; }
.rl-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rl-out .rl-c { min-height: 40px; font-size: 15px; }
.rl-c.redb { background: #b3122a; } .rl-c.blkb { background: #1b1b1b; }

.bc-felt { background: radial-gradient(120% 80% at 50% 0%, #1b3f73, #0d213d 70%); min-height: 0; }
.bc-felt .rules { color: #b9d2f5; }
.bc-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bc-hand { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; border: 1px solid #ffffff1f; min-height: 170px; align-content: start; }
.bc-hand .lbl { font-family: var(--display); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; color: #cfe0f7; }
.bc-hand .cards { display: flex; min-height: 100px; }
.bc-hand .cards > div { margin-left: -26px; } .bc-hand .cards > div:first-child { margin-left: 0; }
.bc-hand .cards > div.third { margin-left: -8px; }
.bc-hand .cards .cardv { margin-left: 0; width: 60px; height: 86px; }
.bc-hand .cards .third .cardv { transform: rotate(90deg) translateX(10px); }
.bc-hand .tot { font-family: var(--display); font-weight: 800; font-size: 28px; }
.bc-hand.win { border-color: var(--hv); box-shadow: inset 0 0 0 1px var(--hv), 0 0 18px #ffd60a33; }
.bc-spots { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 6px; }
.bc-spot { position: relative; min-height: 74px; border-radius: 12px; border: 2px solid #ffffff40; display: grid; place-content: center; text-align: center; gap: 2px; }
.bc-spot b { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.bc-spot small { font-size: 11px; color: #cfe0f7; }
.bc-spot.player { background: #1f5fbf55; } .bc-spot.banker { background: #b3122a55; } .bc-spot.tie { background: #12804a55; }
.bc-spot.won { border-color: var(--hv); box-shadow: 0 0 16px #ffd60a55; }
.bead { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, 22px); gap: 3px; background: #fff; border-radius: 8px; padding: 6px; overflow-x: auto; }
.bead i { width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; color: #fff; background: #eef0f3; }
.bead i.b-p { background: #1f5fbf; } .bead i.b-b { background: #c8102e; } .bead i.b-t { background: #12804a; }

.cr-felt { margin: 0 12px; border-radius: 16px; background: radial-gradient(120% 80% at 50% 0%, #17583c, #0c3323 75%); border: 3px solid #5b3a1c; padding: 12px; display: grid; gap: 12px; }
.cr-puck-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.cr-box { position: relative; height: 44px; border: 2px solid #ffffff55; border-radius: 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 17px; color: #fff; }
.cr-box.on { border-color: #fff; background: #ffffff1a; }
.puck { position: absolute; top: -10px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111; font-size: 11px; display: grid; place-items: center; box-shadow: 0 2px 6px #0008; border: 3px solid #111; }
.cr-dice { display: flex; align-items: center; gap: 12px; justify-content: center; }
.die { width: 54px; height: 54px; border-radius: 10px; background: #e53935; box-shadow: inset -3px -4px 0 #0003, 0 4px 10px #0008; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 8px; }
.die i { width: 10px; height: 10px; border-radius: 50%; background: #fff; place-self: center; }
.die.roll { animation: tumble .18s linear infinite; } .die.roll.b { animation-direction: reverse; }
@keyframes tumble { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .die.roll { animation: none; } }
.cr-state { display: grid; gap: 2px; margin-left: 6px; }
.cr-state b { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.cr-state small { color: #a8e7c5; font-size: 12px; }
.cr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cr-spot { position: relative; min-height: 62px; border: 2px solid #ffffff66; border-radius: 10px; display: grid; align-content: center; padding: 6px 10px; text-align: left; gap: 2px; color: #fff; }
.cr-spot.wide { grid-column: 1 / -1; }
.cr-spot b { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; }
.cr-spot small { color: #cfeedd; font-size: 11px; line-height: 1.25; padding-right: 30px; }
.cr-spot.red { border-color: #ff5c5c99; } .cr-spot.red b { color: #ff8a8a; }
.cr-spot:disabled { opacity: .45; }
.cr-spot.pass { background: #ffffff0f; }

.vp-machine { margin: 0 12px 12px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #1b2a6b, #0e1640); border: 3px solid #c9a24a; display: grid; gap: 12px; }
.vp-pay table { width: 100%; border-collapse: collapse; font-family: var(--display); font-weight: 700; font-size: 14px; color: #ffe27a; text-transform: uppercase; }
.vp-pay th, .vp-pay td { padding: 2px 4px; text-align: right; }
.vp-pay td:first-child, .vp-pay th:first-child { text-align: left; }
.vp-pay th { color: #9fb0e8; font-size: 12px; }
.vp-pay .on { background: #c8102e; color: #fff; }
.vp-pay tr.win td { background: #ffd60a; color: #1c1700; }
.vp-status { min-height: 44px; text-align: center; display: grid; align-content: center; gap: 2px; }
.vp-status b { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: #fff; }
.vp-status small { color: #b9c6ef; font-size: 12px; }
.vp-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.vp-card { display: grid; justify-items: center; gap: 4px; padding: 4px 0; border-radius: 8px; }
.vp-card .hold { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .08em; color: #9fb0e8; }
.vp-card.held .hold { color: var(--hv); }
.vp-card .cardv { margin-left: 0; width: 100%; max-width: 64px; height: auto; aspect-ratio: 5 / 7; animation: none; }
.vp-card .cardv .c1 { font-size: 18px; } .vp-card .cardv .c2 { font-size: 18px; } .vp-card .cardv .pip { font-size: 28px; }
.vp-card.held .cardv { box-shadow: 0 0 0 3px var(--hv), 0 4px 10px #0008; }
.vp-card.hint:not(.held) .cardv { box-shadow: 0 0 0 3px #4AA8FF; }
.vp-card:disabled { opacity: 1; }
.vp-denom { display: flex; align-items: center; gap: 8px; }
.vp-denom small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.stub-t tr.gross td { font-weight: 800; border-bottom: 2px solid #1b1f27; }
.stub .neg { color: #b3261e; }
.kn-machine { margin: 0 12px 12px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #3d3719, #1b1a10); border: 3px solid #c9a24a; display: grid; gap: 10px; }
.kn-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.kn-n { aspect-ratio: 1; border-radius: 50%; background: #2b2f38; color: #cfd5de; font-family: var(--display); font-weight: 700; font-size: 14px; border: 1px solid #ffffff1a; }
.kn-n.pick { background: #FFD60A; color: #1c1700; }
.kn-n.drawn { background: #3e5f9e; color: #fff; }
.kn-n.pick.hit { background: #2BD17E; color: #062914; box-shadow: 0 0 10px #2BD17E; }
.kn-n:disabled { opacity: 1; }
.kn-pay table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kn-pay th { text-align: left; font-size: 11px; color: #d8cf9c; text-transform: uppercase; letter-spacing: .08em; padding: 3px 4px; }
.kn-pay td { padding: 3px 4px; border-top: 1px solid #ffffff14; }
.kn-pay tr.win td { background: #FFD60A; color: #1c1700; }
.kn-pay-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.kn-pay-h b { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.kn-pay-h small { color: #ffb4b4; font-size: 12px; }
.cx-cv { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line2); }
.cx-auto { display: flex; align-items: center; gap: 6px; }
.cx-auto small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.cx-auto .chip { height: 36px; font-size: 15px; }
.btn.cx-cash { background: var(--green); color: #062914; font-size: 22px; }

/* life happens: notices between shifts */
.notice { border-top: 6px solid var(--nc); margin: -8px -16px 0; padding: 14px 16px 4px; border-radius: 18px 18px 0 0; }
.nt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nt-tag { font-family: var(--display); font-weight: 800; letter-spacing: .14em; font-size: 12px; color: var(--nc); border: 1.5px solid var(--nc); border-radius: 6px; padding: 2px 8px; }
.nt-head small { color: var(--muted); font-size: 12px; text-align: right; }
.notice h2 { font-size: 30px; text-transform: uppercase; line-height: 1; }
.nt-amt { display: flex; justify-content: space-between; align-items: baseline; background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 10px 14px; }
.nt-amt small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.nt-amt b { font-family: var(--display); font-size: 34px; }
.notice p { color: #c9d0db; font-size: 15px; line-height: 1.45; }
.notice .btn { display: grid; gap: 1px; justify-items: center; line-height: 1.15; padding-top: 10px; padding-bottom: 10px; height: auto; min-height: 52px; }
.notice .btn small { font-family: var(--body); font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; opacity: .8; }
.nt-res { background: #ffffff0f; border-left: 3px solid var(--nc); padding: 8px 10px; border-radius: 6px; color: var(--text) !important; }
.card.offsite { padding: 14px; display: grid; gap: 12px; border-color: #ff8a1f66; }
/* warehouse */
.wh { flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; position: relative; }
.wh-scan { padding: 10px 12px 6px; }
.wh-screen { background: #0b1a12; border: 3px solid #2d3a33; border-radius: 12px; padding: 10px 12px; font-family: 'Courier New', ui-monospace, monospace; color: #7dff9e; display: grid; gap: 4px; box-shadow: inset 0 0 20px #00ff6a18; }
.wh-screen small { color: #4fbf6c; font-size: 11px; letter-spacing: .1em; }
.wh-loc { font-size: 38px; letter-spacing: .06em; line-height: 1; }
.wh-item { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.wh-prog { display: flex; justify-content: space-between; font-size: 13px; color: #b7f5c7; }
.wh-team { color: #ffd60a; }
.wh-rack { padding: 4px 10px; min-height: 0; overflow: auto; background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 6px), #1f5fbf 0 25%); }
.wh-grid { display: grid; gap: 6px; }
.wh-bin { background: #232a35; border: 1px solid #3a4454; border-bottom: 5px solid #d8762a; border-radius: 6px; padding: 5px 4px; display: grid; gap: 1px; text-align: center; min-height: 72px; align-content: center; }
.wh-bin b { font-family: var(--display); font-size: 16px; letter-spacing: .04em; }
.wh-bin .wh-ic { font-size: 13px; color: #cfd5de; }
.wh-bin small { font-size: 9.5px; color: var(--muted); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-bin.empty .wh-ic { color: var(--red); font-weight: 800; }
.wh-bin.heavy { border-bottom-color: var(--red); }
.wh-walk { height: 100%; display: grid; place-items: center; font-family: var(--display); font-size: 22px; text-transform: uppercase; color: var(--muted); letter-spacing: .06em; min-height: 200px; }
.wh-bar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.wh-bar .ing { min-height: 52px; }
.wh-note { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); background: #0d1015ee; border: 1px solid var(--line2); color: var(--text); padding: 10px 16px; border-radius: 12px; font-weight: 700; opacity: 0; transition: .15s; pointer-events: none; text-align: center; max-width: 86%; }
.wh-note.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tc-felt { background: radial-gradient(120% 80% at 50% 0%, #5a2a5f, #2a1030 72%); min-height: 0; }
.tc-felt .rules { color: #e7c6ee; }
.tc-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tc-spot { border: 2px solid #ffffff4d; border-radius: 50%; aspect-ratio: 1; display: grid; place-content: center; text-align: center; max-width: 96px; justify-self: center; width: 100%; }
.tc-spot small { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #e7c6ee; }
.tc-spot b { font-family: var(--display); font-size: 17px; }
.tc-spot.dim { border-style: dashed; }