/* Achi.io - Ultra Luxury Cyber Glassmorphism Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Ubuntu:wght@400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0c0f17;
    color: #ffffff;
}

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

#menuBgCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 95;
    pointer-events: none;
}

/* Common Helpers */
.hidden {
    display: none !important;
}

/* ==================== ULTRA LUXURY MAIN MENU ==================== */
.overlay-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 40%, rgba(16, 22, 36, 0.7) 0%, rgba(6, 9, 15, 0.95) 100%);
    backdrop-filter: blur(16px);
}

#pauseModal, #shopModal {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

.luxury-menu-container {
    position: relative;
    background: rgba(18, 24, 38, 0.75);
    border-radius: 28px;
    padding: 3px; /* For animated border gradient */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(0, 229, 255, 0.18);
    animation: menuAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 620px;
    width: 92%;
}

.luxury-border-glow {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 30px;
    background: linear-gradient(135deg, #00e5ff, #7c4dff, #ff1744, #00e676, #00e5ff);
    background-size: 300% 300%;
    animation: borderGradient 8s ease infinite;
    z-index: -1;
    opacity: 0.85;
    filter: blur(4px);
}

@keyframes borderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes menuAppear {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cyber-ticker-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #00e5ff;
    letter-spacing: 1px;
    margin-bottom: 12px;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}

.logo-container {
    margin-bottom: 14px;
}

.game-title {
    font-family: 'Orbitron', 'Ubuntu', sans-serif;
    font-size: 3.6rem;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.05;
    background: linear-gradient(135deg, #ffffff 0%, #00e5ff 40%, #7c4dff 80%, #ff1744 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.7));
}

.game-tagline {
    font-size: 0.92rem;
    color: #94a3b8;
    margin-top: 4px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Menu Tabs */
.menu-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(22, 30, 48, 0.7);
    padding: 5px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-tab-btn {
    flex: 1;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: #8fa0b5;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-tab-btn.active {
    background: #00e5ff;
    color: #0c101a;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4);
}

.nav-tab-btn:hover:not(.active) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

/* Tab Panels */
.tab-panel {
    animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 18px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: #00e5ff;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.menu-input, .menu-select {
    width: 100%;
    padding: 13px 18px;
    font-size: 1.05rem;
    background: rgba(10, 14, 24, 0.85);
    border: 1.5px solid rgba(0, 229, 255, 0.3);
    border-radius: 12px;
    color: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

.menu-input:focus, .menu-select:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
    background: rgba(12, 18, 32, 0.95);
}

.menu-select option {
    background: #101624;
    color: #ffffff;
}

/* Action Buttons */
.btn-primary {
    width: 100%;
    padding: 15px 24px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #00b2e1 0%, #00e5ff 100%);
    border: none;
    border-radius: 14px;
    color: #08101e;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.45);
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 229, 255, 0.7);
    filter: brightness(1.1);
}

.btn-secondary {
    padding: 12px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    background: rgba(28, 38, 58, 0.85);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: rgba(0, 229, 255, 0.2);
    border-color: #00e5ff;
    transform: translateY(-1px);
}

.btn-accent {
    background: linear-gradient(135deg, #7c4dff 0%, #d500f9 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(213, 0, 249, 0.4);
    transition: all 0.2s ease;
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(213, 0, 249, 0.6);
}

.menu-footer {
    margin-top: 24px;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

/* Multiplayer Room Panel */
.multiplayer-box {
    background: rgba(10, 14, 24, 0.6);
    border: 1.5px solid rgba(0, 229, 255, 0.25);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
    text-align: left;
}

.room-code-badge {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 2px;
    background: rgba(0,0,0,0.5);
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #ffd700;
    display: inline-block;
}

/* Toast Notifications */
#gameToast {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    background: rgba(14, 20, 32, 0.95);
    color: #ffffff;
    padding: 14px 26px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #00e5ff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#gameToast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ==================== HUD INTERFACE ==================== */
#hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#hud button, #hud .interactive {
    pointer-events: auto;
}

/* Class Upgrade Banner (Top Left) */
#upgradeBanner {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(14, 20, 32, 0.9);
    border: 2px solid rgba(0, 229, 255, 0.5);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6), 0 0 20px rgba(0, 229, 255, 0.25);
}

.upgrade-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

#classUpgradeContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-width: 290px;
}

.class-upgrade-btn {
    padding: 8px 10px;
    background: rgba(18, 26, 42, 0.95);
    border: 1.5px solid #00e5ff;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.class-upgrade-btn small {
    font-size: 0.72rem;
    color: #ffd700;
}

