/* War of Aces — Medieval Battle Theme */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Forest battlefield */
    --forest-deep:   #0e1f17;
    --forest-mid:    #1a3325;
    --forest-light:  #244736;
    --forest-line:   #2f5a44;

    /* Banners */
    --crimson:       #a32630;
    --crimson-dark:  #6f1820;
    --crimson-soft:  #d44a55;

    /* Silver / steel */
    --steel:         #c9d1d9;
    --steel-soft:    #e6ecf2;
    --steel-dark:    #8b96a3;

    /* Gold (ace) */
    --gold:          #ffd54a;
    --gold-bright:   #ffe57f;
    --gold-dark:     #b8860b;

    /* Cards */
    --card-white:    #f5ecd7;
    --card-cream:    #ece0c2;
    --card-red:      #b3121a;
    --card-black:    #1a1a1a;
    --card-back-1:   #2a1a14;
    --card-back-2:   #5a2a1a;

    /* Text */
    --text-white:    #f1ede4;
    --text-muted:    #98a0a8;

    /* Typography sizes (rem) */
    --fs-xs: 0.625rem;   /* 10 */
    --fs-sm: 0.75rem;    /* 12 */
    --fs-md: 0.875rem;   /* 14 */
    --fs-lg: 1rem;       /* 16 */
    --fs-xl: 1.25rem;    /* 20 */
    --fs-2xl: 1.5rem;    /* 24 */
    --fs-3xl: 2.25rem;   /* 36 */
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at 50% 0%, #1f3f2c 0%, var(--forest-mid) 45%, var(--forest-deep) 100%);
    color: var(--text-white);
    min-height: calc(100dvh - 3.5rem);
}

/* ============ FOREST BACKDROP ============ */
#forest-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 213, 74, 0.06), transparent 40%),
        radial-gradient(circle at 88% 28%, rgba(163, 38, 48, 0.10), transparent 45%),
        radial-gradient(circle at 50% 95%, rgba(201, 209, 217, 0.05), transparent 50%);
}

/* ============ SCREENS ============ */
.screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--forest-deep);
    color: var(--text-white);
    z-index: 1000;
}

.screen.hidden { display: none; }

.loading-spinner {
    width: 3.25rem;
    height: 3.25rem;
    border: 0.1875rem solid rgba(201, 209, 217, 0.15);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spinAnim 1s linear infinite;
}

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

#loading-screen p {
    margin-top: 1rem;
    color: var(--gold);
    font-size: var(--fs-md);
    letter-spacing: 0.0625rem;
}

.login-content { text-align: center; }
.login-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.login-content h2 { color: var(--gold); margin-bottom: 0.5rem; font-size: var(--fs-xl); }
.login-content p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ============ GAME CONTAINER ============ */
#game-container {
    width: 100%;
    max-width: 30rem;        /* 480px */
    height: 100%;
    max-height: 52rem;       /* 832px */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    position: relative;
    z-index: 1;
}

#game-container.hidden { display: none; }

/* ============ HEADER ============ */
#game-header {
    width: 100%;
    padding: 0.375rem 0;
    display: flex;
    justify-content: center;
}

.balance-display {
    background: linear-gradient(180deg, rgba(255, 213, 74, 0.14) 0%, rgba(163, 38, 48, 0.10) 100%);
    border: 0.0625rem solid var(--gold-dark);
    border-radius: 1.25rem;
    padding: 0.4375rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    box-shadow: 0 0 1rem rgba(255, 213, 74, 0.12);
}

.balance-label { color: var(--text-muted); font-size: var(--fs-sm); letter-spacing: 0.03125rem; }

#balance-value {
    color: var(--gold);
    font-size: var(--fs-xl);
    font-weight: 700;
    min-width: 4.375rem;
    text-align: right;
    text-shadow: 0 0 0.625rem rgba(255, 213, 74, 0.5);
}

.balance-currency { color: var(--steel-dark); font-size: var(--fs-xs); }

/* ============ SCOREBOARD ============ */
#scoreboard {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.375rem 0 0.5rem;
    background: linear-gradient(180deg, rgba(36, 71, 54, 0.6) 0%, rgba(26, 51, 37, 0.6) 100%);
    border: 0.0625rem solid var(--forest-line);
    border-radius: 0.75rem;
    box-shadow: inset 0 0.125rem 0.5rem rgba(0,0,0,0.4);
}

