/* =====================================================================
   ARCADE THEME LAYER
   Neon / CRT styling layered on top of styles.css.
   Loaded after styles.css so these rules win on equal specificity.
   ===================================================================== */

:root {
    --neon-cyan: #00e1ff;
    --neon-red: #ff2d2d;
    --neon-gold: #ffcc00;
    --neon-green: #51ff90;
    --arcade-ui: 'Orbitron', sans-serif;
}

body {
    font-family: 'Rajdhani', 'Arial', sans-serif;
    background:
        radial-gradient(1200px 600px at 20% -5%, rgba(0,225,255,0.10), transparent 55%),
        radial-gradient(1000px 600px at 85% 110%, rgba(255,45,45,0.10), transparent 55%),
        linear-gradient(180deg, #07070c 0%, #04040a 60%, #020205 100%);
    background-attachment: fixed;
}

/* CRT scanlines + flicker overlay (non-interactive) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.18) 0px,
        rgba(0,0,0,0.18) 1px,
        transparent 2px,
        transparent 3px
    );
    mix-blend-mode: multiply;
    opacity: 0.5;
    animation: crtFlicker 4s infinite steps(60);
}
@keyframes crtFlicker {
    0%, 97%, 100% { opacity: 0.5; }
    98% { opacity: 0.36; }
    99% { opacity: 0.6; }
}

/* Subtle vignette */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    box-shadow: inset 0 0 240px rgba(0,0,0,0.85);
}

/* ---- Header / title ---- */
.game-header {
    border-color: rgba(0,225,255,0.5);
    box-shadow: 0 0 22px rgba(0,225,255,0.18), inset 0 0 18px rgba(0,225,255,0.06);
    background: linear-gradient(135deg, rgba(10,12,22,0.95), rgba(6,6,12,0.95));
}
.game-header h1 {
    font-family: 'Press Start 2P', 'Orbitron', sans-serif;
    font-size: 1.2em;
    line-height: 1.45;
    color: #fff;
    letter-spacing: 1px;
    text-shadow:
        0 0 6px var(--neon-red),
        0 0 14px var(--neon-red),
        0 0 26px rgba(255,45,45,0.6);
    animation: titlePulse 2.6s ease-in-out infinite;
}
@keyframes titlePulse {
    0%, 100% { text-shadow: 0 0 6px var(--neon-red), 0 0 14px var(--neon-red), 0 0 26px rgba(255,45,45,0.55); }
    50% { text-shadow: 0 0 10px var(--neon-red), 0 0 22px var(--neon-red), 0 0 40px rgba(255,45,45,0.85); }
}

/* ---- UI typography ---- */
.player-name, .stat-value, .stat-label, .card-type, .card-energy,
#turnIndicator, .hand-label, .hand-counter, .difficulty-control,
.modal-content h2, .btn {
    font-family: var(--arcade-ui);
}
.stat-label { letter-spacing: 1px; text-transform: uppercase; }
.player-name { letter-spacing: 1.5px; text-transform: uppercase; }

.opponent-area .player-name { color: var(--neon-red); text-shadow: 0 0 10px rgba(255,45,45,0.6); }
.player-area .player-name { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0,225,255,0.6); }

.stat-box {
    background: rgba(10,14,22,0.8);
    border: 1px solid rgba(0,225,255,0.25);
    box-shadow: inset 0 0 10px rgba(0,225,255,0.06);
}

/* ---- Octagon area glow ---- */
.opponent-area { box-shadow: 0 0 26px rgba(255,45,45,0.18), inset 0 0 40px rgba(255,45,45,0.04); }
.player-area { box-shadow: 0 0 26px rgba(0,225,255,0.18), inset 0 0 40px rgba(0,225,255,0.04); }

/* ---- Turn indicator: pulsing neon ---- */
#turnIndicator {
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 8px var(--neon-cyan), 0 0 18px rgba(0,225,255,0.6);
    animation: turnPulse 1.8s ease-in-out infinite;
}

/* ---- Position badge: one per fighter box, shows THAT fighter's ground state and
   persists regardless of whose turn it is. Lives OUTSIDE #...FighterZone so
   renderFighter()'s innerHTML wipe can't clear it. ---- */
