/* Hallmark · redesign · macrostructure: Casino Lobby (owner-directed: classic Indonesian casino layout)
 * theme: studied-DNA (source: superscatter303.it.com — EU303's own site)
 * charcoal #292421 header · gold gradient #ffc929 → #ffed4a (GABUNG button) · orange #fa8b0d · Roboto body
 * nav: running-text bar + dark header + HOT badges · hero: banner slider · footer: dark colophon
 * motion: marquee · slider · gold shine · glow pulse · scroll reveal — all off under prefers-reduced-motion
 */
:root{
  --color-night:#14110f;
  --color-coal:#1d1916;
  --color-char:#292421;
  --color-char-2:#342e2a;
  --color-char-3:#433b35;
  --color-line:#4d433b;
  --color-ink:#f7f1e6;
  --color-ink-2:#c9bfb2;
  --color-ink-3:#9d9286;
  --color-gold:#ffc929;
  --color-gold-2:#ffed4a;
  --color-gold-deep:#d99a00;
  --color-orange:#fa8b0d;
  --color-orange-2:#ff6a00;
  --color-red:#e5322d;
  --color-on-gold:#1a1300;
  --color-glow:rgba(255,201,41,.45);
  --color-glow-soft:rgba(255,201,41,.14);
  --color-shade:rgba(0,0,0,.45);
  --color-sheen:rgba(255,255,255,.55);
  --color-focus:#7cc4ff;
  --color-warn:#ff8a7a;
  --color-ok:#7ee08a;

  --grad-gold:linear-gradient(90deg,var(--color-gold),var(--color-gold-2));
  --grad-gold-v:linear-gradient(180deg,var(--color-gold-2),var(--color-gold) 55%,var(--color-gold-deep));
  --grad-fire:linear-gradient(135deg,var(--color-orange),var(--color-orange-2));
  --grad-panel:linear-gradient(180deg,var(--color-char-2),var(--color-coal));
  --grad-frame:linear-gradient(135deg,var(--color-gold-2),var(--color-gold-deep) 40%,var(--color-orange) 60%,var(--color-gold-2));

  --font-display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --font-body:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,Consolas,monospace;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.35rem;
  --text-xl:1.7rem; --text-2xl:clamp(1.6rem,1.2rem + 1.8vw,2.3rem); --text-display:clamp(1.9rem,1.3rem + 2.6vw,3rem);

  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2rem; --space-xl:3rem; --space-2xl:4rem;

  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --rule-hair:1px; --rule-thick:2px;

  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-base:260ms; --dur-slow:600ms;
  --measure:66ch;
}

