@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&family=Press+Start+2P&display=swap');
body {
	margin: 0;
	padding: 10px 10px 50px 415px;
	background: linear-gradient(135deg, #0f2b1f, #2c1b0f);
	color: white;
	font-family: 'Fredoka', sans-serif;
	text-align: center;
	transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
h1 { 
	font-family: 'Press Start 2P', cursive; 
	font-size: 2rem; 
	color: #fcd34d; 
	text-shadow: 0 0 15px #fcd34d; 
	margin: 6px 0 4px; 
}
.subtitle { 
	color: #86efac; 
	margin-bottom: 8px; 
	font-size: 1rem; 
	position: relative; 
}
.currency-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 1280px;
	margin: 8px auto 8px;
	padding: 5px;
	gap: 2px;
}
.currency-box {
	background: rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 10px;
	font-size: 1.1rem;
	white-space: nowrap;
	flex: 1;
	max-width: 460px;
	margin-left: 35px;
}
.tab-row {
	display: flex;
	justify-content: center;
	max-width: 1280px;
	margin: 0 auto 12px;
	padding: 0 20px;
	gap: 12px;
}
.resources-grid {
	max-width: 1280px; 
	margin: 0 auto;
	display: grid; 
	grid-template-columns: repeat(auto-fit, 210px); 
	gap: 52px;
	justify-content: center;
	justify-items: center;
	padding: 0 20px;
}
.panel {
	background: rgba(255,255,255,0.08);
	border-radius: 14px;
	padding: 14px;
	border: 4px solid;
	text-align: center;
	width: 210px;
	margin: 0;
	position: relative;
	opacity: 1;
	transform: translateX(0);
}
.panel.new-unlock {
	animation: unlockPop 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes unlockPop {
	0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
	40%  { transform: scale(1.25) rotate(4deg); }
	65%  { transform: scale(0.95) rotate(-2deg); }
	80%  { transform: scale(1.08) rotate(1deg); }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.panel.slide-from-left {
	animation: slideFromLeft 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes slideFromLeft {
	from {
		opacity: 0;
		transform: translateX(-380px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.resource { 
	font-size: 2.2rem; 
	font-weight: bold; 
	margin: 5px 0 3px; 
}
.storage { 
	font-size: 1rem; 
	color: #ddd; 
	font-weight: 600; 
}
.rate {
	font-size: 0.85rem;
	color: #86efac;
	margin-top: 4px;
	font-weight: 500;
}
.next-unlock {
	margin-top: 12px;
	font-size: 1.15rem;
	color: #86efac;
	opacity: 0.85;
}
.next-unlock strong {
	font-weight: bold;
}
.click-zone {
	width: 100px; 
	height: 100px; 
	margin: 12px auto 20px;
	border-radius: 50%; 
	font-size: 3.5rem;
	display: flex; 
	align-items: center; 
	justify-content: center;
	cursor: pointer; 
	user-select: none;
	box-shadow: 0 8px 0 rgba(0,0,0,0.4);
	transition: transform 0.1s;
	position: relative;
	overflow: hidden;
}
.click-zone:active { 
	transform: scale(0.78) translateY(6px); 
}
.click-label {
	position: absolute;
	bottom: -26px;
	font-size: 0.85rem;
	color: #aaa;
	font-weight: bold;
	padding-bottom: 4px;
}
.tabs {
	display: flex;
	gap: 12px;
}
.tab {
	padding: 12px 32px;
	font-size: 1.15rem;
	font-weight: bold;
	background: rgba(255,255,255,0.1);
	border: 3px solid #86efac;
	color: #86efac;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}
.tab.active {
	background: #86efac;
	color: #0f2b1f;
	border-color: #86efac;
	box-shadow: 0 0 15px #86efac;
}
.subtabs {
	display: flex;
	justify-content: center;
	max-width: 1280px;
	margin: 12px auto 20px;
	padding: 0 20px;
	gap: 12px;
	flex-wrap: wrap;
}
.subtab {
	padding: 10px 28px;
	font-size: 1.05rem;
	font-weight: bold;
	background: rgba(255,255,255,0.08);
	border: 3px solid #c4b5fd;
	color: #c4b5fd;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.2s;
}
.subtab.active {
	background: #c4b5fd;
	color: #0f2b1f;
	border-color: #c4b5fd;
	box-shadow: 0 0 12px #c4b5fd;
}
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
}
.sell-btn { 
	background: #166534; 
	border: 2px solid #4ade80; 
	color: white;
	padding: 8px 16px;
	border-radius: 9999px;
	font-weight: bold;
	font-size: 1rem;
}
.buy-btn { 
	background: #854d0e; 
	border: 2px solid #fcd34d; 
	color: white;
	padding: 8px 16px;
	border-radius: 9999px;
	font-weight: bold;
	font-size: 1rem;
}
.upgrade-btn { 
	background: #4c1d95; 
	border: 3px solid #c4b5fd; 
	color: white; 
	padding: 10px 18px; 
	border-radius: 9999px; 
	font-size: 0.95rem;
	font-weight: bold;
}
.upgrade-btn.grayed {
	opacity: 0.45;
	background: #334155 !important;
	border-color: #64748b !important;
	cursor: pointer;
}
.upgrade-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #334155;
}
.market-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(0,0,0,0.35);
	margin: 8px auto;
	padding: 12px 20px;
	border-radius: 12px;
	border: 3px solid;
	max-width: 680px;
	width: 100%;
	font-size: 1.05rem;
	position: relative;
}
.market-row.paused {
	opacity: 0.6;
	filter: grayscale(70%);
}
.market-row.paused .upgrade-btn {
	opacity: 0.4;
	pointer-events: none;
}
.agent-control {
	display: flex;
	align-items: center;
	gap: 8px;
}
.agent-control button {
	width: 42px;
	height: 42px;
	font-size: 1.4rem;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.item {
	background: rgba(255,255,255,0.15);
	border-radius: 12px;
	padding: 14px 20px;
	border: 3px solid #fcd34d;
	max-width: 680px;
	margin: 0 auto 20px;
	width: 100%;
}
button:active { transform: scale(0.88); }
button.success { animation: successPop 0.4s; }
@keyframes successPop { 
	0% { transform: scale(1); } 
	50% { transform: scale(1.12); } 
	100% { transform: scale(1); } 
}
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}
.fail {
	animation: shake 0.4s;
}
.button-error {
	position: fixed;
	background: #ef4444;
	color: white;
	font-size: 0.8rem;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 200;
	animation: floatError 1.8s forwards;
}
@keyframes floatError {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-60px); }
}
.upgrade-item, .building-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,0.1);
	margin: 12px auto;
	padding: 16px 20px;
	border-radius: 12px;
	max-width: 680px;
	border: 3px solid #c4b5fd;
}
.building-item.purchased {
	border-color: #64748b !important;
}
.building-item.not-affordable,
.upgrade-item.not-affordable {
	border-color: #ef4444 !important;
}
.fireworks {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}
.spark {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	animation: sparkAnim 3.2s forwards;
	box-shadow: 0 0 12px currentColor;
}
@keyframes sparkAnim {
	0% { transform: scale(1) translate(0, 0); opacity: 1; }
	100% { transform: scale(0.15) translate(var(--dx), var(--dy)); opacity: 0; }
}
.floating-prod {
	position: absolute;
	font-weight: bold;
	font-size: 1.8rem;
	pointer-events: none;
	animation: floatProd 1.1s forwards;
	text-shadow: 0 0 10px currentColor;
	z-index: 300;
	color: #86efac;
}
@keyframes floatProd {
	0% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-130px) scale(0.85); }
}
.modal {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.85);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}
.modal-content {
	background: #0f2b1f;
	border: 6px solid #86efac;
	border-radius: 16px;
	max-width: 720px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px;
	color: #fff;
	text-align: left;
}
.modal-content h2 {
	color: #fcd34d;
	margin-top: 0;
}
.tech-node {
	background: rgba(255,255,255,0.1);
	border: 3px solid #c026d3;
	border-radius: 12px;
	padding: 14px;
	margin: 8px;
	width: 260px;
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tech-node.purchased { 
	border-color: #64748b; 
	background: rgba(100,116,139,0.3); 
	color: #cbd5e1;
	cursor: default; 
	opacity: 0.85;
}
.tech-node.buyable { 
	border-color: #c026d3; 
	background: rgba(192,38,211,0.25); 
	box-shadow: 0 0 12px #c026d3;
}
.tech-node.missing { 
	border-color: #ef4444; 
	opacity: 0.75;
}
.tech-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1100px;
	margin: 0 auto;
}
.tech-divider {
	flex-basis: 100%;
	height: 0;
	margin: 28px 0 16px;
	border-top: 3px dashed #86efac;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #86efac;
	font-size: 1.1rem;
	font-weight: bold;
}
.tech-divider::before {
	content: '🔓 UNLOCKED';
	background: #0f2b1f;
	padding: 0 24px;
	position: absolute;
}

