/* ============================================================================
   MEOWDOWN — "Lend Us Your Meow" recorder.
   Photocopied fight-night zine — same art bible as the game + showcase site:
   warm ink, cream paper, shout-amber. Bangers headlines, Honk wordmark,
   Special Elite typewriter, Atkinson Hyperlegible body.
   ========================================================================== */
:root{
  --ink:#151210;
  --ink-soft:#241e18;
  --paper:#FFF6E5;
  --amber:#FFB627;
  --red:#E63946;
  --teal:#5DD8E8;
  --good:#6BCB77;
  --dim:rgba(255,246,229,.62);
  --ink-dim:rgba(21,18,16,.66);
  --border:3px solid var(--ink);
  --border-amber:3px solid var(--amber);
  --shadow:6px 6px 0 var(--ink);
  --shadow-amber:6px 6px 0 var(--amber);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:18px;line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;
}
/* photocopier grain — the web cousin of the game's TV static */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
::selection{background:var(--amber);color:var(--ink)}
a{color:var(--amber)}
b{font-weight:700}
em{font-style:normal;color:var(--amber)}
h1,h2{line-height:1}

.wrap{max-width:960px;margin:0 auto;padding:0 24px;width:100%}
.wrap.narrow{max-width:640px}
.center{text-align:center}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);border-bottom:3px solid var(--amber);
  display:flex;align-items:center;gap:14px;
  padding:10px 22px;
}
.topbar .mark{font-family:"Bangers",cursive;font-size:1.5rem;color:var(--amber);text-decoration:none;letter-spacing:.06em}
.topbar .pill{
  font-family:"Special Elite",monospace;font-size:.7rem;color:var(--ink);
  background:var(--good);padding:3px 10px;border-radius:99px;white-space:nowrap;
}

/* ---------- stage / views ---------- */
.stage{flex:1;display:flex;flex-direction:column;position:relative}
.view{display:none;padding:56px 0 80px;position:relative;flex:1}
.view.is-active{display:flex;flex-direction:column;justify-content:center;animation:pop-in .35s ease}
@keyframes pop-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- wordmark + hero ---------- */
.wordmark{
  font-family:"Honk",system-ui;
  font-size:clamp(3.2rem,11vw,6.4rem);
  font-weight:400;line-height:.92;margin-bottom:18px;
}
.wordmark--sm{font-size:clamp(2.8rem,9vw,5rem)}
.kicker{
  font-family:"Special Elite",monospace;color:var(--amber);
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
}
.lead{color:var(--dim);max-width:36rem;font-size:1.08rem}
.lead.center{margin-left:auto;margin-right:auto}
.fineprint{font-family:"Special Elite",monospace;font-size:.78rem;color:var(--dim);margin-top:14px}

/* live counter */
.counter-wrap{margin-top:30px}
.counter{
  display:inline-block;font-family:"Bangers",cursive;font-size:clamp(1.3rem,3.6vw,1.9rem);
  color:var(--paper);background:var(--ink-soft);border:var(--border-amber);
  padding:10px 22px;transform:rotate(-1.2deg);box-shadow:var(--shadow-amber);
}
.counter .num{color:var(--amber)}
.counter .num--v{color:var(--teal)}
.counter__loading{color:var(--dim);font-family:"Special Elite",monospace;font-size:.8rem}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.cta-row.center{justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:"Bangers",cursive;font-size:1.2rem;letter-spacing:.04em;
  padding:12px 26px;text-decoration:none;cursor:pointer;
  border:var(--border);background:var(--paper);color:var(--ink);
  transform:rotate(-1deg);transition:transform .12s ease,filter .12s ease;
}
.btn:hover:not(:disabled){transform:rotate(1deg) translateY(-2px)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.4)}
.btn--amber{background:var(--amber);color:var(--ink);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper);transform:rotate(1deg)}
.btn--ghost:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.btn--red{background:var(--red);color:var(--paper);box-shadow:var(--shadow)}
.btn--charcoal{background:var(--ink-soft);color:var(--paper);border-color:var(--amber)}
.btn--big{font-size:1.5rem;padding:16px 34px}