/* superjaya303.com — casino lobby styles. Every colour and font is a token from tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--color-night)}
body{margin:0;background:var(--color-night);color:var(--color-ink);font:400 var(--text-base)/1.6 var(--font-body)}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:900px;pointer-events:none;z-index:-1;background:radial-gradient(60% 50% at 50% 0%,var(--color-glow-soft),transparent 70%)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-gold);text-decoration:none}
a:hover{color:var(--color-gold-2)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:700;line-height:1.15;margin:0;overflow-wrap:anywhere;min-width:0;letter-spacing:.01em}
h1{font-size:var(--text-display);text-transform:uppercase;color:var(--color-gold)}
h2{font-size:var(--text-2xl);text-transform:uppercase}
h3{font-size:var(--text-md)}
p{margin:0 0 var(--space-sm)}
.wrap{width:100%;max-width:75rem;margin:0 auto;padding-inline:clamp(.9rem,3.5vw,1.5rem)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--space-sm);top:var(--space-sm);background:var(--color-char);padding:var(--space-2xs) var(--space-sm);z-index:30}
.gold-text{background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:2.6rem;padding:0 var(--space-md);border-radius:var(--radius-sm);font:700 var(--text-sm)/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border:0;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),filter var(--dur-fast)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-gold{background:var(--grad-gold);color:var(--color-on-gold);box-shadow:0 0 0 1px var(--color-gold-deep),0 6px 18px var(--color-glow-soft)}
.btn-gold:hover{color:var(--color-on-gold);filter:brightness(1.06);box-shadow:0 0 0 1px var(--color-gold-deep),0 0 22px var(--color-glow)}
.btn-gold::after{content:"";position:absolute;top:-30%;left:-60%;width:40%;height:160%;background:linear-gradient(90deg,transparent,var(--color-sheen),transparent);transform:translateX(0) rotate(20deg);animation:sheen 3.2s var(--ease-in-out) infinite}
.btn-dark{background:var(--color-char-2);color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-line)}
.btn-dark:hover{color:var(--color-gold);box-shadow:inset 0 0 0 1px var(--color-gold)}
.btn-fire{background:var(--grad-fire);color:var(--color-ink)}
@keyframes sheen{0%,62%{transform:translateX(0) rotate(20deg)}100%{transform:translateX(420%) rotate(20deg)}}

/* ---- running text */
.ticker{background:var(--color-coal);border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.ticker .wrap{display:flex;align-items:center;gap:var(--space-sm);min-height:2.3rem}
.ticker-tag{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--grad-fire);color:var(--color-ink);font:700 var(--text-xs)/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:var(--radius-pill)}
.ticker-tag svg{width:14px;height:14px;fill:currentColor}
.ticker-view{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,var(--color-night) 4%,var(--color-night) 96%,transparent)}
.ticker-run{display:inline-flex;white-space:nowrap;animation:marquee 46s linear infinite;color:var(--color-ink-2)}
.ticker-run span{padding-right:3rem}
.ticker-run b{color:var(--color-gold);font-weight:700}
.ticker:hover .ticker-run{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- header */
.top{background:var(--color-char);border-bottom:2px solid var(--color-gold-deep);box-shadow:0 8px 24px var(--color-shade)}
.top .wrap{display:flex;align-items:center;gap:var(--space-lg);min-height:4.4rem}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:34px;width:auto}
.menu{display:flex;gap:var(--space-md);margin-right:auto}
.menu a{position:relative;color:var(--color-ink);font:500 var(--text-sm)/1 var(--font-body);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-xs) 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--grad-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.menu a:hover{color:var(--color-gold)}
.menu a:hover::after{transform:scaleX(1)}
.hot{position:absolute;top:-8px;right:-22px;background:var(--color-red);color:var(--color-ink);font:700 9px/1 var(--font-body);padding:3px 5px;border-radius:var(--radius-pill);animation:bob 1.6s var(--ease-in-out) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.acts{display:flex;gap:var(--space-2xs);flex:none}

/* ---- banner slider */
.stage{padding-top:var(--space-md)}
.slider{position:relative;border-radius:var(--radius-lg);padding:2px;background:var(--grad-frame);box-shadow:0 0 36px var(--color-glow-soft)}
.slides{position:relative;aspect-ratio:1200/420;border-radius:calc(var(--radius-lg) - 2px);overflow:hidden;background:var(--color-coal)}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity var(--dur-slow) var(--ease-out),transform 1.2s var(--ease-out)}
.slide.is-on{opacity:1;transform:scale(1);z-index:1}
.slide a{display:block;height:100%}
.slide img{width:100%;height:100%;object-fit:cover}
.no-js .slide:first-child{opacity:1;transform:none}
.nav-arrow{position:absolute;top:50%;z-index:3;width:2.6rem;height:2.6rem;margin-top:-1.3rem;border-radius:50%;border:1px solid var(--color-gold);background:var(--color-shade);color:var(--color-gold);font:700 1.2rem/1 var(--font-body);cursor:pointer;transition:background-color var(--dur-fast),transform var(--dur-fast)}
.nav-arrow:hover{background:var(--color-gold);color:var(--color-on-gold)}
.nav-prev{left:var(--space-sm)}.nav-next{right:var(--space-sm)}
.dots{position:absolute;left:0;right:0;bottom:var(--space-xs);z-index:3;display:flex;justify-content:center;gap:8px}
.dots button{width:10px;height:10px;padding:0;border-radius:var(--radius-pill);border:0;background:var(--color-ink-3);cursor:pointer;transition:width var(--dur-base) var(--ease-out),background-color var(--dur-base)}
.dots button[aria-current="true"]{width:28px;background:var(--color-gold)}

