/* ============================================================
   CARD GAME PROTOTYPE
   DARK FANTASY / COSMIC GLASS UI
============================================================ */

:root {
    --bg: #050507;
    --panel: rgba(15, 13, 20, .58);
    --panel-light: rgba(255, 255, 255, .045);

    --border: rgba(255, 255, 255, .10);
    --border-bright: rgba(211, 184, 255, .28);

    --text: #f8f5ff;
    --text-soft: rgba(239, 231, 249, .56);
    --text-faint: rgba(239, 231, 249, .28);

    --accent: #c6a5ff;
    --accent-soft: rgba(164, 108, 235, .17);

    --danger: #ff5570;
}


/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body,
#game {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        #050507;
}

button {
    font: inherit;
}

button,
.collection-card,
.battle-card {
    -webkit-tap-highlight-color: transparent;
}

.screen {
    display: none;

    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}

.screen.active {
    display: flex;
}


/* ============================================================
   GLOBAL BACKGROUND
============================================================ */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(117, 68, 165, .13),
            transparent 34%
        ),
        radial-gradient(
            circle at 16% 80%,
            rgba(60, 80, 130, .05),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #09070d,
            #030305 65%,
            #07060a
        );

    z-index: -2;
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: .4;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.12) 0 1px,
            transparent 1.4px
        ),
        radial-gradient(
            circle,
            rgba(196,157,255,.11) 0 1px,
            transparent 1.4px
        );

    background-size:
        150px 150px,
        235px 235px;

    background-position:
        30px 45px,
        110px 80px;

    z-index: -1;
}


/* ============================================================
   MAIN MENU
============================================================ */

#main-menu {
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            ellipse at center,
            rgba(106, 58, 155, .12),
            transparent 52%
        );
}


/* ============================================================
   MENU BACKGROUND
============================================================ */

.menu-background {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.menu-stars {
    position: absolute;

    inset: 0;

    opacity: .55;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.22) 0 1px,
            transparent 1.4px
        ),
        radial-gradient(
            circle,
            rgba(191,151,255,.18) 0 1px,
            transparent 1.5px
        );

    background-size:
        165px 165px,
        260px 260px;

    background-position:
        20px 40px,
        120px 90px;
}

.menu-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .18;
}

.orb-1 {
    width: 500px;
    height: 500px;

    left: 20%;
    top: 20%;

    background:
        rgba(120, 75, 190, .6);
}

.orb-2 {
    width: 430px;
    height: 430px;

    right: 15%;
    bottom: 8%;

    background:
        rgba(90, 55, 150, .5);
}


/* ============================================================
   MENU SIDE DECORATIONS
============================================================ */

.menu-decoration {
    position: absolute;

    top: 50%;

    width: min(270px, 18vw);
    height: 1px;

    opacity: .35;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(202,175,245,.7)
        );
}

.menu-decoration-left {
    left: 0;
}

.menu-decoration-right {
    right: 0;

    transform:
        rotate(180deg);
}


/* ============================================================
   MAIN MENU CONTENT
============================================================ */

.main-menu-content {
    position: relative;

    z-index: 5;

    width: min(420px, 88vw);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    /*
       L'ensemble complet est centré.
    */
    transform:
        translateY(-10px);
}


/* ============================================================
   EMBLEM
============================================================ */

.game-emblem {
    position: relative;

    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin-bottom: 27px;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(213,190,255,.32);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(158,100,220,.035)
        );

    backdrop-filter:
        blur(15px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 0 38px rgba(157,100,225,.16);
}

.game-emblem::before {
    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid
        rgba(255,255,255,.25);
}

.game-emblem::after {
    content: "";

    position: absolute;

    inset: 27px;

    background:
        #c8a6ff;

    box-shadow:
        0 0 17px
        rgba(198,160,255,.8);
}

.game-emblem span {
    position: relative;

    z-index: 2;

    transform:
        rotate(-45deg);

    font-size: 8px;

    color: white;
}


/* ============================================================
   TITLE
============================================================ */

.game-title-container {
    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 20px;
}

.game-title-container h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(58px, 6vw, 82px);

    line-height: 1;

    font-weight: 400;

    letter-spacing: .08em;

    color: #fbf9ff;

    text-shadow:
        0 0 30px
        rgba(179,133,245,.16);
}

.title-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,188,255,.4)
        );
}

.title-line:last-child {
    transform:
        rotate(180deg);
}

.game-subtitle {
    margin-top: 11px;

    font-size: 8px;

    letter-spacing: .48em;

    text-indent: .48em;

    color:
        rgba(232,222,245,.38);
}


/* ============================================================
   MAIN NAVIGATION
============================================================ */

.main-navigation {
    width: 100%;

    margin-top: 47px;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* ============================================================
   MENU GLASS BUTTONS
============================================================ */

.menu-button {
    position: relative;

    width: 100%;
    height: 66px;

    display: grid;

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

    align-items: center;

    padding:
        0 18px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.105);

    border-radius: 4px;

    color: var(--text);

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025) 36%,
            rgba(150,95,215,.035) 72%,
            rgba(255,255,255,.018)
        );

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.085),
        inset 0 -1px 0 rgba(255,255,255,.02),
        0 13px 38px rgba(0,0,0,.25);

    cursor: pointer;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


/* glass shine */

.menu-button::before {
    content: "";

    position: absolute;

    top: -120%;
    left: -45%;

    width: 28%;
    height: 350%;

    transform:
        rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.10),
            transparent
        );

    transition:
        left .6s ease;
}


/* luminous bottom line */

.menu-button::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #c7a4ff,
            transparent
        );

    box-shadow:
        0 0 10px
        rgba(190,145,255,.75);

    transition:
        width .28s ease;
}

.menu-button:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(213,184,255,.32);

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.095),
            rgba(148,95,210,.065),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 17px 45px rgba(0,0,0,.34),
        0 0 28px rgba(143,90,210,.09);
}

.menu-button:hover::before {
    left: 125%;
}

.menu-button:hover::after {
    width: 72%;
}

.menu-button-primary {
    height: 70px;

    border-color:
        rgba(210,178,255,.22);

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.09),
            rgba(151,95,220,.075),
            rgba(255,255,255,.02)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 14px 42px rgba(0,0,0,.29),
        0 0 30px rgba(135,80,200,.065);
}

.menu-button-symbol {
    justify-self: center;

    color:
        rgba(215,190,255,.82);

    font-size: 8px;

    text-shadow:
        0 0 10px
        rgba(185,140,255,.45);
}

.menu-button-content {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    text-align: left;
}

.menu-button-content strong {
    font-size: 11px;

    letter-spacing: .22em;
}

.menu-button-content small {
    font-size: 8px;

    letter-spacing: .1em;

    color:
        rgba(238,230,248,.42);
}

.locked-tag {
    justify-self: end;

    font-size: 6px;

    letter-spacing: .1em;

    color:
        rgba(240,230,250,.28);
}

.menu-button.locked {
    opacity: .36;

    cursor: default;
}

.menu-button.locked:hover {
    transform: none;

    border-color:
        rgba(255,255,255,.105);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.085),
        0 13px 38px rgba(0,0,0,.25);
}

.menu-button.locked:hover::before {
    left: -45%;
}

.menu-button.locked:hover::after {
    width: 0;
}


/* ============================================================
   MENU FOOTER
============================================================ */

.menu-footer {
    margin-top: 24px;

    font-size: 7px;

    letter-spacing: .34em;

    text-indent: .34em;

    color:
        rgba(235,225,245,.27);
}


/* ============================================================
   SECONDARY SCREENS
============================================================ */

#collection-screen,
#team-screen {
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(105,60,150,.08),
            transparent 38%
        );
}


/* ============================================================
   SECONDARY HEADER
============================================================ */

.secondary-header {
    flex-shrink: 0;

    height: 78px;

    display: grid;

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

    align-items: center;

    padding:
        0 clamp(24px,5vw,80px);

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

    background:
        linear-gradient(
            180deg,
            rgba(22,18,27,.55),
            rgba(8,7,11,.45)
        );

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        inset 0 -1px 0
        rgba(255,255,255,.025);
}

.secondary-header > div {
    text-align: center;
}

.section-eyebrow {
    display: block;

    margin-bottom: 3px;

    font-size: 7px;

    letter-spacing: .28em;

    color:
        rgba(210,185,245,.4);
}

.secondary-header h2 {
    font-family:
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 400;

    letter-spacing: .16em;
}

.secondary-header > span:last-child {
    justify-self: end;

    font-size: 8px;

    letter-spacing: .13em;

    color:
        rgba(240,230,250,.42);
}

.back-button {
    justify-self: start;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 3px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(245,240,250,.62);

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    transition:
        transform .2s,
        border-color .2s,
        background .2s,
        color .2s;
}

.back-button:hover {
    transform:
        translateX(-3px);

    color: white;

    border-color:
        rgba(205,175,250,.27);

    background:
        rgba(140,90,200,.06);
}


/* ============================================================
   COLLECTION
============================================================ */

.collection-content {
    flex: 1;

    overflow-y: auto;

    padding:
        38px
        clamp(35px,6vw,100px)
        70px;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(180,140,230,.3)
        transparent;
}

.collection-grid {
    width: min(1350px,100%);

    margin: 0 auto;

    display: grid;

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

    gap:
        36px 28px;
}


/*
   game.js peut ajouter différentes classes.
   On stylise les enfants directs pour rester compatible.
*/

.collection-grid > * {
    position: relative;

    min-width: 0;

    padding:
        9px 9px 14px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.095);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        ),
        rgba(15,12,20,.43);

    backdrop-filter:
        blur(17px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 16px 45px rgba(0,0,0,.42);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

    cursor: pointer;
}

.collection-grid > *::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -60%;

    width: 35%;
    height: 300%;

    transform:
        rotate(25deg);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.065),
            transparent
        );

    transition:
        left .6s ease;
}

.collection-grid > *:hover {
    transform:
        translateY(-9px)
        scale(1.015);

    border-color:
        rgba(210,180,255,.24);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 22px 55px rgba(0,0,0,.54),
        0 0 28px rgba(140,90,205,.08);
}

.collection-grid > *:hover::before {
    left: 125%;
}

.collection-grid img {
    display: block;

    width: 100%;

    aspect-ratio: 2 / 3;

    object-fit: cover;

    border:
        1px solid
        rgba(255,255,255,.09);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.5);
}


/* ============================================================
   TEAM SELECTION
============================================================ */

.team-selection-layout {
    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        250px minmax(0,1fr);

    gap:
        clamp(25px,4vw,55px);

    padding:
        32px
        clamp(35px,5vw,80px)
        45px;
}


/* ============================================================
   TEAM PREVIEW — GLASS
============================================================ */

.team-preview {
    align-self: center;

    padding:
        25px 20px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        ),
        rgba(15,12,20,.43);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 50px rgba(0,0,0,.4);
}

.team-preview-title {
    margin-bottom: 18px;

    text-align: center;

    font-size: 8px;

    letter-spacing: .2em;

    color:
        rgba(235,225,245,.48);
}

.team-slots {
    display: flex;

    justify-content: center;

    gap: 8px;
}

.team-slot {
    width: 57px;
    height: 78px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        );

    color:
        rgba(255,255,255,.25);

    font-size: 9px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.04);
}

.team-slot img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.start-battle-button {
    width: 100%;
    height: 47px;

    margin-top: 22px;

    border:
        1px solid
        rgba(205,175,255,.28);

    border-radius: 3px;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.065),
            rgba(145,90,205,.07),
            rgba(255,255,255,.018)
        );

    color: white;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .13em;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 10px 28px rgba(0,0,0,.25);

    transition:
        transform .2s,
        border-color .2s,
        box-shadow .2s,
        opacity .2s;
}

.start-battle-button:not(:disabled):hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(215,185,255,.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 13px 34px rgba(0,0,0,.34),
        0 0 22px rgba(145,90,210,.1);
}

.start-battle-button:disabled {
    opacity: .25;

    cursor: default;
}


/* ============================================================
   TEAM GRID
============================================================ */

#team-card-grid {
    align-self: center;

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

    overflow-y: auto;

    padding: 8px;
}


/* selected team card */

#team-card-grid > *.selected {
    transform:
        translateY(-8px);

    border-color:
        rgba(210,180,255,.55);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 20px 55px rgba(0,0,0,.55),
        0 0 30px rgba(155,105,225,.24);
}


/* ============================================================
   BATTLE SCREEN
============================================================ */

#battle-screen {
    height: 100vh;

    overflow: hidden;

    flex-direction: column;
}

#battle-screen.active {
    display: grid;

    grid-template-rows:
        58px
        minmax(0,1fr)
        100px;
}


/* ============================================================
   BATTLE TOPBAR
============================================================ */

.battle-topbar {
    position: relative;

    z-index: 30;

    display: grid;

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

    align-items: center;

    padding:
        0 clamp(20px,3vw,50px);

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

    background:
        linear-gradient(
            180deg,
            rgba(22,18,28,.64),
            rgba(7,6,10,.56)
        );

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.3),
        inset 0 -1px 0 rgba(255,255,255,.025);
}

.battle-top-left {
    display: flex;

    align-items: center;

    gap: 15px;
}

.battle-exit-button {
    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.55);

    cursor: pointer;

    backdrop-filter:
        blur(10px);
}

.battle-exit-button:hover {
    color: white;

    border-color:
        rgba(210,180,255,.25);
}

.round-display {
    display: flex;

    flex-direction: column;
}

.round-display span {
    font-size: 6px;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.35);
}

.round-display strong {
    margin-top: 1px;

    font-family:
        Georgia,
        serif;

    font-size: 15px;
}

.battle-turn {
    display: flex;

    align-items: center;

    gap: 15px;
}

.turn-decoration {
    width: 55px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,170,250,.35)
        );
}

.turn-decoration:last-child {
    transform:
        rotate(180deg);
}

#turn-indicator {
    font-family:
        Georgia,
        serif;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: .15em;
}

.energy-display {
    justify-self: end;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        6px 11px;

    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(12px);
}

.energy-symbol {
    color: var(--accent);

    font-size: 9px;

    text-shadow:
        0 0 10px
        rgba(185,140,255,.65);
}

.energy-display div {
    display: flex;

    flex-direction: column;
}

.energy-display small {
    font-size: 6px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.35);
}

.energy-display strong {
    margin-top: 1px;

    font-size: 10px;
}


/* ============================================================
   BATTLE ARENA
============================================================ */

.battle-arena {
    position: relative;

    min-height: 0;

    overflow: hidden;

    display: grid;

    grid-template-rows:
        20px
        minmax(0,1fr)
        38px
        minmax(0,1fr);

    background:
        radial-gradient(
            ellipse at center,
            rgba(105,65,150,.08),
            transparent 52%
        );
}

.battle-arena::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: min(1050px,75vw);
    height: 1px;

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(200,170,250,.16),
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   ENEMY ENERGY
============================================================ */

.enemy-energy-display {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    font-size: 6px;

    letter-spacing: .13em;

    color:
        rgba(255,255,255,.3);
}

.enemy-energy-display strong {
    color:
        rgba(220,200,250,.55);

    font-size: 7px;
}


/* ============================================================
   BATTLE TEAMS
============================================================ */

.battle-team {
    min-height: 0;

    width: 100%;

    display: flex;

    align-items: center;

    /*
       IMPORTANT :
       cartes fortement espacées.
    */

    justify-content: space-between;

    gap:
        clamp(50px,7vw,135px);

    padding-left:
        clamp(100px,10vw,200px);

    padding-right:
        clamp(100px,10vw,200px);
}

.enemy-team {
    align-items: flex-start;

    padding-top: 3px;
}

