/* lantern-player — base + scare themes. Theme = body[data-scare]. */
:root { --bg:#fff7ea; --ink:#2b2118; --accent:#e07b24; --card:#ffffff; }
body[data-scare="spooky"]    { --bg:#1d1830; --ink:#efe9ff; --accent:#9d6bff; --card:#2a2344; }
body[data-scare="afterdark"]{ --bg:#0b0b10; --ink:#d8d4c8; --accent:#b8a86a; --card:#17171f; }
body[data-scare="overdrive"] { --bg:#1a0a0a; --ink:#ffe8e0; --accent:#e0311a; --card:#2a1210; }

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--ink);
       font-size:19px; line-height:1.45; transition: background .4s; }
main { max-width: 560px; margin: 0 auto; padding: 20px 16px 48px; }
.screen { display:none; } .screen.active { display:block; animation: screenIn .3s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
h1 { font-size: 2rem; } .story { font-style: italic; }
label { display:block; margin: 14px 0; }
input { width:100%; padding:12px; font-size:1rem; border-radius:10px; border:2px solid var(--accent);
        background:var(--card); color:var(--ink); margin-top:6px; min-height:48px; }
input:focus { outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
button { background:var(--accent); color:#fff; border:0; border-radius:12px;
         padding:14px 20px; font-size:1.05rem; cursor:pointer; margin:8px 4px 8px 0;
         transition: transform .1s, filter .15s; min-height:48px; }
button:hover { filter: brightness(1.08); }
button:active { transform: scale(.97); }
button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.card, .scare-card { background:var(--card); border-radius:14px; padding:16px; margin:12px 0;
                     box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.scare-card { display:block; width:100%; text-align:left; color:var(--ink); }
.scare-card img { width:76px; height:76px; border-radius:50%; object-fit:cover; float:left; margin:0 12px 4px 0; border:2px solid var(--accent, #e07b24); }
.scare-card span { display:block; font-size:.95rem; opacity:.85; margin-top:4px; }
.scare-card[data-pick="overdrive"] img { border-color: #b32318; }
.scare-card.selected { outline:3px solid var(--accent); outline-offset:2px; }
.scare-card { transition: outline .15s; cursor:pointer; }
#map { height: 320px; border-radius:14px; }
.fineprint, #hint-text { opacity:.85; }
#feedback { font-weight: 600; min-height: 1.5em; }

/* Brand (added 2026-10-11 with the locked Dr. Z logo) */
.brand-logo { display: block; width: min(250px, 68vw); margin: 4px auto 14px; border-radius: 18px; }
.story-art { display: block; width: min(420px, 92vw); margin: 6px auto 12px; border-radius: 14px; }
#relics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.relic { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; background: #fff; color: #2b2118; border: 1.5px solid var(--accent, #e07b24); }
.relic.locked { filter: grayscale(1) brightness(.55); }
.relic:not(.locked) { animation: relicPop .4s ease-out; }
@keyframes relicPop { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
#wisp-meter .dots { font-size: 1.5rem; letter-spacing: 3px; margin: 4px 0; }
#wisp-meter { background: var(--card); border-radius: 12px; padding: 10px 14px; margin: 10px 0;
              box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wisp-mood { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; display: block; margin: 8px auto; border: 3px solid var(--accent, #e07b24); background: #fff; }
.stop-marker { background: none; border: none; }
.stop-marker img, .stop-marker .pin-fallback { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); background: #fff7ea; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.stop-marker.lit img, .stop-marker.lit .pin-fallback { border-color: #ffd34d; box-shadow: 0 0 12px #ffd34d; }
.wisp-speech { background: #eaf6f3; color: #1a3a34; border: 1.5px solid #57b8a5; border-left-width: 6px; border-radius: 12px; padding: 10px 12px; font-style: italic; margin: 10px 0; }
#btn-hint:disabled { opacity: .5; }
.lab-note { background: #fff; color: #2b2118; border: 1.5px dashed var(--accent, #e07b24); border-radius: 12px; padding: 10px 12px; font-size: .95rem; }

/* Live geolocation UI (2026-10-15) */
.arrival-banner { background:#e8f5e9; border:2px solid #43a047; border-radius:12px; padding:12px; margin:10px 0; }
.arrival-banner button { margin:8px 0 0; }
.geo-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; font-weight:600; }
.geo-weak { font-weight:400; font-size:.85rem; opacity:.8; }
.nav-btn { display:inline-block; background:#1a73e8; color:#fff; border-radius:12px; padding:14px 20px; font-size:1.05rem; text-decoration:none; margin:8px 4px 8px 0; }
.ghost-btn { background:transparent; color:var(--ink); border:2px solid var(--accent); }
.stop-list { padding-left:22px; }
.stop-list li { margin:10px 0; }
.stop-list .nav-btn { padding:8px 12px; font-size:.95rem; }
.verified-chip { font-size:.8rem; background:#e8f5e9; color:#2e7d32; border-radius:99px; padding:4px 10px; vertical-align:middle; white-space:nowrap; }
body[data-scare="spooky"] .arrival-banner, body[data-scare="afterdark"] .arrival-banner { background:#1c2b22; }
body[data-scare="spooky"] .verified-chip, body[data-scare="afterdark"] .verified-chip { background:#1c2b22; color:#9ccc9c; }

/* Overdrive theme overrides for light-background elements */
body[data-scare="overdrive"] .arrival-banner { background:#2a1512; border-color:#e0311a; }
body[data-scare="overdrive"] .verified-chip { background:#2a1512; color:#ff9a8a; }
body[data-scare="overdrive"] .wisp-speech { border-color:#e0311a; }

/* Global features */
.lang-switcher { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; justify-content:center; }
.lang-btn { padding:6px 12px; border-radius:8px; border:2px solid var(--accent); background:var(--card); color:var(--ink); cursor:pointer; font-size:.85rem; }
.lang-btn.active { background:var(--accent); color:#fff; }
.lang-btn:hover { filter:brightness(1.1); }

.global-leaderboard { margin:20px 0; }
.lb-entry { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid var(--line); }
.lb-rank { font-weight:700; min-width:30px; }
.lb-team { flex:1; }
.lb-flag { font-size:1.2rem; }
.lb-score { font-weight:700; color:var(--accent); }
.lb-location { font-size:.8rem; opacity:.7; }

.community-discovery { margin:20px 0; }
.community-card { background:var(--card); border-radius:12px; padding:12px; margin:8px 0; }
.community-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.community-flag { font-size:1.5rem; }
.community-name { font-weight:700; }
.community-meta { display:flex; gap:12px; font-size:.85rem; opacity:.8; margin-bottom:8px; }
.community-join { width:100%; }

.achievement-toast { position:fixed; top:20px; right:20px; background:var(--card); border:2px solid var(--accent); border-radius:12px; padding:16px; display:flex; gap:12px; align-items:center; box-shadow:0 4px 20px rgba(0,0,0,.15); z-index:10000; animation:slideIn .3s ease-out; }
.achievement-icon { font-size:2rem; }
.achievement-text strong { display:block; }
.achievement-text p { margin:4px 0 0; font-size:.85rem; opacity:.8; }

@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:none; opacity:1; } }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:10000; }
.modal-content { background:var(--card); border-radius:16px; padding:24px; max-width:400px; width:90%; }
.modal-content h3 { margin-top:0; }
.modal-content input { width:100%; padding:12px; margin:12px 0; border-radius:8px; border:2px solid var(--accent); }

[dir="rtl"] .lb-entry { flex-direction:row-reverse; }
[dir="rtl"] .achievement-toast { right:auto; left:20px; }
[dir="rtl"] @keyframes slideIn { from { transform:translateX(-100%); opacity:0; } to { transform:none; opacity:1; } }

/* Story elements */
.story-intro { font-size:1.1rem; font-style:italic; background:var(--card); border-left:4px solid var(--accent); padding:12px 16px; margin:12px 0; border-radius:0 12px 12px 0; }
.story-outro { font-size:1.1rem; font-style:italic; background:var(--card); border-left:4px solid var(--accent); padding:12px 16px; margin:12px 0; border-radius:0 12px 12px 0; }
.story-transition { text-align:center; font-style:italic; opacity:.8; padding:16px; animation:fadeIn 1s ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.mode-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; background:var(--card); font-weight:600; font-size:.85rem; margin:8px 0; }
.culture-tag { font-size:.75rem; opacity:.7; margin-left:8px; }

/* Story mode selector */
.mode-selector { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; justify-content:center; }
.mode-btn { padding:6px 12px; border-radius:8px; border:2px solid var(--accent); background:var(--card); color:var(--ink); cursor:pointer; font-size:.85rem; }
.mode-btn.active { background:var(--accent); color:#fff; }
.mode-btn:hover { filter:brightness(1.1); }

/* Hunt clock */
.hunt-clock { font-size:1.1rem; font-weight:700; text-align:center; padding:8px; background:var(--card); border-radius:10px; margin:8px 0; }

/* Finale actions row */
.finale-actions { display:flex; gap:10px; flex-wrap:wrap; margin:16px 0; }
.finale-actions button { flex:1; min-width:140px; }

/* Offline banner */
#offline-banner { position:fixed; bottom:0; left:0; right:0; background:#e07b24; color:#fff; text-align:center; padding:8px; font-weight:600; z-index:9999; }

/* Touch feedback */
button:active { transform:scale(.96); }
input:focus { outline:3px solid var(--accent); outline-offset:2px; }

/* Loading state */
.loading { opacity:.6; pointer-events:none; }
.spinner { display:inline-block; width:20px; height:20px; border:3px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Keyboard navigation */
button:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
[role="button"]:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

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


/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 100000;
  transition: top 0.2s;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for all interactive elements */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .screen.active {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  .scare-card {
    border: 2px solid ButtonText;
  }
  .scare-card.selected {
    border: 3px solid Highlight;
  }
  button {
    border: 2px solid ButtonText;
  }
  input {
    border: 2px solid ButtonText;
  }
}


/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 100000;
  transition: top 0.2s;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for all interactive elements */
*:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .screen.active {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (forced-colors: active) {
  .scare-card {
    border: 2px solid ButtonText;
  }
  .scare-card.selected {
    border: 3px solid Highlight;
  }
  button {
    border: 2px solid ButtonText;
  }
  input {
    border: 2px solid ButtonText;
  }
}