/* ---- welcome block (h1) */
.hello{margin-top:var(--space-md);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-lg);align-items:center;background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-lg)}
.lede{color:var(--color-ink-2);margin:0;font-size:var(--text-md)}
.lede strong{color:var(--color-gold)}
.facts{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-sm)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--color-char);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:5px 12px;font-size:var(--text-xs);color:var(--color-ink-2)}
.chip b{color:var(--color-gold)}

/* ---- maxwin event strip */
.jack{margin-top:var(--space-md);position:relative;overflow:hidden;border-radius:var(--radius-md);padding:2px;background:var(--grad-frame)}
.jack-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;background:linear-gradient(90deg,var(--color-coal),var(--color-char-2),var(--color-coal));border-radius:calc(var(--radius-md) - 2px);padding:var(--space-sm) var(--space-lg)}
.jack-label{font:700 var(--text-sm)/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-2)}
.jack-amt{font:700 clamp(1.6rem,1rem + 2.6vw,2.6rem)/1 var(--font-display);letter-spacing:.04em;background:linear-gradient(100deg,var(--color-gold-deep) 20%,var(--color-gold-2) 40%,var(--color-gold) 60%,var(--color-gold-deep) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 3.4s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.jack small{display:block;color:var(--color-ink-3);font-size:var(--text-xs);margin-top:4px}

/* ---- section heads (classic centred title bar) */
.sec{padding-top:var(--space-2xl)}
.sec-head{text-align:center;max-width:46rem;margin:0 auto var(--space-lg)}
.sec-head h2{display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}
.sec-head h2::before,.sec-head h2::after{content:"";flex:1 1 2rem;max-width:6rem;height:2px;background:var(--grad-gold);opacity:.8}
.sec-head h2::before{transform:scaleX(-1)}
.sec-head p{color:var(--color-ink-2);margin:var(--space-2xs) 0 0}

/* ---- calculator */
.bench-frame{border-radius:var(--radius-lg);padding:2px;background:var(--grad-frame);box-shadow:0 0 40px var(--color-glow-soft);animation:glow 4s var(--ease-in-out) infinite}
@keyframes glow{0%,100%{box-shadow:0 0 24px var(--color-glow-soft)}50%{box-shadow:0 0 46px var(--color-glow)}}
.bench{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,21rem);background:var(--grad-panel);border-radius:calc(var(--radius-lg) - 2px);overflow:hidden;scroll-margin-top:var(--space-md)}
.bench-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-sm) var(--space-lg);background:var(--color-char);border-bottom:1px solid var(--color-gold-deep)}
.bench-head h2{font-size:var(--text-xl)}
.bench-head p{margin:0;font-size:var(--text-xs);color:var(--color-ink-3)}
.picker{position:relative;border-right:1px solid var(--color-line);padding:var(--space-xs) 0;max-height:36rem;overflow-y:auto;background:var(--color-coal)}
.picker fieldset{border:0;margin:0;padding:0}
.picker legend{font:700 var(--text-xs)/1 var(--font-display);text-transform:uppercase;letter-spacing:.14em;color:var(--color-orange);padding:var(--space-sm) var(--space-md) var(--space-2xs)}
.picker label{position:relative;display:block;padding:var(--space-2xs) var(--space-md);font-size:var(--text-sm);color:var(--color-ink-2);cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast)}
.picker label:hover{background:var(--color-char-2);color:var(--color-ink)}
.picker input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.picker label:has(input:checked){background:linear-gradient(90deg,var(--color-glow-soft),transparent);color:var(--color-gold);font-weight:700;box-shadow:inset 3px 0 0 var(--color-gold)}
.picker label:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:-3px}
.inputs{padding:var(--space-lg);min-width:0}
.inputs h3{font-size:var(--text-lg);color:var(--color-gold);text-transform:uppercase;margin-bottom:var(--space-3xs)}
.inputs .meta{font-size:var(--text-sm);color:var(--color-ink-3);margin-bottom:var(--space-md)}
.field{margin-bottom:var(--space-md)}
.field label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-3xs);color:var(--color-ink-2)}
.field .hint{display:block;font-size:var(--text-xs);color:var(--color-ink-3);margin-top:var(--space-3xs)}
.money{display:flex;align-items:center;background:var(--color-night);border-radius:var(--radius-sm);border:1px solid var(--color-line);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.money:focus-within{border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-glow-soft)}
.money span{padding-left:var(--space-sm);color:var(--color-gold);font-family:var(--font-mono)}
.money input,.field select{width:100%;min-width:0;border:0;background:transparent;color:var(--color-ink);font:500 var(--text-md)/1 var(--font-mono);padding:var(--space-xs) var(--space-sm);min-height:3rem}
.money input:focus,.field select:focus{outline:none}
.field select{background:var(--color-night);border:1px solid var(--color-line);border-radius:var(--radius-sm);color-scheme:dark}
.field select:focus-visible{border-color:var(--color-gold)}
.quick{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:var(--space-2xs)}
.quick button{font:500 var(--text-xs)/1 var(--font-mono);background:var(--color-char);color:var(--color-ink-2);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-xs);cursor:pointer;min-height:2rem;transition:all var(--dur-fast)}
.quick button:hover{border-color:var(--color-gold);color:var(--color-gold)}
.slip{margin:var(--space-sm);border-radius:var(--radius-md);background:var(--color-night);border:1px solid var(--color-gold-deep);align-self:start;overflow:hidden;font-size:var(--text-sm)}
.slip-title{background:var(--grad-gold);color:var(--color-on-gold);font:700 var(--text-sm)/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-xs) var(--space-md)}
.slip dl{margin:0;padding:var(--space-xs) var(--space-md) 0}
.slip .row{display:flex;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-2xs);border-bottom:1px dashed var(--color-line)}
.slip dt{color:var(--color-ink-3)}
.slip dd{margin:0;font-family:var(--font-mono);text-align:right;color:var(--color-ink)}
.slip .big{border-bottom:0;padding-top:var(--space-xs);align-items:center}
.slip .big dt{color:var(--color-ink)}
.slip .big dd{font:700 var(--text-xl)/1.1 var(--font-display);color:var(--color-gold);text-shadow:0 0 18px var(--color-glow)}
.slip .math{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink-2);background:var(--color-char);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-sm);margin:var(--space-xs) var(--space-md);overflow-wrap:anywhere}
.slip .note{font-size:var(--text-xs);color:var(--color-ink-3);margin:0 var(--space-md) var(--space-2xs)}
.slip .note b{color:var(--color-ink-2)}
.slip .warn{color:var(--color-warn);font-weight:700}
.slip .btn{display:flex;margin:var(--space-sm) var(--space-md) var(--space-md)}
.slip.pop{animation:pop var(--dur-base) var(--ease-out)}
@keyframes pop{from{transform:scale(.985);opacity:.6}to{transform:scale(1);opacity:1}}
.noscript{padding:var(--space-lg);color:var(--color-ink-3)}