.class-upgrade-btn:hover {
    background: #00e5ff;
    color: #0c101a;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.6);
}

.class-upgrade-btn:hover small {
    color: #111;
}

.class-upgrade-btn.tier-5 {
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.class-upgrade-btn.tier-5:hover {
    background: #ffd700;
    color: #111;
}

/* Stat Upgrades (Bottom Left) */
#statUpgradePanel {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 290px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.bulk-upgrade-btn {
    padding: 2px 7px;
    font-size: 0.72rem;
    font-weight: 800;
    background: #1b2838;
    border: 1px solid #00e5ff;
    border-radius: 5px;
    color: #00e5ff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-upgrade-btn:hover {
    background: #00e5ff;
    color: #111;
    transform: scale(1.05);
}

.bulk-upgrade-btn.gold {
    border-color: #ffd700;
    color: #ffd700;
}

.bulk-upgrade-btn.gold:hover {
    background: #ffd700;
    color: #111;
}

#skillPointsBadge {
    background: #ffd700;
    color: #111;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
}

.stat-item-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    width: 220px;
}

.stat-row {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 6px;
    transition: transform 0.1s ease, border-color 0.15s ease;
}

.stat-row:hover {
    transform: scale(1.02);
    border-color: #00e5ff;
}

.stat-row.is-maxxed {
    cursor: default;
    border-color: #ffd700;
    pointer-events: none;
}

.stat-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    transition: width 0.15s ease;
    z-index: 1;
}

.stat-label {
    position: relative;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff;
    padding-left: 2px;
    text-shadow: 1px 1px 2px #000;
    white-space: nowrap;
}

.stat-key {
    position: relative;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75);
}

.stat-minus-btn {
    width: 18px;
    height: 18px;
    background: rgba(255, 23, 68, 0.25);
    border: 1px solid rgba(255, 23, 68, 0.55);
    color: #ff5252;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.stat-minus-btn:hover {
    opacity: 1.0;
    background: #ff1744;
    color: #ffffff;
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.8);
}

