/* ============================================ */
/* RESET & VARIÁVEIS GLOBAIS                    */
/* ============================================ */
:root {
    --primary: #f4c542;
    --primary-dark: #c9a030;
    --secondary: #8b5cf6;
    --danger: #ef4444;
    --success: #22c55e;
    --bg-dark: #0a0a1a;
    --bg-card: #1a1a2e;
    --bg-field: #0d1b2a;
    --text-light: #e0e0e0;
    --text-gold: #f4c542;
    --text-dim: #888;
    --border-gold: #c9a030;
    --hp-green: #22c55e;
    --hp-red: #ef4444;
    --glow-gold: 0 0 20px rgba(244, 197, 66, 0.5);
    --glow-purple: 0 0 20px rgba(139, 92, 246, 0.5);
    --glow-red: 0 0 20px rgba(239, 68, 68, 0.5);
    --font-title: 'Cinzel', serif;
    --font-medieval: 'MedievalSharp', cursive;
    --font-ui: 'Orbitron', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-ui);
    background: var(--bg-dark);
    color: var(--text-light);
    user-select: none;
}

.hidden {
    display: none !important;
}

#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ============================================ */
/* TELAS - SISTEMA DE NAVEGAÇÃO                 */
/* ============================================ */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.screen.active {
    display: flex;
    opacity: 1;
    z-index: 10;
}

/* ============================================ */
/* TELA SPLASH (INÍCIO)                         */
/* ============================================ */
.splash-bg {
    width: 100%;
    height: 100%;
    background-color: #000;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.24) 100%),
        url("FundoInicio.png");
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.splash-bg::before {
    content: none;
}

.splash-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    z-index: 2;
    transform: translateY(42px);
}

.btn-splash-enter {
    border: 1px solid rgba(244, 197, 66, 0.7);
    background: rgba(10, 10, 24, 0.55);
    color: var(--primary);
    border-radius: 999px;
    padding: 12px 28px;
    font-family: var(--font-ui);
    font-size: clamp(13px, 2.6vw, 18px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 18px rgba(244, 197, 66, 0.2);
    pointer-events: none;
}

.dragon-fire-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.fire-particle-dot {
    position: absolute;
    bottom: -40px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd166 0%, #ff7a00 58%, rgba(255, 69, 0, 0) 75%);
    filter: blur(0.2px);
    opacity: 0;
    animation: dragonFireRise 6s linear infinite;
}

.fire-particle-dot:nth-child(1) { left: 5%; animation-delay: -0.2s; animation-duration: 5.4s; transform: scale(0.8); }
.fire-particle-dot:nth-child(2) { left: 11%; animation-delay: -1.1s; animation-duration: 6.4s; transform: scale(1.1); }
.fire-particle-dot:nth-child(3) { left: 17%; animation-delay: -2.8s; animation-duration: 5.8s; transform: scale(0.75); }
.fire-particle-dot:nth-child(4) { left: 24%; animation-delay: -0.9s; animation-duration: 6.1s; transform: scale(1.2); }
.fire-particle-dot:nth-child(5) { left: 31%; animation-delay: -2.1s; animation-duration: 5.7s; transform: scale(0.9); }
.fire-particle-dot:nth-child(6) { left: 38%; animation-delay: -3.3s; animation-duration: 6.9s; transform: scale(1.05); }
.fire-particle-dot:nth-child(7) { left: 45%; animation-delay: -4.0s; animation-duration: 5.5s; transform: scale(0.7); }
.fire-particle-dot:nth-child(8) { left: 52%; animation-delay: -0.5s; animation-duration: 6.6s; transform: scale(1.3); }
.fire-particle-dot:nth-child(9) { left: 59%; animation-delay: -1.8s; animation-duration: 5.6s; transform: scale(0.95); }
.fire-particle-dot:nth-child(10) { left: 66%; animation-delay: -3.7s; animation-duration: 6.2s; transform: scale(1.15); }
.fire-particle-dot:nth-child(11) { left: 72%; animation-delay: -2.4s; animation-duration: 6.8s; transform: scale(0.85); }
.fire-particle-dot:nth-child(12) { left: 78%; animation-delay: -1.3s; animation-duration: 5.9s; transform: scale(1.05); }
.fire-particle-dot:nth-child(13) { left: 84%; animation-delay: -3.1s; animation-duration: 5.3s; transform: scale(0.75); }
.fire-particle-dot:nth-child(14) { left: 89%; animation-delay: -0.7s; animation-duration: 6.5s; transform: scale(1.2); }
.fire-particle-dot:nth-child(15) { left: 94%; animation-delay: -2.6s; animation-duration: 5.8s; transform: scale(0.95); }
.fire-particle-dot:nth-child(16) { left: 97%; animation-delay: -4.2s; animation-duration: 6.7s; transform: scale(1.1); }

@keyframes dragonFireRise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.7);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    65% {
        opacity: 0.55;
    }
    100% {
        transform: translate3d(0, -110vh, 0) scale(1.35);
        opacity: 0;
    }
}

/* Legacy splash blocks disabled for the new single-image splash. */
.energy-orbs,
.logo-container,
.logo-glow,
.game-title,
.game-subtitle,
.lore-text,
.tap-prompt,
.tap-icon {
    display: none !important;
}

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

.energy-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
}

.logo-container {
    position: relative;
    margin-bottom: 30px;
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(244, 197, 66, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.game-title {
    font-family: var(--font-title);
    font-size: clamp(48px, 12vw, 96px);
    font-weight: 900;
    color: var(--primary);
    text-shadow: 
        0 0 10px rgba(244, 197, 66, 0.8),
        0 0 30px rgba(244, 197, 66, 0.4),
        0 0 60px rgba(244, 197, 66, 0.2),
        2px 2px 0 #8b5cf6;
    letter-spacing: 15px;
    position: relative;
    animation: titleShimmer 3s ease-in-out infinite;
}

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

.game-subtitle {
    font-family: var(--font-medieval);
    font-size: clamp(18px, 4vw, 32px);
    color: var(--secondary);
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    margin-top: 10px;
    letter-spacing: 5px;
}

.lore-text {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    background: rgba(26, 26, 46, 0.8);
    backdrop-filter: blur(10px);
}

.lore-text p {
    font-family: var(--font-medieval);
    font-size: clamp(14px, 2.5vw, 18px);
    color: #ccc;
    line-height: 1.8;
    font-style: italic;
}

.tap-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.tap-prompt p {
    font-family: var(--font-ui);
    font-size: clamp(14px, 3vw, 20px);
    color: var(--primary);
    letter-spacing: 5px;
}

.tap-icon {
    font-size: 24px;
}

.pulse-animation {
    animation: pulseText 2s ease-in-out infinite;
}

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

/* ============================================ */
/* TELA DE AUTENTICAÇÃO                         */
/* ============================================ */
.auth-bg {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 100%),
        url("FundoInicio.png") center center / 100% 100% no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid rgba(244, 197, 66, 0.3);
    border-radius: 15px;
    padding: 30px;
    box-shadow: var(--glow-gold);
    backdrop-filter: blur(20px);
}

.auth-header {
    text-align: center;
    margin-bottom: 25px;
}

.auth-title {
    font-family: var(--font-title);
    font-size: 24px;
    color: var(--primary);
    text-shadow: 0 0 15px rgba(244, 197, 66, 0.4);
    margin-bottom: 20px;
}

.auth-tabs {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(244, 197, 66, 0.3);
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}

.auth-tab.active {
    background: rgba(244, 197, 66, 0.2);
    color: var(--primary);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
    animation: fadeInUp 0.3s ease;
}

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

.input-group {
    margin-bottom: 20px;
    position: relative;
}

.input-group label {
    display: block;
    font-size: 11px;
    color: var(--text-gold);
    margin-bottom: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(10, 10, 26, 0.8);
    border: 1px solid rgba(244, 197, 66, 0.2);
    border-radius: 8px;
    color: var(--text-light);
    font-family: var(--font-ui);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(244, 197, 66, 0.2);
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.input-group input:focus ~ .input-line {
    width: 100%;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-gold);
}

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

.btn-text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #0a0a1a;
    font-weight: 700;
    letter-spacing: 3px;
    position: relative;
    z-index: 1;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: btnShine 3s infinite;
}

@keyframes btnShine {
    to { left: 100%; }
}

.error-msg {
    color: var(--danger);
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
    min-height: 18px;
}

.success-msg {
    color: var(--success);
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
    min-height: 18px;
}

/* ============================================ */
/* MENU PRINCIPAL                               */
/* ============================================ */
.menu-bg {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.5) 100%),
        url("Fundomenu.png") center center / 100% 100% no-repeat;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.menu-header {
    position: relative;
    padding: 15px 20px;
    background: rgba(26, 26, 46, 0.9);
    border-bottom: 1px solid rgba(244, 197, 66, 0.2);
}

.player-info-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-header-down-arrow {
    position: absolute;
    left: 50%;
    top: calc(100% + 1px);
    transform: translateX(-50%) rotate(90deg) scaleY(2.85) scaleX(1.12);
    font-family: var(--font-ui);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 224, 160, 0.98);
    text-shadow:
        0 0 10px rgba(255, 194, 104, 0.78),
        0 0 22px rgba(255, 130, 35, 0.52),
        0 0 34px rgba(255, 96, 24, 0.26);
    pointer-events: none;
    user-select: none;
    z-index: 1;
    animation: menuHeaderArrowPulse 1.7s ease-in-out infinite;
}

@keyframes menuHeaderArrowPulse {
    0%, 100% {
        opacity: 0.78;
        filter: brightness(1);
        transform: translateX(-50%) rotate(90deg) scaleY(2.85) scaleX(1.12);
    }
    50% {
        opacity: 1;
        filter: brightness(1.18);
        transform: translateX(-50%) translateY(2px) rotate(90deg) scaleY(2.95) scaleX(1.14);
    }
}

.player-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(244, 197, 66, 0.2);
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.player-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.player-name {
    font-family: var(--font-title);
    font-size: 16px;
    color: var(--primary);
}

.player-rank {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 2px;
}

.menu-draft-logo {
    position: relative;
    display: inline-block;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1;
    color: #f8d572;
    text-shadow:
        0 0 8px rgba(244, 197, 66, 0.75),
        0 0 18px rgba(244, 197, 66, 0.45),
        1px 1px 0 rgba(80, 35, 0, 0.9);
    animation: draftLogoPulse 2.8s ease-in-out infinite;
    overflow: hidden;
}

.menu-draft-logo::after {
    content: '';
    position: absolute;
    top: -45%;
    left: -55%;
    width: 52%;
    height: 190%;
    transform: rotate(22deg);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 246, 210, 0.85) 48%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: draftLogoSweep 2.6s linear infinite;
}

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

@keyframes draftLogoSweep {
    0% { left: -60%; opacity: 0; }
    12% { opacity: 1; }
    55% { opacity: 0.95; }
    100% { left: 130%; opacity: 0; }
}

.player-coins {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(244, 197, 66, 0.15);
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(244, 197, 66, 0.3);
}

.coin-shop-trigger {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.coin-shop-trigger:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 146, 70, 0.85);
    box-shadow: 0 0 16px rgba(255, 94, 32, 0.32);
}

.menu-audio-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-menu-audio {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.45);
    background: rgba(14, 116, 144, 0.2);
    color: #9be7ff;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn-menu-audio:hover {
    transform: translateY(-1px);
    background: rgba(14, 116, 144, 0.34);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.35);
}

.btn-menu-ranking {
    border-color: rgba(255, 172, 68, 0.72);
    background: rgba(138, 63, 10, 0.26);
    color: #ffd18e;
}

.btn-menu-ranking:hover {
    background: rgba(169, 73, 11, 0.42);
    box-shadow: 0 0 12px rgba(255, 132, 47, 0.4);
}

.btn-menu-profile {
    border-color: rgba(98, 173, 255, 0.72);
    background: rgba(28, 65, 133, 0.26);
    color: #c9e8ff;
}

.btn-menu-profile:hover {
    background: rgba(28, 88, 174, 0.42);
    box-shadow: 0 0 12px rgba(74, 146, 255, 0.4);
}

.btn-menu-jackpot {
    border-color: rgba(255, 82, 160, 0.8);
    background: linear-gradient(135deg, rgba(82, 0, 56, 0.6), rgba(168, 24, 90, 0.45));
    color: #ffd3ec;
    box-shadow: 0 0 14px rgba(255, 73, 170, 0.35);
    animation: jackpotPulse 1.8s ease-in-out infinite;
}

.btn-menu-jackpot:hover {
    background: linear-gradient(135deg, rgba(122, 10, 80, 0.72), rgba(198, 38, 112, 0.62));
    box-shadow: 0 0 16px rgba(255, 82, 170, 0.5);
}

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

.menu-audio-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    padding: 10px 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 252, 0.35);
    background: rgba(6, 24, 40, 0.9);
    backdrop-filter: blur(4px);
    z-index: 40;
}

.menu-audio-panel label {
    display: block;
    font-size: 11px;
    color: #c7efff;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.menu-audio-panel input[type="range"] {
    width: 100%;
    accent-color: #38bdf8;
}

.coin-icon {
    font-size: 16px;
}

.df-coin {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 122, 40, 0.82);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 174, 84, 0.92) 0%, rgba(210, 78, 28, 0.9) 34%, rgba(92, 22, 18, 0.95) 74%, rgba(28, 9, 12, 1) 100%),
        repeating-conic-gradient(from 0deg, rgba(255, 148, 66, 0.12) 0deg 18deg, rgba(35, 10, 12, 0.05) 18deg 36deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 150, 0.35),
        inset 0 -3px 6px rgba(14, 3, 7, 0.7),
        0 0 8px rgba(255, 89, 30, 0.38);
    overflow: hidden;
}

.df-coin::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 146, 70, 0.42);
    box-shadow: inset 0 0 0 1px rgba(54, 11, 13, 0.45);
}

.df-coin::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 55%;
    height: 30%;
    border-radius: 50%;
    background: rgba(255, 210, 170, 0.2);
    filter: blur(0.5px);
}

.df-coin-text {
    position: relative;
    z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #ffe8bf;
    text-shadow:
        0 1px 0 rgba(78, 17, 10, 0.9),
        0 0 4px rgba(255, 120, 46, 0.45);
}