/* ACHIEVEMENT STYLES */
.achievement-item {
	background: rgba(255,255,255,0.1);
	border-radius: 16px;
	padding: 20px 16px;
	border: 4px solid #64748b;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	width: 100%;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 340px;
	box-sizing: border-box;
}
.achievement-item.locked {
	opacity: 0.65;
	filter: grayscale(85%);
	border-color: #64748b;
}
.achievement-item.unlockable {
	border-color: #fcd34d;
	box-shadow: 0 0 18px #fcd34d;
	animation: unlockPulse 2s infinite;
}
@keyframes unlockPulse {
	0%, 100% { box-shadow: 0 0 18px #fcd34d; }
	50% { box-shadow: 0 0 30px #fcd34d; }
}
.achievement-item.unlocked {
	border-color: #fcd34d;
	box-shadow: 0 0 22px #fcd34d;
}
.ach-image-container {
	position: relative;
	width: 157px;
	height: 214px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.achievement-image {
	width: 100%;
	height: 100%;
	border-radius: 12px;
	border: 3px solid #fcd34d;
	display: block;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	object-fit: contain;
}
.achievement-image-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: block;
}
.achievement-item.locked .achievement-image,
.achievement-item.unlockable .achievement-image {
	display: none;
}
.locked-placeholder {
	font-size: 110px;
	line-height: 1;
	opacity: 0.4;
	filter: grayscale(100%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.achievement-item.unlocked .locked-placeholder {
	display: none;
}
.achievement-item .desc {
	font-size: 0.95rem;
	line-height: 1.3;
	min-height: 60px;
	margin-bottom: 12px;
	color: #86efac;
}
.achievement-name {
	color: #fcd34d;
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 12px;
	display: block;
}

/* ACHIEVEMENT IMAGE MODAL - FOIL TIGHTLY LIMITED TO IMAGE SURFACE */
#achievement-image-modal .modal-content {
	background: transparent;
	border: none;
	padding: 20px;
	max-width: 95vw;
	max-height: 95vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
#modal-image-wrapper {
	position: relative;
	display: inline-block;
	cursor: pointer;
	overflow: hidden;
	border-radius: 20px;
}
#modal-image-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 42%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(255, 0, 255, 0.55) 40%,
		rgba(0, 255, 255, 0.55) 50%,
		rgba(255, 255, 0, 0.55) 60%,
		rgba(0, 255, 0, 0.55) 70%,
		transparent 80%
	);
	transform: skewX(-25deg);
	animation: rainbowFoilShine 1.65s linear 1;
	pointer-events: none;
	z-index: 2;
	opacity: 0.82;
	mix-blend-mode: screen;
}
@keyframes rainbowFoilShine {
	0%   { left: -100%; }
	100% { left: 200%; }
}
#modal-achievement-image {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 20px;
	border: 14px solid #fcd34d;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
	display: block;
}

