* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    user-select: none;

    -webkit-user-select: none;

}



body, html {
    width: 100%;

    height: 100%;

    overflow: hidden;

    background-color: #0d1117;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    color: #f1f5f9;

    cursor: default;

    touch-action: manipulation;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

}



#gameContainer {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    background-color: #0f172a;

    touch-action: manipulation;

}



#gameCanvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 1;

    cursor: default;

}



#gameCanvas.aim-manual,

body.aim-manual #gameCanvas {

    cursor: crosshair;

}



/* HUD Layers */

.hud-layer {

    position: absolute;

    z-index: 10;

    pointer-events: none;

}



.hud-layer button, .hud-layer .interactive {

    pointer-events: auto;

}



/* TOP HUD */

#hudTop {

    top: 12px;

    left: 16px;

    right: 16px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.hud-top-left {

    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 280px;

}



/* LoL Swarm Hextech Panels for HUD Top Left */

.hextech-panel {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);

    backdrop-filter: blur(10px);

    border: 1.5px solid #b45309;

    border-radius: 8px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(251, 191, 36, 0.35);

    padding: 6px 10px;

    display: flex;

    align-items: center;

    gap: 10px;

    position: relative;

}



.level-crest {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 44px;

    height: 44px;

}



.hp-crest {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 36px;

    height: 36px;

}



.crest-shield {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, #1e293b 0%, #091428 100%);

    border: 2px solid #f59e0b;

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5), inset 0 0 8px rgba(245, 158, 11, 0.3);

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 1px 0;

    box-sizing: border-box;

}



.crest-lvl-tag {

    font-size: 8px;

    font-weight: 900;

    color: #fde68a;

    letter-spacing: 0.8px;

    line-height: 1;

    margin-bottom: 1px;

}



.crest-level-num {

    font-size: 19px;

    font-weight: 900;

    color: #ffffff;

    line-height: 1;

    text-shadow: 0 0 10px rgba(253, 224, 71, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);

}



.crest-diamond {

    width: 28px;

    height: 28px;

    background: radial-gradient(circle, #1e293b 0%, #091428 100%);

    border: 2px solid #f59e0b;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), inset 0 0 6px rgba(245, 158, 11, 0.3);

    transform: rotate(45deg);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

}



.crest-diamond.hp-diamond {

    border-color: #ef4444;

    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4), inset 0 0 6px rgba(239, 68, 68, 0.3);

}



.crest-sub {

    transform: rotate(-45deg);

    font-size: 7px;

    font-weight: 900;

    color: #94a3b8;

    line-height: 1;

    margin-bottom: -1px;

}



.crest-level {

    transform: rotate(-45deg);

    font-size: 13px;

    font-weight: 900;

    color: #fde047;

    line-height: 1;

    text-shadow: 0 0 8px rgba(253, 224, 71, 0.8);

}



.hp-heart-icon {

    transform: rotate(-45deg);

    font-size: 14px;

    line-height: 1;

}



.exp-track-wrap, .hp-track-wrap {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.bar-header-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.bar-sub-label {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

    color: #94a3b8;

    text-transform: uppercase;

}



.bar-stat-val {

    font-family: 'Segoe UI', monospace, sans-serif;

    font-size: 11px;

    font-weight: 800;

    color: #f8fafc;

    text-shadow: 0 1px 3px rgba(0,0,0,0.8);

}



.hp-val {

    color: #34d399;

}



.hp-stat-group {

    display: flex;

    align-items: center;

    gap: 6px;

}



.shield-tag {

    font-size: 10px;

    font-weight: 800;

    color: #38bdf8;

    background: rgba(14, 165, 233, 0.2);

    border: 1px solid rgba(56, 189, 248, 0.4);

    padding: 0 4px;

    border-radius: 4px;

    text-shadow: 0 0 6px rgba(56, 189, 248, 0.8);

}



.hextech-bar {

    position: relative;

    height: 14px;

    background: rgba(5, 10, 20, 0.95);

    border: 1.5px solid #334155;

    border-radius: 4px;

    overflow: hidden;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);

}



.bar-ticks {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;

}



.bar-ticks .tick {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 1px;

    background: rgba(255, 255, 255, 0.15);

}



.tick.tick-25 { left: 25%; }

.tick.tick-50 { left: 50%; }

.tick.tick-75 { left: 75%; }



.exp-bar-fill {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 60%, #818cf8 100%);

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);

    transition: width 0.15s ease-out;

    position: relative;

}



.hp-bar-fill {

    height: 100%;

    width: 100%;

    background: linear-gradient(90deg, #059669 0%, #10b981 65%, #34d399 100%);

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.7);

    transition: width 0.1s ease-out;

    position: relative;

    z-index: 2;

}



.shield-bar-fill {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, rgba(56, 189, 248, 0.65) 0%, rgba(224, 242, 254, 0.95) 100%);

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);

    z-index: 3;

    pointer-events: none;

    display: none;

}



.bar-shimmer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);

    animation: bar-shine 2.8s infinite linear;

    pointer-events: none;

}



@keyframes bar-shine {

    0% { transform: translateX(-100%); }

    100% { transform: translateX(200%); }

}



.danger-pulse {

    border-color: #ef4444 !important;

    animation: hp-danger-flash 0.8s infinite alternate;

}



@keyframes hp-danger-flash {

    from { box-shadow: 0 0 4px #ef4444; }

    to { box-shadow: 0 0 16px #ef4444; }

}



/* TOP CENTER TIMER & BOSS ALERT */

.hud-top-center {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    z-index: 20;

    pointer-events: none;

}



.hud-top-center > * {

    pointer-events: auto;

}



.timer-box {

    background: rgba(15, 23, 42, 0.85);

    backdrop-filter: blur(8px);

    border: 1px solid #334155;

    padding: 6px 16px;

    border-radius: 20px;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    gap: 6px;

    color: #f8fafc;

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);

}



.boss-alert {

    background: rgba(185, 28, 28, 0.95);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(254, 202, 202, 0.45);

    color: #fff;

    font-weight: 800;

    font-size: 13px;

    letter-spacing: 1.2px;

    padding: 5px 18px;

    border-radius: 20px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(239, 68, 68, 0.55);

    animation: pulse-danger 0.8s infinite alternate;

    margin-top: 4px;

    z-index: 105;

}



/* Dynamic Tactical Objective Pill (Events & Goblin Tracker) */

.hud-objective-pill {

    margin-top: 6px;

    background: rgba(15, 23, 42, 0.92);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(245, 158, 11, 0.55);

    padding: 4px 14px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #f8fafc;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 158, 11, 0.2);

    animation: objPulse 2.5s infinite ease-in-out;

}

.hud-objective-pill.hidden {

    display: none !important;

}

@keyframes objPulse {

    0%, 100% { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 12px rgba(245, 158, 11, 0.2); }

    50% { border-color: rgba(251, 191, 36, 0.9); box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 20px rgba(251, 191, 36, 0.45); }

}

.hud-objective-pill .obj-icon {

    font-size: 18px;

    line-height: 1;

}

.hud-objective-pill .obj-text-group {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.hud-objective-pill .obj-title {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    color: #fbbf24;

    text-transform: uppercase;

    white-space: nowrap;

}

.hud-objective-pill .obj-progress-bar {

    width: 130px;

    height: 5px;

    background: rgba(30, 41, 59, 0.9);

    border-radius: 3px;

    overflow: hidden;

}

.hud-objective-pill .obj-progress-fill {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #f59e0b, #fbbf24);

    border-radius: 3px;

    transition: width 0.12s linear;

}

.hud-objective-pill .obj-timer {

    font-size: 13px;

    font-weight: 800;

    color: #e2e8f0;

    min-width: 28px;

    text-align: right;

    white-space: nowrap;

}



@keyframes pulse-danger {

    from { transform: scale(0.95); opacity: 0.8; }

    to { transform: scale(1.05); opacity: 1; box-shadow: 0 0 15px #ef4444; }

}



/* TOP RIGHT STATS */

.hud-top-right {

    display: flex;

    align-items: center;

    gap: 8px;

}



.stat-pill {

    background: linear-gradient(180deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.95) 100%);

    border: 1px solid #334155;

    height: 36px;

    min-width: 68px;

    padding: 0 10px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    line-height: 1;

    box-sizing: border-box;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

}



.stat-pill > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}



.stat-pill svg {

    display: block;

    width: 17px;

    height: 17px;

    flex-shrink: 0;

}



#hudGold, #hudKills, #lobbyGold {

    font-size: 14px;

    font-weight: 900;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.gold-pill { color: #fbbf24; border-color: rgba(245, 158, 11, 0.45); }

.kill-pill { color: #f43f5e; border-color: rgba(244, 63, 94, 0.45); }



/* LoL Swarm [C] Aim Mode Toggle Button */

.aim-mode-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(15, 23, 42, 0.90);

    border: 1.5px solid rgba(56, 189, 248, 0.5);

    border-radius: 999px;

    padding: 3px 12px;

    color: #f8fafc;

    cursor: pointer;

    font-family: inherit;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    user-select: none;

}

.aim-mode-pill:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);

}

.aim-mode-pill.auto {

    border-color: rgba(16, 185, 129, 0.7);

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);

}

.aim-mode-pill.auto .aim-mode-val {

    color: #34d399;

}

.aim-mode-pill.manual {

    border-color: rgba(245, 158, 11, 0.85);

    background: linear-gradient(135deg, rgba(30, 20, 10, 0.95), rgba(15, 23, 42, 0.92));

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);

}

.aim-mode-pill.manual .aim-mode-val {

    color: #fbbf24;

}

.aim-label-group {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.1;

}

.aim-sub-title {

    font-size: 8.5px;

    color: #94a3b8;

    letter-spacing: 0.6px;

    font-weight: 800;

}

.aim-mode-val {

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: 0.5px;

}

.aim-icon {

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



/* Touch Aim Button */

.touch-aim-btn {

    border-color: #10b981;

    background: rgba(15, 23, 42, 0.92);

}

.touch-aim-btn.auto {

    border-color: #10b981;

    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);

}

.touch-aim-btn.manual {

    border-color: #f59e0b;

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);

}

.touch-aim-text {

    position: absolute;

    bottom: 4px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.5px;

    color: #34d399;

}

.touch-aim-btn.manual .touch-aim-text {

    color: #fbbf24;

}



.hud-btn {

    background: rgba(30, 41, 59, 0.85);

    border: 1px solid #475569;

    color: #fff;

    font-size: 16px;

    width: 36px;

    height: 36px;

    border-radius: 10px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.hud-btn:hover {

    background: #334155;

    transform: translateY(-1px);

}



.hud-btn-leave {

    border-color: rgba(239, 68, 68, 0.4);

    background: rgba(239, 68, 68, 0.15);

    color: #fca5a5;

}



.hud-btn-leave:hover {

    background: rgba(239, 68, 68, 0.35);

    border-color: #ef4444;

    color: #ffffff;

    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);

}



/* ============================================== */

/* 👁️ SPECTATOR & CO-OP DOWNED HUD BAR           */

/* ============================================== */

.spectator-bar {

    position: absolute;

    top: 80px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 26, 0.98) 100%);

    border: 2px solid #ef4444;

    border-radius: 14px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(239, 68, 68, 0.25);

    backdrop-filter: blur(12px);

    padding: 10px 18px;

    display: flex;

    align-items: center;

    gap: 16px;

    z-index: 45;

    animation: pulseBorder 2s infinite ease-in-out;

}



@keyframes pulseBorder {

    0%, 100% { border-color: #ef4444; box-shadow: 0 0 14px rgba(239, 68, 68, 0.3); }

    50% { border-color: #f59e0b; box-shadow: 0 0 22px rgba(245, 158, 11, 0.5); }

}



.spectator-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



.spectator-badge {

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid #ef4444;

    color: #fca5a5;

    font-size: 11px;

    font-weight: 900;

    padding: 3px 8px;

    border-radius: 6px;

    letter-spacing: 0.5px;

}



.spectator-text {

    font-size: 13px;

    font-weight: 700;

    color: #e2e8f0;

}



.spectator-text strong {

    color: #38bdf8;

}



.spectator-controls {

    display: flex;

    align-items: center;

    gap: 8px;

}



.btn-spec {

    background: rgba(30, 41, 59, 0.9);

    border: 1px solid #475569;

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 800;

    padding: 6px 12px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.btn-spec:hover {

    background: #334155;

    color: #ffffff;

    border-color: #38bdf8;

    transform: translateY(-1px);

}



.btn-spec-leave {

    background: rgba(185, 28, 28, 0.35);

    border-color: #ef4444;

    color: #fca5a5;

}



.btn-spec-leave:hover {

    background: #ef4444;

    color: #ffffff;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);

}



@media (max-width: 600px) {

    .spectator-bar {

        top: 65px;

        flex-direction: column;

        padding: 8px 12px;

        gap: 8px;

        width: 92%;

    }

    .spectator-controls {

        flex-wrap: wrap;

        justify-content: center;

    }

}



/* INVENTORY BAR (BOTTOM CENTER - LoL Swarm Console) */

#hudInventory {

    bottom: 14px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 16px;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);

    backdrop-filter: blur(12px);

    border: 2px solid #b45309;

    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(180, 83, 9, 0.25), inset 0 1px 0 rgba(251, 191, 36, 0.4);

    padding: 8px 16px;

    border-radius: 14px;

    z-index: 25;

}



.slots-group {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.slot-label {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

    color: #94a3b8;

}



.slots-container {

    display: flex;

    gap: 6px;

}



.item-slot {

    width: 38px;

    height: 38px;

    background: rgba(30, 41, 59, 0.9);

    border: 1px solid #475569;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    position: relative;

}



.item-slot.empty {

    border-style: dashed;

    border-color: #334155;

}



.item-slot .slot-stars {

    position: absolute;

    bottom: 1px;

    font-size: 8px;

    color: #f59e0b;

    letter-spacing: -2px;

}



.item-slot.evolved {

    border-color: #fbbf24;

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.65), inset 0 0 8px rgba(251, 191, 36, 0.35);

    background: linear-gradient(135deg, rgba(40, 25, 10, 0.95), rgba(15, 23, 42, 0.95));

}



.item-slot .slot-stars.evo-stars {

    font-size: 7.5px;

    font-weight: 900;

    color: #fbbf24;

    letter-spacing: 0px;

    text-shadow: 0 0 8px rgba(251, 191, 36, 0.9);

}



/* SQUAD / CO-OP BAR (UPPER RIGHT - LoL Swarm Co-op Lineup) */

#hudTeam {

    top: 68px;

    right: 16px;

    bottom: auto;

    display: flex;

    flex-direction: column;

    gap: 6px;

    background: rgba(15, 23, 42, 0.65);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 8px 12px;

    border-radius: 12px;

    min-width: 200px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

    z-index: 20;

    transition: all 0.2s ease-out;

}



.team-header-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

}



.team-toggle-btn {

    background: rgba(30, 41, 59, 0.8);

    border: 1px solid #475569;

    color: #94a3b8;

    font-size: 11px;

    font-weight: 800;

    width: 20px;

    height: 20px;

    border-radius: 4px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.team-toggle-btn:hover {

    background: #475569;

    color: #ffffff;

}



#hudTeam.collapsed .squad-list,

#hudTeam.collapsed .balance-badge {

    display: none !important;

}



#hudTeam.collapsed {

    min-width: auto;

    padding: 6px 10px;

}



.team-header {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

    color: #94a3b8;

}



.party-selector {

    display: flex;

    gap: 3px;

}



.party-btn {

    background: #1e293b;

    border: 1px solid #475569;

    color: #94a3b8;

    font-size: 9px;

    font-weight: 800;

    padding: 2px 6px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.party-btn:hover {

    background: #334155;

    color: #f8fafc;

}



.party-btn.active {

    background: #6366f1;

    border-color: #818cf8;

    color: #ffffff;

    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);

}



.balance-badge {

    font-size: 9px;

    font-weight: 700;

    color: #38bdf8;

    background: rgba(14, 165, 233, 0.12);

    border: 1px solid rgba(14, 165, 233, 0.3);

    padding: 2px 6px;

    border-radius: 4px;

    text-align: center;

}



.squad-list {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 2px;

}



.teammate {

    display: flex;

    align-items: center;

    gap: 8px;

}



.teammate.offline {

    opacity: 0.5;

}



.p-avatar {

    width: 26px;

    height: 26px;

    border-radius: 6px;

    background: #1e293b;

    border: 1px solid #475569;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

}



.p-info {

    flex: 1;

}



.p-name {

    font-size: 10px;

    font-weight: 700;

    color: #e2e8f0;

}



.p-hp-bar {

    width: 100%;

    height: 5px;

    background: #334155;

    border-radius: 3px;

    overflow: hidden;

    margin-top: 2px;

}



.p-hp-fill {

    height: 100%;

    background: #10b981;

}



.teammate.offline .p-status {

    font-size: 8px;

    color: #64748b;

}



/* ============================================== */

/* 🗺️ TACTICAL RADAR MINIMAP (LoL Swarm Radar)    */

/* ============================================== */

.hud-minimap-container {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 232px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);
    backdrop-filter: blur(14px);
    border: 1.8px solid #b45309;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), inset 0 0 12px rgba(245, 158, 11, 0.15);
    padding: 8px 10px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.minimap-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(245, 158, 11, 0.25);
    padding-bottom: 5px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.minimap-title {
    font-size: 10px;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}



.minimap-canvas-wrap {

    width: 150px;

    height: 150px;

    margin: 0 auto;

    border-radius: 8px;

    overflow: hidden;

    background: #060910;

    border: 1px solid rgba(148, 163, 184, 0.25);

    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9);

    position: relative;

}



#hudMinimapCanvas {

    display: block;

    width: 150px;

    height: 150px;

}



.minimap-legend-row {

    display: flex;

    justify-content: space-around;

    align-items: center;

    padding-top: 2px;

}



.m-legend-item {

    font-size: 8px;

    font-weight: 800;

    color: #94a3b8;

    display: flex;

    align-items: center;

    gap: 4px;

    letter-spacing: 0.5px;

}



.m-blip {

    display: inline-block;

    width: 7px;

    height: 7px;

    border-radius: 50%;

}



.blip-you {

    background: #38bdf8;

    box-shadow: 0 0 6px #38bdf8;

}



.blip-squad {

    background: #10b981;

    box-shadow: 0 0 6px #10b981;

}



.blip-boss {

    background: #c084fc;

    box-shadow: 0 0 6px #c084fc;

}



/* On mobile touch devices, move minimap below top HP bar so it never overlaps HP/vitality or action buttons */

body.touch-device .hud-minimap-container {

    bottom: auto;

    top: 154px;

    right: 8px;

    left: auto;

    width: 125px;

    padding: 6px;

    transform: scale(0.9);

    transform-origin: top right;

}



body.touch-device .minimap-canvas-wrap {

    width: 105px;

    height: 105px;

}



body.touch-device #hudMinimapCanvas {

    width: 105px;

    height: 105px;

}



/* Ensure Co-op squad health list docks on the LEFT below top HP bar on touch devices */

body.touch-device #hudTeam {

    top: 154px;

    left: 8px;

    right: auto;

    min-width: 130px;

    max-width: 145px;

    padding: 5px 8px;

    opacity: 0.9;

}




/* MODAL BACKDROP & SPRING-IN ENTRANCE ANIMATIONS */
@keyframes modalBackdropFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

@keyframes modalContentSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.86) translateY(24px);
    }
    65% {
        opacity: 1;
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes cardPopIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.92);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-overlay:not(.hidden) {
    animation: modalBackdropFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay:not(.hidden) .modal-card,
.modal-overlay:not(.hidden) .modal-dialog,
.modal-overlay:not(.hidden) .game-over-box {
    animation: modalContentSpringIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
}

.modal-overlay:not(.hidden) .upgrade-card {
    animation: cardPopIn 0.30s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.modal-overlay:not(.hidden) .upgrade-card:nth-child(1) { animation-delay: 0.04s; }
.modal-overlay:not(.hidden) .upgrade-card:nth-child(2) { animation-delay: 0.08s; }
.modal-overlay:not(.hidden) .upgrade-card:nth-child(3) { animation-delay: 0.12s; }
.modal-overlay:not(.hidden) .upgrade-card:nth-child(4) { animation-delay: 0.16s; }


/* MODALS */
.modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 50;

    transition: opacity 0.2s ease;

}



.modal-overlay.hidden {

    display: none;

}



.hidden {

    display: none !important;

}



.modal-card {

    background: #1e293b;

    border: 2px solid #4338ca;

    border-radius: 20px;

    padding: 28px;

    max-width: 820px;

    width: 90%;

    text-align: center;

    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(99, 102, 241, 0.3);

}



.modal-header h2 {

    font-size: 26px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #818cf8;

    text-transform: uppercase;

}



.modal-header p {

    font-size: 14px;

    color: #94a3b8;

    margin-top: 4px;

    margin-bottom: 20px;

}



.choices-container {

    display: flex;

    gap: 16px;

    justify-content: center;

    align-items: stretch;

    flex-wrap: wrap;

}



/* LoL Swarm Holographic Augment Cards (matching user screenshot 1 & 3) */

.upgrade-card {

    position: relative;

    flex: 1 1 230px;

    max-width: 260px;

    min-height: 330px;

    background: linear-gradient(180deg, #131b2e 0%, #080c16 100%);

    border: 2px solid #6366f1;

    border-radius: 18px;

    padding: 24px 16px 18px 16px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 16px rgba(99, 102, 241, 0.25);

    overflow: hidden;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}



.upgrade-card:hover {

    border-color: #38bdf8;

    transform: translateY(-6px) scale(1.02);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 28px rgba(56, 189, 248, 0.5);

    background: linear-gradient(180deg, #1e293b 0%, #0c1222 100%);

}



.upgrade-card:active {

    transform: scale(0.98);

}



/* Corner sci-fi tech crosshairs */

.card-tech-cross {

    position: absolute;

    font-size: 12px;

    font-weight: 900;

    color: #475569;

    pointer-events: none;

    line-height: 1;

}



.card-tech-cross.tl { top: 8px; left: 10px; }

.card-tech-cross.tr { top: 8px; right: 10px; }

.card-tech-cross.bl { bottom: 8px; left: 10px; }

.card-tech-cross.br { bottom: 8px; right: 10px; }



.card-top-header {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 8px;

}



.card-level-badge {

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #94a3b8;

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid #334155;

    padding: 2px 10px;

    border-radius: 12px;

    text-transform: uppercase;

}



.card-icon-wrapper {

    width: 70px;

    height: 70px;

    border-radius: 14px;

    background: rgba(30, 41, 59, 0.7);

    border: 2px solid #4f46e5;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    position: relative;

    box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);

}



.card-icon {

    font-size: 38px;

    display: block;

}



.card-title {

    font-size: 16px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.5px;

    margin-bottom: 4px;

}



.card-tag {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 2px 8px;

    border-radius: 4px;

    margin-bottom: 10px;

}



.tag-weapon { background: #7c2d12; color: #fdba74; }

.tag-passive { background: #064e3b; color: #6ee7b7; }

.tag-evo { background: #581c87; color: #d8b4fe; }



/* Stat Deltas (LoL Swarm Screenshot 1 style: Damage 30 -> 40) */

.card-stats-deltas {

    width: 100%;

    background: rgba(15, 23, 42, 0.75);

    border: 1px solid #1e293b;

    border-radius: 8px;

    padding: 8px 10px;

    margin-bottom: 10px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    text-align: left;

}



.stat-delta-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;

}



.stat-delta-label {

    color: #94a3b8;

    font-weight: 600;

}



.stat-delta-values {

    font-weight: 800;

    display: flex;

    align-items: center;

    gap: 4px;

}



.stat-delta-values .from {

    color: #64748b;

}



.delta-arrow {

    color: #38bdf8;

    font-size: 10px;

}



.stat-delta-values .to {

    color: #34d399;

    font-weight: 900;

}



.card-desc {

    font-size: 11.5px;

    line-height: 1.4;

    color: #94a3b8;

}



/* Card Evolution Requirement Pill (Ultra Clean Minimalist Layout) */

.card-evo-pill {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: 100%;

    padding: 6px 10px;

    border-radius: 6px;

    margin-bottom: 8px;

    box-sizing: border-box;

    transition: all 0.2s ease;

}



.card-evo-pill.owned {

    background: rgba(16, 185, 129, 0.16);

    border: 1.5px solid #10b981;

    color: #6ee7b7;

    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2), inset 0 0 6px rgba(16, 185, 129, 0.1);

}



.card-evo-pill.needed {

    background: rgba(245, 158, 11, 0.12);

    border: 1.5px solid rgba(245, 158, 11, 0.45);

    color: #fcd34d;

    box-shadow: 0 0 8px rgba(245, 158, 11, 0.12), inset 0 0 6px rgba(245, 158, 11, 0.08);

}



.card-evo-pill .evo-pill-icon {

    font-size: 13px;

    line-height: 1;

    flex-shrink: 0;

}



.card-evo-pill .evo-pill-name {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.3px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



/* EVOLVE Card Special Cybernetic Rainbow Glow (LoL Swarm Screenshot 3) */

.evolve-card {

    border-color: #00f0ff;

    box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), 0 0 50px rgba(168, 85, 247, 0.25);

    background: linear-gradient(180deg, #182848 0%, #090e1c 100%);

}



.evolve-badge {

    color: #00f0ff;

    border-color: #00f0ff;

    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);

    font-weight: 900;

}



.evo-glow {

    border-color: #00f0ff;

    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);

}



.evo-star-tag {

    position: absolute;

    bottom: -4px;

    right: -4px;

    background: #fbbf24;

    color: #000;

    border-radius: 50%;

    font-size: 10px;

    font-weight: 900;

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 0 8px #fbbf24;

}



/* DIALOG / GAME OVER / PAUSE */

.modal-dialog {

    background: #1e293b;

    border: 2px solid #334155;

    border-radius: 16px;

    padding: 28px 36px;

    text-align: center;

    min-width: 320px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.7);

}



.modal-dialog h1, .modal-dialog h2 {

    color: #f8fafc;

    margin-bottom: 16px;

}



.rank-badge {

    display: inline-block;

    font-size: 42px;

    font-weight: 900;

    color: #fbbf24;

    text-shadow: 0 0 20px rgba(251, 191, 36, 0.7);

    margin-bottom: 16px;

}



.run-stats {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 24px;

    font-size: 14px;

}



.stat-row {

    display: flex;

    justify-content: space-between;

    color: #94a3b8;

}



.stat-row strong {

    color: #f1f5f9;

}



.dialog-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.btn-primary {

    background: linear-gradient(135deg, #6366f1, #4f46e5);

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    padding: 12px 24px;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);

    transition: all 0.15s ease;

}



.btn-primary:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6);

}



