/* Klasse */

/* ==================================================
   WINNER SCREEN
   ================================================== */
.main_winner_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-rows:                             /* 4 Reihen */
        1fr      /* Titel / Status */
        1fr      /* Reihe 1 */
        8fr      /* Reihe 2 */
        1fr;     /* Reihe 3 */

    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 */

}


.draw
{
    font-weight:        bold;
    align-content:      center;         /* vertikale Ausrichtung zentriert */
    margin:             0;
    font-size:          clamp(10px, 12cqmin, 100px);

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

    /*-webkit-text-stroke:1px black;     Textumrandung */ 
    /*text-shadow:   0 0 15px #000000;  Textschatten */
}
.draw.visible
{
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}

/* ==================================================
   ZEILEN
   ================================================== */

.row
{
    display: flex;

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

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


/* ==================================================
   ZEILE 1 – WINNER
   ================================================== */

.winner_title
{
    /* font-size: clamp(
        30px,
        5vw,
        80px
    ); */
    font-size: clamp(1px, 5cqmin, 60px);
    font-weight: 900;
    letter-spacing: 0.18em;
    opacity: 0;
    transform:
        translateY(-12px)
        scale(0.98);
    transition:
        opacity 700ms ease-out,
        transform 700ms cubic-bezier(.16,.8,.25,1);
    
    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 */
}
.winner_title.visible
{
    opacity: 1;
    transform:
        translateY(0)
        scale(1);
}


/* ==================================================
   ZEILE 2 – BOTNAME
   ================================================== */

.name_container
{
    /*
     * WICHTIG:
     *
     * Die Schriftgröße wird hier definiert.
     *
     * Sowohl Botname als auch Cursor erben
     * diese Schriftgröße.
     */

    font-size: clamp(1px, 9cqmin, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ==================================================
   BOTNAME
   ================================================== */

.main_winner_screen .bot_name
{
    /* font-family: monospace; */
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.06em;
    white-space: pre;

    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 */
}


/* ==================================================
   CURSOR
   ================================================== */

.cursor
{
    /*
     * Der Cursor bezieht sich jetzt auf die
     * Schriftgröße von .name_container.
     */

    display: inline-block;

    width: 0.10em;

    height: 1em;

    margin-left: 0.12em;

    background: white;

    /*
     * Damit die Unterkante des Cursors
     * ungefähr auf der Text-Baseline sitzt.
     */

    vertical-align: -0.08em;

    flex-shrink: 0;

    animation:
        cursorBlink 550ms steps(1) infinite;
}


@keyframes cursorBlink
{
    0%,
    45%
    {
        opacity: 1;
    }

    46%,
    100%
    {
        opacity: 0;
    }
}


/* ==================================================
   ZEILE 3 – BOTBILD
   ================================================== */

.bot_image_container
{
    width: 100%;
    height: 100%;

    display: flex;

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


.bot_image
{
    /* width: min(30vw, 40vh);
    height: min(30vw,40vh); */
    max-width: 100%;                /* wird nie breiter als sein Container */
    max-height: 100%;               /* 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);
}


.bot_image.visible
{
    opacity: 1;

    transform:
        scale(1)
        translateY(0);
}


/* ==================================================
   ZEILE 4 – TEAMNAME
   ================================================== */

.main_winner_screen div.team_name
{
    font-size:          clamp(1px, 5cqmin, 60px);
    font-weight: 900;
    /* letter-spacing: 0.18em; */
    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;
}


.main_winner_screen div.team_name.visible
{
    opacity: 0.7;

    transform:
        translateY(0);
}