/* ═══════════════════════════════════════════════════════════

   SHOWCASE REDESIGN — Apple HUD Philosophy

   Premium tank class selector with iOS-inspired depth

   ═══════════════════════════════════════════════════════════ */



/* Mouse-position spotlight and ::after catch-light on mode cards

   are defined in css/combat-scenarios.css (loaded after this file) */





/* ── HUD Corner Brackets ───────────────────────────────── */

@keyframes hud-neon-pulse {

    0%, 100% { filter: drop-shadow(0 0  3px rgba(241,201,139,0.55))

                       drop-shadow(0 0 10px rgba(241,201,139,0.30)); }

    50%       { filter: drop-shadow(0 0  3px rgba(255,230,160,0.95))

                       drop-shadow(0 0 12px rgba(241,201,139,0.70))

                       drop-shadow(0 0 28px rgba(241,201,139,0.30)); }

}



.hud-corner {

    position: absolute;

    width: clamp(18px, 1.5vw + 8px, 48px);

    height: clamp(18px, 1.5vw + 8px, 48px);

    z-index: 3;

    pointer-events: none;

    opacity: 0.45;

    transition: opacity 0.5s ease;

    filter: drop-shadow(0 0 3px rgba(241,201,139,0.45))

            drop-shadow(0 0 8px rgba(241,201,139,0.20));

}



.showcase:hover .hud-corner {

    opacity: 1.0;

    animation: hud-neon-pulse 2.5s ease-in-out infinite;

}



.hud-tl {

    top: clamp(14px, 1.5vw + 6px, 40px);

    left: clamp(14px, 1.5vw + 6px, 40px);

    border-top: 1.5px solid var(--thruster);

    border-left: 1.5px solid var(--thruster);

}



.hud-tr {

    top: clamp(14px, 1.5vw + 6px, 40px);

    right: clamp(14px, 1.5vw + 6px, 40px);

    border-top: 1.5px solid var(--thruster);

    border-right: 1.5px solid var(--thruster);

}



.hud-bl {

    bottom: clamp(14px, 1.5vw + 6px, 40px);

    left: clamp(14px, 1.5vw + 6px, 40px);

    border-bottom: 1.5px solid var(--thruster);

    border-left: 1.5px solid var(--thruster);

}



.hud-br {

    bottom: clamp(14px, 1.5vw + 6px, 40px);

    right: clamp(14px, 1.5vw + 6px, 40px);

    border-bottom: 1.5px solid var(--thruster);

    border-right: 1.5px solid var(--thruster);

}



/* Corner bracket micro-indicator dots */

.hud-tl::after,

.hud-tr::after,

.hud-bl::after,

.hud-br::after {

    content: '';

    display: block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: var(--thruster);

    opacity: 0.6;

}



.hud-tl::after {

    position: absolute;

    top: -3px;

    left: -3px;

}



.hud-tr::after {

    position: absolute;

    top: -3px;

    right: -3px;

}



.hud-bl::after {

    position: absolute;

    bottom: -3px;

    left: -3px;

}



.hud-br::after {

    position: absolute;

    bottom: -3px;

    right: -3px;

}



/* ── Ghost Name Watermark ──────────────────────────────── */

/*

 * Ghost text: static glow (rasterised once), opacity via inline style.

 * transition handles fade in/out — no keyframe animations, no CSS classes.

 */

.showcase-ghost-name {

    position: absolute;

    right: clamp(16px, 3vw, 60px);

    top: 50%;

    transform: translateY(-61.8%);

    font-family: var(--font-raj);

    font-weight: 700;

    font-size: clamp(2.6rem, 7vw, 9.5rem);

    letter-spacing: -0.04em;

    color: transparent;

    /* Sharp neon edge glow — static, rasterised once */

    -webkit-text-stroke: clamp(0.8px, 0.1vw + 0.5px, 2.5px) rgba(255, 235, 175, 0.55);

    text-shadow:

        0 0  3px rgba(255, 255, 255, 0.28),

        0 0  8px rgba(255, 235, 175, 0.22),

        0 0 18px rgba(241, 201, 139, 0.10);

    text-transform: uppercase;

    pointer-events: none;

    z-index: 0;

    user-select: none;

    line-height: 1.1;

    white-space: nowrap;

    overflow: visible;

    max-width: 50%;

    text-align: right;

    transition: opacity 1s ease;

    will-change: opacity;

}



/* ── Stats Panel — Complete Redesign ──────────────────── */

.showcase-stats {

    position: absolute;

    left: clamp(16px, 3vw, 56px);

    bottom: calc(90px + var(--s-34));

    width: clamp(200px, 18vw + 40px, 600px);

    max-width: calc(100% - clamp(32px, 6vw, 112px));

    padding: 0;

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

    backdrop-filter: blur(24px) saturate(160%);

    -webkit-backdrop-filter: blur(24px) saturate(160%);

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

    border-radius: clamp(12px, 1vw + 4px, 28px);

    z-index: 3;

    overflow: hidden;

    transition: opacity 0.35s ease, transform 0.3s ease;

    box-shadow:

        0 0 0 1px rgba(0, 0, 0, 0.4),

        0 24px 48px rgba(0, 0, 0, 0.55),

        inset 0 1px 0 rgba(255, 255, 255, 0.06);

}



/* Top accent gradient bar */

.stats-top-accent {

    height: 3px;

    background: linear-gradient(90deg,

            var(--thruster) 0%,

            rgba(140, 165, 211, 0.7) 60%,

            transparent 100%);

    opacity: 0.85;

}



/* Class identity block */

.stats-identity {

    padding: clamp(10px, 1vw + 4px, 28px) clamp(12px, 1.2vw + 4px, 32px) clamp(8px, 0.8vw + 2px, 22px);

}



.stats-class-badge {

    display: inline-flex;

    align-items: center;

    font-family: var(--font-mono);

    font-size: clamp(0.45rem, 0.3rem + 0.2vw, 0.75rem);

    letter-spacing: 0.22em;

    color: var(--thruster);

    background: rgba(241, 201, 139, 0.08);

    border: 1px solid rgba(241, 201, 139, 0.2);

    padding: clamp(2px, 0.2vw, 5px) clamp(6px, 0.6vw, 14px);

    border-radius: 20px;

    text-transform: uppercase;

    margin-bottom: clamp(6px, 0.5vw, 14px);

    transition: background 0.3s, border-color 0.3s;

}