.btn-secondary {

    background: #334155;

    color: #e2e8f0;

    font-size: 13px;

    font-weight: 700;

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.15s;

}



.btn-secondary:hover {

    background: #475569;

}



/* ============================================== */

/* ============================================== */

/* 🏰 LOBBY SCREEN (Modern Roguelite Aesthetic)    */

/* ============================================== */

#lobbyScreen {

    position: absolute;

    inset: 0;

    width: 100vw;

    height: 100vh;

    background:
        radial-gradient(ellipse at 50% 18%, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.08) 25%, transparent 55%),
        radial-gradient(circle at 50% 25%, #181b28 0%, #10121a 50%, #07080d 100%);

    display: flex;

    flex-direction: column;

    z-index: 40;

    overflow: hidden;

}



.lobby-bg-canvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: auto;

    z-index: 1;

}



#lobbyHeader {

    position: relative;

    z-index: 5;

    height: 68px;

    padding: 0 28px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1.5px solid rgba(245, 158, 11, 0.25);

    background: linear-gradient(180deg, rgba(20, 22, 30, 0.95) 0%, rgba(12, 14, 20, 0.98) 100%);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);

}



.lobby-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}



.heroic-logo-wrap {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45));

    animation: crest-pulse 3s infinite alternate ease-in-out;

    flex-shrink: 0;

}



@keyframes crest-pulse {

    from { transform: scale(1); filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4)); }

    to { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.7)); }

}



.brand-text h1 {

    font-size: 19px;

    font-weight: 900;

    letter-spacing: 2.2px;

    line-height: 1.1;

    background: linear-gradient(135deg, #ffffff 0%, #fef08a 35%, #f59e0b 70%, #d97706 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.35));

}



.brand-subtitle {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #f59e0b;

    text-transform: uppercase;

}



.lobby-center-pills {

    display: flex;

    align-items: center;

    gap: 10px;

}



.room-pill {

    background: rgba(15, 23, 42, 0.85);

    border: 1.5px solid rgba(99, 102, 241, 0.4);

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 11.5px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #e2e8f0;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

}



.room-pill strong {

    color: #38bdf8;

    letter-spacing: 0.8px;

    font-family: monospace, sans-serif;

}



.coop-beta-badge {

    background: rgba(245, 158, 11, 0.12);

    border: 1.5px solid rgba(245, 158, 11, 0.5);

    color: #fbbf24;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 5px 10px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);

    cursor: pointer;

    user-select: none;

    transition: all 0.2s ease;

}



.coop-beta-badge:hover {

    background: rgba(245, 158, 11, 0.22);

    border-color: #f59e0b;

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);

}



.beta-pulse-dot {

    width: 6px;

    height: 6px;

    background: #fbbf24;

    border-radius: 50%;

    box-shadow: 0 0 8px #fbbf24;

    animation: betaPulse 1.8s infinite ease-in-out;

}



@keyframes betaPulse {

    0%, 100% { transform: scale(1); opacity: 0.8; }

    50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 12px #f59e0b; }

}



.coop-beta-callout-banner {

    display: flex;

    align-items: center;

    gap: 12px;

    background: rgba(245, 158, 11, 0.08);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 8px;

    padding: 10px 14px;

    margin: 4px 16px 12px 16px;

}



.coop-beta-callout-banner .callout-icon {

    font-size: 20px;

    flex-shrink: 0;

}



.coop-beta-callout-banner .callout-content {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 11px;

    color: #cbd5e1;

    line-height: 1.4;

}



.coop-beta-callout-banner .callout-content strong {

    color: #fbbf24;

    font-weight: 800;

    letter-spacing: 0.5px;

}



.privacy-pill {

    background: rgba(15, 23, 42, 0.85);

    border: 1.5px solid rgba(16, 185, 129, 0.5);

    color: #34d399;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    padding: 5px 12px;

    border-radius: 20px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.privacy-pill:hover {

    background: rgba(16, 185, 129, 0.15);

    border-color: #34d399;

    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);

}



.privacy-pill.private {

    border-color: rgba(239, 68, 68, 0.5);

    color: #f87171;

}



.privacy-pill.invite {

    border-color: rgba(245, 158, 11, 0.5);

    color: #fbbf24;

}



.btn-leave-squad {

    background: rgba(239, 68, 68, 0.18) !important;

    border: 1.5px solid rgba(239, 68, 68, 0.5) !important;

    color: #fca5a5 !important;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.6px;

    padding: 5px 12px;

    border-radius: 8px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: all 0.15s ease;

}



.btn-leave-squad:hover {

    background: rgba(239, 68, 68, 0.35) !important;

    border-color: #ef4444 !important;

    color: #ffffff !important;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);

}



.btn-room-browser,

.header-icon-btn {

    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);

    border: 1.5px solid rgba(148, 163, 184, 0.3);

    color: #e2e8f0;

    width: 36px;

    height: 36px;

    padding: 0;

    border-radius: 10px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

}



.btn-room-browser {

    border-color: rgba(56, 189, 248, 0.5);

    color: #38bdf8;

    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);

}



.btn-room-browser:hover,

.header-icon-btn:hover {

    border-color: #f59e0b;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);

}



.header-icon-btn.journal-btn {

    border-color: rgba(245, 158, 11, 0.45);

    color: #fbbf24;

}



.header-icon-btn.friends-btn {

    border-color: rgba(167, 139, 250, 0.45);

    color: #c4b5fd;

}



.header-icon-btn.anvil-btn {

    border-color: rgba(245, 158, 11, 0.55);

    background: linear-gradient(135deg, rgba(45, 30, 15, 0.9) 0%, rgba(25, 18, 10, 0.95) 100%);

    color: #fde68a;

}



.btn-copy {

    background: linear-gradient(135deg, #4f46e5, #6366f1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    width: 26px;

    height: 26px;

    padding: 0;

    border-radius: 8px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);

    transition: all 0.15s ease;

}



.btn-copy:hover {

    background: #6366f1;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.6);

}



.btn-copy .copy-text,

.btn-room-browser .nav-text,

.btn-header-action .nav-text {

    display: none !important;

}



.lobby-right-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



.header-gold-pill {

    background: rgba(15, 23, 42, 0.9);

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    border-radius: 20px;

    height: 36px;

    padding: 0 12px 0 9px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



.header-gold-val {

    font-size: 13px;

    font-weight: 900;

    color: #fef08a;

    letter-spacing: 0.5px;

    font-family: monospace, sans-serif;

}



.user-profile-circle-pill {

    position: relative;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

}



.user-level-badge {

    position: absolute;

    bottom: -3px;

    right: -4px;

    background: #f59e0b;

    color: #0f172a;

    font-size: 9px;

    font-weight: 900;

    padding: 1px 4px;

    border-radius: 6px;

    border: 1.5px solid #0f172a;

    line-height: 1;

}



.user-avatar-circle {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #1e1b4b;

    border: 2px solid #818cf8;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    flex-shrink: 0;

    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);

    transition: transform 0.2s ease, border-color 0.2s ease;

}



.user-avatar-circle:hover {

    transform: scale(1.08);

    border-color: #fbbf24;

}

    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 191, 36, 0.2);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    white-space: nowrap;

}



.header-anvil-pill:hover {

    background: linear-gradient(135deg, rgba(45, 34, 20, 0.95) 0%, rgba(26, 18, 12, 0.98) 100%);

    border-color: #fbbf24;

    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45), 0 0 14px rgba(251, 191, 36, 0.3);

    transform: translateY(-1px);

}



.anvil-gold-display {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #fbbf24;

}



.header-gold-val {

    font-size: 14px;

    font-weight: 900;

    color: #fef08a;

    font-family: monospace, sans-serif;

    letter-spacing: 0.5px;

}



.anvil-cta-badge {

    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);

    border: 1px solid #fbbf24;

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.6px;

    padding: 3px 8px;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

}



.friend-card-item {

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(148, 163, 184, 0.18);

    border-radius: 8px;

    padding: 10px 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 0.2s ease;

    margin-bottom: 8px;

}



.friend-card-item:hover {

    border-color: rgba(167, 139, 250, 0.5);

    background: rgba(30, 41, 59, 0.75);

}



.friend-card-left {

    display: flex;

    align-items: center;

    gap: 12px;

}



.friend-avatar-badge {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #1e1b4b;

    border: 1.5px solid #a78bfa;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.friend-card-details {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.friend-card-name {

    font-size: 13px;

    font-weight: 800;

    color: #f8fafc;

    display: flex;

    align-items: center;

    gap: 6px;

}



.friend-rank-badge {

    font-size: 9px;

    font-weight: 900;

    color: #fbbf24;

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.35);

    padding: 1px 5px;

    border-radius: 4px;

}



.friend-card-status {

    font-size: 11px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.status-dot-online {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #34d399;

    box-shadow: 0 0 6px #34d399;

    display: inline-block;

}



.status-dot-match {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #fbbf24;

    box-shadow: 0 0 6px #fbbf24;

    display: inline-block;

}



.status-dot-offline {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #64748b;

    display: inline-block;

}



.friend-card-right {

    display: flex;

    align-items: center;

    gap: 8px;

}



/* ============================================== */

/* 🎮 LIVING SANCTUARY FLOATING GAME HUD          */

/* (Zero Web Form feel, 100% Immersive Roguelite) */

/* ============================================== */



#lobbyHUD {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;

    overflow: hidden;

}



/* ============================================== */

/* 📖 LEFT: INTERACTIVE TOME OF CHAMPIONS (GRIMOIRE) */

/* ============================================== */

.grimoire-tome {

    position: absolute;

    top: 74px;

    left: 0;

    width: 295px;

    max-width: calc(100vw - 40px);

    pointer-events: auto;

    z-index: 25;

    transform: translateX(-100%);

    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



.grimoire-tome.collapsed {

    transform: translateX(-100%) !important;

}



.grimoire-tome.open {

    transform: translateX(18px) !important;

    box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.85);

}



.grimoire-close-btn {

    display: inline-flex !important;

}



.grimoire-tome.collapsed .grimoire-bookmark-tab {

    animation: tomeTabPulse 2.8s infinite ease-in-out;

}



@keyframes tomeTabPulse {

    0%, 100% {

        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.7), 0 0 0 rgba(251, 191, 36, 0);

    }

    50% {

        box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.9), 0 0 14px rgba(251, 191, 36, 0.65);

    }

}



/* Sliding Bookmark Leather Tab on Book Spine / Edge */

.grimoire-bookmark-tab {

    position: absolute;

    top: 14px;

    right: -38px;

    width: 38px;

    height: 52px;

    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #b91c1c 100%);

    border: 1.5px solid #fbbf24;

    border-left: none;

    border-radius: 0 8px 8px 0;

    color: #fde68a;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.7);

    transition: all 0.2s ease;

    z-index: 20;

}



.grimoire-bookmark-tab:hover {

    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 50%, #dc2626 100%);

    box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);

    transform: scale(1.05);

}



.grimoire-bookmark-tab .tab-icon {

    font-size: 16px;

    line-height: 1;

}



.grimoire-bookmark-tab .tab-text {

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #fde68a;

    margin-top: 2px;

}



/* Grimoire Inner Parchment & Leather Frame */

.grimoire-inner {

    background: linear-gradient(145deg, rgba(22, 16, 30, 0.96) 0%, rgba(10, 8, 16, 0.98) 100%);

    border: 2px solid #d97706;

    border-radius: 16px;

    padding: 14px;

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.9), inset 0 0 16px rgba(245, 158, 11, 0.2);

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-height: calc(100vh - 145px);

    overflow-y: auto;

}



.grimoire-inner::-webkit-scrollbar {

    width: 5px;

}

.grimoire-inner::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.3);

    border-radius: 4px;

}

.grimoire-inner::-webkit-scrollbar-thumb {

    background: #d97706;

    border-radius: 4px;

}



.grimoire-close-btn {

    display: none;

    width: 26px;

    height: 26px;

    border-radius: 6px;

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid rgba(239, 68, 68, 0.5);

    color: #fca5a5;

    font-size: 13px;

    font-weight: 900;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

    margin-left: auto;

    flex-shrink: 0;

}



.grimoire-close-btn:hover {

    background: rgba(239, 68, 68, 0.4);

    color: #ffffff;

    border-color: #ef4444;

    transform: scale(1.05);

}



.grimoire-header {

    display: flex;

    align-items: center;

    gap: 8px;

    border-bottom: 1px solid rgba(245, 158, 11, 0.3);

    padding-bottom: 8px;

}



.grimoire-seal-crest {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));

    flex-shrink: 0;

}



.grimoire-title-wrap {

    display: flex;

    flex-direction: column;

    flex: 1;

}



.grimoire-tag {

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.4px;

    color: #f59e0b;

    text-transform: uppercase;

}



.grimoire-header h2 {

    font-size: 17px;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 0.5px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);

}



.grimoire-role-pill {

    font-size: 9px;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 4px;

    background: rgba(56, 189, 248, 0.15);

    color: #38bdf8;

    border: 1px solid rgba(56, 189, 248, 0.4);

    white-space: nowrap;

}



/* Sleek Champion Mastery Card inside Grimoire */

.grimoire-mastery-card {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 8px 10px;

    margin: 4px 0 6px 0;

    background: linear-gradient(135deg, rgba(26, 20, 42, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);

    border: 1px solid rgba(168, 85, 247, 0.35);

    border-radius: 8px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(192, 132, 252, 0.15);

    transition: all 0.2s ease;

    box-sizing: border-box;

    width: 100%;

}



.grimoire-mastery-card:hover {

    border-color: rgba(168, 85, 247, 0.6);

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 10px rgba(168, 85, 247, 0.2);

}



.mastery-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    width: 100%;

}



.mastery-stars-inline {

    font-size: 12px;

    color: #fbbf24;

    letter-spacing: 1px;

    text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);

    line-height: 1;

}



.mastery-tier-meta {

    display: flex;

    align-items: center;

    gap: 5px;

}



.mastery-level-inline {

    font-size: 9.5px;

    font-weight: 900;

    color: #f3e8ff;

    letter-spacing: 0.5px;

    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35) 0%, rgba(109, 40, 217, 0.45) 100%);

    border: 1px solid rgba(168, 85, 247, 0.5);

    padding: 2px 5px;

    border-radius: 4px;

    white-space: nowrap;

}



.mastery-tier-inline {

    font-size: 9.5px;

    font-weight: 800;

    color: #cbd5e1;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    white-space: nowrap;

}



/* Slim XP Progress Bar */

.mastery-xp-bar-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

}



.mastery-xp-bar-wrap .mastery-bar-track {

    flex: 1;

    height: 5px;

    background: rgba(10, 8, 16, 0.95);

    border-radius: 3px;

    overflow: hidden;

    border: 1px solid rgba(168, 85, 247, 0.25);

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);

}



.mastery-xp-bar-wrap .mastery-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #9333ea, #a855f7, #fbbf24);

    border-radius: 3px;

    transition: width 0.3s ease;

    box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);

}



.mastery-xp-bar-wrap .mastery-xp-text {

    font-size: 9px;

    font-weight: 800;

    color: #94a3b8;

    white-space: nowrap;

    letter-spacing: 0.3px;

    font-family: monospace, sans-serif;

}



/* Full-width, prominent Action Button */

.btn-grimoire-mastery-action {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 6px 10px;

    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35) 0%, rgba(109, 40, 217, 0.45) 100%);

    border: 1.5px solid rgba(168, 85, 247, 0.6);

    border-radius: 6px;

    color: #f3e8ff;

    font-size: 9.5px;

    font-weight: 900;

    letter-spacing: 0.6px;

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

    box-sizing: border-box;

    margin: 0;

}



.btn-grimoire-mastery-action:hover {

    background: linear-gradient(135deg, rgba(147, 51, 234, 0.55) 0%, rgba(109, 40, 217, 0.65) 100%);

    border-color: #c084fc;

    color: #ffffff;

    box-shadow: 0 2px 14px rgba(168, 85, 247, 0.45);

    transform: translateY(-1px);

}



.btn-grimoire-mastery-action .btn-mastery-icon {

    font-size: 11px;

    line-height: 1;

}



.btn-grimoire-mastery-action .btn-mastery-arrow {

    font-size: 9px;

    transition: transform 0.2s ease;

}



.btn-grimoire-mastery-action:hover .btn-mastery-arrow {

    transform: translateX(3px);

}



.grimoire-desc {

    font-size: 11px;

    line-height: 1.4;

    color: #e2e8f0;

    font-style: italic;

    border-left: 2.5px solid rgba(245, 158, 11, 0.6);

    padding-left: 8px;

    margin: 2px 0 6px 0;

}



.grimoire-seals {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.grimoire-seal-card {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    background: rgba(15, 23, 42, 0.85);

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-left: 3.5px solid #f59e0b;

    border-radius: 6px;

    padding: 6px 9px;

    transition: all 0.15s ease;

}



.grimoire-seal-card:hover {

    background: rgba(30, 41, 59, 0.95);

    border-color: #fbbf24;

    transform: translateX(2px);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);

}



.seal-glyph {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    margin-top: 1px;

}



.seal-info {

    display: flex;

    flex-direction: column;

    gap: 1.5px;

}



.seal-type {

    font-size: 7.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #94a3b8;

    text-transform: uppercase;

}



.seal-name {

    font-size: 11.5px;

    font-weight: 800;

    color: #fbbf24;

}



.seal-detail {

    font-size: 9.5px;

    color: #f1f5f9;

    line-height: 1.35;

}



/* ============================================== */

/* 🗺️ RIGHT: EXPEDITION WAR ATLAS CONSOLE         */

/* ============================================== */

.war-map-console {

    position: absolute;

    top: 74px;

    right: 20px;

    width: 315px;

    max-width: calc(100vw - 40px);

    pointer-events: auto;

    z-index: 15;

    background: linear-gradient(165deg, rgba(17, 24, 39, 0.94) 0%, rgba(11, 15, 25, 0.97) 100%);

    border: 1.5px solid rgba(245, 158, 11, 0.35);

    border-radius: 14px;

    padding: 14px 16px;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(245, 158, 11, 0.06);

    display: flex;

    flex-direction: column;

    gap: 10px;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.war-map-console:hover {

    border-color: rgba(245, 158, 11, 0.55);

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 28px rgba(245, 158, 11, 0.12);

}



/* 1. Sector Header & Navigation */

.expedition-sector-header {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.sector-badge-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.war-badge {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    background: rgba(245, 158, 11, 0.16);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

    padding: 2px 7px;

    border-radius: 4px;

    text-transform: uppercase;

}



.war-nav-btns {

    display: flex;

    gap: 5px;

}



.war-arrow-btn {

    background: rgba(30, 41, 59, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.15);

    color: #f1f5f9;

    font-size: 15px;

    line-height: 1;

    width: 24px;

    height: 24px;

    border-radius: 5px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.war-arrow-btn:hover {

    background: rgba(245, 158, 11, 0.25);

    border-color: #fbbf24;

    color: #fbbf24;

    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);

}



.sector-title {

    font-size: 14.5px;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 0.4px;

    margin: 0;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);

}



/* 2. Sector Intelligence Grid */

.sector-intel-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

}



.intel-item {

    display: flex;

    align-items: center;

    gap: 7px;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 7px;

    padding: 6px 8px;

    min-width: 0;

}



.intel-icon {

    font-size: 14px;

    line-height: 1;

    flex-shrink: 0;

}



.intel-meta {

    display: flex;

    flex-direction: column;

    gap: 1px;

    min-width: 0;

}



.intel-label {

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: 0.5px;

    color: #64748b;

    text-transform: uppercase;

}



.intel-val {

    font-size: 9.5px;

    font-weight: 800;

    color: #f1f5f9;

    line-height: 1.25;

}



.arena-intel .intel-val {

    color: #38bdf8;

}



.boss-intel .intel-val {

    color: #fca5a5;

}



/* 3. Sector Records Strip */

.sector-records-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 5px;

}



.record-stat-box {

    display: flex;

    align-items: center;

    gap: 5px;

    background: rgba(15, 23, 42, 0.65);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    padding: 5px 6px;

    min-width: 0;

}



.record-stat-box .stat-icon {

    font-size: 12px;

    line-height: 1;

    flex-shrink: 0;

}



.record-stat-box .stat-info {

    display: flex;

    flex-direction: column;

    gap: 1px;

    min-width: 0;

}



.record-stat-box .stat-lbl {

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.5px;

    color: #64748b;

    text-transform: uppercase;

}



.record-stat-box .stat-val {

    font-size: 10.5px;

    font-weight: 900;

    color: #f8fafc;

    white-space: nowrap;

}



.record-stat-box.rank-box {

    border-color: rgba(245, 158, 11, 0.25);

    background: linear-gradient(135deg, rgba(20, 16, 32, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);

}



.stat-val-rank {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin-top: 1px;

}



/* LoL Swarm Performance Grade Badges (S+, S, A, B, C, None) */

.swarm-rank-badge {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 1px 6px;

    height: 18px;

    box-sizing: border-box;

    border-radius: 4px;

    font-family: inherit;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.5px;

    line-height: 1;

    white-space: nowrap;

    transition: all 0.2s ease;

}



.swarm-rank-badge .rank-letter {

    font-size: 11px;

    font-weight: 950;

    line-height: 1;

}



.swarm-rank-badge .rank-title {

    font-size: 7.5px;

    font-weight: 800;

    letter-spacing: 0.5px;

    opacity: 0.9;

    line-height: 1;

}



.swarm-rank-badge.rank-s-plus {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.45) 0%, rgba(239, 68, 68, 0.45) 100%);

    border: 1px solid #fbbf24;

    color: #fef08a;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);

    text-shadow: 0 0 6px rgba(251, 191, 36, 0.8);

}



.swarm-rank-badge.rank-s {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.4) 100%);

    border: 1px solid #f59e0b;

    color: #fde68a;

    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);

    text-shadow: 0 0 4px rgba(245, 158, 11, 0.6);

}



.swarm-rank-badge.rank-a {

    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(59, 130, 246, 0.35) 100%);

    border: 1px solid #38bdf8;

    color: #bae6fd;

    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);

}



.swarm-rank-badge.rank-b {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.35) 100%);

    border: 1px solid #34d399;

    color: #a7f3d0;

    box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);

}



.swarm-rank-badge.rank-c {

    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(185, 28, 28, 0.35) 100%);

    border: 1px solid #f87171;

    color: #fecaca;

}



.swarm-rank-badge.rank-none {

    background: rgba(30, 41, 59, 0.4);

    border: 1px dashed rgba(148, 163, 184, 0.3);

    color: #64748b;

}



/* 4. Lobby Difficulty Selector */

.lobby-difficulty-selector {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding-top: 4px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

}



.diff-selector-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.diff-selector-label {

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.7px;

    color: #94a3b8;

    text-transform: uppercase;

}



