/* Shared paper-and-sticker language. Catalog styles intentionally stay unchanged. */
body[data-game] {
  --ink: #30394c;
  --sky: #b7def4;
  --mint: #ade0ce;
  --rose: #f1aac1;
  --sun: #f7d45f;
  color: var(--ink);
  background: #f4f9fc;
}
body[data-game] .play-view {
  max-width: 1440px;
}
.play-view button {
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background 0.12s;
}
.play-view button:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: none;
}
.play-view .primary,
.play-view .game-controls .primary {
  background: var(--sun);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 0 4px 0 #b59c48;
}
.play-view .icon-button {
  border-color: #8496a3;
}
.play-view .game-stage,
.recall-board {
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 6px 0 #ccdce5;
  background-color: #fff;
  background-image:
    linear-gradient(#c8dfed40 1px, transparent 1px),
    linear-gradient(90deg, #c8dfed40 1px, transparent 1px);
  background-size: 24px 24px;
}
.play-view .game-hud {
  border-bottom: 1px solid #c5d9e4;
  padding-bottom: 12px;
}
.play-view .game-hud strong {
  background: #fbe8a3;
  padding: 7px 12px;
  border: 1px solid #aca26d;
  border-radius: 5px;
}
.play-view .game-prompt {
  color: var(--ink);
}
#fruitSettings {
  border: 0;
  border-top: 1px solid #c4d7df;
  margin: 18px 0;
  padding: 10px 0;
}
#fruitSettings legend {
  font-size: 14px;
  font-weight: 700;
}
#fruitSettings .setting-check {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wheel-history {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 35px;
  justify-content: center;
}
.wheel-judge {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.goose-stack {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 5 / 3;
  margin-inline: auto;
  background: #d9edf5;
  border: 2px solid #7f99b0;
  border-radius: 8px;
}
.gomoku-question {
  width: min(560px, calc(100% - 32px));
  padding: 24px;
  border: 2px solid #354054;
  border-radius: 8px;
  background: #f7fcff;
  color: #30394c;
  box-shadow: 0 8px 0 #9ab1c4;
}
.game-intro { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(0, 1.6fr); align-items: center; gap: 32px; width: 100%; max-width: 960px; margin: 28px auto; text-align: left; }
.game-intro[hidden] { display: none; }
.game-intro .intro-art { width: 100%; max-width: 220px; aspect-ratio: 1; height: auto; justify-self: center; }
.game-guide h2 { font-size: 24px; margin: 0 0 20px; color: #284655; }
.game-guide ol { padding-left: 1.5em; margin: 0; display: grid; gap: 20px; }
.game-guide li { padding-left: 6px; line-height: 1.8; font-size: 17px; overflow-wrap: anywhere; color: #3e5366; }
.game-guide li::marker { color: #158b99; font-weight: 700; }
#gameArena:has(.game-intro) { min-height: 320px; }
@media(max-width: 700px) { .game-intro { grid-template-columns: 1fr; gap: 16px; margin: 12px auto; } .game-intro .intro-art { max-width: 110px; } .game-guide h2 { font-size: 22px; } .game-guide li { font-size: 16px; } }
.gomoku-question::backdrop {
  background: #21334988;
}
.gomoku-question .big-word {
  margin: 0 0 24px;
  text-align: center;
  font-size: 64px;
}
.gomoku-question .question-options {
  margin-bottom: 20px;
}
.egg-word {
  position: absolute;
  inset: 32% 5% auto;
  font-size: 24px;
  background: white;
  border: 2px solid #556579;
  border-radius: 6px;
  padding: 4px;
}
.egg-hammer {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 85px;
  left: 61%;
  top: 10%;
  background: #bd8c50;
  border: 2px solid #364257;
  border-radius: 4px;
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: egg-strike 0.65s both;
}
.egg-hammer::before {
  content: "";
  position: absolute;
  left: -23px;
  top: -8px;
  width: 58px;
  height: 32px;
  border: 3px solid #364257;
  border-radius: 7px;
  background: #edabc4;
  box-shadow: inset -9px 0 #cf7f9d;
}
.egg-impact {
  position: absolute;
  z-index: 9;
  top: 12%;
  left: 40%;
  color: #ffd457;
  font-size: 60px;
  pointer-events: none;
  animation: egg-flash 0.6s forwards;
}
@keyframes egg-strike {
  0% {
    transform: rotate(45deg) translateY(-20px);
  }
  30% {
    transform: rotate(65deg) translateY(-25px);
  }
  58% {
    transform: rotate(-40deg) translateY(10px);
  }
  100% {
    transform: rotate(0deg) translateY(-20px);
    opacity: 0;
  }
}
@keyframes egg-flash {
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
.game-stage:has(#pauseOverlay:not([hidden])) .egg-hammer,
.game-stage:has(#pauseOverlay:not([hidden])) .egg-impact,
.game-stage:has(#pauseOverlay:not([hidden])) .egg-half,
.game-stage:has(#pauseOverlay:not([hidden])) .cracked-egg > .game-art {
  animation-play-state: paused;
}
body[data-game="fruit"] .arcade-host {
  aspect-ratio: 720 / 440;
}
.play-view .stack-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16.5%;
  height: 15%;
  transform: rotate(var(--angle));
  padding: 6px;
  font-size: 18px;
  overflow-wrap: anywhere;
  background: #c3e4ed;
}
.play-view .stack-tile:disabled {
  opacity: 1;
  background: #adc2cf;
  color: #5e7183;
  box-shadow: 0 4px #859fad;
}
.stack-tile:nth-child(3n + 2) {
  background: #f5dd8a;
}
.stack-tile:nth-child(3n) {
  background: #f0b8ce;
}
.goose-host {
  width: 65px;
  height: 65px;
  align-self: flex-start;
  margin-top: -35px;
}
.play-view .goose-tray {
  display: grid;
  grid-template-columns: repeat(var(--tray-capacity, 7), minmax(0, 1fr));
  background: #fae696;
  border: 2px solid #8f865d;
  border-radius: 6px;
  gap: 5px;
}
.goose-tray span {
  min-width: 0;
  min-height: 52px;
  overflow-wrap: anywhere;
  padding: 5px;
  font-size: 15px;
  border: 1px dashed #aa9854;
  background: transparent;
}
.goose-tray span.occupied {
  background: white;
  border-style: solid;
  animation: answer-pop 0.2s;
}
.play-view .track {
  height: 200px;
  background: #e8f5fc;
  border-bottom: 8px solid #6c8294;
  overflow: hidden;
}
.chase-city {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 4%;
  padding: 0 4%;
  opacity: 0.65;
}
.chase-character {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: var(--runner-size);
  height: 150px;
  transition: left 0.55s ease-in-out;
}
.track {
  --runner-size: 112px;
}
.handcuffs {
  opacity: 0;
  transform-origin: 100px 85px;
  transform: scale(1.8);
  transition:
    opacity 0.2s,
    transform 0.35s;
}
.is-cuffed .handcuffs {
  opacity: 1;
  transform: scale(1);
}
.is-cuffed .runner-body,
.is-cuffed .runner-leg,
.is-cuffed .runner-arm {
  animation: none;
}
body[data-game="fruit"] canvas {
  cursor: crosshair;
  touch-action: none;
}
body[data-game="meteor"] .arcade-host {
  aspect-ratio: 9 / 5;
  max-width: 1100px;
  border: 2px solid #77b9cf;
  border-radius: 8px;
}
body[data-game="meteor"] .game-prompt {
  color: #245b77;
}
body[data-game="meteor"] #roundLabel {
  font-variant-numeric: tabular-nums;
  color: #245b77;
}
.chase-character svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.runner-body {
  animation: chase-bounce 0.36s ease-in-out infinite alternate;
}
.runner-leg {
  transform-origin: 61px 112px;
  animation: chase-stride 0.36s ease-in-out infinite alternate;
}
.runner-arm {
  transform-origin: 60px 78px;
  animation: chase-swing 0.36s ease-in-out infinite alternate;
}
.runner-leg-back,
.runner-arm-front {
  animation-delay: -0.36s;
}
.chase-thief .runner-body {
  animation-delay: -0.18s;
}
.is-caught .runner-body,
.is-caught .runner-leg,
.is-caught .runner-arm,
.game-stage:has(#pauseOverlay:not([hidden])) .chase-character * {
  animation-play-state: paused;
}
@keyframes chase-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}
@keyframes chase-stride {
  from {
    transform: rotate(-22deg);
  }
  to {
    transform: rotate(19deg);
  }
}
@keyframes chase-swing {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(19deg);
  }
}
@media (max-width: 600px) {
  .chase-character {
    height: 86px;
  }
  .track {
    --runner-size: 62px;
  }
  .play-view .track {
    height: 165px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chase-character,
  .chase-character * {
    animation: none;
    transition: none;
  }
}
.city-house {
  width: 10%;
  height: var(--height);
  background: #9dd5c6;
  border: 2px solid #718c98;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.city-house::after {
  content: "";
  position: absolute;
  inset: 14px 10px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 20px,
    #ffffffad 20px 30px
  );
}
.city-house:nth-child(3n + 1) {
  background: #eaa8c2;
}
.city-house:nth-child(3n + 2) {
  background: #f4d67e;
}
.hideout {
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 12px;
  background: #fff;
  padding: 5px;
  border: 1px solid #8fa8b5;
}
.play-view .track .game-art {
  z-index: 2;
  bottom: 0;
}
.paper-thief {
  width: 35px;
  height: 62px;
  border: 2px solid #354054;
  border-radius: 9px 9px 4px 4px;
  background: repeating-linear-gradient(0deg, #fff 0 7px, #46546a 8px 13px);
  bottom: 4px;
}
.paper-thief::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -20px;
  height: 27px;
  background: linear-gradient(
    #dc84a6 0 25%,
    #f6dbb6 25% 43%,
    #354054 43% 70%,
    #f6dbb6 70%
  );
  border: 2px solid #354054;
  border-radius: 8px 8px 4px 4px;
}
.egg-selected {
  display: flex;
  justify-content: center;
  min-height: 135px;
}
.egg-selected .risk-tile {
  position: relative;
  width: 110px;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
}
.cracked-egg > .game-art:first-child {
  clip-path: polygon(0 0, 55% 0, 43% 25%, 55% 45%, 43% 70%, 55% 100%, 0 100%);
  animation: egg-left 0.8s forwards;
}
.egg-half {
  position: absolute;
  top: 4px;
  clip-path: polygon(
    55% 0,
    100% 0,
    100% 100%,
    55% 100%,
    43% 70%,
    55% 45%,
    43% 25%
  );
  animation: egg-right 0.8s forwards;
}
@keyframes egg-left {
  to {
    transform: translate(-35px, 20px) rotate(-30deg);
    opacity: 0.3;
  }
}
@keyframes egg-right {
  to {
    transform: translate(35px, 20px) rotate(30deg);
    opacity: 0.3;
  }
}
.play-view .answer-option,
.play-view .tile-button,
.play-view .risk-tile {
  border: 2px solid #637186;
  box-shadow: 0 4px 0 #ced6db;
  background: #fff;
  color: var(--ink);
  border-radius: 7px;
}
.play-view .answer-option:nth-child(4n + 1),
.play-view .match-grid [data-kind="1"]:nth-child(4n + 1),
.sentence-bank button:nth-child(4n + 1) {
  background: #c2e4f4;
}
.play-view .answer-option:nth-child(4n + 2),
.play-view .match-grid [data-kind="1"]:nth-child(4n + 2),
.sentence-bank button:nth-child(4n + 2) {
  background: #bfe5d5;
}
.play-view .answer-option:nth-child(4n + 3),
.play-view .match-grid [data-kind="1"]:nth-child(4n + 3),
.sentence-bank button:nth-child(4n + 3) {
  background: #fae48f;
}
.play-view .answer-option:nth-child(4n),
.play-view .match-grid [data-kind="1"]:nth-child(4n),
.sentence-bank button:nth-child(4n) {
  background: #f4c3d0;
}
.play-view .answer-option.correct {
  background: #8bd4b7;
  animation: answer-pop 0.35s ease;
}
.play-view .answer-option.wrong {
  background: #f6a4b1;
  animation: shake 0.32s;
}
.play-view .match-grid button.matched {
  visibility: visible;
  animation: match-away 0.45s forwards;
  pointer-events: none;
}
.play-view .game-controls button {
  border: 2px solid #65718a;
  box-shadow: 0 3px 0 #d0d8df;
}
.play-view .team-panel {
  background: #e6f3fd;
  border-radius: 6px;
  min-width: 0;
}
.play-view .team-panel:nth-child(2) {
  background: #fdebf0;
}
.play-view .team-question {
  font-size: 20px;
  text-align: center;
  min-height: 28px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.play-view .team-panel .answer-option {
  position: relative;
  padding-left: 24px;
}
.play-view .team-panel .answer-option::before {
  content: attr(data-key);
  position: absolute;
  left: 5px;
  top: 5px;
  font: 11px system-ui;
  opacity: 0.65;
}
.life-meter {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.life-meter i {
  height: 12px;
  width: 30px;
  border: 1px solid #788597;
  background: white;
  border-radius: 3px;
}
.life-meter i.full {
  background: #ef94b2;
}
.boxing-scene,
.tug-scene {
  width: min(720px, 100%);
  height: 165px;
  position: relative;
  border-bottom: 7px solid #8ea5b9;
  overflow: hidden;
}
.boxing-scene {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 40px,
    #b0c5d3 41px 43px,
    transparent 44px 55px
  );
}
.battle-marker {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  background: var(--sun);
  padding: 8px 15px;
  font-size: 22px;
  font-weight: 800;
  border: 2px solid var(--ink);
  border-radius: 5px;
}
.paper-fighter {
  position: absolute;
  bottom: 3px;
  width: 65px;
  height: 128px;
  transition: transform 0.18s;
  --suit: #62b2d9;
}
.fighter-0 {
  left: 25%;
}
.fighter-1 {
  right: 25%;
  --suit: #ec88aa;
  transform: scaleX(-1);
}
.fighter-head {
  position: absolute;
  left: 13px;
  top: 2px;
  width: 43px;
  height: 39px;
  border: 2px solid var(--ink);
  background: #f6dbb6;
  border-radius: 7px;
  display: flex;
  gap: 12px;
  padding: 15px 9px;
}
.fighter-head i {
  width: 4px;
  height: 5px;
  background: var(--ink);
  border-radius: 50%;
}
.fighter-body {
  position: absolute;
  left: 14px;
  top: 40px;
  width: 40px;
  height: 56px;
  background: var(--suit);
  border: 2px solid var(--ink);
}
.fighter-arm {
  position: absolute;
  left: 39px;
  top: 45px;
  width: 45px;
  height: 24px;
  background: var(--suit);
  border: 2px solid var(--ink);
  border-radius: 7px;
  transform: rotate(-20deg);
  transform-origin: left center;
}
.fighter-leg {
  position: absolute;
  left: 14px;
  top: 95px;
  width: 39px;
  height: 28px;
  border: 10px solid var(--suit);
  border-top: 0;
  box-shadow: 0 3px var(--ink);
}
.fighter-0.punching {
  transform: translateX(50px);
}
.fighter-1.punching {
  transform: translateX(-50px) scaleX(-1);
}
.punching .fighter-arm {
  transform: rotate(0deg) scaleX(1.6);
}
.taking-hit {
  animation: shake 0.25s 2;
}
.tug-scene::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 67%;
  height: 6px;
  background: #a68b69;
}
.tug-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 2px dashed #d8708b;
}
.play-mascot {
  display: block;
  background: url("/classroom/assets/play-atlas.png") var(--mx) var(--my) / 300%
    200% no-repeat;
  width: 150px;
  aspect-ratio: 1;
  pointer-events: none;
}
.pull-team {
  position: absolute;
  width: 210px;
  height: 165px;
  bottom: 0;
  transition: translate 0.3s;
  translate: var(--pull, 0) 0;
}
.pull-left {
  left: 10%;
  scale: -1 1;
}
.pull-right {
  right: 10%;
  scale: -1 1;
}
.tug-scene .battle-marker {
  top: 8%;
  font-size: 16px;
}
.potion-score {
  font-size: 20px;
  font-weight: 700;
  color: #5f4876;
}
.potion-grid {
  max-width: 820px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.potion-grid .game-art {
  filter: hue-rotate(var(--bottle-hue));
}
.potion-grid .pointed {
  background: #ffe997;
  transform: translateY(-5px);
  outline: 3px solid #d9af3b;
}
.spell-log {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
}
.croc-scene {
  width: min(500px, 100%);
  aspect-ratio: 1.3;
  position: relative;
}
.croc-face {
  width: 100%;
  height: 100%;
}
.croc-teeth {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.tooth {
  background: #fff;
  border: 2px solid #697765;
  border-radius: 5px 5px 8px 8px;
  min-height: 53px;
  font:
    24px CardKaitiM,
    serif !important;
  padding: 4px;
  overflow-wrap: anywhere;
  box-shadow: 0 4px #b4c1a5;
}
.tooth.pressed {
  transform: translateY(12px);
  opacity: 0.3;
}
.biting .croc-teeth {
  visibility: hidden;
}
.biting {
  animation: jaw-snap 0.35s;
}
.recall-inputs {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.recall-source {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid #9eb5c4;
  border-radius: 6px;
  background: #fff;
}
.recall-source > svg {
  width: 20px;
  flex-shrink: 0;
  color: #5993b1;
}
.recall-source > strong {
  white-space: nowrap;
  font-size: 14px;
  width: 72px;
  flex-shrink: 0;
}
.recall-source > input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 6px;
  font:
    20px CardKaitiM,
    serif;
}
.recall-source > span {
  color: #708190;
  white-space: nowrap;
  font-size: 12px;
}
.recall-source.terms-source {
  border-left: 5px solid #ed9eb7;
}
.recall-source.roster-source {
  border-left: 5px solid #80bfdc;
}
.recall-editor summary {
  cursor: pointer;
  font-size: 13px;
  padding: 6px 0;
  color: #607884;
}
.recall-editor-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
}
.recall-editor select,
.recall-editor button,
.recall-actions select {
  padding: 8px;
  border: 1px solid #96a9b6;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
}
.recall-editor table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.recall-editor th,
.recall-editor td {
  border: 1px solid #d3dfe6;
  padding: 6px;
  text-align: left;
}
.recall-editor input {
  width: 100%;
  min-width: 80px;
  border: 0;
  padding: 7px;
}
.table-scroll {
  overflow: auto;
  max-height: 270px;
}
#recallStatus {
  margin: 4px 0;
  min-height: 20px;
  font-size: 13px;
  color: #a34f57;
}
.recall-board {
  position: relative;
  overflow: hidden;
}
.paper-window {
  height: 43px;
  border-bottom: 2px solid #748394;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 8px 18px;
  background: #f8fbfd;
}
.paper-window > strong {
  font-size: 14px;
}
.paper-window > span:last-child {
  font-size: 12px;
  color: #75899b;
}
.window-dots {
  display: flex;
  gap: 7px;
}
.window-dots i {
  width: 10px;
  height: 10px;
  border: 1px solid #8292a1;
  border-radius: 50%;
  background: #f2aac0;
}
.window-dots i:nth-child(2) {
  background: #f8d670;
}
.window-dots i:nth-child(3) {
  background: #a6dcca;
}
.recall-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.recall-pair > section {
  min-width: 0;
  position: relative;
  height: 340px;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recall-student {
  border-right: 2px dashed #bdd2df;
}
.recall-pair h2 {
  position: absolute;
  top: 16px;
  left: 24px;
  font-size: 15px;
  margin: 0;
  color: #5b839d;
}
.recall-word h2 {
  color: #b56f87;
}
.recall-pair h2 b {
  font-size: 12px;
}
.draw-name {
  width: 100%;
  height: 100px;
  font:
    76px CardKaitiM,
    serif;
  line-height: 1.2;
  text-align: center;
  z-index: 1;
  overflow-wrap: anywhere;
}
.draw-name::after {
  content: "";
  display: block;
  width: 100px;
  height: 8px;
  background: #f7d56e;
  opacity: 0.8;
  margin: -10px auto 0;
}
.student-turn {
  margin-top: 12px;
  font-size: 13px;
  color: #7a8d9b;
  z-index: 1;
}
.word-ticket {
  width: min(400px, 100%);
  min-width: 0;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.word-ticket > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 130px;
  padding: 10px 12px;
  background: var(--mint);
  border: 2px solid #5f8b82;
  box-shadow: 0 5px 0 #80b6a6;
  border-radius: 7px;
  font:
    90px CardKaitiM,
    serif;
  text-align: center;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.word-ticket > strong.meaning-question {
  font-family: system-ui, sans-serif;
}
.recall-pinyin {
  height: 34px;
  font-size: 23px;
  color: #548399;
}
.recall-meaning {
  height: 55px;
  padding-top: 12px;
  max-width: 100%;
  font-size: 21px;
  text-align: center;
  overflow-wrap: anywhere;
  overflow: auto;
}
.recall-cheer {
  position: absolute;
  left: 4px;
  bottom: -5px;
  width: 110px;
  opacity: 0.9;
}
.recall-mountain {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 115px;
  opacity: 0.5;
}
.recall-speaker {
  position: absolute;
  right: 18px;
  bottom: 12px;
  z-index: 2;
}
.recall-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
}
.recall-actions > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 165px;
  height: 52px;
  border: 2px solid #536276;
  border-radius: 7px;
  box-shadow: 0 4px 0 #8ca99d;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  background: var(--mint);
}
.recall-actions > button.draw-button {
  background: var(--sun);
  box-shadow: 0 4px 0 #b39e56;
}
.recall-actions button svg {
  width: 21px;
}
.recall-actions label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.recall-actions input {
  width: 17px;
  height: 17px;
  accent-color: #438a9e;
}
.recall-history {
  display: flex;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #ccdce5;
  padding: 15px 0;
}
.recall-history > strong {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  color: #718694;
}
.recall-history svg {
  width: 16px;
}
.recall-history > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.history-entry {
  font-size: 13px;
  border-bottom: 3px solid #aad9dc;
  padding: 4px;
}
.is-drawing .draw-name,
.is-drawing .word-ticket {
  animation: shuffle-tick 0.1s infinite;
}
.just-revealed {
  animation: answer-pop 0.4s;
}
.paper-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}
.paper-burst i {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 7px;
  height: 13px;
  animation: paper-fly 1.3s ease-out forwards;
}
#recallStudio:fullscreen {
  padding: 20px;
  background: #f4f9fc;
  overflow: auto;
}
#recallStudio:fullscreen .recall-pair > section {
  height: min(52vh, 600px);
}
@keyframes answer-pop {
  50% {
    transform: scale(1.05) rotate(-1deg);
  }
}
@keyframes match-away {
  45% {
    transform: scale(1.08) rotate(-3deg);
    opacity: 1;
  }
  to {
    transform: scale(0.3);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes shake {
  25%,
  75% {
    translate: -5px 0;
  }
  50% {
    translate: 5px 0;
  }
}
@keyframes shuffle-tick {
  50% {
    translate: 0 -3px;
  }
}
@keyframes jaw-snap {
  50% {
    transform: scale(1.08);
  }
}
@keyframes paper-fly {
  to {
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    opacity: 0;
  }
}
@media (max-width: 750px) {
  .recall-pair > section {
    height: 280px;
    padding: 18px 14px;
  }
  .recall-pair h2 {
    left: 14px;
    font-size: 13px;
  }
  .word-ticket {
    height: 200px;
  }
  .word-ticket > strong {
    height: 105px;
  }
  .recall-meaning {
    font-size: 17px;
  }
  .recall-cheer,
  .recall-mountain {
    width: 75px;
  }
  .recall-source {
    gap: 7px;
    padding: 6px 8px;
  }
  .recall-source > strong {
    width: 62px;
    font-size: 12px;
  }
  .recall-source > input {
    font-size: 18px;
  }
  .recall-source > svg {
    display: none;
  }
  .recall-source > span {
    display: none;
  }
  .recall-actions {
    gap: 13px;
  }
  .recall-actions > button {
    min-width: 130px;
  }
  .recall-history {
    align-items: flex-start;
  }
  .potion-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .boxing-scene,
  .tug-scene {
    height: 145px;
  }
  .pull-team {
    width: 145px;
    height: 135px;
  }
  .pull-left {
    left: 0;
  }
  .pull-right {
    right: 0;
  }
  .fighter-0 {
    left: 12%;
  }
  .fighter-1 {
    right: 12%;
  }
  .tooth {
    font-size: 18px !important;
    min-height: 40px;
  }
  .croc-teeth {
    gap: 4px;
    left: 7%;
    right: 7%;
    bottom: 9%;
  }
  .battle-marker {
    font-size: 17px;
    padding: 7px;
  }
  .play-view .team-question {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .recall-pair {
    grid-template-columns: 1fr;
  }
  .recall-pair > section {
    height: 235px;
  }
  .recall-student {
    border-right: 0;
    border-bottom: 2px dashed #bdd2df;
  }
  .recall-word .word-ticket {
    width: 85%;
    height: 175px;
  }
  .recall-word h2 {
    top: 8px;
  }
  .recall-word .recall-pinyin {
    height: 28px;
    font-size: 18px;
  }
  .recall-editor-toolbar {
    flex-wrap: wrap;
  }
  .recall-history {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .play-view * {
    animation: none !important;
    transition: none !important;
  }
  .play-view .match-grid button.matched {
    visibility: hidden;
  }
  .paper-burst {
    display: none;
  }
}
.play-view .stack-tile:not(:disabled):nth-child(3n + 1),
.play-view .tone-keys button:nth-child(3n + 1) {
  background: #bfe5d5;
}
.play-view .stack-tile:not(:disabled):nth-child(3n + 2),
.play-view .tone-keys button:nth-child(3n + 2) {
  background: #fae48f;
}
.play-view .stack-tile:not(:disabled):nth-child(3n),
.play-view .tone-keys button:nth-child(3n) {
  background: #f4c3d0;
}
body[data-game="egg"] .risk-tile {
  position: relative;
  overflow: hidden;
}
body[data-game="egg"] .risk-tile:disabled {
  opacity: 0.8;
}
@media (max-width: 600px) {
  .goose-stack {
    aspect-ratio: 0.85;
  }
  .play-view .stack-tile {
    padding: 2px;
    font-size: 12px !important;
    border-width: 1px;
    line-height: 1.1;
  }
}