:root {
  --paper: #fff6d9;
  --paper-2: #fffdf7;
  --ink: #332b5c;
  --ink-soft: #71698d;
  --line: #e5d9ef;
  --navy: #493d83;
  --navy-2: #6557a5;
  --amber: #ffbf24;
  --amber-deep: #e78b18;
  --amber-soft: #fff0ad;
  --aqua: #22c8d4;
  --aqua-deep: #078a9a;
  --aqua-soft: #c8f7f4;
  --danger: #f05f76;
  --success: #24a978;
  --violet: #7967ff;
  --pink: #ff70ad;
  --sky: #63c7f5;
  --shadow: 0 18px 50px rgba(89, 69, 145, .16);
  --shadow-soft: 0 8px 24px rgba(89, 69, 145, .11);
  --radius-xl: 28px;
  --radius-lg: 19px;
  --radius-md: 13px;
  --speed: 180ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 208, 61, .38), transparent 24%),
    radial-gradient(circle at 94% 16%, rgba(255, 112, 173, .20), transparent 22%),
    radial-gradient(circle at 88% 88%, rgba(59, 205, 219, .24), transparent 30%),
    linear-gradient(135deg, #fff1bd, #fff8ee 45%, #e9f8ff 76%, #ebfff6);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .68;
  background-image:
    radial-gradient(circle, rgba(121, 103, 255, .13) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 112, 173, .12) 0 3px, transparent 3.5px);
  background-position: 0 0, 30px 30px;
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(0, 168, 168, .35);
  outline-offset: 2px;
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1740px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px clamp(16px, 2.4vw, 38px) 24px;
}

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark { width: 50px; height: 50px; filter: drop-shadow(0 6px 8px rgba(102, 78, 190, .22)); }
.brand span { display: grid; line-height: 1.08; }
.brand strong { font-size: clamp(22px, 2vw, 31px); letter-spacing: .04em; color: #5545a3; }
.brand small { margin-top: 6px; color: #9d5790; font-size: 12px; font-weight: 800; letter-spacing: .22em; }

.top-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.primary-btn, .soft-btn, .ghost-btn, .icon-btn {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), opacity var(--speed);
  font-weight: 800;
}

.primary-btn {
  min-height: 46px;
  padding: 11px 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--aqua-deep), var(--aqua));
  box-shadow: 0 9px 20px rgba(0, 125, 130, .24);
}

.primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 13px 24px rgba(0, 125, 130, .29); }
.primary-btn.compact { min-height: 42px; padding: 9px 17px; }

.soft-btn, .ghost-btn {
  min-height: 42px;
  padding: 9px 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 35, 63, .13);
}

.soft-btn { background: var(--paper-2); box-shadow: var(--shadow-soft); }
.soft-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) { transform: translateY(-1px); background: #fff; border-color: rgba(0, 125, 130, .35); }
button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 18px;
  align-items: stretch;
}

.play-stage { min-width: 0; }

.team-strip {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 150px minmax(210px, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.team-card {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(23, 35, 63, .1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
  overflow: hidden;
  position: relative;
}

.team-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: currentColor; opacity: .8; }
.team-card.aqua { justify-content: flex-end; text-align: right; }
.team-card.aqua::before { inset: 0 0 0 auto; }
.team-card.amber { color: var(--amber-deep); }
.team-card.aqua { color: var(--aqua-deep); }
.team-card > div:not(.team-score) { display: grid; gap: 3px; }
.team-card small { color: var(--ink-soft); font-size: 11px; letter-spacing: .08em; }
.team-card strong { font-size: 18px; color: var(--ink); }
.team-card.active { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(23, 35, 63, .16); }
.team-card.amber.active { border-color: rgba(217, 130, 0, .55); }
.team-card.aqua.active { border-color: rgba(0, 125, 130, .55); }
.team-beacon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: currentColor; color: #fff; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .22); }
.team-card.amber .team-beacon { background: var(--amber); }
.team-card.aqua .team-beacon { background: var(--aqua); }
.team-score { margin-left: auto; display: grid; justify-items: center; line-height: 1; }
.aqua .team-score { margin-left: 0; margin-right: auto; }
.team-score strong { font-size: 29px; font-variant-numeric: tabular-nums; }
.team-score span { margin-top: 4px; color: var(--ink-soft); font-size: 10px; }

.turn-orbit { display: grid; place-items: center; min-width: 62px; text-align: center; }
.turn-orbit strong { color: var(--theme-heading); font-size: 21px; font-style: italic; font-weight: 950; letter-spacing: .08em; text-shadow: 0 2px 0 color-mix(in srgb, var(--theme-primary) 22%, transparent); }
.orbit-dot { width: 20px; height: 20px; margin-bottom: 3px; border: 5px solid var(--paper-2); border-radius: 50%; background: var(--line); box-shadow: 0 0 0 1px rgba(23, 35, 63, .14); transition: background var(--speed); }
.turn-orbit.amber .orbit-dot { background: var(--amber); }
.turn-orbit.aqua .orbit-dot { background: var(--aqua); }

.board-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 35px;
  padding: 0 4px 8px;
  color: var(--ink-soft);
  font-size: 12px;
}
.board-meta > div { display: flex; align-items: center; gap: 9px; }
.status-chip { padding: 5px 9px; border-radius: 999px; background: rgba(23, 35, 63, .08); color: var(--ink); font-weight: 800; }
.status-chip.playing { background: var(--aqua-soft); color: var(--aqua-deep); }
.status-chip.paused { background: var(--amber-soft); color: #9b6200; }
.status-chip.won { background: #e6dcff; color: var(--violet); }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { min-width: 25px; padding: 2px 4px; border-radius: 5px; color: #fff; font-size: 9px; font-style: normal; font-weight: 900; text-align: center; }
.legend-en { background: var(--violet); }
.legend-zh { background: var(--aqua-deep); }

.board-frame {
  position: relative;
  min-height: 480px;
  height: calc(100vh - 174px);
  max-height: 850px;
  display: grid;
  place-items: center;
  padding: clamp(12px, 1.5vw, 22px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .11), transparent 18%),
    radial-gradient(circle at 73% 76%, rgba(0, 168, 168, .18), transparent 24%),
    linear-gradient(145deg, #23375d, #111a30 63%, #172b43);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 24px 55px rgba(17, 26, 48, .25), inset 0 0 0 2px rgba(255, 255, 255, .045);
  overflow: hidden;
}

.board-frame::before, .board-frame::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); pointer-events: none; }
.board-frame::before { width: 540px; height: 540px; left: -240px; top: -290px; box-shadow: 0 0 0 70px rgba(255, 255, 255, .018), 0 0 0 140px rgba(255, 255, 255, .012); }
.board-frame::after { width: 320px; height: 320px; right: -190px; bottom: -180px; box-shadow: 0 0 0 58px rgba(0, 168, 168, .035); }

.board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--board-size, 7), 1fr);
  grid-template-rows: repeat(var(--board-size, 7), 1fr);
  gap: clamp(4px, .48vw, 8px);
  width: min(100%, calc(100vh - 216px));
  aspect-ratio: 1;
}

