/* ======================================================= */
/* ==       21 DUEL - MASTER STYLESHEET (CLEANED)       == */
/* ======================================================= */

html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #ffffff;
    margin: 0;
    overflow: hidden;
    height: 100vh;
    background-image: url('/static/assets/main_menu_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#app-container {
    position: relative; 
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.6);
}

#main-content {
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box; 
    padding-left: 85px; 
    padding-right: 75px;
    transition: all 0.4s ease-in-out;
    opacity: 1 !important; 
 
}

/* ================================= */
/* ==      PAGE & UI LAYOUT       == */
/* ================================= */

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#play-screen {
    padding-bottom: 20px;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

/* --- Floating Side Bars --- */
#left-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

#right-bar {
    position: absolute; 
    right: 2px; /* Pinned tighter to the edge */
    top: 0;
    height: 100%; 
    width: 75px; /* Compact width */
    z-index: 20;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* --- Mode Takeover (Hides sidebars) --- */
body.in-lobby #left-bar,
body.in-lobby #right-bar,
body.in-game #left-bar,
body.in-game #right-bar {
    display: none;
}
body.in-lobby #main-content {
    padding: 0;
}
body.in-lobby #app-container {
    background-color: transparent;
}

body.in-game #main-content { padding: 0; }   /* <-- full width for cards in game */

:root{
  /* slightly smaller clamps = always fits on short phones */
  --card-w: clamp(36px, 10vw, 52px);
  --card-h: clamp(52px, 14vw, 74px);
  --card-f: clamp(18px, 5.5vw, 26px);
}


/* ================================= */
/* ==       MAIN MENU STYLES      == */
/* ================================= */

#top-bar {
    text-align: center;
    position: relative; 
    height: 70px;
    padding-top: 10px;
}

.token-balance {
    clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
    background: radial-gradient(ellipse at top, #00c6ff, #0072ff);
    border: 2px solid #0056b3;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.5),
        0 5px 10px rgba(0,0,0,0.5);
    padding: 5px 25px 5px 65px;
    min-width: 160px;
    box-sizing: border-box;
    position: relative; 
    display: inline-flex;
    align-items: center;
}

.token-balance .token-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
    z-index: 2; 
}

.token-balance #player-tokens {
    font-family: 'Lilita One', cursive;
    font-size: 34px; 
    color: #ffffff;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(173, 216, 230, 0.3);
    width: 100%;
    text-align: center;
}

#center-content { 
    flex-grow: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

#center-logo {
    max-width: 50%;
    max-height: 30vh;
    animation: 
        breathe 5s infinite ease-in-out,
        filter-glow 3s infinite ease-in-out;
    cursor: default;
    transition: all 0.3s ease;
}

#bottom-bar { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    gap: 15px; 
}

.bottom-button {
    font-family: 'Lilita One', cursive;
    font-size: 21px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #0099dd;
    color: white;
    padding: 15px;
    border-radius: 25px; 
    border: 3px solid #2c3e50;
    box-shadow: 0 4px 0 0 #2c3e50; 
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    width: 45%;
    max-width: 220px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 0 #2c3e50;
    background-color: #00aaff;
}

.bottom-button:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #2c3e50;
    background-color: #0088cc;
}

/* --- Duel Charge & Timer UI (Left Bar) --- */
#timer-container {
    font-family: 'Lilita One', cursive;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #ffcc00;
    border-radius: 8px;
    padding: 4px 8px;
    margin-bottom: 15px;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
    text-align: center;
}

#timer-text {
    font-size: 16px;
    color: #ffcc00;
    text-shadow: 0 0 3px #000;
}

.duel-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
}

.duel-icon {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.duel-icon-wrapper.inactive .duel-icon {
    filter: grayscale(80%) brightness(50%);
    opacity: 0.6;
}

.duel-cross {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 10px;
    background-color: #e74c3c;
    border-radius: 5px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    border: 1px solid #111;
}

.duel-cross::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
    border: 1px solid #111;
}

/* --- Side Buttons (Right Bar) --- */
#right-bar .side-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}
#right-bar .side-button:hover {
    color: white;
    transform: translateX(-50%) scale(1.1);
    border-color: white;
}
#right-bar .side-button i {
    font-size: 26px;
    margin: 0;
}
#right-bar .side-button span {
    font-family: 'Lilita One', cursive;
    font-size: 12px;
    margin-top: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#guide-button { top: 25%; }
#leaderboard-button { bottom: 30%; }


/* ================================= */
/* ==       GAMEPLAY SCREEN       == */
/* ================================= */

#game-screen {
    background: radial-gradient(ellipse at center, #2c3e50 0%, #000000 100%);
    padding: 20px 15px;
    box-sizing: border-box;
}

.card-area {
    background-color: #0b4e28;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 15px 15px;
    border: 3px solid #b38600;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    min-height: 150px;
    text-shadow: 1px 1px 2px #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

#dealer-hand-area, #player-hand-area {
    min-height: 150px;
}

.hand-label {
    font-family: 'Lilita One', cursive;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

.cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 100px;
    padding: 5px 0;
}

.card {
    background-color: white;
    color: black;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 5px;
    border: 1px solid #333;
    font-size: var(--card-f);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card.red { color: #d63031; }
.card.hidden-card {
    background-image: url('/static/assets/card_back.png');
    background-color: #574b90;
    color: transparent;
}

.card.animating {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    /* Changed from 0.7s to 0.35s - MUCH faster */
    transition: left 0.35s cubic-bezier(.17,.67,.26,.99), 
                top 0.35s cubic-bezier(.17,.67,.26,.99), 
                transform 0.35s ease-out;
}


@media (max-width: 380px), (max-height: 680px) {
  .cards-container { gap: 6px; }
  #dealer-hand-area, #player-hand-area { min-height: 130px; }
  #gambit-cards-fan { bottom: 90px; }
}




#deck-area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 90px;
    margin: 10px 0;
}

#deck-image {
    width: 70px;
    height: 80px;
    transition: transform 0.5s;
}

/* --- Game Action Bar (Hit/Stand) --- */
#game-actions-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* This is a generic button for game screens (Hit, Stand, Modal buttons) */
.game-button {
    font-family: 'Lilita One', cursive;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 2px 2px rgba(0,0,0,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

/* Style for big Hit/Stand buttons */
#hit-btn, #stand-btn {
    font-size: 28px;
    letter-spacing: 1.5px;
    padding: 16px 20px;
    border-radius: 15px;
    width: 45%;
    max-width: 200px;
}

#hit-btn {
    background-color: #2ecc71;
    box-shadow: 0 6px 0 0 #27ae60;
}
#hit-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 0 #27ae60;
}
#hit-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 0 #27ae60;
}

#stand-btn {
    background-color: #e74c3c;
    box-shadow: 0 6px 0 0 #c0392b;
}
#stand-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 0 #c0392b;
}
#stand-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 0 #c0392b;
}

/* --- Top Info Bar & Turn Timer --- */
#game-info-bar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    background-color: rgba(0,0,0,0.5);
    font-family: 'Lilita One', cursive;
    text-align: center;
    color: white;
    font-size: 18px;
    text-shadow: 1px 1px 2px #000;
}



#dealer-rule-text {
    font-family: 'Roboto', sans-serif;
    color: #ffdd77;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
    font-style: italic;
    background-color: rgba(0,0,0,0.3);
    border-radius: 8px;
    width: 85%;
    max-width: 350px;
    margin: 10px auto 0 auto;
    border: 1px solid rgba(255, 221, 119, 0.4);
}


/* ================================= */
/* ==      GAME OVER MODAL        == */
/* ================================= */

#game-over-overlay {
    position: absolute;
    z-index: 100;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px) brightness(0.8);
    background: rgba(0,0,0,0.5);
}

#game-over-modal {
    background: rgba(20, 20, 20, 0.95);
    border-radius: 15px;
    padding: 25px 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 320px;
    box-sizing: border-box;
}

#game-over-message {
    color: #ffffff;
    font-family: 'Lilita One', cursive;
    font-size: 1.6rem;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

#game-over-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

#game-over-modal .game-button {
    border-radius: 10px;
    padding: 12px 25px;
    font-size: 16px;
    line-height: 1.2;
    flex-grow: 0;
    white-space: nowrap;
}

#game-over-modal .game-button:only-child {
    max-width: 250px;
}

#main-menu-btn {
    background-color: #046dd6;
    box-shadow: 0 4px 0 0 #2c3e50;
}
#main-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #2c3e50;
}
#main-menu-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #2c3e50;
}

#play-again-btn {
    background-color: #2ecc71;
    box-shadow: 0 4px 0 0 #27ae60;
}
#play-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #27ae60;
}
#play-again-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #27ae60;
}

#game-over-buttons .game-button.disabled {
    background-color: #555;
    box-shadow: 0 5px 0 0 #333;
    cursor: not-allowed;
    opacity: 0.7;
}
#game-over-buttons .game-button.disabled:hover {
    transform: none;
    box-shadow: 0 5px 0 0 #333;
}


/* ================================= */
/* ==        GUIDE SCREEN         == */
/* ================================= */

#guide-screen {
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    padding: 20px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
#guide-screen:not(.hidden) {
    transform: translateX(0);
}

.guide-container {
    background-color: rgba(30, 30, 30, 0.85);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 25px 30px;
    overflow-y: auto;
    flex-grow: 1;
    margin-bottom: 80px;
}

.guide-title {
    font-family: 'Lilita One', cursive;
    font-size: 2.5rem;
    text-align: center;
    color: #fff;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.7);
}

.guide-section h2 {
    font-family: 'Lilita One', cursive;
    color: #00aaff;
    font-size: 1.5rem;
    border-bottom: 2px solid rgba(0, 170, 255, 0.3);
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.guide-section p, .guide-section li {
    font-size: 16px;
    line-height: 1.6;
    color: #ddd;
}
.guide-section ul {
    list-style: none;
    padding-left: 0;
}
.guide-section li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.guide-section li span {
    font-size: 24px;
    margin-right: 15px;
    width: 25px;
    text-align: center;
}
.guide-example {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#back-to-play-btn {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex; /* Overwrite side-button style */
    flex-direction: row;
    gap: 10px;
    background-color: rgba(0,0,0,0.5);
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.3);
    width: 120px;
    justify-content: center;
    z-index: 5;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    cursor: pointer;
}


/* ================================= */
/* ==      PVP LOBBY SCREEN       == */
/* ================================= */

#pvp-lobby-screen { 
    background: radial-gradient(ellipse at center, #2c3e50 0%, #000000 100%); 
    padding: 15px; 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#lobby-top-bar {
    position: absolute;
    top: 15px;
    left: 15px;
}

#lobby-back-btn { 
    font-size: 16px; 
    padding: 8px 15px; 
    background-color: rgba(127, 140, 141, 0.5); 
    box-shadow: none; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    max-width: 100px; 
    border-radius: 15px;
}
#lobby-back-btn:active { transform: scale(0.95); }

/* --- Sub-Pages within the Lobby --- */

#lobby-rules-area {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rules-header h2 { font-family: 'Lilita One', cursive; font-size: 2.5rem; margin: 0 0 10px 0; text-shadow: 0 0 10px rgba(0, 220, 255, 0.8); }
.rules-header p { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1rem; 
    margin: 0; 
    max-width: 350px; 
    
    /* === THE FIXES === */
    text-align: center; /* Centers the text perfectly */
    color: #d2a8ff; /* Light Frosty Purple - readable and stylish */
    opacity: 1; /* Removed the 0.9 opacity so the color pops */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); /* Dark shadow to separate it from the background */
}
.rules-scroll { background-color: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.2); border-radius: 15px; padding: 15px 20px; max-width: 400px; margin-top: 20px;}
.rule-section { text-align: center; margin-bottom: 12px; }
.rule-section:last-child { margin-bottom: 0; }
.rule-section h3 { font-family: 'Lilita One', cursive; color: #ffcc00; margin: 0 0 5px 0; font-size: 1.2rem; }
.rule-section p { font-family: 'Roboto', sans-serif; margin: 0; line-height: 1.5; color: #ddd; }
.rule-section p strong { color: #00aaff; font-weight: 700; }

#lobby-bet-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.bet-title { font-family: 'Lilita One', cursive; font-size: 2rem; color: white; text-align: center; margin-bottom: 20px; }
.bet-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 320px; }
.lobby-bet-btn { 
    border-radius: 20px; 
    cursor: pointer; 
    transition: all 0.1s ease-in-out; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}
.lobby-bet-btn:hover { transform: translateY(-3px); }
.lobby-bet-btn:active { transform: translateY(4px); }
.token-icon-large { width: 70%; max-width: 80px; height: auto; margin-bottom: 5px; }
.lobby-bet-btn span { font-family: 'Lilita One', cursive; font-size: 28px; color: white; text-shadow: 0 2px 3px rgba(0,0,0,0.4); }
.stake-5 { background: #27ae60; box-shadow: 0 8px 0 0 #229954; }
.stake-10 { background: #2980b9; box-shadow: 0 8px 0 0 #2471a3; }
.stake-50 { background: #d35400; box-shadow: 0 8px 0 0 #ba4a00; }
.stake-100 { background: #c0392b; box-shadow: 0 8px 0 0 #a93226; }
.lobby-bet-btn.disabled { background: #555; box-shadow: 0 8px 0 0 #333; cursor: not-allowed; opacity: 0.6; }
.lobby-bet-btn.disabled:hover, .lobby-bet-btn.disabled:active { transform: none; box-shadow: 0 8px 0 0 #333; }

#lobby-searching-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 80px 0 100px 0;
    box-sizing: border-box;
}
.search-top-info { text-align: center; color: rgba(255, 255, 255, 0.7); font-family: 'Roboto', sans-serif; }
.search-top-info p { margin: 0; line-height: 1.4; }
.search-top-info .search-rules-reminder { color: #ffdd77; font-weight: bold; margin-top: 5px; }
.search-main-content { text-align: center; }
.searching-title { font-family: 'Bangers', cursive; font-size: 2.8rem; letter-spacing: 2px; color: white; text-align: center; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 4px 5px rgba(0,0,0,0.5); }
#searching-coin-spinner { display: block; width: 70px; height: 70px; margin: 20px auto; animation: spin 1.5s linear infinite; }
#searching-details { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 15px; background-color: rgba(0,0,0,0.5); border-radius: 15px; padding: 10px 20px; border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
.search-detail-item { display: flex; align-items: center; gap: 8px; font-family: 'Lilita One', cursive; font-size: 1.3rem; color: white; padding: 0 10px; }
#search-mode-display { border-right: 2px solid rgba(255,255,255,0.3); }
#search-stake-display .token-icon-small { width: 22px; height: 22px; }

#lobby-actions-bar { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    width: 100%;
    padding-bottom: 10px;
}
#lobby-actions-bar .game-button { 
    width: 48%; 
    max-width: 220px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 12px 5px; 
    font-size: 19px; 
    line-height: 1.2; 
    white-space: nowrap; 
    border-radius: 15px;
}
#lobby-actions-bar .game-button span { font-size: 16px; text-transform: none; opacity: 0.9; font-weight: bold; }
/* --- 1. SPECIAL LAYOUT (Content Centered in Middle) --- */
#lobby-bet-area.advanced-layout {
    /* Change from flex-start to center to bring it down */
    justify-content: center !important; 
    
    /* Remove the top padding so it floats naturally in the middle */
    padding-top: 0 !important; 
    
    /* Ensure there's space between the elements */
    gap: 10px; 
}

/* Adjust the spacing between the Text and the Buttons */
#lobby-bet-area.advanced-layout .bet-button-grid {
    /* This creates the gap between the description and the tokens */
    margin-top: 40px; 
}

/* --- 2. PYRAMID TEXT STYLES (Soulful & Informative) --- */
#advanced-mode-desc {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
    max-width: 340px;
    margin-bottom: 10px;
    animation: fade-in-up 0.4s ease-out;
}

/* LINE 1: THE HEADLINE (Largest, Gold Gradient, "The Soul") */
.desc-line-1 {
    font-family: 'Bangers', cursive;
    font-size: 26px; /* Largest */
    letter-spacing: 1.5px;
    line-height: 1.2;
    
    /* Gold Gradient */
    background: linear-gradient(to right, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.8));
    margin-bottom: 8px;
}

/* LINE 2: THE MECHANIC (Medium, Cyan Glow) */
.desc-line-2 {
    font-family: 'Lilita One', cursive;
    font-size: 18px; /* Medium */
    color: #00c6ff; /* Cyan for contrast */
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* LINE 3: THE EXPLANATION (Smallest, White/Gray) */
.desc-line-3 {
    font-family: 'Roboto', sans-serif;
    font-size: 13px; /* Smallest */
    color: #ddd;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.9;
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
#quick-play-btn { background-color: #00a8ff; box-shadow: 0 6px 0 0 #007bb5; }
#quick-play-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 #007bb5; }
#quick-play-btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 #007bb5; }
#advanced-play-btn { 
    background-color: #9b59b6; /* Warlord Purple */
    box-shadow: 0 6px 0 0 #8e44ad; 
    cursor: pointer; /* Hand Finger */
    filter: none; /* Remove the grey look */
}

/* Active Hover Effect (Pop Up) */
#advanced-play-btn:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 10px 0 0 #8e44ad; 
}

/* Active Click Effect (Push Down) */
#advanced-play-btn:active { 
    transform: translateY(6px); 
    box-shadow: 0 0 0 0 #8e44ad; 
}

#cancel-search-btn {
    width: 90%;
    max-width: 300px;
    background-color: #95a5a6;
    box-shadow: 0 6px 0 0 #7f8c8d;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.2;
    padding: 12px 5px;
    border-radius: 15px;
}
#cancel-search-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 #7f8c8d; }
#cancel-search-btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 #7f8c8d; }


