/* =====================================================================
   Ecosystem Adventure - Save Our Planet
   Global stylesheet for the HTML shell that hosts the Phaser canvas,
   plus the mobile virtual controls (TouchControls) and rotate hint.
   ===================================================================== */

:root {
  --ea-green: #2e8b57;
  --ea-green-dark: #1f5c3b;
  --ea-cream: #f7f1e3;
  --ea-blue: #2f7fb5;
  --ea-orange: #f4a261;
  --ea-dark: #15302a;
  --ea-font: "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Segoe UI",
    Verdana, sans-serif;
  --ea-font-display: "Impact", "Arial Black", "Segoe UI", sans-serif;
  --ea-safe-x: env(safe-area-inset-left);
  --ea-safe-t: env(safe-area-inset-top);
  --ea-safe-b: env(safe-area-inset-bottom);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(ellipse at 50% 30%, #1d5c43 0%, #0c2b21 70%);
  font-family: var(--ea-font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fixed full-viewport shell (avoids the mobile 100vh address-bar bug).
   Phaser's FIT + autoCenter already centers the canvas via margins, so no
   flex centering here (flex + Phaser margins would compound and shift it). */
#game-container {
  position: fixed;
  inset: 0;
  touch-action: none;
}

#game-container canvas {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  touch-action: none;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
}

/* Large-text accessibility mode: bump CSS font sizes in DOM text as well */
body.large-text {
  font-size: 125%;
}

.noscript {
  color: var(--ea-cream);
  text-align: center;
  padding: 2rem;
}

/* =====================================================================
   Mobile virtual controls (DOM overlay above the Phaser canvas).
   Positions are computed by scripts/TouchControls.js in viewport px;
   sizes scale with the CSS var --tc (canvas-relative scale factor).
   ===================================================================== */

#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

#touch-controls.hidden {
  display: none;
}

#touch-controls .tc-joy {
  position: fixed;
  width: calc(var(--tc) * 116px);
  height: calc(var(--tc) * 116px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
}

#touch-controls .tc-joy-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(21, 48, 42, 0.55));
  border: 2px solid rgba(124, 201, 138, 0.6);
}

#touch-controls .tc-joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tc) * 52px);
  height: calc(var(--tc) * 52px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fe0b0, #2e8b57 70%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#touch-controls .tc-btn {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  border: none;
  border-radius: 50%;
  font-family: var(--ea-font);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

#touch-controls .tc-btn:active {
  transform: translate(-50%, -50%) scale(0.9);
}

#touch-controls .tc-action {
  width: calc(var(--tc) * 76px);
  height: calc(var(--tc) * 76px);
  font-size: calc(var(--tc) * 34px);
  background: radial-gradient(circle at 35% 30%, #4fb56f, #1f5c3b);
  border: 2px solid rgba(124, 201, 138, 0.8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#touch-controls .tc-run {
  width: calc(var(--tc) * 56px);
  height: calc(var(--tc) * 56px);
  font-size: calc(var(--tc) * 26px);
  background: radial-gradient(circle at 35% 30%, #ffc46b, #c97b2a);
  border: 2px solid rgba(244, 162, 97, 0.8);
}

#touch-controls .tc-inv,
#touch-controls .tc-pause {
  width: calc(var(--tc) * 56px);
  height: calc(var(--tc) * 56px);
  font-size: calc(var(--tc) * 24px);
  background: radial-gradient(circle at 35% 30%, #6fb2e8, #2f5f8f);
  border: 2px solid rgba(160, 200, 240, 0.7);
}

#touch-controls .tc-fs {
  width: calc(var(--tc) * 52px);
  height: calc(var(--tc) * 52px);
  font-size: calc(var(--tc) * 24px);
  background: radial-gradient(circle at 35% 30%, #8a8f98, #3c4148);
  border: 2px solid rgba(220, 225, 230, 0.7);
}

/* Rotate hint: shown on coarse-pointer portrait devices. */
#tc-rotate-hint {
  position: fixed;
  top: max(env(safe-area-inset-top), 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 950;
  background: rgba(21, 48, 42, 0.88);
  color: var(--ea-cream);
  padding: 10px 18px;
  border-radius: 20px;
  border: 1px solid var(--ea-green);
  font-size: 14px;
  text-align: center;
  pointer-events: auto;
  max-width: 92vw;
}

/* Never show virtual controls on fine-pointer (mouse-only) devices. */
@media (pointer: fine) {
  #touch-controls,
  #tc-rotate-hint {
    display: none !important;
  }
}

/* =====================================================================
   Fullscreen status pill + rotate overlay (built by FullscreenManager /
   DisplayManager). DOM overlays, so they work in every scene.
   ===================================================================== */

/* Transient "Fullscreen on / off" notice, top-centre. */
#ec-fs-toast {
  position: fixed;
  top: max(env(safe-area-inset-top), 12px);
  left: 50%;
  transform: translate(-50%, -150%);
  z-index: 970;
  background: rgba(21, 48, 42, 0.92);
  color: var(--ea-cream);
  font-family: var(--ea-font);
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--ea-green);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
  opacity: 0;
}

