* { box-sizing: border-box; }
  /* SMOOTH TRANSITIONS (per explicit user request, #43) — applied as a
     broad, low-specificity base rule so hover states, theme switches,
     and active-state changes all animate smoothly rather than snapping
     instantly, without needing to hand-add a transition to every single
     element individually. Respects prefers-reduced-motion for users who
     have that accessibility preference set. */
  *, *::before, *::after {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  body {
    margin: 0;
    font-family: 'Courier New', monospace;
    background: #1f2818;
    color: #d8d2b8;
  }
  #app { min-height: 100vh; }

  /* ---------- TOP BANNER ---------- */
  .top-banner {
    width: 100%;
    background: linear-gradient(180deg, #1c2418 0%, #161d13 100%);
    border-bottom: 2px solid #4a5a3a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .top-banner-title {
    width: 100%;
    text-align: center;
    padding: 16px 16px;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    text-shadow: 0 0 12px rgba(201,183,102,0.25);
  }
  .top-banner-title:hover { color: #f0e8c8; }

  .dragon-notify-bar {
    width: 100%;
    background: linear-gradient(180deg, #5c2018 0%, #3a140f 100%);
    border-bottom: 2px solid #8a3a2a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    position: sticky;
    top: 70px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
  }
  .dragon-notify-text {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #e8d8d2;
    font-weight: 700;
  }
  .dragon-notify-clickable {
    cursor: pointer;
  }
  .dragon-notify-clickable:hover { color: #f0d8c0; text-decoration: underline; }
  .dragon-notify-close {
    font-size: 14px;
    color: #c97a6a;
    cursor: pointer;
    padding: 2px 6px;
  }
  .dragon-notify-close:hover { color: #e8d8d2; }

  /* ---------- TOAST NOTIFICATIONS ---------- */
  .toast-bar {
    width: 100%;
    background: linear-gradient(180deg, #3a4a2a 0%, #232d1b 100%);
    border-bottom: 2px solid #c9b766;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    position: sticky;
    top: 70px;
    z-index: 98;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    animation: toast-slide-in 0.25s ease-out;
  }
  @keyframes toast-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .toast-text {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #e8e2c8;
    font-weight: 700;
  }
  .toast-clickable { cursor: pointer; }
  .toast-clickable:hover { color: #f0e8b8; text-decoration: underline; }
  .toast-close {
    font-size: 14px;
    color: #8aa86a;
    cursor: pointer;
    padding: 2px 6px;
  }
  .toast-close:hover { color: #c9e0a8; }
  .toast-action-label {
    font-size: 12px;
    font-weight: 700;
    color: #c9b766;
    cursor: pointer;
    border: 1px solid #c9b766;
    border-radius: 3px;
    padding: 2px 8px;
    white-space: nowrap;
  }
  .toast-action-label:hover { background: rgba(201,183,102,0.15); }

  /* ---------- CHARACTER SWITCHER (bottom nav) ---------- */
  .char-switcher-wrap-bottom {
    position: relative;
  }
  .char-switcher-dropdown-up {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    background: #232d1b;
    border: 1px solid #4a5a3a;
    border-radius: 2px;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.5);
    padding: 10px;
    z-index: 200;
  }
  .switcher-title {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #5c6750;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .switcher-row {
    padding: 8px 8px;
    font-size: 14px;
    color: #d8d2b8;
    cursor: pointer;
    border-radius: 1px;
  }
  .switcher-row:hover { background: #2a3522; }
  .switcher-row.active { color: #c9b766; border: 1px solid #4a5a3a; }
  .switcher-row-line1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .switcher-row-level {
    font-size: 12px;
    color: #8a9a76;
    white-space: nowrap;
  }
  .switcher-row-line2 {
    font-size: 11px;
    color: #8a9a76;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
  }
  .switcher-row.switcher-new {
    margin-top: 6px;
    border-top: 1px solid #3a4530;
    padding-top: 10px;
    color: #8a9a76;
    font-size: 13px;
  }
  .switcher-empty {
    font-size: 13px;
    color: #5c6750;
    font-style: italic;
    padding: 6px 0;
  }

  /* ---------- LOGIN PAGE ---------- */
  .login-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .login-box {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 40px 36px;
    border-radius: 2px;
    width: 300px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.5);
  }
  .login-label {
    color: #9aa884;
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 24px;
    text-transform: uppercase;
  }
  .faction-pick-title {
    color: #c9b766;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    margin: 10px 0 14px;
    text-transform: uppercase;
  }
  .faction-pick-row {
    display: flex;
    gap: 10px;
  }
  .faction-pick-card {
    flex: 1;
    border-radius: 4px;
    padding: 16px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .faction-pick-card:hover { transform: translateY(-2px); }
  .faction-pick-angel {
    border: 1px solid #c9a84a;
    background: linear-gradient(180deg, rgba(232,210,150,0.12), rgba(232,210,150,0.03));
  }
  .faction-pick-demon {
    border: 1px solid #8a3a2a;
    background: linear-gradient(180deg, rgba(168,58,42,0.14), rgba(168,58,42,0.03));
  }
  .faction-pick-icon { font-size: 34px; margin-bottom: 6px; }
  .faction-pick-name {
    font-size: 15px;
    font-weight: 700;
    color: #e8e2c8;
    margin-bottom: 4px;
  }
  .faction-pick-desc {
    font-size: 12px;
    color: #9aa884;
    line-height: 1.4;
  }
  .gender-pick-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .gender-pick-card {
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    font-size: 15px;
    color: #d8d2b8;
    cursor: pointer;
  }
  .gender-pick-card:hover { background: #283420; }
  .login-input {
    width: 100%;
    background: #161d13;
    border: 1px solid #4a5a3a;
    color: #d8d2b8;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: 17px;
    outline: none;
    margin-bottom: 6px;
  }
  .login-name-hint {
    font-size: 11px;
    color: #5c6750;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
  }
  .login-error-msg {
    font-size: 13px;
    color: #c97a6a;
    min-height: 14px;
    margin-bottom: 8px;
  }
  .login-btn {
    width: 100%;
    background: #3a4a2a;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .login-btn:hover { background: #465a34; }
  .login-saved-title {
    color: #7d8a6a;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .login-saved-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }
  .login-saved-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #161d13;
    border: 1px solid #4a5a3a;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 15px;
  }
  .login-saved-row:hover { border-color: #6e8a52; }
  .login-saved-name { color: #d8d2b8; }
  .login-saved-go { color: #5c6750; }
  .admin-tag {
    color: #c9b766;
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px solid #6e8a52;
    padding: 1px 4px;
    margin-left: 4px;
  }
  .login-divider {
    text-align: center;
    color: #5c6750;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 14px;
    text-transform: uppercase;
  }
  .login-admin-passphrase {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.7;
  }
  .login-lang-switch {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
  }
  .login-lang-option {
    color: #5c6750;
    cursor: pointer;
    padding: 2px 4px;
  }
  .login-lang-option.active { color: #c9b766; font-weight: 700; }
  .login-lang-option:hover { color: #aab494; }
  .login-lang-divider { color: #3a4530; margin: 0 4px; }

  /* ---------- MAIN MENU / SHARED LAYOUT ---------- */
  .menu-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px;
  }
  .status-block {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 16px 18px;
    border-radius: 2px;
  }

  /* ---------- STATUS BLOCK v2 (modern redesigned layout) ---------- */
  .status-block-v2 {
    border: 1px solid #4a5a3a;
    background: linear-gradient(160deg, #2a3322 0%, #1c2418 100%);
    padding: 16px 18px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }
  .sb-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .sb-name {
    color: #f0e8d0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sb-name:hover { color: #e8d896; }
  .sb-level {
    color: #d4af37;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .sb-mail-icon {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
  }
  .sb-mail-icon:hover { transform: scale(1.1); }
  .sb-mail-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #c83636;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 8px;
    padding: 2px 5px;
    min-width: 14px;
    text-align: center;
  }
  .sb-currency-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .sb-currency-cell {
    background: rgba(0,0,0,0.18);
    border: 1px solid #3a4530;
    border-radius: 4px;
    padding: 8px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sb-currency-amount {
    font-size: 15px;
    font-weight: 700;
    color: #e8e2c8;
    white-space: nowrap;
  }
  .sb-currency-label {
    margin-top: 2px;
    font-size: 11px;
    color: #8a9a76;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .sb-bottom-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sb-bottom-row .fights-btn { flex-shrink: 0; }
  .sb-bottom-row .fights-timer { flex-shrink: 0; }
  .sb-bottom-row .server-time {
    margin-left: auto;
    font-size: 12px;
  }
  .sb-xp-section {
    margin-top: 12px;
  }
  .xp-bar-outer {
    height: 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #3a4530;
    overflow: hidden;
  }
  .xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a87ac9 0%, #d4af37 100%);
    transition: width 0.3s ease;
  }
  .status-row0 {
    text-align: right;
    margin-bottom: 8px;
  }
  .server-time {
    font-size: 11px;
    letter-spacing: 1px;
    color: #5c6750;
    text-transform: uppercase;
  }
  .admin-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #3a4530;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .admin-row-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #c9b766;
    border: 1px solid #6e8a52;
    padding: 2px 5px;
  }
  .admin-mini-btn {
    background: #2a3322;
    border: 1px solid #5c6e48;
    color: #d8d2b8;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 3px 7px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .admin-mini-btn:hover { background: #34402a; }
  .status-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }
  .char-name {
    color: #e8e2c8;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
  }
  .char-name:hover {
    color: #c9b766;
    text-decoration: underline;
  }
  .char-level {
    color: #c9b766;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .status-row2 {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .health-bar-outer {
    flex: 1;
    position: relative;
    height: 18px;
    background: #161d13;
    border: 1px solid #4a5a3a;
    border-radius: 1px;
    overflow: hidden;
    cursor: pointer;
  }
  .health-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(180deg, #7a2e24 0%, #5c2018 100%);
    transition: width 0.3s ease;
  }
  .health-bar-text {
    position: relative;
    z-index: 1;
    color: #e8e2c8;
    font-size: 13px;
    text-align: center;
    line-height: 18px;
    letter-spacing: 1px;
  }
  .silver-display {
    color: #c9b766;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: 0.5px;
  }
  .admin-silver-btn {
    color: #5c6750;
    cursor: pointer;
    font-size: 14px;
    margin-left: 4px;
  }
  .admin-silver-btn:hover { color: #c9b766; }
  .xp-line {
    margin-top: 10px;
    color: #7d8a6a;
    font-size: 12px;
    letter-spacing: 0.5px;
  }
  .health-regen-row {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12px;
    color: #6e7a5e;
    letter-spacing: 0.3px;
  }
  .health-regen-timer {
    color: #8a9a76;
  }

  /* ---------- FIGHTS ROW ---------- */
  .fights-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }
  .fights-btn {
    background: #2a3322;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 7px 14px;
    border-radius: 1px;
    cursor: pointer;
  }
  .fights-btn:hover { background: #34402a; }
  .fights-btn.full {
    border-color: #6e8a52;
    box-shadow: inset 0 0 0 1px rgba(140,170,100,0.15);
  }
  .fights-timer {
    color: #7d8a6a;
    font-size: 15px;
    letter-spacing: 1px;
  }

  .menu-placeholder {
    margin-top: 24px;
    color: #5c6750;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
  }

  /* ---------- WELCOME BANNER ---------- */
  .welcome-banner {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 16px;
    border-radius: 2px;
  }
  .welcome-emblem {
    font-size: 32px;
    line-height: 1;
  }
  .welcome-emblem-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
  }
  .welcome-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .welcome-stats {
    margin-top: 4px;
    font-size: 13px;
    color: #8a9a76;
    letter-spacing: 0.3px;
  }
  .welcome-stats .dot {
    margin: 0 6px;
    color: #4a5a3a;
  }
  .online-now-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(138,154,118,0.4);
  }
  .online-now-link:hover { color: #c9e0a8; }
  .welcome-saying-box {
    margin-top: 12px;
    border: 1px solid #4a5a3a;
    background: rgba(0,0,0,0.15);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #aab494;
    line-height: 1.5;
    font-style: italic;
    cursor: pointer;
  }
  .welcome-saying-box:hover { border-color: #6e8a52; color: #c9d8b4; }
  .welcome-saying-text { font-style: italic; }

  /* ---------- RESIDENTS DIRECTORY ---------- */
  .resident-search-input {
    margin-top: 18px;
  }
  .resident-filter-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .resident-filter-chip {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #7d8a6a;
    border: 1px solid #4a5a3a;
    padding: 5px 10px;
    border-radius: 2px;
    cursor: pointer;
  }
  .resident-filter-chip:hover { color: #aab494; border-color: #6e8a52; }
  .resident-filter-chip.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .resident-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ranking-tabs-row {
    margin-top: 16px;
    margin-bottom: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .ranking-tab {
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    padding: 6px 10px;
    border-radius: 2px;
    cursor: pointer;
  }
  .ranking-tab:hover { border-color: #6e8a52; }
  .ranking-tab.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .ranking-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ranking-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 9px 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .ranking-row:hover { background: #2a3522; border-color: #6e8a52; }
  .ranking-row.ranking-top3 {
    border-color: #c9b766;
    background: linear-gradient(90deg, rgba(201,183,102,0.08), #232d1b 40%);
  }
  .ranking-rank {
    width: 30px;
    font-size: 14px;
    font-weight: 700;
    color: #c9b766;
    flex-shrink: 0;
  }
  .ranking-value {
    font-size: 14px;
    font-weight: 700;
    color: #e8e2c8;
    white-space: nowrap;
  }

  /* ---------- STORE ---------- */
  .store-tabs-row {
    margin-top: 16px;
    margin-bottom: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .store-tab {
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    padding: 6px 10px;
    border-radius: 2px;
    cursor: pointer;
  }
  .store-tab:hover { border-color: #6e8a52; }
  .store-tab.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .store-tab-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .store-tab-disabled:hover { border-color: #4a5a3a; }
  .info-tab-content {
    margin-top: 14px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    border-radius: 4px;
    padding: 16px;
    font-size: 15px;
    line-height: 1.7;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  }
  .info-tab-content h3 {
    margin: 0 0 8px 0;
    font-size: 17px;
    color: #e8e2c8;
  }
  .info-tab-content p { margin: 0 0 10px 0; }
  .info-tab-content ul { margin: 0 0 10px 0; padding-left: 18px; }
  .info-tab-content li { margin-bottom: 4px; }
  .info-tab-content strong { color: #c9b766; }
  .store-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .store-item-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
  }
  .store-item-icon {
    font-size: 24px;
    width: 32px;
    flex-shrink: 0;
    text-align: center;
  }
  .store-item-info { flex: 1; min-width: 0; }
  .store-item-name {
    font-size: 15px;
    color: #d8d2b8;
  }
  .store-item-bonus {
    margin-top: 2px;
    font-size: 12px;
    color: #8aa86a;
  }
  .store-item-price {
    margin-top: 3px;
    font-size: 13px;
    color: #c9b766;
    font-weight: 700;
  }
  .store-item-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
  }
  .store-item-desc {
    margin-top: 2px;
    font-size: 12px;
    color: #aab494;
    font-style: italic;
  }
  .store-item-disabled-badge {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #c97a6a;
  }
  .store-qty-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .store-qty-input {
    width: 50px;
    background: #161d13;
    border: 1px solid #4a5a3a;
    color: #d8d2b8;
    padding: 4px 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    outline: none;
  }
  .store-qty-cap {
    font-size: 11px;
    color: #7d8a6a;
  }
  .store-add-item-link {
    margin: 4px 0 14px 0;
    font-size: 13px;
    color: #7ab8c9;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(122,184,201,0.4);
  }
  .store-add-item-link:hover { color: #9ad8e9; }

  .store-category-banner {
    margin: 4px 0 16px 0;
    border: 1px solid #4a5a3a;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
    color: #c9d8b4;
    line-height: 1.5;
    text-align: center;
  }

  /* ---------- STORE ITEM CARD v2 (square image, name+level top row,
     bonuses below, price+action on the right — matches reference
     screenshots) ---------- */
  .store-item-card-v2 {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px;
    border-radius: 6px;
    transition: border-color 0.15s;
  }
  .store-item-card-v2:hover { border-color: #6e8a52; }
  .store-item-image-wrap {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    position: relative;
    border: 2px solid #c9b766;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(160deg, #2a3522 0%, #161d13 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.35);
  }
  /* Decorative corner accents, echoing the framed-icon look from the
     reference screenshots without copying their exact ornamentation. */
  .store-item-image-wrap::before, .store-item-image-wrap::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(201,183,102,0.55);
    pointer-events: none;
  }
  .store-item-image-wrap::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
  .store-item-image-wrap::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
  .store-item-image-wrap .store-item-image {
    width: 84px;
    height: 84px;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }
  .store-item-image-placeholder {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
  .store-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .store-item-top-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .store-item-name-v2 {
    font-size: 15px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .store-item-level-tag {
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #c9b766;
    border: 1px solid #5c6e48;
    padding: 1px 6px;
    border-radius: 2px;
    white-space: nowrap;
  }
  .faction-item-badge {
    font-size: 11px;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 2px;
    white-space: nowrap;
    font-weight: 700;
  }
  .faction-item-badge-angel {
    color: #e8d8a0;
    border: 1px solid #c9a84a;
    background: rgba(232,210,150,0.08);
  }
  .faction-item-badge-demon {
    color: #e8a890;
    border: 1px solid #8a3a2a;
    background: rgba(168,58,42,0.1);
  }
  .alignment-bar-wrap {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
  }
  .alignment-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #d8d2b8;
    margin-bottom: 6px;
  }
  .alignment-leaning-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .alignment-leaning-angel { color: #e8d8a0; }
  .alignment-leaning-demon { color: #e8a890; }
  .alignment-bar-track {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2c3a20;
  }
  .alignment-bar-fill-angel {
    background: linear-gradient(90deg, #c9a84a, #e8d8a0);
  }
  .alignment-bar-fill-demon {
    background: linear-gradient(90deg, #a83a2a, #e85a3a);
  }
  .war-closed-panel {
    text-align: center;
    padding: 24px 16px;
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
  }
  .war-closed-icon { font-size: 34px; margin-bottom: 8px; }
  .war-closed-title {
    font-size: 16px;
    font-weight: 700;
    color: #e8e2c8;
    margin-bottom: 6px;
  }
  .war-schedule-text {
    margin-top: 10px;
    font-size: 13px;
    color: #c9b766;
  }
  .war-boss-panel {
    text-align: center;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .war-prize-panel {
    text-align: center;
    padding: 14px;
    border: 1px solid #c9a84a;
    background: linear-gradient(180deg, rgba(232,210,150,0.1), rgba(232,210,150,0.02));
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .war-prize-title {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #c9b766;
    text-transform: uppercase;
  }
  .war-prize-amount {
    font-size: 18px;
    font-weight: 700;
    color: #e8e2c8;
    margin-top: 4px;
  }
  .war-countdown {
    font-size: 13px;
    color: #c9b766;
    margin-top: 6px;
    font-weight: 700;
  }
  .war-cumulative-row {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    color: #d8d2b8;
    margin-bottom: 10px;
  }
  .war-roster-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 10px;
  }
  .war-roster-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
    padding: 8px 10px;
  }
  .war-roster-row-me {
    border-color: #c9b766;
    background: rgba(201,183,102,0.08);
  }
  .war-roster-main { flex: 1; min-width: 0; }
  .war-roster-name {
    font-size: 14px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .war-roster-you-tag {
    font-size: 12px;
    color: #c9b766;
    font-weight: 400;
  }
  .war-roster-label {
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .war-roster-label-saved {
    color: #e8d8a0;
    border: 1px solid #c9a84a;
    background: rgba(232,210,150,0.1);
  }
  .war-roster-label-fallen {
    color: #e8a890;
    border: 1px solid #8a3a2a;
    background: rgba(168,58,42,0.1);
  }
  .war-roster-meta {
    font-size: 12px;
    color: #7d8a6a;
    margin-top: 2px;
  }
  .war-roster-stats {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: #c9d8b4;
    margin-top: 4px;
  }
  .combat-preview-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 14px 0;
  }
  .combat-vs {
    font-size: 22px;
    margin-top: 40px;
    flex-shrink: 0;
  }
  .war-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .war-history-row {
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
    padding: 10px 12px;
  }
  .war-history-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .war-history-date {
    font-size: 12px;
    color: #7d8a6a;
  }
  .war-history-winner {
    font-size: 15px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .war-history-damage {
    font-size: 13px;
    color: #c9d8b4;
    margin-top: 4px;
  }
  .war-history-payout {
    font-size: 13px;
    color: #c9b766;
    margin-top: 4px;
  }
  .store-amulet-effect {
    font-size: 13px;
    color: #d8d2b8;
  }
  .store-amulet-effect strong {
    color: #8aa86a;
  }
  .store-amulet-preview {
    font-size: 12px;
    color: #7d8a6a;
  }
  .store-amulet-prereq {
    margin-top: 2px;
    font-size: 12px;
    color: #c97a6a;
  }

  /* ---------- BLACKSMITH ---------- */
  .blacksmith-enhanced-tag {
    font-size: 11px;
    color: #8aa86a;
  }
  .blacksmith-level-row {
    margin-top: 6px;
    font-size: 13px;
    color: #c9d8b4;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .blacksmith-ghost-tag {
    font-size: 12px;
    color: #b87ad8;
  }
  .blacksmith-next-cost {
    font-size: 12px;
    color: #7d8a6a;
    text-align: right;
    margin-bottom: 4px;
  }
  .blacksmith-waiting-card {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .blacksmith-waiting-name {
    font-size: 17px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .blacksmith-progress-bar {
    width: 100%;
  }
  .blacksmith-countdown {
    font-size: 24px;
    font-weight: 700;
    color: #c9b766;
    letter-spacing: 1px;
  }
  .blacksmith-waiting-actions {
    display: flex;
    gap: 10px;
    width: 100%;
  }
  .blacksmith-waiting-actions .equip-action-btn,
  .blacksmith-waiting-actions .equip-sell-btn {
    flex: 1;
    text-align: center;
  }
  .bs-settings-label {
    flex: 1;
    font-size: 12px;
    color: #aab494;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }

  /* ---------- GIFTS ---------- */
  .gift-active-row {
    font-size: 13px;
    color: #d8d2b8;
    padding: 3px 0;
  }
  .gift-active-desc {
    font-size: 12px;
    color: #8a9a76;
    margin-top: 2px;
    padding-left: 4px;
  }
  .gift-blocked-reason {
    margin-top: 4px;
    font-size: 12px;
    color: #c97a6a;
  }
  .curse-active-row {
    font-size: 13px;
    color: #e8b8b0;
    padding: 3px 0;
  }
  .mod-section-curse {
    border-color: #6e3a32 !important;
    background: rgba(168,66,58,0.06);
  }

  /* ---------- BLACK MARKET ---------- */
  .bm-exchange-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .bm-exchange-label {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #c9b766;
    min-width: 56px;
  }
  .bm-special-offer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #8a6a2a;
    background: rgba(232,168,58,0.08);
    border-radius: 4px;
    padding: 10px 12px;
  }
  .bm-special-offer-text {
    font-size: 16px;
    font-weight: 700;
    color: #e8d8b8;
  }
  .bm-bag-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .bm-bag-rare {
    border-color: #8a6a2a;
    background: rgba(232,168,58,0.06);
  }
  .bm-bag-icon {
    font-size: 26px;
    flex-shrink: 0;
  }
  .bm-bag-info {
    flex: 1;
    min-width: 0;
  }
  .bm-bag-name {
    font-size: 15px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .bm-bag-contents {
    font-size: 13px;
    color: #aab494;
    margin-top: 2px;
  }
  .bm-bag-stock {
    font-size: 12px;
    color: #7d8a6a;
    margin-top: 2px;
  }

  /* ---------- AMULET SLOT CHOICE ---------- */
  .amulet-choice-panel {
    border: 1px solid #8a6a2a;
    background: rgba(232,168,58,0.1);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 14px;
  }
  .amulet-choice-title {
    font-size: 14px;
    color: #e8d8b8;
    margin-bottom: 8px;
  }
  .amulet-choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }

  /* ---------- POST-PURCHASE POPUP ---------- */
  @keyframes postPurchaseSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .post-purchase-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: #1c2414;
    border-bottom: 2px solid #c9b766;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: postPurchaseSlideDown 0.3s ease-out;
  }
  .popup-item-row {
    font-size: 15px;
    color: #e8e2c8;
    text-align: center;
  }
  .popup-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .popup-action-btn {
    background: #3a6a2a;
    border: 1px solid #5c9a4a;
    color: #e8f0d8;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
  }
  .popup-action-btn:hover { background: #4a8a36; }
  .popup-unusable-reason {
    font-size: 13px;
    color: #e89890;
    text-align: center;
    max-width: 90%;
  }

  /* ---------- BLACKSMITH PUBLIC GHOST CHANCE ---------- */
  .bs-ghost-public-banner {
    border: 1px solid #6a4a8a;
    background: rgba(154,95,216,0.08);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    color: #c9b8e0;
    margin-bottom: 6px;
  }
  .bs-ghost-public-banner strong { color: #d8c8ec; }
  .bs-event-badge {
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .bs-discount-badge {
    border: 1px solid #8a6a2a;
    background: rgba(232,168,58,0.1);
    color: #e8d8b8;
  }
  .bs-ghost-boost-badge {
    border: 1px solid #6a4a8a;
    background: rgba(154,95,216,0.1);
    color: #d8c8ec;
  }

  /* ---------- EQUIPMENT GRAND TOTAL ---------- */
  .equip-grand-total-panel {
    border: 1px solid #4a5a3a;
    background: #1c2414;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
  }
  .equip-grand-total-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #d8d2b8;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid #3a4a2a;
  }
  .equip-grand-total-summary strong { color: #c9b766; }
  .equip-grand-total-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    padding: 3px 0;
    flex-wrap: wrap;
  }
  .equip-grand-total-stat {
    color: #c9d8b4;
    min-width: 80px;
  }
  .equip-grand-total-value {
    color: #c9b766;
    font-weight: 700;
  }
  .equip-grand-total-breakdown {
    color: #7d8a6a;
    font-size: 12px;
  }

  /* ---------- VISUAL ASSETS DASHBOARD ---------- */
  .asset-preview-wrap {
    margin-top: 8px;
    border: 1px solid #4a5a3a;
    border-radius: 4px;
    overflow: hidden;
    background: #161d13;
    max-width: 200px;
  }
  .asset-preview-img {
    width: 100%;
    display: block;
  }
  .asset-preview-broken {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: #c97a6a;
  }
  .dragon-art-custom-img {
    width: 140px;
    height: 112px;
    object-fit: contain;
  }

  .store-item-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 70px;
  }
  .store-item-price-v2 {
    font-size: 13px;
    font-weight: 700;
    color: #c9b766;
    text-align: right;
    white-space: nowrap;
  }

  /* ---------- SPELLS PAGE ---------- */
  .spell-active-effects {
    margin-top: 14px;
    border: 1px solid #5c6e48;
    background: rgba(92,110,72,0.1);
    border-radius: 4px;
    padding: 10px 12px;
  }
  .spell-active-title {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #aab494;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .spell-active-row {
    font-size: 13px;
    color: #d8d2b8;
    padding: 3px 0;
  }

  .unaffordable-btn {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .mod-status-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.3px;
  }
  .mod-status-tag.mod-banned { background: #6e2a2a; color: #f0d0d0; }
  .mod-status-tag.mod-muted { background: #6e5a2a; color: #f0e0c0; }
  .mod-character-panel {
    border: 1px solid #4a5a3a;
    background: #1c2418;
    padding: 12px;
    margin: -2px 0 10px 0;
    border-radius: 0 0 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mod-section {
    border: 1px solid #3a4530;
    border-left: 3px solid #5c6e48;
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mod-section-discipline {
    border-left-color: #a8423a;
  }
  .mod-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .mod-panel-row {
    font-size: 14px;
    color: #c9d8b4;
  }
  .mod-row-spaced {
    margin-top: 6px;
  }
  .mod-hint {
    font-size: 12px;
    color: #7d8a6a;
    font-style: italic;
    line-height: 1.4;
  }
  .mod-subsection-label {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #8a9a76;
    text-transform: uppercase;
  }
  .mod-stat-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
  }
  .mod-stat-edit-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #aab494;
  }
  .mod-active-discipline {
    border: 1px solid #6e3a32;
    background: rgba(168,66,58,0.12);
    border-radius: 3px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mod-discipline-status {
    font-size: 14px;
    font-weight: 700;
  }
  .mod-status-ban { color: #e89890; }
  .mod-status-mute { color: #e8c890; }
  .mod-discipline-reason {
    font-size: 13px;
    color: #d8c8b8;
  }
  .mod-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Severity-graded action buttons — visual weight matches what the
     action actually does, so an admin never has to read carefully to
     tell a currency grant apart from a permanent ban. Also sized for
     comfortable tapping (per "make buttons more comfy to click"). */
  .mod-action-btn {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    flex: 1;
    min-width: 100px;
  }
  .mod-btn-neutral {
    background: #2e4a26;
    border: 1px solid #5c8a48;
    color: #d8f0c4;
  }
  .mod-btn-neutral:hover { background: #3a5e30; }
  .mod-btn-mute {
    background: #4a3a1a;
    border: 1px solid #8a6e32;
    color: #f0e0b8;
  }
  .mod-btn-mute:hover { background: #5e4a24; }
  .mod-btn-ban {
    background: #5a2a22;
    border: 1px solid #8a4a3a;
    color: #f0d0c8;
  }
  .mod-btn-ban:hover { background: #6e342a; }
  .mod-btn-ban-perma {
    background: #3a1414;
    border: 2px solid #a8423a;
    color: #f8d0c8;
  }
  .mod-btn-ban-perma:hover { background: #4a1a1a; }
  .mod-btn-clear {
    background: #232d1b;
    border: 1px solid #4a5a3a;
    color: #aab494;
  }
  .mod-btn-clear:hover { border-color: #6e8a52; color: #d8d2b8; }

  /* ---------- DISCIPLINE WARNING BANNER (shown to the affected player) ---------- */
  .discipline-warning-banner {
    margin-top: 12px;
    border: 2px solid #a8423a;
    background: linear-gradient(180deg, rgba(168,66,58,0.18), rgba(90,30,26,0.1));
    border-radius: 6px;
    padding: 16px;
    text-align: center;
  }
  .discipline-warning-icon {
    font-size: 34px;
  }
  .discipline-warning-title {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #f0d0c8;
  }
  .discipline-warning-reason {
    margin-top: 6px;
    font-size: 14px;
    color: #e0c0b8;
  }
  .discipline-warning-countdown {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ff6a5a;
  }
  .mod-flagged-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
    margin-bottom: 6px;
  }
  .mod-flagged-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mod-flagged-text {
    margin-top: 6px;
    font-size: 14px;
    color: #e8d8d2;
    background: rgba(168,66,58,0.1);
    padding: 6px 8px;
    border-radius: 2px;
  }
  .mod-tracking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mod-tracking-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
  }
  .mod-tracking-row:hover { border-color: #6e8a52; }
  .mod-tracking-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mod-tracking-stats {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #c9d8b4;
  }
  .resident-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .resident-row:hover { background: #2a3522; border-color: #6e8a52; }
  .mail-friend-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mail-friend-meta {
    font-size: 12px;
    color: #aab494;
    letter-spacing: 0.3px;
  }
  .resident-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
  }
  .resident-status-dot.online { background: #6e9a4a; box-shadow: 0 0 4px rgba(110,154,74,0.6); }
  .resident-status-dot.offline { background: #6a4a4a; }
  .resident-name {
    flex: 1;
    font-size: 15px;
    color: #d8d2b8;
  }
  .resident-level {
    font-size: 13px;
    color: #c9b766;
    white-space: nowrap;
  }
  .resident-guild {
    font-size: 12px;
    color: #7d8a6a;
    white-space: nowrap;
  }
  .resident-cooldown-tag {
    font-size: 11px;
    color: #c97a6a;
    background: rgba(168,90,82,0.15);
    border: 1px solid #6e3a32;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }
  .resident-meta-row {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    color: #aab494;
  }
  .profile-action-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .profile-attack-btn {
    margin-top: 14px;
    text-align: center;
    background: linear-gradient(180deg, #5c2018 0%, #3a140f 100%);
    border: 1px solid #8a3a2a;
    color: #e8e2c8;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 0;
    border-radius: 4px;
    cursor: pointer;
  }
  .profile-attack-btn:hover { background: linear-gradient(180deg, #6e2a20 0%, #4a1a12 100%); }
  .profile-attack-blocked {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: #8a6a52;
    border: 1px solid #4a3a2a;
    background: rgba(0,0,0,0.15);
    padding: 10px;
    border-radius: 4px;
  }
  .combat-name-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(216,210,184,0.4);
  }
  .combat-name-clickable:hover { color: #f0e8c8; }

  /* ---------- WORLD CHAT ---------- */
  .chat-channel-switch {
    margin-top: 16px;
    display: flex;
    gap: 6px;
  }
  .chat-channel-tab {
    flex: 1;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    padding: 8px 0;
    border-radius: 2px;
    cursor: pointer;
  }
  .chat-channel-tab:hover { border-color: #6e8a52; }
  .chat-channel-tab.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .chat-online-count {
    margin-top: 12px;
    font-size: 13px;
    color: #8aa86a;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(138,154,118,0.4);
  }
  .chat-online-count:hover { color: #c9e0a8; }
  .chat-roster-panel {
    margin-top: 8px;
    border: 1px solid #4a5a3a;
    background: #1c2418;
    padding: 10px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .chat-roster-title {
    font-size: 12px;
    letter-spacing: 0.8px;
    color: #7d8a6a;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .chat-roster-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    border-top: 1px solid #2a3522;
  }
  .chat-roster-row:first-of-type { border-top: none; }
  .chat-message-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
  }
  .chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #3a4530;
    background: #1c2418;
    padding: 8px 10px;
    border-radius: 2px;
  }
  .chat-message-body { flex: 1; min-width: 0; }
  .chat-delete-btn {
    font-size: 16px;
    cursor: pointer;
    opacity: 0.6;
    flex-shrink: 0;
    padding: 4px;
  }
  .chat-delete-btn:hover { opacity: 1; }
  .chat-message-name {
    font-size: 13px;
    font-weight: 700;
    color: #c9b766;
  }
  .chat-name-clickable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(201,183,102,0.4);
  }
  .chat-name-clickable:hover { color: #e8d896; }
  .chat-message-time {
    font-size: 11px;
    color: #5c6750;
    margin-left: 6px;
  }
  .chat-message-text {
    margin-top: 3px;
    font-size: 14px;
    color: #d8d2b8;
    line-height: 1.4;
    word-break: break-word;
  }
  .chat-page-tabs-row {
    margin-top: 10px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .chat-page-tab {
    font-size: 12px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
  }
  .chat-page-tab:hover { border-color: #6e8a52; }
  .chat-page-tab.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .chat-input-row {
    margin-top: 14px;
    display: flex;
    gap: 8px;
  }
  .chat-text-input {
    flex: 1;
    margin-bottom: 0;
  }
  .chat-send-btn {
    width: auto;
    padding: 0 18px;
  }
  .chat-footer-row {
    margin-top: 14px;
    display: flex;
    gap: 16px;
    justify-content: center;
  }
  .chat-footer-btn {
    font-size: 13px;
    color: #7ab8c9;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(122,184,201,0.4);
  }
  .chat-footer-btn:hover { color: #9ad8e9; }

  /* ---------- MAIN MENU 3x3 GRID ---------- */
  .menu-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .menu-grid-btn {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    color: #d8d2b8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 22px 6px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .menu-grid-btn:hover { background: #2a3522; border-color: #5c6e48; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

  /* ---------- ARENA PAGE ---------- */
  .arena-emblem {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .arena-emblem-badge {
    width: 84px;
    height: 84px;
    border: 2px solid #6e8a52;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #3a4a2a 0%, #232d1b 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5), inset 0 0 12px rgba(0,0,0,0.4);
    position: relative;
  }
  .arena-emblem-badge::before {
    content: "";
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid #4a5a3a;
    border-radius: 50%;
  }
  .arena-emblem-crossed {
    font-size: 32px;
    color: #c9b766;
    line-height: 1;
    transform: rotate(0deg);
  }
  .arena-title {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .arena-subtitle {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #7d8a6a;
    text-transform: uppercase;
  }

  .tier-list {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tier-card {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 16px;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .tier-card:hover { background: #2a3522; border-color: #5c6e48; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  .tier-card.disabled:hover { transform: none; box-shadow: none; }
  .tier-card.disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }
  .tier-card.disabled:hover { background: #232d1b; border-color: #4a5a3a; }
  .tier-card-recommended {
    border-color: #c9b766 !important;
    background: linear-gradient(90deg, rgba(201,183,102,0.12), #232d1b 60%) !important;
    box-shadow: 0 0 8px rgba(201,183,102,0.25);
  }
  .tier-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .tier-desc {
    margin-top: 3px;
    font-size: 13px;
    color: #7d8a6a;
    letter-spacing: 0.5px;
  }
  .tier-name.lower { color: #8aa86a; }
  .tier-name.equal { color: #c9b766; }
  .tier-name.higher { color: #c97a4a; }
  .tier-name.bandit { color: #a85a52; }
  .tier-arrow {
    font-size: 18px;
    color: #5c6750;
  }
  .back-link {
    margin-top: 22px;
    text-align: center;
    font-size: 14px;
    color: #7d8a6a;
    letter-spacing: 1px;
    cursor: pointer;
  }
  .back-link:hover { color: #d8d2b8; }

  /* ---------- CHARACTER PAGE ---------- */
  .section-divider {
    margin: 22px 0;
    border: none;
    border-top: 1px solid #4a5a3a;
  }
  .char-page-name {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .char-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }
  .char-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid #5c6e48;
    background: radial-gradient(circle at 50% 35%, #3a4a2a 0%, #232d1b 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #c9b766;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5);
  }
  .char-avatar:hover { border-color: #8aa86a; }
  .char-avatar-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #5c6750;
    letter-spacing: 0.5px;
  }
  .personalization-link {
    cursor: pointer;
    color: #7ab8c9 !important;
    text-decoration: underline;
  }
  .personalization-link:hover { color: #9ad8e9 !important; }
  .char-avatar-rendered {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    border: 2px solid #5c6e48;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5);
  }
  .char-avatar-rendered.char-avatar-size-small {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border-radius: 6px;
  }
  .char-avatar-rendered.char-avatar-size-tiny {
    width: 22px;
    height: 22px;
    font-size: 14px;
    display: inline-flex;
    vertical-align: middle;
    border-width: 1px;
    border-radius: 3px;
    box-shadow: none;
  }
  .portrait-avatar-wrap {
    width: 110px;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #5c6e48;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  }
  .portrait-avatar-wrap.portrait-size-small {
    width: 64px;
    border-width: 1px;
  }
  .portrait-avatar-wrap.portrait-size-tiny {
    width: 32px;
    border-width: 1px;
    border-radius: 3px;
    box-shadow: none;
    display: inline-block;
    vertical-align: middle;
  }
  .portrait-svg {
    display: block;
    width: 100%;
    height: auto;
  }
  .portrait-options-grid {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .portrait-option {
    position: relative;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
  }
  .portrait-option:hover { border-color: #6e8a52; }
  .portrait-option.active { border-color: #c9b766; box-shadow: inset 0 0 0 1px rgba(201,183,102,0.2); }

  /* ---------- ANKETA PAGE ---------- */
  .anketa-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .anketa-field-label {
    font-size: 12px;
    letter-spacing: 0.8px;
    color: #7d8a6a;
    text-transform: uppercase;
    margin-top: 12px;
  }
  .anketa-textarea {
    width: 100%;
    background: #161d13;
    border: 1px solid #4a5a3a;
    color: #d8d2b8;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    outline: none;
    resize: vertical;
    min-height: 60px;
  }
  .playstyle-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .playstyle-chip {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    padding: 6px 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .playstyle-chip:hover { border-color: #6e8a52; color: #d8d2b8; }
  .playstyle-chip.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .anketa-view {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .anketa-view-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
  }
  .anketa-view-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: #7d8a6a;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .anketa-view-value {
    font-size: 15px;
    color: #d8d2b8;
  }

  .avatar-options-grid {
    margin-top: 20px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .avatar-option {
    position: relative;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px;
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
  }
  .avatar-option:hover { border-color: #6e8a52; }
  .avatar-option.active { border-color: #c9b766; box-shadow: inset 0 0 0 1px rgba(201,183,102,0.2); }
  .avatar-option-label {
    margin-top: 8px;
    font-size: 13px;
    color: #aab494;
    letter-spacing: 0.5px;
  }
  .bandit-limits-note {
    margin-top: 14px;
    margin-bottom: 14px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 14px;
    border-radius: 2px;
    font-size: 13px;
    color: #aab494;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .bandit-limit-note {
    margin-top: 4px;
    font-size: 11px;
    color: #a85a52;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .bio-section {
    margin-top: 20px;
    text-align: center;
  }
  .bio-text {
    color: #aab494;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.3px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .bio-text.empty {
    color: #5c6750;
    font-style: italic;
  }
  .bio-input {
    width: 100%;
    max-width: 480px;
    background: #161d13;
    border: 1px solid #4a5a3a;
    color: #d8d2b8;
    padding: 10px 12px;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    outline: none;
    resize: vertical;
    min-height: 64px;
    margin: 0 auto;
    display: block;
  }
  .bio-btn-row {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .bio-btn {
    background: #2a3322;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 1px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .bio-btn:hover { background: #34402a; }
  .bio-btn.save { border-color: #6e8a52; }

  .meta-row {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #7d8a6a;
    letter-spacing: 0.5px;
  }
  .meta-row span.value { color: #c9b766; }
  .char-id-value {
    font-family: 'Courier New', monospace;
    font-size: 12px;
  }

  .stats-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .stat-cell {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 4px;
    text-align: center;
    border-radius: 2px;
  }
  .stat-label {
    font-size: 11px;
    letter-spacing: 1px;
    color: #7d8a6a;
    text-transform: uppercase;
  }
  .stat-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .stat-base { color: #e8e2c8; }
  .stat-bonus { color: #8aa86a; font-size: 16px; }

  .action-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .action-btn {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    color: #d8d2b8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 8px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
  }
  .action-btn:hover { background: #2a3522; border-color: #5c6e48; }
  .action-btn-active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .chat-message-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .chat-message-unread { border-color: #c9b766; box-shadow: inset 0 0 0 1px rgba(201,183,102,0.2); }

  /* ---------- DRAGON STATS (now shown on Public Statistics page) ---------- */
  .dragon-stats-title {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .dragon-stats-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .dragon-stat-cell {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 4px;
    text-align: center;
    border-radius: 2px;
  }
  .dragon-stat-icon {
    font-size: 18px;
    line-height: 1;
  }
  .dragon-stat-label {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: #7d8a6a;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .dragon-stat-value {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 700;
    color: #c9b766;
  }

  /* ---------- EQUIPMENT SLOTS (character page) ---------- */
  .equipment-section-title {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .equipment-slots-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .equip-slot {
    border: 1px dashed #4a5a3a;
    background: #232d1b;
    padding: 14px 6px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
  }
  .equip-slot:hover { border-color: #6e8a52; background: #2a3522; }
  .equip-slot-icon {
    font-size: 26px;
    line-height: 1;
    opacity: 0.5;
  }
  .equip-slot-label {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: #7d8a6a;
    text-transform: uppercase;
  }
  .equip-slot-empty {
    margin-top: 3px;
    font-size: 11px;
    color: #5c6750;
    font-style: italic;
  }
  .equip-slot.filled {
    border-style: solid;
    border-color: #6e8a52;
  }
  .equip-slot.filled .equip-slot-icon { opacity: 1; }
  .equip-slot.filled .equip-slot-empty {
    color: #c9b766;
    font-style: normal;
    font-weight: 700;
  }
  .equip-unequip-btn {
    margin-top: 6px;
    font-size: 10px;
    color: #a85a52;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .equip-unequip-btn:hover { color: #c97a6a; text-decoration: underline; }

  /* ---------- EQUIPMENT PAGE TABS ---------- */
  .equip-section-title {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .equip-tabs-row {
    margin-top: 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .equip-tab {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #7d8a6a;
    border: 1px solid #4a5a3a;
    padding: 6px 10px;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .equip-tab:hover { color: #aab494; border-color: #6e8a52; }
  .equip-tab.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }

  .inventory-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .inventory-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
  }
  .inventory-item-icon {
    font-size: 22px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    flex-shrink: 0;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 5px;
  }
  .inventory-item-info {
    flex: 1;
    min-width: 0;
  }
  .inventory-item-name {
    font-size: 15px;
    color: #d8d2b8;
  }
  .inventory-qty {
    font-size: 12px;
    color: #c9b766;
  }
  .inventory-item-bonus {
    margin-top: 3px;
    font-size: 12px;
    color: #8aa86a;
  }
  .inventory-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .equip-level-locked {
    font-size: 11px;
    color: #a85a52;
    letter-spacing: 0.3px;
    text-align: right;
    white-space: nowrap;
  }
  .equip-sell-btn {
    font-size: 11px;
    color: #a85a52;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(168,90,82,0.4);
    white-space: nowrap;
  }
  .equip-sell-btn:hover { color: #c97a6a; }
  .equip-action-btn {
    font-size: 12px;
    color: #c9b766;
    border: 1px solid #6e8a52;
    padding: 5px 10px;
    border-radius: 1px;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .equip-action-btn:hover { background: #2a3522; }
  .equip-tag-worn {
    font-size: 12px;
    color: #5c6750;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .equipment-slot-usage {
    margin-top: 10px;
    text-align: right;
    font-size: 12px;
    color: #7d8a6a;
  }
  .equip-storage-counter {
    margin-top: 6px;
    font-size: 13px;
    color: #aab494;
  }
  .equip-storage-counter span {
    font-weight: 700;
    color: #c9b766;
  }
  .storage-over-limit {
    color: #d8302a !important;
  }
  .equipment-slot-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #7d8a6a;
    border-top: 1px solid #3a4530;
    padding-top: 12px;
  }
  .equipped-item-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 4px 6px;
  }
  .equipped-item-icon {
    font-size: 18px;
    width: 26px;
    height: 26px;
    line-height: 22px;
    flex-shrink: 0;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 4px;
  }
  .equipped-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .equipped-item-name {
    font-size: 13px;
    color: #d8d2b8;
  }
  .equipped-item-level {
    font-size: 11px;
    color: #7d8a6a;
  }
  .equipped-bonus {
    color: #8aa86a;
    font-size: 12px;
  }
  .equipped-item-enhance-line {
    font-size: 11px;
    color: #c9b766;
    margin-top: 2px;
  }

  /* ---------- TRAINING PAGE ---------- */
  .room-title {
    margin-top: 22px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .room-desc {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #7d8a6a;
    letter-spacing: 0.3px;
    line-height: 1.5;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .location-flavor-text {
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    font-style: italic;
    color: #c9b766;
    opacity: 0.85;
    letter-spacing: 0.3px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
  .train-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .train-card {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 16px;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .train-icon-badge {
    font-size: 28px;
    width: 44px;
    flex-shrink: 0;
    text-align: center;
  }
  .train-info { flex: 1; min-width: 0; }
  .train-stat-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .train-stat-name.attack { color: #c97a4a; }
  .train-stat-name.mastery { color: #a85ac9; }
  .train-stat-name.defense { color: #6e8a52; }
  .train-stat-name.health { color: #a85a52; }
  .train-stat-name.agility { color: #8aa86a; }
  .train-stat-desc {
    margin-top: 3px;
    font-size: 12px;
    color: #6e7a5e;
    line-height: 1.4;
    max-width: 280px;
  }
  .train-stat-level {
    margin-top: 4px;
    font-size: 13px;
    color: #7d8a6a;
    letter-spacing: 0.5px;
  }
  .train-cost {
    margin-top: 4px;
    font-size: 14px;
    color: #c9b766;
    letter-spacing: 0.3px;
  }
  .train-cost.unaffordable { color: #7a4a44; }
  .train-btn {
    background: #2a3322;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 8px 14px;
    border-radius: 1px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
  }
  .train-btn:hover { background: #34402a; }
  .train-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .train-btn.maxed {
    opacity: 0.6;
    cursor: default;
  }

  /* ---------- ADMIN SILVER INLINE EDIT ---------- */
  .silver-edit-input {
    width: 70px;
    background: #161d13;
    border: 1px solid #6e8a52;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    padding: 2px 4px;
    margin-left: 4px;
  }
  .silver-edit-btn {
    background: #2a3322;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    font-size: 12px;
    padding: 2px 8px;
    margin-left: 4px;
    cursor: pointer;
    letter-spacing: 1px;
  }
  .silver-edit-btn:hover { background: #34402a; }
  .currency-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
  }
  .currency-crystal { color: #7ab8c9; }
  .currency-gold { color: #d4af37; }
  .level-edit-input {
    width: 50px;
    background: #161d13;
    border: 1px solid #6e8a52;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    padding: 2px 4px;
    margin-left: 4px;
  }

  /* ---------- COMBAT: OPPONENT PREVIEW PAGE ---------- */
  .combat-columns {
    margin-top: 20px;
    display: flex;
    gap: 14px;
  }
  .combat-side {
    flex: 1;
    min-width: 0;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .combat-side > * { width: 100%; }
  .combat-side .char-avatar-rendered { width: 56px; height: 56px; flex-shrink: 0; }
  .combat-side.enemy { border-color: #6e3a3a !important; } /* functional cue (this is the opponent), not decorative — must survive theme overrides below */
  .combat-side-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #5c6750;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
  }
  .combat-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #5c6e48;
    background: radial-gradient(circle at 50% 35%, #3a4a2a 0%, #232d1b 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #c9b766;
    margin: 0 auto;
  }
  .combat-side.enemy .combat-avatar { border-color: #8a5a5a; }
  .combat-name {
    margin-top: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e8e2c8;
  }
  .combat-level {
    text-align: center;
    font-size: 13px;
    color: #c9b766;
    margin-top: 2px;
  }
  .combat-stats {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .combat-stat-row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #aab494;
    letter-spacing: 0.3px;
  }
  .combat-stat-row > span:first-child {
    flex: 0 0 88px;
    white-space: nowrap;
  }
  .combat-stat-row .stat-num { color: #e8e2c8; font-weight: 700; margin-left: auto; }
  .combat-bio {
    margin-top: 10px;
    font-size: 12px;
    color: #7d8a6a;
    text-align: center;
    line-height: 1.4;
    font-style: italic;
  }
  .bot-gear-row {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }
  .bot-gear-tag {
    font-size: 11px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    background: rgba(0,0,0,0.15);
    padding: 2px 6px;
    border-radius: 3px;
  }
  .bot-gear-enhance-tag {
    font-size: 11px;
    font-weight: 700;
    color: #e8a83a;
    border: 1px solid #8a6a2a;
    background: rgba(232,168,58,0.12);
    padding: 2px 6px;
    border-radius: 3px;
  }
  .combat-bandit-note {
    margin-top: 14px;
    font-size: 13px;
    color: #5c6750;
    text-align: center;
    line-height: 1.5;
    font-style: italic;
    padding: 10px 4px;
  }
  .combat-divider {
    margin: 10px 0;
    border: none;
    border-top: 1px solid #3a4530;
  }
  .combat-record-title {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #5c6750;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
  }
  .combat-record-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #7d8a6a;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
  }
  .combat-record-row .rec-num { color: #c9b766; }

  .attack-btn-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .next-opponent-link {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #7ab8c9;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(122,184,201,0.4);
  }
  .next-opponent-link:hover { color: #9ad8e9; }
  .attack-btn {
    background: linear-gradient(180deg, #5c2018 0%, #3a140f 100%);
    border: 1px solid #8a3a2a;
    color: #e8e2c8;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 4px;
    padding: 12px 40px;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .attack-btn:hover { background: linear-gradient(180deg, #6e2820 0%, #4a1812 100%); }
  .attack-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .combat-warning {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: #a85a52;
    letter-spacing: 0.5px;
  }
  .steal-preview {
    margin-top: 16px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 12px 14px;
    border-radius: 2px;
  }
  .steal-preview-title {
    font-size: 13px;
    letter-spacing: 1px;
    color: #7ab8c9;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .steal-preview-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #aab494;
    padding: 3px 0;
  }
  .steal-preview-row .value { color: #7ab8c9; font-weight: 700; }
  .steal-box-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  .steal-box-row:last-child { margin-bottom: 0; }
  .steal-box {
    flex: 1;
    border: 1px solid #4a5a3a;
    background: #1c2418;
    padding: 8px 10px;
    border-radius: 2px;
    text-align: center;
  }
  .steal-box.mine { border-color: #5c6e48; }
  .steal-box.theirs { border-color: #6e3a3a; }
  .steal-box-label {
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #7d8a6a;
  }
  .steal-box-value {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #e8e2c8;
  }

  /* ---------- FIGHT RESULT PAGE ---------- */
  .result-banner {
    margin-top: 22px;
    text-align: center;
    font-size: 15px;
    color: #c9b766;
    letter-spacing: 1px;
    font-style: italic;
  }
  .result-outcome {
    margin-top: 6px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
  }
  .result-outcome.win { color: #8aa86a; }
  .result-outcome.loss { color: #a85a52; }
  .result-silver {
    margin-top: 10px;
    text-align: center;
    font-size: 15px;
    color: #c9b766;
    letter-spacing: 0.5px;
  }
  .result-stats {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .result-row {
    display: flex;
    justify-content: space-between;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 14px;
    border-radius: 2px;
    font-size: 14px;
    letter-spacing: 0.5px;
  }
  .result-row .label { color: #7d8a6a; }
  .result-row .val { color: #e8e2c8; font-weight: 700; }
  .result-row .val.dmg-mine { color: #c97a4a; }
  .result-row .val.dmg-theirs { color: #a85a52; }
  .result-row .val.hp-mine { color: #8aa86a; }
  .result-row .val.hp-theirs { color: #c9b766; }
  .result-continue-btn {
    margin-top: 22px;
    width: 100%;
    background: #3a4a2a;
    border: 1px solid #5c6e48;
    color: #e8e2c8;
    padding: 12px 0;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .result-continue-btn:hover { background: #465a34; }
  .result-btn-row {
    margin-top: 18px;
    display: flex;
    gap: 10px;
  }
  .result-secondary-btn {
    flex: 1;
    background: #232d1b;
    border: 1px solid #4a5a3a;
    color: #d8d2b8;
    padding: 10px 0;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 2px;
  }
  .result-secondary-btn:hover { background: #2a3522; border-color: #5c6e48; }
  .equipment-empty {
    margin-top: 4px;
    font-size: 12px;
    color: #5c6750;
    text-align: center;
    font-style: italic;
  }

  /* ---------- BOTTOM NAV ---------- */
  .bottom-nav {
    max-width: 720px;
    margin: 28px auto 0;
    padding: 16px;
    border-top: 1px solid #3a4530;
  }
  .bottom-nav-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .bottom-nav-btn {
    background: transparent;
    border: 1px solid #3a4530;
    color: #6e7a5e;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 1px;
    cursor: pointer;
  }
  .bottom-nav-btn:hover { color: #aab494; border-color: #5c6e48; }
  .bottom-nav-btn.logout { color: #8a5a52; border-color: #5a3a36; }
  .bottom-nav-btn.logout:hover { color: #c97a6a; border-color: #8a4a40; }
  .bottom-nav-lang-wrap {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .bottom-nav-lang-btn {
    background: transparent;
    border: none;
    color: #5c6750;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
  }
  .bottom-nav-lang-btn:hover { color: #8a9a76; }
  .lang-dropdown {
    position: absolute;
    bottom: 26px;
    background: #232d1b;
    border: 1px solid #4a5a3a;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5);
    z-index: 200;
    min-width: 110px;
  }
  .lang-option {
    padding: 8px 14px;
    font-size: 13px;
    color: #d8d2b8;
    cursor: pointer;
    text-align: center;
  }
  .lang-option:hover { background: #2a3522; color: #c9b766; }

  /* ---------- EVENTS PAGE ---------- */
  .events-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .event-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 12px 14px;
    border-radius: 2px;
    border-left: 3px solid #4a5a3a;
  }
  .event-row-win {
    border-left-color: #5a9a4a;
    background: linear-gradient(90deg, rgba(90,154,74,0.08), #232d1b 30%);
  }
  .event-row-loss {
    border-left-color: #a8423a;
    background: linear-gradient(90deg, rgba(168,66,58,0.08), #232d1b 30%);
  }
  .event-row-dragon {
    border-left-color: #c97a4a;
    background: linear-gradient(90deg, rgba(201,122,74,0.08), #232d1b 30%);
  }
  .event-row-achievement {
    border-left-color: #c9b766;
    background: linear-gradient(90deg, rgba(201,183,102,0.1), #232d1b 30%);
  }
  .event-row-neutral {
    border-left-color: #6e7a8a;
  }

  /* ---------- ACHIEVEMENTS PAGE ---------- */
  .ach-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .ach-card {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px;
    border-radius: 4px;
  }
  .ach-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .ach-icon {
    font-size: 30px;
    flex-shrink: 0;
  }
  .ach-icon-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .quest-status {
    margin-top: 8px;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 3px;
    text-align: center;
  }
  .quest-status-claimed { background: rgba(124,174,90,0.15); color: #9ec97a; border: 1px solid #5c8a4a; }
  .quest-status-locked { background: rgba(138,130,114,0.1); color: #8a8272; border: 1px dashed #4a5a3a; }
  .quest-abandon-btn { display: block; margin-top: 8px; text-align: center; }
  .quest-difficulty-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .ach-header-text { flex: 1; min-width: 0; }
  .ach-name {
    font-size: 16px;
    font-weight: 700;
    color: #e8e2c8;
  }
  .ach-desc {
    margin-top: 2px;
    font-size: 13px;
    color: #aab494;
    line-height: 1.4;
  }
  .ach-tier-line {
    margin-top: 10px;
    font-size: 13px;
    color: #c9b766;
    font-weight: 700;
  }
  .ach-progress-bar {
    margin-top: 6px;
  }
  .ach-progress-text {
    margin-top: 5px;
    font-size: 12px;
    color: #7d8a6a;
  }
  .ach-collect-btn {
    margin-top: 10px;
    width: 100%;
  }
  .ach-formula-note {
    margin-top: 4px;
    font-size: 12px;
    color: #7d8a6a;
    font-style: italic;
    line-height: 1.4;
  }
  .ach-notify-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9b766;
    margin-left: 4px;
    box-shadow: 0 0 4px rgba(201,183,102,0.7);
  }

  /* ---------- CUSTOM CONFIRMATION MODAL ---------- */
  .modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
  }
  .modal-box {
    background: #232d1b;
    border: 2px solid #c9b766;
    border-radius: 6px;
    padding: 20px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  }
  .modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #e8e2c8;
    text-align: center;
    margin-bottom: 10px;
  }
  .modal-message {
    font-size: 15px;
    color: #d8d2b8;
    text-align: center;
    line-height: 1.5;
  }
  .modal-price {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #c9b766;
    text-align: center;
  }
  .modal-qty-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .modal-qty-btn {
    font-size: 14px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    background: #161d13;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 32px;
    text-align: center;
  }
  .modal-qty-btn:hover { border-color: #6e8a52; color: #d8d2b8; }
  .modal-qty-value {
    font-size: 18px;
    font-weight: 700;
    color: #e8e2c8;
    min-width: 36px;
    text-align: center;
  }
  .modal-btn-row {
    margin-top: 18px;
    display: flex;
    gap: 10px;
  }
  .modal-btn {
    flex: 1;
    text-align: center;
    padding: 11px 0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .modal-btn-yes {
    background: #3a6a2a;
    border: 1px solid #5c9a4a;
    color: #e8f0d8;
  }
  .modal-btn-yes:hover { background: #4a8a36; }
  .modal-btn-disabled {
    background: #2a3022 !important;
    border-color: #4a5a3a !important;
    color: #6a7a5a !important;
    cursor: not-allowed !important;
    opacity: 0.6;
  }
  .modal-btn-disabled:hover { background: #2a3022 !important; }
  .modal-insufficient-warning {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: #e89890;
  }
  .modal-btn-no {
    background: #5a2a24;
    border: 1px solid #8a4a3a;
    color: #f0d8d2;
  }
  .modal-btn-no:hover { background: #7a3a2e; }
  .event-desc {
    font-size: 14px;
    color: #d8d2b8;
    line-height: 1.4;
  }
  .event-meta {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .event-time {
    font-size: 12px;
    color: #5c6750;
  }
  .event-view-btn {
    font-size: 12px;
    color: #c9b766;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .event-view-btn:hover { color: #e8d896; text-decoration: underline; }
  .event-name-link {
    color: #c9b766;
    cursor: pointer;
    font-weight: 700;
  }
  .event-name-link:hover { text-decoration: underline; color: #e8d896; }
  .events-pagination {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .events-page-btn {
    font-size: 20px;
    color: #c9b766;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid #4a5a3a;
    border-radius: 2px;
  }
  .events-page-btn:hover { background: #2a3522; }
  .events-page-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .events-page-label {
    font-size: 13px;
    color: #7d8a6a;
    letter-spacing: 0.5px;
  }
  .events-empty {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: #5c6750;
    font-style: italic;
  }

  /* ---------- SETTINGS PAGE ---------- */
  .settings-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .settings-row {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .settings-row:hover { background: #2a3522; border-color: #5c6e48; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.25); }

  /* ---------- THEME GRID ---------- */
  .theme-grid {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .theme-card {
    position: relative;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 14px 16px;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .theme-card:hover { border-color: #6e8a52; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
  .theme-card.active { border-color: #c9b766; box-shadow: inset 0 0 0 1px rgba(201,183,102,0.25), 0 0 14px rgba(201,183,102,0.15); }
  .theme-emoji {
    font-size: 24px;
    line-height: 1;
  }
  .theme-swatch-row {
    display: flex;
    gap: 4px;
  }
  .theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
  }
  .theme-name {
    font-size: 15px;
    color: #d8d2b8;
    letter-spacing: 0.5px;
  }
  .theme-active-tag {
    position: absolute;
    right: 14px;
    color: #c9b766;
    font-size: 16px;
  }

  /* ---------- BANDIT SUBMENU ---------- */
  .bandit-submenu {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tier-name.bandit-silver { color: #9aa0a8; }
  .tier-name.bandit-crystal { color: #7ab8c9; }
  .tier-name.bandit-gold { color: #d4af37; }

  /* ---------- STATISTICS PAGE ---------- */
  .stats-view-block {
    margin-top: 20px;
  }
  .stats-view-block.public-standout {
    border: 1px solid #6e5a2a;
    background: linear-gradient(180deg, rgba(201,183,102,0.06), transparent 60%);
    border-radius: 4px;
    padding: 14px;
  }
  .stats-view-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .stats-view-desc {
    margin-top: 4px;
    font-size: 13px;
    color: #7d8a6a;
    line-height: 1.4;
  }
  .public-record-grid {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .public-record-row {
    display: flex;
    justify-content: space-between;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 8px 12px;
    border-radius: 2px;
    font-size: 14px;
    color: #aab494;
  }
  .public-record-row .rec-num { color: #c9b766; font-weight: 700; }

  /* ---------- DRAGON PAGE ---------- */
  .dragon-emblem {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .dragon-emblem-badge {
    font-size: 54px;
    line-height: 1;
    display: flex;
    justify-content: center;
  }
  .dragon-art-svg {
    width: 140px;
    height: 112px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  }
  .dragon-title {
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 5px;
    color: #e8e2c8;
    text-transform: uppercase;
  }
  .dragon-desc {
    margin-top: 8px;
    font-size: 14px;
    color: #7d8a6a;
    line-height: 1.5;
    max-width: 480px;
  }
  .dragon-asleep {
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
    color: #5c6750;
    font-style: italic;
  }
  .dragon-killed-by {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #7d8a6a;
  }
  .dragon-killed-by .value { color: #c9b766; font-weight: 700; }
  .dragon-countdown {
    margin-top: 8px;
    text-align: center;
    font-size: 13px;
    color: #8a9a76;
    letter-spacing: 0.5px;
  }
  .dragon-health-block {
    margin-top: 20px;
  }
  .dragon-health-label {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #7d8a6a;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .dragon-health-outer { height: 22px; }
  .dragon-health-fill {
    background: linear-gradient(180deg, #8a3a2a 0%, #5c2018 100%) !important;
  }
  .dragon-damage-row {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #7d8a6a;
  }
  .dragon-damage-row .value { color: #c9b766; font-weight: 700; }
  .dragon-cumulative-title {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
    color: #7d8a6a;
    text-transform: uppercase;
  }
  .dragon-cumulative-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dragon-cumulative-col {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
  }
  .dragon-cumulative-col-label {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #c9b766;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  .dragon-cumulative-row {
    font-size: 13px;
    color: #aab494;
    padding: 2px 0;
  }
  .dragon-cumulative-row .value { color: #e8e2c8; font-weight: 700; }
  .dragon-hit-result {
    margin-top: 16px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 14px;
    border-radius: 2px;
  }
  .dragon-hit-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 3px 0;
  }
  @keyframes dragonHitFlash {
    0% { filter: brightness(2.2) saturate(1.5); }
    100% { filter: brightness(1) saturate(1); }
  }
  @keyframes dragonDamagePulse {
    0% { transform: scale(1.5); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  .dragon-health-fill.dragon-just-hit {
    animation: dragonHitFlash 0.5s ease-out;
  }
  .dragon-hit-row .val.dmg-mine {
    display: inline-block;
    animation: dragonDamagePulse 0.4s ease-out;
  }
  .dragon-totals {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dragon-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #7d8a6a;
  }
  .dragon-totals-row .value { color: #c9b766; }
  .dragon-leaderboard-links {
    margin-top: 20px;
    display: flex;
    gap: 10px;
  }
  .dragon-link-btn {
    flex: 1;
    text-align: center;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 0;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #d8d2b8;
    cursor: pointer;
    border-radius: 2px;
  }
  .dragon-link-btn:hover { background: #2a3522; border-color: #5c6e48; }
  .dragon-admin-row { flex-wrap: wrap; }
  .dragon-admin-input-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #7d8a6a;
  }
  .dragon-variant-picker {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dragon-difficulty-presets {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .difficulty-preset-label {
    font-size: 12px;
    color: #7d8a6a;
    letter-spacing: 0.5px;
  }
  .exp-amount-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #aab494;
    border: 1px solid #4a5a3a;
    padding: 4px 10px;
    border-radius: 1px;
    cursor: pointer;
  }
  .reward-type-note {
    font-size: 12px;
    color: #7d8a6a;
    margin-bottom: 8px;
    font-style: italic;
  }
  .dragon-settings-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .dragon-settings-group {
    border: 1px solid #3a4530;
    border-radius: 4px;
    padding: 14px;
    background: rgba(0,0,0,0.1);
  }
  .dragon-settings-group-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e8e2c8;
    text-transform: uppercase;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3a4530;
  }
  .dragon-settings-group .dragon-settings-section {
    margin-bottom: 10px;
  }
  .dragon-settings-group .dragon-settings-section:last-child {
    margin-bottom: 0;
  }
  .dragon-settings-section {
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 12px 14px;
    border-radius: 2px;
  }
  .dragon-settings-label {
    font-size: 12px;
    letter-spacing: 1px;
    color: #7d8a6a;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .dragon-settings-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .level-edit-input.wide {
    width: 90px;
  }
  .dragon-admin-link {
    border-color: #6e8a52 !important;
    color: #c9b766 !important;
  }
  .dragon-difficulty-option {
    display: inline-block;
    margin-right: 6px;
    padding: 4px 10px;
    border: 1px solid #4a5a3a;
    background: #161d13;
    color: #aab494;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 1px;
  }
  .dragon-difficulty-option:hover { border-color: #6e8a52; color: #d8d2b8; }
  .dragon-variant-option {
    display: inline-block;
    margin-right: 6px;
    padding: 4px 10px;
    border: 1px solid #4a5a3a;
    background: #161d13;
    color: #aab494;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 1px;
  }
  .dragon-variant-option:hover { border-color: #6e8a52; }
  .dragon-variant-option.active { background: #3a4a2a; border-color: #c9b766; color: #e8e2c8; }
  .dragon-variant-tag {
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #c9b766;
    text-transform: uppercase;
  }
  .dragon-hit-row.dragon-kill-bonus {
    border-top: 1px solid #6e8a52;
    margin-top: 4px;
    padding-top: 6px;
    font-weight: 700;
  }
  .dragon-hit-row.dragon-kill-bonus .val { color: #d4af37; }

  /* ---------- DRAGON LEADERBOARDS ---------- */
  .leaderboard-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4a5a3a;
    background: #232d1b;
    padding: 10px 12px;
    border-radius: 2px;
    font-size: 14px;
  }
  .leaderboard-rank {
    color: #c9b766;
    font-weight: 700;
    width: 28px;
  }
  .leaderboard-name {
    flex: 1;
    color: #d8d2b8;
  }
  .leaderboard-damage {
    color: #c97a4a;
    font-size: 13px;
  }
  .leaderboard-earned {
    color: #8aa86a;
    font-size: 13px;
  }
  .leaderboard-row-expanded {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .leaderboard-row-top {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .leaderboard-row-currencies {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 38px;
  }
  .lb-currency {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
  .lb-silver { color: #c9b766; }
  .lb-crystal { color: #7ab8c9; }
  .lb-gold { color: #d4af37; }
  .lb-exp { color: #a85ac9; }