/* ── UnrealOT components: plate depths, buttons, fields, nav, gem, data ── */

/* THE PLATE, depths. Base .plate is defined in tokens/brand.css (flush). */
/* Depths re-tint --plate-face only, so the stone tooth, sheen and steel inlay
   defined on .plate survive. Never override `background` here. */
.plate--sunken {
  --plate-face: linear-gradient(180deg, #0b0815 0%, var(--stone) 60%, #0e0b18 100%);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.65),
    inset 0 0 0 1px rgba(204,209,224,.08),
    inset 0 -1px 0 rgba(204,209,224,.05),
    inset 0 14px 26px rgba(0,0,0,.4);
}
/* A recess is cut into the slab, not set on it: no gems, no cast shadow. */
.plate--sunken::before, .plate--sunken::after { content: none; }

.plate--raised {
  --plate-face: linear-gradient(180deg, var(--stone-hi) 0%, var(--stone) 34%, #0c0916 100%);
  box-shadow:
    0 30px 70px rgba(0,0,0,.66),
    0 5px 16px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(204,209,224,.16),
    inset 0 1px 0 rgba(232,228,240,.10),
    inset 0 -20px 44px -24px rgba(0,0,0,.85);
}

/* ── BUTTONS. Exactly one gold button per screen. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 1.6px; text-decoration: none;
  padding: 14px 28px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform .18s ease-out, box-shadow .22s ease-out,
              border-color .22s ease-out, background-color .22s ease-out, color .22s ease-out;
}
.btn:focus-visible { outline: 2px solid var(--amethyst); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed; pointer-events: none; filter: grayscale(.65) brightness(.55);
  box-shadow: none;
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-hot) 0%, var(--gold) 38%, var(--gold-mid) 72%, var(--gold-deep) 100%);
  color: #241703; border-color: var(--gold-deep);
  text-shadow: 0 1px 0 rgba(255,246,220,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 14px rgba(122,84,20,.35),
    0 10px 26px rgba(0,0,0,.55);
}
.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 14px rgba(122,84,20,.3),
    0 12px 30px rgba(0,0,0,.55),
    0 0 30px rgba(255,154,60,.35);
}
.btn-gold:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(90,60,10,.5), 0 6px 16px rgba(0,0,0,.5); }

/* a single glint crossing the foil on hover. The pseudo paints over the label
   on purpose: it reads as light moving across metal, not as an overlay. */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn-gold:hover::after { animation: gold-sheen .72s cubic-bezier(.3,.7,.4,1); }
@keyframes gold-sheen {
  0%   { left: -60%; opacity: .95; }
  100% { left: 115%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn-gold:hover::after { animation: none; } }


/* bordered and transparent. Same .btn box as the gold, so the two sit level. */
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--brd-am);
}
.btn-ghost:hover {
  border-color: var(--amethyst); background: rgba(160,107,255,.11);
  box-shadow: 0 0 20px rgba(160,107,255,.18);
}
.btn-ghost:active { background: rgba(160,107,255,.16); }

.btn-quiet { background: transparent; color: var(--ink-dim); padding: 10px 14px; }
.btn-quiet:hover { color: var(--amethyst); }

/* ── FORM FIELDS: inset carved wells, amethyst focus ring ── */
.field { display: grid; gap: 8px; }
.field-label {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim);
}
.input {
  width: 100%; box-sizing: border-box; appearance: none;
  background: linear-gradient(180deg, #0b0815 0%, #110d1d 55%, #16112a 100%);
  border: 1px solid var(--stone-brd); border-top-color: #040207;
  border-radius: 8px; color: var(--ink);
  font-family: var(--body); font-size: 16px; padding: 12px 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(204,209,224,.06);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.input::placeholder { color: var(--ink-dim); opacity: 1; }
.input:focus {
  border-color: var(--brd-am);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.7),
    0 0 0 3px rgba(160,107,255,.22),
    0 0 18px rgba(160,107,255,.18);
}
select.input {
  padding-right: 40px; cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a06bff' stroke-width='1.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0b0815 0%, #110d1d 55%, #16112a 100%);
  background-repeat: no-repeat; background-position: right 16px center, center;
}
select.input option { background: var(--stone); color: var(--ink); }
.field-msg { font-size: 13.5px; margin: 0; }
.field--error .input { border-color: rgba(255,128,128,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 3px rgba(255,128,128,.14); }
.field--error .field-msg { color: var(--danger); }
.field--ok .input { border-color: rgba(127,230,163,.5); }
.field--ok .field-msg { color: var(--ok); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 48px;
  display: grid; place-items: center; background: none; border: 0;
  color: var(--ink-dim); cursor: pointer; border-radius: 0 8px 8px 0;
}
.pw-toggle:hover { color: var(--amethyst); }
.pw-toggle:focus-visible { outline: 2px solid var(--amethyst); outline-offset: -3px; }

/* checkbox + radio: carved wells with a gem set in them */
.check, .radio { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 15.5px; position: relative; }
.check input, .radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box, .radio .box {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg, #0b0815, #16112a);
  border: 1px solid var(--stone-brd); border-top-color: #040207;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.check .box { border-radius: 5px; }
.radio .box { border-radius: 50%; }
.check .box::after {
  content: ""; width: 9px; height: 9px; transform: rotate(45deg) scale(0);
  background: linear-gradient(135deg, var(--amethyst), var(--am-deep));
  transition: transform .18s ease-out;
}
.radio .box::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle at 35% 30%, #d9c2ff, var(--amethyst) 55%, var(--am-deep));
  transition: transform .18s ease-out;
}
.check input:checked + .box, .radio input:checked + .box {
  border-color: var(--brd-am);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 0 10px rgba(160,107,255,.28);
}
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.radio input:checked + .box::after { transform: scale(1); }
.check input:focus-visible + .box, .radio input:focus-visible + .box { outline: 2px solid var(--amethyst); outline-offset: 2px; }
.check input[disabled] ~ *, .radio input[disabled] ~ * { opacity: .45; cursor: not-allowed; }

/* discord + oauth buttons */
.btn-discord {
  background: linear-gradient(180deg, #6a76f5 0%, #5865F2 45%, #4550c9 100%);
  color: #fff; border-color: #3c46b0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 12px rgba(30,36,120,.35), 0 8px 20px rgba(0,0,0,.45);
}
.btn-discord:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(0,0,0,.45), 0 0 24px rgba(88,101,242,.45);
}
.btn-discord svg, .btn-oauth svg { width: 17px; height: 17px; flex: none; }
.btn-oauth { background: rgba(232,228,240,.04); color: var(--ink); border-color: var(--brd-steel); }
.btn-oauth:hover { border-color: var(--steel); background: rgba(232,228,240,.09); box-shadow: 0 0 18px rgba(204,209,224,.15); }
.nav-discord {
  width: 40px; height: 40px; padding: 0; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-discord svg { width: 19px; height: 19px; }

/* ── NAVIGATION ──
   One bar for the whole site. These values mirror the 72px header in
   unrealot.css (.site-header .wrap, .brand .sigil, .brand .mark, nav.main a,
   nav.main a.cta, nav.main a.discord) so the home and the inner pages wear the
   same bar. Change them in both files or in neither. */
.site-header {
  --hdr-h: 72px;
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(10,7,20,.96), rgba(10,7,20,.84));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brd);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  height: var(--hdr-h); display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand picture { display: block; line-height: 0; }
.brand img { width: 42px; height: 42px; display: block; border-radius: 50%;
  filter: drop-shadow(0 2px 10px rgba(160,107,255,.45)); }
.brand .brand-word { font-family: var(--wordmark); font-weight: 900; font-size: 21px; line-height: 1;
  letter-spacing: 3px; text-transform: uppercase; }
.brand .brand-word .foil-gold { margin-left: .14em; }
.site-nav { display: flex; gap: 2px; margin-left: auto; margin-right: 0;
  white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.site-nav a, .header-cta .hdr-auth {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-dim);
  padding: 9px 13px; border-radius: 8px; position: relative; white-space: nowrap;
  text-decoration: none; transition: color .2s ease-out, background .2s ease-out;
}
.site-nav a:hover, .header-cta .hdr-auth:hover { color: var(--ink); background: rgba(160,107,255,.10); }
.site-nav a[aria-current="page"], .header-cta .hdr-auth[aria-current="page"] { color: var(--amethyst); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amethyst), transparent);
}
/* The action cluster: the language flag, Log in and Create account (or My
   Account), the Discord glyph and the gold Play. Same gaps as nav.main. */
