/* Whisker Arcade palette and arcade grid mockup. Layered on top of /styles.css. */

:root {
  --primary: #D97E2A;
  --primary-hover: #C06F22;
  --on-primary: #FFF9EE;

  --bg: #F4EFE2;
  --surface: #FFFFFF;
  --surface-1: #ECE5D4;
  --surface-2: #E2DAC6;

  --on-bg: #2A241C;
  --on-bg-strong: #1A150F;
  --on-surface-muted: #6E6355;
  --on-surface-faint: #948872;

  --outline: #D2C8B2;
  --outline-soft: #E4DCC9;

  --font-sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  --chill: #2E9186;
  --mixed: #DD8A34;
  --wild: #D64561;

  --tile-label-bg: #FFFFFF;
  --poster-shadow: 0 14px 40px rgba(26, 21, 15, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #F0A653;
    --primary-hover: #F5B76F;
    --on-primary: #201404;

    --bg: #10152E;
    --surface: #181E3C;
    --surface-1: #1F2648;
    --surface-2: #293156;

    --on-bg: #EFEAE0;
    --on-bg-strong: #FFFFFF;
    --on-surface-muted: #A9A6B5;
    --on-surface-faint: #767489;

    --outline: #3A4166;
    --outline-soft: #232A4E;

    --chill: #4FB3A7;
    --mixed: #E89A4C;
    --wild: #E0617B;

    --tile-label-bg: #181E3C;
    --poster-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ===== Poster art ===== */

.poster {
  margin: 0;
  min-width: 0;
}

.poster img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: 26px;
  border: 1px solid var(--outline-soft);
  box-shadow: var(--poster-shadow);
}

.poster-copy {
  margin: 0 0 48px;
}

.poster-copy h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--on-bg-strong);
  margin: 0 0 10px;
}

.poster-copy p {
  font-size: 15px;
  color: var(--on-surface-muted);
  margin: 0 0 12px;
}

.poster-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .poster img {
    max-width: 300px;
  }
}

/* ===== Poster wall ===== */

.poster-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin: 0 0 48px;
}

@media (max-width: 640px) {
  .poster-wall {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* ===== Energy legend ===== */

.energy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.energy-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 999px;
  color: #FFFFFF;
}

.energy-pill.chill { background: var(--chill); }
.energy-pill.mixed { background: var(--mixed); }
.energy-pill.wild { background: var(--wild); }

/* ===== Arcade grid mockup ===== */

.arcade-panel {
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--outline-soft);
  border-radius: 24px;
  margin: 0 0 40px;
}

.arcade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.game-tile {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--outline-soft);
  box-shadow: 0 4px 14px rgba(26, 21, 15, 0.08);
}

.game-tile .art {
  height: 84px;
}

.game-tile .label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--tile-label-bg);
}

.game-tile .name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--on-bg-strong);
}

.game-tile .energy {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.game-tile .energy.chill { color: var(--chill); }
.game-tile .energy.mixed { color: var(--mixed); }
.game-tile .energy.wild { color: var(--wild); }

.art.koi { background: linear-gradient(180deg, #1E6D6A, #0A3140); }
.art.laser { background: radial-gradient(circle at 55% 45%, rgba(255, 59, 48, 0.55) 0, rgba(255, 59, 48, 0) 26%), linear-gradient(180deg, #23262E, #08090C); }
.art.mouse { background: linear-gradient(180deg, #EFE4D0, #C99B63); }
.art.bug { background: linear-gradient(180deg, #CAA06A, #BF9257); }
.art.feather { background: linear-gradient(180deg, #EFE6F4, #CBB3DC); }
.art.birds { background: linear-gradient(180deg, #AED4EA, #E8F1EA); }
.art.yarn { background: radial-gradient(circle at 60% 55%, #D64561 0 18%, rgba(214, 69, 97, 0) 19%), linear-gradient(180deg, #F2ECE2, #D8CDB6); }
.art.firefly { background: radial-gradient(circle at 30% 40%, rgba(255, 232, 107, 0.9) 0 4%, rgba(255, 232, 107, 0) 14%), radial-gradient(circle at 70% 60%, rgba(190, 242, 100, 0.8) 0 3%, rgba(190, 242, 100, 0) 12%), linear-gradient(180deg, #0C1230, #0E2438); }

.arcade-note {
  font-size: 13px;
  color: var(--on-surface-muted);
  text-align: center;
  margin: 16px 0 0;
}

@media (max-width: 540px) {
  .arcade-panel { padding: 16px; }
  .arcade-grid { gap: 10px; }
  .game-tile .art { height: 64px; }
  .game-tile .name { font-size: 13px; }
}