/* A game's own page (arcg.co/shortstack/, arcg.co/wordspoke/), inside the company header and footer from site.css.
   Every game page shares this layout; each game keeps its own colors and fonts through the variables on .g-<game>. */

@font-face { font-family: "Baloo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-2-700.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/fonts/baloo-2-800.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("/assets/fonts/nunito-sans.woff2") format("woff2"); }

/* Short Stack: walnut, amber and cream */
.g-shortstack {
  --g-deep: #2C1B10; --g-deep-2: #3E2817; --g-ink: #3A2314; --g-ink-2: #4B3626;
  --g-accent: #F5AE45; --g-accent-hi: #FFBC57; --g-page: #FFFBF3; --g-light: #E5F2EF;
  --g-on-deep: #F7E6CF; --g-on-deep-2: #E3CBAE; --g-head-on-deep: #FFE2B0; --g-chapter: #CDB79B; --g-chapter-b: #E9D6BC;
  --g-phone: #1E140C; --g-shade: 28, 16, 6; --g-closing-ink: #4A2E14; --g-link: #0F6F75; --g-link-hi: #0A5458;
  --g-pill-2: #8FD8DD; --g-pill-3: #C9CED3;
  --g-hero: #3b4a2a url("/assets/img/bg.webp") center 18% / cover no-repeat;
}
/* WordSpoke: night indigo, the wordmark's gold, the Play button's amber, and the default look's sky */
.g-wordspoke {
  --g-deep: #1A1A4A; --g-deep-2: #26266A; --g-ink: #1D2050; --g-ink-2: #3A3F6E;
  --g-accent: #F5AE45; --g-accent-hi: #FFBC57; --g-page: #FAFBFF; --g-light: #E7F0FC;
  --g-on-deep: #E8E9FB; --g-on-deep-2: #C3C6EE; --g-head-on-deep: #FFD98A; --g-chapter: #B9BCE6; --g-chapter-b: #DDDFFA;
  --g-phone: #0E1030; --g-shade: 12, 18, 58; --g-closing-ink: #3A2408; --g-link: #2C4FC4; --g-link-hi: #1F3C9C;
  --g-pill-2: #A9CDF7; --g-pill-3: #D3C8FF;
  --g-hero: #4B8FE0 url("/assets/wordspoke/hero-bg.webp") center 30% / cover no-repeat;
}

.game { --display: "Baloo 2", system-ui, sans-serif; --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.game main, .game .game-bar, .game dialog.howto { font-family: var(--body); font-size: 18px; line-height: 1.6; }
.game main { background: var(--g-page); color: var(--g-ink); }
.game main h1, .game main h2, .game main h3, .game dialog.howto h2 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -0.005em; }
.game main a { color: var(--g-link); }
.game main a:hover { color: var(--g-link-hi); }
.game main :focus-visible, .game .game-bar :focus-visible, .game dialog.howto :focus-visible { outline-color: var(--g-accent); }

/* ---------- the game's own bar, under the company header ---------- */
.game-bar { background: var(--g-deep); border-top: 1px solid rgba(255, 255, 255, .08); }
.game-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; min-height: 56px; }
.game-name { margin-right: 8px; color: #fff; font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1; text-decoration: none; }
.game-bar a:not(.game-name), .game-bar button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--g-head-on-deep); font: 700 15px/1 var(--body); text-decoration: none; }
.game-bar a:not(.game-name):hover, .game-bar button:hover { color: #fff; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border: 0; border-radius: 18px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.btn svg { flex: none; }
.btn span { display: block; padding-top: var(--btn-nudge, 0px); }
.btn-amber { background: var(--g-accent); color: var(--g-deep); box-shadow: 0 10px 30px -12px rgba(var(--g-shade), .6); }
.btn-amber:hover { background: var(--g-accent-hi); color: var(--g-deep); }
.btn-dark { background: var(--g-deep); color: var(--g-head-on-deep); }
.btn-dark:hover { background: var(--g-deep-2); color: var(--g-head-on-deep); }
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color .15s ease; } .btn:active { transform: none; } }
.play-icon { width: 22px; height: 22px; }

