/* Klasse */


/* ------------------------------------------           MAIN           ------------------------------------------ */
/* -------------          BATTLE & WINNER SCREEN          ------------- */
.main_battle_screen
{
    /* Hintergrund */
    background-image:   url('../pix/steel.jpeg');   /* Pfad zum Bild */
    background-size:    cover;                      /* Bild fuellt den Bereich aus */
    background-position:center;                     /* Bild zentrieren */
    background-repeat:  no-repeat;                  /* kein Kacheln */
        
    /* Frame Aufbau */
    display:            grid;
    grid-template-columns: 6fr 1fr 6fr;             /* 3 Spalten */
    grid-template-rows:                             /* 4 Reihen */
        minmax(0, 1fr)
        minmax(0, 2fr)
        minmax(0, 8fr)
        minmax(0, 1fr);
    
    height:             100%;
    padding:            1rem;
    text-align:         center;
    overflow:           hidden;

    container-type: size;       /* Ermöglicht die Verwendung von Container Queries (cqh) innerhalb dieses Elements */

    /* border:             1px solid red;  */
}


.main_battle_screen div.whight_and_round
{
    grid-column:                1 / -1;             /* Element belegt alle Spalten der Zeile */
    font-weight:                900;
    align-content:              center;             /* vertikale Ausrichtung zentriert */
    margin:                     0;
    /*font-size:                  clamp(1px, 4vmin, 60px);*/
    font-size:                  clamp(1px, 5cqmin, 60px);
    
    text-decoration:            underline;          /* Unterstrichener Text */
    text-decoration-thickness:  3px;
    text-decoration-color:      white;
    text-underline-offset:      4px;

    -webkit-text-stroke:        1px black;        /* Textumrandung */ 
    text-shadow:                0 0 15px #000000; /* Textschatten */

    opacity: 0;
    transform:
        translateY(-12px)
        scale(0.98);
    transition:
        opacity 700ms ease-out,
        transform 700ms cubic-bezier(.16,.8,.25,1);
}
.main_battle_screen div.whight_and_round.visible
{
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}

.main_battle_screen > div
{
    height:             100%;
    overflow:           hidden;
    align-content:      center;         /* vertikale Ausrichtung zentriert */
    /* border:             1px solid greenyellow; */
}

.main_battle_screen p.vs
{
    font-weight:        bold;
    align-content:      center;         /* vertikale Ausrichtung zentriert */
    margin:             0;
    font-size:          clamp(15px, 7cqmin, 60px);

    -webkit-text-stroke:1px black;    /* Textumrandung */ 
    /* text-shadow:   0 0 15px #000000;   Textschatten */

    opacity: 0;
    transform:
        /* translateY(-12px) */
        scale(0.98);
    transition:
        opacity 700ms ease-out,
        transform 700ms cubic-bezier(.16,.8,.25,1);
}
.main_battle_screen p.vs.visible
{
    opacity: 1;
    transform:
        scale(1)
        translateY(0);
}

.main_battle_screen div.bot_name
{
    font-weight:        bold;
    align-content:      end;            /* vertikale Ausrichtung zentriert */
    margin:             0;
    font-size:          clamp(15px, 9cqmin, 60px);
    white-space:        nowrap;         /* verhindert Zeilenumbruch – Text bleibt in einer Zeile */
    overflow:           hidden;         /* zu langer Text wird abgeschnitten */
    text-overflow:      ellipsis;       /* zeigt ... am Ende */
    

    -webkit-text-stroke:1px black;    /* Textumrandung */ 
    text-shadow:   0 0 15px #000000;  /* Textschatten */

    opacity: 0;
    transform:
        translateY(-12px)
        scale(0.98);
    transition:
        opacity 700ms ease-out,
        transform 700ms cubic-bezier(.16,.8,.25,1);
}
.main_battle_screen div.bot_name.visible
{
    opacity: 1;
    transform:
        scale(1)
        translateY(0);
}
.main_battle_screen div.bot_name div.border
{
    border-bottom:      3px solid rgb(180, 180, 180);
    mix-blend-mode:     difference;
}


.main_battle_screen div.team_name
{
    font-weight:        bold;
    margin:             0;
    font-size:          clamp(15px, 5cqmin, 60px);
    white-space:        nowrap;         /* verhindert Zeilenumbruch – Text bleibt in einer Zeile */
    overflow:           hidden;         /* zu langer Text wird abgeschnitten */
    text-overflow:      ellipsis;       /* zeigt ... am Ende */

    -webkit-text-stroke:1px black;    /* Textumrandung */ 
    text-shadow:   0 0 15px #000000;  /* Textschatten */

    opacity: 0;
    transform:
        translateY(8px);
    transition:
        opacity 700ms ease-out,
        transform 700ms ease-out;
    /* border:             1px solid blueviolet; */
}
.main_battle_screen div.team_name.visible
{
    opacity: 0.7;
    transform:
        translateY(0);
}
.main_battle_screen div.team_name div.border
{
    border-top:         3px solid rgb(180, 180, 180);
    mix-blend-mode:     difference;
}

.main_battle_screen img.bot_pic
{
    max-width:          80%;            /* wird nie breiter als sein Container */
    max-height:         80%;            /* wird nie hoeher als sein Container */
    width:              auto;           /* Breite wird automatisch berechnet (Seitenverhaeltnis bleibt erhalten) */
    height:             auto;           /* Hoehe wird automatisch berechnet (Seitenverhaeltnis bleibt erhalten) */
    object-fit: contain;

    /*
     * Das Bild befindet sich von Anfang an
     * im DOM und wird dadurch bereits
     * beim Laden der Seite geladen.
     */

    opacity: 0;
    transform:
        scale(0.92)
        translateY(12px);
    transition:
        opacity 750ms ease-out,
        transform 750ms cubic-bezier(.16,.8,.25,1);
}
.main_battle_screen img.bot_pic.visible
{
    opacity: 1;
    transform:
        scale(1)
        translateY(0);
}