/* Element */

/*@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600&display=swap');*/
/* DAS LADEN IN HTML MITTELS PRECONNECT IST PERFORMANTER */

html, body {
    margin: 0;          /* Keinen Rahmen im Vollbildmodus*/
    height: 100%;       /* Seite ueber komplette Hoehe */
}

* {
    box-sizing: border-box; /* height inklusive padding und border */
}

body {
    display: grid;
    grid-template-rows: 2.5fr 15fr 1.5fr;
    height:             100vh;          /* Seite ueber komplette Hoehe (nicht redundant zu height: 100%) */
    overflow:           hidden;         /* Wenn Inhalt zu groß, dann wird abgeschnitten, kein Scroll-Bar */
    font-family:        'Orbitron', system-ui, sans-serif;
    background-color:   black;        /* Hintergrundfarbe */
    color:              white;        /* Standardschriftfarbe */
}

/* Klasse */
/* ------------------------------------------          HEADER          ------------------------------------------ */
.gra_header
{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 100%;
    padding:0rem;
    text-align: center;
    overflow: hidden;
}

.gra_header h1
{
    font-weight:        normal;
    font-size:          clamp(12px, 2.2vw, 60px);
    margin:             0;
}

.gra_header > div   /* Wirkt nur auf DIREKTE Kinder des Typs div der Klasse .gra_header */
{
    display: flex;              /* wichtig */
    align-items: center;        /* vertikal zentrieren */
    justify-content: center;    /* horizontal zentrieren */
    height: 100%;
    overflow: hidden;
    /*border: 1px solid red;*/
}
.gra_header > div:first-child
{
    justify-content: flex-start;
    padding-left: 2rem;
}
.gra_header > div:last-child
{
    justify-content: flex-end;
    padding-right: 2rem;
}

.gra_header_logo
{
    max-width:          100%;   /* passt sich der Spaltenbreite an */
    max-height:         100%;   /* darf nicht ueber die Headerhöhe hinauswachsen */
    width:              auto;
    height:             auto;
}



/* ------------------------------------------           MAIN           ------------------------------------------ */
.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 */
        1fr      /* Titel / Status */
        1fr      /* Reihe 1 */
        8fr      /* Reihe 2 */
        1fr;     /* Reihe 3 */
    
    height:             100%;
    padding:            1rem;
    text-align:         center;
    overflow:           hidden;
}

.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-columns: 6fr 1fr 6fr;             /* 3 Spalten */
    grid-template-rows:                             /* 4 Reihen */
        1fr      /* Titel / Status */
        1fr      /* Reihe 1 */
        8fr      /* Reihe 2 */
        1fr;     /* Reihe 3 */
    
    height:             100%;
    padding:            1rem;
    text-align:         center;
    overflow:           hidden;
}

.main_winner_screen div.draw
{
    font-weight:        bold;
    align-content:      center;         /* vertikale Ausrichtung zentriert */
    margin:             0;
    font-size:          clamp(1px, 8cqmin, 70px);

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

.main_battle_screen div.whight_and_round,
.main_winner_screen div.whight_and_round
{
    grid-column:                1 / -1;             /* Element belegt alle Spalten der Zeile */
    font-weight:                bold;
    align-content:              center;             /* vertikale Ausrichtung zentriert */
    margin:                     0;
    /*font-size:                  clamp(1px, 4vmin, 60px);*/
    font-size:                  clamp(1px, 4cqmin, 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 */
}

.main_battle_screen > div,
.main_winner_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(1px, 5cqmin, 60px);

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

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

    -webkit-text-stroke:1px black;    /* Textumrandung */ 
    text-shadow:   0 0 15px #000000;  /* Textschatten */
}
.main_battle_screen div.bot_name div.border
{
    border-bottom:      3px solid rgb(180, 180, 180);
    mix-blend-mode:     difference;
}

.main_winner_screen div.bot_name div.border
{
    border-bottom:      3px solid rgb(180, 180, 180);
    width:              60%;
    margin:             0 auto;         /* horizontale Ausrichtung zentriert */       
    mix-blend-mode:     difference;
}

.main_battle_screen div.team_name,
.main_winner_screen div.team_name
{
    font-weight:        bold;
    align-content:      start;          /* vertikale Ausrichtung zentriert */
    margin:             0;
    /*font-size:          clamp(1px, 2vmin, 60px);*/
    font-size:          clamp(1px, 2.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 */
}
.main_battle_screen div.team_name div.border
{
    border-top:         3px solid rgb(180, 180, 180);
    mix-blend-mode:     difference;
}

.main_winner_screen div.team_name div.border
{
    border-top:         3px solid rgb(180, 180, 180);
    width:              60%;
    margin:             0 auto;         /* horizontale Ausrichtung zentriert */ 
    mix-blend-mode:     difference;
}

.main_battle_screen img.bot_pic,
.main_winner_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) */
}

