/* Hallmark · component: mission HUD and equipment rack · genre: playful · theme: existing cream/coral
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 */
.topbar { height: 66px; padding: 10px 26px; }
.brand { font-size: 22px; gap: 10px; letter-spacing: -1px; }
.brand-small { font-size: 10px; font-weight: 650; margin-top: 6px; }
.brand img { width: 38px; height: 38px; }
.top-actions { gap: 14px; }
.wallet { font-size: 14px; gap: 8px; }
.icon-button { width: 44px; height: 44px; }
.mission { height: auto; min-height: 84px; margin-bottom: 12px; padding: 14px 18px; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 16px; }
.mission-intro { display: flex; flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
.eyebrow { flex-shrink: 0; padding: 7px 9px; border: 1px solid var(--color-line); border-radius: 7px; font-size: 11px; letter-spacing: .3px; color: var(--color-muted-strong); white-space: nowrap; }
.mission-copy { min-width: 0; }
.mission h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.8px; }
.mission-intro p { font-size: 12px; color: var(--color-muted-strong); margin-top: 5px; }
.mission-intro .protected-status { padding: 6px 9px; font-size: 11px; line-height: 1.4; margin-left: auto; max-width: 170px; background: var(--color-green-soft); color: var(--color-green); border: 1px solid var(--color-line); }
.mission-intro .protected-status.broken { background: var(--color-accent-soft); color: var(--color-accent-dark); border-color: var(--color-accent); }
.goal-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.goal-top { grid-row: auto; justify-content: space-between; gap: 12px; }
.goal-value { display: flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--color-muted-strong); }
.goal-value b { font-size: 26px; color: var(--color-ink); line-height: 1; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.goal-value span { margin: 0; }
.goal-card .goal-top > .goal-value { display: flex; }
.goal-bottom > span:first-child { display: inline; }
#goal-status { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; color: var(--color-muted-strong); background: var(--color-paper); }
.mission[data-state="failed"] #goal-status { color: var(--color-accent-dark); background: var(--color-accent-soft); }
.mission[data-state="complete"] #goal-status { color: var(--color-green); background: var(--color-green-soft); }
.progress-track { height: 7px; border-radius: 3px; }
.progress-track > div { width: 100%; transform: scaleX(0); transform-origin: left; border-radius: 3px; transition: transform 280ms var(--ease-out); }
.progress-track i { height: 13px; top: -3px; border-radius: 1px; }
.goal-bottom { font-size: 10px; color: var(--color-muted-strong); gap: 8px; }
.upgrade-button { min-height: 44px; padding: 10px 12px; gap: 8px; font-size: 12px; border: 1px solid var(--color-line); background: var(--color-paper); border-radius: 10px; }
.upgrade-icon { font-size: 22px; line-height: 1; }
.arena { height: calc(100dvh - 342px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 420px; border-color: var(--color-bar-border); border-radius: 18px; }
.arena-labels { max-width: 60%; }
.arena-labels .live-label { min-height: 40px; font-size: 12px; padding: 9px 12px; background: var(--color-surface); border: 1px solid var(--color-line); }
.score-box { padding: 9px 13px; min-width: 108px; background: var(--color-surface); box-shadow: none; }
.score-box span { font-size: 9px; color: var(--color-muted-strong); }
.score-box b { font-size: 27px; }
.control-panel { display: grid; grid-template-columns: minmax(0, 1fr) 285px; grid-template-areas: "heading heading" "tools fire"; gap: 9px 18px; padding: 12px 0 0; }
.control-heading { grid-area: heading; display: flex; align-items: center; flex-direction: row; gap: 16px; min-height: 36px; margin: 0; }
.loadout-heading { font-size: 12px; font-weight: 850; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.loadout-heading b { color: var(--color-muted-strong); font-size: 10px; font-weight: 750; padding: 1px 5px; border: 1px solid var(--color-line); border-radius: 4px; }
.energy { font-size: 11px; color: var(--color-muted-strong); gap: 5px; }
.energy > span:first-child { font-size: 20px; }
.energy b { font-size: 15px; }
.energy > span:last-child { font-size: 10px; }
.crew-actions { margin-left: auto; gap: 8px; }
.nav-button { font-size: 11px; min-height: 36px; padding: 8px 13px; border-radius: 8px; }
.tools { grid-area: tools; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tool { height: 112px; min-width: 0; flex-direction: column; gap: 1px; padding: 6px 5px 8px; border: 1px solid var(--color-line); border-radius: 12px; justify-content: center; overflow: hidden; }
.tool .tool-art { width: 80px; height: 60px; flex-shrink: 0; }
.tool-text { font-size: 12px; line-height: 1.25; text-align: center; }
.tool small { margin-top: 4px; font-size: 10px; color: var(--color-muted-strong); font-weight: 600; }
.tool-key { font-size: 9px; line-height: 1.3; top: 6px; right: 8px; }
.tool[aria-pressed="true"] { border-width: 1px; box-shadow: inset 0 0 0 1px var(--color-accent); }
.tool[aria-pressed="true"] .tool-text { color: var(--color-accent-dark); }
.tool.locked, .tool:disabled { opacity: 1; background: var(--color-paper); }
.tool.locked .tool-art { filter: saturate(.25); opacity: .62; }
.tool.locked .tool-text { color: var(--color-muted-strong); }
.tool.locked small::before { content: "▣ "; font-size: 8px; }
.tool:disabled:not(.locked) .tool-art { opacity: .5; }
.fire-row { grid-area: fire; display: flex; gap: 8px; justify-content: space-between; }
.selected-equipment { min-height: 55px; display: flex; align-items: center; gap: 9px; }
.selected-equipment > span { flex-shrink: 0; }
.selected-equipment .tool-art { width: 59px; height: 45px; }
.selected-equipment > div { min-width: 0; }
#selected-tool-name { display: block; font-size: 14px; line-height: 1.3; }
.fire-row #tool-hint { text-align: left; font-size: 11px; color: var(--color-muted-strong); margin-top: 4px; line-height: 1.35; }
#selected-tool-shape { display: block; font-size: 10px; color: var(--color-muted-strong); margin-top: 3px; }
.fire-button { min-height: 44px; font-size: 12px; padding: 11px 16px; border-radius: 10px; }
.fire-button, .primary-button { color: var(--color-accent-ink); }
.fire-button:hover, .primary-button:hover { color: var(--color-surface); }
.fire-button[data-state="loading"] { cursor: wait; }
.fire-button[data-state="loading"] > span:last-child { animation: equipment-load 900ms linear infinite; }
.fire-button[data-state="error"] { background: var(--color-accent-dark); color: var(--color-surface); }
.fire-button[data-state="success"] { background: var(--color-green); color: var(--color-surface); }
.tool.is-firing .tool-art-body { animation: equipment-recoil 220ms var(--ease-out); transform-origin: 50% 70%; }
.tool.is-focus, .tool.is-focus:focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tool.is-active { transform: translateY(1px); background: var(--color-green-soft); }
.tool[data-state="error"] { outline: 2px solid var(--color-accent-dark); }
.tool[data-state="success"] { outline: 2px solid var(--color-green); }
.tool[data-state="loading"] .tool-art-body { opacity: .55; }
.page-footer { min-height: 28px; padding: 10px 26px; font-size: 10px; }
@media (hover: hover) {
  .tool:hover:not(:disabled), .tool.is-hover { background: var(--color-green-soft); }
  .tool[aria-pressed="true"]:hover { background: var(--color-accent-soft); }
  .tool:hover:not(:disabled) .tool-art-body { transform: translateY(-2px); }
}
@keyframes equipment-recoil { 35% { transform: translate(-3px, 1px) rotate(-5deg); } }
@keyframes equipment-load { to { transform: rotate(360deg); } }
@media (max-width: 1200px) {
  .mission { gap: 18px; grid-template-columns: minmax(0, 1fr) 265px auto; }
  .mission-intro { gap: 12px; }
  .mission-intro .protected-status { display: none; }
  .control-panel { grid-template-columns: minmax(0, 1fr) 230px; gap: 9px 12px; }
  .tool .tool-art { width: 68px; height: 51px; }
  .tool { height: 104px; }
  .selected-equipment .tool-art { width: 45px; height: 38px; }
  .fire-row #tool-hint { font-size: 10px; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .mission { grid-template-columns: minmax(0, 1fr) 225px auto; padding: 12px; gap: 12px; }
  .eyebrow { padding: 6px; font-size: 10px; }
  .mission h1 { font-size: 18px; }
  .mission-intro p { font-size: 11px; }
  .upgrade-button > span:last-child { display: none; }
  .control-panel { grid-template-columns: minmax(0, 1fr) 180px; }
  .tool .tool-art { width: 56px; height: 48px; }
  .tool small { font-size: 9px; }
  .selected-equipment .tool-art { display: none; }
  .fire-row #tool-hint { font-size: 10px; }
}
@media (max-width: 767px) {
  .topbar { height: 60px; padding: 8px 12px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .brand-small { font-size: 8px; margin-top: 5px; }
  .top-actions { gap: 8px; }
  .wallet { font-size: 12px; gap: 5px; }
  .coin-symbol { width: 21px; height: 21px; font-size: 11px; }
  .play-layout { padding: 0 10px; }
  .mission { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity upgrade" "goal goal"; padding: 10px 12px; gap: 10px; min-height: 109px; margin-bottom: 8px; border-radius: 12px; }
  .mission-intro { grid-area: identity; gap: 9px; }
  .eyebrow { padding: 5px 6px; font-size: 9px; letter-spacing: 0; }
  .mission h1 { font-size: 18px; line-height: 1.2; }
  .mission-intro p { font-size: 10px; line-height: 1.2; margin-top: 4px; }
  .upgrade-button { grid-area: upgrade; min-height: 44px; padding: 7px 9px; gap: 4px; font-size: 10px; }
  .upgrade-icon { font-size: 18px; }
  .upgrade-button > span:last-child { display: none; }
  .goal-card { grid-area: goal; grid-template-columns: minmax(0, 1fr) 130px; gap: 5px 12px; align-items: center; }
  .goal-top { grid-column: 2; grid-row: 1 / 3; align-items: center; gap: 6px; }
  .goal-value { gap: 3px; }
  .goal-value b { font-size: 24px; }
  .goal-value span { font-size: 9px; }
  #goal-status { font-size: 10px; padding: 3px 5px; white-space: nowrap; }
  .goal-bottom { font-size: 9px; }
  .progress-track { align-self: end; }
  .arena { height: calc(100dvh - 480px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 340px; border-radius: 13px; }
  .arena-top { top: 11px; left: 11px; right: 11px; }
  .arena-labels .live-label { min-height: 44px; font-size: 10px; padding: 8px 9px; }
  .score-box { padding: 7px 10px; min-width: 82px; border-radius: 8px; }
  .score-box b { font-size: 23px; }
  .score-box span { font-size: 8px; }
  .arena-bottom { left: 10px; right: 10px; bottom: 10px; }
  .world-hint { display: none; }
  .camera-actions { width: 100%; justify-content: flex-end; }
  .camera-button { width: 44px; height: 44px; }
  .control-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "tools" "fire"; gap: 7px; padding-top: 7px; }
  .control-heading { gap: 9px; min-height: 36px; }
  .loadout-heading { font-size: 11px; gap: 5px; }
  .loadout-heading b { font-size: 9px; padding: 1px 4px; }
  .crew-actions { gap: 5px; }
  .nav-button { font-size: 10px; min-height: 44px; padding: 7px 9px; }
  .energy { font-size: 10px; gap: 3px; }
  .energy b { font-size: 13px; }
  .energy > span:last-child { font-size: 9px; }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tool { height: 76px; padding: 3px 4px 6px; border-radius: 9px; gap: 0; }
  .tool .tool-art { width: 58px; height: 39px; }
  .tool-text { font-size: 11px; }
  .tool small { font-size: 9px; margin-top: 2px; }
  .tool-key { font-size: 8px; top: 5px; right: 6px; }
  .fire-row { flex-direction: row; align-items: center; min-height: 49px; gap: 8px; }
  .selected-equipment { min-height: 44px; gap: 5px; flex: 1; }
  .selected-equipment .tool-art { width: 40px; height: 34px; }
  #selected-tool-name { font-size: 12px; }
  .fire-row #tool-hint { display: none; }
  #selected-tool-shape { font-size: 9px; margin-top: 3px; }
  .fire-button { width: auto; min-width: 155px; min-height: 44px; padding: 10px 12px; font-size: 11px; gap: 12px; }
  .page-footer { padding: 9px 12px; }
}
@media (max-width: 380px) {
  .brand { font-size: 16px; }
  .brand img { width: 30px; height: 30px; }
  .mission { padding: 10px; }
  .eyebrow { font-size: 8px; padding: 5px; }
  .mission h1 { font-size: 16px; }
  .mission-intro { gap: 7px; }
  .mission-intro p { font-size: 9px; }
  .goal-card { grid-template-columns: minmax(0, 1fr) 124px; gap: 5px 9px; }
  .nav-button { padding: 7px; font-size: 9px; }
  .energy-label { display: none; }
  .loadout-heading { font-size: 10px; }
  .selected-equipment .tool-art { display: none; }
  .fire-button { min-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .progress-track > div { transition: none; }
  .tool .tool-art-body, .fire-button > span:last-child { animation: none !important; transform: none !important; }
}
body[data-reduced-motion="true"] .tool-art-body,
body[data-reduced-motion="true"] .fire-button > span:last-child { animation: none !important; transform: none !important; }
body[data-reduced-motion="true"] .progress-track > div { transition: none; }
body[data-paused="true"] .tool-art-body,
body[data-paused="true"] .fire-button > span:last-child { animation-play-state: paused; }