.stats-hull-name {

    font-family: var(--font-raj);

    font-size: clamp(1rem, 0.8rem + 0.8vw, 2.4rem);

    font-weight: 700;

    color: var(--white);

    letter-spacing: 0.06em;

    line-height: 1;

    margin-bottom: clamp(3px, 0.3vw, 8px);

    text-transform: uppercase;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: color 0.4s ease;

}



.stats-tagline {

    font-family: var(--font-mono);

    font-size: clamp(0.4rem, 0.3rem + 0.2vw, 0.85rem);

    color: var(--steel-gray);

    opacity: 0.5;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin: 0;

}



/* Glass divider */

.stats-divider {

    height: 1px;

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%);

    margin: 0 clamp(12px, 1.2vw + 4px, 32px);

}



/* Description */

.showcase-stats .detail-desc {

    padding: clamp(8px, 0.7vw + 2px, 18px) clamp(12px, 1.2vw + 4px, 32px) clamp(4px, 0.4vw + 1px, 12px);

    font-size: clamp(0.55rem, 0.4rem + 0.3vw, 1.1rem);

    color: var(--steel-gray);

    font-weight: 300;

    line-height: 1.6;

    margin: 0;

    /* Removed line clamps so all the description text is visible */

    overflow: visible;

    display: block;

}



/* Stat list — horizontal rows */

.showcase-stats .stat-list {

    padding: clamp(4px, 0.4vw, 10px) clamp(12px, 1.2vw + 4px, 32px) clamp(12px, 1.2vw + 4px, 32px);

    gap: clamp(6px, 0.6vw + 2px, 18px);

}



.showcase-stats .stat-row {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

}



/* Stat header no longer needed — remove column */

.stat-header {

    display: contents;

    /* dissolves into flex flow of .stat-row */

}



.showcase-stats .stat-label-text {

    font-family: var(--font-mono);

    font-size: clamp(0.42rem, 0.32rem + 0.2vw, 0.75rem);

    letter-spacing: 0.14em;

    color: var(--steel-gray);

    opacity: 0.5;

    text-transform: uppercase;

    width: clamp(4rem, 3.5vw + 1.5rem, 7rem);

    flex-shrink: 0;

}



.showcase-stats .stat-track {

    flex: 1;

    height: 3px;

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

    border-radius: 2px;

    overflow: hidden;

}



.showcase-stats .stat-bar {

    height: 100%;

    width: 0%;

    border-radius: 2px;

    background: linear-gradient(90deg, rgba(241, 201, 139, 0.75) 0%, var(--thruster) 100%);

    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);

    box-shadow: 0 0 8px rgba(241, 201, 139, 0.25);

}



.showcase-stats .stat-val {

    font-family: var(--font-mono);

    font-size: clamp(0.45rem, 0.35rem + 0.2vw, 0.75rem);

    color: var(--cyan);

    opacity: 0.55;

    width: clamp(1.5rem, 1.2rem + 0.4vw, 3rem);

    text-align: right;

    flex-shrink: 0;

    transition: color 0.3s ease, opacity 0.3s ease;

}



/* ── Segmented Pill Selector — Redesign ──────────────── */

.showcase-bottom {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding-bottom: 4px;

}



.class-selector {

    display: inline-flex;

    gap: clamp(2px, 0.2vw, 5px);

    background: rgba(5, 5, 10, 0.65);

    backdrop-filter: blur(20px) saturate(150%);

    -webkit-backdrop-filter: blur(20px) saturate(150%);

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

    border-radius: var(--radius-lg, 18px);

    padding: clamp(3px, 0.3vw, 8px);

    box-shadow:

        0 0 0 1px rgba(0, 0, 0, 0.5),

        0 16px 40px rgba(0, 0, 0, 0.5),

        inset 0 1px 0 rgba(255, 255, 255, 0.05);

}



.class-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.1rem;

    padding: clamp(8px, 0.6vw + 2px, 20px) clamp(16px, 1.2vw + 6px, 56px);

    background: transparent;

    border: none;

    border-radius: var(--radius-md, 14px);

    cursor: pointer;

    position: relative;

    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;

    color: rgba(255, 255, 255, 0.4);

    text-align: center;

    min-width: clamp(80px, 6vw + 30px, 180px);

}



.class-card::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 14px;

    background: transparent;

    transition: background 0.2s ease;

}



.class-card:hover {

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

    color: rgba(255, 255, 255, 0.75);

    transform: translateY(-1px);

}



.class-card:active {

    transform: scale(0.97);

}



.class-card.active {

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

    color: var(--white);

    transform: translateY(0);

    box-shadow:

        0 1px 0 rgba(255, 255, 255, 0.1) inset,

        0 4px 16px rgba(0, 0, 0, 0.3);

}



.card-type {

    font-family: var(--font-mono);

    font-size: clamp(0.38rem, 0.25rem + 0.2vw, 0.65rem);

    letter-spacing: 0.2em;

    text-transform: uppercase;

    opacity: 0.5;

    line-height: 1;

}



.class-card.active .card-type {

    color: var(--thruster);

    opacity: 1;

}



.card-name {

    font-family: var(--font-raj);

    font-size: clamp(0.75rem, 0.6rem + 0.5vw, 1.6rem);

    font-weight: 700;

    letter-spacing: 0.06em;

    color: inherit;

    line-height: 1;

}



.class-card.active .card-name {

    color: var(--white);

}



/* Active indicator — slim gold rule */

.card-indicator {

    position: absolute;

    bottom: 4px;

    left: 20%;

    right: 20%;

    height: 2px;

    background: linear-gradient(90deg, transparent, var(--thruster), transparent);

    border-radius: 1px;

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

}



.class-card.active .card-indicator {

    transform: scaleX(1);

}



/* ═══════════════════════════════════════════════════════════

   COMBAT SCENARIOS REDESIGN — Premium Apple-Inspired Cards

   ═══════════════════════════════════════════════════════════ */



.modes-subtitle {

    font-size: var(--fs-sm);

    color: var(--steel-gray);

    opacity: 0.6;

    font-weight: 300;

    max-width: 48ch;

    margin: var(--s-8) auto 0;

    line-height: 1.7;

}



/* Main grid: hero card left, right column of 2 cards */

.modes-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: clamp(8px, 1vw + 2px, 24px);

    margin-top: var(--s-55);

}



.modes-col {

    display: flex;

    flex-direction: column;

    gap: clamp(8px, 1vw + 2px, 24px);

}



/* ── Shared card base — glass recipe matches .phil-diagram / .ammo-right ── */

