* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #14141c; color: #d8d8e2;
  font: 14px/1.45 system-ui, sans-serif; }
#board { position: absolute; inset: 0 320px 0 0; cursor: grab; }
#board.dragging { cursor: grabbing; }
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; padding: 14px;
  background: #1b1b26; border-left: 1px solid #2c2c3a; overflow-y: auto; }
#panel h2 { font-size: 15px; margin-bottom: 8px; }
#panel .outcome { border: 1px solid #2c2c3a; border-radius: 6px; padding: 8px; margin: 6px 0; }
#panel .outcome.likely-outcome { border-color: #c9a34e; }
/* Hint objective (renamed from "guiding star" in Task 23) — SHELVED, see CONFIG.HINT_OBJECTIVE. */
#panel .hint-objective { color: #e6c878; background: rgba(201, 163, 78, 0.12); border: 1px solid rgba(201, 163, 78, 0.4);
  border-radius: 6px; padding: 6px 8px; margin: 4px 0 8px; font-size: 13px; }
#panel .hint-objective.dim { color: #7a7266; background: rgba(122, 114, 102, 0.08); border-color: rgba(122, 114, 102, 0.25); }
/* Task 43 §2/§3: early-loss reason line + solution-reveal section — shown only once the
   game is over in a loss (see main.js's endTurn()/panel.js's renderPanel). */
#panel .loss-reason { color: #d88a7a; font-size: 13px; margin: 4px 0 8px; font-style: italic; }
/* Playtest fix (2026-07-21): fight-card spoils line — "Spoils if <side> falls: ⚔×N ✦×M" —
   see src/ui/panel.js's spoilsForSide/renderPanel. Muted like the loss-reason line above;
   not an alert, just informational. */
#panel .spoils-line { color: #a8a8b8; font-size: 12px; margin: 2px 0; }
/* Playtest fix (2026-07-21): the "current fate" readout — see src/ui/panel.js's
   renderFateReadout. Compact, sits right under the objective row. */
#panel .fate-readout { color: #9a9aac; font-size: 12px; margin: 2px 0 8px; }
/* Task 22: keyword hover-highlight — bolded entity/place names inside panel text. */
#panel .ename { font-weight: 600; cursor: pointer; text-decoration: underline dotted rgba(216, 216, 226, 0.35); text-underline-offset: 2px; }
/* Task 24: stronger hover affordance — a visible background "chip" behind the name. */
#panel .ename:hover { background: rgba(232, 217, 160, 0.25); padding: 1px 3px; border-radius: 3px; text-decoration: none; }
/* Task 24: hovering a whole objective row (not just its .ename) highlights the row —
   drives the canvas deadline line + subject-entity halo, see main.js's onHoverObjective. */
#panel .objective-row:hover { background: rgba(232, 217, 160, 0.06); border-radius: 4px; }
#panel button { background: #2c2c3a; color: inherit; border: 0; border-radius: 4px;
  padding: 4px 10px; margin: 2px 4px 0 0; cursor: pointer; }
#panel button:disabled { opacity: 0.4; cursor: default; }
/* Task 53 (click-character-then-button gifting, replacing Task 51's arm-a-chip-then-
   click-the-board flow): the inventory tray is now a PASSIVE readout — chips are plain
   inline <span>s (not buttons), just a per-type count so the player can see their
   resources at a glance. No hover/click affordance on them anymore. */
#panel .inventory-tray { margin: 8px 0; padding: 8px; background: rgba(90, 160, 232, 0.06);
  border: 1px solid rgba(90, 160, 232, 0.25); border-radius: 6px; }
#panel .inventory-chip { display: inline-block; font-size: 15px; font-weight: 600; margin-right: 8px; }
/* Task 53: the "Give ⚔ Fighting" / "Give ✦ Charisma" buttons on a selected character's
   identity card — the actual gift action now lives here (see src/ui/panel.js's
   renderGiveButtons). Inherit #panel button's base look; disabled state (zero buffs /
   not a legal target / dead) already dims via the shared #panel button:disabled rule. */
#panel .give-buttons { margin: 8px 0; }
#panel .give-button { font-weight: 600; }
/* USER DECISION (2026-07-19 playtest): "take back" a pending (not-yet-resolved) gift —
   one button per pending gift on the selected character's own card (src/ui/panel.js's
   renderPendingGifts). Muted relative to the give buttons (a correction affordance, not
   the primary action) but still a full #panel button otherwise. */
#panel .takeback-buttons { margin: 4px 0 8px; }
#panel .takeback-button { font-weight: 600; color: #c9a34e; }
/* Playtest fix (2026-07-23, "archetype descriptions"): the identity card's short rules
   line under the title — muted, informational, same register as .spoils-line. */
