/* Winnington — shared styles. Bump the filename (v2 → v3) whenever you edit it,
   so browsers holding the long-cached copy fetch the new one. */

:root {
  --black: #000;
  --lacquer-hi: #C8202B;
  --lacquer: #8E0E17;
  --lacquer-deep: #3E050A;
  --gold: #D4A935;
  --gold-hi: #F3D98B;
  --gold-lo: #8A6414;
  --paper: #F3E7C9;
  --card-w: clamp(150px, 18vw, 230px);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--black);
  color: var(--paper);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; }

/* ---------- Stage ---------- */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  gap: clamp(24px, 5vh, 56px);
  padding: max(32px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(142, 14, 23, .45), transparent 70%),
    radial-gradient(ellipse at 50% 120%, #2a0407, #000 60%);
}

.wordmark {
  align-self: end;
  font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 5.25rem);
  letter-spacing: .05em;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-hi) 10%, var(--gold) 55%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}

.replay {
  align-self: end;
  background: none;
  border: 0;
  color: rgba(243, 231, 201, .45);
  font-size: .85rem;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}
.replay:hover { color: var(--gold-hi); }
.replay:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Cards ---------- */

.deck {
  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  gap: clamp(18px, 3vw, 44px);
}

.slot { position: relative; }
.slot::after {                       /* soft shadow the card floats above */
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: -26px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent);
  animation: shadow 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
}

.card {
  display: block;
  position: relative;
  width: var(--card-w);
  aspect-ratio: 3 / 4;
  color: inherit;
  text-decoration: none;
  perspective: 1100px;
  cursor: pointer;
  outline: none;
  animation: float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
.card.soon { cursor: default; }

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1);
}
.card:hover .card-inner,
.card:focus-visible .card-inner,
.card.is-flipped .card-inner { transform: rotateY(180deg); }

.card:focus-visible .face { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

.face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .07), transparent 55%),
    linear-gradient(165deg, #1d1a1f, #070608 62%, #120f13);
  box-shadow:
    inset 0 0 0 1px rgba(212, 169, 53, .55),
    inset 0 0 0 9px #070608,
    inset 0 0 0 10px rgba(212, 169, 53, .3),
    0 24px 44px -14px rgba(0, 0, 0, .9),
    0 0 70px -24px rgba(200, 32, 43, .7);
}

.back {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(165deg, var(--lacquer-hi), var(--lacquer) 45%, var(--lacquer-deep));
  box-shadow:
    inset 0 0 0 1px var(--gold-hi),
    inset 0 0 0 9px rgba(62, 5, 10, .55),
    inset 0 0 0 10px rgba(243, 217, 139, .5),
    0 24px 44px -14px rgba(0, 0, 0, .9),
    0 0 80px -20px rgba(200, 32, 43, .9);
}
.soon .back {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .1), transparent 55%),
    linear-gradient(165deg, #5a0b12, #33060b 55%, #1a0306);
}

.mon { width: 56%; height: auto; overflow: visible; }
.mon.small { width: 26%; opacity: .9; }
.mon circle, .mon path, .mon ellipse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mon .fill { fill: var(--gold); stroke: none; }
.back .mon circle, .back .mon path, .back .mon ellipse { stroke: var(--gold-hi); }
.back .mon .fill { fill: var(--gold-hi); }

.name {
  font-weight: 800;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing: .02em;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
.note { font-size: .85rem; color: rgba(243, 231, 201, .75); }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-12px) rotate(.6deg); }
}
@keyframes shadow {
  0%, 100% { transform: scaleX(1);   opacity: .9; }
  50%      { transform: scaleX(.78); opacity: .55; }
}

@media (max-width: 760px) {
  :root { --card-w: min(40vw, 200px); }
  .deck { grid-template-columns: repeat(2, var(--card-w)); row-gap: 44px; }
}

/* ---------- Intro ----------
   Everything here is choreographed from intro.v2.js; CSS only sets the stage. */

.intro, .skip { display: none; }

.intro-play .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.intro-play body { overflow: hidden; }

/* covers pre-JS paint so the page never flashes before the cut */
.intro-play .deck, .intro-play .wordmark, .intro-play .replay { opacity: 0; }

.bot-svg {
  position: absolute;
  left: 50%;
  top: 52%;
  height: min(98vh, 155vw);
  width: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.bot-svg g, .bot-svg .shock, .bot-svg .twinkle { transform-box: view-box; }
.bot-svg .shock, .bot-svg .twinkle { opacity: 0; }
.bot-svg .flame { transform: scale(1, 0); }
.bot-svg .flicker { animation: flicker .07s steps(2) infinite alternate; }
@keyframes flicker { to { transform: scale(.82, 1.18); } }

/* black layers sit on top of the robot until the cut; extra bleed hides the shake */
.backdrop, .half { position: absolute; inset: -20px; background: #000; }
.half-a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.half-b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.slash, .edge {
  position: absolute;
  top: -20px;
  right: -20px;
  height: 3px;
  margin-top: -1.5px;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, #FFF3CF 8%, #fff 50%, #FFF3CF 92%, transparent);
  box-shadow: 0 0 10px 2px rgba(243, 217, 139, .9), 0 0 36px 8px rgba(200, 32, 43, .75);
  border-radius: 2px;
  opacity: 0;
}

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 150, .25), rgba(200, 32, 43, .1) 40%, transparent 65%);
  opacity: 0;
}

.spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 60%, #F3D98B);
  box-shadow: 0 0 6px 1px rgba(243, 217, 139, .9);
  opacity: 0;
}

.intro-play .skip {
  display: block;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  background: transparent;
  color: rgba(243, 231, 201, .55);
  border: 1px solid rgba(212, 169, 53, .35);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .85rem;
  cursor: pointer;
}
.intro-play .skip:hover, .intro-play .skip:focus-visible { color: var(--gold-hi); border-color: var(--gold); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .slot::after { animation: none; }
  .card-inner { transition-duration: .01s; }
}

/* ---------- Member pages ---------- */

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 40px 20px;
  text-align: center;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(142, 14, 23, .4), transparent 70%), #000;
}
.page h1 {
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5rem);
  color: var(--gold-hi);
}
.page p { color: rgba(243, 231, 201, .75); max-width: 36ch; line-height: 1.7; }
.page a { color: var(--gold); text-underline-offset: 4px; }
.page a:hover { color: var(--gold-hi); }