/* Escape Room directive styles with light/dark mode (aligned with Jeopardy) */
:root {
  color-scheme: light dark;
  /* Light mode tokens — ocean teal palette (matches Jeopardy) */
  --er-bg: #EFF7F9;        /* page background */
  --er-surface: #FFFFFF;    /* card surface */
  --er-text: #11283A;       /* primary text */
  --er-outline: #D1E0E6;    /* borders */
  --er-primary: #2A7081;    /* accent */
  --er-danger: #41688F;     /* steel blue warn */
  --er-success: #2A8078;    /* teal for progress */
  --er-accent: #5AA8BA;     /* sea glass accent */
  --er-accent-border: #3F8EA2;
  /* Outer container box (matches Jeopardy container) */
  --er-container-bg: #F2F8FA;
  --er-container-border: rgba(20, 63, 85, 0.16);
  --er-container-radius: 18px;
  --er-container-shadow: 0 10px 28px rgba(17,40,58,0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode tokens — ocean teal palette (matches Jeopardy) */
    --er-bg: #06111B;
    --er-surface: #0A1D29;
    --er-text: #E2EEF3;
    --er-outline: #213D4D;
    --er-primary: #347E90;
    --er-danger: #52749F;
    --er-success: #348981;
    --er-accent: #61B1C3;
    --er-accent-border: #458EA2;
    /* Outer container box (dark) */
    --er-container-bg: var(--er-bg);
    --er-container-border: rgba(97, 177, 195, 0.28);
    --er-container-radius: 18px;
    --er-container-shadow: 0 12px 32px rgba(0,0,0,0.32);
  }
}

/* Explicit dark tokens when user selects dark mode (override system light) */
html.dark-mode,
body.dark-mode,
html[data-theme='dark'],
body[data-theme='dark'],
html[data-mode='dark'] {
  --er-bg: #06111B;
  --er-surface: #0A1D29;
  --er-text: #E2EEF3;
  --er-outline: #213D4D;
  --er-primary: #347E90;
  --er-danger: #52749F;
  --er-success: #348981;
  --er-accent: #61B1C3;
  --er-accent-border: #458EA2;
  /* Outer container box (dark) */
  --er-container-bg: var(--er-bg);
  --er-container-border: rgba(97, 177, 195, 0.28);
  --er-container-radius: 18px;
  --er-container-shadow: 0 12px 32px rgba(0,0,0,0.32);
}

/* Explicit light tokens when user selects light mode (override system dark) */
html.light-mode,
body.light-mode,
html[data-theme='light'],
body[data-theme='light'],
html[data-mode='light'],
[data-mode='light'] {
  --er-bg: #EFF7F9;
  --er-surface: #FFFFFF;
  --er-text: #11283A;
  --er-outline: #D1E0E6;
  --er-primary: #2A7081;
  --er-danger: #41688F;
  --er-success: #2A8078;
  --er-accent: #5AA8BA;
  --er-accent-border: #3F8EA2;
  /* Outer container box (light) */
  --er-container-bg: #F2F8FA;
  --er-container-border: rgba(20, 63, 85, 0.16);
  --er-container-radius: 18px;
  --er-container-shadow: 0 10px 28px rgba(17,40,58,0.08);
}

.escape-room-container {
  box-sizing: border-box;
  width: 100%;
  margin: 1rem auto;
  padding: 0.5rem;
  color: var(--er-text);
  background: var(--er-container-bg) !important;
  border: 1px solid var(--er-container-border);
  border-radius: var(--er-container-radius);
  box-shadow: var(--er-container-shadow);
}
/* In dark mode, keep container on the dark surface token */
@media (prefers-color-scheme: dark) {
  .escape-room-container { background: var(--er-container-bg) !important; }
}

