/* Kiki Tech / ANTIGA
   The look comes from the game's world, not from a template: a kitchen at night, floorboards and crumbs. Warm ink
   behind everything, one accent (the golden crumb, the thing every team is after), red only for danger (the stomp
   ring, the red ants). Unbounded carries the wordmark and the headlines, Space Grotesk does the reading. Real
   footage is the design: full-bleed stills and clips from inside the game; the chrome around them stays quiet.
   Both fonts: SIL Open Font License, served from here. */

@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #0f0c0a;        /* the floor at night */
  --ink-2: #16110d;
  --board: #22180f;      /* raised surfaces: floorboard */
  --board-2: #2d2016;
  --line: rgba(255, 236, 200, 0.10);
  --line-2: rgba(255, 236, 200, 0.20);
  --sugar: #fff3d6;      /* headings */
  --text: #d9cbb4;
  --muted: #9a8a73;
  --crumb: #f0b429;      /* the golden crumb: the one accent */
  --crumb-2: #ffd36a;
  --stomp: #ff5a3c;      /* danger, and the Teams mode */
  --leaf: #9ad34d;       /* ok, and the Co-op mode */
  --radius: 18px;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--crumb); color: var(--ink); }
h1, h2, h3 { font-family: var(--display); color: var(--sugar); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(40px, 6vw, 84px); }
h2 { font-size: clamp(30px, 4vw, 54px); }
h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 34em; color: var(--text); }
.kicker { font-weight: 500; color: var(--crumb); margin: 0 0 14px; }
.wordmark { font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
:focus-visible { outline: 3px solid var(--crumb); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--crumb); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 1000; }
.skip:focus { left: 12px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; font: 600 15px/1 var(--body); text-decoration: none; border-radius: 12px; border: 1px solid transparent; cursor: pointer; color: var(--sugar); transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.go { background: var(--crumb); color: var(--ink); }
.btn.go:hover { background: var(--crumb-2); transform: translateY(-1px); }
.btn.line { border-color: var(--line-2); background: rgba(15, 12, 10, 0.5); backdrop-filter: blur(8px); }
.btn.line:hover { border-color: var(--sugar); }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background 0.25s ease, border-color 0.25s ease; }
.site-header.scrolled { background: rgba(15, 12, 10, 0.86); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 22px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--display); color: var(--sugar); letter-spacing: 0.01em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { display: block; padding: 9px 13px; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--text); }
.nav-links a:hover { color: var(--sugar); }
.nav-links a[aria-current="page"] { color: var(--crumb); }
.nav .btn { padding: 11px 16px; font-size: 14px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; margin: auto; background: var(--sugar); position: relative; transition: transform 0.2s ease; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

/* sections */
section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--muted); font-size: 18px; max-width: 36em; }

/* hero: the game, full screen */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 40px) 0 clamp(48px, 8vh, 96px); overflow: hidden; }
.hero .media { position: absolute; inset: 0; }
.hero .media img, .hero .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(15, 12, 10, 0.45) 0%, rgba(15, 12, 10, 0) 22%, rgba(15, 12, 10, 0) 50%, rgba(15, 12, 10, 0.9) 100%),
  linear-gradient(90deg, rgba(15, 12, 10, 0.55) 0%, rgba(15, 12, 10, 0) 48%); }
.hero .wrap { position: relative; }
.hero h1 { margin: 0 0 20px; max-width: 14ch; }
.hero .lead { color: #f1e6d0; margin-bottom: 24px; max-width: 30em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.hero .wordmark { font-size: clamp(56px, 9.5vw, 132px); line-height: 0.95; margin-left: -0.04em; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.platforms li { display: inline-flex; align-items: center; gap: 8px; }
.platforms svg { width: 18px; height: 18px; fill: currentColor; }
.platforms .soon { color: var(--crumb); }

/* bands: a picture and a story, edge to edge */
.band { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.band.flip { grid-template-columns: 1fr 1.15fr; }
.band.flip .shot { order: 2; }
.band .shot { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--board); aspect-ratio: 16 / 9; }
.band .shot img, .band .shot video { width: 100%; height: 100%; object-fit: cover; }
.band .shot figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 13px; color: var(--sugar); background: rgba(15, 12, 10, 0.72); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 8px; }
.band h2 { margin-bottom: 18px; }
.band p { color: var(--text); }
.band ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.band li { position: relative; padding-left: 24px; }
.band li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 10px; border-radius: 3px; rotate: 45deg; background: var(--crumb); }
.band.danger li::before { background: var(--stomp); }
.band.coop li::before { background: var(--leaf); }
.band + .band { margin-top: clamp(56px, 8vw, 110px); }

