/* ============================================================
   The Cheat Code — retro arcade / RPG character-build screen
   ============================================================ */
:root {
  --bg:        #0E0B1A;
  --bg-2:      #141026;
  --panel:     #1B1638;
  --panel-2:   #241c4a;
  --line:      #352a63;
  --ink:       #EDEBFA;
  --ink-soft:  #A89FD6;
  --green:     #39FF14;
  --cyan:      #19E3FF;
  --magenta:   #FF2E97;
  --gold:      #FFD23F;
  --r: 16px;
  --maxw: 1180px;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: "Nunito Sans", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 500px at 80% -10%, rgba(255,46,151,.15), transparent),
    radial-gradient(900px 500px at 0% 10%, rgba(25,227,255,.12), transparent);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; height: auto; }
h1,h2,h3,.wordmark,.footer-mark,.level-badge,.btn { font-family: "Russo One", system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; }
em { font-style: normal; color: var(--gold); }
a { color: var(--cyan); }

/* mono code tags — signature accent */
.code-tag {
  font-family: "Space Mono", monospace; font-weight: 700;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green); display: inline-block;
}
.pixel { font-family: "Press Start 2P", monospace; }

/* ---- buttons ---- */
.btn {
  font-size: 1rem; border: 2px solid var(--ink); border-radius: 10px;
  padding: .7em 1.3em; text-decoration: none; cursor: pointer;
  background: var(--panel); color: var(--ink); display: inline-block;
  transition: transform .1s ease, box-shadow .1s ease, background .1s;
}
.btn-primary { background: var(--green); color: #06210a; border-color: #06210a; box-shadow: 0 0 0 0 var(--green); }
.btn-primary:hover { box-shadow: 0 0 22px -2px var(--green); transform: translateY(-2px); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-block { width: 100%; text-align: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ============================================================ Top bar */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem clamp(1rem,4vw,2.4rem);
  background: rgba(14,11,26,.86); backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.wordmark { font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--magenta); }
.topbar-tag { font-family: "Space Mono", monospace; font-size: .66rem; letter-spacing: .12em; color: var(--ink-soft); margin-left: auto; }
.cart-pill {
  font-family: "Russo One", sans-serif; font-size: .85rem;
  background: var(--magenta); color: #fff; border: 2px solid #fff;
  border-radius: 999px; padding: .45em 1em; cursor: pointer; margin-left: 1rem;
  box-shadow: 0 0 16px -4px var(--magenta);
}
.cart-pill span { background: #fff; color: var(--magenta); border-radius: 999px; padding: 0 .5em; margin-left: .2em; }
@media (max-width:720px){ .topbar-tag{ display:none } .cart-pill{ margin-left:auto } }

/* ============================================================ Hero */
.hero {
  max-width: var(--maxw); margin: clamp(1.5rem,5vw,3.5rem) auto;
  padding: 0 clamp(1rem,4vw,2.4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem);
  align-items: center;
}
.hero h1 { font-size: clamp(2.4rem,6vw,4.2rem); line-height: 1.02; margin: .8rem 0 1rem; }
.glitch { color: var(--green); text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan); }
.lede { color: var(--ink-soft); font-size: 1.12rem; max-width: 40ch; margin-bottom: 1.4rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hero-fine { font-family: "Space Mono", monospace; font-size: .72rem; color: var(--ink-soft); letter-spacing: .04em; }

/* ---- builder panel ---- */
.builder {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 2px solid var(--line); border-radius: var(--r);
  padding: 1.1rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative; overflow: hidden;
}
.builder::before { /* scanlines */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 4px);
}
.builder-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.builder-label { font-family: "Space Mono", monospace; font-size: .7rem; letter-spacing: .16em; color: var(--cyan); }
.level-badge { font-size: 1rem; color: var(--bg); background: var(--gold); border-radius: 8px; padding: .15em .6em; box-shadow: 0 0 18px -2px var(--gold); }
.builder-body { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: center; }
.avatar-wrap { position: relative; background: radial-gradient(circle at 50% 40%, rgba(57,255,20,.16), transparent 70%); border-radius: 12px; }
#avatar { width: 100%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition: opacity .18s ease, transform .18s ease; }
.avatar-bump { animation: bump .4s ease; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.06) rotate(-1deg)} 100%{transform:scale(1)} }

.callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
  font-family: "Press Start 2P", monospace; font-size: .6rem; color: var(--bg);
  background: var(--green); padding: .4em .6em; border-radius: 6px; white-space: nowrap;
  animation: floatUp 1.1s ease forwards;
}
@keyframes floatUp { 0%{opacity:0; transform:translate(-50%,10px) scale(.8)} 20%{opacity:1} 100%{opacity:0; transform:translate(-50%,-60px) scale(1)} }

.stats { display: flex; flex-direction: column; gap: .5rem; }
.stat { font-size: .8rem; }
.stat-top { display: flex; justify-content: space-between; font-family: "Space Mono", monospace; font-size: .68rem; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 2px; }
.stat-val { color: var(--ink); }
.stat-track { height: 12px; background: #0a0716; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.stat-fill { height: 100%; width: 0; border-radius: 5px; transition: width .5s cubic-bezier(.2,.9,.2,1); }
.stat-fill.s-strength { background: linear-gradient(90deg,#ff6a3d,var(--magenta)); }
.stat-fill.s-recovery { background: linear-gradient(90deg,#1bd47a,var(--green)); }
.stat-fill.s-hair     { background: linear-gradient(90deg,#9b6cff,#d59bff); }
.stat-fill.s-shine    { background: linear-gradient(90deg,#19E3FF,#bff7ff); }
.stat-fill.s-leanness { background: linear-gradient(90deg,#ffd23f,#ff9d2f); }
.stat-fill.s-longevity{ background: linear-gradient(90deg,#39FF14,#19E3FF); }
.archetype { font-family: "Russo One", sans-serif; font-size: .95rem; color: var(--magenta); margin-top: .15rem; text-shadow: 0 0 12px rgba(255,46,151,.5); }
.main-stat { text-align: center; margin-top: .7rem; font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .04em; color: var(--gold); }
.builder-hint { text-align: center; margin-top: .3rem; font-family: "Space Mono", monospace; font-size: .7rem; color: var(--ink-soft); }

/* dominant ("main") stat highlight */
.stat.dominant .stat-top { color: var(--gold); }
.stat.dominant .stat-val { color: var(--gold); font-weight: 700; }
.stat.dominant .stat-track { border-color: var(--gold); box-shadow: 0 0 12px -2px var(--gold); }
/* bar pulse when a stat increases */
@keyframes barPulse { 0%{filter:brightness(1)} 35%{filter:brightness(1.8) saturate(1.4)} 100%{filter:brightness(1)} }
.stat-fill.bar-pulse { animation: barPulse .7s ease; }

/* ============================================================ Section scaffold */
.section-head { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.4rem) 2rem; }
.section-head h2 { font-size: clamp(1.7rem,4vw,2.7rem); margin-top: .5rem; }
.section-sub { color: var(--ink-soft); margin-top: .6rem; }

/* how */
.how { padding: clamp(2.5rem,6vw,4rem) 0; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--bg-2); margin-top: 2rem; }
.steps { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.4rem); list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.steps li { background: var(--panel); border: 2px solid var(--line); border-radius: var(--r); padding: 1.5rem; }
.step-no { font-family: "Press Start 2P", monospace; font-size: 1rem; color: var(--magenta); display: inline-block; margin-bottom: .7rem; }
.steps h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.steps p { color: var(--ink-soft); }

/* ============================================================ Codex */
.codex { padding: clamp(2.5rem,6vw,4rem) 0; }
.codex-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem,4vw,2.4rem); display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 1.2rem; }
.pep {
  background: linear-gradient(180deg,var(--panel),var(--bg-2));
  border: 2px solid var(--line); border-radius: var(--r); padding: 1.2rem;
  display: flex; flex-direction: column; gap: .55rem; position: relative;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.pep:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 18px 36px -22px var(--cyan); }
.pep.in-stack { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.pep-top { display: flex; align-items: center; gap: .7rem; }
.pep-icon { width: 48px; height: 48px; flex: none; border-radius: 10px; background: #0a0716; border: 1px solid var(--line); padding: 4px; }
.pep-name { font-family: "Russo One", sans-serif; font-size: 1.15rem; line-height: 1.05; }
.pep-cat { font-family: "Space Mono", monospace; font-size: .6rem; letter-spacing: .1em; color: var(--ink-soft); text-transform: uppercase; }
.pep-price { margin-left: auto; font-family: "Russo One", sans-serif; color: var(--gold); font-size: 1.05rem; white-space: nowrap; }
.pep-blurb { color: var(--ink-soft); font-size: .9rem; }
.pep-dose { font-family: "Space Mono", monospace; font-size: .68rem; color: var(--cyan); }
.buffs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.buff { font-family: "Space Mono", monospace; font-size: .62rem; font-weight: 700; letter-spacing: .04em; padding: .2em .5em; border-radius: 5px; background: #0a0716; border: 1px solid var(--line); color: var(--ink); }
.buff b { color: var(--green); }
.pep .btn { margin-top: auto; }
.add-btn { background: var(--cyan); color: #04222b; border-color: #04222b; font-size: .92rem; }
.add-btn:hover { box-shadow: 0 0 18px -3px var(--cyan); transform: translateY(-2px); }
.pep.in-stack .add-btn { background: var(--green); }
.codex-note { text-align: center; color: var(--ink-soft); font-family: "Space Mono", monospace; font-size: .72rem; margin-top: 1.6rem; padding: 0 1rem; }

/* ============================================================ Footer */
.footer { border-top: 2px solid var(--line); background: #080611; padding: clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.4rem); text-align: center; }
.footer-mark { font-size: 1.5rem; margin-bottom: 1rem; }
.footer-mark span { color: var(--magenta); }
.disclaimer { font-family: "Space Mono", monospace; font-size: .72rem; line-height: 1.8; color: #6f679c; max-width: 78ch; margin: 0 auto 1.2rem; }
.disclaimer strong { color: var(--ink-soft); }
.copyright { font-size: .85rem; color: var(--ink-soft); }

/* ============================================================ Cart drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(4,2,12,.6); z-index: 70; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px,92vw); z-index: 80;
  background: var(--bg-2); border-left: 2px solid var(--line);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.3,.9,.3,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; box-shadow: -30px 0 60px -20px rgba(0,0,0,.7); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.2rem; border-bottom: 2px solid var(--line); }
.drawer-head h2 { font-size: 1.3rem; }
.drawer-close, .modal-close { background: none; border: none; color: var(--ink); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.drawer-items { flex: 1; overflow-y: auto; padding: .8rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.ci { display: flex; gap: .7rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; }
.ci img { width: 40px; height: 40px; background:#0a0716; border-radius: 8px; padding: 3px; }
.ci-main { flex: 1; min-width: 0; }
.ci-name { font-family: "Russo One", sans-serif; font-size: .92rem; }
.ci-price { font-family: "Space Mono", monospace; font-size: .72rem; color: var(--gold); }
.qty { display: flex; align-items: center; gap: .4rem; }
.qty button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; font-size: 1rem; line-height: 1; }
.qty span { font-family: "Space Mono", monospace; min-width: 1.4ch; text-align: center; }
.ci-remove { background: none; border: none; color: var(--magenta); cursor: pointer; font-size: 1rem; }
.drawer-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .3rem; padding: 2rem; color: var(--ink); }
.drawer-empty .muted { color: var(--ink-soft); font-size: .9rem; }
.ci-vials { font-family: "Space Mono", monospace; font-size: .66rem; color: var(--cyan); margin-top: 2px; }

/* cycle planner + suggestion */
.drawer-extra { border-top: 2px solid var(--line); padding: 1rem 1.2rem .2rem; display: flex; flex-direction: column; gap: .9rem; }
.suggestion { background: linear-gradient(180deg, rgba(255,210,63,.12), rgba(27,22,56,.6)); border: 2px solid var(--gold); border-radius: 12px; padding: .8rem; }
.sug-head { font-family: "Space Mono", monospace; font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--gold); margin-bottom: .5rem; }
.sug-body { display: flex; gap: .6rem; align-items: center; margin-bottom: .7rem; }
.sug-body img { width: 40px; height: 40px; background: #0a0716; border-radius: 8px; padding: 3px; flex: none; }
.sug-name { font-family: "Russo One", sans-serif; font-size: 1rem; }
.sug-name span { color: var(--gold); font-size: .85rem; margin-left: .3rem; }
.sug-reason { font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }
.suggestion .add-btn { font-size: .85rem; }

.cycle-planner { display: flex; flex-direction: column; gap: .6rem; }
.cycle-row { display: flex; align-items: center; justify-content: space-between; }
.cycle-label { font-family: "Space Mono", monospace; font-size: .7rem; letter-spacing: .12em; color: var(--ink-soft); }
.cycle-ctl { display: flex; align-items: center; gap: .6rem; }
.cycle-ctl button { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); background: var(--panel-2); color: var(--cyan); cursor: pointer; font-size: .8rem; line-height: 1; }
.cycle-ctl button:hover { border-color: var(--cyan); }
#cycle-weeks { font-family: "Russo One", sans-serif; min-width: 5.5ch; text-align: center; color: var(--ink); }
.cycle-est { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--ink-soft); }
.cycle-est strong { font-family: "Russo One", sans-serif; font-size: 1.3rem; color: var(--cyan); }
.apply-vials { font-size: .82rem; padding: .55em 1em; }
.apply-vials:hover { border-color: var(--gold); color: var(--gold); }
.cycle-fine { font-family: "Space Mono", monospace; font-size: .62rem; color: var(--ink-soft); text-align: center; line-height: 1.5; }
.os-cycle span:last-child { color: var(--cyan); }

.drawer-foot { border-top: 2px solid var(--line); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; }
.drawer-total strong { font-family: "Russo One", sans-serif; font-size: 1.5rem; color: var(--gold); }
.drawer-fine { font-family: "Space Mono", monospace; font-size: .68rem; color: var(--ink-soft); text-align: center; }

/* ============================================================ Modal */
.modal-scrim { position: fixed; inset: 0; background: rgba(4,2,12,.78); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal { position: relative; width: min(560px,100%); background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--r); padding: clamp(1.3rem,4vw,2rem); box-shadow: 0 30px 70px -20px #000; }
.modal-close { position: absolute; top: .9rem; right: 1rem; }
.modal h2 { font-size: 1.6rem; margin: .3rem 0 1rem; }
#order-form { display: flex; flex-direction: column; gap: .8rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--ink-soft); }
.field span em { color: var(--ink-soft); font-size: .92em; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .55em .7em; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--cyan); border-color: var(--cyan); }
.checks { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; background: var(--panel); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ink); cursor: pointer; }
.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.order-summary { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; font-size: .82rem; }
.order-summary .os-row { display: flex; justify-content: space-between; font-family: "Space Mono", monospace; font-size: .74rem; padding: .12rem 0; color: var(--ink-soft); }
.order-summary .os-total { color: var(--gold); border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; font-size: .85rem; }
.form-error { color: var(--magenta); font-family: "Space Mono", monospace; font-size: .8rem; }

/* ============================================================ Success */
.success { position: fixed; inset: 0; z-index: 100; background: rgba(4,2,12,.82); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.success-card { background: var(--bg-2); border: 2px solid var(--green); border-radius: var(--r); padding: 2rem; text-align: center; max-width: 420px; box-shadow: 0 0 60px -10px var(--green); }
.success-emoji { font-size: 3rem; }
.success-card h2 { font-size: 1.7rem; margin: .5rem 0 .6rem; }
.success-card p { color: var(--ink-soft); margin-bottom: 1.3rem; }

/* ============================================================ Responsive */
@media (max-width: 900px){
  .hero { grid-template-columns: 1fr; }
  .builder-body { grid-template-columns: 200px 1fr; }
}
@media (max-width: 620px){
  .steps { grid-template-columns: 1fr; }
  .builder-body { grid-template-columns: 1fr; }
  .avatar-wrap { max-width: 220px; margin: 0 auto; }
  .field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}