@import"https://fonts.googleapis.com/css?family=Roboto&display=swap";.hamburger-wrap{position:fixed;top:16px;right:16px;z-index:9999}.hamburger-btn{all:unset;width:44px;height:44px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.hamburger-line{width:18px;height:2px;background:#111;border-radius:2px}.hamburger-menu{position:fixed;top:68px;right:16px;width:200px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;box-shadow:0 12px 30px #00000026;overflow:hidden;animation:menuSlideIn .2s ease-out}.hamburger-menu button,.hamburger-menu a{all:unset;display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;cursor:pointer;font-size:14px;color:#111;box-sizing:border-box}.menu-icon{width:20px;height:20px;flex-shrink:0;color:#111}.hamburger-menu button:hover,.hamburger-menu a:hover{background:#0000000f}.hamburger-divider{height:1px;background:#00000014}@keyframes menuSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes menuSlideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}@media(max-width:768px){.hamburger-btn{width:48px;height:48px}.hamburger-menu{width:180px;top:72px}.hamburger-menu button,.hamburger-menu a{padding:14px 16px;font-size:15px;min-height:44px}}@media(max-width:480px){.hamburger-wrap{top:12px;right:12px}.hamburger-menu{top:68px;right:12px;width:160px}}:root{--primary: #396dff;--primary--dim: #6987db;--darkgrey: #d4d4d4;--medgrey: #e0e0e0;--grey: #f7f7f7;--white: #fff;--xs: 4px;--s: 8px;--m: 16px;--l: 24px}html{background-color:#fff}body{margin:0;padding:0;font-family:Roboto,sans-serif;font-weight:300;touch-action:manipulation;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,a,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1)}form{flex-grow:1}.u-flex{display:flex}.u-flexColumn{display:flex;flex-direction:column}.u-flex-justifyCenter{justify-content:center}.u-flex-alignCenter{align-items:center}.u-inlineBlock{display:inline-block}.u-bold{font-weight:600}.u-textCenter{text-align:center}.u-relative{position:relative}.u-pointer{cursor:pointer}.u-link{color:var(--primary);text-decoration:none;cursor:pointer}.u-link:hover{color:var(--primary--dim)}.difficulty-selector{width:100%;max-width:500px;margin:0 auto}.difficulty-title{font-size:24px;font-weight:700;color:#fff;text-align:center;margin-bottom:10px;margin-top:0;text-shadow:2px 2px 4px rgba(255,255,255,.3)}.difficulty-options{display:flex;flex-direction:column;gap:20px;width:100%}.difficulty-card{background-color:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:12px;padding:24px;cursor:pointer;transition:all .3s ease;color:#fff}.difficulty-card:hover{background-color:#ffffff26;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 15px #fff3}.difficulty-card.selected{background-color:#fff3;border-color:#fff;border-width:3px;box-shadow:0 0 20px #fff6}.difficulty-name{font-size:24px;font-weight:700;margin-bottom:10px;text-align:center}.difficulty-details{display:flex;justify-content:space-around;margin-bottom:0;padding:8px 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}.detail-item{display:flex;flex-direction:column;align-items:center;gap:4px}.detail-label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:.5px}.detail-value{font-size:18px;font-weight:700}.difficulty-description{font-size:12px;text-align:center;opacity:.9;margin-top:8px}@media(max-width:768px){.difficulty-selector{padding:0}.difficulty-title{margin-bottom:8px;margin-top:0}.difficulty-options{gap:12px;padding:0}.difficulty-card{padding:10px 16px}.difficulty-name{font-size:20px;margin-bottom:6px}.difficulty-details{flex-direction:row;justify-content:space-around;gap:8px;padding:4px 0}.detail-item{flex-direction:row;gap:6px;align-items:center}.detail-label{font-size:11px}.detail-value{font-size:16px}}@font-face{font-family:Bodega;src:url(/csbodega.otf) format("opentype")}html:has(.home-container){background-color:#000}.home-container{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;background:linear-gradient(-45deg,#000,#1a0a2e,#16213e,#0f3460);background-size:400% 400%;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.home-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:90%;max-width:1000px;gap:40px;padding:40px 20px;z-index:1}.mode-select{display:flex;flex-direction:row;gap:16px;justify-content:center;align-items:stretch;flex-wrap:wrap;width:100%;max-width:900px;margin:16px 0}.mode-card.big{background:linear-gradient(135deg,#ffffff1f,#ffffff0a);border:2px solid rgba(255,255,255,.3);border-radius:16px;padding:15px;min-height:160px;flex:1 1 280px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#fff;box-shadow:0 10px 30px #00000059;transition:all .3s ease;transform-style:preserve-3d;perspective:1000px}.mode-preview{margin-bottom:4px;opacity:.9;transition:transform .3s ease}.mode-card.big:hover{transform:translateY(-8px) rotateX(5deg) rotateY(5deg);border-color:#fff9;box-shadow:0 20px 50px #00000080,0 0 30px #ffffff1a}.mode-header{font-size:22px;font-weight:700;letter-spacing:.5px}.mode-button{width:100%;padding:14px 18px;border-radius:12px;border:none;font-weight:800;font-size:18px;cursor:pointer;background:#fff;color:#000;box-shadow:0 8px 20px #ffffff40;transition:transform .2s ease,box-shadow .2s ease}.mode-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 26px #ffffff59}.mode-button:active{transform:translateY(0) scale(.99)}.app-title{font-size:120px;font-weight:700;color:#fff;margin:0;text-shadow:2px 2px 4px rgba(255,255,255,.3);text-align:center;display:flex;align-items:center;justify-content:center;gap:20px;font-family:Bodega;letter-spacing:8px;animation:letterEntrance 2s ease-out}@keyframes letterEntrance{0%{opacity:0;transform:translateY(-50px);letter-spacing:30px}50%{opacity:.5}to{opacity:1;transform:translateY(0);letter-spacing:8px}}.app-logo{width:100px;height:100px;filter:brightness(0) invert(1);object-fit:contain;transition:all .3s ease;animation:logoFadeIn 1.5s ease-out}@keyframes logoFadeIn{0%{opacity:0;transform:scale(.5) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}.app-logo:hover{filter:brightness(0) invert(1) drop-shadow(0 0 20px rgba(255,255,255,.8));transform:scale(1.1)}.play-button{font-size:24px;font-weight:700;padding:20px 60px;background-color:#fff;color:#000;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #fff3;min-width:200px}.play-button:hover:not(.disabled):not(:disabled){transform:scale(1.05);box-shadow:0 6px 20px #ffffff4d;background-color:#e0e0e0}.play-button:active:not(.disabled):not(:disabled){transform:scale(.98)}.play-button.disabled,.play-button:disabled{background-color:#666;color:#999;cursor:not-allowed;opacity:.6}.login-section{display:flex;flex-direction:column;align-items:center;gap:30px;position:relative}.login-prompt{font-size:24px;color:#fff;text-align:center;opacity:1;margin:0;font-family:Bodega;letter-spacing:2px}@keyframes welcomeFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-canvas-decoration{position:relative;width:200px;height:150px;margin-top:20px;animation:canvasFadeIn 1s ease-out;animation-fill-mode:backwards}@keyframes canvasFadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.mini-canvas{width:100%;height:100%;background:linear-gradient(135deg,#f5f3f0,#ebe7e1);border:8px solid #8b6f47;border-radius:4px;box-shadow:0 10px 30px #00000080;position:relative;overflow:hidden}.mini-palette{position:absolute;bottom:10px;left:10px;width:60px;height:45px;background:#f7e7c1;border-radius:50% 60%/60% 50%;box-shadow:0 4px 12px #0000004d;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px}.mini-palette-color{width:12px;height:12px;border-radius:50%;animation:colorPulse 2s ease-in-out infinite}.mini-palette-color:nth-child(1){background:#ff6b6b;animation-delay:0s}.mini-palette-color:nth-child(2){background:#4ecdc4;animation-delay:.3s}.mini-palette-color:nth-child(3){background:#ffe66d;animation-delay:.6s}@keyframes colorPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.animated-brush{position:absolute;width:30px;height:30px;top:20px;left:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));animation:brushPaint 6s ease-in-out infinite}@keyframes brushPaint{0%{top:30px;left:30px;transform:rotate(-10deg)}25%{top:35px;left:60px;transform:rotate(5deg)}50%{top:50px;left:65px;transform:rotate(10deg)}75%{top:45px;left:35px;transform:rotate(-5deg)}to{top:30px;left:30px;transform:rotate(-1)}}.logout-button{font-size:16px;font-weight:700;padding:12px 30px;background-color:transparent;color:#fff;border:2px solid white;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:10px}.logout-button:hover{background-color:#ffffff1a;transform:scale(1.05)}.logout-button:active{transform:scale(.98)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#141414f2;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:20px;width:min(90vw,720px);max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px #0000008c}.modal-header{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:18px;font-weight:700;margin-bottom:10px}.close-btn{background:transparent;color:#fff;border:none;font-size:24px;cursor:pointer;line-height:1}.modal-play-button{width:100%;max-width:300px;margin:20px auto 0;padding:16px 32px;background:#fff;color:#000;border:none;border-radius:12px;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px #ffffff40;transition:transform .2s ease,box-shadow .2s ease;display:block}.modal-play-button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 26px #ffffff59}.modal-play-button:active{transform:translateY(0) scale(.99)}@media(max-width:768px){.home-container{align-items:flex-start;justify-content:flex-start}.home-content{gap:20px;padding:20px;align-items:flex-start;justify-content:flex-start}.app-title{font-size:40px;text-align:left;justify-content:flex-start;margin-bottom:0}.app-logo{width:40px;height:40px}.mode-select{flex-direction:column;width:100%}.mode-card.big{min-height:90px;padding:12px;gap:6px;flex:1 1 auto;max-width:100%}.mode-preview{margin-bottom:2px}.mode-preview svg{width:70px;height:70px}.mode-button{width:auto;min-width:150px;max-width:180px;padding:12px 18px;font-size:16px}.play-button{font-size:20px;padding:18px 50px}.modal-content{padding:12px}.modal-header{margin-bottom:5px}.login-section{align-items:center;justify-content:center;width:100%;text-align:center}.login-prompt{text-align:center;width:100%}}.color-grid-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;width:100%;padding:20px;position:relative;background-color:#fff;min-height:100vh}.game-logo-button{position:fixed;top:16px;left:16px;background:transparent!important;border:none!important;outline:none;box-shadow:none;cursor:pointer;padding:0!important;margin:0;z-index:9999;transition:transform .2s ease}.game-logo-button:hover{transform:scale(1.1);background:transparent!important}.game-logo-button:active{transform:scale(.95);background:transparent!important}.game-logo-button:focus{outline:none;box-shadow:none}.game-logo{width:60px;height:60px;object-fit:contain;background:transparent;display:block}.timer-score-wrapper{display:flex;align-items:center;justify-content:center;gap:30px;width:100%;flex-wrap:wrap}.timer-display{font-size:48px;font-weight:700;color:#333;min-width:150px;text-align:center}.phase-title{font-size:24px;font-weight:700;color:#333;margin-bottom:20px}.result-title{font-size:50px;font-weight:700;color:#333;margin-bottom:20px}.color-grid-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0 50px;box-sizing:border-box}.grid-container{display:grid;gap:15px;width:100%;max-width:450px;min-width:300px;margin:0 auto;padding:0 50px;box-sizing:border-box}.grid-square{width:100%;aspect-ratio:1;border-radius:8px;transition:all .2s ease;box-shadow:0 4px 6px #0000001a}.grid-square.hoverable:hover{transform:scale(1.05);box-shadow:0 6px 12px #0003}.grid-square.clickable{cursor:pointer}.grid-square.clickable:hover{transform:scale(1.05);box-shadow:0 6px 12px #0003}.grid-square.clickable:active{transform:scale(.95)}.color-grid{display:grid;gap:15px;width:100%;max-width:450px;min-width:300px;aspect-ratio:1}.color-cell{width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px #0000001a;min-height:80px}.color-cell:hover{transform:scale(1.05);box-shadow:0 6px 12px #0003}.color-cell:active{transform:scale(.95)}.play-phase-container{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}.play-content-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:20px}.play-content-wrapper .color-grid-container>div{max-width:550px!important;width:550px!important}.play-content-wrapper .color-grid-container .drawing-svg{max-width:550px!important;width:550px!important}.drawing-inner-pad{width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0}.palette-wrapper{display:flex;align-items:center;justify-content:center;flex-shrink:0}.play-cell{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid #ddd;cursor:default;transition:all .2s ease;box-shadow:0 2px 4px #0000000d;display:flex;align-items:center;justify-content:center;position:relative;min-height:80px}.play-cell.clickable{cursor:pointer}.play-cell.clickable:hover{border-color:#999}.play-cell.filled{cursor:default}.click-hint{font-size:24px;color:#ccc;font-weight:700}.color-palette{position:relative;width:250px;height:175px;background:#f7e7c1;border-radius:60% 70%/70% 60%;box-shadow:0 6px 24px #0000001f,0 1.5px #e2c48d inset;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.palette-label{position:absolute;top:8px;left:0;width:100%;text-align:center;z-index:3;font-size:18px;font-weight:700;color:#333}.palette-grid{position:absolute;width:100%;height:100%;display:block}.palette-color{position:absolute;border-radius:50%;border:3px solid transparent;min-width:34px;min-height:34px;width:34px;height:34px;box-shadow:0 2px 4px #0000001f;cursor:pointer;transition:all .2s;z-index:3}.palette-color{cursor:pointer}.play-cell.clickable{cursor:url(/paint-brush.png) 8 26,pointer}.palette-color:nth-child(1){left:80px;top:20px}.color-palette.difficulty-medium .palette-color:nth-child(1){left:140px}.palette-color:nth-child(2){left:190px;top:58px}.palette-color:nth-child(3){left:155px;top:115px}.palette-color:nth-child(4){left:86px;top:115px}.palette-color:nth-child(5){left:30px;top:90px}.palette-color:nth-child(6){left:140px;top:20px}.palette-color:hover{transform:scale(1.1);box-shadow:0 4px 8px #0003}.palette-color.selected{border-color:#000;box-shadow:0 0 12px #0006;transform:scale(1.15)}.done-btn{font-size:18px;font-weight:700;padding:12px 40px;background-color:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.done-btn:hover{background-color:#5568d3;transform:scale(1.05)}.done-btn:active{transform:scale(.98)}.pause-btn{font-size:18px;font-weight:700;padding:12px 28px;background-color:#f5a623;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-left:12px;transition:all .3s ease}.pause-btn:hover{background-color:#d48806;transform:scale(1.05)}.pause-btn:active{transform:scale(.98)}.ready-btn{font-size:18px;font-weight:700;padding:12px 40px;background-color:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:20px;transition:all .3s ease}.ready-btn:hover{background-color:#45a049;transform:scale(1.05)}.ready-btn:active{transform:scale(.98)}.gameover-container{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}.comparison-container{display:flex;gap:50px;align-items:flex-start;justify-content:center;width:100%;max-width:1200px;margin:0 auto;flex-wrap:wrap}.comparison-section{display:flex;flex-direction:column;align-items:center;gap:15px;flex:1 1 400px;min-width:350px;max-width:500px}.comparison-label{font-size:20px;font-weight:700;color:#333}@media(min-width:1024px){.button-group{margin-top:40px;gap:400px}.play-again-btn,.leaderboard-button{padding:14px 36px;font-size:19px;border-radius:10px;min-width:170px}.comparison-container{gap:60px;max-width:1400px}.comparison-section{flex:1 1 450px;min-width:400px;max-width:550px}.comparison-section .grid-container,.comparison-section .drawing-svg{max-width:100%!important;width:100%!important}}.final-grid{display:flex;justify-content:center;width:100%}.final-cell{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid #ddd;box-shadow:0 2px 4px #0000000d;min-height:80px}.score{font-size:20px;font-weight:700;color:#333;padding:15px;background-color:#f5f5f5;border-radius:8px}.score-details{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 25px;background-color:#f5f5f5;border-radius:12px;color:#333;min-width:200px}.score-title{font-size:18px;font-weight:700}.score-percentage{font-size:48px;font-weight:700}.score-matches{font-size:16px;opacity:.9}.button-group{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.play-again-btn,.home-btn,.leaderboard-button{font-size:18px;font-weight:700;padding:12px 30px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.play-again-btn,.leaderboard-button{background-color:#667eea;color:#fff}.play-again-btn:hover,.leaderboard-button:hover{background-color:#5568d3;transform:scale(1.05)}.play-again-btn:active,.leaderboard-button:active{transform:scale(.98)}.home-btn{background-color:#fff;color:#333;border:2px solid #667eea}.home-btn:hover{background-color:#f0f0f0;transform:scale(1.05)}.home-btn:active{transform:scale(.98)}.meme-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:9999}.meme-modal{width:min(420px,92vw);background:#ffffffb3;border-radius:16px;padding:16px;box-shadow:0 16px 40px #0006;text-align:center;animation:memePop 2s ease-out forwards;transform-origin:center}@keyframes memePop{0%{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.meme-title{font-weight:800;font-size:18px;margin-bottom:10px}.meme-img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(0,0,0,.1)}.meme-close{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer}.leaderboard-button{background-color:#fff;color:#333;border:2px solid #667eea;font-weight:700}.leaderboard-button:hover{background-color:#f0f0f0;transform:scale(1.05)}.leaderboard-button:active{transform:scale(.98)}@media(max-width:768px){.game-logo{width:50px;height:50px}.game-logo-button{top:12px;left:12px}.color-grid-wrapper{padding:15px 10px;gap:20px}.timer-score-wrapper{gap:20px}.timer-display{font-size:36px;min-width:120px}.score-details{padding:15px 20px;min-width:160px}.play-content-wrapper{flex-direction:column;gap:15px;width:100%}.play-content-wrapper .color-grid-container>div{max-width:100%!important;width:100%!important}.play-content-wrapper .color-grid-container .drawing-svg{max-width:100%!important;width:100%!important;max-width:min(90vw,400px)!important}.drawing-inner-pad{padding:12px}.palette-wrapper{width:100%;justify-content:center}.color-palette{width:200px;height:140px}.palette-color{min-width:32px;min-height:32px;width:32px;height:32px}.palette-color:nth-child(1){left:66px;top:12px}.color-palette.difficulty-medium .palette-color:nth-child(1){left:114px}.palette-color:nth-child(2){left:154px;top:40px}.palette-color:nth-child(3){left:126px;top:80px}.palette-color:nth-child(4){left:66px;top:80px}.palette-color:nth-child(5){left:22px;top:40px}.palette-color:nth-child(6){left:66px;top:12px}.color-grid-container{width:100%;padding:0 30px;box-sizing:border-box}.grid-container{max-width:100%;min-width:auto;gap:10px;margin:0 auto}.memorize-cell,.play-cell{min-height:50px}.ready-btn,.done-btn{padding:16px 32px;font-size:18px;min-height:48px}.phase-title{font-size:20px;margin-bottom:15px}.gameover-container{padding:20px 15px}.result-title{font-size:36px}.comparison-container{flex-direction:row;gap:12px;justify-content:center;width:100%;max-width:100%;padding:0 10px}.comparison-section{width:47%;flex:0 0 47%;min-width:0}.comparison-section .grid-container{max-width:100%!important;width:100%!important;padding:0 5px}.comparison-section .color-grid-container{max-width:100%;width:100%;padding:0 5px}.comparison-section .drawing-svg{max-width:100%!important;width:100%!important}.comparison-label{font-size:16px;margin-bottom:10px}.score-details{padding:18px 15px;max-width:300px;width:auto}.score-title{font-size:18px}.score-percentage{font-size:36px}.score-matches{font-size:14px}.button-group{flex-direction:row;gap:12px;width:auto;max-width:90%;flex-wrap:wrap;justify-content:center}.play-again-btn,.leaderboard-button{width:auto;min-width:140px;padding:14px 24px;font-size:16px;min-height:48px}}@media(max-width:480px){.drawing-inner-pad{padding:16px}.game-logo{width:40px;height:40px}.timer-score-wrapper{gap:15px;flex-direction:column}.timer-display{font-size:32px}.score-details{padding:12px 18px;min-width:140px;max-width:250px;width:auto}.phase-title{font-size:18px}.result-title{font-size:28px}.color-grid-wrapper{padding:10px 5px;gap:15px}.play-content-wrapper .color-grid-container .drawing-svg{max-width:min(95vw,350px)!important}.color-grid-container{padding:0 25px}.grid-container{gap:8px;max-width:100%}.ready-btn,.done-btn{padding:14px 28px;font-size:16px}.color-palette{width:180px;height:126px}.palette-color{min-width:30px;min-height:30px;width:30px;height:30px}.palette-color:nth-child(1){left:60px;top:11px}.color-palette.difficulty-medium .palette-color:nth-child(1){left:103px}.palette-color:nth-child(2){left:139px;top:36px}.palette-color:nth-child(3){left:114px;top:72px}.palette-color:nth-child(4){left:60px;top:72px}.palette-color:nth-child(5){left:20px;top:36px}.palette-color:nth-child(6){left:60px;top:11px}.comparison-container{gap:8px;width:100%;padding:0 5px}.comparison-section{width:47%;flex:0 0 47%;min-width:0}.comparison-section .grid-container,.comparison-section .color-grid-container{padding:0 3px}.comparison-label{font-size:14px;margin-bottom:8px}.score-title{font-size:16px}.score-percentage{font-size:28px}.score-matches{font-size:13px}.button-group{max-width:95%}.play-again-btn,.leaderboard-button{min-width:120px;padding:12px 20px;font-size:15px}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:40px 20px 20px;background-color:#fff}.game-container h1{margin-bottom:20px}.loading-message,.error-message{font-size:20px;color:#333;padding:20px;text-align:center}.error-message{color:#d32f2f;margin-bottom:20px}.game-container button{padding:12px 24px;font-size:16px;background-color:#333;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.game-container button:hover{background-color:#555}@media(max-width:768px){.game-container{padding:70px 10px 15px}.loading-message,.error-message{font-size:18px;padding:15px}.game-container button{padding:14px 28px;font-size:16px;min-height:48px}}@media(max-width:480px){.game-container{padding:70px 5px 10px}.loading-message,.error-message{font-size:16px;padding:12px}}@font-face{font-family:Bodega;src:url(/csbodega.otf) format("opentype")}.leaderboard-container{padding:24px;background-color:#fff;min-height:100vh}.leaderboard-title{text-align:center;font-size:80px;font-weight:700;color:#000;margin:0 0 14px;text-shadow:2px 2px 4px rgba(0,0,0,.1);font-family:Bodega;letter-spacing:8px}.lb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border:1px solid rgba(0,0,0,.1);border-radius:14px;background:#ffffffb3;margin:0 auto 18px;max-width:600px}.lb-tab{all:unset;cursor:pointer;text-align:center;padding:10px 12px;font-weight:700;font-size:14px;opacity:.6;color:#c8c8c8;border-radius:10px;border:1.5px solid transparent;transition:border-color .15s ease,opacity .15s ease}.lb-tab:hover{border-color:#c8c8c8;opacity:.85}.lb-tab.active{border-color:#2c2c2c;color:#393939;opacity:1;background:transparent;box-shadow:none}.lb-header-cell{text-align:center}.lb-list{display:flex;flex-direction:column;gap:8px;max-width:600px;width:100%;margin:0 auto}.lb-row,.lb-header{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;align-items:center;padding:12px 16px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff;width:100%;box-sizing:border-box}.lb-row{position:relative;padding-left:48px}.lb-header{font-weight:700;font-size:14px;opacity:.7;margin:0 auto 8px;max-width:600px;align-items:center;padding-left:48px}.lb-row.rank-1{background:linear-gradient(135deg,#ffe283,#fff8dc);border-color:gold}.lb-row.rank-2{background:linear-gradient(135deg,#cecece,#f5f5f5);border-color:silver}.lb-row.rank-3{background:linear-gradient(135deg,#f1ae6b,#ffdead);border-color:#cd863f}.lb-row.rank-1:before,.lb-row.rank-2:before,.lb-row.rank-3:before{content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding-top:1px;background-size:contain;background-repeat:no-repeat;background-position:center}.lb-row.rank-1:before{background-image:url(/gold.png)}.lb-row.rank-2:before{background-image:url(/silver.png)}.lb-row.rank-3:before{background-image:url(/bronze.png)}.lb-row-me{border-width:2px;border-color:#00000059;box-shadow:0 0 0 1px #0000000d}.lb-row-mybest{margin-top:12px}.lb-cell{text-align:center}.lb-rank{font-weight:700;font-size:16px;opacity:.6}.lb-score{font-weight:800;font-size:16px}.lb-time{font-size:14px;opacity:.65}.lb-name{font-size:14px;font-weight:650;opacity:.9;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-empty,.lb-error{text-align:center;opacity:.75;margin-top:14px}.lb-score-67{display:inline-flex;gap:2px;font-weight:800}.lb-score-67 .digit{display:inline-block;will-change:transform}.lb-score-67 .digit-6{animation:digitUpDown .9s ease-in-out infinite}.lb-score-67 .digit-7{animation:digitDownUp .9s ease-in-out infinite}@keyframes digitUpDown{0%,to{transform:translateY(2px)}50%{transform:translateY(-2px)}}@keyframes digitDownUp{0%,to{transform:translateY(-2px)}50%{transform:translateY(2px)}}@media(max-width:768px){.leaderboard-container{padding:24px 20px}.leaderboard-title{font-size:42px;margin-top:60px;margin-bottom:20px;letter-spacing:8px}.lb-header{padding:10px 12px;font-size:12px;gap:8px}.lb-row{padding:10px 12px;margin:0;gap:8px}.lb-score{font-size:15px}.lb-name,.lb-time{font-size:12px}.lb-rank{font-size:14px}}@media(max-width:480px){.leaderboard-container{padding:20px 16px}.leaderboard-title{font-size:36px;margin-top:50px;letter-spacing:8px}.lb-row{padding:8px 10px;flex-direction:column;align-items:flex-start;gap:8px}.lb-left{width:100%;justify-content:space-between}.lb-name{text-align:left;width:100%}}@font-face{font-family:Bodega;src:url(/csbodega.otf) format("opentype")}.profile-page{max-width:480px;margin:80px auto;padding:0 20px;background-color:#fff;min-height:100vh}.profile-title{font-size:80px;font-weight:700;color:#000;margin:0 0 24px;text-shadow:2px 2px 4px rgba(0,0,0,.1);text-align:center;font-family:Bodega;letter-spacing:8px}.profile-list{list-style:none;padding:0;margin:0}.profile-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:20px}.profile-list .label{opacity:.6}.profile-list .value{font-weight:600}.edit-btn{width:18px;height:18px;background-image:url(/edit-pen.png);background-size:contain;background-repeat:no-repeat;background-position:center;background-color:transparent;border:none;cursor:pointer;margin-left:8px;opacity:.6;transition:opacity .15s ease,transform .15s ease}.edit-btn:hover{opacity:1;transform:scale(1.05)}.save-btn,.cancel-btn{margin-left:6px;font-size:14px;border:none;background:none;cursor:pointer;opacity:.7}.save-btn:hover{opacity:1;font-weight:600}.cancel-btn:hover{opacity:1}.profile-list .value{display:flex;justify-content:flex-end;align-items:center;gap:8px}.name-input-inline{font:inherit;font-weight:600;color:inherit;background:transparent;border:none;outline:none;padding:0;margin:0;text-align:right;width:fit-content;min-width:4ch;max-width:12ch}.danger{margin-top:80px;width:100%;padding:14px 0;background-color:transparent;color:#ea5e6a;border:3px solid #ea5e6a;border-radius:8px;font-size:20px;font-weight:600;font-family:Bodega;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.danger:hover{background-color:#ea5e6a;transform:translateY(-1px);color:#fff}@media(max-width:768px){.profile-page{margin:60px auto;padding:0 15px}.profile-title{font-size:42px;margin-bottom:20px;letter-spacing:8px}.profile-list{padding:16px}.profile-list li{font-size:18px;padding:12px 0}}@media(max-width:480px){.profile-page{margin:50px auto;padding:0 10px}.profile-title{font-size:32px;letter-spacing:8px}.profile-list{padding:20px 16px}.profile-list li{font-size:16px;flex-direction:column;gap:5px}}