:root {
  color-scheme: light;
  --cream: #fff9e9;
  --cream-deep: #ffdda0;
  --paper: #fffefb;
  --navy: #243858;
  --navy-soft: #4b6680;
  --teal: #22cbb7;
  --teal-dark: #007e77;
  --teal-pale: #d4faf3;
  --orange: #ff7c61;
  --gold: #ffca3d;
  --green: #17b968;
  --green-pale: #dcfae8;
  --red: #ff5470;
  --red-pale: #ffe0e7;
  --blue: #3c9dff;
  --blue-pale: #ddecff;
  --pink: #ff5793;
  --pink-pale: #ffdeeb;
  --purple: #7f68e8;
  --purple-pale: #ebe4ff;
  --line: #bcdcf0;
  --shadow: 0 18px 50px rgba(39, 64, 96, 0.14);
  --shadow-small: 0 8px 24px rgba(39, 64, 96, 0.11);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-size: 16px;
  --header-height: 118px;
  --body-art:
    radial-gradient(circle at 3% 18%, rgba(255, 87, 147, 0.27), transparent 25rem),
    radial-gradient(circle at 92% 72%, rgba(34, 203, 183, 0.26), transparent 30rem),
    radial-gradient(circle at 72% 4%, rgba(255, 202, 61, 0.25), transparent 24rem);
  --header-art: linear-gradient(105deg, rgba(255, 222, 235, 0.97), rgba(221, 239, 255, 0.97) 48%, rgba(255, 241, 184, 0.97));
  --hero-art:
    radial-gradient(circle at 88% 15%, rgba(255,215,106,.45) 0 7%, transparent 7.3%),
    radial-gradient(circle at 95% 91%, rgba(255,125,161,.22) 0 12%, transparent 12.3%),
    linear-gradient(125deg, rgba(255,254,251,.96) 0 52%, rgba(255,232,240,.94) 52% 59%, rgba(225,246,255,.96) 59%);
  --tool-1: #d9efff;
  --tool-2: #ffdce9;
  --tool-3: #d6fbf4;
  --tool-4: #fff0ae;
  --tool-5: #e8dfff;
  --tool-6: #dcecff;
  --tool-7: #ffdaea;
  --tool-8: #ffe0d4;
  --title-color: #2f5b96;
  --title-shadow: 0 8px 0 rgba(255,202,61,.46);
  --question-color: #ff4f8b;
  --message-bg: #fff2b8;
  --primary-start: #ff8a68;
  --primary-end: #ff5f99;
  --primary-edge: #bf3f6c;
  --prompt-border: #2d6fa7;
  --prompt-art: linear-gradient(150deg, #fffefb, #ffe3f0 62%, #d8f5ff);
  --prompt-shadow-color: #ff5e94;
  --table-art: linear-gradient(90deg, #2c79b7, #5268d5);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--cream); font-size: var(--font-size); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--navy);
  background: var(--body-art), var(--cream);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), label[for], select, input[type="range"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
[hidden] { display: none !important; }

:focus-visible { outline: 4px solid rgba(90, 159, 224, 0.42); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: -80px;
  padding: 12px 18px;
  color: white;
  background: var(--navy);
  border-radius: 10px;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

body.web-access-locked { overflow: hidden; }

.web-access-gate {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(24px, 6vh, 64px) 24px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 202, 61, 0.82) 0 4.5rem, transparent 4.7rem),
    radial-gradient(circle at 88% 82%, rgba(255, 87, 147, 0.48) 0 7rem, transparent 7.2rem),
    linear-gradient(135deg, #d9f8ff 0%, #fff6c9 48%, #ffe0ed 100%);
}

.web-access-gate::before,
.web-access-gate::after {
  position: fixed;
  border: 3px dashed rgba(45, 111, 167, 0.2);
  border-radius: 999px;
  content: "";
  pointer-events: none;
}
.web-access-gate::before { width: 26rem; height: 26rem; left: -11rem; bottom: -12rem; }
.web-access-gate::after { width: 19rem; height: 19rem; right: -7rem; top: -8rem; }

.web-access-card {
  position: relative;
  width: min(590px, 100%);
  padding: clamp(44px, 7vw, 68px) clamp(28px, 6vw, 58px) 34px;
  border: 3px solid #2d6fa7;
  border-radius: 34px;
  background: rgba(255, 254, 251, 0.97);
  box-shadow: 12px 14px 0 rgba(34, 203, 183, 0.28), 0 30px 70px rgba(36, 56, 88, 0.2);
  text-align: center;
}

.web-access-mascot {
  position: absolute;
  top: -74px;
  right: 34px;
  width: 150px;
  height: 124px;
  pointer-events: none;
}
.web-access-mascot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(36, 56, 88, 0.16)); }
.web-access-spark { position: absolute; z-index: 1; color: #ff5793; font-size: 1.5rem; font-weight: 900; }
.web-access-spark.spark-one { top: 5px; left: 5px; color: #ffca3d; transform: rotate(-15deg); }
.web-access-spark.spark-two { top: 15px; right: 6px; color: #3c9dff; font-size: 0.78rem; }

.web-access-eyebrow {
  display: inline-flex;
  padding: 7px 15px;
  border-radius: 999px;
  color: #007e77;
  background: #d4faf3;
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.web-access-card h1 { margin: 18px 0 8px; color: #243858; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; }
.web-access-card > p { margin: 0 auto; color: #4b6680; font-weight: 700; }

.web-access-form { display: grid; gap: 10px; margin-top: 28px; text-align: left; }
.web-access-form > label { color: #243858; font-size: 0.92rem; font-weight: 900; }
.web-access-input-row { position: relative; }
.web-access-input-row input {
  width: 100%;
  min-height: 64px;
  padding: 14px 88px 14px 18px;
  border: 2px solid #9bc9e8;
  border-radius: 17px;
  color: #243858;
  background: #f8fcff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.web-access-input-row input:focus { border-color: #3c9dff; outline: 4px solid rgba(60, 157, 255, 0.18); }
.web-access-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  min-width: 66px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  color: #2f5b96;
  background: #ddecff;
  font-weight: 900;
  transform: translateY(-50%);
}
.web-access-error { min-height: 24px; margin: 0; color: #d92f53; font-size: 0.86rem; font-weight: 900; }
.web-access-submit {
  min-height: 68px;
  border: 2px solid #b93f69;
  border-radius: 18px;
  color: #243858;
  background: linear-gradient(100deg, #ffca64, #ff749f);
  box-shadow: 0 8px 0 #b93f69;
  font-size: 1.28rem;
  font-weight: 950;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.web-access-submit:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 0 #b93f69; }
.web-access-submit:not(:disabled):active { transform: translateY(5px); box-shadow: 0 3px 0 #b93f69; }
.web-access-submit:disabled { opacity: 0.7; }
.web-access-card .web-access-local-note { margin-top: 27px; color: #6c8398; font-size: 0.78rem; font-weight: 700; }

.web-access-gate.access-denied .web-access-card { animation: access-shake 0.36s ease-in-out; }
@keyframes access-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

@media (max-width: 620px) {
  .web-access-gate { padding: 72px 16px 28px; }
  .web-access-card { padding: 52px 22px 28px; border-radius: 26px; }
  .web-access-mascot { top: -64px; right: 18px; width: 126px; height: 105px; }
  .web-access-card h1 { max-width: 12ch; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .web-access-gate.access-denied .web-access-card { animation: none; }
}

.app-shell { min-height: 100vh; }
.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: var(--header-height);
  padding: 10px clamp(16px, 3vw, 48px);
  border-bottom: 1px solid rgba(39, 64, 96, 0.11);
  background: var(--header-art);
  backdrop-filter: blur(16px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
}
.brand img { filter: drop-shadow(0 6px 9px rgba(39, 64, 96, 0.16)); }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 1.08rem; letter-spacing: 0.03em; }
.brand small { margin-top: 5px; color: var(--blue); font-size: 0.72rem; }

.header-actions { display: flex; justify-self: end; gap: 8px; }
.header-lower { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; padding-top: 8px; }
.header-theme-picker { display: flex; align-items: center; gap: 9px; color: var(--navy-soft); white-space: nowrap; font-size: .82rem; font-weight: 900; }
.header-theme-picker select { min-width: 180px; padding: 7px 32px 7px 11px; border: 2px solid rgba(90,159,224,.28); border-radius: 13px; color: var(--navy); background: rgba(255,255,255,.82); font-weight: 800; }
body.game-active .header-theme-picker { display: none; }
body.game-active .header-lower { display: none; }
.tool-button {
  display: grid;
  place-items: center;
  min-width: 66px;
  min-height: 58px;
  padding: 6px 9px;
  border: 2px solid rgba(39,64,96,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 4px 0 rgba(39,64,96,.1);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tool-button span { font-size: 1.25rem; font-weight: 900; line-height: 1; }
.tool-button small { margin-top: 3px; font-size: .72rem; font-weight: 900; }
.tool-button:nth-child(1) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-1) 70%, white), var(--tool-1)); }
.tool-button:nth-child(2) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-2) 70%, white), var(--tool-2)); }
.tool-button:nth-child(3) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-3) 70%, white), var(--tool-3)); }
.tool-button:nth-child(4) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-4) 70%, white), var(--tool-4)); }
.tool-button:nth-child(5) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-5) 70%, white), var(--tool-5)); }
.tool-button:nth-child(6) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-6) 70%, white), var(--tool-6)); }
.tool-button:nth-child(7) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-7) 70%, white), var(--tool-7)); }
.tool-button:nth-child(8) { background: linear-gradient(145deg, color-mix(in srgb, var(--tool-8) 70%, white), var(--tool-8)); }
.tool-button:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--blue); background: white; box-shadow: 0 7px 0 rgba(90,159,224,.18); }
.tool-button[aria-pressed="true"] { color: var(--navy); border-color: var(--teal-dark); background: var(--teal); }
.icon-button, .small-button {
  min-width: 48px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 50, 77, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  font-weight: 700;
}
.icon-button:hover, .small-button:hover { border-color: var(--teal); background: white; }
.icon-button[aria-pressed="true"] { color: white; border-color: var(--navy); background: var(--navy); }

