/* web/games.css — Phase 6 AMENDMENT 5 "games to play with your pet"
   (docs/PHASE6-BRIEF-2026-09-04.md). Standalone stylesheet for web/games.js;
   NOT included from index.html by this agent (another agent owns that file
   right now — see docs/HANDOFF-NOTES.md for the exact <link> line to add).
   Uses the same :root tokens style.css already defines (--paper, --ink,
   --muted, --line, --panel, --panel-2, --accent, --accent-ink, --danger,
   --shadow, --font-display, --font-body) — this file assumes style.css is
   loaded first and never redefines those tokens itself. */

/* ---- the "Play" trigger, docked beside #interactBar (bottom-centre) ---- */
#gamesTrigger {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(calc(50% + 96px), 0); /* sits to the right of the interaction bar's own centred column */
  z-index: 9;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px var(--shadow);
}
#gamesTrigger:hover { border-color: var(--accent); }
#gamesTrigger .gmTriggerIcon { font-size: 16px; }

/* ---- full-stage overlay host — same "fills #stage, topbar stays clickable
   above it" convention as #loading/#cinema ---- */
#gamesOverlay {
  position: absolute; inset: 0;
  z-index: 46; /* above interactBar/thoughtHost (8/5/9), below the topbar (55) and modal panels (50-70) */
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; /* only inner cards/buttons opt back in below */
}
#gamesOverlay > * { pointer-events: auto; }

