/******************************************************************************
 * Název souboru: styles.css
 * Popis: Stylování pro textovou hru "Volání dálav"
 *
 * Autor: Jan Žák
 * Datum vytvoření: 2024-09-30
 * Poslední úprava: 2026-09-03
 * Verze: 0.9.19
 *
 * Licence: MIT
 *
 * Struktura:
 * - Základní CSS reset
 * - Sekce 1: Základní styly hry (locationContainer)
 * - Sekce 2: Reputace (locationContainer)
 * - Sekce 3: Odznaky (locationContainer)
 * - Sekce 4: Deníček (locationContainer)
 * - Sekce 5: Mapa (locationContainer)
 * - Sekce 6: Statistiky hry (locationContainer)
 * - Sekce 7: Status bary (gamePanel)
 * - Sekce 8: Navigační a akční tlačítka (gamePanel)
 * - Sekce 9: Počasí (locationContainer)
 * - Sekce 10: Inventář (locationContainer)
 * - Sekce 11: Tlačítka
 * - Sekce 12: Efekt krve při souboji
 * - Sekce 13: Cookie lišta
 * - Sekce 14: Otevírání zámků (game.js)
 * - Sekce 15: Informace o hře (info.html)
 * - Sekce 16: Novinky ve hře (news.html)
 * - Sekce 17: Media queries
 ******************************************************************************/
 
/* ===== Základní CSS reset ===== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body, html {
	font-family: 'Roboto Slab', serif;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Sjednocení vzhledu obrázků a médií */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

/* Formuláře – necháme Bootstrapu prostor pro tlačítka, ale rušíme přebytečné */
button, input, textarea, select {
	font: inherit;
}

/* Odkazy */
a {
	color: inherit;
	text-decoration: none;
}

/* Nadpisy bez marginu */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

/* Přizpůsobení velikosti h1 na malých displejích */
h1 {
	font-size: 2.5rem;
}

/*------------------------------------------------------------------------------
  Sekce 1: Základní styly hry (locationContainer) (index.html)
------------------------------------------------------------------------------*/
body.game, html.game {
	overflow: hidden;
	overscroll-behavior-y: none;
}

#card {
	position: relative;
	background: transparent;
	border: none;
	box-shadow: none;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#locationContainer {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

#gamePanel * {
	pointer-events: auto;
}

/* Obecná herní notifikace */
.game-notification {
	position: fixed;
	top: -100px; /* start mimo obrazovku */
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	color: white;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 16px;
	transition: top 0.4s ease;
	z-index: 9999;
}

/* Zobrazení */
.game-notification.show {
	top: 70px;
}

/*------------------------------------------------------------------------------
  Sekce 2: Nástěnka s reputací (locationContainer) (index.html)
------------------------------------------------------------------------------*/
/* Výchozí skrytí nástěnky reputace */
#reputationContainer {
	display: none;
	position: fixed;
	top: 5px;
	left: 5px;
	color: white;
	z-index: 10;
}

/* Nástěnka viditelná */
#reputationContainer.visible {
	display: flex !important;
}

#reputationContent {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
}

/* Hlavní souhrn reputace */
.reputation-summary {
	margin-top: 20px;
	margin-bottom: 28px;
}

/* Ikona, číslo a slovní hodnocení reputace */
.reputation-main {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Velká ikona aktuální reputace */
.reputation-large-icon {
	width: 70px;
	height: 70px;
	min-width: 70px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
}

/* Popisek nad číslem reputace */
.reputation-label {
	font-size: 0.9rem;
	font-weight: bold;
	color: #ccc;
}

/* Velké číslo reputace */
.reputation-number {
	font-size: 2.5rem;
	font-weight: bold;
	line-height: 1;
	margin: 3px 0 5px;
}

/* Slovní hodnocení reputace */
.reputation-description {
	font-size: 0.9rem;
	color: #ccc;
}

/* Seznam reputačních událostí */
.reputation-events {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Jedna reputační událost */
.reputation-event {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Nadpis reputační události */
.reputation-event-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: bold;
}

/* Pevná šířka ikon událostí */
.reputation-event-title i {
	width: 18px;
	text-align: center;
}

/* Seznam postav */
.reputation-characters {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding-left: 26px;
}

/* Jedna postava */
.reputation-character {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 14px;
	font-size: 0.85rem;
}

/* Ikona postavy */
.reputation-character i {
	font-size: 0.8rem;
}

/* Doplňující hláška reputační události */
.reputation-event-note {
	padding-left: 26px;
}

/*------------------------------------------------------------------------------
  Sekce 3: Nástěnka s odznaky (locationContainer) (index.html)
------------------------------------------------------------------------------*/
/* Výchozí skrytí nástěnky */
#badgeContainer {
	position: absolute;
	top: 5px;
	left: 5px;
	height: 100%;
	background-color: transparent;
	display: none;
	z-index: 10;
}

/* Nástěnka viditelná */
#badgeContainer.visible {
	display: flex !important;
}

