/* ── Fonts ────────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/DM-Sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/DM-Sans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/DM-Sans-600.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/DM-Sans-700.ttf') format('truetype');
}

/* [hidden] must win over component display rules (.chip, .skills-panel, …) */
[hidden] { display: none !important; }

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

html, body {
  overscroll-behavior: none;
}

:root {
  --color-bg: #0d0009;
  --color-surface: rgba(255, 255, 255, 0.12);
  --color-surface-dark: rgba(255, 255, 255, 0.25);
  --color-surface-darker: rgba(255, 255, 255, 0.40);
  --color-text: #f0e8f0;
  --color-text-muted: rgba(240, 232, 240, 0.50);
  --glass-blur: blur(8px);
  --glass-blur-subtle: blur(2px);

  --radius-circle: 9999px;
  --radius-button: 16px;
  --radius-bar: 24px;

  --header-icon-size: 79px;
  --button-height: 70px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  position: relative;
}

.glass {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.glass-subtle {
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
}

/* ── Scene layers — the Level screen's own full-page stage art ───── */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene__bg,
.scene__fg {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transition: all 0.3s ease-out;
}

/* App layout */
.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 660px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
}

.app > * {
  pointer-events: auto;
}

.app > .main,
#screen-level .main {
  pointer-events: none;
}

/* ── Shared background/foreground — persists across Home/Story/Chapter ──
   .app-scene__bg / .app-scene__fg are "pose" wrappers: their position,
   opacity and filter transition to match whichever screen is active, so
   switching screens moves/dims the existing element instead of restarting
   a fresh reveal. Each wraps two stacked .app-scene__layer images (a/b) —
   only one is opacity:1 at a time, so swapping which one is "on top" lets
   the picture itself crossfade independently of the pose. When the picture
   doesn't change, neither layer's opacity moves, so no crossfade is seen —
   only the shared pose transitions. */
.app-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Opaque base: the active screen above it turns transparent so this
     layer shows through, but screens further back in the stack (e.g. Home
     behind Story) must not bleed through wherever that screen's own
     content doesn't fully cover the viewport. */
  background: var(--color-bg);
}

.app-scene__layer {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.app-scene__layer--visible {
  opacity: 1;
}

/* Foreground crossfade images — object-fit (not background-image) so pose
   "hero" can size by the picture's own aspect ratio like the old <img>
   portrait did; "chapter" switches it to a full-bleed cover backdrop. */
.app-scene__fg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0;
  transition: opacity 0.5s ease, object-fit 0s, object-position 0s;
}
.app-scene__fg-layer.app-scene__layer--visible {
  opacity: 1;
}

/* Background pose: always the same dimmed, blurred backdrop treatment on
   every screen it appears on — only its own opacity (shown vs. not) moves. */
.app-scene__bg {
  position: absolute;
  inset: -24px; /* hide blur edge bleed */
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.5s ease;
}
.app-scene__bg--shown {
  opacity: 0.25;
}

/* Foreground pose: three states along one continuous transition —
   hidden (Home, off to the left) → hero (Girl screen) → chapter (Chapter
   screen). transition:all covers position/size/opacity/filter together.
   --fg-entry-x carries the slide-in offset (0 once settled); --fg-hero-x /
   --fg-hero-y / --fg-hero-scale are per-story hero adjustments (story.js
   heroOffsetX/heroOffsetY/heroScale). Chapter pose deliberately reuses the
   *same* transform as hero (not its own variables) — Girl → Chapter must
   have zero position change, only the opacity/mask/filter/image crossfade.
   Every pose below sets the same full property set — opacity, transform,
   mask-image, filter — so a transition between any two poses always has
   two real values to interpolate, instead of silently falling through to
   this base rule's value on one side. */