/* the scale: one huge picture, one line */
.scale { padding: 0; }
.scale .shot { position: relative; overflow: hidden; }
.scale .shot img { width: 100%; height: min(78vh, 760px); object-fit: cover; }
.scale .shot::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(15, 12, 10, 0.05) 0%, rgba(15, 12, 10, 0.05) 45%, rgba(15, 12, 10, 0.94) 100%),
  linear-gradient(90deg, rgba(15, 12, 10, 0.78) 0%, rgba(15, 12, 10, 0.35) 40%, rgba(15, 12, 10, 0) 65%); }
.scale .caption { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vw, 72px); z-index: 1; } /* above the shading */
.scale h2 { max-width: 16ch; margin: 0 0 12px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7); }
.scale p { max-width: 34em; color: #fff3d6; margin: 0; font-size: 18px; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }

/* maps: three posters */
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.map { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--board); aspect-ratio: 3 / 4; display: flex; align-items: flex-end; text-decoration: none; }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.map:hover img { transform: scale(1.04); }
.map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 12, 10, 0) 40%, rgba(15, 12, 10, 0.92) 100%); }
.map .body { position: relative; z-index: 1; padding: 22px 22px 24px; }
.map h3 { margin: 0 0 4px; font-size: 26px; }
.map .line { color: var(--crumb); font-weight: 600; margin: 0 0 8px; }
.map p { margin: 0; font-size: 15px; color: var(--text); }

/* moments: a strip of faces and close calls */
.moments { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.moments figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: var(--board); aspect-ratio: 1; }
.moments img { width: 100%; height: 100%; object-fit: cover; }
.moments figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 13px; color: var(--sugar); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

/* the gameplay clip */
.clip { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--board); aspect-ratio: 16 / 9; }
.clip video { width: 100%; height: 100%; object-fit: cover; }

/* facts: the things that are true, two columns, no cards */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); border-top: 1px solid var(--line); }
.facts div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.facts h3 { font-size: 18px; margin: 0 0 6px; }
.facts p { margin: 0; color: var(--muted); }

/* FAQ */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font: 600 19px/1.35 var(--display); color: var(--sugar); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--crumb); font-size: 26px; line-height: 1; transition: transform 0.2s ease; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--text); max-width: 60ch; }

/* the nest: a call to action in the dark */
.nest { position: relative; border-radius: 24px; overflow: hidden; padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 80px); background: var(--board); border: 1px solid var(--line); }
.nest .bg { position: absolute; inset: 0; }
.nest .bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.nest .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 12, 10, 0.96) 0%, rgba(15, 12, 10, 0.78) 50%, rgba(15, 12, 10, 0.4) 100%); }
.nest > *:not(.bg) { position: relative; }
.nest h2 { max-width: 16ch; }
.nest .lead { margin-bottom: 26px; }

/* home: the studio */
.studio { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.studio .pillars { display: grid; gap: 22px; }
.studio .pillar h3 { font-size: 18px; margin: 0 0 6px; }
.studio .pillar p { margin: 0; color: var(--muted); }

/* home: the game, one big card that is really a poster */
.poster { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; border-radius: 24px; overflow: hidden; background: var(--board); border: 1px solid var(--line); text-decoration: none; }
.poster .media { position: relative; min-height: 440px; }
.poster .media img, .poster .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster .info { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.poster .info .wordmark { font-size: clamp(40px, 5vw, 72px); margin: 0; line-height: 0.95; }
.poster .status { color: var(--crumb); font-weight: 500; margin: 0; }
.poster p { color: var(--text); margin: 0; }
.poster .more { margin-top: auto; padding-top: 14px; font-weight: 600; color: var(--sugar); display: inline-flex; gap: 8px; align-items: center; }
.poster:hover .more { color: var(--crumb); }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.mail { display: inline-block; margin-top: 14px; font: 600 clamp(18px, 2vw, 26px)/1.3 var(--display); color: var(--crumb); text-decoration: none; word-break: break-all; }
.mail:hover { text-decoration: underline; text-underline-offset: 6px; }
form.panel { background: var(--board); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.field { margin-bottom: 16px; }
input, textarea, select { width: 100%; font: 16px/1.4 var(--body); color: var(--sugar); padding: 13px 15px; background: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--crumb); box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.15); }
textarea { min-height: 140px; resize: vertical; }
select option { background: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; min-height: 1.4em; }
.form-note.ok { color: var(--leaf); }
.form-note.err { color: var(--stomp); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { font: 600 14px/1 var(--body); color: var(--sugar); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; color: var(--text); }
.site-footer a:hover { color: var(--crumb); }
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }

/* the 404 */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--header-h) 0; }
.lost p { color: var(--muted); max-width: 36em; }