.header-cta { flex: none; display: flex; align-items: center; gap: 2px; }
.header-cta .btn-gold { padding: 10px 18px; font-size: 12.5px; letter-spacing: 1.8px; border-radius: 9px; margin-left: 8px; }
/* The Discord is a bare glyph, the same 20px one nav.main draws. The gold
   button is the only button shape up here. */
.header-cta .nav-discord {
  width: auto; height: auto; padding: 9px 10px; border: 0; background: none;
  border-radius: 8px; color: #aab2ff;
  transition: color .18s ease-out, transform .18s ease-out;
}
.header-cta .nav-discord:hover { color: #fff; background: none; box-shadow: none; transform: translateY(-1px); }
.header-cta .nav-discord svg { width: 20px; height: 20px; }
.nav-toggle {
  display: none; margin-left: auto; background: none; cursor: pointer;
  border: 1px solid var(--brd-am); border-radius: 8px; color: var(--ink);
  min-width: 44px; min-height: 44px; padding: 0; place-items: center; font-size: 18px;
}
.nav-toggle:focus-visible { outline: 2px solid var(--amethyst); outline-offset: 2px; }

/* Wide bar: the type tightens continuously instead of wrapping, the same
   clamps unrealot.css uses from 941 up. */
@media (min-width: 941px) {
  .header-inner { padding: 0 32px; }
  .site-nav a, .header-cta .hdr-auth {
    font-size: clamp(12px, .68vw, 12.5px);
    letter-spacing: clamp(0px, .1vw, 1.8px);
    padding-left: clamp(4px, .6vw, 13px);
    padding-right: clamp(4px, .6vw, 13px);
  }
  .header-cta .btn-gold { font-size: clamp(12px, .68vw, 12.5px); letter-spacing: clamp(0px, .1vw, 1.8px);
    margin-left: clamp(4px, .5vw, 8px); padding-left: clamp(11px, .9vw, 18px); padding-right: clamp(11px, .9vw, 18px); }
}
/* The width budget for the 12px floor (2026-09-02). Seven links at 12px needed
   677px of a 616px slot at 1440 and the Shop label slid under the flag. Tracking
   and side padding give way first; the type never drops under 12px. Measured on
   /v2/ at 1440 and 1280. */
@media (min-width: 941px) and (max-width: 1500px) {
  .site-nav a, .header-cta .hdr-auth { font-size: 12px; letter-spacing: .4px; padding-left: 7px; padding-right: 7px; }
  .header-cta .btn-gold { margin-left: 4px; }
  .site-header .header-cta .lsw { margin: 0 2px; }
}
@media (min-width: 941px) and (max-width: 1360px) {
  .site-nav a, .header-cta .hdr-auth, .header-cta .btn-gold { letter-spacing: 0; }
}
@media (min-width: 941px) and (max-width: 1300px) {
  .site-nav a, .header-cta .hdr-auth { padding-left: 4px; padding-right: 4px; }
  .header-cta { gap: 0; }
  /* the sigil stands alone; the labels keep their shape */
  .site-header .brand .brand-word { display: none; }
}
@media (min-width: 941px) and (max-width: 1000px) {
  .header-inner { padding: 0 20px; }
  .site-nav a, .header-cta .hdr-auth { padding-left: 3px; padding-right: 3px; }
}
/* The floor is 12px. Between 941 and 1059 the eleven labels, the flag, the
   glyph and the gold Play do not fit the bar at 12px with the tracking and
   the padding already at zero, so that one band holds 11px. The clean fix is
   to move the fold to 1060px in nav.js and both stylesheets together. */
@media (min-width: 941px) and (max-width: 1059px) {
  .site-nav a, .header-cta .hdr-auth, .header-cta .btn-gold { font-size: 11px; }
}
/* Under 940 the nav folds into the drawer, the same point unrealot.css folds
   nav.main. The gold Play stays in the bar as a compact button, the flag stays
   beside it, and the drawer lists Play first. */
@media (max-width: 940px) {
  .site-nav, .nav-discord, .header-cta .hdr-auth { display: none; }
  .header-cta { order: 1; margin-left: auto; min-width: 0; }
  /* Jogar agora and Jugar ahora run wider than Play now. The compact button
     tightens so flag, Play and the burger still fit a 390 bar in every language. */
  .header-cta .btn-gold { padding: 9px 12px; font-size: 12px; letter-spacing: .4px; margin-left: 4px;
    white-space: nowrap; min-height: 44px; box-sizing: border-box; }
  .nav-toggle { display: grid; order: 2; margin-left: 0; }
  .drawer-panel .btn-gold { order: -1; margin: 0 0 14px; min-height: 44px; box-sizing: border-box; }
}
/* The sigil alone on a phone, so the flag, the compact Play and the burger fit at 390. */
@media (max-width: 600px) { .site-header .brand .brand-word { display: none; } }
/* The narrowest phones keep the flag and drop its two-letter code. */
@media (max-width: 420px) { .header-cta .lsw-code { display: none; } }

/* mobile drawer */
/* ⛔ overflow:hidden is load-bearing. .drawer-panel is translateX(103%)
   when closed, so without it the panel sits past the right edge, widens
   the document and every Design page scrolls sideways on a phone (375px
   viewport, 526px document). Do NOT solve this with overflow-x:hidden on
   body: .site-header is position:sticky and a scroll container on an
   ancestor silently kills sticky. */
/* ⛔ visibility:hidden is NOT enough to keep a closed drawer out of the tab
   order here: it is transitioned (0s duration, .3s delay) and was observed
   stuck at `visible` long after closing, at which point Tab reached the 12
   off-screen links AND focusing one scrolled the closed panel into view.
   The [inert] attribute is what actually removes it, and it is set from JS.
   ⛔ Do not back it with .drawer[inert]{visibility:hidden}: inert never
   affects painting, which is exactly why it does not spoil the slide-out,
   and that rule would blank the panel mid-animation. */
.drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; overflow: hidden; transition: visibility 0s .3s; }
.drawer.open { visibility: visible; transition: visibility 0s; }
.drawer .drawer-scrim { position: absolute; inset: 0; background: rgba(4,2,8,.62); opacity: 0; transition: opacity .24s ease-out; }
.drawer .drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  /* ⛔ border-box is load-bearing. The panel carries 22px padding and a 1px
     border, and without this the used width is 320+44+1 = 365, so on a 375px
     phone the 86vw cap left a 10px sliver of scrim instead of the 55px it
     asks for, and the drawer read as a full-screen takeover. */
  box-sizing: border-box;
  transform: translateX(103%); transition: transform .26s ease-out;
  background: linear-gradient(180deg, var(--stone-hi) 0%, var(--stone) 42%, #0e0b18 100%);
  border-left: 1px solid var(--brd);
  box-shadow: inset 0 1px 0 rgba(204,209,224,.07), -24px 0 60px rgba(0,0,0,.6);
  padding: 22px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  padding: 15px 8px; border-bottom: 1px solid var(--brd);
}
.drawer-panel a:hover { color: var(--amethyst); }
.drawer-panel .btn { margin-top: 20px; }

