/* loaded before the app: dark from the first paint, no white flash */
html { background: #05070d; color: #eef2f8; color-scheme: dark; scrollbar-gutter: stable; }

/* ---------- page skeletons ----------
   The <template data-path> blocks in index.html, picked by URL before the first paint, then reused by the app while a page
   or its data loads (src/ui/Skeleton.tsx). Each one mirrors its page's real boxes (same grid, same sizes, same breakpoints),
   so the swap to the real page moves nothing. A page's layout changes: update its skeleton here too. */
.sk { position: relative; overflow: hidden; display: block; border-radius: 0.8rem; background: #101828; }
/* the light band moves on the compositor (an animated background-position repaints every frame) */
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, #ffffff0f 50%, transparent 80%); transform: translateX(-100%); animation: sk 1.4s ease-in-out infinite; }
@keyframes sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; opacity: 0; } }
/* text: a bar per line of --lh, the box keeps the full line height (.sk-t: one line, the box's own height) */
.sk-p, .sk-t { --lh: 1.5rem; border-radius: 0.3rem; -webkit-mask: repeating-linear-gradient(transparent 0 22%, #000 22% 78%, transparent 78% 100%) 0 0 / 100% var(--lh); mask: repeating-linear-gradient(transparent 0 22%, #000 22% 78%, transparent 78% 100%) 0 0 / 100% var(--lh); }
.sk-t { --lh: 100%; }
.sk-panel { border-radius: 1rem; background: #111a2c; box-shadow: inset 0 0 0 1px #1f2b44; }
/* on a raised panel (the jackpot tray): a step lighter */
.sk-panel .sk, .skj-filters .sk, .skj-pick .sk, .sk.skj-guest { background: #18233a; }
.sk-pill { border-radius: 999px; }
/* every real page is taller than the screen: the footer stays below the fold until the page lands */
.sk-page { width: 100%; min-height: 100vh; }
.sk-card { aspect-ratio: 600 / 825; border-radius: 4.5% / 3.3%; }
.sk-slab { aspect-ratio: 0.62; border-radius: 5% / 3.1%; }

/* the docked chat (src/ui/Chat.tsx opens it from 1280px): its column is held from the first paint, so the page never narrows
   under the reader when it mounts. html.cj-chat: the public site only (set by the inline script), not the admin */
@media (min-width: 1280px) {
  .cj-chat body { --chat-w: 340px; padding-right: var(--chat-w); } /* Chat.tsx overrides --chat-w inline (0px once closed) */
  .cj-chat body:not(:has(.ck-panel, .ck-tab))::after { content: ""; position: fixed; z-index: 39; top: 0; right: 0; bottom: 0; width: 340px; background: #0a0f1a; border-left: 1px solid #1f2b44; }
}

/* "Just pulled" strip (src/ui/livefeed.css) */
.sk-lf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 1.25rem 0; border-block: 1px solid #1f2b44; }
.sk-lf-h { width: 6.25rem; height: 18px; border-radius: 0.3rem; }
.sk-home .sk-lf-h { height: 14px; }
.sk-lf-rows { display: flex; gap: 0.6rem; overflow: hidden; padding: 0.15rem 0; }
.sk-lf-rows .sk { flex: none; width: 17.5rem; height: 72px; }
.sk-lf-e { width: 17rem; max-width: 100%; height: 21px; border-radius: 0.3rem; }
@media (max-width: 900px) { .sk-lf { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1rem 0; } }

/* a pack: foil aspect, the "Tear open" pill under it (src/ui/pack.css) */
.sk-pk { position: relative; aspect-ratio: 3 / 5; }
.sk-pk > .sk:first-child { height: 100%; border-radius: 0.6rem; }
.sk-tear { position: absolute; left: 50%; top: calc(100% + 1.6rem); translate: -50% 0; width: 119px; height: 34px; border-radius: 999px; }

/* home (src/home.css) */
.sk-home { max-width: 78rem; overflow-x: clip; }
.skh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "t s" "i s"; column-gap: 3rem; align-content: center; min-height: min(48rem, calc(100dvh - 72px)); padding: 2rem 0 3rem; }
.skh-h1 { grid-area: t; align-self: end; width: 92%; height: calc(3 * 0.86 * clamp(3.6rem, 7vw, 7.2rem)); }
.skh-stage { grid-area: s; display: grid; place-items: center; padding: 1rem 0 5rem; }
.skh-stage .sk-pk { width: clamp(15rem, 22vw, 19rem); }
.skh-info { grid-area: i; align-self: start; min-height: 15rem; padding-top: 1.5rem; }
.skh-lede { --lh: 1.8rem; max-width: 28rem; height: calc(3 * var(--lh)); }
.skh-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2.25rem; }
.skh-btn { width: 218px; height: 56px; }
.skh-link { width: 185px; height: 21px; border-radius: 0.3rem; }
@media (max-width: 900px) {
  .skh-hero { --avail: calc(100svh - 64px - var(--tabbar-h, 61px)); grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "s" "i"; min-height: 0; padding: 1rem 0 1.5rem; }
  .skh-h1 { height: calc(2 * 0.88 * clamp(2.5rem, 12vw, 3.6rem)); }
  .skh-stage { padding: 0.75rem 0 4.5rem; }
  .skh-stage .sk-pk { width: clamp(9.5rem, calc((var(--avail) - 21rem) / 1.667), min(56vw, 15rem)); }
  .skh-info { min-height: 0; padding-top: 0.25rem; }
  .skh-lede { --lh: 1.5rem; max-width: 34rem; height: calc(4 * var(--lh)); }
  .skh-ctas { margin-top: 1.25rem; }
}

/* packs shelf + pack page (src/packs.css) */
.sk-packs { max-width: 76rem; overflow-x: clip; container-type: inline-size; }
.skp-top { padding: 2.5rem 0 1.5rem; }
.skp-h1 { width: min(39rem, 92%); height: calc(2 * 0.86 * clamp(3.2rem, 6.6vw, 6.2rem)); }
.skp-lede { --lh: 1.65rem; max-width: 30rem; height: calc(2 * var(--lh)); margin-top: 1rem; }
.skp-online { width: 126px; height: 28px; margin-top: 1rem; }
.sk-packs > .sk-lf { margin-bottom: 2.5rem; }
.skp-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3cqw, 2.5rem); padding-top: 2.5rem; }
.skp-slot { display: grid; justify-items: center; gap: 0.25rem; align-content: start; }
.skp-slot .sk-pk { width: min(88%, 12rem); margin-bottom: calc(2rem + 0.25rem); }
.skp-name { width: 5rem; height: 26px; border-radius: 0.3rem; }
.skp-price { width: 3.5rem; height: 30px; border-radius: 0.3rem; }
@media (max-width: 900px) {
  .skp-top { padding: 1.5rem 0 1rem; }
  .skp-h1 { height: calc(2 * 0.9 * clamp(2.8rem, 6.2vw, 5.4rem)); }
  .skp-lede { height: calc(3 * var(--lh)); }
  .skp-shelf { gap: 0.75rem; padding-top: 2rem; }
  .skp-slot .sk-pk { margin-bottom: calc(1.5rem + 0.25rem); }
}
.skp-back { width: 80px; height: 18px; margin-top: 1.5rem; border-radius: 0.3rem; }
.skp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; align-items: center; padding: 2rem 0 4rem; }
.skp-stage { display: grid; place-items: center; padding: 1rem 0 3rem; }
.skp-stage .sk-pk { width: min(18rem, 70%); }
.skp-buy { display: grid; justify-items: start; }
.skp-eye { width: 154px; height: 18px; margin-bottom: 1rem; border-radius: 0.3rem; }
.skp-name1 { width: 328px; max-width: 100%; height: 66px; }
.skp-tag { width: 333px; max-width: 100%; height: 22px; margin-top: 0.75rem; border-radius: 0.3rem; }
.skp-cost { width: 219px; height: 74px; margin: 1.5rem 0; }
.skp-qty { width: min(100%, 24rem); height: 48px; margin-bottom: 0.75rem; }
.skp-open { width: min(100%, 24rem); height: 3.75rem; }
.skp-afford { width: min(100%, 24rem); height: 30px; margin-top: 0.75rem; }
.skp-fair { width: min(100%, 24rem); height: 17px; margin-top: 1.5rem; border-radius: 0.3rem; }
html:not([data-signed]) :is(.skp-afford, .skp-fair) { display: none; }
@media (max-width: 900px) {
  .skp-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0 2.5rem; }
  .skp-stage .sk-pk { width: min(14rem, 60vw); }
}
@media (max-width: 700px) {
  .skp-back { margin-top: 0.25rem; }
  .skp-hero { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0; align-items: start; padding: 0.5rem 0 2rem; }
  .skp-stage { grid-column: 1; grid-row: 1 / span 4; padding: 0.25rem 0 0; }
  .skp-stage .sk-pk { width: 100%; }
  .skp-buy { display: contents; }
  .skp-buy > :nth-child(-n+4) { grid-column: 2; }
  .skp-buy > :nth-child(n+5) { grid-column: 1 / -1; }
  .skp-eye { width: 70%; margin: 0; }
  .skp-name1 { width: 9rem; height: 32px; margin-top: 0.1rem; }
  .skp-tag { width: 100%; height: 36px; margin-top: 0.25rem; }
  .skp-cost { width: 7rem; height: 35px; margin: 0.4rem 0 0.9rem; }
  .skp-qty { width: 100%; height: 52px; margin-top: 1.25rem; }
  .skp-open, .skp-afford, .skp-fair { width: 100%; }
  .skp-afford { height: 44px; }
}

