@layer reset, base, theme, components, utilities;

@layer theme {
  :root {
    --font-sans:
      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif;

    /* Light Theme Palette */
    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-subtle: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-subtle: #e2e8f0;
    --border-medium: #cbd5e1;

    /* Interactive / State Colors */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --focus-ring: #2563eb;

    /* Map States */
    --state-fill: #e2e8f0;
    --state-stroke: #ffffff;
    --state-hover: #cbd5e1;
    --state-active: #94a3b8;

    /* Status Colors */
    --status-correct: #10b981;
    --status-correct-hover: #059669;
    --status-incorrect: #ef4444;
    --status-skipped: #f59e0b;

    /* Layout & Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* Dark Theme Palette */
      --bg-page: #090d16;
      --bg-surface: #131c2e;
      --bg-surface-subtle: #1e293b;
      --text-primary: #f8fafc;
      --text-secondary: #cbd5e1;
      --text-muted: #94a3b8;
      --border-subtle: #1e293b;
      --border-medium: #334155;

      --primary: #3b82f6;
      --primary-hover: #60a5fa;
      --focus-ring: #60a5fa;

      --state-fill: #27354a;
      --state-stroke: #131c2e;
      --state-hover: #3b4e6b;
      --state-active: #4f688e;

      --status-correct: #10b981;
      --status-correct-hover: #34d399;
      --status-incorrect: #ef4444;
      --status-skipped: #f59e0b;

      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
      --shadow-md:
        0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
      --shadow-lg:
        0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    }
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    background-color: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    display: flex;
    flex-direction: column;
  }

  button {
    touch-action: manipulation;
    cursor: pointer;
    border: none;
    background: transparent;
  }
}