#ec-fs-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Full-screen "please rotate" overlay for touch devices in portrait. */
#ec-rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1d5c43 0%, #0c2b21 80%);
  font-family: var(--ea-font);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#ec-rotate-overlay.show {
  visibility: visible;
  opacity: 1;
}

#ec-rotate-overlay .ro-card {
  max-width: 320px;
  margin: 0 24px;
  padding: 30px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(124, 201, 138, 0.5);
  border-radius: 20px;
}

#ec-rotate-overlay .ro-icon {
  font-size: 46px;
  display: inline-block;
  animation: ec-rotate-spin 1.8s ease-in-out infinite;
}

@keyframes ec-rotate-spin {
  0%, 20% { transform: rotate(0deg); }
  60% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}

#ec-rotate-overlay .ro-title {
  margin-top: 14px;
  font-size: 22px;
  font-weight: bold;
  color: var(--ea-cream);
}

#ec-rotate-overlay .ro-text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #d9f0e2;
}

#ec-rotate-overlay button {
  margin-top: 20px;
  font-family: var(--ea-font);
  font-size: 15px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid var(--ea-green);
  background: var(--ea-green-dark);
  color: #fff;
  cursor: pointer;
}

/* On fine-pointer (desktop) devices the rotate prompt never makes sense. */
@media (pointer: fine) {
  #ec-rotate-overlay {
    display: none !important;
  }
}


/* =====================================================================
   Accessibility + crash-safety styles
   ===================================================================== */

/* Reduced-motion: strip CSS transitions/animation for vestibular safety. */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}

/* High-contrast: stronger borders on interactive DOM elements. */
body.high-contrast button,
body.high-contrast a {
  border: 2px solid #fff !important;
  outline: 2px solid var(--ea-dark) !important;
}

/* Fatal error overlay (shown by main.js on uncaught errors). */
#ec-error-box {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(12, 43, 33, 0.97);
  color: var(--ea-cream);
  font-family: var(--ea-font);
  text-align: center;
  padding: 2rem;
}

#ec-error-box h2 {
  color: var(--ea-orange);
  font-size: 1.6rem;
}

#ec-error-box p {
  max-width: 560px;
  white-space: pre-wrap;
  font-size: 1rem;
}

#ec-error-box button {
  font-family: var(--ea-font);
  font-size: 1rem;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: var(--ea-green);
  color: #fff;
  cursor: pointer;
}

#ec-error-box button:hover {
  background: #3aa06a;
}

/* Subtitles setting: expose a CSS class for DOM subtitle elements. */
body.subtitles .ec-subtitle {
  display: block !important;
}

/* =====================================================================
   Quiz interface (DOM overlay built by QuizScene).
   Uses CSS Grid + fluid units (vw / rem / clamp) so the four answer
   choices always stay fully visible and reflow across phones, tablets,
   laptops, desktops and ultrawide displays. The overlay is fixed and
   fills the viewport, so it is independent of the letterboxed canvas.
   ===================================================================== */

.ec-quiz {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 40px);
  background: radial-gradient(ellipse at 50% 30%, #1d5c43 0%, #0c2b21 78%);
  font-family: var(--ea-font);
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ec-quiz-inner {
  box-sizing: border-box;
  width: min(94vw, 1280px);
  max-width: 1280px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.5vh, 28px);
  padding: clamp(16px, 3vw, 40px);
  background: rgba(21, 48, 42, 0.93);
  border: 2px solid rgba(124, 201, 138, 0.55);
  border-radius: clamp(14px, 2vw, 24px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  overflow-x: hidden;
  overflow-y: auto;
  animation: ec-quiz-in 0.35s ease-out;
}

@keyframes ec-quiz-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ec-quiz-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 0 #15302a;
}

.ec-quiz-progress {
  margin-top: -0.5em;
  text-align: center;
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  color: #f2d53f;
}