/* jackpot (src/jackpot.css): title row, the wheel, your picker on the right, the players under the wheel */
.sk-jackpot { max-width: none; margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.75rem; flex: 1 0 auto; min-height: 36rem; padding: 0.75rem clamp(1rem, 2vw, 2rem) 1rem; overflow-x: clip; }
.skj-head { display: flex; align-items: center; gap: 0.9rem; }
.skj-h1 { width: 109px; height: 34px; border-radius: 0.4rem; }
.skj-round { width: 143px; height: 29px; }
.skj-chips { display: none; }
.skj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1.25rem; align-items: start; }
.skj-left { display: flex; flex-direction: column; gap: 0.6rem; }
.skj-stage { display: grid; grid-template-rows: minmax(0, 1fr) 3.4rem; place-items: center; height: min(46rem, calc(100dvh - 10rem)); min-height: 30rem; padding: 1.25rem 0.5rem 0.5rem; }
/* the wheel's box (.jk-wheel), its ring drawn at the real ring's size, the pot in the hub */
.skj-wb { position: relative; width: 100%; height: 100%; container-type: size; display: grid; place-items: center; }
.skj-wheel { width: calc(0.92 * min(100cqw, 100cqh)); aspect-ratio: 1; border-radius: 50%; -webkit-mask: radial-gradient(closest-side, transparent 87%, #000 88%); mask: radial-gradient(closest-side, transparent 87%, #000 88%); }
.skj-pot { position: absolute; width: calc(0.22 * min(100cqw, 100cqh)); height: calc(0.1 * min(100cqw, 100cqh)); border-radius: 0.5rem; }
.skj-ph { width: 7rem; height: 31px; margin-top: 0.4rem; }
.skj-rows { display: grid; gap: 0.4rem; margin-top: 0.45rem; }
.skj-rows .sk { height: 3.6rem; }
.skj-side { position: sticky; top: 4.5rem; height: calc(100dvh - 9.5rem); min-height: 28rem; display: flex; flex-direction: column; }
.skj-tray { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.8rem; }
.skj-th { width: 9rem; height: 26px; }
.skj-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.skj-filters .sk { height: 2.6rem; border-radius: 0.7rem; }
.skj-filters .skj-s { grid-column: 1 / -1; height: 2.75rem; }
.skj-filters .skj-r { height: 2.6rem; }
.skj-pick { flex: 1 1 0; min-height: 6rem; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.7rem, 1fr)); align-content: start; gap: 0.45rem; margin: 0 -0.3rem; padding: 0.3rem; }
.skj-pick > div { display: grid; gap: 0.2rem; padding: 0.3rem; }
.skj-pick > div > .sk:nth-child(2) { width: 85%; height: 16px; }
.skj-pick > div > .sk:nth-child(3) { width: 50%; height: 23px; }
/* guests (no session cookie): one line instead of the picker */
.skj-guest { display: none; width: 14rem; height: 1.2rem; border-radius: 0.3rem; }
html:not([data-signed]) .skj-guest { display: block; }
html:not([data-signed]) :is(.skj-th, .skj-filters, .skj-pick) { display: none; }
.skj-putbar { flex: none; }
.skj-put { height: 3.5rem; }
@media (max-width: 1100px) { .skj-grid { grid-template-columns: minmax(0, 1fr) 19rem; } }
@media (max-width: 900px) {
  .sk-jackpot { padding: 0.75rem 1rem 1.25rem; min-height: 0; }
  .skj-head { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
  .skj-chips { display: block; flex-basis: 100%; height: 2.75rem; }
  .skj-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .skj-left { display: contents; }
  .skj-stage { order: 0; height: auto; min-height: 0; padding: 1.5rem 0.75rem; }
  .skj-wb { width: min(100%, 22rem); height: auto; aspect-ratio: 1; }
  .skj-side { order: 1; position: static; height: auto; min-height: 0; }
  .skj-tray { flex: none; }
  .skj-filters .sk:not(.skj-s), .skj-filters .skj-r { display: none; }
  .skj-pick { flex: none; height: 24rem; }
  .skj-putbar { position: sticky; bottom: 0; z-index: 4; margin: 0 -0.8rem -0.8rem; padding: 0.7rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom)); border-radius: 0 0 1rem 1rem; background: #111a2c; }
  .skj-people { order: 2; }
}

