/* ==========================================================================
   style.css -- Coloring Masterpiece
   All visual styling: screens (start/menu/game), category grid, toolbar,
   popups (shapes/stickers/color), buttons, responsive/mobile layout.
   ========================================================================== */

:root{--vh100:100vh}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;height:100dvh}
body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;font-family:"Nunito",system-ui,sans-serif;color:#2d3436;background:#f8f9fa}
.screen{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1);transform:translateY(14px) scale(.99)}.screen.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);z-index:10}
#menu{background:#764ba2;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.menu-inner{max-width:760px;width:100%;text-align:center}
.brand{margin-bottom:32px}
.brand-logo{font-size:46px;display:inline-block;margin-bottom:6px}
.brand h1{font-family:"Fredoka",sans-serif;font-size:40px;font-weight:700;color:#fff;letter-spacing:-.02em;margin:0}
.brand p{font-size:15px;color:rgba(255,255,255,.8);font-weight:700;margin-top:8px;letter-spacing:.02em}
@media(max-width:500px){.brand h1{font-size:28px}.brand{margin-bottom:20px}.brand p{font-size:13px}.brand-logo{font-size:36px}}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:600px){.cats{grid-template-columns:repeat(2,1fr);gap:12px}}
.cat-card{background:#ffffff;border-radius:22px;padding:24px 14px;cursor:pointer;box-shadow:0 8px 24px rgba(20,10,50,.25);transition:transform .2s ease,box-shadow .2s ease;text-align:center}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 14px 32px rgba(20,10,50,.3)}.cat-card:active{transform:translateY(-1px) scale(.98)}
.cat-icon{width:68px;height:68px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:34px}
.cat-card h3{font-family:"Fredoka",sans-serif;font-size:18px;font-weight:600;color:#2d3436}
@media(max-width:500px){.cat-icon{width:54px;height:54px;font-size:27px}.cat-card{padding:17px 10px;border-radius:18px}.cat-card h3{font-size:14px}}
.cat-card.upload{border:2px dashed rgba(102,126,234,.45);background:rgba(255,255,255,.92)}.cat-card.upload:hover{border-color:#667eea}
#game{background:#f1f2f6}
@media(min-width:901px){#game{flex-direction:row}.game-tools{width:72px;background:#fff;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:8px;border-right:1px solid #eee;overflow-y:auto}.game-body{flex:1;display:flex;flex-direction:column;min-height:0}.game-center{flex:1;display:flex;overflow:hidden;min-height:0}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:repeating-conic-gradient(#f1f2f6 0% 25%,#f8f9fa 0% 50%) 50%/16px 16px}.right-panel{width:250px;background:#fff;border-left:1px solid #eee;padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.mobile-tools{display:none}.mobile-color-btn{display:none}}
@media(max-width:900px){#game{flex-direction:column}.game-tools{display:none}.mobile-tools{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#fff;border-bottom:1px solid #eee;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.mobile-tools::-webkit-scrollbar{display:none}.mobile-tools .tbtn{flex-shrink:0}.mobile-tools .tsep{flex-shrink:0}.game-body{flex:1;display:flex;flex-direction:column;min-height:0}.game-center{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;min-height:0;background:repeating-conic-gradient(#f1f2f6 0% 25%,#f8f9fa 0% 50%) 50%/12px 12px}.right-panel{display:none}.mobile-color-btn{display:flex}}
.tbtn{width:48px;height:48px;border:0;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#f8f9fa;color:#636e72;font-size:9px;font-weight:800;transition:all .15s}.tbtn svg{width:20px;height:20px}.tbtn:hover{background:#dfe6e9}.tbtn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.tbtn.active svg{stroke:#fff}
.tbtn[data-tool="bucket"]:not(.active){background:#fff4de;color:#e08e0b}
.tbtn[data-tool="pencil"]:not(.active){background:#e3f2fd;color:#1e88e5}
.tbtn[data-tool="brush"]:not(.active){background:#f3e5fd;color:#8e44ad}
.tbtn[data-tool="draw"]:not(.active){background:#e0f8ec;color:#149863}
.tbtn[data-tool="line"]:not(.active){background:#fde3ee;color:#d81b7a}
.tbtn[data-tool="rect"]:not(.active){background:#e0f7fa;color:#00879e}
.tbtn[data-tool="oval"]:not(.active){background:#ffe7de;color:#e0621f}
.tbtn[data-tool="triangle"]:not(.active){background:#f2fbdb;color:#6a9c1f}
.tbtn[data-tool="text"]:not(.active){background:#eae6fd;color:#5b4cd6}
.tbtn[data-tool="eraser"]:not(.active){background:#fde3e3;color:#e0392b}
.tbtn[data-tool]:not(.active):hover{filter:brightness(.93)}
.tsep{width:2px;height:32px;background:#eee;margin:0 4px}@media(min-width:901px){.tbtn{width:52px;height:52px}.tsep{width:36px;height:2px;margin:6px 0}}
.game-top{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;border-bottom:1px solid #eee;flex-shrink:0}.game-top .left{display:flex;align-items:center;gap:10px}
.back-btn{width:36px;height:36px;border:0;border-radius:10px;cursor:pointer;background:#f8f9fa;display:grid;place-items:center;transition:background .15s}.back-btn:hover{background:#dfe6e9}.back-btn svg{width:18px;height:18px;stroke:#2d3436}
.game-top .cat-name{font-family:"Fredoka",sans-serif;font-size:18px;font-weight:600}.game-top .right{display:flex;gap:8px}
.top-btn{height:34px;padding:0 12px;border:0;border-radius:9px;cursor:pointer;font-family:"Nunito",sans-serif;font-weight:800;font-size:12px;display:flex;align-items:center;gap:4px;background:#f8f9fa;color:#2d3436;transition:all .15s}.top-btn:hover{background:#dfe6e9}.top-btn.save{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff}.top-btn svg{width:14px;height:14px}
#blankBtn{background:#eef0fd;color:#5b5fc7}#blankBtn:hover{background:#dfe1fb}
@media(max-width:500px){.top-btn .lbl{display:none}.top-btn{padding:0 8px;width:34px;justify-content:center}}
#art{border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.07);touch-action:none;cursor:crosshair;background:#fff;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.canvas-area{min-width:0;min-height:0}
.game-bottom{height:80px;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;justify-content:center;padding:0 12px;gap:10px;flex-shrink:0}
.thumb{height:60px;width:60px;border-radius:12px;border:3px solid #eee;background:#fff;cursor:pointer;padding:2px;transition:all .2s cubic-bezier(.22,1,.36,1);flex-shrink:0;overflow:hidden}.thumb:hover{border-color:#764ba2;transform:translateY(-3px)}.thumb.on{border-color:#764ba2;box-shadow:0 4px 12px rgba(118,75,162,.2);transform:translateY(-4px)}.thumb img{width:100%;height:100%;object-fit:contain}
@media(max-width:500px){.game-bottom{height:68px;gap:8px}.thumb{height:50px;width:50px;border-radius:10px}}
.right-panel h4{font-family:"Fredoka",sans-serif;font-size:12px;font-weight:600;color:#636e72;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.cw{width:100%;aspect-ratio:1;min-width:28px;min-height:28px;border-radius:50%;border:3px solid transparent;-webkit-appearance:none;appearance:none;padding:0;cursor:pointer;box-shadow:inset 0 -3px 4px rgba(0,0,0,.12);transition:transform .12s,border-color .12s}.cw:hover{transform:scale(1.15)}.cw.on{border-color:#2d3436;transform:scale(1.1)}
.color-row{display:flex;gap:8px;align-items:center;margin-top:10px}.color-row input[type=color]{width:34px;height:34px;border:0;border-radius:8px;cursor:pointer;padding:0}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-row input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}
.cdisp{flex:1;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;letter-spacing:.05em;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.size-section input[type=range]{width:100%;accent-color:#764ba2;margin-top:6px}.size-row{display:flex;justify-content:space-between;font-weight:800;font-size:11px;color:#636e72}
.mobile-color-btn{position:fixed;bottom:88px;right:12px;z-index:20;width:48px;height:48px;border-radius:50%;border:0;-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:22px;box-shadow:0 4px 14px rgba(118,75,162,.4);align-items:center;justify-content:center}
#start{background:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 45%,#7c3aed 100%);align-items:center;justify-content:center;overflow:hidden;position:relative}
#start::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 40%),radial-gradient(circle at 80% 75%,rgba(255,255,255,.1),transparent 40%);z-index:1}
.bubble-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubble{position:absolute;bottom:-40px;border-radius:50%;background:rgba(255,255,255,.28);box-shadow:inset 0 0 6px rgba(255,255,255,.5);animation:bubbleRise linear infinite}
@keyframes bubbleRise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.8}92%{opacity:.5}100%{transform:translateY(-115vh) translateX(var(--drift,20px));opacity:0}}
.start-inner{position:relative;z-index:3;text-align:center;padding:24px}
.logo-3d{position:relative;display:inline-block;width:96px;height:96px;margin-bottom:8px}
.start-logo{position:relative;z-index:2;font-size:60px;line-height:96px;display:block;text-align:center;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.start-title{font-family:"Fredoka",sans-serif;font-weight:700;font-size:54px;letter-spacing:-.02em;margin:8px 0 4px;color:#ffffff;text-shadow:0 1px 0 #c4b5fd,0 2px 0 #a78bfa,0 3px 0 #8b5cf6,0 4px 0 #7c3aed,0 5px 0 #6d28d9,0 6px 0 #5b21b6,0 18px 30px rgba(0,0,0,.5)}
.start-sub{color:rgba(255,255,255,.85);font-weight:700;font-size:15px;margin-bottom:36px;letter-spacing:.03em;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.play-btn{font-family:"Fredoka",sans-serif;font-size:23px;font-weight:600;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);border:0;border-radius:50px;padding:17px 56px;cursor:pointer;box-shadow:0 6px 0 #b91c1c,0 18px 34px rgba(0,0,0,.45);display:inline-flex;align-items:center;gap:10px;transition:transform .15s,box-shadow .15s}
.play-btn:hover{transform:translateY(-3px) scale(1.04)}.play-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b91c1c,0 8px 18px rgba(0,0,0,.4)}
.play-btn svg{width:24px;height:24px}
.boot-loader{display:none;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:rgba(255,255,255,.85);font-weight:700;font-size:14px}
#start.not-ready .play-btn{visibility:hidden}
#start.not-ready .boot-loader{display:flex}
.boot-spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:bootSpin .8s linear infinite;flex-shrink:0}
@keyframes bootSpin{to{transform:rotate(360deg)}}
@media(max-width:500px){.logo-3d{width:74px;height:74px}.start-logo{font-size:42px;line-height:74px}.start-title{font-size:36px}.start-sub{font-size:13px;margin-bottom:26px}.play-btn{font-size:18px;padding:14px 42px}}
.canvas-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.tool-popup{display:none;position:fixed;inset:0;z-index:60;background:rgba(20,15,35,.45);align-items:center;justify-content:center;padding:20px}
.tool-popup.show{display:flex}
.tool-popup-inner{background:#fff;border-radius:20px;padding:20px;max-width:360px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35);max-height:80vh;overflow-y:auto}
.tool-popup-inner h4{font-family:"Fredoka",sans-serif;font-size:16px;font-weight:600;text-align:center;color:#2d3436;margin-bottom:14px}
.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sticker-grid{grid-template-columns:repeat(5,1fr)}
.sticker-grid .shape-opt{font-size:26px}
.shape-opt{aspect-ratio:1;border:2px solid #eee;border-radius:14px;background:#f8f9fa;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:all .15s;color:#636e72;font-size:9px;font-weight:800}
.shape-opt svg{width:24px;height:24px;stroke:#636e72;fill:none;stroke-width:2}
.shape-opt:hover{border-color:#764ba2;background:#f3e5fd}
.shape-opt.on{border-color:#764ba2;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
.shape-opt.on svg{stroke:#fff}
.popup-close{display:block;margin:16px auto 0;background:#f1f2f6;border:0;border-radius:10px;padding:8px 22px;font-weight:800;font-size:12px;cursor:pointer;color:#636e72}
.tbtn[data-tool="shape"]:not(.active){background:#fde3ee;color:#d81b7a}
#stickerBtn:not(.active),#stickerBtnMobile:not(.active){background:#fff0e0;color:#e0791f}
#printBtn:not(.active),#printBtnMobile:not(.active){background:#e0f8ec;color:#149863}
.mini-sound-btn{width:28px;height:28px;border-radius:50%;border:0;background:#f3e5fd;color:#8e44ad;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.mini-sound-btn svg{width:15px;height:15px}
.mini-sound-btn:hover{background:#e5cdf7}
.mini-sound-btn.speaking{animation:sound-pulse .5s ease-in-out infinite}
@keyframes sound-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.top-btn.sound-mini{background:#f8f9fa}

.mobile-panel{display:none;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-radius:18px 18px 0 0;padding:18px;box-shadow:0 -6px 24px rgba(0,0,0,.1);max-height:55vh;overflow-y:auto}.mobile-panel.show{display:block}.mobile-panel .close-mp{position:absolute;top:10px;right:14px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f2f6;cursor:pointer;display:grid;place-items:center;font-size:16px}
.sound-toggle{position:fixed;top:12px;right:12px;z-index:25;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);display:grid;place-items:center;font-size:20px;transition:transform .15s}.sound-toggle:hover{transform:scale(1.1)}
body[data-screen="game"] .sound-toggle{top:auto;bottom:12px;left:12px;right:auto;z-index:15;width:34px;height:34px;font-size:16px;opacity:.85}
#fileInput{display:none}
.text-tool-input{position:fixed;z-index:40;border:2px dashed #764ba2;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 8px;font-family:"Nunito",sans-serif;font-weight:700;outline:none;min-width:40px;box-shadow:0 4px 14px rgba(118,75,162,.25)}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);font-weight:800;font-size:16px;color:#636e72;border-radius:10px;z-index:5}.loading.hidden{display:none}