/*
 * Shared visual language.
 * Character Select is the reference: neutral black surfaces, restrained gold
 * structure, green confirmation states, and red destructive states.
 */

/* Global controls */
button,
input {
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline-color: var(--gold-bright);
}

.brand-mark {
  border-color: rgba(194, 161, 88, 0.48);
  background: linear-gradient(180deg, #15130f, #0b0b0a);
  color: var(--gold-bright);
  box-shadow: inset 0 0 14px rgba(194, 161, 88, 0.04);
}

.eyebrow,
.server-list-title,
.zone-label,
.hud-group-title {
  color: #8f7b4e;
}

.button {
  border-color: #494234;
  background: linear-gradient(180deg, #171613, #0f0f0e);
  color: #d9d6cc;
}

.button:hover:not(:disabled) {
  border-color: #8e7744;
  background: #1b1812;
  color: var(--gold-bright);
  box-shadow: var(--gold-glow);
}

.button.primary {
  border-color: #806b3d;
  background: linear-gradient(180deg, #211d13, #15130e);
  color: #e3cc8d;
  font-weight: 500;
}

.button.primary:hover:not(:disabled) {
  border-color: #c3a158;
  background: #2a2314;
  color: #f1d894;
  box-shadow: 0 0 19px rgba(194, 161, 88, 0.18);
}

.button.danger {
  border-color: #71383b;
  background: #190d0f;
  color: #e66b70;
}

.button.danger:hover:not(:disabled) {
  border-color: #e6575d;
  background: #260f12;
  color: #ff7b80;
  box-shadow: var(--danger-glow);
}

.button.ghost {
  color: #9d9685;
}

.button.ghost:hover:not(:disabled) {
  border-color: rgba(194, 161, 88, 0.36);
  background: rgba(194, 161, 88, 0.04);
}

.field label {
  color: #9e947d;
}

.field input {
  border-color: #3d392f;
  background: #0b0b0b;
  color: var(--text);
}

.field input:hover {
  border-color: #5a5038;
}

.field input:focus {
  border-color: #9b8149;
  box-shadow: 0 0 0 1px rgba(194, 161, 88, 0.08), var(--gold-glow);
}

.toast {
  border-color: #655638;
  background: rgba(15, 14, 11, 0.98);
  color: #ded7c7;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.68), var(--gold-glow);
}

/* Shared pages: welcome, server, login, and loading */
.page-shell {
  background:
    radial-gradient(circle at 50% 43%, rgba(194, 161, 88, 0.035), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.005) 0, rgba(255, 255, 255, 0.005) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, #101010, #080808);
}

.site-header,
.site-footer {
  position: relative;
  border-color: transparent;
  background: rgba(7, 7, 7, 0.97);
}

.site-header::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 161, 88, 0.24) 20%, rgba(194, 161, 88, 0.1) 50%, rgba(194, 161, 88, 0.24) 80%, transparent);
  pointer-events: none;
}

.site-header::after {
  bottom: 0;
}

.site-footer::before {
  top: 0;
}

.brand-name {
  color: #f0eee8;
}

.brand-subtitle,
.header-meta,
.site-footer {
  color: #706b60;
}

.welcome-layout,
.section-frame,
.loading-stage {
  border-color: #3c372c;
  background: rgba(14, 14, 13, 0.96);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(194, 161, 88, 0.025);
}

.welcome-copy {
  border-color: #363127;
  background:
    radial-gradient(circle at 24% 42%, rgba(194, 161, 88, 0.065), transparent 29%),
    linear-gradient(145deg, #151514, #0d0d0d);
}

.welcome-copy h1 {
  color: #e8e1d0;
}

.welcome-copy p,
.welcome-panel-card p,
.section-heading p,
.account-panel > p,
.loading-stage p {
  color: #898680;
}

.welcome-panel {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.1), rgba(8, 8, 8, 0.91)),
    repeating-linear-gradient(135deg, #151513 0, #151513 1px, #0e0e0e 1px, #0e0e0e 14px);
}

.welcome-panel-card {
  border-color: #4a402b;
  background: rgba(11, 11, 10, 0.94);
  box-shadow: inset 3px 0 0 rgba(194, 161, 88, 0.32);
}

.section-heading {
  position: relative;
  border-color: transparent;
  background: #0b0b0b;
}

.section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(194, 161, 88, 0.34), rgba(194, 161, 88, 0.05) 65%, transparent);
}

.section-heading h1,
.account-panel h2,
.loading-stage h1 {
  color: #e7e2d6;
}

.server-list {
  border-color: #312d25;
}

.server-card {
  border-color: #38342b;
  background: linear-gradient(180deg, #151514, #10100f);
}

.server-card:hover {
  border-color: #76643b;
  background: #191711;
  box-shadow: var(--gold-glow);
}

.server-card.selected {
  border-color: #a58a4c;
  background: #1b1811;
  box-shadow: inset 3px 0 0 #c2a158, var(--gold-glow);
}

.server-icon,
.server-mode {
  border-color: #4a4230;
  background: #0b0b0b;
  color: #cdb673;
}

.server-detail {
  color: #807d76;
}

.account-panel {
  background: #111110;
}

.local-warning {
  border-color: #393328;
  background: #0c0c0b;
  color: #746f65;
}

.loading-emblem {
  border-color: #75643c;
  background: #12110e;
  color: var(--gold-bright);
}

@keyframes loading-pulse {
  50% {
    border-color: #c2a158;
    box-shadow: 0 0 30px rgba(194, 161, 88, 0.16);
  }
}

.loading-track {
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(194, 161, 88, 0.08);
}

.loading-fill {
  background: linear-gradient(90deg, #6f5c32, #c2a158, #e2c87f);
  box-shadow: 0 0 12px rgba(194, 161, 88, 0.2);
}

/* Character creation dialog */
.dialog-backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}

.dialog,
.game-window {
  border-color: #51462f;
  background: #11110f;
  box-shadow: var(--shadow), 0 0 30px rgba(194, 161, 88, 0.04);
}

.dialog-header,
.window-header {
  position: relative;
  border-color: transparent;
  background: #0b0b0b;
}

.dialog-header::after,
.window-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(194, 161, 88, 0.34), rgba(194, 161, 88, 0.05), transparent);
  pointer-events: none;
}

.dialog-header h2,
.window-header {
  color: #e4decf;
}

.icon-button,
.window-close {
  border-color: #494234;
  background: #12110f;
  color: #b7ad95;
}

.icon-button:hover,
.window-close:hover {
  border-color: #a0874d;
  color: var(--gold-bright);
  box-shadow: var(--gold-glow);
}

.creator-preview {
  border-color: #4b402b;
  background: #080808;
}

.creator-controls {
  background: #111110;
}

.creator-class-heading {
  color: #c9c1af;
}

.creator-controls .race-option {
  border-color: #38342b;
  background: #121211;
}

.creator-controls .race-option:hover {
  border-color: #806c40;
  background: #191711;
}

.creator-controls .race-option.selected {
  border-color: #a58a4c;
  background: #1b1811;
  box-shadow: inset 3px 0 0 #c2a158, var(--gold-glow);
}

.race-option-thumbnail {
  border-color: #4b4230;
  background: #080808;
}

.race-option-copy strong {
  color: #e5e0d5;
}

.race-option-copy small,
.creator-controls .race-description {
  color: #817d75;
}

.available-badge {
  border-color: #3f7152;
  background: #101a14;
  color: #73bd8e;
}

/* Game interface */
body.game-active {
  background: #030303;
}

.game-shell {
  color: #888;
  background: radial-gradient(circle at 50% 30%, #161616 0%, #030303 100%);
}

.global-topbar,
.bottom-hud {
  border-color: rgba(255, 255, 255, 0.055);
  background: rgba(10, 10, 10, 0.66);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.global-topbar {
  box-shadow: 0 1px 18px rgba(0, 0, 0, 0.26);
}

.nav-action {
  position: relative;
  color: #858585;
}

.nav-action::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transition: left 160ms ease, right 160ms ease, box-shadow 160ms ease;
}

.nav-action:hover {
  color: #d4d4d4;
}

.nav-action:hover::after {
  left: 0;
  right: 0;
  box-shadow: 0 0 8px rgba(194, 161, 88, 0.35);
}

.topbar-status {
  color: #838383;
}

.settings-action,
.square-button,
.hud-slot {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(15, 15, 15, 0.42);
  color: #777;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.settings-action:hover,
.square-button:hover,
.square-button.is-active,
.hud-slot:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(25, 25, 25, 0.62);
  color: #ddd;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.025);
}

.side-button-label,
.hud-slot .key,
.hud-group-title {
  color: #666;
}

.square-button:hover .side-button-label,
.square-button.is-active .side-button-label {
  color: #ccc;
}

.main-interface {
  background:
    radial-gradient(circle at 50% 28%, rgba(31, 31, 31, 0.72), transparent 46%),
    radial-gradient(circle at 50% 72%, rgba(10, 16, 20, 0.34), transparent 54%),
    linear-gradient(180deg, rgba(14, 14, 14, 0.88), rgba(3, 3, 3, 0.98));
}

.fighter-name,
.zone-name {
  color: #e2e2e2;
}

.fighter-meta,
.combat-status,
.combat-wave {
  color: #777;
}

.zone-label,
.premium-inline {
  color: #d4b260;
}

.fighter-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.fighter-placeholder {
  border-color: rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at center, rgba(17, 26, 34, 0.74), rgba(5, 5, 5, 0.52));
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#enemyIcon {
  background: rgba(10, 10, 10, 0.42);
}

.fighter-hp-track {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(5, 5, 5, 0.82);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

.fighter-hp-fill {
  background: #c93838;
  box-shadow: none;
}

.combat-toggle {
  border-color: rgba(41, 77, 56, 0.64);
  background: rgba(22, 43, 31, 0.34);
  color: #64a97b;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.combat-toggle:hover {
  border-color: #5d9e73;
  background: rgba(41, 77, 56, 0.52);
  color: #8bd7a5;
  box-shadow: 0 0 18px rgba(93, 158, 115, 0.16);
}

.combat-divider {
  background: linear-gradient(180deg, transparent, rgba(212, 178, 96, 0.34), transparent);
}

.experience-strip {
  border-color: rgba(255, 255, 255, 0.045);
  background: rgba(7, 7, 7, 0.22);
}

.experience-track {
  background: rgba(0, 0, 0, 0.55);
  box-shadow: none;
}

.experience-fill {
  background: #5d9e73;
  box-shadow: 0 0 9px rgba(93, 158, 115, 0.18);
}

.hud-control-row {
  background: transparent;
}

.resource-square {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(10, 10, 10, 0.52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.resource-square.hp .resource-fill-vertical {
  background: rgba(201, 56, 56, 0.88);
}

.resource-square.sd .resource-fill-vertical {
  background: rgba(214, 132, 23, 0.82);
}

.resource-square.mp .resource-fill-vertical {
  background: rgba(36, 117, 184, 0.88);
}

.resource-square.ag .resource-fill-vertical {
  background: rgba(121, 81, 173, 0.84);
}

.modal-layer {
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.game-window {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(10, 10, 10, 0.76);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.window-header {
  background: rgba(10, 10, 10, 0.72);
  color: #ddd;
}

.window-header::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025), transparent);
}

.window-close {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.52);
  color: #888;
}

.window-close:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ddd;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.03);
}

.window-body {
  background: rgba(10, 10, 10, 0.66);
}

.generic-placeholder,
.generic-placeholder p,
.map-entry small,
.mission-entry small,
.skill-entry small {
  color: #85817a;
}

.generic-placeholder .placeholder-icon,
.generic-placeholder strong,
.window-list-value {
  color: #d7c89e;
}

.stat-points,
.stat-row,
.item-slot,
.map-entry,
.mission-entry,
.skill-entry {
  border-color: rgba(255, 255, 255, 0.065);
  background: rgba(15, 15, 15, 0.46);
}

.map-entry:hover,
.mission-entry:hover,
.skill-entry:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(25, 25, 25, 0.62);
  color: #ddd;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.025);
}

.plus-button {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 20, 0.55);
  color: #aaa;
}

.plus-button:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ddd;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.03);
}

/* Global neutral illumination pass */
.boot-screen,
.noscript-message {
  background:
    radial-gradient(circle at 50% 42%, rgba(149, 164, 176, 0.09), transparent 36%),
    #0d1013;
}

.brand-mark {
  border-color: rgba(181, 190, 198, 0.38);
  background: linear-gradient(180deg, #20242a, #14171b);
  color: #d8dde1;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.025);
}

.eyebrow,
.server-list-title,
.zone-label,
.hud-group-title {
  color: #8998a3;
}

.button {
  border-color: #505860;
  background: linear-gradient(180deg, #22272c, #181b1f);
  color: #dce0e3;
}

.button:hover:not(:disabled) {
  border-color: #788690;
  background: #293037;
  color: #f0f2f4;
  box-shadow: 0 0 16px rgba(155, 171, 183, 0.08);
}

.button.primary {
  border-color: #65747f;
  background: linear-gradient(180deg, #2b343b, #20272c);
  color: #e4e9ec;
}

.button.primary:hover:not(:disabled) {
  border-color: #98a8b4;
  background: #323c44;
  color: #fff;
  box-shadow: 0 0 16px rgba(158, 172, 183, 0.12);
}

.button.ghost {
  color: #aab3ba;
}

.button.ghost:hover:not(:disabled) {
  border-color: rgba(174, 186, 195, 0.36);
  background: rgba(158, 172, 183, 0.07);
}

.field label {
  color: #9ba5ad;
}

.field input {
  border-color: #454c53;
  background: #14171a;
}

.field input:hover,
.field input:focus {
  border-color: #77848e;
}

.field input:focus {
  box-shadow: 0 0 0 1px rgba(158, 172, 183, 0.09), 0 0 18px rgba(158, 172, 183, 0.06);
}

.toast {
  border-color: #59636b;
  background: rgba(24, 28, 32, 0.98);
  color: #e1e5e8;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48);
}

.page-shell {
  background:
    radial-gradient(circle at 50% 38%, rgba(136, 153, 166, 0.08), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.007) 0, rgba(255, 255, 255, 0.007) 1px, transparent 1px, transparent 4px),
    linear-gradient(180deg, #171a1e, #0d1013);
}

.site-header,
.site-footer {
  background: rgba(15, 18, 21, 0.96);
}

.site-header::after,
.site-footer::before,
.section-heading::after,
.dialog-header::after {
  background: linear-gradient(90deg, transparent, rgba(180, 192, 201, 0.22), rgba(180, 192, 201, 0.08), transparent);
}

.brand-subtitle,
.header-meta,
.site-footer {
  color: #7f878e;
}

.welcome-layout,
.section-frame,
.loading-stage {
  border-color: #41484f;
  background: rgba(23, 26, 30, 0.96);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.welcome-copy {
  border-color: #3b4248;
  background:
    radial-gradient(circle at 24% 42%, rgba(139, 158, 172, 0.1), transparent 32%),
    linear-gradient(145deg, #20242a, #15181c);
}

.welcome-copy h1,
.section-heading h1,
.account-panel h2,
.loading-stage h1 {
  color: #eceff1;
}

.welcome-copy p,
.welcome-panel-card p,
.section-heading p,
.account-panel > p,
.loading-stage p {
  color: #9ba1a7;
}

.welcome-panel {
  background:
    linear-gradient(180deg, rgba(20, 23, 27, 0.2), rgba(12, 14, 17, 0.88)),
    repeating-linear-gradient(135deg, #1c2025 0, #1c2025 1px, #14171a 1px, #14171a 14px);
}

.welcome-panel-card {
  border-color: #4b545c;
  background: rgba(21, 24, 28, 0.94);
  box-shadow: inset 3px 0 0 rgba(158, 172, 183, 0.26);
}

.section-heading,
.account-panel {
  background: #171a1e;
}

.server-list {
  border-color: #394047;
}

.server-card {
  border-color: #424950;
  background: linear-gradient(180deg, #20242a, #181b1f);
}

.server-card:hover {
  border-color: #6f7c86;
  background: #272d33;
  box-shadow: 0 0 16px rgba(158, 172, 183, 0.06);
}

.server-icon,
.server-mode {
  border-color: #515a62;
  background: #15181b;
  color: #b7c0c7;
}

.server-detail,
.local-warning {
  color: #90979d;
}

.local-warning {
  border-color: #41484f;
  background: #15181b;
}

.dialog,
.game-window {
  border-color: rgba(205, 213, 219, 0.18);
  background: #1a1e22;
  box-shadow: var(--shadow), 0 0 28px rgba(158, 172, 183, 0.035);
}

.dialog-header,
.window-header {
  background: #15181b;
}

.dialog-header h2,
.window-header {
  color: #e5e9ec;
}

.icon-button,
.window-close {
  border-color: #4a5259;
  background: #20252a;
  color: #aab3ba;
}

.icon-button:hover,
.window-close:hover {
  border-color: #7d8a94;
  color: #e7ebee;
  box-shadow: 0 0 14px rgba(158, 172, 183, 0.07);
}

.creator-preview {
  border-color: #424a51;
  background: #101215;
}

.creator-controls {
  background: #1b1f23;
}

.creator-class-heading {
  color: #c6ccd1;
}

.creator-controls .race-option {
  border-color: #454d54;
  background: #202429;
}

.creator-controls .race-option:hover {
  border-color: #76838d;
  background: #292f35;
}

.creator-controls .race-option.selected {
  background: #292b2c;
}

.race-option-thumbnail {
  border-color: #505961;
  background: #121417;
}

.race-option-copy strong {
  color: #e6e9eb;
}

.race-option-copy small,
.creator-controls .race-description {
  color: #969da3;
}

body.game-active {
  background: #090b0e;
}

.game-shell {
  color: #9ca2a8;
  background: radial-gradient(circle at 50% 28%, #24292f 0%, #0a0c0f 100%);
}

.global-topbar,
.bottom-hud {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 23, 27, 0.82);
}

.nav-action {
  color: #a1a7ad;
}

.nav-action::after {
  background: #94a3ae;
}

.nav-action:hover::after {
  box-shadow: 0 0 8px rgba(148, 163, 174, 0.2);
}

.nav-action.active::after {
  left: 0;
  right: 0;
  background: #c1a256;
  box-shadow: 0 0 8px rgba(193, 162, 86, 0.28);
}

.topbar-wallet {
  color: #a0a6ac;
}

.topbar-status {
  color: #a0a6ac;
}

.settings-action,
.square-button,
.hud-slot {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(31, 35, 40, 0.72);
  color: #a1a7ad;
}

.settings-action:hover,
.square-button:hover,
.square-button.is-active,
.hud-slot:hover {
  border-color: rgba(203, 211, 217, 0.35);
  background: rgba(48, 54, 61, 0.88);
  color: #f0f2f4;
  box-shadow: 0 0 16px rgba(158, 172, 183, 0.07);
}

.side-button-label,
.hud-slot .key,
.hud-group-title {
  color: #899198;
}

.main-interface {
  background:
    radial-gradient(circle at 50% 26%, rgba(62, 69, 77, 0.52), transparent 48%),
    radial-gradient(circle at 50% 72%, rgba(30, 38, 45, 0.4), transparent 56%),
    linear-gradient(180deg, rgba(25, 29, 33, 0.94), rgba(10, 12, 15, 0.98));
}

.fighter-meta,
.combat-status,
.combat-wave {
  color: #969da3;
}

.fighter-placeholder {
  border-color: rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at center, rgba(33, 43, 52, 0.82), rgba(13, 16, 20, 0.68));
}

#enemyIcon {
  background: rgba(24, 28, 32, 0.62);
}

.fighter-hp-track,
.resource-square {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(22, 25, 29, 0.72);
}

.experience-strip {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(18, 21, 24, 0.46);
}

.modal-layer {
  background: rgba(5, 7, 9, 0.58);
}

.game-window {
  background: rgba(22, 25, 29, 0.92);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.54);
}

.window-header {
  background: rgba(24, 27, 31, 0.94);
}

.window-header::after {
  background: linear-gradient(90deg, rgba(190, 201, 209, 0.2), rgba(190, 201, 209, 0.04), transparent);
}

.window-body {
  background: rgba(19, 22, 26, 0.86);
}

.generic-placeholder,
.generic-placeholder p,
.map-entry small,
.mission-entry small,
.skill-entry small {
  color: #9aa1a7;
}

.generic-placeholder .placeholder-icon,
.generic-placeholder strong,
.window-list-value {
  color: #d2d7db;
}

.stat-points,
.stat-row,
.item-slot,
.map-entry,
.mission-entry,
.skill-entry {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(31, 35, 40, 0.72);
}

/* Gold stays on selection borders; ordinary active surfaces use neutral steel. */
.mu-skill-reset:hover,
.mu-shop-category.active,
.mu-shop-tab.active,
.mu-shop-product button:hover,
.mu-move-row.selected,
.mu-move-warp:not(:disabled),
.mu-quest-tabs button.active,
.mu-quest-list-item.active,
.mu-quest-detail-panel > footer button,
.mu-craft-recipe-list button.active,
.mu-craft-slot.filled,
.mu-craft-slot.ready,
.mu-craft-summary button,
.mu-craft-status button,
.mu-guild-tabs button.active,
.mu-guild-actions button:first-child:not(:disabled),
.mu-guild-actions button:last-of-type:not(:disabled),
.mu-guild-member-row.current {
  background: rgba(54, 61, 68, 0.62);
}

.mu-skill-pill.title i,
.mu-move-row.selected .mu-move-name i {
  background: #8997a2;
  box-shadow: 0 0 8px rgba(137, 151, 162, 0.14);
}

/* Character selection receives the same brighter neutral base. */
.character-select-page {
  background:
    radial-gradient(circle at 50% 42%, rgba(135, 153, 167, 0.1), transparent 46%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.008) 0, rgba(255, 255, 255, 0.008) 1px, transparent 1px, transparent 4px),
    #101317;
}

.character-select-header,
.character-action-bar {
  background: rgba(17, 20, 23, 0.97);
}

.character-select-header::after,
.character-action-bar::before,
.character-stage::before,
.character-stage::after {
  background: linear-gradient(90deg, transparent, rgba(181, 193, 202, 0.2), rgba(181, 193, 202, 0.07), transparent);
}

.character-select-header h1 {
  color: #d7dce0;
}

.character-select-page .character-slot {
  border-color: rgba(132, 142, 150, 0.48);
  background:
    radial-gradient(circle at 50% 34%, rgba(164, 180, 192, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(35, 39, 44, 0.96), rgba(18, 21, 25, 0.98));
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
}

.character-select-page .character-slot:hover {
  border-color: rgba(173, 185, 194, 0.65);
  background-color: #272c31;
}

.character-select-page .slot-number,
.character-select-page .slot-status {
  color: #949ca3;
}

.character-select-page .empty-slot-icon {
  border-color: rgba(159, 170, 179, 0.58);
  background: rgba(24, 28, 32, 0.78);
  color: #b9c2c9;
}

.character-select-page .character-slot.has-character .character-name {
  color: #e5e9ec;
}

.character-select-page .character-race {
  color: #9ca3a9;
}

.character-action-button {
  border-color: #525b63;
  background: #20252a;
  color: #dbe0e3;
}

.character-action-button:hover:not(:disabled) {
  border-color: #83919b;
  color: #f1f3f5;
}