/* ==========================================================================
   SPICE — hard neubrutalism
   Visible grid, dry offset shadows, no blur, no rounded corners.
   The accent colour IS the escalation level. Mobile first.
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face{font-family:'Anton';src:url('/fonts/anton-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/space-mono-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- TOKENS ---------- */
:root{
  --bg:#080008;
  --surf:#12000F;
  --surf-2:#1B0518;
  --grid:#241021;
  --dead:#3A1B33;

  --acc:#FF1E7A;
  --cupo:#7D0034;
  --fg:#FFF0F6;
  --dim:#9B7C90;

  --display:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --body:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',monospace;

  --q:clamp(2rem,8.6vw,3rem);
  --gut:clamp(.75rem,3.6vw,1.15rem);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --snap:150ms cubic-bezier(.2,.85,.25,1);
}

/* The level is not decoration. It is the primary state of the machine. */
[data-level='1']{--acc:#FF6BB5;--cupo:#7D2B52}
[data-level='2']{--acc:#FF1E7A;--cupo:#7D0034}
[data-level='3']{--acc:#FF0044;--cupo:#7A0020}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16px;line-height:1.45;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
  /* the blueprint grid, always underneath everything */
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
[hidden]{display:none!important}
ul{list-style:none}

/* mechanical grain, kills the flatness of pure black */
body::after{
  content:'';position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- SCREENS ---------- */
.screen{display:none;position:relative;z-index:1;min-height:100dvh;flex-direction:column;
  padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
body[data-screen='intro'] #intro,
body[data-screen='gate'] #gate,
body[data-screen='setup'] #setup,
body[data-screen='game'] #game,
body[data-screen='end'] #end{display:flex}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.45em;
  min-height:56px;padding:0 1rem;
  font-family:var(--display);font-size:1.22rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--acc);color:#0A0006;border:3px solid var(--acc);
  box-shadow:6px 6px 0 var(--cupo);
  transition:transform var(--snap),box-shadow var(--snap);
}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--cupo)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--dead);box-shadow:6px 6px 0 var(--dead)}
.btn--ghost:active{box-shadow:0 0 0 var(--dead)}
.btn--sm{min-height:48px;font-size:1rem;box-shadow:5px 5px 0 var(--cupo)}
.btn--ghost.btn--sm{box-shadow:5px 5px 0 var(--dead)}
.btn[disabled]{opacity:.34;pointer-events:none}

