/* Ragnarok 3: Genesis account console v2, Genesis brand design (port of the operator's design prototype, 2026-10-19).
   Brand: navy #0f2550, blue #1b49ae, gold #d4bea5 / #f6cd87, paper #f7f5f0, ink #1a2842; Orpheus Pro + Indecisive Sans.
   Prototype colours that fail WCAG AA on paper were replaced (PORT-MAP section 10); no text below 12px (11px uppercase eyebrows).
   No inline styles anywhere (strict CSP: style-src 'self'). Art and fonts are self-hosted (img-src / font-src 'self'). */

@font-face { font-family: 'Orpheus'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Orpheus-Regular.56cdb1dd2e.otf') format('opentype'); }
@font-face { font-family: 'Indecisive'; font-style: normal; font-weight: 400; font-display: swap; src: url('./Indecisive-Regular.3cf8266029.woff2') format('woff2'); }
@font-face { font-family: 'Indecisive'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('./Indecisive-Bold.a0fb9e59bd.woff2') format('woff2'); }
/* No Orpheus Italic ships (operator decision): the italic <em> and the seal "G" use the browser's slant of the regular face.
   Noto stays as the fallback face (OFL): it is only fetched for a glyph the brand faces lack. */
@font-face {
  font-family: 'Noto Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('./NotoSans-latin-wght400-600.51ca196f49.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('./NotoSerif-latin-wght500-700.4628145623.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --navy: #0f2550;
  --blue: #1b49ae;
  --blue-hover: #123c9c;
  --blue-ink: #16366a;
  --blue-soft: #eef2fa;
  --gold: #d4bea5;
  --gold-bright: #f6cd87;
  --gold-text: #7a5f2e;      /* gold text on paper, 5.5:1 */
  --gold-text-deep: #5c4719; /* gold text over the hero and sign-in art: 4.5:1 or better on the worst pixel */
  --gold-icon: #a38b68;      /* decorative icons only */
  --gold-line: #d8caaa;
  --gold-frame: #b5a57e54;
  --ink: #1a2842;
  --ink-2: #293d5a;
  --muted: #5e6577;          /* 5.35:1 on paper */
  --paper: #f7f5f0;
  --panel: #fffefa;
  --panel-2: #fffdf8;
  --white: #ffffff;
  --line: #e4e1d9;
  --line-card: #dedbcf;
  --line-soft: #eeece7;
  --line-input: #8d8a80;     /* 3.4:1 against white (non-text contrast) */
  --on-navy: #ccd4e6;
  --on-blue: #e2e9fc;
  --ok-fg: #357752;
  --ok-bg: #edf3e6;
  --ok-line: #c2d3b8;
  --credit: #3f6b3a;
  --wait-fg: #7a5418;
  --wait-bg: #fbf4e6;
  --wait-line: #e2cfa4;
  --err-fg: #9c3b3b;
  --err-bg: #fbecea;
  --err-line: #e6b9b3;
  --focus: #9a7535;          /* 3.9:1 on paper */
  --serif: 'Orpheus', 'Noto Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Indecisive', 'Noto Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --gutter: 34px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, button[aria-disabled='true'] { cursor: not-allowed; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; }
p { margin: 0; }
[hidden] { display: none !important; }
svg.icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.5; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-navy :focus-visible, .site-header :focus-visible, .account-aside :focus-visible { outline-color: var(--gold-bright); }
/* rows that scroll sideways clip anything outside their box (overflow-x:auto clips Y too): the ring sits inside the link there */
.category-tabs .cat-tab:focus-visible, .header-nav a:focus-visible, .account-nav a:focus-visible { outline-offset: -3px; }
/* the sign-in page puts links over the pale sky art: navy keeps the ring above 3:1 there */
.auth-page :focus-visible { outline-color: var(--navy); }

.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;
}
.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 100; padding: 12px 16px;
  background: var(--panel); color: var(--blue); border: 1px solid var(--gold-line); font-weight: 600;
}
.skip-link:focus { top: 8px; }

.serif { font-family: var(--serif); }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; font-weight: 600; color: var(--gold-text);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; flex: 0 0 auto; }
.eyebrow.plain::before { display: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.fine { font-size: 12px; line-height: 1.65; color: var(--muted); }
.form-stack { display: flex; flex-direction: column; gap: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border: 1px solid #cbd1db; background: #fcfcfa; color: #294b85;
  font-size: 13px; letter-spacing: 0.01em; text-decoration: none; transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.btn svg.icon { width: 16px; height: 16px; }
.btn:hover { background: #edf1f8; color: var(--blue-hover); }
.btn-primary { color: var(--white); background: var(--blue); border-color: #244c9a; box-shadow: inset 0 0 0 3px #ffffff0a; font-weight: 600; }
.btn-primary:hover { color: var(--white); background: var(--blue-hover); transform: translateY(-1px); }
.btn-primary:disabled, .btn-primary[aria-disabled='true'] { background: #8fa0c6; border-color: #8fa0c6; color: #f6f7fb; transform: none; }
.btn-outline { color: #294b85; border-color: #cbd1db; background: #fcfcfa; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: 0.6; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  border: 1px solid transparent; background: transparent; color: #6f7686;
}
.btn-icon:hover { color: var(--blue); border-color: var(--line); }
.btn-icon.on-navy { color: var(--white); border-color: #ffffff40; }
.text-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px;
  background: none; border: 0; color: var(--blue); font-size: 13px; text-decoration: none;
}
.text-button svg.icon { width: 14px; height: 14px; }
.text-button:hover { text-decoration: underline; color: var(--blue-hover); }
.text-button:disabled { color: var(--muted); text-decoration: none; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- form fields ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .field-row label { font-size: 13px; color: #4a5872; }
.field-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.field-row a { font-size: 13px; display: inline-flex; align-items: center; min-height: 44px; }
.input {
  min-height: 46px; padding: 0 13px; font-size: 15px; border: 1px solid var(--line-input); border-radius: 0;
  background: var(--white); color: var(--ink); width: 100%;
}
.input:focus-visible { border-color: var(--blue); outline-offset: 2px; }
.input[aria-invalid='true'] { border-color: var(--err-fg); }
.input-code { letter-spacing: 0.08em; }
.input-wrap { position: relative; display: block; }
.input-wrap .input { padding-right: 42px; }
.input-wrap svg.icon { position: absolute; right: 13px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: #a8916f; pointer-events: none; stroke-width: 1.2; }
.hint { font-size: 12px; line-height: 1.6; color: var(--muted); }
.field-error { font-size: 13px; line-height: 1.55; color: var(--err-fg); }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); min-height: 44px; }
.check input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); flex: 0 0 auto; }

.notice { padding: 13px 15px; font-size: 13px; line-height: 1.6; border: 1px solid var(--line); background: var(--white); }
.notice-error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.notice-wait { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait-fg); }
.notice strong { font-weight: 600; }
.notice p + p { margin-top: 6px; }

/* ---------- demo banner / toasts ---------- */
.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px;
  padding: 8px 16px; background: var(--wait-bg); color: var(--wait-fg); border-bottom: 1px solid var(--wait-line);
  font-size: 13px; text-align: center; position: relative; z-index: 20;
}
.demo-banner a { color: var(--wait-fg); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.toasts { position: fixed; z-index: 90; right: 24px; bottom: 24px; display: grid; gap: 10px; width: min(420px, calc(100% - 48px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 15px 18px; background: #fffdf7; color: var(--ink);
  border: 1px solid #cfbf9b; box-shadow: 0 7px 30px #0f255026; font-size: 13px; line-height: 1.55; animation: toast-in 0.2s;
}
.toast svg.icon { width: 16px; height: 16px; margin-top: 2px; color: var(--ok-fg); }
.toast-error { border-color: #c9988e; }
.toast-error svg.icon { color: var(--err-fg); }
@media (max-width: 480px) { .toasts { left: 16px; right: 16px; bottom: 16px; width: auto; } }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- shell: header / top line / footer ---------- */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell > main { flex: 1 0 auto; }
.site-header {
  min-height: 102px; background: var(--navy) url('./blue-banner.16577f9919.webp') center 46% / cover no-repeat;
  border-bottom: 1px solid #c9ae786b; color: var(--white); position: relative; z-index: 5;
}
.header-inner { max-width: 1336px; margin: 0 auto; padding: 0 38px; min-height: 102px; display: flex; align-items: center; gap: 44px; }
.brand { display: flex; align-items: center; justify-content: center; flex: 0 0 154px; height: 96px; text-decoration: none; }
.brand-logo {
  display: block; width: 154px; height: 96px;
  background: url('./logo.3dcb814253.webp') center / contain no-repeat; filter: drop-shadow(0 2px 5px #0004);
}
.header-nav { display: flex; align-self: stretch; gap: 14px; align-items: stretch; }
.header-nav a {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px;
  font-size: 14px; color: var(--on-navy); white-space: nowrap; text-decoration: none;
}
.header-nav a:hover { color: var(--white); }
.header-nav a[aria-current='page'] { color: var(--gold-bright); }
.header-nav a[aria-current='page']::after { content: ''; position: absolute; height: 2px; left: 8px; right: 8px; bottom: 24px; background: var(--gold-bright); }
.header-actions { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.header-wallet { display: flex; align-items: center; gap: 11px; min-height: 44px; color: var(--white); text-decoration: none; }
.header-wallet:hover { color: var(--white); }
.header-wallet svg.icon { color: var(--gold-bright); width: 18px; height: 18px; }
.header-wallet small { display: block; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-blue); margin-bottom: 2px; }
.header-wallet strong { font-weight: 400; font-size: 17px; font-family: var(--serif); }
.header-wallet .unit { font-size: 12px; color: var(--on-blue); }
.header-divider { width: 1px; height: 30px; background: #ffffff2e; }
.avatar-button {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #ccbb975e; background: #ffffff11; color: #edd4ad;
}
.avatar-button:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.signout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 6px;
  background: none; border: 0; color: #c3cee4; font-size: 13px;
}
.signout:hover { color: var(--white); }

.main-wrap { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 var(--gutter); }
.page-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; font-size: 12px; color: var(--muted); }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb svg.icon { width: 13px; height: 13px; color: #9d865e; }
.breadcrumb .here { color: var(--ink); }
.back-website { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.back-website svg.icon { width: 14px; height: 14px; }
.back-website:hover { color: var(--blue); }

.site-footer {
  width: 100%; max-width: 1260px; margin: 0 auto; padding: 22px var(--gutter) 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line);
}
.footer-title { display: block; font-family: var(--serif); font-size: 16px; color: #3f4b63; margin-bottom: 3px; }

/* ---------- store: hero ---------- */
.store-main { padding-bottom: 48px; }
.hero {
  position: relative; min-height: 334px; overflow: hidden; isolation: isolate;
  border: 1px solid #c6d3d9; background: #d6e9ee url('./sky.9b11a5341c.webp') center 38% / cover no-repeat;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #f1f4ed 0%, #eef3e9ed 29%, #e9f3e39c 49%, transparent 75%);
}
.hero .eyebrow { color: var(--gold-text-deep); }
.hero::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-frame); pointer-events: none; z-index: 1; }
.hero-art {
  position: absolute; z-index: -2; width: 690px; height: 727px; right: -38px; bottom: -70px;
  background: url('./ranger.53cd0bf60b.webp') right bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000);
}
.hero-mark {
  position: absolute; right: 21px; top: 19px; z-index: 2; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #3d5c43;
  background: #f9fff0d9; border: 1px solid #b6c7a366;
}
.hero-mark::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #6a8c52; }
.hero-copy { position: relative; z-index: 2; padding: 37px 44px 34px; max-width: 640px; }
.hero h1 { font-size: 59px; line-height: 1.02; letter-spacing: -1.6px; margin: 17px 0 16px; color: var(--blue-ink); }
.hero h1 em, .auth-welcome h1 em { font-style: italic; }
.hero-lead { color: #4b5a62; line-height: 1.65; font-size: 14px; max-width: 340px; }
.hero-bottom { display: flex; align-items: center; gap: 8px; margin-top: 21px; font-size: 13px; color: #3f5a46; }
.hero-bottom svg.icon { width: 16px; height: 16px; }

/* wallet strip, attached under the hero */
.wallet-strip {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; padding: 23px 29px;
  background: #fffdf9; border: 1px solid var(--line-card); border-top: 0; box-shadow: 0 8px 22px #182e4b05;
}
.wallet-strip.has-topup { grid-template-columns: 1fr 1.2fr auto; }
.wallet-summary { display: flex; gap: 15px; align-items: center; min-width: 0; }
.coin-medallion {
  position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #dac391; color: #b18b42; background: radial-gradient(#fff4d6, #f4eddd);
}
.coin-medallion::before { content: ''; position: absolute; inset: 4px; border: 1px solid #dfc895; border-radius: 50%; }
.coin-medallion svg.icon { width: 18px; height: 18px; }
.wallet-label { font-size: 11px; color: #5e6577; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 6px; }
.wallet-amount { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.wallet-amount strong { font: 30px/1 var(--serif); color: #183e88; }
.wallet-amount span { font-size: 13px; color: var(--muted); }
.wallet-copy { min-width: 0; }
.wallet-note { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
/* VIP progress (the VIP Shop's wallet panel): the native <progress>, drawn in the brand gold and blue */
.vip-progress {
  display: block; width: 100%; max-width: 280px; height: 8px; margin-top: 10px;
  -webkit-appearance: none; appearance: none; border: 1px solid #dac391; background: #f4eddd; color: var(--blue);
}
.vip-progress::-webkit-progress-bar { background: #f4eddd; }
.vip-progress::-webkit-progress-value { background: var(--blue); }
.vip-progress::-moz-progress-bar { background: var(--blue); }
.recipient-summary { display: flex; align-items: center; gap: 13px; padding-left: 30px; border-left: 1px solid var(--line); min-width: 0; }
.portrait {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%;
  background: #f0eee6; color: #7d6747; border: 1px solid #ded4bb; font: 21px/1 var(--serif);
}
.recipient-copy { min-width: 0; flex: 1 1 auto; }
.recipient-copy strong { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.recipient-copy p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.recipient-summary .text-button { margin-left: auto; flex: 0 0 auto; }

/* section head + filters */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 40px 0 22px; }
.section-head h2 { font-size: 31px; line-height: 1.15; color: #19396c; }
.section-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.section-tools { display: flex; gap: 18px; align-items: center; flex: 0 0 auto; }
.mail-note { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.mail-note svg.icon { width: 16px; height: 16px; color: var(--gold-icon); }
/* shop buttons (Main Shop GP · Bonus Shop BP · VIP Shop) above the category row: the active shop is .btn-primary, the others
   .btn-outline; the switch cross-fades the wallet panel and the catalogue (.xfade below, none under reduced motion) */
.shop-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.shop-btn { min-width: 150px; }
.shop-btn .shop-unit { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; padding: 1px 6px; border: 1px solid currentColor; opacity: 0.85; }
.shop-btn.btn-outline[aria-pressed='false']:hover { border-color: var(--blue); }
/* cross-fade (dom.js crossFader): .xfade stacks the live panel and an inert copy of the outgoing one in one grid cell; the copy
   (.xfade-ghost, on top) fades out while the live panel fades in. .xfade-hold hides the live panel while the copy stays fully
   visible (a shop still loading). The cell is as tall as the taller of the two until the copy is removed. */
.xfade { display: grid; min-width: 0; }
.xfade > * { grid-area: 1 / 1; min-width: 0; }
.xfade-ghost { z-index: 1; pointer-events: none; }
.xfade-ghost.xfade-out { animation: xfade-out 0.18s ease-out forwards; }
.xfade-in { animation: xfade-in 0.18s ease-out; }
.xfade-hold { opacity: 0; pointer-events: none; }
@keyframes xfade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes xfade-in { from { opacity: 0; } to { opacity: 1; } }
.filters-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line-card); margin-bottom: 24px; }
.category-tabs { display: flex; gap: 12px; margin-left: -6px; overflow-x: auto; scrollbar-width: thin; min-width: 0; } /* the 6px link padding keeps the inset focus ring off the text; the margin keeps the first label on the grid edge */
.cat-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 47px; padding: 0 6px 2px;
  white-space: nowrap; background: none; border: 0; font-size: 13px; color: var(--muted);
}
.cat-tab:hover { color: var(--blue); }
.cat-tab[aria-pressed='true'] { color: var(--blue); font-weight: 600; }
.cat-tab[aria-pressed='true']::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--blue); }
.tab-count { background: #e9e7df; color: #4f5566; padding: 1px 6px; font-size: 12px; font-weight: 400; }
.cat-tab[aria-pressed='true'] .tab-count { background: #e4eaf7; color: var(--blue); }
.store-search { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; flex: 0 0 auto; margin-left: auto; } /* right edge also when the shop has no categories */
.store-search svg.icon { width: 16px; height: 16px; color: #6f7686; }
.store-search input {
  width: 170px; min-height: 44px; padding: 6px 2px; border: 0; border-bottom: 1px solid transparent; background: none;
  font-size: 13px; color: var(--ink); border-radius: 0;
}
.store-search input:focus-visible { outline-offset: 2px; }
.store-search input::placeholder { color: var(--muted); opacity: 1; }
.result-count { font-size: 13px; color: var(--muted); margin: -10px 0 16px; }

/* product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 21px; }
.product-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line-card); background: var(--panel); transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 9px 25px #142c4810; }
.product-art {
  position: relative; height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 56%, #fffdf5 0%, #f1efe3 49%, #e9e8dd 100%); border-bottom: 1px solid #e8e2d2;
}
.product-art::before { content: ''; position: absolute; width: 140px; height: 140px; border: 1px solid #c8b88633; transform: rotate(45deg); }
.product-art::after { content: ''; position: absolute; width: 110px; height: 110px; border: 1px solid #c8b8865e; transform: rotate(45deg); }
.product-card:nth-child(2n) .product-art { background: radial-gradient(ellipse, #fffaf0, #eeebe2 65%, #e4e4df); }
.product-card:nth-child(3n) .product-art { background: radial-gradient(ellipse, #f7f9ff, #e7edf4 65%, #dfe6ee); }
.product-art > img { position: relative; z-index: 1; width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 7px #514b3425); transition: transform 0.25s; }
.product-art > svg.icon { position: relative; z-index: 1; width: 52px; height: 52px; color: #a99c7d; stroke-width: 1; }
.product-card:hover .product-art > img { transform: translateY(-3px) rotate(-3deg); }
/* 2026-10-22 card preview: 2-3 bare item icons stacked like a hand of cards (operator: no boxes behind them; one icon
   stays the plain .product-art > img). DOM order = item order: the first item is in front; with 2 the second sits left and
   turns left; with 3 the 2nd sits behind on the left, the 3rd on the right. Static classes only (CSP style-src 'self'). */
.art-stack { position: relative; z-index: 1; width: 200px; height: 110px; transition: transform 0.25s; }
.art-tile { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; display: flex; align-items: center; justify-content: center; }
.art-tile img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 8px 7px #514b3425); }
.art-tile > svg.icon { width: 52px; height: 52px; color: #a99c7d; stroke-width: 1; }
.fan-2 .art-tile:nth-child(1) { z-index: 2; transform: translateX(16px); }
.fan-2 .art-tile:nth-child(2) { z-index: 1; transform: translateX(-30px) rotate(-10deg) scale(0.82); }
.fan-3 .art-tile:nth-child(1) { z-index: 3; }
.fan-3 .art-tile:nth-child(2) { z-index: 2; transform: translateX(-50px) rotate(-12deg) scale(0.8); }
.fan-3 .art-tile:nth-child(3) { z-index: 1; transform: translateX(50px) rotate(12deg) scale(0.8); }
.product-card:hover .art-stack { transform: translateY(-3px) rotate(-2deg); }
.product-tag {
  position: absolute; left: 13px; top: 13px; z-index: 2; padding: 4px 8px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: #6e5530; background: #fffcf0e6; border: 1px solid #bda57880;
}
.product-tag.free { color: #2f5e45; background: #eef7ed; border-color: #bcd2bd; }
.product-tag.gold { color: #6b4a12; background: #fdf0d6; border-color: #d9b878; }
.art-star { position: absolute; right: 14px; bottom: 10px; z-index: 1; color: #b0a17d; }
.art-star svg.icon { width: 12px; height: 12px; stroke-width: 1; }
.product-info { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 18px 16px; }
.product-info h3 { font-size: 23px; line-height: 1.12; color: var(--ink-2); }
.contents { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 9px; }
/* in-game package (Monthly Card, Battle Pass) attached to a Main Shop product: gold text on paper (5.5:1) */
.product-package { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--gold-text); margin-top: 9px; }
.product-package svg.icon { width: 14px; height: 14px; margin-top: 3px; color: var(--gold-icon); }
.product-choose { font-size: 13px; line-height: 1.5; color: var(--gold-text); margin-top: 9px; }
.product-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 16px 0 15px; flex-wrap: wrap; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 25px/1.1 var(--serif); color: var(--gold-text); }
.price strong { font-weight: 400; }
.price small { font: 12px var(--sans); color: var(--muted); }
.price.free { color: var(--ok-fg); }
.price-was { font: 13px var(--sans); color: var(--muted); text-decoration: line-through; }
.product-limit { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: right; max-width: 60%; }
.card-cta { margin-top: auto; width: 100%; min-height: 44px; }
/* Bonus / VIP cards: why the button is off (BP short, VIP level, claimed in the window) */
.card-reason { font-size: 12px; line-height: 1.45; color: var(--wait-fg); margin: -4px 0 12px; }
.shop-card.is-locked .product-art > img, .shop-card.is-locked .product-art > svg.icon, .shop-card.is-locked .art-stack { filter: grayscale(1); opacity: 0.55; }
.shop-card.is-claimed .product-art > img, .shop-card.is-claimed .product-art > svg.icon, .shop-card.is-claimed .art-stack { opacity: 0.7; }

.store-message {
  grid-column: 1 / -1; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 35px; text-align: center; border: 1px solid var(--line); background: #fffdfa;
}
.store-message > svg.icon { width: 38px; height: 38px; color: #a98a4f; stroke-width: 1.2; margin-bottom: 8px; }
.store-message h3 { font-size: 30px; color: var(--navy); }
.store-message p { font-size: 14px; color: var(--muted); max-width: 420px; line-height: 1.7; margin-bottom: 10px; }
.no-products { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; }
.skeleton {
  min-height: 380px; border: 1px solid var(--line); background: linear-gradient(90deg, #efede6, #faf8f3, #efede6);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.journey-band {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 30px; padding: 23px 0;
  border-top: 1px solid var(--line-card); border-bottom: 1px solid var(--line-card);
}
.journey-note { display: flex; gap: 13px; justify-content: center; align-items: center; padding: 0 15px; }
.journey-note + .journey-note { border-left: 1px solid var(--line-card); }
.journey-note svg.icon { width: 25px; height: 25px; color: #a88d59; stroke-width: 1.2; }
.journey-note strong { display: block; font-size: 14px; font-weight: 600; }
.journey-note p { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ---------- panels + tables ---------- */
.panel { border: 1px solid var(--line); background: var(--white); box-shadow: 0 3px 12px #14264c03; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; padding: 22px 23px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 25px; color: var(--navy); margin-top: 6px; }
.panel-head .note { font-size: 13px; color: var(--muted); max-width: 460px; }
.panel-foot { padding: 6px 23px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.panel-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.table th {
  padding: 13px 21px; background: #fbfaf8; border-bottom: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--gold-text);
}
.table td { padding: 15px 21px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table .time { color: var(--muted); white-space: nowrap; font-size: 13px; }
.account-history-event { display: flex; gap: 12px; align-items: center; min-width: 0; }
.account-event-icon {
  width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
  background: #f5f6f9; border: 1px solid #e2e5ec; color: #5f6f8f;
}
.account-event-icon svg.icon { width: 15px; height: 15px; stroke-width: 1.3; }
.event-copy { min-width: 0; }
.event-copy strong { display: block; font-size: 14px; color: #33415a; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.event-copy small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.account-points { font-family: var(--serif); font-size: 17px; color: #3f4b63; }
.account-points.is-credit { color: var(--credit); }
.table-empty { padding: 28px 23px; color: var(--muted); font-size: 14px; }
.table-empty .btn { margin-top: 12px; }
.account-empty { text-align: center; padding: 42px 25px; color: var(--muted); }
.account-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border: 1px solid #e5e1da; color: #a8916f; }
.account-empty > span svg.icon { width: 19px; height: 19px; stroke-width: 1.2; }
.account-empty h3 { font-size: 27px; color: var(--navy); margin-bottom: 6px; }
.account-empty p { font-size: 13px; line-height: 1.7; max-width: 420px; margin: 0 auto; }
.account-history-count { font-size: 12px; color: var(--muted); padding: 13px 23px; border-top: 1px solid var(--line-soft); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; white-space: nowrap; background: #f1f3f6; color: var(--muted); }
.status-ok { background: var(--ok-bg); color: var(--ok-fg); }

/* ---------- dialogs ---------- */
dialog.dlg {
  width: min(560px, calc(100% - 30px)); max-height: calc(100% - 40px); overflow: auto; padding: 0; margin: auto;
  background: var(--panel-2); color: var(--ink); border: 1px solid #d1bc94; box-shadow: 0 20px 120px #06163566;
}
dialog.dlg::backdrop { background: #081b42a1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg-inner { display: flex; flex-direction: column; }
.dlg-head { display: flex; align-items: center; gap: 16px; padding: 24px 24px 20px 28px; border-bottom: 1px solid var(--line); }
.icon-frame { display: grid; place-items: center; }
.dlg-head .icon-frame { width: 65px; height: 65px; flex: 0 0 65px; background: #eee9dc; border: 1px solid #d9caa9; }
.dlg-head .icon-frame img { width: 54px; height: 54px; object-fit: contain; }
.dlg-head .icon-frame svg.icon { width: 34px; height: 34px; color: #a99c7d; }
.dlg-title { flex: 1 1 auto; min-width: 0; }
.dlg-title h2 { font-size: 29px; line-height: 1.12; margin-top: 8px; color: var(--navy); overflow-wrap: anywhere; }
.dlg-head .btn-icon { align-self: flex-start; }
.dlg-body { padding: 22px 28px; display: flex; flex-direction: column; gap: 22px; }
.dlg-foot { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px; background: #f7f5ed; border-top: 1px solid var(--line); }
.dlg-foot .btn { min-width: 120px; }
.dlg-foot .btn-icon { margin-right: auto; width: 44px; height: 44px; }
.dlg-reason { padding: 0 28px; }
.dlg-reason .hint { color: var(--wait-fg); font-size: 13px; padding-bottom: 12px; }
.sub-h { font: 600 13px var(--sans); margin: 0 0 8px; color: #33415a; }
.gets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.gets li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ece8de; font-size: 14px; }
.gets img, .gets .ph, .gets svg.icon { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; color: #a99c7d; }
.gets .nm { flex: 1 1 auto; min-width: 0; }
.gets li.pkg .nm { color: var(--gold-text); }
.gets strong { font-weight: 400; color: #4f5566; white-space: nowrap; }
.gets .pick-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.gets .pick-row input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--blue); }
.gets .pick-row:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.gets li.is-off { opacity: 0.5; }
.gets li.is-off .pick-row { cursor: not-allowed; }
.choose-box { margin-top: 14px; }
.gets li.owned .nm, .gets li.owned strong { color: var(--muted); text-decoration: line-through; }
.gets .obtained { display: inline-block; margin-left: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ok-fg); }
.pity { padding-top: 12px; }
.pity progress {
  display: block; width: 100%; height: 8px;
  -webkit-appearance: none; appearance: none; border: 1px solid #dac391; background: #f4eddd; color: var(--blue);
}
.pity progress::-webkit-progress-bar { background: #f4eddd; }
.pity progress::-webkit-progress-value { background: var(--blue); }
.pity progress::-moz-progress-bar { background: var(--blue); }
.pity .hint { margin: 6px 0 0; }
.card-pity { padding: 0 0 14px; }
.card-pity[hidden] { display: none; }
.rates-note { margin: 10px 0 0; }
.details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--blue); }
.details-body { font-size: 13px; line-height: 1.65; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }

.chars { margin: 0; padding: 0; border: 0; min-width: 0; }
.chars legend { font: 600 13px var(--sans); margin-bottom: 10px; padding: 0; color: #33415a; }
.char-list { display: flex; flex-direction: column; gap: 10px; }
.char-opt {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px 15px;
  background: var(--white); border: 1px solid #dedbd0; cursor: pointer;
}
.char-opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--blue); }
.char-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.char-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.char-opt:has(input:disabled) { cursor: not-allowed; background: #f6f5f1; }
.char-opt input:checked ~ .char-copy strong { color: var(--blue); }
.char-copy { flex: 1 1 auto; min-width: 0; }
.char-copy strong { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.char-copy small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.avail { flex: 0 0 auto; font-size: 12px; padding: 2px 8px; white-space: nowrap; }
.avail.is-ok { color: var(--ok-fg); background: var(--ok-bg); }
.avail.is-off { color: var(--muted); background: #eeece6; }
.chars-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 10px; }
.chars-foot .hint { flex: 1 1 220px; }

.gift-panel { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.gift-field { display: flex; flex-direction: column; gap: 6px; }
.gift-field label, .gift-labelrow label { font-weight: 600; color: #33415a; }
.gift-field input[type=text], .gift-field select, .gift-field textarea { min-height: 44px; padding: 8px 10px; border: 1px solid #c9c4b6; background: var(--white); font: inherit; }
.gift-field textarea { resize: vertical; }
.gift-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gift-count { font-variant-numeric: tabular-nums; }
.gift-lookup { display: flex; gap: 8px; align-items: stretch; }
.gift-lookup input { flex: 1 1 auto; min-width: 0; }
.gift-lookup .btn-icon { flex: 0 0 auto; width: 44px; height: 44px; }
.gift-found { margin: 0; font-weight: 700; color: var(--blue); }
.gift-found:empty, .gift-elig:empty, .gift-err:empty { display: none; }
.gift-elig { margin: 0; color: #4f5566; }
.gift-elig.neg, .gift-err, .gift-found.neg { margin: 0; color: var(--err-fg); }
.gift-confirm { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.gift-confirm input { width: 18px; height: 18px; }
.gift-field input[aria-invalid='true'], .gift-field select[aria-invalid='true'], .gift-field textarea[aria-invalid='true'] { border-color: var(--err-fg); }
.gift-confirm input[aria-invalid='true'] { outline: 2px solid var(--err-fg); outline-offset: 2px; }
.btn-icon.is-on { color: var(--blue); border-color: var(--blue); background: #f1f0e9; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.qty-row .lbl { font-weight: 600; color: #33415a; }
.qty-row .lbl .hint { font-weight: 400; margin-left: 6px; }
.stepper { display: flex; align-items: center; border: 1px solid #c9c4b6; background: var(--white); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 19px; color: var(--blue); }
.stepper button:disabled { color: #b5b9c4; }
.stepper output { min-width: 36px; text-align: center; font-size: 15px; font-weight: 600; }
.sum { margin: 0; padding: 15px 17px; background: #f1f0e9; border: 1px solid #e2ddd1; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-size: 14px; }
.sum dt { color: #4f5566; }
.sum dd { margin: 0; text-align: right; }
.sum .total { font-family: var(--serif); font-size: 17px; color: var(--gold-text); }
.sum dt.strong, .sum dd.strong { padding-top: 10px; border-top: 1px solid #dcd5c5; font-weight: 600; color: var(--blue); }
.sum .neg { color: var(--err-fg) !important; }
.result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 16px 0 8px; }
.result-seal {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 8px;
  border: 1px solid var(--ok-line); background: var(--ok-bg); color: #4e7a42; outline: 1px solid #c2d3b866; outline-offset: 5px;
}
.result-seal svg.icon { width: 30px; height: 30px; stroke-width: 1.3; }
.result-wait .result-seal { border-color: #dcc79b; background: #faf3e2; color: #8a6420; outline-color: #dcc79b66; }
.result .eyebrow { justify-content: center; }
.result p.eyebrow { font-size: 11px; line-height: 1.5; color: var(--gold-text); max-width: none; }
.result h3 { font-size: 32px; color: var(--navy); line-height: 1.15; }
.result p { font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 400px; }

/* ---------- sign in / reset (auth page) ---------- */
.auth-page {
  position: relative; isolation: isolate; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 120px 30px 70px; background: #e8f1ee url('./sky.9b11a5341c.webp') center / cover no-repeat; overflow: hidden;
}
.auth-art {
  position: fixed; z-index: 0; bottom: -12%; left: -8%; height: 120vh; aspect-ratio: 1920 / 2024; max-width: 100vw; pointer-events: none;
  background: url('./ranger.53cd0bf60b.webp') left bottom / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, #000 65%, transparent 90%);
  mask-image: linear-gradient(90deg, #000, #000 65%, transparent 90%);
}
.auth-page::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #eef5e6a3, #edf3e46b 45%, #dbe7e5f5 85%); }
.auth-header { position: absolute; z-index: 3; top: 22px; left: 42px; right: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-logo { display: block; width: 180px; height: 111px; background: url('./logo.3dcb814253.webp') left center / contain no-repeat; }
.auth-grid { position: relative; z-index: 2; width: 100%; max-width: 1100px; display: grid; grid-template-columns: 1fr 440px; gap: 70px; align-items: center; }
.auth-welcome { align-self: start; padding-top: 70px; color: #173366; }
.auth-welcome h1 { font-size: 69px; line-height: 1.05; max-width: 480px; margin-top: 16px; text-shadow: 0 2px 20px #fff7; }
.auth-welcome .lead { max-width: 340px; margin-top: 20px; line-height: 1.8; font-size: 15px; color: #26385a; }
.auth-benefits { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #2c4a52; }
.auth-benefits li { display: flex; align-items: center; gap: 10px; }
.auth-benefits svg.icon { width: 16px; height: 16px; color: #3f6b3a; }
.auth-card {
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 43px; background: #fffdf6f2;
  border: 1px solid #c3b18d; box-shadow: 0 10px 60px #0f255012;
}
.auth-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--gold-line); pointer-events: none; }
.auth-card > * { position: relative; }
.auth-card h2 { font-size: 35px; line-height: 1.1; color: #223d70; margin-top: 12px; }
.auth-card .card-lead { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 10px; }
.auth-card .btn-primary { min-height: 48px; font-size: 14px; }
.create-account { text-align: center; font-size: 14px; color: var(--muted); }
.create-account a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-notice { border: 1px solid #dacdac; padding: 12px 14px; background: #f5f0e5; color: #6b5328; font-size: 13px; line-height: 1.6; }
.auth-back { display: flex; justify-content: center; }
.auth-footer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; color: #3f4f57; }
.auth-header .back-website { color: #1d3260; }
@media (min-width: 821px) {
  /* the welcome column is over the ranger art: keep every line of text at 4.5:1 or better (measured 821 to 1600 px) */
  .auth-page::after { background: linear-gradient(90deg, #eef5e6e6, #edf3e4d9 40%, #dbe7e5f5 85%); }
  .auth-benefits, .auth-footer { color: var(--ink); }
  .auth-welcome .eyebrow { color: var(--gold-text-deep); }
}

/* ---------- account (member) area ---------- */
.account-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1192px; margin: 0 auto; padding: 4px 0 64px; }
.account-aside {
  position: sticky; top: 24px; isolation: isolate; overflow: hidden; min-height: 640px; padding: 39px 19px 25px;
  background: var(--blue); color: var(--white); text-align: center; border: 1px solid #bdad94; box-shadow: 0 8px 24px #0f255008;
}
.account-aside::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 20% 0, #315fcf66, transparent 68%), repeating-linear-gradient(88deg, #fff0 0 3px, #ffffff03 4px 5px), repeating-linear-gradient(3deg, #0000 0 2px, #091a4905 3px 4px);
}
.account-aside::after { content: ''; position: absolute; inset: 8px; z-index: -1; border: 1px solid #cbb69661; pointer-events: none; }
.account-aside-ornament { position: absolute; top: 12px; left: 15px; right: 15px; display: flex; align-items: center; gap: 7px; color: var(--gold-bright); }
.account-aside-ornament::before, .account-aside-ornament::after { content: ''; height: 1px; flex: 1; background: #d4bea570; }
.account-aside-ornament svg.icon, .account-aside-rule svg.icon { width: 13px; height: 13px; stroke-width: 1.2; }
.account-member-avatar {
  width: 72px; height: 72px; margin: 0 auto 21px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--gold); outline: 1px solid #d4bea530; outline-offset: 5px; background: #14388a55; color: #f3d6aa;
}
.account-member-avatar svg.icon { width: 31px; height: 31px; stroke-width: 1.1; }
.account-member-caption { display: block; margin-bottom: 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; color: #ecd6b6; }
.account-name { font-family: var(--serif); font-size: 29px; line-height: 1.1; letter-spacing: -0.4px; margin: 0 0 8px; overflow-wrap: anywhere; }
.account-member-subtitle { display: block; font-size: 13px; color: #d7e1f7; }
.account-aside .since { font-size: 12px; color: #cfdaf1; margin-top: 4px; }
.account-aside-rule { display: flex; align-items: center; gap: 10px; margin: 24px 10px 18px; color: var(--gold-bright); }
.account-aside-rule i { height: 1px; flex: 1; background: #c6af8b65; }
.account-nav { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.account-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border: 1px solid transparent;
  color: var(--on-blue); text-decoration: none; font-size: 14px; transition: background 0.2s, color 0.2s;
}
.account-nav a > svg.icon { width: 16px; height: 16px; stroke-width: 1.35; }
.account-nav a > svg.icon:last-child { margin-left: auto; width: 12px; height: 12px; opacity: 0.55; }
.account-nav a:hover { background: #ffffff12; color: var(--white); }
.account-nav a[aria-current='page'] { color: #f6d8ab; background: #ffffff0f; border-color: #d4bea566; }
.account-nav a[aria-current='page'] > svg.icon:last-child { opacity: 1; }
.account-aside-bottom { position: relative; z-index: 1; margin: 0 9px; padding-top: 25px; }
.account-aside-wallet { text-align: left; padding: 18px 0 15px; border-top: 1px solid #d4bea544; }
.account-aside-wallet > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfdaf1; }
.account-aside-wallet > span svg.icon { width: 14px; height: 14px; color: #e5cba9; }
.account-aside-wallet strong { display: block; margin-top: 8px; font: 30px/1.2 var(--serif); color: #f9f6ef; }
.account-aside-wallet strong small { font: 12px var(--sans); color: #e2cfb0; margin-left: 5px; }
.account-aside-bp { padding-top: 12px; }
.account-aside-bp strong { font-size: 22px; margin-top: 4px; }
.account-vip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; margin-bottom: 17px; text-align: left; border-top: 1px solid #d4bea52b; border-bottom: 1px solid #d4bea52b; }
.account-vip > span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #f0d4a8; }
.account-vip svg.icon { width: 13px; height: 13px; stroke-width: 1.2; }
.account-vip small { font-size: 12px; color: #d3dcef; }
.account-aside-store {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 100%;
  border: 1px solid #d4bea580; color: #f6d5a5; background: #ffffff08; text-decoration: none; font-size: 13px;
}
.account-aside-store:hover { color: var(--gold-bright); background: #ffffff14; border-color: #f0d4a8; }
.account-aside-store svg.icon { width: 13px; height: 13px; }

.account-content { min-width: 0; }
.account-page-heading { margin-bottom: 30px; }
.account-page-heading .eyebrow, .account-section-heading .eyebrow { font-size: 11px; }
.account-page-heading .eyebrow::before, .account-section-heading .eyebrow::before { display: none; }
.account-page-heading h1 { font-size: 42px; line-height: 1.15; letter-spacing: -1px; color: var(--navy); margin: 10px 0; overflow-wrap: anywhere; }
.account-page-heading .lead { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 620px; }
.account-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 15px; flex-wrap: wrap; margin: 34px 0 16px; scroll-margin-top: 24px; }
.account-section-heading h2 { font-size: 25px; letter-spacing: -0.3px; line-height: 1.2; margin-top: 6px; color: var(--navy); }
.section-actions { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.account-text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--blue); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.account-text-link svg.icon { width: 15px; height: 15px; stroke-width: 1.3; }
.account-text-link:hover { color: var(--blue-hover); text-decoration: underline; }
.account-status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #3f5a3c; white-space: nowrap; min-height: 44px; }
.account-status i { width: 6px; height: 6px; border-radius: 50%; background: #5f8a56; box-shadow: 0 0 0 3px #86a57d26; }

/* overview */
.account-welcome {
  position: relative; isolation: isolate; overflow: hidden; min-height: 194px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 34px; background: #f6f7fb; border-color: #e0e5f0;
}
.account-welcome::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #ffffffbd, transparent 60%), repeating-linear-gradient(45deg, transparent 0 11px, #d8dfee18 11px 12px); }
.account-welcome h2 { font-size: 35px; line-height: 1.2; letter-spacing: -0.5px; color: var(--navy); margin: 10px 0 6px; }
.account-welcome p { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.account-welcome-seal {
  position: relative; flex: 0 0 124px; width: 124px; height: 124px; margin-right: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid #bba58578; border-radius: 50%; outline: 1px solid #c8b99f6b; outline-offset: 5px; transform: rotate(-8deg); color: #a08a6a;
}
.account-welcome-seal::before, .account-welcome-seal::after {
  content: ''; position: absolute; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: #f5f6f9; border: 1px solid #baa483; transform: rotate(45deg);
}
.account-welcome-seal::before { top: -5px; }
.account-welcome-seal::after { bottom: -5px; }
.account-welcome-seal .seal-g { font: italic 66px/0.95 var(--serif); color: #a8957a; }
.account-welcome-seal small { font-size: 11px; letter-spacing: 0.25em; margin-top: 6px; }
.account-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-stat { position: relative; display: block; padding: 20px 21px 14px; color: var(--ink); text-decoration: none; transition: transform 0.2s, border-color 0.2s; }
.account-stat:hover { transform: translateY(-3px); border-color: #c4ae8d; color: var(--ink); }
.account-stat-icon { display: block; margin-bottom: 12px; color: var(--gold-icon); }
.account-stat-icon svg.icon { width: 21px; height: 21px; stroke-width: 1.1; }
.account-stat-label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.account-stat strong { display: block; font: 31px/1.3 var(--serif); letter-spacing: -0.5px; color: var(--navy); overflow-wrap: anywhere; }
.account-stat strong small { font: 13px var(--sans); letter-spacing: 0; color: var(--gold-text); margin-left: 3px; }
.account-stat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eee9e1; font-size: 13px; color: var(--muted); }
.account-stat-foot svg.icon { width: 12px; height: 12px; color: #a78d68; }
.account-stat-gift { background: #fbfaf7; }
.account-stat-gift strong { font-size: 26px; line-height: 1.55; }
.account-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-character { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; min-height: 120px; padding: 20px 18px; }
.account-character.is-selected { border-color: #b7c5e4; background: #fcfdff; }
.account-character.is-off { background: #f8f7f3; }
.account-character-emblem {
  position: relative; flex: 0 0 54px; width: 54px; height: 64px; display: flex; align-items: center; justify-content: center;
  color: #7f6a4f; background: linear-gradient(145deg, #f6f1e6, #e5eaf3); font: 26px/1 var(--serif);
  clip-path: polygon(50% 0, 93% 18%, 93% 73%, 50% 100%, 7% 73%, 7% 18%);
}
.account-character-emblem.emblem-1 { background: linear-gradient(145deg, #edf0f6, #d8e0f1); color: #3f5d93; }
.account-character-emblem.emblem-2 { background: linear-gradient(145deg, #f1edf5, #e2daed); color: #6b5a88; }
.account-character-info { min-width: 0; flex: 1 1 auto; }
.account-character-level { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.account-character h3 { font-size: 23px; line-height: 1.12; letter-spacing: -0.2px; color: var(--navy); margin-bottom: 5px; overflow-wrap: anywhere; }
.account-character .server { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.account-character .server i { width: 5px; height: 5px; border-radius: 50%; background: #7f9a74; }
.account-character.is-off .server i { background: #a7a6a0; }
.account-selected { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--blue); }
.account-selected svg.icon { width: 12px; height: 12px; }
.account-unavailable { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--muted); background: #eeece6; padding: 1px 8px; }
.account-character-select {
  flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: none; border: 1px solid #ddd5c8; color: #8a7457;
}
.account-character-select svg.icon { width: 14px; height: 14px; }
.account-character-select:hover { border-color: var(--blue); color: var(--blue); }
.chars-error { margin-bottom: 12px; }
.chars-hint { margin-top: 10px; }

/* redeem / password feature grid */
.account-feature-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 25px; align-items: start; }
.account-form-card { padding: 31px 29px; }
.account-large-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 22px;
  color: #a28b69; border: 1px solid #e2d6c5; outline: 1px solid #eee8df; outline-offset: 3px;
}
.account-large-icon svg.icon { width: 21px; height: 21px; stroke-width: 1.1; }
.account-form-card h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 8px; color: var(--navy); }
.account-form-card > p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 22px; max-width: 420px; }
.account-form-card .btn-primary { width: 100%; }
.account-form-card .fine { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.account-gift-note { position: relative; padding: 38px 17px 24px; margin-top: 24px; border-top: 1px solid #d3bfa3; border-bottom: 1px solid #e5d9c6; background: radial-gradient(ellipse at 50% 20%, #f6f0e5aa, transparent 75%); }
.account-ornament { position: absolute; top: -16px; left: calc(50% - 22px); padding: 0 8px; background: var(--paper); color: #a8916f; line-height: 30px; }
.account-ornament svg.icon { width: 26px; height: 26px; stroke-width: 1; }
.account-gift-note .eyebrow { justify-content: center; }
.account-gift-note .eyebrow::before { display: none; }
.account-gift-note h2 { text-align: center; font-size: 27px; line-height: 1.3; letter-spacing: -0.4px; color: var(--navy); margin: 12px 0 18px; }
.rows { border: 1px solid var(--line); background: var(--white); }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.row:last-child { border-bottom: 0; }
.row .code { font-weight: 600; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }

/* top up */
.account-topup-balance { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 17px 24px; margin-bottom: 24px; background: #f8f9fc; border: 1px solid #e5e9f1; }
.account-topup-balance > span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4f5d79; }
.account-topup-balance svg.icon { width: 18px; height: 18px; stroke-width: 1.2; color: #a99171; }
.account-topup-balance strong, .account-history-overview strong { font: 27px var(--serif); letter-spacing: -0.3px; color: var(--navy); }
.account-topup-balance strong small, .account-history-overview strong small { font: 13px var(--sans); margin-left: 6px; color: var(--gold-text); }
.account-coming-soon { text-align: center; padding: 45px 30px 30px; background: radial-gradient(ellipse at 50% 20%, #faf7f1, #fff 70%); }
.account-coming-icon {
  width: 67px; height: 67px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid #d8c7ac; outline: 1px solid #e9e0d2; outline-offset: 5px; color: #a28a62; background: #fcfaf7;
}
.account-coming-icon svg.icon { width: 29px; height: 29px; stroke-width: 0.9; }
.account-coming-soon .eyebrow { justify-content: center; }
.account-coming-soon > p.eyebrow { font-size: 11px; line-height: 1.5; color: var(--gold-text); max-width: none; margin: 0; }
.account-coming-soon .eyebrow::before { display: none; }
.account-coming-soon h2 { font-size: 33px; line-height: 1.2; color: var(--navy); margin: 14px 0; }
.account-coming-soon > p { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 440px; margin: 0 auto 18px; }
.account-coming-soon > p strong { color: var(--ink); font-weight: 600; }
.account-closed-label { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 20px !important; font-size: 12px !important; letter-spacing: 0.12em; text-transform: uppercase; color: #6b5f4b !important; }
.account-closed-label i { width: 6px; height: 6px; border-radius: 50%; background: #baa681; }
.account-coming-soon .fine { border-top: 1px solid #e9e2d7; padding-top: 18px; max-width: 440px; margin: 0 auto; }

/* Top-up through the authorized agents (2026-10-24) */
.account-agents-intro { padding-bottom: 26px; }
.account-agents-intro .account-closed-label { margin-bottom: 0 !important; }
.account-agents { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-agent { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 18px; background: var(--white, #fffdf8); border: 1px solid var(--line); }
.account-agent-head { display: flex; align-items: center; gap: 12px; }
.account-agent-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dacdac; color: var(--gold-text-deep); background: #f5f0e5; flex: 0 0 auto; }
.account-agent h3 { font-size: 18px; line-height: 1.2; color: var(--navy); margin: 0; }
.account-agent-regions { font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-text); margin: 4px 0 0; }
.account-agent-note { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0; flex: 1 1 auto; }
.account-agent .btn svg.icon { width: 14px; height: 14px; margin-left: 8px; }
.account-agents-warning { margin-top: 18px; }
.account-agents-warning p { display: flex; gap: 8px; align-items: flex-start; }
.account-agents-warning p svg.icon { flex: 0 0 auto; margin-top: 2px; }
.account-agents-warning p strong { margin-right: 4px; }
.account-agents-warning .fine { display: block; margin-top: 8px; }
@media (max-width: 760px) { .account-agents { grid-template-columns: 1fr; } }

/* Agent-backed checkout in the Top up tab (2026-10-26): packages, the order's status panel, the pay panel (address + amount +
   copy buttons + countdown, after the agent app's deposit panel), the TXID form and the last orders */
.checkout, .checkout-store, .checkout-fallback { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.checkout-loading { padding: 24px 0; }
.checkout-intro h2 { font-size: 25px; color: var(--navy); }
.checkout-intro .lead { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--muted); max-width: 620px; }
.checkout h2[tabindex='-1']:focus { outline: none; }
/* the one-page purchase (2026-11-08): the package cards are choices (two columns on a phone), then "How will you pay?" (greyed until a
   package is picked), the coin-and-network of Crypto right under it, the character, then the sellers who take the chosen method */
.checkout-packages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkout-package { display: flex; min-width: 0; }
.checkout-package-pick { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 96px; padding: 14px 12px; text-align: left;
  font: inherit; background: var(--white); color: var(--ink); border: 1px solid var(--line-card); border-radius: 0; cursor: pointer; }
.checkout-package-pick:hover { border-color: var(--blue); }
.checkout-package-pick[aria-pressed='true'] { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-soft); }
.checkout-package-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--navy); overflow-wrap: anywhere; }
.checkout-package-gp { font: 22px/1.15 var(--serif); letter-spacing: -0.3px; color: var(--navy); }
.checkout-package-price { font-size: 14px; font-weight: 600; color: var(--gold-text); }
.checkout-package-desc { font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.checkout-prefer.checkout-paywith { padding: 16px 14px; background: var(--white); border: 1px solid var(--line); }
.checkout-paywith legend { float: left; width: 100%; }
.checkout-paywith legend + * { clear: both; }
.checkout-choice { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 5px 14px; text-align: left; line-height: 1.25; }
.checkout-choice-name { font-size: 14px; font-weight: 600; }
.checkout-choice-fee { font-size: 12px; color: var(--muted); }
.checkout-choice[aria-pressed='true'] .checkout-choice-fee { color: var(--on-blue); }
.checkout-choice:disabled { cursor: not-allowed; color: #8a8f9c; background: #f4f3ef; border-color: #e2dfd6; }
.checkout-choice:disabled:hover { color: #8a8f9c; border-color: #e2dfd6; }
.checkout-choice:disabled .checkout-choice-fee { color: #9a9ea9; }
.checkout-paywith.is-off legend { color: var(--muted); }
.checkout-pairs { padding-left: 12px; border-left: 2px solid var(--gold-line); }
.checkout-pairs .checkout-choice { min-height: 40px; }
.checkout-method-hint:empty, .checkout-banks:empty { display: none; }
.checkout-paywith .checkout-character { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.checkout-sellers { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.checkout-sellers h3 { font-size: 22px; color: var(--navy); }
.checkout-sellers-hint { margin: 0; }
@media (min-width: 640px) {
  .checkout-packages { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .checkout-package-pick { padding: 18px 16px; min-height: 120px; }
  .checkout-package-gp { font-size: 27px; }
  .checkout-prefer.checkout-paywith { padding: 20px 22px; }
}
.checkout-order { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.checkout-order h2 { font-size: 25px; color: var(--navy); }
.checkout-summary { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.checkout-status { font-size: 18px; line-height: 1.5; color: var(--navy); }
.checkout-status:empty, .checkout-hint:empty { display: none; }
.checkout-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.checkout-pay, .checkout-txid-box { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; background: #f8f9fc; border: 1px solid #e5e9f1; min-width: 0; }
.checkout-pay h3, .checkout-txid-box h3 { font-size: 20px; color: var(--navy); }
.checkout-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checkout-facts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; min-width: 0; }
.checkout-fact-label { flex: 0 0 76px; color: var(--muted); }
.checkout-address { flex: 1 1 220px; min-width: 0; padding: 7px 10px; font: 14px ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; background: var(--white); border: 1px solid var(--line); }
.copy-btn { border-color: var(--line); background: var(--white); }
.copy-btn svg.icon { width: 16px; height: 16px; }
.copy-buffer { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; }
.checkout-expires { font-size: 16px; font-weight: 600; color: var(--wait-fg); font-variant-numeric: tabular-nums; }
.checkout-warning { margin: 0; }
.checkout-txid { max-width: 640px; }
.checkout-txid .field-error:empty { display: none; }
.checkout-tx { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.checkout-tx code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.checkout-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout-prefer { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.checkout-prefer legend { padding: 0; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--navy); }
.checkout-prefer .hint { margin: 0; max-width: 620px; }
.checkout-method { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.checkout-method h4 { font-size: 16px; color: var(--navy); overflow-wrap: anywhere; }
.checkout-method-text { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.checkout-reference-hint { margin: 0; }
.checkout-paid { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.checkout-paid-hint, .checkout-paid-done { margin: 0; }
.checkout-paid .field-error:empty { display: none; }
.checkout-alert p + .btn { margin-top: 10px; }
.checkout-history h3 { font-size: 22px; color: var(--navy); margin-bottom: 10px; }
.checkout-history-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--white); }
.checkout-history-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.checkout-history-row:last-child { border-bottom: 0; }
.checkout-history-date, .checkout-history-amount { color: var(--muted); }
.checkout-history-name { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .checkout-order { padding: 18px 16px; }
  .checkout-pay, .checkout-txid-box { padding: 16px 14px; }
  .checkout-history-row { grid-template-columns: minmax(0, 1fr) auto; }
  .checkout-history-date { grid-column: 1 / -1; }
}

/* history */
.account-history-overview {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding: 25px 29px; overflow: hidden;
  border: 1px solid #d7dfef; background: linear-gradient(110deg, #f6f8fc, #fafbfe);
}
.account-history-overview > div > span { display: block; margin-bottom: 6px; font-size: 13px; color: #56627a; }
.account-history-overview strong { font-size: 39px; }
.account-history-overview-icon { color: #b0bdd4; }
.account-history-overview-icon svg.icon { width: 61px; height: 61px; stroke-width: 0.65; }
.account-history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 15px; flex-wrap: wrap; padding: 20px 23px 16px; }
.account-history-toolbar h2 { font-size: 25px; color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 44px; padding: 0 14px; font-size: 13px; background: var(--white); color: #4f5566; border: 1px solid #d8d4c8; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip[aria-pressed='true'] { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* password */
.account-password-scope { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; padding: 12px 14px; border: 1px solid #e4dccf; background: #faf8f3; }
.account-password-scope > svg.icon { width: 16px; height: 16px; color: #a28b69; margin-top: 3px; }
.account-password-scope p { font-size: 13px; line-height: 1.7; color: #5d5240; }
.account-security-note { padding: 30px 9px 0 4px; }
.account-security-note h2 { font-size: 30px; color: var(--navy); margin: 14px 0 22px; }
.account-security-note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.account-security-note li { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; color: #4f5a6d; }
.account-security-note li svg.icon { width: 15px; height: 15px; margin-top: 4px; color: #a28a62; stroke-width: 1.4; }
.account-security-bottom { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid #e8dfd2; color: #a8916f; }
.account-security-bottom svg.icon { width: 28px; height: 28px; stroke-width: 1; }
.account-security-bottom p { font: 20px/1.4 var(--serif); color: #7d6c55; }

/* ---------- responsive ---------- */
@media (min-width: 1550px) {
  .header-inner { max-width: 1380px; }
  .main-wrap, .site-footer { max-width: 1300px; }
  .hero { min-height: 360px; }
  .hero-art { width: 760px; height: 801px; bottom: -82px; }
}
@media (max-width: 1100px) {
  :root { --gutter: 26px; }
  .header-inner { gap: 28px; padding: 0 26px; }
  .header-nav { gap: 6px; }
  .header-actions { gap: 12px; }
  .header-divider, .signout .txt { display: none; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
  .wallet-strip { gap: 20px; padding: 21px; }
  .recipient-summary { padding-left: 20px; }
  .hero-copy { padding-left: 32px; }
  .hero-art { right: -100px; }
  .mail-note { display: none; }
  .product-info { padding: 18px 14px; }
  .product-info h3 { font-size: 21px; }
  .auth-grid { gap: 35px; grid-template-columns: 1fr 410px; }
  .auth-welcome h1 { font-size: 58px; }
  .auth-card { padding: 36px; }
  .account-layout { grid-template-columns: 222px minmax(0, 1fr); gap: 30px; }
  .account-aside { padding-left: 13px; padding-right: 13px; }
  .account-page-heading h1 { font-size: 37px; }
  .account-welcome { padding: 25px; }
  .account-welcome-seal { width: 100px; height: 100px; flex-basis: 100px; }
  .account-welcome-seal .seal-g { font-size: 54px; }
  .account-stat { padding: 17px 14px 13px; }
  .account-stat-gift strong { font-size: 22px; }
  .account-character { gap: 11px; padding: 20px 13px; }
  .account-character-emblem { width: 46px; height: 56px; flex-basis: 46px; }
  .account-feature-grid { gap: 20px; }
  .account-form-card { padding: 26px 23px; }
}
@media (max-width: 850px) {
  .account-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; }
  .account-aside { min-height: 600px; }
  .account-member-avatar { width: 62px; height: 62px; }
  .account-name { font-size: 26px; }
  .account-nav a { padding: 0 9px; gap: 10px; font-size: 13px; }
  .account-nav a > svg.icon { width: 14px; height: 14px; }
  .account-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-stat-gift { grid-column: 1 / -1; }
  .account-character-grid { grid-template-columns: 1fr; }
  .account-welcome-seal { display: none; }
  .account-welcome { min-height: 170px; }
  .account-welcome h2 { font-size: 30px; }
  .account-section-heading h2 { font-size: 23px; }
  .account-feature-grid { grid-template-columns: 1fr; }
  .account-gift-note { margin-top: 12px; }
  .account-security-note { padding: 15px 10px 0; }
  .account-coming-soon { padding: 40px 20px 28px; }
  .account-coming-soon h2 { font-size: 28px; }
  .account-history-overview { padding: 22px; }
}
@media (max-width: 820px) {
  :root { --gutter: 22px; }
  .site-header { min-height: 0; }
  .header-inner { flex-wrap: wrap; gap: 0 18px; padding: 0 22px; min-height: 0; }
  .brand { flex-basis: 130px; height: 82px; }
  .brand-logo { width: 130px; height: 81px; }
  .header-actions { min-height: 82px; }
  .header-nav {
    order: 3; flex: 1 1 100%; min-height: 48px; gap: 10px; justify-content: center; border-top: 1px solid #ffffff1a;
    overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 0 14px;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { font-size: 13px; }
  .header-nav a[aria-current='page']::after { bottom: 0; }
  .page-topline { min-height: 55px; }
  .hero h1 { font-size: 49px; }
  .hero-copy { max-width: 460px; padding: 32px 28px; }
  .hero-art { right: -150px; width: 520px; height: 640px; bottom: -40px; background-image: url('./ranger-scene.7246a6a103.webp'); }
  .hero::after { background: linear-gradient(90deg, #f1f4ed, #eef3e9e6 38%, #e9f3e38c 66%, transparent); }
  .wallet-strip { grid-template-columns: 1fr 1.3fr; gap: 18px; }
  .wallet-strip > .btn { grid-column: 1 / -1; }
  .section-head { margin-top: 30px; }
  .section-head h2 { font-size: 29px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .store-search input { width: 130px; }
  .journey-note { gap: 9px; padding: 0 10px; }
  .auth-page { padding-top: 150px; }
  .auth-grid { grid-template-columns: 1fr; max-width: 440px; }
  .auth-welcome { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  /* phones: the portrait scene instead of the big cut-out */
  .auth-art { left: -25%; opacity: 0.5; aspect-ratio: 768 / 949; background-image: url('./ranger-scene.7246a6a103.webp'); -webkit-mask-image: linear-gradient(0deg, transparent, #000 25%); mask-image: linear-gradient(0deg, transparent, #000 25%); }
  .footer-help { display: none; }
  .auth-header { left: 22px; right: 22px; }
  .auth-logo { width: 150px; height: 93px; }
}
@media (max-width: 720px) {
  /* tables become stacked rows: each cell shows its column name (data-label) */
  .table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .table.stack tr:last-child { border-bottom: 0; }
  .table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
  .table.stack td::before { content: attr(data-label); color: var(--muted); text-align: left; font: 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
  .table.stack td.activity { display: block; text-align: left; padding-bottom: 6px; }
  .table.stack td.activity::before { display: none; }
  .account-history-toolbar { padding: 18px 16px 14px; }
  .panel-head { padding: 18px 16px 14px; }
  .panel-foot { padding: 4px 16px; }
}
@media (max-width: 620px) {
  .account-layout { display: block; padding-top: 0; }
  .account-aside {
    position: relative; top: auto; min-height: 0; margin-bottom: 26px; padding: 18px 13px 12px; text-align: left; overflow: visible;
    display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center;
  }
  .account-aside::after { inset: 5px; }
  .account-aside-ornament, .account-member-caption, .account-member-subtitle, .account-aside-rule { display: none; }
  .account-member-avatar { grid-row: 1 / 3; width: 38px; height: 38px; margin: 0 0 0 2px; outline-offset: 2px; }
  .account-member-avatar svg.icon { width: 18px; height: 18px; }
  .account-name { grid-column: 2; font-size: 24px; margin: 0; }
  .account-aside .since { grid-column: 2; margin: 0; }
  .account-nav {
    grid-column: 1 / -1; flex-direction: row; gap: 0; margin-top: 14px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1;
  }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a { flex: 0 0 auto; gap: 6px; padding: 0 11px; border: 0; border-bottom: 1px solid #ffffff26; white-space: nowrap; font-size: 13px; }
  .account-nav a > svg.icon:last-child { display: none; }
  .account-nav a[aria-current='page'] { border-bottom: 2px solid #e5c699; }
  .account-aside-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; margin: 0 6px; padding-top: 12px; }
  .account-aside-wallet { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px solid #d4bea52b; }
  .account-aside-wallet strong { font-size: 26px; margin: 0; }
  .account-vip { border: 0; padding: 0; margin: 0; }
  .account-aside-store { width: auto; min-width: 132px; padding: 0 14px; }
  .account-page-heading h1 { font-size: 34px; }
  .account-welcome { padding: 24px; }
  .account-history-toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .hero-mark { display: none; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .header-inner { padding: 0 16px; gap: 0 12px; }
  .header-nav { margin: 0 -16px; padding: 0 8px; gap: 6px; justify-content: flex-start; }
  .brand { flex-basis: 112px; height: 74px; }
  .brand-logo { width: 112px; height: 70px; }
  .header-actions { min-height: 74px; gap: 6px; }
  .header-wallet small { display: none; }
  .header-wallet strong { font-size: 15px; }
  .avatar-button { display: none; }
  .page-topline { min-height: 49px; }
  .back-website { font-size: 12px; }
  .hero { min-height: 360px; }
  .hero-copy { padding: 30px 20px 26px; max-width: 100%; }
  .hero h1 { font-size: 40px; max-width: 290px; }
  .hero-lead { font-size: 13px; max-width: 230px; }
  .hero-art { width: 380px; height: 470px; right: -150px; bottom: -40px; }
  .hero::after { background: linear-gradient(90deg, #f1f4edf5, #eef3e9eb 74%, #e9f3e340); }
  .hero-bottom { max-width: 200px; line-height: 1.5; align-items: flex-start; }
  .wallet-strip { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; }
  .recipient-summary { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .section-head { flex-direction: column; align-items: flex-start; margin: 26px 0 14px; }
  .section-head h2 { font-size: 27px; }
  .filters-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .shop-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .shop-btn { min-width: 0; padding: 4px 6px; gap: 4px; flex-wrap: wrap; font-size: 12px; line-height: 1.25; text-align: center; }
  .shop-btn > svg.icon { display: none; }
  .store-search { margin-left: 0; }
  .category-tabs { gap: 8px; }
  .store-search { border-top: 1px solid var(--line); padding: 2px 0; }
  .store-search input { width: 100%; min-height: 44px; }
  .result-count { margin-top: -12px; }
  .product-grid { gap: 12px; }
  .product-art { height: 140px; }
  .product-art > img { width: 79px; height: 79px; }
  .art-stack { width: 150px; height: 90px; }
  .art-tile { width: 79px; height: 79px; margin: -39.5px 0 0 -39.5px; }
  .art-tile img { width: 79px; height: 79px; }
  .art-tile > svg.icon { width: 40px; height: 40px; }
  .fan-2 .art-tile:nth-child(1) { transform: translateX(12px); }
  .fan-2 .art-tile:nth-child(2) { transform: translateX(-22px) rotate(-10deg) scale(0.82); }
  .fan-3 .art-tile:nth-child(2) { transform: translateX(-36px) rotate(-12deg) scale(0.8); }
  .fan-3 .art-tile:nth-child(3) { transform: translateX(36px) rotate(12deg) scale(0.8); }
  .product-art::before { width: 110px; height: 110px; }
  .product-art::after { width: 84px; height: 84px; }
  .product-tag { left: 8px; top: 9px; letter-spacing: 0.04em; padding: 3px 6px; }
  .product-info { padding: 15px 11px 11px; }
  .product-info h3 { font-size: 20px; }
  .product-price-row { flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0; }
  .price { font-size: 22px; }
  .product-limit { text-align: left; max-width: none; }
  .card-cta { padding: 0 8px; font-size: 12px; }
  .journey-band { grid-template-columns: 1fr; padding: 4px 0; margin-top: 26px; }
  .journey-note { justify-content: flex-start; padding: 14px 12px; gap: 16px; }
  .journey-note + .journey-note { border-left: 0; border-top: 1px solid var(--line); }
  .dlg-head { padding: 20px 16px 16px 20px; gap: 12px; }
  .dlg-head .icon-frame { width: 54px; height: 54px; flex-basis: 54px; }
  .dlg-head .icon-frame img { width: 46px; height: 46px; }
  .dlg-title h2 { font-size: 25px; }
  .dlg-title .eyebrow::before { display: none; }
  .dlg-body { padding: 20px; }
  .dlg-reason { padding: 0 20px; }
  .dlg-foot { padding: 16px 20px; }
  .char-opt .portrait { display: none; }
  .auth-page { padding: 140px 16px 70px; }
  .auth-card { padding: 34px 24px; }
  .auth-card h2 { font-size: 31px; }
  .auth-header { left: 16px; right: 16px; }
  .auth-logo { width: 130px; height: 80px; }
  .auth-art { height: 100vh; left: -30%; bottom: -8%; }
  .account-summary-grid { grid-template-columns: 1fr; }
  .account-stat-gift { grid-column: auto; }
  .account-form-card { padding: 26px 20px; }
  .account-history-overview strong { font-size: 32px; }
  .account-history-overview-icon { display: none; }
}
@media (max-width: 400px) {
  .dlg-foot { flex-direction: column-reverse; }
  .dlg-foot .btn { width: 100%; }
  .dlg-foot .btn-icon { margin-right: 0; align-self: flex-start; }
  .account-nav a > svg.icon { display: none; }
  .account-page-heading h1 { font-size: 31px; }
}
@media (max-width: 340px) {
  .product-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .product-card:hover, .account-stat:hover, .btn-primary:hover { transform: none; }
  .product-card:hover .product-art > img, .product-card:hover .art-stack { transform: none; }
  .xfade-ghost { display: none; }
  .xfade-in, .xfade-out { animation: none; }
  .xfade-hold { opacity: 1; }
}
/* the page heading takes focus after a route change (screen readers announce the new page); it is not a control, so no ring */
h1[tabindex='-1']:focus { outline: none; }

/* Agent autopilot (plan 2026-10-27 Task 12): a method confirmed by a provider - the PIX QR with its copy-and-paste code, the "Pay with …"
   button to the provider page, the automatic-confirmation line. */
.checkout-method-auto .checkout-auto { margin: 0; }
.checkout-qr { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.checkout-qr img { width: 220px; height: 220px; max-width: 100%; background: var(--white); border: 1px solid var(--line); padding: 8px; }
.checkout-qr-code { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; min-width: 0; width: 100%; }
.checkout-qr-code .checkout-address { font-size: 12px; }
.checkout-pay-page { margin: 0; }
.checkout-pay-link { display: inline-block; }
.checkout-charge-preparing { margin: 0; }

/* The buyer <-> seller chat of a checkout order (plan 2026-10-29-checkout-chat Task 9): a small box at the bottom-right, minimizable to its
   header with the unread counter; the lines "(HH:MM) Name: Message"; pictures inline with a Save link. Under the toasts (z-index 90). */
.chat-box { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: min(360px, calc(100% - 48px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 10px 30px #0f255033; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.chat-title { flex: 1; min-width: 0; white-space: nowrap; }
/* design pass (2026-11-02): the directed countdown chip takes its own row in the dock head, under the title, at every width */
.chat-head { flex-wrap: wrap; }
.chat-head > .status { order: 9; flex: 0 0 auto; margin-right: 100%; }
.chat-unread { min-width: 22px; padding: 1px 7px; border-radius: 0; background: var(--gold-bright); color: var(--navy); font-size: 12px; font-weight: 700; text-align: center; }
.chat-toggle { flex: 0 0 auto; }
.chat-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.chat-log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; }
.chat-line { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.chat-time { color: var(--muted); font-size: 12px; }
.chat-mine .chat-name { color: var(--blue-ink); }
.chat-from-staff .chat-name { color: var(--gold-text); }
.chat-removed { color: var(--muted); font-style: italic; }
.chat-pic { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.chat-image { display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 220px; object-fit: contain; border: 1px solid var(--line); border-radius: 0; background: var(--white); }
/* a chat picture opens full size (picture-viewer.js): the thumbnail keeps its shape, the dialog fits the screen */
.chat-image-btn { display: inline-block; align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
dialog.dlg.pic-dlg { width: fit-content; max-width: calc(100vw - 30px); max-height: calc(100vh - 30px); max-height: calc(100dvh - 30px); overflow: hidden; background: var(--white); }
.pic-dlg .pic-full { display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); object-fit: contain; }
.pic-dlg .pic-close { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--white); border: 1px solid var(--line); }
.chat-actions { margin-left: 6px; }
.chat-tr { margin: 2px 0 0 0; padding: 4px 8px; border-left: 3px solid var(--gold-line); color: var(--ink-2); font-size: 13px; }
.chat-form { display: flex; gap: 6px; align-items: stretch; }
.chat-input { flex: 1; min-width: 0; width: auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: 0; background: var(--white);
  color: var(--ink); font: inherit; font-size: 14px; }
.chat-input:focus-visible { border-color: var(--blue); outline-offset: 2px; }
.chat-error:empty, .chat-report-note:empty { display: none; }
.chat-closed { margin: 0; }
.chat-tools { display: flex; justify-content: flex-end; }
.chat-report-panel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-report-panel .hint { width: 100%; margin: 0; }
.chat-box.chat-min { width: min(260px, calc(100% - 48px)); }
@media (max-width: 480px) { .chat-box { right: 12px; left: 12px; bottom: 12px; width: auto; } .chat-box.chat-min { left: auto; width: 220px; } }

/* security review 2026-10-29 #2: a name or a line never reorders the text around it; a real staff line carries a mark that is not text */
.chat-name, .chat-text, .chat-tr { unicode-bidi: isolate; }
.chat-line.chat-from-staff { border-left: 3px solid var(--gold-line); background: var(--blue-soft); padding: 2px 6px; border-radius: 0; }
/* a system line (P2P seller chat Task 13): centred, grey, no bubble, no name */
.chat-line.chat-system { text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* the PIX QR of a manual PIX (operator 2026-10-29), drawn as an SVG */
.checkout-pix-qr { width: 220px; height: 220px; max-width: 100%; background: var(--white); border: 1px solid var(--line); padding: 8px; }

/* Every select is square like the Console's fields, and so is its open list (operator 2026-10-29: nothing rounded in the Console).
   Browsers with the customizable select draw the list from these rules; the others keep their own list. */
select { border-radius: 0; }
select:not(.input) { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-input); background-color: var(--white); color: var(--ink); }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
  select::picker-icon { color: var(--muted); }
  ::picker(select) { margin: 2px 0 0; padding: 0; border: 1px solid var(--line-input); border-radius: 0; background: var(--white); box-shadow: 0 7px 30px #0f255026; }
  option { display: flex; align-items: center; min-height: 40px; padding: 8px 13px; color: var(--ink); }
  option:hover, option:focus-visible { background: var(--blue-soft); color: var(--blue-ink); outline: none; }
  option:checked { font-weight: 600; }
  option::checkmark { display: none; }
}

/* the purchase page's character: "The seller sees this character's name: [select]" on one line, a Console field */
.checkout-character { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.checkout-character .checkout-character-pick { width: auto; min-width: 180px; }

/* ---------- the seller cards of the Top-up page (the former /v2/buy flow, 2026-11-08). Mobile first (360 px), square like the Console,
   44 px taps; the Buy button spans the card on a phone (thumb reach) ---------- */
.btn-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--blue); font-size: 14px; text-decoration: underline; cursor: pointer; border-radius: 0; }
.btn-text:hover { color: var(--blue-hover); }
.buy-sellers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.buy-seller { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 0; min-width: 0; }
.buy-seller-fast { border-color: var(--gold-line); box-shadow: inset 4px 0 0 var(--gold-bright); }
.buy-seller-linked { border-color: var(--blue); }
.buy-seller-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.buy-seller-head h3 { font-size: 18px; color: var(--navy); overflow-wrap: anywhere; min-width: 0; }
.buy-presence { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink); }
.buy-dot { display: inline-block; width: 9px; height: 9px; background: #8d8a80; border-radius: 0; }
.buy-dot-online { background: var(--ok-fg); }
.buy-dot-busy { background: var(--wait-fg); }
.buy-dot-offline { background: #8d8a80; }
.buy-seen { color: var(--muted); }
.buy-stats { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.buy-fee { margin: 0; font-size: 13px; color: var(--muted); }
.buy-card-alert { margin: 0; }
.buy-seller-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.buy-go { flex: 1 1 100%; min-height: 48px; gap: 8px; }
/* U4: the fast seller (automatic payment) - the brand's bright gold, navy text (10:1), a bolt */
.buy-go-fast { background: var(--gold-bright); border-color: var(--gold); color: var(--navy); box-shadow: inset 0 0 0 3px #ffffff40; }
.buy-go-fast:hover { background: var(--gold-bright); border-color: var(--navy); color: var(--navy); }
.buy-go-fast:disabled { background: var(--gold); border-color: var(--gold); color: var(--ink-2); }
.buy-go-fast svg.icon { width: 16px; height: 16px; fill: currentColor; }
.buy-seller-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.buy-seller-links .btn-text { font-size: 13px; min-height: 40px; }
.buy-terms { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
/* the bottom sheet: the terms of a seller, anchored to the bottom edge on a phone */
dialog.sheet { width: min(560px, 100%); max-height: 80%; margin: auto auto 0; border-bottom: 0; }
@media (min-width: 640px) {
  .buy-seller { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; }
  .buy-seller-head, .buy-stats, .buy-fee, .buy-card-alert { grid-column: 1; }
  .buy-seller-actions { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; align-items: stretch; min-width: 200px; }
  .buy-go { flex: 0 0 auto; }   /* design pass 2026-11-02: in the column the grow went to the height; the kit's 48 px bar */
  .buy-seller-links { justify-content: center; }
  dialog.sheet { margin: auto; max-height: calc(100% - 40px); border-bottom: 1px solid #d1bc94; }
}

/* P2P seller chat, Task 14: the order page (status + countdown, seller row, payment, chat, secondary actions), the rating row and the header bell.
   Square Console look, mobile first. */
.checkout-countdown { margin: 0; font-size: 16px; font-weight: 600; color: var(--wait-fg); font-variant-numeric: tabular-nums; }
.checkout-countdown:empty, .checkout-actions:empty, .checkout-chat-slot:empty { display: none; }
.checkout-seller { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; background: #f8f9fc; border: 1px solid #e5e9f1; min-width: 0; }
.checkout-seller[hidden] { display: none; }
.checkout-seller-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.checkout-seller-name { font-size: 16px; color: var(--navy); overflow-wrap: anywhere; }
.checkout-seller-presence { font-size: 13px; color: var(--muted); }
.checkout-seller-presence.presence-online { color: var(--ok-fg); }
.checkout-seller-presence.presence-busy { color: var(--wait-fg); }
.checkout-pay-wait .notice { margin: 0; }
.checkout-actions .hint { flex: 1 1 100%; margin: 0; }
.checkout-actions .btn { min-height: 48px; }
.checkout-delivered { margin: 0; font-size: 15px; color: var(--navy); overflow-wrap: anywhere; }
.checkout-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; background: #f8f9fc; border: 1px solid #e5e9f1; min-width: 0; }
.checkout-rate h3 { font-size: 20px; color: var(--navy); }
.checkout-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout-thumb { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.checkout-thumb[aria-pressed='true'] { background: var(--blue); color: var(--white); border-color: var(--blue); }
.checkout-rate-field { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; }
.checkout-rate-field[hidden] { display: none; }
.checkout-rate-text { min-height: 84px; padding: 10px 13px; resize: vertical; font: inherit; line-height: 1.5; }
.checkout-rate-msg:empty { display: none; }
.checkout-rated, .checkout-rate-comment { margin: 0; overflow-wrap: anywhere; }
.chat-pinned { margin: 0; padding: 9px 12px; font-size: 13px; line-height: 1.5; }
.chat-pinned[hidden] { display: none; }
@media (max-width: 560px) {
  .checkout-rate { padding: 16px 14px; }
  .checkout-actions .btn { flex: 1 1 100%; }
}

.bell { position: relative; }
.bell[hidden] { display: none; }
.bell-button {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 0;
  border: 1px solid #ccbb975e; background: #ffffff11; color: #edd4ad; cursor: pointer;
}
.bell-button:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--gold-bright); color: var(--navy); font-size: 11px; font-weight: 700; line-height: 1;
}
.bell-count[hidden] { display: none; }
.bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 480px); overflow-y: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px #0f255033;
}
.bell-panel[hidden] { display: none; }
.bell-title { margin: 0; padding: 12px 14px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid var(--line-soft); }
.bell-list { list-style: none; margin: 0; padding: 0; }
.bell-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left;
  background: var(--panel); color: var(--ink); border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; font: inherit; font-size: 14px; cursor: pointer;
}
.bell-item:hover { background: #f8f9fc; }
.bell-unread { border-left: 4px solid var(--gold-bright); font-weight: 600; }
.bell-text { overflow-wrap: anywhere; }
.bell-time { font-size: 12px; font-weight: 400; color: var(--muted); }
.bell-empty { margin: 0; padding: 14px; }
.bell-empty[hidden] { display: none; }
@media (max-width: 760px) { .bell-panel { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; } }

/* Localization (plan 2026-11-02-player-console-localization): the header's language selector takes its content's width; Chinese and Thai
   fall back to the system's fonts after the console's Latin ones (no font files are added). */
/* the header language selector is a header control like the bell and the avatar, not a white form field (operator 2026-11-03, design
   by RO3Server Asia): outlined on the navy header, a cream open list like the bell panel. Scoped under .header-actions so it beats .input
   and the global select / ::picker(select) / option rules whatever the order. */
.header-actions .lang-select {
  width: auto; min-height: 44px; height: 44px; padding: 0 12px 0 14px;
  background: #ffffff11; color: #edd4ad; border: 1px solid #ccbb975e; border-radius: 0;
  font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer;
}
.header-actions .lang-select:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.header-actions .lang-select:focus-visible { border-color: var(--gold-bright); outline: 2px solid var(--gold-bright); outline-offset: 2px; }
/* the native list (browsers without the customizable select): cream, not white */
.header-actions .lang-select option { background: var(--panel); color: var(--ink); }
@supports (appearance: base-select) {
  .header-actions .lang-select::picker-icon { color: currentColor; }
  .header-actions .lang-select::picker(select) { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px #0f255033; }
  .header-actions .lang-select option:hover, .header-actions .lang-select option:focus-visible { background: var(--wait-bg); color: var(--ink); }
  .header-actions .lang-select option:checked { box-shadow: inset 4px 0 0 var(--gold-bright); font-weight: 600; }
}
:lang(zh-CN) body { font-family: var(--sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
:lang(th) body { font-family: var(--sans), "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", sans-serif; }