.mode-card {

    position: relative;

    border-radius: 20px;

    overflow: hidden;

    cursor: default;

    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),

                box-shadow 0.4s ease,

                border-color 0.4s ease;

    /* DO NOT put an opaque background here — glass is managed in liquid-glass.css */

}



.mode-card:hover {

    transform: translateY(-4px) scale(1.01);

}



/* Hero card (5v5) */

.mode-card--hero {

    min-height: clamp(260px, 25vw + 80px, 800px);

    display: flex;

    align-items: stretch;

}



/* Small cards (1v1, 3v3) */

.mode-card--sm {

    flex: 1;

    min-height: clamp(140px, 10vw + 50px, 380px);

    display: flex;

    align-items: stretch;

}



/* Wide FFA banner */

.mode-card--wide {

    margin-top: clamp(8px, 1vw + 2px, 24px);

    min-height: clamp(90px, 6vw + 30px, 220px);

}



/* ═══════════════════════════════════════════════════════════

   CARD ANIMATIONS

   ═══════════════════════════════════════════════════════════ */



/* Shared animation container */

.mode-anim {

    position: absolute;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 1;

}



/* ── 5v5 WAR — Tactical Radar Sweep ────────────────────── */

.mode-anim--war {

    opacity: 0.85;

    transform: perspective(800px) rotateX(25deg) rotateY(-10deg) scale(1.1);

    transform-style: preserve-3d;

}



.radar-ring {

    position: absolute;

    top: 50%;

    left: 45%;

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

    border-radius: 50%;

    border: 1px solid rgba(241, 201, 139, 0.15);

}



.radar-ring.r1 {

    width: 120px;

    height: 120px;

    border-width: 1px;

}



.radar-ring.r2 {

    width: 240px;

    height: 240px;

    border-width: 1px;

    border-style: dashed;

    opacity: 0.5;

}



.radar-ring.r3 {

    width: 360px;

    height: 360px;

    border-width: 2px;

    border-color: rgba(241, 201, 139, 0.08);

}



.radar-origin {

    position: absolute;

    top: 50%;

    left: 45%;

    width: 6px;

    height: 6px;

    background: var(--thruster);

    border-radius: 50%;

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

    box-shadow: 0 0 12px var(--thruster), 0 0 0 4px rgba(241, 201, 139, 0.2);

}



.radar-sweep {

    position: absolute;

    top: 50%;

    left: 45%;

    width: 180px;

    height: 180px;

    border-radius: 100% 0 0 0;

    transform-origin: bottom right;

    background: linear-gradient(to bottom right, rgba(241, 201, 139, 0.4) 0%, transparent 60%);

    animation: radarSpin 4s linear infinite;

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

    pointer-events: none;

    mask-image: radial-gradient(circle at bottom right, black 10%, transparent 80%);

    -webkit-mask-image: radial-gradient(circle at bottom right, black 10%, transparent 80%);

}



.radar-crosshair {

    position: absolute;

    background: rgba(241, 201, 139, 0.1);

}



.radar-crosshair.h {

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

}



.radar-crosshair.v {

    left: 45%;

    top: 0;

    bottom: 0;

    width: 1px;

}



.radar-blip {

    position: absolute;

    width: 4px;

    height: 4px;

    background: var(--thruster);

    border-radius: 50%;

    box-shadow: 0 0 8px var(--thruster);

    opacity: 0;

}



.radar-blip.enemy {

    background: var(--cyan);

    box-shadow: 0 0 8px var(--cyan);

}



/* Friendly blips (Gold) */

.radar-blip.b1 {

    top: 38%;

    left: 32%;

    animation: blipPulse 4s 0.2s infinite;

}



.radar-blip.b2 {

    top: 45%;

    left: 24%;

    animation: blipPulse 4s 0.5s infinite;

}



.radar-blip.b3 {

    top: 58%;

    left: 36%;

    animation: blipPulse 4s 1.1s infinite;

}



.radar-blip.b4 {

    top: 62%;

    left: 22%;

    animation: blipPulse 4s 1.4s infinite;

}



.radar-blip.b5 {

    top: 50%;

    left: 41%;

    animation: blipPulse 4s 0.8s infinite;

}



/* Enemy blips (Cyan) */

.radar-blip.b6 {

    top: 28%;

    left: 56%;

    animation: blipPulse 4s 2.2s infinite;

}



.radar-blip.b7 {

    top: 35%;

    left: 70%;

    animation: blipPulse 4s 2.5s infinite;

}



.radar-blip.b8 {

    top: 48%;

    left: 62%;

    animation: blipPulse 4s 3.1s infinite;

}



.radar-blip.b9 {

    top: 65%;

    left: 58%;

    animation: blipPulse 4s 3.4s infinite;

}



.radar-blip.b10 {

    top: 55%;

    left: 78%;

    animation: blipPulse 4s 3.8s infinite;

}



@keyframes radarSpin {

    from {

        transform: translate(-100%, -100%) rotate(0deg);

    }



    to {

        transform: translate(-100%, -100%) rotate(360deg);

    }

}



@keyframes blipPulse {



    0%,

    10% {

        opacity: 0;

        transform: scale(0.5);

    }



    15% {

        opacity: 1;

        transform: scale(1.5);

        box-shadow: 0 0 16px inherit, 0 0 0 6px rgba(255, 255, 255, 0.4);

    }



    30% {

        opacity: 0.6;

        transform: scale(1);

        box-shadow: 0 0 8px inherit;

    }



    80%,

    100% {

        opacity: 0;

    }

}





/* ── 1v1 DUEL — Energy Beam Charge & Fire ─────────────── */

.mode-anim--duel {

    opacity: 0.9;

}



.duel-core {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 6px;

    height: 6px;

    border-radius: 50%;

    z-index: 2;

}



.duel-core-a {

    left: 20%;

    background: var(--cyan);

    box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan);

    animation: coreCharge 4s ease-in-out infinite;

}



.duel-core-b {

    right: 20%;

    background: var(--thruster);

    box-shadow: 0 0 20px var(--thruster), 0 0 40px var(--thruster);

    animation: coreCharge 4s ease-in-out infinite 0.1s;

    /* Slight offset */

}



.duel-core-ring {

    position: absolute;

    inset: -12px;

    border: 1px solid currentColor;

    border-radius: 50%;

    opacity: 0;

    animation: ringCollapse 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

}



.duel-core-a .duel-core-ring {

    color: var(--cyan);

}



.duel-core-b .duel-core-ring {

    color: var(--thruster);

}