/* motion: only what answers the reader */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .map img, .btn { transition: none; }
}

/* smaller screens */
@media (max-width: 960px) {
  .band, .band.flip { grid-template-columns: 1fr; }
  .band.flip .shot { order: 0; }
  .studio, .contact-grid, .poster { grid-template-columns: 1fr; }
  .poster .media { min-height: 280px; }
  .facts { grid-template-columns: 1fr; }
  .maps { grid-template-columns: 1fr; gap: 12px; }
  .map { aspect-ratio: 16 / 10; }
  .moments { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .menu-btn { display: block; }
  .nav-links, .nav .btn { display: none; }
  .menu-open .site-header { background: rgba(15, 12, 10, 0.97); }
  .menu-open .nav-links { display: grid; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) - 4px); background: var(--board); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; }
  .menu-open .nav-links a { padding: 14px; font-size: 16px; }
  form .row, .foot-grid { grid-template-columns: 1fr; }
  .moments { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-bottom: 40px; }
  .scale .shot img { height: 70vh; }
}

/* ── the welcome: key art, the game's name on top, everything centred ─────────────────────────────── */
.hero.art { align-items: flex-start; text-align: center; padding-top: calc(var(--header-h) + clamp(28px, 6vh, 72px)); padding-bottom: 0; min-height: min(100svh, 980px); }
.hero.art .media img { object-position: center bottom; }
.hero.art .shade { background:
  linear-gradient(180deg, rgba(15, 12, 10, 0.72) 0%, rgba(15, 12, 10, 0.35) 34%, rgba(15, 12, 10, 0) 58%, rgba(15, 12, 10, 0.55) 100%); }