main { width: 100%; }
.screen { width: min(1500px, 100%); margin: 0 auto; padding: clamp(22px, 4vw, 56px); }

.hero-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 440px;
  overflow: hidden;
  border: 3px solid rgba(90, 159, 224, 0.2);
  border-radius: 40px;
  background: var(--hero-art), var(--paper);
  box-shadow: var(--shadow);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 2px dashed rgba(90, 159, 224, 0.25);
  border-radius: 30px;
}
.hero-copy { z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 90px); }
.eyebrow { color: var(--teal-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.hero-copy h1 { margin: 16px 0; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.06; letter-spacing: -0.05em; }
.hero-copy h1 span { color: var(--teal-dark); }
.hero-copy p { max-width: 720px; margin: 0; color: var(--navy-soft); font-size: clamp(1rem, 1.5vw, 1.22rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.ready-hero { min-height: calc(100vh - var(--header-height) - clamp(44px, 8vw, 112px)); }
.ready-copy { align-items: center; padding-block: clamp(38px, 5vw, 70px); text-align: center; }
.ready-copy h1 { margin: 0; color: var(--title-color); font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Microsoft YaHei", sans-serif; font-size: clamp(6.5rem, 12.2vw, 11.8rem); font-weight: 900; line-height: .95; letter-spacing: -.07em; text-shadow: var(--title-shadow); }
.ready-copy h1 span { margin-left: .03em; color: var(--question-color); text-shadow: 0 8px 0 rgba(255,146,112,.2); }
.instant-start { width: min(620px, 100%); min-height: 84px; margin-top: 38px; font-size: clamp(1.5rem, 2.5vw, 2.05rem); }
.instant-start span { display: inline-block; margin-left: 8px; transition: transform .18s ease; }
.instant-start:hover span { transform: translateX(5px); }
.ready-actions { display: flex; width: min(580px, 100%); gap: 14px; margin-top: 18px; }
.ready-actions > * { flex: 1; }
.ready-actions > :first-child { border-color: #e3ad36; background: #fff2bd; box-shadow: 0 6px 0 rgba(227,173,54,.35); }
.ready-actions > :last-child { border-color: var(--purple); background: var(--purple-pale); box-shadow: 0 6px 0 rgba(144,119,212,.28); }
.home-tools { margin-top: 24px; }
.home-tools > summary { width: fit-content; min-height: 48px; margin: 0 auto; padding: 12px 18px; border: 1px solid rgba(23,50,77,.14); border-radius: 999px; color: var(--navy-soft); background: rgba(255,253,248,.76); font-weight: 800; cursor: pointer; }
.home-tools[open] > summary { color: var(--teal-dark); background: var(--teal-pale); }

.hero-mascot { position: relative; display: grid; place-items: center; min-height: 400px; padding: 42px; }
.hero-mascot img { z-index: 2; width: min(100%, 540px); animation: float 4s ease-in-out infinite; }
.route-line { position: absolute; width: 82%; height: 58%; border: 5px dashed rgba(90,159,224,.24); border-radius: 50%; transform: rotate(-15deg); }
.mascot-message, .speech-bubble {
  position: absolute;
  z-index: 3;
  right: 8%;
  top: 13%;
  max-width: 210px;
  padding: 13px 17px;
  border: 3px solid var(--navy);
  border-radius: 20px 20px 20px 5px;
  background: var(--message-bg);
  box-shadow: var(--shadow-small);
  font-weight: 800;
}

@keyframes float { 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes pulse { 50% { transform: scale(1.035); } }
@keyframes card-in { from { transform: translateY(24px) rotate(-1deg); opacity: 0; } }
@keyframes celebrate { 25% { transform: translateY(-10px) rotate(-3deg); } 55% { transform: translateY(-4px) rotate(4deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.primary-button, .secondary-button, .danger-button, .judge-button {
  min-height: 50px;
  padding: 12px 22px;
  border-radius: 15px;
  font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.primary-button { color: var(--navy); border: 2px solid var(--primary-edge); background: linear-gradient(135deg, var(--primary-start), var(--primary-end)); box-shadow: 0 7px 0 var(--primary-edge); }
.primary-button:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 9px 0 var(--primary-edge); }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--primary-edge); }
.secondary-button { border: 2px solid var(--navy); background: var(--paper); box-shadow: 0 6px 0 rgba(39,64,96,.18); }
.secondary-button:hover { transform: translateY(-2px); background: white; }
.danger-button { color: white; border: 2px solid #a73636; background: var(--red); box-shadow: 0 6px 0 #a73636; }
.jumbo { min-height: 58px; padding-inline: 28px; font-size: 1.04rem; }
.compact { min-height: 44px; padding: 8px 16px; }
.wide { width: 100%; }
.text-button, .danger-link {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--teal-dark);
  background: transparent;
  font-weight: 800;
}
.text-button:hover { background: var(--teal-pale); }
.danger-link { color: var(--red); }
.danger-link:hover { background: var(--red-pale); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.home-grid { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 22px; margin-top: 26px; }
.panel { border: 2px solid rgba(90,159,224,.17); border-radius: var(--radius-lg); background: rgba(255,254,251,.94); box-shadow: var(--shadow-small); }
.unit-panel, .setup-summary, .library-sidebar, .library-content, .results-grid > .panel { padding: clamp(20px, 2.5vw, 34px); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading > div { display: flex; align-items: center; gap: 10px; }
.panel-heading h2, .panel-heading p { margin: 0; }
.panel-heading h2 { font-size: 1.18rem; }
.panel-heading p { color: var(--navy-soft); font-size: .85rem; }
.step-number { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--navy); background: var(--gold); font-size: .8rem; font-weight: 900; box-shadow: 0 3px 0 #e5ae3a; }

.unit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.unit-card {
  position: relative;
  display: grid;
  min-height: 120px;
  padding: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 17px;
  text-align: left;
  background: var(--cream);
}
.unit-card::after { content: attr(data-index); position: absolute; right: 10px; bottom: -18px; color: rgba(23,50,77,.08); font-size: 4.3rem; font-weight: 900; }
.unit-card:hover { border-color: var(--orange); }
.unit-card[aria-checked="true"] { color: white; border-color: var(--navy); background: var(--teal); box-shadow: 0 7px 0 var(--navy); }
.unit-card strong { z-index: 1; align-self: end; font-size: 1rem; }
.unit-card small { z-index: 1; opacity: .8; }
.unit-card .unit-count { align-self: start; justify-self: start; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.62); color: var(--navy); font-size: .72rem; font-weight: 800; }

.setup-summary dl { display: grid; gap: 0; margin: 0 0 18px; }
.setup-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.setup-summary dt { color: var(--navy-soft); }
.setup-summary dd { margin: 0; text-align: right; font-weight: 800; }
.recent-summary { margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--blue-pale); }
.recent-summary p { margin: 6px 0 0; color: var(--navy-soft); font-size: .85rem; }
.resume-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 24px 28px; border: 2px dashed var(--orange); border-radius: var(--radius-md); background: #fff1df; }
.resume-card h2, .resume-card p { margin: 4px 0; }

/* Game */
.game-screen { width: min(1700px, 100%); min-height: calc(100vh - var(--header-height)); padding-top: 18px; }
.game-toolbar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) 96px auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 54px;
  padding: 5px 14px;
  border-bottom: 1px solid rgba(39,64,96,.12);
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue-pale) 88%, white), color-mix(in srgb, var(--teal-pale) 78%, white));
}
.group-turn { grid-column: 1; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--gold); }
.progress-cluster { grid-column: 2; display: flex; align-items: center; gap: 12px; }
.group-turn[hidden] + .progress-cluster { grid-column: 1 / 3; }
.progress-cluster > span { min-width: 52px; text-align: center; font-weight: 900; }
.progress-track { flex: 1; height: 9px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--gold) 40%, var(--cream)); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--blue)); box-shadow: 0 0 10px color-mix(in srgb, var(--teal) 65%, transparent); transition: width .25s ease; }
.timer-chip { grid-column: 3; min-width: 90px; padding: 4px 12px; border: 2px solid var(--navy); border-radius: 12px; text-align: center; background: var(--paper); }
#pauseButton { grid-column: 4; min-height: 42px; padding: 7px 15px; box-shadow: 0 4px 0 rgba(39,64,96,.18); }
.timer-chip span { display: block; color: var(--navy-soft); font-size: .66rem; line-height: 1.05; }
.timer-chip strong { font-size: 1.18rem; line-height: 1.05; }
.timer-chip.warning { color: var(--red); border-color: var(--red); background: var(--red-pale); animation: pulse .7s infinite; }