.score-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.score-dealer { justify-content: flex-end; }

.score-name {
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: 0.125rem;
    color: var(--steel);
}

.score-player .score-name { color: var(--crimson-soft); }
.score-dealer .score-name { color: var(--steel-soft); }

.score-vs {
    color: var(--gold);
    font-size: var(--fs-xl);
    text-shadow: 0 0 0.5rem rgba(255, 213, 74, 0.6);
}

.shields {
    display: flex;
    gap: 0.25rem;
}

.shield {
    width: 1rem;
    height: 1.125rem;
    background: linear-gradient(180deg, #1a2a22 0%, #0e1a14 100%);
    border: 0.0625rem solid var(--steel-dark);
    border-radius: 0.25rem 0.25rem 0.5rem 0.5rem / 0.25rem 0.25rem 0.75rem 0.75rem;
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0,0,0,0.5);
    transition: all 0.25s ease;
    position: relative;
}

.score-player .shield.filled {
    background: linear-gradient(180deg, var(--crimson-soft) 0%, var(--crimson) 60%, var(--crimson-dark) 100%);
    border-color: var(--gold-dark);
    box-shadow:
        0 0 0.5rem rgba(163, 38, 48, 0.6),
        inset 0 0.0625rem 0 rgba(255,255,255,0.15);
    animation: shieldPop 0.4s ease;
}

.score-dealer .shield.filled {
    background: linear-gradient(180deg, var(--steel-soft) 0%, var(--steel) 60%, var(--steel-dark) 100%);
    border-color: var(--steel-soft);
    box-shadow:
        0 0 0.5rem rgba(201, 209, 217, 0.5),
        inset 0 0.0625rem 0 rgba(255,255,255,0.2);
    animation: shieldPop 0.4s ease;
}

@keyframes shieldPop {
    0% { transform: scale(0.6); opacity: 0.4; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============ BATTLE ARENA ============ */
#battle-arena {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
}

.arena-frame {
    position: relative;
    width: 100%;
    background:
        linear-gradient(180deg, rgba(26, 51, 37, 0.85) 0%, rgba(14, 31, 23, 0.85) 100%);
    border: 0.1875rem solid var(--crimson-dark);
    border-radius: 1.25rem;
    padding: 1.25rem 0.75rem 1rem;
    box-shadow:
        0 0 0 0.0625rem rgba(0,0,0,0.6),
        0 0 2rem rgba(163, 38, 48, 0.2),
        0 1.25rem 3rem rgba(0,0,0,0.5),
        inset 0 0.0625rem 0 rgba(255,255,255,0.04);
}

/* Crimson banner strip on top */
.arena-frame::before {
    content: '';
    position: absolute;
    top: -0.375rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 0.5rem;
    background: linear-gradient(90deg, transparent, var(--crimson) 20%, var(--crimson-soft) 50%, var(--crimson) 80%, transparent);
    border-radius: 0.25rem;
    box-shadow: 0 0 0.625rem rgba(163, 38, 48, 0.5);
}

.cards-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.card-label {
    font-size: var(--fs-xs);
    color: var(--steel-dark);
    letter-spacing: 0.125rem;
    text-transform: uppercase;
}

/* ─── Card ─── */
.war-card {
    width: 6.25rem;       /* 100px */
    height: 8.75rem;      /* 140px */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.war-card.flipped {
    transform: rotateY(180deg);
}

/* Opacity/filter on this 3D parent flatten the faces and reveal mirrored ranks. */
.war-card.dealing {
    animation: cardDeal 0.4s ease;
}

@keyframes cardDeal {
    0%   { translate: 0 -1.25rem; }
    100% { translate: 0 0; }
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem;
}

.card-front {
    background: linear-gradient(160deg, var(--card-white) 0%, var(--card-cream) 100%);
    box-shadow:
        0 0.25rem 0.9375rem rgba(0,0,0,0.4),
        inset 0 0 0 0.0625rem rgba(0,0,0,0.08);
    border: 0.0625rem solid var(--steel-dark);
}

.card-back {
    background:
        linear-gradient(135deg, var(--card-back-1) 0%, var(--card-back-2) 50%, var(--card-back-1) 100%);
    transform: rotateY(180deg);
    box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.5);
    border: 0.1875rem solid var(--gold-dark);
}

.card-back::after {
    content: '⚔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.75rem;
    color: var(--gold);
    text-shadow: 0 0 0.75rem rgba(255, 213, 74, 0.5);
    opacity: 0.85;
}

.card-rank-top {
    align-self: flex-start;
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
}

.card-suit-center {
    font-size: 2.5rem;
    text-align: center;
    line-height: 1;
}

.card-rank-bottom {
    align-self: flex-end;
    font-size: var(--fs-xl);
    font-weight: 800;
    text-align: right;
    line-height: 1;
    transform: rotate(180deg);
}

.war-card.red .card-rank-top,
.war-card.red .card-rank-bottom,
.war-card.red .card-suit-center {
    color: var(--card-red);
}

.war-card.black .card-rank-top,
.war-card.black .card-rank-bottom,
.war-card.black .card-suit-center {
    color: var(--card-black);
}

/* Ace glow halo */
.war-card.is-ace .card-front {
    border-color: var(--gold);
    box-shadow:
        0 0 1.5rem rgba(255, 213, 74, 0.85),
        0 0 3rem rgba(255, 213, 74, 0.45),
        inset 0 0 0 0.125rem var(--gold-bright);
    animation: aceGlow 1.2s ease-in-out infinite;
}

@keyframes aceGlow {
    0%, 100% {
        box-shadow:
            0 0 1.25rem rgba(255, 213, 74, 0.7),
            0 0 2.5rem rgba(255, 213, 74, 0.35),
            inset 0 0 0 0.125rem var(--gold-bright);
    }
    50% {
        box-shadow:
            0 0 2rem rgba(255, 213, 74, 1),
            0 0 4rem rgba(255, 213, 74, 0.6),
            inset 0 0 0 0.125rem var(--gold-bright);
    }
}

.war-card.winner {
    animation: winnerPulse 0.55s ease;
}

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

.war-card.loser {
    animation: loserShake 0.45s ease;
}

@keyframes loserShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.375rem); }
    75% { transform: translateX(0.375rem); }
}

