/* world/css/world.css - THE WORLD, the Shadows of the Corn hub (world/ARCHITECTURE.md).
 *
 * Night, corn-gold and the two sides' colours. The only pictures are the series' own paintings and the games' own
 * home screen icons; everything else is CSS. System fonts only: the site's CSP allows no font host (the engraved
 * serif the Gate's title uses, Palatino and its cousins, and the project's Trebuchet for the rest).
 *
 * The side colours the page (html[data-band], set by world-main.js): a guest and the Herd see candy pink, the Horde
 * toxic green, and the Horde's own key art in the hero.
 *
 * Layout: 16px side gutters on a phone, no horizontal scroll anywhere (overflow-x: clip on the page, every wide
 * layer inside a clipped box). The games grid is 1 column on a phone, 2 on a tablet, and on a desktop the main game
 * spans two columns and two rows beside the four others. The Lands, a teaser, is the last tile, the whole width.
 */

:root {
  --ink: #070B1E;
  --night: #0B1233;
  --night-2: #131B45;
  --panel: rgba(18, 24, 62, 0.72);
  --line: rgba(255, 236, 190, 0.14);
  --parchment: #FBF3E7;
  --muted: #B7B3D6;
  --dim: #8C89B3;
  --gold: #F5C242;
  --gold-hi: #FFE7A0;
  --gold-deep: #B7791F;
  --candy-pink: #FF8FC7;
  --toxic-green: #6BE04A;
  --accent: var(--candy-pink);
  --accent-soft: rgba(255, 143, 199, 0.35);
  --font: 'Trebuchet MS', 'Lucida Grande', 'Segoe UI', Verdana, sans-serif;
  --title-font: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, serif;
  --gutter: 16px;
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
html[data-band="horde"] { --accent: var(--toxic-green); --accent-soft: rgba(107, 224, 74, 0.32); }
@media (min-width: 700px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--ink); color: var(--parchment); font-family: var(--font);
  line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 60px; }