#badgeContent {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
	overflow-y: auto;
}

/* Odznaky */
.badgeItem {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	padding: 10px;
}

.badgeItem i {
	font-size: 24px;
	width: 40px;
	height: 40px;
	background-color: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.badgeText {
	display: flex;
	flex-direction: column;
}

.badgeText p {
	margin: 0;
	font-size: 0.9rem;
	color: #ccc;
}

.badge-icon {
	margin-right: 8px;
	font-size: 20px;
	vertical-align: middle;
}

/*------------------------------------------------------------------------------
  Sekce 4: Deníček (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#diaryContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	background-color: transparent;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

#diaryContent {
	font-family: "Kalam", cursive;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	color: #fff;
	padding: 20px;
	overflow-y: auto;
}

/* Nadpis deníčku */
#diaryTitle {
	font-style: normal;
}

/* Jednotlivé zápisy v deníčku */
#diaryContent p {
	font-size: 1.05rem;
	line-height: 1.7;
	letter-spacing: 0.01em;
	margin-bottom: 0.7rem;
}

/*------------------------------------------------------------------------------
  Sekce 4a: Questy (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#questsContainer {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	background-color: transparent;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

#questsContent {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	color: #fff;
	padding: 15px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Hlavní nadpis */
#questsContent h2 {
	font-size: 2rem;
	margin-bottom: 18px;
}

#questsContent p {
	max-width: calc(100% - 90px);
}

/* Jeden quest */
.quest-entry {
	position: relative;
	max-width: calc(100% - 90px);
	padding: 10px 15px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.7);
}

/* Zlatý proužek aktivního questu */
.quest-entry::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 4px;
	border-radius: 4px;
	background-color: #d4a017;
}

/* Nadpis questu */
.quest-entry h3 {
	font-size: 1.1rem;
	margin: 0 0 6px 0;
}

/* Text questu */
.quest-entry p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #ccc;
}

/* Splněný quest */
.completed-quest {
	opacity: 0.7;
}

/* Zelený proužek splněného questu */
.completed-quest::before {
	background-color: #3f9142;
}

/*------------------------------------------------------------------------------
  Sekce 5: Mapa
------------------------------------------------------------------------------*/
#mapContainer {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	justify-content: center;
	align-items: center;
}

#mapContent {
	position: relative;
	width: 100%;
	height: 100%;
}

#mapViewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
}

#mapViewport.dragging {
	cursor: grabbing;
}

#mapStage {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
}

.map-node {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,.4);
}

.map-node.current {
	outline: 3px solid white;
	z-index: 5;
	box-shadow:
		0 0 0 2px rgba(0,0,0,0.5),
		0 0 10px rgba(255,255,255,0.6);
}

/* Legenda mapy */
#mapLegend {
	position: absolute;
	left: 12px;
	top: 10px;
	z-index: 20;
	background: rgba(255,255,255,0.92);
	color: #222;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.4;
	display: grid;
	gap: 6px;
	box-shadow:
		0 6px 18px rgba(0,0,0,0.25),
		inset 0 0 0 1px rgba(0,0,0,0.06);
	pointer-events: none;
}

/* řádek legendy */
.map-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* barevný čtvereček */
.map-legend-color {
	width: 14px;
	height: 14px;
	min-width: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.25);
	display: inline-block;
}

