@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 never references theme images:
 * it overrides layout properties and keeps each theme's own artwork where it still fits.
 * 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;
}

/* Account panel action buttons (all widths): 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.
   Links are matched by URL as well as by class so the styling does not depend on the view markup version. */
.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: 32px;
  margin: 2px 0;
  padding: 0 16px !important;
  box-sizing: border-box;
  border-radius: 999px;
  font: bold 14px/1.2 Arial, Helvetica, sans-serif;
  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 #3f517c;
  background: rgba(255, 255, 255, 0.04);
  color: #a4afc8;
  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.55);
  background: rgba(0, 226, 255, 0.12);
  color: #bfefff;
  font-size: 13px;
  box-shadow: 0 0 10px rgba(0, 226, 255, 0.3);
}

.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;
    --m-radius: 12px;
  }

  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: 1px solid var(--m-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
  }

  .m-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--m-text);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .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;
    font: 22px/1 "Times New Roman", Times, serif;
    letter-spacing: 4px;
    color: #bfffff;
    text-shadow: 0 0 6px #5fccff, 0 0 16px #00aeff;
    white-space: nowrap;
  }

  .m-brand b {
    color: var(--m-gold);
    font-weight: normal;
    text-shadow: 0 0 8px rgba(222, 207, 161, 0.6);
  }

  .m-account-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 40%;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--m-title);
  }

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

  .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
  ---------------------------------------------------------------------------*/
  .m-ready .m-hero.is-filled {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .m-hero-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

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

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

  .m-hero-col > * {
    flex: 1 1 auto;
    height: auto;
    margin: 0 !important;
    padding: 10px 8px !important;
    box-sizing: border-box;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    background: rgba(9, 13, 25, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .m-hero .sidebar-title {
    margin: 0 0 8px !important;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .m-hero .sidebar-title:first-letter {
    font-size: 15px;
  }

  .m-hero br {
    display: none;
  }

  /* Top players: one row per player, keeping the theme's rank icons. */
  .m-hero .top-players {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

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

  .m-hero .top-player {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 6px 0 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
  }

  .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;
  }

  .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;
    width: 40px;
    height: 34px;
    background-size: contain;
    background-position: center;
  }

  .m-hero .top-player span:last-child {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    text-align: left;
  }

  /* Server dropdown: only the active server is shown; tapping it opens the list (mobile.js toggles .is-open).
     The theme artwork (187x60) is shown at its natural size, never upscaled. */
  .m-hero-servers {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    min-height: 64px;
  }

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

  .m-ready .m-hero .server-block.is-open {
    position: absolute;
    top: -7px;
    left: 50%;
    width: 282px;
    padding: 6px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border: 1px solid var(--m-line);
    border-radius: 14px;
    background: rgba(9, 13, 25, 0.97);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  }

  .m-ready .m-hero .server {
    position: relative;
    display: none;
    box-sizing: border-box;
    width: 100%;
    height: 64px;
    padding: 0 42px 0 0;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    background-color: rgba(9, 13, 25, 0.78);
    background-position: 10px center;
    background-size: auto;
    opacity: 0.75 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .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;
    border-color: rgba(0, 226, 255, 0.65);
    box-shadow: 0 0 12px rgba(0, 226, 255, 0.35), inset 0 0 10px rgba(0, 226, 255, 0.12);
  }

  .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: 16px;
    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 {
    padding-left: 0;
    margin: 0;
    line-height: 62px;
    font-size: 26px;
    text-align: right;
  }

  /* Top guild: icon above the guild name. */
  .m-ready .m-hero .castle-block {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .m-ready .m-hero .top-guild {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0;
  }

  .m-ready .m-hero .top-guild span {
    position: static;
    max-width: 100%;
  }

  /* Guild icon and name at their full desktop size (100x100 artwork), centred. */
  .m-ready .m-hero #top_guilds {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m-ready .m-hero .top-guild {
    justify-content: center;
    width: 100%;
  }

  .m-ready .m-hero .creative-guild-icon {
    width: 100px;
    height: 100px;
  }

  .m-ready .m-hero .top-guild-personal-img {
    display: none;
  }

  .m-ready .m-hero .top-guild-img {
    margin: 0;
    padding: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .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;
  }

  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;
  }

  .m-ready .wiki-search-input,
  .m-ready .wiki-search-language,
  .m-ready .wiki-search-control button {
    height: 44px;
    font-size: 16px;
  }

  /* 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 6px;
    text-align: center;
  }

  .m-events-hint {
    color: var(--m-text-dim);
    font-size: 12px;
  }

  /* 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 var(--m-line);
    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;
    font-size: 15px;
    color: var(--m-title);
  }

  /* 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;
  }

  .m-events-list #events .event-wiki-hint {
    display: none;
  }

  .m-events-list #events small {
    float: none;
    flex: 0 0 auto;
    width: auto;
    padding: 5px 10px;
    border: 1px solid var(--m-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #bfefff;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 1 !important;
  }

  .m-events-list #events > div.is-soon small {
    border-color: rgba(255, 154, 46, 0.7);
    background: rgba(255, 154, 46, 0.15);
    color: #ffc27a;
  }

  /* 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: 2px solid var(--m-line-strong);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    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: 2px 0 0 6px;
    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 6px 0 12px;
    border: 1px solid rgba(0, 226, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 226, 255, 0.08);
    color: var(--m-title);
    font: 13px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
  }

  .m-pinned-time {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    color: #bfefff;
    font-variant-numeric: tabular-nums;
  }

  .m-pinned-event.is-soon {
    border-color: rgba(255, 154, 46, 0.75);
    background: rgba(255, 154, 46, 0.14);
  }

  .m-pinned-event.is-soon .m-pinned-time {
    color: #ffc27a;
  }

  /* Telegram entry lives inside the Discord menu item (see view.left_sidebar.php). */
  .m-ready .menu li a.m-mobile-only {
    display: flex !important;
  }

  .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;
  }

  .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 copyright block is not inside .footer (a stray </div> in view.footer.php closes it early),
     so the space reserved for the tab bar is added to the body itself. */
  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 (inline-styled with wide letter-spacing for desktop). */
  .m-ready .body-t > div[style] {
    padding: 12px 16px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.6;
  }

  .m-ready .counters {
    position: static;
    padding: 0;
  }

  /* Guest login form (view.top_content.php)
  ---------------------------------------------------------------------------*/
  .m-ready .login-block {
    width: auto;
    height: auto;
    margin: 16px 0 20px;
    padding: 14px;
    background: var(--m-panel);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
  }

  .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: 46px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid #414b68;
    border-radius: 8px;
    background: rgba(5, 10, 23, 0.9);
    color: #d7deef;
    font-size: 16px;
    text-align: left;
  }

  .m-ready .login-block input:focus {
    outline: none;
    border-color: var(--m-accent);
    box-shadow: 0 0 6px rgba(0, 201, 255, 0.35);
  }

  /* Keeps the theme's login icon, only enlarges the tap target. */
  .m-ready .login-block button {
    flex: 1 1 100%;
    width: auto;
    height: 46px;
    margin: 0;
    border: 1px solid #414b68;
    border-radius: 8px;
    background-color: rgba(71, 82, 196, 0.55);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .m-ready .login-block button:active {
    background-color: rgba(71, 82, 196, 0.9);
  }

  /* Player card (view.top_content.php, logged in)
     Grid: avatar | name + server | logout, then Emeralds - Diamonds - Rubies in one bottom row.
     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: 76px minmax(0, 1fr) 44px;
    grid-template-areas:
      "avatar welcome logout"
      "avatar server  logout"
      "money  money   money";
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px !important;
    margin-bottom: 16px !important;
    border-color: var(--m-line) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-panel) !important;
  }

  .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;
  }

  .m-ready .m-player-card .leftwel {
    grid-area: avatar;
    float: none;
    width: 76px;
  }

  /* The link is the positioning box of its caption, so the hover filter on links
     (which creates a new containing block) no longer shifts "Open Account Panel". */
  .m-ready .m-player-card .leftwel a {
    display: block;
    position: relative;
  }

  .m-ready .avatar_frame {
    width: 76px;
    height: 76px;
    background-size: contain;
  }

  .m-ready .avatar-text {
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    font-size: 9px;
  }

  .m-ready .m-player-card .riwel ul li {
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  .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: 8px !important;
  }

  .m-ready .votewrap,
  .m-ready .diamondwrap,
  .m-ready .goblinwrap {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    border: 1px solid var(--m-line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
  }

  .m-ready .Diamonds p {
    margin: 0;
    font-size: 15px;
  }

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

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

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

  .m-ready .btn-profile-logout-position a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--m-line);
    border-radius: 10px;
  }

  /* The 9px server-switch icon gets a finger-sized tap area. */
  .m-ready .select_server_switch {
    width: 28px;
    height: 28px;
    margin: -10px 0 -10px 2px;
    vertical-align: middle;
    background-size: 12px !important;
  }

  /* Server selector modal */
  .m-ready #select_server {
    width: 92vw !important;
    max-width: 400px;
    left: 50% !important;
    margin-left: 0 !important;
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .m-ready #select_server select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  /* 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
  ---------------------------------------------------------------------------*/
  .m-page-home .news {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    background: var(--m-panel);
    overflow-wrap: break-word;
  }

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

  .m-page-home .news .news-title span {
    float: none;
    display: block;
    margin-bottom: 4px;
  }

  .m-page-home .news .news-title a {
    display: block;
    font-size: 21px;
    line-height: 1.25;
  }

  .m-page-home .news .news-text {
    padding: 6px 0 10px;
  }

  /* 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;
  }

  .m-page-home .news .news-info {
    overflow: hidden;
    line-height: 36px;
  }

  .m-page-home .news .news-info .read-more {
    height: auto;
    margin-top: 2px;
    padding: 8px 14px;
    border: 1px solid var(--m-line-strong);
    border-radius: 999px;
    color: #a6b6d8;
    line-height: 1.2;
  }

  .m-ready .pagination {
    padding: 8px 0 16px;
  }

  .m-ready .pagination a,
  .m-ready .pagination .number {
    display: inline-block;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    width: auto;
    margin: 2px;
  }

  .m-ready .i_note,
  .m-ready .e_note,
  .m-ready .w_note,
  .m-ready .s_note {
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 10px;
  }

  /* 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;
  }

  .m-page-account_panel .login-profile-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    background: var(--m-panel);
    overflow: hidden;
  }

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

  .m-page-account_panel .login-profile-table td {
    padding: 11px 8px;
    border: 0 !important;
    border-bottom: 1px solid var(--m-line) !important;
    font-size: 14px;
    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 {
    color: var(--m-title);
  }

  /* 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;
  }

  .m-page-account_panel #character-info td {
    position: relative;
    margin-bottom: 10px;
    padding: 14px 40px 14px 14px;
    border-radius: var(--m-radius);
    font-size: 13px;
    line-height: 1.4;
  }

  .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: 4px;
    font-size: 15px;
  }

  /* 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 {
    background: rgba(35, 45, 75, 0.95);
    border-color: rgba(0, 226, 255, 0.45);
  }

  /* 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;
  }

  .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 {
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 16px;
  }

  .m-ready .content .button-style,
  .m-ready #content .button-style {
    width: 100% !important;
    min-height: 46px;
    margin-top: 8px;
    font-size: 15px;
  }

  /* Submit buttons span the form; desktop wrappers push them right with inline margins (e.g. registration). */
  .m-ready .content form button[type="submit"],
  .m-ready #content form button[type="submit"] {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
  }

  .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 (see above). */
  .m-ready .login-block #login_form input {
    width: auto !important;
  }

  /* 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;
  }

  /* 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)
     Players: one symmetric row with the desktop order
     class icon | name | rank (exact centre) | points | guild emblem.
     Equal outer columns keep both icons the same distance from the centred rank.
  ---------------------------------------------------------------------------*/
  .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%;
  }

  .m-page-rankings .ranking-table tr.tr-bg-image {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 40px minmax(0, 1fr) 36px;
    grid-template-areas: "icon nick rank stats mark";
    align-items: center;
    column-gap: 8px;
    padding: 10px 2px;
    background-size: 90% 1px;
  }

  .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.5px;
  }

  .m-page-rankings .ranking-table .td-nick a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 14px;
    line-height: 32px;
  }

  .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;
    text-align: center;
  }

  /* Stat values (top line) and points (bottom line) 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;
  }

  .m-page-rankings .ranking-table .td-points {
    position: relative;
    width: auto;
    margin: 0;
    padding-top: 22px;
    font-size: 17px;
    line-height: 18px;
    text-align: right;
  }

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

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

  .m-page-rankings .ranking-table .td-rank-values > div {
    font-size: 11px;
    line-height: 18px;
  }

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

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

  .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;
  }

  .m-page-rankings .guild-ranking-table tr {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 40px;
    grid-template-areas:
      "rank name score   mark"
      "rank name members mark";
    align-items: center;
    column-gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--m-line);
  }

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

  .m-page-rankings .guild-td-rank {
    grid-area: rank;
    font-size: 17px;
  }

  .m-page-rankings .guild-td-name {
    grid-area: name;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 16px;
  }

  .m-page-rankings .guild-td-score {
    grid-area: score;
    font-size: 16px;
    text-align: right;
  }

  .m-page-rankings .guild-td-members {
    grid-area: members;
    font-size: 13px;
    text-align: right;
  }

  .m-page-rankings .guild-td-members:before {
    content: "Members ";
    color: var(--m-text-dim);
    font: 10px Arial, Helvetica, sans-serif;
    text-transform: uppercase;
  }

  .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;
    image-rendering: pixelated;
  }

  /* Equal-height tabs regardless of how many lines each label wraps to. */
  .m-page-rules .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 1.25;
  }

  .m-page-rules .tab.active {
    border-color: rgba(255, 204, 0, 0.55);
    background: rgba(255, 204, 0, 0.08);
  }
}

@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: 18px;
    letter-spacing: 2px;
  }

  .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;
  }
}

@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); }
}

@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;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-profile-table a.m-discord-sync,
  .login-profile-table a[href$="/discord"] {
    animation: none;
  }
}