/* ==========================================================================
   Tokens
   Gold is the brand colour and is kept for primary actions and the product itself.
   Blue is only for text links and keyboard focus, the way Apple uses it.
   ========================================================================== */

:root {
  color-scheme: light;
  /* Section and page titles: classical small capitals with Cyrillic, in the spirit of the
     hero's Cinzel (which has no Cyrillic). */
  --font-display: "Cormorant SC", "Cinzel", Georgia, "Times New Roman", serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #ffffff;
  --bg-2: #f5f5f7;
  /* --bg-2 as a sheer layer over --bg: over the plain page it is the same grey, and the
     page's background mist and stars (page-fx.js) show through it. */
  --bg-2-veil: rgba(0, 0, 51, 0.039);
  /* How far a band's colour fades in and out at its edges (less than a section's padding). */
  --band-fade: clamp(56px, 7vw, 112px);
  --bg-3: #e8e8ed;
  --surface: #ffffff;
  --sheet-bg: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: rgba(0, 0, 0, 0.12);
  --line-strong: #86868b;
  --link: #0066cc;
  --focus: #0071e3;
  --gold: #f0b429;
  --gold-hover: #e3a316;
  --on-gold: #1d1d1f;
  --danger: #d70015;
  --success: #1f8a3a;
  --coin-shadow: rgba(0, 0, 0, 0.2);

  --glass: rgba(250, 250, 252, 0.74);
  --glass-line: rgba(0, 0, 0, 0.08);
  --glass-menu: rgba(255, 255, 255, 0.86);
  --glass-bar: rgba(255, 255, 255, 0.8);
  --menu-bg: rgba(250, 250, 252, 0.94);

  --nav-h: 52px;
  /* The carnage bar above the nav bar (carnage-bar.js). */
  --bar-h: 30px;
  /* Both bars plus the status-bar inset above them on notched phones. */
  --nav-total: calc(var(--nav-h) + var(--bar-h) + env(safe-area-inset-top, 0px));
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw: 1200px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --spring: cubic-bezier(0.3, 1.32, 0.55, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #000000;
    --bg-2: #161617;
    --bg-2-veil: rgba(244, 244, 255, 0.09);
    --bg-3: #2c2c2e;
    --surface: #1d1d1f;
    --sheet-bg: #1c1c1e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --line: rgba(255, 255, 255, 0.16);
    --line-strong: #6e6e73;
    --link: #2997ff;
    --focus: #2997ff;
    --gold: #f5bd3a;
    --gold-hover: #ffca55;
    --danger: #ff6961;
    --success: #30d158;
    --coin-shadow: rgba(0, 0, 0, 0.6);
    --glass: rgba(22, 22, 23, 0.74);
    --glass-line: rgba(255, 255, 255, 0.1);
    --glass-menu: rgba(44, 44, 46, 0.86);
    --glass-bar: rgba(36, 36, 38, 0.82);
    --menu-bg: rgba(18, 18, 20, 0.94);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #161617;
  --bg-2-veil: rgba(244, 244, 255, 0.09);
  --bg-3: #2c2c2e;
  --surface: #1d1d1f;
  --sheet-bg: #1c1c1e;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: #6e6e73;
  --link: #2997ff;
  --focus: #2997ff;
  --gold: #f5bd3a;
  --gold-hover: #ffca55;
  --danger: #ff6961;
  --success: #30d158;
  --coin-shadow: rgba(0, 0, 0, 0.6);
  --glass: rgba(22, 22, 23, 0.74);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-menu: rgba(44, 44, 46, 0.86);
  --glass-bar: rgba(36, 36, 38, 0.82);
  --menu-bg: rgba(18, 18, 20, 0.94);
}

/* Sections that are always dark (hero, prices), and the nav while it sits over them. */
[data-dark],
.nav[data-tone="dark"],
.bento__tile--currency {
  --bg: #000000;
  --bg-2: #161617;
  --bg-2-veil: rgba(244, 244, 255, 0.09);
  --bg-3: #2c2c2e;
  --surface: #1d1d1f;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: #6e6e73;
  --link: #2997ff;
  --focus: #2997ff;
  --gold: #f5bd3a;
  --gold-hover: #ffca55;
  --glass: rgba(22, 22, 23, 0.72);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-menu: rgba(44, 44, 46, 0.86);
  --menu-bg: rgba(18, 18, 20, 0.94);
  color-scheme: dark;
}

[data-dark] {
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-total) + 8px);
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend {
  margin: 0;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img, svg {
  display: block;
}

button, input {
  font: inherit;
  letter-spacing: inherit;
}

a {
  color: var(--link);
}

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

::selection {
  background: color-mix(in srgb, var(--gold) 45%, transparent);
}

.container {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9375rem;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.btn {
  --btn-h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--gold {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
}

.btn--gold:hover {
  background: var(--gold-hover);
}

.btn--quiet {
  background: var(--bg-3);
  color: var(--ink);
}

.btn--quiet:hover {
  background: color-mix(in srgb, var(--bg-3), var(--ink) 7%);
}

.btn--small {
  --btn-h: 30px;
  position: relative;
  padding: 0 14px;
  font-size: 0.8125rem;
}

/* Keeps the small nav button's touch target at 44px tall. */
.btn--small::after {
  content: "";
  position: absolute;
  inset: -7px -2px;
}

.btn--large {
  --btn-h: 54px;
  padding: 0 30px;
  font-size: 1.125rem;
}

.btn--block {
  --btn-h: 54px;
  width: 100%;
  padding-block: 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.link-more,
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--link);
  text-decoration: none;
}

.link-more {
  min-height: 44px;
  font-size: 1.1875rem;
}

.link-more svg,
.link-out svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.2s var(--ease-out);
}

.link-more:hover span,
.link-out:hover span {
  text-decoration: underline;
}

.link-more:hover svg {
  translate: 3px 0;
}

.link-out:hover svg {
  translate: 2px -2px;
}

/* ==========================================================================
   Navigation: the one glass bar
   ========================================================================== */

/* Fixed so content scrolls beneath the glass; the hero starts under it. */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  /* Room for the carnage bar from the first paint, before carnage-bar.js fills it. */
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--bar-h));
  color: var(--ink);
}

/* The glass sits on a pseudo-element: a backdrop-filter on .nav itself would trap the
   fixed mobile menu inside the 52px bar. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-line);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.nav__bar {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  width: 22px;
  height: 22px;
}

.nav__links {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.nav__links a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.nav__links a:hover {
  opacity: 1;
}

/* Just above the phone menu the bar is tight (the Russian links leave ~20 px), so the links
   give up a little padding there. */
@media (max-width: 1279px) {
  .nav__links a {
    padding-inline: 10px;
  }
}

/* The page you're on (Events on /podii/). */
.nav__links a[aria-current="page"] {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang,
.menu-pop {
  position: relative;
}

.lang__button,
.menu-pop__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0.85;
  transition: background-color 0.2s, opacity 0.2s;
}

.lang__button:hover,
.lang__button[aria-expanded="true"],
.menu-pop__button:hover,
.menu-pop__button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  opacity: 1;
}

.lang__button svg,
.menu-pop__button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.menu-pop__button svg {
  width: 18px;
  height: 18px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-pop__button .icon-dot {
  fill: currentColor;
  stroke: none;
}

.lang__menu,
.menu-pop__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding: 6px;
  display: grid;
  border-radius: 16px;
  background: var(--glass-menu);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--glass-line);
  animation: menu-in 0.2s var(--ease-out);
}