/*------------------------------------------------------------------------------
  Sekce 6: Statistiky hry (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#endGame h2 {
	margin-bottom: 1.5rem;
}

.endgame-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(20, 20, 20, 0.85);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	padding: 2rem;
	z-index: 9999;
	overflow-y: auto;
	pointer-events: auto;
}

.endgame-content {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2rem;
	border-radius: 10px;
	max-width: 800px;
	width: 100%;
	pointer-events: auto;
}

/* Širší závěrečné okno pro výběr životní cesty */
.partner-choice-content {
	max-width: 1000px;
}

#endGame button {
	margin: 2rem auto 0;
	display: block;
}

/*------------------------------------------------------------------------------
  Sekce 7: Status bary (locationContainer) (index.html)
------------------------------------------------------------------------------*/
/* Velikost a barva textu v progresbaru */
.progress-bar {
	font-size: 1rem;
	color: #000;
	font-weight: bold;
}

/*------------------------------------------------------------------------------
  Sekce 8: Navigační a akční tlačítka (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#navigation-buttons,
#action-buttons {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	pointer-events: auto;
}

#navigation-buttons .btn,
#action-buttons .btn{
	margin:0;
}

#navigation-buttons .btn{
	min-width:130px;
	background: rgba(40,90,160,.85);
	border: 1px solid rgba(255,255,255,.12);
	color:#fff;
}

/* Hover */
#navigation-buttons .btn:hover{
	background: rgba(55,110,190,.95);
}

#action-buttons .btn{
	min-width:130px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.08);
	color:#ddd;
}

/* Hover */
#action-buttons .btn:hover{
	background: rgba(255,255,255,.14);
	color:#fff;
}

/*------------------------------------------------------------------------------
  Sekce 9: Počasí (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#weatherCanvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/*------------------------------------------------------------------------------
  Sekce 10: Inventář (locationContainer) (index.html)
------------------------------------------------------------------------------*/
#inventory-container {
	position: fixed;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	padding: 8px 15px;
	border-radius: 10px;
	z-index: 20;
	pointer-events: none;
	font-size: 1.1rem;
}

#inventory-container * {
	pointer-events: auto;
}

/* Detail inventáře po rozkliknutí */
.inventory-details {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 6px;
	margin-left: -14px;
	margin-right: -14px;
	margin-bottom: -8px;
	background: rgba(0,0,0,0.22);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	font-size: 14px;
	text-align: left;
	line-height: 1.7;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	transition:
		max-height 0.35s ease,
		opacity 0.25s ease,
		padding 0.25s ease;
}

/* Otevřený stav */
.inventory-details.open {
	max-height: 420px;
	opacity: 1;
	padding: 10px;
}

/* Celá sekce inventáře */
.inventory-section{
	margin-bottom:10px;
	padding-bottom:8px;
	border-bottom:1px solid rgba(255,255,255,0.08);
}

/* Poslední sekce bez čáry */
.inventory-section:last-child{
	margin-bottom:0;
	padding-bottom:0;
	border-bottom:none;
}

/* Nadpis sekce */
.inventory-section-title{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:700;
	opacity:.9;
	margin-bottom:6px;
	padding-left:2px;
	cursor:default;
}

/* Klikací položky inventáře */
.inventory-item{
	line-height:1.35;
	margin-left:10px;
	margin-bottom:4px;
	padding:6px 8px;
	border-radius:8px;
	cursor:default;
}

/* Poslední položka bez mezery */
.inventory-item:last-child{
	margin-bottom:0;
}

/* Nelze právě sníst */
.inventory-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* Lepší jídla */
.inventory-good {
	background: rgba(80,180,80,0.12);
}

/* Vzácné top jídlo */
.inventory-rare {
	background: rgba(255,215,0,0.14);
	font-weight: bold;
}

/* Hover jen pro opravdu klikací položky */
.inventory-clickable{
	cursor:pointer;
	transition:background 0.2s ease;
}

.inventory-clickable:hover{
	background:rgba(255,255,255,0.08);
}

