:root{--primary-color: #ff6b35;--secondary-color: #4a90e2;--accent-color: #ffd23f;--success-color: #28a745;--bg-primary: #f8f9fa;--bg-secondary: #fff;--text-primary: #333;--text-secondary: #6c757d;--border-color: #e9ecef;--grid-bg: linear-gradient(135deg,#f1f3f4,#e9ecef);--grid-cell-bg: rgba(255,255,255,0.8);--overlay-bg: rgba(0,0,0,0.7)} [data-theme="dark"]{--primary-color: #ff8c5a;--secondary-color: #5da4e8;--accent-color: #ffe066;--success-color: #4caf50;--bg-primary: #1a1a2e;--bg-secondary: #16213e;--text-primary: #eaeaea;--text-secondary: #a0a0a0;--border-color: #2d3a5c;--grid-bg: linear-gradient(135deg,#0f0f23,#1a1a2e);--grid-cell-bg: rgba(45,58,92,0.8);--overlay-bg: rgba(0,0,0,0.85)} [data-theme="italian"]{--primary-color: #ce2b37;--secondary-color: #009246;--accent-color: #f4f5f0;--success-color: #009246;--bg-primary: #fef9e7;--bg-secondary: #fff8dc;--text-primary: #2c1810;--text-secondary: #5d4037;--border-color: #d4a574;--grid-bg: linear-gradient(135deg,#fef3c7,#fed7aa);--grid-cell-bg: rgba(255,248,220,0.9);--overlay-bg: rgba(44,24,16,0.8)} [data-theme="neon"]{--primary-color: #ff00ff;--secondary-color: #00ffff;--accent-color: #ffff00;--success-color: #00ff00;--bg-primary: #0a0a0a;--bg-secondary: #141414;--text-primary: #ffffff;--text-secondary: #b0b0b0;--border-color: #333333;--grid-bg: linear-gradient(135deg,#1a0a2e,#0a1a2e);--grid-cell-bg: rgba(30,30,50,0.9);--overlay-bg: rgba(0,0,0,0.9)} *{box-sizing: border-box;margin: 0;padding: 0} html{touch-action: manipulation} body{font-family: 'Arial',sans-serif;background: linear-gradient(135deg,var(--bg-primary) 0%,#e9ecef 100%);color: var(--text-primary);min-height: 100vh;display: flex;align-items: center;justify-content: center;overscroll-behavior: none;touch-action: manipulation;-webkit-touch-callout: none;-webkit-user-select: none;user-select: none} .screen{display: none;width: 100%;height: 100vh;position: absolute;top: 0;left: 0;padding: 20px} .screen.active{display: flex;align-items: center;justify-content: center} #game-screen{background: url('UI/title/bg_vertical.webp') center center / auto 100% no-repeat;background-color: #e0e0e0} #game-screen.active{padding: 10px;align-items: stretch} #main-menu{background: url('UI/title/bg_vertical.webp') center center / auto 100% no-repeat;background-color: #e0e0e0} .menu-container{text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;width: 100%;max-width: calc(100vh * 895 / 1334);margin: 0 auto} .menu-buttons{display: flex;flex-direction: column;gap: 25px;align-items: center;margin-top: 30%} .menu-btn-large{background: rgba(255,255,255,0.95);border: 3px solid var(--primary-color);color: var(--primary-color);padding: 13px 60px;font-size: 1.5em;border-radius: 16px;cursor: pointer;transition: all 0.3s ease;min-width: 250px;box-shadow: 0 4px 15px rgba(0,0,0,0.2);font-weight: 700} .menu-btn-large:hover{background: var(--primary-color);color: white;transform: translateY(-3px) scale(1.02);box-shadow: 0 6px 20px rgba(255,107,53,0.4)} .menu-btn-large:active{transform: translateY(0) scale(0.98)} .game-container{max-width: min(600px,calc(100vh * 895 / 1334));width: 100%;height: 100%;margin: 0 auto;background: transparent;border-radius: 16px;padding: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden} .game-header{text-align: center;margin-bottom: 5px} .game-header h2{font-size: 2em;margin-bottom: 10px;color: var(--primary-color);font-weight: bold} .game-info{display: flex;justify-content: center;gap: 30px;margin-bottom: 8px;flex-wrap: wrap} .info-item{background: rgba(80,80,80,0.85);padding: 6px 14px;border-radius: 0;font-size: 1.1em;color: #fff;border: none;font-weight: 500} .info-item span:first-child{color: rgba(255,255,255,0.75);font-weight: 400;font-size: 0.9em} .info-item span:last-child{color: #fff;font-weight: 700;font-size: 1.1em;margin-left: 4px} .game-controls{display: flex;justify-content: center;gap: 30px;margin-bottom: 8px;flex-wrap: wrap} .control-btn{background: linear-gradient(180deg,#ffffff 0%,#f0f0f0 100%);border: 2px solid #d0d0d0;color: #333;padding: 10px 18px;border-radius: 10px;cursor: pointer;transition: all 0.2s ease;font-weight: 700;font-size: 0.95em;box-shadow: 0 3px 6px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8);text-shadow: 0 1px 0 rgba(255,255,255,0.5)} .control-btn:hover{background: linear-gradient(180deg,#f5f5f5 0%,#e8e8e8 100%);transform: translateY(-2px);box-shadow: 0 5px 10px rgba(0,0,0,0.2),0 2px 4px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8)} .control-btn:active{transform: translateY(0);box-shadow: 0 1px 3px rgba(0,0,0,0.15),inset 0 1px 2px rgba(0,0,0,0.1);background: linear-gradient(180deg,#e8e8e8 0%,#f0f0f0 100%)} .grid-container{position: relative;margin: 10px auto;width: 100%;max-width: 500px;aspect-ratio: 1 / 1;background: var(--grid-bg);border-radius: 12px;padding: 10px;box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);border: 2px solid rgba(255,107,53,0.15);touch-action: none;-webkit-user-select: none;user-select: none;overscroll-behavior: contain} .grid{display: grid;grid-template-columns: repeat(4,1fr);grid-template-rows: repeat(4,1fr);gap: 10px;width: calc(100% - 20px);height: calc(100% - 20px);position: absolute;top: 10px;left: 10px} .grid-cell{background: var(--grid-cell-bg);border-radius: 8px;border: 1px solid rgba(74,144,226,0.1);box-shadow: inset 0 1px 2px rgba(0,0,0,0.05)} .tile{position: absolute;display: flex;align-items: center;justify-content: center;font-size: 2em;font-weight: bold;border-radius: 8px;background-size: cover;background-position: center;background-repeat: no-repeat;color: #fff;text-shadow: 2px 2px 6px rgba(0,0,0,0.9);border: 3px solid rgba(255,255,255,0.6);text-align: center;line-height: 1;transition: transform 0.1s ease-out;box-shadow: 0 2px 8px rgba(0,0,0,0.15)} .tile-new{animation: tile-appear 0.2s ease-in-out} .tile-merged{animation: tile-merge 0.2s ease-in-out} @keyframes tile-appear{0%{transform: scale(0)} 100%{transform: scale(1)} } .tile-removing{animation: tile-remove 0.6s ease-out forwards;pointer-events: none;z-index: 100} @keyframes tile-remove{0%{transform: scale(1);opacity: 1;filter: brightness(1)} 30%{transform: scale(1.3);opacity: 1;filter: brightness(1.5) saturate(1.5);box-shadow: 0 0 30px rgba(255,100,100,0.8)} 60%{transform: scale(1.1) rotate(15deg);opacity: 0.7;filter: brightness(2) saturate(0)} 100%{transform: scale(0) rotate(360deg) translateY(-50px);opacity: 0;filter: brightness(3)} } .tile-remove-particle{position: absolute;width: 10px;height: 10px;border-radius: 50%;background: radial-gradient(circle,#ff6b6b,#feca57);pointer-events: none;animation: particle-burst 0.6s ease-out forwards} @keyframes particle-burst{0%{transform: scale(1) translate(0,0);opacity: 1} 100%{transform: scale(0) translate(var(--px,50px),var(--py,-50px));opacity: 0} } .stage-info{background: linear-gradient(135deg,var(--primary-color),var(--accent-color));color: white;padding: 4px 10px;border-radius: 12px;font-weight: bold;transition: transform 0.3s ease,box-shadow 0.3s ease} .stage-info span:first-child{color: rgba(255,255,255,0.9)} #game-stage{font-size: 1.1em;text-shadow: 0 1px 2px rgba(0,0,0,0.3)} .stage-info.stage-updated{animation: stage-pulse 0.5s ease-out} @keyframes stage-pulse{0%{transform: scale(1);box-shadow: 0 0 0 rgba(102,126,234,0)} 50%{transform: scale(1.2);box-shadow: 0 0 20px rgba(102,126,234,0.8)} 100%{transform: scale(1);box-shadow: 0 0 0 rgba(102,126,234,0)} } .stage-notification{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0);background: linear-gradient(135deg,#667eea,#764ba2);color: white;padding: 30px 50px;border-radius: 20px;font-size: 1.5em;font-weight: bold;text-align: center;z-index: 1000;box-shadow: 0 10px 40px rgba(102,126,234,0.5);animation: stage-popup 2s ease-out forwards} .stage-notification .stage-number{display: block;font-size: 2em;margin-top: 10px;color: #ffd700;text-shadow: 0 0 20px rgba(255,215,0,0.8)} .stage-notification .stage-info-text{display: block;font-size: 0.6em;margin-top: 10px;opacity: 0.9} @keyframes stage-popup{0%{transform: translate(-50%,-50%) scale(0);opacity: 0} 20%{transform: translate(-50%,-50%) scale(1.1);opacity: 1} 30%{transform: translate(-50%,-50%) scale(1)} 80%{transform: translate(-50%,-50%) scale(1);opacity: 1} 100%{transform: translate(-50%,-50%) scale(0.8);opacity: 0} } @keyframes grid-shake{0%,100%{transform: translateX(0)} 10%,30%,50%,70%,90%{transform: translateX(-4px)} 20%,40%,60%,80%{transform: translateX(4px)} } .grid-container.shake{animation: grid-shake 0.4s ease-in-out} .merge-popup{position: absolute;font-weight: 900;color: #00bfff;text-shadow: -2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 8px #fff,0 0 15px rgba(0,191,255,0.9),0 0 30px rgba(0,150,255,0.6);pointer-events: none;z-index: 1000;animation: merge-popup-float 1.2s ease-out forwards} @keyframes merge-popup-float{0%{opacity: 1;transform: translateY(0) scale(0.5)} 15%{opacity: 1;transform: translateY(-15px) scale(1.3)} 40%{opacity: 1;transform: translateY(-40px) scale(1.1)} 100%{opacity: 0;transform: translateY(-80px) scale(0.9)} } @keyframes tile-merge{0%{transform: scale(0.8) rotate(5deg)} 25%{transform: scale(1.2) rotate(-2deg)} 50%{transform: scale(1.05) rotate(1deg)} 100%{transform: scale(1) rotate(0deg)} } .tile-moving{z-index: 10} .tile-avoiding-collision{z-index: 500;box-shadow: 0 4px 8px rgba(0,0,0,0.3)} .tile-collision-risk{transition: transform 0.1s ease-out,box-shadow 0.1s ease-out;box-shadow: 0 2px 4px rgba(255,0,0,0.2)} .tile-overlapping{z-index: 999;transform: scale(1.1);transition: transform 0.1s ease-in-out} .tile-merging-target{transform: scale(0.9);transition: transform 0.1s ease-in-out} .tile.tile-merged{box-shadow: 0 0 25px rgba(255,255,255,0.9),0 0 50px rgba(255,215,0,0.6),inset 0 0 20px rgba(255,255,255,0.3);border: 3px solid rgba(255,215,0,0.8);animation: tile-pop-enhanced 0.4s cubic-bezier(0.68,-0.55,0.265,1.55)} @keyframes tile-pop-enhanced{0%{transform: scale(0.3) rotate(10deg);filter: brightness(1.5) saturate(1.5)} 25%{transform: scale(1.4) rotate(-5deg);filter: brightness(1.8) saturate(2.0)} 50%{transform: scale(0.95) rotate(2deg);filter: brightness(1.3) saturate(1.3)} 75%{transform: scale(1.1) rotate(-1deg);filter: brightness(1.1) saturate(1.1)} 100%{transform: scale(1) rotate(0deg);filter: brightness(1) saturate(1)} } .tile.small-font{font-size: 1.5em} .tile.tiny-font{font-size: 1.2em} .tile.micro-font{font-size: 1em} .result-container,.ranking-container{text-align: center;width: 100%;max-width: 500px;background: var(--bg-secondary);padding: 40px;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);color: var(--text-primary);border: 2px solid rgba(255,107,53,0.2);box-sizing: border-box} .result-stats{margin: 30px 0} .stat-item{display: flex;justify-content: space-between;margin: 15px 0;padding: 15px;background: var(--bg-primary);border-radius: 8px;font-size: 1.1em;border: 1px solid rgba(74,144,226,0.2);font-weight: 500} .result-buttons{display: flex;gap: 20px;justify-content: center} .result-btn{background: var(--primary-color);border: none;color: white;padding: 12px 25px;font-size: 1em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .result-btn:hover{background: #e74c3c;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255,107,53,0.3)} .ranking-list{margin: 30px 0;max-height: 400px;overflow-y: auto} .ranking-item{display: flex;justify-content: space-between;align-items: center;padding: 15px;margin: 10px 0;background: var(--bg-primary);border-radius: 8px;border-left: 4px solid var(--accent-color);border: 1px solid var(--border-color);color: var(--text-primary);transition: transform 0.2s ease} .ranking-item:hover{transform: translateX(5px);box-shadow: 0 2px 12px rgba(255,107,53,0.15)} .menu-btn:active{transform: translateY(0px);box-shadow: 0 2px 8px rgba(255,107,53,0.2)} .control-btn:active,.result-btn:active,.overlay-btn:active{transform: translateY(0px)} .menu-btn:focus,.control-btn:focus,.result-btn:focus,.overlay-btn:focus{outline: 2px solid var(--accent-color);outline-offset: 2px} .ranking-rank{font-weight: bold;font-size: 1.2em;min-width: 40px} .ranking-info{flex: 1;text-align: left;margin-left: 20px} .ranking-main{display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px} .ranking-score{font-size: 1.1em;font-weight: bold;color: var(--primary-color)} .ranking-time{font-size: 1.0em;font-weight: bold;color: var(--secondary-color)} .ranking-details{font-size: 0.85em;opacity: 0.7;color: var(--text-secondary)} .ranking-win-record{background: linear-gradient(135deg,rgba(255,210,63,0.15),rgba(255,107,53,0.1));border: 2px solid var(--accent-color);box-shadow: 0 2px 8px rgba(255,210,63,0.2)} .ranking-win-record .ranking-score{color: var(--accent-color);font-weight: bold;text-shadow: 0 0 5px rgba(255,210,63,0.3)} .overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--overlay-bg);display: none;align-items: center;justify-content: center;z-index: 1000} .overlay.active{display: flex} .overlay-content{background: var(--bg-secondary);padding: 40px;border-radius: 16px;text-align: center;box-shadow: 0 8px 32px rgba(0,0,0,0.15);color: var(--text-primary);border: 3px solid var(--primary-color)} .overlay-content h3{margin-bottom: 30px;font-size: 1.5em} .overlay-btn{background: var(--secondary-color);border: none;color: white;padding: 10px 20px;margin: 0 10px;font-size: 1em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .overlay-btn:hover{background: #357abd;transform: translateY(-1px);box-shadow: 0 2px 12px rgba(74,144,226,0.3)} .character-popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;align-items: center;justify-content: center;z-index: 2000;pointer-events: none} .character-popup.show{display: flex;animation: popup-show 2s ease-in-out forwards} .character-popup-content{background: var(--bg-secondary);border: 4px solid var(--accent-color);border-radius: 20px;padding: 30px;text-align: center;box-shadow: 0 10px 30px rgba(255,210,63,0.3);transform: scale(0);display: flex;flex-direction: column;align-items: center;gap: 20px;color: var(--text-primary)} .character-popup.show .character-popup-content{animation: popup-bounce 0.6s cubic-bezier(0.68,-0.55,0.265,1.55) forwards} .character-image{width: 235px;height: 235px;background-size: cover;background-position: center;background-repeat: no-repeat;border-radius: 15px;border: 3px solid rgba(255,255,255,0.6);box-shadow: 0 5px 15px rgba(0,0,0,0.3)} #character-name{color: var(--text-primary) !important;font-weight: bold;font-size: 1.3em;line-height: 1.2;word-break: keep-all;overflow-wrap: break-word;display: block;width: 100%;text-align: center;background: linear-gradient(135deg,var(--accent-color),#ffeb3b);padding: 12px 20px;border-radius: 12px;border: 2px solid var(--primary-color);box-shadow: 0 2px 8px rgba(255,210,63,0.3);margin-top: 10px} .character-popup-content .name-short{font-size: 3em} .character-popup-content .name-medium{font-size: 2.5em} .character-popup-content .name-long{font-size: 2em} .character-popup-content .name-very-long{font-size: 1.5em} @keyframes popup-show{0%{opacity: 0} 10%{opacity: 1} 90%{opacity: 1} 100%{opacity: 0} } @keyframes popup-bounce{0%{transform: scale(0)} 50%{transform: scale(1.1)} 100%{transform: scale(1)} } @media (max-width: 768px){.screen{padding: 10px} .game-container{padding: 15px;max-width: 100%} .game-title{font-size: 2em;margin-bottom: 30px} .grid-container{width: 100%;max-width: min(90vw,400px);margin: 5px auto;padding: 8px} .grid{width: calc(100% - 16px);height: calc(100% - 16px);top: 8px;left: 8px;gap: 8px} .game-header{margin-bottom: 4px} .game-header h2{font-size: 1.5em} .game-info{flex-direction: row;gap: 10px;justify-content: center;margin-bottom: 4px} .info-item{font-size: 0.85em;padding: 4px 8px} .game-controls{gap: 30px;margin-bottom: 6px} .control-btn{padding: 8px 14px;font-size: 0.85em} .result-buttons{flex-direction: column;align-items: center} .tile{font-size: 1.5em} .tile.small-font{font-size: 1.2em} .tile.tiny-font{font-size: 1em} .tile.micro-font{font-size: 0.8em} } @media (max-width: 400px){.game-container{padding: 10px} .grid-container{max-width: calc(100vw - 40px);padding: 6px} .grid{width: calc(100% - 12px);height: calc(100% - 12px);top: 6px;left: 6px;gap: 6px} .tile{font-size: 1.2em;border-width: 2px} .tile.small-font{font-size: 1em} .tile.tiny-font{font-size: 0.85em} .tile.micro-font{font-size: 0.7em} .game-header h2{font-size: 1.3em} .game-controls{gap: 24px;margin-bottom: 10px} .control-btn{padding: 7px 12px;font-size: 0.8em} .character-popup-content{padding: 20px;gap: 15px} .character-image{width: 180px;height: 180px} .character-popup-content .name-short{font-size: 2.5em} .character-popup-content .name-medium{font-size: 2em} .character-popup-content .name-long{font-size: 1.5em} .character-popup-content .name-very-long{font-size: 1.2em} } .ranking-status{display: block !important;visibility: visible !important;opacity: 1 !important;margin-top: 20px;padding: 15px;border-radius: 12px;text-align: center;font-size: 16px;line-height: 1.5;width: auto;height: auto;min-height: 60px;box-sizing: border-box} .ranking-status.win{background: linear-gradient(135deg,#4CAF50,#45a049);color: white;box-shadow: 0 4px 15px rgba(76,175,80,0.4)} .ranking-status.eligible{background: linear-gradient(135deg,#FF9800,#F57C00);color: white;box-shadow: 0 4px 15px rgba(255,152,0,0.4)} .ranking-status.registered{background: linear-gradient(135deg,#2196F3,#1976D2);color: white;box-shadow: 0 4px 15px rgba(33,150,243,0.4)} .ranking-status.not-eligible{background: linear-gradient(135deg,#9E9E9E,#757575);color: white;box-shadow: 0 4px 15px rgba(158,158,158,0.4)} .ranking-register-btn{display: inline-block !important;visibility: visible !important;opacity: 1 !important;margin-top: 10px;padding: 10px 20px;background: rgba(255,255,255,0.2);color: white;border: 2px solid rgba(255,255,255,0.8);border-radius: 25px;font-size: 14px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 1px;width: auto;height: auto;min-width: 150px;min-height: 40px} .ranking-register-btn:hover{background: rgba(255,255,255,0.3);border-color: white;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.2)} .ranking-register-btn:active{transform: translateY(0);box-shadow: 0 2px 8px rgba(0,0,0,0.2)} .ranking-win,.ranking-eligible,.ranking-registered,.ranking-not-eligible{font-weight: bold;display: block !important;width: 100%;min-height: 40px;padding: 10px;box-sizing: border-box} .ranking-eligible small,.ranking-not-eligible small{font-size: 12px;font-weight: normal;opacity: 0.9;display: block;margin-top: 5px} @media (max-width: 480px){.screen{padding: 10px} .result-container,.ranking-container{padding: 20px 15px;margin: 0 10px;width: calc(100% - 20px)} .game-header h2{font-size: 1.5em} .ranking-status{font-size: 14px;padding: 12px} .ranking-register-btn{padding: 8px 16px;font-size: 12px} } .error-container{text-align: center;width: 100%;max-width: 500px;background: var(--bg-secondary);padding: 40px;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);color: var(--text-primary);border: 2px solid #e74c3c;box-sizing: border-box} .error-title{color: #e74c3c;font-size: 1.8em;margin-bottom: 20px} .error-message{color: var(--text-secondary);font-size: 1.1em;margin-bottom: 30px;line-height: 1.6} .error-buttons{display: flex;gap: 20px;justify-content: center} .error-btn{background: #e74c3c;border: none;color: white;padding: 12px 30px;font-size: 1em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .error-btn:hover{background: #c0392b;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(231,76,60,0.3)} .error-btn:active{transform: translateY(0)} .error-btn:focus{outline: 2px solid var(--accent-color);outline-offset: 2px} @media (max-width: 480px){.error-container{padding: 20px 15px;margin: 0 10px;width: calc(100% - 20px)} .error-title{font-size: 1.4em} .error-message{font-size: 1em} } .theme-selector{margin-top: 30px} .theme-btn{background: transparent;border: 2px solid var(--border-color);color: var(--text-secondary);padding: 12px 30px;font-size: 1em;border-radius: 12px;cursor: pointer;transition: all 0.3s ease;min-width: 180px;font-weight: 500} .theme-btn:hover{border-color: var(--primary-color);color: var(--primary-color);transform: translateY(-2px)} .theme-modal{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--overlay-bg);display: none;align-items: center;justify-content: center;z-index: 2000} .theme-modal.active{display: flex} .theme-modal-content{background: var(--bg-secondary);padding: 30px;border-radius: 16px;text-align: center;box-shadow: 0 8px 32px rgba(0,0,0,0.2);color: var(--text-primary);border: 3px solid var(--primary-color);max-width: 400px;width: 90%} .theme-modal-content h3{margin-bottom: 25px;font-size: 1.5em;color: var(--primary-color)} .theme-options{display: grid;grid-template-columns: repeat(2,1fr);gap: 15px;margin-bottom: 20px} .theme-option{background: var(--bg-primary);border: 3px solid var(--border-color);border-radius: 12px;padding: 15px 10px;cursor: pointer;transition: all 0.3s ease;display: flex;flex-direction: column;align-items: center;gap: 10px} .theme-option:hover{border-color: var(--secondary-color);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.1)} .theme-option.selected{border-color: var(--primary-color);background: rgba(255,107,53,0.1)} .theme-preview{width: 50px;height: 50px;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 1.5em} .theme-option[data-theme="light"] .theme-preview{background: linear-gradient(135deg,#f8f9fa,#e9ecef);border: 2px solid #ff6b35} .theme-option[data-theme="dark"] .theme-preview{background: linear-gradient(135deg,#1a1a2e,#16213e);border: 2px solid #ff8c5a} .theme-option[data-theme="italian"] .theme-preview{background: linear-gradient(90deg,#009246 33%,#fff 33%,#fff 66%,#ce2b37 66%);border: 2px solid #d4a574} .theme-option[data-theme="neon"] .theme-preview{background: linear-gradient(135deg,#0a0a0a,#1a0a2e);border: 2px solid #ff00ff;box-shadow: 0 0 10px rgba(255,0,255,0.5)} .theme-name{font-weight: 600;font-size: 0.95em;color: var(--text-primary)} .theme-close-btn{background: var(--secondary-color);border: none;color: white;padding: 10px 25px;font-size: 1em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .theme-close-btn:hover{background: #357abd;transform: translateY(-1px)} [data-theme="neon"] .game-title{text-shadow: 0 0 10px var(--primary-color),0 0 20px var(--primary-color)} [data-theme="neon"] .menu-btn:hover,[data-theme="neon"] .control-btn:hover{box-shadow: 0 0 15px var(--primary-color)} [data-theme="neon"] .tile{box-shadow: 0 0 10px rgba(255,0,255,0.3),0 2px 8px rgba(0,0,0,0.3)} @media (max-width: 480px){.theme-options{grid-template-columns: repeat(2,1fr);gap: 10px} .theme-option{padding: 12px 8px} .theme-preview{width: 40px;height: 40px;font-size: 1.2em} .theme-name{font-size: 0.85em} } .stats-selector{margin-top: 15px} .stats-btn{background: transparent;border: 2px solid var(--border-color);color: var(--text-secondary);padding: 12px 30px;font-size: 1em;border-radius: 12px;cursor: pointer;transition: all 0.3s ease;min-width: 180px;font-weight: 500} .stats-btn:hover{border-color: var(--secondary-color);color: var(--secondary-color);transform: translateY(-2px)} .stats-container{text-align: center;width: 100%;max-width: 600px;background: var(--bg-secondary);padding: 30px;border-radius: 16px;box-shadow: 0 4px 20px rgba(0,0,0,0.1);color: var(--text-primary);border: 2px solid rgba(74,144,226,0.2);box-sizing: border-box;max-height: 90vh;overflow-y: auto} .stats-title{color: var(--secondary-color);font-size: 1.8em;margin-bottom: 25px;font-weight: bold} .stats-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 15px;margin-bottom: 25px} .stats-card{background: var(--bg-primary);padding: 20px 15px;border-radius: 12px;border: 1px solid var(--border-color);transition: transform 0.2s ease,box-shadow 0.2s ease} .stats-card:hover{transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.1)} .stats-card.highlight{background: linear-gradient(135deg,rgba(255,107,53,0.1),rgba(255,210,63,0.1));border-color: var(--primary-color)} .stats-label{display: block;font-size: 0.85em;color: var(--text-secondary);margin-bottom: 8px;font-weight: 500} .stats-value{display: block;font-size: 1.5em;font-weight: bold;color: var(--text-primary)} .stats-card.highlight .stats-value{color: var(--primary-color)} .stats-section{margin-top: 25px;padding-top: 20px;border-top: 1px solid var(--border-color)} .stats-section-title{font-size: 1.2em;color: var(--text-primary);margin-bottom: 15px;font-weight: 600} .top-characters{display: flex;flex-direction: column;gap: 10px} .character-rank-item{display: flex;align-items: center;justify-content: space-between;background: var(--bg-primary);padding: 12px 15px;border-radius: 8px;border: 1px solid var(--border-color)} .character-rank-item .rank{font-weight: bold;font-size: 1.1em;color: var(--accent-color);min-width: 30px} .character-rank-item .name{flex: 1;text-align: left;margin-left: 10px;font-weight: 500;color: var(--text-primary)} .character-rank-item .count{color: var(--text-secondary);font-weight: 600} .no-data{color: var(--text-secondary);font-style: italic;padding: 20px} .stats-buttons{display: flex;gap: 15px;justify-content: center;margin-top: 25px;flex-wrap: wrap} .stats-btn-action{background: var(--secondary-color);border: none;color: white;padding: 12px 30px;font-size: 1em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .stats-btn-action:hover{background: #357abd;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(74,144,226,0.3)} .stats-btn-reset{background: transparent;border: 2px solid #e74c3c;color: #e74c3c;padding: 10px 20px;font-size: 0.9em;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;font-weight: 500} .stats-btn-reset:hover{background: #e74c3c;color: white;transform: translateY(-1px)} @media (max-width: 480px){.stats-container{padding: 20px 15px;margin: 0 10px;width: calc(100% - 20px)} .stats-title{font-size: 1.5em} .stats-grid{grid-template-columns: repeat(2,1fr);gap: 10px} .stats-card{padding: 15px 10px} .stats-value{font-size: 1.3em} .stats-buttons{flex-direction: column;align-items: center} } @media (orientation: landscape) and (max-height: 600px){.menu-container{transform: scale(calc(100vh / 800));transform-origin: center center} .menu-buttons{margin-top: 25%;gap: 15px} .menu-btn-large{padding: 10px 40px;font-size: 1.2em;min-width: 200px} .game-container{padding: 10px} .game-header{margin-bottom: 2px} .game-info{gap: 15px;margin-bottom: 4px} .info-item{padding: 3px 6px;font-size: 0.85em} .grid-container{max-width: calc(100vh - 120px);max-height: calc(100vh - 120px);margin: 4px auto} .game-controls{margin-bottom: 4px;gap: 15px} .control-btn{padding: 6px 12px;font-size: 0.85em} .game-header-title-img{max-height: 40px} } @media (orientation: landscape) and (max-height: 450px){.menu-buttons{margin-top: 20%;gap: 10px} .menu-btn-large{padding: 8px 30px;font-size: 1em;min-width: 160px} .game-info{gap: 10px;margin-bottom: 2px} .info-item{padding: 2px 4px;font-size: 0.75em} .grid-container{max-width: calc(100vh - 80px);max-height: calc(100vh - 80px);margin: 2px auto} .game-controls{margin-bottom: 2px;gap: 10px} .control-btn{padding: 5px 10px;font-size: 0.75em} .game-header-title-img{max-height: 30px} }