:root{
  --bone:#F4EFE4;
  --bone-2:#EFE9DB;
  --ink:#1B1713;
  --ink-soft:rgba(27,23,19,.66);
  --accent:#C0211F;
  --serif:"Bodoni Moda",serif;
  --sans:"Archivo",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--bone);}
body{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

/* film grain over everything, same trick as the editorial */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;
  opacity:.10;mix-blend-mode:multiply;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#stage{position:fixed;inset:0;display:block;width:100%;height:100%;}

/* ---- HUD ---- */
#hud{
  position:fixed;top:0;left:0;right:0;z-index:10;
  padding:calc(env(safe-area-inset-top) + .6rem) .9rem .4rem;
  pointer-events:none;
}
#hud button,#hud .masthead{pointer-events:auto;}
.hud__row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;}
.hud__row--2{margin-top:.25rem;}
.iconbtn{
  width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--ink);
  background:var(--bone);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;
}
.iconbtn:active{transform:scale(.94);}
.masthead{
  font-family:var(--serif);font-weight:800;font-style:italic;letter-spacing:.06em;
  font-size:1.25rem;color:var(--ink);cursor:pointer;
  text-shadow:0 1px 0 rgba(244,239,228,.7);
}
.score{font-family:var(--serif);font-weight:700;font-size:1.15rem;min-width:3.5rem;text-align:right;}
.lvl{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.05rem;color:var(--ink-soft);}
.ammo{display:flex;gap:.3rem;}
.pip{
  width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:.85rem;color:var(--ink);
  background:var(--bone);border:2px solid var(--ink);
  opacity:.5;transform:scale(.85);transition:.2s;
}
.pip.next{opacity:1;transform:scale(1);background:var(--accent);color:var(--bone);border-color:var(--ink);}
.meter{margin-top:.45rem;height:4px;background:var(--bone-2);border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(27,23,19,.12);}
.meter__fill{height:100%;width:0;background:var(--accent);transition:width .25s ease;}

/* ---- hint ---- */
.hint{
  position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + .8rem);z-index:10;
  text-align:center;font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);
  pointer-events:none;animation:fade 5s 3s forwards;
}
.hint b{color:var(--accent);}
@keyframes fade{to{opacity:0;}}

.exit{
  position:fixed;top:calc(env(safe-area-inset-top) + .6rem);left:.9rem;z-index:11;display:none;
}

/* ---- win/lose banner ---- */
.banner{
  position:fixed;inset:0;z-index:20;display:none;
  place-content:center;justify-items:center;text-align:center;gap:.8rem;
  background:rgba(244,239,228,.88);backdrop-filter:blur(3px);padding:2rem;
}
.banner.show{display:grid;animation:pop .3s ease both;}
@keyframes pop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
.banner .stars{font-size:2.4rem;color:var(--accent);letter-spacing:.1em;}
.banner h2{font-family:var(--serif);font-size:2.6rem;font-weight:800;font-style:italic;line-height:1;}
.banner p{color:var(--ink-soft);}
.banner button{
  margin-top:.4rem;font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:.8rem 1.6rem;border:none;border-radius:2rem;cursor:pointer;
  background:var(--accent);color:var(--bone);letter-spacing:.02em;
}
.banner button:active{transform:scale(.96);}
.banner .hidden{display:none;}

/* scratch-card prize (end of game) */
.card{display:grid;justify-items:center;gap:.55rem;margin:.3rem 0;width:100%;}
.prize__kicker{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.prize__frame{
  background:var(--bone-2);border:2px solid var(--ink);border-radius:.9rem;padding:.5rem;
  box-shadow:0 10px 30px rgba(27,23,19,.22);
}
.card.revealed .prize__frame{animation:prizePop .42s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes prizePop{0%{transform:scale(.84);}60%{transform:scale(1.06);}100%{transform:scale(1);}}
.prize__photo{position:relative;width:240px;max-width:74vw;aspect-ratio:1/1;border-radius:.55rem;overflow:hidden;border:1px solid var(--ink);}
.prize__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.12) saturate(1.1);}
.prize__photo #scratch,.prize__photo #scratchfx{position:absolute;inset:0;width:100%;height:100%;}
.prize__photo #scratch{cursor:grab;touch-action:none;transition:opacity .38s ease;}
.prize__photo #scratch.gone{opacity:0;pointer-events:none;}
.prize__photo #scratch:active{cursor:grabbing;}
.prize__photo #scratchfx{pointer-events:none;}
/* shine sweep on reveal */
.prize__photo::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(244,239,228,.55),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;}
.card.revealed .prize__photo::after{animation:shine .8s ease .28s 1;}
@keyframes shine{0%{left:-60%;opacity:0;}20%{opacity:1;}100%{left:120%;opacity:0;}}
.prize__name{font-family:var(--serif);font-style:italic;font-weight:800;font-size:2rem;line-height:1;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .3s ease .25s,transform .3s ease .25s;}
.prize__blurb{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);max-width:30ch;text-align:center;text-wrap:balance;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease .35s,transform .3s ease .35s;}
.card.revealed .prize__name,.card.revealed .prize__blurb{opacity:1;transform:none;}
.reveal-now{
  margin-top:.2rem;min-height:44px;padding:.55rem 1.1rem;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.85rem;letter-spacing:.02em;
  background:var(--bone);color:var(--ink);border:2px solid var(--ink);border-radius:2rem;
}
.reveal-now:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.reveal-now.urgent{background:var(--accent);color:var(--bone);animation:nudge 1s ease infinite;}
.card.revealed .reveal-now{display:none;}
@keyframes nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (prefers-reduced-motion:reduce){
  .card.revealed .prize__frame,.card.revealed .prize__photo::after{animation:none;}
  .prize__name,.prize__blurb{transition:opacity .2s;}
  .reveal-now.urgent{animation:none;}
}