.diff-header-tag {

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.5px;

    padding: 1.5px 6px;

    border-radius: 4px;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.diff-header-tag.diff-story {

    background: rgba(16, 185, 129, 0.15);

    border: 1px solid rgba(16, 185, 129, 0.4);

    color: #34d399;

}

.diff-header-tag.diff-normal {

    background: rgba(56, 189, 248, 0.15);

    border: 1px solid rgba(56, 189, 248, 0.4);

    color: #38bdf8;

}

.diff-header-tag.diff-hard {

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.4);

    color: #fbbf24;

}

.diff-header-tag.diff-nightmare {

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid rgba(239, 68, 68, 0.5);

    color: #f87171;

    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);

}



.diff-pills-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 4px;

}



.diff-pill-btn {

    background: rgba(15, 23, 42, 0.75);

    border: 1px solid rgba(148, 163, 184, 0.2);

    border-radius: 6px;

    padding: 5px 2px;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    transition: all 0.15s ease;

}



.diff-pill-btn:hover {

    border-color: rgba(255, 255, 255, 0.35);

    background: rgba(30, 41, 59, 0.85);

    transform: translateY(-1px);

}



.diff-pill-btn .diff-pill-icon {

    font-size: 12px;

    line-height: 1;

}



.diff-pill-btn .diff-pill-name {

    font-size: 7.5px;

    font-weight: 900;

    letter-spacing: 0.5px;

    color: #94a3b8;

}



.diff-pill-btn.active[data-diff="STORY"] {

    background: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(6, 78, 59, 0.3) 100%);

    border: 1.5px solid #10b981;

    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);

}

.diff-pill-btn.active[data-diff="STORY"] .diff-pill-name {

    color: #6ee7b7;

}



.diff-pill-btn.active[data-diff="NORMAL"] {

    background: linear-gradient(180deg, rgba(56, 189, 248, 0.25) 0%, rgba(3, 105, 161, 0.3) 100%);

    border: 1.5px solid #38bdf8;

    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);

}

.diff-pill-btn.active[data-diff="NORMAL"] .diff-pill-name {

    color: #7dd3fc;

}



.diff-pill-btn.active[data-diff="HARD"] {

    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(180, 83, 9, 0.3) 100%);

    border: 1.5px solid #f59e0b;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);

}

.diff-pill-btn.active[data-diff="HARD"] .diff-pill-name {

    color: #fcd34d;

}



.diff-pill-btn.active[data-diff="NIGHTMARE"] {

    background: linear-gradient(180deg, rgba(239, 68, 68, 0.28) 0%, rgba(153, 27, 27, 0.35) 100%);

    border: 1.5px solid #ef4444;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);

}

.diff-pill-btn.active[data-diff="NIGHTMARE"] .diff-pill-name {

    color: #fca5a5;

}



/* Detailed Difficulty Intelligence Card (Placed cleanly below buttons) */

.diff-active-badge {

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-left: 3.5px solid #38bdf8;

    border-radius: 6px;

    padding: 6px 9px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    transition: all 0.2s ease;

}



.diff-active-badge.diff-story {

    border-left-color: #10b981;

}

.diff-active-badge.diff-normal {

    border-left-color: #38bdf8;

}

.diff-active-badge.diff-hard {

    border-left-color: #f59e0b;

}

.diff-active-badge.diff-nightmare {

    border-left-color: #ef4444;

}



.diff-intel-chips {

    display: flex;

    align-items: center;

    gap: 4px;

    flex-wrap: wrap;

}



.diff-chip {

    font-size: 7.5px;

    font-weight: 900;

    letter-spacing: 0.4px;

    padding: 1px 5px;

    border-radius: 3px;

    text-transform: uppercase;

}



.diff-chip.chip-buff {

    background: rgba(16, 185, 129, 0.2);

    color: #34d399;

    border: 1px solid rgba(16, 185, 129, 0.4);

}

.diff-chip.chip-neutral {

    background: rgba(56, 189, 248, 0.2);

    color: #38bdf8;

    border: 1px solid rgba(56, 189, 248, 0.4);

}

.diff-chip.chip-nerf {

    background: rgba(239, 68, 68, 0.2);

    color: #f87171;

    border: 1px solid rgba(239, 68, 68, 0.4);

}

.diff-chip.chip-gold {

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

    border: 1px solid rgba(245, 158, 11, 0.4);

}



.diff-intel-text {

    font-size: 9.5px;

    line-height: 1.35;

    color: #cbd5e1;

    font-weight: 500;

}



/* Server Browser Difficulty Filter Row */

.browser-diff-filter-row {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 10px;

    padding: 0 4px;

}



.browser-diff-filter-row .diff-filter-label {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.6px;

    color: #94a3b8;

}



.browser-diff-tab {

    background: rgba(15, 23, 42, 0.7);

    border: 1px solid rgba(148, 163, 184, 0.3);

    border-radius: 5px;

    color: #94a3b8;

    font-size: 9.5px;

    font-weight: 800;

    padding: 3px 8px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.browser-diff-tab:hover {

    border-color: rgba(255, 255, 255, 0.5);

    color: #ffffff;

}



.browser-diff-tab.active {

    background: rgba(56, 189, 248, 0.2);

    border-color: #38bdf8;

    color: #38bdf8;

    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);

}



.room-diff-badge {

    font-size: 8px;

    font-weight: 900;

    padding: 2px 5px;

    border-radius: 4px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.room-diff-badge.diff-story {

    background: rgba(16, 185, 129, 0.18);

    border: 1px solid #10b981;

    color: #6ee7b7;

}



.room-diff-badge.diff-normal {

    background: rgba(56, 189, 248, 0.18);

    border: 1px solid #38bdf8;

    color: #7dd3fc;

}



.room-diff-badge.diff-hard {

    background: rgba(245, 158, 11, 0.18);

    border: 1px solid #f59e0b;

    color: #fcd34d;

}



.room-diff-badge.diff-nightmare {

    background: rgba(239, 68, 68, 0.22);

    border: 1px solid #ef4444;

    color: #fca5a5;

    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);

}



/* War Atlas Difficulty Switcher */

.atlas-diff-tabs {

    display: flex;

    gap: 6px;

    margin-bottom: 8px;

}



.atlas-diff-btn {

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.3);

    border-radius: 5px;

    color: #94a3b8;

    font-size: 9.5px;

    font-weight: 800;

    padding: 3px 9px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.atlas-diff-btn:hover {

    border-color: rgba(255, 255, 255, 0.5);

    color: #ffffff;

}



.atlas-diff-btn.active {

    background: rgba(245, 158, 11, 0.2);

    border-color: #fbbf24;

    color: #fde047;

    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);

}



/* Sleek High-Tech Button to Open Full War Atlas Modal */

.btn-open-atlas-modal {

    position: relative;

    width: 100%;

    margin-top: 2px;

    padding: 8px 12px;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(180, 83, 9, 0.12) 100%);

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    border-radius: 8px;

    cursor: pointer;

    overflow: hidden;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.btn-open-atlas-modal:hover {

    transform: translateY(-1.5px);

    border-color: #fbbf24;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.22) 100%);

    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.28), 0 0 14px rgba(251, 191, 36, 0.22);

}



.atlas-btn-inner {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}



.atlas-btn-icon {

    font-size: 16px;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

}



.atlas-btn-label {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

}



.atlas-btn-label strong {

    font-size: 10.5px;

    font-weight: 900;

    color: #fbbf24;

    letter-spacing: 0.7px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);

}



.atlas-btn-label small {

    font-size: 8px;

    color: #94a3b8;

    letter-spacing: 0.2px;

}



.btn-leave-squad {

    background: rgba(239, 68, 68, 0.2);

    border: 1.5px solid rgba(239, 68, 68, 0.5);

    color: #fca5a5;

    font-size: 11px;

    font-weight: 800;

    padding: 5px 12px;

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-leave-squad:hover {

    background: #dc2626;

    color: #ffffff;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);

}



.lobby-scaling-banner {

    font-size: 11px;

    font-weight: 800;

    text-align: center;

    color: #38bdf8;

    background: rgba(14, 165, 233, 0.15);

    border: 1px solid rgba(14, 165, 233, 0.4);

    padding: 4px 14px;

    border-radius: 20px;

    backdrop-filter: blur(8px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

    letter-spacing: 0.5px;

}



@keyframes pulseDeployGlow {

    0%, 100% {

        box-shadow: 0 0 24px rgba(245, 158, 11, 0.55), 0 8px 24px rgba(0, 0, 0, 0.8);

        border-color: #fde68a;

    }

    50% {

        box-shadow: 0 0 38px rgba(245, 158, 11, 0.85), 0 0 16px rgba(254, 240, 138, 0.65), 0 8px 24px rgba(0, 0, 0, 0.8);

        border-color: #ffffff;

    }

}



/* BIG EXPEDITION DEPLOY BUTTON (Centrally Located Directly Above Champion Selection) */

.btn-deploy-expedition {

    animation: pulseDeployGlow 2.5s infinite ease-in-out;

    position: relative;

    background: linear-gradient(135deg, #b45309 0%, #d97706 40%, #f59e0b 100%);

    border: 2px solid #fde68a;

    border-radius: 16px;

    color: #0f172a;

    font-size: 16.5px;

    font-weight: 900;

    letter-spacing: 1.4px;

    padding: 11px 32px;

    min-width: 320px;

    max-width: 460px;

    cursor: pointer;

    text-transform: uppercase;

    box-shadow: 0 0 26px rgba(245, 158, 11, 0.6), 0 8px 24px rgba(0, 0, 0, 0.8);

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    user-select: none;

}



.btn-deploy-expedition:hover {

    transform: translateY(-2px) scale(1.02);

    box-shadow: 0 0 40px rgba(245, 158, 11, 0.85), 0 12px 30px rgba(0, 0, 0, 0.85);

    border-color: #ffffff;

    background: linear-gradient(135deg, #d97706 0%, #f59e0b 40%, #fbbf24 100%);

}



.btn-deploy-expedition:active {

    transform: translateY(1px) scale(0.985);

}



/* BOTTOM: Floating Champion Dock (Big Start Button + 5 Archetype Shields) */

.floating-champion-dock {

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    pointer-events: auto;

    z-index: 10;

    max-width: 95vw;

}



.dock-title {

    font-size: 9.5px;

    font-weight: 900;

    letter-spacing: 1.5px;

    color: #cbd5e1;

    text-transform: uppercase;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

}



.dock-roster {

    display: flex;

    gap: 8px;

    background: rgba(14, 17, 26, 0.92);

    border: 1.5px solid rgba(148, 163, 184, 0.25);

    border-radius: 18px;

    padding: 8px 12px;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    overflow-x: auto;

}



.hero-token {

    background: rgba(30, 41, 59, 0.65);

    border: 2px solid rgba(100, 116, 139, 0.4);

    border-radius: 12px;

    padding: 6px 12px;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    min-width: 78px;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.hero-token .token-icon {

    font-size: 22px;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));

}



.hero-token .token-name {

    font-size: 11px;

    font-weight: 800;

    color: #f8fafc;

    white-space: nowrap;

}



.hero-token .token-role {

    font-size: 8.5px;

    font-weight: 700;

    color: #94a3b8;

    text-transform: uppercase;

}



.hero-token:hover {

    transform: translateY(-4px);

    border-color: #cbd5e1;

    background: rgba(51, 65, 85, 0.8);

}



.hero-token.selected {

    transform: translateY(-6px) scale(1.05);

    border-color: #f59e0b;

    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%);

    box-shadow: 0 0 18px rgba(245, 158, 11, 0.45);

}



.hero-token[data-hero="IRON_BASTION"].selected { border-color: #f59e0b; box-shadow: 0 0 18px rgba(245, 158, 11, 0.45); }

.hero-token[data-hero="SHADOW_REAPER"].selected { border-color: #38bdf8; box-shadow: 0 0 18px rgba(56, 189, 248, 0.45); }

.hero-token[data-hero="RADIANT_PRIESTESS"].selected { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.45); }

.hero-token[data-hero="ARCANE_RANGER"].selected { border-color: #10b981; box-shadow: 0 0 18px rgba(16, 185, 129, 0.45); }

.hero-token[data-hero="VOID_PYROMANCER"].selected { border-color: #c084fc; box-shadow: 0 0 18px rgba(192, 132, 252, 0.45); }



/* LOCKED HEROES SYSTEM & PROGRESSION */

.hero-token {

    position: relative;

}



.hero-token.locked-hero {

    opacity: 0.78;

    border-style: dashed;

    border-color: rgba(245, 158, 11, 0.45);

    background: rgba(15, 23, 42, 0.85);

}



.hero-token.locked-hero.selected {

    opacity: 1;

    border-style: solid;

    border-color: #f59e0b;

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);

}



.token-lock-badge {

    position: absolute;

    top: -5px;

    right: -5px;

    width: 18px;

    height: 18px;

    background: #0f172a;

    border: 1.5px solid #fbbf24;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);

    z-index: 2;

}



.token-progress-track {

    width: 100%;

    height: 3.5px;

    background: rgba(15, 23, 42, 0.8);

    border-radius: 2px;

    overflow: hidden;

    margin-top: 2px;

}



.token-progress-fill {

    height: 100%;

    background: linear-gradient(90deg, #f59e0b, #fbbf24);

    border-radius: 2px;

    transition: width 0.3s ease;

}



/* GRIMOIRE LOCK REQUIREMENT CARD */

.grimoire-lock-box {

    background: linear-gradient(135deg, rgba(69, 10, 10, 0.92) 0%, rgba(24, 15, 15, 0.95) 100%);

    border: 1.5px solid #f59e0b;

    border-radius: 10px;

    padding: 9px 12px;

    margin-bottom: 8px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 0 14px rgba(245, 158, 11, 0.15);

    animation: lockBoxPulse 3s infinite alternate ease-in-out;

}



@keyframes lockBoxPulse {

    0% { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 0 8px rgba(245, 158, 11, 0.2); }

    100% { border-color: rgba(251, 191, 36, 0.9); box-shadow: 0 0 18px rgba(245, 158, 11, 0.45); }

}



.grimoire-lock-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

}



.grimoire-lock-tag {

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #fbbf24;

    display: flex;

    align-items: center;

    gap: 4px;

    text-transform: uppercase;

}



.grimoire-lock-pct {

    font-size: 9px;

    font-weight: 800;

    color: #fde68a;

    font-family: monospace, sans-serif;

}



.grimoire-lock-desc {

    font-size: 11px;

    color: #f8fafc;

    font-weight: 700;

    line-height: 1.35;

    margin: 0 0 6px 0;

}



.grimoire-lock-bar-track {

    width: 100%;

    height: 7px;

    background: rgba(15, 23, 42, 0.95);

    border-radius: 4px;

    overflow: hidden;

    border: 1px solid rgba(245, 158, 11, 0.35);

    margin-bottom: 4px;

}



.grimoire-lock-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #ea580c, #f59e0b, #fbbf24);

    border-radius: 4px;

    transition: width 0.3s ease;

    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);

}



.grimoire-lock-detail {

    font-size: 8.5px;

    color: #cbd5e1;

    font-weight: 600;

}



/* LOCKED DEPLOY BUTTON */

.btn-deploy-expedition.locked-deploy {

    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #991b1b 100%) !important;

    border-color: #f87171 !important;

    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 8px 24px rgba(0, 0, 0, 0.8) !important;

    color: #fecaca !important;

    cursor: not-allowed !important;

    transform: none !important;

}



.btn-deploy-expedition.locked-deploy .deploy-glow {

    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%) !important;

}



/* LoL Swarm Ready-Up Button States */

.btn-deploy-expedition.not-ready-state {

    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;

    border-color: #34d399 !important;

    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4), inset 0 0 16px rgba(255, 255, 255, 0.2) !important;

    color: #ffffff !important;

    cursor: pointer !important;

}



.btn-deploy-expedition.ready-state {

    background: linear-gradient(135deg, #0f766e 0%, #065f46 100%) !important;

    border-color: #6ee7b7 !important;

    box-shadow: 0 10px 30px rgba(110, 231, 183, 0.3) !important;

    color: #a7f3d0 !important;

    cursor: pointer !important;

}



.btn-deploy-expedition.waiting-squad {

    background: linear-gradient(135deg, #78350f 0%, #451a03 100%) !important;

    border-color: #f59e0b !important;

    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.25) !important;

    color: #fcd34d !important;

    cursor: wait !important;

}



/* COMPENDIUM LOCKED STATUS */

.comp-hero-tab.locked-comp-hero {

    border-style: dashed;

    border-color: rgba(245, 158, 11, 0.4);

    opacity: 0.82;

}



.comp-hero-lock-banner {

    background: rgba(69, 10, 10, 0.85);

    border: 1px solid #f87171;

    border-radius: 8px;

    padding: 8px 12px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.comp-hero-lock-banner strong {

    font-size: 12px;

    color: #fecaca;

    display: block;

}



.comp-hero-lock-banner span {

    font-size: 11px;

    color: #fca5a5;

}



/* MAP SELECT CAROUSEL ARROWS */

.map-arrows {

    display: flex;

    gap: 8px;

}



.map-arrow-btn {

    background: #1e2230;

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    color: #f8fafc;

    font-size: 12px;

    width: 28px;

    height: 28px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);

}



.map-arrow-btn:hover {

    background: #f59e0b;

    border-color: #fbbf24;

    color: #000000;

    font-weight: 900;

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);

}



/* Responsive adjustments for Tablets & Phones */

@media (max-width: 900px) {

    .grimoire-tome {

        top: 68px;

        left: 10px;

        width: 270px;

    }

    .grimoire-header h2 { font-size: 15px; }

    .grimoire-seal-card { padding: 4px 6px; }

    .seal-name { font-size: 10px; }

    .seal-detail { font-size: 8.5px; }



    .war-map-console {

        top: 68px;

        right: 10px;

        width: 260px;

        padding: 10px;

        gap: 6px;

    }

    .world-map-canvas { max-height: 110px; }

    .btn-deploy-expedition { font-size: 13px; padding: 10px 14px; }

}



@media (max-width: 1100px) {

    .grimoire-tome {

        z-index: 35;

        transform: translateX(-100%);

    }

    .grimoire-tome.open {

        transform: translateX(8px) !important;

        box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.85);

    }

    .grimoire-close-btn {

        display: inline-flex;

    }

    .war-map-console {

        width: 250px;

    }

}



@media (max-width: 768px) {

    /* Collapse Grimoire completely offscreen, leaving only the protruding bookmark tab */

    .grimoire-tome {

        left: 0;

        top: 100px;

        width: 290px;

        z-index: 35;

        transform: translateX(-100%);

    }

    .grimoire-tome.open {

        transform: translateX(6px) !important;

        box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.85);

    }

    .grimoire-close-btn {

        display: inline-flex;

    }

    .grimoire-bookmark-tab {

        top: 14px;

        right: -36px;

        width: 36px;

        height: 48px;

    }

    .war-map-console {

        top: 68px;

        right: 8px;

        width: 220px;

        padding: 8px;

    }

    .world-map-canvas { max-height: 95px; }

    .atlas-prompt { font-size: 7.5px; }

}



@media (max-width: 580px) {

    /* Ultra-compact mobile phone layout */

    .war-map-console {

        top: auto;

        bottom: 82px;

        right: 8px;

        left: 8px;

        width: auto;

        max-width: none;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        padding: 6px 10px;

        gap: 6px;

    }

    .war-atlas-frame { display: none; }

    .war-intel-strip { display: none; }

    .war-map-title-row h3 { font-size: 12px; }

    .lobby-scaling-banner { width: 100%; order: 3; font-size: 9.5px; padding: 3px 6px; }

    .btn-deploy-expedition { width: 100%; order: 4; font-size: 13px; padding: 10px; }

    .floating-champion-dock { bottom: 6px; }

    .dock-roster { padding: 4px 6px; gap: 4px; border-radius: 12px; }

    .hero-token { min-width: 58px; padding: 3px 5px; }

    .hero-token .token-icon { font-size: 16px; }

    .hero-token .token-name { font-size: 9px; }

    .hero-token .token-role { display: none; }

}



/* IN-GAME ACTIVE SKILL SLOTS (Q & E) */

.skills-group {

    border-left: 1px solid rgba(255, 255, 255, 0.12);

    padding-left: 10px;

    margin-right: 4px;

}



#skillSlots {

    gap: 10px !important;

}



.skill-slot {

    width: 40px !important;

    height: 40px !important;

    background: linear-gradient(135deg, rgba(30, 27, 75, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;

    border: 1.5px solid rgba(99, 102, 241, 0.55) !important;

    border-radius: 9px !important;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;

}



@keyframes skillReadyPulse {

    0% {

        border-color: #38bdf8;

        box-shadow: 0 0 6px rgba(56, 189, 248, 0.55), inset 0 0 4px rgba(56, 189, 248, 0.25);

    }

    50% {

        border-color: #7dd3fc;

        box-shadow: 0 0 11px rgba(56, 189, 248, 0.85), inset 0 0 6px rgba(56, 189, 248, 0.4);

    }

    100% {

        border-color: #38bdf8;

        box-shadow: 0 0 6px rgba(56, 189, 248, 0.55), inset 0 0 4px rgba(56, 189, 248, 0.25);

    }

}



.skill-slot.ready {

    animation: skillReadyPulse 2s infinite ease-in-out;

    border-color: #38bdf8 !important;

}



.skill-slot:hover {

    border-color: #bae6fd !important;

    transform: translateY(-2px);

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;

}



.skill-key-badge {

    position: absolute;

    bottom: 2px;

    right: 3px;

    background: rgba(10, 15, 28, 0.92);

    border: 1px solid rgba(56, 189, 248, 0.5);

    color: #e0f2fe;

    font-size: 8px;

    font-weight: 900;

    padding: 1px 3.5px;

    border-radius: 3px;

    line-height: 1;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

    z-index: 5;

    pointer-events: none;

    letter-spacing: 0;

}



.early-controls-banner {

    position: absolute;

    top: 70px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 12, 22, 0.98) 100%);

    border: 1.5px solid rgba(56, 189, 248, 0.6);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 15px rgba(56, 189, 248, 0.25);

    color: #f8fafc;

    padding: 8px 20px;

    border-radius: 24px;

    font-size: 12px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 10px;

    z-index: 30;

    pointer-events: none;

    transition: opacity 1s ease-out, transform 1s ease-out;

    backdrop-filter: blur(8px);

    white-space: nowrap;

}



.early-controls-banner.fade-out {

    opacity: 0;

    transform: translate(-50%, -15px);

}



.early-controls-banner strong {

    color: #38bdf8;

}



.skill-icon {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    height: 100% !important;

    z-index: 2;

    pointer-events: none;

}



.skill-icon svg {

    width: 23px !important;

    height: 23px !important;

    display: block !important;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));

}



.cd-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0%;

    background: rgba(15, 23, 42, 0.8);

    transition: height 0.1s linear;

    z-index: 3;

}



.cd-text {

    position: absolute;

    z-index: 4;

    font-size: 12px;

    font-weight: 900;

    color: #ffffff;

    text-shadow: 0 0 4px #000;

}



/* ============================================== */

/* 🛡️ LoL Swarm Style Champion HUD Portrait       */

/* ============================================== */

.champion-hud-portrait {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    margin-right: 6px;

    flex-shrink: 0;

}



.portrait-circle {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: radial-gradient(circle, #1e1b4b 0%, #0f172a 100%);

    border: 2px solid #fbbf24;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);

}



.portrait-level-badge {

    position: absolute;

    bottom: -5px;

    background: #0f172a;

    border: 1px solid #fbbf24;

    color: #fbbf24;

    font-size: 9px;

    font-weight: 900;

    padding: 0 5px;

    border-radius: 6px;

    line-height: 12px;

}



/* ============================================== */

/* 📱 MOBILE VIRTUAL CONTROLS (Hidden on Desktop)  */

/* ============================================== */

.mobile-controls-layer {

    display: none; /* Strictly hidden on Desktop PC / mouse mode */

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;

    pointer-events: none;

    z-index: 35;

    overflow: hidden;

}



/* Dynamically displayed only when touch interaction is actually used */

body.touch-device .mobile-controls-layer {

    display: block !important;

}



/* Virtual Joystick (Touch anywhere on bottom-left) */

.joystick-zone {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 48vw;

    height: 45vh;

    pointer-events: auto;

    touch-action: none;

}



.joystick-base {

    position: absolute;

    width: 110px;

    height: 110px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(15, 23, 42, 0.3) 0%, rgba(30, 41, 59, 0.55) 100%);

    border: 2px dashed rgba(56, 189, 248, 0.55);

    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3), inset 0 0 12px rgba(56, 189, 248, 0.2);

    transform: translate(-50%, -50%);

    display: none;

    pointer-events: none;

    backdrop-filter: blur(4px);

}