.er-root { background: transparent; }
.er-header { margin-bottom: 0.5rem; font-weight: 600; }
.er-progress { opacity: 0.8; }
.er-title { margin: 0.25rem 0 0.5rem 0; }
.er-body { background: var(--er-surface); border: 1px solid var(--er-outline); border-radius: 8px; padding: 1rem; color: var(--er-text); box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.er-q { font-size: 1.05rem; background: inherit; overflow: hidden; }

/* Visual progress bar */
.er-progressbar {
  width: 100%;
  height: 8px;
  background: var(--er-outline);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.er-progressbar-fill {
  width: 0%;
  height: 100%;
  background: var(--er-success);
  transition: width 0.3s ease;
}

/* Resume prompt */
.er-resume-prompt {
  background: var(--er-surface);
  color: var(--er-text);
  border: 1px solid var(--er-outline);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.er-resume-text { font-weight: 600; }
.er-resume-actions { display: flex; gap: 0.5rem; }

.escape-room-image-container { text-align: center; margin: 0.5rem 0; }
.escape-room-image-container img { max-width: 100%; height: auto; border-radius: 6px; }

.er-controls { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.er-controls input[type="text"] { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid var(--er-outline); border-radius: 6px; background: transparent; color: var(--er-text); }
.er-controls input[type="text"]::placeholder { color: #526C80; opacity: 0.9; }
.er-btn { padding: 0.5rem 0.75rem; border: none; border-radius: 6px; cursor: pointer; }
.er-btn.primary { background: var(--er-primary); color: #fff; }
.er-btn.primary:hover { filter: brightness(1.05); }
.er-btn.accent {
  background: var(--er-accent);
  color: #FFFFFF;
  border: 2px solid var(--er-accent-border);
}
.er-btn.accent:hover { filter: brightness(1.05); }

.er-feedback { min-height: 1.25rem; margin-top: 0.25rem; color: var(--er-danger); }
.er-complete { background: var(--er-surface); border: 1px solid var(--er-outline); border-radius: 8px; padding: 1rem; text-align: center; font-weight: 700; }

/* Auto theme (OS/browser preference) */
@media (prefers-color-scheme: light) {
  .er-body { background: #E4F1F4; color: var(--er-text); }
  .er-progress { color: var(--er-text); opacity: 1; }
  .er-progressbar { background: #D1E0E6; }
  .er-controls input[type="text"] { background: #FFFFFF; color: var(--er-text); border-color: var(--er-outline); }
  .er-controls input[type="text"]::placeholder { color: #526C80; }
  /* Completion tile uses same teal-tinted card as questions */
  .er-complete { background: #E4F1F4; color: var(--er-text); }
  /* Resume prompt uses same teal-tinted card */
  .er-resume-prompt { background: #E4F1F4; color: var(--er-text); }
}
@media (prefers-color-scheme: dark) {
  .er-body { background: var(--er-surface); color: var(--er-text); }
  .er-controls input[type="text"] { background: #0E2431; color: var(--er-text); border-color: var(--er-outline); }
  .er-controls input[type="text"]::placeholder { color: #98B0BE; }
}

/* Explicit theme overrides if site provides toggles (align with Jeopardy approach) */
html.light-mode .er-body,
body.light-mode .er-body,
html[data-theme='light'] .er-body,
body[data-theme='light'] .er-body,
[data-mode='light'] .er-body { background: #E4F1F4 !important; color: var(--er-text) !important; }
[data-mode='light'] .er-controls input[type="text"],
html.light-mode .er-controls input[type="text"],
body.light-mode .er-controls input[type="text"],
html[data-theme='light'] .er-controls input[type="text"],
body[data-theme='light'] .er-controls input[type="text"] { background: #FFFFFF !important; color: var(--er-text) !important; border-color: var(--er-outline) !important; }

html.dark-mode .er-body,
body.dark-mode .er-body,
html[data-theme='dark'] .er-body,
body[data-theme='dark'] .er-body,
[data-mode='dark'] .er-body { background: var(--er-surface) !important; color: var(--er-text) !important; }
[data-mode='dark'] .er-controls input[type="text"],
html.dark-mode .er-controls input[type="text"],
body.dark-mode .er-controls input[type="text"],
html[data-theme='dark'] .er-controls input[type="text"],
body[data-theme='dark'] .er-controls input[type="text"] { background: #0E2431 !important; color: var(--er-text) !important; border-color: var(--er-outline) !important; }

/* Explicit light-mode overrides for progress text */
html.light-mode .er-progress,
body.light-mode .er-progress,
html[data-theme='light'] .er-progress,
body[data-theme='light'] .er-progress,
[data-mode='light'] .er-progress { color: var(--er-text) !important; opacity: 1 !important; }

/* Explicit dark-mode overrides for progress text */
html.dark-mode .er-progress,
body.dark-mode .er-progress,
html[data-theme='dark'] .er-progress,
body[data-theme='dark'] .er-progress,
[data-mode='dark'] .er-progress { color: var(--er-text) !important; opacity: 0.9 !important; }

/* Explicit light mode progress bar background */
html.light-mode .er-progressbar,
body.light-mode .er-progressbar,
html[data-theme='light'] .er-progressbar,
body[data-theme='light'] .er-progressbar,
[data-mode='light'] .er-progressbar { background: #D1E0E6 !important; }

/* Explicit dark-mode progress bar background */
html.dark-mode .er-progressbar,
body.dark-mode .er-progressbar,
html[data-theme='dark'] .er-progressbar,
body[data-theme='dark'] .er-progressbar,
[data-mode='dark'] .er-progressbar { background: var(--er-outline) !important; }

/* Explicit light mode completion tile */
html.light-mode .er-complete,
body.light-mode .er-complete,
html[data-theme='light'] .er-complete,
body[data-theme='light'] .er-complete,
[data-mode='light'] .er-complete { background: #E4F1F4 !important; color: var(--er-text) !important; }

/* Explicit dark-mode completion tile */
html.dark-mode .er-complete,
body.dark-mode .er-complete,
html[data-theme='dark'] .er-complete,
body[data-theme='dark'] .er-complete,
[data-mode='dark'] .er-complete { background: var(--er-surface) !important; color: var(--er-text) !important; }

/* Explicit light mode resume prompt */
html.light-mode .er-resume-prompt,
body.light-mode .er-resume-prompt,
html[data-theme='light'] .er-resume-prompt,
body[data-theme='light'] .er-resume-prompt,
[data-mode='light'] .er-resume-prompt { background: #E4F1F4 !important; color: var(--er-text) !important; }

/* Explicit dark-mode resume prompt */
html.dark-mode .er-resume-prompt,
body.dark-mode .er-resume-prompt,
html[data-theme='dark'] .er-resume-prompt,
body[data-theme='dark'] .er-resume-prompt,
[data-mode='dark'] .er-resume-prompt { background: var(--er-surface) !important; color: var(--er-text) !important; border-color: var(--er-outline) !important; }

/* Container in explicit dark should use dark page tokens even if system prefers light */
html.dark-mode .escape-room-container,
body.dark-mode .escape-room-container,
html[data-theme='dark'] .escape-room-container,
body[data-theme='dark'] .escape-room-container,
[data-mode='dark'] .escape-room-container { background: var(--er-container-bg) !important; color: var(--er-text) !important; }

/* When embedded inside admonitions, add extra right padding to avoid clipping */
.admonition .escape-room-container {
  width: auto;
  max-width: 100%;
  margin-right: 0;
  padding-right: 1rem;
  overflow-x: hidden;
}