@charset "utf-8";
/*
 * Mobile layout for the whole neon-mu template (all public pages and the account panel).
 * Loaded after style/style2/style3.css. Page-specific rules are scoped by the body class
 * m-page-<controller> set in view.header.php.
 * The three themes differ only in image paths, so this file does not reference theme-specific images:
 * it overrides layout properties and keeps each theme's own artwork where it still fits. The only images it names
 * are ones all three themes share (server artwork in ../images/, class portraits in ../images/classes/).
 * Everything that changes the desktop look lives inside the max-width media queries.
 */

/* Mobile-only chrome is hidden on desktop widths. */
.m-topbar,
.m-tabbar,
.m-backdrop,
.m-hero,
.m-events-sheet,
.m-pinned-events,
.m-event-pin {
  display: none;
}

/* !important: desktop rules such as ".menu li a { display: block }" are more specific. */
.m-mobile-only {
  display: none !important;
}

/* Castle owner mark next to the guild name in the guild ranking (rank_guilds.ejs), on desktop and phones:
   a solid castle whose fill slowly shifts from neon blue to castle gold and back.
   Sized in em and sitting on the text baseline (the viewBox ends at the castle's base), it lines up with the name. */
.castle-owner-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: baseline;
  color: #f2d488;
  animation: m-castle-fill 3.6s ease-in-out infinite;
}

.castle-owner-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Marks after a player's name and diamond status in the player ranking (rank_players.ejs), on desktop and phones:
   the tournament champion's cup, then the castle mark of the castle owner guild's members. They use the ranking
   tooltips (.rank-hover-tooltip, data-tooltip) like the diamond status. */
.rank-marks {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
}

.rank-marks .rank-mark {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
}

/* The champion's cup stands before the name. */
.rank-marks-lead {
  margin: 0 5px 0 0;
}

.rank-mark-champion {
  color: #f2d488;
}

/* The glow is on the cup itself: a filter on the tooltip element made Safari cut its tooltip off. */
.rank-mark-champion svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(255, 196, 64, 0.7));
}

@keyframes m-castle-fill {
  0%, 100% { color: #5fd8ff; }
  50% { color: #f2d488; }
}

@media (prefers-reduced-motion: reduce) {
  .castle-owner-mark {
    animation: none;
  }
}

/* "Move your character" (account_panel/view.index.php) has a short label for phones. */
.m-move-short {
  display: none;
}

/* The Discord Sync button's "Not Synced" label is for desktop (desktop.css); phones keep the status line and "Sync". */
.m-sync-off {
  display: none;
}

/* Account panel action buttons (mobile only; desktop keeps the theme's own look): Discord Sync is a bright
   orange call-to-action because it unlocks the Discord channels, "Synced" status turns green, and
   "Move your character" reads as a button labelled "Move char".
   Links are matched by URL as well as by class so the styling does not depend on the view markup version. */
@media (max-width: 900px) {
  .login-profile-table .m-move-full {
    display: none;
  }

  .login-profile-table .m-move-short {
    display: inline;
  }

  .login-profile-table a.m-discord-sync,
  .login-profile-table a[href$="/discord"],
  .login-profile-table a.m-discord-unsync,
  .login-profile-table a[href*="discord/unsync"],
  .login-profile-table a.m-action-btn,
  .login-profile-table a[href$="warp-char"] {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    margin: 2px 0;
    padding: 0 16px !important;
    box-sizing: border-box;
    border-radius: 0;
    font: 700 12px/1.2 "Cinzel", "Times New Roman", Times, serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }

  .login-profile-table a.m-discord-sync,
  .login-profile-table a[href$="/discord"] {
    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);
    box-shadow: 0 0 14px rgba(255, 140, 30, 0.55);
    animation: m-sync-pulse 2s ease-in-out infinite;
  }

  .login-profile-table a.m-discord-unsync,
  .login-profile-table a[href*="discord/unsync"] {
    border: 1px solid rgba(116, 136, 190, 0.35);
    background: rgba(255, 255, 255, 0.03);
    color: #9aa8c2;
    box-shadow: none;
    animation: none;
  }

  .login-profile-table a.m-action-btn,
  .login-profile-table a[href$="warp-char"] {
    padding: 0 12px !important;
    border: 1px solid rgba(0, 226, 255, 0.38);
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    color: #dffaff;
    font-size: 11px;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
  }

  .login-profile-table a.m-action-btn:after,
  .login-profile-table a[href$="warp-char"]:after {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
  }

  .login-profile-table a.m-discord-sync:hover,
  .login-profile-table a[href$="/discord"]:hover,
  .login-profile-table a.m-action-btn:hover,
  .login-profile-table a[href$="warp-char"]:hover {
    filter: brightness(1.15);
  }

  .login-profile-table a.m-discord-sync:active,
  .login-profile-table a[href$="/discord"]:active,
  .login-profile-table a.m-discord-unsync:active,
  .login-profile-table a[href*="discord/unsync"]:active,
  .login-profile-table a.m-action-btn:active,
  .login-profile-table a[href$="warp-char"]:active {
    transform: scale(0.96);
  }

  .login-profile-table .m-discord-status {
    color: #6f7c99;
  }

  .login-profile-table .m-discord-status.is-synced,
  .login-profile-table td:has(> a[href*="discord/unsync"]) > span {
    color: #5fd38d;
    text-shadow: 0 0 8px rgba(95, 211, 141, 0.35);
  }
}

@media (max-width: 900px) {

  /* Tokens
  ---------------------------------------------------------------------------*/
  .m-ready {
    --m-top: 56px;
    --m-tab: 62px;
    --m-pins: 46px;
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-panel: rgba(13, 18, 34, 0.86);
    --m-panel-solid: #0c1122;
    --m-line: rgba(116, 136, 190, 0.22);
    --m-line-strong: #3f517c;
    --m-text: #a4afc8;
    --m-text-dim: #6f7c99;
    --m-title: #e6e7e8;
    --m-accent: #00e2ff;
    --m-gold: #decfa1;
    /* Every mobile panel, button and field has sharp corners, as in Server info. */
    --m-radius: 0;
    /* Full-width hero bands: dim background with faint top/bottom edge lines instead of framed boxes. */
    --m-band: rgba(6, 9, 18, 0.62);
    --m-band-edge: linear-gradient(90deg, rgba(0, 226, 255, 0.05), rgba(0, 226, 255, 0.34) 50%, rgba(0, 226, 255, 0.05));
    --m-neon-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Cinzel is loaded with the template's Google Fonts link in view.header.php. */
    --m-game-font: "Cinzel", "Times New Roman", Times, serif;
    /* Sharp panels: four short neon corner marks, used as the first background layers of a panel. */
    --m-corner: rgba(0, 226, 255, 0.6);
    --m-corners:
      linear-gradient(var(--m-corner), var(--m-corner)) left top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) left top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) right top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) right top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) left bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) left bottom / 1px 14px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) right bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner), var(--m-corner)) right bottom / 1px 14px no-repeat;
    /* The same corner marks in castle gold (the chosen ranking). */
    --m-corner-gold: rgba(255, 196, 64, 0.75);
    --m-corners-gold:
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) left top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) left top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) right top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) right top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) left bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) left bottom / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) right bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-gold), var(--m-corner-gold)) right bottom / 1px 14px no-repeat;
    /* And in neon pink (the 1000 Diamonds popular offer). */
    --m-corner-pink: rgba(255, 92, 205, 0.75);
    --m-corners-pink:
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) left top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) left top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) right top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) right top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) left bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) left bottom / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) right bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-pink), var(--m-corner-pink)) right bottom / 1px 14px no-repeat;
    /* And in flame orange (the best offer). */
    --m-corner-best: rgba(255, 138, 61, 0.8);
    --m-corners-best:
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) left top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) left top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) right top / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) right top / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) left bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) left bottom / 1px 14px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) right bottom / 14px 1px no-repeat,
      linear-gradient(var(--m-corner-best), var(--m-corner-best)) right bottom / 1px 14px no-repeat;
    /* Server info look shared by every page: neon framed panel, lit title strip, engraved labels. */
    --m-neon-line: rgba(0, 226, 255, 0.3);
    --m-neon-fill: rgba(9, 13, 25, 0.62);
    --m-neon-glow: 0 0 16px rgba(0, 226, 255, 0.12), inset 0 0 18px rgba(0, 226, 255, 0.05);
    --m-strip: linear-gradient(180deg, rgba(0, 226, 255, 0.1), rgba(0, 226, 255, 0.02));
    --m-gold-text: #f2d488;
    --m-label: #9aa8c2;
    --m-body-text: #a9b6cc;
    /* Select server window and the login/notice messages open at the same height. */
    --m-modal-top: calc(var(--m-top) + var(--m-safe-top) + 96px);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.m-ready {
    font-size: 14px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 226, 255, 0.15);
  }

  body.m-ready.m-nav-open {
    overflow: hidden;
  }

  /* Top bar
  ---------------------------------------------------------------------------*/
  .m-ready .m-topbar {
    position: sticky;
    top: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--m-top);
    padding: var(--m-safe-top) 12px 0;
    background: rgba(8, 11, 20, 0.82);
    border-bottom: 1px solid var(--m-line);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .m-burger {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
  }

  /* Frameless top bar icons: sharp lines with a delicate neon glow that brightens on tap. */
  .m-burger span {
    display: block;
    height: 2px;
    border-radius: 0;
    background: #cfe6f2;
    box-shadow: 0 0 5px rgba(0, 226, 255, 0.4);
    transition: transform 0.25s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  }

  .m-burger:active span {
    box-shadow: 0 0 9px rgba(0, 226, 255, 0.8);
  }

  .m-nav-open .m-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .m-nav-open .m-burger span:nth-child(2) {
    opacity: 0;
  }

  .m-nav-open .m-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .m-brand {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    /* Engraved MU capitals (Cinzel renders lowercase as small caps) in pale silver with a light neon halo. */
    font: 700 18px/1 var(--m-game-font);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    color: #e3ebf4;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.45), 0 0 14px rgba(0, 174, 255, 0.22);
    white-space: nowrap;
  }

  /* "Online" keeps the title colour; only its glow slowly pulses in the Excellent-item green, so the title never shifts. */
  .m-brand b {
    color: inherit;
    font-weight: inherit;
    animation: m-brand-flicker 4.5s ease-in-out infinite;
  }

  .m-account-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 40%;
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #cfe6f2;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.35);
  }

  .m-account-btn svg {
    filter: drop-shadow(0 0 3px rgba(0, 226, 255, 0.45));
    transition: filter 0.2s ease;
  }

  .m-account-btn:active {
    text-shadow: 0 0 9px rgba(0, 226, 255, 0.75);
  }

  .m-account-btn:active svg {
    filter: drop-shadow(0 0 6px rgba(0, 226, 255, 0.85));
  }

  .m-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  /* Language switch before the account button: the two-letter code opens a list with the native names
     (mobile.js toggles .is-open on [data-d-drop], as for the desktop drop-downs). */
  .m-lang {
    position: relative;
    flex: 0 0 auto;
  }

  .m-lang-btn {
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #cfe6f2;
    font: 700 13px/1 var(--m-game-font);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.35);
    cursor: pointer;
  }

  .m-lang-btn:active,
  .m-lang.is-open .m-lang-btn {
    text-shadow: 0 0 9px rgba(0, 226, 255, 0.75);
  }

  .m-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10020;
    width: 180px;
    border: 1px solid var(--m-line);
    background: rgba(8, 11, 20, 0.97);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
  }

  .m-lang.is-open .m-lang-menu {
    display: block;
  }

  .m-lang-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid var(--m-line);
    border-radius: 0;
    background: none;
    color: #cfe6f2;
    text-align: left;
  }

  .m-lang-opt:last-child {
    border-bottom: 0;
  }

  .m-lang-opt b {
    flex: 0 0 26px;
    font: 700 13px/1 var(--m-game-font);
    letter-spacing: 0.1em;
  }

  .m-lang-opt span {
    font-size: 14px;
  }

  .m-lang-opt.is-active {
    background: rgba(0, 226, 255, 0.1);
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.6);
  }

  .m-account-btn svg,
  .m-tabbar svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Page frame
  ---------------------------------------------------------------------------*/
  /* The desktop page art (1600px city top/bottom and side texture) shows as stray bands on phones;
     the header keeps its own artwork. */
  body.m-ready {
    background-image: none;
  }

  .m-ready .body-t {
    background: none;
  }

  /* Guards against editor content wider than the screen (clip keeps fixed/sticky children working). */
  .m-ready .wrapper {
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* Header: the theme artwork stays as a backdrop; the logo and the Lottie animation are not shown on phones. */
  .m-ready .header {
    height: auto;
    min-height: 0;
    padding: 14px 12px 16px;
    background-size: cover;
    background-position: center top;
  }

  .m-ready .header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(8, 11, 20, 0.35) 0%, rgba(8, 11, 20, 0.82) 100%);
    pointer-events: none;
  }

  .m-ready lottie-player,
  .m-ready .logo {
    display: none;
  }

  .m-ready .m-desktop-only,
  .m-ready .wiki-popular-block,
  .m-ready .slider-block {
    display: none !important;
  }

  /* Hero: server dropdown on top, then top players (left) and top guild (right) on one level
  ---------------------------------------------------------------------------*/
  /* The hero spans the full screen width (cancels the header side padding); its bands have no side borders. */
  .m-ready .m-hero.is-filled {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 -12px;
  }

  .m-hero-row {
    display: flex;
    align-items: stretch;
    background: var(--m-band-edge) top / 100% 1px no-repeat, var(--m-band-edge) bottom / 100% 1px no-repeat, var(--m-band);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .m-hero-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  /* Thin vertical divider between top players and top guild, fading out at both ends. It lives in the guild
     content area under the title line, so it is centred vertically on the lists rather than on the whole band. */
  .m-hero-players:not(:empty) + .m-hero-guild #top_guilds:before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(0, 226, 255, 0), rgba(0, 226, 255, 0.6) 50%, rgba(0, 226, 255, 0));
    pointer-events: none;
  }

  .m-hero-servers:empty,
  .m-hero-col:empty {
    display: none;
  }

  .m-hero-col > * {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Section titles: a strip across the whole column; next to each other they form one continuous line
     from edge to edge, with a short bright segment under each title.
     .m-ready prefix: must outrank the generic ".m-ready .sidebar-title" rules further down. */
  .m-ready .m-hero .sidebar-title {
    position: relative;
    margin: 0 !important;
    padding: 12px 8px 10px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.16);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #c3cfde;
    -webkit-text-fill-color: currentColor;
    font: 400 12px/1.2 var(--m-game-font);
    font-variant: normal;
    letter-spacing: 0.24em;
    /* Balances the trailing letter spacing so the centred title stays centred. */
    text-indent: 0.24em;
    text-transform: uppercase;
    text-shadow: none;
    white-space: nowrap;
  }

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

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

  .m-hero br {
    display: none;
  }

  /* Top players: neon gold / silver / bronze. Each place is a step simpler than the one above:
     1st - running light on the frame, shimmer sweep, filled tag, gold gradient name;
     2nd - breathing frame, silver gradient name; 3rd - fainter, slower frame and a plain bronze name.
     The place colour comes from the hidden .top-N-player marker that precedes each row in the template. */
  .m-hero .top-players {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 12px;
  }

  .m-hero .top-1-player,
  .m-hero .top-2-player,
  .m-hero .top-3-player {
    display: none;
  }

  .m-hero .top-player,
  .m-hero .top-player:hover {
    --m-rank: 205, 222, 240;
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 8px 0 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(var(--m-rank), 0.12), rgba(var(--m-rank), 0) 85%);
    box-shadow: inset 2px 0 0 rgba(var(--m-rank), 0.85);
  }

  /* Frame: breathes slowly (opacity only, so it stays cheap to animate). */
  .m-hero .top-player:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(var(--m-rank), 0.3);
    box-shadow: inset 0 0 8px rgba(var(--m-rank), 0.1);
    pointer-events: none;
    animation: m-rank-breathe 5s ease-in-out infinite;
  }

  .m-hero .top-1-player + .top-player,
  .m-hero .top-1-player + .top-player:hover {
    --m-rank: 255, 196, 64;
    min-height: 46px;
    background: linear-gradient(90deg, rgba(var(--m-rank), 0.24), rgba(var(--m-rank), 0.05) 70%, rgba(var(--m-rank), 0));
    box-shadow: inset 3px 0 0 rgb(var(--m-rank)), inset 0 0 14px rgba(var(--m-rank), 0.14), 0 0 14px rgba(var(--m-rank), 0.22);
  }

  .m-hero .top-2-player + .top-player,
  .m-hero .top-2-player + .top-player:hover {
    --m-rank: 205, 222, 240;
    min-height: 42px;
    background: linear-gradient(90deg, rgba(var(--m-rank), 0.16), rgba(var(--m-rank), 0) 80%);
  }

  .m-hero .top-3-player + .top-player,
  .m-hero .top-3-player + .top-player:hover {
    --m-rank: 226, 138, 74;
  }

  .m-hero .top-2-player + .top-player:before {
    border-color: rgba(var(--m-rank), 0.45);
    box-shadow: inset 0 0 10px rgba(var(--m-rank), 0.14);
    animation-duration: 3.6s;
  }

  /* 1st place: a bright spot runs along a gradient frame (the mask keeps only the 1px border ring). */
  .m-hero .top-1-player + .top-player:before {
    padding: 1px;
    border: 0;
    box-shadow: none;
    background: linear-gradient(90deg, rgba(var(--m-rank), 0.45) 0%, rgba(var(--m-rank), 0.45) 38%, #fff4c8 50%, rgba(var(--m-rank), 0.45) 62%, rgba(var(--m-rank), 0.45) 100%);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: m-rank-run 3.2s linear infinite;
  }

  /* 1st place: a soft light sweep across the row. */
  .m-hero .top-1-player + .top-player:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(105deg, rgba(255, 236, 170, 0), rgba(255, 236, 170, 0.22) 50%, rgba(255, 236, 170, 0));
    transform: translateX(-120%);
    pointer-events: none;
    animation: m-rank-sweep 4.8s ease-in-out infinite;
  }

  .m-hero .top-player:active {
    background: linear-gradient(90deg, rgba(var(--m-rank), 0.3), rgba(var(--m-rank), 0) 90%);
  }

  .m-hero .top-player span {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  .m-hero .top-player span#num-1,
  .m-hero .top-player span#num-2,
  .m-hero .top-player span#num-3 {
    flex: 0 0 auto;
  }

  /* Replaces the theme's rank artwork with a text tag. */
  .m-hero .top-player span#num-1:after,
  .m-hero .top-player span#num-2:after,
  .m-hero .top-player span#num-3:after {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-width: 26px;
    padding: 4px 0;
    box-sizing: border-box;
    border: 1px solid rgba(var(--m-rank), 0.6);
    background: rgba(var(--m-rank), 0.1);
    box-shadow: 0 0 8px rgba(var(--m-rank), 0.25);
    color: rgb(var(--m-rank));
    font: 700 11px/1 ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 0 0 6px rgba(var(--m-rank), 0.9);
  }

  /* 1st place tag is filled with gold instead of outlined. */
  .m-hero .top-player span#num-1:after {
    content: "1";
    min-width: 28px;
    padding: 5px 0;
    border-color: #ffe9a6;
    background: linear-gradient(180deg, #fff0b8, rgb(var(--m-rank)));
    box-shadow: 0 0 10px rgba(var(--m-rank), 0.75);
    color: #2a1a00;
    text-shadow: none;
  }

  .m-hero .top-player span#num-2:after {
    content: "2";
  }

  .m-hero .top-player span#num-3:after {
    content: "3";
  }

  /* Names in the game's engraved capitals (Cinzel, Trajan-like). 3rd place keeps a plain colour with a soft glow;
     1st and 2nd use metal gradients, lit with drop-shadow because text-shadow would paint over gradient text. */
  .m-hero .top-player > span:last-child {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #f2c8a4;
    -webkit-text-fill-color: currentColor;
    font: 700 15px/1.25 var(--m-game-font);
    font-variant: normal;
    letter-spacing: 0.06em;
    text-align: left;
    text-shadow: 0 0 7px rgba(var(--m-rank), 0.6);
  }

  .m-hero .top-1-player + .top-player > span:last-child,
  .m-hero .top-2-player + .top-player > span:last-child {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
  }

  .m-hero .top-1-player + .top-player > span:last-child {
    font-size: 16px;
    background-image: linear-gradient(180deg, #fff8dc 15%, #ffd56a 55%, #e6a128 90%);
    filter: drop-shadow(0 0 5px rgba(var(--m-rank), 0.7));
  }

  .m-hero .top-2-player + .top-player > span:last-child {
    background-image: linear-gradient(180deg, #ffffff 15%, #dfe9f3 55%, #9fb1c4 90%);
    filter: drop-shadow(0 0 4px rgba(var(--m-rank), 0.5));
  }

  /* Class portrait in place of the place tag (sidebar_rank_players.ejs marks the span .has-class-icon); its frame takes
     the place colour. A player whose class has no portrait keeps the tag. */
  .m-hero .top-player span#num-1.has-class-icon:after,
  .m-hero .top-player span#num-2.has-class-icon:after,
  .m-hero .top-player span#num-3.has-class-icon:after {
    content: none;
  }

  /* Class portrait and guild emblem: 32px inside a 1px frame in the place colour. margin: 0 cancels the theme's
     ".top-player span img" offset (-3px below), which made the player rows 3px lower than the guild rows. */
  .m-hero .top-player-class,
  .m-hero .top-player .top-guild-emblem {
    display: block;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
    box-sizing: content-box;
    border: 1px solid rgba(var(--m-rank), 0.6);
    box-shadow: 0 0 8px rgba(var(--m-rank), 0.3);
  }

  .m-hero .top-1-player + .top-player .top-player-class,
  .m-hero .top-1-player + .top-player .top-guild-emblem {
    border-color: #ffe9a6;
    box-shadow: 0 0 10px rgba(var(--m-rank), 0.75);
  }

  /* Top guilds: the players' place rows with the guild emblem on the right. The emblem comes first in the markup
     (sidebar_rank_guilds.ejs), so the name stays the row's last span and takes the place colours. */
  .m-hero .top-player .top-guild-emblem {
    order: 2;
    background: rgba(var(--m-rank), 0.06);
  }

  /* The same space around every class portrait and guild emblem: 5px above, below and beside the 34px picture
     (beside: counted from the place bar, 2px wide; 3px on the 1st place), so all place rows are 44px high. */
  .m-hero .top-player,
  .m-hero .top-player:hover,
  .m-hero .top-1-player + .top-player,
  .m-hero .top-1-player + .top-player:hover,
  .m-hero .top-2-player + .top-player,
  .m-hero .top-2-player + .top-player:hover {
    min-height: 0;
    padding: 5px 10px 5px 7px;
  }

  .m-hero .top-1-player + .top-player,
  .m-hero .top-1-player + .top-player:hover {
    padding-left: 8px;
  }

  /* Guild rows mirror the player rows: the place bar, fill and light sweep come from the right (the emblem side),
     and the name is aligned to the emblem. */
  .m-hero .top-player.top-guild-row,
  .m-hero .top-player.top-guild-row:hover {
    padding: 5px 7px 5px 10px;
    background: linear-gradient(270deg, rgba(var(--m-rank), 0.12), rgba(var(--m-rank), 0) 85%);
    box-shadow: inset -2px 0 0 rgba(var(--m-rank), 0.85);
  }

  .m-hero .top-1-player + .top-player.top-guild-row,
  .m-hero .top-1-player + .top-player.top-guild-row:hover {
    padding-right: 8px;
    background: linear-gradient(270deg, rgba(var(--m-rank), 0.24), rgba(var(--m-rank), 0.05) 70%, rgba(var(--m-rank), 0));
    box-shadow: inset -3px 0 0 rgb(var(--m-rank)), inset 0 0 14px rgba(var(--m-rank), 0.14), 0 0 14px rgba(var(--m-rank), 0.22);
  }

  .m-hero .top-2-player + .top-player.top-guild-row,
  .m-hero .top-2-player + .top-player.top-guild-row:hover {
    background: linear-gradient(270deg, rgba(var(--m-rank), 0.16), rgba(var(--m-rank), 0) 80%);
  }

  .m-hero .top-player.top-guild-row:active {
    background: linear-gradient(270deg, rgba(var(--m-rank), 0.3), rgba(var(--m-rank), 0) 90%);
  }

  .m-hero .top-1-player + .top-player.top-guild-row:before {
    animation-direction: reverse;
  }

  .m-hero .top-1-player + .top-player.top-guild-row:after {
    right: 0;
    left: auto;
    background: linear-gradient(255deg, rgba(255, 236, 170, 0), rgba(255, 236, 170, 0.22) 50%, rgba(255, 236, 170, 0));
    transform: translateX(120%);
    animation-name: m-rank-sweep-mirror;
  }

  .m-hero .top-player.top-guild-row > span:last-child {
    text-align: right;
  }

  .m-hero .top-player .top-guild-emblem.is-empty {
    border-style: dashed;
    box-shadow: none;
    opacity: 0.6;
  }

  /* The emblem is requested at 96px (12px cells) and shown at a third; the theme's ".top-player span img" frame,
     glow and offset are dropped (the emblem box already has its frame). */
  .m-hero .top-player .top-guild-emblem img {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 0;
    box-shadow: none;
    image-rendering: pixelated;
  }

  /* Section titles open the rankings (Top guilds: rankings#guilds); the link covers the whole title strip.
     A translated title too long for its half of the screen ends with an ellipsis instead of running into the other. */
  .m-ready .m-hero .sidebar-title-link {
    display: block;
    margin: -12px -8px -10px;
    padding: 12px 8px 10px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
  }

  .m-ready .m-hero .sidebar-title-link:after {
    content: "\203A";
    margin-left: 0.4em;
    color: var(--m-accent);
    letter-spacing: 0;
  }

  .m-ready .m-hero .sidebar-title-link:active {
    color: var(--m-accent);
  }

  /* Realm facts above the server dropdown: tournament champion and castle owner of the realm on screen
     (view.header.php renders a set per realm; mobile.js shows the active server's one). */
  .m-hero-facts {
    background: var(--m-band-edge) top / 100% 1px no-repeat, var(--m-band-edge) bottom / 100% 1px no-repeat, var(--m-band);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .m-hero-fact-set {
    display: flex;
    margin: 0;
  }

  .m-hero-fact-set[hidden] {
    display: none;
  }

  .m-hero-fact {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 10px 11px;
    text-align: center;
  }

  .m-hero-fact + .m-hero-fact:before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(0, 226, 255, 0), rgba(0, 226, 255, 0.6) 50%, rgba(0, 226, 255, 0));
  }

  .m-hero-fact dt {
    margin: 0 0 5px;
    color: #9aa8c2;
    font: 400 10px/1.3 var(--m-game-font);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-transform: uppercase;
  }

  .m-hero-fact dd {
    margin: 0;
    overflow: hidden;
    color: #f2d488;
    font: 700 15px/1.3 var(--m-game-font);
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
    white-space: nowrap;
  }

  /* The label opens the matching page: Tournament champion the tournament page, Castle owner Server info. */
  .m-hero-fact dt a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .m-hero-fact dt a:after {
    content: "\203A";
    margin-left: 0.4em;
    color: var(--m-accent);
    letter-spacing: 0;
  }

  .m-hero-fact dt a:active {
    color: var(--m-accent);
  }

  /* Server dropdown: a full-width band showing only the active server; tapping it opens the list
     (mobile.js toggles .is-open). The theme artwork (187x60) is shown at its natural size, never upscaled;
     artwork, player count and chevron stay grouped in a centred 268px area. */
  .m-hero-servers {
    position: relative;
    z-index: 20;
    min-height: 64px;
    background: var(--m-band-edge) top / 100% 1px no-repeat, var(--m-band-edge) bottom / 100% 1px no-repeat, var(--m-band);
  }

  .m-ready .m-hero .server-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .m-ready .m-hero .server-block.is-open {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: var(--m-band-edge) top / 100% 1px no-repeat, var(--m-band-edge) bottom / 100% 1px no-repeat, rgba(6, 9, 18, 0.97);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
  }

  .m-ready .m-hero .server {
    position: relative;
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 max(0px, calc(50% - 134px));
    /* Whole-pixel padding keeps the artwork on the pixel grid (a .5px offset on odd screen widths resamples it);
       browsers without round() keep the declaration above. */
    padding: 0 max(0px, round(down, calc(50% - 134px), 1px));
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-origin: content-box;
    background-position: 10px center;
    background-size: 187px 60px;
    opacity: 0.75 !important;
    transition: background-color 0.2s ease;
  }

  /* Dense screens get @3x copies (561x180) of the 187x60 server artwork, drawn at 187x60, so the text in it stays sharp.
     All three themes load these files from ../images/, so the paths do not depend on the theme. */
  .m-ready .m-hero .server-1 {
    background-image: url(../images/server-status-bg-1.png);
    background-image: -webkit-image-set(url(../images/server-status-bg-1.png) 1x, url(../images/server-status-bg-1@3x.png) 3x);
    background-image: image-set(url(../images/server-status-bg-1.png) 1x, url(../images/server-status-bg-1@3x.png) 3x);
  }

  .m-ready .m-hero .server-2 {
    background-image: url(../images/server-status-bg-2.png);
    background-image: -webkit-image-set(url(../images/server-status-bg-2.png) 1x, url(../images/server-status-bg-2@3x.png) 3x);
    background-image: image-set(url(../images/server-status-bg-2.png) 1x, url(../images/server-status-bg-2@3x.png) 3x);
  }

  .m-ready .m-hero .server-3 {
    background-image: url(../images/server-status-bg-3.png);
    background-image: -webkit-image-set(url(../images/server-status-bg-3.png) 1x, url(../images/server-status-bg-3@3x.png) 3x);
    background-image: image-set(url(../images/server-status-bg-3.png) 1x, url(../images/server-status-bg-3@3x.png) 3x);
  }

  .m-ready .m-hero .server.is-active,
  .m-ready .m-hero .server-block.is-open .server {
    display: block;
  }

  .m-ready .m-hero .server.is-active {
    order: -1;
    opacity: 1 !important;
  }

  /* Open list: the active server is tinted, the others are separated by faint lines. */
  .m-ready .m-hero .server-block.is-open .server.is-active {
    background-color: rgba(0, 226, 255, 0.07);
  }

  .m-ready .m-hero .server-block.is-open .server:not(.is-active) {
    box-shadow: inset 0 1px 0 rgba(116, 136, 190, 0.14);
  }

  .m-ready .m-hero .server:active {
    opacity: 1 !important;
  }

  /* Chevron on the active server shows that it opens a list. */
  .m-ready .m-hero .server.is-active:after {
    content: "";
    position: absolute;
    top: 50%;
    right: max(16px, calc(50% - 118px));
    width: 8px;
    height: 8px;
    margin-top: -7px;
    border-right: 2px solid var(--m-accent);
    border-bottom: 2px solid var(--m-accent);
    transform: rotate(45deg);
    transition: transform 0.2s ease, margin-top 0.2s ease;
    pointer-events: none;
  }

  .m-ready .m-hero .server-block.is-open .server.is-active:after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }

  .m-ready .m-hero .server .title-server {
    margin: 0;
    padding: 0 42px 0 0;
    line-height: 64px;
    font-size: 26px;
    text-align: right;
  }

  /* Top guilds: a list of place rows like the top players (.m-hero .top-players); the list is the anchor of the
     divider between the two columns. */
  .m-ready .m-hero .castle-block {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .m-ready .m-hero #top_guilds {
    position: relative;
    flex: 1 1 auto;
  }

  .m-ready .container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-image: none;
  }

  .m-ready .content,
  .m-ready #content {
    order: 1;
    width: auto;
    padding: 0 14px 24px;
    font-size: 14px;
    line-height: 1.45;
  }

  .m-ready .content img,
  .m-ready #content img {
    max-width: 100%;
    height: auto;
  }

  .m-ready .right-sidebar {
    order: 2;
    width: auto;
    padding: 8px 14px 0;
  }

  /* Sheets: the wiki search ("Wiki" tab) and the event schedule ("Events" tab)
     open as edge-to-edge panels above the tab bar. */
  .m-ready .wiki-search-block,
  .m-ready .m-events-sheet {
    display: block;
    position: fixed;
    top: auto;
    right: 0;
    bottom: calc(var(--m-tab) + var(--m-safe-bottom));
    left: 0;
    z-index: 10005;
    width: auto;
    max-height: calc(100vh - var(--m-top) - var(--m-tab) - var(--m-safe-top) - var(--m-safe-bottom));
    margin: 0;
    padding: 18px 16px 16px;
    border: 0;
    border-top: 1px solid rgba(0, 226, 255, 0.35);
    border-radius: 0;
    background: rgba(9, 13, 25, 0.98);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .m-ready.m-wiki-open .wiki-search-block,
  .m-ready.m-events-open .m-events-sheet {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
  }

  /* Keyboard open (mobile.js sets --m-kb / --m-vvh from visualViewport): the wiki sheet rides on top of the
     keyboard instead of staying behind it with the tab bar. */
  .m-ready.m-kb-open .wiki-search-block {
    bottom: var(--m-kb);
    max-height: calc(var(--m-vvh) - 8px);
    padding-top: 12px;
  }

  body.m-ready.m-wiki-open,
  body.m-ready.m-events-open {
    overflow: hidden;
  }

  .m-ready.m-wiki-open .m-backdrop,
  .m-ready.m-events-open .m-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0s;
  }

  /* Wiki sheet content (view.right_sidebar.php .wiki-search-block, wiki.css is the old floating box): the event
     sheet's lit title and engraved hint, the site's neon fields and the login form's neon button. */
  .m-ready .wiki-search-block .wiki-sidebar-title {
    position: relative;
    margin: 0 -16px 10px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--m-neon-line);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    font: 400 13px/1.3 var(--m-game-font);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-transform: uppercase;
  }

  .m-ready .wiki-search-block .wiki-sidebar-title:first-letter {
    font-size: inherit;
  }

  .m-ready .wiki-search-block .wiki-sidebar-title:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: var(--m-accent);
    box-shadow: 0 0 8px var(--m-accent);
  }

  .m-ready .wiki-search-block .wiki-sidebar-title a {
    color: #dff6ff;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.5);
  }

  .m-ready .wiki-search-description {
    margin: 0 0 16px;
    color: #7f8ca6;
    font: 400 11px/1.4 var(--m-game-font);
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
  }

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

  .m-ready .wiki-search-input,
  .m-ready .wiki-search-language {
    height: 44px;
    border: 1px solid rgba(0, 226, 255, 0.22);
    border-radius: 0;
    background-color: rgba(4, 8, 18, 0.55);
    box-shadow: inset 0 0 8px rgba(0, 226, 255, 0.04);
    color: #e6eef7;
    font: 16px var(--m-neon-font);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* The native arrow is replaced by the neon chevron of the site's selects. */
  .m-ready .wiki-search-language {
    -webkit-appearance: none;
    appearance: none;
    margin: 0 0 12px;
    padding: 0 42px 0 14px;
    background-image: linear-gradient(45deg, transparent 50%, var(--m-accent) 50%), linear-gradient(135deg, var(--m-accent) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .m-ready .wiki-search-language option {
    background: #0c1122;
    color: #e6eef7;
  }

  .m-ready .wiki-search-input {
    padding: 0 14px;
  }

  .m-ready .wiki-search-input::placeholder {
    color: rgba(150, 170, 205, 0.42);
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .m-ready .wiki-search-language:focus,
  .m-ready .wiki-search-input:focus {
    outline: none;
    border-color: rgba(0, 226, 255, 0.55);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.18), inset 0 0 8px rgba(0, 226, 255, 0.06);
  }

  .m-ready .wiki-search-control button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(0, 226, 255, 0.38);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
    color: #dffaff;
    font: 600 13px/1 var(--m-neon-font);
    letter-spacing: 0.16em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }

  .m-ready .wiki-search-control button:hover,
  .m-ready .wiki-search-control button:focus {
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
  }

  .m-ready .wiki-search-control button:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

  .m-ready .wiki-search-control button:focus-visible {
    outline: 1px solid var(--m-accent);
    outline-offset: 3px;
  }

  .m-ready .wiki-search-status {
    min-height: 0;
    padding-top: 8px;
    color: var(--m-text-dim);
    font: 12px/1.4 var(--m-neon-font);
  }

  .m-ready .wiki-search-status:empty {
    padding-top: 0;
  }

  .m-ready .wiki-search-results {
    margin-top: 6px;
    border-top-color: var(--m-neon-line);
  }

  .m-ready .wiki-search-result {
    padding: 11px 2px;
    border-bottom-color: var(--m-line);
    -webkit-tap-highlight-color: transparent;
  }

  .m-ready .wiki-search-result:active {
    background: rgba(0, 226, 255, 0.08);
  }

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

  .m-ready .wiki-search-result-snippet {
    padding-top: 4px;
    color: var(--m-text-dim);
    font: 12px/1.4 var(--m-neon-font);
  }

  .m-ready .wiki-browse-all {
    margin-top: 14px;
    padding: 6px 0;
    color: var(--m-accent);
    font: 400 11px/1.3 var(--m-game-font);
    letter-spacing: 0.14em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .m-ready .wiki-browse-all:after {
    content: " \203A";
  }

  /* Event schedule sheet (the left sidebar's events block is moved into .m-events-list by mobile.js)
  ---------------------------------------------------------------------------*/
  .m-ready .m-events-sheet {
    padding: 14px 0 6px;
  }

  .m-events-head {
    padding: 0 16px 10px;
    text-align: center;
  }

  /* Sheet title: the lit strip of the Server info titles. */
  .m-ready .m-events-head .sidebar-title {
    position: relative;
    margin: 0 -16px 10px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--m-neon-line);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #dff6ff;
    -webkit-text-fill-color: currentColor;
    font: 400 13px/1.3 var(--m-game-font);
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.5);
    text-transform: uppercase;
  }

  .m-ready .m-events-head .sidebar-title:first-letter {
    font-size: inherit;
  }

  .m-ready .m-events-head .sidebar-title:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: var(--m-accent);
    box-shadow: 0 0 8px var(--m-accent);
  }

  .m-events-hint {
    color: #7f8ca6;
    font: 400 11px/1.4 var(--m-game-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* The moved block brings its own "Events" title; the sheet header already names it. */
  .m-events-list .top-players {
    margin: 0;
  }

  .m-events-list .top-sidebar-title {
    display: none;
  }

  .m-events-list #events > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    margin: 0;
    padding: 6px 16px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    font-size: 15px;
  }

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

  .m-events-list #events .event-wiki-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
  }

  .m-events-list #events > div > span,
  .m-events-list #events .event-name {
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e6eef7;
    font: 700 14px/1.3 var(--m-game-font);
    letter-spacing: 0.04em;
  }

  /* Events with a wiki guide get an outbound-link mark; the desktop hover hint is not used on touch. */
  .m-events-list #events .event-name:after {
    content: " \2197";
    color: var(--m-accent);
    font-size: 12px;
  }

  /* The start time (app.js) is for the desktop timeline; the sheet shows the countdown chip only. */
  .m-events-list #events .event-wiki-hint,
  .m-events-list #events .event-start {
    display: none;
  }

  .m-events-list #events small {
    float: none;
    flex: 0 0 auto;
    width: auto;
    padding: 6px 10px;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: rgba(0, 226, 255, 0.06);
    box-shadow: 0 0 8px rgba(0, 226, 255, 0.1);
    color: #8ff3ff;
    font: 700 12px/1.2 var(--m-game-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-align: right;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.5);
    opacity: 1 !important;
  }

  .m-events-list #events > div.is-soon small {
    border-color: rgba(255, 196, 64, 0.6);
    background: rgba(255, 196, 64, 0.1);
    box-shadow: 0 0 8px rgba(255, 196, 64, 0.2);
    color: var(--m-gold-text);
    text-shadow: 0 0 6px rgba(255, 196, 64, 0.5);
  }

  /* Pin checkbox: custom box, the native input stays for accessibility. */
  .m-ready .m-event-pin {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }

  .m-event-pin input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .m-event-pin i {
    display: block;
    width: 22px;
    height: 22px;
    margin: 2px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.4);
    border-radius: 0;
    background: rgba(0, 226, 255, 0.04);
    box-shadow: inset 0 0 6px rgba(0, 226, 255, 0.1);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .m-event-pin input:checked + i {
    border-color: var(--m-accent);
    background: rgba(0, 226, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 226, 255, 0.45);
  }

  .m-event-pin input:checked + i:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    margin: 3px 0 0 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
  }

  .m-event-pin input:focus-visible + i {
    outline: 2px solid var(--m-accent);
    outline-offset: 2px;
  }

  /* Pinned events bar: always visible above the tab bar while at least one event is ticked. */
  .m-ready .m-pinned-events {
    position: fixed;
    right: 0;
    bottom: calc(var(--m-tab) + var(--m-safe-bottom));
    left: 0;
    z-index: 10003;
    gap: 6px;
    height: var(--m-pins);
    padding: 0 10px;
    box-sizing: border-box;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(8, 11, 20, 0.92);
    border-top: 1px solid var(--m-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .m-ready.m-has-pins .m-pinned-events {
    display: flex;
  }

  .m-pinned-event {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 4px 0 12px;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-strip);
    box-shadow: 0 0 8px rgba(0, 226, 255, 0.1);
    color: #e6eef7;
    font: 700 12px/1 var(--m-game-font);
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  .m-pinned-time {
    padding: 5px 8px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.35);
    color: #8ff3ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.5);
  }

  .m-pinned-event.is-soon {
    border-color: rgba(255, 196, 64, 0.6);
    background: linear-gradient(180deg, rgba(255, 196, 64, 0.1), rgba(255, 196, 64, 0.02));
  }

  .m-pinned-event.is-soon .m-pinned-time {
    color: var(--m-gold-text);
    text-shadow: 0 0 6px rgba(255, 196, 64, 0.5);
  }

  .m-ready .sidebar-title {
    font-size: 15px;
  }

  .m-ready .sidebar-title:first-letter {
    font-size: 19px;
  }

  /* Drawer: the existing left sidebar (menu, plugins, top players, events)
  ---------------------------------------------------------------------------*/
  .m-ready .left-sidebar {
    position: fixed;
    top: calc(var(--m-top) + var(--m-safe-top));
    bottom: calc(var(--m-tab) + var(--m-safe-bottom));
    left: 0;
    z-index: 10005;
    width: 84vw;
    max-width: 330px;
    padding: 12px 16px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(9, 13, 25, 0.97);
    border-right: 1px solid var(--m-line);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.55);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }

  .m-ready.m-nav-open .left-sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s ease, visibility 0s;
  }

  .m-ready .m-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10004;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  }

  .m-ready.m-nav-open .m-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0s;
  }

  .m-ready .menu {
    height: auto;
    margin: 0 0 24px;
    padding: 0;
    background: none;
  }

  .m-ready .menu ul {
    margin: 0;
    padding: 0;
  }

  .m-ready .menu li {
    padding: 0;
  }

  .m-ready .menu li a,
  .m-ready .menu li a:hover,
  .m-ready .menu .active a {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--m-line);
  }

  .m-ready .menu li a:active {
    background: rgba(0, 226, 255, 0.08);
    color: var(--m-accent);
  }

  .m-ready .menu .cursor-menu {
    display: none;
  }

  /* Under the menu (view.left_sidebar.php): the contact form button, then Discord and Telegram side by side,
     as at the bottom of the desktop "Choose your realm" panel. */
  .m-ready .m-nav-extra {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
  }

  /* The drawer is a column so these buttons sit at its bottom, below everything else in it; when the menu is taller
     than the drawer they simply follow it. Nothing shrinks: the drawer scrolls instead. */
  .m-ready .left-sidebar {
    display: flex;
    flex-direction: column;
  }

  .m-ready .left-sidebar > * {
    flex-shrink: 0;
  }

  .m-ready .left-sidebar > .m-nav-extra {
    order: 1;
    margin-top: auto;
  }

  .m-ready .m-nav-social {
    display: flex;
    gap: 10px;
  }

  .m-ready .m-contact-btn,
  .m-ready .m-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.24);
    border-radius: 0;
    background: var(--m-corners), rgba(9, 13, 25, 0.7);
    background-origin: border-box;
    color: #dff6ff;
    font: 700 12px/1 var(--m-game-font);
    letter-spacing: 0.16em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.6);
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-ready .m-contact-btn {
    width: 100%;
  }

  .m-ready .m-social {
    flex: 1 1 0;
  }

  .m-ready .m-contact-btn svg,
  .m-ready .m-social svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 6px rgba(0, 226, 255, 0.6));
  }

  .m-ready .m-contact-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }

  .m-ready .m-social svg {
    fill: currentColor;
  }

  .m-ready .m-contact-btn:active,
  .m-ready .m-social:active {
    border-color: rgba(0, 226, 255, 0.6);
    background-color: rgba(0, 226, 255, 0.14);
  }

  .m-ready .market-block,
  .m-ready .left-sidebar .top-players {
    height: auto;
    margin-bottom: 24px;
  }

  .m-ready .top-players td {
    padding: 8px 7px;
  }

  .m-ready .top-players td a {
    width: auto;
    max-width: 150px;
  }

  .m-ready .left-sidebar > div[style] {
    margin: 0 0 24px !important;
  }

  /* Bottom tab bar
  ---------------------------------------------------------------------------*/
  .m-ready .m-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10006;
    display: flex;
    height: var(--m-tab);
    padding-bottom: var(--m-safe-bottom);
    background: rgba(8, 11, 20, 0.92);
    border-top: 1px solid var(--m-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .m-tabbar a,
  .m-tabbar button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--m-text-dim);
    font: 11px/1.1 Arial, Helvetica, sans-serif;
    cursor: pointer;
  }

  .m-tabbar span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m-tabbar .is-active,
  .m-tabbar a:active,
  .m-tabbar button:active,
  .m-nav-open .m-tabbar [data-m-nav-toggle],
  .m-wiki-open .m-tabbar [data-m-wiki-toggle],
  .m-events-open .m-tabbar [data-m-events-toggle] {
    color: var(--m-accent);
  }

  .m-tabbar .is-active svg {
    filter: drop-shadow(0 0 6px rgba(0, 226, 255, 0.6));
  }

  /* Footer
  ---------------------------------------------------------------------------*/
  /* The space reserved for the fixed tab bar is added to the body, below the whole page. */
  body.m-ready {
    padding-bottom: calc(var(--m-tab) + var(--m-safe-bottom) + 12px);
  }

  body.m-ready.m-has-pins {
    padding-bottom: calc(var(--m-tab) + var(--m-pins) + var(--m-safe-bottom) + 12px);
  }

  .m-ready .footer {
    height: auto;
    padding: 24px 14px 0;
  }

  /* Copyright block: small centred Georgia text pulsing between neon cyan and gold. */
  .m-ready .footer-legal {
    padding: 12px 16px;
    color: #00e2ff;
    font: 11px/1.6 Georgia, serif;
    letter-spacing: 0.5px;
    text-align: center;
    animation: m-legal-glow 5s ease-in-out infinite;
  }

  /* Guest login form (view.top_content.php)
  ---------------------------------------------------------------------------*/
  /* Sharp-cornered panel: a faint outline (inset shadow) and the neon corner marks (--m-corners). */
  .m-ready .login-block {
    width: auto;
    height: auto;
    margin: 16px 0 20px;
    padding: 14px;
    border: 0;
    border-radius: 0;
    background: var(--m-corners), var(--m-panel);
    box-shadow: inset 0 0 0 1px rgba(116, 136, 190, 0.14), 0 0 18px rgba(0, 226, 255, 0.05);
  }

  .m-ready #login_form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    scroll-margin-top: calc(var(--m-top) + var(--m-safe-top) + 16px);
  }

  .m-ready .login-block input {
    flex: 1 1 140px;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(116, 136, 190, 0.16);
    border-radius: 0;
    background: rgba(4, 8, 18, 0.35);
    color: #c9d3e6;
    font-size: 16px;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* Overrides the theme's bright animated placeholder (style.css "place holder login"). */
  .m-ready #login_input::placeholder,
  .m-ready #password_input::placeholder {
    color: rgba(150, 170, 205, 0.42);
    font-size: 13px;
    letter-spacing: 0.14em;
    animation: none;
  }

  .m-ready .login-block input:focus {
    outline: none;
    border-color: rgba(0, 226, 255, 0.45);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.12), inset 0 0 8px rgba(0, 226, 255, 0.06);
  }

  /* Browser autofill paints a light background; a large inset shadow keeps the field dark.
     The long background transition stops Chrome's own colour from flashing in. */
  .m-ready .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: #c9d3e6;
    caret-color: #c9d3e6;
    transition: background-color 9999s ease-out 0s;
  }

  .m-ready .login-block input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 100px #070b16, 0 0 10px rgba(0, 226, 255, 0.12);
    box-shadow: inset 0 0 0 100px #070b16, 0 0 10px rgba(0, 226, 255, 0.12);
  }

  /* Neon text button with HUD corner brackets instead of the theme's login icon.
     The #login_form id outranks the generic ".content form button[type=submit]" rule. */
  .m-ready .login-block #login_form button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(0, 226, 255, 0.38);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
    color: #dffaff;
    font: 600 14px/1 var(--m-neon-font);
    letter-spacing: 0.32em;
    /* The label balances its letter spacing itself (.m-login-label); the shared form button indent does not apply. */
    text-indent: 0;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .login-block #login_form button:before,
  .m-ready .login-block #login_form button:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid var(--m-accent);
    filter: drop-shadow(0 0 3px var(--m-accent));
    pointer-events: none;
  }

  .m-ready .login-block #login_form button:before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  .m-ready .login-block #login_form button:after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .m-ready .login-block #login_form button:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

  .m-ready .login-block #login_form button:focus-visible {
    outline: 1px solid var(--m-accent);
    outline-offset: 3px;
  }

  /* The label is hidden on desktop by .m-mobile-only; the left padding balances the trailing letter spacing. */
  .m-ready .login-block .m-login-label {
    display: inline !important;
    padding-left: 0.32em;
  }

  /* Recovery and registration links under the form; hidden on desktop by .m-mobile-only. */
  .m-ready .login-block .m-login-links {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 14px;
  }

  .m-ready .login-block .m-login-links a {
    padding: 4px 0;
    color: var(--m-accent);
    text-decoration: none;
  }

  .m-ready .login-block .m-login-links a:active {
    text-decoration: underline;
  }

  /* Targets of those links (mobile.js): the form stops below the sticky top bar. */
  .m-ready #lostpassword_form,
  .m-ready #registration_form {
    scroll-margin-top: calc(var(--m-top) + var(--m-safe-top) + 12px);
  }

  /* Player card (view.top_content.php, logged in)
     Grid: name + server | logout, then Emeralds - Diamonds - Rubies, then the account panel toggle centered at the bottom.
     The text starts at the card's left edge, in line with the first currency pill.
     The nested .riwel > ul > div wrappers are flattened with display: contents so their items join the grid.
  ---------------------------------------------------------------------------*/
  .m-ready .m-player-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "welcome logout"
      "server  logout"
      "money   money"
      "toggle  toggle";
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    padding: 14px !important;
    margin-bottom: 16px !important;
    border-color: var(--m-neon-line) !important;
    border-radius: 0 !important;
    background: var(--m-corners), var(--m-neon-fill) !important;
    background-origin: border-box !important;
    box-shadow: var(--m-neon-glow);
  }

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

  .m-ready .m-player-card .riwel,
  .m-ready .m-player-card .riwel ul,
  .m-ready .m-player-card .riwel ul > div {
    display: contents;
  }

  /* "Open Account Panel" becomes a dropdown-style toggle: a 2:1 tappable box with a down triangle,
     centered under the currencies. The avatar is hidden; the caption stays for screen readers. */
  .m-ready .m-player-card .leftwel {
    grid-area: toggle;
    justify-self: center;
    float: none;
    width: 64px;
    margin-top: 10px;
  }

  .m-ready .m-player-card .leftwel a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 64px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.38);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
  }

  .m-ready .m-player-card .leftwel a:after {
    content: "";
    width: 0;
    height: 0;
    margin-top: 3px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--m-accent);
  }

  .m-ready .m-player-card .leftwel a:active {
    transform: scale(0.94);
    background: rgba(0, 226, 255, 0.22);
  }

  .m-ready .m-player-card .avatar_frame {
    display: none;
  }

  .m-ready .m-player-card .avatar-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  /* Welcome / server lines in the engraved capitals; the account and server names in gold. */
  .m-ready .m-player-card .riwel ul li {
    margin: 0;
    padding: 0;
    color: var(--m-label);
    font: 700 12px/1.5 var(--m-game-font);
    font-variant: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-ready .m-player-card .riwel ul > div > li > span {
    color: var(--m-gold-text);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
  }

  .m-ready .m-player-card .riwel ul > div > li:nth-child(1) {
    grid-area: welcome;
    align-self: end;
  }

  .m-ready .m-player-card .riwel ul > div > li:nth-child(2) {
    grid-area: server;
    align-self: start;
  }

  .m-ready .m-player-card li.Diamonds {
    grid-area: money;
    display: flex;
    gap: 8px;
    margin-top: 11px !important;
  }

  /* Balances: each frame in its currency's colour (--cur: Emeralds green, Diamonds blue, Rubies red); the currency
     icon (the link, after the number in the markup) is moved to the left into its own closed frame, the number
     follows it on the icon's centre line. */
  .m-ready .votewrap {
    --cur: 52, 224, 138;
  }

  .m-ready .diamondwrap {
    --cur: 95, 205, 255;
  }

  .m-ready .goblinwrap {
    --cur: 255, 77, 109;
  }

  .m-ready .votewrap,
  .m-ready .diamondwrap,
  .m-ready .goblinwrap {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 3px;
    border: 1px solid rgba(var(--cur), 0.55);
    border-radius: 0;
    background: rgba(var(--cur), 0.06);
    box-shadow: 0 0 10px rgba(var(--cur), 0.12), inset 0 0 8px rgba(var(--cur), 0.06);
  }

  .m-ready li.Diamonds a {
    order: -1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid rgba(var(--cur), 0.7);
    background: rgba(var(--cur), 0.12);
  }

  .m-ready li.Diamonds #my_credits {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
  }

  .m-ready .Diamonds p {
    display: block;
    margin: 0;
    overflow: hidden;
    color: #e6eef7;
    font: 700 14px/30px var(--m-game-font);
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  .m-ready .diamondwrap img,
  .m-ready .votewrap img,
  .m-ready .goblinwrap img {
    position: static;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    top: 0;
    object-fit: contain;
  }

  .m-ready .m-player-card li.logoutbtn {
    grid-area: logout;
    position: static;
    align-self: start;
  }

  .m-ready .btn-profile-logout-position {
    position: static;
    opacity: 1;
  }

  .m-ready .btn-profile-logout-position a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 226, 255, 0.3);
    border-radius: 0;
    background: rgba(9, 13, 25, 0.8);
    color: var(--m-text);
  }

  .m-ready .btn-profile-logout-position a:active {
    background-color: rgba(0, 226, 255, 0.14);
    color: #dff6ff;
  }

  /* Server switch: two opposite arrows right after the server name, on the letters' baseline; the 7px padding
     (cancelled by the negative margins) gives a finger-sized tap area without moving the icon. */
  .m-ready .m-server-switch {
    display: inline-block;
    padding: 7px;
    margin: -7px -7px -7px -8px;
    vertical-align: -2px;
    background: none;
    color: #8ff3ff;
    cursor: pointer;
  }

  /* The arrows never wrap away from the server name. */
  .m-ready .m-player-card .riwel li > span {
    white-space: nowrap;
  }

  .m-ready .m-server-switch svg,
  .m-ready .m-logout-icon {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(0, 226, 255, 0.6));
  }

  .m-ready .m-logout-icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
  }

  /* Server selector modal (view.footer.php, opened by leanModal with inline top/left/margin).
     It opens at --m-modal-top, the same height as the login / notice messages below, so the success message
     after choosing a server appears exactly where the player is already looking. */
  .m-ready #select_server {
    width: 92vw !important;
    max-width: 400px;
    top: var(--m-modal-top) !important;
    left: 50% !important;
    margin-left: 0 !important;
    padding: 0 0 16px;
    transform: translateX(-50%);
    box-sizing: border-box;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), rgba(9, 13, 25, 0.97);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow), 0 14px 30px rgba(0, 0, 0, 0.65);
    color: #e6eef7;
  }

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

  .m-ready #select_server .modal-header:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: var(--m-accent);
    box-shadow: 0 0 8px var(--m-accent);
  }

  .m-ready #select_server .modal-header h2 {
    margin: 0;
    padding: 15px 48px 13px;
    color: #dff6ff;
    font: 400 13px/1.3 var(--m-game-font);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.5);
    text-transform: uppercase;
  }

  /* Close: a thin neon cross with a finger-sized tap area instead of the theme's 14px icon. */
  .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: 0 0 0 -8px;
    background: var(--m-accent);
    box-shadow: 0 0 6px var(--m-accent);
    transform: rotate(45deg);
  }

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

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

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

  .m-ready #select_server select {
    width: 100%;
  }

  /* Messages (App.notice in app.js: login, server change, saves, rewards). Desktop shows them in the bottom-right
     corner, which on phones is under the tab bar; here they open at --m-modal-top, over the server window. */
  .m-ready #notifier-box {
    top: var(--m-modal-top);
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 11001;
    width: 92vw;
    max-width: 400px;
    transform: translateX(-50%);
  }

  .m-ready #notifier-box div.message-box {
    position: relative;
    box-sizing: border-box;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), rgba(9, 13, 25, 0.97);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow), 0 14px 30px rgba(0, 0, 0, 0.65);
    color: #e6eef7;
    font: 400 14px/1.5 var(--m-game-font);
    letter-spacing: 0.03em;
    text-align: center;
  }

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

  .m-ready #notifier-box div.message-box div.error {
    border-bottom-color: rgba(255, 196, 64, 0.3);
    background: linear-gradient(180deg, rgba(255, 196, 64, 0.09), rgba(255, 196, 64, 0.02));
    color: var(--m-gold-text);
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
  }

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

  .m-ready #notifier-box div.message-box a.message-close {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    width: 44px;
    height: 44px;
    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: var(--m-accent);
    box-shadow: 0 0 6px var(--m-accent);
    transform: rotate(45deg);
  }

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

  /* Right sidebar blocks (servers and top guild are moved into the hero by mobile.js)
  ---------------------------------------------------------------------------*/
  .m-ready .right-sidebar > div[style] {
    margin: 0 0 24px !important;
  }

  .m-ready .themes .themes-title {
    padding: 6px 0;
    font-size: 14px;
  }

  /* Home: news feed
  ---------------------------------------------------------------------------*/
  /* Each article is a Server info panel: neon frame with corner marks, the headline in a lit strip,
     text in the engraved capitals and a neon "read more" button. */
  .m-page-home .news {
    margin-bottom: 20px;
    padding: 0;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    color: #e6eef7;
    overflow-wrap: break-word;
  }

  .m-page-home .news:before {
    display: none;
  }

  .m-page-home .news .news-title {
    position: relative;
    padding: 14px 16px 13px;
    border-bottom: 1px solid var(--m-neon-line);
    background: var(--m-strip);
    text-align: center;
  }

  .m-page-home .news .news-title:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: var(--m-accent);
    box-shadow: 0 0 8px var(--m-accent);
  }

  .m-page-home .news .news-title span {
    float: none;
    display: block;
    margin-bottom: 6px;
    color: #7f8ca6;
    font: 400 11px/1.3 var(--m-game-font);
    letter-spacing: 0.16em;
  }

  .m-page-home .news .news-title span b {
    color: #8ff3ff;
    font: 700 13px/1 var(--m-game-font);
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.6);
  }

  .m-page-home .news .news-title a {
    display: block;
    color: var(--m-gold-text);
    font: 700 17px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
  }

  .m-page-home .news .news-text {
    padding: 14px 16px 12px;
    color: var(--m-body-text);
    font: 400 15px/1.65 var(--m-game-font);
    letter-spacing: 0.02em;
  }

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

  .m-page-home .news .news-text a {
    border-bottom: 1px solid rgba(0, 226, 255, 0.35);
    color: var(--m-accent);
    text-decoration: none;
  }

  /* News bodies come from the CMS editor with fixed inline sizes (e.g. 500x220 images). */
  .m-page-home .news-text img,
  .m-page-home .news-text video {
    max-width: 100% !important;
    height: auto !important;
  }

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

  /* Footer row: author on the left, read more on the right, divided from the text by a faint line. */
  .m-page-home .news .news-info {
    display: flex;
    align-items: center;
    padding: 10px 16px 12px;
    border-top: 1px solid rgba(0, 226, 255, 0.09);
    color: #7f8ca6;
    font: 400 11px/1.3 var(--m-game-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* "by" is a bare text node, so the gap before the author name is a margin on the link. */
  .m-page-home .news .news-info a:not(.read-more) {
    margin-left: 0.5em;
    color: var(--m-label);
  }

  .m-page-home .news .news-info .read-more {
    order: 1;
    float: none;
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.38);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
    color: #dffaff;
    font: 700 11px/1 var(--m-game-font);
    letter-spacing: 0.2em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
  }

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

  .m-page-home .news .news-info .read-more:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

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

  /* Pagination (lib.pagination.php: #pagination links, a.on is the current page): sharp neon squares. */
  .m-ready .pagination,
  .m-ready #pagination {
    padding: 8px 0 16px;
  }

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

  .m-ready .pagination a,
  .m-ready .pagination .number,
  .m-ready #pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    width: auto;
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.22);
    border-radius: 0;
    background: rgba(0, 226, 255, 0.04);
    color: var(--m-label);
    font: 700 13px/1 var(--m-game-font);
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  .m-ready .pagination .active,
  .m-ready #pagination li a.on {
    border-color: rgba(0, 226, 255, 0.55);
    background: rgba(0, 226, 255, 0.14);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.3);
    color: #dffaff;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
  }

  /* Notes (.i_note info, .s_note success, .w_note warning, .e_note error): Server info panels with a lit left edge.
     These carry the page messages (rewards, saves, errors) rendered by the views. */
  .m-ready .i_note,
  .m-ready .e_note,
  .m-ready .w_note,
  .m-ready .s_note {
    --m-note: 0, 226, 255;
    width: auto;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 13px 16px;
    border: 1px solid rgba(var(--m-note), 0.3);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(var(--m-note), 0.1), rgba(var(--m-note), 0.02) 70%), rgba(9, 13, 25, 0.62);
    box-shadow: inset 2px 0 0 rgba(var(--m-note), 0.85), 0 0 14px rgba(var(--m-note), 0.1);
    color: #e6eef7;
    font: 400 14px/1.5 var(--m-game-font);
    letter-spacing: 0.03em;
    text-align: left;
  }

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

  .m-ready .w_note,
  .m-ready .e_note {
    --m-note: 255, 196, 64;
    color: var(--m-gold-text);
  }

  /* Daily reward notes above the rankings (js_templates/rank_players.ejs, rank_guilds.ejs) stay centred;
     each player reward tier gets its own line, so the commas between tiers and the desktop <br> are dropped. */
  .m-ready #rank_by_class .i_note {
    text-align: center;
  }

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

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

  /* Theme controls not restyled above (sidebar forms, legacy buttons, the loading badge) lose their rounded corners too. */
  .m-ready button,
  .m-ready .button,
  .m-ready .button2,
  .m-ready .button3,
  .m-ready .button4,
  .m-ready input,
  .m-ready select,
  .m-ready textarea,
  .m-ready #loading {
    border-radius: 0;
  }

  /* Account panel: summary tables (view.index.php)
  ---------------------------------------------------------------------------*/
  .m-page-account_panel #ucp_info .half {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .m-page-account_panel #ucp_info .hrs {
    margin: 12px 0;
  }

  /* Target of the player card triangle (mobile.js): the "Account - name" row stops below the sticky top bar. */
  .m-page-account_panel #ucp_info .login-profile-table {
    scroll-margin-top: calc(var(--m-top) + var(--m-safe-top) + 12px);
  }

  /* Account details: Server info key / value panels (label in dim engraved capitals, value bright). */
  .m-page-account_panel .login-profile-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    overflow: hidden;
    /* Both halves get the same columns (icon 40px | label 45% | value), whatever widths view.index.php gives its
       cells (5/45/50% in the first table, 5/40/55% and 20/25% in the second), so the values line up across tables. */
    table-layout: fixed;
  }

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

  .m-page-account_panel .login-profile-table td:nth-child(3) {
    width: auto;
  }

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

  /* table. outranks the generic ".m-ready .content td" padding further down. */
  .m-page-account_panel table.login-profile-table td {
    padding: 12px 8px;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09) !important;
    color: var(--m-label);
    font: 700 12px/1.4 var(--m-game-font);
    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;
  }

  /* Icon column wide enough for the 40px icons shown at a crisp 24px. */
  .m-page-account_panel .login-profile-table td:first-child {
    width: 40px;
    padding-left: 10px;
    padding-right: 4px;
    text-align: center;
  }

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

  /* Discord status sits above its Sync/Unsync button on phones (button styles are global, see top of file). */
  .m-ready .login-profile-table .m-discord-status,
  .m-ready .login-profile-table td:has(> a[href*="discord"]) > span {
    display: block;
    margin-bottom: 6px;
  }

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

  .m-page-account_panel .hrs {
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0), rgba(0, 226, 255, 0.35) 50%, rgba(0, 226, 255, 0));
  }

  /* Account panel: action tiles (#character-info)
  ---------------------------------------------------------------------------*/
  .m-page-account_panel #character-info table,
  .m-page-account_panel #character-info tbody,
  .m-page-account_panel #character-info tr,
  .m-page-account_panel #character-info td {
    display: block;
    width: auto;
  }

  /* Action tiles: Server info panels (neon frame, corner marks); the title in gold engraved capitals. */
  .m-page-account_panel #character-info td,
  .m-page-account_panel #character-info td:hover {
    position: relative;
    margin-bottom: 10px;
    padding: 14px 40px 14px 16px;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    color: #7f8ca6;
    font: 400 13px/1.45 var(--m-game-font);
    letter-spacing: 0.02em;
  }

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

  /* Chevron hints that the whole tile is a link. */
  .m-page-account_panel #character-info td:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--m-accent);
    border-right: 2px solid var(--m-accent);
    transform: rotate(45deg);
    opacity: 0.7;
    /* Taps on the chevron must reach the stretched link underneath. */
    pointer-events: none;
  }

  .m-page-account_panel #character-info div {
    padding: 0;
    margin: 0;
  }

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

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

  /* Stretches the tile's link over the whole tile (mobile.js also forwards taps on the tile to the link). */
  .m-page-account_panel #character-info td a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* The theme's "a:hover { filter }" would make the link the containing block of the overlay above;
     touch devices apply :hover on the first tap, which shrank the tap area to the word itself. */
  .m-page-account_panel #character-info td a,
  .m-page-account_panel #character-info td a:hover {
    -webkit-filter: none;
    filter: none;
  }

  .m-page-account_panel #character-info td:active {
    border-color: rgba(0, 226, 255, 0.55);
    background: var(--m-corners), linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.14) 50%, rgba(0, 226, 255, 0.04)), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.3), inset 0 0 18px rgba(0, 226, 255, 0.12);
  }

  /* Account panel: vote links (.account-vote) under the action tiles, one centred panel per topsite; the button shows
     the time left until the next vote (app.js startVoteTimer). The id selectors override the old theme rules for
     #vote-options (style.css). */
  .m-page-account_panel .account-vote {
    margin: 18px 0 0;
    text-align: center;
  }

  .m-page-account_panel .account-vote-title {
    margin-bottom: 10px;
    color: var(--m-gold-text);
    font: 700 14px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
    text-transform: uppercase;
  }

  .m-page-account_panel .account-vote-note {
    color: var(--m-text);
    font: 400 13px/1.5 var(--m-neon-font);
  }

  .m-page-account_panel #vote-options.account-vote-list {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--m-text);
    list-style: none;
  }

  .m-page-account_panel #vote-options.account-vote-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--m-neon-line);
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
  }

  .m-page-account_panel .account-vote-name {
    color: var(--m-gold-text);
    font: 700 14px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
    text-transform: uppercase;
    word-break: break-word;
  }

  .m-page-account_panel .account-vote-reward {
    color: var(--m-text);
    font: 400 13px/1.4 var(--m-neon-font);
  }

  .m-page-account_panel .account-vote-counter {
    color: var(--m-accent);
    font: 700 13px/1.4 var(--m-neon-font);
  }

  .m-page-account_panel .account-vote-next {
    margin-top: 4px;
    color: var(--m-text-dim);
    font: 600 11px/1.3 var(--m-neon-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .m-page-account_panel #vote-options.account-vote-list .account-vote-btn {
    min-width: 170px;
    margin: 4px 0 0;
    padding: 0 16px;
    border: 1px solid rgba(0, 226, 255, 0.6);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.05), rgba(0, 226, 255, 0.18) 50%, rgba(0, 226, 255, 0.05));
    color: #dff6ff;
    font: 700 13px/40px var(--m-neon-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .m-page-account_panel #vote-options.account-vote-list .account-vote-btn[disabled] {
    border-color: var(--m-neon-line);
    background: transparent;
    color: var(--m-title);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    filter: none;
  }

  /* MMOTOP panel only: the paid (SMS) vote rewards per package under the button and the nickname reminder. */
  .m-page-account_panel .account-vote-sms {
    align-self: stretch;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--m-neon-line);
    font: 400 13px/1.5 var(--m-neon-font);
  }

  .m-page-account_panel .account-vote-sms-title {
    margin-bottom: 4px;
    color: var(--m-accent);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-wrap: balance;
  }

  .m-page-account_panel .account-vote-sms-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--m-text);
  }

  .m-page-account_panel .account-vote-sms-row span:last-child {
    color: var(--m-gold-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .m-page-account_panel .account-vote-sms-note {
    margin-top: 6px;
    color: var(--m-text-dim);
    font-size: 12px;
    text-wrap: balance;
  }

  /* Content pages: forms, inputs and tables on every section
     (.content is the usual <main>; some legacy views render #content instead)
  ---------------------------------------------------------------------------*/
  .m-ready .content h1,
  .m-ready #content h1 {
    font-size: 19px;
  }

  /* Label/field form tables become stacked label-over-field rows. */
  .m-ready .content form table,
  .m-ready .content form tbody,
  .m-ready .content form tr,
  .m-ready .content form td,
  .m-ready #content form table,
  .m-ready #content form tbody,
  .m-ready #content form tr,
  .m-ready #content form td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .m-ready .content form td,
  .m-ready #content form td {
    padding: 4px 0;
    text-align: left;
  }

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

  .m-ready .content form td br,
  .m-ready #content form td br {
    display: none;
  }

  /* Fields: full width and finger-sized. 16px text keeps iOS from zooming in on focus;
     padding is !important because many views set it inline. */
  .m-ready .content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]),
  .m-ready .content select,
  .m-ready .content textarea,
  .m-ready #content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]),
  .m-ready #content select,
  .m-ready #content textarea,
  .m-ready #select_server select {
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 14px !important;
    border-radius: 0;
    font-size: 16px;
  }

  /* Field look: dark, sharp, with a faint neon frame that lights up on focus (the guest login field look).
     :where() keeps this rule at the lowest specificity, so the focus / read-only states below and the guest login
     form's own field rules always win over it, also on pages that render #content. */
  .m-ready :where(.content, #content) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]), select, textarea),
  .m-ready #select_server select {
    border: 1px solid rgba(0, 226, 255, 0.22);
    background-color: rgba(4, 8, 18, 0.55);
    box-shadow: inset 0 0 8px rgba(0, 226, 255, 0.04);
    color: #e6eef7;
    font-family: var(--m-neon-font);
    line-height: 1.3;
    text-align: left;
    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.42);
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .m-ready .content input:not([type="checkbox"]):not([type="radio"]):focus,
  .m-ready .content select:focus,
  .m-ready .content textarea:focus,
  .m-ready #select_server select:focus {
    outline: none;
    border-color: rgba(0, 226, 255, 0.55);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.18), inset 0 0 8px rgba(0, 226, 255, 0.06);
  }

  /* Read-only and disabled fields (price, totals, target server) are values to read, not to type. */
  .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: #8ff3ff;
  }

  /* Autofill paints a light background; a large inset shadow keeps the field dark (as on the login form). */
  .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: #e6eef7;
    caret-color: #e6eef7;
    transition: background-color 9999s ease-out 0s;
  }

  /* Selects (server choice and others): the native arrow is replaced by the neon chevron of the hero server list. */
  .m-ready .content select,
  .m-ready #select_server select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--m-accent) 50%), linear-gradient(135deg, var(--m-accent) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .m-ready .content select option,
  .m-ready #select_server select option {
    background: #0c1122;
    color: #e6eef7;
  }

  /* Buttons: the neon text button of the guest login form, with HUD corner brackets, in the engraved capitals.
     No #content selectors here: #content always sits inside main.content, and an id would outrank the states below. */
  .m-ready .content form button[type="submit"],
  .m-ready .content .button-style,
  .m-ready .content .custom_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
    margin-top: 8px;
    padding: 0 16px !important;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.38) !important;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
    color: #dffaff;
    font: 700 13px/1.2 var(--m-game-font);
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 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"]: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 var(--m-accent);
    filter: drop-shadow(0 0 3px var(--m-accent));
    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"]:active,
  .m-ready .content .button-style:active,
  .m-ready .content .custom_button:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

  .m-ready .content form button[type="submit"]:focus-visible,
  .m-ready .content .button-style:focus-visible {
    outline: 1px solid var(--m-accent);
    outline-offset: 3px;
  }

  /* Ranking search: the desktop magnifier icon button (31px) becomes a full neon button with a "Search" label
     (the label is hidden on desktop by .m-mobile-only). */
  .m-ready .content .search-button {
    height: auto;
    opacity: 1;
  }

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

  /* Disabled until the form is valid (e.g. the transfer amount is empty). */
  .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;
  }

  .m-ready .content form button[type="submit"]:disabled:before,
  .m-ready .content form button[type="submit"]:disabled:after,
  .m-ready .content .button-style:disabled:before,
  .m-ready .content .button-style:disabled:after {
    display: none;
  }

  /* Checkboxes: a sharp neon box with a glowing tick (the native box is too small to tap and ignores the theme). */
  .m-ready .content input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.45);
    border-radius: 0;
    background: rgba(0, 226, 255, 0.05) no-repeat center / 14px 14px;
    box-shadow: 0 0 8px rgba(0, 226, 255, 0.15), inset 0 0 6px rgba(0, 226, 255, 0.1);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-ready .content input[type="checkbox"]:checked {
    border-color: var(--m-accent);
    background-color: rgba(0, 226, 255, 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(0, 226, 255, 0.5), inset 0 0 6px rgba(0, 226, 255, 0.25);
  }

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

  /* A checkbox at the start of a block of text (registration rules, transfer skins) hangs left of the text. */
  .m-ready .content td:has(> input[type="checkbox"]:first-child),
  .m-ready .content label:has(> input[type="checkbox"]:first-child) {
    position: relative;
    display: block;
    min-height: 24px;
    padding-left: 36px !important;
    color: var(--m-body-text);
    font: 400 14px/1.6 var(--m-game-font);
    letter-spacing: 0.02em;
  }

  /* The box floats into the left padding: it starts at the top of the first text line whatever the cell padding is,
     and -1px puts the 24px box on the middle of the 22.4px line. */
  .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 {
    float: left;
    margin: -1px 0 0 -36px;
  }

  .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(0, 226, 255, 0.35);
    color: var(--m-accent);
    text-decoration: none;
  }

  /* Donation methods (donate/view.method.php): the payment logos stack as full-width neon tiles above the terms.
     font-size 0 hides the &nbsp; separators between the links, which would add empty lines to the column. */
  .m-page-donate .xeq_btn-2 {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    margin: 4px 0 18px !important;
    font-size: 0;
  }

  .m-page-donate .xeq_btn-2 a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 10px 16px;
    box-sizing: border-box;
    border: 1px solid var(--m-neon-line);
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    color: #dff6ff;
    font: 700 12px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }

  .m-page-donate .xeq_btn-2 > .e_note {
    font-size: 14px;
  }

  .m-page-donate .xeq_btn-2 a img {
    display: block;
    width: 120px !important;
    max-width: 100%;
    height: auto;
  }

  /* Where a method works (view.method.php $region_badge): a badge under the logo tile, cyan worldwide, orange Russia only. */
  .m-page-donate .xeq_btn-2 .donate-method {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .m-page-donate .donate-region {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid;
    font: 700 12px/1.3 var(--m-neon-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .m-page-donate .donate-region svg {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .m-page-donate .donate-region-world {
    border-color: rgba(0, 226, 255, 0.45);
    background: rgba(0, 226, 255, 0.08);
    color: var(--m-accent);
  }

  .m-page-donate .donate-region-ru {
    border-color: rgba(255, 160, 40, 0.45);
    background: rgba(255, 160, 40, 0.08);
    color: #ffb347;
  }

  .m-page-donate .donate-terms {
    margin: 0 0 18px;
    text-align: left;
  }

  /* The no-refund clause of the terms stands out in bright orange. */
  .m-page-donate .donate-no-refund {
    color: #ff9a1f;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 140, 20, 0.55);
  }

  /* Field labels (the first cell of a label / field row): dim engraved capitals behind a neon diamond, as in Server info. */
  .m-ready .content form td:first-child:not(:only-child):not(:has(input, select, textarea, button)) {
    padding-top: 12px;
    color: var(--m-label);
    font: 700 12px/1.4 var(--m-game-font);
    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 9px 2px 1px;
    background: var(--m-accent);
    box-shadow: 0 0 6px var(--m-accent);
    transform: rotate(45deg);
    vertical-align: middle;
  }

  /* Form panels (registration, recovery, account settings, transfers): the Server info panel around the fields. */
  .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 {
    margin: 0 0 20px;
    padding: 12px 16px 18px;
    border: 1px solid var(--m-neon-line);
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
  }

  /* Plain text inside those forms and transfer notes (e.g. the skins warning). */
  .m-ready .content form p {
    margin: 6px 0 0;
    color: #7f8ca6;
    font: 400 13px/1.5 var(--m-game-font);
    letter-spacing: 0.02em;
  }

  /* Page and section titles: h1 like the Server info page title, h2 / plugin titles as lit strips. */
  .m-ready .content > h1,
  .m-page-registration .content > p {
    margin: 4px 0 14px;
    color: #e3ebf4;
    font: 700 17px/1.35 var(--m-game-font);
    letter-spacing: 0.1em;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.45), 0 0 14px rgba(0, 174, 255, 0.22);
  }

  .m-ready .content h1.sidebar-title,
  .m-ready .content h2.title {
    position: relative;
    margin: 0 0 16px !important;
    padding: 14px 16px 12px;
    border: 1px solid var(--m-neon-line) !important;
    background: var(--m-corners), var(--m-strip), var(--m-neon-fill);
    background-origin: border-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    box-shadow: var(--m-neon-glow);
    color: #dff6ff;
    -webkit-text-fill-color: currentColor;
    font: 400 13px/1.3 var(--m-game-font);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.5);
    text-transform: uppercase;
  }

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

  .m-ready .content h1.sidebar-title:after,
  .m-ready .content h2.title:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: var(--m-accent);
    box-shadow: 0 0 8px var(--m-accent);
  }

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

  /* Info lists under plugin forms (e.g. change name rules): body text with neon diamonds. */
  .m-ready .content #ucp_info ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    color: var(--m-body-text);
    font: 400 14px/1.55 var(--m-game-font);
    letter-spacing: 0.02em;
  }

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

  /* Validation prompts (jquery.validationEngine: absolutely positioned in <body>). mobile.js stores the centre of the
     checked field in --m-err-x / --m-err-y and adds .is-centred, so the prompt sits in the middle of the field instead
     of over its right edge (!important beats the plugin's inline top/left, which it keeps animating).
     A centred prompt never takes taps (the field underneath gets them) and fades while its field is focused. */
  .m-ready .formError {
    width: max-content;
    max-width: calc(100vw - 40px);
  }

  .m-ready .formError.is-centred {
    top: var(--m-err-y) !important;
    left: var(--m-err-x) !important;
    margin-top: 0 !important;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .m-ready .formError.is-field-focused {
    opacity: 0 !important;
  }

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

  .m-ready .formError .formErrorContent {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid rgba(255, 196, 64, 0.6);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 196, 64, 0.14), rgba(255, 196, 64, 0.04)), rgba(9, 13, 25, 0.96);
    box-shadow: 0 0 14px rgba(255, 196, 64, 0.3), inset 0 0 10px rgba(255, 196, 64, 0.08);
    color: var(--m-gold-text);
    font: 700 11px/1.35 var(--m-game-font);
    letter-spacing: 0.1em;
    text-align: center;
    text-shadow: 0 0 6px rgba(255, 196, 64, 0.5);
    text-transform: uppercase;
  }

  .m-ready .greenPopup .formErrorContent,
  .m-ready .blackPopup .formErrorContent {
    border-color: var(--m-neon-line);
    background: var(--m-strip), rgba(9, 13, 25, 0.96);
    box-shadow: var(--m-neon-glow);
    color: #dff6ff;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.5);
  }

  /* Referral page (account_panel/view.my_referral_list.php): invited players and their reward picker. */
  .m-page-account_panel .add_to_card {
    border: 1px solid var(--m-neon-line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    color: #e6eef7;
    font: 400 14px/1.45 var(--m-game-font);
  }

  .m-page-account_panel .add_to_card th {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--m-neon-line);
    background: var(--m-strip);
    color: #9fdcef;
    font: 700 11px/1.2 var(--m-game-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .m-page-account_panel .add_to_card td {
    padding: 11px 16px !important;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    vertical-align: middle;
  }

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

  .m-page-account_panel .add_to_card tr:last-child > td {
    border-bottom: 0;
  }

  .m-page-account_panel .ref-reward-dropdown {
    display: block;
  }

  .m-page-account_panel .ref-reward-dropdown .custom_button {
    margin-top: 0;
  }

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

  .m-page-account_panel .ref-reward-dropdown-content a,
  .m-page-account_panel .ref-reward-dropdown-content a:hover {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    background: none;
    color: var(--m-gold-text);
    font: 700 13px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
  }

  .m-page-account_panel .ref-reward-dropdown-content a:active {
    background: rgba(0, 226, 255, 0.1);
  }

  .m-ready .content form div[style*="margin-left"],
  .m-ready #content form div[style*="margin-left"] {
    margin-left: 0 !important;
  }

  /* The guest login form keeps its own two-column layout and sharp corners (see above). */
  .m-ready .login-block #login_form input {
    width: auto !important;
    padding: 0 14px;
    border-radius: 0;
  }

  /* Tables are wrapped by mobile.js in .m-table-scroll: they keep their columns and scroll sideways. */
  .m-ready .m-table-scroll {
    max-width: 100%;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .m-ready .m-table-scroll > table {
    min-width: 100%;
    margin: 0;
  }

  .m-ready .content table,
  .m-ready #content table {
    max-width: none;
    font-size: 13px;
  }

  .m-ready .content th,
  .m-ready .content td,
  .m-ready #content th,
  .m-ready #content td {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .m-ready .dia-history-name {
    min-width: 160px;
  }

  /* Editor content (rules, guides, about, news) with fixed inline sizes. */
  .m-ready .content iframe,
  .m-ready .content video,
  .m-ready #content iframe,
  .m-ready #content video {
    max-width: 100% !important;
  }

  .m-ready .content pre,
  .m-ready #content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
  }

  /* Blocks with fixed inline widths (e.g. guide text at 600px) shrink to the screen. */
  .m-ready .content div[style*="width"],
  .m-ready #content div[style*="width"] {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Character inventory: items are absolutely positioned on a 400x407 background,
     so the block is scaled as a whole instead of being narrowed. */
  .m-page-info .content div[style*="height:407px"] {
    max-width: none;
    zoom: 0.85;
  }

  /* Character stats: the icon column is width="5%" and img max-width:100% shrank the 50px icons to a few pixels. */
  .m-page-info .char-profile-table-2 td:first-child {
    width: 40px;
    padding-left: 8px;
    padding-right: 4px;
    text-align: center;
  }

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

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

  /* Rules page (assets/rules.html): tabs become a segmented control. */
  .m-page-rules .tabs {
    align-items: stretch;
    gap: 6px;
    margin-bottom: 8px;
  }

  /* Rankings (js_templates/rank_players.ejs, rank_guilds.ejs): the guild member list look (Server info panel,
     place on the left, gold engraved names, faint row lines), keeping every value of the desktop row.
     Players: place | class icon | name + status | points over resets, zodiac, quests, achievements | guild emblem.
     Guilds: place | name over member count | score | emblem.
  ---------------------------------------------------------------------------*/
  .m-page-rankings .ranking-table,
  .m-page-rankings .ranking-table tbody,
  .m-page-rankings .guild-ranking-table,
  .m-page-rankings .guild-ranking-table tbody {
    display: block;
    width: 100%;
  }

  /* The ranking rows are grids that always fit the screen, so their wrapper does not need to scroll.
     As a scroll container it could be dragged sideways and it clipped the tooltips above the first row. */
  .m-page-rankings .m-table-scroll {
    overflow: visible;
  }

  /* Ranking tooltips (style.css) look and sit as on desktop. Hidden ones keep their size and stuck out past the
     table edge, making it scrollable, so they take part in the layout only while shown. Phones have no hover:
     mobile.js opens a tooltip on tap (.is-tip-open); :hover still works where a real pointer exists.
     cursor: pointer lets iOS deliver taps on these plain elements to the delegated click handler. */
  .m-ready .rank-hover-tooltip {
    cursor: pointer;
  }

  .m-ready .rank-hover-tooltip::before,
  .m-ready .rank-hover-tooltip::after {
    display: none;
  }

  .m-ready .rank-hover-tooltip.is-tip-open {
    z-index: 3001;
  }

  .m-ready .rank-hover-tooltip.is-tip-open::before,
  .m-ready .rank-hover-tooltip.is-tip-open::after {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  /* Tooltip look: a small Server info panel (sharp neon frame, engraved capitals) with a neon pointer. */
  .m-ready .rank-hover-tooltip::after {
    padding: 7px 10px;
    border: 1px solid rgba(0, 226, 255, 0.55);
    border-radius: 0;
    background: var(--m-strip), rgba(9, 13, 25, 0.97);
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.3), inset 0 0 10px rgba(0, 226, 255, 0.08);
    color: #dff6ff;
    -webkit-text-fill-color: #dff6ff;
    font: 700 11px/1.2 var(--m-game-font);
    letter-spacing: 0.1em;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.6);
    text-transform: uppercase;
  }

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

  /* Alignment: the pointer stays centred over the tapped item; the bubble is centred only in the middle of the row.
     Left-hand items (class icon) start the bubble at their left edge; right-hand items (points, the four values,
     guild emblem) end it at their right edge, so no bubble is cut by the screen edge. */
  .m-page-rankings .ranking-table .td-class .rank-hover-tooltip::after {
    left: 0;
    transform: none !important;
  }

  .m-page-rankings .ranking-table .td-all-levels .rank-hover-tooltip::after,
  .m-page-rankings .ranking-table .td-mark-char .rank-hover-tooltip::after {
    right: 0;
    left: auto;
    transform: none !important;
  }

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

  .m-page-rankings .guild-ranking-table {
    margin: 16px 0 0;
  }

  .m-page-rankings .ranking-table tr.tr-bg-image {
    display: grid;
    grid-template-columns: 26px 32px minmax(0, 1fr) auto 32px;
    grid-template-areas: "rank icon nick stats mark";
    align-items: center;
    column-gap: 7px;
    padding: 10px 12px 10px 8px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    background: none;
  }

  .m-page-rankings .ranking-table tr.tr-bg-image:last-child,
  .m-page-rankings .guild-ranking-table tr:last-child {
    border-bottom: 0;
  }

  .m-page-rankings .ranking-table tr:hover,
  .m-page-rankings .guild-ranking-table tr:hover {
    background: none;
  }

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

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

  /* Name sits on the vertical centre of the class icon. */
  .m-page-rankings .ranking-table .td-nick {
    grid-area: nick;
    min-width: 0;
    letter-spacing: 0;
  }

  /* Only the name (.td-nick-name) is clipped with an ellipsis; the status icon after it stays outside the clip,
     so its tooltip is not cut off. */
  /* inline-flex: the link is only as wide as the name, so the empty rest of the cell does not open the profile. */
  /* Baseline: the cup before the name and the castle after it (.rank-marks, icons without a text baseline align
     by their bottom edge) stand on the name's baseline; the diamond status stays centred on the name. */
  .m-page-rankings .ranking-table .td-nick a {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    line-height: 32px;
  }

  /* No theme hover brightening (style.css a:hover filter) on the name link: a tap leaves :hover on the link on
     iPhones, and Safari then draws the filtered link cut to its own box, hiding the tooltip of the diamond status,
     cup or castle above it. */
  .m-page-rankings .ranking-table .td-nick a:hover {
    -webkit-filter: none;
    filter: none;
  }

  .m-page-rankings .ranking-table .td-nick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--m-gold-text);
    font: 700 13px/32px var(--m-game-font);
    letter-spacing: 0.02em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.4);
  }

  .m-page-rankings .ranking-table .td-nick a > .rank-hover-tooltip {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 5px;
  }

  /* The 15px cup is taller than the 13px capitals: lowered from the baseline so its middle meets their middle. */
  .m-page-rankings .ranking-table .rank-marks-lead {
    position: relative;
    top: 3px;
  }

  /* Place: neon cyan; the top three in gold, silver and bronze (the theme's gradient text is switched off). */
  .m-page-rankings .ranking-table .td-rank,
  .m-page-rankings .ranking-table .td-rank-top1,
  .m-page-rankings .ranking-table .td-rank-top2,
  .m-page-rankings .ranking-table .td-rank-top3 {
    grid-area: rank;
    padding: 0;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #8ff3ff;
    -webkit-text-fill-color: currentColor;
    font: 700 15px/1 var(--m-game-font);
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.6);
  }

  /* Guild places count from the desktop column header row (tr.rank-head, hidden here). */
  .m-page-rankings .ranking-table .td-rank-top1,
  .m-page-rankings .guild-ranking-table .rank-head + tr .guild-td-rank {
    color: #ffd56a;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.8);
  }

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

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

  /* Points (top line) and stat values (bottom line), in the desktop order, form a stack of two equal 18px lines with a 4px gap;
     the stack is centred in the row, so the gap lines up with the centre of the player's name.
     The rank-points-anchor is a 0x0 positioning point, as on desktop. */
  .m-page-rankings .ranking-table .td-all-levels {
    grid-area: stats;
    min-width: 0;
  }

  /* Points in bright engraved figures (the guild member score look) instead of the theme's metal gradient. */
  .m-page-rankings .ranking-table .td-points {
    position: relative;
    width: auto;
    margin: 0;
    padding-bottom: 22px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #e6eef7;
    -webkit-text-fill-color: currentColor;
    font: 700 15px/18px var(--m-game-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-align: right;
  }

  .m-page-rankings .ranking-table .rank-points-anchor {
    position: static;
  }

  .m-page-rankings .ranking-table .td-rank-values {
    top: auto;
    right: 0;
    bottom: 0;
    height: 18px;
    gap: 6px;
  }

  /* The four values keep their own theme colours (they tell the values apart); only the font changes. */
  .m-page-rankings .ranking-table .td-rank-values > div {
    -webkit-text-fill-color: transparent;
    font: 700 11px/18px var(--m-game-font);
    letter-spacing: 0.02em;
  }

  /* "Total points" tap area covers only the right-aligned number (6 digits wide in the points font, top 18px line),
     not the stat values below it nor the empty left part of the cell, so the centred tooltip sits over the number. */
  .m-page-rankings .ranking-table .rank-points-tooltip {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 6ch;
    height: 18px;
    transform: none;
  }

  .m-page-rankings .ranking-table .td-mark-char {
    grid-area: mark;
    text-align: center;
  }

  .m-page-rankings .ranking-table .td-mark-img {
    margin: 0;
  }

  /* Class icon and guild emblem: 32x32 drawn whole, sharp corners, without the theme's neon glow.
     The theme's transparent 2px border is dropped: inside a 32px box it cut 4px off the 32px class icon and
     squeezed the emblem to 28px. The emblem is requested at 96px (12px cells) and shown at exactly a third. */
  .m-page-rankings .ranking-table .td-mark-img img,
  .m-page-rankings .ranking-table .class-img-icons {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .m-page-rankings .ranking-table .td-mark-img img[src*="get_mark"],
  .m-page-rankings .guild-td-mark img {
    image-rendering: pixelated;
  }

  /* Diamond status next to the name: the 128px artwork at a whole 20px instead of the inline 1.5em with offsets. */
  .m-page-rankings .ranking-table .td-nick .rank-icon-tooltip img {
    display: block;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
  }

  .m-page-rankings .guild-ranking-table tr {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 32px;
    grid-template-areas:
      "rank name    score mark"
      "rank members score mark";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 11px 12px 11px 8px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
  }

  .m-page-rankings .guild-ranking-table td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    font-family: var(--m-game-font);
  }

  .m-page-rankings .guild-td-rank {
    grid-area: rank;
    color: #8ff3ff;
    font: 700 15px/1 var(--m-game-font);
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.6);
  }

  .m-page-rankings .guild-td-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .m-page-rankings .guild-td-name a {
    color: var(--m-gold-text);
    font: 700 15px/1.3 var(--m-game-font);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.4);
  }

  .m-page-rankings .guild-td-score {
    grid-area: score;
    color: #e6eef7;
    font: 700 15px/1.2 var(--m-game-font);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .m-page-rankings .guild-td-members {
    grid-area: members;
    min-width: 0;
    color: var(--m-label);
    font: 700 11px/1.3 var(--m-game-font);
    letter-spacing: 0.1em;
    text-align: left;
  }

  .m-page-rankings .guild-td-members:before {
    content: "Members ";
    color: #7f8ca6;
    font: inherit;
    text-transform: uppercase;
  }

  /* Top Voters (rank_votereward.ejs) reuses the guild rows: the last vote date under the name (its translated label in
     data-label), the votes on the right, the class icon in the emblem place. */
  .m-page-rankings .voter-ranking-table .guild-td-members:before {
    content: attr(data-label) " ";
  }

  /* The class icon sits before the name (the guild emblem is at the end of the row). */
  .m-page-rankings .voter-ranking-table tr {
    grid-template-columns: 26px 32px minmax(0, 1fr) 48px;
    grid-template-areas:
      "rank mark name    score"
      "rank mark members score";
  }

  .m-page-rankings .voter-ranking-table .guild-td-score {
    text-align: center;
  }

  .m-page-rankings .voter-class-icon {
    display: block;
    width: 32px;
    height: 32px;
    background: center / cover no-repeat;
  }

  .m-page-rankings .voter-ranking-table .guild-td-name .f16 {
    margin-right: 6px;
    vertical-align: middle;
  }

  .m-page-rankings .guild-td-mark {
    grid-area: mark;
  }

  .m-page-rankings .guild-td-mark img {
    position: static !important;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto !important;
    box-shadow: none;
    image-rendering: pixelated;
  }

  /* Tabs (Best Players / Best Guilds) and "Everyone on this server": sharp neon buttons like the Rules tabs. */
  .m-page-rankings div[id^="rankings_select_"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px !important;
  }

  /* Top Voters takes a row of its own, right above "Everyone on this server". */
  .m-page-rankings div[id^="rankings_select_"] .button2.rank-tab-voters {
    flex-basis: 100%;
  }

  .m-page-rankings div[id^="rankings_select_"] .button2,
  .m-page-rankings .everyone-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-strip), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.08);
    color: #dff6ff;
    font: 700 11px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.7);
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }

  .m-page-rankings div[id^="rankings_select_"] .button2:active,
  .m-page-rankings .everyone-button:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

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

  /* The ranking on screen (tab and class filter, .is-active from mobile.js): the same frame, only in castle gold;
     the background and the label stay as on the other buttons. */
  .m-page-rankings div[id^="rankings_select_"] .button2.is-active,
  .m-page-rankings .everyone-button.is-active {
    border-color: rgba(255, 196, 64, 0.6);
    box-shadow: 0 0 10px rgba(255, 196, 64, 0.16);
  }

  /* Class filter (rank_players.ejs): six class portraits in one row of neon framed tiles under the
     "Everyone on this server" button. The browser moves this markup out of its <table> (it is not in cells),
     so the tiles and the empty table are direct children of #rank_by_class. */
  .m-page-rankings #rank_by_class:has(> .dw-cont) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
  }

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

  .m-page-rankings #rank_by_class:has(> .dw-cont) > .everyone-button {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  /* Square class portraits (images/classes/<class>-portrait.jpg, 200x200, shared by all three themes). They are set
     on :hover too because the theme's :hover rule swaps the background, and a tapped tile keeps :hover on touch screens.
     The theme's hover art (.full-xx) is positioned for its 55px tiles and is not shown. */
  .m-page-rankings .dw-cont,
  .m-page-rankings .mg-cont,
  .m-page-rankings .dk-cont,
  .m-page-rankings .fe-cont,
  .m-page-rankings .dl-cont,
  .m-page-rankings .su-cont {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    border: 1px solid var(--m-neon-line);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--m-neon-glow);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .m-page-rankings .dw-cont,
  .m-page-rankings .dw-cont:hover {
    background-image: url(../images/classes/dw-portrait.jpg?v2);
  }

  .m-page-rankings .mg-cont,
  .m-page-rankings .mg-cont:hover {
    background-image: url(../images/classes/mg-portrait.jpg?v2);
  }

  .m-page-rankings .dk-cont,
  .m-page-rankings .dk-cont:hover {
    background-image: url(../images/classes/dk-portrait.jpg?v2);
  }

  .m-page-rankings .fe-cont,
  .m-page-rankings .fe-cont:hover {
    background-image: url(../images/classes/fe-portrait.jpg?v2);
  }

  .m-page-rankings .dl-cont,
  .m-page-rankings .dl-cont:hover {
    background-image: url(../images/classes/dl-portrait.jpg?v2);
  }

  .m-page-rankings .su-cont,
  .m-page-rankings .su-cont:hover {
    background-image: url(../images/classes/su-portrait.jpg?v2);
  }

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

  .m-page-rankings .dw-cont:active,
  .m-page-rankings .mg-cont:active,
  .m-page-rankings .dk-cont:active,
  .m-page-rankings .fe-cont:active,
  .m-page-rankings .dl-cont:active,
  .m-page-rankings .su-cont:active {
    border-color: var(--m-accent);
    box-shadow: 0 0 18px rgba(0, 226, 255, 0.5), inset 0 0 14px rgba(0, 226, 255, 0.25);
  }

  .m-page-rankings .dw-cont.is-active,
  .m-page-rankings .mg-cont.is-active,
  .m-page-rankings .dk-cont.is-active,
  .m-page-rankings .fe-cont.is-active,
  .m-page-rankings .dl-cont.is-active,
  .m-page-rankings .su-cont.is-active {
    border-color: rgba(255, 196, 64, 0.6);
    box-shadow: 0 0 16px rgba(255, 196, 64, 0.16), inset 0 0 18px rgba(255, 196, 64, 0.06);
  }

  /* The corner marks of the chosen class turn gold too. */
  .m-page-rankings .is-active:before {
    background: var(--m-corners-gold);
  }

  .m-page-rankings [class^="full-"] {
    display: none !important;
  }

  /* The castle owner mark takes the name's size, so it sits on the name's baseline with the capitals' height
     (guild names are at most 8 characters, so the line never needs clipping). */
  .m-page-rankings .guild-td-name {
    font: 700 15px/1.3 var(--m-game-font);
  }

  /* The whole tile is the link (desktop sizes the link and its inner block to 55x121). */
  .m-page-rankings .dw-cont > .classes-buttons,
  .m-page-rankings .mg-cont > .classes-buttons,
  .m-page-rankings .dk-cont > .classes-buttons,
  .m-page-rankings .fe-cont > .classes-buttons,
  .m-page-rankings .dl-cont > .classes-buttons,
  .m-page-rankings .su-cont > .classes-buttons,
  .m-page-rankings .classes-buttons > div {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Donation packages (donate/view.paypal.php, view.paypecker.php, plugins/stripe view.stripe.php): every package is
     its own ul#paypal-options with one fixed 45px desktop row. On phones each becomes a Server info card:
     package name (gold) over reward and price on the left, the Donate button on the right.
     !important only where the views set inline styles on the buttons. */
  .m-ready ul#paypal-options {
    margin: 0 0 10px;
    padding: 0;
  }

  .m-ready #paypal-options li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name   buy"
      "reward buy";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    line-height: 1.3;
  }

  .m-ready #paypal-options li h4 {
    grid-area: name;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--m-gold-text);
    font: 700 14px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
    text-transform: uppercase;
  }

  .m-ready #paypal-options li h3 {
    grid-area: reward;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--m-label);
    font: 700 12px/1.4 var(--m-game-font);
    letter-spacing: 0.04em;
    text-align: left;
  }

  .m-ready #paypal-options li h3 [id^="reward_"] {
    color: #e6eef7;
    font-size: 15px;
  }

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

  /* Popular offers (mobile.js marks the 50 and 1000 Diamonds packages): the same card, only the frame, corner marks
     and glow change colour, 50 in castle gold and 1000 in neon pink, with a "Popular offer" tag on the top edge. */
  .m-ready #paypal-options li.is-offer {
    position: relative;
    margin-top: 14px;
  }

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

  .m-ready #paypal-options li.is-offer-pink {
    border-color: rgba(255, 92, 205, 0.6);
    background: var(--m-corners-pink), var(--m-neon-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);
  }

  /* Best offer (the 20000 Diamonds package): flame orange. */
  .m-ready #paypal-options li.is-offer-best {
    border-color: rgba(255, 138, 61, 0.7);
    background: var(--m-corners-best), var(--m-neon-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);
  }

  /* The tag sits on the top frame line. */
  .m-ready #paypal-options .m-offer-badge {
    position: absolute;
    top: -9px;
    left: 14px;
    display: block !important;
    padding: 3px 8px;
    border: 1px solid currentColor;
    background: #0c1122;
    font: 700 10px/1 var(--m-game-font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  .m-ready #paypal-options li.is-offer-gold .m-offer-badge {
    color: var(--m-gold-text);
    box-shadow: 0 0 8px rgba(255, 196, 64, 0.3);
    text-shadow: 0 0 6px rgba(255, 196, 64, 0.6);
  }

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

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

  /* Donate: the compact neon button (PayPal / Stripe use button.custom_button, PayPecker a.button). */
  .m-ready #paypal-options .custom_button,
  .m-ready #paypal-options a.button {
    grid-area: buy;
    position: relative;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    border: 1px solid rgba(0, 226, 255, 0.38) !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(0, 226, 255, 0.04), rgba(0, 226, 255, 0.15) 50%, rgba(0, 226, 255, 0.04));
    box-shadow: 0 0 14px rgba(0, 226, 255, 0.16), inset 0 0 14px rgba(0, 226, 255, 0.08);
    color: #dffaff;
    font: 700 12px/1 var(--m-game-font) !important;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-indent: 0.18em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.8);
    text-transform: uppercase;
  }

  .m-ready #paypal-options a.button:before,
  .m-ready #paypal-options a.button:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0 solid var(--m-accent);
    filter: drop-shadow(0 0 3px var(--m-accent));
    pointer-events: none;
  }

  .m-ready #paypal-options a.button:before {
    top: -1px;
    left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
  }

  .m-ready #paypal-options a.button:after {
    right: -1px;
    bottom: -1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .m-ready #paypal-options .custom_button:active,
  .m-ready #paypal-options a.button:active {
    background-color: rgba(0, 226, 255, 0.18);
    box-shadow: 0 0 22px rgba(0, 226, 255, 0.4), inset 0 0 18px rgba(0, 226, 255, 0.2);
  }

  /* Server info tables on other pages (referral rewards, transfer history): the same neon panel.
     Placed before the Server info rules, which keep their own refinements at equal specificity. */
  .m-ready .server-stat-table {
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid var(--m-neon-line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
    color: #e6eef7;
    font: 400 14px/1.5 var(--m-game-font);
    letter-spacing: 0.03em;
    text-align: left;
  }

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

  /* Column headers: th, or td inside the header row (transfer history uses td). */
  .m-ready .server-stat-table thead th,
  .m-ready .server-stat-table thead td {
    padding: 12px 10px 10px;
    border: 0;
    border-bottom: 1px solid var(--m-neon-line);
    background: var(--m-strip);
    color: #9fdcef;
    font: 700 11px/1.2 var(--m-game-font);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .m-ready .server-stat-table td {
    padding: 13px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    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: 16px;
  }

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

  /* Section headings between tables (e.g. "My Transfers") in the engraved capitals. */
  .m-ready .content #content h2:not(.title) {
    margin: 4px 0 12px;
    color: #e3ebf4;
    font: 700 15px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.45);
    text-transform: uppercase;
  }

  /* Guild page (info/view.guild.php): emblem, key / value panel and the member list.
     Members are one row each: place | name over class | score over position. */
  .m-page-info .guild-profile-title {
    margin: 4px 0 6px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.16);
    outline: 0;
    color: #e3ebf4;
    font: 700 19px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.45), 0 0 14px rgba(0, 174, 255, 0.22);
    text-transform: uppercase;
  }

  .m-page-info .guild-profile-info,
  .m-page-info .guild-profile-info > tbody,
  .m-page-info .guild-profile-info > tbody > tr,
  .m-page-info .guild-profile-info > tbody > tr > td {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .m-page-info .guild-profile-mark {
    padding: 8px 0 16px !important;
    text-align: center;
  }

  /* The emblem is requested at 132px; shown at 96px with the hero's neon frame. */
  .m-page-info .guild-profile-mark img {
    display: block;
    box-sizing: content-box;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    padding: 4px;
    border: 1px solid rgba(0, 226, 255, 0.4);
    background: rgba(0, 226, 255, 0.05);
    box-shadow: 0 0 16px rgba(0, 226, 255, 0.28), inset 0 0 10px rgba(0, 226, 255, 0.15);
    image-rendering: pixelated;
  }

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

  .m-page-info .guild-profile-info-in tr {
    height: auto !important;
  }

  .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: 13px 16px;
    border: 0;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    vertical-align: middle;
  }

  .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(--m-label);
    font: 700 12px/1.4 var(--m-game-font);
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-page-info .guild-profile-common:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 9px 2px 0;
    background: var(--m-accent);
    box-shadow: 0 0 6px var(--m-accent);
    transform: rotate(45deg);
    vertical-align: middle;
  }

  .m-page-info .guild-profile-info-in .guild-profile-current {
    color: #e6eef7;
    font: 700 14px/1.3 var(--m-game-font);
    letter-spacing: 0.04em;
    text-align: right;
    word-break: break-word;
  }

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

  /* mobile.js wraps the table in .m-table-scroll, so the <br> after it follows the wrapper. */
  .m-page-info .m-table-scroll:has(> .guild-profile-info) + br {
    display: none;
  }

  .m-page-info .guild-profile-members,
  .m-page-info .guild-profile-members > tbody {
    display: block;
    width: 100%;
    margin: 16px 0 0;
  }

  /* The rows are grids that always fit the screen, so their wrapper does not need to scroll. */
  .m-page-info .m-table-scroll:has(> .guild-profile-members) {
    overflow: visible;
  }

  .m-page-info .guild-profile-members > tbody {
    margin: 0;
    border: 1px solid var(--m-neon-line);
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
  }

  .m-page-info .guild-profile-members tr {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank nick score"
      "rank class position";
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    padding: 11px 16px 11px 10px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
  }

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

  .m-page-info .guild-profile-members tr:hover {
    background: none;
  }

  .m-page-info .guild-profile-members td {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    font-family: var(--m-game-font);
  }

  .m-page-info .guild-profile-members td[colspan] {
    grid-column: 1 / -1;
  }

  .m-page-info .gpm-td-rank {
    grid-area: rank;
    color: #8ff3ff;
    font: 700 15px/1 var(--m-game-font);
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 226, 255, 0.6);
  }

  /* The master (first row) is lit in gold, as the castle owner in Server info. */
  .m-page-info .guild-profile-members tr:first-child .gpm-td-rank {
    color: var(--m-gold-text);
    text-shadow: 0 0 6px rgba(255, 196, 64, 0.7);
  }

  .m-page-info .gpm-td-nick {
    grid-area: nick;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .m-page-info .gpm-td-nick a {
    color: var(--m-gold-text);
    font: 700 15px/1.3 var(--m-game-font);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.4);
  }

  .m-page-info .gpm-td-class {
    grid-area: class;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--m-label);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

  .m-page-info .gpm-td-level {
    grid-area: score;
    color: #e6eef7;
    font: 700 15px/1.2 var(--m-game-font);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .m-page-info .gpm-td-position {
    grid-area: position;
    color: #7f8ca6;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-align: right;
    text-transform: uppercase;
  }

  /* Character profile (info/view.character.php): name as the page title, class portrait in a neon frame,
     the two stat tables as Server info key / value panels (icon | label | value) and the equipment in a panel. */
  .m-page-info .char-profile-title {
    margin: 4px 0 14px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.16);
    outline: 0;
    color: var(--m-gold-text);
    font: 700 20px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.5), 0 0 16px rgba(255, 196, 64, 0.2);
  }

  .m-page-info .char-profile-picture {
    padding: 0 0 16px !important;
  }

  .m-page-info .char-profile-picture img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
  }

  .m-page-info .char-profile-table-2 {
    float: none;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid var(--m-neon-line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
  }

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

  .m-page-info .char-profile-table-2 td {
    padding: 11px 8px;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    vertical-align: middle;
  }

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

  /* Labels ("Zodiac<br>Level" keeps its two lines). */
  .m-page-info .char-profile-table-2 td:nth-child(2) {
    color: var(--m-label);
    font: 700 12px/1.4 var(--m-game-font);
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

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

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

  /* Guild: the emblem comes first in the markup (above the name on desktop). Floated to the right edge of the
     right-aligned cell, it follows the name on the same line; the cell stays a table cell. */
  .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 7px;
    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: 100%;
    border: 1px solid var(--m-neon-line);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-corners), var(--m-neon-fill);
    background-origin: border-box;
    box-shadow: var(--m-neon-glow);
  }

  .m-page-info .equip-table td {
    padding: 4px 0 8px !important;
    text-align: center;
  }

  .m-page-info .equip-table .i_note {
    margin: 8px;
  }

  /* Server info (about/view.about.php, assets/about.html): strict medieval-cyberpunk neon.
     Tables are sharp panels with a glowing neon frame, brighter corner marks and inner padding;
     titles are lit strips in the engraved capitals of the hero; labels carry small neon diamonds.
     The separated border model lets the panel keep its own frame around the cells.
     !important only where about.html / the view set inline styles.
  ---------------------------------------------------------------------------*/
  .m-page-about .server-stat-table {
    width: 100%;
    margin: 0 0 20px;
    border: 1px solid rgba(0, 226, 255, 0.3);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--m-corners), rgba(9, 13, 25, 0.62);
    background-origin: border-box;
    box-shadow: 0 0 16px rgba(0, 226, 255, 0.12), inset 0 0 18px rgba(0, 226, 255, 0.05);
    color: #e6eef7;
    font: 400 14px/1.5 var(--m-game-font);
    letter-spacing: 0.03em;
    text-align: left;
  }

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

  /* Castle siege state (about/view.about.php .cs-period): the dates go under the state without brackets, as on desktop. */
  .m-page-about .cs-period {
    display: block;
    margin-top: 2px;
  }

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

  /* Section titles (th with colspan): a lit strip with a neon base line and a short bright segment. */
  .m-page-about .server-stat-table th[colspan] {
    position: relative;
    padding: 14px 16px 12px;
    border: 0;
    border-bottom: 1px solid rgba(0, 226, 255, 0.3);
    background: linear-gradient(180deg, rgba(0, 226, 255, 0.1), rgba(0, 226, 255, 0.02));
    color: #dff6ff;
    font: 400 13px/1.3 var(--m-game-font);
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.5);
    text-transform: uppercase;
  }

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

  /* Sub-titles inside a table ("Castle owner bonuses") in castle gold. */
  .m-page-about .server-stat-table tbody th[colspan] {
    border-top: 1px solid rgba(255, 196, 64, 0.22);
    border-bottom-color: rgba(255, 196, 64, 0.3);
    background: linear-gradient(180deg, rgba(255, 196, 64, 0.09), rgba(255, 196, 64, 0.02));
    color: #f2d488;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
  }

  .m-page-about .server-stat-table tbody th[colspan]:after {
    background: rgb(255, 196, 64);
    box-shadow: 0 0 8px rgba(255, 196, 64, 0.8);
  }

  /* Page title (the server statistics heading is a table with only a header). */
  .m-page-about .server-stat-table:not(:has(tbody)) {
    margin-bottom: 10px;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .m-page-about .server-stat-table:not(:has(tbody)) th[colspan] {
    padding: 6px 4px 12px;
    border-bottom-color: rgba(0, 226, 255, 0.16);
    background: none;
    color: #e3ebf4;
    font: 700 18px/1.3 var(--m-game-font);
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.45), 0 0 14px rgba(0, 174, 255, 0.22);
  }

  /* Column headers of the registered guilds list. */
  .m-page-about .server-stat-table th:not([colspan]) {
    padding: 12px 10px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0, 226, 255, 0.3);
    background: linear-gradient(180deg, rgba(0, 226, 255, 0.1), rgba(0, 226, 255, 0.02));
    color: #9fdcef;
    font: 700 11px/1.2 var(--m-game-font);
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
  }

  /* The registered guilds rows set "padding: 0" inline. */
  .m-page-about .server-stat-table td[style*="padding"] {
    padding: 13px 10px !important;
  }

  /* Inner padding keeps the text clear of the neon frame. */
  .m-page-about .server-stat-table th:not([colspan]):first-child,
  .m-page-about .server-stat-table td:first-child {
    padding-left: 16px !important;
  }

  .m-page-about .server-stat-table th:not([colspan]):last-child,
  .m-page-about .server-stat-table td:last-child {
    padding-right: 16px !important;
  }

  .m-page-about .server-stat-table td {
    padding: 13px 10px;
    border: 0;
    border-bottom: 1px solid rgba(0, 226, 255, 0.09);
    vertical-align: middle;
  }

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

  /* Key / value rows: dim engraved label behind a neon diamond, bright value. */
  /* Hanging indent: wrapped label lines align with the text after the diamond (5px + 9px margin). */
  .m-page-about .server-stat-table td[style*="width:50%"]:first-child {
    width: 50% !important;
    padding-left: 30px !important;
    text-indent: -14px;
    color: #9aa8c2;
    font: 700 12px/1.4 var(--m-game-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

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

  /* Rows after the gold sub-title (castle owner bonuses) get gold diamonds. */
  .m-page-about .server-stat-table tr.main-tr ~ tr td[style*="width:50%"]:first-child:before {
    background: rgb(255, 196, 64);
    box-shadow: 0 0 6px rgba(255, 196, 64, 0.85);
  }

  .m-page-about .server-stat-table td[style*="width:50%"] + td {
    width: 50% !important;
  }

  /* Siege state in bright neon cyan. */
  .m-page-about .server-stat-table tbody tr:nth-child(2) td[style*="width:50%"] + td {
    color: #8ff3ff;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.6);
    text-transform: uppercase;
  }

  /* Castle owner in gold engraved capitals. */
  .m-page-about .server-stat-table tbody tr:first-child td[style*="width:50%"] + td {
    color: #f2d488;
    font: 700 16px/1.3 var(--m-game-font);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
  }

  .m-page-about .server-stat-table td span[style*="ffd05a"] {
    color: rgba(255, 208, 90, 0.8) !important;
    font-size: 11px !important;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: none;
    text-transform: none;
    white-space: nowrap;
  }

  /* Registered guilds: guild in gold, master in pale cyan instead of the inline yellow / green. */
  .m-page-about .server-stat-table td a[href*="/guild/"] {
    color: #f2d488 !important;
    font: 700 14px/1.3 var(--m-game-font) !important;
    letter-spacing: 0.06em;
  }

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

  .m-page-about .server-stat-table .i_note {
    margin: 0;
    padding: 18px 8px;
    color: #7f8ca6;
    font: 400 12px/1.4 var(--m-game-font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* About text (assets/about.html): every word in the engraved capitals; the file sets Georgia inline on many elements. */
  .m-page-about #general_information_main,
  .m-page-about #general_information_main *,
  .m-page-about details,
  .m-page-about details * {
    font-family: var(--m-game-font) !important;
  }

  /* About text (assets/about.html). */
  .m-page-about #general_information_main h1 {
    margin: 26px 0 14px !important;
    color: #e3ebf4 !important;
    font: 700 19px/1.35 var(--m-game-font) !important;
    letter-spacing: 0.1em;
    text-shadow: 0 0 5px rgba(0, 226, 255, 0.4);
  }

  .m-page-about #general_information_main p {
    margin-bottom: 16px !important;
    color: #a9b6cc;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }

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

  /* Top-level sections: engraved metal capitals between faint neon lines; the crystal icon is kept, smaller. */
  .m-page-about details:has(> summary.big) {
    border-bottom: 1px solid rgba(116, 136, 190, 0.14);
  }

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

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

  .m-page-about summary.big strong {
    font-weight: inherit;
  }

  .m-page-about summary.big::before {
    flex: 0 0 auto;
    width: 30px;
    height: 26px;
    filter: drop-shadow(0 0 4px rgba(0, 226, 255, 0.45));
  }

  .m-page-about details[open] > summary.big {
    filter: drop-shadow(0 0 5px rgba(0, 226, 255, 0.35));
  }

  .m-page-about summary.short,
  .m-page-about summary.short2 {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #c3cfde !important;
    font-size: 15px !important;
    letter-spacing: 0.03em;
  }

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

  .m-page-about details div[style*="font-size"] {
    font-size: 15px !important;
    line-height: 1.6;
  }

  /* Equal-height tabs regardless of how many lines each label wraps to: sharp neon buttons in the engraved
     capitals; the open tab is lit in castle gold (the desktop active colour). */
  .m-page-rules .tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 10px 4px;
    box-sizing: border-box;
    border: 1px solid var(--m-neon-line);
    border-radius: 0;
    background: var(--m-strip), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 10px rgba(0, 226, 255, 0.08);
    /* The label stays as bright on a closed tab as on the open one; only the frame and the colour mark the open tab. */
    color: #dff6ff;
    font: 700 11px/1.3 var(--m-game-font);
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(0, 226, 255, 0.7);
    text-transform: uppercase;
    /* Long single words ("Пользовательское", "конфиденциальности") are wider than a third of the screen: they are
       hyphenated in the page language (<html lang>), or broken anywhere where the browser has no hyphenation for it. */
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    opacity: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .m-page-rules .tab.active {
    border-color: rgba(255, 196, 64, 0.6);
    background: linear-gradient(180deg, rgba(255, 196, 64, 0.16), rgba(255, 196, 64, 0.03)), rgba(9, 13, 25, 0.62);
    box-shadow: 0 0 14px rgba(255, 196, 64, 0.25), inset 0 0 12px rgba(255, 196, 64, 0.08);
    color: var(--m-gold-text);
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.6);
  }

  .m-page-rules .tab.active:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 34px;
    height: 1px;
    margin-left: -17px;
    background: rgb(255, 196, 64);
    box-shadow: 0 0 8px rgba(255, 196, 64, 0.8);
  }

  /* Rules text (assets/rules.html sets Georgia, bold and colours inline): the Server info text style.
     Section headings (#ffcc99) become gold engraved capitals, body text (#8793ac) the regular light text. */
  .m-page-rules .tab-content,
  .m-page-rules .tab-content * {
    font-family: var(--m-game-font) !important;
  }

  .m-page-rules .tab-content h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.02em;
  }

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

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

  .m-page-rules .tab-content p {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.02em;
    text-align: left !important;
  }

  .m-page-rules .tab-content span[style*="ffcc00"] {
    color: var(--m-gold-text) !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: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 196, 64, 0.22);
    color: var(--m-gold-text) !important;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-shadow: 0 0 8px rgba(255, 196, 64, 0.45);
    text-transform: uppercase;
  }

  /* Nested inline spans inside a heading must not repeat the heading frame. */
  .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 ul {
    margin: 0 0 6px;
    padding: 0;
  }

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

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

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

