*,*:before,*:after{box-sizing:border-box}:root{--background-primary: #ffffff;--background-secondary: #f7fafc;--background-tertiary: #edf2f7;--text-primary: #2d3748;--text-secondary: #718096;--text-accent: #2b6cb0;--text-inverted: #ffffff;--border-color: #e2e8f0;--primary-color: #4299e1;--secondary-color: #a0aec0;--accent-color: #ed8936;--success-color: #48bb78;--warning-color: #ecc94b;--error-color: #f56565;--background-image-main: none;--button-primary-bg: var(--primary-color);--button-primary-text: var(--text-inverted);--button-primary-border: var(--primary-color);--button-secondary-bg: var(--secondary-color);--button-secondary-text: var(--text-inverted);--button-secondary-border: var(--secondary-color);--button-danger-bg: var(--error-color);--button-danger-text: var(--text-inverted);--button-danger-border: var(--error-color);--modal-background: var(--background-primary);--modal-text-color: var(--text-primary);--modal-header-bg: var(--background-secondary);--modal-header-text: var(--text-primary);--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--header-background: var(--background-primary);--header-text-color: var(--text-primary);--header-border-bottom: var(--border-color);--footer-background: var(--background-secondary);--footer-text-color: var(--text-secondary);--landing-hero-bg-image: none;--landing-hero-text-color: var(--text-primary);--landing-feature-item-bg-image-strategic: none;--landing-feature-item-bg-image-levels: none;--landing-feature-item-bg-image-ranking: none;--landing-feature-item-bg-image-themes: none;--landing-feature-item-bg-image-variants: none;--landing-feature-item-bg-image-rewards: none;--landing-feature-item-text-color: var(--text-primary);--landing-competitors-bg-color: var(--background-secondary);--landing-competitors-item-bg-image-1: none;--landing-competitors-item-bg-image-2: none;--landing-competitors-item-bg-image-3: none;--landing-competitors-item-text-color: var(--text-primary);--landing-cta-bg-color: var(--background-tertiary);--landing-cta-text-color: var(--text-primary);--dashboard-stats-bg: var(--background-secondary);--dashboard-stats-bg-image: none;--dashboard-hub-bg: var(--background-primary);--dashboard-hub-bg-image: none;--dashboard-tab-active-bg: var(--primary-color);--dashboard-tab-active-text: var(--text-inverted);--dashboard-tab-inactive-bg: var(--background-tertiary);--dashboard-tab-inactive-text: var(--text-secondary);--dashboard-sidebar-bg: var(--background-secondary);--dashboard-sidebar-bg-image: none;--gamestats-bg: var(--background-secondary);--gamestats-bg-image: none;--gamestats-border-color: var(--border-color);--gamestats-player-score-active-bg: var(--background-tertiary);--gamestats-player-score-active-border: var(--primary-color);--gamestats-player-score-inactive-bg: var(--background-secondary);--gamestats-player-score-inactive-border: var(--border-color);--gamestats-player-score-active-text-color: var(--text-primary);--gamestats-player-score-inactive-text-color: var(--text-secondary);--message-bg: var(--background-tertiary);--message-bg-image: none;--message-text: var(--text-accent);--message-bg-overlay: rgba(255, 255, 255, .5);--board-bg-image: none;--board-bg-color: var(--background-tertiary);--board-bg-overlay: rgba(255, 255, 255, .5);--board-pile-bg-color: transparent;--hand-bg: var(--background-secondary);--hand-bg-image: none;--harvest-bg: var(--background-secondary);--harvest-bg-image: none;--harvest-pile-bg-color: transparent;--actions-bg: var(--background-secondary);--actions-bg-image: none;--actions-btn-default-bg: var(--secondary-color);--actions-btn-default-border: var(--secondary-color);--actions-btn-active-bg: var(--primary-color);--actions-btn-active-border: var(--primary-color);--actions-btn-disabled-bg: #a0aec0;--actions-btn-disabled-border: #a0aec0;--actions-btn-default-text: var(--text-inverted);--actions-btn-active-text: var(--text-inverted);--actions-btn-disabled-text: #e2e8f0;--pile-outline-color: var(--border-color);--harvest-pile-outline-color: var(--border-color);--card-select-outline-color: var(--accent-color);--pile-select-outline-color: var(--accent-color);--pile-value-badge-bg: var(--primary-color);--pile-points-badge-bg: var(--success-color);--pile-cardcount-badge-bg: var(--secondary-color);--harvest-outline-color: var(--border-color);--harvest-value-badge-bg: var(--primary-color);--harvest-clear-badge-bg: var(--accent-color);--harvest-cardcount-badge-bg: var(--secondary-color);--card-front-image: none;--card-suit-color-hearts: red;--card-suit-color-diamonds: red;--card-suit-color-clubs: black;--card-suit-color-spades: black;--card-face-image-h-j: none;--card-face-image-h-q: none;--card-face-image-h-k: none;--card-face-image-d-j: none;--card-face-image-d-q: none;--card-face-image-d-k: none;--card-face-image-c-j: none;--card-face-image-c-q: none;--card-face-image-c-k: none;--card-face-image-s-j: none;--card-face-image-s-q: none;--card-face-image-s-k: none;--player1-bg-color: #e6f3ff;--player1-border-color: #99ccff;--player2-bg-color: #ffe6e6;--player2-border-color: #ff9999;--card-desktop-width: 80px;--card-desktop-height: 112px;--card-desktop-overlap: -62px;--card-mobile-width: 60px;--card-mobile-height: 84px;--card-mobile-overlap: -43px;--player-stat-bg-image: none;--player-stat-border-color: #D2B48C}html{width:100%;height:100%;overflow-x:hidden;background-color:#fff}body{width:100%;height:100%;min-height:100vh;font-family:Arial,sans-serif;background-color:var(--background-primary, #ffffff);color:var(--text-primary, #2d3748);margin:0;padding:0;font-size:16px}body.dark-mode{background-color:#2d2d2d;color:#f0f0f0}h1,h2,h3,h4,h5,h6{color:inherit}h1{margin:0 0 10px;text-align:center;font-size:1.5em}h2{margin-top:5px;margin-bottom:5px;text-align:center;font-size:1.2em}h3{margin-top:5px;margin-bottom:5px;text-align:center;font-size:1em}button{padding:8px 20px;background-color:var(--button-primary-bg, #3182ce);color:var(--button-primary-text, white);border:1px solid var(--button-primary-border, transparent);border-radius:5px;cursor:pointer;font-weight:700}button:disabled{background-color:#cbd5e0;color:#a0aec0;cursor:not-allowed;border-color:#cbd5e0}button:hover:not(:disabled){background-color:var(--accent-color, #2c5282);border-color:var(--accent-color, #2c5282)}.hidden{display:none!important}.rounded-margin{border-radius:5px;margin:5px}a{color:var(--primary-color, #007bff);text-decoration:none}a:hover{text-decoration:underline}@media(max-width:768px){body{padding:0}h1{font-size:1.1em}h2{font-size:1em;margin-top:2px;margin-bottom:2px}}.header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background-color:var(--header-background, #4a5568);color:var(--header-text-color, white);gap:10px;min-height:70px}.header-left,.header-right{flex:0 0 auto;display:flex;align-items:center}.header-center{flex:1 1 auto;display:flex;justify-content:center;align-items:center;min-width:0}.header-title{text-align:center;flex-shrink:0}.header-title h1{margin:0;line-height:1}.header-score{display:flex;align-items:baseline;gap:10px;padding:8px 15px;border:1px solid var(--header-player-score-inactive-border, #ccc);border-radius:5px;background-color:var(--header-player-score-inactive-bg, #fff);min-width:120px}.header-score .player-name{font-weight:600;font-size:1.1em}.header-score .player-score{font-weight:700;font-size:1.2em}#user-profile-icon{display:none;width:30px;height:30px;border-radius:50%;border:1px solid #ccc;background-color:#eee;vertical-align:middle;cursor:pointer;object-fit:cover}.header-score.active{border-width:2px;background-color:var(--header-player-score-active-bg);border-color:var(--header-player-score-active-border)}.auth-controls .profile-icon{width:30px!important;height:30px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1em;cursor:pointer;border:1px solid #aaa;text-transform:uppercase;overflow:hidden}.profile-icon.logged-out{background-color:var(--background-tertiary, #ccc)}.profile-icon.initials{background-color:var(--primary-color, #2196F3);color:var(--text-inverted, #fff);font-size:.9em}.profile-icon.picture{object-fit:cover;width:100%;height:100%;border:none}.auth-controls:hover .profile-icon.logged-out{background-color:var(--secondary-color, #bbb)}.auth-controls:hover .profile-icon.initials{background-color:var(--accent-color, #1e88e5)}.auth-controls:hover .profile-icon.picture{opacity:.9}.hamburger-menu{font-size:30px;cursor:pointer;padding:8px}@media(max-width:768px){.header{padding:5px 10px;gap:5px;position:relative;min-height:60px}.header-center{gap:5px}.header-score{padding:5px 10px;gap:8px;border:1px solid var(--header-player-score-inactive-border, #ccc);background-color:var(--header-player-score-inactive-bg, #fff);min-width:auto}.header-score .player-name{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9em;font-weight:600}.header-score .player-score{font-size:1em}.hamburger-menu{display:block}.nav-drawer{display:block;position:fixed;left:-250px;top:0;width:200px;height:100%;background-color:var(--background-secondary, #f1f1f1);box-shadow:var(--modal-shadow, 2px 0 5px rgba(0,0,0,.2));padding-top:50px;transition:left .3s ease;z-index:1002;overflow-y:auto}.nav-drawer.open{left:0}.nav-drawer ul{list-style:none;padding:0;margin:0}.nav-drawer li{border-bottom:1px solid var(--border-color, #ddd)}.nav-drawer li button{display:block;width:100%;padding:15px 20px;background:none;border:none;text-align:left;font-size:1em;cursor:pointer;color:var(--text-primary, #333)}.nav-drawer li button:hover{background-color:var(--background-tertiary, #ddd)}.close-nav-btn{position:absolute;top:10px;right:15px;font-size:24px;color:#333;text-decoration:none;font-weight:700}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1001}.overlay.active{display:block}}@media(min-width:769px){.header-score{padding:5px 10px;border:1px solid #ccc;border-radius:5px;background-color:#fff;min-width:100px}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006;background-image:var(--modal-overlay-image, none);background-size:var(--modal-overlay-image-size, cover);background-position:var(--modal-overlay-image-position, center center);background-repeat:var(--modal-overlay-image-repeat, no-repeat)}.modal.active{display:block}.modal.modal-fullscreen-center{display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--modal-background, #fefefe);background-image:var(--modal-content-background-image, none);background-size:var(--modal-content-background-size, cover);background-position:var(--modal-content-background-position, center center);background-repeat:var(--modal-content-background-repeat, no-repeat);color:var(--modal-text-color, #2d3748);margin:10% auto;padding:20px;border:1px solid var(--border-color, #888);width:80%;max-width:500px;border-radius:8px;position:relative;max-height:85vh;display:flex;flex-direction:column;box-shadow:var(--modal-shadow, 0 5px 15px rgba(0,0,0,.5))}.modal-content.has-dynamic-background:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000040;z-index:1;border-radius:inherit}.modal-content.has-dynamic-background>*:not(.close-button){position:relative;z-index:2}.modal-title{border-bottom:1px solid var(--border-color, #eee);text-align:center;background-color:var(--modal-header-bg, transparent);background-image:var(--modal-header-background-image, none);background-size:var(--modal-header-background-size, cover);background-position:var(--modal-header-background-position, center center);background-repeat:var(--modal-header-background-repeat, no-repeat);color:var(--modal-header-text, inherit);border-top-left-radius:8px;border-top-right-radius:8px;margin:-20px -20px 20px;padding:15px 20px}.modal-buttons{display:flex;justify-content:center;gap:10px;margin-top:20px}.modal-content-small{max-width:400px}.modal-content-large{max-width:900px;max-height:85vh;display:flex;flex-direction:column}.close-btn,.close-button{color:var(--text-secondary, #aaa);position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;line-height:1}.close-btn:hover,.close-btn:focus,.close-button:hover,.close-button:focus{color:var(--text-primary, black);text-decoration:none;cursor:pointer}.modal-content.has-dynamic-background .close-button{color:#fff;text-shadow:0 0 5px rgba(0,0,0,.7)}.modal h2{margin-top:0;margin-bottom:10px;text-align:center}.form-section{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border-color, #eee)}.form-section:last-of-type{border-bottom:none;padding-bottom:0}.form-section label{display:block;margin-bottom:5px;font-weight:700}.form-section input[type=text],.form-section input[type=email],.form-section input[type=number],.form-section select{width:calc(100% - 16px);padding:8px;border:1px solid var(--border-color, #ccc);border-radius:4px;box-sizing:border-box}#winning-score-option{width:60px}#options-modal .modal-option{margin-top:10px}#options-modal .modal-option .option-label{margin-bottom:5px;display:block}#options-modal .modal-option label{display:block}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.form-actions button{margin:0 10px;padding:10px 20px}.modal input[type=radio]+label{display:inline-block;margin-right:10px;margin-bottom:0;font-weight:400;vertical-align:middle}.modal input[type=radio]{vertical-align:middle}#rules-modal .modal-body p,#rules-modal .modal-body li,#rules-modal .modal-body ol,#rules-modal .modal-body ol ul{font-size:1em}.modal-content-large .modal-body{flex-grow:1;overflow-y:auto}#pile-details-modal .modal-content{min-width:250px}#stockpile-choices{text-align:left;margin-bottom:20px}.pile-stack-display{display:inline-block;position:relative;margin:10px;padding:5px;border:2px solid var(--primary-color, #3182ce);border-radius:8px;min-width:80px;height:100px;background-color:var(--background-secondary, #f7fafc)}#invite-email-section{margin-top:10px;padding-left:20px}#logout-confirm-modal p{text-align:center;margin-bottom:20px}.btn-danger{padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:700;background-color:var(--button-danger-bg, #dc3545);color:var(--button-danger-text, white);border:1px solid var(--button-danger-border, #dc3545)}.btn-danger:hover{opacity:.9}.btn-secondary{padding:10px 20px;border-radius:5px;cursor:pointer;background-color:var(--button-secondary-bg, #6c757d);color:var(--button-secondary-text, white);border:1px solid var(--button-secondary-border, #6c757d)}.btn-secondary:hover{opacity:.9}.modal-body{overflow-y:auto;flex-grow:1;padding:15px 20px}#game-history-modal-content ul{list-style:none;padding:0;margin:0}.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;margin-bottom:5px;border-radius:8px;font-size:.9rem;flex-wrap:wrap}.history-row-odd{background-color:#f0f0f0;color:#333}.history-row-even{background-color:transparent}.history-item span{margin:2px 5px;white-space:nowrap}.history-date{font-weight:700;min-width:80px}.history-opponent{flex-grow:1;margin-left:10px;margin-right:10px}.history-outcome{font-weight:700;padding:2px 6px;border-radius:4px;min-width:70px;text-align:center}.game-win{background-color:#c8e6c9;color:#2e7d32}.game-loss{background-color:#ffcdd2;color:#c62828}.history-score{font-style:italic;min-width:80px;text-align:right}.history-harvests{min-width:80px;text-align:right}#pile-details-content ul{list-style:none;padding:0;margin:0}#pile-details-content li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border-color, #eee)}#pile-details-content li:last-child{border-bottom:none}#pile-details-content .card-name{font-weight:700}#pile-details-content .card-points{color:var(--text-secondary, #555);margin-left:10px}#pile-details-content .red{color:var(--error-color, red)}#pile-details-content .black{color:var(--text-primary, black)}.modal .modal-title,#new-game-modal .modal-title{font-weight:700}#new-game-modal .modal-content{background-image:var(--new-game-modal-bg-image)!important;background-size:cover;background-position:center}.nav-drawer{position:fixed;top:0;left:-250px;width:245px;height:100%;background-color:var(--header-background, #333);color:var(--header-text-color, #ffffff)!important;padding-top:60px;box-shadow:2px 0 5px #00000080;transition:left .3s ease;z-index:1050;overflow-y:auto;box-sizing:border-box!important;transform:translate(0)!important}.nav-drawer.open{left:0!important}.nav-drawer ul{list-style:none;padding:0;margin:0}.nav-drawer li{border-bottom:1px solid var(--header-border-bottom, #444)}.nav-drawer li:last-child{border-bottom:none}.nav-drawer ul li a{color:var(--header-text-color, #ffffff)!important}.nav-drawer button,.nav-drawer a{display:block;width:100%;padding:15px 20px;background:none;border:none;color:var(--header-text-color, #ffffff)!important;text-align:left;font-size:1rem;cursor:pointer;text-decoration:none;transition:background-color .2s ease,color .2s ease}.nav-drawer button:hover,.nav-drawer a:hover{background-color:var(--background-tertiary);color:var(--text-accent)}.close-nav-btn{position:absolute;top:10px;right:15px;font-size:2rem;color:var(--header-text-color, #aaa);text-decoration:none;padding:5px;line-height:1}.close-nav-btn:hover{color:var(--text-accent, #fff);background:none}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1040}.overlay.active{opacity:1;visibility:visible}#theme-selector-container{padding:0;margin:0;border-bottom:none}.theme-option-item{display:block;width:100%;padding:12px 20px 12px 40px;background:none;border:none;color:var(--header-text-color, #ffffff)!important;text-align:left;font-size:.9rem;cursor:pointer;text-decoration:none;transition:background-color .2s ease,color .2s ease;border-bottom:1px solid var(--header-border-bottom, #444)}.theme-option-item:last-child{border-bottom:none}.theme-option-item:hover{background-color:var(--background-tertiary);color:var(--text-accent)}.theme-option-item.current-theme{color:var(--text-accent)!important;font-weight:500}.theme-option-item.current-theme:hover{background-color:var(--background-tertiary)}.modal#tutorial-modal.active{display:block}.modal#tutorial-modal .modal-content{max-width:700px;height:75vh}#tutorial-video-container{margin-bottom:10px;background-color:#000;border-radius:4px;overflow:hidden}#tutorial-video{display:block;height:auto;max-height:300px;aspect-ratio:3 / 2;object-fit:contain;background-color:#000}#tutorial-step-content{display:flex;flex-direction:column;flex-grow:1;overflow:hidden;margin-bottom:15px}#tutorial-description{line-height:1.4;min-height:50px;flex-grow:1;overflow-y:auto;padding-right:10px;padding-bottom:10px}.tutorial-navigation{display:flex;justify-content:space-between;flex-shrink:0}