/* footer */
.site-footer {
  margin-top: 90px; border-top: 1px solid var(--brd);
  background: linear-gradient(180deg, #0d0918 0%, #060409 100%);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 20px 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
}
.footer-col h4 {
  font-family: var(--display); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 14px;
}
.footer-col a { display: block; color: var(--ink-dim); padding: 5px 0; font-size: 15px; }
.footer-col a:hover { color: var(--amethyst); }
.footer-fine {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 30px;
  border-top: 1px solid var(--brd); color: var(--ink-dim); font-size: 13.5px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }

/* ── THE GEM: faceted, bezel-set, five vocations. Pure CSS. ── */
.gem {
  --gem: var(--amethyst);
  width: 64px; height: 64px; border-radius: 50%; position: relative; flex: none;
  background: linear-gradient(180deg, #2b2440, #0c0916);
  box-shadow:
    inset 0 1px 0 rgba(204,209,224,.22),
    inset 0 -2px 4px rgba(0,0,0,.8),
    0 8px 20px rgba(0,0,0,.55);
}
.gem::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: conic-gradient(from 25deg,
    color-mix(in oklab, var(--gem), white 42%) 0deg 40deg,
    color-mix(in oklab, var(--gem), black 18%) 40deg 85deg,
    color-mix(in oklab, var(--gem), white 16%) 85deg 140deg,
    color-mix(in oklab, var(--gem), black 42%) 140deg 200deg,
    color-mix(in oklab, var(--gem), white 8%)  200deg 255deg,
    color-mix(in oklab, var(--gem), black 30%) 255deg 310deg,
    color-mix(in oklab, var(--gem), white 42%) 310deg 360deg);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.25);
}
.gem::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background:
    radial-gradient(38% 30% at 32% 24%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(120% 90% at 50% 118%, rgba(0,0,0,.45), transparent 55%);
}
.gem--breathe { animation: gem-breathe 4.4s ease-in-out infinite; }
@keyframes gem-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(204,209,224,.22), inset 0 -2px 4px rgba(0,0,0,.8), 0 8px 20px rgba(0,0,0,.55), 0 0 12px color-mix(in oklab, var(--gem), transparent 60%); }
  50%      { box-shadow: inset 0 1px 0 rgba(204,209,224,.22), inset 0 -2px 4px rgba(0,0,0,.8), 0 8px 20px rgba(0,0,0,.55), 0 0 26px color-mix(in oklab, var(--gem), transparent 40%); }
}
.gem--knight   { --gem: var(--steel); }
.gem--paladin  { --gem: var(--gold); }
.gem--sorcerer { --gem: var(--amethyst); }
.gem--druid    { --gem: var(--ok); }
.gem--monk     { --gem: var(--ember); }
@media (prefers-reduced-motion: reduce) { .gem--breathe { animation: none; } }