.joystick-thumb {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: radial-gradient(circle, #38bdf8 0%, #1e40af 100%);

    border: 2px solid #ffffff;

    box-shadow: 0 0 14px #38bdf8;

    transform: translate(-50%, -50%);

    transition: transform 0.04s ease-out;

}



/* Mobile Action Touch Buttons [Q] and [E] (Bottom-Right) */

.action-buttons-zone {

    position: absolute;

    bottom: 24px;

    right: 20px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    pointer-events: auto;

    touch-action: none;

}



.touch-action-btn {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background: rgba(15, 23, 42, 0.88);

    backdrop-filter: blur(8px);

    border: 2.5px solid #6366f1;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(99, 102, 241, 0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition: transform 0.1s ease, border-color 0.15s ease;

}



.touch-action-btn:active {

    transform: scale(0.92);

    border-color: #a855f7;

    box-shadow: 0 0 20px #a855f7;

}



.touch-key-badge {

    position: absolute;

    top: 2px;

    left: 17px;

    background: rgba(15, 23, 42, 0.95);

    border: 1px solid #fbbf24;

    color: #fbbf24;

    font-size: 11px;

    font-weight: 900;

    padding: 1px 5px;

    border-radius: 4px;

    line-height: 1;

}



.touch-icon {

    font-size: 26px;

    z-index: 2;

}



.touch-cd-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 0%;

    background: rgba(10, 15, 30, 0.82);

    transition: height 0.1s linear;

    z-index: 3;

}



.touch-cd-text {

    position: absolute;

    z-index: 4;

    font-size: 16px;

    font-weight: 900;

    color: #ffffff;

    text-shadow: 0 0 6px #000;

}



/* ============================================== */

/* 💻 RESPONSIVE DESKTOP & TABLET BREAKPOINTS     */

/* ============================================== */

@media (max-width: 1100px) {

    .brand-subtitle {

        display: none;

    }

    .btn-room-browser .nav-text,

    .btn-header-action .nav-text {

        display: none;

    }

    .btn-header-action,

    .btn-room-browser {

        padding: 0 10px;

        min-width: 36px;

        justify-content: center;

    }

    .user-xp-bar-track,

    .user-xp-text {

        display: none;

    }

}



@media (max-width: 860px) {

    #lobbyHeader {

        padding: 0 12px;

        height: 58px;

    }

    .brand-text h1 {

        font-size: 14px;

        letter-spacing: 1px;

    }

    .heroic-logo-wrap {

        width: 34px;

        height: 34px;

    }

    .room-pill {

        padding: 4px 8px;

        font-size: 10.5px;

    }

    .btn-copy .copy-text {

        display: none;

    }

    .anvil-cta-badge {

        font-size: 9px;

        padding: 2px 6px;

    }

    .user-name {

        max-width: 80px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

}



/* ============================================== */

/* 📱 RESPONSIVE ORIENTATION: PORTRAIT (PIONOWO)  */

/* ============================================== */

@media (orientation: portrait), (max-width: 768px) {

    /* Full mobile height support */

    html, body {

        overflow: hidden;

        height: 100%;

        touch-action: none;

    }



    /* Lobby in Portrait / Mobile (Streamlined Single-Row HUD) */

    #lobbyHeader {

        height: 52px;

        padding: 0 8px;

        flex-wrap: nowrap;

        gap: 6px;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

    }



    #lobbyHeader::-webkit-scrollbar {

        display: none;

    }



    .brand-text {

        display: none;

    }



    .lobby-center-pills {

        display: none !important;

    }



    .lobby-right-actions {

        margin-left: auto;

    }



    .room-text {

        display: none;

    }



    .user-info-text {

        display: none;

    }



    .user-profile-pill {

        padding: 3px;

        border-radius: 50%;

    }



    #privacyLabel {

        display: none;

    }



    .privacy-pill {

        padding: 0 8px;

        min-width: 32px;

        justify-content: center;

    }



    .anvil-cta-badge {

        display: none;

    }



    .header-anvil-pill {

        padding: 0 8px;

        height: 32px;

    }



    .btn-header-action,

    .btn-room-browser,

    .privacy-pill,

    .room-pill {

        height: 32px;

        padding: 0 8px;

        font-size: 10px;

    }



    /* Ultra-Clean Mobile Phone Header (< 540px / 360px) */

    @media (max-width: 540px) {

        #lobbyHeader {

            height: 48px;

            padding: 0 6px;

            gap: 4px;

            justify-content: space-between;

        }

        .lobby-room-status {

            display: none !important;

        }

        .lobby-right-actions {

            gap: 4px;

        }

        .btn-header-action.journal-btn,

        .btn-header-action.friends-btn {

            width: 30px;

            min-width: 30px;

            height: 30px;

            padding: 0;

            justify-content: center;

        }

        .header-anvil-pill {

            height: 30px;

            padding: 0 8px;

            gap: 4px;

        }

        .header-gold-val {

            font-size: 11px;

        }

        .user-profile-pill {

            width: 30px;

            height: 30px;

            padding: 0;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .user-avatar-circle {

            width: 26px;

            height: 26px;

        }

        .header-settings-btn {

            width: 30px;

            height: 30px;

            padding: 0;

        }

    }



    #lobbyMain {

        flex-direction: column;

        overflow-y: auto;

        padding: 10px;

        gap: 14px;

        height: calc(100vh - 100px);

    }



    .lobby-panel {

        min-width: 100%;

        width: 100%;

        padding: 14px;

    }



    .hero-roster {

        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

        gap: 8px;

    }



    .squad-podiums-container {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

    }



    .podium-canvas-2d {

        width: 90px;

        height: 90px;

    }



    .btn-launch-run {

        font-size: 16px;

        padding: 14px;

        width: 100%;

    }



    /* Battle HUD in Portrait */

    #hudTop {

        top: 6px;

        left: 6px;

        right: 6px;

        flex-direction: column;

        gap: 6px;

        align-items: stretch;

    }



    .hud-top-left {

        display: flex;

        flex-direction: column;

        gap: 5px;

        min-width: auto;

        width: 100%;

    }



    .hextech-panel {

        padding: 4px 8px;

        gap: 8px;

    }



    .crest-shield {

        width: 32px;

        height: 32px;

    }



    .crest-lvl-tag {

        font-size: 7px;

    }



    .crest-level-num {

        font-size: 15px;

    }



    .crest-diamond {

        width: 24px;

        height: 24px;

    }



    .crest-level {

        font-size: 11px;

    }



    .hud-top-center {

        position: relative;

        left: auto;

        transform: none;

        order: -1; /* Place timer prominently at very top */

        margin-bottom: 2px;

    }



    .timer-box {

        font-size: 16px;

        padding: 4px 12px;

    }



    .hud-top-right {

        justify-content: flex-end;

    }



    /* In-Game Bottom Bar in Portrait */

    #hudInventory {

        bottom: 8px;

        left: 50%;

        transform: translateX(-50%) scale(0.85);

        transform-origin: bottom center;

        width: max-content;

        max-width: none;

        padding: 5px 8px;

        gap: 8px;

        justify-content: center;

    }



    .item-slot, .skill-slot {

        width: 32px !important;

        height: 32px !important;

        font-size: 15px;

    }



    .skill-icon svg {

        width: 18px !important;

        height: 18px !important;

    }



    #skillSlots {

        gap: 6px !important;

    }



    .desktop-only-key,

    .portrait-level-badge,

    .touch-key-badge {

        display: none !important;

    }



    .champion-hud-portrait {

        display: none !important;

    }



    /* Co-op squad widget in Portrait: float compact on the left below top controls */

    #hudTeam {

        top: 175px;

        left: 8px;

        right: auto;

        bottom: auto;

        min-width: 120px;

        max-width: 138px;

        padding: 4px 6px;

        opacity: 0.9;

        z-index: 10;

    }



    .hud-minimap-container {

        top: 175px;

        right: 8px;

        left: auto;

        bottom: auto;

        width: 110px;

        padding: 5px;

        transform: scale(0.82);

        transform-origin: top right;

        z-index: 10;

    }



    .squad-list {

        max-height: 100px;

        overflow-y: auto;

    }



    /* Mobile Action Buttons in Portrait */

    .action-buttons-zone {

        bottom: 78px;

        right: 14px;

        gap: 12px;

    }



    .touch-action-btn {

        width: 58px;

        height: 58px;

    }



    /* Level Up Modal in Portrait */

    #levelUpModal .modal-card {

        padding: 18px 12px;

        max-height: 92vh;

        overflow-y: auto;

        width: 95%;

    }



    .choices-container {

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

    }



    .upgrade-card {

        max-width: 100%;

        min-height: auto;

        padding: 14px 12px;

    }



    .card-icon-wrapper {

        width: 54px;

        height: 54px;

        margin-bottom: 8px;

    }



    .card-icon {

        font-size: 28px;

    }

}



/* ============================================== */

/* 📱 RESPONSIVE ORIENTATION: LANDSCAPE (POZIOMO) */

/* ============================================== */

@media (orientation: landscape) and (max-height: 550px) {

    /* Compact landscape HUD for mobile phones held horizontally */

    #hudTop {

        top: 4px;

        padding: 4px 16px;

    }



    .timer-box {

        padding: 3px 10px;

        font-size: 15px;

    }



    #hudInventory {

        bottom: 6px;

        left: 12px;

        transform: none;

        padding: 5px 8px;

        gap: 8px;

    }



    .item-slot, .skill-slot {

        width: 32px !important;

        height: 32px !important;

        font-size: 15px;

    }



    .skill-icon svg {

        width: 18px !important;

        height: 18px !important;

    }



    #skillSlots {

        gap: 6px !important;

    }



    .desktop-only-key,

    .portrait-level-badge,

    .touch-key-badge {

        display: none !important;

    }



    .champion-hud-portrait .portrait-circle {

        width: 34px;

        height: 34px;

        font-size: 18px;

    }



    /* Action buttons in landscape corner */

    .action-buttons-zone {

        bottom: 12px;

        right: 16px;

        flex-direction: row;

        gap: 12px;

    }



    .touch-action-btn {

        width: 56px;

        height: 56px;

    }



    /* Hide heavy squad list & minimap in compact mobile landscape to avoid clutter */

    #hudTeam, .hud-minimap-container {

        display: none !important;

    }



    #levelUpModal .modal-card {

        padding: 16px 20px;

        max-height: 94vh;

        overflow-y: auto;

        max-width: 96vw;

    }



    .upgrade-card {

        min-height: 250px;

        padding: 14px 10px;

    }



    .card-icon-wrapper {

        width: 50px;

        height: 50px;

        margin-bottom: 6px;

    }



    .card-icon {

        font-size: 26px;

    }



    .card-title {

        font-size: 14px;

    }

}



/* ============================================== */

/* 🚪 SERVER BROWSER & EXPEDITION LOBBIES MODAL   */

/* ============================================== */

.browser-modal-dialog {

    background: linear-gradient(145deg, #0f172a 0%, #090d16 100%);

    border: 2px solid #3b82f6;

    border-radius: 18px;

    padding: 22px 24px;

    max-width: 680px;

    width: 94%;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(59, 130, 246, 0.3);

    text-align: left;

}



.browser-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1px solid rgba(59, 130, 246, 0.25);

    padding-bottom: 12px;

}



.browser-title-wrap h2 {

    font-size: 19px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.8px;

    margin: 0;

}



.browser-title-wrap p {

    font-size: 11.5px;

    color: #94a3b8;

    margin: 4px 0 0 0;

}



.btn-close-modal {

    background: #1e293b;

    border: 1px solid #475569;

    color: #cbd5e1;

    font-size: 15px;

    width: 30px;

    height: 30px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.btn-close-modal:hover {

    background: #ef4444;

    border-color: #f87171;

    color: #ffffff;

}



.browser-controls-row {

    display: flex;

    gap: 10px;

    align-items: center;

    margin: 14px 0 10px 0;

}



.btn-quick-match {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    border: 1.5px solid #fbbf24;

    color: #090d16;

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: 0.5px;

    padding: 8px 16px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 6px;

    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);

    transition: all 0.15s ease;

    flex-shrink: 0;

}



.btn-quick-match:hover {

    background: #fbbf24;

    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.6);

}



.browser-code-search {

    display: flex;

    gap: 6px;

    flex: 1;

}



.browser-code-search input {

    background: #090d16;

    border: 1.5px solid #334155;

    border-radius: 8px;

    color: #ffffff;

    font-family: monospace, sans-serif;

    font-size: 12.5px;

    font-weight: 700;

    padding: 7px 12px;

    width: 100%;

    text-transform: uppercase;

}



.browser-code-search input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);

}



.btn-refresh {

    background: #1e293b;

    border: 1.5px solid #475569;

    color: #cbd5e1;

    width: 36px;

    height: 36px;

    border-radius: 8px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.15s ease;

}



.btn-refresh:hover {

    background: #334155;

    border-color: #38bdf8;

    color: #ffffff;

}



.browser-tabs {

    display: flex;

    gap: 8px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.2);

    padding-bottom: 8px;

    margin-bottom: 10px;

}



.browser-tab {

    background: transparent;

    border: 1px solid transparent;

    color: #94a3b8;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    padding: 5px 12px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.browser-tab:hover {

    color: #f1f5f9;

    background: rgba(30, 41, 59, 0.5);

}



.browser-tab.active {

    background: rgba(59, 130, 246, 0.2);

    border-color: #3b82f6;

    color: #60a5fa;

}



.rooms-list-container {

    display: flex;

    flex-direction: column;

    gap: 7px;

    max-height: 250px;

    overflow-y: auto;

    padding-right: 4px;

}



.room-card-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(30, 41, 59, 0.65);

    border: 1px solid rgba(148, 163, 184, 0.25);

    border-radius: 8px;

    padding: 8px 12px;

    transition: all 0.15s ease;

}



.room-card-item:hover {

    background: rgba(30, 41, 59, 0.95);

    border-color: #60a5fa;

    transform: translateY(-1px);

}



.room-card-left {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.room-card-title {

    font-size: 12.5px;

    font-weight: 800;

    color: #f8fafc;

}



.room-card-meta {

    font-size: 10px;

    color: #94a3b8;

    display: flex;

    align-items: center;

    gap: 8px;

}



.room-card-meta span {

    display: flex;

    align-items: center;

    gap: 3px;

}



.room-card-right {

    display: flex;

    align-items: center;

    gap: 12px;

}



.room-card-slots {

    font-size: 12px;

    font-weight: 800;

    color: #38bdf8;

    background: rgba(56, 189, 248, 0.15);

    border: 1px solid rgba(56, 189, 248, 0.35);

    padding: 2px 8px;

    border-radius: 12px;

}



.btn-join-room-action {

    background: linear-gradient(135deg, #2563eb, #3b82f6);

    border: 1px solid #60a5fa;

    color: #ffffff;

    font-size: 10.5px;

    font-weight: 800;

    padding: 5px 14px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.btn-join-room-action:hover {

    background: #3b82f6;

    transform: translateY(-1px);

    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5);

}



.browser-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 14px;

    padding-top: 10px;

    border-top: 1px solid rgba(148, 163, 184, 0.2);

}



.invite-friends-box {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    color: #cbd5e1;

}



/* ============================================== */

/* ⚙️ SANCTUARY & GAME SETTINGS MODAL             */

/* ============================================== */

.settings-modal-dialog {

    background: linear-gradient(145deg, #0f172a 0%, #090d16 100%);

    border: 2px solid #f59e0b;

    border-radius: 18px;

    padding: 22px 24px;

    max-width: 500px;

    width: 94%;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 24px rgba(245, 158, 11, 0.25);

    text-align: left;

}



.settings-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid rgba(245, 158, 11, 0.3);

    padding-bottom: 10px;

}



.settings-modal-header h2 {

    font-size: 18px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.8px;

    margin: 0;

}



.settings-body {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin: 14px 0;

    max-height: 58vh;

    overflow-y: auto;

    padding-right: 4px;

}



.settings-section {

    display: flex;

    flex-direction: column;

    gap: 8px;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(148, 163, 184, 0.2);

    border-radius: 10px;

    padding: 10px 14px;

}



.settings-section-title {

    font-size: 10.5px;

    font-weight: 900;

    color: #f59e0b;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin: 0 0 4px 0;

}



.setting-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11.5px;

    color: #e2e8f0;

}



.setting-row input[type="range"] {

    width: 140px;

    accent-color: #f59e0b;

    cursor: pointer;

}



.setting-segmented {

    display: flex;

    background: #090d16;

    border-radius: 6px;

    border: 1px solid #334155;

    padding: 2px;

}



.seg-btn {

    background: transparent;

    border: none;

    color: #94a3b8;

    font-size: 10px;

    font-weight: 800;

    padding: 4px 10px;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.seg-btn.active {

    background: #f59e0b;

    color: #090d16;

}



.setting-toggle-btn {

    background: rgba(16, 185, 129, 0.2);

    border: 1.5px solid #10b981;

    color: #34d399;

    font-size: 10px;

    font-weight: 900;

    padding: 4px 12px;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.setting-toggle-btn.off {

    background: rgba(239, 68, 68, 0.2);

    border-color: #ef4444;

    color: #f87171;

}



.btn-danger {

    background: rgba(239, 68, 68, 0.2);

    border: 1.5px solid #ef4444;

    color: #fca5a5;

    font-weight: 800;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.btn-danger:hover {

    background: #ef4444;

    color: #ffffff;

}



.settings-footer {

    margin-top: 14px;

    padding-top: 10px;

    border-top: 1px solid rgba(245, 158, 11, 0.25);

}



/* ============================================== */

/* 🗺️ EXPEDITION WAR ATLAS MODAL                   */

/* ============================================== */

.atlas-modal-dialog {

    background: linear-gradient(145deg, #10121e 0%, #090b12 100%);

    border: 2px solid #d97706;

    border-radius: 18px;

    padding: 22px 24px;

    max-width: 960px;

    width: 95%;

    max-height: 92vh;

    overflow-y: auto;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(217, 119, 6, 0.3);

    text-align: left;

}



.atlas-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1.5px solid rgba(245, 158, 11, 0.3);

    padding-bottom: 14px;

    margin-bottom: 14px;

}



.atlas-header-title {

    display: flex;

    align-items: center;

    gap: 12px;

}



.atlas-crest {

    font-size: 28px;

    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));

}



.atlas-header-title h2 {

    font-size: 19px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.8px;

    margin: 0;

}



.atlas-header-title p {

    font-size: 11px;

    color: #94a3b8;

    margin: 3px 0 0 0;

}



/* 5 Act Tabs */

.atlas-acts-nav {

    display: flex;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 8px;

    margin-bottom: 14px;

}



.atlas-act-tab {

    flex: 1;

    min-width: 140px;

    background: rgba(15, 23, 42, 0.85);

    border: 1.5px solid rgba(148, 163, 184, 0.25);

    border-radius: 10px;

    padding: 9px 12px;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

    transition: all 0.2s ease;

}



.atlas-act-tab:hover {

    background: rgba(30, 41, 59, 0.9);

    border-color: #f59e0b;

    transform: translateY(-2px);

}



.atlas-act-tab.active {

    background: linear-gradient(135deg, rgba(120, 53, 15, 0.8) 0%, rgba(180, 83, 9, 0.7) 100%);

    border-color: #fbbf24;

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);

}



.atlas-act-tab .act-num {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 1px;

    color: #f59e0b;

}



.atlas-act-tab.active .act-num {

    color: #fde68a;

}



.atlas-act-tab .act-name {

    font-size: 11px;

    font-weight: 800;

    color: #e2e8f0;

}



/* Atlas Modal Body */

.atlas-modal-body {

    display: grid;

    grid-template-columns: 480px 1fr;

    gap: 20px;

    align-items: start;

}



@media (max-width: 860px) {

    .atlas-modal-body {

        grid-template-columns: 1fr;

    }

}



.atlas-blueprint-panel {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.blueprint-frame {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    border: 2px solid rgba(99, 102, 241, 0.4);

    background: #080c16;

    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9);

}



.blueprint-frame canvas {

    display: block;

    width: 100%;

    height: auto;

}



.blueprint-corner-tag {

    position: absolute;

    bottom: 8px;

    right: 8px;

    background: rgba(8, 12, 22, 0.88);

    border: 1px solid rgba(99, 102, 241, 0.4);

    color: #94a3b8;

    font-size: 8.5px;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 3px 8px;

    border-radius: 4px;

}



.blueprint-legend {

    display: flex;

    justify-content: space-around;

    background: rgba(15, 23, 42, 0.7);

    border-radius: 8px;

    padding: 6px 10px;

    font-size: 9.5px;

    font-weight: 700;

    color: #94a3b8;

    border: 1px solid rgba(255, 255, 255, 0.06);

}



.legend-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    margin-right: 5px;

    vertical-align: middle;

}



.dot-spawn { background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }

.dot-pillar { background: #94a3b8; }

.dot-boss { background: #c084fc; box-shadow: 0 0 6px #c084fc; }



/* Intel Panel Right */

.atlas-intel-panel {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.atlas-boss-card {

    background: linear-gradient(145deg, rgba(30, 16, 42, 0.85) 0%, rgba(18, 10, 26, 0.92) 100%);

    border: 1.5px solid #a855f7;

    border-radius: 12px;

    padding: 12px 14px;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(168, 85, 247, 0.15);

}



.boss-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 6px;

}



.boss-skull-badge {

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #c084fc;

}



.boss-timer-badge {

    font-size: 9px;

    font-weight: 800;

    color: #fca5a5;

    background: rgba(239, 68, 68, 0.2);

    border: 1px solid rgba(239, 68, 68, 0.4);

    padding: 2px 7px;

    border-radius: 4px;

}



.atlas-boss-card h3 {

    font-size: 15px;

    font-weight: 900;

    color: #ffffff;

    margin: 0 0 4px 0;

}



.boss-desc {

    font-size: 11px;

    color: #cbd5e1;

    line-height: 1.4;

    margin: 0 0 8px 0;

}



.boss-attacks-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.atk-pill {

    background: rgba(168, 85, 247, 0.15);

    border: 1px solid rgba(168, 85, 247, 0.35);

    color: #e9d5ff;

    font-size: 9.5px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 4px;

}



.atlas-bestiary-strip {

    background: rgba(15, 23, 42, 0.7);

    border-radius: 10px;

    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);

}



.strip-label {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #94a3b8;

    display: block;

    margin-bottom: 6px;

}



.bestiary-tokens {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.bestiary-token {

    background: rgba(30, 41, 59, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.3);

    color: #f1f5f9;

    font-size: 10px;

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 6px;

}



/* Player Records */

.atlas-records-panel {

    background: rgba(10, 14, 24, 0.8);

    border-radius: 10px;

    padding: 10px 12px;

    border: 1.5px solid rgba(245, 158, 11, 0.3);

}



.records-title {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #fbbf24;

    margin-bottom: 8px;

}



.records-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

}



.rec-box {

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 6px;

    padding: 6px 10px;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.rec-box .lbl {

    font-size: 8px;

    font-weight: 800;

    color: #94a3b8;

}



.rec-box strong {

    font-size: 12px;

    font-weight: 900;

    color: #f8fafc;

}



.rec-box .rank-badge {

    color: #fbbf24;

    font-size: 13px;

}



.btn-select-map-confirm {

    width: 100%;

    padding: 11px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.8px;

}



/* ============================================== */

/* 👤 SURVIVOR PROFILE MODAL                      */

/* ============================================== */

.profile-modal-dialog {

    background: linear-gradient(145deg, #0e1320 0%, #080a12 100%);

    border: 2px solid #38bdf8;

    border-radius: 18px;

    padding: 22px 24px;

    max-width: 620px;

    width: 94%;

    max-height: 90vh;

    overflow-y: auto;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 24px rgba(56, 189, 248, 0.3);

    text-align: left;

}



.profile-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1.5px solid rgba(56, 189, 248, 0.3);

    padding-bottom: 12px;

    margin-bottom: 16px;

}



.profile-modal-header h2 {

    font-size: 18px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.6px;

    margin: 0;

}



.profile-hero-section {

    display: flex;

    align-items: center;

    gap: 18px;

    background: rgba(15, 23, 42, 0.7);

    border-radius: 12px;

    padding: 14px 16px;

    border: 1px solid rgba(56, 189, 248, 0.25);

    margin-bottom: 16px;

}



.profile-avatar-large {

    width: 64px;

    height: 64px;

    border-radius: 50%;

    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

    border: 2.5px solid #38bdf8;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);

    flex-shrink: 0;

}



.profile-edit-wrap {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.profile-edit-wrap label {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #94a3b8;

}



.nickname-input-group {

    display: flex;

    gap: 8px;

}



.nickname-input-group input {

    flex: 1;

    background: #090d16;

    border: 1.5px solid #334155;

    border-radius: 6px;

    padding: 6px 12px;

    color: #f8fafc;

    font-size: 12.5px;

    font-weight: 700;

}



.nickname-input-group input:focus {

    border-color: #38bdf8;

    outline: none;

}



.avatar-picker-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 4px;

}



.picker-label {

    font-size: 8.5px;

    font-weight: 900;

    color: #94a3b8;

}



.avatar-choices {

    display: flex;

    gap: 6px;

}



.avatar-choice-btn {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #1e293b;

    border: 1.5px solid #475569;

    font-size: 14px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.avatar-choice-btn:hover {

    border-color: #38bdf8;

    transform: scale(1.1);

}



.avatar-choice-btn.active {

    border-color: #38bdf8;

    background: rgba(56, 189, 248, 0.25);

    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);

}



.profile-stats-section h3 {

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #94a3b8;

    text-transform: uppercase;

    margin: 0 0 10px 0;

}



.profile-stats-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 14px;

}



@media (max-width: 540px) {

    .profile-stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



.stat-card {

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 8px;

    padding: 8px 10px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.stat-card .st-icon {

    font-size: 20px;

}



.stat-card .st-info {

    display: flex;

    flex-direction: column;

}



.stat-card .st-lbl {

    font-size: 8px;

    font-weight: 800;

    color: #94a3b8;

}



.stat-card .st-val {

    font-size: 13px;

    font-weight: 900;

    color: #f8fafc;

}



.profile-cloud-status {

    background: rgba(16, 185, 129, 0.12);

    border: 1px solid rgba(16, 185, 129, 0.35);

    border-radius: 8px;

    padding: 8px 12px;

}



.cloud-indicator {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 10.5px;

    font-weight: 700;

    color: #34d399;

}



.cloud-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 8px #10b981;

}



/* ============================================== */

/* 📖 COMPENDIUM & JOURNAL MODAL                   */

/* ============================================== */

.compendium-modal-dialog {

    background: linear-gradient(145deg, #120e1a 0%, #0a0810 100%);

    border: 2px solid #f59e0b;

    border-radius: 18px;

    padding: 22px 24px;

    max-width: 860px;

    width: 95%;

    max-height: 92vh;

    overflow-y: auto;

    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.95), 0 0 30px rgba(245, 158, 11, 0.3);

    text-align: left;

}



.compendium-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    border-bottom: 1.5px solid rgba(245, 158, 11, 0.3);

    padding-bottom: 12px;

    margin-bottom: 14px;

}



.comp-title-wrap h2 {

    font-size: 19px;

    font-weight: 900;

    color: #f8fafc;

    margin: 0;

}



.comp-title-wrap p {

    font-size: 11px;

    color: #94a3b8;

    margin: 3px 0 0 0;

}



.compendium-tabs-nav {

    display: flex;

    gap: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding-bottom: 10px;

    margin-bottom: 14px;

}



.comp-tab-btn {

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.25);

    color: #cbd5e1;

    font-size: 11px;

    font-weight: 800;

    padding: 7px 14px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.15s ease;

}



