:root{--color-primary: #4caf50;--color-primary-dark: #388e3c;--color-secondary: #764ba2;--color-secondary-dark: #633d8f;--color-white: #fff;--color-black: #000;--color-gray-100: #f9f9f9;--color-gray-200: #f5f5f5;--color-gray-300: #f0f0f0;--color-gray-400: #e0e0e0;--color-gray-500: #ddd;--color-gray-600: #ccc;--color-gray-700: #999;--color-gray-800: #666;--color-gray-900: #333;--color-success: #4caf50;--color-success-dark: #388e3c;--color-success-border: #37803a;--color-error: #f44336;--color-error-light: #ffebee;--color-error-border: #ffcdd2;--color-info: #2196f3;--color-info-dark: #1976d2;--color-selected: #e8f5e9;--color-hover: #f0f9ff;--color-locked: #f5f5f5;--color-topo-green: #3f855d;--color-topo-green-dark: #005a27;--color-topo-backdrop: #00421D20;--color-token-yellow: #FFD23D;--color-token-blue: #126988;--color-token-green: #1C8812;--color-token-red: #F21A1A;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-circle: 50%;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .6s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .3);--shadow-xl: 0 10px 40px rgba(0, 0, 0, .3);--font-sm: .875rem;--font-md: .95rem;--font-lg: 1.1rem;--font-xl: 1.3rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--font-4xl: 2.5rem;--font-primary: "Righteous", sans-serif;--font-body: "Righteous", "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-mono: "Courier New", monospace;--z-base: 1;--z-elevated: 10;--z-sticky: 100;--z-overlay: 1000;--z-modal: 10000;--z-tooltip: 10002;--max-width: 800px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--color-gray-200);overflow:hidden}button{font-family:var(--font-primary)}.app-container{height:100dvh;max-height:100dvh;max-width:var(--max-width);margin:0 auto;overflow:hidden}.screen{display:none}.screen.active{display:block}.hidden{display:none}#install-banner{position:fixed;bottom:80px;left:0;right:0;background-color:var(--color-info);color:var(--color-white);padding:var(--spacing-md);text-align:center;z-index:999;border-radius:var(--radius-sm);margin:0 var(--spacing-md);box-shadow:0 2px 10px #0003;animation:slide-up var(--transition-normal) ease-out}#install-btn{background:var(--color-white);color:var(--color-info);border:none;padding:8px 16px;border-radius:var(--spacing-xs);font-weight:700;cursor:pointer}#close-banner{background:transparent;border:none;color:var(--color-white);font-size:var(--font-2xl);padding:0 8px;cursor:pointer}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.player-count-buttons{display:flex;justify-content:flex-start;gap:var(--spacing-md);margin-top:var(--spacing-md)}.player-count-buttons button{width:50px;height:50px;font-size:var(--font-2xl);border-radius:var(--radius-circle);border:2px solid var(--color-black);background-color:var(--color-white);color:var(--color-gray-900);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);outline:none;-webkit-tap-highlight-color:transparent}.player-count-buttons button:hover{background-color:var(--color-gray-300);border-color:var(--color-gray-900)}.player-count-buttons button.selected{background:#3f855d;color:var(--color-white);border:2px solid var(--color-white);transform:scale(1.1);box-shadow:0 3px 6px #0003}.player-count-buttons button:active{transform:scale(.95);box-shadow:0 1px 2px #0003}.player-count-buttons button:focus{outline:2px solid var(--color-gray-900);outline-offset:2px}.player-count-buttons button.selected:focus{box-shadow:0 3px 6px #0003}.icon-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;padding:var(--spacing-sm);transition:transform var(--transition-fast);line-height:1;color:var(--color-white);display:flex;align-items:center;justify-content:center}.icon-btn:hover{transform:scale(1.2)}.icon-btn:active{transform:scale(.95)}.icon-btn.back-btn{position:absolute;left:var(--spacing-sm);top:var(--spacing-sm);z-index:var(--z-overlay)}.icon-btn.randomize-btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}.icon-btn.randomize-btn:hover{transform:translateY(-50%) scale(1.2)}.icon-btn.randomize-btn:active{transform:translateY(-50%) scale(.95)}#game-menu-btn{color:var(--color-white)}#game-menu-btn .material-symbols-outlined{color:var(--color-primary-dark)}.game-action-buttons{position:fixed;bottom:var(--spacing-md);left:50%;transform:translate(-50%);width:calc(100dvw - 32px);max-width:var(--max-width);display:flex;gap:.75rem;z-index:var(--z-elevated)}.game-action-btn{flex:1;padding:.75rem 1.5rem;color:var(--color-white);border-radius:var(--radius-sm);font-size:var(--font-lg);cursor:pointer;transition:all var(--transition-normal);border:none}.game-action-btn.start-btn{background-color:var(--color-success);border:2px solid var(--color-white)}.game-action-btn.start-btn:hover:not(:disabled){background-color:var(--color-success-dark)}#randomize-start{background:var(--color-white);color:var(--color-gray-900);border:2px solid var(--color-black)}#randomize-start:hover:not(:disabled){background:var(--color-gray-300);border-color:var(--color-gray-900)}#randomize-start:disabled{background:var(--color-gray-600);border:1px solid #aaaaaa;color:var(--color-gray-800);cursor:not-allowed;opacity:1}.game-action-btn:disabled{background-color:var(--color-gray-600);border:1px solid #aaaaaa;color:var(--color-gray-800);cursor:not-allowed;opacity:1}.direct-btn{height:50px;font-size:var(--font-lg);font-weight:700;border:2px solid var(--color-black);border-radius:var(--radius-sm);background-color:var(--color-white);color:var(--color-gray-900);cursor:pointer;transition:all var(--transition-fast)}.direct-btn:active{transform:translateY(0);background-color:var(--color-gray-100);border-color:var(--color-gray-400);color:var(--color-gray-900);box-shadow:var(--shadow-sm)}.modal-buttons{display:flex;flex-direction:column;gap:var(--spacing-md)}.modal-btn{padding:var(--spacing-md);font-size:var(--font-lg);font-weight:500;border:2px solid var(--color-black);border-radius:var(--radius-sm);background-color:var(--color-white);color:var(--color-gray-900);cursor:pointer;transition:all var(--transition-fast)}.modal-btn:hover{background-color:var(--color-gray-300);border-color:var(--color-gray-900)}.modal-btn:active{transform:translateY(0)}.modal-btn.primary{background:var(--color-primary);border-color:var(--color-primary-dark);color:var(--color-white)}.modal-btn.primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}#show-table-btn{background:var(--color-primary);border-color:var(--color-primary-dark);color:var(--color-white)}#show-table-btn:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}.tooltip-btn{background:none;border:none;color:var(--color-primary-dark);font-weight:600;font-size:var(--font-md);cursor:pointer;transition:all var(--transition-fast)}.tooltip-btn:hover{color:var(--color-primary);text-decoration:underline}.tooltip-btn:active{transform:scale(.98)}.tooltip-nav-buttons{display:flex;gap:var(--spacing-md)}#player-colors{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.player-circle-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:auto}.player-circle-wrapper:nth-child(1){top:0;left:0;right:auto;bottom:auto;transform:none}.player-circle-wrapper:nth-child(2){top:0;right:0;left:auto;bottom:auto;transform:none}.player-circle-wrapper:nth-child(3){bottom:0;right:0;top:auto;left:auto;transform:none}.player-circle-wrapper:nth-child(4){bottom:0;left:0;top:auto;right:auto;transform:none}#player-colors.players-2 .player-circle-wrapper:nth-child(1){top:0;left:0;right:auto;bottom:auto;transform:none}#player-colors.players-2 .player-circle-wrapper:nth-child(2){bottom:0;right:0;top:auto;left:auto;transform:none}#player-colors.players-2 .player-circle-wrapper:nth-child(3),#player-colors.players-2 .player-circle-wrapper:nth-child(4){display:none}#player-colors.players-3 .player-circle-wrapper:nth-child(1){top:0;left:50%;right:auto;bottom:auto;transform:translate(-50%) translateY(-50%)}#player-colors.players-3 .player-circle-wrapper:nth-child(2){bottom:0;right:0;top:auto;left:auto;transform:none}#player-colors.players-3 .player-circle-wrapper:nth-child(3){bottom:0;left:0;top:auto;right:auto;transform:none}#player-colors.players-3 .player-circle-wrapper:nth-child(4){display:none}#player-colors.players-4 .player-circle-wrapper{display:flex}.color-circle{font-family:Righteous,sans-serif;width:80px;height:80px;border-radius:50%;border:3px solid #fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;position:relative}.color-circle.empty{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:#ffffff40}.color-circle:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.player-number{font-size:1.5rem;font-weight:700;color:#fff;-webkit-user-select:none;user-select:none}.color-circle:not(.empty) .player-number{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}@keyframes fade-out-circles{0%{opacity:1}to{opacity:0}}@keyframes fade-in-circles{0%{opacity:0}to{opacity:1}}.player-circle-wrapper.fading-out{animation:fade-out-circles .3s ease-out forwards}.player-circle-wrapper.fading-in{animation:fade-in-circles .3s ease-in forwards}@keyframes slide-out{0%{transform:translate(0);opacity:1}to{transform:translate(150vw);opacity:0}}@keyframes spin-3d{0%{transform:rotateY(0)}to{transform:rotateY(720deg)}}.player-circle-wrapper.animate-exit{animation:slide-out 1.2s ease-out forwards}.player-circle-wrapper.animate-exit .color-circle{animation:spin-3d 1.2s linear infinite}.player-circle-wrapper.animate-exit:nth-child(1){animation-delay:.24s}.player-circle-wrapper.animate-exit:nth-child(2){animation-delay:0s}.player-circle-wrapper.animate-exit:nth-child(3){animation-delay:.08s}.player-circle-wrapper.animate-exit:nth-child(4){animation-delay:.16s}@keyframes container-rotation{0%{transform:rotate(0)}to{transform:rotate(var(--rotation-degrees))}}@keyframes counter-rotation{0%{transform:rotate(0)}to{transform:rotate(calc(var(--rotation-degrees) * -1))}}@keyframes counter-rotation-centered{0%{transform:translate(-50%) translateY(-50%) rotate(0)}to{transform:translate(-50%) translateY(-50%) rotate(calc(var(--rotation-degrees) * -1))}}@keyframes fade-number-out{0%{opacity:1}to{opacity:0}}@keyframes fade-number-in{0%{opacity:0}to{opacity:1}}#player-colors.rotating-container{animation:container-rotation 2s cubic-bezier(.25,.1,.25,1) forwards}.player-circle-wrapper.rotating{animation:counter-rotation 2s cubic-bezier(.25,.1,.25,1) forwards}#player-colors.players-3.rotating-container .player-circle-wrapper:nth-child(1).rotating{animation:counter-rotation-centered 2s cubic-bezier(.25,.1,.25,1) forwards}.player-circle-wrapper.rotating .player-number{animation:fade-number-out .3s ease-out forwards}.player-circle-wrapper.rotation-complete .player-number{animation:fade-number-in .3s ease-in forwards}#bottom-panel{position:fixed;bottom:0;left:0;right:0;width:100%;background-color:var(--color-topo-green-dark);padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);box-shadow:0 -8px 10px #0000001a;z-index:var(--z-overlay);max-width:var(--max-width);margin:0 auto;transition:transform var(--transition-normal) ease-out,opacity var(--transition-normal) ease-out,box-shadow var(--transition-normal) ease-out;transform:translateY(0);opacity:1;border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:auto;overflow:hidden}#bottom-panel.hidden-panel{transform:translateY(100%);opacity:0;pointer-events:none}#bottom-panel.no-shadow{box-shadow:none}.close-panel-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;border:none;background-color:transparent;color:var(--color-white);border-radius:var(--radius-circle);font-size:var(--font-2xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:var(--z-tooltip)}.close-panel-btn:hover{color:var(--color-gray-900)}.close-panel-btn:active{transform:scale(.95)}.toggle-mode-btn{position:absolute;top:var(--spacing-sm);right:3rem;width:32px;height:32px;border:none;background-color:transparent;color:var(--color-white);border-radius:var(--radius-circle);font-size:var(--font-xl);line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:var(--z-tooltip);padding:0;box-sizing:border-box}.toggle-mode-btn:active{transform:scale(.95)}.input-mode{display:none;position:relative;z-index:var(--z-elevated)}.input-mode.active-mode{display:block}.score-input-panel{display:flex;align-items:flex-start;justify-content:flex-start;margin-top:var(--spacing-sm)}#total-scores{display:grid;width:100%;margin-bottom:var(--spacing-md);border-bottom:2px solid var(--color-gray-500);padding-bottom:var(--spacing-sm)}.total-label{text-align:center;font-weight:700;font-size:var(--font-sm);color:var(--color-gray-800)}.total-score{text-align:center;font-weight:700;font-size:1.25rem}#current-player-indicator{width:50px;height:50px;display:flex;align-items:center;justify-content:center}.current-color{width:44px;height:44px;border-radius:50%;border:2px solid var(--color-white)}.input-display-container{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-sm);width:100%;padding-top:var(--spacing-lg)}.digit-boxes{display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);height:50px}.digit-box{width:50px;height:50px;border:2px solid var(--color-gray-500);border-radius:var(--radius-sm);display:flex;justify-content:center;align-items:center;font-size:var(--font-2xl);font-weight:700;background-color:var(--color-white);transition:all var(--transition-fast)}.digit-box.active{border-color:var(--color-info);box-shadow:0 0 0 2px #2196f34d}.digit-box.filled{background-color:var(--color-hover);border-color:var(--color-info)}.digit-buttons{display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);height:50px}.digit-btn{height:50px;width:50px;font-size:var(--font-lg);font-weight:700;border:2px solid var(--color-gray-400);border-radius:var(--radius-sm);background-color:var(--color-gray-100);color:var(--color-gray-900);cursor:pointer;transition:all var(--transition-fast)}.digit-btn:hover:not(:disabled){background-color:#d8d8d8}.digit-btn:active:not(:disabled){transform:scale(.95)}.digit-btn:disabled{background-color:var(--color-locked);color:var(--color-gray-600);cursor:not-allowed;opacity:.6}.clear-btn{width:50px;height:50px;background-color:var(--color-error-light);border-color:var(--color-error-border);color:var(--color-error)}.clear-btn:hover:not(:disabled){background-color:#ffe0e4}.clear-btn:disabled{background-color:var(--color-locked);color:var(--color-gray-600)}#add-points{width:50px;height:50px;text-align:center;font-size:var(--font-md);font-weight:700;background:var(--color-primary);color:var(--color-white);border:2px solid var(--color-white);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}#add-points:hover:not(:disabled){background-color:var(--color-info-dark)}#add-points:disabled{background-color:#bea2d979;cursor:not-allowed;opacity:.7}.direct-input-container{display:flex;flex-direction:column;gap:.75rem;width:100%}#direct-player-indicator{display:flex;align-items:center;justify-content:center}.direct-buttons-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--spacing-sm);width:100%;padding-top:var(--spacing-lg);align-items:center}.player-indicator-container{height:50px;display:flex;align-items:center;justify-content:center}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn var(--transition-normal) ease}.modal.hidden{display:none}#game-menu-modal,#winner-modal,#tutorial-modal{z-index:var(--z-modal)}.modal-content{display:flex;flex-direction:column;gap:var(--spacing-xl);background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-md);max-width:400px;width:90%;box-shadow:var(--shadow-xl);animation:slideUp var(--transition-normal) ease;position:relative}.settings-content{display:flex;flex-direction:column;gap:var(--spacing-md);color:var(--color-gray-900)}.settings-content .checkbox-label{color:var(--color-gray-900)}.settings-content input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--color-black)!important;border-radius:4px;cursor:pointer;position:relative;transition:all var(--transition-fast);background-color:transparent}.settings-content input[type=checkbox]:hover{border-color:var(--color-gray-900)!important;background-color:#0000000d}.settings-content input[type=checkbox]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.settings-content input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.modal-close-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;border:none;background-color:transparent;color:var(--color-primary-dark);border-radius:var(--radius-circle);font-size:var(--font-2xl);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:var(--z-elevated)}.modal-close-btn:hover{color:var(--color-gray-900)}.modal-close-btn:active{transform:scale(.95)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}#winner-title{font-size:var(--font-3xl);gap:var(--spacing-md);width:100%}.ranking-container{display:flex;flex-direction:column;gap:var(--spacing-md);max-height:400px;padding-bottom:var(--spacing-sm);padding-top:var(--spacing-sm)}.rank-row{display:flex;align-items:center;gap:.75rem}.rank-number{font-size:var(--font-2xl);font-weight:700;color:var(--color-gray-900);min-width:2rem;text-align:right}.rank-row.first-place .rank-number{font-size:var(--font-4xl)}.rank-players{display:flex;gap:var(--spacing-md);flex-wrap:wrap;align-items:center}.player-result{display:flex;align-items:center;gap:var(--spacing-sm)}.rank-circle{width:50px;height:50px;border-radius:var(--radius-circle);box-shadow:0 2px 8px #0003}.rank-row.first-place .rank-circle{width:80px;height:80px;animation:pulse 1s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.rank-score{font-size:1.2rem;font-weight:600;color:#555}.rank-row.first-place .rank-score{font-size:var(--font-2xl);color:var(--color-gray-900)}#tutorial-modal .modal-content{max-width:500px;text-align:center}#tutorial-modal h2{font-size:var(--font-2xl);color:var(--color-gray-900);line-height:1.5}#tutorial-modal .modal-buttons{flex-direction:row;gap:var(--spacing-md)}#tutorial-modal .modal-btn{flex:1}.modal-fullscreen{padding:var(--spacing-md)}.modal-content-fullscreen{width:100%!important;max-width:none!important;height:100%;overflow:hidden;padding:0;gap:var(--spacing-sm)!important;display:flex;flex-direction:column}.modal-content-fullscreen>h2{padding:var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);margin:0 0 var(--spacing-md) 0;flex-shrink:0}.instructions-modal-inner{display:flex;flex-direction:column;height:100%;overflow:hidden}.instructions-modal-inner h2{margin:0 0 var(--spacing-lg) 0;text-align:center;font-size:var(--font-2xl);color:var(--color-gray-900);flex-shrink:0}.instructions-modal-inner .instruction-tabs{flex-shrink:0}.instructions-modal-inner .tab-content-container{flex:1;overflow-y:auto;overflow-x:hidden}.modal-content-fullscreen .tab-content-container{border-bottom-left-radius:var(--spacing-sm);border-bottom-right-radius:var(--spacing-sm)}#color-picker-modal{display:flex;align-items:center;justify-content:center}#color-picker-modal.hidden{display:none!important}.color-picker-content{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 8px 32px #0000004d;max-width:400px;width:90%;position:relative}.color-picker-content h3{margin:0 0 var(--spacing-lg) 0;text-align:center;font-size:var(--font-xl);color:var(--color-gray-900)}.color-palette{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.color-option{width:80px;height:80px;border-radius:var(--radius-circle);cursor:pointer;border:3px solid transparent;transition:all var(--transition-fast);position:relative;margin:0 auto}.color-option:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.color-option.selected{border-color:var(--color-black);box-shadow:0 0 0 3px #0003}.used-badge{position:absolute;top:-5px;right:-5px;width:24px;height:24px;background-color:#f44;color:var(--color-white);border-radius:var(--radius-circle);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;border:2px solid var(--color-white);box-shadow:var(--shadow-sm);z-index:var(--z-elevated);pointer-events:none}.screen-header-container{background-color:var(--color-topo-backdrop);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--color-white);padding:var(--spacing-md);position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;width:100%}#params-screen .screen-header-container{background-color:var(--color-topo-backdrop);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:fixed;top:0;left:0;right:0;max-width:var(--max-width);margin:0 auto;z-index:var(--z-sticky)}.screen-header-container h3{font-family:var(--font-primary);text-align:center;font-weight:400}.params-screen-content{padding:var(--spacing-md);padding-top:5rem;display:flex;flex-direction:column;gap:var(--spacing-lg)}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;z-index:var(--z-modal);pointer-events:auto;animation:fadeIn var(--transition-normal) ease}.tutorial-overlay.hidden{display:none}.tutorial-tooltip{position:fixed;max-width:60%;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0 4px 20px #00000026;z-index:var(--z-tooltip);animation:tooltipFadeIn var(--transition-normal) ease}.tutorial-tooltip.hidden{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.tooltip-content{padding:var(--spacing-sm)}.tooltip-content p{margin:0 0 var(--spacing-md) 0;color:var(--color-gray-900);line-height:1.5;font-size:var(--font-sm);font-family:Poppins,sans-serif;font-weight:500}.tooltip-buttons{display:flex;gap:var(--spacing-md);justify-content:space-between;align-items:center}.tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip-arrow.down{bottom:-10px;transform:translate(-50%);border-width:10px 10px 0 10px;border-color:var(--color-white) transparent transparent transparent}.tooltip-arrow.up{top:-10px;transform:translate(-50%);border-width:0 10px 10px 10px;border-color:transparent transparent var(--color-white) transparent}.tooltip-arrow.right{right:-10px;top:50%;transform:translateY(-50%);border-width:10px 0 10px 10px;border-color:transparent transparent transparent var(--color-white)}.tooltip-arrow.left{left:-10px;top:50%;transform:translateY(-50%);border-width:10px 10px 10px 0;border-color:transparent var(--color-white) transparent transparent}.top-left-buttons{position:absolute;top:var(--spacing-md);left:var(--spacing-md);display:flex;gap:var(--spacing-sm);align-items:center;z-index:var(--z-elevated);visibility:visible!important}.instagram-link{display:flex!important;width:40px;height:40px;cursor:pointer;transition:all var(--transition-fast);visibility:visible!important;align-items:center;justify-content:center}.instagram-link:hover{transform:scale(1.1);opacity:.8}.instagram-link:active{transform:scale(.95)}.instagram-icon{width:75%;height:75%;display:block;object-fit:contain;margin:auto}.install-pwa-icon-btn{width:40px;height:40px;border:none;background:transparent;color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);padding:0}.install-pwa-icon-btn:hover{transform:scale(1.1);opacity:.8}.install-pwa-icon-btn:active{transform:scale(.95)}.install-pwa-icon-btn.hidden{display:none}.install-pwa-icon-btn .material-symbols-outlined{font-size:32px}.language-switcher{position:absolute;top:var(--spacing-md);right:var(--spacing-md);display:flex;gap:var(--spacing-md);z-index:var(--z-elevated)}.language-flag{font-size:32px;cursor:pointer;opacity:.5;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.language-flag:hover{opacity:.8;transform:scale(1.1)}.language-flag.active{opacity:1;transform:scale(1.15)}#landing-screen{position:relative;text-align:center;padding:var(--spacing-md);background-color:var(--color-topo-green-dark);min-height:100dvh;color:var(--color-white)}#landing-screen.active{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}#landing-screen .logo-container,#landing-screen .landing-buttons{transition:opacity .8s ease-out}#landing-screen.fade-out .logo-container,#landing-screen.fade-out .landing-buttons{opacity:0}.logo-container{position:absolute;top:8vh;left:50%;transform:translate(-50%);z-index:20}.board-container{position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(50%);width:calc(100vw + 32px);max-width:932px;pointer-events:none;z-index:5;display:flex;align-items:center;justify-content:center}.board-image-container{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.board-image{width:100%;height:auto;display:block}.board-container.landing-screen.animated{animation:board-fly-out 1.4s cubic-bezier(.4,0,.2,1) forwards}.board-container.landing-screen.animated .board-image{animation:board-spin-shrink 1.4s cubic-bezier(.4,0,.2,1) forwards}.board-container.landing-screen.enter-from-exit{animation:board-enter-from-bottom-left 1.4s cubic-bezier(.4,0,.2,1) forwards}.board-container.landing-screen.enter-from-exit .board-image{animation:board-image-rotate-enter-landing 1.4s cubic-bezier(.4,0,.2,1) forwards}@keyframes board-fly-out{0%{bottom:0;left:50%;transform:translate(-50%) translateY(50%)}to{bottom:-50vh;left:-30%;transform:translate(-50%) translateY(50%)}}@keyframes board-spin-shrink{0%{transform:scale(1) rotate(0)}to{transform:scale(.4) rotate(360deg)}}@keyframes board-enter-from-bottom-left{0%{bottom:-50vh;left:-30%;transform:translate(-50%) translateY(50%);opacity:1}to{bottom:0;left:50%;transform:translate(-50%) translateY(50%);opacity:1}}@keyframes board-image-rotate-enter-landing{0%{transform:scale(.4) rotate(360deg)}to{transform:scale(1) rotate(0)}}.landing-buttons{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%;max-width:320px;position:relative;z-index:20}.landing-btn{padding:1.2rem 2rem;font-size:var(--font-xl);font-weight:600;color:var(--color-gray-900);background:var(--color-white);border:2px solid var(--color-black);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 4px 15px #0000004d}.landing-btn:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0006}.landing-btn:active{transform:translateY(-1px)}#params-screen{background-color:var(--color-topo-green-dark);height:100dvh;color:var(--color-white);position:relative;overflow-y:auto;overflow-x:hidden}#params-screen .back-btn,#params-screen .player-selection,#params-screen .game-settings,#params-screen #player-setup,#params-screen #start-game,#params-screen #player-colors{transition:opacity 1.2s ease-in}#params-screen:not(.active) .back-btn,#params-screen:not(.active) .player-selection,#params-screen:not(.active) .game-settings,#params-screen:not(.active) #player-setup,#params-screen:not(.active) #start-game,#params-screen:not(.active) #player-colors{opacity:0}#params-screen.active .back-btn,#params-screen.active .player-selection,#params-screen.active .game-settings,#params-screen.active #player-setup,#params-screen.active #start-game,#params-screen.active #player-colors{opacity:1}#params-screen.fade-out .back-btn,#params-screen.fade-out .player-selection,#params-screen.fade-out .game-settings,#params-screen.fade-out #player-setup,#params-screen.fade-out #start-game,#params-screen.fade-out #player-colors{opacity:0;transition:opacity .8s ease-out}.board-container.params-screen{position:relative;left:0;bottom:auto;transform:none;margin:1rem auto;opacity:0;transform:translate(-100%);width:calc(100vw - 5rem);max-width:calc(100vw - 5rem)}.board-container.params-screen:not(.enter) #player-colors{opacity:0}.board-container.params-screen.enter{animation:board-enter-from-left .6s cubic-bezier(.4,0,.2,1) forwards}.board-container.params-screen.exit{animation:board-exit-to-left .6s cubic-bezier(.4,0,.2,1) forwards}.board-container.params-screen.exit .board-image{animation:board-image-rotate-exit .6s cubic-bezier(.4,0,.2,1) forwards!important}.board-container.params-screen.enter #player-colors:not(.rotating-container):not(.animation-complete){animation:player-colors-delayed-fade .9s forwards}#player-colors.animation-complete{opacity:1!important}#player-colors.rotating-container,.player-circle-wrapper.rotation-complete{opacity:1}.board-container.params-screen.enter .board-image{animation:board-image-rotate-enter .6s cubic-bezier(.4,0,.2,1) forwards}@keyframes board-enter-from-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes board-exit-to-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes board-image-rotate-enter{0%{transform:rotate(-360deg)}to{transform:rotate(45deg)}}@keyframes board-image-rotate-exit{0%{transform:rotate(45deg)}to{transform:rotate(-315deg)}}@keyframes player-colors-delayed-fade{0%{opacity:0}66.67%{opacity:0}to{opacity:1}}@keyframes player-colors-fade-out{0%{opacity:1}to{opacity:0}}.player-selection{position:relative;z-index:var(--z-elevated)}.game-settings{display:flex;flex-direction:row;gap:var(--spacing-md);max-width:100%;position:relative;z-index:var(--z-elevated)}.setting-group{display:flex;flex-direction:column;gap:var(--spacing-sm);flex:1}.setting-group label{font-size:var(--font-md);font-weight:600;color:var(--color-white);text-align:left}.setting-group input[type=number]{padding:.75rem;font-size:var(--font-lg);border:2px solid var(--color-black);border-radius:var(--radius-sm);background-color:var(--color-gray-100);transition:all var(--transition-fast);text-align:left}.setting-group input[type=number]:focus{outline:none;border-color:var(--color-info);background-color:var(--color-white);box-shadow:0 0 0 3px #2196f31a}.setting-group input[type=number]:disabled{background-color:var(--color-locked);color:var(--color-gray-700);cursor:not-allowed}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);cursor:pointer;font-size:.9rem;color:var(--color-white)}.checkbox-label input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid var(--color-white);border-radius:4px;cursor:pointer;position:relative;transition:all var(--transition-fast);background-color:transparent}.checkbox-label input[type=checkbox]:hover{border-color:var(--color-white);background-color:#ffffff1a}.checkbox-label input[type=checkbox]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-label input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-label span{-webkit-user-select:none;user-select:none}#player-setup{display:flex;flex-direction:column;margin-bottom:4rem;gap:var(--spacing-lg);position:relative;z-index:var(--z-elevated)}.player-setup-header{position:relative;text-align:start;display:flex;align-items:start;justify-content:start}.player-setup-header h3,.player-setup-header h4{margin:0}#game-screen.active{display:flex;flex-direction:column;height:100dvh;position:relative}#game-screen.active .bottom-panel{animation:slide-up var(--transition-normal) ease-out}#game-board{height:100dvh;position:relative;border:1px solid var(--color-gray-500);border-radius:var(--radius-sm) var(--radius-sm) 0 0;overflow-y:auto;box-shadow:0 2px 5px #0000001a;-webkit-overflow-scrolling:touch;transition:height var(--transition-normal) ease-out;padding-bottom:0}#game-screen.panel-open #game-board{height:calc(100dvh - 156px);border-radius:var(--radius-sm) var(--radius-sm) 0 0}#game-board{height:100%}#scoreboard{width:100%;height:100%;overflow:auto}.table-container{display:table;width:100%;border-collapse:collapse;table-layout:fixed}.header-row{display:table-row;position:sticky;top:0;z-index:var(--z-sticky);background-color:var(--color-white);box-shadow:var(--shadow-sm)}.corner-cell{display:table-cell;width:40px;min-width:40px;background-color:var(--color-white);border-bottom:2px solid #b4b4b4;border-right:2px solid #b4b4b4;text-align:center;vertical-align:middle;padding:0}.corner-cell .icon-btn{margin:0 auto;display:block;position:relative;z-index:var(--z-elevated)}.player-header{display:table-cell;width:80px;min-width:80px;max-width:80px;padding:var(--spacing-sm) var(--spacing-md);text-align:center;background-color:var(--color-white);border-bottom:2px solid #b4b4b4;border-right:1px solid var(--color-gray-500)}.player-header:last-child{border-right:none}.player-color{width:30px;height:30px;border-radius:var(--radius-circle);margin:0 auto;opacity:0;animation:fade-in-spin .8s ease-out forwards}@keyframes fade-in-spin{0%{opacity:0;transform:rotateY(720deg)}to{opacity:1;transform:rotateY(0)}}.player-header:nth-child(2) .player-color{animation-delay:0s}.player-header:nth-child(3) .player-color{animation-delay:.08s}.player-header:nth-child(4) .player-color{animation-delay:.16s}.player-header:nth-child(5) .player-color{animation-delay:.24s}.round-row{display:table-row}.round-number{display:table-cell;width:40px;min-width:40px;max-width:40px;padding:.75rem;text-align:center;font-weight:700;background-color:var(--color-gray-100);border-bottom:1px solid var(--color-gray-500);border-right:2px solid #b4b4b4;vertical-align:middle}.round-number.active{background-color:var(--color-selected);color:var(--color-primary-dark);font-weight:700;position:relative;z-index:var(--z-base)}.round-number.empty{background-color:transparent}.round-row:has(.round-number.active) .score-cell-content{font-weight:700}.round-row:has(.round-number.active) .round-number,.round-row:has(.round-number.active) .score-cell{border-top:2px solid var(--color-black);border-bottom:2px solid var(--color-black)}.round-row:has(.round-number.active) .score-cell{position:relative;z-index:var(--z-base)}.score-cell{display:table-cell;width:80px;min-width:80px;max-width:80px;padding:0;min-height:46px;border-bottom:1px solid var(--color-gray-500);border-right:1px solid var(--color-gray-500);cursor:pointer;transition:background-color var(--transition-fast);vertical-align:middle;position:relative}.score-cell.starting-player:after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;background-color:var(--color-black);border-radius:var(--radius-circle);z-index:var(--z-elevated)}.score-cell.starting-player-inactive:after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;background-color:var(--color-black);opacity:.15;border-radius:var(--radius-circle);z-index:var(--z-elevated)}.score-cell-content{display:flex;align-items:center;justify-content:center;height:100%;padding:.75rem .25rem;font-family:var(--font-mono);font-size:var(--font-lg);font-weight:400;position:relative}.score-cell-content:before{content:"";position:absolute;left:0;top:0;bottom:0;width:50%;background-color:#00ff001a;pointer-events:none}.score-start{width:28px;text-align:right;flex-shrink:0;position:relative;z-index:var(--z-base)}.score-plus{width:12px;text-align:center;flex-shrink:0;margin:0 2px;position:relative;z-index:var(--z-base)}.score-gained{width:28px;text-align:left;flex-shrink:0;position:relative;z-index:var(--z-base)}.score-cell:last-child{border-right:none}.score-cell.editable:hover{background-color:var(--color-hover)}.score-cell.selected{background-color:var(--color-selected);box-shadow:inset 0 0 0 2px var(--color-primary-dark)}.score-cell.locked{background-color:var(--color-locked);color:var(--color-gray-700);cursor:not-allowed}.summary-row{border-top:3px solid var(--color-black);height:52px}.summary-row.hidden{display:none}.summary-cell{background-color:var(--color-hover);font-weight:700;font-size:var(--font-lg);padding:.75rem;height:52px;vertical-align:middle}.summary-cell .score-cell-content:before{display:none}.summary-cell .score-total{display:block;width:100%;text-align:center}#touch-ghost{position:absolute;pointer-events:none;z-index:1000;opacity:.7;border-radius:50%;box-shadow:0 5px 15px #0000004d}.floating-tokens-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:hidden;perspective:1000px}.floating-token{position:absolute;width:60px;height:60px;pointer-events:none;will-change:transform;transform-style:preserve-3d}.floating-token img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3)) drop-shadow(0 0 2px rgba(0,0,0,.2));position:relative;z-index:3}.token-back-layer{position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(-2px) rotateY(180deg);z-index:0}.token-back-layer img{width:100%;height:100%;object-fit:contain;display:block;filter:none}.floating-token:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:inherit;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:50%;transform:translateZ(-.7px) rotateY(180deg);z-index:2}.floating-token:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transform:translateZ(-1.3px);z-index:1}.floating-token.token-yellow:after{background:var(--color-token-yellow)}.floating-token.token-blue:after{background:var(--color-token-blue)}.floating-token.token-green:after{background:var(--color-token-green)}.floating-token.token-red:after{background:var(--color-token-red)}@keyframes scatter-to-top{0%{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translateY(0);opacity:1}to{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translateY(-150vh);opacity:0}}@keyframes scatter-to-bottom{0%{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translateY(0);opacity:1}to{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translateY(150vh);opacity:0}}@keyframes scatter-to-left{0%{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translate(0);opacity:1}to{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translate(-150vw);opacity:0}}@keyframes scatter-to-right{0%{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translate(0);opacity:1}to{transform:rotateY(var(--rotateY)) rotate(var(--spin)) translate(150vw);opacity:0}}.floating-token.scatter-top{animation:scatter-to-top .8s cubic-bezier(.4,0,1,1) forwards}.floating-token.scatter-bottom{animation:scatter-to-bottom .8s cubic-bezier(.4,0,1,1) forwards}.floating-token.scatter-left{animation:scatter-to-left .8s cubic-bezier(.4,0,1,1) forwards}.floating-token.scatter-right{animation:scatter-to-right .8s cubic-bezier(.4,0,1,1) forwards}#instructions-screen{position:relative;background-color:var(--color-topo-green-dark);min-height:100dvh;overflow-y:auto}#instructions-screen .screen-header-container{position:relative;z-index:var(--z-elevated)}.instruction-section h4{font-size:var(--font-lg)}.instructions-menu{display:flex;flex-direction:column;padding:1rem;gap:1rem;max-width:600px;margin:0 auto;position:relative;z-index:var(--z-elevated)}.instruction-item-btn{display:flex;align-items:center;gap:var(--spacing-md);padding:1rem;background-color:var(--color-white);border:2px solid var(--color-black);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:left;box-shadow:var(--shadow-sm)}.instruction-item-btn:hover{background-color:var(--color-gray-100);border-color:var(--color-info);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.instruction-item-btn:active{transform:translateY(0)}.instruction-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--color-gray-900);border-radius:var(--radius-circle);font-weight:700;font-size:var(--font-lg);flex-shrink:0}.instruction-title{flex:1;font-size:var(--font-lg);font-weight:600;color:var(--color-gray-900)}.instruction-arrow{font-size:var(--font-2xl);color:var(--color-gray-900);flex-shrink:0}.instruction-item-btn:hover .instruction-arrow{color:var(--color-info)}#instruction-content-screen{position:relative;background-color:var(--color-topo-green-dark);height:100dvh;flex-direction:column;overflow:hidden}#instruction-content-screen.active{display:flex}#instruction-content-screen .screen-header-container{position:relative;z-index:var(--z-elevated);flex-shrink:0;padding:16px}#instruction-content-screen .icon-btn.back-btn{left:8px;top:8px}.instruction-tabs{position:relative;z-index:var(--z-elevated);display:flex;overflow-x:auto;background-color:var(--color-white);border-bottom:2px solid var(--color-gray-400);flex-shrink:0;padding:0 16px;gap:var(--spacing-sm);-webkit-overflow-scrolling:touch;scrollbar-width:none}.instruction-tabs::-webkit-scrollbar{display:none}.instruction-tab{padding:var(--spacing-md) 1.5rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:var(--font-md);font-weight:600;color:var(--color-gray-800);transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.instruction-tab:hover{color:var(--color-secondary);background-color:var(--color-gray-100)}.instruction-tab.active{color:var(--color-primary-dark);border-bottom-color:var(--color-primary-dark)}.tab-content-container{position:relative;z-index:var(--z-elevated);flex:1;padding:var(--spacing-lg) 16px;background-color:var(--color-gray-200);max-height:100%;overflow-y:auto}.tab-content{display:none;animation:fadeIn var(--transition-normal);color:var(--color-gray-900)}.tab-content.active{display:block}.tab-content>.inline-container:first-child{margin-bottom:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.inline-container{display:flex;flex-direction:column;gap:var(--spacing-md);flex-wrap:wrap;padding:var(--spacing-md);color:var(--color-gray-900);background-color:var(--color-white);border-radius:var(--spacing-md);font-family:Poppins,sans-serif}.instruction-with-main-header{display:flex;flex-direction:column;gap:var(--spacing-xl)}.instruction-image-group{display:flex;flex-direction:column;gap:var(--spacing-xl);align-items:center}.instruction-image-group-small-gap{display:flex;flex-direction:column;gap:var(--spacing-md);align-items:center}.image-with-caption{display:flex;flex-direction:column;align-items:center;background-color:var(--color-white);border-radius:var(--spacing-md);gap:var(--spacing-sm)}.image-with-caption-no-border{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.caption{padding:0 var(--spacing-md) var(--spacing-md) var(--spacing-md);font-size:var(--font-sm);color:var(--color-gray-800);text-align:start;font-family:Poppins,sans-serif}.instruction-image{margin:var(--spacing-md) 0;padding:var(--spacing-md) var(--spacing-xl);max-width:100%}.instruction-image-wide{margin:var(--spacing-md) 0;padding:0 var(--spacing-md);max-width:100%}.instruction-list{display:flex;flex-direction:column;gap:var(--spacing-md);list-style-type:disc;padding-left:var(--spacing-md);color:var(--color-gray-900)}.instruction-list li{font-family:Poppins,sans-serif;font-weight:400}.instruction-ordered-list{display:flex;flex-direction:column;gap:var(--spacing-md);padding-left:var(--spacing-md);color:var(--color-gray-900)}ul li::marker{color:var(--color-success-dark)}.instruction-section{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.instruction-section p{font-family:Poppins,sans-serif;font-weight:400;line-height:1.6;font-size:var(--font-md)}