:root{
    /* Theme variables - tweak these to change the whole UI */
    --bg-1: #1a0836;
    --bg-2: #2e0b4f;
    --accent-1: #8b5cf6; /* purple */
    --accent-2: #ffe46b; /* pink */
    --glass: rgba(255,255,255,0.06);
    --glass-strong: rgba(255,255,255,0.08);
    --card-bg: #0f1724;
    --card-face: #ffffff;
    --muted: rgba(255,255,255,0.7);
    --success: #3ee6b5;
}

*{box-sizing:border-box}

html,body{
    height:100%;
    margin:0;
    padding:0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: radial-gradient(1000px 600px at 10% 10%, var(--bg-2) 0%, transparent 30%),
                radial-gradient(900px 500px at 90% 90%, rgba(10,6,24,0.6) 0%, transparent 30%),
                linear-gradient(180deg, var(--bg-1), #07020a);
    color:var(--card-face);
    width:100%
}

/* Top header */
.site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 28px;
    gap:16px;
}

.brand{
    font-weight:700;
    letter-spacing:1px;
    font-size:18px;
    color:var(--accent-1);
}

.controls{display:flex;gap:10px}
.btn{
    background:#0ec387 ;
    color:#202020;
    padding:10px 14px;
    border-radius:15px;
    font-family: Oswald, sans-serif;
    font-weight: 600;
    border:none;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(139,92,246,0.15);
}
.btn:hover{transform:translateY(-2px)}
/* Main layout: left game area, right leaderboard */
.app-grid{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:24px;
    max-width:1200px;
    margin:24px auto;
    padding:0 20px 40px;
}

.panel{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:16px;
    padding:18px;
    box-shadow: 0 10px 30px rgba(4,4,8,0.6);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: auto;
    width:100%;
}

/* Game table */
.game-table{
    position:relative;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:auto;
}

.table-stage{
    width:100%;
    max-width:820px;
    height:100%;
    position:relative;
}

/* Attack pile centered with subtle glass */
.attack-pile{
    position:absolute;
    top:20%;
    left:50%;
    transform:translate(-50%,-50%);
    width:220px;
    height:100px;
    border-radius:14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    flex-direction:row;
    gap:8px;
    align-items:center;
    justify-content:center;
    padding:8px;
    pointer-events:none;
}
.cont-narrative{
    margin-top: -50px;
}
.gen-flex{
    display:flex;align-items:center;justify-content:center;gap:8px
}
.gen-flex-col{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px
}

/* Cards container (player cards) */
#player-cards{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    height:200px;
    width:100%;
    max-width:820px;
    display:block;
    pointer-events:auto;
}

/* Hand glow states */
#player-cards.hand-attack{ 
    box-shadow: 0 0 0 rgba(255,0,0,0.0);
    animation: hand-attack-flash 1600ms ease-in-out infinite;
    border-radius: 14px;
}
#player-cards.hand-draw{
    box-shadow: 0 0 36px rgba(34,197,94,0.35), 0 0 12px rgba(34,197,94,0.25);
    border: 1px solid rgba(34,197,94,0.22);
    border-radius: 14px;
}

@keyframes hand-attack-flash{
    0%   { box-shadow: 0 0 12px rgba(255,99,71,0.25), 0 0 28px rgba(255,99,71,0.20); }
    50%  { box-shadow: 0 0 28px rgba(255,99,71,0.45), 0 0 60px rgba(255,0,0,0.30); }
    100% { box-shadow: 0 0 12px rgba(255,99,71,0.25), 0 0 28px rgba(255,99,71,0.20); }
}

.card{
    position:absolute;
    bottom:0;
    width:120px;
    height:170px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.3);
    box-shadow: 0 12px 40px rgba(2,2,6,0.7);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:10px;
    color:rgb(36, 36, 36);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    touch-action:none;
}