.hero.art .wrap { max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.hero.art .kicker { margin-bottom: 8px; }
.hero.art .wordmark { font-size: clamp(64px, 12vw, 164px); line-height: 0.92; margin: 0 0 16px; letter-spacing: 0.01em; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55); }
.hero.art .lead { max-width: 30em; margin-bottom: 24px; color: #fff3d6; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.hero.art .actions { justify-content: center; }
.hero.art .platforms { justify-content: center; margin-top: 22px; color: #e8dcc4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.hero.art .platforms .soon { color: var(--crumb-2); }

/* a light, warm band: cream paper, for the places and the people */
.light { background: #f3e6cf; color: #4a3a2a; }
.light h2, .light h3 { color: #1f150e; }
.light .kicker { color: #b07a0c; }
.light .section-head p, .light .muted { color: #6f5c47; }
.light + .light { padding-top: 0; }

/* the three places, as postcards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: block; text-decoration: none; color: inherit; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -14px rgba(60, 30, 0, 0.35); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(60, 30, 0, 0.45); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card .body { padding: 18px 20px 22px; }
.card h3 { margin: 0 0 4px; font-size: 22px; }
.card .line { margin: 0 0 6px; color: #b07a0c; font-weight: 600; }
.card p { margin: 0; font-size: 15px; color: #6f5c47; }

/* the proof: a real round, in a frame */
.proof { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.proof .clip { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.proof h2 { margin-bottom: 14px; }
.proof .note { font-size: 15px; color: var(--muted); }

/* the mascot: the game's own ant, bored, by the contact form */
.mascot { position: relative; display: grid; place-items: end center; }
.mascot img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35)); }
.mascot .ring { position: absolute; left: 50%; bottom: 7%; width: 70%; aspect-ratio: 4; translate: -50% 0; border: 3px dashed rgba(255, 90, 60, 0.55); border-radius: 50%; animation: ringpulse 2.4s ease-in-out infinite; }
@keyframes ringpulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .mascot .ring { animation: none; } }
.studio-mascot { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }

@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; }
  .proof, .studio-mascot { grid-template-columns: 1fr; }
  .mascot img { width: min(70%, 320px); }
}

/* ── the places, as chapters: the art, the facts, three real moments ─────────────────────────────── */
.place { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr; gap: 14px clamp(24px, 4vw, 64px); align-items: start; }
.place + .place { margin-top: clamp(64px, 9vw, 120px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.place .place-art { grid-column: 1; grid-row: 1; }
.place .place-shots { grid-column: 1; grid-row: 2; }
.place .place-body { grid-column: 2; grid-row: 1 / span 2; }
.place.flip .place-art, .place.flip .place-shots { grid-column: 2; }
.place.flip .place-body { grid-column: 1; }
.place-art { border-radius: var(--radius); overflow: hidden; background: var(--board); aspect-ratio: 16 / 10; }
.place-art img { width: 100%; height: 100%; object-fit: cover; }
.place-body h3 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; margin: 6px 0 10px; }
.place-body .line { color: var(--crumb); font-weight: 600; font-size: 18px; margin: 0 0 14px; }
.place-facts { margin: 22px 0 0; display: grid; gap: 14px; }
.place-facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.place-facts dt { color: var(--sugar); font-weight: 600; }
.place-facts dd { margin: 0; color: var(--text); }
.place-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.place-shots a { display: block; position: relative; border-radius: 12px; overflow: hidden; background: var(--board); aspect-ratio: 16 / 10; }
.place-shots img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.place-shots a:hover img { transform: scale(1.05); }

/* ── the round: a grid of moments, each one opens big; the clips play ────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery a { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--board); aspect-ratio: 16 / 10; }
.gallery a.big { grid-column: span 2; grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery a:hover img { transform: scale(1.04); }
.gallery .cap { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 14px; font-weight: 500; color: var(--sugar); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; background: rgba(15, 12, 10, 0.72); border: 1px solid rgba(255, 243, 214, 0.35); display: grid; place-items: center; color: var(--sugar); backdrop-filter: blur(6px); transition: transform 0.2s ease, background 0.2s ease; }
.play::before { content: ""; width: 0; height: 0; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.gallery a:hover .play, .place-shots a:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--crumb); color: var(--ink); border-color: var(--crumb); }
.place-shots .play { width: 42px; height: 42px; }
.place-shots .play::before { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 4px; }

/* the lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 6, 4, 0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 16px 24px; }
.lightbox[hidden] { display: none; }
.lightbox .stage { position: relative; width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); }
.lightbox .stage img, .lightbox .stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lightbox .caption { margin: 14px 0 0; color: var(--text); font-size: 15px; text-align: center; min-height: 1.4em; }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(34, 24, 15, 0.8); color: var(--sugar); font: 500 22px/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: var(--crumb); color: var(--ink); border-color: var(--crumb); }
.lightbox .close { top: 14px; right: 14px; }
.lightbox .prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox .next { right: 12px; top: 50%; translate: 0 -50%; }
body.lightbox-open { overflow: hidden; }

@media (max-width: 960px) {
  .place, .place.flip { grid-template-columns: 1fr; grid-template-rows: none; }
  .place .place-art, .place .place-shots, .place .place-body, .place.flip .place-art, .place.flip .place-shots, .place.flip .place-body { grid-column: auto; grid-row: auto; }
  .place .place-body { margin-top: 10px; }
  .place-facts div { grid-template-columns: 1fr; gap: 4px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery a.big { grid-column: span 2; grid-row: span 1; }
  .lightbox .prev, .lightbox .next { top: auto; bottom: 14px; translate: none; }
}

/* ── the colony: ants that peek over edges and walk along them (assets/js/ants.js) ─────────────────── */
/* full width, no height: nothing an ant does can ever make the page scroll sideways */
.ant-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow-x: clip; z-index: 40; pointer-events: none; }
.lightbox-open .ant-layer, .menu-open .ant-layer { display: none; }
.ant-peek, .ant-walk { position: absolute; pointer-events: none; }
/* hidden only below the edge (the ant comes out from behind it); antennae, hats and shadows may go past the box */
.ant-peek { clip-path: inset(-80px -60px 0 -60px); }
.ant-walk { clip-path: inset(-80px 0 -2px 0); }
.ant-svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: visiblePainted; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(240, 180, 41, 0.12)); }

