.menu-screen{justify-content:center;align-items:center}.menu-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);width:100%;max-width:320px}.menu-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.menu-title{font-size:var(--font-size-3xl);font-weight:700;text-align:center;line-height:1.1;white-space:pre-line;color:var(--color-text);text-shadow:3px 3px 0 var(--color-primary)}.menu-doodle{width:100px;height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.doodle-pencil{width:100%;height:100%;animation:wobble 2s ease-in-out infinite}@keyframes wobble{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.menu-buttons{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.menu-buttons .btn{width:100%}@media(orientation:landscape){.menu-content{flex-direction:row;max-width:700px;gap:var(--space-2xl)}.menu-header{flex:1;justify-content:center}.menu-doodle{width:80px;height:80px}.menu-buttons{flex:1;max-width:280px;gap:var(--space-sm)}}@media(max-height:400px){.menu-content{gap:var(--space-lg)}.menu-header{gap:var(--space-md)}.menu-doodle{width:60px;height:60px}.menu-buttons{gap:var(--space-sm)}}@media(max-height:320px){.menu-doodle{width:40px;height:40px}.menu-title{text-shadow:2px 2px 0 var(--color-primary)}}.difficulty-screen{gap:var(--space-lg)}.back-btn{align-self:flex-start;background:none;border:none;font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);cursor:pointer;padding:var(--space-sm);flex-shrink:0;transition:transform var(--transition-fast),color var(--transition-fast)}.back-btn:hover{transform:translate(-4px);color:var(--color-primary)}.back-btn:active{transform:translate(-2px)}.difficulty-screen .title{flex-shrink:0}.difficulty-options{display:flex;flex-direction:column;gap:var(--space-md);flex:1;justify-content:center}.difficulty-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-lg);background-color:#fff;border:var(--border-sketch);border-radius:var(--border-radius);box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);font-family:var(--font-family);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}.difficulty-card:hover{transform:translate(-2px,-2px) rotate(-1deg) scale(1.02);box-shadow:var(--shadow-lg);background-image:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%)}.difficulty-card:active{transform:translate(1px,1px) rotate(0) scale(.98);box-shadow:var(--shadow-sm);filter:brightness(.95)}.difficulty-card.selected{background-color:var(--color-primary)}.difficulty-name{font-size:var(--font-size-lg);font-weight:700}.difficulty-time{font-size:var(--font-size-2xl);font-weight:700}.difficulty-multiplier{font-size:var(--font-size-sm);color:var(--color-text-light)}.difficulty-card.selected .difficulty-multiplier{color:var(--color-text)}@media(orientation:landscape){.difficulty-screen{gap:var(--space-md)}.difficulty-options{flex-direction:row;gap:var(--space-lg)}.difficulty-card{flex:1}}@media(max-height:400px){.difficulty-screen,.difficulty-options{gap:var(--space-sm)}.difficulty-card{padding:var(--space-md);gap:2px}.difficulty-name{font-size:var(--font-size-md)}.difficulty-time{font-size:var(--font-size-lg)}}@media(max-height:320px){.difficulty-card{padding:var(--space-sm) var(--space-md)}}.settings-screen{gap:var(--space-lg)}.settings-content{display:flex;flex-direction:column;gap:var(--space-md);flex:1;justify-content:center}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background-color:#fff;border:var(--border-sketch);border-radius:var(--border-radius)}.settings-label{font-size:var(--font-size-md);font-weight:600}.locale-flags{display:flex;gap:var(--space-sm)}.locale-flag-btn{font-size:var(--font-size-xl);padding:var(--space-xs);background:none;border:2px solid transparent;border-radius:var(--border-radius);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast);line-height:1}.locale-flag-btn:hover{transform:scale(1.15) rotate(-5deg)}.locale-flag-btn:active{transform:scale(.95)}.locale-flag-btn.selected{border-color:var(--color-text);background-color:var(--color-accent)}.volume-row{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.volume-control{display:flex;align-items:center;gap:var(--space-md);width:100%}.volume-slider{flex:1;height:8px;border-radius:4px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-text);border:2px solid white;cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform var(--transition-fast)}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.volume-slider::-webkit-slider-thumb:active{transform:scale(.95)}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-text);border:2px solid white;cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform var(--transition-fast)}.volume-slider::-moz-range-thumb:hover{transform:scale(1.15)}.volume-slider::-moz-range-thumb:active{transform:scale(.95)}.volume-value{font-size:var(--font-size-sm);font-weight:600;min-width:45px;text-align:right;color:var(--color-text)}.save-btn{width:100%;max-width:400px;margin:0 auto;padding:var(--space-md) var(--space-xl);font-family:var(--font-family);font-size:var(--font-size-md);font-weight:700;background-color:var(--color-success);border:var(--border-sketch);border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition-fast)}.save-btn:hover{transform:scale(1.05) rotate(-1deg);box-shadow:var(--shadow-md)}.save-btn:active{transform:scale(.95)}@media(orientation:landscape){.settings-content{flex-direction:row;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:center}.settings-row{flex:1 1 calc(50% - var(--space-md));min-width:200px;max-width:350px}}@media(max-height:400px){.settings-screen{gap:var(--space-md)}.settings-content{gap:var(--space-sm)}.settings-row{padding:var(--space-sm) var(--space-md)}.toggle-btn{padding:var(--space-xs) var(--space-md);min-width:60px}}.drawing-canvas-container{display:flex;align-items:center;justify-content:center;width:100%}.drawing-canvas-container.fill{flex:1;min-height:0;aspect-ratio:1;max-width:100%;max-height:100%}.drawing-canvas{border:var(--border-sketch);border-radius:var(--border-radius);background-color:#fff;cursor:crosshair;touch-action:none;max-width:100%;height:auto;box-shadow:var(--shadow-md)}.drawing-canvas.disabled{opacity:.7;cursor:not-allowed}.game-screen{gap:var(--space-md);padding:var(--space-md);position:relative;touch-action:none;overscroll-behavior:none}.countdown-overlay{position:absolute;inset:0;background-color:#fffffff2;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.countdown-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-xl);text-align:center}.countdown-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-text);margin:0}.countdown-timer-big{font-size:96px;font-weight:700;color:var(--color-primary);line-height:1;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.countdown-task{display:flex;flex-direction:column;gap:var(--space-xs)}.countdown-task-label{font-size:var(--font-size-md);color:var(--color-text-light)}.countdown-task-name{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text)}.countdown-btn{margin-top:var(--space-md)}.game-header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.game-task{display:flex;flex-direction:column;gap:var(--space-xs)}.task-label{font-size:var(--font-size-sm);color:var(--color-text-light)}.task-category{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text)}.game-timer{display:flex;flex-direction:column;align-items:center;padding:var(--space-sm) var(--space-md);background-color:var(--timer-color, var(--color-success));border:var(--border-sketch);border-radius:var(--border-radius);min-width:60px;transition:background-color .3s ease}.timer-value{font-size:var(--font-size-2xl);font-weight:700;line-height:1}.timer-label{font-size:var(--font-size-xs)}.game-canvas-area{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);flex:1;justify-content:center;min-height:0;width:100%;overflow:hidden}.clear-btn{padding:var(--space-xs) var(--space-md);font-family:var(--font-family);font-size:var(--font-size-sm);background-color:var(--color-secondary);border:var(--border-sketch);border-radius:var(--border-radius);cursor:pointer;transition:transform var(--transition-fast)}.clear-btn:hover{transform:scale(1.05)}.clear-btn:active{transform:scale(.95)}.clear-btn:disabled{opacity:.5;cursor:not-allowed}.game-predictions{display:flex;flex-direction:column;gap:var(--space-sm);flex-shrink:0;min-height:180px}.predictions-label{font-size:var(--font-size-sm);color:var(--color-text-light)}.predictions-list{display:flex;flex-direction:column;gap:var(--space-xs)}.prediction-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background-color:#fff;border:1px solid var(--color-text-light);border-radius:var(--border-radius);font-size:var(--font-size-sm)}.prediction-item.correct{background-color:var(--color-success);border-color:var(--color-text);font-weight:700}.prediction-name{min-width:80px}.prediction-bar{flex:1;height:8px;background-color:var(--color-bg);border-radius:4px;overflow:hidden}.prediction-fill{height:100%;background-color:var(--color-primary);transition:width .2s ease}.prediction-item.correct .prediction-fill{background-color:var(--color-text)}.prediction-percent{min-width:40px;text-align:right;font-weight:600}.prediction-placeholder{color:var(--color-text-light);text-align:center;padding:var(--space-md);min-height:120px;display:flex;align-items:center;justify-content:center}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-bg);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-md)}@media(orientation:landscape){.game-screen{flex-direction:row;flex-wrap:wrap}.game-header{width:100%}.game-canvas-area{flex:1;min-width:300px}.game-predictions{flex:1;min-width:200px;justify-content:center}}@media(max-height:500px){.game-canvas-area .drawing-canvas{max-height:200px;max-width:200px}.prediction-item{padding:2px var(--space-xs)}}.leaderboard-screen{display:flex;flex-direction:column;gap:20px;padding:20px;overflow:hidden}.leaderboard-screen .title{text-align:center;margin:0;font-size:2em}.refresh-btn{align-self:center;padding:10px 20px;background:#c71081;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.refresh-btn:hover:not(:disabled){background:#a00d68;transform:scale(1.05)}.refresh-btn:disabled{opacity:.6;cursor:not-allowed}.refresh-cooldown{align-self:center;padding:10px 20px;background:#e0e0e0;color:#888;border-radius:8px;font-size:14px;font-weight:600}.loading,.error,.empty{text-align:center;padding:40px 20px;color:#666}.error{color:#c71081}.retry-btn{margin-top:16px;padding:12px 24px;background:#c71081;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.retry-btn:hover{background:#a00d68;transform:scale(1.05)}.empty .hint{font-size:.9em;margin-top:8px;opacity:.7}.leaderboard-container{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.leaderboard-list{display:flex;flex-direction:column;gap:12px;flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-bottom:8px}.current-player-sticky{flex-shrink:0;background:linear-gradient(to top,#fff8f0 0%,#fff8f0 90%,transparent 100%);padding-top:12px}.player-row{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.player-row:hover{transform:translate(4px)}.player-row.top-1{background:linear-gradient(135deg,gold,#ffed4e);box-shadow:0 4px 12px #ffd7004d}.player-row.top-2{background:linear-gradient(135deg,silver,#e8e8e8);box-shadow:0 4px 12px #c0c0c04d}.player-row.top-3{background:linear-gradient(135deg,#cd7f32,#e8a87c);box-shadow:0 4px 12px #cd7f324d}.position{font-size:1.5em;font-weight:700;min-width:40px;text-align:center}.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #c71081}.player-info{flex:1;min-width:0}.player-name{font-weight:600;font-size:1.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-score{font-size:1.3em;font-weight:700;color:#c71081;min-width:80px;text-align:right}.player-row.current-player{border:2px solid #c71081;background:linear-gradient(135deg,#ffe6f0,#fff);box-shadow:0 4px 12px #c7108140}.player-row.current-player.top-1{background:linear-gradient(135deg,gold,#ffe6f0)}.player-row.current-player.top-2{background:linear-gradient(135deg,silver,#ffe6f0)}.player-row.current-player.top-3{background:linear-gradient(135deg,#cd7f32,#ffe6f0)}.separator{text-align:center;color:#999;font-size:1.2em;padding:8px 0;letter-spacing:4px}:root{--color-bg: #faf8f5;--color-bg-paper: #fff9f0;--color-text: #3d3d3d;--color-text-light: #6b6b6b;--color-primary: #7eb8da;--color-secondary: #f4b8c5;--color-accent: #b8e0d2;--color-warning: #ffd93d;--color-success: #95d5b2;--color-error: #ffb4a2;--border-sketch: 2px solid var(--color-text);--border-radius: 12px;--shadow-sm: 2px 2px 0 var(--color-text);--shadow-md: 4px 4px 0 var(--color-text);--shadow-lg: 6px 6px 0 var(--color-text);--font-family: "Comic Neue", "Nunito", system-ui, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--transition-fast: .15s ease;--transition-normal: .25s ease;--max-width: 480px;--safe-area-top: 0px;--safe-area-bottom: 0px;--safe-area-left: 0px;--safe-area-right: 0px;--safe-inset-top: max(env(safe-area-inset-top, 0px), var(--safe-area-top));--safe-inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-bottom));--safe-inset-left: max(env(safe-area-inset-left, 0px), var(--safe-area-left));--safe-inset-right: max(env(safe-area-inset-right, 0px), var(--safe-area-right))}@media(orientation:landscape){:root{--max-width: 90vw}}@media(max-height:400px){:root{--font-size-xs: .65rem;--font-size-sm: .75rem;--font-size-md: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.125rem;--font-size-2xl: 1.25rem;--font-size-3xl: 1.5rem;--space-xs: .125rem;--space-sm: .25rem;--space-md: .5rem;--space-lg: .75rem;--space-xl: 1rem;--space-2xl: 1.5rem;--border-radius: 8px;--shadow-sm: 1px 1px 0 var(--color-text);--shadow-md: 2px 2px 0 var(--color-text);--shadow-lg: 3px 3px 0 var(--color-text)}}@media(max-height:320px){:root{--font-size-xs: .6rem;--font-size-sm: .65rem;--font-size-md: .75rem;--font-size-lg: .875rem;--font-size-xl: 1rem;--font-size-2xl: 1.125rem;--font-size-3xl: 1.25rem;--space-xs: 2px;--space-sm: 4px;--space-md: 6px;--space-lg: 8px;--space-xl: 12px;--space-2xl: 16px}}.paper-bg{background-color:var(--color-bg-paper);background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.03) 31px,rgba(0,0,0,.03) 32px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{position:fixed;inset:0;height:100%;width:100%;overflow:hidden;overscroll-behavior:none;overscroll-behavior-x:none;overscroll-behavior-y:none}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-text);background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#root,.app{overscroll-behavior:none}html.game-scroll-lock,body.game-scroll-lock,body.game-scroll-lock #root,body.game-scroll-lock .app{overflow:hidden!important;overscroll-behavior:none!important;overscroll-behavior-x:none!important;overscroll-behavior-y:none!important}body.game-scroll-lock #root,body.game-scroll-lock .app{touch-action:none!important}#game-container{position:fixed!important;z-index:0!important;pointer-events:none!important}#webgl{position:fixed!important;top:var(--safe-area-top, 0px)!important;left:var(--safe-area-left, 0px)!important;width:calc(100% - var(--safe-area-left, 0px) - var(--safe-area-right, 0px))!important;height:calc(100% - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px))!important;z-index:999!important;pointer-events:none!important;opacity:1;transition:opacity .3s ease,top .3s ease,left .3s ease,width .3s ease,height .3s ease}#webgl.active{opacity:1}#root{position:relative;z-index:1;height:calc(100% - var(--safe-area-top, 0px) - var(--safe-area-bottom, 0px));width:calc(100% - var(--safe-area-left, 0px) - var(--safe-area-right, 0px));margin-top:var(--safe-area-top, 0px);margin-left:var(--safe-area-left, 0px);transition:height .3s ease,width .3s ease,margin .3s ease}.app{height:100%;width:100%;display:flex;flex-direction:column;background-color:var(--color-bg-paper);position:relative;overflow:hidden}.screen{flex:1;display:flex;flex-direction:column;padding:var(--space-lg);overflow:hidden;position:relative}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-md) var(--space-xl);font-family:var(--font-family);font-size:var(--font-size-lg);font-weight:700;color:var(--color-text);background-color:var(--color-primary);border:var(--border-sketch);border-radius:var(--border-radius);box-shadow:var(--shadow-md);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:var(--shadow-lg);background-image:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%)}.btn:active{transform:translate(1px,1px) rotate(0);box-shadow:var(--shadow-sm);filter:brightness(.95)}.btn--secondary{background-color:var(--color-secondary)}.btn--accent{background-color:var(--color-accent)}.btn--reward{background-color:gold;color:#333;animation:pulse-reward 1.5s infinite}@keyframes pulse-reward{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.reward-label{font-size:var(--font-size-sm);opacity:.8;margin-right:var(--space-sm)}.reward-used{color:#4caf50;font-weight:700}.btn--large{padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-xl)}.btn--small{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.title{font-size:var(--font-size-3xl);font-weight:700;text-align:center;line-height:1.2}.subtitle{font-size:var(--font-size-lg);color:var(--color-text-light);text-align:center}.card{background-color:#fff;border:var(--border-sketch);border-radius:var(--border-radius);box-shadow:var(--shadow-md);padding:var(--space-lg)}.text-center{text-align:center}.mt-auto{margin-top:auto}.mb-lg{margin-bottom:var(--space-lg)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.loading-screen{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;opacity:1;transition:opacity .3s ease}.loading-screen.fade-out{opacity:0}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.3);border-top-color:var(--color-primary, #C71081);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-height:400px){.screen{padding:var(--space-md)}.btn{padding:var(--space-sm) var(--space-md)}.btn--large{padding:var(--space-sm) var(--space-lg)}}@media(max-height:320px){.screen{padding:var(--space-sm)}.btn{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-sm)}.btn--large{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-md)}.title{font-size:var(--font-size-xl)}}