:root {
  --bg: #0b0f1a;
  --panel: #141a2a;
  --panel-2: #1a2229;
  --line: #2a3540;
  --text: #f2eee4;
  --muted: #a3b1c2;
  --green: #6fcf97;
  --gold: #e8c468;
  --blue: #7aa7e8;
  --pink: #e88aa6;
  --red: #f28b82;
  --orange: #e8924a;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --tabs-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { min-height: 100vh; min-height: 100dvh; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--blue); }
img { display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.app { max-width: 480px; margin: 0 auto; padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 96px); }
.splash { height: 80vh; display: grid; place-items: center; font-family: var(--display); font-size: 40px; letter-spacing: 2px; }
.splash span, .logo span { color: var(--orange); }
.muted { color: var(--muted); }
.display { font-family: var(--display); font-weight: 700; }
.hidden, [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Top of each page ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.top .kicker { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.top h1 { font-family: var(--display); font-size: 32px; line-height: 1.05; }
.top .money { text-align: right; font-size: 12px; color: var(--muted); }
.top .money b { display: block; font-family: var(--display); font-size: 22px; color: var(--text); }
.logo { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 1px; }
.round { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--line); background: transparent;
  display: grid; place-items: center; color: var(--muted); text-decoration: none; flex: none; }
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.badge { width: 44px; height: 44px; border-radius: 22px; background: var(--orange); color: #12171c; display: grid;
  place-items: center; font-family: var(--display); font-weight: 700; font-size: 16px; border: 0; overflow: hidden; }
.badge img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cards and rows ---------- */
.section { margin: 12px 16px 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 20px 8px; }
.section-head h2 { font-family: var(--display); font-size: 19px; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.section-head span { font-size: 12px; color: var(--muted); }
.panel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 12px 14px; }
.tile .label { font-size: 12px; color: var(--muted); }
.tile .value { font-family: var(--display); font-weight: 700; font-size: 26px; }
.btn { min-height: 48px; border: 0; border-radius: 14px; padding: 0 18px; font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn.green { background: var(--green); color: #0f241a; }
.btn.gold { background: var(--gold); color: #2a210c; }
.btn.blue { background: var(--blue); color: #0b0f1a; }
.btn.light { background: var(--text); color: #12171c; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn.red { background: #3a1a1c; color: var(--red); border: 1px solid #6a2a2e; }
.btn.wide { width: 100%; }
.empty { padding: 18px; text-align: center; color: var(--muted); }

/* ---------- Home ---------- */
.hero { position: relative; overflow: hidden; padding: 18px; border-radius: 20px; background: #1a2b24; border: 1px solid #24443a; }
.hero svg.waves { position: absolute; right: -20px; top: 0; width: 360px; height: 190px; opacity: .5; fill: none; stroke: var(--green); }
.hero .kicker { position: relative; font-size: 12px; letter-spacing: 1.5px; color: var(--muted); }
.hero .name { position: relative; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; margin-top: 2px; }
.hero .record { position: relative; color: var(--muted); margin-top: 2px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--green); vertical-align: middle; }
.score { position: relative; margin-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; }
.score .n { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; }
.score .who { font-size: 12px; color: var(--muted); margin-top: 4px; }
.score .vs { font-family: var(--display); font-size: 18px; color: var(--muted); padding-bottom: 18px; }
.bar { position: relative; height: 6px; border-radius: 3px; background: #12171c; margin-top: 10px; overflow: hidden; }
.bar div { height: 100%; background: var(--green); }
.receipt { background: var(--text); color: #26282e; border-radius: 16px; padding: 14px 16px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
.receipt .t { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.receipt .s { font-size: 13px; color: #4a4c52; }
.receipt .btn { background: #26282e; color: var(--text); min-height: 44px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border-radius: 14px; padding: 10px 12px; }
.row .stripe { width: 6px; height: 34px; border-radius: 3px; flex: none; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .end { font-family: var(--display); font-weight: 700; font-size: 20px; }

/* ---------- Lineup ---------- */
.lineup { overflow: hidden; }
.lineup-head { padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--line); }
.lineup-head b { font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--muted); }
.lineup-head span { font-size: 12px; color: var(--muted); text-align: right; }
.starter { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 0;
  border-bottom: 1px solid #222b33; background: transparent; text-align: left; }
.starter:last-child { border-bottom: 0; }
.face { position: relative; width: 48px; height: 48px; flex: none; }
.face .ring { width: 48px; height: 48px; border-radius: 24px; overflow: hidden; background: #253039; border: 2px solid; }
.face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.face .chip { position: absolute; left: -4px; bottom: -4px; padding: 1px 5px; border-radius: 6px; background: #12171c;
  border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--muted); }
.starter .grow { flex: 1; min-width: 0; }
.starter .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.starter .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.starter .sub.warn { color: #f0a35e; }
.starter .right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.starter .ovr { font-family: var(--display); font-weight: 700; font-size: 20px; }
.starter .pay { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lock { font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.bench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bench button { background: var(--panel-2); border: 0; border-radius: 14px; padding: 10px 12px; display: flex; gap: 10px;
  align-items: center; text-align: left; min-height: 56px; min-width: 0; }
.bench .stripe { width: 5px; height: 30px; border-radius: 3px; flex: none; }
.bench .title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench .sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench .min { min-width: 0; }
.note { margin: 14px 16px 0; padding: 12px 14px; border-radius: 14px; background: #2a2116; color: #f0d29a; font-size: 13px; }

/* ---------- Bottom sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; background: rgba(4, 6, 12, .66); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: #12182a; border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(22px + var(--safe-b)); border-top: 1px solid var(--line); animation: up .18s ease-out; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #34425e; margin: 0 auto 12px; }
.sheet h3 { font-family: var(--display); font-size: 24px; }
.sheet .actions { display: grid; gap: 8px; margin-top: 14px; }
.sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet .card-art { width: 180px; margin: 4px auto 10px; border-radius: 12px; }
.statline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.statline div { background: var(--panel); border-radius: 10px; padding: 8px 4px; text-align: center; }
.statline b { display: block; font-family: var(--display); font-size: 20px; }
.statline span { font-size: 11px; color: var(--muted); }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Packs ---------- */
.pack-stage { position: relative; text-align: center; padding: 6px 20px 0; }
.glow { position: absolute; left: 50%; top: 10px; width: 280px; height: 280px; margin-left: -140px; border-radius: 140px;
  opacity: .16; filter: blur(60px); pointer-events: none; }
.pack-art { position: relative; width: 196px; height: 274px; margin: 8px auto 0; border-radius: 18px; overflow: hidden;
  border: 2px solid; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 1px; }
.pack-art img { width: 100%; height: 100%; object-fit: cover; }
.pack-name { position: relative; font-family: var(--display); font-weight: 700; font-size: 28px; margin-top: 14px; }
.pack-desc { position: relative; color: var(--muted); margin: 2px auto 0; max-width: 320px; }
.odds { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.odds span { font-size: 12px; padding: 4px 9px; border-radius: 10px; background: var(--panel); border: 1px solid; }
.pack-buttons { position: relative; display: flex; gap: 10px; padding: 16px 20px 0; }
.pack-buttons .btn { flex: 1; }
.swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 20px 4px; scroll-padding: 0 20px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.swipe::-webkit-scrollbar { display: none; }
.shelf-pack { flex: 0 0 104px; scroll-snap-align: start; border: 0; padding: 0; background: transparent; display: flex;
  flex-direction: column; align-items: center; gap: 6px; }
.shelf-pack .art { width: 104px; height: 148px; border-radius: 12px; border: 1px solid; display: grid; place-items: center;
  overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 1px; transition: transform .15s; }
.shelf-pack .art img { width: 100%; height: 100%; object-fit: cover; }
.shelf-pack.on .art { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--text); }
.shelf-pack .t { font-weight: 600; font-size: 13px; }
.shelf-pack .p { font-size: 12px; color: var(--muted); margin-top: -4px; }
.shelf-pack .p.free { color: var(--green); }

/* Opening and the reveal */
.overlay { position: fixed; inset: 0; z-index: 40; background: #070a12; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 20px calc(24px + var(--safe-b)); text-align: center; overflow-y: auto; }
.overlay .stage { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 18px; }
.overlay .shake { animation: shake .6s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.02); } 75% { transform: rotate(3deg) scale(1.02); } }
.reveal-card { width: min(260px, 70vw); border-radius: 14px; animation: flip .55s ease-out; }
@keyframes flip { from { transform: perspective(800px) rotateY(90deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.reveal-title { font-family: var(--display); font-weight: 700; font-size: 28px; margin-top: 16px; }
.reveal-sub { color: var(--muted); margin-top: 2px; }
.reveal-buttons { display: grid; gap: 8px; width: 100%; max-width: 340px; margin-top: 18px; }
.scout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 440px; margin-top: 14px; }
.scout-grid button { border: 0; padding: 0; background: transparent; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.scout-grid img { width: 100%; border-radius: 10px; }
.scout-grid .t { font-weight: 600; font-size: 12px; line-height: 1.2; }
.scout-grid .s { font-size: 11px; }

/* ---------- Casino and parlays ---------- */
.casino-parlays { padding: 14px 16px; background: #10213a; border: 1px solid #23406a; border-radius: 18px; }
.casino-parlays .head { display: flex; justify-content: space-between; align-items: baseline; }
.casino-parlays .head b { font-family: var(--display); font-size: 18px; letter-spacing: .5px; }
.tops { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tops > div { border-radius: 12px; background: var(--bg); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mini-face { width: 40px; height: 40px; border-radius: 20px; overflow: hidden; background: #1f2a40; border: 2px solid var(--blue); }
.mini-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tops .t { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tops .s { font-size: 11px; color: var(--muted); }
.table-card { flex: 0 0 272px; height: 200px; scroll-snap-align: start; border-radius: 20px; position: relative; overflow: hidden;
  padding: 16px; display: block; color: var(--text); text-decoration: none; border: 1px solid; }
.table-card .ring { position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 85px; border: 2px solid; opacity: .25; }
.table-card .tag { font-size: 11px; letter-spacing: 1.5px; }
.table-card .nm { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; margin-top: 2px; }
.table-card .d { font-size: 12px; color: #cdd6e6; margin-top: 4px; max-width: 220px; }
.table-card .bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.table-card .pill { min-height: 40px; padding: 0 16px; border-radius: 12px; display: flex; align-items: center; font-weight: 600; color: #0b0f1a; }

.segment { margin: 8px 16px 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border-radius: 12px; padding: 4px; }
.segment button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; }
.segment button.on { background: var(--blue); color: var(--bg); }
.chips { margin-top: 10px; }
.chip-btn { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid #34425e; background: var(--panel);
  color: #cdd6e6; font-size: 13px; font-weight: 600; scroll-snap-align: start; }
.chip-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.props { margin: 12px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prop { border-radius: 16px; background: var(--panel); border: 1px solid #1f2a40; padding: 12px 10px 10px; display: flex;
  flex-direction: column; align-items: center; min-width: 0; }
.prop.on { border-color: var(--blue); }
.prop .face-lg { width: 64px; height: 64px; border-radius: 32px; overflow: hidden; background: #1f2a40; border: 2px solid #34425e; }
.prop .face-lg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.prop .nm { margin-top: 6px; font-weight: 600; font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop .gm { font-size: 11px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop .ln { margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; }
.prop .st { font-size: 11px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop .ls { margin-top: 8px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pick-btn { min-height: 42px; border-radius: 10px; border: 1px solid #34425e; background: transparent; color: #cdd6e6; font-weight: 600; font-size: 13px; }
.pick-btn.on { background: var(--blue); border-color: var(--blue); color: var(--bg); }
.game-card { padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid #1f2a40; }
.game-card .gh { display: flex; justify-content: space-between; font-weight: 600; }
.game-card .gh span { font-weight: 400; color: var(--muted); font-size: 12px; }
.game-card .opts { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.game-card .pick-btn { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.game-card .pick-btn small { font-weight: 400; opacity: .8; }
.slip-bar { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 456px;
  bottom: calc(var(--tabs-h) + var(--safe-b) + 10px); z-index: 20; border-radius: 16px; background: var(--blue); color: var(--bg);
  padding: 10px 14px; display: flex; align-items: center; gap: 10px; border: 0; text-align: left; }
.slip-bar .faces { display: flex; }
.slip-bar .faces div { width: 30px; height: 30px; border-radius: 15px; background: #1f2a40; border: 2px solid var(--blue); overflow: hidden; margin-left: -10px; }
.slip-bar .faces div:first-child { margin-left: 0; }
.slip-bar .faces img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.slip-bar .grow { flex: 1; }
.slip-bar b { display: block; }
.slip-bar small { font-size: 12px; }
.slip-bar .go { min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--bg); color: var(--text); font-weight: 600; display: flex; align-items: center; }
.slip-pick { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #222b3d; }
.slip-pick .grow { flex: 1; min-width: 0; }
.slip-pick .x { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.bet-row { display: flex; gap: 6px; margin-top: 12px; }
.bet-row button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid #34425e; background: transparent; color: var(--text); font-weight: 600; }
.bet-row button.on { background: var(--text); color: var(--bg); }
.bet-input { width: 100%; margin-top: 8px; min-height: 46px; border-radius: 12px; border: 1px solid #34425e; background: var(--panel);
  color: var(--text); padding: 0 14px; font-size: 16px; }
.pays { display: flex; justify-content: space-between; margin-top: 12px; font-size: 15px; }
.pays b { font-family: var(--display); font-size: 22px; }
.result { font-size: 11px; padding: 2px 8px; border-radius: 8px; background: var(--panel); }
.result.won { color: var(--green); } .result.lost { color: var(--red); } .result.open { color: var(--gold); }

/* ---------- Login ---------- */
.login { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 24px; gap: 14px; }
.login .big { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 13vw, 56px); line-height: .95; }
.login p { color: var(--muted); margin: 0; font-size: 15px; }
.discord-btn { background: #5865f2; color: #fff; }

/* ---------- Tabs and messages ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(var(--tabs-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: #080b13; border-top: 1px solid #1d2436; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: #8a99a5; font-size: 11px; }
.tabs a.on { color: var(--green); }
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 60;
  width: calc(100% - 32px); max-width: 440px; padding: 12px 14px; border-radius: 14px; background: #f2eee4; color: #12171c;
  font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.spinner { width: 28px; height: 28px; border-radius: 14px; border: 3px solid #34425e; border-top-color: var(--text); animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================
   Round 2: motion, the website's own cards, the pack flash, businesses
   ===================================================================== */

/* ---------- Motion everywhere ---------- */
.enter > * { animation: rise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.btn, .pick-btn, .chip-btn, .shelf-pack, .bench button, .starter, .round, .badge, .slip-bar, .table-card, .biz-card, .kind-row, .sq {
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:active, .pick-btn:active, .chip-btn:active, .bench button:active, .starter:active, .round:active, .badge:active,
.slip-bar:active, .table-card:active, .biz-card:active, .kind-row:active, .sq:active { transform: scale(.965); }
.pick-btn.on { animation: pop .28s ease-out; }
@keyframes pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.tabs a.on svg { animation: hop .35s ease-out; }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
.toast:not([hidden]) { animation: drop .3s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes drop { from { transform: translate(-50%, -24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.slip-bar { animation: slipup .35s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes slipup { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.hero svg.waves path { animation: drift 9s ease-in-out infinite alternate; }
.hero svg.waves path:nth-child(2) { animation-duration: 11s; } .hero svg.waves path:nth-child(3) { animation-duration: 13s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.bar div { animation: grow 1s cubic-bezier(.2, .8, .2, 1) both .2s; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 207, 151, .6); } 100% { box-shadow: 0 0 0 10px rgba(111, 207, 151, 0); } }
.shelf-pack.on .art { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-9px); } }
.pack-art { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.glow { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .12; transform: scale(.95); } 50% { opacity: .24; transform: scale(1.05); } }
.sheet { animation: up .26s cubic-bezier(.2, .9, .3, 1.1); }

/* ---------- The website's own cards ---------- */
.wc { --w: 210px; position: relative; width: var(--w); aspect-ratio: 7 / 10; border-radius: calc(var(--w) * .066); overflow: hidden;
  border: 2px solid var(--wc-border); background: var(--wc-bg); color: var(--wc-ink); box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  container-type: inline-size; transform-style: preserve-3d; isolation: isolate; text-align: left; }
.wc .in { font-size: 4.762cqw; }
.wc .tx { position: absolute; inset: 0; background: var(--wc-tex); opacity: var(--wc-tex-o, 1); z-index: 0; }
.wc .shine { position: absolute; top: -40%; left: 0; width: 45%; height: 180%; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, var(--wc-sheen, .12)), transparent);
  animation: sheen 3.6s ease-in-out infinite; }
@keyframes sheen { from { transform: translateX(-120%) rotate(18deg); } to { transform: translateX(260%) rotate(18deg); } }
.wc .foil { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), transparent 45%),
  conic-gradient(from 0deg at var(--mx, 50%) var(--my, 30%), rgba(255,122,200,.5), rgba(122,215,255,.5), rgba(255,242,122,.5), rgba(122,255,180,.5), rgba(255,122,200,.5)); transition: opacity .3s; }
.wc.tilt:hover .foil, .wc.tilt:active .foil { opacity: .22; }
.wc.foiled .foil { opacity: .12; }
.wc .ovr { position: absolute; left: 6%; top: 3.5%; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 4em; line-height: .9; color: var(--wc-accent); }
.wc .ovr small { display: block; font-size: .27em; letter-spacing: .15em; font-weight: 600; }
.wc .lbl { position: absolute; right: 6%; top: 4.5%; z-index: 2; font-size: .9em; letter-spacing: .16em; font-weight: 600; text-align: right; color: var(--wc-accent); max-width: 55%; }
.wc .ph { position: absolute; left: 0; right: 0; top: 11%; height: 50%; z-index: 1; overflow: hidden; }
.wc .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.wc .ph svg { position: absolute; left: 50%; bottom: 0; width: 72%; transform: translateX(-50%); }
.wc .ph img { position: relative; z-index: 1; }
.wc .ph.loaded svg { display: none; }
.wc .fade { position: absolute; left: 0; right: 0; top: 44%; height: 18%; z-index: 1; background: linear-gradient(transparent, var(--wc-fade)); }
.wc .sig { position: absolute; left: 0; right: 0; top: 46%; z-index: 2; text-align: center; font-family: 'Monsieur La Doulaise', cursive; font-size: 2.7em; white-space: nowrap; color: var(--wc-accent); transform: rotate(-6deg); }
.wc .nm { position: absolute; left: 6%; right: 6%; top: 59%; z-index: 2; }
.wc .nm .f { font-size: 1em; letter-spacing: .2em; opacity: .85; }
.wc .nm .l { font-family: var(--display); font-weight: 700; font-size: 2.6em; line-height: .95; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc .nm .m { font-size: .95em; letter-spacing: .08em; opacity: .8; margin-top: .2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc .st { position: absolute; left: 5%; right: 5%; bottom: 7.5%; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
  border-top: 1px solid var(--wc-rule); padding-top: .5em; }
.wc .st b { display: block; font-family: var(--display); font-size: 1.5em; }
.wc .st span { font-size: .8em; letter-spacing: .1em; opacity: .7; }
.wc .ft { position: absolute; left: 6%; right: 6%; bottom: 2.4%; z-index: 2; display: flex; justify-content: space-between; font-size: .8em; letter-spacing: .1em; opacity: .7; }
.wc.s-classic { --wc-bg: linear-gradient(160deg, #e9ecef, #b7bec6 55%, #dfe3e7); --wc-border: #9aa3ad; --wc-ink: #1d2228; --wc-accent: #2a3038;
  --wc-fade: #c4cad1; --wc-rule: rgba(0, 0, 0, .18); --wc-tex: repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 9px); --wc-sheen: .35; }
.wc.s-holo { --wc-bg: linear-gradient(150deg, #cfeee0, #8fd3b3 40%, #d6f2e6 70%, #9ad6c9); --wc-border: #6fcf97; --wc-ink: #0f2a1f; --wc-accent: #0f3a28;
  --wc-fade: #a9dcc6; --wc-rule: rgba(0, 0, 0, .15); --wc-sheen: .45;
  --wc-tex: conic-gradient(from 210deg at 70% 30%, rgba(255, 120, 200, .25), rgba(120, 200, 255, .3), rgba(255, 240, 120, .25), rgba(120, 255, 180, .3), rgba(255, 120, 200, .25)); }
.wc.s-courtside { --wc-bg: linear-gradient(180deg, #2a1420, #3c1b2b); --wc-border: #e88aa6; --wc-ink: #fbe7ee; --wc-accent: #e88aa6; --wc-fade: #3c1b2b;
  --wc-rule: rgba(232, 138, 166, .35); --wc-tex: repeating-linear-gradient(90deg, rgba(196, 140, 90, .22) 0 22px, rgba(160, 105, 60, .22) 22px 44px); --wc-tex-o: .9; }
.wc.s-allstar { --wc-bg: linear-gradient(160deg, #3a2c0c, #1c1606 60%, #4a3810); --wc-border: #e8c468; --wc-ink: #fbf1d0; --wc-accent: #e8c468; --wc-fade: #21190a;
  --wc-rule: rgba(232, 196, 104, .4); --wc-sheen: .22;
  --wc-tex: radial-gradient(circle at 20% 30%, rgba(232, 196, 104, .5) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(232, 196, 104, .45) 0 1.5px, transparent 2px), radial-gradient(circle at 45% 80%, rgba(232, 196, 104, .4) 0 1px, transparent 1.5px); }
.wc.s-signature { --wc-bg: linear-gradient(170deg, #121212, #050505); --wc-border: #c9a24b; --wc-ink: #f2eee4; --wc-accent: #d8b45a; --wc-fade: #0a0a0a;
  --wc-rule: rgba(201, 162, 75, .4); --wc-tex: linear-gradient(115deg, transparent 40%, rgba(201, 162, 75, .12) 50%, transparent 60%); }
.wc.s-halloween_edition { --wc-bg: radial-gradient(circle at 50% 35%, #7a3a12, #1a0c05 70%); --wc-border: #e8924a; --wc-ink: #ffe7d1; --wc-accent: #f0a35e;
  --wc-fade: #1a0c05; --wc-rule: rgba(232, 146, 74, .4); --wc-tex: repeating-radial-gradient(circle at 50% 0%, transparent 0 18px, rgba(240, 163, 94, .12) 18px 19px); }
.wc.s-fear_factor_2026 { --wc-bg: linear-gradient(180deg, #3a0606, #120202); --wc-border: #f28b82; --wc-ink: #ffe1de; --wc-accent: #ff6b5e; --wc-fade: #160303;
  --wc-rule: rgba(242, 139, 130, .4);
  --wc-tex: linear-gradient(180deg, rgba(176, 0, 0, .55) 0 8px, transparent 8px), radial-gradient(ellipse at 20% 0%, rgba(176, 0, 0, .6) 0 10px, transparent 30px), radial-gradient(ellipse at 65% 0%, rgba(176, 0, 0, .6) 0 8px, transparent 40px); }
.wc.s-allstar, .wc.s-signature, .wc.s-fear_factor_2026 { box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 0 34px var(--wc-glow, rgba(232, 196, 104, .35)), 0 14px 30px rgba(0, 0, 0, .5); }
.wc.s-fear_factor_2026 { --wc-glow: rgba(255, 60, 50, .4); }

/* ---------- Opening a pack: tear, flash, flip ---------- */
.pack-art.tear { animation: tear .45s ease-in forwards; }
@keyframes tear { 0% { transform: scale(1); } 60% { transform: scale(1.12) rotate(2deg); filter: brightness(1.6); } 100% { transform: scale(1.5); opacity: 0; filter: brightness(3); } }
.flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: var(--flash, #fff); opacity: 0; }
.flash.go-1 { animation: flash1 .55s ease-out; }
.flash.go-2 { animation: flash2 1s ease-out; }
.flash.go-3 { animation: flash3 1.5s ease-out; }
@keyframes flash1 { 0% { opacity: 0; } 15% { opacity: .55; } 100% { opacity: 0; } }
@keyframes flash2 { 0% { opacity: 0; } 10% { opacity: .9; } 30% { opacity: .15; } 45% { opacity: .75; } 100% { opacity: 0; } }
@keyframes flash3 { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: .1; } 30% { opacity: .9; } 42% { opacity: .1; } 55% { opacity: .8; } 100% { opacity: 0; } }
.burst { position: fixed; left: 50%; top: 42%; z-index: 79; width: 10px; height: 10px; pointer-events: none; }
.burst i { position: absolute; left: 0; top: 0; width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; background: var(--c);
  animation: fly 1.1s cubic-bezier(.1, .7, .3, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes fly { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }
.rays { position: absolute; left: 50%; top: 44%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--ray, rgba(255, 255, 255, .14)) 0 6deg, transparent 6deg 18deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 18s linear infinite; }
.reveal-wrap { position: relative; perspective: 900px; }
.reveal-wrap .wc { --w: min(250px, 66vw); animation: flipin .8s cubic-bezier(.2, .8, .2, 1) backwards, var(--wc-anim, none); transition: transform .15s ease-out; }
@keyframes flipin { 0% { transform: rotateY(180deg) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: rotateY(0) scale(1); } }
.overlay .rise-in { animation: rise .5s both .55s; }
.overlay .rise-in-2 { animation: rise .5s both .7s; }
.overlay .rise-in-3 { animation: rise .5s both .85s; }
.scout-grid .wc { --w: 100%; }
.scout-grid button { animation: rise .45s both; }
.scout-grid button:nth-child(2) { animation-delay: .1s; } .scout-grid button:nth-child(3) { animation-delay: .2s; }
.sheet .wc { --w: 190px; margin: 2px auto 12px; }

/* ---------- Businesses ---------- */
.empire-head { padding: 18px 20px 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.biz-card { display: block; text-decoration: none; width: 100%; text-align: left; border-radius: 18px; padding: 14px 16px; color: var(--text); border: 1px solid var(--bc);
  background: linear-gradient(150deg, var(--bg1), var(--bg2)); position: relative; overflow: hidden; }
.biz-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 70px; border: 2px solid var(--bc); opacity: .5; }
.biz-card .nm { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .5px; text-transform: uppercase; }
.biz-card .sub { font-size: 12px; color: var(--soft); }
.biz-card .amt { font-family: var(--display); font-weight: 700; font-size: 22px; }
.open-slot { border-radius: 18px; padding: 14px 16px; border: 1px dashed #3a4552; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.weeks { display: flex; align-items: flex-end; gap: 8px; height: 100px; padding: 0 4px; }
.weeks > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.weeks .b { width: 100%; border-radius: 6px 6px 2px 2px; animation: barup .7s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
.weeks span { font-size: 10px; color: var(--muted); white-space: nowrap; }
@keyframes barup { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kind-row { width: 100%; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center;
  gap: 12px; text-align: left; color: var(--text); }
.kind-row .stripe { width: 6px; align-self: stretch; border-radius: 3px; flex: none; }
.kind-row .grow { flex: 1; min-width: 0; }
.kind-row .t { font-family: var(--display); font-weight: 700; font-size: 19px; }
.kind-row .tag { font-size: 11px; margin-left: 6px; }
.kind-row .d { font-size: 12px; color: #cdd6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind-row .c { font-size: 11px; color: var(--muted); }
.kind-row .price { min-height: 40px; min-width: 82px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; font-size: 13px; padding: 0 10px; }
.biz-hero { padding: 16px 16px 18px; background: linear-gradient(160deg, var(--bg1), var(--bg2)); border-bottom: 1px solid var(--bc); position: relative; overflow: hidden; }
.biz-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 10%, var(--bc), transparent 55%); opacity: .5; animation: breathe 5s ease-in-out infinite; }
.biz-hero > * { position: relative; }
.biz-hero .nm { margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; text-transform: uppercase; }
.pill { padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 12px; }
.nights { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.nights > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.nights .b { width: 100%; border-radius: 5px 5px 2px 2px; animation: barup .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: bottom; }
.nights span { font-size: 10px; color: var(--muted); }
.pnl { border-radius: 16px; background: var(--panel-2); border: 1px solid var(--line); padding: 4px 14px; }
.pnl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #222b33; }
.pnl div:last-child { border-bottom: 0; font-weight: 700; }
.pnl .minus { color: var(--red); } .pnl .plus { color: var(--text); } .pnl .total { color: var(--green); } .pnl .muted { color: var(--muted); }
.squares { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sq { min-height: 66px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); text-align: left; padding: 10px 12px; }
.sq b { display: block; font-size: 14px; }
.sq span { font-size: 12px; color: var(--muted); }
.sq.go { background: var(--green); border-color: var(--green); color: #10241b; } .sq.go span { color: #1d4a33; }
.sq.bad { background: #2a1517; border-color: #6a2a2e; color: var(--red); } .sq.bad span { color: #e3a19b; }
.board { border-radius: 18px; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--bc); }
.board .h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.board .h b { font-family: var(--display); font-size: 19px; letter-spacing: .5px; text-transform: uppercase; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips-row span { padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: 12px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 52vh; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid #222b3d; color: var(--text); text-align: left; width: 100%; }
.pick-row:disabled { opacity: .45; }
.pick-row .grow { flex: 1; min-width: 0; }
.pick-row .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row .s { font-size: 12px; color: var(--muted); }
.pick-row .mini-face { width: 36px; height: 36px; border-width: 1px; flex: none; }
.search { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid #34425e; background: var(--panel); color: var(--text); padding: 0 14px; font-size: 16px; margin-top: 10px; }
.info h4 { margin: 16px 0 6px; font-family: var(--display); font-size: 17px; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.info p { margin: 0 0 8px; color: #d7dde6; line-height: 1.45; }
.info .lines div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid #222b33; font-size: 13px; }
.info .lines b { flex: 0 0 104px; color: var(--text); }
.info .lines span { color: #cdd6e6; }
.crowd { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; }
.crowd i { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.crowd i.on { background: var(--bc); box-shadow: 0 0 10px var(--bc); }

/* ---------- Cards that move (each series has its own effect) ---------- */
.wc { animation: var(--wc-anim, none); }
.wc .fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wc .fx::before, .wc .fx::after { content: ''; position: absolute; inset: 0; }
.wc .shine { --wc-sheen: .28; }

/* Classic: a light bar glides across the brushed metal */
.wc.s-classic .shine { animation-duration: 4.5s; }

/* Holo: rainbow foil that keeps rolling */
.wc.s-holo .fx { mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 120, 200, .55) 18%, rgba(120, 200, 255, .55) 32%, rgba(255, 240, 120, .55) 46%,
  rgba(120, 255, 180, .55) 60%, rgba(255, 120, 200, .55) 74%, transparent 92%);
  background-size: 260% 260%; animation: holo 5.5s ease-in-out infinite alternate; }
@keyframes holo { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Courtside: an arena spotlight drifts over the hardwood, pink trim breathes */
.wc.s-courtside .fx { background: radial-gradient(circle, rgba(255, 228, 238, .38), transparent 38%) no-repeat;
  background-size: 220% 220%; animation: spot 6s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes spot { from { background-position: 10% 0%; } to { background-position: 90% 70%; } }
.wc.s-courtside { --wc-anim: edge-pink 2.8s ease-in-out infinite; }
@keyframes edge-pink { 0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 0 rgba(232, 138, 166, 0); }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(232, 138, 166, .55); } }

/* All-Star: stars twinkle, gold glow pulses */
.wc.s-allstar .fx::before { background:
  radial-gradient(circle at 18% 22%, #fff6d6 0 1.6px, transparent 2.4px), radial-gradient(circle at 78% 40%, #ffe9a8 0 1.4px, transparent 2.2px),
  radial-gradient(circle at 42% 64%, #fff6d6 0 1.2px, transparent 2px), radial-gradient(circle at 86% 78%, #ffe9a8 0 1.6px, transparent 2.4px),
  radial-gradient(circle at 12% 84%, #fff6d6 0 1.2px, transparent 2px); animation: twinkle 2.2s ease-in-out infinite; }
.wc.s-allstar .fx::after { background:
  radial-gradient(circle at 62% 16%, #fff6d6 0 1.4px, transparent 2.2px), radial-gradient(circle at 30% 44%, #ffe9a8 0 1.6px, transparent 2.4px),
  radial-gradient(circle at 70% 58%, #fff6d6 0 1.2px, transparent 2px), radial-gradient(circle at 50% 90%, #ffe9a8 0 1.4px, transparent 2.2px);
  animation: twinkle 2.2s ease-in-out infinite 1.1s; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.wc.s-allstar { --wc-anim: glow-gold 3s ease-in-out infinite; }
@keyframes glow-gold { 0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 16px rgba(232, 196, 104, .25); }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 42px rgba(232, 196, 104, .6); } }
.wc.s-allstar .shine { --wc-sheen: .3; }

/* Signature: the autograph writes itself, then a gold light passes over */
.wc.s-signature .sig { animation: sign 7s ease-in-out infinite; }
@keyframes sign { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 35% { clip-path: inset(0 0 0 0); } 85% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.wc.s-signature .shine { background: linear-gradient(90deg, transparent, rgba(216, 180, 90, .45), transparent); }
.wc.s-signature { --wc-anim: glow-gold 3.6s ease-in-out infinite; }

/* Halloween: candlelight flickers, fog drifts */
.wc.s-halloween_edition .fx::before { background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 40, .5), transparent 60%);
  animation: flicker 2.4s steps(1) infinite; }
.wc.s-halloween_edition .fx::after { inset: auto -40% 18% -40%; height: 30%;
  background: radial-gradient(ellipse, rgba(255, 220, 190, .18), transparent 70%); filter: blur(6px); animation: fog 9s ease-in-out infinite alternate; }
@keyframes flicker { 0% { opacity: .9; } 12% { opacity: .55; } 18% { opacity: .95; } 40% { opacity: .7; } 46% { opacity: 1; } 70% { opacity: .6; } 76% { opacity: .9; } }
@keyframes fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* Fear Factor: blood drips down from the top, the card pulses like a heartbeat */
.wc.s-fear_factor_2026 .fx::before { background:
  linear-gradient(#a00000, #5a0000) 14% 0 / 5px 100% no-repeat, linear-gradient(#a00000, #5a0000) 37% 0 / 4px 100% no-repeat,
  linear-gradient(#a00000, #5a0000) 63% 0 / 6px 100% no-repeat, linear-gradient(#a00000, #5a0000) 88% 0 / 4px 100% no-repeat;
  transform-origin: top; animation: drip 5s cubic-bezier(.5, 0, .9, .6) infinite; -webkit-mask: linear-gradient(#000 0 55%, transparent 75%); mask: linear-gradient(#000 0 55%, transparent 75%); }
@keyframes drip { 0% { transform: scaleY(.05); opacity: 1; } 70% { transform: scaleY(1); opacity: .9; } 100% { transform: scaleY(1.05); opacity: 0; } }
.wc.s-fear_factor_2026 { --wc-anim: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 50, 40, .25); }
  12% { box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 44px rgba(255, 50, 40, .75); }
  26% { box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 50, 40, .55); } }

@media (prefers-reduced-motion: reduce) { .wc .fx, .wc .shine { display: none; } }

/* ---------- Home menu ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; border-radius: 16px; text-decoration: none; color: var(--text);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 18%, #1a2229), #141a22); border: 1px solid color-mix(in srgb, var(--mc) 35%, #2a3540);
  transition: transform .12s ease; min-height: 92px; }
.menu-tile:active { transform: scale(.96); }
.menu-tile .mi svg { width: 24px; height: 24px; fill: none; stroke: var(--mc); stroke-width: 2; }
.menu-tile b { font-size: 13px; }
.menu-tile small { font-size: 11px; color: var(--muted); line-height: 1.25; }

/* ---------- Earn Cash ---------- */
.earn-row { display: flex; align-items: center; gap: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.earn-row.ready { border-color: #2e6a48; background: linear-gradient(150deg, #15301f, #1a2229); }
.earn-row .grow { flex: 1; min-width: 0; }
.earn-row .t { font-weight: 700; font-size: 16px; }
.earn-row .s { font-size: 12px; color: var(--muted); }
.earn-row .btn { min-height: 44px; min-width: 92px; }
.receipts { display: flex; flex-direction: column; gap: 12px; }
.paper { background: #f6f2e8; color: #26282e; border-radius: 4px; padding: 14px 14px 16px; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px;
  position: relative; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); animation: rise .45s both;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; }
.paper-h { text-align: center; font-weight: 700; letter-spacing: 1.5px; border-bottom: 1px dashed #9a9488; padding-bottom: 8px; margin-bottom: 6px; }
.pl { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.pl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.pl i { flex: 1; border-bottom: 1px dotted #b1aa9c; transform: translateY(-3px); }
.pl b { font-weight: 600; white-space: nowrap; }
.pl b.neg { color: #b3261e; }
.pl.tot { border-top: 1px dashed #9a9488; margin-top: 6px; padding-top: 6px; font-weight: 700; }

/* ---------- Operations ---------- */
.paybar { position: relative; display: flex; height: 26px; margin-top: 12px; border-radius: 8px; background: #12171c; overflow: visible; }
.paybar i { height: 100%; border-right: 1px solid #12171c; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; }
.paybar i:first-child { border-radius: 8px 0 0 8px; }
.paybar em { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--text); font-style: normal; }
.paybar em.tax { background: var(--red); }
.paybar em span { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 2px; font-size: 10px; white-space: nowrap; color: var(--muted); }
.paybar em.tax span { color: var(--red); }
.vinny { background: linear-gradient(160deg, #2a1517, #1a2229); border-color: #6a2a2e; }

/* ---------- League ---------- */
.standings { overflow: hidden; }
.st-h, .st-r { display: grid; grid-template-columns: 28px 1fr 52px 44px 54px; gap: 6px; padding: 10px 14px; align-items: center; font-size: 13px; }
.st-h { color: var(--muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.st-r { color: var(--text); text-decoration: none; border-bottom: 1px solid #222b33; }
.st-r:last-child { border-bottom: 0; }
.st-r.me { background: rgba(111, 207, 151, .08); box-shadow: inset 3px 0 0 var(--green); }
.st-r .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crown { font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.board-row { position: relative; }
.board-row .title { line-height: 1.6; }
.board-row .end { font-size: 18px; color: var(--muted); line-height: 1.35; }
.board-row .end.lead { color: var(--green); }
.md .md-h2 { font-family: var(--display); font-size: 24px; margin: 10px 0 2px; }
.md .md-h3 { font-family: var(--display); font-size: 17px; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; margin: 14px 0 6px; }
.md .md-row { padding: 7px 0; border-bottom: 1px solid #222b33; font-size: 13px; color: #d7dde6; }
.md .md-small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.md .md-p { margin: 4px 0; font-size: 13px; color: #d7dde6; }

/* ---------- League Cash and charts ---------- */
.treasury-hero { padding: 16px; border-radius: 20px; background: linear-gradient(160deg, #1d2a22, #12171c); border: 1px solid #2a3540; }
.spark { display: block; width: 100%; height: auto; margin-top: 12px; }
.spark .draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.6s ease-out forwards .2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.levels { overflow: hidden; }
.lv { display: grid; grid-template-columns: 1.3fr .8fr .6fr 1.4fr; gap: 6px; padding: 9px 14px; font-size: 12px; border-bottom: 1px solid #222b33; color: #cdd6e6; }
.lv:last-child { border-bottom: 0; }
.lv.now { background: rgba(232, 196, 104, .1); color: var(--text); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }

/* ---------- Stock Market ---------- */
.ticker { margin: 12px 0 0; overflow: hidden; background: #10141f; border-top: 1px solid #1d2436; border-bottom: 1px solid #1d2436; }
.ticker .track { display: flex; gap: 22px; padding: 8px 0; width: max-content; animation: tick 26s linear infinite; font-size: 13px; white-space: nowrap; }
.ticker em { font-style: normal; font-weight: 600; } .ticker em.up { color: var(--green); } .ticker em.dn { color: var(--red); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stock-list { display: flex; flex-direction: column; gap: 6px; }
.stock-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--text); text-decoration: none; }
.stock-row .tri { font-family: var(--display); font-size: 18px; width: 42px; }
.stock-row .grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.stock-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-row .own { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(111, 207, 151, .15); color: var(--green); }
.stock-row .own.live { background: rgba(232, 196, 104, .15); color: var(--gold); }
.stock-row .px { font-weight: 600; }
.stock-row .ch { width: 58px; text-align: right; font-size: 12px; color: var(--muted); }
.stock-row .ch.up { color: var(--green); } .stock-row .ch.dn { color: var(--red); }

/* ---------- Casino: bets, felt, playing cards ---------- */
.bet-bar { padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid #1f2a40; }
.chips-line { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chips-line .chip { min-width: 52px; min-height: 40px; padding: 0 10px; border-radius: 20px; border: 2px dashed #4a5a7a; background: #10162a; color: #cdd6e6; font-weight: 700; font-size: 13px; transition: transform .12s; }
.chips-line .chip.on { border-style: solid; border-color: var(--gold); background: radial-gradient(circle, #3a2f12 55%, #2a210c); color: var(--gold); box-shadow: 0 0 12px rgba(232, 196, 104, .35); }
.chips-line .chip:active { transform: scale(.94); }
.safe-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(150deg, #1a1630, #120f22); border: 1px solid #3a3266; color: var(--text); text-decoration: none; }
.safe-card .grow { flex: 1; }
.safe-card b { font-family: var(--display); font-size: 17px; letter-spacing: .5px; }
.safe-card .pot { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--gold); line-height: 1; }
.dial { width: 54px; height: 54px; border-radius: 27px; border: 3px solid var(--gold); display: grid; place-items: center; flex: none; animation: turn 8s linear infinite; }
.dial svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 2; animation: turn 8s linear infinite reverse; }
@keyframes turn { to { transform: rotate(360deg); } }

.felt { padding: 16px 12px 18px; border-radius: 26px; background: radial-gradient(ellipse at 50% 35%, #1b6a45, #0e3a26 70%); border: 6px solid #3a2a1a;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.felt-label { font-size: 12px; letter-spacing: 1.5px; color: #bfe6d4; font-weight: 600; }
.felt-mid { font-family: var(--display); font-size: 13px; letter-spacing: 2px; color: #5fae84; text-align: center; }
.hand { display: flex; justify-content: center; gap: 0; min-height: 30px; flex-wrap: wrap; }
.pc { position: relative; width: 58px; height: 82px; margin: 0 -6px; border-radius: 8px; background: #fbf8f1; color: #1d1d1d; box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  animation: deal .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); }
.pc b { position: absolute; left: 6px; top: 3px; font-family: var(--display); font-size: 20px; line-height: 1; }
.pc i { position: absolute; left: 7px; top: 22px; font-style: normal; font-size: 13px; }
.pc span { position: absolute; right: 6px; bottom: 2px; font-size: 30px; line-height: 1; }
.pc.red { color: #c0262d; }
.pc.back { background: repeating-linear-gradient(45deg, #1d4e8c 0 6px, #173f73 6px 12px); border: 3px solid #fbf8f1; }
.pc.sm { width: 44px; height: 62px; margin: 0 -4px; }
.pc.sm b { font-size: 16px; } .pc.sm i { top: 18px; font-size: 11px; } .pc.sm span { font-size: 22px; }
@keyframes deal { from { transform: translate(40px, -60px) rotate(18deg); opacity: 0; } to { transform: none; opacity: 1; } }
.game-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.game-actions .btn { min-height: 54px; padding: 0 8px; font-size: 15px; }
.result-banner { margin: 12px 16px 0; padding: 12px 14px; border-radius: 14px; display: grid; grid-template-columns: 1fr auto; gap: 0 10px; animation: pop .35s ease-out;
  background: #1a2229; border: 1px solid var(--line); }
.result-banner b { font-family: var(--display); font-size: 22px; }
.result-banner span { grid-column: 1; font-size: 12px; color: var(--muted); }
.result-banner em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--display); font-weight: 700; font-size: 26px; }
.result-banner.win { border-color: #2e6a48; background: linear-gradient(150deg, #15301f, #1a2229); } .result-banner.win em { color: var(--green); }
.result-banner.lose { border-color: #6a2a2e; background: linear-gradient(150deg, #2a1517, #1a2229); } .result-banner.lose em { color: var(--red); }
.result-banner.push em { color: var(--gold); }

/* Coinflip */
.coin-felt { padding: 34px 12px 22px; perspective: 600px; }
.coin { position: relative; width: 120px; height: 120px; transform-style: preserve-3d; }
.coin .face { position: absolute; inset: 0; border-radius: 60px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 54px;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #e8c468 45%, #a8812c); color: #5a4310; border: 4px solid #c9a24b; backface-visibility: hidden; }
.coin .face.t { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #f2f2f2, #b9bec6 45%, #7d848d); color: #3a3f46; border-color: #9aa3ad; }
.coin.spin-heads { animation: flip-h 1.3s cubic-bezier(.2, .7, .3, 1) both; }
.coin.spin-tails { animation: flip-t 1.3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes flip-h { 0% { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-70px) rotateY(1080deg); } 100% { transform: translateY(0) rotateY(1800deg); } }
@keyframes flip-t { 0% { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-70px) rotateY(1080deg); } 100% { transform: translateY(0) rotateY(1980deg); } }

/* Mines */
.mines-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 20px; background: #160f28; border: 1px solid #3a2f63; }
.mines-grid .tile { aspect-ratio: 1; border-radius: 12px; border: 0; background: linear-gradient(160deg, #3a2f63, #261d45); color: transparent; font-size: 22px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); transition: transform .12s; }
.mines-grid .tile:not(:disabled):active { transform: scale(.92); }
.mines-grid .tile.safe { background: linear-gradient(160deg, #2e8f5c, #1d5e3c); color: #d6ffe8; animation: flipt .35s ease-out; }
.mines-grid .tile.boom { background: #3a1416; color: #ff8a80; }
.mines-grid .tile.boom.hit { background: #b3261e; color: #fff; animation: flipt .35s ease-out; }
@keyframes flipt { from { transform: rotateY(90deg); } to { transform: none; } }
.shake-once { animation: shake1 .45s ease-in-out; }
@keyframes shake1 { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.mines-info { display: flex; justify-content: space-between; margin: 10px 20px 0; font-size: 14px; color: var(--muted); }
.mines-info b { color: var(--text); font-family: var(--display); font-size: 20px; }

/* Roulette */
.roulette-felt { min-height: 160px; gap: 6px; }
.ball { width: 92px; height: 92px; border-radius: 46px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 40px; color: #fff;
  border: 4px solid #e8c468; animation: roll .9s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 0 24px rgba(0, 0, 0, .5); }
.ball.red { background: #b3261e; } .ball.black { background: #1d1d1d; } .ball.green { background: #1d7a46; }
@keyframes roll { from { transform: rotate(-540deg) scale(.4); } to { transform: none; } }
.wbet { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; font-size: 13px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.wbet.mine { outline: 1px solid var(--gold); }
.roulette-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.roulette-kinds .btn { flex-direction: column; gap: 0; min-height: 52px; font-size: 13px; padding: 4px; }
.roulette-kinds small { font-size: 10px; color: var(--muted); font-weight: 400; }
.numbers { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.num { min-height: 40px; border-radius: 8px; border: 0; color: #fff; font-weight: 700; }
.num.red { background: #8f1f19; } .num.black { background: #242424; } .num.green { background: #1d7a46; grid-column: 1 / -1; }

/* Poker */
.poker-felt { gap: 10px; }
.bots { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat { padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; transition: box-shadow .2s; }
.seat.turn { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(232, 196, 104, .4); }
.seat.folded { opacity: .45; }
.sn { font-weight: 700; font-size: 13px; }
.ss { font-size: 12px; color: #cfe9da; }
.dealer-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; background: #fbf8f1; color: #1d1d1d; font-size: 10px; font-weight: 800; }
.st-tag { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 6px; background: rgba(232, 196, 104, .18); color: var(--gold); }
.poker-log { margin: 10px 16px 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.poker-log span:last-child { color: var(--text); }

/* Safe */
.safe-hero { padding: 20px; border-radius: 20px; text-align: center; background: linear-gradient(160deg, #1a1630, #0e0b1c); border: 1px solid #3a3266; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dial.big { width: 86px; height: 86px; border-radius: 43px; }
.safe-hero .pot { font-family: var(--display); font-weight: 700; font-size: 42px; color: var(--gold); }
.code-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.digit { min-height: 64px; border-radius: 14px; border: 2px solid #3a3266; background: #120f22; color: var(--text); text-align: center; font-family: var(--display); font-size: 34px; }
.digit:focus { border-color: var(--gold); outline: none; }
.guess { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #222b33; font-size: 16px; }
.guess:last-child { border-bottom: 0; }
.guess code { font-family: var(--display); font-size: 20px; letter-spacing: 6px; }
.digit { min-width: 0; width: 100%; }
.safe-card b { white-space: nowrap; font-size: 15px; }
.safe-card .grow { min-width: 0; }

/* ---------- Trades ---------- */
.trade-list { display: flex; flex-direction: column; gap: 12px; }
.trade-card { padding: 14px; }
.t-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.t-status { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; background: #1f2a40; color: var(--blue); }
.t-status.s-review, .t-status.s-vote { background: #2a2116; color: var(--gold); }
.t-status.s-done { background: #12301f; color: var(--green); }
.t-status.s-declined, .t-status.s-vetoed, .t-status.s-failed, .t-status.s-expired, .t-status.s-withdrawn { background: #2a1416; color: var(--red); }
.t-names { font-family: var(--display); font-weight: 700; font-size: 20px; margin: 6px 0 10px; line-height: 1.1; }
.t-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; align-items: start; }
.t-swap { align-self: center; }
.t-swap svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 2; }
.t-side { background: var(--panel); border-radius: 14px; padding: 8px; min-width: 0; }
.t-head { font-size: 11px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; margin-bottom: 4px; }
.t-head b { color: var(--text); font-family: var(--display); font-size: 15px; }
.tc-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; min-width: 0; }
.tc-row .mini-face { width: 30px; height: 30px; flex: none; border-width: 2px; }
.tc-row .grow { min-width: 0; display: flex; flex-direction: column; }
.tc-row b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row em { display: none; }
.cash-dot { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; flex: none; background: #12301f; color: var(--green); font-weight: 800; }
.t-val { font-size: 11px; color: var(--muted); margin-top: 4px; border-top: 1px solid #222b33; padding-top: 5px; }
.t-gap { margin-top: 10px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.t-gap i { width: 8px; height: 8px; border-radius: 4px; background: var(--tg); box-shadow: 0 0 8px var(--tg); }
.t-reason { margin-top: 8px; font-size: 13px; font-style: italic; color: #cdd6e6; }
.t-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.t-acts .btn { min-height: 44px; }
.team-chips { padding-top: 10px; }
.team-chips .chip-btn { scroll-snap-align: start; text-decoration: none; display: inline-flex; align-items: center; }
.pick-list.flat { max-height: none; overflow: visible; margin-top: 0; }
.enter > .trade-bar { animation: none; }
.trade-pick .t, .trade-pick .s { display: block; }
.trade-pick { transition: border-color .15s, background .15s; }
.trade-pick.on { border-color: var(--green); background: #12261c; }
.trade-pick .tv { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); }
.trade-pick .tick { width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; border: 1px solid #34425e; font-weight: 800; flex: none; }
.trade-pick.on .tick { background: var(--green); color: #0f241a; border-color: var(--green); animation: pop .25s; }
.cash-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px dashed #34425e; }
.cash-in span { font-size: 13px; color: var(--muted); }
.cash-in input { width: 120px; min-height: 40px; border-radius: 10px; border: 1px solid #34425e; background: var(--panel); color: var(--text); text-align: right; padding: 0 10px; font-size: 16px; }
.trade-bar { position: fixed; left: 12px; right: 12px; margin: 0 auto; max-width: 560px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 20;
  padding: 10px 12px 12px; border-radius: 18px; background: rgba(20, 26, 42, .97); border: 1px solid #34425e; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.tb-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.tb-row b { color: var(--text); font-family: var(--display); font-size: 17px; }
.tb-gap { font-size: 12px; font-weight: 600; margin: 3px 0 8px; }
.tb-fee { font-size: 11px; color: var(--muted); margin: -4px 0 8px; }

/* ---------- Property Flips ---------- */
.flip-swipe { padding-bottom: 8px; }
.house-card { flex: 0 0 min(82%, 320px); scroll-snap-align: start; padding: 16px; border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 22%, #141a2a), #0f1422 70%); border: 1px solid color-mix(in srgb, var(--tc) 45%, #2a3540); }
.house-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 70px; background: var(--tc); opacity: .1; animation: breathe 5s ease-in-out infinite; }
.hc-top { display: flex; align-items: center; gap: 8px; }
.hc-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--tc); stroke-width: 2; }
.hc-tier { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--tc); }
.heat { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.heat.hot { background: #12301f; color: var(--green); } .heat.cold { background: #2a1416; color: var(--red); }
.hc-city { font-family: var(--display); font-weight: 700; font-size: 26px; margin-top: 8px; line-height: 1; }
.hc-price { font-family: var(--display); font-weight: 700; font-size: 36px; color: var(--tc); line-height: 1.1; }
.hc-likes { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.hc-likes b { color: var(--text); font-weight: 600; }
.odds-bar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; gap: 2px; margin-top: 4px; }
.odds-bar i { display: grid; place-items: center; min-width: 0; font-style: normal; font-size: 10px; font-weight: 700; transform-origin: left; animation: grow .6s cubic-bezier(.2, .8, .2, 1) both; }
.odds-bar i span { white-space: nowrap; overflow: hidden; }
.odds-bar i.dn { background: #4a1c1f; color: #f5b4ae; } .odds-bar i.up { background: #17583a; color: #c8f0da; }
.odds-bar i.even { background: #34425e; color: #cdd6e6; }
.odds-bar i.up:last-child { background: #e8c468; color: #2a210c; }
.prop-card { padding: 14px; border-left: 4px solid var(--tc); }
.pc-top { display: flex; align-items: center; gap: 10px; }
.pc-top .grow { min-width: 0; }
.pc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pc-nums div { background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.pc-nums small { display: block; font-size: 11px; color: var(--muted); }
.pc-nums b { font-family: var(--display); font-size: 19px; }
.pc-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.pc-acts:empty { display: none; }
.reno-row { flex-direction: column; align-items: stretch; }
.reno-row .grow { display: flex; flex-direction: column; gap: 4px; }
.reno-row em { font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.reno-row em.want { background: #12301f; color: var(--green); } .reno-row em.hate { background: #2a1416; color: var(--red); }

/* ---------- Vault ---------- */
.vault-hero { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #18213a, #0d1222); border: 1px solid #2d3a5a; position: relative; overflow: hidden; }
.vault-hero.gold { background: linear-gradient(160deg, #3a2f12, #15110a); border-color: #6b5a2a; animation: glow-gold 3s ease-in-out infinite; }
.vault-hero.gold .display { color: var(--gold); }
.vh-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; }
.vh-parts div { display: grid; grid-template-columns: 10px 1fr; column-gap: 6px; align-items: center; font-size: 12px; }
.vh-parts i { width: 8px; height: 8px; border-radius: 4px; }
.vh-parts span { color: var(--muted); }
.vh-parts b { grid-column: 2; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-shelf { padding-top: 6px; padding-bottom: 14px; }
.vault-slot { flex: 0 0 auto; scroll-snap-align: center; perspective: 900px; }
.vault-slot .wc { --w: 170px; }

/* ---------- Trophy Room ---------- */
.rafters { position: relative; padding: 0 0 10px; border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, #1d2740, #0b0f1a 75%); overflow: hidden; }
.rafter-beam { height: 10px; background: linear-gradient(#3a4256, #20263a); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.banners { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; padding: 0 12px; align-items: start; }
.banners.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
.banner { position: relative; padding-top: 14px; transform-origin: top center; animation: sway 6s ease-in-out infinite; }
.banner:nth-child(2) { animation-delay: -2s; } .banner:nth-child(3) { animation-delay: -4s; } .banner:nth-child(4) { animation-delay: -1s; }
.banner::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 14px; background: #6b7488; }
.bn-cloth { min-height: 150px; padding: 12px 6px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); background: repeating-linear-gradient(90deg, #1a2032 0 6px, #1d2438 6px 12px);
  border-top: 3px solid #3a4256; color: #6b7488; }
.banner.big .bn-cloth { min-height: 190px; }
.banners.four .bn-cloth { min-height: 128px; padding: 10px 3px 26px; }
.bn-top { font-size: 10px; letter-spacing: 1.5px; }
.bn-title { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .5px; }
.banner.big .bn-title { font-size: 22px; }
.bn-cloth { container-type: inline-size; }
.bn-title { font-size: min(15px, 14cqw) !important; }
.banner.big .bn-title { font-size: min(22px, 16cqw) !important; }
.banners.four .bn-title { font-size: min(13px, 12cqw) !important; letter-spacing: 0; }
.banners.four .bn-top { font-size: 9px; letter-spacing: .5px; }
.bn-open { font-size: 10px; letter-spacing: 1px; margin-top: auto; padding: 2px 6px; border: 1px dashed #3a4256; border-radius: 6px; }
.banner.won .bn-cloth { background: linear-gradient(180deg, #7a1d22, #4a1015); color: #f2eee4; border-top-color: var(--gold); }
.banner.won .bn-top { color: var(--gold); }
.banner.won.big .bn-cloth { background: linear-gradient(180deg, #2a5a9a, #13305a); }
.bn-team { font-weight: 700; font-size: 12px; color: var(--gold); margin-top: auto; }
.bn-detail { font-size: 10px; opacity: .8; }
@keyframes sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }

/* ---------- Events ---------- */
.event-hero { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #3a2f12, #1a1508 70%); border: 1px solid #6b5a2a; }
.event-hero .kicker { font-size: 12px; letter-spacing: 1.5px; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.eh-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.eh-nums div { background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 8px 10px; }
.eh-nums small { display: block; font-size: 11px; color: #d9c79a; }
.eh-nums b { font-family: var(--display); font-size: 22px; }
.calendar { display: flex; flex-direction: column; gap: 6px; }
.cal-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--panel-2); border-left: 3px solid var(--green); }
.cal-row.paid { border-left-color: var(--gold); }
.cal-row .grow { min-width: 0; }
.cal-row .title { font-weight: 600; font-size: 14px; }
.cal-row .sub { font-size: 12px; color: var(--muted); }
.cal-day { width: 58px; flex: none; text-align: center; background: var(--panel); border-radius: 10px; padding: 4px 0; }
.cal-day b { display: block; font-family: var(--display); font-size: 22px; line-height: 1; }
.cal-day small { white-space: nowrap; font-size: 9px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.row .tri, .rows .tri { font-family: var(--display); font-size: 17px; width: 40px; flex: none; color: var(--muted); }

/* ---------- Banners (one frame, many moods) ---------- */
.dbn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 92px;
  padding: 12px 14px; border-radius: 20px; background: var(--bbg); border: 1px solid var(--bb); color: var(--text); text-decoration: none; text-align: left; font: inherit; }
.dbn.gold { animation: glow-gold 3s ease-in-out infinite; }
.dbn-shine, .jp-card .dbn-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 56px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  animation: dbn-sweep 4.5s ease-in-out infinite; pointer-events: none; }
.dbn-orb { position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 85px; background: var(--bc); opacity: .2; animation: breathe 5s ease-in-out infinite; pointer-events: none; }
.dbn-text { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 1px; }
.dbn-top { display: flex; align-items: center; gap: 8px; }
.dbn-tag { padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .32); color: var(--bc); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; white-space: nowrap; }
.dbn-tag i { font-style: normal; }
.dbn-when { font-size: 11px; color: var(--bs); white-space: nowrap; }
.dbn-title { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.05; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbn.gold .dbn-title { color: var(--gold); }
.dbn-sub { font-size: 12px; line-height: 1.3; color: var(--bs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dbn-icon { position: relative; width: 56px; height: 56px; flex: none; border-radius: 16px; background: rgba(0, 0, 0, .28); border: 1px solid var(--bb); display: grid; place-items: center; }
.dbn-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--bc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; }
.dbn-cta { position: relative; flex: none; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--bc); color: #0b0f1a; font-weight: 600; display: flex; align-items: center; }
.fx-bob { animation: dbn-bob 1.4s ease-in-out infinite; } .fx-spin { animation: spin 6s linear infinite; }
.fx-swing { animation: dbn-swing 2.2s ease-in-out infinite; } .fx-rise { animation: dbn-rise 2.6s ease-in-out infinite; }
.blink { animation: dbn-blink 1.1s infinite; }
@keyframes dbn-sweep { 0% { transform: translateX(-160%) skewX(-20deg); } 60%, 100% { transform: translateX(900%) skewX(-20deg); } }
@keyframes dbn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes dbn-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes dbn-rise { 0% { transform: translateY(6px); opacity: 0; } 20%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes dbn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bn-wrap { margin: 12px 16px 0; }
.bn-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 20px; }
.bn-row::-webkit-scrollbar { display: none; }
.bn-cell { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.bn-dots { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
.bn-dots i { width: 5px; height: 5px; border-radius: 3px; background: #34425e; transition: width .2s, background .2s; }
.bn-dots i.on { width: 14px; background: var(--text); }
.lt { display: flex; align-items: center; height: 32px; overflow: hidden; background: #10213a; border-bottom: 1px solid #23406a; }
.lt-live { flex: none; height: 100%; padding: 0 10px; display: flex; align-items: center; gap: 5px; background: #b3261e; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 1.4px; }
.lt-live i { font-style: normal; }
.lt-win { flex: 1; overflow: hidden; }
.lt-run { display: flex; gap: 28px; width: max-content; white-space: nowrap; padding-left: 14px; font-size: 12px; color: #cdd6e6; animation: tick 30s linear infinite; }
.pop-banner { position: fixed; z-index: 60; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 560px; margin: 0 auto;
  animation: pop-in .5s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); border-radius: 20px; }
.pop-banner.out { animation: pop-out .5s ease-in both; }
@keyframes pop-in { from { transform: translateY(-140%); } to { transform: none; } }
@keyframes pop-out { to { transform: translateY(-140%); opacity: 0; } }
.grid-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shortcuts a { min-height: 64px; border-radius: 16px; background: var(--panel); border: 1px solid #222b3d; color: var(--text); text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; transition: transform .12s; }
.shortcuts a:active { transform: scale(.95); }
.shortcuts .mi svg, .ev-item .mi svg { width: 22px; height: 22px; fill: none; stroke: var(--mc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ev-h { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); margin: 14px 4px 6px; }
.ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ev-item { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 14px; background: #1a2130; border: 1px solid #252f43; color: var(--text); text-decoration: none; }
.ev-item > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.ev-item b { font-size: 13px; } .ev-item small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.me { box-shadow: inset 3px 0 0 var(--gold); }

/* ---------- Dynasty Downs ---------- */
.silk { display: inline-grid; place-items: center; width: 30px; height: 34px; flex: none; border-radius: 7px; font-family: var(--display); font-weight: 700; font-size: 20px; }
.silk.xs { width: 22px; height: 24px; border-radius: 5px; font-size: 15px; }
.jp-card { position: relative; overflow: hidden; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #3a2f12, #15110a); border: 1px solid #6b5a2a; animation: glow-gold 3s ease-in-out infinite; }
.jp-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jp-tag { font-size: 11px; letter-spacing: 1.5px; color: var(--gold); font-weight: 600; }
.jp-pot { position: relative; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--gold); }
.jp-mine { font-size: 12px; color: #d9c79a; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.jp-tix { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px dashed #8a7536; }
.jp-tix em { font-style: normal; font-weight: 600; color: var(--gold); margin-left: 3px; }
.track { padding: 0; border-radius: 20px; overflow: hidden; border: 4px solid #3a2a1a; background: #6b4a2c; position: relative; }
.track .rail { height: 12px; background: repeating-linear-gradient(90deg, #f2eee4 0 6px, #c9c2b0 6px 48px); }
.track.running .rail, .track.running .lane { animation: rail .3s linear infinite; }
.finish-line { position: absolute; top: 12px; bottom: 12px; right: 30px; width: 8px; background: repeating-linear-gradient(0deg, #f2eee4 0 8px, #12171c 8px 16px); opacity: .9; }
.lane { height: 40px; position: relative; border-bottom: 1px solid rgba(0, 0, 0, .18); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 24px, rgba(0, 0, 0, .04) 24px 48px); }
.lane-n { position: absolute; left: 6px; top: 11px; font-family: var(--display); font-weight: 700; font-size: 13px; color: rgba(255, 255, 255, .4); }
.runner { position: absolute; left: 12px; top: -6px; will-change: transform; }
.runner .hs { width: 62px; display: block; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
/* the gallop: 6 frames, one visible at a time; standing horses show frame 1 */
.hs .hf { visibility: hidden; }
.hs .hf0 { visibility: visible; }
.runner.go .hs .hf { visibility: hidden; animation: hf .54s steps(1) infinite; }
.runner.go .hs .hf0 { animation-delay: var(--off, 0s); }
.runner.go .hs .hf1 { animation-delay: calc(var(--off, 0s) - .09s); }
.runner.go .hs .hf2 { animation-delay: calc(var(--off, 0s) - .18s); }
.runner.go .hs .hf3 { animation-delay: calc(var(--off, 0s) - .27s); }
.runner.go .hs .hf4 { animation-delay: calc(var(--off, 0s) - .36s); }
.runner.go .hs .hf5 { animation-delay: calc(var(--off, 0s) - .45s); }
@keyframes hf { 0% { visibility: visible; } 16.66% { visibility: hidden; } 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .runner.go .hs .hf { animation: none; } .runner.go .hs .hf0 { visibility: visible; } }
@keyframes rail { from { background-position: 0 0; } to { background-position: -48px 0; } }
.track.open .runner .hs { animation: dbn-bob 1.6s ease-in-out infinite; }
.race-status { margin: 10px 16px 0; text-align: center; font-family: var(--display); font-size: 17px; letter-spacing: 1.5px; color: var(--muted); }
.race-status.hot { color: var(--gold); }
.run-order { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ro { border-radius: 12px; padding: 6px 8px; background: var(--panel); border: 1px solid #222b3d; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ro.mine { border-color: var(--green); background: #12261c; }
.ro small { font-size: 10px; color: var(--muted); }
.ro span { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; align-items: end; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: var(--panel); border: 1px solid #222b3d; text-align: center; animation: pop .4s both; }
.pod.p1 { order: 2; padding: 16px 6px; border-color: var(--gold); background: #2a210c; }
.pod.p2 { order: 1; } .pod.p3 { order: 3; }
.pod b { font-family: var(--display); font-size: 18px; } .pod span { font-size: 11px; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 5px; }
.horse-row { min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 14px; border: 1px solid #222b3d; background: var(--panel); color: var(--text); text-align: left; font: inherit; }
.horse-row:disabled { opacity: .75; }
.horse-row.on { border-color: var(--green); background: #12261c; }
.horse-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.horse-row b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.horse-row small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.horse-row .odds { font-family: var(--display); font-weight: 700; font-size: 22px; }
.horse-row.on .odds { color: var(--green); }
.placed { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: #2a210c; color: var(--gold); }
.tk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tk-slot { min-height: 74px; border-radius: 14px; border: 1px dashed #4a5a7a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; text-align: center; }
.tk-slot.set { border-style: solid; border-color: var(--gold); background: #1a1508; }
.tk-slot small { font-size: 10px; color: var(--muted); letter-spacing: 1px; } .tk-slot span { font-size: 11px; font-weight: 600; }
.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tk-h { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 12px; border: 1px solid #222b3d; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; text-align: left; }
.tk-h.on { border-color: var(--gold); background: #2a210c; }
.tk-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tk-quote div { border-radius: 14px; padding: 10px 12px; background: #1a1508; border: 1px solid #6b5a2a; display: flex; flex-direction: column; }
.tk-quote small { font-size: 11px; color: #d9c79a; } .tk-quote b { font-family: var(--display); font-size: 24px; color: var(--gold); } .tk-quote span { font-size: 11px; color: #d9c79a; }

/* ---------- Crash ---------- */
.crash-hist { display: flex; gap: 5px; overflow: hidden; margin: 10px 16px 0; }
.crash-hist span { flex: none; padding: 4px 8px; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; }
.crash-hist .dn { background: #2a1416; color: var(--red); } .crash-hist .up { background: #12301f; color: var(--green); } .crash-hist .gold { background: #3a2f12; color: var(--gold); }
.sky { position: relative; height: 260px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 80% 10%, #2c1f4a, #120d22 70%); border: 1px solid #4a3a7a; }
.sky-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(185, 163, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(185, 163, 240, .07) 1px, transparent 1px); background-size: 40px 40px; }
.sky.flying .sky-grid { animation: sky-move 2s linear infinite; }
@keyframes sky-move { from { background-position: 0 0; } to { background-position: -40px 40px; } }
.sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-mid { position: absolute; left: 0; right: 0; top: 40px; text-align: center; }
.crash-mult { font-family: var(--display); font-weight: 700; font-size: 76px; line-height: 1; text-shadow: 0 0 30px rgba(185, 163, 240, .55); }
.crash-mult.flying { animation: pop 1s ease-in-out infinite; }
.crash-mult.crashed { color: var(--red); text-shadow: 0 0 30px rgba(242, 139, 130, .5); }
.crash-sub { font-size: 12px; letter-spacing: 1.5px; color: #cfc3f2; }
.sky.boom { animation: shake .5s; }
.crash-ctl { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.auto-box { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border-radius: 14px; background: var(--panel); border: 1px solid #34425e; }
.auto-box span { font-size: 11px; color: var(--muted); }
.auto-box input { width: 100%; border: 0; background: transparent; color: var(--text); font-family: var(--display); font-weight: 700; font-size: 20px; padding: 0; min-width: 0; }
.crash-go { min-height: 62px; flex-direction: column; display: flex; align-items: center; justify-content: center; gap: 1px; }
.crash-go b { font-size: 17px; } .crash-go small { font-size: 11px; font-weight: 500; opacity: .8; }

/* =====================================================================
   PC: sidebar, top bar and wide layouts (phones are untouched below 1024px)
   ===================================================================== */
.pc-cols, .pc-col { display: contents; }
.pc-only, .side, .pctop { display: none; }
@media (min-width: 1024px) {
  body.wide .tabs, body.wide .phone-only, body.wide .app > .lt, body.wide .home-top { display: none !important; }
  body.wide .pc-only { display: block; }
  body.wide .side { display: flex; flex-direction: column; position: fixed; z-index: 26; left: 0; top: 0; bottom: 0; width: 232px; padding: 18px 12px 12px;
    background: #080b13; border-right: 1px solid #1d2436; overflow-y: auto; scrollbar-width: thin; }
  .side-logo { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: 1px; color: var(--text); text-decoration: none; padding: 0 10px 12px; }
  .side-logo span { color: var(--orange); }
  .side-main, .side-group { display: flex; flex-direction: column; gap: 2px; }
  .side-main a { min-height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 12px; color: #a3b1c2; text-decoration: none; font-weight: 600; transition: background .15s, color .15s; }
  .side-main a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
  .side-main a:hover, .side-group a:hover { background: #121826; color: var(--text); }
  .side-main a.on { background: #16261f; color: var(--text); box-shadow: inset 3px 0 0 var(--green); }
  .side-main a.on svg { stroke: var(--green); }
  .side-h { font-size: 10px; letter-spacing: 1.6px; color: #5d6b80; padding: 14px 12px 4px; }
  .side-group a { min-height: 32px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #a3b1c2; text-decoration: none; font-size: 13px; transition: background .15s, color .15s; }
  .side-group a.on { background: #1a1630; color: var(--text); }
  .side-group .mi svg { width: 16px; height: 16px; fill: none; stroke: var(--mc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .side-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 14px; background: #10141f; text-align: left; flex: none; margin-top: 16px; }
  .side-me .badge { width: 36px; height: 36px; flex: none; font-size: 13px; }
  .side-me b { display: block; font-size: 13px; } .side-me small { font-size: 11px; color: var(--muted); }
  body.wide .pctop { display: flex; align-items: center; gap: 14px; position: fixed; z-index: 24; left: 232px; right: 0; top: 0; height: 56px; padding: 0 24px 0 20px;
    background: rgba(11, 15, 26, .94); backdrop-filter: blur(8px); border-bottom: 1px solid #1d2436; }
  .pt-ticker { flex: 1; min-width: 0; }
  .pt-ticker .lt { background: transparent; border: 0; height: 32px; }
  .pt-ticker .lt-live { border-radius: 8px; }
  .pt-money { display: flex; gap: 10px; }
  .pt-money div { padding: 5px 14px; border-radius: 12px; background: var(--panel); border: 1px solid #222b3d; }
  .pt-money small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1px; }
  .pt-money b { font-family: var(--display); font-size: 18px; line-height: 1; }
  body.wide .app { max-width: 1340px; margin: 0 0 0 232px; padding: 72px 28px 48px; }
  body.wide .app.narrow > * { max-width: 880px; margin-left: auto !important; margin-right: auto !important; }
  body.wide .app.narrow > .top { padding-left: 4px; padding-right: 4px; }
  body.wide .pc-cols { display: grid; gap: 24px; align-items: start; }
  body.wide .cols-3 { grid-template-columns: 360px minmax(0, 1fr) 330px; }
  body.wide .cols-2 { grid-template-columns: minmax(0, 1fr) 360px; }
  body.wide .cols-2w { grid-template-columns: minmax(0, 1fr) 500px; }
  body.wide .cols-2e { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.wide .pc-col { display: flex; flex-direction: column; min-width: 0; }
  body.wide .pc-col > .section, body.wide .pc-col > .bn-wrap, body.wide .pc-col > .pc-only > .section, body.wide .pc-col > .note { margin: 0 0 14px; }
  body.wide .pc-col > .section-head, body.wide .pc-col > .pc-only > .section-head { margin: 6px 4px 10px; }
  body.wide .pc-col > .top { padding: 0 4px 14px; }
  .feed-list { display: flex; flex-direction: column; gap: 12px; }
  /* tables, shelf, bench: grids instead of swiping */
  body.wide .tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: visible; padding: 0; margin: 0 0 14px; }
  body.wide .tables .table-card { flex: none; width: auto; height: 190px; }
  body.wide .tables .table-card .nm { font-size: 26px; }
  body.wide .tables .table-card .d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.wide .tables .table-card .bottom > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; }
  body.wide .top .money { display: none; }
  body.wide .shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; padding: 0; }
  body.wide .shelf .shelf-pack { flex: none; width: auto; padding: 12px 8px; border-radius: 18px; background: #141a2a; border: 2px solid #222b3d; }
  body.wide .shelf .shelf-pack.on { border-color: var(--green); background: #16261f; }
  body.wide .pack-stage { min-height: 520px; display: flex; flex-direction: column; justify-content: center; border-radius: 24px; background: radial-gradient(ellipse at 50% 40%, #222833, #0b0f1a 72%); }
  body.wide .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* racing and crash get room */
  body.wide .lane { height: 58px; }
  body.wide .lane-n { top: 19px; font-size: 15px; }
  body.wide .runner { top: -10px; }
  body.wide .runner .hs { width: 100px; }
  body.wide .sky { height: 430px; }
  body.wide .crash-mult { font-size: 110px; }
  body.wide .crash-ctl { grid-template-columns: 1fr; }
  /* sheets become a centered window */
  body.wide .sheet-wrap { align-items: center; padding-left: 232px; }
  body.wide .sheet { max-width: 540px; border-radius: 22px; max-height: 84vh; }
  body.wide .trade-bar { left: 256px; right: 24px; bottom: 20px; }
  body.wide .slip-bar { left: calc(50% + 116px); bottom: 20px; }
  body.wide .pop-banner { left: auto; right: 24px; top: 70px; width: 460px; margin: 0; }
  body.wide .toast { left: calc(50% + 116px); }
  /* mouse: things lift a little when you point at them */
  body.wide .table-card, body.wide .dbn, body.wide .menu-tile, body.wide .shortcuts a, body.wide .shelf-pack, body.wide .ev-item, body.wide .house-card { transition: transform .15s, box-shadow .15s, filter .15s; }
  body.wide .table-card:hover, body.wide .dbn:hover, body.wide .menu-tile:hover, body.wide .shortcuts a:hover, body.wide .shelf-pack:hover, body.wide .ev-item:hover, body.wide .house-card:hover {
    transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
  body.wide .btn:not(:disabled):hover { filter: brightness(1.1); }
  body.wide .row:hover, body.wide .horse-row:not(:disabled):hover, body.wide .pick-row:not(:disabled):hover, body.wide .starter:hover { filter: brightness(1.15); }
}

/* Earn Cash shortcut: green when something is ready to claim, red when everything is claimed */
.shortcuts a.earn-ready { background: #12301f; border-color: #2e6a48; color: #c8f0da; }
.shortcuts a.earn-done { background: #2a1416; border-color: #6a2a2e; color: #f5b4ae; }
.shortcuts a small { font-size: 10px; font-weight: 500; opacity: .85; margin-top: -2px; }

/* No scroll bars anywhere (the page, the sidebar, sheets, lists): scroll with the mouse wheel, trackpad or finger */
html, body, .side, .sheet, .pick-list, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; }