/* THE STORE'S STYLESHEET (play.tamer.land/store, apps/game/client/store/). The website's look,
   Midnight Astrolabe for the web (docs/site-design.md), restated from apps/site/public/site/site.css:
   the tokens, base, .btn, .btn--special, .panel and the header are COPIED here, never linked, because
   the store lives on the game's host. The fonts are copies of the site's subsets (store/fonts/); the
   pictures are the game's own pipeline art, named by `{{art:...}}` (served through page()). Tokens
   only below the token block; when site.css changes a shared piece, copy the change. */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/store/fonts/cinzel.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/store/fonts/barlow-semi-condensed-400.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/store/fonts/barlow-semi-condensed-600.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Cinzel fallback"; src: local("Times New Roman"), local("Georgia"); size-adjust: 118%; ascent-override: 82%; descent-override: 26%; }
@font-face { font-family: "Barlow fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 88%; ascent-override: 100%; descent-override: 22%; }

/* ------------------------------------------------------------------ tokens (site.css) */
:root {
  --tl-navy-0: #080d1a;
  --tl-navy-1: #0d1321;
  --tl-navy-2: #141c2e;
  --tl-navy-3: #1a2439;
  --tl-navy-4: #223049;
  --tl-plate: #18324c;
  --tl-plate-hi: #1e3c5a;
  --tl-plate-lo: #0f2135;
  --tl-brass-pale: #f4e6c4;
  --tl-brass-hi: #e6cf9c;
  --tl-brass: #d4b57a;
  --tl-brass-dim: #7c6844;
  --tl-brass-rgb: 212, 181, 122;
  --tl-sky: #c9d6f2;
  --tl-sky-rgb: 201, 214, 242;
  --tl-ink-strong: #f4f6fb;
  --tl-ink: #e3e8f1;
  --tl-ink-mute: #a4afc3;
  --tl-ink-faint: #75819a;
  --tl-error: #e0776a;
  --tl-ok: #8fae86;
  --tl-shadow: 1, 3, 10;
  --tl-line: rgba(var(--tl-brass-rgb), .18);
  --tl-line-strong: rgba(var(--tl-brass-rgb), .42);
  --tl-ring: var(--tl-brass-pale);
  --tl-rim: #c4a76f;

  --tl-font-display: "Cinzel", "Cinzel fallback", Georgia, serif;
  --tl-font-body: "Barlow Semi Condensed", "Barlow fallback", "Segoe UI", system-ui, sans-serif;

  --tl-fs-1: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --tl-fs-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  --tl-fs-3: 1.2rem;
  --tl-fs-lede: clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --tl-fs-body: 1rem;
  --tl-fs-small: .875rem;
  --tl-fs-micro: .75rem;
  --tl-track-caps: .16em;
  --tl-track-wide: .26em;

  --tl-1: 4px; --tl-2: 8px; --tl-3: 12px; --tl-4: 16px; --tl-5: 20px; --tl-6: 24px;
  --tl-8: 32px; --tl-10: 40px; --tl-12: 48px; --tl-16: 64px;
  --tl-wrap: 1200px;
  --tl-gutter: clamp(16px, 4vw, 40px);
  --tl-head-h: 64px;
  --tl-radius: 2px;

  /* The game's button sparkle (data/art/ui/btn-spark), the same picture site.css copies. */
  --tl-spark: url("/data/art/ui/btn-spark.4e969877.webp");
  /* The login vista, the site's key art: the store's sky. */
  --tl-vista: url("/data/art/landing/shell-night-1x.533db8a8.webp");

  --tl-ease-out: cubic-bezier(.2, .7, .2, 1);
  --tl-dur-1: 120ms; --tl-dur-2: 200ms; --tl-dur-3: 360ms;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base (site.css) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font: 400 var(--tl-fs-body)/1.6 var(--tl-font-body); color: var(--tl-ink-mute);
  background: var(--tl-navy-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--tl-brass-hi); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tl-brass-pale); }
