/* Fonts are bundled (SIL OFL, see fonts/) so the game works offline. */
@font-face {
  font-family: 'Creepster';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/creepster-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fredoka-latin.woff2') format('woff2');
}

:root {
  --bg: #0b0620;
  --ink: #f3ecff;
  --muted: #b3a6d9;
  --panel: rgba(20, 11, 40, 0.55);
  --panel-border: rgba(190, 160, 255, 0.22);
  --orange: #ff8a1c;
  --purple: #9b63f2;
  --lime: #b8ff7a;
  --font-ui: 'Fredoka', system-ui, sans-serif;
  --font-spooky: 'Creepster', 'Fredoka', cursive;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#gl {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* ---------- 2D board ---------- */

/* Tall screens leave room for the status, the clocks and the buttons; wide ones put the board
   under the status, between the clocks and the buttons. */
#board2d {
  --size: min(calc(100vw - 28px), calc(100dvh - 236px));
  position: fixed;
  left: 50%;
  top: calc(50% + 35px); /* like gameRegion in main.js: more room above (the rival) than below */
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 0 0 7px #24162f, 0 0 0 9px rgba(201, 165, 74, 0.55), 0 18px 50px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

@media (min-aspect-ratio: 1/1) {
  #board2d {
    --size: min(calc(100dvh - 84px), calc(100vw - 330px));
    top: 50%;
    transform: translate(-50%, calc(-50% + 20px));
  }
}

/* In lessons the flat board takes the 3D board's place: on top on tall screens, between the
   teachers on wide ones (lessonRegion in main.js), below the title. */
body.in-lesson #board2d {
  --size: min(calc(96vw - 18px), calc(54dvh - 18px));
  top: calc(75px + var(--size) / 2);
}

@media (min-aspect-ratio: 1/1) {
  body.in-lesson #board2d {
    --size: min(calc(62vw - 18px), calc(100dvh - 96px));
    top: calc(78px + var(--size) / 2);
    transform: translate(-50%, -50%);
  }
}

body.flat #gl {
  visibility: hidden;
}

.b2-squares,
.b2-pieces {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
}

.b2-pieces {
  pointer-events: none;
}

.b2-sq,
.b2-piece {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
}

.b2-sq.light {
  background: #b2a3cb;
  color: #4f3b74;
}

.b2-sq.dark {
  background: #4f3b74;
  color: #b2a3cb;
}

.b2-sq::before,
.b2-sq::after {
  content: '';
  position: absolute;
}

.b2-sq::before {
  inset: 0;
}

.b2-sq.last::before {
  background: rgba(255, 190, 60, 0.32);
}

.b2-sq.sel::before {
  background: rgba(255, 140, 28, 0.55);
}

.b2-sq.check::before {
  background: radial-gradient(circle, rgba(255, 70, 70, 0.95), rgba(255, 70, 70, 0.55) 40%, rgba(255, 70, 70, 0) 72%);
}

.b2-sq.dot::after {
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(20, 8, 36, 0.42);
}

.b2-sq.ring::after {
  inset: 5%;
  border-radius: 50%;
  border: calc(var(--size) / 70) solid rgba(20, 8, 36, 0.42);
}

.b2-rank,
.b2-file {
  position: absolute;
  font-size: calc(var(--size) / 34);
  font-weight: 600;
  line-height: 1;
}

.b2-rank {
  left: 6%;
  top: 6%;
}

.b2-file {
  right: 7%;
  bottom: 5%;
}

.b2-piece svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35));
}

.b2-piece.moving {
  z-index: 2;
  transition: transform 0.22s ease, opacity 0.2s ease;
}

.b2-piece.dragging {
  z-index: 3;
  transition: none;
}

.b2-piece.gone {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.b2-piece.shadow {
  opacity: 0.3;
}

.b2-piece.shadow svg {
  filter: brightness(0);
}

.b2-piece.pop svg {
  animation: b2-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes b2-pop {
  from {
    transform: scale(0.2);
  }
}

/* Lessons: marked squares, the sun (and night), arrows, things to collect, flashes. */
.b2-sq.mark {
  background-image: linear-gradient(rgba(79, 227, 138, 0.62), rgba(79, 227, 138, 0.62));
}

.b2-sq.sun {
  background-image: linear-gradient(rgba(255, 176, 0, 0.78), rgba(255, 176, 0, 0.78));
}

#board2d.night .b2-sq.light {
  background-color: #342a46;
}

#board2d.night .b2-sq.dark {
  background-color: #170f28;
}