/*------------------------------------------------------------------------------
  Sekce 11: Tlačítka (index.html)
------------------------------------------------------------------------------*/
/* Tlačítko pro zvukové efekty */
#toggleSound {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	pointer-events: auto;
}

/* Reputace – vizuální odznak */
.reputation-box {
	position: absolute;
	top: 200px;
	right: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 20px;
	font-size: 1.1rem;
	color: #fff;
	z-index: 500;
	user-select: none;
	pointer-events: auto;
	cursor: pointer;
}

#reputationIcon {
	font-size: 1.2rem;
}

/* Tlačítko pro nástěnku s odznaky */
#badgesButton {
	position: absolute;
	top: 250px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: auto;
}

/* Tlačítko pro deníček */
#diaryButton {
	position: absolute;
	top: 300px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: auto;
}

/* Tlačítko pro questy */
#questsButton {
	position: absolute;
	top: 350px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: auto;
}

/* Tlačítko pro mapu */
#mapButton {
	position: absolute;
	top: 400px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: auto;
}

/* Tlačítko pro reset hry */
#resetButton {
	position: absolute; 
	top: 450px;
	right: 10px;
	width: 40px; 
	height: 40px; 
	border-radius: 50%; 
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	pointer-events: auto;
}

/* Velikost ikon a její centrování */
#toggleSound i, #badgesButton i, #diaryButton i, #questsButton i, #mapButton i, #resetButton i {
	display:block;
	height:auto;
	margin:0;
	padding:0;
	width:auto !important;
}

/*------------------------------------------------------------------------------
  Sekce 12: Efekt krve při souboji (index.html)
------------------------------------------------------------------------------*/
#bloodEffect {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('images/blood_1.png') center/cover no-repeat;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition: opacity 0.1s ease-in, opacity 0.8s ease-out;
	filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.8));
}

/*------------------------------------------------------------------------------
  Sekce 13: Cookie lišta (index.html)
------------------------------------------------------------------------------*/
#cookie-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
	padding: 15px 20px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
	z-index: 1000;
	width: 100%;
}


.cookie-text {
	flex-grow: 1;
}

/* Tlačítko na cookies liště */
#cookie-bar-button {
	margin-left: auto;
	background-color: #28a745;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
}

#cookie-bar-button:hover {
	background-color: #218838;
}

/*------------------------------------------------------------------------------
  Sekce 14: Otevírání zámků (minihra) game.js
------------------------------------------------------------------------------*/
#lockpick-ui {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	padding: 20px;
	display: flex;
	gap: 10px;
}

.pin {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	font-size: 24px;
	background: #444;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s;
}

.pin i {
	pointer-events: none;
}

.pin.set {
	background: #030;
	color: #6f6; /* zelená ikona */
}

.pin:active {
	transform: scale(0.9);
	box-shadow: 0 0 8px #fff2 inset;
}

.pin.fail {
	background: #300;
	color: #f66; /* červená ikona */
}

/*------------------------------------------------------------------------------
  Sekce 14a: Vaření (minihra) game.js
------------------------------------------------------------------------------*/
/* Ingredience v okně vaření */
.cooking-ingredients {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
}

/* Jedna ingredience */
.cooking-ingredient {
	width: 100px;
	min-height: 100px;
	border: 2px solid rgba(255,255,255,0.25);
	border-radius: 12px;
	background: rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	padding: 10px;
}

/* Hover efekt */
.cooking-ingredient:hover {
	border-color: rgba(255,255,255,0.7);
	background: rgba(255,255,255,0.12);
	transform: translateY(-2px);
}

/* Ikona ingredience */
.cooking-ingredient-icon {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 8px;
}

/* Název ingredience */
.cooking-ingredient-label {
	font-weight: 600;
	font-size: 0.95rem;
}

/* Počet kusů */
.cooking-ingredient-count {
	font-size: 0.85rem;
	opacity: 0.8;
	margin-top: 4px;
}

/* Vybraná ingredience */
.cooking-ingredient.selected {
	border-color: #198754;
	background: rgba(25, 135, 84, 0.22);
	box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.35);
}

/* Nedostupná ingredience */
.cooking-ingredient.disabled {
	opacity: 0.35;
	cursor: not-allowed;
	filter: grayscale(100%);
}

