/* Sweet Town Studios — shared site styles */

:root {
  color-scheme: light dark;

  --bg: #0b0e13;
  --bg-2: #10141b;
  --panel: #161b23;
  --panel-2: #1c222c;
  --border: rgba(232, 230, 223, 0.09);
  --text: #e8e6df;
  --text-dim: rgba(232, 230, 223, 0.68);
  --text-faint: rgba(232, 230, 223, 0.45);
  --emerald: #4f9e7a;
  --emerald-bright: #6bc79b;
  --gold: #d3a24d;
  --gold-bright: #eec87a;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f2ea;
    --bg-2: #efe9dc;
    --panel: #fffdf8;
    --panel-2: #f8f3e7;
    --border: rgba(42, 38, 32, 0.1);
    --text: #2a2620;
    --text-dim: rgba(42, 38, 32, 0.68);
    --text-faint: rgba(42, 38, 32, 0.45);
    --shadow: 0 20px 50px -24px rgba(42, 38, 32, 0.35);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0e13; --bg-2: #10141b; --panel: #161b23; --panel-2: #1c222c;
  --border: rgba(232, 230, 223, 0.09); --text: #e8e6df; --text-dim: rgba(232, 230, 223, 0.68);
  --text-faint: rgba(232, 230, 223, 0.45); --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] {
  --bg: #f5f2ea; --bg-2: #efe9dc; --panel: #fffdf8; --panel-2: #f8f3e7;
  --border: rgba(42, 38, 32, 0.1); --text: #2a2620; --text-dim: rgba(42, 38, 32, 0.68);
  --text-faint: rgba(42, 38, 32, 0.45); --shadow: 0 20px 50px -24px rgba(42, 38, 32, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}

a { color: var(--emerald-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 46rem; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem; max-width: 74rem; margin: 0 auto;
  transition: padding 0.25s ease;
}
.nav.is-scrolled .nav__inner { padding: 0.75rem 1.5rem; }

.nav__brand { display: flex; align-items: center; gap: 0.6rem; font-family: Georgia, serif; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--text); }
.nav__brand:hover { text-decoration: none; }
.nav__mark { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; flex: none; }
.nav__mark img { width: 100%; height: 100%; object-fit: cover; }

.nav__links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--text-dim); font-size: 0.94rem; letter-spacing: 0.02em; position: relative; padding: 0.2rem 0; }
.nav__links a:hover { color: var(--text); text-decoration: none; }
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  border-radius: 2px;
}

.nav__toggle {
  display: none; background: none; border: 1px solid var(--border); border-radius: 0.5rem;
  width: 2.3rem; height: 2.3rem; color: var(--text); cursor: pointer; align-items: center; justify-content: center;
}

@media (max-width: 720px) {
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0.3rem;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.6);
    padding: 0.7rem 0.85rem 0.95rem;
    max-height: 0; overflow: hidden;
    visibility: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.22s ease, visibility 0s linear 0.3s;
  }
  .nav__links.is-open {
    max-height: 24rem; visibility: visible; opacity: 1;
    transition: max-height 0.3s ease, opacity 0.22s ease, visibility 0s;
  }
  .nav__links a {
    display: flex; align-items: center;
    width: 100%; min-height: 3rem;
    padding: 0.8rem 1rem 0.8rem 1.25rem;
    border-radius: 0.6rem;
    font-size: 1rem;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .nav__links a:hover, .nav__links a:focus-visible { background: var(--panel-2); }
  .nav__links a.is-active { background: color-mix(in srgb, var(--emerald) 13%, transparent); }
  .nav__links a.is-active::after {
    left: 0.45rem; right: auto; top: 50%; bottom: auto;
    width: 3px; height: 1.2rem;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--emerald), var(--gold));
    border-radius: 3px;
  }
  .nav__toggle { display: inline-flex; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem; border-radius: 0.6rem; font-size: 0.95rem; letter-spacing: 0.015em;
  border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: linear-gradient(135deg, var(--emerald), #3f8266); color: #fff; box-shadow: 0 10px 24px -10px rgba(79, 158, 122, 0.55); }
.btn--primary:hover { box-shadow: 0 14px 30px -10px rgba(79, 158, 122, 0.65); }

.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--emerald-bright); color: var(--emerald-bright); }

