/* Epicboy Kalvin palette and layout applied to Pearl Tickets.
   Loaded last, so these rules override the base, pattern and support sheets. */

/* ---------- tokens: light (default) and dark ---------- */
:root,
:root[data-theme="light"]{
  --bk:#241633;--yl:#e07a00;--rd:#ff5a3c;--wh:#fff;
  --bg:#fbf1e1;--bg2:#f3dfc3;--card:#fffaf2;--tx:#241633;--mu:#6b5a7d;--bd:#24163326;
  --d:'Unbounded',system-ui,sans-serif;
  --b:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hbg:rgba(251,241,225,.86);--htx:#241633;--hin:#fffaf2;--hbd:#24163326;--hbb:transparent;--hon:#e07a00;
  --hhero:linear-gradient(135deg,#241633 0%,#3d2256 60%,#6b2d4a 100%);--hhtx:#fbf1e1;--hsub:#e6d6e6;--hh1:#ffb629;
  --hchip:rgba(255,255,255,.08);--hchipt:#fbf1e1;--hchipb:#ffffff40;
  --hcd:#fffaf2;--hcdt:#241633;--hcdm:#6b5a7d;
}
:root[data-theme="dark"]{
  --bk:#1f1530;--yl:#ffb629;--rd:#ff5a3c;
  --bg:#140e1f;--bg2:#1f1530;--card:#231a38;--tx:#f6ecdc;--mu:#b8a9c9;--bd:#ffffff1f;
  --hbg:rgba(20,14,31,.84);--htx:#f6ecdc;--hin:#231a38;--hbd:#ffffff1f;--hbb:transparent;--hon:#ffb629;
  --hhero:linear-gradient(135deg,#2a1a3d 0%,#1a1230 60%,#3a1f2e 100%);--hhtx:#f6ecdc;--hsub:#cbbfd9;--hh1:#ffb629;
  --hchip:rgba(255,255,255,.06);--hchipt:#f6ecdc;--hchipb:#ffffff26;
  --hcd:#231a38;--hcdt:#f6ecdc;--hcdm:#b8a9c9;
}

/* ---------- type and base ---------- */
::selection{background:var(--yl);color:#241633}
:focus-visible{outline:2px solid var(--yl);outline-offset:3px}
body{background:var(--bg);color:var(--tx);font-family:var(--b);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--d);letter-spacing:-.02em;line-height:1.1}
main>h2{font-size:22px}
@media (min-width:801px){main{padding:28px clamp(18px,4vw,48px) 48px}}

/* ---------- header: translucent bar with a sun-to-ember rule ---------- */
header{position:sticky;top:0;z-index:30;padding:14px clamp(16px,4vw,40px);background:var(--hbg);color:var(--htx);border-bottom:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--yl),var(--rd))}
.slg{color:var(--mu);opacity:1}
.thb{width:42px;height:42px;padding:0;border-radius:50%;background:var(--card);color:var(--tx);border:1px solid var(--bd);box-shadow:none;align-items:center;justify-content:center}

/* ---------- buttons: pill shapes, sun gradient for primary actions ---------- */
.btn{background:linear-gradient(135deg,var(--yl),var(--rd));color:#241633;border:0;border-radius:99px;padding:12px 22px;font-weight:700;box-shadow:0 10px 24px -14px var(--rd);transition:transform .25s,box-shadow .25s}
.btn:hover:not(:disabled){transform:translateY(-2px) scale(1.02)}
.btn.r{background:var(--rd);color:#fff}
.btn.y{background:var(--yl);color:#241633}
.btn.o{background:transparent;color:var(--tx);border:1.5px solid var(--tx);box-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chip{border-radius:99px;border-color:var(--bd)}
.chip.on,.hero2 .chip.on{background:var(--tx);color:var(--bg);border-color:var(--tx);box-shadow:none}

/* ---------- inputs and surfaces ---------- */
select,input,textarea{border-radius:14px}
.cmp input,.hs input{border-radius:99px}
.card,.fp,.sheet{border-radius:22px}
.mod{border-radius:24px;border-top:0}
.ov{background:rgba(20,14,31,.65);backdrop-filter:blur(4px)}
.tag{border-radius:99px}
.toast{background:var(--tx);color:var(--bg);border-left:0;border-radius:99px;padding:12px 22px;font-weight:600}

/* ---------- hero blocks: plum gradient, gradient title, no hard stripes ---------- */
.hero,.hero2{background:var(--hhero);color:var(--hhtx);border-radius:28px;border-bottom:0;box-shadow:0 24px 60px -28px color-mix(in srgb,var(--rd) 55%,transparent)}
.hero h1,.hero2 h1{background:linear-gradient(90deg,var(--yl),var(--rd));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 p{color:var(--hsub)}

/* ---------- sidebar and mobile nav: pill selection like the Epicboy dots ---------- */
.nv button{border-radius:99px}
.nv button.on{background:var(--tx);color:var(--bg);box-shadow:none}
@media(max-width:800px){
  main{padding:14px 12px 120px}
  #bnav{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));border-radius:22px;border:1px solid var(--bd);background:color-mix(in srgb,var(--bk) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 34px -12px rgba(0,0,0,.5);overflow:hidden}
  #bnav button{color:#f6ecdc}
  #bnav button.on{color:var(--yl);box-shadow:none;background:none}
  .buybar{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));border-radius:22px;border:1px solid var(--bd)}
  .sheet{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* ---------- footer ---------- */
.foot{background:var(--bk);color:#cdbfdc;border-top:0;position:relative;overflow:hidden}
.foot:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yl),var(--rd))}
.foot h4{color:#fff}
.foot a:hover{color:var(--yl)}
.foot .bt{border-top:1px solid #ffffff1f}
.foot .nl input{background:#2a1f3d;border-color:#ffffff1f;color:#fff}

/* ---------- sun and ridge: the Epicboy landscape behind every page ---------- */
#sun{position:fixed;top:-14vw;right:-12vw;width:min(60vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--yl),var(--rd) 72%);opacity:.22;filter:blur(1px);pointer-events:none;z-index:0;box-shadow:0 0 120px 30px color-mix(in srgb,var(--rd) 30%,transparent);animation:sunrise 1.6s cubic-bezier(.2,.8,.2,1) both}
:root[data-theme="dark"] #sun{opacity:.3}
#ridge{position:fixed;left:0;right:0;bottom:0;height:30vh;background:var(--bg2);clip-path:polygon(0 100%,0 62%,14% 40%,26% 58%,44% 12%,61% 52%,76% 30%,100% 60%,100% 100%);opacity:.9;pointer-events:none;z-index:0}
.shell,.foot{position:relative;z-index:1}
@keyframes sunrise{from{transform:translateY(60px);opacity:0}}
@media(max-width:800px){#sun{width:70vw;top:-18vw}#ridge{height:18vh}}
@media (prefers-reduced-motion:reduce){#sun{animation:none}}

/* ---------- logo: one size in header and footer, box sized to the logo ---------- */
.brand{align-items:flex-start}
.brandlogo{display:inline-block;width:max-content;align-self:flex-start;padding:4px 10px;border-radius:12px;box-shadow:0 4px 14px -6px rgba(0,0,0,.35)}
.brandlogo img,.foot .brandlogo img{height:48px;width:auto}