/* AMAZING ARCADE — themes are custom-property sets scoped by [data-theme] */

:root {
  --t: 500ms;
  --display: "Press Start 2P", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Default marquee glow; themes set --title-glow, or override --title-shadow outright */
[data-theme] {
  --title-shadow: 0 0 6px var(--title-glow), 0 0 18px var(--title-glow), 0 0 36px var(--title-glow);
}

[data-theme="arcade"] {
  --title-color: #ffffff;
  --title-glow: #ff2bd6;
  --title-shadow: 0 0 4px #fff, 0 0 12px #ff2bd6, 0 0 28px #ff2bd6, 0 0 48px #2bf0ff;
  --subtitle-color: #2bf0ff;
  --bg: #0b0b12;
  --surface: #151525;
  --accent: #ff2bd6;
  --accent-2: #2bf0ff;
  --text: #f2f2ff;
  --muted: #b9b9d6;
  --glow: rgba(255, 43, 214, .55);
  --radius: 14px;
  --border: 2px solid rgba(43, 240, 255, .55);
  --clip: none;
  --shadow: 0 0 18px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .04);
  --badge-bg: var(--accent);
  --badge-text: #0b0b12;
}

[data-theme="babble"] {
  --bg: linear-gradient(0deg, #ff4fa3 0%, #7b2cff 100%); /* purple at the top, behind the marquee */
  --title-color: #ffffff;
  --title-glow: #ffe14d;
  --subtitle-color: #ffffff;
  --surface: linear-gradient(160deg, #ff6fb5 0%, #9a4dff 100%);
  --accent: #ffe14d;
  --accent-2: #2bf0ff;
  --text: #ffffff;
  --muted: #fff3fb;
  --glow: rgba(255, 225, 77, .6);
  --radius: 28px;
  --border: 3px solid rgba(255, 255, 255, .7);
  --clip: none;
  --shadow: 0 10px 0 rgba(80, 0, 120, .35), 0 0 24px var(--glow);
  --badge-bg: var(--accent);
  --badge-text: #5a0f6e;
}

[data-theme="arthur"] {
  --title-color: #5a2d82;
  --title-glow: rgba(201, 162, 39, .4);
  --subtitle-color: #2b1d0e;
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16 V48 L28 64 L0 48 V16 Z M28 64 V97' fill='none' stroke='%235a2d82' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E");
  --bg: var(--hex) 0 0 / 56px 97px, radial-gradient(circle at 50% 40%, #f3e6bd 0%, #e9d8a6 55%, #d9c286 100%);
  --surface: linear-gradient(180deg, #f6ebc8 0%, #ead7a0 100%);
  --accent: #5a2d82;
  --accent-2: #c9a227;
  --text: #2b1d0e;
  --muted: #4a3418;
  --glow: rgba(201, 162, 39, .55);
  --radius: 0;
  --border: 3px solid #c9a227;
  --clip: polygon(28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%, 0 50%);
  --shadow: inset 0 0 0 6px #ead7a0, inset 0 0 0 8px #5a2d82;
  --badge-bg: var(--accent);
  --badge-text: #f6ebc8;
}

[data-theme="dekkimon"] {
  --title-color: #fff3d6;
  --title-glow: transparent;
  --title-shadow: 3px 3px 0 #2b1d0e;
  --subtitle-color: #fff3d6;
  /* deep red at the top so the cream title clears 4.5:1 */
  --bg: linear-gradient(180deg, #7a1220 0%, #e63946 35%, #f77f00 100%);
  --surface: #fff3d6;
  --accent: #e63946;
  --accent-2: #118ab2;
  --text: #2a1a12;
  --muted: #4a3326;
  --glow: rgba(17, 138, 178, .5);
  --radius: 0;
  --border: 4px solid #2a1a12;
  --clip: none;
  --shadow: 2px 2px 0 #2a1a12, 6px 6px 0 rgba(42, 26, 18, .35);
  --badge-bg: var(--accent-2);
  --badge-text: #fff3d6;
}

[data-theme="kadath"] {
  --title-color: #e9fff0;
  --title-glow: #7cff9e;
  --subtitle-color: #7cff9e;
  --bg: linear-gradient(170deg, #140a2e 0%, #0c1230 45%, #061a1f 100%);
  --surface: linear-gradient(180deg, rgba(30, 16, 64, .92) 0%, rgba(6, 26, 31, .92) 100%);
  --accent: #7cff9e;
  --accent-2: #b388ff;
  --text: #e6fff0;
  --muted: #bfd9cc;
  --glow: rgba(124, 255, 158, .45);
  --radius: 6px;
  --border: 1px solid rgba(124, 255, 158, .7);
  --clip: none;
  --shadow: 0 0 14px var(--glow), 0 0 40px rgba(179, 136, 255, .25), inset 0 0 20px rgba(124, 255, 158, .08);
  --badge-bg: transparent;
  --badge-text: var(--accent);
}

[data-theme="seal"] {
  --title-color: #f1e4c8;
  --title-glow: #c8102e;
  --subtitle-color: #d4a017;
  --bg: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 2px, rgba(0, 0, 0, .08) 2px 5px),
        radial-gradient(ellipse at center, transparent 35%, rgba(200, 16, 46, .18) 100%),
        linear-gradient(135deg, #2a3140 0%, #141820 100%);
  --surface: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 2px, rgba(0, 0, 0, .06) 2px 4px), linear-gradient(160deg, #3a414e 0%, #232831 60%, #1a1e25 100%);
  --accent: #c8102e;
  --accent-2: #d4a017;
  --text: #ece7dc;
  --muted: #c9c2b2;
  --glow: rgba(200, 16, 46, .5);
  --radius: 8px;
  --border: 3px solid #0d0f13;
  --clip: none;
  --shadow: inset 3px 3px 0 rgba(255, 255, 255, .14), inset -4px -4px 0 rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .6);
  --badge-bg: var(--accent-2);
  --badge-text: #1c2028;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: #0b0b12;
  color: var(--text);
  font-family: var(--body);
  transition: color var(--t) ease, background-color var(--t) ease;
  overflow-x: hidden;
}

/* Page background: one layer per theme, crossfaded so gradients visibly morph */
.backdrop, .ambient { position: fixed; inset: 0; pointer-events: none; }
.backdrop { z-index: 0; }
.ambient { z-index: 1; overflow: hidden; }

.bg-layer {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--t) ease;
}
body[data-theme="arcade"] .bg-layer[data-theme="arcade"],
body[data-theme="babble"] .bg-layer[data-theme="babble"],
body[data-theme="arthur"] .bg-layer[data-theme="arthur"],
body[data-theme="dekkimon"] .bg-layer[data-theme="dekkimon"],
body[data-theme="kadath"] .bg-layer[data-theme="kadath"],
body[data-theme="seal"] .bg-layer[data-theme="seal"] { opacity: 1; }

.wrap {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) 16px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- marquee ---------- */
.marquee { text-align: center; margin-bottom: clamp(20px, 3vw, 40px); }

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 5.4vw, 64px);
  line-height: 1.2;
  letter-spacing: .12em;
  color: var(--title-color);
  text-shadow: var(--title-shadow);
  transition: color var(--t) ease, text-shadow var(--t) ease;
}

.flicker { animation: flicker 4.5s linear infinite; }
.flicker-2 { animation-duration: 6.5s; animation-delay: 1.3s; }

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .25; text-shadow: none; }
}