/* ================================= */
/* ==      OVERLAYS & MODALS      == */
/* ================================= */

#giant-coin-toss-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
#giant-coin-toss-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}
#giant-coin {
    width: 250px;
    height: 250px;
    position: relative;
    transform-style: preserve-3d;
}
.giant-coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    backface-visibility: hidden;
}
#giant-coin-player { transform: rotateY(0deg); }
#giant-coin-dealer { transform: rotateY(180deg); }
#giant-coin.animate-flip-to-player { animation: flip-to-first 3.5s cubic-bezier(0.2, 0, 0.3, 1) forwards; }
#giant-coin.animate-flip-to-dealer { animation: flip-to-second 3.5s cubic-bezier(0.2, 0, 0.3, 1) forwards; }

#giant-coin-result-text {
    font-family: 'Bangers', cursive;
    font-size: 3rem;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 30px;
    color: #ffdd77;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 4px 5px rgba(0,0,0,0.5);
    transform: scale(0);
    transition: transform 0.4s 0.2s ease;
}
#giant-coin-result-text:not(.hidden) {
    transform: scale(1);
}


/* ======================================= */
/* ==   (CLEANED) KEYFRAME ANIMATIONS   == */
/* ======================================= */

@keyframes breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes filter-glow {
  0%   { filter: drop-shadow(0 0 5px rgba(0, 191, 255, 0.5)); }
  50%  { filter: drop-shadow(0 0 15px rgba(0, 191, 255, 0.9)); }
  100% { filter: drop-shadow(0 0 5px rgba(0, 191, 255, 0.5)); }
}

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

@keyframes pulse-warning {
    0% { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 15px rgba(255, 100, 100, 0.8); border-color: #ff6464; }
    50% { transform: translateY(-50%) scale(1.35); box-shadow: 0 0 25px rgba(255, 100, 100, 1); border-color: #ff2d2d; }
    100% { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 15px rgba(255, 100, 100, 0.8); border-color: #ff6464; }
}

@keyframes result-pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Correct Coin Flip Animations */
@keyframes flip-to-first {
  from { transform: rotateY(0deg) scale(0.5); }
  to   { transform: rotateY(1080deg) scale(1); } /* 3 full rotations, lands on the front face */
}

@keyframes flip-to-second {
  from { transform: rotateY(0deg) scale(0.5); }
  to   { transform: rotateY(1260deg) scale(1); } /* 3.5 rotations, lands on the back face */
}

/* ================================= */
/* ==   GAME END VFX ANIMATIONS   == */
/* ================================= */


#vfx-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px) brightness(0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#vfx-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

#vfx-content {
    text-align: center;
    transform: scale(0.5);
    opacity: 0;
}

#vfx-overlay.vfx-win #vfx-content { animation: vfx-pop-in 0.6s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
#vfx-overlay.vfx-loss #vfx-content { animation: vfx-fade-in-heavy 1s 0.2s ease-out forwards; }
#vfx-overlay.vfx-blackjack #vfx-content { animation: vfx-blackjack-slam 0.8s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

#vfx-title {
    font-family: 'Bangers', cursive;
    font-size: clamp(4.5rem, 15vw, 6rem); 
    letter-spacing: 4px;
    margin: 0;
    line-height: 1;
    text-shadow: 
        3px 3px 0 #000, -3px -3px 0 #000, 
        3px -3px 0 #000, -3px 3px 0 #000,
        6px 6px 10px rgba(0,0,0,0.7);
}

#vfx-overlay.vfx-blackjack #vfx-title { letter-spacing: 2px; }
#vfx-overlay.vfx-win #vfx-title { color: #2ecc71; }
#vfx-overlay.vfx-loss #vfx-title { color: #e74c3c; }
#vfx-overlay.vfx-blackjack #vfx-title { color: #ffdd77; animation: vfx-blackjack-glow 1.5s infinite ease-in-out; }

#vfx-subtitle {
    font-family: 'Lilita One', cursive;
    font-size: 1.5rem;
    margin: 10px 0 20px 0;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

#vfx-reward {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background-color: rgba(0,0,0,0.5);
    border: 2px solid #ffdd77;
    border-radius: 50px;
    padding: 8px 25px;
    margin-bottom: 30px;
}
.vfx-coin-icon { width: 40px; height: 40px; }
#vfx-reward-amount {
    font-family: 'Lilita One', cursive;
    font-size: 2rem;
    color: #fff;
}

#vfx-close-btn {
    margin: 0 auto;
    background-color: #046dd6;
    box-shadow: 0 5px 0 0 #2c3e50;
    padding: 12px 25px;
    font-size: 1.2rem;
    border-radius: 12px;
}

/* --- KEYFRAMES --- */
@keyframes vfx-pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes vfx-fade-in-heavy { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes vfx-blackjack-slam { 0% { transform: scale(3); opacity: 0; filter: brightness(3); } 40% { transform: scale(0.9); opacity: 1; filter: brightness(1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes vfx-blackjack-glow { 0% { text-shadow: 3px 3px 0 #000, 0 0 10px #ffdd77; } 50% { text-shadow: 3px 3px 0 #000, 0 0 35px #ffdd77; } 100% { text-shadow: 3px 3px 0 #000, 0 0 10px #ffdd77; } }

/* FORCE VISIBILITY FIX */
.cards-container {
    overflow: visible !important; /* Allow cards to fly in */
    min-height: 100px;
    opacity: 1 !important;
}

/* Ensure cards are always on top */
.card {
    z-index: 10;
    opacity: 1;
}
/* ========================================= */
/* ==   TIERED REWARD POPUP (NEW CARD)    == */
/* ========================================= */

/* 1. Base Overlay */
.vfx-reward-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.vfx-reward-overlay:not(.hidden) { opacity: 1; }

/* 2. The "Loot Card" Container */
.vfx-reward-overlay #vfx-content {
    width: 85%; max-width: 320px; padding: 40px 20px;
    border-radius: 24px; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(160deg, #1a1a1a, #000);
    border: 2px solid #333; box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    animation: card-pop-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex; flex-direction: column; align-items: center;
}

/* 3. Typography */
.vfx-reward-overlay #vfx-title {
    font-family: 'Bangers', cursive; font-size: 2.8rem; line-height: 1;
    margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.vfx-reward-overlay #vfx-subtitle {
    font-family: 'Roboto', sans-serif; font-size: 14px; color: #ccc;
    margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
}
.rank-highlight { color: #fff; font-size: 1.2em; }

/* 4. The Reward Pill */
.vfx-reward-overlay #vfx-reward {
    background: rgba(0, 0, 0, 0.4); border-radius: 50px; padding: 10px 25px;
    margin-bottom: 30px; display: flex; align-items: center; gap: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
.vfx-reward-overlay #vfx-reward-amount {
    font-family: 'Lilita One', cursive; font-size: 28px; color: #fff; text-shadow: none;
}

/* 5. The Button */
.vfx-reward-overlay #vfx-close-btn {
    width: 100%; padding: 15px 0; border-radius: 12px;
    font-family: 'Lilita One', cursive; font-size: 18px; text-transform: uppercase;
    border: none; cursor: pointer; color: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.vfx-reward-overlay #vfx-close-btn:active { transform: scale(0.98); }

/* --- TIERS --- */
.tier-legendary #vfx-content { border-color: #ffd700; background: radial-gradient(circle at top, #2c2000, #000); box-shadow: 0 0 50px rgba(255, 215, 0, 0.3); }
.tier-legendary #vfx-title { background: linear-gradient(to bottom, #fff, #ffd700, #b8860b); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tier-legendary .rank-highlight { color: #ffd700; }
.tier-legendary #vfx-close-btn { background: linear-gradient(to bottom, #ffd700, #f39c12); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }

.tier-epic #vfx-content { border-color: #e5e4e2; background: radial-gradient(circle at top, #2c3e50, #000); box-shadow: 0 0 40px rgba(229, 228, 226, 0.2); }
.tier-epic #vfx-title { background: linear-gradient(to bottom, #fff, #e5e4e2, #7f8c8d); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tier-epic .rank-highlight { color: #e5e4e2; }
.tier-epic #vfx-close-btn { background: linear-gradient(to bottom, #ffffff, #bdc3c7); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }

.tier-rare #vfx-content { border-color: #cd7f32; background: radial-gradient(circle at top, #3e2723, #000); box-shadow: 0 0 30px rgba(205, 127, 50, 0.2); }
.tier-rare #vfx-title { background: linear-gradient(to bottom, #fff, #cd7f32, #8d6e63); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tier-rare .rank-highlight { color: #cd7f32; }
.tier-rare #vfx-close-btn { background: linear-gradient(to bottom, #ffcc80, #cd7f32); box-shadow: 0 0 15px rgba(205, 127, 50, 0.3); }

.tier-common #vfx-content { border-color: #4a90e2; background: radial-gradient(circle at top, #0d1b2a, #000); box-shadow: 0 0 30px rgba(74, 144, 226, 0.2); }
.tier-common #vfx-title { background: linear-gradient(to bottom, #fff, #4a90e2, #0056b3); background-clip: text; -webkit-background-clip: text; color: transparent; }
.tier-common .rank-highlight { color: #4a90e2; }
.tier-common #vfx-close-btn { background: linear-gradient(to bottom, #63b8ff, #4a90e2); box-shadow: 0 0 15px rgba(74, 144, 226, 0.3); }

@keyframes card-pop-up { 0% { transform: scale(0.5) translateY(50px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

/* ============================================== */
/* ==   NEW & IMPROVED PVP ACTION BUTTONS      == */
/* ============================================== */

/* --- The Main Action Bar (Hit/Stand) --- */
#game-actions-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px; /* Separates it from the gambit bar */
}

/* Style for big Hit/Stand buttons */
#hit-btn, #stand-btn {
    font-size: 28px;
    letter-spacing: 1.5px;
    padding: 16px 20px;
    border-radius: 15px;
    width: 45%;
    max-width: 200px;
}

#hit-btn { background-color: #2ecc71; box-shadow: 0 6px 0 0 #27ae60; }
#hit-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 #27ae60; }
#hit-btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 #27ae60; }

#stand-btn { background-color: #e74c3c; box-shadow: 0 6px 0 0 #c0392b; }
#stand-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 0 0 #c0392b; }
#stand-btn:active { transform: translateY(6px); box-shadow: 0 0 0 0 #c0392b; }


/* --- The Gambit Actions Bar (Surrender, Challenge, Mercy) --- */
#gambit-actions-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; /* Space between the circular buttons */
    margin-top: 15px; /* Pushes it down from the player hand */
    height: 70px; /* Fixed height for consistency */
}

.gambit-button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Lilita One', cursive;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.gambit-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2);
}
.gambit-button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 0 rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.4);
}

.gambit-button i {
    font-size: 24px;
    margin-bottom: 3px;
}
.gambit-button span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gambit-button.disabled {
    background: #5f6a6b !important; /* Muted grey for disabled state */
    box-shadow: 0 5px 0 0 #34495e !important;
    cursor: not-allowed;
    opacity: 0.6;
}
.gambit-button.disabled:hover, .gambit-button.disabled:active {
    transform: none;
    box-shadow: 0 5px 0 0 #34495e !important;
}

/* Specific button colors */
#surrender-btn { background-color: #95a5a6; } /* Silver/Grey */
#challenge-btn { background-color: #e74c3c; } /* Red */
#mercy-btn     { background-color: #9b59b6; } /* Purple */


/* --- MERCY PROMPT STYLES --- */
#mercy-prompt-overlay {
    position: absolute;
    z-index: 200;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px) brightness(0.8);
    background: rgba(0,0,0,0.5);
}

#mercy-prompt-modal {
    background: rgba(20, 20, 20, 0.95);
    border-radius: 15px;
    padding: 25px 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.6);
    border: 1px solid #9b59b6;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 320px;
    box-sizing: border-box;
    text-align: center;
}

#mercy-prompt-timer {
    width: 100%;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}

#mercy-timer-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #ffdd77, #feca57);
    border-radius: 5px;
    transition: width 1s linear;
}

#mercy-prompt-message {
    font-family: 'Lilita One', cursive;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 25px;
}
#mercy-prompt-message span {
    color: #ffdd77;
}

#mercy-prompt-buttons {
    display: flex;
    gap: 15px;
    width: 100%;
}
#mercy-prompt-buttons .game-button {
    flex-grow: 1;
    border-radius: 10px;
    padding: 12px;
}

#accept-mercy-btn { background-color: #27ae60; box-shadow: 0 4px 0 0 #229954; }
#decline-mercy-btn { background-color: #c0392b; box-shadow: 0 4px 0 0 #a93226; }

/* ============================================== */
/* ==   FINAL GLOWING GAMBIT BUTTON STYLES     == */
/* ============================================== */

/* Main style for the Challenge button to be like your reference image */
#challenge-btn { 
    background-color: #f1c40f; /* Golden Yellow base color */
    
    /* Box-shadow for the yellow glow */
    box-shadow: 0 5px 0 0 rgba(0,0,0,0.3),
                inset 0 -3px 5px rgba(0,0,0,0.2),
                0 0 10px #f1c40f, 
                0 0 20px #f1c40f; 
    
    /* Apply the animation */
    animation: pulse-glow-yellow 2s infinite ease-in-out;
}

#challenge-btn:hover {
    animation-play-state: paused;
    box-shadow: 0 8px 0 0 rgba(0,0,0,0.3),
                inset 0 -3px 5px rgba(0,0,0,0.2),
                0 0 15px #f1c40f, 
                0 0 30px #f1c40f;
}

