@import url('https://fonts.googleapis.com/css2?family=VT323&family=Jost:wght@400;500;700;800&display=swap');

:root {
    --bg-color: #8D6E63;
    --panel-bg: #4E342E;
    --card-bg: #fdfdfd;
    --accent-gold: #FFD54F;
    --accent-blue: #81D4FA;
    --accent-red: #E57373;
    --accent-pink: #ff9fb2;
    --accent-green: #81C784;
    --text-main: #EFEBE9;
    --text-dim: #BCAAA4;
    --black-suit: #3E2723;
    --red-suit: #d32f2f;
}

* { box-sizing: border-box; user-select: none; }

/* #region Day Theme */

body {
    background-color: var(--bg-color);
    background: url("assets/images/menu-bg.png") no-repeat center center fixed;
    background-size: cover;
    color: var(--text-main);
    font-family: 'Jost', sans-serif;
    margin: 0; padding: 1vh 1vw; height: 100vh;
    display: flex; justify-content: center; align-items: center; overflow: hidden;
}

#main-menu-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: url("assets/images/menu-bgv3.png") no-repeat center center fixed;
    background-size: cover;
    z-index: 300; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center;
    padding: 8vh 2vw; 
}

/* #endregion */

/* #region Moonlight Night Theme Overrides */
body.dark-theme {
    --bg-color: #121826;
    --panel-bg: #1F2937;
    --card-bg: #E5E7EB;
    --accent-gold: #93C5FD;
    --accent-blue: #A78BFA;
    --accent-red: #F87171;
    --accent-pink: #F472B6;
    --accent-green: #34D399;
    --text-main: #F9FAFB;
    --text-dim: #9CA3AF;
    --black-suit: #111827; 
    --red-suit: #DC2626;   
    
    background: url("assets/images/menu-background-dark.png") no-repeat center center fixed;
    background-size: cover;
}

/* Night Mode Switch Slider Tint */
body.dark-theme #night-mode-toggle:checked + .theme-slider {
    background-color: #1e293b;
    border-color: var(--accent-gold);
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.4);
}

body.dark-theme #night-mode-toggle:checked + .theme-slider:before {
    background-color: var(--accent-gold);
}

body.dark-theme .lobby-overlay.main-menu-screen {
    background: url("assets/images/menu-bgv3-2-dark.png") no-repeat center center fixed !important;
    background-size: cover !important;
}

body.dark-theme .card {
    background-color: #cbd5e1;
    background-image:
        radial-gradient(#94a3b8 15%, transparent 15%),
        radial-gradient(#94a3b8 15%, transparent 15%);
    border-color: #1F2937;
    box-shadow: inset 0 0 10px rgba(31, 41, 55, 0.4), 0 6px 12px rgba(0,0,0,0.8);
}

/* body.dark-theme .card above is more specific than the plain .card.enh-* rules (an extra body+
   class beats two plain classes), so it silently wins and wipes out every enhancement's border
   color in Night mode unless restated here. Same colors as the day-theme rules, just re-asserted. */
body.dark-theme .card.enh-lucky { border-color: #4FC3F7; box-shadow: inset 0 0 10px rgba(79, 195, 247, 0.4), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-mult { border-color: #EF5350; box-shadow: inset 0 0 10px rgba(239, 83, 80, 0.4), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-bonus { border-color: #66BB6A; box-shadow: inset 0 0 10px rgba(102, 187, 106, 0.4), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-wild { border-color: #AB47BC; box-shadow: inset 0 0 10px rgba(171, 71, 188, 0.4), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-steel { border-color: #2196F3; border-width: 3px; box-shadow: inset 0 0 12px rgba(33, 150, 243, 0.7), 0 0 10px rgba(33, 150, 243, 0.6), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-glass { border-color: #4DD0E1; box-shadow: inset 0 0 10px rgba(77, 208, 225, 0.5), 0 6px 12px rgba(0,0,0,0.8); opacity: 0.92; }
body.dark-theme .card.enh-gold { border-color: #FFD54F; box-shadow: inset 0 0 10px rgba(255, 213, 79, 0.5), 0 6px 12px rgba(0,0,0,0.8); }
body.dark-theme .card.enh-stone { border-color: #8D8D8D; background-color: #cfcfcf; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.8); }

body.dark-theme .mud-pit {
    background: #111827;
    border-color: #030712;
}

body.dark-theme .tug-track {
    background: #4B5563;
    border-color: #1F2937;
}

body.dark-theme .sidebar,
body.dark-theme .audio-control-panel {
    background: rgba(17, 24, 39, 0.95) !important;
    border-color: #030712; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.8);
}

body.dark-theme .sidebar-chat-bubble {
    background: #1F2937;
}

body.dark-theme .sidebar-chat-bubble:hover {
    background: #374151;
}

body.dark-theme .sidebar h2 {
    border-bottom: 2px dashed #374151;
}

body.dark-theme .hand-row,
body.dark-theme .stat-header,
body.dark-theme .drawer-header {
    border-bottom: 1px solid #374151;
}

body.dark-theme .stat-block {
    border-color: #374151;
}

body.dark-theme .card.face-down,
body.dark-theme .mini-table-card.face-down {
    background: transparent url('assets/cards/card-back-dark.png') no-repeat center center !important;
    background-size: cover !important;
}

body.dark-theme .player-area { 
    position: relative;
    border-style: solid;
    border-width: 1.4rem;
    border-image-source: url('assets/images/play-area-dark.png');
    border-image-slice: 45 fill; 
    border-image-repeat: stretch;
    background: transparent; 
    border-radius: 0; 
    padding: clamp(0.2rem, 0.5vw, 0.5rem) clamp(0.5rem, 1vw, 1rem); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box;
    filter: drop-shadow(0 6px 15px rgba(0,0,0,0.6)); 
}

body.dark-theme .card.selected {
    border-color: #FFD54F;
    box-shadow: inset 0 0 10px rgba(31, 41, 55, 0.4), 0 0 0 2px #FFD54F, 0 10px 20px rgba(0,0,0,0.8);
    transform: translateY(-15px);
}
/* #endregion */

/* #region Lobby & Main Menu Overlays */

.lobby-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    z-index: 300; display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
}

.lobby-box {
    background: var(--panel-bg); border: 2px solid var(--accent-gold); padding: 2.5rem 3rem; border-radius: 12px;
    text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.8); position: relative; max-width: 480px; width: 90%;
}

.lobby-input {
    padding: 8px; font-size: 1.1rem; text-transform: uppercase; text-align: center; width: 150px;
    margin: 8px; border-radius: 6px; border: 1px solid #3E2723; background: #3E2723; color: white;
    font-family: 'Jost', sans-serif;
}

.lobby-button-row {
    display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap; gap: 20px;
}

.main-menu-screen {
    background: transparent; backdrop-filter: none;
    justify-content: space-between; padding: 8vh 2vw;
}

.main-menu-layout {
    background: transparent; border: none; padding: 0; border-radius: 0;
    text-align: center; box-shadow: none; position: relative; 
    width: 100%; max-width: 1200px;
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
}

/* #endregion */

/* #region 3-Column Layout Wrapper */
.game-wrapper {
    display: none; flex-wrap: nowrap; width: 100%; max-width: 1600px; gap: clamp(8px, 1.2vw, 20px); 
    justify-content: space-between; align-items: stretch; height: 100%; max-height: 98vh;
}
/* #endregion */

/* #region Sidebars & Elements */
.sidebar {
    width: clamp(190px, 16vw, 260px); flex-shrink: 0; 
    background: rgba(62, 39, 35, 0.95);
    border: 2px solid #271613; 
    border-radius: 12px; padding: clamp(0.4rem, 0.8vw, 0.8rem); 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.6); 
    display: flex; flex-direction: column; height: 100%;
    position: relative !important;
    overflow: visible !important;
}

.left-sidebar { 
    position: relative !important; 
    overflow: visible !important; 
    z-index: 800 !important; 
}

.right-sidebar { 
    position: relative !important; 
    overflow: visible !important; 
    z-index: 850 !important; 
    padding-bottom: 60px;
}

.sidebar > *:not(.matrix-rain-canvas) {
    position: relative;
    z-index: 2;
}

.sidebar h2 { margin: 0 0 0.4rem 0; color: var(--accent-gold); text-align: center; border-bottom: 2px dashed #3E2723; padding-bottom: 0.3rem; font-size: clamp(0.9rem, 1.1vw, 1.1rem); }

.sidebar-chat-bubble {
    margin-top: auto;
    background: #3E2723;
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    transition: transform 0.2s, background 0.2s;
}
.sidebar-chat-bubble:hover {
    background: #5D4037;
    transform: translateY(-2px);
}
.sidebar-chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: var(--accent-gold) transparent;
    display: block;
    width: 0;
}
.sidebar-chat-bubble span {
    color: var(--accent-gold);
    font-weight: normal;
    font-size: 0.85rem;
}

.hand-row { display: flex; flex-direction: column; padding: 0.25rem 0; border-bottom: 1px solid #3E2723; font-size: clamp(0.7rem, 0.85vw, 0.85rem); }
.hand-row-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2px; }
.hand-name { color: var(--text-main); font-weight: normal; }
.hand-stats { color: var(--accent-blue); font-size: clamp(0.8rem, 0.9vw, 0.95rem); font-family: 'Jost', sans-serif;}

.example-cards { display: flex; gap: 2px; }
.micro-card {
    width: clamp(16px, 1.3vw, 20px); height: clamp(22px, 1.8vw, 26px); background: var(--card-bg); border-radius: 3px; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    font-size: clamp(0.55rem, 0.7vw, 0.7rem); font-weight: normal; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.micro-card .suit { font-size: clamp(0.45rem, 0.55vw, 0.6rem); margin-top: 1px; }
.micro-card.red { color: var(--red-suit); }
.micro-card.black { color: var(--black-suit); }
.micro-card.dim { opacity: 0.35; filter: grayscale(50%); } 

.stat-block { background: rgba(0,0,0,0.25); border-radius: 8px; padding: clamp(6px, 0.8vw, 10px); border: 1px solid #3E2723; margin-bottom: 0.8rem; }
.stat-header { font-weight: normal; margin-bottom: 6px; text-transform: uppercase; font-size: clamp(0.7rem, 0.75vw, 0.8rem); border-bottom: 1px solid #3E2723; padding-bottom: 3px; }
.stat-row { display: flex; justify-content: space-between; font-size: clamp(0.75rem, 0.85vw, 0.9rem); margin-top: 4px; font-weight: normal; align-items: center; }
.stat-value { font-size: clamp(0.85rem, 0.95vw, 1rem); text-align: right; font-family: 'Jost', sans-serif;}

/* Grid / Micro Containers */
#active-jokers-grid,
#active-artifacts-grid,
#tarot-tray-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 0.3rem;
    overflow: visible !important;
    position: relative !important;
    /* ".sidebar > *:not(.matrix-rain-canvas)" (below) gives every direct sidebar child its own
       z-index:2 stacking context, which traps a popped-out .joker-tooltip/.artifact-tooltip
       inside this grid no matter how high its own z-index is set — against a same-z-index later
       sibling (e.g. the "Tarot Cards" heading after #active-jokers-grid) the later one in DOM
       order still wins the tie and paints over it. Raise these specific grids above that default
       so their tooltips can actually pop out over later sidebar content. */
    z-index: 5 !important;
}

/* Jokers and Tarot cards share the same 4-column track so their tiles are the same size and
   both trays read as a single row: 4 fits the Joker grid's PvP roster exactly (Co-Op's 5th slot,
   with the Expansion Pack relic, wraps to its own row), and the Tarot tray (max 2 held) just
   uses 2 of its 4 tracks. */
#active-jokers-grid, #tarot-tray-grid { grid-template-columns: repeat(4, 1fr); }

.micro-joker {
    position: relative !important;
    min-width: 0; /* override the grid-item default min-width:auto so a broken/oversized image (e.g. alt text) can't force the column wider than its 1fr share */
    border: 2px solid transparent;
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 0.75rem;
    overflow: visible !important;
    z-index: 10;
}
.micro-joker:hover { border-color: var(--accent-gold); z-index: 200; cursor: default; }

.micro-joker-img-wrap { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; display: flex; transition: transform 0.15s; }
.micro-joker:hover .micro-joker-img-wrap { transform: scale(1.05) rotate(-3deg); }
.micro-joker img { width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); }

/* An Elite/Hazard node debuff disabling this Joker for the fight — darkened so it visibly reads
   as "not contributing" without needing to open the tooltip. */
.micro-joker.joker-node-disabled { border-color: var(--accent-red); }
.micro-joker.joker-node-disabled .micro-joker-img-wrap { filter: grayscale(80%) brightness(0.45); }
.micro-joker.joker-node-disabled:hover .micro-joker-img-wrap { transform: none; }

/* #endregion */

/* #region Tooltips Unclipped */

/* Joker Tooltip (Right Sidebar -> Pops out LEFT over the board) */
.joker-tooltip {
    position: absolute !important;
    right: 115% !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(10px) !important;
    background: var(--panel-bg); 
    border: 2px solid var(--accent-gold); 
    padding: 10px 12px !important;
    border-radius: 8px;
    min-width: 190px !important;
    max-width: 230px !important;
    box-shadow: -4px 8px 24px rgba(0,0,0,0.95) !important;
    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s; 
    text-align: center; 
    display: flex; 
    flex-direction: column;
    gap: 6px; 
    color: var(--text-main); 
    z-index: 99999 !important;
}

.joker-tooltip::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -30px;
    width: 30px;
    height: calc(100% + 20px);
    background: transparent;
}

.micro-joker:hover .joker-tooltip { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    transform: translateY(-50%) translateX(0) !important; 
}

.joker-tooltip::after {
    content: ''; position: absolute; top: 50%; right: -12px; transform: translateY(-50%);
    border-width: 6px; border-style: solid; border-color: transparent transparent transparent var(--accent-gold);
}
.joker-tooltip h4 { margin: 0; color: var(--accent-gold); font-size: 1rem; }
.joker-tooltip p { margin: 0; font-size: 0.8rem; color: var(--accent-blue); line-height: 1.2; }
.joker-tooltip .btn-danger { padding: 5px; font-size: 0.8rem; width: 100%; margin-top: 2px; }

/* Artifact Tooltip (Left Sidebar -> Pops out RIGHT over the board) */
.artifact-tooltip {
    position: absolute !important;
    left: 115% !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-10px) !important;
    background: var(--panel-bg);
    border: 2px solid var(--accent-gold);
    padding: 10px 12px !important;
    border-radius: 8px;
    min-width: 190px !important;
    max-width: 230px !important;
    box-shadow: 4px 8px 24px rgba(0,0,0,0.95) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-main);
    z-index: 99999 !important;
}

.artifact-tooltip::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -30px;
    width: 30px;
    height: calc(100% + 20px);
    background: transparent;
}

.micro-joker:hover .artifact-tooltip { 
    opacity: 1 !important; 
    pointer-events: auto !important; 
    transform: translateY(-50%) translateX(0) !important; 
}

.artifact-tooltip::after {
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: -12px; 
    transform: translateY(-50%);
    border-width: 6px; 
    border-style: solid; 
    border-color: transparent var(--accent-gold) transparent transparent;
}

.artifact-tooltip h4 { margin: 0; color: var(--accent-gold); font-size: 1.1rem; }
.artifact-tooltip p { margin: 0; font-size: 0.85rem; color: var(--accent-blue); line-height: 1.3; }

/* Day Theme Tooltip Overrides */
body:not(.dark-theme):not(.dystopian-theme) .joker-tooltip,
body:not(.dark-theme):not(.dystopian-theme) .artifact-tooltip {
    background: #271613 !important;
    border: 2px solid var(--accent-gold) !important;
    color: var(--text-main) !important;
}
body:not(.dark-theme):not(.dystopian-theme) .joker-tooltip h4,
body:not(.dark-theme):not(.dystopian-theme) .artifact-tooltip h4 {
    color: var(--accent-gold) !important;
}
body:not(.dark-theme):not(.dystopian-theme) .joker-tooltip p,
body:not(.dark-theme):not(.dystopian-theme) .artifact-tooltip p {
    color: var(--accent-blue) !important;
}

/* Night Theme Tooltip Overrides */
body.dark-theme .joker-tooltip,
body.dark-theme .artifact-tooltip {
    background: #111827 !important;
    border: 2px solid #93c5fd !important;
    color: #f9fafb !important;
}
body.dark-theme .joker-tooltip::after {
    border-color: transparent transparent transparent #93c5fd !important;
}
body.dark-theme .artifact-tooltip::after {
    border-color: transparent #93c5fd transparent transparent !important;
}
body.dark-theme .joker-tooltip h4,
body.dark-theme .artifact-tooltip h4 {
    color: #93c5fd !important;
}
body.dark-theme .joker-tooltip p,
body.dark-theme .artifact-tooltip p {
    color: #a78bfa !important;
}

/* Dystopian Theme Tooltip Overrides */
body.dystopian-theme .joker-tooltip,
body.dystopian-theme .artifact-tooltip {
    background: #080d0a !important;
    border: 2px solid #00ff66 !important;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.3) !important;
    color: #e2f7ea !important;
}
body.dystopian-theme .joker-tooltip::after {
    border-color: transparent transparent transparent #00ff66 !important;
}
body.dystopian-theme .artifact-tooltip::after {
    border-color: transparent #00ff66 transparent transparent !important;
}
body.dystopian-theme .joker-tooltip h4,
body.dystopian-theme .artifact-tooltip h4 {
    color: #00ff66 !important;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.5) !important;
}
body.dystopian-theme .joker-tooltip p,
body.dystopian-theme .artifact-tooltip p {
    color: #00e5ff !important;
}

/* #endregion */

/* #region Center Main Content */
.main-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 420px; z-index: 10; max-height: 100%; overflow-y: auto; }

.opponent-area { background: rgba(0,0,0,0.60); border-radius: 10px; padding: clamp(0.4rem, 0.8vw, 0.8rem); text-align: center; border: 1px dashed #5D4037; display: flex; flex-direction: column; justify-content: center; }
#opponent-hand-container { margin: 10px 0; min-height: clamp(55px, 5.5vw, 120px); }
.opponent-area .card { cursor: default; }

.mud-pit { 
    background: #2b1d18; 
    border: 3px solid #1a110e; 
    border-radius: 16px; padding: clamp(0.6rem, 1.2vw, 1.2rem); 
    margin: clamp(0.3rem, 0.8vh, 0.6rem) 0; text-align: center; 
    position: relative; 
    box-shadow: inset 0 8px 20px rgba(0,0,0,0.9); 
}

.tug-track { 
    width: 100%; height: clamp(8px, 1.2vh, 12px); 
    background: #BCAAA4; 
    border-radius: 10px; position: relative; 
    border: 1px solid #4E342E; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.6);
}

img.tug-marker {
    position: absolute;
    height: clamp(35px, 5vh, 45px); 
    width: auto;
    top: 50%; 
    margin-top: clamp(-17px, -2.5vh, -22px); 
    left: 50%;
    transform: translateX(-50%) scaleX(1);
    transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    z-index: 10;
}

.tug-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: clamp(0.65rem, 0.75vw, 0.8rem); color: var(--text-dim); font-weight: normal; }

/* Co-Op Specific HUDs & Views */
.coop-banner {
    background: rgba(0,0,0,0.35); border: 2px solid var(--accent-gold); border-radius: 10px;
    padding: 8px 16px; display: flex; justify-content: space-around; align-items: center; margin-bottom: 6px;
}
.coop-banner-stat { font-size: 1rem; font-weight: normal; }
.coop-banner-stat span { color: var(--accent-gold); font-family: 'Jost', sans-serif; font-size: 1.2rem; }

.coop-boss-box {
    background: #2b201a; border: 2px solid #5a4032; border-radius: 14px;
    padding: 0.8rem; text-align: center; margin-bottom: 6px; position: relative;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

body.dark-theme .coop-boss-box {
    background: rgba(17, 24, 39, 0.95) !important;
    border-color: #030712 !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.8) !important;
}

body.dystopian-theme .coop-boss-box {
    background: rgba(10, 16, 13, 0.85) !important;
    border-color: #00ff66 !important;
    box-shadow: inset 0 0 15px rgba(0, 255, 102, 0.15), 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

.coop-hp-track { border: 2px solid #5a4032; }

body.dark-theme .coop-hp-track {
    border-color: #030712 !important;
}

body.dystopian-theme .coop-hp-track {
    border-color: #00ff66 !important;
}

.coop-round-table-container {
    width: 100%; display: flex; justify-content: center; margin-bottom: 8px;
}
.coop-round-table {
    display: flex; gap: 15px; justify-content: space-evenly; flex-wrap: wrap;
    background: #4E342E; border: 8px solid #3E2723; border-radius: 90px;
    padding: 20px 30px; box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 6px 15px rgba(0,0,0,0.5);
    position: relative; min-height: 140px; width: 100%; max-width: 850px;
}
.coop-round-table::after {
    content: ''; position: absolute; inset: 10px; background: #1b3a1b; 
    border-radius: 80px; box-shadow: inset 0 0 30px rgba(0,0,0,0.9); z-index: 1;
}
.teammate-zone {
    display: flex; flex-direction: column; align-items: center; background: var(--panel-bg);
    border: 2px solid var(--accent-gold); border-radius: 10px; padding: 8px; min-width: 140px;
    z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.5); text-align: center;
}
.teammate-cards {
    display: flex; gap: -12px; margin-top: 6px; min-height: 45px; justify-content: center;
}
.mini-table-card {
    width: 32px; height: 48px; border-radius: 3px; border: 1px solid #111; background: var(--card-bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: normal; box-shadow: -2px 2px 4px rgba(0,0,0,0.5); z-index: 2;
    margin-right: -12px;
}
.mini-table-card:last-child { margin-right: 0; }
.mini-table-card:nth-child(1) { transform: rotate(-8deg) translateY(3px); z-index: 2;}
.mini-table-card:nth-child(2) { transform: rotate(-4deg) translateY(1px); z-index: 3;}
.mini-table-card:nth-child(3) { transform: rotate(0deg) translateY(0px); z-index: 4;}
.mini-table-card:nth-child(4) { transform: rotate(4deg) translateY(1px); z-index: 5;}
.mini-table-card:nth-child(5) { transform: rotate(8deg) translateY(3px); z-index: 6;}

.mini-table-card.face-down { 
    background: transparent url('assets/cards/card-back.png') no-repeat center center; 
    background-size: cover; 
    border: none; 
    image-rendering: pixelated;
}
.mini-table-card.red { color: var(--red-suit); }
.mini-table-card.black { color: var(--black-suit); }
/* #endregion */

/* #region Travel Phase Map Overlay */
.map-view-fullscreen {
    position: fixed; inset: 0; z-index: 250; display: none;
    flex-direction: column; align-items: center;
    justify-content: flex-start;
    padding: 20px; overflow: auto;
    /* A soft vignette plus a faint old-map grid — texture behind the travel map without a photo
       competing with the nodes/path for attention. */
    background-color: #1c1412;
    background-image:
        radial-gradient(ellipse at 50% 25%, #2b211c 0%, #1c1412 65%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 44px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 44px);
}
.map-view-fullscreen.active { display: flex; }
.map-sticky-header {
    position: sticky; top: 0; z-index: 20; flex-shrink: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.map-header {
    background: var(--panel-bg); border: 2px solid var(--accent-gold); border-radius: 12px;
    padding: 12px 24px; display: flex; justify-content: center; flex-wrap: wrap;
    gap: 30px; align-items: center; font-size: 1.2rem; width: 100%;
}
#merchant-wait-banner {
    background: var(--panel-bg); border: 2px solid var(--accent-gold); border-radius: 12px;
    padding: 8px 24px; text-align: center; color: var(--accent-gold); font-weight: normal;
}
#coop-map-svg {
    width: 100%;
    min-width: 1600px;
    min-height: 1000px;
    margin-top: 20px;
    border-radius: 12px;
}

.node-difficulty-legend {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 30;
    background: var(--panel-bg);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.legend-title {
    color: var(--accent-gold);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.legend-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 120px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
    color: var(--text-main);
    font-size: 0.85rem;
}
.legend-icon { font-size: 1.1rem; }
.legend-arrow { color: var(--text-dim); font-size: 1rem; line-height: 1; }
.legend-node.elite { color: var(--accent-red); border: 1px solid var(--accent-red); }
.legend-node.hazard { color: var(--accent-gold); border: 1px solid var(--accent-gold); }
.legend-node.boss { color: var(--accent-red); border: 1px solid var(--accent-red); background: rgba(0,0,0,0.5); font-weight: normal; }
.svg-node { cursor: pointer; transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
.svg-node:hover circle { stroke: #FFF; stroke-width: 4px; }
.svg-node circle { transition: stroke 0.2s, filter 0.2s; }

/* The node(s) a player can actually vote for next pulse (animate.css) so it's obvious where to
   click — transform-box/-origin above keep the scale centered on the node instead of the SVG's
   top-left corner, which is animate.css's assumption for ordinary HTML elements. */

/* A cleared node's border marks it "finished" as the party progresses along the path. */
.svg-node.visited circle { stroke: var(--accent-gold); stroke-width: 3; }

/* Map connections: plain dotted brown by default — the same as an unexplored path always looked —
   turning into a solid white line, with light slowly flowing along it toward the next node, for
   whichever edges the party actually traveled. */
.map-edge { stroke: #5D4037; stroke-width: 3; stroke-dasharray: 4; }
.map-edge.on-path {
    stroke: #fff; stroke-width: 4; stroke-dasharray: 12 8;
    animation: mapEdgeFlow 0.8s linear infinite;
}
@keyframes mapEdgeFlow { to { stroke-dashoffset: -20; } }
/* #endregion */

/* #region Demo Mode Instructional Banner */
#demo-guide {
    display: none; background: rgba(0,0,0,0.7); border: 2px solid var(--accent-blue); padding: 12px 20px;
    border-radius: 10px; margin-bottom: 10px; text-align: center; box-shadow: 0 6px 15px rgba(0,0,0,0.6);
    flex-direction: column; align-items: center; gap: 8px;
}
#demo-guide h3 { margin: 0; color: var(--accent-gold); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px;}
#demo-guide-text { font-size: 1rem; color: var(--text-main); line-height: 1.3; }
/* #endregion */

/* #region Play Area and Play Zone */
.player-area { 
    position: relative !important;
    border-style: solid;
    border-width: 1.4rem;
    border-image-source: url('assets/images/play-area2.png');
    border-image-slice: 45 fill; 
    border-image-repeat: stretch;
    background: transparent; 
    border-radius: 0; 
    padding: clamp(0.2rem, 0.5vw, 0.5rem) clamp(0.5rem, 1vw, 1rem); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 100%; 
    box-sizing: border-box;
    filter: drop-shadow(0 6px 15px rgba(0,0,0,0.6));
    overflow: hidden !important;
    flex-shrink: 0;
}

.player-area > *:not(.matrix-rain-canvas) {
    position: relative;
    z-index: 2;
}

.hud { display: flex; gap: clamp(0.4rem, 1.2vw, 1.2rem); background: rgba(0,0,0,0.60); padding: clamp(0.3rem, 0.5vw, 0.5rem) clamp(0.8rem, 1.2vw, 1.2rem); border-radius: 10px; margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem); align-items: center; justify-content: center; border: 1px solid #3E2723; width: 100%; }
.hud-stat { text-align: center; }
.hud-stat .label { font-size: clamp(0.55rem, 0.65vw, 0.65rem); text-transform: uppercase; color: var(--text-dim); font-weight: normal; }
.hud-stat .value { font-size: clamp(1rem, 1.2vw, 1.2rem); font-weight: normal; color: var(--accent-gold); }

.preview-box { min-height: clamp(26px, 3.5vh, 36px); display: flex; align-items: center; justify-content: center; font-size: clamp(0.85rem, 1vw, 1rem); font-weight: normal; background: rgba(0,0,0,0.60); padding: 0.3rem 1rem; border-radius: 6px; border: 1px dashed #3E2723; margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem); width: 100%; }
.preview-box .highlight { color: var(--accent-gold); margin-left: 6px; }

.play-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: clamp(0.3rem, 0.8vh, 0.6rem);
    padding: 0 clamp(20px, 4vw, 60px);
    min-height: clamp(80px, 8vw, 120px);
    box-sizing: border-box;
}

.card-container { 
    display: flex; 
    gap: clamp(3px, 0.6vw, 8px); 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    z-index: 5; 
    max-width: 100%;
}

.card {
    width: clamp(45px, 4.5vw, 95px); 
    height: clamp(65px, 6.5vw, 140px); 
    border-radius: 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 0; 
    cursor: pointer; 
    transition: transform 0.15s ease, box-shadow 0.15s ease; 
    flex-shrink: 0; 
    position: relative; 
    font-family: 'VT323', monospace; 
    background-color: #fff9c4; 
    background-image: 
        radial-gradient(#d7ccc8 15%, transparent 15%),
        radial-gradient(#d7ccc8 15%, transparent 15%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    border: 3px solid #5D4037; 
    box-shadow: inset 0 0 10px rgba(93, 64, 55, 0.3), 0 6px 12px rgba(0,0,0,0.5); 
}

.card:not(.face-down):hover { 
    transform: translateY(-8px); 
}

.card.face-down { 
    background: transparent url('assets/cards/card-back.png') no-repeat center center; 
    background-size: cover; 
    border: none; 
    cursor: default; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); 
    image-rendering: pixelated;
}        

.play-zone .card:not(.face-down):hover { transform: translateY(-6px); }
.card.selected { 
    transform: translateY(-15px); 
    border-color: var(--accent-gold); 
    box-shadow: 0 0 0 2px var(--accent-gold), 4px 8px 0px rgba(0,0,0,0.4); 
}

.card.red { color: var(--red-suit); }
.card.black { color: var(--black-suit); }

.card-corner { 
    position: absolute;
    top: 2px;   
    left: 4px;  
    font-size: clamp(0.9rem, 1.2vw, 1.3rem); 
    font-weight: normal; 
    line-height: 0.85; 
    text-align: center; 
}

.card-corner.bottom { 
    top: auto; 
    left: auto; 
    bottom: 2px; 
    right: 4px;  
    transform: rotate(180deg); 
}
.card-center { 
    font-size: clamp(1.8rem, 2.8vw, 3.5rem); 
    text-align: center; 
    line-height: 1; 
    filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2)); 
}

.action-row { 
    display: flex; 
    gap: clamp(5px, 0.8vw, 8px); 
    margin-bottom: clamp(0.3rem, 0.5vh, 0.5rem); 
    justify-content: center; 
    flex-wrap: wrap; 
    max-width: 100%; 
}
button { background-color: var(--accent-gold); color: #3E2723; border: none; padding: clamp(5px, 0.7vw, 7px) clamp(10px, 1.2vw, 15px); font-size: clamp(0.8rem, 0.9vw, 0.95rem); font-weight: normal; border-radius: 7px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; font-family: 'Jost', sans-serif;}
button:hover:not(:disabled) { background-color: #FFCA28; transform: translateY(-2px); }
button:disabled { background-color: #5D4037; color: #8D6E63; cursor: not-allowed; transform: none; }
button.btn-danger { background-color: var(--accent-red); color: white; }
button.btn-danger:hover:not(:disabled) { background-color: #EF5350; }
button.btn-utility { background-color: #3e3e52; color: var(--text-main); }
button.btn-utility:hover:not(:disabled) { background-color: #6D4C41; }
button.btn-quit { background-color: #4e342e; border: 1px solid var(--accent-red); color: var(--accent-red); }
button.btn-quit:hover:not(:disabled) { background-color: #d32f2f; color: white; }

.pile-corner { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; z-index: 10; }
.pile-corner.left { left: clamp(8px, 1.5vw, 20px); }
.pile-corner.right { right: clamp(8px, 1.5vw, 20px); }
.pile-box { width: clamp(42px, 4.2vw, 60px); height: clamp(58px, 6vw, 82px); background: #3E2723; border: 2px dashed var(--accent-gold); border-radius: 7px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 3px 12px rgba(0,0,0,0.6); transition: transform 0.2s ease, border-color 0.2s ease; position: relative; z-index: 2; }
.pile-box:hover { transform: scale(1.05); border-color: #fff; }
.pile-title { font-size: clamp(0.55rem, 0.65vw, 0.7rem); font-weight: normal; color: #EFEBE9; margin-top: 4px; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.8);}
.pile-badge { font-size: clamp(0.9rem, 1.1vw, 1.1rem); font-weight: normal; color: var(--text-main); }
.pig-mascot { font-size: clamp(1.6rem, 2.5vw, 2.8rem); position: absolute; top: clamp(-24px, -3.5vh, -36px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; pointer-events: none; }
.pile-corner:hover .pig-mascot { transform: translateY(-8px) rotate(5deg) scale(1.1); }
.mud-splash { animation: splashAnim 0.5s ease-out; }
@keyframes splashAnim { 0% { box-shadow: 0 0 0px 0px rgba(93, 64, 55, 0.8); background-color: #3E2723; } 50% { box-shadow: 0 0 25px 15px rgba(93, 64, 55, 0); background-color: #5D4037; transform: scale(1.15) rotate(-5deg); } 100% { box-shadow: 0 0 0px 0px rgba(93, 64, 55, 0); } }

/* #endregion */

/* #region menu btns and tabs */

.menu-btn { width: 240px; padding: 10px; font-size: 1.2rem; border-radius: 12px; margin-bottom: 0; font-family: 'Jost', sans-serif; font-weight: normal;}
.menu-btn-disabled { background-color: #3E2723; color: #5D4037; border: 2px dashed #5D4037; cursor: not-allowed; }
.menu-btn-disabled:hover { transform: none; background-color: #3E2723; }

.drawer-overlay, .game-over-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); z-index: 400; display: none; justify-content: center; align-items: center; }
.drawer-overlay.active, .game-over-overlay.active { display: flex; }
.drawer-content { background: var(--panel-bg); border: 2px solid var(--accent-gold); border-radius: 14px; width: 90%; max-width: 900px; max-height: 85vh; padding: 1.5rem; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.8); overflow-y: auto; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3E2723; padding-bottom: 0.8rem; margin-bottom: 1rem; }
#drawer-overlay .drawer-content {
    max-height: 94vh;
    height: auto;
    padding: 1.1rem 1.4rem;
    overflow: hidden;
}

#drawer-overlay .drawer-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}

.drawer-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0;
}

.drawer-suit-group {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.dark-theme .drawer-suit-group {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dystopian-theme .drawer-suit-group {
    background: rgba(15, 28, 21, 0.7);
    border-color: #1b3d2b;
}

.drawer-suit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 4px;
}

.drawer-suit-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.drawer-suit-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.drawer-suit-icon.red {
    color: var(--red-suit);
}
.drawer-suit-icon.black {
    color: #e0e0e0;
}
body.dark-theme .drawer-suit-icon.black {
    color: #f1f5f9;
}
body.dystopian-theme .drawer-suit-icon.black {
    color: #00e5ff;
}
body.dystopian-theme .drawer-suit-icon.red {
    color: #ff3344;
}

.drawer-suit-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-gold);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 213, 79, 0.25);
    border-radius: 12px;
    padding: 2px 9px;
    letter-spacing: 0.5px;
}

.drawer-suit-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 76px;
}

.drawer-suit-empty {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.7;
    padding: 1rem 0.5rem;
}

.drawer-empty-msg {
    color: var(--text-dim);
    padding: 2rem;
    text-align: center;
    font-size: 1.1rem;
}

.mini-card {
    background: var(--card-bg);
    width: 52px;
    height: 76px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 4px;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--black-suit);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mini-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.mini-card.red {
    color: var(--red-suit);
}
.mini-card.black {
    color: var(--black-suit);
}

.mini-card-corner {
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;
}
.mini-card-corner.top {
    text-align: left;
}
.mini-card-corner.bottom {
    text-align: right;
}

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

.mini-card-enh-badge {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.46rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
    line-height: 1;
}

/* Enhancements on mini cards */
.mini-card.enh-lucky { border-color: #4FC3F7 !important; box-shadow: inset 0 0 6px rgba(79, 195, 247, 0.4), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-mult { border-color: #EF5350 !important; box-shadow: inset 0 0 6px rgba(239, 83, 80, 0.4), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-bonus { border-color: #66BB6A !important; box-shadow: inset 0 0 6px rgba(102, 187, 106, 0.4), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-wild { border-color: #AB47BC !important; box-shadow: inset 0 0 6px rgba(171, 71, 188, 0.4), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-steel { border-color: #2196F3 !important; box-shadow: inset 0 0 6px rgba(33, 150, 243, 0.6), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-glass { border-color: #4DD0E1 !important; box-shadow: inset 0 0 6px rgba(77, 208, 225, 0.5), 0 2px 6px rgba(0,0,0,0.3) !important; opacity: 0.92; }
.mini-card.enh-gold { border-color: #FFD54F !important; box-shadow: inset 0 0 6px rgba(255, 213, 79, 0.5), 0 2px 6px rgba(0,0,0,0.3) !important; }
.mini-card.enh-stone { border-color: #8D8D8D !important; background-color: #cfcfcf !important; color: #424242 !important; }

/* Theme overrides for mini cards */
body.dark-theme .mini-card {
    background-color: #cbd5e1;
    border-color: #1F2937;
    color: #1F2937;
}
body.dark-theme .mini-card.black {
    color: #1F2937;
}
body.dark-theme .mini-card.red {
    color: var(--red-suit);
}

body.dystopian-theme .mini-card {
    background-color: #0f1c15 !important;
    border: 1px solid #1b3d2b !important;
}
body.dystopian-theme .mini-card.black {
    color: #00e5ff !important;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4) !important;
}
body.dystopian-theme .mini-card.red {
    color: #ff3344 !important;
    text-shadow: 0 0 4px rgba(255, 51, 68, 0.4) !important;
}

@media (max-width: 600px) {
    .drawer-content { width: 96%; padding: 1rem; }
    .mini-card { width: 46px; height: 70px; padding: 3px 2px; font-size: 0.7rem; }
    .mini-card-center { font-size: 1.15rem; }
    .drawer-suit-title { font-size: 0.95rem; }
}

.sabotage-tabs { display: flex; gap: 10px; margin-bottom: 15px; }
.tab-btn { flex: 1; padding: 10px; font-size: 1.1rem; background: #3E2723; color: var(--text-dim); border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: normal;}
.tab-btn.active { background: var(--accent-gold); color: #3E2723; border-color: var(--accent-gold); }
.sabotage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow-y: auto; padding: 8px 10px 4px 4px; max-height: 60vh;}
.sabotage-card { background: #3E2723; border: 2px solid #5D4037; border-radius: 8px; padding: 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.2s, border-color 0.2s; cursor: pointer; position: relative;}
.sabotage-card:hover { transform: translateY(-4px); border-color: var(--accent-gold); }
.sabotage-card h3 { margin: 0; font-size: 1.1rem; color: var(--text-main); }
.sabotage-card p { margin: 0; font-size: 0.8rem; color: var(--accent-blue); line-height: 1.2; }
.sabotage-card.modifier { border-color: var(--accent-pink); }
.sabotage-card.modifier:hover { border-color: #fff; }
.sabotage-card.modifier p { color: var(--accent-pink); }
.sabotage-card.tarot { border-color: #AB47BC; }
.sabotage-card.tarot:hover { border-color: #E1BEE7; }
.sabotage-card.tarot p { color: #CE93D8; }

/* --- Tarot Card Enhancements --- */
.card-enh-badge {
    position: absolute;
    top: 2px; left: 0; right: 0;
    text-align: center;
    font-size: clamp(0.5rem, 0.6vw, 0.65rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}
.card.enh-lucky { border-color: #4FC3F7; box-shadow: inset 0 0 10px rgba(79, 195, 247, 0.4), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-mult { border-color: #EF5350; box-shadow: inset 0 0 10px rgba(239, 83, 80, 0.4), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-bonus { border-color: #66BB6A; box-shadow: inset 0 0 10px rgba(102, 187, 106, 0.4), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-wild { border-color: #AB47BC; box-shadow: inset 0 0 10px rgba(171, 71, 188, 0.4), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-steel { border-color: #B0BEC5; box-shadow: inset 0 0 10px rgba(176, 190, 197, 0.5), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-glass { border-color: #4DD0E1; box-shadow: inset 0 0 10px rgba(77, 208, 225, 0.5), 0 6px 12px rgba(0,0,0,0.5); opacity: 0.92; }

/* The Crimson boss debuff — heart/diamond cards score for nothing while it's up. The jagged
   "torn" slash plus a desaturated wash reads at a glance as "this card is dead weight." */
.card.crimson-debuffed { filter: grayscale(65%) brightness(0.8); }
.card.crimson-debuffed::after {
    content: ''; position: absolute; inset: -3px; pointer-events: none; border-radius: 4px; z-index: 3;
    background: repeating-linear-gradient(115deg, transparent 0px, transparent 5px, rgba(20,10,10,0.9) 5px, rgba(20,10,10,0.9) 7px);
    clip-path: polygon(0 45%, 9% 51%, 17% 43%, 26% 52%, 35% 41%, 44% 53%, 53% 42%, 62% 54%, 71% 43%, 80% 52%, 89% 41%, 100% 50%, 100% 60%, 89% 51%, 80% 62%, 71% 53%, 62% 64%, 53% 52%, 44% 63%, 35% 51%, 26% 62%, 17% 53%, 9% 61%, 0 55%);
}
.card-debuff-badge {
    position: absolute; top: 3px; right: 4px; font-size: 0.65rem; font-weight: normal; color: #fff;
    background: rgba(198, 40, 40, 0.92); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.5px;
    z-index: 4; box-shadow: 0 2px 4px rgba(0,0,0,0.5); transform: rotate(6deg);
}
.card.enh-gold { border-color: #FFD54F; box-shadow: inset 0 0 10px rgba(255, 213, 79, 0.5), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-stone { border-color: #8D8D8D; background-color: #cfcfcf; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 6px 12px rgba(0,0,0,0.5); }
.card.enh-lucky.selected, .card.enh-mult.selected, .card.enh-bonus.selected, .card.enh-wild.selected,
.card.enh-steel.selected, .card.enh-glass.selected, .card.enh-gold.selected, .card.enh-stone.selected {
    border-color: var(--accent-gold);
}

/* --- Tarot Consumable Tray --- */
#btn-use-tarot { background-color: #AB47BC; color: white; }
#btn-use-tarot:hover:not(:disabled) { background-color: #BA68C8; }
.sabotage-card .cost-badge { position: absolute; top: 8px; right: 8px; background: var(--accent-gold); color: #222; font-weight: normal; border-radius: 6px; padding: 2px 6px; font-size: 0.75rem; }

.card-img-wrapper { height: 90px; width: 100%; border-radius: 6px; display: flex; justify-content: center; align-items: center; background-color: var(--panel-bg); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); margin-bottom: 8px; overflow: hidden; border: 1px solid #2b201a; }
.card-img-wrapper img { height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); transition: transform 0.2s ease; }
.sabotage-card:hover .card-img-wrapper img { transform: scale(1.1) rotate(-3deg); }

.game-over-box { background: var(--panel-bg); border: 3px solid var(--accent-gold); padding: 3rem; border-radius: 15px; text-align: center; }
.game-over-box h1 { margin: 0 0 1rem 0; font-size: 3rem; }
/* #endregion */

/* #region Animations */

.floating-text { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 3rem; font-weight: normal; color: var(--accent-gold); text-align: center; text-shadow: 0px 4px 15px rgba(0,0,0,0.8), 0px 0px 10px #f1c40f; pointer-events: none; z-index: 50; animation: popScore 1.5s ease-out forwards; }
.pig-score-icon { font-size: 4rem; display: block; line-height: 1; margin-bottom: -10px; }
.life-lost-banner { color: var(--accent-red); text-shadow: 0px 4px 15px rgba(0,0,0,0.8), 0px 0px 14px #e53935; z-index: 60; animation: popScore 1.6s ease-out forwards; }

/* Snappier default for every other modal's pop-in/pop-out and the lobby's reject-shake
   (js/effects.js initOverlayPopAnimations, js/multiplayer.js shakeLobbyBox) — animate.css's
   default 1s reads as sluggish for a small popup. */
.drawer-content, .game-over-box, .lobby-box { --animate-duration: 0.4s; }
@keyframes popScore { 0% { opacity: 0; transform: translate(-50%, -10%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 80% { opacity: 1; transform: translate(-50%, -55%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
#log-feed { margin-top: 0.1rem; margin-bottom: 1.1rem; font-size: clamp(0.7rem, 0.85vw, 0.85rem); color: var(--accent-gold); text-align: center; min-height: 18px; font-weight: normal;}

.coin-loss-flash { animation: coinLossFlash 0.6s ease-out; }
@keyframes coinLossFlash { 0% { color: var(--accent-red); transform: scale(1.3); } 100% { color: inherit; transform: scale(1); } }
.coin-loss-popup {
    position: fixed; transform: translate(-50%, -10px); font-size: 1.1rem; font-weight: normal;
    color: var(--accent-red); text-shadow: 0 2px 6px rgba(0,0,0,0.8); pointer-events: none;
    z-index: 900; animation: coinLossPopup 1s ease-out forwards;
}
@keyframes coinLossPopup { 0% { opacity: 0; transform: translate(-50%, 0px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -35px); } }

.card.anim-deal { animation: slideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; }
.card.anim-play { animation: flyOutUp 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; pointer-events: none; }
.card.anim-discard { animation: flyOutDown 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; pointer-events: none; }
.card.anim-sort-out { animation: flipOut 0.2s ease-in forwards; pointer-events: none; }
.card.anim-sort-in { animation: flipIn 0.25s ease-out backwards; }

@keyframes slideIn { from { opacity: 0; transform: translateY(-60px) scale(0.8) rotate(-5deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
@keyframes flyOutUp { to { opacity: 0; transform: translateY(-150px) scale(1.1) rotate(5deg); } }
@keyframes flyOutDown { to { opacity: 0; transform: translateY(150px) scale(0.9) rotate(-5deg); } }
@keyframes flipOut { to { transform: scale(0.9) rotateY(90deg); opacity: 0; } }
@keyframes flipIn { from { transform: scale(0.9) rotateY(-90deg); opacity: 0; } to { transform: scale(1) rotateY(0deg); opacity: 1; } }

@media (max-width: 950px) {
    body { overflow-y: auto; height: auto; align-items: flex-start; padding: 10px; }
    .game-wrapper { flex-wrap: wrap; height: auto; max-height: none; gap: 15px; }
    .main-content { order: -1; width: 100%; min-width: 100%; } 
    .sidebar { width: 100%; max-width: 100%; height: auto; }
    .play-zone { padding: 0; flex-wrap: wrap; gap: 15px; }
    .pile-corner { position: relative; top: auto; transform: none; }
    .pile-corner.left { left: auto; }
    .pile-corner.right { right: auto; }
}

/* #endregion */

/* #region 16-Bit Audio Settings Panel */
.audio-control-panel {
    margin-top: 2rem; 
    background: #3e2723; 
    border: 2px solid #271613;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
}

.audio-icon { font-size: 1.4rem; cursor: pointer; user-select: none; transition: transform 0.1s; }
.audio-icon:hover { transform: scale(1.15); }

.volume-slider { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; }
.volume-slider::-webkit-slider-runnable-track { width: 100%; height: 10px; background: #1a1514; border: 2px solid #271613; border-radius: 4px; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 12px; background: var(--accent-gold); border: 2px solid #271613; border-radius: 3px; margin-top: -6px; }
.volume-slider:focus { outline: none; }

.settings-text-btn {
    text-align: center;
    cursor: pointer;
    color: var(--text-dim);
    font-weight: normal;
    font-size: 0.95rem;
    margin-top: auto; 
    margin-bottom: 12px;
    transition: color 0.15s ease;
}

.settings-text-btn:hover {
    color: var(--accent-gold);
}

#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
    z-index: -1;       
    pointer-events: none;
}
/* #endregion */

/* #region Chat */

#chat-widget {
    position: absolute;
    bottom: clamp(0.4rem, 0.8vw, 0.8rem); 
    left: clamp(0.4rem, 0.8vw, 0.8rem);
    right: clamp(0.4rem, 0.8vw, 0.8rem);
    z-index: 1500; 
    background: var(--panel-bg);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.6); 
}
#chat-widget.chat-collapsed { max-height: 42px; } 
#chat-widget.chat-expanded { max-height: 300px; height: 300px; }

.chat-header {
    background: #3E2723;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    font-weight: normal;
    color: var(--accent-gold);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.chat-header:hover { background: #5D4037; }

.chat-body {
    flex-grow: 1;
    padding: 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0,0,0,0.2);
}

.chat-msg {
    font-size: 0.8rem;
    padding: 6px 8px;
    border-radius: 8px;
    max-width: 90%;
    word-wrap: break-word;
    line-height: 1.2;
}
.chat-msg.self { background: var(--accent-blue); color: #111; align-self: flex-end; }
.chat-msg.other { background: #5D4037; color: var(--text-main); align-self: flex-start; }

.chat-footer { display: flex; padding: 6px; background: #3E2723; gap: 4px; }
.chat-footer input {
    flex-grow: 1; background: #271613; border: 1px solid #5D4037; color: #fff; border-radius: 4px; padding: 4px 8px; font-family: 'Jost', sans-serif;
}
/* #endregion */

/* #region Dystopian Cyber-Theme */
body.dystopian-theme {
    --bg-color: #0d1310;
    --panel-bg: #15221b;
    --card-bg: #d0ded5;
    --accent-gold: #00ff66;
    --accent-blue: #00e5ff; 
    --accent-red: #ff3344;
    --accent-pink: #ff007f;
    --accent-green: #00ff88;
    --text-main: #e2f7ea;
    --text-dim: #52796f;
    --black-suit: #0b1510;
    --red-suit: #ff2a4b;

    background: url("assets/images/dystopian.png") no-repeat center center fixed !important;
    background-size: cover !important;
}

body.dystopian-theme .lobby-overlay.main-menu-screen {
    background: url("assets/images/dystopian-menu.png") no-repeat center center fixed !important;
    background-size: cover !important;
}

/* Dystopian toggle switch in top-left */
.dystopian-toggle-container {
    position: absolute;
    top: 20px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 350;
    font-family: inherit;
    user-select: none;
}

.credits-toggle-container {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 350;
}

.dystopian-toggle-container label {
    font-size: 0.95rem;
    font-weight: normal;
    color: var(--text-main);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    cursor: pointer;
}

body.dystopian-theme .dystopian-toggle-container label {
    color: #00ff66;
    text-shadow: 0 0 8px rgba(0,255,102,0.6);
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider {
    position: absolute; cursor: pointer; inset: 0;
    background-color: #271613;
    border: 2px solid #5d4037;
    border-radius: 20px;
    transition: 0.25s;
}
.theme-slider:before {
    position: absolute; content: "";
    height: 14px; width: 14px; left: 3px; bottom: 3px;
    background-color: #ccc;
    border-radius: 50%;
    transition: 0.25s;
}
input:checked + .theme-slider {
    background-color: #0d2818;
    border-color: #00ff66;
    box-shadow: 0 0 10px rgba(0,255,102,0.4);
}
input:checked + .theme-slider:before {
    transform: translateX(20px);
    background-color: #00ff66;
}

/* Dystopian Sidebar & Panel Overrides */
body.dystopian-theme .sidebar {
    background: rgba(10, 16, 13, 0.75) !important;
    border-color: #00ff66 !important;
    box-shadow: inset 0 0 15px rgba(0, 255, 102, 0.15), 0 8px 20px rgba(0, 0, 0, 0.9) !important;
}

body.dystopian-theme .sidebar h2 {
    border-bottom: 2px dashed #00ff66 !important;
    color: #00ff66 !important;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
}

body.dystopian-theme .stat-block {
    background: rgba(0, 255, 102, 0.05) !important;
    border-color: #1b3d2b !important;
}

body.dystopian-theme .stat-header {
    border-bottom: 1px solid #1b3d2b !important;
}

body.dystopian-theme .hand-row {
    border-bottom: 1px solid #162b20 !important;
}

body.dystopian-theme .settings-text-btn:hover {
    color: #00ff66 !important;
}

/* Dystopian Chat Box & Bet Bubble */
body.dystopian-theme .sidebar-chat-bubble {
    background: #112419 !important;
    border-color: #00ff66 !important;
}

body.dystopian-theme .sidebar-chat-bubble:hover {
    background: #193826 !important;
}

body.dystopian-theme .sidebar-chat-bubble span {
    color: #00ff66 !important;
}

body.dystopian-theme .sidebar-chat-bubble::after {
    border-color: #00ff66 transparent transparent transparent !important;
}

body.dystopian-theme #chat-widget {
    background: #0d1512 !important;
    border-color: #00ff66 !important;
}

body.dystopian-theme .chat-header,
body.dystopian-theme .chat-footer {
    background: #162b20 !important;
    color: #00ff66 !important;
}

body.dystopian-theme .chat-footer input {
    background: #09120e !important;
    border: 1px solid #00ff66 !important;
    color: #e2f7ea !important;
}

body.dystopian-theme .chat-msg.other {
    background: #193826 !important;
    color: #e2f7ea !important;
}

/* Mud Pit & Tug Track */
body.dystopian-theme .mud-pit {
    background: #080d0a !important;
    border-color: #00ff66 !important;
    box-shadow: inset 0 0 20px rgba(0, 255, 102, 0.2), 0 0 15px rgba(0, 0, 0, 0.9) !important;
}

body.dystopian-theme .mud-pit > div:first-child {
    background: #0d1512 !important;
    border-color: #00ff66 !important;
    color: #00ff66 !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6) !important;
}

body.dystopian-theme .tug-track {
    background: #040806 !important;
    border-color: #1b3d2b !important;
    box-shadow: inset 0 0 8px rgba(0, 255, 102, 0.3) !important;
}

body.dystopian-theme .tug-labels {
    color: #52796f !important;
}

body.dystopian-theme #tug-score-display {
    color: #00ff66 !important;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.5) !important;
}

/* Play Area, HUD, & Preview Box */
body.dystopian-theme .player-area {
    border-image-source: none !important;
    border: 2px solid #00ff66 !important;
    background: rgba(10, 16, 13, 0.85) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.15), inset 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

body.dystopian-theme .hud,
body.dystopian-theme .preview-box {
    background: rgba(4, 8, 6, 0.75) !important;
    border-color: #1b3d2b !important;
}

body.dystopian-theme .hud-stat .value,
body.dystopian-theme .preview-box .highlight {
    color: #00ff66 !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.5) !important;
}

/* Playing Cards */
body.dystopian-theme .card {
    background-color: #0f1c15 !important;
    background-image: none !important;
    border: 2px solid #1b3d2b !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
}

/* body.dystopian-theme .card above uses !important on border, which unconditionally wipes out
   every enhancement's border color unless restated here with matching !important. Same colors
   as the day-theme rules, just re-asserted for this theme. */
body.dystopian-theme .card.enh-lucky { border-color: #4FC3F7 !important; box-shadow: inset 0 0 10px rgba(79, 195, 247, 0.4), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-mult { border-color: #EF5350 !important; box-shadow: inset 0 0 10px rgba(239, 83, 80, 0.4), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-bonus { border-color: #66BB6A !important; box-shadow: inset 0 0 10px rgba(102, 187, 106, 0.4), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-wild { border-color: #AB47BC !important; box-shadow: inset 0 0 10px rgba(171, 71, 188, 0.4), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-steel { border-color: #B0BEC5 !important; box-shadow: inset 0 0 10px rgba(176, 190, 197, 0.5), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-glass { border-color: #4DD0E1 !important; box-shadow: inset 0 0 10px rgba(77, 208, 225, 0.5), 0 4px 10px rgba(0, 0, 0, 0.8) !important; opacity: 0.92 !important; }
body.dystopian-theme .card.enh-gold { border-color: #FFD54F !important; box-shadow: inset 0 0 10px rgba(255, 213, 79, 0.5), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }
body.dystopian-theme .card.enh-stone { border-color: #8D8D8D !important; background-color: #cfcfcf !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 4px 10px rgba(0, 0, 0, 0.8) !important; }

body.dystopian-theme .card.black {
    color: #00e5ff !important;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4) !important;
}

body.dystopian-theme .card.red {
    color: #ff3344 !important;
    text-shadow: 0 0 4px rgba(255, 51, 68, 0.4) !important;
}

body.dystopian-theme .card.selected {
    border-color: #00ff66 !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.7), inset 0 0 8px rgba(0, 255, 102, 0.3) !important;
    transform: translateY(-15px) !important;
}

/* Discard & Draw Piles */
body.dystopian-theme .pile-box {
    background: #080d0a !important;
    border-color: #00ff66 !important;
}

body.dystopian-theme .pile-badge {
    color: #00ff66 !important;
}

body.dystopian-theme .pile-title {
    color: #e2f7ea !important;
}

/* Action & Control Buttons */
body.dystopian-theme button#btn-play {
    background-color: #00ff66 !important;
    color: #050d08 !important;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.4) !important;
}

body.dystopian-theme button#btn-play:hover:not(:disabled) {
    background-color: #33ff88 !important;
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.7) !important;
}

body.dystopian-theme button.btn-utility {
    background-color: #0d1a13 !important;
    border: 1px solid #1b3d2b !important;
    color: #e2f7ea !important;
}

body.dystopian-theme button.btn-utility:hover:not(:disabled) {
    border-color: #00ff66 !important;
    color: #00ff66 !important;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.3) !important;
}

body.dystopian-theme button.btn-danger {
    background-color: #330b10 !important;
    border: 1px solid #ff3344 !important;
    color: #ff3344 !important;
}

body.dystopian-theme button.btn-danger:hover:not(:disabled) {
    background-color: #ff3344 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 51, 68, 0.6) !important;
}

body.dystopian-theme button:disabled {
    background-color: #0a110d !important;
    border-color: #14241b !important;
    color: #2e4a3b !important;
}

/* Matrix Rain & Ambient Canvas */
.matrix-rain-canvas {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

body:not(.dark-theme):not(.dystopian-theme) .matrix-rain-canvas {
    opacity: 0.65;
}

body.dark-theme .matrix-rain-canvas {
    opacity: 0.75;
}

body.dystopian-theme .matrix-rain-canvas {
    opacity: 0.45;
}

body.dystopian-theme .stat-block,
body.dystopian-theme .hand-row {
    background: rgba(0, 255, 102, 0.03) !important;
}

 /* Dystopian styling for Settings modal toggle row */
body.dystopian-theme .settings-dystopian-row {
    background: rgba(0, 255, 102, 0.06) !important;
    border-color: #1b3d2b !important;
}

body.dystopian-theme .settings-dystopian-row span {
    color: #00ff66 !important;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
}

/* Dystopian Pure CSS Circuit Card Back */
@keyframes cyberCorePulse {
    0%, 100% {
        box-shadow: 0 0 10px #00ff66, 0 0 20px rgba(0, 255, 102, 0.4), inset 0 0 8px #00ff66;
        border-color: #00ff66;
    }
    50% {
        box-shadow: 0 0 4px #00e5ff, 0 0 10px rgba(0, 229, 255, 0.3), inset 0 0 3px #00e5ff;
        border-color: #00e5ff;
    }
}

@keyframes dataStream {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 0 20px, 0 0, 0 0;
    }
}

body.dystopian-theme .card.face-down,
body.dystopian-theme #opponent-hand-container .card.face-down {
    background-color: #080d0a !important;
    background-image: 
        repeating-linear-gradient(0deg, rgba(0, 255, 102, 0.05) 0px, rgba(0, 255, 102, 0.05) 1px, transparent 1px, transparent 10px),
        linear-gradient(45deg, rgba(0, 255, 102, 0.08) 25%, transparent 25%, transparent 75%, rgba(0, 255, 102, 0.08) 75%),
        radial-gradient(circle at 50% 50%, #0d1a13 0%, #050806 100%) !important;
    background-size: 100% 20px, 16px 16px, 100% 100% !important;
    animation: dataStream 4s linear infinite;
    border: 2px solid #00ff66 !important;
    border-radius: 6px !important;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.9) !important;
    position: relative;
    overflow: hidden;
    color: transparent !important;
}

body.dystopian-theme .card.face-down::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0, 255, 102, 0.3);
    border-radius: 4px;
    pointer-events: none;
    background: 
        linear-gradient(to right, #00ff66 2px, transparent 2px) 0 0,
        linear-gradient(to right, #00ff66 2px, transparent 2px) 0 100%,
        linear-gradient(to left, #00ff66 2px, transparent 2px) 100% 0,
        linear-gradient(to left, #00ff66 2px, transparent 2px) 100% 100%,
        linear-gradient(to bottom, #00ff66 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, #00ff66 2px, transparent 2px) 100% 0,
        linear-gradient(to top, #00ff66 2px, transparent 2px) 0 100%,
        linear-gradient(to top, #00ff66 2px, transparent 2px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 8px 8px;
}

body.dystopian-theme .card.face-down::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #0d1a13;
    border: 2px solid #00ff66;
    border-radius: 3px;
    animation: cyberCorePulse 2.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
}

body.dystopian-theme .mini-table-card.face-down {
    background: #080d0a !important;
    border: 1px solid #00ff66 !important;
    box-shadow: 0 0 6px rgba(0, 255, 102, 0.3) !important;
    position: relative;
}

body.dystopian-theme .mini-table-card.face-down::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #0d1a13;
    border: 1.5px solid #00ff66;
    animation: cyberCorePulse 2.5s infinite ease-in-out;
}

/* Dystopian Button & Tab Hover Overrides */
body.dystopian-theme button:hover:not(:disabled) {
    background-color: #00ff66 !important;
    color: #050d08 !important;
    box-shadow: 0 0 14px rgba(0, 255, 102, 0.7) !important;
}

body.dystopian-theme .menu-btn {
    background-color: #0d1a13 !important;
    color: #00ff66 !important;
    border: 2px solid #00ff66 !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.25) !important;
}

body.dystopian-theme .menu-btn:hover:not(:disabled) {
    background-color: #00ff66 !important;
    color: #050d08 !important;
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.8) !important;
}

body.dystopian-theme .lobby-box button:not(.btn-danger):not(.btn-utility),
body.dystopian-theme .drawer-content button:not(.btn-danger):not(.btn-utility),
body.dystopian-theme .game-over-box button {
    background-color: #00ff66 !important;
    color: #050d08 !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.3) !important;
}

body.dystopian-theme .lobby-box button:not(.btn-danger):not(.btn-utility):hover:not(:disabled),
body.dystopian-theme .drawer-content button:not(.btn-danger):not(.btn-utility):hover:not(:disabled),
body.dystopian-theme .game-over-box button:hover:not(:disabled) {
    background-color: #33ff88 !important;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.7) !important;
}

body.dystopian-theme .tab-btn {
    background: #09120e !important;
    color: #52796f !important;
    border: 2px solid #162b20 !important;
}

body.dystopian-theme .tab-btn:hover {
    color: #00ff66 !important;
    border-color: #00ff66 !important;
}

body.dystopian-theme .tab-btn.active {
    background: #00ff66 !important;
    color: #050d08 !important;
    border-color: #00ff66 !important;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.5) !important;
}

body.dystopian-theme .sabotage-card {
    background: #09120e !important;
    border-color: #1b3d2b !important;
}

body.dystopian-theme .sabotage-card:hover {
    border-color: #00ff66 !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4) !important;
}

body.dystopian-theme .sabotage-card .cost-badge {
    background: #00ff66 !important;
    color: #050d08 !important;
}

/* Modals & Inputs */
body.dystopian-theme .lobby-box,
body.dystopian-theme .drawer-content,
body.dystopian-theme .game-over-box {
    background: #0d1512 !important;
    border: 2px solid #00ff66 !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.25), inset 0 0 15px rgba(0, 0, 0, 0.8) !important;
}

body.dystopian-theme .drawer-header {
    border-bottom: 1px solid #1b3d2b !important;
}

body.dystopian-theme .lobby-box h1,
body.dystopian-theme .lobby-box h2,
body.dystopian-theme .drawer-header h2,
body.dystopian-theme .game-over-box h1 {
    color: #00ff66 !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.5) !important;
}

body.dystopian-theme .lobby-input {
    background: #080d0a !important;
    border: 1px solid #00ff66 !important;
    color: #00ff66 !important;
    box-shadow: inset 0 0 8px rgba(0, 255, 102, 0.2) !important;
    font-family: monospace, inherit !important;
}

body.dystopian-theme .lobby-input:focus {
    outline: none !important;
    border-color: #33ff88 !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.5), inset 0 0 8px rgba(0, 255, 102, 0.3) !important;
}

body.dystopian-theme #leaderboard-overlay .drawer-content > div:last-child {
    border: 1px solid #1b3d2b !important;
    background: rgba(8, 13, 10, 0.8) !important;
}

body.dystopian-theme #leaderboard-overlay thead tr {
    background: #112419 !important;
    color: #00ff66 !important;
    border-bottom: 2px solid #00ff66 !important;
}

body.dystopian-theme #leaderboard-overlay tbody tr {
    border-bottom: 1px solid #162b20 !important;
}

/* Button Contrast & Hovers */
body.dystopian-theme button:hover:not(:disabled),
body.dystopian-theme button:hover:not(:disabled) * {
    color: #050d08 !important;
    text-shadow: none !important;
}

body.dystopian-theme button.btn-danger,
body.dystopian-theme button.btn-quit {
    background-color: #22080a !important;
    border: 1px solid #ff3344 !important;
    color: #ff3344 !important;
}

body.dystopian-theme button.btn-danger:hover:not(:disabled),
body.dystopian-theme button.btn-danger:hover:not(:disabled) *,
body.dystopian-theme button.btn-quit:hover:not(:disabled),
body.dystopian-theme button.btn-quit:hover:not(:disabled) * {
    background-color: #ff2244 !important;
    border-color: #ff2244 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 34, 68, 0.7) !important;
}

body.dystopian-theme button.btn-utility {
    background-color: #0d1a13 !important;
    border: 1px solid #1b3d2b !important;
    color: #e2f7ea !important;
}

body.dystopian-theme button.btn-utility:hover:not(:disabled),
body.dystopian-theme button.btn-utility:hover:not(:disabled) * {
    background-color: #00ff66 !important;
    border-color: #00ff66 !important;
    color: #050d08 !important;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.6) !important;
}

/* Audio Settings Sliders */
body.dystopian-theme .volume-slider::-webkit-slider-runnable-track {
    background: #080d0a !important;
    border: 2px solid #1b3d2b !important;
    box-shadow: inset 0 0 6px rgba(0, 255, 102, 0.2) !important;
}

body.dystopian-theme .volume-slider::-moz-range-track {
    background: #080d0a !important;
    border: 2px solid #1b3d2b !important;
    box-shadow: inset 0 0 6px rgba(0, 255, 102, 0.2) !important;
}

body.dystopian-theme .volume-slider::-webkit-slider-thumb {
    background: #00ff66 !important;
    border: 2px solid #080d0a !important;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.8) !important;
}

body.dystopian-theme .volume-slider::-moz-range-thumb {
    background: #00ff66 !important;
    border: 2px solid #080d0a !important;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.8) !important;
}

body.dystopian-theme .audio-icon:hover {
    filter: drop-shadow(0 0 6px #00ff66);
}

/* #endregion */

/* #region Asset Preloader */

#preloader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #1a1412;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s;
}

#preloader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-box {
    text-align: center;
    color: var(--text-main, #efebe9);
    font-family: inherit;
}

.preloader-spinner {
    font-size: 3.5rem;
    animation: bouncePig 1s infinite alternate cubic-bezier(0.5, 0.05, 1, 0.5);
    margin-bottom: 10px;
}

@keyframes bouncePig {
    from { transform: translateY(0); }
    to { transform: translateY(-16px); }
}

.progress-bar-container {
    width: 280px;
    height: 14px;
    background: #3e2723;
    border-radius: 8px;
    border: 2px solid var(--accent-gold, #ffd54f);
    overflow: hidden;
    margin: 15px auto 8px auto;
}

#preloader-bar {
    width: 0%;
    height: 100%;
    background: var(--accent-gold, #ffd54f);
    transition: width 0.15s ease;
}

#preloader-text {
    font-size: 0.9rem;
    color: var(--text-dim, #bcaaa4);
    font-family: monospace;
}

/* #endregion */

/* #region Joker Animations Right Sidebar */

@keyframes jokerPulseTrigger {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px var(--accent-gold)); }
    50% { transform: scale(1.15) rotate(-3deg); filter: drop-shadow(0 0 14px var(--accent-gold)); border-color: var(--accent-gold); background: rgba(255, 213, 79, 0.25); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--accent-gold)); }
}

.micro-joker.trigger-pulse {
    animation: jokerPulseTrigger 0.6s ease-in-out;
    border-color: var(--accent-gold) !important;
    z-index: 50;
}

/* #endregion */

/* #region Floating Score Animations */

/* Dims the board while the score breakdown plays, and blocks clicks to it so the buildup reads
   as a deliberate "the game is showing you something" beat rather than a passive toast. */
.score-calc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1999;
    animation: scoreBackdropFadeIn 0.25s ease-out forwards;
}

.score-backdrop-exit {
    animation: scoreBackdropFadeOut 0.35s ease-in forwards !important;
}

@keyframes scoreBackdropFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scoreBackdropFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Frameless Floating Multiplier Lockup --- */
.score-calc-overlay {
    position: fixed;
    top: 57%; /* Clears the mud pit and tug pig marker completely */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none;
    z-index: 2000;
    text-align: center;
    animation: floatingPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Names the Joker currently applying and what it just did — the whole point of this feature */
.score-calc-joker-line {
    min-height: 1.6rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: normal;
}

.score-joker-name {
    color: var(--accent-gold);
    text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 213, 79, 0.7);
}

.score-joker-delta {
    color: #ffffff;
    font-family: monospace, inherit;
    text-shadow: 0 2px 0 #000;
}

/* Hand Name Banner */
.score-calc-handname {
    font-size: 1.3rem;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 0 0 #000,
        -2px 0 0 #000,
        0 4px 10px rgba(0, 0, 0, 0.9);
}

/* Calculation Row (No solid boxes, raw glowing numbers) */
.score-calc-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: monospace, inherit;
    font-size: 2.5rem;
    font-weight: normal;
    line-height: 1;
}

.score-chip-pill {
    color: #00e5ff;
    text-shadow: 
        0 2px 0 #002233,
        0 -2px 0 #002233,
        2px 0 0 #002233,
        -2px 0 0 #002233,
        0 0 16px rgba(0, 229, 255, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.9);
    animation: slamFromLeft 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.score-multiply-symbol {
    color: var(--accent-gold);
    font-size: 1.8rem;
    text-shadow: 
        0 2px 0 #000,
        -2px 0 0 #000,
        0 4px 8px rgba(0, 0, 0, 0.8);
}

.score-mult-pill {
    color: #ff3344;
    text-shadow:
        0 2px 0 #330007,
        0 -2px 0 #330007,
        2px 0 0 #330007,
        -2px 0 0 #330007,
        0 0 16px rgba(255, 51, 68, 0.9),
        0 4px 12px rgba(0, 0, 0, 0.9);
    animation: slamFromRight 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Fired once per scoring/Joker step in spawnFloatingScore2's buildup, on top of whichever
   slam-in animation is already running — a quick pulse so each number tick reads as an event. */
.score-pill-bump {
    animation: scorePillBump 0.28s ease-out;
}

@keyframes scorePillBump {
    0% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Exploded Total Score */
.score-total-bang {
    font-size: 3.2rem;
    font-weight: normal;
    color: var(--accent-gold);
    text-shadow: 
        0 2px 0 #3e2723,
        0 -2px 0 #3e2723,
        2px 0 0 #3e2723,
        -2px 0 0 #3e2723,
        0 0 20px rgba(255, 213, 79, 0.9),
        0 6px 14px rgba(0, 0, 0, 0.95);
    animation: totalScorePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Animations */
@keyframes floatingPopIn {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes slamFromLeft {
    0% { opacity: 0; transform: translateX(-50px) scale(0.7); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slamFromRight {
    0% { opacity: 0; transform: translateX(50px) scale(0.7); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes totalScorePop {
    0% { opacity: 0; transform: scale(0.4); filter: brightness(2.5); }
    50% { opacity: 1; transform: scale(1.25); filter: brightness(1.6); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.score-banner-exit {
    animation: floatFadeUp 0.35s ease-in forwards !important;
}

@keyframes floatFadeUp {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(0.85); }
}

/* #endregion */

/* #region Co-Op Lobby Redesign & Difficulty Selection */
.coop-lobby-panel {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.coop-mode-grid {
    display: flex;
    gap: 16px;
    margin: 1.5rem 0;
    justify-content: center;
}

.coop-mode-card {
    flex: 1;
    background: rgba(46, 26, 18, 0.7);
    border: 2px solid var(--accent-gold);
    border-radius: 10px;
    padding: 1.2rem 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coop-mode-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25);
    background: rgba(62, 39, 35, 0.9);
    border-color: #FFF;
}

.coop-mode-card .mode-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.coop-mode-card h3 {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
    color: var(--accent-gold);
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.5px;
}

.coop-mode-card p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.3;
}

.difficulty-btn-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12px 0;
}

.difficulty-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    border: 2px solid #5D4037;
    background: #2E1A12;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-btn:hover {
    border-color: #8D6E63;
    color: var(--text-main);
    transform: translateY(-1px);
}

.difficulty-btn.active.diff-easy {
    background: rgba(76, 175, 80, 0.25);
    border-color: #4CAF50;
    color: #81C784;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

.difficulty-btn.active.diff-medium {
    background: rgba(255, 193, 7, 0.25);
    border-color: #FFC107;
    color: #FFD54F;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.4);
}

.difficulty-btn.active.diff-hard {
    background: rgba(244, 67, 54, 0.25);
    border-color: #F44336;
    color: #E57373;
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.4);
}

.difficulty-desc-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed #5D4037;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0 16px 0;
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* #endregion */

/* #region Leaderboard Search Bar & Toolbar */
.lb-search-toolbar {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.lb-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.lb-search-input {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 38px;
    font-size: 0.92rem;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.3px;
    color: var(--text-main);
    background: linear-gradient(180deg, #1a0f0c 0%, #261510 100%);
    border: 1.5px solid #5D4037;
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.05);
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.lb-search-input::placeholder {
    color: #8D6E63;
    font-size: 0.88rem;
    font-style: italic;
}

.lb-search-input:hover {
    border-color: #8D6E63;
    background: linear-gradient(180deg, #1e110d 0%, #2c1913 100%);
}

.lb-search-input:focus {
    border-color: var(--accent-gold);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 14px rgba(255, 213, 79, 0.35);
    background: #190e0b;
    color: #FFF8E1;
}

.lb-search-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    opacity: 0.8;
    transition: transform 0.2s, opacity 0.2s;
}

.lb-search-wrapper:focus-within .lb-search-icon {
    opacity: 1;
    transform: scale(1.1);
}

.lb-search-clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #5D4037;
    color: var(--text-dim);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.lb-search-clear:hover {
    background: rgba(255, 213, 79, 0.2);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    transform: scale(1.1);
}

.lb-count-badge {
    flex-shrink: 0;
    padding: 0 12px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--accent-gold);
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px solid #3E2723;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    white-space: nowrap;
}

/* Moonlight Night Theme Overrides */
body.dark-theme .lb-search-input {
    background: linear-gradient(180deg, #111827 0%, #1a2233 100%);
    border-color: #374151;
}
body.dark-theme .lb-search-input:focus {
    border-color: var(--accent-gold);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 14px rgba(147, 197, 253, 0.35);
}
body.dark-theme .lb-search-clear {
    border-color: #4B5563;
}
body.dark-theme .lb-count-badge {
    border-color: #374151;
    background: rgba(17, 24, 39, 0.6);
}

/* Dystopian Theme Overrides */
body.dystopian-theme .lb-search-input {
    background: #080d0a !important;
    border-color: #1b3d2b !important;
    color: #00ff66 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9) !important;
}
body.dystopian-theme .lb-search-input::placeholder {
    color: #1b5e35 !important;
}
body.dystopian-theme .lb-search-input:focus {
    border-color: #00ff66 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 255, 102, 0.4) !important;
}
body.dystopian-theme .lb-search-icon {
    color: #00ff66 !important;
}
body.dystopian-theme .lb-search-clear {
    background: #112419 !important;
    border-color: #1b3d2b !important;
    color: #00ff66 !important;
}
body.dystopian-theme .lb-search-clear:hover {
    border-color: #00ff66 !important;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.4) !important;
}
body.dystopian-theme .lb-count-badge {
    border-color: #1b3d2b !important;
    background: #080d0a !important;
    color: #00ff66 !important;
}
/* #endregion */