/* The Super Wheel (/wheel), its tickets in the shop and its banner on the casino lobby. Page chrome uses
   app.css tokens; the wheel itself sits on a dark felt stage that looks the same in light and dark mode. */

/* ----- header and tab bar */
.hlink.wheel-link { color: #b42318; font-weight: 600; }
.hlink.wheel-link:hover { color: #8f1d14; }
.hlink.wheel-link svg { stroke-width: 1.6; }
.hcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
:root[data-theme="dark"] .hlink.wheel-link, :root:not([data-theme="light"]) .hlink.wheel-link { color: #f87171; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hlink.wheel-link { color: #b42318; } }
.tabbar a[data-nav="wheel"] { color: #c2410c; }
.tabbar a[data-nav="wheel"] svg { stroke: #c2410c; }
.tabbar a[data-nav="wheel"].on { color: #f97316; }
.tabbar a[data-nav="wheel"].on svg { stroke: #f97316; }

/* ----- page */
.wh-head { margin-bottom: 18px; }
.wh-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wh-pill { gap: 6px; }
.wh-pill svg { width: 18px; height: 18px; color: #b42318; }
.wh-pill small { color: var(--text-2); font-weight: 500; }
.wh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }

/* the stage: dark felt, gold rim */
.wh-stage { padding: 26px 20px 16px; display: grid; justify-items: center; gap: 16px; background: radial-gradient(ellipse 80% 60% at 50% 35%, #163126, #0b1a14 70%, #081109); border-color: #1f3a2f; color: #d1dbd5; }
.wh-wheel-box { position: relative; width: min(470px, 100%); aspect-ratio: 1; margin-top: 8px; }
.wh-wheel { width: 100%; height: 100%; border-radius: 50%; will-change: transform; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.wh-wheel svg { display: block; width: 100%; height: 100%; }
.wh-pin { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 32px solid #f6e3a1; filter: drop-shadow(0 2px 1px #7a5a12) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); z-index: 3; }
.wh-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; border: 4px solid #f6e3a1; background: radial-gradient(circle at 38% 30%, #fff7d6, #e3b85a 55%, #9a6a12); color: #2a1d05; font: 800 16px/1.05 var(--font); letter-spacing: .08em; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; z-index: 3; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6); transition: transform .18s var(--spring), filter .18s; }
.wh-hub small { font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }
.wh-hub:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); }
.wh-hub:active:not(:disabled) { transform: translate(-50%, -50%) scale(.97); }
.wh-hub:disabled { cursor: default; filter: saturate(.5) brightness(.85); }
.wh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 28px; }
.wh-recent { display: flex; gap: 6px; overflow: hidden; min-width: 0; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.wh-recent .muted { color: #8fa39a; }
.wh-chip { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #d1dbd5; font-size: 12.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wh-chip.up { background: rgba(52, 211, 153, .16); color: #a7f3d0; }
.wh-chip.big { background: rgba(246, 227, 161, .2); color: #fde68a; }
.wh-mute { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #d1dbd5; display: grid; place-items: center; }
.wh-mute svg { width: 18px; height: 18px; }
.wh-mute:hover { background: rgba(255, 255, 255, .12); }

/* the side column */
.wh-side { display: grid; gap: 16px; }
.wh-side .card { padding: 16px 18px; }
.wh-side h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.wh-tickets-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wh-tickets .n { font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.wh-tickets-acts { display: grid; gap: 8px; }
.wh-tickets-acts .btn { height: 36px; }
.wh-balance { display: flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; }
.wh-balance .coin { width: 14px; height: 14px; }
.wh-biggest { display: grid; gap: 1px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.wh-biggest b { font-size: 15px; }
.wh-biggest a { color: var(--blue); font-weight: 500; }
.wh-odd { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.wh-odd:first-of-type { border-top: 0; }
.wh-odd small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.35; margin-top: 1px; }
.wh-odd b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wh-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.small { font-size: 12.5px; line-height: 1.45; }
.wh-odds .small { margin-top: 10px; }
.wh-ex-list { display: grid; gap: 8px; }
.wh-ex-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tier name owners" "tier sub owners"; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg-soft); font-size: 13.5px; }
.wh-ex-item .tier { grid-area: tier; }
.wh-ex-item b { grid-area: name; font-weight: 600; }
.wh-ex-item small { grid-area: sub; color: var(--text-3); font-size: 12px; }
.wh-ex-item .owners { grid-area: owners; display: flex; }
.wh-ex-item .owners .av { width: 22px; height: 22px; font-size: 12px; margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-soft); }
.wh-ex-item.own { box-shadow: inset 0 0 0 1px var(--yes); }

/* the live list, under the wheel */
.wh-main { display: grid; gap: 20px; min-width: 0; }
.wh-live { margin-top: 4px; }
.wh-prize { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.wh-prize small { color: var(--text-3); font-weight: 500; }
.wh-tbl tr.big td:first-child b { color: #a96a00; }
:root[data-theme="dark"] .wh-tbl tr.big td:first-child b { color: #fde68a; }

/* buying and results */
.wh-buy h3, .wh-result .big { letter-spacing: -.02em; }
.wh-buy p { margin: 6px 0 14px; }
.wh-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wh-pack { display: grid; gap: 2px; justify-items: center; padding: 14px 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); transition: border-color var(--dur), background var(--dur), transform .15s var(--spring); }
.wh-pack:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-1px); }
.wh-pack:disabled { opacity: .45; cursor: default; }
.wh-pack-n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.wh-pack-l { font-size: 12.5px; color: var(--text-2); }
.wh-pack-p { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.wh-pack-p .coin { width: 14px; height: 14px; }
.wh-buy .small { margin: 14px 0 0; }
.wh-result { text-align: center; }
.wh-result .big { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.wh-result.up .big { color: var(--yes-ink); }
.wh-result.gold .big { background-image: linear-gradient(135deg, #b8862e, #e3b85a 40%, #b8862e 70%, #f6e3a1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.wh-result-pic { display: flex; justify-content: center; margin-top: 14px; }

/* ----- the shop */
.wh-shop { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 20px; margin-top: 18px; background: radial-gradient(ellipse 70% 80% at 15% 50%, #163126, #0b1a14 70%, #081109); border-color: #1f3a2f; color: #e5ebe8; }
.wh-shop.cs-wheel { color: #e5ebe8; }
.wh-shop.cs-wheel:hover { border-color: #2d5a47; }
.wh-shop .wh-mini { width: 150px; height: 150px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); animation: wh-turn 40s linear infinite; }
.wh-shop .wh-mini svg { display: block; width: 100%; height: 100%; }
@keyframes wh-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wh-shop .wh-mini { animation: none; } }
.wh-shop .kick { color: #fde68a; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wh-shop h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 4px; }
.wh-shop p { color: #b7c6be; font-size: 14px; line-height: 1.5; max-width: 640px; }
.wh-shop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wh-shop-acts .btn.pack { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); }
.wh-shop-acts .btn.pack:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.wh-shop-acts .btn.pack b { margin-right: 4px; }
.wh-shop-acts .btn.pack .coin { width: 14px; height: 14px; margin-left: 5px; }
.wh-shop-acts .have { color: #a7f3d0; font-size: 13px; font-weight: 600; margin-left: 4px; }
.wh-shop-acts .have a { color: #fde68a; }
.wh-shop-acts .btn.pack:disabled { opacity: .5; }
.si .sw.wh-ticket-sw { background: #0b1a14; }
.wh-tix { position: relative; width: 150px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #b8862e, #f3d27a 35%, #c79a3b 62%, #f6e3a1 85%, #b8862e); color: #2a1d05; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 12px 0 14px; font-weight: 800; letter-spacing: .04em; font-size: 11px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px), radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px); mask-composite: intersect; -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px), radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px); -webkit-mask-composite: source-in; }
.wh-tix span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; opacity: .8; }
.wh-tix b { font-size: 26px; letter-spacing: -.03em; border-left: 1.5px dashed rgba(42, 29, 5, .45); padding-left: 10px; line-height: 1; }

@media (max-width: 980px) {
  .wh-layout { grid-template-columns: minmax(0, 1fr); }
  .wh-shop { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .wh-shop .wh-mini { width: 110px; height: 110px; }
}
@media (max-width: 560px) {
  .wh-stage { padding: 20px 10px 12px; }
  .wh-hub { width: 76px; height: 76px; font-size: 13px; }
  .wh-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wh-shop { grid-template-columns: minmax(0, 1fr); }
  .wh-shop .wh-mini { display: none; }
}