.comp-tab-btn:hover {

    background: rgba(30, 41, 59, 0.9);

    border-color: #f59e0b;

    color: #ffffff;

}



.comp-tab-btn.active {

    background: #d97706;

    border-color: #fbbf24;

    color: #ffffff;

    box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);

}



.comp-heroes-roster {

    display: flex;

    gap: 8px;

    margin-bottom: 14px;

    overflow-x: auto;

}



.comp-hero-tab {

    background: rgba(15, 23, 42, 0.85);

    border: 1.5px solid rgba(148, 163, 184, 0.2);

    border-radius: 8px;

    padding: 6px 10px;

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    font-size: 11px;

    font-weight: 800;

    color: #cbd5e1;

    transition: all 0.15s ease;

    white-space: nowrap;

}



.comp-hero-tab.active {

    border-color: #f59e0b;

    background: rgba(245, 158, 11, 0.2);

    color: #fbbf24;

}



.comp-hero-detail-card {

    background: rgba(15, 23, 42, 0.7);

    border-radius: 12px;

    padding: 16px;

    border: 1px solid rgba(245, 158, 11, 0.25);

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.comp-stats-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

}



.comp-stat-pill {

    background: rgba(8, 12, 22, 0.8);

    border-radius: 6px;

    padding: 6px 10px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    display: flex;

    flex-direction: column;

    align-items: center;

}



.comp-stat-pill span { font-size: 8px; font-weight: 800; color: #94a3b8; }

.comp-stat-pill strong { font-size: 12px; font-weight: 900; color: #f8fafc; }



/* Mastery Perk Tree with Padlocks */

.mastery-tree-wrap {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.mastery-tier-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(15, 23, 42, 0.8);

    border: 1.5px solid rgba(148, 163, 184, 0.2);

    border-radius: 10px;

    padding: 12px 16px;

    transition: all 0.15s ease;

}



.mastery-tier-card.unlocked {

    border-color: #10b981;

    background: rgba(16, 185, 129, 0.08);

}



.mastery-tier-card.locked {

    border-color: rgba(148, 163, 184, 0.2);

    opacity: 0.75;

}



.tier-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.tier-name {

    font-size: 12px;

    font-weight: 900;

    color: #f8fafc;

}



.tier-desc {

    font-size: 10.5px;

    color: #94a3b8;

}



.tier-badge-status {

    font-size: 10px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 4px;

}



.tier-badge-status.unlocked {

    background: rgba(16, 185, 129, 0.2);

    color: #34d399;

    border: 1px solid #10b981;

}



.tier-badge-status.locked {

    background: rgba(100, 116, 139, 0.2);

    color: #94a3b8;

    border: 1px solid #475569;

}



/* ========================================================================== */

/* 🍞 IN-GAME TOAST NOTIFICATIONS (CrazyGames Compliant - Zero Native Alerts) */

/* ========================================================================== */

.game-toast-container {

    position: fixed;

    bottom: 112px;

    left: 24px;

    top: auto;

    transform: none;

    z-index: 999999;

    display: flex;

    flex-direction: column-reverse;

    align-items: flex-start;

    gap: 8px;

    pointer-events: none;

    max-width: 90vw;

    width: 380px;

}



.game-toast {

    pointer-events: auto;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 16px;

    border-radius: 10px;

    background: rgba(15, 23, 42, 0.96);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2);

    border: 1.5px solid rgba(148, 163, 184, 0.3);

    color: #f8fafc;

    font-size: 12px;

    font-weight: 700;

    animation: toastSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;

    transition: all 0.25s ease;

    cursor: pointer;

    user-select: none;

}



.game-toast.warning {

    border-color: #f59e0b;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.35);

}



.game-toast.error {

    border-color: #ef4444;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(239, 68, 68, 0.35);

}



.game-toast.success {

    border-color: #10b981;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(16, 185, 129, 0.35);

}



.game-toast.info {

    border-color: #3b82f6;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 16px rgba(59, 130, 246, 0.35);

}



.game-toast-icon {

    font-size: 18px;

    flex-shrink: 0;

}



.game-toast-body {

    flex: 1;

    line-height: 1.35;

}



.game-toast.fade-out {

    opacity: 0;

    transform: translateY(12px) scale(0.96);

}



@keyframes toastSlideUp {

    from {

        opacity: 0;

        transform: translateY(20px) scale(0.95);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



/* ========================================================================== */

/* 🎖️ HEADER USER PROFILE PILL & ACCOUNT XP BAR                               */

/* ========================================================================== */

.user-rank-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 6px;

}



.user-xp-text {

    font-size: 8px;

    font-weight: 700;

    color: #94a3b8;

}



.user-xp-bar-track {

    width: 100%;

    min-width: 100px;

    height: 4px;

    background: rgba(15, 23, 42, 0.9);

    border-radius: 2px;

    overflow: hidden;

    border: 1px solid rgba(251, 191, 36, 0.25);

    margin-top: 3px;

}



.user-xp-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #d97706, #fbbf24);

    border-radius: 2px;

    transition: width 0.3s ease;

    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);

}



/* ========================================================================== */

/* 🏆 GAME OVER MODAL ACCOUNT PROGRESSION BOX                                 */

/* ========================================================================== */

.account-run-progress-box {

    margin-top: 14px;

    padding: 12px 16px;

    border-radius: 10px;

    background: rgba(15, 23, 42, 0.85);

    border: 1.5px solid rgba(245, 158, 11, 0.3);

    display: flex;

    flex-direction: column;

    gap: 6px;

    text-align: left;

}



.account-progress-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.acc-lvl-title {

    font-size: 12px;

    font-weight: 900;

    color: #fbbf24;

    letter-spacing: 0.5px;

}



.acc-xp-gain {

    font-size: 12px;

    font-weight: 800;

    color: #34d399;

}



.account-xp-bar-wrap {

    width: 100%;

    height: 8px;

    background: rgba(2, 6, 23, 0.9);

    border-radius: 4px;

    overflow: hidden;

    border: 1px solid rgba(245, 158, 11, 0.3);

}



.account-xp-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #d97706, #fbbf24);

    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);

    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.account-xp-subtext {

    font-size: 10px;

    font-weight: 700;

    color: #94a3b8;

    text-align: right;

}



.account-levelup-banner {

    margin-top: 6px;

    padding: 8px 12px;

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.35) 100%);

    border: 1px solid #fbbf24;

    border-radius: 6px;

    color: #fef08a;

    font-size: 11px;

    font-weight: 800;

    text-align: center;

    animation: pulseGlow 1.5s infinite alternate;

}



@keyframes pulseGlow {

    from { box-shadow: 0 0 4px rgba(245, 158, 11, 0.3); }

    to { box-shadow: 0 0 16px rgba(245, 158, 11, 0.7); }

}



/* ========================================================================== */

/* 🗺️ LOCKED MAPS (WAR ATLAS & LOBBY DEPLOY)                                   */

/* ========================================================================== */

.atlas-act-tab.is-locked {

    opacity: 0.6;

    border-color: rgba(148, 163, 184, 0.15);

    background: rgba(15, 23, 42, 0.5);

}



.atlas-act-tab.is-locked .act-name {

    color: #64748b;

}



.atlas-act-tab .lock-badge {

    display: inline-block;

    margin-left: 4px;

    font-size: 10px;

}



.btn-deploy-expedition.locked-map {

    background: #334155 !important;

    border-color: #64748b !important;

    color: #94a3b8 !important;

    cursor: not-allowed !important;

    box-shadow: none !important;

}



/* ==========================================================================

   👑 GRAND BOSS ENCOUNTER: STACKED MULTI-LAYER HEALTH BAR (x3, x2, x1)

   ========================================================================== */

.boss-health-bar-container {

    margin-top: 8px;

    width: 620px;

    max-width: 92vw;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    z-index: 100;

    pointer-events: none;

    animation: bossBarFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



.boss-health-bar-container.hidden {

    display: none !important;

}



@keyframes bossBarFadeIn {

    0% {

        opacity: 0;

        transform: translateY(-16px) scale(0.96);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



.boss-bar-heraldic-frame {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

    background: linear-gradient(180deg, rgba(20, 15, 38, 0.96) 0%, rgba(10, 8, 20, 0.98) 100%);

    backdrop-filter: blur(12px);

    border: 2px solid rgba(168, 85, 247, 0.65);

    border-radius: 14px;

    padding: 8px 14px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(168, 85, 247, 0.3);

    position: relative;

    transition: border-color 0.4s ease, box-shadow 0.4s ease;

}



/* Heraldic Frame dynamic theme by phase */

.boss-bar-heraldic-frame.phase-1 {

    border-color: rgba(168, 85, 247, 0.8);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(168, 85, 247, 0.35);

}

.boss-bar-heraldic-frame.phase-2 {

    border-color: rgba(245, 158, 11, 0.85);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 24px rgba(245, 158, 11, 0.4);

}

.boss-bar-heraldic-frame.phase-3 {

    border-color: rgba(239, 68, 68, 0.95);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 0 0 30px rgba(239, 68, 68, 0.55);

    animation: bossFrameEnragePulse 1.2s infinite alternate;

}



@keyframes bossFrameEnragePulse {

    0% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(239, 68, 68, 0.4); }

    100% { box-shadow: 0 8px 35px rgba(0, 0, 0, 0.9), 0 0 36px rgba(239, 68, 68, 0.8); }

}



/* Portrait Seal */

.boss-seal-portrait {

    width: 44px;

    height: 44px;

    border-radius: 10px;

    background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(15, 10, 30, 0.95) 100%);

    border: 2px solid #c084fc;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    flex-shrink: 0;

    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);

}



.boss-portrait-emoji {

    font-size: 24px;

    line-height: 1;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));

}



.boss-portrait-glow {

    position: absolute;

    inset: -3px;

    border-radius: 12px;

    border: 1px dashed rgba(192, 132, 252, 0.4);

    animation: rotateSlow 15s linear infinite;

    pointer-events: none;

}



@keyframes rotateSlow {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Middle Section */

.boss-bar-middle {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;

}



.boss-title-row {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 8px;

}



.boss-name-plate {

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.4px;

    color: #f8fafc;

    text-transform: uppercase;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.boss-phase-badge {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 2px 8px;

    border-radius: 4px;

    white-space: nowrap;

    text-transform: uppercase;

}



.boss-phase-badge.phase-1 {

    background: rgba(168, 85, 247, 0.25);

    color: #e9d5ff;

    border: 1px solid #c084fc;

}



.boss-phase-badge.phase-2 {

    background: rgba(245, 158, 11, 0.25);

    color: #fef08a;

    border: 1px solid #f59e0b;

}



.boss-phase-badge.phase-3 {

    background: rgba(239, 68, 68, 0.3);

    color: #fca5a5;

    border: 1px solid #ef4444;

    animation: pulse-danger 0.7s infinite alternate;

}



/* Stacked Health Track */

.boss-stacked-track {

    position: relative;

    width: 100%;

    height: 18px;

    border-radius: 6px;

    background: rgba(10, 10, 16, 0.95);

    overflow: hidden;

    border: 1.5px solid rgba(255, 255, 255, 0.2);

    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);

}



.boss-bar-underlayer {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    border-radius: 4px;

    transition: width 0.15s ease-out;

}



.boss-bar-active {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    border-radius: 4px;

    z-index: 2;

    transition: width 0.08s ease-out;

}



/* Underlayer Color Variants (What's beneath the active bar) */

.boss-bar-underlayer.phase-2 {

    background: linear-gradient(90deg, #b45309 0%, #d97706 50%, #f59e0b 100%);

    opacity: 0.85;

}



.boss-bar-underlayer.phase-3 {

    background: linear-gradient(90deg, #991b1b 0%, #dc2626 50%, #ef4444 100%);

    opacity: 0.85;

}



.boss-bar-underlayer.phase-empty {

    background: rgba(20, 5, 5, 0.85);

    opacity: 0.5;

}



/* Active Bar Color Variants (The draining top bar) */

.boss-bar-active.phase-1 {

    background: linear-gradient(90deg, #6d28d9 0%, #9333ea 40%, #c084fc 100%);

    box-shadow: 0 0 14px rgba(168, 85, 247, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.4);

}



.boss-bar-active.phase-2 {

    background: linear-gradient(90deg, #b45309 0%, #f59e0b 45%, #fde047 100%);

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.85), inset 0 1px 2px rgba(255, 255, 255, 0.5);

}



.boss-bar-active.phase-3 {

    background: linear-gradient(90deg, #991b1b 0%, #ef4444 45%, #fca5a5 100%);

    box-shadow: 0 0 16px rgba(239, 68, 68, 0.95), inset 0 1px 2px rgba(255, 255, 255, 0.5);

    animation: activeBarPulse 0.8s infinite alternate;

}



@keyframes activeBarPulse {

    0% { filter: brightness(1.0); }

    100% { filter: brightness(1.25); }

}



/* Segment divider notches (Hidden for clean 100%->0% layered track) */

.boss-track-notch {

    display: none;

    position: absolute;

    top: 0;

    bottom: 0;

    width: 2px;

    background: rgba(255, 255, 255, 0.25);

    z-index: 5;

    pointer-events: none;

}



/* Multi-Layer Counter Badge (x3, x2, x1) */

.boss-layers-badge {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    padding: 3px 8px;

    border-radius: 8px;

    background: rgba(10, 8, 20, 0.85);

    border: 2px solid #a855f7;

    flex-shrink: 0;

    transition: all 0.3s ease;

}



.boss-layers-badge.phase-1 {

    border-color: #a855f7;

    background: rgba(168, 85, 247, 0.15);

    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);

}

.boss-layers-badge.phase-1 .layers-num {

    color: #c084fc;

    text-shadow: 0 0 8px rgba(192, 132, 252, 0.6);

}



.boss-layers-badge.phase-2 {

    border-color: #f59e0b;

    background: rgba(245, 158, 11, 0.18);

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);

}

.boss-layers-badge.phase-2 .layers-num {

    color: #fbbf24;

    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);

}



.boss-layers-badge.phase-3 {

    border-color: #ef4444;

    background: rgba(239, 68, 68, 0.25);

    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);

    animation: pulse-danger 0.6s infinite alternate;

}

.boss-layers-badge.phase-3 .layers-num {

    color: #f87171;

    text-shadow: 0 0 10px rgba(248, 113, 113, 0.9);

}



.boss-layers-badge .layers-tag {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    color: #94a3b8;

    text-transform: uppercase;

}



.boss-layers-badge .layers-num {

    font-size: 20px;

    font-weight: 900;

    line-height: 1;

    font-family: monospace;

}



/* Phase Transition Invulnerability Shield Indicator */

.boss-status-pill {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 4px 16px;

    border-radius: 16px;

    background: rgba(30, 58, 138, 0.92);

    backdrop-filter: blur(8px);

    border: 1.5px solid #60a5fa;

    color: #dbeafe;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(59, 130, 246, 0.5);

    animation: shieldPillPulse 0.9s infinite alternate;

}



.boss-status-pill.hidden {

    display: none !important;

}



@keyframes shieldPillPulse {

    0% { transform: scale(0.98); box-shadow: 0 0 12px rgba(59, 130, 246, 0.4); }

    100% { transform: scale(1.02); box-shadow: 0 0 22px rgba(59, 130, 246, 0.85); }

}



.status-shield-icon {

    font-size: 14px;

    animation: rotateShield 2s infinite ease-in-out alternate;

}



@keyframes rotateShield {

    0% { transform: rotate(-8deg); }

    100% { transform: rotate(8deg); }

}



/* ============================================================================

   👑 PUNKT 8: CRAZYGAMES READY, MOBILE ERGONOMICS & DOPAMINE CELEBRATIONS

   ============================================================================ */



/* 1. Gilded Heraldic Profile Crest & Mastery Stars */

.gilded-profile-crest {

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.75), inset 0 0 10px rgba(251, 191, 36, 0.5) !important;

    border: 2.5px solid #fbbf24 !important;

    position: relative;

    animation: gildedCrestGlow 2.5s infinite alternate ease-in-out;

}



@keyframes gildedCrestGlow {

    0% { filter: drop-shadow(0 0 4px #f59e0b); }

    100% { filter: drop-shadow(0 0 12px #fbbf24) drop-shadow(0 0 20px rgba(245, 158, 11, 0.5)); }

}



.gilded-profile-crest::after {

    content: '👑';

    position: absolute;

    top: -9px;

    right: -7px;

    font-size: 13px;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));

    animation: crownFloat 2s infinite ease-in-out alternate;

}



@keyframes crownFloat {

    0% { transform: translateY(0); }

    100% { transform: translateY(-2px); }

}



.mastery-stars-shine {

    color: #fbbf24;

    letter-spacing: 2px;

    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);

}



.mastery-tier-badge {

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.4);

    color: #fde68a;

    font-size: 10px;

    font-weight: 800;

    padding: 1px 6px;

    border-radius: 8px;

    letter-spacing: 0.5px;

    margin-left: 4px;

}



/* 2. Reroll Button in Level Up Modal */

.levelup-footer-actions {

    margin-top: 18px;

    display: flex;

    justify-content: center;

}



.btn-reroll {

    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));

    border: 1.5px solid #6366f1;

    color: #e0e7ff;

    padding: 10px 24px;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 10px rgba(99, 102, 241, 0.25);

    min-height: 48px;

}



.btn-reroll:hover {

    background: linear-gradient(135deg, rgba(49, 46, 129, 0.95), rgba(30, 27, 75, 0.95));

    border-color: #818cf8;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);

}



.btn-reroll:active {

    transform: scale(0.97);

}



.btn-reroll.btn-ad-reroll {

    border-color: #ec4899;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(236, 72, 153, 0.35);

}



.btn-reroll.btn-ad-reroll:hover {

    border-color: #f472b6;

    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.55);

}



.ad-pill {

    background: linear-gradient(135deg, #ec4899, #8b5cf6);

    color: #ffffff;

    font-size: 9.5px;

    font-weight: 900;

    padding: 2px 7px;

    border-radius: 6px;

    letter-spacing: 0.8px;

    margin-left: 4px;

}



/* 3. Double Match Gold on Game Over */

.game-over-ad-reward {

    margin: 14px 0;

    display: flex;

    justify-content: center;

}



.btn-double-gold {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);

    border: 2px solid #fde68a;

    color: #ffffff;

    font-size: 13.5px;

    font-weight: 900;

    letter-spacing: 1px;

    padding: 10px 24px;

    border-radius: 14px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.2s ease;

    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);

    min-height: 48px;

}



.btn-double-gold:hover {

    transform: translateY(-2px) scale(1.02);

    box-shadow: 0 8px 26px rgba(245, 158, 11, 0.65);

}



.btn-double-gold:disabled {

    background: #475569;

    border-color: #64748b;

    color: #94a3b8;

    cursor: not-allowed;

    box-shadow: none;

    transform: none;

}



/* 4. Vault of Glory & Ad Rewards Modal */

.vault-modal-card {

    max-width: 680px;

    width: 92vw;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 29, 0.98) 100%);

    border: 2px solid rgba(168, 85, 247, 0.4);

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.25);

    border-radius: 20px;

    padding: 26px;

}



.vault-crest-badge {

    background: rgba(168, 85, 247, 0.2);

    border: 1px solid rgba(168, 85, 247, 0.5);

    color: #c084fc;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;

    padding: 4px 12px;

    border-radius: 20px;

    display: inline-block;

    margin-bottom: 8px;

}



.vault-items-grid {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 20px 0;

    max-height: 52vh;

    overflow-y: auto;

    padding-right: 6px;

}



.vault-item-card {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 14px 18px;

    background: rgba(30, 41, 59, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 14px;

    transition: all 0.2s ease;

}



.vault-item-card:hover {

    background: rgba(30, 41, 59, 0.9);

    border-color: rgba(168, 85, 247, 0.4);

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

}



.vault-item-icon {

    font-size: 32px;

    min-width: 44px;

    text-align: center;

    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));

}



.vault-item-info {

    flex: 1;

}



.vault-item-title {

    font-size: 15px;

    font-weight: 800;

    color: #f8fafc;

    margin-bottom: 2px;

}



.vault-item-badge {

    font-size: 10px;

    font-weight: 800;

    color: #38bdf8;

    letter-spacing: 0.8px;

    margin-bottom: 4px;

}



.vault-item-desc {

    font-size: 12px;

    color: #94a3b8;

    line-height: 1.4;

}



.btn-vault-action {

    padding: 8px 16px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

    min-height: 44px;

    transition: all 0.2s ease;

}



.btn-vault-action.ad-btn {

    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);

    border: 1.5px solid #a78bfa;

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);

}



.btn-vault-action.ad-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.55);

}



.btn-vault-action.owned {

    background: rgba(16, 185, 129, 0.2);

    border: 1px solid #10b981;

    color: #34d399;

    cursor: default;

}



.ad-tag {

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.2);

    font-size: 9px;

    padding: 2px 5px;

    border-radius: 4px;

}



/* 5. Weapon Evolution Notification Banner (AAA Upper Floating HUD Banner, Zero Game Pause) */

#evolutionCeremonyModal {

    position: fixed !important;

    top: 52px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    width: auto !important;

    max-width: 95vw !important;

    height: auto !important;

    background: transparent !important;

    z-index: 2400 !important;

    pointer-events: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    padding: 0 !important;

    margin: 0 !important;

    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

    animation: chestBannerEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



#evolutionCeremonyModal.hidden {

    display: none !important;

    opacity: 0 !important;

    transform: translateX(-50%) translateY(-20px) scale(0.96) !important;

}



.evo-ceremony-wrap {

    position: relative;

    width: auto !important;

    display: flex;

    align-items: center;

    justify-content: center;

}



