/* Game Styles - Spatha FPS */

/* ========== TILE BORDER SYSTEM ========== */
/* 9-slice border using tileset sprite (responsive) */
.tile-border {
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    background-clip: padding-box;
}

/* ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body {
    font-family: 'Jacquard 12', serif;
    background: #000;
    color: #fff;
    overflow: hidden;
    cursor: none;
}

#game-container {
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* Crosshair */
#crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(2.5vh);
    height: calc(2.5vh);
    pointer-events: none;
    z-index: 100;
}

#crosshair::before,
#crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
}

#crosshair::before {
    width: calc(0.25vh);
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#crosshair::after {
    width: 100%;
    height: calc(0.25vh);
    top: 50%;
    transform: translateY(-50%);
}

/* HUD */
#hud {
    position: absolute;
    bottom: calc(2.5vh);
    left: calc(2.5vh);
    right: calc(2.5vh);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
    z-index: 100;
}

/* Stats Panel (Health, Mana) - Esquina superior izquierda */
.stats-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 25vw;     /* 1/4 de la pantalla horizontal */
    height: 14.28vh; /* 1/7 de la pantalla vertical */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.5vh);
    padding: calc(1.4vh) calc(2vh);
    z-index: 100;
}

.stat-row {
    display: flex;
    align-items: center;
    height: 23%;  /* Reducido 1/3 (de 35% a ~23%) */
    max-height: calc(2.8vh);
    gap: calc(1vh);  /* Gap entre label y barra */
}

.stat-label {
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(14.28vh * 0.35 * 0.5);
    line-height: 1;
    color: #fff;
    letter-spacing: 0.15em;
    min-width: 4vh;
    text-align: left;
}

.stat-bar {
    flex: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
}

.stat-bar-ghost {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    transition: width 1s ease 0.3s;  /* 1s duration, 0.3s delay */
}

.stat-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: width 0.1s ease;
}

.stat-bar.health .stat-bar-fill {
    background: #cf1259;
}

.stat-bar.mana .stat-bar-fill {
    background: #00afb5;
}

/* Stats panel shake animation */
.stats-panel.shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(calc(-0.7vh), calc(-0.3vh)); }
    20% { transform: translate(calc(0.7vh), calc(0.15vh)); }
    30% { transform: translate(calc(-0.55vh), calc(0.3vh)); }
    40% { transform: translate(calc(0.55vh), calc(-0.15vh)); }
    50% { transform: translate(calc(-0.4vh), calc(0.3vh)); }
    60% { transform: translate(calc(0.4vh), calc(-0.3vh)); }
    70% { transform: translate(calc(-0.55vh), calc(0.15vh)); }
    80% { transform: translate(calc(0.55vh), calc(-0.15vh)); }
    90% { transform: translate(calc(-0.3vh), calc(0.15vh)); }
}

/* Stamina Panel (Risk Indicator) */
/* slot total = 6.4vh content + 4.8vh borders = 11.2vh */
.stamina-panel {
    position: fixed;
    bottom: calc(2.5vh + 11.2vh + 1vh);  /* Encima del hotbar */
    left: 50%;
    transform: translateX(-50%);
    width: calc(11.2vh * 3 + 1vh * 2);  /* Ancho igual al hotbar (3 slots + 2 gaps) */
    height: calc(0.8vh);
    z-index: 100;
}

.stamina-bar {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
}

.stamina-bar-ghost {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(128, 128, 128, 0.6);  /* Ghost gris */
    transition: width 0.8s ease 0.2s;  /* Delay para efecto visual */
}

.stamina-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ffffff;  /* Barra blanca */
    transition: width 0.15s ease;
}

/* Weapon Panel */
.weapon-panel {
    position: fixed;
    bottom: calc(2.5vh);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(1vh);
    align-items: center;
    z-index: 100;
}

.weapon-slot {
    width: 6.4vh;
    height: 6.4vh;
    box-sizing: content-box;
    background: rgba(0, 0, 0, 0.5);
    border: 2.4vh solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    overflow: visible;
}

.weapon-slot.active {
    opacity: 1;
}

