/* Identidad "Anima Squad": neón rosa → cian, esquinas asimétricas, tipografía en mayúsculas espaciadas.
   Se carga después de style.css y unifica menú, ventanas, cartas y botones con el HUD del canvas. */
:root {
  --neon-a: #f472b6;
  --neon-b: #22d3ee;
  --ink: #0b1020;
  --ink2: #141a2d;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

body { font-family: 'Segoe UI', system-ui, sans-serif; }

/* paneles */
.panel {
  border: 1.5px solid transparent;
  border-radius: 4px 20px 4px 20px;
  background:
    linear-gradient(180deg, var(--ink2), var(--ink)) padding-box,
    linear-gradient(135deg, var(--neon-a), rgba(244,114,182,.15) 35%, rgba(34,211,238,.15) 65%, var(--neon-b)) border-box;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 40px -18px var(--neon-a);
  position: relative;
}
.panel::before {
  content: ''; position: absolute; left: 22px; top: -1px; width: 70px; height: 3px;
  background: linear-gradient(90deg, var(--neon-a), transparent);
}
.panel::after {
  content: ''; position: absolute; right: 22px; bottom: -1px; width: 70px; height: 3px;
  background: linear-gradient(270deg, var(--neon-b), transparent);
}
.panel h2 {
  text-transform: uppercase; letter-spacing: 3px; font-weight: 900; font-size: 22px;
  background: linear-gradient(90deg, #fff, #fbcfe8 40%, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel h2.win { background: linear-gradient(90deg, #fde68a, #fbbf24); -webkit-background-clip: text; background-clip: text; }
.panel h2.lose { background: linear-gradient(90deg, #fca5a5, #ef4444); -webkit-background-clip: text; background-clip: text; }
.panel h3 { color: #a5b4fc; }
.panel h3::before { content: ''; display: inline-block; width: 3px; height: 10px; margin-right: 7px; background: var(--neon-a); vertical-align: -1px; }

/* menú */
.menu { background: radial-gradient(1200px 600px at 15% -10%, #2a1340 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #0b3b4a 0%, transparent 60%), #070a14; }
.menu::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(34,211,238,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.035) 1px, transparent 1px); background-size: 40px 40px; }
.menu h1 { font-weight: 900; letter-spacing: 10px; background: linear-gradient(90deg, var(--neon-a), #c084fc, var(--neon-b)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(244,114,182,.45)); }
.menu h2 { color: #a5b4fc; letter-spacing: 3px; }
.champ-card { border-radius: 4px 14px 4px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #121a2c), #0c1120); }
.champ-card.sel { box-shadow: 0 0 0 1px var(--c), 0 0 28px -6px var(--c), inset 0 3px 0 var(--c); }
.champ-detail { border-radius: 4px 16px 4px 16px; background: linear-gradient(180deg, #131a2c, #0c1120); }
.chip { border-radius: 3px 10px 3px 10px; }
.chip.sel { background: linear-gradient(90deg, rgba(244,114,182,.18), rgba(34,211,238,.08)); border-color: var(--neon-a); }
.chip-stat { border-radius: 3px 10px 3px 10px; }

/* botones */
.btn { border-radius: 3px 12px 3px 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 800; font-size: 13px; transition: transform .1s, box-shadow .1s, filter .1s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 18px -4px var(--neon-b); }
.btn.primary { background: linear-gradient(90deg, var(--neon-a), #a855f7); color: #fff; border: 0; box-shadow: 0 0 24px -6px var(--neon-a); }
.btn.ghost { border-color: #2c3656; background: rgba(20,26,45,.6); }
.btn.danger.on { border-color: #ef4444; background: rgba(239,68,68,.18); color: #fecaca; }

/* ventana de elección */
.choice-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.cards.banishing .card.banishable { outline: 2px dashed #ef4444; }
.cards.banishing .card.banishable::after { content: 'DESCARTAR'; position: absolute; inset: auto 10px 10px auto; background: #ef4444; color: #fff; font-weight: 900; letter-spacing: 2px; font-size: 11px; padding: 3px 8px; border-radius: 3px 8px; }
.cards.banishing .card:not(.banishable) { opacity: .45; }
.card { border-radius: 4px 18px 4px 18px; }

/* cartas de fragmento (yunques) */
.card.kind-shard { min-height: 300px; }
.card.tier-silver { background: linear-gradient(180deg, rgba(203,213,225,.16), #121621 45%); }
.card.tier-gold { background: linear-gradient(180deg, rgba(251,191,36,.2), #121621 45%); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 26px -8px #fbbf24, inset 0 3px 0 #fbbf24; }
.card.tier-prismatic {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(240,171,252,.18), #121621 45%) padding-box,
    conic-gradient(from var(--ang), #f0abfc, #67e8f9, #fde68a, #a78bfa, #f0abfc) border-box;
  animation: cardIn .35s backwards, spin 3s linear infinite;
  box-shadow: 0 0 34px -6px #f0abfc;
}
@keyframes spin { to { --ang: 360deg; } }
.panel.choices.tier-prismatic { box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 60px -10px #f0abfc; }
.panel.choices.tier-gold { box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 50px -12px #fbbf24; }
.shard-fx { font-size: 15px; color: #e2e8f0; }
.shard-fx b { font-size: 22px; font-weight: 900; color: var(--c); margin-right: 2px; }
.roll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11px; color: #94a3b8; }
.roll-bar { height: 6px; background: #1f2738; border-radius: 3px; overflow: hidden; }
.roll-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #facc15, #4ade80); }
.roll-q { font-weight: 900; letter-spacing: 1px; color: #fde68a; }

/* candado de cartas */
.lock-btn { position: absolute; top: 8px; right: 40px; width: 26px; height: 22px; display: grid; place-items: center; font-size: 13px;
  background: #0b0f18; border: 1px solid #263044; border-radius: 3px 8px 3px 8px; cursor: pointer; z-index: 2; filter: grayscale(.6); opacity: .8; }
.lock-btn:hover { opacity: 1; filter: none; border-color: #93c5fd; }
.lock-btn.on { filter: none; opacity: 1; background: rgba(147,197,253,.18); border-color: #93c5fd; box-shadow: 0 0 10px -2px #93c5fd; }
.card.locked { outline: 2px solid #93c5fd; outline-offset: -2px; }
.lock-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #93c5fd; color: #0b1020; font-size: 9px; font-weight: 900; letter-spacing: 2px; padding: 1px 10px; border-radius: 0 0 6px 6px; z-index: 2; }
.cards.locking .card { outline: 2px dashed #93c5fd; cursor: copy; }
.btn.lock.on { border-color: #93c5fd; color: #bfdbfe; }
.btn.lock.arming { background: rgba(147,197,253,.2); border-color: #93c5fd; }

/* tooltip con la misma identidad */
.tip { border-radius: 3px 14px 3px 14px; border: 1px solid transparent; background: linear-gradient(180deg, #0f1424, #0a0d18) padding-box, linear-gradient(135deg, rgba(244,114,182,.7), rgba(34,211,238,.6)) border-box; }