.player-team {
    align-items: flex-end;

    padding-bottom: 3px;
}


/* ============================================================
   BATTLE CARD
============================================================ */

.battle-card {
    position: relative;

    /*
       PLUS GRANDES.
    */

    width:
        clamp(175px,12vw,205px);

    flex: 0 0 auto;

    padding: 5px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 4px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.008)
        ),
        rgba(15,12,19,.32);

    backdrop-filter:
        blur(12px);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 13px 40px rgba(0,0,0,.45);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        filter .22s ease,
        opacity .22s ease;

    user-select: none;
}

.battle-card-image-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

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

    background: #050506;

    box-shadow:
        0 9px 28px
        rgba(0,0,0,.5);
}

.battle-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
}

.battle-card.dead {
    opacity: .2;

    filter:
        grayscale(1)
        brightness(.42);

    pointer-events: none;
}


/* ============================================================
   DYNAMIC STATS
============================================================ */

.dynamic-stat {
    position: absolute;

    z-index: 6;

    top: 1.7%;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 30%,
            #211c29,
            #050506 72%
        );

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

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.12),
        0 4px 12px rgba(0,0,0,.85);

    color: white;

    font-size: 10px;
    font-weight: 900;

    text-shadow:
        0 2px 4px black;

    pointer-events: none;
}

.dynamic-atk {
    left: 2%;
}

.dynamic-hp {
    right: 2%;
}


/* ============================================================
   HP
============================================================ */

.hp-bar {
    width: 88%;
    height: 4px;

    margin:
        5px auto 0;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,.065);
}

.hp-bar-value {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            rgba(170,135,220,.72),
            rgba(240,230,255,.92)
        );

    transition:
        width .35s ease;
}

.hp-text {
    margin-top: 2px;

    text-align: center;

    font-size: 7px;

    color:
        rgba(255,255,255,.44);
}


/* ============================================================
   EFFECT CHIPS
============================================================ */

.active-effects {
    min-height: 16px;

    margin-top: 3px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;
}

.effect-chip {
    display: inline-flex;

    align-items: center;

    min-height: 15px;

    padding:
        1px 5px;

    border:
        1px solid currentColor;

    border-radius: 2px;

    background:
        rgba(8,7,11,.72);

    font-size: 6px;
    font-weight: 700;

    letter-spacing: .04em;

    cursor: help;

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 3px 9px
        rgba(0,0,0,.35);
}

.team-effect-chip {
    border-style: dashed;
}


/* ============================================================
   SELECTED FIGHTER
============================================================ */

.selectable-fighter {
    cursor: pointer;
}

.selectable-fighter:hover {
    transform:
        translateY(-9px)
        scale(1.025);

    border-color:
        rgba(205,175,255,.27);

    box-shadow:
        0 18px 48px rgba(0,0,0,.55),
        0 0 25px rgba(145,95,215,.12);
}

.battle-card.selected {
    transform:
        translateY(-12px)
        scale(1.035);

    border-color:
        rgba(205,175,255,.5);

    box-shadow:
        0 20px 52px rgba(0,0,0,.6),
        0 0 32px rgba(155,105,225,.28);
}

.battle-card.selected
.battle-card-image-wrapper {
    border-color:
        #c5a6ff;

    box-shadow:
        0 0 25px
        rgba(165,115,235,.32);
}




/* ============================================================
   CENTER MESSAGE
============================================================ */

.battle-center {
    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;
}

.battle-message {
    text-align: center;

    pointer-events: none;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(11px,1.1vw,16px);

    letter-spacing: .1em;

    color:
        rgba(250,247,255,.92);

    text-shadow:
        0 2px 10px black,
        0 0 18px rgba(160,115,225,.25);
}


/* ============================================================
   ACTION PANEL
============================================================ */

.action-panel {
    position: relative;

    z-index: 30;

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(180px,.8fr)
        minmax(0,3fr);

    align-items: center;

    gap: 20px;

    padding:
        9px
        clamp(20px,4vw,70px);

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

    background:
        linear-gradient(
            180deg,
            rgba(22,18,27,.62),
            rgba(7,6,9,.78)
        );

    backdrop-filter:
        blur(22px);

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

    box-shadow:
        0 -15px 40px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.action-character {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.action-label {
    font-size: 6px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.32);
}

#selected-character {
    font-family:
        Georgia,
        serif;

    font-size: 13px;

    letter-spacing: .08em;

    color:
        rgba(248,243,255,.86);
}

.ability-buttons {
    display: grid;

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

    gap: 10px;
}


/* ============================================================
   ABILITY BUTTONS
============================================================ */

.ability-button {
    position: relative;

    min-height: 61px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    padding:
        8px 13px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.095);

    border-radius: 3px;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        );

    color: white;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 7px 20px rgba(0,0,0,.18);

    transition:
        transform .18s,
        border-color .18s,
        background .18s,
        box-shadow .18s;
}

.ability-button::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c5a3ff,
            transparent
        );

    transition:
        width .22s;
}

.ability-button:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        rgba(205,175,255,.32);

    background:
        rgba(135,90,195,.075);

    box-shadow:
        0 10px 25px rgba(0,0,0,.3);
}

.ability-button:hover:not(:disabled)::after {
    width: 100%;
}

.ability-button.selected-ability {
    border-color:
        rgba(215,185,255,.62);

    background:
        linear-gradient(
            125deg,
            rgba(175,125,235,.17),
            rgba(95,55,145,.1)
        );

    box-shadow:
        0 0 22px
        rgba(145,95,215,.15);
}

.ability-button.selected-ability::after {
    width: 100%;
}

.ability-button:disabled {
    opacity: .24;

    cursor: default;
}

.ability-name {
    font-family:
        Georgia,
        serif;

    font-size: 10px;

    letter-spacing: .07em;
}

.ability-cost {
    margin-top: 5px;

    font-size: 7px;

    letter-spacing: .1em;

    color:
        rgba(220,205,240,.5);
}


/* ============================================================
   TOOLTIP
============================================================ */

#effect-tooltip {
    position: fixed;

    z-index: 1000;

    width: 270px;

    padding: 14px;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(5px);

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 4px;

    background:
        linear-gradient(
            145deg,
            rgba(35,28,43,.82),
            rgba(8,7,11,.9)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 18px 50px rgba(0,0,0,.72);

    backdrop-filter:
        blur(22px);

    transition:
        opacity .12s,
        transform .12s,
        visibility .12s;
}

#effect-tooltip.visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}

#tooltip-name {
    font-family:
        Georgia,
        serif;

    font-size: 13px;
}

#tooltip-type {
    display: block;

    margin-top: 4px;

    font-size: 7px;

    letter-spacing: .16em;

    color:
        rgba(255,255,255,.38);
}

#tooltip-description {
    margin-top: 8px;

    font-size: 9px;

    line-height: 1.5;

    color:
        rgba(245,240,250,.7);
}


/* ============================================================
   CARD MODAL
============================================================ */

#card-modal {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s,
        visibility .2s;
}

#card-modal.open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.modal-background {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.79);

    backdrop-filter:
        blur(16px);
}

.modal-content {
    position: relative;

    z-index: 2;

    max-height: 92vh;

    padding: 9px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 5px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.012)
        ),
        rgba(15,12,20,.46);

    backdrop-filter:
        blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 30px 90px rgba(0,0,0,.8);
}

#modal-card-image {
    display: block;

    max-height: 85vh;
    max-width: 88vw;

    object-fit: contain;
}

#close-modal {
    position: absolute;

    top: -38px;
    right: -38px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius: 50%;

    background:
        rgba(20,16,25,.58);

    color: white;

    cursor: pointer;

    backdrop-filter:
        blur(14px);
}


/* ============================================================
   DESKTOP 1920 × 1080
============================================================ */

@media (min-width: 1500px) {

    /*
       Le menu reste compact :
       on ne l'étire PAS avec la résolution.
    */

    .main-menu-content {
        width: 430px;
    }


    /*
       En revanche le combat exploite
       vraiment la largeur.
    */

    .battle-team {
        padding-left:
            clamp(135px,10vw,200px);

        padding-right:
            clamp(135px,10vw,200px);

        gap:
            clamp(70px,7vw,140px);
    }

    .battle-card {
        width: 200px;
    }
}


/* ============================================================
   1080P SAFE MODE
============================================================ */

@media (max-height: 900px) {

    .main-menu-content {
        transform:
            translateY(-5px);
    }

    .game-emblem {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;
    }

    .game-emblem::before {
        inset: 11px;
    }

    .game-emblem::after {
        inset: 22px;
    }

    .game-title-container h1 {
        font-size: 54px;
    }

    .main-navigation {
        margin-top: 32px;

        gap: 8px;
    }

    .menu-button {
        height: 57px;
    }

    .menu-button-primary {
        height: 60px;
    }

    .menu-footer {
        margin-top: 16px;
    }


    /* BATTLE */

    #battle-screen.active {
        grid-template-rows:
            48px
            minmax(0,1fr)
            82px;
    }

    .battle-arena {
        grid-template-rows:
            15px
            minmax(0,1fr)
            27px
            minmax(0,1fr);
    }

    .battle-card {
        width:
            clamp(155px,11vw,180px);
    }

    .battle-team {
        padding-left:
            clamp(75px,9vw,170px);

        padding-right:
            clamp(75px,9vw,170px);

        gap:
            clamp(50px,6vw,115px);
    }

    .dynamic-stat {
        width: 34px;
        height: 34px;

        font-size: 9px;
    }

    .active-effects {
        min-height: 13px;

        margin-top: 2px;
    }

    .effect-chip {
        min-height: 13px;

        padding:
            1px 4px;

        font-size: 6px;
    }

    .action-panel {
        padding:
            5px
            clamp(20px,4vw,60px);

        gap: 14px;
    }

    .ability-button {
        min-height: 50px;

        padding:
            5px 10px;
    }

    .ability-cost {
        margin-top: 3px;
    }
}


/* ============================================================
   MEDIUM DESKTOP
============================================================ */

@media (max-width: 1250px) {

    .battle-team {
        padding-left: 35px;
        padding-right: 35px;

        gap: 30px;
    }

    .battle-card {
        width:
            clamp(140px,14vw,175px);
    }

    .team-selection-layout {
        grid-template-columns:
            210px minmax(0,1fr);

        padding-left: 25px;
        padding-right: 25px;
    }
}


/* ============================================================
   MOBILE / TABLET
============================================================ */

@media (max-width: 760px) {

    body {
        overflow: auto;
    }

    .screen {
        min-height: 100vh;
        height: auto;
    }

    .main-menu-content {
        width:
            min(350px,88vw);
    }

    .menu-decoration {
        display: none;
    }

    .game-title-container {
        gap: 12px;
    }

    .game-title-container h1 {
        font-size: 48px;
    }

    .main-navigation {
        margin-top: 35px;
    }

    .secondary-header {
        height: 62px;

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

        padding:
            0 12px;
    }

    .secondary-header h2 {
        font-size: 13px;
    }

    .collection-content {
        padding:
            24px 14px
            50px;
    }

    .collection-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            22px 12px;
    }

    .collection-grid > * {
        padding:
            6px 6px 10px;
    }

    .team-selection-layout {
        display: flex;

        flex-direction: column;

        padding:
            20px 12px 40px;
    }

    .team-preview {
        width: 100%;
    }

    #team-card-grid {
        width: 100%;

        max-height: none;
    }

    #battle-screen.active {
        height: auto;

        min-height: 100vh;

        grid-template-rows:
            48px
            minmax(600px,auto)
            auto;
    }

    .battle-topbar {
        padding:
            0 8px;
    }

    .turn-decoration {
        display: none;
    }

    #turn-indicator {
        font-size: 8px;
    }

    .energy-display {
        padding:
            4px 5px;
    }

    .battle-arena {
        min-height: 600px;

        grid-template-rows:
            18px
            1fr
            36px
            1fr;
    }

    .battle-team {
        justify-content:
            space-evenly;

        gap: 7px;

        padding:
            4px 8px;
    }

    .battle-card {
        width:
            clamp(100px,29vw,140px);

        padding: 3px;
    }

    .dynamic-stat {
        width: 27px;
        height: 27px;

        font-size: 7px;
    }

    .action-panel {
        grid-template-columns: 1fr;

        gap: 7px;

        padding: 9px;
    }

    .action-character {
        text-align: center;
    }

    .ability-buttons {
        grid-template-columns: 1fr;
    }

    .ability-button {
        min-height: 46px;
    }

    #effect-tooltip {
        width:
            min(260px,calc(100vw - 20px));
    }
}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .game-emblem {
        width: 52px;
        height: 52px;
    }

    .game-title-container h1 {
        font-size: 42px;
    }

    .game-subtitle {
        font-size: 7px;
    }

    .menu-button {
        height: 57px;
    }

    .battle-card {
        width:
            clamp(85px,29vw,120px);
    }

    .battle-team {
        gap: 3px;

        padding-left: 3px;
        padding-right: 3px;
    }

    .dynamic-stat {
        width: 23px;
        height: 23px;

        font-size: 6px;
    }

    .effect-chip {
        font-size: 5px;

        padding:
            1px 3px;
    }
}
/* ============================================================
   V0.7 — BATTLE LAYOUT / LARGE CARDS + CONTEXTUAL SPELL PANEL
   Menu, collection and team-selection above are intentionally unchanged.
============================================================ */

#battle-screen.active {
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr);
}

.battle-arena {
    min-height: 0;
    grid-template-rows: 22px minmax(0, 1fr) 42px minmax(0, 1fr);
    overflow: hidden;
}

.battle-team {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(90px, 8vw, 170px);
    padding-left: clamp(55px, 5.2vw, 105px);
    padding-right: clamp(55px, 5.2vw, 105px);
}

.enemy-team {
    align-items: flex-start;
    padding-top: 8px;
}

.player-team {
    align-items: flex-end;
    padding-bottom: 8px;
}

.battle-card {
    width: clamp(220px, 13.5vw, 270px);
    padding: 5px;
    flex: 0 0 auto;
}

.dynamic-stat {
    width: clamp(38px, 2.45vw, 47px);
    height: clamp(38px, 2.45vw, 47px);
    font-size: clamp(10px, .7vw, 13px);
}

.hp-bar {
    height: 5px;
    margin-top: 6px;
}

.hp-text {
    margin-top: 3px;
    font-size: 8px;
}

.active-effects {
    min-height: 18px;
    margin-top: 4px;
    gap: 4px;
}

.effect-chip {
    min-height: 16px;
    padding: 2px 6px;
    font-size: 6px;
}

/* The old bottom footer becomes a floating contextual glass panel. */
.action-panel {
    position: fixed;
    z-index: 150;
    display: none;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding: 16px;
    border: 1px solid rgba(215, 185, 255, .22);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 45%, rgba(130,80,190,.07)),
        rgba(10, 8, 14, .74);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 24px 65px rgba(0,0,0,.62),
        0 0 35px rgba(145,95,215,.10);
    transform: translateY(4px) scale(.985);
    opacity: 0;
    pointer-events: none;
}

.action-panel.open {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: abilityPanelIn .16s ease-out;
}

@keyframes abilityPanelIn {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.action-panel.open-right::before,
.action-panel.open-left::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: rgba(15, 12, 20, .86);
    border: solid rgba(215,185,255,.20);
    transform: translateY(-50%) rotate(45deg);
}

.action-panel.open-right::before {
    left: -7px;
    border-width: 0 0 1px 1px;
}

.action-panel.open-left::before {
    right: -7px;
    border-width: 1px 1px 0 0;
}

.action-character {
    padding: 2px 3px 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.action-label {
    font-size: 6px;
    letter-spacing: .22em;
}

#selected-character {
    margin-top: 4px;
    font-size: 15px;
}