.weapon-panel .weapon-slot img,
.weapon-panel .weapon-slot .item-sprite {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    image-rendering: pixelated !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.weapon-slot .key-hint {
    position: absolute;
    top: calc(0.5vh);
    left: calc(0.8vh);
    font-family: 'Micro 5', sans-serif;
    font-size: calc(14.28vh * 0.18);
    color: rgba(255, 255, 255, 0.6);
}

.weapon-slot .ammo {
    position: absolute;
    bottom: calc(0.5vh);
    right: calc(0.8vh);
    font-family: 'Micro 5', sans-serif;
    font-size: calc(14.28vh * 0.15);
    font-weight: bold;
}

.weapon-slot .cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
}

.weapon-slot.on-cooldown .cooldown-overlay {
    display: block;
}

.weapon-slot .item-durability {
    position: absolute;
    bottom: 0.5vh;
    left: 0.5vh;
    right: 0.5vh;
    width: auto;
    height: 0.5vh;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.weapon-slot .durability-fill {
    height: 100%;
    transition: width 0.2s ease;
}

.weapon-slot .item-count {
    position: absolute;
    bottom: 0.4vh;
    right: 0.6vh;
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: 1.6vh;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

/* Info Panel (Level, Mobs) */
.info-panel {
    text-align: right;
    font-size: calc(2vh);
}

.info-panel .level-info {
    font-size: calc(2.5vh);
    font-weight: bold;
    margin-bottom: calc(0.7vh);
}

.info-panel .mob-count {
    color: #ff4444;
}

/* Damage Flash */
#damage-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 50;
}

#damage-flash.active {
    opacity: 1;
}

/* Interaction Prompts (Portal, Trapdoor, etc.) */
/* Posicionados encima de la stamina, del tamaño del hotbar */
#portal-prompt,
#trapdoor-prompt {
    position: absolute;
    bottom: calc(2.5vh + 11.2vh + 1vh + 0.8vh + 1vh);  /* Encima de stamina con gap */
    left: 50%;
    transform: translateX(-50%);
    width: calc(11.2vh * 3 + 1vh * 2);  /* Ancho igual al hotbar */
    background: rgba(20, 20, 20, 0.9);
    padding: calc(0.8vh) calc(1vh);
    border: calc(1.5vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(1.6vh);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
    color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
}

#portal-prompt.visible,
#trapdoor-prompt.visible {
    opacity: 1;
}

#portal-prompt .key,
#trapdoor-prompt .key {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    border: calc(0.2vh) solid rgba(255, 255, 255, 0.4);
    padding: calc(0.3vh) calc(0.8vh);
    margin: 0 calc(0.4vh);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
}

/* Loading Screen */
#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 200;
    transition: opacity 0.5s ease;
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

#loading-screen h1 {
    font-size: calc(6.5vh);
    margin-bottom: calc(4vh);
    color: #fff;
    font-weight: normal;
}

.loading-bar {
    width: calc(40vh);
    height: calc(2.8vh);
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.loading-bar-fill {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width 0.3s ease;
}

#loading-text {
    margin-top: calc(2vh);
    font-family: 'Micro 5', sans-serif;
    font-size: calc(2.2vh);
    color: #888;
}

/* Start Screen */
#start-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 150;
    cursor: default;
}

#start-screen.hidden {
    display: none;
}

#start-screen h1 {
    font-size: calc(10vh);
    margin-bottom: calc(5.5vh);
    color: #fff;
    font-weight: normal;
}

#start-screen .start-btn {
    padding: calc(2vh) calc(7vh);
    font-size: calc(3.3vh);
    background: rgba(0, 0, 0, 0.5);
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    color: #fff;
    cursor: pointer;
    font-family: 'Jacquarda Bastarda 9', serif;
}

#start-screen .start-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Death Screen */
#death-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 150;
    cursor: default;
}

#death-screen.hidden {
    display: none;
}

#death-screen .death-subtitle {
    font-size: calc(3.3vh);
    color: #666;
    margin-bottom: calc(1.4vh);
}

#death-screen h1 {
    font-size: calc(13vh);
    color: #aa0000;
    margin-bottom: calc(5.5vh);
    font-weight: normal;
}

#death-screen .retry-btn {
    padding: calc(2vh) calc(7vh);
    font-size: calc(3.3vh);
    background: rgba(0, 0, 0, 0.5);
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    color: #888;
    cursor: pointer;
    font-family: 'Jacquarda Bastarda 9', serif;
}

#death-screen .retry-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
}

/* Win Screen */
#win-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 150;
    cursor: default;
}

#win-screen.hidden {
    display: none;
}

