/* UI v10 (Oct 14, 2026): component refresh layered on top of everything else.
   Keeps Arcade Night palette, 8-bit fonts, pixel borders, gold/pink branding.
   Does NOT touch: token calculator, quest icons, mobile tab bar, account pop-up, typing text, yellow bar.
   Revert = remove the v10.css link in src/build.py and rebuild. */
:root{--v10-r:0px;--v10-gap:clamp(1rem,2.4vw,1.75rem);--v10-ease:cubic-bezier(.2,.8,.2,1);
  --v10-glow:0 0 0 1px rgba(45,226,230,.25),0 10px 30px -12px rgba(255,62,165,.45);
  --v10-edge:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -3px 0 rgba(0,0,0,.35)}

/* ---- Typography hierarchy ---- */
h1,h2{letter-spacing:.01em}
h2{margin-bottom:.9em}
h3{letter-spacing:.005em;line-height:1.3}
.lead{font-size:clamp(1.2rem,1.9vw,1.42rem);color:var(--muted);line-height:1.6}
.label{letter-spacing:.12em}
section{scroll-margin-top:90px}

/* ---- Boxes / cards: one consistent card system ---- */
.px-box,.tier,.ct-card,.tm-card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--surface);
  box-shadow:6px 6px 0 var(--shadow),var(--v10-edge);
  transition:transform .16s var(--v10-ease),box-shadow .16s var(--v10-ease),border-color .16s}
.tier.featured{box-shadow:8px 8px 0 var(--gold),var(--v10-edge),0 0 28px -6px rgba(255,210,63,.45)}
a.px-box:hover,.tier:hover,.tm-card:hover,.level:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shadow),var(--v10-edge)}
.tier.featured:hover{box-shadow:10px 10px 0 var(--gold),var(--v10-edge),0 0 32px -4px rgba(255,210,63,.55)}
.tier{padding:clamp(1.25rem,2.4vw,1.9rem)}
.tiers{gap:var(--v10-gap)}
details.px-box,details{transition:background .16s}
details>summary{cursor:pointer;font-weight:700;padding:.15rem 0}
details>summary:hover{color:var(--gold)}
details[open]{background:var(--surface2)}
details[open]>summary{color:var(--gold);margin-bottom:.25rem}

/* ---- Buttons: crisper press, clear hover + focus ---- */
.btn{min-height:52px;padding-inline:1.15rem;border-width:3px;letter-spacing:.02em;
  transition:transform .1s var(--v10-ease),box-shadow .1s var(--v10-ease),background .12s,color .12s;
  box-shadow:4px 4px 0 currentColor,var(--v10-edge)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 currentColor,var(--v10-edge)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 currentColor}
.btn:focus-visible,.ka-ar-btn:focus-visible,.level:focus-visible,.tm-card:focus-visible{outline:4px solid var(--gold);outline-offset:4px;box-shadow:0 0 0 8px rgba(255,210,63,.18)}
.btn-soon{opacity:.75;cursor:not-allowed}
.actions,.big-links{gap:.85rem}

/* ---- Forms ---- */
input[type=text],input[type=email],input[type=tel],select,textarea{transition:border-color .12s,box-shadow .12s;background:#0a0b22}
input:hover,select:hover,textarea:hover{border-color:var(--heading)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:4px 4px 0 var(--accent),0 0 0 4px rgba(255,210,63,.18)}
fieldset{border:3px solid rgba(232,236,255,.35);padding:.75rem 1rem 1rem}
legend{padding:0 .4rem;font-weight:700;color:var(--gold)}
.choice{display:flex;align-items:center;gap:.6rem;min-height:44px}

/* ---- Contact rows + footer ---- */
.ct-rows>li{padding:.6rem 0;border-bottom:2px dashed rgba(232,236,255,.14)}
.ct-rows>li:last-child{border-bottom:0}
.ct-ic{filter:drop-shadow(2px 2px 0 rgba(255,62,165,.5))}
footer a:not(.btn){text-decoration-color:rgba(95,243,246,.5)}
footer a:not(.btn):hover{text-decoration-color:var(--gold)}

/* ---- Section rhythm ---- */
main>section{padding-block:clamp(2.5rem,6vw,4.5rem)}
hr{border:0;border-top:3px dashed rgba(232,236,255,.2);margin:2rem 0}

/* ---- Mobile polish ---- */
@media (max-width:640px){
  body{font-size:1.2rem}
  .wrap{padding:0 1rem}
  .px-box{box-shadow:4px 4px 0 var(--shadow),var(--v10-edge)}
  .tier.featured{box-shadow:5px 5px 0 var(--gold),var(--v10-edge)}
  .actions,.big-links{flex-direction:column;align-items:stretch}
  .actions .btn,.big-links .btn{width:100%}
  a.px-box:hover,.tier:hover,.tm-card:hover,.level:hover,.btn:hover{transform:none}
  details{padding:.9rem 1rem}
  main>section{padding-block:2.25rem}
}

/* ---- Respect motion + contrast settings ---- */
@media (prefers-reduced-motion:reduce){.btn,.px-box,.tier,.tm-card,.level{transition:none!important;transform:none!important}}
html.calm .btn,html.calm .px-box,html.calm .tier,html.calm .tm-card,html.calm .level{transition:none!important;transform:none!important}
html.hc .px-box,html.hc .tier,html.hc .btn{background-image:none}