#board2d.night .b2-sq.sun {
  background-image: radial-gradient(circle, rgba(255, 236, 160, 0.95), rgba(255, 201, 77, 0.85) 70%);
}

#board2d.night .b2-sq.dot::after {
  background: rgba(255, 228, 170, 0.55);
}

#board2d.night .b2-sq.ring::after {
  border-color: rgba(255, 228, 170, 0.55);
}

.b2-arrows,
.b2-items {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
}

.b2-arrows {
  fill: #ff8a1c;
  fill-opacity: 0.85;
}

.b2-item,
.b2-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
}

.b2-item svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: b2-bob 0.8s var(--phase, 0s) ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35));
}

.b2-item.star svg {
  filter: drop-shadow(0 0 4px rgba(255, 170, 40, 0.9));
}

.b2-item.collected svg {
  animation: b2-collect 0.45s ease-out forwards;
}

@keyframes b2-bob {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(-5%);
  }
}

@keyframes b2-collect {
  to {
    transform: translateY(-60%) scale(2);
    opacity: 0;
  }
}

.b2-flash {
  opacity: 0.7;
  animation: b2-flash 0.6s ease-out forwards;
}

@keyframes b2-flash {
  to {
    opacity: 0;
  }
}

.view-label {
  font: 700 15px var(--font-ui);
}

.view-label::before {
  content: '2D';
}

body.flat .view-label::before {
  content: '3D';
}

/* ---------- HUD ---------- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#hud.off {
  opacity: 0;
  visibility: hidden;
}

.pill {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--panel-border);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill:empty {
  display: none;
}

@media (max-aspect-ratio: 1/1) {
  #status {
    max-width: calc(100vw - 120px); /* between the corner buttons */
    padding: 8px 14px;
    font-size: 16px;
  }
}

/* Sound and 2D/3D: in the top corners on tall screens, together at the top right on wide ones. */
.game-tools {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
}

.game-tools .icon-btn {
  width: 44px;
  height: 44px;
}

@media (min-aspect-ratio: 1/1) {
  .game-tools {
    left: auto;
    gap: 8px;
  }
}

/* Chess clocks, placed by main.js: over and under the board on tall screens, down the left side on
   wide ones, the far army's clock first. */
.clock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--panel-border);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.clock .dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(243, 236, 255, 0.55);
}

.clock.white .dot {
  background: #f0d9a4;
}

.clock.black .dot {
  background: #14101b;
}

.clock.active {
  border-color: var(--orange);
  box-shadow: 0 0 16px rgba(255, 138, 28, 0.45);
}

.clock.low {
  color: #ff7a7a;
}

@media (min-aspect-ratio: 1/1) {
  .clock {
    left: calc(16px + env(safe-area-inset-left));
    transform: none;
  }
}

/* The rival: portrait, name and clock, on its side of the board (placed by main.js like the
   clocks). A row on tall screens, a column down the left side on wide ones (there a long name,
   like «Hombre Invisible», goes on two lines so it stays off the board). */
#rival {
  --face: clamp(64px, 11dvh, 104px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content; /* the name on one line */
  display: flex;
  align-items: center;
  gap: 10px;
}

#rival .clock {
  position: static;
  transform: none;
}

.rival-face {
  width: var(--face);
  height: var(--face);
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(120, 80, 190, 0.6), rgba(20, 11, 40, 0.75));
  border: 1.5px solid var(--panel-border);
}

.rival-face img {
  display: block;
  width: 100%;
  height: 100%;
}

.rival-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.rival-name {
  font-family: var(--font-spooky);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--lime);
  text-shadow: 0 0 12px rgba(184, 255, 122, 0.35);
}

/* The rival's speech bubble: beside the face on tall screens (over its name and clock for a
   moment), above the face on wide ones (below the clock when the rival is the lower of the two).
   main.js caps its width to the room there is. */
.rival-say {
  position: absolute;
  z-index: 2;
  left: calc(var(--face) + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 14px;
  border-radius: 16px;
  background: #fffaf0;
  color: #2a1640;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  white-space: pre-line;
  overflow-wrap: break-word; /* never past the bubble's edge */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
  animation: say-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.rival-say .say-text {
  margin: 0;
  min-height: 1.3em;
}

.rival-say::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-right: 10px solid #fffaf0;
  border-left: 0;
}

@keyframes say-in {
  from {
    opacity: 0;
    scale: 0.7;
  }
}

/* The face bobs while the line is typed. */
#rival.talking .rival-face {
  animation: talk 0.28s ease-in-out infinite alternate;
}

@keyframes talk {
  to {
    translate: 0 -3px;
  }
}

