/* Apex MU visual skin. Production DOM, navigation, routes and event handlers are unchanged. */
:root {
  --ink: #101317;
  --ink-blue: #111923;
  --steel: #1b2530;
  --steel-light: #263442;
  --gold: #d9b368;
  --gold-bright: #ffe09a;
  --gold-deep: #8e612d;
  --muted: #c4cdd7;
}
body::before {
  background: linear-gradient(#10151bcc, #10151be8), url('/apex-assets/bg/b2.png') center top / cover;
}
::selection { color: #07111b; background: #f3ce80; }
input, select { caret-color: #f3ce80; }
html { scrollbar-color: #9a7d46 #10171f; }
.command-bar { background: linear-gradient(#111921f5, #070d15ee); border-bottom-color: #a27c40; }
.apex-brand-mark {
  display: block;
  width: 126px;
  height: 68px;
  background: url('/apex-assets/apex-mu-logo.png') center / contain no-repeat;
}
.hero-art {
  background-image: url('/apex-assets/hero-composition.jpg');
  background-position: center min(0px, calc(max(760px, 100svh) - 61.5258vw));
  background-size: max(100vw, 1235.2px, 162.5333svh) auto;
  background-repeat: no-repeat;
}
.hero-home::before { background: linear-gradient(0deg, #10151b66, transparent 17%); }
.inner-hero-art { background-image: url('/apex-assets/bg/full__big.jpg'); }
.status-ribbon { border-color: #aa8247; background: linear-gradient(#132137f5, #060e1af5); }
.status-ribbon > span { color: #e5e9ef; font-variant-numeric: tabular-nums; }
.dispatch-card--announcement { background: linear-gradient(135deg, #1a2634, #101820 75%); }
.dispatch-art { background: #0c1520; }
.dispatch-art img { content: url('/apex-assets/bg/full__big.jpg'); object-fit: cover; }
.dispatch-details { background: #111b27; }
.opening-callout { background: #182633; }
.war-table-frame { background-image: url('/apex-assets/khungmenu/khungmenu.png'); }
.ornate-panel, .login-panel, .rank-shell {
  border-color: #a27a3f;
  background: linear-gradient(#111b27ed, #0a111beF), url('/apex-assets/bg/b2.png') center / cover;
}
.input-wrap, .rank-toolbar select { border-color: #a69570; border-radius: 5px; background: #0c141e; }
.input-wrap:focus-within { border-color: #77caff; }
.account-board { font-family: Arial, sans-serif; }
.account-stat { color: #f1f2f4; font-weight: 600; }
.stat-server small { font-weight: 600; }
.rank-shell { background-color: #101a25; }
.rank-shell table { font-family: Arial, sans-serif; font-size: 14px; }
.rank-shell tr { background: url('/apex-assets/ranking/Layer%2079%20copy%202.png') center / 100% 100% no-repeat; }
.rank-shell td { background: #0a152066; }
.rank-shell th { background: #0b1520; color: #ead7a6; font-family: Georgia, serif; }
.rank-shell strong { font-variant-numeric: tabular-nums; }
.package-card { border-color: #9c7c45; background: linear-gradient(#172635, #0b141e); }
.site-footer { background: #0a1118; border-color: #8d6938; }

/* Keep the original registration fields, tab order, defaults and validation.
   Only align their visual surfaces with the supplied blank registration artwork. */
@media (min-width: 801px) {
  .register-panel { container-type: inline-size; }
  .register-art { background-image: url('/apex-assets/reg/Layer%2084%20copy%203.png'); }
  .register-form {
    inset: 0;
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 0;
    display: block;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: Arial, sans-serif;
  }
  .register-form .form-field { position: absolute; width: 26.23%; height: 6.4%; margin: 0; }
  .register-form .form-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .register-form .form-field:nth-child(1) { left: 36.76%; top: 30.2%; }
  .register-form .form-field:nth-child(2) { left: 36.76%; top: 44.16%; }
  .register-form .form-field:nth-child(3) { left: 36.76%; top: 57.85%; }
  .register-form .form-field:nth-child(4) { left: 65.79%; top: 30.2%; width: 28%; }
  .register-form .form-field:nth-child(5) { left: 36.76%; top: 71.04%; }
  .register-form .form-field:nth-child(6) { left: 65.79%; top: 44.16%; width: 15.64%; }
  .register-form .input-wrap { display: block; height: 100%; min-height: 0; border: 0; background: transparent; box-shadow: none; }
  .register-form .input-wrap > svg { display: none; }
  .register-form .input-wrap input, .register-form .input-wrap select {
    height: 100%;
    min-height: 0;
    width: 100%;
    padding: 0 5% 0 18%;
    border: 0;
    border-radius: 0;
    color: #eef1f3;
    background: transparent;
    font: 1.42cqw / 1.2 Arial, sans-serif;
  }
  .register-form .input-wrap input::placeholder { color: #bec9d2; opacity: 1; }
  .register-form .input-wrap input:focus-visible, .register-form .input-wrap select:focus-visible { outline: 2px solid #77cbff; outline-offset: 1px; }
  .register-form select { appearance: none; }
  .register-form select option { background: #101923; }
  .register-form .field-error { position: absolute; top: 100%; left: 0; margin: .2cqw 0 0; font: 1.04cqw / 1.2 Arial, sans-serif; }
  .register-form .field-error:empty { display: none; }
  .register-form .captcha-row { display: block; height: 100%; }
  .register-form .captcha-row input { padding-left: 27%; padding-right: 3%; font-size: 1.3cqw; }
  .register-form .captcha-image { position: absolute; top: 0; left: 104%; width: 52%; height: 100%; margin: 0; border: 0; object-fit: contain; background: #0d151e; }
  .register-form .captcha-refresh {
    position: absolute;
    left: 156%;
    top: 0;
    width: 24%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: url('/apex-assets/reg/Layer%2085.png') center / 58% auto no-repeat;
    color: transparent;
    font-size: 0;
  }
  .register-form .terms-row {
    position: absolute;
    left: 65.9%;
    top: 54.6%;
    width: 28%;
    min-height: 12%;
    margin: 0;
    padding: .35cqw .35cqw .35cqw 0;
    align-items: flex-start;
    gap: .65cqw;
    background: #091018;
    color: #d4dbe3;
    font: 1.3cqw / 1.5 Arial, sans-serif;
  }
  .register-form .terms-row input { flex: 0 0 auto; width: 1.7cqw; height: 1.7cqw; margin: .15cqw 0 0; accent-color: #e9bb5c; }
  .register-form .terms-row a, .register-form .login-row a { color: #ffdc80; text-decoration: underline; }
  .register-form .asset-submit { position: absolute; left: 43.75%; top: 77.7%; width: 40.1%; margin: 0; }
  .register-form .asset-submit img { width: 100%; height: auto; }
  .register-form .login-row {
    position: absolute;
    left: 47%;
    top: 90.5%;
    width: 38%;
    padding: .5cqw 0;
    margin: 0;
    background: #091018;
    font: 1.25cqw / 1.3 Arial, sans-serif;
    text-align: center;
  }
  .register-form .form-feedback { position: absolute; top: 100%; left: 35%; width: 62%; margin: .5em 0 0; font: 14px / 1.4 Arial, sans-serif; }
  .register-panel:has(.form-feedback:not(:empty)) { margin-bottom: 60px; }
}
@media (max-width: 800px) {
  .apex-brand-mark { width: 104px; height: 62px; }
  .hero-art { background: url('/apex-assets/bg/sm__full.jpg') center top / cover no-repeat; }
  .register-form { background: #0c151f; border-color: #ad8c50; font-family: Arial, sans-serif; font-size: 15px; }
  .register-form .form-field label { color: #efcf88; font-family: Georgia, serif; }
  .register-form .input-wrap input, .register-form .input-wrap select { font-size: 16px; }
  .download-board, .war-table { background-color: #111b26; }
  .normal-client::before, .lite-client::before { color: #f2d493; font: 600 18px / 1.3 Georgia, serif; }
  .normal-client::before { content: 'Normal client'; }
  .lite-client::before { content: 'Client Lite'; }
  .rank-shell tr { background: #111c29; }
  .rank-shell td { background: transparent; }
  .rank-shell td::before { color: #e5c785; }
}
@media (max-width: 520px) {
  .account-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    aspect-ratio: auto;
    padding: 22px;
    border: 1px solid #aa8247;
    background: #111c29;
  }
  .account-board-art { display: none; }
  .account-board::before { content: 'Account overview'; color: #f2d493; font: 600 24px / 1.2 Georgia, serif; margin-bottom: 18px; }
  .account-stat {
    position: static;
    max-width: none;
    padding: 12px 0;
    border-bottom: 1px solid #8e703e66;
    color: #edf1f5;
    font: 600 15px / 1.4 Arial, sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .account-stat::before { display: block; margin-bottom: 4px; color: #d3bd89; font: 400 13px / 1.3 Arial, sans-serif; }
  .stat-wcoin::before { content: 'WCoin'; }
  .stat-server::before { content: 'Server'; }
  .stat-goblin::before { content: 'Goblin points'; }
  .stat-email::before { content: 'Email'; }
  .stat-account::before { content: 'Account'; }
  .stat-login::before { content: 'Last login'; }
  .stat-rank::before { content: 'Rank'; }
  .stat-member::before { content: 'Member since'; }
  .stat-discord::before { content: 'Discord'; }
  .discord-sync { position: static; width: 120px; margin-top: 16px; }
}