/* Pile cards should flow horizontally inside .attack-pile instead of stacking */
.attack-pile .card{
    position:static; /* allow flexbox layout */
    width: auto; /* size controlled by JS */
    height: auto;
    box-shadow: 0 8px 20px rgba(2,2,6,0.45);
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Enter animation for cards appended into the pile */
.card.entering{
    transform: translateY(-12px) scale(0.95);
    opacity: 0;
}
.attack-pile .card{
    transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;overflow: hidden;
}

.card .rank{font-size:20px;font-weight:700;color:rgb(36, 36, 36);}
.card .suit{font-size:18px;color:rgb(36, 36, 36);}
.card .center{font-size:44px;text-align:center}

.card.focused{transform:translateY(-18%);box-shadow:0 28px 70px rgba(139,92,246,0.5);z-index:80}
.card.selected{outline:3px solid rgba(255,255,255,0.06);box-shadow:0 22px 50px rgba(2,2,6,0.7)}

.card.dragging{transition:none;z-index:999;cursor:grabbing}

/* Attack zone (top center) */
.attack-zone{
    position:absolute;
    top:40%;
    left:50%;
    transform:translateX(-50%);
    width:220px;
    height:100px;
    border-radius:12px;
    z-index:500;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
    background: rgba(251, 193, 67, 0.05);;
    opacity:0;transition:opacity .18s ease, border-color .18s ease;
    border:2px dashed rgba(255, 209, 209, 0.09);
}
.attack-zone.active{opacity:1;pointer-events:auto}
.attack-zone.hover{border-color: rgba(139,92,246,0.9);background:linear-gradient(90deg, rgba(139,92,246,0.06), rgba(255,107,203,0.04))}

/* Narrative / tracking */
.cont-narrative{width:220px;display:flex;flex-direction:column;gap:8px}
.game-comments{background:rgba(0,0,0,0.25);padding:8px;border-radius:8px;color:var(--muted);font-size:13px;max-height:70px;overflow:hidden}
.game-comments div{padding:4px 6px;border-radius:6px;background:rgba(255,255,255,0.02);margin-bottom:4px}
.game-comments.flash{animation:comment-flash 900ms ease both}

@keyframes comment-flash{
    0% { transform: translateY(-3px) scale(1); background-color: rgba(255,255,255,0.02); box-shadow: 0 0 0 rgba(0,0,0,0); }
    20% { transform: translateY(-6px) scale(1.02); background-color: rgba(255,255,255,0.05); box-shadow: 0 12px 30px rgba(139,92,246,0.3); }
    80% { transform: translateY(-2px) scale(1.01); background-color: rgba(255,255,255,0.03); box-shadow: 0 6px 18px rgba(139,92,246,0.1); }
 100% { transform: translateY(0) scale(1); background-color: rgba(0,0,0,0.25); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Attack confirm modal */
.attack-confirm-modal{
    position:absolute;
    left:50%;
    top:60%;
    transform:translateX(-50%);
    width:280px;
    height: 100px;
    /* max-width:90%; */
    padding:14px;
    border-radius:12px;
    background:rgba(255,255,255,0.7);
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:0 18px 60px rgba(4,4,8,0.6);
    z-index:1200;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    border-radius: 15px;
}
.attack-confirm-card{color:var(--muted);font-size:14px}
.attack-confirm-actions{display:flex;gap:8px}
.attack-confirm-actions .btn{padding:8px 12px;transform: scale(0.2);}

/* Flash/pulse for the proceed button in attack confirm modal */
.attack-confirm-modal #attack-confirm-proceed{
    animation: attack-proceed-flash 1200ms ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(139,92,246,0.14);
}

@keyframes attack-proceed-flash{
    0% { transform: translateY(0); box-shadow: 0 6px 18px rgba(139,92,246,0.06); }
    50% { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(139,92,246,0.18); }
 100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(139,92,246,0.06); }
}
.tracking-badge{display:inline-block;padding:8px 10px;border-radius:999px;color:#111;font-weight:700;text-align:center;background:linear-gradient(90deg,#fff8cc,#ffd98a);box-shadow:0 6px 18px rgba(255,213,102,0.12);border:1px solid rgba(255,255,255,0.6)}
.tracking-badge.attack{background:linear-gradient(90deg,#ffd7d7,#ff9b9b);border-color:rgba(255,100,100,0.6)}
.tracking-badge.defend{background:linear-gradient(90deg,#d7fff5,#9bffd1);border-color:rgba(3,218,197,0.6)}
.tracking-badge.draw{background:linear-gradient(90deg,#e6e6ff,#bdb8ff);border-color:rgba(139,92,246,0.6)}
.tracking-badge.info{background:linear-gradient(90deg,#ffffff,#f1f1f1);border-color:rgba(255,255,255,0.4)}

/* Leaderboard (right column) */
.leaderboard{
    display:flex;flex-direction:column;gap:12px
}
.leaderboard .title{font-weight:700;color:var(--muted);margin-bottom:6px}
.leaderboard .row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);margin-bottom:8px}
.leaderboard .row .player-left{display:flex;align-items:center;gap:10px}
.leaderboard .row .player-left .icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02)}
.leaderboard .row.attacker{background:linear-gradient(90deg, rgba(139,92,246,0.06), rgba(255,107,203,0.03));border-color:rgba(139,92,246,0.12)}
.leaderboard .row.defender{background:linear-gradient(90deg, rgba(3,218,197,0.03), rgba(139,92,246,0.02));border-color:rgba(3,218,197,0.08)}
.leaderboard .row .role-badge{font-size:12px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--muted)}

/* Agent panel under cards */
.agent-panel{max-width:560px;width:90%;display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(2,2,6,0.6)}
.agent-panel .agent-icon{font-size:22px;color:var(--accent-1);background:rgba(255,255,255,0.02);padding:8px;border-radius:10px}
.agent-panel .agent-text{color:var(--muted);font-size:14px}
/* .agent-panel{display: none;} */

/* Defense selection visuals */
.card.defense-first{transform:translateY(-26px) scale(1.02);box-shadow:0 30px 80px rgba(3,218,197,0.12);border:2px solid rgba(3,218,197,0.12)}
.card.defense-second{transform:translateY(-26px) scale(1.02);box-shadow:0 30px 80px rgba(139,92,246,0.12);border:2px solid rgba(139,92,246,0.12)}

/* Defend confirm button appended to agent panel */
#defend-confirm-btn{margin-left:auto;background:linear-gradient(90deg,#4ade80,#34d399);color:#042017;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;box-shadow:0 8px 20px rgba(52,211,153,0.12)}
#defend-confirm-btn:hover{transform:translateY(-2px)}


/* Utility */
.muted{color:var(--muted)}

/* Progress / winning trackers */
#leader-progess-bars-cont{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.user-progress-bar-cont,.opponent-progress-bar-cont{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:320px;overflow:hidden}
.user-progress-bar-cont .user-icon,.opponent-progress-bar-cont .user-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;color:var(--muted)}
.user-progress-fill{flex:1;height:18px;border-radius:999px;background:linear-gradient(90deg,#ffd7d7,#ff9b9b);transition:width 600ms cubic-bezier(.2,.9,.2,1), box-shadow 350ms ease;display:block;position:relative;overflow:hidden}
.user-progress-text{width:48px;text-align:right;font-weight:700;color:var(--muted);margin-left:6px}

/* Winner style (green + shiny) */
.user-progress-fill.winner{background:linear-gradient(90deg,#7bed9f,#34d399);box-shadow:0 10px 30px rgba(52,211,153,0.12)}
.user-progress-fill.loser{background:linear-gradient(90deg,#ffb3b3,#ff6b6b);box-shadow:0 10px 30px rgba(255,99,71,0.12);}

/* container-level loser/winner accent */
.user-progress-bar-cont.winner .user-icon, .opponent-progress-bar-cont.winner .user-icon{box-shadow:0 8px 24px rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.12)}
.user-progress-bar-cont.loser .user-icon, .opponent-progress-bar-cont.loser .user-icon{box-shadow:0 8px 24px rgba(255,99,71,0.08);border:1px solid rgba(255,99,71,0.12)}
.user-progress-bar-cont.loser{outline:2px solid rgba(255,99,71,0.06)}

/* small shimmer overlay */
.user-progress-fill::after{content:'';position:absolute;right:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));transform:skewX(-18deg);opacity:0.6;pointer-events:none}

@media(max-width:900px){
    .app-grid{grid-template-columns:1fr;}
    .leaderboard{order:2}
}

/* Floating Draw Button */
.draw-button{
    position:fixed;
    right:20px;
    bottom:20px;
    width:64px;
    height:64px;
    border-radius:999px;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ffd54d,#ffb84d);
    color:#111;
    box-shadow:0 18px 50px rgba(255,184,77,0.18), 0 6px 18px rgba(0,0,0,0.35);
    border:1px solid rgba(255,255,255,0.12);
    cursor:pointer;
    font-weight:800;
}
.draw-button-wrapper{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3000}
.draw-label{font-size:12px;color:var(--muted);background:rgba(0,0,0,0.22);padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.draw-button .icon{font-size:20px}
.draw-button.flash{animation:draw-flash 1800ms ease-in-out infinite}
.draw-button.disabled{opacity:0.5;pointer-events:none;transform:scale(0.98)}

@keyframes draw-flash{
    0%{transform:translateY(0) scale(1); box-shadow:0 10px 30px rgba(255,184,77,0.14)}
    50%{transform:translateY(-6px) scale(1.04); box-shadow:0 26px 60px rgba(255,184,77,0.22)}
 100%{transform:translateY(0) scale(1); box-shadow:0 10px 30px rgba(255,184,77,0.14)}
}

/* Ghost card animations (transient flying visuals) */
.card.ghost{
    position:fixed;
    width:120px;
    height:170px;
    border-radius:12px;
    pointer-events:none;
    z-index:4000;
    box-shadow:0 26px 60px rgba(2,2,6,0.55);
    transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease;
    will-change: transform, opacity;
}
.card.ghost .rank, .card.ghost .suit, .card.ghost .center{color:rgb(36,36,36)}
.card.ghost.entering{opacity:0.01;transform:translateY(-12px) scale(0.8)}
.card.ghost.visible{opacity:1}
.card.ghost.fade-out{opacity:0;transform:scale(0.9) translateY(6px)}

/* small easing for subtle bounce when arriving */
@keyframes ghost-arrive-bounce{
    0%{transform: translateY(-6px) scale(0.98)}
    60%{transform: translateY(2px) scale(1.02)}
    100%{transform: translateY(0) scale(1)}
}