/* -------------          READY TABLE          ------------- */
/* Allgemeines Layout mit Zeilen */
.gra_main_readytable
{
    /* 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:                            
        10fr      /* Titel */
        15fr      /* Freiraum */
        30fr      /* Aktueller Kampf */
        15fr      /* Naester Kampf */
        15fr      /* Uebernaester Kampf */
        15fr      /* Ueberuebernaester Kampf */
        5fr;     /* Freiraum */
        
    height:             100%;
    width:              100%;
    padding:            1rem;
    justify-items:      center;
    align-items:        center;
    overflow:           hidden;
}



/* Formatierung der Ueberschrift */
.gra_main_readytable div.title
{
    font-weight:                bold;
    align-content:              center;             /* vertikale Ausrichtung zentriert */
    margin:                     0;
    /*font-size:                  clamp(1px, 4vmin, 60px);*/
    font-size:                  clamp(30px, 5vmin, 60px);
    text-decoration:            underline;          /* Unterstrichener Text */
    text-decoration-thickness:  3px;
    text-decoration-color:      #4f8cff;
    text-underline-offset:      4px;

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



/* Formatierung der Kampfzeilen bei vorhandenem Kampf */
.gra_main_readytable .fight_row
{
    container-type: size;       /* Ermöglicht die Verwendung von Container Queries (cqh) innerhalb dieses Elements */

    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)      /* Order */
        1px                 /* Trennlinie */
        minmax(0, 5fr)      /* Bot Left */
        1px                 /* Trennlinie */
        minmax(0, 1fr)      /* VS */
        1px                 /* Trennlinie */
        minmax(0, 5fr);     /* Bot Right */

    align-items: center;
    height: 60%;
    width: 90%;
    margin: 12px 0;
    padding: 0 25px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.95),
            rgba(18,18,20,.95)
        );

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 6px 14px rgba(0,0,0,.35);
}



/* Farbiger Balken links neben der Order-Nummer */
.gra_main_readytable .current .order
{       /* Blauer Balken links neben NEXT */
    border-left-color:#4f8cff;
    /* font-size: 31cqh; */
    font-size: min(31cqh, 2.5cqw);
}
.gra_main_readytable .next .order,
.gra_main_readytable .after_next .order,
.gra_main_readytable .after_after_next .order
{       /* Grauer Balken links neben Order-Nummern */
    border-left-color:#7b7b7b;
}



/* Formatierung der Order-Nummern */
.gra_main_readytable .order
{
    font-family: Orbitron;
    /*font-size: 45cqh;*/       /* Schriftgröße in Abhängigkeit von der Höhe des Containers */
    font-size: min(45cqh, 3.6cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
    font-weight: 700;
    color: white;
    border-left: 5px solid;
    padding-left: 18px;
}



/* Formatierung der linken und rechten Spalte */
.gra_main_readytable .left
{
    text-align: right;
    min-width:0;
}
.gra_main_readytable .right
{
    text-align: left;
    min-width:0;
}


/* Formatierung der Bot-Namen */
.gra_main_readytable .bot
{
    display: block;
    font-family: Orbitron;
    /*font-size: 40cqh;*/       /* Schriftgröße in Abhängigkeit von der Höhe des Containers */
    font-size: min(40cqh, 3.2cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
    font-weight: 700;       /* Strichstaerke */
    color: white;
    letter-spacing: 0.04em;    /* Abstand zwischen Buchstaben */
    white-space: nowrap;    /* verhindert Zeilenumbruch – Text bleibt in einer Zeile */
    overflow: hidden;       /* zu langer Text wird abgeschnitten */
    text-overflow: ellipsis;/* zeigt ... am Ende */
    min-width: 0;

}
.gra_main_readytable .current .bot
{
    /* font-size: 30cqh; */
    font-size: min(30cqh, 2.4cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
}



/* Formatierung der Team-Namen */
.gra_main_readytable .team
{
    font-family: Orbitron;    
    margin-top: 4px;
    /*font-size: 16cqh;*/       /* Schriftgröße in Abhängigkeit von der Höhe des Containers */
    font-size: min(16cqh, 1.3cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
    font-weight: 400;       /* Strichstaerke */
    color: #8e939a;
}
.gra_main_readytable .current .team
{
    /* font-size: 12cqh; */
    font-size: min(12cqh, 1cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
}



/* Abstände zwischen Text und Trennlinien */
.gra_main_readytable .left .bot,
.gra_main_readytable .left .team
{
    margin-right:10%;
}
.gra_main_readytable .right .bot,
.gra_main_readytable .right .team
{
    margin-left:10%;    
}



/* Formatierung des VS in der Mitte der Kampfzeile */
.gra_main_readytable .vs
{
    font-family: Orbitron;
    /*font-size: 42cqh;*/       /* Schriftgröße in Abhängigkeit von der Höhe des Containers */
    font-size: min(42cqh, 3.4cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
    font-weight: bold;
    color: white;
    text-align: center;
    letter-spacing: 0.04em;   /* Abstand zwischen Buchstaben */
    text-shadow:
        0 0 8px rgba(255,255,255,.15);
}
.gra_main_readytable .current .vs
{
    /* font-size: 31cqh; */
    font-size: min(31cqh, 2.5cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
}



/* Formatierung der Kampfzeilen bei nicht mehr vorhandenen Kämpfen */
.gra_main_readytable .fight_row_no_more_battles
{
    container-type: size;       /* Ermöglicht die Verwendung von Container Queries (cqh) innerhalb dieses Elements */

    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)      /* Order */
        1px                 /* Trennlinie */
        minmax(0, 11fr);      /* Bot Left */

    align-items: center;
    height: 60%;
    width: 90%;
    margin: 12px 0;
    padding: 0 25px;

    background:
        linear-gradient(
            180deg,
            rgba(35,35,38,.95),
            rgba(18,18,20,.95)
        );

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 6px 14px rgba(0,0,0,.35);
}
.gra_main_readytable .no_more_battles
{
    font-family: Orbitron;
    /* font-size: 42cqh; */       /* Schriftgröße in Abhängigkeit von der Höhe des Containers */
    font-size: min(42cqh, 3.4cqw);  /* Schriftgröße in Abhängigkeit von der Höhe und Breite des Containers */
    font-weight: bold;
    color: rgb(77, 75, 75);
    text-align: center;
    letter-spacing: 0.04em;   /* Abstand zwischen Buchstaben */
    text-shadow:
        0 0 8px rgba(255,255,255,.15);
}



/* Dekorative Trennlinie nach .left und .vs */
.gra_main_readytable .separator {
    width: 1px;
    height: 70%;
    background: rgba(255,255,255,.18);
    transform: rotate(15deg);
}
.gra_main_readytable .separator_vertical {
    width: 1px;
    height: 70%;
    background: rgba(255,255,255,.18);
}
.gra_main_readytable .current .separator {
    background: #4f8cff;
}