.kicker{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.wordmark{
  font-family:var(--display);font-size:clamp(4.6rem,26vw,9rem);line-height:.8;
  letter-spacing:-.012em;text-transform:uppercase;color:var(--fg);
  text-shadow:5px 5px 0 var(--acc);
}
.lede{max-width:32ch;font-size:1.02rem;color:var(--dim);border-left:4px solid var(--acc);padding-left:.8rem}
.sect{font-family:var(--display);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:.6rem}
.fine{font-family:var(--mono);font-size:.66rem;line-height:1.65;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.fine b{color:var(--acc);font-weight:400}

/* thin instrument strip, top and bottom of every screen */
.rail{display:flex;gap:.7rem;padding:.5rem var(--gut);font-family:var(--mono);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#4A2A40}
.rail span:last-child{margin-left:auto}

/* ==========================================================================
   INTRO
   ========================================================================== */
#intro{justify-content:center;gap:1.35rem;padding:var(--gut)}
.intro__acts{display:flex;flex-direction:column;gap:.75rem;margin-top:.35rem}

/* ==========================================================================
   AGE GATE
   ========================================================================== */
#gate{justify-content:center;gap:1.1rem;padding:var(--gut)}
.gate__box{border:3px solid var(--acc);background:var(--surf);padding:1.1rem;box-shadow:7px 7px 0 var(--cupo)}
.gate__box h2{font-family:var(--display);font-size:1.9rem;line-height:1;letter-spacing:.01em;text-transform:uppercase;margin-bottom:.7rem}
.gate__box p{font-size:.94rem;color:var(--dim);margin-bottom:.6rem}
.gate__box p:last-child{margin-bottom:0}
.gate__box b{color:var(--fg)}

/* ==========================================================================
   SETUP
   ========================================================================== */
#setup{padding:var(--gut);gap:1.15rem;overflow-y:auto}
.names{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.names input{
  width:100%;min-height:54px;padding:0 .8rem;border-radius:0;
  font-family:var(--display);font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--surf);border:3px solid var(--dead);color:var(--fg);
}
.names input:focus{border-color:var(--acc);outline:none;box-shadow:4px 4px 0 var(--cupo)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  padding:.55rem .75rem;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  background:var(--surf);border:2px solid var(--dead);transition:transform var(--snap);
}
.chip[aria-pressed='true']{color:#0A0006;background:var(--acc);border-color:var(--acc);box-shadow:3px 3px 0 var(--cupo)}
.chip:active{transform:translate(2px,2px)}
.setup__tail{margin-top:auto;padding-top:.5rem;display:flex;flex-direction:column;gap:.65rem}

/* level blocks, reused by the setup and the in-game picker */
.levels{display:grid;gap:.5rem}
.lvl{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.85rem;
  padding:.85rem .9rem;text-align:left;
  background:var(--surf);border:3px solid var(--dead);
}
.lvl strong{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--dim);line-height:1}
.lvl b{display:block;font-family:var(--display);font-size:1.14rem;letter-spacing:.07em;text-transform:uppercase;color:var(--fg)}
.lvl small{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.lvl[data-l='1']{--acc:#FF6BB5;--cupo:#7D2B52}
.lvl[data-l='2']{--acc:#FF1E7A;--cupo:#7D0034}
.lvl[data-l='3']{--acc:#FF0044;--cupo:#7A0020}
.lvl[aria-pressed='true']{border-color:var(--acc);box-shadow:5px 5px 0 var(--cupo)}
.lvl[aria-pressed='true'] strong{color:var(--acc)}
.lvl:active{transform:translate(2px,2px)}

/* ==========================================================================
   GAME
   ========================================================================== */
#game{padding:0 var(--gut) calc(.7rem + var(--safe-b))}
.bar{display:flex;align-items:stretch;gap:.45rem;padding:.7rem 0 .6rem}
/* the level tag is a button: the level can be changed on any card */
.tag{
  display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;
  font-family:var(--display);font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--acc);color:#0A0006;box-shadow:4px 4px 0 var(--cupo);
  transition:transform var(--snap),box-shadow var(--snap);
}
.tag:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--cupo)}
.tag i{font-style:normal;font-size:.7rem;opacity:.7}
.count{margin-left:auto;align-self:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--dim)}
.count b{color:var(--acc);font-weight:700}
.icon{width:42px;display:grid;place-items:center;font-size:1.1rem;color:var(--dim);border:2px solid var(--dead);box-shadow:3px 3px 0 var(--dead)}
.icon:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--dead)}

.card{
  flex:1;display:flex;flex-direction:column;padding:clamp(.9rem,4.4vw,1.4rem);
  background:var(--surf);border:4px solid var(--acc);box-shadow:9px 9px 0 var(--cupo);
}
.card[data-in]{animation:in var(--snap) both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card__top{display:flex;gap:.6rem;align-items:baseline}
.card__cat{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--acc)}
.card__fmt{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.card__q{
  display:flex;align-items:center;flex:1;padding:1rem 0;
  font-family:var(--display);font-weight:400;font-size:var(--q);
  line-height:.98;letter-spacing:.004em;text-transform:uppercase;text-wrap:pretty;
}
.card__turn{
  align-self:flex-start;padding:.4rem .7rem;
  font-family:var(--display);font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--acc);border:3px solid var(--acc);box-shadow:4px 4px 0 var(--cupo);
}
/* a dare inverts the whole card. Readable across a dark room. */
.card[data-f='dare']{background:var(--acc);border-color:#0A0006;box-shadow:9px 9px 0 #0A0006;color:#0A0006}
.card[data-f='dare'] .card__cat,
.card[data-f='dare'] .card__fmt{color:#0A0006}
.card[data-f='dare'] .card__turn{color:#0A0006;border-color:#0A0006;box-shadow:4px 4px 0 #0A0006}
.card[data-f='both']{outline:4px solid var(--acc);outline-offset:7px}

/* 1-10 scale */
.scale{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:.5rem}
.scale button{aspect-ratio:1;font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--dim);background:var(--surf-2);border:2px solid var(--dead)}
.scale button[aria-pressed='true']{color:#0A0006;background:var(--acc);border-color:var(--acc)}

/* dare timer */
.timer{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.timer button{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem .7rem;border:2px solid #0A0006;color:#0A0006}
.timer output{font-family:var(--mono);font-size:1.4rem;font-weight:700;color:#0A0006}

.acts{display:grid;grid-template-columns:1fr 58px 1.45fr;gap:.5rem;padding-top:.7rem}
.star[aria-pressed='true']{color:#0A0006;background:var(--acc);border-color:var(--acc);box-shadow:5px 5px 0 var(--cupo)}

/* ==========================================================================
   SHEETS  (level picker, settings)
   ========================================================================== */
.sheet{
  position:fixed;inset:0;z-index:80;display:none;flex-direction:column;justify-content:flex-end;
  background:rgba(8,0,8,.9);
}
.sheet[data-open]{display:flex}
.sheet__in{
  background:var(--bg);border-top:4px solid var(--acc);
  padding:var(--gut);padding-bottom:calc(var(--gut) + var(--safe-b));
  display:flex;flex-direction:column;gap:.8rem;max-height:88dvh;overflow-y:auto;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
}
.sheet h2{font-family:var(--display);font-size:1.7rem;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.sheet p{font-size:.9rem;color:var(--dim)}
.row{display:flex;gap:.5rem}
.row>*{flex:1}

/* interstitial: full-bleed, it interrupts the game on purpose */
.veil{position:fixed;inset:0;z-index:85;display:none;flex-direction:column;justify-content:center;gap:1rem;
  padding:var(--gut);padding-bottom:calc(var(--gut) + var(--safe-b));background:rgba(8,0,8,.96)}
.veil[data-open]{display:flex}
.veil>*{width:100%;max-width:560px;margin-inline:auto}
.veil h2{font-family:var(--display);font-size:clamp(2.4rem,12vw,3.6rem);line-height:.9;text-transform:uppercase;
  text-shadow:5px 5px 0 var(--acc)}
.veil p{max-width:36ch;color:var(--dim)}

/* ==========================================================================
   END
   ========================================================================== */
#end{padding:var(--gut);gap:1rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.stats div{padding:.8rem .6rem;background:var(--surf);border:2px solid var(--dead)}
.stats b{display:block;font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--acc)}
.stats span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.saved{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;-webkit-overflow-scrolling:touch}
.saved li{padding:.75rem .85rem;font-weight:700;font-size:.97rem;line-height:1.25;background:var(--surf);border-left:5px solid var(--acc)}
.end__tail{display:flex;flex-direction:column;gap:.6rem}

/* ==========================================================================
   LARGE SCREENS — it stays a phone-shaped object, centred
   ========================================================================== */
@media (min-width:620px){
  .screen{max-width:560px;margin:0 auto;width:100%}
  .sheet__in{max-width:560px;margin:0 auto;width:100%;border-left:4px solid var(--acc);border-right:4px solid var(--acc)}
  :root{--q:clamp(2.3rem,3.6vw,3.1rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}