/* ---------- comic pops ---------- */
.pop{
  position:absolute;font-family:"Bangers",cursive;color:var(--ink);
  background:var(--amber);border:var(--border);padding:4px 16px;
  font-size:1.3rem;box-shadow:4px 4px 0 var(--ink);user-select:none;pointer-events:none;z-index:2;
}
.pop--red{background:var(--red);color:var(--paper)}
.pop--1{top:8%;right:6%;transform:rotate(8deg)}
.pop--2{bottom:16%;left:4%;transform:rotate(-7deg)}
@media(max-width:720px){.pop{font-size:1rem}.pop--2{display:none}}

/* fired on a kept clip */
.pop-burst{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:998;
}
.pop-burst span{
  font-family:"Bangers",cursive;font-size:clamp(3rem,14vw,7rem);color:var(--ink);
  background:var(--amber);border:5px solid var(--ink);padding:6px 30px;
  box-shadow:10px 10px 0 rgba(0,0,0,.5);transform:rotate(-6deg);
  animation:burst .75s ease forwards;
}
@keyframes burst{
  0%{opacity:0;transform:rotate(-6deg) scale(.4)}
  30%{opacity:1;transform:rotate(-6deg) scale(1.08)}
  70%{opacity:1;transform:rotate(-6deg) scale(1)}
  100%{opacity:0;transform:rotate(-6deg) scale(1.05)}
}