a { color: inherit; }
strong { color: #fff; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: #1a1204; font-weight: bold; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

/* ---------------------------------------------------------------------------------------------- the header bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 10px max(var(--gutter), env(safe-area-inset-left, 0px));
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.bar.is-solid { background: rgba(7, 11, 30, 0.78); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .35); }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--title-font); font-weight: bold; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; white-space: nowrap; }
.bar__brand img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.bar__brand em { font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--gold); font-weight: normal; }
.bar__nav { display: none; gap: 22px; margin-left: auto; }
.bar__nav a { text-decoration: none; color: var(--muted); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.bar__nav a:hover { color: #fff; }
.bar__who {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 46vw; min-height: 36px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff;
  text-decoration: none; font-size: 14px; font-weight: bold; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.bar__who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__who:hover { border-color: var(--gold); background: rgba(30, 36, 80, .7); }
.bar__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.bar__who.is-in .bar__dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
/* A guest's chip is a real button: gold, a figure, "Sign in" (the founder, 2026-09-29). Signed in, it is the name. */
.bar__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bar__who:not(.is-in) { color: #1a1204; border-color: transparent; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 4px 18px rgba(245, 194, 66, .35); }
.bar__who:not(.is-in):hover { background: linear-gradient(180deg, #fff3c9, var(--gold-hi)); }
.bar__who:not(.is-in) .bar__dot, .bar__who.is-in .bar__icon { display: none; }
@media (min-width: 760px) { .bar__nav { display: flex; } .bar__who { margin-left: 18px; } .bar__brand { font-size: 16px; } }
@media (max-width: 380px) { .bar__brand span { display: none; } }

/* ---------------------------------------------------------------------------------------------- the hero */
.hero {
  --sy: 0; --px: 0; --py: 0;
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 96px;
}
.hero__art { position: absolute; inset: -6%; z-index: -5; transform: translate3d(calc(var(--px) * -18px), calc(var(--sy) * 22% + var(--py) * -12px), 0); will-change: transform; }
.hero__plate {
  position: absolute; inset: 0; background-size: cover; background-position: 58% 40%;
  animation: drift 38s ease-in-out infinite alternate; transition: opacity 1.4s var(--ease);
}
.hero__plate--herd { background-image: url("../../assets/backgrounds/painted/web/splash-key-art.jpg"); }
.hero__plate--horde { background-image: url("../../assets/backgrounds/painted/web/splash-evil.jpg"); opacity: 0; }
html[data-band="horde"] .hero__plate--horde { opacity: 1; }
@keyframes drift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.12) translate3d(1.2%, -1.5%, 0); } }

.hero__moon {
  position: absolute; z-index: -4; left: 15%; top: 24%; width: 30vmax; height: 30vmax; margin: -15vmax 0 0 -15vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, .42) 0%, rgba(200, 190, 255, .16) 30%, transparent 62%);
  mix-blend-mode: screen; animation: breathe 7s ease-in-out infinite;
  transform: translate3d(calc(var(--px) * -30px), calc(var(--sy) * 60px), 0);
}
@keyframes breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.hero__motes { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero__motes span {
  position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #FFF3C4 0%, rgba(255, 205, 90, .9) 35%, rgba(255, 180, 60, 0) 70%);
  box-shadow: 0 0 12px rgba(255, 210, 110, .8); opacity: 0; animation: rise 14s linear infinite;
}
html[data-band="horde"] .hero__motes span { background: radial-gradient(circle, #EFFFE0 0%, rgba(120, 240, 90, .9) 35%, rgba(90, 220, 60, 0) 70%); box-shadow: 0 0 12px rgba(110, 230, 80, .8); }
.hero__motes span:nth-child(1) { left: 6%; animation-delay: -1s; animation-duration: 15s; }
.hero__motes span:nth-child(2) { left: 13%; animation-delay: -7s; width: 4px; height: 4px; }
.hero__motes span:nth-child(3) { left: 21%; animation-delay: -3s; animation-duration: 18s; }
.hero__motes span:nth-child(4) { left: 28%; animation-delay: -10s; width: 5px; height: 5px; }
.hero__motes span:nth-child(5) { left: 35%; animation-delay: -5s; animation-duration: 12s; }
.hero__motes span:nth-child(6) { left: 43%; animation-delay: -12s; width: 3px; height: 3px; }
.hero__motes span:nth-child(7) { left: 50%; animation-delay: -2s; animation-duration: 17s; }
.hero__motes span:nth-child(8) { left: 57%; animation-delay: -8s; width: 7px; height: 7px; }
.hero__motes span:nth-child(9) { left: 63%; animation-delay: -4s; animation-duration: 13s; }
.hero__motes span:nth-child(10) { left: 70%; animation-delay: -11s; width: 4px; height: 4px; }
.hero__motes span:nth-child(11) { left: 76%; animation-delay: -6s; animation-duration: 16s; }
.hero__motes span:nth-child(12) { left: 82%; animation-delay: -13s; width: 5px; height: 5px; }
.hero__motes span:nth-child(13) { left: 88%; animation-delay: -9s; animation-duration: 19s; }
.hero__motes span:nth-child(14) { left: 93%; animation-delay: -1.5s; width: 3px; height: 3px; }
.hero__motes span:nth-child(15) { left: 47%; animation-delay: -14s; animation-duration: 21s; }
.hero__motes span:nth-child(16) { left: 17%; animation-delay: -16s; animation-duration: 20s; width: 5px; height: 5px; }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .95; }
  50% { transform: translate3d(18px, -45vh, 0); }
  85% { opacity: .6; }
  100% { transform: translate3d(-12px, -92vh, 0); opacity: 0; }
}

.hero__fog {
  position: absolute; left: -20%; right: -20%; bottom: -4%; height: 34%; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 70% at 30% 70%, rgba(150, 140, 220, .22), transparent 70%), radial-gradient(50% 60% at 75% 80%, rgba(120, 110, 200, .2), transparent 70%);
  filter: blur(8px); animation: fog 26s ease-in-out infinite alternate;
}
@keyframes fog { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(4%, -2%, 0); } }
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 48%, rgba(5, 8, 26, .72) 0%, rgba(5, 8, 26, .35) 55%, rgba(5, 8, 26, 0) 80%),
    linear-gradient(180deg, rgba(7, 11, 30, .55) 0%, rgba(7, 11, 30, 0) 22%, rgba(7, 11, 30, 0) 62%, var(--ink) 100%);
}