@media (max-width: 900px) and (min-width: 560px) {
  /* Two action tiles per row on large phones and tablets. */
  .m-page-account_panel #character-info tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

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

  .m-page-account_panel #character-info td {
    margin-bottom: 0;
  }
}

@media (max-width: 380px) {
  .m-ready .m-brand {
    font-size: 15px;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
  }

  .m-ready .m-account-name {
    display: none;
  }

  .m-page-home .news .news-title a {
    font-size: 19px;
  }

  .m-page-info .content div[style*="height:407px"] {
    zoom: 0.78;
  }

  /* Hero ranking titles: translations are longer than "Top players", so the narrowest phones get tighter spacing. */
  .m-ready .m-hero .sidebar-title {
    letter-spacing: 0.14em;
    text-indent: 0.14em;
  }
}

/* Narrow windows with a real pointer keep the desktop hover behaviour of the ranking tooltips. */
@media (max-width: 900px) and (hover: hover) {
  .m-ready .rank-hover-tooltip:hover::before,
  .m-ready .rank-hover-tooltip:hover::after {
    display: block;
  }
}

@keyframes m-sync-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 140, 30, 0.45); }
  50% { box-shadow: 0 0 18px rgba(255, 160, 50, 0.85); }
}

@keyframes m-legal-glow {
  0%, 100% { color: #00e2ff; text-shadow: 0 0 2px #00e2ff; }
  50% { color: gold; text-shadow: 0 0 6px gold; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .m-ready .left-sidebar,
  .m-ready .m-backdrop,
  .m-ready .wiki-search-block,
  .m-burger span {
    transition: none !important;
  }
}

@keyframes m-brand-flicker {
  0%, 100% { text-shadow: 0 0 5px rgba(0, 226, 255, 0.45), 0 0 14px rgba(0, 174, 255, 0.22); }
  50% { text-shadow: 0 0 5px rgba(109, 255, 158, 0.6), 0 0 14px rgba(47, 243, 135, 0.3); }
}

@keyframes m-rank-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes m-rank-run {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

/* translateX is relative to the sweep width (40% of the row), so 320% carries it past the right edge. */
@keyframes m-rank-sweep {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(320%); }
}

/* The same sweep from right to left (top guilds, the mirrored rows). */
@keyframes m-rank-sweep-mirror {
  0% { transform: translateX(120%); }
  45%, 100% { transform: translateX(-320%); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .login-profile-table a.m-discord-sync,
  .login-profile-table a[href$="/discord"],
  .m-brand b,
  .m-hero .top-player:before,
  .m-hero .top-player:after,
  .m-hero .top-1-player + .top-player.top-guild-row:after {
    animation: none;
  }
}