/* ==========================================================================
   Mu Next — site stylesheet (WebEngine template "munext")

   The landing page and the wiki's world, on the site a player uses after
   launch. One set of tokens, shared with both. Modules speak Bootstrap 3's
   vocabulary (.row, .panel, .form-horizontal, .btn-primary, .table); that
   vocabulary is restyled here rather than rewritten in the modules, so a
   WebEngine update never fights the theme.
   ========================================================================== */

@font-face {
  font-family: 'Constantine';
  src: url('../fonts/Constantine/Constantine.woff2') format('woff2'), url('../fonts/Constantine/Constantine.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost/Jost-Regular.woff2') format('woff2'), url('../fonts/Jost/Jost-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The variable file carries the true 500; without it browsers render
   every weight step as body weight. */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost/Jost-Variable.woff2') format('woff2'), url('../fonts/Jost/Jost-Variable.ttf') format('truetype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #213971;
  --blue-deep: #16264c;
  --blue-soft: #4a6096;
  --heading: #394150;
  --text: #1f2123;
  --muted: #5b6474;

  --sky: #dfeaf4;
  --sky-deep: #c8daf0;
  --plate: #ffffff;
  --plate-warm: #f7fafd;

  --gold: #f5b84b;
  --gold-deep: #c98a1e;
  --ink-gold: #6b4a10;

  --line: rgba(33, 57, 113, 0.16);
  --line-soft: rgba(33, 57, 113, 0.09);

  --ok: #1d6c43;
  --ok-soft: rgba(29, 108, 67, 0.12);
  --warn: #9a6b00;
  --warn-ink: #7a5200;
  --bad: #9b2c2c;
  --bad-soft: rgba(155, 44, 44, 0.1);

  --shadow-sm: 0 2px 6px rgba(22, 38, 76, 0.06), 0 8px 20px rgba(22, 38, 76, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 38, 76, 0.08), 0 18px 44px rgba(22, 38, 76, 0.10);
  --shadow-lg: 0 8px 24px rgba(22, 38, 76, 0.10), 0 32px 70px rgba(22, 38, 76, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --track-display: 0.06em;
  --track-ui: 0.1em;
  --track-micro: 0.16em;

  --display: 'Constantine', 'Trajan Pro', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --body: 'Jost', system-ui, sans-serif;

  --shell: 1280px;
  --gutter: 28px;
  --radius: 16px;
  --radius-sm: 12px;
  /* The home page's plate: near-white, a white hairline, one soft navy shadow. */
  --plate-glass: rgba(255, 255, 255, 0.9);
  --plate-edge: rgba(255, 255, 255, 0.95);
  --shadow-plate: 0 1px 0 #fff inset, 0 2px 6px rgba(22, 38, 76, 0.05), 0 24px 60px rgba(22, 38, 76, 0.12);
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--sky);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(33, 57, 113, 0.38); }
a:hover { color: var(--blue-deep); text-decoration-color: var(--blue); }
h1, h2, h3, h4, p, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }

/* Browser surfaces ship with the design, not the browser. */
::selection { background: rgba(33, 57, 113, 0.16); color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: rgba(33, 57, 113, 0.32) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(33, 57, 113, 0.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
input { caret-color: var(--blue); }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* --- Display type --------------------------------------------------------- */

h1, h2, h3, .page-title, .plate__head h2, .panel-title, caption {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.masthead.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(22, 38, 76, 0.09);
  border-bottom-color: var(--line);
}

.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__emblem { width: 40px; height: 40px; }

.brand__name { display: flex; flex-direction: column; line-height: 1.05; }

.brand__title {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--blue);
}

.brand__sub {
  font-size: 10.5px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav { flex: 1 1 auto; min-width: 0; }

.nav ul {
  display: flex;
  justify-content: center;
  gap: 2px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.nav .nav__account { display: none; }
/* The same quiet tint the language list uses: no fill of its own, no ring. */
.nav a:hover, .nav a[aria-current="page"] { background: rgba(33, 57, 113, 0.08); color: var(--blue-deep); }

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  font-size: 13.5px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.mlink:hover { background: #fff; border-color: var(--blue-soft); color: var(--blue-deep); }
.mlink svg { width: 15px; height: 15px; }

.mlink--accent {
  color: var(--ink-gold);
  border-color: rgba(201, 138, 30, 0.42);
  background: rgba(245, 184, 75, 0.16);
}
.mlink--accent:hover { background: rgba(245, 184, 75, 0.3); border-color: var(--gold-deep); color: var(--ink-gold); }

.mlink--user { text-transform: none; letter-spacing: 0.02em; font-weight: 500; }
.mlink--quiet { border-color: transparent; color: var(--muted); }
.mlink--quiet:hover { border-color: var(--line); }

/* Language pill — the landing page's own control. */
.lang { position: relative; }

.lang__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.lang__button:hover { background: #fff; border-color: var(--blue-soft); }
.lang__button span { font-size: 13.5px; letter-spacing: 0.04em; color: var(--blue); min-width: 22px; text-align: center; }
.lang__arrow { transition: transform 0.2s var(--ease); }
.lang.is-open .lang__arrow { transform: rotate(180deg); }

.lang__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 100%;
  padding: 6px;
  display: grid;
  gap: 3px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0.18s;
}
.lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; }

.lang__item {
  display: block;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--blue);
}
.lang__item:hover, .lang__item.is-active { background: rgba(33, 57, 113, 0.08); color: var(--blue-deep); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 2px; background: var(--blue); border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Shell
   ========================================================================== */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 44px var(--gutter) 88px;
  min-height: 60vh;
  position: relative;
  z-index: 1;
}

.shell__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.shell__side { position: sticky; top: 86px; display: grid; gap: 18px; }

/* ==========================================================================
   Plates — the one surface everything sits on
   ========================================================================== */

.plate {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.plate__head {
  padding: 15px 22px 13px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.plate__head h2 { font-size: 14px; letter-spacing: var(--track-micro); }
.plate__head span, .plate__head time { font-size: 11.5px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.plate__action { font-size: 12px; letter-spacing: 0.04em; color: var(--blue); }

.plate__rows { padding: 6px 0; }

.prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 9px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
}
.prow:first-child { border-top: 0; }
.prow > span { color: var(--muted); }
.prow > strong { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: var(--track-display); text-transform: uppercase; color: var(--blue-deep); text-align: right; }
.prow > strong.fig { font-variant-numeric: tabular-nums; }
.prow--lead { padding-top: 14px; padding-bottom: 14px; }
.prow--lead > strong { font-size: 22px; }
.fig--live { color: var(--ok); }
.fig--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); vertical-align: 2px; box-shadow: 0 0 0 3px var(--ok-soft); }

.plate__note {
  padding: 10px 22px 13px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
  color: #414c60;
}

.plate__body { padding: 20px 22px; }

.cd { font-variant-numeric: tabular-nums; }
.cd time { font-size: 15px; letter-spacing: 0.04em; text-transform: none; }
.cd b { font-weight: 700; }
.cd small { font-family: var(--body); font-weight: 400; font-size: 11px; letter-spacing: var(--track-micro); color: var(--muted); margin: 0 6px 0 2px; }

/* Control panel menu */
.cpmenu { padding: 6px 0; }
.cpmenu a {
  display: block;
  padding: 9px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.cpmenu li:first-child a { border-top: 0; }
.cpmenu a:hover { background: var(--plate-warm); color: var(--blue); }
.cpmenu a[aria-current="page"] { background: rgba(33, 57, 113, 0.07); color: var(--blue-deep); font-weight: 500; }

/* Events */
.events { padding: 4px 0; }
.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
}
.event:first-child { border-top: 0; }
.event__name { color: var(--blue-deep); font-weight: 500; }
.event__next { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.event__left { font-family: var(--display); font-size: 14px; letter-spacing: var(--track-display); color: var(--blue); font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
.event-schedule-open, .event-schedule-inprogress { color: var(--ok); }

/* ==========================================================================
   Page furniture the modules emit
   ========================================================================== */

/* Module titles: the wiki's caption voice, with a hairline under it. */
.page-title {
  margin: 4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.page-title + .page-title { margin-top: 28px; }
.page-title span { display: inline; }
.page-title ~ .page-title { margin-top: 34px; }

/* Bootstrap-shaped grid the modules assume. */
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > [class*="col-"] { padding: 0 12px; min-width: 0; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.col-xs-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-offset-2 { margin-left: 16.666%; }
.col-sm-4 { flex: 0 0 100%; max-width: 100%; }
.col-sm-8 { flex: 0 0 100%; max-width: 100%; }
.col-sm-offset-4 { margin-left: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.pull-right { float: right; }
.nopadding { padding: 0 !important; }
.smalltext { font-size: 12.5px; color: var(--muted); }

/* Panels → plates. */
.panel {
  margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.panel-heading {
  padding: 14px 22px 12px;
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 14px; letter-spacing: var(--track-micro); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title a { text-decoration: none; }
.panel-body { padding: 18px 22px; }
.panel-body[style*="min-height"] { min-height: 0 !important; }
.panel-footer { padding: 10px 22px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.panel-footer::after { content: ""; display: block; clear: both; }
.panel-news .panel-body { font-size: 16.5px; line-height: 1.65; max-width: 70ch; }
.panel-news .panel-body p { margin: 0 0 1em; }
.panel-news .panel-body img { border-radius: var(--radius-sm); }
.panel-news .panel-title { font-size: 17px; letter-spacing: var(--track-display); }
.panel-downloads .panel-title { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.news-readmore { display: inline-block; margin-top: 10px; font-size: 14px; letter-spacing: 0.04em; }

/* Buttons. The landing page's own plates, unmodified. */
.btn, .btn-primary, .btn-default, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #2b4788, var(--blue));
  border-color: var(--blue-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 22px rgba(33, 57, 113, 0.24);
  transition: transform 0.16s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover, .btn-primary:hover { color: #fff; text-decoration: none; background: linear-gradient(180deg, #33529a, #294582); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 28px rgba(33, 57, 113, 0.3); }
.btn:active, .btn-primary:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; }
.btn span { position: relative; }

.btn--gold { color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); border-color: rgba(120, 78, 10, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 22px rgba(201, 138, 30, 0.32); }
.btn--gold:hover { color: #3a2708; background: linear-gradient(180deg, #ffe08d, #f5b84b); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 12px 28px rgba(201, 138, 30, 0.4); }

.btn--ghost, .btn-default { color: var(--blue); background: rgba(255, 255, 255, 0.6); border-color: rgba(33, 57, 113, 0.28); box-shadow: none; }
.btn--ghost:hover, .btn-default:hover { color: var(--blue-deep); background: #fff; border-color: var(--blue-soft); box-shadow: none; }

/* The tiny "change" / "+" / "forgot" buttons modules drop into headings become quiet text links. */
.btn-xs, .btn.btn-xs, .btn-primary.btn-xs {
  min-height: 0;
  padding: 3px 10px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn-xs::before { display: none; }
.btn-xs:hover { background: #fff; border-color: var(--blue-soft); transform: none; }

/* Forms. Labels above fields; the module's horizontal grid collapses to a stack. */
.form-horizontal, .form { display: block; }
.form-group { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.form-group::after { content: ""; display: block; clear: both; }
.control-label, .field > span {
  font-size: 11.5px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0;
}
.form-control, .field input, .field select, .field textarea, input.form-control, textarea.form-control, select.form-control {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--blue-deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(22, 38, 76, 0.05);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
textarea.form-control { height: auto; min-height: 120px; padding: 12px 14px; }
.form-control::placeholder { color: #6a7488; }
.form-control:hover { border-color: rgba(33, 57, 113, 0.32); }
.form-control:focus { outline: none; border-color: var(--blue-soft); box-shadow: 0 0 0 3px rgba(33, 57, 113, 0.12); }
.help-block { font-size: 13px; color: var(--muted); }
.help-block a { color: var(--blue); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form .btn, .form-horizontal .btn { margin-top: 4px; }
.form--stack .btn { width: 100%; }

/* The register/login modules centre themselves in an 8/12 column; give that column a plate. */
.page-register .col-xs-8.col-xs-offset-2,
.page-login .col-xs-8.col-xs-offset-2,
.page-forgotpassword .col-xs-8.col-xs-offset-2 {
  flex-basis: 520px;
  max-width: 520px;
  margin: 0 auto !important;
  padding: 26px 28px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.page-register .page-title, .page-login .page-title, .page-forgotpassword .page-title { text-align: center; border-bottom: 0; }
.page-register .row, .page-login .row { justify-content: center; }

/* Alerts and labels. */
.alert {
  margin: 0 0 18px;
  padding: 12px 16px 12px 44px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--plate-warm);
  font-size: 15px;
  color: var(--text);
}
.alert::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.55;
}
.alert-danger { border-color: rgba(155, 44, 44, 0.35); background: var(--bad-soft); color: var(--bad); }
.alert-success { border-color: rgba(29, 108, 67, 0.35); background: var(--ok-soft); color: var(--ok); }
.alert-warning { border-color: var(--warn); background: var(--plate-warm); color: var(--warn-ink); }
.alert-info { color: var(--blue-deep); }
.alert strong { font-weight: 500; }

.label {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--muted);
}
.label-success { color: var(--ok); border-color: rgba(29, 108, 67, 0.4); background: var(--ok-soft); }
.label-danger { color: var(--bad); border-color: rgba(155, 44, 44, 0.35); background: var(--bad-soft); }
.label-default { color: var(--blue-deep); background: rgba(33, 57, 113, 0.06); }

/* Tables. */
.table, .rankings-table, .myaccount-table, .general-table-ui {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table th, .table td, .rankings-table td, .myaccount-table td, .general-table-ui td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--line-soft);
}
.table thead th, .rankings-table tr:first-child td, .general-table-ui tr:first-child td, .table.table-bordered thead th {
  border-top: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(33, 57, 113, 0.04);
}
.rankings-table tr:first-child td { font-weight: 400 !important; }
.table tbody tr:hover, .rankings-table tr:not(:first-child):hover { background: var(--plate-warm); }
.table td:first-child, .myaccount-table td:first-child { color: var(--blue-deep); }
.table-condensed th, .table-condensed td { padding: 7px 12px; }
.table.table-bordered { border: 1px solid var(--line); }
.myaccount-table { margin-bottom: 8px; }
.myaccount-table td:first-child { width: 34%; color: var(--muted); font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.myaccount-table td .btn-xs { float: right; }

/* Rankings pages. */
.rankings_menu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}
.rankings_menu a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blue);
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.rankings_menu a:hover { background: #fff; border-color: var(--blue-soft); }
.rankings_menu a.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.rankings-filter, .rankings_filter { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; }
.rankings-table {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rankings-table td:nth-child(n+4) { font-variant-numeric: tabular-nums; }
.rankings-table-place { width: 3em; font-family: var(--display); color: var(--blue); text-align: right !important; font-variant-numeric: tabular-nums; }
.rankings-class-image, .tables-character-class-img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); vertical-align: middle; }
.online-status-indicator { width: 8px; height: 8px; margin-left: 8px; vertical-align: 1px; }
.rankings-update-time { margin-top: 10px; font-size: 12.5px; letter-spacing: 0.03em; color: var(--muted); }

/* The class filter above a ranking: a row of small portraits, not a column of large ones. */
.rankings-class-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0 0 18px;
}
.rankings-class-filter li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 8px 4px;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.rankings-class-filter li a:hover { background: rgba(255, 255, 255, 0.7); color: var(--blue); }
.rankings-class-filter li a.is-on { color: var(--blue-deep); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.rankings-class-filter-image { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.rankings-class-filter-grayscale .rankings-class-filter-image { filter: saturate(0.2); opacity: 0.75; transition: filter 0.15s var(--ease), opacity 0.15s var(--ease); }
.rankings-class-filter li a:hover .rankings-class-filter-image, .rankings-class-filter li a.is-on .rankings-class-filter-image { filter: none; opacity: 1; }

/* Auth pages: the one action fills the plate's width. */
.page-login .form-horizontal .btn, .page-register .form-horizontal .btn, .page-forgotpassword .form-horizontal .btn { width: 100%; min-height: 54px; font-size: 16px; }

/* An index plate: a list of destinations, each with what it is for. */
.index { padding: 4px 0; }
.index a {
  display: grid;
  gap: 2px;
  padding: 12px 22px;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease);
}
.index li:first-child a { border-top: 0; }
.index a:hover { background: var(--plate-warm); }
.index a:hover .index__title { color: var(--blue); }
.index__title { font-weight: 500; color: var(--blue-deep); }
.index__desc { font-size: 14px; line-height: 1.45; color: var(--muted); }

.info { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.info__record .plate__note { display: none; }

/* The landing page's rule, marking the change from the desk to the board. */
.ornament { display: block; margin: 8px auto 20px; opacity: 0.9; }

/* Account pages. */
.myaccount-character-name { font-family: var(--display); font-size: 14px; letter-spacing: var(--track-display); color: var(--blue); margin-bottom: 8px; }
.myaccount-character-block img { width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.myaccount-character-block-location { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.myaccount-character-block-level { display: inline-block; margin-top: 6px; font-family: var(--display); font-size: 16px; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.page-usercp .row .col-xs-3 { margin-bottom: 18px; }
.page-usercp .row .col-xs-3 > a { display: block; padding: 18px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; color: var(--blue); box-shadow: var(--shadow-sm); transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease); }
.page-usercp .row .col-xs-3 > a:hover { background: #fff; box-shadow: var(--shadow-md); }
.page-usercp .row .col-xs-3 > a img { display: none; }

/* Profiles. */
.profiles_player_card, .profiles_guild_card {
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 253, 0.97));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.profiles_player_table { width: 100%; border-collapse: collapse; font-size: 15px; }
.profiles_player_table td { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.profiles_player_table td.cname { font-family: var(--display); font-size: 22px; letter-spacing: var(--track-display); color: var(--blue); border-top: 0; }
.profiles_player_table td.cclass { color: var(--muted); border-top: 0; padding-bottom: 14px; }
.profiles_player_table_info td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--blue-deep); }

/* Downloads. */
.download-description { font-size: 13px; color: var(--muted); }

/* The handler appends an AdminCP link after the page for admins; give it a home. */
.admincp-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  min-height: 0;
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.admincp-button::before { display: none; }

/* ==========================================================================
   Home — the desk
   ========================================================================== */

.desk {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}

.desk__account { padding: 0; }
.desk__account .plate__body { padding: 24px 28px 22px; }
.desk__account .field input { height: 50px; }
.desk__account .btn { width: 100%; min-height: 56px; font-size: 17px; }
.desk__foot {
  padding: 12px 28px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.desk__welcome { display: grid; gap: 14px; }
.desk__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 18px; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: var(--track-display); line-height: 1.1; }
.desk__lead small { font-family: var(--body); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.desk__welcome .desk__name { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: var(--track-display); line-height: 1.15; text-wrap: balance; }
.desk__welcome p { max-width: 34em; color: var(--muted); }
.desk__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.desk__actions .btn { width: auto; min-height: 50px; font-size: 15px; }

.board {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: 24px;
  align-items: start;
}
.board__col { display: grid; gap: 24px; }

/* News list plate */
.newslist { padding: 4px 0; }
.newslist a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 11px 22px;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease);
}
.newslist li:first-child a { border-top: 0; }
.newslist a:hover { background: var(--plate-warm); }
.newslist a:hover .newslist__title { color: var(--blue); }
.newslist__title { font-weight: 500; color: var(--blue-deep); }
.newslist__date { font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.newslist__empty { padding: 18px 22px; color: var(--muted); font-size: 15px; }

/* Ladder plate */
.ladder { width: 100%; border-collapse: collapse; font-size: 15px; }
.ladder th, .ladder td { padding: 9px 22px; text-align: left; border-top: 1px solid var(--line-soft); }
.ladder thead th { border-top: 0; font-weight: 400; font-size: 11.5px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); background: rgba(33, 57, 113, 0.04); }
.ladder td.rank { width: 2.4em; font-family: var(--display); color: var(--blue); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0; }
.ladder td.fig, .ladder th.fig { text-align: right; font-variant-numeric: tabular-nums; }
.ladder td.who a { color: var(--blue-deep); font-weight: 500; text-decoration: none; }
.ladder td.who a:hover { color: var(--blue); text-decoration: underline; }
.ladder td.cls { color: var(--muted); font-size: 13px; letter-spacing: 0.04em; }
.ladder tbody tr:hover { background: var(--plate-warm); }
.ladder img { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; margin-right: 8px; border: 1px solid var(--line); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.35);
}
.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 28px var(--gutter) 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.footer__brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 14px; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--blue); }
.footer__brand p { font-family: var(--body); font-size: 11px; letter-spacing: var(--track-micro); color: var(--muted); margin-top: 2px; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.footer__links a { font-size: 13px; letter-spacing: 0.04em; text-decoration: none; color: var(--blue); }
.footer__links a:hover { text-decoration: underline; }
.footer__meta { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: right; max-width: 34em; }

/* ==========================================================================
   Motion — one authored moment: the desk settles in on arrival
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .js .desk > .plate, .js .board .plate {
    opacity: 0;
    transform: translateY(8px);
    animation: settle 0.5s var(--ease-out) forwards;
  }
  .js .desk > .plate:nth-child(2) { animation-delay: 0.06s; }
  .js .board .plate { animation-delay: 0.12s; }
  .js .board .plate:nth-child(2) { animation-delay: 0.18s; }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .nav a { padding: 0 11px; font-size: 12.5px; }
  .masthead__tools .mlink span { display: none; }
}

@media (max-width: 960px) {
  .desk, .board, .info { grid-template-columns: 1fr; }
  .shell__split { grid-template-columns: 1fr; }
  .shell__side { position: static; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; order: 3; }
  .masthead__tools { order: 2; margin-left: auto; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    display: none;
    padding: 10px var(--gutter) 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav a { height: 44px; }
  .nav .nav__account { display: flex; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
  .masthead__tools .mlink:not(.mlink--user) { display: none; }
  .masthead__tools .mlink--quiet { display: none; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__brand { justify-content: center; }
  .footer__meta { text-align: center; margin: 0 auto; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .shell { padding-top: 18px; }
  .masthead__inner { height: 60px; gap: 10px; }
  .nav { top: 60px; }
  .brand__sub { display: none; }
  .col-xs-8, .col-xs-6, .col-xs-4, .col-xs-3 { flex-basis: 100%; max-width: 100%; }
  .col-xs-offset-2 { margin-left: 0; }
  .page-register .col-xs-8.col-xs-offset-2, .page-login .col-xs-8.col-xs-offset-2, .page-forgotpassword .col-xs-8.col-xs-offset-2 { padding: 20px 18px; }
  .prow, .event, .newslist a { padding-left: 16px; padding-right: 16px; }
  .plate__head, .panel-heading { padding-left: 16px; padding-right: 16px; }
  .desk__account .plate__body { padding: 20px 18px; }
  .desk__foot { padding: 12px 18px; }
  .rankings-table td, .table td, .table th { padding: 8px 10px; font-size: 14px; }
  .rankings-class-image { width: 28px; height: 28px; }
  /* Wide tables scroll inside their own frame; the page never scrolls sideways. */
  .rankings-table, .table.table-bordered, .general-table-ui { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .ladder td.cls, .ladder th.cls { display: none; }
  .ladder th, .ladder td { padding: 8px 12px; font-size: 14px; }
  .rankings-class-filter { gap: 2px 6px; }
  .rankings-class-filter li a { padding: 4px 4px 2px; font-size: 9.5px; letter-spacing: 0.08em; }
  .rankings-class-filter-image { width: 32px; height: 32px; }
  .ladder th, .ladder td { padding: 8px 16px; }
}

/* The invisible security check draws nothing; the container only has to
   exist inside the form so the token is submitted with it. */
/* Invisible until the invisible mode gives up; then it is a real widget the
   person has to pass, and it needs room and a line explaining itself. */
.cf-holder { display: block; }
.cf-holder:empty { display: none; }
.cf-holder iframe { display: block; max-width: 100%; }
.cf-holder--shown, .cf-holder:has(iframe[style*="height"]) { margin: 14px 0 0; }
.cf-note:empty { display: none; }
.cf-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   Downloads — a file, and the places it comes from
   ========================================================================== */

.dl-lead { max-width: 68ch; margin: 0 0 22px; color: var(--muted); }
.dl-group {
  margin: 26px 0 12px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--blue);
}
.dl-group:first-of-type { margin-top: 8px; }
.dl-empty { padding: 22px; color: var(--muted); }

.dl { padding: 18px 22px 16px; margin-bottom: 14px; }
.dl__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.dl__head h3 { margin: 0; font-size: 17px; letter-spacing: var(--track-display); }
.dl__meta { display: flex; gap: 16px; margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl__desc { margin: 8px 0 0; max-width: 70ch; color: var(--muted); font-size: 15px; }

/* The choice itself: same weight for every host, so nothing is pushed. */
.mirrors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mirror {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--plate);
  color: var(--blue-deep);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.mirror:hover { border-color: var(--blue-soft); background: var(--plate-warm); color: var(--blue-deep); }
.mirror:active { transform: translateY(1px); }
.mirror__icon { display: inline-flex; width: 22px; height: 22px; }
.mirror__icon svg { width: 22px; height: 22px; }
.mirror__name { white-space: nowrap; }

.dl__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--muted); }
.dl__sum code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--blue-deep);
  word-break: break-all;
}

@media (max-width: 560px) {
  .dl { padding: 16px 16px 14px; }
  .mirrors { gap: 6px; }
  .mirror { flex: 1 1 calc(50% - 6px); justify-content: center; padding-left: 10px; }
}

/* ==========================================================================
   Buying WCoin — how much, then how to pay
   ========================================================================== */

.pay-lead { max-width: 68ch; margin: 0 0 22px; color: var(--muted); }
.pay-empty { padding: 20px 22px; background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--muted); }
.pay-h { margin: 34px 0 12px; font-family: var(--display); font-size: 15px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--blue); }

/* Four to a row, so eight packs read as two even ranks rather than a ragged
   six-and-two. */
.pay__packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pay__packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pack { display: block; cursor: pointer; }
.pack input { position: absolute; opacity: 0; width: 0; height: 0; }
.pack__body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 14px 16px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.pack:hover .pack__body { border-color: var(--blue-soft); }
.pack input:focus-visible + .pack__body { outline: 2px solid var(--blue); outline-offset: 3px; }
.pack input:checked + .pack__body {
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--gold-deep);
}
.pack__bonus {
  position: absolute; top: -9px; right: 10px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums;
  color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
  box-shadow: 0 4px 12px rgba(201, 138, 30, 0.3);
}
.pack__credits { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: var(--track-display); color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.pack__unit { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.pack__price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); width: 100%; justify-content: center; }
.pack__price b { font-weight: 500; font-size: 16px; color: var(--ink-gold); font-variant-numeric: tabular-nums; }
.pack__price i { font-style: normal; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pay__ways { margin-top: 22px; }
.pay__ways-label { display: block; font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* One card per way the money can travel: the cards, the ruble account, the
   wallet. The company that carries it is named on the button, not above. */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wgrp {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 18px 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--plate);
}
.wgrp__title { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: var(--track-display); color: var(--blue-deep); }
.wgrp__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.wgrp__go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
/* Two providers in one group share the row rather than stacking: a stacked
   pair would drag every card in the row down with it. */
.wgrp__go .way { flex: 1 1 0; min-width: 104px; padding: 12px 12px; justify-content: center; }

.pay__newtab { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.pay__terms { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pay__terms strong { color: inherit; font-weight: 600; }

.paybrands { display: flex; flex-wrap: wrap; gap: 6px; }
.paybrand { display: inline-flex; }
.paybrand svg { display: block; width: 40px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(16, 26, 48, 0.12), 0 1px 2px rgba(6, 12, 28, 0.18); }

/* This is the button that takes money, so it is dressed as the site's one
   action colour and carries the gold hover the Register button set. */
.way {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid rgba(120, 78, 10, 0.25);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd777, #f3b23f);
  color: #3a2708;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 22px rgba(201, 138, 30, 0.28);
  transition: background 0.16s var(--ease), box-shadow 0.25s var(--ease), transform 0.16s var(--ease);
}
.way::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.way:hover::after { transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.way:hover {
  color: #2a1c04;
  background: linear-gradient(180deg, #ffe69e, #f7bd4f);
  border-color: #ffe08d;
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.35), 0 12px 32px rgba(245, 170, 50, 0.45);
}
.way:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.way:active { transform: scale(0.985); }
.way__name { position: relative; z-index: 1; }
/* The arrow is the only mark on the button: one glyph in the button's own ink,
   which stays quiet on four buttons in a row and says where pressing leads. */
.way__go {
  position: relative; z-index: 1;
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.5;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease;
}
.way:hover .way__go, .way:focus-visible .way__go { opacity: 1; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .way__go { transition: none; } }

.pay-log td { vertical-align: middle; }
.pay-log__date, .pay-log__sum { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); font-size: 13.5px; }
.pay-log__status { font-size: 13px; white-space: nowrap; }
.pay-log__status--paid { color: var(--ok); }
.pay-log__status--paid_ungranted { color: var(--warn-ink); }
.pay-log__status--failed { color: var(--muted); }

@media (max-width: 900px) {
  .ways { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pay__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ==========================================================================
   Attaching a mailbox to an account that never had one
   ========================================================================== */

.claim { display: grid; gap: 12px; max-width: 420px; margin: 22px 0 0; }
.claim__label { font-size: 12px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.claim__input, .claim__code {
  width: 100%;
  padding: 12px 14px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
}
.claim__code { font-family: var(--display); font-size: 26px; letter-spacing: 0.5em; text-align: center; color: var(--blue-deep); }
.claim__input:focus-visible, .claim__code:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.claim__again {
  margin-top: 12px; padding: 0; background: none; border: 0;
  color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.claim__again:hover { color: var(--blue); }

/* ==========================================================================
   Google, which brings an address and nothing else
   ========================================================================== */

.gsign { margin-bottom: 22px; }
.gsign__note { max-width: 52ch; margin: 12px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; }

.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--blue-deep);
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.16s var(--ease);
}
.gbtn:hover { border-color: var(--blue-soft); background: var(--plate-warm); color: var(--blue-deep); text-decoration: none; }
.gbtn:active { transform: translateY(1px); }
.gbtn__mark { flex: none; }

.reg-proved { color: var(--ok) !important; }

/* ==========================================================================
   The account page: purse, VIP, and every character with what it wears
   ========================================================================== */

.acc-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: 18px 22px; margin-bottom: 18px;
  background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.acc-head__who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.acc-head__label { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.acc-head__name { font-family: var(--display); font-size: 24px; letter-spacing: var(--track-display); color: var(--blue-deep); }
.acc-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.acc-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9c2cf; }
.acc-state--on { color: var(--ok); }
.acc-state--on::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
/* The address sits on its own line under the name: read often, never the
   reason the page was opened. */
.acc-head__mail { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.acc-head__mail svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
.acc-head__mail-label { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.acc-head__mail-warn { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.acc-head__mail-warn:hover { color: var(--gold-deep); }
.acc-head__mail strong { min-width: 0; font-weight: 500; color: var(--blue-deep); overflow-wrap: anywhere; }

.acc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-tool {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px;
  color: var(--blue); text-decoration: none; background: var(--plate);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.acc-tool:hover { border-color: var(--blue-soft); background: var(--plate-warm); text-decoration: none; }
.acc-tool--gold { color: var(--ink-gold); border-color: rgba(201,138,30,.42); background: rgba(245,184,75,.16); }
.acc-tool--gold:hover { background: rgba(245,184,75,.3); border-color: var(--gold-deep); }

.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 14px; }
.acc-card { padding: 18px 20px; background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.acc-card__title { margin: 0 0 12px; font-size: 13px; letter-spacing: var(--track-micro); color: var(--muted); }

.purse { margin: 0; display: grid; gap: 2px; }
.purse__row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.purse__row:last-child { border-bottom: 0; }
.purse__row dt { font-size: 14px; color: var(--text); }
.purse__row dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--blue-deep); }
.purse__row--main dt { font-weight: 500; color: var(--ink-gold); }
.purse__row--main dd { font-family: var(--display); font-size: 24px; color: var(--ink-gold); }

.paid__coins { margin: 0 0 8px; color: var(--muted); }
.paid__coins strong { font-family: var(--display); font-size: 28px; color: var(--blue-deep); font-variant-numeric: tabular-nums; margin-right: 4px; }
.paid__money { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.paid__money li { padding: 3px 10px; border-radius: 999px; background: var(--sky); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.paid__note { margin: 0; font-size: 13px; color: var(--muted); }

.vip-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.vip-now strong { font-family: var(--display); font-size: 20px; letter-spacing: var(--track-display); }
.vip-now--bronze strong { color: #9a5b22; }
.vip-now--silver strong { color: #6b7686; }
.vip-now--gold strong { color: var(--gold-deep); }
.vip-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.vip-online {
  display: flex; gap: 12px; margin: 0 0 14px; padding: 13px 16px;
  border: 1px solid rgba(227, 180, 87, 0.42); border-radius: var(--radius-sm);
  background: rgba(227, 180, 87, 0.08);
}
.vip-online > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--warn); }
.vip-online b { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--warn-ink); }
.vip-online p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.vip-online__since { margin-top: 4px !important; color: var(--muted) !important; font-size: 12.5px !important; }
.vip-online__recheck { min-height: 36px; margin-top: 10px; padding: 7px 18px; font-size: 13.5px; }
.vip-perks { margin-top: 14px; }
.vip-perks__title { margin: 0 0 6px; font-family: var(--display); font-size: 20px; letter-spacing: var(--track-display); color: var(--blue-deep); }
.vip-perks__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.vip-perks__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.vip-perks__table.table { width: 100%; min-width: 620px; margin: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.vip-perks__table.table col.vip-perks__c0 { width: 40%; }
.vip-perks__table.table th, .vip-perks__table.table td { padding: 10px 12px; font-size: 13.5px; text-align: center; vertical-align: middle; border: 0; border-bottom: 1px solid var(--line-soft); }
.vip-perks__table.table th:first-child, .vip-perks__table.table td:first-child { text-align: left; color: var(--text); }
.vip-perks__table.table tbody tr:last-child td { border-bottom: 0; }
.vip-perks__table.table thead th { padding-top: 14px; padding-bottom: 12px; font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--plate-warm); border-bottom: 1px solid var(--line); }
.vip-perks__table.table td.vip-perks__num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.vip-perks__table.table td.vip-perks__tier { color: var(--text); font-weight: 500; }
.vip-perks__table.table td.vip-perks__gold, .vip-perks__table.table th.vip-perks__gold { background: rgba(245, 184, 75, 0.08); color: var(--gold); font-weight: 600; }
.vip-perks__table.table th.vip-perks__bronze { color: #d09a5a; } .vip-perks__table.table th.vip-perks__silver { color: #b9c5d8; }
.vip-perks__yes { color: var(--gold); font-size: 16px; line-height: 1; } .vip-perks__no { color: rgba(179, 196, 234, 0.35); }
.vip-perks__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(245, 184, 75, 0.35); border-radius: 12px; background: rgba(245, 184, 75, 0.06); }
.vip-perks__pitch { flex: 1 1 380px; display: grid; gap: 7px; }
.vip-perks__cta p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.vip-perks__cta .cmd { padding: 1px 6px; border-radius: 6px; background: rgba(179, 196, 234, 0.12); font-size: 13px; }
.vip-perks__cta p strong { color: var(--gold); }
@media (max-width: 640px) { .vip-perks__table.table th, .vip-perks__table.table td { padding: 8px 8px; font-size: 12.5px; } }

.vip-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vip-plan {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 12px 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--plate-warm);
}
.vip-plan::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; }
.vip-plan--bronze::before { background: #c07a3c; }
.vip-plan--silver::before { background: #a9b3c1; }
.vip-plan--gold::before { background: var(--gold); }
.vip-plan__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vip-plan__name { font-weight: 500; color: var(--blue-deep); }
.vip-plan__tag { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.vip-plan__term, .vip-plan__days { font-size: 13px; color: var(--muted); }
.vip-plan__days input { width: 58px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 10px; font-variant-numeric: tabular-nums; }
.vip-stepper { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.vip-stepper__btn { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--plate); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .16s var(--ease), color .16s var(--ease); }
.vip-stepper__btn:hover { border-color: var(--gold); color: var(--gold); }
.vip-stepper input { width: 58px; padding: 3px 6px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--plate); color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.vip-stepper input::-webkit-outer-spin-button, .vip-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vip-stepper input { -moz-appearance: textfield; }
.vip-plan__unit { font-size: 13px; color: var(--muted); }
.vip-plan__calc { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vip-plan__calc b { color: var(--text); font-weight: 500; }
.vip-plan__range { font-size: 11.5px; line-height: 1.45; color: var(--muted); opacity: .85; }
.vip-plan__result { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ok); }
.vip-plan__result small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.vip-plan__price { font-family: var(--display); font-size: 18px; color: var(--ink-gold); font-variant-numeric: tabular-nums; }
.vip-plan__price s { font-family: var(--body); font-size: 13px; color: var(--muted); }
.vip-plan__buy {
  width: 100%; margin-top: auto; padding-top: 10px; padding: 7px 10px; border: 1px solid var(--blue); border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 13.5px; cursor: pointer;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.vip-plan__buy:hover { background: var(--blue-deep); }
.vip-plan__range, .vip-plan__result { margin-bottom: 4px; }
.vip-plan__buy:active { transform: translateY(1px); }
.vip-plan__buy[disabled] { background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.vip-plan.is-locked { opacity: .6; }

.acc-h { margin: 30px 0 12px; font-size: 15px; letter-spacing: var(--track-micro); color: var(--blue); }

.chars { display: grid; gap: 14px; }
.char { padding: 16px 18px 18px; background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.char__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; }
.char__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.char__name { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: var(--track-display); text-transform: none; color: var(--blue-deep); }
.char__class { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.char__stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.char__stats div { display: grid; }
.char__stats dt { font-size: 10.5px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.char__stats dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--blue-deep); }
.char__stats small { color: var(--muted); }

.gear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gear__slot {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px;
  min-height: 118px; padding: 8px 6px; text-align: center; outline: none;
  background: linear-gradient(180deg, #1d2742, #151c30); border: 1px solid #2a3558; border-radius: var(--radius);
}
.gear__slot.is-empty { background: var(--plate-warm); border-style: dashed; border-color: var(--line); }
.gear__slot.is-exc { border-color: #3f8f5b; box-shadow: inset 0 0 0 1px rgba(90, 200, 120, .18); }
.gear__slot.is-anc { border-color: #4a78c9; box-shadow: inset 0 0 0 1px rgba(90, 140, 230, .25); }
.gear__label { font-size: 10px; letter-spacing: var(--track-micro); text-transform: uppercase; color: #8e9ab8; }
.gear__slot.is-empty .gear__label { color: var(--muted); }
.gear__icon { max-width: 100%; max-height: 64px; align-self: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.gear__name { font-size: 11.5px; line-height: 1.25; color: #e6ecf8; overflow-wrap: anywhere; }
.gear__slot.is-exc .gear__name { color: #7fe0a0; }
.gear__slot.is-anc .gear__name { color: #8fb6ff; }
.gear__slot.is-empty .gear__name { color: var(--muted); }

.gear__tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20; display: grid; gap: 2px; min-width: 210px;
  padding: 10px 12px; text-align: center; font-size: 12.5px; color: #d9e1f2;
  background: rgba(12, 17, 32, .97); border: 1px solid #34406a; border-radius: var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .14s var(--ease-out), transform .14s var(--ease-out), visibility 0s linear .14s;
}
.gear__tip strong { color: #fff; font-weight: 500; margin-bottom: 2px; }
.gear__exc { color: #7fe0a0; }
.gear__tag { font-style: normal; font-size: 10.5px; letter-spacing: var(--track-micro); text-transform: uppercase; }
.gear__tag--exc { color: #7fe0a0; }
.gear__tag--anc { color: #8fb6ff; }
.gear__slot:hover .gear__tip, .gear__slot:focus-visible .gear__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.gear__slot:focus-visible { box-shadow: 0 0 0 2px var(--blue); }

@media (max-width: 1100px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acc-vip { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .gear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .char__head { grid-template-columns: auto minmax(0, 1fr); }
  .char__stats { grid-column: 1 / -1; }
  .vip-plans { grid-template-columns: minmax(0, 1fr); }
}
.vip-plan__bonus { font-size: 12px; color: var(--ok); }

/* ==========================================================================
   Questions and notices, drawn by the site (js/dialog.js)
   ========================================================================== */

.mn-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0; border: 0; background: transparent; color: var(--text);
  overflow: visible;
}
.mn-dialog::backdrop { background: rgba(14, 22, 44, 0.46); backdrop-filter: blur(2px); }
.mn-dialog[open] { animation: mn-dialog-in .2s var(--ease-out); }
.mn-dialog[open]::backdrop { animation: mn-fade-in .2s var(--ease-out); }

.mn-dialog__panel {
  position: relative; margin: 0; padding: 24px 24px 20px;
  background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.mn-dialog--gold .mn-dialog__title { color: var(--ink-gold); }
.mn-dialog--danger .mn-dialog__title { color: var(--bad); }

.mn-dialog__title {
  margin: 0 0 8px; font-family: var(--display); font-size: 20px; letter-spacing: var(--track-display);
  text-transform: none; color: var(--blue-deep);
}
.mn-dialog__body { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--text); }

.mn-dialog__details { margin: 0 0 18px; padding: 4px 14px; background: var(--plate-warm); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.mn-dialog__details div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.mn-dialog__details div:last-child { border-bottom: 0; }
.mn-dialog__details dt { font-size: 13.5px; color: var(--muted); }
.mn-dialog__details dd { margin: 0; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--blue-deep); text-align: right; }
.mn-dialog--gold .mn-dialog__details div:first-child dd { font-family: var(--display); font-size: 18px; color: var(--ink-gold); }

.mn-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
.mn-dialog__btn {
  min-width: 110px; padding: 10px 18px; border-radius: 999px; font-size: 14.5px; cursor: pointer;
  border: 1px solid var(--line); background: var(--plate); color: var(--blue);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.mn-dialog__btn:hover { border-color: var(--blue-soft); background: var(--plate-warm); }
.mn-dialog__btn:active { transform: scale(0.97); }
.mn-dialog__btn--main { border-color: var(--blue); background: var(--blue); color: #fff; }
.mn-dialog__btn--main:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.mn-dialog--gold .mn-dialog__btn--main { border-color: var(--gold-deep); background: linear-gradient(180deg, #f7c461, var(--gold)); color: var(--ink-gold); }
.mn-dialog--gold .mn-dialog__btn--main:hover { background: linear-gradient(180deg, #f5b84b, #e7a23a); }
.mn-dialog--danger .mn-dialog__btn--main { border-color: var(--bad); background: var(--bad); }
.mn-dialog--danger .mn-dialog__btn--main:hover { background: #7f2222; border-color: #7f2222; }

@media (max-width: 480px) {
  .mn-dialog__actions { flex-direction: column-reverse; }
  .mn-dialog__btn { width: 100%; }
}

/* Notices: WebEngine's alerts, lifted into a stack in the corner. */
.mn-notices {
  position: fixed; top: 84px; right: 18px; z-index: 60;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 36px));
}
.alert.mn-notice {
  margin: 0; padding: 13px 40px 13px 44px;
  background: var(--plate); border: 1px solid var(--line);
  box-shadow: var(--shadow-md); font-size: 14.5px; line-height: 1.5;
  animation: mn-notice-in .24s var(--ease-out);
}
.alert.mn-notice.alert-success { color: var(--text); }
.alert.mn-notice.alert-danger { color: var(--text); }
.alert.mn-notice.alert-warning { color: var(--text); }
.alert.mn-notice.alert-info { color: var(--text); }
.alert.mn-notice::before { top: 15px; opacity: 1; border: 0; width: 18px; height: 18px; background-repeat: no-repeat; background-size: 18px; }
.alert.mn-notice.alert-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6c43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6'/%3E%3C/svg%3E"); }
.alert.mn-notice.alert-danger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b2c2c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E"); }
.alert.mn-notice.alert-warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6b00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.alert.mn-notice.alert-info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213971' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.alert.mn-notice.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .2s var(--ease), transform .2s var(--ease); }

.mn-notice__close {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
}
.mn-notice__close:hover { background: var(--sky); color: var(--blue-deep); }

@keyframes mn-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mn-notice-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) { .mn-notices { top: auto; bottom: 14px; right: 14px; left: 14px; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .mn-dialog[open], .mn-dialog[open]::backdrop, .alert.mn-notice { animation: none; }
  .alert.mn-notice.is-leaving { transition: none; }
}

/* ==========================================================================
   The account menu: sign in, or go and make an account
   ========================================================================== */

.acct { position: relative; }
.acct__toggle { cursor: pointer; font-family: inherit; font-size: 13.5px; line-height: normal; background: transparent; }
.acct__chev { width: 13px !important; height: 13px !important; transition: transform .18s var(--ease); }
.acct.is-open .acct__chev { transform: rotate(180deg); }

.acct__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 300px;
  padding: 18px;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: acct-in .16s var(--ease-out);
}
.acct__menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 26px;
  width: 11px;
  height: 11px;
  background: var(--plate);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
@keyframes acct-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

.acct__form { display: grid; gap: 10px; }
.acct__field { display: grid; gap: 4px; }
.acct__field span { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.acct__field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--plate-warm);
  font-size: 15px;
  color: var(--text);
}
.acct__field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.acct__submit {
  margin-top: 4px;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a4583, var(--blue));
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .16s var(--ease), transform .12s var(--ease);
}
.acct__submit:hover { filter: brightness(1.12); }
.acct__submit:active { transform: scale(0.98); }
.acct__forgot { justify-self: center; font-size: 13px; color: var(--muted); }
.acct__google { margin-top: 12px; box-shadow: none; padding: 10px 14px; font-size: 14px; }
.acct__join { margin: 14px -18px -18px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--plate-warm); border-radius: 0 0 6px 6px; font-size: 13.5px; color: var(--muted); text-align: center; }
.acct__join a { margin-left: 4px; font-weight: 500; color: var(--ink-gold); }

@media (max-width: 560px) {
  .acct__menu { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; }
  .acct__menu::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .acct__menu { animation: none; } }


/* ==========================================================================
   The approved world, site-wide (owner-approved on the home page, 2026-09-14)

   Every page stands on the landing's sky with its blurred branches at the
   edges, under the white bar. Surfaces are the home page's plates; titles are
   centred Constantine with the gold rule; menus light up with the language
   list's tint. Nothing in the background moves, and no button leaves its line.
   ========================================================================== */

/* Short pages keep the footer at the bottom of the window. */
body { position: relative; display: flex; flex-direction: column; min-height: 100vh; }
body > .shell { flex: 1 0 auto; width: 100%; }
body:not(.page-home) {
  background: url('../img/mu-sky.webp') center 68px / 100% auto no-repeat, var(--sky);
}
.sky-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky-decor img { position: absolute; width: 22%; max-width: 420px; height: auto; }
.sky-decor__left { top: 120px; left: 0; }
.sky-decor__right { top: 560px; right: 0; transform: scaleX(-1); }

/* Surfaces */
.plate, .panel, .rankings-table, .profiles_player_card, .profiles_guild_card,
.page-register .col-xs-8.col-xs-offset-2, .page-login .col-xs-8.col-xs-offset-2, .page-forgotpassword .col-xs-8.col-xs-offset-2,
.acc-card, .char, .pay-empty, .page-usercp .row .col-xs-3 > a {
  background: var(--plate-glass);
  border: 1px solid var(--plate-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-plate);
}
.plate__head, .panel-heading { border-bottom-color: var(--line-soft); }
.plate__note { background: transparent; }

/* Titles: centred, with the landing's gold rule and diamond beneath. */
.page-title {
  position: relative;
  margin: 0 0 30px;
  padding: 0 0 24px;
  border-bottom: 0;
  text-align: center;
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: 0.1em;
  color: var(--blue-deep);
}
.page-title::after {
  content: "";
  position: absolute; left: 50%; bottom: 4px;
  width: 240px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(201, 138, 30, 0) 0%, rgba(201, 138, 30, 0.6) 42%, rgba(201, 138, 30, 0) 47%, rgba(201, 138, 30, 0) 53%, rgba(201, 138, 30, 0.6) 58%, rgba(201, 138, 30, 0) 100%);
}
.page-title::before {
  content: "";
  position: absolute; left: 50%; bottom: 1px;
  width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffd777, var(--gold-deep));
}
.page-title ~ .page-title { margin-top: 48px; font-size: clamp(20px, 2.2vw, 26px); }

/* Segmented menus: a white pill bar; the choice lights up like the header. */
.rankings_menu {
  width: fit-content; max-width: 100%;
  margin: 0 auto 26px; padding: 5px; gap: 2px;
  justify-content: center;
  background: var(--plate-glass);
  border: 1px solid var(--plate-edge);
  border-radius: 999px;
  box-shadow: 0 1px 0 #fff inset, 0 10px 28px rgba(22, 38, 76, 0.1);
}
.rankings_menu a { height: 38px; border: 0; background: transparent; color: var(--blue); }
.rankings_menu a:hover, .rankings_menu a.active { background: rgba(33, 57, 113, 0.08); border: 0; color: var(--blue-deep); }
.rankings-class-filter li a { border-radius: var(--radius-sm); }
.rankings-class-filter li a:hover { background: rgba(255, 255, 255, 0.8); }
.rankings-class-filter li a.is-on { background: #fff; box-shadow: 0 1px 0 #fff inset, 0 8px 20px rgba(22, 38, 76, 0.1); }
.rankings-update-time { text-align: center; }

/* Tables inside plates */
.table thead th, .rankings-table tr:first-child td, .general-table-ui tr:first-child td, .table.table-bordered thead th { background: rgba(33, 57, 113, 0.035); }
.table tbody tr:hover, .rankings-table tr:not(:first-child):hover { background: rgba(33, 57, 113, 0.035); }
.table.table-bordered { border-color: var(--line-soft); }

/* The sign-in and sign-up plates carry the gold action, as Play does at home. */
.page-login .form-horizontal .btn, .page-register .form-horizontal .btn, .page-forgotpassword .form-horizontal .btn {
  color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); border-color: rgba(120, 78, 10, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 10px 28px rgba(201, 138, 30, 0.32);
}
.page-login .form-horizontal .btn:hover, .page-register .form-horizontal .btn:hover, .page-forgotpassword .form-horizontal .btn:hover {
  color: #3a2708; background: linear-gradient(180deg, #ffe08d, #f5b84b);
}
.page-register .col-xs-8.col-xs-offset-2, .page-login .col-xs-8.col-xs-offset-2, .page-forgotpassword .col-xs-8.col-xs-offset-2 { padding: 34px 34px 28px; }
.page-register .page-title, .page-login .page-title, .page-forgotpassword .page-title { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 26px; }

/* Buttons never leave their line; they only answer the press. */
.btn:hover, .mbtn:hover { transform: none; }

/* Footer: the white bar again, closing the page. */
.footer { position: relative; z-index: 1; background: #fff; border-top: 1px solid var(--line-soft); }

@media (max-width: 720px) {
  .sky-decor img { width: 40%; }
  .sky-decor__right { top: 460px; }
  .rankings_menu { border-radius: var(--radius); }
  .page-register .col-xs-8.col-xs-offset-2, .page-login .col-xs-8.col-xs-offset-2, .page-forgotpassword .col-xs-8.col-xs-offset-2 { padding: 24px 18px 20px; }
}
@media (max-width: 640px) {
  body:not(.page-home) { background-position: center 60px; }
  .shell { padding-top: 28px; }
}

/* Text standing on the sky is centred under the title, in ink, not grey. */
.dl-lead, .pay-lead { margin: -12px auto 28px; text-align: center; color: var(--blue-soft); }
.dl-group, .pay-h { display: flex; align-items: center; gap: 14px; color: var(--blue-deep); }
.dl-group::after, .pay-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(33, 57, 113, 0.18), rgba(33, 57, 113, 0)); }
.pay-log { background: var(--plate-glass); border-radius: var(--radius); box-shadow: var(--shadow-plate); overflow: hidden; }
.tablewrap { border-radius: var(--radius); }

/* Account sub-pages: the module sits on a plate beside the menu. */
.shell__split > .shell__main { padding: 30px 32px 32px; background: var(--plate-glass); border: 1px solid var(--plate-edge); border-radius: var(--radius); box-shadow: var(--shadow-plate); }
.shell__split > .shell__main .page-title { font-size: clamp(22px, 2.4vw, 28px); }
.shell__split > .shell__main .panel, .shell__split > .shell__main .rankings-table { box-shadow: none; border-color: var(--line-soft); }
.shell__side .plate__head { flex-wrap: wrap; align-items: center; }
.shell__side .plate__head h2 { white-space: nowrap; }
@media (max-width: 640px) { .shell__split > .shell__main { padding: 22px 16px; } }
/* Item tooltips hidden off the edge must not widen the page on a phone. */
html { overflow-x: clip; }

/* ==========================================================================
   Night — the same world after dark

   Switched by the button at the top right; the choice is kept in the browser.
   The tokens turn to a night sky: deep navy ground, plates a step lighter,
   ink turned to moonlight, gold unchanged. The landing's pictures stay and are
   dimmed by one veil, so the blurred strips still meet without a seam.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #b3c4ea;
  --blue-deep: #e8eefb;
  --blue-soft: #8fa3cf;
  --heading: #dfe6f3;
  --text: #d5ddea;
  --muted: #8d99b1;

  --sky: #0c1424;
  --sky-deep: #0a1120;
  --plate: #141e33;
  --plate-warm: #18233b;

  --ink-gold: #f1c46a;

  --line: rgba(179, 196, 234, 0.16);
  --line-soft: rgba(179, 196, 234, 0.09);

  --ok: #62d49a;
  --ok-soft: rgba(98, 212, 154, 0.14);
  --warn: #e3b457;
  --warn-ink: #eec46e;
  --bad: #f08c8c;
  --bad-soft: rgba(240, 140, 140, 0.12);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 32px 70px rgba(0, 0, 0, 0.45);

  --plate-glass: rgba(20, 30, 51, 0.9);
  --plate-edge: rgba(179, 196, 234, 0.1);
  --shadow-plate: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.4);
  --veil: rgba(6, 12, 28, 0.42);
}

/* The pictures under one veil */
:root[data-theme="dark"] .sky-decor::after { content: ""; position: absolute; inset: 0; background: var(--veil); }

/* Bars */
:root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .footer { background: #0f1829; border-color: var(--line); }
@media (max-width: 860px) { :root[data-theme="dark"] .nav { background: #0f1829; } }
:root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .nav a[aria-current="page"],
:root[data-theme="dark"] .lang__item:hover, :root[data-theme="dark"] .lang__item.is-active,
:root[data-theme="dark"] .rankings_menu a:hover, :root[data-theme="dark"] .rankings_menu a.active { background: rgba(179, 196, 234, 0.12); color: var(--blue-deep); }
:root[data-theme="dark"] .mlink:hover, :root[data-theme="dark"] .lang__button:hover { background: rgba(179, 196, 234, 0.1); }
:root[data-theme="dark"] .lang__button { background: rgba(179, 196, 234, 0.05); }
:root[data-theme="dark"] .lang__list { background: #141e33; border-color: var(--line); }
:root[data-theme="dark"] .mlink--accent { color: #f1c46a; background: rgba(245, 184, 75, 0.12); border-color: rgba(245, 184, 75, 0.4); }
:root[data-theme="dark"] .mlink--accent:hover { color: #ffd98a; background: rgba(245, 184, 75, 0.2); }
:root[data-theme="dark"] .brand__emblem { filter: brightness(0.92); }

/* Surfaces that were drawn white */
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .plate { background: var(--plate-glass); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .acct__field input { background: #0f1829; color: var(--blue-deep); border-color: var(--line); box-shadow: none; }
:root[data-theme="dark"] .form-control::placeholder { color: #6f7b93; }
:root[data-theme="dark"] .btn--ghost, :root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-xs { background: rgba(179, 196, 234, 0.06); border-color: var(--line); color: var(--blue); }
:root[data-theme="dark"] .btn--ghost:hover, :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-xs:hover { background: rgba(179, 196, 234, 0.12); color: var(--blue-deep); }
:root[data-theme="dark"] .rankings-class-filter li a:hover { background: rgba(179, 196, 234, 0.08); }
:root[data-theme="dark"] .rankings-class-filter li a.is-on { background: rgba(179, 196, 234, 0.14); box-shadow: none; }
:root[data-theme="dark"] .page-usercp .row .col-xs-3 > a:hover { background: var(--plate-warm); }
:root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .rankings-table tr:first-child td,
:root[data-theme="dark"] .general-table-ui tr:first-child td { background: rgba(179, 196, 234, 0.05); }
:root[data-theme="dark"] .table tbody tr:hover, :root[data-theme="dark"] .rankings-table tr:not(:first-child):hover { background: rgba(179, 196, 234, 0.05); }
:root[data-theme="dark"] .page-title::after { background: linear-gradient(90deg, rgba(241, 196, 106, 0) 0%, rgba(241, 196, 106, 0.55) 42%, rgba(241, 196, 106, 0) 47%, rgba(241, 196, 106, 0) 53%, rgba(241, 196, 106, 0.55) 58%, rgba(241, 196, 106, 0) 100%); }
:root[data-theme="dark"] .label-default { background: rgba(179, 196, 234, 0.08); }

/* Navy fills keep their navy: --blue is ink at night, not a fill. */
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .acct__submit, :root[data-theme="dark"] .vip-plan__buy, :root[data-theme="dark"] .mn-dialog__btn--main, :root[data-theme="dark"] .admincp-button {
  color: #fff; background: linear-gradient(180deg, #3a5aa6, #2b4788); border-color: #3a5aa6;
}
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .acct__submit:hover, :root[data-theme="dark"] .vip-plan__buy:hover { color: #fff; background: linear-gradient(180deg, #4566b4, #33529a); }
:root[data-theme="dark"] .btn--gold, :root[data-theme="dark"] .page-login .form-horizontal .btn, :root[data-theme="dark"] .page-register .form-horizontal .btn, :root[data-theme="dark"] .page-forgotpassword .form-horizontal .btn {
  color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); border-color: rgba(120, 78, 10, 0.25);
}
:root[data-theme="dark"] .btn--ghost, :root[data-theme="dark"] .btn-default { box-shadow: none; }

/* The theme switch */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--blue); cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.theme-toggle:hover { background: rgba(33, 57, 113, 0.08); border-color: var(--blue-soft); color: var(--blue-deep); }
:root[data-theme="dark"] .theme-toggle:hover { background: rgba(179, 196, 234, 0.12); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (max-width: 860px) { .theme-toggle { order: 2; } }
/* Words standing straight on the night sky need the moon behind them. */
:root[data-theme="dark"] .dl-lead, :root[data-theme="dark"] .pay-lead, :root[data-theme="dark"] .rankings-update-time,
:root[data-theme="dark"] .dl-group, :root[data-theme="dark"] .pay-h, :root[data-theme="dark"] .page-title, :root[data-theme="dark"] .pay-methods {
  color: var(--blue-deep); text-shadow: 0 1px 14px rgba(4, 8, 20, 0.85), 0 0 2px rgba(4, 8, 20, 0.6);
}
:root[data-theme="dark"] .rankings-class-filter li a { color: var(--blue-deep); text-shadow: 0 1px 10px rgba(4, 8, 20, 0.85); }
:root[data-theme="dark"] .nav-toggle { background: rgba(179, 196, 234, 0.06); border-color: var(--line); }
:root[data-theme="dark"] .rankings_menu { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn--gold, :root[data-theme="dark"] .page-login .form-horizontal .btn, :root[data-theme="dark"] .page-register .form-horizontal .btn { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }

/* ==========================================================================
   Inner pages stand on one flat colour; only the home page carries pictures.
   ========================================================================== */

body:not(.page-home) { background: var(--sky); }

/* ==========================================================================
   Registration — the game's door

   One wide plate split in two: the world on the left (the landing's picture,
   the emblem, what season and when it opens), four fields on the right that
   say what they are for and check themselves as they are typed.
   ========================================================================== */

.page-register .shell { max-width: 1040px; padding-top: 56px; }
.reg {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  border-radius: 20px;
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}

/* The Google way, beside the form: a quieter column with its own short road. */
.reg__side {
  display: flex; flex-direction: column;
  padding: 44px 40px 30px;
  background: var(--plate-warm);
  border-left: 1px solid var(--line-soft);
}
.reg__side-title { margin: 0; font-size: 20px; letter-spacing: 0.08em; line-height: 1.2; color: var(--blue-deep); }
.reg__side-text { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.reg__steps { display: grid; gap: 14px; margin: 26px 0 0; counter-reset: step; }
.reg__steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--text); counter-increment: step; }
.reg__steps li::before {
  content: counter(step); display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--display); font-size: 13px; color: var(--blue);
}
.reg__side .reg__have { margin-top: auto; }
:root[data-theme="dark"] .reg__side { background: #0f182b; }

/* The panel */
.reg__panel { display: flex; flex-direction: column; padding: 44px 48px 36px; min-width: 0; }
.reg__title { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: 0.08em; line-height: 1.1; color: var(--blue-deep); text-wrap: balance; }
.reg__lead { margin: 10px 0 26px; max-width: 42ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.reg__panel .alert { margin: 0 0 18px; }

.reg__google { box-shadow: none; }
.reg__or { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.reg__or::before, .reg__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.reg__form { display: grid; gap: 4px; }

/* A field: label, box, one line under it that is either the rule or the verdict. */
.rf { display: grid; gap: 6px; }
.rf__label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--blue-deep); }
.rf__box { position: relative; display: flex; align-items: center; }
.rf__input {
  width: 100%; height: 50px; padding: 0 16px;
  font: 500 16px/1 var(--body); color: var(--blue-deep); letter-spacing: 0.01em;
  background: var(--plate-warm);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.rf__input:hover { border-color: rgba(33, 57, 113, 0.3); }
.rf__input:focus { outline: none; background: var(--plate); border-color: var(--blue-soft); box-shadow: 0 0 0 4px rgba(74, 96, 150, 0.16); }
.rf__input[readonly] { color: var(--muted); cursor: default; }
.rf__box:has(.rf__count) .rf__input, .rf__box:has(.rf__eye) .rf__input, .rf__box:has(.rf__ok) .rf__input { padding-right: 58px; }
.rf__count { position: absolute; right: 16px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.rf__eye {
  position: absolute; right: 6px; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.rf__eye:hover { color: var(--blue-deep); background: rgba(33, 57, 113, 0.07); }
.rf__eye[aria-pressed="true"] { color: var(--blue-deep); }
.rf__eye svg, .rf__ok svg { width: 18px; height: 18px; }
.rf__ok { position: absolute; right: 16px; color: var(--ok); }
.rf__hint { min-height: 1.45em; margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.rf.is-ok .rf__input { border-color: rgba(29, 108, 67, 0.45); }
.rf.is-ok .rf__hint, .rf__hint.is-ok { color: var(--ok); }
.rf.is-bad .rf__input { border-color: rgba(155, 44, 44, 0.55); }
.rf.is-bad .rf__input:focus { box-shadow: 0 0 0 4px var(--bad-soft); }
.rf.is-bad .rf__hint, .rf.is-bad .rf__count { color: var(--bad); }

.reg__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 56px; margin-top: 8px; padding: 0 24px;
  border: 1px solid rgba(120, 78, 10, 0.25); border-radius: 999px;
  font-family: var(--display); font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
  box-shadow: 0 10px 26px rgba(201, 138, 30, 0.3);
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.reg__submit svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.reg__submit:hover { background: linear-gradient(180deg, #ffe08d, #f5b84b); box-shadow: 0 14px 32px rgba(201, 138, 30, 0.38); }
.reg__submit:hover svg { transform: translateX(3px); }
.reg__submit:active { transform: scale(0.98); }
.reg__submit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.reg__tos { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--muted); }
.reg__have { margin: auto 0 0; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 14px; text-align: center; color: var(--muted); }
.reg__have a { font-weight: 500; }
.reg__panel .reg__have { margin-top: 24px; }

/* Night */
:root[data-theme="dark"] .reg { background: #111b2f; }
:root[data-theme="dark"] .rf__input { background: #0c1424; border-color: var(--line); }
:root[data-theme="dark"] .rf__input:hover { border-color: rgba(179, 196, 234, 0.28); }
:root[data-theme="dark"] .rf__input:focus { background: #0c1424; border-color: #8fa3cf; box-shadow: 0 0 0 4px rgba(143, 163, 207, 0.18); }
:root[data-theme="dark"] .rf__eye:hover { background: rgba(179, 196, 234, 0.1); }
:root[data-theme="dark"] .rf.is-ok .rf__input { border-color: rgba(98, 212, 154, 0.45); }
:root[data-theme="dark"] .rf.is-bad .rf__input { border-color: rgba(240, 140, 140, 0.55); }
:root[data-theme="dark"] .reg__submit { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }

@media (max-width: 880px) {
  .page-register .shell { padding-top: 28px; }
  .reg { grid-template-columns: 1fr; }
  .reg__panel { padding: 30px 22px 26px; }
  .reg__side { order: -1; padding: 26px 22px 24px; border-left: 0; border-bottom: 1px solid var(--line-soft); }
  .reg__steps { display: none; }
  .reg__side .reg__have { margin-top: 18px; padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .reg__submit, .reg__submit svg, .rf__input { transition: none; } }

/* Night: selected text stays readable, and the header reads as bright as the page. */
:root[data-theme="dark"] ::selection { background: rgba(143, 163, 207, 0.5); color: #fff; }
:root[data-theme="dark"] .nav a, :root[data-theme="dark"] .mlink, :root[data-theme="dark"] .lang__button,
:root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .acct__toggle { color: #dbe4f6; }
:root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .nav a[aria-current="page"] { color: #fff; }
:root[data-theme="dark"] .brand__title { color: #eef2fb; }
:root[data-theme="dark"] .brand__sub { color: #aab6cf; }
:root[data-theme="dark"] .mlink, :root[data-theme="dark"] .lang__button, :root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .nav-toggle { border-color: rgba(219, 228, 246, 0.24); }
:root[data-theme="dark"] .nav-toggle span { background: #dbe4f6; }
/* The language pill's globe and arrow are drawn as images in navy; at night they are drawn in light. */
:root[data-theme="dark"] .lang__button img { filter: brightness(0) invert(0.9); }
:root[data-theme="dark"] .lang__button span { color: #dbe4f6; }
/* Register is the one gold door in the header: a real gold fill at night. */
:root[data-theme="dark"] .mlink--accent { color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); border-color: rgba(255, 215, 119, 0.6); }
:root[data-theme="dark"] .mlink--accent:hover { color: #3a2708; background: linear-gradient(180deg, #ffe08d, #f5b84b); border-color: #ffe08d; }

/* ==========================================================================
   Hover for the gold doors (Play now, Register) and Server info.
   Nothing moves off its line: the fill brightens, a gold ring and glow come
   up, and a sheen crosses the gold once.
   ========================================================================== */

.mbtn--gold, .mlink--accent, .mbtn--glass { position: relative; overflow: hidden; isolation: isolate; }
.mbtn--gold::after, .mlink--accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.mbtn--gold:hover::after, .mlink--accent:hover::after { transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }

.mbtn.mbtn--gold:hover, .mlink.mlink--accent:hover {
  color: #2a1c04;
  background: linear-gradient(180deg, #ffe69e, #f7bd4f);
  border-color: #ffe08d;
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.35), 0 12px 32px rgba(245, 170, 50, 0.45);
}
:root[data-theme="dark"] .mbtn.mbtn--gold:hover, :root[data-theme="dark"] .mlink.mlink--accent:hover {
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.3), 0 10px 34px rgba(245, 170, 50, 0.4);
}

.mbtn.mbtn--glass:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(74, 96, 150, 0.22), 0 14px 34px rgba(22, 38, 76, 0.2);
}
:root[data-theme="dark"] .mbtn.mbtn--glass:hover {
  color: #fff;
  background: rgba(40, 58, 96, 0.95);
  border-color: rgba(219, 228, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(143, 163, 207, 0.28), 0 14px 34px rgba(0, 0, 0, 0.45);
}
.mbtn, .mlink { transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.25s var(--ease-out), color 0.22s var(--ease-out), transform 0.16s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .mbtn--gold:hover::after, .mlink--accent:hover::after { transition: none; transform: translateX(-120%); } }

/* ==========================================================================
   One style everywhere: the home page's header world and the registration
   page's plate. Every form, button, title and plate below speaks the same
   language as registration; the footer speaks the header's.
   ========================================================================== */

:root[data-theme="dark"] {
  --plate: #111b2f;
  --plate-glass: #111b2f;
  --plate-warm: #0f182b;
  --plate-edge: rgba(179, 196, 234, 0.1);
}
.reg { border-radius: var(--radius); }
.reg--single { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
.reg--single .reg__panel { padding: 40px 44px 30px; }
.reg__panel > .reg__have { margin-top: 26px; }
.page-login .shell, .page-forgotpassword .shell { max-width: 1040px; padding-top: 56px; }
.rf__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rf__aside { font-size: 13px; }

/* Titles: the registration title's voice, centred, without ornament. */
.page-title { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: 0.08em; line-height: 1.12; margin-bottom: 28px; padding-bottom: 0; }
.page-title::before, .page-title::after { display: none; }
.page-title ~ .page-title { font-size: clamp(19px, 2vw, 23px); }

/* Module forms take the registration fields. */
.control-label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--blue-deep); }
.form-control, input.form-control, select.form-control {
  height: 50px; padding: 0 16px; font-weight: 500; color: var(--blue-deep);
  background: var(--plate-warm); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: none;
}
textarea.form-control { height: auto; padding: 12px 16px; }
.form-control:focus { background: var(--plate); border-color: var(--blue-soft); box-shadow: 0 0 0 4px rgba(74, 96, 150, 0.16); }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] input.form-control, :root[data-theme="dark"] select.form-control { background: #0c1424; }
:root[data-theme="dark"] .form-control:focus { background: #0c1424; border-color: #8fa3cf; box-shadow: 0 0 0 4px rgba(143, 163, 207, 0.18); }
.help-block { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Buttons: the primary action is the registration gold everywhere. */
.btn, .btn-primary, button.btn, .vip-plan__buy,
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .vip-plan__buy {
  color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
  border: 1px solid rgba(120, 78, 10, 0.25);
  box-shadow: 0 10px 26px rgba(201, 138, 30, 0.28);
}
.btn:hover, .btn-primary:hover, .vip-plan__buy:hover,
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .vip-plan__buy:hover {
  color: #2a1c04; background: linear-gradient(180deg, #ffe69e, #f7bd4f); border-color: #ffe08d;
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.3), 0 12px 30px rgba(245, 170, 50, 0.38);
}
.btn { min-height: 50px; font-size: 15px; }
.btn--ghost, .btn-default, .btn-xs,
:root[data-theme="dark"] .btn--ghost, :root[data-theme="dark"] .btn-default, :root[data-theme="dark"] .btn-xs {
  color: var(--blue); background: transparent; border-color: var(--line); box-shadow: none;
}
.btn--ghost:hover, .btn-default:hover, .btn-xs:hover,
:root[data-theme="dark"] .btn--ghost:hover, :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-xs:hover {
  color: var(--blue-deep); background: rgba(33, 57, 113, 0.08); border-color: var(--blue-soft); box-shadow: none;
}
:root[data-theme="dark"] .btn--ghost:hover, :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-xs:hover { background: rgba(179, 196, 234, 0.12); }
.btn-xs { min-height: 0; font-size: 12px; }

/* Plates: the registration plate's edge and shadow. */
.plate, .panel, .rankings-table, .acc-card, .char, .pay-empty, .profiles_player_card, .profiles_guild_card,
.shell__split > .shell__main, .page-usercp .row .col-xs-3 > a, .rankings_menu, .pay-log {
  background: var(--plate); border-color: var(--plate-edge);
}

/* Footer: the header's colours. */
.footer__brand { color: var(--blue); }
.footer__brand p { color: var(--muted); }
.footer__links a { color: var(--blue); }
:root[data-theme="dark"] .footer__brand { color: #eef2fb; }
:root[data-theme="dark"] .footer__brand p, :root[data-theme="dark"] .footer__meta { color: #aab6cf; }
:root[data-theme="dark"] .footer__links a { color: #dbe4f6; }
:root[data-theme="dark"] .footer__links a:hover { color: #fff; }

@media (max-width: 880px) {
  .page-login .shell, .page-forgotpassword .shell { padding-top: 28px; }
  .reg--single .reg__panel { padding: 30px 22px 24px; }
}
.acct__submit, :root[data-theme="dark"] .acct__submit { color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); border: 1px solid rgba(120, 78, 10, 0.25); border-radius: 999px; }
.acct__submit:hover, :root[data-theme="dark"] .acct__submit:hover { color: #2a1c04; background: linear-gradient(180deg, #ffe69e, #f7bd4f); filter: none; }
.vip-plan__buy:disabled, .vip-plan__buy[disabled], .btn:disabled,
:root[data-theme="dark"] .vip-plan__buy:disabled, :root[data-theme="dark"] .btn:disabled {
  color: var(--muted); background: transparent; border-color: var(--line); box-shadow: none; cursor: not-allowed; opacity: 1;
}

/* ==========================================================================
   Every gold button answers the hover the way Register does: the gold
   brightens, a gold ring and glow come up, and a sheen crosses it once.
   ========================================================================== */

.reg__submit, .btn:not(.btn--ghost):not(.btn-default):not(.btn-xs), .acct__submit, .vip-plan__buy {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out), box-shadow 0.25s var(--ease-out), color 0.22s var(--ease-out), transform 0.16s var(--ease-out);
}
.reg__submit::after, .btn:not(.btn--ghost):not(.btn-default):not(.btn-xs)::after, .acct__submit::after, .vip-plan__buy::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.reg__submit:hover::after, .btn:not(.btn--ghost):not(.btn-default):not(.btn-xs):hover::after, .acct__submit:hover::after, .vip-plan__buy:not(:disabled):hover::after {
  transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.reg__submit:hover, .acct__submit:hover, .vip-plan__buy:not(:disabled):hover,
.btn:not(.btn--ghost):not(.btn-default):not(.btn-xs):not(:disabled):hover,
:root[data-theme="dark"] .reg__submit:hover, :root[data-theme="dark"] .acct__submit:hover, :root[data-theme="dark"] .vip-plan__buy:not(:disabled):hover,
:root[data-theme="dark"] .btn:not(.btn--ghost):not(.btn-default):not(.btn-xs):not(:disabled):hover {
  color: #2a1c04;
  background: linear-gradient(180deg, #ffe69e, #f7bd4f);
  border-color: #ffe08d;
  box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.33), 0 12px 32px rgba(245, 170, 50, 0.42);
}
.btn:disabled::after, .vip-plan__buy:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .reg__submit:hover::after, .btn:hover::after, .acct__submit:hover::after, .vip-plan__buy:hover::after { transition: none; transform: translateX(-120%); }
}

/* ==========================================================================
   The signed-in menu: who you are, what you hold, where to go, and the way out
   ========================================================================== */

.acct__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0.02em; }
.umenu { width: 290px; padding: 8px; }
.umenu__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.umenu__avatar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--display); font-size: 18px; color: #3a2708;
  background: linear-gradient(180deg, #ffd777, #f3b23f);
}
.umenu__who { display: grid; min-width: 0; line-height: 1.25; }
.umenu__who strong { font-weight: 600; font-size: 15px; color: var(--blue-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu__who small { font-size: 12px; color: var(--muted); }

.umenu__purse {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 0 10px;
  margin: 0 2px 6px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(245, 184, 75, 0.1); border: 1px solid rgba(245, 184, 75, 0.28);
  text-decoration: none; transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.umenu__purse:hover { background: rgba(245, 184, 75, 0.18); border-color: rgba(245, 184, 75, 0.5); text-decoration: none; }
.umenu__purse-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.umenu__purse-fig { grid-row: 2; font-family: var(--display); font-size: 22px; letter-spacing: 0.03em; color: #f1c46a; font-variant-numeric: tabular-nums; }
.umenu__purse-add { grid-row: 1 / 3; grid-column: 2; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); }

.umenu__list { display: grid; gap: 1px; padding: 4px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.umenu__list a, .umenu__out {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 14.5px; color: var(--text); text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.umenu__list svg, .umenu__out svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: color 0.15s var(--ease); }
.umenu__list a:hover { background: rgba(179, 196, 234, 0.1); color: #fff; text-decoration: none; }
.umenu__list a:hover svg { color: #f1c46a; }
.umenu__out { margin-top: 4px; color: #f0a0a0; }
.umenu__out svg { color: currentColor; }
.umenu__out:hover { background: rgba(240, 140, 140, 0.12); color: #ffc2c2; text-decoration: none; }

/* Account page: the short roster that leads to the characters page */
.acc-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 34px; }
.acc-h-row .acc-h { margin: 0; }
.acc-h-link { font-size: 14px; }
.roster { display: grid; gap: 8px; margin-top: 14px; }
.roster__item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px;
  padding: 10px 18px 10px 12px; border-radius: var(--radius-sm);
  background: var(--plate); border: 1px solid var(--plate-edge); text-decoration: none; color: var(--text);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.roster__item:hover { background: #16223a; border-color: rgba(179, 196, 234, 0.22); text-decoration: none; }
.roster__avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); object-fit: cover; }
.roster__who { display: grid; line-height: 1.25; min-width: 0; }
.roster__who strong { font-family: var(--display); font-size: 16px; letter-spacing: 0.06em; color: var(--blue-deep); }
.roster__who small { font-size: 12.5px; color: var(--muted); }
.roster__fig { display: grid; justify-items: end; min-width: 64px; font-family: var(--display); font-size: 17px; color: var(--blue-deep); font-variant-numeric: tabular-nums; line-height: 1.2; }
.roster__fig small { font-family: var(--body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.roster__item > .acc-state { justify-self: end; }
.page-lead { margin: -14px auto 28px; max-width: 60ch; text-align: center; color: var(--muted); }
.char { scroll-margin-top: 90px; }
@media (max-width: 640px) {
  .roster__item { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .roster__item > .acc-state, .roster__fig:last-child { display: none; }
  .umenu { width: auto; }
}
@media (max-width: 860px) { .masthead__tools .acct--user .mlink { display: inline-flex; } }

/* ==========================================================================
   A header item that opens a small menu (Donate)
   ========================================================================== */

.navdrop { position: relative; }
.navdrop__toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 14px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; letter-spacing: var(--track-ui); text-transform: uppercase; color: #dbe4f6;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.navdrop__toggle svg { width: 13px; height: 13px; transition: transform 0.18s var(--ease); }
.navdrop__toggle:hover, .navdrop.is-open .navdrop__toggle, .navdrop__toggle.is-current { background: rgba(179, 196, 234, 0.12); color: #fff; }
.navdrop.is-open .navdrop__toggle svg { transform: rotate(180deg); }
.nav ul.navdrop__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60;
  display: grid; gap: 2px; width: 270px; padding: 8px;
  background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: translateX(-50%); transform-origin: top center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out), visibility 0s linear 0.16s;
}
.navdrop.is-open .navdrop__menu { opacity: 1; visibility: visible; transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out); }
.nav .navdrop__menu a { display: grid; gap: 2px; height: auto; padding: 10px 14px; border-radius: 10px; text-transform: none; letter-spacing: 0; white-space: normal; }
.navdrop__title { font-size: 14.5px; font-weight: 500; color: #eef2fb; }
.navdrop__desc { font-size: 12.5px; color: #aab6cf; }
.nav .navdrop__menu a:hover, .nav .navdrop__menu a[aria-current="page"] { background: rgba(179, 196, 234, 0.1); }
.nav .navdrop__menu a:hover .navdrop__title { color: #f1c46a; }

@media (max-width: 1080px) { .navdrop__toggle { padding: 0 9px 0 11px; font-size: 12.5px; } }
@media (max-width: 860px) {
  .navdrop__toggle { width: 100%; height: 44px; justify-content: space-between; }
  .nav ul.navdrop__menu { position: static; width: auto; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; display: none; opacity: 1; visibility: visible; }
  .navdrop.is-open .navdrop__menu { display: grid; }
}

/* VIP page */
.page-vip .shell { max-width: 1080px; }
.vip-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 20px; border-radius: var(--radius);
  background: rgba(245, 184, 75, 0.08); border: 1px solid rgba(245, 184, 75, 0.25);
}
.vip-bar__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.vip-bar__fig { font-family: var(--display); font-size: 24px; color: #f1c46a; font-variant-numeric: tabular-nums; }
.vip-bar__fig small { font-family: var(--body); font-size: 13px; color: var(--muted); }
.vip-bar__add { margin-left: auto; padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); text-decoration: none; }
.vip-bar__add:hover { color: #2a1c04; background: linear-gradient(180deg, #ffe69e, #f7bd4f); box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.3); text-decoration: none; }
/* The shop says what the account holds in one mark under its own lead: a
   plate of its own would split the page before the packages are even read. */
.pay-purse {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  width: fit-content; margin: -18px auto 26px; padding: 7px 16px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--plate-warm);
  font-size: 13px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted);
}
.pay-purse svg { width: 15px; height: 15px; align-self: center; color: var(--gold); opacity: 0.9; }
.pay-purse b { font-family: var(--display); font-size: 19px; letter-spacing: var(--track-display); color: #f1c46a; font-variant-numeric: tabular-nums; }
.pay-purse small { font-size: 11.5px; letter-spacing: var(--track-micro); color: var(--muted); }
.vip-page { padding: 24px; }
.vip-page .vip-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .vip-page .vip-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vip-page .vip-plans { grid-template-columns: 1fr; } }
.acc-vip__go { margin-top: 14px; width: 100%; }

/* Small menus: fit their content, and give each row an icon. */
.nav ul.navdrop__menu { width: max-content; min-width: 230px; justify-content: stretch; }
.nav .navdrop__menu a { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 10px; }
.navdrop__text { display: grid; gap: 1px; }
.navdrop__icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  color: #aebbd8; background: rgba(179, 196, 234, 0.08);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.navdrop__icon svg { width: 19px; height: 19px; }
.nav .navdrop__menu a:hover .navdrop__icon, .nav .navdrop__menu a[aria-current="page"] .navdrop__icon { color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); }
@media (max-width: 860px) { .nav ul.navdrop__menu { width: auto; min-width: 0; } }

/* ==========================================================================
   Discord and Facebook across the site
   ========================================================================== */

/* Header, left corner beside the emblem */
.msocial { display: flex; align-items: center; gap: 4px; padding-left: 14px; margin-left: 2px; border-left: 1px solid rgba(219, 228, 246, 0.14); flex-shrink: 0; }
.msocial__link {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #aebbd8; transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.msocial__link svg { width: 17px; height: 17px; }
.msocial__link--discord:hover { color: #fff; background: #5865f2; }
.msocial__link--facebook:hover { color: #fff; background: #1877f2; }
.nav .nav__social { display: none; }
@media (max-width: 860px) {
  .msocial { display: none; }
  .nav .nav__social { display: block; }
  .nav .nav__social a { gap: 10px; text-transform: none; letter-spacing: 0.02em; }
  .nav .nav__social svg { width: 18px; height: 18px; }
}

/* Signed-in menu: help line */
.umenu__help {
  display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 9px 12px; border-radius: 10px;
  font-size: 14.5px; color: #b9c0ff; text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.umenu__help svg { width: 18px; height: 18px; flex: none; }
.umenu__help:hover { background: rgba(88, 101, 242, 0.16); color: #fff; text-decoration: none; }

/* Footer */
.footer__social { display: inline-flex; align-items: center; gap: 6px; }
.footer__social svg { width: 15px; height: 15px; }

/* A help strip with one Discord action (downloads, after registering, account) */
.help-ds {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  margin: 26px 0 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--plate); border: 1px solid var(--plate-edge);
}
.help-ds--welcome { margin: 0 0 22px; border-color: rgba(88, 101, 242, 0.4); background: linear-gradient(90deg, rgba(88, 101, 242, 0.14), rgba(88, 101, 242, 0.04)), var(--plate); }
.help-ds__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(88, 101, 242, 0.16); color: #8c95ff; }
.help-ds__mark svg { width: 24px; height: 24px; }
.help-ds__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.help-ds__text strong { color: var(--blue-deep); font-weight: 600; }
.help-ds__btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap; color: #fff; background: #5865f2; text-decoration: none;
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.help-ds__btn svg { width: 18px; height: 18px; }
.help-ds__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%); transform: translateX(-120%); }
.help-ds__btn:hover { color: #fff; background: #6773f4; box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.35); text-decoration: none; }
.help-ds__btn:hover::after { transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
.reg__panel .help-ds { margin: 0 0 20px; }
@media (max-width: 640px) {
  .help-ds { grid-template-columns: auto minmax(0, 1fr); }
  .help-ds__btn { grid-column: 1 / -1; justify-content: center; }
}

/* Account tools: the Discord help chip */
.acc-tool--ds { display: inline-flex; align-items: center; gap: 7px; }
.acc-tool--ds svg { width: 15px; height: 15px; color: #8c95ff; }

/* Footer: the same social pair as the header, beside the emblem. */
@media (max-width: 860px) { .footer .msocial--footer { display: flex; border-left: 0; padding-left: 0; } }

/* ==========================================================================
   Header that always fits. It spans wider than the page, so the emblem sits
   nearer the left edge; and whenever its items would collide — any width,
   any language — the script marks it compact and the nav folds into the
   menu button, exactly as it does on phones.
   ========================================================================== */

.masthead__inner { max-width: 1600px; gap: 14px; }
.brand { margin-right: 2px; }

.masthead.is-compact .nav-toggle { display: flex; order: 3; }
.masthead.is-compact .masthead__tools { order: 2; margin-left: auto; }
.masthead.is-compact .nav {
  position: absolute; left: 0; right: 0; top: 68px; display: none;
  padding: 10px var(--gutter) 16px;
  background: #0f1829; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.masthead.is-compact .nav.is-open { display: block; }
.masthead.is-compact .nav ul { flex-direction: column; gap: 2px; }
.masthead.is-compact .nav a { height: 44px; }
.masthead.is-compact .navdrop__toggle { width: 100%; height: 44px; justify-content: space-between; }
.masthead.is-compact .nav ul.navdrop__menu { position: static; width: auto; min-width: 0; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; display: none; opacity: 1; visibility: visible; }
.masthead.is-compact .navdrop.is-open .navdrop__menu { display: grid; }
.masthead.is-compact .nav .nav__social { display: block; }
.masthead.is-compact .nav .nav__social a { gap: 10px; text-transform: none; letter-spacing: 0.02em; }
.masthead.is-compact .nav .nav__social svg { width: 18px; height: 18px; }
.masthead.is-compact .msocial:not(.msocial--footer) { display: none; }
@media (max-width: 640px) { .masthead.is-compact .nav { top: 60px; } }


.masthead.is-compact .nav-toggle { margin-left: 0; }
.masthead.is-compact .masthead__tools { margin-left: auto; }

.msocial__link--youtube:hover { color: #fff; background: #ff0033; }

/* Confirming an email: one centred plate, like sign in */
.page-confirmemail .shell__main--full, .page-verifyemail .shell__main--full {
  max-width: 540px; margin: 0 auto; padding: 40px 44px 32px; text-align: center;
  background: var(--plate); border: 1px solid var(--plate-edge); border-radius: var(--radius); box-shadow: var(--shadow-plate);
}
.page-confirmemail .page-title, .page-verifyemail .page-title { margin-bottom: 14px; }
.page-confirmemail .pay-lead { margin: 0 auto 6px; max-width: 42ch; }
.page-confirmemail .claim { margin: 22px auto 0; max-width: 100%; text-align: left; }
.page-confirmemail .claim__label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--blue-deep); }
.page-confirmemail .claim__input, .page-confirmemail .claim__code { height: 50px; border-radius: var(--radius-sm); background: #0c1424; border: 1px solid var(--line); color: var(--blue-deep); }
.page-confirmemail .claim .btn { width: 100%; }
.page-confirmemail .claim__again { display: block; margin: 16px auto 0; }
.page-confirmemail .alert { text-align: left; }
@media (max-width: 640px) { .page-confirmemail .shell__main--full, .page-verifyemail .shell__main--full { padding: 28px 20px 24px; } }

/* Leaving for the payment page: one centred plate, a spinner, the fallback link */
.pay-going {
  display: grid; justify-items: center; gap: 16px; max-width: 460px; margin: 10px auto 0; padding: 34px 30px;
  text-align: center; background: var(--plate); border: 1px solid var(--plate-edge); border-radius: var(--radius); box-shadow: var(--shadow-plate);
}
.pay-going__spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(241, 196, 106, 0.2); border-top-color: #f1c46a; animation: pay-spin 0.8s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-going__text { margin: 0; font-size: 15.5px; color: var(--blue-deep); }
@media (prefers-reduced-motion: reduce) { .pay-going__spin { animation-duration: 2.4s; } }

/* A lone action or note on a page is centred, never left hanging */
.shell__main--full > p:has(> .btn:only-child) { display: flex; justify-content: center; margin: 18px 0 0; }
.pay-empty { text-align: center; }
.page-confirmemail .shell__main--full > p:has(> .btn) { margin-top: 20px; }
/* Notices standing alone on a wide page sit centred at a readable width */
.shell__main--full > .alert { max-width: 720px; margin-left: auto; margin-right: auto; }
.dl-empty { text-align: center; }

/* ==========================================================================
   Voting: the reward on top, one row per top list
   ========================================================================== */

.page-vote .shell { max-width: 980px; }
.vote-reward {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 22px 26px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(245, 184, 75, 0.1), rgba(245, 184, 75, 0.02)), var(--plate);
  border: 1px solid rgba(245, 184, 75, 0.3); box-shadow: var(--shadow-plate);
}
.vote-reward__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 119, 0.28), rgba(245, 184, 75, 0.06) 70%);
  border: 1px solid rgba(245, 184, 75, 0.45);
}
.vote-reward__icon img { width: 48px; height: 48px; object-fit: contain; }
.vote-reward__label { margin: 0; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #f1c46a; }
.vote-reward__name { margin: 4px 0 0; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.06em; color: var(--blue-deep); }
.vote-reward__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.vote-reward__tag { padding: 3px 10px; border-radius: 999px; font-weight: 600; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f); }
.vote-reward__every { margin: 0; max-width: 16ch; font-size: 13px; line-height: 1.4; text-align: right; color: var(--muted); }
.vote-pending { margin: 14px 0 0; text-align: center; font-size: 14px; color: #f1c46a; }

.vote-sites { display: grid; gap: 10px; margin: 22px 0 0; }
.vote-site {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 16px 14px 14px; border-radius: var(--radius);
  background: var(--plate); border: 1px solid var(--plate-edge);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.vote-site:hover { border-color: rgba(179, 196, 234, 0.22); }
.vote-site__mark {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  font-family: var(--display); font-size: 22px; color: #dbe4f6; background: rgba(179, 196, 234, 0.08);
}
.vote-site__id { display: grid; line-height: 1.3; min-width: 0; }
.vote-site__id strong { font-size: 16px; font-weight: 600; color: var(--blue-deep); }
.vote-site__id small { font-size: 13px; color: var(--muted); }
.vote-site__form { margin: 0; }
.vote-site__btn { min-width: 170px; }
.btn.vote-site__btn { min-height: 46px; gap: 10px; }
.btn.vote-site__btn svg { width: 17px; height: 17px; }
button.vote-site__btn:disabled {
  min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14px;
  color: var(--muted); background: transparent; border: 1px solid var(--line); cursor: default;
}
.vote-site.is-wait .vote-site__mark { color: var(--muted); }
@media (max-width: 640px) {
  .vote-reward { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .vote-reward__every { grid-column: 1 / -1; max-width: none; text-align: left; }
  .vote-site { grid-template-columns: 44px minmax(0, 1fr); }
  .vote-site__form { grid-column: 1 / -1; }
  .vote-site__btn, .btn.vote-site__btn { width: 100%; }
}

.vote-site__mark { background: transparent; padding: 0; }
.vote-site__mark svg { width: 48px; height: 48px; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); }
.vote-site.is-wait .vote-site__mark svg { filter: grayscale(0.7) brightness(0.8); }
.vote-site__verified { color: #7fe0a8; }
.vote-site__awaiting { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: #f1c46a; }

.vote-reward { grid-template-columns: auto minmax(0, 1fr) auto; }
.vote-target { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(245, 184, 75, 0.18); }
.vote-target__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.vote-target__label { font-size: 13.5px; color: var(--muted); }
.vote-target__select {
  height: 42px; min-width: 200px; padding: 0 38px 0 14px; border-radius: 10px;
  font: 500 15px var(--body); color: var(--blue-deep); background: #0c1424; border: 1px solid var(--line);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab6cf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.vote-target__select:focus { outline: none; border-color: #8fa3cf; box-shadow: 0 0 0 4px rgba(143, 163, 207, 0.18); }
.vote-target__none { margin: 0; font-size: 14px; color: #f1c46a; }
.vote-opened { margin: 14px 0 0; text-align: center; font-size: 14.5px; color: #7fe0a8; }

.vote-give { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin: 16px 0 0; }
.vote-give .vote-pending { margin: 0; }
.vote-give__btn { min-height: 44px; }

/* Info: record + experience on the left, the short facts and the wiki on the right */
.info { grid-template-columns: minmax(300px, 4fr) minmax(0, 7fr); }
.info__record, .info__main { display: grid; gap: 20px; align-content: start; }
.info__val { font-family: var(--body) !important; font-size: 15px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; }
.info__exp-table td, .info__exp-table th { padding: 8px 22px; }
.evs__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Event schedule */
.page-events .shell { max-width: 1080px; }
.evs-clock { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(179, 196, 234, 0.08); color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.evs { margin-bottom: 20px; }
.evs__table td, .evs__table th { padding: 11px 22px; }
.evs__name { font-weight: 600; color: var(--blue-deep) !important; white-space: nowrap; }
.evs__times { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.evs__left { font-family: var(--display); color: #f1c46a; }
.evs__left .event-schedule-open, .evs__left .event-schedule-inprogress { font-family: var(--body); font-size: 13px; font-weight: 600; }
.evs-more { text-align: center; margin-top: 8px; }
@media (max-width: 720px) { .evs__times { display: none; } }

/* ==========================================================================
   Downloads: the client as one wide plate with large mirror tiles
   ========================================================================== */

.page-downloads .shell { max-width: 1120px; }
.dlc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px;
  padding: 34px 36px; margin-bottom: 26px; border-radius: 20px;
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, rgba(88, 130, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(245, 184, 75, 0.09), transparent 70%),
    var(--plate);
  border: 1px solid rgba(179, 196, 234, 0.14); box-shadow: var(--shadow-plate);
}
.dlc__kicker { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #f1c46a; }
.dlc__title { margin: 6px 0 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: 0.06em; line-height: 1.15; color: var(--blue-deep); }
.dlc__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.dlc__meta span { padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--blue-deep); background: rgba(179, 196, 234, 0.08); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dlc__desc { margin: 14px 0 0; max-width: 48ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.dlc__steps-title { margin: 26px 0 12px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.dlc__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: dls; }
.dlc__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; font-size: 15px; color: var(--text); counter-increment: dls; }
.dlc__steps li::before {
  content: counter(dls); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--display); font-size: 14px; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
}
.dlc__acc { margin: 22px 0 0; font-size: 14.5px; color: var(--muted); }
.dlc__acc a { font-weight: 600; }
.dlc__choose { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.mirrors--big { display: grid; gap: 10px; margin: 0; }
.mirror.mirror--big {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 14px 12px 16px; border-radius: 14px;
  background: #0c1424; border: 1px solid rgba(179, 196, 234, 0.12);
  font-size: 15px; color: var(--blue-deep);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.mirror--big .mirror__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.mirror--big .mirror__icon svg { width: 28px; height: 28px; }
.mirror__text { display: grid; gap: 2px; min-width: 0; }
.mirror--big .mirror__name { font-size: 17px; font-weight: 600; color: #eef2fb; white-space: normal; }
.mirror__note { font-size: 13px; line-height: 1.35; color: var(--muted); }
.mirror__go {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #3a2708; background: linear-gradient(180deg, #ffd777, #f3b23f);
  box-shadow: 0 8px 20px rgba(201, 138, 30, 0.25);
  transition: background 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.mirror__go svg { width: 18px; height: 18px; }
.mirror.mirror--big:hover { text-decoration: none; border-color: rgba(245, 184, 75, 0.5); background: #101a2e; box-shadow: 0 0 0 3px rgba(245, 184, 75, 0.12); }
.mirror.mirror--big:hover .mirror__go { background: linear-gradient(180deg, #ffe69e, #f7bd4f); box-shadow: 0 0 0 3px rgba(255, 208, 102, 0.3), 0 10px 26px rgba(245, 170, 50, 0.4); }
.mirror.mirror--big:active { transform: scale(0.99); }
.dlc__sum { margin-top: 14px; font-size: 13px; color: var(--muted); }
.dlc__sum summary { cursor: pointer; }
.dlc__sum code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #0c1424; font-size: 12px; color: var(--blue-deep); word-break: break-all; }

/* What the launcher takes off your hands. One plate, four statements, the
   same gold-on-navy the client plate above is built from — so the page reads
   as one object with a second paragraph, not as two unrelated boxes.

   No icons: a sentence set beside a picture of a gear is read as a caption
   for the gear. The numbers carry the eye instead, and they are drawn by the
   counter so the markup stays four plain articles. */
.dlf {
  position: relative; margin: 0 0 26px; padding: 30px 36px 32px; border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 90% at 0% 0%, rgba(245, 184, 75, 0.10), transparent 70%),
    radial-gradient(ellipse 55% 80% at 100% 100%, rgba(88, 130, 255, 0.12), transparent 70%),
    var(--plate);
  border: 1px solid rgba(179, 196, 234, 0.14); box-shadow: var(--shadow-plate);
}
/* A hairline of gold along the top edge, brightest where the eye lands. */
.dlf::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, rgba(245, 184, 75, 0), rgba(245, 184, 75, 0.55) 30%, rgba(245, 184, 75, 0));
}
.dlf__title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--display); font-size: 15px; font-weight: 400;
  letter-spacing: var(--track-ui); text-transform: uppercase; color: #f1c46a;
}
.dlf__title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(245, 184, 75, 0.35), rgba(245, 184, 75, 0));
}
.dlf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 36px; counter-reset: dlf; }
.dlf__item {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px;
  padding: 20px 0; counter-increment: dlf;
}
/* A rule between the rows, never under the last one in a column. */
.dlf__item::after {
  content: ""; position: absolute; inset: auto 0 0 50px; height: 1px;
  background: linear-gradient(90deg, rgba(179, 196, 234, 0.16), rgba(179, 196, 234, 0));
}
.dlf__item:nth-last-child(-n + 2)::after { display: none; }
.dlf__item h3 {
  grid-column: 2; margin: 0; font-size: 17.5px; letter-spacing: 0.05em; line-height: 1.25;
  color: #eef2fb;
}
.dlf__item p { grid-column: 2; margin: 7px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* The number sits in its own column and spans both rows, so the text keeps a
   straight left edge whether it runs to one line or four. */
.dlf__item::before {
  content: "0" counter(dlf); grid-row: 1 / span 2; align-self: start;
  font-family: var(--display); font-size: 15px; line-height: 1.3; letter-spacing: 0.08em;
  color: #f1c46a; opacity: 0.75; font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .dlf { padding: 24px 22px 26px; }
  .dlf__grid { grid-template-columns: 1fr; gap: 0; }
  .dlf__item:nth-last-child(-n + 2)::after { display: block; }
  .dlf__item:last-child::after { display: none; }
}

.page-downloads .dl-group { margin-top: 34px; }
.page-downloads .dl { padding: 20px 22px 18px; border-radius: 16px; }
.page-downloads .mirror { background: #0c1424; border-color: rgba(179, 196, 234, 0.14); color: var(--blue-deep); }
.page-downloads .mirror:hover { border-color: rgba(245, 184, 75, 0.5); background: #101a2e; }

@media (max-width: 900px) {
  .dlc { grid-template-columns: 1fr; padding: 26px 22px; gap: 26px; }
}
@media (max-width: 520px) {
  .mirror.mirror--big { grid-template-columns: 40px minmax(0, 1fr); }
  .mirror--big .mirror__icon { width: 40px; height: 40px; }
  .mirror__go { grid-column: 1 / -1; justify-content: center; }
}

/* The crypto discount: gold, because it is money the player keeps. Sits under
   the group's note, above its buttons. */
.wgrp__off { margin: -2px 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-gold, var(--gold)); }

/* The menu button keeps its round shape: on a narrow header the flex row
   squeezed it into a pill before anything else gave way. */
.nav-toggle { flex: 0 0 40px; min-width: 40px; }
.masthead__tools > * { flex-shrink: 0; }
/* On a phone the row gives up the arrows and some air, not the menu button. */
@media (max-width: 480px) {
  .masthead__inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .masthead__tools { gap: 6px; }
  .lang__button { padding: 0 10px 0 8px; gap: 6px; }
  .lang__arrow, .acct__chev { display: none; }
  .masthead__tools .acct__toggle { padding: 0; width: 40px; justify-content: center; }
  .brand { gap: 8px; }
}
@media (max-width: 350px) {
  .brand__title { display: none; }
}

/* Direct support contacts above the contact form. */
.support-direct { margin-bottom: 18px; }
.support-direct__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.support-direct__list span { color: var(--muted); margin-right: 6px; font-size: 13px; }

/* Code word for the payment provider's bank review — quiet, but readable. */
.footer__code { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }

/* Earned seals: a count the player can see, and the button that sends them. */
.vote-give { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--plate); justify-content: flex-start; }
.vote-give.has-seals { border-color: rgba(245, 184, 75, 0.45); }
.vote-give__count { display: grid; justify-items: start; gap: 2px; }
.vote-give__label { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.vote-give__num { font-family: var(--display); font-size: 30px; line-height: 1; color: #f1c46a; font-variant-numeric: tabular-nums; }
.vote-give__text { flex: 1 1 220px; min-width: 0; }
.vote-give__hint { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.vote-give__hint + .vote-give__hint { margin-top: 4px; }
.vote-give__btn { min-height: 46px; margin-left: auto; }
.vote-give__btn[disabled] { opacity: 0.45; cursor: default; filter: saturate(0.4); box-shadow: none; }
@media (max-width: 560px) { .vote-give__btn { width: 100%; margin-left: 0; justify-content: center; } }

/* One row: brand, links, small print. The footer takes the full window
   width so the seven links sit on one line beside the other two.

   Only where there is a window to take: below 860px the footer stacks, and
   this block sits after that rule in the file, so without the query it wins
   and squeezes three columns onto a phone. */
@media (min-width: 861px) {
  .footer__inner { max-width: 1560px; grid-template-columns: auto 1fr auto; gap: 20px 32px; }
  .footer__links { gap: 6px 16px; }
  .footer__links a { white-space: nowrap; }
  .footer__meta { max-width: 24em; }
}

/* ---- Signing in with Google when the address opens several accounts ------- */
/* One row per account, each its own submit: the choice is the click, with no
   radio to pick and no second button to press afterwards. */
.gpick { gap: 8px; }
.gpick__lead { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.gpick__one {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  min-height: 56px; padding: 0 18px; border-radius: 14px; text-align: left;
  font-family: var(--display); font-size: 17px; letter-spacing: 0.04em; color: var(--blue-deep);
  background: var(--plate-warm); border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.12s var(--ease-out);
}
.gpick__one svg { width: 20px; height: 20px; flex: none; opacity: 0.5; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.gpick__one:hover { border-color: rgba(245, 184, 75, 0.55); background: rgba(245, 184, 75, 0.06); }
.gpick__one:hover svg { opacity: 1; transform: translateX(3px); }
.gpick__one:active { transform: scale(0.99); }

/* ---- Registration, before the day it opens -------------------------------- */
.reg__panel--shut { text-align: center; }
.reg__panel--shut .reg__lead { margin-inline: auto; max-width: 46ch; }
.reg__shutmark {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; color: var(--ink-gold);
  background: linear-gradient(180deg, rgba(245, 184, 75, 0.18), rgba(245, 184, 75, 0.05)), var(--plate-warm);
  border: 1px solid rgba(245, 184, 75, 0.45);
}
.reg__shutmark svg { width: 26px; height: 26px; }
.reg__shutnote { margin: 12px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.reg__shutgo { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.reg__panel--shut .reg__have { margin-top: 22px; text-align: center; }

/* ==========================================================================
   Support: the channels that answer, then the form that always works.
   ========================================================================== */

/* One channel or three, a card keeps a card's width: a single stretched
   plate across a wide screen reads as an empty page, not as an answer. */
.sup-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.sup-way { flex: 1 1 260px; max-width: 420px; }

.sup-way {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px 20px 20px; background: var(--plate); border: 1px solid var(--plate-edge);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}

.sup-way__mark {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px;
  border-radius: 50%; color: var(--blue); background: var(--plate-warm); border: 1px solid var(--line);
}
.sup-way__mark svg { width: 20px; height: 20px; }
.sup-way h2 { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: var(--track-display); color: var(--blue-deep); }
.sup-way p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sup-way .btn { margin-top: auto; padding-top: 10px; padding-bottom: 10px; min-height: 44px; }
.sup-way__link { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 500; word-break: break-all; }
.sup-way--discord .sup-way__mark { color: #8ea1ff; border-color: rgba(142, 161, 255, 0.4); background: rgba(142, 161, 255, 0.12); }

.sup-form { padding: 22px 24px 24px; }
.sup-form__title { margin: 0 0 4px; font-family: var(--display); font-size: 21px; letter-spacing: var(--track-display); color: var(--blue-deep); }
.sup-form__hours { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.sup-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.sup-form__cell--wide { grid-column: 1 / -1; }
.sup-form__text { min-height: 180px; padding-top: 12px; line-height: 1.55; resize: vertical; }
.sup-form select.rf__input { appearance: none; cursor: pointer; }
.sup-form__send { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.sup-form__send .btn { min-width: 200px; }
.sup-form .cf-holder { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .sup-form { padding: 18px 16px 20px; }
  .sup-form__grid { grid-template-columns: 1fr; }
  .sup-form__send .btn { width: 100%; }
}


/* Guild profile: identity on top, members as a list (2026-09-28). */
.gcard { padding: 28px; }
.gcard__head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.gcard__logo img, .gcard__logo canvas { display: block; width: 120px; height: 120px; border-radius: 12px; image-rendering: pixelated; }
.gcard__name { margin: 0 0 12px; font-family: var(--display); font-size: 28px; letter-spacing: var(--track-display); color: var(--blue); }
.gcard__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gcard__facts li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.gcard__facts li span { color: var(--muted); }
.gcard__facts li b { font-weight: 600; color: var(--blue-deep); font-variant-numeric: tabular-nums; }
.gcard__title { margin: 28px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gcard__tablewrap { overflow-x: auto; margin: 0 -4px; }
.gcard__table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.gcard__table th { padding: 10px 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; border-bottom: 1px solid var(--plate-edge, var(--line-soft)); white-space: nowrap; }
.gcard__table td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.gcard__table .l { text-align: left; }
.gcard__table td.num { width: 44px; color: var(--muted); }
.gcard__table td.cls { color: var(--muted); }
.gcard__table tbody tr:nth-child(even) td { background: var(--line-soft); }
.gcard__table tbody tr:hover td { background: rgba(127, 150, 200, 0.14); }
.gcard__table tr.is-master td { box-shadow: inset 0 1px 0 var(--blue), inset 0 -1px 0 var(--blue); }
.gcard__table td.on { color: #3fb56b; font-weight: 600; }
.gcard__table td.off { color: var(--muted); }
.gcard__badge { margin-left: 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
@media (max-width: 600px) {
  .gcard { padding: 20px; }
  .gcard__head { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .gcard__name { text-align: center; }
  .gcard__facts { width: 100%; }
  .gcard__table th, .gcard__table td { padding: 9px 8px; font-size: 14px; }
}

/* Ranking search (2026-09-28): under the class filter; the hint sits in a
   reserved line, so typing never moves the page. */
.rk-search { max-width: 420px; margin: 18px auto 20px; }
.rk-search__field { position: relative; display: flex; align-items: center; height: 50px; padding: 0 8px 0 48px; border-radius: 999px;
  background: var(--plate, transparent); border: 1px solid var(--plate-edge, var(--line-soft));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -16px rgba(10, 20, 45, 0.55);
  transition: border-color .18s ease, box-shadow .18s ease; cursor: text; }
.rk-search__field:hover { border-color: var(--blue-soft, var(--blue)); }
.rk-search__field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(127, 150, 200, 0.16), 0 10px 28px -16px rgba(10, 20, 45, 0.6); }
.rk-search__icon { position: absolute; left: 18px; width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; transition: stroke .18s ease; }
.rk-search__field:focus-within .rk-search__icon { stroke: var(--blue); }
.rk-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--blue-deep); font: inherit; font-size: 16px; letter-spacing: .01em; outline: none; -webkit-appearance: none; appearance: none; }
.rk-search input::-webkit-search-cancel-button { display: none; }
.rk-search input::placeholder { color: var(--muted); opacity: .85; }
.rk-search__kbd { flex: none; margin-right: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line-soft); font: 600 11px/1.4 inherit; letter-spacing: .04em; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.rk-search.is-active .rk-search__kbd { opacity: 1; }
.rk-search__clear { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--line-soft); color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease, transform .12s ease; }
.rk-search__clear:hover { color: var(--blue); }
.rk-search__clear:active { transform: scale(.94); }
.rk-search__clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rk-search__clear[hidden] { display: none; }
.rk-search__none { height: 22px; margin: 10px 0 0; text-align: center; font-size: 14px; line-height: 22px; color: var(--muted); visibility: hidden; opacity: 0; transition: opacity .15s ease; }
.rk-search__none.is-on { visibility: visible; opacity: 1; }
.rk-search__none a { color: var(--blue); font-weight: 600; }
@media (max-width: 600px) { .rk-search__kbd { display: none; } .rk-search { margin: 14px 0 16px; } }

/* Character page (2026-09-28): hero, equipment doll, stats, details. */
.pp { display: grid; gap: 18px; }
.pp-card { background: var(--plate); border: 1px solid var(--plate-edge); border-radius: 18px; box-shadow: var(--shadow-plate, var(--shadow-sm)); }
.pp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pp-card__head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.pp-card__aside { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* hero */
.pp-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 26px 28px; }
.pp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 0% 0%, rgba(245, 184, 75, 0.10), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(120, 150, 230, 0.10), transparent 60%); pointer-events: none; }
.pp-hero > * { position: relative; }
.pp-hero__portrait { position: relative; width: 112px; height: 112px; border-radius: 22px; padding: 3px; background: linear-gradient(145deg, var(--gold), rgba(245, 184, 75, 0.15) 60%, var(--line)); }
.pp-hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 19px; }
.pp-hero__dot { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); border: 3px solid var(--plate); }
.pp-hero__portrait.is-online .pp-hero__dot { background: var(--ok, #3fb56b); box-shadow: 0 0 0 4px rgba(98, 212, 154, 0.18); }
.pp-hero__name { margin: 0; font-family: var(--display); font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: var(--track-display, .02em); color: var(--heading, var(--blue-deep)); overflow-wrap: anywhere; }
.pp-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: 15px; }
.pp-hero__class { color: var(--text, var(--blue-deep)); font-weight: 600; }
.pp-hero__guild { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--line-soft); color: var(--blue); text-decoration: none; }
.pp-hero__guild img { width: 22px; height: 22px; border-radius: 6px; image-rendering: pixelated; }
.pp-hero__guild:hover { background: var(--line); }
.pp-vip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #1b1405; background: linear-gradient(135deg, var(--gold), var(--gold-deep, #c98a1e)); }
.pp-hero__status { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.pp-on { color: var(--ok, #3fb56b); font-weight: 600; }
.pp-ranks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.pp-ranks a { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.pp-ranks a b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pp-ranks a:hover { border-color: var(--gold); color: var(--text, var(--blue-deep)); }
.pp-hero__nums { display: grid; grid-template-columns: repeat(2, minmax(118px, 1fr)); gap: 10px; margin: 0; }
.pp-hero__nums div { padding: 12px 16px; border-radius: 14px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pp-hero__nums dt { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.pp-hero__nums dd { margin: 4px 0 0; font-size: 26px; font-weight: 700; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }

/* body */
.pp-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pp-gear, .pp-stats, .pp-info { padding: 22px 24px; }
.pp-side { display: grid; gap: 18px; }

/* equipment */
.pp-gearsum { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.pp-gearsum b { color: var(--text, var(--blue-deep)); font-variant-numeric: tabular-nums; }
.pp-gearsum .exc b { color: var(--ok, #3fb56b); }
.pp-gearsum .anc b { color: #8fb6ff; }
.pp-doll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pp-slot { position: relative; aspect-ratio: 4 / 3; min-height: 0; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 40%, rgba(120, 150, 230, 0.10), transparent 70%), var(--plate-warm); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; outline: none; }
.pp-slot:not(.is-empty):hover, .pp-slot:focus-visible { border-color: var(--blue-soft); transform: translateY(-2px); z-index: 3; }
.pp-slot.is-exc { border-color: rgba(98, 212, 154, 0.55); box-shadow: inset 0 0 22px rgba(98, 212, 154, 0.12); }
.pp-slot.is-anc { border-color: rgba(120, 160, 255, 0.6); box-shadow: inset 0 0 22px rgba(120, 160, 255, 0.14); }
.pp-slot.is-empty { border-style: dashed; background: transparent; }
.pp-slot__icon { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 62%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.pp-slot__noicon { padding: 8px; font-size: 12px; text-align: center; color: var(--text, var(--blue-deep)); }
.pp-slot__empty { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); opacity: .7; }
.pp-slot__lvl { position: absolute; top: 7px; right: 8px; font-size: 13px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.pp-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 260px; display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #0b1222; border: 1px solid rgba(179, 196, 234, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.35; color: #c9d3e6; text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; pointer-events: none; z-index: 20; }
.pp-tip strong { color: #fff; font-size: 14px; }
.pp-slot.is-exc .pp-tip strong { color: #7fe0a0; }
.pp-slot.is-anc .pp-tip strong { color: #8fb6ff; }
.pp-tip__slot { font-size: 11px; letter-spacing: var(--track-micro); text-transform: uppercase; color: #7f8aa3; margin-bottom: 4px; }
.pp-tip__exc { color: #7fe0a0; }
.pp-tag { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: var(--track-micro); text-transform: uppercase; }
.pp-tag--exc { color: #7fe0a0; }
.pp-tag--anc { color: #8fb6ff; }
.pp-slot:hover .pp-tip, .pp-slot:focus-visible .pp-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.pp-doll .pp-slot:nth-child(3n+1) .pp-tip { left: 0; transform: translate(0, 6px); }
.pp-doll .pp-slot:nth-child(3n+1):hover .pp-tip, .pp-doll .pp-slot:nth-child(3n+1):focus-visible .pp-tip { transform: translate(0, 0); }
.pp-doll .pp-slot:nth-child(3n) .pp-tip { left: auto; right: 0; transform: translate(0, 6px); }
.pp-doll .pp-slot:nth-child(3n):hover .pp-tip, .pp-doll .pp-slot:nth-child(3n):focus-visible .pp-tip { transform: translate(0, 0); }

/* stats */
.pp-statlist { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.pp-stat { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.pp-stat__name { font-size: 14px; color: var(--muted); }
.pp-stat__val { font-size: 18px; font-weight: 700; color: var(--text, var(--blue-deep)); font-variant-numeric: tabular-nums; }
.pp-stat__bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.pp-stat__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--gold)); }
.pp-stat--str { --c: #e0795f; } .pp-stat--agi { --c: #62d49a; } .pp-stat--vit { --c: #e3b457; } .pp-stat--ene { --c: #7fa4ff; } .pp-stat--cmd { --c: #c58cf0; }
.pp-private { display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.pp-private svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* details */
.pp-facts { display: grid; margin: 0; }
.pp-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.pp-facts div:first-child { border-top: 0; padding-top: 0; }
.pp-facts dt { font-size: 14px; color: var(--muted); }
.pp-facts dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; color: var(--text, var(--blue-deep)); }
.pp-facts small { margin-left: 4px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-muted { color: var(--muted); font-weight: 400; }
.pp-pk { padding: 2px 10px; border-radius: 999px; font-size: 13px; }
.pp-pk--ok { color: var(--ok, #3fb56b); background: var(--ok-soft, rgba(98, 212, 154, 0.14)); }
.pp-pk--hero { color: #8fb6ff; background: rgba(120, 160, 255, 0.14); }
.pp-pk--warn { color: var(--warn, #e3b457); background: rgba(227, 180, 87, 0.14); }
.pp-pk--bad { color: var(--bad, #f08c8c); background: var(--bad-soft, rgba(240, 140, 140, 0.12)); }

@media (max-width: 980px) {
  .pp-hero { grid-template-columns: auto 1fr; }
  .pp-hero__nums { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pp-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 22px 18px; gap: 18px; }
  .pp-hero__meta, .pp-ranks { justify-content: center; }
  .pp-hero__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pp-gear, .pp-stats, .pp-info { padding: 18px; }
  .pp-doll { gap: 8px; }
  .pp-tip { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .pp-slot, .pp-tip { transition: none; } }

/* Privacy options (2026-09-28): usercp/privacy. */
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 14px 20px; border-radius: 16px; background: var(--plate); border: 1px solid var(--plate-edge); box-shadow: var(--shadow-plate, var(--shadow-sm)); }
.pv-bar span { color: var(--muted); font-size: 14px; }
.pv-bar b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.pv-bar__buy { margin-left: auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.pv-bar__buy:hover { background: var(--gold); color: #1b1405; }
.pv-note { margin: -6px 0 18px; padding: 12px 16px; border-radius: 12px; background: rgba(227, 180, 87, 0.12); color: var(--warn-ink, var(--warn, #c98a1e)); font-size: 14px; }
.pv-list { display: grid; gap: 16px; }
.pv-char { padding: 20px 22px; border-radius: 18px; background: var(--plate); border: 1px solid var(--plate-edge); box-shadow: var(--shadow-plate, var(--shadow-sm)); }
.pv-char__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pv-char__avatar { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.pv-char__name { margin: 0; font-size: 18px; }
.pv-char__name a { color: var(--heading, var(--blue-deep)); text-decoration: none; }
.pv-char__name a:hover { color: var(--gold); }
.pv-char__meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pv-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pv-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--plate-warm); transition: border-color .15s ease, background .15s ease; }
.pv-opt.is-on { border-color: rgba(98, 212, 154, 0.45); background: linear-gradient(0deg, rgba(98, 212, 154, 0.06), rgba(98, 212, 154, 0.06)), var(--plate-warm); }
.pv-opt__text { display: grid; gap: 4px; min-width: 0; }
.pv-opt__text strong { font-size: 15px; color: var(--text, var(--blue-deep)); }
.pv-opt__text span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.pv-buy { flex: none; padding: 10px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; color: #1b1405; background: linear-gradient(135deg, var(--gold), var(--gold-deep, #c98a1e)); cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.pv-buy:hover { filter: brightness(1.06); }
.pv-buy:active { transform: scale(.97); }
.pv-buy[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.pv-switch { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.pv-switch__track { position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.pv-switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .18s cubic-bezier(.23, 1, .32, 1); }
.pv-opt.is-on .pv-switch__track { background: var(--ok, #3fb56b); }
.pv-opt.is-on .pv-switch__knob { transform: translateX(20px); }
.pv-switch__label { min-width: 56px; font-size: 13px; font-weight: 600; text-align: left; }
.pv-opt.is-on .pv-switch__label { color: var(--ok, #3fb56b); }
.pv-switch:focus-visible .pv-switch__track, .pv-buy:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rk-hidden { color: var(--muted); }
@media (max-width: 760px) {
  .pv-opts { grid-template-columns: 1fr; }
  .pv-bar__buy { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pv-switch__knob, .pv-switch__track { transition: none; } }

/* Account characters page (2026-09-28): the pp-* blocks, one card per character. */
.uc-list { display: grid; gap: 22px; }
.uc { padding: 24px 26px; }
.uc-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.uc-head__portrait { width: 78px; height: 78px; border-radius: 18px; }
.uc-head__portrait img { border-radius: 15px; }
.uc-head__name { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: var(--track-display, .02em); color: var(--heading, var(--blue-deep)); }
.uc-ingame { padding: 3px 10px; border-radius: 999px; font-family: var(--body, inherit); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok, #3fb56b); background: var(--ok-soft, rgba(98, 212, 154, 0.14)); }
.uc-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 15px; color: var(--text, var(--blue-deep)); }
.uc-head__meta a { color: var(--blue); }
.uc-dot { color: var(--muted); }
.uc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uc-actions a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.uc-actions a:hover { border-color: var(--gold); color: var(--text, var(--blue-deep)); }
.uc-actions em { font-style: normal; color: var(--ok, #3fb56b); }
.uc-nums { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
.uc-nums dd { font-size: 22px; }
.uc-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.uc-body h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--muted); }
.uc-side .pp-statlist { margin-bottom: 20px; }
.uc-facts { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.uc-facts div:first-child { padding-top: 11px; border-top: 0; }
.uc-private { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--gold); background: rgba(245, 184, 75, 0.12); }
@media (max-width: 980px) {
  .uc-head { grid-template-columns: auto 1fr; }
  .uc-nums { grid-column: 1 / -1; }
  .uc-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .uc { padding: 18px; }
  .uc-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .uc-head__name, .uc-head__meta, .uc-actions { justify-content: center; }
  .uc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}