/* ---- promo tabs + cards */
.tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}
.tab{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--color-ink-2);font:500 var(--text-xs)/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;min-width:5.5rem}
.tab i{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--grad-panel);border:2px solid var(--color-line);transition:all var(--dur-base) var(--ease-out)}
.tab svg{width:26px;height:26px;fill:var(--color-ink-2);transition:fill var(--dur-base)}
.tab:hover i{border-color:var(--color-gold);transform:translateY(-3px)}
.tab[aria-pressed="true"]{color:var(--color-gold)}
.tab[aria-pressed="true"] i{border-color:var(--color-gold);background:var(--grad-gold);box-shadow:0 0 20px var(--color-glow)}
.tab[aria-pressed="true"] svg{fill:var(--color-on-gold)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));gap:var(--space-md)}
.pc{position:relative;display:flex;flex-direction:column;background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base)}
.pc:hover{transform:translateY(-5px);border-color:var(--color-gold);box-shadow:0 12px 30px var(--color-shade),0 0 24px var(--color-glow-soft)}
.pc[hidden]{display:none}
.pc-art{position:relative;height:7.2rem;display:grid;place-items:center;background:radial-gradient(70% 90% at 50% 100%,var(--color-glow),transparent 70%),linear-gradient(160deg,var(--color-char-3),var(--color-night));border-bottom:1px solid var(--color-gold-deep);overflow:hidden}
.pc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,var(--color-glow-soft) 50%,transparent 60%);transform:translateX(-100%);transition:transform .9s var(--ease-out)}
.pc:hover .pc-art::after{transform:translateX(100%)}
.pc-big{font:700 clamp(2rem,1.6rem + 1.2vw,2.6rem)/1 var(--font-display);letter-spacing:.02em;background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px var(--color-shade));text-align:center;padding-inline:var(--space-sm)}
.pc-grp{position:absolute;top:var(--space-2xs);left:var(--space-2xs);background:var(--grad-fire);color:var(--color-ink);font:700 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:var(--radius-pill)}
.pc-body{padding:var(--space-sm) var(--space-md) var(--space-md);display:flex;flex-direction:column;gap:var(--space-2xs);flex:1}
.pc-title{font:700 var(--text-md)/1.25 var(--font-display);text-transform:uppercase;color:var(--color-ink);margin:0}
.pc-short{color:var(--color-ink-2);font-size:var(--text-sm);margin:0}
.pc-meta{margin:var(--space-2xs) 0 0;font-size:var(--text-xs);color:var(--color-ink-3);display:grid;gap:4px}
.pc-meta div{display:flex;gap:var(--space-2xs)}
.pc-meta dt{flex:none;color:var(--color-gold);min-width:4.6rem}
.pc-meta dd{margin:0}
.pc-acts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xs);margin-top:auto;padding-top:var(--space-sm)}
.pc-acts .btn{min-height:2.4rem;padding:0 var(--space-xs);font-size:var(--text-xs)}

