/* ==============================
   ORGANISMS — the player's organisms, loaded after molecules.css. Unity is the
   source of truth: part 1 is exported from the "Common" part of Unity's
   Assets/Shared/UI/Organisms/Organisms.uss, same class names, same sections, same order
   (WEB_EXPORT.md run 5). Part 2 is hand-written.
   ============================== */

/* ==============================
   1. ORGANISMS: COMMON
   ============================== */
/* Exported from the "Common" part of Unity's Organisms.uss, section by section. */

/* generated:organisms:start */
/* ── Chat input area ── */
.chat-input-area {
  align-items: stretch;
  flex-grow: 1;
  align-self: stretch;
  padding: var(--space-3);
  background-color: var(--accent-secondary-deep);
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  height: auto;
}


/* ── Chat header ── */
.header-bottom-row {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
}

.header-bottom-row > * {
  margin-right: var(--space-6);
}

.header-bottom-row__last {
  margin-right: 0;
}

.header-char-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}

.header-char-col > * {
  margin-bottom: var(--space-2);
}

.header-char-col--portrait {
  position: relative;
  justify-content: center;
  flex-grow: 0;
  flex-shrink: 0;
  width: var(--space-8);
}

.char-stats-row {
  display: flex;
  align-items: stretch;
  margin-top: 0;
  flex-direction: row;
}

.char-stats-row > * {
  margin-right: var(--space-4);
}

.char-stats-row__last {
  margin-right: 0;
}

.character-display {
  width: 100%;
  aspect-ratio: 1;
  border-width: var(--border-width-thick);
  border-color: var(--accent-50);
  border-radius: var(--radius-circle);
  background-size: cover;
  background-position-x: center;
  background-position-y: top;
  transition: opacity var(--transition-normal), scale var(--transition-slow), border-color var(--transition-slow);
}

.character-display.portrait-pulse {
  scale: var(--active-scale);
  border-color: var(--accent-light);
}


/* ── Reward overlay ── */
.reward-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--black-85);
}


/* ── End screen ── */
.chat-end {
  background-color: var(--accent-secondary);
}


/* ── Story narration ── */
.story-narration__bg {
  background-color: var(--black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.story-narration__text {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  bottom: 0;
  text-align: center;
}


/* ── Story dialogue ── */
.story-bottom {
  flex-grow: 1;
  align-self: stretch;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-4);
}

.story-dialogue {
  display: none;
}

.story-dialogue__speaker {
  margin-bottom: var(--space-2);
}

.story-dialogue__body {
  min-height: var(--space-7);
}

.story-continue {
  align-self: flex-end;
  width: var(--space-3);
  height: var(--space-3);
  margin-top: var(--space-2);
  background-color: var(--accent);
  rotate: 45deg;
  opacity: 1;
  transition: opacity var(--transition-normal);
}

.story-continue--dim {
  opacity: var(--disabled-opacity);
}


/* ── Story choices ── */
.story-choices {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-2);
  display: none;
}

.story-choice,
.story-chapter {
  margin: var(--space-2);
}


/* ── Backdrop and toast host ── */
.dialog-backdrop {
  background-color: var(--black-50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  flex-direction: row;
}

.toast-container {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: var(--space-4);
}


/* ── Chapter select ── */
.story-chapters {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
}


/* ── HUD rail ── */
.hud-rail {
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-2);
}

.hud-rail > * {
  margin-bottom: var(--space-2);
}


/* ── Overlay layer ── */
.overlay {
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.overlay--visible {
  opacity: 1;
}
/* generated:organisms:end */


/* ==============================
   2. ORGANISMS: WEB ONLY
   ============================== */
/* Hand-written: what browsers need and Unity does itself. Same section names as
   the "Unity only" part of Unity's Organisms.uss; a section with no rules says so. */
/* ── Chat input area ── */
/* The emoji picker opens above the input; .show is set by chat-input.js. Unity has no emoji picker. */
.emoji-picker-container {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
}

.emoji-picker-container.show {
  display: block;
}

/* States set by the chat scripts: the ended chat hides its input, and a scripted chat swaps the input for its options.
   Unity: ChatController sets the displays. */
.chat-input-area.chat-disabled {
  display: none;
}

.chat-input-area.chat-scripted:not(.script-typing) .chat-input-group,
.chat-input-area.chat-scripted .emoji-picker-container {
  display: none;
}

/* ── Chat header ── */
/* The portrait is an <img>: fitted with object-fit. Unity: a background image. */
.character-display {
  border-style: solid;
  object-fit: cover;
  object-position: top center;
}

/* The name and title are one block with no gap between them. Unity: a plain element is already a column. */
.header-char-col__name {
  display: flex;
  flex-direction: column;
}

/* The pulse runs once as an animation, whose end the script waits for. Unity: ClassPulse, from C#. */
.character-display.portrait-pulse {
  animation: portrait-pulse var(--transition-slow);
}

/* ── Reward overlay ── */
/* The overlay is added to the page by reward-effects-overlay.js, over the whole window, and fades out when dismissed.
   Unity: a layer of the chat page, shown by RewardMoment.cs. */
.reward-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-reward);
}

.reward-overlay.reward-overlay-fade-out {
  animation: rewardOverlayFadeOut var(--transition-slow) forwards;
}

/* The win sequence before the card: a darkening layer, an orb that shakes and cracks, a white flash. Unity has none. */
.reward-vignette {
  position: fixed;
  inset: 0;
  z-index: var(--z-reward);
  background: var(--black-85);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.reward-vignette.active {
  opacity: 1;
}

.gacha-orb {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 var(--space-6) var(--accent-50), 0 0 var(--space-7) var(--accent-secondary-50), inset 0 0 var(--space-4) var(--white-10);
  position: absolute;
  opacity: 0;
}

.gacha-orb.gacha-appear {
  animation: gachaAppear var(--transition-slow) forwards;
}

.gacha-orb.gacha-shake-1 {
  animation: gachaShake1 var(--transition-slow) infinite;
  opacity: 1;
}

.gacha-orb.gacha-shake-2 {
  animation: gachaShake2 var(--transition-fast) infinite;
  opacity: 1;
  box-shadow: 0 0 var(--space-7) var(--accent), 0 0 var(--space-8) var(--accent-secondary-light), inset 0 0 var(--space-6) var(--white-50);
}

.gacha-orb.gacha-crack {
  animation: gachaCrack var(--transition-normal) forwards;
}

.white-flash {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: var(--z-reward);
  opacity: 0;
  pointer-events: none;
  animation: whiteFlash var(--transition-slow) forwards;
}

/* ── End screen ── */
/* No rules: the section is all common. */

/* ── Story narration ── */
/* No rules: the section is all common. */

/* ── Story dialogue ── */
/* Flex columns. Unity: every element already is one. */
.story-bottom {
  display: flex;
  flex-direction: column;
}

.story-dialogue {
  flex-direction: column;
}

/* ── Story choices ── */
/* No rules: the section is all common. */

/* ── Backdrop and toast host ── */
/* Both sit over the whole window, above the page. Unity: their place in the panel's hierarchy. */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.toast-container {
  position: fixed;
  z-index: var(--z-toast);
}

/* ── Chapter select ── */
.story-chapters {
  display: flex;
}

/* ── HUD rail ── */
.hud-rail {
  display: flex;
}

/* ── Overlay layer ── */
/* No rules: the section is all common. */