/* Keyframe Animation for the YELLOW glow */
@keyframes pulse-glow-yellow {
    0%   { transform: scale(1);   box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 10px #f1c40f, 0 0 20px #f1c40f; }
    50%  { transform: scale(1.05); box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 20px #f39c12, 0 0 40px #f39c12; }
    100% { transform: scale(1);   box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 10px #f1c40f, 0 0 20px #f1c40f; }
}


/* --- Styles for the new Mercy and Surrender buttons --- */
#mercy-btn {
    background-color: #3498db; /* Light Blue */
    animation: pulse-glow-blue 2.2s infinite ease-in-out; /* Slightly different timing */
}

/* Keyframe Animation for the BLUE glow */
@keyframes pulse-glow-blue {
    0%   { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 8px #3498db, 0 0 15px #3498db; }
    50%  { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 16px #5dade2, 0 0 30px #5dade2; }
    100% { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 8px #3498db, 0 0 15px #3498db; }
}

#surrender-btn {
    background-color: #ecf0f1; /* White/Light Grey */
    color: #2c3e50; /* Dark text for contrast on a light button */
    animation: pulse-glow-white 2.4s infinite ease-in-out;
}

/* Keyframe Animation for the WHITE glow */
@keyframes pulse-glow-white {
    0%   { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 7px #ecf0f1, 0 0 12px #ecf0f1; }
    50%  { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 14px #ffffff, 0 0 24px #ffffff; }
    100% { box-shadow: 0 5px 0 0 rgba(0,0,0,0.3), inset 0 -3px 5px rgba(0,0,0,0.2), 0 0 7px #ecf0f1, 0 0 12px #ecf0f1; }
}

/* ======================================================= */
/* ==   BOTTOM FAN LAYOUT (ON PLAYER HAND) - FINAL      == */
/* ======================================================= */

#gambit-focus-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
#gambit-focus-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

#gambit-container {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    z-index: 101;
}
#gambit-deck-closed {
    cursor: pointer;
    transition: all 0.3s ease;
}
#gambit-deck-closed:hover { transform: scale(1.1); }
#gambit-deck-closed img { width: 80px; height: auto; border-radius: 6px; }

/* The container for the cards that fan out */
/* Find this ID in your style.css and replace it with this version */

/* Fan container: center + horizontal scroll on small screens */
#gambit-cards-fan {
  position: absolute;
  bottom: 110px;
  left: 0;
  right: 0;
  z-index: 100;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;

  overflow-x: auto;          /* <-- allow swipe */
  padding: 0 12px;
  scrollbar-width: none;     /* Firefox hide scrollbar */
}
#gambit-cards-fan::-webkit-scrollbar { display: none; } /* WebKit */

/* Make gambit fan look like three floating cards (no panel) */
#gambit-cards-fan {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  overflow: visible !important;
}


/* Card: fixed width; don’t shrink; snap nicely when scrolling */
.gambit-card {
  flex: 0 0 120px;           /* <-- fixed “tile” width */
  scroll-snap-align: center;
  width: 120px;
  height: 170px;

  background: linear-gradient(to top, #2c3e50, #465875);
  border: 2px solid #7f8c8d;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.7);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;

  transition: all 0.2s ease-out;
}




/* ADD THIS NEW HOVER EFFECT */
.gambit-card:hover {
    transform: translateY(-15px) scale(1.05); /* Lifts the card up slightly */
    border-color: #f1c40f;
}

/* The area for the card's image */
.gambit-card-art {
    height: 80px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* Text styling */
.gambit-card-title-banner, .gambit-card-description {
    padding: 0 8px;
}
.gambit-card-title-banner {
    margin-top: 5px;
}
.gambit-card-title-banner h3 {
    margin: 0;
    font-family: 'Lilita One', cursive;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 3px;
}
.gambit-card-description {
    flex-grow: 1;
    padding-top: 5px;
}
.gambit-card-description p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #bdc3c7;
    font-size: 11px;
    line-height: 1.3;
}

/* ======================================================= */
/* ==      SEGMENTED CIRCULAR TIMER (FINAL DESIGN)      == */
/* ======================================================= */

/* REPLACE the #player-action-timer block in style.css with this finalized version */

#player-action-timer {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);

    width: 70px; /* Matched to the new segmented timer's inherent size */
    height: 70px;
    
    /* NEW: Explicitly set z-index to match the gambit container */
    z-index: 50;
    
    transition: transform 0.3s ease; 
}

/* Apply the pulsing animation when in the warning state */
#player-action-timer.warning {
    animation: pulse-warning-timer 1s infinite ease-in-out;
}

#timer-segments-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.timer-segment {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;   /* Width of each bar */
    height: 16px;  /* Length of each bar */
    background-color: #ffd700; /* Default gold color */
    border-radius: 3px;
    transform-origin: 50% 35px; /* (width/2) (height of container/2) */
    transition: all 0.3s ease;
}

/* Style for segments that have been "turned off" */
.timer-segment.inactive {
    background-color: rgba(0, 0, 0, 0.4);
    transform-style: flat; /* Fixes potential animation flicker */
}

/* Change color to red when in the warning state */
#player-action-timer.warning .timer-segment:not(.inactive) {
    background-color: #e74c3c;
}

#player-timer-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Lilita One', cursive;
    font-size: 24px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
}

/* Keyframes for the pulsing warning animation */
@keyframes pulse-warning-timer {
    0%   { transform: translateY(-50%) scale(1); }
    50%  { transform: translateY(-50%) scale(1.1); }
    100% { transform: translateY(-50%) scale(1); }
}


/* ===== MERCY PROMPT – visual polish + keep main timer visible ===== */

/* ===== MERCY PROMPT – visual polish + keep main timer visible ===== */
#player-action-timer {
  position: fixed;                  /* was absolute */
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000 !important;         /* above Mercy overlay */
  pointer-events: none;             /* <-- prevents blocking cards/buttons */
}

@media (max-width: 380px) {
  #player-action-timer {
    top: 8px;
    right: 8px;
    transform: none;
  }
}


/* Mercy overlay just under the timer */
#mercy-prompt-overlay { 
  z-index: 900 !important;
  backdrop-filter: blur(4px) brightness(0.85);
}

/* Modal frame enhancements */
#mercy-prompt-modal {
  max-width: 360px;
  border: 2px solid #3498db;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 25px rgba(52,152,219,0.35);
  text-align: center;
}

/* Title line: Mercy / or / Trick! */
#mercy-prompt-title {
  font-family: 'Bangers', cursive;
  font-size: 2rem;
  letter-spacing: 1px;
  margin: 8px 0 10px 0;
  text-shadow: 2px 2px 0 #000;
}
#mercy-prompt-title .mercy-word { color: #38a1ff; filter: drop-shadow(0 0 6px rgba(56,161,255,.6)); }
#mercy-prompt-title .or-word    { color: #fff; opacity: .9; margin: 0 4px; }
#mercy-prompt-title .trick-word { color: #ff5252; filter: drop-shadow(0 0 6px rgba(255,82,82,.6)); }

/* Message bigger */
#mercy-prompt-message {
  font-family: 'Lilita One', cursive;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 10px 0 18px 0;
}
#mercy-prompt-message span { color: #ffdd77; }

/* 10s shrinking bar */
#mercy-prompt-timer {
  position: relative;
  height: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
#mercy-timer-bar {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #38a1ff, #ffd54d 55%, #ff5252 100%);
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
  transition: width .1s linear;
}

/* Disable look for expired buttons */
#mercy-prompt-buttons .game-button.disabled {
  background: #666 !important;
  box-shadow: 0 4px 0 0 #444 !important;
  cursor: not-allowed;
  opacity: .8;
}


/* --- ultra-compact layout for small/short screens --- */
@media (max-width: 400px), (max-height: 700px) {
  #game-screen { padding: 8px 6px; }
  .card-area   { padding: 8px; border-radius: 12px; }
  .hand-label  { font-size: 14px; margin-bottom: 6px; }
  .cards-container { gap: 5px; min-height: 90px; }
}

/* LOCKED BUTTON STYLES */
.locked-btn {
    /* Dark background to show it is disabled */
    background-color: #3a3a3a !important;
    /* Remove shadow to make it look flat/inactive */
    box-shadow: none !important;
    /* CRITICAL FIX: Removed 'filter: grayscale(100%)' so the bubble stays Orange */
    /* Removed 'opacity: 0.7' so the bubble stays bright */
    position: relative;
    cursor: not-allowed;
    
    /* Dim the text inside the button explicitly, 
       but target only the text nodes if possible, 
       or we just accept bright text with dark background. */
    color: #aaaaaa !important; 
}

/* We need to make sure the tooltip text stays White, overriding the grey above */
.locked-btn #pvp-tooltip {
    color: #ffffff !important;
}

/* This adds a little Lock Icon 🔒 on top of the button */
.locked-btn::after {
    content: '🔒';
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 16px;
    filter: grayscale(100%); /* We can make just the lock grey */
    opacity: 0.5;
}

.lobby-bet-btn.locked-stake {
    background: #333 !important;
    box-shadow: none !important;
    opacity: 0.6;
    position: relative;
    /* CRITICAL CHANGE: We allow clicks so we can show the shake animation */
    pointer-events: auto !important; 
    cursor: not-allowed;
}

/* Base Stamp Style */
.lobby-bet-btn.locked-stake::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: #ff3b3b;
    font-family: 'Bangers', cursive;
    border: 2px solid #ff3b3b;
    padding: 4px 8px;
    z-index: 10;
    text-shadow: 2px 2px 0 #000;
    background: rgba(0,0,0,0.8);
    white-space: nowrap;
    text-align: center;
    
    /* Default font size */
    font-size: 20px; 
}

/* --- Custom Stamps per Level --- */
/* We use specific classes to change the text per button */

.locked-10::before {
    content: "NEED 5 WINS";
    font-size: 16px !important;
}

.locked-50::before {
    content: "NEED 10 WINS";
    font-size: 15px !important; /* Smaller to fit */
}

.locked-100::before {
    content: "NEED 20 WINS";
    font-size: 15px !important;
}

/* --- TUTORIAL BUBBLE STYLES (IMPROVED) --- */

#play-pvp-btn {
    position: relative; 
    overflow: visible !important; 
}

#pvp-tooltip {
    position: absolute;
    bottom: 125%; /* Moved up slightly */
    left: 50%;
    transform: translateX(-50%);
    
    /* VIBRANT ORANGE GRADIENT */
    background: linear-gradient(180deg, #ffbf00 0%, #ff9100 100%);
    color: #ffffff;
    
    font-family: 'Lilita One', cursive;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 20px; /* Pill shape */
    
    /* WHITE BORDER + SHADOW = POP EFFECT */
    border: 3px solid #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    
    white-space: nowrap;
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.2); /* Subtle text depth */
    
    animation: tooltip-bounce 1.2s infinite ease-in-out;
}

/* The pointer arrow */
.tooltip-arrow {
    position: absolute;
    bottom: -8px; /* Push it down to overlap border */
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    
    /* TRIANGLE SHAPE */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ff9100; /* Matches the bottom color of the gradient */
    
    /* Drop shadow filter to match the box */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}

@keyframes tooltip-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}

/* --- Add this to style.css --- */

/* Make the balance button interactive */
#token-balance-btn {
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
}

#token-balance-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

#token-balance-btn:active {
    transform: scale(0.95);
}

/* Ensure the tokenomics back button is positioned correctly */
#back-from-tokenomics-btn {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 10px;
    background-color: rgba(0,0,0,0.5);
    padding: 12px 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.3);
    width: 120px;
    justify-content: center;
    z-index: 5;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

/* ========================================= */
/* ==      TOKENOMICS VIEW FIXES          == */
/* ========================================= */

/* When the body has the class 'in-tokenomics', hide the side bars */
body.in-tokenomics #left-bar,
body.in-tokenomics #right-bar {
    display: none !important;
}

/* Remove padding so the page takes the full width */
body.in-tokenomics #main-content {
    padding: 0 !important;
}



/* ==================================== */
/* ==   TOKENOMICS STYLING (V2)      == */
/* ==================================== */

#tokenomics-screen {
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    z-index: 9000;
}

.token-header {
    position: relative; /* Essential for floating the X button */
    display: flex;
    justify-content: center; /* Forces content to center */
    align-items: center;
    padding: 15px 0;
    background-color: rgba(20, 20, 20, 0.95);
    border-bottom: 1px solid #333;
    width: 100%;
}

.token-header h2 {
    font-family: 'Bangers', cursive;
    color: #ffcc00;
    margin: 0;
    font-size: 26px;
    letter-spacing: 1px;
    text-align: center;
    width: 100%; /* Ensures the text container fills the center */
}

.close-x-btn { 
    position: absolute; /* FLOATS the button so it doesn't push text */
    right: 20px;        /* Pins it to the right edge */
    top: 50%;
    transform: translateY(-50%); /* Centers it vertically */
    font-size: 24px; 
    color: #777; 
    cursor: pointer;
    z-index: 10;
}

.token-scroll-area {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

/* Cards */
.token-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.glow-gold {
    border: 1px solid #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.15);
}
.highlight-card {
    border: 1px solid #00c6ff;
    background: rgba(0, 198, 255, 0.05);
}

/* Labels & Values */
.token-label {
    font-family: 'Lilita One', cursive;
    color: #777;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.token-big-value { font-family: 'Lilita One', cursive; font-size: 32px; color: white; }
.token-med-value { font-family: 'Lilita One', cursive; font-size: 24px; color: #2ecc71; }
.token-sub { color: #555; font-size: 12px; margin-top: -5px; }
.token-quote { color: #ffcc00; font-style: italic; margin-top: 5px; font-size: 14px; }

/* Share Footer */
.share-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding: 8px 0;
}
.share-row:last-child { border-bottom: none; }
.share-val { font-family: 'Lilita One', cursive; color: #fff; }

/* Season Cards */
.roadmap-container { margin: 25px 0; }
/* Center the "MINING ROADMAP" title */
.header-label { 
    text-align: center; /* Changed from left to center */
    color: #ffcc00;     /* Changed from white to Gold for better visibility */
    font-family: 'Bangers', cursive; /* Used the bold font */
    font-size: 22px;    /* Larger text */
    margin-bottom: 15px; 
    text-shadow: 0 2px 2px rgba(0,0,0,0.8);
    letter-spacing: 1px;
}

/* Make the "Remaining" text larger and clearer */
.season-remaining { 
    font-family: 'Roboto', sans-serif;
    font-size: 13px; /* Increased from 10px */
    color: #aaa; 
    text-align: right; 
    margin-top: 5px; 
    font-weight: bold;
}

.season-card {
    text-align: left;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.active-season { border: 1px solid #2ecc71; background: rgba(46, 204, 113, 0.08); }
.season-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.season-name { font-weight: bold; font-family: 'Roboto', sans-serif; font-size: 14px; }
.active-season .season-name { color: #2ecc71; }
.season-badge { background: #2ecc71; color: black; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 4px; }
.locked-season { opacity: 0.6; }
.locked-season .season-name { color: #f1c40f; } /* Yellow/Red logic */

.season-info div { font-size: 12px; color: #bbb; margin-bottom: 2px; }

/* Progress Bar */
.season-progress-container {
    width: 100%;
    height: 16px;
    background: #111;
    border-radius: 8px;
    margin-top: 8px;
    position: relative;
    border: 1px solid #333;
}
.season-progress-bar {
    height: 100%;
    background: repeating-linear-gradient(
      45deg,
      #2ecc71,
      #2ecc71 10px,
      #27ae60 10px,
      #27ae60 20px
    );
    border-radius: 6px;
}
.progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    font-size: 10px;
    line-height: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px black;
}


/* BIG BACK BUTTON */
.bottom-back-btn {
    background-color: #34495e;
    color: white;
    font-family: 'Lilita One', cursive;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 0 4px 0 0 #2c3e50;
    transition: all 0.1s;
}
.bottom-back-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #2c3e50;
}


/* ========================================= */
/* ==   TOKENOMICS SCREEN VISIBILITY FIX  == */
/* ========================================= */

#tokenomics-screen {
    /* Ensure it sits ON TOP of everything (Game, Menu, Lobby) */
    z-index: 9000 !important; 
    
    /* Solid Background so you can't see the menu behind it */
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    
    /* Full Screen Coverage */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure the Header sticks to the top */
.token-header {
    background-color: rgba(20, 20, 20, 0.95);
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    position: relative;
    width: 100%;
}

/* Ensure the content area scrolls if the phone is small */
.token-scroll-area {
    padding: 20px;
    overflow-y: auto;
    height: calc(100% - 70px); /* Full height minus header */
    box-sizing: border-box;
}

/* Hide the Sidebar buttons when Tokenomics is open */
body.in-tokenomics #left-bar,
body.in-tokenomics #right-bar {
    display: none !important;
}

body.in-tokenomics #main-content {
    padding: 0 !important;
}


/* ================================================= */
/* ==    GAME STYLE BUTTONS (FINAL TWEAKS)        == */
/* ================================================= */

/* --- SHARED BUTTON STYLES (Positioning Removed) --- */
.top-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* UPDATED SIZE: Smaller and cleaner */
    width: 45px; 
    height: 45px;
    
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 50;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pop Effect */
.top-nav-btn:hover { transform: translateY(-50%) scale(1.15); }
.top-nav-btn:active { transform: translateY(-50%) scale(0.9); }

.nav-img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* --- SPECIFIC POSITIONING --- */

/* PROFILE = LEFT */
#top-profile-btn {
    left: 15px;
}

/* HELP = RIGHT (OYSTER PEARL & FILLED) */
#top-help-btn {
    right: 15px;
    width: 38px !important;  /* Slightly smaller than the 45px profile picture */
    height: 38px !important;
    padding: 0; /* Removes the gap inside so the image fills the hole */
    
    /* The "Oyster Pearl" Purple-White Color */
    background: radial-gradient(circle at top left, #ffffff 0%, #eeddff 60%, #d8b8ff 100%);
    
    border: 2px solid #00c6ff; /* Light blue edge */
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 198, 255, 0.4);
    overflow: hidden; /* This clips the corners of your image so it stays a perfect circle */
}

/* Ensure the icon stretches to fill the whole circle */
#top-help-btn .nav-img {
    width: 100%; 
    height: 100%;
    object-fit: cover; /* Forces the image to fill the entire space */
    border-radius: 50%;
    filter: none; /* Removed shadow so it sits completely flush inside the circle */
}

/* --- Right Bar Stack --- */
#right-bar {
    position: absolute; right: 5px; top: 0;
    height: 100%; width: 85px; 
    z-index: 20;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
}

/* --- THE BUTTON CONTAINERS --- */
.game-side-btn {
    width: 65px; height: 65px;
    border-radius: 16px;
    border: 2px solid #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 5px 15px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy pop */
    position: relative;
    padding-top: 2px;
}

/* POP UP EFFECT ON HOVER */
.game-side-btn:hover {
    transform: scale(1.1); /* Grows 10% */
    z-index: 25; /* Pops on top */
}

.game-side-btn:active {
    transform: scale(0.95); /* Shrinks when pressed */
    box-shadow: 0 0 0 rgba(0,0,0,0.6), inset 0 2px 5px rgba(0,0,0,0.2);
}

/* Image Wrapper */
.btn-img-wrapper {
    width: 38px; height: 38px;
    display: flex; justify-content: center; align-items: center;
}
.btn-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}

.btn-icon { font-size: 24px; margin-bottom: 2px; }
.btn-label { 
    font-family: 'Lilita One', cursive; 
    font-size: 10px; 
    text-transform: uppercase; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    line-height: 1;
    margin-top: 3px;
}

/* --- 1. MISSION BUTTON (Default State - Calm) --- */
.gold-theme {
    background: linear-gradient(135deg, #ffd700, #f39c12);
    border-color: #ffeeb0;
    /* No animation by default */
}
.gold-theme .btn-label { color: #5c3c00; text-shadow: none; }

/* --- 2. ATTENTION MODE (Active when tasks are pending) --- */
.gold-theme.attention-mode {
    animation: urgent-bounce 2s infinite ease-in-out;
    border-color: #fff; /* Brighter border */
}

@keyframes urgent-bounce {
    0% { 
        transform: translateY(0) scale(1); 
        box-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 0 0 rgba(255, 215, 0, 0); 
    }
    50% { 
        transform: translateY(-6px) scale(1.05); /* Moves UP and Grows */
        box-shadow: 0 10px 0 rgba(0,0,0,0.4), 0 0 20px rgba(255, 215, 0, 1); /* STRONG GLOW */
    }
    100% { 
        transform: translateY(0) scale(1); 
        box-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 0 0 rgba(255, 215, 0, 0); 
    }
}

.blue-theme {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    border-color: #a0e6ff;
    color: white;
}

.gray-theme {
    background: linear-gradient(135deg, #7f8c8d, #34495e);
    border-color: #95a5a6;
    color: #bdc3c7;
    cursor: not-allowed;
    filter: grayscale(0.8);
}
/* Disable hover pop for locked/gray items */
.gray-theme:hover { transform: none; }

.soon-badge {
    position: absolute; bottom: -8px;
    background: #e74c3c; border: 1px solid white; color: white;
    font-size: 8px; font-weight: bold; padding: 2px 5px;
    border-radius: 4px; box-shadow: 0 2px 2px rgba(0,0,0,0.5);
    transform: rotate(-5deg);
}

/* HIDE IN GAME (Safety Check) */
body.in-game #right-bar, body.in-game #left-bar,
body.in-lobby #right-bar, body.in-lobby #left-bar {
    display: none !important;
}
/* ============================================== */
/* ==   FIX: HIDE SIDEBARS IN GAME (PRIORITY)  == */
/* ============================================== */

body.in-game #right-bar,
body.in-game #left-bar,
body.in-lobby #right-bar,
body.in-lobby #left-bar {
    display: none !important;
}


/* ================================================= */
/* ==      WHAT IS PVP? (GUIDE SCREEN STYLES)     == */
/* ================================================= */

/* Make Guide Overlay Highest Priority */
#guide-screen {
    z-index: 9500 !important; /* Above Game, Below Overlays */
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* Ensure Sidebars Vanish (The Bug Fix) */
body.in-guide #left-bar, 
body.in-guide #right-bar {
    display: none !important;
}
body.in-guide #main-content {
    padding: 0 !important;
}

/* --- Language Tabs --- */
/* --- LANGUAGE TABS (IMAGE ICON STYLE) --- */
#lang-bar {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between the circles */
    padding: 15px 0;
    margin-bottom: 5px;
}