@media (min-aspect-ratio: 1/1) {
  .rival-say {
    left: 0;
    top: auto;
    bottom: calc(100% + 14px);
    transform: none;
  }

  #rival.below .rival-say {
    bottom: auto;
    top: calc(100% + 14px);
  }

  .rival-say::after {
    left: 26px;
    top: 100%;
    margin-top: 0;
    border: 10px solid transparent;
    border-top: 11px solid #fffaf0;
    border-bottom: 0;
  }

  #rival.below .rival-say::after {
    top: auto;
    bottom: 100%;
    border-top: 0;
    border-bottom: 11px solid #fffaf0;
  }
  /* No room above (or below): beside the face, as on tall screens. */
  #rival.beside .rival-say {
    left: calc(var(--face) + 14px);
    top: calc(var(--face) / 2);
    bottom: auto;
    transform: translateY(-50%);
  }

  #rival.beside .rival-say::after {
    left: -10px;
    top: 50%;
    bottom: auto;
    margin-top: -9px;
    border: 9px solid transparent;
    border-right: 10px solid #fffaf0;
    border-left: 0;
  }
}

/* The rival's farewell on the end card, under its face. */
.over-quote {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 12px;
  padding: 8px 16px;
  border-radius: 16px;
  background: #fffaf0;
  color: #2a1640;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  white-space: pre-line;
  min-height: calc(1.3em + 16px);
}

.over-quote::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  margin-left: -9px;
  border: 9px solid transparent;
  border-bottom: 10px solid #fffaf0;
  border-top: 0;
}

.over-face {
  display: block;
  width: 136px;
  height: 136px;
  margin: -8px auto 2px;
}

@media (max-height: 520px) {
  .over-face {
    width: 96px;
    height: 96px;
  }
}

#rival.plain .rival-face,
#rival.plain .rival-name,
#rival.noface .rival-face {
  display: none;
}

@media (min-aspect-ratio: 1/1) {
  #rival {
    --face: clamp(104px, min(19dvh, 11vw), 160px); /* larger on big screens, clear of the board */
    left: calc(16px + env(safe-area-inset-left));
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .rival-face {
    width: var(--face);
    height: var(--face);
  }

  .rival-name {
    max-width: var(--face);
    font-size: clamp(24px, calc(var(--face) * 0.18), 28px);
    line-height: 1.05;
  }
}

@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #rival {
    --face: 78px;
  }

  .rival-name {
    max-width: 104px;
    font-size: 20px;
  }
}

/* The magnifier's hint: a teacher's face and a bubble, over the buttons on tall screens, at the
   bottom left on wide ones (main.js caps its width to the room beside the board). A tap closes it. */
.hint {
  position: absolute;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
  cursor: pointer;
  animation: say-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.hint-face {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #fffaf0;
  background: #3a2466 url('img/maestros/vanhelsing/sonriendo.webp') no-repeat;
  background-size: 156% auto;
  background-position: 50% 21%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.hint[data-who='profesora'] .hint-face {
  background-image: url('img/maestros/profesora/neutra-boca-cerrada.webp');
  background-size: 169% auto;
  background-position: 51% 21%;
}

.hint-say {
  position: relative;
  min-width: 0;
  padding: 7px 14px 9px;
  border-radius: 16px;
  background: #fffaf0;
  color: #2a1640;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.hint-say::after {
  content: '';
  position: absolute;
  left: -10px;
  bottom: 18px;
  border: 8px solid transparent;
  border-right: 10px solid #fffaf0;
  border-left: 0;
}

.hint-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a2b;
}

.hint[data-who='profesora'] .hint-name {
  color: #2f6f6a;
}

.hint-text {
  margin: 0;
}

.hint-more {
  display: block;
  margin-top: 3px;
  color: #7a6a99;
  font-size: 13px;
  font-weight: 500;
}

@media (min-aspect-ratio: 1/1) {
  .hint {
    left: calc(16px + env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: none;
    max-width: 340px;
  }
}

#rival.covered,
.clock.covered {
  visibility: hidden;
}

#toolbar {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

/* Tall screens with a clock: your clock and the buttons share the bottom row. */
#hud.docked #clock-you {
  left: calc(16px + env(safe-area-inset-left));
  transform: none;
}

#hud.docked #toolbar {
  left: auto;
  right: calc(16px + env(safe-area-inset-right));
  transform: none;
  gap: 10px;
}