/* peeking: hidden below the edge, up with a little bounce, down quicker */
.ant-peek .ant-holder { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(104%); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ant-peek.up .ant-holder { transform: translateY(0); }
.ant-peek.down .ant-holder { transition: transform 0.32s cubic-bezier(0.55, 0, 1, 0.45); }
.ant-peek .eep { animation: eep 0.16s ease-out; }
@keyframes eep { 50% { transform: translateY(-10%) scale(1.06, 0.94); } }

/* walking along an edge: legs in two tripods, the body bobs */
.ant-walk .ant-holder { position: absolute; left: 0; bottom: 0; opacity: 0; will-change: transform; }
.ant-walk.on .ant-holder { opacity: 1; }
.ant-walk .ant-holder.flip .ant-svg { transform: scaleX(-1); }
/* a tripod walk: in stance (60%) the foot stays on the ground and sweeps back in step with the ground; in swing (40%)
   it lifts (the leg shortens) and comes forward. Tripod b runs half a step behind tripod a. The scripts set --step
   (one full step, in seconds) from how fast the ant is going, so the feet never slide. Each leg turns about its hip. */
.ant-leg { transform-box: view-box; }
.walking .ant-leg { animation: stride var(--step, 0.36s) linear infinite; }
.walking .ant-leg.b { animation-delay: calc(var(--step, 0.36s) * -0.5); }
.walking .ant-body { animation: bob calc(var(--step, 0.36s) / 2) ease-in-out infinite alternate; }
@keyframes stride {
  0% { transform: rotate(-19deg) scaleY(1); }
  60% { transform: rotate(19deg) scaleY(1); }
  78% { transform: rotate(2deg) scaleY(0.8); }
  100% { transform: rotate(-19deg) scaleY(1); }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.4px); } }

/* eyes: blink; antennae twitch when the pointer is right there */
.ant-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 0.07s ease-in; }
.blink .ant-lid { transform: scaleY(1); }
.ant-antenna { transform-box: fill-box; }
.ant-antenna.l { transform-origin: 100% 100%; }
.ant-antenna.r { transform-origin: 0 100%; }
.curious .ant-antenna { animation: twitch 0.5s ease-in-out infinite alternate; }
@keyframes twitch { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }

/* less motion: they still look, they don't slide, walk or twitch */
.ants-still .ant-peek .ant-holder, .ants-still .ant-peek.down .ant-holder { transition: opacity 0.3s ease; transform: none; opacity: 0; }
.ants-still .ant-peek.up .ant-holder { opacity: 1; }
.ants-still .ant-walk { display: none; }
.ants-still .curious .ant-antenna, .ants-still .ant-lid { animation: none; transition: none; }

/* knocked out: X eyes and circling stars (ant-art.js draws them hidden) */
.ant-ko, .ant-stars { display: none; }
.ko .ant-ko, .ko .ant-stars { display: inline; }
.ko .ant-pupil, .ko .ant-lid { display: none; }

