/* ================================
   Reset and base styles
==================================*/
* {
    font-family: 'Inconsolata', monospace;
    color: white;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ================================
   Body
==================================*/
body {
    font-family: 'Courier New', monospace;
    background-color: black;
    color: white;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    animation: fadeInCenter 0.3s ease-out;
}

/* ================================
   Fade-in animations
==================================*/
@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================
   Layout structure
==================================*/
.wizard-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1700px;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* ================================
   Header
==================================*/
.wizard-header {
    width: 100%;
    max-width: 900px;
    text-align: center;
    margin: 0 auto 2rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    animation: fadeInCenter 0.5s ease-out forwards;
    animation-delay: 0.1s;
}

.wizard-title {
    font-family: 'Inconsolata', monospace;
    font-size: 2.5rem;
    color: #ffd700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
}

.wizard-desc {
    font-size: 1.2rem;
    color: #ccc;
    margin: 0.5rem auto;
    max-width: 800px;
    line-height: 1.6;
}

/* ================================
   Counters section
==================================*/
.wizard-counters {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1rem;
    opacity: 0;
    animation: fadeInCenter 0.5s ease-out forwards;
    animation-delay: 0.3s;
}

.splitflap-group {
    display: inline-block;
    margin: 0;
}

/* ================================
   Splitflap appearance
==================================*/
.splitflap {
    font-size: 4rem;
    padding: 20px;
    background-color: #222;
    color: #fff;
    border-radius: 8px;
    margin: 0 1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    min-width: 120px;
    letter-spacing: 0.1em;
}

.splitflap-label {
    font-size: 1.2rem;
    color: #aaa;
    text-align: center;
    margin-top: 0.5rem;
}

.splitflap-group {
    display: inline-block;
    vertical-align: top;
    margin: 0 2rem;
}

/* ================================
   Responsive layouts
==================================*/
@media (min-width: 1701px) {
    .wizard-flex {
        flex-direction: row;
        align-items: center;
        gap: 4rem;
    }
    .wizard-header {
        flex: 1 1 40%;
        margin: 0;
        text-align: left;
    }
    .wizard-counters {
        flex: 1 1 60%;
    }
}

@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
    }
    .wizard-flex {
        padding: 1rem;
        margin: 0 auto;
    }
    .wizard-header {
        margin-bottom: 2rem;
    }
    .wizard-title {
        white-space: normal;
        word-wrap: break-word;
        font-size: 2rem;
    }
    .wizard-desc {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {
    .wizard-counters {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        width: 100%;
    }
    .splitflap-group {
        margin: 1.5rem auto;
    }
    body {
        padding: 1rem;
    }
    .splitflap {
        min-width: 120px !important;
    }
}

@media (max-width: 600px) {
    .splitflap-group {
        display: block;
        margin: 1rem auto;
        text-align: center;
    }
    .splitflap {
        font-size: 2.2rem;
        min-width: 70px;
        padding: 12px;
    }
    .splitflap-label {
        font-size: 1rem;
    }
    body {
        padding: 0.5rem;
    }
    .wizard-title {
        font-size: 1.5rem;
    }
    .wizard-desc {
        font-size: 0.95rem;
        max-width: 98vw;
    }
}

/* ================================
   Utility
==================================*/
.center-this {
    margin: auto;
    width: 50%;
    padding: 20px;
}

/* =========================================
   Dark-only: let browsers/controls match dark UI
========================================= */
:root {
  color-scheme: dark;
}

/* =========================================
   Map & dot system (moved from index.html <head>)
========================================= */
:root{
  /* Brand colors */
  --brand-yellow:#ffd700; /* total (main) quests */
  --brand-blue:#87ceeb;   /* side quests */
  --brand-red:#ff6347;    /* failed quests */
  --brand-purple:#b388ff; /* active quests */
  --brand-teal:#00ffcc;   /* final marker */

  /* === IT Status color classes (used by updateHeaderUI) === */
  #it-status-answer.is-final    { color: var(--brand-teal,  #00ffcc); }
  #it-status-answer.is-progress { color: var(--brand-purple,#b388ff); }

  /* Responsive dot sizing: smaller on phones, never huge on desktop */
  --dot-size: clamp(4px, 0.85vw, 9px);
  --final-size: calc(var(--dot-size) + 4px);

  /* Cluster chip sizing (kept smaller than typical dots) */
  --cluster-size: clamp(6px, 0.7vw, 10px);
}

/* Animations: unify behavior. Regular dots twinkle gently; active a touch faster. */
@keyframes twinkle { 0%,100% { opacity:.78; transform:scale(1); } 50% { opacity:.95; transform:scale(1.12); } }
@keyframes twinkle-final { 0%,100% { opacity:.9; transform:scale(1); } 50% { opacity:1; transform:scale(1.25); } }

/* Base dot styles */
.quest-dot{
  position:absolute;
  width:var(--dot-size);height:var(--dot-size);
  border-radius:50%;
  box-shadow:0 0 6px currentColor;
  opacity:.9;
  transform:translate(-50%,-50%);
  animation: twinkle 5.2s ease-in-out infinite;
}
/* Slightly smaller main map dots to emphasize vastness */
.quest-dot.total  { color:var(--brand-yellow); background:var(--brand-yellow); width:calc(var(--dot-size) - 2px); height:calc(var(--dot-size) - 2px); }
.quest-dot.side   { color:var(--brand-blue);   background:var(--brand-blue); }
.quest-dot.failed { color:var(--brand-red);    background:var(--brand-red); }
.quest-dot.active { color:var(--brand-purple); background:var(--brand-purple); animation: twinkle 3.2s ease-in-out infinite; box-shadow:0 0 8px currentColor; }
.quest-dot.final  { color:var(--brand-teal);   background:var(--brand-teal); width:var(--final-size);height:var(--final-size); animation: twinkle-final 4.8s ease-in-out infinite; }

/* Cluster dots: darker tone, small, circular, NO numbers inside */
.quest-cluster{
  position:absolute;
  width:var(--cluster-size); height:var(--cluster-size);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 4px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35);
  opacity:.88;
  user-select:none; pointer-events:none;
}
.quest-cluster.total  { background: radial-gradient(ellipse at 40% 40%, #ffe766, #d4af37); }
.quest-cluster.side   { background: radial-gradient(ellipse at 40% 40%, #a9e4ff, #6dbde6); }
.quest-cluster.failed { background: radial-gradient(ellipse at 40% 40%, #ff7b6b, #cc4638); }
.quest-cluster.active { background: radial-gradient(ellipse at 40% 40%, #c6a5ff, #8f6aff); }

/* Layering to guarantee visibility */
#quest-map-bg { z-index:1; }
#quest-map-svg { z-index:2; position:absolute; inset:0; width:100%; height:100%; }
#quest-dots    { z-index:3; position:absolute; inset:0; }

/* Minor helpers */
.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}

/* Active indicator responsiveness & sizing (layout remains inline) */
#active-indicator{ font-size: clamp(0.70rem, 1.2vw, 0.95rem); }
#active-indicator .active-label{ white-space: nowrap; }
#active-indicator .active-dot{ width:0.8em;height:0.8em;border-radius:50%;display:block; }
@media (max-width: 420px){
  #active-indicator { display: none !important; }
}

/* =========================================
   Pix companion marker (moved from inline <style>)
========================================= */
.companion-marker {
  position:absolute; width:24px; height:24px; transform: translate(-50%, -100%);
  opacity:.8; pointer-events:none; z-index: 5;
  animation: pixAfterimage 2.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
@keyframes pixAfterimage {
  0%   { opacity:.86; transform: translate(-50%, -100%) scale(1); }
  50%  { opacity:.70; transform: translate(-50%, -100%) scale(0.98); }
  100% { opacity:.86; transform: translate(-50%, -100%) scale(1); }
}

.marker,
.companion-marker {
  opacity: 0.95;                /* previously 0.8–0.85 */
  filter: drop-shadow(0 1.5px 3px rgba(140, 120, 255, 0.45));
  transition: transform 0.2s ease;
}
.marker:hover,
.companion-marker:hover {
  transform: translate(-50%, -100%) scale(1.05);
}

/* =========================================
   Admin & Changelog pages – shared styles
   (used by update.html, companion.html, changelog.html)
========================================= */

/* ---------- Admin (shared) ---------- */
body.page-admin {
  /* Local CSS variables for admin pages only */
  --panel-bg:#1a1a1a; --panel-fg:#fff;
  --muted:#b9c0cc; --accent:#87ceeb; --accent-strong:#00bfff;
  --danger:#ff6347; --ok:#00ffcc;
  --radius:12px; --gap:10px;

  margin:0; background:#0b0f17; color:#eaf1ff;
  min-height:100vh; padding:20px;
  display:flex; align-items:center; justify-content:center;
}

/* Centered card panel (shared) */
body.page-admin .panel{
  background:var(--panel-bg); color:var(--panel-fg);
  width:95%; max-width:980px; /* companion uses wider; update narrower via page-specific */
  border-radius:var(--radius); padding:22px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  text-align:left;
}

/* Status pill (shared) */
body.page-admin .status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:.9rem; margin:8px 0 12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
}
body.page-admin .status .dot{ width:8px; height:8px; border-radius:50%; background:#6c7586; box-shadow:0 0 6px #6c7586; }
body.page-admin .status.ok    .dot{ background:var(--ok);    box-shadow:0 0 6px var(--ok); }
body.page-admin .status.warn  .dot{ background:#ffd700;      box-shadow:0 0 6px #ffd700; }
body.page-admin .status.err   .dot{ background:var(--danger);box-shadow:0 0 6px var(--danger); }

body.page-admin h2{ margin:0 0 8px; font-weight:700 }
body.page-admin .small{ color:var(--muted); font-size:.92rem }

/* Inputs / selects / buttons (shared) */
body.page-admin .pill { font: inherit; padding:.6rem .9rem; border-radius: 10px; border:1px solid #3a3a3a; background:#222; color:#fff; }
body.page-admin .btn  { cursor: pointer; background:var(--accent); color:#000; border:0; font-weight:700; }
body.page-admin .btn:disabled{ background:#555; color:#111; cursor:not-allowed }

body.page-admin .input, 
body.page-admin .select{
  width: clamp(96px, 33vw, 160px);
  padding:.6em .8em; font-size:1.1rem; text-align:center;
  border-radius:10px; border:1px solid #3a3a3a; background:#222; color:#fff;
}
body.page-admin .input:focus, 
body.page-admin .select:focus{
  border-color: var(--accent);
  box-shadow:0 0 0 3px rgba(135,206,235,.25);
}

/* Result preformatted box (shared) */
body.page-admin pre#result{
  text-align:left; background:#1f1f1f; color:#c5fbc5;
  margin:12px auto 0; padding:12px; border-radius:10px;
  max-width:100%; white-space:pre-wrap; word-wrap:break-word;
  font-size:.92rem; overflow-x:auto; border:1px solid #333;
}

/* ---------- update.html specifics ---------- */
body.page-update .panel{
  max-width:980px; /* match companion so the map can use desktop width */
  text-align:center;
}
body.page-update .field-row{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(3, 1fr);
  align-items:center; justify-items:center;
  margin: 10px 0 4px;
}
@media (max-width: 460px){
  body.page-update .field-row{ grid-template-columns: 1fr; justify-items:stretch; }
}
body.page-update .field{
  display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;
}
body.page-update .field > span{ font-size:.9rem; color:var(--muted); }
body.page-update button{
  margin-top:14px;
  padding:.85em 1em; font-size:1.05rem; font-weight:700;
  border:none; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#000;
  transition:transform .03s ease, filter .15s ease;
  width:100%;
}
body.page-update button:hover{ filter:brightness(1.06) }
body.page-update button:active{ transform:translateY(1px) }

/* Make update.html controls behave like companion (inline, wrapping) */
body.page-update .controls {
  display:flex;
  gap:.75rem;
  align-items:center;
  margin-top:.75rem;
  flex-wrap:wrap;
}

/* ---------- companion.html specifics ---------- */
body.page-companion .panel{
  max-width:980px;
}
body.page-companion .map-frame { position: relative; border: 1px solid #2b2b2b; border-radius: 12px; overflow: hidden; }
body.page-companion .map-img { display:block; width:100%; height:auto; touch-action: none; }
body.page-companion .controls { display:flex; gap:.75rem; align-items:center; margin-top: .75rem; flex-wrap: wrap; }
body.page-companion .coords { font-size:.9rem; color:var(--muted); }

/* Pin used on admin map (kept separate from .companion-marker used on index) */
body.page-companion .marker {
  position:absolute; width:28px; height:28px; transform: translate(-50%, -100%);
  opacity: .95; pointer-events: none;
  filter: drop-shadow(0 1.5px 3px rgba(140,120,255,.45));
  animation: pixFlicker 2.4s ease-in-out infinite, pixGlow 4s ease-in-out infinite;
}
@keyframes pixFlicker {
  0%,100% { opacity:.95; transform: translate(-50%, -100%) scale(1); }
  50%     { opacity:.85; transform: translate(-50%, -100%) scale(0.985); }
}
@keyframes pixGlow {
  0%,100% { filter: drop-shadow(0 1px 2px rgba(140,120,255,.35)); }
  50%     { filter: drop-shadow(0 1.5px 3px rgba(160,140,255,.65)); }
}

/* ---------- changelog.html specifics ---------- */
body.page-changelog{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: flex-start;
  align-items: center;
  color: white;
  background-color: #111;
  padding: 2rem 1rem;
}
body.page-changelog h1{
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
body.page-changelog .changelog{
  max-width: 700px;
  width: 100%;
  background: rgba(0,0,0,0.7);
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}
body.page-changelog .changelog h2{
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #ffd700;
}
body.page-changelog .changelog ul{
  padding-left: 1.2rem;
  margin-top: 0;
}
body.page-changelog .changelog li{
  margin-bottom: 0.5rem;
}
body.page-changelog footer{
  width:100%;
  text-align:center;
  padding:1rem 0;
  font-size:0.70rem;
  color:#aaa;
  background:rgba(0,0,0,0.7);
  margin-top:auto;
}
body.page-changelog footer a{
  text-decoration:none;
  color: #aaa;
}
/* Wizard marker (main character) */
.wizard-marker{
  position:absolute;
  width: clamp(22px, 2.8vw, 48px);
  height: clamp(22px, 2.8vw, 48px);
  transform: translate(-50%, -100%);
  pointer-events:auto;
  z-index:6;
  animation: wizardFade 6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(180,170,255,0.55));
}
@keyframes wizardFade{
  0%   { opacity:.15; transform: translate(-50%, -100%) scale(0.96);}
  12%  { opacity:.95; transform: translate(-50%, -100%) scale(1.02);}
  24%  { opacity:.75; }
  36%  { opacity:.98; }
  60%  { opacity:.55; }
  76%  { opacity:.92; transform: translate(-50%, -100%) scale(1.00);}
  100% { opacity:.20; transform: translate(-50%, -100%) scale(0.98);}
}
/* Hover/click affordance preparation */
.wizard-marker[data-has-sheet="1"]{ cursor: pointer; }
/* Admin pin sizing for update.html (was only scoped to page-companion) */
body.page-update .marker {
  position:absolute; 
  width:28px; 
  height:28px; 
  transform: translate(-50%, -100%);
  opacity:.95; 
  pointer-events:none;
  filter: drop-shadow(0 1.5px 3px rgba(140,120,255,.45));
}
/* Mini-map sizing on update.html (match companion but narrower card) */
body.page-update .map-frame { 
  position: relative; 
  border: 1px solid #2b2b2b; 
  border-radius: 12px; 
  overflow: hidden; 
  width: 100%;
}
body.page-update .map-img { 
  display:block; 
  width:100%; 
  height:auto; 
  touch-action: none; 
}
body.page-update .coords { 
  font-size:.9rem; 
  color:var(--muted); 
}

/* ===== Perf: Firefox Desktop (lean mode, reduce paint cost) ===== */

/* Contain large repaints for the map background */
#quest-map-container { isolation: isolate; }
#quest-map-bg { contain: paint; will-change: filter; } /* keep invert() look isolated */

/* Firefox-only (triggered by .ff-lean on <html>) */
.ff-lean #quest-map-container { contain: layout paint style; }
.ff-lean #quest-map-svg { will-change: auto; }
/* Keep the intended darker inverse look on Firefox as well */
.ff-lean #quest-map-bg {
 filter: invert(100%) brightness(0.55) contrast(1.15) !important;
 opacity: .95 !important;
}

/* Smaller static glow = smaller repaint region */
.ff-lean .active-dot {
  animation: none !important;
  box-shadow: 0 0 4px var(--brand-purple, #b388ff) !important;
  opacity: 0.9;
}


/* Keep wizard and companion pins static in Firefox */
.ff-lean .wizard-marker,
.ff-lean .companion-marker {
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* Optional global helper class to pause all CSS animations if needed */
.paused-anim *,
.paused-anim #quest-map-svg * {
  animation-play-state: paused !important;
}

/* Reduce hit-testing & repaint work across hundreds of dots */
#quest-dots {
  contain: paint;
  will-change: transform;
  pointer-events: none;               /* removes per-mousemove hit-test cost */
}

/* Pins must remain interactive */
#wizard-layer, #pix-layer,
.wizard-marker, .companion-marker {
  pointer-events: auto;
}

/* On Firefox, don't keep a filter-promoted layer “hot” if it never changes */
.ff-lean #quest-map-bg {
  will-change: auto;
}

/* Respect OS motion settings (helps perf+accessibility) */
@media (prefers-reduced-motion: reduce) {
  .active-dot,
  .wizard-marker,
  .companion-marker {
    animation: none !important;
  }
}

/* Switched to CanvasDots for less drawing penalty on Firefox */
.ff-lean #quest-dots { display: none !important; }  /* hide DOM dots on FF */
.ff-lean .quest-dot { animation:none !important; box-shadow:0 0 4px currentColor !important; }