.duel-core-ring.r2 {

    inset: -24px;

    animation-delay: 0.2s;

}



.duel-beam {

    position: absolute;

    top: 50%;

    left: 20%;

    right: 20%;

    height: 2px;

    transform: translateY(-50%);

    background: linear-gradient(90deg, transparent 0%, var(--cyan) 40%, #fff 50%, var(--thruster) 60%, transparent 100%);

    opacity: 0;

    box-shadow: 0 0 15px var(--cyan), 0 0 15px var(--thruster), 0 0 30px #fff;

    animation: beamFire 4s cubic-bezier(0.8, 0, 0.2, 1) infinite;

    z-index: 1;

}



.duel-impact {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 20px;

    height: 20px;

    background: #fff;

    border-radius: 50%;

    filter: blur(2px);

    opacity: 0;

    animation: impactFlash 4s cubic-bezier(0.8, 0, 0.2, 1) infinite;

    z-index: 3;

}



.duel-shockwave {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 100px;

    height: 100px;

    border: 2.5px solid rgba(255, 255, 255, 0.6);

    border-radius: 50%;

    opacity: 0;

    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.1);

    animation: shockwaveExpand 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

    z-index: 1;

}



.duel-shockwave.sw2 {

    border: 2px solid rgba(255, 180, 100, 0.4);

    box-shadow: 0 0 10px rgba(255, 180, 100, 0.2), inset 0 0 8px rgba(255, 180, 100, 0.05);

    animation: shockwaveExpand2 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

    width: 80px;

    height: 80px;

}



.duel-shockwave.sw3 {

    border: 1.5px solid rgba(140, 180, 255, 0.3);

    box-shadow: 0 0 8px rgba(140, 180, 255, 0.15);

    animation: shockwaveExpand3 4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

    width: 60px;

    height: 60px;

}



/* ── Radial light rays from impact ── */

.duel-ray {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 1.5px;

    transform-origin: left center;

    opacity: 0;

    z-index: 0;

}

.duel-ray.dr1 { background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(241,201,139,0.2), transparent); transform: translate(0, -50%) rotate(0deg); animation: duelRayBurst 4s ease-out infinite; }

.duel-ray.dr2 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.15), transparent); transform: translate(0, -50%) rotate(45deg); animation: duelRayBurst 4s ease-out 0.02s infinite; }

.duel-ray.dr3 { background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent); transform: translate(0, -50%) rotate(90deg); animation: duelRayBurst 4s ease-out 0.04s infinite; }

.duel-ray.dr4 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.2), transparent); transform: translate(0, -50%) rotate(135deg); animation: duelRayBurst 4s ease-out 0.01s infinite; }

.duel-ray.dr5 { background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent); transform: translate(0, -50%) rotate(180deg); animation: duelRayBurst 4s ease-out 0.03s infinite; }

.duel-ray.dr6 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.15), transparent); transform: translate(0, -50%) rotate(225deg); animation: duelRayBurst 4s ease-out 0.05s infinite; }

.duel-ray.dr7 { background: linear-gradient(90deg, rgba(255,255,255,0.6), transparent); transform: translate(0, -50%) rotate(270deg); animation: duelRayBurst 4s ease-out 0.02s infinite; }

.duel-ray.dr8 { background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(241,201,139,0.2), transparent); transform: translate(0, -50%) rotate(315deg); animation: duelRayBurst 4s ease-out 0.04s infinite; }



/* ── Scatter particles from impact ── */

.duel-scatter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 4px rgba(241, 201, 139, 0.6);

    opacity: 0;

    z-index: 2;

}

.duel-scatter.ds1 { animation: duelScatter 4s ease-out infinite; --scx: 35px; --scy: -25px; }

.duel-scatter.ds2 { animation: duelScatter 4s ease-out 0.02s infinite; --scx: -30px; --scy: -35px; width: 2px; height: 2px; }

.duel-scatter.ds3 { animation: duelScatter 4s ease-out 0.04s infinite; --scx: 40px; --scy: 20px; }

.duel-scatter.ds4 { animation: duelScatter 4s ease-out 0.01s infinite; --scx: -25px; --scy: 30px; width: 2px; height: 2px; }

.duel-scatter.ds5 { animation: duelScatter 4s ease-out 0.03s infinite; --scx: 20px; --scy: -40px; }

.duel-scatter.ds6 { animation: duelScatter 4s ease-out 0.05s infinite; --scx: -40px; --scy: 10px; width: 2px; height: 2px; }



@keyframes coreCharge {



    0%,

    10% {

        transform: translateY(-50%) scale(1);

        filter: brightness(1);

    }



    40%,

    45% {

        transform: translateY(-50%) scale(2);

        filter: brightness(1.5);

    }



    /* Charge up */

    46% {

        transform: translateY(-50%) scale(0.5);

        filter: brightness(3);

    }



    /* Fire recoil */

    55%,

    100% {

        transform: translateY(-50%) scale(1);

        filter: brightness(1);

    }



    /* Cool down */

}



@keyframes ringCollapse {



    0%,

    10% {

        transform: scale(1.5);

        opacity: 0;

    }



    30% {

        transform: scale(0.5);

        opacity: 0.8;

    }



    40%,

    100% {

        transform: scale(0);

        opacity: 0;

    }

}



@keyframes beamFire {



    0%,

    44% {

        opacity: 0;

        transform: translateY(-50%) scaleY(0);

    }



    45% {

        opacity: 1;

        transform: translateY(-50%) scaleY(4);

        filter: brightness(2);

    }



    48% {

        opacity: 0.8;

        transform: translateY(-50%) scaleY(1);

        filter: brightness(1);

    }



    55%,

    100% {

        opacity: 0;

        transform: translateY(-50%) scaleY(0);

    }

}



@keyframes impactFlash {



    0%,

    44% {

        opacity: 0;

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

    }



    45% {

        opacity: 1;

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

        box-shadow: 0 0 40px #fff, 0 0 80px var(--thruster);

    }



    50%,

    100% {

        opacity: 0;

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

    }

}



@keyframes shockwaveExpand {



    0%,

    44% {

        opacity: 0;

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

        border-width: 4px;

    }



    45% {

        opacity: 1;

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

        border-width: 4px;

    }



    60% {

        opacity: 0;

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

        border-width: 0px;

    }



    100% {

        opacity: 0;

    }

}



@keyframes shockwaveExpand2 {

    0%, 44% {

        opacity: 0;

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

        border-width: 3px;

    }

    46% {

        opacity: 0.8;

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

        border-width: 3px;

    }

    62% {

        opacity: 0;

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

        border-width: 0px;

    }

    100% {

        opacity: 0;

    }

}



