/* add all special styles used for displaying the rules */

/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract 
   #rules: div with complete rules used at main site
   #rulesPage: ingame rules page display
   #panelRules: ingame rules sidepanel display
   #popup.rules: popup with rules extract only */

/* Troika for actions */
@font-face {
    font-family: 'Gladiola Action';
    src: local('Gladiola Action'), local('Bungee'), url('/game-plugins/viagladiola/1.3.3/fonts/Bungee-Regular.ttf') format('truetype');
}

.rules h1 {
    font-family: 'Gladiola Action', sans-serif;
    border: none;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    font-size: 1.8em;
    text-transform: uppercase;
    text-align: center;
    color: white;
    text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
    
/* Mitte voll, beide Seiten laufen aus */
    background: linear-gradient(
        to right,
        transparent 0%,
        #eb612c 30%,
        #eb612c 70%,
        transparent 100%
    );

}

.rules h2 {
    font-family: 'Gladiola Action', sans-serif;
    border: none;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    font-size: 1.5em;
    text-transform: uppercase;
    text-align: center;
    color: white;
    text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
    /* Mitte voll, beide Seiten laufen aus */
    background: linear-gradient(
        to right,
        transparent 0%,        /* ganz außen nichts */
        transparent 2%,       /* Abstand zum Rand */
        #f49712 40%,           /* Übergang zur Farbe */
        #f49712 60%,           /* volle Fläche in der Mitte */
        transparent 98%,       /* wieder Übergang */
        transparent 100%       /* ganz außen nichts */
    );

    
}

.rules .border { border: none; background-color: #f5f6e8; border-radius: 12px; }

.rules .center { text-align: center; }
.rules .inline-img { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em; width: auto; }

.rules p {text-shadow: none;  padding-left: 1%; margin-left: 2%; margin-right: 1%; }
.rules li {text-shadow: none;  padding-left: 1%; margin-left: 2%; margin-right: 1%; }
.rules table {text-shadow: none;  padding-left: 1%; margin-left: 2.5%; margin-right: 1%; }
.rules thead { font-weight:bold; }
.rules td { padding-left: 0.2em; padding-right: 0.2em; }
.rules .safe {background-color: yellowgreen; text-align:center; }
.rules .fast {background-color: yellow; text-align:center; }
.rules .overexerted { background-color: #f49712; text-align: center; }
.rules .notallowed {background-color: darkred; text-align:center; color:white; }

.rules .card { float: right; border: 1px solid black; border-radius: 0.5em; max-width: 8em; margin: 0.5em; }
.rules .warning { border: 0.2em solid darkred; background-color:darksalmon; width: fit-content; border-radius: 0.5em; padding: 0.3em; }

/*für 2 spaltige Darstellung*/
.rules .container { display: flex; gap: 20px; /* Abstand zwischen Spalten */ margin-left: 0%; padding-left: 0.8%}
.rules .column.cleft3 { flex: 3; /* beide gleich breit */ }
.rules .column.cright3 { flex: 1; /* beide gleich breit */ }
/* Ab einer bestimmten Breite (z. B. 768px) */

@media (max-width: 768px) {
    .rules .container { flex-direction: column; /* Spalten untereinander */ gap: 0; /* Abstand entfernen im Einspalten-Layout */ }
}