#panel .archetype-desc { color: #a8a8b8; font-size: 12px; margin: 0 0 6px; }
/* Playtest fix (2026-07-23): the compact "?" glossary toggle + its expanded panel — a
   small inline button next to the turn counter, opening a bordered card of every
   archetype present in this world (src/ui/panel.js's renderGlossary). */
#glossaryToggle { padding: 1px 8px; font-size: 12px; }
#panel .glossary-panel { margin: 6px 0; padding: 8px; background: rgba(232, 217, 160, 0.06);
  border: 1px solid rgba(232, 217, 160, 0.25); border-radius: 6px; }
#panel .glossary-entry { font-size: 12px; color: #c8c8d8; margin: 3px 0; }
#toasts { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
#toasts .toast { background: #262636; border: 1px solid #3a3a4e; border-radius: 6px;
  padding: 8px 12px; animation: fade 4s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Task 44 §1: restructured from a single centered text node (T43 and earlier) into a
   stacked column — headline, optional loss-reason line, and (loss + bank-solution only)
   a click-to-reveal "Show solution" button/expanded solution box — see
   src/ui/panel.js's renderEndScreen. overflow-y:auto is defensive (a long solution list
   plus the headline could in principle exceed the viewport height on a small window).
   pointer-events:none on the backdrop itself (re-enabled per-element below, on the
   actual interactive pieces) is a REAL BUG FIX, not just styling: §1's investigation
   found the pre-existing full-viewport banner (inset:0, z-index:10, no pointer-events
   override) sat on TOP of the sidebar panel and silently absorbed every click there —
   including "New game", making it UNREACHABLE from the end state despite always being
   rendered (see task-44-report.md's §1/§3 findings and main.js's Retry button, which hit
   the identical problem in testing). The dimmed backdrop area now passes clicks through
   to whatever's underneath (harmless — End turn is `disabled` once over, and any other
   panel interaction the player could still reach mid-game-over is inert/no-op by design)
   while the banner's own button/solution-box content stays fully clickable. */
#banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; background: rgba(10, 10, 16, 0.8); font-size: 34px; z-index: 10;
  text-align: center; padding: 24px; overflow-y: auto; pointer-events: none; }
#banner .banner-text { font-size: 34px; }
#banner .banner-loss-reason { font-size: 16px; color: #d88a7a; font-style: italic; }
#banner button { font-size: 16px; background: #2c2c3a; color: inherit; border: 1px solid #3a3a4e;
  border-radius: 6px; padding: 8px 18px; cursor: pointer; pointer-events: auto; }
#banner button:hover { background: #38384a; }
/* The expanded solution box — a distinct, high-contrast card (not just more plain text)
   so it reads as "the answer", the exact salience problem the T43 sidebar version had. */
#banner .banner-solution { font-size: 14px; text-align: left; background: #1b1b26;
  border: 1px solid #c9a34e; border-radius: 8px; padding: 16px 20px; max-width: 560px;
  max-height: 60vh; overflow-y: auto; pointer-events: auto; }
#banner .banner-solution p { margin: 4px 0; }
#banner .banner-solution-line { color: #d8d8e2; }
/* Task 57 (seed-creation interface): the "Generate fate" criteria form — four number
   inputs, a live time-estimate readout, progress/results below. Kept visually distinct
   (a bordered card) from the plain <p> rows around it, same idiom as .inventory-tray. */
#panel .genfate-form { margin: 8px 0; padding: 8px; background: rgba(160, 120, 232, 0.06);
  border: 1px solid rgba(160, 120, 232, 0.25); border-radius: 6px; }
#panel .genfate-field { margin: 4px 0; }
#panel .genfate-field label { display: inline-block; min-width: 140px; font-size: 13px; }
#panel .genfate-field input[type="number"] { width: 56px; background: #14141c; color: inherit;
  border: 1px solid #3a3a4e; border-radius: 4px; padding: 2px 4px; }
#panel .genfate-field-help { display: block; color: #77778a; font-size: 11px; margin-left: 2px; }
#panel .genfate-estimate { font-size: 13px; color: #c9a3e8; margin: 6px 0; }
#panel .genfate-estimate small { color: #77778a; }
#panel .genfate-results { margin: 8px 0; }
#panel .genfate-result-row { border: 1px solid #2c2c3a; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
#panel .genfate-play-button { font-weight: 600; }

