/* ========================================
   暗黑东方神秘主义 - 文字大战
    Dark Oriental Mysticism - Text Fight
   ======================================== */

:root {
    /* Core Colors - Bright Eye-Friendly */
    --ink-black: #fefefe;
    --deep-charcoal: #f5f5f5;
    --dark-slate: #e8e8e8;
    --warm-black: #fafafa;

    /* Accent Colors - Soft Vermillion & Gold */
    --vermillion: #d4583b;
    --vermillion-dark: #b8432a;
    --gold: #d4a84b;
    --gold-light: #e8c065;
    --gold-dark: #b8923d;

    /* Five Elements Colors - Brighter */
    --wood: #5a9c69;
    --fire: #e74c3c;
    --earth: #a08060;
    --metal: #8a8a8a;
    --water: #4a80a0;

    /* Text Colors */
    --text-primary: #2d2d2d;
    --text-secondary: #5a5a5a;
    --text-muted: #8a8a8a;

    /* UI Colors */
    --panel-bg: rgba(255, 255, 255, 0.95);
    --panel-border: rgba(180, 150, 80, 0.4);
    --input-bg: rgba(250, 250, 250, 0.9);

    /* HP Bar */
    --hp-high: #5a9c69;
    --hp-medium: #d4a84b;
    --hp-low: #e74c3c;

    /* Ultimate Bar */
    --ult-base: #c0c0c0;
    --ult-ready: #d4a84b;
    --ult-active: linear-gradient(90deg, #d4583b, #e8c065);

    /* Typography */
    --font-display: 'Songti SC', 'STSong', serif;
    --font-title: Georgia, 'Songti SC', 'STSong', serif;
    --font-body: Georgia, 'Songti SC', 'STSong', serif;
    --font-mono: 'Courier New', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background-color: var(--ink-black);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Background Layers
   ======================================== */

.bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.ink-wash-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(212, 88, 59, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(212, 168, 75, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(250, 248, 240, 0.5) 0%, #fafafa 100%);
    animation: inkFlow 20s ease-in-out infinite;
}

@keyframes inkFlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.taiji-pattern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vmin;
    height: 60vmin;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='none' stroke='%23c9a227' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='50' r='35' fill='none' stroke='%23c9a227' stroke-width='0.3'/%3E%3Cpath d='M50 2 A48 48 0 0 1 50 98 A24 24 0 0 0 50 50 A24 24 0 0 1 50 2' fill='%23c9a227' opacity='0.3'/%3E%3Cpath d='M50 98 A48 48 0 0 1 50 2 A24 24 0 0 0 50 50 A24 24 0 0 1 50 98' fill='%23c23a2b' opacity='0.3'/%3E%3Ccircle cx='50' cy='26' r='4' fill='%23c9a227'/%3E%3Ccircle cx='50' cy='74' r='4' fill='%23c23a2b'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: taijiRotate 60s linear infinite;
}

@keyframes taijiRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
}

/* ========================================
   Game Container
   ======================================== */

.game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.hidden {
    display: none !important;
}

/* ========================================
   Setup Screen - Minimal
   ======================================== */

#setup-screen {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    animation: fadeInUp 0.8s ease-out;
    padding: 2rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.setup-title {
    font-family: var(--font-title);
    font-size: 3.5rem;
    font-weight: 200;
    letter-spacing: 0.35em;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    user-select: none;
}

/* Player Inputs */
.setup-players {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.setup-player {
    flex: 1;
}

.setup-player input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(45, 45, 45, 0.25);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-align: center;
    padding: 0.5rem 0.25rem;
    transition: border-color 0.3s ease;
    outline: none;
}

.setup-player input::placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
    opacity: 0.5;
}

.setup-player input:focus {
    border-color: var(--text-primary);
}

.setup-vs {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 300;
    letter-spacing: 0.1em;
    flex-shrink: 0;
    opacity: 0.4;
}

/* Start Button */
#start-btn {
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    padding: 0.85rem 2.5rem;
    cursor: pointer;
    transition: all 0.35s ease;
}

#start-btn:hover {
    background: var(--text-primary);
    color: var(--ink-black);
}

#start-btn:active {
    transform: scale(0.97);
}

/* Language Toggle */
#lang-toggle {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.7rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    transition: color 0.3s ease;
    opacity: 0.5;
}

#lang-toggle:hover {
    color: var(--text-primary);
    opacity: 1;
}

/* Primary Button */
.primary-btn {
    position: relative;
    background: linear-gradient(135deg, var(--vermillion-dark), var(--vermillion));
    border: none;
    color: #fff;
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: var(--space-sm) var(--space-xl);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-normal);
    border-radius: 4px;
}

.primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: var(--transition-slow);
}

.primary-btn:hover::before {
    left: 100%;
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 5px 20px rgba(194, 58, 43, 0.4),
        0 0 30px rgba(194, 58, 43, 0.2);
}

.primary-btn:active {
    transform: translateY(0);
}

/* Arena Header */
.arena-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(180deg, rgba(250, 248, 240, 0.95), transparent);
    z-index: 100;
    transition: opacity 0.5s ease;
}

#arena-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.5s ease-out;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Overhead HUD (follows fighter) */
.fighter-hud {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    width: 100%;
}