.word-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 7px 5px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: clamp(7px, .8vw, 12px);
  color: var(--ink);
  background: linear-gradient(165deg, #fffdf7, #efe7d8);
  box-shadow: 0 4px 0 #cfc2ad, 0 7px 14px rgba(0, 0, 0, .17);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}

.word-cell:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 0 #cfc2ad, 0 12px 22px rgba(0, 0, 0, .24); filter: brightness(1.04); }
.word-cell:disabled { cursor: default; opacity: 1; }
.cell-word { max-width: 100%; font-size: clamp(10px, 1.1vw, 18px); line-height: 1.08; font-weight: 900; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.cell-direction { position: absolute; top: 4px; right: 4px; min-width: 22px; padding: 2px 4px; border-radius: 5px; color: #fff; background: var(--violet); font-size: clamp(7px, .58vw, 9px); line-height: 1.2; font-weight: 900; }
.word-cell[data-direction="zh-en"] .cell-direction { background: var(--aqua-deep); }
.word-cell.owner-amber { color: #3c2b00; background: linear-gradient(145deg, #ffe494, var(--amber)); border-color: #ffefbf; box-shadow: 0 4px 0 var(--amber-deep), 0 8px 17px rgba(255, 183, 3, .24); }
.word-cell.owner-aqua { color: #002e31; background: linear-gradient(145deg, #8cf0e4, #16b9b5); border-color: #cafff7; box-shadow: 0 4px 0 var(--aqua-deep), 0 8px 17px rgba(0, 168, 168, .24); }
.word-cell.owner-amber .cell-direction, .word-cell.owner-aqua .cell-direction { background: rgba(23, 35, 63, .78); }
.word-cell.winning { z-index: 3; animation: winning-cell .72s ease-in-out infinite alternate; outline: 4px solid #fff; outline-offset: -5px; }
@keyframes winning-cell { to { transform: translateY(-3px) scale(1.035); filter: brightness(1.12); } }

.empty-board { position: absolute; z-index: 3; width: min(510px, calc(100% - 42px)); color: #f5f0e5; text-align: center; }
.empty-board.hidden { display: none; }
.empty-star { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 17px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 26px; color: var(--amber); background: rgba(255, 255, 255, .08); font-size: 43px; transform: rotate(8deg); }
.empty-board h2 { margin: 0 0 10px; font-size: clamp(25px, 3vw, 40px); }
.empty-board p { margin: 0 auto 22px; color: #bac5d7; line-height: 1.7; }

.control-tower { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-card, .control-card, .storage-note { border: 1px solid rgba(23, 35, 63, .1); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .76); box-shadow: var(--shadow-soft); }
.guide-card { overflow: hidden; }
.mascot { height: 165px; display: grid; place-items: center; background: linear-gradient(145deg, #1d2c4d, #263e63); }
.mascot svg { width: 175px; max-height: 155px; }
.mascot-shadow { fill: rgba(0, 0, 0, .25); }
.mascot-antenna, .mascot-arm, .mascot-leg, .mascot-smile, .mascot-panel { fill: none; stroke: #d8f4f0; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mascot-star { fill: var(--amber); }
.mascot-body { fill: #f4e8cf; stroke: #fff8e8; stroke-width: 3; }
.mascot-screen { fill: #111d36; stroke: #00a8a8; stroke-width: 3; }
.mascot-eye { fill: var(--amber); }
.mascot-smile { stroke: var(--aqua-soft); stroke-width: 3; }
.mascot-panel { stroke: var(--amber-deep); stroke-width: 4; }
.guide-copy { padding: 13px 16px 16px; }
.guide-copy span { color: var(--aqua-deep); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.guide-copy p { min-height: 42px; margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

.control-card { padding: 15px; }
.compact-card { flex: 1; min-height: 170px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading > span { font-weight: 900; }
.section-heading small { color: var(--ink-soft); font-size: 11px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.control-grid button { min-height: 43px; padding: 8px; }
.control-grid .primary-btn { grid-column: 1 / -1; }
.control-grid #shuffle-btn, .control-grid #restart-btn { grid-column: 1 / -1; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-stats div { display: grid; justify-items: center; gap: 4px; padding: 9px 3px; border-radius: 11px; background: rgba(23, 35, 63, .055); }
.mini-stats span { font-weight: 900; font-size: 18px; }
.mini-stats small { color: var(--ink-soft); font-size: 9px; }
.wrong-list { max-height: 98px; overflow: auto; margin-top: 10px; }
.wrong-list p { margin: 12px 0; color: var(--ink-soft); font-size: 11px; text-align: center; }
.wrong-chip { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-top: 1px dashed var(--line); font-size: 11px; }
.wrong-chip strong { color: var(--danger); }
.storage-note { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.storage-note > div { display: grid; gap: 2px; }
.storage-note strong { font-size: 12px; }
.storage-note small { color: var(--ink-soft); font-size: 10px; }
.save-light { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(22, 139, 105, .13); }

.dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 22px; border: 0; background: transparent; overflow: auto; }
.dialog::backdrop { background: rgba(9, 15, 30, .7); backdrop-filter: blur(7px); }
.dialog[open] { display: grid; place-items: center; }
.dialog-card { width: min(680px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: clamp(20px, 3vw, 34px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 27px; background: #fffaf1; box-shadow: 0 30px 90px rgba(0, 0, 0, .32); }
.wide-dialog { width: min(1080px, 100%); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dialog-header h2 { margin: 4px 0 5px; font-size: clamp(25px, 3vw, 38px); }
.dialog-header p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.eyebrow { color: var(--aqua-deep); font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.icon-btn { width: 40px; height: 40px; flex: 0 0 auto; color: var(--ink); background: rgba(23, 35, 63, .07); font-size: 26px; }
.icon-btn:hover { background: rgba(23, 35, 63, .13); }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 21px; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr); gap: 15px; }
.setup-section { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .62); }
.unit-section { grid-row: span 2; }
.unit-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unit-option { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.unit-option:has(input:checked) { border-color: var(--aqua); box-shadow: inset 0 0 0 1px var(--aqua); background: #edfbf8; }
.unit-option input { width: 17px; height: 17px; accent-color: var(--aqua-deep); }
.unit-option b { font-size: 19px; }
.unit-option span { display: grid; gap: 2px; }
.unit-option strong { font-size: 12px; }
.unit-option small { color: var(--ink-soft); font-size: 9px; }
.unit-option em { color: var(--ink-soft); font-size: 10px; font-style: normal; }
.field-label { display: grid; gap: 7px; margin-top: 11px; color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.field-label:first-of-type { margin-top: 0; }
input, select, textarea { width: 100%; border: 1px solid #d8cfbf; border-radius: 11px; color: var(--ink); background: #fff; }
input, select { min-height: 43px; padding: 9px 11px; }
textarea { padding: 11px; resize: vertical; line-height: 1.55; }
.amber-field input { border-left: 5px solid var(--amber); }
.aqua-field input { border-left: 5px solid var(--aqua); }
.switch-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; cursor: pointer; }
.switch-row input { width: 19px; height: 19px; min-height: 0; margin: 2px 0 0; accent-color: var(--aqua-deep); }
.switch-row span { display: grid; gap: 3px; }
.switch-row strong { font-size: 12px; }
.switch-row small { color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.access-settings { margin-top: 15px; padding-top: 2px; border-top: 1px dashed var(--line); }
.form-error { min-height: 18px; margin: 10px 0 0; color: var(--danger); font-size: 12px; font-weight: 800; }

.challenge-card { width: min(780px, 100%); padding: clamp(22px, 3.2vw, 42px); text-align: center; overflow: visible; }
.challenge-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.challenge-header > div:first-child { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.team-turn-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--amber); }
.team-turn-dot.aqua { background: var(--aqua); }
.challenge-timer { display: flex; align-items: baseline; gap: 3px; min-width: 77px; justify-content: center; padding: 7px 12px; border-radius: 999px; color: var(--ink); background: rgba(23, 35, 63, .07); }
.challenge-timer strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.challenge-timer span { font-size: 11px; }
.challenge-timer.expired { color: #fff; background: var(--danger); }
.challenge-timer.off { visibility: hidden; }
.challenge-direction { color: var(--aqua-deep); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.challenge-prompt { margin: 10px auto; font-size: clamp(42px, 7vw, 82px); line-height: 1.12; font-weight: 950; overflow-wrap: anywhere; }
.word-meta { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.word-meta span { padding: 5px 9px; border-radius: 999px; color: var(--ink-soft); background: rgba(23, 35, 63, .06); font-size: 11px; }
.answer-panel { display: none; min-height: 95px; margin: 19px 0 15px; padding: 13px; border: 1px dashed rgba(0, 125, 130, .38); border-radius: var(--radius-md); background: #eaf9f6; }
.answer-panel.show { display: grid; place-items: center; gap: 3px; }
.answer-panel small { color: var(--aqua-deep); }
.answer-panel strong { font-size: clamp(25px, 4vw, 42px); }
.answer-panel p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12px; }
.challenge-tools { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.challenge-tools button { min-height: 39px; padding: 7px 12px; font-size: 11px; }
.judge-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.judge-btn { min-height: 105px; display: grid; place-items: center; align-content: center; gap: 4px; border: 0; border-radius: 17px; cursor: pointer; transition: transform var(--speed), filter var(--speed); }
.judge-btn:hover { transform: translateY(-3px); filter: brightness(1.03); }
.judge-btn span { font-size: 26px; font-weight: 900; }
.judge-btn strong { font-size: 14px; }
.judge-btn small { font-size: 9px; opacity: .72; }
.judge-btn.wrong { color: #7c2631; background: #ffe3e5; }
.judge-btn.skip { color: #54433a; background: #ede5dc; }
.judge-btn.correct { color: #fff; background: linear-gradient(145deg, var(--aqua-deep), var(--aqua)); box-shadow: 0 9px 22px rgba(0, 125, 130, .23); }
.shortcut-tip { margin: 13px 0 -10px; color: var(--ink-soft); font-size: 10px; }

.bank-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 15px; }
.bank-grid-single { grid-template-columns: 1fr; }
.bank-panel { min-height: 390px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .62); }
.bank-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.bank-panel-heading .section-heading { flex: 1; margin: 0; }
.bank-unit-list { max-height: 360px; overflow: auto; }
.bank-unit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px dashed var(--line); }
.bank-unit > span:first-child { font-size: 23px; }
.bank-unit div { display: grid; gap: 2px; }
.bank-unit strong { font-size: 12px; }
.bank-unit small { color: var(--ink-soft); font-size: 9px; }
.bank-unit button { border: 0; color: var(--danger); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.file-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 220px); align-items: center; gap: 9px 12px; margin: 10px 0; }
.file-upload-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.file-row input { flex: 1 1 260px; min-width: 190px; min-height: 40px; padding: 6px; font-size: 10px; }
.file-row > span { color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.sample-file-link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 40px; padding: 7px 12px; color: #fff; border: 2px solid var(--theme-primary-border); border-radius: 11px; background: var(--theme-primary); box-shadow: 0 3px 0 var(--theme-primary-border); font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.sample-file-link span { margin-right: 2px; color: inherit; font-size: 15px; line-height: 1; }
.sample-file-link:hover { border-color: var(--theme-primary-border); background: color-mix(in srgb, var(--theme-primary) 82%, var(--theme-primary-border)); }
.import-report { min-height: 17px; margin: 8px 0; color: var(--ink-soft); font-size: 10px; }
.import-report.error { color: var(--danger); font-weight: 800; }
.unit-create-card { width: min(820px, 100%); }
.unit-create-header { align-items: flex-start; }
.unit-name-field { color: var(--theme-heading); font-size: 13px; }
.unit-paste-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--theme-card-border); }
.unit-paste-section > p { margin: 14px 0 10px; color: var(--theme-ink-soft); font-size: 12px; line-height: 1.65; }
.unit-import-example { display: grid; gap: 3px; margin-top: 10px; padding: 12px 14px; color: var(--theme-ink-soft); border-radius: 13px; background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-card)); font-size: 12px; line-height: 1.45; }
.unit-import-example strong { margin-bottom: 3px; color: var(--theme-heading); }
.unit-paste-section textarea { width: 100%; min-height: 210px; padding: 15px; color: var(--theme-ink); border: 2px solid var(--theme-card-border); border-radius: 14px; background: var(--theme-card); font: 600 14px/1.65 "Microsoft YaHei", "PingFang SC", sans-serif; resize: vertical; }
.unit-paste-section textarea:focus { border-color: var(--theme-primary); outline: 3px solid color-mix(in srgb, var(--theme-primary) 22%, transparent); }
.unit-create-actions { display: grid; grid-template-columns: 1fr 1fr; }
.unit-create-actions button { min-height: 50px; }
.backup-bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; margin-top: 15px; padding: 14px 17px; border-radius: var(--radius-lg); color: #fff; background: var(--navy); }
.backup-bar > div { display: grid; gap: 3px; }
.backup-bar small { color: #b9c5d9; font-size: 10px; }
.file-button { position: relative; display: grid; place-items: center; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.help-card { width: min(760px, 100%); }
.help-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help-steps article { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .68); }
.help-steps article > span { color: var(--amber-deep); font-size: 20px; font-weight: 950; }
.help-steps strong { font-size: 13px; }
.help-steps p, .help-note p { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.help-note { margin-top: 12px; padding: 15px; border-radius: 14px; background: var(--aqua-soft); }

.result-card { width: min(580px, 100%); text-align: center; }
.result-symbol { width: 88px; height: 88px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 28px; color: var(--amber); background: var(--navy); font-size: 48px; transform: rotate(5deg); }
.result-card h2 { margin: 7px 0; font-size: clamp(28px, 5vw, 46px); }
.result-card > p { color: var(--ink-soft); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 19px 0; }
.result-stats div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(23, 35, 63, .06); }
.result-stats strong { font-size: 22px; }
.result-stats small { color: var(--ink-soft); font-size: 9px; }
.result-actions { display: flex; justify-content: center; gap: 9px; }

.pause-overlay { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 14px; color: var(--theme-ink); background: rgba(28, 48, 66, .13); backdrop-filter: blur(1px); }
.pause-overlay.show { display: grid; }
.pause-overlay > div { width: min(270px, calc(100vw - 28px)); padding: 16px 18px 17px; text-align: center; border: 2px solid var(--theme-card-border); border-radius: 20px; background: color-mix(in srgb, var(--theme-card) 96%, transparent); box-shadow: 0 7px 0 color-mix(in srgb, var(--theme-primary-border) 58%, transparent), 0 16px 38px rgba(28, 48, 66, .22); }
.pause-overlay span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 8px; border: 1px solid var(--theme-card-border); border-radius: 13px; color: var(--theme-amber); background: color-mix(in srgb, var(--theme-amber) 10%, var(--theme-card)); font-size: 21px; }
.pause-overlay h2 { margin: 0 0 4px; color: var(--theme-heading); font-size: 22px; }
.pause-overlay p { margin: 0 0 11px; color: var(--theme-ink-soft); font-size: 11px; }
.pause-overlay .primary-btn { min-height: 38px; padding: 8px 16px; font-size: 12px; box-shadow: 0 4px 0 var(--theme-primary-border), 0 8px 18px color-mix(in srgb, var(--theme-primary) 20%, transparent); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 25px; max-width: min(520px, calc(100% - 32px)); padding: 11px 17px; border-radius: 999px; color: #fff; background: rgba(23, 35, 63, .95); box-shadow: var(--shadow); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity var(--speed), transform var(--speed); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 小学课堂活力主题：糖果星球 */
.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #7664ff, #9a65f5 56%, #ff70ad);
  box-shadow: 0 8px 0 #5946c5, 0 13px 23px rgba(121, 103, 255, .25);
}

.primary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 #5946c5, 0 16px 26px rgba(121, 103, 255, .28);
}

.soft-btn, .ghost-btn {
  color: #4f437d;
  background: rgba(255, 255, 255, .88);
  border: 2px solid rgba(121, 103, 255, .14);
  box-shadow: 0 4px 0 rgba(121, 103, 255, .10);
}

.soft-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) {
  color: #6a54e8;
  border-color: rgba(121, 103, 255, .38);
  background: #fff;
}

.team-card {
  border: 2px solid #fff;
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 7px 0 rgba(121, 103, 255, .08), 0 13px 25px rgba(89, 69, 145, .12);
}

.team-card.amber {
  background: linear-gradient(110deg, #fff9dc, #fff 60%);
}

.team-card.aqua {
  background: linear-gradient(250deg, #dcfbff, #fff 60%);
}

.team-card::before { width: 8px; }
.team-card.amber.active { border-color: #ffd45f; box-shadow: 0 7px 0 #f5b521, 0 14px 25px rgba(255, 191, 36, .22); }
.team-card.aqua.active { border-color: #68e3e4; box-shadow: 0 7px 0 #18a9bc, 0 14px 25px rgba(34, 200, 212, .21); }
.team-beacon { box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .45), 0 4px 0 rgba(63, 42, 100, .12); }

.orbit-dot {
  border-color: #fff;
  box-shadow: 0 4px 0 rgba(85, 69, 163, .15), 0 0 0 2px rgba(121, 103, 255, .12);
}

.status-chip { background: #efe9ff; color: #6553b6; }
.status-chip.playing { background: #d9fbf7; color: #078a9a; }
.status-chip.paused { background: #fff0ad; color: #a66300; }
.status-chip.won { background: #ffe0ef; color: #c84282; }
.legend-en { background: #8b6cf6; }
.legend-zh { background: #11aebb; }

.board-frame {
  border: 5px solid rgba(255, 255, 255, .96);
  background:
    radial-gradient(circle at 13% 14%, rgba(255, 231, 116, .95) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 20%, rgba(255, 255, 255, .82) 0 5px, transparent 6px),
    radial-gradient(circle at 79% 80%, rgba(255, 130, 190, .42), transparent 26%),
    linear-gradient(145deg, #58c9f4, #7278f6 54%, #a765e9);
  box-shadow: 0 10px 0 #d6c3ff, 0 26px 55px rgba(92, 73, 172, .23), inset 0 0 0 3px rgba(255, 255, 255, .16);
}

.board-frame::before {
  width: 430px;
  height: 430px;
  left: -185px;
  top: -210px;
  border: 3px dashed rgba(255, 255, 255, .25);
  box-shadow: 0 0 0 54px rgba(255, 255, 255, .045), 0 0 0 108px rgba(255, 255, 255, .025);
}

.board-frame::after {
  width: 280px;
  height: 280px;
  right: -130px;
  bottom: -140px;
  border: 18px solid rgba(255, 224, 91, .16);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .04);
}

.word-cell {
  border: 3px solid #fff;
  color: #42336c;
  background: linear-gradient(165deg, #fffbe7, #ffedaa);
  box-shadow: 0 5px 0 #e8bd42, 0 9px 15px rgba(65, 42, 112, .18);
}

.word-cell[data-direction="zh-en"] {
  color: #25567b;
  background: linear-gradient(165deg, #f4feff, #bdeeff);
  box-shadow: 0 5px 0 #6ec9ed, 0 9px 15px rgba(42, 102, 153, .18);
}

.word-cell:hover:not(:disabled) {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 7px 0 #d89fe8, 0 14px 22px rgba(74, 46, 132, .23);
}

.cell-direction {
  color: #fff;
  background: #8a69ee;
  border: 2px solid rgba(255, 255, 255, .78);
}

.word-cell[data-direction="zh-en"] .cell-direction { background: #10a8b7; }

.word-cell.owner-amber {
  color: #684100;
  background: linear-gradient(145deg, #fff59b, #ffc928 66%, #ffab2e);
  border-color: #fffde8;
  box-shadow: 0 5px 0 #e68117, 0 10px 18px rgba(255, 174, 30, .30);
}

.word-cell.owner-aqua {
  color: #07526a;
  background: linear-gradient(145deg, #b8fff6, #35d4d4 65%, #37b7f4);
  border-color: #efffff;
  box-shadow: 0 5px 0 #078a9a, 0 10px 18px rgba(30, 190, 206, .28);
}

.word-cell.winning {
  outline-color: #fff36d;
  filter: saturate(1.16);
}

.empty-star {
  color: #fff;
  border: 3px solid rgba(255, 255, 255, .75);
  background: linear-gradient(145deg, #ffca3a, #ff70ad);
  box-shadow: 0 7px 0 rgba(101, 76, 188, .32);
}

.empty-board { color: #fff; text-shadow: 0 2px 0 rgba(67, 44, 121, .22); }
.empty-board p { color: #f4f6ff; }

.guide-card, .control-card, .storage-note {
  border: 2px solid rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 7px 0 rgba(121, 103, 255, .09), 0 15px 28px rgba(85, 68, 141, .12);
}

.mascot {
  position: relative;
  background:
    radial-gradient(circle at 20% 22%, #ffe568 0 7px, transparent 8px),
    radial-gradient(circle at 83% 26%, #ff8fbd 0 6px, transparent 7px),
    linear-gradient(145deg, #72dcf7, #7378f4 64%, #a96de8);
}

.mascot::before, .mascot::after {
  position: absolute;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(84, 57, 145, .16);
}

.mascot::before { content: "✦"; left: 24px; bottom: 25px; font-size: 24px; transform: rotate(-12deg); }
.mascot::after { content: "★"; right: 25px; bottom: 18px; color: #ffe568; font-size: 18px; transform: rotate(14deg); }
.mascot-body { fill: #fff4d8; stroke: #fff; stroke-width: 4; }
.mascot-screen { fill: #51428d; stroke: #45e0d4; stroke-width: 4; }
.mascot-eye { fill: #ffe044; }
.mascot-cheek { fill: #ff75ae; }
.mascot-smile { stroke: #fff; stroke-width: 4; }
.mascot-antenna, .mascot-arm, .mascot-leg { stroke: #fff; }
.mascot-panel { stroke: #ff9d43; }
.guide-copy { background: linear-gradient(110deg, #fff7cf, #fff 62%, #e7fbff); }
.guide-copy span { color: #7664d3; }

.control-card .section-heading > span { color: #5b4b9b; }
.mini-stats div:nth-child(1) { background: #fff0be; }
.mini-stats div:nth-child(2) { background: #d9f9ff; }
.mini-stats div:nth-child(3) { background: #f0e6ff; }
.storage-note { background: linear-gradient(110deg, #edfff7, #fff); }
.save-light { background: #35c88b; box-shadow: 0 0 0 5px rgba(53, 200, 139, .16); }

.dialog::backdrop { background: rgba(66, 48, 113, .60); }
.dialog-card { border: 4px solid #fff; background: linear-gradient(150deg, #fffef8, #fff6df 48%, #f4f0ff); }
.setup-section, .bank-panel { border: 2px solid #eadff4; background: rgba(255, 255, 255, .82); }
.unit-option:has(input:checked) { border-color: #7d6cff; box-shadow: inset 0 0 0 1px #7d6cff, 0 4px 0 #ded5ff; background: #f4f0ff; }
.answer-panel { border-color: #45c7cf; background: linear-gradient(120deg, #e2fff8, #eaf4ff); }
.judge-btn.correct { background: linear-gradient(145deg, #7664ff, #a764ef); box-shadow: 0 7px 0 #5646b7, 0 12px 22px rgba(111, 83, 215, .24); }
.judge-btn.wrong { color: #9f3557; background: #ffe0ec; box-shadow: 0 5px 0 #f2acc6; }
.judge-btn.skip { color: #775b25; background: #fff0bd; box-shadow: 0 5px 0 #e6c75f; }
.backup-bar { background: linear-gradient(120deg, #5b4caf, #7866e7 60%, #d85eaa); }
.pause-overlay { background: rgba(75, 56, 131, .88); }
.result-symbol { background: linear-gradient(145deg, #7967ff, #ff70ad); box-shadow: 0 7px 0 #5743c2; }

/* 最终课堂配色：奶油白、雾霾蓝绿、灰海军蓝与少量暖色提示 */
:root {
  --paper: #f2e8d5;
  --paper-2: #f9f7f1;
  --ink: #34485f;
  --ink-soft: #6e7e86;
  --line: #d5ddda;
  --navy: #34485f;
  --navy-2: #536b7b;
  --amber: #d5a05c;
  --amber-deep: #9e6d36;
  --amber-soft: #f1e1c5;
  --aqua: #65a5ad;
  --aqua-deep: #477984;
  --aqua-soft: #d8e9e9;
  --danger: #b8707e;
  --success: #62ad8a;
  --violet: #8b758f;
  --pink: #d7859d;
  --sky: #73aec0;
  --shadow: 0 18px 50px rgba(52, 72, 95, .14);
  --shadow-soft: 0 8px 24px rgba(52, 72, 95, .10);
}

body {
  background:
    radial-gradient(circle at 5% 9%, rgba(205, 178, 127, .16), transparent 24%),
    radial-gradient(circle at 94% 13%, rgba(176, 151, 162, .12), transparent 22%),
    radial-gradient(circle at 90% 89%, rgba(117, 153, 151, .16), transparent 29%),
    linear-gradient(135deg, #f7f3eb, #f2f5f3 52%, #eaf2f0);
}

body::before {
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(52, 72, 95, .075) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(111, 148, 142, .09) 0 2px, transparent 2.5px);
  background-position: 0 0, 31px 31px;
  background-size: 62px 62px;
}

.brand strong { color: #34485f; }
.brand small { color: #6b7f87; }
.brand-mark { filter: drop-shadow(0 5px 0 rgba(111, 148, 142, .26)); }

.primary-btn {
  color: #fff;
  background: #5c9e91;
  border: 2px solid #3f746b;
  box-shadow: 0 6px 0 #3c6962, 0 11px 20px rgba(60, 105, 98, .20);
}

.primary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #69aea0;
  box-shadow: 0 8px 0 #3c6962, 0 14px 23px rgba(60, 105, 98, .22);
}

.soft-btn, .ghost-btn {
  color: #34485f;
  background: #f9f7f1;
  border: 2px solid #ced8d5;
  box-shadow: 0 4px 0 #dce2df;
}

.soft-btn:hover:not(:disabled), .ghost-btn:hover:not(:disabled) {
  color: #34485f;
  border-color: #718b8b;
  background: #fdfbf6;
}

.team-card {
  border: 2px solid #d5ddda;
  background: #f9f7f1;
  box-shadow: 0 7px 0 #dce2df, 0 13px 24px rgba(52, 72, 95, .09);
}

.team-card.amber { color: #986332; background: linear-gradient(110deg, #f5e2c1, #f9f7f1 58%); }
.team-card.aqua { color: #3f7781; background: linear-gradient(250deg, #d4e9e8, #f9f7f1 58%); }
.team-card.amber.active { border-color: #89683f; box-shadow: 0 7px 0 #d5a05c, 0 14px 25px rgba(108, 76, 38, .15); }
.team-card.aqua.active { border-color: #4b7881; box-shadow: 0 7px 0 #65a5ad, 0 14px 25px rgba(49, 91, 100, .15); }
.team-card.amber .team-beacon { background: #d5a05c; }
.team-card.aqua .team-beacon { background: #65a5ad; }

.turn-orbit.amber .orbit-dot { background: #d5a05c; }
.turn-orbit.aqua .orbit-dot { background: #65a5ad; }
.status-chip.playing { color: #3d7971; background: #d7ece6; }
.legend-en { background: #ad768b; }
.legend-zh { background: #57928d; }

.board-frame {
  padding: clamp(10px, 1.15vw, 16px);
  height: calc(100svh - 230px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  border: 3px solid #769399;
  background: linear-gradient(145deg, #c0d0ce, #adc1c1 58%, #9fb6b9);
  box-shadow:
    0 8px 0 #6f8b91,
    0 22px 48px rgba(52, 72, 95, .16),
    inset 0 0 0 8px rgba(232, 239, 235, .58);
}

.board-frame::before, .board-frame::after { display: none; }

.board {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  align-self: center;
  justify-self: center;
}

.word-cell {
  color: #435c68;
  border: 2px solid rgba(105, 134, 136, .46);
  background: linear-gradient(165deg, #f6f4ed, #ecece5);
  box-shadow: 0 4px 0 rgba(104, 135, 137, .62), 0 8px 14px rgba(52, 72, 95, .11);
}

.word-cell[data-direction="zh-en"] {
  color: #435c68;
  background: linear-gradient(165deg, #f6f4ed, #ecece5);
  box-shadow: 0 4px 0 rgba(104, 135, 137, .62), 0 8px 14px rgba(52, 72, 95, .11);
}

.word-cell:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: #657f85;
  background: linear-gradient(165deg, #fbf9f3, #f1f1ea);
  box-shadow: 0 6px 0 rgba(94, 124, 127, .68), 0 13px 20px rgba(52, 72, 95, .15);
}

.cell-direction {
  min-width: 24px;
  color: #fff;
  background: #ad768b;
  border: 1px solid rgba(255, 255, 255, .82);
  font-size: clamp(8px, .62vw, 10px);
}

.word-cell[data-direction="zh-en"] .cell-direction { background: #57928d; }

.cell-word { font-size: clamp(14px, 1.35vw, 24px); line-height: 1.05; }

.word-cell.owner-amber {
  color: #493e2e;
  background: linear-gradient(165deg, #decaa5, #c5a372);
  border-color: #9d8058;
  box-shadow: 0 4px 0 #8e734f, 0 9px 16px rgba(76, 61, 41, .14);
}

.word-cell.owner-aqua {
  color: #294440;
  background: linear-gradient(165deg, #afc4c7, #829fa6);
  border-color: #617d84;
  box-shadow: 0 4px 0 #577178, 0 9px 16px rgba(52, 72, 95, .14);
}

.empty-board { color: #34485f; text-shadow: none; }
.empty-board p { color: #6b7f87; }
.empty-star { color: #34485f; border: 3px solid #34485f; background: #d8bd77; box-shadow: 6px 7px 0 #a98591; }

.guide-card, .control-card, .storage-note {
  border: 2px solid #d6deda;
  background: #f9f7f1;
  box-shadow: 0 7px 0 #dce2df, 0 14px 25px rgba(52, 72, 95, .09);
}

.mascot {
  background:
    radial-gradient(circle at 10% 10%, #73b9b1 0 42px, transparent 43px),
    radial-gradient(circle at 92% 90%, #e49a82 0 55px, transparent 56px),
    radial-gradient(circle at 76% 8%, #e3c55f 0 24px, transparent 25px),
    #deece9;
}

.mascot-body { fill: #f8f5ed; stroke: #34485f; stroke-width: 4; }
.mascot-screen { fill: #34485f; stroke: #67aaa2; }
.mascot-antenna, .mascot-arm, .mascot-leg { stroke: #34485f; }
.mascot-eye { fill: #e7be4f; }
.mascot-cheek { fill: #d77f98; }
.guide-copy { background: linear-gradient(110deg, #f2ead8, #f9f7f1 58%, #e4eeeb); }
.guide-copy span, .control-card .section-heading > span { color: #5d817b; }
.mini-stats div:nth-child(1) { background: #f1dfba; }
.mini-stats div:nth-child(2) { background: #d6eaeb; }
.mini-stats div:nth-child(3) { background: #ebdce4; }
.save-light { background: #62ad8a; box-shadow: 0 0 0 5px rgba(98, 173, 138, .16); }

.dialog::backdrop { background: rgba(52, 72, 95, .50); }
.dialog-card {
  border: 3px solid #34485f;
  background: #f9f7f1;
  box-shadow: 0 9px 0 #7d9fa6, 0 28px 70px rgba(52, 72, 95, .26);
}
.setup-section, .bank-panel { border: 2px solid #d6deda; background: #fcfaf5; }
.unit-option:has(input:checked) { border-color: #5f777f; box-shadow: 0 5px 0 #7d9fa6; background: #fcfaf5; }
.answer-panel { border-color: #7d9fa6; background: #e3eeec; }
.judge-btn.correct { color: #34485f; background: #c99aaa; box-shadow: 0 6px 0 #9f7382; }
.judge-btn.wrong { color: #34485f; background: #dce9e9; box-shadow: 0 5px 0 #7d9fa6; }
.judge-btn.skip { color: #34485f; background: #eee1b7; box-shadow: 0 5px 0 #c3a563; }
.backup-bar { background: #34485f; }
.pause-overlay { background: rgba(52, 72, 95, .84); }
.result-symbol { color: #34485f; background: #d8bd77; box-shadow: 7px 7px 0 #a98591; }

body.large-text .cell-word { font-size: clamp(16px, 1.55vw, 28px); }
body.large-text .cell-direction { display: none; }
body.large-text .guide-card { display: none; }
body.large-text .board-frame { height: calc(100vh - 164px); }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 250px; }
  .guide-card { display: none; }
  .control-tower { gap: 10px; }
  .compact-card { min-height: 0; }
  .board-frame { height: calc(100vh - 168px); }
  .cell-word { font-size: clamp(9px, 1.18vw, 16px); }
}

@media (max-width: 900px) {
  .app-shell { padding: 10px; }
  .topbar { align-items: flex-start; }
  .brand small { display: none; }
  .top-actions .ghost-btn:nth-child(2) { display: none; }
  .workspace { display: flex; flex-direction: column; }
  .control-tower { display: grid; grid-template-columns: 1fr 1fr; }
  .storage-note { grid-column: 1 / -1; }
  .board-frame { height: auto; min-height: 0; padding: 12px; }
  .board { width: 100%; height: auto; max-height: none; aspect-ratio: 1; }
  .setup-grid, .bank-grid { grid-template-columns: 1fr; }
  .unit-section { grid-row: auto; }
  .bank-panel { min-height: 0; }
}

@media (max-width: 640px) {
  .topbar { display: grid; grid-template-columns: 1fr auto; }
  .brand-mark { width: 40px; height: 40px; }
  .brand strong { font-size: 21px; }
  .top-actions { flex-wrap: nowrap; }
  .top-actions .ghost-btn { display: none; }
  .team-strip { grid-template-columns: 1fr 58px 1fr; }
  .team-card { min-height: 66px; padding: 8px; gap: 6px; }
  .team-beacon, .team-card small { display: none; }
  .team-card strong { font-size: 13px; }
  .team-score strong { font-size: 23px; }
  .turn-orbit strong { font-size: 10px; }
  .legend { display: none !important; }
  .board-meta { font-size: 10px; }
  .board { gap: 3px; }
  .word-cell { padding: 3px 2px; border-radius: 6px; box-shadow: 0 2px 0 rgba(104, 135, 137, .62), 0 3px 7px rgba(52, 72, 95, .13); }
  .cell-word { font-size: clamp(7px, 2.5vw, 13px); }
  .cell-direction { top: 2px; right: 2px; min-width: 16px; font-size: 6px; padding: 1px 2px; }
  .control-tower { grid-template-columns: 1fr; }
  .storage-note { grid-column: auto; }
  .unit-picker, .help-steps { grid-template-columns: 1fr; }
  .dialog { padding: 8px; }
  .dialog-card { max-height: calc(100vh - 16px); padding: 18px; border-radius: 20px; }
  .challenge-prompt { font-size: clamp(36px, 13vw, 64px); }
  .judge-actions { gap: 6px; }
  .judge-btn { min-height: 92px; padding: 6px; }
  .judge-btn strong { font-size: 12px; }
  .shortcut-tip { display: none; }
  .backup-bar { grid-template-columns: 1fr 1fr; }
  .backup-bar > div { grid-column: 1 / -1; }
}

/* 课堂主题换装系统：综合色彩由变量统一驱动，游戏内容与布局保持不变 */
:root,
:root[data-theme="sea"] {
  --theme-ink: #294b63;
  --theme-ink-soft: #66808d;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(255, 202, 83, .30), transparent 24%), radial-gradient(circle at 92% 12%, rgba(255, 126, 153, .22), transparent 22%), linear-gradient(135deg, #fff9e9, #f2fbfb 54%, #e9f8fb);
  --theme-dot-bg: radial-gradient(circle, rgba(41, 75, 99, .075) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(54, 170, 162, .10) 0 2px, transparent 2.5px);
  --theme-primary: #36aaa2;
  --theme-primary-hover: #43bbb2;
  --theme-primary-border: #176f73;
  --theme-card: #fffdf7;
  --theme-card-border: #c8dde0;
  --theme-board: linear-gradient(145deg, #bde7ec, #9fd7e1 58%, #86c3d0);
  --theme-board-border: #4f95a7;
  --theme-board-shadow: #4f95a7;
  --theme-board-inset: rgba(235, 252, 252, .65);
  --theme-cell: linear-gradient(165deg, #fffaf0, #f3ecd9);
  --theme-cell-hover: linear-gradient(165deg, #fffdf7, #f8f0dd);
  --theme-cell-text: #294f65;
  --theme-cell-border: rgba(70, 140, 156, .55);
  --theme-cell-shadow: rgba(60, 131, 146, .62);
  --theme-tag-translate: #ed7894;
  --theme-tag-english: #329a98;
  --theme-amber: #ffc85a;
  --theme-amber-deep: #aa681b;
  --theme-amber-card: linear-gradient(110deg, #fff0c5, #fffdf7 58%);
  --theme-aqua: #45c2bd;
  --theme-aqua-deep: #277f86;
  --theme-aqua-card: linear-gradient(250deg, #d8f5f3, #fffdf7 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #52c8c0 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #ff8c78 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f4cb50 0 24px, transparent 25px), #daf5f2;
  --theme-mascot-screen: #45c2bd;
  --theme-mascot-eye: #f4cb50;
  --theme-mascot-cheek: #ef7895;
  --theme-guide: linear-gradient(110deg, #fff2cc, #fffdf7 58%, #def6f4);
  --theme-heading: #268b8b;
  --theme-stat-1: #fff0bd;
  --theme-stat-2: #d7f2f3;
  --theme-stat-3: #f7dfe8;
  --ink: var(--theme-ink);
  --ink-soft: var(--theme-ink-soft);
  --amber: var(--theme-amber);
  --amber-deep: var(--theme-amber-deep);
  --aqua: var(--theme-aqua);
  --aqua-deep: var(--theme-aqua-deep);
  --pink: var(--theme-tag-translate);
}

:root[data-theme="peach"] {
  --theme-ink: #4b4e67;
  --theme-ink-soft: #7e7180;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(255, 194, 108, .34), transparent 24%), radial-gradient(circle at 92% 12%, rgba(238, 111, 143, .25), transparent 22%), linear-gradient(135deg, #fff5e8, #fff9f2 50%, #edf8f5);
  --theme-dot-bg: radial-gradient(circle, rgba(75, 78, 103, .07) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(225, 122, 120, .10) 0 2px, transparent 2.5px);
  --theme-primary: #e17a78; --theme-primary-hover: #ec8b86; --theme-primary-border: #a84d55;
  --theme-card: #fffaf2; --theme-card-border: #ead3c8;
  --theme-board: linear-gradient(145deg, #f5c9bd, #edb0a6 58%, #dc958f); --theme-board-border: #c77975; --theme-board-shadow: #c77975; --theme-board-inset: rgba(255, 239, 228, .62);
  --theme-cell: linear-gradient(165deg, #fffaf0, #f4eadc); --theme-cell-hover: linear-gradient(165deg, #fffdf7, #f9eee2); --theme-cell-text: #4a5266; --theme-cell-border: rgba(183, 115, 112, .48); --theme-cell-shadow: rgba(177, 104, 102, .58);
  --theme-tag-translate: #c85f82; --theme-tag-english: #4d9691;
  --theme-amber: #ffc85c; --theme-amber-deep: #a66a21; --theme-amber-card: linear-gradient(110deg, #ffe8b8, #fffaf2 58%);
  --theme-aqua: #54b8ac; --theme-aqua-deep: #347d79; --theme-aqua-card: linear-gradient(250deg, #d9efea, #fffaf2 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #61bcb1 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #f07f78 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f4c95e 0 24px, transparent 25px), #f9ded5;
  --theme-mascot-screen: #54b8ac; --theme-mascot-eye: #f4c95e; --theme-mascot-cheek: #ec718f;
  --theme-guide: linear-gradient(110deg, #ffe7cb, #fffaf2 58%, #dff1ec); --theme-heading: #bf6465;
  --theme-stat-1: #ffe8b7; --theme-stat-2: #dbeeea; --theme-stat-3: #f4dae3;
}

:root[data-theme="grape"] {
  --theme-ink: #4c486f; --theme-ink-soft: #746f8d;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(244, 199, 86, .28), transparent 24%), radial-gradient(circle at 92% 12%, rgba(227, 116, 166, .22), transparent 22%), linear-gradient(135deg, #faf5ff, #f6f3ff 52%, #edf8f5);
  --theme-dot-bg: radial-gradient(circle, rgba(76, 72, 111, .075) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(117, 111, 195, .10) 0 2px, transparent 2.5px);
  --theme-primary: #756fc3; --theme-primary-hover: #867ed1; --theme-primary-border: #514b96;
  --theme-card: #fdfaf7; --theme-card-border: #d9d0e7;
  --theme-board: linear-gradient(145deg, #d8cdf0, #c2b5e4 58%, #aa9bd3); --theme-board-border: #8779b0; --theme-board-shadow: #8779b0; --theme-board-inset: rgba(247, 241, 255, .58);
  --theme-cell: linear-gradient(165deg, #fffaf2, #f1ece5); --theme-cell-hover: linear-gradient(165deg, #fffdf8, #f7f1eb); --theme-cell-text: #4c4b6a; --theme-cell-border: rgba(130, 115, 170, .50); --theme-cell-shadow: rgba(120, 104, 160, .58);
  --theme-tag-translate: #d16b9b; --theme-tag-english: #4d9c9b;
  --theme-amber: #f4c756; --theme-amber-deep: #966720; --theme-amber-card: linear-gradient(110deg, #fbeab8, #fdfaf7 58%);
  --theme-aqua: #55b8b0; --theme-aqua-deep: #397d7d; --theme-aqua-card: linear-gradient(250deg, #d9efea, #fdfaf7 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #70bcb4 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #e680a8 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f0c957 0 24px, transparent 25px), #ece6fa;
  --theme-mascot-screen: #6bafa9; --theme-mascot-eye: #f0c957; --theme-mascot-cheek: #e374a6;
  --theme-guide: linear-gradient(110deg, #f5e8c9, #fdfaf7 58%, #e2f1ed); --theme-heading: #756bb0;
  --theme-stat-1: #f7e7b7; --theme-stat-2: #dbeeea; --theme-stat-3: #f0dce8;
}

:root[data-theme="lime"] {
  --theme-ink: #365952; --theme-ink-soft: #698078;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(245, 198, 78, .34), transparent 24%), radial-gradient(circle at 92% 12%, rgba(231, 117, 136, .20), transparent 22%), linear-gradient(135deg, #fff9e9, #f6faed 52%, #eaf7f2);
  --theme-dot-bg: radial-gradient(circle, rgba(54, 89, 82, .075) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(73, 169, 143, .10) 0 2px, transparent 2.5px);
  --theme-primary: #49a98f; --theme-primary-hover: #58ba9f; --theme-primary-border: #277866;
  --theme-card: #fffdf4; --theme-card-border: #d4e0c5;
  --theme-board: linear-gradient(145deg, #d0e5b9, #b8d69f 58%, #9fc484); --theme-board-border: #6d9b63; --theme-board-shadow: #6d9b63; --theme-board-inset: rgba(247, 251, 223, .62);
  --theme-cell: linear-gradient(165deg, #fffbea, #f2ebd3); --theme-cell-hover: linear-gradient(165deg, #fffef4, #f8f0d8); --theme-cell-text: #365950; --theme-cell-border: rgba(100, 149, 90, .48); --theme-cell-shadow: rgba(91, 141, 83, .58);
  --theme-tag-translate: #df7185; --theme-tag-english: #35968c;
  --theme-amber: #f5c64e; --theme-amber-deep: #9a681c; --theme-amber-card: linear-gradient(110deg, #ffedb8, #fffdf4 58%);
  --theme-aqua: #3fb3a5; --theme-aqua-deep: #2b7d74; --theme-aqua-card: linear-gradient(250deg, #d9f1e8, #fffdf4 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #54bdb0 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #ef8a78 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f5c64e 0 24px, transparent 25px), #e2f2dc;
  --theme-mascot-screen: #46aa9f; --theme-mascot-eye: #f5c64e; --theme-mascot-cheek: #e77588;
  --theme-guide: linear-gradient(110deg, #fff0c5, #fffdf4 58%, #dcf1e8); --theme-heading: #3b8d76;
  --theme-stat-1: #ffedb6; --theme-stat-2: #d9efe8; --theme-stat-3: #f4dce2;
}

:root[data-theme="blueberry"] {
  --theme-ink: #29476b; --theme-ink-soft: #667998;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(255, 201, 89, .27), transparent 24%), radial-gradient(circle at 92% 12%, rgba(232, 123, 158, .22), transparent 22%), linear-gradient(135deg, #f8fbff, #eef4ff 52%, #f8f0f7);
  --theme-dot-bg: radial-gradient(circle, rgba(41, 71, 107, .075) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(90, 128, 202, .10) 0 2px, transparent 2.5px);
  --theme-primary: #5a80ca; --theme-primary-hover: #6b91da; --theme-primary-border: #355a9b;
  --theme-card: #fbfcff; --theme-card-border: #ced9ea;
  --theme-board: linear-gradient(145deg, #c5d8f1, #abc4e8 58%, #91acd8); --theme-board-border: #6685b8; --theme-board-shadow: #6685b8; --theme-board-inset: rgba(239, 245, 255, .64);
  --theme-cell: linear-gradient(165deg, #fffaf1, #f1ecdf); --theme-cell-hover: linear-gradient(165deg, #fffdf8, #f7f1e5); --theme-cell-text: #2f4e70; --theme-cell-border: rgba(94, 125, 174, .50); --theme-cell-shadow: rgba(86, 116, 164, .58);
  --theme-tag-translate: #e27695; --theme-tag-english: #4b9ca2;
  --theme-amber: #f1bd52; --theme-amber-deep: #99691d; --theme-amber-card: linear-gradient(110deg, #fbe9b7, #fbfcff 58%);
  --theme-aqua: #62a9b6; --theme-aqua-deep: #3b7580; --theme-aqua-card: linear-gradient(250deg, #dceef2, #fbfcff 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #71b9c5 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #ea8ca4 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f1c75a 0 24px, transparent 25px), #e1ecfa;
  --theme-mascot-screen: #62a9b6; --theme-mascot-eye: #f1c75a; --theme-mascot-cheek: #e27695;
  --theme-guide: linear-gradient(110deg, #f8e8bc, #fbfcff 58%, #e2eef6); --theme-heading: #5276b6;
  --theme-stat-1: #f9e8b6; --theme-stat-2: #dcecf1; --theme-stat-3: #f0dce6;
}

:root[data-theme="sunshine"] {
  --theme-ink: #36566a; --theme-ink-soft: #6e7f88;
  --theme-page-bg: radial-gradient(circle at 6% 8%, rgba(245, 184, 68, .33), transparent 24%), radial-gradient(circle at 92% 12%, rgba(239, 119, 105, .20), transparent 22%), linear-gradient(135deg, #fff8e7, #fffaf1 52%, #eaf7fb);
  --theme-dot-bg: radial-gradient(circle, rgba(54, 86, 106, .075) 0 1.4px, transparent 1.8px), radial-gradient(circle, rgba(78, 159, 196, .10) 0 2px, transparent 2.5px);
  --theme-primary: #4e9fc4; --theme-primary-hover: #5eafd1; --theme-primary-border: #2d7192;
  --theme-card: #fffaf0; --theme-card-border: #ead9bd;
  --theme-board: linear-gradient(145deg, #f5d9a4, #ebc47f 58%, #dda85e); --theme-board-border: #bf843f; --theme-board-shadow: #bf843f; --theme-board-inset: rgba(255, 245, 214, .64);
  --theme-cell: linear-gradient(165deg, #fffdf4, #f4ead3); --theme-cell-hover: linear-gradient(165deg, #fffef8, #f9f0dc); --theme-cell-text: #36566a; --theme-cell-border: rgba(185, 135, 67, .48); --theme-cell-shadow: rgba(177, 125, 55, .58);
  --theme-tag-translate: #de6e83; --theme-tag-english: #3d9290;
  --theme-amber: #efab43; --theme-amber-deep: #98611c; --theme-amber-card: linear-gradient(110deg, #ffe4ad, #fffaf0 58%);
  --theme-aqua: #4ba7b3; --theme-aqua-deep: #2f7783; --theme-aqua-card: linear-gradient(250deg, #d9edf0, #fffaf0 58%);
  --theme-mascot: radial-gradient(circle at 10% 10%, #5ab7b0 0 42px, transparent 43px), radial-gradient(circle at 92% 90%, #f0806b 0 55px, transparent 56px), radial-gradient(circle at 76% 8%, #f5c54f 0 24px, transparent 25px), #faebc6;
  --theme-mascot-screen: #4ba7b3; --theme-mascot-eye: #f5c54f; --theme-mascot-cheek: #e9798d;
  --theme-guide: linear-gradient(110deg, #ffe8b8, #fffaf0 58%, #dceef1); --theme-heading: #3f86a5;
  --theme-stat-1: #ffe3a7; --theme-stat-2: #d8ecef; --theme-stat-3: #f2dce1;
}

body { color: var(--theme-ink); background: var(--theme-page-bg); }
body::before { background-image: var(--theme-dot-bg); }
.brand strong { color: var(--theme-ink); }
.brand small { color: var(--theme-ink-soft); }
.brand-mark rect { fill: var(--theme-card); stroke: var(--theme-ink); }
.brand-mark circle:first-of-type { fill: var(--theme-tag-translate); }
.brand-mark circle:last-of-type { fill: var(--theme-aqua); }
.brand-mark path:first-of-type { fill: var(--theme-amber); stroke: var(--theme-ink); }
.brand-mark path:last-of-type { stroke: var(--theme-ink); }
.brand-mark { filter: drop-shadow(0 5px 0 color-mix(in srgb, var(--theme-aqua) 32%, transparent)); }

.primary-btn { color: #fff; background: var(--theme-primary); border-color: var(--theme-primary-border); box-shadow: 0 6px 0 var(--theme-primary-border), 0 11px 20px color-mix(in srgb, var(--theme-primary-border) 24%, transparent); }
.primary-btn:hover:not(:disabled) { background: var(--theme-primary-hover); box-shadow: 0 8px 0 var(--theme-primary-border), 0 14px 23px color-mix(in srgb, var(--theme-primary-border) 27%, transparent); }
.soft-btn,.ghost-btn { color: var(--theme-ink); background: var(--theme-card); border-color: var(--theme-card-border); box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-card-border) 70%, #d9dddd); }
.soft-btn:hover:not(:disabled),.ghost-btn:hover:not(:disabled) { color: var(--theme-ink); border-color: var(--theme-primary-border); background: color-mix(in srgb, var(--theme-card) 86%, #fff); }

.team-card { border-color: var(--theme-card-border); background: var(--theme-card); box-shadow: 0 7px 0 color-mix(in srgb, var(--theme-card-border) 60%, #d8dddd), 0 13px 24px rgba(41, 71, 92, .09); }
.team-card.amber { color: var(--theme-amber-deep); background: var(--theme-amber-card); }
.team-card.aqua { color: var(--theme-aqua-deep); background: var(--theme-aqua-card); }
.team-card.amber.active { border-color: var(--theme-amber-deep); box-shadow: 0 7px 0 var(--theme-amber), 0 14px 25px color-mix(in srgb, var(--theme-amber-deep) 20%, transparent); }
.team-card.aqua.active { border-color: var(--theme-aqua-deep); box-shadow: 0 7px 0 var(--theme-aqua), 0 14px 25px color-mix(in srgb, var(--theme-aqua-deep) 20%, transparent); }
.team-card.amber .team-beacon,.turn-orbit.amber .orbit-dot,.team-turn-dot { background: var(--theme-amber); }
.team-card.aqua .team-beacon,.turn-orbit.aqua .orbit-dot,.team-turn-dot.aqua { background: var(--theme-aqua); }
.status-chip.playing { color: var(--theme-aqua-deep); background: color-mix(in srgb, var(--theme-aqua) 20%, #fff); }
.legend-en { background: var(--theme-tag-translate); }.legend-zh { background: var(--theme-tag-english); }

.board-frame { border-color: var(--theme-board-border); background: var(--theme-board); box-shadow: 0 8px 0 var(--theme-board-shadow), 0 22px 48px rgba(41, 71, 92, .16), inset 0 0 0 8px var(--theme-board-inset); }
.word-cell,.word-cell[data-direction="zh-en"] { color: var(--theme-cell-text); border-color: var(--theme-cell-border); background: var(--theme-cell); box-shadow: 0 4px 0 var(--theme-cell-shadow), 0 8px 14px rgba(41, 71, 92, .11); }
.word-cell:hover:not(:disabled) { border-color: var(--theme-board-border); background: var(--theme-cell-hover); box-shadow: 0 6px 0 var(--theme-cell-shadow), 0 13px 20px rgba(41, 71, 92, .15); }
.cell-direction { background: var(--theme-tag-translate); }.word-cell[data-direction="zh-en"] .cell-direction { background: var(--theme-tag-english); }
.word-cell.owner-amber { color: #493e2e; background: linear-gradient(165deg, color-mix(in srgb, var(--theme-amber) 45%, #fff), var(--theme-amber)); border-color: var(--theme-amber-deep); box-shadow: 0 4px 0 var(--theme-amber-deep), 0 9px 16px rgba(76, 61, 41, .14); }
.word-cell.owner-aqua { color: #23464c; background: linear-gradient(165deg, color-mix(in srgb, var(--theme-aqua) 48%, #fff), var(--theme-aqua)); border-color: var(--theme-aqua-deep); box-shadow: 0 4px 0 var(--theme-aqua-deep), 0 9px 16px rgba(41, 71, 92, .14); }

.guide-card,.control-card,.storage-note { border-color: var(--theme-card-border); background: var(--theme-card); box-shadow: 0 7px 0 color-mix(in srgb, var(--theme-card-border) 60%, #d8dddd), 0 14px 25px rgba(41, 71, 92, .09); }
.mascot { background: var(--theme-mascot); }
.mascot-body { fill: var(--theme-card); stroke: var(--theme-ink); }
.mascot-screen { fill: var(--theme-ink); stroke: var(--theme-mascot-screen); }
.mascot-antenna,.mascot-arm,.mascot-leg { stroke: var(--theme-ink); }
.mascot-eye,.mascot-star { fill: var(--theme-mascot-eye); }.mascot-cheek { fill: var(--theme-mascot-cheek); }
.guide-copy { background: var(--theme-guide); }.guide-copy span,.control-card .section-heading>span { color: var(--theme-heading); }
.mini-stats div:nth-child(1) { background: var(--theme-stat-1); }.mini-stats div:nth-child(2) { background: var(--theme-stat-2); }.mini-stats div:nth-child(3) { background: var(--theme-stat-3); }
.save-light { background: var(--theme-aqua); box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-aqua) 18%, transparent); }
.dialog-card { color: var(--theme-ink); border-color: var(--theme-ink); background: var(--theme-card); box-shadow: 0 9px 0 var(--theme-aqua), 0 28px 70px rgba(41, 71, 92, .25); }
.setup-section,.bank-panel { border-color: var(--theme-card-border); background: color-mix(in srgb, var(--theme-card) 90%, #fff); }
.answer-panel { border-color: var(--theme-aqua); background: color-mix(in srgb, var(--theme-aqua) 20%, #fff); }
.backup-bar { background: var(--theme-ink); }
.pause-overlay { background: color-mix(in srgb, var(--theme-ink) 13%, transparent); }
.result-symbol { color: var(--theme-ink); background: var(--theme-amber); box-shadow: 7px 7px 0 var(--theme-tag-translate); }
.result-symbol.celebration { width: auto; height: auto; margin-bottom: 12px; color: inherit; border-radius: 0; background: transparent; box-shadow: none; font-size: clamp(66px, 7vw, 92px); line-height: 1; transform: none; }

/* 主题选择面板 */
.theme-dialog-card { width: min(980px, 100%); padding: 28px; }
.theme-dialog-card .dialog-header { margin-bottom: 20px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.theme-option { position: relative; display: grid; gap: 11px; min-width: 0; padding: 10px 10px 14px; color: var(--theme-ink); text-align: left; border: 2px solid var(--theme-card-border); border-radius: 18px; background: #fffdfa; box-shadow: 0 6px 0 color-mix(in srgb, var(--theme-card-border) 70%, #d9dddd); cursor: pointer; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); }
.theme-option:hover { transform: translateY(-3px); border-color: var(--theme-primary); box-shadow: 0 8px 0 color-mix(in srgb, var(--theme-primary) 35%, #d9dddd); }
.theme-option.selected { border-color: var(--theme-primary-border); box-shadow: 0 7px 0 var(--theme-primary), 0 13px 22px color-mix(in srgb, var(--theme-primary) 18%, transparent); }
.theme-option.selected::after { content: "✓ 已选"; position: absolute; right: 12px; top: 12px; z-index: 3; padding: 4px 8px; border-radius: 999px; color: #fff; background: var(--theme-primary); font-size: 10px; font-weight: 900; }
.theme-preview { --preview-board:#9fd7e1; --preview-tile:#fffaf0; --preview-ink:#294f65; --preview-a1:#52c8c0; --preview-a2:#ff8c78; --preview-a3:#f4cb50; position: relative; display: block; height: 105px; overflow: hidden; border-radius: 14px; background: var(--preview-board); }
.theme-preview i,.theme-preview em { position: absolute; display: block; border-radius: 50%; }
.theme-preview i { width: 62px; height: 62px; left: -18px; top: -20px; background: var(--preview-a1); }
.theme-preview em:nth-of-type(1) { width: 32px; height: 32px; right: 14px; top: -8px; background: var(--preview-a3); }
.theme-preview em:nth-of-type(2) { width: 55px; height: 55px; right: -16px; bottom: -18px; background: var(--preview-a2); }
.theme-preview em:nth-of-type(3) { width: 14px; height: 14px; left: 32%; bottom: 12px; background: var(--preview-a3); }
.theme-preview b { position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; padding: 11px 6px; transform: translate(-50%, -50%) rotate(-2deg); color: var(--preview-ink); border: 3px solid var(--preview-ink); border-radius: 11px; background: var(--preview-tile); box-shadow: 5px 5px 0 var(--preview-a2); font-size: 20px; text-align: center; }
.theme-option[data-theme-choice="peach"] .theme-preview { --preview-board:#edb0a6; --preview-tile:#fffaf0; --preview-ink:#4a5266; --preview-a1:#61bcb1; --preview-a2:#f07f78; --preview-a3:#f4c95e; }
.theme-option[data-theme-choice="grape"] .theme-preview { --preview-board:#c2b5e4; --preview-tile:#fffaf2; --preview-ink:#4c4b6a; --preview-a1:#70bcb4; --preview-a2:#e680a8; --preview-a3:#f0c957; }
.theme-option[data-theme-choice="lime"] .theme-preview { --preview-board:#b8d69f; --preview-tile:#fffbea; --preview-ink:#365950; --preview-a1:#54bdb0; --preview-a2:#ef8a78; --preview-a3:#f5c64e; }
.theme-option[data-theme-choice="blueberry"] .theme-preview { --preview-board:#abc4e8; --preview-tile:#fffaf1; --preview-ink:#2f4e70; --preview-a1:#71b9c5; --preview-a2:#ea8ca4; --preview-a3:#f1c75a; }
.theme-option[data-theme-choice="sunshine"] .theme-preview { --preview-board:#ebc47f; --preview-tile:#fffdf4; --preview-ink:#36566a; --preview-a1:#5ab7b0; --preview-a2:#f0806b; --preview-a3:#f5c54f; }
.theme-option-copy { display: grid; gap: 4px; padding: 0 3px; }
.theme-option-copy strong { font-size: 16px; }.theme-option-copy small { color: var(--theme-ink-soft); font-size: 11px; }
.theme-recommend,.theme-new { position: absolute; left: 12px; top: 12px; z-index: 3; padding: 4px 8px; border-radius: 999px; color: #fff; background: #e77588; font-size: 9px; font-weight: 900; }
.theme-new { background: #5b85c8; }
.theme-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding-top: 17px; border-top: 2px dashed var(--theme-card-border); }
.theme-footer > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 7px; color: var(--theme-ink-soft); font-size: 13px; }
.theme-footer strong { color: var(--theme-ink); font-size: 17px; }.theme-footer small { grid-column: 1 / -1; }

/* 开局语言：整局统一英文或统一中文 */
.language-picker { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.language-picker legend { margin-bottom: 8px; color: var(--theme-ink-soft); font-size: 11px; font-weight: 900; }
.language-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.language-choice { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 82px; padding: 11px; color: var(--theme-ink); border: 2px solid var(--theme-card-border); border-radius: 15px; background: var(--theme-card); box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-card-border) 70%, #d9dddd); cursor: pointer; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed), background var(--speed); }
.language-choice:hover { transform: translateY(-2px); border-color: var(--theme-primary); }
.language-choice:has(input:checked) { border-color: var(--theme-primary-border); background: color-mix(in srgb, var(--theme-primary) 9%, var(--theme-card)); box-shadow: 0 5px 0 var(--theme-primary), 0 9px 15px color-mix(in srgb, var(--theme-primary) 15%, transparent); }
.language-choice:focus-within { outline: 3px solid color-mix(in srgb, var(--theme-primary) 32%, transparent); outline-offset: 3px; }
.language-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.language-symbol { display: grid; place-items: center; width: 48px; height: 44px; color: #fff; border-radius: 12px; background: var(--theme-tag-translate); box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-tag-translate) 65%, var(--theme-ink)); font-size: 14px; font-weight: 950; }
.language-symbol.chinese { background: var(--theme-tag-english); box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-tag-english) 65%, var(--theme-ink)); }
.language-copy { display: grid; gap: 4px; min-width: 0; padding-top: 13px; }
.language-copy strong { font-size: 14px; }.language-copy small { color: var(--theme-ink-soft); font-size: 9px; line-height: 1.35; }
.language-route { position: absolute; top: 8px; right: 9px; color: var(--theme-primary-border); font-size: 9px; font-weight: 950; }

/* 游戏首页 */
.home-view { display: grid; min-height: max(560px, calc(100svh - 125px)); }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); align-items: stretch; min-height: max(560px, calc(100svh - 125px)); overflow: hidden; border: 3px solid var(--theme-ink); border-radius: 32px; background: linear-gradient(125deg, var(--theme-card) 0 58%, color-mix(in srgb, var(--theme-primary) 19%, var(--theme-card)) 58% 100%); box-shadow: 0 10px 0 var(--theme-aqua), 0 28px 60px rgba(41, 71, 92, .16); }
.home-hero::before { content: ""; position: absolute; left: -80px; bottom: -160px; width: 390px; height: 390px; border: 2px solid color-mix(in srgb, var(--theme-primary) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 54px color-mix(in srgb, var(--theme-primary) 5%, transparent), 0 0 0 108px color-mix(in srgb, var(--theme-primary) 3%, transparent); }
.home-hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(42px, 5.5vw, 86px); }
.home-hero-copy h1 { max-width: 760px; margin: 10px 0 20px; color: var(--theme-ink); font-size: clamp(42px, 5.2vw, 78px); line-height: 1.06; letter-spacing: -.035em; }
.home-hero-copy > p { max-width: 690px; margin: 0; color: var(--theme-ink-soft); font-size: clamp(14px, 1.2vw, 19px); line-height: 1.85; }
.home-actions { display: flex; gap: 13px; margin-top: 32px; }
.home-actions button { min-width: 148px; }
.home-visual { position: relative; min-height: 510px; overflow: hidden; }
.home-visual::before,.home-visual::after { content: ""; position: absolute; border-radius: 50%; }
.home-visual::before { width: 330px; height: 330px; right: -115px; top: -110px; background: var(--theme-amber); opacity: .82; }
.home-visual::after { width: 230px; height: 230px; right: 55%; bottom: -115px; background: var(--theme-tag-translate); opacity: .82; }
.home-planet { position: absolute; z-index: 1; display: block; border-radius: 50%; background: var(--theme-aqua); }
.planet-one { width: 92px; height: 92px; left: 12%; top: 10%; }.planet-two { width: 44px; height: 44px; right: 15%; bottom: 18%; background: var(--theme-amber); }
.home-word-card { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: min(340px, 72%); min-height: clamp(245px, 32svh, 335px); transform: translate(-50%, -50%) rotate(-3deg); color: var(--theme-ink); border: 4px solid var(--theme-ink); border-radius: 31px; background: var(--theme-card); box-shadow: 13px 14px 0 var(--theme-tag-translate), 23px 27px 0 color-mix(in srgb, var(--theme-primary) 62%, transparent); }
.home-word-card small { color: var(--theme-primary-border); font-size: 11px; font-weight: 950; letter-spacing: .2em; }.home-word-card strong { margin: -20px 0; font-size: clamp(64px, 7vw, 104px); }.home-word-card span { font-size: 15px; font-weight: 900; }
.home-visual i { position: absolute; z-index: 4; color: #fff; font-size: 30px; font-style: normal; }.home-visual i:nth-of-type(1) { left: 11%; bottom: 22%; }.home-visual i:nth-of-type(2) { right: 10%; top: 22%; color: var(--theme-amber); }.home-visual i:nth-of-type(3) { right: 12%; bottom: 9%; }
body.home-mode #home-btn { display: none; }
body.home-mode #control-rail { display: none; }
.level-dialog-card { width: min(1020px, 100%); padding: 28px; }
.level-dialog-card .dialog-header { margin-bottom: 20px; }
.level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.level-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 15px 12px; min-width: 0; min-height: 205px; padding: 18px; color: var(--theme-ink); text-align: left; border: 2px solid var(--theme-card-border); border-radius: 20px; background: var(--theme-card); box-shadow: 0 5px 0 color-mix(in srgb, var(--theme-card-border) 68%, #d9dddd); cursor: pointer; transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed); }
.level-card:hover { transform: translateY(-4px); border-color: var(--theme-primary); box-shadow: 0 8px 0 color-mix(in srgb, var(--theme-primary) 42%, #d9dddd), 0 14px 23px color-mix(in srgb, var(--theme-primary) 14%, transparent); }
.level-card.recommended { border-color: var(--theme-primary-border); background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-card)); box-shadow: 0 6px 0 var(--theme-primary); }
.level-card em { position: absolute; right: 12px; top: 12px; padding: 4px 8px; color: #fff; border-radius: 999px; background: var(--theme-tag-translate); font-size: 9px; font-style: normal; font-weight: 950; }
.level-number { align-self: start; color: var(--theme-ink-soft); font-size: 10px; font-weight: 950; letter-spacing: .16em; }.level-size { display: grid; justify-items: end; }.level-size strong { font-size: 25px; line-height: 1; }.level-size small { margin-top: 4px; color: var(--theme-primary-border); font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.level-copy { grid-column: 1 / -1; display: grid; align-content: end; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--theme-card-border); }.level-copy strong { font-size: 20px; }.level-copy small { min-height: 32px; color: var(--theme-ink-soft); font-size: 10px; line-height: 1.55; }
.level-arrow { grid-column: 1 / -1; align-self: end; color: var(--theme-primary-border); font-size: 11px; font-weight: 950; }

/* 81/100 词挑战局：压缩对战条，把屏幕高度优先留给完整棋盘。 */
body.dense-board .guide-card { display: none; }
body.dense-board .team-strip { grid-template-columns: minmax(180px, 1fr) 104px minmax(180px, 1fr); gap: 8px; margin-bottom: 6px; }
body.dense-board .team-card { min-height: 54px; gap: 9px; padding: 7px 13px; border-radius: 16px; }
body.dense-board .team-card::before { width: 4px; }
body.dense-board .team-card small, body.dense-board .team-score span { display: none; }
body.dense-board .team-card strong { font-size: 16px; }
body.dense-board .team-beacon { width: 26px; height: 26px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.45); font-size: 11px; }
body.dense-board .team-score strong { font-size: 24px; }
body.dense-board .turn-orbit { display: flex; align-items: center; justify-content: center; }
body.dense-board .turn-orbit strong { font-size: 20px; line-height: 1; }
body.dense-board .board-meta { min-height: 27px; padding: 0 2px 4px; }
body.dense-board .status-chip { padding: 4px 8px; font-size: 11px; }
body.dense-board .board-frame { height: calc(100svh - 230px); padding: clamp(7px, .75vw, 11px); }
.board[data-size="9"],.board[data-size="10"] { gap: clamp(2px, .28vw, 5px); }
.board[data-size="9"] .word-cell,.board[data-size="10"] .word-cell { padding: 4px 3px; border-width: 1px; border-radius: clamp(5px, .55vw, 9px); box-shadow: 0 3px 0 var(--theme-cell-shadow), 0 5px 9px rgba(41, 71, 92, .10); }
.board[data-size="9"] .cell-word { font-size: clamp(11px, 1.12vw, 18px); }
.board[data-size="10"] .cell-word { font-size: clamp(10px, .92vw, 15px); white-space: nowrap; overflow-wrap: normal; }
.board[data-size="9"] .cell-direction,.board[data-size="10"] .cell-direction { display: none; }

/* 课堂工具收纳栏：桌面端让词格棋盘成为第一视觉，控制与记录按需展开。 */
@media (min-width: 901px) {
  .workspace { position: relative; grid-template-columns: minmax(0, 1fr); }
  .control-tower { position: absolute; z-index: 12; top: 112px; right: 12px; display: block; width: min(300px, calc(100% - 24px)); pointer-events: none; }
  .control-rail { z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-height: 42px; padding: 8px 15px; color: #fff; border: 2px solid var(--theme-primary-border); border-radius: 12px; background: linear-gradient(135deg, var(--theme-primary-border), var(--theme-primary)); box-shadow: 0 5px 0 color-mix(in srgb, var(--theme-primary-border) 78%, var(--theme-ink)), 0 10px 19px color-mix(in srgb, var(--theme-primary) 24%, transparent); cursor: pointer; pointer-events: auto; transition: transform var(--speed), background var(--speed), box-shadow var(--speed); }
  .control-rail:hover, .control-rail[aria-expanded="true"] { transform: translateY(-2px); background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-border)); box-shadow: 0 7px 0 color-mix(in srgb, var(--theme-primary-border) 78%, var(--theme-ink)), 0 14px 24px color-mix(in srgb, var(--theme-primary) 30%, transparent); }
  .control-rail-icon { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; border-radius: 8px; background: rgba(255,255,255,.19); font-size: 13px; line-height: 1; }
  .control-rail > span:not(.control-rail-icon) { font-size: 11px; font-weight: 900; }
  .control-drawer { display: flex; flex-direction: column; gap: 10px; width: 100%; max-height: calc(100svh - 190px); padding: 12px; overflow: auto; visibility: hidden; color: var(--theme-ink); border: 2px solid var(--theme-card-border); border-radius: 20px; background: color-mix(in srgb, var(--theme-card) 93%, #fff); box-shadow: 0 8px 0 color-mix(in srgb, var(--theme-card-border) 68%, #d9dddd), 0 18px 36px rgba(41, 71, 92, .18); opacity: 0; pointer-events: none; transform: translateX(22px); transition: opacity var(--speed), transform var(--speed), visibility 0s linear var(--speed); }
  .control-tower.is-open .control-drawer { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition: opacity var(--speed), transform var(--speed); }
  .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--theme-card-border); }
  .drawer-header > div { display: grid; gap: 2px; }.drawer-header strong { color: var(--theme-heading); font-size: 17px; }.drawer-header small { color: var(--theme-ink-soft); font-size: 10px; }
  .drawer-close { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; color: var(--theme-ink); border: 1px solid var(--theme-card-border); border-radius: 9px; background: var(--theme-card); font-size: 21px; line-height: 1; cursor: pointer; }
  .drawer-close:hover { color: #fff; background: var(--theme-primary); }
  .drawer-guide { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px; border-radius: 12px; background: var(--theme-guide); }
  .drawer-guide-orbit { display: grid; place-items: center; width: 34px; height: 34px; color: var(--theme-primary-border); border-radius: 11px; background: var(--theme-card); font-size: 19px; box-shadow: 0 3px 0 color-mix(in srgb, var(--theme-primary) 24%, #d9dddd); }
  .drawer-guide strong { color: var(--theme-heading); font-size: 11px; }.drawer-guide p { margin: 4px 0 0; color: var(--theme-ink-soft); font-size: 10px; line-height: 1.45; }
  .control-drawer .control-card, .control-drawer .storage-note { flex: 0 0 auto; padding: 11px; border-radius: 14px; }
  .control-drawer .section-heading { margin-bottom: 8px; }.control-drawer .section-heading > span { font-size: 13px; }.control-drawer .section-heading small { font-size: 9px; }
  .control-drawer .control-grid { gap: 6px; }.control-drawer .control-grid button { min-height: 37px; font-size: 12px; }.control-drawer .mini-stats div { padding: 7px 2px; }.control-drawer .mini-stats span { font-size: 16px; }.control-drawer .wrong-list { max-height: 82px; margin-top: 7px; }.control-drawer .wrong-chip { padding: 6px; font-size: 10px; }
  .control-drawer .storage-note { gap: 8px; }.control-drawer .storage-note strong { font-size: 11px; }.control-drawer .storage-note small { font-size: 9px; }
}

@media (max-width: 900px) {
  .top-actions .ghost-btn:nth-child(2) { display: inline-flex; }
  #fullscreen-btn { display: none; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-rail { display: none; }
  .control-drawer { display: contents; }
  .drawer-header, .drawer-guide, .drawer-close { display: none; }
  body.dense-board .board-frame { height: auto; padding: 8px; }
  .board[data-size="10"] .cell-word { white-space: normal; overflow-wrap: anywhere; }
  .home-view,.home-hero { min-height: max(720px, calc(100svh - 103px)); }
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-copy { padding: 36px; }
  .home-visual { min-height: 330px; }
  .level-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .file-row { grid-template-columns: 1fr; }
  .file-upload-actions { align-items: stretch; flex-direction: column; }
  .file-row input, .sample-file-link { width: 100%; }
  body.dense-board .team-strip { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 4px; }
  body.dense-board .team-card { min-width: 0; padding-inline: 7px; }
  .top-actions #theme-btn { display: inline-flex; min-height: 38px; padding: 7px 10px; }
  body.home-mode .top-actions #level-btn { display: inline-flex; min-height: 38px; padding: 7px 10px; }
  body:not(.home-mode) .top-actions #level-btn { display: none; }
  .theme-dialog-card { padding: 16px; }
  .theme-dialog-card .dialog-header h2 { max-width: 280px; padding-right: 34px; font-size: clamp(23px, 6.8vw, 27px); line-height: 1.16; text-wrap: balance; }
  .theme-grid { grid-template-columns: 1fr; }
  .bank-panel-heading { align-items: stretch; flex-direction: column; }
  .unit-create-actions { grid-template-columns: 1fr; }
  .theme-preview { height: 88px; }
  .theme-footer { align-items: stretch; flex-direction: column; }
  .theme-footer .primary-btn { width: 100%; }
  .language-options { grid-template-columns: 1fr; }
  .home-view { min-height: 0; }
  .home-hero { min-height: 0; border-radius: 23px; }
  .home-hero-copy { padding: 28px 22px 34px; }
  .home-hero-copy h1 { font-size: clamp(35px, 12vw, 51px); }
  .home-actions { align-items: stretch; flex-direction: column; }
  .home-actions button { width: 100%; }
  .home-visual { min-height: 290px; }
  .home-word-card { width: min(265px, 68%); min-height: 225px; }
  .home-word-card strong { font-size: clamp(52px, 16vw, 84px); }
  .level-dialog-card { padding: 16px; }
  .level-dialog-card .dialog-header h2 { max-width: 260px; padding-right: 34px; font-size: clamp(23px, 6.8vw, 27px); line-height: 1.16; }
  .level-grid { grid-template-columns: 1fr; }
  .level-card { min-height: 154px; }
  body:not(.home-mode) .top-actions #home-btn { display: inline-flex; min-height: 38px; padding: 7px 10px; }
  body:not(.home-mode) .top-actions #theme-btn { display: none; }
  body.home-mode .top-actions #theme-btn { display: inline-flex; }
}

/* 题库校对、错词复习和开局词表预览 */
.setup-preview-section { grid-column: 1 / -1; }
.setup-preview-copy { margin: -2px 0 10px; color: var(--theme-ink-soft); font-size: 11px; line-height: 1.55; }
.setup-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.setup-preview-actions small { color: var(--theme-primary-border); font-size: 10px; font-weight: 800; }
.setup-preview-list,.setup-omitted-list { display: flex; flex-wrap: wrap; gap: 7px; max-height: 144px; overflow: auto; padding: 2px; }
.preview-word { display: inline-flex; align-items: center; gap: 4px; min-height: 29px; padding: 5px 8px; color: var(--theme-ink); border: 1px solid var(--theme-card-border); border-radius: 9px; background: var(--theme-card); font-size: 11px; font-weight: 800; }
.preview-word.priority { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 11%, var(--theme-card)); }
.preview-word em { padding: 2px 4px; color: #fff; border-radius: 5px; background: var(--theme-primary); font-size: 8px; font-style: normal; }
.setup-preview-empty { width: 100%; margin: 7px 0; color: var(--theme-ink-soft); font-size: 11px; text-align: center; }
.setup-omitted { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--theme-card-border); }
.setup-omitted summary { color: var(--theme-ink-soft); font-size: 11px; font-weight: 800; cursor: pointer; }
.setup-omitted-list { margin-top: 10px; max-height: 112px; }

.review-panel { min-width: 0; }
.review-toolbar { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 11px; }
.review-toolbar .field-label { margin: 0; }
.review-toolbar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.review-toolbar button { min-height: 39px; }
.wrong-book-list { display: grid; gap: 7px; min-height: 202px; max-height: 270px; overflow: auto; }
.wrong-book-list > p { align-self: center; margin: 0; color: var(--theme-ink-soft); font-size: 11px; line-height: 1.6; text-align: center; }
.wrong-book-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--theme-card-border); border-radius: 12px; background: color-mix(in srgb, var(--theme-card) 92%, #fff); }
.wrong-book-row > div { display: grid; gap: 3px; min-width: 0; }
.wrong-book-row strong { overflow: hidden; color: var(--theme-heading); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wrong-book-row small { overflow: hidden; color: var(--theme-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wrong-book-row > span { min-width: 34px; padding: 7px 5px; color: #fff; border-radius: 9px; background: var(--theme-primary); font-size: 11px; font-weight: 950; text-align: center; }
.review-note { margin: 10px 0 0; color: var(--theme-ink-soft); font-size: 10px; line-height: 1.5; }

.bank-unit { grid-template-columns: auto minmax(0, 1fr) auto; }
.bank-unit-actions { display: flex; align-items: center; gap: 7px; }
.bank-unit .bank-unit-actions button { min-height: 30px; padding: 5px 8px; color: var(--theme-primary-border); border: 1px solid var(--theme-card-border); border-radius: 8px; background: var(--theme-card); font-size: 10px; font-weight: 900; }
.bank-unit .bank-unit-actions button:hover { color: #fff; border-color: var(--theme-primary-border); background: var(--theme-primary); }
.bank-unit .bank-unit-actions .delete-unit-btn { color: var(--theme-danger, #a34c60); }
.bank-unit .bank-unit-actions .delete-unit-btn:hover { color: #fff; border-color: var(--theme-danger, #a34c60); background: var(--theme-danger, #a34c60); }

.word-manager-card { width: min(900px, 100%); }
.word-manager-list { display: grid; gap: 8px; max-height: min(58vh, 560px); overflow: auto; }
.word-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--theme-card-border); border-radius: 14px; background: color-mix(in srgb, var(--theme-card) 91%, #fff); }
.word-manager-row > div { display: grid; gap: 3px; min-width: 0; }
.word-manager-row strong { overflow: hidden; color: var(--theme-heading); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.word-manager-row small { overflow: hidden; color: var(--theme-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.word-manager-row button { min-height: 35px; padding: 7px 11px; }
.word-editor-card { width: min(610px, 100%); }
.word-editor-card textarea { min-height: 76px; color: var(--theme-ink); border: 1px solid var(--theme-card-border); background: var(--theme-card); }

@media (max-width: 900px) {
  .setup-preview-section { grid-column: auto; }
  .review-toolbar { grid-template-columns: 1fr; }
  .review-toolbar > div { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .setup-preview-actions { align-items: stretch; flex-direction: column; }
  .setup-preview-actions .soft-btn { width: 100%; }
  .review-toolbar > div { display: grid; grid-template-columns: 1fr; }
  .review-toolbar button { width: 100%; }
  .word-manager-row { grid-template-columns: 1fr; }
  .word-manager-row button { width: 100%; }
  .bank-unit-actions { display: grid; grid-template-columns: 1fr; }
}

/* 电脑与平板优先：避免 7×7 词格在平板上被旧断点压缩成小字号。 */
@media (min-width: 901px) and (max-width: 1180px) {
  .setup-grid { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .8fr); }
  .unit-section { grid-row: auto; }
  .team-settings { grid-column: 2; grid-row: 2; }
  .setup-preview-section { grid-column: 1; grid-row: 2; }
  .board[data-size="5"] .cell-word,.board[data-size="6"] .cell-word,.board[data-size="7"] .cell-word { font-size: clamp(16px, 1.65vw, 19px); }
  .board[data-size="8"] .cell-word { font-size: clamp(14px, 1.45vw, 17px); }
  .board[data-size="9"] .cell-word { font-size: clamp(12px, 1.3vw, 15px); }
  .board[data-size="10"] .cell-word { font-size: clamp(11px, 1.15vw, 14px); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .board[data-size="5"] .cell-word,.board[data-size="6"] .cell-word,.board[data-size="7"] .cell-word { font-size: clamp(16px, 2.25vw, 20px); }
  .board[data-size="8"] .cell-word { font-size: clamp(14px, 2vw, 18px); }
  .board[data-size="9"] .cell-word { font-size: clamp(12px, 1.75vw, 16px); }
  .board[data-size="10"] .cell-word { font-size: clamp(11px, 1.5vw, 14px); }
  .setup-preview-list { max-height: 126px; }
}

/* 课堂报告、错词掌握和投屏辅助 */
.quick-standard-note { display: block; margin-top: 12px; color: var(--theme-ink-soft); font-size: 11px; font-weight: 800; line-height: 1.5; }
.review-toolbar { grid-template-columns: minmax(132px, 1fr) minmax(118px, .72fr) auto; }
.wrong-book-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.wrong-book-row.mastered { opacity: .72; }
.wrong-book-row.mastered strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.mastery-btn { min-height: 31px; max-width: 112px; padding: 5px 7px; color: var(--theme-primary-border); border: 1px solid var(--theme-card-border); border-radius: 8px; background: var(--theme-card); font-size: 9px; font-weight: 900; line-height: 1.25; cursor: pointer; }
.mastery-btn:hover { color: #fff; border-color: var(--theme-primary-border); background: var(--theme-primary); }
.wrong-book-row.mastered .mastery-btn { color: var(--theme-ink-soft); }
.wrong-book-row.mastered .mastery-btn:hover { color: #fff; }

.history-dialog-card { width: min(1030px, 100%); }
.history-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.history-summary article { display: grid; gap: 4px; min-height: 84px; padding: 14px; border: 1px solid var(--theme-card-border); border-radius: 14px; background: color-mix(in srgb, var(--theme-card) 91%, #fff); }
.history-summary strong { color: var(--theme-heading); font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.history-summary small { color: var(--theme-ink-soft); font-size: 10px; font-weight: 800; line-height: 1.35; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 10px; color: var(--theme-ink-soft); font-size: 11px; font-weight: 800; }
.history-list { display: grid; gap: 8px; max-height: min(50vh, 450px); overflow: auto; }
.history-list > p { margin: 26px 0; color: var(--theme-ink-soft); font-size: 12px; text-align: center; }
.history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--theme-card-border); border-left: 5px solid var(--theme-primary); border-radius: 13px; background: color-mix(in srgb, var(--theme-card) 92%, #fff); }
.history-row.draw { border-left-color: var(--theme-amber); }.history-row.interrupted { border-left-color: var(--theme-ink-soft); }
.history-row > div { display: grid; gap: 4px; min-width: 0; }.history-row strong { color: var(--theme-heading); font-size: 14px; }.history-row small { overflow: hidden; color: var(--theme-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.history-row > span { color: var(--theme-ink); font-size: 11px; font-weight: 900; white-space: nowrap; }.history-row > span:last-child { color: var(--theme-ink-soft); font-size: 10px; font-weight: 800; }

/* 投屏高对比：弱化装饰，放大文字与色块之间的明暗差。 */
body.high-contrast {
  --theme-ink: #102a43; --theme-ink-soft: #34536e;
  --theme-page-bg: #f4f8fc; --theme-dot-bg: none;
  --theme-primary: #005fb8; --theme-primary-hover: #004d96; --theme-primary-border: #002f61;
  --theme-card: #ffffff; --theme-card-border: #7a94ad;
  --theme-board: #103f6c; --theme-board-border: #082b4b; --theme-board-shadow: #082b4b; --theme-board-inset: rgba(255,255,255,.22);
  --theme-cell: #ffffff; --theme-cell-hover: #fff4b5; --theme-cell-text: #102a43; --theme-cell-border: #365a7d; --theme-cell-shadow: #173d60;
  --theme-tag-translate: #b42346; --theme-tag-english: #006b70;
  --theme-amber: #ffd124; --theme-amber-deep: #704300; --theme-amber-card: linear-gradient(110deg, #fff0af, #fff 60%);
  --theme-aqua: #20d3db; --theme-aqua-deep: #005a72; --theme-aqua-card: linear-gradient(250deg, #c9f5f7, #fff 60%);
  --theme-guide: #eaf4ff; --theme-heading: #003b75;
  --theme-stat-1: #fff0a6; --theme-stat-2: #c9f3f5; --theme-stat-3: #f3d8e0;
}
body.high-contrast::before { opacity: 0; }
body.high-contrast .brand-mark { filter: none; }
body.high-contrast .home-hero { border-color: #102a43; background: #fff; box-shadow: 0 8px 0 #082b4b, 0 20px 42px rgba(8,43,75,.18); }
body.high-contrast .home-hero::before,.high-contrast .home-visual::before,.high-contrast .home-visual::after { opacity: .35; }
body.high-contrast .word-cell { border-width: 2px; box-shadow: 0 4px 0 #173d60, 0 7px 13px rgba(8,43,75,.18); }
body.high-contrast .cell-word { font-weight: 950; letter-spacing: .01em; }
body.high-contrast .word-cell.owner-amber { color: #302000; background: #ffd124; border-color: #704300; box-shadow: 0 4px 0 #704300; }
body.high-contrast .word-cell.owner-aqua { color: #003545; background: #20d3db; border-color: #005a72; box-shadow: 0 4px 0 #005a72; }
body.high-contrast .primary-btn { color: #fff; background: #005fb8; border-color: #002f61; box-shadow: 0 6px 0 #002f61, 0 10px 18px rgba(0,47,97,.24); }
body.high-contrast .soft-btn,body.high-contrast .ghost-btn { color: #102a43; border-color: #476d91; background: #fff; box-shadow: 0 4px 0 #b7c8d8; }
body.high-contrast .status-chip.playing { color: #003b75; background: #d8ecff; border: 1px solid #005fb8; }
body.high-contrast .pause-overlay { background: rgba(8,43,75,.84); backdrop-filter: none; }
body.high-contrast .dialog-card { box-shadow: 0 9px 0 #005fb8, 0 24px 60px rgba(8,43,75,.34); }
body.high-contrast .mastery-btn { border-color: #476d91; }

@media (max-width: 900px) {
  .history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-row { grid-template-columns: 1fr auto; }.history-row > span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .history-toolbar { align-items: stretch; flex-direction: column; }.history-toolbar button { width: 100%; }
  .history-row { grid-template-columns: 1fr; gap: 7px; }.history-row > span { white-space: normal; }
  .wrong-book-row { grid-template-columns: minmax(0, 1fr) auto; }.mastery-btn { grid-column: 1 / -1; max-width: none; width: 100%; }
}

/* 当前行动队伍：课堂远距离观看时保持一眼可辨。 */
@keyframes active-team-glow {
  0%, 100% { filter: brightness(1.02) saturate(1.05); }
  50% { filter: brightness(1.11) saturate(1.18); }
}
.team-card.active { position: relative; z-index: 1; transform: translateY(-3px) scale(1.012); border-width: 3px; animation: active-team-glow 1.45s ease-in-out infinite; }
.team-card.active::after { content: "本轮出战"; position: absolute; left: 50%; top: 50%; z-index: 2; padding: 6px 13px; transform: translate(-50%, -50%); color: #fff; border: 2px solid var(--theme-card); border-radius: 999px; font-size: clamp(13px, .95vw, 15px); font-weight: 950; letter-spacing: .06em; line-height: 1.15; box-shadow: 0 3px 0 rgba(16,42,67,.20); white-space: nowrap; }
.team-card.amber.active { border-color: var(--theme-amber-deep); background: linear-gradient(110deg, color-mix(in srgb, var(--theme-amber) 48%, #fff), var(--theme-amber-card) 66%); box-shadow: 0 8px 0 var(--theme-amber-deep), 0 0 0 5px color-mix(in srgb, var(--theme-amber) 34%, transparent), 0 0 28px color-mix(in srgb, var(--theme-amber) 56%, transparent); }
.team-card.aqua.active { border-color: var(--theme-aqua-deep); background: linear-gradient(250deg, color-mix(in srgb, var(--theme-aqua) 48%, #fff), var(--theme-aqua-card) 66%); box-shadow: 0 8px 0 var(--theme-aqua-deep), 0 0 0 5px color-mix(in srgb, var(--theme-aqua) 34%, transparent), 0 0 28px color-mix(in srgb, var(--theme-aqua) 56%, transparent); }
.team-card.amber.active::after { background: var(--theme-amber-deep); }
.team-card.aqua.active::after { background: var(--theme-aqua-deep); }
body.high-contrast .team-card.active { outline: 4px solid #102a43; outline-offset: 2px; filter: none; animation: none; }
body.reduce-motion .team-card.active { animation: none; }
body.dense-board .team-card.active::after { padding: 4px 9px; font-size: clamp(10px, .82vw, 12px); }
@media (max-width: 640px) { .team-card.active::after { display: none; } }