/* ---- schedule board */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2xs)}
.daily{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,8rem) repeat(4,minmax(0,1fr));gap:var(--space-sm) var(--space-md);align-items:start;background:var(--grad-panel);border:1px solid var(--color-gold-deep);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-2xs)}
.daily>.slot:first-child b{font:700 var(--text-md)/1.2 var(--font-display);text-transform:uppercase;color:var(--color-gold)}
.slot{font-size:var(--text-sm);color:var(--color-ink-2)}
.slot .t{display:block;font:500 var(--text-xs)/1.4 var(--font-mono);color:var(--color-orange)}
.day{background:var(--color-coal);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;min-height:9.5rem;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.day:hover{transform:translateY(-3px);border-color:var(--color-gold-deep)}
.day h3{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;background:var(--color-char);color:var(--color-ink-2);padding:var(--space-2xs) var(--space-xs)}
.day .ev{padding:var(--space-xs);display:flex;flex-direction:column;gap:var(--space-xs)}
.day .quiet{font-size:var(--text-xs);color:var(--color-ink-3)}
.day.is-key{border-color:var(--color-gold-deep);background:radial-gradient(120% 80% at 50% 100%,var(--color-glow-soft),transparent 70%),var(--color-coal)}
.day.is-key h3{background:var(--grad-gold);color:var(--color-on-gold)}
.day.is-today{box-shadow:0 0 0 2px var(--color-orange),0 0 22px var(--color-glow-soft)}
.today-tag{font:700 9px/1 var(--font-body);background:var(--color-red);color:var(--color-ink);padding:3px 6px;border-radius:var(--radius-pill);letter-spacing:.04em}
.limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs) var(--space-md);margin:var(--space-md) 0 0}
.limits div{display:flex;justify-content:space-between;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--color-coal);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--text-sm)}
.limits dt{font-weight:700;color:var(--color-ink)}
.limits dd{margin:0;text-align:right;color:var(--color-ink-3)}