.evo-ceremony-content {

    position: relative;

    z-index: 2;

    width: max-content !important;

    min-width: 0 !important;

    max-width: 580px !important;

    background: linear-gradient(180deg, rgba(24, 16, 42, 0.97) 0%, rgba(14, 10, 26, 0.98) 100%) !important;

    backdrop-filter: blur(16px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

    border: 1px solid rgba(245, 158, 11, 0.55) !important;

    border-top: 1.5px solid rgba(254, 240, 138, 0.95) !important;

    border-radius: 12px !important;

    padding: 8px 14px 9px 14px !important;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 28px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 7px !important;

    box-sizing: border-box !important;

}



.evo-top-bar {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

    width: 100% !important;

    padding-bottom: 4px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;

}



.evo-banner-title {

    color: #fbbf24 !important;

    text-shadow: 0 0 10px rgba(245, 158, 11, 0.7) !important;

    font-size: 11px !important;

    font-weight: 900 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

}



.evo-header-badge {

    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    background: rgba(245, 158, 11, 0.2) !important;

    border: 1px solid rgba(245, 158, 11, 0.5) !important;

    border-radius: 999px !important;

    padding: 2px 8px !important;

    font-size: 10px !important;

    font-weight: 900 !important;

    color: #fde047 !important;

    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important;

    line-height: 1 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

}



.evo-loot-cards {

    display: flex !important;

    align-items: stretch !important;

    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

}



.evo-loot-card {

    background: linear-gradient(135deg, rgba(38, 28, 56, 0.85) 0%, rgba(20, 15, 32, 0.95) 100%) !important;

    border: 1px solid rgba(245, 158, 11, 0.55) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    border-radius: 9px !important;

    padding: 6px 14px 6px 8px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    box-sizing: border-box !important;

}



.evo-loot-card .loot-icon-box {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(20, 15, 32, 0.95) 80%) !important;

    border: 1px solid rgba(245, 158, 11, 0.6) !important;

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35) !important;

}



.evo-loot-card .loot-icon-box svg {

    width: 26px !important;

    height: 26px !important;

    display: block !important;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));

}



.evo-loot-card .loot-name {

    font-size: 12.5px !important;

    font-weight: 900 !important;

    color: #ffffff !important;

    letter-spacing: 0.5px !important;

    text-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    max-width: 320px !important;

}



.evo-level-pill {

    background: rgba(245, 158, 11, 0.25) !important;

    border: 1px solid rgba(245, 158, 11, 0.6) !important;

    color: #fde047 !important;

    padding: 1.5px 6px !important;

    border-radius: 4px !important;

    font-size: 9px !important;

    font-weight: 900 !important;

    letter-spacing: 0.3px !important;

    white-space: nowrap !important;

}



.evo-stat-tag {

    color: #34d399 !important;

    font-weight: 800 !important;

    font-size: 10px !important;

    text-shadow: 0 0 6px rgba(52, 211, 153, 0.5) !important;

}



.evo-banner-desc {

    font-size: 11px !important;

    color: #cbd5e1 !important;

    line-height: 1.35 !important;

    max-width: 480px !important;

    text-align: left !important;

    margin: 0 !important;

    padding: 0 2px !important;

}



/* 6. Treasure Chest Notification (Compact Upper Window, Zero Game Pause) */

/* ========================================================================== */

/* 6. Treasure Chest Notification (AAA Roguelite Floating HUD Banner)         */

/* ========================================================================== */

#treasureChestModal {

    position: fixed !important;

    top: 52px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    width: auto !important;

    max-width: 95vw !important;

    height: auto !important;

    background: transparent !important;

    z-index: 2400 !important;

    pointer-events: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    padding: 0 !important;

    margin: 0 !important;

    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

    animation: chestBannerEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



#treasureChestModal.hidden {

    display: none !important;

    opacity: 0 !important;

    transform: translateX(-50%) translateY(-20px) scale(0.96) !important;

}



@keyframes chestBannerEnter {

    0% { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.94); }

    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

}



.chest-ceremony-wrap {

    position: relative;

    width: auto !important;

    display: flex;

    align-items: center;

    justify-content: center;

}



.chest-ceremony-content {

    position: relative;

    z-index: 2;

    width: max-content !important;

    min-width: 0 !important;

    max-width: 580px !important;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(10, 15, 28, 0.98) 100%) !important;

    backdrop-filter: blur(16px) saturate(180%) !important;

    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;

    border: 1px solid rgba(56, 189, 248, 0.45) !important;

    border-top: 1.5px solid rgba(186, 230, 253, 0.9) !important;

    border-radius: 12px !important;

    padding: 8px 14px 9px 14px !important;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 7px !important;

    box-sizing: border-box !important;

}



.chest-ceremony-wrap.super-lucky .chest-ceremony-content {

    border-color: rgba(245, 158, 11, 0.55) !important;

    border-top-color: rgba(254, 240, 138, 0.95) !important;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.85), 0 0 26px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

}



/* Top bar: Left crest + title, Right gold bounty pill */

.chest-top-bar {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

    width: 100% !important;

    padding-bottom: 4px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;

}



.chest-header-left {

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

}



.chest-crest-icon {

    font-size: 14px !important;

    line-height: 1 !important;

}



.chest-title-text {

    font-size: 11px !important;

    font-weight: 900 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    color: #7dd3fc !important;

    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;

}



.chest-ceremony-wrap.super-lucky .chest-title-text {

    color: #fef08a !important;

    text-shadow: 0 0 10px rgba(250, 204, 21, 0.7) !important;

}



.chest-header-bounty {

    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    background: rgba(245, 158, 11, 0.15) !important;

    border: 1px solid rgba(245, 158, 11, 0.4) !important;

    border-radius: 999px !important;

    padding: 2px 8px !important;

    font-size: 10.5px !important;

    font-weight: 900 !important;

    color: #fbbf24 !important;

    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important;

    line-height: 1 !important;

}



.chest-header-bounty svg {

    width: 13px !important;

    height: 13px !important;

    display: block !important;

}



/* Loot Cards Row */

.chest-loot-cards {

    display: flex !important;

    align-items: stretch !important;

    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

}



.chest-loot-card {

    background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    border-radius: 9px !important;

    padding: 6px 12px 6px 7px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 10px !important;

    flex: 1 1 auto !important;

    min-width: 135px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    box-sizing: border-box !important;

}



.chest-loot-card.loot-weapon {

    border-color: rgba(56, 189, 248, 0.5) !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(56, 189, 248, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

}



.chest-loot-card.loot-passive {

    border-color: rgba(168, 85, 247, 0.5) !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(168, 85, 247, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;

}



.loot-icon-box {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: rgba(15, 23, 42, 0.9) !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5) !important;

}



.loot-weapon .loot-icon-box {

    border-color: rgba(56, 189, 248, 0.5) !important;

    background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(15, 23, 42, 0.9) 80%) !important;

}



.loot-passive .loot-icon-box {

    border-color: rgba(168, 85, 247, 0.5) !important;

    background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(15, 23, 42, 0.9) 80%) !important;

}



.loot-icon-box svg {

    width: 26px !important;

    height: 26px !important;

    display: block !important;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));

}



.loot-text-col {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    justify-content: center !important;

    text-align: left !important;

    line-height: 1.25 !important;

    min-width: 0 !important;

}



.loot-name {

    font-size: 11.5px !important;

    font-weight: 800 !important;

    color: #f8fafc !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    max-width: 120px !important;

    letter-spacing: 0.2px !important;

}



.loot-badge-row {

    display: flex !important;

    align-items: center !important;

    gap: 5px !important;

    margin-top: 2px !important;

}



.loot-level-pill {

    font-size: 9px !important;

    font-weight: 900 !important;

    color: #fde047 !important;

    letter-spacing: 0.3px !important;

    white-space: nowrap !important;

}



.loot-type-tag {

    font-size: 8px !important;

    font-weight: 800 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    padding: 1px 4px !important;

    border-radius: 3px !important;

    line-height: 1 !important;

}



.loot-weapon .loot-type-tag {

    background: rgba(56, 189, 248, 0.2) !important;

    color: #38bdf8 !important;

    border: 1px solid rgba(56, 189, 248, 0.4) !important;

}



.loot-passive .loot-type-tag {

    background: rgba(168, 85, 247, 0.2) !important;

    color: #c084fc !important;

    border: 1px solid rgba(168, 85, 247, 0.4) !important;

}



.btn-open-chest, .btn-claim-chest {

    display: none !important;

}



/* Mobile Responsive Optimization for Chest & Evolution Notification Banners */

@media (max-width: 580px) {

    #treasureChestModal,

    #evolutionCeremonyModal {

        top: 54px !important;

        max-width: 96vw !important;

    }

    .chest-ceremony-content,

    .evo-ceremony-content {

        padding: 6px 10px 6px 10px !important;

        max-width: 95vw !important;

        border-radius: 10px !important;

        gap: 5px !important;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(56, 189, 248, 0.2) !important;

    }

    .chest-ceremony-wrap.super-lucky .chest-ceremony-content {

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 20px rgba(245, 158, 11, 0.3) !important;

    }

    .chest-top-bar,

    .evo-top-bar {

        gap: 8px !important;

        padding-bottom: 3px !important;

    }

    .chest-title-text,

    .evo-banner-title {

        font-size: 10px !important;

        letter-spacing: 0.6px !important;

    }

    .chest-header-bounty,

    .evo-header-badge {

        font-size: 9px !important;

        padding: 1.5px 6px !important;

    }

    .chest-loot-cards,

    .evo-loot-cards {

        gap: 5px !important;

        flex-wrap: nowrap !important;

    }

    .chest-loot-card,

    .evo-loot-card {

        padding: 4px 6px 4px 5px !important;

        min-width: 0 !important;

        flex: 1 1 0 !important;

        gap: 6px !important;

        border-radius: 7px !important;

    }

    .loot-icon-box {

        width: 28px !important;

        height: 28px !important;

        min-width: 28px !important;

        border-radius: 6px !important;

    }

    .loot-icon-box svg {

        width: 18px !important;

        height: 18px !important;

    }

    .loot-name {

        font-size: 9.5px !important;

        max-width: 82px !important;

        line-height: 1.15 !important;

    }

    .loot-level-pill {

        font-size: 8px !important;

        font-weight: 800 !important;

    }

    .loot-type-tag {

        display: none !important;

    }

    .evo-banner-desc {

        font-size: 9.5px !important;

        line-height: 1.2 !important;

    }

}



@media (orientation: landscape) and (max-height: 550px) {

    #treasureChestModal,

    #evolutionCeremonyModal {

        top: 56px !important;

    }

    .chest-ceremony-content,

    .evo-ceremony-content {

        padding: 5px 12px 5px 12px !important;

        gap: 4px !important;

    }

    .chest-top-bar,

    .evo-top-bar {

        padding-bottom: 2px !important;

    }

}



/* 7. CrazyGames Ad Simulator Modal (Dev Fallback) */

.ad-sim-card {

    max-width: 480px;

    width: 90vw;

    background: #0f172a;

    border: 2px solid #6366f1;

    border-radius: 20px;

    padding: 24px;

    text-align: center;

    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);

}



.ad-sim-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

}



.ad-sim-badge {

    background: #1e293b;

    border: 1px solid #475569;

    color: #94a3b8;

    font-size: 10px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 6px;

}



.ad-sim-timer {

    font-size: 13px;

    font-weight: 800;

    color: #38bdf8;

    font-family: monospace;

}



.ad-sim-placeholder {

    padding: 30px 10px;

    background: rgba(30, 41, 59, 0.5);

    border-radius: 14px;

    margin-bottom: 20px;

}



.ad-sim-icon {

    font-size: 46px;

    margin-bottom: 8px;

}



.ad-sim-placeholder h3 {

    font-size: 18px;

    font-weight: 800;

    color: #ffffff;

    margin-bottom: 6px;

}



.ad-sim-placeholder p {

    font-size: 12px;

    color: #94a3b8;

}



.ad-sim-actions {

    display: flex;

    gap: 12px;

    justify-content: center;

}



/* 8. Mobile Responsiveness & Touch Ergonomics */

#gameCanvas {

    touch-action: none !important;

}



.mobile-controls-layer {

    touch-action: none !important;

}



@media (max-width: 768px) {

    .modal-dialog, .modal-card, .vault-modal-card, .evo-ceremony-card {

        width: 94vw !important;

        max-height: 88vh !important;

        overflow-y: auto !important;

        padding: 16px !important;

    }



    .btn-primary, .btn-secondary, .touch-action-btn, .btn-reroll, .btn-double-gold {

        min-height: 48px;

    }



    .evo-ceremony-card h2 { font-size: 20px; }

}



/* Co-Op Synchronized Global Pause Banner */

.coop-pause-overlay {

    position: absolute;

    top: 72px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 2500;

    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease;

}

.coop-pause-overlay.hidden {

    display: none !important;

}

.coop-pause-box {

    display: flex;

    align-items: center;

    gap: 12px;

    background: rgba(15, 23, 42, 0.94);

    border: 1.5px solid rgba(56, 189, 248, 0.7);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 24px rgba(56, 189, 248, 0.3);

    backdrop-filter: blur(10px);

    border-radius: 9999px;

    padding: 10px 24px;

}

.coop-pause-spinner {

    font-size: 20px;

    animation: coopPausePulse 1.5s infinite ease-in-out;

}

.coop-pause-title {

    font-size: 13px;

    font-weight: 900;

    color: #38bdf8;

    letter-spacing: 1.2px;

}

.coop-pause-desc {

    font-size: 13px;

    font-weight: 700;

    color: #ffffff;

}

@keyframes coopPausePulse {

    0%, 100% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.15); opacity: 0.7; }

}



#powerUpgradesModal,

#masteryTreeModal {

    position: fixed;

    inset: 0;

    z-index: 1000;

}



.power-upgrades-panel {

    max-width: 980px;

    width: 94vw;

    max-height: 90vh;

    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(10, 15, 26, 0.98) 100%);

    border: 1.5px solid rgba(245, 158, 11, 0.35);

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.15);

    border-radius: 14px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    color: #f8fafc;

    animation: modalAppear 0.25s ease-out;

}



.workshop-hub-panel {

    max-width: 1040px;

    width: 95vw;

    height: 90vh;

    max-height: 90vh;

}



.workshop-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 20px;

    background: rgba(15, 23, 42, 0.9);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    gap: 12px;

}



.workshop-nav-tabs {

    display: flex;

    align-items: center;

    gap: 6px;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 3px;

}



.workshop-tab-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 16px;

    border-radius: 6px;

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #94a3b8;

    background: transparent;

    border: 1px solid transparent;

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.workshop-tab-btn:hover:not(.active) {

    color: #f8fafc;

    background: rgba(255, 255, 255, 0.05);

}



.workshop-tab-btn.active#tabBtnAnvil {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.4) 100%);

    border-color: rgba(245, 158, 11, 0.6);

    color: #fef08a;

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);

}



.workshop-tab-btn.active#tabBtnMastery {

    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35) 0%, rgba(109, 40, 217, 0.45) 100%);

    border-color: rgba(168, 85, 247, 0.6);

    color: #f3e8ff;

    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);

}



.workshop-tab-page {

    flex: 1;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    min-height: 0;

}



.tab-subtitle-bar {

    padding: 8px 24px;

    background: rgba(10, 15, 26, 0.6);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.tab-desc-text {

    margin: 0;

    font-size: 11px;

    color: #94a3b8;

}



.mastery-hero-picker-bar {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    background: rgba(12, 10, 24, 0.85);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    flex-shrink: 0;

}



.mastery-hero-picker-bar::-webkit-scrollbar {

    height: 4px;

}

.mastery-hero-picker-bar::-webkit-scrollbar-thumb {

    background: rgba(168, 85, 247, 0.4);

    border-radius: 2px;

}



.mastery-hero-picker-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 12px;

    border-radius: 8px;

    background: rgba(30, 41, 59, 0.4);

    border: 1.5px solid rgba(148, 163, 184, 0.2);

    color: #cbd5e1;

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    white-space: nowrap;

    flex-shrink: 0;

}



.mastery-hero-picker-btn:hover {

    border-color: rgba(168, 85, 247, 0.5);

    background: rgba(147, 51, 234, 0.15);

    color: #f8fafc;

}



.mastery-hero-picker-btn.active {

    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35) 0%, rgba(91, 33, 182, 0.45) 100%);

    border-color: #a855f7;

    color: #ffffff;

    box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);

}



.mastery-picker-icon {

    font-size: 16px;

    line-height: 1;

}



.mastery-picker-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1px;

}



.mastery-picker-name {

    font-size: 11px;

    font-weight: 800;

}



.mastery-picker-stars {

    font-size: 9px;

    color: #fbbf24;

    letter-spacing: 0.5px;

}



.mastery-overview-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 24px;

    background: rgba(15, 23, 42, 0.5);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    flex-shrink: 0;

}



.power-upgrades-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 24px;

    background: rgba(15, 23, 42, 0.85);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.power-header-left {

    display: flex;

    align-items: center;

    gap: 14px;

}



.forge-crest-icon {

    font-size: 28px;

    background: rgba(245, 158, 11, 0.15);

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    border-radius: 10px;

    padding: 8px;

    line-height: 1;

}



.power-modal-tag {

    font-size: 9px;

    font-weight: 900;

    color: #fbbf24;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}



#powerForgeTitle {

    font-size: 20px;

    font-weight: 900;

    color: #ffffff;

    letter-spacing: 1px;

    margin: 2px 0 3px 0;

}



.power-modal-sub {

    font-size: 11px;

    color: #94a3b8;

    margin: 0;

}



.power-header-right {

    display: flex;

    align-items: center;

    gap: 16px;

}



.power-gold-counter {

    display: flex;

    align-items: center;

    gap: 7px;

    background: rgba(245, 158, 11, 0.12);

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    padding: 7px 14px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 900;

    color: #fbbf24;

}



.gold-counter-label {

    font-size: 9px;

    font-weight: 800;

    color: #fde68a;

    letter-spacing: 0.5px;

}



.forge-close-btn {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #94a3b8;

    font-size: 22px;

    border-radius: 8px;

    width: 36px;

    height: 36px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s ease;

}



.forge-close-btn:hover {

    background: rgba(239, 68, 68, 0.2);

    border-color: rgba(239, 68, 68, 0.5);

    color: #ffffff;

}



.power-upgrades-body {

    padding: 20px 24px;

    overflow-y: auto;

    max-height: calc(90vh - 170px);

}



.power-upgrades-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}



.power-card {

    background: rgba(15, 23, 42, 0.75);

    border: 1.5px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    transition: all 0.2s ease;

}



.power-card:hover {

    border-color: rgba(245, 158, 11, 0.4);

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);

}



.power-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.power-card-title-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

}



.power-card-icon {

    font-size: 20px;

    line-height: 1;

}



.power-card-name {

    font-size: 13px;

    font-weight: 800;

    color: #f8fafc;

}



.power-card-pips {
    display: flex;
    gap: 2px;

}



.power-pip {
    width: 7px;
    height: 5px;

    border-radius: 2px;

    background: rgba(51, 65, 85, 0.7);

    border: 1px solid rgba(148, 163, 184, 0.2);

}



.power-pip.active {

    background: #fbbf24;

    border-color: #f59e0b;

    box-shadow: 0 0 6px rgba(251, 191, 36, 0.7);

}



.power-card-desc {

    font-size: 10.5px;

    color: #94a3b8;

    line-height: 1.35;

    min-height: 28px;

}



.power-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: auto;

    padding-top: 6px;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.power-current-bonus {

    font-size: 11px;

    font-weight: 800;

    color: #38bdf8;

}



.btn-buy-upgrade {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 6px 12px;

    border-radius: 6px;

    font-size: 10.5px;

    font-weight: 800;

    cursor: pointer;

    transition: all 0.2s ease;

    border: 1px solid rgba(245, 158, 11, 0.5);

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.35) 100%);

    color: #fef08a;

}



.btn-buy-upgrade:hover:not(:disabled):not(.maxed) {

    background: linear-gradient(135deg, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.55) 100%);

    border-color: #fbbf24;

    transform: translateY(-1px);

    box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);

}



.btn-buy-upgrade:disabled {

    opacity: 0.45;

    cursor: not-allowed;

    border-color: rgba(148, 163, 184, 0.25);

    background: rgba(30, 41, 59, 0.4);

    color: #94a3b8;

}



.btn-buy-upgrade.maxed {

    background: rgba(16, 185, 129, 0.2);

    border-color: rgba(16, 185, 129, 0.5);

    color: #6ee7b7;

    cursor: default;

}