.player-coins span:last-child {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--primary);
    font-weight: 700;
}

.menu-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 18px 40px;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
}

.menu-main-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(100%, 430px);
    min-height: 0;
}

.menu-champion-wrap {
    width: min(24vw, 300px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -66px;
    transform: translateY(-18px);
}

.menu-rank-box {
    width: min(100%, 220px);
    margin-top: -62px;
    border-radius: 12px;
    padding: 8px 10px 9px;
    border: 1px solid rgba(255, 176, 92, 0.55);
    background: linear-gradient(170deg, rgba(54, 22, 18, 0.9) 0%, rgba(25, 14, 27, 0.95) 100%);
    box-shadow:
        0 0 14px rgba(255, 112, 36, 0.28),
        inset 0 0 0 1px rgba(255, 220, 168, 0.1);
}

.menu-rank-name {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #ffe6bc;
    text-shadow: 0 0 10px rgba(255, 126, 34, 0.35);
}

.menu-rank-stars {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rank-star {
    font-size: 14px;
    line-height: 1;
    color: rgba(150, 122, 90, 0.9);
    text-shadow: none;
}

.rank-star.filled {
    color: #ffd07d;
    text-shadow:
        0 0 7px rgba(255, 165, 59, 0.55),
        0 0 14px rgba(255, 96, 35, 0.38);
}

.menu-champion-logo-box {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-champion-logo {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 3;
    filter:
        drop-shadow(0 0 12px rgba(255, 130, 0, 0.55))
        drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
    animation: championLogoPulse 3.8s ease-in-out infinite;
}

.menu-champion-fire-layer {
    position: absolute;
    inset: -6% -14%;
    z-index: 2;
    pointer-events: none;
}

.champion-fire-particle {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe08a 0%, #ff9400 52%, rgba(255, 89, 0, 0) 76%);
    opacity: 0;
    animation: championFireAura 2.3s linear infinite;
}

.champion-fire-particle:nth-child(1) { top: 4%; left: 50%; animation-delay: -0.2s; }
.champion-fire-particle:nth-child(2) { top: 10%; left: 68%; animation-delay: -0.9s; }
.champion-fire-particle:nth-child(3) { top: 20%; left: 84%; animation-delay: -1.7s; }
.champion-fire-particle:nth-child(4) { top: 34%; left: 92%; animation-delay: -0.4s; }
.champion-fire-particle:nth-child(5) { top: 56%; left: 90%; animation-delay: -1.1s; }
.champion-fire-particle:nth-child(6) { top: 76%; left: 78%; animation-delay: -2.0s; }
.champion-fire-particle:nth-child(7) { top: 88%; left: 52%; animation-delay: -0.7s; }
.champion-fire-particle:nth-child(8) { top: 79%; left: 24%; animation-delay: -1.3s; }
.champion-fire-particle:nth-child(9) { top: 58%; left: 9%; animation-delay: -2.1s; }
.champion-fire-particle:nth-child(10) { top: 36%; left: 7%; animation-delay: -0.6s; }
.champion-fire-particle:nth-child(11) { top: 20%; left: 17%; animation-delay: -1.5s; }
.champion-fire-particle:nth-child(12) { top: 10%; left: 33%; animation-delay: -2.2s; }

.btn-find-duel {
    width: min(100%, 220px);
    border: 1px solid rgba(255, 184, 68, 0.8);
    border-radius: 12px;
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 32%, #ea580c 72%, #f59e0b 100%);
    padding: 11px 14px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        0 0 16px rgba(255, 89, 0, 0.45),
        0 8px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0;
}

.btn-find-duel:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
    box-shadow:
        0 0 24px rgba(255, 140, 0, 0.55),
        0 12px 24px rgba(0, 0, 0, 0.42);
}

.btn-find-duel:active {
    transform: translateY(0) scale(0.99);
}

.btn-find-duel-text {
    position: relative;
    z-index: 2;
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff2cb;
    text-shadow:
        0 0 10px rgba(255, 196, 92, 0.65),
        1px 1px 0 rgba(45, 18, 0, 0.95);
}

.btn-find-duel-glow {
    position: absolute;
    top: 0;
    left: -110%;
    width: 60%;
    height: 100%;
    z-index: 1;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 233, 170, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    animation: findDuelSweep 2.6s linear infinite;
}

@keyframes championLogoPulse {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-3px); filter: brightness(1.12); }
}

@keyframes championFireAura {
    0% { transform: scale(0.55); opacity: 0; }
    25% { opacity: 0.9; }
    75% { opacity: 0.48; }
    100% { transform: translateY(-16px) scale(1.25); opacity: 0; }
}

@keyframes findDuelSweep {
    0% { left: -110%; opacity: 0; }
    16% { opacity: 1; }
    54% { opacity: 0.9; }
    100% { left: 150%; opacity: 0; }
}

.menu-title {
    font-family: var(--font-title);
    font-size: clamp(20px, 3.2vw, 32px);
    color: var(--primary);
    text-shadow: 0 0 20px rgba(244, 197, 66, 0.3);
    margin-bottom: 16px;
    letter-spacing: 3px;
    text-align: left;
    white-space: nowrap;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    padding-right: 4px;
}

.menu-duelist-wrap {
    position: relative;
    width: min(38vw, 430px);
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-top: 24px;
}

.menu-duelist-image {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.65));
    animation: duelistFloat 3.2s ease-in-out infinite;
    transform-origin: 50% 60%;
}

.menu-duelist-aura {
    position: absolute;
    inset: -14% -16%;
    z-index: 2;
    pointer-events: none;
}

.duelist-fire-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffd166 0%, #ff8a00 58%, rgba(255, 69, 0, 0) 76%);
    opacity: 0;
    animation: duelistFireOrbit 2.8s linear infinite;
}

.duelist-fire-particle:nth-child(1) { top: 10%; left: 48%; animation-delay: -0.2s; }
.duelist-fire-particle:nth-child(2) { top: 20%; left: 75%; animation-delay: -0.9s; }
.duelist-fire-particle:nth-child(3) { top: 42%; left: 88%; animation-delay: -1.4s; }
.duelist-fire-particle:nth-child(4) { top: 74%; left: 80%; animation-delay: -0.5s; }
.duelist-fire-particle:nth-child(5) { top: 86%; left: 52%; animation-delay: -1.8s; }
.duelist-fire-particle:nth-child(6) { top: 79%; left: 22%; animation-delay: -2.2s; }
.duelist-fire-particle:nth-child(7) { top: 56%; left: 8%; animation-delay: -1.1s; }
.duelist-fire-particle:nth-child(8) { top: 30%; left: 14%; animation-delay: -0.6s; }
.duelist-fire-particle:nth-child(9) { top: 16%; left: 30%; animation-delay: -2.5s; }
.duelist-fire-particle:nth-child(10) { top: 50%; left: 50%; animation-delay: -1.6s; }

@keyframes duelistFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(-0.6deg); }
}

@keyframes duelistFireOrbit {
    0% { transform: scale(0.55); opacity: 0; filter: blur(0.4px); }
    20% { opacity: 0.95; }
    70% { opacity: 0.55; }
    100% { transform: translateY(-18px) scale(1.35); opacity: 0; filter: blur(1px); }
}

.menu-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(244, 197, 66, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.menu-btn:hover {
    background: rgba(244, 197, 66, 0.1);
    border-color: var(--primary);
    transform: translateZ(0) scale(1.015);
    box-shadow: var(--glow-gold);
}

.menu-btn-icon {
    font-size: 22px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 197, 66, 0.1);
    border-radius: 10px;
}

.menu-btn-text {
    display: flex;
    flex-direction: column;
}

.menu-btn-title {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-light);
    letter-spacing: 2px;
}

.menu-btn-desc {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
}

/* ============================================ */
/* DECK VIEWER                                  */
/* ============================================ */
.deck-bg {
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.deck-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(26, 26, 46, 0.9);
    border-bottom: 1px solid rgba(244, 197, 66, 0.2);
}

.deck-header h2 {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--primary);
}

.deck-header span {
    font-size: 12px;
    color: var(--text-dim);
}

.btn-back {
    background: none;
    border: 1px solid rgba(244, 197, 66, 0.3);
    color: var(--primary);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 11px;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: rgba(244, 197, 66, 0.1);
}

.deck-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    align-content: start;
}

.deck-builder-controls {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(16, 16, 28, 0.85);
    border-bottom: 1px solid rgba(244, 197, 66, 0.15);
}

.deck-builder-controls input,
.deck-builder-controls select {
    background: rgba(10, 10, 20, 0.9);
    border: 1px solid rgba(244, 197, 66, 0.25);
    color: #f2f2f2;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: var(--font-ui);
}

.deck-builder-controls input {
    flex: 1;
}

.deck-builder-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
}

.deck-panel {
    background: rgba(12, 12, 24, 0.75);
    border: 1px solid rgba(244, 197, 66, 0.18);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.deck-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(244, 197, 66, 0.15);
}

.deck-panel-header h3 {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--primary);
}

.deck-panel-header span {
    font-size: 11px;
    color: #d6d6d6;
}

/* ============================================ */
/* COIN FLIP                                    */
/* ============================================ */
.coinflip-bg {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a1a 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coinflip-content {
    text-align: center;
    padding: 30px;
}

.coinflip-title {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 10px;
}

.coinflip-desc {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 30px;
}

.coin {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.1s;
}

.coin.flipping {
    animation: coinFlip 2s ease-out forwards;
}

@keyframes coinFlip {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(1800deg); }
}

.coin.flipping.tails {
    animation: coinFlipTails 2s ease-out forwards;
}

@keyframes coinFlipTails {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(1980deg); }
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    backface-visibility: hidden;
    border: 4px solid var(--primary);
}

.coin-heads {
    background: linear-gradient(135deg, #f4c542 0%, #c9a030 100%);
}

.coin-tails {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    transform: rotateY(180deg);
}

.coinflip-result {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 20px;
    min-height: 30px;
}

/* ============================================ */
/* APOSTA                                       */
/* ============================================ */
.bet-bg {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a1a 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet-content {
    text-align: center;
    padding: 30px;
    max-width: 400px;
    width: 100%;
}

.bet-title {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 10px;
}

.bet-desc {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 30px;
}

.bet-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.coin-icon-big {
    font-size: 36px;
}

.df-coin-big {
    width: 38px;
    height: 38px;
}

.df-coin-big .df-coin-text {
    font-size: 13px;
}

.battle-df-coin {
    margin: 0 0 0 2px;
}

.bet-amount {
    font-family: var(--font-ui);
    font-size: 48px;
    color: var(--primary);
    font-weight: 900;
}

.bet-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.bet-btn {
    padding: 10px 20px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(244, 197, 66, 0.3);
    border-radius: 8px;
    color: var(--primary);
    font-family: var(--font-ui);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bet-btn:hover {
    background: rgba(244, 197, 66, 0.2);
}

.bet-balance {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 20px;
}

/* ============================================ */
/* CAMPO DE BATALHA                             */
/* ============================================ */
.battle-bg {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(6, 12, 20, 0.78) 0%, rgba(8, 18, 26, 0.72) 30%, rgba(10, 10, 18, 0.75) 70%, rgba(5, 8, 12, 0.85) 100%),
        url("fundofloresta.png") center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.battle-bg.portal-inferno-active {
    background:
        linear-gradient(180deg, rgba(40, 8, 4, 0.5) 0%, rgba(16, 4, 2, 0.45) 45%, rgba(8, 2, 2, 0.62) 100%),
        url("Campo-Demon.png") center center / cover no-repeat;
}

.battle-bg.portal-inferno-active::before {
    background:
        radial-gradient(circle at 22% 28%, rgba(255, 125, 45, 0.17) 0%, rgba(255, 98, 0, 0) 44%),
        radial-gradient(circle at 82% 74%, rgba(255, 77, 26, 0.2) 0%, rgba(255, 77, 26, 0) 42%);
}

.battle-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f4c542' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.turn-start-banner {
    position: absolute;
    top: 86px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.96);
    z-index: 35;
    pointer-events: none;
    opacity: 0;
    min-width: 240px;
    text-align: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 203, 112, 0.78);
    background:
        linear-gradient(135deg, rgba(114, 48, 13, 0.92), rgba(190, 82, 16, 0.88));
    color: #fff2d0;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-shadow: 0 0 10px rgba(255, 176, 84, 0.55), 0 1px 2px rgba(0, 0, 0, 0.65);
    box-shadow: 0 0 22px rgba(255, 128, 36, 0.35), inset 0 0 0 1px rgba(255, 224, 166, 0.2);
}

.turn-start-banner.active {
    animation: turnStartBannerFx 1.25s ease forwards;
}

.turn-start-banner.opponent {
    border-color: rgba(129, 196, 255, 0.72);
    background: linear-gradient(135deg, rgba(14, 58, 126, 0.92), rgba(30, 98, 196, 0.88));
    color: #dff2ff;
    text-shadow: 0 0 10px rgba(112, 196, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.65);
    box-shadow: 0 0 22px rgba(56, 156, 255, 0.32), inset 0 0 0 1px rgba(180, 228, 255, 0.2);
}

@keyframes turnStartBannerFx {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-16px) scale(0.92);
        filter: brightness(0.85);
    }
    18% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.03);
        filter: brightness(1.25);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: brightness(1.1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.97);
        filter: brightness(1);
    }
}

.magic-cast-banner {
    position: absolute;
    top: 128px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.96);
    z-index: 36;
    pointer-events: none;
    opacity: 0;
    min-width: 280px;
    text-align: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(193, 145, 255, 0.76);
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.92), rgba(124, 58, 237, 0.88));
    color: #f4eaff;
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-shadow: 0 0 10px rgba(199, 146, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.34), inset 0 0 0 1px rgba(236, 214, 255, 0.2);
}

.magic-cast-banner.active {
    animation: magicCastBannerFx 1.05s ease forwards;
}

.magic-cast-banner.fire {
    border-color: rgba(255, 170, 96, 0.78);
    background: linear-gradient(135deg, rgba(140, 44, 12, 0.92), rgba(220, 92, 18, 0.88));
    color: #ffe8cf;
}

.magic-cast-banner.ice {
    border-color: rgba(125, 224, 255, 0.78);
    background: linear-gradient(135deg, rgba(7, 79, 111, 0.92), rgba(14, 145, 178, 0.88));
    color: #e5fbff;
}