.gra_main_menue
{
    /* 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 */
        
    height:             100%;
    padding:            1rem;
    text-align:         center;
    overflow:           hidden;

    display:            flex;
    justify-content:    center;   /* horizontal */
    align-items:        center;   /* vertikal */
}

.gra_main_menue table
{
    width:              30%;
    height:             80%;
    border-collapse:    collapse;                   /* Verhindert doppelte Rahmen bei Tabellenzellen */
    margin:             0 auto;                     /* horizontale Ausrichtung zentriert */
    padding:            8px;
}

.gra_main_menue table td
{
    /*border:             1px solid whitesmoke; */
    font-size:          clamp(12px, 2.7vmin, 60px);
}

.gra_main_menue a:link,
.gra_main_menue a:visited,
.gra_main_menue a:active
{
    color: white;
}

.gra_main_menue a:hover
{
    color: rgb(180, 180, 180);
    text-decoration: underline;
}


/* ------------------------------------------          FOOTER          ------------------------------------------ */
.gra_footer
{
    display:            grid;           /* Container verwendet CSS Grid fuer das Layout */
    grid-template-columns: 1fr 2fr 1fr; /* Drei Spalten im Verhaeltnis 1 : 2 : 1 */
    height:             100%;
    padding:            0rem;           /* Innenabstand zwischen Rand und Inhalt */
    text-align:         center;         /* Text-Ausrichtung */
    overflow:           hidden;         /* zu großer Inhalt wird abgeschnitten, keine Erweiterung des Containers */
}

.gra_footer > div 
{
    display:            flex;           /* Container verwendet CSS Flex fuer das Layout */ 
    align-items:        center;         /* vertikale Ausrichtung zentriert */
    justify-content:    center;         /* horizontale Ausrichtung zentriert */
    height:             100%;
    overflow:           hidden;         /* zu großer Inhalt wird abgeschnitten, keine Erweiterung des Containers */
    /*border: 1px solid red;*/
}
.gra_footer > div:last-child
{
    display:            grid;           /* Container verwendet CSS Grid fuer das Layout */
    grid-template-rows: 1fr 3fr;        /* Zwei Zeilen im Verhaeltnis 1 : 3 */
    height:             100%;
    justify-content:    end;            /* horizontale Ausrichtung rechts */
    padding:            0.5rem;
    padding-right:      1rem;
    /*border: 1px solid red;*/
}

.gra_footer > div:last-child > div
{
    height:             100%;
    overflow:           hidden;         /* zu großer Inhalt wird abgeschnitten, keine Erweiterung des Containers */
    /*border: 1px solid rgb(62, 222, 14);*/
}

.gra_footer_scientists_logo
{
    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) */
}

.gra_footer p
{
    font-weight:        normal;
    font-size:          clamp(10px, 1.2vw, 60px);
    margin: 0;
}

.gra_footer p.consolas
{
    font-family:        Consolas, 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace;
    font-weight:        normal;
    font-size:          clamp(10px, 0.6vw, 60px);
    align-items:        flex-end;                               /* vertikale Ausrichtung unten */
    padding-bottom:     0.4rem;
    margin:             0;
}