/* "How to play" manual overlay — always-available Help button (#panel #helpToggle, next
   to the glossary "?" toggle), NOT a first-visit auto-open. A centered scrollable modal
   (DOM, not canvas), same dark card idiom as #banner .banner-solution — bordered card,
   own background, over a dimmed backdrop. Unlike #banner, this backdrop DOES intercept
   clicks (click-away-to-close is one of the three dismiss affordances the brief calls
   for, alongside the close button and Escape — main.js's keydown listener). */
/* Task (2026-07-25, "solutions must be visible during the game"): #solutionsOverlay (the
   mid-game "Solutions (N)" reveal, panel.js's renderSolutionsPanel) shares this EXACT
   modal shell — same selectors, same idiom — rather than a second near-duplicate ruleset,
   per the spec's "same conventions as the help overlay". */
#helpOverlay, #solutionsOverlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 16, 0.7); z-index: 11; padding: 24px; }
#helpOverlay .help-card, #solutionsOverlay .help-card { background: #1b1b26; border: 1px solid #3a3a4e; border-radius: 8px;
  padding: 20px 24px; max-width: 560px; max-height: 80vh; overflow-y: auto; text-align: left;
  font-size: 14px; color: #d8d8e2; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
#helpOverlay .help-header, #solutionsOverlay .help-header { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; font-size: 17px; }
#helpOverlay .help-header button, #solutionsOverlay .help-header button { font-size: 13px; }
#helpOverlay .help-body h3 { font-size: 14px; color: #e6c878; margin: 14px 0 4px; }
#helpOverlay .help-body h3:first-child { margin-top: 0; }
#helpOverlay .help-body p { margin: 4px 0; line-height: 1.5; }

/* Task 24: line-hover probability tooltip — positioned in JS (main.js) at cursor+12px. */
#linetip { position: absolute; pointer-events: none; z-index: 6; background: #1b1b26;
  border: 1px solid #3a3a4e; border-radius: 4px; padding: 3px 7px; font-size: 12px; color: #e8d9a0; }
/* Playtest fix (2026-07-23, "click disambiguation on overlapping lines"): the chooser
   popup — positioned in JS (main.js) at click+8px, above #linetip's own z-index (a click
   dismisses/replaces any lingering hover tooltip anyway, but this stays visually on top
   regardless). Unlike #linetip, this one IS interactive (pointer-events default, not
   none) — its rows are real clickable buttons. */
#chooser { position: absolute; z-index: 7; background: #1b1b26; border: 1px solid #c9a34e;
  border-radius: 6px; padding: 6px; min-width: 140px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
#chooser .chooser-title { font-size: 11px; color: #9a9aac; margin-bottom: 4px; padding: 0 4px; }
#chooser .chooser-row { display: block; width: 100%; text-align: left; background: transparent;
  border: 0; border-radius: 4px; padding: 5px 6px; margin: 1px 0; cursor: pointer; font: inherit;
  font-weight: 600; }
#chooser .chooser-row:hover { background: rgba(232, 217, 160, 0.15); }
#chooser .chooser-row small { color: #9a9aac; font-weight: 400; margin-left: 6px; }
/* Task 70 (interactive tutorial, Stage 1 — spec docs/superpowers/specs/2026-07-26-
   interactive-tutorial.md): the coach card — a small fixed DOM card, toast/chooser
   family styling (dark bordered card, own background), pinned bottom-left ABOVE #toasts
   so a toast never occludes it. Non-blocking (no full-viewport backdrop like
   #helpOverlay/#banner) — the whole point is the player keeps interacting with the live
   board while it's visible. */
#tutorialCoach { position: absolute; left: 14px; bottom: 84px; z-index: 8; max-width: 380px;
  background: #1b1b26; border: 1px solid #c9a34e; border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4); font-size: 13px; line-height: 1.5; }
#tutorialCoach .coach-text { margin-bottom: 8px; }
#tutorialCoach .coach-actions { display: flex; justify-content: flex-end; gap: 8px; }
#tutorialCoach button { font-size: 12px; background: #2c2c3a; color: inherit; border: 1px solid #3a3a4e;
  border-radius: 4px; padding: 4px 8px; cursor: pointer; }
#tutorialCoach button:hover { background: #38384a; }
/* A DOM anchor (e.g. #endturn) gets this class while its step is current — pulsing gold
   outline, same gold as the board's own tutorial highlight ring (render.js's
   drawTutorialHighlight/COLOR.marker) so the two anchor kinds read as one visual language. */
@keyframes tutorial-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 163, 78, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(201, 163, 78, 0); } }
.tutorial-highlight { outline: 2px solid #c9a34e; animation: tutorial-pulse 1.2s ease-in-out infinite; }
.hidden { display: none !important; }