.lang__menu button,
.mobile-menu__langs button,
.footer__langs button {
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.lang__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.9375rem;
  text-align: left;
}

.lang__menu button:hover {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

.lang__menu button[aria-current="true"]::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
  translate: 0 -2px;
}

/* Flags in the language button and in every list of languages (its menu, the phone menu, the
   footer), drawn as SVG (Windows shows flag emoji as two letters): Ukraine, Britain for English
   (the English page sells in euros), and Russia. The page puts the language it shows on
   <html lang>. */
:root {
  --flag-uk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><path fill='%230057B7' d='M0 0h2v1H0z'/><path fill='%23FFD700' d='M0 1h2v1H0z'/></svg>");
  --flag-ru: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3'><path fill='%23fff' d='M0 0h3v1H0z'/><path fill='%230039A6' d='M0 1h3v1H0z'/><path fill='%23D52B1E' d='M0 2h3v1H0z'/></svg>");
  --flag-en: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path fill='%23012169' d='M0 0h60v60H0z'/><path d='M0 0l60 60M60 0L0 60' stroke='%23fff' stroke-width='12'/><path d='M0 0l60 60M60 0L0 60' stroke='%23C8102E' stroke-width='4'/><path d='M30 0v60M0 30h60' stroke='%23fff' stroke-width='20'/><path d='M30 0v60M0 30h60' stroke='%23C8102E' stroke-width='12'/></svg>");
}

.lang__button svg {
  display: none;
}

.lang__button::before,
.lang__menu button::before,
.mobile-menu__langs button::before,
.footer__langs button::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent);
}

:root[lang="uk"] .lang__button::before,
[data-set-lang="uk"]::before {
  background-image: var(--flag-uk);
}

:root[lang="en"] .lang__button::before,
[data-set-lang="en"]::before {
  background-image: var(--flag-en);
}

:root[lang="ru"] .lang__button::before,
[data-set-lang="ru"]::before {
  background-image: var(--flag-ru);
}

/* The bar's other menus: the players' tools, and where to get the game. The phone menu shows
   the same lists. */
.menu-pop__panel {
  min-width: 272px;
}

/* The tools come in groups, each under a small heading; the bar's menu sets them in two
   columns once there are many. */
.menu-group {
  break-inside: avoid;
  padding-bottom: 6px;
}

.menu-group__title {
  padding: 10px 12px 2px;
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  #apps-menu {
    width: min(600px, calc(100vw - 32px));
  }

  #apps-menu [data-apps-list] {
    display: block;
    columns: 2;
    column-gap: 8px;
  }
}

.menu-pop__title {
  padding: 8px 12px 4px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

.menu-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list a,
.menu-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 7px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}

/* A tool's row is a button that opens it on this page, or a link to the store's own page for
   it; both are one line, so they keep the same height. */
[data-apps-list] a {
  min-height: 44px;
}

.menu-list button {
  width: 100%;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-list a:hover,
.menu-list button:hover {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

.menu-list__text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.menu-list b {
  font-size: 0.9375rem;
  font-weight: 500;
}

.menu-list small {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.menu-list svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-list a:hover svg,
.menu-list button:hover svg {
  stroke: var(--ink);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.nav__toggle path {
  transform-origin: 12px 12px;
  transition: transform 0.3s var(--ease-out);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-top {
  transform: translateY(3px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bottom {
  transform: translateY(-3px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-total) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 20px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  animation: menu-in 0.3s var(--ease-out);
}

.mobile-menu__links {
  display: grid;
}

.mobile-menu__links a {
  padding: 8px 0;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.mobile-menu__links a[aria-current="page"] {
  color: var(--gold);
}

.mobile-menu__group .menu-pop__title {
  padding: 0 0 6px;
}

.mobile-menu__group .menu-list a,
.mobile-menu__group .menu-list button {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.mobile-menu__group .menu-list a:hover,
.mobile-menu__group .menu-list button:hover {
  background: none;
}

.mobile-menu__group .menu-list b {
  font-size: 1.0625rem;
}

.mobile-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-menu__langs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  font-size: 0.9375rem;
}

.mobile-menu__langs button[aria-current="true"] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

/* Light or dark, at the right end of the bar and in the phone menu. The icon shows where it
   goes: a moon while the page is light, a sun while it is dark, turning as it swaps. */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

.theme-toggle:focus-visible,
.mobile-menu__theme:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.theme-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon__sun,
.theme-icon__moon {
  transform-origin: 12px 12px;
  transition: opacity 0.25s ease, transform 0.5s var(--spring);
}

.theme-icon__sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon__sun {
    opacity: 1;
    transform: none;
  }

  :root:not([data-theme="light"]) .theme-icon__moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
  }
}

:root[data-theme="dark"] .theme-icon__sun {
  opacity: 1;
  transform: none;
}

:root[data-theme="dark"] .theme-icon__moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

.mobile-menu__end {
  display: grid;
  gap: 12px;
}

.mobile-menu__theme {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .theme-icon__sun,
  .theme-icon__moon {
    transition: none;
  }
}

@media (max-width: 1179px) {
  /* The language stays in the bar on phones and tablets too (it was only at the bottom of the
     menu); the tools and the links move into the menu. */
  .nav__links,
  .menu-pop {
    display: none;
  }

  .lang__button {
    padding: 0 8px;
  }

  /* Here the button sits left of Buy, so its menu opens to the right to stay on screen. */
  .lang__menu {
    right: auto;
    left: 0;
  }

  .nav__actions {
    margin-left: auto;
  }

  .nav__toggle {
    display: grid;
    place-items: center;
  }
}

/* On the narrowest phones the language button keeps only its flag, and then the coin loses
   the name beside it (the link keeps it as its label), so Buy, the theme and the menu fit. */
@media (max-width: 369px) {
  .lang__button [data-i18n="lang.short"] {
    display: none;
  }
}

@media (max-width: 349px) {
  .brand > span {
    display: none;
  }
}

@media (min-width: 1180px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding-block: clamp(88px, 11vw, 160px);
}

.section--tint {
  background: linear-gradient(transparent, var(--bg-2-veil) var(--band-fade), var(--bg-2-veil) calc(100% - var(--band-fade)), transparent);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.7rem + 3.9vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.04;
}

.lead {
  max-width: 30em;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: clip;
  /* --hero-inset is 0 where the page host already pads the top for the status bar. */
  padding-top: calc(var(--nav-h) + var(--bar-h) + var(--hero-inset, env(safe-area-inset-top, 0px)));
}

/* The mist behind the hero (hero-fx.js); it fades in once its first frame is drawn. */
.hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.hero__fx.is-on {
  opacity: 1;
}

.hero__inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: min(calc(100svh - var(--nav-h) - var(--bar-h)), 860px);
  padding-block: clamp(36px, 6vw, 72px) clamp(56px, 7vw, 96px);
}

/* The seller's name in Roman capitals (Cinzel), gold like the coin, with a faint glow. */
.hero__title {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-size: clamp(2.6rem, 0.8rem + 5.4vw, 6.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  background: linear-gradient(180deg, #fff4c8 0%, #f6cf62 42%, #d39a2a 72%, #f3c85a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(245, 189, 58, 0.22));
}

.hero__tagline {
  max-width: 18em;
  text-wrap: balance;
  margin-top: 24px;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* The game's name links to its site: it turns gold and gets an underline when aimed at. */
.hero__game {
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 0.07em no-repeat;
  transition: color 0.4s ease, background-size 0.4s var(--ease-out, ease);
}

.hero__game:hover,
.hero__game:focus-visible {
  color: var(--gold);
  background-size: 100% 0.07em;
}

/* Without hover (phones), a faint gold underline shows it can be tapped. */
@media (hover: none) {
  .hero__game {
    background-image: linear-gradient(rgba(245, 189, 58, 0.6), rgba(245, 189, 58, 0.6));
    background-size: 100% 0.07em;
  }
}

.hero__price {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-variant-numeric: tabular-nums;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 36px;
}

.hero__visual {
  display: grid;
  place-items: center;
  padding-block: 28px 8px;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px;
  }

  .hero__visual {
    padding-block: 0;
  }
}

/* The coin: two faces and a stack of discs that make its edge, in real 3D. */
.coin-stage {
  --coin: clamp(236px, 30vw, 440px);
  --thick: calc(var(--coin) * 0.115);
  position: relative;
  width: var(--coin);
  aspect-ratio: 1;
  perspective: 1500px;
}

.coin-light {
  position: absolute;
  inset: -34%;
  background: radial-gradient(closest-side, rgba(245, 189, 58, 0.2), rgba(245, 189, 58, 0.06) 55%, rgba(245, 189, 58, 0) 80%);
  pointer-events: none;
}

.coin-float {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: coin-float 7s ease-in-out infinite;
}

/* The coin in real 3D (hero-coin.js), drawn a little beyond the stage so nothing clips as it
   turns. It is the first coin anyone sees: the flat CSS coin stays hidden while it is built
   (is-gl-pending, set in the markup) and shows only if 3D can't run, or after 4 seconds if the
   script never arrives. */
.coin-gl {
  position: absolute;
  top: -12%;
  left: -12%;
  width: 124%;
  height: 124%;
  pointer-events: none;
}

.coin-stage.is-gl-pending .coin {
  visibility: hidden;
  animation: coin-fallback 0s 4s forwards;
}

.coin-stage.is-gl .coin {
  visibility: hidden;
}

@keyframes coin-fallback {
  to {
    visibility: visible;
  }
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -28deg));
  will-change: transform;
}

.coin__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.coin__face svg {
  width: 100%;
  height: 100%;
}

.coin__face--front {
  transform: translateZ(calc(var(--thick) / 2));
}

.coin__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
}

.coin__edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Every disc carries the same thin wedges, so across the stack they line up into a milled edge. */
.coin__edge i {
  position: absolute;
  inset: 0.4%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(74, 45, 2, 0.34) 0 1.4deg, rgba(255, 236, 170, 0.08) 1.4deg 2.8deg),
    radial-gradient(circle at 32% 28%, #ffe28e, #d29a2a 52%, #7c4e08);
  transform: translateZ(calc((var(--i) / 27 - 0.5) * var(--thick)));
}

.coin__glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: glint 8s var(--ease-out) 1.2s infinite;
}

.coin-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -16%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 189, 58, 0.28), rgba(245, 189, 58, 0));
  animation: coin-shadow 7s ease-in-out infinite;
}

