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

:root{--vh100:100vh;--safe-l:max(25px,env(safe-area-inset-left));--safe-r:max(25px,env(safe-area-inset-right))}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button:focus,[tabindex]:focus,input:focus,a:focus{outline:none}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #764ba2;outline-offset:2px}
html{height:100%;height:100dvh;overflow:hidden}
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}
/* justify-content is flex-start (not center) on purpose: centering a flex
   container that OVERFLOWS clips off the top half of the overflow with no
   way to scroll back to it (a well-known flex trap) -- .menu-inner's own
   margin:auto restores the "centered when it fits" look without that trap.
   padding-top is taller than the other sides specifically to always clear
   .menu-topbar's icons (fixed at top:16px, up to 55px tall == bottom edge
   at 71px), so the title/cards can never render underneath them even on
   short-and-wide viewports (e.g. a phone in forced landscape) where the
   width-based mobile breakpoint below doesn't kick in to shrink anything.
   #categories (the separate category-picker scene) shares this exact shell
   -- same gradient, same guaranteed clearance -- just with a single Back
   icon in .menu-topbar instead of settings/info/fullscreen. */
#menu,#categories{background:#764ba2;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);align-items:center;justify-content:flex-start;padding:24px;padding-top:82px;overflow-y:auto}
.menu-topbar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.menu-topbar-right{display:flex;gap:10px}
.menu-icon-btn{width:55px;height:55px;border-radius:50%;border:0;background:rgba(255,255,255,.16);display:grid;place-items:center;cursor:pointer;color:#fff;transition:transform .15s,background .15s}
.menu-icon-btn svg{width:27.5px;height:27.5px;stroke:#fff;fill:none;stroke-width:2}
/* On phones, the landscape camera cutout some devices have sits on one
   side of the screen -- guarantee at least 25px of clearance (more if the
   browser reports a bigger safe-area-inset) between the true screen edge
   and any content on every mobile screen, not just this one. */
@media(max-width:900px){#menu,#categories{padding-left:var(--safe-l);padding-right:var(--safe-r)}.menu-topbar{left:var(--safe-l);right:var(--safe-r)}}
@media(max-width:500px){.menu-icon-btn{width:47.5px;height:47.5px}.menu-icon-btn svg{width:23.75px;height:23.75px}}
.menu-inner{max-width:1520px;width:100%;text-align:center;margin:auto 0}
.brand{margin-top:12px;margin-bottom:28px}
#menu .brand{transform:translateY(-70px)}
.brand h1{margin:0;line-height:0}
/* height was a flat 1800px with no clamp -- fine on whatever window the
   size was tuned against, but any screen/window taller than that (a big
   monitor, or just entering fullscreen, which removes the browser chrome
   and makes the viewport taller) rendered the logo at the full 1800px and
   broke the whole screen. Clamped to 47vh, chosen to match the <=820px
   tier's own 384px (384/820 = 46.8%) so there's no visible jump right at
   that breakpoint. */
.brand h1 img{display:block;margin:calc(-15vh) auto 0;height:min(1800px,47vh);width:auto;max-width:75vw;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(20,10,50,.35))}
@media(max-width:500px){.brand h1 img{height:min(1200px,47vh)}.brand{margin-top:8px;margin-bottom:18px}}
.play-btn{display:flex;align-items:center;justify-content:center;gap:12px;margin:36px auto 0;padding:22px 64px;border:0;border-radius:999px;background:linear-gradient(135deg,#ff9a56,#ff5e7e);color:#fff;font-family:"Fredoka",sans-serif;font-weight:700;font-size:26px;letter-spacing:.02em;cursor:pointer;box-shadow:0 14px 34px rgba(20,10,50,.45);transition:transform .15s ease,box-shadow .15s ease}
.play-btn:active{transform:translateY(-1px) scale(.98)}
.play-btn svg{width:30px;height:30px;fill:#fff;flex-shrink:0}
@media(max-width:500px){.play-btn{padding:18px 46px;font-size:22px;margin-top:26px}.play-btn svg{width:26px;height:26px}}
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:80px}
.cats .cat-card{flex:0 0 calc((100% - 240px)/4)}
@media(max-width:600px){.cats{gap:12px}.cats .cat-card{flex-basis:calc((100% - 12px)/2)}}
.cat-card{background:#ffffff;border-radius:29px;padding:26px 17px;cursor:pointer;box-shadow:0 12px 35px rgba(20,10,50,.25);transition:transform .2s ease,box-shadow .2s ease;text-align:center}
.cat-card:active{transform:translateY(-1px) scale(.98)}
.cat-icon{width:81px;height:81px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:41px}
.cat-card h3{font-family:"Fredoka",sans-serif;font-size:23px;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}}
/* This tier (like the max-height ones below it) is reached by both a real
   phone AND a narrow desktop window with a mouse -- (hover:none) and
   (pointer:coarse) scope the +20% to touch devices only, so a small
   desktop window keeps the base size instead of also growing. */
@media(max-width:500px) and (hover:none) and (pointer:coarse){.cat-card h3{font-size:16.8px}}
/* Landscape-only means the limiting dimension for the menu grid is always
   HEIGHT, not width -- a landscape phone (e.g. 667x375) or a desktop browser
   window that isn't maximized (e.g. 1920x720 once chrome/taskbar are
   subtracted) both land here even though neither is "narrow". Compacts the
   title and cards just enough that all 4 rows (3+3+3+1) plus the topbar
   clearance fit without #menu's overflow-y:auto ever kicking in. */
@media(max-height:820px){
  .brand{margin-top:8px;margin-bottom:36px}
  .brand h1 img{height:384px}
  .play-btn{padding:16px 44px;font-size:22px;margin-top:20px}
  .play-btn svg{width:26px;height:26px}
  .cats{gap:12px 14px}
  .cats .cat-card{flex-basis:calc((100% - 60px)/3)}
  .cat-card{padding:9px 12px}
  .cat-icon{width:42px;height:42px;margin:0 auto 6px;font-size:21px}
  .cat-card h3{font-size:14px}
}
/* Same touch-only scoping as the max-width:500px tier above -- this
   max-height:820px tier is also reached by a non-maximized desktop window,
   which should keep the base size. */
@media(max-height:820px) and (hover:none) and (pointer:coarse){.cat-card h3{font-size:16.8px}}
/* Real landscape phones (667x375, 844x390, ...) are shorter still than the
   tier above accounts for. Keeps the same 3-column grid as desktop (now
   3+3+3+1, 4 rows) instead of switching column count, and instead "raises"
   the whole block by shrinking the brand block and padding-bottom (never
   padding-top -- that's the fixed topbar clearance) to claw back the extra
   row's height. EXPERIMENTAL -- revert to a 4-column grid
   (flex-basis: calc((100% - 24px)/4)) here first if this doesn't hold up on
   a real device. */
@media(max-height:460px){
  #menu,#categories{padding-bottom:10px}
  .brand{margin-top:0;margin-bottom:24px}
  /* The base tier's -70px brand offset and the logo's own -15vh "raise it up"
     margin (see .brand h1 img) both assumed a tall enough viewport to have
     that much slack above -- on a short landscape phone there isn't, and
     stacking both together pushed the logo's top edge above the screen
     (cropped, since #menu can't scroll to reveal negative-margin overflow). */
  #menu .brand{transform:none}
  /* translateY (not margin) for these two -- unlike a negative margin, it
     doesn't touch layout flow, so it can't reproduce the unreachable-crop
     bug above: any part it pushes past the edge is still real scrollable
     overflow #menu can reveal. */
  .brand h1 img{height:min(356px,51.3vh);margin-top:0;transform:translateY(-35%)}
  .play-btn{padding:10px 32px;font-size:18px;margin-top:10px;transform:translateY(-75%)}
  .play-btn svg{width:20px;height:20px}
  .cats{gap:6px 18px}
  .cats .cat-card{flex-basis:calc((100% - 200px)/3)}
  .cat-card{padding:6px 4px;border-radius:12px}
  .cat-icon{width:26px;height:26px;margin:0 auto 3px;font-size:13px}
  .cat-card h3{font-size:10px}
}
/* Same touch-only scoping again for the shortest tier. */
@media(max-height:460px) and (hover:none) and (pointer:coarse){.cat-card h3{font-size:12px}}
#game{background:#f1f2f6}
/* Gated on real pointer/hover capability too, not just window width -- a
   big-screen phone in landscape (Galaxy S20 Ultra: 915x412) is wider than
   900px and was falling through to this desktop branch (sidebar tools,
   visible palette panel) even though it's still a phone. (hover:hover) and
   (pointer:fine) are only both true on an actual mouse/trackpad device, so
   a touch-primary phone never matches here regardless of its width. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){#game{flex-direction:row}.game-tools{width:96px;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-width:0;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),(hover:none) and (pointer:coarse){#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;font-size:12.075px}.mobile-tools .tsep{flex-shrink:0}.game-body{flex:1;display:flex;flex-direction:column;min-width:0;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.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.tbtn.active svg{stroke:#fff}
/* The label span used to just shrink-to-fit its own text (align-items:center
   sizes flex children by content, it doesn't stretch them) -- with no width
   of its own it never wrapped, so any translation wider than the button
   (e.g. "Рисование") silently overflowed past the button's rounded
   background instead of breaking onto a second line. width:100% alone isn't
   enough, though: normal word-wrap only breaks at whitespace, and several
   of the long translations here (like "Рисование" itself) are a SINGLE
   word with no space to break at, so they'd still overflow past the box
   with no valid wrap point -- overflow-wrap:break-word additionally allows
   breaking mid-word as a last resort once a whole word can't fit. */
.tbtn span{display:block;width:100%;text-align:center;line-height:1.15;overflow-wrap:break-word;word-break:break-word}
.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}
.tsep{width:2px;height:32px;background:#eee;margin:0 4px}@media(min-width:901px) and (hover:hover) and (pointer:fine){.tbtn{width:80px;height:66px;border-radius:16px;font-size:11.55px;gap:3px}.tbtn svg{width:24px;height:24px}.tsep{width:52px;height:2px;margin:6px 0}}
.game-top{position:relative;height:62px;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 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:44px;padding:0 16px;border:0;border-radius:11px;cursor:pointer;font-family:"Nunito",sans-serif;font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;background:#f8f9fa;color:#2d3436;transition:all .15s}.top-btn.save{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff}.top-btn svg{width:17px;height:17px}
#saveBtn:disabled{opacity:.4;cursor:default}
#blankBtn{background:#eef0fd;color:#5b5fc7}
@media(max-width:500px){.top-btn .lbl{display:none}.top-btn{padding:0 10px;width:40px;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;overflow:auto}
.zoom-controls{position:absolute;bottom:calc(80px + 14px);right:14px;display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.92);border-radius:16px;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:6}
.zoom-btn{width:34px;height:34px;border:0;border-radius:10px;background:#f8f9fa;color:#2d3436;font-size:18px;font-weight:800;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.zoom-btn:disabled{opacity:.4;cursor:default}
.zoom-btn svg{width:16px;height:16px}
.zoom-pct{font-family:"Nunito",sans-serif;font-size:11px;font-weight:800;color:#636e72;padding:2px 0}
@media(max-width:500px){.zoom-controls{bottom:calc(68px + 8px);right:8px}.zoom-btn{width:30px;height:30px;font-size:16px}}
/* Hidden everywhere except the small-phone tier (see below) -- on desktop
   and general mobile widths, Brush Size is already visible up front (right
   panel / mobile palette sheet), so a second floating control would be
   redundant clutter there. */
.vsize-control{display:none;position:absolute;top:50%;left:6px;transform:translateY(-50%);
  z-index:6;width:34px;height:132px;background:rgba(255,255,255,.92);border-radius:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);align-items:center;justify-content:center}
.vsize-control input[type=range]{width:110px;height:20px;margin:0;accent-color:#764ba2;transform:rotate(-90deg)}
/* Blank Page has no thumbnails to switch between, so the strip below the
   canvas (.game-bottom#strip) is hidden entirely there -- .canvas-col's
   .no-strip class both lets .canvas-area's flex:1 grow into that reclaimed
   space and pulls the floating zoom controls back down to hug the true
   bottom edge (their default offset assumes the strip is still there). */
.game-bottom.hidden{display:none}
.canvas-col.no-strip .zoom-controls{bottom:14px}
@media(max-width:500px){.canvas-col.no-strip .zoom-controls{bottom:8px}}
.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.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.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}
@media(max-width:900px),(hover:none) and (pointer:coarse){.mobile-color-btn{right:var(--safe-r);bottom:250px}}
#start{background:#1e1b4b;align-items:center;justify-content:center;overflow:hidden;position:relative}
/* Fades in on the same schedule as .splash-art (see splashSequence in
   game.js) instead of just appearing instantly with the rest of the
   screen -- a plain solid backdrop shows first, then the artwork reveals
   itself, matching the logo's own fade-in. */
.start-bg{position:absolute;inset:0;background:url('../img/Artwork.png') center/cover no-repeat;opacity:0;transition:opacity 1.5s ease;z-index:0}
.start-bg.show{opacity:1}
#start::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 40%),radial-gradient(circle at 80% 75%,rgba(255,255,255,.06),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}
/* Positioned in % of #start (its containing block, since #start is the
   nearest positioned ancestor and fills the whole viewport) rather than
   fixed px, so this same relative spot -- bottom-right, intentionally
   bleeding off the right edge by design -- reproduces at any screen size
   instead of only the one window size it was originally tuned against.
   (It used to sit inside .splash-art, a content-sized wrapper with its own
   `transform`, which made IT the containing block instead of #start -- a
   small, centered box, not the viewport -- so the same fixed-px offset
   landed in a completely different place depending on window size and, on
   most phone widths, pushed the logo fully off-screen.) */
.start-logo-img{position:absolute;right:-7.88%;bottom:10.56%;z-index:2;display:block;height:min(450px,54vh);width:auto;max-width:88vw;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45));opacity:0;transform:translateX(-25%) translateY(10px) scale(.98);transition:opacity 1.5s ease,transform 1.5s ease}
.start-logo-img.show{opacity:1;transform:translateX(-25%) translateY(0) scale(1)}
.tap-prompt{display:inline-block;margin-top:calc(36px + 9.5vh);padding:14px 36px;border-radius:999px;background:rgba(15,10,30,.8);font-family:"Fredoka",sans-serif;font-weight:700;font-size:29px;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .5s ease;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.tap-prompt.show{opacity:1;animation:tapPulse 1.4s ease-in-out infinite}
@keyframes tapPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.06)}}
#start.ready-tap{cursor:pointer}
/* Landscape phones (667x375, 812x375, ...) are wider than 500px but still
   short -- the logo's own width shrinks with it (it's sized off height, see
   .start-logo-img), so the fixed-size TAP TO PLAY pill starts running into
   it below roughly 700px wide. */
/* OR'd with a height check: real landscape phones (812x375, 844x390,
   896x414, ...) are wide enough to dodge the width-only condition below but
   are still exactly the "mobile" case this is meant to catch -- same
   height-over-width reasoning the menu/category screens already use for
   telling a phone apart from a desktop window in this landscape-only game. */
@media(max-width:700px),(max-height:460px){.tap-prompt{font-size:13px;margin-top:calc(36px + 47.25vh);padding:7px 15px}}
@media(max-width:500px){.start-logo-img{height:min(300px,45vh)}.tap-prompt{font-size:12px;margin-top:calc(28px + 84.375vh);padding:6px 14px}}
.canvas-col{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;overflow:hidden}
.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;overflow-x:hidden}
.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.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}
.confirm-inner{text-align:center}
.confirm-text{font-family:"Nunito",sans-serif;font-size:15px;font-weight:700;color:#2d3436;line-height:1.4;margin-bottom:20px}
.confirm-actions{display:flex;justify-content:center;gap:80px}
.confirm-btn{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .15s,filter .15s}
.confirm-btn svg{width:22px;height:22px}
.confirm-btn:active{transform:scale(.94)}
.confirm-cancel{background:#f1f2f6;color:#636e72}
.confirm-ok{background:linear-gradient(135deg,#ff6b6b,#e74c3c);color:#fff}
.tbtn[data-tool="shape"]:not(.active){background:#fde3ee;color:#d81b7a}
#stickerBtn:not(.active),#stickerBtnMobile:not(.active){background:#fff0e0;color:#e0791f}
.pref-row{display:flex;gap:14px;justify-content:center;margin:6px 0 4px}
.pref-toggle{flex:1 1 0;min-width:0;max-width:108px;aspect-ratio:1;border:2px solid #eee;border-radius:20px;background:#f8f9fa;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#636e72;transition:all .15s}
.pref-toggle svg{width:50%;height:50%;max-width:36px;max-height:36px;stroke:#636e72;fill:none;stroke-width:2}
.pref-toggle img{width:75%;height:auto;max-width:50px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.pref-toggle.on{border-color:#916fb5;background:linear-gradient(135deg,#8598ee,#916fb5);color:#fff}
.pref-toggle.on svg{stroke:#fff}
.tool-popup-inner.about-inner{max-width:480px;padding:36px}
.about-inner{position:relative;text-align:center}
.about-logo-frame{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:18px;padding:36px 28px;margin:0}
.about-logo{display:block;max-width:320px;width:100%;margin:0 auto}
.popup-close-icon{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:#f1f2f6;border:0;display:grid;place-items:center;cursor:pointer;color:#636e72;padding:0;transition:background .15s;z-index:1}
#infoPopupClose{top:-8px;right:7px;background:#2d3436;color:#fff}
.popup-close-icon svg{width:16px;height:16px}
@media(max-width:500px){.tool-popup-inner.about-inner{max-width:calc(100vw - 40px);padding:28px}.about-logo{max-width:240px}.tool-popup-inner.settings-inner{max-width:calc(100vw - 40px);padding:24px}}
.tool-popup-inner.settings-inner{max-width:460px;padding:32px}
.settings-inner h4{font-size:20px}
.settings-inner .popup-close{padding:11px 30px;font-size:14px}

.mp-heading{text-transform:uppercase}
.mobile-panel-backdrop{display:none}
.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}
.mobile-panel .colors{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px}
.mobile-panel .cw{max-width:40px}
/* The safe-margin fix below insets each edge-touching PANEL's own content
   (buttons/thumbnails/text) by --safe-l/--safe-r, instead of padding the
   outer #game/#album container -- padding the container would shrink the
   white game-top/sidebar/game-bottom panels away from the true edge while
   #game's own gray background (or #album's white) still reached it,
   leaving a mismatched-color strip in the margin instead of a seamless
   inset. Every panel keeps its background flush to the true edge; only
   what's inside it moves in. */
@media(max-width:900px),(hover:none) and (pointer:coarse){
  .game-top{padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r))}
  .mobile-tools{padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
  .game-bottom{padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r))}
  .zoom-controls{right:calc(14px + var(--safe-r))}
  .mobile-panel .close-mp{right:calc(14px + var(--safe-r))}
}
@media(max-width:500px){.zoom-controls{right:calc(8px + var(--safe-r))}}
/* This is now THE universal mobile game-scene layout (same condition as the
   general mobile block above, which it deliberately layers on top of --
   see below) -- product decision: every mobile screen, regardless of its
   own height, should look identical (positions/sizes) rather than getting
   a "roomier" variant on taller phones. It used to be gated additionally on
   max-height:410px, reserved for short landscape phones (Galaxy S8+
   740x360, iPhone SE 667x375, ...) specifically because a big-screen phone
   like a Galaxy S20 Ultra (915x412) has enough height to spare for the
   general block's horizontal .mobile-tools row -- but that meant the same
   phone category rendered two visually different UIs depending on model,
   which is the actual thing being fixed here.
   Reuses the desktop's vertical .game-tools sidebar (hiding the horizontal
   .mobile-tools row) since width is virtually always the abundant
   dimension on a landscape phone, not height -- a left sidebar costs no
   vertical space at all. The tool buttons are widened (not just the
   sidebar) so labels like "Autocollants" or "Рисование" fit inside their
   own background pill in every language. Undo/Reset/Save go icon-only
   since 3 labelled buttons can't fit this bar without overlapping. The
   thumbnail strip is a right-hand sidebar (eats into the abundant width,
   not height), and the zoom controls + palette toggle are stacked as one
   cluster clear of that sidebar instead of overlapping it.
   Relies on the general mobile block above for the properties it doesn't
   repeat here (.game-body/.game-center flex setup, .right-panel:none) --
   this block only needs to OVERRIDE the specific properties that must
   differ (the sidebar itself, #game's row direction, ...), so it has to
   stay physically after that block in the file for the cascade to layer
   correctly (same-specificity rule: later wins). */
@media(max-width:900px),(hover:none) and (pointer:coarse){
  #game{flex-direction:row}
  .mobile-tools{display:none}
  /* Widened along with .tbtn below -- "Autocollants" (FR, Stickers) needs
     ~93px just for its glyphs at 10.8px, and "Малювання" (UK, Draw) ~90px;
     68px forced both into a wrap. Widening the button (not shrinking the
     font, which the font-size is pinned at 10.8px regardless) needed more
     room in the sidebar itself too. */
  .game-tools{display:flex;flex-direction:column;align-items:center;width:calc(112px + var(--safe-l));padding:3px 0 3px var(--safe-l);gap:2px;overflow-y:auto}
  .game-tools .tbtn{width:104px;height:42px;flex-shrink:0}
  /* Group separators removed at this tier (not just visually shrunk), and
     the gap/padding around the 8 buttons trimmed -- reclaiming that
     footprint is what pays for the taller buttons above without
     reintroducing the vertical scroll they'd otherwise need on the
     shortest real devices (Galaxy S8+ at 740x360). */
  .game-tools .tsep{display:none}
  .tbtn{font-size:10.8px}
  .tbtn svg{width:15px;height:15px}
  .game-top{height:44px}
  #game .game-top{padding-left:16px}
  .game-top .cat-name{font-size:13px}
  .back-btn{width:30px;height:30px}
  .game-top .right{gap:10px}
  .top-btn{height:38px;width:46px;padding:0;justify-content:center}
  .top-btn svg{width:17px;height:17px}
  .top-btn .lbl{display:none}
  .canvas-col{flex-direction:row}
  .canvas-area{padding:4px}
  .vsize-control{display:flex}
  .game-bottom{flex-direction:column;height:auto;width:calc(52px + var(--safe-r));border-top:0;border-left:1px solid #eee;padding:6px calc(4px + var(--safe-r)) 6px 4px;gap:6px;overflow-y:auto;overflow-x:hidden}
  .thumb{height:42px;width:42px;border-radius:9px}
  .zoom-controls{bottom:6px;right:calc(64px + var(--safe-r))}
  .zoom-btn{width:26px;height:26px;font-size:13px}
  .zoom-pct{font-size:9px}
  .mobile-color-btn{bottom:157px;right:calc(64px + var(--safe-r));left:auto;width:38px;height:38px;font-size:17px}
  /* Brush Size now lives in the always-visible .vsize-control next to the
     canvas (discovering it inside the palette sheet -- especially for the
     Stickers tool -- wasn't obvious), so it's dropped from the sheet here
     to both avoid duplicating the control and free up enough height that
     the sheet never needs to scroll. */
  #mobilePanel .size-section{display:none}
  .mobile-panel-backdrop.show{display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.6)}
  .mobile-panel{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(300px,88vw);
    border-radius:20px;padding:20px 10px 10px;max-height:60vh}
  .mobile-panel .close-mp{top:13px;right:18px}
  .mobile-panel .colors{grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:5px}
  /* Blank Page hides the thumbnail sidebar (canvas-col/#game get the
     .no-strip class -- see loadBlankPage() in game.js), so the zoom+palette
     cluster no longer needs to clear its sidebar width -- collapse back
     down to just clearing the screen's own safe margin. */
  .canvas-col.no-strip .zoom-controls{right:calc(6px + var(--safe-r))}
  #game.no-strip .mobile-color-btn{right:calc(6px + var(--safe-r))}
}
.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}

.album-body{flex:1;overflow-y:auto;padding:24px;background:#f1f2f6}
@media(max-width:900px){.album-body{padding-left:var(--safe-l);padding-right:var(--safe-r)}}
.album-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1100px;margin:0 auto}
.album-item{position:relative;width:184px;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12);background:#fff;flex-shrink:0}
.album-item img{display:block;width:100%;height:184px;object-fit:contain;background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.album-delete{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(45,52,54,.65);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.album-delete svg{width:14px;height:14px}
.album-empty{display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:#636e72;font-weight:700;font-size:15px;text-align:center}
.album-empty-icon{font-size:44px}
.album-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"Nunito",sans-serif;font-size:18px;font-weight:800;color:#636e72;background:#f1f2f6;border-radius:999px;padding:6px 14px;white-space:nowrap}
@media(max-width:500px){.album-item{width:138px}.album-item img{height:138px}}
@media(max-width:900px) and (max-height:410px){.album-count{font-size:13px}}

.album-lightbox{display:none;position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.6);align-items:center;justify-content:center;padding:40px}
.album-lightbox.show{display:flex}
.album-lightbox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff;object-fit:contain}
.album-lightbox-close{position:fixed;top:20px;right:20px;background:rgba(255,255,255,.92)}

.orientation-overlay{display:none;position:fixed;inset:0;z-index:99999;background:#000;align-items:center;justify-content:center;pointer-events:all}
.orientation-overlay.show{display:flex}
.orientation-icon{display:flex;align-items:center;justify-content:center}
.orientation-icon img{width:200px;max-width:55vw;height:auto;transform:rotate(90deg)}

/* ========== FIRST-RUN TUTORIAL ========== */
.tut-overlay{position:fixed;inset:0;z-index:800}
.tut-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(15,10,30,.72),0 0 0 4px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.55);pointer-events:none;transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}
.tut-bubble{position:fixed;background:#fff;border-radius:27px;padding:22px 25px;box-shadow:0 30px 75px rgba(0,0,0,.35);transition:top .25s ease,left .25s ease}
.tut-bubble .tut-text{margin:0 0 21px;font-family:"Nunito",sans-serif;font-size:23px;font-weight:700;color:#2d3436;line-height:1.45}
/* Step-progress dots removed everywhere (desktop included) -- the lone
   "Next" button now centers in the footer, using the space the dots used
   to occupy. This also sidesteps the case that motivated it: on a narrow
   bubble, dots+button together didn't leave the button enough room and it
   clipped off the right edge of the screen on the last categories-scene
   step. */
.tut-footer{display:flex;align-items:center;justify-content:center;gap:21px}
.tut-dots{display:none}
.tut-dot{width:11px;height:11px;border-radius:50%;background:#dfe6e9}
.tut-dot.on{background:#764ba2}
.tut-next{border:0;border-radius:999px;padding:12.5px 33px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:"Fredoka",sans-serif;font-weight:600;font-size:21px;cursor:pointer;transition:filter .15s;flex-shrink:0}
/* Smaller screens (see positionTutorialBubble's maxW) get a narrower bubble
   so the first step's giant "highlight the whole grid" hole doesn't force
   it to cover most of the category list -- scaled back down from the
   desktop 1.5x toward something in between that stays readable. */
@media(max-width:900px){
  .tut-bubble{border-radius:22px;padding:22px 24px}
  .tut-bubble .tut-text{margin-bottom:17px;font-size:18px}
  .tut-next{padding:11px 26px;font-size:17px}
}
/* All :hover effects live here, gated behind (hover:hover), instead of on
   their own selectors -- touch devices report (hover:none) and simulate a
   ":hover" on tap that has no real "pointer left the element" moment to
   clear it, so a plain `.btn:hover{transform:scale(1.08)}` gets stuck
   showing its hover/pressed look (e.g. a settings icon staying enlarged)
   until the next unrelated tap anywhere on the page. Real mouse devices
   (hover:hover) still get every one of these effects exactly as before. */
@media(hover:hover){
  .menu-icon-btn:hover{background:rgba(255,255,255,.28);transform:scale(1.08)}
  .play-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px rgba(20,10,50,.55)}
  .cat-card:hover{transform:translateY(-9px);box-shadow:0 20px 46px rgba(20,10,50,.3)}
  .tbtn:hover{background:#dfe6e9}
  .tbtn[data-tool]:not(.active):hover{filter:brightness(.93)}
  .back-btn:hover{background:#dfe6e9}
  .top-btn:hover{background:#dfe6e9}
  #saveBtn:disabled:hover{background:#f8f9fa}
  #blankBtn:hover{background:#dfe1fb}
  .zoom-btn:hover{background:#dfe6e9}
  .thumb:hover{border-color:#764ba2;transform:translateY(-3px)}
  .cw:hover{transform:scale(1.15)}
  .shape-opt:hover{border-color:#764ba2;background:#f3e5fd}
  .pref-toggle:hover{border-color:#916fb5}
  #infoPopupClose:hover{background:#1e2224}
  .popup-close-icon:hover{background:#dfe6e9}
  .album-delete:hover{background:rgba(214,48,49,.9)}
  .confirm-cancel:hover{background:#dfe6e9}
  .confirm-ok:hover{filter:brightness(1.08)}
  .album-lightbox-close:hover{background:#fff}
  .tut-next:hover{filter:brightness(1.08)}
}