.fighter-hud-bar {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(180,150,80,0.4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.fighter-hud-bar.hp { height: 8px; }
.fighter-hud-bar.ult { height: 4px; border-color: rgba(180,150,80,0.2); }

.fighter-hud-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #2ecc71, #27ae60);
    border-radius: 3px;
    transition: width 0.2s ease, background 0.3s ease;
}

.ult-fill {
    background: var(--ult-base);
}

.ult-fill.ready {
    background: var(--ult-ready);
    box-shadow: 0 0 8px var(--gold);
    animation: ultPulse 0.8s ease-in-out infinite;
}
.fighter-hud-fill.low { background: linear-gradient(90deg, #e74c3c, #c0392b); }
.fighter-hud-fill.mid { background: linear-gradient(90deg, #f39c12, #e67e22); }

.fighter-hud-hp {
    font-size: 10px;
    color: var(--parchment);
    min-width: 2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Elemental Auras */
.aura-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
    animation: auraPulse 3s ease-in-out infinite;
}

.fighter[data-element="fire"] .aura-glow { background: radial-gradient(circle, var(--fire) 0%, transparent 70%); }
.fighter[data-element="water"] .aura-glow { background: radial-gradient(circle, var(--water) 0%, transparent 70%); }
.fighter[data-element="wood"] .aura-glow { background: radial-gradient(circle, var(--wood) 0%, transparent 70%); }
.fighter[data-element="metal"] .aura-glow { background: radial-gradient(circle, var(--metal) 0%, transparent 70%); }
.fighter[data-element="earth"] .aura-glow { background: radial-gradient(circle, var(--earth) 0%, transparent 70%); }

@keyframes auraPulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* Ultimate Active State - Camera Effects */
.ultimate-active #arena-container {
    transform: scale(1.1);
}

.ultimate-active .arena-header,
.ultimate-active .combat-log {
    opacity: 0.2;
}

.fighter-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    min-width: 100px;
}

.badge-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text-primary);
}

.badge-element {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.match-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.divider-ornament {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--panel-border), transparent);
}

.vs-text {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--vermillion);
    text-shadow: 0 0 20px rgba(194, 58, 43, 0.5);
    animation: vsGlow 1s ease-in-out infinite alternate;
}

@keyframes vsGlow {
    from { text-shadow: 0 0 20px rgba(194, 58, 43, 0.3); }
    to { text-shadow: 0 0 30px rgba(194, 58, 43, 0.6); }
}

/* Battlefield */
.arena-battlefield {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
}

.arena-battlefield::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(180, 150, 80, 0.06) 0%, transparent 80%);
    border: 1px solid rgba(180, 150, 80, 0.35);
    border-radius: 4px;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.08), 0 0 20px rgba(180,150,80,0.05);
    pointer-events: none;
    z-index: 0;
}

/* Fighter Container */
.fighter-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 80px;
    width: auto;
    height: 150px;
    padding: 0 8px 20px;
    transition: transform 0.1s linear;
    z-index: 10;
    pointer-events: none;
}

.fighter-hud {
    position: absolute;
    top: -45px;
    width: 180px;
    text-align: center;
    z-index: 10;
}

.fighter-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Status Bars */
.status-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hp-bar-wrapper,
.ult-bar-wrapper {
    position: relative;
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--panel-border);
    overflow: hidden;
}

.hp-bar-wrapper {
    height: 14px;
}

.hp-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--hp-high), #5a9c69);
    transition: width 0.3s ease-out;
    position: relative;
}

.hp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
}

.hp-bar-fill.medium {
    background: linear-gradient(90deg, var(--hp-medium), #d4b42d);
}

.hp-bar-fill.low {
    background: linear-gradient(90deg, var(--hp-low), #d43d2b);
    animation: hpLowPulse 0.5s ease-in-out infinite;
}

@keyframes hpLowPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.fighter-hud-bar.hp { position: relative; }

.hp-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.7rem;
font-weight: 700;
color: #fff;
text-shadow: 0 0 4px #000, 1px 1px 0 #000, -1px -1px 0 #000;
white-space: nowrap;
pointer-events: none;
z-index: 5;
}

.stats-panel {
position: absolute;
top: -10px;
left: 110%;
background: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.75rem;
color: #ecf0f1;
z-index: 200;
min-width: 120px;
backdrop-filter: blur(8px);
pointer-events: none;
}
.stats-panel.hidden { display: none; }
.stats-panel-title {
font-size: 0.9rem;
font-weight: 900;
color: var(--gold);
margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.15);
padding-bottom: 3px;
}
.stats-panel-body div { line-height: 1.6; }
.stats-skill-main { color: #f1c40f; font-weight: 700; margin-top: 4px; }
.stats-skill-sub { color: #bdc3c7; font-size: 0.65rem; }
#container-b .stats-panel { left: auto; right: 110%; }

.mobile-mode .fighter-container { }
.mobile-mode .fighter-hud { transform: scale(0.85); }
.mobile-mode .stats-panel { font-size: 0.65rem; min-width: 90px; padding: 5px 8px; }
.mobile-mode .damage-text { font-size: 0.8rem !important; }
.mobile-mode .skill-popup { font-size: 1rem !important; }

.ult-bar-wrapper {
    height: 6px;
    border-radius: 3px;
}

.ult-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--ult-base);
    transition: width 0.3s ease-out;
}

.ult-bar-fill.ready {
    background: var(--ult-ready);
    box-shadow: 0 0 10px var(--gold);
    animation: ultPulse 0.8s ease-in-out infinite;
}

@keyframes ultPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.skill-display {
    margin-top: var(--space-xs);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Fighter Character */
.fighter {
    position: relative;
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    text-shadow:
        0 0 0 #000, 1px 1px 0 rgba(0,0,0,0.6), -1px -1px 0 rgba(0,0,0,0.6),
        1px -1px 0 rgba(0,0,0,0.6), -1px 1px 0 rgba(0,0,0,0.6),
        0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.1s ease-out;
    z-index: 5;
}

.fighter-char {
    display: inline-block;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.fighter-shadow {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 15px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), transparent 70%);
    z-index: 1;
}

/* Combat Log */
.combat-log {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    max-height: 80px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: var(--space-sm);
    font-size: 0.8rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) transparent;
}