.position-badge {
    width: 100%;
    text-align: center;
    font-family: var(--arcade-ui);
    font-size: 0.72em;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--neon-gold);
    text-shadow: 0 0 6px rgba(255,204,0,0.5);
}

/* ---- Fighter signature ability line (inside the active fighter card + select modal) ---- */
.fighter-signature {
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.12);
    /* Description text uses the readable body font (Rajdhani), NOT Orbitron — in Orbitron
       the parentheses render as thin vertical strokes that read as "l" from a distance. */
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-size: 0.65em;
    line-height: 1.35;
    text-align: center;
    color: #d6deea;
}
.fighter-signature .sig-name {
    /* The ability NAME has no parentheses, so it keeps the arcade (Orbitron) title look. */
    font-family: var(--arcade-ui);
    color: var(--neon-gold);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255,204,0,0.4);
    white-space: nowrap;
}
/* The STYLE trait line (type-matchup passive) — same layout as the signature, but a cyan accent so the
   two ability lines read as distinct (gold = unique signature, cyan = archetype trait). */
.fighter-style {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed rgba(255,255,255,0.10);
    font-family: 'Rajdhani', 'Arial', sans-serif;
    font-size: 0.62em;
    line-height: 1.3;
    text-align: center;
    color: #c2ccd9;
}
.fighter-style .sig-name {
    font-family: var(--arcade-ui);
    color: var(--neon-cyan);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0,225,255,0.4);
    white-space: nowrap;
}
@keyframes turnPulse {
    0%, 100% { text-shadow: 0 0 8px var(--neon-cyan), 0 0 18px rgba(0,225,255,0.5); }
    50% { text-shadow: 0 0 14px var(--neon-cyan), 0 0 30px rgba(0,225,255,0.9); }
}

/* ---- Buttons: neon with shine sweep ---- */
.btn {
    position: relative;
    overflow: hidden;
    letter-spacing: 1.5px;
    border-radius: 4px;
}
.btn-primary {
    background: linear-gradient(135deg, rgba(0,225,255,0.18), rgba(0,80,100,0.25));
    border-color: var(--neon-cyan);
    color: #eaffff;
    text-shadow: 0 0 6px rgba(0,225,255,0.7);
    box-shadow: 0 0 12px rgba(0,225,255,0.3), inset 0 0 10px rgba(0,225,255,0.12);
}
.btn-primary:hover { box-shadow: 0 0 22px rgba(0,225,255,0.6), inset 0 0 14px rgba(0,225,255,0.2); }
.btn::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
}
.btn:hover::after { left: 140%; }

