/* Encounter visuals retain the sunlit storybook palette. */
.combat-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.combat-heading h3 small { display:inline-block; font:500 12px var(--sans, sans-serif); color:#6b7058; }
.combat-sound { font-size:10px; text-align:right; flex-shrink:0; }
.combat-sound label { display:flex; gap:8px; align-items:center; margin-top:6px; }
.combat-sound input { width:78px; accent-color:#709359; }
.combat-arena { display:grid; grid-template-columns:1fr 36px 1fr; align-items:center; gap:12px; margin:20px 0; padding:18px; border-radius:18px; background:linear-gradient(145deg,#f4efcf,#e4efd3); }
.combat-hero, .combat-creature { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; min-width:0; }
#combatPortrait { width:110px; height:110px; flex:none; border-radius:24px; }
.combat-hero b { font-size:13px; }
.combat-hero small, .combat-creature small { font-size:10px; line-height:1.5; color:#596b4a; }
.combat-arena .creature-art { float:none; margin:0; width:min(100%,170px); height:auto; aspect-ratio:1; border-radius:25px; }
.combat-versus { font:italic 20px Georgia,serif; color:#918662; text-align:center; }
.combat-health-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:15px; }
.combat-health > div:first-child { display:flex; gap:8px; justify-content:space-between; font-size:11px; margin-bottom:6px; }
.combat-health-track { height:10px; border-radius:10px; background:#dfe5cd; overflow:hidden; }
.combat-health-track i { display:block; height:100%; background:#709853; transition:width .4s ease; border-radius:10px; }
.combat-health.enemy .combat-health-track i { background:#b87950; }
.combat-outcome { padding:14px; border-radius:12px; background:#e6efcb; color:#46643a; font-size:13px; }
@media(max-width:560px) { .combat-heading { flex-direction:column; gap:4px; } .combat-sound { display:flex; align-items:center; gap:15px; } .combat-sound label { margin:0; } .combat-arena { padding:12px 8px; gap:7px; grid-template-columns:1fr 24px 1fr; } #combatPortrait { width:90px; height:90px; } .combat-health-grid { gap:12px; } .combat-health > div:first-child { flex-direction:column; gap:2px; } }
@media(prefers-reduced-motion:reduce) { .combat-health-track i { transition:none; } }

.combat-impact .combat-hero { animation:combat-hero-strike .3s ease; }
.combat-impact .combat-creature .creature-art { animation:combat-creature-hit .3s .18s ease; }
.combat-return-hit .combat-creature { animation:combat-creature-strike .3s .5s ease; }
.combat-return-hit #combatPortrait { animation:combat-hero-hit .3s .7s ease; }
@keyframes combat-hero-strike { 50% { transform:translateX(12px); } }
@keyframes combat-creature-strike { 50% { transform:translateX(-12px); } }
@keyframes combat-creature-hit { 50% { transform:rotate(4deg); filter:brightness(1.12); } }
@keyframes combat-hero-hit { 50% { transform:rotate(-4deg); filter:brightness(1.12); } }
@media(prefers-reduced-motion:reduce) { .combat-impact .combat-hero, .combat-impact .combat-creature .creature-art, .combat-return-hit .combat-creature, .combat-return-hit #combatPortrait { animation:none; } }

.combat-question { padding:18px; background:#fffdf2; border:1px solid #dbe1c7; border-radius:18px; }
.combat-question-head { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.combat-question h4 { font-size:20px; line-height:1.5; margin:0 0 16px; }
.combat-question-head button { flex-shrink:0; }
.combat-answer-row { display:flex; gap:10px; }
.combat-answer-row input { min-width:0; flex:1; width:100%; font-size:20px; }
.combat-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.combat-choices button { min-height:52px; white-space:normal; text-align:left; line-height:1.4; }
.combat-hint { display:flex; align-items:center; gap:12px; background:#eef3db; padding:12px; border-radius:14px; margin:0 0 14px; }
.combat-hint svg { width:48px; min-width:48px; height:48px; }
.combat-hint p { margin:0; font-size:14px; line-height:1.5; }
.combat-feedback { padding:16px; border-radius:14px; margin-bottom:14px; background:#edf3da; }
.combat-feedback.retry { background:#f8efd9; }
.combat-feedback p { margin-bottom:0; line-height:1.5; }
.combat-paused { text-align:center; padding:20px; }
.combat-footer { margin-top:12px; text-align:right; }
.combat-speed { margin-bottom:0; color:#62724a; }
@media(max-width:420px) { .combat-question { padding:12px; } .combat-choices { grid-template-columns:1fr; } .combat-question h4 { font-size:18px; } }
.encounter-modes { display:flex; gap:8px; margin-top:18px; }
.encounter-modes button[aria-pressed=true] { background:#dfefc5; border-color:#729956; color:#335d3e; box-shadow:inset 0 0 0 1px #729956; }
.encounter-mode-note { color:#657759; margin:9px 0 18px; }
.help-progress { margin:16px 0; }
.help-progress>div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:13px; margin-bottom:8px; }
.encounter-explore .combat-arena { background:linear-gradient(135deg,#eff5cc,#e1f0dc); }
.help-story { font-size:14px; line-height:1.6; }
.combat-creature>b { font-size:13px; }
.help-insight .combat-creature { animation:help-welcome .65s ease; }
@keyframes help-welcome { 50% { transform:translateY(-5px); } }
@media(prefers-reduced-motion:reduce) { .help-insight .combat-creature { animation:none; } }