.ability-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ability-button {
    min-height: 64px;
    padding: 10px 13px;
    border-radius: 5px;
}

.ability-name {
    font-size: 11px;
    line-height: 1.2;
}

.ability-cost {
    margin-top: 6px;
    font-size: 7px;
}

/* 1920x1080: prioritize card readability. */
@media (min-width: 1500px) and (min-height: 950px) {
    .battle-card { width: clamp(245px, 13.8vw, 270px); }
    .battle-team {
        padding-left: clamp(70px, 5vw, 100px);
        padding-right: clamp(70px, 5vw, 100px);
        gap: clamp(110px, 8vw, 180px);
    }
}

/* Short desktop screens still keep the full battle in one viewport. */
@media (max-height: 949px) and (min-width: 761px) {
    #battle-screen.active { grid-template-rows: 48px minmax(0,1fr); }
    .battle-arena { grid-template-rows: 17px minmax(0,1fr) 30px minmax(0,1fr); }
    .battle-card { width: clamp(185px, 11.7vw, 225px); }
    .battle-team {
        padding-left: clamp(45px, 5vw, 90px);
        padding-right: clamp(45px, 5vw, 90px);
        gap: clamp(60px, 6vw, 120px);
    }
    .dynamic-stat { width: 36px; height: 36px; font-size: 9px; }
}

@media (max-width: 1250px) and (min-width: 761px) {
    .battle-card { width: clamp(175px, 16vw, 215px); }
    .battle-team {
        padding-left: 28px;
        padding-right: 28px;
        gap: 34px;
    }
}

/* Mobile/tablet: contextual panel stays readable and never leaves the viewport. */
@media (max-width: 760px) {
    #battle-screen.active {
        min-height: 100vh;
        height: 100vh;
        grid-template-rows: 52px minmax(0,1fr);
        overflow: hidden;
    }

    .battle-arena {
        grid-template-rows: 18px minmax(0,1fr) 30px minmax(0,1fr);
    }

    .battle-team {
        padding-left: 10px;
        padding-right: 10px;
        gap: 8px;
    }

    .battle-card {
        width: min(30vw, 150px);
        padding: 3px;
    }

    .action-panel,
    .action-panel.open {
        position: fixed;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 12px;
        width: min(92vw, 390px) !important;
        transform: translateX(-50%);
    }

    .action-panel.open-right::before,
    .action-panel.open-left::before {
        display: none;
    }
}


/* ============================================================
   V0.9.1 — ALT CARD INSPECTION + ANCHORED TOOLTIPS
============================================================ */

.battle-card {
    overflow: visible;
    isolation: isolate;
}

/* Aucun zoom au simple survol. */
.battle-card:hover .battle-card-image-wrapper {
    transform: none !important;
    filter: none !important;
}

.hq-card-inspection {
    position: fixed;
    width: clamp(410px, 28vw, 500px);
    aspect-ratio: 2 / 3;
    z-index: 1500;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(.985);
    transform-origin: center center;

    transition:
        opacity .12s ease,
        transform .14s ease,
        visibility .12s;

    filter:
        drop-shadow(
            0 24px 50px
            rgba(0,0,0,.75)
        );
}

.hq-card-inspection.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.hq-card-inspection-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    image-rendering: auto;
}

.hq-card-effect-layer {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;
}

.hq-card-effect-zone {
    position: absolute;

    display: block;

    pointer-events: auto;
    cursor: help;

    border-radius: 3px;

    background: transparent;
}

/*
    Pas de surbrillance visible en jeu normal :
    la zone doit rester invisible.
*/
.hq-card-effect-zone:hover {
    background: transparent;
}

/*
    F8 = mode calibration.
    Très utile pour voir exactement où sont les zones invisibles.
*/
.hq-card-inspection.debug-hitboxes
.hq-card-effect-zone {
    background:
        rgba(255, 65, 120, .22);

    outline:
        1px solid
        rgba(255, 105, 150, .95);
}

.hq-card-inspection.debug-hitboxes
.hq-card-effect-zone:hover {
    background:
        rgba(255, 65, 120, .42);
}

/* Le tooltip passe toujours devant la carte HD. */
#effect-tooltip {
    z-index: 3000 !important;
}

/*
    Le tooltip V0.9.1 reçoit left/top directement depuis JS.
    On neutralise tout décalage visuel supplémentaire.
*/
#effect-tooltip.visible {
    transform: none;
}

#battle-screen {
    overflow: hidden;
}

.battle-arena {
    overflow: hidden;
}

.battle-topbar {
    z-index: 200;
}

/*
    Petit retour visuel uniquement sur desktop :
    ALT est actif, mais la carte ne grossit pas tant qu'on ne la survole pas.
*/
@media (hover: hover) and (pointer: fine) {
    body.card-inspection-key-held
    #battle-screen .battle-card:not(.dead) {
        cursor: zoom-in;
    }
}

/* Pas d'inspection ALT sur écran tactile pour l'instant. */
@media (hover: none), (pointer: coarse) {
    .hq-card-inspection {
        display: none !important;
    }
}


/* ============================================================
   V0.9.2 — DYNAMIC BATTLE + INSPECTION STATS
============================================================ */

/*
   Les cercles ATK/PV font déjà partie du PNG.
   On affiche donc uniquement le nombre par-dessus.
*/
.battle-card-image-wrapper .dynamic-stat {
    position: absolute !important;
    top: 2.15% !important;

    width: 16.5% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    font-size: clamp(14px, 1.05vw, 20px) !important;
    font-weight: 900;
    line-height: 1 !important;
    text-align: center;

    z-index: 6;
    transform: none !important;
}

.battle-card-image-wrapper .dynamic-atk {
    left: 1.9% !important;
    right: auto !important;
}

.battle-card-image-wrapper .dynamic-hp {
    right: 1.9% !important;
    left: auto !important;
}


/* Stats sur la grande carte ouverte avec ALT. */
.hq-inspection-stat {
    position: absolute;
    top: 2.15%;

    width: 16.5%;
    height: auto;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: none;
    background: transparent;

    color: #fff;

    font-size: clamp(28px, 2.1vw, 38px);
    font-weight: 900;
    line-height: 1;
    text-align: center;

    text-shadow:
        0 2px 3px rgba(0,0,0,.95),
        0 0 5px rgba(0,0,0,.8);

    z-index: 4;
    pointer-events: none;
}

.hq-inspection-atk {
    left: 1.9%;
}

.hq-inspection-hp {
    right: 1.9%;
}


/* ============================================================
   V0.9.3 — ALT ONLY + STAT POSITION FIX
============================================================ */

/*
   Sans ALT : aucune carte ne grossit au simple survol.
   On garde les autres retours visuels (bordure/ombre).
*/
#battle-screen .selectable-fighter:hover,
#battle-screen .targetable:hover,
#battle-screen .battle-card:hover {
    transform: none !important;
}

/*
   Position par CENTRE des cercles imprimés.
   Les coordonnées sont communes aux petites cartes et au zoom.
*/
#battle-screen .battle-card-image-wrapper .dynamic-stat {
    top: 8.6% !important;
    width: 17% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) !important;
}

#battle-screen .battle-card-image-wrapper .dynamic-atk {
    left: 13.5% !important;
    right: auto !important;
}

#battle-screen .battle-card-image-wrapper .dynamic-hp {
    left: 86.5% !important;
    right: auto !important;
}

.hq-inspection-stat {
    top: 8.6% !important;
    width: 17% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) !important;
}

.hq-inspection-atk {
    left: 13.5% !important;
    right: auto !important;
}

.hq-inspection-hp {
    left: 86.5% !important;
    right: auto !important;
}


/* ============================================================
   V0.9.4 — STAT CIRCLES
   Cercle noir pour masquer les stats imprimées dans le PNG.
============================================================ */

#battle-screen .battle-card-image-wrapper .dynamic-stat,
.hq-inspection-stat {
    background:
        radial-gradient(
            circle,
            #09090d 0%,
            #030305 72%,
            #000000 100%
        ) !important;

    border:
        2px solid
        rgba(255, 255, 255, .78) !important;

    border-radius: 50% !important;

    box-shadow:
        inset 0 0 8px rgba(255,255,255,.08),
        0 2px 6px rgba(0,0,0,.85) !important;

    color: #ffffff !important;
    font-weight: 900 !important;

    text-shadow:
        0 2px 3px #000000,
        0 0 4px #000000 !important;

    overflow: hidden;
}


/* ============================================================
   V0.9.5 — FINAL STAT POSITION / VISIBILITY FIX
   - Cercles davantage vers l'intérieur
   - Les nombres à 4 chiffres restent entièrement visibles
============================================================ */

#battle-screen .battle-card-image-wrapper .dynamic-stat {
    top: 8.6% !important;
    width: 19% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 2px !important;

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

    background: #030305 !important;
    border: 2px solid rgba(0, 0, 0, 0.82) !important;
    border-radius: 50% !important;

    color: #fff !important;
    font-size: clamp(9px, .68vw, 13px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;

    /* Le texte ne sera plus coupé dans le cercle. */
    overflow: visible !important;

    text-align: center !important;
    text-shadow: 0 2px 3px #000, 0 0 4px #000 !important;

    box-shadow:
        inset 0 0 8px rgba(255,255,255,.08),
        0 2px 6px rgba(0,0,0,.85) !important;

    z-index: 10 !important;
}

/* Environ 50 px plus vers l'intérieur sur une carte agrandie,
   tout en restant proportionnel sur les petites cartes. */
#battle-screen .battle-card-image-wrapper .dynamic-atk {
    left: 20% !important;
    right: auto !important;
}

#battle-screen .battle-card-image-wrapper .dynamic-hp {
    left: 80% !important;
    right: auto !important;
}


/* ---------- ZOOM SHIFT ---------- */

.hq-inspection-stat {
    top: 8.6% !important;
    width: 19% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 3px !important;

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

    background: #030305 !important;
    border: 2px solid rgba(0, 0, 0, 0.82) !important;
    border-radius: 50% !important;

    color: #fff !important;
    font-size: clamp(13px, .95vw, 17px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
    overflow: visible !important;

    text-align: center !important;
    text-shadow: 0 2px 3px #000, 0 0 5px #000 !important;

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.08),
        0 3px 8px rgba(0,0,0,.9) !important;

    z-index: 10 !important;
}

.hq-inspection-atk {
    left: 20% !important;
    right: auto !important;
}

.hq-inspection-hp {
    left: 80% !important;
    right: auto !important;
}


/* ============================================================
   V0.9.6 — STATS PROPORTIONNELLES AU ZOOM
   Le texte suit maintenant automatiquement la taille de la carte.
============================================================ */

/*
   La carte d'inspection devient le conteneur de référence.
   Les unités cqw ci-dessous sont donc calculées à partir
   de la largeur réelle de la carte zoomée.
*/
.hq-card-inspection {
    container-type: inline-size;
}

/*
   Le cercle garde sa taille proportionnelle (19% de la carte)
   ET le nombre grandit maintenant avec la carte.
*/
.hq-inspection-stat {
    font-size: 6.2cqw !important;
}

/*
   Sécurité pour les navigateurs ne prenant pas en charge cqw.
*/
@supports not (font-size: 1cqw) {
    .hq-inspection-stat {
        font-size: 28px !important;
    }
}

/* ============================================================
   VISUAL OPTIMIZATION — COLLECTION / BATTLE / EFFECTS
============================================================ */

/* Collection tools */
.collection-tools {
    width: min(1180px, 100%);
    margin: 0 auto 28px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px);
    gap: 16px;
    align-items: end;
}

.collection-search-wrap,
.collection-rarity-wrap {
    display: grid;
    gap: 7px;
    color: rgba(255,255,255,.48);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .18em;
}

.collection-tools input,
.collection-tools select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(210,180,255,.18);
    border-radius: 5px;
    outline: none;
    color: rgba(255,255,255,.9);
    background: rgba(15,12,20,.68);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.25);
}

.collection-tools input:focus,
.collection-tools select:focus {
    border-color: rgba(210,180,255,.5);
    box-shadow: 0 0 0 2px rgba(150,100,215,.10), 0 10px 28px rgba(0,0,0,.3);
}

.collection-tools select option { background: #100d15; }

/* Exactly three larger cards per row in Collection only. */
#collection-grid.collection-grid {
    width: min(1180px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 34px;
}

/* Keep the battle formations compact and centered. */
#battle-screen .battle-team {
    width: min(1040px, 100%);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: clamp(28px, 3vw, 58px);
    padding-left: 18px;
    padding-right: 18px;
}

/* Effect identity: chips and tooltip only. */
.effect-chip {
    color: #fff !important;
    border-color: var(--effect-color, currentColor);
    background:
        linear-gradient(rgba(8,7,11,.78), rgba(8,7,11,.78)) padding-box,
        var(--effect-visual, var(--effect-color, #aaa)) border-box;
    border: 1px solid transparent;
    box-shadow:
        0 3px 9px rgba(0,0,0,.35),
        0 0 10px color-mix(in srgb, var(--effect-color, #aaa) 25%, transparent);
}

.effect-chip::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--effect-visual, var(--effect-color, #aaa));
    box-shadow: 0 0 7px var(--effect-color, #aaa);
}

#effect-tooltip {
    border-color: var(--effect-color, rgba(255,255,255,.13));
    background:
        linear-gradient(145deg, rgba(22,18,28,.91), rgba(8,7,11,.95)) padding-box,
        var(--effect-visual, var(--effect-color, #aaa)) border-box;
    border: 1px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 18px 50px rgba(0,0,0,.72),
        0 0 24px color-mix(in srgb, var(--effect-color, #aaa) 18%, transparent);
}

#tooltip-name {
    background: var(--effect-visual, var(--effect-color, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

@media (max-width: 760px) {
    .collection-tools { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
    #collection-grid.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
    #battle-screen .battle-team { width: 100%; gap: 8px; padding-left: 10px; padding-right: 10px; }
}


/* ============================================================
   V1.1 — CENTERED CONTINUOUS SIDE ENERGY BARS
============================================================ */
.battle-topbar-spacer {
    min-width: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.side-energy-gauge {
    --energy-level: 30%;
    position: fixed;
    top: 50%;
    z-index: 180;
    width: 70px;
    height: clamp(360px, 58vh, 590px);
    transform: translateY(-50%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    justify-items: center;
    gap: 10px;
    padding: 14px 10px 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18,14,24,.91), rgba(7,6,10,.94));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.46);
    pointer-events: none;
}

.player-energy-gauge {
    left: clamp(12px, 1.35vw, 26px);
    border-color: rgba(187,145,255,.34);
}
.enemy-energy-gauge {
    right: clamp(12px, 1.35vw, 26px);
    border-color: rgba(255,125,155,.30);
}

.side-energy-label,
.side-energy-gauge small {
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .15em;
    color: rgba(255,255,255,.52);
}
.side-energy-gauge strong {
    font-size: 12px;
    line-height: 1;
    letter-spacing: .03em;
    color: rgba(255,255,255,.96);
    text-shadow: 0 0 12px rgba(255,255,255,.18);
}

/* One continuous track. Its fill rises from the bottom. */
.energy-segments {
    position: relative;
    width: 24px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 12px rgba(0,0,0,.62);
}
.energy-segments span { display: none !important; }
.energy-segments::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--energy-level);
    border-radius: inherit;
    transition: height .28s ease;
}
.player-energy-gauge .energy-segments::after {
    background: linear-gradient(0deg, rgba(108,64,180,.98), rgba(207,170,255,.98));
    box-shadow: 0 0 18px rgba(174,115,255,.58), inset 0 0 8px rgba(255,255,255,.22);
}
.enemy-energy-gauge .energy-segments::after {
    background: linear-gradient(0deg, rgba(142,48,78,.98), rgba(255,128,160,.98));
    box-shadow: 0 0 18px rgba(255,90,135,.48), inset 0 0 8px rgba(255,255,255,.18);
}

/* Cards remain centered independently from the side HUD. */
#battle-screen .battle-team {
    width: min(1040px, calc(100% - 190px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    gap: clamp(28px, 3vw, 58px);
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 900px) {
    .side-energy-gauge {
        width: 52px;
        height: clamp(300px, 54vh, 470px);
        padding: 10px 7px 9px;
        gap: 7px;
    }
    .energy-segments { width: 18px; }
    .side-energy-label, .side-energy-gauge small { font-size: 5px; }
    .side-energy-gauge strong { font-size: 9px; }
    #battle-screen .battle-team { width: min(100%, calc(100% - 125px)); gap: 10px; }
}

/* ============================================================
   V1.2 — BATTLE TEAM VERTICAL POSITION FIX
   Side energy gauges are fixed HUD elements and do not consume
   arena grid rows. Keep enemy / center message / player separated.
============================================================ */
#battle-screen .battle-arena {
    grid-template-rows: minmax(0, 1fr) 42px minmax(0, 1fr);
}

#battle-screen .enemy-team {
    grid-row: 1;
    align-self: start;
    align-items: flex-start;
    padding-top: 8px;
}

#battle-screen .battle-center {
    grid-row: 2;
    align-self: center;
}

#battle-screen .player-team {
    grid-row: 3;
    align-self: end;
    align-items: flex-end;
    padding-bottom: 8px;
}

@media (max-height: 949px) and (min-width: 761px) {
    #battle-screen .battle-arena {
        grid-template-rows: minmax(0, 1fr) 34px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    #battle-screen .battle-arena {
        grid-template-rows: minmax(0, 1fr) 30px minmax(0, 1fr);
    }
}

/* ============================================================
   GAME MODE SELECTION
============================================================ */
#mode-screen {
    position: relative;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(116, 69, 164, .12), transparent 38%),
        linear-gradient(180deg, #0c0910 0%, #08070b 100%);
}

.mode-background {
    position: absolute;
    inset: 78px 0 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 32%, rgba(255,255,255,.018) 32% 32.08%, transparent 32.08% 68%, rgba(255,255,255,.018) 68% 68.08%, transparent 68.08%),
        radial-gradient(circle at 50% 50%, rgba(166, 104, 215, .06), transparent 48%);
}

.mode-header { position: relative; z-index: 2; }

.mode-selection-content {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 5vh, 70px) clamp(30px, 6vw, 110px);
}

.mode-grid {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 42px);
}

