/* Style B: calm blue panels, warm brass, clean shapes and restrained impact effects. */
.next-goal-wrap { display:flex; align-items:stretch; gap:7px; }
.next-goal { flex:1; min-width:0; gap:8px; padding:9px; }
.goal-copy { min-width:0; }
.goal-copy strong { line-height:1.3; }
.goal-icon { width:32px; height:36px; }
.goal-arrow { width:12px; flex-shrink:0; }
.quest-journal-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; flex-shrink:0; padding:7px 4px; border:1px solid #8c805e; border-radius:8px; background:#263f4b; color:#efce8b; }
.quest-journal-button .icon { width:21px; height:21px; }
.quest-journal-button span { font-size:10px; font-weight:700; }
.quest-journal-button:hover { background:#35525d; }
.next-goal.reward-ready { border-color:#a5c37b; background:#365850; }
.reward-ready .goal-icon { border-color:#aecb85; color:#d5ecac; background:#2b4846; }
.reward-ready .goal-icon>.icon { stroke:#d5ecac; }
.quest-journal-button.reward-ready { background:#365850; border-color:#abc77e; color:#d5ecac; }
.quest-progress-heading { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#c9d8cb; }
.quest-progress-heading strong { color:#ffe0a1; font-size:17px; }
.quest-progress-track { height:6px; margin:9px 0 20px; border:1px solid #68847d; border-radius:5px; overflow:hidden; background:#173649; }
.quest-progress-track>span { display:block; height:100%; background:#b8d991; }
.active-quest { padding:16px; border:1px solid #b69961; border-radius:9px; background:#1b3c4f; box-shadow:inset 0 1px #d6bb7c25; }
.active-quest.complete { border-color:#a2c77e; background:#284c4e; }
.quest-eyebrow { margin-bottom:8px; color:#edcf92; font-size:11px; }
.complete .quest-eyebrow { color:#c5e7a5; }
.active-quest h3 { margin-bottom:10px; font-size:23px; }
.active-quest .modal-copy { font-size:12px; }
.quest-reward-label { margin-top:17px; font-size:10px; color:#c7d6ca; }
.quest-rewards { display:flex; flex-wrap:wrap; gap:9px; margin:8px 0 2px; }
.quest-rewards>span { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #5e7d7b; border-radius:6px; background:#163649; }
.quest-rewards img { width:25px; height:23px; object-fit:contain; mix-blend-mode:lighten; }
.quest-rewards strong { color:#ffe1a1; font-size:15px; }
.active-quest .modal-button { font-size:14px; }
.quest-list-title { font-size:19px; margin:23px 0 13px; }
.quest-list { padding:0; margin:0; list-style:none; display:grid; gap:8px; }
.quest-step { display:flex; gap:10px; align-items:center; padding:10px; border:1px solid #4d707c; border-radius:7px; background:#1f4052; }
.quest-step-marker { display:grid; place-items:center; width:29px; height:29px; flex-shrink:0; border:1px solid #667e7f; border-radius:50%; color:#c4d1c9; font-size:12px; }
.quest-step-marker .icon { width:17px; height:17px; }
.quest-step strong { display:block; font-size:12px; font-weight:700; }
.quest-step div>span { display:block; font-size:10px; line-height:1.4; margin-top:4px; color:#c4d2cf; }
.quest-step.active { border-color:#ccac6e; }
.quest-step.active .quest-step-marker { background:#6b613d; border-color:#d4b16e; color:#ffe1a1; }
.quest-step.complete { border-color:#a3c17b; }
.quest-step.claimed .quest-step-marker,.quest-step.complete .quest-step-marker { color:#c6e5a1; border-color:#8bad71; background:#33564a; }
.quest-step.claimed div>span { color:#b9d998; }
.quest-step.locked strong { color:#c8d0c9; }
.quests-finished { padding:5px 0 12px; text-align:center; }
.quests-finished h3 { margin-bottom:12px; font-size:24px; }
.quest-ready { display:flex; align-items:center; gap:9px; width:100%; padding:11px; margin-bottom:16px; text-align:left; background:#31544e; border:1px solid #a3c27d; border-radius:8px; }
.quest-ready>span:first-child { color:#d1eaa9; }
.quest-ready>span:nth-child(2) { flex:1; }
.quest-ready small { display:block; font-size:10px; line-height:1.4; color:#cce2b7; }
.quest-ready strong { display:block; margin:3px 0; font-size:12px; color:#fff0ce; }
.quest-ready>.icon { width:14px; color:#d8c38d; }

.battle-hud { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:4px 0 12px; }
.battle-name { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:8px; }
.battle-name>strong { font-family:Georgia,serif; font-size:18px; }
.battle-name>span { display:flex; align-items:center; gap:3px; font-size:11px; color:#efd397; }
.battle-name .icon { width:13px; height:13px; }
.battle-vitals p { margin-top:6px; color:#d7e1cf; font-size:11px; font-variant-numeric:tabular-nums; }
.battle-vitals.boss { text-align:right; }
.battle-vitals .health-bar { height:10px; border-color:#8fa38b; }
.battle-vitals.boss .health-bar>span { background:#e99473; }
.battle-scene { position:relative; height:276px; overflow:hidden; isolation:isolate; border:2px solid #657f6c; border-radius:10px; background:#457566; box-shadow:inset 0 0 0 1px #243a48; }
.battle-scene::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(#1b3b4e30,#264e5866 55%,#253c4cc9),url('/releases/20261022T183423Z-2c13688/assets/outpost-equipped.png') 65% 0/150% auto; }
.battle-scene::after { content:""; position:absolute; inset:auto -20% -18% -20%; height:39%; z-index:-1; background:#738b59; border:3px solid #4b6950; border-radius:50%; box-shadow:0 -9px 0 #9aaa652b; }
.battle-location { position:absolute; left:50%; top:11px; transform:translateX(-50%); padding:5px 10px; background:#193b4cde; border:1px solid #91a184; border-radius:5px; white-space:nowrap; font-size:10px; color:#e9dfbc; }
.fighter { position:absolute; bottom:12px; width:42%; transform-origin:50% 100%; }
.fighter::before { content:""; position:absolute; width:87%; height:12px; bottom:0; left:7%; border-radius:50%; background:#233f49; opacity:.45; }
.fighter-hero { left:5%; --lunge:24px; --recoil:-8px; }
.fighter-boss { right:1%; --lunge:-24px; --recoil:8px; }
.fighter-visual { position:relative; height:220px; transform-origin:50% 95%; }
.fighter-visual>img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(1px 2px 0 #42364e88); }
.fighter-boss .fighter-visual { height:190px; }
.fighter.is-attacking { z-index:2; }
.fighter.is-attacking .fighter-visual { animation:battle-lunge .5s cubic-bezier(.18,.7,.25,1) both; }
.fighter.is-hit .fighter-visual { animation:battle-recoil .42s ease-out both; }
.fighter.is-defeated .fighter-visual { opacity:.6; filter:grayscale(.7); }
.battle-damage { position:absolute; top:20%; left:50%; opacity:0; pointer-events:none; color:#fff0ce; font-size:30px; font-weight:900; text-shadow:-2px -2px #42364e,2px -2px #42364e,-2px 2px #42364e,2px 2px #42364e,0 3px #42364e; }
.fighter-hero .battle-damage { color:#ffd6b8; }
.fighter.is-hit .battle-damage { animation:battle-damage .5s ease-out both; }
.hit-spark { position:absolute; top:43%; left:48%; opacity:0; pointer-events:none; color:#ffe6a0; filter:drop-shadow(1px 2px 0 #78583c); }
.hit-spark .icon { width:39px; height:39px; stroke-width:2; fill:#f5bc4b; }
.fighter.is-hit .hit-spark { animation:battle-spark .32s ease-out both; }
.battle-turn { display:flex; align-items:center; gap:6px; margin-top:13px; }
.battle-turn strong { font-size:11px; font-weight:700; color:#e4d9b4; }
.battle-turn>span:last-child { margin-left:auto; font-size:10px; color:#bdd6c0; }
.battle-log { min-height:48px; margin-top:10px; font-size:13px; line-height:1.5; }
.battle-explanation { font-size:11px; line-height:1.5; color:#c0d1cd; padding-top:11px; border-top:1px solid #577780; }
@keyframes battle-lunge { 0%,100% { transform:translateX(0) rotate(0); } 30% { transform:translateX(var(--lunge)) rotate(3deg); } 56% { transform:translateX(var(--lunge)) rotate(-2deg); } }
@keyframes battle-recoil { 0%,100% { transform:translateX(0); } 25% { transform:translateX(var(--recoil)) rotate(-2deg); filter:brightness(1.16); } }
@keyframes battle-damage { 0% { opacity:0; transform:translate(-50%,8px) scale(.8); } 20% { opacity:1; transform:translate(-50%,-4px) scale(1.1); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-34px) scale(1); } }
@keyframes battle-spark { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-15deg); } 25% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(15deg); } }
@media(max-width:380px) {
  .goal-icon { width:28px; height:31px; }
  .goal-icon>.icon { width:22px; height:22px; }
  .next-goal { gap:7px; padding:8px 7px; }
  .goal-arrow { display:none; }
  .quest-journal-button { width:40px; }
  .goal-copy strong { font-size:11px; }
  .goal-copy>span { font-size:9px; }
  .battle-scene { height:244px; }
  .fighter-visual { height:194px; }
  .fighter-boss .fighter-visual { height:170px; }
  .battle-hud { gap:13px; }
  .battle-name>strong { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .fighter.is-attacking .fighter-visual,.fighter.is-hit .fighter-visual { transform:none; filter:none; }
  .fighter.is-hit .battle-damage { opacity:1; transform:translateX(-50%); }
  .hit-spark { display:none; }
}