/* ==================================================================
   HELIOPULP KNIGHT LAYER for the sweepstakes casino list page.
   Loaded after the page's own style blocks and the Citadel layer, so it
   wins on source order at equal specificity. Only re-points existing
   tokens and adds the painted hero: no card or sheet markup depends on it,
   so the dual render path (bake + JS Refresh) is untouched.
   ================================================================== */

html[data-theme]{
  --bg:#070F1D; --s1:#0B1628; --s2:#0F1F2E;
  --ink:#efe6d4; --mut:#8B9BB4; --mut-strong:#b9c3d4;
  --lime:#f2b344;          /* action + accent: sun gold */
  --teal:#5EE8AD;          /* cool accent: site mint */
  --amber:#e9965c; --coral:#d25a4e; --violet:#9d87c9;
  --line:rgba(242,179,68,.16); --line-strong:rgba(242,179,68,.55);
  --nav-bg:rgba(7,15,29,.92);
  --glow-lime:color-mix(in srgb,#f2b344 26%,transparent);
  --card-hover-border:color-mix(in srgb,#f2b344 55%,transparent);
  --play-btn-text:#070F1D;
  --chrome:#0B1628; --chrome-ink:#efe6d4; --chrome-mut:#8B9BB4; --chrome-line:rgba(242,179,68,.18);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'IM Fell English',Georgia,'Times New Roman',serif;
}

/* ---------- page art: the hall of shields, dimmed behind everything ---------- */
html[data-theme] body{background-color:#070F1D}
html[data-theme] body::before{
  background-image:url('/images/heliopulp/list-sky-observatory.webp');
  background-position:center 20%;
  filter:brightness(.55) saturate(1.2);
}

/* ---------- type ---------- */
html[data-theme] h1, html[data-theme] h2{font-family:var(--serif);font-weight:400;letter-spacing:0}
html[data-theme] header.hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1.02;text-shadow:0 2px 22px rgba(0,0,0,.8)}
html[data-theme] header.hero h1 .hl{color:var(--lime);font-style:italic}
html[data-theme] header.hero .eyebrow{color:var(--lime);letter-spacing:.24em;text-shadow:0 0 10px #000}
html[data-theme] header.hero .sub{color:#d9d2c3;text-shadow:0 1px 14px rgba(0,0,0,.85)}

/* ---------- hero: a bounded painted banner with living ASCII ---------- */
html[data-theme] header.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:64px 48px 40px; margin-top:22px;
  border:1px solid var(--line-strong); outline:1px solid rgba(242,179,68,.18); outline-offset:5px;
  background:#0B1628;
}
html[data-theme] header.hero > :not(.hero-plate){position:relative;z-index:2}
.hero-plate{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-plate::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(70% 90% at 22% 55%,rgba(7,15,29,.62),rgba(7,15,29,.18) 70%,rgba(7,15,29,0) 100%)}
html[data-theme] header.hero h1,html[data-theme] header.hero .sub,html[data-theme] header.hero .eyebrow{text-shadow:0 2px 16px #050b16,0 0 6px #050b16,0 0 2px #050b16}
@media (max-width:700px){html[data-theme] header.hero{padding:36px 20px 26px}}

/* plate + ASCII engine (same rules as the homepage) */
.plate{overflow:hidden}
.plate .stage{position:absolute;inset:0;will-change:transform}
.plate .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.12) saturate(1.12) contrast(1.04)}
.plate .asciiwrap{position:absolute;inset:0;pointer-events:none;transition:opacity .6s}
.plate .asciiwrap canvas{position:absolute;inset:0;width:100%;height:100%}
.plate .asciiwrap .glow{mix-blend-mode:screen;opacity:.8}
.mode-soft .plate .asciiwrap{opacity:var(--ao,1);
  -webkit-mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),transparent 40%,#000 100%);
          mask-image:radial-gradient(circle var(--r,190px) at var(--mx,-999px) var(--my,-999px),transparent 40%,#000 100%)}
.mode-paint .plate .asciiwrap{opacity:0}

/* ---------- hero stats + quick links ---------- */
html[data-theme] .kpis{background:rgba(7,15,29,.62);border:1px solid var(--line-strong);backdrop-filter:blur(6px)}
html[data-theme] .kpi{border-color:var(--line)!important}
html[data-theme] .kpi .v{font-family:var(--mono);font-weight:700;font-size:34px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html[data-theme] .kpi .l{letter-spacing:.18em}
html[data-theme] .quicklinks a{background:rgba(7,15,29,.7);border:1px solid var(--line-strong);color:var(--ink);border-radius:0}
html[data-theme] .quicklinks a:hover{background:var(--lime);color:#070F1D}

/* ---------- surfaces: squared, gold-ruled, like the homepage cards ---------- */
html[data-theme] .card,
html[data-theme] .ledgerwrap,
html[data-theme] .faq details,
html[data-theme] .alerts,
html[data-theme] .signup{border-radius:0}
html[data-theme] .card:hover{box-shadow:0 26px 60px -26px rgba(242,179,68,.45)}

/* ---------- nav ---------- */
html[data-theme] .nav-brand{font-family:var(--serif);letter-spacing:.04em}
html[data-theme] .nav-logo{border-radius:6px}

@media (prefers-reduced-motion:reduce){.plate .stage{transform:none!important}}

/* ---------- cosmic sky: multicolored nebula glow + starfield over the page art ----------
   Static gradients only (no canvas, no blur), so scrolling cost stays flat. */
html[data-theme] body::after{
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 27% 62%,rgba(255,244,214,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 9%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 58% 41%,rgba(190,255,230,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 23%,rgba(255,220,160,.85),transparent 60%),
    radial-gradient(1px 1px at 83% 67%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1px 1px at 91% 12%,rgba(230,200,255,.8),transparent 60%),
    radial-gradient(1px 1px at 6% 84%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 88%,rgba(255,236,190,.7),transparent 60%),
    radial-gradient(1px 1px at 64% 79%,rgba(200,230,255,.7),transparent 60%),
    radial-gradient(60vmax 38vmax at 8% 12%,rgba(186,62,170,.30),transparent 60%),
    radial-gradient(55vmax 34vmax at 92% 18%,rgba(94,70,210,.34),transparent 60%),
    radial-gradient(70vmax 22vmax at 50% 4%,rgba(94,232,173,.16),transparent 65%),
    radial-gradient(50vmax 30vmax at 85% 88%,rgba(242,179,68,.14),transparent 60%),
    radial-gradient(60vmax 36vmax at 18% 92%,rgba(40,90,190,.26),transparent 60%),
    linear-gradient(180deg,rgba(7,15,29,.05) 0%,rgba(7,15,29,.28) 55%,rgba(7,15,29,.5) 100%);
  background-size:520px 520px,610px 610px,470px 470px,700px 700px,560px 560px,640px 640px,590px 590px,680px 680px,730px 730px,500px 500px,
                  100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
}

/* ---------- sheet readability: welcome offers wrap instead of clipping ----------
   One long unbroken offer made the Welcome column ~1000px wide, so the sticky
   Review/Play column sat on top of it. Same 2-line pattern the Daily SC column uses;
   the full offer stays in the row's expanded detail. */
html[data-theme] .sv-grid td.sv-w-welcome,
html[data-theme] .sv-grid th.sv-w-welcome{width:250px;min-width:250px;max-width:250px;white-space:normal!important}
html[data-theme] .sv-grid .sv-w-welcome .sv-txt{max-width:236px;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.3;font-size:14px;overflow:hidden}
@media (min-width:1180px){
  html[data-theme] .sv-grid{--sv-gut-w:64px;--sv-name-w:220px}
  html[data-theme] .sv-grid td.sv-w-redeem,html[data-theme] .sv-grid th.sv-w-redeem{width:124px;min-width:124px;max-width:124px}
}
/* give the sheet the room it needs on wide screens (was capped at 1360 by the Citadel layer) */
@media (min-width:1400px){
  html[data-theme] .wrap,html[data-theme] .nav-inner{max-width:1440px}
}

/* ==================================================================
   SHEET FITS EVERY SCREEN (no sideways scrolling anywhere)
   >= 900px : fixed-layout table, columns in %, text wraps inside cells
   <  900px : every row becomes a stacked card with labelled fields
   CSS only, so the bake and the JS Refresh path produce the same result.
   ================================================================== */
@media (min-width:900px){
  html[data-theme] .sv-vp{overflow-x:hidden!important}
  html[data-theme] .sv-grid{table-layout:fixed!important;width:100%!important;min-width:0!important}
  html[data-theme] .sv-grid tr.sv-letters{display:none}
  html[data-theme] .sv-grid th,html[data-theme] .sv-grid td{min-width:0!important;max-width:none!important}
  html[data-theme] .sv-grid .sv-gut{width:4%!important}
  html[data-theme] .sv-grid .sv-namecol{width:20%!important;white-space:normal!important}
  html[data-theme] .sv-grid .sv-c-tier{width:0!important}
  html[data-theme] .sv-grid .sv-w-daily{width:19%!important}
  html[data-theme] .sv-grid tr > :nth-child(5){width:15%!important}
  html[data-theme] .sv-grid .sv-w-redeem{width:8%!important}
  html[data-theme] .sv-grid .sv-w-welcome{width:20%!important}
  html[data-theme] .sv-grid .sv-actcol{width:14%!important}
  html[data-theme] .sv-grid td{white-space:normal!important;overflow-wrap:anywhere}
  html[data-theme] .sv-grid .sv-w-daily .sv-txt,
  html[data-theme] .sv-grid .sv-w-welcome .sv-txt{max-width:none!important}
  html[data-theme] .sv-grid .sv-actcol > *{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  /* nothing scrolls sideways now, so the frozen left/right columns only caused overlap */
  html[data-theme] .sv-grid td.sv-gut,html[data-theme] .sv-grid td.sv-namecol,html[data-theme] .sv-grid td.sv-actcol{position:static!important}
  html[data-theme] .sv-grid th.sv-gut,html[data-theme] .sv-grid th.sv-namecol,html[data-theme] .sv-grid th.sv-actcol{left:auto!important;right:auto!important}
  html[data-theme] .sv-grid td.sv-namecol *{white-space:normal!important;text-overflow:clip!important;overflow:visible!important}
  html[data-theme] .sv-grid .sv-band-in{position:static!important}
  /* the letters row is hidden here, so the sticky heads sit at the very top instead of 30px down over the tier band */
  html[data-theme] .sv-grid tr.sv-heads th{top:0!important}
  /* min redeem: a little wider, centred heading and values, tighter padding so the heading stays in its column */
  html[data-theme] .sv-grid .sv-w-redeem{width:9%!important;text-align:center!important;padding-left:8px!important;padding-right:8px!important}
  html[data-theme] .sv-grid .sv-w-welcome{width:19%!important}
  /* Review + Play: side by side when they fit, otherwise stacked full width; never a ragged wrap */
  html[data-theme] .sv-grid td.sv-actcol{padding-left:12px!important;padding-right:12px!important}
  html[data-theme] .sv-grid .sv-actcol > *{justify-content:center!important}
  html[data-theme] .sv-grid td.sv-actcol .btn{flex:1 1 64px!important;justify-content:center;text-align:center}
}

@media (max-width:899px){
  html[data-theme] .sv-vp{overflow:visible!important;height:auto!important;max-height:none!important}
  html[data-theme] .sv-grid,html[data-theme] .sv-grid tbody,html[data-theme] .sv-grid thead{display:block!important;width:100%!important;min-width:0!important}
  html[data-theme] .sv-grid tr.sv-letters,html[data-theme] .sv-grid tr.sv-heads{display:none!important}
  html[data-theme] .sv-grid tr{display:block;height:auto!important}
  html[data-theme] .sv-grid tr.sv-band td{display:block;position:static!important;width:auto!important}
  html[data-theme] .sv-grid .sv-band-in{position:static!important;width:auto!important;max-width:100%!important;flex-wrap:wrap;box-sizing:border-box}
  html[data-theme] .sv-grid tr.sv-row{
    display:grid!important;grid-template-columns:52px 1fr 1fr;
    grid-template-areas:"gut name name" "daily daily daily" "pay pay red" "wel wel wel" "act act act";
    margin:0 0 12px;border:1px solid var(--line-strong);background:var(--s1);height:auto!important}
  html[data-theme] .sv-grid tr.sv-row > td{
    display:block;position:static!important;width:auto!important;min-width:0!important;max-width:none!important;
    height:auto!important;padding:8px 14px!important;border:0!important;box-shadow:none!important;white-space:normal!important;background:transparent}
  html[data-theme] .sv-grid tr.sv-row > .sv-gut{grid-area:gut;padding:12px 4px 12px 10px!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-namecol{grid-area:name;padding-top:12px!important;font-size:18px}
  html[data-theme] .sv-grid tr.sv-row > .sv-c-tier{display:none}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-daily{grid-area:daily}
  html[data-theme] .sv-grid tr.sv-row > :nth-child(5){grid-area:pay}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-redeem{grid-area:red;text-align:left}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-welcome{grid-area:wel}
  html[data-theme] .sv-grid tr.sv-row > .sv-actcol{grid-area:act;padding-bottom:14px!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-actcol > *{display:flex;gap:10px}
  html[data-theme] .sv-grid tr.sv-row > .sv-actcol a,html[data-theme] .sv-grid tr.sv-row > .sv-actcol button{flex:1;text-align:center;justify-content:center;min-height:44px}
  html[data-theme] .sv-grid .sv-w-daily .sv-txt,html[data-theme] .sv-grid .sv-w-welcome .sv-txt{max-width:none!important;-webkit-line-clamp:unset!important;display:block!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-daily::before,
  html[data-theme] .sv-grid tr.sv-row > :nth-child(5)::before,
  html[data-theme] .sv-grid tr.sv-row > .sv-w-redeem::before,
  html[data-theme] .sv-grid tr.sv-row > .sv-w-welcome::before{
    display:block;margin-bottom:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-daily::before{content:"Daily SC"}
  html[data-theme] .sv-grid tr.sv-row > :nth-child(5)::before{content:"Payout"}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-redeem::before{content:"Minimum redeem"}
  html[data-theme] .sv-grid tr.sv-row > .sv-w-welcome::before{content:"Welcome offer"}
}

/* ---------- header ASCII: the galaxy spiral and nothing else ----------
   A soft circle on the painted galaxy (--gx/--gy/--gr set by the engine); no lantern, no zoom. */
html[data-theme] .hero-plate .asciiwrap{
  /* an oval hugging the painted galaxy (it is tilted and wider than tall): the swirl sits on the spiral, nowhere else */
  -webkit-mask-image:radial-gradient(ellipse calc(var(--gr,240px) * 1.08) calc(var(--gr,240px) * .62) at var(--gx,50%) var(--gy,30%),#000 42%,rgba(0,0,0,.55) 72%,transparent 100%);
          mask-image:radial-gradient(ellipse calc(var(--gr,240px) * 1.08) calc(var(--gr,240px) * .62) at var(--gx,50%) var(--gy,30%),#000 42%,rgba(0,0,0,.55) 72%,transparent 100%);
}
/* Paint mode: the bare painting, no ASCII, filter or shading */
html.mode-paint .hero-plate .stage img{filter:none}
.hero-plate .stage img,.hero-plate::after{transition:filter 1.4s cubic-bezier(.4,0,.2,1),opacity 1.4s cubic-bezier(.4,0,.2,1)}
html.mode-paint .hero-plate::after{opacity:0}

/* ==================================================================
   MOBILE + DESKTOP PASS: roomy cards, a clear expand arrow, attached details
   ================================================================== */
/* the arrow that says "this opens": right-pointing when closed, turns down when open */
html[data-theme] .sv-grid .sv-expand svg{transition:transform .3s ease}
html[data-theme] .sv-grid tr.sv-row.open .sv-expand svg{transform:rotate(90deg)}
@media (min-width:900px){
  html[data-theme] .sv-grid .sv-expand{opacity:.95!important;color:var(--lime)!important;border:1px solid var(--line)!important;border-radius:50%!important;width:24px!important;height:24px!important}
  html[data-theme] .sv-grid tr.sv-row:hover .sv-expand{background:rgba(242,179,68,.14)!important}
  html[data-theme] .sv-grid tr.sv-row{cursor:pointer}
}
@media (max-width:899px){
  /* the hint speaks to phones: there are no column headings to click here */
  html[data-theme] .sv-hint{font-size:0!important;line-height:0}
  html[data-theme] .sv-hint::after{content:"Tap any casino to see its full details \25BE";display:block;font-size:13px;line-height:1.5;
    font-family:var(--mono);letter-spacing:.04em;color:var(--mut-strong);padding:6px 2px 2px}
  /* roomier cards */
  html[data-theme] .sv-grid tr.sv-row{position:relative;border-radius:14px;overflow:hidden;margin:0 0 14px!important;cursor:pointer;
    background:linear-gradient(160deg,#0F1F2E,#0B1628)!important;box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
  html[data-theme] .sv-grid tr.sv-row > td{padding:10px 18px!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-gut{padding:16px 0 10px 16px!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-namecol{padding:16px 60px 8px 8px!important}
  html[data-theme] .sv-grid tr.sv-row > .sv-actcol{padding:12px 18px 18px!important}
  html[data-theme] .sv-grid tr.sv-row .sv-rn{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;
    border:1px solid var(--line-strong);color:var(--lime);font-size:12px}
  /* the arrow, top-right of every card */
  html[data-theme] .sv-grid tr.sv-row .sv-expand{display:grid!important;position:absolute;right:14px;top:14px;width:34px!important;height:34px!important;
    border-radius:50%!important;opacity:1!important;color:var(--lime)!important;border:1px solid rgba(242,179,68,.45)!important;background:rgba(242,179,68,.08)!important;z-index:2}
  html[data-theme] .sv-grid tr.sv-row .sv-expand svg{width:14px;height:14px;transform:rotate(90deg)}
  html[data-theme] .sv-grid tr.sv-row.open .sv-expand svg{transform:rotate(-90deg)}
  html[data-theme] .sv-grid tr.sv-row.open{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;margin-bottom:0!important;border-bottom-color:transparent!important}
  /* details attach to their card instead of floating below it */
  html[data-theme] .sv-grid tr.sv-detail{display:block!important;margin:0 0 14px!important;border:1px solid var(--line-strong);border-top:1px dashed rgba(242,179,68,.3);
    border-radius:0 0 14px 14px;background:#0B1628!important;overflow:hidden}
  html[data-theme] .sv-grid tr.sv-detail > td.sv-gut{display:none!important}
  html[data-theme] .sv-grid tr.sv-detail > td{display:block!important;width:auto!important;padding:14px 18px 18px!important;border:0!important;box-shadow:none!important;position:static!important}
  html[data-theme] .sv-grid .sv-detail-in{display:block!important;padding:0!important;margin:0!important;border:0!important;background:none!important}
  html[data-theme] .sv-grid .sv-detail-in h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 8px}
  html[data-theme] .sv-grid .sv-detail-in p{font-size:15.5px;line-height:1.6;color:#d9d2c3}
  html[data-theme] .sv-grid .sv-detail-acts{display:grid!important;grid-template-columns:1fr;gap:10px;margin:16px 0}
  html[data-theme] .sv-grid .sv-detail-acts a{display:flex!important;justify-content:center;align-items:center;min-height:46px;text-align:center}
}

/* ==================================================================
   ONE CONTROL PANEL at the top of the sheet: quick links, tiers, filters
   ================================================================== */
html[data-theme] .sv-bar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;
  padding:18px 20px!important;border:1px solid var(--line-strong)!important;border-radius:16px!important;
  background:linear-gradient(160deg,rgba(15,31,46,.92),rgba(7,15,29,.92))!important;box-shadow:0 18px 40px -26px rgba(0,0,0,.8)}
html[data-theme] .sv-quick{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
html[data-theme] .sv-quick a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--ink);
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(7,15,29,.55);transition:background .2s,border-color .2s,color .2s}
html[data-theme] .sv-quick a:hover{border-color:var(--lime);color:var(--lime)}
html[data-theme] .sv-quick a.gold{background:var(--lime);color:#070F1D;border-color:var(--lime)}
html[data-theme] .sv-quick a.gold:hover{background:#ffe7a8;color:#070F1D}
html[data-theme] .sv-tabs{flex-wrap:wrap!important;gap:6px!important}
html[data-theme] .sv-filters{flex-wrap:wrap!important;gap:8px!important}
html[data-theme] .sv-hint{margin:10px 4px 14px!important;font-size:12.5px;color:var(--mut)}
/* the NEW tier tab stands out */
html[data-theme] .sv-tab[data-tab="NEW"]{position:relative;color:#070F1D!important;background:linear-gradient(135deg,#f2b344,#ffd98a)!important;
  border-color:#f2b344!important;font-weight:700;box-shadow:0 0 18px rgba(242,179,68,.45);animation:new-glow 2.6s ease-in-out infinite}
html[data-theme] .sv-tab[data-tab="NEW"] .dot{display:none}
html[data-theme] .sv-tab[data-tab="NEW"]::before{content:"\2726 ";margin-right:2px}
html[data-theme] .sv-tab[data-tab="NEW"] .n{background:#070F1D!important;color:#ffd98a!important;border-radius:999px;padding:1px 7px;margin-left:6px}
html[data-theme] .sv-tab[data-tab="NEW"][aria-selected="true"]{outline:2px solid #fff3c4;outline-offset:2px}
@keyframes new-glow{0%,100%{box-shadow:0 0 12px rgba(242,179,68,.35)}50%{box-shadow:0 0 26px rgba(242,179,68,.75)}}
@media (prefers-reduced-motion:reduce){html[data-theme] .sv-tab[data-tab="NEW"]{animation:none}}
/* opened details sit flush in the card (the desktop sticky offset does not apply on phones) */
@media (max-width:899px){
  html[data-theme] .sv-grid .sv-detail-in,html[data-theme] .sv-grid .sv-detail-in > *{position:static!important;left:auto!important;width:auto!important;max-width:none!important}
  html[data-theme] .sv-bar{padding:14px!important}
  html[data-theme] .sv-quick a{font-size:11.5px;padding:7px 11px}
  html[data-theme] .sv-filters .sv-search{flex:1 1 100%}
}
/* control panel polish */
html[data-theme] .sv-bar > .sv-tabs,html[data-theme] .sv-bar > .sv-filters{margin:0!important;min-height:0!important;padding:0!important}
html[data-theme] .sv-hint{text-align:left!important;max-width:none!important}
@media (max-width:899px){
  html[data-theme] .sv-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  html[data-theme] .sv-quick a{text-align:center;display:flex;align-items:center;justify-content:center;min-height:40px;line-height:1.25}
  html[data-theme] .sv-tabs{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px!important}
  html[data-theme] .sv-tab{justify-content:center!important;width:100%;padding:9px 4px!important;font-size:11.5px!important}
  html[data-theme] .sv-hint::after{content:"Tap a casino for details \25BE"!important;text-align:center}
  html[data-theme] .sv-grid tr.sv-band > td.sv-gut{display:none!important}
}
html[data-theme] .sv-bar .sv-filters{align-items:center!important;height:auto!important}
html[data-theme] .sv-bar .sv-filters > *{margin-top:0!important;margin-bottom:0!important}
html[data-theme] .sv-bar .sv-filters{align-content:flex-start!important;min-height:0!important}
html[data-theme] .sv-bar .sv-filters::before,html[data-theme] .sv-bar .sv-filters::after{display:none!important;content:none!important}
html[data-theme] .sv-bar{height:auto!important;min-height:0!important}
html[data-theme] .sv-bar > *{flex:0 0 auto!important}
html[data-theme] .sv-bar .sv-search{display:flex!important;align-items:center;height:38px;overflow:hidden}
html[data-theme] .sv-bar .sv-search svg{width:16px!important;height:16px!important}
/* filter row as a grid: flexbox mis-sized this row around the search box */
html[data-theme] .sv-bar .sv-filters{display:grid!important;grid-template-columns:minmax(220px,1fr) repeat(4,auto);gap:8px!important;align-items:center!important}
html[data-theme] .sv-bar .sv-filters > *{width:auto!important;min-width:0}
@media (max-width:899px){
  html[data-theme] .sv-bar .sv-filters{grid-template-columns:1fr 1fr}
  html[data-theme] .sv-bar .sv-filters .sv-search{grid-column:1/-1}
  html[data-theme] .sv-bar .sv-filters > *{width:100%!important}
}

/* ===== phone button pass ===== */
@media (max-width:899px){
  /* quick links: calm rounded tiles instead of lumpy two-line pills */
  html[data-theme] .sv-quick a{border-radius:12px!important;min-height:46px;padding:8px 10px!important;font-size:11.5px!important;line-height:1.3!important;letter-spacing:.03em!important}
  /* every tier tab is a matching tile; the selected one gets a gold edge */
  html[data-theme] .sv-tab{border:1px solid var(--line)!important;border-radius:10px!important;background:rgba(7,15,29,.55)!important;min-height:40px}
  html[data-theme] .sv-tab[aria-selected="true"]:not([data-tab="NEW"]){border-color:var(--lime)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px rgba(242,179,68,.35)}
  html[data-theme] .sv-tab[data-tab="NEW"]{border-radius:10px!important}
  /* filters: same tile language */
  html[data-theme] .sv-bar .sv-filters > *{border-radius:10px!important;min-height:42px}
  /* an open card already shows Play in its details, so hide the duplicate */
  html[data-theme] .sv-grid tr.sv-row.open > .sv-actcol{display:none!important}
  /* the floating sign-in chip becomes a small corner button that stays out of the way */
  html[data-theme] #oshSaveChip,html[data-theme] .osh-chip{right:12px!important;bottom:12px!important;left:auto!important;padding:9px 12px!important;font-size:12px!important;opacity:.92}
}
/* header ASCII keeps a gentle breathing motion that the browser runs even while a phone is busy scrolling */

/* ---------- casino logos: uniform square tiles (generator/build_logo_tiles.py) in a thin gold frame ---------- */
html[data-theme] .sv-logo,html[data-theme] .c-logo{width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:8px!important;object-fit:cover!important;
  background:#0d1b30!important;border:1px solid rgba(242,179,68,.3)!important;box-shadow:0 2px 8px rgba(0,0,0,.35)}
html[data-theme] .sv-logo.ph{background:transparent!important;border-color:transparent!important;box-shadow:none}
/* headings are plain labels now: the sheet always stays in tier order */
html[data-theme] .sv-grid .sv-th{cursor:default}

/* Minimum over Redeem: the heading wraps onto two centred lines inside its own column */
html[data-theme] .sv-grid th.sv-w-redeem .sv-th{display:block;white-space:normal!important;line-height:1.25;text-align:center}
@media (min-width:900px){html[data-theme] .sv-grid .sv-w-redeem{width:10%!important}html[data-theme] .sv-grid .sv-w-welcome{width:18%!important}}

/* full-stack KPI: the per-tier split sits under the label */
html[data-theme] .kpi .split{margin-top:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;color:#c9bfa9;line-height:1.5}
html[data-theme] .kpi .split span{white-space:nowrap}

/* ---------- one page scroll, no scroll trap ----------
   The sheet used to be its own scroll box with overscroll-behavior:contain, so a wheel over the table stopped
   dead at its top or bottom. Now the table flows with the page and the headings pin under the site header.
   body overflow-x:hidden (not clip) made <body> a scroll container, which also broke every sticky element. */
html body{overflow-x:clip!important;overflow-y:visible!important}
@media (min-width:900px){
  html[data-theme] .sv-vp{overflow:visible!important;overflow-x:clip!important;max-height:none!important;height:auto!important;overscroll-behavior:auto!important}
  html[data-theme] #svSheet{overflow:clip!important}
  html[data-theme] .sv-grid tr.sv-heads th{top:57px!important}
}