.subtitle {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(10px, 1.3vw, 14px);
  letter-spacing: .1em;
  color: var(--subtitle-color);
  transition: color var(--t) ease;
}

/* ---------- grid ---------- */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tile[data-theme="seal"] { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  /* tiles 4 and 5 each take a full row so the 3-column grid has no holes */
  .tile[data-theme="kadath"], .tile[data-theme="seal"] { grid-column: 1 / -1; }
  .tile[data-theme="kadath"] { align-items: center; text-align: center; }
}

/* ---------- tiles ---------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 220px;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--surface);
  color: var(--text);
  border: var(--border);
  border-radius: var(--radius);
  clip-path: var(--clip);
  box-shadow: var(--shadow);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background var(--t) ease, color var(--t) ease, box-shadow var(--t) ease,
              border-color var(--t) ease, transform 200ms ease, opacity 200ms ease;
}
@media (min-width: 1100px) { .tile { min-height: 320px; } }

/* Arthur: the <a> stays unclipped so its drop-shadow glow follows the hexagon.
   The clipped .tile-shape inside holds the gold outline (::before), the parchment
   face inset 3px (::after) and the purple inner line (.tile-line), each clipped to
   the same polygon. Padding is 3px larger to replace the removed border. */
.tile[data-theme="arthur"] {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  overflow: visible;
  filter: none;
  transition: color var(--t) ease, filter var(--t) ease, transform 200ms ease, opacity 200ms ease;
}
.tile[data-theme="arthur"]:hover,
.tile[data-theme="arthur"]:focus-visible { box-shadow: none; }

.tile-shape {
  position: relative;
  flex: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: calc(clamp(20px, 2.4vw, 32px) + 3px) calc(clamp(44px, 4vw, 56px) + 3px);
  clip-path: var(--clip);
  isolation: isolate;
}
.tile-shape::before,
.tile-shape::after,
.tile-line {
  content: "";
  position: absolute;
  transition: background var(--t) ease;
}
.tile-shape::before { inset: 0; background: var(--accent-2); clip-path: var(--clip); z-index: -3; }
.tile-shape::after { inset: 3px; background: var(--surface); clip-path: var(--clip); z-index: -2; }
/* 2px ring: the face polygon minus a copy shrunk by 2px (evenodd leaves the band) */
.tile-line {
  inset: 6px;
  background: var(--accent);
  clip-path: polygon(evenodd,
    28px 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 28px 100%, 0 50%, 28px 0,
    30px 2px, 2px 50%, 30px calc(100% - 2px), calc(100% - 30px) calc(100% - 2px), calc(100% - 2px) 50%, calc(100% - 30px) 2px, 30px 2px);
  z-index: -1;
}
.tile[data-theme="seal"] { align-items: center; text-align: center; }

