@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=IM+Fell+English:ital@0;1&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blood:    #8B0000;
  --gold:     #C8A84B;
  --gold-lt:  #F0D080;
  --dark:     #0A0A0A;
  --panel:    #1A1208;
  --panel-b:  #2A1E0A;
  --text:     #C8A84B;
  --grey:     #4A3A2A;
  --blue:     #1A3A8B;
  --blue-lt:  #4A7ADB;
}

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23C8A84B' stroke='%238B0000' stroke-width='1.5'/%3E%3Cline x1='10' y1='0' x2='10' y2='6' stroke='%23C8A84B' stroke-width='1.5'/%3E%3Cline x1='10' y1='14' x2='10' y2='20' stroke='%23C8A84B' stroke-width='1.5'/%3E%3Cline x1='0' y1='10' x2='6' y2='10' stroke='%23C8A84B' stroke-width='1.5'/%3E%3Cline x1='14' y1='10' x2='20' y2='10' stroke='%23C8A84B' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, crosshair;
}

/* ===== BOOT SCREEN ===== */
#boot-screen {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, #1A0A00 0%, #000 70%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}

#boot-content { text-align: center; }

.logo-skull {
  font-size: 80px;
  animation: skullPulse 2s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 0 20px #8B0000);
}

@keyframes skullPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px #8B0000); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 40px #FF2200); }
}

#boot-content h1 {
  font-family: 'IM Fell English', serif;
  font-size: 52px;
  color: var(--gold);
  text-shadow: 0 0 30px #8B0000, 0 2px 0 #000;
  letter-spacing: 6px;
  margin: 10px 0 6px;
}

.logo-sub {
  color: var(--grey);
  letter-spacing: 4px;
  font-size: 12px;
  font-family: monospace;
  margin-bottom: 40px;
}

#boot-bar-wrap {
  width: 340px; height: 8px;
  background: #1A1208;
  border: 1px solid #3A2A0A;
  margin: 0 auto 14px;
  position: relative;
  box-shadow: inset 0 0 8px #000;
}

#boot-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8B0000, #C8A84B);
  box-shadow: 0 0 12px #FF4400;
  transition: width 0.1s linear;
}

#boot-text {
  color: var(--grey);
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 2px;
}

#click-to-start {
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  letter-spacing: 3px;
  animation: blink 1.2s ease-in-out infinite;
  margin-top: 30px;
  cursor: pointer;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ===== GAME CONTAINER ===== */
#game-container {
  position: fixed; inset: 0;
  background: #000;
}

#gameCanvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ===== HUD ===== */
#hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(to top, #0D0905 60%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 10px 8px;
  pointer-events: none;
  z-index: 100;
}

.orb-wrap {
  position: relative;
  width: 100px;
  pointer-events: all;
}

.orb-wrap canvas {
  display: block;
  filter: drop-shadow(0 0 8px #8B0000);
  cursor: default;
}

#mana-orb-wrap canvas { filter: drop-shadow(0 0 8px #001A8B); }

.orb-wrap span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000;
  pointer-events: none;
}

.orb-wrap label {
  display: block;
  text-align: center;
  color: var(--grey);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 2px;
}

#hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
}

#skill-bar {
  display: flex;
  gap: 4px;
}

.skill-slot {
  width: 52px; height: 52px;
  background: #1A1208;
  border: 2px solid #3A2A0A;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}

.skill-slot:hover, .skill-slot.active {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(200,168,75,0.4);
}

.skill-slot .skill-icon { font-size: 22px; line-height: 1; }
.skill-slot .skill-key {
  position: absolute;
  bottom: 2px; right: 3px;
  font-size: 8px;
  color: var(--grey);
  font-family: monospace;
}

.skill-slot.cooldown::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  animation: cooldownSweep 1s linear forwards;
}

@keyframes cooldownSweep {
  from { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0 100%, 0 0%, 50% 0%); }
  to { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
}

#xp-bar-wrap {
  width: 240px; height: 6px;
  background: #1A1208;
  border: 1px solid #3A2A0A;
}

#xp-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4A2A8B, #8A5ADB);
  transition: width 0.4s ease;
}

#level-display {
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  letter-spacing: 2px;
}