.power-upgrades-footer {

    padding: 12px 24px;

    background: rgba(10, 15, 26, 0.95);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.footer-refund-wrap {

    display: flex;

    align-items: center;

    gap: 14px;

}



.btn-refund-upgrades {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    background: rgba(239, 68, 68, 0.15);

    border: 1.5px solid rgba(239, 68, 68, 0.4);

    color: #fca5a5;

    font-size: 11px;

    font-weight: 900;

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-refund-upgrades:hover {

    background: rgba(239, 68, 68, 0.3);

    border-color: #f87171;

    color: #ffffff;

    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);

}



.refund-hint {

    font-size: 11px;

    color: #64748b;

    font-weight: 600;

}



.power-active-stats-summary {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.power-summary-chip {

    font-size: 9.5px;

    font-weight: 800;

    color: #fbbf24;

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.35);

    padding: 2px 7px;

    border-radius: 4px;

}



/* ==========================================================================

   📜 CHAMPION MASTERY ROADMAP (10-TIER PERK TIMELINE)

   ========================================================================== */

.mastery-tree-panel {

    max-width: 900px;

    width: 92vw;

    max-height: 88vh;

    background: linear-gradient(180deg, rgba(18, 18, 38, 0.98) 0%, rgba(12, 12, 26, 0.98) 100%);

    border: 1.5px solid rgba(147, 51, 234, 0.35);

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(147, 51, 234, 0.15);

    border-radius: 14px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    color: #f8fafc;

    animation: modalAppear 0.25s ease-out;

}



.mastery-tree-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 24px;

    background: rgba(15, 15, 32, 0.85);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.mastery-header-hero {

    display: flex;

    align-items: center;

    gap: 14px;

}



.mastery-hero-crest {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    border: 1.5px solid #a855f7;

    background: rgba(147, 51, 234, 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);

}



.mastery-hero-meta {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.mastery-modal-tag {

    font-size: 9px;

    font-weight: 900;

    color: #c084fc;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}



#masteryTreeTitle {

    font-size: 20px;

    font-weight: 900;

    color: #ffffff;

    margin: 0;

}



.mastery-hero-stars-row {

    display: flex;

    align-items: center;

    gap: 8px;

}



.mastery-level-pill {

    font-size: 9px;

    font-weight: 900;

    background: rgba(147, 51, 234, 0.35);

    border: 1px solid rgba(192, 132, 252, 0.5);

    color: #f3e8ff;

    padding: 2px 8px;

    border-radius: 4px;

}



.mastery-header-right {

    display: flex;

    align-items: center;

    gap: 16px;

}



.mastery-xp-counter-box {

    display: flex;

    flex-direction: column;

    gap: 4px;

    width: 180px;

}



.xp-counter-top {

    display: flex;

    justify-content: space-between;

    font-size: 9.5px;

    color: #94a3b8;

    font-weight: 700;

}



.mastery-tree-body {

    padding: 20px 24px;

    overflow-y: auto;

    max-height: calc(88vh - 170px);

}



.mastery-timeline-container {

    display: flex;

    flex-direction: column;

    gap: 10px;

    position: relative;

}



.mastery-tier-card {

    display: flex;

    align-items: center;

    gap: 14px;

    background: rgba(15, 23, 42, 0.65);

    border: 1.5px solid rgba(255, 255, 255, 0.08);

    border-radius: 10px;

    padding: 10px 14px;

    transition: all 0.2s ease;

}



.mastery-tier-card.unlocked {

    background: linear-gradient(135deg, rgba(30, 27, 75, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);

    border-color: rgba(168, 85, 247, 0.5);

    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.2);

}



.mastery-tier-card.current {

    border-color: #fbbf24;

    box-shadow: 0 0 16px rgba(251, 191, 36, 0.35);

    background: linear-gradient(135deg, rgba(40, 30, 20, 0.8) 0%, rgba(20, 25, 45, 0.8) 100%);

}



.mastery-tier-card.locked {

    opacity: 0.6;

    border-color: rgba(255, 255, 255, 0.05);

}



.tier-level-circle {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: rgba(30, 41, 59, 0.8);

    border: 2px solid #64748b;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 900;

    color: #ffffff;

    flex-shrink: 0;

}



.mastery-tier-card.unlocked .tier-level-circle {

    border-color: #a855f7;

    background: rgba(147, 51, 234, 0.35);

    color: #f3e8ff;

    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);

}



.mastery-tier-card.current .tier-level-circle {

    border-color: #fbbf24;

    background: rgba(245, 158, 11, 0.35);

    color: #fef08a;

    box-shadow: 0 0 12px rgba(251, 191, 36, 0.7);

}



.tier-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.tier-name-row {

    display: flex;

    align-items: center;

    gap: 8px;

}



.tier-name {

    font-size: 13px;

    font-weight: 800;

    color: #f8fafc;

}



.tier-badge-status {

    font-size: 8px;

    font-weight: 900;

    padding: 1px 6px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.tier-badge-status.unlocked {

    background: rgba(168, 85, 247, 0.25);

    border: 1px solid rgba(168, 85, 247, 0.5);

    color: #c084fc;

}



.tier-badge-status.current {

    background: rgba(245, 158, 11, 0.25);

    border: 1px solid rgba(245, 158, 11, 0.6);

    color: #fbbf24;

}



.tier-badge-status.locked {

    background: rgba(148, 163, 184, 0.15);

    border: 1px solid rgba(148, 163, 184, 0.3);

    color: #94a3b8;

}



.tier-desc {

    font-size: 11px;

    color: #94a3b8;

}



.tier-stat-chip {

    font-size: 11px;

    font-weight: 800;

    color: #38bdf8;

    background: rgba(56, 189, 248, 0.12);

    border: 1px solid rgba(56, 189, 248, 0.35);

    padding: 4px 10px;

    border-radius: 6px;

    white-space: nowrap;

}



.mastery-tree-footer {

    padding: 12px 24px;

    background: rgba(10, 10, 24, 0.95);

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.bonuses-label {

    font-size: 9px;

    font-weight: 900;

    color: #c084fc;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}



.bonuses-pills-row {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 5px;

}



.active-perk-pill {

    font-size: 10px;

    font-weight: 800;

    color: #f3e8ff;

    background: rgba(147, 51, 234, 0.25);

    border: 1px solid rgba(192, 132, 252, 0.4);

    padding: 3px 8px;

    border-radius: 4px;

}



/* ==========================================================================

   📱 WORKSHOP HUB RESPONSIVE (TABLETS & MOBILE SCREENS)

   ========================================================================== */

@media (max-width: 900px) {

    .power-upgrades-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

}



@media (max-width: 680px) {

    .workshop-hub-panel {

        width: 96vw;

        max-height: 94vh;

        border-radius: 10px;

    }

    .workshop-header {

        display: grid;

        grid-template-columns: 1fr auto;

        gap: 8px;

        padding: 10px 12px;

    }

    .power-header-left {

        grid-column: 1 / 2;

        gap: 8px;

    }

    .forge-crest-icon {

        font-size: 20px;

        padding: 5px;

    }

    #workshopModalTitle {

        font-size: 14px;

    }

    .power-header-right {

        grid-column: 2 / 3;

        gap: 8px;

    }

    .power-gold-counter {

        padding: 4px 8px;

        font-size: 11px;

    }

    .forge-close-btn {

        width: 30px;

        height: 30px;

        font-size: 18px;

    }

    .workshop-nav-tabs {

        grid-column: 1 / -1;

        width: 100%;

        justify-content: stretch;

    }

    .workshop-tab-btn {

        flex: 1;

        justify-content: center;

        padding: 6px 4px;

        font-size: 10.5px;

    }

    .power-upgrades-grid {

        grid-template-columns: 1fr;

        gap: 8px;

    }

    .power-upgrades-body,

    .mastery-tree-body {

        padding: 10px 12px;

        max-height: calc(94vh - 180px);

    }

    .power-upgrades-footer {

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        padding: 10px 12px;

    }

    .footer-refund-wrap {

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

    }

    .btn-refund-upgrades {

        width: 100%;

        justify-content: center;

    }

    .mastery-hero-picker-bar {

        padding: 8px 12px;

        gap: 6px;

    }

    .mastery-hero-picker-btn {

        padding: 4px 8px;

        gap: 6px;

    }

    .mastery-overview-card {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        padding: 10px 12px;

    }

    .mastery-xp-counter-box {

        width: 100%;

    }

}



/* ==========================================================================

   🎬 VISUAL POLISH & GAME FEEL: IMPACT VIGNETTE & CINEMATIC SCREEN FADE

   ========================================================================== */

.impact-vignette {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 38;

    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0) 55%, rgba(220, 38, 38, 0.42) 100%);

    opacity: 0;

    transition: opacity 0.12s ease-out;

}



.impact-vignette.flash {

    opacity: 1 !important;

}



.impact-vignette.low-hp {

    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0) 42%, rgba(185, 28, 28, 0.58) 100%);

    animation: lowHpHdrHeartbeat 1.1s infinite ease-in-out;

}



@keyframes lowHpHdrHeartbeat {

    0%, 100% { opacity: 0.25; }

    50% { opacity: 0.85; }

}



.screen-fade-overlay {

    position: fixed;

    inset: 0;

    background: #020617;

    pointer-events: none;

    z-index: 99990;

    opacity: 0;

    transition: opacity 0.30s ease-in-out;

}



.screen-fade-overlay.faded {

    opacity: 1 !important;

}



/* ==========================================================================

   🌐 NETWORK PING & CO-OP STATUS INDICATOR

   ========================================================================== */

.stat-pill.net-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(15, 23, 42, 0.8);

    border: 1px solid rgba(56, 189, 248, 0.25);

    padding: 4px 10px;

    border-radius: 14px;

}



.net-ping-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.3s ease;

}



.net-ping-dot.green {

    background: #10b981;

    box-shadow: 0 0 6px #10b981;

}



.net-ping-dot.yellow {

    background: #f59e0b;

    box-shadow: 0 0 6px #f59e0b;

}



.net-ping-dot.red {

    background: #ef4444;

    box-shadow: 0 0 6px #ef4444;

}



.net-ping-dot.blue {

    background: #38bdf8;

    box-shadow: 0 0 6px #38bdf8;

}



.net-ping-text {

    font-size: 10px;

    font-weight: 800;

    color: #cbd5e1;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



/* ==========================================================================

   ⚡ ENDGAME DPS & BATTLE PERFORMANCE REPORT

   ========================================================================== */

.battle-dps-report {

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 41, 59, 0.75) 100%);

    border: 1px solid rgba(245, 158, 11, 0.35);

    border-radius: 10px;

    padding: 10px 14px;

    margin: 8px 0 10px 0;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

}



.dps-report-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding-bottom: 4px;

}



.dps-report-title {

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.8px;

    color: #fbbf24;

    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);

}



.dps-rate-badge {

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.45);

    color: #fde047;

    font-size: 11px;

    font-weight: 900;

    padding: 2px 8px;

    border-radius: 12px;

    letter-spacing: 0.5px;

}



.dps-stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 8px;

}



.dps-stat-cell {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    padding: 4px 8px;

}



.dps-label {

    font-size: 10px;

    color: #94a3b8;

    font-weight: 700;

}



.dps-val {

    font-size: 12px;

    font-weight: 900;

}



.text-amber {

    color: #fbbf24;

}



.text-crimson {

    color: #f87171;

}



.mvp-weapon-card {

    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);

    border: 1.5px solid rgba(251, 191, 36, 0.6);

    border-radius: 8px;

    padding: 8px 10px;

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);

    position: relative;

    overflow: hidden;

}



.mvp-tag {

    position: absolute;

    top: 0;

    right: 0;

    background: linear-gradient(90deg, #f59e0b, #d97706);

    color: #ffffff;

    font-size: 8.5px;

    font-weight: 900;

    padding: 1px 7px;

    border-bottom-left-radius: 6px;

    letter-spacing: 0.6px;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

}



.mvp-card-body {

    display: flex;

    align-items: center;

    gap: 10px;

}



.mvp-icon {

    font-size: 24px;

    background: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(251, 191, 36, 0.4);

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    flex-shrink: 0;

}



.mvp-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.mvp-name {

    font-size: 12px;

    font-weight: 900;

    color: #f8fafc;

    letter-spacing: 0.3px;

}



.mvp-damage-row {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 10.5px;

    font-weight: 800;

    color: #fbbf24;

}



.mvp-pct {

    color: #94a3b8;

    font-size: 10px;

}



.mvp-bar-track {

    width: 100%;

    height: 5px;

    background: rgba(0, 0, 0, 0.4);

    border-radius: 3px;

    overflow: hidden;

}



.mvp-bar-fill {

    height: 100%;

    background: linear-gradient(90deg, #f59e0b, #fbbf24);

    border-radius: 3px;

    box-shadow: 0 0 6px #f59e0b;

    transition: width 0.6s ease-out;

}



/* ==========================================================================

   🎁 SUPER LUCKY CHEST & JACKPOT CEREMONY

   ========================================================================== */

.chest-ceremony-wrap.super-lucky .chest-sunburst-rays {

    animation: spinRays 7s infinite linear !important;

    background: radial-gradient(circle, rgba(245, 158, 11, 0.5) 0%, rgba(217, 119, 6, 0.25) 45%, transparent 70%) !important;

}



.chest-ceremony-badge.super-badge {

    background: linear-gradient(90deg, #ec4899, #f59e0b) !important;

    border-color: #fef08a !important;

    color: #ffffff !important;

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.8) !important;

    animation: pulseBadge 1s infinite alternate;

}



@keyframes pulseBadge {

    0% { transform: scale(1); }

    100% { transform: scale(1.06); }

}



.chest-loot-card.loot-super {

    border-color: #fbbf24 !important;

    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(30, 41, 59, 0.95) 100%) !important;

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);

}







/* PHONE LOBBY: compact top strip so the heroes' stage stays uncovered */

@media (max-width: 580px) {

    .war-map-console {

        top: 62px !important;

        bottom: auto !important;

        left: 6px !important;

        right: 6px !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        align-items: center !important;

        gap: 6px !important;

        padding: 5px 6px !important;

        max-height: 54px;

        overflow: hidden;

    }

    .war-map-console .map-card-glow,

    .war-map-console .expedition-sector-header,

    .war-map-console .sector-intel-grid,

    .war-map-console .sector-records-strip,

    .war-map-console .diff-selector-header,

    .war-map-console #lobbyActiveDiffBadge { display: none !important; }

    .war-map-console .lobby-difficulty-selector { flex: 1 1 auto; margin: 0; padding: 0; min-width: 0; }

    .war-map-console .diff-pills-row { gap: 3px; margin: 0; }

    .war-map-console .diff-pill-btn { padding: 4px 2px; flex-direction: row; gap: 3px; min-width: 0; }

    .war-map-console .diff-pill-name { font-size: 8px; }

    .war-map-console .diff-pill-icon { font-size: 11px; }

    .war-map-console .btn-open-atlas-modal { flex: 0 0 44px; width: 44px; padding: 0; margin: 0; height: 40px; }

    .war-map-console .atlas-btn-label { display: none; }

    .war-map-console .atlas-btn-inner { justify-content: center; padding: 0; }

}



/* Polished account avatar + level medallion */

.user-avatar-circle {

    width: 38px; height: 38px;

    background: radial-gradient(circle at 35% 30%, #4338ca 0%, #1e1b4b 70%);

    border: 2px solid #fbbf24;

    box-shadow: 0 0 0 2px #0f172a, 0 0 12px rgba(251, 191, 36, 0.35), inset 0 -4px 8px rgba(0, 0, 0, 0.4);

}

.user-level-badge {

    bottom: -5px; right: -7px;

    min-width: 19px; height: 19px;

    padding: 0 4px;

    box-sizing: border-box;

    display: flex; align-items: center; justify-content: center;

    border-radius: 10px;

    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);

    color: #1c1002;

    font-size: 11px; font-weight: 900;

    border: 2px solid #0f172a;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);

    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);

}





/* ============================================== */

/* 📜 QUESTS & ACHIEVEMENTS (KSIĘGA ZADAŃ) MODAL  */

/* ============================================== */

.quests-btn {

    position: relative;

}



.quests-badge {

    position: absolute;

    top: -4px;

    right: -4px;

    background: linear-gradient(135deg, #ef4444, #dc2626);

    color: #ffffff;

    font-size: 10px;

    font-weight: 900;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #0f172a;

    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);

    animation: pulseBadge 1.5s infinite;

}



@keyframes pulseBadge {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.15); }

}



.quests-modal-dialog {

    max-width: 680px;

    width: 92vw;

    max-height: 85vh;

    display: flex;

    flex-direction: column;

    background: linear-gradient(180deg, #111827 0%, #0a0f1d 100%);

    border: 1.5px solid rgba(245, 158, 11, 0.4);

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(245, 158, 11, 0.2);

    border-radius: 16px;

    overflow: hidden;

}



.quests-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: rgba(15, 23, 42, 0.95);

    border-bottom: 1px solid rgba(148, 163, 184, 0.15);

}



.quests-modal-header h2 {

    margin: 0;

    font-size: 17px;

    color: #f8fafc;

    letter-spacing: 0.5px;

}



.quests-filter-bar {

    display: flex;

    gap: 8px;

    padding: 12px 20px;

    background: rgba(15, 23, 42, 0.6);

    border-bottom: 1px solid rgba(148, 163, 184, 0.1);

}



.quest-filter-btn {

    padding: 6px 14px;

    background: rgba(30, 41, 59, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.2);

    border-radius: 8px;

    color: #94a3b8;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.2s;

}



.quest-filter-btn:hover {

    color: #ffffff;

    border-color: #38bdf8;

}



.quest-filter-btn.active {

    background: rgba(245, 158, 11, 0.2);

    border-color: #f59e0b;

    color: #fbbf24;

}



.quests-body {

    flex: 1;

    overflow-y: auto;

    padding: 16px 20px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.quest-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    background: rgba(17, 24, 39, 0.8);

    border: 1px solid rgba(148, 163, 184, 0.15);

    border-radius: 12px;

    padding: 14px 16px;

    transition: all 0.2s;

}



.quest-card:hover {

    border-color: rgba(245, 158, 11, 0.4);

    background: rgba(30, 41, 59, 0.7);

}



.quest-card.completed {

    border-color: rgba(34, 197, 94, 0.4);

    background: rgba(20, 83, 45, 0.15);

}



.quest-card.claimed {

    opacity: 0.65;

    border-color: rgba(148, 163, 184, 0.1);

}



.quest-card-left {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

}



.quest-icon-badge {

    width: 44px;

    height: 44px;

    border-radius: 10px;

    background: rgba(15, 23, 42, 0.9);

    border: 1.5px solid rgba(148, 163, 184, 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}



.quest-info {

    flex: 1;

}



.quest-title-row {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 3px;

}



.quest-title {

    font-size: 14px;

    font-weight: 800;

    color: #f1f5f9;

}



.quest-desc {

    font-size: 11.5px;

    color: #94a3b8;

    margin-bottom: 8px;

}



.quest-progress-track {

    width: 100%;

    height: 7px;

    background: rgba(15, 23, 42, 0.9);

    border-radius: 4px;

    overflow: hidden;

    position: relative;

    border: 1px solid rgba(148, 163, 184, 0.15);

}



.quest-progress-fill {

    height: 100%;

    background: linear-gradient(90deg, #38bdf8, #818cf8);

    border-radius: 4px;

    transition: width 0.3s ease;

}



.quest-card.completed .quest-progress-fill {

    background: linear-gradient(90deg, #10b981, #34d399);

}



.quest-progress-text {

    font-size: 10px;

    color: #cbd5e1;

    font-weight: 700;

    margin-top: 4px;

}



.quest-card-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 8px;

    flex-shrink: 0;

}



.quest-rewards-pill {

    display: flex;

    align-items: center;

    gap: 6px;

    background: rgba(15, 23, 42, 0.9);

    border: 1px solid rgba(245, 158, 11, 0.3);

    border-radius: 8px;

    padding: 4px 10px;

    font-size: 11px;

    font-weight: 800;

    color: #fbbf24;

}



.quest-claim-btn {

    padding: 7px 16px;

    background: linear-gradient(135deg, #10b981, #059669);

    color: #ffffff;

    border: none;

    border-radius: 8px;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

    transition: all 0.2s;

}



.quest-claim-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5);

}



.quest-status-badge {

    padding: 5px 12px;

    background: rgba(30, 41, 59, 0.6);

    border: 1px solid rgba(148, 163, 184, 0.2);

    border-radius: 6px;

    font-size: 10.5px;

    font-weight: 700;

    color: #64748b;

}



.quests-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 12px 20px;

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 12, 22, 1) 100%);

    border-top: 1px solid rgba(245, 158, 11, 0.25);

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    border-bottom-left-radius: 14px;

    border-bottom-right-radius: 14px;

    min-height: 58px;

}



.quests-footer-left {

    display: flex;

    align-items: center;

    flex: 1;

    min-width: 0;

}



.quests-unclaimed-hint {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    font-weight: 700;

    color: #94a3b8;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(148, 163, 184, 0.15);

    border-radius: 8px;

    padding: 6px 12px;

    transition: all 0.3s ease;

}



.quests-unclaimed-hint.has-unclaimed {

    color: #fde68a;

    background: rgba(245, 158, 11, 0.12);

    border-color: rgba(245, 158, 11, 0.45);

    box-shadow: 0 0 14px rgba(245, 158, 11, 0.2);

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

}



.quests-unclaimed-hint.has-unclaimed .hint-icon {

    animation: gentleWiggle 1.6s ease-in-out infinite;

}



.quests-footer-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}



.btn-claim-all-quests {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 18px;

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%);

    border: 1.5px solid #fef08a;

    border-radius: 9px;

    color: #1c1002;

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow: 0 3px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);

    animation: pulseGoldButton 2s infinite ease-in-out;

}



.btn-claim-all-quests:hover {

    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7);

    filter: brightness(1.08);

}



.btn-claim-all-quests:active {

    transform: translateY(1px) scale(0.98);

}



.btn-quests-close {

    padding: 8px 18px;

    background: rgba(30, 41, 59, 0.85);

    border: 1px solid rgba(148, 163, 184, 0.3);

    border-radius: 9px;

    color: #cbd5e1;

    font-size: 11.5px;

    font-weight: 700;

    letter-spacing: 0.4px;

    cursor: pointer;

    transition: all 0.2s;

}



.btn-quests-close:hover {

    background: rgba(51, 65, 85, 0.95);

    border-color: #cbd5e1;

    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



/* Flying Claim Particle (Gold Coin & XP Star) */

.quest-fly-particle {

    position: fixed;

    z-index: 100000;

    pointer-events: none;

    user-select: none;

    font-size: 20px;

    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));

    will-change: transform, opacity;

}



/* Card flash on successful claim */

@keyframes questCardClaimFlash {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8);

        border-color: #fbbf24;

    }

    35% {

        transform: scale(1.025);

        box-shadow: 0 0 24px 6px rgba(245, 158, 11, 0.6);

        border-color: #fef08a;

    }

    100% {

        transform: scale(1);

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        border-color: rgba(148, 163, 184, 0.2);

    }

}



.quest-card.just-claimed {

    animation: questCardClaimFlash 0.55s ease-out forwards;

}



@keyframes pulseGoldButton {

    0%, 100% {

        box-shadow: 0 3px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    }

    50% {

        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.75), 0 0 12px rgba(254, 240, 138, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8);

    }

}



@keyframes gentleWiggle {

    0%, 100% { transform: rotate(0deg); }

    25% { transform: rotate(-8deg); }

    75% { transform: rotate(8deg); }

}



/* User Account Rank Badge in Header */

.user-rank-tag {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);

    border: 1.5px solid #fbbf24;

    border-radius: 12px;

    padding: 2px 7px 2px 5px;

    margin-left: -8px;

    z-index: 2;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 10px rgba(251, 191, 36, 0.25);

}



.user-rank-prefix {

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 0.5px;

    color: #fbbf24;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

}



.user-rank-tag .user-level-badge {

    position: static !important;

    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);

    color: #1c1002;

    font-size: 11px;

    font-weight: 900;

    min-width: 16px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    border-radius: 8px;

    padding: 0 3px;

    border: none;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}



/* Story and Categorized Quests Styling */

.quest-card.story {

    border-color: rgba(245, 158, 11, 0.35);

    background: linear-gradient(90deg, rgba(30, 27, 75, 0.6) 0%, rgba(17, 24, 39, 0.8) 100%);

}



.quest-card.story:hover {

    border-color: rgba(251, 191, 36, 0.65);

    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15);

}



.chapter-badge {

    font-size: 9.5px;

    font-weight: 900;

    color: #fbbf24;

    background: rgba(245, 158, 11, 0.15);

    border: 1px solid rgba(245, 158, 11, 0.4);

    border-radius: 4px;

    padding: 2px 6px;

    letter-spacing: 0.4px;

}



.quest-claim-btn {

    animation: pulseClaim 1.8s infinite;

}



@keyframes pulseClaim {

    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4), 0 4px 12px rgba(16, 185, 129, 0.3); }

    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0), 0 6px 18px rgba(16, 185, 129, 0.6); }

}



/* ==========================================================================
   CLEAN MODAL SCROLLBARS & 720p VIEWPORT POLISH (CRAZYGAMES STANDARDS)
   ========================================================================== */

/* Universal Clean Subtle Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.45) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.35);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.7);
}

/* Modals that must never show outer native browser scrollbars */
.modal-overlay,
#levelUpModal,
#pauseModal,
.modal-overlay::-webkit-scrollbar,
#levelUpModal::-webkit-scrollbar,
#pauseModal::-webkit-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.modal-overlay::-webkit-scrollbar,
#levelUpModal::-webkit-scrollbar,
#pauseModal::-webkit-scrollbar {
    display: none !important;
}

/* Custom Styled Scrollbars inside scrollable modal bodies */
.modal-dialog,
.modal-card,
.settings-body,
.quests-body,
.compendium-body,
.war-atlas-body,
.mastery-overview-card {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.45) rgba(15, 23, 42, 0.6);
}

.modal-dialog::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.quests-body::-webkit-scrollbar,
.compendium-body::-webkit-scrollbar,
.war-atlas-body::-webkit-scrollbar,
.mastery-overview-card::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.modal-dialog::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track,
.settings-body::-webkit-scrollbar-track,
.quests-body::-webkit-scrollbar-track,
.compendium-body::-webkit-scrollbar-track,
.war-atlas-body::-webkit-scrollbar-track,
.mastery-overview-card::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
}

.modal-dialog::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb,
.quests-body::-webkit-scrollbar-thumb,
.compendium-body::-webkit-scrollbar-thumb,
.war-atlas-body::-webkit-scrollbar-thumb,
.mastery-overview-card::-webkit-scrollbar-thumb {
    background: #d97706;
    border-radius: 4px;
}


.header-icon-btn.settings-btn {
    border-color: rgba(245, 158, 11, 0.35);
}

.header-icon-btn.settings-btn svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-icon-btn.settings-btn:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}

.header-icon-btn.settings-btn:hover svg {
    transform: rotate(60deg);
}

/* ======================================================== */
/* TITLE & START SPLASH SCREEN (live Sanctuary backdrop)    */
/* ======================================================== */
body.splash-active #lobbyHeader,
body.splash-active #lobbyHUD { opacity: 0; pointer-events: none; }
#lobbyHeader, #lobbyHUD { transition: opacity 0.6s ease 0.15s; }

