/* Base, web only: what browsers need and Unity has no use for. Shared by the
   player and the CMS, loaded right after tokens-base.css. Not exported from
   Unity and not compared with it. */

/* ─── 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] {
  cursor: not-allowed;
  pointer-events: none;
}

/* 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-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);
}

/* ─── 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: var(--disabled-opacity);
  }
}

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

@keyframes portrait-pulse {
  0%   { border-color: var(--accent-50); box-shadow: none; transform: scale(1); }
  25%  { border-color: var(--accent); box-shadow: 0 0 var(--space-4) var(--accent), 0 0 var(--space-6) var(--accent-50); transform: scale(var(--active-scale)); }
  50%  { border-color: var(--accent-light); box-shadow: 0 0 var(--space-5) var(--accent-light), 0 0 var(--space-6) var(--accent-50); transform: scale(var(--active-scale)); }
  75%  { border-color: var(--accent); box-shadow: 0 0 var(--space-3) var(--accent-50); transform: scale(var(--active-scale)); }
  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 var(--space-4) var(--accent), 0 0 var(--space-6) var(--accent-50), inset 0 0 var(--space-3) var(--accent-50); }
  50%  { box-shadow: 0 0 var(--space-5) var(--accent-light), 0 0 var(--space-6) var(--accent-50), inset 0 0 var(--space-4) var(--accent-50); }
  75%  { box-shadow: 0 0 var(--space-2) var(--accent-50), inset 0 0 var(--space-1) 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 var(--space-3) var(--accent), 0 0 var(--space-5) var(--accent-50); filter: brightness(1); }
  50%  { color: var(--accent); text-shadow: 0 0 var(--space-2) var(--accent-50); filter: brightness(1); }
  75%  { color: var(--accent-light); text-shadow: 0 0 var(--space-1) var(--accent-50); filter: brightness(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 var(--space-2) var(--accent-50); }
  50%      { transform: scale(var(--active-scale));  text-shadow: 0 0 var(--space-4) var(--accent), 0 0 var(--space-5) var(--accent-50); }
}

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

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

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

@keyframes dismissHintPulse {
  0%, 100% { opacity: var(--disabled-opacity); }
  50%      { opacity: 1; }
}

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

@keyframes gachaShake1 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(calc(var(--space-1) * -1)) rotate(-2deg); }
  40%      { transform: translateX(var(--space-1)) rotate(2deg); }
  60%      { transform: translateX(calc(var(--space-1) * -1)) rotate(-1deg); }
  80%      { transform: translateX(var(--space-1)) rotate(1deg); }
}

@keyframes gachaShake2 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(calc(var(--space-2) * -1)) rotate(-4deg); }
  75%      { transform: translateX(var(--space-2)) rotate(4deg); }
}

@keyframes gachaCrack {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(var(--active-scale)); opacity: var(--disabled-opacity); }
  100% { transform: scale(var(--active-scale)); opacity: 0; }
}

@keyframes whiteFlash {
  0%   { opacity: var(--disabled-opacity); }
  100% { opacity: 0; }
}

@keyframes rewardReveal {
  0%   { opacity: 0; transform: scale(var(--active-scale)); }
  60%  { opacity: 1; transform: scale(var(--active-scale)); }
  80%  { transform: scale(var(--active-scale)); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes rewardGlow {
  0%   { opacity: var(--disabled-opacity); transform: scale(var(--active-scale)); }
  100% { opacity: 1; transform: scale(var(--active-scale)); }
}