/* ── the home page's opening scene (assets/js/heist.js) ─────────────────────────────────────────── */
.heist { position: absolute; left: 0; right: 0; bottom: clamp(8px, 3.5vh, 44px); height: clamp(130px, 22vh, 230px); z-index: 1; pointer-events: none; overflow: hidden; }
.heist-ant { position: absolute; left: 0; bottom: 0; will-change: transform; }
.heist-tilt { position: relative; }
.heist-flip.flip .ant-svg { transform: scaleX(-1); }
.heist-ant .ant-svg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.45)); }
.heist-bang { position: absolute; left: 58%; top: -38%; translate: -50% 0; font: 900 clamp(30px, 3.4vw, 52px)/1 var(--display); color: var(--crumb-2); text-shadow: 0 2px 0 #1a1310, 0 0 12px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; }
.heist-bang.pop { animation: bang 0.9s ease-out forwards; }
@keyframes bang { 0% { opacity: 0; transform: translateY(10px) scale(0.4); } 18% { opacity: 1; transform: translateY(-6px) scale(1.25) rotate(-8deg); } 70% { opacity: 1; transform: translateY(-10px) scale(1) rotate(4deg); } 100% { opacity: 0; transform: translateY(-18px) scale(0.9); } }
.heist-grain { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)); }
.heist-grain svg { display: block; width: 100%; height: auto; }
.heist-bonk { position: absolute; translate: -50% -60%; display: grid; place-items: center; pointer-events: none; animation: bonk 0.85s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.heist-bonk svg { width: 100%; height: auto; grid-area: 1 / 1; }
.heist-bonk span { grid-area: 1 / 1; font: 900 clamp(13px, 1.4vw, 20px)/1 var(--display); color: #1a1310; letter-spacing: 0.02em; rotate: -8deg; }
@keyframes bonk { 0% { transform: scale(0.2) rotate(-20deg); opacity: 1; } 35% { transform: scale(1.12) rotate(4deg); } 75% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 0; } }
.heist-dust { position: absolute; bottom: 2px; border-radius: 50%; background: rgba(240, 220, 190, 0.55); animation: dust 0.6s ease-out forwards; pointer-events: none; }
@keyframes dust { from { transform: scale(0.4); opacity: 0.8; } to { transform: translateY(-14px) scale(1.8); opacity: 0; } }
@media (max-height: 560px) { .heist { display: none; } }

/* ── the Wardrobe: the game's own ants and accessories, rendered from the game (SiteLineup in AntGame) ───── */
.wardrobe { background: radial-gradient(ellipse 70% 55% at 50% 38%, #2d2016 0%, var(--ink) 70%); overflow: hidden; }
.wardrobe .section-head { margin-inline: auto; text-align: center; }
.wardrobe .section-head p { margin-inline: auto; }
.lineup { position: relative; margin: 0 auto clamp(36px, 6vw, 72px); max-width: 1100px; }
.lineup img { position: relative; width: 100%; height: auto; }
.lineup::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
.lineup::after { content: ""; position: absolute; inset: -20% 10% 30%; background: radial-gradient(closest-side, rgba(240, 180, 41, 0.12), transparent); pointer-events: none; z-index: -1; }
.rarity { display: inline-block; font: 600 11px/1 var(--body); letter-spacing: 0.04em; padding: 4px 7px; border-radius: 6px; vertical-align: 1px; }
.rarity.common { background: rgba(255, 243, 214, 0.12); color: #e9dcc2; }
.rarity.rare { background: rgba(94, 179, 247, 0.16); color: #8cc9fb; }
.rarity.epic { background: rgba(180, 140, 255, 0.18); color: #c8adff; }
.rarity.legendary { background: rgba(240, 180, 41, 0.2); color: var(--crumb-2); }
.outfits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.outfit { background: rgba(34, 24, 15, 0.7); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 18px; display: flex; flex-direction: column; }
.outfit img { width: 100%; height: 170px; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45)); transition: transform 0.35s ease; }
.outfit:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.outfit h3 { font-size: 19px; margin: 10px 0 8px; }
.outfit ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; color: var(--text); }
.outfit li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.outfit .total { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.outfit .total b { color: var(--crumb-2); font-weight: 600; }
.shelf-head { margin: clamp(48px, 7vw, 88px) 0 18px; }
.shelf-head h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; }
.shelf-head p { color: var(--muted); margin: 0; max-width: 46em; }
.shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.item { background: rgba(34, 24, 15, 0.55); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 14px; }
.item img { width: 100%; height: 110px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
.item h4 { font: 600 15px/1.3 var(--display); color: var(--sugar); margin: 8px 0 6px; }
.item .meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item .power { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.item .power::before { content: "Power: "; color: var(--leaf); font-weight: 600; }
@media (max-width: 1100px) { .outfits { grid-template-columns: repeat(3, 1fr); } .shelf { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  /* phones: the outfits become a row you swipe through, edge to edge */
  .outfits { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .outfits::-webkit-scrollbar { display: none; }
  .outfit { flex: 0 0 76%; scroll-snap-align: center; }
  .outfit img { height: 160px; }
  .lineup { margin-inline: -8%; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* portrait screens (phones, tablets upright): the key art isn't cropped to the height (that kept only the middle
   third, and the ants were outside it). It sits at the bottom, wide enough that every ant is in view, and its own
   background colour carries on above it. Each page sets how wide (--m-w), where (--m-left) and the colour (--m-bg). */
@media (orientation: portrait) and (max-width: 900px) {
  .hero.art .media { background: var(--m-bg, #0f0c0a); }
  .hero.art .media img { width: var(--m-w, 160%); max-width: none; height: auto; left: var(--m-left, -30%); right: auto; top: auto; bottom: 0; inset-block-start: auto; object-fit: initial; }
  .hero.art .shade { background: linear-gradient(180deg, rgba(15, 12, 10, 0.25) 0%, rgba(15, 12, 10, 0) 45%, rgba(15, 12, 10, 0) 80%, rgba(15, 12, 10, 0.45) 100%); }
}