.lang-tab {
    width: 45px;  /* Fixed size for circle */
    height: 45px; /* Fixed size for circle */
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid #444;
    cursor: pointer;
    overflow: hidden; /* Cuts the image to the circle shape */
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    background-color: #000;
}

.lang-tab:hover {
    transform: scale(1.1);
}

.lang-tab.active {
    border-color: #ffcc00; /* Gold border when selected */
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

/* This styles the image inside the button */
.flag-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures flag fills the circle without stretching */
    display: block;
}
/* Re-use content styling from Tokenomics, just adding specific spacing */
#guide-content-area h3 {
    font-family: 'Lilita One', cursive;
    color: #00c6ff;
    font-size: 18px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(0, 198, 255, 0.3);
    padding-bottom: 5px;
}

#guide-content-area p {
    font-family: 'Roboto', sans-serif;
    color: #ccc;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 0;
}

#guide-content-area li {
    font-family: 'Roboto', sans-serif;
    color: #ccc;
    font-size: 13px;
    text-align: left;
    margin-bottom: 5px;
}


/* ================================================= */
/* ==      GUIDE SCREEN - SCROLLABLE & STYLED     == */
/* ================================================= */

/* --- 1. THE SCROLLING FIX (CRITICAL) --- */
/* We force the guide to sit on top and ignore the main app layout */
#guide-screen {
    position: fixed !important;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 9500 !important;
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    
    /* KILL FLEXBOX: This is what was preventing scroll */
    display: block !important; 
    
    padding: 0 !important;
}

#guide-screen.hidden {
    display: none !important;
}

/* The wrapper handles the movement */
#guide-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: scroll !important; /* FORCE SCROLL */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
    padding-bottom: 50px;
}

/* Specific Header Styling inside Scroll Wrapper */
.token-header.guide-style-header {
    background: transparent;
    border: none;
    padding: 30px 0 10px 0;
    text-align: center;
}

/* --- 2. BIG TEXT DESIGN (VISUALS) --- */

/* Content Container Scope */
#guide-content-area {
    padding: 0 20px;
}

/* Big Blue Titles */
#guide-content-area .token-card h3 {
    font-family: 'Bangers', cursive; /* Using the bolder font */
    font-size: 28px;
    color: #00c6ff;
    margin: 20px 0 15px 0;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 1px;
}

/* Large Readable Paragraphs */
#guide-content-area .token-card p {
    font-family: 'Roboto', sans-serif;
    color: #ddd;
    font-size: 16px; /* BIGGER TEXT */
    line-height: 1.5;
    text-align: center;
}

/* --- The 2x2 Grid --- */
.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 10px;
}