/* ---- Cards: neon edges + shine sweep ---- */
.card { border-radius: 7px; }
.card::after {
    content: '';
    position: absolute;
    top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.card:hover::after { left: 150%; }
.card-header { font-family: var(--arcade-ui); letter-spacing: 0.6px; }
.card-energy {
    font-weight: 900;
    box-shadow: 0 0 10px rgba(0,225,255,0.5);
    text-shadow: 0 0 6px rgba(0,225,255,0.8);
}
.card.technique-card { box-shadow: 0 0 14px rgba(255,80,80,0.12); }
.card.fighter-card { box-shadow: 0 0 14px rgba(108,158,255,0.14); }
.card.defense-card { box-shadow: 0 0 14px rgba(255,204,0,0.14); }
.card.corner-card { box-shadow: 0 0 14px rgba(81,255,144,0.14); }

/* ---- Health & stamina bars: energized neon ---- */
.health-bar-bg, .stamina-bar-bg {
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
    background: #0a0a10;
}
.opponent-area .health-bar-fill {
    background: linear-gradient(90deg, #ff2d2d, #b30000);
    box-shadow: 0 0 12px rgba(255,45,45,0.7);
}
.player-area .health-bar-fill {
    background: linear-gradient(90deg, #00e1ff, #0090b0);
    color: #001016;
    box-shadow: 0 0 12px rgba(0,225,255,0.7);
}
.stamina-bar-fill {
    background: linear-gradient(90deg, #51ff90, #ffd700, #ff2d2d);
    box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

/* ---- Active fighter card pop ---- */
.fighter-zone .card.fighter-card { box-shadow: 0 0 22px rgba(0,225,255,0.25); }
.opponent-area .fighter-zone .card.fighter-card { box-shadow: 0 0 22px rgba(255,45,45,0.25); }

/* ---- Active fighter card: full corner theme — player all-blue, opponent all-red (v4.4) ---- */
.fighter-card.player-card {
    border-color: var(--neon-cyan);
    background: linear-gradient(180deg, rgba(0,42,58,0.96), rgba(0,20,30,0.96));
}
.fighter-card.player-card .card-header,
.fighter-card.player-card .card-type,
.fighter-card.player-card .card-stat-label,
.fighter-card.player-card .card-stat-value {
    color: var(--neon-cyan);
    text-shadow: 0 0 6px rgba(0,225,255,0.35);
}
.fighter-card.opponent-card {
    border-color: var(--neon-red);
    background: linear-gradient(180deg, rgba(58,8,8,0.96), rgba(28,4,4,0.96));
}
.fighter-card.opponent-card .card-header,
.fighter-card.opponent-card .card-type,
.fighter-card.opponent-card .card-stat-label,
.fighter-card.opponent-card .card-stat-value {
    color: var(--neon-red);
    text-shadow: 0 0 6px rgba(255,45,45,0.35);
}
/* Temporary Intense-Training bonus stays gold so it reads as a buff */
.fighter-card .stat-bonus { color: var(--neon-gold); font-weight: 700; }

/* ---- Empty slot: dashed neon ---- */
.empty-slot {
    border-color: rgba(0,225,255,0.25);
    color: rgba(0,225,255,0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: inset 0 0 24px rgba(0,225,255,0.05);
}
.opponent-area .empty-slot {
    border-color: rgba(255,45,45,0.25);
    color: rgba(255,45,45,0.4);
    box-shadow: inset 0 0 24px rgba(255,45,45,0.05);
}

/* ---- Difficulty selector ---- */
.difficulty-control select {
    text-shadow: 0 0 6px rgba(0,225,255,0.6);
    box-shadow: 0 0 8px rgba(0,225,255,0.2);
}

/* ---- Modal pop-in ---- */
.modal.active .modal-content {
    animation: modalPop 0.28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes modalPop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.modal-content h2 { letter-spacing: 1.5px; }

/* ---- Layout: center the YOU/OPP heading group (name · bar · energy) horizontally ---- */
.area-header { justify-content: center; gap: 8px; }
.area-header .player-name { min-width: 0; white-space: nowrap; text-align: center; }
.area-header .health-bar { flex: 0 1 220px; max-width: 220px; margin: 0; }
.area-header .stat-box { margin-left: 0; }

/* ---- Hand/deck/roster counters — one per fighter box, above the active card.
   Lives OUTSIDE #...FighterZone so renderFighter()'s innerHTML wipe can't clear it. ---- */
.fighter-counts {
    width: 100%;
    text-align: center;
    font-family: var(--arcade-ui);
    font-size: 0.72em;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.fighter-counts.count-opp { color: rgba(255,45,45,0.9); }
.fighter-counts.count-you { color: rgba(0,225,255,0.9); }
.fighter-counts b { color: #fff; font-weight: 700; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    body::before,
    .game-header h1,
    #turnIndicator,
    .modal.active .modal-content { animation: none; }
}

/* ===== Roster ("player cards") zone + 2-row hand (v4.1) ===== */
.roster-zone {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 6px 0;
    min-height: 10px;
}
.roster-card {
    width: 120px;
    border: 1px solid rgba(0,225,255,0.3);
    border-radius: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(16,18,28,0.95), rgba(10,10,16,0.95));
    font-family: var(--arcade-ui);
}
.opponent-area .roster-card { border-color: rgba(255,45,45,0.3); }
.roster-card .roster-name { font-size: 0.78em; font-weight: 700; color: #fff; }
.roster-card .roster-stats { font-size: 0.66em; color: #9bd; margin-top: 2px; }
.roster-card .roster-hp { font-size: 0.66em; color: #8c8; }
.roster-card.deployable {
    cursor: pointer;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 12px rgba(0,225,255,0.4);
    animation: turnPulse 1.6s ease-in-out infinite;
}
.roster-card.deployable:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(0,225,255,0.7); }
.roster-card.facedown {
    width: 44px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4em;
    background: repeating-linear-gradient(45deg, #1a0a0a, #1a0a0a 6px, #240e0e 6px, #240e0e 12px);
}

/* Hand: up to 12 cards in 2 rows of 6 */
.hand-area {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-content: start;
}
.hand-area .card { width: auto; }

/* =====================================================================
   CARD CATEGORY COLOR THEME — one neon hue per action type so the hand
   reads at a glance. Each category sets a `--cat` color + a tinted body;
   border / label / ability text / hover / glow all derive from --cat.
   Loaded after styles.css, so these win over the legacy red technique-card.
   ===================================================================== */
.card.cat-strike     { --cat: #ff5a5a; background: linear-gradient(180deg, #2a1012 0%, #160a0b 65%, #0d0708 100%); } /* striking */
.card.cat-grapple    { --cat: #ff9d3c; background: linear-gradient(180deg, #2a1c0c 0%, #18110a 65%, #0d0906 100%); } /* takedowns / clinch */
.card.cat-submission { --cat: #bd7bff; background: linear-gradient(180deg, #1a0e2a 0%, #130a20 65%, #0c0716 100%); } /* submissions */
.card.cat-escape     { --cat: #3bd6c4; background: linear-gradient(180deg, #0d2826 0%, #0a1b1a 65%, #06100f 100%); } /* escapes */
.card.cat-reaction   { --cat: #ffcf3a; background: linear-gradient(180deg, #2a2410 0%, #18150a 65%, #0d0b06 100%); } /* reactions / defense */
.card.cat-corner     { --cat: #5cff97; background: linear-gradient(180deg, #0f2a18 0%, #0a1b10 65%, #06100a 100%); } /* corner */

.card.cat-strike, .card.cat-grapple, .card.cat-submission,
.card.cat-escape, .card.cat-reaction, .card.cat-corner {
    border-color: var(--cat);
    box-shadow: 0 0 12px -2px var(--cat);
}
.card.cat-strike .card-type,    .card.cat-grapple .card-type,
.card.cat-submission .card-type,.card.cat-escape .card-type,
.card.cat-reaction .card-type,  .card.cat-corner .card-type,
.card.cat-strike .card-ability, .card.cat-grapple .card-ability,
.card.cat-submission .card-ability,.card.cat-escape .card-ability,
.card.cat-reaction .card-ability,  .card.cat-corner .card-ability {
    color: var(--cat);
}
.card.cat-strike .card-header,    .card.cat-grapple .card-header,
.card.cat-submission .card-header,.card.cat-escape .card-header,
.card.cat-reaction .card-header,  .card.cat-corner .card-header {
    text-shadow: 0 0 8px var(--cat);
}
.card.cat-strike:hover, .card.cat-grapple:hover, .card.cat-submission:hover,
.card.cat-escape:hover, .card.cat-reaction:hover, .card.cat-corner:hover {
    border-color: var(--cat);
    box-shadow: 0 10px 26px -4px var(--cat);
}
/* Glow on a playable card pulses in its category color (overrides the old per-class glows) */
.card.cat-strike.glow, .card.cat-grapple.glow, .card.cat-submission.glow,
.card.cat-escape.glow, .card.cat-reaction.glow, .card.cat-corner.glow {
    animation: catGlow 1.15s ease-in-out infinite;
}
@keyframes catGlow {
    0%, 100% { box-shadow: 0 0 9px -1px var(--cat); }
    50%      { box-shadow: 0 0 20px 1px var(--cat); }
}
@media (prefers-reduced-motion: reduce) {
    .card.cat-strike.glow, .card.cat-grapple.glow, .card.cat-submission.glow,
    .card.cat-escape.glow, .card.cat-reaction.glow, .card.cat-corner.glow { animation: none; }
}

@media screen and (max-width: 768px) {
    .hand-area { grid-template-columns: repeat(3, 1fr); }
    .roster-card { width: 96px; }

    /* Tighten vertical rhythm so the single mobile column isn't endless */
    .roster-zone { margin: 4px 0; }
    .fighter-counts { font-size: 0.66em; margin-bottom: 4px; }
    .position-badge { font-size: 0.66em; margin-bottom: 4px; }
}