@layer components {
  /* Layout Container */
  .app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    padding: 0.75rem 1rem 1.5rem;
    gap: 1rem;
  }

  /* Header */
  .app-header {
    width: 100%;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .app-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Buttons */
  .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast),
      border-color var(--transition-fast);
  }

  .btn:focus-visible,
  .icon-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .btn-primary {
    background-color: var(--primary);
    color: #ffffff;
  }

  .btn-primary:hover {
    background-color: var(--primary-hover);
  }

  .btn-secondary {
    background-color: var(--bg-surface-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
  }

  .btn-secondary:hover {
    background-color: var(--border-subtle);
    color: var(--text-primary);
  }

  .btn-large {
    padding: 0.875rem 2rem;
    font-size: 1.0625rem;
    border-radius: var(--radius-lg);
  }

  .icon-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast);
  }

  .icon-btn:hover {
    background-color: var(--bg-surface-subtle);
    color: var(--text-primary);
    border-color: var(--border-medium);
  }

  .icon-btn .icon {
    flex-shrink: 0;
  }

  /* Sound toggle icon display based on aria-pressed */
  .icon-btn[aria-pressed="false"] .icon-sound-off {
    display: none;
  }

  .icon-btn[aria-pressed="true"] .icon-sound-on {
    display: none;
  }

  /* Main content layout */
  .game-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }

  /* Target Prompt Card */
  .prompt-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .prompt-content {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .prompt-label {
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  .prompt-target {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.01em;
  }

  /* Stats Bar */
  .stats-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .stats-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
  }

  .strike-pips {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
  }

  .pip {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--border-medium);
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast);
  }

  .pip.active,
  .pip[data-active="true"] {
    background-color: var(--status-incorrect);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  }

  .stat-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: var(--shadow-sm);
  }

  .stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
  }

  .stat-value,
  .stat-value * {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  /* Progress Bar */
  .progress-wrapper {
    width: 100%;
  }

  .progress-bar {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .progress-bar::-webkit-progress-bar {
    background-color: var(--bg-surface-subtle);
    border-radius: var(--radius-full);
  }

  .progress-bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--primary), var(--status-correct));
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
  }

  .progress-bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--primary), var(--status-correct));
    border-radius: var(--radius-full);
  }

  /* Map Container & SVG Styling */
  .map-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .map-container {
    width: 100%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .map-container svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* State paths */
  .state {
    fill: var(--state-fill);
    stroke: var(--state-stroke);
    stroke-width: 1.2;
    stroke-linejoin: round;
    cursor: pointer;
    transition:
      fill var(--transition-fast),
      stroke var(--transition-fast);
    outline: none;
  }

  .state:hover {
    fill: var(--state-hover);
  }

  .state:focus-visible {
    stroke: var(--focus-ring);
    stroke-width: 3.5;
    stroke-linejoin: miter;
    fill: var(--state-hover);
  }

  .state[data-status="correct"] {
    fill: var(--status-correct);
    cursor: default;
  }

  .state[data-status="correct"]:hover {
    fill: var(--status-correct-hover);
  }

  .state[data-status="incorrect"] {
    fill: var(--status-incorrect);
    animation: state-flash-incorrect 400ms ease-in-out;
  }

  .state[data-status="skipped"] {
    fill: var(--status-skipped);
    cursor: default;
  }

  .state[data-status="revealed"] {
    fill: var(--status-skipped);
    stroke: #fef08a;
    stroke-width: 2.5;
    animation: pulse-revealed 1.2s infinite ease-in-out;
    cursor: default;
  }

  .state[data-status="revealed"]:focus-visible {
    stroke: var(--focus-ring);
    stroke-width: 3.5;
  }

  /* Non-state boundary lines inside SVG */
  .states path:not(.state) {
    fill: none;
    stroke: var(--state-stroke);
    stroke-width: 1;
    pointer-events: none;
  }

  #separator,
  .separator {
    fill: none;
    stroke: var(--border-medium);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    pointer-events: none;
  }

  /* Game Over & Leaderboard Modal Dialog */
  dialog.modal-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    z-index: 100;
    background: transparent;
    border: none;
    padding: 1rem;
    max-width: 560px;
    width: 90%;
    color: var(--text-primary);
  }

  dialog.modal-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  dialog.modal-dialog[open] {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-card {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: modal-pop 250ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .modal-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
  }

  .modal-summary {
    color: var(--text-secondary);
    font-size: 1rem;
  }

  .final-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .final-stat-box {
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.875rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .final-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
  }

  .final-stat-number {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
  }

  /* Save Score Form */
  .save-score-form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: left;
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
  }

  .form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .form-group {
    display: flex;
    gap: 0.5rem;
  }

  .input-text {
    flex: 1;
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    outline: none;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .input-text:focus-visible {
    border-color: var(--focus-ring);
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
  }

  .save-score-form .btn {
    white-space: nowrap;
  }

  .leaderboard-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
  }

  .leaderboard-table-container:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.875rem;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-table th {
    background-color: var(--bg-surface-subtle);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
  }

  .leaderboard-table tbody tr:last-child td {
    border-bottom: none;
  }

  .leaderboard-table tbody tr:hover {
    background-color: var(--bg-surface-subtle);
  }

  .leaderboard-table .rank-cell {
    font-weight: 700;
    color: var(--text-muted);
    width: 44px;
  }

  .leaderboard-table .highlight-row {
    background-color: rgba(37, 99, 235, 0.1);
    font-weight: 700;
  }

  .leaderboard-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem !important;
  }

  .modal-actions {
    display: flex;
    justify-content: center;
  }

  /* Confetti Canvas */
  .confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* Animations & Keyframes */
@keyframes state-flash-incorrect {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulse-revealed {
  0%,
  100% {
    fill: #f59e0b;
    stroke: #fef08a;
  }
  50% {
    fill: #fbbf24;
    stroke: #ffffff;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .state[data-status="revealed"] {
    animation: none !important;
    fill: #f59e0b !important;
  }
}

/* Responsive Tweaks */
@media (max-width: 640px) {
  .app-layout {
    padding: 0.5rem 0.75rem 1rem;
    gap: 0.75rem;
  }

  .prompt-card {
    padding: 0.875rem 1rem;
  }

  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .map-container {
    padding: 0.5rem;
  }

  .form-group {
    flex-direction: column;
  }

  .final-stats-grid {
    grid-template-columns: 1fr;
  }
}