/* ── DATA DISPLAY ── */
.ladder { width: 100%; border-collapse: collapse; }
.ladder th {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--brd);
}
.ladder td { padding: 13px 14px; border-bottom: 1px solid rgba(160,150,190,.08); font-size: 15.5px; }
.ladder tbody tr { transition: background-color .2s ease-out; }
.ladder tbody tr:hover { background: rgba(160,107,255,.05); }
.ladder .rank { font-family: var(--display); font-weight: 700; color: var(--ink-dim); width: 48px; }
.ladder tr:nth-child(-n+3) .rank { color: var(--gold); }
.ladder .num { font-variant-numeric: tabular-nums; text-align: right; }

.stat-tile { padding: 20px 24px 18px; }
.stat-num {
  font-family: var(--display); font-weight: 900; font-size: 42px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px;
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--brd); border-radius: 999px; padding: 5px 13px 5px 10px;
  background: rgba(20,16,32,.7);
}
.pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-dim); }
.pill--live { border-color: rgba(127,230,163,.3); }
.pill--live i { background: var(--ok); animation: pill-pulse 2.6s ease-out infinite; }
.pill--danger { border-color: rgba(255,128,128,.3); }
.pill--danger i { background: var(--danger); }
@keyframes pill-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(127,230,163,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(127,230,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(127,230,163,0); }
}
@media (prefers-reduced-motion: reduce) { .pill--live i { animation: none; } }

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger-entry { position: relative; padding: 0 0 24px 30px; }
.ledger-entry::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -2px; width: 1px;
  background: linear-gradient(180deg, var(--brd-am), transparent);
}
.ledger-entry:last-child::before { display: none; }
.ledger-entry::after {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--amethyst), var(--am-deep));
  box-shadow: 0 0 10px var(--am-glow);
}
.ledger-time {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
}
.ledger-title { margin: 3px 0 0; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   ⛔ MOBILE GUARD FOR THE RECOVERED DESIGN PAGES.
   media.html, account.html and login.html carry ZERO media queries of their
   own - they were authored at desktop width and never given a phone layout.
   At 375px they ran 455, 526 and 385 wide and scrolled sideways.
   .sc-host is support.js's render host, so this is scoped to those pages and
   does not touch home-v3 (index.html), which has its own responsive CSS.
   This is a GUARD, not a design: it stops the sideways scroll. Any of these
   pages that is ever going to ship still needs a real mobile layout.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .sc-host, .sc-host * { max-width: 100%; }
  .sc-host [class*="grid"], .sc-host [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⛔ THE PREVIEW FLAG IS NOT DECORATION.
   These nine pages are Design mockups on the production domain. They show a
   logged-in session to anonymous visitors, a coin balance, invented store
   prices, a real ranked player's name on invented stats, a login that rejects
   correct passwords, and a signup that reports success and sends nothing
   anywhere. Without this strip a visitor cannot tell any of that.
   It is fixed to the bottom so it cannot collide with the sticky header, and
   pointer-events:none so it never eats a click.
   Do not remove it while these pages carry fabricated data.
   ══════════════════════════════════════════════════════════════════════════ */
.preview-flag{
  position:fixed; left:0; right:0; bottom:0; z-index:9999; pointer-events:none;
  background:linear-gradient(90deg, rgba(123,63,242,.30), rgba(6,4,9,.95) 46%, rgba(123,63,242,.30));
  border-top:1px solid var(--brd-am);
  font-family:var(--display); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); text-align:center;
  padding:9px 14px; text-shadow:0 1px 3px rgba(0,0,0,.9);
}
@media (max-width:520px){ .preview-flag{ font-size:12px; letter-spacing:.08em; padding:8px 10px; } }

/* ⛔ The locked-book panel read as broken on a phone: the search box still
   showed (disabled and useless), the empty state carried 64px of desktop
   top-padding, and the footer's source path was clipped off the right edge
   with no way to wrap. */
.cyc-search.is-hidden{display:none}
@media (max-width:720px){
  .cyc-empty{padding:26px 16px!important}
  .cyc-empty .line{font-size:15px;margin-bottom:16px}
  .cyc-foot{flex-wrap:wrap;gap:4px 12px}
  .cyc-foot .src{margin-left:0;flex:1 1 100%;word-break:break-all;font-size:12px}
}

/* Skip link. The first focusable element on every page. It sits above the
   viewport until it takes keyboard focus, then drops in as a gold plate over
   the sticky header. The target (main, or the hero on the home) carries
   tabindex="-1" so focus lands there in every browser, without a ring. */
.skip { position:absolute; left:12px; top:-200px; z-index:300; font-family:var(--display); font-weight:700;
  font-size:13px; letter-spacing:1.4px; text-transform:uppercase; color:#241703; text-decoration:none;
  background:linear-gradient(180deg,#ffe49a 0%, var(--gold) 34%, var(--gold-mid) 72%, var(--gold-deep) 100%);
  padding:12px 18px; border-radius:8px; box-shadow:0 10px 26px rgba(0,0,0,.55); white-space:nowrap; }
.skip:focus, .skip:focus-visible { top:12px; outline:2px solid var(--amethyst); outline-offset:2px; }
#main:focus, #content:focus { outline:none; }

/* Keyboard focus: one ring for every interactive element. Fields keep their
   glow as well. Rules above that draw the same ring stay as they are. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline:2px solid var(--amethyst); outline-offset:2px; }

/* Placeholder copy reads at the secondary ink, not the browser grey. */
::placeholder { color:var(--ink-dim); opacity:1; }