/* my vault (src/dashboard.css): title + rank, the balance card, the tabs, a grid of slabs */
.sk-dash { padding-top: 2.5rem; }
.skd-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; padding-bottom: 2.5rem; }
.skd-h1 { width: min(21rem, 100%); height: calc(0.88 * clamp(3.4rem, 7vw, 5.75rem)); }
.skd-worth { width: 13rem; height: 25px; margin-top: 0.9rem; }
.skd-rank { width: min(34rem, 100%); height: 28px; margin-top: 1.6rem; }
.skd-track { width: calc(min(34rem, 100%) - 0.8rem); height: 4px; margin: 1.1rem 0.4rem 2.6rem; border-radius: 4px; }
.skd-wallet { min-width: 21rem; height: 188px; border-radius: 22px; }
.skd-vault { padding-top: 2rem; border-top: 1px solid #1f2b44; }
.skd-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.skd-seg { width: 370px; height: 44px; }
.skd-tools { width: 238px; height: 38px; }
.skd-hint { width: 26rem; max-width: 100%; height: 18px; margin-top: 1rem; }
.skd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: 1.75rem 1.1rem; margin-top: 1.75rem; }
.skd-grid > div { display: grid; gap: 0.6rem; }
.skd-grid > div > .sk:last-child { width: 75%; height: 15px; }
@media (max-width: 760px) {
  .sk-dash { padding-top: 1.5rem; }
  .skd-top { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-bottom: 1.5rem; }
  .skd-h1 { height: calc(0.88 * 3.2rem); }
  .skd-worth { height: 22px; margin-top: 0.6rem; }
  .skd-rank { margin-top: 1.1rem; }
  .skd-track { width: auto; margin: 1.1rem 1rem 2rem 0.4rem; }
  .skd-wallet { min-width: 0; height: 91px; border-radius: 18px; }
  .skd-head { gap: 0.75rem; }
  .skd-seg, .skd-tools { width: 100%; }
  .skd-seg { height: 52px; }
  .skd-tools { height: 44px; }
  .skd-hint { height: 36px; }
}

/* any other page */
.sk-any .sk:nth-child(1) { width: min(32rem, 80%); height: 3.2rem; margin-top: 2rem; }
.sk-any .sk:nth-child(2) { width: min(24rem, 60%); height: 1.1rem; margin-top: 1rem; }

/* touch screens: the real controls grow to 44px targets (src/app.css) */
@media (pointer: coarse) { .sk-tear { height: 44px; } }