@keyframes shockwaveExpand3 {

    0%, 44% {

        opacity: 0;

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

        border-width: 2px;

    }

    47% {

        opacity: 0.6;

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

        border-width: 2px;

    }

    65% {

        opacity: 0;

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

        border-width: 0px;

    }

    100% {

        opacity: 0;

    }

}



@keyframes duelRayBurst {

    0%, 44% {

        width: 0;

        opacity: 0;

    }

    45% {

        width: 10px;

        opacity: 0.9;

    }

    50% {

        width: 50px;

        opacity: 0.6;

    }

    58% {

        width: 70px;

        opacity: 0;

    }

    100% {

        opacity: 0;

    }

}



@keyframes duelScatter {

    0%, 44% {

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

        opacity: 0;

    }

    45% {

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

        opacity: 1;

        box-shadow: 0 0 6px #fff, 0 0 12px rgba(241, 201, 139, 0.5);

    }

    55% {

        transform: translate(calc(-50% + var(--scx)), calc(-50% + var(--scy))) scale(0.8);

        opacity: 0.5;

    }

    65% {

        transform: translate(calc(-50% + var(--scx) * 1.5), calc(-50% + var(--scy) * 1.5)) scale(0.2);

        opacity: 0;

    }

    100% {

        opacity: 0;

    }

}





/* ── 3v3 SKIRMISH — Triangle Lattice Formation ─────────── */

.mode-anim--skirmish {

    opacity: 0.85;

    perspective: 800px;

}



.sk-ring {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotateX(60deg);

    border-radius: 50%;

    border: 1px dashed rgba(255, 255, 255, 0.1);

}



.sk-ring-a {

    width: 140px;

    height: 140px;

    animation: skRingSpin 10s linear infinite;

}



.sk-ring-b {

    width: 80px;

    height: 80px;

    animation: skRingSpinR 8s linear infinite;

    border-style: solid;

    opacity: 0.2;

}



@keyframes skRingSpin {

    to {

        transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg);

    }

}



@keyframes skRingSpinR {

    to {

        transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-360deg);

    }

}



.sk-node {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    top: 50%;

    left: 50%;

    background: var(--thruster);

    box-shadow: 0 0 10px var(--thruster);

    z-index: 2;

}



.sk-node.enemy {

    background: var(--cyan);

    box-shadow: 0 0 10px var(--cyan);

}



/* Outer Gold Triangle (Radius ~65px) */

.sn-a1 {

    transform-origin: -62px -62px;

    animation: skLatticeSpin 6s 0.0s linear infinite;

}



.sn-a2 {

    transform-origin: -62px -62px;

    animation: skLatticeSpin 6s -2.0s linear infinite;

}



.sn-a3 {

    transform-origin: -62px -62px;

    animation: skLatticeSpin 6s -4.0s linear infinite;

}



/* Inner Cyan Triangle (Radius ~35px, opposite direction) */

.sn-b1 {

    transform-origin: 32px 32px;

    animation: skLatticeSpinR 4.5s 0.0s linear infinite;

}



.sn-b2 {

    transform-origin: 32px 32px;

    animation: skLatticeSpinR 4.5s -1.5s linear infinite;

}



.sn-b3 {

    transform-origin: 32px 32px;

    animation: skLatticeSpinR 4.5s -3.0s linear infinite;

}



@keyframes skLatticeSpin {

    0% {

        transform: rotate(0deg) translate(65px, 0) rotate(0deg);

    }



    100% {

        transform: rotate(360deg) translate(65px, 0) rotate(-360deg);

    }

}



@keyframes skLatticeSpinR {

    0% {

        transform: rotate(0deg) translate(-35px, 0) rotate(0deg);

    }



    100% {

        transform: rotate(-360deg) translate(-35px, 0) rotate(360deg);

    }

}



/* Connecting energy lines forming the outer triangle */

.sk-lattice {

    position: absolute;

    top: 50%;

    left: 50%;

    height: 1px;

    width: 112px;

    /* Approx distance between nodes: 65 * sqrt(3) */

    background: linear-gradient(90deg, transparent 0%, rgba(241, 201, 139, 0.4) 50%, transparent 100%);

    transform-origin: 0 0;

    z-index: 1;

}



/* Hardcoded tracking for the outer triangle based on the math */

.la1 {

    animation: latticeTrack1 6s linear infinite;

}



.la2 {

    animation: latticeTrack2 6s linear infinite;

}



.la3 {

    animation: latticeTrack3 6s linear infinite;

}



@keyframes latticeTrack1 {

    0% {

        transform: translate(65px, 0) rotate(120deg);

    }



    100% {

        transform: rotate(360deg) translate(65px, 0) rotate(120deg);

    }

}



@keyframes latticeTrack2 {

    0% {

        transform: translate(-32.5px, 56.3px) rotate(240deg);

    }



    100% {

        transform: rotate(360deg) translate(-32.5px, 56.3px) rotate(240deg);

    }

}



@keyframes latticeTrack3 {

    0% {

        transform: translate(-32.5px, -56.3px) rotate(0deg);

    }



    100% {

        transform: rotate(360deg) translate(-32.5px, -56.3px) rotate(0deg);

    }

}





/* ── FFA FREE MODE — Starburst Explosion ───────────────── */

.mode-anim--ffa {

    opacity: 0.9;

}



.ffa-core {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 20px #fff, 0 0 40px var(--thruster);

    animation: ffaCorePulse 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

}



.ffa-core-ring {

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 150px;

    height: 150px;

    border-radius: 50%;

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

    opacity: 0;

    animation: ffaRingExpand 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;

}



.ffa-shot {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 24px;

    height: 2px;

    background: linear-gradient(90deg, transparent 0%, var(--thruster) 100%);

    opacity: 0;

    transform-origin: 0 50%;

}



.ffa-shot:nth-child(even) {

    background: linear-gradient(90deg, transparent 0%, var(--cyan) 100%);

}



/* 8 directions, fired out from center */

