*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a1a;color:#e0d0b0;font-family:Segoe UI,sans-serif;min-height:100vh}
header{background:linear-gradient(135deg,#1a0a2e,#2d1b4e);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #ffd700}
header h1{color:#ffd700;font-size:1.4rem}
header span{color:#aaa;font-size:.85rem}
main{max-width:1200px;margin:0 auto;padding:20px}
.vista{display:block}
.oculto{display:none !important}
h2{color:#ffd700;margin:16px 0 12px;font-size:1.1rem}
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:linear-gradient(145deg,#1a1a2e,#16213e);border:2px solid #333;border-radius:12px;padding:14px;cursor:pointer;transition:all .3s;text-align:center}
.card:hover{border-color:#ffd700;transform:translateY(-3px);box-shadow:0 6px 20px rgba(255,215,0,.2)}
.card.selected{border-color:#00ff88;box-shadow:0 0 15px rgba(0,255,136,.3)}
.card .avatar{width:70px;height:70px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;border:3px solid #555}
.card .nombre{font-weight:bold;font-size:.95rem;color:#fff}
.card .clase{font-size:.75rem;color:#aaa;margin:2px 0}
.card .stats{font-size:.7rem;color:#888;margin-top:6px}
.card .poder{font-size:.7rem;color:#ffd700;font-style:italic;margin-top:4px}
.col-full{grid-column:1/-1;text-align:center;margin-top:10px}
.btn-big{background:linear-gradient(135deg,#ff8c00,#ffd700);color:#1a0a2e;font-weight:bold;font-size:1.1rem;padding:14px 40px;border:none;border-radius:30px;cursor:pointer;transition:all .3s}
.btn-big:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 20px rgba(255,215,0,.4)}
.btn-big:disabled{opacity:.4;cursor:not-allowed}
.combatientes{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0;flex-wrap:wrap}
.combatiente{background:linear-gradient(145deg,#1a1a2e,#16213e);border:3px solid #555;border-radius:16px;padding:20px;min-width:240px;text-align:center;position:relative}
.combatiente.lado-h{border-color:#00ff88}
.combatiente.lado-e{border-color:#ff4444}
.vs{font-size:2rem;font-weight:bold;color:#ffd700;text-shadow:0 0 10px rgba(255,215,0,.5)}
.hp-bar{width:100%;height:22px;background:#333;border-radius:11px;overflow:hidden;margin:8px 0;position:relative}
.hp-fill{height:100%;background:linear-gradient(90deg,#00cc66,#00ff88);transition:width .5s ease}
.hp-fill.low{background:linear-gradient(90deg,#cc3300,#ff4444)}
.hp-fill.mid{background:linear-gradient(90deg,#cc8800,#ffaa00)}
.hp-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;font-weight:bold;color:#fff;text-shadow:1px 1px 2px #000}
.turno{background:linear-gradient(135deg,#1a0a2e,#2d1b4e);border:2px solid #ffd700;border-radius:12px;padding:16px;margin:16px 0;text-align:center;min-height:80px}
.turno .fase{font-size:1rem;font-weight:bold;color:#ffd700;margin-bottom:8px}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.acciones button{padding:12px 24px;border:2px solid #555;border-radius:10px;cursor:pointer;font-weight:bold;font-size:.9rem;transition:all .3s;background:#1a1a2e;color:#e0d0b0}
.acciones button:hover:not(:disabled){border-color:#ffd700;background:#2d1b4e}
.acciones button:disabled{opacity:.3;cursor:not-allowed}
.acciones button.warn{border-color:#ff6600;color:#ff8c00}
.acciones button.atk{border-color:#ff4444;color:#ff6666}
.acciones button.poder-btn{border-color:#aa44ff;color:#cc88ff}
.dice-area{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.dice{width:44px;height:44px;background:linear-gradient(145deg,#fff,#ddd);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:bold;color:#1a0a2e;box-shadow:2px 2px 8px rgba(0,0,0,.4);animation:diceRoll .5s ease-out}
.dice.atk-dice{border:3px solid #ff4444}
.dice.def-dice{border:3px solid #4488ff}
.dice-label{font-size:.85rem;color:#ddd;font-weight:bold;margin-right:4px}
.dice-result{font-size:1rem;color:#ffd700;font-weight:bold;margin-left:6px}
@keyframes diceRoll{0%{transform:rotate(0) scale(0);opacity:0}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes floatUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-50px)}}
.danado{animation:shake .3s ease}
.dmg-float{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:2rem;font-weight:bold;color:#ff4444;animation:floatUp 1.2s ease forwards;pointer-events:none;text-shadow:0 0 8px #000}
.log-area{background:linear-gradient(145deg,#0d0d1a,#1a1a2e);border:2px solid #333;border-radius:12px;padding:16px;margin:16px 0;max-height:300px;overflow-y:auto}
.log-area ul{list-style:none;font-size:.85rem}
.log-area li{padding:5px 8px;border-bottom:1px solid #222}
.log-area li.crit{color:#ffd700;font-weight:bold}
.log-area li.dano{color:#ff6666}
.log-area li.heal{color:#66ff88}
.log-area li.info{color:#aaa}
.victoria{background:linear-gradient(135deg,#006622,#00aa44);padding:16px;border-radius:12px;font-size:1.2rem;color:#ffd700;font-weight:bold}
.derrota{background:linear-gradient(135deg,#660000,#aa0000);padding:16px;border-radius:12px;font-size:1.2rem;color:#fff;font-weight:bold}