/* ---------- phone frames (screenshots keep their own aspect ratio) ---------- */
.phone { width: 300px; padding: 11px; border-radius: 48px; background: var(--g-phone); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 40px 70px -24px rgba(var(--g-shade), .7); }
.phone img, .phone video { width: 100%; height: auto; border-radius: 38px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--g-hero); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--g-shade), .5) 0%, rgba(var(--g-shade), 0) 18%), linear-gradient(90deg, rgba(var(--g-shade), .66) 0%, rgba(var(--g-shade), .4) 44%, rgba(var(--g-shade), 0) 72%); }
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; padding-top: 56px; }
.hero-copy { padding-bottom: 128px; }
.hero-logo { width: 100%; max-width: 470px; height: auto; filter: drop-shadow(0 12px 24px rgba(var(--g-shade), .45)); }
.hero-lede { max-width: 30ch; margin-top: 32px; color: #fff; font-size: 24px; line-height: 1.4; font-weight: 600; text-shadow: 0 2px 12px rgba(var(--g-shade), .55); }
.hero-platforms { margin-top: 16px; color: #FFF1DC; font-size: 17px; font-weight: 700; text-shadow: 0 1px 8px rgba(var(--g-shade), .6); }
.g-wordspoke .hero-platforms { color: #FFF4D6; }
.hero-actions { margin-top: 40px; }
.hero-phone { position: relative; z-index: 2; justify-self: center; margin-bottom: -112px; }
/* WordSpoke's wordmark is long and short: a wider, lower logo than Short Stack's stacked one */
.g-wordspoke .hero-logo { max-width: 540px; }
.g-wordspoke .hero-copy { padding-bottom: 160px; }

/* ---------- how it plays: five rules, pieces or tools ---------- */
.materials { background: var(--g-deep); color: var(--g-on-deep); padding: 176px 0 120px; }
.materials h2 { max-width: 14ch; color: var(--g-head-on-deep); font-size: 60px; }
.section-intro { max-width: 46ch; margin-top: 24px; font-size: 20px; }
.materials .section-intro { color: var(--g-on-deep-2); }
.mat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px; margin: 64px 0 0; padding: 0; list-style: none; }
.mat-tile { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.mat-name { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
.mat-name h3 { color: #fff; font-size: 30px; }
.g-shortstack .mat-name h3 { color: #FFF3E0; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--g-accent); color: var(--g-deep); font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.pill-flip, .pill-2 { background: var(--g-pill-2); }
.pill-static, .pill-3 { background: var(--g-pill-3); }
.mat-copy { margin-top: 14px; color: var(--g-on-deep-2); font-size: 16px; line-height: 1.6; }

/* ---------- modes ---------- */
.modes { background: var(--g-light); padding: 128px 0; }
.modes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.phones { position: relative; height: 640px; }
.phones .phone { position: absolute; width: 270px; }
.phones .p1 { left: 4%; top: 40px; transform: rotate(-6deg); }
.phones .p2 { left: 40%; top: 0; transform: rotate(5deg); }
.modes h2 { max-width: 16ch; color: var(--g-deep); font-size: 56px; }
.mode-list { display: flex; flex-direction: column; gap: 32px; margin: 48px 0 0; padding: 0; list-style: none; }
.mode { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; align-items: start; }
.mode img { width: 64px; height: auto; }
.mode h3 { color: var(--g-deep); font-size: 30px; }
.mode p { max-width: 42ch; margin-top: 8px; color: var(--g-ink-2); }

/* ---------- Styles to collect ---------- */
.collect { padding: 128px 0; }
.collect-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 72px; align-items: center; }
.collect h2 { max-width: 12ch; color: var(--g-deep); font-size: 56px; }
.collect .section-intro { max-width: 44ch; color: var(--g-ink-2); }
.tile-row { display: flex; flex-wrap: wrap; row-gap: 24px; margin-top: 56px; padding-left: 6px; }
.tile-row img { width: 62px; height: 62px; margin-left: -6px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(var(--g-shade), .28)); }
.tile-row img:nth-child(even) { transform: translateY(14px); }
.g-wordspoke .tile-row img { width: 64px; height: 64px; margin-left: -2px; }
.collect-phone { justify-self: center; }

/* ---------- closing band ---------- */
.closing { background: var(--g-accent); padding: 96px 0; }
.closing-row { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.closing h2 { color: var(--g-deep); font-size: 56px; }
.closing p { margin-top: 16px; color: var(--g-closing-ink); font-size: 20px; font-weight: 600; }

/* ---------- VIP ---------- */
.vip { position: relative; overflow: hidden; background: #130B22; color: #E9E2FF; padding: 128px 0; }
.vip::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 65% at 80% 45%, rgba(255, 79, 216, .22), rgba(255, 79, 216, 0) 70%), radial-gradient(45% 55% at 10% 90%, rgba(79, 227, 255, .14), rgba(79, 227, 255, 0) 70%); }
.vip .wrap { position: relative; }
.vip-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.vip h2 { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 64px; text-shadow: 0 0 28px rgba(255, 79, 216, .45); }
.trophy { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; color: #FFF3E6; background: radial-gradient(circle at 50% 35%, #FF7A3C, #B3260F 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 30px rgba(255, 110, 50, .45); }
.trophy svg { width: 33px; height: 33px; }
.vip .section-intro { max-width: 40ch; color: #D3C9F4; }
.vip-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin-top: 40px; }
.bt { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
img.bt { object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.vip-list { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; margin: 40px 0 0; padding: 0; list-style: none; }
.vip-list li { position: relative; padding-left: 28px; color: #E9E2FF; }
.vip-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(145deg, #4FE3FF, #FF4FD8); box-shadow: 0 0 10px rgba(255, 79, 216, .6); }
.vip-note { margin-top: 24px; color: #A99CCF; font-size: 15px; }
.vip-phone { justify-self: center; }
.vip-phone .phone { background: #07040D; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 0 90px -12px rgba(255, 79, 216, .5), 0 40px 70px -24px rgba(0, 0, 0, .8); }
.vip-phone video { aspect-ratio: 780 / 1688; background: #130B22; }

/* ---------- How it plays overlay ---------- */
dialog.howto { width: min(820px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--g-deep); color: var(--g-on-deep); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .7); overflow: auto; }
dialog.howto::backdrop { background: rgba(var(--g-shade), .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.howto[open] { animation: howto-in .28s ease-out; }
@keyframes howto-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.howto[open] { animation: none; } }
.howto-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px; }
.howto-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.howto-close:hover { background: rgba(255, 255, 255, .2); }
.howto-video { position: relative; }
.howto-video .phone { width: auto; padding: 10px; border-radius: 40px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.howto-video video { height: min(640px, calc(100dvh - 128px)); width: auto; aspect-ratio: 780 / 1688; border-radius: 31px; background: var(--g-phone); }
.howto-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 20px 0 0 16px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 15px/1 var(--body); cursor: pointer; }
.howto-toggle:hover { background: rgba(255, 255, 255, .18); }
.howto-text h2 { color: var(--g-head-on-deep); font-size: 40px; }
.howto-text > p { margin-top: 12px; color: var(--g-on-deep-2); font-size: 17px; }
.chapters { display: flex; flex-direction: column; gap: 4px; margin: 24px 0 0; padding: 0; list-style: none; }
.chapter { position: relative; display: block; width: 100%; padding: 12px 16px 14px; border: 0; border-radius: 14px; background: none; color: var(--g-chapter); text-align: left; cursor: pointer; font: inherit; }
.chapter:hover { background: rgba(255, 255, 255, .05); }
.chapter b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--g-chapter-b); }
.chapter span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; }
.chapter[aria-current="true"] { background: rgba(245, 174, 69, .14); color: var(--g-on-deep); }
.chapter[aria-current="true"] b { color: var(--g-head-on-deep); }
.chapter i { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.chapter i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--g-accent); border-radius: 3px; }
.chapter:not([aria-current="true"]) i { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .vip { padding: 96px 0; }
  .vip-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .vip h2 { font-size: 44px; gap: 14px; }
  .trophy { width: 48px; height: 48px; }
  .trophy svg { width: 26px; height: 26px; }
  .hero-grid, .modes-grid, .collect-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 40px; padding-top: 36px; }
  .hero-copy, .g-wordspoke .hero-copy { padding-bottom: 0; }
  /* WordSpoke's sky is bright edge to edge: on narrow screens the text runs into the clouds, so the shade covers the
     whole width behind it and fades out below */
  .g-wordspoke .hero::before { background: linear-gradient(180deg, rgba(var(--g-shade), .62) 0%, rgba(var(--g-shade), .46) 46%, rgba(var(--g-shade), 0) 70%); }
  .g-wordspoke .hero { background-position: 30% 30%; }
  .hero-lede { font-size: 20px; margin-top: 24px; }
  .hero-actions { margin-top: 32px; }
  .hero-phone { margin-bottom: -88px; }
  .phone { width: 248px; padding: 9px; border-radius: 40px; }
  .phone img, .phone video { border-radius: 31px; }
  .materials { padding: 136px 0 88px; }
  .materials h2, .modes h2, .collect h2, .closing h2 { font-size: 40px; }
  .section-intro { font-size: 18px; }
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; margin-top: 48px; }
  .mat-tile { width: 88px; height: 88px; }
  .modes, .collect { padding: 88px 0; }
  .modes-grid, .collect-grid { gap: 56px; }
  .phones { height: 520px; }
  .phones .phone { width: 210px; }
  .phones .p2 { left: 38%; }
  .mode-list { margin-top: 40px; }
  .closing { padding: 72px 0; }
}
@media (max-width: 720px) {
  .howto-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 64px 16px 20px; justify-items: center; }
  .howto-video video { height: min(540px, calc(100dvh - 360px)); min-height: 280px; }
  .howto-text { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .howto-text .chapters { width: 100%; }
  .howto-toggle { margin: 12px 0 0; }
  .howto-text h2, .howto-text > p { display: none; }
  .chapters { margin-top: 0; }
  .chapter:not([aria-current="true"]) { display: none; }
  .chapter { text-align: center; padding: 12px 16px 16px; }
}
@media (max-width: 600px) {
  .game-bar nav { gap: 0 20px; padding: 6px 0 4px; }
  .game-name { flex-basis: 100%; padding: 10px 0 2px; }
}
@media (max-width: 560px) {
  .vip-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 300px; gap: 12px; }
  .mat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mat-grid > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .mat-grid .mat-tile { width: 72px; height: 72px; grid-row: span 2; }
  .mat-name { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 0; }
  .tile-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-left: 0; margin-top: 40px; }
  .tile-row img, .g-wordspoke .tile-row img { width: 100%; height: auto; margin-left: 0; }
  .tile-row img:nth-child(even) { transform: none; }
  .phones { height: 440px; }
  .phones .phone { width: 180px; }
  .phones .p1 { left: 2%; }
  .phones .p2 { left: auto; right: 4%; }
  .hero-lede { font-size: 19px; }
}