/* ============================================================
   BOOP THE VEIL — Base Styles v2
   Global resets, layout, animations, and utility classes.
   Architecture rule: CSS defines appearance only.
   JS (app.js) is the single source of truth for visibility.
   No !important on display, visibility, or pointer-events
   except the .hidden utility class which is intentional.
============================================================ */

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  /* 100vh fallback for older browsers, 100dvh for modern mobile */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-body);
  background: var(--deep);
  color: var(--ink);
  line-height: 1.6;
  user-select: none;
  -webkit-user-select: none;
  /* Prevent overscroll elastic bounce on iOS/Android */
  overscroll-behavior: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ── APP CONTAINER ────────────────────────────────────────── */
#app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* ── SCREEN SYSTEM ────────────────────────────────────────── */
/*
   CSS sets the default state (hidden).
   JS adds/removes .active to control visibility.
   Never override these with !important in JS or other CSS.
*/
.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.screen.active {
  display: flex;
}

/* ── FOCUS RING (accessibility) ───────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

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

@keyframes coinBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── SKELETON LOADER ──────────────────────────────────────── */
/*
   Uses CSS variables so it works correctly in both
   light and dark mode without hardcoded dark hex values.
   home.js uses inline styles with rgba(122,102,82,...)
   which also adapts naturally to both modes.
*/
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    rgba(122,102,82,.12) 25%,
    rgba(122,102,82,.22) 50%,
    rgba(122,102,82,.12) 75%
  );
  background-size: 200% 100%;
  animation: shimmerSkeleton 1.4s infinite;
}

/* ── UTILITY CLASSES ──────────────────────────────────────── */
.text-gold    { color: var(--gold); }
.text-muted   { color: var(--muted); }
.text-ivory   { color: var(--ivory); }
.text-ink     { color: var(--ink); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }

.text-display { font-family: var(--font-display); }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.font-bold    { font-weight: 600; }
.font-medium  { font-weight: 500; }

/*
   .hidden is the only legitimate use of !important here.
   It is a utility class whose entire purpose is to override
   any display value — this is standard and intentional.
   JS adds/removes .hidden to show/hide elements.
*/
.hidden    { display: none !important; }
.invisible { visibility: hidden; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }

.p-16    { padding: 16px; }
.mt-8    { margin-top: 8px; }
.mb-8    { margin-bottom: 8px; }
.mb-16   { margin-bottom: 16px; }

/* ── SECTION LABELS ───────────────────────────────────────── */
.section-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}