/*
 * site.css — shared stylesheet for every RuneBR site page: site/index.html, site/hiscores/index.html,
 * the generated site/status.html (server/tools/status-page.ts) and the
 * server-rendered account page (server/src/web/account-web.ts). Each of those pages copies the same
 * top-bar markup (the `.site-bar` / `.site-nav` block) right after <body> — see any of them for the
 * exact HTML. The static pages also link `site/site.js`, which fills the Account link with the
 * default character's face and name; the account page draws that chip server-side instead.
 */
:root {
  --bg: #0e1116;
  --panel: #161a21;
  --panel-2: #1d222b;
  --edge: #2a303b;
  --edge-hi: #3b4352;
  --text: #e6e9ee;
  --muted: #8d95a3;
  --link: #8ab4f8;
  --primary: #2f6fd6;
  --primary-hi: #4a86e8;
  --glow: rgba(47,111,214,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(1200px 480px at 50% -220px, rgba(47,111,214,.10), transparent 70%), var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.tagline { color: var(--muted); margin: 4px 0 0; }
section { border-top: 1px solid var(--edge); padding: 16px 0; }
h2 { margin: 0 0 8px; font-size: 1.1rem; }
footer { color: var(--muted); font-size: 0.85rem; margin-top: 30px; border-top: 1px solid var(--edge); padding-top: 14px; }
footer a { color: var(--muted); }
footer a.toplist-badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); color: var(--text); text-decoration: none; }
h3 { margin: 0 0 8px; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 1px solid var(--edge-hi); border-radius: 3px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: var(--text);
  font: inherit; font-weight: 600; letter-spacing: .02em; line-height: 1; text-decoration: none; cursor: pointer; appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color .15s, box-shadow .15s, color .15s;
}
.btn.primary { background: linear-gradient(180deg, var(--primary-hi), var(--primary)); border-color: var(--primary-hi); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.btn.quiet { background: transparent; box-shadow: none; border-color: var(--edge); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btn[hidden] { display: none; }
.btn:hover { border-color: #56607a; color: #fff; }
.btn.primary:hover { border-color: #7aa7f0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px var(--glow); }
.btn:active { transform: translateY(1px); }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 3px; padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.page { max-width: 920px; margin: 0 auto; padding: 40px 20px 60px; }

/* Top bar — one identical `.site-bar` div, copied into the four pages above. It is a div, not a
   <header>, and every class is prefixed `site-`, because each page already has its own `header {}`
   rules of its own. */
.site-bar { background: linear-gradient(180deg, #131821, #0f1319); border-bottom: 1px solid var(--edge); }
.site-nav { max-width: 920px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; gap: 4px; box-sizing: border-box; }
.site-brand { color: var(--text); text-decoration: none; font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-right: 18px; }
.site-links { display: flex; }
.site-links a {
  display: flex; align-items: center; height: 64px; padding: 0 12px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; box-sizing: border-box;
}
.site-links a:hover { color: var(--text); }
.site-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--primary-hi); text-shadow: 0 0 12px var(--glow); }
.site-play {
  margin-left: auto; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  background: linear-gradient(180deg, var(--primary-hi), var(--primary)); border: 1px solid var(--primary-hi); border-radius: 3px; color: #fff; font-size: 15px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: border-color .15s, box-shadow .15s;
}
.site-play:hover { border-color: #7aa7f0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px var(--glow); }
.site-account {
  margin-left: 8px; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  border: 1px solid var(--edge-hi); border-radius: 3px; background: rgba(255,255,255,.02); color: var(--text); font-size: 15px; text-decoration: none; box-sizing: border-box;
}
.site-account:hover { border-color: #56607a; }
.site-account[aria-current="page"] { border-color: var(--primary); }
.site-face { height: 36px; width: auto; margin: 0 8px 0 -8px; }
/* A talking face sits in a <picture> whose reduced-motion <source> is the still; the wrapper adds no box. */
.site-account > picture, .portrait > picture { display: contents; }
.site-face-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Moving between these same-origin pages cross-fades instead of flashing, so the identical top bar
   appears to stay put. CSS only, so it also covers the no-script account page. Browsers without
   cross-document view transitions, and viewers who ask for reduced motion, load pages as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@media (max-width: 760px) {
  .page { padding: 24px 16px 40px; }
  .site-nav { flex-wrap: wrap; padding: 8px 16px 0; min-height: 0; }
  .site-brand { font-size: 19px; }
  .site-play { padding: 0 16px; }
  .site-links { order: 1; flex-basis: 100%; margin-top: 8px; border-top: 1px solid var(--edge); overflow-x: auto; }
  .site-links a { height: 44px; padding: 0 8px; font-size: 13px; flex: none; }
}

/* Profile header components. Two consumers: the hiscores player view (site/hiscores/index.html,
   now) and the account page (server/src/web/account-web.ts, a later slice). Markup contract:
     <section class="profile-head"><div class="banner"></div>
       <div class="profile-row"><span class="portrait frame-none"><img ...></span>
         <div class="profile-meta"><h2 class="profile-name">..</h2><p class="profile-line">..</p></div>
       </div></section>
   `.banner.has-bg` takes its picture from the `--bg` custom property set by script. */
.profile-head { margin-bottom: 14px; border-top: 0; padding: 0; }
.banner {
  position: relative; min-height: 170px; border-radius: 3px; border: 1px solid var(--edge);
  background: linear-gradient(135deg, #1a2333, #0e1116);
}
.banner.has-bg { background: linear-gradient(180deg, rgba(14,17,22,.15), rgba(14,17,22,.85)), var(--bg) center / cover no-repeat; }
.profile-row { display: flex; align-items: flex-end; gap: 16px; padding: 0 16px; margin-top: -56px; position: relative; }
.profile-meta { padding-bottom: 8px; min-width: 0; }
.profile-name { margin: 0; font-size: 1.6rem; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.profile-line { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) { .profile-row { flex-wrap: wrap; } }

/* Portrait box: a fixed 112px square holding the 96px chathead. Frames are an allowlist of exactly
   none/bronze/silver/gold. They are equal appearance choices a player picks, NOT earned
   bronze/silver/gold tiers, so no ordering or totals are implied. A frame changes only the border
   colour and a faint tint, no gradients or animation, so contrast stays readable on dark panels. */
.portrait {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none;
  width: 112px; height: 112px; background: var(--panel); border: 2px solid var(--edge); border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.6);
}
.portrait img { width: 96px; height: 96px; object-fit: contain; }
.portrait.no-face img { display: none; }
.frame-none { }
.frame-bronze { border-color: #b07a4e; background: #2a2320; }
.frame-silver { border-color: #c2c8cf; background: #26282b; }
.frame-gold { border-color: #d4af37; background: #2b2820; }

/* Compact button, tab bar and tile grid (account Rewards customizer). The tab bar is script-free:
   hidden radios come first, the bar's labels toggle them, and the page's CSS shows the matching pane. */
.btn.sm { height: 32px; padding: 0 10px; font-size: 14px; }
.tabbar { display: flex; gap: 0; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.tabbar label {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; color: var(--muted);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; border-radius: 0;
  white-space: nowrap; cursor: pointer; transition: color .15s;
}
.tabbar label:hover { color: var(--text); }
#rw-cat-hat:checked ~ .tabbar label[for="rw-cat-hat"],
#rw-cat-anim:checked ~ .tabbar label[for="rw-cat-anim"],
#rw-cat-background:checked ~ .tabbar label[for="rw-cat-background"],
#rw-cat-frame:checked ~ .tabbar label[for="rw-cat-frame"] {
  color: #fff; border-bottom-color: var(--primary-hi); background: linear-gradient(0deg, rgba(47,111,214,.16), transparent 70%);
}
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tile {
  display: grid; grid-template-rows: 64px auto auto 32px; gap: 4px; justify-items: center; align-items: center;
  text-align: center; padding: 8px; border: 1px solid var(--edge); border-radius: 3px; background: var(--panel); min-width: 0;
  transition: border-color .15s;
}
.tile:hover { border-color: var(--edge-hi); }
.tile.worn { border-color: var(--primary-hi); box-shadow: inset 0 0 0 1px var(--primary-hi), 0 0 14px var(--glow); }
.tile-img { width: 100%; height: 64px; object-fit: contain; display: flex; align-items: center; justify-content: center; }
.tile-img.bg { object-fit: cover; border-radius: 4px; }
.tile.locked .tile-img { opacity: .45; }
.tile-frame { display: inline-block; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--edge); border-radius: 6px; }
.tile-label { font-size: 13px; line-height: 1.2; max-width: 100%; max-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-price { font-size: 12px; color: var(--muted); }
.tile.worn .tile-price { color: var(--link); }
.tile-slot { height: 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.tile-slot form { margin: 0; }