/* VS in the middle */
.vs-indicator {
    color: var(--gold);
    font-size: var(--fs-2xl);
    font-weight: 800;
    text-shadow: 0 0 0.625rem rgba(255, 213, 74, 0.55);
    letter-spacing: 0.0625rem;
}

/* Round indicator */
.round-indicator {
    margin-top: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
    color: var(--steel);
    font-size: var(--fs-sm);
    letter-spacing: 0.125rem;
}

.round-label, .round-of {
    color: var(--text-muted);
    text-transform: uppercase;
}

#round-number, #round-total {
    color: var(--gold);
    font-size: var(--fs-lg);
    font-weight: 700;
}

/* ============ RESULT DISPLAY ============ */
#result-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 100;
    padding: 1rem 2rem;
    background: rgba(14, 31, 23, 0.95);
    border: 0.125rem solid var(--gold);
    border-radius: 1rem;
    box-shadow:
        0 0 2rem rgba(255, 213, 74, 0.5),
        0 0 4rem rgba(163, 38, 48, 0.3);
    animation: resultPopup 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#result-display.hidden { display: none; }

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

.result-text {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: 0.125rem;
    text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5);
}

.result-text.win  { color: var(--gold); }
.result-text.lose { color: var(--crimson-soft); }

.result-amount {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--steel-soft);
    margin-top: 0.25rem;
}

/* ============ ACE SURGE BANNER ============ */
#ace-surge {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    color: #2a1a00;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: 0.125rem solid #fff5d0;
    box-shadow:
        0 0 2rem rgba(255, 213, 74, 0.8),
        0 0.25rem 1rem rgba(0,0,0,0.4);
    text-align: center;
    z-index: 90;
    animation: surgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ace-surge.hidden { display: none; }

@keyframes surgePop {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.15); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.surge-text {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 900;
    letter-spacing: 0.1875rem;
}

.surge-sub {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-top: 0.125rem;
    opacity: 0.85;
}

/* ============ MESSAGE DISPLAY ============ */
#message-display {
    position: absolute;
    bottom: 12rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(14, 31, 23, 0.95);
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--steel-dark);
    z-index: 100;
    white-space: nowrap;
}

#message-display.hidden { display: none; }

#message-text {
    color: var(--text-white);
    font-size: var(--fs-sm);
}

/* ============ BETTING CONTROLS ============ */
#betting-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
}

#betting-controls.hidden { display: none; }

