/* ============================================================
   Base — reset, type, paint-splash canvas, focus, motion rules
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--rst-font);
  color:var(--rst-ink);
  background:var(--rst-bg);
  line-height:1.55;
  font-size:16px;
  min-height:100vh;
}
/* Paint-splash canvas: soft multicolour blobs fixed behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(420px 300px at 8% 4%, rgba(212,175,55,.14), transparent 70%),
    radial-gradient(520px 380px at 95% 10%, rgba(10,147,255,.13), transparent 70%),
    radial-gradient(460px 340px at 88% 88%, rgba(255,218,86,.20), transparent 70%),
    radial-gradient(500px 360px at 4% 92%, rgba(130,84,241,.12), transparent 70%),
    radial-gradient(300px 240px at 55% 45%, rgba(37,199,232,.08), transparent 70%),
    radial-gradient(360px 260px at 30% 70%, rgba(255,138,61,.10), transparent 70%),
    radial-gradient(300px 220px at 70% 30%, rgba(47,191,113,.10), transparent 70%);
}
h1,h2,h3,h4{font-family:var(--rst-font-display);line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;color:var(--rst-ink)}
h1{font-size:clamp(30px,4.6vw,52px);font-weight:900}
h2{font-size:clamp(22px,3vw,32px);font-weight:850}
h3{font-size:19px;font-weight:800}
p{margin:0 0 .9em}
a{color:var(--rst-blue);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--rst-violet)}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:var(--rst-ink)}

/* Visible, consistent keyboard focus */
:focus-visible{outline:3px solid var(--rst-electric);outline-offset:2px;border-radius:8px}

/* Skip link */
.rst-skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:#1a1a22;color:#fff;
  padding:10px 18px;border-radius:var(--rst-radius-pill);font-weight:800;text-decoration:none;transition:top var(--rst-speed)}
.rst-skip-link:focus{top:12px;color:#fff}

/* ---- Buttons: the fun, tactile core. Motion lives here. ---- */
.btn,.rst-pill-action,.rst-cta-main,.rst-cta-outline,.rst-watch-button,.rst-official-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border:2px solid transparent;border-radius:var(--rst-radius-pill);
  padding:.72em 1.5em;font-weight:800;font-size:15px;line-height:1.2;
  background:var(--rst-surface);color:var(--rst-ink);border-color:var(--rst-edge-strong);
  box-shadow:var(--rst-shadow-pop);
  transition:transform var(--rst-speed) var(--rst-ease),box-shadow var(--rst-speed),background var(--rst-speed);
  text-decoration:none;user-select:none;
}
.btn:hover,.rst-pill-action:hover,.rst-cta-main:hover,.rst-cta-outline:hover,.rst-watch-button:hover,.rst-official-link:hover{
  transform:translateY(-2px) rotate(-.4deg);box-shadow:0 8px 0 rgba(43,36,64,.12),var(--rst-shadow);
}
.btn:active,.rst-pill-action:active,.rst-cta-main:active,.rst-cta-outline:active,.rst-watch-button:active,.rst-official-link:active{
  transform:translateY(2px);box-shadow:0 1px 0 rgba(43,36,64,.12);
}
.btn.gold,.rst-cta-main{background:var(--rst-seal-red);border-color:#8f1420;color:#fff}
.btn.gold:hover,.rst-cta-main:hover{background:#e02633;border-color:#a3121f}
.btn.primary{background:var(--rst-electric);border-color:#a3121f;color:#fff}
.btn.primary:hover{background:#2ea3f7}
.btn.pink{background:var(--rst-pink);border-color:#c9338c;color:#fff}
.btn.violet{background:var(--rst-violet);border-color:#6a3fd4;color:#fff}
.btn.green{background:var(--rst-green);border-color:#249a56;color:#fff}
.btn.red{background:var(--rst-red);border-color:#b93a3f;color:#fff}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--rst-edge)}
.btn.small{padding:.45em 1em;font-size:13.5px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn .ico,.nav .ico{transition:transform var(--rst-speed) var(--rst-ease)}
.btn:hover .ico{transform:scale(1.2) rotate(-8deg)}

/* Icon wiggle on hover — icons may play, card art may not */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;
  border:2px solid var(--rst-edge);background:var(--rst-surface);box-shadow:var(--rst-shadow-pop);
  transition:transform var(--rst-speed) var(--rst-ease)}
.icon-btn:hover{transform:translateY(-2px) rotate(6deg)}

/* Forms */
input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],input[type=url],input[type=tel],select,textarea{
  width:100%;padding:.7em .9em;border-radius:var(--rst-radius-sm);
  border:2px solid var(--rst-edge);background:var(--rst-surface);transition:border-color var(--rst-speed),box-shadow var(--rst-speed);
}
input:focus,select:focus,textarea:focus{border-color:var(--rst-electric);box-shadow:0 0 0 4px rgba(10,147,255,.14);outline:none}
label{font-weight:700;font-size:14px;display:block;margin-bottom:.3em}
.field{margin-bottom:1em}

/* Pills, badges, notices */
.pill{display:inline-flex;align-items:center;gap:.4em;background:#1a1a22;color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.08em;padding:.4em 1em;border-radius:var(--rst-radius-pill);text-transform:uppercase}
.notice{background:#2a2110;border:2px solid #4a3a10;color:#ffd23f;border-radius:var(--rst-radius-sm);padding:.9em 1.1em;margin:1em 0}
.notice.info{background:#16283a;border-color:#2e4a66;color:#8fc3ff}
.notice.warn{background:#2c1e10;border-color:#c98a5c;color:#ffab6b}
.meta{color:var(--rst-dim);font-size:13.5px}
.muted{color:var(--rst-dim)}
.price{font-weight:900;font-size:20px;color:var(--rst-ink)}
.price .cents{font-size:.65em}

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}