@keyframes coin-float {
  0%, 100% { translate: 0 -1.6%; }
  50% { translate: 0 1.6%; }
}

@keyframes coin-shadow {
  0%, 100% { scale: 0.92; opacity: 0.75; }
  50% { scale: 1.04; opacity: 1; }
}

@keyframes glint {
  0%, 62% { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}

/* ==========================================================================
   Buy: Apple Store-style configurator
   ========================================================================== */

.buy__grid {
  display: grid;
  gap: 40px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (min-width: 960px) {
  .buy__grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    gap: 56px;
    align-items: start;
  }

  .buy__visual {
    position: sticky;
    top: calc(var(--nav-total) + 28px);
  }
}

.buy__visual {
  padding: clamp(24px, 4vw, 48px);
  border-radius: 30px;
  background: var(--bg-2);
}

.noscript {
  margin-top: 24px;
  font-size: 1.1875rem;
}

/* Coin stack: grows with the amount. */
.stack {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 10 / 9;
}

.stack__coin {
  position: absolute;
  width: 34%;
  aspect-ratio: 120 / 54;
  transition: transform 0.55s var(--spring), opacity 0.3s var(--ease-out);
}

.stack__coin svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stack__coin.is-entering {
  transform: translateY(-160%);
  opacity: 0;
}

.stack__coin.is-leaving {
  transform: translateY(-50%);
  opacity: 0;
  transition-duration: 0.25s;
}

.stack__shadow {
  position: absolute;
  width: 44%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--coin-shadow), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.stack__shadow.is-on {
  opacity: 1;
}

.stack__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 10px;
  margin-top: 8px;
  text-align: center;
}

.stack__amount {
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stack__unit {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stack__for {
  flex-basis: 100%;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

/* Form */
.buy__form {
  display: grid;
  gap: 44px;
}

.step {
  min-width: 0;
  padding: 0;
  border: 0;
}

.step__title {
  float: left;
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
  color: var(--ink-2);
  font-size: clamp(1.3125rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.step__title strong {
  color: var(--ink);
  font-weight: 600;
}

.step__title + * {
  clear: both;
}

.field {
  position: relative;
}

.field input {
  width: 100%;
  height: 58px;
  padding: 24px 52px 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field label {
  position: absolute;
  left: 17px;
  top: 18px;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s var(--ease-out);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-9px) scale(0.72);
}

.field input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
}

.field input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);
}

.field__state {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  translate: 0 -50%;
}

.spinner,
.field__check {
  display: none;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.field__check {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--success);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field[data-state="checking"] .spinner,
.field[data-state="found"] .field__check {
  display: block;
}

.field--nick {
  margin-top: 12px;
}

.player-status:empty {
  display: none;
}

.status {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

.status--error {
  color: var(--danger);
}

.status .link-out {
  margin-top: 4px;
}

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg-2);
  animation: pop-in 0.35s var(--ease-out);
}

.avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a0, #f0b429 55%, #c68b1c);
  color: #4a2f00;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* The character's portrait from the game (150 by 200), cropped round to the face inside a thin
   gold rim; the initial underneath shows until it loads, and stays if it doesn't. */
.avatar__photo {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 24%;
}

.avatar--alt {
  background: radial-gradient(circle at 35% 30%, #ffffff, #d1d1d6 55%, #98989d);
  color: #3a3a3c;
}

.player__text {
  display: grid;
  min-width: 0;
}

.player__name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player__meta {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player .link-out {
  flex: none;
  margin-left: auto;
  font-size: 0.875rem;
}

.help {
  margin-top: 14px;
  font-size: 0.875rem;
}

.help summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--link);
  cursor: pointer;
  list-style: none;
}

.help summary::-webkit-details-marker {
  display: none;
}

.help summary:hover {
  text-decoration: underline;
}

.help p {
  max-width: 46ch;
  margin-top: 6px;
  color: var(--ink-2);
  line-height: 1.5;
}

.help .link-out {
  margin-top: 6px;
}

/* Animated disclosure where the browser supports it; instant elsewhere. */
details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

/* Amount tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 84px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease-out);
}

.tile:hover {
  border-color: var(--ink-2);
}

.tile:active {
  transform: scale(0.98);
}

.tile:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.tile:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.tile__main {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.tile__unit {
  color: var(--ink-2);
  font-size: 1.0625rem;
  font-weight: 500;
}

.tile__sub {
  color: var(--ink-2);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.tile--other .tile__main {
  font-size: 1.0625rem;
}

.stepper {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  animation: pop-in 0.3s var(--ease-out);
}

.stepper__btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), background-color 0.2s;
}

.stepper__btn:active {
  transform: scale(0.92);
}

.stepper__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.field--center input {
  padding-inline: 12px;
  font-size: 1.3125rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.field--center label {
  left: 0;
  right: 0;
  text-align: center;
  transform-origin: center top;
}

.amount-msg {
  margin-top: 10px;
  color: var(--danger);
  font-size: 0.875rem;
}

.amount-msg:empty {
  display: none;
}

/* Segmented control with a sliding thumb */
.segmented {
  --n: 3;
  --i: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-3);
}

.segmented__thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n));
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.35s var(--ease-out);
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