.btn--discord { background: #5865f2; color: #fff; box-shadow: 0 10px 24px -10px rgba(88, 101, 242, 0.55); }
.btn--discord:hover { background: #6875f5; box-shadow: 0 14px 30px -10px rgba(88, 101, 242, 0.65); }

.btn--instagram {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  color: #fff; box-shadow: 0 10px 24px -10px rgba(214, 41, 118, 0.5); border: none;
}
.btn--instagram:hover { box-shadow: 0 14px 30px -10px rgba(214, 41, 118, 0.6); filter: brightness(1.06); }

/* ---------- hero / fog-of-war ---------- */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }

/* The tiles are a baked slice of the real game map (assets/js/dublin-map.js); the grid is centred so a
   window wider than the hero overhangs both edges evenly instead of hanging off the right. */
.fogmap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fogmap__grid {
  position: absolute; inset: 0; display: grid;
  justify-content: center; align-content: center;
  image-rendering: pixelated; image-rendering: crisp-edges;
  opacity: 0.85;
}
/* Sized in px off --fog-cell, which the script sets alongside the grid tracks. NOT width/height:100%:
   WebKit resolves a percentage height on a grid item against the grid CONTAINER, not the item's own
   track, so on iOS every tile came out one cell wide and the full height of the hero, stacked on top
   of one another. Chromium sizes it against the track, which is why it only ever broke on a phone. */
.fogmap__grid img {
  width: var(--fog-cell, 58px); height: var(--fog-cell, 58px);
  max-width: none; object-fit: cover; display: block;
}
.fogmap__veil {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--bg) 55%, transparent) 0%, var(--bg) 72%),
              linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), var(--bg) 92%);
  -webkit-mask-image: radial-gradient(circle var(--fog-r, 180px) at var(--fog-x, 50%) var(--fog-y, 40%), transparent 0%, transparent 42%, black 100%);
  mask-image: radial-gradient(circle var(--fog-r, 180px) at var(--fog-x, 50%) var(--fog-y, 40%), transparent 0%, transparent 42%, black 100%);
}
.fogmap__spark {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  left: var(--fog-x, 50%); top: var(--fog-y, 40%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--gold-bright) 0%, transparent 70%);
  box-shadow: 0 0 24px 8px color-mix(in srgb, var(--gold) 55%, transparent);
  pointer-events: none;
}
@media (max-width: 560px) {
  .fogmap__grid { opacity: 0.72; }
  .fogmap__spark { width: 8px; height: 8px; box-shadow: 0 0 16px 5px color-mix(in srgb, var(--gold) 55%, transparent); }
}