.ffa-shot.s1 {

    transform: rotate(0deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.1s;

}



.ffa-shot.s2 {

    transform: rotate(45deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.15s;

}



.ffa-shot.s3 {

    transform: rotate(90deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.05s;

}



.ffa-shot.s4 {

    transform: rotate(135deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.2s;

}



.ffa-shot.s5 {

    transform: rotate(180deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.12s;

}



.ffa-shot.s6 {

    transform: rotate(225deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.08s;

}



.ffa-shot.s7 {

    transform: rotate(270deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.18s;

}



.ffa-shot.s8 {

    transform: rotate(315deg) translateX(10px);

    animation: ffaShoot 3s cubic-bezier(0.2, 0.8, 0.2, 1) infinite 0.22s;

}



@keyframes ffaCorePulse {



    0%,

    10% {

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

        filter: brightness(1);

    }



    15% {

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

        filter: brightness(3);

    }



    /* Implode before explosion */

    18% {

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

        filter: brightness(2);

        box-shadow: 0 0 50px #fff;

    }



    /* Detonate */

    30%,

    100% {

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

        filter: brightness(1);

    }

}



@keyframes ffaRingExpand {



    0%,

    15% {

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

        opacity: 0;

        border-width: 4px;

    }



    18% {

        opacity: 1;

        border-width: 2px;

    }



    40% {

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

        opacity: 0;

        border-width: 0px;

    }



    100% {

        opacity: 0;

    }

}



@keyframes ffaShoot {



    0%,

    15% {

        transform: rotate(var(--rot, 0deg)) translateX(0px) scaleX(0.2);

        opacity: 0;

    }



    18% {

        opacity: 1;

        transform: rotate(var(--rot, 0deg)) translateX(30px) scaleX(1);

        filter: brightness(2);

    }



    40% {

        opacity: 0;

        transform: rotate(var(--rot, 0deg)) translateX(180px) scaleX(0);

    }



    100% {

        opacity: 0;

    }

}



/* Hack to pass rotation via custom property to the keyframe so we don't need 8 keyframes */

.ffa-shot.s1 {

    --rot: 0deg;

}



.ffa-shot.s2 {

    --rot: 45deg;

}



.ffa-shot.s3 {

    --rot: 90deg;

}



.ffa-shot.s4 {

    --rot: 135deg;

}



.ffa-shot.s5 {

    --rot: 180deg;

}



.ffa-shot.s6 {

    --rot: 225deg;

}



.ffa-shot.s7 {

    --rot: 270deg;

}



.ffa-shot.s8 {

    --rot: 315deg;

}







/* ── Card background layer ────────────────────────────── */

.mode-card-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

}



.mode-bg-gradient {

    position: absolute;

    inset: 0;

}



/* Palette-faithful gradient identities — site palette only */

/* 5v5 Full War — gold accent only, no opaque base fill */

.mode-bg--war {

    background:

        radial-gradient(ellipse 70% 55% at 85% 10%, rgba(241, 201, 139, 0.18) 0%, transparent 60%),

        radial-gradient(ellipse 50% 70% at 10% 85%, rgba(140, 165, 211, 0.08) 0%, transparent 55%);

}



/* 1v1 Duel — cyan accent only */

.mode-bg--duel {

    background:

        radial-gradient(ellipse 80% 65% at 12% 20%, rgba(140, 165, 211, 0.20) 0%, transparent 60%),

        radial-gradient(ellipse 50% 50% at 88% 85%, rgba(140, 165, 211, 0.08) 0%, transparent 55%);

}



/* 3v3 Skirmish — cyan accent only */

.mode-bg--skirmish {

    background:

        radial-gradient(ellipse 75% 65% at 90% 15%, rgba(140, 165, 211, 0.18) 0%, transparent 60%),

        radial-gradient(ellipse 50% 50% at 10% 85%, rgba(241, 201, 139, 0.07) 0%, transparent 55%);

}



/* FFA — amber rays only */

.mode-bg--ffa {

    background:

        radial-gradient(ellipse 40% 150% at 3%  50%, rgba(241, 201, 139, 0.20) 0%, transparent 55%),

        radial-gradient(ellipse 40% 150% at 97% 50%, rgba(241, 201, 139, 0.16) 0%, transparent 55%);

}



/* Subtle noise texture */

.mode-bg-noise {

    position: absolute;

    inset: 0;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");

    opacity: 0.4;

}



/* Subtle grid overlay */

.mode-bg-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);

    background-size: 40px 40px;

}



/* ── Card inner layout ───────────────────────────────── */

.mode-card-inner {

    position: relative;

    z-index: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: clamp(14px, 1.2vw + 6px, 56px) clamp(16px, 1.3vw + 6px, 64px);

}



.mode-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 0;

}



/* Ghost huge number in background */

.mode-ghost-count {

    position: absolute;

    bottom: -0.1em;

    right: -0.04em;

    font-family: var(--font-raj);

    font-weight: 700;

    font-size: clamp(5rem, 8vw + 2rem, 16rem);

    color: transparent;

    -webkit-text-stroke: 1px rgba(140, 165, 211, 0.04);

    line-height: 1;

    pointer-events: none;

    user-select: none;

    letter-spacing: -0.05em;

    transition: -webkit-text-stroke-color 0.3s ease;

}



.mode-card--sm .mode-ghost-count {

    font-size: clamp(3rem, 5vw + 1rem, 9rem);

}



.mode-card:hover .mode-ghost-count {

    -webkit-text-stroke-color: rgba(241, 201, 139, 0.07);

}



.mode-bottom {

    margin-top: auto;

}



/* ── Badge styles ──────────────────────────────────────── */

.mode-badge {

    display: inline-flex;

    align-items: center;

    font-family: var(--font-mono);

    font-size: 0.55rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    padding: 4px 10px;

    border-radius: 20px;

    border: 1px solid;

}



/* Badge — ranked: thruster gold (matches site CTA palette) */

.mode-badge--ranked {

    color: var(--thruster);

    background: rgba(241, 201, 139, 0.07);

    border-color: rgba(241, 201, 139, 0.18);

}



/* Badge — casual: steel gray */

.mode-badge--casual {

    color: var(--steel-gray);

    background: rgba(156, 163, 175, 0.06);

    border-color: rgba(156, 163, 175, 0.12);

}



/* Badge — chaos: use thruster gold at reduced opacity (palette-safe) */

.mode-badge--chaos {

    color: var(--thruster);

    background: rgba(241, 201, 139, 0.06);

    border-color: rgba(241, 201, 139, 0.15);

}



/* Format display */

.mode-format {

    font-family: var(--font-raj);

    font-size: clamp(0.8rem, 1.2vw, 1rem);

    font-weight: 600;

    color: var(--cyan);

    opacity: 0.35;

    letter-spacing: 0.08em;

}



.mode-title {

    font-family: var(--font-raj);

    font-size: clamp(1.1rem, 0.8rem + 1.2vw, 3rem);

    font-weight: 700;

    color: var(--white);

    letter-spacing: 0.04em;

    text-transform: uppercase;

    line-height: 1;

    margin-bottom: 8px;

    transition: color 0.3s ease, letter-spacing 0.4s ease;

}



.mode-card:hover .mode-title {

    letter-spacing: 0.06em;

    color: var(--thruster);

}



.mode-card--sm .mode-title {

    font-size: clamp(1.1rem, 1.6vw, 1.5rem);

}



.mode-desc {

    font-size: clamp(0.65rem, 0.5rem + 0.4vw, 1.15rem);

    color: var(--steel-gray);

    opacity: 0.7;

    font-weight: 300;

    line-height: 1.7;

    margin-bottom: clamp(8px, 0.8vw, 20px);

    max-width: clamp(24ch, 35vw, 48ch);

}



/* ── Tags ──────────────────────────────────────────────── */

.mode-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.mode-tag {

    font-family: var(--font-mono);

    font-size: clamp(0.4rem, 0.3rem + 0.2vw, 0.7rem);

    letter-spacing: 0.14em;

    color: var(--steel-gray);

    opacity: 0.5;

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

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

    padding: clamp(2px, 0.2vw, 5px) clamp(5px, 0.5vw, 12px);

    border-radius: 20px;

    text-transform: uppercase;

    transition: background 0.2s, border-color 0.2s, color 0.2s;

}



.mode-card:hover .mode-tag {

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

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

    color: var(--steel-gray);

    opacity: 0.75;

}



/* ── Wide (FFA) card layout ────────────────────────────── */

.mode-wide-inner {

    flex-direction: row;

    align-items: center;

    gap: var(--s-34);

    padding: clamp(16px, 1.5vw + 6px, 56px) clamp(20px, 2vw + 8px, 64px);

}



.mode-wide-left {

    flex: 1;

}



.mode-wide-left .mode-badge {

    margin-bottom: 10px;

}



.mode-wide-left .mode-title {

    font-size: clamp(1.4rem, 2.5vw, 2.2rem);

    margin-bottom: 6px;

}



.mode-wide-left .mode-desc {

    margin-bottom: 0;

    max-width: 52ch;

}



.mode-wide-right {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;

    flex-shrink: 0;

}



/* FFA format text — matches thruster gold on hover (palette safe) */

.mode-wide-format {

    font-family: var(--font-raj);

    font-weight: 700;

    font-size: clamp(3rem, 6vw, 5rem);

    color: transparent;

    -webkit-text-stroke: 1px rgba(140, 165, 211, 0.12);

    letter-spacing: -0.02em;

    line-height: 1;

    transition: -webkit-text-stroke-color 0.3s;

}



.mode-card--wide:hover .mode-wide-format {

    -webkit-text-stroke-color: rgba(241, 201, 139, 0.25);

}



.mode-wide-right .mode-tags {

    justify-content: flex-end;

}



/* ── Top-edge shimmer on hover ─────────────────────────── */

.mode-card::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg,

            transparent 0%,

            rgba(255, 255, 255, 0.12) 40%,

            rgba(255, 255, 255, 0.06) 70%,

            transparent 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.mode-card:hover::after {

    opacity: 1;

}



/* Hero card (5v5) — gold hover glow */

.mode-card--hero:hover {

    box-shadow:

        0 32px 80px rgba(0, 0, 0, 0.65),

        0 0 0 1px rgba(241, 201, 139, 0.08),

        0 0 48px rgba(241, 201, 139, 0.03);

}



/* Duel card — cyan hover glow */

.mode-card[data-mode="1v1"]:hover {

    box-shadow:

        0 24px 64px rgba(0, 0, 0, 0.6),

        0 0 0 1px rgba(140, 165, 211, 0.1);

}



/* Skirmish card — cyan hover glow */

.mode-card[data-mode="3v3"]:hover {

    box-shadow:

        0 24px 64px rgba(0, 0, 0, 0.6),

        0 0 0 1px rgba(140, 165, 211, 0.08);

}



/* FFA Wide — gold hover shimmer */

.mode-card--wide:hover {

    box-shadow:

        0 24px 60px rgba(0, 0, 0, 0.6),

        0 0 0 1px rgba(241, 201, 139, 0.07);

}



/* ═══════════════════════════════════════════════════════════

   MODEL INSPECTOR — Sketchfab-style layer panel

   ═══════════════════════════════════════════════════════════ */



/* Toggle button — Sketchfab-style: clean circular icon button */

.inspector-btn {

    position: absolute;

    right: clamp(16px, 2vw + 6px, 44px);

    bottom: clamp(16px, 2vw + 6px, 44px);

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    width: clamp(44px, 3vw + 16px, 72px);

    height: clamp(44px, 3vw + 16px, 72px);

    padding: 0;

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

    border: none;

    border-radius: clamp(8px, 0.6vw + 2px, 16px);

    color: rgba(255, 255, 255, 0.75);

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;

}



.inspector-btn:hover {

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

    color: #ffffff;

}



.inspector-btn.active {

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

    color: #ffffff;

}



.inspector-btn:active {

    transform: scale(0.92);

}



.inspector-btn-icon {

    width: clamp(22px, 1.5vw + 8px, 36px);

    height: clamp(22px, 1.5vw + 8px, 36px);

    pointer-events: none;

}



/* Panel — rises from the bottom-right FAB */

.inspector-panel {

    position: absolute;

    right: clamp(16px, 2vw + 6px, 44px);

    bottom: clamp(72px, 5vw + 28px, 130px);

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

    width: clamp(220px, 18vw + 40px, 480px);

    max-width: calc(100% - clamp(32px, 4vw + 12px, 88px));

    background: rgba(7, 9, 18, 0.85);

    backdrop-filter: blur(32px) saturate(160%);

    -webkit-backdrop-filter: blur(32px) saturate(160%);

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

    border-radius: clamp(14px, 1.2vw + 4px, 30px);

    z-index: 5;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),

                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);

    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.65),

                0 0 0 1px rgba(140, 165, 211, 0.05),

                inset 0 1px 0 rgba(255, 255, 255, 0.05);

    overflow: hidden;

}