.game-mode-card {
    position: relative;
    min-height: clamp(360px, 55vh, 560px);
    padding: 46px 30px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid rgba(211, 175, 242, .2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(47, 31, 58, .72), rgba(15, 11, 20, .94));
    color: #f4edf9;
    text-align: center;
    font: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.34);
}

.game-mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 28%, rgba(188, 126, 232, .16), transparent 38%);
}

.game-mode-card.available { cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.game-mode-card.available:hover {
    transform: translateY(-7px);
    border-color: rgba(220, 177, 255, .55);
    box-shadow: 0 28px 85px rgba(0,0,0,.42), 0 0 32px rgba(157, 91, 205, .14);
}

.mode-kicker {
    position: relative;
    font-size: 10px;
    letter-spacing: .32em;
    color: rgba(218, 188, 241, .58);
}
.game-mode-card strong {
    position: relative;
    font-family: Georgia, serif;
    font-size: clamp(34px, 3.2vw, 54px);
    font-weight: 400;
    letter-spacing: .09em;
}
.mode-description {
    position: relative;
    max-width: 250px;
    min-height: 42px;
    font-size: 11px;
    line-height: 1.65;
    color: rgba(238, 228, 246, .52);
}
.mode-state {
    position: relative;
    margin-top: 34px;
    min-width: 150px;
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: .22em;
    color: rgba(255,255,255,.4);
}
.game-mode-card.unavailable {
    filter: grayscale(.9);
    opacity: .38;
    cursor: not-allowed;
}
.game-mode-card.unavailable::after {
    content: "LOCKED";
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: 7px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.45);
}

@media (max-width: 850px) {
    .mode-selection-content { align-items: flex-start; overflow-y: auto; }
    .mode-grid { grid-template-columns: 1fr; max-width: 520px; }
    .game-mode-card { min-height: 260px; }
}

/* ============================================================
   MAIN MENU — LEFT GAME NAVIGATION
   Large left-side navigation with animated hover treatment.
============================================================ */
@media (min-width: 851px) {
    #main-menu {
        align-items: center;
        justify-content: flex-start;
        padding-left: clamp(58px, 7vw, 140px);
    }

    .main-menu-content {
        width: min(470px, 42vw);
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        transform: translateY(-6px);
    }

    .game-emblem {
        margin-left: 12px;
    }

    .game-title-container {
        width: min(420px, 100%);
    }

    .game-subtitle {
        margin-left: 2px;
    }

    .main-navigation {
        width: min(440px, 100%);
        margin-top: 54px;
        gap: 3px;
        align-items: stretch;
    }

    .menu-button,
    .menu-button-primary {
        width: 100%;
        height: 76px;
        grid-template-columns: 22px 1fr auto;
        padding: 0 18px 0 20px;
        border: 0;
        border-left: 2px solid rgba(205, 172, 245, .14);
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        overflow: visible;
        transform: none;
        transition:
            padding-left .25s cubic-bezier(.2,.8,.2,1),
            border-color .25s ease,
            background .25s ease,
            filter .25s ease;
    }

    .menu-button::before {
        top: 0;
        bottom: 0;
        left: 0;
        width: 0;
        height: auto;
        transform: none;
        opacity: 0;
        background: linear-gradient(90deg,
            rgba(177, 116, 235, .18),
            rgba(135, 86, 203, .075) 48%,
            transparent 100%);
        box-shadow: inset 18px 0 38px rgba(173, 112, 232, .05);
        transition: width .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }

    .menu-button::after {
        left: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        transform: none;
        opacity: 0;
        background: linear-gradient(90deg,
            #d5b5ff 0%,
            rgba(178, 122, 239, .72) 48%,
            transparent 100%);
        box-shadow: 0 0 12px rgba(194, 146, 255, .72);
        transition: width .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }

    .menu-button:hover,
    .menu-button-primary:hover {
        padding-left: 34px;
        transform: none;
        border-color: rgba(219, 188, 255, .92);
        background: transparent;
        box-shadow: none;
    }

    .menu-button:hover::before {
        left: 0;
        width: 100%;
        opacity: 1;
    }

    .menu-button:hover::after {
        width: 94%;
        opacity: 1;
    }

    .menu-button-symbol {
        position: relative;
        z-index: 2;
        justify-self: start;
        opacity: .48;
        transform: scale(.8);
        transition: opacity .22s ease, transform .22s ease, color .22s ease;
    }

    .menu-button:hover .menu-button-symbol {
        opacity: 1;
        transform: scale(1.18) rotate(45deg);
        color: #eadcff;
    }

    .menu-button-content {
        position: relative;
        z-index: 2;
        gap: 6px;
    }

    .menu-button-content strong {
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: .18em;
        text-shadow: 0 0 0 transparent;
        transition: color .22s ease, text-shadow .22s ease, letter-spacing .22s ease;
    }

    .menu-button:hover .menu-button-content strong {
        color: #fff;
        letter-spacing: .22em;
        text-shadow: 0 0 20px rgba(205, 166, 255, .5);
    }

    .menu-button-content small {
        font-size: 8px;
        letter-spacing: .14em;
        transition: color .22s ease;
    }

    .menu-button:hover .menu-button-content small {
        color: rgba(244, 235, 255, .68);
    }

    .menu-button.locked,
    .menu-button.locked:hover {
        padding-left: 20px;
        opacity: .3;
        border-left-color: rgba(255,255,255,.1);
        background: transparent;
        box-shadow: none;
        filter: grayscale(.7);
    }

    .menu-button.locked:hover::before,
    .menu-button.locked:hover::after {
        width: 0;
        opacity: 0;
    }

    .menu-button.locked:hover .menu-button-symbol {
        opacity: .48;
        transform: scale(.8);
    }

    .menu-button.locked:hover .menu-button-content strong {
        color: var(--text);
        letter-spacing: .18em;
        text-shadow: none;
    }

    .menu-footer {
        margin-left: 20px;
    }
}

/* ============================================================
   MAIN MENU — TITLE CENTERED + LARGER LEFT NAV
   Keep the game identity at the top-center while navigation
   remains vertically centered on the left.
============================================================ */
@media (min-width: 851px) {
    #main-menu .main-menu-content {
        width: min(520px, 44vw);
        min-height: 100%;
        justify-content: center;
        transform: none;
    }

    #main-menu .game-emblem {
        position: fixed;
        z-index: 8;
        top: 34px;
        left: 50%;
        margin: 0;
        transform: translateX(-50%) rotate(45deg) scale(.72);
    }

    #main-menu .game-title-container {
        position: fixed;
        z-index: 8;
        top: 112px;
        left: 50%;
        width: min(650px, 55vw);
        transform: translateX(-50%);
    }

    #main-menu .game-title-container h1 {
        font-size: clamp(62px, 5vw, 86px);
    }

    #main-menu .game-subtitle {
        position: fixed;
        z-index: 8;
        top: 205px;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
        font-size: 9px;
        white-space: nowrap;
    }

    #main-menu .main-navigation {
        width: min(500px, 100%);
        margin-top: 0;
    }

    #main-menu .menu-button,
    #main-menu .menu-button-primary {
        height: 92px;
        grid-template-columns: 28px 1fr auto;
        padding-left: 24px;
    }

    #main-menu .menu-button:hover,
    #main-menu .menu-button-primary:hover {
        padding-left: 40px;
    }

    #main-menu .menu-button-content strong {
        font-size: 27px;
    }

    #main-menu .menu-button-content small {
        font-size: 10px;
    }

    #main-menu .menu-button-symbol {
        font-size: 13px;
    }

    #main-menu .menu-button.locked,
    #main-menu .menu-button.locked:hover {
        padding-left: 24px;
    }

    #main-menu .menu-footer {
        margin-top: 12px;
        margin-left: 24px;
    }
}

/* ============================================================
   COLLECTION V1.2 — LEFT FILTER SIDEBAR
============================================================ */
#collection-screen .collection-content {
    display: grid;
    grid-template-columns: clamp(210px, 17vw, 270px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 3vw, 54px);
    padding: 38px clamp(28px, 4vw, 70px) 70px;
}

#collection-screen .collection-tools {
    position: sticky;
    top: 20px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 18px 0 18px 18px;
    border-left: 1px solid rgba(185, 135, 245, .20);
}

#collection-screen .collection-tools::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 16px;
    width: 1px;
    height: 72px;
    background: linear-gradient(to bottom, transparent, rgba(185,125,255,.95), transparent);
    box-shadow: 0 0 14px rgba(170,105,255,.55);
}

#collection-screen .collection-search-wrap,
#collection-screen .collection-rarity-wrap {
    width: 100%;
    gap: 9px;
    font-size: 8px;
    letter-spacing: .20em;
}

#collection-screen .collection-tools input,
#collection-screen .collection-tools select {
    height: 46px;
    font-size: 12px;
}

#collection-screen #collection-grid.collection-grid {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px clamp(18px, 2vw, 34px);
}

@media (max-width: 980px) {
    #collection-screen .collection-content {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
        padding-left: 18px;
        padding-right: 18px;
    }
    #collection-screen #collection-grid.collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #collection-screen .collection-content {
        display: block;
        padding: 22px 14px 50px;
    }
    #collection-screen .collection-tools {
        position: static;
        margin-bottom: 22px;
        padding: 0;
        border-left: 0;
    }
    #collection-screen .collection-tools::before { display: none; }
    #collection-screen #collection-grid.collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }
}


/* ============================================================
   COLLECTION V1.3 — RARITY MULTI-CHECKBOX FILTER
============================================================ */
#collection-screen .collection-rarity-wrap {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
#collection-screen .collection-rarity-wrap legend {
    margin: 0 0 12px;
    padding: 0;
    color: rgba(255,255,255,.48);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .20em;
}
#collection-screen .rarity-checkboxes {
    display: grid;
    gap: 8px;
}
#collection-screen .rarity-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
#collection-screen .rarity-check:hover {
    color: rgba(255,255,255,.96);
    background: rgba(145,90,210,.08);
    border-color: rgba(190,140,245,.16);
    transform: translateX(2px);
}
#collection-screen .rarity-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#collection-screen .rarity-box {
    position: relative;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(210,180,255,.32);
    border-radius: 3px;
    background: rgba(15,12,20,.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: all .18s ease;
}
#collection-screen .rarity-check input:checked + .rarity-box {
    border-color: rgba(205,165,255,.92);
    background: linear-gradient(135deg, rgba(120,65,190,.92), rgba(185,115,255,.92));
    box-shadow: 0 0 12px rgba(165,95,255,.42), inset 0 0 8px rgba(255,255,255,.16);
}
#collection-screen .rarity-check input:checked + .rarity-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#collection-screen .rarity-check:has(input:checked) {
    color: rgba(240,225,255,.98);
    background: rgba(145,90,210,.09);
}


/* ============================================================
   COLLECTION V1.4 — CENTERED CARD NAME + RARITY IDENTITY
============================================================ */
#collection-screen .collection-card .card-name {
    width: 100%;
    margin-top: 13px;
    text-align: center;
    color: rgba(250, 247, 255, .96);
    font-size: clamp(15px, 1.15vw, 20px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: .045em;
    text-shadow: 0 0 14px rgba(220, 205, 255, .12);
}

#collection-screen .collection-card .card-rarity {
    display: block;
    width: 100%;
    margin-top: 7px;
    text-align: center;
    font-size: clamp(10px, .78vw, 13px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#collection-screen .collection-card .card-rarity[data-rarity="RARE"] {
    color: #55e879;
    text-shadow: 0 0 10px rgba(85, 232, 121, .42);
}

#collection-screen .collection-card .card-rarity[data-rarity="SUPER RARE"] {
    color: #55a9ff;
    text-shadow: 0 0 10px rgba(85, 169, 255, .44);
}

#collection-screen .collection-card .card-rarity[data-rarity="EPIC"] {
    color: #b66cff;
    text-shadow: 0 0 11px rgba(182, 108, 255, .46);
}

#collection-screen .collection-card .card-rarity[data-rarity="MYTHIC"] {
    color: #ff5368;
    text-shadow: 0 0 11px rgba(255, 83, 104, .48);
}

#collection-screen .collection-card .card-rarity[data-rarity="LEGENDARY"] {
    color: #ffd65a;
    text-shadow: 0 0 12px rgba(255, 190, 45, .52);
}

#collection-screen .collection-card .card-rarity[data-rarity="SINGULARITY"] {
    color: transparent;
    background: linear-gradient(90deg, #ff4f72, #ffd84f, #63f28d, #54c8ff, #a96dff, #ff4fbc, #ff4f72);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 7px rgba(180, 115, 255, .34));
    animation: singularity-rarity-flow 7s linear infinite;
}

@keyframes singularity-rarity-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 240% 50%; }
}

/* ============================================================
   TEAM SELECTION V1.4 — MATCH COLLECTION NAME + RARITY STYLE
============================================================ */
#team-screen .collection-card .card-name {
    width: 100%;
    margin-top: 13px;
    text-align: center;
    color: rgba(250, 247, 255, .96);
    font-size: clamp(15px, 1.15vw, 20px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: .045em;
    text-shadow: 0 0 14px rgba(220, 205, 255, .12);
}