@keyframes prismaticGlow {
    0% { color: #ff1744; text-shadow: 0 0 6px #ff1744; }
    20% { color: #ff9100; text-shadow: 0 0 6px #ff9100; }
    40% { color: #ffd600; text-shadow: 0 0 6px #ffd600; }
    60% { color: #00e676; text-shadow: 0 0 6px #00e676; }
    80% { color: #00e5ff; text-shadow: 0 0 6px #00e5ff; }
    100% { color: #ff1744; text-shadow: 0 0 6px #ff1744; }
}

.stat-maxxed-text {
    animation: prismaticGlow 2.0s infinite linear;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
}

.stat-1 { background: #85e37d; }
.stat-2 { background: #ea6262; }
.stat-3 { background: #9667e0; }
.stat-4 { background: #4a90e2; }
.stat-5 { background: #f5a623; }
.stat-6 { background: #d0021b; }
.stat-7 { background: #7ed321; }
.stat-8 { background: #50e3c2; }
.stat-9 { background: #ff4081; }
.stat-10 { background: linear-gradient(90deg, #ffd700, #ffab00); }
.stat-11 { background: linear-gradient(90deg, #ff3d00, #dd2c00); }

/* Level & Score Bar (Bottom Center) */
#bottomHUD {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 440px;
    text-align: center;
}

#levelNumber {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
    margin-bottom: 2px;
}

#scoreNumber {
    font-size: 0.95rem;
    color: #00e5ff;
    font-weight: 700;
    margin-bottom: 6px;
}

.xp-bar-container {
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #222;
    border-radius: 10px;
    overflow: hidden;
}

#xpBarFill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd700, #ff9800);
    transition: width 0.15s ease;
}

/* Leaderboard (Top Right) */
#leaderboard {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(14, 20, 32, 0.88);
    border: 1.5px solid rgba(0, 229, 255, 0.35);
    border-radius: 14px;
    padding: 12px 16px;
    width: 230px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.lb-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #00e5ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
    padding-bottom: 4px;
}

.lb-entry {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 3px 0;
    color: #c4d1db;
}

.lb-entry.is-player {
    color: #00e5ff;
    font-weight: 800;
}

/* Boss Health Bar (Top Center) */
#bossHUD {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    text-align: center;
}

#bossName {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ff1744;
    text-shadow: 0 0 12px rgba(255, 23, 68, 0.7);
    margin-bottom: 4px;
}

.boss-bar-container {
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.75);
    border: 2px solid #ff1744;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.45);
}

#bossHealthFill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff1744, #d500f9);
    transition: width 0.1s ease;
}

/* Sandbox Cheat Panel */
#sandboxPanel {
    position: absolute;
    top: 180px;
    left: 20px;
    background: rgba(14, 20, 32, 0.92);
    border: 1.5px solid #ffd700;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 0.8rem;
    color: #ffd700;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

#sandboxPanel h4 {
    margin-bottom: 8px;
    text-transform: uppercase;
}

#sandboxPanel ul {
    list-style: none;
    line-height: 1.6;
    color: #ffffff;
}

/* ==================== SKIN STUDIO MODAL ==================== */
.modal-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(6, 9, 15, 0.92);
    backdrop-filter: blur(12px);
}

.modal-content {
    background: #141b2a;
    border: 2px solid #00e5ff;
    border-radius: 24px;
    padding: 32px;
    width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.35);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.modal-header h2 {
    font-size: 1.9rem;
    color: #00e5ff;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: #8c9ba5;
    cursor: pointer;
}

.close-btn:hover {
    color: #ff1744;
}

.skin-studio-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
}

.preview-box {
    text-align: center;
}

#skinPreviewCanvas {
    background: #0d111c;
    border: 2px solid #232e44;
    border-radius: 16px;
    margin-bottom: 14px;
}

.preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.preset-btn {
    padding: 9px;
    background: #1e283c;
    border: 1px solid #364868;
    border-radius: 8px;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover {
    border-color: #00e5ff;
    background: #00e5ff;
    color: #111;
}

.custom-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.control-row label {
    font-size: 0.92rem;
    color: #cbd5e1;
    font-weight: 600;
}

.color-input {
    width: 48px;
    height: 38px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: none;
}

/* ==================== CLASS TREE MODAL ==================== */
.tree-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.tree-tier {
    background: rgba(20, 28, 44, 0.75);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 12px;
    padding: 14px;
}

.tier-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #00e5ff;
    margin-bottom: 10px;
}

.tier-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tier-badge {
    background: #172133;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid #283750;
}

.tier-badge.mythic {
    border-color: #ffd700;
    color: #ffd700;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* ==================== INGAME CHAT & TEAM POPUP ==================== */
.chat-container {
    position: absolute;
    bottom: 25px;
    left: 325px;
    width: 380px;
    background: rgba(10, 15, 25, 0.88);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
}

.chat-messages {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
}

.chat-msg {
    line-height: 1.4;
    word-break: break-word;
}

.chat-msg.system {
    color: #ffd700;
    font-size: 0.78rem;
}

.chat-input-bar input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(15, 22, 36, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.85rem;
    outline: none;
}

.chat-input-bar input:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.team-invite-popup {
    position: absolute;
    bottom: 30px;
    right: 25px;
    width: 320px;
    background: rgba(16, 24, 38, 0.96);
    border: 2px solid #ffd700;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.8), 0 0 20px rgba(255, 215, 0, 0.35);
    z-index: 300;
    animation: popupSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

@keyframes popupSlideIn {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==================== HOLD [Y] TREE HUD OVERLAY ==================== */
.hold-tree-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 12, 20, 0.78);
    backdrop-filter: blur(8px);
    z-index: 80;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    animation: fadeInFast 0.15s ease;
}

@keyframes fadeInFast {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.hold-tree-card {
    background: rgba(14, 20, 32, 0.95);
    border: 2px solid #00e5ff;
    border-radius: 20px;
    padding: 22px 28px;
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.4);
    max-width: 900px;
    width: 88%;
}

.hold-tree-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.hold-node-item {
    background: #101624;
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 110px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.hold-node-item.active {
    border-color: #00e5ff;
    background: rgba(0, 229, 255, 0.12);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.hold-node-item.mythic {
    border-color: #ff1744;
    background: rgba(255, 23, 68, 0.08);
}

/* ==================== MOBILE / TOUCH DUAL JOYSTICKS ==================== */
.mobile-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 90;
}

.joy-base {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(16, 24, 38, 0.6);
    border: 2px solid rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.joy-base.right-joy {
    border-color: rgba(255, 23, 68, 0.6);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.3);
}

.joy-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, #00e5ff 0%, #008ba3 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.right-joy .joy-knob {
    background: radial-gradient(circle, #ff1744 0%, #b71c1c 100%);
    box-shadow: 0 0 12px rgba(255, 23, 68, 0.8);
}

.mobile-quick-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.mobile-btn {
    background: rgba(14, 20, 32, 0.88);
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    border-radius: 12px;
    color: #00e5ff;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.mobile-btn.active {
    background: #00e5ff;
    color: #111111;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.8);
}

.hold-node-item.mythic {
    border-color: #ff1744;
    background: rgba(255, 23, 68, 0.08);
}

/* ==================== 1:1 DIEP.IO RADIAL CLASS TREE WHEEL ==================== */
.radial-tree-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 8, 14, 0.85);
    backdrop-filter: blur(12px);
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: radialFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes radialFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.radial-tree-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 96vh;
    max-width: 96vw;
}

.radial-tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 780px;
    margin-bottom: 10px;
    padding: 0 10px;
}

.radial-close-btn {
    background: #ff1744;
    border: none;
    color: white;
    font-size: 1.6rem;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.6);
    transition: transform 0.15s ease;
}

.radial-close-btn:hover {
    transform: scale(1.15) rotate(90deg);
}

.radial-canvas-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#radialTreeCanvas {
    width: min(84vh, 88vw);
    height: min(84vh, 88vw);
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.45);
}

.radial-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(10, 16, 28, 0.96);
    border: 2px solid #00e5ff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(0, 229, 255, 0.4);
    z-index: 600;
    animation: tooltipPop 0.12s ease;
}

