/* ============================================================
   VILLAVERSE — FIFA-style still menu screens
   Claret #670E36 · Sky #94BEE5 · Ink #111827
   Every page is one fixed viewport: no scrolling, no copy —
   only boxed links to the other screens.
   ============================================================ */

:root {
  --claret: #670E36;
  --sky: #94BEE5;
  --sky-deep: #5E93C9;
  --ink: #111827;
  --ink-2: #1B2436;
  --claret-lit: #8E1A4F;             /* claret as it catches the light */

  /* Shared panel surfaces for the section pages: deep claret falling to
     near-black, so content holds its contrast over the brighter stadium. */
  --surface: linear-gradient(160deg, rgba(92,13,48,.88) 0%, rgba(46,8,26,.9) 55%, rgba(20,5,13,.92) 100%);
  --surface-soft: linear-gradient(160deg, rgba(92,13,48,.78) 0%, rgba(34,7,20,.84) 100%);
  --surface-hover: linear-gradient(rgba(148,190,229,.13), rgba(148,190,229,.13)), var(--surface);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;               /* still screens — never scroll */
}

body {
  font-family: 'Oswald', sans-serif;
  background: linear-gradient(135deg, #1C030F 0%, #35071B 45%, #4A0A27 100%);
  color: #fff;
}

.font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; }

a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* Heading kept for screen readers where the design has no visible title */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Backdrop layers ----------
   One cinematic photograph (assets/background.png) sits behind everything,
   graded down by two gradient washes so the interface always reads first. */
.bg-photo {
  position: fixed; inset: 0; pointer-events: none;
  background-image: url("../assets/background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .58;
}
.bg-vignette {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(10,2,6,.55) 70%, rgba(8,2,5,.88) 100%),
    linear-gradient(90deg, rgba(14,2,8,.92) 0%, rgba(14,2,8,.62) 42%, rgba(14,2,8,.55) 100%),
    linear-gradient(0deg, rgba(10,2,6,.95) 0%, rgba(12,2,7,.35) 45%, rgba(103,14,54,.18) 100%);
}

/* Logo bands: the right side of the VillaVerse mark, zoomed in.
   Two parallel strokes — claret then sky — faded at both ends so they
   read as large geometric shapes rather than hard printed lines. */
.band {
  position: fixed; top: -15vh; height: 130vh; width: 7vw;
  transform: skewX(-26deg);
  pointer-events: none;
  animation: bandDrift 14s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.band--claret { right: 26vw; background: linear-gradient(180deg, rgba(103,14,54,.5), rgba(103,14,54,.16)); }
.band--sky { right: 17.5vw; background: linear-gradient(180deg, rgba(148,190,229,.16), rgba(148,190,229,.04)); animation-delay: -7s; }
@keyframes bandDrift {
  0%, 100% { transform: skewX(-26deg) translateY(0); }
  50% { transform: skewX(-26deg) translateY(-16px); }
}

/* ---------- Section pages: stadium atmosphere ----------
   One shared treatment for Clips, Fan Shop, News and Villa Games (every
   page with <body class="subpage">). The photograph comes up brighter and
   lit from the floodlights; the edges and floor go deeper so the content
   band through the middle stays calm. No extra markup — it re-styles the
   same four backdrop layers every page already has. */
.subpage .bg-photo {
  opacity: .82;
  filter: blur(1.5px) saturate(1.08);   /* just enough to soften seat detail behind the content */
  transform: scale(1.02);                /* hides the blurred edge */
}
.subpage .bg-vignette {
  background:
    /* floodlight bloom over the two corner stands */
    radial-gradient(26% 24% at 5% 38%, rgba(214,230,246,.17) 0%, transparent 70%),
    radial-gradient(26% 24% at 95% 38%, rgba(214,230,246,.17) 0%, transparent 70%),
    /* light falling from the roofline into the middle of the frame */
    radial-gradient(70% 42% at 50% 34%, rgba(148,190,229,.1) 0%, transparent 72%),
    /* depth: dark sky, calm middle, deep floor */
    linear-gradient(180deg, rgba(10,2,6,.64) 0%, rgba(10,2,6,.26) 34%, rgba(10,2,6,.36) 62%, rgba(8,2,5,.92) 100%),
    /* cinematic edge vignette */
    radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(6,1,4,.8) 100%);
}

/* The two big diagonal strips, brought forward: richer claret, cleaner sky,
   each with a soft glow and a fine lit leading edge. The ends are faded in
   the gradient itself (not a mask) so the glow isn't clipped. */
.subpage .band { -webkit-mask-image: none; mask-image: none; }
.subpage .band--claret {
  background: linear-gradient(180deg, transparent 0%, rgba(138,22,74,.78) 20%, rgba(112,16,58,.72) 55%, rgba(103,14,54,.42) 82%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(138,22,74,.42));
}
.subpage .band--sky {
  background: linear-gradient(180deg, transparent 0%, rgba(168,204,238,.46) 20%, rgba(148,190,229,.34) 55%, rgba(148,190,229,.13) 82%, transparent 100%);
  filter: drop-shadow(0 0 24px rgba(148,190,229,.36));
}
.subpage .band::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(180deg, transparent 8%, rgba(255,255,255,.42) 30%, rgba(255,255,255,.18) 70%, transparent 92%);
}

/* ---------- Screen frame ---------- */
.screen {
  position: relative;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
}

/* ---------- Top bar: logo + tab boxes ---------- */
.top-bar {
  flex: none;
  position: relative; z-index: 3;   /* keeps the brand above the hero artwork */
  display: flex; align-items: center; gap: 3vw;
  padding: 22px 3vw 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 34px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.brand span { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #fff; line-height: 1; padding-top: 3px; }
.brand span b { color: var(--sky); font-weight: 400; }

/* ---------- Primary navigation: one connected menu ----------
   The tabs share a single container with one baseline rule and one
   sliding highlight (.tab-ind, injected by js/nav.js). */
.tabs {
  position: relative;
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: 18px; min-width: 0;
  padding: 0 2px 10px;
  background:
    linear-gradient(180deg, rgba(12,3,8,.0) 0%, rgba(12,3,8,.42) 100%);
  animation: dropIn .5s ease backwards;
}
.tabs::after {                         /* the single baseline the highlight rides */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(148,190,229,.32), rgba(148,190,229,.12) 60%, rgba(103,14,54,.35));
}
.tabs .tab { flex: 1 1 0; min-width: 0; text-align: center; }

/* Homepage nav: matched to the width of the panel block below it
   (--menu-w is measured by js/home.js). */
.menu-col .tabs {
  width: var(--menu-w, 100%); align-self: flex-end; margin-left: auto;
  /* solid enough that the hero artwork tucked behind it doesn't show through the labels */
  background: linear-gradient(180deg, rgba(16,3,10,.78) 0%, rgba(12,2,8,.92) 100%);
}

.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255,255,255,.66); text-decoration: none;
  background: none; border: 0;
  transition: color .25s ease, text-shadow .25s ease;
}
.tab:hover { color: #fff; }
.tab.active { color: #fff; text-shadow: 0 0 18px rgba(148,190,229,.45); }
.tab:focus-visible { outline: 2px solid var(--sky); outline-offset: -4px; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } }

/* Sliding highlight: sized and positioned by js/nav.js */
.tab-ind {
  position: absolute; left: 0; bottom: 0; z-index: 0;
  width: 0; height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(148,190,229,.02) 0%, rgba(148,190,229,.14) 100%);
  transition: transform .38s cubic-bezier(.22,.7,.25,1), width .38s cubic-bezier(.22,.7,.25,1);
}
.tab-ind::after {                      /* the moving underline itself */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, rgba(148,190,229,.35), var(--sky) 45%, rgba(148,190,229,.6));
  box-shadow: 0 0 14px rgba(148,190,229,.45);
}
.tabs--first-paint .tab-ind { transition: none; }
.tabs--peek .tab-ind { opacity: .78; }

/* Tabs placed in the top bar (every sub-page) */
.tabs--top { margin-left: auto; margin-bottom: 0; background: none; align-self: stretch; }
.tabs--top .tab { flex: 0 1 auto; min-width: 0; padding: 14px 24px; }
@media (max-width: 900px) {
  .tabs--top .tab { padding: 11px 12px; font-size: 12px; letter-spacing: .12em; }
}
@media (max-width: 560px) {
  .tabs--top { width: 100%; margin-left: 0; }
  .tabs--top .tab { flex: 1 1 0; padding: 10px 4px; font-size: 10.5px; letter-spacing: .06em; white-space: normal; line-height: 1.15; }
}

/* ---------- Card deck (clips screen) ---------- */
.deck-stage {
  flex: 1; min-height: 0;
  position: relative;
  display: flex; flex-direction: column;
}

.deck-head { padding: 2.5vh 3vw 0; animation: headIn .6s ease backwards; }
.deck-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
  line-height: .92; margin: 0;
  letter-spacing: .035em;
  color: #fff;
  /* white falling to a cool sky tint, lifted off the backdrop */
  background: linear-gradient(180deg, #FFFFFF 35%, #D3E5F6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.6));
}
@keyframes headIn { from { opacity: 0; transform: translateY(-12px); } }

/* Section rule: a lit sky lead segment, a claret follow-on, then a fine
   hairline that fades out to the right */
.head-rule {
  --lead: clamp(92px, 8.5vw, 150px);
  position: relative;
  height: 1px; margin: 14px 0 0;
  background: linear-gradient(90deg, rgba(148,190,229,.55) 0%, rgba(148,190,229,.2) 35%, rgba(142,26,79,.28) 68%, transparent 100%);
}
.head-rule::before,
.head-rule::after {
  content: ""; position: absolute; top: -1px; height: 3px;
}
.head-rule::before {
  left: 0; width: var(--lead);
  background: linear-gradient(90deg, #CFE3F6, var(--sky));
  box-shadow: 0 0 12px rgba(148,190,229,.55);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.head-rule::after {
  left: calc(var(--lead) + 6px); width: clamp(26px, 2.4vw, 42px);
  background: var(--claret-lit);
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.deck-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 3vw; }
.pc-tag {
  display: block; margin-top: 6px;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .3em; color: var(--sky);
}

.deck-wrap {
  flex: 1; min-height: 0; position: relative; display: flex; align-items: center;
  container-type: size;            /* cards size themselves off this box (see .deck) */
}

/* The deck is the scroll container, so anything painted by a card is clipped at
   its padding edge. Cards take 80% of the rail height (capped in vh for very
   tall windows): the remaining 20% is deliberate headroom for the hover scale,
   the selected card's lift and the blur radius of its glow — without it the
   glow ends in a hard horizontal line. */
.deck {
  position: relative;               /* offsetParent for centring a card in script */
  flex: 1;
  display: flex; align-items: center; gap: clamp(14px, 1.5vw, 28px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  --card-h: min(80cqh, 46vh);
  --card-w: calc(var(--card-h) * .718);   /* card PNG aspect ≈ 3:4 */
  /* 14% of the card height above and below: covers the hover scale, the
     selected card's lift and its glow, so nothing ends in a hard line */
  padding: calc(var(--card-h) * .17) calc(50% - var(--card-w) / 2);
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.deck:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

/* --dist (0 at the centre of the row → 1 at the edges) is set by the page
   script as the row scrolls; cards dim by brightness rather than opacity so
   the ones further out stay crisp instead of going see-through and muddy. */
.card {
  position: relative;
  flex: none;
  height: var(--card-h); width: var(--card-w);
  padding: 0; border: none; background: none; cursor: pointer;
  scroll-snap-align: center;
  transition: transform .25s ease, translate .35s cubic-bezier(.2,.65,.3,1);
  will-change: transform;
  animation: cardIn .55s ease backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.92); } }

/* Halo: its own layer behind the artwork, so the card stays crisp and the
   soft edge is free to spread into the deck's padding. */
.card::before {
  content: ""; position: absolute; inset: -9%; z-index: -1;
  background:
    radial-gradient(60% 56% at 50% 48%, rgba(148,190,229,.5) 0%, rgba(148,190,229,.16) 48%, transparent 74%),
    radial-gradient(60% 45% at 50% 64%, rgba(142,26,79,.45) 0%, transparent 70%);
  filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
/* Floor light: a soft pool of light the selected card stands in */
.card::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -8%; height: 11%; z-index: -1;
  background: radial-gradient(closest-side, rgba(148,190,229,.5), rgba(148,190,229,.12) 62%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.card img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.6))
          brightness(calc(1 - .3 * var(--dist, 0))) saturate(calc(1 - .2 * var(--dist, 0)));
  pointer-events: none;
  transition: filter .3s ease;
}
.card:hover { transform: scale(1.12) !important; z-index: 200 !important; }
.card:hover img { filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)) brightness(1.02); }
.card:hover::before { opacity: .55; }
.card:focus-visible { outline: 3px solid var(--sky); outline-offset: 6px; }

/* Selected: lifted, outlined in light along the card's own shape (the
   drop-shadows follow the PNG edge), haloed and stood in a pool of light */
.card.selected { translate: 0 -8px; }
.card.selected img {
  filter: drop-shadow(0 0 1.5px rgba(196,222,246,.95))
          drop-shadow(0 0 14px rgba(148,190,229,.5))
          drop-shadow(0 18px 26px rgba(0,0,0,.6))
          brightness(1.05);
}
.card.selected::before { opacity: 1; animation: cardGlow 3.2s ease-in-out infinite; }
.card.selected::after { opacity: 1; }
@keyframes cardGlow {
  0%, 100% { opacity: .78; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.03); }
}

/* ---------- Selected-player info bar (placeholder content) ----------
   A game-UI panel: deep claret into black, a lit sky edge on the left, a
   fine highlight along the top, and clear tiers — number, name, facts, CTA. */
.info-bar {
  position: relative;
  flex: none;
  margin: 0 3vw 3vh;
  display: flex; align-items: center; gap: 2.4vw;
  padding: 14px 16px 14px 30px;
  background:
    linear-gradient(90deg, rgba(103,14,54,.96) 0%, rgba(66,10,36,.95) 26%, rgba(26,6,16,.94) 62%, rgba(14,4,10,.95) 100%);
  border: 1px solid rgba(148,190,229,.36);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.22), inset 0 -30px 40px -30px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  animation: headIn .6s ease .2s backwards;
}
.info-bar::before {                    /* lit sky edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #CFE3F6, var(--sky) 45%, rgba(148,190,229,.35));
}
.info-bar::after {                     /* top highlight that fades out across the bar */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(196,222,246,.85), rgba(148,190,229,.2) 42%, transparent 78%);
}
.info-bar.flash .info-names, .info-bar.flash .info-num, .info-bar.flash .info-facts { animation: infoFlash .45s ease; }
@keyframes infoFlash { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; } }

.info-ident { display: flex; align-items: center; gap: 18px; min-width: 0; }
.info-crest { height: 42px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.info-num {
  position: relative;
  padding-right: 20px;
  font-family: 'Bebas Neue', sans-serif; font-size: 3.4rem; line-height: .9;
  color: var(--sky);
  text-shadow: 0 0 22px rgba(148,190,229,.35);
}
.info-num::after {                     /* angled divider between number and name */
  content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(148,190,229,.55), transparent);
  transform: skewX(-18deg);
}
.info-names { display: flex; flex-direction: column; gap: 2px; line-height: 1; min-width: 0; }
.info-first { font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.info-last {
  font-family: 'Bebas Neue', sans-serif; font-size: 2.3rem; line-height: .95; letter-spacing: .03em;
  color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.info-pos { font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--sky); }

.info-facts { display: flex; align-items: center; margin-left: auto; }
.fact {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 4.6em; padding: 2px clamp(14px, 1.6vw, 26px);
  font-family: 'Bebas Neue', sans-serif; font-size: 1.85rem; line-height: 1;
  color: #fff;
}
.fact + .fact::before {                /* thin angled separators between facts */
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148,190,229,.35), transparent);
  transform: skewX(-18deg);
}
.fact b {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(148,190,229,.78);
}

