@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Noto+Sans+TC:wght@500;700;900&display=swap');

:root {
  color-scheme: light;
  --bg: #fff7dc;
  --bg-2: #f0fbf7;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-2: #ffffff;
  --card: rgba(255, 255, 255, 0.94);
  --card-soft: #fff2cf;
  --text: #26324a;
  --muted: #6f6b78;
  --accent: #ff7a45;
  --accent-dark: #e55525;
  --accent-2: #3f7cff;
  --accent-2-dark: #2557c8;
  --accent-mint: #46d7b6;
  --danger: #ef5d76;
  --warning: #ffc857;
  --success: #20b486;
  --border: rgba(38, 50, 74, 0.13);
  --shadow: rgba(37, 50, 83, 0.08) 0 10px 30px, rgba(37, 50, 83, 0.04) 0 3px 10px;
  --shadow-strong: rgba(37, 50, 83, 0.14) 0 22px 60px, rgba(37, 50, 83, 0.07) 0 8px 24px;
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 17px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); }
body {
  padding: 18px;
  color: var(--text);
  font-family: "Noto Sans TC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 200, 87, 0.58) 0 11rem, transparent 24rem),
    radial-gradient(circle at 84% 4%, rgba(70, 215, 182, 0.44) 0 13rem, transparent 28rem),
    radial-gradient(circle at 72% 84%, rgba(63, 124, 255, 0.18) 0 15rem, transparent 34rem),
    linear-gradient(180deg, #fff8dd 0%, #fffdf5 52%, #ecfbf7 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
button:disabled { cursor: not-allowed; opacity: .52; transform: none !important; }
a { color: inherit; }
body::before {
  content: "";
  position: fixed;
  right: clamp(10px, 5vw, 58px);
  top: clamp(8px, 6vw, 64px);
  z-index: -1;
  width: clamp(120px, 20vw, 260px);
  aspect-ratio: 1.25;
  border-radius: 42% 58% 54% 46%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255,255,255,.42) 0 18%, transparent 19%),
    linear-gradient(135deg, rgba(255,122,69,.12), rgba(255,200,87,.08));
  transform: rotate(7deg);
}
body::after {
  content: "★  ★  ★";
  position: fixed;
  left: -18px;
  bottom: 36px;
  z-index: -1;
  color: rgba(63, 124, 255, .12);
  font-size: clamp(34px, 8vw, 98px);
  letter-spacing: .16em;
  transform: rotate(-14deg);
}
#app { max-width: 1180px; margin: 0 auto; }