/* ---- shared card chrome (picker card, rules card, HUD shell, ending) ---- */
.gmPicker, .gmEnding {
  position: relative;
  width: min(480px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px var(--shadow);
}
.gmClose {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gmClose:hover { border-color: var(--accent); }
.gmLoading { text-align: center; padding: 30px 10px; color: var(--muted); font-family: var(--font-display); font-style: italic; }
.gmEmpty { color: var(--muted); text-align: center; padding: 20px 0; }

/* ---- picker ---- */
.gmPickerHead { margin-bottom: 14px; padding-right: 30px; }
.gmPickerTitle { font-family: var(--font-display); font-weight: 650; font-size: 19px; }
.gmPickerSub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.gmCardList { display: flex; flex-direction: column; gap: 8px; }
.gmCard {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
}
.gmCard.gmComingSoon { opacity: 0.85; }
.gmCardIcon { font-size: 26px; width: 34px; text-align: center; flex: none; }
.gmCardBody { flex: 1; min-width: 0; }
.gmCardTitle { font-family: var(--font-display); font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gmSoonTag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  padding: 2px 7px; border-radius: 999px;
}
.gmCardNote { color: var(--muted); font-size: 12px; margin-top: 2px; }
.gmCardBtn {
  flex: none; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  cursor: pointer;
}
.gmCardBtn:hover { filter: brightness(1.06); }
.gmCardBtn:disabled { background: transparent; color: var(--muted); border-color: var(--line); cursor: default; opacity: 0.7; }

/* ---- rules card (coming-soon detail) ---- */
.gmRulesCard { text-align: center; }
.gmRulesIcon { font-size: 40px; width: auto; margin: 6px auto 8px; }
.gmRulesTagline { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--muted); margin: 4px 0; }
.gmRulesText { font-size: 13.5px; line-height: 1.55; margin: 10px 0; color: var(--ink); }
.gmRulesSoon { color: var(--muted); font-size: 12.5px; margin: 10px 0 16px; }
.gmBackBtn {
  min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.gmBackBtn:hover { border-color: var(--accent); }

/* ---- in-session HUD: a slim top strip, not a full card, so the pet and
   props underneath stay visible while playing ---- */
.gmHud {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  width: min(420px, 92vw);
  /* S2-2 fix (2026-09-05 QA verify pass): the HUD had no height ceiling at
     all, so on a short viewport it simply grew past the bottom of the
     screen — combined with the mobile preset below pinning it by `bottom`
     instead of `top`, that pushed its TOP edge to a negative offset (fully
     off-screen, unreachable, confirmed live at 531x419 on .grHud specifically:
     docs/reviews/2026-09-05-QA-final-predeploy.md S2-2). Bound it to the
     real viewport and let it scroll internally instead. */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: auto;
}
.gmHudTop { display: flex; align-items: center; gap: 10px; }
.gmHudTitle { font-family: var(--font-display); font-weight: 650; font-size: 14px; flex: 1; }
.gmHudScore { font-size: 12px; color: var(--muted); }
.gmHudScore b { color: var(--ink); font-family: var(--font-display); }
.gmHudTimer {
  font-family: var(--font-display); font-weight: 650; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; min-width: 34px; text-align: center;
}
.gmHudEnd { position: static; width: 26px; height: 26px; font-size: 15px; }
.gmHint { font-size: 12.5px; color: var(--ink); text-align: center; }
.gmHudPrompt:empty, .gmHudControls:empty { display: none; }
.gmHudControls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
/* AMENDMENT 3: a beat button must not stretch to fill the row when it sits
   beside the puzzle grid / stamina bar / tension band. */
.gmHudControls > * { flex: 0 0 auto; }
.gmHudControls .gmTension, .gmHudControls .gmStamina { flex: 1 1 100%; }
.gmHudControls .gmBeatSub { flex: 1 1 100%; text-align: center; }
.gmHudControls .gmChoiceRow, .gmHudControls .gmPuzzle, .gmHudControls .gmPad { flex: 1 1 100%; min-width: 0; }

/* ---- ring (cooldown / timing window), reused for drop-it and tricks ---- */
.gmDropBtn { display: inline-flex; align-items: center; gap: 8px; }
.gmRing { transform: rotate(-90deg); }
.gmRingTrack { fill: none; stroke: var(--line); stroke-width: 6; }
.gmRingFill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }

/* ---- tricks prompt card ---- */
.gmPromptCard { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gmPromptWord { font-family: var(--font-display); font-weight: 650; font-size: 20px; }

/* ---- ending card ---- */
.gmEnding { text-align: center; }
.gmEndTitle { font-family: var(--font-display); font-weight: 650; font-size: 19px; margin-top: 4px; }
.gmEndLine { font-family: var(--font-display); font-style: italic; font-size: 14.5px; line-height: 1.5; margin: 8px 0 16px; }
.gmEndStats { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; }
.gmEndStats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gmEndStats b { font-family: var(--font-display); font-weight: 650; font-size: 20px; color: var(--accent); }
.gmEndStats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.gmEndActions { display: flex; justify-content: center; gap: 10px; }


/* =====================================================================
   Phase 7 AMENDMENT 3 -- "games and training must be an actual challenge"
   HUD additions: live grade projection, combo, distraction warnings, the
   per-game beat controls (tug tension band, tag stamina, the puzzle grid,
   the Simon-says pad, the choice rows) and the graded end card.
   ===================================================================== */

/* ---- grade badges (picker chips, HUD projection, end card) ---- */
.gmGrade {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em;
  border-radius: 8px; padding: 2px 8px; line-height: 1.35;
  border: 1px solid transparent;
}
.gmGradeS { background: #f5d67a22; color: #d9a520; border-color: #d9a52055; }
.gmGradeA { background: #6fcf9722; color: #3f9d69; border-color: #3f9d6955; }
.gmGradeB { background: #4fa3e022; color: #3d84b8; border-color: #3d84b855; }
.gmGradeC { background: #e0a04022; color: #b8802f; border-color: #b8802f55; }
.gmGradeF { background: #e0533a1c; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

.gmHudLvl { margin-left: 8px; font-size: 11px; color: var(--muted); font-weight: 600; }
.gmHudGrade { min-width: 30px; text-align: center; font-size: 15px; transition: transform 0.12s ease; }
.gmHudCombo b { color: var(--accent); font-family: var(--font-display); }
.gmBeatGood { animation: gmPop 0.28s ease; }
.gmBeatBad { animation: gmShake 0.28s ease; }
@keyframes gmPop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes gmShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---- session progress bar under the HUD top row ---- */
.gmHudBar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 8px 0 2px; }
.gmHudBarFill { height: 100%; background: var(--accent); transition: width 0.1s linear; }

/* ---- distraction warning banner ---- */
.gmWarn {
  margin: 8px 0 2px; padding: 7px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  animation: gmWarnIn 0.2s ease;
}
@keyframes gmWarnIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- picker chips ---- */
.gmChips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.gmChip { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.gmChipLvl { color: var(--ink); }
.gmChipMastery { border-color: #d9a52066; color: #b8862a; }
.gmChipBadge { border-color: #d9a52088; color: #b8862a; background: #f5d67a1c; }
.gmChipBored { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.gmBadgeRow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* ---- hint variants ---- */
.gmHintGood { color: #3f9d69; font-weight: 600; }
.gmHintBad { color: var(--danger); font-weight: 600; }

/* ---- the shared "tap the beat" button ---- */
.gmBeatBtn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; }
.gmBeatRing { display: inline-flex; width: 34px; height: 34px; }
.gmBeatRing svg { width: 34px; height: 34px; }
/* The beat ring sits ON the accent button, so it needs the ink colour. */
.gmBeatBtn .gmRingFill { stroke: var(--accent-ink); }
.gmBeatBtn .gmRingTrack { stroke: color-mix(in srgb, var(--accent-ink) 28%, transparent); }
.gmBeatLabel { font-weight: 700; white-space: nowrap; }
.gmBeatSub { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ---- tug: the tension band ---- */
.gmTension {
  position: relative; height: 26px; border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--line); overflow: hidden;
}
.gmTensionZone { position: absolute; top: 0; bottom: 0; background: #6fcf9733; border-left: 1px solid #6fcf97; border-right: 1px solid #6fcf97; }
.gmTensionFill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.gmTensionMark { position: absolute; top: 2px; bottom: 2px; width: 3px; background: var(--ink); border-radius: 2px; }
.gmTensionGood .gmTensionMark { background: #3f9d69; }
.gmTensionHigh .gmTensionMark { background: var(--danger); }
.gmTensionHigh { border-color: var(--danger); }

/* ---- tag: stamina ---- */
.gmStamina { height: 8px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.gmStaminaFill { height: 100%; background: linear-gradient(90deg, var(--danger), #6fcf97); transition: width 0.1s linear; }

/* ---- choice rows (hiding spots, ambush box spots) ---- */
.gmChoiceRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 100%; }
.gmChoice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 12px; min-height: 44px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.gmChoice:hover { border-color: var(--accent); }
.gmChoiceLabel { font-weight: 650; font-size: 12.5px; }
.gmChoiceStars { font-size: 11px; color: #d9a520; letter-spacing: 1px; }

/* ---- puzzle feeder grid ---- */
.gmPuzzle { display: grid; gap: 5px; justify-content: center; margin-bottom: 10px; }
.gmTile {
  width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-size: 18px; line-height: 1; transition: transform 0.14s ease, border-color 0.14s ease;
}
.gmTile:hover { border-color: var(--accent); }
.gmTileOk { border-color: #6fcf97; color: #3f9d69; background: #6fcf9718; }

/* ---- tricks: the Simon-says pad ---- */
.gmPad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.gmPadKey {
  min-height: 44px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-weight: 650; font-size: 12.5px;
}
.gmPadKey:hover { border-color: var(--accent); }
.gmPadKey:active { background: var(--accent); color: var(--accent-ink); }
.gmPadRing { display: flex; justify-content: center; }
.gmPromptStep { font-size: 11px; color: var(--muted); }

/* ---- end card ---- */
.gmEndGrade {
  display: inline-block; font-size: 40px; line-height: 1; padding: 10px 20px;
  border-radius: 16px; margin-bottom: 6px;
}
.gmEndBlurb { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.gmEndFail { font-size: 12.5px; color: var(--danger); font-weight: 600; margin: 0 0 6px; }
.gmEndLevel { font-size: 12.5px; font-weight: 650; color: #3f9d69; margin: 0 0 8px; }
.gmEndBadge {
  font-size: 12.5px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  background: #f5d67a1c; border: 1px solid #d9a52055; color: #8a6410;
}
.gmEndBored, .gmEndEstimate { font-size: 11.5px; color: var(--muted); margin: 0 0 10px; }

/* ---- mobile preset: full-width sheets, larger tap targets, trigger moves
   above the (also bottom-docked, sheet-ified) interaction bar so the two
   never overlap on a short viewport ---- */
@media (max-width: 640px) {
  #gamesTrigger {
    left: auto; right: 12px; bottom: 84px; transform: none;
    min-height: 44px;
  }
  .gmPicker, .gmEnding { width: 94vw; max-height: 88vh; padding: 16px; }
  /* S2-2 fix: `bottom`-anchoring with no ceiling let a tall HUD's computed
     top go negative (off-screen, see the .gmHud rule's own comment above) —
     cap it so the bottom anchor can never push the top above the viewport. */
  .gmHud { top: auto; bottom: 96px; width: 94vw; max-height: calc(100vh - 116px); }
  .gmCard { flex-wrap: wrap; }
  .gmCardBtn, .gmBackBtn { min-height: 44px; }
  .gmCardBtn { width: 100%; }
  /* AMENDMENT 3 additions: keep every new control a real 44px tap target. */
  .gmChoice, .gmPadKey, .gmBeatBtn { min-height: 46px; }
  .gmPad { grid-template-columns: repeat(2, 1fr); }
  .gmTile { width: 44px; height: 44px; }
  .gmTension { height: 30px; }
  .gmEndGrade { font-size: 34px; padding: 8px 16px; }
  .gmEndStats { gap: 14px; flex-wrap: wrap; }
  .gmHudGrade { font-size: 14px; }
}


/* =====================================================================
   AMENDMENT 5 -- the Grooming game (11th game): a wider console (not the
   slim top strip the other ten use) since it carries a coat diagram, a
   tool tray and two meters; still translucent so the pet stays visible in
   the 3D stage behind it.
   ===================================================================== */
.grHud { width: min(520px, 94vw); top: 60px; padding: 14px 16px; gap: 10px; }
.grMoodLine { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--muted); text-align: center; }
.grMeters { display: flex; flex-direction: column; gap: 5px; }
.grMeterRow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.grMeterRow .barTrack { flex: 1; }
.grMeterLabel { width: 62px; flex: none; }
.grPatienceFill { background: var(--green-1, #6fcf97); }
.grPatienceFill.grLow { background: var(--danger); }
.grAnnoyFill { background: var(--accent); }
.grAnnoyFill.grHigh { background: var(--danger); }

/* ---- the coat diagram: a schematic side-on silhouette, zones as hotspots ---- */
.grCoatWrap { position: relative; width: 100%; aspect-ratio: 16/7; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.grZone {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.grZone:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
.grZone:active { cursor: grabbing; }
.grZone.grDone { background: color-mix(in srgb, #6fcf97 22%, transparent); border-color: #6fcf97; border-style: solid; }
.grZone.grWarn { animation: grWarnFlash 0.4s ease; }
@keyframes grWarnFlash { 0%, 100% { background: color-mix(in srgb, var(--accent) 10%, transparent); } 40% { background: color-mix(in srgb, var(--danger) 45%, transparent); border-color: var(--danger); } }
.grZoneArrow { font-size: 13px; color: var(--muted); opacity: 0.8; pointer-events: none; }
.grZoneLabel { font-size: 10px; font-weight: 650; color: var(--ink); pointer-events: none; text-align: center; line-height: 1.1; }
.grZoneRing { pointer-events: none; transform: rotate(-90deg); }
.grRingTrack { fill: none; stroke: var(--line); stroke-width: 3; }
.grRingFill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.15s linear; }
.grZone.grDone .grRingFill { stroke: #6fcf97; }

/* ---- nails/ears/teeth: chips, not coat hotspots (no grain direction) ---- */
.grChipRow { display: flex; justify-content: center; gap: 8px; }
.grChip {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; touch-action: none;
}
.grChip:hover { border-color: var(--accent); }
.grChip.grDone { border-color: #6fcf97; background: color-mix(in srgb, #6fcf97 18%, transparent); }
.grChip.grWarn { animation: grWarnFlash 0.4s ease; }
.grChipIcon { font-size: 14px; }
.grChip .grChipRing { width: 16px; height: 16px; }
.grChip .grChipRing circle { stroke-width: 2.5; }

/* ---- tool tray: only owned tools, quality/speed pips, job on hover ---- */
.grTray { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.grTool {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 9px; min-width: 0;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.grTool:hover { border-color: var(--accent); }
.grTool.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.grToolKey { font-size: 9px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.grToolIcon { font-size: 16px; flex: none; }
.grToolBody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.grToolName { font-size: 11px; font-weight: 650; white-space: nowrap; }
.grToolPips { font-size: 9px; color: var(--muted); white-space: nowrap; }

/* ---- pet + finish ---- */
.grActions { display: flex; gap: 8px; justify-content: center; align-items: center; }
.grPetBtn { display: inline-flex; align-items: center; gap: 6px; }
.grPetRing { font-size: 10px; opacity: 0.85; }

/* ---- end card's coverage/correctness/gentleness bars + hygiene line ---- */
.gmEndGroomBars { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; text-align: left; }
.gmEndGroomBar { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.gmEndGroomLabel { width: 78px; flex: none; }
.gmEndGroomBar .barTrack { flex: 1; }
.gmEndGroomPct { width: 32px; text-align: right; flex: none; color: var(--ink); font-weight: 650; }
.gmEndGroomHygiene { font-size: 12.5px; font-weight: 650; color: #3f9d69; margin: 0 0 10px; }

@media (max-width: 640px) {
  .grHud { top: auto; bottom: 96px; width: 94vw; max-height: calc(100vh - 116px); }
  .grZoneLabel { font-size: 9px; }
  .grTool { min-height: 44px; }
  .grPetBtn, .grChip { min-height: 44px; }
}

/* ---- S2-2 fix: on a genuinely SHORT viewport (531x419 was this review's
   own repro size) the console's full stack — title, mood line, two meters,
   the coat diagram, the nails/ears/teeth chips, the tool tray and the
   pet/finish actions — cannot all fit even at the width-based compaction
   above. Scale the whole console down (height-based query, independent of
   width) so the coat diagram — the one thing that MUST stay fully visible
   and strokeable per this fix's own acceptance bar — lands inside the
   viewport without relying on the overflow-y:auto scroll above as the only
   way to reach it. Anchored from the TOP here (not `bottom`, which is what
   pushed the top negative in the first place on a tall panel + short
   viewport combination) so the visible region always starts at a real,
   positive, on-screen coordinate. */
@media (max-height: 520px) {
  .grHud { top: 6px; bottom: auto; padding: 8px 10px; gap: 6px; max-height: calc(100vh - 12px); }
  .grMoodLine { display: none; }
  .grMeters { gap: 3px; }
  .grMeterRow { font-size: 9px; gap: 6px; }
  .grMeterLabel { width: 48px; }
  .grCoatWrap { aspect-ratio: 16 / 5; min-height: 76px; border-radius: 10px; }
  .grZoneLabel { font-size: 7.5px; }
  .grZoneArrow { font-size: 10px; }
  .grChipRow { gap: 5px; }
  .grChip { padding: 4px 7px; font-size: 10px; min-height: 0; }
  .grChipIcon { font-size: 12px; }
  .grTray { gap: 4px; }
  .grTool { padding: 4px 7px; min-height: 0; }
  .grToolName { font-size: 9.5px; }
  .grToolPips { font-size: 8px; }
  .grActions { gap: 6px; }
  .grPetBtn, .grChip { min-height: 34px; }
}

/* =====================================================================
   Phase 7 AMENDMENT 3 -- the TRAIN session (web/skills.js) as a Simon-says
   drill: the cue pad, the distraction banner, and the graded end card.
   These `sk*` rules live here rather than in web/skills.css because this
   lane owns games.css and only the train-session MECHANICS in skills.js --
   not skills.css, which belongs to the skills-panel lane. Both stylesheets
   are linked from index.html, and the grade badge reuses .gmGrade* above.
   ===================================================================== */
.skCuePad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 4px; }
.skCue {
  min-height: 44px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-weight: 650; font-size: 12.5px;
}
.skCue:hover { border-color: var(--accent); }
.skCue:active { background: var(--accent); color: var(--accent-ink); }
.skCueFocus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.skWarn {
  margin: 6px 0; padding: 7px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  font-size: 12.5px; font-weight: 600;
}
.skEndGrade { display: inline-block; font-size: 34px; line-height: 1; padding: 8px 16px; border-radius: 14px; margin-bottom: 4px; }
@media (max-width: 640px) {
  .skCuePad { grid-template-columns: repeat(2, 1fr); }
  .skCue { min-height: 46px; }
}