@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;700;900&family=Montserrat:wght@300;400;700;900&display=swap');

:root {
    --gold: #c5a039;
    --gold-bright: #f0d78c;
    --gold-dark: #8b6e23;
    --red: #660000;
    --blue: #1a3a6d;
    --green: #2d5a27;
    --bg-dark: #050507;
    --notif-bg: rgba(0,0,0,0.9);
    --cell-size: 50px;
    --mini-cell: 32px;
}

* { margin:0; padding:0; box-sizing: border-box; }
body { 
    background: #000; color: #eee; font-family: 'Montserrat', sans-serif;
    height: 100vh; overflow: hidden;
}

.screen { 
    width: 100vw; min-height: 100vh; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; background: #000;
}

/* --- TITULOS Y BOTONES AAA --- */
.title-decorative {
    font-family: 'Cinzel Decorative', cursive; color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(197, 160, 57, 0.5); font-weight: 900;
}

.btn-action {
    background: linear-gradient(to bottom, var(--gold), var(--gold-dark));
    border: 1px solid #fff3; color: #000; padding: 12px 30px;
    font-family: 'Cinzel', serif; font-weight: 900; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: 0.2s;
    border-radius: 2px;
}
.btn-action:hover { transform: translateY(-2px); filter: brightness(1.2); }

/* --- PANTALLA CREACION (RESTAURACION) --- */
#pantalla-creacion { background: radial-gradient(circle, #15151a 0%, #000 100%); }
.char-creation-box {
    display: flex; flex-direction: column; align-items: center; gap: 30px;
    width: 100%; max-width: 900px;
}
#hero-name-input {
    background: #000; border: 2px solid var(--gold-dark); color: #fff;
    padding: 15px 25px; font-size: 20px; font-family: 'Montserrat', sans-serif;
    text-align: center; width: 400px; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,1);
    transition: 0.3s;
}
#hero-name-input:focus { border-color: var(--gold-bright); box-shadow: 0 0 30px rgba(197, 160, 57, 0.3); outline: none; }