.log-entry {
    padding: 2px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    animation: logFadeIn 0.3s ease-out;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry.system {
    color: var(--text-muted);
    font-style: italic;
}

.log-entry.damage {
    color: var(--vermillion);
}

.log-entry.critical {
    color: var(--gold-light);
    font-weight: bold;
}

.log-entry.blocked {
    color: var(--water);
}

@keyframes logFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   Game Over Screen
   ======================================== */

#game-over-screen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 248, 240, 0.95);
    z-index: 100;
    animation: fadeIn 0.5s ease-out;
}

.result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.result-frame {
    position: relative;
    padding: var(--space-xl) calc(var(--space-xl) * 2);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
}

.corner-decoration {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--gold);
    border-style: solid;
}

.corner-decoration.tl {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.corner-decoration.tr {
    top: -1px;
    right: -1px;
    border-width: 2px 2px 0 0;
}

.corner-decoration.bl {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 2px 2px;
}

.corner-decoration.br {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

.result-content {
    text-align: center;
}

.winner-announcement {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(201, 162, 39, 0.5);
    margin-bottom: var(--space-md);
    animation: winnerPulse 2s ease-in-out infinite;
}

@keyframes winnerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.result-details {
    font-size: 1rem;
    color: var(--text-secondary);
}

/* ========================================
   Combat Effects
   ======================================== */

/* Damage Text */
.damage-text {
    position: absolute;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--vermillion);
    text-shadow: 0 0 8px currentColor, 2px 2px 0 rgba(0,0,0,0.7);
    animation: damageFloat 1s cubic-bezier(0.22,1,0.36,1) forwards;
    white-space: nowrap;
    z-index: 190;
}

.damage-text.critical {
    color: var(--gold-light);
    text-shadow: 0 0 20px var(--gold), 0 0 40px var(--gold), 2px 2px 0 rgba(0,0,0,0.8);
}

@keyframes damageFloat {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(var(--dr,0deg)); }
    15%  { opacity: 1; transform: translate(-50%,-70%) scale(1.3) rotate(calc(var(--dr,0deg)*-0.5)); }
    50%  { opacity: 1; transform: translate(-50%,-90%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%,-130%) scale(0.9); }
}

/* Skill Popup */
.skill-popup {
    position: absolute;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 900;
    white-space: nowrap;
    z-index: 180;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    animation: skillPopupV3 4s cubic-bezier(0.22,1,0.36,1) forwards;
    letter-spacing: 0.05em;
}

@keyframes skillPopupV3 {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(var(--rot,-8deg)); }
    8%   { opacity: 1; transform: translate(-50%,-60%) scale(1.2) rotate(calc(var(--rot,-8deg) * -0.3)); }
    20%  { opacity: 1; transform: translate(-50%,-80%) scale(1.05) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%,-140%) scale(0.95) rotate(0deg); }
}

/* Projectile */
.projectile {
    position: absolute;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--gold-light);
    text-shadow:
        0 0 15px var(--gold),
        0 0 30px var(--gold),
        0 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 50;
    pointer-events: none;
    animation: projectileMove 0.5s linear forwards;
}

@keyframes projectileMove {
    to { transform: translateX(var(--target-x)); }
}