.app-scene__fg {
  --fg-entry-x: -100px;
  --fg-hero-x: 0%;
  --fg-hero-y: 0%;
  --fg-hero-scale: 1;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(var(--fg-entry-x));
  transform-origin: bottom right;
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pose "Y" — Girl screen: large, crisp, right-aligned portrait. */
.app-scene__fg--pose-hero {
  opacity: 1;
  transform: translateX(var(--fg-hero-x)) translateY(var(--fg-hero-y)) scale(var(--fg-hero-scale));
  transform-origin: bottom right;
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.app-scene__fg--pose-hero .app-scene__fg-layer {
  object-fit: contain;
  object-position: right bottom;
}

/* Pose "Z" — Chapter screen: same position/scale as hero (zero movement
   on Girl <-> Chapter), just dimmed and unmasked. */
.app-scene__fg--pose-chapter {
  opacity: 0.35;
  transform: translateX(var(--fg-hero-x)) translateY(var(--fg-hero-y)) scale(var(--fg-hero-scale));
  transform-origin: bottom right;
  mask-image: none;
  -webkit-mask-image: none;
  filter: none;
}
.app-scene__fg--pose-chapter .app-scene__fg-layer {
  object-fit: contain;
  object-position: right bottom;
}

/* Chapter → Level (game): a plain fade, no movement. Scoped to opacity
   only so it doesn't inherit the pose transition's transform/filter/mask
   animation — the foreground just dissolves out, unchanged otherwise. */
#screen-level.screen--active ~ .app-scene .app-scene__bg {
  opacity: 0;
}
#screen-level.screen--active ~ .app-scene .app-scene__fg {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Soft scrim for text legibility over the Girl-screen portrait. */
.app-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background:
    linear-gradient(180deg, rgba(13, 0, 9, 0.55) 0%, transparent 45%),
    linear-gradient(90deg, rgba(13, 0, 9, 0.60) 0%, transparent 65%);
}
#screen-story.screen--active ~ .app-scene::after {
  opacity: 1;
}

/* Only the active screen goes transparent so the shared layer shows
   through it; ancestor screens further down the stack stay opaque so they
   never bleed into each other. */
#screen-home.screen--active,
#screen-story.screen--active,
#screen-chapter.screen--active {
  background: transparent;
}

/* Header */
.header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  flex-shrink: 0;
}

.header__menu,
.header__badges {
  width: var(--header-icon-size);
  height: var(--header-icon-size);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-text);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.header__menu:active,
.header__badges:active {
  opacity: 0.75;
  transform: scale(0.97);
}

.header__menu {
  border-radius: var(--radius-circle);
}

/* Achievements close button — same size/shape as the Badges button it
   replaces, so it lands in the exact same spot on every screen. */
.header__close {
  font-size: 24px;
  font-weight: 300;
}

.header__badges {
  border-radius: var(--radius-button);
  position: relative;
  overflow: hidden;
}

.header__badges-glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 0;
}

.header__badges-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 1;
}

.header__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.header__level-name,
.header__skill-name {
  font-size: 12px;
  font-weight: 500;
}

