/* cyberpunk.css — Neon/glow aesthetic layer for Ronin Casino */

/* ===== Color Palette ===== */
:root {
    --neon-cyan: #00f0ff;
    --neon-pink: #ff00ff;
    --neon-gold: #ffd700;
    --neon-green: #05ffa1;
    --neon-red: #ff2a6d;

    --bg-dark: #0a0a0f;
    --bg-card: rgba(15, 15, 25, 0.95);
    --bg-glass: rgba(20, 20, 35, 0.8);

    --glow-cyan: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff;
    --glow-gold: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 40px #b8860b;
    --glow-pink: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

/* ===== Neon Text Effects ===== */
.neon-text {
    text-shadow: var(--glow-cyan);
    animation: neon-flicker 3s infinite alternate;
}

@keyframes neon-flicker {
    0%, 90%, 100% { opacity: 1; }
    92%, 94% { opacity: 0.8; }
}

.neon-gold { text-shadow: var(--glow-gold); color: #ffd700; }
.neon-cyan { text-shadow: var(--glow-cyan); color: #00f0ff; }
.neon-pink { text-shadow: var(--glow-pink); color: #ff00ff; }

/* ===== Glowing Borders & Cards ===== */
.glow-border {
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow:
        inset 0 0 20px rgba(0, 240, 255, 0.1),
        0 0 15px rgba(0, 240, 255, 0.2);
    transition: all 0.3s ease;
}

.glow-border:hover {
    border-color: rgba(0, 240, 255, 0.6);
    box-shadow:
        inset 0 0 30px rgba(0, 240, 255, 0.15),
        0 0 25px rgba(0, 240, 255, 0.4);
}

/* ===== Digital Rain ===== */
.digital-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.03;
}

.rain-column {
    position: absolute;
    top: -100%;
    font-family: 'Noto Sans JP', monospace;
    font-size: 14px;
    color: #00f0ff;
    writing-mode: vertical-rl;
    animation: rain-fall linear infinite;
}

@keyframes rain-fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(200vh); }
}

/* ===== Card Animations ===== */
.card-deal {
    animation: deal-card 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes deal-card {
    0% {
        transform: translateX(-200px) translateY(-100px) rotate(-180deg) scale(0.3);
        opacity: 0;
    }
    100% {
        transform: translateX(0) translateY(0) rotate(0) scale(1);
        opacity: 1;
    }
}

.card-flip {
    animation: flip-card 0.6s ease-in-out;
    transform-style: preserve-3d;
}

@keyframes flip-card {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg) scale(1.1); }
    100% { transform: rotateY(0deg); }
}

.card-winner {
    animation: winner-pulse 0.5s ease-in-out 3;
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700;
}

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

/* ===== Chip Animations ===== */
.chip-stack {
    animation: chip-land 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes chip-land {
    0% { transform: translateY(-20px) scale(1.2); }
    60% { transform: translateY(3px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

.chip-win {
    animation: chip-burst 0.8s ease-out;
}

@keyframes chip-burst {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 0.8; }
}

/* ===== Loading States ===== */
.cyber-loader {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    border-top-color: #00f0ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 15px #00f0ff;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.skeleton-pulse {
    background: linear-gradient(90deg, var(--bg-card) 25%, rgba(0,240,255,0.1) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Hover Effects ===== */
.btn-magnetic {
    transition: transform 0.2s ease-out, box-shadow 0.2s;
}

.btn-magnetic:hover {
    box-shadow: 0 0 20px var(--neon-cyan);
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
    opacity: 1;
    transition: 0s;
}

/* ===== Kanji Celebration ===== */
@keyframes kanji-reveal {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 0; }
}

/* ===== Particle Colors ===== */
.particle-cyan { background: #00f0ff; box-shadow: 0 0 6px #00f0ff; }
.particle-gold { background: #ffd700; box-shadow: 0 0 6px #ffd700; }
.particle-pink { background: #ff00ff; box-shadow: 0 0 6px #ff00ff; }

/* ===== Float-Up (used by particles) ===== */
@keyframes float-up {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ===== Apply Cyberpunk to Existing Elements ===== */

/* Agent cards in hub get glow border on hover */
.agent-card {
    transition: border-color 0.3s, box-shadow 0.3s;
}
.agent-card:hover {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow:
        inset 0 0 20px rgba(0, 240, 255, 0.05),
        0 0 15px rgba(0, 240, 255, 0.15);
}

/* Deploy sections get subtle glow when active */
.deploy-section.active {
    box-shadow:
        inset 0 0 30px rgba(212, 175, 55, 0.05),
        0 0 20px rgba(212, 175, 55, 0.1);
}

/* MC stats glow */
.mc-stat .val.positive { text-shadow: 0 0 8px rgba(5, 255, 161, 0.4); }
.mc-stat .val.negative { text-shadow: 0 0 8px rgba(255, 42, 109, 0.4); }

/* Log panel win/loss entries glow */
.log-entry.log-win .log-win { text-shadow: 0 0 6px rgba(5, 255, 161, 0.5); }
.log-entry.log-loss .log-loss { text-shadow: 0 0 6px rgba(255, 42, 109, 0.5); }

/* Poker cards display styling */
.poker-cards, .poker-board {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Poker street badge glow */
.poker-street-badge {
    text-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
}

/* Mission Control header status glow when active */
.pulse-dot {
    box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}

/* Deploy bar glow */
.deploy-bar.visible {
    box-shadow: 0 -2px 20px rgba(212, 175, 55, 0.15);
}

/* Button hover enhancements */
.btn-gold:hover {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.btn-outline:hover {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

/* Back button */
.btn-back-agents {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 8px;
    color: var(--neon-cyan);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.btn-back-agents:hover {
    border-color: rgba(0, 240, 255, 0.6);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
    color: #fff;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .neon-text,
    .card-deal,
    .card-flip,
    .card-winner,
    .chip-stack,
    .chip-win,
    .cyber-loader,
    .skeleton-pulse,
    .rain-column,
    .particle-cyan,
    .particle-gold,
    .particle-pink {
        animation: none !important;
    }
    .digital-rain { display: none; }
}