.info-stats { display: flex; flex-direction: column; gap: 5px; width: 16vw; min-width: 150px; }
.stat { display: flex; align-items: center; gap: 10px; }
.stat b {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .2em; color: rgba(255,255,255,.6); width: 30px;
}
.stat i {
  flex: 1; height: 4px; background: rgba(255,255,255,.15); position: relative;
  transform: skewX(-26deg);
}
.stat i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 50%); background: var(--sky);
}

/* Watch-clips button: the one solid element in the bar */
.watch-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: 1.6vw; flex: none;
  padding: 16px 30px 16px 26px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--claret); text-decoration: none;
  background: linear-gradient(180deg, #C4DDF3 0%, var(--sky) 55%, #86B2DC 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(103,14,54,.18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform .2s ease, filter .2s ease;
}
.watch-btn:hover { transform: translateY(-2px); filter: brightness(1.08) saturate(1.05); }
.watch-btn:active { transform: translateY(0); filter: brightness(.97); }
.watch-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--claret), inset 0 0 0 4px #fff; }
.watch-tri {
  width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  transition: transform .2s ease;
}
.watch-btn:hover .watch-tri { transform: translateX(3px); }

/* ---------- Player clips screen (video boxes) ---------- */
.vid-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.4vw;
  padding: 2vh 3vw 3vh;
}
.vid-box {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 16px 18px;
  background: var(--surface);
  border: 2px solid rgba(148,190,229,.4);
  color: #fff; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
  animation: cardIn .5s ease backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.vid-box:hover { transform: translateY(-5px); background: var(--surface-hover); border-color: var(--sky); }
.vid-box .vid-tri {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 0; height: 0;
  border-top: 15px solid transparent; border-bottom: 15px solid transparent;
  border-left: 25px solid var(--sky);
  filter: drop-shadow(0 4px 14px rgba(148,190,229,.6));
  transition: transform .22s ease;
}
.vid-box:hover .vid-tri { transform: translate(-50%, -60%) scale(1.2); }
.vid-box .vid-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--sky); }
.vid-label {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1;
  position: relative; z-index: 1;
}
.vid-label small {
  display: block; font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .25em; color: var(--sky); margin-top: 4px;
}
.vid-box--wide { grid-column: span 2; }

.back-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: var(--surface);
  border: 2px solid rgba(148,190,229,.45);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
.back-btn:hover { background: var(--sky); color: var(--claret); }

@media (max-width: 1100px) {
  .info-stats { display: none; }
  .vid-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .vid-box--wide { grid-column: span 2; }
}
/* Info bar steps down as the screen narrows: compact facts first (the
   Number fact repeats the big number, so it goes), then facts altogether */
@media (max-width: 1180px) {
  .info-bar { gap: 1.8vw; padding-left: 24px; }
  .info-num { font-size: 2.9rem; padding-right: 16px; }
  .info-last { font-size: 2rem; }
  .fact { min-width: 3em; padding: 2px 11px; font-size: 1.6rem; }
  .fact--num { display: none; }
}
@media (max-width: 860px) {
  .info-facts { display: none; }
  .watch-btn { margin-left: auto; }
}
@media (max-width: 760px) {
  .deck { --card-h: min(78cqh, 34vh); }
  .watch-btn { padding: 12px 16px; font-size: 11px; letter-spacing: .14em; }
}
@media (max-width: 480px) {
  .info-bar { margin: 0 4vw 2.5vh; padding: 12px 12px 12px 18px; gap: 12px; }
  .info-crest { display: none; }
  .info-num { font-size: 2.4rem; padding-right: 12px; }
  .info-last { font-size: 1.6rem; }
  .info-first, .info-pos { letter-spacing: .2em; }
  .deck-arrow { width: 40px; height: 62px; }
}

/* Row arrows: dark glass tabs with a lit inner edge; fill with sky on hover */
.deck-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 300;
  width: 50px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sky); cursor: pointer;
  background: linear-gradient(180deg, rgba(58,10,32,.88) 0%, rgba(16,4,10,.92) 100%);
  border: 1px solid rgba(148,190,229,.45);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.deck-arrow svg { width: 26px; height: 26px; transition: transform .2s ease; }
.deck-arrow:hover { background: linear-gradient(180deg, #C4DDF3, var(--sky)); color: var(--claret); border-color: var(--sky); }
.deck-arrow--left:hover svg { transform: translateX(-2px); }
.deck-arrow--right:hover svg { transform: translateX(2px); }
.deck-arrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky), inset 0 0 0 4px rgba(255,255,255,.6); }
.deck-arrow--left { left: 2vw; }
.deck-arrow--right { right: 2vw; }

/* ---------- Stage: player + menu panels ---------- */
.stage {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
  align-items: end;
  gap: 1.5vw;
  padding: 0 2.5vw;
}

/* Hero artwork: anchored to the bottom edge and tucked in behind the panel
   block (.menu-col sits above it). It is graded into the palette in CSS —
   the image file itself is untouched. */
.player-wrap { position: relative; height: 100%; }

/* soft claret/sky light behind the figure so it sits in the scene */
.player-wrap::before {
  content: ""; position: absolute; left: -10vw; bottom: 0;
  width: 46vw; height: 88vh;
  background:
    radial-gradient(50% 45% at 42% 38%, rgba(148,190,229,.16) 0%, transparent 70%),
    radial-gradient(60% 55% at 38% 70%, rgba(103,14,54,.55) 0%, transparent 72%);
  pointer-events: none;
}

.hero-art {
  position: absolute; bottom: 0; left: -3vw;
  height: 86vh; aspect-ratio: 1122 / 1402;     /* Unai_Emery.png */
  pointer-events: none;
  /* dissolve the cut-off bottom edge into the page */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 24%);
  mask-image: linear-gradient(to top, transparent 0%, #000 24%);
}
.hero-art img {
  display: block; width: 100%; height: 100%;
  /* pull the bright silver/green of the trophy down to the page's range */
  filter: saturate(.72) contrast(1.06) brightness(.9);
}
/* Colour grade: a sky → claret wash, clipped to the cutout's own outline
   (masked with the same PNG) so the transparent area stays clear. */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, #94BEE5 0%, #7A6F9E 38%, #670E36 72%, #3A0620 100%);
  mix-blend-mode: color;
  opacity: .5;
  -webkit-mask: url("../assets/Unai_Emery.png") center / 100% 100% no-repeat;
  mask: url("../assets/Unai_Emery.png") center / 100% 100% no-repeat;
}

/* ---------- Menu panels: one rectangle per page ----------
   Structure is deliberately two layers:
     a.panel        — grid cell, overflow VISIBLE, carries the outer glow
     span.panel-inner — clipped box (clip-path + overflow:hidden) with the art
   so the artwork stays cropped while the glow is free to bleed outside. */
.menu-col {
  align-self: center;
  position: relative; z-index: 2;
  min-width: 0;
  display: flex; flex-direction: column;
  height: min(84vh, 980px);
  padding-bottom: 3vh;
}

/* The grid is sized to the supplied artwork rather than to the column:
   news / fan shop / villa games are 4:3 (1448×1086) and clips is 941×1672,
   so the whole block has a fixed 1.464 ratio and the four cells land on the
   images' own proportions. .menu-fit is the measuring box; the grid takes the
   largest 1.464 rectangle that fits inside it. */
.menu-fit {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: flex-end;
  container-type: size;
}

.menu {
  --menu-ar: 1.464;          /* the artwork ratio: news / shop / games are 4:3, clips 9:16 */
  --menu-ar-max: 1.78;       /* how far the block may stretch to fill the stage */
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 1.33fr 1fr 1fr;   /* clips column is the portrait one */
  grid-template-rows: 2.06fr 1fr;
  grid-template-areas:
    "clips big big"
    "clips s1  s2";
  gap: 16px;
}
@supports (container-type: size) {
  .menu {
    /* Fill the stage: take the container unless that would stretch the cells
       past --menu-ar-max, in which case fall back to the artwork ratio. */
    width: min(100cqw, calc(100cqh * var(--menu-ar-max)));
    height: min(100cqh, calc(100cqw / var(--menu-ar)));
  }
}

.panel {
  position: relative;
  display: block;
  min-width: 0; min-height: 0;
  text-decoration: none; color: #fff;
  transition: transform .28s cubic-bezier(.2,.65,.3,1);
  animation: panelIn .6s ease backwards;
}
.panel:nth-child(1) { animation-delay: .25s; }
.panel:nth-child(2) { animation-delay: .35s; }
.panel:nth-child(3) { animation-delay: .45s; }
.panel:nth-child(4) { animation-delay: .55s; }
@keyframes panelIn { from { opacity: 0; transform: translateX(40px); } }

/* Soft outer glow — sits behind the clipped box, never inside it */
.panel::before {
  content: ""; position: absolute; inset: -6px; z-index: 0;
  background: linear-gradient(135deg, rgba(103,14,54,.75) 0%, rgba(148,190,229,.42) 55%, rgba(103,14,54,.6) 100%);
  filter: blur(11px);
  opacity: .34;
  pointer-events: none;
  transition: opacity .28s ease, inset .28s ease;
}
.panel:hover::before, .panel:focus-visible::before { opacity: .62; }

.panel-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end;
  height: 100%; overflow: hidden;
  background: linear-gradient(160deg, #2A0715 0%, #15040C 55%, #0E0308 100%);
  border: 1px solid rgba(148,190,229,.42);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.panel:hover .panel-inner,
.panel:focus-visible .panel-inner {
  border-color: rgba(148,190,229,.85);
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.25);
}
.panel:hover { transform: translateY(-4px); }
.panel:focus-visible { outline: none; }
/* Focus ring is drawn as an overlay: an outline would sit under the artwork,
   which is an absolutely-positioned child of .panel-inner. */
.panel-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(148,190,229,0);
  transition: box-shadow .2s ease;
}
.panel:focus-visible .panel-inner::after { box-shadow: inset 0 0 0 3px var(--sky); }

/* Artwork + its readability treatment */
.panel-media { position: absolute; inset: 0; overflow: hidden; }
.panel-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.0);
  transition: transform .35s cubic-bezier(.2,.65,.3,1);
}
.panel:hover .panel-img { transform: scale(1.02); }
.panel-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,2,5,.92) 0%, rgba(10,2,6,.62) 38%, rgba(12,3,8,.2) 72%, rgba(12,3,8,.12) 100%),
    linear-gradient(105deg, rgba(103,14,54,.55) 0%, rgba(103,14,54,.14) 45%, transparent 75%);
  transition: opacity .28s ease;
}
.panel:hover .panel-scrim { opacity: .88; }

/* Copy block — consistently bottom-left on every panel */
.panel-copy {
  position: relative; z-index: 2;
  padding: 22px 26px 22px 30px;
  max-width: 92%;
  transition: transform .28s cubic-bezier(.2,.65,.3,1);
}
.panel:hover .panel-copy { transform: translateY(-3px); }
.panel .label {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: .92; letter-spacing: .04em;
  text-shadow: 0 4px 22px rgba(0,0,0,.65);
}
.panel .sub {
  display: block; margin-top: 7px;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: clamp(.62rem, .78vw, .82rem);
  letter-spacing: .1em; line-height: 1.4;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  transition: color .28s ease;
}
.panel:hover .sub { color: rgba(255,255,255,.9); }

.panel .edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 2;
  background: linear-gradient(180deg, var(--sky), rgba(148,190,229,.25));
  transition: width .28s ease, background .28s ease;
}
.panel:hover .edge { width: 7px; background: linear-gradient(180deg, var(--sky), rgba(148,190,229,.5)); }

/* Panel slots. The defaults below are what a first visit (or no JS) gets;
   js/home.js re-points big / s1 / s2 at whichever of News, Fan Shop and
   Villa Games was opened most recently. */
.panel--clips { grid-area: clips; }
.panel--news { grid-area: big; }
.panel--shop { grid-area: s1; }
.panel--games { grid-area: s2; }
.panel[data-slot="big"] { grid-area: big; }
.panel[data-slot="s1"] { grid-area: s1; }
.panel[data-slot="s2"] { grid-area: s2; }

/* the two small cells carry smaller copy so the ratio of text to tile stays
   consistent with the two large ones */
.panel--shop .label, .panel--games .label,
.panel[data-slot="s1"] .label, .panel[data-slot="s2"] .label { font-size: clamp(1.3rem, 2vw, 2.1rem); }
.panel--news .label, .panel[data-slot="big"] .label { font-size: clamp(2rem, 3.6vw, 3.6rem); }
.panel--shop .sub, .panel--games .sub,
.panel[data-slot="s1"] .sub, .panel[data-slot="s2"] .sub { font-size: clamp(.56rem, .64vw, .7rem); margin-top: 5px; }
.panel--shop .panel-copy, .panel--games .panel-copy,
.panel[data-slot="s1"] .panel-copy, .panel[data-slot="s2"] .panel-copy { padding: 16px 18px 16px 22px; }

/* Current-page panel: lit up */
.panel.current .panel-inner { border-color: var(--sky); }
.panel.current::before { opacity: .55; }

/* Clips panel: the supplied backdrop plus slowly crossfading player cutouts.
   The cutouts carry no effects of their own — only opacity changes. */
.panel--clips .panel-img { background-position: center center; }
.panel-players { position: absolute; inset: 0; pointer-events: none; }
.panel-players img {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  /* cover + bottom anchor: every cutout fills the panel at its own aspect,
     cropping left/right instead of floating small in the middle */
  object-fit: cover; object-position: center bottom;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.panel-players img.is-visible { opacity: 1; }


/* ============================================================
   RESPONSIVE — keep it still on every size
   ============================================================ */
@media (max-width: 1100px) {
  .panel-copy { padding: 18px 18px 18px 22px; }
  .panel .sub { font-size: .68rem; letter-spacing: .06em; }
}
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; align-items: stretch; }
  .player-wrap { display: none; }             /* no scroll, ever */
  .menu-col { height: 100%; align-self: stretch; padding: 2vh 0 4vh; }
  .tab { padding: 10px 12px; font-size: 12px; letter-spacing: .12em; }
  .menu { gap: 12px; --menu-ar: 1.15; }   /* taller cells so the block fills a portrait screen */
  .panel::before { inset: -4px; filter: blur(9px); }
}
@media (max-width: 560px) {
  .menu {
    width: 100%; height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.15fr 1fr 1.2fr;
    grid-template-areas:
      "big   big"
      "s1    s2"
      "clips clips";
  }
  .menu-fit { container-type: normal; }
  .tabs { padding: 0 0 8px; }
  .tab { padding: 10px 3px; letter-spacing: .04em; font-size: 10.5px; white-space: normal; line-height: 1.15; }
  .panel .label { font-size: 1.75rem; }
  .panel .sub { font-size: .62rem; margin-top: 4px; }
  .panel-copy { padding: 14px 14px 14px 18px; max-width: 100%; }
  .panel-inner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
  body:not(.subpage) .band { display: none; }
  /* section pages keep their strips on phones, slimmer and quieter */
  .subpage .band { width: 11vw; opacity: .75; }
  .subpage .band--claret { right: 22vw; }
  .subpage .band--sky { right: 6vw; }
}

/* Short viewports: shrink the cards so the glow headroom still fits */
@media (max-height: 720px) {
  .deck { --card-h: min(80cqh, 42vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* the clips panel then shows a single player, handled in js/home-clips.js */
}

/* ============================================================
   FAN SHOP — market
   Left: the selected product shown large. Right: category
   filters, sort, a rail of product cards and the selected-item
   panel. All of it is rendered by js/shop.js from data/shop.js.
   ============================================================ */
.deck-sub {
  margin: 8px 0 0;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(148,190,229,.8);
}

.shop-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 29%) minmax(0, 1fr);
  gap: 1.4vw;
  padding: 1.8vh 3vw 3vh;
}