/* ===== MINIMAP ===== */
#minimap-wrap {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 100;
  pointer-events: none;
}

#minimap {
  display: block;
  border: 1px solid var(--grey);
  background: rgba(0,0,0,0.7);
  image-rendering: pixelated;
}

#minimap-wrap label {
  display: block;
  text-align: center;
  color: var(--grey);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 3px;
}

/* ===== INVENTORY ===== */
#inventory {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  background: #0D0905;
  border: 2px solid var(--grey);
  box-shadow: 0 0 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(0,0,0,0.5);
  z-index: 200;
  padding: 0 0 16px;
}

#inv-header {
  background: linear-gradient(90deg, #1A1208, #2A1E0A, #1A1208);
  padding: 10px 16px;
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  letter-spacing: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--grey);
}

#inv-close {
  cursor: pointer;
  color: var(--grey);
  transition: color 0.2s;
}
#inv-close:hover { color: var(--blood); }

#inv-stats {
  padding: 12px 16px;
  border-bottom: 1px solid #2A1E0A;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 14px;
  padding: 2px 8px;
}

.stat-row span:last-child { color: var(--gold-lt); }

#inv-grid {
  display: grid;
  grid-template-columns: repeat(10, 36px);
  grid-template-rows: repeat(4, 36px);
  gap: 2px;
  padding: 12px 16px;
  margin: 0 auto;
  width: fit-content;
}

.inv-cell {
  width: 36px; height: 36px;
  background: #0A0805;
  border: 1px solid #2A1E0A;
  position: relative;
  cursor: pointer;
}

.inv-cell:hover { border-color: var(--grey); }

.inv-item {
  position: absolute; inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: radial-gradient(circle, rgba(200,168,75,0.1), transparent);
}

#inv-equipment {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 6px;
  padding: 0 16px;
  justify-content: center;
}

.equip-slot {
  height: 70px;
  background: #0A0805;
  border: 1px solid #3A2A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.equip-slot:hover { border-color: var(--gold); }
.equip-slot.has-item { border-color: var(--grey); color: var(--gold); font-size: 26px; }

/* ===== TOOLTIP ===== */
#tooltip {
  position: fixed;
  background: #0D0905;
  border: 1px solid var(--grey);
  padding: 10px 14px;
  min-width: 160px;
  max-width: 240px;
  pointer-events: none;
  z-index: 300;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.tip-name {
  color: var(--gold);
  font-family: 'IM Fell English', serif;
  font-size: 15px;
  border-bottom: 1px solid #3A2A0A;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.tip-type {
  color: var(--grey);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.tip-stat {
  color: #8ACC88;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  line-height: 1.6;
}

.tip-flavor {
  color: #6A5A4A;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 11px;
  margin-top: 6px;
  border-top: 1px solid #2A1E0A;
  padding-top: 6px;
}

.tip-rare { color: #FFFF44; }
.tip-magic { color: #8888FF; }
.tip-unique { color: #FF8800; }

/* ===== DAMAGE FLOATERS ===== */
#floaters {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 150;
}

.floater {
  position: absolute;
  font-family: 'IM Fell English', serif;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
}

.floater.dmg-phys { color: #FF4444; }
.floater.dmg-fire { color: #FF8800; }
.floater.dmg-elec { color: #FFFF44; }
.floater.dmg-cold { color: #88CCFF; }
.floater.dmg-crit { color: #FF0000; font-size: 26px; }
.floater.dmg-heal { color: #44FF44; }
.floater.dmg-xp   { color: #8888FF; font-size: 13px; }

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  20%  { transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ===== KILL FEED ===== */
#kill-feed {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 100;
  pointer-events: none;
}

.kill-msg {
  color: var(--grey);
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  animation: fadeKill 3s ease-out forwards;
  padding: 1px 0;
}

.kill-msg .em { color: var(--gold); }

@keyframes fadeKill {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== HOTKEYS ===== */
#hotkeys {
  position: fixed;
  bottom: 118px; right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
  z-index: 100;
}

#hotkeys span {
  color: #3A2A1A;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1px;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0D0905; }
::-webkit-scrollbar-thumb { background: var(--grey); }