.header__level-bar {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: var(--radius-bar);
  overflow: hidden;
  background: var(--color-surface);
  gap: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

.header__level-stage {
  flex: 1;
  position: relative;
  background: var(--color-surface);
  overflow: hidden;
  transition: opacity 0.15s;
}

.header__level-stage--accessible {
  cursor: pointer;
}

.header__level-stage--active {
  opacity: 1;
}

.header__level-stage-dot {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header__level-stage--viewing .header__level-stage-dot {
  opacity: 1;
}

.header__level-stage:not(.header__level-stage--accessible) {
  opacity: 0.4;
}

@keyframes flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

.header__level-stage-fill {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, #a03060 0%, #7a1030 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 4px rgba(150, 30, 70, 0.35);
  transition: width 0.1s;
}

.header__level-stage--viewing .header__level-stage-fill,
.header__level-stage--active:not(.header__level-stage--viewing) .header__level-stage-fill {
  background: linear-gradient(180deg, #c04070 0%, #a03060 40%, #7a1030 100%);
  background-size: 100% 200%;
  background-position: 0% 0%;
  animation: flow 2s ease-in-out infinite alternate;
}

.header__xp-bar {
  width: 75%;
  height: 10px;
  border-radius: var(--radius-bar);
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.header__xp-fill {
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, #7a1030 0%, #a03060 100%);
  border-radius: var(--radius-bar);
  box-shadow: 0 0 5px rgba(150, 30, 70, 0.35);
}

/* Main */
.main {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  pointer-events: none;
}

/* Click bar */
.click-bar {
  position: absolute;
  bottom: 16px;
  left: 7px;
  width: 79px;
  height: 79px;
}

.click-bar__text {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  width: 57px;
  height: 57px;
  left: 11px;
  top: 11px;
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
}

.click-bar__value {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  transform-origin: center;
}

/* Fired once per registered click. */
@keyframes click-value-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.click-bar__value.pulse {
  animation: click-value-pulse 0.25s ease-out;
}

.click-bar__label {
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
}

.click-bar__multiplier {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.click-bar__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 79px;
  height: 79px;
}

.click-bar__track {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 8;
}

.click-bar__fill {
  fill: none;
  stroke: #f06090;
  stroke-width: 8;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 5px rgba(220, 50, 100, 0.50));
  transition: stroke-dasharray 0.15s ease-out;
}

@keyframes click-bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.click-bar--critical .click-bar__fill {
  animation: click-bar-pulse 0.4s ease-in-out infinite;
}


/* When no multiplier is active, hide label + multiplier */
.click-bar--no-multiplier .click-bar__label,
.click-bar--no-multiplier .click-bar__multiplier {
  display: none;
}

/* Upgrade and producer rows */
.upgrades,
.producers {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
}

/* Item tiles: uniform rectangles — price badge top-left, art, name bottom */
.item-tile {
  flex: 1;
  height: 92px;
  min-width: 0;
  position: relative;
  background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.item-tile:focus { outline: none; }

.item-tile:active:not(:disabled) {
  opacity: 0.75;
  transform: scale(0.97);
}

.item-tile:disabled { cursor: default; }

.item-tile__image {
  flex: 1;
  margin: 0;
  background: center / contain no-repeat;
  background-position: center;
  min-height: 0;
}

.item-tile__name {
  font-size: 12px;
  font-weight: 600;
  color: #1a0a10;
  text-align: center;
  padding: 4px 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-tile__price {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: var(--radius-circle);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Output info (current benefit / credits-per-sec) — mirrors the price badge
   on the opposite corner so cost and payoff are both visible at a glance. */
.item-tile__power {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: var(--radius-circle);
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-text);
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Upgrades (one-time click-power boosts): rose. Producers (ongoing
   credits/sec income): teal — the color cue plus the "/s" suffix on the
   price both signal "this one keeps paying out". */
.item-tile__price--upgrade { background: linear-gradient(160deg, #c04070, #7a1030); }
.item-tile__price--producer { background: linear-gradient(160deg, #2fa39a, #146058); }

.item-tile--cant .item-tile__image { filter: saturate(0.4) brightness(0.7); }
.item-tile--cant .item-tile__name { color: var(--color-text-muted); }
.item-tile--cant .item-tile__price {
  background: rgba(45, 40, 50, 0.9);
  color: var(--color-text-muted);
}

/* ── Screens — stacked layers, deeper pages above shallower ── */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg); /* opaque base so lower layers don't bleed */
}

/* Every screen on the active path stays rendered beneath the active one */
.screen--shown {
  display: flex;
}

.screen--under {
  pointer-events: none;
}

/* Spaced by 10 so .app-scene (screens.js placeSceneLayer) can slot in just
   below whichever screen is active, using an integer z-index (CSS rejects
   fractional z-index values). */
#screen-home         { z-index: 10; }
#screen-story        { z-index: 20; }
#screen-chapter      { z-index: 30; }
#screen-level        { z-index: 40; }
#screen-achievements { z-index: 60; }

/* Achievements overlays the stack — translucent + blur instead of art */
#screen-achievements {
  background: rgba(13, 0, 9, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes achievements-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#screen-achievements.screen--active {
  animation: achievements-fade-in 0.2s ease-out;
}

/* Content paints above the screen's scene layer */
.screen__header,
.screen__title--page,
.screen .list,
.screen .screen__actions,
.resume-btn,
#screen-level .header,
#screen-level .main,
.upgrades,
.producers {
  position: relative;
}

.screen__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  flex-shrink: 0;
}

.screen__header .screen__actions {
  margin-left: auto;
}

.screen__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

/* Page title on its own line beneath the header row */
.screen__title--page {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 700;
  padding: 0 14px 10px;
}

.screen__actions {
  display: flex;
  gap: 8px;
}

.chip {
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, transform 0.1s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip:active {
  opacity: 0.75;
  transform: scale(0.97);
}

/* ── Resume shortcut (Home hero button) ──────────────────── */
.resume-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 50%;
  min-height: 60px;
  margin: 0 auto 8px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-button);
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.resume-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
}

.resume-btn__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 25%;
}
.resume-btn__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(13, 0, 9, 0.88) 0%,
    rgba(13, 0, 9, 0.65) 55%,
    rgba(13, 0, 9, 0.25) 100%);
}

.resume-btn__play {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.resume-btn__play::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 11px solid var(--color-text);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}

.resume-btn__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.resume-btn__label {
  font-size: 15px;
  font-weight: 700;
}
.resume-btn__level {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  position: relative;
  min-height: 160px;
  border: none;
  border-radius: var(--radius-button);
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  cursor: pointer;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* gradient above the art clips, below the text */
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.card > * {
  position: relative;
}

.card__title,
.card__cost {
  z-index: 2;
}

.card__bg {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  pointer-events: none;
}

.card:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.card__title {
  font-size: 16px;
  font-weight: 600;
}

.card__cost {
  font-size: 12px;
  color: var(--color-text-muted);
}

.placeholder-note {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 16px;
  text-align: center;
}

/* Lust counter — pinned 10px above the click bar, same width, bottom-left */
.level-credits {
  position: absolute;
  bottom: 105px;
  left: 7px;
  width: 79px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: var(--radius-button);
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  transform-origin: center;
}

.level-credits__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.level-credits__amount {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  display: inline-block;
}

/* Whole-container pulse — fired on passive/producer gains (once a second).
   Background flashes rather than the text color changing. */
@keyframes lust-pulse {
  0%   { transform: scale(1); background: rgba(0, 0, 0, 0.15); }
  30%  { transform: scale(1.1); background: rgba(255, 133, 172, 0.35); }
  100% { transform: scale(1); background: rgba(0, 0, 0, 0.15); }
}

.level-credits.pulse {
  animation: lust-pulse 0.4s ease-out;
}

/* Next Level button / complete label — replace the skill bar when done */
.header__next {
  height: 30px;
  padding: 0 16px;
  font-size: 12px;
  margin-top: 14px;
}

.header__complete {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px 0;
}

#screen-level.level-complete .header__skill-name,
#screen-level.level-complete .header__xp-bar {
  display: none;
}

/* SFW censoring — blurs images. Applied when body.censored. */
body.censored .card,
body.censored .header__badges-image,
body.censored .censorship {
  filter: blur(24px) saturate(0.8);
}

/* ── Stage crossfade layers (inside the level scene) ─────── */
.stage-fade {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.9s ease-in-out;
}
.scene--level .scene__bg,
.scene--level .scene__fg {
  opacity: 1;
}
.stage-fade--out { opacity: 0; }

.stage-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255,220,235,0.85) 0%, rgba(255,140,190,0.35) 60%, transparent 100%);
  z-index: 40;
  pointer-events: none;
  animation: stage-flash 0.5s ease-out forwards;
}
@keyframes stage-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Click effects ───────────────────────────────────────── */
.float-text {
  position: fixed;
  z-index: 30;
  transform: translate(-50%, -50%);
  color: #ffd9e8;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: float-up 0.9s ease-out forwards;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}

.ripple {
  position: fixed;
  z-index: 29;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 170, 205, 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple-out 0.6s ease-out forwards;
}
@keyframes ripple-out {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(6); }
}