#win-screen h1 {
    font-size: calc(10vh);
    color: #888;
    margin-bottom: calc(2.8vh);
    font-weight: normal;
}

/* Pause Menu */
#pause-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

#pause-menu.visible {
    display: flex;
    cursor: default;
}

.pause-menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4vh);
    padding: calc(5.5vh) calc(8vh);
    background: rgba(20, 20, 20, 0.95);
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
}

.pause-title {
    font-family: 'Jacquard 12', serif;
    font-size: calc(6.5vh);
    color: #fff;
    margin: 0;
    font-weight: normal;
}

.pause-buttons {
    display: flex;
    flex-direction: column;
    gap: calc(1.7vh);
    width: 100%;
}

.pause-btn {
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(2.8vh);
    padding: calc(1.7vh) calc(5.5vh);
    background: rgba(0, 0, 0, 0.5);
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.pause-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.pause-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

/* Minimap */
#minimap {
    position: absolute;
    top: calc(2.5vh);
    right: calc(2.5vh);
    width: calc(20vh);
    height: calc(20vh);
    background: rgba(0, 0, 0, 0.5);
    border: calc(4vh) solid transparent;
    border-image: url('../Textures/GUI/border_tileset.png') 16 fill repeat;
    overflow: hidden;
    z-index: 100;
}

#minimap canvas {
    width: 100%;
    height: 100%;
}

/* Progress Panel (XP, Level) - Debajo del stats panel */
.progress-row {
    display: flex;
    align-items: center;
    height: 23%;
    max-height: calc(2.8vh);
    gap: calc(0.8vh);
}

.progress-label {
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(14.28vh * 0.35 * 0.45);
    line-height: 1;
    color: #fff;
    letter-spacing: 0.12em;
    min-width: 4vh;
}

.progress-value {
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(14.28vh * 0.35 * 0.45);
    line-height: 1;
    color: #fff;
    letter-spacing: 0.12em;
}

.progress-value .xp-current {
    color: #fff;
}

.progress-value .xp-separator {
    color: #fff;
    margin: 0 calc(0.3vh);
}

.progress-value .xp-limit {
    color: #00ddff;
}

/* Active Effects Panel - Centrado en pantalla */
.effects-panel {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 16.66vh;  /* 1/6 de la pantalla */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(1vh);
    z-index: 100;
    pointer-events: none;
}

.effect-icon {
    width: calc(16.66vh * 0.6);  /* 60% de la altura del panel */
    height: calc(16.66vh * 0.6);
    position: relative;
}

.effect-icon img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(0 0 calc(0.4vh) rgba(0, 0, 0, 0.8));
}

.effect-icon .effect-timer {
    position: absolute;
    bottom: calc(-0.3vh);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Micro 5', sans-serif;
    font-size: calc(16.66vh * 0.15);
    color: #fff;
    text-shadow: calc(0.15vh) calc(0.15vh) calc(0.3vh) rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

/* Animación de parpadeo cuando el efecto está por expirar */
.effect-icon.expiring img {
    animation: effectExpiring 0.5s ease-in-out infinite;
}

@keyframes effectExpiring {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Efectos pasivos (de anillos equipados) - borde dorado */
.effect-icon.passive-effect {
    border: calc(0.3vh) solid #ffd700;
    border-radius: calc(0.5vh);
    box-shadow: 0 0 calc(0.8vh) rgba(255, 215, 0, 0.6);
}

.effect-icon.passive-effect .effect-timer {
    color: #ffd700;
}

/* Score Panel - Esquina superior derecha */
.score-panel {
    position: fixed;
    top: calc(2.5vh);
    right: calc(2.5vh);
    z-index: 100;
    pointer-events: none;
}

.score-text {
    font-family: 'Jacquarda Bastarda 9', serif;
    font-size: calc(2.1vh);
    color: #fff;
    text-shadow: calc(0.18vh) calc(0.18vh) calc(0.3vh) rgba(0, 0, 0, 0.8);
}

/* Level up flash effect */
.level-up-flash {
    animation: levelUpPulse 0.5s ease-out;
}

@keyframes levelUpPulse {
    0% { color: #fff; text-shadow: 0 0 calc(1.4vh) #ffdd00; }
    50% { color: #ffdd00; text-shadow: 0 0 calc(2.8vh) #ffdd00; }
    100% { color: #fff; text-shadow: none; }
}