/* Kompaktnější šířka okna vaření na desktopu */
#cookingOverlay .endgame-content {
	width: fit-content;
	max-width: 520px;
	min-width: 0;
}

/* Tlačítka v okně vaření vycentrovat */
#cookingOverlay .cooking-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

/*------------------------------------------------------------------------------
  Sekce 15: Informace o hře (info.html)
------------------------------------------------------------------------------*/
.info-item {
	padding: 1rem;
	margin-bottom: 20px;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
}

.info-item h2 {
	font-size: 1.8rem;
	color: #ffd700;
}

.info-text {
	line-height: 1.6 !important;
	margin-bottom: 1.2rem !important;
	text-align: justify !important;
}

/*------------------------------------------------------------------------------
  Sekce 16: Novinky ve hře (news.html)
------------------------------------------------------------------------------*/
header {
	margin-bottom: 40px;
}

header h1 {
	font-size: 2.5rem;
}

header p {
	font-size: 1.2rem;
	color: #cccccc;
}

/* Stylování pro tečky před zprávami */
.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

/* Barvy pro různé typy zpráv */
.green-dot {
	background-color: green;
}

.orange-dot {
	background-color: orange;
}

.red-dot {
	background-color: red;
}

/* Stylování vysvětlivek pod nadpisem */
.news-legends {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	font-size: 0.9rem;
	color: #ccc;
}

.legend {
	display: flex;
	align-items: center;
}

.legend span {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 5px;
}

.news-item {
	background-color: rgba(255, 255, 255, 0.1);
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.news-item h2 {
	font-size: 1.8rem;
	color: #ffd700;
}

.news-item .news-date {
	font-size: 0.9rem;
	color: #cccccc;
	margin-bottom: 10px;
}

.news-item p {
	font-size: 1rem;
	line-height: 1.5;
}

/* Táhlo pro přesouvání herního panelu – běžně skryté */
#gamePanelDragHandle {
	display: none;
}

/*------------------------------------------------------------------------------
  Sekce 17: Media queries
------------------------------------------------------------------------------*/
@media (max-width: 576px) {
	h1 {
		font-size: 1.5rem;
	}
}