.hero__content { position: relative; z-index: 1; padding: 7.5rem 0 6.5rem; text-align: center; }
.hero__content::before {
  content: ""; position: absolute; inset: 3rem -1rem; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 56% at 50% 50%,
              color-mix(in srgb, var(--bg) 68%, transparent) 0%,
              color-mix(in srgb, var(--bg) 38%, transparent) 55%, transparent 80%);
}
@media (max-width: 720px) {
  .hero__content::before {
    inset: 1.5rem -1.5rem;
    background: radial-gradient(ellipse 80% 52% at 50% 54%,
                color-mix(in srgb, var(--bg) 78%, transparent) 0%,
                color-mix(in srgb, var(--bg) 48%, transparent) 58%, transparent 84%);
  }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.hero__title { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: 0.9rem; }
.hero__title em { font-style: normal; background: linear-gradient(120deg, var(--gold-bright), var(--emerald-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-dim); max-width: 40rem; margin: 0 auto 2.2rem; }
.hero__cta { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

.hero--sm .hero__content { padding: 5.5rem 0 4.5rem; }

/* ---------- sections ---------- */

section { padding: 5rem 0; }
/* Jump targets clear the sticky nav instead of landing underneath it. */
section[id] { scroll-margin-top: 4.5rem; }
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.section-head p { color: var(--text-dim); }
.eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald-bright); margin-bottom: 0.6rem; }

.alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* triskele divider */
.triskele { display: flex; justify-content: center; margin: 0 auto; color: var(--text-faint); opacity: 0.55; }
.triskele svg { width: 2.4rem; height: 2.4rem; }

/* ---------- reveal-on-scroll ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- cards ---------- */

.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 1rem; padding: 1.7rem;
  box-shadow: var(--shadow); transform-style: preserve-3d; will-change: transform;
  transition: transform 0.25s ease, border-color 0.25s ease;
  position: relative;
}
.card:hover { border-color: color-mix(in srgb, var(--emerald) 45%, var(--border)); }
.card__icon { width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; image-rendering: pixelated; }
.card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.card p { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

.card--flat { box-shadow: none; }

/* ---------- resource marquee ---------- */

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.92rem; white-space: nowrap; }
.marquee__item img { width: 1.6rem; height: 1.6rem; image-rendering: pixelated; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__num { font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.6rem); background: linear-gradient(120deg, var(--gold-bright), var(--emerald-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { color: var(--text-dim); font-size: 0.88rem; letter-spacing: 0.02em; }

/* ---------- roster strip ---------- */

.roster { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.roster__card {
  width: 6.5rem; text-align: center; padding: 0.9rem 0.6rem; border-radius: 0.8rem; background: var(--panel);
  border: 1px solid var(--border); transition: transform 0.2s ease, border-color 0.2s ease;
}
.roster__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.roster__card img { width: 3.6rem; height: 3.6rem; margin: 0 auto 0.5rem; image-rendering: pixelated; }
.roster__card span { font-size: 0.78rem; color: var(--text-dim); }

/* ---------- misc content blocks ---------- */

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 1.2rem; padding: 2.2rem; box-shadow: var(--shadow); }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Stacked, the media reads better tucked under the heading than orphaned at the
   very bottom. Dissolving the text wrapper promotes its children to grid items,
   so the image can be ordered in between them. */
@media (max-width: 820px) {
  .split--media-first { gap: 0; }
  .split--media-first > div:first-child { display: contents; }
  .split--media-first > div:first-child > * { order: 4; }
  .split--media-first > div:first-child > .eyebrow { order: 1; }
  .split--media-first > div:first-child > h2 { order: 2; }
  .split--media-first > .frame { order: 3; margin: 1.4rem 0 1.7rem; }
}

.frame { border-radius: 1.2rem; overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); box-shadow: var(--shadow); padding: 1.5rem; }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.pill-list li { border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--text-dim); }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--border); padding: 3rem 0; }
.foot__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.foot__links { display: flex; gap: 1.6rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.foot__links a { color: var(--text-dim); font-size: 0.9rem; }
.foot__links a:hover { color: var(--text); }
.foot__copy { color: var(--text-faint); font-size: 0.85rem; }

/* ---------- copy-email button (shared) ---------- */

.copy-email {
  display: inline-flex; align-items: center; vertical-align: baseline;
  margin-left: 0.35em; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; opacity: 0.55;
}
.copy-email:hover { opacity: 1; }
.copy-email.copied { color: var(--emerald-bright); opacity: 1; }
.copy-email svg { width: 0.95em; height: 0.95em; }

/* ---------- generic page (privacy, etc) ---------- */

.doc { max-width: 46rem; margin: 0 auto; padding: 3rem 1.4rem 5rem; }
.doc h1 { font-size: 1.9rem; margin-bottom: 0.2rem; }
.doc h2 { font-size: 1.25rem; margin-top: 2.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.doc .meta { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 2rem; }
.doc ul { padding-left: 1.3rem; }
.doc li { margin: 0.35rem 0; }