/* Bold Cards without Icons */
.guide-step-card {
    background-color: #222;
    border-radius: 12px;
    padding: 20px 10px; /* Big padding */
    text-align: center;
    border: 1px solid #444;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Large Numbered Headers inside cards */
.guide-step-card h4 {
    font-family: 'Lilita One', cursive;
    font-size: 22px; /* VERY VISIBLE */
    margin: 0 0 10px 0;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

/* Descriptions inside cards */
.guide-step-card p {
    font-size: 13px !important; /* Smaller than main text, but still readable */
    line-height: 1.4 !important;
    color: #bbb !important;
    margin: 0 !important;
}

/* Borders */
.border-green { border-bottom: 4px solid #2ecc71; }
.border-gold  { border-bottom: 4px solid #f1c40f; }
.border-red   { border-bottom: 4px solid #e74c3c; }
.border-blue  { border-bottom: 4px solid #3498db; }

/* Card Values List - Cleaner */
.card-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    background: rgba(255,255,255,0.05);
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.c-desc .c-title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #eee;
}
.c-val {
    font-family: 'Lilita One', cursive;
    font-size: 20px;
    color: #ffcc00;
}


/* ==================================== */
/* ==      NEW MISSIONS UI V2        == */
/* ==================================== */

/* --- 1. REFERRAL HUB CARD --- */
.mission-hub-card {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); /* Gold Gradient */
    border-radius: 16px;
    padding: 20px;
    color: #1a1a1a; /* Dark text for contrast on gold */
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    border: 2px solid #ffed8a;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
}

/* Subtle shine effect */
.mission-hub-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(rgba(255,255,255,0.4), transparent 60%);
    opacity: 0.3;
    pointer-events: none;
}

.hub-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.hub-title { font-family: 'Bangers', cursive; font-size: 20px; letter-spacing: 1px; color: #422d00; }
.hub-badge { background: #e74c3c; color: white; font-size: 10px; font-weight: bold; padding: 3px 8px; border-radius: 8px; transform: rotate(5deg); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.hub-stats { display: flex; justify-content: space-around; align-items: center; margin-bottom: 15px; background: rgba(0,0,0,0.05); border-radius: 12px; padding: 10px; }
.stat-box { display: flex; flex-direction: column; align-items: center; width: 45%; }
.stat-label { font-size: 11px; text-transform: uppercase; color: #614606; font-weight: bold; }
.stat-val { font-family: 'Lilita One', cursive; font-size: 24px; color: #000; }
.vr-line { width: 1px; height: 30px; background: rgba(0,0,0,0.1); }

.hub-reward-info { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; margin-bottom: 15px; font-family: 'Roboto', sans-serif; font-weight: bold; font-size: 12px; color: #5a4208; }
.hub-coin-row { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 900; color: #000; }

.hub-action-btn {
    background-color: #111;
    color: #ffd700;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    font-family: 'Lilita One', cursive;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
    transition: transform 0.1s;
    font-size: 16px;
    display: flex; justify-content: center; align-items: center; gap: 8px;
    position: relative; z-index: 2;
}
.hub-action-btn:active { transform: translateY(3px); box-shadow: none; }

/* Update hub-reward-info to handle column layout */
.hub-reward-info {
    display: flex;
    flex-direction: column; /* Stack them */
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 12px;
}

.reward-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #4a3403;
    font-weight: bold;
    font-size: 13px;
}

/* THE NEW CATCHY CONDITION STYLE */
.hub-condition {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #b33939; /* Dark Red/Brown to look important but fit Gold */
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.4);
    padding: 4px 8px;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.hub-condition i {
    font-size: 12px;
}

/* --- 2. SOCIAL TASK GRID --- */
/* --- SECTION DIVIDER --- */
.mission-section-title {
    font-family: 'Bangers', cursive;
    color: #00c6ff; /* Cyan/Electric Blue to contrast with Gold */
    font-size: 24px;
    letter-spacing: 1.5px;
    text-align: center; /* CENTERED */
    margin: 30px auto 15px auto;
    text-shadow: 0 0 10px rgba(0, 198, 255, 0.6);
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Add lines on sides to make it look like a section break */
.mission-section-title::before,
.mission-section-title::after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, rgba(0, 198, 255, 0.5), transparent);
    margin: 0 15px;
}
.task-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columns */
    gap: 12px;
}

.task-tile {
    background: #222;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s;
    height: 140px; /* Fixed Height */
    position: relative;
}
.task-tile:hover { transform: translateY(-3px); }

/* Tile Colors */
.telegram-theme { border-bottom: 3px solid #0088cc; }
.telegram-theme .tile-icon { color: #0088cc; }

.twitter-theme { border-bottom: 3px solid #ffffff; }
.twitter-theme .tile-icon { color: #ffffff; }

.youtube-theme { border-bottom: 3px solid #ff0000; }
.youtube-theme .tile-icon { color: #ff0000; }

.instagram-theme { border-bottom: 3px solid #E1306C; }
.instagram-theme .tile-icon { color: #E1306C; }


.tile-icon { font-size: 32px; margin-bottom: 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.tile-info { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.tile-name { font-family: 'Lilita One', cursive; font-size: 12px; color: #ccc; }
.tile-reward { font-family: 'Roboto', sans-serif; font-weight: bold; color: #2ecc71; font-size: 13px; }

.tile-btn {
    width: 100%;
    padding: 6px 0;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    font-weight: bold;
    cursor: pointer;
    background: #333;
    color: white;
    border: 1px solid #444;
}

/* Override existing 'completed' styles for tiles specifically */
.task-tile .action-btn.completed {
    background-color: #27ae60 !important;
    color: white !important;
    border-color: #229954 !important;
    cursor: default;
    opacity: 0.8;
}

.task-tile .action-btn.ready {
    background-color: #f1c40f !important;
    color: #333 !important;
    border-color: #f39c12 !important;
    animation: pulse 1s infinite;
}
.task-tile .action-btn.checking {
    background-color: #e67e22 !important;
    color: white !important;
}


/* =========================================== */
/* ==      GOLD CARD REPAIR (CRITICAL)      == */
/* =========================================== */

.mission-hub-card {
    /* 1. RESET: Force clear any background images/messy coins */
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    background-image: linear-gradient(135deg, #FFD700 0%, #FDB931 100%) !important;
    position: relative;
    overflow: hidden; /* Cuts off anything sticking out */
    
    /* 2. LAYOUT: Stack items vertically cleanly */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between rows */
    padding: 20px 25px;
    border: 2px solid #fff5c2;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.15);
}

/* Hide any accidental images inside the card unless they are the specific icon */
.mission-hub-card img:not(.tiny-coin) {
    display: none !important;
}

.hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.hub-title {
    font-family: 'Bangers', cursive;
    font-size: 24px;
    letter-spacing: 1.5px;
    color: #4a3403; /* Dark Gold/Brown */
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.hub-badge {
    background: #ff4757;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.hub-stats {
    display: flex;
    background-color: rgba(255,255,255,0.25); /* Glass effect */
    border-radius: 12px;
    padding: 12px;
    justify-content: space-around;
    align-items: center;
}

.stat-box {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #654e0f;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.stat-val {
    font-family: 'Lilita One', cursive;
    font-size: 28px;
    color: #1a1a1a;
    line-height: 1;
}

.hub-reward-info {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #4a3403;
    font-weight: bold;
    font-size: 13px;
    background: rgba(0,0,0,0.05);
    padding: 8px;
    border-radius: 8px;
}

.tiny-coin { width: 20px; height: 20px; vertical-align: middle; }

.hub-action-btn {
    background-color: #1a1a1a;
    color: #ffda45; /* Yellow text */
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    font-family: 'Lilita One', cursive;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 5px 0 rgba(0,0,0,0.2);
    transition: transform 0.1s;
    margin-top: 5px;
}
.hub-action-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}


/* ================================================= */
/* ==   FIX: HIDE DUALS ON MISSION SCREEN (FINAL) == */
/* ================================================= */

/* 1. When we are 'in-earn' mode, force hide the sidebars */
body.in-earn #left-bar,
body.in-earn #right-bar {
    display: none !important;
}

/* 2. Remove padding so the background looks full */
body.in-earn #main-content {
    padding: 0 !important;
}

/* 3. Ensure the Earn Screen background is solid and covers the game */
#earn-screen {
    position: fixed; /* Force it to stay put */
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9600 !important; /* Above everything */
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    display: flex;
    flex-direction: column;
}


/* --- Updated Lobby Stake Button Colors --- */
.stake-100 { background: #27ae60; box-shadow: 0 8px 0 0 #229954; }  /* Green (Easy) */
.stake-200 { background: #2980b9; box-shadow: 0 8px 0 0 #2471a3; }  /* Blue (Medium) */
.stake-500 { background: #d35400; box-shadow: 0 8px 0 0 #ba4a00; }  /* Orange (Hard) */
.stake-1000{ background: #c0392b; box-shadow: 0 8px 0 0 #a93226; }  /* Red (Expert) */
/* --- NEW HIGH STAKES BUTTONS --- */

/* 2000 - THE WHITE/SILVER TIER */
.stake-2000 { 
    background: #ecf0f1; /* White/Light Grey */
    box-shadow: 0 8px 0 0 #bdc3c7; 
    border: 1px solid #fff;
}
/* Force text to be dark so it is readable on white */
.stake-2000 span { 
    color: #2c3e50 !important; 
    text-shadow: none !important; 
}

/* 5000 - THE BLACK/OBSIDIAN TIER */
.stake-5000 { 
    background: #111; /* Pitch Black */
    box-shadow: 0 8px 0 0 #000; 
    border: 2px solid #ffd700; /* Gold Border */
}
/* Force text to be Gold */
.stake-5000 span { 
    color: #ffd700 !important; 
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* Updated Stamp Content for the new Levels */
.locked-200::before {
    content: "NEED 2 WINS";
    font-size: 16px !important;
}

.locked-500::before {
    content: "NEED 5 WINS";
    font-size: 15px !important;
}

.locked-1000::before {
    content: "NEED 10 WINS";
    font-size: 15px !important;
}


#maintenance-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, #2c3e50 0%, #000 90%);
    z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    text-align: center; color: white;
}
.maintenance-content h1 {
    font-family: 'Bangers', cursive; color: #e74c3c; font-size: 40px; margin-bottom: 10px;
    animation: pulse-warning 2s infinite;
}
.maintenance-content h2 { font-family: 'Lilita One', cursive; color: #f1c40f; }
.maintenance-timer { 
    background: rgba(0,0,0,0.5); padding: 10px 20px; border: 2px solid #fff; 
    border-radius: 10px; margin: 20px auto; display: inline-block; 
}




/* =========================================== */
/* ==      VIBRANT TOKENOMICS (V3)          == */
/* =========================================== */

/* --- 1. GENERAL CARD STYLES --- */
.roadmap-card {
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.token-card {
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Header & Allocation */
.header-card {
    background: radial-gradient(circle at top left, #ffd700 0%, #b8860b 100%);
    border: 2px solid #fff;
    color: #000;
}
.header-card .token-label, .header-card .token-sub { color: #422d00 !important; font-weight: bold; }
.header-card .token-big-value { color: #000 !important; text-shadow: none; }

.allocation-card {
    background: linear-gradient(135deg, #001f3f, #003366);
    border: 1px solid #00c6ff;
}

/* --- 2. ROADMAP SEASONS --- */

/* --- UPDATED: CENTERED TEXT (Keep this) --- */
.progress-text-below {
    width: 100%;
    text-align: center !important;
    position: relative;
    display: block;
}

/* --- NEW: GLOW FROM BEHIND (Breathing) --- */
.roadmap-card.alive-glow {
    position: relative;
    border-radius: 16px;
    padding: 16px;
    
    /* Dark Green Background */
    background: linear-gradient(135deg, #1e3c2f, #050505);
    
    /* Solid Green Border */
    border: 1px solid #2ecc71;
    
    /* THE GLOW: Breathing Shadow from behind */
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
    animation: breathing-glow 3s ease-in-out infinite;
    z-index: 1;
}

/* Ensure no leftover spinning elements mess it up */
.roadmap-card.alive-glow::before,
.roadmap-card.alive-glow::after {
    display: none;
    content: none;
}

/* The Pulse Animation */
@keyframes breathing-glow {
    0% {
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.2); /* Low Glow */
        border-color: rgba(46, 204, 113, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(46, 204, 113, 0.5); /* High Glow (Bright) */
        border-color: #2ecc71;
    }
    100% {
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.2); /* Low Glow */
        border-color: rgba(46, 204, 113, 0.5);
    }
}

/* Card Top Section */
.card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-icon { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.icon-circle { 
    width: 40px; height: 40px; border-radius: 50%; display: flex; 
    align-items: center; justify-content: center; font-size: 18px; color: white;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
}

.card-titles { display: flex; flex-direction: column; flex-grow: 1; }
.card-h1 { font-family: 'Bangers', cursive; font-size: 20px; color: white; letter-spacing: 1px; line-height: 1; }
.card-h2 { font-family: 'Roboto', sans-serif; font-size: 11px; color: #ccc; margin-top: 3px; font-weight: bold; }

.status-badge { 
    font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 6px; 
}
.status-badge.active { background: #2ecc71; color: #000; animation: pulse-green 2s infinite; }

/* Stats Row */
.card-stats { 
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.3); border-radius: 10px; padding: 8px 15px;
    margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.05);
}
.stat { display: flex; flex-direction: column; align-items: center; }
.stat span { font-size: 9px; color: #888; font-weight: bold; letter-spacing: 1px; }
.stat strong { font-family: 'Lilita One', cursive; font-size: 16px; color: #fff; }
.vr { width: 1px; height: 20px; background: rgba(255,255,255,0.1); }

/* Progress Bar */
.progress-track { height: 12px; background: #000; border-radius: 6px; overflow: hidden; border: 1px solid #333; }
.progress-fill { height: 100%; }
.green-fill { background: repeating-linear-gradient(45deg, #27ae60, #27ae60 10px, #2ecc71 10px, #2ecc71 20px); }

/* --- 3. LOCKED CARDS (The Overlay Logic) --- */
.locked-card { position: relative; }

/* Themes for backgrounds */
.purple-theme { background: linear-gradient(135deg, #4a235a, #2c0b3b); border: 1px solid #9b59b6; }
.orange-theme { background: linear-gradient(135deg, #a04000, #5a2500); border: 1px solid #d35400; }
.red-theme    { background: linear-gradient(135deg, #641e16, #300a06); border: 1px solid #c0392b; }

/* The Overlay */
.lock-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Dark tint */
    backdrop-filter: blur(3px); /* Blur effect */
    z-index: 10;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: rgba(255, 255, 255, 0.9);
}
.lock-overlay i { font-size: 24px; margin-bottom: 5px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
.lock-overlay span { font-family: 'Bangers', cursive; font-size: 18px; letter-spacing: 1.5px; }

/* Blur the content behind the overlay */
.blur-target { opacity: 0.4; filter: blur(1px); }


/* --- 4. ECONOMICS SECTION --- */

/* Burn Card (Magma) */
.burn-card {
    background: linear-gradient(135deg, #800000 0%, #300000 100%);
    border: 2px solid #ff4500;
    display: flex; align-items: center; gap: 15px; text-align: left;
    overflow: hidden;
}
.burn-icon-area {
    font-size: 32px; color: #ff4500;
    animation: fire-pulse 2s infinite alternate;
}
.burn-info { display: flex; flex-direction: column; }

/* Reserve Card (Ocean) */
.reserve-card {
    background: linear-gradient(135deg, #004d40, #00251a);
    border: 1px solid #1de9b6;
    text-align: left;
}
.token-desc { font-size: 12px; color: #b2dfdb; margin-top: 5px; line-height: 1.4; }

/* Animations */
@keyframes fire-pulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px #ff4500); }
    100% { transform: scale(1.1); filter: drop-shadow(0 0 15px #ff8c00); }
}

/* =========================================== */
/* ==      FINAL V4 TOKENOMICS STYLES       == */
/* =========================================== */

/* --- FROSTED GLASS CARDS (Future Seasons) --- */
.frosted-card {
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
}

/* Specific Glass Tints */
.purple-glass { background: linear-gradient(135deg, rgba(74, 35, 90, 0.4), rgba(44, 11, 59, 0.6)); border-color: rgba(155, 89, 182, 0.3); }
.orange-glass { background: linear-gradient(135deg, rgba(160, 64, 0, 0.4), rgba(90, 37, 0, 0.6)); border-color: rgba(211, 84, 0, 0.3); }
.red-glass    { background: linear-gradient(135deg, rgba(100, 30, 22, 0.4), rgba(48, 10, 6, 0.6)); border-color: rgba(192, 57, 43, 0.3); }

/* Text inside frosted cards */
.glass-desc {
    font-size: 11px; color: rgba(255,255,255,0.7);
    margin: 5px 0 10px 0; font-style: italic;
    padding-left: 5px; border-left: 2px solid rgba(255,255,255,0.2);
}

.faded-stats {
    background: rgba(0,0,0,0.2) !important;
    border-color: rgba(255,255,255,0.05) !important;
}
.faded-stats strong { color: rgba(255,255,255,0.8) !important; }

/* Status Badges */
.status-badge.locked {
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
    color: #ccc;
}


/* --- MAGMA CARD (Burn) --- */
.magma-card {
    background: radial-gradient(circle at center, #660000 0%, #1a0000 100%);
    border: 2px solid #ff4500;
    display: flex; align-items: center; gap: 20px;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.2);
    animation: breathe-red 4s infinite;
}
.magma-icon {
    font-size: 36px; color: #ff4500;
    filter: drop-shadow(0 0 8px #ff4500);
}
.magma-content { text-align: left; }

@keyframes breathe-red {
    0% { border-color: #800000; box-shadow: 0 0 5px rgba(255,0,0,0.1); }
    50% { border-color: #ff4500; box-shadow: 0 0 20px rgba(255,69,0,0.4); }
    100% { border-color: #800000; box-shadow: 0 0 5px rgba(255,0,0,0.1); }
}


/* --- VAULT CARD (Reserve) --- */
.vault-card {
    background: linear-gradient(160deg, #00251a 0%, #00100a 100%);
    border: 1px solid #1de9b6;
    padding: 15px; border-radius: 16px; margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.vault-value {
    font-family: 'Lilita One', cursive; font-size: 26px; color: #1de9b6;
    text-align: right; margin-top: 5px;
    text-shadow: 0 0 10px rgba(29, 233, 182, 0.4);
}


/* --- PLAYER ID CARD (Your Share) --- */
.player-id-card {
    background: linear-gradient(135deg, #2c3e50, #000);
    border-radius: 12px;
    border: 1px solid #7f8c8d;
    padding: 0; overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    margin-bottom: 20px;
}

.id-header {
    background: rgba(255,255,255,0.1);
    padding: 10px 15px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.id-logo { height: 25px; width: auto; }
.id-title { font-family: 'Roboto', sans-serif; font-size: 10px; letter-spacing: 2px; color: #aaa; font-weight: bold; }

.id-body { padding: 15px; }

.id-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.id-label { font-size: 10px; color: #7f8c8d; font-weight: bold; letter-spacing: 1px; }
.id-val.gold { font-family: 'Lilita One', cursive; font-size: 24px; color: #f1c40f; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

.id-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 10px 0; }

.id-mini-row { display: flex; justify-content: space-between; }
.mini-stat { display: flex; flex-direction: column; }
.mini-stat span { font-size: 9px; color: #7f8c8d; font-weight: bold; }
.mini-stat strong { font-family: 'Roboto', sans-serif; font-size: 14px; color: #ecf0f1; }

/* ================================================= */
/* ==      FIX: MISSING EARN SCREEN STYLE         == */
/* ================================================= */

#earn-screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9500 !important; /* Above the game, below alerts */
    background: radial-gradient(circle at top, #111 0%, #050505 100%);
    display: flex;
    flex-direction: column;
}

/* This ensures the scroll area takes up the remaining space */
#earn-screen .token-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 40px;
}


/* ================================================= */
/* ==   SEASON END / HALVING OVERLAY (PRO V2)     == */
/* ================================================= */

.maintenance-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000;
    background-color: #050505; /* Deepest black */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

/* --- Background FX --- */
.bg-glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 69, 58, 0.15) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: glow-pulse 4s infinite ease-in-out;
}

.bg-scanlines {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
    background-size: 100% 4px;
    z-index: 2;
    pointer-events: none;
}

/* --- The Main Card --- */
.halving-card {
    position: relative;
    z-index: 10;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px); /* Heavy Frosted Glass */
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 40px 30px;
    width: 85%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05);
}

/* Badge - Upgraded to Gold Status */
.season-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    
    /* Vibrant Gold Gradient */
    background: linear-gradient(135deg, #FFD700 0%, #ff8c00 100%);
    
    /* Dark text for maximum readability on Gold */
    color: #2c0b0b; 
    
    /* Big, Bold Font */
    font-family: 'Bangers', cursive;
    font-size: 24px; /* Much bigger */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    
    /* Sizing & Spacing */
    padding: 10px 30px;
    border-radius: 50px;
    margin-bottom: 35px;
    
    /* Premium Look Borders & Shadows */
    border: 3px solid #fff;
    box-shadow: 0 0 25px rgba(255, 140, 0, 0.6), inset 0 2px 5px rgba(255,255,255,0.5);
    
    /* Animation */
    animation: badge-pulse 2s infinite ease-in-out;
}

.season-badge i {
    font-size: 22px; /* Bigger Icon */
}

/* Pulse Animation */
@keyframes badge-pulse {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 140, 0, 0.5); }
}

/* --- Locked Hero Animation --- */
.locked-hero {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 25px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coin-wrapper {
    position: relative;
    width: 80px; height: 80px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, #333, #000);
    border: 2px solid #444;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.hero-coin {
    width: 100%; height: 100%;
    filter: grayscale(100%) brightness(0.6); /* Greyed out coin */
    opacity: 0.8;
}

.lock-overlay-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #ff4757; /* Danger Red */
    background: #1a1a1a;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    border: 2px solid #ff4757;
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.6);
    z-index: 10;
    animation: lock-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ripples behind the coin */
.ripple-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 71, 87, 0.3);
    animation: ripple-out 2s infinite;
}
.delay-1 { animation-delay: 0.5s; }

/* Text */
.halving-title {
    font-family: 'Bangers', cursive;
    font-size: 32px;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    letter-spacing: 1px;
    background: linear-gradient(to bottom, #fff, #999);
    background-clip: text; /* Standard property added for safety */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
}

.halving-sub {
    font-size: 14px;
    color: #777;
    margin: 5px 0 25px 0;
}

/* Progress Bar Section */
.supply-stat-box {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 25px;
}

.stat-row {
    display: flex; justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
}
.stat-100 { color: #2ecc71; text-shadow: 0 0 8px rgba(46, 204, 113, 0.4); }

.stat-track {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}
.stat-fill {
    width: 100%;
    height: 100%;
    background: #2ecc71; /* Green Complete */
    box-shadow: 0 0 10px #2ecc71;
}

/* Footer */
.info-footer p {
    font-size: 13px;
    color: #aaa;
    line-height: 1.5;
    margin-bottom: 20px;
}

.season-2-tag {
    background: linear-gradient(90deg, #ff8c00, #ff0080);
    color: white;
    font-family: 'Lilita One', cursive;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(255, 0, 128, 0.4);
    animation: bounce-gentle 2s infinite;
}

/* --- ANIMATIONS --- */
@keyframes glow-pulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes ripple-out {
    0% { width: 80px; height: 80px; opacity: 0.8; border-width: 2px; }
    100% { width: 160px; height: 160px; opacity: 0; border-width: 0px; }
}

@keyframes lock-pop {
    0% { transform: translate(-50%, -50%) scale(0); }
    80% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* --- HIDE APP BEHIND --- */
#maintenance-overlay:not(.hidden) ~ #app-container {
    filter: blur(5px) grayscale(80%);
    pointer-events: none;
    transform: scale(0.98);
    transition: all 0.5s ease;
}

/* ================================================= */
/* ==   TOKENOMICS CARDS (CLEANED & STYLED)       == */
/* ================================================= */

/* --- TREASURY BUNDLE CARD (Purple/Premium) --- */
.treasury-card {
    background: linear-gradient(135deg, #2e1a47 0%, #150921 100%);
    border: 1px solid #9b59b6;
    box-shadow: 0 5px 20px rgba(155, 89, 182, 0.2);
    position: relative;
    z-index: 10; /* Middle layer */
}

.treasury-card .icon-circle {
    background: rgba(155, 89, 182, 0.1);
    border-color: #9b59b6;
    color: #e0b0ff;
}

.treasury-desc {
    font-size: 13px; 
    color: #e0e0e0;
    margin: 5px 0 10px 0;
    font-style: italic;
    opacity: 0.9;
}

/* --- THE BURN BOX (Inside Treasury) --- */
.burn-guarantee-box {
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 69, 58, 0.4);
}

.burn-guarantee-box i {
    color: #ff4757;
    font-size: 16px;
    animation: flicker-fire 2s infinite alternate;
}

.burn-guarantee-box span {
    font-size: 11px;
    color: #ffa5a5;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes flicker-fire {
    0% { opacity: 1; text-shadow: 0 0 5px #ff4757; }
    100% { opacity: 0.7; text-shadow: 0 0 2px #ff4757; }
}


/* --- FUTURE SEASONS (Blurry, Pushed Down) --- */
/* This style makes them look "behind" the active seasons */

.future-season {
    opacity: 0.6; /* Dimmed */
    transform: scale(0.96); /* Slightly smaller (Visual Depth) */
    filter: blur(1px); /* The Blur Effect */
    margin-top: -5px; /* Pull them closer to look stacked */
    pointer-events: none; /* Make them unclickable */
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Specific Tints */
.orange-blur {
    background: linear-gradient(135deg, #583300, #2b1600);
}

.red-blur {
    background: linear-gradient(135deg, #420f0f, #1f0404);
}

/* Override Icon Circles for Blur Cards */
.future-season .icon-circle {
    background: transparent;
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.5);
}

.future-season .card-h1 {
    color: rgba(255,255,255,0.7);
}

/* Z-Index Layering (Depth) */
.active-mining { z-index: 20; }  /* Top */
.treasury-card { z-index: 15; }  /* Middle */
.future-season.orange-blur { z-index: 10; } /* Bottom */
.future-season.red-blur    { z-index: 5; margin-top: -10px; transform: scale(0.92); filter: blur(2px); } /* Deep Bottom */


/* ================================================= */
/* ==      ELITE TREASURY CARD (HOLOGRAPHIC)      == */
/* ================================================= */

.elite-treasury-card {
    position: relative;
    /* Deep Void Purple Gradient */
    background: linear-gradient(160deg, #180529 0%, #0d021f 60%, #1f0836 100%);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 15px;
    border: 1px solid #6c23cf; /* Bright purple border */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5), /* Deep shadow */
        inset 0 0 20px rgba(138, 43, 226, 0.1); /* Inner glow */
    overflow: hidden;
    z-index: 20;
    transition: transform 0.2s;
}

/* --- THE HOLOGRAPHIC SHEEN ANIMATION --- */
.holographic-sheen {
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewX(-20deg);
    animation: sheen-slide 6s infinite ease-in-out;
    pointer-events: none;
}
@keyframes sheen-slide {
    0%, 70% { left: -150%; } /* Pauses for most of the time */
    100% { left: 150%; }     /* Slides across quickly */
}

/* --- 3D ICON STYLING --- */
.treasury-img-wrapper {
    width: 50px; height: 50px;
    margin-right: 12px;
    position: relative;
    /* Subtle float animation */
    animation: float-icon 4s ease-in-out infinite;
}

.treasury-3d-icon {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(186, 85, 211, 0.6));
}

.fallback-icon {
    width: 100%; height: 100%;
    display: none; /* Hidden by default */
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6c23cf, #3b107a);
    border-radius: 12px;
    font-size: 20px; color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

@keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- TYPOGRAPHY --- */
.elite-h1 {
    font-family: 'Bangers', cursive;
    font-size: 22px;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.8);
    display: block;
    line-height: 1;
}

.elite-allocation {
    display: flex; gap: 6px; align-items: baseline;
    margin-top: 4px;
}
.elite-allocation span {
    font-family: 'Roboto', sans-serif;
    font-size: 10px; color: #b19cd9;
    font-weight: bold; letter-spacing: 1px;
}
.elite-allocation strong {
    font-family: 'Lilita One', cursive;
    font-size: 16px; color: #e0b0ff; /* Lavender */
}

.elite-desc {
    font-size: 13px; color: #ccc;
    margin: 12px 0 15px 0;
    line-height: 1.4;
    font-weight: 500;
}

/* --- PULSING BADGE --- */
.pulse-purple {
    background: #4b0082;
    border: 1px solid #9370db;
    color: #fff;
    box-shadow: 0 0 5px #4b0082;
    animation: badge-pulse-purple 2s infinite;
}
@keyframes badge-pulse-purple {
    0% { box-shadow: 0 0 0 rgba(147, 112, 219, 0.4); }
    70% { box-shadow: 0 0 10px rgba(147, 112, 219, 0); }
    100% { box-shadow: 0 0 0 rgba(147, 112, 219, 0); }
}

/* --- DIGITAL BURN STRIP (The High Tech Part) --- */
.digital-burn-strip {
    display: flex; align-items: stretch;
    background: #150005; /* Very dark red/black */
    border: 1px solid #5a0b16;
    border-radius: 8px;
    overflow: hidden;
}

.strip-icon {
    width: 40px;
    background: #5a0b16;
    display: flex; align-items: center; justify-content: center;
    color: #ff4757;
    font-size: 16px;
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.2);
}

.strip-text {
    flex-grow: 1;
    padding: 8px 12px;
    display: flex; flex-direction: column; justify-content: center;
}

.strip-label {
    font-size: 9px; color: #888;
    letter-spacing: 1px; font-weight: bold;
    margin-bottom: 2px;
}

.strip-val {
    font-family: 'Roboto', sans-serif;
    font-size: 12px; 
    color: #ff6b6b; /* Neon Red */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255, 107, 107, 0.4);
}

/* ================================================= */
/* ==      FINAL BURN PROTOCOL STYLES (V5)        == */
/* ================================================= */

/* --- VERTICAL LAYOUT OVERRIDE --- */
.magma-card.vertical-burn {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;    /* Centers them horizontally */
    text-align: center;
    padding: 20px 15px;
    gap: 0; /* We handle spacing with margins */
}

/* Header Row */
.burn-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

/* Icon Animation */
.pulse-fire {
    font-size: 24px;
    color: #ff4500;
    filter: drop-shadow(0 0 5px #ff4500);
    animation: fire-pulse-vertical 2s infinite alternate;
}

@keyframes fire-pulse-vertical {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px #ff4500); }
    100% { transform: scale(1.2); filter: drop-shadow(0 0 15px #ff8c00); }
}

/* Big Number Sizing */
.vertical-burn .token-big-value {
    font-size: clamp(32px, 8vw, 42px); /* Scales down on small phones, max 42px */
    width: 100%;
    overflow-wrap: break-word; /* Prevents overflow if number is massive */
    line-height: 1.1;
}

/* --- THE 5% RULE BOX --- */
.burn-rule-box {
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
}

.rule-title {
    display: block;
    font-family: 'Lilita One', cursive;
    color: #ff4757;
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rule-desc {
    font-family: 'Roboto', sans-serif;
    color: #ddd;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.rule-desc strong {
    color: #fff;
    font-weight: bold;
}

/* --- NEW REFERRAL CARD LAYOUT --- */

/* The Reward Box (Clean, like the Blue Box in your screenshot) */
.hub-reward-box {
    background: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2);
    margin-bottom: 5px; /* Tiny gap before the subtitle */
}

.reward-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    color: #5a4208; /* Dark Gold/Brown */
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* The Subtitle (Like 'The Game Belongs to the Players') */
.hub-condition-subtitle {
    text-align: center;
    font-family: 'Roboto', sans-serif; /* Clean font */
    font-size: 13px;
    font-weight: bold;
    font-style: italic; /* The Key Look */
    color: #8B0000;     /* Deep Red to look like a warning/notice but stylish */
    margin-bottom: 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --- LEADERBOARD TIERS (VISUAL OVERHAUL) --- */

/* 1. Base Row Tweaks */
.lb-row {
    position: relative; /* Needed for badges */
    padding: 18px 15px; /* Slightly taller for better touch */
    border-radius: 12px;
    margin-bottom: 10px;
    background: #1f1f1f;
    border: 1px solid #333;
}

/* 2. CHAMPION (Rank 1) - Gold, Glowing, Pulsing */
.lb-row.gold-tier {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    color: #3e2700 !important;
    transform: scale(1.02); /* Pops out slightly */
    z-index: 10;
    margin-bottom: 15px; /* Extra space below champion */
    animation: gold-pulse 2s infinite ease-in-out;
}
/* Force text colors for Gold Card contrast */
.lb-row.gold-tier .lb-name { color: #3e2700 !important; font-size: 18px; text-shadow: none; }
.lb-row.gold-tier .lb-rank { color: #3e2700 !important; font-size: 24px; text-shadow: none; }
.lb-row.gold-tier .lb-score { 
    background: rgba(255,255,255,0.4); 
    color: #000 !important; 
    border: 1px solid rgba(0,0,0,0.1); 
}

@keyframes gold-pulse {
    0% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); }
    100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
}

/* 3. RUNNER UPS (Rank 2-3) - Silver/Platinum */
.lb-row.silver-tier {
    background: linear-gradient(135deg, #e0e0e0 0%, #bdc3c7 100%);
    border: 1px solid #fff;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}
.lb-row.silver-tier .lb-name, 
.lb-row.silver-tier .lb-rank { color: #2c3e50 !important; text-shadow: none; }
.lb-row.silver-tier .lb-score { background: rgba(255,255,255,0.5); color: #000 !important; }

/* 4. ELITES (Rank 4-10) - Bronze/Dark Orange */
.lb-row.bronze-tier {
    border-left: 4px solid #cd7f32; /* Subtle marker */
    background: #2a201c;
}

/* 5. THE PRIZE BADGE (Compact Tag inside the row) */
.prize-tag {
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
    font-family: 'Roboto', sans-serif;
}

/* Badge Colors */
.prize-gold { background: #ff4757; color: white; border: 1px solid white; }
.prize-silver { background: #3498db; color: white; border: 1px solid white; }
.prize-bronze { background: #e67e22; color: white; border: 1px solid #333; }
.prize-basic { background: #333; color: #aaa; border: 1px solid #555; }


/* ========================================= */
/* ==   TIERED REWARD POPUP (FINAL)       == */
/* ========================================= */

/* 1. Base Overlay (Dark & Blurry) */
.vfx-reward-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.vfx-reward-overlay:not(.hidden) { opacity: 1; }

/* 2. The "Loot Card" Container */
.vfx-reward-overlay #vfx-content {
    width: 85%;
    max-width: 320px;
    padding: 40px 20px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    /* Default Dark Base */
    background: linear-gradient(160deg, #1a1a1a, #000);
    border: 2px solid #333;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    
    animation: card-pop-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3. Typography */
.vfx-reward-overlay #vfx-title {
    font-family: 'Bangers', cursive;
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
}

.vfx-reward-overlay #vfx-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #ccc;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.rank-highlight { color: #fff; font-size: 1.2em; }

/* 4. The Reward Pill */
.vfx-reward-overlay #vfx-reward {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    padding: 10px 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
#vfx-reward-amount {
    font-family: 'Lilita One', cursive;
    font-size: 28px;
    color: #fff;
}

/* 5. The Button */
.vfx-reward-overlay #vfx-close-btn {
    width: 100%;
    padding: 15px 0;
    border-radius: 12px;
    font-family: 'Lilita One', cursive;
    font-size: 18px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    color: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}
.vfx-reward-overlay #vfx-close-btn:active { transform: scale(0.98); }


/* --- TIER 1: LEGENDARY (GOLD - 100k) --- */
.tier-legendary #vfx-content {
    border-color: #ffd700;
    background: radial-gradient(circle at top, #2c2000, #000);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
}
.tier-legendary #vfx-title {
    background: linear-gradient(to bottom, #fff, #ffd700, #b8860b);
    background-clip: text; /* Standard */
    -webkit-background-clip: text; /* Vendor */
    color: transparent;
}
.tier-legendary .rank-highlight { color: #ffd700; }
.tier-legendary #vfx-close-btn {
    background: linear-gradient(to bottom, #ffd700, #f39c12);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* --- TIER 2: EPIC (PLATINUM - 50k) --- */
.tier-epic #vfx-content {
    border-color: #e5e4e2;
    background: radial-gradient(circle at top, #2c3e50, #000);
    box-shadow: 0 0 40px rgba(229, 228, 226, 0.2);
}
.tier-epic #vfx-title {
    background: linear-gradient(to bottom, #fff, #e5e4e2, #7f8c8d);
    background-clip: text; /* Standard */
    -webkit-background-clip: text; /* Vendor */
    color: transparent;
}
.tier-epic .rank-highlight { color: #e5e4e2; }
.tier-epic #vfx-close-btn {
    background: linear-gradient(to bottom, #ffffff, #bdc3c7);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* --- TIER 3: RARE (BRONZE - 20k) --- */
.tier-rare #vfx-content {
    border-color: #cd7f32;
    background: radial-gradient(circle at top, #3e2723, #000);
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.2);
}
.tier-rare #vfx-title {
    background: linear-gradient(to bottom, #fff, #cd7f32, #8d6e63);
    background-clip: text; /* Standard */
    -webkit-background-clip: text; /* Vendor */
    color: transparent;
}
.tier-rare .rank-highlight { color: #cd7f32; }
.tier-rare #vfx-close-btn {
    background: linear-gradient(to bottom, #ffcc80, #cd7f32);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.3);
}

/* --- TIER 4: COMMON (IRON/BLUE - 5k) --- */
.tier-common #vfx-content {
    border-color: #4a90e2;
    background: radial-gradient(circle at top, #0d1b2a, #000);
    box-shadow: 0 0 30px rgba(74, 144, 226, 0.2);
}
.tier-common #vfx-title {
    background: linear-gradient(to bottom, #fff, #4a90e2, #0056b3);
    background-clip: text; /* Standard */
    -webkit-background-clip: text; /* Vendor */
    color: transparent;
}
.tier-common .rank-highlight { color: #4a90e2; }
.tier-common #vfx-close-btn {
    background: linear-gradient(to bottom, #63b8ff, #4a90e2);
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
}

@keyframes card-pop-up {
    0% { transform: scale(0.5) translateY(50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}



/* ======================================================= */
/* ==      HALL OF FAME LEADERBOARD (FINAL COMBINED)    == */
/* ======================================================= */

/* 1. SCREEN SETUP */
#leaderboard-screen {
    background: radial-gradient(circle at top center, #150020 0%, #000000 90%) !important;
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 9000;
    
    /* Layout */
    display: flex; 
    flex-direction: column;
}

/* Ensure the main menu works by hiding this when needed */
#leaderboard-screen.hidden { 
    display: none !important; 
}

/* 2. SCROLLABLE AREA (The List) */
#leaderboard-screen .token-scroll-area {
    flex-grow: 1;
    overflow-y: auto; /* Enable scrolling */
    width: 100%;
    box-sizing: border-box;
    padding: 20px 15px 0 15px; /* Top and Side Padding */
    
    /* CRITICAL: This Huge bottom padding ensures the last player (Rank 50)
       scrolls up ABOVE the fixed footer so they aren't hidden behind it. */
    padding-bottom: 200px; 
}

/* --- 3. PODIUM (OLYMPIC STYLE) --- */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align feet to bottom */
    margin-bottom: 35px;
    gap: 8px;
    height: 260px; /* Fixed height for lifting effect */
    padding-top: 20px;
}

.podium-card {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    position: relative; width: 30%;
    border-radius: 16px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    padding: 10px 4px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rank-img {
    width: 90%; height: auto; object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
    animation: float-cup 4s ease-in-out infinite; 
}
@keyframes float-cup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* --- CARD TIERS (HEIGHTS & GLOWS) --- */

/* RANK 2 (Silver) */
.card-silver {
    height: 170px; /* Medium */
    border: 2px solid #c0c0c0;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.2);
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.1), rgba(0,0,0,0.9));
    z-index: 5; order: 1;
}
.card-silver .p-score { color: #e0e0e0; }
.card-silver .p-badge { background: #c0c0c0; color: #000; }

/* RANK 1 (Gold) - LIFTED UP */
.card-gold {
    height: 200px; /* Tallest */
    border: 2px solid #ffd700;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.2);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.15), rgba(0,0,0,0.95));
    z-index: 10; order: 2;
    
    /* THE OLYMPIC LIFT */
    transform: translateY(-25px) scale(1.1); 
}
.card-gold .p-score { color: #ffd700; font-size: 15px; }
.card-gold .p-badge { background: #ffd700; color: #000; font-size: 13px; padding: 3px 10px; }

/* RANK 3 (Bronze) */
.card-bronze {
    height: 150px; /* Shortest */
    border: 2px solid #cd7f32;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.1), rgba(0,0,0,0.9));
    z-index: 5; order: 3;
}
.card-bronze .p-score { color: #cd7f32; }
.card-bronze .p-badge { background: #cd7f32; color: #000; }

/* TEXT INSIDE CARDS */
.p-name { 
    font-family: 'Roboto', sans-serif; font-weight: bold; font-size: 11px; 
    color: white; margin-bottom: 2px; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-score { font-family: 'Lilita One', cursive; font-size: 13px; margin-bottom: auto; }
.p-badge {
    font-family: 'Bangers', cursive; font-size: 11px; 
    padding: 2px 6px; border-radius: 6px; letter-spacing: 1px;
    margin-top: 5px; box-shadow: 0 2px 4px #000;
}

/* --- 4. THE LIST --- */
.glass-row {
    display: flex; align-items: center;
    border-radius: 12px; padding: 12px 15px; margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glow for Top 10 */
.row-blue-glow { border: 1px solid #00c6ff; box-shadow: 0 0 10px rgba(0, 198, 255, 0.2); background: rgba(0, 198, 255, 0.05); }
.row-blue-glow .gr-rank { color: #00c6ff; }
.row-normal-glow { border: 1px solid rgba(255,255,255,0.1); }

.gr-rank { font-family: 'Bangers', cursive; font-size: 18px; color: #666; width: 30px; text-align: center; }
.gr-name { flex-grow: 1; font-family: 'Roboto', sans-serif; font-weight: bold; font-size: 14px; color: #ddd; padding-left: 10px; }
.gr-score { font-family: 'Lilita One', cursive; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 5px; }

/* DOTS */
.dots-separator {
    text-align: center; color: #555; font-size: 24px; margin-top: 10px; letter-spacing: 5px; opacity: 0.5;
}

/* --- 5. FIXED BOTTOM DASHBOARD (My Rank + Button) --- */
#lb-fixed-footer {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%;
    z-index: 9500;
    
    display: flex; 
    flex-direction: column;
    padding: 0 15px 20px 15px; /* Padding for sides and bottom safe area */
    box-sizing: border-box;
    
    /* Gradient fade behind the footer so the scrolling list disappears smoothly behind it */
    background: linear-gradient(to top, #000000 90%, transparent 100%);
    
    /* Allows clicks to pass through the transparent gradient part at the very top */
    pointer-events: none; 
}

/* Wrapper to re-enable clicks on the buttons */
.footer-content-wrapper {
    pointer-events: auto;
    display: flex; flex-direction: column; gap: 10px;
}

/* MY RANK ROW (Glassy & Floating) */
.my-rank-row {
    display: flex; align-items: center; justify-content: space-between;
    
    /* GLASS EFFECT */
    background: rgba(0, 198, 255, 0.15);
    backdrop-filter: blur(12px); /* THIS BLURS THE LIST SCROLLING BEHIND IT */
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(0, 198, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.2);
    
    border-radius: 12px;
    padding: 12px 20px;
    height: 60px;
    box-sizing: border-box;
}

.my-rank-left h4 { margin: 0; font-size: 10px; color: #a2d9ff; letter-spacing: 1px; text-transform: uppercase; }
.my-rank-left h2 { margin: 0; font-family: 'Bangers', cursive; font-size: 26px; color: white; line-height: 1; }
.my-rank-right { font-family: 'Lilita One', cursive; font-size: 20px; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pts-label { font-size: 12px; color: #a2d9ff; margin-left: 2px; }

/* BACK BUTTON (Solid & Below Rank) */
.lb-back-btn {
    background-color: #34495e;
    color: white;
    font-family: 'Lilita One', cursive;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    font-size: 18px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 0 0 #2c3e50;
    width: 100%;
}
.lb-back-btn:active { transform: translateY(4px); box-shadow: none; }

/* ======================================================= */
/* ==      4TH ENERGY SLOT & LOCK SYSTEM                == */
/* ======================================================= */

/* 1. RESIZE ICONS: Make them slightly smaller to fit 4 in a row */
/* This overrides your old 60px setting */
.duel-icon-wrapper {
    width: 50px !important;  /* Reduced from 60px */
    height: 50px !important; /* Reduced from 60px */
    margin-bottom: 5px;      /* A little space between them */
}

.duel-icon { 
    width: 50px !important; 
    height: 50px !important; 
}

/* 2. THE PADLOCK OVERLAY */
.lock-overlay-icon {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* Dark semi-transparent circle */
    background: rgba(0, 0, 0, 0.7); 
    border-radius: 50%;
    border: 2px solid #555;
    
    /* Centering the lock icon */
    display: flex; 
    justify-content: center; 
    align-items: center;
    
    color: #ccc; 
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* 3. CLICK EFFECT (Red Flash) */
.duel-icon-wrapper:active .lock-overlay-icon {
    transform: scale(0.95);
    border-color: #ff4757;
    color: #ff4757;
}

/* 4. HIDE LOCK WHEN UNLOCKED */
/* JavaScript adds this class when they have enough friends */
.lock-overlay-icon.unlocked {
    display: none !important;
}

/* 5. THE TOAST POPUP ("Invite 2 Friends") */
#energy-lock-toast {
    position: fixed;
    top: 20%; 
    left: 85px; /* Appears to the right of the bar */
    
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #ffcc00;
    color: #fff;
    
    padding: 8px 12px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    pointer-events: none;
    white-space: nowrap;
    
    /* Animation */
    animation: fade-in-toast 0.2s ease-out;
}

#energy-lock-toast strong {
    color: #ffcc00;
}

#energy-lock-toast.hidden {
    display: none !important;
}

@keyframes fade-in-toast {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}


/* --- 4TH SLOT LOCKED STYLES --- */

/* The Overlay for the Locked Slot */
.bonus-lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Gray Background */
    background: rgba(50, 50, 50, 0.8); 
    border-radius: 50%;
    border: 2px dashed #777; /* Dashed border implies "to be filled" */
    
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s;
}

.bonus-lock-overlay:active {
    transform: scale(0.95);
    border-color: #ffcc00;
    background: rgba(50, 50, 50, 0.9);
}

/* The Text inside the Lock */
.lock-text {
    font-family: 'Lilita One', cursive;
    color: #bbb;
    font-size: 12px;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 1px 2px black;
}

/* When Locked, make the underlying icon Gray */
.duel-icon-wrapper.locked-mode .duel-icon {
    filter: grayscale(100%) opacity(0.3);
}

/* Bouncing Animation to attract attention */
.duel-icon-wrapper.locked-mode {
    animation: gentle-float 3s infinite ease-in-out;
}

@keyframes gentle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* --- NEW TABS STYLES --- */
.earn-tabs { display: flex; justify-content: space-around; background: rgba(20, 20, 20, 0.95); border-bottom: 2px solid #333; padding: 15px 0 0 0; margin-bottom: 20px; z-index: 10; width: 100%; }
.earn-tab { font-family: 'Bangers', cursive; color: #888; font-size: 20px; padding-bottom: 12px; cursor: pointer; width: 33%; text-align: center; letter-spacing: 1px; transition: all 0.2s ease; border-bottom: 4px solid transparent; }
.earn-tab.active { color: #ffcc00; border-bottom: 4px solid #ffcc00; text-shadow: 0 0 10px rgba(255, 204, 0, 0.4); }
.tab-content { width: 100%; animation: fade-in-tab 0.3s ease-out; }
@keyframes fade-in-tab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- VISIBILITY FIX FOR OVERLAYS (Guide/Leaderboard/Earn) --- */
#guide-screen, #leaderboard-screen, #earn-screen {
    background: #050505 !important;
    background-image: radial-gradient(circle at top, #1a1a1a 0%, #000000 100%) !important;
    position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    transform: none !important; opacity: 0; pointer-events: none; z-index: 21000 !important;
    display: flex !important; flex-direction: column !important; transition: opacity 0.2s ease !important;
}
#guide-screen:not(.hidden), #leaderboard-screen:not(.hidden), #earn-screen:not(.hidden) {
    opacity: 1 !important; pointer-events: auto !important;
}
body.in-guide #play-screen, body.in-earn #play-screen, body.in-tokenomics #play-screen {
    display: none !important; /* Forces Main Menu to hide so overlays are visible */
}

/* ======================================================== */
/* ==   FINAL VISUAL TWEAKS (Orange Btn + Mission Looks) == */
/* ======================================================== */

/* 1. THE ORANGE BUTTON (Matches Screenshot) */
.bottom-back-btn {
    background: linear-gradient(to bottom, #ff9900, #ff5e00) !important; /* Bright Orange */
    border: 2px solid #ffe600 !important; /* Yellow/Gold Border */
    color: white !important;
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
    box-shadow: 0 6px 0 #cc4400, 0 10px 20px rgba(255, 69, 0, 0.4) !important;
    /* Spacing fixes */
    margin: 20px auto 40px auto !important; 
    width: 90% !important;
    max-width: 350px !important;
}

.bottom-back-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #cc4400 !important;
}

/* 2. MISSION CARD THEMES (Neon Glows) */

/* Daily AI (Cyber Blue) */
.mission-card.soul-cyber {
    background: radial-gradient(circle at left, #001f3f, #000);
    border: 1px solid #00c6ff;
    box-shadow: 0 0 15px rgba(0, 198, 255, 0.15);
}
.mission-card.soul-cyber .m-title { color: #00c6ff; text-shadow: 0 0 5px #00c6ff; }
.mission-card.soul-cyber .m-icon-box i { color: #00c6ff; filter: drop-shadow(0 0 8px #00c6ff); }

/* Daily PvP (Magma Orange/Red) */
.mission-card.soul-magma {
    background: radial-gradient(circle at left, #3d0c02, #000);
    border: 1px solid #ff4500;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.15);
}
.mission-card.soul-magma .m-title { color: #ff6b6b; text-shadow: 0 0 5px #ff4500; }
.mission-card.soul-magma .m-icon-box i { color: #ff4500; filter: drop-shadow(0 0 8px #ff4500); }

/* Weekly AI (Treasury Purple) */
.mission-card.soul-treasury {
    background: radial-gradient(circle at left, #2d003d, #000);
    border: 1px solid #dba4ff;
    box-shadow: 0 0 15px rgba(219, 164, 255, 0.15);
}
.mission-card.soul-treasury .m-title { color: #e0b0ff; text-shadow: 0 0 5px #e0b0ff; }
.mission-card.soul-treasury .m-icon-box i { color: #dba4ff; filter: drop-shadow(0 0 8px #dba4ff); }

/* Weekly PvP (Warlord Gold) */
.mission-card.soul-warlord {
    background: radial-gradient(circle at left, #3d2e00, #000);
    border: 1px solid #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}
.mission-card.soul-warlord .m-title { color: #ffd700; text-shadow: 0 0 5px #ffd700; }
.mission-card.soul-warlord .m-icon-box i { color: #ffcc00; filter: drop-shadow(0 0 8px #ffd700); }



/* ======================================================== */
/* ==   FINAL SHARP MISSION STYLES (No Blur)             == */
/* ======================================================== */

/* 1. ORANGE BACK BUTTON */
.bottom-back-btn {
    background: linear-gradient(to bottom, #ff9900, #ff5e00) !important;
    border: 2px solid #ffe600 !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Sharp Shadow */
    box-shadow: 0 6px 0 #cc4400, 0 10px 20px rgba(255, 69, 0, 0.4) !important;
    border-radius: 12px;
    font-family: 'Lilita One', cursive;
    text-transform: uppercase;
    font-size: 20px;
    padding: 15px 0;
    width: 90% !important;
    max-width: 350px !important;
    margin: 20px auto 40px auto !important;
    text-align: center;
    cursor: pointer;
}
.bottom-back-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #cc4400 !important; }

/* 2. BASE CARD LAYOUT (Compact) */
.mission-card {
    position: relative;
    border-radius: 12px;
    padding: 10px 15px; /* Compact padding */
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
    background: #111;
    border: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    min-height: 55px; 
}

/* 3. SHARP TEXT & ICONS */
.m-icon-box { 
    font-size: 24px; 
    min-width: 35px; 
    display: flex; justify-content: center; align-items: center;
    z-index: 2;
    /* Removed drop-shadow filter so icons are crisp */
    filter: none !important; 
}

.m-content { 
    flex-grow: 1; z-index: 2; display: flex; align-items: center; 
}

.m-header { 
    font-family: 'Bangers', cursive; 
    font-size: 17px; 
    letter-spacing: 0.5px; 
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px; 
}

.m-title {
    /* No Text Shadow here for sharpness */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
}

.m-val { 
    color: #fff; 
    opacity: 1; 
    font-size: 17px;
    text-shadow: none; 
    font-family: 'Lilita One', cursive;
}

.m-action-area { z-index: 2; min-width: 60px; text-align: right; color: #888; font-family: 'Lilita One', cursive; }

/* 4. THEME COLORS (Clean Lines, No Blur) */

/* DAILY AI (Blue) */
.mission-card.soul-cyber { 
    background: linear-gradient(90deg, #0a1f3d, #000); 
    border-color: #00c6ff; 
}
.mission-card.soul-cyber .m-icon-box { color: #00c6ff; }
.mission-card.soul-cyber .m-title { color: #00c6ff; }

/* DAILY PVP (Orange) */
.mission-card.soul-magma { 
    background: linear-gradient(90deg, #3d1000, #000); 
    border-color: #ff4500; 
}
.mission-card.soul-magma .m-icon-box { color: #ff4500; }
.mission-card.soul-magma .m-title { color: #ff4500; }

/* WEEKLY AI (Purple) */
.mission-card.soul-treasury { 
    background: linear-gradient(90deg, #250536, #000); 
    border-color: #d277ff; 
}
.mission-card.soul-treasury .m-icon-box { color: #d277ff; }
.mission-card.soul-treasury .m-title { color: #d277ff; }

/* WEEKLY PVP (Gold) */
.mission-card.soul-warlord { 
    background: linear-gradient(90deg, #2e2600, #000); 
    border-color: #ffd700; 
}
.mission-card.soul-warlord .m-icon-box { color: #ffd700; }
.mission-card.soul-warlord .m-title { color: #ffd700; }

/* 5. CLAIM BUTTON */
.btn-claim {
    background: #2ecc71; border: none; color: #000;
    font-family: 'Bangers', cursive; letter-spacing: 1px;
    font-size: 12px; padding: 6px 12px; border-radius: 6px;
    cursor: pointer; box-shadow: 0 0 5px #2ecc71;
}

/* 6. SHINE ANIMATION */
.card-sheen {
    position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg); animation: shine-pass 3s infinite ease-in-out;
    pointer-events: none; z-index: 5; mix-blend-mode: overlay;
}
@keyframes shine-pass { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }

/* Container for the Menu Notifications */
#menu-notification-area {
    position: absolute;
    top: 100px; /* Below the Help Icon */
    right: 10px;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 99;
    pointer-events: none; /* Let clicks pass through */
}

/* The Notification Card */
.menu-notif-card {
    background: rgba(0, 0, 0, 0.8);
    border-right: 4px solid #ffd700; /* Gold accent on right */
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px 0 0 8px;
    font-size: 12px;
    font-family: 'Titillium Web', sans-serif;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
    animation: slideInRight 0.4s ease-out forwards;
    text-align: right; /* Align text to right */
}

.menu-notif-title {
    color: #ffd700;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    display: block;
}

.menu-notif-amount {
    font-size: 14px;
    font-weight: bold;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* =========================== */
/* ==      BADGE SOULS      == */
/* =========================== */

.badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 10px;
    padding: 10px;
}

.badge-card {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0.4; /* Locked state */
    filter: grayscale(1);
    transition: all 0.3s;
}

.badge-card.unlocked {
    opacity: 1;
    filter: grayscale(0);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.badge-icon { font-size: 24px; margin-bottom: 5px; }
.badge-name { font-size: 10px; font-weight: bold; text-transform: uppercase; display: block; }
.badge-desc { font-size: 8px; color: #aaa; display: block; line-height: 1.2; margin-top:3px;}

/* 🟢 COMMON: The Recruit */
.badge-card.tier-common.unlocked {
    border-bottom: 3px solid #2ecc71;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a2e15 100%);
}
.badge-card.tier-common .badge-icon { color: #2ecc71; text-shadow: 0 0 10px rgba(46, 204, 113, 0.5); }

/* 🔵 UNCOMMON: The Tactician */
.badge-card.tier-uncommon.unlocked {
    border-bottom: 3px solid #3498db;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a253a 100%);
}
.badge-card.tier-uncommon .badge-icon { color: #3498db; text-shadow: 0 0 10px rgba(52, 152, 219, 0.5); }

/* 🟣 RARE: The Gambler */
.badge-card.tier-rare.unlocked {
    border-bottom: 3px solid #9b59b6;
    background: linear-gradient(180deg, #1a1a1a 0%, #2c0a3a 100%);
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.2);
}
.badge-card.tier-rare .badge-icon { color: #9b59b6; text-shadow: 0 0 15px rgba(155, 89, 182, 0.8); }

/* 🟠 EPIC: The High Roller */
.badge-card.tier-epic.unlocked {
    border-bottom: 3px solid #e67e22;
    background: linear-gradient(180deg, #1a1a1a 0%, #4a2200 100%);
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.3);
    animation: pulseBorder 2s infinite;
}
.badge-card.tier-epic .badge-icon { color: #e67e22; text-shadow: 0 0 20px rgba(230, 126, 34, 1); }

/* 🔴 LEGENDARY: The God */
.badge-card.tier-legendary.unlocked {
    border: 1px solid #e74c3c;
    background: radial-gradient(circle, #3a0a0a 0%, #000 100%);
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.6);
}
.badge-card.tier-legendary .badge-icon { 
    color: #e74c3c; 
    animation: shake 3s infinite;
    text-shadow: 0 0 25px #e74c3c;
}

@keyframes shake { 0% {transform: rotate(0deg);} 90% {transform: rotate(0deg);} 92% {transform: rotate(5deg);} 94% {transform: rotate(-5deg);} 96% {transform: rotate(5deg);} 100% {transform: rotate(0deg);} }

/* ================================================= */
/* ==   V8 PROFILE: HOLOGRAPHIC & ANIMATED        == */
/* ================================================= */

/* 1. ANIMATIONS */
@keyframes sheen-sweep {
    0% { background-position: -150% 0; }
    100% { background-position: 250% 0; }
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
@keyframes pop-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes float-y {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

/* 2. THE OVERLAY */
#profile-overlay {
    position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(5, 5, 12, 0.95) !important;
    z-index: 99999 !important;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    backdrop-filter: blur(8px);
}
#profile-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }

/* 3. THE CARD (Deep Space Background) */
.profile-card {
    width: 90%; max-width: 360px;
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    overflow: hidden;
    animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 4. TOKEN DISPLAY (Animated Sheen) */
.profile-balance-area {
    margin-top: 5px; margin-bottom: 20px; z-index: 2;
    /* The Sheen Effect Background */
    background: linear-gradient(120deg, 
        rgba(30, 58, 138, 0.5) 30%, 
        rgba(96, 165, 250, 0.6) 50%, 
        rgba(30, 58, 138, 0.5) 70%);
    background-size: 200% 100%;
    animation: sheen-sweep 3s infinite linear; /* Runs the shine loop */
    
    padding: 12px 25px; border-radius: 25px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
}
.token-big-wrapper { display: flex; align-items: center; justify-content: center; gap: 10px; }
.token-big-icon { width: 32px; height: 32px; filter: drop-shadow(0 0 5px rgba(255,215,0,0.6)); }

#profile-exact-tokens {
    font-family: 'Lilita One', sans-serif; 
    font-size: 38px; color: #fff;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
    line-height: 1;
}

/* 5. AVATAR (Pulsing Ring) */
.profile-avatar-area {
    width: 130px; height: 130px; position: relative; z-index: 2; margin-bottom: 15px;
}
.avatar-glow-ring {
    width: 100%; height: 100%; border-radius: 50%;
    padding: 4px; 
    background: linear-gradient(135deg, #00f2ff, #00c6ff);
    animation: pulse-ring 2s infinite; /* Pulsing effect */
}
.main-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    border: 4px solid #0f172a; background: #000; object-fit: cover;
}

/* 6. NAME */
.profile-name-area { z-index: 2; margin-bottom: 20px; }
#profile-real-name {
    font-family: 'Roboto', sans-serif; font-size: 24px; font-weight: 800; color: #fff; 
    margin: 0; letter-spacing: 0.5px;
}
.id-badge {
    font-size: 10px; background: rgba(255,255,255,0.1); padding: 5px 12px;
    border-radius: 12px; color: #94a3b8; display: inline-block; margin-top: 6px; 
    font-weight: 700; letter-spacing: 1px;
}

/* 7. CONTROLS */
.profile-top-row {
    width: 100%; display: flex; justify-content: center; gap: 10px; margin-bottom: 25px;
}
.control-pill {
    background: #1e293b; border: 1px solid #334155;
    padding: 8px 16px; border-radius: 20px;
    display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.control-pill span { font-size: 10px; font-weight: 800; color: #cbd5e1; }
.pill-active { border-color: #2ecc71; box-shadow: 0 0 10px rgba(46, 204, 113, 0.2); } 
.pill-active i { color: #2ecc71; }
.pill-inactive { border-color: #ef4444; } .pill-inactive i { color: #ef4444; }

/* 8. STATS GRID (COLORFUL & ANIMATED) */
.stats-grid-v2 {
    width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 25px; z-index: 2;
}

/* Base Stat Box */
.stat-block-v2 {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px; padding: 15px;
    display: flex; flex-direction: column; align-items: center;
    border: 1px solid rgba(255,255,255,0.05);
    position: relative; overflow: hidden;
    transition: transform 0.2s;
}
.stat-block-v2:active { transform: scale(0.98); }

/* Theme: PvP (Cyan) */
.stat-pvp { border-bottom: 3px solid #00f2ff; box-shadow: 0 4px 15px rgba(0, 242, 255, 0.1); }
.stat-pvp .stat-label-v2 { color: #00f2ff; }

/* Theme: AI (Purple) */
.stat-ai { border-bottom: 3px solid #d946ef; box-shadow: 0 4px 15px rgba(217, 70, 239, 0.1); }
.stat-ai .stat-label-v2 { color: #d946ef; }

/* Theme: Rank (Gold) */
.stat-rank { border-bottom: 3px solid #f59e0b; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1); }
.stat-rank .stat-label-v2 { color: #f59e0b; }

/* Theme: Friends (Green) */
.stat-friends { border-bottom: 3px solid #2ecc71; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.1); }
.stat-friends .stat-label-v2 { color: #2ecc71; }

.stat-label-v2 { font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-bottom: 4px; opacity: 0.9; }
.stat-val-v2 { font-size: 20px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* 9. CONTINUE BUTTON */
.profile-close-btn-v2 {
    width: 100%; padding: 16px; 
    background: linear-gradient(90deg, #ff9f0a, #ff5e00);
    color: #fff; border-radius: 16px; font-weight: 900; font-size: 16px;
    cursor: pointer; z-index: 2; box-shadow: 0 4px 20px rgba(255, 119, 0, 0.4);
    text-transform: uppercase; letter-spacing: 1px;
    animation: float-y 3s infinite ease-in-out; /* Gentle floating */
}

/* ======================================================= */
/* ==    FIX: SIDEBARS BLOCKING PLAY BUTTONS (V2)       == */
/* ======================================================= */

/* 1. Make the Sidebars "invisible" to clicks */
#left-bar, #right-bar {
    pointer-events: none !important; /* Clicks go THROUGH the empty space */
    height: 100% !important; /* Keep layout, but ignore touches */
    z-index: 50; /* Keep visual layer, but touch layer is disabled */
}

/* 2. Re-enable clicks ONLY for the icons inside them */
.duel-icon-wrapper, 
.game-side-btn {
    pointer-events: auto !important; /* The icons still work */
    cursor: pointer;
}

/* 3. Force Bottom Buttons to be the Topmost Touch Layer */
#bottom-bar {
    z-index: 100 !important; /* Sit above sidebars */
    position: absolute; /* Ensure it floats on top */
    bottom: 20px;
    width: 100%;
    pointer-events: none; /* The container passes clicks... */
}

.bottom-button {
    pointer-events: auto !important; /* ...but the buttons capture them! */
    position: relative;
    z-index: 101 !important; /* Highest priority */
}

/* ================================================= */
/* ==    MISSING INTERMISSION / ROUND OVER STYLES == */
/* ================================================= */

/* 1. Trigger the text to appear (Opacity 0 -> 1) */
#vfx-overlay.vfx-intermission #vfx-content {
    animation: vfx-pop-in 0.5s ease-out forwards; 
}

/* 2. Style the Title ("ROUND OVER") */
#vfx-overlay.vfx-intermission #vfx-title {
    color: #00c6ff; /* Cyan/Electric Blue */
    font-size: 4rem; 
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.6);
}

/* 3. Style the Subtitle ("Winner: Player X") */
#vfx-overlay.vfx-intermission #vfx-subtitle {
    color: white;
    font-size: 1.5rem;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

/* 4. Ensure Reward/Close buttons are hidden in intermission */
#vfx-overlay.vfx-intermission #vfx-reward,
#vfx-overlay.vfx-intermission #vfx-close-btn {
    display: none !important;
}


/* ================================================= */
/* ==    SOULFUL INTERMISSION STYLES (ROUND OVER) == */
/* ================================================= */

/* The "ROUND X" Title */
.vfx-round-label {
    color: #00c6ff;
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(0, 198, 255, 0.8);
}

/* The Container Box */
.intermission-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

/* "YOU WON" / "OPPONENT WON" */
.int-winner {
    font-family: 'Lilita One', cursive;
    font-size: 42px; /* Big and Loud */
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    margin-bottom: 15px;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* "MATCH SCORE" Label */
.int-score-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #aaa;
    letter-spacing: 2px;
    font-weight: bold;
}

/* The "1 - 0" Score */
.int-score-val {
    font-family: 'Bangers', cursive;
    font-size: 50px;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

/* ========================================= */
/* ==    PROFESSIONAL INTERMISSION BOX    == */
/* ========================================= */

/* 1. The Container Box (The "Panel") */
.intermission-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    
    /* --- NEW STYLING --- */
    background: rgba(18, 18, 24, 0.95); /* Deep dark background */
    border: 2px solid #00c6ff;          /* Cyan Electric Border */
    border-radius: 16px;                /* Rounded Corners */
    padding: 30px 40px;                 /* Breathing room inside */
    box-shadow: 0 0 40px rgba(0, 198, 255, 0.25); /* Soft Blue Glow */
    backdrop-filter: blur(5px);         /* Blurs what's behind the box slightly */
    min-width: 280px;                   /* Ensures it looks substantial */
}

/* 2. The Winner Text inside the box */
.int-winner {
    font-family: 'Lilita One', cursive;
    font-size: 48px; 
    text-transform: uppercase;
    text-shadow: 0 4px 0px rgba(0,0,0,0.5); /* 3D Drop Shadow effect */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* 3. The Countdown Number (ORANGE UPDATE) */
.big-countdown {
    font-family: 'Bangers', cursive;
    font-size: 110px;        /* Slightly bigger */
    color: #ff9f00;          /* <--- BRIGHT ORANGE */
    text-shadow: 
        0 0 20px rgba(255, 159, 0, 0.8), /* Inner Glow */
        2px 2px 0px #000;                /* Sharp Edge */
    margin-top: 15px;
    animation: heartbeat 1s infinite;
}

/* 4. "Next Round In..." Label */
.intermission-box div:last-child {
    color: #888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

/* --- COMPACT SCOREBOARD FIX --- */
#vfx-title {
    font-size: 3rem !important; /* Shrink from 4rem+ to 3rem */
    margin-bottom: 5px !important;
    margin-top: 20px !important;
}

/* Reduce spacing around the subtitle area */
#vfx-subtitle {
    margin-top: 0 !important;
}

/* Make the reward pill closer to the box */
#vfx-reward {
    margin-top: 10px !important; 
    margin-bottom: 5px !important;
}

/* Make the Close Button closer */
#vfx-close-btn {
    margin-top: 10px !important;
}

/* ================================================= */
/* ==      NEON GLOW INTERMISSION RE-SKIN         == */
/* ================================================= */

/* 1. IMPORT THE FONT (If not already there) */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

/* 2. THE MAIN BOX (Cyan Neon Border) */
.intermission-box {
    background: #0a0a0a !important;      /* Pitch Black Background */
    border: 3px solid #00f2ff !important; /* Bright Cyan Border */
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.4), /* Outer Glow */
                inset 0 0 20px rgba(0, 242, 255, 0.1) !important; /* Inner Glow */
    border-radius: 25px !important;
    padding: 30px 20px !important;
    width: 280px !important;              /* Fixed width for perfect alignment */
    margin: 10px auto !important;
}

/* 3. ROUND TITLE (Blue Glow at Top) */
.vfx-round-label {
    font-family: 'Titan One', cursive !important;
    font-size: 3.5rem !important;
    color: #00f2ff !important;            /* Cyan Text */
    font-style: italic !important;        /* Slanted like screenshot */
    text-shadow: 0 0 20px #00f2ff !important;
    margin-bottom: 5px !important;
    margin-top: -10px !important;
}

/* 4. WINNER/LOSER TEXT (Chunky & Red/Green) */
.int-winner {
    font-family: 'Titan One', cursive !important;
    font-size: 3rem !important;
    text-shadow: 3px 3px 0px #000 !important; /* Hard shadow for pop */
    margin-bottom: 5px !important;
    line-height: 1 !important;
}

/* 5. HIDE THE CARD SCORES (e.g. "24 vs 20") - To match Screenshot 2 */
.int-score-row {
    display: none !important; 
}

/* 6. MATCH SCORE LABEL ("MATCH SCORE") */
.int-ms-label {
    font-family: 'Roboto', sans-serif !important;
    font-size: 10px !important;
    color: #aaa !important;
    letter-spacing: 3px !important;
    font-weight: bold !important;
    margin-top: 10px !important;
}

/* 7. MATCH SCORE NUMBERS ("0 - 1") */
.int-ms-val {
    font-family: 'Titan One', cursive !important;
    font-size: 3rem !important;
    color: #ffffff !important;
    font-style: italic !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
    margin-bottom: 10px !important;
}

/* 8. COUNTDOWN (Big Glowing Orange) */
#intermission-countdown {
    font-family: 'Titan One', cursive !important;
    font-size: 5.5rem !important;        /* HUGE */
    color: #ffaa00 !important;            /* Orange/Yellow */
    text-shadow: 0 0 25px #ffaa00,        /* Glow */
                 3px 3px 0px #000 !important; 
    margin-top: -10px !important;         /* Pull it closer to box */
    position: relative;
    z-index: 10;
}

/* 9. "NEXT ROUND IN" TEXT */
.int-next-label {
    font-size: 11px !important;
    font-weight: bold !important;
    opacity: 0.8 !important;
    margin-top: -5px !important;
}


/* ================================================= */
/* ==      SOLID & CLEAN FONT FIX (Lilita One)    == */
/* ================================================= */

/* 1. Import the cleaner, blockier font */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

/* 2. Apply it to all Big Text */
.vfx-round-label, 
.int-winner, 
.int-score-num, 
.int-ms-val,
#intermission-countdown {
    font-family: 'Lilita One', cursive !important;
    font-style: italic !important; /* Force the slant */
}

/* 3. FIX "ROUND X" TITLE */
.vfx-round-label {
    color: #00ddff !important;  /* Solid Cyan */
    font-size: 4rem !important;
    margin-bottom: 0px !important;
    
    /* THE FIX: Hard Black Shadow (No fuzzy neon blur) */
    text-shadow: 4px 4px 0px #000 !important; 
    
    letter-spacing: 2px !important;
}

/* 4. FIX "WON/LOST" TEXT */
.int-winner {
    font-size: 3.8rem !important;
    
    /* Hard Black Shadow to make the color pop */
    text-shadow: 3px 3px 0px #000 !important; 
    
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
}

/* 5. FIX THE BOX GLOW (Optional: Make it sharper) */
.intermission-box {
    border: 3px solid #00ddff !important;
    /* Reduce the fuzzy glow, keep it tighter */
    box-shadow: 0 0 15px rgba(0, 221, 255, 0.4) !important; 
}

/* ================================================= */
/* ==   BLURRY "COMING SOON" SOCIAL TASKS HACK    == */
/* ================================================= */

.task-tile.locked-social {
    position: relative;
    pointer-events: none; /* Completely disables clicking */
    border-color: #444 !important;
    overflow: hidden;
}

/* Blur and dim everything inside the box */
.task-tile.locked-social > * {
    filter: blur(3px) grayscale(80%);
    opacity: 0.5;
    transition: none;
}

/* The massive Orange/Yellow "SOON" Sticker slapped on top */
.task-tile.locked-social::after {
    content: "SOON";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg); /* Diagonal hack look */
    
    /* Vibrant Yellow/Orange Gradient */
    background: linear-gradient(135deg, #ffcc00 0%, #ff8800 100%);
    color: #1a0f00; /* Very dark brown/black text */
    
    font-family: 'Bangers', cursive;
    font-size: 28px;
    letter-spacing: 2px;
    padding: 6px 20px;
    border-radius: 8px;
    border: 2px solid #ffffff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.8), 0 0 15px rgba(255, 204, 0, 0.4);
    z-index: 10;
}