@font-face {
	font-family: 'Unifont';
	src: url('assets/unifont-17.0.04.otf') format('opentype');
}

/* Base Styles & CSS Variables */
:root {
	--bg-color: #08000a;
	--text-color: #c8c8c8;
	--panel-bg: #110014;
	--border-color: #4a0005;
	--accent-color: #7a0010;
	--health-color: #990000;
	--grid-size: 40px; /* Size of one tile */
	--transition-speed: 0.2s;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	user-select: none;
	text-rendering: crispEdges;
	font-smooth: never;
	-webkit-font-smoothing: none;
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	font-family: 'Unifont', monospace;
	font-size: 16px;
	overflow: hidden; /* Prevent scrolling */
	display: flex;
	height: 100vh;
	width: 100vw;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-track {
	background: #08000a;
	border-left: 1px solid #4a0005;
}
::-webkit-scrollbar-thumb {
	background: #330005;
	border-radius: 4px;
	border: 1px solid #4a0005;
}
::-webkit-scrollbar-thumb:hover {
	background: #7a0010;
}

/* Layout Structure */
#game-container {
	display: flex;
	width: 100%;
	height: 100%;
}

/* Sidebar (Stats, Inventory, Equipment) */
#sidebar {
	width: 250px;
	background-color: var(--panel-bg);
	border-left: 2px solid var(--border-color);
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	z-index: 10;
}

.panel-section {
	background: rgba(0,0,0,0.6);
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--border-color);
}

.panel-section h3 {
	margin-bottom: 4px;
	color: var(--accent-color);
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 2px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Stats Display */
.stat-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2px;
	font-size: 16px;
	color: #aaa;
}

.health-bar-container {
	width: 100%;
	height: 10px;
	background: #1a0000;
	border-radius: 2px;
	overflow: hidden;
	margin-top: 4px;
	border: 1px solid #330000;
}

.health-bar-fill {
	height: 100%;
	background: var(--health-color);
	width: 100%;
	transition: width var(--transition-speed);
}

/* Equipment Slots */
.equipment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.equip-slot {
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid #330005;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: #0d0010;
	cursor: pointer;
	box-shadow: inset 0 0 10px #000;
}

.equip-slot::after {
	content: attr(data-type);
	position: absolute;
	bottom: 2px;
	font-size: 8px;
	color: #555;
	text-transform: uppercase;
}

.item-icon {
	width: 75%;
	height: 75%;
	pointer-events: none; /* Let clicks pass through to slot */
}

/* Inventory */
.inventory-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}

.inv-slot {
	width: 100%;
	aspect-ratio: 1;
	background: #0d0010;
	border: 1px solid #330005;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	box-shadow: inset 0 0 10px #000;
}

.inv-slot:hover {
	border-color: var(--accent-color);
	background: #1a001a;
}

/* Main Game Area */
#main-area {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Top Bar */
#top-bar {
	height: 35px;
	background: var(--panel-bg);
	border-bottom: 2px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	z-index: 10;
	font-size: 16px;
	color: #aaa;
}

/* Game Board (The Grid) */
#board-wrapper {
	flex-grow: 1;
	position: relative;
	overflow: hidden;
	background: #050005;
}

#game-board {
	position: absolute;
	/* Will be scaled and translated via JS for camera tracking */
	transform-origin: 0 0;
	transition: transform 0.04s linear;
	cursor: crosshair;
}

/* Grid Background Pattern */
.grid-bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: var(--grid-size) var(--grid-size);
	background-image: 
		linear-gradient(to right, #110014 1px, transparent 1px),
		linear-gradient(to bottom, #110014 1px, transparent 1px);
	opacity: 0.3;
	pointer-events: none;
}

/* Entities (Player, Monsters, Items) */
.entity {
	position: absolute;
	width: var(--grid-size);
	height: var(--grid-size);
	/* Updated transition to feel smoother with auto-moving */
	transition: left 0.12s linear, top 0.12s linear;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2; /* Default entity layer */
}

.player { z-index: 5; } /* Player always on top of entities */

.path-step {
	position: absolute;
	width: var(--grid-size);
	height: var(--grid-size);
	pointer-events: none;
	z-index: 3; /* Above ground, below entities */
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-drop { z-index: 1; cursor: pointer; } /* Items below entities */
.wall { 
	background: #1e1e24; 
	z-index: 0; 
}

/* Floating Damage Text */
.floating-text {
	position: absolute;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px 2px black;
	pointer-events: none;
	z-index: 20;
	animation: floatUp 1s ease-out forwards;
}

.dmg-player { color: var(--health-color); }
.dmg-monster { color: yellow; }
.heal-text { color: #2ecc71; }

@keyframes floatUp {
	0% { transform: translateY(0) scale(1); opacity: 1; }
	100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

/* Log / Messages */
#message-log {
	height: 100px;
	background: rgba(5,0,10,0.95);
	border-top: 2px solid var(--border-color);
	padding: 5px 10px;
	overflow-y: auto;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	z-index: 15;
	flex-shrink: 0;
}

.log-entry { margin-bottom: 2px; }
.log-system { color: #88ccff; }
.log-combat { color: #ff8888; }
.log-loot { color: #88ff88; }

/* UI Overlay (Game Over / Victory) */
#overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.9);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

#overlay h1 { font-size: 32px; margin-bottom: 10px; color: var(--health-color); }
#overlay button {
	padding: 8px 16px;
	font-size: 16px;
	background: var(--accent-color);
	color: white;
	border: 1px solid var(--border-color);
	border-radius: 3px;
	cursor: pointer;
}
#overlay button:hover { background: #990000; }

/* Tooltip */
#tooltip {
	position: absolute;
	background: rgba(15, 0, 20, 0.95);
	border: 1px solid var(--accent-color);
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 16px;
	pointer-events: none; /* Prevents tooltip from blocking mouse events */
	z-index: 1000;
	display: none;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.8);
	max-width: 250px;
}

/* Tile Highlight */
.tile-highlight {
	position: absolute;
	width: var(--grid-size);
	height: var(--grid-size);
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	pointer-events: none;
	z-index: 10;
	display: none;
}

/* Hit & Damage Animations */
.damage-blink {
	animation: blinkWhite 0.15s ease-out;
}

@keyframes blinkWhite {
	0% { filter: brightness(1); }
	50% { filter: brightness(0) invert(1) drop-shadow(0 0 8px white); }
	100% { filter: brightness(1); }
}

/* Chat Balloon */
.chat-balloon {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.95);
	color: #000;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	pointer-events: none;
	z-index: 30;
	box-shadow: 0 2px 5px rgba(0,0,0,0.8);
	animation: popAndFade 2.5s ease-in forwards;
	margin-bottom: 5px; /* Spacing above the entity */
}

.chat-balloon::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
}

@keyframes popAndFade {
	0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
	10% { opacity: 1; transform: translateX(-50%) scale(1.1); }
	20% { opacity: 1; transform: translateX(-50%) scale(1); }
	80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(0.9); }
}