.creation-main { display: flex; gap: 50px; align-items: flex-start; margin: 20px 0; }
.class-list-aaa { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.class-item-aaa {
    padding: 10px 25px; border: 1px solid #333; cursor: pointer; border-radius: 3px;
    font-family: 'Cinzel', serif; font-weight: 900; transition: 0.2s; color: #888;
}
.class-item-aaa.active { color: var(--gold-bright); border-color: var(--gold); background: rgba(197,160,57,0.1); }
.class-item-aaa:hover:not(.active) { border-color: #555; color: #bbb; }

.creation-portrait { 
    width: 280px; height: 380px; border: 2px solid var(--gold-dark); 
    background: #0a0a0c; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 50px #000;
}
.creation-portrait img { 
    height: 90%; width: auto; object-fit: contain; 
    animation: bobbing-portrait 3s ease-in-out infinite;
}

@keyframes bobbing-portrait {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.class-stats-aaa { width: 350px; background: #0a0a0c; border: 1px solid #333; padding: 20px; border-radius: 4px; }
.stat-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 16px; border-bottom: 1px solid #222; padding-bottom: 2px; }

/* --- PANTALLA MAPA (RESTAURACION) --- */
.map-top-bar {
    position: absolute; top: 0; width: 100%; background: #0a0a0c; 
    border-bottom: 2px solid var(--gold-dark); padding: 5px 30px;
    display: flex; justify-content: space-between; align-items: center; z-index: 100;
}
.map-layout { 
    display: flex; flex-direction: column; width: 100%; height: 100%; padding-top: 60px;
}
#map-container { 
    flex: 1; background: #000; display: flex; align-items: flex-start; justify-content: center;
    overflow: auto; padding: 20px;
}
#map-target { display: grid; gap: 0; border: 1px solid #222; }
.map-cell { 
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; transition: 0.1s; background: #000; border: 1px solid #111;
}
.map-cell.path { background: #0a0a0c; }
.map-cell.visited { border-color: rgba(255,255,255,0.05); }
.map-cell.active { filter: drop-shadow(0 0 10px #fff); z-index: 10; }

.map-sidebar-legend {
    background: #000; border-top: 1px solid #333; padding: 15px 30px;
    display: flex; gap: 40px; font-size: 14px; align-items: center;
}

/* --- COMBAT LAYOUT AAA --- */
.combat-layout {
    display: grid; grid-template-columns: 320px 1fr 320px;
    height: 100vh; width: 100vw; overflow: hidden;
}

.log-sidebar, .management-sidebar {
    height: 100%; background: #050507; display: flex; flex-direction: column;
    border: 1px solid #222; overflow: hidden;
}
.game-console { flex: 1; min-height: 0; padding: 15px; overflow-y: auto; background: #000; font-family: monospace; font-size: 14px; }
.sidebar-header { 
    background: #111; padding: 12px; font-family: 'Cinzel', serif; 
    color: var(--gold); border-bottom: 2px solid #333; font-weight: 900; text-align: center;
}

.combat-main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, #1a1a20 0%, #000 100%);
    padding: 15px; gap: 20px; flex: 1; height: 100%; overflow: hidden;
}

.combat-scene { 
    display: flex; align-items: center; justify-content: center; gap: 40px; 
    width: 100%; margin-bottom: 10px;
}

.combat-card-aaa {
    width: 320px; background: #0a0a0c; border: 2px solid #34343a; position: relative;
    box-shadow: 0 10px 40px #000; border-radius: 4px; border-top: 4px solid #222;
}
.combat-card-aaa.enemy { border-top-color: var(--red); }

.unit-header-aaa { background: #000; padding: 10px; text-align: center; border-bottom: 1px solid #333; font-family: 'Cinzel', serif; font-size: 16px; }
.unit-portrait-aaa { 
    height: 200px; background: radial-gradient(circle, #222, #000); 
    display: flex; align-items: center; justify-content: center;
}
.unit-portrait-aaa img { height: 95%; width: auto; object-fit: contain; }

.combat-stats-box { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.bar-outer-aaa { width: 100%; height: 32px; background: #000; border: 2px solid #333; position: relative; border-radius: 3px; overflow: hidden; }
.bar-fill-aaa { height: 100%; transition: width 0.4s cubic-bezier(0.1, 0.5, 0.5, 1); }
.bar-fill-aaa.hp { background: linear-gradient(to right, #800, #f33); width:100%; box-shadow: inset 0 0 10px #000; }
.bar-fill-aaa.en { background: linear-gradient(to right, #113, #38f); width:100%; box-shadow: inset 0 0 10px #000; }
.bar-text-aaa {
    position: absolute; width:100%; height:100%; top:0; left:0;
    display:flex; align-items:center; justify-content:center;
    font-size: 18px; font-weight: 700; text-shadow: 2px 2px 4px #000; color: #fff;
}

/* ZONA CENTRAL DE CONTROLES TRIPLE A */
.combat-center-zone {
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid #222;
}

.vs-divider-aaa { 
    font-family: 'Cinzel Decorative', cursive; font-size: 55px; color: var(--gold-dark);
    font-weight: 900; filter: drop-shadow(0 0 20px #000); margin-bottom: 5px;
}

/* --- DADOS Y ACCIONES --- */
.dice-pool-flex { display: flex; gap: 15px; height: 80px; align-items: center; justify-content: center; }

.die-val {
    width: 70px; height: 70px; background: #000; border: 2px solid #333;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 900; color: #fff; font-family: 'Cinzel', serif;
    border-radius: 6px; box-shadow: 0 0 30px rgba(0,0,0,1);
    text-shadow: 0 0 15px var(--gold-bright);
}
.die-val.red { border-color: var(--red); box-shadow: 0 0 15px rgba(255, 77, 77, 0.3); }
.die-val.blue { border-color: var(--blue); box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }

.btn-roll-aaa {
    background: linear-gradient(to bottom, #444, #222); border: 1px solid var(--gold);
    color: var(--gold-bright); padding: 12px 40px; font-size: 18px; font-family: 'Cinzel', serif;
    font-weight: 900; cursor: pointer; border-radius: 3px; transition: 0.3s;
}
.btn-roll-aaa:hover { background: var(--gold); color: #000; }

/* --- HABILIDADES GOD-TIER --- */
.skill-grid-aaa {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; max-width: 900px;
}
.skill-card-aaa {
    background: linear-gradient(135deg, #0d0d12 0%, #000 100%);
    border: 2px solid #333; padding: 15px; position: relative;
    border-left: 8px solid #222; min-height: 120px; transition: 0.2s;
    opacity: 0.6; cursor: not-allowed; border-radius: 4px;
}
.skill-card-aaa.active { 
    opacity: 1; border-color: #666; cursor: pointer;
}

/* Feedback Cromático AAA: Borde Bicolor y LEDs Superiores */
.skill-card-aaa.active.glow-red { border-color: var(--red); border-left-color: var(--red); }
.skill-card-aaa.active.glow-blue { border-color: var(--blue); border-left-color: var(--blue); }
.skill-card-aaa.active.glow-dual { 
    border-color: transparent;
    border-image: linear-gradient(to right, var(--red) 50%, var(--blue) 50%) 1; /* Mitad Rojo, Mitad Azul */
    box-shadow: 0 0 30px rgba(255,255,255,0.1); 
}

.dice-indicator-box {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px; align-items: center; z-index: 50;
}
.dice-dot {
    width: 15px; height: 15px; border-radius: 50%; border: 3px solid #000;
    box-shadow: 0 0 10px #000;
}
.dice-dot.red { background: var(--red); box-shadow: 0 0 15px var(--red); }
.dice-dot.blue { background: var(--blue); box-shadow: 0 0 15px var(--blue); }

.sk-name { font-size: 22px; font-weight: 900; color: var(--gold-bright); text-transform: uppercase; margin-bottom: 6px; }
.sk-desc { font-size: 16px; color: #aaa; font-style: italic; margin-bottom: 8px; }
.sk-cost { position: absolute; top: 12px; right: 20px; font-size: 17px; font-weight: 900; color: var(--gold); }
.sk-eff { font-size: 20px; font-weight: 900; margin-bottom: 5px; }

/* --- SIDEBAR MANAGEMENT --- */
.mini-equipment-tibia {
    display: flex; gap: 10px; justify-content: center; padding: 20px;
    background: #000; border-bottom: 1px solid #333;
}
.tibia-mini-col { display: flex; flex-direction: column; gap: 10px; }
.slot-point { 
    width: 50px; height: 50px; background: #050507; border: 1px solid #333; position: relative; 
    border-radius: 3px; box-shadow: inset 0 0 10px #000;
}
.grid-bag { 
    display: grid; border: 2px solid var(--gold-dark); background: #000;
    grid-template-columns: repeat(10, 60px);
    grid-template-rows: repeat(6, 60px);
    width: 602px; height: 362px; overflow: hidden;
}
.grid-bag.mini {
    grid-template-columns: repeat(8, var(--mini-cell));
    grid-template-rows: repeat(5, var(--mini-cell));
    width: 258px; height: 162px;
}
.grid-bag .cell { border: 1px solid #1a1a1a; width: 100%; height: 100%; transition: 0.2s; }
.grid-bag .cell:hover { background: rgba(255,255,255,0.05); }

.bag-relative-container { 
    position: relative; width: fit-content; height: fit-content; overflow: hidden;
    box-shadow: 0 0 30px #000; border: 2px solid #222; margin: 0 auto;
}
.bag-items-layer { position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; z-index: 10; }
/* NOTIFICACIONES Y MODALES GOD-TIER */
#notification-container {
    position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
    z-index: 9999; pointer-events: none; display: flex; flex-direction: column; gap: 10px;
}
.aaa-notification {
    background: var(--notif-bg); border-left: 4px solid var(--gold); color: #fff;
    padding: 15px 30px; border-radius: 4px; font-family: 'Cinzel', serif;
    font-size: 18px; letter-spacing: 1px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    animation: slide-in-notif 0.5s ease-out forwards;
    text-transform: uppercase; border: 1px solid #333; border-left: 4px solid var(--gold);
}
@keyframes slide-in-notif {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-red { border-left-color: var(--red); }
.notif-gold { border-left-color: var(--gold); }

.aaa-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85); z-index: 10000; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); animation: fade-in 0.3s forwards;
}
.aaa-modal-box {
    background: #0a0a0c; border: 2px solid var(--gold-dark); padding: 40px; border-radius: 8px;
    max-width: 500px; text-align: center; box-shadow: 0 0 50px #000;
}
.aaa-modal-box h2 { font-size: 32px; color: var(--gold); margin-bottom: 20px; }
.aaa-modal-box p { color: #ccc; font-size: 18px; margin-bottom: 30px; line-height: 1.6; }


/* --- TIBIA INVENTARIO MANTLE --- */
.equipment-silhouette-tibia {
    display: flex; gap: 20px; justify-content: center; padding: 20px;
    background: #0a0a0c; border: 2px solid #222; border-radius: 4px; box-shadow: 0 0 50px #000;
}
.tibia-slot { 
    width: 70px; height: 70px; background: #000; border: 2px solid #333; 
    border-radius: 3px; position: relative; box-shadow: inset 0 0 15px #000;
}
.tibia-slot:hover { border-color: var(--gold); filter: brightness(1.2); }

/* --- ANIMACIONES --- */
.floating-text {
    position: absolute; width: 100%; text-align: center; top: 20%;
    font-family: 'Cinzel Decorative'; font-size: 44px; font-weight: 900;
    pointer-events: none; z-index: 2000; animation: jumpFade 1s forwards;
    letter-spacing: 2px;
}
@keyframes jumpFade {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    20% { transform: translateY(-60px) scale(1.4); opacity: 1; }
    100% { transform: translateY(-120px) scale(1.2); opacity: 0; }
}