/* Five buttons (Aprendiz mode) beside your clock: a bit smaller on phones. */
@media (max-width: 440px) {
  #hud.docked #toolbar:has(#btn-hint:not(.hidden)) {
    gap: 6px;
  }

  #hud.docked #toolbar:has(#btn-hint:not(.hidden)) .icon-btn {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 350px) {
  #toolbar .icon-btn {
    width: 42px;
    height: 42px;
  }

  #hud.docked #toolbar {
    gap: 6px;
  }

  #hud.docked #toolbar:has(#btn-hint:not(.hidden)) {
    gap: 4px;
  }

  #hud.docked #toolbar:has(#btn-hint:not(.hidden)) .icon-btn {
    width: 36px;
    height: 36px;
  }
}

/* Wide screens: the board fills the height, so the buttons go down the right side. */
@media (min-aspect-ratio: 1/1) {
  #toolbar {
    left: auto;
    bottom: auto;
    right: calc(16px + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
  }
}

.icon-btn {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--panel-border);
  background: var(--panel);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.icon-btn:hover {
  background: rgba(60, 35, 110, 0.7);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.draw-label {
  font: 700 21px var(--font-ui);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.icon-btn svg .stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- screens ---------- */

#overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(11, 6, 32, 0.2), rgba(5, 2, 14, 0.7));
}

.card {
  width: min(420px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 24px 24px 18px;
  border-radius: 24px;
  text-align: center;
  background: rgba(22, 12, 44, 0.8);
  border: 1.5px solid var(--panel-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(155, 99, 242, 0.18);
  animation: card-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
}

.logo {
  margin: 0;
  font-family: var(--font-spooky);
  font-weight: 400;
  font-size: clamp(40px, min(14vw, 11dvh), 80px); /* two lines: smaller on short screens */
  line-height: 0.95;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 3px #1a0a30;
  paint-order: stroke fill;
}

.logo .logo-line {
  display: block;
  white-space: nowrap;
}

.logo-line span {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
  text-shadow: 0 0 22px currentColor, 0 6px 0 #1a0a30;
}

.logo-line span:nth-child(2) { animation-delay: -0.5s; }
.logo-line span:nth-child(3) { animation-delay: -1s; }
.logo-line span:nth-child(4) { animation-delay: -1.5s; }
.logo-line span:nth-child(5) { animation-delay: -2s; }
.logo-line span:nth-child(6) { animation-delay: -2.5s; }
.logo-line span:nth-child(7) { animation-delay: -3s; }
.logo-line span:nth-child(8) { animation-delay: -0.25s; }

.c-o { color: var(--orange); }
.c-p { color: var(--purple); }
.c-l { color: var(--lime); }

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-6px) rotate(2deg);
  }
}

.card h2 {
  margin: 0;
  font-family: var(--font-spooky);
  font-weight: 400;
  font-size: clamp(40px, 11vw, 56px);
  color: var(--orange);
  letter-spacing: 0.03em;
  text-shadow: 0 0 20px rgba(255, 138, 28, 0.6);
}

.tagline {
  margin: 6px 0 18px;
  color: var(--muted);
  font-size: 16px;
}

.tagline:empty {
  display: none;
}

/* Without a tagline, a little room between the title and what follows. */
.card h2 + .btn,
.card h2 + .lesson-list,
.card h2 + .promo-row,
.card h2 + .choice,
.card .logo + .btn {
  margin-top: 16px;
}

.btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--panel-border);
  background: rgba(60, 35, 110, 0.5);
  color: var(--ink);
  font: 600 18px var(--font-ui);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn.primary {
  background: linear-gradient(180deg, #ffa54a, #ff7a10);
  border-color: transparent;
  color: #2a0f00;
  font-weight: 700;
  font-size: 19px;
  box-shadow: 0 6px 0 #a84400, 0 0 26px rgba(255, 138, 28, 0.45);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(3px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.btn:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* New game: one row of chips per choice (the chips say what they are, no labels). */
.choice {
  margin-top: 10px;
  text-align: left;
}

[data-choice='mode'] .chips {
  grid-template-columns: repeat(2, 1fr);
}

/* The picked rival's description: one line. */
#rival-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.chip {
  padding: 9px 6px;
  border-radius: 999px;
  border: 1.5px solid var(--panel-border);
  background: rgba(60, 35, 110, 0.5);
  color: var(--ink);
  font: 600 16px var(--font-ui);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.chip:active {
  transform: scale(0.95);
}

.chip.on {
  background: linear-gradient(180deg, #b48af5, #8549e6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(155, 99, 242, 0.5);
}

.chip:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* The ladder of rivals: three rows of three, weakest first. */
.ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.rung {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 4px 4px;
  border-radius: 14px;
  border: 1.5px solid var(--panel-border);
  background: rgba(60, 35, 110, 0.5);
  color: var(--ink);
  font: 600 15px var(--font-ui);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.rung:active {
  transform: scale(0.95);
}

.rung.on {
  background: linear-gradient(180deg, #b48af5, #8549e6);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 14px rgba(155, 99, 242, 0.5);
}

.rung:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.rung-face {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(120, 80, 190, 0.6), rgba(20, 11, 40, 0.75));
  font: 26px var(--font-spooky);
  color: var(--lime);
}

.rung-face img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Names are one word but «Hombre Invisible», which takes two lines. */
.rung-name {
  line-height: 1.15;
  text-wrap: balance;
}

.rung-elo {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.rung.on .rung-elo {
  color: rgba(255, 255, 255, 0.85);
}

/* A star for the rivals you've beaten; with the magnifier beside it if you had help. */
.rung.helped::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 23px;
  width: 11px;
  height: 11px;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='black' stroke-width='3.2'/%3E%3Cpath d='m14.5 14.5 6 6' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='black' stroke-width='3.2'/%3E%3Cpath d='m14.5 14.5 6 6' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rung.helped::after,
.rung.beaten::after {
  content: '★';
  position: absolute;
  top: 4px;
  right: 8px;
  color: var(--lime);
  font-size: 14px;
}

.choice-hint {
  margin: 7px 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.choice-hint b {
  color: var(--ink);
  font-weight: 600;
}

.choice-hint:empty {
  display: none;
}

#screen-new .btn.primary {
  margin-top: 16px;
}

/* Short screens (phones lying down, low windows): each choice on one line, the buttons side by
   side, and the ladder as a row of faces (the hint names the one picked). */
@media (max-height: 520px), (min-aspect-ratio: 1/1) and (max-height: 660px) {
  #screen-new {
    width: min(660px, 100%);
    padding: 12px 20px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  #screen-new h2,
  #screen-new .choice {
    grid-column: 1 / -1;
  }

  #screen-new h2 {
    font-size: 34px;
  }

  #screen-new .choice {
    margin-top: 8px;
  }

  #screen-new .chips,
  #screen-new .ladder {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }

  #screen-new .ladder {
    gap: 5px;
  }

  #screen-new .rung {
    padding: 4px;
    border-radius: 12px;
  }

  #screen-new .rung-face {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    font-size: 24px;
  }

  #screen-new .rung-name,
  #screen-new .rung-elo {
    display: none;
  }

  #screen-new .rung.helped::after,
  #screen-new .rung.beaten::after {
    top: 1px;
    right: 3px;
    font-size: 11px;
  }

  #screen-new .rung.helped::before {
    top: 3px;
    right: 15px;
    width: 9px;
    height: 9px;
  }

  #screen-new .choice-hint {
    margin: 4px 0 0 6px;
    font-size: 13px;
  }

  #screen-new .btn,
  #screen-new .btn.primary {
    margin-top: 14px;
  }
}

.promo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.promo-row .btn {
  margin: 0;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.promo-row .glyph {
  font-size: 36px;
  line-height: 1;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', serif;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--panel-border);
  background: rgba(60, 35, 110, 0.5);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.lesson-item:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
}

.li-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: #2a0f00;
  font-weight: 700;
}

.li-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  line-height: 1.2;
}

.li-text b {
  font-family: var(--font-spooky);
  font-weight: 400;
  font-size: 24px;
  color: var(--orange);
  letter-spacing: 0.03em;
}

.li-text small {
  color: var(--muted);
  font-size: 14px;
}

/* The level, once there is one, opens the monster's card. A row with it is the lesson's button
   with the level beside it, over its right end. */
.li-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  padding: 4px 12px 5px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 207, 74, 0.35);
  background: rgba(255, 207, 74, 0.15);
  color: #ffcf4a;
  font: inherit;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.li-level:hover {
  border-color: #ffcf4a;
  background: rgba(255, 207, 74, 0.25);
}

.li-level b {
  font-size: 15px;
}

.li-level small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.li-row {
  position: relative;
  display: flex;
  flex-direction: column;
}

.li-row:has(.li-level) .lesson-item {
  padding-right: 120px;
}

.li-row > .li-level {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 440px) {
  .li-level {
    padding: 3px 8px 4px;
  }

  .li-level b {
    font-size: 13px;
  }

  .li-level small {
    font-size: 11px;
  }

  .li-row:has(.li-level) .lesson-item {
    padding-right: 94px;
  }
}

/* A monster taught in parts: its row isn't a button, its parts are. */
.lesson-group {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: default;
}

.lesson-group:hover {
  border-color: var(--panel-border);
  transform: none;
}