/* Every label stays full-strength (4.5:1 on the track); the thumb carries the selection. */
.segmented label:has(input:checked) {
  font-weight: 600;
}

.segmented label:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.segmented__sym {
  font-weight: 700;
}

.segmented__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented--on-dark {
  --bg-3: #1d1d1f;
}

.segmented--on-dark .segmented__thumb {
  background: #3a3a3c;
  box-shadow: none;
}

/* Summary */
.summary {
  display: grid;
  gap: 6px;
  padding: 24px;
  border-radius: 22px;
  background: var(--bg-2);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.summary__label {
  font-weight: 600;
}

.summary__total {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.summary__line {
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.summary__hint {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-align: center;
}

.summary__hint.is-alert {
  color: var(--danger);
}

/* ==========================================================================
   How it works
   ========================================================================== */

.steps {
  display: grid;
  gap: 48px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.frag {
  height: 232px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  padding: 24px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface);
}

.steps h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.steps p {
  max-width: 34ch;
  margin-top: 10px;
}

.mini-player {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 232px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: var(--bg-2);
}

.mini-player__text {
  display: grid;
  line-height: 1.25;
}

.mini-player__text small {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.mini-player__check {
  width: 22px;
  height: 22px;
  margin-left: auto;
  fill: none;
  stroke: var(--success);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-amount {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 280px;
}

.mini-amount__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mini-amount__chips span {
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mini-amount__chips .is-on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.mini-amount__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.mini-amount__total small {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.mini-amount__total b {
  font-size: 1.625rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.chat {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.bubble--out {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: var(--gold);
  color: var(--on-gold);
}

.bubble--in {
  justify-self: start;
  border-bottom-left-radius: 6px;
  background: var(--bg-2);
  color: var(--ink);
}

/* ==========================================================================
   Why buy here: bento
   ========================================================================== */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

.bento__tile {
  position: relative;
  grid-column: span 6;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 28px;
  background: var(--bg-2);
  color: var(--ink);
}

@media (min-width: 900px) {
  .bento__tile--currency { grid-column: span 4; }
  .bento__tile--person { grid-column: span 2; }
  .bento__tile--friend,
  .bento__tile--any { grid-column: span 3; }
}

.bento__copy {
  max-width: 28ch;
  color: var(--ink-2);
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.bento__copy strong {
  color: var(--ink);
  font-weight: 600;
}

.bento__tile--currency {
  background: #1d1d1f;
}

.glyphs {
  display: flex;
  align-self: flex-end;
  gap: 0.14em;
  color: var(--gold);
  font-size: clamp(5.5rem, 3rem + 9vw, 12.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
}

.glyphs span:nth-child(2) {
  opacity: 0.72;
}

.glyphs span:nth-child(3) {
  opacity: 0.46;
}

.chat--small {
  align-self: stretch;
  max-width: none;
}

.chat--small .bubble--in {
  background: var(--surface);
}

.friends {
  position: relative;
  height: 152px;
}

.friends .mini-player {
  position: absolute;
  background: var(--surface);
}

.mini-player--back {
  left: 0;
  top: 0;
  opacity: 0.5;
  scale: 0.94;
  transform-origin: left top;
}

.mini-player--front {
  left: clamp(24px, 10%, 72px);
  top: 64px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.odd-amount {
  align-self: flex-end;
  font-size: clamp(6rem, 3rem + 10vw, 12.5rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Prices (always dark)
   ========================================================================== */

.prices__grid {
  display: grid;
  gap: 56px;
}

@media (min-width: 960px) {
  .prices__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
  }
}

.rate {
  display: grid;
  gap: 8px;
  margin-top: 40px;
}

.rate__value {
  color: var(--gold);
  font-size: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.rate__per {
  color: var(--ink-2);
  font-size: 1.3125rem;
}

.prices .segmented {
  max-width: 440px;
  margin-top: 36px;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.price-table thead th {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
}

.price-table tbody th,
.price-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
}

.price-table tbody th {
  font-weight: 600;
  text-align: left;
}

.price-table .num {
  text-align: right;
}

.price-table td:last-child,
.price-table thead th:last-child {
  width: 1%;
  padding-left: 20px;
  text-align: right;
  white-space: nowrap;
}

.row-buy {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-size: 1.0625rem;
  cursor: pointer;
}

.row-buy svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.2s var(--ease-out);
}

.row-buy:hover span {
  text-decoration: underline;
}

.row-buy:hover svg {
  translate: 3px 0;
}

/* ==========================================================================
   News from the game: a shelf of cards that scrolls sideways
   ========================================================================== */

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.news__all {
  min-height: 44px;
  font-size: 1.0625rem;
}

/* Full width so cards scroll to the screen edge; the first card lines up with the page. */
.news__shelf {
  --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 330px);
  gap: 16px;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 10px var(--edge) 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  list-style: none;
}

.news__shelf::-webkit-scrollbar {
  display: none;
}

.news-card {
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  border-radius: 26px;
  background: var(--surface);
  scroll-snap-align: start;
  transition: scale 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

@media (hover: hover) {
  .news-card:not(.news-card--skeleton):hover {
    scale: 1.015;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  }
}

.news-card__date {
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
}

.news-card__title {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* The title's button covers the whole card, so a tap anywhere opens the news. */
.news-card__title button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.news-card__title button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 26px;
}

.news-card__title button:focus-visible {
  outline: none;
}

.news-card__title button:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.news-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.news-card__things {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  padding-right: 44px;
}

.news-card__things img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--bg-2);
  object-fit: cover;
}

/* The game's small icons inside a sentence, like the trophy in "150 [trophy]". */
.news-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  margin: 0 0.08em;
  vertical-align: -0.22em;
}

.news-card__plus {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  transition: scale 0.25s var(--ease-out);
}

.news-card:hover .news-card__plus {
  scale: 1.08;
}

.news-card__plus svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Placeholder cards while the news loads. */
.news-card--skeleton span {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: var(--bg-2);
  animation: pulse 1.6s ease-in-out infinite;
}

.news-card--skeleton span:nth-child(1) { width: 32%; }
.news-card--skeleton span:nth-child(2) { width: 84%; height: 24px; margin-top: 4px; }
.news-card--skeleton span:nth-child(3) { width: 96%; margin-top: 8px; }
.news-card--skeleton span:nth-child(4) { width: 70%; }

.news__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.news__error {
  margin-top: 32px;
  margin-right: auto;
  color: var(--ink-2);
}

.paddles {
  display: flex;
  gap: 14px;
}

.paddle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.paddle:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 15%, transparent);
}

.paddle:disabled {
  opacity: 0.36;
  cursor: default;
}

.paddle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phones and tablets scroll the shelf with a finger. */
@media (hover: none) and (pointer: coarse) {
  .paddles {
    display: none;
  }
}

/* A game promotion the store follows (app.js renderPromo): a gold note under the buy title and
   the old rate struck through beside the new one. */
.promo-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 18px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.promo-note[hidden] {
  display: none;
}

.promo-note__badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #1d1d1f;
  font-size: 0.8125rem;
  font-weight: 800;
}

.promo-note__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}

.promo-note__link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.promo-note__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rate__old {
  display: block;
  color: var(--ink-2);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration-thickness: 2px;
}

.rate__old[hidden] {
  display: none;
}

/* ==========================================================================
   Hall of fame: the game's top tens in a card beside a short head (hall.js)
   ========================================================================== */

.hall__grid {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  align-items: start;
}

@media (min-width: 960px) {
  .hall__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }
}

/* One inset for everything in the card: the tabs, the rows and their rules, the foot. */
.hall-card {
  padding: 20px;
  border-radius: 28px;
  background: var(--bg-2);
}

/* The boards as chips that wrap; the chosen one is inked in. */
.hall-card__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.hall-card__tab {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, scale 0.2s var(--ease-out);
}

.hall-card__tab:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.hall-card__tab:active {
  scale: 0.96;
}

.hall-card__tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}

.hall-card__tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .hall-card__tab {
    min-height: 44px;
  }
}

.hall-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hall-card__list:not(.is-all) .hall-row:nth-child(n + 6) {
  display: none;
}

/* Place, the game's rank mark (and a clan's crest), the name with its level, the number. The rows
   share the list's columns, so names line up even where a clan has no crest; a row has no side
   padding, since a subgrid adds it to its edge columns and the place would spill over the mark. */
.hall-card__list {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) auto;
  column-gap: 12px;
}

.hall-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 54px;
  padding-block: 8px;
  animation: hall-in 0.45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.hall-row + .hall-row {
  border-top: 1px solid var(--line);
}

@keyframes hall-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.hall-row__place {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Gold, silver and bronze for the first three. */
.hall-row__place--1 {
  background: linear-gradient(180deg, #fff4c8 0%, #f6cf62 45%, #d39a2a 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 53, 3, 0.22), 0 3px 8px -2px rgba(211, 154, 42, 0.55);
  color: #5a3503;
}

.hall-row__place--2 {
  background: linear-gradient(180deg, #ffffff 0%, #dde1e8 45%, #a6adb9 100%);
  box-shadow: inset 0 0 0 1px rgba(58, 63, 72, 0.2), 0 3px 8px -2px rgba(120, 128, 140, 0.5);
  color: #3a3f48;
}

.hall-row__place--3 {
  background: linear-gradient(180deg, #ffe3c7 0%, #e2a46c 45%, #ad6831 100%);
  box-shadow: inset 0 0 0 1px rgba(74, 37, 8, 0.22), 0 3px 8px -2px rgba(173, 104, 49, 0.5);
  color: #4a2508;
}

.hall-row__marks {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hall-row__rank {
  width: 16px;
  height: 16px;
}

.hall-row__crest {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.hall-row__who {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.hall-row__name {
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hall-row__name:hover {
  text-decoration: underline;
}

.hall-row__level {
  flex: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.hall-row__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hall-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 12px;
}

.hall-card__foot .link-out {
  margin-left: auto;
  min-height: 44px;
}

.hall-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px 0 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.hall-card__more:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.hall-card__more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.3s var(--ease-out);
}

.hall-card__more[aria-expanded="true"] svg {
  rotate: 180deg;
}

@media (max-width: 520px) {
  .hall-card {
    padding: 16px;
  }

  .hall-card__list {
    column-gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-row {
    animation: none;
  }
}

/* ==========================================================================
   Questions
   ========================================================================== */

.faq__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 960px) {
  .faq__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
  }

  .faq__head {
    position: sticky;
    top: calc(var(--nav-total) + 40px);
    align-self: start;
  }
}

.faq__list details {
  border-bottom: 1px solid var(--line);
}

.faq__list details:first-child {
  border-top: 1px solid var(--line);
}

.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq__list summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-2);
  transition: background-color 0.2s;
}

.faq__list summary:hover .faq__icon {
  background: var(--bg-3);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  translate: -50% -50%;
  transition: rotate 0.3s var(--ease-out);
}

.faq__icon::after {
  rotate: 90deg;
}

.faq__list details[open] .faq__icon::after {
  rotate: 0deg;
}

.faq__answer {
  max-width: 62ch;
  padding: 0 48px 26px 0;
  line-height: 1.55;
}

.faq__answer .link-out {
  margin-top: 8px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

/* One column per visible tile, so a lone Telegram tile spans the row. */
@media (min-width: 760px) {
  .contact__grid {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}

.contact__tile {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(28px, 3.6vw, 44px);
  border-radius: 28px;
  background: var(--surface);
}

.contact__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__tile h3 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.contact__tile p {
  color: var(--ink-2);
}

.contact__tile .btn,
.contact__email {
  margin-top: auto;
}

.contact__email {
  padding-top: 24px;
  color: var(--link);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact__email:hover {
  text-decoration: underline;
}

.contact__hours {
  margin-top: 28px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
  background: var(--bg-2-veil);
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.5;
}

.footer__disclaimer {
  padding: 20px 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-top: 14px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 10px;
  background: var(--line-strong);
  vertical-align: -0.1em;
}

.footer a {
  color: var(--ink);
  opacity: 0.85;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.footer__langs {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.footer__langs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 0.75rem;
}

.footer__langs button::before {
  width: 14px;
  height: 14px;
}

.footer__langs button:hover {
  color: var(--ink);
}

.footer__langs button[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 599px) {
  .footer__langs {
    flex-basis: 100%;
    margin-left: -8px;
  }
}

/* ==========================================================================
   Floating order bar (phones)
   ========================================================================== */

.order-bar {
  position: fixed;
  z-index: 45;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--glass-line);
  translate: 0 calc(100% + 40px);
  transition: translate 0.45s var(--ease-out);
}

.order-bar.is-visible {
  translate: 0 0;
}

.order-bar__total {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.order-bar__total small {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.order-bar__total b {
  overflow: hidden;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.order-bar .btn {
  --btn-h: 46px;
  flex: none;
}

@media (min-width: 960px) {
  .order-bar {
    display: none;
  }
}

/* ==========================================================================
   Review sheet
   ========================================================================== */

.sheet {
  width: 100%;
  max-width: 100%;
  height: fit-content;
  max-height: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.42);
  animation: fade-in 0.3s var(--ease-out);
}

.sheet__panel {
  position: relative;
  max-height: 92svh;
  overflow-y: auto;
  padding: 32px 24px calc(24px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--sheet-bg);
  animation: sheet-up 0.45s var(--ease-out);
}

.sheet.is-closing .sheet__panel {
  animation: sheet-down 0.25s var(--ease-in) forwards;
}

.sheet.is-closing::backdrop {
  animation: fade-out 0.25s var(--ease-in) forwards;
}

@media (min-width: 640px) {
  .sheet {
    max-width: 480px;
    margin: auto;
  }

  .sheet__panel {
    padding: 40px 36px 32px;
    border-radius: 28px;
    animation-name: sheet-pop;
  }

  .sheet.is-closing .sheet__panel {
    animation-name: sheet-out;
  }
}

.sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink-2);
  cursor: pointer;
}

.sheet__close::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.sheet__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sheet__title {
  padding-right: 40px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.receipt {
  margin-top: 20px;
}

.receipt > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.receipt dt {
  flex: none;
  color: var(--ink-2);
}

.receipt dd {
  min-width: 0;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.receipt .receipt__total {
  padding-top: 18px;
  border-bottom: 0;
}

.receipt__total dt {
  color: var(--ink);
  font-weight: 600;
}

.receipt__total dd {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sheet__actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.sheet__note {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
}

/* One news item in full: wider, for reading. */
@media (min-width: 640px) {
  .sheet--news {
    max-width: 600px;
  }
}

.news-sheet__date {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
}

.news-sheet__body {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  overflow-wrap: anywhere;
}

.news-sheet__text {
  display: grid;
  gap: 8px;
}

.things {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 14px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.things li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  text-align: center;
}

.things img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--bg-2);
  object-fit: contain;
}

.things li.is-wide {
  grid-column: 1 / -1;
}

.things li.is-wide img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 280px;
  background: none;
}

.things span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.3;
}

.news-sheet__link {
  min-height: 44px;
  margin-top: 20px;
}

/* A player tool: nearly the whole screen, with a bar for its name, a new-tab link and Close. */
.sheet--app .sheet__panel {
  height: 94svh;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 0 0 env(safe-area-inset-bottom);
  overflow: hidden;
}

@media (min-width: 640px) {
  .sheet--app {
    width: 96vw;
    max-width: 1400px;
  }

  .sheet--app .sheet__panel {
    height: min(92vh, 1000px);
    padding: 0;
  }
}

.app-sheet__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 12px 8px 22px;
  border-bottom: 1px solid var(--line);
}

.app-sheet__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sheet__out {
  min-height: 44px;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* On phones the link keeps only its arrow; the words stay for screen readers. */
@media (max-width: 479px) {
  .app-sheet__out span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .app-sheet__out svg {
    width: 20px;
    height: 20px;
  }
}

/* In the bar, not the corner; still positioned, so its larger tap area stays around it. */
.app-sheet__bar .sheet__close {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
}

.app-sheet__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--bg-2);
}

.app-sheet__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.app-sheet__body img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 16px;
}

/* ==========================================================================
   Kinds of item: the colours the game gives their names, lightened for dark
   mode. Shared by the dressing room and the mystic bond calculator.
   ========================================================================== */

:root {
  --kind-1: var(--line-strong);
  --kind-2: #23803a;
  --kind-3: #2f4fc4;
  --kind-5: #b8661c;
  --kind-6: #1e64f0;
  --kind-7: #a8239a;
  --kind-8: #7436a6;
  --kind-9: #1c7f74;
  --kind-art: var(--gold);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kind-2: #4cc764;
    --kind-3: #7f9cff;
    --kind-5: #f0a050;
    --kind-6: #5e9bff;
    --kind-7: #e266d6;
    --kind-8: #b886ec;
    --kind-9: #4fc7b8;
  }
}

:root[data-theme="dark"] {
  --kind-2: #4cc764;
  --kind-3: #7f9cff;
  --kind-5: #f0a050;
  --kind-6: #5e9bff;
  --kind-7: #e266d6;
  --kind-8: #b886ec;
  --kind-9: #4fc7b8;
}

[data-kind="1"] { --kind: var(--kind-1); }
[data-kind="2"] { --kind: var(--kind-2); }
[data-kind="3"] { --kind: var(--kind-3); }
[data-kind="5"] { --kind: var(--kind-5); }
[data-kind="6"] { --kind: var(--kind-6); }
[data-kind="7"] { --kind: var(--kind-7); }
[data-kind="8"] { --kind: var(--kind-8); }
[data-kind="9"] { --kind: var(--kind-9); }
[data-kind="art"] { --kind: var(--kind-art); }

/* ==========================================================================
   Controls the tool pages share (the dressing room, the map and the others)
   ========================================================================== */

.link-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 0.9375rem;
  letter-spacing: inherit;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

.link-button--quiet {
  color: var(--ink-2);
}

/* Fields with their caption inside, like the store's own. */
.select-field,
.text-field,
.search-field {
  position: relative;
  display: block;
  min-width: 0;
}

.select-field[hidden] {
  display: none;
}

.select-field select,
.text-field input,
.search-field input {
  width: 100%;
  height: 56px;
  padding: 23px 34px 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.text-field input,
.search-field input {
  padding-right: 14px;
  cursor: text;
}

.search-field input {
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
}

.select-field__label,
.text-field__label {
  position: absolute;
  left: 15px;
  top: 8px;
  max-width: calc(100% - 44px);
  overflow: hidden;
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* The chevron, drawn with borders so it follows the text colour in both themes. */
.select-field::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  rotate: 45deg;
  translate: 0 -70%;
  pointer-events: none;
}

.select-field select:hover {
  border-color: var(--ink-2);
}

.select-field select:focus,
.text-field input:focus,
.search-field input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
}

.select-field select:disabled {
  opacity: 0.5;
  cursor: default;
}

.select-field--small select {
  height: 48px;
  padding-top: 19px;
  padding-bottom: 5px;
  font-size: 0.9375rem;
}

.select-field--small .select-field__label {
  top: 6px;
  font-size: 0.6875rem;
}

/* A short note at the bottom of the screen. */
.toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100% - 32px));
  padding: 12px 14px 12px 20px;
  border-radius: 18px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--glass-line);
  font-size: 0.9375rem;
  line-height: 1.35;
  opacity: 0;
  translate: -50% calc(100% + 40px);
  transition: translate 0.4s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.toast:empty {
  display: none;
}

.toast__undo {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  .toast {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ==========================================================================
   Motion
   ========================================================================== */

.reveal-ready [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.reveal-ready [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

@keyframes spin { to { rotate: 360deg; } }
@keyframes pop-in { from { opacity: 0; scale: 0.97; } }
@keyframes menu-in { from { opacity: 0; translate: 0 -6px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-up { from { translate: 0 100%; } }
@keyframes sheet-down { to { translate: 0 100%; } }
@keyframes sheet-pop { from { opacity: 0; scale: 0.96; translate: 0 14px; } }
@keyframes sheet-out { to { opacity: 0; scale: 0.97; } }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ==========================================================================
   Accessibility preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-ready [data-reveal] {
    translate: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav::before,
  .lang__menu,
  .menu-pop__panel,
  .mobile-menu,
  .order-bar {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: #48484a;
    --line: rgba(0, 0, 0, 0.32);
    --line-strong: #1d1d1f;
    --glass-line: rgba(0, 0, 0, 0.3);
  }

  [data-dark],
  .nav[data-tone="dark"],
  .bento__tile--currency {
    --ink-2: #d1d1d6;
    --line: rgba(255, 255, 255, 0.4);
    --line-strong: #f5f5f7;
  }

  .nav::before {
    background: var(--bg);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-2: #d1d1d6;
    --line: rgba(255, 255, 255, 0.4);
    --line-strong: #f5f5f7;
    --glass-line: rgba(255, 255, 255, 0.3);
  }
}

/* Dark picked with the toggle on a light system. */
@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --ink-2: #d1d1d6;
    --line: rgba(255, 255, 255, 0.4);
    --line-strong: #f5f5f7;
    --glass-line: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================================================================
   Mystic touches: subheadings, the starry background and the battle scene
   ========================================================================== */

/* Subheadings in the same classical small capitals as the titles (a size up, since small
   capitals run smaller than the text font). */
.step__title,
.steps h3,
.bento__copy strong,
.contact__tile h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.step__title {
  font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);
}

.steps h3 {
  font-size: 1.75rem;
}

.bento__copy strong {
  font-size: 1.12em;
}

.contact__tile h3 {
  font-size: 2rem;
}

/* The starry mist behind the whole page (page-fx.js) shows through the grey bands, which are
   a sheer veil of the same grey (--bg-2-veil). In the dark theme the always-dark prices band
   is the page's own black, so the mist runs through it too, and below the hero it fades in
   instead of starting at a hard line. */
:root[data-theme="dark"] .prices[data-dark] {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prices[data-dark] {
    background: transparent;
  }
}

.buy {
  background: linear-gradient(var(--bg), transparent 160px);
}

/* Every band fades in and out like the battle scene instead of cutting in: the grey bands
   (.section--tint, above), the footer's grey, which rises above it (on the home page over the
   last grey band's own fade, which keeps the grey even), and in the light theme the black of
   the hero and the prices band. */
.footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--band-fade);
  background: linear-gradient(transparent, var(--bg-2-veil));
  pointer-events: none;
}

:root[data-theme="light"] .buy {
  background: linear-gradient(#000, transparent var(--band-fade));
}

:root[data-theme="light"] .prices[data-dark] {
  background: linear-gradient(transparent, var(--bg) var(--band-fade), var(--bg) calc(100% - var(--band-fade)), transparent);
}

:root[data-theme="light"] .prices > canvas.page-fx {
  -webkit-mask-image: linear-gradient(transparent, #000 var(--band-fade), #000 calc(100% - var(--band-fade)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--band-fade), #000 calc(100% - var(--band-fade)), transparent);
}

/* The prices band carries the game's own battle scene (nura.biz's banner,
   files.nura.biz/site/images/layouts/index/top_center.jpg, as WebP), dimmed far back so the
   prices stay easy to read, with soft edges so it rises out of the night. On a narrow screen
   it sits behind the title and the rate only. In the light theme the band keeps its black, and
   page-fx.js draws the night sky inside it (data-sky), under the picture. */
.prices {
  position: relative;
  isolation: isolate;
}

.prices::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../../data/art/new-age-battle.webp") center / cover no-repeat;
  opacity: 0.08;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  pointer-events: none;
}

@media (max-width: 959px) {
  .prices::before {
    bottom: auto;
    height: 460px;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 60%, transparent);
  }
}

/* ==========================================================================
   Lord Moon (lord-moon.js): the seller's game portrait in the store coin's
   rim, a bag of gold that shakes, and a speech bubble with a way to buy.
   Bottom right, below the toast; he rises in from under the screen.
   ========================================================================== */

/* Inset enough that the bag, which hangs past his rim, keeps clear of the screen's edges. */
.lord-moon {
  position: fixed;
  z-index: 55;
  right: calc(28px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}

.lord-moon[hidden] {
  display: none;
}

.lord-moon__me,
.lord-moon.is-open .lord-moon__bubble {
  pointer-events: auto;
}

.lord-moon__me {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff2c2 0%, #f3c552 32%, #cf951f 64%, #83530a 100%);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.6), 0 0 26px rgba(245, 189, 58, 0.25);
  cursor: pointer;
  transform: translateY(calc(100% + 48px));
  transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.lord-moon.is-in .lord-moon__me {
  transform: none;
}

.lord-moon__me:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.lord-moon__face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #120e28;
}

/* The bag, held at his lower right; it swings from its cord. */
.lord-moon__bag {
  position: absolute;
  right: -16px;
  bottom: -10px;
  width: 46px;
  height: 46px;
  transform-origin: 50% 34%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}

.lord-moon__bag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lord-moon.is-shaking .lord-moon__bag {
  animation: lord-moon-shake 0.9s ease-in-out;
}

@keyframes lord-moon-shake {
  0%, 100% { rotate: 0deg; }
  12% { rotate: -18deg; }
  26% { rotate: 14deg; }
  40% { rotate: -11deg; }
  54% { rotate: 8deg; }
  68% { rotate: -5deg; }
  82% { rotate: 3deg; }
}

/* Coins that jump out of the bag's mouth while it shakes. */
.lord-moon__coin {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d0, #f3c552 55%, #a86d10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 0;
}

.lord-moon.is-shaking .lord-moon__coin {
  animation: lord-moon-hop 0.9s ease-out both;
}

.lord-moon.is-shaking .lord-moon__coin:nth-of-type(2) {
  --hop: -15px;
  animation-delay: 0.1s;
}

.lord-moon.is-shaking .lord-moon__coin:nth-of-type(3) {
  --hop: 12px;
  animation-delay: 0.2s;
}

@keyframes lord-moon-hop {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  45% { transform: translate(var(--hop, 4px), -26px) rotate(160deg); }
  100% { opacity: 0; transform: translate(calc(var(--hop, 4px) * 1.5), 4px) rotate(300deg); }
}

/* The speech bubble, its tail pointing down at him. */
.lord-moon__bubble {
  position: relative;
  width: min(300px, calc(100vw - 44px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  padding: 14px 16px 16px 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 22px 50px -18px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.92);
  transform-origin: calc(100% - 37px) calc(100% + 14px);
  transition: opacity 0.2s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.lord-moon.is-open .lord-moon__bubble {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0s;
}

.lord-moon__bubble::after {
  content: "";
  position: absolute;
  right: 31px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-bottom-right-radius: 3px;
  background: var(--surface);
  box-shadow: 1px 1px 0 var(--line);
  transform: rotate(45deg);
}

.lord-moon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lord-moon__name {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

:root[data-theme="light"] .lord-moon__name {
  color: #8a5a06;
}

.lord-moon__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.lord-moon__close:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

.lord-moon__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.lord-moon__text {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.lord-moon__cta {
  margin-top: 12px;
}

.lord-moon__cta[hidden] {
  display: none;
}

/* On the store's phone layout he stands above the floating order bar while it shows. */
.lord-moon {
  transition: bottom 0.3s ease;
}

body:has(.order-bar.is-visible) .lord-moon {
  bottom: calc(88px + env(safe-area-inset-bottom));
}

@media (max-width: 599px) {
  .lord-moon__me {
    width: 64px;
    height: 64px;
  }

  .lord-moon__bag {
    right: -13px;
    bottom: -8px;
    width: 40px;
    height: 40px;
  }

  .lord-moon__bubble::after {
    right: 25px;
  }

  .lord-moon__bubble {
    transform-origin: calc(100% - 31px) calc(100% + 14px);
  }
}

/* Without motion he fades in and out and the bag keeps still. */
@media (prefers-reduced-motion: reduce) {
  .lord-moon__me,
  .lord-moon__bubble,
  .lord-moon.is-open .lord-moon__bubble {
    transform: none;
    transition: opacity 0.2s ease, visibility 0s;
  }

  .lord-moon__me {
    opacity: 0;
  }

  .lord-moon.is-in .lord-moon__me {
    opacity: 1;
  }

  .lord-moon.is-shaking .lord-moon__bag,
  .lord-moon.is-shaking .lord-moon__coin {
    animation: none;
  }
}

/* ==========================================================================
   404.html: an address with nothing at it. Lord Moon with his bag, a speech
   bubble that says it's the wrong cup, and the ways back.
   ========================================================================== */

.lost {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 120px);
  padding: calc(var(--nav-total) + 40px) 0 72px;
}

.lost__card {
  display: grid;
  justify-items: center;
  gap: 26px;
  text-align: center;
}

.lost__moon {
  position: relative;
  width: 136px;
  height: 136px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff2c2 0%, #f3c552 32%, #cf951f 64%, #83530a 100%);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6), 0 0 40px rgba(245, 189, 58, 0.25);
  animation: lost-float 5s ease-in-out infinite alternate;
}

.lost__moon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #120e28;
}

.lost__bag {
  position: absolute;
  right: -28px;
  bottom: -16px;
  width: 74px;
  height: 74px;
  transform-origin: 50% 34%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
  animation: lord-moon-shake 0.9s ease-in-out 0.8s 2;
}

.lost__bag svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes lost-float {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

.lost__bubble {
  position: relative;
  max-width: 560px;
  padding: 22px clamp(20px, 4vw, 34px) 28px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 26px 60px -24px rgba(0, 0, 0, 0.5);
}

.lost__bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-top-left-radius: 3px;
  background: var(--surface);
  box-shadow: -1px -1px 0 var(--line);
  transform: rotate(45deg);
}

.lost__name {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

:root[data-theme="light"] .lost__name {
  color: #8a5a06;
}

.lost__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.04;
}

.lost__text {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.lost__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .lost__moon,
  .lost__bag {
    animation: none;
  }
}

/* ==========================================================================
   Micro-interactions: small movements that make the site feel alive. Hover
   effects are for pointers only, and everything rests for reduced motion.
   ========================================================================== */

/* Gold buttons catch the light: a sheen crosses them on hover, and the bar's Buy button every
   few seconds. The sheen stays inside the button's own box (small buttons reach past theirs
   for touch). */
.btn {
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.btn--gold {
  position: relative;
}

.btn--gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) no-repeat;
  background-size: 260% 100%;
  background-position: 170% 0;
  pointer-events: none;
}

.nav__actions .btn--gold::before {
  animation: btn-sheen-every 9s ease-in-out 3s infinite;
}

@keyframes btn-sheen {
  from { background-position: 170% 0; }
  to { background-position: -70% 0; }
}

@keyframes btn-sheen-every {
  0% { background-position: 170% 0; }
  10%, 100% { background-position: -70% 0; }
}

/* Numbers that change give a small nod (SITE.bump). */
.is-bumped {
  animation: value-bump 0.45s var(--ease-out);
}

@keyframes value-bump {
  35% { transform: scale(1.06); }
}

/* The amount tile a buyer picks pops a little. */
.tile:has(input:checked) {
  animation: tile-pick 0.35s var(--ease-out);
}

@keyframes tile-pick {
  40% { transform: scale(1.035); }
}

/* Cards that rise in on scroll also lift under the pointer: the lift is a transform, the rise a
   translate, each with its own timing. */
.bento__tile,
.contact__tile,
.prize,
.reveal-ready .bento__tile[data-reveal],
.reveal-ready .contact__tile[data-reveal],
.reveal-ready .prize[data-reveal] {
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s;
}

.steps__item .frag {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.theme-icon {
  transition: rotate 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: scale(0.97);
  }

  .btn--gold:hover {
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--gold) 85%, transparent);
  }

  .btn--gold:hover::before {
    animation: btn-sheen 0.9s var(--ease-out);
  }

  .bento__tile:hover,
  .contact__tile:hover,
  .prize:hover,
  .steps__item:hover .frag {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.5);
  }

  .prize--final:hover {
    box-shadow: inset 0 0 0 1px rgba(243, 194, 74, 0.6), 0 30px 60px -28px rgba(141, 124, 201, 0.75);
  }

  /* The store's coin flips over; the bar's icons give a nudge; the sun turns a little. */
  .brand:hover .brand__mark {
    animation: coin-flip 0.9s var(--ease-out);
  }

  .menu-pop__button:hover > svg {
    animation: icon-nudge 0.5s var(--ease-out);
  }

  .theme-toggle:hover .theme-icon {
    rotate: 24deg;
  }
}

@keyframes coin-flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

@keyframes icon-nudge {
  30% { transform: rotate(-12deg) scale(1.12); }
  65% { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--gold::before,
  .nav__actions .btn--gold::before,
  .is-bumped,
  .tile:has(input:checked),
  .brand:hover .brand__mark,
  .menu-pop__button:hover > svg {
    animation: none;
  }

  .bento__tile:hover,
  .contact__tile:hover,
  .prize:hover,
  .steps__item:hover .frag,
  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   The carnage bar (carnage-bar.js): a slim strip of red leather across the
   top of every page with the next carnage and its countdown in gold.
   ========================================================================== */

.carnage {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  left: 0;
  height: var(--bar-h);
  color: #fbe9e4;
  font-size: 0.8125rem;
  line-height: 1;
  /* Leather: fine grain, a faint diagonal weave and a deep red, lit from above. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #96201f 0%, #761414 55%, #5e0f0f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.carnage__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}

.carnage__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #f3c24a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.carnage__line {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
}

.carnage__label {
  flex: none;
  color: #f6c94a;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.carnage__label:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carnage__what {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 238, 232, 0.86);
  text-overflow: ellipsis;
}

.carnage__when {
  flex: none;
  color: #ffd76a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

/* While the five-minute entry is open: white words and a pulsing gold dot. */
.carnage.is-open .carnage__when {
  color: #fff;
}

.carnage.is-open .carnage__when::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ffd76a;
  vertical-align: 1px;
  animation: carnage-pulse 1.4s ease-out infinite;
}

@keyframes carnage-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 106, 0.7); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(255, 215, 106, 0); }
}

.carnage__pick {
  position: relative;
  flex: none;
}

.carnage__button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 6px 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #fbe9e4;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.carnage__button:hover {
  background: rgba(0, 0, 0, 0.36);
}

.carnage__button:focus-visible {
  outline: 2px solid #ffd76a;
  outline-offset: 2px;
}

.carnage__button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carnage__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 240px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  animation: menu-in 0.18s var(--ease-out);
}