.game-stage { display: block; min-height: min(70vh, 760px); padding: 0; }
/* Game layout B: progress, prompt and judgement share one classroom board. */
.mascot-dock { position: absolute; z-index: 5; top: clamp(18px, 2vw, 32px); right: clamp(24px, 2.2vw, 40px); width: clamp(108px, 8.2vw, 138px); pointer-events: none; opacity: .82; transform-origin: right top; transition: opacity .25s, transform .25s; }
.mascot-dock img { display: block; width: 100%; transition: filter .25s, transform .25s; }
.mascot-live { position: absolute; z-index: 4; top: 5%; right: 78%; width: max-content; max-width: 190px; padding: 10px 14px; border: 2px solid var(--navy); border-radius: 17px 17px 5px 17px; color: var(--navy); background: var(--message-bg); box-shadow: var(--shadow-small); font-size: clamp(.8rem, 1vw, .96rem); font-weight: 900; line-height: 1.35; white-space: normal; }
.mascot-live[hidden] { display: none; }
.mascot-live::after { content: ""; position: absolute; right: 8px; top: 100%; width: 14px; height: 14px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); background: var(--message-bg); transform: translateY(-7px) rotate(45deg); }
.prompt-card.answer-visible .mascot-dock { opacity: .68; transform: scale(.98); }
.prompt-card:not(.answer-visible) .mascot-dock { opacity: .5; transform: scale(.9); }
.prompt-card.answer-visible .mascot-dock.correct { opacity: .96; transform: scale(1.06); }
.mascot-dock.correct img { animation: celebrate .65s ease; }
.mascot-dock.wrong img { animation: shake .45s ease; filter: saturate(.65); }
.mascot-dock.pending img { filter: sepia(.18); }
.group-scoreboard { position: absolute; z-index: 4; top: clamp(14px, 1.5vw, 24px); left: 50%; display: block; width: min(860px, calc(100% - 300px)); padding: 10px 12px 12px; border: 2px solid color-mix(in srgb, var(--blue) 42%, var(--navy)); border-radius: 22px; background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 7px 0 color-mix(in srgb, var(--blue-pale) 88%, rgba(39,64,96,.12)), 0 14px 28px rgba(39,64,96,.12); transform: translateX(-50%); backdrop-filter: blur(12px); }
.group-scoreboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding: 0 4px; }
.group-mode-title { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: .86rem; font-weight: 950; }
.group-mode-title b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--gold); font-size: .82rem; box-shadow: 0 3px 0 color-mix(in srgb, var(--orange) 42%, transparent); }
.group-current-label { color: var(--navy-soft); font-size: .8rem; font-weight: 800; }
.group-current-label strong { color: var(--navy); font-size: .92rem; }
.team-score-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.team-score-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px; min-width: 0; padding: 7px 10px; border: 2px solid color-mix(in srgb, var(--blue) 20%, var(--line)); border-radius: 13px; color: var(--navy); background: linear-gradient(145deg, color-mix(in srgb, var(--blue-pale) 70%, white), color-mix(in srgb, var(--paper) 84%, white)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.team-turn-mark { grid-column: 1 / -1; color: var(--navy-soft); font-size: .62rem; font-weight: 850; line-height: 1; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.team-points { display: inline-flex; align-items: baseline; gap: 3px; color: var(--navy-soft); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.team-points strong { color: var(--navy); font-size: 1.18rem; line-height: 1; }
.team-score-card.active { border-color: color-mix(in srgb, var(--orange) 76%, var(--navy)); background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 88%, white), color-mix(in srgb, var(--orange) 42%, white)); box-shadow: 0 5px 0 color-mix(in srgb, var(--orange) 46%, rgba(39,64,96,.12)), 0 8px 18px color-mix(in srgb, var(--gold) 36%, transparent); transform: translateY(-2px); }
.team-score-card.active .team-turn-mark { color: color-mix(in srgb, var(--red) 70%, var(--navy)); font-weight: 950; }
.team-score-card.active .team-name { font-size: .98rem; }
.score-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 9px; font-size: .78rem; }
.score-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row.active { background: var(--gold); font-weight: 800; }

.prompt-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: clamp(560px, 72vh, 760px);
  overflow: hidden;
  border: 3px solid var(--prompt-border);
  border-radius: 32px 32px 32px 12px;
  background: var(--prompt-art);
  box-shadow: 10px 10px 0 var(--prompt-shadow-color), var(--shadow);
  animation: card-in .35s ease;
}
.prompt-card::before { display: none; }
.prompt-content { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: clamp(24px, 4vw, 56px); }
.prompt-content::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, color-mix(in srgb, var(--teal-pale) 100%, transparent) 0, color-mix(in srgb, var(--blue-pale) 88%, transparent) 37%, transparent 72%); }
.prompt-card:not(.answer-visible) .prompt-content { padding-bottom: clamp(26px, 3.5vh, 40px); }
.prompt-unified-card { position: relative; z-index: 2; width: min(1320px, 90%); max-width: 100%; overflow: hidden; border: 3px solid color-mix(in srgb, var(--teal) 78%, var(--navy) 8%); border-radius: 38px; background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 64%, var(--blue-pale)), color-mix(in srgb, var(--paper) 60%, var(--teal-pale))); box-shadow: 0 12px 0 color-mix(in srgb, var(--teal) 46%, rgba(39,64,96,.08)), 0 28px 58px rgba(39,64,96,.12); }
.prompt-card:not(.answer-visible) .prompt-unified-card { width: min(1560px, 95%); }
.prompt-word-stage { position: relative; display: grid; width: 100%; max-width: 100%; place-items: center; }
.prompt-card h1 { display: flex; width: 100%; max-width: 100%; min-height: 180px; margin: 0; padding: clamp(24px, 3vw, 40px) clamp(82px, 6vw, 112px); align-items: center; justify-content: center; border: 0; border-radius: 0; color: var(--title-color); background: linear-gradient(135deg, color-mix(in srgb, var(--paper) 68%, var(--blue-pale)), color-mix(in srgb, var(--paper) 66%, var(--pink-pale))); box-shadow: none; text-align: center; text-shadow: 0 4px 0 color-mix(in srgb, var(--teal-pale) 96%, transparent); overflow-wrap: anywhere; font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", sans-serif; font-size: clamp(4.5rem, 10vw, 10rem); font-weight: 900; line-height: .98; letter-spacing: -0.035em; }
.prompt-card:not(.answer-visible) h1 { min-height: clamp(260px, 34vh, 360px); padding: clamp(44px, 6vh, 76px) clamp(104px, 7.5vw, 144px); }
.prompt-card.short-prompt:not(.zh-prompt) h1 { font-size: clamp(5.5rem, 11.8vw, 12rem); }
.prompt-card.medium-prompt:not(.zh-prompt) h1 { font-size: clamp(5rem, 10.2vw, 10.6rem); }
.prompt-card.long-prompt:not(.zh-prompt) h1 { font-size: clamp(4.3rem, 8.4vw, 9rem); }
.prompt-card.extra-long-prompt:not(.zh-prompt) h1 { font-size: clamp(3.5rem, 6.8vw, 7.2rem); }
.prompt-card.zh-prompt h1 { font-family: inherit; font-size: clamp(4rem, 7.5vw, 7.2rem); }
.prompt-card.zh-prompt.short-prompt h1 { font-size: clamp(4.6rem, 8.5vw, 8rem); }
.prompt-card.zh-prompt.extra-long-prompt h1 { font-size: clamp(3.2rem, 5.8vw, 5.6rem); }
.prompt-card.answer-visible .prompt-content { justify-content: center; padding-inline: clamp(24px, 4vw, 64px); }
.prompt-card.answer-visible:not(.zh-prompt) h1 { font-size: clamp(4.6rem, 11.5vh, 8rem); }
.prompt-card.answer-visible.extra-long-prompt:not(.zh-prompt) h1 { font-size: clamp(3.7rem, 8.5vh, 6rem); }
.prompt-card.answer-visible.zh-prompt h1 { font-size: clamp(4.1rem, 10vh, 6.8rem); }
.prompt-actions { z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 16px; }
.round-button { min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font-weight: 800; }
.speak-icon-button { position: absolute; top: 50%; right: 26px; display: grid; width: 68px; height: 68px; min-height: 68px; padding: 8px; place-items: center; border: 3px solid var(--paper); background: linear-gradient(145deg, var(--cream), color-mix(in srgb, var(--blue-pale) 78%, white)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 44%, transparent), 0 8px 18px rgba(39,64,96,.15); transform: translateY(-50%); font-size: 1.72rem; line-height: 1; }
.prompt-word-stage:has(#revealButton:not([hidden])) .speak-icon-button { top: 43%; }
.round-button:hover, .round-button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-pale); }
kbd { padding: 2px 5px; border: 1px solid rgba(23,50,77,.22); border-bottom-width: 2px; border-radius: 5px; background: rgba(255,255,255,.65); font-size: .68em; font-family: inherit; }
.answer-panel { display: grid; width: 100%; min-height: 170px; margin: 0; padding: 28px 38px; place-items: center; border: 0; border-top: 2px solid color-mix(in srgb, var(--teal) 52%, rgba(39,64,96,.12)); border-radius: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--teal-pale) 80%, white), color-mix(in srgb, var(--blue-pale) 68%, white)); text-align: center; box-shadow: none; }
.answer-panel > strong { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(3.4rem, 5.2vw, 5.8rem); line-height: 1.04; }