.magic-cast-banner.control {
    border-color: rgba(143, 190, 255, 0.78);
    background: linear-gradient(135deg, rgba(24, 62, 138, 0.92), rgba(37, 99, 235, 0.88));
    color: #e8f1ff;
}

.magic-cast-banner.shield {
    border-color: rgba(140, 245, 180, 0.78);
    background: linear-gradient(135deg, rgba(20, 99, 66, 0.92), rgba(22, 163, 74, 0.88));
    color: #e9fff1;
}

.magic-cast-banner.heal {
    border-color: rgba(172, 248, 190, 0.8);
    background: linear-gradient(135deg, rgba(22, 101, 52, 0.92), rgba(34, 197, 94, 0.88));
    color: #edfff4;
}

.magic-cast-banner.chaos {
    border-color: rgba(214, 165, 255, 0.8);
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.92), rgba(147, 51, 234, 0.88));
    color: #f7ecff;
}

.magic-cast-banner.buff {
    border-color: rgba(255, 227, 143, 0.8);
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.92), rgba(217, 119, 6, 0.88));
    color: #fff4db;
}

@keyframes magicCastBannerFx {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px) scale(0.9);
        filter: brightness(0.8);
    }
    18% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1.04);
        filter: brightness(1.2);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px) scale(0.97);
    }
}

.jackpot-global-banner {
    position: fixed;
    top: 74px;
    left: 0;
    width: 100%;
    height: 42px;
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.jackpot-global-banner.active {
    opacity: 1;
}

.jackpot-global-banner-track {
    position: absolute;
    top: 0;
    left: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 230, 148, 0.86);
    background:
        linear-gradient(90deg, rgba(71, 18, 4, 0.92), rgba(170, 62, 10, 0.9) 45%, rgba(247, 174, 48, 0.88) 100%);
    color: #fff7da;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 202, 89, 0.72), 0 1px 2px rgba(0, 0, 0, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 239, 196, 0.24) inset,
        0 0 18px rgba(255, 140, 48, 0.48),
        0 0 34px rgba(255, 191, 73, 0.26);
}

.jackpot-global-banner-track.animate {
    animation: jackpotGlobalTicker 6.2s linear forwards;
}

@keyframes jackpotGlobalTicker {
    0% {
        transform: translateX(0);
        filter: brightness(0.95);
    }
    8% {
        filter: brightness(1.2);
    }
    100% {
        transform: translateX(calc(-100vw - 100%));
        filter: brightness(1);
    }
}

/* HUD */
.battle-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background: rgba(10, 10, 26, 0.9);
    border-bottom: 1px solid rgba(244, 197, 66, 0.15);
    z-index: 5;
    flex-shrink: 0;
}

.player-hud {
    border-bottom: none;
    border-top: 1px solid rgba(244, 197, 66, 0.15);
}

.hud-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.hud-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid var(--primary);
    background: rgba(244, 197, 66, 0.1);
    flex-shrink: 0;
}

.opponent-avatar {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.hud-info {
    flex: 1;
    min-width: 0;
}

.hud-name {
    font-size: 11px;
    color: var(--text-light);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.hp-bar-container {
    width: 100%;
    height: 18px;
    background: rgba(10, 10, 26, 0.8);
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.hp-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--hp-green), #4ade80);
    border-radius: 9px;
    transition: width 0.5s ease;
    position: relative;
}

.hp-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px 9px 0 0;
}

.player-hp {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-mana {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #7dd3fc;
    background: rgba(14, 116, 144, 0.18);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 12px;
    padding: 3px 8px;
}

.mana-icon {
    font-size: 13px;
}

.hud-deck-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-dim);
}

.deck-icon {
    font-size: 16px;
}

/* BATTLEFIELD */
.battlefield {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 10px;
    gap: 5px;
    z-index: 2;
    min-height: 0;
}

.field-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 5px 0;
}

.card-slot {
    width: calc((100% - 30px) / 5);
    max-width: 90px;
    aspect-ratio: 2.5/3.5;
    border: 2px dashed rgba(244, 197, 66, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-slot:hover {
    border-color: rgba(244, 197, 66, 0.5);
    background: rgba(244, 197, 66, 0.05);
}

.card-slot.has-card {
    border: 2px solid rgba(244, 197, 66, 0.4);
    background: rgba(26, 26, 46, 0.5);
}

.card-slot.selected {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(244, 197, 66, 0.5);
    animation: selectedPulse 1s ease-in-out infinite;
}

.card-slot.attack-target {
    border-color: var(--danger);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
    animation: targetPulse 0.5s ease-in-out infinite;
}

.card-slot.attack-ready {
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
}

.card-slot.attack-spent {
    border-color: rgba(148, 163, 184, 0.45);
    box-shadow: none;
    filter: grayscale(0.5);
    opacity: 0.72;
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(244, 197, 66, 0.3); }
    50% { box-shadow: 0 0 25px rgba(244, 197, 66, 0.7); }
}

@keyframes targetPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.7); }
}

/* FIELD CARD */
.field-card {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    position: relative;
    animation: none;
    cursor: pointer;
}

.card-mana-cost {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(6, 78, 120, 0.85);
    border: 1px solid rgba(125, 211, 252, 0.6);
    color: #e0f2fe;
    font-size: 9px;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 4px;
    z-index: 2;
}

@keyframes cardPlace {
    from { transform: scale(0.5) rotateY(90deg); opacity: 0; }
    to { transform: scale(1) rotateY(0); opacity: 1; }
}

.field-card-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    z-index: 1;
}

.field-card-art::after {
    content: '';
}

.field-status-stack {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 3;
    pointer-events: none;
}

.field-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    background: rgba(15, 23, 42, 0.78);
    color: #e5e7eb;
}

.field-status-badge.shield {
    color: #dcfce7;
    border-color: rgba(34, 197, 94, 0.8);
    background: rgba(21, 128, 61, 0.7);
}

.field-status-badge.frozen {
    color: #e0f2fe;
    border-color: rgba(56, 189, 248, 0.85);
    background: rgba(3, 105, 161, 0.74);
}

.field-status-badge.chained {
    color: #ffedd5;
    border-color: rgba(251, 146, 60, 0.85);
    background: rgba(154, 52, 18, 0.74);
}

.field-card-stats {
    display: flex;
    justify-content: space-around;
    padding: 3px 4px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 8px;
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.field-card-mana {
    color: #67e8f9;
}

.field-card-atk {
    color: #ef4444;
}

.field-card-def {
    color: #3b82f6;
}

.field-card-name {
    font-size: 6px;
    text-align: center;
    padding: 1px 2px;
    background: rgba(0, 0, 0, 0.5);
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-card--back .field-card-art::after {
    display: none;
}

.field-card--facedown {
    cursor: help;
}

.field-card-barrel-trap {
    border: 1px solid rgba(255, 171, 80, 0.72);
    background: linear-gradient(160deg, rgba(70, 34, 16, 0.92), rgba(122, 52, 17, 0.9));
    box-shadow: inset 0 0 0 1px rgba(255, 217, 179, 0.12), 0 0 14px rgba(255, 122, 44, 0.32);
    cursor: default;
}

.field-card-barrel-art {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    text-shadow: 0 0 14px rgba(255, 194, 130, 0.5);
}

.field-back-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.card-reveal-flip {
    animation: cardRevealFlip 0.5s ease;
    transform-style: preserve-3d;
}

@keyframes cardRevealFlip {
    0% { transform: rotateY(0deg) scale(1); }
    50% { transform: rotateY(90deg) scale(1.02); }
    100% { transform: rotateY(0deg) scale(1); }
}

/* DIVIDER */
.field-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 15px;
    z-index: 3;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244, 197, 66, 0.4), transparent);
}

.turn-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(244, 197, 66, 0.3);
    border-radius: 20px;
}

.turn-timer {
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 900;
    color: var(--primary);
    min-width: 28px;
    text-align: center;
}

.turn-timer.warning {
    color: var(--danger);
    animation: timerPulse 0.5s ease-in-out infinite;
}

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

.turn-label {
    font-size: 9px;
    color: var(--text-light);
    letter-spacing: 2px;
}

.bet-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(244, 197, 66, 0.1);
    border-radius: 15px;
    font-size: 12px;
    color: var(--primary);
}

/* PLAYER HAND */
.player-hand {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    min-height: 110px;
    max-height: 130px;
    position: relative;
    z-index: 40;
    overflow: visible;
    flex-shrink: 0;
}

.hand-card {
    width: 72px;
    min-width: 72px;
    height: 105px;
    border-radius: 6px;
    display: block;
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    background: transparent;
    flex-shrink: 0;
}

@keyframes drawCard {
    from { transform: translateY(50px) scale(0.8); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.hand-card:hover {
    transform: translateY(-15px) scale(1.08);
    z-index: 60;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--primary);
}

.hand-card.selected {
    transform: translateY(-20px) scale(1.1);
    z-index: 70;
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(244, 197, 66, 0.6);
}

.hand-card.cannot-afford {
    opacity: 0.55;
    filter: grayscale(0.35);
}

.hand-card-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    z-index: 1;
}

.hand-face-down-btn {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    border: 1px solid rgba(125, 211, 252, 0.55);
    color: #7dd3fc;
    background: rgba(14, 116, 144, 0.82);
    border-radius: 999px;
    padding: 3px 9px;
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.25);
}

.hand-face-down-btn.active {
    color: #e0f2fe;
    border-color: rgba(103, 232, 249, 0.95);
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.95), rgba(14, 165, 233, 0.8));
}

.hand-use-magic-btn {
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    border: 1px solid rgba(251, 191, 36, 0.7);
    color: #fff7da;
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.95), rgba(217, 119, 6, 0.88));
    border-radius: 999px;
    padding: 3px 11px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.35);
}

.hand-card.magic-target {
    box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.75), 0 0 12px rgba(250, 204, 21, 0.45);
}

.hand-card-name {
    font-size: 7px;
    text-align: center;
    padding: 2px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hand-card-stats {
    display: flex;
    justify-content: space-around;
    padding: 3px 5px;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 1px 2px #000;
}

.hand-card:hover .hand-card-stats {
    opacity: 1;
}

.hand-card-atk {
    color: #ef4444;
}

.hand-card-def {
    color: #3b82f6;
}

/* ACTION BUTTONS */
.action-buttons {
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(10, 10, 26, 0.95);
    border-top: 1px solid rgba(244, 197, 66, 0.15);
    z-index: 10;
    flex-shrink: 0;
}

.btn-action {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid rgba(244, 197, 66, 0.3);
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    background: rgba(26, 26, 46, 0.8);
    color: var(--text-light);
}

.btn-end-turn {
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--secondary);
}

.btn-end-turn:hover {
    background: rgba(139, 92, 246, 0.2);
}

.btn-surrender {
    border-color: rgba(248, 113, 113, 0.5);
    color: #fca5a5;
}

.btn-surrender:hover {
    background: rgba(127, 29, 29, 0.22);
}

.btn-attack {
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--danger);
}

.btn-attack:hover {
    background: rgba(239, 68, 68, 0.2);
}

.btn-raise {
    border-color: rgba(244, 197, 66, 0.5);
    color: var(--primary);
}

.btn-music {
    border-color: rgba(125, 211, 252, 0.55);
    color: #7dd3fc;
}

.btn-music:hover {
    background: rgba(14, 116, 144, 0.25);
}

.btn-raise:hover {
    background: rgba(244, 197, 66, 0.2);
}

.btn-action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================ */
/* TUTORIAL OVERLAY                             */
/* ============================================ */
.tutorial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tutorial-overlay.hidden {
    display: none;
}

.tutorial-box {
    background: rgba(26, 26, 46, 0.98);
    border: 2px solid var(--primary);
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: var(--glow-gold);
    animation: fadeInUp 0.3s ease;
}

.tutorial-character {
    font-size: 48px;
    margin-bottom: 15px;
}

