/* ===========================================================================
   Infin8 Fish Finder — title-specific styling only.

   Everything structural (page shell, stage, overlays, side cards, touch dock)
   comes from ../assets/game-shell.css and must not be restated here. This file
   owns three things: taking the shell's duplicated HUD out of the visual layer,
   the topbar Hint control's state, and the field guide list.
   =========================================================================== */

/* Painted animals, not pixel art: scales, fins and mottling are built from many small marks and
   nearest-neighbour scaling turns those into gravel. */
#game-canvas {
  image-rendering: auto;
}

/* ---------------------------------------------------------------------------
   One HUD, drawn on the canvas.

   Fish Finder paints its prompt card across the top band of the stage and its
   status line across the bottom band, both measured from the same rect as the
   landscape. The shell's floating `.hud-row` chips would land directly on the
   prompt card — the single most information-dense thing on the screen — and the
   centred `.stage-callout` would land on the banner the canvas already draws.

   The chips stay in the markup because `aria-live` cannot read a canvas. They
   are taken out of the visual layer rather than deleted, and must not be
   restored to it.
   --------------------------------------------------------------------------- */
.hud .hud-row,
.stage-callout,
.hud .progress-track.stage-rail,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   Hint

   The hint control lives in the topbar (see index.html) rather than floating
   over the stage: the canvas prompt band fills the top of the stage edge to
   edge at every size, so an overlay there lands on the animal name, the hints or
   the round clock. Tapping the prompt band takes a hint too, which is the path
   that survives fullscreen on a phone. Nothing here positions it — it is an
   ordinary .icon-button — but it is dimmed when there is no hint left to take.
   --------------------------------------------------------------------------- */
#hint-button:disabled { opacity: 0.4; cursor: not-allowed; }
#hint-button:not(:disabled) { border-color: rgba(181, 109, 255, 0.55); color: var(--accent); }
/* The shell's topbar buttons are 38px, which is fine for a mouse and under the
   44px floor for a thumb. */
@media (pointer: coarse) { #hint-button { min-height: 44px; } }

/* ---------------------------------------------------------------------------
   Answer dock

   Three numbered answers plus pause. They are grouped on one side rather than
   split across the stage because they are one decision, and a player choosing
   between three options should not have to look in two places to find them.
   --------------------------------------------------------------------------- */
.answer-pad .touch-button {
  font-size: 1.35rem;
  font-weight: 950;
}

/* ---------------------------------------------------------------------------
   Reading size

   This is a game for young readers, so the page around the stage is set larger
   than the Arcade default. The shell's side cards run at 0.88rem and its notes
   at 0.84rem, which is fine for a leaderboard and too small for a child reading
   an animal description. Nothing here changes layout — only size, weight and line
   height — so the shell's grid and spacing still own the structure.
   --------------------------------------------------------------------------- */
.side-card p,
.side-card li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft, #d6dced);
}

.side-card h2 { font-size: 1.35rem; }
.side-card .eyebrow { font-size: 0.82rem; }
.overlay-card p { font-size: 1.06rem; line-height: 1.65; }
.overlay-note { font-size: 0.98rem; line-height: 1.6; }
.stat-list span { font-size: 0.82rem; }
.stat-list strong { font-size: 1.2rem; }
.stage-select label { font-size: 0.86rem; }
.side-card th { font-size: 0.76rem; }
.side-card td { font-size: 0.95rem; }

/* ---------------------------------------------------------------------------
   Field guide

   One row per animal: the common name a child reads, with the binomial beneath
   it as supporting detail. This is the only place in the title that lists both
   — the prompt card carries the binomial for the animal being asked about, and
   the labels under the animals themselves are the common name alone.
   --------------------------------------------------------------------------- */
.region-label {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.field-guide {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.field-guide li {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.field-guide em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Portrait phones

   The shell reserves a 236px band under the stage for a full movement dock.
   Fish Finder's dock is one row of round buttons — three answers and a pause
   — so it needs barely half that, and `--dock-band` is the shell's documented
   contract for saying so. Every pixel returned here goes to the canvas, which
   is what the near-square portrait stage is scaled into.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) and (orientation: portrait) {
  .game-stage { --dock-band: 124px; }
  /* The shell's 3:2 canvas is sized for a side-scroller. Fish Finder has a
     second, near-square logical stage for exactly this case — a taller box is
     what lets the prompt card carry a readable animal name and three hints — and
     game.js picks that preset from the canvas aspect, so this rule is what
     switches the game into portrait mode. */
  .game-stage canvas { aspect-ratio: 9 / 10; }
}

/* ---------------------------------------------------------------------------
   Landscape phones

   The shell floats the dock over the stage there, which for most titles is fine
   because the corners are empty terrain. Here the bottom of the canvas is the
   status band — the fact line, the region and the score — so a floating dock
   would sit straight on top of the text it exists beside. The dock gets its own
   reserved strip instead, the same treatment portrait already gets.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .game-stage { height: 100svh; padding-bottom: 78px; }
  .touch-controls {
    inset: auto max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    height: 78px;
    align-items: center;
    scale: 1;
    opacity: 1;
  }
  .touch-button { width: 54px; height: 54px; min-width: 54px; min-height: 54px; }
  .hud { bottom: 78px; }
}

/* The start card carries two long paragraphs of teaching copy, so it needs to
   scroll on a short landscape phone rather than clipping its own buttons. */
@media (max-height: 560px) and (orientation: landscape) {
  .overlay-card { max-height: calc(100% - 24px); overflow-y: auto; }
}