/* Stylování pro mobily a malé displeje (do šířky 768px) */
@media (max-width: 768px) {
	#locationContainer {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		pointer-events: none;
	}

	#locationImage {
		width: 100%;
		height: 50vh;
		object-fit: cover;
	}

	#reputationContainer {
		width: 100%;
		max-height: 50vh;
		padding-right: 60px;
		pointer-events: auto;
		z-index: 10;
	}

	#reputationContent {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
	}

	#badgeContainer {
		width: 100%;
		max-height: 50vh;
		padding-right: 60px;
		pointer-events: auto;
		z-index: 10;
	}

	#badgeContent {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
	}

	#diaryContainer {
		width: 100%;
		max-height: 50vh;
		padding-right: 60px;
		pointer-events: auto;
		z-index: 10;
	}

	#diaryContent {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
	}

	#questsContainer {
		width: 100%;
		max-height: 50vh;
		padding-right: 60px;
		pointer-events: auto;
		z-index: 10;
	}

	#questsContent {
		width: 100%;
		height: 50vh;
		padding: 10px 10px 10px 10px;
		overflow-y: auto;
	}

	#questsContent p {
		max-width: 100%;
	}

	.quest-entry {
		max-width: 100%;
		padding: 10px 0px 10px 10px;
		border-radius: 12px;
	}

	/* zlatý proužek blíž ke kraji */
	.quest-entry::before {
		left: 0;
		top: 10px;
		bottom: 10px;
	}

	.quest-entry h3 {
		font-size: 1.15rem;
		line-height: 1.25;
		margin-bottom: 8px;
	}

	.quest-entry p {
		font-size: 0.92rem;
		line-height: 1.45;
		word-break: break-word;
	}

	#mapContainer {
		width: 100%;
		max-height: 50vh;
		pointer-events: auto;
		z-index: 10;
	}

	#mapContent {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
	}

	#gamePanel {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 15px 15px 15px;
		z-index: 10;
	}

	/* Kompaktnější navigační tlačítka na mobilu */
	#navigation-buttons {
		gap: 5px;
	}

	/* Na mobilu zmenšíme tlačítka pohybu */
	#navigation-buttons .btn {
		min-width: 0;
		padding: 6px 10px;
		font-size: 0.8rem;
	}

	#action-buttons .btn {
		min-width: 0;
		padding: 6px 10px;
		font-size: 0.8rem;
	}

	#lockpick-ui {
		top: 45%;
	}

	/* Kompaktnější obsah okna */
	#cookingOverlay .endgame-content {
		width: 100%;
		max-width: none;
		padding: 1rem;
		border-radius: 14px;
	}

	/* Menší mezery mezi ingrediencemi */
	.cooking-ingredients {
		justify-content: center;
		gap: 5px;
	}

	/* Menší kartičky ingrediencí na mobilu */
	.cooking-ingredient {
		width: calc(50% - 5px);
		min-height: 108px;
		padding: 8px;
	}

	/* Menší ikonky a texty */
	.cooking-ingredient-icon {
		font-size: 1.8rem;
		margin-bottom: 6px;
	}

	.cooking-ingredient-label {
		font-size: 0.9rem;
	}

	.cooking-ingredient-count {
		font-size: 0.8rem;
	}

	/* Text receptu ať není zbytečně roztažený */
	#selectedRecipe {
		text-align: center;
		font-size: 1rem;
	}

	/* Tlačítka dole vycentrovat */
	#cookingOverlay .cooking-actions {
		justify-content: center;
	}

	/* Výběr partnerky na mobilu */

	/* Závěrečné okno může na mobilu scrollovat */
	#endGame {
		align-items: flex-start;
		overflow-y: auto;
		padding: 15px 0;
	}

	/* Kompaktnější okno výběru životní cesty */
	#endGame .partner-choice-content {
		width: calc(100% - 20px);
		max-width: none;
		margin: 0 auto;
		padding: 1rem;
	}

	/* Menší mezery mezi kartami */
	#endGame .partner-choice-content .row {
		--bs-gutter-x: 10px;
		--bs-gutter-y: 15px;
	}

	/* Na mobilu zobrazíme dvě možnosti vedle sebe */
	#endGame .partner-choice-content .col-md-3 {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
		margin-bottom: 10px !important;
	}

	/* Zmenšíme obrázky postav */
	#endGame .partner-choice-content img {
		width: auto;
		max-width: 100%;
		height: 105px;
		object-fit: contain;
		margin-left: auto;
		margin-right: auto;
	}

	/* Kompaktnější jméno postavy */
	#endGame .partner-choice-content h4 {
		font-size: 1rem;
		margin-bottom: 4px;
	}

	/* Menší nadpis závěrečné volby na mobilu */
	#endGame .partner-choice-content h2 {
		font-size: 1.35rem;
		margin-bottom: 4px;
	}

	/* Menší text popisu */
	#endGame .partner-choice-content .text-start {
		margin-left: 0 !important;
		font-size: 0.78rem;
		line-height: 1.35;
	}

	/* Menší údaj o vztahu */
	#endGame .partner-choice-content p {
		font-size: 0.78rem;
		margin-bottom: 8px;
	}

	/* Kompaktnější tlačítka */
	#endGame .partner-choice-content .btn {
		font-size: 0.75rem;
		padding: 6px 8px;
	}


	#toggleSound {
		top: 0px;
	}

	.reputation-box {
		top: 70px;
	}

	#badgesButton {
		top: 120px;
	}

	#diaryButton {
		top: 170px;
	}

	#questsButton {
		top: 220px;
	}

	#mapButton {
		top: 270px;
	}

	#resetButton {
		top: 320px;
	}
}

