/* 3.0 clarity pass: loaded after style.css. Readability and first-battle guidance only; no layout rewrites. */

/* ---- Battle HUD: every vital bar says what it is ---- */
.bar.shield, .bar.energy { height: 14px; }
.bar.shield > span, .bar.energy > span { font-size: calc(9.5px * var(--ts, 1)); padding: 0 8px; }
.bar > span b { color: #f2f6f0; }
.bar > span b::before { display: inline-block; margin-right: 5px; font-size: .95em; letter-spacing: 0; opacity: .9; }
.bar.hull > span b::before { content: '✚'; }
.bar.shield > span b::before { content: '⬡'; }
.bar.energy > span b::before { content: '⚡'; }
.vitals { gap: 4px; padding: 7px 9px 8px; border-radius: 12px; background: linear-gradient(180deg, #04101a66, #04101ab8); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.hud.compact .vitals { padding: 4px 6px; }
.hud.compact .bar.shield, .hud.compact .bar.energy { height: 6px; }
.hud.compact .bar.shield > span, .hud.compact .bar.energy > span { display: none; }

/* The chain counter only appears once there is a chain to show; salvage stays. */
.hud-chain:not(.active) > strong, .hud-chain:not(.active) > span, .hud-chain:not(.active) > i { display: none; }
.hud-chain:not(.active) { opacity: .85; }

/* The goal is the one line a new player must find. */
#objective { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 4px; padding: 6px 11px; border-radius: 9px; background: #04101ab8; border: 1px solid #8ff5df40; }
#objective:not(:empty)::before { content: 'OBJECTIVE'; flex: none; padding: 1px 6px; border-radius: 4px; background: var(--mint); color: #062019; font: 700 calc(10px * var(--ts, 1)) var(--mono); letter-spacing: .14em; text-shadow: none; }
.hud.compact #objective::before { display: none; }
.hud-clock { padding: 5px 16px 6px; border-radius: 0 0 12px 12px; top: 0; background: linear-gradient(180deg, #04101ad9, #04101a8c); border: 1px solid var(--line); border-top: 0; backdrop-filter: blur(6px); }
.hud.compact .hud-clock { padding: 2px 8px; border-radius: 8px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .hud-clock { border-radius: 8px; border-top: 1px solid var(--line); padding: 2px 8px; } }

/* ---- Flight training: keycaps, progress, and a spotlight on the control being taught ---- */
.tutorial { padding: 14px 20px 12px; border-color: #e2c694aa; background: linear-gradient(180deg, #10262ef2, #0a1a21f2); backdrop-filter: blur(8px); }
.tutorial p { margin-top: 8px; line-height: 1.45; }
.tut-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tut-keys kbd { min-width: 34px; padding: 6px 9px 7px; border-radius: 7px; border: 1px solid #e2c69488; border-bottom-width: 3px; background: #172e36; color: var(--gold); font: 700 calc(14px * var(--ts, 1)) var(--mono); text-align: center; box-shadow: 0 2px 0 #0006; }
.tut-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.tut-dots i { width: 18px; height: 3px; border-radius: 2px; background: #ffffff1f; }
.tut-dots i.done { background: var(--mint); }
.tut-dots i.now { background: var(--gold); box-shadow: 0 0 8px #e2c694aa; }
.tut-skip { margin-top: 8px; padding: 3px 10px; border: 0; background: none; color: var(--muted); font: calc(11.5px * var(--ts, 1)) var(--mono); text-decoration: underline; cursor: pointer; pointer-events: auto; }
.tut-skip:hover { color: var(--text); }

/* Controls not taught yet step back, so the screen grows with the player. */
#hud[data-tut] :is(.squad-bar, #surge, #jump, #abilities, #boost) { transition: opacity .4s, filter .4s; }
#hud:is([data-tut="0"], [data-tut="1"]) :is(#abilities, #boost),
#hud:is([data-tut="0"], [data-tut="1"], [data-tut="2"], [data-tut="3"], [data-tut="4"]) :is(.squad-bar, #surge, #jump),
#hud[data-tut="2"] #abilities { opacity: .32; filter: saturate(.4); }
@keyframes tut-spot { 0%, 100% { box-shadow: 0 0 0 2px #e2c694cc, 0 0 0 6px #e2c69422; } 50% { box-shadow: 0 0 0 2px #e2c694, 0 0 22px 8px #e2c69455; } }
#hud[data-tut="2"] #boost, #hud[data-tut="3"] #abilities, #hud:is([data-tut="5"], [data-tut="6"]) .squad-bar, #hud[data-tut="7"] .quest-list:not(:empty) { border-radius: 10px; animation: tut-spot 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #hud[data-tut] * { animation: none !important; } }

/* ---- Lobby: quieter first screen ---- */
.quick.is-collapsed > :not(.quick-toggle) { display: none; }
.quick-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; background: none; color: var(--muted); font: 600 calc(12.5px * var(--ts, 1)) var(--mono); letter-spacing: .04em; cursor: pointer; }
.quick-toggle:hover { color: var(--text); }
.quick-toggle::after { content: '▾'; transition: transform .2s; }
.quick:not(.is-collapsed) > .quick-toggle::after { transform: rotate(180deg); }
.quick.is-collapsed { display: inline-flex; padding: 5px 9px; border-radius: 999px; }
.quick.has-toggle > .q-title, .quick.has-toggle > :is(strong, .q-label):first-of-type { display: none; }
#continue, #launch-mission { position: relative; }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 #e2c69466, 0 10px 30px #e2c69433; } 50% { box-shadow: 0 0 0 9px #e2c69400, 0 10px 34px #e2c69455; } }
body.first-run #continue { animation: cta-pulse 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { body.first-run #continue { animation: none; } }

/* Resource names next to the numbers on wide screens, so the icons need no guessing. */
@media (min-width: 1500px) {
  .coins .coin::after { margin-left: 5px; font: 500 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .06em; color: var(--muted); }
  .coins .coin:nth-child(1)::after { content: 'credits'; } .coins .coin:nth-child(2)::after { content: 'cores'; }
  .coins .coin:nth-child(3)::after { content: 'scrap'; } .coins .coin:nth-child(4)::after { content: 'exotics'; } .coins .coin:nth-child(5)::after { content: 'relics'; }
}

/* Phones: the ship's name sits under the ship, not across it. */
@media (max-width: 760px) {
  .deck .hero-ship { height: auto; grid-template-rows: 170px auto; }
  .deck .hero-ship > :not(.ship-caption) { grid-row: 1; height: 170px; min-height: 0; }
  .deck .hero-ship > .ship-caption { position: static; grid-row: 2; margin-top: 4px; }
  .deck .hero-ship .ship-caption h2 { font-size: 24px; margin: 4px 0 2px; }
}

/* ---- Long tabs: a jump bar that stays under the top bar ---- */
.jump-bar { position: sticky; top: var(--topbar-h, 0px); z-index: 15; display: flex; align-items: center; gap: 6px; margin: -8px 0 20px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #0a1820f2; overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(8px); }
.jump-bar::-webkit-scrollbar { display: none; }
.jump-bar.stuck { border-radius: 0 0 14px 14px; border-top-color: transparent; box-shadow: 0 10px 24px #0008; }
.jump-label { flex: none; margin: 0 6px 0 4px; font: 600 calc(11px * var(--ts, 1)) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.jump-bar button { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--text); font: 600 calc(13.5px * var(--ts, 1)) var(--font); white-space: nowrap; cursor: pointer; }
.jump-bar button:hover { border-color: var(--line2); background: #ffffff0a; }
.jump-bar button.on { background: var(--gold); color: #1a1408; }
.jump-bar .jump-top { margin-left: auto; width: 34px; padding: 7px 0; color: var(--muted); border-color: var(--line); }
@media (max-width: 640px) { .jump-label { display: none; } .jump-bar { margin-inline: -4px; padding: 6px; } .jump-bar button { padding: 7px 11px; } }

/* Skirmish: the launch button is always within reach, however long the setup is. */
#tab-skirmish .launch-bar { position: sticky; bottom: 12px; z-index: 14; box-shadow: 0 -8px 30px #000a, 0 0 0 1px #e2c69433; backdrop-filter: blur(8px); }
@media (max-width: 760px) { #tab-skirmish .launch-bar { bottom: calc(84px + env(safe-area-inset-bottom)); padding: 12px 14px; } #tab-skirmish .launch-bar strong { font-size: 17px; } }
@media (max-width: 760px) { #tab-skirmish .launch-bar .eyebrow { display: none; } #tab-skirmish .launch-bar { gap: 8px; } }

/* 3.2: an upgrade says what it bought */
@keyframes spec-bump { 0% { box-shadow: 0 0 0 0 #e2c694aa; } 40% { box-shadow: 0 0 0 6px #e2c69433; } 100% { box-shadow: 0 0 0 0 #e2c69400; } }
.ship-specs.bumped span { animation: spec-bump 1.1s ease-out 2; border-color: #e2c69488; }
.upgrade-note { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; border: 1px solid #e2c69466; background: #e2c6941a; color: var(--text); font-size: calc(13.5px * var(--ts, 1)); line-height: 1.45; animation: fade .3s ease-out; }
.upgrade-note b { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .ship-specs.bumped span { animation: none; } }

/* 3.9: the prize dock and prize rows in the battle report */
.prize-how { margin: 4px 0 12px; max-width: 70ch; font-size: 13px; line-height: 1.5; }
.ship-card.prize .prize-name { font-weight: 500; color: var(--muted); font-size: .86em; }
.prize-stars { display: block; margin: 2px 0 6px; color: var(--gold); letter-spacing: .12em; font-size: 14px; }
.prize-stars i { font-style: normal; color: #ffffff26; }
.prize-traits { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.prize-traits b { display: inline-block; min-width: 46px; font-variant-numeric: tabular-nums; }
.prize-traits .good b { color: var(--mint); }
.prize-traits .quirk b { color: #ff9a84; }
.prize-traits small { color: var(--muted); }
.prize-drop strong small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }