/* ===========================================
   BLACK CLOVER — Yami Sukehiro Theme
   Dark magic, smoke, void presence
   =========================================== */

.black-clover-theme
{
    --panel-accent: #888888;
}

.black-clover-theme .manga-show-content {
    background: radial-gradient(ellipse at top, rgba(80,80,80,0.08) 0%, transparent 60%);
}

.black-clover-theme .dedication-card {
    border-color: #7c7979;
    background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(20,20,20,0.9) 100%);
    box-shadow: 0 0 40px rgba(100,100,100,0.25), 0 0 80px rgba(50,50,50,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}

.black-clover-theme .dedication-card::before {
    background: linear-gradient(90deg, transparent, #444, #999, #444, transparent);
}

.black-clover-theme .dedication-tagline {
    color: #dddddd;
    text-shadow: 0 0 15px rgba(150,150,150,0.6), 0 0 40px rgba(80,80,80,0.3);
    font-style: normal;
    letter-spacing: 0.04em;
}

.black-clover-theme .dedication-icon i {
    color: #d9d7d7;
    text-shadow: 0 0 20px rgba(150,150,150,0.7);
    animation: darkMagic 3s ease-in-out infinite;
}

@keyframes darkMagic {
    0%, 100% { text-shadow: 0 0 20px rgba(150,150,150,0.7); transform: scale(1); filter: blur(0px); }
    40% { text-shadow: 0 0 40px rgba(200,200,200,0.9), 0 0 80px rgba(100,100,100,0.4); transform: scale(1.15); filter: blur(0.5px); }
    41% { transform: scale(0.95); filter: blur(0px); }
}

.black-clover-theme .manga-hero-banner {
    filter: saturate(0) contrast(1.2) brightness(0.85);
}

.black-clover-theme .manga-hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(10,10,10,0.65) 60%, rgba(5,5,5,0.92) 100%);
}

.black-clover-theme .panel-glow-bar {
    background: linear-gradient(90deg, transparent, #444, #999, #444, transparent);
}

.black-clover-theme .manga-panel-frame {
    border-color: rgba(178, 174, 174, 0.3);
    filter: saturate(0) brightness(0.9);
}

.black-clover-theme .manga-panel-frame:hover {
    border-color: #dcd7d7;
    box-shadow: 0 0 30px rgba(150,150,150,0.4);
    filter: saturate(0.3) brightness(1);
}

.black-clover-theme .section-title {
    background: linear-gradient(45deg, #444444, #999999, #dddddd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.black-clover-theme .section-line {
    background: linear-gradient(90deg, #444, #888, #444);
    box-shadow: 0 0 20px rgba(100,100,100,0.4);
}

.black-clover-theme .cyber-button.secondary {
    border-color: #b6b2b2;
    color: #ffefef;
}

.black-clover-theme .cyber-button.secondary:hover {
    background: rgba(100,100,100,0.15);
    box-shadow: 0 0 30px rgba(150,150,150,0.4);
    color: #ffffff;
}

.recording-mode .black-clover-theme .dedication-icon i {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

/* ══════════════════════════════════════════
   YAMI DOSSIER
   ══════════════════════════════════════════ */
.black-clover-theme .yami-dossier {
    position: relative;
    width: 100%;
    margin-bottom: 3.48rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(120,120,120,0.35);
    background: #050505;
}

.yami-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
    z-index: 10;
    pointer-events: none;
}

.yami-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.16rem 2.32rem;
    background: rgba(8,8,8,0.95);
    border-bottom: 1px solid rgba(120,120,120,0.3);
    position: relative;
    z-index: 5;
    flex-wrap: wrap;
    gap: 0.58rem;
}

.yami-topbar-label {
    font-family: var(--font-ghost);
    font-size: 0.765rem;
    letter-spacing: 0.45em;
    color: rgb(252, 246, 246);
    text-transform: uppercase;
}

.yami-topbar-status {
    font-family: var(--font-ghost);
    font-size: 0.8165rem;
    letter-spacing: 0.3em;
    color: rgb(220, 220, 220);
    text-transform: uppercase;
}

.yami-stage {
    display: grid;
    grid-template-columns: 280px 1fr;
    position: relative;
    z-index: 5;
    min-height: 420px;
}

/* Portrait col */
.yami-portrait-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.32rem 1.74rem;
    border-right: 1px solid rgba(120,120,120,0.25);
    background: linear-gradient(135deg, rgba(80,80,80,0.08) 0%, transparent 60%);
}

.yami-portrait-wrap {
    position: relative;
    width: 160px;
    height: 200px;
    flex-shrink: 0;
}

.yami-portrait {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    border-radius: 6px;
    border: 1px solid rgba(120,120,120,0.4);
    filter: saturate(0.1) brightness(0.65);
    transition: filter 0.6s ease, box-shadow 0.6s ease;
}

.yami-portrait-col:hover .yami-portrait {
    filter: saturate(0.4) brightness(0.9);
    box-shadow: 0 0 30px rgba(100,100,100,0.5);
}

.yami-portrait-glow {
    position: absolute;
    inset: -4px;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(80,80,80,0.7), 0 0 60px rgba(40,40,40,0.4);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.yami-portrait-col:hover .yami-portrait-glow { opacity: 1; }

.yami-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.348rem;
    text-align: center;
}

.yami-codename {
    font-family: var(--font-ghost);
    font-size: 1.4635rem;
    letter-spacing: 0.4em;
    color: #fff7f7;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(150, 150, 150, 0.75);
}

.yami-subtitle {
    font-family: var(--font-ghost);
    font-size: 0.745rem;
    letter-spacing: 0.25em;
    color: rgb(246, 242, 242);
    text-transform: uppercase;
}

.yami-quote-block {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(120,120,120,0.25);
    width: 100%;
    text-align: center;
}

.yami-quote-block p
{
    font-family: var(--font-ghost);
    font-size: 0.91rem;
    font-style: italic;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.91);
    line-height: 1.8;
}

/* Stats col */
.yami-stats-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2.32rem 2.32rem;
    border-top: none;
}

.yami-stat-row {
    display: flex;
    flex-direction: column;
    gap: 0.232rem;
    padding: 0.696rem 0;
    border-bottom: 1px solid rgba(120,120,120,0.2);
    transition: background 0.3s ease, padding-left 0.3s ease;
}

.yami-stat-row:last-child { border-bottom: none; }

.yami-stat-row:hover {
    background: rgba(100,100,100,0.05);
    padding-left: 0.5rem;
}

.yami-stat-row-final {
    margin-top: 0.464rem;
    padding-top: 0.928rem;
    border-top: 1px solid rgba(120,120,120,0.25);
}

.yami-stat-key {
    font-family: var(--font-ghost);
    font-size: 0.603rem;
    letter-spacing: 0.3em;
    color: rgba(236, 236, 236, 0.98);
    text-transform: uppercase;
}

.yami-stat-val
{
    font-family: var(--font-ghost);
    font-size: 0.91rem;
    letter-spacing: 0.08em;
    color: rgba(245, 240, 240, 0.96);
    line-height: 1.5;
}

.yami-grey
{
    color: #e5e2e2;
    text-shadow: 0 0 8px rgba(150, 150, 150, 0.94);
}

.yami-outcome-bar {
    display: flex;
    align-items: center;
    gap: 1.74rem;
    padding: 1.16rem 2.32rem;
    border-top: 1px solid rgba(120,120,120,0.25);
    background: rgba(8,8,8,0.95);
    position: relative;
    z-index: 5;
    flex-wrap: wrap;
}

.yami-outcome-label {
    font-family: var(--font-ghost);
    font-size: 0.724rem;
    letter-spacing: 0.4em;
    color: rgba(236, 230, 230, 0.96);
    text-transform: uppercase;
    flex-shrink: 0;
}

.yami-outcome-val {
    font-family: var(--font-ghost);
    font-size: 0.923rem;
    font-style: italic;
    letter-spacing: 0.08em;
    color: rgba(238, 234, 234, 0.94);
    line-height: 1.6;
}

@media (max-width: 750px) {
    .yami-stage { grid-template-columns: 1fr; }
    .yami-portrait-col { border-right: none; border-bottom: 1px solid rgba(120,120,120,0.2); }
    .yami-quote-block { display: none; }
}

/* ══════════════════════════════════════════
   DARK MAGIC REGISTRY
   ══════════════════════════════════════════ */
.black-clover-theme .dark-magic-registry {
    position: relative;
    width: 100%;
    margin-bottom: 3.48rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(100,100,100,0.22);
    background: #050505;
}

.dmr-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
    z-index: 10;
    pointer-events: none;
}

.dmr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.16rem 2.32rem;
    border-bottom: 1px solid rgba(100,100,100,0.28);
    background: rgba(8,8,8,0.95);
    position: relative;
    z-index: 5;
    flex-wrap: wrap;
    gap: 0.58rem;
}

.dmr-org {
    font-family: var(--font-ghost);
    font-size: 0.73rem;
    letter-spacing: 0.4em;
    color: rgba(243, 237, 237, 0.95);
    text-transform: uppercase;
}

.dmr-total {
    font-family: var(--font-ghost);
    font-size: 0.856rem;
    letter-spacing: 0.2em;
    color: #eae6e6;
    text-shadow: 0 0 10px rgba(150,150,150,0.5);
    text-transform: uppercase;
}

.dmr-body {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}

.dmr-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0 1.74rem;
    padding: 1.044rem 2.32rem;
    border-bottom: 1px solid rgba(100,100,100,0.1);
    transition: background 0.3s ease;
}

.dmr-row:last-child { border-bottom: none; }

.dmr-row:hover { background: rgba(100,100,100,0.05); }

.dmr-key {
    font-family: var(--font-ghost);
    font-size: 0.87rem;
    letter-spacing: 0.12em;
    color: rgba(255, 246, 246, 0.95);
    text-transform: uppercase;
}

.dmr-tag
{
    font-family: var(--font-ghost);
    font-size: 0.735rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.28rem 0.75rem;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag-void {
    color: rgba(200,200,200,0.85);
    border-color: rgba(150,150,150,0.4);
    background: rgba(80,80,80,0.12);
}

.tag-field {
    color: rgba(160,160,255,0.8);
    border-color: rgba(100,100,200,0.35);
    background: rgba(80,80,180,0.08);
}

.tag-ultimate {
    color: rgba(255,255,255,0.9);
    border-color: rgba(200,200,200,0.45);
    background: rgba(100,100,100,0.18);
    text-shadow: 0 0 8px rgba(200,200,200,0.5);
}

.tag-passive {
    color: rgba(140, 140, 140, 0.89);
    border-color: rgba(100,100,100,0.3);
    background: transparent;
}

.dmr-note {
    font-family: var(--font-ghost);
    font-size: 0.724rem;
    color: rgba(246, 242, 242, 0.94);
    letter-spacing: 0.1em;
    text-align: right;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    min-width: 200px;
}

.dmr-row:hover .dmr-note {
    opacity: 1;
    transform: translateX(0);
}

.dmr-footer {
    padding: 1.16rem 2.32rem;
    border-top: 1px solid rgba(100,100,100,0.22);
    background: rgba(8,8,8,0.9);
    position: relative;
    z-index: 5;
}

.dmr-footer-line {
    font-family: var(--font-ghost);
    font-size: 0.74325rem;
    font-style: italic;
    letter-spacing: 0.15em;
    color: rgba(211, 201, 201, 0.92);
    display: block;
    text-align: center;
}

@media (max-width: 700px) {
    .dmr-row { grid-template-columns: 1fr auto; }
    .dmr-note { display: none; }
}

/* ══════════════════════════════════════════
   BLACK BULLS FLIP CARDS
   ══════════════════════════════════════════ */
.black-clover-theme .bulls-flip-container {
    position: relative;
    width: 100%;
    margin-bottom: 3.48rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(100,100,100,0.28);
    background: #050505;
}

.bulls-flip-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.16rem 2.32rem;
    background: rgba(8,8,8,0.95);
    border-bottom: 1px solid rgba(100,100,100,0.25);
    flex-wrap: wrap;
    gap: 0.58rem;
}

.bulls-flip-label {
    font-family: var(--font-ghost);
    font-size: 0.7234rem;
    letter-spacing: 0.45em;
    color: rgba(211, 211, 211, 0.93);
    text-transform: uppercase;
}

.bulls-flip-status {
    font-family: var(--font-ghost);
    font-size: 0.8354rem;
    letter-spacing: 0.3em;
    color: rgba(245, 244, 244, 0.94);
    text-transform: uppercase;
}

.bulls-flip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem 2rem;
}

/* ── Card shell ── */
.bull-flip-card {
    height: 280px;
    perspective: 1000px;
    cursor: pointer;
}

.bull-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.bull-flip-card:hover .bull-flip-inner {
    transform: rotateY(180deg);
}

/* ── Shared face styles ── */
.bull-flip-front,
.bull-flip-back {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border: 1px solid rgba(100,100,100,0.3);
}

/* ── FRONT ── */
.bull-flip-front {
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.5rem;
    text-align: center;
}

.bull-front-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
    pointer-events: none;
    z-index: 2;
}

/* Per-member glow overlays */
.bull-front-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.bull-flip-card:hover .bull-front-glow { opacity: 1; }

.asta-glow    { background: radial-gradient(ellipse at center, rgba(50,50,50,0.5) 0%, transparent 70%); }
.noelle-glow  { background: radial-gradient(ellipse at center, rgba(30,60,120,0.25) 0%, transparent 70%); }
.magna-glow   { background: radial-gradient(ellipse at center, rgba(120,40,10,0.25) 0%, transparent 70%); }
.luck-glow    { background: radial-gradient(ellipse at center, rgba(80,80,20,0.25) 0%, transparent 70%); }
.charmy-glow  { background: radial-gradient(ellipse at center, rgba(60,80,30,0.2) 0%, transparent 70%); }
.finral-glow  { background: radial-gradient(ellipse at center, rgba(40,30,80,0.25) 0%, transparent 70%); }

.bull-front-icon {
    font-size: 3rem;
    position: relative;
    z-index: 3;
    transition: transform 0.4s ease;
}

.bull-flip-card:hover .bull-front-icon {
    transform: scale(1.15);
}

.bull-front-name {
    font-family: var(--font-ghost);
    font-size: 1.54rem;
    letter-spacing: 0.3em;
    color: #ece9e9;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
}

.bull-front-title {
    font-family: var(--font-ghost);
    font-size: 0.7235rem;
    letter-spacing: 0.2em;
    color: rgba(227, 220, 220, 0.84);
    text-transform: uppercase;
    position: relative;
    z-index: 3;
}

.bull-front-attr {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.bull-attr-tag {
    font-family: var(--font-ghost);
    font-size: 0.645rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    border: 1px solid transparent;
}

/* Tag colours — front face */
.tag-anti      { color: rgba(220,220,220,0.9); border-color: rgba(180,180,180,0.4); background: rgba(80,80,80,0.2); }
.tag-no-grimoire { color: rgba(160,160,160,0.7); border-color: rgba(120,120,120,0.3); background: transparent; }
.tag-water     { color: rgba(100,160,255,0.85); border-color: rgba(80,130,220,0.4); background: rgba(40,80,160,0.1); }
.tag-royal     { color: rgba(200,170,100,0.85); border-color: rgba(180,140,60,0.4); background: rgba(120,90,20,0.1); }
.tag-fire      { color: rgba(255,130,60,0.85); border-color: rgba(220,100,40,0.4); background: rgba(150,50,10,0.1); }
.tag-low       { color: rgba(160,160,160,0.7); border-color: rgba(120,120,120,0.3); background: transparent; }
.tag-lightning { color: rgba(240,220,80,0.85); border-color: rgba(200,180,40,0.4); background: rgba(120,100,10,0.1); }
.tag-speed     { color: rgba(200,200,200,0.8); border-color: rgba(160,160,160,0.35); background: rgba(80,80,80,0.1); }
.tag-cotton    { color: rgba(200,220,200,0.8); border-color: rgba(140,180,140,0.35); background: rgba(60,100,60,0.08); }
.tag-food      { color: rgba(220,200,160,0.8); border-color: rgba(180,160,100,0.35); background: rgba(100,80,20,0.08); }
.tag-spatial   { color: rgba(160,120,220,0.85); border-color: rgba(120,80,180,0.4); background: rgba(60,30,120,0.1); }
.tag-support   { color: rgba(160,160,160,0.7); border-color: rgba(120,120,120,0.3); background: transparent; }

.bull-flip-hint {
    font-family: var(--font-ghost);
    font-size: 0.654rem;
    letter-spacing: 0.25em;
    color: rgba(236, 231, 231, 0.91);
    text-transform: uppercase;
    position: absolute;
    bottom: 0.8rem;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.bull-flip-card:hover .bull-flip-hint { opacity: 0; }

/* ── BACK ── */
.bull-flip-back {
    background: #0d0d0d;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 0;
    border-color: rgba(130,130,130,0.35);
}

.bull-back-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
    pointer-events: none;
    z-index: 2;
}

.bull-back-header {
    padding: 1rem 1.2rem 0.8rem;
    border-bottom: 1px solid rgba(100,100,100,0.22);
    background: rgba(15,15,15,0.95);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.bull-back-name {
    display: block;
    font-family: var(--font-ghost);
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    color: #cccccc;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(150,150,150,0.5);
}

.bull-back-subtitle {
    display: block;
    font-family: var(--font-ghost);
    font-size: 0.635rem;
    letter-spacing: 0.18em;
    color: rgba(239, 235, 235, 0.94);
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.bull-back-stats {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.bull-back-stat {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.5rem 1.2rem;
    border-bottom: 1px solid rgba(80,80,80,0.15);
    flex: 1;
}

.bull-back-stat:last-child { border-bottom: none; }

.bull-back-key {
    font-family: var(--font-ghost);
    font-size: 0.56rem;
    letter-spacing: 0.28em;
    color: rgba(120, 120, 120, 0.85);
    text-transform: uppercase;
}

.bull-back-val {
    font-family: var(--font-ghost);
    font-size: 0.83rem;
    letter-spacing: 0.07em;
    color: rgba(241, 236, 236, 0.91);
    line-height: 1.45;
}

/* Responsive */
@media (max-width: 900px) {
    .bulls-flip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .bulls-flip-grid { grid-template-columns: 1fr; }
    .bull-flip-card { height: 260px; }
}

.bulls-flip-footer {
    padding: 1.16rem 2.32rem;
    border-top: 1px solid rgba(100,100,100,0.22);
    background: rgba(8,8,8,0.9);
}

.bulls-flip-footer-line {
    font-family: var(--font-ghost);
    font-size: 0.743rem;
    font-style: italic;
    letter-spacing: 0.15em;
    color: rgba(229, 218, 218, 0.91);
    display: block;
    text-align: center;
}

/* =============================================
   EQUINOX — VOID STAGE (Stage 1: Container)
   ============================================= */

.equinox-void-stage {
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    border-radius: 12px;
    overflow: hidden;
    background: #030305;
    border: 1px solid rgba(80, 60, 120, 0.3);
    transition: border-color 0.8s ease, box-shadow 0.8s ease;
}

.equinox-void-stage.slashed {
    border-color: rgba(140, 100, 220, 0.6);
    box-shadow: 0 0 80px rgba(100, 60, 180, 0.2), inset 0 0 60px rgba(80, 40, 160, 0.08);
}

/* Scanline — identical pattern to your other sections */
.eq-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
    pointer-events: none;
    z-index: 20;
}

/* Topbar */
.eq-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.5rem;
    background: rgba(3, 2, 8, 0.97);
    border-bottom: 1px solid rgba(80, 60, 120, 0.25);
    position: relative;
    z-index: 10;
}

.eq-topbar-label {
    font-family: var(--font-ghost);
    font-size: 0.664rem;
    letter-spacing: 0.45em;
    color: rgba(211, 195, 241, 0.93);
    text-transform: uppercase;
}

.eq-topbar-status {
    font-family: var(--font-ghost);
    font-size: 0.71rem;
    letter-spacing: 0.3em;
    color: rgba(210, 194, 248, 0.98);
    text-transform: uppercase;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.equinox-void-stage.slashed .eq-topbar-status {
    color: #b090ff;
    text-shadow: 0 0 12px rgba(150, 100, 255, 0.9);
    animation: eqStatusPulse 1.8s ease-in-out infinite;
}

@keyframes eqStatusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* The arena itself */
.eq-arena {
    position: relative;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
}

/* Background watermark */
.eq-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-ghost);
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 900;
    color: rgba(100, 70, 160, 0.04);
    letter-spacing: 0.35em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    text-transform: uppercase;
}

/* Mana zone glow — starts invisible, blooms on slash */
.eq-mana-zone {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(60, 20, 120, 0.0) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transition: background 1.2s ease;
}

.equinox-void-stage.slashed .eq-mana-zone
{
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(60, 20, 120, 0.2) 0%, rgba(30, 10, 80, 0.12) 40%, transparent 70%);
}

/* Trigger bar at bottom */
.eq-trigger-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(3, 2, 8, 0.97);
    border-top: 1px solid rgba(80, 60, 120, 0.25);
    position: relative;
    z-index: 10;
    gap: 1rem;
    flex-wrap: wrap;
}

.eq-trigger-lore {
    font-family: var(--font-ghost);
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(215, 191, 246, 0.9);
    letter-spacing: 0.08em;
    flex: 1;
}

.eq-draw-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 2rem;
    background: transparent;
    border: 1px solid rgba(120, 80, 200, 0.5);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-ghost);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.eq-draw-btn:hover {
    border-color: rgba(160, 100, 255, 0.9);
    background: rgba(100, 60, 180, 0.1);
    box-shadow: 0 0 30px rgba(120, 70, 220, 0.4);
}

.eq-draw-icon {
    font-size: 1.3rem;
    color: rgba(157, 77, 255, 0.92);
}

.eq-draw-text {
    font-size: 0.83rem;
    letter-spacing: 0.4em;
    color: rgba(195, 162, 255, 0.98);
    text-transform: uppercase;
}

/* =============================================
   EQUINOX — STAGE 2: SVG SLASH LINES
   ============================================= */

.eq-slash-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* All slash lines start invisible via dashoffset trick */
.eq-slash {
    fill: none;
    stroke: rgba(180, 130, 255, 0.0);
    stroke-width: 1.5;
    stroke-linecap: round;
    /*
      stroke-dasharray = total line length
      stroke-dashoffset = same value = line is fully "offset" = invisible
      When we animate dashoffset to 0, the line draws itself
    */
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 0.55s cubic-bezier(0.23, 1, 0.32, 1), stroke 0.3s ease;
}

/* Glow copies — same but fatter and blurred */
.eq-glow {
    stroke-width: 10;
    filter: blur(5px);
    opacity: 0;
    transition: stroke-dashoffset 0.55s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
}

/*
  TIMING — the stagger that makes it feel like
  Equinox (horizontal first, then vertical cuts through)

  Horizontal fires at 0s
  Vertical fires 0.2s later — that slight delay is
  exactly how Yami's equinox reads in the manga
*/
.eq-slash-hl { transition-delay: 0s; }
.eq-slash-hr { transition-delay: 0s; }
.eq-slash-vt { transition-delay: 0.2s; }
.eq-slash-vb { transition-delay: 0.2s; }

/* Glow copies match their parent delays, slightly behind */
.eq-slash-hl.eq-glow { transition-delay: 0.05s; }
.eq-slash-hr.eq-glow { transition-delay: 0.05s; }
.eq-slash-vt.eq-glow { transition-delay: 0.25s; }
.eq-slash-vb.eq-glow { transition-delay: 0.25s; }

/*
  SLASHED STATE — when .slashed class is added to the stage,
  all lines animate to dashoffset: 0 (fully drawn)
  and their stroke colour becomes visible
*/
.equinox-void-stage.slashed .eq-slash {
    stroke-dashoffset: 0;
    stroke: rgba(160, 100, 255, 0.85);
}

.equinox-void-stage.slashed .eq-glow {
    stroke-dashoffset: 0;
    stroke: rgba(140, 80, 255, 0.3);
    opacity: 1;
}

/*
  ORIGIN BURST — the flash at the draw point
  Starts at r=0, expands to r=40 then fades
  This is done via a CSS animation triggered by .slashed
*/
.eq-origin-burst {
    fill: none;
    stroke: rgba(200, 160, 255, 0.9);
    stroke-width: 2;
    opacity: 0;
}

.equinox-void-stage.slashed .eq-origin-burst {
    animation: originBurst 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes originBurst {
    0%   { r: 0;  opacity: 1; stroke-width: 4; }
    50%  { r: 35; opacity: 0.8; stroke-width: 2; }
    100% { r: 55; opacity: 0; stroke-width: 1; }
}

/* =============================================
   EQUINOX — STAGE 3: FRACTURE WEB
   Mukuro's spatial crack propagation
   ============================================= */

/* Base state — invisible, same dashoffset trick as main slashes */
.eq-fracture {
    fill: none;
    stroke: rgba(120, 80, 200, 0.0);
    stroke-width: 0.8;
    stroke-linecap: round;

    /*
      Fractures are shorter than the main slashes.
      dasharray: 300 covers the longest fracture line.
      Each one starts fully offset = invisible.
    */
    stroke-dasharray: 300;
    stroke-dashoffset: 300;

    /*
      They DON'T transition on the default state —
      they only animate when .slashed is active.
      This prevents them flickering on page load.
    */
    transition: none;
}

/*
  STAGGER LOGIC — this is the key Mukuro detail.

  The main cross lands at ~0.55s.
  Fractures start appearing at 0.5s (just before cross fully finishes)
  and cascade outward one by one over ~0.6s total.

  This reads as: the dimension starts cracking WHILE
  the slash is still travelling — the space can't hold.
*/
.equinox-void-stage.slashed .eq-fracture {
    stroke: rgba(110, 70, 180, 0.55);
    stroke-dashoffset: 0;
}

/* Each fracture gets its own transition with staggered delay */
.equinox-void-stage.slashed .eq-frac-1 {
    transition: stroke-dashoffset 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.45s,
    stroke 0.2s ease 0.45s;
}
.equinox-void-stage.slashed .eq-frac-2 {
    transition: stroke-dashoffset 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.52s,
    stroke 0.2s ease 0.52s;
}
.equinox-void-stage.slashed .eq-frac-3 {
    transition: stroke-dashoffset 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.58s,
    stroke 0.2s ease 0.58s;
}
.equinox-void-stage.slashed .eq-frac-4 {
    transition: stroke-dashoffset 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0.63s,
    stroke 0.2s ease 0.63s;
}
.equinox-void-stage.slashed .eq-frac-5 {
    transition: stroke-dashoffset 0.42s cubic-bezier(0.23, 1, 0.32, 1) 0.5s,
    stroke 0.2s ease 0.5s;
}
.equinox-void-stage.slashed .eq-frac-6 {
    transition: stroke-dashoffset 0.36s cubic-bezier(0.23, 1, 0.32, 1) 0.68s,
    stroke 0.2s ease 0.68s;
}
.equinox-void-stage.slashed .eq-frac-7 {
    transition: stroke-dashoffset 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.72s,
    stroke 0.2s ease 0.72s;
}
.equinox-void-stage.slashed .eq-frac-8 {
    transition: stroke-dashoffset 0.38s cubic-bezier(0.23, 1, 0.32, 1) 0.78s,
    stroke 0.2s ease 0.78s;
}

/*
  GLOW NODES — small pulsing dots at the END of each fracture.
  These simulate Mukuro's spatial web anchor points —
  where the crack terminates and energy pools.
  We fake these with CSS ::after on wrapper divs in Stage 4.
  For now the lines are enough.
*/

/*
  POST-SLASH IDLE — once everything is drawn,
  fractures breathe very faintly to stay alive
*/
.equinox-void-stage.slashed .eq-fracture {
    animation: fractureBreath 5s ease-in-out infinite 1.2s;
}

@keyframes fractureBreath {
    0%, 100% {
        stroke: rgba(110, 70, 180, 0.55);
        stroke-width: 0.8;
    }
    50% {
        stroke: rgba(140, 90, 220, 0.75);
        stroke-width: 1.1;
    }
}


/* =============================================
   EQUINOX — STAGE 4: RIFT GAP & DARK ENERGY
   The dimensional opening + Yami's void bleed
   ============================================= */

/*
  RIFT GAPS

  These sit exactly on the slash axes.
  They start at zero width/height (invisible)
  and expand to 3px on slash — simulating the
  two sides of reality pulling slightly apart.

  The cyan glow is the cold light of exposed
  dimensional boundary.
*/

.eq-rift-gap
{
    position: absolute;
    pointer-events: none;
    z-index: 6;
    /* Start invisible — zero dimension */
    background: transparent;
    transition: none;
}

/* Horizontal rift — sits on the horizontal slash axis */
.eq-rift-h
{
    /*
      Centred vertically at exactly 50% (matches SVG y=280 in 560px viewBox)
      Starts at 0 height, expands to 3px
    */
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    height: 2px;

    /* Starts collapsed to a hairline */
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.4s ease;
}

/* Vertical rift — sits on the vertical slash axis */
.eq-rift-v
{
    left: calc(50% - 1px);
    top: 0;
    bottom: 0;
    width: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.4s ease;
}

/*
  SLASHED STATE — rift gaps open
  Horizontal fires at 0.3s (just as slash finishes drawing)
  Vertical fires at 0.5s (after vertical slash finishes)
*/
.equinox-void-stage.slashed .eq-rift-h
{
    transform: scaleY(1);
    background: rgba(0, 220, 255, 0.15);
    box-shadow: 0 0 8px rgba(0, 220, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.4), 0 0 40px rgba(0, 180, 255, 0.15);
    transition: transform 0.3s ease 0.35s, background 0.3s ease 0.35s, box-shadow 0.4s ease 0.35s;
    animation: riftGapBreath 4s ease-in-out infinite 1s;
}

.equinox-void-stage.slashed .eq-rift-v
{
    transform: scaleX(1);
    background: rgba(0, 220, 255, 0.15);
    box-shadow: 0 0 8px rgba(0, 220, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.4), 0 0 40px rgba(0, 180, 255, 0.15);
    transition: transform 0.3s ease 0.55s, background 0.3s ease 0.55s, box-shadow 0.4s ease 0.55s;
    animation: riftGapBreath 4s ease-in-out infinite 1.2s;
}

/*
  The rift breathes — the dimensional boundary
  isn't stable. It pulses like a wound.
*/
@keyframes riftGapBreath
{
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 220, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.4), 0 0 40px rgba(0, 180, 255, 0.15);
        background: rgba(0, 220, 255, 0.15);
    }
    50% {
        box-shadow: 0 0 12px rgba(0, 240, 255, 1), 0 0 35px rgba(0, 220, 255, 0.6), 0 0 70px rgba(0, 200, 255, 0.25);
        background: rgba(0, 240, 255, 0.25);
    }
}

/* =============================================
   DARK ENERGY BLEED — Yami's void magic

   This is the heavy part. Not bright, not flashy.
   A radial darkness that pools at the origin and
   makes the area around the slash feel heavier,
   like gravity is pulling toward the cut.
   ============================================= */

.eq-dark-bleed
{
    position: absolute;
    /* Centred exactly on the origin point */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(ellipse at center, rgba(20, 0, 40, 0.9) 0%, rgba(15, 0, 30, 0.7) 25%, rgba(10, 0, 20, 0.4) 55%, transparent 75%);
    transition: none;
}

/*
  On slash — the dark void expands from nothing
  to a large ellipse centred on the origin.
  It's darker than the background, not lighter —
  this is Yami's cloaking: consuming light, not emitting it.
*/
.equinox-void-stage.slashed .eq-dark-bleed
{
    width: 600px;
    height: 400px;
    transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
    height 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
    animation: darkBleedPulse 6s ease-in-out infinite 1.4s;
}

@keyframes darkBleedPulse
{
    0%, 100% {
        background: radial-gradient(ellipse at center, rgba(20, 0, 40, 0.9) 0%, rgba(15, 0, 30, 0.7) 25%, rgba(10, 0, 20, 0.4) 55%, transparent 75%);
    }
    50% {
        background: radial-gradient(ellipse at center, rgba(30, 0, 60, 0.95) 0%, rgba(20, 0, 45, 0.75) 25%, rgba(12, 0, 25, 0.45) 55%, transparent 75%);
    }
}

/* =============================================
   DARK TENDRILS

   Yami's dark magic doesn't pool in a clean circle —
   it bleeds along the cut axes specifically.
   These 4 divs are dark gradient fingers that
   extend outward from centre along each arm of the cross,
   making the slash axes feel "heavier" than the quadrants.

   This is the visual difference between a sword cut
   and a dimensional tear — the tear warps the space
   around its axis.
   ============================================= */

.eq-tendril
{
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: none;
}

/* LEFT tendril — dark bleeds left along horizontal axis */
.eq-tendril-left
{
    top: 20%;
    left: 0;
    width: 50%;
    height: 60%;
    background: linear-gradient(to right, rgba(15, 0, 35, 0.7) 0%, rgba(15, 0, 35, 0.4) 40%, transparent 100%);
    transform-origin: right center;
    transform: scaleX(0);
}

/* RIGHT tendril */
.eq-tendril-right
{
    top: 20%;
    right: 0;
    width: 50%;
    height: 60%;
    background: linear-gradient(to left, rgba(15, 0, 35, 0.7) 0%, rgba(15, 0, 35, 0.4) 40%, transparent 100%);
    transform-origin: left center;
    transform: scaleX(0);
}

/* TOP tendril */
.eq-tendril-top
{
    top: 0;
    left: 20%;
    width: 60%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(15, 0, 35, 0.7) 0%, rgba(15, 0, 35, 0.4) 40%, transparent 100%);
    transform-origin: center bottom;
    transform: scaleY(0);
}

/* BOTTOM tendril */
.eq-tendril-bottom
{
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 50%;
    background: linear-gradient(to top, rgba(15, 0, 35, 0.7) 0%, rgba(15, 0, 35, 0.4) 40%, transparent 100%);
    transform-origin: center top;
    transform: scaleY(0);
}

/*
  Tendrils extend outward after the slash —
  dark energy travelling along the cut path.
  They stagger: horizontal first, then vertical.
*/
.equinox-void-stage.slashed .eq-tendril-left,
.equinox-void-stage.slashed .eq-tendril-right
{
    opacity: 1;
    transform: scaleX(1);
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.2s, opacity 0.4s ease 0.2s;
}

.equinox-void-stage.slashed .eq-tendril-top,
.equinox-void-stage.slashed .eq-tendril-bottom
{
    opacity: 1;
    transform: scaleY(1);
    transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.4s, opacity 0.4s ease 0.4s;
}

/* =============================================
   EQUINOX — STAGE 5: QUADRANT STATS
   Data revealed through the dimensional rift
   ============================================= */

/*
  Base quad positioning.

  Each quad occupies roughly its own quadrant —
  offset inward from the slash axes by ~8% so
  stats never sit on top of the cyan rift line.

  All quads start invisible and slightly displaced
  toward the origin — they phase in by moving
  outward (away from centre) as they appear.
  This reads as the slash "pushing" the data
  into its quadrant.
*/
.eq-quad {
    position: absolute;
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* TOP-LEFT — anchored to top-left quadrant */
.eq-quad-tl {
    top: 8%;
    left: 4%;
    width: 40%;
    /* Starts displaced toward centre, phases out-left */
    transform: translate(12px, 12px);
}

/* TOP-RIGHT — anchored to top-right quadrant */
.eq-quad-tr {
    top: 8%;
    right: 4%;
    width: 40%;
    text-align: right;
    align-items: flex-end;
    /* Starts displaced toward centre, phases out-right */
    transform: translate(-12px, 12px);
}

/* BOTTOM-LEFT — anchored to bottom-left quadrant */
.eq-quad-bl {
    bottom: 22%;
    left: 4%;
    width: 40%;
    transform: translate(12px, -12px);
}

/* BOTTOM-RIGHT — anchored to bottom-right quadrant */
.eq-quad-br {
    bottom: 22%;
    right: 4%;
    width: 40%;
    text-align: right;
    align-items: flex-end;
    transform: translate(-12px, -12px);
}

/*
  SLASHED STATE — quads phase in one by one.

  Stagger order: TL → TR → BL → BR
  Starting at 0.6s (after slash + rift gap open).
  Each quadrant is 0.15s apart — fast enough to
  feel like rapid revelation, slow enough to read.
*/
.equinox-void-stage.slashed .eq-quad {
    opacity: 1;
    pointer-events: all;
    transform: translate(0, 0);
}

.equinox-void-stage.slashed .eq-quad-tl {
    transition: opacity 0.5s ease 0.6s,
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.6s;
}
.equinox-void-stage.slashed .eq-quad-tr {
    transition: opacity 0.5s ease 0.75s,
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.75s;
}
.equinox-void-stage.slashed .eq-quad-bl {
    transition: opacity 0.5s ease 0.9s,
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.9s;
}
.equinox-void-stage.slashed .eq-quad-br {
    transition: opacity 0.5s ease 1.05s,
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 1.05s;
}

/* =============================================
   STAT BLOCK TYPOGRAPHY
   ============================================= */

.eq-stat-block
{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.eq-stat-key
{
    font-family: var(--font-ghost);
    font-size: 0.62rem;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(0, 200, 255, 0.76);
    display: block;
}

.eq-stat-val {
    font-family: var(--font-ghost);
    font-size: 0.91rem;
    color: rgb(226, 210, 255);
    letter-spacing: 0.08em;
    line-height: 1.5;
    display: block;
}

/*
  The ∞ infinity value gets special treatment —
  it's the most important data point in the entire
  section. Larger, brighter, with a subtle glow.
  This is the "between dimensions" detail that
  defines what Equinox actually is.
*/
.eq-infinity {
    font-size: 1.165rem;
    color: rgba(0, 220, 255, 0.95);
    text-shadow: 0 0 12px rgba(0, 200, 255, 0.7), 0 0 30px rgba(0, 180, 255, 0.3);
    animation: infinityPulse 4s ease-in-out infinite 1.5s;
}

@keyframes infinityPulse
{
    0%, 100% {
        color: rgba(0, 220, 255, 0.95);
        text-shadow: 0 0 12px rgba(0, 200, 255, 0.7), 0 0 30px rgba(0, 180, 255, 0.3);
    }
    50% {
        color: rgba(100, 240, 255, 1);
        text-shadow: 0 0 20px rgba(0, 220, 255, 1), 0 0 50px rgba(0, 200, 255, 0.5);
    }
}


@media (max-width: 700px) {

    /* Shrink arena on mobile — just show the slash */
    .eq-arena {
        min-height: 320px;
    }

    /* Hide absolute-positioned quads inside the arena */
    .eq-quad {
        display: none;
    }

    /* Show a mobile stat grid BELOW the arena */
    .eq-mobile-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgba(80, 60, 120, 0.3);
        opacity: 0;
        transition: opacity 0.6s ease 0.8s;
    }

    .equinox-void-stage.slashed .eq-mobile-stats {
        opacity: 1;
    }

    .eq-mobile-stat-cell {
        padding: 1rem 1.2rem;
        border-right: 1px solid rgba(80, 60, 120, 0.2);
        border-bottom: 1px solid rgba(80, 60, 120, 0.2);
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .eq-mobile-stat-cell:nth-child(even) {
        border-right: none;
    }

    .eq-mobile-stat-cell:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Watermark too big on mobile */
    .eq-watermark
    {
        font-size: 3rem;
        letter-spacing: 0.2em;
    }

    /* Trigger bar stacks on mobile */
    .eq-trigger-bar
    {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        padding: 1.2rem 1rem;
    }

    .eq-trigger-lore
    {
        text-align: center;
    }
}

@media (max-width: 480px)
{
    .eq-arena {
        min-height: 240px;
    }

    /* Single column on very small screens */
    .eq-mobile-stats {
        grid-template-columns: 1fr !important;
    }

    .eq-mobile-stat-cell:nth-child(even) {
        border-right: none;
    }
}

/* ══════════════════════════════════════════
   REASONS CARD — Black Clover tint
   ══════════════════════════════════════════ */
.black-clover-theme .bc-reasons-card
{
    border-color: #666666;
    background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(20,20,20,0.9) 100%);
    box-shadow: 0 0 40px rgba(100,100,100,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}

.black-clover-theme .bc-about-list li
{
    border-left: 2px solid rgba(130,130,130,0.4);
    background: rgba(80,80,80,0.04);
    color: rgba(200,200,200,0.85);
}

.black-clover-theme .bc-about-list li:hover
{
    border-left-color: #999999;
    background: rgba(100,100,100,0.09);
    color: rgba(230,230,230,0.95);
}

.black-clover-theme .bc-about-list li i
{
    color: #aaaaaa;
    text-shadow: 0 0 10px rgba(150,150,150,0.6);
}

/* ══════════════════════════════════════════
   RECORDING MODE — Black Clover
   ══════════════════════════════════════════ */
.recording-mode .black-clover-theme .panel-glow-bar {
    animation: none !important;
    background-position: 0% 50% !important;
}

/* Responsive — Bulls grid */
@media (max-width: 750px) {
    .bulls-grid { grid-template-columns: 1fr; }
    .bull-card { border-right: none; }
}