.prompt-card-footer { position: relative; z-index: 4; padding: 2px 14px 5px; border-top: 1px solid rgba(39,64,96,.12); background: color-mix(in srgb, var(--cream) 62%, rgba(255,255,255,.7)); }
.judgement-zone { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.4vw, 20px); width: 100%; margin: 0; padding: 16px clamp(18px, 2vw, 30px); border-top: 2px solid color-mix(in srgb, var(--teal) 48%, rgba(39,64,96,.1)); background: linear-gradient(135deg, color-mix(in srgb, var(--blue-pale) 72%, var(--teal-pale)), color-mix(in srgb, var(--blue-pale) 58%, white)); }
.judge-button { display: flex; width: 100%; min-width: 0; min-height: 78px; padding: 10px clamp(22px, 2vw, 34px); align-items: center; justify-content: center; gap: 15px; border: 2px solid; border-radius: 18px; text-align: left; background: var(--paper); }
.judge-button:hover { transform: translateY(-3px); }
.judge-button strong { font-size: clamp(1.25rem, 1.35vw, 1.55rem); line-height: 1.15; }
.judge-button small { display: block; margin-top: 4px; font-size: .9rem; font-weight: 800; opacity: .86; }
.judge-symbol { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 50%; font-size: 1.65rem; font-weight: 900; }
.judge-button.wrong { color: #a52d3d; border-color: var(--red); background: linear-gradient(135deg, color-mix(in srgb, var(--red-pale) 68%, var(--red)), color-mix(in srgb, var(--red-pale) 82%, white)); }
.judge-button.pending { color: #74561a; border-color: var(--gold); background: #fff4d5; }
.judge-button.correct { color: #147442; border-color: var(--green); background: linear-gradient(135deg, color-mix(in srgb, var(--green-pale) 68%, var(--green)), color-mix(in srgb, var(--green-pale) 82%, white)); }
.after-judge-zone { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(10px, 2vw, 20px); width: 100%; margin: 0; padding: 12px 16px; border: 0; border-top: 2px solid color-mix(in srgb, var(--teal) 22%, rgba(39,64,96,.1)); border-radius: 0; background: color-mix(in srgb, var(--cream) 70%, rgba(255,255,255,.76)); box-shadow: none; }
.feedback-message { padding-inline: 14px; text-align: center; font-size: 1.12rem; font-weight: 900; }
.game-footer-actions { display: flex; justify-content: center; gap: 18px; margin-top: 2px; }
.game-footer-actions .text-button { min-height: 30px; padding: 3px 10px; font-size: .86rem; }

/* Results */
.results-hero { display: flex; justify-content: center; margin-bottom: 24px; }
.result-completion-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.2vw, 30px); width: min(100%, 1040px); padding: clamp(16px, 2.2vw, 26px) clamp(20px, 3vw, 38px); border: 2px solid color-mix(in srgb, var(--teal) 58%, var(--line)); border-radius: 28px; background: linear-gradient(112deg, color-mix(in srgb, var(--paper) 90%, white), color-mix(in srgb, var(--teal-pale) 62%, white)); box-shadow: 0 10px 0 color-mix(in srgb, var(--teal) 24%, transparent); }
.result-completion-ticket img { width: clamp(88px, 10vw, 136px); }
.result-hero-copy { display: grid; min-width: 0; gap: 4px; }
.result-hero-copy h1 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); }
.result-hero-copy p { margin: 0; color: var(--navy-soft); }
.result-champion { position: relative; display: grid; min-width: clamp(250px, 25vw, 320px); justify-items: end; gap: 6px; padding: 16px clamp(104px, 9vw, 124px) 16px 22px; border: 3px solid color-mix(in srgb, var(--gold) 74%, var(--orange)); border-radius: 22px; color: var(--navy); text-align: right; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 62%, white), color-mix(in srgb, var(--orange) 38%, white)); box-shadow: 0 7px 0 color-mix(in srgb, var(--orange) 38%, transparent); }
.result-champion strong { display: block; max-width: 100%; font-size: clamp(1.18rem, 1.8vw, 1.55rem); line-height: 1.1; overflow-wrap: anywhere; }
.result-champion small { color: var(--navy-soft); font-size: clamp(.9rem, 1.25vw, 1.08rem); font-weight: 900; }
.champion-popper { position: absolute; top: 50%; right: clamp(8px, 1.4vw, 18px); width: clamp(78px, 8vw, 112px); height: auto; filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--pink) 30%, transparent)); transform: translateY(-50%) rotate(4deg); }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.metric-card { padding: 18px; border: 2px solid rgba(39,64,96,.08); border-radius: 19px; background: var(--paper); box-shadow: var(--shadow-small); }
.metric-card:nth-child(5n + 1) { background: var(--blue-pale); }
.metric-card:nth-child(5n + 2) { background: var(--green-pale); }
.metric-card:nth-child(5n + 3) { background: var(--red-pale); }
.metric-card:nth-child(5n + 4) { background: #fff2bd; }
.metric-card:nth-child(5n + 5) { background: var(--pink-pale); }
.metric-card span { color: var(--navy-soft); font-size: .77rem; }
.metric-card strong { display: block; margin-top: 5px; font-size: clamp(1.4rem, 2.7vw, 2.25rem); }
.results-grid { display: grid; grid-template-columns: 1fr minmax(270px, 360px); gap: 22px; }
.result-list { display: grid; gap: 9px; max-height: 55vh; overflow: auto; padding-right: 6px; }
.result-row { display: grid; grid-template-columns: 42px minmax(110px, .7fr) minmax(150px, 1fr) auto; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px; background: var(--cream); }
.result-index { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: white; font-weight: 900; }
.result-row.correct { border-left: 5px solid var(--green); }
.result-row.wrong { border-left: 5px solid var(--red); }
.result-row.pending { border-left: 5px solid var(--gold); }
.result-row small { color: var(--navy-soft); }
.result-status { font-weight: 900; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.result-actions .wide:last-child { grid-column: 1 / -1; }
.result-group-scores { margin: 0 0 16px; padding: 15px; border: 2px solid color-mix(in srgb, var(--gold) 52%, var(--line)); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 25%, white), color-mix(in srgb, var(--blue-pale) 42%, white)); box-shadow: 0 7px 0 color-mix(in srgb, var(--blue-pale) 72%, rgba(39,64,96,.14)); }
.group-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.group-result-heading > div > span { color: var(--navy-soft); font-size: .75rem; font-weight: 900; }
.group-result-heading h3 { margin: 2px 0 0; color: var(--navy); font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.group-result-heading > strong { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 64px; padding: 8px 11px; border-radius: 14px; color: var(--navy); background: var(--gold); box-shadow: 0 4px 0 color-mix(in srgb, var(--orange) 48%, transparent); font-size: 1.7rem; line-height: 1; }
.group-result-heading > strong small { font-size: .72rem; }
.group-score-podium { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.group-score-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line)); border-radius: 13px; color: var(--navy); background: rgba(255,255,255,.76); }
.group-score-card.champion { border: 2px solid color-mix(in srgb, var(--orange) 70%, var(--gold)); background: linear-gradient(105deg, color-mix(in srgb, var(--gold) 78%, white), color-mix(in srgb, var(--orange) 32%, white)); box-shadow: 0 4px 0 color-mix(in srgb, var(--orange) 35%, transparent); transform: translateY(-1px); }
.score-rank { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--navy-soft); background: var(--blue-pale); font-size: .86rem; font-weight: 950; }
.group-score-card.champion .score-rank { background: var(--gold); }
.group-score-card > strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.score-points { display: inline-flex; align-items: baseline; gap: 2px; color: var(--navy); font-size: 1.45rem; font-weight: 950; line-height: 1; }
.score-points small { color: var(--navy-soft); font-size: .72rem; }

/* Library */
.screen-title-row { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 22px; }
.screen-title-row h1 { margin: 4px 0; font-size: clamp(2.2rem, 4vw, 4rem); }
.screen-title-row p { margin: 0; color: var(--navy-soft); }
.library-layout { display: grid; grid-template-columns: 310px 1fr; gap: 20px; }
.library-sidebar { align-self: start; }
.library-unit-list { display: grid; gap: 7px; max-height: 48vh; overflow: auto; }
.library-unit-button { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; text-align: left; background: transparent; }
.library-unit-button:hover { background: var(--cream); }
.library-unit-button.active { color: white; background: var(--teal); }
.library-unit-button small { opacity: .8; }
.library-tools { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.file-label { display: grid; place-items: center; text-align: center; }
.file-label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.library-heading > div:first-child { display: block; }
.table-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 14px; padding: 12px; border-radius: 13px; background: var(--cream); }
.table-toolbar label { display: grid; gap: 4px; color: var(--navy-soft); font-size: .76rem; }
.table-toolbar input { min-width: 220px; }
.table-toolbar .text-button { margin-left: auto; }
.word-table-wrap { overflow: auto; max-height: 65vh; border: 1px solid var(--line); border-radius: 14px; }
.word-table { width: 100%; border-collapse: collapse; background: white; }
.word-table th { position: sticky; z-index: 2; top: 0; padding: 12px; color: white; text-align: left; background: var(--table-art); }
.word-table td { padding: 11px 12px; border-bottom: 1px solid #ede7dc; }
.word-table tbody tr:hover { background: var(--teal-pale); }
.word-table .row-actions { display: flex; gap: 5px; }
.word-table .row-actions button { min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: var(--cream); }
.status-pill { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--blue-pale); color: var(--blue); font-size: .72rem; font-weight: 800; white-space: nowrap; }