@media (max-width: 768px) {
	body { padding: 8px 8px 8px 8px; }
	h1 { font-size: 1.7rem; }
	.currency-row { flex-direction: column; gap: 10px; }
	.resources-grid { 
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); 
		gap: 28px; 
		padding: 0 20px; 
	}
	.panel { width: 100%; max-width: none; }
	.tab-row, .subtabs { flex-wrap: wrap; gap: 8px; padding: 0 10px; }
	.tab, .subtab { padding: 10px 20px; font-size: 1rem; }
	.market-row { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
	.click-zone { width: 88px; height: 88px; font-size: 3rem; }
	.currency-box { font-size: 0.8rem; padding: 10px 18px; }
	.next-unlock { font-size: 1.1rem; }
	#sidebar { width: 100%; left: 0; transform: translateY(-100%); }
	#sidebar-toggle { top: 12px; left: 12px; font-size: 1.8rem; width: 42px; height: 42px; }
	.achievement-item { max-width: none; }
}
.market {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
#version-footer {
	position: fixed;
	bottom: 12px;
	right: 16px;
	font-size: 0.92rem;
	color: #86efac;
	opacity: 0.65;
	z-index: 100;
	font-family: 'Fredoka', sans-serif;
	pointer-events: none;
	text-shadow: 0 0 4px rgba(134, 239, 172, 0.3);
}
#save-load-link {
	position: fixed;
	bottom: 12px;
	font-size: 0.92rem;
	color: #86efac;
	opacity: 0.85;
	z-index: 100;
	font-family: 'Fredoka', sans-serif;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 12px 4px 12px;
	border-radius: 9999px;
	background: rgba(15,43,31,0.95);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#help-link {
	position: fixed;
	bottom: 12px;
	font-size: 0.92rem;
	color: #86efac;
	opacity: 0.85;
	z-index: 100;
	font-family: 'Fredoka', sans-serif;
	text-decoration: none;
	cursor: pointer;
	padding: 4px 12px 4px 12px;
	border-radius: 9999px;
	background: rgba(15,43,31,0.95);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#keyboard-hints {
	position: fixed;
	bottom: 12px;
	left: 800px;
	font-size: 0.92rem;
	color: #86efac;
	opacity: 0.85;
	z-index: 100;
	font-family: 'Fredoka', sans-serif;
	pointer-events: none;
	white-space: nowrap;
	background: rgba(15,43,31,0.95);
	padding: 4px 12px;
	border-radius: 9999px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* SIDEBAR */