/* Stylování pro tablety a malé notebooky (769px až 1439px) */
@media (min-width: 769px) and (max-width: 1439px) {
	#locationImage {
		width: 100%;
		height: 70vh;
		object-fit: cover;
	}

	#reputationContainer {
		width: 100%;
		max-height: 70vh;
		pointer-events: auto;
		z-index: 10;
	}

	#reputationContent {
		width: 100%;
		height: 70vh;
		overflow-y: auto;
	}

	#badgeContainer {
		width: 100%;
		max-height: 70vh;
		pointer-events: auto;
		z-index: 10;
	}

	#badgeContent {
		width: 100%;
		height: 70vh;
		overflow-y: auto;
	}

	#diaryContainer {
		width: 100%;
		max-height: 70vh;
		pointer-events: auto;
		z-index: 10;
	}

	#diaryContent {
		width: 100%;
		height: 70vh;
		overflow-y: auto;
	}

	#questsContainer {
		width: 100%;
		max-height: 70vh;
		pointer-events: auto;
		z-index: 10;
	}

	#questsContent {
		width: 100%;
		height: 70vh;
		overflow-y: auto;
	}

	#mapContainer {
		width: 100%;
		max-height: 70vh;
		pointer-events: auto;
		z-index: 10;
	}

	#mapContent {
		width: 100%;
		height: 70vh;
		overflow-y: auto;
	}

	#gamePanel {
		width: 100%;
		height: 30vh;
		overflow-y: auto;
		box-sizing: border-box;
		padding: 15px;
		z-index: 10;
	}
}

/* Stylování pro standardní PC monitory a velké notebooky (1440px až 1920px) */
@media (min-width: 1440px) and (max-width: 1920px) {
	#locationImage {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#reputationContainer {
		width: 70%;
		pointer-events: auto;
	}

	#badgeContainer {
		width: 70%;
		pointer-events: auto;
	}

	#diaryContainer {
		width: 70%;
		pointer-events: auto;
	}

	#questsContainer {
		width: 70%;
		pointer-events: auto;
	}

	#mapContainer {
		width: 70%;
		pointer-events: auto;
	}

	#gamePanel {
		position: absolute;
		bottom: 0px;
		right: 150px;
		width: 500px;
		max-height: 50vh;
		background: rgba(0,0,0,.62);
		backdrop-filter: blur(6px);
		color: white;
		padding:16px 20px;
		border: 1px solid rgba(255,255,255,.08);
		box-shadow:
			0 -8px 25px rgba(0,0,0,.45),
			0 0 0 1px rgba(255,255,255,.03);
		overflow-y: auto;
		transition: transform 0.4s ease, opacity 0.4s ease;
		z-index: 10;
	}

	#gameOutput p{
		margin:0 0 10px 0;
	}
}

/* Stylování pro extra velké obrazovky a širokoúhlé monitory (1921px a více) */
@media (min-width: 1921px) {
	#locationImage {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#reputationContainer {
		width: 75%;
		pointer-events: auto;
	}

	#badgeContainer {
		width: 75%;
		pointer-events: auto;
	}

	#diaryContainer {
		width: 75%;
		pointer-events: auto;
	}

	#questsContainer {
		width: 75%;
		pointer-events: auto;
	}

	#mapContainer {
		width: 75%;
		pointer-events: auto;
	}

	#gamePanel {
		position: absolute;
		bottom: 0px;
		right: 150px;
		width: 500px;
		max-height: 50vh;
		background: rgba(0,0,0,.62);
		backdrop-filter: blur(6px);
		color: white;
		padding: 24px 50px 16px 20px;
		border: 1px solid rgba(255,255,255,.08);
		box-shadow:
			0 -8px 25px rgba(0,0,0,.45),
			0 0 0 1px rgba(255,255,255,.03);
		overflow-y: auto;
		transition: transform 0.4s ease, opacity 0.4s ease;
		z-index: 10;
	}

	#gameOutput p{
		margin:0 0 10px 0;
	}

	/* Táhlo pro přesouvání herního panelu */
	#gamePanelDragHandle {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid rgba(255,255,255,.08);
		background: rgba(255,255,255,.08);
		color: rgba(255,255,255,.65);
		cursor: grab;
		z-index: 20;
	}

	/* Zvýraznění táhla po najetí */
	#gamePanelDragHandle:hover {
		background: rgba(255,255,255,.16);
		color: #fff;
	}

	/* Kurzor během přesouvání panelu */
	#gamePanelDragHandle:active {
		cursor: grabbing;
	}
}