/* ── Reactions ───────────────────────────────────────────── */
.reaction {
  position: fixed;
  z-index: 31;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 2px 8px rgba(220, 40, 110, 0.8);
  pointer-events: none;
  animation: reaction-pop 1.6s ease-out forwards;
}
@keyframes reaction-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; transform: translate(-50%, -60%) scale(1.4); }
  45%  { transform: translate(-50%, -70%) scale(1.1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, -60px))) scale(0.8);
  }
}

/* ── Narration ───────────────────────────────────────────── */
.narration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.narration {
  max-width: 82%;
  margin-bottom: 120px;
  padding: 10px 16px;
  border-radius: var(--radius-button);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
  color: var(--color-text);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  animation: narration-drift 3s ease-in-out forwards; /* duration set inline */
}
@keyframes narration-drift {
  0%   { opacity: 0; transform: translateY(14px); }
  12%  { opacity: 1; transform: translateY(8px); }
  85%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-18px); }
}

/* ── Toasts — centered on screen, max 2 (queued in effects.js) ── */
.toast-holder {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  max-width: 280px;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  background: rgba(10, 8, 12, 0.75);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  animation: toast-in-out 2.6s ease forwards;
}
@keyframes toast-in-out {
  0%   { opacity: 0; transform: scale(0.92); }
  10%  { opacity: 1; transform: scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.96); }
}