.game-start-splash {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #f8fafc; overflow: hidden; user-select: none;
    font-family: 'Rajdhani', system-ui, sans-serif;
    background: rgba(4, 6, 14, 0.18);
    backdrop-filter: blur(1.5px) brightness(0.85);
    -webkit-backdrop-filter: blur(1.5px) brightness(0.85);
    transition: opacity 0.55s ease;
}
.game-start-splash.splash-fade-out { opacity: 0; pointer-events: none; }
.splash-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, rgba(2,4,12,0.5) 0%, rgba(2,4,12,0.3) 45%, rgba(2,4,12,0.75) 100%);
}
.splash-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.splash-center {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(6px, 1.6vh, 14px); text-align: center; padding: 0 16px;
}
.splash-crest { width: clamp(46px, 11vh, 92px); height: clamp(46px, 11vh, 92px); filter: drop-shadow(0 0 22px rgba(245,158,11,0.6)); }
.splash-crest svg { width: 100%; height: 100%; }
.splash-title {
    margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 0.95;
    font-family: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif; font-weight: 900;
    letter-spacing: clamp(3px, 0.7vw, 8px);
    background: linear-gradient(180deg, #fff7c2 0%, #fcd34d 38%, #f59e0b 68%, #b45309 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 #451a03) drop-shadow(0 0 18px rgba(245,158,11,0.45));
}
.splash-title-top { font-size: clamp(30px, 8.2vh, 74px); }
.splash-title-bottom { font-size: clamp(38px, 10.6vh, 96px); }
.splash-tagline {
    font-weight: 700; letter-spacing: 5px; font-size: clamp(10px, 1.9vh, 15px);
    color: #fde68a; text-shadow: 0 2px 8px rgba(0,0,0,0.95); margin-bottom: clamp(6px, 2vh, 20px);
}
.btn-splash-enter {
    position: relative; overflow: hidden; cursor: pointer;
    min-width: clamp(220px, 34vh, 340px); padding: clamp(12px, 2.6vh, 22px) clamp(40px, 6vh, 64px);
    font-family: inherit; font-weight: 800; font-size: clamp(24px, 5vh, 44px); letter-spacing: 8px;
    color: #1a0f00; text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    border: 2px solid #fde68a; border-radius: 16px;
    box-shadow: 0 0 0 3px rgba(69,26,3,0.85), 0 10px 28px rgba(0,0,0,0.65), 0 0 30px rgba(245,158,11,0.45), inset 0 2px 0 rgba(255,255,255,0.45);
    animation: splashPulse 2.4s ease-in-out infinite;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.btn-splash-enter:hover { transform: scale(1.06); filter: brightness(1.1); }
.btn-splash-enter:active { transform: scale(0.97); }
.btn-splash-enter:focus-visible { outline: 3px solid #38bdf8; outline-offset: 5px; }
.enter-btn-content { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45em; }
.enter-play-icon {
    width: 0; height: 0; border-style: solid;
    border-width: 0.45em 0 0.45em 0.75em; border-color: transparent transparent transparent #1a0f00;
}
.enter-text { padding-left: 0.1em; }
.enter-btn-shine {
    position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; z-index: 1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: splashShine 3.4s ease-in-out infinite;
}
@keyframes splashShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes splashPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(69,26,3,0.85), 0 10px 28px rgba(0,0,0,0.65), 0 0 24px rgba(245,158,11,0.35), inset 0 2px 0 rgba(255,255,255,0.45); }
    50% { box-shadow: 0 0 0 3px rgba(69,26,3,0.85), 0 10px 28px rgba(0,0,0,0.65), 0 0 46px rgba(251,191,36,0.7), inset 0 2px 0 rgba(255,255,255,0.45); }
}
.splash-controls-hint {
    position: absolute; bottom: clamp(8px, 3vh, 26px); left: 0; right: 0; text-align: center; z-index: 2;
    font-size: clamp(9px, 1.5vh, 12px); font-weight: 600; letter-spacing: 1.3px; color: #94a3b8;
    text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
@media (max-height: 380px) { .splash-controls-hint, .splash-tagline { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn-splash-enter, .enter-btn-shine { animation: none; } }

/* Ultra-clean responsive scaling for compact iframe heights (<= 640px) */
@media (max-height: 640px) {
    #lobbyHeader {
        height: 48px !important;
        padding: 4px 12px !important;
    }
    .brand-text h1 {
        font-size: 13px !important;
    }
    .brand-subtitle {
        font-size: 8px !important;
    }
    .war-map-console {
        top: 54px !important;
        padding: 6px 10px !important;
        gap: 4px !important;
        width: 230px !important;
    }
    .world-map-canvas {
        max-height: 80px !important;
    }
    .floating-champion-dock {
        bottom: 5px !important;
        gap: 3px !important;
    }
    .btn-deploy-expedition {
        padding: 8px 22px !important;
        font-size: 14px !important;
    }
    .lobby-scaling-banner {
        font-size: 9px !important;
        padding: 2px 8px !important;
    }
    .dock-roster {
        padding: 4px 8px !important;
        gap: 5px !important;
        border-radius: 12px !important;
    }
    .hero-token {
        padding: 4px 6px !important;
        min-width: 70px !important;
    }
    .hero-token .token-name {
        font-size: 9.5px !important;
    }
    .hero-token .token-role {
        font-size: 7.5px !important;
    }
}

/* ==========================================================================
   👑 AAA ROGUELITE TACTICAL PAUSE DASHBOARD (LoL Swarm / Vampire Survivors)
   ========================================================================== */

.pause-dashboard-card {
    background: linear-gradient(170deg, rgba(15, 23, 42, 0.97) 0%, rgba(9, 14, 28, 0.99) 100%) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 24px 64px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 40px rgba(56, 189, 248, 0.18) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 94%;
    max-width: 500px;
    padding: 24px 28px !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #f8fafc;
    position: relative;
    overflow: hidden;
    animation: pauseModalSpring 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pauseModalSpring {
    0% {
        opacity: 0;
        transform: scale(0.90) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Background Subtle Tactical Grid Texture */
.pause-dashboard-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    opacity: 0.6;
}

/* Header */
.pause-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.pause-header-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pause-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.8));
    animation: pauseIconGlow 2s infinite ease-in-out;
}

@keyframes pauseIconGlow {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(56, 189, 248, 1)); }
}

.pause-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #f8fafc;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.pause-mission-chip {
    font-size: 11px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.35);
    padding: 5px 12px;
    border-radius: 9999px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Divider */
.pause-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    margin: 2px 0;
}

.pause-divider-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
}

.pause-divider-gem {
    width: 8px;
    height: 8px;
    background: #38bdf8;
    transform: rotate(45deg);
    box-shadow: 0 0 10px #38bdf8;
}

/* Hero Vitality Banner */
.pause-hero-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pause-hero-avatar-frame {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(15, 23, 42, 0.8));
    border: 1.5px solid rgba(56, 189, 248, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.3);
    flex-shrink: 0;
}

.pause-hero-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pause-hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pause-hero-name {
    font-size: 15px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pause-hero-lvl {
    font-size: 11px;
    font-weight: 900;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.4);
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.pause-hp-bar-outer {
    position: relative;
    height: 14px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pause-hp-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.pause-hp-bar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
}

.pause-gold-chip {
    display: flex;
    align-items: center;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    padding: 6px 12px;
    border-radius: 10px;
    flex-shrink: 0;
}

.pause-gold-val {
    font-size: 13px;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.5px;
}

/* 4-Pill Battle Intel Matrix */
.pause-stats-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;
}

.pause-stat-pill {
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pause-stat-lbl {
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.pause-stat-val {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pause-stat-val.text-cyan { color: #38bdf8; text-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
.pause-stat-val.text-amber { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); }
.pause-stat-val.text-emerald { color: #34d399; text-shadow: 0 0 10px rgba(52, 211, 153, 0.4); }
.pause-stat-val.text-purple { color: #c084fc; text-shadow: 0 0 10px rgba(192, 132, 252, 0.4); }

/* Loadout Section */
.pause-loadout-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.pause-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pause-loadout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    max-height: 130px;
    overflow-y: auto;
    padding-right: 4px;
}

.pause-loadout-grid::-webkit-scrollbar {
    width: 4px;
}
.pause-loadout-grid::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.3);
    border-radius: 4px;
}

.pause-wpn-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.pause-wpn-chip.is-evolved {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(220, 38, 38, 0.22));
    border: 1.5px solid rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.pause-wpn-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.pause-wpn-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pause-wpn-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pause-wpn-badge {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.pause-wpn-badge.lvl {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

.pause-wpn-badge.evo {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.25);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
    animation: evoBadgePulse 1.8s infinite ease-in-out;
}

@keyframes evoBadgePulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

.pause-no-weapons {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
    grid-column: 1 / -1;
    padding: 8px;
    text-align: center;
}

/* Quick Control Toggles */
.pause-toggles-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    position: relative;
    z-index: 1;
}

.pause-toggle-btn {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pause-toggle-btn:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(56, 189, 248, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Actions Group */
.pause-actions-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}

.pause-btn-resume {
    position: relative;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 
        0 6px 20px rgba(37, 99, 235, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pause-btn-resume:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 8px 28px rgba(37, 99, 235, 0.7),
        0 0 20px rgba(56, 189, 248, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pause-btn-resume:active {
    transform: translateY(1px);
}

.pause-kbd-hint {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
}

.pause-sub-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pause-btn-sub {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pause-btn-sub:hover {
    background: rgba(51, 65, 85, 0.95);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pause-btn-danger {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: #f87171;
    cursor: pointer;
    transition: all 0.18s ease;
}

.pause-btn-danger:hover {
    background: rgba(127, 29, 29, 0.4);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
    .pause-dashboard-card {
        padding: 18px 20px !important;
        gap: 12px;
    }
    .pause-title {
        font-size: 17px;
    }
    .pause-stats-matrix {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .pause-stat-pill {
        padding: 8px 10px;
    }
    .pause-stat-val {
        font-size: 15px;
    }
    .pause-btn-resume {
        padding: 12px 16px;
        font-size: 14px;
    }
}


/* Multiplayer Tactical Break, Ready-Check & Vote Kick Styles */
.coop-pause-overlay {
    pointer-events: auto;
}
.coop-pause-box {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.coop-break-roster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.coop-ready-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}
.coop-ready-pill.is-ready {
    border-color: rgba(52, 211, 153, 0.65);
    color: #34d399;
    background: rgba(6, 78, 59, 0.45);
}
.coop-ready-pill.is-waiting {
    border-color: rgba(251, 191, 36, 0.55);
    color: #fbbf24;
    background: rgba(120, 53, 15, 0.35);
}
.coop-break-ready-btn {
    margin-top: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1.5px solid #34d399;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
    transition: all 0.18s ease;
}
.coop-break-ready-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.65);
}
.coop-break-ready-btn.already-ready {
    background: rgba(6, 78, 59, 0.8);
    border-color: rgba(52, 211, 153, 0.6);
    color: #a7f3d0;
}

.coop-vote-banner {
    position: fixed;
    top: 86px;
    right: 20px;
    z-index: 9600;
    width: 330px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.96) 0%, rgba(9, 13, 24, 0.98) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.65);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 18px rgba(245, 158, 11, 0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}
.coop-vote-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.coop-vote-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.coop-vote-titles {
    flex: 1;
    min-width: 0;
}
.coop-vote-title {
    font-size: 12px;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.coop-vote-desc {
    font-size: 11px;
    color: #e2e8f0;
    margin-top: 2px;
}
.coop-vote-tally {
    font-size: 11.5px;
    font-weight: 900;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.4);
    padding: 3px 8px;
    border-radius: 8px;
}
.coop-vote-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.coop-vote-btn {
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 900;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.coop-vote-btn.yes {
    background: rgba(16, 185, 129, 0.22);
    border-color: rgba(52, 211, 153, 0.6);
    color: #34d399;
}
.coop-vote-btn.yes:hover {
    background: rgba(16, 185, 129, 0.4);
    color: #ffffff;
}
.coop-vote-btn.no {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(248, 113, 113, 0.55);
    color: #f87171;
}
.coop-vote-btn.no:hover {
    background: rgba(239, 68, 68, 0.38);
    color: #ffffff;
}

.pause-coop-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    position: relative;
    z-index: 1;
}
.pause-coop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pause-coop-mode-pill {
    font-size: 9.5px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
}
.pause-coop-mode-pill.live-warning {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fbbf24;
}
.pause-coop-break-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
}
.pause-coop-break-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pause-coop-break-info strong {
    font-size: 12px;
    color: #f8fafc;
}
.pause-coop-break-info span {
    font-size: 10.5px;
    color: #94a3b8;
}
.pause-btn-tactical-break {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border: 1px solid #fbbf24;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}
.pause-btn-tactical-break:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45);
}
.pause-btn-tactical-break.ready-mode {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: #34d399;
}
.pause-squad-kick-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pause-squad-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.pause-squad-member-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pause-squad-member-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pause-squad-member-tag {
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}
.pause-squad-member-tag.ready {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
.pause-btn-kick-member {
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pause-btn-kick-member:hover {
    background: rgba(220, 38, 38, 0.65);
    color: #ffffff;
}

/* Compact Pause Dashboard Sizing with Co-Op Tactical Controls & Mobile Perfection */
#pauseModal .pause-dashboard-card {
    max-width: 540px !important;
    max-height: 94vh !important;
    padding: 14px 18px !important;
    gap: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
#pauseModal .pause-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
}
#pauseModal .pause-header-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
#pauseModal .pause-title {
    font-size: 15px !important;
    letter-spacing: 1.2px !important;
    white-space: nowrap !important;
}
#pauseModal .pause-mission-chip {
    font-size: 10px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    max-width: 54% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
}
#pauseModal .pause-stat-card {
    padding: 7px 10px !important;
}
#pauseModal .pause-stat-val {
    font-size: 16px !important;
}
#pauseModal .pause-hero-banner {
    padding: 8px 12px !important;
}
#pauseModal .pause-toggles-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}
#pauseModal .pause-toggle-btn {
    font-size: 10.5px !important;
    padding: 8px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
}

/* Mobile & Small Screen Responsiveness for Pause Dashboard */
@media (max-width: 640px) {
    #pauseModal .pause-dashboard-card {
        width: 96% !important;
        max-width: 440px !important;
        padding: 12px 14px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }
    #pauseModal .pause-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    #pauseModal .pause-title {
        font-size: 14px !important;
    }
    #pauseModal .pause-mission-chip {
        font-size: 9px !important;
        padding: 3px 8px !important;
        max-width: 100% !important;
    }
    #pauseModal .pause-hero-banner {
        padding: 7px 10px !important;
        gap: 8px !important;
    }
    #pauseModal .pause-hero-avatar-frame {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
    #pauseModal .pause-toggles-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    #pauseModal .pause-toggle-btn {
        font-size: 9px !important;
        padding: 6px 2px !important;
    }
    #pauseModal .pause-actions-group {
        gap: 6px !important;
    }
    #pauseModal .pause-btn-resume {
        padding: 10px 14px !important;
    }
    #pauseModal .pause-btn-resume .pause-btn-text {
        font-size: 13px !important;
    }
    #pauseModal .pause-sub-actions {
        gap: 6px !important;
    }
    #pauseModal .pause-btn-sub {
        padding: 7px 10px !important;
        font-size: 10.5px !important;
    }
}


/* ========================================================================= */
/* 📱 GALAXY S25 & SMARTPHONE MOBILE PERFECTION (LANDSCAPE & PORTRAIT)       */
/* ========================================================================= */

/* 1. Virtual Joystick Viewport-Relative Fix (Eliminates +55vh offset & off-screen bug) */
#mobileJoystickZone.joystick-zone {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 52vw !important;
    height: 100vh !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

#joystickBase.joystick-base {
    position: fixed !important;
    left: 68px;
    top: calc(100vh - 64px);
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.35) 0%, rgba(30, 41, 59, 0.65) 100%) !important;
    border: 2px dashed rgba(56, 189, 248, 0.55) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.25), inset 0 0 12px rgba(56, 189, 248, 0.2) !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    opacity: 0.45;
    pointer-events: none !important;
    backdrop-filter: blur(4px) !important;
    transition: opacity 0.15s ease !important;
}

#joystickBase.joystick-base.active {
    opacity: 1 !important;
    border-style: solid !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.45), inset 0 0 14px rgba(56, 189, 248, 0.3) !important;
}

#joystickThumb.joystick-thumb {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #38bdf8 0%, #1e40af 100%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 14px #38bdf8 !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
}

/* 2. Touch Device Deduplication (Prevents duplicate AIM/Q/E buttons overlapping HUD) */
body.touch-device #btnToggleAim {
    display: none !important;
}

body.touch-device #hudInventory .champion-hud-portrait,
body.touch-device #hudInventory .skills-group {
    display: none !important;
}

/* 3. Smartphone Landscape Mode (e.g., Galaxy S25 852x384 / 915x412) */
@media (max-height: 550px) {
    /* Compact Lobby Top Header */
    #lobbyHeader {
        height: 38px !important;
        padding: 2px 10px !important;
        gap: 6px !important;
    }
    .heroic-logo-wrap {
        width: 26px !important;
        height: 26px !important;
    }
    .brand-text h1 {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }
    .brand-subtitle,
    .beta-pill,
    .btn-copy .copy-text,
    #privacyLabel,
    .anvil-cta-badge,
    .user-info-text {
        display: none !important;
    }
    .room-pill,
    .privacy-pill,
    .btn-room-browser,
    .btn-header-action,
    .header-anvil-pill,
    .header-settings-btn {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
    }
    .user-profile-pill {
        padding: 2px 6px !important;
        height: 26px !important;
    }
    .user-avatar-circle {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    /* Compact Left Tome Drawer Tab */
    .tome-drawer-tab {
        top: 46px !important;
        padding: 6px 5px !important;
        gap: 2px !important;
    }
    .tome-tab-icon {
        font-size: 13px !important;
    }
    .tome-tab-text {
        font-size: 8px !important;
    }

    /* Compact Right War Map Console (Fits 100% inside 384px height without clipping) */
    .war-map-console {
        top: 42px !important;
        right: 8px !important;
        width: 205px !important;
        max-height: calc(100vh - 46px) !important;
        padding: 6px 8px !important;
        gap: 3px !important;
        border-radius: 10px !important;
        overflow-y: auto !important;
    }
    .console-act-tag {
        font-size: 8px !important;
        padding: 1px 6px !important;
    }
    .act-step-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 9px !important;
    }
    .console-biome-title {
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.15 !important;
    }
    .sector-intel-grid {
        gap: 4px !important;
    }
    .intel-box {
        padding: 3px 5px !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }
    .intel-icon {
        font-size: 11px !important;
    }
    .intel-meta small {
        font-size: 6.5px !important;
    }
    .intel-meta strong {
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }
    .sector-records-strip {
        gap: 4px !important;
        padding: 2px 0 !important;
    }
    .record-chip {
        padding: 2px 4px !important;
        gap: 3px !important;
    }
    .record-chip small {
        font-size: 6.5px !important;
    }
    .record-chip strong {
        font-size: 9px !important;
    }
    .rank-grade-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
    }
    .difficulty-selector-block {
        padding-top: 2px !important;
        gap: 3px !important;
    }
    .diff-header-row {
        margin-bottom: 1px !important;
    }
    .diff-block-label {
        font-size: 7.5px !important;
    }
    .diff-active-badge,
    #lobbyActiveDiffBadge {
        display: none !important;
    }
    .difficulty-pills-grid {
        gap: 3px !important;
    }
    .diff-pill-btn {
        padding: 3px 2px !important;
        min-height: 26px !important;
        border-radius: 6px !important;
        gap: 1px !important;
    }
    .diff-pill-icon {
        font-size: 10px !important;
    }
    .diff-pill-name {
        font-size: 7px !important;
    }
    .btn-open-atlas-modal {
        padding: 4px 6px !important;
        margin-top: 1px !important;
        min-height: 24px !important;
        border-radius: 6px !important;
    }
    .atlas-btn-icon {
        font-size: 11px !important;
    }
    .atlas-btn-label strong {
        font-size: 8.5px !important;
    }
    .atlas-btn-label small {
        display: none !important;
    }

    /* Compact Bottom Champion Dock (Centered in open cathedral space left of War Console) */
    .floating-champion-dock {
        left: calc((100vw - 210px) / 2) !important;
        transform: translateX(-50%) !important;
        bottom: 4px !important;
        gap: 2px !important;
        width: auto !important;
        max-width: calc(100vw - 226px) !important;
    }
    .scaling-pill {
        font-size: 8px !important;
        padding: 1px 8px !important;
    }
    .btn-deploy-expedition {
        padding: 4px 16px !important;
        font-size: 11px !important;
        min-height: 26px !important;
        border-radius: 999px !important;
        letter-spacing: 0.8px !important;
    }
    .dock-roster {
        padding: 3px 5px !important;
        gap: 4px !important;
        border-radius: 10px !important;
    }
    .hero-token {
        min-width: 56px !important;
        min-height: 36px !important;
        padding: 2px 5px !important;
        gap: 1px !important;
        border-radius: 7px !important;
    }
    .token-avatar {
        width: 18px !important;
        height: 18px !important;
    }
    .token-name {
        font-size: 8px !important;
    }
    .token-role {
        display: none !important;
    }

    /* Compact In-Game Top HUD (Landscape Phone) */
    #hudTop {
        top: 4px !important;
        left: 6px !important;
        right: 6px !important;
        padding: 0 !important;
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    .hud-top-left {
        min-width: 140px !important;
        max-width: 170px !important;
        width: 165px !important;
        gap: 3px !important;
    }
    .hextech-panel {
        padding: 3px 6px !important;
        gap: 5px !important;
        border-radius: 8px !important;
    }
    .level-crest,
    .hp-crest,
    .crest-shield {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }
    .crest-lvl-tag {
        font-size: 5.5px !important;
    }
    .crest-level-num {
        font-size: 10.5px !important;
    }
    .crest-diamond {
        width: 16px !important;
        height: 16px !important;
    }
    .crest-level {
        font-size: 9px !important;
    }
    .bar-sub-label,
    .bar-stat-val {
        font-size: 8px !important;
    }
    .hextech-bar {
        height: 5px !important;
    }
    .hud-top-center {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
    }
    .timer-box {
        padding: 2px 9px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    .hud-top-right {
        gap: 4px !important;
        align-items: center !important;
    }
    .stat-pill {
        padding: 2px 6px !important;
        font-size: 10px !important;
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 7px !important;
    }
    .hud-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }

    /* Compact In-Game Bottom Inventory (Centered between Joystick & Action Buttons) */
    #hudInventory {
        bottom: 4px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 3px 8px !important;
        gap: 8px !important;
        width: max-content !important;
        border-radius: 10px !important;
    }
    .champion-hud-portrait,
    .skills-group {
        display: none !important;
    }
    .slot-label {
        font-size: 6.5px !important;
        margin-bottom: 1px !important;
    }
    .slots-row {
        gap: 3px !important;
    }
    .item-slot,
    .skill-slot {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
    }

    /* Compact Bottom-Right Action Buttons (AUTO, Q, E) */
    .action-buttons-zone {
        bottom: 8px !important;
        right: 10px !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    .touch-action-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .touch-icon {
        font-size: 18px !important;
    }
}

/* 4. Smartphone Portrait Mode (e.g., Galaxy S25 412x915 / 384x854) */
@media (max-width: 768px) and (min-height: 551px) {
    /*Lobby Portrait Layout: War Console at top-right/center, Dock at bottom*/
    .tome-drawer-tab {
        top: 56px !important;
        padding: 6px 5px !important;
    }
    .war-map-console {
        top: 54px !important;
        right: 8px !important;
        left: auto !important;
        width: 215px !important;
        padding: 8px 10px !important;
        gap: 4px !important;
    }
    .console-biome-title {
        font-size: 13px !important;
    }
    #lobbyActiveDiffBadge,
    .atlas-btn-label small {
        display: none !important;
    }
    .diff-pill-btn {
        min-height: 30px !important;
        padding: 4px 2px !important;
    }
    .floating-champion-dock {
        bottom: 8px !important;
        width: 96vw !important;
        gap: 4px !important;
    }
    .btn-deploy-expedition {
        padding: 8px 20px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
    .dock-roster {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 4px 6px !important;
        gap: 4px !important;
    }
    .hero-token {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 4px 2px !important;
        min-height: 46px !important;
    }
    .token-name {
        font-size: 8.5px !important;
    }
    .token-role {
        display: none !important;
    }

    /* In-Game Portrait HUD */
    #hudTop {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .hud-top-left {
        width: 165px !important;
        min-width: 150px !important;
        max-width: 175px !important;
        gap: 4px !important;
    }
    .hextech-panel {
        padding: 3px 6px !important;
        gap: 5px !important;
    }
    .level-crest,
    .hp-crest,
    .crest-shield {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }
    .crest-level-num {
        font-size: 11px !important;
    }
    .crest-diamond {
        width: 18px !important;
        height: 18px !important;
    }
    .bar-sub-label,
    .bar-stat-val {
        font-size: 8.5px !important;
    }
    .hud-top-center {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        order: 0 !important;
    }
    .timer-box {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }
    .hud-top-right {
        gap: 4px !important;
    }
    .stat-pill {
        padding: 2px 6px !important;
        font-size: 10px !important;
        height: 24px !important;
    }
    .hud-btn {
        width: 28px !important;
        height: 28px !important;
    }
    #hudInventory {
        bottom: 6px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 4px 8px !important;
        gap: 8px !important;
        width: max-content !important;
    }
    .item-slot {
        width: 26px !important;
        height: 26px !important;
    }
    #joystickBase.joystick-base {
        left: 64px;
        top: calc(100vh - 115px);
    }
    .action-buttons-zone {
        bottom: 64px !important;
        right: 12px !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .touch-action-btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* 5. Portrait Splash Title & Compact Portrait War Console Pill Icons */
@media (max-width: 500px) {
    .splash-title {
        font-size: clamp(32px, 11vw, 46px) !important;
        line-height: 1.05 !important;
    }
    .splash-tagline {
        font-size: 10px !important;
        letter-spacing: 3px !important;
    }
    .btn-splash-enter {
        width: 210px !important;
        height: 54px !important;
    }
}

@media (max-width: 768px) and (min-height: 551px) {
    .war-map-console {
        width: auto !important;
    }
    .war-map-console .diff-pill-name {
        display: none !important;
    }
}