.tutorial-text {
    font-family: var(--font-medieval);
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-tutorial-next {
    padding: 10px 25px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 8px;
    color: #0a0a1a;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.btn-tutorial-next:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-gold);
}

/* ============================================ */
/* MODAIS                                       */
/* ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: rgba(26, 26, 46, 0.98);
    border: 2px solid var(--primary);
    border-radius: 15px;
    padding: 30px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: var(--glow-gold);
}

.modal-content h3 {
    font-family: var(--font-title);
    font-size: 22px;
    color: var(--primary);
    margin-bottom: 10px;
}

.modal-content p {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 20px;
}

.modal-buttons {
    display: flex;
    gap: 10px;
}

.coin-shop-content {
    width: min(1220px, 96vw);
    max-width: min(1220px, 96vw);
    padding: 20px 20px 22px;
    border: 1px solid rgba(255, 122, 40, 0.7);
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 120, 36, 0.2) 0%, rgba(0, 0, 0, 0) 32%),
        radial-gradient(circle at 88% 88%, rgba(255, 72, 36, 0.15) 0%, rgba(0, 0, 0, 0) 28%),
        rgba(12, 10, 22, 0.95);
    box-shadow:
        0 0 45px rgba(255, 100, 34, 0.3),
        inset 0 0 0 1px rgba(255, 180, 110, 0.15);
}

.coin-shop-content > p {
    color: #ffd7a8;
    text-shadow: 0 0 8px rgba(255, 116, 36, 0.28);
}

.buyer-name-content {
    width: min(560px, 92vw);
    max-width: min(560px, 92vw);
    border: 1px solid rgba(255, 141, 74, 0.65);
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 133, 57, 0.2) 0%, rgba(0, 0, 0, 0) 36%),
        rgba(16, 12, 26, 0.96);
}

.buyer-name-content label {
    display: block;
    margin-bottom: 6px;
    color: #ffe0bb;
    font-size: 12px;
    font-weight: 700;
}

#buyer-full-name-input {
    width: 100%;
    border: 1px solid rgba(255, 162, 89, 0.52);
    border-radius: 9px;
    padding: 10px 12px;
    background: rgba(21, 12, 18, 0.88);
    color: #fff4df;
    margin-bottom: 12px;
}

#buyer-name-status {
    margin-top: 10px;
    min-height: 18px;
}

.coin-shop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.coin-shop-close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 127, 56, 0.6);
    background: rgba(40, 13, 9, 0.88);
    color: #ffd7a5;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.coin-shop-close:hover {
    transform: scale(1.05);
    background: rgba(69, 20, 12, 0.95);
    box-shadow: 0 0 12px rgba(255, 89, 30, 0.35);
}

.coin-shop-track {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding: 4px 2px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.coin-offer-card {
    position: relative;
    flex: 0 0 265px;
    min-height: 295px;
    border-radius: 16px;
    border: 1px solid rgba(255, 130, 60, 0.32);
    background:
        linear-gradient(170deg, rgba(255, 129, 57, 0.12) 0%, rgba(90, 28, 20, 0.15) 32%, rgba(14, 10, 19, 0.93) 100%);
    padding: 16px 14px 14px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 191, 120, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.coin-offer-card::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -40%;
    width: 62%;
    height: 190%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 176, 110, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
    animation: coinOfferSweep 3.2s linear infinite;
}

.coin-offer-card h4 {
    color: #ffd9a7;
    font-size: 16px;
    letter-spacing: 0.8px;
}

.coin-offer-card .coin-offer-amount {
    color: #fff2dc;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 12px rgba(255, 123, 44, 0.35);
}

.coin-offer-card .coin-offer-bonus {
    color: #ffb97a;
    font-size: 13px;
    min-height: 34px;
    text-shadow: 0 0 10px rgba(255, 102, 36, 0.25);
}

.coin-offer-card .coin-offer-price {
    margin-top: auto;
    color: #fff2ce;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 0 14px rgba(255, 131, 46, 0.45);
}

.coin-offer-coin {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
}

.coin-offer-coin .df-coin-text {
    font-size: 9px;
}

.coin-offer-btn {
    margin-top: 8px;
    border-radius: 12px;
    padding: 11px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #fff7e6;
    background: linear-gradient(135deg, #ca3f1f 0%, #ff742f 50%, #d94c20 100%);
    border: 1px solid rgba(255, 192, 140, 0.35);
    box-shadow:
        0 6px 16px rgba(255, 76, 22, 0.34),
        inset 0 1px 0 rgba(255, 224, 175, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.coin-offer-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 8px 20px rgba(255, 76, 22, 0.42),
        inset 0 1px 0 rgba(255, 224, 175, 0.35);
}

.coin-offer-card.featured {
    border: 1px solid rgba(255, 201, 107, 0.65);
    background:
        radial-gradient(circle at 28% 10%, rgba(255, 172, 70, 0.34) 0%, rgba(0, 0, 0, 0) 38%),
        linear-gradient(175deg, rgba(255, 143, 54, 0.3) 0%, rgba(110, 24, 18, 0.28) 42%, rgba(16, 10, 22, 0.95) 100%);
    box-shadow:
        0 0 34px rgba(255, 118, 36, 0.4),
        inset 0 0 0 1px rgba(255, 220, 130, 0.25);
}

.coin-offer-card.featured .coin-offer-amount {
    color: #fff9e8;
    text-shadow: 0 0 16px rgba(255, 160, 60, 0.56);
}

.coin-offer-badge {
    align-self: flex-start;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #351400;
    background: linear-gradient(135deg, #ffe38f, #ffae35);
    box-shadow: 0 0 14px rgba(255, 170, 70, 0.5);
}

@keyframes coinOfferSweep {
    0% { left: -50%; opacity: 0; }
    12% { opacity: 1; }
    48% { opacity: 0.9; }
    100% { left: 150%; opacity: 0; }
}

.btn-accept {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, var(--success), #16a34a);
    border: none;
    border-radius: 8px;
    color: white;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
}

.btn-decline {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, var(--danger), #dc2626);
    border: none;
    border-radius: 8px;
    color: white;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
}

.matchmaking-content {
    max-width: 440px;
    border: 1px solid rgba(255, 156, 84, 0.65);
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 136, 52, 0.24) 0%, rgba(0, 0, 0, 0) 35%),
        rgba(18, 13, 25, 0.96);
    box-shadow:
        0 0 30px rgba(255, 97, 28, 0.34),
        inset 0 0 0 1px rgba(255, 218, 162, 0.08);
}

.matchmaking-time {
    margin: 8px auto 18px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffe5b3;
    text-shadow:
        0 0 10px rgba(255, 150, 59, 0.4),
        0 0 22px rgba(255, 86, 30, 0.3);
}

.matchmaking-pending-box {
    display: grid;
    gap: 8px;
    margin: 2px 0 14px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: rgba(30, 18, 36, 0.76);
}

.matchmaking-ready-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f8e9cc;
    font-size: 13px;
}

.matchmaking-coin-box {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.matchmaking-coin-label {
    margin: 0;
    color: #ffe8b6;
    font-size: 12px;
    font-weight: 700;
}

.matchmaking-coin-actions {
    display: flex;
    gap: 8px;
}

.matchmaking-coin-actions .btn-primary {
    flex: 1;
}

.matchmaking-coin-choice {
    min-height: 18px;
    color: #ffd58f;
    font-size: 12px;
    font-weight: 700;
}

.matchmaking-coin-reveal {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 4px 0 14px;
}

.matchmaking-coin-mini {
    width: 72px;
    height: 72px;
    position: relative;
    transform-style: preserve-3d;
}

.matchmaking-coin-mini.flipping {
    animation: matchmakingCoinFlip 1.05s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.matchmaking-coin-mini.show-tails {
    transform: rotateY(180deg);
}

.matchmaking-coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    backface-visibility: hidden;
    border: 2px solid rgba(255, 204, 106, 0.75);
    background: radial-gradient(circle at 30% 25%, rgba(255, 246, 205, 0.95), rgba(255, 170, 64, 0.9));
    box-shadow: 0 0 18px rgba(255, 162, 68, 0.42);
}

.matchmaking-coin-face.tails {
    transform: rotateY(180deg);
}

.matchmaking-coin-result-text {
    min-height: 22px;
    color: #ffe7b4;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: center;
}

@keyframes matchmakingCoinFlip {
    0% { transform: rotateY(0); filter: brightness(0.9); }
    35% { filter: brightness(1.25); }
    100% { transform: rotateY(1080deg); filter: brightness(1); }
}

.duel-hall-content {
    width: min(1280px, 98vw);
    max-width: min(1280px, 98vw);
    height: min(900px, 92vh);
    max-height: 92vh;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(24, 22, 44, 0.98), rgba(14, 14, 26, 0.98));
    border: 1px solid rgba(250, 204, 21, 0.35);
    border-radius: 14px;
    padding: 16px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.duel-hall-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

#duel-hall-list-view:not(.hidden),
#duel-hall-room-view:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.duel-hall-create-row {
    display: grid;
    grid-template-columns: 2.1fr 1fr 1.5fr auto;
    gap: 8px;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.duel-hall-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    flex: 0 0 auto;
}

.duel-hall-refresh-wrap {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.duel-hall-refresh-meta {
    font-size: 12px;
    color: #cbd5e1;
}

.btn-ghost {
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.45);
    color: #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-ghost:hover {
    background: rgba(51, 65, 85, 0.62);
}

.btn-ghost:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.duel-hall-filters {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr auto;
    gap: 8px;
    margin-bottom: 6px;
    flex: 0 0 auto;
}

.duel-hall-filters input,
.duel-hall-filters select {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
}

.duel-hall-filter-meta {
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 12px;
}

.duel-hall-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.duel-hall-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.55);
    color: #e2e8f0;
    font-size: 12px;
    padding: 6px 10px;
}

.duel-hall-pill strong {
    color: #ffffff;
}

.duel-hall-pill.open {
    border-color: rgba(34, 197, 94, 0.55);
    color: #d9f99d;
}

.duel-hall-pill.occupied {
    border-color: rgba(245, 158, 11, 0.6);
    color: #fde68a;
}

.duel-hall-pill.password {
    border-color: rgba(59, 130, 246, 0.55);
    color: #bfdbfe;
}

.duel-hall-create-panel {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 10px;
    background: rgba(15, 23, 42, 0.5);
    margin-bottom: 10px;
}

.duel-create-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.duel-step-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.5);
}

.duel-step-chip.active {
    color: #fef3c7;
    border-color: rgba(250, 204, 21, 0.65);
    background: rgba(120, 53, 15, 0.45);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.25);
}

.duel-create-step {
    display: grid;
    gap: 10px;
}

.duel-create-help {
    margin: 0 0 8px;
    color: #cbd5e1;
    font-size: 13px;
}

.duel-form-field {
    display: grid;
    gap: 6px;
    align-content: start;
}

.duel-form-field > span:first-child {
    font-size: 12px;
    color: #dbeafe;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.duel-df-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.65);
    border-radius: 8px;
    padding: 0 8px;
}

.duel-df-input-wrap input {
    border: none !important;
    background: transparent !important;
    padding-left: 0;
}

.duel-df-input-coin {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.wizard-step-1 {
    grid-template-columns: 1.5fr 1fr;
}

.wizard-step-2 {
    grid-template-columns: 1fr;
}

.duel-hall-create-row input {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
}

.duel-stake-quick-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.duel-stake-chip {
    border: 1px solid rgba(250, 204, 21, 0.45);
    background: rgba(120, 53, 15, 0.35);
    color: #fde68a;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.duel-stake-chip:hover {
    background: rgba(146, 64, 14, 0.55);
    border-color: rgba(250, 204, 21, 0.75);
}

.duel-create-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.duel-room-list {
    display: grid;
    gap: 8px;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.duel-room-card {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) auto;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    padding: 7px 9px;
    background: rgba(15, 23, 42, 0.5);
}

.duel-room-card .btn-primary {
    width: auto;
    margin-top: 0;
    padding: 6px 10px;
    justify-self: end;
    min-height: 32px;
}

.duel-room-card strong {
    line-height: 1.2;
}

.duel-hall-toolbar .btn-primary,
.duel-hall-toolbar .btn-decline,
.duel-hall-create-row .btn-primary {
    width: auto;
    margin-top: 0;
}

.duel-hall-create-row .btn-primary {
    align-self: end;
    white-space: nowrap;
}

.duel-room-lock {
    color: #facc15;
    margin-right: 4px;
}

.duel-room-rank {
    color: #cbd5e1;
    font-size: 11px;
}

.duel-room-meta {
    display: grid;
    gap: 4px;
    justify-items: start;
    color: #cbd5e1;
    font-size: 11px;
}

.duel-room-afford-bad {
    color: #fca5a5;
    font-weight: 700;
    font-size: 11px;
}

.duel-room-status {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.55);
}

.duel-room-status.open {
    color: #c7f9cc;
    border-color: rgba(34, 197, 94, 0.6);
    background: rgba(21, 128, 61, 0.22);
}

.duel-room-status.occupied {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(180, 83, 9, 0.22);
}

.duel-room-status.ready {
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, 0.65);
    background: rgba(29, 78, 216, 0.22);
}

.duel-room-status.offline {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(153, 27, 27, 0.25);
}

.duel-room-stake {
    color: #f8fafc;
    font-weight: 700;
}

.duel-room-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.duel-room-delete-btn {
    border: 1px solid rgba(248, 113, 113, 0.55);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.5);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.duel-room-stake-line {
    color: #facc15;
    margin: 8px 0 12px;
}

.duel-room-vs-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
}

.duel-room-player {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.5);
    padding: 12px;
    display: grid;
    gap: 6px;
    justify-items: center;
    min-height: 178px;
}

.duel-room-avatar-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid rgba(250, 204, 21, 0.4);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.8);
}

.duel-room-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.duel-room-avatar-fallback {
    font-size: 36px;
    opacity: 0.85;
}

.duel-room-vs-text {
    font-size: 24px;
    font-weight: 900;
    color: #facc15;
    text-shadow: 0 0 16px rgba(250, 204, 21, 0.4);
}

.duel-ready-state {
    font-size: 12px;
    color: #cbd5e1;
}

.duel-ready-state.ok {
    color: #86efac;
    font-weight: 700;
}

.duel-room-actions {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

.btn-small {
    padding: 6px 10px;
    font-size: 11px;
}

.ranking-content {
    width: min(760px, 95vw);
    max-width: min(760px, 95vw);
    height: min(86vh, 760px);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 166, 80, 0.65);
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 135, 50, 0.2) 0%, rgba(0, 0, 0, 0) 30%),
        rgba(15, 12, 25, 0.96);
}

.ranking-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    gap: 14px;
}

.ranking-side-left {
    border: 1px solid rgba(255, 166, 80, 0.25);
    border-radius: 12px;
    background: rgba(21, 13, 23, 0.78);
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.ranking-side-right {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ranking-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ranking-content .ranking-prize-line,
.ranking-content .coin-offer-amount.ranking-prize-line {
    color: #fff2dc !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-align: center;
    flex-wrap: wrap;
    text-shadow: 0 0 12px rgba(255, 123, 44, 0.35);
}

.ranking-prize-line .coin-offer-coin {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.ranking-prize-line .coin-offer-coin .df-coin-text {
    font-size: 8px;
}

.season-prize-highlight {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 201, 107, 0.62);
    background:
        radial-gradient(circle at 28% 10%, rgba(255, 172, 70, 0.32) 0%, rgba(0, 0, 0, 0) 38%),
        linear-gradient(175deg, rgba(255, 143, 54, 0.28) 0%, rgba(110, 24, 18, 0.26) 42%, rgba(16, 10, 22, 0.95) 100%);
    box-shadow:
        0 0 30px rgba(255, 118, 36, 0.34),
        inset 0 0 0 1px rgba(255, 220, 130, 0.2);
    padding: 8px 12px;
    overflow: hidden;
}

.season-prize-highlight::before {
    content: '';
    position: absolute;
    top: -45%;
    left: -40%;
    width: 62%;
    height: 190%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 176, 110, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
    animation: coinOfferSweep 3.2s linear infinite;
}

.ranking-refresh-line {
    color: #ffbe82;
    font-size: 12px;
    margin: 0;
    text-align: center;
}

.ranking-season-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.ranking-season-logo {
    width: min(100%, 175px);
    height: auto;
    filter:
        drop-shadow(0 0 10px rgba(255, 118, 34, 0.45))
        drop-shadow(0 6px 13px rgba(0, 0, 0, 0.42));
}


.ranking-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ranking-tab {
    flex: 1;
    border: 1px solid rgba(255, 157, 69, 0.5);
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(45, 22, 15, 0.85);
    color: #ffdcb0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    cursor: pointer;
}

.ranking-tab.active {
    background: linear-gradient(135deg, #8f2d18 0%, #ce4f1f 55%, #ff8d37 100%);
    color: #fff5df;
    box-shadow: 0 0 14px rgba(255, 125, 38, 0.38);
}

.ranking-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ranking-panel {
    flex: 1 1 auto;
    min-height: 0;
}

.ranking-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
}

.ranking-filter-row label {
    color: #ffd6a6;
    font-size: 12px;
}

#ranking-rank-filter {
    border: 1px solid rgba(255, 157, 69, 0.5);
    border-radius: 9px;
    background: rgba(26, 16, 23, 0.9);
    color: #ffe7c7;
    padding: 8px 10px;
    min-width: 180px;
}

.ranking-list {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ranking-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(120px, 0.9fr);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 152, 60, 0.28);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(28, 17, 24, 0.82);
}

.ranking-pos {
    font-weight: 900;
    color: #ffdba8;
}

.ranking-name {
    color: #fff0d3;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-meta {
    text-align: right;
    color: #ffb978;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-my-position {
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 181, 96, 0.38);
    background: rgba(29, 16, 17, 0.8);
    color: #ffe3ba;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .ranking-body {
        grid-template-columns: 1fr;
    }

    .ranking-side-left {
        padding: 10px;
    }
}

.profile-content {
    width: min(980px, 96vw);
    max-width: min(980px, 96vw);
    border: 1px solid rgba(104, 169, 255, 0.55);
    background:
        radial-gradient(circle at 10% 8%, rgba(63, 124, 255, 0.18) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(165deg, rgba(10, 22, 47, 0.98) 0%, rgba(12, 10, 28, 0.98) 100%);
}

.jackpot-content {
    width: min(980px, 96vw);
    max-width: min(980px, 96vw);
    border: 1px solid rgba(255, 77, 166, 0.72);
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 116, 194, 0.16) 0%, rgba(0, 0, 0, 0) 34%),
        radial-gradient(circle at 85% 85%, rgba(255, 96, 170, 0.15) 0%, rgba(0, 0, 0, 0) 34%),
        rgba(16, 8, 24, 0.96);
    box-shadow: 0 0 36px rgba(255, 75, 170, 0.28);
}

.jackpot-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jackpot-help {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 164, 218, 0.7);
    color: #ffe7f7;
    font-size: 13px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    background: rgba(71, 20, 63, 0.85);
    box-shadow: 0 0 10px rgba(255, 122, 196, 0.32);
}

.jackpot-help-tooltip {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 360px;
    border: 1px solid rgba(255, 147, 205, 0.6);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(19, 8, 26, 0.96);
    color: #ffd9f1;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
    z-index: 5;
}

.jackpot-help:hover .jackpot-help-tooltip,
.jackpot-help:focus-visible .jackpot-help-tooltip {
    opacity: 1;
}

.jackpot-bank-line {
    color: #ffd6ef;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.jackpot-max-bet-line {
    color: #ffc6e6;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.jackpot-season-line {
    margin-bottom: 12px;
    color: #ffb7dc;
}

.jackpot-controls {
    display: grid;
    grid-template-columns: 1fr 180px auto auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 12px;
}

.jackpot-controls label {
    text-align: left;
    color: #ffe8f5;
    font-size: 12px;
    font-weight: 700;
}

#jackpot-bet-df {
    border: 1px solid rgba(255, 141, 210, 0.5);
    border-radius: 8px;
    padding: 9px 10px;
    background: rgba(35, 12, 40, 0.82);
    color: #fff;
}

.btn-jackpot-auto {
    min-width: 116px;
    background: linear-gradient(135deg, #5a1a70, #8d2cb1);
}

.btn-jackpot-auto.active {
    background: linear-gradient(135deg, #13743e, #24b86d);
    box-shadow: 0 0 18px rgba(36, 184, 109, 0.45);
}

.jackpot-slots {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.jackpot-slot {
    border: 1px solid rgba(255, 141, 209, 0.45);
    border-radius: 10px;
    background: rgba(34, 14, 44, 0.85);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    contain: layout paint;
    will-change: transform;
}

.jackpot-slot.spinning::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 187, 237, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
    animation: jackpotShine 0.55s linear infinite;
}

.jackpot-slot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.jackpot-slot span {
    font-size: 38px;
}

.jackpot-paytable {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    color: #ffd7ef;
    font-size: 12px;
}

.jackpot-paytable span {
    border: 1px solid rgba(255, 133, 201, 0.38);
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(66, 18, 56, 0.55);
}

@media (max-width: 900px) {
    .jackpot-help-tooltip {
        left: 0;
        transform: none;
        min-width: 220px;
        max-width: min(72vw, 300px);
    }
}

@keyframes jackpotShine {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}

.profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.profile-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.profile-tab {
    flex: 1;
    border: 1px solid rgba(118, 170, 255, 0.45);
    border-radius: 10px;
    padding: 9px;
    background: rgba(20, 34, 63, 0.8);
    color: #d8ecff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    cursor: pointer;
}

.profile-tab.active {
    background: linear-gradient(135deg, #24529d 0%, #2f76d8 60%, #4aa3ff 100%);
    box-shadow: 0 0 14px rgba(84, 153, 255, 0.45);
    color: #f3fbff;
}

.profile-panel {
    min-height: 460px;
}

.profile-overview-grid {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 16px;
}

.profile-avatar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.profile-photo-ring {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid rgba(124, 185, 255, 0.72);
    background:
        radial-gradient(circle at 28% 22%, rgba(147, 201, 255, 0.55) 0%, rgba(0, 0, 0, 0) 32%),
        conic-gradient(from 0deg, rgba(70, 128, 255, 0.55), rgba(132, 196, 255, 0.2), rgba(70, 128, 255, 0.55));
    box-shadow:
        0 0 28px rgba(72, 141, 255, 0.42),
        inset 0 0 40px rgba(24, 56, 116, 0.58);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    animation: profileRingPulse 2.6s ease-in-out infinite;
}

@keyframes profileRingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 24px rgba(72, 141, 255, 0.4), inset 0 0 34px rgba(24, 56, 116, 0.56);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 34px rgba(104, 170, 255, 0.56), inset 0 0 46px rgba(35, 81, 160, 0.68);
    }
}

.profile-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    color: #d9edff;
    font-size: 13px;
    line-height: 1.35;
}

#profile-photo-status {
    text-align: center;
    min-height: 18px;
}

.profile-nick-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#profile-login-name {
    color: #e4f3ff;
    font-size: 15px;
    font-weight: 800;
}

.profile-edit-nick-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(114, 178, 255, 0.6);
    background: rgba(18, 49, 96, 0.8);
    cursor: pointer;
}

.profile-rename-nick-box {
    width: 100%;
    display: grid;
    gap: 8px;
}

#profile-rename-nick-input {
    border: 1px solid rgba(114, 178, 255, 0.46);
    border-radius: 8px;
    background: rgba(12, 26, 50, 0.9);
    color: #ebf7ff;
    padding: 9px 10px;
}

.profile-stats-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.profile-kpi-box {
    border: 1px solid rgba(118, 170, 255, 0.35);
    border-radius: 10px;
    background: rgba(21, 34, 60, 0.74);
    padding: 10px 8px;
    text-align: center;
}

.profile-kpi-label {
    display: block;
    color: #afcef2;
    font-size: 11px;
    margin-bottom: 4px;
}

.profile-kpi-box strong {
    color: #f0f8ff;
    font-size: 17px;
}

.profile-radar-wrap {
    flex: 1;
    border: 1px solid rgba(118, 170, 255, 0.35);
    border-radius: 12px;
    background: rgba(10, 21, 43, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

#profile-radar-chart {
    width: min(100%, 560px);
    height: 320px;
}

.withdraw-form {
    border: 1px solid rgba(118, 170, 255, 0.28);
    border-radius: 12px;
    background: rgba(18, 32, 57, 0.72);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.withdraw-form label {
    color: #d8edff;
    font-size: 12px;
    font-weight: 600;
}

.withdraw-form input,
.withdraw-form select {
    border: 1px solid rgba(118, 170, 255, 0.45);
    border-radius: 8px;
    background: rgba(8, 19, 39, 0.86);
    color: #edf7ff;
    padding: 10px;
}

.withdraw-form input.withdraw-invalid,
.withdraw-form select.withdraw-invalid,
#withdraw-terms.withdraw-invalid {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.35);
}

.withdraw-warning {
    margin: 0;
    color: #ff7979;
    font-size: 12px;
    font-weight: 700;
}

.withdraw-conversion {
    margin: 0;
    color: #34d399;
    font-size: 13px;
    font-weight: 700;
    display: block;
}

#withdraw-conversion {
    color: #22c55e !important;
}

.withdraw-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.withdraw-terms input {
    margin-top: 3px;
}

.withdraw-terms span {
    color: #ff6b6b !important;
    font-size: 12px;
    line-height: 1.35;
}

.profile-history-list {
    max-height: 460px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-history-item {
    border: 1px solid rgba(118, 170, 255, 0.35);
    border-radius: 10px;
    background: rgba(20, 33, 59, 0.78);
    padding: 8px 10px;
    color: #deeeff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding-right: 96px;
}

.profile-history-head {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 0 auto;
}

.profile-history-item strong {
    color: #f6fbff;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.profile-history-badge {
    position: absolute;
    right: 10px;
    top: 8px;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.profile-history-badge.pending {
    background: rgba(255, 185, 88, 0.2);
    border: 1px solid rgba(255, 198, 110, 0.55);
    color: #ffd28e;
}

.profile-history-badge.paid {
    background: rgba(84, 215, 157, 0.16);
    border: 1px solid rgba(107, 225, 170, 0.55);
    color: #8bf0be;
}

.profile-history-value {
    color: #f5fbff;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.inline-df-coin {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 4px 0 2px;
}

.inline-df-coin .df-coin-text {
    font-size: 8px;
}

.profile-history-meta {
    color: #b6d0ea;
    font-size: 12px;
    flex: 0 0 auto;
}

.profile-history-item.pending {
    border-color: rgba(255, 199, 105, 0.5);
}

.profile-history-item.paid {
    border-color: rgba(82, 214, 154, 0.5);
}

.admin-panel-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 12px;
}

.admin-card {
    border: 1px solid rgba(118, 170, 255, 0.28);
    border-radius: 12px;
    background: rgba(18, 32, 57, 0.72);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.admin-card h4 {
    margin: 0 0 4px 0;
    color: #e7f3ff;
}

.admin-card label {
    color: #d8edff;
    font-size: 12px;
    font-weight: 600;
}

.admin-card input {
    border: 1px solid rgba(118, 170, 255, 0.45);
    border-radius: 8px;
    background: rgba(8, 19, 39, 0.86);
    color: #edf7ff;
    padding: 10px;
}

.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admin-pending-list {
    max-height: 420px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-pending-item {
    border: 1px solid rgba(255, 199, 105, 0.45);
    border-radius: 10px;
    background: rgba(24, 36, 59, 0.72);
    padding: 8px;
    display: grid;
    gap: 6px;
}

.admin-pending-line {
    color: #cfe4ff;
    font-size: 12px;
}

.admin-pending-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-pending-empty {
    color: #9bbfe2;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .admin-panel-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* RESULTADO DO DUELO                           */
/* ============================================ */
.result-bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.result-bg.victory {
    background: radial-gradient(ellipse at center, #1a2a0a 0%, #0a0a1a 70%);
}

.result-bg.defeat {
    background: radial-gradient(ellipse at center, #2a0a0a 0%, #0a0a1a 70%);
}

.result-content {
    text-align: center;
    z-index: 2;
    padding: 30px;
    animation: resultAppear 0.8s ease;
}

@keyframes resultAppear {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.result-title {
    font-family: var(--font-title);
    font-size: clamp(36px, 10vw, 72px);
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 10px;
}

.result-title.victory-text {
    color: var(--primary);
    text-shadow: 0 0 30px rgba(244, 197, 66, 0.5), 0 0 60px rgba(244, 197, 66, 0.3);
}

.result-title.defeat-text {
    color: var(--danger);
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.5), 0 0 60px rgba(239, 68, 68, 0.3);
}

.result-subtitle {
    font-family: var(--font-medieval);
    font-size: 18px;
    color: var(--text-dim);
    margin-bottom: 30px;
}

.result-rewards {
    margin-bottom: 30px;
}

.reward-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reward-value {
    font-family: var(--font-ui);
    font-size: 36px;
    font-weight: 900;
    color: var(--primary);
}

.reward-value.loss {
    color: var(--danger);
}

.btn-large {
    padding: 16px 40px;
    font-size: 14px;
}

.result-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================ */
/* EFEITOS GLOBAIS                              */
/* ============================================ */
.damage-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 500;
    opacity: 0;
}

.damage-flash.active {
    animation: damageFlash 0.3s ease;
}

@keyframes damageFlash {
    0% { opacity: 0; background: rgba(239, 68, 68, 0.4); }
    50% { opacity: 1; background: rgba(239, 68, 68, 0.4); }
    100% { opacity: 0; }
}

.damage-flash.heal {
    animation: healFlash 0.3s ease;
}

@keyframes healFlash {
    0% { opacity: 0; background: rgba(34, 197, 94, 0.3); }
    50% { opacity: 1; background: rgba(34, 197, 94, 0.3); }
    100% { opacity: 0; }
}

.damage-flash.magic {
    animation: magicFlash 0.34s ease;
}

@keyframes magicFlash {
    0% { opacity: 0; background: rgba(168, 85, 247, 0.28); }
    50% { opacity: 1; background: rgba(168, 85, 247, 0.28); }
    100% { opacity: 0; }
}

.damage-flash.magic-fire { animation-name: magicFlashFire; }
.damage-flash.magic-ice { animation-name: magicFlashIce; }
.damage-flash.magic-control { animation-name: magicFlashControl; }
.damage-flash.magic-shield { animation-name: magicFlashShield; }
.damage-flash.magic-heal { animation-name: magicFlashHeal; }
.damage-flash.magic-chaos { animation-name: magicFlashChaos; }
.damage-flash.magic-buff { animation-name: magicFlashBuff; }

@keyframes magicFlashFire {
    0% { opacity: 0; background: rgba(255, 102, 38, 0.26); }
    50% { opacity: 1; background: rgba(255, 102, 38, 0.26); }
    100% { opacity: 0; }
}

@keyframes magicFlashIce {
    0% { opacity: 0; background: rgba(56, 189, 248, 0.24); }
    50% { opacity: 1; background: rgba(56, 189, 248, 0.24); }
    100% { opacity: 0; }
}

@keyframes magicFlashControl {
    0% { opacity: 0; background: rgba(96, 165, 250, 0.22); }
    50% { opacity: 1; background: rgba(96, 165, 250, 0.22); }
    100% { opacity: 0; }
}

@keyframes magicFlashShield {
    0% { opacity: 0; background: rgba(74, 222, 128, 0.2); }
    50% { opacity: 1; background: rgba(74, 222, 128, 0.2); }
    100% { opacity: 0; }
}

@keyframes magicFlashHeal {
    0% { opacity: 0; background: rgba(34, 197, 94, 0.2); }
    50% { opacity: 1; background: rgba(34, 197, 94, 0.2); }
    100% { opacity: 0; }
}

@keyframes magicFlashChaos {
    0% { opacity: 0; background: rgba(168, 85, 247, 0.28); }
    50% { opacity: 1; background: rgba(168, 85, 247, 0.28); }
    100% { opacity: 0; }
}

@keyframes magicFlashBuff {
    0% { opacity: 0; background: rgba(245, 158, 11, 0.22); }
    50% { opacity: 1; background: rgba(245, 158, 11, 0.22); }
    100% { opacity: 0; }
}

/* BATTLE LOG */
.battle-log {
    position: fixed;
    bottom: 60px;
    right: 10px;
    width: 250px;
    max-height: 300px;
    background: rgba(10, 10, 26, 0.95);
    border: 1px solid rgba(244, 197, 66, 0.3);
    border-radius: 10px;
    z-index: 50;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.battle-log.hidden {
    display: none;
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(244, 197, 66, 0.1);
    font-size: 11px;
    color: var(--primary);
}

.log-header button {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
}

.log-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.6;
}

.log-content p {
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-toggle-log {
    position: fixed;
    bottom: 60px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(244, 197, 66, 0.3);
    font-size: 16px;
    cursor: pointer;
    z-index: 45;
    display: none;
}

/* CARD DETAIL MODAL */
.card-detail-content {
    background: rgba(26, 26, 46, 0.98);
    border: 2px solid var(--primary);
    border-radius: 15px;
    padding: 25px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: var(--glow-gold);
}

.detail-card {
    width: 140px;
    height: 200px;
    margin: 0 auto 15px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    border: none;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.detail-info h3 {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--primary);
    margin-bottom: 5px;
}

.detail-element {
    font-size: 12px;
    color: var(--secondary);
    margin-bottom: 10px;
}

.detail-description {
    font-family: var(--font-medieval);
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 15px;
    font-style: italic;
}

.detail-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
}

.detail-atk {
    color: #ef4444;
}

.detail-def {
    color: #3b82f6;
}

.btn-close-detail {
    margin-top: 15px;
    padding: 8px 20px;
    background: rgba(244, 197, 66, 0.2);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary);
    font-family: var(--font-ui);
    font-size: 11px;
    cursor: pointer;
    letter-spacing: 2px;
}

/* ============================================ */
/* CARD DESTROY ANIMATION                       */
/* ============================================ */
.card-destroying {
    animation: cardDestroy 0.8s ease forwards;
}

@keyframes cardDestroy {
    0% { transform: scale(1); opacity: 1; filter: brightness(1); }
    30% { transform: scale(1.1); filter: brightness(2) saturate(0); }
    60% { transform: scale(0.8); opacity: 0.5; filter: brightness(3) hue-rotate(30deg); }
    100% { transform: scale(0) rotate(20deg); opacity: 0; filter: brightness(5); }
}

/* ATTACK ANIMATION */
.card-attacking {
    animation: cardAttack 0.5s ease;
}

@keyframes cardAttack {
    0% { transform: translateY(0); }
    30% { transform: translateY(-20px) scale(1.1); }
    60% { transform: translateY(10px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

.card-hit {
    animation: cardHit 0.4s ease;
}

.card-slot.magic-impact {
    border-color: rgba(196, 145, 255, 0.85) !important;
    box-shadow: 0 0 18px rgba(147, 51, 234, 0.55), inset 0 0 0 1px rgba(240, 220, 255, 0.32);
    animation: magicImpactPulse 0.6s ease;
}

.card-slot.magic-impact-fire {
    border-color: rgba(255, 164, 92, 0.88) !important;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.55), inset 0 0 0 1px rgba(255, 223, 183, 0.3);
}

.card-slot.magic-impact-ice {
    border-color: rgba(125, 230, 255, 0.88) !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.55), inset 0 0 0 1px rgba(215, 247, 255, 0.3);
}

.card-slot.magic-impact-control {
    border-color: rgba(147, 197, 253, 0.88) !important;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.55), inset 0 0 0 1px rgba(220, 235, 255, 0.3);
}

.card-slot.magic-impact-shield {
    border-color: rgba(134, 239, 172, 0.88) !important;
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.52), inset 0 0 0 1px rgba(223, 255, 234, 0.3);
}