/* Ultraman-style Ranged Beam Effects */
.ranged-charging .fighter {
    filter: brightness(1.6) drop-shadow(0 0 18px var(--ultraman-cyan, #5ffaff));
    transform: scale(1.05) rotate(-3deg);
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}
.ranged-charging .fighter::before {
    content: '⚡';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--ultraman-cyan, #5ffaff);
    text-shadow: 0 0 12px var(--ultraman-cyan, #5ffaff), 0 0 24px #fff;
    animation: beamChargeFlicker 0.18s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes beamChargeFlicker {
    0%   { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1.0; transform: scale(1.15); }
}

.beam-charge-orb {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--ultraman-cyan, #5ffaff) 40%, rgba(95,250,255,0) 75%);
    box-shadow: 0 0 24px var(--ultraman-cyan, #5ffaff), 0 0 48px #fff, inset 0 0 12px #fff;
    z-index: 45;
    pointer-events: none;
    animation: beamChargePulse 0.5s ease-in-out infinite alternate;
    transform: translate(-50%, -50%);
}

@keyframes beamChargePulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
}

.ultraman-beam {
    position: absolute;
    height: 14px;
    width: 0;
    border-radius: 7px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        #fff 8%,
        var(--ultraman-cyan, #5ffaff) 35%,
        #fff 60%,
        var(--ultraman-cyan, #5ffaff) 85%,
        rgba(95,250,255,0) 100%);
    box-shadow:
        0 0 12px #fff,
        0 0 24px var(--ultraman-cyan, #5ffaff),
        0 0 48px rgba(95,250,255,0.8);
    z-index: 55;
    pointer-events: none;
    transform-origin: 0 50%;
    animation: beamLaunch 0.18s ease-out forwards;
    overflow: visible;
}

@keyframes beamLaunch {
    0%   { width: 0; opacity: 0; }
    50%  { opacity: 1; }
    100% { width: var(--beam-length, 600px); opacity: 1; }
}

.ultraman-beam .beam-core {
    position: absolute;
    top: 50%;
    left: 0;
    height: 4px;
    width: 100%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
    box-shadow: 0 0 8px #fff;
    border-radius: 2px;
}

.beam-helix {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    animation: helixSpin 0.35s linear infinite;
}

@keyframes helixSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.beam-helix .helix-orb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 16px var(--ultraman-cyan, #5ffaff);
    transform: translate(-50%, -50%);
}

.beam-impact-flash {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--ultraman-cyan, #5ffaff) 30%, transparent 70%);
    box-shadow: 0 0 60px #fff, 0 0 120px var(--ultraman-cyan, #5ffaff);
    z-index: 60;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: beamImpactFlash 0.5s ease-out forwards;
}

@keyframes beamImpactFlash {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    40%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

.beam-shockwave-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--ultraman-cyan, #5ffaff);
    border-radius: 50%;
    box-shadow: 0 0 16px #fff, inset 0 0 12px var(--ultraman-cyan, #5ffaff);
    z-index: 55;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: beamRingExpand 0.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes beamRingExpand {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(4.0); opacity: 0; border-width: 1px; }
}

/* Screen Flash */
.screen-flash {
    position: fixed;
    inset: 0;
    background: var(--text-primary);
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
    animation: screenFlash 0.3s ease-out forwards;
}

@keyframes screenFlash {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

/* Hit Effects */
.fighter.hit {
    animation: fighterHit 0.3s ease-out;
}

@keyframes fighterHit {
    0%, 100% { transform: translateX(0); filter: brightness(1); }
    20% { transform: translateX(-10px); filter: brightness(2) sepia(1) hue-rotate(-30deg); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-5px); }
}

.fighter.critical-hit {
    animation: fighterCrit 0.4s ease-out;
    filter: brightness(2) drop-shadow(0 0 20px var(--gold));
}

@keyframes fighterCrit {
    0% { transform: scale(1); }
    30% { transform: scale(1.3) rotate(-5deg); }
    60% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1); }
}

.fighter.blocked {
    animation: fighterBlock 0.3s ease-out;
    filter: brightness(1.5) drop-shadow(0 0 15px var(--water));
}

@keyframes fighterBlock {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.85); }
}

/* Low HP Glitch */
.fighter.low-hp {
    animation: lowHpGlitch 0.2s infinite;
    color: var(--hp-low);
}

@keyframes lowHpGlitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
}

/* Elemental Effects */
.fighter[data-element="fire"] { color: var(--fire); }
.fighter[data-element="water"] { color: var(--water); }
.fighter[data-element="wood"] { color: var(--wood); }
.fighter[data-element="metal"] { color: var(--metal); }
.fighter[data-element="earth"] { color: var(--earth); }

.elemental-advantage {
    animation: elementalAdvantage 0.5s ease-out;
    filter: brightness(2) drop-shadow(0 0 20px var(--gold));
}

@keyframes elementalAdvantage {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.elemental-weakness {
    animation: elementalWeakness 0.5s ease-out;
    opacity: 0.6;
    filter: grayscale(0.5);
}

@keyframes elementalWeakness {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Particles */
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 60;
    animation: particleExplode 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes particleExplode {
    0%   { transform: translate(0,0) scale(1.5); opacity: 1; }
    30%  { opacity: 1; }
100% { transform: translate(var(--dx),var(--dy)) scale(0.3); opacity: 0; }
}

/* Ultimate Effects */
.ult-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: var(--gold-light);
    text-shadow:
        0 0 30px var(--gold),
        0 0 60px var(--vermillion);
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    animation: ultTextAnim 2s ease-out forwards;
}

@keyframes ultTextAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
        filter: blur(20px);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
        filter: blur(0);
    }
    85% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        filter: blur(30px);
    }
}

/* Slow Motion */
body.slow-mo .game-container,
body.slow-mo .bg-layer {
    animation: slowMoEffect 0.1s steps(5) infinite;
}

@keyframes slowMoEffect {
    0% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(0.8) saturate(0.5); }
}

/* Finish Text */
.finish-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 900;
    color: var(--vermillion);
    text-shadow:
        0 0 50px var(--vermillion),
        0 0 100px var(--vermillion-dark);
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    animation: finishReveal 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes finishReveal {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5);
        filter: blur(30px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

/* Screen Shake */
.screen-shake {
    animation: shakeScreen 0.3s ease-out;
}

@keyframes shakeScreen {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-5px, 3px); }
    40% { transform: translate(5px, -3px); }
    60% { transform: translate(-3px, 5px); }
    80% { transform: translate(3px, -5px); }
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    :root {
        --space-xl: 1.5rem;
        --space-lg: 1rem;
    }

    .setup-title {
        font-size: 2.5rem;
    }

    .setup-player input {
        font-size: 1.1rem;
    }

    .setup-vs {
        font-size: 0.7rem;
    }

    #start-btn {
        font-size: 0.8rem;
        padding: 0.7rem 2rem;
    }

    #setup-screen {
        gap: 2.5rem;
    }

    .fighter {
        font-size: 4rem;
    }

    .fighter-hud {
        top: -30px;
        width: 140px;
    }

    .fighter-name {
        font-size: 1.1rem;
    }

    .arena-header {
        padding: var(--space-sm);
    }

    .badge-name {
        font-size: 1.2rem;
    }

    .divider-ornament {
        width: 30px;
    }

    .combat-log {
        font-size: 0.7rem;
        max-height: 60px;
    }

    .winner-announcement {
        font-size: 2rem;
    }

    .ult-overlay {
        font-size: 2.5rem;
    }

    .finish-text {
        font-size: 3rem;
    }

    input[type="text"] {
        font-size: 1.4rem;
    }

    .primary-btn {
        font-size: 1.1rem;
        padding: var(--space-sm) var(--space-lg);
    }
}

@media (max-width: 480px) {
    .setup-title {
        font-size: 2rem;
    }

    .setup-player input {
        font-size: 1rem;
    }

    #setup-screen {
        gap: 2rem;
        padding: 1.5rem;
    }

    #start-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.75rem;
    }

    .fighter {
        font-size: 3rem;
    }

    .fighter-container {
        min-width: 100px;
    }

    .hp-bar-wrapper {
        height: 10px;
    }

    .hp-text {
        font-size: 0.55rem;
    }
}

/* ========================================
   Scrollbar Styling
   ======================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ========================================
   Enhanced Hit Effects
   ======================================== */

