/* Tokens (§1) and reset / base (§2), shared by the player and the CMS.
   Loaded first on every page (the only shared sheet): player → player.css,
   CMS → cms-components.css → cms.css → init-overlay.css → reward-effects.css. */

/* ==============================
   1. TOKENS
   ============================== */
/* =====================================================
   COLOR PALETTE — Single source of truth
   =====================================================
   All colors in the app MUST use these variables.
   Never use raw rgba/hex values outside this block.
   ===================================================== */
:root {
  /* ── Accent ─────────────────────────────────────── */
  --accent:                rgba(247, 26, 152, 1);
  --accent-light:          rgba(248, 124, 248, 1);
  --accent-secondary:      rgba(32, 10, 61, 1);
  --accent-secondary-deep: rgba(26, 8, 49, 1);
  --accent-secondary-mid:  rgba(77, 59, 100, 1);
  --accent-secondary-light: rgba(186, 7, 252, 1);
  --accent-50:             rgba(247, 26, 152, 0.5);
  --accent-secondary-50:   rgba(32, 10, 61, 0.5);

  /* ── White / Black ──────────────────────────────── */
  --white:    rgba(255, 255, 255, 1);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-50: rgba(255, 255, 255, 0.5);

  --black:    rgba(0, 0, 0, 1);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-85: rgba(0, 0, 0, 0.85);

  /* ── Semantic ───────────────────────────────────── */
  --success:    rgba(40, 167, 69, 1);
  --success-50: rgba(40, 167, 69, 0.5);
  --danger:     rgba(239, 68, 68, 1);
  --danger-50:  rgba(239, 68, 68, 0.5);
  --info:       rgba(126, 244, 245, 1);
  --info-50:    rgba(126, 244, 245, 0.5);
  --warning:    rgba(255, 193, 7, 1);
  --warning-50: rgba(255, 193, 7, 0.5);
  --neutral:    rgba(173, 181, 189, 1);

  /* ── Currencies (Credits / Hearts / PocketWatches chips) ── */
  --stat-hearts:  rgba(255, 76, 178, 1);
  --stat-stamina: rgba(76, 220, 178, 1);
  --stat-gold:    rgba(255, 200, 76, 1);

  /* ── Typography ─────────────────────────────────── */
  --font-family-sans: 'Nunito Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.85rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.25rem;
  --font-size-2xl:  1.75rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-base:  1.5;

  /* ── Interactive state ──────────────────────────── */
  --focus-ring-width:  var(--border-width-thick);
  --disabled-opacity:  0.5;
  --active-scale:      0.97;
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Blur ───────────────────────────────────────── */
  --blur-heavy: blur(20px);
  --blur-light: blur(6px);

  /* ── Spacing ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── Sizing ─────────────────────────────────────── */
  --header-height: clamp(3rem, 8dvh, 4rem);

  /* ── Borders ────────────────────────────────────── */
  --border-width-thin:  1px;
  --border-width-base:  1.5px;
  --border-width-thick: 2px;
  --border-width-xl:    3px;

  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     14px;
  --radius-pill:   22px;
  --radius-circle: 50%;

  /* ── Shadows ────────────────────────────────────── */
  --shadow-chat-frame:
    0 25px 50px -12px var(--black-50),
    0 0 30px var(--accent-secondary-50);

  /* ── Z-index ────────────────────────────────────── */
  --z-overlay:  10;
  --z-dropdown: 1000;
  --z-modal:    9000;
  --z-toast:    9500;
  --z-loading:  10000;
  --z-popup:    10001;   /* Interactive overlays that render above the loading screen */
  --z-blocker:  10002;   /* Landscape blocker — used only by the CMS (cms-components.css); the player has no blocker */
}


/* ==============================
   2. RESET / BASE
   ============================== */

/* ─── 2.1 RESET ─── */
* {
  box-sizing: border-box;
}

/* ─── 2.2 INACTIVE STATES ─── */
/* Universal inactive states — single source of truth for all "inactive" visuals.
   Three tiers:
   1. Cannot interact — fully blocked (disabled buttons, locked steps)
   2. Visually muted, still interactive — clickable but de-emphasised (archived items)
   3. Read-only — focusable/selectable but not editable (form fields) */

/* 1. Cannot interact */
:disabled,
[disabled],
.disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* 2. Visually muted but still interactive */
.locked {
  opacity: var(--disabled-opacity);
}