.card-slot.magic-impact-heal {
    border-color: rgba(134, 239, 172, 0.88) !important;
    box-shadow: 0 0 18px rgba(22, 163, 74, 0.5), inset 0 0 0 1px rgba(223, 255, 234, 0.28);
}

.card-slot.magic-impact-chaos {
    border-color: rgba(216, 180, 254, 0.88) !important;
    box-shadow: 0 0 18px rgba(147, 51, 234, 0.55), inset 0 0 0 1px rgba(245, 232, 255, 0.3);
}

.card-slot.magic-impact-buff {
    border-color: rgba(253, 230, 138, 0.88) !important;
    box-shadow: 0 0 18px rgba(217, 119, 6, 0.5), inset 0 0 0 1px rgba(255, 243, 202, 0.3);
}

@keyframes magicImpactPulse {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.04); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes cardHit {
    0% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(-8px); filter: brightness(2); }
    50% { transform: translateX(8px); filter: brightness(1.5); }
    75% { transform: translateX(-4px); filter: brightness(1.2); }
    100% { transform: translateX(0); filter: brightness(1); }
}

/* DAMAGE NUMBER POPUP */
.damage-popup {
    position: fixed;
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 900;
    color: var(--danger);
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.8), 2px 2px 0 #000;
    pointer-events: none;
    z-index: 100;
    animation: damagePopup 1.2s ease forwards;
}