/* min-width: 0 and the narrower title floor below: at 320 CSS pixels the copy fits instead of being clipped (the quality
   audit of 2026-09-29, WQ-02) */
.hero__copy { position: relative; min-width: 0; width: 100%; max-width: 900px; text-align: center; transform: translate3d(0, calc(var(--sy) * -60px), 0); opacity: calc(1 - var(--sy) * 1.1); }
.hero__kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px;
  font-size: 13px; font-weight: bold; letter-spacing: .38em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.hero__kicker .rule { display: block; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero__kicker .rule:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
@media (max-width: 520px) { .hero__kicker { font-size: 11.5px; letter-spacing: .26em; gap: 10px; } .hero__kicker .rule { width: 24px; } }

.title { margin: 0; font-family: var(--title-font); font-weight: bold; line-height: .86; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .75)); }
.title__big {
  display: block; font-size: clamp(38px, 13.5vw, 168px); letter-spacing: .06em; padding-left: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, #FFF8DC 0%, #FFE7A0 30%, #F5C242 58%, #C68A1C 78%, #FFE39A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: glint 9s ease-in-out infinite;
}
.title__big + .title__of + .title__big { margin-top: .02em; }
@keyframes glint { 0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 205, 90, .28)); } 50% { filter: drop-shadow(0 0 34px rgba(255, 215, 110, .55)); } }
.title__of {
  display: flex; align-items: center; gap: .5em; margin: .12em 0 .06em; font-size: clamp(20px, 3.4vw, 40px); font-style: italic; font-weight: normal;
  letter-spacing: .08em; color: var(--parchment); text-transform: none;
}
.title__orn { display: block; width: clamp(40px, 9vw, 110px); height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); position: relative; }
.title__orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--gold-hi); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold); }

.hero__line { max-width: 40em; margin: 22px auto 0; font-size: clamp(16px, 1.7vw, 20px); color: #ECE6FF; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.hero__line strong { color: var(--gold-hi); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--font); font-size: 16px; font-weight: bold; letter-spacing: .06em; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.btn--gold {
  color: #2A1703; background: linear-gradient(180deg, #FFEFB3 0%, #F5C242 55%, #D49A22 100%); border: 1px solid #FFE7A0;
  box-shadow: 0 8px 26px rgba(245, 194, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(245, 194, 66, .5), inset 0 1px 0 rgba(255, 255, 255, .7); }
.btn--glass { color: #fff; background: rgba(12, 16, 44, .5); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { transform: translateY(-2px); border-color: var(--gold-hi); background: rgba(24, 30, 72, .65); }
.btn:active { transform: translateY(0) scale(.98); }
@media (max-width: 420px) { .btn { max-width: 100%; white-space: normal; text-align: center; padding-left: 20px; padding-right: 20px; } }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 15px; }

.hero__down { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); width: 30px; height: 48px; margin-left: -15px; border: 2px solid rgba(255, 231, 160, .6); border-radius: 16px; }
.hero__down span { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--gold-hi); animation: scrollcue 2.2s ease-in-out infinite; }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* THE DESKTOP HERO: a poster. The words stand on the left in the dark of the moonlit hills, and the painting is
   widened to the right so the Nightmare and the unicorn under it stand clear of the title. */