/* Six original classroom worlds. Content units and visual themes stay independent. */
body[data-color-theme="ocean"] {
  --cream: #eaf9ff; --cream-deep: #cdebf5; --paper: #f9feff; --navy: #12334f; --navy-soft: #3e6680;
  --teal: #4fcbd4; --teal-dark: #087f92; --teal-pale: #dff8fa; --orange: #ff8b6e; --gold: #ffd36b;
  --green: #3eb78d; --green-pale: #dff7ed; --red: #ef6b73; --red-pale: #ffe7e8; --blue: #3e9fdb; --blue-pale: #ddf2ff;
  --pink: #ff7f7b; --pink-pale: #ffe8e5; --purple: #7187d8; --purple-pale: #e8ecff; --line: #bddce9;
  --body-art: radial-gradient(circle at 7% 22%, rgba(79,203,212,.24) 0 4rem, transparent 4.2rem), radial-gradient(circle at 92% 76%, rgba(62,159,219,.18) 0 8rem, transparent 8.2rem), radial-gradient(circle at 74% 8%, rgba(255,211,107,.2), transparent 22rem);
  --header-art: linear-gradient(105deg, rgba(220,247,255,.96), rgba(231,244,255,.96) 52%, rgba(255,239,205,.95));
  --hero-art: radial-gradient(circle at 89% 16%, rgba(255,211,107,.55) 0 7%, transparent 7.2%), radial-gradient(circle at 94% 85%, rgba(79,203,212,.2) 0 12%, transparent 12.2%), linear-gradient(125deg, #fbfeff 0 53%, #ffe8e4 53% 59%, #dff5ff 59%);
  --tool-1: #dff3ff; --tool-2: #ffe5e1; --tool-3: #dcf8f7; --tool-4: #fff1bd; --tool-5: #e6ebff; --tool-6: #dcefff; --tool-7: #dff8fa; --tool-8: #ffebe2;
  --title-color: #17648b; --title-shadow: 0 8px 0 rgba(255,211,107,.4); --question-color: #ff746f; --message-bg: #fff2bd;
  --primary-start: #ff9a70; --primary-end: #ff7078; --primary-edge: #bd4d58; --prompt-border: #286b91;
  --prompt-art: linear-gradient(150deg, #f8feff, #d8f7ff 64%, #ffe0d8); --prompt-shadow-color: #ff6f78; --table-art: linear-gradient(90deg, #167da6, #217f91);
}

body[data-color-theme="forest"] {
  --cream: #f5f7e9; --cream-deep: #e2e8cb; --paper: #fffef7; --navy: #253b2d; --navy-soft: #59705e;
  --teal: #70bd77; --teal-dark: #34734a; --teal-pale: #e4f3e1; --orange: #dc9350; --gold: #f1ca63;
  --green: #58a866; --green-pale: #e3f2e2; --red: #d86868; --red-pale: #f9e7e3; --blue: #6b9e92; --blue-pale: #e2f1ed;
  --pink: #e58b86; --pink-pale: #f7e6e2; --purple: #8d80ad; --purple-pale: #eee9f4; --line: #cad7bb;
  --body-art: radial-gradient(ellipse at 5% 18%, rgba(112,189,119,.2) 0 9rem, transparent 9.2rem), radial-gradient(ellipse at 94% 72%, rgba(220,147,80,.16) 0 12rem, transparent 12.2rem), radial-gradient(circle at 70% 4%, rgba(241,202,99,.22), transparent 22rem);
  --header-art: linear-gradient(105deg, rgba(231,244,218,.96), rgba(249,243,213,.95) 52%, rgba(237,226,208,.96));
  --hero-art: radial-gradient(ellipse at 88% 16%, rgba(241,202,99,.48) 0 8%, transparent 8.2%), radial-gradient(ellipse at 95% 86%, rgba(112,189,119,.25) 0 14%, transparent 14.2%), linear-gradient(125deg, #fffef7 0 53%, #f4e5cc 53% 59%, #e5f1dd 59%);
  --tool-1: #e3f0e7; --tool-2: #f7e7dc; --tool-3: #e1f2df; --tool-4: #f8ecc1; --tool-5: #ece8f2; --tool-6: #e4eeea; --tool-7: #edf2d9; --tool-8: #f5e4d5;
  --title-color: #3d684c; --title-shadow: 0 8px 0 rgba(241,202,99,.4); --question-color: #dc8058; --message-bg: #fff0b8;
  --primary-start: #f4ca63; --primary-end: #ec9b5d; --primary-edge: #a66b36; --prompt-border: #52735b;
  --prompt-art: linear-gradient(150deg, #fffef3, #e1f7db 64%, #ffe2bd); --prompt-shadow-color: #ffad4f; --table-art: linear-gradient(90deg, #426f50, #4e7a4b);
}

body[data-color-theme="galaxy"] {
  --cream: #f4f0ff; --cream-deep: #ddd4f4; --paper: #fffaff; --navy: #34265b; --navy-soft: #635a82;
  --teal: #8b7ce8; --teal-dark: #5b4bb4; --teal-pale: #ece8ff; --orange: #ff9478; --gold: #ffd86f;
  --green: #54b99a; --green-pale: #e0f5ee; --red: #e86288; --red-pale: #fbe5ef; --blue: #6b8ce0; --blue-pale: #e6ecff;
  --pink: #ef79b5; --pink-pale: #fce5f1; --purple: #8066d6; --purple-pale: #ebe5ff; --line: #d4c9ec;
  --body-art: radial-gradient(circle at 6% 18%, rgba(139,124,232,.2) 0 .38rem, transparent .45rem), radial-gradient(circle at 92% 72%, rgba(239,121,181,.2) 0 7rem, transparent 7.2rem), radial-gradient(circle at 70% 5%, rgba(255,216,111,.27) 0 .3rem, transparent .38rem);
  --header-art: linear-gradient(105deg, rgba(239,230,255,.96), rgba(228,237,255,.95) 52%, rgba(255,232,246,.96));
  --hero-art: radial-gradient(circle at 89% 16%, rgba(255,216,111,.58) 0 7%, transparent 7.2%), radial-gradient(circle at 94% 87%, rgba(239,121,181,.2) 0 13%, transparent 13.2%), linear-gradient(125deg, #fffaff 0 53%, #f7dff0 53% 59%, #e9e6ff 59%);
  --tool-1: #e8eaff; --tool-2: #fbe3ef; --tool-3: #e4f2f5; --tool-4: #fff0bc; --tool-5: #e5ddff; --tool-6: #e1e9ff; --tool-7: #f1e5ff; --tool-8: #fde8f3;
  --title-color: #5b4bb4; --title-shadow: 0 8px 0 rgba(255,216,111,.42); --question-color: #ec70ad; --message-bg: #fff1b9;
  --primary-start: #ffd86f; --primary-end: #f18bbb; --primary-edge: #a6568b; --prompt-border: #6150a5;
  --prompt-art: linear-gradient(150deg, #fffaff, #e9e1ff 62%, #ffdeef); --prompt-shadow-color: #8970e8; --table-art: linear-gradient(90deg, #5543a2, #6d52b0);
}

body[data-color-theme="playground"] {
  --cream: #fff8de; --cream-deep: #ffe5a9; --paper: #fffef7; --navy: #1e3855; --navy-soft: #4e6e89;
  --teal: #4cb8d6; --teal-dark: #247c9c; --teal-pale: #e0f5fa; --orange: #ff8a4f; --gold: #ffd34f;
  --green: #51b979; --green-pale: #e2f5e9; --red: #ec665f; --red-pale: #ffe7e2; --blue: #4f9edf; --blue-pale: #e2f1ff;
  --pink: #fa7f92; --pink-pale: #ffe5ea; --purple: #8478c8; --purple-pale: #ece8ff; --line: #d4d9c4;
  --body-art: radial-gradient(circle at 6% 18%, rgba(255,211,79,.28) 0 8rem, transparent 8.2rem), radial-gradient(circle at 94% 75%, rgba(76,184,214,.2) 0 12rem, transparent 12.2rem), linear-gradient(120deg, transparent 0 48%, rgba(255,138,79,.05) 48% 52%, transparent 52%);
  --header-art: linear-gradient(105deg, rgba(224,245,250,.97), rgba(255,244,191,.96) 52%, rgba(255,226,206,.96));
  --hero-art: radial-gradient(circle at 88% 15%, rgba(255,211,79,.62) 0 8%, transparent 8.2%), radial-gradient(circle at 95% 88%, rgba(76,184,214,.2) 0 13%, transparent 13.2%), linear-gradient(125deg, #fffef7 0 53%, #ffe1cc 53% 59%, #dff4fb 59%);
  --tool-1: #dff3ff; --tool-2: #ffe4dc; --tool-3: #dff4f7; --tool-4: #fff0ad; --tool-5: #e9e6ff; --tool-6: #e1efff; --tool-7: #fff0c8; --tool-8: #ffe5d8;
  --title-color: #326b9d; --title-shadow: 0 8px 0 rgba(255,211,79,.48); --question-color: #ff7e49; --message-bg: #fff0ad;
  --primary-start: #ffd34f; --primary-end: #ff8a4f; --primary-edge: #b85b2f; --prompt-border: #347ba2;
  --prompt-art: linear-gradient(150deg, #fffef5, #dcf7ff 63%, #ffe2ae); --prompt-shadow-color: #32b8e5; --table-art: linear-gradient(90deg, #347ba2, #277f99);
}

body[data-color-theme="notebook"] {
  --cream: #fff5f0; --cream-deep: #f0ddd2; --paper: #fffdfb; --navy: #44303d; --navy-soft: #786270;
  --teal: #86b8a7; --teal-dark: #4e7769; --teal-pale: #eaf3ef; --orange: #d98d72; --gold: #e9c98a;
  --green: #74a886; --green-pale: #e9f2e9; --red: #cd7079; --red-pale: #f8e7e7; --blue: #879fbd; --blue-pale: #edf1f6;
  --pink: #d99bb0; --pink-pale: #f5e7ec; --purple: #a394bb; --purple-pale: #f0edf5; --line: #decfc8;
  --body-art: linear-gradient(rgba(135,159,189,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(135,159,189,.07) 1px, transparent 1px), radial-gradient(circle at 92% 72%, rgba(134,184,167,.14), transparent 28rem);
  --header-art: linear-gradient(105deg, rgba(248,231,236,.97), rgba(237,243,239,.96) 52%, rgba(250,235,221,.96));
  --hero-art: radial-gradient(circle at 89% 15%, rgba(233,201,138,.45) 0 7%, transparent 7.2%), radial-gradient(circle at 95% 88%, rgba(217,155,176,.18) 0 12%, transparent 12.2%), linear-gradient(125deg, #fffdfb 0 53%, #f4e5e8 53% 59%, #eaf2ef 59%);
  --tool-1: #eef1f6; --tool-2: #f6e5ea; --tool-3: #e8f1ed; --tool-4: #f7eccf; --tool-5: #efebf4; --tool-6: #ebf0f5; --tool-7: #f3ebe0; --tool-8: #f4e5df;
  --title-color: #7b596b; --title-shadow: 0 8px 0 rgba(233,201,138,.35); --question-color: #c97f98; --message-bg: #f8edce;
  --primary-start: #e8b08d; --primary-end: #d99bb0; --primary-edge: #9f6b7e; --prompt-border: #7a6070;
  --prompt-art: linear-gradient(150deg, #fffdf9, #ffe4ec 63%, #dbf3ea); --prompt-shadow-color: #d981a6; --table-art: linear-gradient(90deg, #76596a, #755f85);
  background-size: 28px 28px, 28px 28px, auto;
}

/* Visual theme studio: a card-based chooser rather than a color dropdown. */
.theme-studio-modal { width: min(980px, calc(100vw - 28px)); background: linear-gradient(145deg, #fffefb, #fff4f8 54%, #eef8ff); }
.theme-studio-intro { margin: -8px 0 20px; color: var(--navy-soft); }
.color-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.color-theme-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 164px;
  padding: 12px;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 22px;
  color: #243858;
  text-align: left;
  background: white;
  box-shadow: 0 6px 0 rgba(39,64,96,.12);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.color-theme-card:hover { transform: translateY(-3px) rotate(-.4deg); border-color: var(--preview-2); box-shadow: 0 9px 0 color-mix(in srgb, var(--preview-2) 30%, transparent); }
.color-theme-card[aria-checked="true"] { border-color: #243858; box-shadow: 0 7px 0 var(--preview-2); transform: translateY(-2px); }
.color-theme-card[aria-checked="true"]::after { content: "✓ 已选"; position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; color: #243858; background: #fff6c9; font-size: .7rem; font-weight: 900; }
.color-theme-card strong { font-size: 1rem; }
.color-theme-card small { color: #5f7184; font-size: .72rem; }
.theme-card-preview { position: relative; display: block; height: 92px; overflow: hidden; border-radius: 15px; background: var(--preview-bg); }
.theme-card-preview i { position: absolute; display: block; border-radius: 50%; }
.theme-card-preview i:nth-child(1) { width: 62px; height: 62px; left: -12px; top: -17px; background: var(--preview-1); }
.theme-card-preview i:nth-child(2) { width: 80px; height: 80px; right: -13px; bottom: -25px; background: var(--preview-2); }
.theme-card-preview i:nth-child(3) { width: 42px; height: 42px; right: 36%; top: -14px; background: var(--preview-3); }
.theme-card-preview b { position: absolute; left: 50%; top: 50%; padding: 7px 12px; border: 3px solid #243858; border-radius: 11px; color: #243858; background: rgba(255,255,255,.86); transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 4px 4px 0 var(--preview-2); }
.color-theme-card[data-color-theme="candy"] { --preview-bg: linear-gradient(130deg,#fff1f5,#e1f6ff); --preview-1:#ff91af; --preview-2:#58cabb; --preview-3:#ffd76a; }
.color-theme-card[data-color-theme="ocean"] { --preview-bg: linear-gradient(130deg,#ddf5ff,#bcecf1); --preview-1:#4fcbd4; --preview-2:#ff8b6e; --preview-3:#ffd36b; }
.color-theme-card[data-color-theme="forest"] { --preview-bg: linear-gradient(130deg,#f6f2d9,#dcefd8); --preview-1:#70bd77; --preview-2:#dc9350; --preview-3:#f1ca63; }
.color-theme-card[data-color-theme="galaxy"] { --preview-bg: linear-gradient(130deg,#eee8ff,#f8dff0); --preview-1:#8b7ce8; --preview-2:#ef79b5; --preview-3:#ffd86f; }
.color-theme-card[data-color-theme="playground"] { --preview-bg: linear-gradient(130deg,#fff0b6,#dff4fb); --preview-1:#ffd34f; --preview-2:#ff8a4f; --preview-3:#4cb8d6; }
.color-theme-card[data-color-theme="notebook"] { --preview-bg: linear-gradient(130deg,#fff5f0,#eaf2ef); --preview-1:#d99bb0; --preview-2:#86b8a7; --preview-3:#e9c98a; }
.theme-studio-actions { align-items: center; justify-content: space-between; }
.theme-studio-actions > span { color: var(--navy-soft); font-weight: 900; }

@media (max-width: 760px) { .color-theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .color-theme-grid { grid-template-columns: 1fr; } }

/* Dialogs */
dialog.modal { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; padding: 26px; border: 2px solid var(--navy); border-radius: 24px; color: var(--navy); background: var(--paper); box-shadow: 18px 18px 0 rgba(23,50,77,.18), var(--shadow); }
dialog.large-modal { width: min(1040px, calc(100vw - 28px)); }
dialog::backdrop { background: rgba(23,50,77,.58); backdrop-filter: blur(6px); }
.modal-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.modal-heading h2 { margin: 4px 0 0; font-size: clamp(1.7rem, 3vw, 2.6rem); }
.close-button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); font-size: 1.8rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.modal-actions.centered { justify-content: center; }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
fieldset { display: grid; align-content: start; gap: 10px; margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 16px; }
legend { padding: 0 8px; color: var(--teal-dark); font-weight: 900; }
label { color: var(--navy-soft); }
label:has(> input:not([type="checkbox"])), label:has(> select), .settings-grid fieldset > label:not(.choice-card):not(.switch-row) { display: grid; gap: 6px; font-size: .82rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  min-height: 46px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #bdb4a6;
  border-radius: 10px;
  color: var(--navy);
  background: white;
}
.choice-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--navy); background: white; }
.choice-card:has(input:checked) { border-color: var(--teal); background: var(--teal-pale); }
.choice-card input { width: 20px; height: 20px; accent-color: var(--teal); }
.choice-card span { display: grid; }
.choice-card small { color: var(--navy-soft); }
.switch-row { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.switch-row input { width: 24px; height: 24px; accent-color: var(--teal); }
input[type="range"] { width: 100%; accent-color: var(--teal); }

.pause-modal { text-align: center; }
.pause-visual { position: relative; display: grid; place-items: center; }
.pause-visual img { width: 200px; filter: grayscale(.15); }
.pause-visual span { padding: 5px 12px; border-radius: 999px; background: var(--gold); font-weight: 900; }
.pause-modal h2 { margin: 15px 0 4px; }
.pause-modal p { color: var(--navy-soft); }
dialog.help-dialog { width: min(1200px, calc(100vw - 28px)); padding: 24px; border-color: color-mix(in srgb, var(--teal) 45%, var(--navy)); background: linear-gradient(145deg, #fffdf8 0%, color-mix(in srgb, var(--paper) 80%, var(--teal-pale)) 100%); }
.help-heading { align-items: flex-start; margin-bottom: 15px; }
.help-heading .eyebrow { color: var(--teal-dark); }
.help-heading h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); }
.help-heading p { margin: 6px 0 0; color: var(--navy-soft); font-weight: 700; }
.help-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.help-step { display: grid; grid-template-columns: 48px 1fr; gap: 12px; min-height: 138px; padding: 16px; border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line)); border-radius: 20px; box-shadow: 0 6px 0 rgba(39,64,96,.07); }
.help-step.step-choose { background: linear-gradient(145deg, color-mix(in srgb, var(--gold-pale) 72%, white), #fffefa); }
.help-step.step-answer { background: linear-gradient(145deg, color-mix(in srgb, var(--blue-pale) 66%, white), #fbfeff); }
.help-step.step-review { background: linear-gradient(145deg, color-mix(in srgb, var(--green-pale) 72%, white), #fbfffc); }
.help-step-number { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 16px; color: var(--navy); background: rgba(255,255,255,.84); font-size: 1.5rem; font-weight: 1000; box-shadow: 0 3px 0 rgba(23,50,77,.11); }
.help-step:nth-child(1) .help-step-number { color: #a56b0a; }
.help-step:nth-child(2) .help-step-number { color: var(--blue); }
.help-step:nth-child(3) .help-step-number { color: var(--green); }
.help-step-kicker { color: var(--teal-dark); font-size: .76rem; font-weight: 1000; letter-spacing: .06em; }
.help-step h3 { margin: 2px 0 5px; font-size: 1.08rem; }
.help-step p { margin: 0; color: var(--navy-soft); font-size: .83rem; line-height: 1.58; }
.help-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.help-detail-grid article { min-height: 116px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line)); border-radius: 17px; background: rgba(255,255,255,.72); box-shadow: 0 4px 0 rgba(39,64,96,.05); }
.help-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.help-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--teal-pale) 52%, white); font-size: 1.15rem; }
.help-detail-grid h3 { margin: 0; font-size: 1.01rem; }
.help-detail-grid p { margin: 0; color: var(--navy-soft); font-size: .8rem; line-height: 1.55; }
.shortcut-list { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line)); border-radius: 15px; background: linear-gradient(90deg, color-mix(in srgb, var(--blue-pale) 82%, white), color-mix(in srgb, var(--teal-pale) 55%, white)); }
.shortcut-list strong { margin-right: 4px; color: var(--navy); }
.shortcut-list span { padding: 5px 8px; border: 1px solid rgba(23,50,77,.08); border-radius: 8px; background: rgba(255,255,255,.86); color: var(--navy-soft); font-size: .78rem; font-weight: 700; }
.shortcut-list kbd { margin-right: 2px; background: white; }

.import-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; }
.import-grid > section:first-child { display: grid; align-content: start; gap: 14px; }
.drop-zone { display: grid; place-items: center; min-height: 150px; padding: 22px; border: 2px dashed var(--teal); border-radius: 16px; text-align: center; background: var(--teal-pale); color: var(--teal-dark); font-weight: 900; }
.drop-zone input { margin-top: 10px; }
.hint { color: var(--navy-soft); font-size: .82rem; }
.import-preview { min-height: 280px; padding: 16px; overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: white; }
.import-guide h3 { margin: 5px 0 4px; }
.import-guide > p { margin: 5px 0; color: var(--navy-soft); font-size: .84rem; }
.import-example-code { margin: 10px 0; padding: 12px 14px; overflow: auto; border: 1px dashed color-mix(in srgb, var(--teal) 42%, var(--line)); border-radius: 12px; background: var(--teal-pale); color: var(--navy); font: 700 .78rem/1.55 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: pre; }
.import-field-note { padding: 8px 10px; border-radius: 10px; background: var(--cream); line-height: 1.5; }
.import-template-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 7px; padding: 8px 14px; text-decoration: none; }
.import-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.import-stat { padding: 10px; border-radius: 10px; text-align: center; background: var(--cream); }
.import-stat strong { display: block; font-size: 1.5rem; }
.preview-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: .8rem; }
.preview-table th, .preview-table td { padding: 7px; border-bottom: 1px solid var(--line); text-align: left; }

.word-form-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal-pale) 75%, white), color-mix(in srgb, var(--cream) 82%, white)); }
.word-form-guide strong { color: var(--teal-dark); }
.word-form-guide small { flex: 1 1 260px; color: var(--navy-soft); }
.guide-required, .guide-optional, .field-status { display: inline-flex; min-height: 24px; padding: 3px 8px; align-items: center; border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 900; line-height: 1; white-space: nowrap; }
.guide-required, .field-status.required { color: color-mix(in srgb, var(--red) 86%, var(--navy)); background: color-mix(in srgb, var(--pink-pale) 88%, white); }
.guide-optional, .field-status.optional { color: var(--teal-dark); background: color-mix(in srgb, var(--teal-pale) 82%, white); }
.field-label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.word-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.word-form-grid input::placeholder { color: color-mix(in srgb, var(--navy-soft) 64%, white); opacity: 1; }
.span-two { grid-column: 1 / -1; }
.unit-operation-list { display: grid; gap: 9px; }
.unit-operation-list button { min-height: 48px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: var(--cream); }
.unit-operation-list button:hover { border-color: var(--teal); }
.unit-operation-list .danger-action { color: var(--red); }
.trash-list { display: grid; gap: 10px; }
.trash-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 13px; background: var(--cream); }

.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 10px; width: min(380px, calc(100vw - 44px)); }
.toast { padding: 14px 17px; border-left: 5px solid var(--teal); border-radius: 12px; color: white; background: var(--navy); box-shadow: var(--shadow); animation: card-in .25s ease; }
.toast.error { border-color: var(--red); }

body.large-text { --font-size: 19px; }
body.large-text .prompt-card.short-prompt:not(.zh-prompt):not(.answer-visible) h1 { font-size: clamp(5.3rem, 11.5vw, 11.5rem); }
body.large-text .prompt-card.medium-prompt:not(.zh-prompt):not(.answer-visible) h1 { font-size: clamp(4.8rem, 10vw, 10.2rem); }
body.large-text .prompt-card.long-prompt:not(.zh-prompt):not(.answer-visible) h1 { font-size: clamp(4.1rem, 8vw, 8.5rem); }
body.large-text .prompt-card.extra-long-prompt:not(.zh-prompt):not(.answer-visible) h1 { font-size: clamp(3.3rem, 6.5vw, 6.5rem); }
body.large-text .prompt-card.zh-prompt:not(.answer-visible) h1 { font-size: clamp(4.1rem, 8vw, 7.8rem); }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 1100px) {
  :root { --header-height: 186px; }
  .app-header { grid-template-columns: 1fr; }
  .brand { grid-row: 1; }
  .header-actions { grid-row: 2; justify-self: stretch; width: 100%; padding: 3px 0 5px; overflow-x: auto; }
  .tool-button { flex: 1 0 70px; }
  .header-lower { grid-row: 3; }
  .unit-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .library-layout { grid-template-columns: 270px 1fr; }
  .help-steps, .help-detail-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet landscape canvas: keep the teaching card above the fold on 9–13 inch tablets. */
@media (min-width: 821px) and (max-width: 1100px) {
  :root { --header-height: 118px; }
  body.game-active { --header-height: 72px; }
  html, body, .app-shell { height: 100%; overflow: hidden; }
  .app-header {
    height: var(--header-height);
    min-height: 0;
    grid-template-columns: auto 1fr;
    grid-template-rows: 64px 42px;
    padding: 6px 24px;
  }
  .brand { grid-row: 1; grid-column: 1; }
  .header-actions {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    width: auto;
    gap: 6px;
    padding: 0;
    overflow: visible;
  }
  .tool-button { flex: 0 0 auto; min-width: 68px; min-height: 54px; padding: 4px 7px; }
  .header-lower { grid-row: 2; grid-column: 1 / -1; padding-top: 0; }
  body.game-active .app-header { grid-template-rows: 60px; }
  body.game-active .header-actions { align-self: center; }
  main { height: calc(100vh - var(--header-height)); overflow: hidden; }
  .screen { height: 100%; padding: 8px 20px; overflow: hidden; }

  .home-screen { position: relative; }
  .home-screen .ready-hero { height: 100%; min-height: 0; }
  .home-screen .ready-copy { padding: 24px 34px; transform: translateY(-24px); }
  .home-screen .ready-copy h1 { font-size: clamp(6.8rem, 19vh, 9rem); }
  .home-screen .instant-start { min-height: 64px; margin-top: 20px; }
  .home-screen .ready-actions { margin-top: 12px; }
  .home-screen .hero-mascot { height: 100%; min-height: 0; padding: 18px 26px; }
  .home-screen .hero-mascot img { width: min(92%, 440px); max-height: 64vh; }
  .home-tools { display: none; }
  .home-screen .resume-card:not([hidden]) {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 20px;
    width: min(760px, calc(100% - 80px));
    margin: 0;
    padding: 16px 20px;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
  }

  .game-screen { min-height: 0; padding-block: 8px; }
  .game-stage, .prompt-card { height: 100%; min-height: 0; }
  .prompt-content { padding: 14px 20px; }
  .prompt-card:not(.answer-visible) .prompt-content { padding-bottom: 20px; }
  .prompt-card:not(.answer-visible) h1 { min-height: clamp(165px, 28vh, 215px); }
  .judgement-zone { padding-block: 10px; }
  .game-footer-actions { margin-top: 0; }

  .results-screen,
  .library-screen { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .results-hero { gap: 10px; margin-bottom: 6px; }
  .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .metric-card { padding: 8px 10px; }
  .metric-card strong { margin-top: 2px; font-size: clamp(1.1rem, 2.8vh, 1.65rem); }
  .result-group-scores { margin-bottom: 10px; padding: 10px; border-radius: 16px; }
  .group-result-heading { margin-bottom: 7px; }
  .group-result-heading h3 { font-size: 1rem; }
  .group-result-heading > strong { min-width: 52px; padding: 6px 8px; border-radius: 11px; font-size: 1.35rem; }
  .group-score-podium { gap: 5px; }
  .group-score-card { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; border-radius: 10px; }
  .score-rank { width: 23px; height: 23px; font-size: .7rem; }
  .group-score-card > strong { font-size: .86rem; }
  .score-points { font-size: 1.1rem; }
  .result-actions { gap: 7px; }
  .result-actions > button { min-height: 38px; padding: 7px 8px; font-size: .84rem; }
  .results-grid { flex: 1; height: auto; min-height: 0; }
  .results-grid > .panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .result-list { flex: 1; max-height: none; }
  .library-screen .screen-title-row { margin-bottom: 8px; }
  .library-layout { flex: 1; height: auto; min-height: 0; overflow: hidden; }
  .library-sidebar,
  .library-content { height: 100%; min-height: 0; overflow: hidden; }
  .library-sidebar { display: flex; flex-direction: column; }
  .library-unit-list { flex: 1; max-height: none; }
  .library-content { display: flex; flex-direction: column; }
  .word-table-wrap { flex: 1; max-height: none; }
}

@media (max-width: 820px) {
  .screen { padding: 20px 14px 34px; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-copy { padding: 42px 32px 20px; }
  .ready-copy { padding-bottom: 34px; }
  .ready-hero { min-height: auto; }
  .hero-mascot { min-height: 300px; padding: 10px 36px 34px; }
  .hero-mascot img { width: min(76%, 330px); }
  .mascot-message { right: 4%; top: 5%; }
  .home-grid, .results-grid, .library-layout { grid-template-columns: 1fr; }
  .game-toolbar { grid-template-columns: 1fr auto auto; }
  .timer-chip { grid-row: 1; grid-column: 2; }
  #pauseButton { grid-row: 1; grid-column: 3; }
  .game-toolbar .group-turn { grid-row: 2; grid-column: 1; justify-self: start; }
  .progress-cluster { grid-row: 2; grid-column: 2 / -1; }
  .group-turn[hidden] + .progress-cluster { grid-column: 1 / -1; }
  .game-stage { min-height: auto; }
  .mascot-dock { top: 16px; right: 17px; width: 78px; }
  .group-scoreboard { top: 100px; left: 14px; width: calc(100% - 28px); transform: none; }
  .group-scoreboard-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .team-score-list { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .team-score-card { min-width: 150px; }
  .prompt-card { min-height: 650px; }
  .prompt-content { min-height: 360px; padding: 30px 20px 42px; }
  .prompt-unified-card, .prompt-card:not(.answer-visible) .prompt-unified-card { width: 94%; border-radius: 28px; }
  .prompt-card:not(.answer-visible) h1 { min-height: 180px; padding: 24px 72px 24px 22px; }
  .speak-icon-button { right: 10px; width: 58px; height: 58px; min-height: 58px; font-size: 1.45rem; }
  .judgement-zone { grid-template-columns: 1fr; width: 100%; margin: 0; padding: 14px; }
  .judge-button { width: 100%; min-width: 0; min-height: 70px; }
  .after-judge-zone { grid-template-columns: 1fr; }
  .settings-grid, .import-grid, .word-form-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .library-sidebar { order: 2; }
  .screen-title-row { flex-direction: column; }
}

@media (max-width: 520px) {
  .brand small { display: none; }
  .app-header { padding-inline: 12px; }
  .header-actions { gap: 4px; }
  .tool-button { flex-basis: 62px; min-width: 62px; min-height: 54px; border-radius: 14px; }
  .header-lower { align-items: stretch; flex-direction: column; gap: 6px; }
  .header-theme-picker { justify-content: space-between; width: 100%; }
  .header-theme-picker select { flex: 1; min-width: 0; }
  .icon-button { min-width: 42px; padding-inline: 8px; }
  .hero-panel { border-radius: 26px; }
  .hero-copy { padding: 34px 24px 14px; }
  .ready-copy { padding-bottom: 30px; }
  .ready-copy h1 { font-size: clamp(4.7rem, 25vw, 7rem); }
  .ready-actions { flex-direction: column; }
  .hero-actions > * { width: 100%; }
  .unit-grid { grid-template-columns: 1fr; }
  .resume-card { align-items: stretch; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .result-row { grid-template-columns: 36px 1fr auto; }
  .result-row > small { grid-column: 2 / -1; }
  .help-steps, .help-detail-grid { grid-template-columns: 1fr; }
  dialog.modal { padding: 20px 16px; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-toolbar input { min-width: 0; }
  .table-toolbar .text-button { margin-left: 0; }
}

@media (min-width: 1600px) and (min-height: 900px) {
  :root { --font-size: 18px; }
  .game-screen { padding-inline: 5vw; }
  .prompt-card { min-height: 600px; }
  .judge-button { min-height: 96px; }
}

/* Desktop classroom canvas: every primary screen stays inside one viewport. */
@media (min-width: 1101px) {
  :root { --header-height: 132px; }
  body.game-active { --header-height: 82px; }
  html, body, .app-shell { height: 100%; overflow: hidden; }
  .app-header {
    height: var(--header-height);
    min-height: 0;
    padding-block: 8px;
    grid-template-rows: 64px 44px;
  }
  .header-lower { padding-top: 2px; }
  body.game-active .app-header { grid-template-rows: 64px; }
  main { height: calc(100vh - var(--header-height)); overflow: hidden; }
  .screen { height: 100%; padding: 10px clamp(24px, 3.5vw, 68px); overflow: hidden; }

  .home-screen { position: relative; width: min(1720px, 100%); }
  .home-screen .ready-hero { height: 100%; min-height: 0; grid-template-columns: 1.08fr .92fr; }
  .home-screen .ready-copy { padding: clamp(22px, 3.2vh, 38px) clamp(34px, 4.5vw, 80px); transform: translateY(clamp(-66px, -6.5vh, -44px)); }
  .home-screen .ready-copy h1 { font-size: clamp(6.8rem, 20.5vh, 12rem); }
  .home-screen .instant-start { width: min(620px, 100%); min-height: clamp(68px, 9vh, 84px); margin-top: clamp(26px, 4vh, 40px); }
  .home-screen .ready-actions { width: min(580px, 100%); margin-top: clamp(10px, 1.7vh, 17px); }
  .home-screen .ready-actions .secondary-button { min-height: 56px; padding-block: 11px; }
  .home-screen .hero-mascot { height: 100%; min-height: 0; padding: clamp(20px, 3vw, 42px); }
  .home-screen .hero-mascot img { width: min(94%, 540px); max-height: 72vh; }
  .home-tools { display: none; }
  .home-screen .resume-card:not([hidden]) {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 28px;
    width: min(900px, calc(100% - 120px));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: var(--shadow);
  }

  .game-screen { min-height: 0; padding-block: 10px; }
  .game-stage { height: 100%; min-height: 0; padding: 0; }
  .prompt-card { height: 100%; min-height: 0; }
  .prompt-content { padding: clamp(18px, 3vh, 42px); }
  .prompt-card:not(.answer-visible) .prompt-content { padding-bottom: clamp(38px, 5vh, 54px); }
  .prompt-card h1 { margin: 0; font-size: clamp(3.3rem, 12vh, 7rem); }
  .prompt-card.zh-prompt h1 { font-size: clamp(2.8rem, 9vh, 5.5rem); }
  .answer-panel { margin: 0; padding-block: 10px; }
  .judge-button { min-height: 72px; }
  .game-footer-actions { margin-top: 2px; }

  .results-screen { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .results-hero { gap: 14px; margin-bottom: 8px; }
  .results-hero img { width: clamp(80px, 10vh, 120px); }
  .results-hero h1 { font-size: clamp(2rem, 5vh, 3.2rem); }
  .metric-grid { gap: 9px; margin-bottom: 10px; }
  .metric-card { padding: 9px 14px; }
  .metric-card strong { margin-top: 1px; font-size: clamp(1.25rem, 3vh, 1.9rem); }
  .results-grid { flex: 1; height: auto; min-height: 0; }
  .results-grid > .panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .result-list { flex: 1; max-height: none; }
  .results-grid > aside .panel-heading { margin-bottom: 10px; }
  .result-group-scores { margin-bottom: 10px; padding: 10px; border-radius: 16px; }
  .group-result-heading { margin-bottom: 7px; }
  .group-result-heading h3 { font-size: 1rem; }
  .group-result-heading > strong { min-width: 52px; padding: 6px 8px; border-radius: 11px; font-size: 1.35rem; }
  .group-score-podium { gap: 5px; }
  .group-score-card { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; border-radius: 10px; }
  .score-rank { width: 23px; height: 23px; font-size: .7rem; }
  .group-score-card > strong { font-size: .86rem; }
  .score-points { font-size: 1.1rem; }
  .result-actions { gap: 7px; }
  .result-actions > button { min-height: 38px; padding: 7px 8px; font-size: .84rem; }

  .library-screen { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .library-screen .screen-title-row { margin-bottom: 10px; }
  .library-screen .screen-title-row h1 { font-size: clamp(2rem, 5vh, 3.2rem); }
  .library-layout { flex: 1; height: auto; min-height: 0; }
  .library-sidebar, .library-content { height: 100%; min-height: 0; overflow: hidden; }
  .library-sidebar { display: flex; flex-direction: column; }
  .library-unit-list { flex: 1; max-height: none; }
  .library-content { display: flex; flex-direction: column; }
  .word-table-wrap { flex: 1; max-height: none; }
}

@media (min-width: 1101px) and (max-height: 800px) {
  :root { --header-height: 118px; }
  body.game-active { --header-height: 70px; }
  .app-header { grid-template-rows: 58px 40px; padding-block: 6px; }
  body.game-active .app-header { grid-template-rows: 58px; }
  .tool-button { min-height: 52px; }
  .home-screen .ready-copy h1 { font-size: clamp(5.6rem, 18vh, 8.6rem); }
  .home-screen .instant-start { min-height: 64px; margin-top: 20px; }
  .home-screen .ready-actions .secondary-button { min-height: 50px; padding-block: 8px; }
  .home-screen .hero-mascot img { max-height: 66vh; }
  .game-stage { height: 100%; }
  .prompt-content { padding: 12px 20px; }
  .prompt-card:not(.answer-visible) .prompt-content { padding-bottom: 20px; }
  .prompt-card h1,
  .prompt-card.answer-visible h1 { margin: 0; font-size: clamp(3.2rem, 9vh, 5.2rem); }
  .prompt-card:not(.answer-visible) h1 { min-height: clamp(170px, 27vh, 215px); margin-bottom: 0; padding-block: clamp(22px, 3.5vh, 32px); }
  .prompt-card.zh-prompt h1,
  .prompt-card.answer-visible.zh-prompt h1 { font-size: clamp(2.8rem, 8vh, 4.4rem); }
  .prompt-actions { gap: 8px; }
  .round-button { min-height: 42px; padding: 7px 12px; }
  .answer-panel { width: 100%; min-height: 110px; margin: 0; padding: 12px 20px; border-radius: 0; }
  .answer-panel > strong { font-size: clamp(2.8rem, 4.6vw, 4.2rem); }
  .judgement-zone { margin: 0; padding-block: 10px; }
  .judge-button { min-height: 60px; padding-block: 7px; }
}

@media print {
  .app-header, button, dialog, .toast-region { display: none !important; }
  body { background: white; }
  .screen[hidden] { display: none !important; }
  .results-screen { display: block !important; padding: 0; }
  .panel, .metric-card { box-shadow: none; }
  .result-list { max-height: none; overflow: visible; }
}

/* 单词与结果答案最大化：词长规则提供保底字号，脚本再按各自卡片的实际宽高精确放大。 */
.prompt-card h1 { white-space: nowrap; overflow-wrap: normal; }
.answer-panel { overflow: hidden; }
.answer-panel > strong { white-space: nowrap; overflow-wrap: normal; }
.prompt-card.short-prompt:not(.zh-prompt) h1 { font-size: clamp(6.8rem, 13.6vw, 14rem); }
.prompt-card.medium-prompt:not(.zh-prompt) h1 { font-size: clamp(6rem, 12vw, 12.6rem); }
.prompt-card.long-prompt:not(.zh-prompt) h1 { font-size: clamp(5rem, 10.6vw, 11rem); }
.prompt-card.extra-long-prompt:not(.zh-prompt) h1 { font-size: clamp(4.2rem, 8.5vw, 9rem); }
.prompt-card.zh-prompt h1 { font-size: clamp(4.8rem, 8.7vw, 8.8rem); }
.prompt-card.zh-prompt.short-prompt h1 { font-size: clamp(5.4rem, 9.8vw, 10rem); }
.prompt-card.zh-prompt.extra-long-prompt h1 { font-size: clamp(3.8rem, 6.8vw, 7rem); }
.prompt-card.answer-visible:not(.zh-prompt) h1 { font-size: clamp(5rem, 13vh, 9rem); }
.prompt-card.answer-visible.extra-long-prompt:not(.zh-prompt) h1 { font-size: clamp(4.2rem, 10.5vh, 7.4rem); }
.prompt-card.answer-visible.zh-prompt h1 { font-size: clamp(4.4rem, 11.5vh, 7.6rem); }

@media (min-width: 1101px) and (max-height: 800px) {
  .prompt-card.short-prompt:not(.zh-prompt) h1 { font-size: clamp(5.4rem, 15vh, 9.2rem); }
  .prompt-card.medium-prompt:not(.zh-prompt) h1 { font-size: clamp(4.9rem, 14vh, 8.6rem); }
  .prompt-card.long-prompt:not(.zh-prompt) h1 { font-size: clamp(4.4rem, 12.8vh, 8.2rem); }
  .prompt-card.extra-long-prompt:not(.zh-prompt) h1 { font-size: clamp(3.7rem, 10.5vh, 7rem); }
  .prompt-card.zh-prompt h1 { font-size: clamp(3.7rem, 10.5vh, 7rem); }
  .prompt-card.answer-visible:not(.zh-prompt) h1 { font-size: clamp(4rem, 11.5vh, 7.2rem); }
}