/* ===== Shared by every page. Load BEFORE the page's own <style>, so page rules win. =====
   Only tokens the pages genuinely agree on live here; --card, --text and the
   accent variants differ per page on purpose (light cards in the app, dark
   cards in the hunt and word search) and stay local. */
:root {
  --bg: #1a1a2e;
  --bg2: #16213e;
  --accent: #e94560;
  --green: #4ecca3;
  --gold: #f5c542;
  --radius: 16px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* An author display: rule beats the browser's [hidden] rule; make hidden mean hidden. */
[hidden] { display: none !important; }

/* Visible only to a screen reader: the live region each page uses to say
   "correct" / "3 of 6 found", which used to be colour and a tone alone. */
.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;
}

/* ---- keyboard focus: the one rule the whole project was missing ---- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 8px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- motion: confetti, rainbow titles and 3-D flips all obey this ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- emoji rendered as vendored SVGs (common.js emo()) ----
   Sized in em, so every existing font-size rule for emoji keeps working. */
img.emo {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- the 🏠 corner link every page has ---- */
.corner-home {
  position: absolute;
  top: 16px;
  left: 16px;
  text-decoration: none;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
  z-index: 10;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- one confetti, not three ---- */
.confetti-piece {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}

/* ---- who is playing: chip + picker (activity pages; app.html has its own screen) ---- */
.efk-chip-slot { position: absolute; top: 14px; right: 16px; z-index: 10; }
.efk-chip-slot.efk-chip-center { position: static; display: flex; justify-content: center; margin: 8px 0 16px; }
.efk-chip {
  border: none; border-radius: 25px; padding: 8px 16px; color: white;
  font: 700 0.95rem var(--font); cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  min-height: 40px;
}
.efk-chip:active { transform: scale(0.94); }
.efk-chip-empty { background: rgba(255,255,255,0.15); border: 2px dashed rgba(255,255,255,0.4); }
.efk-picker {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,30,0.85); padding: 16px;
}
.efk-picker-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.efk-picker-title { text-align: center; color: white; font: 800 1.5rem var(--font); margin-bottom: 4px; }
.efk-picker-btn {
  border: none; border-radius: var(--radius); padding: 18px 22px; color: white; text-align: left;
  font: 800 1.4rem var(--font); cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.25); min-height: 64px;
}
.efk-picker-btn:active { transform: scale(0.97); }