/* Storybook Brawl community site.
   Sections: tokens, fonts, base, header, messages, panels, buttons, tables,
   forms, footer, public pages, account, shop, admin.
   Every game sprite (/static/game/ui/) sits behind a solid colour, so the
   site still renders when the gitignored game/ folder is missing. */

/* ---- Tokens (the first block is the original site's, website-spec 6.6) ---- */
:root {
  --bg: #130e37;
  --bg-deep: #0b0812;
  --bg-accent: #302966;
  --gold-1: #daac55;
  --gold-2: #c0873b;
  --gold-text: #f9d977;
  --gold-highlight: #ffeb79;
  --amber: #d78934;
  --text: #e3e3e3;
  --link: #f2c867;
  --border-width: 4px;
  --radius: 24px;
  --gold-gradient: linear-gradient(91.74deg, #daac55 22.83%, #c0873b 118.76%);
  /* Parchment panels (dark ink on the game's scroll paper). On #e6cf9f:
     ink 12:1, heading brown 7:1, link brown 6:1, danger red 6:1. */
  --parchment: #e6cf9f;
  --ink: #2b1b0a;
  --ink-heading: #5b3410;
  --ink-link: #7a3d0c;
  --ink-danger: #8f1f17;
  --ink-border: #8a5a1f;
  --paper-field: #fbf3dc;
  /* Dark text on the gold title ribbon (about 8:1). */
  --ribbon-ink: #3a1f05;
  --danger-text: #ff9a93;
  --muted-line: #5a5470;
}

@font-face { font-family: "Cinzel Decorative"; font-weight: 700; font-display: swap;
  src: url("../fonts/cinzel-decorative-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-weight: 900; font-display: swap;
  src: url("../fonts/cinzel-decorative-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap;
  src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap;
  src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Acme"; font-weight: 400; font-display: swap;
  src: url("../fonts/acme-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ---- Base ---- */
* { box-sizing: border-box; }
html { background-color: var(--bg); }

/* Textures under /static/site/ are generated later; when missing, the
   solid colour shows. The art is fixed to the viewport so it never
   stretches on tall pages. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: url("/static/site/background-magic-1.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--text);
  font: 400 1rem/1.6 "Inter", system-ui, sans-serif;
}

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
/* main.wrap: .wrap's padding would otherwise win over an element selector. */
main.wrap { flex: 1; padding-top: 32px; padding-bottom: 40px; }

/* Gold text links with a soft gold underline, brighter on hover. */
a { color: var(--link); text-decoration: underline; text-decoration-color: rgb(218 172 85 / 0.45);
    text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; }
a:hover { color: var(--gold-highlight); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--gold-highlight); outline-offset: 2px; }
code { font-size: 0.9em; background-color: rgb(255 255 255 / 0.08); border-radius: 4px; padding: 1px 5px; }
pre { overflow-x: auto; background-color: var(--bg-deep); border-radius: 8px; padding: 12px; }
pre code { background: none; padding: 0; }

.skip { position: absolute; left: -999px; top: 0; background: var(--bg-deep); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { opacity: 0.75; }
.hint { font-size: 0.85rem; color: var(--amber); }
.hash { font-size: 0.8rem; word-break: break-all; }
/* Prose pages (how to play, legal, news posts) span the full panel width
   like every other page. */
.prose { max-width: none; }
.prose img { max-width: 100%; height: auto; }
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

h1, h2, h3 { font-family: "Cinzel", Georgia, serif; font-weight: 600; color: var(--gold-text); line-height: 1.2; }
h1 { font-family: "Cinzel Decorative", "Cinzel", Georgia, serif; font-weight: 900; font-size: 2.2rem; }
/* Drop-cap look: bigger decorative first letter. */
h1::first-letter, h2::first-letter { font-family: "Cinzel Decorative", "Cinzel", Georgia, serif; font-size: 1.4em; }
.kicker { font: 600 0.8rem "Cinzel", Georgia, serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin: 0 0 4px; }

/* ---- Header and navigation ---- */
.site-header { background-color: var(--bg-deep); border-bottom: var(--border-width) solid var(--gold-2); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold-text);
  font: 900 1.3rem "Cinzel Decorative", "Cinzel", Georgia, serif; }
.brand-logo { width: 44px; height: 44px; background: url("/static/site/logo-lettering.png") center / contain no-repeat; }
/* "CS" = Community Server, explained by the abbr tooltip. */
.brand-text abbr { text-decoration: none; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-family: "Cinzel", Georgia, serif; font-weight: 600; }
nav a { color: var(--text); text-decoration: none; padding: 8px 0; }
nav a:hover { color: var(--amber); }
/* Account actions stand apart from the page links. */
.nav-account { display: flex; align-items: center; gap: 10px; margin-left: 12px; padding-left: 20px;
  border-left: 1px solid var(--bg-accent); font: 400 1rem "Acme", system-ui, sans-serif; }
.nav-account a, .nav-account .link-button { padding: 6px 18px; border-radius: 999px; border: 2px solid var(--gold-1); color: var(--gold-text); }
.nav-account a.nav-primary { background: var(--gold-gradient); border-color: transparent; color: #1a1205; }
.nav-account a:hover, .nav-account .link-button:hover { color: var(--gold-highlight); filter: brightness(1.12); }
.nav-account a.nav-primary:hover { color: #1a1205; }
@media (max-width: 600px) { .nav-account { margin-left: 0; padding-left: 0; border-left: 0; } }
form.inline { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--text); cursor: pointer; }
.link-button:hover { color: var(--amber); }

/* Section tabs (account and admin): a gold underline marks the current page. */
.subnav, .admin-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 20px;
  border-bottom: 1px solid var(--bg-accent); font: 600 0.95rem "Cinzel", Georgia, serif; }
.subnav a, .admin-nav a { color: var(--text); text-decoration: none; padding: 8px 2px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.subnav a:hover, .admin-nav a:hover { color: var(--amber); }
.subnav a[aria-current], .admin-nav a[aria-current] { color: var(--gold-text); border-bottom-color: var(--gold-1); }

/* ---- Messages ---- */
.banner { background: var(--bg-accent); border-bottom: 2px solid var(--gold-1); text-align: center; padding: 8px 16px; }
.flash, .support-notice { background: var(--bg-accent); border-left: var(--border-width) solid var(--gold-1); padding: 10px 16px; border-radius: 8px; color: var(--text); }
.flash-error { border-left-color: #e0645c; }
.notice { max-width: 80ch; }
.field-error { color: var(--danger-text); }
.danger-text { color: var(--danger-text); }
.status-bad { color: var(--danger-text); font-weight: 700; }

/* ---- Panels ---- */
.panel { background-color: var(--bg-deep); border: var(--border-width) solid var(--gold-2); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.panel > h2:first-child { margin-top: 0; }
.panel h2 { margin: 1.4em 0 0.5em; }
.card { background-color: var(--bg-accent); border-radius: calc(var(--radius) / 2); padding: 16px; }

/* Page title on the game's gold ribbon (scroll_title_Straight, 1024x266).
   The ribbon keeps its own aspect ratio; its flat front band is the middle
   ~72% of the width and the top ~45% of the height (measured on the
   sprite), so the text is sized from the ribbon width (--rw) and placed in
   that band: always one line, ellipsis if too long, no drop cap.  Without
   the sprite the gradient draws a plain gold band in the same place.
   Titles that come from data (.plain-title) stay plain gold text. */
.panel > h1:first-child:not(.visually-hidden):not(.plain-title) {
  --rw: min(100vw - 80px, 30rem);
  box-sizing: border-box; width: var(--rw); max-width: 100%; aspect-ratio: 1024 / 266;
  margin: -4px auto 12px; padding: calc(var(--rw) * 0.032) calc(var(--rw) * 0.16) 0;
  font-size: calc(var(--rw) * 0.045); line-height: calc(var(--rw) * 0.066);
  text-align: center; color: var(--ribbon-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("/static/game/ui/scroll_title_Straight.png"), var(--gold-gradient);
  background-size: 100% 100%, 64% 32%;
  background-position: center, 50% 12%;
  background-repeat: no-repeat;
}
.panel > h1:first-child:not(.visually-hidden):not(.plain-title)::first-letter { font: inherit; }
.panel > h1.plain-title { margin-top: 0; }
.item-name::first-letter { font: inherit; }
.item-name { margin: 0 0 12px; text-align: center; font-size: 1.3rem; overflow-wrap: anywhere; }

/* Narrow form and confirmation panels: scroll paper with dark ink
   (popup_mini_info_Flat, cropped to its opaque middle). */
.parchment { color: var(--ink); background-color: var(--parchment); border-color: var(--gold-2);
  background-image: url("/static/game/ui/popup_mini_info_Flat.png"); background-size: 190% auto; background-position: center; }
.parchment h2, .parchment h3 { color: var(--ink-heading); }
.parchment a:not(.button) { color: var(--ink-link); font-weight: 600; text-decoration-color: rgb(122 61 12 / 0.45); }
.parchment a:not(.button):hover { color: var(--ink); text-decoration-color: currentColor; }
.parchment .muted { opacity: 0.85; }
.parchment .hint, .parchment .summary dt { color: var(--ink-heading); }
.parchment .danger-text, .parchment .field-error { color: var(--ink-danger); font-weight: 600; }
.parchment .button-alt { color: var(--ink); border-color: var(--ink-border); }
.parchment .button-alt:hover { color: var(--ink-heading); }
.parchment input, .parchment select, .parchment textarea { background: var(--paper-field); color: var(--ink); border-color: var(--ink-border); }
.parchment .button:not(.button-alt):not(.button-danger) { box-shadow: 0 0 0 2px var(--ink-border); }

/* ---- Buttons ---- */
.button, button.button {
  display: inline-block; background: var(--gold-gradient); color: #1a1205; border: 0;
  border-radius: 999px; padding: 10px 28px; font: 400 1.1rem/1.4 "Acme", system-ui, sans-serif;
  text-decoration: none; cursor: pointer;
}
.button:hover { color: #1a1205; filter: brightness(1.12); }
.button-alt, button.button-alt { background: transparent; color: var(--gold-text); border: 2px solid var(--gold-1); padding-top: 8px; padding-bottom: 8px; }
.button-alt:hover { color: var(--gold-highlight); }
.button-danger, button.button-danger { background: #b3362e; color: #fff; }
.button-danger:hover { color: #fff; }
.button.is-disabled { cursor: not-allowed; background: var(--bg-deep); color: #a9a3c2; border: 2px solid var(--muted-line); }
.button.is-disabled:hover { filter: none; color: #a9a3c2; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; margin: 0 0 8px; }
table { width: 100%; border-collapse: collapse; }
th { color: var(--gold-text); text-align: left; border-bottom: 2px solid var(--gold-2); white-space: nowrap; }
th, td { padding: 8px 12px; }
td { vertical-align: top; }
tbody tr:nth-child(odd) { background-color: var(--bg-accent); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The logged-in player's own leaderboard row (also beyond the top 100). */
tbody tr.is-me { outline: 2px solid var(--gold-1); outline-offset: -2px; color: var(--gold-text); }
tbody tr.gap td { text-align: center; padding: 2px; opacity: 0.6; }

/* ---- Forms ---- */
input, select, textarea { max-width: 100%; padding: 8px 10px; border-radius: 8px; border: 2px solid var(--gold-2);
  background: var(--bg); color: var(--text); font: inherit; }
textarea { width: 100%; }
/* Selects render shorter than text fields by default; same box for both. */
input:not([type="checkbox"]):not([type="radio"]), select { box-sizing: border-box; min-height: 44px; line-height: 1.4; }
.filter-row select { min-width: 9rem; }
input[type="checkbox"] { accent-color: var(--gold-1); width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; }
.field input { width: 100%; }
.convert-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* ---- Footer ---- */
.site-footer { position: relative; margin-top: 48px; background-color: var(--bg-deep); border-top: var(--border-width) solid var(--gold-2);
  padding: 24px 0; font-size: 0.9rem; background-image: url("/static/site/footer.png"); background-size: cover; background-position: center; }
/* Soft fade from the page art into the footer, so short pages do not end in a hard empty band. */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 48px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(11 8 18 / 0.7)); }
/* Dark backing so the text stays readable over the footer art. */
.site-footer .wrap { background-color: rgb(11 8 18 / 0.86); border: 1px solid var(--gold-2); border-radius: 12px; padding: 16px 20px 8px; }
.site-footer p { margin: 0 0 8px; }
.site-footer .notice { max-width: none; }

@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  .panel { padding: 16px; border-radius: 16px; }
  th, td { padding: 6px; }
  table { font-size: 0.92rem; }
  /* Buttons that wrap onto their own line must not touch. */
  .button, button.button { margin-block: 4px; }
  .account-head { flex-wrap: wrap; }
}
/* Long names and file paths wrap instead of widening the page. */
.account-head > div { min-width: 0; }
.account-head h1, code { overflow-wrap: anywhere; }

/* ---- Public pages ---- */
.hero { text-align: center; background-image: url("/static/site/star_texture.png"); }
.hero-logo { height: 120px; max-width: 100%; margin: 0 auto 8px;
  background: url("/static/site/logo-lettering.png") center / contain no-repeat; }
.pitch { font: 400 1.3rem/1.4 "Acme", system-ui, sans-serif; color: var(--gold-text); max-width: 40ch; margin: 0 auto 16px; }
.status-row, .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.badge, .chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 14px; border-radius: 999px;
  background-color: var(--bg-accent); border: 2px solid var(--gold-2); font-size: 0.95rem; }
.chip-centered { display: block; width: fit-content; max-width: 100%; box-sizing: border-box; border-radius: 18px;
  margin-inline: auto; text-align: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #8a8a99; }
.badge-online .dot { background: #4cd964; }
.hero .notice { margin: 16px auto 0; font-size: 0.85rem; opacity: 0.9; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Same-height art box on every card, so the text lines up. */
.feature { border: 2px solid var(--gold-2); display: flex; flex-direction: column; }
.feature img { display: block; width: 100%; height: 180px; object-fit: contain; margin-bottom: 12px; }
.feature img.shot { object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-2); }
.feature h3 { margin: 0 0 4px; font-size: 1.15rem; }
.feature p:last-child { margin: 0; }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--bg-accent); }
.news-list li:last-child { border-bottom: 0; }
.news-list time { color: var(--amber); font-variant-numeric: tabular-nums; }
.news-list .summary { flex-basis: 100%; opacity: 0.85; }

.steps { padding-left: 1.6em; }
.steps li { margin-bottom: 16px; padding-left: 4px; }
.steps li::marker { color: var(--gold-text); font: 600 1.3rem "Cinzel", Georgia, serif; }
.steps h2 { margin: 0 0 4px; }
.steps .button + .button { margin-left: 4px; }

/* ---- Account ---- */
.icon, .icon-text { vertical-align: middle; }
.icon { width: 24px; height: 24px; object-fit: contain; }
/* Supporter badge left of a leaderboard name; empty slot for the rest. */
.supporter-badge { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px;
  object-fit: contain; color: var(--gold-text); text-align: center; line-height: 20px; cursor: help; }
span.supporter-badge[aria-hidden] { cursor: default; }
.supporter-badge.is-brawler { filter: grayscale(1) invert(1) brightness(1.3); opacity: 0.6; }
.account-supporter { display: flex; align-items: center; gap: 0; margin: 0; color: var(--gold-text); }
.portrait { width: 48px; height: 48px; vertical-align: middle; border-radius: 50%; border: 2px solid var(--gold-2); object-fit: cover; }
.account-head { display: flex; align-items: center; gap: 16px; }
.account-head h1 { margin: 0 0 4px; }
.account-head p { margin: 0 0 4px; }
/* Hero portrait in the frame's window (game/frames.css places it per frame;
   the inset below is the fallback). */
.hero-framed { position: relative; width: 120px; flex: none; }
.hero-framed .frame-art { position: relative; display: block; width: 100%; height: auto; }
.frame-portrait { position: absolute; left: 11%; top: 13%; width: 78%; height: 79%;
                  object-fit: cover; object-position: top;
                  mask-size: 100% 100%; mask-repeat: no-repeat; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; }
.rating-number { font: 900 2rem "Cinzel Decorative", Georgia, serif; color: var(--gold-text); }
.tier-name { font: 600 1.2rem "Cinzel", Georgia, serif; }
.tier-badge { width: 64px; height: 64px; object-fit: contain; }
progress, meter { appearance: none; -webkit-appearance: none; height: 16px; border: 2px solid var(--gold-2); border-radius: 8px; background: var(--bg-accent); overflow: hidden; }
progress { width: 100%; max-width: 360px; color: var(--gold-1); }
progress::-webkit-progress-bar { background: var(--bg-accent); }
progress::-webkit-progress-value { background: var(--gold-gradient); }
progress::-moz-progress-bar { background: var(--gold-gradient); }
meter { flex: 1; min-width: 0; }
meter::-webkit-meter-bar { background: var(--bg-accent); border: 0; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--gold-gradient); }
meter::-moz-meter-bar { background: var(--gold-1); }
.currencies, .plain-list { list-style: none; padding: 0; }
.currencies li { margin: 4px 0; }
.bars { list-style: none; padding: 0; max-width: 480px; }
.bars li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.bar-label { width: 1.5em; text-align: right; color: var(--gold-text); }
.bar-count { width: 3em; font-variant-numeric: tabular-nums; }
.fav-heroes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.summary dt { color: var(--amber); }
.summary dd { margin: 0; }

/* ---- Shop and payments ---- */
.balance-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: center;
  padding: 8px 16px; margin-bottom: 16px; background-color: var(--bg-deep); border: 2px solid var(--gold-2); border-radius: 999px; }
.shop-grid { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; overflow: hidden;
  background-color: var(--bg-accent); border: var(--border-width) solid var(--gold-2); border-radius: 16px; }
.card h3 { margin: 0; font-size: 1.05rem; }
.card p { margin: 0; }
.card .button { margin-top: auto; text-align: center; }
.card-art-empty { background-color: var(--bg-deep); border-radius: 8px; }
.price { color: var(--gold-text); }
.state { margin-top: auto; font-weight: 600; }
.is-unaffordable { border-color: var(--muted-line); }
.is-unaffordable .card-art, .is-unaffordable h3 { opacity: 0.65; }
.ribbon { position: absolute; top: 12px; right: -34px; width: 120px; text-align: center; transform: rotate(40deg);
  background-color: #b3261e; color: #fff; font: 600 0.8rem "Cinzel", Georgia, serif; padding: 2px 0; }
/* Art fills a rounded gold frame edge to edge (no inner padding). */
.card-art { box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--gold-1); border-radius: 12px; }
/* Sprites with transparency (emotes, frames) are shown whole. */
#emotes .card-art, #frames .card-art { object-fit: contain; }
.card .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.card .button .icon { width: 20px; height: 20px; }
.card .button s { opacity: 0.7; }
/* Owned: greyed out and not clickable (no link is rendered either). */
.card.is-owned { filter: grayscale(1); opacity: 0.55; border-color: var(--muted-line); }
.exchange .rate { font: 400 1.15rem "Acme", system-ui, sans-serif; color: var(--gold-text); }
.offer-grid { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.offer { display: flex; flex-direction: column; gap: 6px; padding: 14px; text-align: center;
  background-color: var(--bg-accent); border: 2px solid var(--gold-2); border-radius: 16px; }
.offer p { margin: 0; }
.offer-get { font: 600 1.3rem "Cinzel", Georgia, serif; color: var(--gold-text); }
.offer-pay { opacity: 0.85; }
.offer .button { margin-top: auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.offer .need { font-size: 0.95rem; }
.offer.is-unaffordable { opacity: 0.7; }
.card .need-note { margin-top: auto; text-align: center; }
.card .need-note + .button { margin-top: 4px; }
/* Five exchange tiles in one row on wide screens. */
@media (min-width: 900px) { .offer-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---- Admin section (sbb_site/admin.py) ---- */
.assign-form { display: flex; flex-wrap: wrap; gap: 6px; }
.assign-form input { width: 11em; padding: 4px 8px; min-height: 0; }
.assign-form .button { padding: 4px 14px; font-size: 0.95rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.stat, .stat-grid > div { background-color: var(--bg-accent); border: 1px solid var(--gold-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.stat-value { font: 400 1.6rem "Acme", system-ui, sans-serif; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.85rem; opacity: 0.85; }
/* Account statistics use dt/dd instead of .stat spans. */
.stat-grid dt { color: var(--amber); font-size: 0.85rem; }
.stat-grid dd { margin: 0; font: 600 1.3rem "Cinzel", Georgia, serif; color: var(--gold-text); }
.plain-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.filter-row, .action-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; margin-bottom: 16px; }
.action-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--bg-accent); }
.action-form h3 { flex-basis: 100%; margin: 0; font-size: 1.05rem; }
.action-form label, .filter-row label { display: flex; flex-direction: column; gap: 4px; }
.switches { list-style: none; padding: 0; margin: 0 0 16px; columns: 2 280px; }
.switches li { margin: 6px 0; }
.rows { list-style: none; padding: 0; margin: 0 0 8px; }
.rows li { padding: 6px 0; border-bottom: 1px solid var(--bg-accent); overflow-wrap: anywhere; }
.rows li:last-child { border-bottom: 0; }
.inventory { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.inventory li { padding: 2px 10px; border-radius: 999px; background-color: var(--bg-accent); border: 1px solid var(--gold-2); font-size: 0.85rem; }
.kv { margin-right: 12px; }
.kv b { color: var(--gold-text); font-weight: 600; }
.shot { max-width: 100%; max-height: 360px; border: 2px solid var(--gold-2); border-radius: 8px; }
.attachments { list-style: none; padding: 0; }
.secret code { font-size: 1.4rem; user-select: all; }

/* Gem packs: the game's gem-pile art, a "best value" badge on the best deal. */
.pack { text-align: center; align-items: center; }
.pack-art { width: 100%; height: 120px; object-fit: contain; }
.pack form { margin-top: auto; width: 100%; }
.pack form .button { width: 100%; }
.pack.is-best { border-color: var(--gold-1); box-shadow: 0 0 0 2px var(--gold-1) inset; }
.best-badge { position: absolute; top: 6px; right: 6px; width: 72px; height: auto; }

/* Private groups */
.group-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 8px 0; }
.group-code { font-size: clamp(1.8rem, 7vw, 2.6rem); letter-spacing: 0.18em; padding: 6px 18px;
              color: var(--gold-text); background: var(--bg-accent); border: 2px solid var(--gold-2);
              border-radius: 12px; user-select: all; }
.rules-list li, .member-list li { padding: 2px 0; }
.rules-list li::before { content: "• "; color: var(--gold-1); }
.member-list .member-name { font-weight: 600; }
.member-list .ready { color: #4cd964; }
.chip-small { padding: 0 10px; font-size: 0.8rem; }
.preset-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px;
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.preset { background: var(--bg-accent); border: 2px solid var(--gold-2); border-radius: 12px; padding: 16px; }
.preset h3 { margin: 0 0 8px; }
.preset .action-row { margin: 8px 0 0; }
.rules-form fieldset { border: 2px solid var(--gold-2); border-radius: 12px; padding: 12px 16px 16px; margin: 0 0 20px; }
.rules-form legend { padding: 0 8px; color: var(--gold-text); font-weight: 600; }
.rules-form .choice { display: block; padding: 4px 0; }
.rules-form .choice[hidden], .ban-level[hidden] { display: none; }
.number-row { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.check-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.check-grid .choice { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ban-group { border-top: 1px solid rgb(192 135 59 / 0.4); padding: 8px 0; }
.ban-group summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ban-search { width: 100%; max-width: 320px; margin: 8px 0; }
.ban-level .level-label { margin: 10px 0 2px; font-size: 0.9rem; color: var(--gold-1); }
.rules-form input[type=text] { width: 100%; max-width: 320px; display: block; margin-top: 4px; }
.rules-form fieldset > p:first-of-type { margin-top: 4px; }
.rules-form fieldset > label:not(.choice) { display: block; margin-bottom: 16px; }
.rules-form .action-row { margin: 0 0 12px; }
.rules-form fieldset > .hint:last-child { margin-bottom: 0; }
.number-field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.number-field input { width: 11rem; max-width: 100%; }
.heading-emoji { font-size: 0.85em; margin-left: 4px; vertical-align: 0.05em; }
.season-warning { margin-bottom: 20px; }
.season-warning p { margin: 0 0 6px; }
.season-warning p:last-child { margin: 0; }
.recovery-notice { margin: 0 0 20px; }
.recovery .group-code { font-size: clamp(0.95rem, 4.2vw, 1.3rem); letter-spacing: 0.04em; padding: 6px 14px; white-space: nowrap; }
/* Admin player page */
.back-link { margin: 0 0 12px; }
.player-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.chip-bad { background-color: #5a1e1b; border-color: #e0645c; color: #ffd9d6; }
.detail-grid { display: grid; gap: 12px 24px; margin: 0 0 20px;
               grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.detail-grid dt { color: var(--amber); font-size: 0.85rem; }
.detail-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.action-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.action-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0;
               background-color: var(--bg-accent); border: 2px solid var(--gold-2); border-radius: 12px; padding: 16px; }
.action-card h3 { margin: 0; font-size: 1.05rem; }
.action-card .hint { margin: 0; }
.action-card label { display: flex; flex-direction: column; gap: 4px; }
.action-card > .button, .action-card > button { align-self: flex-start; margin-top: auto; }
.action-card .action-row { margin: auto 0 0; }