@charset "utf-8";
/*
 * Desktop layout of the neon-mu template (screens wider than 900px): the NEON v2 look built on the mobile design -
 * sharp neon panels with corner marks, lit title strips, engraved Cinzel capitals, Chakra Petch for interface and figures.
 * Loaded after style.css and mobile.css; every rule sits in the min-width media query, so phones keep mobile.css only.
 * The old desktop chrome (header artwork, side columns) is hidden. The blocks still used are moved by mobile.js into the
 * top bar (guest login form, player card) and the home timeline (event list).
 * The accent colour follows the realm the site shows: body.d-realm-<server> (view.header.php).
 */
@media (min-width: 901px) {

  /* Tokens
  ---------------------------------------------------------------------------*/
  .m-ready {
    --acc: 0, 226, 255;
    --acc-hi: #8ff3ff;
    --acc-pale: #dff6ff;
    --gold: #f2d488;
    --gold-rgb: 255, 196, 64;
    --title: #f4f8fc;
    --text: #e6eef7;
    --label: #9aa8c2;
    --dim: #7f8ca6;
    --body-text: #a9b6cc;
    --panel-fill: rgba(9, 13, 25, 0.74);
    --line: rgba(var(--acc), 0.3);
    --line-soft: rgba(var(--acc), 0.09);
    --glow: 0 0 16px rgba(var(--acc), 0.12), inset 0 0 18px rgba(var(--acc), 0.05);
    --glow-gold: 0 0 16px rgba(var(--gold-rgb), 0.12), inset 0 0 18px rgba(var(--gold-rgb), 0.05);
    --strip: linear-gradient(180deg, rgba(var(--acc), 0.1), rgba(var(--acc), 0.02));
    --strip-gold: linear-gradient(180deg, rgba(var(--gold-rgb), 0.09), rgba(var(--gold-rgb), 0.02));
    --btn-fill: linear-gradient(90deg, rgba(var(--acc), 0.05), rgba(var(--acc), 0.18) 50%, rgba(var(--acc), 0.05));
    --font-game: "Cinzel", "Times New Roman", Times, serif;
    --font-ui: "Chakra Petch", "Segoe UI", Arial, sans-serif;
    /* Corner marks of a panel: the first background layers; the realm colour, gold, pink and orange variants. */
    --corner: rgb(var(--acc));
    --corners:
      linear-gradient(var(--corner), var(--corner)) left top / 18px 2px no-repeat,
      linear-gradient(var(--corner), var(--corner)) left top / 2px 18px no-repeat,
      linear-gradient(var(--corner), var(--corner)) right top / 18px 2px no-repeat,
      linear-gradient(var(--corner), var(--corner)) right top / 2px 18px no-repeat,
      linear-gradient(var(--corner), var(--corner)) left bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner), var(--corner)) left bottom / 2px 18px no-repeat,
      linear-gradient(var(--corner), var(--corner)) right bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner), var(--corner)) right bottom / 2px 18px no-repeat;
    --corner-gold: rgba(255, 196, 64, 0.85);
    --corners-gold:
      linear-gradient(var(--corner-gold), var(--corner-gold)) left top / 18px 2px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) left top / 2px 18px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) right top / 18px 2px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) right top / 2px 18px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) left bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) left bottom / 2px 18px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) right bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-gold), var(--corner-gold)) right bottom / 2px 18px no-repeat;
    --corner-pink: rgba(255, 92, 205, 0.85);
    --corners-pink:
      linear-gradient(var(--corner-pink), var(--corner-pink)) left top / 18px 2px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) left top / 2px 18px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) right top / 18px 2px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) right top / 2px 18px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) left bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) left bottom / 2px 18px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) right bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-pink), var(--corner-pink)) right bottom / 2px 18px no-repeat;
    --corner-best: rgba(255, 138, 61, 0.9);
    --corners-best:
      linear-gradient(var(--corner-best), var(--corner-best)) left top / 18px 2px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) left top / 2px 18px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) right top / 18px 2px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) right top / 2px 18px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) left bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) left bottom / 2px 18px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) right bottom / 18px 2px no-repeat,
      linear-gradient(var(--corner-best), var(--corner-best)) right bottom / 2px 18px no-repeat;
  }

  /* Realm colours: Genesis neon cyan (default), Infinity a light warm mint (a glowing lamp), Legacy a light warm scarlet. */
  .m-ready.d-realm-NEON2 {
    --acc: 112, 250, 196;
    --acc-hi: #b4ffe0;
    --acc-pale: #e8fff5;
  }

  .m-ready.d-realm-NEON3 {
    --acc: 255, 104, 116;
    --acc-hi: #ffb3b9;
    --acc-pale: #ffeaec;
  }

  /* Page frame
  ---------------------------------------------------------------------------*/
  html {
    scroll-padding-top: 96px;
  }

  body.m-ready {
    background: #05070d repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 4px);
    color: var(--body-text);
    font: 400 15px/1.55 var(--font-ui);
  }

  .m-ready ::selection {
    background: rgba(var(--acc), 0.35);
    color: #fff;
  }

  /* Ambient effect (view.header.php canvas.d-ambient, drawn by js/ambient.js) in the dark fields beside the 1360px
     content column: neon archangel wings in the realm colour.
     It sits under the page (z-index -1, over the body background) and shows from 1500px (see the end of the file). */
  .m-ready .d-ambient {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .m-ready h1,
  .m-ready h2,
  .m-ready h3 {
    color: #e3ebf4;
    font-family: var(--font-game);
  }

  /* The old desktop chrome: header artwork, logo, side columns (their blocks are hidden or moved by mobile.js). */
  .m-ready .body-t {
    min-height: 0;
    background: none;
  }

  .m-ready .wrapper {
    width: auto;
  }

  .m-ready .header,
  .m-ready .left-sidebar,
  .m-ready .right-sidebar {
    display: none;
  }

  .m-ready .container {
    display: block;
    min-height: 0;
    background: none;
  }

  .m-ready .content {
    width: auto;
    max-width: 1360px;
    margin: 0 auto;
    padding: 44px 40px 80px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.55;
  }

  .m-ready .content img {
    max-width: 100%;
  }

  /* The login form and the player card live in the top bar; until mobile.js moves them they stay out of sight. */
  .m-ready .content > .login-block,
  .m-ready .content > .m-player-card,
  .m-ready .content > #character-info:empty {
    display: none;
  }

  /* Shared pieces
  ---------------------------------------------------------------------------*/
  .m-ready .d-panel {
    position: relative;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-ready .d-panel-gold {
    border-color: rgba(var(--gold-rgb), 0.45);
    background: var(--corners-gold), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow-gold);
  }

  .m-ready .d-strip {
    position: relative;
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--acc-pale);
    font: 400 13px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.5);
    text-transform: uppercase;
  }

  .m-ready .d-strip:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: rgb(var(--acc));
    box-shadow: 0 0 8px rgb(var(--acc));
  }

  .m-ready .d-strip-gold {
    border-bottom-color: rgba(var(--gold-rgb), 0.3);
    background: var(--strip-gold);
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-ready .d-strip-gold:after {
    background: rgb(var(--gold-rgb));
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.8);
  }

  .m-ready .d-section-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 22px;
  }

  .m-ready .d-section-head h2 {
    margin: 0;
    color: #e3ebf4;
    font: 900 30px/1.2 var(--font-game);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .m-ready .d-section-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--acc), 0.45), rgba(var(--acc), 0));
  }

  .m-ready .d-section-note {
    color: var(--dim);
    font: 600 11px/1.3 var(--font-ui);
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .m-ready .d-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(var(--acc));
    font: 600 12px/1.4 var(--font-ui);
    letter-spacing: 0.34em;
    text-transform: uppercase;
  }

  .m-ready .d-page-head {
    margin: 0 0 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(var(--acc), 0.16);
  }

  .m-ready .d-page-title {
    margin: 10px 0 0;
    color: var(--title);
    font: 900 52px/1.05 var(--font-game);
    letter-spacing: 0.08em;
    text-shadow: 0 0 22px rgba(var(--acc), 0.18);
    text-transform: uppercase;
  }

  .m-ready .d-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 30px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 13px/1 var(--font-game);
    letter-spacing: 0.22em;
    text-decoration: none;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .d-btn:hover {
    background-color: rgba(var(--acc), 0.12);
    box-shadow: 0 0 22px rgba(var(--acc), 0.32), inset 0 0 18px rgba(var(--acc), 0.14);
    color: #fff;
    filter: none;
  }

  .m-ready .d-btn-gold {
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(9, 13, 25, 0.7);
    box-shadow: none;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-ready .d-btn-gold:hover {
    background-color: rgba(var(--gold-rgb), 0.1);
    box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.25);
    color: #fff1c4;
  }

  /* HUD corner brackets on the main buttons. */
  .m-ready .d-hud:before,
  .m-ready .d-hud:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid rgb(var(--acc));
    filter: drop-shadow(0 0 3px rgb(var(--acc)));
    pointer-events: none;
  }

  .m-ready .d-hud:before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  .m-ready .d-hud:after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .m-ready .d-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    background: #5fd38d;
    box-shadow: 0 0 8px rgba(95, 211, 141, 0.8);
  }

  .m-ready .d-dot.is-off {
    background: #6f7c99;
    box-shadow: none;
  }

  /* Places: neon in the realm colour; the top three in gold, silver and bronze. */
  .m-ready .d-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45);
    background: rgba(var(--acc), 0.06);
    color: var(--acc-hi);
    font: 700 13px/1 var(--font-ui);
  }

  .m-ready .d-rank-1 {
    border-color: #ffe9a6;
    background: linear-gradient(180deg, #fff0b8, #ffc440);
    box-shadow: 0 0 12px rgba(255, 196, 64, 0.6);
    color: #2a1a00;
  }

  .m-ready .d-rank-2 {
    border-color: rgba(228, 237, 246, 0.7);
    background: rgba(228, 237, 246, 0.08);
    color: #e4edf6;
  }

  .m-ready .d-rank-3 {
    border-color: rgba(242, 176, 126, 0.7);
    background: rgba(242, 176, 126, 0.08);
    color: #f2b07e;
  }

  .m-ready .d-empty {
    margin: auto 0;
    padding: 24px 20px;
    color: var(--dim);
    font: 400 13px/1.4 var(--font-game);
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
  }

  /* Castle owner mark (also used by js_templates/rank_guilds.ejs): the fill shifts from the realm colour to gold. */
  .m-ready .castle-owner-mark {
    animation-name: d-castle-fill;
  }

  /* Top bar (view.header.php .d-topbar)
  ---------------------------------------------------------------------------*/
  .m-ready .d-topbar {
    position: sticky;
    top: 0;
    z-index: 9000;
    border-bottom: 1px solid rgba(var(--acc), 0.28);
    background: rgba(5, 7, 13, 0.94);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .m-ready .d-topbar-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 1360px;
    min-height: 76px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }

  .m-ready .d-brand {
    flex: 0 0 auto;
    color: #e3ebf4;
    font: 900 22px/1 var(--font-game);
    letter-spacing: 0.14em;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(var(--acc), 0.45), 0 0 18px rgba(var(--acc), 0.2);
    white-space: nowrap;
  }

  .m-ready .d-brand b {
    color: var(--gold);
    font-weight: inherit;
  }

  .m-ready .d-brand:hover {
    color: #fff;
    filter: none;
  }

  .m-ready .d-nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
  }

  .m-ready .d-nav-link {
    padding: 29px 11px 27px;
    color: var(--label);
    font: 700 11px/1 var(--font-game);
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .d-nav-link:hover {
    color: var(--acc-pale);
    filter: none;
  }

  .m-ready .d-nav-link.is-active {
    box-shadow: inset 0 -2px 0 rgb(var(--acc));
    color: var(--acc-pale);
    text-shadow: 0 0 8px rgba(var(--acc), 0.6);
  }

  .m-ready .d-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
  }

  .m-ready .d-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform 0.15s ease;
  }

  .m-ready .d-drop.is-open .d-chevron {
    transform: rotate(180deg);
  }

  /* Realm switch: fixed width, so the buttons after it never move when the realm name changes. */
  .m-ready .d-realm-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 196px;
    min-height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.7);
    border-radius: 0;
    background: rgba(var(--acc), 0.12);
    box-shadow: 0 0 12px rgba(var(--acc), 0.2);
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.14em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.7);
    text-transform: uppercase;
  }

  .m-ready .d-realm-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-ready .d-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(var(--acc), 0.3);
    border-radius: 0;
    background: rgba(9, 13, 25, 0.8);
    color: var(--acc-pale);
  }

  .m-ready .d-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(var(--acc), 0.5));
  }

  /* Wiki search: the magnifier with its caption (the menu has no Wiki link). */
  .m-ready .d-wiki-btn {
    gap: 9px;
    width: auto;
    padding: 0 16px 0 13px;
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.16em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.6);
    text-transform: uppercase;
    cursor: pointer;
  }

  .m-ready .d-wiki-btn:hover {
    border-color: rgba(var(--acc), 0.6);
  }

  .m-ready.m-wiki-open .d-icon-btn[data-m-wiki-toggle] {
    border-color: rgba(var(--acc), 0.7);
    background: rgba(var(--acc), 0.12);
  }

  .m-ready .d-login-btn,
  .m-ready .d-account-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 600 13px/1 var(--font-ui);
    letter-spacing: 0.3em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
  }

  .m-ready .d-account-btn {
    max-width: 230px;
    padding: 0 14px;
    letter-spacing: 0.08em;
    text-transform: none;
  }

  .m-ready .d-account-btn > svg:first-child {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .m-ready .d-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Drop-down panels under the top bar buttons (mobile.js toggles .is-open on [data-d-drop]). */
  .m-ready .d-drop {
    position: relative;
  }

  .m-ready .d-drop-panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 9100;
    min-width: 240px;
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--corners), rgba(7, 10, 20, 0.98);
    background-origin: border-box;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(var(--acc), 0.15);
  }

  .m-ready .d-drop.is-open .d-drop-panel {
    display: block;
  }

  .m-ready .d-realm-menu {
    width: 250px;
  }

  .m-ready .d-realm-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid rgba(var(--acc), 0.12);
    border-radius: 0;
    background: none;
    color: var(--label);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-ready .d-realm-opt:last-child {
    border-bottom: 0;
  }

  .m-ready .d-realm-opt:hover {
    background: rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    filter: none;
  }

  .m-ready .d-realm-opt.is-active {
    background: rgba(var(--acc), 0.12);
    color: var(--acc-pale);
    text-shadow: 0 0 8px rgba(var(--acc), 0.6);
  }

  .m-ready .d-realm-opt-online {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font: 600 14px/1 var(--font-ui);
    letter-spacing: 0.04em;
  }

  /* Guest login form (view.top_content.php .login-block, moved into .d-login-panel). */
  .m-ready .d-login-panel {
    width: 340px;
  }

  .m-ready .d-login-panel .login-block {
    width: auto;
    height: auto;
    margin: 0;
    padding: 20px;
    background: none;
    text-align: left;
  }

  .m-ready .d-login-panel #login_form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .m-ready .d-login-panel .login-block input {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.22);
    background: rgba(4, 8, 18, 0.6);
    color: var(--text);
    font: 15px var(--font-ui);
    text-align: left;
  }

  .m-ready .d-login-panel .login-block input:focus {
    outline: none;
    border-color: rgba(var(--acc), 0.6);
    box-shadow: 0 0 10px rgba(var(--acc), 0.2);
  }

  .m-ready .d-login-panel #login_input::placeholder,
  .m-ready .d-login-panel #password_input::placeholder {
    color: rgba(150, 170, 205, 0.5);
    font-size: 12px;
    letter-spacing: 0.16em;
    animation: none;
  }

  .m-ready .d-login-panel .login-block input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 100px #070b16;
    box-shadow: inset 0 0 0 100px #070b16;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
  }

  .m-ready .d-login-panel #login_form button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 4px 0 0;
    padding: 0;
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 13px/1 var(--font-game);
    letter-spacing: 0.3em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
  }

  .m-ready .d-login-panel #login_form button:hover {
    background-color: rgba(var(--acc), 0.14);
    filter: none;
  }

  .m-ready .d-login-panel .m-login-label {
    padding-left: 0.3em;
  }

  .m-ready .d-login-panel .m-login-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 13px;
  }

  .m-ready .d-login-panel .m-login-links a {
    color: var(--acc-hi);
    text-decoration: none;
  }

  .m-ready .d-login-panel .m-login-links a:hover {
    color: #fff;
    filter: none;
    text-decoration: underline;
  }

  /* Player card (view.top_content.php .m-player-card, moved into .d-account-panel).
     The nested .riwel / ul / div wrappers join one grid; the legacy rules set inline styles and !important paddings. */
  .m-ready .d-account-panel {
    width: 360px;
  }

  .m-ready .d-account-panel .m-player-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "welcome logout"
      "server  logout"
      "money   money"
      "panel   panel";
    align-items: center;
    row-gap: 4px;
    column-gap: 10px;
    margin: 0 !important;
    padding: 18px 18px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
  }

  .m-ready .d-account-panel .m-player-card > div[style*="clear"] {
    display: none;
  }

  .m-ready .d-account-panel .riwel,
  .m-ready .d-account-panel .riwel ul,
  .m-ready .d-account-panel .riwel ul > div {
    display: contents;
  }

  .m-ready .d-account-panel .riwel ul li {
    margin: 0 !important;
    padding: 0 !important;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--label);
    -webkit-text-fill-color: currentColor;
    font: 700 12px/1.5 var(--font-game);
    font-variant: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready .d-account-panel .riwel ul > div > li:nth-child(1) {
    grid-area: welcome;
  }

  .m-ready .d-account-panel .riwel ul > div > li:nth-child(2) {
    grid-area: server;
  }

  .m-ready .d-account-panel .riwel ul > div > li > span {
    background: none;
    color: var(--gold);
    -webkit-text-fill-color: currentColor;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-ready .d-account-panel .select_server_switch {
    width: 26px;
    height: 26px;
    margin: -8px 0 -8px 2px;
    vertical-align: middle;
    background-size: 12px !important;
    cursor: pointer;
  }

  .m-ready .d-account-panel li.Diamonds {
    grid-area: money;
    display: flex;
    gap: 8px;
    margin-top: 12px !important;
  }

  .m-ready .d-account-panel .votewrap,
  .m-ready .d-account-panel .diamondwrap,
  .m-ready .d-account-panel .goblinwrap {
    position: static;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(var(--acc), 0.22);
    background: rgba(var(--acc), 0.04);
  }

  .m-ready .d-account-panel .Diamonds p {
    margin: 0;
    background: none;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
    font: 700 14px/1.2 var(--font-ui);
    letter-spacing: 0.02em;
  }

  .m-ready .d-account-panel .diamondwrap img,
  .m-ready .d-account-panel .votewrap img,
  .m-ready .d-account-panel .goblinwrap img {
    top: 0;
    width: 24px;
    margin: 0;
  }

  .m-ready .d-account-panel li.logoutbtn {
    grid-area: logout;
    position: static;
    align-self: start;
  }

  .m-ready .d-account-panel .btn-profile-logout-position {
    position: static;
    opacity: 0.85;
  }

  .m-ready .d-account-panel .btn-profile-logout-position a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.22);
    background: rgba(var(--acc), 0.04);
  }

  /* "Open Account Panel": the avatar link becomes a full-width neon button with its caption. */
  .m-ready .d-account-panel .leftwel {
    grid-area: panel;
    float: none;
    width: auto;
    margin-top: 14px;
  }

  .m-ready .d-account-panel .leftwel a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    text-decoration: none;
  }

  .m-ready .d-account-panel .leftwel a:hover {
    background-color: rgba(var(--acc), 0.14);
    filter: none;
  }

  .m-ready .d-account-panel .avatar_frame {
    display: none;
  }

  .m-ready .d-account-panel .avatar-text {
    position: static;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.2em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
  }

  /* Wiki search (view.right_sidebar.php .wiki-search-block): a drop-down panel under the top bar, opened by the
     magnifier button (mobile.js toggles body.m-wiki-open). */
  .m-ready .wiki-search-block {
    display: none;
    position: fixed;
    top: 88px;
    right: max(24px, calc(50% - 640px));
    bottom: auto;
    z-index: 9100;
    width: 400px;
    max-height: calc(100vh - 110px);
    padding: 20px;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: var(--corners), rgba(7, 10, 20, 0.98);
    background-origin: border-box;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(var(--acc), 0.15);
  }

  .m-ready.m-wiki-open .wiki-search-block {
    display: block;
  }

  .m-ready .wiki-search-block .wiki-sidebar-title {
    margin: 0 0 10px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    font: 900 18px/1.2 var(--font-game);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-ready .wiki-search-block .wiki-sidebar-title a {
    color: #e3ebf4;
    -webkit-text-fill-color: currentColor;
  }

  .m-ready .wiki-search-description,
  .m-ready .wiki-search-language-label {
    color: var(--label);
    font: 13px/1.5 var(--font-ui);
  }

  .m-ready .wiki-search-language,
  .m-ready .wiki-search-input {
    height: 44px;
    border: 1px solid rgba(var(--acc), 0.22);
    border-radius: 0;
    background: rgba(4, 8, 18, 0.6);
    color: var(--text);
    font: 15px var(--font-ui);
  }

  /* Language list: the site's neon select (as in the forms) instead of the browser's own drop-down. */
  .m-ready .wiki-search-language {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin: 6px 0 14px;
    padding: 0 42px 0 14px;
    box-sizing: border-box;
    background-color: rgba(4, 8, 18, 0.6);
    background-image: linear-gradient(45deg, transparent 50%, rgb(var(--acc)) 50%), linear-gradient(135deg, rgb(var(--acc)) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    box-shadow: inset 0 0 8px rgba(var(--acc), 0.04);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .m-ready .wiki-search-language:hover,
  .m-ready .wiki-search-language:focus,
  .m-ready .wiki-search-input:focus {
    outline: none;
    border-color: rgba(var(--acc), 0.6);
    box-shadow: 0 0 10px rgba(var(--acc), 0.2), inset 0 0 8px rgba(var(--acc), 0.06);
  }

  .m-ready .wiki-search-language option {
    background: #0c1122;
    color: var(--text);
  }

  .m-ready .wiki-search-language-label {
    display: block;
    color: var(--label);
    font: 600 11px/1.3 var(--font-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .m-ready .wiki-search-control button {
    height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: var(--btn-fill);
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .m-ready .wiki-search-result {
    border-bottom-color: var(--line-soft);
  }

  .m-ready .wiki-search-result:hover {
    background: rgba(var(--acc), 0.08);
  }

  .m-ready .wiki-search-result-title {
    color: var(--text);
    font: 700 14px/1.35 var(--font-game);
  }

  .m-ready .wiki-search-result-snippet {
    color: var(--dim);
    font: 12px/1.4 var(--font-ui);
  }

  .m-ready .wiki-browse-all {
    color: var(--acc-hi);
    font: 13px var(--font-ui);
  }

  /* Footer (view.footer.php)
  ---------------------------------------------------------------------------*/
  .m-ready .footer {
    height: auto;
    padding: 0;
    border-top: 1px solid rgba(var(--acc), 0.22);
    background: rgba(5, 7, 13, 0.94);
  }

  .m-ready .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 38px 40px 46px;
    box-sizing: border-box;
  }

  .m-ready .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .m-ready .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
  }

  .m-ready .footer-links a {
    color: var(--label);
    font: 700 11px/1.6 var(--font-game);
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .m-ready .footer-links a:hover {
    color: var(--acc-pale);
    filter: none;
  }

  .m-ready .footer-legal {
    max-width: 640px;
    color: var(--dim);
    font: 400 12px/1.8 var(--font-game);
    letter-spacing: 0.05em;
    text-align: right;
  }

  /* Home: hero
  ---------------------------------------------------------------------------*/
  .m-ready .d-hero {
    display: flex;
    gap: 48px;
    align-items: stretch;
    margin: 0 0 44px;
  }

  .m-ready .d-hero-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    min-width: 0;
  }

  .m-ready .d-hero-title {
    margin: 0;
    color: var(--title);
    font: 900 64px/1.04 var(--font-game);
    letter-spacing: 0.04em;
    text-shadow: 0 0 22px rgba(var(--acc), 0.18);
    text-transform: uppercase;
  }

  .m-ready .d-hero-title span {
    display: block;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(var(--gold-rgb), 0.25);
  }

  .m-ready .d-hero-sub {
    max-width: 520px;
    margin: 0;
    color: var(--body-text);
    font: 400 19px/1.5 var(--font-game);
    letter-spacing: 0.06em;
  }

  .m-ready .d-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 6px;
  }

  .m-ready .d-facts {
    display: flex;
    margin: 18px 0 0;
    border-top: 1px solid rgba(var(--acc), 0.16);
    border-bottom: 1px solid rgba(var(--acc), 0.16);
  }

  .m-ready .d-fact {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 18px;
    border-right: 1px solid rgba(var(--acc), 0.1);
  }

  .m-ready .d-fact:last-child {
    border-right: 0;
  }

  .m-ready .d-fact dt {
    color: var(--dim);
    font: 600 11px/1.3 var(--font-ui);
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  .m-ready .d-fact dd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    color: var(--text);
    font: 700 21px/1.25 var(--font-game);
    letter-spacing: 0.04em;
  }

  .m-ready .d-fact dd.is-gold {
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
  }

  /* As wide as one column of the tiles below (.d-overview: three columns, 24px gaps), so it lines up with Castle Owner. */
  .m-ready .d-realm-panel {
    display: flex;
    flex: 0 0 calc((100% - 48px) / 3);
    flex-direction: column;
    min-width: 0;
  }

  /* Discord and Telegram fill the free space at the bottom of the realm panel. */
  .m-ready .d-realm-social {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding: 0 18px 18px;
  }

  .m-ready .d-social {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.24);
    background: var(--corners), rgba(9, 13, 25, 0.7);
    background-origin: border-box;
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.2em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--acc), 0.6);
    text-transform: uppercase;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .d-social svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    filter: drop-shadow(0 0 6px rgba(var(--acc), 0.6));
  }

  .m-ready .d-social:hover {
    border-color: rgba(var(--acc), 0.6);
    box-shadow: 0 0 16px rgba(var(--acc), 0.25), inset 0 0 14px rgba(var(--acc), 0.08);
    color: #fff;
    filter: none;
  }

  .m-ready .d-realm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
  }

  .m-ready .d-realm-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 80px;
    padding: 12px 18px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.24);
    border-radius: 0;
    background: rgba(9, 13, 25, 0.7);
    color: inherit;
    font: inherit;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .d-realm-card:hover {
    border-color: rgba(var(--acc), 0.55);
    filter: none;
  }

  .m-ready .d-realm-card.is-active {
    border-color: rgba(var(--acc), 0.8);
    background: linear-gradient(90deg, rgba(var(--acc), 0.14), rgba(var(--acc), 0.03));
    box-shadow: 0 0 18px rgba(var(--acc), 0.22), inset 0 0 18px rgba(var(--acc), 0.08);
  }

  .m-ready .d-realm-card-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
  }

  .m-ready .d-realm-card-title {
    color: var(--title);
    font: 900 22px/1.1 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready .d-realm-card-tag {
    color: var(--label);
    font: 400 12px/1.3 var(--font-game);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .m-ready .d-realm-card-online {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--title);
    font: 900 30px/1 var(--font-game);
  }

  /* Home: top 5 players, top 5 guilds, castle owner
  ---------------------------------------------------------------------------*/
  .m-ready .d-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
    margin: 0 0 44px;
  }

  .m-ready .d-tile {
    display: flex;
    flex-direction: column;
  }

  .m-ready .d-tile-row {
    display: grid;
    grid-template-columns: 28px 32px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line-soft);
  }

  .m-ready .d-class-icon,
  .m-ready .d-guild-mark {
    display: block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
  }

  .m-ready .d-guild-mark {
    border: 1px solid rgba(var(--acc), 0.35);
    background: rgba(var(--acc), 0.05);
    image-rendering: pixelated;
  }

  .m-ready .d-class-icon.is-empty,
  .m-ready .d-guild-mark.is-empty {
    border: 1px dashed rgba(154, 168, 194, 0.3);
    background: none;
  }

  .m-ready .d-tile-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .m-ready .d-tile-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .m-ready .d-tile-name a {
    overflow: hidden;
    color: var(--gold);
    font: 700 15px/1.3 var(--font-game);
    letter-spacing: 0.04em;
    text-decoration: none;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.35);
    white-space: nowrap;
  }

  .m-ready .d-tile-name a:hover {
    color: #fff1c4;
    filter: none;
  }

  .m-ready .d-status {
    display: block;
    flex: 0 0 auto;
  }

  .m-ready .d-tile-sub {
    color: var(--dim);
    font: 500 11px/1.3 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .m-ready .d-tile-value {
    color: var(--text);
    font: 700 15px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
  }

  .m-ready .d-tile-more {
    display: block;
    margin-top: auto;
    padding: 15px 20px;
    color: var(--acc-hi);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.2em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .m-ready .d-tile-more:hover {
    color: #fff;
    filter: none;
  }

  .m-ready .d-castle-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 20px 32px;
    text-align: center;
  }

  .m-ready .d-castle-icon {
    width: 104px;
    height: 104px;
    margin: 0;
    vertical-align: top;
    filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.25));
  }

  .m-ready .d-castle-guild {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
  }

  .m-ready .d-castle-mark {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    background: rgba(var(--gold-rgb), 0.05);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.2);
    image-rendering: pixelated;
  }

  .m-ready .d-castle-name {
    min-width: 0;
    overflow: hidden;
    color: var(--gold);
    font: 900 44px/1.05 var(--font-game);
    letter-spacing: 0.1em;
    text-overflow: ellipsis;
    text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5);
    white-space: nowrap;
  }

  .m-ready .d-castle-name.is-empty {
    color: var(--dim);
    font-size: 20px;
    text-shadow: none;
  }

  .m-ready .d-castle-master {
    color: #bfe9ff;
    font: 700 15px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  /* Home: event timeline (the #events list from app.js, moved into .d-timeline by mobile.js).
     Each event: countdown, a diamond on the rail, then a card with the name and the start time; the nearest one is gold. */
  .m-ready .d-events {
    margin: 0 0 48px;
  }

  .m-ready .d-timeline {
    padding: 24px 0 26px;
  }

  .m-ready .d-timeline .top-players {
    height: auto;
    margin: 0;
  }

  .m-ready .d-timeline .top-sidebar-title {
    display: none;
  }

  .m-ready .d-timeline #events {
    display: flex;
    overflow-x: auto;
    padding: 0 28px 6px;
    background: linear-gradient(rgba(var(--acc), 0.4), rgba(var(--acc), 0.4)) 0 63px / 100% 1px no-repeat;
    scrollbar-color: rgba(var(--acc), 0.4) transparent;
    scrollbar-width: thin;
  }

  .m-ready .d-timeline #events > div {
    position: relative;
    display: flex;
    flex: 1 0 168px;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0 8px;
    border: 0;
    font-size: 14px;
  }

  .m-ready .d-timeline #events > div:before,
  .m-ready .d-timeline #events > div:after {
    display: none;
  }

  /* The pin checkboxes (mobile.js) are for the phone event sheet; the form checkbox row rule would show them here. */
  .m-ready .d-timeline #events .m-event-pin {
    display: none;
  }

  .m-ready .d-timeline #events .event-wiki-link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .m-ready .d-timeline #events .event-wiki-link:hover {
    filter: none;
  }

  /* Rail diamond: on the row, or on the wiki link that wraps the row's content. */
  .m-ready .d-timeline #events > div:not(.has-wiki-guide):before,
  .m-ready .d-timeline #events .event-wiki-link:before {
    content: "";
    display: block;
    order: 0;
    width: 11px;
    height: 11px;
    margin: 8px 0 14px;
    box-sizing: border-box;
    border: 1px solid rgb(var(--acc));
    background: #05070d;
    box-shadow: 0 0 8px rgba(var(--acc), 0.7);
    transform: rotate(45deg);
  }

  .m-ready .d-timeline #events small[id^="event"] {
    order: -1;
    display: flex;
    align-items: flex-end;
    float: none;
    width: auto;
    height: 50px;
    color: var(--acc-hi);
    font: 700 21px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: center;
    text-shadow: 0 0 10px rgba(var(--acc), 0.5);
    white-space: nowrap;
    opacity: 1 !important;
  }

  /* Name and start time form one card: the name is its top half, the start time its bottom half.
     The rows stretch to the tallest one and the name grows, so every card has the same frame and the start times
     share one line whether a name takes one line or two. */
  .m-ready .d-timeline #events > div > span,
  .m-ready .d-timeline #events .event-name {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    padding: 12px 10px 4px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.24);
    border-bottom: 0;
    background: rgba(9, 13, 25, 0.74);
    color: var(--text);
    font: 700 14px/1.3 var(--font-game);
    letter-spacing: 0.04em;
    text-align: center;
  }

  .m-ready .d-timeline #events .event-name:after {
    content: " \2197";
    color: rgb(var(--acc));
    font-size: 12px;
  }

  .m-ready .d-timeline #events small.event-start {
    display: block;
    float: none;
    width: 100%;
    padding: 2px 10px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.24);
    border-top: 0;
    background: rgba(9, 13, 25, 0.74);
    color: var(--dim);
    font: 600 11px/1.3 var(--font-ui);
    letter-spacing: 0.22em;
    text-align: center;
  }

  .m-ready .d-timeline #events .event-wiki-hint {
    display: none;
  }

  .m-ready .d-timeline #events .has-wiki-guide:hover .event-name,
  .m-ready .d-timeline #events .has-wiki-guide:hover small.event-start {
    border-color: rgba(var(--acc), 0.6);
    background: rgba(var(--acc), 0.08);
  }

  .m-ready .d-timeline #events .has-wiki-guide:hover .event-name {
    color: #fff;
  }

  .m-ready .d-timeline #events > div:first-child small[id^="event"],
  .m-ready .d-timeline #events > div.is-soon small[id^="event"] {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.6);
  }

  .m-ready .d-timeline #events > div:first-child:not(.has-wiki-guide):before,
  .m-ready .d-timeline #events > div:first-child .event-wiki-link:before,
  .m-ready .d-timeline #events > div.is-soon:not(.has-wiki-guide):before,
  .m-ready .d-timeline #events > div.is-soon .event-wiki-link:before {
    border-color: #ffe9a6;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8);
  }

  .m-ready .d-timeline #events > div:first-child > span,
  .m-ready .d-timeline #events > div:first-child .event-name,
  .m-ready .d-timeline #events > div:first-child small.event-start {
    border-color: rgba(var(--gold-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.12);
  }

  /* Home: Chronicle (news)
  ---------------------------------------------------------------------------*/
  .m-ready .d-news {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0 0 30px;
  }

  .m-ready .news {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    overflow-wrap: break-word;
  }

  .m-ready .news:before {
    display: none;
  }

  .m-ready .news .news-title {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 20px 26px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
  }

  .m-ready .news .news-title a {
    order: -1;
    color: var(--gold);
    font: 700 23px/1.25 var(--font-game);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.35);
  }

  .m-ready .news .news-title a:hover {
    color: #fff1c4;
    filter: none;
  }

  .m-ready .news .news-title span {
    float: none;
    color: var(--dim);
    font: 600 12px/1.3 var(--font-ui);
    letter-spacing: 0.2em;
  }

  .m-ready .news .news-title span b {
    color: var(--acc-hi);
    font: 700 14px/1 var(--font-ui);
  }

  .m-ready .news .news-text {
    flex: 1 1 auto;
    padding: 20px 26px;
    color: var(--body-text);
    font: 400 16px/1.7 var(--font-game);
    letter-spacing: 0.02em;
  }

  /* News bodies come from the CMS editor and often set their own font and sizes inline. */
  .m-ready .news .news-text * {
    font-family: var(--font-game) !important;
  }

  .m-ready .news .news-text img,
  .m-ready .news .news-text video {
    max-width: 100% !important;
    height: auto !important;
  }

  .m-ready .news .news-text iframe,
  .m-ready .news .news-text table {
    max-width: 100% !important;
  }

  .m-ready .news .news-text a {
    border-bottom: 1px solid rgba(var(--acc), 0.35);
    color: var(--acc-hi);
    text-decoration: none;
  }

  .m-ready .news .news-info {
    display: flex;
    align-items: center;
    padding: 12px 26px 18px;
    border-top: 1px solid var(--line-soft);
    color: var(--dim);
    font: 400 12px/1.3 var(--font-game);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .m-ready .news .news-info a:not(.read-more) {
    margin-left: 0.5em;
    color: var(--label);
  }

  .m-ready .news .news-info .read-more {
    order: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    float: none;
    height: 44px;
    margin-left: auto;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
  }

  .m-ready .news .news-info .read-more:after {
    content: "\203A";
    font-size: 16px;
    line-height: 1;
  }

  .m-ready .news .news-info .read-more:hover {
    background-color: rgba(var(--acc), 0.14);
    filter: none;
  }

  .m-ready .news .news-info .more-icon {
    display: none;
  }

  /* Pagination (lib.pagination.php: #pagination links, a.on is the current page). */
  .m-ready #pagination {
    margin: 0 0 40px;
  }

  .m-ready #pagination li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .m-ready #pagination li a,
  .m-ready .pagination a,
  .m-ready .pagination .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.22);
    border-radius: 0;
    background: rgba(var(--acc), 0.04);
    color: var(--label);
    font: 700 13px/1 var(--font-ui);
    text-decoration: none;
  }

  .m-ready #pagination li a:hover,
  .m-ready .pagination a:hover {
    border-color: rgba(var(--acc), 0.55);
    color: var(--acc-pale);
    filter: none;
  }

  .m-ready #pagination li a.on,
  .m-ready .pagination .active {
    border-color: rgba(var(--acc), 0.6);
    background: rgba(var(--acc), 0.14);
    box-shadow: 0 0 10px rgba(var(--acc), 0.3);
    color: var(--acc-pale);
  }

  /* Home: Diamond packages (home/view.desktop_packages.php) and the PayPal / PayPecker / Stripe package lists
     (ul#paypal-options, one list per package). mobile.js tags 50 / 1000 as popular and 20000 as the best offer. */
  .m-ready .d-diamonds {
    margin: 12px 0 0;
  }

  /* All packages in one row (narrow windows wrap them, see the end of the file). */
  .m-ready .d-packages {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 28px 16px;
    padding-top: 12px;
  }

  .m-ready .d-packages .d-package {
    padding: 26px 16px 18px;
  }

  .m-ready .d-packages .d-package-amount {
    font-size: 32px;
  }

  .m-ready .d-package,
  .m-ready #paypal-options li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 26px 22px 22px;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-ready .d-package-amount {
    color: var(--title);
    font: 900 40px/1.1 var(--font-game);
  }

  .m-ready .d-package-unit {
    color: var(--gold);
    font: 400 13px/1.3 var(--font-game);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  .m-ready .d-package-price {
    color: var(--acc-hi);
    font: 600 15px/1.3 var(--font-ui);
  }

  .m-ready .d-package .d-btn {
    min-height: 46px;
    margin-top: 6px;
    padding: 0 16px;
  }

  .m-ready .d-package.is-offer-gold,
  .m-ready #paypal-options li.is-offer-gold {
    border-color: rgba(var(--gold-rgb), 0.6);
    background: var(--corners-gold), var(--panel-fill);
    background-origin: border-box;
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.16), inset 0 0 18px rgba(var(--gold-rgb), 0.06);
  }

  .m-ready .d-package.is-offer-pink,
  .m-ready #paypal-options li.is-offer-pink {
    border-color: rgba(255, 92, 205, 0.6);
    background: var(--corners-pink), var(--panel-fill);
    background-origin: border-box;
    box-shadow: 0 0 16px rgba(255, 92, 205, 0.16), inset 0 0 18px rgba(255, 92, 205, 0.06);
  }

  .m-ready .d-package.is-offer-best,
  .m-ready #paypal-options li.is-offer-best {
    border-color: rgba(255, 138, 61, 0.7);
    background: var(--corners-best), var(--panel-fill);
    background-origin: border-box;
    box-shadow: 0 0 18px rgba(255, 138, 61, 0.22), inset 0 0 18px rgba(255, 138, 61, 0.08);
  }

  .m-ready .m-offer-badge {
    position: absolute;
    top: -11px;
    left: 18px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    background: #0c1122;
    font: 700 10px/1 var(--font-game);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  .m-ready .is-offer-gold .m-offer-badge {
    color: var(--gold);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
  }

  .m-ready .is-offer-pink .m-offer-badge {
    color: #ff9be4;
    box-shadow: 0 0 8px rgba(255, 92, 205, 0.3);
  }

  .m-ready .is-offer-best .m-offer-badge {
    color: #ffb27a;
    box-shadow: 0 0 8px rgba(255, 138, 61, 0.35);
  }

  /* Donation pages: each package is its own ul#paypal-options; three cards per row. */
  .m-ready ul#paypal-options {
    display: inline-block;
    width: calc(33.333% - 16px);
    margin: 14px 8px 12px;
    padding: 0;
    vertical-align: top;
  }

  .m-ready #paypal-options li {
    height: auto;
    margin: 0;
    border-radius: 0;
    line-height: 1.3;
    text-align: left;
  }

  .m-ready #paypal-options li h4 {
    float: none;
    margin: 0;
    padding: 0;
    color: var(--gold);
    font: 700 15px/1.3 var(--font-game);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
    text-transform: uppercase;
  }

  .m-ready #paypal-options li h3 {
    flex: 0 0 auto;
    float: none;
    margin: 0;
    padding: 0;
    color: var(--label);
    font: 700 13px/1.5 var(--font-game);
    letter-spacing: 0.04em;
    text-align: left;
  }

  .m-ready #paypal-options li h3 [id^="reward_"] {
    color: var(--title);
    font-size: 28px;
  }

  .m-ready #paypal-options li h3 [id^="price_"],
  .m-ready #paypal-options li h3 [id^="currency_"] {
    color: var(--acc-hi);
    text-shadow: 0 0 6px rgba(var(--acc), 0.5);
  }

  .m-ready #paypal-options .custom_button,
  .m-ready #paypal-options a.button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 100%;
    min-height: 46px;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45) !important;
    border-radius: 0 !important;
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game) !important;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
  }

  /* Rankings (rankings/view.index.php, js_templates/rank_players.ejs, rank_guilds.ejs)
  ---------------------------------------------------------------------------*/
  .m-ready div[id^="rankings_select_"] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 0 0 10px !important;
  }

  .m-ready div[id^="rankings_select_"] .button2,
  .m-ready .everyone-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 48px;
    margin: 0;
    padding: 0 24px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--strip), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 10px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 12px/1.3 var(--font-game);
    letter-spacing: 0.16em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--acc), 0.7);
    text-transform: uppercase;
  }

  .m-ready div[id^="rankings_select_"] .button2:hover,
  .m-ready .everyone-button:hover {
    border-color: rgba(var(--acc), 0.6);
    filter: none;
  }

  /* The ranking on screen (tab and class filter, .is-active from mobile.js): the same frame in gold. */
  .m-ready div[id^="rankings_select_"] .button2.is-active,
  .m-ready .everyone-button.is-active {
    border-color: rgba(var(--gold-rgb), 0.6);
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.16);
  }

  .m-ready [id^="rankings_content_"] {
    padding: 10px 0 !important;
  }

  .m-ready #rank_by_class {
    text-align: center;
  }

  /* Daily reward note above the lists: a gold panel the width of its text, one reward tier per line. */
  .m-ready #rank_by_class .i_note {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 18px auto 6px;
    padding: 18px 32px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    border-radius: 0;
    background: var(--corners-gold), var(--strip-gold), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow-gold);
    color: var(--body-text) !important;
    font: 400 14px/1.7 var(--font-game);
    letter-spacing: 0.03em;
    text-align: center;
  }

  .m-ready #rank_by_class .i_note > span:first-child {
    display: block;
    margin-bottom: 4px;
    color: var(--gold) !important;
    font-size: 15px;
    letter-spacing: 0.2em;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
    text-transform: uppercase;
  }

  .m-ready .m-reward-tier {
    display: block;
  }

  .m-ready .m-reward-tier + br,
  .m-ready .m-reward-sep {
    display: none;
  }

  /* Class filter, as on phones: "Everyone on this server" across the top, then six class portraits in neon framed
     tiles with corner marks (the markup sits outside its table). The portraits stay still; style.css swaps them for
     the hover art, which is not used here. */
  .m-ready #rank_by_class:has(> .dw-cont) {
    display: grid;
    grid-template-columns: repeat(6, 66px);
    justify-content: center;
    gap: 10px;
    margin: 0 0 6px;
  }

  .m-ready #rank_by_class:has(> .dw-cont) > br,
  .m-ready #rank_by_class:has(> .dw-cont) > .m-table-scroll,
  .m-ready #rank_by_class:has(> .dw-cont) > table {
    display: none;
  }

  .m-ready #rank_by_class:has(> .dw-cont) > .everyone-button {
    grid-column: 1 / -1;
    min-width: 0;
    margin-bottom: 2px;
  }

  .m-ready .dw-cont,
  .m-ready .mg-cont,
  .m-ready .dk-cont,
  .m-ready .fe-cont,
  .m-ready .dl-cont,
  .m-ready .su-cont {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    aspect-ratio: 55 / 121;
    margin: 0;
    border: 1px solid var(--line);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--glow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .dw-cont,
  .m-ready .dw-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/dw.png);
  }

  .m-ready .mg-cont,
  .m-ready .mg-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/mg.png);
  }

  .m-ready .dk-cont,
  .m-ready .dk-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/dk.png);
  }

  .m-ready .fe-cont,
  .m-ready .fe-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/fe.png);
  }

  .m-ready .dl-cont,
  .m-ready .dl-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/dl.png);
  }

  .m-ready .su-cont,
  .m-ready .su-cont:hover {
    background-image: url(https://neon-mu.net/assets/neon-mu/images/classes/su.png);
  }

  /* Corner marks over the portrait (a pseudo-element, so the portrait stays the tile's only background). */
  .m-ready .dw-cont:before,
  .m-ready .mg-cont:before,
  .m-ready .dk-cont:before,
  .m-ready .fe-cont:before,
  .m-ready .dl-cont:before,
  .m-ready .su-cont:before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background: var(--corners);
    pointer-events: none;
  }

  .m-ready .dw-cont:hover,
  .m-ready .mg-cont:hover,
  .m-ready .dk-cont:hover,
  .m-ready .fe-cont:hover,
  .m-ready .dl-cont:hover,
  .m-ready .su-cont:hover {
    border: 1px solid rgba(var(--acc), 0.7);
    box-shadow: 0 0 18px rgba(var(--acc), 0.35);
  }

  .m-ready .dw-cont.is-active,
  .m-ready .mg-cont.is-active,
  .m-ready .dk-cont.is-active,
  .m-ready .fe-cont.is-active,
  .m-ready .dl-cont.is-active,
  .m-ready .su-cont.is-active {
    border-color: rgba(var(--gold-rgb), 0.7);
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.22), inset 0 0 18px rgba(var(--gold-rgb), 0.08);
  }

  .m-ready .dw-cont.is-active:before,
  .m-ready .mg-cont.is-active:before,
  .m-ready .dk-cont.is-active:before,
  .m-ready .fe-cont.is-active:before,
  .m-ready .dl-cont.is-active:before,
  .m-ready .su-cont.is-active:before {
    background: var(--corners-gold);
  }

  .m-ready #rank_by_class [class^="full-"] {
    display: none !important;
  }

  /* The whole tile is the link. */
  .m-ready .dw-cont > .classes-buttons,
  .m-ready .mg-cont > .classes-buttons,
  .m-ready .dk-cont > .classes-buttons,
  .m-ready .fe-cont > .classes-buttons,
  .m-ready .dl-cont > .classes-buttons,
  .m-ready .su-cont > .classes-buttons,
  .m-ready #rank_by_class .classes-buttons > div {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Search under the lists (and on the search page): a compact field and button, centred. */
  .m-ready.m-page-rankings .content form[action*="search"] table,
  .m-ready.m-page-rankings .content form[action=""] table {
    width: auto !important;
    margin: 18px auto 0;
  }

  .m-ready.m-page-rankings .content form[action*="search"] td,
  .m-ready.m-page-rankings .content form[action=""] td {
    padding: 0 6px;
  }

  .m-ready.m-page-rankings .content form[action*="search"] input,
  .m-ready.m-page-rankings .content form[action=""] input {
    width: 300px !important;
  }

  .m-ready .search-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 46px;
    padding: 0 22px;
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 12px/1 var(--font-game);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 1;
  }

  .m-ready .search-button .m-search-label {
    display: inline !important;
  }

  /* Player rows: place | class | name + status | resets | zodiac | quests | achievements | points | guild.
     The four values and the points share one cell in the markup (they stack on phones): the cell spans five columns
     and lays its values out on the same column widths as the header row. */
  .m-ready .ranking-table,
  .m-ready .ranking-table > tbody,
  .m-ready .guild-ranking-table,
  .m-ready .guild-ranking-table > tbody {
    display: block;
  }

  .m-ready .ranking-table,
  .m-ready .guild-ranking-table {
    width: max-content;
    max-width: 100%;
    margin: 22px auto 0;
  }

  /* The list and its cache time share a box the width of the list, so the cache time starts at its left edge. */
  .m-ready .rank-board {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .m-ready .rank-board .rank-cache-time {
    padding: 12px 0 0 !important;
    color: var(--dim) !important;
    font: 600 11px/1.3 var(--font-ui) !important;
    letter-spacing: 0.14em;
    text-align: left !important;
  }

  .m-ready .ranking-table > tbody,
  .m-ready .guild-ranking-table > tbody {
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-ready .ranking-table tr.rank-head,
  .m-ready .ranking-table tr.tr-bg-image {
    display: grid;
    grid-template-columns: 56px 48px 230px 80px 80px 80px 100px 120px 210px;
    grid-template-areas: "rank class nick s1 s2 s3 s4 pts guild";
    align-items: center;
    padding: 11px 16px;
  }

  .m-ready .ranking-table tr.rank-head,
  .m-ready .guild-ranking-table tr.rank-head {
    padding-top: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
  }

  .m-ready .rank-head th {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--label);
    font: 600 11px/1.2 var(--font-ui);
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
  }

  .m-ready .rank-head .rh-nick,
  .m-ready .rank-head .rh-guild,
  .m-ready .rank-head .rh-name {
    text-align: left;
  }

  .m-ready .rank-head .rh-guild {
    padding-left: 20px;
  }

  .m-ready .ranking-table tr.tr-bg-image {
    border-bottom: 1px solid var(--line-soft);
    background: none;
  }

  .m-ready .ranking-table tr.tr-bg-image:last-child {
    border-bottom: 0;
  }

  .m-ready .ranking-table tr:hover,
  .m-ready .guild-ranking-table tr:hover {
    background: rgba(var(--acc), 0.05);
    color: inherit;
  }

  .m-ready .ranking-table tr.rank-head:hover,
  .m-ready .guild-ranking-table tr.rank-head:hover {
    background: var(--strip);
  }

  .m-ready .ranking-table tr.tr-bg-image > td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .m-ready .ranking-table .td-class {
    grid-area: class;
    text-align: center;
  }

  .m-ready .ranking-table .class-img-icons {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
  }

  .m-ready .ranking-table .td-nick {
    grid-area: nick;
    min-width: 0;
    padding-left: 6px !important;
    color: inherit;
    letter-spacing: 0;
  }

  .m-ready .ranking-table .td-nick a {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
  }

  .m-ready .ranking-table .td-nick-name {
    min-width: 0;
    overflow: hidden;
    color: var(--gold);
    font: 700 15px/32px var(--font-game);
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
  }

  .m-ready .ranking-table .td-nick a:hover .td-nick-name {
    color: #fff1c4;
  }

  .m-ready .ranking-table .td-nick a > .rank-hover-tooltip {
    flex: 0 0 auto;
    margin-left: 6px;
  }

  .m-ready .ranking-table .td-nick .rank-icon-tooltip img {
    display: block;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .m-ready .ranking-table .td-rank,
  .m-ready .ranking-table .td-rank-top1,
  .m-ready .ranking-table .td-rank-top2,
  .m-ready .ranking-table .td-rank-top3 {
    grid-area: rank;
    padding: 0;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--acc-hi);
    -webkit-text-fill-color: currentColor;
    font: 700 16px/1 var(--font-ui);
    text-align: center;
    text-shadow: 0 0 6px rgba(var(--acc), 0.6);
  }

  .m-ready .ranking-table .td-rank-top1,
  .m-ready .guild-ranking-table .rank-head + tr .guild-td-rank {
    color: #ffd56a;
    font-size: 19px;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.8);
  }

  .m-ready .ranking-table .td-rank-top2,
  .m-ready .guild-ranking-table .rank-head + tr + tr .guild-td-rank {
    color: #e4edf6;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(205, 222, 240, 0.7);
  }

  .m-ready .ranking-table .td-rank-top3,
  .m-ready .guild-ranking-table .rank-head + tr + tr + tr .guild-td-rank {
    color: #f2b07e;
    font-size: 17px;
    text-shadow: 0 0 8px rgba(226, 138, 74, 0.7);
  }

  .m-ready .ranking-table .td-all-levels {
    grid-column: 4 / 9;
    min-width: 0;
    padding: 0;
    color: inherit;
  }

  .m-ready .ranking-table .td-points {
    position: relative;
    display: grid;
    grid-template-columns: 80px 80px 80px 100px 120px;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--title);
    -webkit-text-fill-color: currentColor;
    font: 700 16px/1.2 var(--font-ui);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .m-ready .ranking-table .rank-points-anchor,
  .m-ready .ranking-table .td-rank-values {
    display: contents;
  }

  /* The points text is the only grid item without a column, so it fills the free fifth column. */
  .m-ready .ranking-table .td-rank-values > div {
    grid-row: 1;
    position: relative;
    font: 700 14px/1.2 var(--font-ui);
    -webkit-text-fill-color: transparent;
    text-align: center;
  }

  .m-ready .ranking-table .td-level {
    grid-column: 1;
  }

  .m-ready .ranking-table .td-reset {
    grid-column: 2;
  }

  .m-ready .ranking-table .td-quest {
    grid-column: 3;
  }

  .m-ready .ranking-table .td-mlevel {
    grid-column: 4;
  }

  .m-ready .ranking-table .rank-points-tooltip {
    top: 50%;
    right: 0;
    left: auto;
    width: 120px;
    transform: translateY(-50%);
  }

  .m-ready .ranking-table .td-mark-char {
    grid-area: guild;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 20px !important;
    color: inherit;
  }

  .m-ready .ranking-table .td-mark-img {
    flex: 0 0 auto;
    margin: 0;
  }

  .m-ready .ranking-table .td-mark-img img {
    display: block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.35);
    border-radius: 0;
    background: rgba(var(--acc), 0.05);
    image-rendering: pixelated;
  }

  .m-ready .ranking-table .td-guild-name {
    min-width: 0;
    overflow: hidden;
    color: #bfe9ff;
    font: 700 13px/1.3 var(--font-game);
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Guild rows: place | emblem | name | members | score (markup order: place, name, score, members, emblem). */
  .m-ready .guild-ranking-table tr {
    display: grid;
    grid-template-columns: 56px 48px 260px 120px 160px;
    grid-template-areas: "rank mark name members score";
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
  }

  .m-ready .guild-ranking-table tr:last-child {
    border-bottom: 0;
  }

  .m-ready .guild-ranking-table td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
  }

  .m-ready .rank-head .rh-rank {
    grid-area: rank;
  }

  .m-ready .rank-head .rh-name,
  .m-ready .guild-ranking-table .guild-td-name {
    grid-area: name;
  }

  .m-ready .rank-head .rh-score,
  .m-ready .guild-ranking-table .guild-td-score {
    grid-area: score;
  }

  .m-ready .rank-head .rh-members,
  .m-ready .guild-ranking-table .guild-td-members {
    grid-area: members;
  }

  .m-ready .rank-head .rh-mark,
  .m-ready .guild-ranking-table .guild-td-mark {
    grid-area: mark;
  }

  .m-ready .guild-ranking-table .guild-td-rank {
    grid-area: rank;
    color: var(--acc-hi);
    font: 700 16px/1 var(--font-ui);
    text-align: center;
    text-shadow: 0 0 6px rgba(var(--acc), 0.6);
  }

  .m-ready .guild-ranking-table .guild-td-name {
    min-width: 0;
    overflow: hidden;
    font: 700 17px/1.3 var(--font-game);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-ready .guild-ranking-table .guild-td-name a {
    color: var(--gold);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.35);
  }

  .m-ready .guild-ranking-table .guild-td-score {
    color: var(--title);
    font: 700 17px/1.2 var(--font-ui);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .m-ready .guild-ranking-table .guild-td-members {
    color: #bfe9ff;
    font: 700 15px/1.2 var(--font-ui);
    text-align: center;
  }

  .m-ready .guild-ranking-table .guild-td-mark img {
    position: static !important;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto !important;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.35);
    background: rgba(var(--acc), 0.05);
    image-rendering: pixelated;
  }

  .m-ready .rank-head .rh-score {
    text-align: right;
  }

  /* Ranking tooltips (style.css): the Server info panel look. */
  .m-ready .rank-hover-tooltip::after {
    padding: 7px 10px;
    border: 1px solid rgba(var(--acc), 0.55);
    border-radius: 0;
    background: var(--strip), rgba(9, 13, 25, 0.97);
    box-shadow: 0 0 14px rgba(var(--acc), 0.3), inset 0 0 10px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    -webkit-text-fill-color: var(--acc-pale);
    font: 700 11px/1.2 var(--font-game);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(var(--acc), 0.6);
    text-transform: uppercase;
  }

  .m-ready .rank-hover-tooltip::before {
    border-top-color: rgba(var(--acc), 0.75);
  }

  /* Content pages: titles, notes, fields, buttons, tables
  ---------------------------------------------------------------------------*/
  .m-ready .content > h1,
  .m-page-registration .content > p {
    margin: 0 0 24px;
    color: #e3ebf4;
    font: 700 26px/1.3 var(--font-game);
    letter-spacing: 0.1em;
    text-align: center;
    text-shadow: 0 0 5px rgba(var(--acc), 0.45), 0 0 14px rgba(var(--acc), 0.22);
  }

  .m-ready .content h1.sidebar-title,
  .m-ready .content h2.title {
    position: relative;
    max-width: 900px;
    margin: 0 auto 24px !important;
    padding: 15px 20px 13px;
    border: 1px solid var(--line) !important;
    background: var(--corners), var(--strip), var(--panel-fill);
    background-origin: border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    box-shadow: var(--glow);
    color: var(--acc-pale);
    -webkit-text-fill-color: currentColor;
    font: 400 15px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.5);
    text-transform: uppercase;
  }

  .m-ready .content h1.sidebar-title:first-letter {
    font-size: inherit;
  }

  .m-ready .content #content h2:not(.title) {
    margin: 30px 0 14px;
    color: #e3ebf4;
    font: 700 18px/1.3 var(--font-game);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

  .m-ready .content .hrs {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(90deg, rgba(var(--acc), 0), rgba(var(--acc), 0.35) 50%, rgba(var(--acc), 0));
  }

  /* Plugin and shop pages wrap their content in #content > #box1 > .box-style1; the column stays readable. */
  .m-ready .content #content {
    max-width: 960px;
    margin: 0 auto;
  }

  .m-ready .i_note,
  .m-ready .s_note,
  .m-ready .w_note,
  .m-ready .e_note {
    --note: var(--acc);
    width: auto;
    max-width: 900px;
    margin: 12px auto;
    padding: 14px 18px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--note), 0.3);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(var(--note), 0.1), rgba(var(--note), 0.02) 70%), rgba(9, 13, 25, 0.62);
    box-shadow: inset 2px 0 0 rgba(var(--note), 0.85), 0 0 14px rgba(var(--note), 0.1);
    color: var(--text);
    font: 400 15px/1.5 var(--font-game);
    letter-spacing: 0.03em;
    text-align: left;
  }

  .m-ready .s_note {
    --note: 95, 211, 141;
  }

  .m-ready .w_note,
  .m-ready .e_note {
    --note: var(--gold-rgb);
    color: var(--gold);
  }

  /* Fields: dark, sharp, with a faint neon frame that lights up on focus. :where() keeps the look at the lowest
     specificity, so the focus and read-only states and the special forms (login, wiki search) always win. */
  .m-ready :where(.content) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]), select, textarea) {
    min-height: 44px;
    padding: 8px 14px !important;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.22);
    border-radius: 0;
    background-color: rgba(4, 8, 18, 0.6);
    box-shadow: inset 0 0 8px rgba(var(--acc), 0.04);
    color: var(--text);
    font: 15px/1.3 var(--font-ui);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .m-ready .content input::placeholder,
  .m-ready .content textarea::placeholder {
    color: rgba(150, 170, 205, 0.5);
  }

  .m-ready .content input:focus,
  .m-ready .content select:focus,
  .m-ready .content textarea:focus {
    outline: none;
    border-color: rgba(var(--acc), 0.6);
    box-shadow: 0 0 10px rgba(var(--acc), 0.2), inset 0 0 8px rgba(var(--acc), 0.06);
  }

  .m-ready .content input[readonly],
  .m-ready .content input:disabled {
    border-color: rgba(116, 136, 190, 0.18);
    background-color: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    color: var(--acc-hi);
  }

  .m-ready .content input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 100px #070b16;
    box-shadow: inset 0 0 0 100px #070b16;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
  }

  .m-ready .content select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px !important;
    background-image: linear-gradient(45deg, transparent 50%, rgb(var(--acc)) 50%), linear-gradient(135deg, rgb(var(--acc)) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    cursor: pointer;
  }

  .m-ready .content select option {
    background: #0c1122;
    color: var(--text);
  }

  .m-ready .content input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0 8px 0 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: rgba(var(--acc), 0.05) no-repeat center / 14px 14px;
    box-shadow: 0 0 8px rgba(var(--acc), 0.15), inset 0 0 6px rgba(var(--acc), 0.1);
    vertical-align: middle;
    cursor: pointer;
  }

  .m-ready .content input[type="checkbox"]:checked {
    border-color: rgb(var(--acc));
    background-color: rgba(var(--acc), 0.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
    box-shadow: 0 0 10px rgba(var(--acc), 0.5), inset 0 0 6px rgba(var(--acc), 0.25);
  }

  .m-ready .content input[type="checkbox"]:focus-visible {
    outline: 1px solid rgb(var(--acc));
    outline-offset: 3px;
  }

  /* Buttons: the neon text button with HUD brackets. */
  .m-ready .content form button[type="submit"],
  .m-ready .content .button-style,
  .m-ready .content .custom_button,
  .m-ready .content .download-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 48px;
    padding: 0 26px !important;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45) !important;
    border-radius: 0;
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 13px/1.2 var(--font-game);
    letter-spacing: 0.22em;
    text-decoration: none;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .content form button[type="submit"]:hover,
  .m-ready .content .button-style:hover,
  .m-ready .content .custom_button:hover,
  .m-ready .content .download-button:hover {
    background-color: rgba(var(--acc), 0.14);
    box-shadow: 0 0 22px rgba(var(--acc), 0.32), inset 0 0 18px rgba(var(--acc), 0.14);
    color: #fff;
    filter: none;
  }

  .m-ready .content form button[type="submit"]:before,
  .m-ready .content form button[type="submit"]:after,
  .m-ready .content .button-style:before,
  .m-ready .content .button-style:after,
  .m-ready .content .custom_button:before,
  .m-ready .content .custom_button:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid rgb(var(--acc));
    filter: drop-shadow(0 0 3px rgb(var(--acc)));
    pointer-events: none;
  }

  .m-ready .content form button[type="submit"]:before,
  .m-ready .content .button-style:before,
  .m-ready .content .custom_button:before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  .m-ready .content form button[type="submit"]:after,
  .m-ready .content .button-style:after,
  .m-ready .content .custom_button:after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .m-ready .content form button[type="submit"]:disabled,
  .m-ready .content .button-style:disabled {
    opacity: 0.4;
    box-shadow: none;
    text-shadow: none;
    cursor: default;
  }

  /* Label / field form tables become two columns: engraved label behind a neon diamond, then the field. */
  .m-ready #registration_form,
  .m-ready #lostpassword_form,
  .m-ready #lostpassword_secret_form,
  .m-ready #password_change_form,
  .m-ready #email_change_form,
  .m-ready #recover_master_key,
  .m-ready #transfer_char,
  .m-ready #credits_exchange_form,
  .m-ready #credits_exchange_form2,
  .m-page-shop .entry > .form {
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 22px 30px 26px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-ready .content form table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  .m-ready .content form td {
    padding: 8px 0;
    vertical-align: middle;
    text-align: left;
  }

  .m-ready .content form td:first-child:not(:only-child):not(:has(input, select, textarea, button)) {
    width: 230px !important;
    padding-right: 20px;
    color: var(--label);
    font: 700 12px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready .content form td:first-child:not(:only-child):not(:has(input, select, textarea, button)):before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px 2px 1px;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
    vertical-align: middle;
  }

  /* Fields fill their cell (:where keeps this overridable by the few compact forms, e.g. the ranking search). */
  .m-ready .content :where(form, .form) td :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100% !important;
    max-width: 100%;
  }

  .m-ready .content form td:empty {
    display: none;
  }

  /* Registration and the other forms push their submit button around with inline margins. */
  .m-ready .content form div[style*="margin-left"] {
    margin: 22px 0 0 !important;
    text-align: center;
  }

  .m-ready .content form td[colspan="2"][align="center"],
  .m-ready .content form td[colspan] {
    text-align: center;
  }

  .m-ready .content form p {
    margin: 6px 0 0;
    color: var(--dim);
    font: 400 13px/1.5 var(--font-game);
  }

  /* A checkbox in front of text (registration rules, transfer skins, donation terms). A cell stays a table cell,
     so the text runs across the whole width of the form table. */
  .m-ready .content td:has(> input[type="checkbox"]:first-child),
  .m-ready .content label:has(> input[type="checkbox"]:first-child) {
    position: relative;
    padding-left: 36px !important;
    color: var(--body-text);
    font: 400 14px/1.6 var(--font-game);
    text-align: left;
  }

  .m-ready .content label:has(> input[type="checkbox"]:first-child) {
    display: block;
  }

  /* Registration: "Download Client" under the table lines up with the checkbox rows above it. */
  .m-ready #registration_form div:has(> #download_client) {
    gap: 14px;
    padding: 8px 0 0;
    color: var(--body-text);
    font: 400 14px/1.6 var(--font-game);
    text-align: left;
  }

  .m-ready #registration_form #download_client {
    flex: 0 0 auto;
    margin: 0;
  }

  .m-ready .content td:has(> input[type="checkbox"]:first-child) > input[type="checkbox"]:first-child,
  .m-ready .content label:has(> input[type="checkbox"]:first-child) > input[type="checkbox"]:first-child {
    position: absolute;
    top: 3px;
    left: 0;
    margin: 0;
  }

  .m-ready .content td:has(> input[type="checkbox"]:first-child) a,
  .m-ready .content label:has(> input[type="checkbox"]:first-child) a {
    border-bottom: 1px solid rgba(var(--acc), 0.35);
    color: var(--acc-hi);
    text-decoration: none;
  }

  /* Recovery: server, account and button sit in one row of the form table. */
  .m-ready #lostpassword_form table tr {
    display: flex;
    gap: 12px;
  }

  .m-ready #lostpassword_form table td {
    flex: 1 1 0;
    width: auto !important;
    padding: 0;
  }

  .m-ready #lostpassword_form button[type="submit"] {
    width: 100% !important;
    min-width: 0;
  }

  /* Validation prompts (jquery.validationEngine): a small gold panel in place of the red bubble. */
  .m-ready .formError .formErrorContent {
    box-sizing: border-box;
    padding: 7px 12px;
    border: 1px solid rgba(var(--gold-rgb), 0.6);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.14), rgba(var(--gold-rgb), 0.04)), rgba(9, 13, 25, 0.96);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.3), inset 0 0 10px rgba(var(--gold-rgb), 0.08);
    color: var(--gold);
    font: 700 11px/1.35 var(--font-game);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5);
    text-transform: uppercase;
  }

  .m-ready .formError .formErrorArrow {
    display: none;
  }

  .m-ready .greenPopup .formErrorContent,
  .m-ready .blackPopup .formErrorContent {
    border-color: var(--line);
    background: var(--strip), rgba(9, 13, 25, 0.96);
    color: var(--acc-pale);
    text-shadow: 0 0 6px rgba(var(--acc), 0.5);
  }

  /* Messages (App.notice): neon panels in the bottom right corner. */
  .m-ready #notifier-box {
    right: 24px;
    bottom: 24px;
    z-index: 11001;
  }

  .m-ready #notifier-box div.message-box {
    position: relative;
    width: 360px;
    margin: 0 0 10px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--corners), rgba(7, 10, 20, 0.97);
    background-origin: border-box;
    box-shadow: var(--glow), 0 14px 30px rgba(0, 0, 0, 0.65);
    color: var(--text);
    font: 400 14px/1.5 var(--font-game);
  }

  .m-ready #notifier-box div.message-box div.success,
  .m-ready #notifier-box div.message-box div.error {
    margin: 0;
    padding: 12px 44px 10px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--acc-pale);
    font: 400 13px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.5);
    text-transform: uppercase;
  }

  .m-ready #notifier-box div.message-box div.error {
    border-bottom-color: rgba(var(--gold-rgb), 0.3);
    background: var(--strip-gold);
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-ready #notifier-box div.message-box div.message-body {
    padding: 12px 18px 16px;
  }

  .m-ready #notifier-box div.message-box a.message-close {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: none;
    opacity: 0.8;
  }

  .m-ready #notifier-box div.message-box a.message-close:before,
  .m-ready #notifier-box div.message-box a.message-close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    margin-left: -7px;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
  }

  .m-ready #notifier-box div.message-box a.message-close:after {
    transform: rotate(-45deg);
  }

  /* Loading badge: bottom centre, since the sticky top bar covers the top edge. */
  .m-ready #loading {
    top: auto;
    bottom: 24px;
    left: 50%;
    z-index: 9050;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 0;
    transform: translateX(-50%);
    background: rgba(7, 10, 20, 0.97);
    box-shadow: var(--glow);
    color: var(--acc-pale);
    font: 600 12px/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Select server modal (view.footer.php, opened by leanModal). */
  .m-ready #select_server {
    width: 420px !important;
    padding: 0 0 18px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--acc), 0.45);
    border-radius: 0;
    background: var(--corners), rgba(7, 10, 20, 0.98);
    background-origin: border-box;
    box-shadow: var(--glow), 0 14px 30px rgba(0, 0, 0, 0.65);
    color: var(--text);
  }

  .m-ready #select_server .modal-header {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
  }

  .m-ready #select_server .modal-header h2 {
    margin: 0;
    padding: 16px 52px 14px;
    color: var(--acc-pale);
    font: 400 14px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-align: center;
    text-shadow: 0 0 8px rgba(var(--acc), 0.5);
    text-transform: uppercase;
  }

  .m-ready #select_server .close {
    top: 50%;
    right: 4px;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    background: none;
  }

  .m-ready #select_server .close:before,
  .m-ready #select_server .close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 1px;
    margin-left: -8px;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
  }

  .m-ready #select_server .close:after {
    transform: rotate(-45deg);
  }

  .m-ready #select_server .form {
    margin: 18px 20px 0 !important;
  }

  .m-ready #select_server .form > span {
    display: block;
    margin-bottom: 8px;
    color: var(--label) !important;
    font: 700 12px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready #select_server select {
    width: 100%;
    min-height: 46px;
    padding: 0 42px 0 14px;
    border: 1px solid rgba(var(--acc), 0.3);
    border-radius: 0;
    background-color: rgba(4, 8, 18, 0.6);
    background-image: linear-gradient(45deg, transparent 50%, rgb(var(--acc)) 50%), linear-gradient(135deg, rgb(var(--acc)) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    color: var(--text);
    font: 15px var(--font-ui);
    -webkit-appearance: none;
    appearance: none;
  }

  .m-ready #lean_overlay {
    background: #000;
  }

  /* Server info tables (about, referral rewards, transfer history): neon panels with lit headers. */
  .m-ready .server-stat-table {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 26px;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    color: var(--text);
    font: 400 15px/1.5 var(--font-game);
    letter-spacing: 0.03em;
    text-align: left;
  }

  .m-ready .server-stat-table tr:hover {
    background: none;
    color: inherit;
  }

  .m-ready .server-stat-table th[colspan] {
    position: relative;
    padding: 16px 20px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--acc-pale);
    font: 400 14px/1.3 var(--font-game);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.5);
    text-transform: uppercase;
  }

  .m-ready .server-stat-table th[colspan]:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: rgb(var(--acc));
    box-shadow: 0 0 8px rgb(var(--acc));
  }

  .m-ready .server-stat-table tbody th[colspan] {
    border-top: 1px solid rgba(var(--gold-rgb), 0.22);
    border-bottom-color: rgba(var(--gold-rgb), 0.3);
    background: var(--strip-gold);
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-ready .server-stat-table tbody th[colspan]:after {
    background: rgb(var(--gold-rgb));
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.8);
  }

  /* A table with only a header is the page title (Server info). */
  .m-ready .server-stat-table:not(:has(tbody)) {
    margin-bottom: 18px;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .m-ready .server-stat-table:not(:has(tbody)) th[colspan] {
    padding: 8px 4px 18px;
    border-bottom-color: rgba(var(--acc), 0.16);
    background: none;
    color: var(--title);
    font: 900 40px/1.15 var(--font-game);
    letter-spacing: 0.08em;
    text-indent: 0.08em;
    text-shadow: 0 0 22px rgba(var(--acc), 0.18);
  }

  .m-ready .server-stat-table:not(:has(tbody)) th[colspan]:after {
    display: none;
  }

  .m-ready .server-stat-table thead th:not([colspan]),
  .m-ready .server-stat-table thead td {
    padding: 13px 14px 11px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--label);
    font: 600 11px/1.2 var(--font-ui);
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-ready .server-stat-table td {
    padding: 14px 14px !important;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }

  .m-ready .server-stat-table tr:last-child td {
    border-bottom: 0;
  }

  .m-ready .server-stat-table th:first-child,
  .m-ready .server-stat-table td:first-child {
    padding-left: 22px !important;
  }

  .m-ready .server-stat-table th:last-child,
  .m-ready .server-stat-table td:last-child {
    padding-right: 22px !important;
  }

  /* Key / value rows (Server info): dim engraved label behind a diamond, bright value. */
  .m-ready .server-stat-table td[style*="width:50%"]:first-child {
    color: var(--label);
    font: 700 13px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready .server-stat-table td[style*="width:50%"]:first-child:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px 2px 0;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
    vertical-align: middle;
  }

  .m-ready .server-stat-table tr.main-tr ~ tr td[style*="width:50%"]:first-child:before {
    background: rgb(var(--gold-rgb));
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.85);
  }

  .m-page-about .server-stat-table tbody tr:first-child td[style*="width:50%"] + td {
    color: var(--gold);
    font: 700 18px/1.3 var(--font-game);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-page-about .server-stat-table tbody tr:nth-child(2) td[style*="width:50%"] + td {
    color: var(--acc-hi);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.6);
    text-transform: uppercase;
  }

  .m-page-about .server-stat-table td span[style*="ffd05a"] {
    color: rgba(255, 208, 90, 0.8) !important;
    font-size: 12px !important;
    text-shadow: none;
    text-transform: none;
  }

  /* Castle siege: a narrower panel; the stage dates on their own line under the state, without the brackets
     (about/view.about.php wraps them in .cs-period and .cs-paren). */
  .m-ready .server-stat-table.cs-info-table {
    max-width: 760px;
  }

  .m-page-about .cs-period {
    display: block;
    margin-top: 4px;
  }

  .m-page-about .cs-paren {
    display: none;
  }

  .m-ready .server-stat-table td a[href*="/guild/"] {
    color: var(--gold) !important;
    font: 700 15px/1.3 var(--font-game) !important;
    letter-spacing: 0.06em;
  }

  .m-ready .server-stat-table td a[href*="/character/"] {
    color: #bfe9ff !important;
    font-size: 14px !important;
  }

  .m-ready .server-stat-table .i_note {
    max-width: none;
    margin: 0;
    padding: 20px 8px;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--dim);
    font: 400 13px/1.4 var(--font-game);
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
  }

  /* About text (assets/about.html): engraved capitals for every word, as on phones. */
  .m-page-about #general_information_main,
  .m-page-about #general_information_main *,
  .m-page-about details,
  .m-page-about details * {
    font-family: var(--font-game) !important;
  }

  .m-page-about #general_information_main,
  .m-page-about details {
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
  }

  .m-page-about #general_information_main h1 {
    margin: 30px 0 14px !important;
    color: #e3ebf4 !important;
    font: 700 24px/1.35 var(--font-game) !important;
    letter-spacing: 0.1em;
    text-shadow: 0 0 5px rgba(var(--acc), 0.4);
  }

  .m-page-about #general_information_main p {
    margin-bottom: 16px !important;
    color: var(--body-text);
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }

  .m-page-about #general_information_main a {
    border-bottom: 1px solid rgba(var(--acc), 0.35);
    color: var(--acc-hi);
    text-decoration: none;
  }

  .m-page-about details:has(> summary.big) {
    border-bottom: 1px solid rgba(116, 136, 190, 0.14);
  }

  .m-page-about summary.big {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px !important;
    background: linear-gradient(180deg, #f4f8fc 15%, #b9c7d6 60%, #8597ab 95%);
    -webkit-background-clip: text;
    background-clip: text;
    font: 700 19px/1.3 var(--font-game) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .m-page-about summary.short,
  .m-page-about summary.short2 {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #c3cfde !important;
    font-size: 16px !important;
    cursor: pointer;
  }

  .m-page-about summary::marker {
    color: rgb(var(--acc));
  }

  /* Rules (assets/rules.html sets Georgia, bold and colours inline): tabs as neon buttons, Server info text style. */
  .m-page-rules .tabs {
    justify-content: center;
    gap: 12px;
    margin: 0 0 22px;
  }

  .m-page-rules .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 50px;
    padding: 10px 22px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--strip), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 10px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    font: 700 12px/1.3 var(--font-game);
    letter-spacing: 0.14em;
    text-shadow: 0 0 8px rgba(var(--acc), 0.7);
    text-transform: uppercase;
  }

  .m-page-rules .tab.active {
    border-color: rgba(var(--gold-rgb), 0.6);
    background: var(--strip-gold), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.25), inset 0 0 12px rgba(var(--gold-rgb), 0.08);
    color: var(--gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
  }

  .m-page-rules .tab-content,
  .m-page-rules .tab-content * {
    font-family: var(--font-game) !important;
  }

  /* User Agreement and Privacy Policy start with an h2 title; it takes the column of the Game Server Rules text. */
  .m-page-rules .tab-content h2,
  .m-page-rules .tab-content h3,
  .m-page-rules .tab-content p,
  .m-page-rules .tab-content ul {
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
  }

  .m-page-rules .tab-content h2 {
    margin-bottom: 14px;
    text-align: left !important;
  }

  .m-page-rules .tab-content h3 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-align: left !important;
  }

  .m-page-rules .tab-content p {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    text-align: left !important;
  }

  .m-page-rules .tab-content strong {
    font-weight: 400;
  }

  .m-page-rules .tab-content [style*="8793ac"] {
    color: var(--body-text) !important;
  }

  .m-page-rules .tab-content span[style*="ffcc00"] {
    color: var(--gold) !important;
  }

  .m-page-rules .tab-content span[style*="ffcc99"],
  .m-page-rules .tab-content h2[style*="ffcc00"],
  .m-page-rules .tab-content h3[style*="ffcc00"] {
    display: block;
    margin-top: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.22);
    color: var(--gold) !important;
    font-size: 17px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
    text-transform: uppercase;
  }

  .m-page-rules .tab-content span[style*="ffcc99"] span {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit !important;
  }

  .m-page-rules .tab-content li {
    position: relative;
    padding-left: 20px;
  }

  .m-page-rules .tab-content li:before {
    content: "";
    position: absolute;
    top: 0.85em;
    left: 2px;
    width: 5px;
    height: 5px;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
  }

  .m-page-rules .tab-content a {
    border-bottom: 1px solid rgba(var(--acc), 0.35);
    color: var(--acc-hi);
    text-decoration: none;
  }

  /* Justified editor text leaves wide gaps between words. */
  .m-ready .content [style*="justify"] {
    text-align: left !important;
  }

  /* Account panel (account_panel/view.index.php)
  ---------------------------------------------------------------------------*/
  .m-page-account_panel #ucp_info:has(> .half) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 30px;
  }

  .m-page-account_panel #ucp_info .half {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .m-page-account_panel #ucp_info .hrs {
    display: none;
  }

  .m-page-account_panel .login-profile-table {
    width: 100%;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    table-layout: fixed;
  }

  .m-page-account_panel .login-profile-table tr {
    border: 0;
  }

  .m-page-account_panel table.login-profile-table td {
    padding: 13px 10px;
    border: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    color: var(--label);
    font: 700 12px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    word-break: break-word;
  }

  .m-page-account_panel .login-profile-table tr:last-child td {
    border-bottom: 0 !important;
  }

  .m-page-account_panel .login-profile-table td:first-child {
    width: 44px;
    padding-left: 14px;
    text-align: center;
  }

  .m-page-account_panel .login-profile-table td:first-child img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    object-fit: contain;
  }

  .m-page-account_panel .login-profile-table td:nth-child(2) {
    width: 42%;
  }

  .m-page-account_panel .login-profile-table td:last-child {
    padding-right: 16px;
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: none;
  }

  .m-ready .login-profile-table .m-discord-status {
    display: block;
    margin-bottom: 6px;
    color: var(--dim);
  }

  .m-ready .login-profile-table .m-discord-status.is-synced {
    color: #5fd38d;
    text-shadow: 0 0 8px rgba(95, 211, 141, 0.35);
  }

  .m-ready .login-profile-table a.m-discord-sync,
  .m-ready .login-profile-table a.m-discord-unsync,
  .m-ready .login-profile-table a.m-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    float: none !important;
    min-height: 36px;
    margin: 2px 0;
    padding: 0 16px !important;
    box-sizing: border-box;
    border-radius: 0;
    font: 700 11px/1.2 var(--font-game);
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .m-ready .login-profile-table a.m-discord-sync {
    border: 1px solid #ffb347;
    background: linear-gradient(180deg, #ff9a2e 0%, #f26b0f 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    animation: m-sync-pulse 2s ease-in-out infinite;
  }

  .m-ready .login-profile-table a.m-discord-unsync {
    border: 1px solid rgba(116, 136, 190, 0.35);
    background: rgba(255, 255, 255, 0.03);
    color: var(--label);
  }

  .m-ready .login-profile-table a.m-action-btn {
    border: 1px solid rgba(var(--acc), 0.45);
    background: var(--btn-fill);
    box-shadow: 0 0 14px rgba(var(--acc), 0.16), inset 0 0 14px rgba(var(--acc), 0.08);
    color: var(--acc-pale);
    text-shadow: 0 0 8px rgba(var(--acc), 0.8);
  }

  .m-ready .login-profile-table a.m-action-btn:after {
    content: "\203A";
    font-size: 16px;
    line-height: 1;
  }

  /* Action tiles (#character-info): three per row, each a panel; the whole tile opens its link. */
  .m-page-account_panel .box-style4 {
    max-width: 1100px;
    margin: 0 auto;
  }

  .m-page-account_panel #character-info table,
  .m-page-account_panel #character-info tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .m-page-account_panel #character-info .half {
    float: none;
    width: auto;
    padding: 0;
  }

  .m-page-account_panel #character-info table {
    display: block;
  }

  .m-page-account_panel #character-info tr {
    display: contents;
  }

  .m-page-account_panel #character-info td,
  .m-page-account_panel #character-info td:hover {
    position: relative;
    display: block;
    width: auto;
    padding: 18px 44px 18px 20px;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    color: var(--dim);
    font: 400 13px/1.5 var(--font-game);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-page-account_panel #character-info td:hover {
    border-color: rgba(var(--acc), 0.6);
    box-shadow: 0 0 22px rgba(var(--acc), 0.25), inset 0 0 18px rgba(var(--acc), 0.1);
  }

  .m-page-account_panel #character-info td:empty {
    display: none;
  }

  .m-page-account_panel #character-info td:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid rgb(var(--acc));
    border-right: 2px solid rgb(var(--acc));
    transform: rotate(45deg);
    opacity: 0.7;
    pointer-events: none;
  }

  .m-page-account_panel #character-info div,
  .m-page-account_panel #character-info ul,
  .m-page-account_panel #character-info ul li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
  }

  .m-page-account_panel #character-info td a,
  .m-page-account_panel #character-info td a:hover {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--gold);
    font: 700 15px/1.3 var(--font-game);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
    text-transform: uppercase;
    filter: none;
  }

  /* Referral page (account_panel/view.my_referral_list.php). */
  .m-page-account_panel .add_to_card {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 18px;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    color: var(--text);
    font: 400 15px/1.45 var(--font-game);
  }

  .m-page-account_panel .add_to_card th {
    padding: 13px 20px 11px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--label);
    font: 600 11px/1.2 var(--font-ui);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .m-page-account_panel .add_to_card td {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--line-soft);
  }

  .m-page-account_panel .add_to_card td td {
    padding: 2px 12px 2px 0 !important;
    border: 0;
    color: var(--label);
    font-size: 13px;
  }

  .m-page-account_panel .ref-reward-dropdown-content {
    border: 1px solid var(--line);
    background: rgba(9, 13, 25, 0.97);
    box-shadow: var(--glow);
  }

  .m-page-account_panel .ref-reward-dropdown-content a,
  .m-page-account_panel .ref-reward-dropdown-content a:hover {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: var(--gold);
    font: 700 13px/1.3 var(--font-game);
  }

  .m-page-account_panel .ref-reward-dropdown-content a:hover {
    background: rgba(var(--acc), 0.1);
  }

  /* Info lists under plugin forms (e.g. change name rules). */
  .m-ready .content #ucp_info ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 20px;
    color: var(--body-text);
    font: 400 15px/1.6 var(--font-game);
  }

  .m-ready .content #ucp_info ul li:before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 2px;
    width: 5px;
    height: 5px;
    background: rgb(var(--acc));
    box-shadow: 0 0 6px rgb(var(--acc));
    transform: rotate(45deg);
  }

  /* Downloads. */
  .m-ready .downloads-table {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    color: var(--text);
  }

  .m-ready .downloads-table th {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--strip);
    color: var(--label);
    font: 600 11px/1.2 var(--font-ui);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .m-ready .downloads-table td {
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font: 400 15px/1.4 var(--font-game);
  }

  .m-ready .downloads-table tr:last-child td {
    border-bottom: 0;
  }

  .m-ready .downloads-table tr:hover {
    background: rgba(var(--acc), 0.05);
  }

  .m-ready .downloads-table .download-button {
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 18px !important;
    font-size: 11px;
  }

  /* Donation methods (donate/view.method.php): payment logos in neon frames. */
  .m-ready .xeq_btn-2 {
    gap: 18px;
    margin: 10px auto 24px !important;
  }

  .m-ready .xeq_btn-2 a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 80px;
    padding: 12px 18px;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-ready .xeq_btn-2 a:hover {
    border-color: rgba(var(--acc), 0.65);
    filter: none;
  }

  /* The donation pages centre their content: payment logos, the terms checkbox line and the package cards. */
  .m-page-donate .content {
    text-align: center;
  }

  /* Character profile (info/view.character.php). */
  .m-page-info .char-profile-title {
    margin: 0 0 18px;
    padding: 6px 4px 16px;
    border-bottom: 1px solid rgba(var(--acc), 0.16);
    outline: 0;
    color: var(--gold);
    font: 900 40px/1.2 var(--font-game);
    letter-spacing: 0.12em;
    text-align: center;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5), 0 0 16px rgba(var(--gold-rgb), 0.2);
  }

  .m-page-info .char-profile-table-2 {
    float: none;
    display: inline-table;
    width: calc(50% - 14px);
    margin: 0 6px 18px;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
    vertical-align: top;
  }

  .m-page-info .char-profile-table-2 tr {
    border: 0;
  }

  .m-page-info .char-profile-table-2 td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }

  .m-page-info .char-profile-table-2 tr:last-child td {
    border-bottom: 0;
  }

  .m-page-info .char-profile-table-2 td:first-child {
    width: 44px;
    padding-left: 14px;
  }

  .m-page-info .char-profile-table-2 td:first-child img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: none;
    object-fit: contain;
  }

  .m-page-info .char-profile-table-2 td:nth-child(2) {
    color: var(--label);
    font: 700 12px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-page-info .char-profile-table-2 td.cpm-td-live {
    padding-right: 18px;
    color: var(--text);
    font: 700 15px/1.35 var(--font-game);
    letter-spacing: 0.04em;
    text-align: right;
  }

  .m-page-info .char-profile-table-2 td.cpm-td-live a {
    color: var(--gold);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-page-info .char-profile-table-2 td.cpm-td-live img[src*="get_mark"] {
    float: right;
    width: 20px;
    height: 20px;
    margin: 0 0 0 8px;
    image-rendering: pixelated;
  }

  .m-page-info .char-profile-table-2 td.cpm-td-live img[src*="get_mark"] + br {
    display: none;
  }

  .m-page-info .equip-table {
    width: auto;
    margin: 6px auto 0;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-page-info .equip-table td {
    padding: 8px 18px 14px !important;
  }

  /* Guild page (info/view.guild.php): emblem, key / value panel, member list. */
  .m-page-info .guild-profile-title {
    margin: 0 0 18px;
    padding: 6px 4px 16px;
    border-bottom: 1px solid rgba(var(--acc), 0.16);
    outline: 0;
    color: var(--title);
    font: 900 40px/1.2 var(--font-game);
    letter-spacing: 0.12em;
    text-shadow: 0 0 22px rgba(var(--acc), 0.18);
    text-transform: uppercase;
  }

  .m-page-info .guild-profile-info {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }

  .m-page-info .guild-profile-mark {
    width: 170px;
    padding-right: 24px;
    vertical-align: middle;
  }

  .m-page-info .guild-profile-mark img {
    display: block;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    padding: 4px;
    border: 1px solid rgba(var(--acc), 0.4);
    background: rgba(var(--acc), 0.05);
    box-shadow: 0 0 16px rgba(var(--acc), 0.28), inset 0 0 10px rgba(var(--acc), 0.15);
    image-rendering: pixelated;
  }

  .m-page-info .guild-profile-info-in {
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-page-info .guild-profile-info-in .guild-profile-common,
  .m-page-info .guild-profile-info-in .guild-profile-current {
    width: 50%;
    height: auto;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .m-page-info .guild-profile-info-in tr:last-child td {
    border-bottom: 0;
  }

  .m-page-info .guild-profile-info-in .guild-profile-common {
    color: var(--label);
    font: 700 12px/1.4 var(--font-game);
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-page-info .guild-profile-info-in .guild-profile-current {
    color: var(--text);
    font: 700 16px/1.3 var(--font-game);
    text-align: right;
  }

  .m-page-info .guild-profile-current a {
    color: var(--gold);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.45);
  }

  .m-page-info .guild-profile-members {
    width: 100%;
    max-width: 760px;
    margin: 24px auto 0;
    border: 1px solid var(--line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--corners), var(--panel-fill);
    background-origin: border-box;
    box-shadow: var(--glow);
  }

  .m-page-info .guild-profile-members tr:hover {
    background: rgba(var(--acc), 0.05);
  }

  .m-page-info .guild-profile-members td {
    width: auto;
    height: auto;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    font: 400 14px/1.3 var(--font-game);
  }

  .m-page-info .guild-profile-members tr:last-child td {
    border-bottom: 0;
  }

  .m-page-info .gpm-td-rank {
    width: 50px;
    color: var(--acc-hi);
    font: 700 16px/1 var(--font-ui) !important;
    text-align: center;
  }

  .m-page-info .gpm-td-nick {
    text-align: left;
  }

  .m-page-info .gpm-td-nick a {
    color: var(--gold);
    font: 700 16px/1.3 var(--font-game);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
  }

  .m-page-info .gpm-td-class {
    color: var(--label) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-page-info .gpm-td-level {
    font: 700 16px/1 var(--font-ui) !important;
    text-align: right;
  }

  .m-page-info .gpm-td-position {
    color: var(--dim) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* Narrower desktop windows: the menu takes its own row under the brand and the tools, the ranking columns tighten. */
@media (min-width: 901px) and (max-width: 1279px) {
  .m-ready .d-topbar-inner {
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: 12px;
  }

  .m-ready .d-tools {
    order: 1;
    margin-left: auto;
  }

  .m-ready .d-nav {
    order: 2;
    flex: 0 0 100%;
  }

  .m-ready .d-nav-link {
    padding: 16px 10px 14px;
  }

  /* The top bar is two rows tall here. */
  .m-ready .wiki-search-block {
    top: 136px;
  }

  .m-ready .ranking-table tr.rank-head,
  .m-ready .ranking-table tr.tr-bg-image {
    grid-template-columns: 48px 44px 160px 66px 66px 66px 84px 104px 150px;
  }

  .m-ready .ranking-table .td-points {
    grid-template-columns: 66px 66px 66px 84px 104px;
  }

  .m-ready .ranking-table .rank-points-tooltip {
    width: 104px;
  }

  /* Six packages do not fit one row here: three per row. */
  .m-ready .d-packages {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 901px) and (max-width: 1179px) {
  .m-ready .d-hero {
    flex-direction: column;
    gap: 32px;
  }

  .m-ready .d-realm-panel {
    flex: none;
  }

  .m-ready .d-hero-title {
    font-size: 52px;
  }

  .m-ready .d-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-ready .d-castle-tile {
    grid-column: 1 / -1;
  }

  .m-page-account_panel #character-info tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .m-ready ul#paypal-options {
    width: calc(50% - 16px);
  }
}

@keyframes d-castle-fill {
  0%, 100% { color: rgb(var(--acc, 0, 226, 255)); }
  50% { color: #f2d488; }
}

/* The ambient effect needs free side fields: shown when the window is clearly wider than the 1360px content column
   (js/ambient.js reads the same query and only draws while it matches). */
@media (min-width: 1500px) {
  .m-ready .d-ambient {
    display: block;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .m-ready .castle-owner-mark,
  .m-ready .login-profile-table a.m-discord-sync {
    animation: none;
  }
}