.li-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.li-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-left: 46px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--panel-border);
  background: rgba(40, 22, 80, 0.6);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.li-part:hover {
  border-color: var(--orange);
}

.li-done {
  color: #ffcf4a;
  font-weight: 700;
}

/* «Partidas modelo» is a long title: smaller, so it fits on one line. */
#screen-games h2 {
  font-size: clamp(30px, 8.5vw, 44px);
}

.game-item .li-text b {
  font-size: 21px;
}

.game-item .li-done {
  flex: none;
  font-size: 20px;
}

.studio img {
  width: 76px;
  height: auto;
  margin-top: 14px;
  opacity: 0.9;
}

.error {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 74, 74, 0.18);
  color: #ffb3b3;
  font-size: 14px;
}


/* ---------- lessons ---------- */

#lesson {
  --teacher-w: clamp(150px, 20vw, 290px);
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* While a teacher talks, a tap anywhere moves the dialogue on. */
#lesson.listening {
  pointer-events: auto;
  cursor: pointer;
}

.lesson-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.lesson-tools {
  justify-self: end;
  display: flex;
  gap: 8px;
}

.lesson-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lesson-title {
  font-family: var(--font-spooky);
  font-size: clamp(26px, 4vw, 36px);
  color: var(--orange);
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(255, 138, 28, 0.5);
}

.dots {
  display: flex;
  gap: 7px;
}

/* A model game's last move, under the title, between the step buttons (shown while its moves
   wait for ▶). */
.move-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-btn {
  display: none;
  width: 40px;
  height: 40px;
}

#lesson.stepping .step-btn {
  display: grid;
}

.step-btn:disabled {
  opacity: 0.35;
}

.step-btn.on {
  border-color: var(--orange);
  box-shadow: 0 0 14px rgba(255, 138, 28, 0.5);
}

/* ▶ at the newest move: it's the way on. */
.step-btn.waiting {
  border-color: var(--orange);
  animation: step-pulse 1.1s ease-in-out infinite;
}

@keyframes step-pulse {
  50% {
    box-shadow: 0 0 18px rgba(255, 138, 28, 0.7);
    transform: scale(1.08);
  }
}

/* Tall screens: under the board (the lesson board takes the top 62%), above the teachers. A square
   one counts as wide, as in lessonRegion. */
@media not all and (min-aspect-ratio: 1/1) {
  .move-row {
    position: fixed;
    top: 64dvh;
    left: 50%;
    transform: translateX(-50%);
  }

  /* The 2D board reaches lower than that on short screens: the row always goes under its frame. */
  body.flat .move-row {
    top: max(64dvh, calc(75px + min(96vw - 18px, 54dvh - 18px) + 22px));
  }
}

/* Wide screens: the board fills the height, so the row goes to the right, under the tools, in two
   lines (the move over the buttons) to fit in the narrow strip beside the board. */
@media (min-aspect-ratio: 1/1) {
  .move-row {
    position: fixed;
    top: calc(72px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-items: center;
    gap: 6px;
  }

  .move-row .step-btn {
    width: 36px;
    height: 36px;
  }

  .move-row .move-note {
    grid-column: 1 / -1;
    order: -1;
    padding: 3px 10px;
    font-size: 16px;
  }
}

#lesson.stepping .move-note:empty {
  display: block;
  min-width: 64px;
  min-height: 1.5em;
}

