/* mode_controller.css - IT115 per-mode visual presets.
 *
 * Keyed off body[data-ui-mode="..."], which mode_controller.js sets from the
 * backend's authoritative ui_mode. When the UI_MODES flag is off the attribute
 * is absent and NONE of these rules apply (byte-identical to pre-IT115).
 *
 * R6 grading (owner-locked 2026-06-12):
 *   - explore is NOT fully neutral: a slight "curious" off-baseline tint.
 *   - non-combat activity (talk) gets a calm SERENE treatment.
 *   - combat / scene / puzzle keep the stronger distinct accents.
 *   - every accent's opacity is multiplied by --ui-mode-accent-strength,
 *     the player-adjustable knob (Settings -> Mode accents; 0 disables).
 */

:root {
  --ui-mode-accent-strength: 1;
}

/* The mode accent overlay: a full-viewport, click-through frame whose color
 * says the mode at a glance. One element, recolored per mode. */
#ui-mode-accent {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40; /* under modals/overlays, over the dashboard */
  opacity: 0;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Explore = curious: the faintest warm lift at the edges, a screen that is
 * "awake" rather than neutral. Deliberately subtle. */
body[data-ui-mode="explore"] #ui-mode-accent {
  opacity: calc(0.6 * var(--ui-mode-accent-strength));
  box-shadow: inset 0 0 70px rgba(190, 170, 120, 0.10);
}

/* R1b serene: a calm long-running activity (craft chain / gather trip)
 * deepens explore into a soft green-amber hush. Engine-signalled via
 * data.ui_activity; only meaningful layered over explore. */
body[data-ui-mode="explore"][data-ui-activity] #ui-mode-accent {
  opacity: calc(0.9 * var(--ui-mode-accent-strength));
  box-shadow:
    inset 0 0 0 1px rgba(150, 180, 130, 0.35),
    inset 0 0 130px rgba(80, 100, 55, 0.18);
}

/* Combat = danger: hot red inset edge + faint vignette. */
body[data-ui-mode="combat"] #ui-mode-accent {
  opacity: calc(1 * var(--ui-mode-accent-strength));
  box-shadow:
    inset 0 0 0 3px rgba(200, 40, 30, 0.85),
    inset 0 0 90px rgba(150, 10, 10, 0.35);
}

/* Talk = serene: soft, low-contrast amber wash. Calm focus, not alarm. */
body[data-ui-mode="talk"] #ui-mode-accent {
  opacity: calc(1 * var(--ui-mode-accent-strength));
  box-shadow:
    inset 0 0 0 1px rgba(205, 170, 110, 0.45),
    inset 0 0 140px rgba(110, 85, 35, 0.22);
}

/* Scene = focused/staged: cool teal edge, stronger vignette (theatre). */
body[data-ui-mode="scene"] #ui-mode-accent {
  opacity: calc(1 * var(--ui-mode-accent-strength));
  box-shadow:
    inset 0 0 0 2px rgba(60, 170, 170, 0.7),
    inset 0 0 140px rgba(10, 60, 70, 0.40);
}

/* Puzzle = contemplative: violet edge. */
body[data-ui-mode="puzzle"] #ui-mode-accent {
  opacity: calc(1 * var(--ui-mode-accent-strength));
  box-shadow:
    inset 0 0 0 2px rgba(150, 110, 210, 0.7),
    inset 0 0 110px rgba(70, 40, 120, 0.30);
}

/* Cinematic / dream = full takeover: heavy letterbox-style vignette.
 * (These modes already have their own overlays; the accent just deepens the
 * "the world has stopped" feel.) */
body[data-ui-mode="cinematic"] #ui-mode-accent,
body[data-ui-mode="dream"] #ui-mode-accent {
  opacity: calc(1 * var(--ui-mode-accent-strength));
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.75);
}

/* A short, subtle settle animation when the mode flips. */
body.ui-mode-transition #ui-mode-accent {
  animation: ui-mode-flash 0.45s ease;
}

@keyframes ui-mode-flash {
  0% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* ------------------------------------------------------------------ */
/* R1a - layout-preset panel states.                                   */
/* mode_controller.js stamps data-ui-panel-state onto data-panel       */
/* elements per the active preset. No attribute = untouched ("show").  */
/* Dim keeps panels usable (focus cue, not a lockout); hidden is the   */
/* full morph for modes that want a real takeover.                     */
/* ------------------------------------------------------------------ */

[data-panel][data-ui-panel-state="dim"] {
  opacity: 0.35;
  filter: saturate(0.5);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

[data-panel][data-ui-panel-state="dim"]:hover {
  opacity: 0.9;
  filter: saturate(0.9);
}

[data-panel][data-ui-panel-state="hidden"] {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* R2 - talk mode layout: the conversation is the screen.              */
/* The NPC portrait leads; the player portrait is secondary; choices   */
/* read as reply CHIPS. All scoped to body[data-ui-mode="talk"] so a   */
/* flag-off client never sees any of it.                               */
/* ------------------------------------------------------------------ */

body[data-ui-mode="talk"] .event-modal {
  box-shadow: 0 0 80px rgba(110, 85, 35, 0.35), 0 0 0 1px rgba(205, 170, 110, 0.35);
}

/* The IT115 owner decision (2026-06-12) supersedes the 2026-05-28 equal-size
 * rule INSIDE talk mode only: the NPC leads, the player is secondary. With
 * the flag off the 200/200 equal-size baseline still applies everywhere. */
body[data-ui-mode="talk"] .event-npc-side .event-portrait {
  width: 260px;
  height: 260px;
}

body[data-ui-mode="talk"] .event-player-side .event-portrait {
  width: 130px;
  height: 130px;
  opacity: 0.85;
  align-self: flex-end;
}

body[data-ui-mode="talk"] .event-npc-side .event-portrait-name {
  font-size: 1.05em;
}

body[data-ui-mode="talk"] .event-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-ui-mode="talk"] .event-choice-btn {
  border-radius: 16px;
  padding: 6px 14px;
}