#team-screen .collection-card .card-rarity {
    display: block;
    width: 100%;
    margin-top: 7px;
    text-align: center;
    font-size: clamp(10px, .78vw, 13px);
    font-weight: 850;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#team-screen .collection-card .card-rarity[data-rarity="RARE"] {
    color: #55e879;
    text-shadow: 0 0 10px rgba(85, 232, 121, .42);
}
#team-screen .collection-card .card-rarity[data-rarity="SUPER RARE"] {
    color: #55a9ff;
    text-shadow: 0 0 10px rgba(85, 169, 255, .44);
}
#team-screen .collection-card .card-rarity[data-rarity="EPIC"] {
    color: #b66cff;
    text-shadow: 0 0 11px rgba(182, 108, 255, .46);
}
#team-screen .collection-card .card-rarity[data-rarity="MYTHIC"] {
    color: #ff5368;
    text-shadow: 0 0 11px rgba(255, 83, 104, .48);
}
#team-screen .collection-card .card-rarity[data-rarity="LEGENDARY"] {
    color: #ffd65a;
    text-shadow: 0 0 12px rgba(255, 190, 45, .52);
}
#team-screen .collection-card .card-rarity[data-rarity="SINGULARITY"] {
    color: transparent;
    background: linear-gradient(90deg, #ff4f72, #ffd84f, #63f28d, #54c8ff, #a96dff, #ff4fbc, #ff4f72);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 7px rgba(180, 115, 255, .34));
    animation: singularity-rarity-flow 7s linear infinite;
}