/* ---- turnover steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.step{position:relative;background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-xl) var(--space-md) var(--space-md);text-align:center}
.step .n{position:absolute;top:-1.4rem;left:50%;margin-left:-1.4rem;width:2.8rem;height:2.8rem;display:grid;place-items:center;border-radius:50%;background:var(--grad-gold-v);color:var(--color-on-gold);font:700 var(--text-lg)/1 var(--font-display);box-shadow:0 0 0 4px var(--color-night),0 0 18px var(--color-glow)}
.step b{display:block;font:700 var(--text-md)/1.3 var(--font-display);text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-2xs)}
.step p{font-size:var(--text-sm);color:var(--color-ink-2)}
.step .eq{display:inline-block;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-ink);background:var(--color-night);border:1px dashed var(--color-gold-deep);border-radius:var(--radius-sm);padding:var(--space-2xs) var(--space-xs)}

/* ---- rules */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs) var(--space-md);margin:0;padding:0;list-style:none}
.rules li{position:relative;padding:var(--space-xs) var(--space-sm) var(--space-xs) 2.6rem;background:var(--color-coal);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-ink-2)}
.rules li::before{content:"";position:absolute;left:var(--space-sm);top:1.05rem;width:.6rem;height:.6rem;background:var(--grad-gold);transform:rotate(45deg);box-shadow:0 0 8px var(--color-glow)}

/* ---- faq */
.faq{max-width:52rem;margin:0 auto;display:grid;gap:var(--space-2xs)}
.faq details{background:var(--color-coal);border:1px solid var(--color-line);border-radius:var(--radius-md);transition:border-color var(--dur-base)}
.faq details[open]{border-color:var(--color-gold-deep);background:var(--grad-panel)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-sm) 3rem var(--space-sm) var(--space-md);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--space-md);top:50%;margin-top:-.75rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;background:var(--grad-gold);color:var(--color-on-gold);font:700 var(--text-md)/1 var(--font-body);transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary h3{display:inline;font:500 var(--text-base)/1.4 var(--font-body);color:var(--color-ink)}
.faq .a{padding:0 var(--space-md) var(--space-sm);color:var(--color-ink-2)}

/* ---- prose pages */
.prose{max-width:var(--measure);margin:var(--space-lg) auto 0;background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-lg)}
.prose h1{font-size:var(--text-2xl);margin-bottom:var(--space-md)}
.prose h2{font-size:var(--text-lg);color:var(--color-gold);margin:var(--space-lg) 0 var(--space-xs)}
.prose p,.prose li{color:var(--color-ink-2)}
.prose ul{padding-left:1.2rem}.prose li{margin-bottom:var(--space-2xs)}
.crumb{font-size:var(--text-xs);color:var(--color-ink-3);padding-top:var(--space-md);max-width:var(--measure);margin:0 auto}
.crumb a{color:var(--color-ink-2)}

/* ---- footer */
.foot{margin-top:var(--space-2xl);background:var(--color-coal);border-top:2px solid var(--color-gold-deep);padding-block:var(--space-xl) calc(var(--space-xl) + 4.5rem)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;padding-bottom:var(--space-md);border-bottom:1px solid var(--color-line);margin-bottom:var(--space-md)}
.foot-top img{height:30px;width:auto}
.provs{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.provs span{border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:5px 10px;font:700 var(--text-xs)/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink-3);transition:color var(--dur-fast),border-color var(--dur-fast)}
.provs span:hover{color:var(--color-gold);border-color:var(--color-gold-deep)}
.foot p{font-size:var(--text-xs);line-height:1.8;color:var(--color-ink-3);max-width:90ch;margin:0 0 var(--space-sm)}
.foot .links{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md)}
.foot .links a{color:var(--color-ink-2);white-space:nowrap}
.foot .links a:hover{color:var(--color-gold)}
.age{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:2px solid var(--color-red);color:var(--color-ink);font:700 var(--text-xs)/1 var(--font-body);margin-right:var(--space-2xs);vertical-align:middle}