@media (min-width: 1000px) and (min-height: 521px) {
  .hero { place-items: center start; padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
  .hero__art { left: -3%; right: -24%; }
  .hero__copy { text-align: left; max-width: 700px; }
  .hero__kicker { justify-content: flex-start; }
  .hero__kicker .rule:first-child { display: none; }
  .title { align-items: flex-start; }
  .title__big { font-size: clamp(88px, 9.6vw, 150px); }
  .title__of .title__orn:first-child { display: none; }
  .hero__line { margin-left: 0; max-width: 32em; }
  .hero__actions { justify-content: flex-start; }
  .hero__veil {
    background:
      linear-gradient(90deg, rgba(5, 8, 26, .88) 0%, rgba(5, 8, 26, .62) 34%, rgba(5, 8, 26, .12) 62%, rgba(5, 8, 26, 0) 80%),
      linear-gradient(180deg, rgba(7, 11, 30, .55) 0%, rgba(7, 11, 30, 0) 22%, rgba(7, 11, 30, 0) 62%, var(--ink) 100%);
  }
}

/* ---------------------------------------------------------------------------------------------- section heads */
.sec-head { max-width: var(--maxw); margin: 0 auto 30px; text-align: center; }
.sec-head__kicker { margin: 0 0 8px; font-size: 13px; font-weight: bold; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); }
h2 { margin: 0; font-family: var(--title-font); font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: .02em; color: #fff; }
.sec-head__sub { margin: 12px auto 0; max-width: 36em; color: var(--muted); font-size: 17px; }
/* THE GUIDE's door (world/guide.html): a quiet gold link under the games' heading */
.sec-head__guide {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  color: var(--gold-hi); text-decoration: none; font-weight: bold; font-size: 15px; letter-spacing: .04em;
  border: 1px solid rgba(255, 231, 160, .4); background: rgba(245, 194, 66, .08); transition: background .2s, border-color .2s, gap .25s var(--ease);
}
.sec-head__guide:hover { background: rgba(245, 194, 66, .16); border-color: var(--gold); gap: 12px; }
.sec-head__guide svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------------------------------------- the story */
/* THE STORY (2026-10-05): the World film's narration as words, over the village the Nightmares took, centred and
   readable at any width */
.story { position: relative; padding: 70px var(--gutter) 60px; overflow: hidden; isolation: isolate; text-align: center; }
.story::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../../assets/backgrounds/painted/web/room-village-evil.jpg") center 40% / cover no-repeat; opacity: .3; filter: saturate(.85);
}
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 11, 30, .7) 30%, rgba(7, 11, 30, .78) 70%, var(--ink) 100%); }
.story__inner { max-width: 46em; margin: 0 auto; }
.story h2 { margin-bottom: 22px; }
.story p { margin: 0 0 16px; color: #E6E2F8; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.story .story__lead { font-family: var(--title-font); font-style: italic; font-size: clamp(19px, 2.1vw, 24px); color: var(--parchment); }
.story strong { color: var(--gold-hi); }
.story .story__call { margin-top: 24px; font-family: var(--title-font); font-size: clamp(18px, 1.9vw, 22px); color: #fff; }
.story__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------------------------------------------------------------------------------------------- the games */
.games { position: relative; padding: 40px var(--gutter) 60px; }
.games::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 50% 0%, rgba(92, 70, 190, .22), transparent 70%), radial-gradient(40% 30% at 90% 60%, rgba(245, 194, 66, .06), transparent 70%);
}
.grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; gap: 20px; } .game--main { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(400px, auto); gap: 22px; }
  .game--main { grid-column: span 2; grid-row: span 2; }
}

/* each game's colour: --c the bright, --c2 the deep */
.game--main { --c: #B07BFF; --c2: #5A1FB0; }
.game--gate { --c: #3FD98A; --c2: #0E6B3B; }
.game--casino { --c: #FF4D6A; --c2: #8E0F28; }
.game--tenderfoot { --c: #FFA436; --c2: #B8520B; }
.game--lands { --c: #7FD3FF; --c2: #1C79C9; }
.game--tavern { --c: #FFB060; --c2: #8A3A0B; }
.game--chess { --c: #FF4FB8; --c2: #7A1FA0; }

.game {
  --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: 22px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: #fff; background: var(--night-2);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.game--main { min-height: 420px; }
@media (min-width: 1100px) { .game--main { min-height: 0; } }
.game__art {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(1.04); transition: transform 1.2s var(--ease), filter .6s;
  filter: saturate(1.05) brightness(.92);
}
.game--tenderfoot .game__art { object-position: 62% 50%; }
.game--casino .game__art { object-position: 50% 45%; }
/* THE LANDS, the teaser, is always the last tile (the founder, 2026-09-29: "the Lands should be last since it's just a
   teaser at this point"), the whole width of the grid: the grid holds four beside the main game, and it is the sixth */
@media (min-width: 700px) { .game--lands { grid-column: 1 / -1; } }
.game--tavern .game__art { object-position: 50% 58%; }
/* THE CORN GAMBIT, the seventh tile, also takes the whole width, so the grid stays whole above the Lands */
@media (min-width: 700px) { .game--chess { grid-column: 1 / -1; } }
.game--chess .game__art { object-position: 42% 50%; }
.game__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(7, 11, 30, .1) 0%, rgba(7, 11, 30, 0) 30%, rgba(7, 11, 30, .55) 52%, rgba(7, 11, 30, .9) 72%, rgba(7, 11, 30, .97) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--c2) 55%, transparent) 0%, transparent 55%);
}
.game__shine {
  position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c) 34%, transparent), transparent 60%);
}
.game::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform 1s var(--ease);
}
.game__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 22px; }
.game__icon {
  width: 76px; height: 76px; margin-bottom: 8px; border-radius: 22.37%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .18), 0 0 26px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.game--main .game__icon { width: 96px; height: 96px; }