.move-note {
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1.5px solid var(--panel-border);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.move-note:empty {
  display: none;
}

.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.dots i.done {
  background: var(--orange);
}

.dots i.now {
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

/* The sound button's three states: music and effects, effects only (no-music), silence. */
.sound-on,
.sound-off,
body.no-music .sound-music,
body.muted .sound-music {
  display: none;
}

body.no-music:not(.muted) .sound-on,
body.muted .sound-off {
  display: block;
}

.task-banner {
  position: absolute;
  top: calc(84px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 20px;
  border-radius: 16px;
  background: rgba(255, 138, 28, 0.94);
  color: #2a0f00;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: card-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

/* Wide screens: during a task the prompt takes the title's place, clear of the board's far rows. */
@media (min-aspect-ratio: 1/1) {
  .task-banner {
    top: calc(10px + env(safe-area-inset-top));
    max-width: min(560px, calc(100vw - 260px));
  }

  #lesson:has(.task-banner:not(.hidden)) .lesson-head {
    visibility: hidden;
  }
}

.teacher {
  position: absolute;
  bottom: 0;
  width: var(--teacher-w);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15), filter 0.3s ease;
}

.teacher.left {
  left: 0;
  transform: translateX(-115%);
}

.teacher.right {
  right: 0;
  transform: translateX(115%) scaleX(-1);
}

.teacher.present {
  transform: none;
}

.teacher.right.present {
  transform: scaleX(-1);
}

.teacher.present.quiet {
  filter: brightness(0.7) saturate(0.8);
}

.teacher.left.present.quiet {
  transform: translateY(6%) scale(0.92);
}

.teacher.right.present.quiet {
  transform: translateY(6%) scale(0.92) scaleX(-1);
}

/* During a task the teachers duck to the bottom edge, still peeking. */
.teacher.left.present.tucked {
  transform: translateY(58%);
}

.teacher.right.present.tucked {
  transform: translateY(58%) scaleX(-1);
}

.teacher .rig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

/* Sprite teachers: one picture per mood, only the current one shows. They breathe rather than sway,
   so the cut at the waist never lifts off the bottom edge. */
.rig.sprite .pose {
  opacity: 0;
}

.rig.sprite .pose.on {
  opacity: 1;
}

.teacher .head {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: breathe 3.4s ease-in-out infinite;
}

.teacher.talking .head {
  animation-duration: 0.9s;
}

@keyframes breathe {
  50% {
    transform: scale(1.012, 1.02);
  }
}

.teacher.pop .rig.sprite .head {
  animation: hop 0.25s ease-out;
}

@keyframes hop {
  40% {
    transform: scale(1.03, 1.05);
  }
}

.rig.sprite .lids {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform 0.06s;
}

.teacher.blink .rig.sprite .lids {
  transform: scaleY(1);
}

.rig.sprite .flap {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scaleY(0);
}

.teacher.talking .rig.sprite .flap {
  animation: flap 0.15s ease-in-out infinite alternate;
}

@keyframes flap {
  from {
    transform: scaleY(0.25);
  }

  to {
    transform: scaleY(1);
  }
}

/* A pose with a talking twin talks by flicking its open mouth on and off. */
.rig.sprite .alt {
  opacity: 0;
}

.teacher.talking .rig.sprite .alt {
  animation: alt-frame 0.3s steps(1, end) infinite;
}

@keyframes alt-frame {
  50%,
  100% {
    opacity: 1;
  }
}

.bubble {
  position: absolute;
  bottom: calc(var(--teacher-w) * 1.3);
  max-width: min(400px, 34vw);
  padding: 12px 18px 22px;
  border-radius: 22px;
  background: #fffaf0;
  color: #2a1640;
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  animation: card-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.bubble.left {
  left: calc(var(--teacher-w) * 0.3);
}

.bubble.right {
  right: calc(var(--teacher-w) * 0.3);
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -14px;
  border: 14px solid transparent;
  border-top-color: #fffaf0;
  border-bottom: 0;
}

.bubble.left::after {
  left: 30px;
}

.bubble.right::after {
  right: 30px;
}

.bubble .name {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a5a2b;
}

.bubble[data-who='profesora'] .name {
  color: #2f6f6a;
}

.bubble .text {
  margin: 0;
  min-height: 1.35em;
}

.bubble .more {
  position: absolute;
  right: 16px;
  bottom: 4px;
  color: var(--orange);
  font-size: 18px;
  animation: nudge 0.7s ease-in-out infinite alternate;
}

.bubble.typing .more {
  visibility: hidden;
}

@keyframes nudge {
  to {
    transform: translateX(4px);
  }
}

/* Portrait: board on top; teachers in the bottom corners and the bubble across the screen. */
@media (max-aspect-ratio: 1/1) {
  #lesson {
    --teacher-w: 34vw;
  }

  .bubble,
  .bubble.left,
  .bubble.right {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: calc(var(--teacher-w) * 1.2);
    font-size: 17px;
  }

  .task-banner {
    top: auto;
    bottom: calc(var(--teacher-w) * 0.7);
  }
}

/* ---------- monster card (Bestiario page) ---------- */

#monster-card {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 72px 16px 16px;
  pointer-events: none;
}

/* While presented, a tap on it lets the lesson go on; as a final page it has its own button. */
#monster-card.presenting,
#monster-card.page {
  pointer-events: auto;
}

#monster-card.page {
  padding-top: 16px;
  background: radial-gradient(ellipse at center, rgba(11, 6, 32, 0.25), rgba(5, 2, 14, 0.75));
}

