@import"https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.tutorial-tooltip{position:fixed;z-index:1050;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}.tutorial-tooltip-content{background-color:#fff;color:#333;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;text-align:center;max-width:200px;position:relative;border:2px solid;border-color:inherit}.tutorial-tooltip[data-color="#3498db"] .tutorial-tooltip-content{border-color:#3498db}.tutorial-tooltip[data-color="#e74c3c"] .tutorial-tooltip-content{border-color:#e74c3c}.tutorial-tooltip[data-color="#2ecc71"] .tutorial-tooltip-content{border-color:#2ecc71}.tutorial-tooltip[data-color="#9b59b6"] .tutorial-tooltip-content{border-color:#9b59b6}.tutorial-tooltip[data-color="#e67e22"] .tutorial-tooltip-content{border-color:#e67e22}.tutorial-tooltip-content:after{content:"";position:absolute;width:12px;height:12px;background:#fff;transform:rotate(45deg);z-index:1}.tutorial-tooltip[data-position=top] .tutorial-tooltip-content:after{bottom:-6px;left:calc(50% - 6px);border-right:2px solid;border-bottom:2px solid;border-top:none;border-left:none;margin-bottom:-1px;box-shadow:none}.tutorial-tooltip[data-position=bottom] .tutorial-tooltip-content:after{top:-6px;left:calc(50% - 6px);border-left:2px solid;border-top:2px solid;border-right:none;border-bottom:none;margin-top:-1px;box-shadow:none}.tutorial-tooltip[data-position=left] .tutorial-tooltip-content:after{right:-6px;top:calc(50% - 6px);border-top:2px solid;border-right:2px solid;border-bottom:none;border-left:none;margin-right:-1px;box-shadow:none}.tutorial-tooltip[data-position=right] .tutorial-tooltip-content:after{left:-6px;top:calc(50% - 6px);border-bottom:2px solid;border-left:2px solid;border-top:none;border-right:none;margin-left:-1px;box-shadow:none}.tutorial-tooltip[data-color="#3498db"] .tutorial-tooltip-content:after{border-color:#3498db}.tutorial-tooltip[data-color="#e74c3c"] .tutorial-tooltip-content:after{border-color:#e74c3c}.tutorial-tooltip[data-color="#2ecc71"] .tutorial-tooltip-content:after{border-color:#2ecc71}.tutorial-tooltip[data-color="#9b59b6"] .tutorial-tooltip-content:after{border-color:#9b59b6}.tutorial-tooltip[data-color="#e67e22"] .tutorial-tooltip-content:after{border-color:#e67e22}.tutorial-tooltip-content p{margin:0}.tutorial-highlight{animation:pulse 2s infinite;pointer-events:none;border:1px solid!important}@keyframes pulse{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #fff0}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #fff3}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #fff0}}.tutorial-highlight[data-color="#3498db"]{animation:pulse-blue 2s infinite;border-color:#3498db!important}.tutorial-highlight[data-color="#e74c3c"]{animation:pulse-red 2s infinite;border-color:#e74c3c!important}.tutorial-highlight[data-color="#2ecc71"]{animation:pulse-green 2s infinite;border-color:#2ecc71!important}.tutorial-highlight[data-color="#9b59b6"]{animation:pulse-purple 2s infinite;border-color:#9b59b6!important}.tutorial-highlight[data-color="#e67e22"]{animation:pulse-orange 2s infinite;border-color:#e67e22!important}@keyframes pulse-blue{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #3498db00}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #3498db33}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #3498db00}}@keyframes pulse-red{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #e74c3c00}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #e74c3c33}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #e74c3c00}}@keyframes pulse-green{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #2ecc7100}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #2ecc7133}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #2ecc7100}}@keyframes pulse-purple{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #9b59b600}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #9b59b633}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #9b59b600}}@keyframes pulse-orange{0%{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #e67e2200}50%{box-shadow:0 0 1px 1px #ffffff80,0 0 4px 3px #e67e2233}to{box-shadow:0 0 1px 1px #ffffff80,0 0 2px 2px #e67e2200}}.tutorial-step-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.tutorial-step-counter{font-size:14px;color:#666;font-weight:500;background-color:#f5f5f5;padding:3px 8px;border-radius:12px}.tutorial-steps-info{color:#555;font-size:15px;font-style:italic;margin-top:5px;margin-bottom:20px}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#e9e3c9;min-height:100vh}@media (prefers-color-scheme: dark){body{background-color:#1a1a1a;color:#e9e3c9}}button,.button,[class*=-button],[role=button],input[type=button],input[type=submit]{cursor:pointer!important}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}img{max-width:100%;height:auto}div[onClick],div[role=button],span[onClick],span[role=button],a{cursor:pointer}#root,.app-container{min-height:100vh;background-color:#e9e3c9}@media (prefers-color-scheme: dark){#root,.app-container{background-color:#1a1a1a}}::selection{background-color:#4ca9ea4d;color:#333}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#8080801a;border-radius:4px}::-webkit-scrollbar-thumb{background:#8080804d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#80808080}:focus-visible{outline:2px solid #4ca9ea;outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333;font-size:16px;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:Arvo,Georgia,serif;font-weight:700;margin-top:0}h1{font-size:48px;font-style:italic;margin-bottom:12px}h2{font-size:32px;font-style:italic;margin-bottom:12px}h3{font-size:24px;font-style:italic;margin-bottom:8px}h4{font-size:18px;margin-bottom:8px}p{margin-top:0;margin-bottom:16px}.hero-title{font-family:Arvo,Georgia,serif;font-size:48px;font-weight:700;font-style:italic;letter-spacing:.5px}.modal-title-text{font-family:Arvo,Georgia,serif;font-size:32px;font-weight:700;font-style:italic}.section-title{font-family:Arvo,Georgia,serif;font-size:24px;font-weight:700;font-style:italic}.welcome-text{font-family:Arvo,Georgia,serif;font-size:24px;font-weight:700}.game-title-font{font-family:Arvo,Georgia,serif;font-weight:700;font-style:italic;letter-spacing:.5px}.color-lock-font{font-family:Arvo,Georgia,serif;font-weight:700;font-style:italic;font-size:16px}.description-text{color:#8c8273;font-size:14px}.caption-text{font-size:12px;color:#8c8273}.gradient-text{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.gradient-coral{background:linear-gradient(to right,#fb997f,#fea474)}.gradient-gold{background:linear-gradient(to right,#f7ac4b,#f6b252)}.gradient-green{background:linear-gradient(to right,#afc053,#b9c255)}.gradient-blue{background:linear-gradient(to right,#4ca9ea,#38bdfe)}.gradient-pink{background:linear-gradient(to right,#d16381,#db757f)}.gradient-share{background:linear-gradient(to right,#8a9a45,#94a04a)}@keyframes modalFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@keyframes fadeInAndScale{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.5)}}@keyframes floatVertical{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes floatHorizontal{0%,to{transform:translate(0)}50%{transform:translate(10px)}}@keyframes floatDiagonal{0%,to{transform:translate(0)}50%{transform:translate(10px,-15px)}}.floating-circles-background{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none;z-index:0}.floating-circle{position:absolute;border-radius:50%;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.floating-circle.size-small{width:30px;height:30px}.floating-circle.size-medium{width:60px;height:60px}.floating-circle.size-large{width:90px;height:90px}.floating-circle.size-xlarge{width:120px;height:120px}.floating-circle.color-red{background-color:#db5c5c66}.floating-circle.color-green{background-color:#5cb35c66}.floating-circle.color-blue{background-color:#5c87db66}.floating-circle.color-yellow{background-color:#edd95c66}.floating-circle.color-purple{background-color:#a35cb866}.floating-circle.color-orange{background-color:#ed8f4766}.floating-circle.anim-vertical{animation-name:floatVertical}.floating-circle.anim-horizontal{animation-name:floatHorizontal}.floating-circle.anim-diagonal{animation-name:floatDiagonal}.floating-circle.duration-slow{animation-duration:6s}.floating-circle.duration-medium{animation-duration:4s}.floating-circle.duration-fast{animation-duration:3s}@keyframes subtleLockGlow{0%{filter:drop-shadow(0 0 .5px rgba(255,255,255,.4))}50%{filter:drop-shadow(0 0 .8px rgba(255,255,255,.6))}to{filter:drop-shadow(0 0 .5px rgba(255,255,255,.4))}}@keyframes hint-glow-pulse{0%{box-shadow:inset 0 0 10px 2px,0 0 8px 1px}50%{box-shadow:inset 0 0 20px 8px,0 0 12px 3px}to{box-shadow:inset 0 0 10px 2px,0 0 8px 1px}}@keyframes neon-glow-pulse{0%{box-shadow:0 0 16px 6px #4ca9eab3}50%{box-shadow:0 0 20px 8px #4ca9eae6}to{box-shadow:0 0 16px 6px #4ca9eab3}}@keyframes color-fade{0%{background-color:var(--current-color)}35%{background-color:var(--target-color)}65%{background-color:var(--target-color)}to{background-color:var(--current-color)}}@keyframes hint-pulsate-glow{0%{transform:scale(1);filter:drop-shadow(0 0 3px var(--target-color, #4ca9ea)) drop-shadow(0 0 6px var(--target-color, #4ca9ea))}35%{transform:scale(1.03);filter:drop-shadow(0 0 5px var(--target-color, #4ca9ea)) drop-shadow(0 0 10px var(--target-color, #4ca9ea))}65%{transform:scale(1.03);filter:drop-shadow(0 0 5px var(--target-color, #4ca9ea)) drop-shadow(0 0 10px var(--target-color, #4ca9ea))}to{transform:scale(1);filter:drop-shadow(0 0 3px var(--target-color, #4ca9ea)) drop-shadow(0 0 6px var(--target-color, #4ca9ea))}}@keyframes arrow-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes outline-fade{0%{opacity:0;box-shadow:0 0 3px #4ca9ea4d}15%{opacity:1;box-shadow:0 0 6px 1px #4ca9ea80}30%{opacity:1;box-shadow:0 0 7px 1.5px #4ca9ea99}45%{opacity:0;box-shadow:0 0 3px #4ca9ea4d}to{opacity:0;box-shadow:0 0 3px #4ca9ea4d}}@keyframes preview-pulse{0%{box-shadow:0 0 0 2px #ffffff80}50%{box-shadow:0 0 0 4px #fffc}to{box-shadow:0 0 0 2px #ffffff80}}@keyframes backgroundPulse{0%{background-color:#e9e3c9}50%{background-color:#ede9d4}to{background-color:#e9e3c9}}@keyframes titleGlow{0%{text-shadow:0 0 5px rgba(251,153,127,.1)}50%{text-shadow:0 0 15px rgba(76,169,234,.2)}to{text-shadow:0 0 5px rgba(251,153,127,.1)}}@keyframes medalPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes timeUnitPulse{0%{opacity:1}50%{opacity:.8}to{opacity:1}}@keyframes firework-burst{0%{transform:scale(0);opacity:1}50%{opacity:.8}to{transform:scale(1);opacity:0}}@keyframes confetti-fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideInFromBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInFromTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutToBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.container{display:flex;flex-direction:column;align-items:center;margin:20px auto;color:#333;max-width:95vw}.container.app-fade-in{animation:fadeIn .3s ease-in-out}.container.no-animations{animation:none!important;transition:none!important;transform:none!important}.container.no-animations .hint-cell{animation:none!important;border:2px solid #1e90ff!important}.container.no-animations .toggle-slider,.container.no-animations .toggle-slider:before{transition:none!important}.container.no-animations input:checked+.toggle-slider:before{left:24px!important}.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#fff;z-index:1000}.logo-animation{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:fadeInAndScale 3s cubic-bezier(.25,.1,.25,1) forwards}.logo-animation.fade-out{animation:fadeOut 1.5s cubic-bezier(.25,.1,.25,1) forwards;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-logo{max-width:200px;max-height:200px}.grid{display:inline-block;position:relative;--grid-cell-container-size: 76px;--grid-cell-size: 72px;--grid-cell-margin: 2px}@media (max-width: 410px){.grid{--grid-cell-container-size: 62px;--grid-cell-size: 58px}}.grid-row{display:flex}.grid-cell-container{position:relative;width:var(--grid-cell-container-size);height:var(--grid-cell-container-size);margin:0}.grid-cell{position:relative;width:var(--grid-cell-size);height:var(--grid-cell-size);margin:var(--grid-cell-margin);border-radius:8px;cursor:pointer;transition:transform .1s;box-sizing:border-box}.grid-cell:hover{transform:scale(1.05)}.grid-cell.highlight-largest-region{box-shadow:inset 0 0 0 2px #ffffffe6,0 0 8px 2px #ffffffb3}.grid-cell.hint-cell{animation:hint-pulsate-glow .8s ease-in-out 3;animation-fill-mode:both;z-index:2;border:2px solid var(--target-color, #1E90FF)!important}.grid-cell.neon-glow:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:inherit;box-shadow:0 0 16px 6px #00bfffb3;z-index:-1;animation:neon-glow-pulse 2s infinite alternate}.high-contrast-mode .grid-cell{border:2px solid #000}.connected-cell-line{position:absolute;background-color:#1e90ff99;z-index:1;pointer-events:none}.locked-overlay{position:absolute;top:0;left:0;width:var(--grid-cell-size);height:var(--grid-cell-size);margin:var(--grid-cell-margin);border-radius:8px;background-color:#0000004d;display:flex;align-items:center;justify-content:center}.lock-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:45%;height:45%;pointer-events:none;animation:subtleLockGlow 3s infinite ease-in-out}.blue-outline{position:absolute;top:-2px;left:-2px;width:100%;height:100%;border:1px solid rgba(30,144,255,.8);border-radius:5px;box-shadow:0 0 10px 2px #1e90ff80;pointer-events:none;z-index:4;opacity:0;animation:outline-fade 3.5s infinite ease-in-out;animation-delay:.35s}.hint-color-preview{position:absolute;top:2px;left:2px;width:var(--grid-cell-size);height:var(--grid-cell-size);border-radius:8px;z-index:1;animation:preview-pulse 1.5s infinite}.guest-auth-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;border-radius:inherit}.guest-auth-loading-overlay p{color:#fff;margin-top:1rem;font-size:.9rem}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;background-color:#f8f9fa}@media (prefers-color-scheme: dark){.auth-container{background-color:#1a1a1a}}.auth-card{width:100%;max-width:450px;background-color:#fff;border-radius:12px;box-shadow:0 8px 24px #0000001f;overflow:hidden}@media (prefers-color-scheme: dark){.auth-card{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.auth-header{display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;background-color:#4a90e2;color:#fff}.auth-header .auth-logo{width:80px;height:80px;margin-bottom:1rem}.auth-header .auth-title{font-size:1.8rem;font-weight:700;margin:0}.auth-form-container{padding:2rem}.auth-form{display:flex;flex-direction:column;align-items:center}.auth-form h2{font-size:1.5rem;color:#333;margin-top:0;margin-bottom:1rem;text-align:center}@media (prefers-color-scheme: dark){.auth-form h2{color:#e9e3c9}}.auth-form .form-group{width:100%}.auth-subtitle{color:#8c8273;font-size:.9rem;text-align:center;margin-bottom:1.5rem;line-height:1.4}@media (prefers-color-scheme: dark){.auth-subtitle{color:#d3c793}}.forgot-password-link{text-align:right;margin-bottom:1rem;margin-top:-.5rem}.forgot-password-link .toggle-button{background:none;border:none;color:#4ca9ea;font-size:.85rem;cursor:pointer;padding:0;text-decoration:none}.forgot-password-link .toggle-button:hover{text-decoration:underline;color:#38bdfe}@media (prefers-color-scheme: dark){.forgot-password-link .toggle-button{color:#afc053}.forgot-password-link .toggle-button:hover{color:#b9c255}}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}@media (prefers-color-scheme: dark){.form-group label{color:#e9e3c9}}.auth-input{width:100%;padding:.75rem 1rem;font-size:1rem;border:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);border-radius:8px;transition:border-color .2s,box-shadow .2s}.auth-input:focus{border-color:#4ca9ea;box-shadow:0 0 0 2px #4ca9ea33;outline:none}@media (prefers-color-scheme: dark){.auth-input{background-color:#3a3a3a;border-color:#e9e3c94d;color:#e9e3c9}.auth-input::placeholder{color:#c4b46e}.auth-input:focus{border-color:#4ca9ea;box-shadow:0 0 0 2px #4ca9ea4d}}.auth-button{display:block;width:100%;max-width:280px;margin:0 auto;padding:.875rem;font-size:1rem;font-weight:600;text-align:center;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease-in-out}.auth-button:disabled{opacity:.7;cursor:not-allowed}.auth-button.primary-button{background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#fff}.auth-button.primary-button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}@media (prefers-color-scheme: dark){.auth-button.primary-button{background:linear-gradient(to right,#afc053,#b9c255);color:#e9e3c9}}.auth-button.guest-button{background-color:#e9e3c9;color:#4ca9ea;border:2px solid #4ca9ea}.auth-button.guest-button:hover:not(:disabled){background-color:#e3dbba;transform:translateY(-1px)}@media (prefers-color-scheme: dark){.auth-button.guest-button{background-color:#2d2d2d;color:#afc053;border-color:#afc053}.auth-button.guest-button:hover:not(:disabled){background-color:#3a3a3a}}.auth-separator{display:flex;align-items:center;margin:1.5rem 0}.auth-separator:before,.auth-separator:after{content:"";flex:1;height:1px;background-color:#dad0a5}.auth-separator span{padding:0 1rem;color:#8c8273;font-size:.875rem}@media (prefers-color-scheme: dark){.auth-separator:before,.auth-separator:after{background-color:#e9e3c933}.auth-separator span{color:#cbbd81}}.auth-toggle{margin-top:1.5rem;text-align:center}.auth-toggle p{color:#8c8273;font-size:.9rem;margin:0}@media (prefers-color-scheme: dark){.auth-toggle p{color:#d3c793}}.auth-toggle .toggle-button{background:none;border:none;color:#d16381;font-weight:600;cursor:pointer;padding:0;font-size:.9rem;text-decoration:underline}.auth-toggle .toggle-button:hover{color:#db757f}@media (prefers-color-scheme: dark){.auth-toggle .toggle-button{color:#d16381}.auth-toggle .toggle-button:hover{color:#db757f}}.auth-error{background-color:#dc35451a;color:#dc3545;padding:.75rem;border-radius:6px;margin-bottom:1.25rem;font-size:.9rem}.auth-success{background-color:#28a7451a;color:#28a745;padding:.75rem;border-radius:6px;margin-bottom:1.25rem;font-size:.9rem}.signup-container{position:relative}.signup-button{background-color:#e9e3c9;color:gray;border:1px solid rgb(128,128,128);border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .2s,transform .2s,box-shadow .2s}.signup-button:hover{background-color:#e3dbba;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}@media (prefers-color-scheme: dark){.signup-button{background-color:#1a1a1a;color:#e9e3c9;border-color:#e9e3c9}.signup-button:hover{background-color:#343434}}.signup-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.signup-modal .signup-modal-content{background-color:#e9e3c9;border-radius:20px;width:90%;max-width:400px;padding:2rem;position:relative;box-shadow:0 2px 10px #0003}.signup-modal .signup-modal-content h3{margin-top:0;margin-bottom:1.5rem;font-size:1.4rem;text-align:center;color:#333}.signup-modal .signup-modal-content .close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;color:#8c8273;cursor:pointer;line-height:1;padding:0}.signup-modal .signup-modal-content .close-button:hover{color:#333}.signup-modal .signup-modal-content .signup-message{margin-top:1.25rem;text-align:center;color:#8c8273;font-size:.875rem}@media (prefers-color-scheme: dark){.signup-modal .signup-modal-content{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}.signup-modal .signup-modal-content h3{color:#e9e3c9}.signup-modal .signup-modal-content .close-button{color:#d3c793}.signup-modal .signup-modal-content .close-button:hover{color:#e9e3c9}.signup-modal .signup-modal-content .signup-message{color:#d3c793}}.primary-button,.try-again-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#afc053,#b9c255);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px;margin-top:16px;max-width:200px}.primary-button:hover,.try-again-button:hover{opacity:.9;transform:translateY(-1px)}.primary-button:active,.try-again-button:active{transform:translateY(0)}.try-again-modal-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background-color:#e9e3c9;color:gray;border-radius:12px;padding:12px 24px;font-size:16px;border:2px solid rgb(128,128,128)}.try-again-modal-button:hover{background-color:#e2dab7}.share-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#8a9a45,#94a04a);color:#e9e3c9;font-size:16px;border-radius:12px;padding:12px 32px;box-shadow:0 2px 6px #00000026}.share-button:hover{opacity:.9;transform:translateY(-1px)}.score-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#fb997f,#fea474);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px}.score-button:hover{opacity:.9;transform:translateY(-1px)}.best-score-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px}.best-score-button:hover{opacity:.9;transform:translateY(-1px)}.close-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background-color:transparent;color:#8c8273;border:2px solid rgb(140,130,115);border-radius:12px;padding:12px 24px;font-size:16px}.close-button:hover{background-color:#d163811a;border-color:#d16381;color:#d16381}@media (prefers-color-scheme: dark){.close-button{color:#dad0a5;border-color:#dad0a5}.close-button:hover{background-color:#d1638126;border-color:#d16381;color:#d16381}}.cancel-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;display:block;margin:0 auto;padding:8px 16px;font-size:14px;background:#e9e3c9;color:gray;border:1px solid rgb(140,130,115);border-radius:8px;width:100%;max-width:200px;text-align:center}.cancel-button:hover{background-color:#e2dab7}@media (prefers-color-scheme: dark){.cancel-button{background:#2d2d2d;color:#e9e3c9;border-color:#e9e3c94d}.cancel-button:hover{background-color:#3a3a3a}}.inverse-share-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background-color:#e9e3c9;color:#8a9a45;border:2px solid #8a9a45;border-radius:12px;padding:12px 32px;font-size:16px;box-shadow:0 1px 3px #0000001a}.inverse-share-button:hover{background-color:#8a9a451a}@media (prefers-color-scheme: dark){.inverse-share-button{background-color:#2d2d2d;box-shadow:0 1px 3px #ffffff14}.inverse-share-button:hover{background-color:#8a9a4526}}.hint-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#d16381,#db757f);color:#e9e3c9;border-radius:12px;font-size:16px;margin-top:16px;padding:8px 16px}.hint-button:hover{opacity:.9;transform:translateY(-1px)}.settings-button,.stats-button,.info-button,.home-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;background-color:#e9e3c9;color:gray;border:1px solid rgb(128,128,128);border-radius:50%;transition:background-color .2s,transform .2s;box-shadow:0 2px 6px #00000026}.settings-button:hover,.stats-button:hover,.info-button:hover,.home-button:hover{background-color:#8080801a;transform:scale(1.05)}@media (prefers-color-scheme: dark){.settings-button,.stats-button,.info-button,.home-button{background-color:#1a1a1a;border-color:#e9e3c9;color:#e9e3c9}.settings-button:hover,.stats-button:hover,.info-button:hover,.home-button:hover{background-color:#e9e3c926}}.settings-button,.stats-button,.info-button,.home-button{position:absolute;width:40px;height:40px;border-radius:50%;z-index:10;right:15px;box-shadow:none}.home-button{top:15px}.settings-button{top:65px}.settings-button:hover{transform:rotate(30deg) scale(1.05)}.stats-button{top:115px}.info-button{top:165px}@media (prefers-color-scheme: dark){.settings-button,.stats-button,.info-button,.home-button{background-color:#1a1a1a;border:1px solid rgb(233,227,201);box-shadow:none}.settings-button:hover,.stats-button:hover,.info-button:hover,.home-button:hover{background-color:#343434}}.icon-button--gold,.icon-button--pink,.icon-button--green,.icon-button--blue,.icon-button--coral{background-color:#e9e3c9}.icon-button--gold:hover,.icon-button--pink:hover,.icon-button--green:hover,.icon-button--blue:hover,.icon-button--coral:hover{background-color:#e2dab7}@media (prefers-color-scheme: dark){.icon-button--gold,.icon-button--pink,.icon-button--green,.icon-button--blue,.icon-button--coral{background-color:#1a1a1a}.icon-button--gold:hover,.icon-button--pink:hover,.icon-button--green:hover,.icon-button--blue:hover,.icon-button--coral:hover{background-color:#343434}}.icon-button--coral svg{color:#fb997f;fill:#fb997f}.icon-button--blue svg{color:#4ca9ea;fill:#4ca9ea}.icon-button--green svg{color:#afc053;fill:#afc053}.icon-button--pink svg{color:#d16381;fill:#d16381}.icon-button--gold svg{color:#f7ac4b;fill:#f7ac4b}.share-stats-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#8a9a45,#94a04a);color:#e9e3c9;border-radius:12px;font-size:16px;display:flex;align-items:center;gap:8px;padding:12px 24px}.share-stats-button:hover{opacity:.9;transform:translateY(-1px)}.social-buttons{display:flex;gap:20px;justify-content:center}.social-button{width:40px;height:40px;border-radius:50%;border:none;background-color:#e9e3c9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background-color .2s;box-shadow:0 1px 3px #0000001a}.social-button:hover{transform:scale(1.1);background-color:#e2dab7}.social-button.twitter:hover,.social-button.x:hover{background-color:#1da1f2;color:#fff}.social-button.facebook:hover{background-color:#4267b2;color:#fff}.social-button.instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}@media (prefers-color-scheme: dark){.social-button{background-color:#3a3a3a;box-shadow:0 1px 3px #ffffff14}.social-button:hover{background-color:#474747}}.modal-close,.stats-modal .close-button{position:absolute;top:15px;right:15px;background-color:#8080801a;border:none;color:gray;font-size:22px;cursor:pointer;padding:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease-in-out;z-index:10}.modal-close:hover,.stats-modal .close-button:hover{background-color:#d1638133;color:#d16381;transform:scale(1.05)}@media (prefers-color-scheme: dark){.modal-close,.stats-modal .close-button{background-color:#e9e3c91a;color:#e9e3c9}.modal-close:hover,.stats-modal .close-button:hover{background-color:#d1638133;color:#d16381}}.tile,.game-tile,div[class*=tile],[data-tile],.board-tile{cursor:pointer}.tutorial-continue-button,button[class*=tutorial],[class*=tutorial][onClick],.tutorial-cell-highlight,.tutorial-overlay [role=button]{cursor:pointer!important}.segmented-control,.difficulty-control{background-color:#80808014;border-radius:12px;padding:4px;display:inline-flex}.segmented-control .segment,.difficulty-control .segment{border-radius:8px;padding:8px 16px;font-family:Arvo,Georgia,serif;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;background:transparent;border:none;color:gray}.segmented-control .segment.selected,.difficulty-control .segment.selected{background-color:gray;color:#e9e3c9;font-weight:700}.segmented-control .segment:hover:not(.selected),.difficulty-control .segment:hover:not(.selected){background-color:#8080801a}.color-picker-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000026;display:flex;justify-content:center;align-items:flex-end;z-index:1000}.color-picker-modal{background:#fffffff2;border-radius:20px;width:100%;max-width:450px;padding:10px 8px 8px;box-shadow:0 -1px 8px #0000001a;display:flex;flex-direction:column;margin-bottom:50px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}@media (prefers-color-scheme: dark){.color-picker-modal{background:#2d2d2df2;box-shadow:0 -1px 8px #0000004d}}.color-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.color-picker-header h3{text-align:left;margin:0;font-size:14px;font-weight:500;color:#8c8273}@media (prefers-color-scheme: dark){.color-picker-header h3{color:#e9e3c9}}.color-picker-close-button{font-size:16px;margin:0;padding:4px;color:#8c8273}@media (prefers-color-scheme: dark){.color-picker-close-button{color:#e9e3c9}}.color-bubbles{display:flex;flex-direction:row;justify-content:space-around;gap:10px}.color-bubble-container{display:flex;flex-direction:column;align-items:center}.color-bubble{width:40px;height:40px;border-radius:12px;margin:2px;border:none;cursor:pointer;transition:transform .1s;box-sizing:border-box;box-shadow:0 1px 3px #0000001a}.color-bubble:hover{transform:scale(1.05)}.color-bubble.current-color{position:relative;opacity:.6;cursor:not-allowed;box-shadow:none;border:2px dashed rgba(0,0,0,.3)}.color-bubble.current-color:hover{transform:none}.color-bubble.currently-changing{box-shadow:0 0 12px 4px #00bfff99}.high-contrast-mode .color-bubble{border:2px solid #000}@media (prefers-color-scheme: dark){.color-bubble{box-shadow:0 2px 4px #1a1a1a80}.color-bubble.current-color{border-color:#e9e3c966}}.current-color-check{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#333;font-size:20px;opacity:.8;filter:drop-shadow(0 0 1px white)}@media (prefers-color-scheme: dark){.current-color-check{color:#e9e3c9;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}}.color-label{font-size:10px;font-weight:500;color:#8c8273;text-transform:capitalize;margin-top:4px}@media (prefers-color-scheme: dark){.color-label{color:#d3c793}}.status-message{margin-top:16px;font-size:16px;padding:8px 16px;border-radius:12px;max-width:500px;width:100%;text-align:center}.status-message.solved{background-color:#d1f7d1;color:#085508}.status-message.lost{background-color:#ffd4d4;color:#900}@media (prefers-color-scheme: dark){.status-message.solved{background-color:#168016}.status-message.lost{background-color:#a10000}}.top-card{display:flex;flex-direction:column;align-items:center;background-color:#e9e3c9;color:gray;padding:16px 24px;border-radius:20px;box-shadow:0 2px 10px #1a1a1a4d;margin-bottom:24px;max-width:500px;width:100%;position:relative}.top-card h1{margin:0;font-size:1rem}.target-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}.target-circle{width:24px;height:24px;border-radius:50%}.goal-row{display:flex;gap:16px;font-weight:500}.controls-container{display:flex;justify-content:center;width:100%;margin:24px 0;padding:16px 0;max-width:500px}.controls-inner{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 24px}.locked-region-counter{color:#333;font-size:18px;text-align:center;font-weight:600;margin-bottom:0}@media (prefers-color-scheme: dark){.locked-region-counter{color:#e9e3c9}}.locked-label{margin-right:4px}.locked-count{font-weight:600;margin-left:8px}.toggle-switch{position:relative;display:inline-block;width:50px;height:26px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:26px}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}@media (prefers-color-scheme: dark){.toggle-slider{background-color:#444}}input:checked+.toggle-slider{background-color:gray}input:focus+.toggle-slider{box-shadow:0 0 1px gray}input:checked+.toggle-slider:before{transform:translate(24px)}.settings-select{background-color:#ede9d4;border:1px solid #ddd;border-radius:12px;padding:8px 12px;font-size:16px;width:180px;color:#333}@media (prefers-color-scheme: dark){.settings-select{background-color:#2d2d2d;border-color:#e9e3c9;color:#e9e3c9}}.share-section{margin:12px 0;position:relative}.share-options{margin-top:16px;display:flex;flex-direction:column;align-items:center;animation:fadeIn .3s ease-out}.share-on{font-size:14px;color:#8c8273;margin-bottom:8px}.copy-tooltip{position:fixed;bottom:50px;left:50%;transform:translate(-50%);background-color:#000000bf;color:#fff;padding:12px 24px;border-radius:12px;font-size:16px;z-index:2000;transition:opacity .3s ease}.copy-tooltip.success{background-color:#28a745e6}.copy-tooltip.error{background-color:#dc3545e6}.copy-tooltip.fade-out{opacity:0}.game-difficulty-switcher{margin-top:12px;margin-bottom:0}.game-difficulty-switcher .difficulty-option{padding:.35rem .75rem;font-size:.8rem}.delete-account-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.delete-account-container{width:100%;max-width:480px;background-color:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001f;padding:2.5rem}.delete-account-container.success{text-align:center}.delete-account-container.success .success-icon{font-size:4rem;color:#28a745;margin-bottom:1.5rem}.delete-account-container.success .success-icon svg{filter:drop-shadow(0 4px 8px rgba(40,167,69,.3))}.delete-account-container.success h1{color:#28a745;margin-bottom:1rem}.delete-account-container.success p{color:#666;margin-bottom:2rem;line-height:1.6}.delete-account-container.success .home-link{display:inline-block;background-color:#4a90e2;color:#fff;text-decoration:none;padding:.875rem 2rem;border-radius:8px;font-weight:600;transition:background-color .2s}.delete-account-container.success .home-link:hover{background-color:#3080de}.delete-account-container .header{text-align:center;margin-bottom:1.5rem}.delete-account-container .header .logo{width:80px;height:80px;border-radius:16px;margin-bottom:1rem;box-shadow:0 4px 12px #0000001a}.delete-account-container .header h1{font-size:1.75rem;color:#333;margin:0}.delete-account-container .warning-banner{display:flex;align-items:center;gap:.75rem;padding:1rem;border-radius:8px;background-color:#fff3cd;color:#856404;margin-bottom:1.5rem;font-weight:500}.delete-account-container .warning-banner svg{flex-shrink:0;font-size:1.25rem}.delete-account-container .warning-banner.destructive{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.delete-account-container .warning-details{background-color:#f8f9fa;border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.5rem}.delete-account-container .warning-details p{margin:0 0 .75rem;color:#333;font-weight:500}.delete-account-container .warning-details ul{margin:0;padding-left:1.25rem;color:#666}.delete-account-container .warning-details ul li{margin-bottom:.5rem;line-height:1.4}.delete-account-container .warning-details ul li:last-child{margin-bottom:0}.delete-account-container .description{color:#666;line-height:1.6;margin-bottom:1.5rem;text-align:center}.delete-account-container .signed-in-as{text-align:center;color:#666;margin-bottom:1.5rem;padding:.75rem;background-color:#e8f4fd;border-radius:6px}.delete-account-container .signed-in-as strong{color:#333}.delete-account-container .error-message{background-color:#f8d7da;color:#721c24;padding:.875rem;border-radius:8px;margin-bottom:1.25rem;font-size:.9rem;border:1px solid #f5c6cb}.delete-account-container .delete-form .form-group{margin-bottom:1.25rem}.delete-account-container .delete-form .form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#555}.delete-account-container .delete-form .form-group label strong{font-family:monospace;background-color:#f8f9fa;padding:.125rem .375rem;border-radius:4px;font-weight:600}.delete-account-container .delete-form .form-group input{width:100%;padding:.875rem 1rem;font-size:1rem;border:1.5px solid #ddd;border-radius:8px;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.delete-account-container .delete-form .form-group input:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e226;outline:none}.delete-account-container .delete-form .form-group input:disabled{background-color:#f8f9fa;cursor:not-allowed}.delete-account-container .delete-form .form-group input::placeholder{color:#aaa}.delete-account-container .sign-in-button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;background-color:#4a90e2;color:#fff;margin-top:1.5rem}.delete-account-container .sign-in-button:hover:not(:disabled){background-color:#3080de}.delete-account-container .sign-in-button:disabled{opacity:.6;cursor:not-allowed}.delete-account-container .sign-in-button svg{font-size:1rem}.delete-account-container .delete-button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;background-color:#dc3545;color:#fff;margin-top:1.5rem}.delete-account-container .delete-button:hover:not(:disabled){background-color:#d12435}.delete-account-container .delete-button:disabled{opacity:.6;cursor:not-allowed}.delete-account-container .delete-button svg{font-size:1rem}.delete-account-container .footer-links{margin-top:1.5rem;text-align:center}.delete-account-container .footer-links a{color:#666;text-decoration:none;font-size:.9rem;transition:color .2s}.delete-account-container .footer-links a:hover{color:#4a90e2;text-decoration:underline}@media (max-width: 480px){.delete-account-page{padding:1rem}.delete-account-container{padding:1.5rem;border-radius:12px}.delete-account-container .header h1{font-size:1.5rem}.delete-account-container .header .logo{width:64px;height:64px}.delete-account-container .warning-details{padding:.875rem 1rem}.delete-account-container .delete-form .form-group input{padding:.75rem}}.error-boundary-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}.error-boundary-content{background:#e9e3c9;border-radius:20px;padding:32px 24px;max-width:400px;width:100%;text-align:center;box-shadow:0 4px 20px #0000004d}@media (prefers-color-scheme: dark){.error-boundary-content{background:#2d2d2d}}.error-boundary-icon{font-size:3rem;background:linear-gradient(135deg,#d16381,#fea474);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}.error-boundary-title{font-family:Arvo,Georgia,serif;font-size:1.4rem;color:#333;margin:0 0 12px}@media (prefers-color-scheme: dark){.error-boundary-title{color:#e9e3c9}}.error-boundary-message{color:#8c8273;font-size:.95rem;line-height:1.5;margin:0 0 24px}.error-boundary-buttons{display:flex;flex-direction:column;gap:12px}.error-boundary-reload{padding:12px 16px;border:none;border-radius:8px;background:linear-gradient(135deg,#4ca9ea,#38bdfe);color:#fff;font-family:Arvo,Georgia,serif;font-size:1rem;cursor:pointer;transition:opacity .2s}.error-boundary-reload:hover{opacity:.9}.error-boundary-dismiss{padding:12px 16px;border:1px solid rgb(128,128,128);border-radius:8px;background:transparent;color:gray;font-family:Arvo,Georgia,serif;font-size:.9rem;cursor:pointer;transition:opacity .2s}.error-boundary-dismiss:hover{opacity:.7}@media (prefers-color-scheme: dark){.error-boundary-dismiss{border-color:#8c8273;color:#8c8273}}.tutorial-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.tutorial-modal{background-color:#d8d3bb;border-radius:10px;box-shadow:0 14px 36px #25252533;width:min(94vw,360px);max-height:92vh;overflow:hidden;position:relative;animation:tutorialModalFadeIn .3s ease-out}@media (prefers-color-scheme: dark){.tutorial-modal{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}@keyframes tutorialModalFadeIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.tutorial-modal-close{position:absolute;top:16px;right:12px;width:42px;height:42px;border:none;background-color:#80808021;color:#808080a6;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:23px;transition:all .2s ease-in-out;z-index:10}.tutorial-modal-close:hover{background-color:#80808033;color:#808080e6}@media (prefers-color-scheme: dark){.tutorial-modal-close{background-color:#e9e3c91a;color:#e9e3c9}.tutorial-modal-close:hover{background-color:#d163814d;color:#d16381}}.tutorial-modal-content{padding:52px 22px 24px;min-height:560px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-height: 700px){.tutorial-modal-content{min-height:auto;padding-top:44px;padding-bottom:16px}}.tutorial-phase-indicator{display:none;justify-content:center;gap:8px;padding:16px 16px 0}.tutorial-phase-dot{width:10px;height:10px;border-radius:50%;background-color:#80808033;transition:all .2s ease-in-out}.tutorial-phase-dot--active{background-color:#4ca9ea;transform:scale(1.2)}.tutorial-phase-dot--completed{background-color:#afc053}@media (prefers-color-scheme: dark){.tutorial-phase-dot{background-color:#e9e3c933}.tutorial-phase-dot--active{background-color:#4ca9ea}.tutorial-phase-dot--completed{background-color:#afc053}}.tutorial-phase-header{text-align:center;margin-bottom:8px}.tutorial-phase-title{font-family:Arvo,Georgia,serif;font-size:32px;font-weight:700;color:#333;margin:0}@media (prefers-color-scheme: dark){.tutorial-phase-title{color:#e9e3c9}}.tutorial-phase-message{font-size:16px;color:#8c8273;margin:0;line-height:1.5}@media (prefers-color-scheme: dark){.tutorial-phase-message{color:#d3c793}}.tutorial-grid-container{display:flex;justify-content:center;align-items:center;position:relative;margin:22px 0 14px}.tutorial-grid{display:flex;flex-direction:column;gap:var(--tutorial-grid-gap, 8px)}.tutorial-grid__row{display:flex;gap:var(--tutorial-grid-gap, 8px);width:100%}.tutorial-tile{border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;position:relative;box-shadow:inset 0 0 0 1px #ffffff0a}.tutorial-tile:focus-visible{outline:2px solid #4ca9ea;outline-offset:2px}.tutorial-tile--locked{cursor:default}.tutorial-tile--highlighted{animation:tileHighlight .95s ease-in-out infinite;box-shadow:0 0 0 3px var(--tutorial-highlight-color, #38a3ff)}.tutorial-tile--selected{box-shadow:0 0 0 3px #4ca9ea}.tutorial-tile--disabled{cursor:not-allowed}@keyframes tileHighlight{0%,to{box-shadow:0 0 0 3px var(--tutorial-highlight-color, #38a3ff)}50%{box-shadow:0 0 0 5px var(--tutorial-highlight-color, #38a3ff)}}.animated-hand{position:absolute;pointer-events:none;transform:translate(-50%,-50%);transform-origin:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));z-index:100;transition:left .16s ease-out,top .16s ease-out,opacity .2s ease}.animated-hand .animated-hand__emoji{display:block;line-height:1;animation:handBob 1.2s ease-in-out infinite}.animated-hand--tapping .animated-hand__emoji{animation:tapHand .18s ease-out}.animated-hand--hidden{opacity:0;pointer-events:none;transition:opacity .2s ease}@keyframes tapHand{0%{transform:scale(1) translateY(0)}40%{transform:scale(.92) translateY(4px)}to{transform:scale(1) translateY(0)}}@keyframes handBob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.tutorial-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;border-radius:10px;padding:11px 26px;font-size:16px;min-width:140px;transition:all .2s ease-in-out}.tutorial-button--primary{background:#7f8288;color:#e9e3c9;border:none}.tutorial-button--primary:hover{background:#767980;opacity:1;transform:none}.tutorial-button--secondary{background-color:transparent;color:gray;border:2px solid rgb(128,128,128)}.tutorial-button--secondary:hover{background-color:#8080801a}@media (prefers-color-scheme: dark){.tutorial-button--secondary{color:#e9e3c9;border-color:#e9e3c9}.tutorial-button--secondary:hover{background-color:#e9e3c91a}}.tutorial-button--danger{background:linear-gradient(to right,#d16381,#db757f);color:#e9e3c9}.tutorial-button--danger:hover{opacity:.9}.tutorial-phase-actions{display:flex;justify-content:center;gap:16px;margin-top:30px}.tutorial-phase-actions--stacked{flex-direction:column;align-items:center}@media (max-height: 700px){.tutorial-phase-actions{margin-top:16px}}.tutorial-move-counter{text-align:center;font-size:18px;color:#8c8273;margin-top:4px;font-weight:500}@media (prefers-color-scheme: dark){.tutorial-move-counter{color:#d3c793}}.tutorial-move-label{margin-right:4px}.tutorial-move-value{font-weight:700;color:#333}@media (prefers-color-scheme: dark){.tutorial-move-value{color:#e9e3c9}}.tutorial-move-optimal{margin-left:4px;font-size:12px}.tutorial-target-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px}@media (max-height: 700px){.tutorial-target-indicator{margin-bottom:12px}}.tutorial-target-label{font-size:16px;color:#8c8273}@media (prefers-color-scheme: dark){.tutorial-target-label{color:#d3c793}}.tutorial-target-color{width:20px;height:20px;border-radius:50%;box-shadow:none}.tutorial-target-value{font-size:16px;color:#8c8273}@media (prefers-color-scheme: dark){.tutorial-target-value{color:#e9e3c9d1}}.tutorial-target-indicator--watch{margin-top:0;margin-bottom:10px}.tutorial-target-color--dot{width:18px;height:18px}.tutorial-try-phase{display:flex;flex-direction:column;position:relative}.tutorial-phase-header--try{margin-bottom:6px}.tutorial-try-goal-copy{margin-top:6px;font-size:18px;color:#8080809e}@media (prefers-color-scheme: dark){.tutorial-try-goal-copy{color:#e9e3c9b8}}.tutorial-try-goal-color{text-transform:lowercase}.tutorial-try-metadata{width:fit-content;margin:0 auto 16px}.tutorial-try-metadata--compact{margin-bottom:8px}.tutorial-target-color--small{width:16px;height:16px}.tutorial-target-value--compact{font-size:16px}.tutorial-try-note{font-size:14px;font-weight:500;font-style:italic;color:#333;text-align:center;line-height:1.45;padding:12px 16px;margin:0 auto 12px;border-radius:12px;border:2px solid rgba(168,204,232,.6);background-color:#d4e8f659}@media (prefers-color-scheme: dark){.tutorial-try-note{color:#e9e3c9;border-color:#5a9ccc80;background-color:#3a6a8c40}}.tutorial-try-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.tutorial-try-meta-row:last-child{margin-bottom:0}.tutorial-try-meta-label{color:#808080c7;font-size:24px}@media (prefers-color-scheme: dark){.tutorial-try-meta-label{color:#e9e3c9d6}}.tutorial-try-meta-label--compact{font-size:16px}.tutorial-try-goal-value{font-weight:700;font-size:24px;color:gray}@media (prefers-color-scheme: dark){.tutorial-try-goal-value{color:#e9e3c9}}.tutorial-try-goal-value--compact{font-size:16px}.tutorial-try-goal-unit{font-size:24px;color:#8c8273}@media (prefers-color-scheme: dark){.tutorial-try-goal-unit{color:#e9e3c9}}.tutorial-try-goal-unit--compact{font-size:16px}.tutorial-try-status{width:min(100%,310px);margin:0 auto 12px;border-radius:11px;padding:8px 11px;text-align:center;border:1px solid transparent;box-shadow:0 2px 8px #00000014}.tutorial-try-status--warning{background:linear-gradient(180deg,#f9ebb2e0,#f3dd8ab8);border-color:#c9a8457a;color:#808080e6}.tutorial-try-status--solved{background:linear-gradient(180deg,#d9f3d1d9,#b9e8b0bf);border-color:#6cae6080;color:#2f7f26f5}@media (prefers-color-scheme: dark){.tutorial-try-status{box-shadow:0 3px 10px #00000040}.tutorial-try-status--warning{background:linear-gradient(180deg,#69561fb3,#53421abd);border-color:#f1cc5861;color:#f2e1ae}.tutorial-try-status--solved{background:linear-gradient(180deg,#1f5f32c7,#1b4f2ac2);border-color:#84d37c6b;color:#d1f4cb}}.tutorial-try-status-title{margin:0 0 4px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}.tutorial-try-status-title svg{color:#e6b413;font-size:12px}@media (prefers-color-scheme: dark){.tutorial-try-status-title svg{color:#f2cc51}}.tutorial-try-status-message{margin:0;font-size:14px;line-height:1.25;color:#808080db}@media (prefers-color-scheme: dark){.tutorial-try-status-message{color:#e9e3c9db}}.tutorial-try-status-solved{margin:0;font-size:18px;font-weight:700}.tutorial-try-puzzles-indicator{display:flex;flex-direction:column;align-items:center;margin-bottom:16px}@media (max-height: 700px){.tutorial-try-puzzles-indicator{margin-bottom:8px}}.tutorial-try-puzzles-label{color:#80808094;font-size:14px;margin-bottom:8px}@media (prefers-color-scheme: dark){.tutorial-try-puzzles-label{color:#e9e3c99e}}.tutorial-try-puzzles-dots{display:flex;align-items:center;gap:8px}.tutorial-try-puzzle-dot{width:10px;height:10px;border-radius:50%;opacity:.35;transition:opacity .14s ease-out,transform .14s ease-out}.tutorial-try-puzzle-dot--active{opacity:1;transform:scale(1.05)}.tutorial-grid-container--try{margin:0 0 16px}.tutorial-try-instruction{margin:0;text-align:center;color:#808080ad;font-size:18px}@media (prefers-color-scheme: dark){.tutorial-try-instruction{color:#e9e3c9b8}}.tutorial-try-moves{text-align:center;margin-top:10px}.tutorial-try-moves-value{font-size:44px;line-height:1;font-weight:700;color:gray}@media (prefers-color-scheme: dark){.tutorial-try-moves-value{color:#e9e3c9}}@media (max-height: 700px){.tutorial-try-moves-value{font-size:34px}}.tutorial-try-moves-label{margin-top:4px;font-size:16px;color:#80808080}@media (prefers-color-scheme: dark){.tutorial-try-moves-label{color:#e9e3c98f}}.tutorial-try-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:16px}.tutorial-try-footer-button{border:none;background:transparent;color:#808080a8;font-size:18px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:4px}.tutorial-try-footer-button:hover{color:#808080e6}.tutorial-try-footer-button svg{font-size:14px}@media (prefers-color-scheme: dark){.tutorial-try-footer-button{color:#e9e3c9b8}.tutorial-try-footer-button:hover{color:#e9e3c9eb}}.tutorial-try-footer-button--skip{gap:0}.tutorial-try-loss-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:40;border-radius:8px;padding:14px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@media (prefers-color-scheme: dark){.tutorial-try-loss-backdrop{background:#000000a3}}.tutorial-try-loss-modal{width:min(92%,360px);background:linear-gradient(180deg,#ebe6cf,#dfd9bf);border:1px solid rgba(128,128,128,.26);border-radius:18px;box-shadow:0 18px 36px #0000003d;padding:20px 16px 16px;text-align:center}@media (prefers-color-scheme: dark){.tutorial-try-loss-modal{background:linear-gradient(180deg,#3f3b34,#36332e);border-color:#e9e3c938;box-shadow:0 20px 42px #00000080}}.tutorial-try-loss-title{margin:0 auto;max-width:100%;font-size:clamp(1.9rem,6.9vw,2.5rem);line-height:1.08;letter-spacing:0;color:#ec8f78;font-style:normal;white-space:normal;text-wrap:balance}@media (prefers-color-scheme: dark){.tutorial-try-loss-title{color:#f4a792}}.tutorial-try-loss-message{margin:10px 0 12px;font-size:18px;color:#808080cc}@media (prefers-color-scheme: dark){.tutorial-try-loss-message{color:#e9e3c9d6}}.tutorial-try-loss-target-row{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:#808080e6;margin-bottom:14px}@media (prefers-color-scheme: dark){.tutorial-try-loss-target-row{color:#e9e3c9e0}}.tutorial-try-loss-button{width:100%;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:2px}.tutorial-watch-grid-shell{background:#ffffff38;border-radius:16px;box-shadow:0 3px 15px #0000001f;padding:8px;position:relative;overflow:visible}.tutorial-watch-progress{display:flex;justify-content:center;gap:8px;margin-top:8px}.tutorial-watch-progress-dot{width:10px;height:10px;border-radius:50%;background:#80808059}.tutorial-watch-progress-dot--active{background:#4ca9ef}.tutorial-watch-copy{min-height:88px;margin-top:16px}.tutorial-watch-copy-line{margin:0 0 8px;color:#808080b8;text-align:center;font-size:18px;line-height:1.35}.tutorial-watch-copy-line:last-child{margin-bottom:0}.tutorial-watch-copy-line--win{margin-top:14px}.tutorial-watch-primary-button{min-width:96px;padding:9px 28px;font-size:16px;font-weight:600}.tutorial-phase-actions--watch{margin-top:6px}.tutorial-skip-link{margin:6px auto 2px;display:block;border:none;background:transparent;color:#80808073;font-size:14px;cursor:pointer;padding:4px 8px}.tutorial-skip-link:hover{color:#808080b3}.tutorial-soft-fail-warning{background-color:#f7ac4b1a;border:1px solid #f7ac4b;border-radius:12px;padding:16px;margin-top:16px;text-align:center}.tutorial-soft-fail-warning p{margin:0 0 12px;font-size:14px;color:#d37b09}@media (prefers-color-scheme: dark){.tutorial-soft-fail-warning{background-color:#f7ac4b26}.tutorial-soft-fail-warning p{color:#f7ac4b}}.tutorial-solved-message{text-align:center;margin-top:16px}.tutorial-solved-message p{font-family:Arvo,Georgia,serif;font-size:18px;font-weight:700;color:#afc053;margin:0}.tutorial-color-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0000004d;display:flex;align-items:flex-end;justify-content:center;z-index:1010}.tutorial-color-picker{background-color:#e9e3c9;border-radius:20px 20px 0 0;padding:clamp(14px,4vw,22px);width:min(98vw,430px);max-width:none;--tutorial-picker-bubble-size: clamp(38px, 10vw, 50px);--tutorial-picker-gap: clamp(12px, 3.2vw, 18px);animation:slideUp .3s ease-out}@media (prefers-color-scheme: dark){.tutorial-color-picker{background-color:#2d2d2d}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.tutorial-color-picker__bubbles{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--tutorial-picker-gap)}.tutorial-color-picker__item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:var(--tutorial-picker-bubble-size)}.tutorial-color-picker__bubble{width:var(--tutorial-picker-bubble-size);height:var(--tutorial-picker-bubble-size);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;box-shadow:0 1px 3px #0000001a}.tutorial-color-picker__bubble:hover:not(:disabled){transform:scale(1.1)}.tutorial-color-picker__bubble:disabled{cursor:default}.tutorial-color-picker__bubble--current{box-shadow:0 0 0 3px #fff,0 0 0 5px gray}.tutorial-color-picker__check{color:#fff;font-size:clamp(13px,3.8vw,19px)}.tutorial-color-picker__label{font-size:clamp(10px,2.4vw,13px);color:#8c8273;text-transform:capitalize;text-align:center}@media (prefers-color-scheme: dark){.tutorial-color-picker__label{color:#d3c793}}.tutorial-compare-phase{text-align:center}.tutorial-score-comparison{display:flex;align-items:center;justify-content:center;gap:24px;margin:32px 0}.tutorial-score-card{background-color:#8080800d;border-radius:12px;padding:16px 24px;min-width:100px}@media (prefers-color-scheme: dark){.tutorial-score-card{background-color:#e9e3c90d}}.tutorial-score-value{font-family:Arvo,Georgia,serif;font-size:48px;font-weight:700;line-height:1}.tutorial-score-card--user .tutorial-score-value{background:linear-gradient(to right,#fb997f,#fea474);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tutorial-score-card--optimal .tutorial-score-value{background:linear-gradient(to right,#4ca9ea,#38bdfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tutorial-score-label{font-size:14px;color:#8c8273;margin-top:4px}@media (prefers-color-scheme: dark){.tutorial-score-label{color:#d3c793}}.tutorial-score-divider{font-size:18px;color:#8c8273;font-weight:600}@media (prefers-color-scheme: dark){.tutorial-score-divider{color:#d3c793}}.tutorial-badge{display:inline-block;padding:8px 16px;border-radius:12px;font-family:Arvo,Georgia,serif;font-weight:700;font-size:14px}.tutorial-badge--perfect{background:linear-gradient(to right,#afc053,#b9c255);color:#e9e3c9}.tutorial-ready-phase{text-align:center;display:flex;flex-direction:column;flex:1}.tutorial-ready-content{margin-top:auto;margin-bottom:auto}.tutorial-ready-logo{display:flex;justify-content:center;margin-bottom:6px}.tutorial-ready-badge{width:84px;height:84px;border-radius:50%;margin:28px auto 22px;background:#52b0ee;color:#d8d3bb;display:flex;align-items:center;justify-content:center;font-size:40px}.tutorial-phase-header--ready{margin-bottom:0}.tutorial-phase-header--ready .tutorial-phase-message{margin-top:8px}.tutorial-phase-actions--ready{margin-top:auto;width:100%;gap:10px}.tutorial-phase-actions--ready .tutorial-button--primary{width:100%}.tutorial-ready-secondary-link{border:none;background:transparent;color:#8080809e;font-size:18px;padding:4px;cursor:pointer}.tutorial-ready-secondary-link:hover{color:#808080db}.skip-confirmation-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;z-index:1020}.skip-confirmation-modal{background-color:#e9e3c9;border-radius:20px;box-shadow:0 4px 20px #0000004d;padding:24px;width:90%;max-width:350px;position:relative;text-align:center}@media (prefers-color-scheme: dark){.skip-confirmation-modal{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.skip-confirmation-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background-color:#8080801a;color:gray;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}.skip-confirmation-close:hover{background-color:#d1638133;color:#d16381}@media (prefers-color-scheme: dark){.skip-confirmation-close{background-color:#e9e3c91a;color:#e9e3c9}.skip-confirmation-close:hover{background-color:#d163814d;color:#d16381}}.skip-confirmation-title{font-family:Arvo,Georgia,serif;font-size:24px;font-weight:700;color:#333;margin:0 0 12px}@media (prefers-color-scheme: dark){.skip-confirmation-title{color:#e9e3c9}}.skip-confirmation-message{font-size:16px;color:#8c8273;margin:0 0 24px;line-height:1.5}@media (prefers-color-scheme: dark){.skip-confirmation-message{color:#d3c793}}.skip-confirmation-actions{display:flex;flex-direction:column;gap:12px}.tutorial-tile--spinning{animation:tileSpin .6s ease-in-out forwards;animation-delay:var(--spin-delay, 0ms)}@keyframes tileSpin{0%{transform:perspective(400px) rotateY(0)}to{transform:perspective(400px) rotateY(360deg)}}.tutorial-instruction-card{font-size:14px;font-weight:500;font-style:italic;color:#333;text-align:center;line-height:1.45;padding:12px 16px;max-width:100%;margin:0 auto;border-radius:12px;border:2px solid var(--card-border-color);background-color:var(--card-bg-color);transition:opacity .3s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;pointer-events:none}@media (prefers-color-scheme: dark){.tutorial-instruction-card{color:#e9e3c9}}.tutorial-instruction-card--hidden{opacity:0;pointer-events:none}.tutorial-watch-instruction-zone{position:relative;min-height:72px;margin-bottom:30px;margin-top:30px;width:100%}@media (max-height: 700px){.tutorial-watch-instruction-zone{min-height:60px;margin-bottom:16px;margin-top:16px}}.tutorial-demo-picker{padding:14px 18px;background-color:#d8d3bb;border-radius:16px;box-shadow:0 4px 12px #0003;text-align:center;margin-top:16px;animation:demoPickerFadeIn .3s ease-out}@media (prefers-color-scheme: dark){.tutorial-demo-picker{background-color:#2d2d2d}}@keyframes demoPickerFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.tutorial-demo-picker__label{font-size:12px;color:#8c8273;margin-bottom:10px}@media (prefers-color-scheme: dark){.tutorial-demo-picker__label{color:#e9e3c9b3}}.tutorial-demo-picker__bubbles{display:flex;justify-content:center;gap:12px}.tutorial-demo-picker__bubble{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;position:relative;transition:transform .15s ease}.tutorial-demo-picker__bubble:hover{transform:scale(1.08)}.tutorial-demo-picker__bubble--highlighted{box-shadow:0 0 0 3px #fff,0 0 0 5px #f7ce45}.tutorial-demo-picker__sublabel{font-size:10px;color:#8c827399;margin-top:8px}@media (prefers-color-scheme: dark){.tutorial-demo-picker__sublabel{color:#e9e3c980}}.tutorial-watch-phase{display:flex;flex-direction:column;align-items:center}.tutorial-watch-header{position:relative;height:32px;margin-bottom:4px;width:100%}.tutorial-watch-header .tutorial-watch-header__title{position:absolute;left:0;right:0;transition:opacity .4s ease-in-out;font-family:Arvo,Georgia,serif;font-size:32px;font-weight:700;color:#333;text-align:center;margin:0}@media (prefers-color-scheme: dark){.tutorial-watch-header .tutorial-watch-header__title{color:#e9e3c9}}.tutorial-watch-grid-zone{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:8px;height:250px;overflow:visible}@media (max-height: 700px){.tutorial-watch-grid-zone{height:220px}}.tutorial-watch-picker-container{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;z-index:5}.tutorial-watch-hint{font-size:14px;font-style:italic;color:#8c8273;text-align:center;padding:8px 16px;margin:2px auto;max-width:300px;border-radius:12px;background-color:#e9e3c980;transition:opacity .3s ease-in-out}@media (prefers-color-scheme: dark){.tutorial-watch-hint{background-color:#2d2d2d99;color:#e9e3c9bf}}.tutorial-watch-hint-container{transition:opacity .3s ease-in-out}@media (prefers-reduced-motion: reduce){.tutorial-modal,.tutorial-color-picker,.animated-hand,.tutorial-tile--highlighted{animation:none;transition:none}.animated-hand--tapping,.tutorial-tile--spinning{animation:none}.tutorial-instruction-card{transition:none}.tutorial-demo-picker{animation:none}@keyframes tileHighlight{0%,to{box-shadow:0 0 0 3px #4ca9ea}}}.modal-overlay,.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#e9e3c9;border-radius:20px;padding:24px;box-shadow:0 4px 20px #0000004d;max-width:90%;animation:modalFadeIn .4s ease-out;width:450px;position:relative;text-align:center}.modal-header{position:relative;text-align:center;padding:0 32px;margin-bottom:16px}.modal-title{font-family:Arvo,Georgia,serif;font-size:32px;font-weight:700;font-style:italic;color:#333;margin:5px 0 24px}.modal-body{display:flex;flex-direction:column;align-items:center}.modal-body h2{font-family:Arvo,Georgia,serif;font-style:italic;color:#333;margin-top:0;margin-bottom:16px;font-size:28px}.modal-body p{margin:8px 0;font-size:18px;color:#8c8273}.modal-buttons{display:flex;justify-content:center;gap:16px;margin-top:16px}.modal-divider{width:100%;height:1px;background-color:#dad0a5;margin:16px 0}.modal-section{width:100%;padding:12px 0}.modal-section-title{font-family:Arvo,Georgia,serif;font-size:18px;font-weight:700;color:#333;margin-bottom:12px}@media (prefers-color-scheme: dark){.modal-content{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}.modal-title,.modal-body h2{color:#e9e3c9}.modal-body p{color:#d3c793}.modal-divider{background-color:#e9e3c933}}.win-modal,.autocomplete-modal{background-color:#e9e3c9;border-radius:20px;box-shadow:0 4px 20px #0000004d;max-width:90%;animation:modalFadeIn .4s ease-out;width:95%;max-width:480px;text-align:center;display:flex;flex-direction:column;gap:16px;position:relative;max-height:85vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:24px;background:linear-gradient(135deg,#ff6b6b59,#ff9f4359 17%,#feca5759 33%,#2ed57359,#54a0ff59 67%,#a55eea59 83%,#ff6b8159),#fff;scrollbar-width:thin;scrollbar-color:rgba(84,160,255,.5) rgba(0,0,0,.05)}.win-modal::-webkit-scrollbar,.autocomplete-modal::-webkit-scrollbar{width:8px}.win-modal::-webkit-scrollbar-track,.autocomplete-modal::-webkit-scrollbar-track{background:#0000000d;border-radius:4px;margin:12px 0}.win-modal::-webkit-scrollbar-thumb,.autocomplete-modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a55eea80,#54a0ff80,#2ed57380);border-radius:4px;border:2px solid transparent;background-clip:padding-box}.win-modal::-webkit-scrollbar-thumb:hover,.autocomplete-modal::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#a55eeab3,#54a0ffb3,#2ed573b3);background-clip:padding-box}.win-modal::-webkit-scrollbar-thumb:active,.autocomplete-modal::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#a55eead9,#54a0ffd9,#2ed573d9);background-clip:padding-box}@media (prefers-color-scheme: dark){.win-modal,.autocomplete-modal{background:linear-gradient(135deg,#ff6b6b33,#ff9f4333 17%,#feca5733 33%,#2ed57333,#54a0ff33 67%,#a55eea33 83%,#ff6b8133),#2d2d2d;box-shadow:0 2px 8px #ffffff26;scrollbar-color:rgba(84,160,255,.5) rgba(233,227,201,.1)}.win-modal::-webkit-scrollbar-track,.autocomplete-modal::-webkit-scrollbar-track{background:#e9e3c91a}}.win-modal-animated,.autocomplete-modal-animated{animation:modalFadeIn .4s ease-out}.score-hero{padding:24px 16px;border-radius:16px;position:relative}.score-hero.beat-bot{background:linear-gradient(135deg,#28a7451f,#20c9971f)}.score-hero.needs-improvement{background:linear-gradient(135deg,#ff9f431f,#feca571f)}.scores-header{font-size:28px;font-weight:600;color:#333;text-align:center;margin:0 0 12px;text-transform:uppercase;letter-spacing:1px}@media (prefers-color-scheme: dark){.scores-header{color:#e9e3c9}}.score-comparison{display:flex;flex-direction:column;align-items:center;gap:16px;padding:12px 0 16px}.score-row-user{display:flex;justify-content:center}.score-row-comparison{display:flex;align-items:flex-start;justify-content:center;gap:40px}.score-tile-container{display:flex;flex-direction:column;align-items:center;gap:8px}.score-tile-large{width:80px;height:80px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;transition:transform .2s}.score-tile-large .tile-number{font-size:2.5rem;font-weight:600;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.2)}.score-tile-large .tile-number.gold-number{color:gold;text-shadow:0 2px 8px rgba(255,215,0,.6),0 1px 2px rgba(0,0,0,.3)}.score-tile-large.green{background:linear-gradient(135deg,#28a745,#20c997)}.score-tile-large.red{background:linear-gradient(135deg,#dc3545,#c82333)}.score-tile-large.blue{background:linear-gradient(135deg,#007bff,#0056b3)}.score-tile-large.gold{background:linear-gradient(135deg,#ffc107,#e0a800);box-shadow:0 4px 16px #ffc10766}.score-tile-large.gold .tile-number{color:#333;text-shadow:0 1px 2px rgba(255,255,255,.5)}@media (prefers-color-scheme: dark){.score-tile-large{box-shadow:0 4px 12px #1a1a1a80}.score-tile-large.gold{box-shadow:0 4px 16px #ffc1074d}}.tile-label{font-size:28px;font-weight:600;color:#333;margin-bottom:4px}.tile-label.text-label{font-size:16px;text-transform:uppercase;letter-spacing:.5px}.tile-label.text-label-large{font-size:28px;text-transform:uppercase;letter-spacing:1px}@media (prefers-color-scheme: dark){.tile-label{color:#e9e3c9}}.motivational-text{font-size:24px;font-weight:600;margin:16px 0 0;color:#333;text-align:center;line-height:1.3}@media (prefers-color-scheme: dark){.motivational-text{color:#e9e3c9}}.streaks-container{display:flex;justify-content:center;gap:24px;margin:12px 0}.streak-card{flex:0 0 130px;padding:16px;background:#ffffffb3;border-radius:12px;text-align:center;box-shadow:0 2px 8px #0000000f;display:flex;flex-direction:column;align-items:center;gap:4px}.streak-card .streak-emoji{font-size:1.5rem}.streak-card .streak-value{font-size:1.75rem;font-weight:600;color:gray;line-height:1}.streak-card .streak-label{font-size:14px;color:#8c8273}@media (prefers-color-scheme: dark){.streak-card{background:#2d2d2dcc;box-shadow:0 2px 8px #1a1a1a4d}.streak-card .streak-value{color:#4ca9ea}.streak-card .streak-label{color:#d3c793}}.win-actions-primary{display:flex;flex-direction:column;align-items:center;gap:12px;margin:12px 0}.try-again-prominent{width:100%;max-width:280px;padding:16px 32px;font-size:18px;font-weight:600;background:linear-gradient(135deg,gray,#676767);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #8080804d;animation:pulseSubtle 2s infinite}.try-again-prominent:hover{transform:translateY(-2px);box-shadow:0 6px 16px #80808066}.try-again-prominent:active{transform:translateY(0)}.share-win-button{width:100%;max-width:280px;padding:16px 32px;font-size:18px;font-weight:600;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #28a7454d;display:flex;align-items:center;justify-content:center;gap:8px;position:relative}.share-win-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #28a74566;background:linear-gradient(135deg,#218838,#1aa179)}.share-win-button:active{transform:translateY(0)}.share-win-button svg{font-size:16px}.secondary-action{padding:12px 24px;font-size:16px;font-weight:500;background:transparent;color:gray;border:2px solid rgb(128,128,128);border-radius:8px;cursor:pointer;transition:all .2s}.secondary-action:hover{background:#8080801a}@media (prefers-color-scheme: dark){.secondary-action{color:#e9e3c9;border-color:#e9e3c9}.secondary-action:hover{background:#e9e3c91a}}.next-difficulty-button{width:100%;max-width:280px;padding:16px 32px;font-size:18px;font-weight:600;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #28a7454d}.next-difficulty-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #28a74566;background:linear-gradient(135deg,#218838,#1aa179)}.next-difficulty-button:active{transform:translateY(0)}.dual-action-buttons{display:flex;gap:12px;width:100%;max-width:320px;justify-content:center}.action-button-primary{flex:1;padding:16px 24px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .2s;box-shadow:0 3px 10px #28a74540}.action-button-primary:hover{transform:translateY(-2px);box-shadow:0 5px 14px #28a74559}.action-button-primary:active{transform:translateY(0)}.action-button-secondary{flex:1;padding:16px 24px;font-size:16px;font-weight:600;background:#fff;color:gray;border:2px solid rgb(128,128,128);border-radius:10px;cursor:pointer;transition:all .2s}.action-button-secondary:hover{background:#80808014;transform:translateY(-2px)}.action-button-secondary:active{transform:translateY(0)}@media (prefers-color-scheme: dark){.action-button-secondary{background:#2d2d2d;color:#e9e3c9;border-color:#e9e3c9}.action-button-secondary:hover{background:#e9e3c91a}}.secondary-links{display:flex;align-items:center;gap:12px;margin-top:8px}.link-separator{color:#8c8273}@media (prefers-color-scheme: dark){.link-separator{color:#cbbd81}}.close-link,.share-link{background:none;border:none;color:#8c8273;font-size:16px;cursor:pointer;text-decoration:underline;padding:8px;position:relative;display:inline-flex;align-items:center;gap:4px}.close-link svg,.share-link svg{font-size:.85em}.close-link:hover,.share-link:hover{color:#333}@media (prefers-color-scheme: dark){.close-link,.share-link{color:#d3c793}.close-link:hover,.share-link:hover{color:#e9e3c9}}.copy-toast{position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:4px 12px;border-radius:4px;font-size:14px;font-weight:400;white-space:nowrap;animation:fadeInOut 2s ease-in-out}.copy-toast:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #333}.conditional-footer{margin-top:12px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08)}@media (prefers-color-scheme: dark){.conditional-footer{border-top-color:#e9e3c926}}.next-puzzle-timer{text-align:center}.next-puzzle-timer p{font-size:14px;margin-bottom:8px;color:#8c8273}@media (prefers-color-scheme: dark){.next-puzzle-timer p{color:#d3c793}}.timer{font-size:28px;color:gray;font-weight:600}@media (prefers-color-scheme: dark){.timer{color:#4ca9ea}}.time-unit{display:inline-block;min-width:32px}.time-separator{margin:0 2px;opacity:.7}.app-promo{margin-top:16px}.app-promo .promo-text{margin:0 0 12px;font-size:14px;color:#8c8273}@media (prefers-color-scheme: dark){.app-promo .promo-text{color:#d3c793}}.app-promo .app-store-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.app-promo .app-store-badges a{display:inline-block;transition:transform .2s}.app-promo .app-store-badges a:hover{transform:scale(1.05)}.app-promo .app-store-badges img{height:36px;width:auto}@keyframes pulseSubtle{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes medalPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(5px)}15%,85%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-5px)}}.congratulations-title{font-family:Arvo,Georgia,serif;font-style:italic;font-size:32px;margin-top:0;margin-bottom:16px;background:linear-gradient(to right,#afc053,#b9c255);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.autocomplete-content{font-size:18px;margin:0;padding:5px 0}@media (prefers-color-scheme: dark){.autocomplete-content{color:#e9e3c9}.autocomplete-content p{color:#dad0a5}}.unlocked-message{font-size:24px;margin:12px 0 0;padding:5px 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px}.color-name{font-weight:600}.optimal-badge{font-size:24px;margin-left:8px;animation:medalPulse 2s infinite}.win-stats{display:flex;justify-content:center;gap:18px;margin:5px 0;width:100%}.stat-item{display:flex;flex-direction:column;align-items:center;flex:0 0 110px;max-width:110px;min-width:100px}.stat-value{font-size:26px;font-weight:600;color:gray}@media (prefers-color-scheme: dark){.stat-value{color:#4ca9ea}}.stat-label{font-size:14px;color:#8c8273}.settings-modal{background-color:#fff;border-radius:20px;padding:24px;width:95%;max-width:650px;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}@media (prefers-color-scheme: dark){.settings-modal{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid #eee}.settings-header h2{margin:0;font-size:24px;font-weight:600;font-family:Arvo,Georgia,serif;font-style:italic;background:linear-gradient(to right,#4ca9ea,#38bdfe);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (prefers-color-scheme: dark){.settings-header{border-bottom-color:#e9e3c933}}.settings-close-button{font-size:24px;margin:0;padding:8px}.settings-content{flex:1;overflow-y:auto}.settings-section{margin-bottom:24px}.settings-section h3{font-size:18px;margin-bottom:12px;font-weight:600;color:#333}@media (prefers-color-scheme: dark){.settings-section h3{color:#e9e3c9}}.setting-item{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f5f5f5}.setting-item label{font-size:16px;font-weight:500;color:#333}@media (prefers-color-scheme: dark){.setting-item{border-bottom-color:#e9e3c926}.setting-item label{color:#e9e3c9}}.setting-description{margin:4px 0 0;font-size:14px;color:#8c8273;font-weight:400}@media (prefers-color-scheme: dark){.setting-description{color:#d3c793}}.settings-footer{padding-top:16px;border-top:1px solid #eee;display:flex;justify-content:flex-end}@media (prefers-color-scheme: dark){.settings-footer{border-top-color:#e9e3c933}}.settings-save-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;font-size:16px;border-radius:12px;padding:12px 24px}.settings-save-button:hover{opacity:.9;transform:translateY(-1px)}.settings-save-button:active{transform:translateY(0)}.radio-group{display:flex;flex-direction:column;gap:8px;min-width:120px;align-items:flex-end}.radio-label{display:flex!important;align-items:center;cursor:pointer;font-weight:400!important}.radio-label input[type=radio]{margin-right:8px;cursor:pointer}@media (prefers-color-scheme: dark){.radio-label{color:#e9e3c9}}.difficulty-setting-item{flex-direction:column;align-items:stretch}.difficulty-header{margin-bottom:12px}.difficulty-selector{padding:0;width:100%}.difficulty-segmented-control{display:flex;width:100%;border-radius:20px;overflow:hidden;border:1px solid rgb(128,128,128);position:relative;height:36px;box-shadow:0 1px 3px #0000001a}@media (prefers-color-scheme: dark){.difficulty-segmented-control{border-color:#e9e3c9;box-shadow:0 1px 3px #ffffff14}}.difficulty-segment{flex:1;text-align:center;padding:8px 12px;background-color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:500;color:gray;transition:all .2s ease;display:flex;align-items:center;justify-content:center;z-index:2}.difficulty-segment.active{background-color:gray;color:#fff;font-weight:600}.difficulty-segment:not(:last-child){border-right:1px solid rgba(128,128,128,.2)}.difficulty-segment:hover:not(.active){background-color:#ede9d4}.difficulty-segment:focus{outline:none;box-shadow:0 0 0 2px #8080804d}@media (prefers-color-scheme: dark){.difficulty-segment{background-color:#2d2d2d;color:#e9e3c9}.difficulty-segment.active{background-color:#e9e3c9;color:#1a1a1a}.difficulty-segment:not(:last-child){border-right-color:#e9e3c933}.difficulty-segment:hover:not(.active){background-color:#3a3a3a}.difficulty-segment:focus{box-shadow:0 0 0 2px #e9e3c94d}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 20px #0000004d;max-height:85vh;overflow-y:auto;color:#333;position:relative;width:95%;max-width:650px}@media (prefers-color-scheme: dark){.modal-content{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26;color:#e9e3c9}}.close-button{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#8c8273}.close-button:hover{color:#333}@media (prefers-color-scheme: dark){.close-button{color:#d3c793}.close-button:hover{color:#e9e3c9}}.modal-header{margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgb(218.2368421053,208.2105263158,164.7631578947)}@media (prefers-color-scheme: dark){.modal-header{border-bottom-color:#e9e3c933}}.modal-title{margin:0;font-size:28px;font-weight:600;color:#333;text-align:center}@media (prefers-color-scheme: dark){.modal-title{color:#e9e3c9}}.stats-modal-title{margin:0;font-size:28px;font-weight:600;text-align:center;font-family:Arvo,Georgia,serif;font-style:italic;background:linear-gradient(to right,#f7ac4b,#f6b252);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stats-modal{width:95%;background-color:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 20px #0000004d;max-height:85vh;overflow-y:auto;color:#333;position:relative;z-index:1000}@media (prefers-color-scheme: dark){.stats-modal{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26;color:#e9e3c9}}.stats-modal-large{max-width:900px!important;width:95%!important}.stats-tabs{display:flex;border-bottom:1px solid #eee;margin-bottom:24px}@media (prefers-color-scheme: dark){.stats-tabs{border-bottom-color:#e9e3c933}}.stats-tab{padding:12px 16px;cursor:pointer;border:none;background-color:transparent;color:#8c8273;font-weight:500;position:relative;transition:color .2s ease}.stats-tab:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:3px;background-color:transparent;transition:background-color .2s ease}.stats-tab:hover{color:#333}.stats-tab.active{color:gray;font-weight:600}.stats-tab.active:after{background-color:gray}@media (prefers-color-scheme: dark){.stats-tab{color:#d3c793}.stats-tab:hover{color:#e9e3c9}.stats-tab.active{color:#4ca9ea}.stats-tab.active:after{background-color:#4ca9ea}}.stats-section{margin-bottom:24px}.stats-section h3{font-size:18px;margin-bottom:12px;font-weight:600;color:#333;padding-bottom:8px}@media (prefers-color-scheme: dark){.stats-section h3{color:#e9e3c9}}.stats-grid{display:grid;gap:16px;margin-top:16px}.today-stats-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.all-time-stats-grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}.stat-item{text-align:center;padding:12px;background-color:#ede9d4;border-radius:12px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;justify-content:center;min-height:90px}.stat-item .stat-value{font-size:18px;font-weight:600;color:gray;margin-bottom:4px}.stat-item .stat-label{font-size:14px;color:#8c8273;line-height:1.2}.stat-item .stat-description{font-size:12px;color:#8c8273;margin-top:4px;font-style:italic}@media (prefers-color-scheme: dark){.stat-item{background-color:#3a3a3a;box-shadow:0 1px 3px #ffffff14}.stat-item .stat-value{color:#4ca9ea}.stat-item .stat-label{color:#d3c793}.stat-item .stat-description{color:#cbbd81}}.personal-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;margin-left:50px;margin-right:50px}@media (max-width: 768px){.personal-stats-grid{grid-template-columns:repeat(2,1fr);margin-left:24px;margin-right:24px}}@media (max-width: 480px){.personal-stats-grid{grid-template-columns:1fr;margin-left:24px;margin-right:24px}}.personal-stat-item{text-align:center;padding:16px 12px;background-color:#ede9d4;border-radius:12px;box-shadow:0 1px 3px #0000001a;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:110px;transition:all .2s ease}.personal-stat-item:hover{transform:translateY(-2px);box-shadow:0 2px 6px #00000026}.personal-stat-item .personal-stat-value{font-size:28px;font-weight:600;color:gray;margin-bottom:8px;line-height:1.2}.personal-stat-item .personal-stat-label{font-size:14px;color:#8c8273;line-height:1.3;text-align:center}@media (prefers-color-scheme: dark){.personal-stat-item{background-color:#3a3a3a;box-shadow:0 1px 3px #ffffff14}.personal-stat-item:hover{box-shadow:0 2px 6px #ffffff1f}.personal-stat-item .personal-stat-value{color:#4ca9ea}.personal-stat-item .personal-stat-label{color:#d3c793}}.stats-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;min-height:300px}.stats-loading p{font-size:16px;color:#8c8273;margin-top:16px}.stats-loading .spinner{width:50px;height:50px;border:4px solid rgba(128,128,128,.2);border-left-color:gray;border-radius:50%;animation:spin 1s linear infinite}@media (prefers-color-scheme: dark){.stats-loading p{color:#d3c793}.stats-loading .spinner{border-color:#e9e3c933;border-left-color:#e9e3c9}}.error-message{color:#900;background-color:#ff94941a;border:1px solid rgb(255,76.5,76.5);border-radius:12px;padding:16px;text-align:center}.global-stats-section{margin-top:24px}.leaderboard-header-section{position:relative;display:flex;align-items:flex-start;margin-bottom:24px;padding-bottom:24px;border-bottom:2px solid rgb(218.2368421053,208.2105263158,164.7631578947);min-height:70px}@media (max-width: 770px){.leaderboard-header-section{flex-direction:column;align-items:center;gap:16px}}@media (prefers-color-scheme: dark){.leaderboard-header-section{border-bottom-color:#e9e3c933}}.leaderboard-header{text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}@media (max-width: 770px){.leaderboard-header{position:static;transform:none}}.leaderboard-header h3{font-size:28px;font-weight:600;color:#333;margin:0;line-height:1.2}@media (prefers-color-scheme: dark){.leaderboard-header h3{color:#e9e3c9}}.leaderboard-header h4{font-size:18px;font-weight:500;color:#8c8273;margin:4px 0 0;line-height:1.2}@media (prefers-color-scheme: dark){.leaderboard-header h4{color:#d3c793}}.leaderboard-controls-horizontal{display:flex;flex-direction:column;gap:8px;justify-content:center;margin-right:auto}@media (max-width: 770px){.leaderboard-controls-horizontal{margin-right:0;align-items:center}}.leaderboard-controls-horizontal .control-row{display:flex;align-items:center;gap:12px;width:100%;max-width:300px}@media (max-width: 768px){.leaderboard-controls-horizontal .control-row{flex-direction:column;align-items:stretch;gap:8px;max-width:none}}.leaderboard-controls-horizontal .control-row label{font-size:12px;color:#8c8273;font-weight:400;min-width:70px;text-align:left}@media (max-width: 768px){.leaderboard-controls-horizontal .control-row label{text-align:center;min-width:auto;margin-bottom:4px}}@media (prefers-color-scheme: dark){.leaderboard-controls-horizontal .control-row label{color:#d3c793}}.leaderboard-controls-horizontal .control-row .select-wrapper{position:relative}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);border-radius:12px;padding:8px 24px 8px 8px;font-size:12px;color:#333;cursor:pointer;min-width:140px;transition:border-color .2s ease;position:relative;z-index:1}@media (max-width: 768px){.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select{min-height:44px;padding:12px 24px 12px 8px}}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select:hover{border-color:gray}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select:focus{outline:none;border-color:gray;box-shadow:0 0 0 3px #8080801a}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select option{padding:8px}@media (prefers-color-scheme: dark){.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select{background-color:#3a3a3a;border-color:#e9e3c94d;color:#e9e3c9}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select:hover{border-color:#4ca9ea}.leaderboard-controls-horizontal .control-row .select-wrapper .leaderboard-select:focus{border-color:#4ca9ea;box-shadow:0 0 0 3px #4ca9ea33}}.leaderboard-controls-horizontal .control-row .select-wrapper .select-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8c8273;font-size:8px;z-index:2}@media (prefers-color-scheme: dark){.leaderboard-controls-horizontal .control-row .select-wrapper .select-icon{color:#d3c793}}.leaderboard-list-container{max-width:500px;margin:0 auto;padding-top:12px}.leaderboard-list-container .requester-entry{margin-bottom:24px;padding-bottom:24px;border-bottom:2px solid rgb(218.2368421053,208.2105263158,164.7631578947)}@media (prefers-color-scheme: dark){.leaderboard-list-container .requester-entry{border-bottom-color:#e9e3c933}}.leaderboard-list-container .leaderboard-list{display:flex;flex-direction:column;gap:12px}.leaderboard-list-container .no-data-message{text-align:center;padding:32px;color:#8c8273;font-size:16px}@media (prefers-color-scheme: dark){.leaderboard-list-container .no-data-message{color:#d3c793}}.leaderboard-entry{display:flex;align-items:center;padding:16px;background-color:#fff;border:2px solid rgb(218.2368421053,208.2105263158,164.7631578947);border-radius:12px;transition:all .2s ease}.leaderboard-entry .entry-rank{font-size:28px;font-weight:600;color:#8c8273;min-width:60px;text-align:center}.leaderboard-entry .entry-info{flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}.leaderboard-entry .entry-info .entry-username{font-size:16px;font-weight:500;color:#333;display:flex;align-items:center;gap:8px;flex:1;min-width:0}.leaderboard-entry .entry-info .entry-username>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-entry .entry-info .entry-value{font-size:18px;font-weight:600;color:gray;flex-shrink:0}.leaderboard-entry .entry-info .current-badge{font-size:12px;font-weight:500;background-color:gray;color:#fff;padding:4px 8px;border-radius:8px;white-space:nowrap;flex-shrink:0}.leaderboard-entry.rank-gold{background:linear-gradient(135deg,#ffd70033,#ffd7000d);border-color:gold}.leaderboard-entry.rank-gold .entry-rank{color:#daa520}.leaderboard-entry.rank-silver{background:linear-gradient(135deg,#c0c0c033,#c0c0c00d);border-color:silver}.leaderboard-entry.rank-silver .entry-rank{color:#a9a9a9}.leaderboard-entry.rank-bronze{background:linear-gradient(135deg,#cd7f3233,#cd7f320d);border-color:#cd7f32}.leaderboard-entry.rank-bronze .entry-rank{color:#b87333}.leaderboard-entry.user-entry:not(.rank-gold):not(.rank-silver):not(.rank-bronze){background:linear-gradient(135deg,#80808026,#8080800d);border-color:gray}.leaderboard-entry.user-entry:not(.rank-gold):not(.rank-silver):not(.rank-bronze) .entry-rank{color:gray}@media (prefers-color-scheme: dark){.leaderboard-entry{background-color:#353535;border-color:#e9e3c933}.leaderboard-entry .entry-rank{color:#d3c793}.leaderboard-entry .entry-info .entry-username{color:#e9e3c9}.leaderboard-entry .entry-info .entry-value{color:#4ca9ea}.leaderboard-entry.rank-gold{background:linear-gradient(135deg,#ffd70026,#ffd7000d)}.leaderboard-entry.rank-silver{background:linear-gradient(135deg,#c0c0c026,#c0c0c00d)}.leaderboard-entry.rank-bronze{background:linear-gradient(135deg,#cd7f3226,#cd7f320d)}.leaderboard-entry.user-entry:not(.rank-gold):not(.rank-silver):not(.rank-bronze){background:linear-gradient(135deg,#4ca9ea33,#4ca9ea0d);border-color:#4ca9ea}.leaderboard-entry.user-entry:not(.rank-gold):not(.rank-silver):not(.rank-bronze) .entry-rank{color:#4ca9ea}}.share-section{text-align:center;margin-top:24px;padding-top:16px;border-top:1px solid #eee}.share-section p{font-size:14px;color:#8c8273;margin-bottom:12px}@media (prefers-color-scheme: dark){.share-section{border-top-color:#e9e3c933}.share-section p{color:#d3c793}}.social-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:12px}.social-button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;transition:all .2s ease;position:relative}.social-button:hover{transform:translateY(-2px);box-shadow:0 2px 6px #00000026}.social-button:active{transform:translateY(0)}.twitter-button{background-color:#1da1f2}.twitter-button:hover{background-color:#0c85d0}.facebook-button{background-color:#4267b2}.facebook-button:hover{background-color:#34518d}.email-button{background-color:#d44638}.email-button:hover{background-color:#b23327}.clipboard-button{background-color:#6c757d}.clipboard-button:hover{background-color:#545b62}.web-share-button{background-color:gray}.web-share-button:hover{background-color:#676767}.copy-success-tooltip{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:4px 8px;border-radius:8px;font-size:12px;white-space:nowrap;z-index:2000;animation:fadeIn .3s ease}.stats-actions{display:flex;justify-content:center;margin-top:24px;padding-top:16px;border-top:1px solid #eee}@media (prefers-color-scheme: dark){.stats-actions{border-top-color:#e9e3c933}}.share-stats-button{display:inline-flex;align-items:center;justify-content:center;background-color:gray;color:#fff;font-weight:500;border:none;border-radius:12px;cursor:pointer;transition:background-color .2s,transform .1s;padding:12px 16px;font-size:14px}.share-stats-button:hover{background-color:#676767}.share-stats-button:active{transform:translateY(1px)}.share-stats-button svg{margin-right:8px}.lost-game-modal .modal-content{background-color:#e9e3c9}@media (prefers-color-scheme: dark){.lost-game-modal .modal-content{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.lost-game-title{background:linear-gradient(to right,#d16381,#db757f);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-family:Arvo,Georgia,serif;font-style:italic;font-size:32px;margin-top:0;margin-bottom:16px}.lost-game-text{color:gray;font-size:18px;margin:8px 0}@media (prefers-color-scheme: dark){.lost-game-text{color:#e9e3c9}}.lost-game-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;font-size:16px;border-radius:12px;padding:12px 32px;box-shadow:0 2px 6px #00000026}.lost-game-button:hover{opacity:.9;transform:translateY(-1px)}@media (prefers-color-scheme: dark){.lost-game-button{box-shadow:0 2px 6px #ffffff1f}}.usage-stats-screen{min-height:100vh;background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;padding-bottom:2rem}.usage-stats-screen .screen-header{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:#fff;border-bottom:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);position:sticky;top:0;z-index:10}.usage-stats-screen .screen-header .back-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#e9e3c9;border:none;border-radius:50%;color:#8c8273;cursor:pointer;transition:all .2s ease}.usage-stats-screen .screen-header .back-btn:hover{background:#e2dab7;color:#333}.usage-stats-screen .screen-header h1{margin:0;font-size:1.5rem;font-weight:600;color:#333}.usage-stats-screen .summary-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1.5rem;max-width:600px;margin:0 auto}.usage-stats-screen .summary-card{background:#ede9d4;border-radius:20px;padding:1.25rem;display:flex;align-items:center;gap:1rem;transition:transform .2s ease,box-shadow .2s ease}.usage-stats-screen .summary-card:hover{transform:translateY(-2px);box-shadow:0 2px 10px #0003}.usage-stats-screen .summary-card.featured{background:linear-gradient(135deg,#80808014,#80808005);border:1px solid rgba(128,128,128,.15)}.usage-stats-screen .summary-card.featured .card-icon{background:#8080801f;color:gray}.usage-stats-screen .summary-card.featured .card-value{color:gray}.usage-stats-screen .summary-card .card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#e9e3c9;border-radius:12px;color:#8c8273;font-size:1.25rem;flex-shrink:0}.usage-stats-screen .summary-card .card-data{display:flex;flex-direction:column;min-width:0}.usage-stats-screen .summary-card .card-value{font-size:1.75rem;font-weight:700;line-height:1.2;color:#333}.usage-stats-screen .summary-card .card-label{font-size:.875rem;color:#8c8273;margin-top:.125rem}.usage-stats-screen .chart-panel{background:#fff;margin:0 1rem;border-radius:20px;border:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);overflow:hidden;max-width:1200px;margin-left:auto;margin-right:auto}.usage-stats-screen .chart-controls{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);gap:.75rem;flex-wrap:wrap}.usage-stats-screen .time-toggles,.usage-stats-screen .metric-toggles{display:flex;background:#ede9d4;border-radius:12px;padding:4px;gap:2px}.usage-stats-screen .time-toggles button,.usage-stats-screen .metric-toggles button{padding:.5rem .875rem;background:transparent;border:none;border-radius:6px;color:#8c8273;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .1s ease;display:flex;align-items:center;gap:.375rem}.usage-stats-screen .time-toggles button:hover:not(.active),.usage-stats-screen .metric-toggles button:hover:not(.active){color:#333}.usage-stats-screen .time-toggles button.active,.usage-stats-screen .metric-toggles button.active{background:#fff;color:gray;box-shadow:0 1px 3px #0000001a}.usage-stats-screen .time-toggles button svg,.usage-stats-screen .metric-toggles button svg{font-size:.875rem}@media (max-width: 480px){.usage-stats-screen .time-toggles button span,.usage-stats-screen .metric-toggles button span{display:none}}.usage-stats-screen .chart-title{padding:1rem 1.25rem .5rem;display:flex;justify-content:space-between;align-items:baseline}.usage-stats-screen .chart-title h2{margin:0;font-size:1rem;font-weight:600;color:#333}.usage-stats-screen .chart-title .chart-subtitle{font-size:.8125rem;color:#8c8273}.usage-stats-screen .streak-type-selector{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1.25rem;border-bottom:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);background:#ede9d480}.usage-stats-screen .streak-type-selector label{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:#fff;border:1px solid rgb(218.2368421053,208.2105263158,164.7631578947);border-radius:8px;cursor:pointer;font-size:.8125rem;color:#8c8273;transition:all .1s ease;-webkit-user-select:none;user-select:none}.usage-stats-screen .streak-type-selector label input[type=checkbox]{display:none}.usage-stats-screen .streak-type-selector label:before{content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0}.usage-stats-screen .streak-type-selector label[data-streak-type=puzzleStreak]:before{background-color:#fb997f}.usage-stats-screen .streak-type-selector label[data-streak-type=easyGoal]:before{background-color:#afc053}.usage-stats-screen .streak-type-selector label[data-streak-type=mediumGoal]:before{background-color:#f7ac4b}.usage-stats-screen .streak-type-selector label[data-streak-type=hardGoal]:before{background-color:#4ca9ea}.usage-stats-screen .streak-type-selector label:hover:not(.active){border-color:#8c8273;color:#333}.usage-stats-screen .streak-type-selector label.active{background:#8080801a;border-color:gray;color:gray;font-weight:500}.usage-stats-screen .chart-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;color:#8c8273;gap:.75rem;padding:2rem}.usage-stats-screen .chart-placeholder p{margin:0;font-size:.9375rem}.usage-stats-screen .chart-placeholder.error p{color:#900}.usage-stats-screen .chart-area{padding:.5rem 1rem 1.5rem;overflow-x:auto}.usage-stats-screen .chart-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;padding:.5rem 0 .75rem}.usage-stats-screen .legend-item{display:flex;align-items:center;gap:.375rem}.usage-stats-screen .legend-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}.usage-stats-screen .legend-label{font-size:.75rem;color:#8c8273}.usage-stats-screen .chart-bars{display:flex;align-items:flex-end;gap:3px;min-height:220px;padding-top:1.5rem;padding-bottom:.5rem}.usage-stats-screen .chart-bars.multi-bar-mode{gap:4px}.usage-stats-screen .bar-column{flex:1;min-width:20px;max-width:40px;display:flex;flex-direction:column;align-items:center;position:relative}.usage-stats-screen .bar-column:hover .bar-tooltip{opacity:1;transform:translate(-50%) translateY(-4px)}.usage-stats-screen .bar-column:hover .bar-fill:not(.bar-fill--grouped){background:linear-gradient(180deg,gray,#808080b3)}.usage-stats-screen .bar-column.latest .bar-fill:not(.bar-fill--grouped){background:linear-gradient(180deg,gray,#80808099)}.usage-stats-screen .bar-column--grouped{min-width:28px;max-width:60px}.usage-stats-screen .bar-column--grouped:hover .bar-fill--grouped{filter:brightness(1.1)}.usage-stats-screen .bar-column--grouped.latest .bar-fill--grouped{filter:brightness(1.05)}.usage-stats-screen .bar-tooltip{position:absolute;top:0;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.6875rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:all .1s ease;z-index:5}.usage-stats-screen .bar-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#333}.usage-stats-screen .bar-tooltip--grouped{padding:.5rem .625rem;text-align:left}.usage-stats-screen .bar-tooltip--grouped .tooltip-total{font-weight:600;margin-bottom:.375rem;padding-bottom:.25rem;border-bottom:1px solid rgba(255,255,255,.2)}.usage-stats-screen .bar-tooltip--grouped .tooltip-row{display:flex;align-items:center;gap:.375rem;margin-top:.25rem}.usage-stats-screen .bar-tooltip--grouped .tooltip-color{width:6px;height:6px;border-radius:2px;flex-shrink:0}.usage-stats-screen .bar-tooltip--grouped .tooltip-label{flex:1;opacity:.85}.usage-stats-screen .bar-tooltip--grouped .tooltip-value{font-weight:500}.usage-stats-screen .bar-track{width:100%;height:180px;display:flex;align-items:flex-end;justify-content:center}.usage-stats-screen .bar-track--grouped{justify-content:center}.usage-stats-screen .bar-group{display:flex;align-items:flex-end;gap:2px;height:100%}.usage-stats-screen .bar-fill{width:100%;max-width:28px;background:linear-gradient(180deg,#80808080,#80808040);border-radius:4px 4px 0 0;transition:all .2s ease;min-height:3px}.usage-stats-screen .bar-fill--grouped{width:8px;min-width:6px;max-width:12px;background:none;border-radius:3px 3px 0 0;transition:filter .1s ease,height .2s ease}.usage-stats-screen .bar-label{margin-top:.75rem;font-size:.625rem;color:#8c8273;white-space:nowrap;text-align:center}.usage-stats-screen .bar-label--hidden{visibility:hidden}.usage-stats-screen .footer-stats{display:flex;justify-content:center;gap:2.5rem;padding:1.5rem;margin-top:.5rem}.usage-stats-screen .footer-stat{display:flex;flex-direction:column;align-items:center;text-align:center}.usage-stats-screen .footer-stat .footer-value{font-size:1.5rem;font-weight:700;color:gray}.usage-stats-screen .footer-stat .footer-label{font-size:.8125rem;color:#8c8273;margin-top:.125rem}@media (max-width: 480px){.usage-stats-screen .screen-header{padding:1rem}.usage-stats-screen .screen-header h1{font-size:1.25rem}.usage-stats-screen .summary-cards{padding:1rem;gap:.75rem}.usage-stats-screen .summary-card{padding:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.usage-stats-screen .summary-card .card-icon{width:40px;height:40px;font-size:1rem}.usage-stats-screen .summary-card .card-value{font-size:1.5rem}.usage-stats-screen .chart-panel{margin:0 .75rem;border-radius:12px}.usage-stats-screen .chart-controls{padding:.75rem 1rem}.usage-stats-screen .time-toggles button,.usage-stats-screen .metric-toggles button{padding:.4rem .625rem;font-size:.75rem}.usage-stats-screen .chart-title{padding:.75rem 1rem .5rem;flex-direction:column;gap:.25rem}.usage-stats-screen .chart-title h2{font-size:.9375rem}.usage-stats-screen .streak-type-selector{padding:.5rem 1rem;gap:.375rem}.usage-stats-screen .streak-type-selector label{padding:.25rem .5rem;font-size:.75rem}.usage-stats-screen .chart-bars{min-height:160px}.usage-stats-screen .bar-track{height:130px}.usage-stats-screen .bar-column{min-width:14px}.usage-stats-screen .bar-column--grouped{min-width:20px;max-width:48px}.usage-stats-screen .bar-fill--grouped{width:6px;min-width:4px;max-width:10px}.usage-stats-screen .bar-group{gap:1px}.usage-stats-screen .chart-legend{gap:.75rem;padding:.375rem 0 .5rem}.usage-stats-screen .legend-color{width:8px;height:8px}.usage-stats-screen .legend-label{font-size:.6875rem}.usage-stats-screen .footer-stats{gap:2rem;padding:1.25rem 1rem}.usage-stats-screen .footer-stat .footer-value{font-size:1.25rem}.usage-stats-screen .footer-stat .footer-label{font-size:.75rem}}.container.app-fade-in{opacity:0;animation:appFadeIn .5s ease forwards}@keyframes appFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.simple-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;width:100%;background-color:#e9e3c9;position:fixed;top:0;left:0;z-index:100}.simple-loading-container .spinner{width:40px;height:40px;border:4px solid rgba(128,128,128,.2);border-left-color:gray;border-radius:50%;animation:spin 1s linear infinite}.simple-loading-container p{margin-top:16px;color:#8c8273}@media (prefers-color-scheme: dark){.simple-loading-container{background-color:#1a1a1a}.simple-loading-container .spinner{border-color:#e9e3c933;border-left-color:#e9e3c9}.simple-loading-container p{color:#d3c793}}.board-fading .grid{opacity:0;transition:opacity .5s ease-in-out}.tutorial-mode .grid{opacity:1;transition:opacity .5s ease-in-out}.guest-signup-container{position:absolute;top:15px;right:15px;z-index:10}.guest-signup-container.left-side{right:auto;left:15px}.tutorial-modal-title{font-family:Arvo,Georgia,serif;font-style:italic;font-size:28px;margin-top:0;margin-bottom:16px;background:linear-gradient(to right,#fb997f,#fea474);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tutorial-step-modal{position:fixed;left:50%;transform:translate(-50%);background-color:#e9e3c9fa;border-radius:12px;box-shadow:0 2px 10px #0003;padding:15px 20px;z-index:1000;max-width:90%;width:500px}.tutorial-step-modal.tutorial-step-modal-top{top:20px}.tutorial-step-modal.tutorial-step-modal-bottom{bottom:20px}.tutorial-step-modal.tutorial-color-selection-step{background-color:#e9e3c9;border:3px solid #4ca9ea;box-shadow:0 4px 16px #00000040,0 0 0 4px #4ca9ea4d;animation:tutorial-modal-pulse 2s infinite}.tutorial-step-modal.tutorial-color-selection-step .tutorial-step-title{color:#4ca9ea;font-weight:700;font-size:1.3rem}.tutorial-step-modal.tutorial-color-selection-step .tutorial-step-message{font-size:1.1rem}.tutorial-step-modal .tutorial-step-content{text-align:center}.tutorial-step-modal .tutorial-step-content .tutorial-step-title{margin:0 0 10px;color:#333;font-family:Arvo,Georgia,serif;font-size:1.2rem;font-weight:700}.tutorial-step-modal .tutorial-step-content .tutorial-step-message{margin:0 0 15px;font-size:1rem;line-height:1.5;color:#8c8273}.tutorial-step-modal .tutorial-step-content .tutorial-continue-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;border-radius:12px;font-size:16px;padding:8px 16px;font-size:1rem}.tutorial-step-modal .tutorial-step-content .tutorial-continue-button:hover{opacity:.9;transform:translateY(-1px)}@media (prefers-color-scheme: dark){.tutorial-step-modal{background-color:#2d2d2dfa;box-shadow:0 2px 8px #ffffff26}.tutorial-step-modal.tutorial-color-selection-step{background-color:#2d2d2d}.tutorial-step-modal .tutorial-step-content .tutorial-step-title{color:#e9e3c9}.tutorial-step-modal .tutorial-step-content .tutorial-step-message{color:#d3c793}}@keyframes tutorial-modal-pulse{0%{box-shadow:0 4px 16px #00000040,0 0 0 4px #4a90e24d}50%{box-shadow:0 4px 20px #0000004d,0 0 0 8px #4a90e233}to{box-shadow:0 4px 16px #00000040,0 0 0 4px #4a90e24d}}.algorithm-move-modal{top:50%;bottom:auto;transform:translate(-50%,-50%)}.algorithm-move-modal .color-text{font-weight:700;padding:2px 5px;border-radius:3px}.algorithm-move-modal .color-text.red{background-color:#ff000026;color:#8b0000}.algorithm-move-modal .color-text.blue{background-color:#0000ff26;color:#00008b}.algorithm-move-modal .color-text.green{background-color:#00800026;color:#006400}.algorithm-move-modal .color-text.yellow{background-color:#ffff0026;color:#707000}.algorithm-move-modal .color-text.orange{background-color:#ffa50026;color:#ff8c00}.algorithm-move-modal .color-text.purple{background-color:#80008026;color:#8b008b}@media (prefers-color-scheme: dark){.algorithm-move-modal .color-text.red{background-color:#ff646440;color:#ff8080}.algorithm-move-modal .color-text.blue{background-color:#6496ff40;color:#80b0ff}.algorithm-move-modal .color-text.green{background-color:#64c86440;color:#80d080}.algorithm-move-modal .color-text.yellow{background-color:#ffff6440;color:#e0e080;text-shadow:0 0 2px rgba(0,0,0,.5)}.algorithm-move-modal .color-text.orange{background-color:#ffb46440;color:#ffb060}.algorithm-move-modal .color-text.purple{background-color:#c864c840;color:#d080d0}}.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.tutorial-overlay .tutorial-highlight{position:absolute;z-index:1001}@keyframes pulse{0%{box-shadow:0 0 #ff0000b3;border:2px solid rgba(255,0,0,.9)}50%{box-shadow:0 0 10px 4px #ff000080;border:2px solid rgb(255,0,0)}to{box-shadow:0 0 #ff0000b3;border:2px solid rgba(255,0,0,.9)}}.tutorial-mode .grid-cell[data-hint-target=true]{animation:highlight-pulse 1.5s infinite}@keyframes highlight-pulse{0%{box-shadow:0 0 #ffffffb3}70%{box-shadow:0 0 0 10px #fff0}to{box-shadow:0 0 #fff0}}.tutorial-cell-highlight{pointer-events:none;z-index:20;animation:pulse 1.5s infinite;border:2px solid rgba(255,0,0,.9);border-radius:4px;box-shadow:0 0 8px #ff0000b3}.win-modal .win-actions{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:30px}.win-modal .win-actions .try-again-button,.win-modal .win-actions .win-close-button{margin:0!important;padding:0!important;box-sizing:border-box!important;width:160px!important;height:50px!important;border-radius:8px!important;font-size:1rem!important;font-weight:600!important;cursor:pointer!important;display:flex!important;justify-content:center!important;align-items:center!important;transition:all .2s ease!important;text-align:center!important;text-decoration:none!important}.win-modal .win-actions .try-again-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#afc053,#b9c255);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px;color:#e9e3c9!important}.win-modal .win-actions .try-again-button:hover{opacity:.9;transform:translateY(-1px)}.win-modal .win-actions .try-again-button:hover{opacity:.9!important}.win-modal .win-actions .win-close-button{background-color:#e9e3c9!important;color:#4ca9ea!important;border:2px solid #4ca9ea!important}.win-modal .win-actions .win-close-button:hover{background-color:#4a90e21a!important}.landing-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:2rem 1rem;background-color:#e9e3c9;color:#333}@media (prefers-color-scheme: dark){.landing-container{background-color:#1a1a1a;color:#e9e3c9}}.landing-header{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.social-icons-container{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.5rem}.social-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:1.5rem;transition:transform .2s ease,opacity .2s ease;text-decoration:none}.social-icon:hover{transform:scale(1.1);opacity:.85}.social-icon.instagram{color:#d96a7d}.social-icon.facebook{color:#42b3f4}.social-icon.reddit{color:#fc9e7a}.landing-logo{width:180px;height:auto;margin-bottom:1rem}.landing-title{font-size:4.2rem;font-weight:700;margin:0;display:flex;justify-content:center}.title-word{display:inline-block;background-clip:text;-webkit-background-clip:text;color:transparent;position:relative}.color-word-1{background-image:linear-gradient(to right,red,#f60,#fc0,#0c0,#06f)}.color-word-2{background-image:linear-gradient(to right,#60f,#90c,#c09,#f06)}.global-stats-container{background-color:#80808014;border-radius:12px;padding:1.2rem;width:100%;max-width:400px;margin-bottom:2rem;text-align:center;box-shadow:0 2px 6px #00000026}@media (prefers-color-scheme: dark){.global-stats-container{background-color:#2d2d2d;box-shadow:0 2px 6px #ffffff1f}}.global-stats-container h2{margin-top:0;margin-bottom:1rem;font-size:1.3rem;font-family:Arvo,Georgia,serif;font-weight:700;color:gray}@media (prefers-color-scheme: dark){.global-stats-container h2{color:#e9e3c9}}.global-stats-container .stat-value.average-score{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;color:gray}@media (prefers-color-scheme: dark){.global-stats-container .stat-value.average-score{color:#e9e3c9}}.difficulty-switcher{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}.difficulty-option{flex:1;padding:.5rem 1rem;border:2px solid rgba(0,0,0,.1);border-radius:8px;background-color:transparent;color:gray;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.difficulty-option:hover:not(.active){background-color:#00000008}.difficulty-option.easy:hover:not(.active){border-color:#afc053;color:#afc053}.difficulty-option.easy.active{border-color:#afc053;color:#afc053}.difficulty-option.medium:hover:not(.active){border-color:#fb997f;color:#fb997f}.difficulty-option.medium.active{border-color:#fb997f;color:#fb997f}.difficulty-option.hard:hover:not(.active){border-color:#d16381;color:#d16381}.difficulty-option.hard.active{border-color:#d16381;color:#d16381}@media (prefers-color-scheme: dark){.difficulty-option{border-color:#e9e3c933;color:#e9e3c9}.difficulty-option:hover:not(.active){background-color:#e9e3c90d}}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}.stat-card{background-color:#e9e3c9;border-radius:8px;padding:.8rem;box-shadow:0 1px 3px #0000001a}@media (prefers-color-scheme: dark){.stat-card{background-color:#3a3a3a;box-shadow:0 1px 3px #ffffff14}}.stat-value{font-size:2.5rem;font-family:Arvo,Georgia,serif;font-weight:700;margin-bottom:.3rem;background:linear-gradient(to right,#4ca9ea,#38bdfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:1.1rem;color:#8c8273}@media (prefers-color-scheme: dark){.stat-label{color:#d3c793}}.stats-highlight{font-size:.9rem;margin:0;padding:.6rem;background-color:#e9e3c9;border-radius:8px;color:#333;box-shadow:0 1px 3px #0000001a}@media (prefers-color-scheme: dark){.stats-highlight{background-color:#3a3a3a;color:#e9e3c9;box-shadow:0 1px 3px #ffffff14}}.landing-stats-button{display:block;margin:1rem auto 0;background-color:transparent;color:gray;border:2px solid rgb(128,128,128);border-radius:8px;padding:.4rem 1rem;font-size:1rem;font-family:Arvo,Georgia,serif;font-weight:700;cursor:pointer;transition:all .2s ease-in-out}.landing-stats-button:hover:not(:disabled){background-color:gray;color:#e9e3c9}.landing-stats-button:disabled{opacity:.4;cursor:not-allowed}@media (prefers-color-scheme: dark){.landing-stats-button{color:#e9e3c9;border-color:#e9e3c9}.landing-stats-button:hover:not(:disabled){background-color:#e9e3c9;color:#1a1a1a}}.landing-auth-container{display:flex;flex-direction:column;align-items:center;margin-top:1rem}.landing-lock-container{margin-bottom:1.5rem}.landing-signin-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px;width:250px;margin-bottom:1rem}.landing-signin-button:active{transform:translateY(0)}.landing-signin-button:hover{opacity:.9;transform:translateY(-1px)}.landing-play-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background:linear-gradient(to right,#4ca9ea,#38bdfe);color:#e9e3c9;border-radius:12px;padding:16px 24px;font-size:16px;width:250px;margin-bottom:.75rem;background:linear-gradient(135deg,#4ca9ea,#38bdfe)}.landing-play-button:active{transform:translateY(0)}@media (prefers-color-scheme: dark){.landing-play-button{background:linear-gradient(135deg,#afc053,#b9c255)}}.landing-play-button:hover{opacity:.9;transform:translateY(-1px)}.landing-signin-link{background:none;border:none;color:#8c8273;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:.5rem;transition:color .2s ease-in-out}@media (prefers-color-scheme: dark){.landing-signin-link{color:#d3c793}}.landing-signin-link:hover{color:#4ca9ea}.landing-guest-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;background-color:#e9e3c9;color:gray;border-radius:12px;padding:12px 24px;font-size:16px;border:2px solid rgb(128,128,128);width:250px}@media (prefers-color-scheme: dark){.landing-guest-button{background-color:#2d2d2d;color:#e9e3c9;border-color:#e9e3c9}.landing-guest-button:hover{background-color:#3a3a3a}}.landing-guest-button:hover{background-color:#e2dab7}.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#e9e3c9;z-index:1000}@media (prefers-color-scheme: dark){.loading-container{background-color:#1a1a1a}}.spinner{width:50px;height:50px;border:5px solid rgba(128,128,128,.3);border-radius:50%;border-top-color:gray;animation:spin 1s ease-in-out infinite}@media (prefers-color-scheme: dark){.spinner{border-color:#e9e3c94d;border-top-color:#e9e3c9}}.app-fade-in-placeholder{width:100%;height:100%}.logo-animation{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:fadeInAndScale 2s cubic-bezier(.25,.1,.25,1) forwards}.logo-animation.fade-out{animation:pauseAndGrowAndFadeOut 2.5s cubic-bezier(.25,.1,.25,1) forwards}@keyframes fadeInAndScale{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes pauseAndGrowAndFadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}.app-fade-in{animation:appFadeIn 1.5s ease forwards}@keyframes appFadeIn{0%{opacity:0}to{opacity:1}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.auth-modal{background-color:#e9e3c9;border-radius:20px;padding:24px;box-shadow:0 4px 20px #0000004d;max-width:90%;animation:modalFadeIn .4s ease-out;padding:2rem;width:90%;max-width:400px;position:relative}@media (prefers-color-scheme: dark){.auth-modal{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.modal-close{position:absolute;top:15px;right:15px;background-color:#8080801a;border:none;color:gray;font-size:22px;cursor:pointer;padding:4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease-in-out;box-shadow:0 1px 3px #0000001a}@media (prefers-color-scheme: dark){.modal-close{background-color:#e9e3c91a;color:#e9e3c9;box-shadow:0 1px 3px #ffffff14}}.modal-close:hover{background-color:#d1638133;color:#d16381;transform:scale(1.05)}.game-header-container{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;position:relative;margin-bottom:1.5rem}.home-button,.settings-button,.stats-button,.info-button{position:absolute;width:40px;height:40px;border-radius:50%;background-color:#e9e3c9;color:gray;display:flex;align-items:center;justify-content:center;border:1px solid rgb(128,128,128);cursor:pointer;transition:background-color .2s ease,transform .2s ease;z-index:10}.home-button{top:15px;right:15px}.home-button:hover{background-color:#8080801a}.settings-button{top:65px;right:15px}.settings-button:hover{background-color:#8080801a;transform:rotate(30deg)}.stats-button{top:115px;right:15px}.stats-button:hover{background-color:#8080801a}.info-button{top:165px;right:15px}.info-button:hover{background-color:#8080801a}.guest-signup-container.left-side{position:absolute;top:15px;left:15px;z-index:10}@media (max-width: 450px){.hamburger-wrapper{position:fixed;top:12px;left:12px}}.hamburger-container{position:relative}.hamburger-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;background-color:#e9e3c9;color:gray;border:1px solid rgb(128,128,128);border-radius:50%;transition:background-color .2s,transform .2s;box-shadow:0 2px 6px #00000026}.hamburger-button:hover{background-color:#8080801a;transform:scale(1.05)}@media (prefers-color-scheme: dark){.hamburger-button{background-color:#1a1a1a;border-color:#e9e3c9;color:#e9e3c9}.hamburger-button:hover{background-color:#e9e3c926}}.hamburger-button{width:40px;height:40px;font-size:18px;background-color:#e9e3c9;color:#333;z-index:1002}.hamburger-menu-content{position:absolute;top:50px;left:0;right:auto;background-color:#e9e3c9;border-radius:12px;box-shadow:0 2px 10px #0003;padding:12px 0;min-width:180px;display:flex;flex-direction:column;animation:fadeIn .1s ease-out;z-index:1001}@media (prefers-color-scheme: dark){.hamburger-menu-content{background-color:#2d2d2d;box-shadow:0 2px 8px #ffffff26}}.hamburger-menu-item{background:none;border:none;text-align:left;padding:.75rem 1rem;font-size:1rem;font-family:Arvo,Georgia,serif;color:#333;cursor:pointer;display:flex;align-items:center;gap:.5rem;width:100%;transition:background-color .2s ease-in-out}@media (prefers-color-scheme: dark){.hamburger-menu-item{color:#e9e3c9}}.hamburger-menu-item:hover{background-color:#8080801a}@media (prefers-color-scheme: dark){.hamburger-menu-item:hover{background-color:#e9e3c91a}}.hamburger-menu-item svg{width:18px;color:gray}@media (prefers-color-scheme: dark){.hamburger-menu-item svg{color:#e9e3c9}}.hamburger-menu-item-signup{padding:.5rem 1rem;border-top:1px solid #eee;margin-top:.25rem}@media (prefers-color-scheme: dark){.hamburger-menu-item-signup{border-top-color:#e9e3c933}}.hamburger-menu-item-signup .signup-button{width:100%;text-align:center}.desktop-only-button,.desktop-only-signup{display:none}@media (min-width: 780px){.desktop-only-button{display:flex}.desktop-only-signup{display:block}.mobile-only-hamburger{display:none}}.top-card{position:relative;width:100%;max-width:500px;margin-left:auto;margin-right:auto;background-color:#e9e3c9;color:gray;padding:16px 24px;border-radius:20px;box-shadow:0 2px 10px #1a1a1a4d;display:flex;justify-content:center;align-items:center;min-height:150px}.top-card h1,.top-card h2,.top-card h3,.top-card p,.top-card span,.top-card label,.top-card div{color:gray}.top-card .top-card-content{display:flex;flex-direction:column;align-items:center;text-align:center}@media (prefers-color-scheme: dark){.top-card{background-color:#1a1a1a;color:#e9e3c9;box-shadow:0 2px 10px #e9e3c933}.top-card h1,.top-card h2,.top-card h3,.top-card p,.top-card span,.top-card label,.top-card div{color:#e9e3c9}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.container{position:relative}.main-game-content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;margin:0 auto;padding-top:16px}.side-button-container{position:absolute;z-index:10}.side-button-container.top-left{top:12px;left:12px}.side-button-container.top-right{top:12px;right:12px;display:flex;flex-direction:column;gap:10px}.icon-button{cursor:pointer;border:none;font-family:Arvo,Georgia,serif;font-weight:700;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;background-color:#e9e3c9;color:gray;border:1px solid rgb(128,128,128);border-radius:50%;transition:background-color .2s,transform .2s;box-shadow:0 2px 6px #00000026}.icon-button:hover{background-color:#8080801a;transform:scale(1.05)}@media (prefers-color-scheme: dark){.icon-button{background-color:#1a1a1a;border-color:#e9e3c9;color:#e9e3c9}.icon-button:hover{background-color:#e9e3c926}}.icon-button{width:40px;height:40px;box-shadow:none}.icon-button:has(svg[data-icon=gear]):hover{transform:rotate(30deg)}@media (max-width: 779px){.icon-button{display:none}}.desktop-only-icons,.desktop-only-signup{display:none}.mobile-only-hamburger{display:block}@media (min-width: 780px){.desktop-only-icons{display:flex}.desktop-only-signup{display:block}.mobile-only-hamburger{display:none}}.home-button,.settings-button,.stats-button,.info-button{position:relative;top:auto;right:auto}.hamburger-wrapper{position:absolute;top:16px;left:16px;z-index:1001}.welcome-message{margin-top:.5rem;font-size:1.1rem;color:#555;font-weight:500}@media (prefers-color-scheme: dark){.welcome-message{color:#d3c793}}.tutorial-color-text{font-weight:700}.tutorial-color-red{color:#e74c3c}.tutorial-color-orange{color:#e67e22}.tutorial-color-yellow{color:#f1c40f;text-shadow:.5px .5px 1px rgba(0,0,0,.5)}.tutorial-color-green{color:#2ecc71}.tutorial-color-blue{color:#3498db}.tutorial-color-purple{color:#9b59b6}.tutorial-color-white{color:#888;text-shadow:.5px .5px 1px rgba(0,0,0,.3)}.tutorial-color-black{color:#000}@media (prefers-color-scheme: dark){.tutorial-color-red{color:#ff6b6b}.tutorial-color-orange{color:#ffa94d}.tutorial-color-yellow{color:#ffe066;text-shadow:0 0 2px rgba(0,0,0,.5)}.tutorial-color-green{color:#69db7c}.tutorial-color-blue{color:#74c0fc}.tutorial-color-purple{color:#da77f2}.tutorial-color-white{color:#dee2e6;text-shadow:none}.tutorial-color-black{color:#868e96}}