/* Hit flash overlay */
.hit-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    animation: hitFlashAnim 0.15s ease-out forwards;
}
@keyframes hitFlashAnim {
    0% { background: rgba(255,255,255,0.55); }
    100% { background: transparent; }
}

/* Crit flash - gold */
.hit-flash.crit {
    animation: critFlashAnim 0.2s ease-out forwards;
}
@keyframes critFlashAnim {
    0% { background: rgba(255,210,0,0.6); }
    50% { background: rgba(255,80,0,0.3); }
    100% { background: transparent; }
}

/* Speed lines (radial burst from impact) */
.speed-line {
    position: absolute;
    pointer-events: none;
    z-index: 120;
    transform-origin: 0 50%;
    animation: speedLineAnim 0.2s ease-out forwards;
}
@keyframes speedLineAnim {
    0% { opacity: 0.9; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(2.5); }
}

/* Impact slash mark */
.slash-mark {
    position: absolute;
    pointer-events: none;
    z-index: 130;
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px var(--gold);
    animation: slashMarkAnim 0.4s ease-out forwards;
    line-height: 1;
}
@keyframes slashMarkAnim {
    0%   { opacity: 1; transform: scale(0.4) rotate(-20deg); }
    30%  { opacity: 1; transform: scale(1.3) rotate(5deg); }
    100% { opacity: 0; transform: scale(1.6) rotate(10deg); }
}

/* Crit impact text */
.crit-impact {
    position: absolute;
    pointer-events: none;
    z-index: 200;
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 15px var(--gold), 2px 2px 0 #000, -2px -2px 0 #000;
    white-space: nowrap;
    animation: critImpactAnim 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes critImpactAnim {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(-15deg); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1.4) rotate(3deg); }
  60% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3) rotate(0deg) translateY(-30px); }
}