/* the smaller tiles: the icon sits up in the painting, the words at the foot, so the art shows between them */
.game:not(.game--main) { min-height: 360px; }
@media (min-width: 700px) { .game:not(.game--main) { min-height: 400px; } }
.game:not(.game--main) .game__pitch { font-size: 14.5px; }
.game:not(.game--main) .game__icon { position: absolute; left: 22px; top: 22px; margin: 0; }
.game:not(.game--main) .game__body { padding-top: 120px; }
.game__kind { font-size: 12px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .8); }
.game__kind i { font-style: normal; opacity: .55; margin: 0 .3em; }
.game__name { font-family: var(--title-font); font-weight: bold; font-size: clamp(26px, 3vw, 32px); line-height: 1.05; letter-spacing: .01em; text-shadow: 0 3px 16px rgba(0, 0, 0, .8); }
.game--main .game__name { font-size: clamp(32px, 4.4vw, 50px); }
.game__pitch { max-width: 34em; color: #E3E0F5; font-size: 15px; line-height: 1.45; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.game--main .game__pitch { font-size: 17px; }
.game__play {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px; padding: 10px 22px; border-radius: 999px;
  font-weight: bold; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c2) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 60%, #fff);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--c2) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: transform .3s var(--ease), box-shadow .3s var(--ease), gap .3s var(--ease);
}
.game__play svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.game--main .game__play { font-size: 17px; padding: 12px 30px; min-height: 50px; }

.game:hover, .game:focus-visible {
  border-color: color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 46px color-mix(in srgb, var(--c) 30%, transparent);
}
.game:hover .game__art, .game:focus-visible .game__art { transform: scale(1.1); filter: saturate(1.2) brightness(1); }
.game:hover .game__shine { opacity: 1; }
.game:hover::after, .game:focus-visible::after { transform: translateX(120%); }
.game:hover .game__icon, .game:focus-visible .game__icon { transform: translateY(-4px) rotate(-4deg) scale(1.06); }
.game:hover .game__play, .game:focus-visible .game__play { gap: 14px; box-shadow: 0 12px 30px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5); }
.game:active { transform: perspective(900px) scale(.985); transition-duration: .12s; }

