:root {
    color-scheme: light;
}

body {
    font-family: "Inter", "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.font-black,
.font-extrabold {
    font-family: "Orbitron", "Inter", sans-serif;
}

.image-render-pixel {
    image-rendering: pixelated;
}

.tier-chip {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.modal-open {
    overflow: hidden;
}

.icon-slot,
.rank-slot {
    position: relative;
    overflow: hidden;
}

.icon-slot::after,
.rank-slot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: inherit;
}

.mode-button.active {
    background: linear-gradient(135deg, #ff0000, #991b1b);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(255, 0, 0, 0.2);
}

.mode-button img,
.icon-slot img,
.rank-slot img {
    display: block;
}

.rank-animated {
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rank-shift 6s linear infinite;
}

.rank-rookie {
    background-image: linear-gradient(90deg, #e2e8f0, #94a3b8, #cbd5e1, #e2e8f0);
}

.rank-combat-novice {
    background-image: linear-gradient(90deg, #f5d0fe, #c084fc, #a855f7, #f5d0fe);
}

.rank-combat-cadet {
    background-image: linear-gradient(90deg, #dcfce7, #4ade80, #22c55e, #dcfce7);
}

.rank-combat-specialist {
    background-image: linear-gradient(90deg, #dbeafe, #38bdf8, #0ea5e9, #dbeafe);
}

.rank-combat-ace {
    background-image: linear-gradient(90deg, #fef3c7, #f59e0b, #f97316, #fef3c7);
}

.rank-combat-master {
    background-image: linear-gradient(90deg, #fee2e2, #ef4444, #dc2626, #fee2e2);
}

.rank-combat-grandmaster {
    background-image: linear-gradient(90deg, #ffedd5, #fb923c, #ef4444, #fde68a, #ffedd5);
}

.rank-unranked {
    background-image: linear-gradient(90deg, #cbd5e1, #64748b, #94a3b8, #cbd5e1);
}

@keyframes rank-shift {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.tier-rail {
    position: relative;
}

.tier-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff0000, #7f1d1d);
}