:focus-visible { outline: 2px solid var(--tl-ring); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--tl-font-display); font-weight: 700; color: var(--tl-ink-strong); line-height: 1.15; letter-spacing: .01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.plate {
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(var(--tl-sky-rgb), .07), transparent 70%),
    radial-gradient(50rem 50rem at -10% 40%, rgba(var(--tl-brass-rgb), .04), transparent 70%),
    var(--tl-navy-0);
}
.site-wrap { width: min(100% - 2 * var(--tl-gutter), var(--tl-wrap)); margin-inline: auto; }
.t-1 { font-size: var(--tl-fs-1); }
.t-3 { font-size: var(--tl-fs-3); letter-spacing: .03em; }
.t-lede { font-size: var(--tl-fs-lede); line-height: 1.55; color: var(--tl-ink); max-width: 52ch; }
.t-meta { font-size: var(--tl-fs-small); color: var(--tl-ink-faint); }
.star {
  flex: none; width: .9em; height: .9em; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* ------------------------------------------------------------------ buttons (site.css) */
.btn {
  --h: 48px; --spark: 14px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--h); padding: 0 calc(var(--h) * .72);
  font: 700 .875rem/1 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; white-space: nowrap;
  color: #fbf4e2; text-decoration: none; text-shadow: 0 1px 2px rgba(var(--tl-shadow), .9);
  background:
    var(--tl-spark) left calc(var(--h) * .3 - var(--spark) / 2) center / var(--spark) var(--spark) no-repeat,
    var(--tl-spark) right calc(var(--h) * .3 - var(--spark) / 2) center / var(--spark) var(--spark) no-repeat,
    linear-gradient(180deg, rgba(var(--tl-sky-rgb), .12), transparent 48%, rgba(var(--tl-shadow), .3)),
    var(--tl-plate);
  border: 1px solid var(--tl-rim); border-radius: var(--tl-radius);
  box-shadow: inset 0 0 0 3px var(--tl-plate-lo), inset 0 0 0 4px rgba(var(--tl-brass-rgb), .32), 0 10px 26px -8px rgba(var(--tl-shadow), .8);
  cursor: pointer; transition: transform var(--tl-dur-1) var(--tl-ease-out);
}
.btn:hover { color: #fff; background-color: var(--tl-plate-hi); border-color: var(--tl-brass-pale); }
.btn:active { transform: translateY(1px); }
.btn--sm { --h: 38px; --spark: 12px; font-size: .75rem; }
.btn--block { display: flex; width: 100%; }
.btn--ghost { background: rgba(var(--tl-shadow), .35); border-color: var(--tl-brass-dim); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(var(--tl-brass-rgb), .14); color: var(--tl-ink); }
.btn--ghost:hover { background-color: rgba(var(--tl-sky-rgb), .06); border-color: var(--tl-brass); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
/* The store's states (CONTRIBUTING: every control has disabled and busy): a dim face that cannot be
   pressed, and busy as a turning brass ring where the label was. */
.btn:disabled { cursor: default; opacity: .45; transform: none; border-color: var(--tl-brass-dim); }
.btn.is-busy { opacity: 1; cursor: progress; color: transparent; text-shadow: none; }
.btn.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(var(--tl-brass-rgb), .3); border-top-color: var(--tl-brass-pale); border-radius: 50%;
  animation: store-spin .8s linear infinite;
}
@keyframes store-spin { to { transform: rotate(1turn); } }

/* The hexagon: the button that sends a player into the game (site.css .btn--special). */
.btn--special {
  --pt: 13px; --ring: 4px; --spark: 12px;
  --hex: polygon(0 50%, var(--pt) 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, var(--pt) 100%);
  --line: linear-gradient(90deg, transparent calc(var(--h) * .21), rgba(var(--tl-brass-rgb), .24) calc(var(--h) * .71), rgba(var(--tl-brass-rgb), .24) calc(100% - var(--h) * .71), transparent calc(100% - var(--h) * .21));
  isolation: isolate;
  padding: 0 calc(var(--h) * .81);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transition: filter var(--tl-dur-1) var(--tl-ease-out);
}
.btn--special::before, .btn--special::after { content: ""; position: absolute; z-index: -1; pointer-events: none; clip-path: var(--hex); }
.btn--special::before { inset: 0; background: var(--tl-rim); }
.btn--special::after {
  inset: 1px;
  background:
    var(--tl-spark) left calc(var(--pt) - 1px) center / var(--spark) var(--spark) no-repeat,
    var(--tl-spark) right calc(var(--pt) - 1px) center / var(--spark) var(--spark) no-repeat,
    var(--line) 0 calc(var(--ring) - 1px) / 100% 1px no-repeat,
    var(--line) 0 calc(100% - var(--ring) + 1px) / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--tl-sky-rgb), .1), transparent 48%, rgba(var(--tl-shadow), .3)),
    var(--tl-plate);
}
.btn--special:hover { color: #fbf4e2; background: none; filter: brightness(1.07); transform: none; }
.btn--special:active { filter: brightness(.94); transform: none; }
.btn--special.btn--sm { --pt: 10px; --ring: 3px; --spark: 10px; }

/* ------------------------------------------------------------------ panel and rule (site.css) */
.panel {
  position: relative; background: linear-gradient(180deg, var(--tl-navy-2), var(--tl-navy-1));
  border: 1px solid var(--tl-line); border-radius: var(--tl-radius);
  box-shadow: inset 0 1px 0 rgba(var(--tl-sky-rgb), .06), 0 24px 48px -24px rgba(var(--tl-shadow), .9);
}
.rule { position: relative; height: 12px; margin: 0; border: 0; color: var(--tl-brass); overflow: visible;
  background: linear-gradient(90deg, transparent, var(--tl-line-strong) 30%, var(--tl-line-strong) 70%, transparent) 50% 50% / 100% 1px no-repeat; }
.rule::after { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; background: currentColor; box-shadow: 0 0 0 6px var(--tl-navy-0);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ------------------------------------------------------------------ header (site.css .site-head) */
.site-head {
  position: sticky; top: 0; z-index: 50; height: var(--tl-head-h);
  background: rgba(8, 13, 26, .78); border-bottom: 1px solid var(--tl-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.site-head > .site-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-6); height: 100%; }
.site-head__logo img { width: 96px; height: 40px; object-fit: contain; }

/* ------------------------------------------------------------------ the store */
/* The sky: the login vista behind the title, fading into the night before the packs. */
.store__sky {
  position: relative; padding-block: clamp(32px, 6vw, 72px) var(--tl-8);
  background:
    linear-gradient(180deg, rgba(8, 13, 26, .35), rgba(8, 13, 26, .55) 55%, var(--tl-navy-0)),
    var(--tl-vista) center 35% / cover no-repeat;
}
.store__head { display: grid; gap: var(--tl-3); }
/* One line under the title wherever it fits (owner, 2026-10-11); a narrow phone still wraps it. */
.store__head .t-lede { max-width: none; }
.store__body { display: grid; gap: var(--tl-6); padding-bottom: var(--tl-12); }

/* Who is buying and what they hold. */
.store__who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-4) var(--tl-8); padding: var(--tl-4) var(--tl-6); }
.store__name { display: grid; gap: 2px; }
.store__label { font: 700 var(--tl-fs-micro)/1.2 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; color: var(--tl-brass); }
.store__name b { font: 600 var(--tl-fs-lede)/1.3 var(--tl-font-body); color: var(--tl-ink-strong); overflow-wrap: anywhere; }
.store__purse { display: grid; justify-items: end; gap: 2px; }
.store__amount { display: inline-flex; align-items: center; gap: var(--tl-2); font: 600 1.6rem/1 var(--tl-font-body); color: var(--tl-ink-strong); font-variant-numeric: tabular-nums; }
.store__amount.is-debt { color: var(--tl-error); }
.coin { width: 1.2em; height: 1.2em; flex: none; }