/* ---------- left: featured / selected product ---------- */
.feature-panel {
  position: relative;
  display: flex; flex-direction: column; min-height: 0;
  padding: 22px 24px 20px;
  /* same artwork the homepage Clips panel uses, graded down so the product
     stays the brightest thing in the panel */
  background:
    linear-gradient(180deg, rgba(16,4,10,.55) 0%, rgba(52,8,28,.45) 42%, rgba(10,3,7,.88) 100%),
    url("../assets/homepage/clips-img.png") center / cover no-repeat,
    var(--surface);
  border: 1px solid rgba(148,190,229,.34);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.2), inset 0 0 60px -20px rgba(142,26,79,.9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  animation: headIn .5s ease backwards;
}
.feature-panel::before {            /* claret edge light */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--claret-lit), rgba(103,14,54,.25));
}
.feature-badge {
  align-self: flex-start;
  padding: 6px 16px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .3em; text-transform: uppercase;
  color: #F6D6E4;
  background: linear-gradient(180deg, rgba(142,26,79,.9), rgba(103,14,54,.75));
  border: 1px solid rgba(214,96,148,.55);
  box-shadow: 0 0 18px rgba(142,26,79,.45);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.feature-art {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6% 8% 4%;
}
.feature-art img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.6));
  transition: transform .35s cubic-bezier(.2,.65,.3,1);
}
.feature-panel:hover .feature-art img { transform: scale(1.02); }
.feature-copy { flex: none; }
.feature-name {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.4rem, 1.9vw, 2.1rem);
  line-height: 1; letter-spacing: .03em;
}
.feature-tag {
  margin: 8px 0 0;
  font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.feature-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(148,190,229,.18);
}
.feature-stars { color: #E6B446; font-size: 15px; letter-spacing: .12em; }
.feature-price {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height: 1; color: #fff;
}

/* ---------- right: market ---------- */
.market {
  display: flex; flex-direction: column; min-height: 0; gap: 1.4vh;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, rgba(10,14,26,.78) 0%, rgba(8,4,12,.82) 100%);
  border: 1px solid rgba(148,190,229,.28);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  animation: headIn .5s ease .08s backwards;
}

.market-bar {
  flex: none;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.shop-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.shop-filter {
  padding: 11px 18px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62); cursor: pointer;
  background: linear-gradient(180deg, rgba(24,10,20,.7), rgba(12,4,10,.75));
  border: 1px solid rgba(148,190,229,.2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.shop-filter:hover { color: #fff; border-color: rgba(148,190,229,.45); }
.shop-filter.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(158,28,88,.95), rgba(103,14,54,.9));
  border-color: rgba(214,96,148,.6);
  box-shadow: 0 0 18px rgba(158,28,88,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.shop-filter:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.shop-sort { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.shop-sort-label {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.shop-sort-field {
  position: relative;
  display: inline-flex; align-items: center;
  background: linear-gradient(180deg, rgba(24,10,20,.8), rgba(12,4,10,.85));
  border: 1px solid rgba(148,190,229,.35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.shop-sort-field::after {                /* chevron */
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky);
  transform: rotate(45deg); pointer-events: none;
}
.shop-sort-field select {
  appearance: none; -webkit-appearance: none;
  padding: 11px 34px 11px 16px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: none; border: 0; cursor: pointer;
}
.shop-sort-field select:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.shop-sort-field option { background: #170512; color: #fff; }

/* ---------- product rail ---------- */
.market-rail-wrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; }
.market-rail {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 10px 44px;            /* keeps the end cards clear of the arrows */
  scroll-padding: 0 44px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.market-rail::-webkit-scrollbar { display: none; }
.market-rail:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }

.shop-card {
  position: relative; flex: none;
  width: clamp(132px, 12vw, 186px);
  display: flex; flex-direction: column;
  padding: 0 0 12px; cursor: pointer; text-align: left;
  color: #fff;
  background: linear-gradient(180deg, rgba(58,10,34,.72) 0%, rgba(16,5,12,.85) 100%);
  border: 1px solid rgba(148,190,229,.24);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  scroll-snap-align: center;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.shop-card-art {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16% 14% 8%;
}
.shop-card-art img {
  max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.5));
  transition: transform .25s cubic-bezier(.2,.65,.3,1);
}
.shop-card-name {
  padding: 0 14px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.35;
  color: rgba(255,255,255,.82);
}
.shop-card-price {
  padding: 6px 14px 0;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; line-height: 1; color: #fff;
}
.shop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(148,190,229,.6);
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.18);
}
.shop-card:hover .shop-card-art img { transform: scale(1.04); }
.shop-card:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.shop-card.is-selected {
  border-color: rgba(214,235,255,.9);
  background: linear-gradient(180deg, rgba(78,16,46,.85) 0%, rgba(20,7,16,.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.5), 0 0 22px rgba(148,190,229,.32);
}
.shop-card.is-selected .shop-card-name { color: #fff; }

.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 34px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sky); cursor: pointer;
  background: linear-gradient(180deg, rgba(48,8,28,.9), rgba(12,4,10,.94));
  border: 1px solid rgba(148,190,229,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.rail-arrow:hover { background: linear-gradient(180deg, #C4DDF3, var(--sky)); color: var(--claret); }
.rail-arrow:disabled { opacity: .3; cursor: default; }
.rail-arrow:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
.rail-arrow--left { left: 0; }
.rail-arrow--right { right: 0; }

.market-empty[hidden], .rail-arrow[hidden] { display: none; }
.market-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.market-count {
  flex: none; margin: 0; text-align: right;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

/* ---------- selected-item panel ---------- */
.item-bar {
  position: relative; flex: none;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 16px 14px 20px;
  background: linear-gradient(90deg, rgba(103,14,54,.8) 0%, rgba(34,8,22,.86) 38%, rgba(12,4,10,.88) 100%);
  border: 1px solid rgba(148,190,229,.3);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.item-thumb {
  flex: none; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(148,190,229,.28);
  background: rgba(8,3,7,.5);
}
.item-thumb img { max-width: 76%; max-height: 76%; }
.item-main { flex: 1; min-width: 0; }
.item-name {
  margin: 0 0 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-meta { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 46px); }
.item-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-field b {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(148,190,229,.75);
}
.item-field span {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; line-height: 1; color: #fff;
  white-space: nowrap;
}
.item-actions { flex: none; display: flex; flex-direction: column; gap: 8px; }

.buy-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, rgba(168,30,94,.95), rgba(103,14,54,.95));
  border: 1px solid rgba(224,116,166,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: filter .2s ease, transform .2s ease;
}
.buy-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.buy-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.buy-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.28); }
.buy-price { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .04em; }

.details-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); text-decoration: none;
  background: rgba(10,4,9,.5);
  border: 1px solid rgba(148,190,229,.45);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
.details-btn:hover { background: var(--sky); color: var(--claret); }

/* ---------- product page (shop-item.html) ---------- */
.product-page {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 2vw; align-items: start;
}
.product-art {
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: var(--surface);
  border: 1px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.product-art img { max-width: 100%; max-height: 46vh; filter: drop-shadow(0 20px 34px rgba(0,0,0,.55)); }
.product-tag {
  margin: 0 0 10px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--sky);
}
.product-desc { margin: 0 0 20px; max-width: 54ch; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72); }
.product-meta { margin-bottom: 22px; }
.product-buy { display: flex; align-items: center; gap: 20px; }
.product-price { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; line-height: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .shop-layout { grid-template-columns: minmax(0, 25%) minmax(0, 1fr); }
  .item-name { font-size: 1.3rem; }
  .item-meta { gap: 18px; }
}
@media (max-width: 900px) {
  /* featured moves above the market and the stage scrolls internally */
  .shop-stage { overflow-y: auto; }
  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .feature-panel { flex-direction: row; align-items: center; gap: 18px; min-height: 30vh; padding-top: 44px; }
  .feature-badge { position: absolute; top: 14px; left: 18px; }
  .feature-art { padding: 0; }
  .feature-copy { flex: 1; }
  .market { min-height: 58vh; }
  .market-rail-wrap { min-height: 230px; }
  .shop-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .shop-filters::-webkit-scrollbar { display: none; }
  .shop-filter { flex: none; }
  .shop-sort { margin-left: 0; }
}
@media (max-width: 680px) {
  .item-bar { flex-wrap: wrap; gap: 14px; }
  .market-rail { padding: 10px 36px; scroll-padding: 0 36px; }
  .rail-arrow { width: 28px; height: 52px; }
  .buy-btn, .details-btn { white-space: nowrap; padding: 12px 14px; letter-spacing: .14em; gap: 10px; }
  .item-thumb { display: none; }
  .item-main { flex: 1 1 100%; }
  .item-actions { flex: 1 1 100%; flex-direction: row; }
  .buy-btn, .details-btn { flex: 1; justify-content: center; }
  .product-page { grid-template-columns: minmax(0, 1fr); }
  .item-meta { gap: 14px; flex-wrap: wrap; }
}

/* ============================================================
   SHOP — product rail
   ============================================================ */
.rail-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; }
.rail {
  flex: 1;
  display: flex; align-items: center; gap: 1.4vw;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 2vh calc(50vw - 13vh);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

.prod {
  flex: none; position: relative;
  width: 26vh; min-height: 42vh;
  display: flex; flex-direction: column;
  padding: 0; cursor: pointer; text-align: center;
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.32);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  scroll-snap-align: center;
  transition: transform .25s ease, opacity .25s ease, background .25s ease, border-color .25s ease;
  animation: cardIn .5s ease backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.prod-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10% 12% 2%; }
.prod-art img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
.prod-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; line-height: 1;
  padding: 0 10px; color: rgba(255,255,255,.7);
}
.prod-price {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem;
  padding: 8px 0 16px; color: rgba(255,255,255,.7);
}
.prod-price img { height: 17px; width: auto; }
.prod:hover { border-color: var(--sky); background: var(--surface-hover); }

.prod.selected {
  background: var(--surface);
  border-color: var(--sky);
  box-shadow: inset 0 0 0 2px rgba(148,190,229,.35);
}
.prod.selected .prod-name, .prod.selected .prod-price { color: #fff; }
.prod-flag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%);
  padding: 5px 22px;
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--claret); background: var(--sky);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity .25s ease;
}
.prod.selected .prod-flag { opacity: 1; }
.view-btn {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  margin: 0 14px 14px;
  padding: 11px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--claret); background: var(--sky); text-decoration: none;
  border: 2px solid var(--sky);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
.prod.selected .view-btn { display: flex; }
.view-btn:hover { background: transparent; color: var(--sky); }

/* feature strip along the bottom */
.feature-strip {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2vw;
  margin: 0 3vw 2.5vh; padding: 14px 26px;
  background: var(--surface);
  border: 2px solid rgba(148,190,229,.35);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  animation: headIn .6s ease .25s backwards;
}
.feature { display: flex; align-items: center; gap: 12px; min-width: 0; }
.feature .fi {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--sky); border: 2px solid rgba(148,190,229,.5);
  transform: skewX(-14deg);
}
.feature .fi svg { transform: skewX(14deg); }
.feature b {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.feature small { display: block; font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.feature-sep { width: 2px; height: 30px; background: rgba(148,190,229,.25); transform: skewX(-20deg); flex: none; }

@media (max-width: 1100px) {
  .feature-strip { display: none; }
  .prod { width: 30vh; }
}
@media (max-width: 620px) {
}

/* ============================================================
   VILLA GAMES — hub grid
   Reuses the existing tile/edge/deco/clip-path language from
   .cat-tile / .panel rather than inventing new visual rules.
   ============================================================ */
.game-sub {
  margin: 10px 0 0; max-width: 640px;
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,.62); letter-spacing: .02em;
}
.game-sub b { color: #fff; font-weight: 600; }

/* The artwork is 4:3, so each tile's image area is 4:3 and nothing is cropped.
   --tile-max is the widest a tile can be while both rows still fit the height
   of the grid (its own container), so the whole screen holds six tiles with
   their full artwork; below that the columns just share the width. */
/* the stage is the size container the tiles measure themselves against */
.deck-stage:has(> .games-grid) { container-type: size; }

.games-grid {
  flex: 1; min-height: 0;
  --gap: 1.2vw;
  --bar: 82px;                       /* fixed bar height on every tile */
  /* widest a tile can be while both rows of 4:3 artwork still fit the height */
  --tile-max: calc(((100cqh - 4vh - var(--gap)) / 2 - var(--bar)) * 1.3333);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--tile-max)));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  justify-content: center; align-content: center;
  gap: var(--gap);
  padding: 1.6vh 3vw 2.4vh;
}

/* Every tile is identical: same column, same 4:3 artwork, same bar. */
.game-tile {
  position: relative; overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
  text-decoration: none; color: #fff;
  background: var(--surface);
  border: 2px solid rgba(148,190,229,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: cardIn .55s ease backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.game-tile:hover { transform: translateY(-6px); border-color: var(--sky); box-shadow: inset 0 0 0 1px rgba(148,190,229,.25); }
.game-tile:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* Artwork gets the whole height left over above the bar and is shown in
   full (contain). --tile-max keeps the box at roughly the files' own 4:3,
   so there is little to no letterboxing. */
.game-art {
  position: relative; flex: 1; min-height: 0; width: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #1B0510, #0D0308);
}
.game-art img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform .35s cubic-bezier(.2,.65,.3,1);
}
.game-tile:hover .game-art img { transform: scale(1.04); }
.game-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(20,5,13,.55) 72%, rgba(12,3,8,.92) 100%);
}

.game-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--bar);
  padding: 12px 18px;
  background: rgba(12,3,8,.82);
  border-top: 1px solid rgba(148,190,229,.32);
}
.game-bar-text { min-width: 0; }
.game-name {
  display: block;
  font-family: "Bebas Neue", sans-serif; letter-spacing: .03em;
  font-size: 1.45rem; line-height: 1;
}
.game-desc {
  margin-top: 5px;
  font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.game-play {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--sky);
  transition: transform .22s ease;
}
.game-tile:hover .game-play { transform: translateX(5px); }

@media (max-width: 1100px) {
  .games-grid { --bar: 74px; }
  .game-name { font-size: 1.25rem; }
  .game-bar { padding: 10px 14px; }
}
@media (max-width: 900px) {
  /* tablets and phones scroll: tiles take their natural height */
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none; grid-auto-rows: auto;
    align-content: start;
    overflow-y: auto; padding-bottom: 3vh;
  }
  /* explicit heights: auto grid rows have nothing to measure from a box
     that only has an aspect ratio, so art and tile are sized outright
     (≈4:3 of the two-column tile, plus the bar) */
  .games-grid { --bar: 86px; }
  .game-art { flex: none; height: 34.5vw; }
  .game-tile { height: calc(34.5vw + var(--bar)); }
}
@media (max-width: 560px) {
  .games-grid { grid-template-columns: minmax(0, 1fr); }
  .game-art { height: 70vw; }
  .game-tile { height: calc(70vw + var(--bar)); }
}

/* ============================================================
   VILLA GAMES — shared screen chrome
   (the GameHeader / BackToGames / GameButton / GameInput /
   GameProgress / GameInstructions / GameResultModal "components")
   ============================================================ */
.game-body, .page-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 1.4vh 3vw 3vh;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.5) transparent;
}
.game-body::-webkit-scrollbar, .page-body::-webkit-scrollbar { width: 8px; }
.game-body::-webkit-scrollbar-thumb, .page-body::-webkit-scrollbar-thumb { background: rgba(148,190,229,.45); }
.game-body::-webkit-scrollbar-track, .page-body::-webkit-scrollbar-track { background: transparent; }

.g-hint {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .02em;
}
.g-hint svg { flex: none; color: var(--sky); }

.g-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2vw; align-items: start; }
@media (max-width: 900px) { .g-cols { grid-template-columns: 1fr; } }

.g-panel {
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.32);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  padding: 20px 24px;
}
.g-panel + .g-panel { margin-top: 1.4vh; }
.g-panel-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: "Bebas Neue", sans-serif; font-size: 1.3rem; letter-spacing: .04em;
  color: var(--sky);
}
.g-panel-title svg { flex: none; }