/* Top accent bar — thruster-to-cyan gradient */

.inspector-panel::before {

    content: '';

    display: block;

    height: 2px;

    background: linear-gradient(90deg,

        var(--thruster) 0%,

        rgba(140, 165, 211, 0.6) 60%,

        transparent 100%);

    opacity: 0.75;

}



.inspector-panel.is-open {

    opacity: 1;

    pointer-events: auto;

    transform: translateY(0) scale(1);

}



/* Header */

.inspector-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: clamp(10px, 0.8vw + 4px, 22px) clamp(12px, 1vw + 4px, 28px) clamp(8px, 0.7vw + 3px, 18px);

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

}

.inspector-title-row {

    display: flex;

    align-items: center;

    gap: clamp(5px, 0.4vw + 2px, 12px);

}

.inspector-title-row svg {

    opacity: 0.4;

    flex-shrink: 0;

    color: var(--cyan);

}

.inspector-title {

    font-family: var(--font-mono);

    font-size: clamp(0.38rem, 0.3rem + 0.15vw, 0.7rem);

    letter-spacing: 0.24em;

    color: var(--steel-gray);

    opacity: 0.5;

}

.inspector-close {

    background: none;

    border: none;

    color: rgba(255, 255, 255, 0.22);

    cursor: pointer;

    padding: clamp(3px, 0.3vw + 1px, 8px);

    border-radius: clamp(5px, 0.4vw + 2px, 12px);

    display: flex;

    align-items: center;

    transition: color 0.2s ease, background 0.2s ease;

}