.mcard {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
  width: min(560px, 46vw);
  max-height: 100%;
  overflow: auto;
  border-radius: 22px;
  background: linear-gradient(160deg, #2c1a4a, #150b26);
  border: 2px solid rgba(255, 207, 74, 0.45);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 170, 60, 0.15);
  animation: card-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.mc-portrait {
  position: relative;
  min-height: 220px;
  background: radial-gradient(circle at 50% 62%, #4b2d6e, #1a0f2e 72%);
}

.mc-portrait canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mc-kicker {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mc-info {
  padding: 12px 16px 12px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.mc-info header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.mc-name {
  margin: 0;
  font-family: var(--font-spooky);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: 0.03em;
  text-shadow: 0 0 16px rgba(255, 138, 28, 0.5);
}

.mc-piece {
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.mc-move {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 10px 0 6px;
}

.mc-diagram svg {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 6px;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', serif;
}

.mc-rule {
  margin: 0;
}

.mc-value {
  margin: 6px 0;
  font-weight: 700;
  color: #ffcf4a;
}

.mc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 6px 0;
}

.mc-facts dt {
  color: var(--lime);
  font-weight: 700;
}

.mc-facts dd {
  margin: 0;
}

.mc-trivia {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(155, 99, 242, 0.18);
  font-style: italic;
}

.mc-value:empty,
.mc-trivia:empty,
.mc-stars:empty {
  display: none;
}

.mc-stars {
  margin: 10px 0 0;
  text-align: center;
  font-size: 26px;
  letter-spacing: 1px;
  color: #ffcf4a;
  text-shadow: 0 0 16px rgba(255, 207, 74, 0.5);
}

/* On short screens the card scrolls; its button stays in view. */
.mc-continue {
  position: sticky;
  bottom: 8px;
}

.mc-level-note {
  margin: 2px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.mc-level-note:empty {
  display: none;
}

.mc-hint {
  margin: 8px 0 0;
  text-align: right;
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
}

#monster-card:not(.presenting) .mc-hint,
#monster-card:not(.page):not(.browse) .mc-continue {
  display: none;
}

/* Opened from the Bestiario list: whole, over the list, with its own button. */
#monster-card.browse {
  z-index: 5;
  padding-top: 16px;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(11, 6, 32, 0.4), rgba(5, 2, 14, 0.8));
}

.mc-trivia:empty {
  display: none;
}

#monster-card.browse .mcard {
  width: min(640px, 100%);
}

/* Browsing, each fact's label goes above it: the labels are long and the column stays readable. */
#monster-card.browse .mc-facts {
  display: block;
}

#monster-card.browse .mc-facts dd {
  margin-bottom: 6px;
}

.mc-trivia p {
  margin: 0;
}

.mc-trivia p + p {
  margin-top: 6px;
}

.mc-facts dd.locked,
.mc-trivia p.locked {
  color: var(--muted);
  font-style: italic;
}

/* The end-of-lesson page is short: the rule and the facts were on the card when the monster was
   presented. */
#monster-card.page .mc-move,
#monster-card.page .mc-value,
#monster-card.page .mc-facts {
  display: none;
}

/* With the card up, the speech bubbles slim down toward the sides so they don't cover it. */
body:has(#monster-card:not(.hidden)) .bubble {
  max-width: min(300px, 22vw);
}

/* Short landscape screens (phones on their side): a wider, more compact card. */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  #monster-card {
    padding-top: 56px;
  }

  .mcard {
    grid-template-columns: 120px minmax(0, 1fr);
    width: min(600px, 62vw);
  }

  .mc-portrait {
    min-height: 0;
  }

  .mc-info {
    font-size: 13px;
  }

  .mc-name {
    font-size: 28px;
  }

  .mc-diagram svg {
    width: 70px;
    height: 70px;
  }
}

@media (max-aspect-ratio: 1/1) {
  /* Portrait: the card sits above the teachers and their bubbles. */
  #monster-card:not(.page):not(.browse) {
    align-items: start;
    padding-bottom: calc(34vw * 1.2 + 110px);
  }

  body:has(#monster-card:not(.hidden)) .bubble {
    max-width: none;
  }

  .mcard {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
  }

  .mc-portrait {
    min-height: 150px;
  }

  /* Presented mid-lesson it has to fit above the teachers: the piece goes beside the text. */
  #monster-card:not(.page):not(.browse) .mcard {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  #monster-card:not(.page):not(.browse) .mc-portrait {
    min-height: 0;
  }

  #monster-card:not(.page):not(.browse) .mc-kicker {
    font-size: 10px;
  }

  #monster-card:not(.page):not(.browse) .mc-name {
    font-size: 28px;
  }

  #monster-card:not(.page):not(.browse) .mc-diagram svg {
    width: 64px;
    height: 64px;
  }
}