/* Base styles + shared utility classes */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a14;
    color: #d4d0c8;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #4a4538; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b6352; }

/* --- Canvas --- */
#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Loading --- */
#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #0a0a14;
    z-index: 1000;
}

#loading h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #c4a35a;
    text-shadow: 0 0 30px rgba(196, 163, 90, 0.25);
    letter-spacing: 3px;
}

/* --- Game UI container --- */
#game-ui {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

#game-ui > * {
    pointer-events: auto;
}

/* Overlays that pass clicks through to the canvas behind them. */
#game-ui > #mob-nameplates,
#game-ui > #boss-bar,
#game-ui > #damage-numbers {
    pointer-events: none;
}

/* --- Rarity colors --- */
.rarity-common    { color: #9d9d9d; }
.rarity-uncommon  { color: #1eff00; }
.rarity-rare      { color: #0070ff; }
.rarity-epic      { color: #a335ee; }
.rarity-legendary { color: #ff8000; }

.rarity-border-common    { border-color: #5a5a5a; }
.rarity-border-uncommon  { border-color: #1eff00; }
.rarity-border-rare      { border-color: #0070ff; }
.rarity-border-epic      { border-color: #a335ee; }
.rarity-border-legendary { border-color: #ff8000; }

.rarity-bg-common    { background: rgba(157,157,157,0.08); }
.rarity-bg-uncommon  { background: rgba(30,255,0,0.06); }
.rarity-bg-rare      { background: rgba(0,112,255,0.06); }
.rarity-bg-epic      { background: rgba(163,53,238,0.06); }
.rarity-bg-legendary { background: rgba(255,128,0,0.08); }

/* --- Rarity chip (reusable badge) --- */
.rarity-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    vertical-align: middle;
}
.rarity-chip.rarity-common    { color: #b0b0b0; border-color: #5a5a5a; background: rgba(157,157,157,0.12); }
.rarity-chip.rarity-uncommon  { color: #4eff4e; border-color: #1e9e1e; background: rgba(30,255,0,0.10); }
.rarity-chip.rarity-rare      { color: #5aa0ff; border-color: #0070ff; background: rgba(0,112,255,0.12); text-shadow: 0 0 6px rgba(0,112,255,0.4); }
.rarity-chip.rarity-epic      { color: #c77dff; border-color: #a335ee; background: rgba(163,53,238,0.14); text-shadow: 0 0 8px rgba(163,53,238,0.5); }
.rarity-chip.rarity-legendary { color: #ffb347; border-color: #ff8000; background: rgba(255,128,0,0.14); text-shadow: 0 0 10px rgba(255,128,0,0.55); }

/* --- Element colors --- */
.element-physical  { color: #c8c0b0; }
.element-fire      { color: #ff6b35; }
.element-ice       { color: #5bc0eb; }
.element-lightning { color: #fde74c; }
.element-holy      { color: #fff3b0; }
.element-shadow    { color: #c77dff; }

/* --- Damage numbers --- */
.dmg-number {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.8), 1px 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 15;
}

.dmg-number.skill-dmg { font-size: 24px; }
.dmg-number.crit-dmg {
    font-size: 26px;
    font-style: italic;
}
.dmg-number.dodge-dmg {
    font-size: 16px;
    color: #aaa !important;
    font-style: italic;
}

.dmg-number.dmg-physical  { color: #e0e0e0; }
.dmg-number.dmg-heal      { color: #1eff00; text-shadow: 0 0 6px rgba(30,255,0,0.5), 1px 1px 2px rgba(0,0,0,0.6); }
.dmg-number.dmg-fire      { color: #ff6b35; text-shadow: 0 0 6px rgba(255,80,0,0.6), 1px 1px 2px rgba(0,0,0,0.6); }
.dmg-number.dmg-ice       { color: #5bc0eb; text-shadow: 0 0 6px rgba(91,192,235,0.6), 1px 1px 2px rgba(0,0,0,0.6); }
.dmg-number.dmg-lightning  { color: #fde74c; text-shadow: 0 0 6px rgba(253,231,76,0.6), 1px 1px 2px rgba(0,0,0,0.6); }
.dmg-number.dmg-holy      { color: #fff3b0; text-shadow: 0 0 8px rgba(255,243,176,0.7), 1px 1px 2px rgba(0,0,0,0.4); }
.dmg-number.dmg-shadow    { color: #c77dff; text-shadow: 0 0 6px rgba(155,89,182,0.6), 1px 1px 2px rgba(0,0,0,0.6); }
.dmg-number.hero-dmg { font-size: 20px; }

@keyframes dmg-float {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
    50%  { opacity: 1; transform: translate(-50%, -50%) translateY(-30px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-60px) scale(0.8); }
}

@keyframes dmg-float-crit {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1.3); }
    30%  { opacity: 1; transform: translate(-50%, -50%) translateY(-20px) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-70px) scale(0.9); }
}

.gold-drop-number {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5), 1px 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
    animation: gold-fall 1.2s ease-in forwards;
    z-index: 14;
}

@keyframes gold-fall {
    0%   { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1.1); }
    30%  { opacity: 1; transform: translate(-50%, -50%) translateY(10px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(80px) scale(0.7); }
}