/* ---------- 3 steps ---------- */
.steps{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.step{
  background:var(--paper);color:var(--ink);border:var(--border);box-shadow:var(--shadow);
  padding:16px 18px;flex:1 1 200px;font-size:.94rem;
}
.step:nth-child(odd){transform:rotate(-.8deg)}
.step:nth-child(even){transform:rotate(.7deg)}
.step b{font-family:"Bangers",cursive;font-size:1.25rem;display:block;color:var(--red);margin-bottom:4px}
.step i{color:var(--ink);font-style:italic;font-weight:700}

/* ---------- sheet (card panel) ---------- */
.sheet{
  background:var(--paper);color:var(--ink);border:var(--border);box-shadow:var(--shadow);
  padding:32px;position:relative;transform:rotate(-.5deg);margin-top:8px;
}
.sheet--tight{padding:22px 24px;margin-top:26px;transform:rotate(.4deg)}
.sheet--quiet{background:var(--ink-soft);color:var(--paper);border-color:var(--amber)}
.sheet--quiet p{color:var(--dim)}
.sheet__tag{
  position:absolute;top:-15px;left:22px;font-family:"Special Elite",monospace;font-size:.72rem;
  background:var(--good);color:var(--ink);border:2px solid var(--ink);padding:2px 12px;transform:rotate(-2deg);
}
.sheet__tag--red{background:var(--red);color:var(--paper)}
.sheet__title{font-family:"Bangers",cursive;font-size:clamp(1.8rem,5vw,2.6rem);margin:6px 0 10px}
.sheet__sub{color:var(--ink-dim);margin-bottom:22px}
.sheet--quiet .sheet__sub{color:var(--dim)}
.sheet__actions{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}
.sheet--tight p{color:var(--ink-dim);font-size:.95rem;margin-bottom:14px}

/* ---------- form fields ---------- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-family:"Special Elite",monospace;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim)}
.field__label small{text-transform:none;letter-spacing:0;opacity:.7}
.field input,.field select,#f-credit-handle{
  font-family:"Atkinson Hyperlegible",sans-serif;font-size:1rem;color:var(--ink);
  background:#fffdf6;border:2px solid var(--ink);padding:10px 12px;width:100%;
}
.field input:focus,.field select:focus,#f-credit-handle:focus{outline:3px solid var(--amber);outline-offset:1px}
#f-credit-handle{margin-top:12px}

/* consent checkboxes */
.consent{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;
  background:#fffdf6;border:2px dashed var(--ink);padding:14px 16px;cursor:pointer;
  font-size:.96rem;line-height:1.5;
}
.consent input{width:26px;height:26px;flex:0 0 auto;accent-color:var(--red);margin-top:1px;cursor:pointer}
.consent--credit{border-style:dotted;font-size:.9rem;background:transparent}
.consent small{color:var(--ink-dim)}

.turnstile-wrap{margin-top:22px;min-height:70px;display:flex;justify-content:center}

.err{
  color:var(--red);background:#fff0f0;border:2px solid var(--red);
  font-family:"Special Elite",monospace;font-size:.85rem;padding:10px 14px;margin-top:16px;
}

/* ---------- recorder booth ---------- */
.dots{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.dots li{width:16px;height:16px;border:2px solid var(--dim);border-radius:99px;background:transparent;transition:all .2s ease}
.dots li.is-done{background:var(--amber);border-color:var(--amber)}
.dots li.is-current{border-color:var(--paper);transform:scale(1.35);box-shadow:0 0 0 3px rgba(255,182,39,.25)}

.booth{
  background:var(--ink-soft);border:var(--border-amber);box-shadow:var(--shadow-amber);
  padding:30px 28px;text-align:center;
}
.booth__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.booth__step{font-family:"Special Elite",monospace;font-size:.78rem;color:var(--dim);letter-spacing:.1em}
.booth__pill{
  font-family:"Special Elite",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);background:var(--teal);border:2px solid var(--ink);padding:3px 12px;transform:rotate(2deg);
}
.booth__title{font-family:"Bangers",cursive;font-size:clamp(2rem,7vw,3.2rem);color:var(--amber);margin-bottom:8px}
.booth__hint{color:var(--dim);max-width:30rem;margin:0 auto 22px}

/* level meter */
.meter-shell{position:relative;background:var(--ink);border:2px solid var(--ink);margin:0 auto 26px;max-width:520px}
#meter{display:block;width:100%;height:110px}
.meter__timer{
  position:absolute;top:8px;right:12px;font-family:"Special Elite",monospace;
  font-size:.8rem;color:var(--amber);
}

/* the big record button */
.record-zone{display:flex;flex-direction:column;align-items:center;gap:10px}
.record{
  width:104px;height:104px;border-radius:99px;cursor:pointer;
  background:var(--amber);border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s ease;touch-action:none;
}
.record:hover{transform:translateY(-2px)}
.record:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}
.record__dot{width:38px;height:38px;border-radius:99px;background:var(--red);transition:all .15s ease}
.record.is-recording{background:var(--red);animation:rec-pulse 1s ease-in-out infinite}
.record.is-recording .record__dot{background:var(--paper);border-radius:8px;width:30px;height:30px}
@keyframes rec-pulse{0%,100%{box-shadow:6px 6px 0 var(--ink),0 0 0 0 rgba(230,57,70,.5)}50%{box-shadow:6px 6px 0 var(--ink),0 0 0 16px rgba(230,57,70,0)}}
.record__label{font-family:"Bangers",cursive;font-size:1.3rem;color:var(--paper)}
.record__tip{font-family:"Special Elite",monospace;font-size:.74rem;color:var(--dim);max-width:26rem}

/* review (playback + keep/redo) */
.review{margin-top:26px;border-top:2px dashed var(--dim);padding-top:22px}
.review__heading{font-family:"Bangers",cursive;font-size:1.4rem;color:var(--paper);margin-bottom:12px}
#playback{width:100%;max-width:420px;margin:0 auto 18px;display:block}
.review__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* done view extras */
.share__btns{display:flex;gap:12px;flex-wrap:wrap}
.delete-link{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
#deletion-link{
  flex:1 1 220px;font-family:"Special Elite",monospace;font-size:.82rem;
  background:var(--ink);color:var(--amber);border:2px solid var(--amber);padding:10px 12px;
}

/* ---------- footer ---------- */
footer{
  padding:30px 24px;text-align:center;
  font-family:"Special Elite",monospace;font-size:.74rem;color:var(--dim);
  border-top:2px solid var(--ink-soft);
}
footer a{color:var(--amber);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  .view.is-active,.record.is-recording,.pop-burst span{animation:none}
  html{scroll-behavior:auto}
}