.shell { display: grid; gap: 18px; }
.hero, .panel, .card, .battle-shell, .result-shell, .admin-shell {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(1.12);
}
.hero {
  padding: clamp(22px, 4vw, 42px);
  display: grid;
  gap: 22px;
  overflow: hidden;
  position: relative;
  min-height: 70vh;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,250,234,.86)),
    radial-gradient(circle at 100% 0%, rgba(255, 122, 69, .16), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(70, 215, 182, .18), transparent 36%);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.hero::before {
  width: 260px;
  height: 260px;
  right: -80px;
  top: -80px;
  background: rgba(255, 107, 61, .13);
}
.hero::after {
  width: 220px;
  height: 220px;
  left: -72px;
  bottom: -88px;
  background: rgba(91, 118, 254, .12);
}
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; position: relative; z-index: 1; }
.hero-copy h1 {
  margin: 0 0 10px;
  font-family: "Baloo 2", "Noto Sans TC", sans-serif;
  font-size: clamp(38px, 7.4vw, 78px);
  line-height: .96;
  letter-spacing: -2.1px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 3px 0 rgba(255,255,255,.85), 0 12px 34px rgba(63,124,255,.10);
}
.hero-copy p { margin: 0; color: var(--muted); line-height: 1.72; max-width: 640px; font-size: clamp(16px, 2vw, 20px); font-weight: 600; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.badge, .tag, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-weight: 800;
}
.badge { background: #fff4e3; color: #9a461e; border: 1px solid rgba(255, 107, 61, .18); padding: 9px 13px; font-size: 14px; box-shadow: 0 6px 16px rgba(255,122,69,.08); }
.monster-spotlight {
  width: clamp(132px, 18vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(70px, 10vw, 128px);
  border-radius: 38px;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0 22%, transparent 23%),
    linear-gradient(145deg, #fff 0%, #ffe7a8 54%, #caf8ef 100%);
  border: 3px solid rgba(255,255,255,.94);
  box-shadow: 0 22px 52px rgba(255,122,69,.16), var(--shadow-strong);
  transform: rotate(2deg);
  animation: monster-bob 4.8s ease-in-out infinite;
}
.home-actions { display: flex; gap: 14px; justify-content: flex-end; }
.home-actions .ghost-btn { min-height: 40px; padding: 10px 14px; font-size: 14px; opacity: .76; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 1; }
.mode-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 250px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,252,242,.94));
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(37,50,83,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mode-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow-strong); border-color: rgba(255,200,87,.58); }
.mode-card.featured { border-color: rgba(63,124,255,.40); background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%); box-shadow: 0 0 0 7px rgba(63,124,255,.08), var(--shadow); }
.mode-card h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.35px; font-family: "Baloo 2", "Noto Sans TC", sans-serif; font-weight: 800; }
.mode-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }
.mode-icon { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 24px; background: linear-gradient(145deg, #fff7cf, #e9fbf8); font-size: 34px; border: 2px solid rgba(255,255,255,.88); box-shadow: inset 0 -8px 16px rgba(37,50,83,.05), 0 10px 20px rgba(37,50,83,.08); }

.primary-btn, .secondary-btn, .ghost-btn, .danger-btn {
  border-radius: 18px;
  padding: 15px 20px;
  font-weight: 900;
  min-height: 48px;
  transition: transform .16s ease, opacity .16s ease, background .16s ease, box-shadow .16s ease;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .danger-btn:hover { transform: translateY(-1px); }
.primary-btn { background: linear-gradient(135deg, #ff8a4c, #ff5f6d); color: white; box-shadow: 0 12px 26px rgba(255,95,109,.22); }
.primary-btn:hover { background: linear-gradient(135deg, #ff7a45, #e84d5f); }
.secondary-btn { background: linear-gradient(135deg, #3f7cff, #46d7b6); color: white; box-shadow: 0 12px 26px rgba(63,124,255,.22); }
.secondary-btn:hover { background: linear-gradient(135deg, #2557c8, #22b99a); }
.ghost-btn { background: rgba(255,255,255,0.78); color: var(--text); border: 1px solid var(--border); }
.ghost-btn:hover { background: #fff; box-shadow: rgba(0,0,0,.06) 0 8px 20px; }
.danger-btn { background: #fff0f2; color: #b81f37; border: 1px solid rgba(233,79,100,.22); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.summary-card { background: rgba(255,255,255,.72); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--border); }
.summary-card .label { color: var(--muted); font-size: 14px; margin-bottom: 8px; font-weight: 800; }
.summary-card .value { font-size: clamp(26px, 4vw, 42px); font-weight: 900; color: var(--accent-2); letter-spacing: -1px; }

.panel { padding: clamp(18px, 3vw, 26px); }
.panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.panel-title h2, .panel-title h3 { margin: 0; letter-spacing: -.45px; }
.subtle { color: var(--muted); font-size: 14px; line-height: 1.65; }

.mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 16px; }
.mission-card { background: var(--card); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--border); display: grid; gap: 12px; position: relative; box-shadow: rgba(0,0,0,.02) 0 2px 8px; }
.mission-card.selected {
  background: linear-gradient(135deg, #2f80ed 0%, #56ccf2 100%);
  color: #ffffff;
  border-color: rgba(47,128,237,.72);
  box-shadow: 0 0 0 5px rgba(47,128,237,.18), 0 18px 42px rgba(47,128,237,.24);
}
.mission-card.selected h3,
.mission-card.selected .subtle,
.mission-card.selected .line-summary,
.mission-card.selected .progress-pill { color: #ffffff; }
.mission-card.selected .tag,
.mission-card.selected .status-pill {
  background: rgba(255,255,255,.16);
  color: #ffffff;
  border-color: rgba(255,255,255,.26);
}
.mission-card.selected .ghost-btn {
  background: rgba(255,255,255,.96);
  color: #253246;
  border-color: rgba(255,255,255,.72);
}
.mission-card.selected .secondary-btn {
  background: #ffffff;
  color: #253246;
  box-shadow: none;
}
.mission-card.not-playable { opacity: .58; }
.mission-card h3 { margin: 0; font-size: 20px; letter-spacing: -.25px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: #f6f5f4; color: var(--muted); padding: 7px 10px; font-size: 12px; border: 1px solid var(--border); }
.progress-pill { font-size: 14px; color: var(--muted); font-weight: 800; }
.selection-bar { position: sticky; bottom: 12px; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: 22px; padding: 14px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 18px; backdrop-filter: blur(12px); box-shadow: var(--shadow-strong); z-index: 5; }
.selection-bar.hidden { display: none; }

.prep-card { padding: 28px; display: grid; gap: 18px; text-align: center; }
.prep-stage-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.battle-shell { padding: clamp(16px, 3vw, 24px); display: grid; gap: 18px; }
.battle-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-wrap { display: grid; gap: 10px; }
.progress-bar, .hp-bar { width: 100%; height: 13px; background: rgba(0,0,0,.07); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.hp-fill { height: 100%; background: linear-gradient(90deg, var(--danger), var(--warning)); }
.battle-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.practice-shell { gap: 14px; }
.practice-header { margin-bottom: -2px; }
.practice-title { margin: 6px 0 0; }
.practice-back-btn { flex: 0 0 auto; }
.practice-progress-card {
  background: linear-gradient(135deg, rgba(47,128,237,.10), rgba(86,204,242,.13));
  border: 1px solid rgba(47,128,237,.18);
  border-radius: 22px;
  padding: 15px;
  display: grid;
  gap: 12px;
  box-shadow: rgba(47,128,237,.08) 0 10px 26px;
}
.practice-progress-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.progress-title { font-size: clamp(18px, 3vw, 24px); font-weight: 900; letter-spacing: -.35px; color: #253246; }
.progress-subtitle { color: var(--muted); font-size: 14px; font-weight: 800; margin-top: 3px; }
.progress-count { flex: 0 0 auto; min-width: 86px; text-align: right; font-size: clamp(28px, 5vw, 42px); font-weight: 900; line-height: 1; color: #2f80ed; }
.progress-count span { display: inline-block; margin-left: 3px; color: var(--muted); font-size: 15px; font-weight: 900; }
.practice-progress-bar { height: 16px; background: rgba(255,255,255,.84); border: 1px solid rgba(47,128,237,.12); }
.practice-stage-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-dot { padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.74); border: 1px solid rgba(31,30,28,.08); color: var(--muted); font-size: 12px; font-weight: 900; }
.stage-dot.active { background: linear-gradient(135deg, #2f80ed, #56ccf2); color: white; border-color: rgba(47,128,237,.35); box-shadow: 0 8px 18px rgba(47,128,237,.18); }
.stage-dot.review.active { background: linear-gradient(135deg, #ff8a4c, #ffcf5b); }
.practice-group-details { background: rgba(255,255,255,.68); border: 1px solid rgba(31,30,28,.08); border-radius: 16px; padding: 10px 12px; }
.practice-group-details summary { cursor: pointer; font-weight: 900; color: var(--muted); }
.compact-tags { margin-top: 10px; }
.practice-question-stack { max-width: 860px; width: 100%; justify-self: center; }
.monster-panel, .question-panel, .feedback-panel, .result-shell, .admin-card { background: var(--card); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.78); box-shadow: var(--shadow); }
.monster-panel { padding: 18px; display: grid; gap: 14px; }
.monster-face { min-height: 180px; display: grid; place-items: center; font-size: clamp(68px, 8vw, 108px); background: radial-gradient(circle at 35% 22%, #fff 0 18%, transparent 19%), linear-gradient(180deg, #fff3bd, #ddfbf5); border-radius: 26px; border: 2px solid rgba(255,255,255,.86); box-shadow: inset 0 -10px 18px rgba(37,50,83,.05); }
.monster-name { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.question-stack { display: grid; gap: 16px; }
.question-panel { padding: clamp(18px, 3vw, 26px); display: grid; gap: 18px; }
.question-type { color: var(--muted); font-size: 14px; font-weight: 800; }
.question-main { font-size: clamp(30px, 4.4vw, 48px); font-weight: 900; line-height: 1.18; letter-spacing: -.9px; font-family: "Baloo 2", "Noto Sans TC", sans-serif; }
.question-main-with-audio { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pronunciation-wrap { display: inline-flex; align-items: center; gap: 8px; }
.pronunciation-btn { border: 1px solid var(--border); background: rgba(255,255,255,.9); border-radius: 999px; width: 48px; height: 48px; display: inline-grid; place-items: center; font-size: 24px; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.pronunciation-btn:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; }
.pronunciation-unsupported { font-size: 14px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.question-support { font-size: 16px; color: var(--muted); line-height: 1.6; font-weight: 600; }
.choice-grid { display: grid; gap: 12px; }
.choice-btn { width: 100%; text-align: left; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.80); color: var(--text); border: 2px solid rgba(38,50,74,.08); font-weight: 900; line-height: 1.45; box-shadow: 0 5px 14px rgba(37,50,83,.04); transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.choice-btn:hover { transform: translateY(-2px); border-color: rgba(63,124,255,.30); background: #fff; box-shadow: 0 12px 24px rgba(63,124,255,.10); }
.choice-btn.correct { background: rgba(22,163,106,0.13); border-color: rgba(22,163,106,.55); }
.choice-btn.wrong { background: rgba(233,79,100,0.13); border-color: rgba(233,79,100,.55); }
.choice-btn.disabled { opacity: 0.58; pointer-events: none; }
.choice-btn.reveal-correct,
.choice-btn.reveal-wrong {
  opacity: 1;
  transform: none;
}
.choice-btn.reveal-correct {
  background: linear-gradient(135deg, rgba(22,163,106,.18), rgba(86,204,242,.20));
  border-color: rgba(22,163,106,.64);
  box-shadow: 0 0 0 4px rgba(22,163,106,.10);
}
.choice-btn.reveal-wrong {
  background: linear-gradient(135deg, rgba(233,79,100,.16), rgba(255,244,227,.96));
  border-color: rgba(233,79,100,.62);
}
.feedback-panel { padding: 16px 18px; display: grid; gap: 10px; }
.feedback-panel.hidden { display: none; }
.feedback-head { font-weight: 900; font-size: 18px; }
.feedback-panel.ok .feedback-head { color: var(--success); }
.feedback-panel.warn .feedback-head { color: #b77712; }
.feedback-panel.bad .feedback-head { color: var(--danger); }
.feedback-answer { font-size: 20px; font-weight: 900; }
.feedback-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.practice-feedback {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  padding: 14px;
  border: 2px solid transparent;
  animation: feedback-pop .22s ease-out;
}
.practice-feedback.ok {
  background: linear-gradient(135deg, rgba(22,163,106,.13), rgba(86,204,242,.18));
  border-color: rgba(22,163,106,.34);
}
.practice-feedback.bad {
  background: linear-gradient(135deg, rgba(233,79,100,.12), rgba(255,244,227,.96));
  border-color: rgba(233,79,100,.30);
}
.practice-feedback-icon { font-size: 34px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.74); }
.practice-feedback-copy { display: grid; gap: 4px; }
.practice-feedback-copy strong { font-size: 20px; }
.practice-feedback-copy span { color: var(--muted); font-weight: 700; line-height: 1.45; }
.practice-feedback-answer { font-weight: 900; color: var(--text); }
.practice-next-btn { min-width: 112px; }
@keyframes feedback-pop {
  from { transform: scale(.985); opacity: .42; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes monster-bob {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

.assembly-board { display: grid; gap: 12px; padding: 16px; background: linear-gradient(180deg, #fff9e7, #ffffff); border: 2px dashed rgba(255,200,87,.45); border-radius: 24px; }
.assembly-label { color: var(--muted); font-size: 14px; font-weight: 800; }
.assembly-answer { min-height: 64px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.assembly-chip, .assembly-placeholder { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(38,50,74,.10); font-weight: 900; box-shadow: 0 7px 16px rgba(37,50,83,.07); }
.assembly-placeholder { color: var(--muted); font-weight: 700; }
.assembly-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.assembly-pad { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.assembly-choice { position: relative; min-height: 58px; text-align: center; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.assembly-choice.used {
  background: #e6e3df;
  color: #8b837a;
  border-color: rgba(31,30,28,.16);
  opacity: 1;
  box-shadow: inset 0 0 0 999px rgba(31,30,28,.035);
}
.assembly-choice.used .choice-value { opacity: .42; }
.assembly-choice .used-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6f655c;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
}
.choice-btn.selected, .letter-btn.selected { border-color: rgba(91,118,254,.48); box-shadow: 0 0 0 4px rgba(91,118,254,0.12); }
.letter-pad-wrap { display: grid; gap: 12px; }
.letter-pad-title { font-size: 14px; font-weight: 900; color: var(--text); background: #fff4e3; border: 1px solid rgba(255,107,61,.16); border-radius: 16px; padding: 10px 12px; }
.letter-pad { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 10px; }
.letter-btn { width: 100%; min-width: 0; min-height: 68px; text-align: center; padding: 12px; border-radius: 18px; background: #f6f5f4; color: var(--text); font-weight: 900; font-size: 22px; border: 2px solid transparent; }
.letter-btn:hover { border-color: rgba(91,118,254,.28); background: #fff; }
.cloze-display { display: grid; gap: 12px; align-content: start; justify-content: start; }
.cloze-word { display: flex; gap: 10px; flex-wrap: wrap; }
.cloze-chip { min-width: 58px; padding: 8px 14px; border-radius: 14px; background: #f6f5f4; text-align: center; font-weight: 800; }
.cloze-chip.blank { border: 2px dashed rgba(91,118,254,.45); background: #fff; color: var(--text); }

.result-shell { padding: 26px; display: grid; gap: 18px; text-align: center; }
.home-message { background: rgba(22,163,106,.12); border: 1px solid rgba(22,163,106,.25); color: #116c49; border-radius: 18px; padding: 12px 14px; font-weight: 900; margin: 6px 0 12px; }
.round-summary-shell { max-width: 820px; margin: 0 auto; text-align: left; }
.round-summary-shell h1, .round-summary-shell .stage-chip-row { text-align: center; justify-content: center; }
.round-summary-card, .round-next-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 18px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.summary-line, .summary-block { display: grid; gap: 6px; line-height: 1.55; }
.summary-block ul { margin: 4px 0 0 20px; padding: 0; }
.summary-grid-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.summary-grid-small > div, .summary-check { background: #f6f5f4; border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; font-weight: 800; }
.summary-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.round-option { display: grid; gap: 8px; }
.round-divider { color: var(--muted); text-align: center; letter-spacing: 1px; }
.round-choice-btn { width: 100%; justify-content: center; font-size: 18px; }
.result-score { font-size: 58px; font-weight: 900; color: var(--accent-2); letter-spacing: -2px; }
.group-result-shell { max-width: 760px; margin: 0 auto; overflow: hidden; position: relative; }
.group-result-shell::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: rgba(255, 207, 91, .24);
  pointer-events: none;
}
.group-result-kicker {
  justify-self: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff4e3;
  color: #9a461e;
  border: 1px solid rgba(255,107,61,.18);
  font-weight: 900;
  font-size: 14px;
}
.group-result-shell h1 { margin: 0; font-size: clamp(34px, 7vw, 58px); letter-spacing: -1.6px; }
.group-score-card {
  background: linear-gradient(135deg, #2f80ed, #56ccf2);
  color: #fff;
  border-radius: 28px;
  padding: clamp(22px, 5vw, 34px);
  display: grid;
  gap: 6px;
  box-shadow: 0 18px 42px rgba(47,128,237,.20);
}
.group-score-label, .group-score-detail { font-weight: 900; opacity: .92; }
.group-score-value { font-size: clamp(64px, 17vw, 120px); line-height: .88; font-weight: 900; letter-spacing: -4px; }
.monster-result-card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  min-height: 174px;
  background: linear-gradient(145deg, #fff 0%, #fff7dd 54%, #e9fbf8 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.monster-result-bg {
  position: absolute;
  inset: 4px 18px auto auto;
  font-size: clamp(34px, 8vw, 72px);
  opacity: .34;
  letter-spacing: 8px;
  transform: rotate(7deg);
  pointer-events: none;
}
.monster-result-face {
  width: clamp(112px, 26vw, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,30,28,.10);
  font-size: clamp(70px, 15vw, 118px);
  box-shadow: rgba(0,0,0,.05) 0 10px 24px;
}
.monster-result-copy { display: grid; gap: 8px; text-align: left; position: relative; z-index: 1; }
.monster-result-copy strong { font-size: clamp(22px, 4vw, 32px); letter-spacing: -.6px; }
.monster-result-copy span { color: var(--muted); font-size: 16px; font-weight: 800; line-height: 1.55; }
.monster-ko .monster-result-face { transform: rotate(-8deg); background: #fff0f2; }
.monster-heavy-hit .monster-result-face { transform: rotate(-5deg) translateY(4px); background: #fff4e3; }
.monster-medium-hit .monster-result-face { transform: rotate(3deg); }
.monster-light-hit .monster-result-face { transform: scale(1.03); }
.group-next-card {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 16px;
  display: grid;
  gap: 6px;
}
.group-next-card strong { font-size: 20px; }
.group-next-card span { color: var(--muted); font-weight: 800; }
.group-result-actions { justify-content: center; }
.group-result-actions .primary-btn { min-width: 190px; }
.result-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.result-stat-card { background: #f6f5f4; border-radius: 20px; border: 1px solid var(--border); padding: 16px; display: grid; gap: 8px; }
.result-stat-card .label { color: var(--muted); font-size: 14px; font-weight: 800; }
.result-stat-card .value { font-size: clamp(28px, 5vw, 42px); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.accuracy-icon { display: inline-flex; align-items: center; justify-content: center; transform: translateY(-1px); }
.result-stat-card.is-great { background: rgba(22,163,106,.12); border-color: rgba(22,163,106,.30); }
.result-stat-card.is-great .value { color: var(--success); }
.result-stat-card.is-mid { background: rgba(248,184,78,.16); border-color: rgba(248,184,78,.32); }
.result-stat-card.is-mid .value { color: #b77712; }
.result-stat-card.is-low { background: rgba(233,79,100,.12); border-color: rgba(233,79,100,.30); }
.result-stat-card.is-low .value { color: var(--danger); }
.star-row { display: flex; justify-content: center; gap: 8px; font-size: 36px; }
.stage-chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.admin-shell { padding: clamp(16px, 3vw, 24px); display: grid; gap: 20px; min-height: 92vh; }
.admin-grid { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(420px, 1.05fr); gap: 18px; align-items: start; }
.admin-card { padding: 18px; display: grid; gap: 14px; }
.field-grid { display: grid; gap: 12px; }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label { display: grid; gap: 8px; font-weight: 900; color: var(--text); }
input, select, textarea { width: 100%; background: #ffffff; color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(91,118,254,.16); border-color: rgba(91,118,254,.62); }
textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.admin-list { display: grid; gap: 12px; }
.batch-row { background: #ffffff; border-radius: 18px; padding: 14px; display: grid; gap: 10px; border: 1px solid var(--border); box-shadow: rgba(0,0,0,.02) 0 2px 8px; }
.batch-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.batch-top h3 { margin: 0; }
.status-pill { padding: 7px 10px; font-size: 12px; letter-spacing: .04em; }
.status-playable { background: rgba(22,163,106,.12); color: #087449; }
.status-draft { background: rgba(248,184,78,.18); color: #8a580c; }
.status-hidden, .status-archived { background: #f0efec; color: #68615a; }
.line-summary { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mono-help { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; line-height: 1.7; }
.footer-note { text-align: center; color: var(--muted); font-size: 13px; padding-bottom: 14px; }
.small-link { color: var(--muted); }
.small-link:hover { color: var(--text); }

.helper-card { background: #fffaf0; border: 1px solid var(--border); border-radius: 20px; padding: 15px; display: grid; gap: 12px; }
.panel-title.compact { margin-bottom: 0; align-items: start; }
.panel-title.compact h4 { margin: 0; font-size: 18px; letter-spacing: -.25px; }
.btn-row.compact { justify-content: flex-end; }
.import-top-grid { align-items: end; }
.import-panel { display: grid; gap: 12px; background: #ffffff; border: 1px solid var(--border); border-radius: 18px; padding: 14px; }
.import-status-row { display: grid; grid-template-columns: 1fr 132px; gap: 12px; align-items: start; }
.import-preview-image { width: 100%; height: 128px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); background: #f6f5f4; }
.import-error { margin-top: 8px; color: #a0152b; background: rgba(233,79,100,0.10); border: 1px solid rgba(233,79,100,.24); border-radius: 14px; padding: 9px 11px; font-size: 14px; line-height: 1.5; }
.ocr-raw-details { display: grid; gap: 8px; }
.ocr-raw-details summary { cursor: pointer; color: var(--muted); font-weight: 900; }
.helper-card > label > textarea[readonly] { min-height: 48px; height: 48px; overflow: hidden; }
#ocr-preview-text, .ocr-raw-details textarea { min-height: 140px; }

@media (max-width: 900px) {
  .battle-layout, .admin-grid { grid-template-columns: 1fr; }
  .mode-grid, .summary-grid, .field-grid.two, .result-stats-grid, .summary-grid-small, .summary-check-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-top { grid-template-columns: 1fr; }
  .monster-spotlight { width: 100%; max-width: 260px; justify-self: center; }
}

@media (max-width: 640px) {
  body { padding: 12px; }
  .hero, .panel, .battle-shell, .result-shell, .admin-shell { border-radius: 24px; }
  .hero-copy h1 { letter-spacing: -1.3px; }
  .mode-card { min-height: auto; }
  .battle-shell { padding: 14px; }
  .practice-header { align-items: stretch; display: grid; grid-template-columns: 1fr; gap: 10px; }
  .practice-title { font-size: clamp(30px, 9vw, 42px); line-height: 1.08; }
  .practice-back-btn { width: 100%; min-height: 52px; }
  .practice-progress-card { padding: 13px; gap: 10px; }
  .practice-stage-dots { gap: 6px; }
  .stage-dot { font-size: 11px; padding: 6px 8px; }
  .progress-count { min-width: 68px; }
  .practice-group-details { padding: 9px 10px; }
  .practice-feedback { grid-template-columns: auto 1fr; }
  .practice-next-btn { grid-column: 1 / -1; width: 100%; }
  .monster-panel { order: 1; }
  .question-stack { order: 2; }
  .question-main { font-size: 30px; }
  .question-panel { padding: 18px; gap: 14px; }
  .question-support { font-size: 15px; }
  .cloze-chip { min-width: 50px; padding: 8px 10px; }
  .cloze-word { gap: 8px; }
  .letter-pad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .letter-btn { min-height: 60px; font-size: 20px; }
  .monster-result-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .monster-result-copy { text-align: center; }
  .monster-result-face { width: min(58vw, 160px); }
  .group-score-value { letter-spacing: -2px; }
  .selection-bar { bottom: 8px; }
  .import-status-row { grid-template-columns: 1fr; }
  .import-preview-image { height: 180px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .primary-btn, .secondary-btn, .ghost-btn, .danger-btn { width: 100%; }
}