@keyframes damagePopup {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { transform: translateY(-10px) scale(1.3); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

/* FIRE PARTICLES */
.fire-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 150;
    animation: fireParticle 0.8s ease-out forwards;
}

.mana-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 160;
    background: radial-gradient(circle, #67e8f9 0%, #0ea5e9 65%, rgba(14, 165, 233, 0.2) 100%);
    box-shadow: 0 0 8px rgba(103, 232, 249, 0.8);
    animation: manaParticle 0.9s ease-out forwards;
}

@keyframes manaParticle {
    0% { transform: translate(0, 0) scale(0.7); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.2); opacity: 0; }
}

@keyframes fireParticle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ELEMENT COLORS FOR CARDS */
.element-aqua { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.element-mago { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.element-demonio { background: linear-gradient(135deg, #7f1d1d, #991b1b); }
.element-dinossauro { background: linear-gradient(135deg, #65a30d, #4d7c0f); }
.element-dragao { background: linear-gradient(135deg, #dc2626, #f97316); }
.element-fada { background: linear-gradient(135deg, #f9a8d4, #f472b6); }
.element-besta { background: linear-gradient(135deg, #92400e, #a16207); }
.element-besta-guerreira { background: linear-gradient(135deg, #b45309, #d97706); }
.element-besta-alada { background: linear-gradient(135deg, #7dd3fc, #38bdf8); }
.element-besta-divina { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.element-guerreiro { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.element-inseto { background: linear-gradient(135deg, #84cc16, #65a30d); }
.element-maquina { background: linear-gradient(135deg, #6b7280, #4b5563); }
.element-peixe { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.element-planta { background: linear-gradient(135deg, #16a34a, #15803d); }
.element-psiquico { background: linear-gradient(135deg, #c084fc, #a855f7); }
.element-piro { background: linear-gradient(135deg, #f97316, #ea580c); }
.element-reptil { background: linear-gradient(135deg, #4d7c0f, #365314); }
.element-rocha { background: linear-gradient(135deg, #78716c, #57534e); }
.element-serpente-marinha { background: linear-gradient(135deg, #0e7490, #155e75); }
.element-trovao { background: linear-gradient(135deg, #eab308, #ca8a04); }
.element-wyrm { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.element-zumbi { background: linear-gradient(135deg, #581c87, #4c1d95); }

/* Disable element background gradients on card wrappers when artwork should be the only background. */
.hand-card[class*="element-"],
.field-card[class*="element-"],
.deck-card[class*="element-"],
.tavern-reveal-card[class*="element-"],
.detail-card[class*="element-"] {
    background: transparent !important;
}

/* DECK CARD IN GRID */
.deck-card {
    aspect-ratio: 2.5/3.5;
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.deck-card:hover {
    transform: scale(1.05);
    border-color: var(--primary);
    box-shadow: var(--glow-gold);
}

.deck-card-art {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.deck-card-rarity {
    color: #c7defa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.card-art-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

@keyframes rarityEpicPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(179, 129, 255, 0.42), inset 0 0 0 rgba(116, 71, 204, 0); }
    50% { box-shadow: inset 0 0 0 1px rgba(200, 156, 255, 0.74), inset 0 0 20px rgba(121, 73, 224, 0.34); }
}

@keyframes rarityLegendaryPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 203, 115, 0.55),
            inset 0 0 0 rgba(212, 108, 14, 0),
            0 0 8px rgba(255, 182, 76, 0.32);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 219, 150, 0.92),
            inset 0 0 28px rgba(224, 119, 29, 0.48),
            0 0 14px rgba(255, 190, 88, 0.55);
    }
}

@keyframes rarityLegendaryAura {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.01); }
}

@keyframes rarityEpicAura {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.01); }
}

@keyframes rarityParticleRiseA {
    0% { transform: translate3d(-0.4%, 12%, 0); opacity: 0.28; }
    25% { transform: translate3d(1.4%, 4%, 0); opacity: 0.54; }
    50% { transform: translate3d(1.1%, -10%, 0); opacity: 0.7; }
    75% { transform: translate3d(-1.3%, -2%, 0); opacity: 0.46; }
    100% { transform: translate3d(-0.4%, 12%, 0); opacity: 0.28; }
}

@keyframes rarityParticleRiseB {
    0% { transform: translate3d(0.5%, 10%, 0); opacity: 0.26; }
    25% { transform: translate3d(-1.2%, 2%, 0); opacity: 0.5; }
    50% { transform: translate3d(-0.8%, -9%, 0); opacity: 0.64; }
    75% { transform: translate3d(1.4%, -1.5%, 0); opacity: 0.42; }
    100% { transform: translate3d(0.5%, 10%, 0); opacity: 0.26; }
}

@keyframes rarityShine {
    0% { transform: translateX(-170%) rotate(20deg); opacity: 0; }
    12% { opacity: 0.14; }
    38% { opacity: 0.46; }
    72% { opacity: 0.26; }
    90% { opacity: 0; }
    100% { transform: translateX(190%) rotate(20deg); opacity: 0; }
}

.hand-card-art::after,
.field-card-art::after,
.deck-card-art::after,
.tavern-reveal-art::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0) 65%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: rarityShine 4.5s linear infinite;
}

@keyframes rarityArcDrift {
    0%, 8%, 18%, 28%, 41%, 55%, 70%, 84%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    10% {
        opacity: 0.82;
        transform: translate3d(-1.2%, 0.5%, 0);
        filter: brightness(1.45) drop-shadow(0 0 4px rgba(222, 202, 255, 0.9));
    }
    12% {
        opacity: 0.18;
        transform: translate3d(0.8%, -0.4%, 0);
    }
    21% {
        opacity: 0.76;
        transform: translate3d(1.1%, -0.3%, 0);
        filter: brightness(1.6) drop-shadow(0 0 5px rgba(231, 214, 255, 0.95));
    }
    23% {
        opacity: 0.12;
        transform: translate3d(-0.6%, 0.2%, 0);
    }
    33% {
        opacity: 0.88;
        transform: translate3d(-0.7%, -0.8%, 0);
        filter: brightness(1.7) drop-shadow(0 0 6px rgba(245, 233, 255, 1));
    }
    35% {
        opacity: 0.15;
    }
    47% {
        opacity: 0.73;
        transform: translate3d(1.3%, 0.7%, 0);
        filter: brightness(1.5) drop-shadow(0 0 5px rgba(223, 206, 255, 0.9));
    }
    49% { opacity: 0.1; }
    61% {
        opacity: 0.79;
        transform: translate3d(-1.1%, 0.1%, 0);
        filter: brightness(1.6) drop-shadow(0 0 6px rgba(236, 222, 255, 0.95));
    }
    63% { opacity: 0.14; }
    76% {
        opacity: 0.69;
        transform: translate3d(0.9%, -0.6%, 0);
        filter: brightness(1.45) drop-shadow(0 0 4px rgba(217, 196, 255, 0.85));
    }
    78% { opacity: 0.1; }
    90% {
        opacity: 0.84;
        transform: translate3d(-0.8%, 0.6%, 0);
        filter: brightness(1.65) drop-shadow(0 0 6px rgba(243, 230, 255, 1));
    }
    92% { opacity: 0.16; }
}

@keyframes rarityArcDriftAlt {
    0%, 7%, 17%, 31%, 44%, 58%, 74%, 88%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        filter: brightness(1) drop-shadow(0 0 0 rgba(255, 205, 130, 0));
    }
    9% {
        opacity: 0.88;
        transform: translate3d(1.3%, -0.5%, 0);
        filter: brightness(1.55) drop-shadow(0 0 5px rgba(255, 220, 160, 0.95));
    }
    11% { opacity: 0.18; }
    20% {
        opacity: 0.8;
        transform: translate3d(-0.8%, 0.4%, 0);
        filter: brightness(1.7) drop-shadow(0 0 6px rgba(255, 236, 194, 1));
    }
    22% { opacity: 0.14; }
    35% {
        opacity: 0.75;
        transform: translate3d(1.1%, 0.7%, 0);
        filter: brightness(1.55) drop-shadow(0 0 5px rgba(255, 215, 150, 0.95));
    }
    37% { opacity: 0.1; }
    48% {
        opacity: 0.86;
        transform: translate3d(-1.2%, -0.6%, 0);
        filter: brightness(1.72) drop-shadow(0 0 7px rgba(255, 238, 199, 1));
    }
    50% { opacity: 0.13; }
    64% {
        opacity: 0.78;
        transform: translate3d(0.9%, -0.3%, 0);
        filter: brightness(1.58) drop-shadow(0 0 5px rgba(255, 221, 165, 0.94));
    }
    66% { opacity: 0.12; }
    79% {
        opacity: 0.83;
        transform: translate3d(-1%, 0.6%, 0);
        filter: brightness(1.66) drop-shadow(0 0 6px rgba(255, 233, 188, 0.98));
    }
    81% { opacity: 0.1; }
    93% {
        opacity: 0.87;
        transform: translate3d(0.7%, -0.5%, 0);
        filter: brightness(1.7) drop-shadow(0 0 7px rgba(255, 241, 205, 1));
    }
    95% { opacity: 0.15; }
}

.hand-card.rarity-epica,
.field-card.rarity-epica,
.deck-card.rarity-epica,
.tavern-reveal-card.rarity-epica,
.detail-card.rarity-epica {
    border-color: rgba(182, 128, 255, 0.9) !important;
    animation: rarityEpicPulse 2.4s ease-in-out infinite;
    position: relative;
}

.hand-card.rarity-lendaria,
.field-card.rarity-lendaria,
.deck-card.rarity-lendaria,
.tavern-reveal-card.rarity-lendaria,
.detail-card.rarity-lendaria {
    border-color: rgba(255, 196, 90, 0.95) !important;
    animation: rarityLegendaryPulse 2.1s ease-in-out infinite;
    position: relative;
}

.detail-card.rarity-epica,
.detail-card.rarity-lendaria {
    overflow: hidden;
    border-radius: 8px;
}

.hand-card.rarity-epica::before,
.field-card.rarity-epica::before,
.deck-card.rarity-epica::before,
.tavern-reveal-card.rarity-epica::before,
.detail-card.rarity-epica::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(182, 123, 255, 0.42) 0%, rgba(134, 77, 219, 0.24) 40%, rgba(0, 0, 0, 0) 72%),
        radial-gradient(circle at 14% 80%, rgba(238, 225, 255, 0.7) 0 1.2px, rgba(0, 0, 0, 0) 2.3px),
        radial-gradient(circle at 70% 65%, rgba(214, 183, 255, 0.56) 0 1.1px, rgba(0, 0, 0, 0) 2.2px),
        radial-gradient(circle at 38% 92%, rgba(194, 151, 255, 0.48) 0 1px, rgba(0, 0, 0, 0) 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation:
        rarityEpicAura 2.3s ease-in-out infinite,
        rarityParticleRiseA 6.7s linear infinite;
    overflow: hidden;
    z-index: 4;
    clip-path: inset(0 round 8px);
    will-change: transform, opacity;
}

.hand-card.rarity-lendaria::before,
.field-card.rarity-lendaria::before,
.deck-card.rarity-lendaria::before,
.tavern-reveal-card.rarity-lendaria::before,
.detail-card.rarity-lendaria::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 219, 129, 0.62) 0%, rgba(255, 183, 82, 0.32) 38%, rgba(255, 126, 24, 0.14) 58%, rgba(0, 0, 0, 0) 74%),
        radial-gradient(circle at 16% 82%, rgba(255, 239, 198, 0.78) 0 1.3px, rgba(0, 0, 0, 0) 2.4px),
        radial-gradient(circle at 74% 70%, rgba(255, 217, 140, 0.62) 0 1.2px, rgba(0, 0, 0, 0) 2.3px),
        radial-gradient(circle at 44% 94%, rgba(255, 203, 118, 0.5) 0 1.05px, rgba(0, 0, 0, 0) 2.1px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation:
        rarityLegendaryAura 2s ease-in-out infinite,
        rarityParticleRiseB 7.9s linear infinite;
    z-index: 4;
    clip-path: inset(0 round 8px);
    will-change: transform, opacity;
}

.hand-card.rarity-epica:nth-child(2n)::before,
.deck-card.rarity-epica:nth-child(2n)::before,
.tavern-reveal-card.rarity-epica:nth-child(2n)::before {
    animation-delay: -0.6s, -1.2s;
}

.hand-card.rarity-epica:nth-child(3n)::before,
.deck-card.rarity-epica:nth-child(3n)::before,
.tavern-reveal-card.rarity-epica:nth-child(3n)::before {
    animation-delay: -1.1s, -0.35s;
}

.hand-card.rarity-lendaria:nth-child(2n)::before,
.deck-card.rarity-lendaria:nth-child(2n)::before,
.tavern-reveal-card.rarity-lendaria:nth-child(2n)::before {
    animation-delay: -0.8s, -1.5s;
}

.hand-card.rarity-lendaria:nth-child(3n)::before,
.deck-card.rarity-lendaria:nth-child(3n)::before,
.tavern-reveal-card.rarity-lendaria:nth-child(3n)::before {
    animation-delay: -1.3s, -0.5s;
}

.hand-card.rarity-epica .hand-card-art::before,
.field-card.rarity-epica .field-card-art::before,
.deck-card.rarity-epica .deck-card-art::before,
.tavern-reveal-card.rarity-epica .tavern-reveal-art::before,
.hand-card.rarity-lendaria .hand-card-art::before,
.field-card.rarity-lendaria .field-card-art::before,
.deck-card.rarity-lendaria .deck-card-art::before,
.tavern-reveal-card.rarity-lendaria .tavern-reveal-art::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    will-change: transform, opacity, filter;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.98) 50%, rgba(255, 255, 255, 0) 53%) 16% 22% / 52% 2px no-repeat,
        linear-gradient(78deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 53%) 39% 35% / 46% 2px no-repeat,
        linear-gradient(138deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.86) 50%, rgba(255, 255, 255, 0) 53%) 50% 44% / 42% 2px no-repeat,
        linear-gradient(50deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.82) 50%, rgba(255, 255, 255, 0) 53%) 65% 55% / 44% 2px no-repeat,
        linear-gradient(160deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0) 53%) 30% 64% / 30% 2px no-repeat,
        linear-gradient(34deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.74) 50%, rgba(255, 255, 255, 0) 53%) 46% 67% / 25% 2px no-repeat,
        linear-gradient(146deg, rgba(255, 255, 255, 0) 47%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0) 53%) 55% 27% / 22% 2px no-repeat;
    animation: rarityArcDrift 3.1s steps(1, end) infinite;
    transform: translateZ(0);
}

.hand-card.rarity-epica .hand-card-art::before,
.field-card.rarity-epica .field-card-art::before,
.deck-card.rarity-epica .deck-card-art::before,
.tavern-reveal-card.rarity-epica .tavern-reveal-art::before {
    box-shadow: inset 0 0 20px rgba(165, 116, 255, 0.12);
}

.hand-card.rarity-lendaria .hand-card-art::before,
.field-card.rarity-lendaria .field-card-art::before,
.deck-card.rarity-lendaria .deck-card-art::before,
.tavern-reveal-card.rarity-lendaria .tavern-reveal-art::before {
    box-shadow: inset 0 0 26px rgba(255, 176, 75, 0.15);
    animation-name: rarityArcDriftAlt;
    animation-duration: 2.8s;
}

.hand-card.rarity-epica:nth-child(2n) .hand-card-art::before,
.deck-card.rarity-epica:nth-child(2n) .deck-card-art::before,
.tavern-reveal-card.rarity-epica:nth-child(2n) .tavern-reveal-art::before,
.field-card.rarity-epica:nth-child(2n) .field-card-art::before {
    animation-delay: -1.2s;
}

.hand-card.rarity-epica:nth-child(3n) .hand-card-art::before,
.deck-card.rarity-epica:nth-child(3n) .deck-card-art::before,
.tavern-reveal-card.rarity-epica:nth-child(3n) .tavern-reveal-art::before,
.field-card.rarity-epica:nth-child(3n) .field-card-art::before {
    animation-delay: -0.55s;
}

.hand-card.rarity-lendaria:nth-child(2n) .hand-card-art::before,
.deck-card.rarity-lendaria:nth-child(2n) .deck-card-art::before,
.tavern-reveal-card.rarity-lendaria:nth-child(2n) .tavern-reveal-art::before,
.field-card.rarity-lendaria:nth-child(2n) .field-card-art::before {
    animation-delay: -0.9s;
}

.hand-card.rarity-lendaria:nth-child(3n) .hand-card-art::before,
.deck-card.rarity-lendaria:nth-child(3n) .deck-card-art::before,
.tavern-reveal-card.rarity-lendaria:nth-child(3n) .tavern-reveal-art::before,
.field-card.rarity-lendaria:nth-child(3n) .field-card-art::before {
    animation-delay: -1.55s;
}

/* Raio fino desativado a pedido */
.hand-card.rarity-epica .hand-card-art::before,
.field-card.rarity-epica .field-card-art::before,
.deck-card.rarity-epica .deck-card-art::before,
.tavern-reveal-card.rarity-epica .tavern-reveal-art::before,
.hand-card.rarity-lendaria .hand-card-art::before,
.field-card.rarity-lendaria .field-card-art::before,
.deck-card.rarity-lendaria .deck-card-art::before,
.tavern-reveal-card.rarity-lendaria .tavern-reveal-art::before {
    content: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

.hand-card.rarity-epica::after,
.field-card.rarity-epica::after,
.deck-card.rarity-epica::after,
.tavern-reveal-card.rarity-epica::after,
.hand-card.rarity-lendaria::after,
.field-card.rarity-lendaria::after,
.deck-card.rarity-lendaria::after,
.tavern-reveal-card.rarity-lendaria::after {
    position: absolute;
    top: 4px;
    right: 4px;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    z-index: 5;
    pointer-events: none;
}

.hand-card.rarity-epica::after,
.field-card.rarity-epica::after,
.deck-card.rarity-epica::after,
.tavern-reveal-card.rarity-epica::after {
    content: 'EPICA';
    background: rgba(124, 58, 237, 0.8);
    border: 1px solid rgba(187, 157, 255, 0.72);
    color: #f2e9ff;
}

.hand-card.rarity-lendaria::after,
.field-card.rarity-lendaria::after,
.deck-card.rarity-lendaria::after,
.tavern-reveal-card.rarity-lendaria::after {
    content: 'LENDARIA';
    background: rgba(179, 83, 10, 0.85);
    border: 1px solid rgba(255, 206, 125, 0.74);
    color: #fff2d5;
}

/* Deck com coleção grande: reduzir efeitos para evitar travamentos. */
#screen-deck.deck-performance .deck-card,
#screen-deck.deck-performance .deck-card:hover {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#screen-deck.deck-performance .deck-card-art::after {
    content: none !important;
    animation: none !important;
}

#screen-deck.deck-performance .deck-card.rarity-epica,
#screen-deck.deck-performance .deck-card.rarity-lendaria {
    animation: none !important;
}

#screen-deck.deck-performance .deck-card.rarity-epica::before,
#screen-deck.deck-performance .deck-card.rarity-lendaria::before {
    content: none !important;
    animation: none !important;
}

.hand-art-img,
.field-art-img,
.deck-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.detail-rarity-fx {
    position: absolute;
    inset: 1px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 4;
}

.detail-rarity-fx.epica {
    background:
        radial-gradient(circle at 50% 50%, rgba(182, 123, 255, 0.44) 0%, rgba(134, 77, 219, 0.24) 40%, rgba(0, 0, 0, 0) 72%),
        radial-gradient(circle at 14% 80%, rgba(238, 225, 255, 0.72) 0 1.2px, rgba(0, 0, 0, 0) 2.3px),
        radial-gradient(circle at 70% 65%, rgba(214, 183, 255, 0.58) 0 1.1px, rgba(0, 0, 0, 0) 2.2px),
        radial-gradient(circle at 38% 92%, rgba(194, 151, 255, 0.5) 0 1px, rgba(0, 0, 0, 0) 2px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation:
        rarityEpicAura 2.3s ease-in-out infinite,
        rarityParticleRiseA 6.7s linear infinite;
}

.detail-rarity-fx.lendaria {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 219, 129, 0.64) 0%, rgba(255, 183, 82, 0.34) 38%, rgba(255, 126, 24, 0.14) 58%, rgba(0, 0, 0, 0) 74%),
        radial-gradient(circle at 16% 82%, rgba(255, 239, 198, 0.8) 0 1.3px, rgba(0, 0, 0, 0) 2.4px),
        radial-gradient(circle at 74% 70%, rgba(255, 217, 140, 0.64) 0 1.2px, rgba(0, 0, 0, 0) 2.3px),
        radial-gradient(circle at 44% 94%, rgba(255, 203, 118, 0.52) 0 1.05px, rgba(0, 0, 0, 0) 2.1px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation:
        rarityLegendaryAura 2s ease-in-out infinite,
        rarityParticleRiseB 7.9s linear infinite;
}

.detail-rarity-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.4px;
    z-index: 7;
    pointer-events: none;
}

.detail-rarity-badge.epica {
    background: rgba(124, 58, 237, 0.86);
    border: 1px solid rgba(187, 157, 255, 0.75);
    color: #f2e9ff;
}

.detail-rarity-badge.lendaria {
    background: rgba(179, 83, 10, 0.9);
    border: 1px solid rgba(255, 206, 125, 0.78);
    color: #fff2d5;
}

.detail-rarity-badge.comum {
    background: rgba(51, 65, 85, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: #e2e8f0;
}

.deck-card-info {
    padding: 4px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
}

.deck-card-name {
    font-size: 8px;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-card-stats {
    display: flex;
    justify-content: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
}

.deck-card-stack {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(244, 197, 66, 0.4);
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
    padding: 2px 6px;
    z-index: 5;
}

.deck-card-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}

.deck-action-btn {
    border: 1px solid rgba(244, 197, 66, 0.45);
    background: rgba(10, 10, 20, 0.8);
    color: var(--primary);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}

.deck-action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================ */
/* TAVERNA                                      */
/* ============================================ */
.tavern-bg {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(20, 8, 6, 0.62) 0%, rgba(16, 8, 12, 0.68) 100%),
        url("Taverna-fundo.png") center center / cover no-repeat;
    display: flex;
    flex-direction: column;
}

.tavern-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(15, 8, 10, 0.72);
    border-bottom: 1px solid rgba(244, 197, 66, 0.25);
}

.tavern-header h2 {
    font-family: var(--font-title);
    color: var(--primary);
    letter-spacing: 2px;
}

.tavern-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 18px;
    flex-wrap: wrap;
}

.tavern-pack-card {
    width: min(220px, 68vw);
    background: rgba(15, 8, 8, 0.8);
    border: 1px solid rgba(244, 197, 66, 0.35);
    border-radius: 14px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(244, 197, 66, 0.15);
    padding: 16px;
    text-align: center;
    backdrop-filter: blur(4px);
}

.tavern-pack-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(244, 197, 66, 0.25);
}

.tavern-pack-preview {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tavern-pack-preview:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(255, 186, 90, 0.8);
    box-shadow: 0 0 18px rgba(255, 140, 36, 0.35);
}

.tavern-pack-meta {
    margin-top: 12px;
}

.tavern-pack-meta p {
    color: #f8e8c9;
    font-size: 13px;
    margin: 4px 0;
}

.tavern-pack-meta strong {
    color: var(--primary);
}

.tavern-buy-btn {
    margin-top: 14px;
}

.tavern-open-content {
    max-width: 860px;
}

.tavern-catalog-content {
    width: min(980px, 96vw);
    max-width: min(980px, 96vw);
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(14, 10, 16, 0.95);
    border: 1px solid rgba(244, 197, 66, 0.35);
    padding: 16px;
}

.tavern-catalog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.tavern-catalog-head h3 {
    font-family: var(--font-title);
    color: var(--primary);
    letter-spacing: 1.5px;
    font-size: 20px;
}

.tavern-catalog-hint {
    color: #e4d3b0;
    font-size: 13px;
    margin-bottom: 10px;
}

.tavern-catalog-filters {
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 8px;
    margin-bottom: 10px;
}

.tavern-catalog-filters input,
.tavern-catalog-filters select {
    background: rgba(17, 10, 14, 0.92);
    border: 1px solid rgba(244, 197, 66, 0.28);
    border-radius: 8px;
    color: #f7e2bc;
    padding: 8px 10px;
    font-size: 12px;
    outline: none;
}

.tavern-catalog-filters input::placeholder {
    color: rgba(247, 226, 188, 0.55);
}

.tavern-catalog-filters input:focus,
.tavern-catalog-filters select:focus {
    border-color: rgba(255, 189, 92, 0.78);
    box-shadow: 0 0 10px rgba(255, 130, 40, 0.25);
}

.tavern-catalog-grid {
    flex: 1;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding-right: 4px;
    align-content: start;
}

.tavern-catalog-card {
    border: 1px solid rgba(244, 197, 66, 0.22);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(9, 7, 12, 0.86);
}

.tavern-catalog-art {
    width: 100%;
    aspect-ratio: 170 / 230;
    background: rgba(18, 14, 20, 0.7);
}

.tavern-catalog-art .card-art-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-catalog-info {
    padding: 7px 8px 8px;
    display: grid;
    gap: 5px;
}

.tavern-catalog-name {
    font-size: 12px;
    color: #ffe9c6;
    font-weight: 700;
    line-height: 1.25;
}

.tavern-catalog-meta {
    font-size: 11px;
    color: #d8c6a4;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.tavern-catalog-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tavern-catalog-badge {
    font-size: 10px;
    border-radius: 999px;
    border: 1px solid rgba(244, 197, 66, 0.28);
    padding: 2px 6px;
    color: #ffe4ba;
    background: rgba(68, 34, 14, 0.34);
}

.tavern-open-pack-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.tavern-open-pack-wrap img {
    width: min(180px, 48vw);
    border-radius: 10px;
    border: 1px solid rgba(244, 197, 66, 0.35);
}

.tavern-pack-rip {
    animation: tavernPackRip 0.85s ease forwards;
}

@keyframes tavernPackRip {
    0% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    32% { transform: scale(1.1) rotate(-4deg); filter: brightness(1.3) saturate(1.2); }
    62% { transform: scale(0.95) rotate(3deg); filter: brightness(1.7); }
    100% { transform: scale(0.72) rotate(-8deg); opacity: 0.08; filter: brightness(2); }
}

.tavern-open-result {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 230px;
}

.tavern-reveal-card {
    width: 170px;
    height: 230px;
    border-radius: 10px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    background: transparent !important;
    animation: tavernRevealCard 0.45s ease both;
    position: relative;
}

.tavern-reveal-art {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tavern-reveal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tavern-reveal-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    padding: 5px 6px 7px;
    background: rgba(0, 0, 0, 0.76);
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.tavern-reveal-card:hover .tavern-reveal-stats {
    opacity: 1;
}

.tavern-error {
    color: #ff9f9f;
    font-size: 14px;
    font-weight: 700;
}

@keyframes tavernRevealCard {
    0% { opacity: 0; transform: translateY(35px) scale(0.82); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.tavern-dark-particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 260;
    background: radial-gradient(circle, rgba(170, 95, 255, 0.95) 0%, rgba(54, 12, 90, 0.75) 45%, rgba(8, 0, 16, 0.05) 100%);
    box-shadow: 0 0 12px rgba(125, 70, 195, 0.75), 0 0 22px rgba(23, 5, 46, 0.7);
    animation: tavernDarkParticle 1.25s cubic-bezier(0.22, 0.75, 0.29, 1) forwards;
}

@keyframes tavernDarkParticle {
    0% { transform: translate(0, 0) scale(0.35); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.05); opacity: 0; }
}

.tavern-ritual-shake {
    animation: tavernRitualShake 0.6s ease;
}

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

.tavern-dark-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 255;
    background: radial-gradient(circle at 50% 45%, rgba(182, 122, 255, 0.28) 0%, rgba(38, 8, 58, 0.2) 24%, rgba(0, 0, 0, 0) 66%);
    animation: tavernDarkFlash 0.5s ease-out forwards;
}

@keyframes tavernDarkFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

.tavern-dark-ring {
    position: fixed;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    border-radius: 50%;
    border: 2px solid rgba(167, 112, 255, 0.9);
    box-shadow: 0 0 20px rgba(123, 61, 201, 0.9), inset 0 0 12px rgba(191, 149, 255, 0.5);
    pointer-events: none;
    z-index: 262;
    animation: tavernDarkRing 0.95s ease-out forwards;
}

@keyframes tavernDarkRing {
    0% { transform: scale(0.35); opacity: 0.2; }
    65% { transform: scale(4.8); opacity: 0.9; }
    100% { transform: scale(5.6); opacity: 0; }
}

.tavern-dark-rune {
    position: fixed;
    width: 170px;
    height: 170px;
    margin-left: -85px;
    margin-top: -85px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 261;
    background:
      radial-gradient(circle at center, rgba(113, 62, 180, 0.16) 0%, rgba(35, 10, 52, 0.08) 48%, transparent 72%),
      conic-gradient(from 0deg, rgba(169, 130, 255, 0.1), rgba(225, 176, 255, 0.35), rgba(169, 130, 255, 0.1));
    border: 1px solid rgba(177, 134, 255, 0.35);
    box-shadow: 0 0 18px rgba(118, 59, 198, 0.7);
    animation: tavernDarkRune 0.95s ease-out forwards;
}

@keyframes tavernDarkRune {
    0% { transform: scale(0.7) rotate(0deg); opacity: 0; }
    25% { opacity: 0.9; }
    100% { transform: scale(1.8) rotate(140deg); opacity: 0; }
}

.tavern-dark-smoke {
    position: fixed;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 259;
    background: radial-gradient(circle, rgba(98, 59, 146, 0.35) 0%, rgba(34, 8, 48, 0.28) 42%, rgba(12, 2, 20, 0) 72%);
    filter: blur(2px);
    animation: tavernDarkSmoke 1.05s ease-out forwards;
}

@keyframes tavernDarkSmoke {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    15% { opacity: 0.65; }
    100% { transform: translateY(var(--sy)) scale(2.1); opacity: 0; }
}

/* ============================================ */
/* SCROLLBAR CUSTOM                             */
/* ============================================ */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(10, 10, 26, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(244, 197, 66, 0.3);
    border-radius: 2px;
}

/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */
@media (min-width: 768px) {
    .card-slot {
        max-width: 110px;
    }
    
    .hand-card {
        width: 85px;
        min-width: 85px;
        height: 120px;
    }
    
    .btn-toggle-log {
        display: block;
    }
    
    .field-card-stats {
        font-size: 10px;
    }
    
    .field-card-name {
        font-size: 8px;
    }
}

@media (max-width: 900px) {
    .menu-content {
        padding: 24px 16px;
        justify-content: center;
        gap: 16px;
    }

    .menu-main-left {
        width: min(100%, 420px);
    }

    .menu-champion-wrap {
        width: min(34vw, 220px);
        min-width: 150px;
        margin-top: -52px;
        transform: translateY(-16px);
    }

    .menu-rank-box {
        margin-top: -48px;
    }

    .btn-find-duel {
        margin-top: 0;
    }

    .menu-duelist-wrap {
        display: none;
    }

    .deck-builder-layout {
        grid-template-columns: 1fr;
    }

    .profile-overview-grid {
        grid-template-columns: 1fr;
    }

    .profile-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-panel {
        min-height: 0;
    }
}

@media (max-height: 700px) {
    .player-hand {
        min-height: 90px;
        max-height: 100px;
    }
    
    .hand-card {
        width: 62px;
        min-width: 62px;
        height: 90px;
    }
    
    .battle-hud {
        padding: 5px 10px;
    }
    
    .hud-avatar {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* SHAKE ANIMATION */
.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* GLOW EFFECT FOR WINNER */
.victory-glow {
    animation: victoryGlow 1s ease-in-out infinite;
}

@keyframes victoryGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(244, 197, 66, 0.3); }
    50% { box-shadow: 0 0 40px rgba(244, 197, 66, 0.8); }
}

/* SUMMON GLOW EFFECT */
.card-slot.summoning {
    animation: summonGlow 0.6s ease;
}

@keyframes summonGlow {
    0% { box-shadow: 0 0 0 rgba(244, 197, 66, 0); }
    50% { box-shadow: 0 0 40px rgba(244, 197, 66, 0.8), inset 0 0 20px rgba(244, 197, 66, 0.3); }
    100% { box-shadow: 0 0 15px rgba(244, 197, 66, 0.3); }
}

/* DIRECT ATTACK EFFECT */
.direct-attack-beam {
    position: fixed;
    height: 6px;
    transform-origin: left center;
    pointer-events: none;
    z-index: 500;
    border-radius: 999px;
    animation: directBeamPulse 0.45s ease-out forwards;
}

.direct-attack-beam--outer {
    height: 14px;
    margin-top: -7px;
    background: linear-gradient(90deg, rgba(255, 232, 122, 0.0) 0%, rgba(255, 166, 0, 0.65) 40%, rgba(255, 99, 71, 0.0) 100%);
    filter: blur(3px);
}

.direct-attack-beam--core {
    height: 4px;
    margin-top: -2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, #fff7b1 25%, #ffd166 55%, rgba(255, 255, 255, 0.0) 100%);
    box-shadow: 0 0 12px rgba(255, 209, 102, 0.9), 0 0 24px rgba(255, 120, 40, 0.65);
}

.direct-attack-burst {
    position: fixed;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    pointer-events: none;
    z-index: 520;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7c2 0%, #ffd166 45%, rgba(255, 69, 0, 0.15) 75%, rgba(255, 69, 0, 0) 100%);
    box-shadow: 0 0 20px rgba(255, 183, 77, 0.9), 0 0 40px rgba(255, 69, 0, 0.5);
    animation: directBurstPop 0.45s ease-out forwards;
}

.direct-attack-spark {
    position: fixed;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
    pointer-events: none;
    z-index: 525;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6cc 0%, #ffb347 60%, rgba(255, 69, 0, 0) 100%);
    box-shadow: 0 0 10px rgba(255, 183, 77, 0.8);
    animation: directSparkFly 0.48s ease-out forwards;
}

@keyframes directBeamPulse {
    0% { opacity: 0; transform: scaleX(0.15); }
    25% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.05); }
}

@keyframes directBurstPop {
    0% { transform: scale(0.35); opacity: 0.2; }
    40% { transform: scale(2.6); opacity: 1; }
    100% { transform: scale(3.6); opacity: 0; }
}

@keyframes directSparkFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.15); opacity: 0; }
}

/* TURN CHANGE FLASH */
.turn-change-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-title);
    font-size: 36px;
    font-weight: 900;
    color: var(--primary);
    text-shadow: 0 0 30px rgba(244, 197, 66, 0.8);
    z-index: 300;
    pointer-events: none;
    animation: turnChangeFlash 1.5s ease forwards;
}

@keyframes turnChangeFlash {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

/* HP LOW PULSE */
.hp-low {
    animation: hpLowPulse 1s ease-in-out infinite;
}

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

@media (max-width: 900px) {
    .jackpot-controls {
        grid-template-columns: 1fr;
    }

    .jackpot-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jackpot-paytable {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .duel-hall-content {
        width: min(98vw, 98vw);
        max-width: min(98vw, 98vw);
        height: min(92vh, 92vh);
        max-height: 92vh;
        padding: 12px;
    }

    .duel-hall-create-row {
        grid-template-columns: 1fr;
    }

    .duel-hall-filters {
        grid-template-columns: 1fr;
    }

    .duel-hall-refresh-wrap {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .duel-hall-summary {
        grid-template-columns: 1fr 1fr;
    }

    .duel-create-actions {
        justify-content: stretch;
    }

    .duel-create-actions .btn-primary,
    .duel-create-actions .btn-decline {
        width: 100%;
    }

    .duel-room-card {
        grid-template-columns: 1fr;
    }

    .duel-room-vs-wrap {
        grid-template-columns: 1fr;
    }
}