/* THE LANDS: held for a later season. A floating isle over the sky, a badge, and a quieter button. */
.game__isle { position: absolute; z-index: -2; right: 8%; top: 22%; width: 40%; max-width: 200px; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5)); animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.game--soon .game__art { filter: saturate(.8) brightness(.85); }
.game--soon .game__play { background: rgba(10, 16, 44, .55); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: none; color: var(--c); }
.game__badge {
  position: absolute; right: 18px; top: 18px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: bold; letter-spacing: .18em; text-transform: uppercase;
  color: #06243D; background: linear-gradient(180deg, #D8F2FF, #7FD3FF); box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------------------------------------- the shared world */
.world { position: relative; padding: 60px var(--gutter) 90px; overflow: hidden; isolation: isolate; }
.world::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../../assets/backgrounds/painted/web/room-farm-sky.jpg") center 30% / cover no-repeat; opacity: .28; filter: saturate(.9);
}
html[data-band="horde"] .world::before { background-image: url("../../assets/backgrounds/painted/web/room-farm-sky-evil.jpg"); }
.world::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 11, 30, .55) 30%, rgba(7, 11, 30, .7) 70%, var(--ink) 100%); }
.world__inner { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .world__inner { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.world__copy h2 { font-size: clamp(30px, 4.4vw, 50px); }
.world__lines { margin: 16px 0 0; color: #E6E2F8; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; }
.c-candy { color: var(--candy-pink); }
.c-essence { color: var(--toxic-green); }
.pillars { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.pillars li {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-weight: bold; font-size: 14px; letter-spacing: .06em;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line);
}
.pillar__icon, .pillar__img { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.pillar__icon { display: inline-block; background: var(--night-2) center / 18px no-repeat; border: 1px solid rgba(255, 231, 160, .4); position: relative; }
.pillar__icon--acct::before { content: ""; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--gold-hi); }
.pillar__icon--acct::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 16px; height: 7px; margin-left: -8px; border-radius: 8px 8px 3px 3px; background: var(--gold-hi); }
.pillar__icon--side { background: linear-gradient(90deg, var(--candy-pink) 0 50%, var(--toxic-green) 50% 100%); border-color: rgba(255, 255, 255, .5); }
.pillar__img { object-fit: contain; background: rgba(255, 255, 255, .08); padding: 3px; }

.card {
  position: relative; padding: 26px; border-radius: 22px; background: var(--panel); border: 1px solid rgba(255, 231, 160, .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: opacity .4s;
}
html:not([data-account="ready"]) .card { opacity: .8; }
.card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.card__label { margin: 0; font-size: 12px; font-weight: bold; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.card__name { margin: 6px 0 0; font-family: var(--title-font); font-size: clamp(26px, 3vw, 34px); font-weight: bold; line-height: 1.1; overflow-wrap: anywhere; }
.card__note { margin: 10px 0 18px; color: var(--muted); }
.card__note--small { margin: 12px 0 14px; font-size: 13px; }
.card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.stat { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); min-width: 0; }
.stat__label { font-size: 11px; font-weight: bold; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.stat__value { font-size: 22px; font-weight: bold; color: var(--accent); display: flex; align-items: center; gap: 8px; min-width: 0; }
.stat__value--coin { color: var(--gold-hi); }
.stat__value--coin img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.stat__value span { overflow: hidden; text-overflow: ellipsis; }
.stat__sub { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------- the footer */
.foot { padding: 46px var(--gutter) calc(34px + env(safe-area-inset-bottom, 0px)); text-align: center; border-top: 1px solid var(--line); background: #05081A; }
.foot__crest { width: 44px; height: 44px; opacity: .9; }
.foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px auto 18px; max-width: 760px; }
.foot__nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot__nav a:hover { color: var(--gold-hi); }
.foot__legal { margin: 0 auto; max-width: 52em; font-size: 12.5px; color: var(--dim); line-height: 1.6; }

/* ---------------------------------------------------------------------------------------------- reveal */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(var(--i, 0) * 80ms), transform .8s var(--ease) calc(var(--i, 0) * 80ms); }
.js-reveal .game.reveal.is-in { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.js-reveal .game.reveal.is-in:not(:hover) { transition: opacity .8s var(--ease) calc(var(--i, 0) * 80ms), transform .8s var(--ease) calc(var(--i, 0) * 80ms), box-shadow .45s, border-color .35s; }

/* ---------------------------------------------------------------------------------------------- phone landscape */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-top: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: 40px; }
  .title__big { font-size: clamp(44px, 11vh + 3vw, 96px); }
  .title__of { font-size: 20px; }
  .hero__line { margin-top: 12px; font-size: 15px; }
  .hero__actions { margin-top: 16px; }
  .hero__down { display: none; }
  .bar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
}

/* ---------------------------------------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero__motes { display: none; }
  .hero__art, .hero__copy, .hero__moon { transform: none !important; }
  .hero__copy { opacity: 1 !important; }
  .game { transform: none !important; }
}