.ec-quiz-question {
  text-align: center;
  font-size: clamp(1rem, 2.1vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 0 #15302a;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 2.2em;
}

/* Answer choices: CSS Grid. 2×2 on tablet/laptop/desktop, 1 column on
   phones, compact 2 columns on short landscape screens. */
.ec-quiz-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
}

.ec-answer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  min-height: clamp(56px, 9vh, 88px);
  width: 100%;
  padding: clamp(12px, 1.8vw, 22px) clamp(14px, 2.2vw, 26px);
  border-radius: clamp(10px, 1.4vw, 16px);
  border: 2px solid rgba(124, 201, 138, 0.8);
  background: #15302a;
  color: #fff;
  font-family: inherit;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
}

.ec-answer:hover:not(:disabled) {
  background: #2e8b57;
  border-color: #f2d53f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ec-answer:active:not(:disabled) {
  transform: translateY(0);
}

.ec-answer:focus-visible {
  outline: 3px solid #f2d53f;
  outline-offset: 2px;
}

.ec-answer:disabled {
  cursor: default;
}

.ec-answer-letter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.05em;
  color: #f2d53f;
}

.ec-answer-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Answered states */
.ec-answer.correct {
  background: #2e8b57;
  border-color: #7cc98a;
}
.ec-answer.correct .ec-answer-letter {
  color: #fff;
}
.ec-answer.wrong {
  background: #8a3a3a;
  border-color: #d94f4f;
}
.ec-answer.wrong .ec-answer-letter {
  color: #ffd2d2;
}
.ec-answer.dim {
  background: #0f2420;
  border-color: #555;
}

.ec-quiz-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
}

.ec-quiz-explanation {
  margin: 0;
  text-align: center;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  line-height: 1.4;
  min-height: 1.4em;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-line;
}
.ec-quiz-explanation.correct {
  color: #7cc98a;
}
.ec-quiz-explanation.wrong {
  color: #ffb3b3;
}

.ec-quiz-next {
  box-sizing: border-box;
  font-family: inherit;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  padding: clamp(10px, 1.4vw, 16px) clamp(28px, 4vw, 48px);
  border-radius: 999px;
  border: 2px solid #7cc98a;
  background: #2e8b57;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ec-quiz-next:hover:not(:disabled) {
  background: #3aa06a;
  transform: translateY(-2px);
}

.ec-quiz-next:active:not(:disabled) {
  transform: translateY(0);
}

/* Results panel */
.ec-quiz-inner.ec-quiz-results {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 3vh, 26px);
}

.ec-quiz-result-percent {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: bold;
  line-height: 1.1;
}

.ec-quiz-result-msg {
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.4;
  max-width: 42ch;
}

.ec-quiz-result-note {
  color: #f2d53f;
  font-size: clamp(0.9rem, 1.7vw, 1.1rem);
  line-height: 1.4;
  max-width: 52ch;
}

/* --- Breakpoints ------------------------------------------------ */

/* Mobile (≤767px): single column of answers. */
@media (max-width: 767px) {
  .ec-quiz-answers {
    grid-template-columns: 1fr;
  }
  .ec-quiz {
    padding: clamp(8px, 2vw, 18px);
  }
}

/* Tablet (768px–1023px): 2 columns. */
@media (min-width: 768px) and (max-width: 1023px) {
  .ec-quiz-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Laptop (1024px–1439px): 2×2 grid, wider card. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ec-quiz-inner {
    width: min(92vw, 1200px);
  }
}

/* Desktop (1440px+): 2×2 grid, generous max width. */
@media (min-width: 1440px) {
  .ec-quiz-inner {
    width: min(90vw, 1280px);
  }
}

/* Short landscape screens (rotated phones): compact, keep 2 columns so
   all four answers stay visible without scrolling. */
@media (orientation: landscape) and (max-height: 480px) {
  .ec-quiz-inner {
    gap: clamp(8px, 2vh, 14px);
    padding: clamp(12px, 2vh, 20px);
  }
  .ec-answer {
    min-height: 46px;
    padding: 10px 16px;
  }
  .ec-quiz-question {
    min-height: 1.5em;
  }
}

/* --- Accessibility hooks ------------------------------------------ */

body.large-text .ec-quiz {
  font-size: 118%;
}

body.high-contrast .ec-answer,
body.high-contrast .ec-quiz-next,
body.high-contrast .ec-quiz-inner {
  border-width: 3px;
  outline: 2px solid #15302a;
}

body.reduced-motion .ec-quiz *,
body.reduced-motion .ec-quiz *::before,
body.reduced-motion .ec-quiz *::after {
  transition-duration: 0.001ms !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
}