:root{--gradient-primary-start: #E8774F;--gradient-primary-mid: #F09D6E;--gradient-primary-end: #E8915F;--gradient-accent-start: #D66A47;--gradient-accent-end: #E8774F;--gradient-hud-start: rgba(232, 119, 79, .85);--gradient-hud-mid: rgba(240, 157, 110, .85);--gradient-hud-end: rgba(232, 145, 95, .85);--color-primary: #2C5F7C;--color-primary-hover: #1E4A61;--color-primary-light: #3A7A9E;--color-accent: #E07856;--color-accent-light: #F09D6E;--color-sage: #7FB069;--color-sage-light: #A8C69F;--color-sand: #FFF5EB;--color-sand-dark: #F5E6D3;--color-clay: #D4A5A5;--color-peach: #FFB4A0;--bg-game: #FFF9F3;--bg-card: #FFFFFF;--bg-card-warm: #FFFBF7;--bg-overlay: rgba(0, 0, 0, .7);--bg-overlay-light: rgba(0, 0, 0, .85);--text-primary: #3E2723;--text-secondary: #6D4C41;--text-light: #8D6E63;--text-on-gradient: #FFFFFF;--text-on-primary: #FFFFFF;--color-success: #7FB069;--color-success-glow: #90EE90;--color-error: #E07856;--color-error-glow: #F08080;--color-error-bg: #FFF5F5;--color-error-border: #FECACA;--color-warning: #856404;--color-warning-bg: #FFF3CD;--color-focus: #2C5F7C;--shadow-sm: 0 2px 8px rgba(62, 39, 35, .08);--shadow-md: 0 4px 16px rgba(62, 39, 35, .12);--shadow-lg: 0 8px 32px rgba(62, 39, 35, .16);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-game);overflow:hidden}#app{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}canvas{display:block;box-shadow:var(--shadow-md);border-radius:var(--radius-sm)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}*{transition-property:background-color,border-color,color,fill,stroke,opacity,transform;transition-duration:.2s;transition-timing-function:ease-out}button:focus,a:focus{outline:2px solid var(--color-focus);outline-offset:2px}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.5rem;color:#666}.error{color:#e53e3e;padding:1rem;background:#fff5f5;border:1px solid #feb2b2;border-radius:8px;margin:1rem}@media(max-width:768px){canvas{max-width:100vw;max-height:100vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.main-menu,.stats-screen,.level-select,.player-profile,.game-mode-select{animation:none!important;background-size:100% 100%!important}.organic-blob-1,.organic-blob-2,.organic-blob-3{animation:none!important}}@keyframes gradientBreathing{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes floatBlob1{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(10px,-15px) rotate(2deg)}66%{transform:translate(-5px,15px) rotate(-3deg)}}@keyframes floatBlob2{0%,to{transform:translate(0) rotate(0)}40%{transform:translate(-8px,12px) rotate(-2deg)}80%{transform:translate(12px,-8px) rotate(1deg)}}@keyframes floatBlob3{0%,to{transform:translateY(-50%) rotate(0)}30%{transform:translateY(calc(-50% + 18px)) rotate(4deg)}70%{transform:translateY(calc(-50% - 12px)) rotate(-3deg)}}.organic-blob{position:absolute;pointer-events:none;z-index:0;opacity:.6}.organic-blob-1{width:300px;height:300px;top:-50px;left:-50px;background:url("data:image/svg+xml,%3csvg%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M200,50%20C250,50%20300,70%20330,110%20C360,150%20370,200%20360,250%20C350,300%20320,340%20270,360%20C220,380%20160,380%20120,360%20C80,340%2050,310%2040,260%20C30,210%2040,160%2070,120%20C100,80%20150,50%20200,50%20Z'%20fill='%23FFB4A0'%20opacity='0.15'/%3e%3c/svg%3e") no-repeat center;background-size:contain;animation:floatBlob1 7s ease-in-out infinite}.organic-blob-2{width:400px;height:400px;bottom:-80px;right:-80px;background:url("data:image/svg+xml,%3csvg%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M200,30%20C260,30%20310,60%20340,110%20C370,160%20380,220%20365,275%20C350,330%20310,370%20250,385%20C190,400%20130,390%2085,355%20C40,320%2020,265%2025,210%20C30,155%2060,100%20110,65%20C160,30%20140,30%20200,30%20Z'%20fill='%23FFDAB9'%20opacity='0.15'/%3e%3c/svg%3e") no-repeat center;background-size:contain;animation:floatBlob2 10s ease-in-out infinite}.organic-blob-3{width:250px;height:250px;top:50%;left:20%;transform:translateY(-50%);background:url("data:image/svg+xml,%3csvg%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M200,40%20C255,40%20305,65%20335,105%20C365,145%20380,195%20375,245%20C370,295%20345,340%20305,370%20C265,400%20215,410%20165,395%20C115,380%2075,345%2055,295%20C35,245%2035,190%2055,140%20C75,90%20115,55%20165,45%20C165,45%20145,40%20200,40%20Z'%20fill='%23A8C69F'%20opacity='0.15'/%3e%3c/svg%3e") no-repeat center;background-size:contain;animation:floatBlob3 15s ease-in-out infinite}@media(max-width:768px){.organic-blob-1{width:200px;height:200px}.organic-blob-2{width:250px;height:250px}.organic-blob-3{width:150px;height:150px}}#ui-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#333}.main-menu{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);background-size:200% 200%;animation:gradientBreathing 5s ease infinite;pointer-events:auto;overflow:hidden}.main-menu.visible{display:flex}.main-menu h1{font-size:48px;font-weight:700;color:#fff;margin:0 0 16px;text-shadow:0 2px 8px rgba(0,0,0,.2);position:relative;z-index:1}.main-menu .subtitle{font-size:18px;color:#ffffffe6;margin:0 0 48px;position:relative;z-index:1}.main-menu-buttons{display:flex;flex-direction:column;gap:16px;align-items:center;position:relative;z-index:1}.main-menu .start-button{padding:16px 48px;font-size:20px;font-weight:600;color:var(--text-on-primary);background:var(--color-primary);border:none;border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .2s,box-shadow .2s,background .2s}.main-menu .start-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;background:var(--color-primary-hover)}.main-menu .select-level-button{padding:12px 40px;font-size:18px;font-weight:600;color:#fff;background:#fff3;border:2px solid white;border-radius:12px;cursor:pointer;box-shadow:0 4px 16px #0003;transition:transform .2s,box-shadow .2s,background .2s}.main-menu .select-level-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d;background:#ffffff4d}.clear-profile-dev-button{position:absolute;top:16px;right:16px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--color-error);background:#fffffff2;border:2px solid var(--color-error);border-radius:6px;cursor:pointer;box-shadow:0 2px 8px #0003;transition:transform .2s,box-shadow .2s,background .2s;z-index:10}.clear-profile-dev-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466;background:#fff}.clear-profile-dev-button:active{transform:translateY(0)}@media(max-width:768px){.clear-profile-dev-button{top:12px;right:12px;padding:6px 12px;font-size:11px}}.game-hud{position:absolute;top:0;left:0;width:100%;display:none;padding:5px;box-sizing:border-box;pointer-events:none}.game-hud.visible{display:block}.game-hud .stats-container{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:800px;margin:0 auto;background:linear-gradient(135deg,var(--gradient-hud-start) 0%,var(--gradient-hud-mid) 50%,var(--gradient-hud-end) 100%);border-radius:var(--radius-md);padding:10px 15px;box-shadow:var(--shadow-md);backdrop-filter:blur(8px)}.game-hud .stat-container{display:flex;flex-direction:column-reverse;align-items:center;gap:4px}.game-hud .stat-label{font-size:12px;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.1)}.game-hud .stat-value{font-size:24px;color:#fff;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.15)}.game-hud .stat-value.accuracy-high{color:#d4edda;text-shadow:0 1px 3px rgba(0,0,0,.3)}.game-hud .stat-value.accuracy-medium{color:#fff3cd;text-shadow:0 1px 3px rgba(0,0,0,.3)}.game-hud .stat-value.accuracy-low{color:#f8d7da;text-shadow:0 1px 3px rgba(0,0,0,.3)}.game-hud .back-to-menu-button{width:40px;height:40px;font-size:20px;background:#fffffff2;border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,background .2s;display:flex;align-items:center;justify-content:center;pointer-events:auto;flex-shrink:0}.game-hud .back-to-menu-button:hover{transform:scale(1.1);box-shadow:0 4px 12px #2c5f7c66;background:#fff}.game-hud .back-to-menu-button:active{transform:scale(.95)}.level-complete-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8774ff2,#f09d6ef2,#e8915ff2);backdrop-filter:blur(10px);pointer-events:auto}.level-complete-screen.visible{display:flex}.level-complete-screen .card{background:#fff;border-radius:var(--radius-xl);padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;text-align:center;position:relative;display:flex;flex-direction:column}.level-complete-screen .level-title-bar{background:linear-gradient(90deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);color:var(--text-on-gradient);padding:16px 24px;font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;flex-shrink:0}.level-complete-screen .congrats-message{font-size:28px;font-weight:700;background:linear-gradient(135deg,var(--color-sage) 0%,var(--color-sage-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:24px 0 16px;text-transform:uppercase;letter-spacing:1px;padding:0 24px}.level-complete-screen .stats-container{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;padding:0 24px;flex:1;overflow-y:auto}.level-complete-screen .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.level-complete-screen .stat-row{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 16px;background:linear-gradient(135deg,var(--color-sand) 0%,#FFFFFF 100%);border-radius:var(--radius-md);border:2px solid var(--color-sand-dark);transition:transform .2s,box-shadow .2s;gap:4px}.level-complete-screen .stat-row.highlight{background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-color:var(--color-sage-light)}.level-complete-screen .stat-row .label{font-size:12px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.level-complete-screen .stat-row .value{font-size:22px;color:var(--text-primary);font-weight:700}.level-complete-screen .stat-row.highlight{grid-column:1 / -1}.level-complete-screen .stat-row.highlight .value{color:var(--color-sage);font-size:28px}.level-complete-screen .buttons-container{display:flex;gap:12px;justify-content:center;padding:0 24px 24px;flex-shrink:0}.level-complete-screen .button-base{padding:12px 24px;font-size:16px;font-weight:600;color:var(--color-primary);background:#fff;border:2px solid var(--color-primary);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s,color .2s,transform .2s}.level-complete-screen .button-base:hover{background:var(--color-sand);transform:translateY(-1px)}.level-complete-screen .button-primary{color:var(--text-on-primary);background:var(--color-primary)}.level-complete-screen .button-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px)}.level-complete-screen .button-highlight{color:#fff;background:var(--color-sage);border:none;border-radius:var(--radius-sm)}.level-complete-screen .button-highlight:hover{background:var(--color-sage-hover, #5a7d6e);transform:translateY(-1px)}.level-complete-screen .rank-row{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#6a9c891a,#6a9c890d);border-left:3px solid var(--color-sage);padding:12px 16px;border-radius:var(--radius-md);gap:4px;cursor:pointer}.level-complete-screen .stat-row.rank-row:hover{transform:translate(4px);box-shadow:-4px 4px 12px #e8774f26}.level-complete-screen .rank-value.loading-rank{color:var(--color-gray-400, #9ca3af);font-style:italic}.level-complete-screen .rank-value.not-ranked{color:var(--color-gray-500, #6b7280);font-style:italic}.level-complete-screen .rank-value.ranked{color:var(--color-sage);font-weight:700;font-size:22px}@media(max-width:768px){.level-complete-screen .card{width:95%;max-height:95vh}.level-complete-screen .level-title-bar{padding:14px 20px;font-size:16px}.level-complete-screen .congrats-message{font-size:24px;margin:20px 0 12px}.level-complete-screen .stats-container{padding:0 20px}.level-complete-screen .stats-grid{gap:10px}.level-complete-screen .stat-row{padding:10px 12px}.level-complete-screen .stat-row .label{font-size:11px}.level-complete-screen .stat-row .value{font-size:18px}.level-complete-screen .stat-row.highlight .value{font-size:24px}.level-complete-screen .buttons-container{flex-direction:column;padding:0 20px 20px;gap:10px}.level-complete-screen .next-button,.level-complete-screen .leaderboard-button,.level-complete-screen .menu-button{width:100%;padding:12px 24px;font-size:15px}}.stats-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);background-size:200% 200%;animation:gradientBreathing 20s ease infinite;pointer-events:auto;padding:20px;box-sizing:border-box}.stats-screen.visible{display:flex}.stats-screen .card{background:var(--bg-card-warm);border-radius:var(--radius-lg);padding:48px;max-width:600px;width:100%;box-shadow:var(--shadow-lg)}.stats-screen .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.stats-screen h2{font-size:32px;font-weight:700;color:var(--text-primary);margin:0}.stats-screen .back-button{padding:10px 20px;font-size:16px;font-weight:600;color:var(--color-primary);background:#fff;border:2px solid var(--color-primary);border-radius:8px;cursor:pointer;transition:background .2s}.stats-screen .back-button:hover{background:#f3f4f6}.stats-screen .content{display:flex;flex-direction:column;gap:16px}.stats-screen .stat-card{display:flex;align-items:center;gap:20px;padding:20px;background:#f9fafb;border-radius:12px;border:2px solid #e5e7eb}.stats-screen .stat-card .icon{font-size:48px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px}.stats-screen .stat-card .stat-content{flex:1}.stats-screen .stat-card .stat-label{font-size:14px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stats-screen .stat-card .stat-value{font-size:32px;color:#333;font-weight:700;line-height:1}.stats-screen .stat-card .stat-subtitle{font-size:14px;color:#888;margin-top:4px}.level-select{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);background-size:200% 200%;animation:gradientBreathing 20s ease infinite;pointer-events:auto;padding:20px;box-sizing:border-box;overflow-y:auto}.level-select.visible{display:flex}.level-select-title{font-size:28px;font-weight:700;color:#fff;margin:16px 0 20px;text-shadow:0 2px 8px rgba(0,0,0,.2);text-align:center;flex-shrink:0}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:800px;width:100%;margin-bottom:20px;flex-grow:1;align-content:start}@media(min-width:1024px){.level-grid{gap:16px;max-width:900px}}@media(max-width:1023px)and (min-width:769px){.level-grid{grid-template-columns:repeat(5,1fr);gap:12px;max-width:700px}}@media(max-width:768px)and (min-width:481px){.level-grid{grid-template-columns:repeat(4,1fr);gap:10px}.level-select-title{font-size:24px;margin:12px 0 16px}}@media(max-width:480px){.level-grid{grid-template-columns:repeat(3,1fr);gap:8px}.level-select{padding:16px 12px}.level-select-title{font-size:20px;margin:8px 0 12px}}@media(max-width:360px){.level-grid{grid-template-columns:repeat(2,1fr);gap:8px}}.level-card{aspect-ratio:1;perspective:1000px;transition:transform .2s;min-width:0}.level-card.unlocked:hover{transform:translateY(-4px)}.level-card.unlocked:active{transform:translateY(-2px)}.level-card-inner{position:relative;width:100%;height:100%;transition:transform .3s;transform-style:preserve-3d}.level-card-front{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 2px 8px #00000026;backface-visibility:hidden}@media(min-width:769px){.level-card-front{border-radius:12px;box-shadow:0 4px 16px #0003}}.level-card.unlocked .level-card-front{background:linear-gradient(135deg,var(--bg-card-warm) 0%,var(--bg-card) 100%);border:2px solid var(--color-primary)}@media(min-width:769px){.level-card.unlocked .level-card-front{border:3px solid var(--color-primary)}}.level-card.locked .level-card-front{background:linear-gradient(135deg,#e0e0e0,#d0d0d0);border:2px solid #999;opacity:.6}.level-number{font-size:clamp(18px,5vw,36px);font-weight:700;color:var(--color-primary);text-shadow:0 1px 2px rgba(0,0,0,.1)}@media(min-width:769px){.level-number{font-size:32px;text-shadow:0 2px 4px rgba(0,0,0,.1)}}.lock-icon{font-size:clamp(16px,4vw,32px);opacity:.7}.level-select-back-button{padding:10px 28px;font-size:15px;font-weight:600;color:var(--color-primary);background:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 16px #0003;transition:transform .2s,box-shadow .2s;flex-shrink:0;margin-top:auto}@media(min-width:769px){.level-select-back-button{padding:12px 32px;font-size:16px}}.level-select-back-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.level-select-back-button:active{transform:translateY(0)}.player-profile{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);background-size:200% 200%;animation:gradientBreathing 20s ease infinite;pointer-events:auto;padding:20px;box-sizing:border-box;overflow-y:auto;gap:16px}.player-profile.visible{display:flex}.player-profile .profile-name-section{background:var(--bg-card-warm);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:600px;box-shadow:var(--shadow-lg)}.player-profile .name-display-container{display:flex;align-items:center;gap:12px}.player-profile .name-icon{font-size:40px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-end) 100%);border-radius:50%;flex-shrink:0}.player-profile .name-wrapper{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.player-profile .player-name-display{font-size:24px;font-weight:700;color:#333;word-break:break-word}.player-profile .offline-indicator-inline{font-size:11px;font-weight:600;color:#92400e}.player-profile .offline-indicator-inline.hidden{display:none}.player-profile .edit-name-icon-button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;background:#fff;border:2px solid var(--color-primary);border-radius:50%;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;flex-shrink:0}.player-profile .edit-name-icon-button:hover{background:#f3f4f6;transform:scale(1.1);box-shadow:0 2px 8px #2c5f7c4d}.player-profile .edit-name-icon-button:active{transform:scale(.95)}.player-profile .edit-name-icon-button.hidden{display:none}.player-profile .name-edit-container{display:flex;flex-direction:column;gap:12px}.player-profile .name-edit-container.hidden,.player-profile .name-display-container.hidden,.player-profile .edit-name-button.hidden{display:none}.player-profile .name-input{width:100%;padding:12px 16px;font-size:18px;color:#333;background:#f9fafb;border:2px solid #e5e7eb;border-radius:8px;box-sizing:border-box;transition:border-color .2s}.player-profile .name-input:focus{outline:none;border-color:var(--color-primary);background:#fff}.player-profile .name-input:disabled{opacity:.6;cursor:not-allowed}.player-profile .edit-buttons-container{display:flex;gap:12px}.player-profile .save-button{flex:1;padding:12px 24px;font-size:16px;font-weight:600;color:#fff;background:var(--color-success);border:none;border-radius:8px;cursor:pointer;transition:background .2s,opacity .2s}.player-profile .save-button:hover:not(:disabled){background:#059669}.player-profile .save-button:disabled{opacity:.6;cursor:not-allowed}.player-profile .cancel-button{flex:1;padding:12px 24px;font-size:16px;font-weight:600;color:#666;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:background .2s,opacity .2s}.player-profile .cancel-button:hover:not(:disabled){background:#f3f4f6}.player-profile .cancel-button:disabled{opacity:.6;cursor:not-allowed}.player-profile .feedback-message{padding:12px 16px;font-size:14px;font-weight:600;border-radius:8px;margin-top:8px;text-align:center;animation:slideDown .3s ease-out}.player-profile .feedback-message.hidden{display:none}.player-profile .feedback-message.success{color:#065f46;background:#d1fae5;border:2px solid var(--color-success)}.player-profile .feedback-message.error{color:#991b1b;background:#fee2e2;border:2px solid var(--color-error)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.player-profile .profile-stats-section{background:var(--bg-card-warm);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:600px;box-shadow:var(--shadow-lg)}.player-profile .stats-title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 16px;text-align:center}.player-profile .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.player-profile .stat-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--color-sand);border-radius:var(--radius-md);border:2px solid var(--color-sand-dark);transition:transform .2s,box-shadow .2s}.player-profile .stat-icon{font-size:28px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;flex-shrink:0}.player-profile .stat-content{flex:1;min-width:0}.player-profile .stat-label{font-size:10px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}.player-profile .stat-value{font-size:20px;color:#333;font-weight:700;line-height:1;word-break:break-all}.player-profile .back-button{padding:12px 40px;font-size:16px;font-weight:600;color:var(--color-primary);background:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 16px #0003;transition:transform .2s,box-shadow .2s}.player-profile .back-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}@media(max-width:768px){.player-profile{padding:12px;gap:12px}.player-profile .profile-name-section,.player-profile .profile-stats-section{padding:20px}.player-profile .player-name-display{font-size:22px}.player-profile .name-icon{font-size:36px;width:50px;height:50px}.player-profile .edit-name-icon-button{width:32px;height:32px;font-size:14px}.player-profile .stats-grid{grid-template-columns:1fr;gap:10px}.player-profile .stat-value{font-size:18px}.player-profile .stat-icon{font-size:24px;width:38px;height:38px}}@media(max-width:480px){.player-profile{padding:10px;gap:10px}.player-profile .profile-name-section,.player-profile .profile-stats-section{padding:16px}.player-profile .player-name-display{font-size:18px}.player-profile .name-icon{font-size:32px;width:44px;height:44px}.player-profile .edit-name-icon-button{width:28px;height:28px;font-size:13px}.player-profile .offline-indicator-inline{font-size:10px}.player-profile .stat-card{padding:10px;gap:8px}.player-profile .stat-icon{font-size:24px;width:36px;height:36px}.player-profile .stat-value{font-size:16px}.player-profile .stat-label{font-size:9px}.player-profile .stats-title{font-size:18px;margin-bottom:12px}}.confirmation-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:none;align-items:center;justify-content:center;z-index:10000;pointer-events:auto;animation:fadeIn .2s ease-out}.confirmation-dialog-overlay.visible{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirmation-dialog{display:flex;align-items:center;justify-content:center;padding:20px;animation:scaleIn .3s ease-out}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.confirmation-dialog-card{background:var(--bg-card-warm);border-radius:var(--radius-lg);padding:32px;max-width:400px;width:100%;box-shadow:var(--shadow-lg)}.confirmation-dialog-message{font-size:18px;color:var(--text-primary);line-height:1.6;margin:0 0 24px;text-align:center}.confirmation-dialog-buttons{display:flex;gap:12px;justify-content:center}.confirmation-dialog-button{flex:1;padding:14px 24px;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;min-width:100px}.confirmation-dialog-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.confirmation-dialog-button:active{transform:translateY(0)}.confirmation-dialog-button:focus{outline:3px solid rgba(44,95,124,.5);outline-offset:2px}.confirmation-dialog-button.confirm{color:var(--text-on-primary);background:var(--color-primary);border:2px solid transparent}.confirmation-dialog-button.confirm:hover{background:var(--color-primary-hover)}.confirmation-dialog-button.cancel{color:#666;background:#f3f4f6;border:2px solid #e5e7eb}.confirmation-dialog-button.cancel:hover{background:#e5e7eb}@media(max-width:480px){.confirmation-dialog-card{padding:24px;max-width:320px}.confirmation-dialog-message{font-size:16px;margin-bottom:20px}.confirmation-dialog-button{padding:12px 20px;font-size:15px;min-width:80px}}.game-mode-select{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gradient-primary-start) 0%,var(--gradient-primary-mid) 50%,var(--gradient-primary-end) 100%);background-size:200% 200%;animation:gradientBreathing 20s ease infinite;pointer-events:auto;padding:20px}.game-mode-select.visible{display:flex}.game-mode-title{font-size:36px;font-weight:700;color:#fff;margin:0 0 12px;text-shadow:0 2px 8px rgba(0,0,0,.2);text-align:center}.game-mode-subtitle{font-size:16px;color:#ffffffe6;margin:0 0 40px;text-align:center}.game-modes-container{display:flex;flex-direction:row;gap:24px;margin-bottom:32px;max-width:900px;width:100%}.mode-card{flex:1;background:var(--bg-card-warm);border-radius:var(--radius-lg);padding:32px 24px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow-lg);transition:transform .2s,box-shadow .2s}.mode-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #3e27234d}.mode-icon{font-size:64px;margin-bottom:20px;opacity:.9}.mode-card-title{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 12px;text-align:center}.mode-card-description{font-size:14px;color:var(--text-secondary);line-height:1.6;text-align:center;margin:0 0 24px;flex-grow:1}.mode-select-button{padding:14px 32px;font-size:16px;font-weight:600;color:var(--text-on-primary);background:var(--color-primary);border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 12px #2c5f7c4d;transition:transform .2s,box-shadow .2s,background .2s}.mode-select-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2c5f7c66;background:var(--color-primary-hover)}.mode-select-button:active{transform:translateY(0)}.game-mode-select .back-button{padding:12px 40px;font-size:16px;font-weight:600;color:#fff;background:#fff3;border:2px solid white;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.game-mode-select .back-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003;background:#ffffff4d}@media(max-width:768px){.game-modes-container{flex-direction:column;gap:16px;max-width:400px}.game-mode-title{font-size:28px}.mode-card{padding:24px 20px}.mode-icon{font-size:48px;margin-bottom:16px}.mode-card-title{font-size:20px}.mode-card-description{font-size:13px}}@media(max-width:480px){.game-mode-title{font-size:24px}.game-mode-subtitle{font-size:14px}.mode-card{padding:20px 16px}.mode-icon{font-size:40px;margin-bottom:12px}.mode-card-title{font-size:18px;margin-bottom:8px}.mode-card-description{font-size:12px;margin-bottom:16px}.mode-select-button{padding:12px 24px;font-size:15px}}.leaderboard-screen{position:absolute;inset:0;background:linear-gradient(135deg,var(--gradient-primary-start),var(--gradient-primary-end));opacity:0;pointer-events:none;transition:opacity .3s ease;display:flex;flex-direction:column;overflow-y:auto;padding:20px;gap:16px}.leaderboard-screen.visible{opacity:1;pointer-events:auto}.leaderboard-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:var(--bg-card);border-radius:12px;box-shadow:0 4px 16px #00000026}.leaderboard-title{font-size:24px;font-weight:700;color:var(--text-primary);margin:0}.leaderboard-header .back-button,.leaderboard-header .refresh-button{padding:12px 40px;font-size:16px;font-weight:600;color:var(--color-primary);background:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 16px #0003;transition:transform .2s,box-shadow .2s}.leaderboard-header .back-button:hover,.leaderboard-header .refresh-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.leaderboard-header .refresh-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.offline-indicator{padding:12px 20px;background:var(--color-warning-bg);color:var(--color-warning);text-align:center;font-size:14px;border-radius:8px;margin:-8px 0 0;box-shadow:0 2px 8px #0000001a}.offline-indicator.hidden{display:none}.leaderboard-tabs{display:flex;gap:12px;padding:20px 24px;background:var(--bg-card);border-radius:12px;box-shadow:0 4px 16px #00000026}.leaderboard-tab{flex:1;padding:12px 20px;font-size:15px;font-weight:600;background:var(--color-sand);color:var(--text-primary);border:2px solid var(--color-sand-dark);border-radius:8px;cursor:pointer;transition:all .2s ease}.leaderboard-tab:hover{background:var(--color-sand-dark);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.leaderboard-tab.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--text-on-primary);box-shadow:0 2px 8px #00000026;transform:none;cursor:default}.level-selector{padding:16px 24px;background:var(--bg-card);border-radius:12px;box-shadow:0 4px 16px #00000026;display:flex;align-items:center;gap:12px}.level-selector.hidden{display:none}.level-selector label{font-size:15px;font-weight:600;color:var(--text-primary)}.level-dropdown{padding:10px 16px;font-size:15px;font-weight:500;border:2px solid var(--color-sand-dark);border-radius:8px;background:var(--color-sand);color:var(--text-primary);cursor:pointer;transition:all .2s ease}.level-dropdown:hover{background:var(--color-sand-dark);border-color:var(--color-primary)}.player-rank-card{padding:20px 24px;background:var(--bg-card);border-radius:12px;box-shadow:0 4px 16px #00000026;border-left:4px solid var(--color-primary)}.player-rank-card.hidden{display:none}.player-rank-text{font-size:18px;font-weight:700;color:var(--color-primary);margin-bottom:8px}.player-rank-stats{display:flex;gap:16px;font-size:14px;color:var(--text-secondary);font-weight:500}.leaderboard-content{display:flex;flex-direction:column;gap:16px}.loading-state,.error-state,.empty-state{padding:60px 24px;text-align:center;font-size:16px;font-weight:500;color:var(--text-secondary);background:var(--bg-card);border-radius:12px;box-shadow:0 4px 16px #00000026}.error-state{color:var(--color-error);background:var(--color-error-bg);border:2px solid var(--color-error-border)}.error-state.hidden,.loading-state.hidden,.leaderboard-table.hidden{display:none}.leaderboard-table-element{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:12px;overflow:hidden;box-shadow:0 4px 16px #00000026}.leaderboard-table-element thead{background:var(--color-sand)}.leaderboard-table-element th{padding:14px 16px;text-align:left;font-size:13px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.8px}.leaderboard-table-element td{padding:14px 16px;font-size:15px;color:var(--text-primary);border-top:1px solid var(--color-sand);font-weight:500}.leaderboard-table-element tbody tr:hover{background:var(--color-sand)}.rank-cell{font-weight:600;width:60px;text-align:center}.player-cell{font-weight:500}.score-cell,.time-cell,.accuracy-cell,.levels-cell{text-align:right}@media(max-width:768px){.leaderboard-screen{padding:12px;gap:12px}.leaderboard-header{padding:16px 20px}.leaderboard-title{font-size:20px}.leaderboard-tabs{padding:16px 20px;flex-direction:column;gap:10px}.leaderboard-tab{padding:12px 16px;font-size:14px}.level-selector{padding:14px 20px}.player-rank-card{padding:16px 20px}.player-rank-stats{flex-direction:column;gap:8px}.leaderboard-table-element th,.leaderboard-table-element td{padding:12px;font-size:14px}}@media(max-width:480px){.leaderboard-screen{padding:10px;gap:10px}.leaderboard-header{padding:14px 16px}.leaderboard-title{font-size:18px}.leaderboard-header .back-button,.leaderboard-header .refresh-button{padding:8px 14px;font-size:13px}.leaderboard-tabs{padding:14px 16px}.level-selector{padding:12px 16px}.player-rank-card{padding:14px 16px}.player-rank-text{font-size:16px}.leaderboard-table-element th{padding:10px;font-size:11px}.leaderboard-table-element td{padding:10px;font-size:13px}}