/* The guide lives inside #game, so it follows the game's sensor rotation. */
#fishGuide {
  position: absolute; left: 10px; top: 160px; z-index: 6;
  width: 160px; padding: 9px 10px 10px; border: 1px solid #e8b64a88;
  border-radius: 15px; background: rgba(9, 34, 41, .94);
  box-shadow: 0 8px 24px #03181d55; pointer-events: none;
  color: #f6efd9; contain: layout style; font-size: 12px;
}
#fishGuide .guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#fishGuide .guide-kicker { font-size: 10px; letter-spacing: .1em; color: #e8b64a; white-space: nowrap; }
#fishGuide .guide-count { font-size: 10px; color: #b9c9c4; }
#fishGuide svg { display: block; width: 100%; height: 77px; overflow: visible; margin: 5px 0; }
#fishGuide .guide-caption { margin: 0; font-weight: 900; line-height: 1.3; min-height: 31px; }
#fishGuide .guide-track { display: flex; gap: 4px; margin-top: 8px; }
#fishGuide .guide-track i { flex: 1; height: 3px; border-radius: 2px; background: #f6efd930; }
#fishGuide .guide-track i.on { background: #e8b64a; }
#fishGuide[data-track="false"] .guide-track { display: none; }
#fishGuide[data-tone="hot"] { border-color: #ff9f94; }
#fishGuide[data-tone="hot"] .guide-kicker { color: #ffb0a8; }
#guideToggle { font-family: var(--body); font-size: 18px; font-weight: 900; }
#guideToggle[aria-expanded="true"] { color: var(--brass); border-color: var(--brass); }
#guideToggle:focus-visible { outline-offset: -4px; }
#fishGuide[data-compact="true"] { width: 144px; padding: 7px 9px; }
#fishGuide[data-compact="true"] svg { height: 50px; margin: 2px 0; }
#fishGuide[data-compact="true"] .guide-caption { font-size: 11px; min-height: 28px; }
#fishGuide[data-compact="true"] .guide-track { margin-top: 5px; }
#fishGuide[data-compact="tiny"] { width: 152px; padding: 6px 8px; }
#fishGuide[data-compact="tiny"] .guide-heading { display: none; }
#fishGuide[data-compact="tiny"] .guide-art,
#fishGuide[data-compact="tiny"] .guide-video { float: left; width: 42px; height: 42px; margin: 0 8px 0 0; }
#fishGuide[data-compact="tiny"] svg { height: 42px; margin: 0; }
#fishGuide[data-compact="tiny"] .guide-caption { margin-left: 50px; font-size: 11px; min-height: 42px; }
#fishGuide[data-compact="tiny"] .guide-track { display: none; }
#fishGuide .g-dot { fill: #ff7866; stroke: #ffe7de; stroke-width: 2; }
#fishGuide .g-trail { fill: none; stroke: #e8b64a; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 5; }
#fishGuide .g-pause { fill: #ffb0a8; }
#fishGuide .guide-video { display: block; width: 100%; height: 77px; margin: 5px 0; object-fit: contain; }
#fishGuide[data-compact="true"] .guide-video { height: 50px; margin: 2px 0; }
#pullDemo { min-height: 0; flex: 1 1 auto; }
#pullDemoVideo { display: block; width: 100%; height: min(calc(100cqh - 220px), 680px); object-fit: contain; border-radius: 12px; background: #092229; }
#help:has(#pullDemo:not([hidden])) .tabs { display: none; }
#help #watchPullDemo { font-size: 14px; }