/* Theme: school - "Skole & frikvarter".
 * Ruled notebook paper with a red double margin, ballpoint-blue ink doodles and a big
 * pencil-yellow pencil. Light theme: navy ink text on white paper cards.
 * The token --accent is also used as text colour (logo, countdown, results message) on
 * the paper, so it is ballpoint blue; pencil yellow carries the highlighter selection,
 * the pencil and the doodles. Contrast checked numerically (see report). */

html[data-ordleg-theme="school"] {
  --bg: linear-gradient(90deg,
          transparent 0 1.3vw, rgba(229, 83, 96, 0.55) 0 calc(1.3vw + 2px),
          transparent 0 calc(1.3vw + 6px), rgba(229, 83, 96, 0.55) 0 calc(1.3vw + 8px),
          transparent 0),
        repeating-linear-gradient(180deg, transparent 0 calc(4.6vh - 2px), #cddcf1 0 4.6vh) repeat,
        radial-gradient(ellipse at 100% 0%, #fff6d6 0%, transparent 45%),
        linear-gradient(180deg, #fffdf7 0%, #fbf8ee 100%);
  --fg: #1f2a44;
  --fg-muted: #4a5670;
  --accent: #2350c8;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.82);
  --card-strong: #ffffff;
  --card-border: rgba(35, 80, 200, 0.22);
  --taboo: #c8233b;
  --taboo-bg: rgba(200, 35, 59, 0.08);
  --timer-ok: #2350c8;
  --timer-warn: #c8233b;
  --ok: #157a45;
  --bad: #c8233b;
  --subtle: rgba(31, 42, 68, 0.12);
  --selected-bg: rgba(255, 204, 26, 0.38);   /* yellow highlighter */
  --selected-ring: rgba(255, 190, 0, 0.45);
  --overlay: rgba(31, 42, 68, 0.45);
}

/* deco-a: a big yellow pencil lying along the bottom-left edge */
html[data-ordleg-theme="school"] .theme-deco .deco-a {
  left: -3vmin;
  bottom: 0.8vmin;
  width: 46vmin;
  height: 7.9vmin;
  background: url("../../assets/themes/school/pencil.svg") center / contain no-repeat;
  transform: rotate(-6deg);
  filter: drop-shadow(0.4vmin 0.6vmin 0 rgba(31, 42, 68, 0.12));
}

/* deco-b: ink doodles (star, heart, smiley, spiral) on the top edge, between the
 * audience buttons and the top-right controls/timer */
html[data-ordleg-theme="school"] .theme-deco .deco-b {
  top: -4vmin;
  right: 17vw;
  width: 25vmin;
  height: 25vmin;
  background: url("../../assets/themes/school/doodles-a.svg") center / contain no-repeat;
  opacity: 0.7;
  transform: rotate(8deg);
}

/* deco-c: more doodles on the bottom edge (right of the play hint, left of the buttons);
 * ::before is a paper plane on the top edge (left of the audience buttons) that glides */
html[data-ordleg-theme="school"] .theme-deco .deco-c {
  right: 16vw;
  bottom: -5vmin;
  width: 24vmin;
  height: 24vmin;
  background: url("../../assets/themes/school/doodles-b.svg") center / contain no-repeat;
  opacity: 0.7;
}
html[data-ordleg-theme="school"] .theme-deco .deco-c::before {
  content: "";
  position: fixed;
  top: 1.5vh;
  left: 24vw;
  width: 17vmin;
  height: 10.5vmin;
  background: url("../../assets/themes/school/plane.svg") center / contain no-repeat;
  animation: school-glide 9s ease-in-out infinite alternate;
}

@keyframes school-glide {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(2vmin, -1vmin) rotate(-4deg); }
}

/* Short screens: the start page scrolls under the fixed decoration layer, so the
 * top-edge ornaments would slide behind the category cards. Hide them there. */
@media (max-height: 900px) {
  html[data-ordleg-theme="school"][data-screen="start"] .theme-deco .deco-b,
  html[data-ordleg-theme="school"][data-screen="start"] .theme-deco .deco-c::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ordleg-theme="school"] .theme-deco *,
  html[data-ordleg-theme="school"] .theme-deco *::before,
  html[data-ordleg-theme="school"] .theme-deco *::after { animation: none; }
}