@layer reset, tokens, base, layout, components, fx, overlays, state;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    height: 100%;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }

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

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: var(--cursor-hand, pointer);
    touch-action: manipulation;
  }

  input,
  textarea {
    font: inherit;
    color: inherit;
  }

  [hidden] {
    display: none !important;
  }
}

@layer tokens {
  :root {
    --ink: #1a0c02;
    --night: #07040f;
    --night-2: #120a24;
    --night-3: #1c1236;
    --text: #fff8ea;
    --text-dim: rgba(255, 244, 222, 0.66);
    --text-faint: rgba(255, 244, 222, 0.42);
    --gold-hi: #fff4c4;
    --gold: #ffd44a;
    --gold-mid: #f0a91d;
    --gold-lo: #a86a06;
    --gold-deep: #4a2a00;
    --coral: #ff5a6e;
    --mint: #5ee06a;
    --cyan: #5de9ff;
    --violet: #b28bff;
    --accent: #ff3d6e;
    --accent-2: #ffd23f;
    --deep: #24060f;
    --glow: #ff4f7c;
    --panel-top: rgba(44, 30, 82, 0.8);
    --panel-bottom: rgba(14, 9, 30, 0.9);
    --panel-edge: rgba(255, 236, 190, 0.16);
    --panel-shine: rgba(255, 255, 255, 0.16);
    --gold-metal: linear-gradient(180deg, #fff7d6 0%, #ffe07a 16%, #f6b52c 40%, #a96b08 55%, #f2bb3a 72%, #fff1b8 100%);
    --gold-edge: linear-gradient(180deg, #fff3c0, #d69a1c 50%, #fff0b3);
    --gold-text: linear-gradient(180deg, #fffdf3 0%, #ffe89a 36%, #f7b832 60%, #ffe083 100%);
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --ray: 142vmax;
    color-scheme: dark;
  }

  @media (orientation: portrait) and (max-aspect-ratio: 3/4) {
    :root {
      --ray: 128vmax;
    }
  }
}

@layer base {
  body {
    font-family: var(--font);
    font-weight: 600;
    color: var(--text);
    background: var(--night);
    overflow: hidden;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: var(--cursor-arrow, default);
  }

  a[href],
  select,
  summary,
  [role='button'],
  [role='tab'] {
    cursor: var(--cursor-hand, pointer);
  }

  input:not([type='checkbox'], [type='radio'], [type='range'], [type='button'], [type='submit']),
  textarea {
    cursor: text;
  }

  :root.is-pressing,
  :root.is-pressing * {
    cursor: var(--cursor-press, pointer) !important;
  }

  .num {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  .gold-text {
    background: var(--gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 10px rgba(255, 190, 60, 0.35));
  }

  .glass {
    background:
      linear-gradient(180deg, var(--panel-shine), rgba(255, 255, 255, 0) 38%),
      linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
    border: 1px solid var(--panel-edge);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35),
      0 12px 32px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }

  ::selection {
    background: rgba(255, 212, 74, 0.35);
  }
}

@layer state {
  @media (hover: none) and (pointer: coarse) {
    input:not([type='range'], [type='checkbox'], [type='radio'], [type='button'], [type='submit']),
    select,
    textarea {
      font-size: max(16px, 1rem);
    }
  }

  :root[data-motion='reduced'] *,
  :root[data-motion='reduced'] *::before,
  :root[data-motion='reduced'] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}