.rainbow-crit-text {
  background: linear-gradient(90deg, #ff1a1a, #ff8c00, #ffd700, #00e676, #1e90ff, #8a2be2, #ff69b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: critImpactAnim 0.6s cubic-bezier(0.22,1,0.36,1) forwards,
            rainbowTextShift 0.8s linear forwards;
  filter: drop-shadow(2px 2px 0 #000) drop-shadow(-2px -2px 0 #000) drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
@keyframes rainbowTextShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Defender squash on hit */
.fighter.impact-squash {
    animation: impactSquash 0.25s ease-out;
}
@keyframes impactSquash {
    0%   { transform: scale(1,1); }
    20%  { transform: scale(1.4, 0.6) skewX(10deg); filter: brightness(3); }
    50%  { transform: scale(0.85, 1.15); }
    100% { transform: scale(1,1); filter: brightness(1); }
}

/* Attacker motion blur on lunge */
.fighter.lunge-blur {
    animation: lungeBlur 0.2s ease-out;
}
@keyframes lungeBlur {
    0%   { filter: brightness(1); }
    40%  { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* Afterimage ghost */
.afterimage {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    opacity: 0.5;
    animation: afterimageAnim 0.3s ease-out forwards;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1;
}
@keyframes afterimageAnim {
    0%   { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

/* ========================================
   Elemental Advantage Popup
   ======================================== */
.elemental-popup {
    position: absolute;
    pointer-events: none;
    z-index: 210;
    font-family: var(--font-display);
    font-weight: 900;
    white-space: nowrap;
    animation: elementalPopupAnim 0.8s ease-out forwards;
}
@keyframes elementalPopupAnim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    20%  { opacity: 1; transform: translate(-50%, -70%) scale(1.2); }
    70%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(0.9); }
}

/* ========================================
   Combat Action CSS (previously missing)
   ======================================== */

/* Anticipate: lean back before strike */
.fighter-container.anticipate .fighter {
    animation: anticipateAnim 0.3s ease-out forwards;
}
@keyframes anticipateAnim {
    0%   { transform: scale(1) translateX(0); }
    100% { transform: scale(0.85, 1.1) translateX(-12px); filter: brightness(1.4); }
}

/* Fast move: motion blur dash */
.fighter-container.fast-move .fighter {
    filter: brightness(1.3);
    transition: filter 0.1s;
}

/* Morph attack: lunge stretch */
.fighter-container.morph-attack .fighter {
    animation: morphAttackAnim 0.25s ease-out;
}
@keyframes morphAttackAnim {
    0%   { transform: scale(1.3, 0.75) translateX(8px); filter: brightness(2); }
    60%  { transform: scale(0.9, 1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Fast recoil: bounce back */
.fighter-container.fast-recoil .fighter {
    animation: fastRecoilAnim 0.35s ease-out;
}
@keyframes fastRecoilAnim {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(-8px) scale(0.95); }
    65%  { transform: translateX(4px); }
    100% { transform: translateX(0) scale(1); }
}

/* Speeding: chromatic aberration on body */
body.speeding::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,0,0,0.04), transparent, rgba(0,0,255,0.04));
    pointer-events: none;
    z-index: 998;
    animation: speedingAberration 0.3s ease-out forwards;
}
@keyframes speedingAberration {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* Defender knocked back: fly animation */
.fighter-container.knockback .fighter {
    animation: knockbackAnim 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes knockbackAnim {
    0%   { transform: scale(1.2, 0.7) translateX(0); filter: brightness(3) saturate(0); }
    40%  { transform: scale(0.8, 1.2) translateX(20px); filter: brightness(1.5); }
    70%  { transform: scale(1.05, 0.95) translateX(-5px); }
    100% { transform: scale(1) translateX(0); filter: brightness(1); }
}

/* Crit knockback: bigger fly */
.fighter-container.knockback-crit .fighter {
    animation: knockbackCritAnim 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes knockbackCritAnim {
    0%   { transform: scale(1.4, 0.5) translateX(0); filter: brightness(4) saturate(0) hue-rotate(30deg); }
    30%  { transform: scale(0.7, 1.3) translateX(35px) rotate(8deg); filter: brightness(2); }
    65%  { transform: scale(1.1, 0.9) translateX(-8px) rotate(-3deg); }
    100% { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
}

/* ========================================
   Ultra Hit Effects v2
   ======================================== */

/* Attack trail line from attacker to defender */
.attack-trail {
    position: absolute;
    pointer-events: none;
    z-index: 115;
    height: 3px;
    border-radius: 2px;
    transform-origin: 0 50%;
    animation: trailAnim 0.25s ease-out forwards;
}
@keyframes trailAnim {
    0%   { opacity: 1; transform: scaleX(0); }
    40%  { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.1); }
}

/* Multi-ring shockwave */
.shockwave-ring {
    position: absolute;
    pointer-events: none;
    z-index: 125;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: shockwaveRingAnim 0.5s ease-out forwards;
}
@keyframes shockwaveRingAnim {
    0%   { width: 10px; height: 10px; opacity: 1; }
    100% { width: 220px; height: 220px; opacity: 0; }
}

/* Crit freeze frame: black & white flash */
.crit-freeze {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 997;
    background: transparent;
    animation: critFreezeAnim 0.18s steps(1) forwards;
}
@keyframes critFreezeAnim {
    0%   { backdrop-filter: grayscale(1) brightness(2.5) contrast(2); background: rgba(255,255,255,0.15); }
    60%  { backdrop-filter: grayscale(0.5) brightness(1.5); background: transparent; }
    100% { backdrop-filter: none; background: transparent; }
}

/* Battlefield glow on hit */
.arena-battlefield.hit-glow {
    animation: battlefieldGlow 0.3s ease-out;
}
@keyframes battlefieldGlow {
    0%   { background: rgba(255,200,100,0.12); }
    100% { background: rgba(0,0,0,0.02); }
}
.arena-battlefield.hit-glow-crit {
    animation: battlefieldGlowCrit 0.4s ease-out;
}
@keyframes battlefieldGlowCrit {
    0%   { background: rgba(255,150,0,0.25); }
    50%  { background: rgba(255,50,0,0.1); }
    100% { background: rgba(0,0,0,0.02); }
}

/* Attacker charge-up glow before strike */
.fighter.charge-glow {
    animation: chargeGlowAnim 0.3s ease-out;
}
@keyframes chargeGlowAnim {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(2.5) drop-shadow(0 0 15px currentColor); }
    100% { filter: brightness(1.5); }
}

/* Impact burst (star shape via clip-path) */
.impact-burst {
    position: absolute;
    pointer-events: none;
    z-index: 135;
    transform: translate(-50%, -50%);
    animation: impactBurstAnim 0.35s ease-out forwards;
}
@keyframes impactBurstAnim {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.1) rotate(0deg); }
    40%  { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(15deg); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4) rotate(25deg); }
}

/* ========================================
   Skill Aura & Background Glow
   ======================================== */
.skill-aura {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: skillAuraAnim 0.8s ease-out forwards;
}
@keyframes skillAuraAnim {
    0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.1); }
    40%  { opacity: 0.6; }
    100% { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
}

.arena-bg-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    animation: arenaBgFlash 0.6s ease-out forwards;
}
@keyframes arenaBgFlash {
  0% { opacity: 0.35; }
  100% { opacity: 0; }
}

/* ========================================
Rainbow Impact Effects - 七彩打击效果
======================================== */
.rainbow-shockwave {
  position: absolute;
  pointer-events: none;
  z-index: 145;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rainbowShockwaveAnim 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes rainbowShockwaveAnim {
  0% { width: 10px; height: 10px; opacity: 1; }
  40% { opacity: 0.8; }
  100% { width: 300px; height: 300px; opacity: 0; }
}

.rainbow-flash-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,26,26,0.15),
    rgba(255,140,0,0.15),
    rgba(255,215,0,0.15),
    rgba(0,230,118,0.15),
    rgba(30,144,255,0.15),
    rgba(138,43,226,0.15),
    rgba(255,105,180,0.15)
  );
  animation: rainbowFlashAnim 0.5s ease-out forwards;
}
@keyframes rainbowFlashAnim {
  0% { opacity: 1; }
  30% { opacity: 0.7; }
  100% { opacity: 0; }
}

.mute-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #fff;
  backdrop-filter: blur(4px);
  transition: transform 0.2s;
}
.mute-btn:hover {
  transform: scale(1.1);
}

.rainbow-impact-burst {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 140;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    #ff1a1a, #ff8c00, #ffd700, #00e676,
    #1e90ff, #8a2be2, #ff69b4, #ff1a1a
  );
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 30%, black 70%);
  -webkit-mask: radial-gradient(circle, transparent 30%, black 70%);
  animation: rainbowBurstAnim 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
  filter: blur(3px);
}
@keyframes rainbowBurstAnim {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.1) rotate(0deg); }
  20% { opacity: 1; }
  50% { opacity: 0.8; transform: translate(-50%,-50%) scale(1.2) rotate(90deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8) rotate(180deg); }
}

.skill-slots {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 2px;
}
.skill-slot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: border-color 0.3s;
}
.skill-slot.on-cooldown {
  border-color: rgba(255,255,255,0.15);
}
.skill-slot.on-cooldown .slot-icon {
  opacity: 0.3;
}
.slot-icon {
  font-size: 0.6rem;
  z-index: 2;
  position: relative;
  pointer-events: none;
}
.slot-cd {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: rgba(0,0,0,0.7);
  transition: height 0.1s linear;
  pointer-events: none;
}

