/* Shared visual system for the learning and management screens. */
:root { --primary:#1674e8; --blue:#1674e8; --primary-soft:#edf5ff; --text:#192b43; --ink:#192b43; --subtle:#687b91; --muted:#687b91; --line:#e2eaf3; --shadow:0 10px 32px rgba(35,63,98,.06); }
body { background:#f4f7fb; color:var(--ink); font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.5; }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #90bfff; outline-offset:4px; }
input:focus,textarea:focus,select:focus { outline:3px solid #1674e81a; border-color:var(--primary); }
button[hidden],a[hidden] { display:none !important; }
.panel,.card { border:1px solid var(--line); box-shadow:var(--shadow); background:#fff; }
.page-shell { max-width:1160px; padding:32px 24px 48px; }
.hero { padding:12px 0 20px; }
.hero h1 { font-size:clamp(28px,4vw,40px); letter-spacing:-.035em; }
.hero-actions { gap:12px; }
.btn { min-height:44px; font-size:15px; font-weight:650; padding:12px 20px; border-radius:14px; }
.btn-primary { background:var(--primary); box-shadow:0 5px 14px #1674e820; }
.btn-secondary { background:#edf1f6; color:#41546c; }
.admin-entry { border:0; border-radius:14px; min-height:44px; }
.topbar { border-radius:20px; padding:16px 20px; }
.setup,.level-menu,.game,.result { border-radius:24px; padding:24px; }
.setup-main,.setup-side,.result-wrap { border-radius:18px; }
.section-title { font-size:26px; line-height:1.3; }
.section-desc { line-height:1.7; margin-bottom:24px; }
.field-grid { gap:20px; }
.unit-choice { font-family:inherit; font-size:14px; font-weight:650; line-height:1.4; }
.level-grid { gap:16px; }
.level-card { padding:24px; border-radius:18px; box-shadow:0 4px 14px #233f6206; }
.level-card h3 { font-size:23px; line-height:1.35; }
.level-card p { line-height:1.7; }
.game-panel { border:0; padding:12px; background:transparent; min-height:500px; }
.boss-stage { gap:32px; min-height:460px; }
.boss-copy { height:auto; min-width:0; gap:12px; grid-template-rows:auto auto; }
.boss-kicker { font-size:12px; letter-spacing:.04em; }
.boss-question { min-height:380px; padding:24px; border-radius:20px; overflow:visible; display:flex; gap:0; box-shadow:0 6px 20px #233f6205; }
.prompt-label { font-size:13px; font-weight:600; line-height:1.5; }
.boss-question .prompt-focus { flex:1; display:flex; align-items:center; justify-content:center; min-height:140px; margin:0; padding:28px 0; font-size:clamp(28px,3.2vw,42px); line-height:1.4; letter-spacing:-.025em; overflow-wrap:anywhere; }
.boss-question > .btn { margin:auto; min-height:48px; padding:12px 24px; border-radius:14px; background:var(--primary); box-shadow:0 5px 14px #1674e820; }
.boss-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.boss-options button { min-height:54px; font-family:inherit; font-size:15px; font-weight:650; line-height:1.45; padding:12px; background:var(--primary); box-shadow:0 3px 8px #1674e818; border-radius:12px; overflow-wrap:anywhere; }
.boss-input { margin-top:0; gap:12px; align-items:stretch; }
.boss-input input { min-width:0; width:0; min-height:56px; padding:12px; font-size:23px; border:2px solid #93bcf3; border-radius:14px; background:#f7faff; }
.boss-input button { border-radius:14px; box-shadow:none; }
.task-modal { padding:24px; background:#172b4659; backdrop-filter:blur(5px); z-index:40; overflow:auto; }
.task-modal-card { width:min(440px,100%); max-height:calc(100dvh - 48px); overflow:auto; border-radius:22px; padding:28px; box-shadow:0 24px 64px #142d4930; }
.task-modal-card h2 { font-size:24px; line-height:1.4; margin-bottom:10px; }
.login-form { gap:18px; margin-top:24px; }
.task-modal-actions { margin-top:12px; gap:12px; }
.login-form input { min-height:46px; }
.footer-note { padding:8px 48px; font-size:12px; color:#8190a3; }
.feedback-fab { box-shadow:0 5px 18px #1674e82b; bottom:max(20px,env(safe-area-inset-bottom)); }
/* Management pages use the same spacing, typography and controls. */
.desktop-grid { gap:24px; grid-template-columns:280px minmax(0,1fr); }
.main-panel,.side-panel { min-width:0; }
.card { padding:22px; border-radius:18px; }
.table-toolbar { flex-wrap:wrap; gap:12px; margin:20px 0 12px; }
.table-toolbar button,.mini-btn { min-height:36px; }
.library-toolbar { margin-top:0; padding:16px; background:#f5f9ff; }
th,td { line-height:1.55; }
th { padding-top:12px; padding-bottom:12px; }
.modal-backdrop { backdrop-filter:blur(5px); }
.ai-modal-card { padding:24px; border-radius:22px; }
.modal-head { flex-wrap:wrap; margin-bottom:16px; }
.modal-actions { flex-wrap:wrap; }
.shell { padding:32px 0 48px; }
.summary .card { padding:24px; }
@media(max-width:900px) {
  .desktop-grid { grid-template-columns:1fr; }
  .side-panel { position:static; }
  .toolbar-primary-actions { margin-left:0; }
  .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .page-shell { padding:20px 16px 32px; }
  .setup,.level-menu,.game,.result { padding:20px; border-radius:22px; }
  .setup-main,.setup-side,.result-wrap { padding:0; background:transparent; }
  .game-panel { padding:0; min-height:0; }
  .boss-stage { grid-template-columns:minmax(0,1fr); gap:24px; min-height:0; }
  .boss-visual { min-height:230px; padding:12px 28px; }
  .boss-image { width:min(100%,260px); max-height:260px; }
  .boss-hp-vertical { height:190px; width:18px; }
  .boss-copy { height:auto; gap:10px; }
  .boss-question { min-height:340px; padding:20px; }
  .boss-question .prompt-focus { min-height:148px; font-size:32px; padding:28px 0; }
  .boss-question > .btn { margin:auto; }
  .boss-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .boss-options button { font-size:14px; }
  .boss-input input { font-size:22px; }
  .boss-input button { padding:12px 16px; }
  body:has(.desktop-grid) { padding:20px 16px; }
  #result-card { overflow-x:auto; }
  #result-card table { min-width:680px; }
  .modal-backdrop { padding:16px; }
  .ai-modal-card { max-height:calc(100dvh - 32px); padding:20px; }
  .inline-add { flex-wrap:wrap; }
  .inline-add input { flex:1 1 180px; }
}
@media(max-width:420px) {
  .page-shell { padding:12px 12px 28px; }
  .setup,.level-menu,.game,.result { padding:16px; }
  .level-grid { grid-template-columns:1fr; }
  .boss-visual { min-height:190px; }
  .boss-image { max-height:210px; }
  .boss-hp-vertical { height:160px; }
  .boss-question { padding:18px; min-height:350px; }
  .boss-input { flex-direction:column; }
  .boss-input input { width:100%; flex:auto; }
  .boss-input button { width:100%; min-height:46px; }
  .boss-question .prompt-focus { font-size:28px; min-height:120px; }
  .task-modal { padding:16px; }
  .task-modal-card { padding:22px; max-height:calc(100dvh - 32px); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }