/* ── Global ─────────────────────────────────────────────────── */
body {
    margin: 0;
    padding: 0;
    background: #0d0900;
    color: #ddc88a;
    font-family: Verdana, sans-serif;
    box-sizing: border-box;
}

/* ── Top Navigation ─────────────────────────────────────────── */
#top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #0d0900;
    border-bottom: 2px solid #7a5818;
    box-shadow: 0 2px 8px #00000099;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    color: #f0c040;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #c8800070;
}

.nav-links {
    display: flex;
    gap: 4px;
}

.nav-btn {
    padding: 4px 14px;
    background: #1a1006;
    color: #6a5030;
    border: 1px solid #3a2408;
    cursor: pointer;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    transition: background 0.1s;
    text-decoration: none;
    display: inline-block;
}

.nav-btn:hover {
    background: #241408;
    color: #c0a050;
}

.nav-btn.nav-active {
    background: #2e1e08;
    color: #f0c040;
    border-color: #7a5818;
    box-shadow: inset 0 1px 0 #6a4e14;
}

.nav-btn.nav-discord {
    color: #7289da;
    border-color: #3a4878;
}

.nav-btn.nav-discord:hover {
    background: #1a1e36;
    color: #99aaff;
    border-color: #5865f2;
}

/* ── Pages ───────────────────────────────────────────────────── */
#page-game {
    padding: 8px 12px;
}

#page-about {
    padding: 16px 12px;
}

/* ── Layout ──────────────────────────────────────────────────── */
#layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

/* ── Shared panel border style ───────────────────────────────── */
#hud-left,
#hud-right,
#game-area {
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        3px 3px 8px #00000099;
}

/* ── HUD panels ──────────────────────────────────────────────── */
#hud-left,
#hud-right {
    width: 190px;
    min-width: 190px;
    background: #160e03;
    padding: 10px 8px;
    box-sizing: border-box;
    height: 600px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #5a3e10 #0d0900;
}

#hud-left::-webkit-scrollbar,
#hud-right::-webkit-scrollbar        { width: 5px; }
#hud-left::-webkit-scrollbar-track,
#hud-right::-webkit-scrollbar-track  { background: #0d0900; }
#hud-left::-webkit-scrollbar-thumb,
#hud-right::-webkit-scrollbar-thumb  { background: #5a3e10; border-radius: 2px; }

/* ── HUD rows ────────────────────────────────────────────────── */
.hud-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #ddc88a;
}

.hud-row span:first-child {
    color: #8a7040;
}

hr {
    border: none;
    border-top: 1px solid #3a2408;
    margin: 2px 0;
}

.hud-section {
    font-size: 9px;
    color: #c8a030;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    border-bottom: 1px solid #3a2408;
    margin-top: 2px;
}

/* ── XP bar ──────────────────────────────────────────────────── */
.hud-xpbar-wrap {
    background: #0a0704;
    height: 7px;
    border: 1px solid #4a3210;
    overflow: hidden;
}

#hud-xpbar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #2255bb, #55aaff);
    transition: width 0.3s;
}

/* ── Damage labels ───────────────────────────────────────────── */
.dmg-basic { color: #e05050; }
.dmg-fire  { color: #e07820; }

/* ── Cooldown bars ───────────────────────────────────────────── */
.cd-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
}

.cd-label {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #7a6030;
}

.cd-bar-bg {
    background: #0a0704;
    height: 5px;
    border: 1px solid #3a2408;
    overflow: hidden;
}

.cd-bar {
    height: 100%;
    width: 0%;
    transition: width 0.05s linear;
}

.cd-bar-basic { background: linear-gradient(to right, #882222, #dd4444); }
.cd-bar-fire  { background: linear-gradient(to right, #884400, #dd8800); }
.cd-bar-ue    { background: linear-gradient(to right, #550088, #aa22ee); }

/* ── Buttons (base) ──────────────────────────────────────────── */
#hud-left button,
#hud-right button {
    padding: 5px 6px;
    background: #231708;
    color: #e0c060;
    border: 1px solid #7a5818;
    cursor: pointer;
    border-radius: 0;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    text-align: left;
    box-shadow: inset 0 1px 0 #6a4e14, 0 1px 0 #000;
    transition: background 0.1s;
}

#hud-left button:hover:not(:disabled),
#hud-right button:hover:not(:disabled) {
    background: #342310;
    color: #f0d070;
}

#hud-left button:active:not(:disabled),
#hud-right button:active:not(:disabled) {
    background: #160e04;
    box-shadow: inset 0 2px 4px #000;
}

#hud-left button:disabled,
#hud-right button:disabled {
    background: #181008;
    color: #5a4820;
    border-color: #3a2408;
    cursor: default;
    box-shadow: none;
}

/* ── Weapon icon ──────────────────────────────────────────────── */
.weapon-row {
    align-items: center;
    gap: 6px;
}

.weapon-icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    border: 1px solid #4a3210;
    background: #0a0704;
    padding: 2px;
}

.btn-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    image-rendering: pixelated;
}

/* ── Weapon upgrade button ────────────────────────────────────── */
#weaponUpgradeBtn {
    background: #0a1e0c;
    color: #70e090;
    border-color: #2a6a3a;
    box-shadow: inset 0 1px 0 #407850, 0 1px 0 #000;
}

#weaponUpgradeBtn:hover:not(:disabled) { background: #102814; }

#weaponUpgradeBtn:disabled {
    background: #181008;
    color: #2a3a28;
    border-color: #1c2818;
    box-shadow: none;
}

/* ── Upgrade buttons ──────────────────────────────────────────── */
#upgradeAtkSpeedBtn,
#upgradeGfbCdBtn,
#upgradeUeCdBtn {
    background: #080e1c;
    color: #70a8e0;
    border-color: #1a3a6a;
    box-shadow: inset 0 1px 0 #2a4878, 0 1px 0 #000;
    font-size: 9px;
    padding: 4px 5px;
}

#upgradeAtkSpeedBtn:hover:not(:disabled),
#upgradeGfbCdBtn:hover:not(:disabled),
#upgradeUeCdBtn:hover:not(:disabled) {
    background: #0e1828;
    color: #90c8ff;
}

#upgradeAtkSpeedBtn:disabled,
#upgradeGfbCdBtn:disabled,
#upgradeUeCdBtn:disabled {
    background: #181008;
    color: #284050;
    border-color: #1a2030;
    box-shadow: none;
}

/* — Auto attack button — */
#autoAttackBtn {
    background: #1a0e2e;
    color: #cc88ff;
    border-color: #6a3a9a;
    box-shadow: inset 0 1px 0 #8a4acc, 0 1px 0 #000;
}

#autoAttackBtn:hover:not(:disabled) {
    background: #260f40;
    color: #ee99ff;
}

#autoAttackBtn.auto-on {
    background: #3a0e5a;
    color: #ff99ff;
    border-color: #cc44ff;
    box-shadow: inset 0 1px 0 #aa44ee, 0 0 6px #8800cc88;
}

#autoAttackBtn:disabled {
    background: #181008;
    color: #3a2050;
    border-color: #2a1840;
    box-shadow: none;
}

#autoGfbBtn, #autoUeBtn {
    background: #1a0e2e;
    color: #cc88ff;
    border-color: #6a3a9a;
    box-shadow: inset 0 1px 0 #8a4acc, 0 1px 0 #000;
}

#autoGfbBtn:hover:not(:disabled), #autoUeBtn:hover:not(:disabled) {
    background: #260f40;
    color: #ee99ff;
}

#autoGfbBtn.auto-on, #autoUeBtn.auto-on {
    background: #3a0e5a;
    color: #ff99ff;
    border-color: #cc44ff;
    box-shadow: inset 0 1px 0 #aa44ee, 0 0 6px #8800cc88;
}

#autoGfbBtn:disabled, #autoUeBtn:disabled {
    background: #181008;
    color: #3a2050;
    border-color: #2a1840;
    box-shadow: none;
}

/* ── Canvas area ─────────────────────────────────────────────── */
#game-area {
    display: flex;
    align-items: flex-start;
    line-height: 0;
}

canvas {
    display: block;
    background: #000;
}

/* ── GIF overlay effects ─────────────────────────────────────── */
.effect {
    position: fixed;
    pointer-events: none;
    width: 100px;
    height: 100px;
}

/* ── Player row ──────────────────────────────────────────────── */
.player-row {
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

#hud-player {
    color: #f0c040;
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

#logoutBtn {
    font-size: 9px !important;
    padding: 2px 5px !important;
    background: #1e0808 !important;
    color: #c05050 !important;
    border-color: #5a1a1a !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

#logoutBtn:hover:not(:disabled) {
    background: #3a0e0e !important;
    color: #e07070 !important;
}

/* ── Ascend button ───────────────────────────────────────────── */
#ascendBtn {
    width: 100%;
    margin: 2px 0;
    background: #1a1500 !important;
    color: #b8960a !important;
    border-color: #6a5500 !important;
    font-size: 11px !important;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px #b8960a88;
}

#ascendBtn:not(:disabled) {
    background: #2a2000 !important;
    color: #ffe066 !important;
    border-color: #b8960a !important;
    box-shadow: 0 0 8px #b8960a55;
    animation: ascend-pulse 1.5s ease-in-out infinite;
}

#ascendBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes ascend-pulse {
    0%,100% { box-shadow: 0 0 4px #b8960a55; }
    50%      { box-shadow: 0 0 12px #ffe066aa; }
}

/* ── Scoreboard section ──────────────────────────────────────── */
.sb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sb-refresh-btn {
    background: none !important;
    border: none !important;
    color: #7a6030 !important;
    font-size: 12px !important;
    cursor: pointer;
    padding: 0 2px !important;
    box-shadow: none !important;
    line-height: 1;
}

.sb-refresh-btn:hover {
    color: #f0c040 !important;
}

#scoreboard-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}

.sb-row {
    display: grid;
    grid-template-columns: 20px 1fr 34px 26px;
    gap: 2px;
    font-size: 9px;
    color: #8a7040;
    padding: 1px 2px;
}

.sb-me {
    color: #f0d060;
    background: #1e1506;
    border-left: 2px solid #7a5818;
    padding-left: 2px;
}

.sb-rank  { color: #5a4020; text-align: right; padding-right: 2px; }
.sb-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-score { text-align: right; }
.sb-level { text-align: right; color: #6080a0; }
.sb-sep   { font-size: 9px; color: #3a2408; }
.sb-loading { font-size: 9px; color: #3a2408; text-align: center; padding: 4px; }

/* ── Login Modal ─────────────────────────────────────────────── */
#login-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.auth-box {
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        0 8px 32px #000000cc;
    padding: 24px 28px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-title {
    margin: 0 0 4px;
    font-size: 15px;
    color: #f0c040;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #c8800070;
    border-bottom: 1px solid #5a3e10;
    padding-bottom: 8px;
}

.auth-tabs {
    display: flex;
    gap: 4px;
}

.auth-tab {
    flex: 1;
    padding: 5px;
    background: #1a1006;
    color: #6a5030;
    border: 1px solid #3a2408;
    cursor: pointer;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    transition: background 0.1s;
}

.auth-tab.active {
    background: #2e1e08;
    color: #f0c040;
    border-color: #7a5818;
}

.auth-tab:hover:not(.active) {
    background: #241408;
    color: #c0a050;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-label {
    font-size: 10px;
    color: #8a7040;
}

.auth-hint {
    color: #5a4020;
    font-size: 9px;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    background: #0a0704;
    color: #ddc88a;
    border: 1px solid #4a3210;
    padding: 5px 7px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    outline: none;
}

.auth-input:focus {
    border-color: #7a5818;
}

.auth-error {
    color: #e05050;
    font-size: 10px;
    min-height: 14px;
}

.auth-submit {
    padding: 7px;
    background: #2e1e08;
    color: #f0c040;
    border: 1px solid #7a5818;
    cursor: pointer;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    box-shadow: inset 0 1px 0 #6a4e14, 0 1px 0 #000;
    transition: background 0.1s;
    margin-top: 4px;
}

.auth-submit:hover {
    background: #3e2a10;
    color: #ffd860;
}

.auth-submit:disabled {
    background: #181008;
    color: #5a4820;
    cursor: default;
    box-shadow: none;
}

.auth-guest-sep {
    text-align: center;
    color: #5a4820;
    font-size: 11px;
    margin: 8px 0 4px;
}

.auth-guest {
    width: 100%;
    padding: 6px;
    background: transparent;
    color: #8a7040;
    border: 1px solid #4a3810;
    cursor: pointer;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    transition: color 0.1s, border-color 0.1s;
}

.auth-guest:hover {
    color: #c0a050;
    border-color: #7a5818;
}

.auth-note {
    font-size: 9px;
    color: #6a5030;
    margin: 1px 0 2px;
    line-height: 1.4;
}

.auth-forgot {
    text-align: right;
    margin-top: 3px;
}

.auth-forgot a, .auth-back a {
    color: #8a7040;
    font-size: 10px;
    text-decoration: none;
    transition: color 0.1s;
}

.auth-forgot a:hover, .auth-back a:hover {
    color: #f0c040;
}

.auth-back {
    text-align: center;
    margin-top: 10px;
}

.auth-panel-title {
    font-size: 12px;
    color: #f0c040;
    text-align: center;
    margin: 4px 0 6px;
    text-shadow: 0 0 8px #c8800050;
}

/* ── Offline Progress Modal ──────────────────────────────── */
#offline-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.offline-box {
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        0 8px 32px #000000cc;
    padding: 20px 26px;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.offline-title {
    font-size: 13px;
    color: #f0c040;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 1px solid #5a3e10;
    padding-bottom: 8px;
    margin-bottom: 2px;
}

.offline-time {
    font-size: 11px;
    color: #8a7040;
    text-align: center;
    margin: 0 0 4px;
}

.offline-time strong { color: #ddc88a; }
.offline-time em     { color: #5a4020; font-style: normal; font-size: 9px; }

.offline-stat {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8a7040;
    padding: 2px 0;
    border-bottom: 1px solid #1e1404;
}

.offline-stat:last-of-type { border-bottom: none; }
.offline-stat span:last-child { color: #ddc88a; font-weight: bold; }
.offline-exp  { color: #6090d0 !important; }
.offline-gold { color: #f0c040 !important; }

.offline-continue {
    margin-top: 6px;
    padding: 7px;
    background: #2e1e08;
    color: #f0c040;
    border: 1px solid #7a5818;
    cursor: pointer;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    box-shadow: inset 0 1px 0 #6a4e14, 0 1px 0 #000;
    transition: background 0.1s;
    width: 100%;
}

.offline-continue:hover { background: #3e2a10; }

/* ── About Page ──────────────────────────────────────────────── */
.about-box {
    max-width: 700px;
    margin: 0 auto;
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        3px 3px 8px #00000099;
    padding: 28px 32px;
}

.about-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: #f0c040;
    letter-spacing: 1px;
    text-shadow: 0 0 10px #c8800070;
    border-bottom: 1px solid #5a3e10;
    padding-bottom: 10px;
}

.about-box h3 {
    color: #c8a030;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 16px 0 6px;
    border-bottom: 1px solid #3a2408;
    padding-bottom: 4px;
}

.about-box p {
    font-size: 12px;
    color: #ddc88a;
    line-height: 1.7;
    margin: 8px 0;
}

.about-box ul {
    margin: 4px 0 8px 16px;
    padding: 0;
}

.about-box li {
    font-size: 12px;
    color: #c0a870;
    line-height: 1.8;
}

.about-box strong { color: #f0d070; }

.about-credit {
    margin-top: 16px !important;
    font-size: 10px !important;
    color: #5a4820 !important;
    border-top: 1px solid #3a2408;
    padding-top: 10px;
}

.about-credit a {
    color: #7a6030;
}

/* ── Announcements / News ───────────────────────────────────────── */
.news-box {
    max-width: 700px;
}

.news-entry {
    border-bottom: 1px solid #3a2408;
    padding: 18px 0 16px;
}
.news-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-meta {
    font-size: 10px;
    color: #7a6030;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-style: italic;
}

.news-heading {
    color: #c8a030;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
    padding-bottom: 4px;
}

.news-entry p {
    font-size: 12px;
    color: #ddc88a;
    line-height: 1.7;
    margin: 6px 0;
}

.news-entry a {
    color: #f0c040;
    text-decoration: none;
}

.about-credit a:hover { color: #c0a050; }

/* ── Annihilation CD bar ─────────────────────────────────────── */
.cd-bar-anni { background: linear-gradient(to right, #440000, #cc0000); }
.cd-bar-ps   { background: linear-gradient(to right, #665500, #ddbb00); }

/* ── Annihilation button ─────────────────────────────────────── */
#annihilationBtn {
    background: #1a0000 !important;
    color: #ff6644 !important;
    border-color: #882200 !important;
    box-shadow: inset 0 1px 0 #aa3300, 0 1px 0 #000 !important;
    font-weight: bold;
}

#annihilationBtn:hover:not(:disabled) {
    background: #280000 !important;
    color: #ff8866 !important;
    box-shadow: 0 0 8px #cc220055 !important;
}

#annihilationBtn:disabled {
    background: #181008 !important;
    color: #5a2010 !important;
    border-color: #3a1808 !important;
    box-shadow: none !important;
}

/* ── Class choice modal ──────────────────────────────────────── */
#class-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1001;
    display: none;
    justify-content: center;
    align-items: center;
}

.class-choice-box {
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        0 8px 32px #000000cc;
    padding: 28px 32px;
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.class-choice-title {
    font-size: 17px;
    color: #f0c040;
    letter-spacing: 2px;
    text-shadow: 0 0 10px #c8800070;
    border-bottom: 1px solid #5a3e10;
    padding-bottom: 10px;
}

.class-choice-subtitle {
    font-size: 11px;
    color: #8a7040;
    margin: 0;
}

.class-choice-row {
    display: flex;
    gap: 12px;
}

.class-btn {
    flex: 1;
    padding: 14px 12px;
    cursor: pointer;
    border: 2px solid;
    font-family: Verdana, sans-serif;
    transition: box-shadow 0.15s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
}

.class-btn-knight {
    background: #160a00;
    border-color: #8a5010;
    color: #e0b060;
}

.class-btn-knight:hover {
    box-shadow: 0 0 16px #c07030aa;
    border-color: #d08030;
    background: #200e00;
}

.class-btn-sorcerer {
    background: #0a0618;
    border-color: #5a22aa;
    color: #c088ff;
}

.class-btn-sorcerer:hover {
    box-shadow: 0 0 16px #8844ddaa;
    border-color: #aa44ff;
    background: #100828;
}

.class-btn-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.class-btn-desc {
    font-size: 9px;
    line-height: 1.8;
    opacity: 0.85;
}

.class-choice-warn {
    font-size: 10px;
    color: #c05050;
    margin: 0;
}

/* ── Skill Tree button ───────────────────────────────────────── */
#skillTreeBtn {
    width: 100%;
    background: #0a1a0a !important;
    color: #60cc80 !important;
    border-color: #2a6a3a !important;
    box-shadow: inset 0 1px 0 #3a8a50, 0 1px 0 #000 !important;
    font-size: 11px !important;
    font-weight: bold;
}
#skillTreeBtn:hover:not(:disabled) {
    background: #0e2814 !important;
    color: #80ee99 !important;
}

/* ── Skill Tree modal ────────────────────────────────────────── */
#skill-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

.st-modal-box {
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        0 8px 32px #000000cc;
    width: 620px;
    max-width: 96vw;
    display: flex;
    flex-direction: column;
}

.st-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #5a3e10;
}

.st-modal-title {
    font-size: 14px;
    color: #f0c040;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px #c8800060;
}

.st-close-btn {
    background: none !important;
    border: none !important;
    color: #7a6030 !important;
    font-size: 14px !important;
    cursor: pointer;
    padding: 0 2px !important;
    box-shadow: none !important;
    line-height: 1;
}
.st-close-btn:hover { color: #f0c040 !important; }

/* ── Tabs ────────────────────────────────────────────────────── */
.st-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #3a2408;
}

.st-tab {
    padding: 7px 18px;
    background: #0d0900;
    color: #6a5030;
    border: none !important;
    border-right: 1px solid #3a2408 !important;
    cursor: pointer;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    box-shadow: none !important;
    transition: background 0.1s, color 0.1s;
}
.st-tab:last-child { border-right: none !important; }
.st-tab:hover:not(.st-tab-active) { background: #1a1006; color: #c0a050; }
.st-tab-active {
    background: #2e1e08 !important;
    color: #f0c040 !important;
    border-bottom: 2px solid #f0c040 !important;
}

/* ── Pane ────────────────────────────────────────────────────── */
.st-pane {
    padding: 16px;
    min-height: 260px;
}

.st-coming-soon {
    text-align: center;
    color: #5a4020;
    font-size: 12px;
    margin-top: 40px;
}

/* ── Grid layout: 4 columns ──────────────────────────────────── */
.st-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 16px;
}

/* Knight skill tree uses 3 columns */
.st-grid-knight {
    grid-template-columns: repeat(3, 1fr);
}

.st-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ── Connector arrow between tiers ──────────────────────────── */
.st-connector {
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    padding: 2px 0;
}
.st-conn-open   { color: #7a5818; }
.st-conn-locked { color: #2a1a08; }

/* ── Skill node ──────────────────────────────────────────────── */
.st-node {
    border: 1px solid #3a2408;
    background: #1a1006;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 70px;
}

.st-node-placeholder {
    border-color: #2a1a04;
    background: #100900;
    opacity: 0.4;
    justify-content: center;
    align-items: center;
}

.st-node-empty {
    border: 1px dashed #1e1004;
    background: none;
    min-height: 70px;
}

.st-node-maxed {
    border-color: #4a8a1a;
    background: #0e1a06;
}

.st-node-available {
    border-color: #7a5818;
    background: #1e1408;
    box-shadow: inset 0 0 8px #3a2808;
}

.st-node-locked {
    opacity: 0.45;
}

.st-node-unaffordable {
    border-color: #4a3208;
    opacity: 0.7;
}

/* ── Node internals ──────────────────────────────────────────── */
.st-node-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
}

.st-node-name {
    font-size: 10px;
    font-weight: bold;
    color: #e0c060;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-node-pts {
    font-size: 9px;
    color: #7a6030;
    white-space: nowrap;
    flex-shrink: 0;
}
.st-pts-maxed { color: #60cc40; }

.st-node-desc {
    font-size: 9px;
    color: #8a7040;
    line-height: 1.5;
}

.st-node-reqs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 2px 0 1px;
}
.st-req {
    font-size: 8px;
    padding: 1px 3px;
    border-radius: 2px;
    font-family: Verdana, sans-serif;
    white-space: nowrap;
}
.st-req-met {
    color: #60cc40;
    border: 1px solid #3a7a20;
    background: #1a2a10;
}
.st-req-fail {
    color: #cc6030;
    border: 1px solid #7a3a10;
    background: #2a1808;
}

.st-node-maxed-label {
    font-size: 9px;
    color: #60cc40;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

.st-buy-btn {
    margin-top: 2px;
    padding: 3px 6px !important;
    background: #2a1e08 !important;
    color: #f0c040 !important;
    border: 1px solid #7a5818 !important;
    cursor: pointer;
    font-size: 9px !important;
    font-family: Verdana, sans-serif;
    box-shadow: inset 0 1px 0 #6a4e14 !important;
    transition: background 0.1s;
    align-self: flex-start;
}
.st-buy-btn:hover:not(:disabled) {
    background: #3e2a10 !important;
    color: #ffd860 !important;
}
.st-buy-btn:disabled {
    background: #181008 !important;
    color: #5a4820 !important;
    border-color: #3a2408 !important;
    box-shadow: none !important;
    cursor: default;
}

/* ── Announcement Modal ─────────────────────────────────────── */
#announcement-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
#announcement-overlay.visible {
    display: flex;
}
#announcement-modal {
    background: #1a1006;
    border: 2px solid #7a5818;
    box-shadow: 0 0 40px #00000099, 0 0 20px #7a581844;
    padding: 28px 32px;
    max-width: 580px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    color: #ddc88a;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    line-height: 1.7;
}
#announcement-title {
    color: #f0c040;
    font-size: 16px;
    margin: 0 0 16px 0;
    text-align: center;
    text-shadow: 0 0 10px #c8800070;
    letter-spacing: 1px;
}
#announcement-body p {
    margin: 0 0 12px 0;
}
#announcement-body a {
    color: #f0c040;
}
#announcement-close-btn {
    display: block;
    margin: 18px auto 0;
    padding: 8px 24px;
    background: #2a1a08;
    color: #f0c040;
    border: 1px solid #7a5818;
    cursor: pointer;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    box-shadow: inset 0 1px 0 #6a4e14;
    transition: background 0.1s;
}
#announcement-close-btn:hover {
    background: #3e2a10;
}

/* ── Suggestion Box ──────────────────────────────────────────────── */
.suggest-textarea {
    height: 120px;
    resize: vertical;
    padding: 6px 8px;
    line-height: 1.5;
}

/* ── Live Chat Panel ─────────────────────────────────────────────── */
#chat-panel {
    width: 210px;
    min-width: 210px;
    height: 600px;
    background: #160e03;
    border: 2px solid #7a5818;
    box-shadow:
        inset 0 0 0 1px #3a2408,
        inset 0 0 16px #00000070,
        3px 3px 8px #00000099;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 8px 6px 6px;
    gap: 4px;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: #5a3e10 #0d0900;
}

#chat-messages::-webkit-scrollbar       { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: #0d0900; }
#chat-messages::-webkit-scrollbar-thumb { background: #5a3e10; border-radius: 2px; }

.chat-msg {
    font-size: 10px;
    line-height: 1.4;
    word-break: break-word;
    color: #c8b87a;
    border-bottom: 1px solid #1e1408;
    padding-bottom: 2px;
}

.chat-time {
    color: #5a4820;
    font-size: 9px;
    margin-right: 2px;
}

.chat-user {
    color: #f0c040;
    font-weight: bold;
}

.chat-text {
    color: #c8b87a;
}

#chat-footer {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#chat-login-hint {
    font-size: 10px;
    color: #5a4820;
    text-align: center;
    padding: 4px 0;
}

#chat-input-row {
    display: flex;
    gap: 3px;
}

#chat-input {
    flex: 1;
    background: #0a0704;
    color: #ddc88a;
    border: 1px solid #4a3210;
    padding: 4px 5px;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    outline: none;
    min-width: 0;
}

#chat-input:focus {
    border-color: #7a5818;
}

#chat-send-btn {
    background: #231708;
    color: #e0c060;
    border: 1px solid #7a5818;
    cursor: pointer;
    font-size: 10px;
    font-family: Verdana, sans-serif;
    padding: 4px 7px;
    box-shadow: inset 0 1px 0 #6a4e14;
    transition: background 0.1s;
    flex-shrink: 0;
}

#chat-send-btn:hover {
    background: #342310;
    color: #f0d070;
}

#chat-send-btn:active {
    background: #160e04;
    box-shadow: inset 0 2px 4px #000;
}