/* ============================================================
   ONLINE MATCHMAKING — WAITING SCREEN
============================================================ */
#matchmaking-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(128, 68, 214, .16), transparent 34%),
        rgba(4, 3, 9, .94);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
}
#matchmaking-overlay::before {
    content: "";
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 0deg, transparent, rgba(165, 96, 255, .06), transparent 28%);
    animation: queue-bg-spin 10s linear infinite;
}
#matchmaking-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.matchmaking-panel {
    position: relative;
    z-index: 1;
    width: min(590px, calc(100vw - 40px));
    padding: 58px 44px 42px;
    text-align: center;
    border: 1px solid rgba(186, 127, 255, .34);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(28, 18, 45, .97), rgba(9, 7, 16, .98));
    box-shadow: 0 0 70px rgba(129, 65, 224, .19), inset 0 1px rgba(255,255,255,.04);
}
.matchmaking-eyebrow { margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .3em; color: #ad89db; }
#matchmaking-title { margin: 0; font-size: clamp(25px, 4vw, 39px); letter-spacing: .08em; color: #f7f1ff; text-shadow: 0 0 24px rgba(190,135,255,.2); }
.matchmaking-search-core {
    position: relative; width: 82px; height: 82px; margin: 30px auto 24px;
    display: grid; place-items: center;
}
.matchmaking-search-core::before, .matchmaking-search-core::after {
    content: ""; position: absolute; inset: 0; border: 1px solid rgba(190,128,255,.35); transform: rotate(45deg); animation: queue-pulse 1.8s ease-in-out infinite;
}
.matchmaking-search-core::after { inset: 13px; animation-delay: -.9s; }
.matchmaking-diamond { width: 17px; height: 17px; transform: rotate(45deg); background: #c99aff; box-shadow: 0 0 22px #9c5cff; }
#matchmaking-status { margin: 0; color: #b5a9c3; font-size: 14px; letter-spacing: .03em; }
#matchmaking-timer { margin: 18px 0 26px; color: #eee4fb; font: 700 18px/1 monospace; letter-spacing: .12em; }
#matchmaking-cancel {
    min-width: 170px; padding: 12px 25px; border: 1px solid rgba(196,139,255,.42); border-radius: 9px;
    background: rgba(117,65,174,.12); color: #d9c5ef; font-weight: 800; letter-spacing: .13em; cursor: pointer;
    transition: .2s ease;
}
#matchmaking-cancel:hover { background: rgba(145,79,219,.24); border-color: rgba(213,169,255,.7); color: white; box-shadow: 0 0 22px rgba(155,87,230,.16); }
#matchmaking-cancel:disabled { opacity: .35; cursor: default; }
@keyframes queue-pulse { 0%,100% { transform: rotate(45deg) scale(.82); opacity:.28; } 50% { transform: rotate(45deg) scale(1.08); opacity:1; } }
@keyframes queue-bg-spin { to { transform: rotate(360deg); } }

/* ONLINE RESIGN + SERVER TURN TIMER */
.battle-exit-button {
    width: auto;
    min-width: 82px;
    padding: 0 14px;
    border-color: rgba(255, 105, 125, .24);
    color: rgba(255, 190, 200, .82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}
.battle-exit-button:hover {
    color: #fff;
    border-color: rgba(255, 105, 125, .58);
    background: rgba(180, 30, 55, .16);
}
.online-turn-timer {
    margin-top: 0;
    text-align: right;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .12em;
    color: rgba(255,255,255,.92);
    font-variant-numeric: tabular-nums;
}
.online-turn-timer.danger { color: #ff738c; }

.resign-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    place-items: center;
    background: rgba(4,3,8,.72);
    backdrop-filter: blur(14px);
}
.resign-confirm-overlay.open { display: grid; }
.resign-confirm-panel {
    width: min(420px, calc(100% - 32px));
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(220,190,255,.18);
    background: linear-gradient(180deg, rgba(24,18,34,.98), rgba(10,8,15,.98));
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.resign-confirm-panel h2 { margin: 0 0 10px; letter-spacing: .08em; }
.resign-confirm-panel p { margin: 0 0 24px; color: rgba(255,255,255,.62); }
.resign-confirm-actions { display: flex; gap: 12px; justify-content: center; }
.resign-confirm-actions button {
    min-width: 120px; min-height: 42px; padding: 0 18px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: white;
    font-weight: 800; letter-spacing: .08em;
}
#confirm-resign { border-color: rgba(255,90,115,.5); background: rgba(170,25,50,.18); }

/* ACCOUNT SYSTEM */
.auth-gate, .account-overlay { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgba(92,48,145,.24), rgba(4,3,9,.96) 48%, #030207); backdrop-filter: blur(18px); }
.auth-gate.hidden { display: none; }
.auth-panel, .account-panel { width: min(460px, 100%); padding: 38px; border: 1px solid rgba(194,143,255,.28); background: linear-gradient(180deg, rgba(24,16,38,.98), rgba(8,6,13,.99)); box-shadow: 0 28px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04); text-align: center; }
.auth-emblem { width: 48px; height: 48px; margin: 0 auto 12px; display:grid; place-items:center; transform: rotate(45deg); border:1px solid rgba(202,154,255,.45); color:#d6b2ff; }
.auth-emblem::first-letter { transform: rotate(-45deg); }
.auth-eyebrow { margin:0 0 8px; color:#a98acb; font-size:10px; font-weight:900; letter-spacing:.28em; }
.auth-panel h1 { margin:0 0 26px; color:#fff; font-size:28px; letter-spacing:.1em; }
.auth-panel h1 span { display:block; margin-top:5px; color:#9d82ba; font-size:10px; letter-spacing:.32em; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1); }
.auth-tab { padding:12px 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:#776d83; cursor:pointer; font-weight:900; letter-spacing:.1em; }
.auth-tab.active { color:#e6d6f8; border-bottom-color:#b679f2; }
#auth-form { display:grid; gap:16px; text-align:left; }
#auth-form label { display:grid; gap:7px; color:#a99cb8; font-size:10px; font-weight:900; letter-spacing:.14em; }
#auth-form input, #delete-confirmation { min-height:44px; padding:0 13px; border:1px solid rgba(255,255,255,.12); outline:none; background:rgba(255,255,255,.035); color:#fff; font:inherit; }
#auth-form input:focus, #delete-confirmation:focus { border-color:rgba(190,125,255,.65); box-shadow:0 0 0 3px rgba(157,85,220,.1); }
#auth-submit { min-height:46px; margin-top:2px; border:1px solid rgba(194,132,255,.5); background:linear-gradient(90deg, rgba(111,55,169,.55), rgba(75,38,123,.55)); color:#fff; cursor:pointer; font-weight:900; letter-spacing:.14em; }
.auth-note { margin:18px 0 0; color:#71677c; font-size:11px; }
.auth-error { min-height:16px; margin:0; color:#ff7890; font-size:11px; text-align:center; }
.account-overlay { display:none; z-index:19000; }
.account-overlay.open { display:grid; }
.account-panel { position:relative; }
.account-close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#998da5; font-size:28px; cursor:pointer; }
.account-panel h2 { margin:8px 0 4px; color:#fff; letter-spacing:.08em; }
.account-id { margin:0 0 26px; color:#756a82; font:700 11px monospace; }
.account-action, #delete-account-button { width:100%; min-height:44px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04); color:#eee6f6; cursor:pointer; font-weight:900; letter-spacing:.1em; }
.danger-zone { display:grid; gap:10px; margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,90,110,.18); text-align:left; }
.danger-zone strong { color:#ff8a9d; font-size:11px; letter-spacing:.14em; }
.danger-zone p { margin:0; color:#7d707f; font-size:11px; }
#delete-account-button { border-color:rgba(255,82,105,.35); color:#ff9baa; background:rgba(160,25,45,.1); }
@media (max-width: 520px) { .auth-panel,.account-panel { padding:28px 20px; } }


/* V0 FINAL — FRIENDS & FRIENDLY BATTLES */
.friends-overlay,.friendly-challenge-overlay{position:fixed;inset:0;z-index:12000;display:none;place-items:center;background:rgba(4,5,12,.82);backdrop-filter:blur(12px)}
.friends-overlay.open,.friendly-challenge-overlay.open{display:grid}.friends-panel,.friendly-challenge-panel{width:min(760px,92vw);max-height:84vh;overflow:auto;padding:28px;border:1px solid rgba(174,132,255,.35);background:linear-gradient(145deg,rgba(20,17,38,.98),rgba(7,8,18,.98));box-shadow:0 25px 80px rgba(0,0,0,.55),0 0 45px rgba(125,76,255,.14)}
.friends-head{display:flex;align-items:center;justify-content:space-between}.friends-head h2{margin:3px 0 18px;font-size:32px}.friends-head>button{font-size:30px;background:none;border:0;color:white;cursor:pointer}.friends-search{display:flex;gap:10px}.friends-search input{flex:1;padding:13px 15px;background:#0c0d18;border:1px solid rgba(255,255,255,.14);color:white}.friends-search button,.friend-row button,.friendly-challenge-panel button{padding:10px 14px;border:1px solid rgba(172,125,255,.45);background:rgba(107,62,190,.2);color:white;cursor:pointer}.friends-panel h3{margin:24px 0 8px;font-size:13px;letter-spacing:.18em;color:#bca8ed}.friend-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.08)}.friend-row strong,.friend-row small{display:block}.friend-row small{margin-top:4px;color:#999}.friend-row>div:last-child{display:flex;gap:7px;align-items:center}.friends-empty,#friends-message{color:#999}.friendly-challenge-panel{text-align:center;width:min(480px,90vw)}.friendly-challenge-panel h2{margin:10px 0}.friendly-challenge-panel>div{display:flex;justify-content:center;gap:12px;margin-top:22px}

/* V0 FINAL — RIGHT FRIENDS SIDEBAR */
.friends-dock-button{position:fixed;z-index:11990;top:118px;right:24px;height:44px;padding:0 16px;border:1px solid rgba(173,132,255,.32);background:rgba(10,9,20,.72);backdrop-filter:blur(14px);color:#f5efff;font:600 12px/1 Georgia,serif;letter-spacing:.2em;cursor:pointer;box-shadow:0 10px 35px rgba(0,0,0,.28);transition:.22s ease}.friends-dock-button:hover,.friends-dock-button[aria-expanded="true"]{border-color:rgba(190,154,255,.7);background:rgba(38,25,65,.88);transform:translateY(-1px)}.friends-dock-button>span:last-child{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:9px;border-radius:99px;background:rgba(150,105,245,.22);font:700 10px Arial,sans-serif;letter-spacing:0}.friends-dock-dot{display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#8ef2bd;box-shadow:0 0 10px #8ef2bd}
.friends-overlay{display:none!important}.friends-sidebar{position:fixed;z-index:12000;top:102px;right:0;bottom:0;width:min(390px,94vw);transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none;border-left:1px solid rgba(172,132,255,.24);background:linear-gradient(180deg,rgba(12,10,23,.98),rgba(6,7,15,.985));box-shadow:-28px 0 70px rgba(0,0,0,.42)}.friends-sidebar.open{transform:translateX(0);pointer-events:auto}.friends-sidebar .friends-panel{width:auto;max-height:none;height:100%;overflow-y:auto;padding:25px 22px 34px;border:0;background:none;box-shadow:none}.friends-head{position:sticky;top:-25px;z-index:2;margin:-25px -22px 0;padding:25px 22px 14px;background:linear-gradient(180deg,#0d0b19 78%,rgba(13,11,25,0))}.friends-head h2{margin:2px 0 0;font-size:27px;letter-spacing:.16em}.friends-head>button{font-size:26px}.friends-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 14px}.friends-tabs button{padding:11px 7px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);color:#aaa3b7;font-size:10px;letter-spacing:.11em;cursor:pointer}.friends-tabs button:hover,.friends-tabs button.active{color:#fff;border-color:rgba(174,132,255,.48);background:rgba(121,74,205,.15)}#friend-request-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:50%;background:#6e45b5;color:#fff;font-size:9px}.friends-view{display:none}.friends-view.active{display:block}.friends-group{margin-top:18px}.friends-group h4,.friends-requests-view h4{display:flex;justify-content:space-between;margin:0 0 8px;color:#928aa2;font-size:10px;letter-spacing:.2em}.friends-group h4 span{color:#665e70}.friend-entry{border-top:1px solid rgba(255,255,255,.06)}.friend-main{display:flex;width:100%;align-items:center;gap:10px;padding:13px 4px;border:0;background:transparent;color:#eee;text-align:left;cursor:pointer}.friend-main:hover{background:linear-gradient(90deg,rgba(130,83,210,.1),transparent)}.friend-main>span:nth-child(2){flex:1}.friend-main strong,.friend-main small,.request-card strong,.request-card small,.search-player strong,.search-player small{display:block}.friend-main strong{font-size:13px;letter-spacing:.05em}.friend-main small,.request-card small,.search-player small{margin-top:3px;color:#716b7a;font-size:9px}.friend-main b{color:#776b8c;font:400 17px Arial}.presence{flex:0 0 auto;width:7px;height:7px;border-radius:50%}.presence.online{background:#72e8a7;box-shadow:0 0 9px rgba(114,232,167,.6)}.presence.offline{background:#55515d}.friend-actions{display:grid;gap:6px;padding:0 8px 13px 21px}.friend-actions button,.request-card button,.search-player button{padding:9px 10px;border:1px solid rgba(171,126,255,.32);background:rgba(108,65,182,.11);color:#ddd;font-size:9px;letter-spacing:.12em;cursor:pointer}.friend-actions button:hover,.request-card button:hover,.search-player button:hover{border-color:rgba(188,151,255,.65);background:rgba(122,76,201,.22);color:#fff}.friend-actions button:disabled{opacity:.35;cursor:not-allowed}.danger-soft{border-color:rgba(211,96,126,.22)!important;color:#c792a0!important;background:rgba(120,35,60,.06)!important}.friends-subhead{display:flex;align-items:center;gap:11px;margin:18px 0}.friends-subhead .friends-back{width:32px;height:32px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#ddd;font-size:22px;cursor:pointer}.friends-subhead small{color:#746b83;font-size:8px;letter-spacing:.2em}.friends-subhead h3{margin:2px 0 0!important;color:#e8e1f3!important;font-size:16px!important;letter-spacing:.13em}.friends-search{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:14px}.friends-search input{min-width:0}.search-player,.request-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 3px;border-bottom:1px solid rgba(255,255,255,.065)}.search-player>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.search-player>div:first-child small{grid-column:2}.request-card>div:last-child{display:flex;gap:5px}.request-state{color:#827a90;font-size:9px;letter-spacing:.12em}.friends-empty,#friends-message{font-size:10px;line-height:1.5;color:#746e7e}#friends-message{min-height:15px;margin:8px 0}.friend-collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.friend-collection-card{min-width:0;text-align:center}.friend-collection-card img{display:block;width:100%;border:1px solid rgba(255,255,255,.09)}.friend-collection-card strong{display:block;margin-top:6px;font-size:10px}.friend-collection-card small{color:#8d829d;font-size:8px;letter-spacing:.12em}.friendly-challenge-overlay{z-index:12100}
@media(max-width:700px){.friends-dock-button{top:110px;right:12px}.friends-sidebar{top:96px;width:min(360px,100vw)}}

/* V0 Friends dock alignment fix */
.friends-dock-button{
  top:0;
  right:0;
  width:min(390px,94vw);
  height:64px;
  padding:0 22px;
  border-top:0;
  border-right:0;
  transform:none!important;
}
.friends-sidebar{
  top:64px;
}
@media(max-width:700px){
  .friends-dock-button{top:0;right:0;width:min(360px,100vw);height:60px}
  .friends-sidebar{top:60px;width:min(360px,100vw)}
}


/* V0 FINAL — SOCIAL UX POLISH */
#friends-add-view,#friends-requests-view{padding-top:12px}
#friends-requests-view>h4{margin-top:10px}
.challenge-group{margin-top:6px!important;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(174,132,255,.18)}
.challenge-card{display:grid;gap:9px;padding:12px 4px;border-top:1px solid rgba(255,255,255,.07)}
.challenge-card strong,.challenge-card small{display:block}.challenge-card strong{font-size:12px}.challenge-card small{margin-top:4px;color:#756d82;font-size:8px;letter-spacing:.15em}.challenge-card>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:6px}.challenge-card button{padding:9px;border:1px solid rgba(171,126,255,.32);background:rgba(108,65,182,.11);color:#ddd;font-size:9px;letter-spacing:.12em;cursor:pointer}
.friends-dock-button.has-attention::after{content:attr(data-attention);position:absolute;top:9px;right:10px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:20px;background:#a74cff;color:#fff;font:800 9px Arial,sans-serif;letter-spacing:0;box-shadow:0 0 14px rgba(167,76,255,.65)}
.social-toast-stack{position:fixed;right:22px;bottom:22px;z-index:20000;display:grid;gap:10px;width:min(340px,calc(100vw - 30px));pointer-events:none}.social-toast{transform:translateX(calc(100% + 30px));opacity:0;padding:16px 18px;border:1px solid rgba(179,139,255,.4);background:linear-gradient(135deg,rgba(23,17,40,.97),rgba(8,9,18,.98));box-shadow:0 16px 45px rgba(0,0,0,.5),0 0 28px rgba(123,76,210,.12);transition:transform .3s ease,opacity .3s ease}.social-toast.show{transform:translateX(0);opacity:1}.social-toast strong,.social-toast span{display:block}.social-toast strong{color:#e6d8ff;font-size:10px;letter-spacing:.16em}.social-toast span{margin-top:7px;color:#fff;font-size:13px}
@media(max-width:700px){.social-toast-stack{right:12px;bottom:12px}}


/* V0 FIX — FRIEND COLLECTION EXACTLY MIRRORS OWN COLLECTION */
/* ============================================================
   COLLECTION V1.2 — LEFT FILTER SIDEBAR
============================================================ */





/* ============================================================
   COLLECTION V1.3 — RARITY MULTI-CHECKBOX FILTER
============================================================ */
/* ============================================================
   COLLECTION V1.4 — CENTERED CARD NAME + RARITY IDENTITY
============================================================ */



/* === V0 FINAL - friend collection alignment fix ===
   Same centered two-column geometry and 3-card grid as COLLECTION. */



/* ============================================================
   RIFT BATTLEGROUND V0 — CINEMATIC MAIN MENU (FINAL ART)
   Artwork stays clean; all UI remains real HTML/CSS.
============================================================ */
#main-menu{
  position:relative;
  overflow:hidden;
  align-items:stretch;
  justify-content:flex-start;
  background:#050711 url("assets/ui/main-menu-background.png") center center / cover no-repeat !important;
}
#main-menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(3,5,13,.94) 0%,rgba(3,5,13,.82) 13%,rgba(3,5,13,.42) 27%,rgba(3,5,13,.06) 43%,transparent 58%);
}
#main-menu::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 0 110px rgba(0,0,0,.46);
}
#main-menu .menu-background,
#main-menu .menu-decoration{display:none!important}
#main-menu .main-menu-content{
  position:relative!important;
  z-index:5!important;
  width:min(430px,31vw)!important;
  min-height:100%!important;
  margin:0!important;
  padding:clamp(38px,5vh,72px) 0 30px clamp(44px,6vw,105px)!important;
  box-sizing:border-box!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
  transform:none!important;
}
#main-menu .game-emblem{display:none!important}
#main-menu .game-title-container{
  position:relative!important;
  top:auto!important;left:auto!important;
  width:auto!important;max-width:none!important;
  margin:0 0 clamp(42px,6vh,74px)!important;
  padding:0!important;
  transform:none!important;
  text-align:center!important;
}
#main-menu .game-title-container::before{
  content:"✦";
  position:absolute;
  top:-20px;left:50%;
  transform:translateX(-50%);
  color:#cdd6ff;
  font-size:32px;
  text-shadow:0 0 9px #655cff,0 0 24px #655cff;
}
#main-menu .game-title-container h1{
  width:auto!important;
  margin:0!important;
  color:#f8f7ff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(52px,4.4vw,76px)!important;
  line-height:.9!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
  white-space:nowrap!important;
  text-shadow:0 2px 5px rgba(0,0,0,.85),0 0 24px rgba(100,94,255,.28)!important;
}
#main-menu .game-subtitle{
  position:relative!important;
  top:auto!important;left:auto!important;
  margin:10px 0 0!important;
  transform:none!important;
  color:#eeeaff!important;
  font:400 clamp(15px,1.25vw,21px)/1 Georgia,"Times New Roman",serif!important;
  letter-spacing:.34em!important;
  white-space:nowrap!important;
  text-shadow:0 2px 5px #000,0 0 14px rgba(102,91,255,.38)!important;
}
#main-menu .title-line{display:none!important}
#main-menu .main-navigation{
  position:relative!important;
  width:min(360px,100%)!important;
  margin:0!important;
  padding-left:28px;
  border-left:1px solid rgba(211,218,255,.5);
}
#main-menu .menu-button,
#main-menu .menu-button-primary{
  position:relative;
  width:100%!important;
  height:82px!important;
  display:grid!important;
  grid-template-columns:28px 1fr auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 16px 0 12px!important;
  border:0!important;
  border-bottom:1px solid rgba(220,225,255,.18)!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  text-align:left!important;
  overflow:visible!important;
}
#main-menu .menu-button::before,
#main-menu .menu-button-primary::before{
  content:""!important;
  position:absolute!important;
  left:-29px!important;right:100%!important;
  top:0!important;bottom:0!important;
  width:auto!important;height:auto!important;
  opacity:0!important;
  background:linear-gradient(90deg,rgba(67,79,196,.36),rgba(79,89,220,.12),transparent)!important;
  border:0!important;
  transition:.22s ease!important;
}
#main-menu .menu-button:hover::before,
#main-menu .menu-button-primary:hover::before{
  right:0!important;
  opacity:1!important;
}
#main-menu .menu-button::after,
#main-menu .menu-button-primary::after{display:none!important}
#main-menu .menu-button:hover,
#main-menu .menu-button-primary:hover{padding-left:18px!important;transform:none!important}
#main-menu .menu-button-symbol{
  position:absolute!important;
  left:-39px!important;
  top:50%!important;
  transform:translateY(-50%) rotate(45deg)!important;
  display:grid!important;
  place-items:center!important;
  width:19px!important;height:19px!important;
  color:transparent!important;
  font-size:0!important;
  border:1px solid rgba(226,230,255,.9)!important;
  background:rgba(7,10,22,.8)!important;
  box-shadow:0 0 9px rgba(114,111,255,.25)!important;
}
#main-menu .menu-button:hover .menu-button-symbol,
#main-menu .menu-button-primary:hover .menu-button-symbol{
  border-color:#fff!important;
  background:#686dff!important;
  box-shadow:0 0 12px #676cff,0 0 25px rgba(103,108,255,.65)!important;
}
#main-menu .menu-button-content{grid-column:2!important}
#main-menu .menu-button-content strong{
  display:block!important;
  color:#f5f2ff!important;
  font:500 26px/1 Georgia,"Times New Roman",serif!important;
  letter-spacing:.04em!important;
  text-shadow:0 2px 5px #000!important;
}
#main-menu .menu-button-content small{
  display:block!important;
  margin-top:7px!important;
  color:#c6c4d0!important;
  font:400 11px/1.2 Georgia,"Times New Roman",serif!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
}
#main-menu .locked-tag{font-size:8px!important;opacity:.45!important}
#main-menu .menu-button.locked,
#main-menu .menu-button.locked:hover{opacity:.36!important;padding-left:12px!important;filter:none!important}
#main-menu .menu-footer{
  position:absolute!important;
  left:clamp(44px,6vw,105px)!important;
  bottom:28px!important;
  margin:0!important;
  color:rgba(235,235,246,.68)!important;
  font:400 10px Georgia,"Times New Roman",serif!important;
  letter-spacing:.12em!important;
}
body:has(#main-menu.active) .friends-dock-button{
  top:26px!important;right:26px!important;
  height:48px!important;
  width:auto!important;
  padding:0 18px!important;
  border:1px solid rgba(220,225,255,.18)!important;
  background:rgba(4,6,15,.74)!important;
  backdrop-filter:blur(12px)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  box-shadow:0 8px 30px rgba(0,0,0,.3)!important;
}
body:has(#main-menu.active) .friends-sidebar{top:74px!important}
@media(max-width:900px){
  #main-menu::before{background:linear-gradient(90deg,rgba(3,5,13,.92),rgba(3,5,13,.58) 48%,rgba(3,5,13,.12))}
  #main-menu .main-menu-content{width:min(390px,72vw)!important;padding-left:34px!important}
  #main-menu .game-title-container h1{font-size:48px!important}
  #main-menu .game-subtitle{font-size:14px!important}
  #main-menu .menu-footer{left:34px!important}
}

/* ============================================================
   RIFT BATTLEGROUND — REFERENCE-ACCURATE MENU OVERLAY
   Matches the approved cinematic mockup while keeping the art clean.
============================================================ */
#main-menu::before{
  background:linear-gradient(90deg,rgba(2,4,12,.86) 0%,rgba(2,4,12,.68) 17%,rgba(2,4,12,.26) 31%,rgba(2,4,12,.03) 44%,transparent 55%)!important;
}
#main-menu .main-menu-content{
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:clamp(390px,31vw,500px)!important;
  min-height:100%!important;
  padding:clamp(42px,6vh,68px) 0 40px clamp(54px,5.1vw,82px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  overflow:visible!important;
}
#main-menu .game-title-container{
  display:block!important;
  flex:none!important;
  position:relative!important;
  width:clamp(330px,27vw,435px)!important;
  height:auto!important;
  margin:0 0 clamp(42px,6vh,66px)!important;
  padding:0 0 20px!important;
  text-align:center!important;
  overflow:visible!important;
}
#main-menu .game-title-container::before{
  content:"✦"!important;
  top:-18px!important;
  left:50%!important;
  font-size:36px!important;
  color:#f1f1ff!important;
  text-shadow:0 0 7px #fff,0 0 14px #676cff,0 0 32px #5a55ff!important;
}
#main-menu .game-title-container::after{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(129,129,255,.85),transparent);
  box-shadow:0 0 9px rgba(100,98,255,.65);
}
#main-menu .game-title-container h1{
  display:block!important;
  width:100%!important;
  font-size:clamp(64px,5.3vw,88px)!important;
  line-height:.9!important;
  letter-spacing:.13em!important;
  padding-left:.13em!important;
  white-space:nowrap!important;
}
#main-menu .game-subtitle{
  display:block!important;
  width:100%!important;
  margin:13px 0 0!important;
  font-size:clamp(16px,1.38vw,23px)!important;
  line-height:1!important;
  letter-spacing:.36em!important;
  padding-left:.36em!important;
  white-space:nowrap!important;
}
#main-menu .main-navigation{
  width:clamp(340px,28vw,450px)!important;
  padding:0 0 0 28px!important;
  margin:0!important;
  border-left:1px solid rgba(230,233,255,.62)!important;
}
#main-menu .menu-button,
#main-menu .menu-button-primary{
  width:100%!important;
  height:clamp(82px,9.4vh,96px)!important;
  padding:0 20px 0 20px!important;
  grid-template-columns:1fr auto!important;
  border-bottom:1px solid rgba(225,228,255,.25)!important;
  transition:padding .2s ease,background .2s ease,box-shadow .2s ease!important;
}
#main-menu .menu-button::before,
#main-menu .menu-button-primary::before{
  left:0!important;
  right:0!important;
  top:5px!important;
  bottom:5px!important;
  width:auto!important;
  opacity:0!important;
  background:linear-gradient(90deg,rgba(70,83,215,.34) 0%,rgba(68,77,197,.17) 62%,transparent 100%)!important;
  border-top:1px solid rgba(126,139,255,.32)!important;
  border-bottom:1px solid rgba(126,139,255,.32)!important;
  box-shadow:inset 3px 0 0 #7c82ff,0 0 24px rgba(80,85,255,.08)!important;
}
#main-menu .menu-button-primary::before,
#main-menu .menu-button:hover::before,
#main-menu .menu-button-primary:hover::before{opacity:1!important;}
#main-menu .menu-button:hover,
#main-menu .menu-button-primary:hover{padding-left:26px!important;}
#main-menu .menu-button-symbol{
  left:-42px!important;
  width:25px!important;height:25px!important;
  border:1.5px solid rgba(239,241,255,.95)!important;
  background:#090c18!important;
  box-shadow:0 0 8px rgba(140,145,255,.4)!important;
  z-index:3!important;
}
#main-menu .menu-button-primary .menu-button-symbol,
#main-menu .menu-button:hover .menu-button-symbol{
  background:#fafaff!important;
  border-color:#fff!important;
  box-shadow:0 0 6px #fff,0 0 15px #6c73ff,0 0 30px #555cff!important;
}
#main-menu .menu-button-primary .menu-button-symbol::after,
#main-menu .menu-button:hover .menu-button-symbol::after{
  content:"";
  position:absolute;inset:5px;
  background:#626aff;
}
#main-menu .menu-button-content{grid-column:1!important;position:relative!important;z-index:2!important;}
#main-menu .menu-button-content strong{
  font-size:clamp(27px,2vw,34px)!important;
  line-height:1!important;
  letter-spacing:.025em!important;
}
#main-menu .menu-button-content small{
  margin-top:9px!important;
  font-size:clamp(11px,.8vw,13px)!important;
  color:#d0ced8!important;
}
#main-menu .menu-button.locked,
#main-menu .menu-button.locked:hover{opacity:.38!important;padding-left:20px!important;}
#main-menu .menu-footer{
  left:clamp(54px,5.1vw,82px)!important;
  bottom:30px!important;
  font-size:11px!important;
}
body:has(#main-menu.active) .friends-dock-button{
  top:26px!important;right:26px!important;
  min-width:190px!important;height:52px!important;
  padding:0 22px!important;
  font-size:15px!important;
  letter-spacing:.12em!important;
  border:1px solid rgba(225,229,255,.28)!important;
  background:rgba(4,6,15,.82)!important;
}
body:has(#main-menu.active) .friends-sidebar{top:78px!important;right:26px!important;}
@media(max-width:900px){
  #main-menu .main-menu-content{width:min(430px,78vw)!important;padding-left:34px!important;}
  #main-menu .game-title-container{width:340px!important;}
  #main-menu .game-title-container h1{font-size:58px!important;}
  #main-menu .game-subtitle{font-size:15px!important;}
  #main-menu .main-navigation{width:340px!important;}
  #main-menu .menu-footer{left:34px!important;}
}

/* ============================================================
   RIFT BATTLEGROUND — PNG LOGO (FINAL SIZE/POSITION FIX)
============================================================ */
#main-menu .game-title-container{
  display:block!important;
  position:relative!important;
  flex:none!important;
  width:clamp(285px,23vw,380px)!important;
  height:auto!important;
  margin:0 0 clamp(34px,4.5vh,50px)!important;
  padding:0!important;
  overflow:visible!important;
  text-align:left!important;
  isolation:auto!important;
}