/* 3. Read-only form fields */
input:read-only,
textarea:read-only {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

/* ─── 2.3 CHECKBOX & RADIO ─── */
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
  accent-color: var(--accent);
}

/* ─── 2.4 NORMALIZE ─── */
button,
select,
input,
textarea {
  font: inherit;
}

/* Discourage drag-save / long-press save / accidental selection on rendered images.
   Bypassable via DevTools — pairs with draggable="false" + oncontextmenu in the JS templates. */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ─── 2.5 SCROLLBAR ─── */
::-webkit-scrollbar {
  width: var(--space-2);
  height: var(--space-2);
}

::-webkit-scrollbar-track {
  background: var(--white-10);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-secondary) 100%);
  border: var(--border-width-thick) solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-secondary-light) 100%);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox has no ::-webkit-scrollbar. Chrome, Edge and Safari drop it when the
   standard properties are set, so those stay scoped to Firefox. */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--white-10);
  }
}

/* ─── 2.6 BODY ─── */
/* --app-height is set by player JS from window.visualViewport.height so the
   frame shrinks when the mobile soft keyboard opens — 100dvh stays full-screen
   on iOS Safari (the keyboard is an overlay, not viewport-modifying). */
body {
  background: url('../assets/background.png') no-repeat center center fixed;
  background-size: cover;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  margin: 0;
  font-family: var(--font-family-sans);
  color: var(--white);
}

/* ─── 2.7 KEYFRAMES ─── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--fade-from, 10px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes message-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes portrait-pulse {
  0%   { border-color: var(--accent-50); box-shadow: none; transform: scale(1); }
  25%  { border-color: var(--accent); box-shadow: 0 0 16px var(--accent), 0 0 32px var(--accent-50); transform: scale(1.05); }
  50%  { border-color: var(--accent-light); box-shadow: 0 0 24px var(--accent-light), 0 0 48px var(--accent-50); transform: scale(1.08); }
  75%  { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-50); transform: scale(1.03); }
  100% { border-color: var(--accent-50); box-shadow: none; transform: scale(1); }
}

@keyframes card-glow {
  0%   { box-shadow: 0 0 0 0 transparent; }
  25%  { box-shadow: 0 0 16px var(--accent), 0 0 32px var(--accent-50), inset 0 0 12px var(--accent-50); }
  50%  { box-shadow: 0 0 24px var(--accent-light), 0 0 48px var(--accent-50), inset 0 0 16px var(--accent-50); }
  75%  { box-shadow: 0 0 10px var(--accent-50), inset 0 0 6px var(--accent-50); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes stat-pop {
  0%   { color: var(--white); text-shadow: none; filter: brightness(1); }
  20%  { color: var(--accent-light); text-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-50); filter: brightness(1.8); }
  50%  { color: var(--accent); text-shadow: 0 0 8px var(--accent-50); filter: brightness(1.4); }
  75%  { color: var(--accent-light); text-shadow: 0 0 4px var(--accent-50); filter: brightness(1.1); }
  100% { color: var(--white); text-shadow: none; filter: brightness(1); }
}

/* Continuous soft glow + scale, anchored in the pink accent. For attention
   on a single inline element (e.g. the turn count in the arrival popup). */
@keyframes accent-pulse {
  0%, 100% { transform: scale(1);     text-shadow: 0 0 8px var(--accent-50); }
  50%      { transform: scale(1.08);  text-shadow: 0 0 18px var(--accent), 0 0 28px var(--accent-50); }
}

@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 var(--danger-50); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

@keyframes pulse-recording-ending {
  0%, 100% { box-shadow: 0 0 0 0 var(--warning); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

/* Reward effects (reward-effects.css) */
@keyframes rewardOverlayFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dismissHintPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

@keyframes gachaAppear {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes gachaShake1 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-4px) rotate(-2deg); }
  40%      { transform: translateX(4px) rotate(2deg); }
  60%      { transform: translateX(-3px) rotate(-1deg); }
  80%      { transform: translateX(3px) rotate(1deg); }
}

@keyframes gachaShake2 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-8px) rotate(-4deg); }
  75%      { transform: translateX(8px) rotate(4deg); }
}

@keyframes gachaCrack {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes whiteFlash {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes rewardReveal {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.05); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rewardFadeIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rewardGlow {
  0%   { opacity: 0.6; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}