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

@font-face { font-family: 'Chomsky'; src: local('Chomsky'), url('/Games/Tiletum/fonts/Chomsky.woff2') format('woff2'); }

/*für 2 spaltige Darstellung*/
.rules .container { display: flex; gap: 20px; /* Abstand zwischen Spalten */ }
.rules .column { 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 */ }
}

/*.sidepanel: immer einspaltig */
#panelRules .container { display: flex; flex-direction: column; /* immer untereinander */ gap: 0; /* kein Abstand */ }

.rules .border { border: none; background-color: #ebe3d3; border-radius: 12px; }
/*.rules .border_brown { border: none; background-color: #decbb2; border-radius: 12px; padding: 5px; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); margin-right: 1%; }*/
.rules .border_brown { background-color: #decbb2; padding: 1%; margin-right: 1%; margin-left: 1%; box-shadow: inset 0 0 5vw #ebe3d3; /* weicher Rand nach innen */ border-radius: 12px; margin-top: 2%; }
/*.rules .border_blue { border: none; background-color: #cfe0e0; border-radius: 12px; padding: 5px; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); margin-right: 1%; margin-left: 1%; }*/
.rules .border_helper_table { background-color: #bba999; padding: 1%; margin-right: 1%; margin-left: 1%; }
.rules .border_character_table { background-color: #dfcbb4; padding: 1%; margin-right: 1%; margin-left: 1%; }
.rules .border_contracts_table { background-color: #c8cac1; padding: 1%; margin-right: 1%; margin-left: 1%; }
.rules .border_fair_table { background-color: #bf9f94; padding: 1%; margin-right: 1%; margin-left: 1%; }
.rules .border_board_table { background-color: #e3d4bf; padding: 1%; margin-right: 1%; margin-left: 1%; }

.rules .background_blue { border-radius: 0.3vw; background-image: url(/Games/Tiletum/images/rules/background_blue.webp); background-repeat: repeat; padding-top: 1%; padding-bottom: 1%; border-radius: 12px; box-shadow: inset 0 0 5vw #ebe3d3; /* weicher Rand nach innen */ margin-right: 1%; margin-left: 1%; margin-top: 2%; }
.rules .border_small_container { border: solid 0.1em grey; border-radius: 0.3vw; }
.rules .border_small_grey { border: solid 0.2vw grey; border-radius: 0.3vw; }
.rules .border_small_black { border: solid 0.2vw black; border-radius: 0.3vw; }
.rules .fullwidth { width: 90%; /* Tabelle über gesamte Seitenbreite */ border-collapse: collapse; /* Rahmen zusammenfassen */ }
    .rules .fullwidth td { border: solid 0.1vw black; /* Rahmen um Zellen */ padding-left: 1%; /* Innenabstand für bessere Lesbarkeit */  }
    .rules .fullwidth img { height: 5vw; border-radius: 12px; }
#panelRules .fullwidth img { height: 3vw; border-radius: 12px; }

/*.rules h1 { font-family: "Paris Forbel", serif; border: none; color: black; font-size: 2vw; padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase;  border-bottom: 0.3vw solid #98bda4; border-top: 0.3vw solid #98bda4; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; }*/
/*.rules h1 { font-family: "Paris Forbel", serif; border: none; color: black; font-size: 2vw; padding: 0px 0px 0px 10px; text-shadow: none; text-transform: uppercase;  border-bottom: 0.3vw solid #98bda4; border-top: 0.3vw solid #98bda4; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; }
.rules h1 { font-family: "Chomsky"; border: none; color: black;  font-size: 2vw; padding: 0px 0px 0px 10px; text-shadow: none;  border-bottom: 0.3vw solid transparent; border-top: 0.3vw solid transparent; text-align: center; margin-top: 4%; padding-top: 1%; padding-bottom: 1%; border-image: linear-gradient(to right, transparent, #98bda4, transparent) 1; }*/
.rules h1 { font-family: "Chomsky"; border: none; font-size: clamp(1em, 3vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #581a22, 0.1vw -0.1vw 0 #581a22, -0.1vw 0.1vw 0 #581a22, 0.1vw 0.1vw 0 #581a22; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_1.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 70% 120%; background-position: center; color: #ebe3d3; }
#panelRules h1 { font-family: "Chomsky"; border: none; font-size: clamp(0.8em, 3vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #581a22, 0.1vw -0.1vw 0 #581a22, -0.1vw 0.1vw 0 #581a22, 0.1vw 0.1vw 0 #581a22; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_1.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 100% 120%; background-position: center; color: #ebe3d3; }
.rules h2 { font-family: "Chomsky"; border: none; font-size: clamp(1em, 2.5vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #38638e, 0.1vw -0.1vw 0 #38638e, -0.1vw 0.1vw 0 #38638e, 0.1vw 0.1vw 0 #38638e; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 50% 120%; background-position: center; color: #ebe3d3; }
#panelRules h2 { font-family: "Chomsky"; border: none; font-size: clamp(1em, 2vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #38638e, 0.1vw -0.1vw 0 #38638e, -0.1vw 0.1vw 0 #38638e, 0.1vw 0.1vw 0 #38638e; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 90% 120%; background-position: center; color: #ebe3d3; }
.rules h3 { font-family: "Chomsky"; text-align: left; font-size: clamp(1em, 2.3vw, 2.1em ); color: #563228; text-shadow: none; padding: 1%; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5em; /* Abstand proportional zur Schriftgröße */ }
#panelRules h3 { font-family: "Chomsky"; text-align: left; font-size: clamp(1em, 1.5vw, 2.1em ); color: #563228; text-shadow: none; padding: 1%; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5em; /* Abstand proportional zur Schriftgröße */ }
.rules h3 .icon { width: 4vw; /* Breite entspricht der Schriftgröße */ height: auto; /* Höhe passt sich proportional an */ }
/*for solo mode*/
.rules h4 { font-family: "Chomsky"; border: none; font-size: clamp(1em, 2.5vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #9f7e31, 0.1vw -0.1vw 0 #9f7e31, -0.1vw 0.1vw 0 #9f7e31, 0.1vw 0.1vw 0 #9f7e31; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2_solo.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 50% 120%; background-position: center; color: #ebe3d3; }
#panelRules h4 { font-family: "Chomsky"; border: none; font-size: clamp(1em, 2vw, 2.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #9f7e31, 0.1vw -0.1vw 0 #9f7e31, -0.1vw 0.1vw 0 #9f7e31, 0.1vw 0.1vw 0 #9f7e31; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2_solo.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 90% 120%; background-position: center; color: #ebe3d3; }
.rules h5 { border: none; font-size: clamp(0.8em, 1.4vw, 1.1em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #9f7e31, 0.1vw -0.1vw 0 #9f7e31, -0.1vw 0.1vw 0 #9f7e31, 0.1vw 0.1vw 0 #9f7e31; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2_solo.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 50% 120%; background-position: center; color: #ebe3d3; }
#panelRules h5 { border: none; font-size: clamp(0.8em, 1.1vw, 1.3em ); padding: 0px 0px 0px 10px; text-shadow: -0.1vw -0.1vw 0 #9f7e31, 0.1vw -0.1vw 0 #9f7e31, -0.1vw 0.1vw 0 #9f7e31, 0.1vw 0.1vw 0 #9f7e31; text-align: center; margin-top: 5%; padding-top: 2%; padding-bottom: 1%; background-image: url(/Games/Tiletum/images/rules/Header_2_solo.webp); background-repeat: no-repeat; /*Kein Wallpaper*/ background-size: 90% 120%; background-position: center; color: #ebe3d3; }

.rules p { font-size: clamp(0.8em, 1.4vw, 1.1em ); color: black; text-shadow: none; padding-top: 0.2vw; padding-left: 0.5em; margin-left: 0.5em; margin-right: 1em; }
#panelRules p { font-size: clamp(0.8em, 1.1vw, 1.3em ); color: black; text-shadow: none; padding-top: 0.2vw; padding-left: 1%; margin-left: 0.5vw; }
.rules ul { font-size: clamp(0.8em, 1.4vw, 1.1em ); color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.5vw; margin-bottom: 0vw; list-style-type: disc; }
#panelRules ul { font-size: clamp(0.8em, 1.1vw, 1.3em ); color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.2vw; margin-bottom: 0vw; }
.rules ol { font-size: clamp(0.8em, 1.4vw, 1.1em ); color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.2vw; margin-bottom: 0vw; margin-top: 2%; }
#panelRules ol { font-size: clamp(0.8em, 1.1vw, 1.3em ); color: black; text-shadow: none; margin-left: 1.3vw; margin-top: 0.2vw; margin-bottom: 0vw; margin-top: 2%; }
.rules .text_small { font-size: clamp(0.8em, 1.2vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
#panelRules .text_small { font-size: clamp(0.8em, 0.9vw, 1.1em ); color: black; text-shadow: none; padding: 1%; text-wrap: nowrap; }
.rules .text_small_2 { font-size: clamp(0.8em, 1.1vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
#panelRules .text_small_2 { font-size: clamp(0.8em, 0.9vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
.rules table { margin-left: 1.2vw; font-size: clamp(0.8em, 1.4vw, 1.1em ); }
#panelRules table { font-size: clamp(0.8em, 1vw, 1.1em ); color: black; text-shadow: none; margin-left: 0.5vw }

.rules .text_example { border-radius: 0.3vw; margin-top: 1%; font-size: clamp(0.8em, 1.1vw, 1.1em ); color: black; text-shadow: none; padding: 1%; }
.rules .chromsky { font-family: "Chomsky"; font-size: clamp(1em, 2.5vw, 2.1em ); color: saddlebrown}

.rules .hints4Handling { border-radius: 12px; }

.rules .center { text-align: center; }
.rules .right { text-align: right; }
.rules .margin_top20 { margin-top: 20% }
.rules .margin_top1 { margin-top: 1% }
.rules .margin_top2 { margin-top: 2% }
.rules .margin_bottom1 { margin-bottom: 1% }
.rules .margin_right1 { margin-right: 1% }
.rules .margin_left20 { margin-left: 3.5vw }
.rules .margin_left18 { margin-left: 3vw }
.rules .margin_left2em { margin-left: 2em }
.rules .margin_left45em { margin-left: 4.5em }
.rules .margin_left0 { margin-left: 0 }
#panelRules .margin_left0 { margin-left: 0 }
.rules .top { vertical-align: top; }
.rules .bottom { vertical-align: bottom; }
.rules .middle { vertical-align: middle }
.rules .padding_left_2 { padding-left: 2%; }
.rules .padding_left_40 { padding-left: 40%; }
#panelRules .padding_left_40 { padding-left: 20%; }
.rules .padding_right_2 { padding-right: 2%; }
.rules .fett { font-weight: bold; }

.rules .label { display: inline-block; border-radius: 50%; height: 1.5em; width: 1.5em; background: black; border: 2px solid #666; color: white; text-align: center; font-size: 0.8333em; }

.rules .border_radius_40 { border-radius: 40% }

/*tables*/
.rules .cell_picture_80 { width: 80%; vertical-align: top; }
.rules .cell_picture_70 { width: 70%; vertical-align: top; }
.rules .cell_picture_50_middle { width: 50%; vertical-align: middle; }
.rules .cell_picture_50 { width: 50%; vertical-align: top; }
.rules .cell_picture_40 { width: 40%; vertical-align: top; }
.rules .cell_picture_30 { width: 30%; vertical-align: top; }
.rules .cell_picture_25 { width: 25%; vertical-align: top; }
.rules .cell_picture_20 { width: 20%; vertical-align: top; }
.rules .cell_picture_15 { width: 15%; vertical-align: top; }
.rules .cell_picture_10 { width: 10%; }
.rules .cell_picture_7 { width: 7%; vertical-align: top; }
.rules .cell_picture_5 { width: 5%; vertical-align: top; }

/*Images*/
.rules .img_100 { width: 100%; border-radius: 12px; }
.rules .img_70 { width: 70%; border-radius: 12px; }
.rules .img_h_70 { width: 70%; max-width: none; border-radius: 12px; }
.rules .img_60 { width: 60%; border-radius: 12px; }
.rules .img_50 { width: 50%; border-radius: 12px; }
.rules .img_40 { width: 40%; border-radius: 12px; }
.rules .img_30 { width: 30%; border-radius: 12px; }
.rules .img_25 { width: 25%; border-radius: 12px; }
.rules .img_20 { width: 20%; border-radius: 12px; }
.rules .img_15 { width: 15%; border-radius: 12px; }
#panelRules .img_15 { width: 25%; border-radius: 12px; }
.rules .img_10 { width: 10%; border-radius: 12px; }
.rules .img_7 { width: 7%; border-radius: 12px; }
.rules .img_5 { width: 5%; border-radius: 12px; }
.rules .img_3 { width: 3%; border-radius: 12px; }
.rules .img_2_5 { width: 2.5%; border-radius: 12px; }
.rules .img_2 { width: 2%; border-radius: 12px; }
.rules .img_2a { height: 1vw;}

#rules .float_left { float: left; text-align: left; margin-right: 1em }
#rules .float_right { float: right; text-align: right; margin-right: 1em }

.rules .red { color: #be173a; text-shadow: none; font-weight: bold; }
.rules .green { color: #68981b; text-shadow: none; font-weight: bold; }
.rules .yellow { color: #cab910; text-shadow: none; font-weight: bold; }
.rules .blue { color: #4d72af; text-shadow: none; font-weight: bold; }

.rules .background_white { background-color: white; }

/*ab hier von P'achakuna und Skymines kopiert, was nicht gebraucht wird -> löschen*/

/*.rules ol { font-size: 1em; color: black; text-shadow: none; padding: 5px; list-style-type: lower-roman; }*/
.rules .green_malik { color: #729e78; /* Farbe*/ text-shadow: none; }
.rules .grey { color: #615354; /* Farbe Titan*/ text-shadow: none; }


/*tables*/




.rules .sidebaronly { display: none; }

#panelRules .sidebaronly { display: inherit; }