/* --- Game Over Overlay --- */
.game-over-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
}
.game-over-overlay span {
	color: #e23c3c;
	font-size: min(16vw, 120px);
	font-weight: 900;
	letter-spacing: 6px;
	text-transform: uppercase;
	text-shadow: 0 4px 32px #000, 0 1px 0 #fff2;
}
/* --- Life Bar Block Styles --- */
.life-bar-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.life-bar-label {
	font-size: 13px;
	color: #333;
	margin-bottom: 2px;
	font-weight: 500;
}
/* --- Life Bar Styles --- */
.life-bar {
	display: flex;
	gap: 6px;
}
.life-heart {
	width: 20px;
	height: 20px;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.2s;
}
.life-heart svg {
	width: 22px;
	height: 22px;
	display: block;
}
.life-heart.lost {
	opacity: 0.25;
	filter: grayscale(1);
}
/* --- Quiz Modal Styles --- */
.quiz-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quiz-panel {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	padding: 32px 18px 24px 18px;
	min-width: 260px;
	max-width: 95vw;
	width: 100%;
	text-align: center;
	position: absolute;
}
.quiz-q {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 18px;
}
.quiz-answers {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}
.quiz-answer {
	font-size: 1.1rem;
	padding: 10px 0;
	border-radius: 8px;
	border: 2px solid #e0e0e0;
	background: #f8f8f8;
	cursor: pointer;
	transition: background 0.2s, border 0.2s, color 0.2s;
}
.quiz-answer:disabled {
	opacity: 0.7;
	cursor: default;
}
.quiz-answer.quiz-correct {
	background: #e6fae6;
	border-color: #3bb143;
	color: #217a2b;
}
.quiz-answer.quiz-wrong {
	background: #ffeaea;
	border-color: #e23c3c;
	color: #a11a1a;
}
.quiz-msg {
	color: #e23c3c;
	font-size: 1.05rem;
	margin-bottom: 10px;
	min-height: 1.2em;
}
.quiz-expl {
	color: #217a2b;
	font-size: 1.08rem;
	margin-bottom: 16px;
	min-height: 1.2em;
}
.quiz-close {
	font-size: 1.1rem;
	padding: 8px 24px;
	border-radius: 8px;
	border: none;
	background: #3bb143;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s;
}
.quiz-close:hover {
	background: #217a2b;
}

/* Стилі для зображень у квізі */
.quiz-question-image {
	margin: 15px 0;
}

.quiz-question-image img {
	max-width: min(90vw, 400px);
	max-height: min(90vh, 300px);
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quiz-result {
	color: #217a2b;
	font-size: 1.08rem;
	margin-bottom: 16px;
	min-height: 1.2em;
}

.quiz-correct-text {
	font-weight: 600;
	margin-bottom: 10px;
}

.quiz-correct-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.quiz-correct-images img {
	max-width: min(90vw, 500px);
	max-height: min(90vh, 400px);
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.inv-slot img {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 auto;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
	pointer-events: none;
}
/* Прості стилі для мобільного прототипу */
:root{--bg:#f6f7fb;--card:#ffffff;--accent:#6b5b95;--accent-2:#ff7b7b}
*{box-sizing:border-box}
html,body,#playArea{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;background:linear-gradient(180deg,#eaf2ff, #f6f7fb);color:#222}
.hud{
	position:fixed;
	top:16px;
	left:16px;
	z-index:20;
	background:rgba(255,255,255,0.5);
	backdrop-filter:blur(8px);
	border-radius:10px;
	padding:6px 10px;
	box-shadow:0 2px 8px rgba(0,0,0,0.10);
	font-size:13px;
	min-width:unset;
}
.inventory{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inv-title{font-weight:600;font-size:13px;color:#333}
.inv-list{display:flex;gap:6px;cursor:pointer;transition:opacity 0.2s}
.tetris-launch-btn{background:#4CAF50;color:#fff;border:none;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:background-color 0.3s,transform 0.1s;margin-left:8px;display:none}
.tetris-launch-btn:hover{background:#45a049;transform:translateY(-1px)}
.tetris-launch-btn:active{transform:translateY(1px)}
.jack-launch-btn{background:#FF6B35;color:#fff;border:none;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:background-color 0.3s,transform 0.1s;margin-left:8px;display:none}
.jack-launch-btn:hover{background:#E55A2B;transform:translateY(-1px)}
.jack-launch-btn:active{transform:translateY(1px)}
.inv-list:hover{opacity:0.8}
.inv-slot{width:22px;height:22px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.08);font-size:11px;color:#666;box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-weight:600}
.btn:active{transform:translateY(1px)}
.play-area{position:fixed;inset:0;overflow:auto;background:linear-gradient(180deg,#f0f8ff,#e6f3ff);
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}
.play-area::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Webkit */
}
.map-tile{position:absolute;width:100%;height:100%;background-image: linear-gradient(135deg, rgba(120,160,80,0.06) 25%, transparent 25%),linear-gradient(225deg, rgba(120,160,80,0.06) 25%, transparent 25%),linear-gradient(45deg, rgba(120,160,80,0.06) 25%, transparent 25%),linear-gradient(315deg, rgba(120,160,80,0.06) 25%, transparent 25%);background-size: cover, 32px 32px,32px 32px,32px 32px,32px 32px;background-position: center,0 0,16px 0,16px -16px,0px 16px;z-index:0;opacity:0.98}

/* Контейнер карти для браузерного скролу */
.map-layer{position:relative;width:auto;height:auto;z-index:0}

/* Коли шар карти трансформовано, елементи всередині змінюють візуальну позицію автоматично */
.map-layer .map-element{z-index:5}
.map-element{position:absolute;border-radius:6px;box-shadow:0 8px 14px rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;user-select:none;z-index:5;backdrop-filter: blur(2px);}
.map-element.chest{background:#8b6d3b;    box-shadow: #ccc 0px 0px 5px 0px;}
.map-element.chest.lid{background:#6b4f2a}

.map-element[aria-disabled="true"] {
	opacity: 0.6;
	filter: grayscale(0.8) brightness(0.8);
}

/* Індикатор відкритої скрині */
.opened-indicator {
	animation: openedIndicatorPulse 2s infinite ease-in-out;
}

@keyframes openedIndicatorPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}
.map-element img{border-radius:8px;object-fit:cover;display:block}
.map-element .label{background:rgba(255,255,255,0.95);color:#333;padding:4px 6px;border-radius:6px;font-size:11px;pointer-events:none}

/* Маркери локацій для режиму встановлення */
.location-marker {
	animation: markerPulse 1.5s infinite ease-in-out;
	user-select: none;
}

.location-marker:hover {
	animation: none; /* Зупинити пульсацію при наведенні */
}

.location-marker:active {
	transform: scale(0.9) !important;
}

@keyframes markerPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

.remaining{font-size:13px;color:#333;margin-right:8px}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:40}
.overlay.hidden{display:none}
.panel{
	background:var(--card);
	padding:32px 0 32px 0;
	border-radius:0;
	max-width:100vw;
	width:100vw;
	text-align:center;
	box-shadow:none;
}

#overlayTitle {
	font-size: min(10vw, 64px);
	font-weight: 900;
	margin: 0 0 18px 0;
	letter-spacing: 2px;
}
#overlayMessage {
	font-size: min(5vw, 32px);
	font-weight: 500;
	margin: 0 0 12px 0;
}
.footer{padding:10px 12px;text-align:center;color:#666;font-size:12px}
@media (min-width:520px){header h1{font-size:22px}.ingredient{width:64px;height:64px}}