.carnage__menu[hidden] {
  display: none;
}

.carnage__menu button {
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.carnage__menu button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.carnage__menu button[aria-pressed="true"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--gold);
}

@media (max-width: 519px) {
  .carnage__zone {
    display: none;
  }
}

@media (max-width: 479px) {
  .carnage__icon {
    display: none;
  }

  .carnage__line {
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carnage.is-open .carnage__when::before,
  .carnage__menu {
    animation: none;
  }
}

/* ==========================================================================
   Tips: the small description card for the game's pictures (tips.js). It is
   a popover where the browser has them, so it also shows over an open sheet;
   the popover's own defaults (centred, bordered) are undone here.
   ========================================================================== */

.tip {
  --arrow: 50%;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 80;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  height: auto;
  margin: 0;
  padding: 12px 14px 13px;
  overflow: visible;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -14px rgba(0, 0, 0, 0.45);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.14s ease-out, translate 0.18s var(--ease-out);
}

.tip--below {
  translate: 0 -4px;
}

.tip.is-in {
  opacity: 1;
  translate: 0 0;
}

.tip[hidden] {
  display: none;
}

/* The arrow, pointing at the picture. */
.tip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: var(--arrow);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: inherit;
  box-shadow: 1px 1px 0 var(--line);
  rotate: 45deg;
}

.tip--below::after {
  top: -5px;
  bottom: auto;
  box-shadow: -1px -1px 0 var(--line);
}

.tip__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Item pictures sit on the game's dark slot in both themes; ability icons fill theirs. */
.tip__pic {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: #232328;
}

.tip__pic img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.tip__pic--skill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tip__title {
  display: grid;
  min-width: 0;
}

.tip__title b {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.tip__title small {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* A translated name's original, as the game writes it. */
.tip__title .tip__game {
  font-style: italic;
}

.tip__text {
  margin-top: 8px;
  color: var(--ink-2);
}

.tip__stats {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  font-size: 0.8125rem;
}

.tip__label {
  color: var(--ink-2);
}

.tip__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.tip__foot b {
  color: var(--ink);
  font-weight: 600;
}

.tip__cash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tip__cash img {
  width: 14px;
  height: 14px;
}

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