.inspector-close:hover {

    color: rgba(255, 255, 255, 0.70);

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

}



/* Identity row */

.inspector-identity {

    display: flex;

    align-items: center;

    gap: clamp(7px, 0.6vw + 2px, 16px);

    padding: clamp(10px, 0.8vw + 4px, 22px) clamp(12px, 1vw + 4px, 28px);

}

.inspector-type-badge {

    font-family: var(--font-mono);

    font-size: clamp(0.35rem, 0.25rem + 0.15vw, 0.65rem);

    letter-spacing: 0.18em;

    color: var(--thruster);

    background: rgba(241, 201, 139, 0.08);

    border: 1px solid rgba(241, 201, 139, 0.20);

    border-radius: 20px;

    padding: clamp(2px, 0.2vw, 5px) clamp(6px, 0.6vw, 14px);

    text-transform: uppercase;

    flex-shrink: 0;

}

.inspector-model-name {

    font-family: var(--font-raj);

    font-size: clamp(0.8rem, 0.6rem + 0.5vw, 1.6rem);

    font-weight: 700;

    color: rgba(255, 255, 255, 0.90);

    letter-spacing: 0.05em;

    text-transform: uppercase;

}



/* Separator */

.inspector-sep {

    height: 1px;

    background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);

    margin: 0 clamp(12px, 1vw + 4px, 28px);

}



/* Section labels */

.inspector-section-label {

    font-family: var(--font-mono);

    font-size: clamp(0.35rem, 0.25rem + 0.15vw, 0.65rem);

    letter-spacing: 0.24em;

    color: var(--steel-gray);

    opacity: 0.35;

    text-transform: uppercase;

    padding: clamp(8px, 0.7vw + 3px, 18px) clamp(12px, 1vw + 4px, 28px) clamp(4px, 0.3vw + 1px, 10px);

}



/* Render mode grid — Sketchfab-style compact select list */

.inspector-mode-grid {

    display: flex;

    flex-direction: column;

    gap: 0;

    padding: clamp(2px, 0.4vw, 8px) clamp(12px, 1vw + 4px, 28px) clamp(8px, 0.7vw + 3px, 20px);

}

.inspector-mode-btn {

    display: flex;

    align-items: center;

    gap: clamp(6px, 0.4vw + 2px, 12px);

    padding: clamp(4px, 0.4vw + 1px, 8px) clamp(5px, 0.5vw + 2px, 12px);

    background: transparent;

    border: none;

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

    border-radius: 0;

    color: rgba(255, 255, 255, 0.45);

    font-family: var(--font-mono);

    font-size: clamp(0.42rem, 0.32rem + 0.18vw, 0.75rem);

    letter-spacing: 0.12em;

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;

}

.inspector-mode-btn svg {

    flex-shrink: 0;

    opacity: 0.5;

    transition: opacity 0.2s ease;

}

.inspector-mode-btn span {

    white-space: nowrap;

}

.inspector-mode-btn:hover {

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

    color: rgba(255, 255, 255, 0.75);

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

}

.inspector-mode-btn:hover svg {

    opacity: 0.8;

}

.inspector-mode-btn.active {

    background: rgba(241, 201, 139, 0.07);

    border-color: rgba(241, 201, 139, 0.22);

    color: var(--thruster);

}

.inspector-mode-btn.active svg {

    opacity: 1;

    color: var(--thruster);

}



/* Model Stats grid */

.inspector-stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: clamp(3px, 0.3vw + 1px, 8px);

    padding: clamp(5px, 0.5vw + 2px, 12px) clamp(12px, 1vw + 4px, 28px) clamp(12px, 1vw + 4px, 28px);

}

.inspector-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    padding: clamp(4px, 0.5vw + 1px, 12px) clamp(3px, 0.3vw, 8px);

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

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

    border-radius: clamp(5px, 0.4vw + 2px, 12px);

}

.inspector-stat-val {

    font-family: var(--font-mono);

    font-size: clamp(0.45rem, 0.35rem + 0.2vw, 0.85rem);

    font-weight: 600;

    letter-spacing: 0.05em;

    color: rgba(255, 255, 255, 0.75);

}

.inspector-stat-key {

    font-family: var(--font-mono);

    font-size: clamp(0.3rem, 0.22rem + 0.12vw, 0.55rem);

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--steel-gray);

    opacity: 0.5;

}



/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 767px) {

    /* Structural layout shifts — sizing handled by fluid clamp() tokens */

    .showcase-ghost-name { display: none; }



    .hud-corner {

        opacity: 0.2;

    }



    .class-selector {

        flex-direction: row;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }



    .class-card {

        min-width: auto;

        flex-shrink: 0;

    }



    .mode-wide-inner {

        flex-direction: column;

        align-items: flex-start;

    }



    .mode-wide-right {

        align-items: flex-start;

    }



    .mode-wide-right .mode-tags {

        justify-content: flex-start;

    }

}


@media (min-width: 1024px) {
    .showcase-stats {
        width: clamp(280px, 22vw + 80px, 700px);
    }
    .inspector-panel {
        width: clamp(280px, 21vw + 60px, 580px);
    }
    .showcase-stats .detail-desc {
        -webkit-line-clamp: unset;
        line-clamp: unset;
        display: block;
    }
}