#main-menu .game-title-container::before,
#main-menu .game-title-container::after{
  content:none!important;
  display:none!important;
}

#main-menu .game-title-container .title-line,
#main-menu .game-title-container h1,
#main-menu .game-title-container .game-subtitle{
  display:none!important;
}

#main-menu .rift-main-logo{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:380px!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left top!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.58)) drop-shadow(0 0 10px rgba(91,82,255,.20))!important;
}

#main-menu .main-navigation{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:900px){
  #main-menu .game-title-container{width:285px!important;}
  #main-menu .rift-main-logo{max-width:285px!important;}
}


/* === V0 UX REFRESH: SETTINGS + COMPACT FRIENDS === */
.settings-screen{background:radial-gradient(circle at 70% 15%,rgba(82,61,150,.18),transparent 35%),linear-gradient(135deg,#080a13,#0d0b18 55%,#07070d);color:#f5f2ff;overflow:auto}.settings-shell{width:min(1050px,calc(100% - 64px));margin:0 auto;padding:54px 0 80px}.settings-header{display:flex;align-items:center;gap:22px;padding-bottom:28px;border-bottom:1px solid rgba(210,205,255,.14)}.settings-header h1{margin:4px 0 0;font:500 clamp(34px,4vw,58px)/1 Georgia,serif;letter-spacing:.12em}.settings-back{width:48px;height:48px;border:1px solid rgba(205,198,255,.24);background:rgba(13,12,25,.65);color:#fff;font-size:25px;cursor:pointer}.settings-tabs{display:flex;gap:4px;margin-top:30px;border-bottom:1px solid rgba(210,205,255,.12)}.settings-tab{position:relative;padding:15px 28px;border:0;background:transparent;color:#858296;font:700 12px/1 Arial,sans-serif;letter-spacing:.18em;cursor:pointer}.settings-tab.active{color:#fff}.settings-tab.active::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:2px;background:#a78cff;box-shadow:0 0 14px #7d63ff}.settings-content{padding-top:38px}.settings-pane{display:none;max-width:820px}.settings-pane.active{display:block}.settings-pane h2{font:500 30px/1.1 Georgia,serif;letter-spacing:.08em;margin:7px 0 28px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:25px 0;border-top:1px solid rgba(210,205,255,.11);border-bottom:1px solid rgba(210,205,255,.11)}.setting-row strong{display:block;font:700 13px Arial,sans-serif;letter-spacing:.12em}.setting-row small{display:block;margin-top:7px;color:#918da1}.volume-control{display:flex;align-items:center;gap:16px;min-width:330px}.volume-control input{width:260px;accent-color:#9d7cff}.volume-control output{width:48px;text-align:right;color:#d9d2ff;font:700 12px Arial,sans-serif}.settings-pane .account-action{margin:4px 0 28px}.settings-pane .danger-zone{max-width:620px}.friends-dock-button{top:24px!important;right:26px!important;width:52px!important;height:52px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(7,8,17,.78)!important;border:1px solid rgba(221,218,255,.28)!important;backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(0,0,0,.35)!important;transform:none!important}.friends-dock-button svg{width:24px;height:24px;fill:none;stroke:#f7f5ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.friends-dock-button:hover,.friends-dock-button[aria-expanded="true"]{background:rgba(35,27,59,.92)!important;border-color:rgba(182,153,255,.72)!important;box-shadow:0 0 22px rgba(138,104,255,.25),0 8px 28px rgba(0,0,0,.35)!important}.friends-online-count{display:none!important}.friends-dock-button.has-attention::after{top:-3px!important;right:-3px!important;min-width:18px!important;height:18px!important}.friends-sidebar{top:0!important;right:0!important;height:100vh!important;width:min(360px,100vw)!important;padding-top:0!important}.friends-sidebar.open{transform:translateX(0)!important}.friends-head{padding-top:24px!important}.friends-dock-button[aria-expanded="true"]{right:376px!important}.friends-dock-button[aria-expanded="true"]::before{content:"";position:absolute;inset:-8px}.friends-sidebar .friends-panel{min-height:100vh!important}@media(max-width:700px){.settings-shell{width:calc(100% - 32px);padding-top:28px}.setting-row{align-items:flex-start;flex-direction:column}.volume-control{min-width:0;width:100%}.volume-control input{width:100%}.friends-dock-button[aria-expanded="true"]{right:12px!important;z-index:12010!important}.friends-sidebar{width:100vw!important}}

/* === UX HOTFIX 2026-09-26: FRIENDS DRAWER + ACCOUNT ACTION WIDTH === */
/* Closed state: compact circular social button fixed at the top-right. */
.friends-dock-button {
  top: 24px !important;
  right: 24px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}
.friends-dock-button svg {
  width: 23px !important;
  height: 23px !important;
}
/* Open state: drawer starts at the very top and visually replaces the button. */
.friends-sidebar {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: min(390px, 100vw) !important;
  z-index: 12000 !important;
}
.friends-sidebar.open {
  transform: translateX(0) !important;
}
.friends-sidebar .friends-panel {
  min-height: 100vh !important;
  height: 100% !important;
}
.friends-dock-button[aria-expanded="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Keep the drawer close button usable above all drawer content. */
.friends-sidebar.open .friends-head > button {
  position: relative;
  z-index: 2;
}
/* Account actions share the same visual column width. */
.settings-pane[data-settings-pane="account"] .account-action,
.settings-pane[data-settings-pane="account"] .danger-zone {
  width: min(620px, 100%) !important;
  max-width: 620px !important;
  box-sizing: border-box !important;
}
.settings-pane[data-settings-pane="account"] .account-action {
  display: block !important;
}
@media (max-width: 700px) {
  .friends-dock-button {
    top: 16px !important;
    right: 16px !important;
  }
  .friends-sidebar {
    width: 100vw !important;
  }
}


/* === FRIENDS MAIN-MENU-ONLY FIX 2026-09-26 === */
/* Must beat the dock button's display:grid !important rule. */
#friends-button.friends-ui-hidden,
#friends-overlay.friends-ui-hidden {
  display: none !important;
}

/* === FRIENDS DRAWER FLUSH TO VIEWPORT TOP — 2026-09-26 === */
/* Override older main-menu-specific rules (top:74/78px; right:26px). */
body:has(#main-menu.active) #friends-overlay.friends-sidebar,
body:has(#main-menu.active) .friends-sidebar {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
}

/* === FRIEND BUTTON PERFECT CIRCLE FINAL FIX — 2026-09-27 === */
/* Older main-menu rules set min-width:190px; override every sizing axis here. */
body:has(#main-menu.active) #friends-button.friends-dock-button {
  box-sizing: border-box !important;
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
  overflow: visible !important;
  transform: none !important;
}
body:has(#main-menu.active) #friends-button.friends-dock-button svg {
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  flex: 0 0 23px !important;
}
body:has(#main-menu.active) #friends-button.friends-dock-button[aria-expanded="true"] {
  display: none !important;
}


/* ============================================================
   SEASON KNIGHTLY — ONLINE PLAYER BATTLE THEME
   Only applied when fighting another player.
============================================================ */
#battle-screen.player-duel-theme {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,223,152,.16), transparent 23%),
        radial-gradient(circle at 50% 110%, rgba(70,88,126,.30), transparent 34%),
        linear-gradient(180deg, #10131b 0%, #141926 42%, #0a0d14 100%);
}

#battle-screen.player-duel-theme::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 16%, rgba(255,233,179,.14), transparent 16%),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.34)),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.02) 0 1px,
            transparent 1px 108px
        );
    opacity: .95;
}

#battle-screen.player-duel-theme::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 0 26%, rgba(191,153,84,.08) 26.2%, transparent 27%),
        linear-gradient(90deg, transparent 49.6%, rgba(191,153,84,.14) 50%, transparent 50.4%),
        linear-gradient(0deg, transparent 49.6%, rgba(191,153,84,.12) 50%, transparent 50.4%);
    mix-blend-mode: screen;
    opacity: .55;
}

#battle-screen.player-duel-theme .battle-topbar {
    border-bottom: 1px solid rgba(200,171,109,.32);
    background:
        linear-gradient(180deg, rgba(32,37,50,.92), rgba(15,18,28,.94));
    box-shadow:
        0 14px 30px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(185,149,84,.18);
}

#battle-screen.player-duel-theme .battle-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(219,191,124,.8), transparent);
    opacity: .65;
    pointer-events: none;
}

#battle-screen.player-duel-theme .battle-exit-button {
    width: auto;
    min-width: 84px;
    padding: 0 14px;
    border-color: rgba(200,171,109,.35);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(62,26,28,.94), rgba(33,14,18,.96));
    color: rgba(247,231,208,.9);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 18px rgba(0,0,0,.22);
}

#battle-screen.player-duel-theme .battle-exit-button:hover {
    border-color: rgba(233,204,139,.7);
    color: #fff8e8;
    background:
        linear-gradient(180deg, rgba(93,37,42,.96), rgba(51,20,24,.98));
}

#battle-screen.player-duel-theme .round-display span,
#battle-screen.player-duel-theme .action-label,
#battle-screen.player-duel-theme .side-energy-label,
#battle-screen.player-duel-theme .side-energy-gauge small {
    color: rgba(226,205,164,.68);
}

#battle-screen.player-duel-theme .round-display strong,
#battle-screen.player-duel-theme #turn-indicator,
#battle-screen.player-duel-theme #selected-character,
#battle-screen.player-duel-theme .side-energy-gauge strong,
#battle-screen.player-duel-theme .ability-name {
    color: #f9edd0;
    text-shadow: 0 1px 10px rgba(0,0,0,.34);
}

#battle-screen.player-duel-theme .turn-decoration {
    background: linear-gradient(90deg, transparent, rgba(232,206,142,.8));
}

#battle-screen.player-duel-theme .battle-arena {
    background-image: url("assets/images/arena-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#battle-screen.player-duel-theme .battle-arena::before {
    width: min(1180px,82vw);
    height: 3px;
    background:
        linear-gradient(90deg, transparent, rgba(223,194,131,.72) 18%, rgba(248,231,179,.92) 50%, rgba(223,194,131,.72) 82%, transparent);
    box-shadow:
        0 0 18px rgba(230,203,146,.36),
        0 0 36px rgba(230,203,146,.16);
}

#battle-screen.player-duel-theme .battle-center::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(220px, 24vw, 340px);
    height: clamp(220px, 24vw, 340px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(213,183,122,.18);
    box-shadow: inset 0 0 40px rgba(255,238,191,.05), 0 0 44px rgba(0,0,0,.2);
    opacity: .6;
    pointer-events: none;
}

#battle-screen.player-duel-theme .battle-team {
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}

#battle-screen.player-duel-theme .battle-card {
    border: 1px solid rgba(198,171,112,.34);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(68,73,86,.18), rgba(17,20,28,.82)),
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 0 1px rgba(235,210,157,.07),
        0 16px 40px rgba(0,0,0,.42);
}

#battle-screen.player-duel-theme .battle-card-image-wrapper {
    border: 1px solid rgba(223,196,138,.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(10,11,16,.5), rgba(4,4,6,.8));
    box-shadow: 0 10px 26px rgba(0,0,0,.46);
}

#battle-screen.player-duel-theme .dynamic-stat {
    border: 1px solid rgba(244,224,173,.84);
    background:
        radial-gradient(circle at 35% 28%, #79603f, #2d2418 70%, #140f0a 100%);
    color: #fff7e4;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.16),
        0 4px 12px rgba(0,0,0,.85),
        0 0 14px rgba(224,190,121,.18);
}

#battle-screen.player-duel-theme .selectable-fighter:hover,
#battle-screen.player-duel-theme .battle-card.selected {
    border-color: rgba(245,220,155,.74) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 18px 48px rgba(0,0,0,.56),
        0 0 26px rgba(224,190,121,.18) !important;
}

#battle-screen.player-duel-theme .battle-card.selected .battle-card-image-wrapper {
    border-color: rgba(255,229,168,.92);
    box-shadow: 0 0 26px rgba(245,210,139,.24);
}

#battle-screen.player-duel-theme .side-energy-gauge {
    border-color: rgba(202,173,114,.34);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(31,36,49,.94), rgba(11,13,20,.95));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 0 1px rgba(222,194,135,.05),
        0 18px 45px rgba(0,0,0,.46);
}

#battle-screen.player-duel-theme .player-energy-gauge {
    border-left: 3px solid rgba(92,122,198,.65);
}

#battle-screen.player-duel-theme .enemy-energy-gauge {
    border-right: 3px solid rgba(163,67,74,.68);
}

#battle-screen.player-duel-theme .energy-segments {
    border-color: rgba(220,194,139,.22);
    background:
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(255,255,255,.03));
    box-shadow:
        inset 0 0 16px rgba(0,0,0,.7),
        0 0 18px rgba(0,0,0,.12);
}

#battle-screen.player-duel-theme .player-energy-gauge .energy-segments::after {
    background: linear-gradient(0deg, rgba(79,108,181,.98), rgba(178,202,255,.98));
    box-shadow: 0 0 18px rgba(130,168,255,.34), inset 0 0 8px rgba(255,255,255,.24);
}

#battle-screen.player-duel-theme .enemy-energy-gauge .energy-segments::after {
    background: linear-gradient(0deg, rgba(125,42,48,.98), rgba(255,156,165,.98));
    box-shadow: 0 0 18px rgba(255,110,120,.28), inset 0 0 8px rgba(255,255,255,.18);
}

#battle-screen.player-duel-theme .battle-message {
    padding: 12px 22px;
    border: 1px solid rgba(210,181,121,.32);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(45,50,64,.78), rgba(19,22,31,.82));
    color: #f6ead0;
    letter-spacing: .06em;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 30px rgba(0,0,0,.34);
}

#battle-screen.player-duel-theme .action-panel {
    border-top: 1px solid rgba(200,171,109,.24);
    background:
        linear-gradient(180deg, rgba(31,36,49,.94), rgba(11,13,20,.96));
    box-shadow:
        0 -15px 40px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 2px 0 rgba(225,198,141,.05);
}