/* ---- settings panel ---- */
.panel{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 1rem);
  transform:translate(-50%,140%);z-index:30;
  width:min(92vw,360px);background:var(--bone);
  border:2px solid var(--ink);border-radius:1.2rem;padding:1.1rem 1.2rem;
  box-shadow:0 12px 40px rgba(27,23,19,.25);transition:transform .3s cubic-bezier(.16,.84,.3,1);
}
.panel.show{transform:translate(-50%,0);}
.panel h3{font-family:var(--serif);font-style:italic;font-size:1.3rem;margin-bottom:.7rem;}
.panel .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;}
.panel .row span:first-child{color:var(--ink-soft);}
.panel .na{font-size:.78rem;color:var(--ink-soft);font-style:italic;}
.tgl,.seg button{
  min-width:44px;min-height:32px;padding:.3rem .8rem;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.85rem;
  border:2px solid var(--ink);border-radius:1rem;background:var(--bone);color:var(--ink);
}
.tgl.on{background:var(--accent);color:var(--bone);}
.seg{display:flex;gap:.3rem;}
.seg button{min-width:0;padding:.3rem .6rem;text-transform:capitalize;}
.seg button.on{background:var(--ink);color:var(--bone);}
.panel .close{
  margin-top:.9rem;width:100%;min-height:44px;border:none;border-radius:1rem;cursor:pointer;
  background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:600;
}

/* ---- toast (easter-egg reveals) ---- */
.toast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 4.5rem);transform:translate(-50%,-140%);
  z-index:25;width:min(90vw,340px);
  background:var(--ink);color:var(--bone);border-radius:.9rem;padding:.8rem 1rem;
  display:grid;gap:.2rem;opacity:0;transition:transform .4s cubic-bezier(.16,.84,.3,1),opacity .4s;
}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast b{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--bone);}
.toast span{font-size:.82rem;color:rgba(244,239,228,.72);line-height:1.4;}

/* ---- hidden credit speck (find it if you can) ---- */
.speck{
  position:fixed;right:1.1rem;bottom:calc(env(safe-area-inset-bottom) + .5rem);
  width:4px;height:4px;background:rgba(27,23,19,.5);border-radius:50%;z-index:12;cursor:pointer;
}

/* ---- locked card (no finale yet) ---- */
.lockcard{display:none;}
body.locked{background:var(--bone);overflow:auto;}
body.locked #stage,body.locked #hud,body.locked .hint,body.locked .exit,
body.locked .panel,body.locked .toast,body.locked .speck{display:none;}
body.locked .lockcard{display:grid;place-content:center;gap:1rem;text-align:center;min-height:100%;padding:2rem;}
.lockcard .eyebrow{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;}
.lockcard h1{font-family:var(--serif);font-size:2.4rem;font-weight:800;}
.lock__lede{color:var(--ink-soft);max-width:24ch;margin:0 auto;}
.lock__back{margin-top:.5rem;color:var(--accent);text-decoration:none;font-weight:600;border-bottom:1px solid currentColor;justify-self:center;}

@media (prefers-reduced-motion:reduce){
  .hint{animation:none;}
  .banner.show,.panel,.toast{animation:none;transition:opacity .2s;}
}

/* ---------- pre-game instruction card ---------- */
.intro{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:2rem;background:rgba(244,239,228,.92);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:introIn .35s ease both;
}
.intro__card{width:min(92vw,360px);display:grid;gap:1rem;justify-items:center;text-align:center;}
.intro .eyebrow{font-family:var(--serif);font-style:italic;color:var(--accent);
  letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;}
.intro h2{font-family:var(--serif);font-size:2rem;font-weight:800;line-height:1;margin:0;color:var(--ink);}
.intro__steps{display:grid;gap:.7rem;width:100%;text-align:left;margin:.1rem 0 .2rem;}
.intro__step{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;
  margin:0;color:var(--ink);font-size:1rem;line-height:1.3;}
.intro__num{font-family:var(--serif);font-weight:800;color:var(--accent);
  width:1.7em;height:1.7em;border:1.5px solid var(--accent);border-radius:50%;
  display:grid;place-items:center;font-size:.82rem;}
.intro__start{
  margin-top:.3rem;cursor:pointer;border:none;-webkit-tap-highlight-color:transparent;
  font-family:var(--sans);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:.95rem;color:var(--bone);background:var(--accent);
  padding:.82em 1.7em;border-radius:2em;
  box-shadow:0 10px 26px rgba(192,33,31,.30);
}
.intro__start:active{transform:scale(.97);}
.intro.hide{opacity:0;pointer-events:none;transition:opacity .32s ease;}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .intro{animation:none;} }