.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--sky); background: none; color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease, border-color .2s ease;
}
.g-btn--solid { background: var(--sky); color: var(--claret); }
.g-btn--solid:hover { background: transparent; color: var(--sky); box-shadow: 0 8px 26px rgba(148,190,229,.3); transform: translateY(-2px); }
.g-btn--ghost { background: rgba(103,14,54,.5); border-color: rgba(148,190,229,.4); }
.g-btn--ghost:hover { background: rgba(148,190,229,.18); border-color: var(--sky); transform: translateY(-2px); }
.g-btn--danger { background: rgba(103,14,54,.5); border-color: rgba(224,122,122,.45); color: #f2caca; }
.g-btn--danger:hover { background: rgba(196,64,64,.3); border-color: #e07a7a; color: #fff; transform: translateY(-2px); }
.g-btn:disabled, .g-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; transform: none; }
.g-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.g-input-row { display: flex; gap: 12px; flex-wrap: wrap; }
.g-input {
  flex: 1; min-width: 180px;
  background: rgba(12,3,8,.55);
  border: 2px solid rgba(148,190,229,.4);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  color: #fff; font-family: "Oswald", sans-serif; font-size: 14px; letter-spacing: .02em;
  padding: 13px 20px;
}
.g-input::placeholder { color: rgba(255,255,255,.4); }
.g-input:focus { outline: none; border-color: var(--sky); background: rgba(12,3,8,.75); }
.g-input:disabled { opacity: .45; }

.g-progress { display: flex; align-items: center; gap: 14px; }
.g-progress-num { font-family: "Bebas Neue", sans-serif; font-size: 2.1rem; color: var(--sky); line-height: 1; flex: none; }
.g-progress-track {
  flex: 1; min-width: 90px; height: 8px; position: relative;
  background: rgba(255,255,255,.12); transform: skewX(-20deg);
}
.g-progress-fill { position: absolute; inset: 0; width: var(--p, 0%); background: var(--sky); transition: width .35s ease; }

.g-toast {
  position: fixed; left: 50%; bottom: 4vh; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; max-width: 90vw;
  background: rgba(74,10,39,.95); border: 2px solid var(--sky);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .04em; font-size: 13px;
  opacity: 0; pointer-events: none; z-index: 500;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transition: opacity .25s ease, transform .25s ease;
}
.g-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.g-toast--good { border-color: #8CD98C; }
.g-toast--bad { border-color: #E07A7A; }
.g-toast b { color: var(--sky); }
.g-toast--good b { color: #8CD98C; }

@media (max-width: 560px) {
  .g-panel { padding: 16px 16px; }
  .g-btn { padding: 12px 16px; font-size: 11px; letter-spacing: .12em; }
}

/* ============================================================
   TENABLE — ten-slot answer board
   ============================================================ */
.tb-board {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-flow: column; grid-template-rows: repeat(5, auto);
  gap: 8px 20px;
}
.tb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  background: rgba(12,3,8,.4); border: 1px solid rgba(148,190,229,.25);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: background .25s ease, border-color .25s ease;
}
.tb-num { flex: none; width: 26px; font-family: "Bebas Neue", sans-serif; font-size: 1.25rem; color: rgba(148,190,229,.5); }
.tb-answer { flex: 1; min-width: 0; font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: .03em; font-size: 13px; color: rgba(255,255,255,.32); }
.tb-row.filled { background: rgba(148,190,229,.15); border-color: var(--sky); animation: gFillIn .4s ease; }
.tb-row.filled .tb-num { color: var(--sky); }
.tb-row.filled .tb-answer { color: #fff; }
.tb-row.revealed { background: rgba(103,14,54,.55); border-color: rgba(224,122,122,.5); }
.tb-row.revealed .tb-answer { color: rgba(255,255,255,.6); font-style: italic; }
@keyframes gFillIn { from { transform: scaleX(.96); opacity: .3; } }

@media (max-width: 700px) {
  .tb-board { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}


/* ============================================================
   MISSING XI — pitch
   The pitch is sized by the height it is handed, not by its width,
   so the whole formation sits inside one viewport like the Pyramid
   board. It is a size container: every slot, crest and name scales
   in cq units off the pitch itself, so nothing needs re-measuring
   when the viewport changes.
   ============================================================ */
.mxi-layout { grid-template-columns: minmax(0, 46%) minmax(0, 48%); }
.mxi-pitch-col {
  display: grid; justify-items: center; align-items: center;
  min-height: 0;
}
.pitch-wrap {
  position: relative;
  height: 100%; width: auto; max-width: 100%;
  aspect-ratio: 68 / 96;
  container-type: size;
  background: linear-gradient(180deg, #2C5E28 0%, #21491E 100%);
  border: 2px solid rgba(148,190,229,.35);
  overflow: hidden;
  filter: drop-shadow(0 0 8px rgba(148,190,229,.22)) drop-shadow(0 0 18px rgba(103,14,54,.32));
}
.pitch-wrap svg.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.pitch-slot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .7cqh;
  width: 19cqw;
}
.pitch-pos {
  font-family: "Oswald", sans-serif; font-size: 2.1cqw; font-weight: 700;
  letter-spacing: .12em; color: var(--sky);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* One fixed box per player: the crest sits in it until he is named, then
   the name plate takes exactly the same space — so nothing on the pitch
   moves when an answer lands. */
.pitch-marker {
  position: relative;
  width: 100%; height: 9.6cqh;
  display: flex; align-items: center; justify-content: center;
}

/* The supplied crest, drawn at its own proportions. The artwork is a
   534×723 shield centred on a 1333×1000 transparent canvas, so scaling
   the background to 138.31% height makes the shield exactly fill the
   box — no cropping, no second copy of the file. */
.pitch-badge {
  position: absolute; inset: 0;
  background-image: url("../assets/games/missing 11 badge.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 138.31%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

.pitch-name {
  width: 100%; padding: .8cqh .5cqw; text-align: center;
  font-family: "Oswald", sans-serif; font-size: 2.15cqw; font-weight: 600;
  line-height: 1.2; letter-spacing: .01em;
  background: rgba(12,3,8,.82);
  border: 1px solid var(--sky);
  color: #fff;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* not yet named: crest only */
.pitch-slot.blank .pitch-name { display: none; }
/* named, or revealed on giving up: the crest goes, the answer takes its place */
.pitch-slot.found .pitch-badge,
.pitch-slot.revealed .pitch-badge { display: none; }
.pitch-slot.found .pitch-name {
  background: rgba(148,190,229,.3);
  box-shadow: 0 0 10px rgba(148,190,229,.3);
}
/* missed ones stay legible but plainly not yours */
.pitch-slot.revealed .pitch-name {
  color: rgba(255,255,255,.62); font-style: italic;
  border-color: rgba(224,122,122,.5);
}
.pitch-slot.just-found .pitch-name { animation: gFillIn .38s ease; }

@media (max-width: 900px) {
  /* stacked under the head with the panel below — the stage scrolls */
  .mxi-pitch-col { min-height: auto; }
  .pitch-wrap { height: auto; width: min(86vw, 52vh); }
}

/* ============================================================
   VILLA OBSCURA
   Left: the tower — assets/games/pointless table.png as the visual
   shell, with the score in its oval and a 100-line meter on its
   navy face, both positioned as percentages of the artwork
   (geometry in js/villa-obscura.js). The displayed score is always
   the visible line count, and the meter empties from the top.
   Right: the shared game panel (.pyr-panel and friends).
   ============================================================ */
.obs-layout { grid-template-columns: minmax(0, 44%) minmax(0, 46%); }

.obs-tower-col {
  display: grid; grid-template-rows: minmax(0, 1fr) 2.2em;
  justify-items: center; align-items: center;
  min-height: 0; gap: .4vh;
}
.obs-tower {
  position: relative;
  height: 100%; min-height: 0;
  aspect-ratio: 1024 / 1536;           /* the artwork's own proportions */
  max-width: 100%;
  container-type: size;                /* score + lines scale off the tower */
  filter: drop-shadow(0 0 9px rgba(148,190,229,.26)) drop-shadow(0 0 20px rgba(103,14,54,.34));
  transition: filter .3s ease;
}
/* the zero celebration: a lift in the tower's own glow, nothing more */
.obs-tower.is-zero {
  filter: drop-shadow(0 0 13px rgba(148,190,229,.5)) drop-shadow(0 0 26px rgba(103,14,54,.45));
}
.obs-tower.is-pulse { animation: obsZero .9s ease; }
@keyframes obsZero {
  0%   { filter: drop-shadow(0 0 9px rgba(148,190,229,.26)) drop-shadow(0 0 20px rgba(103,14,54,.34)); }
  35%  { filter: drop-shadow(0 0 22px rgba(148,190,229,.85)) drop-shadow(0 0 44px rgba(158,28,88,.7)); }
  100% { filter: drop-shadow(0 0 13px rgba(148,190,229,.5)) drop-shadow(0 0 26px rgba(103,14,54,.45)); }
}
.obs-image {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

/* the score, sitting in the tower's claret oval */
.obs-score {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13cqw; line-height: 1; letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 10px rgba(148,190,229,.6), 0 2px 5px rgba(0,0,0,.55);
  transition: color .3s ease, text-shadow .3s ease;
  pointer-events: none;
}
.obs-tower.is-zero .obs-score {
  color: #E8F3FF;
  text-shadow: 0 0 16px rgba(148,190,229,.95), 0 0 32px rgba(148,190,229,.5), 0 2px 5px rgba(0,0,0,.5);
}

/* the meter: 100 evenly spaced lines on the navy face */
.obs-meter {
  position: absolute;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.obs-line {
  flex: 0 0 auto;
  height: .42%; min-height: 1px; width: 100%;
  background: linear-gradient(90deg,
    rgba(148,190,229,0) 0%,
    rgba(198,225,248,.9) 14%,
    #EAF4FF 50%,
    rgba(198,225,248,.9) 86%,
    rgba(148,190,229,0) 100%);
  box-shadow: 0 0 5px rgba(148,190,229,.5);
  transform-origin: center;
  transition: opacity .15s ease, transform .15s ease;
}
/* a spent line: fades and narrows, never explodes */
.obs-line.is-out { opacity: 0; transform: scaleX(.6); }

.obs-note {
  margin: 0; max-width: 62ch; text-align: center;
  font-size: 9.5px; line-height: 1.4; color: rgba(255,255,255,.34);
}

/* ---------- right panel bits ---------- */
.obs-question {
  margin: 0 0 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.15; letter-spacing: .02em;
}
.obs-answer {
  margin: 0 0 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1; letter-spacing: .03em;
  color: #fff;
}
.pyr-facts dd.obs-zero { color: var(--sky); text-shadow: 0 0 10px rgba(148,190,229,.6); }
.obs-rounds { margin-top: 12px; }
.obs-rounds li span { color: rgba(255,255,255,.7); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .obs-layout { grid-template-columns: minmax(0, 48%) minmax(0, 46%); }
}
@media (max-width: 900px) {
  /* stacked: tower, then the panel — the stage scrolls */
  .obs-tower-col { min-height: auto; grid-template-rows: auto auto; }
  .obs-tower { height: auto; width: min(58vw, 42vh); }
  .obs-note { font-size: 9px; }
}
@media (max-width: 560px) {
  .obs-tower { width: min(72vw, 44vh); }
}

@media (prefers-reduced-motion: reduce) {
  .obs-line { transition: none; }
  .obs-tower.is-pulse { animation: none; }
}


/* ============================================================
   CAREER PATH
   Left: the career top to bottom — one stage per club spell, with a
   glowing link between them. Years sit in a claret strip above a
   dark body that holds the club once it is named. No badges.
   Right: the shared game panel (.pyr-panel and friends).
   ============================================================ */
.cp-layout { grid-template-columns: minmax(0, 60%) minmax(0, 34%); }

.cp-path-col {
  display: grid; grid-template-rows: minmax(0, 1fr) 2.2em;
  justify-items: center; align-items: center;
  min-height: 0; gap: .4vh; width: 100%;
}

/* the stages share the height they are given, so a three-club career and
   a six-club one both sit in one viewport without the page scrolling */
.cp-path {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 36rem; height: 100%; min-height: 0;
}

/* ---------- a club spell ---------- */
.cp-stage {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  max-height: clamp(76px, 13vh, 118px); min-height: 56px;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(10,14,26,.92), rgba(6,3,10,.94));
  border: 1px solid rgba(148,190,229,.28);
  box-shadow: 0 0 8px rgba(148,190,229,.12);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}

/* claret strip: the years, always visible */
.cp-years {
  flex: none;
  padding: 5px 12px;
  background: linear-gradient(90deg, rgba(134,20,74,.95), rgba(76,10,42,.9));
  border-bottom: 1px solid rgba(148,190,229,.22);
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(9px, .95vh, 11px); letter-spacing: .26em; text-transform: uppercase;
  color: #F3D3E0;
}
/* dark body: the club, hidden until named */
.cp-club {
  flex: 1; min-height: 0;
  display: flex; align-items: center;
  padding: 6px 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 2.2vh, 1.7rem); line-height: 1; letter-spacing: .04em;
  color: rgba(255,255,255,.34);
}
/* the state in words, so it never reads by colour alone */
.cp-mark {
  position: absolute; right: 12px; bottom: 7px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(148,190,229,.75);
}

/* not yet reached */
.cp-stage[data-state="hidden"] .cp-club { letter-spacing: .3em; }

/* the newest clue — the one that just opened */
.cp-stage[data-state="latest"] {
  border-color: rgba(148,190,229,.85);
  box-shadow: 0 0 10px rgba(148,190,229,.45), 0 0 22px rgba(103,14,54,.25);
  transform: scale(1.03);
  z-index: 2;
}
.cp-stage[data-state="latest"] .cp-club { color: var(--sky); }
.cp-stage[data-state="latest"] .cp-years {
  background: linear-gradient(90deg, rgba(158,28,88,.98), rgba(96,12,54,.94));
  color: #fff;
}

/* a clue you have already been given */
.cp-stage[data-state="clue"] {
  border-color: rgba(148,190,229,.55);
  box-shadow: 0 0 8px rgba(148,190,229,.2);
  background: linear-gradient(170deg, rgba(20,34,54,.92), rgba(8,8,16,.94));
}
.cp-stage[data-state="clue"] .cp-club { color: #fff; }
.cp-stage[data-state="clue"] .cp-mark { color: var(--sky); }

/* filled in at the end — a clue you never needed */
.cp-stage[data-state="revealed"] {
  border-color: rgba(148,190,229,.18);
  box-shadow: none;
}
.cp-stage[data-state="revealed"] .cp-club { color: rgba(255,255,255,.55); font-style: italic; }
.cp-stage[data-state="revealed"] .cp-years { background: linear-gradient(90deg, rgba(70,24,46,.7), rgba(40,12,26,.7)); color: rgba(243,211,224,.6); }
.cp-stage[data-state="revealed"] .cp-mark { color: rgba(255,255,255,.4); }

/* the reveal: fades up and the glow lifts, then settles */
.cp-stage.just-found { animation: cpReveal .4s cubic-bezier(.2,.7,.3,1); }
@keyframes cpReveal {
  0%   { opacity: .45; transform: scale(.97); box-shadow: 0 0 20px rgba(148,190,229,.6); }
  60%  { box-shadow: 0 0 16px rgba(148,190,229,.45); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(148,190,229,.2); }
}

/* ---------- the link between spells ---------- */
.cp-link {
  position: relative;
  flex: 0 1 auto;
  width: 2px; height: clamp(10px, 2.4vh, 26px);
  background: linear-gradient(180deg, rgba(148,190,229,.15), rgba(148,190,229,.75), rgba(148,190,229,.15));
  box-shadow: 0 0 6px rgba(148,190,229,.4), 0 0 14px rgba(103,14,54,.3);
}
/* a light travelling down the path when a club lands */
.cp-link.is-pulse::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(148,190,229,0));
  animation: cpPulse .45s ease forwards;
}
@keyframes cpPulse {
  from { transform: translateY(-100%); opacity: 1; }
  to   { transform: translateY(240%); opacity: 0; }
}

/* the idle path on the mode screen: dimmer, nothing active */
.cp-path.is-preview .cp-stage { opacity: .82; }

.cp-note {
  margin: 0; max-width: 64ch; text-align: center;
  font-size: 9.5px; line-height: 1.4; color: rgba(255,255,255,.34);
}

/* ---------- right panel bits ---------- */
.cp-reveal-name {
  margin: 0 0 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1; letter-spacing: .03em;
  color: var(--sky);
}
/* a wrong guess: the input shakes, nothing on the path moves */
.pyr-input.is-wrong {
  animation: cpShake .42s ease;
  border-color: rgba(224,122,122,.8);
  box-shadow: 0 0 0 1px rgba(224,122,122,.35), 0 0 16px rgba(196,64,64,.25);
}
@keyframes cpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
/* the names already tried, so a wrong guess leaves a trace */
.cp-guesses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-guesses li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 9px;
  font-size: 10.5px; line-height: 1.3;
  background: rgba(8,4,10,.5);
  box-shadow: inset 0 0 0 1px rgba(224,122,122,.35);
  color: rgba(255,255,255,.72);
}
.cp-guesses b {
  flex: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: #E7A2A2;
}

/* the panel crossfades as it moves between mode select, play and result */
.pyr-panel-body.is-fresh { animation: cpPanelIn .3s ease; }
@keyframes cpPanelIn {
  from { opacity: .4; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .cp-layout { grid-template-columns: minmax(0, 56%) minmax(0, 40%); }
}
@media (max-width: 900px) {
  /* stacked: path, then the panel — the stage scrolls */
  .cp-path-col { min-height: auto; grid-template-rows: auto auto; }
  .cp-path { height: auto; max-width: 26rem; }
  .cp-stage { min-height: 62px; }
  .cp-link { height: 18px; }
  .cp-note { font-size: 9px; }
}
@media (max-width: 560px) {
  .cp-club { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-stage.just-found, .cp-link.is-pulse::after,
  .pyr-input.is-wrong, .pyr-panel-body.is-fresh { animation: none; }
  .cp-stage { transition: none; }
}


/* ============================================================
   VILLA WORDLE
   Left: the board — a header row and six guess rows, all laid out
   before the first guess so filling one never resizes anything.
   Sky is an exact match, an arrow says the answer is higher or
   lower, and every cell also carries the wording in aria-label.
   Right: the shared game panel (.pyr-panel and friends).
   ============================================================ */
.wd-layout { grid-template-columns: minmax(0, 58%) minmax(0, 36%); }

.wd-board-col {
  display: grid; grid-template-rows: minmax(0, 1fr) 2.6em;
  justify-items: center; align-items: center;
  min-height: 0; gap: .4vh; width: 100%;
}

/* one grid for the whole board, so the columns line up exactly and
   every guess row is the same height */
.wd-board {
  display: grid;
  /* the track list is set from the column definitions in
     js/villa-wordle-data.js; this is only the fallback before JS runs */
  grid-template-columns: 1.75fr 1.05fr 1.15fr .62fr .58fr .72fr;
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
  gap: 5px;
  width: 100%; max-width: 54rem; height: 100%; min-height: 0;
  transition: filter .3s ease;
}
.wd-board.is-solved { filter: drop-shadow(0 0 12px rgba(148,190,229,.3)); }

.wd-head {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 4px 3px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(148,190,229,.75);
}

.wd-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 4px 6px; text-align: center;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(8.5px, 1.15vh, 12px); line-height: 1.15; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(170deg, rgba(10,14,26,.9), rgba(6,3,10,.92));
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  overflow: hidden;
}

/* an untouched slot: still drawn, so the board is full size from the start */
.wd-cell[data-state="empty"] {
  background: linear-gradient(170deg, rgba(8,10,20,.5), rgba(5,3,8,.55));
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.08);
}

/* exact — the one that matters, so it takes the sky */
.wd-cell[data-state="exact"] {
  background: linear-gradient(180deg, #C4DDF3 0%, var(--sky) 60%, #86B2DC 100%);
  color: var(--claret); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 12px rgba(148,190,229,.35);
}
/* a number that is out, with the direction to go */
.wd-cell[data-state="higher"], .wd-cell[data-state="lower"] {
  background: linear-gradient(170deg, rgba(134,20,74,.75), rgba(60,8,32,.8));
  box-shadow: inset 0 0 0 1px rgba(214,96,148,.5);
}
.wd-cell[data-state="higher"]::after { content: ' \25B2'; font-size: .72em; margin-left: 4px; color: var(--sky); }
.wd-cell[data-state="lower"]::after  { content: ' \25BC'; font-size: .72em; margin-left: 4px; color: var(--sky); }
/* simply not it */
.wd-cell[data-state="off"] {
  background: linear-gradient(170deg, rgba(14,10,18,.9), rgba(8,4,10,.92));
  color: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

/* the database has no value for this one. Deliberately fainter than a
   miss and with no arrow: it is not a clue in either direction, and it
   must not be mistaken for one. */
.wd-cell[data-state="unknown"] {
  background: linear-gradient(170deg, rgba(14,10,18,.55), rgba(8,4,10,.6));
  color: rgba(255,255,255,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* the row that just landed, stepped across left to right */
.wd-cell.just-played { animation: wdFlip .34s cubic-bezier(.2,.7,.3,1) backwards; }
.wd-cell.just-played { animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes wdFlip {
  from { opacity: .3; transform: scaleY(.82); }
  to   { opacity: 1; transform: scaleY(1); }
}

.wd-note {
  margin: 0; max-width: 70ch; text-align: center;
  font-size: 9.5px; line-height: 1.4; color: rgba(255,255,255,.34);
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .wd-layout { grid-template-columns: minmax(0, 56%) minmax(0, 40%); }
  .wd-board { gap: 4px; }
}
@media (max-width: 900px) {
  /* stacked: board, then the panel — the stage scrolls */
  .wd-board-col { min-height: auto; grid-template-rows: auto auto; }
  .wd-board { height: auto; grid-template-rows: auto repeat(6, minmax(44px, auto)); max-width: 34rem; }
  .wd-note { font-size: 9px; }
}
@media (max-width: 560px) {
  /* nine columns will not fit a phone legibly, so the board keeps its
     real width and scrolls inside its own region rather than squeezing
     names into unreadable slivers. The page itself still does not
     scroll sideways. The track list comes from the column definitions
     in js/villa-wordle-data.js, so none is named here. */
  .wd-board-col { overflow-x: auto; }
  .wd-board { min-width: 30rem; gap: 3px; }
  .wd-cell { font-size: 8px; padding: 3px 2px; }
  .wd-head { font-size: 7.5px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-cell.just-played { animation: none; }
}


/* ============================================================
   NEWS — featured story + headline grid
   Reuses the same translucent-panel / clip-path / edge-bar
   language as .cat-tile and .vid-box rather than a new system.
   ============================================================ */
.news-tag {
  display: inline-block; align-self: flex-start;
  padding: 6px 16px;
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  background: var(--sky); color: var(--claret);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* The news screen holds one viewport: featured story, a six-card grid and a
   pager. Nothing scrolls on desktop — extra stories go on the next page. */
.news-stage {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 1.2vh;
  padding: 1.2vh 3vw 2.4vh;
}

.news-hero {
  position: relative; overflow: hidden;
  flex: 1.15 1 0%; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 26px;
  background: linear-gradient(135deg, rgba(110,16,58,.9) 0%, rgba(46,8,26,.9) 50%, rgba(12,3,8,.92) 100%);
  border: 2px solid rgba(148,190,229,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  text-decoration: none; color: #fff;
  transition: transform .25s ease, border-color .25s ease;
  animation: cardIn .5s ease backwards;
}
.news-hero::after {                    /* soft claret light instead of stripes */
  content: ""; position: absolute; top: -30%; right: -8%; width: 46%; height: 160%;
  background: radial-gradient(closest-side, rgba(158,28,88,.5), transparent 70%);
  pointer-events: none;
}
.news-hero:hover { transform: translateY(-4px); border-color: var(--sky); }
.news-hero .news-tag { background: var(--claret); color: #fff; border: 1px solid rgba(148,190,229,.6); margin-bottom: 10px; }
.news-hero h2 {
  position: relative; z-index: 1;
  font-family: "Bebas Neue", sans-serif; font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.02; margin: 0 0 8px; max-width: 780px;
}
.news-hero p {
  position: relative; z-index: 1;
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 640px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.news-meta { display: flex; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }
.news-meta .dot { width: 4px; height: 4px; background: rgba(255,255,255,.4); flex: none; }
.news-meta .go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--sky); transition: transform .22s ease; }
.news-hero:hover .news-meta .go, .news-card:hover .news-meta .go { transform: translateX(5px); }

.news-grid {
  flex: 2 1 0%; min-height: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1vw;
}
.news-card {
  position: relative; overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 18px;
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  text-decoration: none; color: #fff;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
  animation: cardIn .5s ease backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.news-card:hover { transform: translateY(-4px); border-color: var(--sky); background: var(--surface-hover); }
.news-card .news-tag { margin-bottom: 8px; }
.news-card h3 {
  font-family: "Bebas Neue", sans-serif; font-size: 1.2rem; line-height: 1.06; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card p {
  margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.6); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.news-pager {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.pager-btn {
  width: 34px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sky); cursor: pointer;
  background: linear-gradient(180deg, rgba(48,8,28,.85), rgba(12,4,10,.9));
  border: 1px solid rgba(148,190,229,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.pager-btn:hover:not(:disabled) { background: linear-gradient(180deg, #C4DDF3, var(--sky)); color: var(--claret); }
.pager-btn:disabled { opacity: .3; cursor: default; }
.pager-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
.pager-count {
  font-family: "Oswald", sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

@media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* phones and small tablets may scroll — one screen is a desktop rule */
  .news-stage { overflow-y: auto; }
  .news-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(156px, auto); }
  .news-card { padding: 12px 16px; }
  .news-card h3 { -webkit-line-clamp: 3; line-height: 1.12; }
  .news-hero { flex: none; min-height: 26vh; padding: 18px 20px; }
  .news-pager { justify-content: center; }
}

/* ---------- News article detail ---------- */
.article-panel { max-width: 780px; margin: 0 auto; }
.article-panel .news-tag { margin-bottom: 16px; }
.article-panel h1 {
  font-family: "Bebas Neue", sans-serif; font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.02; margin: 0 0 14px;
}
.article-panel .news-meta { margin-bottom: 22px; }
.article-body p {
  font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.82);
  margin: 0 0 18px;
}
.article-body p:first-child { color: #fff; font-size: 15px; }

/* ============================================================
   VILLA PYRAMID
   Left: the board — the main triangle plus one full-canvas row PNG
   per revealed answer, so a revealed row IS the supplied artwork.
   Right: a dark control panel carrying mode, status and the answer
   input. Rendered by js/villa-pyramid.js.
   ============================================================ */
.pyr-stage { overflow: hidden; }
.pyr-head { padding-top: 1.4vh; padding-bottom: 0; }

.pyr-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 60%) minmax(0, 36%);
  justify-content: space-between;
  gap: 4%;
  padding: .4vh 3vw 1.4vh;
}

/* ---------- left: board ---------- */
/* a fixed grid: the board always gets the same share of the column, so it
   never resizes when a question of a different length appears */
.pyr-board-col {
  display: grid; grid-template-rows: minmax(0, 1fr) 4.6em;
  justify-items: center; align-items: center;
  min-height: 0; gap: .6vh;
}
.pyr-board {
  position: relative;
  height: 100%; min-height: 0;
  width: fit-content;                /* hugs the artwork, so overlays line up */
  max-width: 100%;
  filter: drop-shadow(0 0 7px rgba(148,190,229,.32)) drop-shadow(0 0 17px rgba(103,14,54,.38));
  transition: filter .25s ease;
}
.pyr-board.is-pulse {
  filter: drop-shadow(0 0 12px rgba(148,190,229,.6)) drop-shadow(0 0 24px rgba(103,14,54,.5));
}
.pyr-board.is-complete {
  filter: drop-shadow(0 0 14px rgba(148,190,229,.55)) drop-shadow(0 0 30px rgba(103,14,54,.5));
}
.pyr-image {
  display: block;
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain;
}
.pyr-rows { position: absolute; inset: 0; pointer-events: none; }

/* A revealed row: the supplied PNG at the board's own size, so it lands
   exactly over its numbered row. No box, border or CSS-drawn shape. */
.pyr-row { position: absolute; inset: 0; }
.pyr-row[hidden] { display: none; }
.pyr-row-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* missed rows keep the artwork at full strength — darkening it lets the
   number underneath show through — and are told apart by their text */
.pyr-row.is-missed .pyr-row-img { filter: saturate(.32); }

/* The answer, centred on its row. Size is set per row by the script so
   long names stay on one line. */
.pyr-row-text {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 5px rgba(148,190,229,.45), 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden;
}
.pyr-row.is-missed .pyr-row-text { color: rgba(255,255,255,.58); font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,.65); }

/* reveal: the row fades and stretches in, the name follows just behind */
.pyr-row.just-found .pyr-row-img { animation: pyrReveal .3s cubic-bezier(.2,.7,.3,1); }
.pyr-row.just-found .pyr-row-text { animation: pyrTextIn .3s ease .12s backwards; }
@keyframes pyrReveal {
  from { opacity: 0; transform: scaleX(.96); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes pyrTextIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- question (in the artwork's sky band) ---------- */
/* The board already draws a light blue bar below row ten. The question
   goes in it rather than under the whole board, so the eye reads the
   challenge where it is being answered. Geometry is percentages of the
   1254×1254 artwork, measured by scanning the PNG for that band:
   x 20–1237 → 1.59%–98.64%, y 1102–1155 → 87.88% + 4.31%. */
.pyr-question-band {
  position: absolute;
  left: 1.59%;
  top: 87.88%;
  width: 97.05%;
  height: 4.31%;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  padding: 0 1.5%;
  text-align: center;
  pointer-events: none;                /* the board behind stays clickable */
}
.pyr-question-band.is-empty { visibility: hidden; }

.pyr-question-cat {
  flex: none;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(10,20,34,.62);
}
.pyr-question-text {
  min-width: 0;
  font-family: 'Bebas Neue', sans-serif;
  /* set by fitQuestionText() in js/villa-pyramid.js, which shrinks it
     until it fits the band — the band cannot grow, so the text gives */
  font-size: 14px;                     /* fitQuestionText() overrides this */
  line-height: 1;
  letter-spacing: .02em;
  color: #0B1A2B;                      /* dark on sky, not white on sky */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the sourcing caveat, still under the board and still quiet */
.pyr-question-note {
  margin: 4px 0 0; text-align: center; max-width: 56ch;
  font-family: 'Oswald', sans-serif;
  font-size: 9.5px; line-height: 1.4; color: rgba(255,255,255,.34);
}

@media (max-width: 900px) {
  .pyr-question-cat { display: none; }  /* the band is too short to share */
}

/* ---------- right: dark control panel ---------- */
.pyr-panel {
  display: flex; flex-direction: column; min-height: 0;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, rgba(10,12,22,.88) 0%, rgba(6,3,9,.9) 100%);
  border: 1px solid rgba(148,190,229,.3);
  box-shadow: inset 0 1px 0 rgba(148,190,229,.2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  animation: headIn .5s ease .06s backwards;
}
.pyr-panel-head { flex: none; margin-bottom: 14px; }
.pyr-panel-title {
  margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; letter-spacing: .04em;
}
.pyr-panel-sub {
  margin: 6px 0 0;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(148,190,229,.8);
}
.pyr-panel-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.45) transparent;
}

/* ---------- answer input (in the panel) ---------- */
.pyr-answer {
  flex: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(26,8,18,.55), rgba(8,4,10,.6));
  border: 1px solid rgba(148,190,229,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.pyr-answer-label {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--sky);
}
.pyr-input {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: .06em; color: #fff;
  background: rgba(6,3,8,.8);
  border: 1px solid rgba(148,190,229,.3);
  border-bottom: 2px solid rgba(148,190,229,.55);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pyr-input::placeholder { color: rgba(255,255,255,.32); }
.pyr-input:focus {
  outline: none;
  background: rgba(10,4,12,.9);
  border-color: rgba(214,96,148,.75);
  border-bottom-color: var(--sky);
  box-shadow: 0 0 0 1px rgba(158,28,88,.45), 0 0 16px rgba(148,190,229,.25);
}
.pyr-submit {
  width: 100%; padding: 12px 16px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--claret);
  background: linear-gradient(180deg, #C4DDF3 0%, var(--sky) 55%, #86B2DC 100%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: filter .2s ease, transform .2s ease;
}
.pyr-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pyr-submit:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--claret), inset 0 0 0 4px #fff; }
.pyr-feedback {
  margin: 0; min-height: 1.1em;
  font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.55);
}
.pyr-feedback[data-kind="hit"] { color: var(--sky); }
.pyr-feedback[data-kind="miss"] { color: #E7A2A2; }
.pyr-feedback[data-kind="dupe"] { color: #E6C07A; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .pyr-layout { grid-template-columns: minmax(0, 58%) minmax(0, 38%); gap: 3%; }
}
@media (max-width: 900px) {
  /* stacked: board, question, then the panel — scrolls */
  .pyr-stage { overflow-y: auto; }
  .pyr-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2vh; padding-bottom: 4vh;
  }
  /* let the stacked rows size to their content instead of collapsing */
  .pyr-board-col { min-height: auto; grid-template-rows: auto auto; }
  .pyr-board { height: 52vh; }
  .pyr-panel { min-height: 46vh; }
}
@media (max-width: 560px) {
  .pyr-board { height: 42vh; }
  .pyr-facts { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pyr-row.just-found .pyr-row-img, .pyr-row.just-found .pyr-row-text { animation: none; }
}

/* mode cards */
.pyr-mode {
  position: relative; display: block; text-align: left; cursor: pointer;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(160deg, rgba(40,10,26,.8), rgba(14,5,12,.85));
  border: 1px solid rgba(148,190,229,.28);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pyr-mode:hover { transform: translateY(-2px); border-color: rgba(148,190,229,.6); }
.pyr-mode:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
.pyr-mode--daily {
  background: linear-gradient(160deg, rgba(134,20,74,.92), rgba(54,8,30,.92));
  border-color: rgba(214,96,148,.55);
  box-shadow: 0 0 20px rgba(158,28,88,.3), inset 0 1px 0 rgba(255,255,255,.14);
}
.pyr-mode--daily:hover { box-shadow: 0 0 26px rgba(158,28,88,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.pyr-mode-tag {
  display: inline-block; margin-bottom: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--sky);
}
.pyr-mode--daily .pyr-mode-tag { color: #F3C9DC; }
.pyr-mode-name {
  display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; line-height: 1; letter-spacing: .03em;
}
.pyr-mode-copy {
  display: block; margin: 8px 0 12px;
  font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.62);
}
.pyr-mode-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sky);
}
.pyr-mode--daily .pyr-mode-go { color: #fff; }

/* blocks inside the panel */
.pyr-block {
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(40,10,26,.6), rgba(12,4,10,.7));
  border: 1px solid rgba(148,190,229,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.pyr-block--done { border-color: rgba(148,190,229,.55); box-shadow: inset 0 0 22px rgba(148,190,229,.12); }
.pyr-kicker, .pyr-cat-line {
  margin: 0 0 6px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--sky);
}
.pyr-kicker { color: rgba(255,255,255,.5); }
.pyr-preview {
  margin: 0 0 12px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; line-height: 1.1; letter-spacing: .02em;
}
.pyr-status {
  margin: 0 0 8px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; line-height: 1; color: var(--sky);
}
.pyr-big { margin: 0 0 10px; font-family: 'Bebas Neue', sans-serif; font-size: 2.6rem; line-height: 1; }
.pyr-facts { display: flex; gap: 22px; margin: 0 0 10px; }
.pyr-facts div { display: flex; flex-direction: column; gap: 3px; }
.pyr-facts dt {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(148,190,229,.75);
}
.pyr-facts dd { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; line-height: 1; }
.pyr-score-line {
  margin: 10px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.pyr-score-line b { display: block; margin-top: 4px; font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .03em; color: var(--sky); }
.pyr-score-line--muted b { color: rgba(255,255,255,.65); font-size: 1.2rem; }
.pyr-breakdown { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(148,190,229,.18); }
.pyr-breakdown li { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; padding: 3px 0; color: rgba(255,255,255,.6); }
.pyr-breakdown b { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; color: #fff; }
.pyr-hint { margin: 10px 0 0; font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.45); }
.pyr-next { margin: 12px 0 0; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pyr-next b { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .06em; color: #fff; }
.pyr-progress { margin-top: 4px; }

.pyr-wide { width: 100%; justify-content: center; text-align: center; }
.pyr-link {
  align-self: flex-start; padding: 4px 0; cursor: pointer;
  background: none; border: 0;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5);
  transition: color .2s ease;
}
.pyr-link:hover { color: var(--sky); }
.pyr-link:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* archive browser */
.pyr-search { width: 100%; }
.pyr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pyr-chip {
  padding: 7px 12px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  background: rgba(20,8,16,.7);
  border: 1px solid rgba(148,190,229,.22);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pyr-chip:hover { color: #fff; border-color: rgba(148,190,229,.5); }
.pyr-chip.is-active {
  color: #fff; background: linear-gradient(180deg, rgba(158,28,88,.9), rgba(103,14,54,.9));
  border-color: rgba(214,96,148,.6);
}
.pyr-chip:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.pyr-cards { display: flex; flex-direction: column; gap: 8px; }
.pyr-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer;
  padding: 11px 14px; color: #fff;
  background: linear-gradient(160deg, rgba(38,10,24,.7), rgba(12,4,10,.78));
  border: 1px solid rgba(148,190,229,.22);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: transform .18s ease, border-color .18s ease;
}
.pyr-card:hover { transform: translateX(3px); border-color: rgba(148,190,229,.55); }
.pyr-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
.pyr-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; line-height: 1; letter-spacing: .03em; }
.pyr-card-cat {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sky);
}
.pyr-empty { margin: 8px 0; font-size: 11px; color: rgba(255,255,255,.45); }


/* ============================================================
   VILLA BINGO
   Left: the board — assets/games/bingo table.png as the visual
   base, with 16 interactive overlay squares positioned as
   percentages of the artwork (geometry in js/villa-bingo.js).
   Right: the shared game panel (.pyr-panel and friends, borrowed
   from Villa Pyramid rather than duplicated).
   ============================================================ */
.bingo-layout { align-items: stretch; }

.bingo-board-col {
  display: grid; grid-template-rows: minmax(0, 1fr) 2.2em;
  justify-items: center; align-items: center;
  min-height: 0; gap: .4vh;
}
.bingo-board {
  position: relative;
  height: 100%; min-height: 0;
  aspect-ratio: 1 / 1;                 /* the artwork is square */
  max-width: 100%;
  filter: drop-shadow(0 0 7px rgba(148,190,229,.28)) drop-shadow(0 0 16px rgba(103,14,54,.35));
  transition: filter .25s ease;
}
.bingo-board.is-pulse {
  filter: drop-shadow(0 0 13px rgba(148,190,229,.58)) drop-shadow(0 0 26px rgba(103,14,54,.5));
}
.bingo-board.is-complete {
  filter: drop-shadow(0 0 15px rgba(148,190,229,.55)) drop-shadow(0 0 32px rgba(103,14,54,.5));
}
.bingo-image {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.bingo-cells { position: absolute; inset: 0; }

/* ---------- a square ----------
   The artwork's own tile is the surface; the overlay adds a dark plate
   so a criterion stays readable on both the sky and claret tiles, and
   thins that plate out as the square is claimed. */
.bingo-cell {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 8px 9px;
  text-align: center; cursor: pointer;
  color: #fff;
  /* UNCLAIMED: nearly black, with just enough claret to stay Villa's.
     A square you have not won should read as closed at a glance — the
     board's whole job is showing you what is left. */
  background: linear-gradient(180deg, rgba(14,2,9,.93) 0%, rgba(4,1,4,.96) 100%);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.1);
  transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
}
.bingo-cell:disabled { cursor: default; }
.bingo-cell-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px; line-height: 1.02; letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  overflow: hidden;
}
/* who claimed it — a surname, so it fits the square at this size */
.bingo-cell-claim {
  max-width: 100%;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 8px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sky);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .3s ease .12s;
}

/* selectable */
.bingo-cell:not(:disabled):hover,
.bingo-cell:not(:disabled):focus-visible {
  background: linear-gradient(180deg, rgba(6,10,20,.58) 0%, rgba(6,10,20,.46) 100%);
  box-shadow: inset 0 0 0 2px rgba(148,190,229,.7);
  outline: none;
  transform: scale(1.015);
}

/* chosen for this player, not yet checked */
.bingo-cell.is-selected {
  background: linear-gradient(180deg, rgba(158,28,88,.62) 0%, rgba(103,14,54,.68) 100%);
  box-shadow: inset 0 0 0 2px var(--sky), 0 0 18px rgba(148,190,229,.45);
}
.bingo-cell.is-selected .bingo-cell-label { text-shadow: 0 0 8px rgba(148,190,229,.6), 0 1px 3px rgba(0,0,0,.8); }

/* CLAIMED: the plate lifts right off the board. Against a near-black
   unclaimed square this is the difference the player reads first —
   a lit sky frame, a bright face and the artwork showing through. */
.bingo-cell.is-filled {
  background: linear-gradient(180deg, rgba(148,190,229,.3) 0%, rgba(94,147,201,.18) 100%);
  box-shadow: inset 0 0 0 2px rgba(148,190,229,1), 0 0 22px rgba(148,190,229,.5);
  animation: bingoClaim .34s cubic-bezier(.2,.7,.3,1);
}
.bingo-cell.is-filled .bingo-cell-label {
  color: #fff;
  text-shadow: 0 0 7px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9);
}
.bingo-cell.is-filled .bingo-cell-claim { color: #fff; }
.bingo-cell.is-filled .bingo-cell-claim { opacity: 1; }

/* wrong pick — a short flash, then back to unfilled */
.bingo-cell.is-wrong { animation: bingoWrong .6s ease; }
@keyframes bingoWrong {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  15%, 55% { box-shadow: inset 0 0 0 2px #E07A7A, 0 0 16px rgba(224,122,122,.5); }
}
@keyframes bingoClaim {
  from { transform: scale(.94); box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 0 26px rgba(148,190,229,.55); }
  to   { transform: scale(1); }
}

.bingo-note {
  margin: 0; max-width: 62ch; text-align: center;
  font-size: 9.5px; line-height: 1.4; color: rgba(255,255,255,.34);
}

/* ---------- the current player (right panel) ---------- */
.bingo-player { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bingo-player-name {
  margin: 10px 0 0;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; letter-spacing: .03em;
}
.bingo-player-num {
  font-size: .62em; letter-spacing: .04em; color: var(--sky);
}
.bingo-player-meta {
  margin: 5px 0 0;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(148,190,229,.85);
}
.bingo-picked {
  margin: 0; min-height: 2.4em;
  font-size: 10.5px; line-height: 1.45; color: rgba(255,255,255,.62);
}

/* what the last submission scored */
.bingo-review { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bingo-review li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 9px;
  font-size: 10.5px; line-height: 1.3;
  background: rgba(8,4,10,.5);
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.14);
}
.bingo-review li[data-hit="1"] { box-shadow: inset 0 0 0 1px rgba(148,190,229,.5); }
.bingo-review li[data-hit="0"] { box-shadow: inset 0 0 0 1px rgba(224,122,122,.45); }
.bingo-review b {
  flex: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
}
.bingo-review li[data-hit="1"] b { color: var(--sky); }
.bingo-review li[data-hit="0"] b { color: #E7A2A2; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .bingo-player-name { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
}
@media (max-width: 900px) {
  /* stacked: board, then the panel — the stage scrolls */
  .bingo-board-col { min-height: auto; grid-template-rows: auto auto; }
  .bingo-board { height: auto; width: min(92vw, 56vh); }
  .bingo-note { font-size: 9px; }
}
@media (max-width: 560px) {
  .bingo-board { width: min(94vw, 50vh); }
  .bingo-cell { padding: 5px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .bingo-cell.is-filled, .bingo-cell.is-wrong { animation: none; }
  .bingo-cell:not(:disabled):hover { transform: none; }
}

/* ============================================================
   HOW TO PLAY — the help button and its dialog
   Injected on every game page by js/game-help.js, with the
   wording in data/villa-games-help.js.
   ============================================================ */
.deck-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.help-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky);
  background: linear-gradient(160deg, rgba(14,18,32,.9), rgba(6,3,10,.92));
  border: 2px solid rgba(148,190,229,.32);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.help-btn span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0;
  color: var(--claret); background: var(--sky);
}
.help-btn:hover { border-color: var(--sky); background: linear-gradient(160deg, rgba(24,34,56,.92), rgba(10,6,16,.94)); color: #fff; }
.help-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.help-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 5vw;
  background: rgba(3,2,6,.72);
  animation: helpFade .2s ease;
}
.help-overlay[hidden] { display: none; }
@keyframes helpFade { from { opacity: 0; } to { opacity: 1; } }

.help-panel {
  width: min(52rem, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  padding: 22px 26px 24px;
  background: linear-gradient(180deg, rgba(12,14,26,.98) 0%, rgba(7,4,11,.99) 100%);
  border: 1px solid rgba(148,190,229,.4);
  box-shadow: 0 0 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(148,190,229,.25);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  animation: helpIn .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes helpIn { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.help-head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(148,190,229,.22);
}
.help-title {
  margin: 0; font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; letter-spacing: .04em;
}
.help-close {
  flex: none; width: 34px; height: 34px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--sky);
  background: rgba(20,8,16,.8);
  border: 1px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
.help-close:hover { background: var(--sky); color: var(--claret); }
.help-close:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.help-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.45) transparent;
}
.help-entry h3 {
  margin: 0 0 6px;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; line-height: 1;
  letter-spacing: .04em; color: var(--sky);
}
.help-entry p {
  margin: 0; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.78);
}

@media (max-width: 760px) {
  /* two buttons won't sit beside the title on a phone: drop them onto their
     own row so the heading keeps its width. Scoped with :has so the other
     pages' single back button is untouched. */
  .deck-head--row:has(.deck-actions) { flex-wrap: wrap; }
  .deck-actions { width: 100%; gap: 8px; }
  .help-btn, .deck-actions .back-btn { padding: 9px 13px; font-size: 10px; letter-spacing: .14em; }
  .help-panel { padding: 18px 18px 20px; }
  .help-entry p { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-overlay, .help-panel { animation: none; }
}

/* ============================================================
   PLAYER SEARCH — the shared autocomplete (js/player-search.js)
   ------------------------------------------------------------
   Sits directly under the guess box in any game that asks for a
   player. Deliberately small: seven rows before it scrolls, so it
   never covers the board behind it. Corners are cut, not rounded,
   and it borrows the sky border and claret highlight the panel
   inputs already use.
   ============================================================ */
.psearch { position: relative; display: block; }

.psearch-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  list-style: none; margin: 0; padding: 3px;
  max-height: calc(7 * 30px);            /* seven rows, then it scrolls */
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(10,5,13,.98), rgba(6,3,8,.99));
  border: 1px solid rgba(148,190,229,.34);
  box-shadow: 0 10px 28px rgba(0,0,0,.6), 0 0 18px rgba(148,190,229,.12);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

.psearch-item {
  padding: 6px 10px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: .05em; color: rgba(255,255,255,.82);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.psearch-item:hover,
.psearch-item.is-active {
  background: linear-gradient(90deg, rgba(103,14,54,.85), rgba(103,14,54,.35));
  border-left-color: var(--sky);
  color: #fff;
}

/* thin scrollbar, so a scrolling list does not grow a chunky rail */
.psearch-list::-webkit-scrollbar { width: 6px; }
.psearch-list::-webkit-scrollbar-thumb { background: rgba(148,190,229,.3); }

@media (max-width: 560px) {
  /* five rows on a phone: the keyboard already takes half the screen */
  .psearch-list { max-height: calc(5 * 30px); }
  .psearch-item { padding: 7px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .psearch-item { transition: none; }
}

/* ============================================================
   CAREER PATH — the Villa stint
   ------------------------------------------------------------
   Context, not a clue: every player in this game played for
   Villa, so it sits above the clues with his Villa record, in
   claret so it reads as the club rather than as another stage.
   ============================================================ */
.cp-villa-stint {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 8px 0 10px;
  padding: 8px 11px;
  background: linear-gradient(90deg, rgba(103,14,54,.9), rgba(103,14,54,.35));
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.28);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.cp-villa-label {
  font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: .06em;
  color: #fff;
}
.cp-villa-years {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: .08em; color: var(--sky);
}
.cp-villa-stats {
  margin-left: auto;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
@media (max-width: 560px) {
  .cp-villa-stats { margin-left: 0; width: 100%; }
}

/* ============================================================
   ACCOUNTS — the header control and the account page
   ------------------------------------------------------------
   Same vocabulary as the rest of the site: cut corners not
   rounded, Bebas for names, Oswald for UI, claret and sky.
   ============================================================ */

/* ---------- the header control ---------- */
.account-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 14px; padding: 7px 13px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, rgba(103,14,54,.9), rgba(103,14,54,.5));
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.35);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .2s ease, box-shadow .2s ease;
}
.account-btn:hover,
.account-btn:focus-visible {
  background: linear-gradient(180deg, var(--claret-lit), rgba(103,14,54,.65));
  box-shadow: inset 0 0 0 1px var(--sky), 0 0 14px rgba(148,190,229,.3);
  outline: none;
}
.account-btn.is-pending { opacity: .5; }

/* the little crest-ish mark; a filled circle when signed in */
.account-btn-icon {
  width: 14px; height: 14px; flex: none;
  border: 1.5px solid var(--sky); border-radius: 50%;
}
.account-btn.is-signed-in .account-btn-icon { background: var(--sky); }
.account-btn-label { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .account-btn { margin-left: 8px; padding: 6px 10px; font-size: 10px; }
  .account-btn-label { max-width: 9ch; }
}
@media (max-width: 560px) {
  .account-btn-label { display: none; }     /* the mark alone on a phone */
  .account-btn { padding: 7px 9px; }
}

/* ---------- the account page ---------- */
/* .deck-stage is a column flexbox; the panel is its scrolling body,
   centred under the heading like the other sub-pages. */
.acct-stage { overflow: hidden; }
.acct-stage .deck-head { text-align: center; }
.acct-stage .deck-head .head-rule { margin-left: auto; margin-right: auto; }
.acct-panel {
  flex: 1; min-height: 0; overflow-y: auto;
  width: min(560px, 100%);
  margin: 2vh auto 0;
  padding: 0 3vw 4vh;
  display: flex; flex-direction: column; gap: 14px;
}

.acct-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(10,12,22,.88), rgba(6,3,9,.9));
  border: 1px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.acct-label {
  margin-top: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sky);
}
.acct-optional {
  margin-left: 6px; letter-spacing: .1em;
  color: rgba(255,255,255,.35); text-transform: none;
}
.acct-form .pyr-submit { margin-top: 14px; }

.acct-links {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}

.acct-notice {
  margin: 0; padding: 10px 13px;
  font-family: 'Oswald', sans-serif; font-size: 12px; line-height: 1.45;
  letter-spacing: .03em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.acct-notice[data-kind="ok"] {
  color: #DCEBFA;
  background: linear-gradient(90deg, rgba(94,147,201,.35), rgba(94,147,201,.12));
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.45);
}
.acct-notice[data-kind="error"] {
  color: #FBE2E2;
  background: linear-gradient(90deg, rgba(150,40,40,.4), rgba(150,40,40,.14));
  box-shadow: inset 0 0 0 1px rgba(224,122,122,.5);
}

.acct-card {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(103,14,54,.5), rgba(10,12,22,.85));
  border: 1px solid rgba(148,190,229,.28);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.acct-identity { display: flex; align-items: center; gap: 14px; }
.acct-avatar {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #fff;
  background: linear-gradient(160deg, var(--claret-lit), rgba(6,3,9,.9));
  box-shadow: inset 0 0 0 2px var(--sky);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.acct-name {
  margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 24px;
  letter-spacing: .03em; color: #fff;
}
.acct-handle {
  margin: 1px 0 0; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: .08em; color: var(--sky);
}
.acct-joined {
  margin: 3px 0 0; font-family: 'Oswald', sans-serif; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4);
}

.acct-soon { opacity: .72; }
.acct-soon-list {
  list-style: none; margin: 8px 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.acct-soon-list li {
  padding: 5px 10px;
  font-family: 'Oswald', sans-serif; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(148,190,229,.2);
}

@media (max-width: 560px) {
  .acct-panel { width: 100%; }
  .acct-avatar { width: 44px; height: 44px; font-size: 21px; }
}

/* ============================================================
   DAILY LEADERBOARD (js/villa-results.js)
   ============================================================ */
.vr-board { margin: 0; }
.vr-head, .vr-row {
  display: grid; grid-template-columns: 2.2em 1fr auto 3.6em; gap: 10px; align-items: baseline;
  padding: 6px 8px;
}
.vr-head {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(148,190,229,.18);
}
.vr-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.vr-list--me { max-height: none; }
.vr-row { font-size: 13px; border-bottom: 1px solid rgba(148,190,229,.08); }
.vr-rank { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: rgba(255,255,255,.55); }
.vr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vr-name em { font-style: normal; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); margin-left: 6px; }
.vr-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; text-align: right; }
.vr-score small { font-size: .7em; color: rgba(255,255,255,.5); }
.vr-time { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); font-size: 12px; }
.vr-tick { color: var(--sky); font-size: .8em; }
.vr-row.is-you { background: rgba(148,190,229,.12); box-shadow: inset 2px 0 0 var(--sky); }
.vr-gap { margin: 4px 0; text-align: center; color: rgba(255,255,255,.35); letter-spacing: .3em; }
.vr-empty { margin: 0; font-size: 12px; color: rgba(255,255,255,.65); }
.vr-status:empty { display: none; }

/* ============================================================
   PROFILE STATS, RECENT RESULTS, BESTS, OVERALL LEADERBOARD
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.stat-card {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
  background: rgba(10,12,22,.55); box-shadow: inset 0 0 0 1px rgba(148,190,229,.22);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.stat-value { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; line-height: 1; color: #fff; }
.stat-label { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.streak-line { margin: 6px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .03em; }
.streak-line small { display: block; font-family: 'Oswald', sans-serif; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }

.rr-list, .best-list { list-style: none; margin: 6px 0 0; padding: 0; }
.rr-row { display: grid; grid-template-columns: 1fr auto 3.2em 3.6em 4.6em; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(148,190,229,.1); font-size: 13px; }
.rr-game small, .best-game small, .rr-pos small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.rr-pos small { display: inline; }
.rr-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; }
.rr-time { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); font-size: 12px; }
.rr-pos { text-align: right; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: var(--sky); }
.best-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(148,190,229,.1); font-size: 13px; }
.best-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; }
.best-row.is-empty .best-val { color: rgba(255,255,255,.35); }

.ov-panel { width: min(760px, 100%); }
.ov-head, .ov-row { display: grid; grid-template-columns: 2.6em 1fr 2.6em 2.6em 2.6em 2.6em 3.2em; gap: 8px; align-items: baseline; padding: 6px 8px; }
.ov-head { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); border-bottom: 1px solid rgba(148,190,229,.18); }
.ov-list { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.ov-list--me { max-height: none; }
.ov-row { font-size: 13px; border-bottom: 1px solid rgba(148,190,229,.08); }
.ov-rank { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: rgba(255,255,255,.55); }
.ov-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-name em { font-style: normal; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); margin-left: 6px; }
.ov-pts { text-align: right; font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: #fff; }
.ov-num { text-align: right; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.ov-head .ov-pts { font-family: 'Oswald', sans-serif; font-size: inherit; color: inherit; }
.ov-row.is-you { background: rgba(148,190,229,.12); box-shadow: inset 2px 0 0 var(--sky); }
@media (max-width: 560px) {
  .ov-head, .ov-row { grid-template-columns: 2em 1fr 2.8em 2.2em 2.6em 2.8em 2.8em; gap: 5px; padding: 6px 4px; font-size: 12px; }
}

.games-lb { margin: 0 0 6px; text-align: right; }
.games-lb-link {
  display: inline-block; padding: 6px 12px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(148,190,229,.35);
  transition: background .2s ease, color .2s ease;
}
.games-lb-link:hover, .games-lb-link:focus-visible { background: rgba(148,190,229,.15); color: #fff; }

/* ============================================================
   DAILY START SCREEN, RESULT BLOCK, POINTS COLUMN
   ============================================================ */
.dr-rules { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.72); }
.dr-result { text-align: center; padding: 8px 0 4px; }
.dr-raw { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1; letter-spacing: .02em; }
.dr-detail { margin: 4px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dr-points { margin: 10px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: .06em; color: var(--sky); }
.dr-result.is-win .dr-points { color: #fff; text-shadow: 0 0 18px rgba(148,190,229,.7); }
.dr-flash { margin: 0 0 6px; font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: .12em; color: #fff; text-shadow: 0 0 22px rgba(148,190,229,.9); animation: drFlash 1.1s ease-in-out infinite alternate; }
@keyframes drFlash { from { opacity: .75; } to { opacity: 1; } }
.dr-bonus { margin: 2px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .08em; color: var(--sky); }
.dr-total { margin: 8px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .08em; color: #fff; }
@media (prefers-reduced-motion: reduce) { .dr-flash { animation: none; } }

.vr-head, .vr-row { grid-template-columns: 2.2em 1fr auto 3.6em 2.6em; }
.vr-pts { text-align: right; font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--sky); }
.vr-head .vr-pts { font-family: 'Oswald', sans-serif; font-size: inherit; color: inherit; }

/* Aston Villa inside the career path: always open, never a clue */
.cp-stage[data-state="villa"] {
  border-color: rgba(148,190,229,.6);
  background: linear-gradient(170deg, rgba(103,14,54,.55), rgba(10,12,22,.92));
  box-shadow: 0 0 10px rgba(103,14,54,.35);
}
.cp-stage[data-state="villa"] .cp-club { color: var(--sky); }
.cp-stage[data-state="villa"] .cp-mark { color: var(--sky); }

/* Daily Bingo: a square lost to a wrong pick — dark, crossed out, plainly final */
.bingo-cell.is-lost {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(224,122,122,.75) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(224,122,122,.75) 50%, transparent calc(50% + 1px)),
    linear-gradient(180deg, rgba(6,2,4,.97), rgba(2,1,2,.98));
  box-shadow: inset 0 0 0 1px rgba(224,122,122,.55);
  cursor: not-allowed;
}
.bingo-cell.is-lost .bingo-cell-label { opacity: .35; text-decoration: line-through; }
.bingo-cell.is-lost .bingo-cell-claim { opacity: 1; color: #E07A7A; font-weight: 700; letter-spacing: .14em; }

.rr-pts { text-align: right; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); white-space: nowrap; }
.ov-head .ov-rank { font-family: 'Oswald', sans-serif; font-size: inherit; color: inherit; }

/* ============================================================
   NEWS SIDEBAR — season leaders, fixtures & results
   (js/news-sidebar.js). Desktop: second column beside the news
   screen. Tablet and phone: stacked beneath it.
   ============================================================ */
.news-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 360px);
}
.news-layout .news-stage { min-width: 0; padding-right: 1.4vw; }
.news-side {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 1.2vh;
  padding: 1.2vh 3vw 2.4vh 0;
}

.side-stat {
  flex: none;
  padding: 10px 16px 12px;
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.side-kicker {
  margin: 0 0 4px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sky);
}
.side-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.side-name {
  margin: 0; min-width: 0;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; line-height: 1.05; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-value { margin: 0; flex: none; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .16em; color: rgba(255,255,255,.6); }
.side-value b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: .02em; color: #fff; }
.side-empty { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }

.side-fixtures {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.side-fixtures-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid rgba(148,190,229,.2); }
.side-title { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: .06em; color: #fff; }
.fx-jump {
  padding: 4px 9px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); background: none; border: 1px solid rgba(148,190,229,.4);
  transition: background .2s ease, color .2s ease;
}
.fx-jump:hover, .fx-jump:focus-visible { background: var(--sky); color: var(--claret); outline: none; }

.fx-list {
  position: relative; flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 10px 14px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.45) transparent;
}
.fx-list::-webkit-scrollbar { width: 6px; }
.fx-list::-webkit-scrollbar-thumb { background: rgba(148,190,229,.4); border-radius: 3px; }
.fx-list:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(148,190,229,.6); }

.fx-card {
  flex: none; padding: 8px 10px 6px;
  background: rgba(10,12,22,.55);
  border: 1px solid rgba(148,190,229,.2);
  transition: border-color .2s ease, background .2s ease;
}
.fx-card:hover { border-color: rgba(148,190,229,.55); }
.fx-card.is-current { border-color: var(--sky); background: rgba(103,14,54,.35); box-shadow: 0 0 12px rgba(148,190,229,.25); }
.fx-head { display: flex; justify-content: space-between; gap: 8px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; }
.fx-comp { color: var(--sky); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-when { flex: none; color: rgba(255,255,255,.75); }
.fx-sub { display: flex; gap: 8px; margin: 2px 0 4px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.fx-status { color: rgba(255,255,255,.6); }
.fx-status.is-live { color: #fff; background: var(--claret-lit); padding: 0 5px; }

.fx-teams { display: flex; flex-direction: column; gap: 3px; }
.fx-team { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.fx-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; color: rgba(255,255,255,.82); }
.fx-team.is-villa .fx-team-name { color: #fff; font-weight: 600; }
.fx-team.is-winner .fx-team-name, .fx-team.is-winner .fx-score { color: #fff; }
.fx-score { min-width: 1ch; text-align: right; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; color: rgba(255,255,255,.7); }
.fx-vs { font-family: 'Oswald', sans-serif; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.4); padding-left: 37px; }

/* badges: the BOX sets the size — source files differ, the layout must not */
.fx-badge { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; }
.fx-badge img { width: 100%; height: 100%; max-width: 28px; max-height: 28px; object-fit: contain; display: block; }
.fx-badge-initials {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 12px; letter-spacing: .04em; color: var(--sky);
  background: rgba(148,190,229,.1); border: 1px solid rgba(148,190,229,.35); border-radius: 50%;
}

/* tablet and phone: the sidebar goes beneath the news */
@media (max-width: 900px) {
  .news-layout { display: flex; flex-direction: column; overflow-y: auto; }
  .news-layout .news-stage { flex: none; overflow: visible; padding-right: 3vw; }
  .news-layout .news-hero { flex: none; min-height: 26vh; padding: 18px 20px; }
  .news-layout .news-grid { flex: none; grid-template-rows: none; grid-auto-rows: minmax(156px, auto); }
  .news-side { flex: none; padding: 2vh 3vw 4vh; gap: 12px; }
  .side-fixtures { flex: none; }
  .fx-list { max-height: 60vh; flex: none; }
}

/* ============================================================
   NEWS FEED (js/news-feed.js) — filters + live article cards
   ============================================================ */
.news-filters { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.news-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky);
  background: linear-gradient(180deg, rgba(48,8,28,.85), rgba(12,4,10,.9));
  border: 1px solid rgba(148,190,229,.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
.news-filter:hover { background: linear-gradient(180deg, rgba(110,16,58,.9), rgba(46,8,26,.95)); color: #fff; }
.news-filter:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sky); }
.news-filter.is-active { background: linear-gradient(180deg, #C4DDF3, var(--sky)); color: var(--claret); border-color: var(--sky); }
.news-filter-count { font-size: 10px; letter-spacing: .06em; opacity: .65; }

.news-feed {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 1vw;
  align-content: start; padding: 2px 8px 6px 0;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.45) transparent;
}
.news-feed::-webkit-scrollbar { width: 6px; }
.news-feed::-webkit-scrollbar-thumb { background: rgba(148,190,229,.4); border-radius: 3px; }
.news-feed:focus-visible { outline: none; }
.news-empty { grid-column: 1 / -1; padding: 18px 4px; }

.news-feed .news-card { min-height: 150px; cursor: default; }
.news-feed a.news-card { cursor: pointer; }
.news-feed .news-card p { flex: none; -webkit-line-clamp: 3; margin-bottom: 12px; }
.news-feed .news-card h3 { -webkit-line-clamp: 3; }
.news-feed .news-meta { margin-top: auto; }
.news-meta .source { color: #fff; }
.news-article:hover .news-meta .go { transform: translateX(5px); }
.news-tag.is-official { align-self: flex-start; background: var(--claret); color: #fff; border: 1px solid rgba(148,190,229,.6); }

.news-card-img { display: block; height: 130px; margin: -14px -18px 12px; overflow: hidden; background: rgba(10,12,22,.6); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the newest story leads, full width */
.news-feed .news-card.is-lead {
  grid-column: 1 / -1; min-height: 190px; padding: 18px 24px;
  background: linear-gradient(135deg, rgba(110,16,58,.9) 0%, rgba(46,8,26,.9) 50%, rgba(12,3,8,.92) 100%);
  border-color: rgba(148,190,229,.4);
}
.news-feed .news-card.is-lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.02; }
.news-feed .news-card.is-lead .news-card-img { height: 170px; margin: -18px -24px 14px; }

@media (max-width: 900px) {
  .news-layout .news-stage { gap: 12px; }
  .news-feed { flex: none; overflow: visible; padding-right: 0; gap: 12px; }
}
@media (max-width: 640px) {
  .news-feed { grid-template-columns: minmax(0, 1fr); }
  .news-filter { padding: 7px 11px; letter-spacing: .12em; }
}

/* ============================================================
   NEWS — Top Stories + Latest News (js/news-feed.js, NewsNow data)
   Lighter, more readable type: Oswald at regular/medium in sentence
   case instead of heavy all-caps display headlines, and a small tag.
   ============================================================ */
.news-feed { display: block; padding: 2px 10px 8px 0; }
.nf-section + .nf-section { margin-top: 22px; }

.nf-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 10px; }
.nf-title { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; color: #fff; }
.nf-section--top .nf-title::after {
  content: ""; display: inline-block; width: 46px; height: 3px; margin-left: 12px; vertical-align: middle;
  background: linear-gradient(90deg, var(--sky), rgba(148,190,229,0));
}
.nf-section--latest .nf-title { font-size: 1.25rem; color: rgba(255,255,255,.85); }

/* ----- Top Stories: prominent cards ----- */
.nf-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1vw; }
.news-feed .news-card.nf-top { min-height: 0; padding: 14px 18px 12px; cursor: pointer; }
.news-feed .news-card.nf-top .news-tag { align-self: flex-start; margin-bottom: 7px; }
.news-feed .news-card.nf-top.is-lead {
  grid-column: 1 / -1; min-height: 150px; padding: 20px 26px 16px;
  background: linear-gradient(135deg, rgba(110,16,58,.9) 0%, rgba(46,8,26,.9) 50%, rgba(12,3,8,.92) 100%);
  border-color: rgba(148,190,229,.45);
}
.nf-headline {
  margin: 0 0 8px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.02rem; line-height: 1.32; letter-spacing: .005em;
  text-transform: none; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.news-feed .news-card.nf-top.is-lead .nf-headline { font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.25; -webkit-line-clamp: 3; }
.news-feed .news-card.nf-top h3.nf-headline { font-family: 'Oswald', sans-serif; font-size: 1.02rem; }
.news-feed .news-card.nf-top.is-lead h3.nf-headline { font-size: clamp(1.35rem, 2.1vw, 1.8rem); }

/* the category tag: small, quiet */
.news-feed .news-tag { font-size: 8.5px; letter-spacing: .18em; padding: 2px 7px; }

/* publisher and time: secondary to the headline */
.nf-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.5); text-transform: none; }
.nf-source { color: rgba(148,190,229,.85); font-weight: 400; }
.nf-time::before { content: "·"; margin-right: 8px; opacity: .6; }
.nf-meta .nf-source + .nf-time::before { content: "·"; }
.nf-meta .nf-time:first-child::before { content: none; }
.nf-cat { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); }

/* ----- Latest News: a calm chronological list ----- */
.nf-list { display: flex; flex-direction: column; border-top: 1px solid rgba(148,190,229,.16); }
.nf-row {
  display: block; padding: 10px 10px 9px; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(148,190,229,.12);
  transition: background .18s ease, padding-left .18s ease;
}
a.nf-row:hover, a.nf-row:focus-visible { background: rgba(148,190,229,.08); padding-left: 16px; outline: none; }
.nf-row-headline { display: block; margin-bottom: 3px; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: .98rem; line-height: 1.35; color: rgba(255,255,255,.92); }
.nf-row .nf-meta { margin-top: 0; }
.nf-stale { margin: 10px 0 0; font-size: 11px; color: rgba(255,255,255,.45); }

/* filters live in the Latest header now */
.nf-head .news-filters { gap: 6px; }
.nf-head .news-filter { padding: 5px 11px; font-size: 10px; letter-spacing: .16em; }

@media (max-width: 900px) {
  .news-feed { padding-right: 0; }
}
@media (max-width: 640px) {
  .nf-top-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nf-head .news-filter { padding: 5px 9px; letter-spacing: .1em; }
}

.news-feed.is-settled .news-card { animation: none; }

/* ============================================================
   CLIPS LANDING (clips.html) and HIGHLIGHT BUILDER (new-clips.html)
   ============================================================ */
.cl-stage .deck-head { padding-bottom: 0; }
.cl-choices {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vw; align-content: center;
  padding: 2vh 3vw 4vh; max-width: 1100px; width: 100%; margin: 0 auto;
}
.cl-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: clamp(260px, 42vh, 380px); padding: 26px 28px 24px;
  color: #fff; text-decoration: none;
  background: var(--surface-soft);
  border: 2px solid rgba(148,190,229,.32);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  animation: cardIn .5s ease backwards; animation-delay: calc(var(--i, 0) * 90ms);
}
.cl-card--new { background: linear-gradient(135deg, rgba(110,16,58,.92) 0%, rgba(46,8,26,.92) 55%, rgba(12,3,8,.94) 100%); border-color: rgba(148,190,229,.5); }
.cl-card::after { content: ""; position: absolute; top: -25%; right: -10%; width: 55%; height: 150%; background: radial-gradient(closest-side, rgba(158,28,88,.45), transparent 70%); pointer-events: none; }
.cl-card:hover, .cl-card:focus-visible { transform: translateY(-5px); border-color: var(--sky); background: var(--surface-hover); outline: none; }
.cl-card--new:hover, .cl-card--new:focus-visible { background: linear-gradient(135deg, rgba(130,20,70,.95) 0%, rgba(56,10,32,.94) 55%, rgba(16,4,10,.95) 100%); }
.cl-tag { position: absolute; top: 20px; right: 24px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--sky); border: 1px solid rgba(148,190,229,.45); padding: 3px 9px; }
.cl-icon { color: var(--sky); margin-bottom: auto; position: relative; z-index: 1; }
.cl-card h2 { position: relative; z-index: 1; margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .95; letter-spacing: .04em; }
.cl-card p { position: relative; z-index: 1; margin: 0; max-width: 34ch; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.cl-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sky); transition: transform .22s ease; }
.cl-card:hover .cl-go { transform: translateX(6px); }
@media (max-width: 760px) {
  .cl-choices { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; }
  .cl-card { min-height: 220px; padding: 22px 22px 20px; }
}

/* ----- builder ----- */
.cb-stage { overflow: hidden; }
.cb-flow {
  flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth;
  width: min(1040px, 100%); margin: 0 auto; padding: 12px 3vw 40px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: rgba(148,190,229,.45) transparent;
}
.cb-step { padding: 16px 18px 18px; background: var(--surface-soft); border: 2px solid rgba(148,190,229,.3); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); transition: opacity .25s ease; }
.cb-step.is-locked { opacity: .5; background: rgba(10,12,22,.5); }
.cb-title { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: .07em; color: #fff; }
.cb-title--sub { margin-top: 22px; }
.cb-num { display: grid; place-items: center; width: 26px; height: 26px; font-size: 1rem; color: var(--claret); background: var(--sky); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.cb-step.is-locked .cb-num { background: rgba(148,190,229,.4); }
.cb-step.is-locked .cb-title { margin-bottom: 4px; }
.cb-lock { margin: 0; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.cb-empty { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); }

/* match cards */
.cb-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.cb-match {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; text-align: left; cursor: pointer; color: #fff;
  background: rgba(10,12,22,.6); border: 1px solid rgba(148,190,229,.25);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cb-match:hover:not(:disabled), .cb-match:focus-visible { border-color: var(--sky); transform: translateY(-2px); outline: none; }
.cb-match.is-selected { border-color: var(--sky); background: linear-gradient(135deg, rgba(110,16,58,.75), rgba(46,8,26,.85)); box-shadow: 0 0 14px rgba(148,190,229,.3); }
.cb-match:disabled { opacity: .45; cursor: not-allowed; }
.cb-match-meta { display: flex; justify-content: space-between; gap: 8px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.cb-match-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.cb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cb-team.is-right { flex-direction: row-reverse; text-align: right; }
.cb-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; }
.cb-score { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .04em; }
.cb-match-state { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cb-match.is-selected .cb-match-state { color: var(--sky); }
.cb-badge, .cb-badge-initials { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; }
.cb-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cb-badge-initials { font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: var(--sky); background: rgba(148,190,229,.1); border: 1px solid rgba(148,190,229,.35); border-radius: 50%; }

/* player cards */
.cb-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cb-player {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px 6px 6px; text-align: left; cursor: pointer; color: #fff;
  background: rgba(10,12,22,.6); border: 1px solid rgba(148,190,229,.25);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cb-player:hover, .cb-player:focus-visible { border-color: var(--sky); transform: translateY(-2px); outline: none; }
.cb-player.is-selected { border-color: var(--sky); background: linear-gradient(135deg, rgba(110,16,58,.75), rgba(46,8,26,.85)); box-shadow: 0 0 14px rgba(148,190,229,.3); }
.cb-face { width: 44px; height: 44px; flex: none; overflow: hidden; display: grid; place-items: center; background: rgba(148,190,229,.1); border: 1px solid rgba(148,190,229,.3); border-radius: 50%; }
.cb-face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cb-face-initials { font-family: 'Bebas Neue', sans-serif; font-size: 15px; color: var(--sky); }
.cb-player-name { min-width: 0; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px; line-height: 1.2; }

/* action cards */
.cb-tools { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cb-tool { padding: 8px 14px; cursor: pointer; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); background: none; border: 1px solid rgba(148,190,229,.4); transition: background .2s ease, color .2s ease; }
.cb-tool:hover, .cb-tool:focus-visible { background: var(--sky); color: var(--claret); outline: none; }
.cb-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cb-action {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; text-align: left; cursor: pointer; color: #fff;
  background: rgba(10,12,22,.6); border: 1px solid rgba(148,190,229,.25);
  transition: border-color .2s ease, background .2s ease;
}
.cb-action:hover:not(:disabled), .cb-action:focus-visible { border-color: var(--sky); outline: none; }
.cb-action.is-selected { border-color: var(--sky); background: linear-gradient(135deg, rgba(110,16,58,.8), rgba(46,8,26,.9)); box-shadow: 0 0 12px rgba(148,190,229,.25); }
.cb-action:disabled { opacity: .38; cursor: not-allowed; }
.cb-check { width: 20px; height: 20px; flex: none; display: grid; place-items: center; font-size: 12px; color: var(--claret); border: 1.5px solid rgba(148,190,229,.5); }
.cb-action.is-selected .cb-check { background: var(--sky); border-color: var(--sky); }
.cb-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cb-action-label { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 14px; }
.cb-action-note { font-size: 10.5px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.cb-count { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; line-height: 1; color: var(--sky); }
.cb-action.is-empty .cb-count { color: rgba(255,255,255,.5); }

/* clip length */
.cb-length { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.cb-field label { display: block; margin-bottom: 6px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sky); }
.cb-stepper { display: flex; align-items: center; gap: 8px; }
.cb-stepper button { width: 44px; height: 44px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--sky); background: rgba(10,12,22,.6); border: 1px solid rgba(148,190,229,.4); transition: background .2s ease, color .2s ease; }
.cb-stepper button:hover, .cb-stepper button:focus-visible { background: var(--sky); color: var(--claret); outline: none; }
.cb-stepper input { width: 64px; height: 44px; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: #fff; background: rgba(6,3,9,.8); border: 1px solid rgba(148,190,229,.4); -moz-appearance: textfield; }
.cb-stepper input::-webkit-outer-spin-button, .cb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cb-stepper input:focus-visible { outline: none; border-color: var(--sky); box-shadow: 0 0 0 2px rgba(148,190,229,.35); }
.cb-unit { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* summary + build */
.cb-summary { padding: 14px 16px; background: rgba(10,12,22,.6); border: 1px solid rgba(148,190,229,.25); }
.cb-summary:empty { display: none; }
.cb-sum-match { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sky); }
.cb-sum-player { margin: 2px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: .03em; }
.cb-sum-events { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.75); }
.cb-sum-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-sum-list li { padding: 3px 10px; font-size: 12px; background: rgba(103,14,54,.55); border: 1px solid rgba(148,190,229,.35); }
.cb-sum-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cb-sum-grid div { display: flex; flex-direction: column; gap: 2px; }
.cb-sum-grid dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cb-sum-grid dd { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .03em; }
.cb-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.5); }
.cb-build {
  display: block; width: 100%; margin-top: 16px; min-height: 54px; cursor: pointer;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .14em; color: var(--claret);
  background: linear-gradient(180deg, #C4DDF3, var(--sky)); border: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: filter .2s ease, transform .2s ease;
}
.cb-build:hover:not(:disabled), .cb-build:focus-visible { filter: brightness(1.08); transform: translateY(-2px); outline: none; }
.cb-build:disabled { opacity: .4; cursor: not-allowed; }
.cb-job { margin-top: 14px; padding: 14px 16px; background: rgba(10,12,22,.7); border: 1px solid rgba(148,190,229,.4); }
.cb-job-title { margin: 0 0 8px; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: .08em; }
.cb-job-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-job-steps li { font-size: 13px; color: rgba(255,255,255,.4); transition: color .25s ease; }
.cb-job-steps li.is-active { color: #fff; }
.cb-job-steps li.is-active::before { content: "▸ "; color: var(--sky); }
.cb-job-steps li.is-done { color: var(--sky); }
.cb-job-steps li.is-done::before { content: "✓ "; }
.cb-payload { margin: 10px 0 0; padding: 10px 12px; overflow-x: auto; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.8); background: rgba(0,0,0,.35); border: 1px solid rgba(148,190,229,.2); }

@media (max-width: 640px) {
  .cb-flow { padding: 10px 14px 40px; }
  .cb-step { padding: 14px 14px 16px; }
  .cb-matches { grid-template-columns: minmax(0, 1fr); }
  .cb-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-actions { grid-template-columns: minmax(0, 1fr); }
  .cb-action { min-height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .cb-flow { scroll-behavior: auto; } .cl-card { animation: none; } }

.cl-card p { min-height: 4.6em; }

.cb-job-link {
  display: inline-block; margin-top: 12px; padding: 10px 16px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sky); text-decoration: none; border: 1px solid rgba(148,190,229,.45);
  transition: background .2s ease, color .2s ease;
}
.cb-job-link:hover, .cb-job-link:focus-visible { background: var(--sky); color: var(--claret); outline: none; }
.cb-job .g-progress { margin-top: 10px; }

/* the job panel is its own step: no extra box inside it */
.cb-step.cb-job { margin-top: 0; padding: 16px 18px 18px; background: var(--surface-soft); border: 2px solid rgba(148,190,229,.3); }
.cb-video { display: block; width: 100%; max-height: 70vh; margin-top: 12px; background: #000; }
.g-progress-fill.is-busy { animation: cbBusy 1.4s ease-in-out infinite alternate; }
@keyframes cbBusy { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .g-progress-fill.is-busy { animation: none; } }

/* the job's bar glides between the real values the worker writes */
.cb-job .g-progress-fill { transition: width .8s ease; }
.cb-job .g-progress-track { height: 10px; }
@media (prefers-reduced-motion: reduce) { .cb-job .g-progress-fill { transition: none; } }

/* Live shop (Supabase): the eBay link is an <a class="buy-btn">, and [hidden] must still hide buttons */
.buy-btn[hidden], .details-btn[hidden] { display: none; }
a.buy-btn { text-decoration: none; }
.product-gallery { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.product-gallery button { padding: 0; width: 56px; height: 56px; background: rgba(10,4,9,.5); border: 1px solid rgba(148,190,229,.35); cursor: pointer; }
.product-gallery button[aria-current="true"] { border-color: var(--sky); }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; max-height: none; }