.bet-selector {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bet-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.0625rem;
}

.bet-buttons { display: flex; gap: 0.375rem; }

.bet-btn {
    width: 3rem;
    height: 2.125rem;
    background: linear-gradient(180deg, var(--forest-light) 0%, var(--forest-deep) 100%);
    border: 0.0625rem solid var(--steel-dark);
    border-radius: 0.5rem;
    color: var(--text-white);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bet-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold-bright);
}

.bet-btn.active {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-dark) 100%);
    border-color: var(--gold-bright);
    color: var(--forest-deep);
    box-shadow: 0 0.125rem 0.5rem rgba(255, 213, 74, 0.4);
}

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

/* Start match button */
#start-btn {
    width: 12.5rem;
    height: 3.25rem;
    background: linear-gradient(180deg, var(--crimson-soft) 0%, var(--crimson) 60%, var(--crimson-dark) 100%);
    border: 0.125rem solid var(--gold);
    border-radius: 1.625rem;
    color: var(--steel-soft);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: 0.125rem;
    cursor: pointer;
    box-shadow:
        0 0.25rem 1rem rgba(163, 38, 48, 0.5),
        inset 0 0.0625rem 0 rgba(255,255,255,0.15);
    transition: all 0.18s ease;
}

#start-btn:hover:not(:disabled) {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.4375rem 1.5rem rgba(163, 38, 48, 0.7);
}

#start-btn:active:not(:disabled) {
    transform: translateY(0);
}

#start-btn:disabled {
    background: linear-gradient(180deg, #3a2024 0%, #1a1014 100%);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
    box-shadow: none;
    cursor: not-allowed;
}

.start-text { display: inline-block; }

/* Draw button */
#draw-btn {
    width: 12.5rem;
    height: 3.25rem;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, var(--gold-dark) 100%);
    border: 0.125rem solid #fff5d0;
    border-radius: 1.625rem;
    color: var(--forest-deep);
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: 0.125rem;
    cursor: pointer;
    margin: 0.5rem 0;
    box-shadow:
        0 0.25rem 1.25rem rgba(255, 213, 74, 0.5),
        inset 0 0.0625rem 0 rgba(255,255,255,0.3);
    transition: all 0.18s ease;
    animation: drawPulse 1.8s ease-in-out infinite;
}

#draw-btn.hidden { display: none; }

@keyframes drawPulse {
    0%, 100% { box-shadow: 0 0.25rem 1.25rem rgba(255, 213, 74, 0.5); }
    50%      { box-shadow: 0 0.25rem 2rem rgba(255, 213, 74, 0.85); }
}

#draw-btn:hover:not(:disabled) {
    transform: translateY(-0.125rem);
}

#draw-btn:active:not(:disabled) {
    transform: translateY(0);
}

#draw-btn:disabled {
    background: linear-gradient(180deg, #3a3624 0%, #1a1814 100%);
    color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.1);
    box-shadow: none;
    cursor: not-allowed;
    animation: none;
}

.draw-text { display: inline-block; }

/* ============ GAME TITLE ============ */
.game-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0 0.375rem;
}

.title-icon {
    font-size: var(--fs-lg);
    filter: drop-shadow(0 0 0.5rem rgba(255, 213, 74, 0.5));
}

.title-text {
    color: var(--steel);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
}

/* ============ PARTICLES ============ */
#particles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
}

.particle {
    position: absolute;
    font-size: 1.25rem;
    animation: particleFall 2s ease-out forwards;
}

@keyframes particleFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(80vh) rotate(540deg) scale(0.4); }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 25rem) {
    .war-card { width: 5.25rem; height: 7.5rem; }
    .card-suit-center { font-size: 2rem; }
    .card-rank-top, .card-rank-bottom { font-size: var(--fs-lg); }
    .bet-btn { width: 2.625rem; height: 1.875rem; font-size: var(--fs-sm); }
    #start-btn, #draw-btn { width: 10.75rem; height: 2.875rem; font-size: var(--fs-md); }
    .shield { width: 0.875rem; height: 1rem; }
}

@media (max-height: 43.75rem) {
    #scoreboard { padding: 0.375rem 0.625rem; }
    .arena-frame { padding: 0.875rem 0.625rem 0.75rem; }
    .war-card { height: 7.5rem; }
    .card-suit-center { font-size: 2.125rem; }
    .round-indicator { margin-top: 0.625rem; }
}