.sidebar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 410px;
	background: rgba(15, 43, 31, 0.97);
	border-right: 6px solid #86efac;
	z-index: 2000;
	overflow-y: auto;
	padding: 18px 14px 80px;
	box-shadow: 4px 0 20px rgba(0,0,0,0.5);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}
.sidebar.collapsed {
	transform: translateX(-385px);
}
.sidebar-toggle {
	position: absolute;
	top: 22px;
	left: 14px;
	background: #86efac;
	color: #0f2b1f;
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 4px 4px 12px rgba(0,0,0,0.5);
	z-index: 2100;
	transition: transform 0.2s;
}
.sidebar.collapsed .sidebar-toggle {
	transform: translateX(385px);
}
.sidebar-header {
	font-family: 'Press Start 2P', cursive;
	font-size: 1.15rem;
	color: #86efac;
	text-align: center;
	margin-bottom: 4px;
	letter-spacing: 1px;
	padding-left: 55px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
}
.sidebar-header .header-emoji {
	font-size: 1.45rem;
}
.sidebar-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sidebar-entry {
	display: flex;
	flex-direction: column;
}
.sidebar-item {
	background: rgba(255,255,255,0.09);
	border-radius: 10px;
	padding: 8px 40px 8px 40px;
	border-left: 5px solid;
	font-size: 0.93rem;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.15s ease;
	user-select: none;
}
.sidebar-item span.emoji { font-size: 1.35rem; }
.sidebar-item span.name { flex: 1; text-align: left; font-weight: 600; }
.sidebar-item span.storage { font-size: 0.95rem; color: #ddd; font-weight: 500; }
.sidebar-item span.rate { 
	font-size: 0.9rem; 
	font-weight: 600; 
	min-width: 62px; 
	text-align: right;
}
.sidebar-breakdown {
	font-size: 0.82rem;
	line-height: 1.3;
	color: #86efac;
	background: rgba(134,239,172,0.1);
	border-radius: 8px;
	padding: 8px 40px;
	margin: 4px 8px 10px 8px;
	white-space: pre-wrap;
	display: none;
	pointer-events: none;
}
.tab-summary {
	background: rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 12px 20px;
	margin-bottom: 16px;
	font-size: 1.05rem;
	text-align: center;
	color: #86efac;
}
.unlock-now-btn {
	background: linear-gradient(135deg, #fcd34d, #f59e0b);
	color: #0f2b1f;
	border: 4px solid #854d0e;
	padding: 10px 18px;
	font-size: 0.95rem;
	font-weight: bold;
	border-radius: 9999px;
	cursor: pointer;
	box-shadow: 0 6px 0 #854d0e;
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
	width: 100%;
	margin-top: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.unlock-now-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 0 #854d0e;
}
.unlock-now-btn:active {
	transform: scale(0.95) translateY(3px);
	box-shadow: 0 2px 0 #854d0e;
}

/* LOOT BUTTON & MODAL STYLES */
.loot-tab {
	background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
	color: #000000 !important;
	border: 4px solid #854d0e !important;
	box-shadow: 0 0 20px #fcd34d !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
}
.loot-tab .loot-emoji {
	color: #ffffff !important;
	font-size: 1.35rem;
}
.loot-modal-content {
	background: linear-gradient(135deg, #0f2b1f, #2c1b0f);
	border: 8px solid #fcd34d;
	box-shadow: 0 0 40px #fcd34d;
	max-width: 680px;
	text-align: center;
}

/* FOOD SHORTAGE VISUAL */
.currency-box.critical {
	animation: criticalPulse 1.2s infinite;
	border-color: #ef4444 !important;
}
@keyframes criticalPulse {
	0%, 100% { box-shadow: 0 0 12px #ef4444; }
	50% { box-shadow: 0 0 24px #ef4444; }
}
@keyframes producerUnlock {
	0%   { opacity: 0; transform: translateY(-40px) scale(0.8); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0); }
	15%  { opacity: 0; transform: translateY(-30px) scale(0.85); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0); }
	35%  { opacity: 0.4; transform: translateY(-12px) scale(0.92); box-shadow: 0 0 30px 8px rgba(252, 211, 77, 0.9); }
	55%  { opacity: 0.8; transform: translateY(-2px) scale(0.98); box-shadow: 0 0 40px 12px rgba(252, 211, 77, 0.7); }
	70%  { opacity: 1; transform: translateY(8px) scale(1.06); box-shadow: 0 0 50px 16px rgba(252, 211, 77, 0.5); }
	82%  { opacity: 1; transform: translateY(-4px) scale(0.97); box-shadow: 0 0 35px 10px rgba(252, 211, 77, 0.3); }
	92%  { opacity: 1; transform: translateY(2px) scale(1.01); box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.15); }
	100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(252, 211, 77, 0); }
}
.producer-unlock {
	animation: producerUnlock 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.producers-list-disabled {
	pointer-events: none;
	opacity: 0.7;
}