#battle-screen.player-duel-theme .ability-button {
    border: 1px solid rgba(197,170,112,.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(59,65,81,.34), rgba(18,21,30,.92));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 0 1px rgba(244,219,160,.03),
        0 8px 20px rgba(0,0,0,.22);
}

#battle-screen.player-duel-theme .ability-button::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(241,213,150,.92), transparent);
}

#battle-screen.player-duel-theme .ability-button:hover:not(:disabled) {
    border-color: rgba(240,211,149,.55);
    background:
        linear-gradient(180deg, rgba(84,91,109,.45), rgba(29,33,46,.95));
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

#battle-screen.player-duel-theme .ability-button.selected-ability {
    border-color: rgba(251,225,160,.76);
    background:
        linear-gradient(180deg, rgba(97,76,34,.52), rgba(41,32,18,.96));
    box-shadow:
        0 0 26px rgba(220,190,123,.18),
        0 8px 22px rgba(0,0,0,.26);
}

#battle-screen.player-duel-theme .ability-cost {
    color: rgba(236,218,183,.72);
}

@media (max-width: 760px) {
    #battle-screen.player-duel-theme .battle-message {
        padding: 10px 16px;
    }
}


.starter-shield { color:#70c8f5; background:#101925; padding:3px; border:1px solid #70c8f5; }

/* Printed stat numbers have different positions on the starter card frames. */
#battle-screen .starter-stat-layout .dynamic-stat,
.hq-card-inspection.starter-stat-layout .hq-inspection-stat {
    top:var(--stat-y) !important; width:var(--stat-w) !important;
}
#battle-screen .starter-stat-layout .dynamic-atk,
.hq-card-inspection.starter-stat-layout .hq-inspection-atk { left:var(--stat-atk-x) !important; right:auto !important; }
#battle-screen .starter-stat-layout .dynamic-hp,
.hq-card-inspection.starter-stat-layout .hq-inspection-hp { left:var(--stat-hp-x) !important; right:auto !important; }

/* Shield decoration stays outside artwork and never intercepts card clicks. */
#battle-screen .shield-protected .battle-card-image-wrapper { overflow:visible; isolation:isolate; }
.card-shield-barrier { position:absolute; inset:-5px; border:2px solid #79d9ff; border-radius:18px; pointer-events:none; z-index:11; box-shadow:0 0 9px #48bcff,0 0 22px #2693e870,inset 0 0 12px #59ceff44; background:linear-gradient(135deg,#8ee5ff20,transparent 14%,transparent 86%,#5dcfff20); }
.card-shield-barrier::after { content:''; position:absolute; inset:3px; border:1px solid #b8efff66; border-radius:14px; }
.card-shield-hp { position:absolute; left:50%; top:0; transform:translate(-50%,-65%); z-index:14; display:flex; align-items:center; justify-content:center; gap:4px; padding:3px 9px; min-width:52px; border:1px solid #9ce8ff; border-radius:7px; background:linear-gradient(180deg,#143d67,#071626); color:#d5f5ff; font-size:clamp(10px,.85vw,16px); font-weight:800; line-height:1.1; box-shadow:0 0 10px #45bfff88,inset 0 0 6px #71d6ff33; pointer-events:none; }
.card-shield-hp svg { width:16px; height:19px; color:#81dcff; flex-shrink:0; }
@media(max-width:700px){.card-shield-hp{padding:2px 5px;min-width:38px;font-size:10px;gap:2px}.card-shield-hp svg{width:12px;height:14px}.card-shield-barrier{inset:-3px}}

/* Final layout rules: viewport height and width both constrain the interface. */
html, body, #game { height:100%; min-height:0; }
#main-menu.active, #battle-screen.active { height:100dvh; min-height:0; }
#main-menu { overflow:auto !important; }
#main-menu .main-menu-content {
    position:relative !important; inset:auto !important; min-height:100% !important;
    width:min(500px,90vw) !important; max-width:100% !important;
    padding:clamp(12px,3dvh,32px) clamp(20px,4vw,70px) 18px !important;
    gap:clamp(8px,2dvh,24px) !important; overflow:visible !important;
}
#main-menu .game-title-container { width:100% !important; margin:0 !important; padding:0 !important; }
#main-menu .rift-main-logo { width:100% !important; max-width:380px !important; max-height:23dvh !important; object-position:left center !important; }
#main-menu .main-navigation { width:100% !important; min-width:0 !important; padding-left:clamp(10px,2vw,24px) !important; gap:0 !important; }
#main-menu .menu-button, #main-menu .menu-button-primary {
    height:clamp(44px,11dvh,90px) !important; min-height:0 !important;
    padding:0 12px !important; grid-template-columns:auto minmax(0,1fr) auto !important;
}
#main-menu .menu-button-content { min-width:0; }
#main-menu .menu-button-content strong { font-size:clamp(16px,2.6dvh,26px) !important; }
#main-menu .menu-button-content small { margin-top:clamp(3px,.7dvh,8px) !important; font-size:clamp(10px,1.6dvh,13px) !important; }
#main-menu .menu-footer { position:static !important; margin-top:auto !important; padding-top:6px; font-size:10px !important; }
#battle-screen.active { display:grid !important; grid-template-rows:clamp(40px,7dvh,58px) minmax(0,1fr) !important; overflow:hidden; }
#battle-screen .battle-topbar { min-height:0 !important; height:100% !important; padding:4px clamp(6px,2vw,24px) !important; }
#battle-screen .battle-arena {
    display:grid !important; min-height:0 !important; height:100% !important;
    grid-template-rows:minmax(0,1fr) clamp(36px,6dvh,54px) minmax(0,1fr) !important;
    row-gap:6px; padding:12px 0 6px !important; overflow:hidden;
}
#battle-screen .battle-team {
    align-self:stretch !important; align-items:center !important; justify-content:center !important;
    height:100% !important; min-height:0 !important; padding:12px 0 0 !important;
    width:calc(100% - clamp(92px,14vw,190px)) !important;
    gap:clamp(6px,2vw,38px) !important; margin:0 auto !important;
}
#battle-screen .enemy-team { grid-row:1 !important; }
#battle-screen .player-team { grid-row:3 !important; }
#battle-screen .battle-center { grid-row:2 !important; min-height:0; height:100%; align-self:center !important; z-index:2; }
#battle-screen .battle-message { max-width:calc(100vw - 110px); margin:0 auto; padding:6px 12px !important; font-size:clamp(10px,1.5dvh,15px) !important; line-height:1.2; overflow-wrap:anywhere; }
#battle-screen .battle-center::before { display:none !important; }
#battle-screen .battle-card { width:var(--responsive-card-width,120px) !important; min-width:0 !important; max-width:none !important; flex:0 0 var(--responsive-card-width,120px) !important; padding:3px !important; transform:none !important; }
#battle-screen .battle-card-image-wrapper { aspect-ratio:2 / 3 !important; }
#battle-screen .hp-bar { height:4px !important; margin-top:4px !important; }
#battle-screen .hp-text { margin-top:2px !important; font-size:clamp(8px,1.3dvh,11px) !important; line-height:1.15; }
#battle-screen .active-effects { min-height:18px !important; margin-top:3px !important; max-height:42px; overflow-y:auto; display:flex !important; flex-wrap:wrap !important; position:static !important; width:100% !important; }
#battle-screen .effect-chip { min-height:16px !important; font-size:clamp(7px,1.05dvh,10px) !important; padding:2px 4px !important; line-height:1.1; }
#battle-screen .side-energy-gauge { width:clamp(34px,5vw,64px) !important; height:min(64dvh,540px) !important; min-height:0 !important; padding:8px 4px !important; gap:5px !important; }
#battle-screen .player-energy-gauge { left:6px !important; }
#battle-screen .enemy-energy-gauge { right:6px !important; }
#battle-screen .action-panel { max-height:calc(100dvh - 80px) !important; overflow-y:auto !important; }
.screen.active:not(#main-menu):not(#battle-screen) { overflow-y:auto; overflow-x:hidden; min-width:0; }
.collection-tools { min-width:0; }
@media(max-width:600px){
    #main-menu .main-menu-content { width:min(410px,100vw) !important; padding-right:66px !important; }
    #battle-screen .battle-topbar { gap:5px !important; }
    #battle-screen .round-display, #battle-screen .turn-indicator { font-size:10px !important; }
    #collection-grid.collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .settings-tabs { flex-wrap:wrap; }
}
@media(max-height:420px){
    #main-menu .rift-main-logo { max-height:19dvh !important; }
    #main-menu .main-menu-content { gap:6px !important; padding-top:8px !important; }
    #main-menu .menu-button, #main-menu .menu-button-primary { height:44px !important; }
    #battle-screen .battle-arena { row-gap:3px; padding-top:8px !important; }
}

/* Use the full formation height; retain the central message gap. */
#battle-screen .battle-team { padding-top:4px !important; }
#battle-screen .battle-arena { padding-top:8px !important; row-gap:4px; }
#battle-screen .battle-card { min-height:0 !important; height:auto !important; }
/* Anchor the menu to the left even when its parent uses centered flex layout. */
#main-menu .main-menu-content {
    position:absolute !important; inset:0 auto 0 0 !important;
    margin:0 !important; transform:none !important;
    width:clamp(320px,30vw,480px) !important; max-width:100vw !important;
    padding-left:clamp(24px,3.5vw,64px) !important;
    padding-right:20px !important;
    align-items:flex-start !important; text-align:left !important;
}
#main-menu .main-navigation { max-width:100% !important; flex:none !important; margin:0 !important; }
#main-menu .game-title-container { max-width:100% !important; align-self:flex-start !important; }
#main-menu .menu-button, #main-menu .menu-button-primary { max-width:100% !important; box-sizing:border-box !important; }
@media(max-width:600px){#main-menu .main-menu-content{width:min(370px,100vw) !important;padding-left:20px !important;padding-right:60px !important;}}

.training-mode .mode-kicker,.training-mode .mode-state {color:#83dfca;}
.training-mode{border-color:rgba(131,223,202,.3);}
#mode-screen .mode-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
#mode-screen .game-mode-card {min-height:clamp(180px,26vh,300px);padding:28px 22px;}
@media(max-width:680px){#mode-screen .mode-grid{grid-template-columns:1fr;}}
/* Match introduction and named turns: animation layers do not resize the board. */
.versus-intro {position:fixed;inset:0;z-index:13000;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-content:center;align-items:center;gap:clamp(12px,4vw,70px);padding:30px 7vw;background:radial-gradient(ellipse at 25% 50%,#213e6699,transparent 55%),radial-gradient(ellipse at 75% 50%,#69283399,transparent 55%),#060a14f5;animation:versus-fade 2.1s both;pointer-events:auto;}
.versus-caption {position:absolute;top:20%;left:0;right:0;text-align:center;color:#d1b67f;letter-spacing:.5em;font:600 12px Arial;}
.versus-player {min-width:0;padding:28px 12px;border-top:1px solid #c7a26777;border-bottom:1px solid #c7a26777;}
.versus-player small {display:block;color:#9fbad9;font:700 10px Arial;letter-spacing:.25em;margin-bottom:12px;}
.versus-player strong {display:block;color:#ecf5ff;font:700 clamp(20px,4.5vw,68px)/1.15 Georgia,serif;overflow-wrap:anywhere;text-shadow:0 0 28px #7ca9fa88;}
.versus-player-left {text-align:right;animation:versus-slide-left .6s cubic-bezier(.16,1,.3,1) both;}
.versus-player-right {text-align:left;animation:versus-slide-right .6s cubic-bezier(.16,1,.3,1) both;}
.versus-player-right strong {text-shadow:0 0 28px #ff6c8388;}.versus-player-right small{color:#e4a5af;}
.versus-mark {font:italic 800 clamp(30px,7vw,105px) Georgia,serif;color:#ffe1a1;text-shadow:0 0 35px #d4a04c99;animation:versus-mark-in .7s .2s both;}
.named-turn-banner {position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:12500;width:min(640px,86vw);padding:16px 28px;text-align:center;background:linear-gradient(90deg,transparent,#101e32f5 20%,#101e32f5 80%,transparent);border-block:1px solid #97c5ff77;pointer-events:none;animation:named-turn 3s both;}
.named-turn-banner small {display:block;color:#99caff;font:700 9px Arial;letter-spacing:.4em;margin-bottom:6px;}
.named-turn-banner strong {display:block;color:#f3f8ff;font:600 clamp(18px,3vw,36px)/1.2 Georgia,serif;overflow-wrap:anywhere;}
.named-turn-opponent{background:linear-gradient(90deg,transparent,#32131ff5 20%,#32131ff5 80%,transparent);border-color:#fca6b577;}.named-turn-opponent small{color:#ffa6b5;}
@keyframes versus-fade{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
@keyframes versus-slide-left{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}
@keyframes versus-slide-right{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:none}}
@keyframes versus-mark-in{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:scale(1)}}
@keyframes named-turn{0%{opacity:0;transform:translate(-60%,-50%)}20%,72%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-40%,-50%)}}
@media(prefers-reduced-motion:reduce){.versus-player,.versus-mark{animation:none}.versus-intro{animation:none}.named-turn-banner{animation:none}}

#turn-indicator {max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Beta Season 2: the puppet choice happens before the turn is committed. */
.s2-choice-dialog{background:#14101d;color:#f4effa;border:1px solid #9c76b9;border-radius:1rem;padding:1.3rem;width:min(34rem,90vw);max-height:85vh;overflow:auto;box-shadow:0 1rem 4rem #000b}
.s2-choice-dialog::backdrop{background:#000b}
.s2-choice-dialog h2{margin:0 0 .7rem;font-size:1.3rem}
.s2-choice-dialog p{line-height:1.5}
.s2-choice-dialog button{display:block;width:100%;text-align:left;margin:.5rem 0;padding:.75rem;background:#2b2039;border:1px solid #68517d;border-radius:.5rem;color:white;cursor:pointer}

.s2-puppet-dialog{width:min(42rem,92vw);}
.s2-puppet-dialog .s2-puppet-actions{margin:.9rem 0;}
.s2-puppet-dialog .ability-button{min-height:5rem;text-align:left;}
.s2-puppet-dialog .ability-button strong,.s2-puppet-target strong{display:block;font-size:1rem;margin-bottom:.3rem;}
.s2-puppet-dialog .ability-button span,.s2-puppet-target span{display:block;font-size:.78rem;opacity:.78;line-height:1.4;}
.s2-puppet-dialog .s2-puppet-targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;margin:.9rem 0;}
.s2-puppet-dialog .s2-puppet-target{min-height:4.3rem;text-align:left;}
.s2-puppet-dialog .s2-puppet-cancel{width:auto;display:inline-block;margin:.4rem .4rem 0 0;padding:.55rem .8rem;background:#201a29;border-color:#5b4a69;}
.s2-choice-dialog button:hover,.s2-choice-dialog button:focus-visible{background:#49305e;outline:2px solid #d8b4f0}
@media(max-width:520px){.s2-puppet-dialog .s2-puppet-actions{grid-template-columns:1fr}.s2-puppet-dialog .s2-puppet-targets{grid-template-columns:1fr 1fr}}


/* Disabled cards remain discoverable, but cannot be used in any team. */
.collection-card.card-unavailable{position:relative;filter:grayscale(1);opacity:.6;}
.team-card.card-unavailable{cursor:not-allowed!important;}
.collection-card.card-unavailable:hover{transform:none;box-shadow:none;}
.card-unavailable-label{position:absolute;left:.4rem;right:.4rem;top:.5rem;padding:.35rem;background:#111e;color:#eee;border:1px solid #888;text-align:center;font-size:.65rem;letter-spacing:.1em;pointer-events:none;}
.card-unavailable-preview{filter:grayscale(1);opacity:.7;}