.combo-display {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: #f1c40f;
  text-shadow: 0 0 8px #f39c12, 0 0 16px #e67e22;
  margin-top: 2px;
  animation: comboPulse 0.3s ease-in-out infinite alternate;
}
.combo-display.hidden {
  display: none;
}
@keyframes comboPulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

/* ========================================
   New Skill Visual Effects
   ======================================== */

.dark-vortex-ring {
  position: absolute;
  pointer-events: none;
  z-index: 145;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: darkVortexRingAnim 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes darkVortexRingAnim {
  0%   { width: 10px; height: 10px; opacity: 1; }
  50%  { opacity: 0.6; }
  100% { width: 280px; height: 280px; opacity: 0; }
}

.dark-vortex-burst {
  position: absolute;
  pointer-events: none;
  z-index: 135;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: darkVortexBurstAnim 0.45s ease-out forwards;
  filter: blur(4px);
}
@keyframes darkVortexBurstAnim {
  0%   { transform: translate(-50%,-50%) scale(0.1); opacity: 0.9; }
  50%  { opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
}

@keyframes cherryBlossom {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx),var(--sy)) rotate(var(--rot)); }
}

@keyframes rasenSpin {
  0%   { transform: translate(0,0) scale(0.5); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--rx),var(--ry)) scale(0); opacity: 0; }
}

/* ========================================
   Death Explosion Effects
   ======================================== */

@keyframes deathExplodeParticle {
  0%   { transform: translate(0,0) scale(1.5); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) scale(0.1); opacity: 0; }
}

.death-burst-ring {
  position: absolute;
  pointer-events: none;
  z-index: 170;
  border: 4px solid #ff4444;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 40px #ff4444, inset 0 0 40px #ff444488;
  animation: deathBurstRing 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes deathBurstRing {
  0%   { width: 20px; height: 20px; opacity: 1; }
  100% { width: 500px; height: 500px; opacity: 0; }
}

.death-shockwave {
  position: absolute;
  pointer-events: none;
  z-index: 160;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: deathShockwaveAnim 0.5s ease-out forwards;
}
@keyframes deathShockwaveAnim {
  0%   { transform: translate(-50%,-50%) scale(0.1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(5); opacity: 0; }
}

.death-flash-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6), rgba(255,0,0,0.3), transparent);
  pointer-events: none;
  z-index: 9998;
  animation: deathFlashAnim 0.5s ease-out forwards;
}
@keyframes deathFlashAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.winner-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 150;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(255,215,0,0.1) 40%, transparent 70%);
  box-shadow: 0 0 60px rgba(255,215,0,0.5), 0 0 120px rgba(255,215,0,0.2);
  transform: translate(-50%, -50%);
  animation: winnerGlowAnim 1.5s ease-in-out infinite alternate;
}
@keyframes winnerGlowAnim {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.5; }
  100% { transform: translate(-50%,-50%) scale(1.5); opacity: 1; }
}

.fighter.death-fade {
  animation: deathFadeAnim 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes deathFadeAnim {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
  30%  { transform: scale(1.3) rotate(10deg); opacity: 0.8; filter: brightness(3) saturate(0); }
  100% { transform: scale(0.3) rotate(45deg) translateY(50px); opacity: 0; filter: brightness(0); }
}

.fighter.winner-pose {
  animation: winnerPoseAnim 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes winnerPoseAnim {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) translateY(-10px); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.1); filter: brightness(1.2); }
}

/* ========================================
   Crit Slow-Mo / Freeze Frame
   ======================================== */

body.crit-freeze-frame::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  border: 12px solid transparent;
  border-image: linear-gradient(135deg, #f1c40f, #ff6600, #f1c40f) 1;
  animation: critBorderFlash 0.3s ease-out forwards;
}
@keyframes critBorderFlash {
  0%   { border-width: 12px; opacity: 1; }
  100% { border-width: 0; opacity: 0; }
}

/* ========================================
   Status Effect Indicators
   ======================================== */

.status-icon-el {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  z-index: 50;
  pointer-events: none;
  animation: statusIconFloat 0.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes statusIconFloat {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-6px); }
}

/* Container color glows for status */
.fighter-container.status-burn .fighter {
  filter: drop-shadow(0 0 12px #e74c3c) hue-rotate(0deg) !important;
}
.fighter-container.status-poison .fighter {
  filter: drop-shadow(0 0 12px #27ae60) saturate(3) hue-rotate(90deg) !important;
}
.fighter-container.status-freeze .fighter {
  filter: drop-shadow(0 0 12px #1abc9c) hue-rotate(180deg) brightness(1.3) !important;
}
.fighter-container.status-bleed .fighter {
  filter: drop-shadow(0 0 12px #c0392b) saturate(4) hue-rotate(-30deg) !important;
}

/* ========================================
   Hit Glow Persist
   ======================================== */

.hit-glow-persist {
  position: absolute;
  pointer-events: none;
  z-index: 55;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: hitGlowPersistAnim 0.8s ease-out forwards;
}
@keyframes hitGlowPersistAnim {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.3); }
  30%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.5); }
}

/* ========================================
   Intro Animation
   ======================================== */

.intro-name {
  position: absolute;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  text-shadow: 0 0 40px currentColor, 0 4px 8px rgba(0,0,0,0.8);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.intro-name-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.intro-vs {
  position: absolute;
  font-family: var(--font-title);
  font-size: 4rem;
  font-weight: 900;
  color: var(--vermillion);
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  text-shadow: 0 0 60px var(--vermillion);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.intro-vs-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
}

.intro-bg-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.08), transparent);
  pointer-events: none;
  z-index: 5;
  animation: introBgFlash 2s ease-out forwards;
}
@keyframes introBgFlash {
  0%   { opacity: 1; }
  70%  { opacity: 0.5; }
  100% { opacity: 0; }
}

