/* How to Play illustrations mirror the live v180 HUD, without game behavior.
   Scope every rule to this page; shared rankings/pickup/threat styles stay intact. */
.howto-page .hud-overview {
  margin: 18px 0 22px;
  padding: 26px 18px 16px;
  border: 1px solid rgba(106, 82, 40, 0.72);
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0, #143342 0, #091923 75%);
}

.howto-page .hud-assembled {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.howto-page .hud-overview figcaption {
  max-width: 460px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.howto-page .hud-guide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}

.howto-page .hud-guide .guide-visual { min-height: 164px; }
.howto-page .hud-guide .hud-score-demo { align-items: center; }
.howto-page .hud-score-demo span { min-width: 0; }
.howto-page .hud-score-demo span:last-child strong { color: #6ee0e8; font-size: 28px; }

/* Keep the original uncropped 2:3 illustrations and full-contrast counts. */
.howto-page .guide-action {
  position: relative;
  display: block;
  flex: none;
  width: 64px;
  height: 96px;
}

.howto-page .guide-action img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.68) brightness(0.92) contrast(0.94);
}

.howto-page .guide-action-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  color: #e7c278;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.85);
}

.howto-page .guide-action-detail { width: 80px; height: 120px; }
.howto-page .guide-action-detail .guide-action-count { bottom: 15px; font-size: 15px; }

.howto-page .guide-center { flex: none; width: 150px; }
.howto-page .guide-center > .guide-instruments { margin: 0 0 12px 3px; }

.howto-page .guide-instruments {
  --guide-dial-size: 50px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  height: var(--guide-dial-size);
  color: #f5ead0;
  font-family: "Segoe UI", sans-serif;
  text-shadow: 0 1px 2px #071422, 0 0 4px #071422;
}

.howto-page .guide-speed {
  position: relative;
  display: block;
  flex: none;
  width: var(--guide-dial-size);
  height: var(--guide-dial-size);
  border: 2px solid #d7b371;
  border-radius: 50%;
  background: #09151c;
  box-shadow: inset 0 0 0 1px #554128;
}

.howto-page .guide-speed svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.howto-page .guide-speed-track { fill: none; stroke: #4e6269; stroke-width: 2; }
.howto-page .guide-speed-arc { fill: none; stroke: #75e2e8; stroke-width: 2; }
.howto-page .guide-speed-ticks { fill: none; stroke: #bfa468; stroke-width: 1; }
.howto-page .guide-speed text { fill: currentColor; font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.howto-page .guide-speed-unit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  color: #c5d2d5;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.howto-page .guide-engine { position: relative; flex: none; width: 52px; height: 100%; }
.howto-page .guide-instrument-label { display: block; color: #e7c278; font-size: 11px; line-height: 1.2; font-weight: 500; }
.howto-page .guide-hull-label { position: absolute; left: 0; bottom: -2.2px; }
.howto-page .guide-engine-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 3px; height: 16px; margin-top: 2px; }
.howto-page .guide-engine-bars i { display: block; height: 100%; border-radius: 1px; background: #31434b; }
.howto-page .guide-engine-bars i:nth-child(1) { height: 45%; }
.howto-page .guide-engine-bars i:nth-child(2) { height: 65%; }
.howto-page .guide-engine-bars i:nth-child(3) { height: 82%; }
.howto-page .guide-engine-bars i.is-on { background: linear-gradient(#acf0f1, #62c5d2); }

.howto-page .guide-instruments-detail { --guide-dial-size: 64px; gap: 10px; align-items: center; }
.howto-page .guide-instruments-detail .guide-engine { width: 64px; height: auto; }
.howto-page .guide-instruments-detail .guide-engine-bars { height: 20px; }
.howto-page .guide-instruments-detail .guide-speed-unit { bottom: 5px; font-size: 11px; }
.howto-page .guide-instruments-detail .guide-instrument-label { font-size: 13px; }

.howto-page .guide-pips { display: flex; gap: 5px; }
.howto-page .guide-pips i { display: block; flex: 1; min-width: 0; height: 11px; border: 0; border-radius: 3px; background: #84daca; box-shadow: inset 0 1px 0 #daf5e944; }
.howto-page .guide-pips.is-damaged i { background: #efc568; }
.howto-page .guide-pips.is-critical i { background: #ff8b76; }
.howto-page .guide-pips i.is-off { background: #283b43; box-shadow: none; }
.howto-page .guide-hull-states { flex-direction: column; gap: 13px; }
.howto-page .guide-hull-state { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; width: 214px; max-width: 100%; }
.howto-page .guide-hull-state small { color: #9bb2bf; font-size: 11px; }

.howto-page .guide-dock { display: flex; justify-content: center; gap: 8px; }
.howto-page .guide-center > .guide-dock { margin-top: 7px; }
.howto-page .guide-dock-face { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border: 1px solid #977644; border-radius: 50%; background: #10232c; color: #e7c278; box-shadow: inset 0 1px 0 #ead29825; }
.howto-page .guide-dock-face svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.howto-page .guide-dock-detail { gap: 12px; }
.howto-page .guide-dock-detail .guide-dock-face { width: 52px; height: 52px; }
.howto-page .guide-dock-detail svg { width: 26px; height: 26px; }

@media (max-width: 420px) {
  .howto-page .hud-overview { padding: 22px 10px 14px; }
  .howto-page .hud-assembled { gap: 12px; }
  .howto-page .hud-assembled .guide-action { width: 52px; height: 78px; }
  .howto-page .hud-assembled .guide-action-count { bottom: 8px; font-size: 10px; }
  .howto-page .guide-center { width: 120px; }
  .howto-page .guide-center > .guide-instruments { --guide-dial-size: 44px; margin-bottom: 8px; }
  .howto-page .guide-center .guide-speed-unit { font-size: 8px; }
  .howto-page .guide-center .guide-engine-bars { height: 12px; }
  .howto-page .guide-center .guide-hull-label { bottom: -5px; }
  .howto-page .guide-center .guide-pips i { height: 9px; }
  .howto-page .guide-center .guide-dock-face { width: 30px; height: 30px; }
}