@keyframes tooltipPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ==================== GRAPHICS QUALITY & TVA SHADERS ==================== */
body.gfx-schlecht #gameCanvas {
    image-rendering: pixelated;
    filter: contrast(0.95);
}

body.gfx-hoch #gameCanvas {
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.25)) contrast(1.05);
}

body.gfx-ultra #gameCanvas {
    filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.35)) saturate(1.12) contrast(1.08);
}

body.gfx-goettlich #gameCanvas {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.45)) saturate(1.22) contrast(1.12) brightness(1.04);
}

/* 🌌 THE LEGENDARY TVA GRAPHICS TIER (Sickest Visual Fidelity) */
body.gfx-tva {
    background: radial-gradient(circle at center, #0a1122 0%, #03060c 100%);
}

body.gfx-tva #gameCanvas {
    filter: drop-shadow(0 0 35px rgba(0, 229, 255, 0.55)) 
           drop-shadow(0 0 65px rgba(213, 0, 249, 0.35)) 
           saturate(1.35) 
           contrast(1.16) 
           brightness(1.06);
    animation: tvaAuraPulse 8s infinite alternate ease-in-out;
}

@keyframes tvaAuraPulse {
    0% { filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.5)) saturate(1.3) contrast(1.15); }
    50% { filter: drop-shadow(0 0 45px rgba(255, 215, 0, 0.55)) saturate(1.4) contrast(1.18); }
    100% { filter: drop-shadow(0 0 35px rgba(213, 0, 249, 0.5)) saturate(1.35) contrast(1.16); }
}

/* Ranked Tier Colors */
.rank-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==================== XBOX & GAMEPAD CONTROLLER HUD ==================== */
.gamepad-hud {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(10, 16, 28, 0.88);
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 80;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 15px rgba(0, 229, 255, 0.2);
    pointer-events: none;
    animation: fadeInGamepad 0.3s ease-out;
}

.gamepad-hint-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #00e5ff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gamepad-hints-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #e0e6ed;
}

.gamepad-hint {
    display: flex;
    align-items: center;
    gap: 4px;
}

.xbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.xbox-btn.ls, .xbox-btn.rs { background: #37474f; color: #eceff1; border: 1px solid #78909c; }
.xbox-btn.rt, .xbox-btn.lt { background: #00e5ff; color: #000; border: 1px solid #80d8ff; }
.xbox-btn.lb, .xbox-btn.rb { background: #546e7a; color: #fff; border: 1px solid #90a4ae; }
.xbox-btn.x { background: #2979ff; color: #fff; border: 1px solid #82b1ff; }
.stat-9 {
    background: linear-gradient(90deg, #ff007f, #ff4081);
}

.tree-node {
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid #00e5ff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.tree-arrow {
    font-size: 1rem;
    color: #ffd700;
    font-weight: bold;
}

.class-upgrade-btn.is-godtier {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.7), rgba(255, 215, 0, 0.6));
    border: 2px solid #ffd700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 15px rgba(224, 64, 251, 0.5);
    color: #ffffff;
    animation: godTierPulse 2s ease-in-out infinite alternate;
}

@keyframes godTierPulse {
    from { transform: scale(1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); }
    to { transform: scale(1.04); box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}