/* ========================================
   Combo Aura Effects
   ======================================== */

.fighter-container.combo-aura-active {
  transition: filter 0.3s ease;
}
.fighter-container.combo-aura-active .fighter {
  animation: comboAuraPulse 0.4s ease-in-out infinite alternate;
}

@keyframes comboAuraPulse {
  0% {
    filter: drop-shadow(0 0 8px #f1c40f) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 20px #f39c12) drop-shadow(0 0 40px #e67e22) brightness(1.3);
  }
}

.fighter-container.combo-3 .fighter {
  filter: drop-shadow(0 0 10px #f1c40f) !important;
}
.fighter-container.combo-4 .fighter {
  filter: drop-shadow(0 0 15px #f39c12) drop-shadow(0 0 30px #e67e22) !important;
}
.fighter-container.combo-5 .fighter {
  filter: drop-shadow(0 0 20px #f1c40f) drop-shadow(0 0 40px #e67e22) drop-shadow(0 0 60px #ff6600) !important;
  animation: comboMaxPulse 0.3s ease-in-out infinite alternate !important;
}
@keyframes comboMaxPulse {
  0%   { filter: drop-shadow(0 0 20px #f1c40f) drop-shadow(0 0 40px #e67e22) brightness(1.2); }
  100% { filter: drop-shadow(0 0 30px #ff6600) drop-shadow(0 0 60px #ff4444) brightness(1.5); }
}

/* ========================================
   Character Transform & Ghost Effects
   ======================================== */

.fighter-ghost {
  position: absolute;
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 4;
  opacity: 0.4;
  animation: ghostFade 0.4s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes ghostFade {
  0%   { opacity: 0.4; transform: scale(1) translateY(0); filter: brightness(1.5) blur(0); }
  100% { opacity: 0; transform: scale(0.7) translateY(-10px); filter: brightness(2.5) blur(2px); }
}

/* Transform visual states — applied to .fighter via data-xf-state */

.fighter.xf-battle {
  animation: xfBurst 0.4s ease-out;
}
@keyframes xfBurst {
  0%   { transform: scale(1.15); filter: brightness(1.6); text-shadow: 0 0 30px #ff6b35, 0 0 60px #ff4500; }
  100% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 20px rgba(201, 162, 39, 0.5), 0 4px 8px rgba(0, 0, 0, 0.5); }
}

.fighter.xf-guard {
  animation: xfGuard 0.5s ease-out;
}
@keyframes xfGuard {
  0%   { filter: brightness(1.3) drop-shadow(0 0 15px #4fc3f7); }
  100% { filter: brightness(1) drop-shadow(0 0 5px #4fc3f744); }
}

.fighter.xf-shadow {
  animation: xfShadow 0.4s ease-out;
}
@keyframes xfShadow {
  0%   { filter: brightness(1.4) blur(1px) drop-shadow(0 0 20px #9c27b0); transform: scale(0.9); opacity: 0.8; }
  100% { filter: brightness(1) blur(0) drop-shadow(0 0 0); transform: scale(1); opacity: 1; }
}

.fighter.xf-fury {
  animation: xfFury 0.6s ease-in-out infinite alternate;
}
@keyframes xfFury {
  0%   { filter: brightness(1.2) drop-shadow(0 0 10px #f1c40f); text-shadow: 0 0 20px #f1c40f, 0 0 40px #f39c12; }
  100% { filter: brightness(1.5) drop-shadow(0 0 25px #f39c12) drop-shadow(0 0 50px #e67e22); text-shadow: 0 0 30px #f1c40f, 0 0 60px #e67e22; }
}

.fighter.xf-berserk {
  animation: xfBerserk 0.3s ease-in-out infinite alternate;
}
@keyframes xfBerserk {
  0%   { filter: brightness(1.3) drop-shadow(0 0 15px #ff6600) drop-shadow(0 0 30px #ff4444); text-shadow: 0 0 20px #ff6600, 0 0 40px #ff4444; }
  100% { filter: brightness(1.7) drop-shadow(0 0 30px #ff4444) drop-shadow(0 0 60px #cc0000); text-shadow: 0 0 40px #ff6600, 0 0 80px #ff0000; transform: scale(1.08); }
}

.fighter.xf-desperate {
  animation: xfDesperate 0.08s ease-in-out infinite alternate;
}
@keyframes xfDesperate {
  0%   { filter: brightness(0.8) drop-shadow(0 0 10px #c0392b); transform: translate(-2px, 1px) scale(1.02); }
  25%  { transform: translate(2px, -1px) scale(1); }
  50%  { transform: translate(-1px, -2px) scale(1.02); }
  75%  { transform: translate(1px, 2px) scale(1); }
  100% { filter: brightness(1.2) drop-shadow(0 0 20px #e74c3c); transform: translate(-2px, 1px) scale(1.05); }
}

.fighter.xf-awakening {
  animation: xfAwakening 0.3s ease-out;
}
@keyframes xfAwakening {
  0%   { transform: scale(1.3); filter: brightness(2) drop-shadow(0 0 30px #fff) drop-shadow(0 0 60px #f1c40f); text-shadow: 0 0 40px #fff, 0 0 80px #f1c40f; }
  50%  { filter: brightness(1.8) drop-shadow(0 0 40px #f1c40f) drop-shadow(0 0 80px #e67e22); }
  100% { transform: scale(1); filter: brightness(1.2) drop-shadow(0 0 20px #f1c40f); text-shadow: 0 0 20px #f1c40f, 0 0 40px #e67e22; }
}

@media (max-width: 768px) {
  .fighter-ghost {
    font-size: 4rem;
  }
}

@media (max-width: 480px) {
  .fighter-ghost {
    font-size: 3rem;
  }
}