/* ---- mobile bottom navigation — the page's one fixed element */
.mnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;background:var(--color-char);border-top:2px solid var(--color-gold-deep);box-shadow:0 -8px 24px var(--color-shade);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--color-ink-2);font:500 10px/1.1 var(--font-body);text-transform:uppercase;letter-spacing:.04em;min-height:44px;justify-content:center}
.mnav svg{width:22px;height:22px;fill:currentColor}
.mnav a:hover{color:var(--color-gold)}
.mnav .mid{position:relative;top:-14px;color:var(--color-gold)}
.mnav .mid i{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--grad-gold-v);box-shadow:0 0 0 4px var(--color-char),0 0 18px var(--color-glow);animation:pulse 2.2s var(--ease-in-out) infinite}
.mnav .mid svg{fill:var(--color-on-gold);width:26px;height:26px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---- scroll reveal (only when JS is running, so nothing is hidden without it) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:60rem){
  .menu{display:none}
  .acts{margin-left:auto}
  .hello{grid-template-columns:minmax(0,1fr);padding:var(--space-md);gap:var(--space-sm)}
  .bench{grid-template-columns:minmax(0,1fr)}
  .picker{border-right:0;border-bottom:1px solid var(--color-line);max-height:none;display:flex;overflow-x:auto;padding:var(--space-xs) var(--space-sm);gap:var(--space-2xs)}
  .picker fieldset{display:contents}
  .picker legend{display:none}
  .picker label{flex:none;border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-sm);white-space:nowrap}
  .picker label:has(input:checked){border-color:var(--color-gold);box-shadow:none}
  .inputs{padding:var(--space-md) var(--space-md) 0}
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daily{grid-template-columns:repeat(2,minmax(0,1fr))}
  .daily>.slot:first-child{grid-column:1/-1}
  .day{min-height:0}
  .limits{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .rules{grid-template-columns:minmax(0,1fr)}
  .mnav{display:grid}
  .nav-arrow{display:none}
}
@media (max-width:40rem){
  .top .wrap{gap:var(--space-sm);min-height:3.8rem}
  .brand img{height:26px}
  .acts .btn{padding:0 var(--space-sm);min-height:2.4rem;font-size:var(--text-xs)}
  .daily{grid-template-columns:minmax(0,1fr)}
  .bench-head{padding:var(--space-sm) var(--space-md)}
  .slip{margin:var(--space-sm) var(--space-xs) var(--space-xs)}
  .jack-in{padding:var(--space-sm) var(--space-md)}
  .dots{bottom:4px;gap:5px}
  .dots button{width:6px;height:6px}
  .dots button[aria-current="true"]{width:16px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs)}
  .pc-art{height:5rem}
  .pc-big{font-size:1.6rem}
  .pc-body{padding:var(--space-xs)}
  .pc-title{font-size:var(--text-sm)}
  .pc-short{font-size:var(--text-xs)}
  .pc-meta{display:none}
  .pc-acts{grid-template-columns:minmax(0,1fr);padding-top:var(--space-xs)}
  .tab{min-width:4.4rem}
  .tab i{width:3rem;height:3rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none;transition-duration:1ms;scroll-behavior:auto}
  html{scroll-behavior:auto}
  .ticker-view{mask-image:none}
  .ticker-run{white-space:normal;display:block}
  .ticker-run span:nth-child(n+2){display:none}
  .js .rv{opacity:1;transform:none}
}