.icon { width: clamp(56px, 6vw, 80px); height: auto; flex: none; }

.tile-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--text);
  text-shadow: 0 0 10px var(--glow);
}
.tile[data-theme="dekkimon"] .tile-title { text-shadow: 3px 3px 0 var(--accent); }
.tile[data-theme="arthur"] .tile-title { color: var(--accent); text-shadow: 1px 1px 0 var(--accent-2); }

.blurb {
  margin: 0;
  flex: 1;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

.badge {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 10px 14px;
  background: var(--badge-bg);
  color: var(--badge-text);
  border: 2px solid var(--accent);
  border-radius: calc(var(--radius) / 2);
  box-shadow: 0 0 12px var(--glow);
}
.tile[data-theme="dekkimon"] .badge { border-color: #2a1a12; box-shadow: 2px 2px 0 #2a1a12; }
.tile[data-theme="seal"] .badge { border-color: #0d0f13; }


/* hover / focus */
.tile:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }

@media (hover: hover) {
  .tile:hover, .tile:focus-visible {
    transform: scale(1.03);
    box-shadow: var(--shadow), 0 0 36px var(--glow), 0 0 70px var(--glow);
    z-index: 3;
  }
  .tile[data-theme="arthur"]:hover,
  .tile[data-theme="arthur"]:focus-visible {
    filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 28px var(--glow));
  }
  .grid:has(.tile:hover) .tile:not(:hover),
  .grid:has(.tile:focus-visible) .tile:not(:focus-visible) { opacity: .6; transform: scale(.98); }
}
@media (hover: none) {
  .tile:active { transform: scale(.98); }
}

/* ---------- footer ---------- */
.footer {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: center;
  font-size: 14px;
  color: var(--text);
  opacity: .85;
}
.footer a { color: var(--accent-2); }
body[data-theme="arthur"] .footer a { color: var(--accent); }

/* ---------- ambient layers (built by script.js) ---------- */
.fx { position: absolute; inset: 0; }

.fx-scanlines {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  animation: scan 8s linear infinite;
}
@keyframes scan { to { background-position: 0 120px; } }

.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 60%, rgba(43, 240, 255, .15));
  border: 1px solid rgba(255, 255, 255, .35);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  100% { transform: translate(30px, -120vh); opacity: 0; }
}

.fx-hex {
  inset: -97px;
  background: var(--hex) 0 0 / 56px 97px;
  opacity: .9;
  animation: hexdrift 40s linear infinite;
}
@keyframes hexdrift { to { transform: translate(56px, 97px); } }

.fx-pixels {
  background-image:
    linear-gradient(rgba(42, 26, 18, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 26, 18, .08) 1px, transparent 1px);
  background-size: 8px 8px;
}
.fx-blink {
  background: radial-gradient(circle at 50% 40%, rgba(17, 138, 178, .18), transparent 70%);
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.fog {
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
}
.fog-a { background: radial-gradient(circle, rgba(124, 255, 158, .35), transparent 65%); top: -20vmax; left: -40vmax; animation: fogA 28s ease-in-out infinite alternate; }
.fog-b { background: radial-gradient(circle, rgba(179, 136, 255, .45), transparent 65%); bottom: -30vmax; right: -40vmax; animation: fogB 34s ease-in-out infinite alternate; }
@keyframes fogA { to { transform: translate(60vw, 30vh); } }
@keyframes fogB { to { transform: translate(-55vw, -25vh); } }

.eye {
  position: absolute;
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: gaze 7s ease-in-out infinite;
}
.eye::before, .eye::after {
  content: "";
  width: 18px;
  height: 7px;
  border-radius: 50%;
  background: #7cff9e;
  box-shadow: 0 0 10px #7cff9e, 0 0 22px rgba(124, 255, 158, .6);
}
@keyframes gaze {
  0%, 100% { opacity: 0; transform: scaleY(.2); }
  25%, 60% { opacity: .85; transform: scaleY(1); }
  42% { transform: scaleY(.1); }
}

.ember {
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6a2b;
  box-shadow: 0 0 6px #ff6a2b, 0 0 14px #ff6a00, 0 0 22px rgba(200, 16, 46, .8);
  animation: ember linear infinite;
}
@keyframes ember {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translate(var(--dx, 20px), -60vh); opacity: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .tile:hover, .tile:focus-visible { transform: none; }
  .bubble, .ember, .eye { display: none; }
}