/* Signed out: one panel, the way in. */
.store__signin { display: grid; justify-items: center; gap: var(--tl-4); padding: var(--tl-8) var(--tl-6); text-align: center; }
.store__doors { display: grid; gap: var(--tl-3); width: min(100%, 22rem); }
.store__doors img { width: 20px; height: 20px; }

/* What a payment is doing: the one line the page answers on, with Check again beside it. */
.store__said { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-3) var(--tl-6); padding: var(--tl-4) var(--tl-6); color: var(--tl-ink); }
.store__said[data-tone="good"] { border-color: rgba(143, 174, 134, .55); color: var(--tl-ok); }
.store__said[data-tone="bad"] { border-color: rgba(224, 119, 106, .55); color: var(--tl-error); }

/* The packs: a coin, the Lumi with its bonus under it, the price on the button. */
.store__till { display: flex; align-items: center; gap: var(--tl-2); }
.store__till .star { color: var(--tl-brass); }
/* The six packs in even rows, never a short last one: two a row on a phone held upright, three on
   a landscape phone or a tablet, all six in one row from 1200 px (owner, 2026-10-11), where a card
   still holds its widest price on the button. */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tl-4); }
@media (min-width: 560px) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .packs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pack { display: grid; justify-items: center; align-content: start; gap: var(--tl-2); padding: var(--tl-6) var(--tl-3) var(--tl-4); text-align: center; }
.pack .coin { width: 48px; height: 48px; }
.pack__lumi { font: 600 1.75rem/1 var(--tl-font-body); color: var(--tl-ink-strong); font-variant-numeric: tabular-nums; }
.pack__bonus { min-height: 1.4em; font-size: var(--tl-fs-small); color: var(--tl-brass-hi); }
.pack__bonus.is-plain { color: var(--tl-ink-faint); }
.pack .btn { align-self: stretch; padding-inline: 26px; margin-top: var(--tl-2); font-family: var(--tl-font-body); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-transform: none; font-variant-numeric: tabular-nums; }