/* ── Token award ─────────────────────────────────────────── */
.token-fly {
  position: fixed;
  z-index: 45;
  transform: translate(-50%, -50%) scale(1.4);
  padding: 10px 18px;
  border-radius: var(--radius-circle);
  background: linear-gradient(160deg, #c04070, #7a1030);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(220, 60, 130, 0.8);
  pointer-events: none;
  transition: left 1.1s cubic-bezier(0.5, -0.2, 0.6, 1), top 1.1s cubic-bezier(0.5, -0.2, 0.6, 1);
}
.token-fly--go {
  animation: token-shrink 1.2s ease-in forwards;
}
@keyframes token-shrink {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}

/* ── Story cards on Home — tall rectangular tiles with character art ── */
.card--story {
  height: 200px;
  min-height: 200px;
  overflow: hidden;
}

.card__girl {
  position: absolute;
    left: 50%;
    top: -20px;
    height: 140%;
    width: auto;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
    margin-left: -70px;
}

/* ── Chapter cards dropping in on the story screen ───────── */
@keyframes card-drop {
  0%   { opacity: 0; transform: translateY(-32px) scale(0.97); }
  70%  { opacity: 1; transform: translateY(5px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.card--drop {
  /* backwards: hidden during the stagger delay, no forward fill so the
     :active press transform still works after landing */
  animation: card-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  /* per-card stagger set inline via animation-delay */
}

/* ── Locked cards ────────────────────────────────────────── */
.card--locked {
  filter: saturate(0.35) brightness(0.65);
}
.card--shake {
  animation: card-shake 0.4s ease;
}
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}

/* ── "NEW" pill on Badges buttons when unseen badges exist ── */
[data-nav="achievements"] { position: relative; }
[data-nav="achievements"].has-new::after {
  content: 'NEW';
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: var(--radius-circle);
  background: linear-gradient(160deg, #ff5090, #c02050);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* header badges icon clips overflow — keep the pill inside */
.header__badges.has-new::after {
  top: 5px;
  right: 5px;
}

/* ── Ultra mode ──────────────────────────────────────────── */
@keyframes ultra-pulse {
  0%, 100% { box-shadow: inset 0 0 60px rgba(255, 60, 130, 0.35); }
  50%      { box-shadow: inset 0 0 120px rgba(255, 60, 130, 0.65); }
}
body.ultra-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation: ultra-pulse 0.8s ease-in-out infinite;
}

/* ── Story hero — name, stats, skills over the background ── */
.story-hero {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}

.story-hero__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.story-hero__nav .screen__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.story-hero__name {
  font-size: clamp(24px, 4dvh, 32px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  align-self: center;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Chapter page: girl name shrinks; the girl-name transition pair animates
   the big↔small change smoothly during story↔chapter navigation. */
.story-hero__name--small {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* Chapter name — fades in and reveals from the center */
.chapter-title {
  align-self: center;
  text-align: center;
  font-size: clamp(22px, 3.5dvh, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.chapter-title--reveal {
  animation: title-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}
@keyframes title-reveal {
  0%   { opacity: 0; transform: translateY(10px); clip-path: inset(0 50% 0 50%); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

/* Skills + Desire buttons — same chip treatment as the Back button,
   shown only on the Girl (story) screen. */
.story-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.story-hero__action {
  gap: 6px;
  font-weight: 600;
}

.story-hero__action-icon {
  font-size: 13px;
  color: #f5c542;
}

.story-hero__chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}
.story-hero__skills-toggle--open .story-hero__chevron {
  transform: rotate(180deg);
}

.story-hero__skills {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.story-hero__skills > * {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.story-hero__skills--open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* "Chapters" header above the chapter list on the Girl screen */
.story-hero__list-title {
  position: relative;
  flex-shrink: 0;
  padding: 4px 14px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Chapter list paints above the girl layer (positioned > static) */
#story-chapter-list {
  position: relative;
}

/* ── Skill rows (story hero) ─────────────────────────────── */
.skill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.skill-row__level {
  flex-shrink: 0;
  min-width: 36px;
  padding: 2px 6px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.05em;
}
.skill-row__name {
  flex-shrink: 0;
  width: 90px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.skill-row__bar {
  flex: 1;
  height: 7px;
  border-radius: var(--radius-bar);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.skill-row__fill {
  height: 100%;
  border-radius: var(--radius-bar);
  background: linear-gradient(90deg, #7a1030 0%, #ff5090 100%);
  box-shadow: 0 0 6px rgba(255, 80, 144, 0.5);
}

/* ── Achievements screen ─────────────────────────────────── */
.ach-counter {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 4px 0 8px;
}
.ach-group-title {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 2px 4px;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ach-tile {
  position: relative;
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ach-tile__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: center / cover no-repeat rgba(0, 0, 0, 0.4);
}
.ach-tile__name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Locked tiles show the placeholder art (images/badge-locked.jpg) — no blur */
.ach-tile--locked { cursor: default; }
.ach-tile--locked .ach-tile__image { opacity: 0.55; }
.ach-tile--locked .ach-tile__name { color: var(--color-text-muted); }

/* Unlocked but not yet viewed */
.ach-tile--new {
  box-shadow:
    0 0 0 2px rgba(255, 80, 144, 0.75),
    0 2px 12px rgba(220, 50, 110, 0.45);
}
.ach-tile--new::after {
  content: 'NEW';
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-circle);
  background: linear-gradient(160deg, #ff5090, #c02050);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.ach-detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: flex;
  flex-direction: column;
}
.ach-detail[hidden] { display: none; }
.ach-detail__back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.ach-detail__image {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat #000;
}
.ach-detail__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 32px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.ach-detail__name { font-size: 20px; font-weight: 700; }
.ach-detail__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: pre-line;
  line-height: 1.5;
}

/* ── Info overlay — centered explainer panel (Desire, etc.) ─── */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 8, 12, 0.75);
}
.info-overlay[hidden] { display: none; }

.info-overlay__panel {
  max-width: 340px;
  width: 100%;
  padding: 24px;
  border-radius: var(--radius-button);
  background: rgba(30, 14, 22, 0.92);
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.info-overlay__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.info-overlay__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  white-space: pre-line;
  margin-bottom: 20px;
}

.info-overlay__close {
  width: 100%;
}