/* ============================================================================
   SCCD Arcade — shared styles
   Brand tokens mirror colors_and_type.css (the live strathroycanadaday.com).
   Lifted + generalized from the verified egg-catch.html. Brand red = #ED1C24.
   ============================================================================ */
:root{
  --red:#ED1C24; --red-deep:#C4151C; --red-bright:#FF2A30; --red-soft:#FBE3E4;
  --white:#FFFFFF; --cream:#FAF6F2; --cream-2:#FFF8F0; --sand:#E8E0DE;
  --ink:#231F20; --ink-2:#3A3536; --ink-3:#6E6669;
  --gold:#E8B84B; --moon:#F7EBD3;
  /* night-of-event canvas surface */
  --night-0:#14060A; --night-1:#3F0B0E; --night-2:#6F1118;
  --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--night-0); color:var(--moon);
  font-family:var(--font-body);
  display:flex;justify-content:center;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#stage{position:relative;width:100%;max-width:560px;height:100dvh}
#game{display:block;width:100%;height:100%;touch-action:none}

/* ---- overlays (start / over / pause) ------------------------------------ */
.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px 20px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(20,6,10,.82),rgba(63,11,14,.9));
  z-index:5;
}
.hidden{display:none!important}
.overlay>*{position:relative}
.eyebrow{
  font-family:var(--font-display);font-weight:800;letter-spacing:.24em;
  font-size:clamp(12px,3.4vw,15px);color:var(--red);text-transform:uppercase;
}
h1{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,12vw,64px);line-height:.95;margin:6px 0 2px;
  color:var(--cream);text-shadow:0 4px 24px rgba(0,0,0,.6);letter-spacing:-.02em;
}
.presented{font-size:clamp(14px,3.8vw,16px);color:var(--cream);opacity:.95;margin-bottom:18px}
.presented strong{color:var(--gold);font-weight:600}
/* one-line italic gold hook under the flavour line — every game's start screen carries one */
.psTag{font-size:clamp(12px,3.4vw,14px);color:var(--gold);opacity:.92;font-style:italic;margin:-10px 0 16px}
.howto{
  display:flex;flex-direction:column;gap:8px;margin:0 0 20px;font-size:clamp(13px,3.6vw,15px);
  color:var(--cream);opacity:.92;
}
.howto span{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left}
.howto .ic{width:26px;text-align:center;flex:none;font-size:18px}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  border:0;border-radius:999px;cursor:pointer;color:var(--cream);
  min-height:56px;padding:16px 48px;font-size:18px;
  background:var(--red);box-shadow:0 6px 24px rgba(237,28,36,.45);
  transition:transform .12s ease;
}
.btn:active{transform:scale(.96)}
.btn.secondary{
  background:transparent;border:2px solid var(--gold);color:var(--gold);
  box-shadow:none;font-size:15px;min-height:48px;padding:12px 28px;
}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}

/* ---- credits / misc ----------------------------------------------------- */
.credit{
  position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));
  font-size:11px;color:var(--cream);opacity:.5;letter-spacing:.02em;
}
.credit a{color:inherit;text-decoration:none}
.von{margin-top:20px;max-width:340px;font-size:13px;line-height:1.5;opacity:.92}
.von a{
  display:inline-block;margin-top:8px;color:var(--gold);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:10px 6px 0;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- game-over score readout ------------------------------------------- */
.scoreLabel{font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.finalScore{
  font-family:var(--font-display);font-weight:900;font-size:clamp(64px,20vw,96px);
  line-height:1;color:var(--gold);text-shadow:0 6px 30px rgba(232,184,75,.35);margin:4px 0 0;
}
.bestLine{margin:10px 0 4px;font-size:15px;opacity:.9}
.newBest{
  display:inline-block;background:var(--gold);color:var(--night-0);font-weight:800;
  font-family:var(--font-display);border-radius:6px;padding:3px 10px;font-size:13px;
  letter-spacing:.06em;margin-left:6px;
}
#shareNote{font-size:13px;color:var(--gold);height:18px;margin-top:8px}
/* arcade-ticket earn line on game over ("+N 🎟️") — contract: small, gold, one line.
   Targeted by id — every game names the element #ticketLine; no local overrides needed. */
#ticketLine{font:700 15px 'Inter','Segoe UI',system-ui,sans-serif;color:var(--gold);letter-spacing:.04em;margin-top:4px}

/* ---- mode selector ------------------------------------------------------ */
.modes{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap;justify-content:center}
.mode{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  font-size:12px;color:var(--cream);background:rgba(247,235,211,.10);
  border:1.5px solid rgba(247,235,211,.28);border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer;
  transition:transform .1s ease;
}
.mode:active{transform:scale(.95)}
.mode.sel{background:var(--red);border-color:var(--red);color:#fff}

/* ---- leaderboard + meta ------------------------------------------------- */
.boardTitle{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.board{list-style:none;margin:8px 0 0;padding:0;width:230px;max-width:82vw;font-size:13px}
.board li{display:flex;align-items:center;gap:8px;padding:3px 2px;border-bottom:1px solid rgba(247,235,211,.12)}
.board li .rank{color:var(--gold);font-weight:700;width:16px;text-align:right}
.board li .nm{flex:1;text-align:left;letter-spacing:.14em;font-family:var(--font-display);font-weight:700}
.board li .sc{font-family:var(--font-display);font-weight:800;color:var(--cream)}
.lifetime{font-size:12px;opacity:.8;margin-top:10px;letter-spacing:.04em}
.initials{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0 2px}
.initials input{
  width:130px;text-align:center;text-transform:uppercase;letter-spacing:.34em;
  font-family:var(--font-display);font-weight:800;font-size:24px;
  background:rgba(247,235,211,.12);border:1.5px solid var(--gold);border-radius:8px;color:var(--cream);
  padding:8px;min-height:48px;
}

/* ---- top-corner buttons ------------------------------------------------- */
#muteBtn{
  position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;z-index:6;
  width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(247,235,211,.35);
  background:rgba(20,6,10,.55);color:var(--cream);font-size:20px;cursor:pointer;
}
#pauseBtn{
  position:absolute;top:calc(10px + env(safe-area-inset-top));right:66px;z-index:6;
  width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(247,235,211,.35);
  background:rgba(20,6,10,.55);color:var(--cream);font-size:18px;cursor:pointer;
}
.backlink{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));z-index:6;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--cream);text-decoration:none;
  background:rgba(20,6,10,.55);border:1.5px solid rgba(247,235,211,.35);border-radius:999px;
  padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;
}

@media (prefers-reduced-motion: reduce){
  .btn,.mode{transition:none}
}