/* The price view: IDR or an approximate USD, the player's pick. The pressed one is lit. */
.store__view { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--tl-2); }
.store__view .btn { --h: 32px; padding-inline: var(--tl-4); background: rgba(var(--tl-shadow), .35); }
.store__view .btn[aria-pressed="true"] { border-color: var(--tl-brass-pale); color: var(--tl-brass-pale); background-color: var(--tl-plate); }
.pack__usd { font: 600 1.15rem/1.2 var(--tl-font-body); color: var(--tl-brass-pale); font-variant-numeric: tabular-nums; }

.store__notes { display: grid; gap: var(--tl-2); }
.store__note { display: flex; align-items: baseline; gap: var(--tl-2); }
.store__note .star { color: var(--tl-brass); transform: translateY(1px); }

/* Landscape phones (844x390 and down): the short height is the constraint. A slimmer bar, the sky
   no taller than the title, tighter packs. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --tl-head-h: 52px; }
  .site-head__logo img { width: 80px; height: 33px; }
  .store__sky { padding-block: var(--tl-3); }
  .store__head .t-1 { font-size: 1.5rem; }
  .store__head .t-lede { display: none; }
  .store__body { gap: var(--tl-3); }
  .store__who { padding: var(--tl-2) var(--tl-4); }
  .store__amount { font-size: 1.3rem; }
  .packs { gap: var(--tl-3); }
  .pack { padding: var(--tl-3); gap: var(--tl-1); }
  .pack .coin { width: 36px; height: 36px; }
  .pack__lumi { font-size: 1.4rem; }
}

/* ------------------------------------------------------------------ motion (site.css) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } .btn--special::before, .btn--special::after { content: none; } }