/* игра «Раскраски» (color): стили только этой игры. Селекторы без #s-color действуют на всю страницу — новые правила пишите через #s-color. */
/* color */
#s-color{background:radial-gradient(circle at 50% 30%,#fffaf0,#ffe9c2)}
.color-pick{position:absolute;inset:0;overflow-y:auto;touch-action:pan-y;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:4vmin;padding:17vmin 4vmin 6vmin}
.color-pick button{position:relative;width:24vmin;aspect-ratio:2/3;border-radius:2.4vmin;background:#fff;box-shadow:0 .8vmin 0 #ffc94d,0 1vmin 2vmin rgba(0,0,0,.15);border:.7vmin solid #ffc94d;animation:pop-in .4s backwards;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.color-pick button:active{scale:.93}
.color-pick button.has{border-color:#ff8fc8;box-shadow:0 .8vmin 0 #ff8fc8,0 1vmin 2vmin rgba(0,0,0,.15)}
.color-pick button img{width:100%;height:100%;object-fit:cover;border-radius:1.6vmin}
.color-pick button i{position:absolute;right:-2.4vmin;top:-2.4vmin;width:9vmin;height:9vmin;filter:drop-shadow(0 .4vmin .4vmin rgba(0,0,0,.3));animation:pop-in .5s .3s backwards}
.color-pick button i img{width:100%;height:100%;object-fit:contain}
.color-work{position:absolute;inset:0;display:none;--tb:11.5vmin;--sw:10.4vmin;--stk:calc(var(--sw) * 1.3)}
.color-work.show{display:block}
.canvas-wrap{position:absolute;left:calc(5.8vmin + var(--tb) * 2 + env(safe-area-inset-left));right:calc(var(--sw) * 4 + 10vmin + env(safe-area-inset-right));top:2vmin;bottom:calc(2vmin + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}
.canvas-box{position:relative;border-radius:2vmin;box-shadow:0 1vmin 3vmin rgba(0,0,0,.18);transition:box-shadow .4s}
#color-canvas{display:block;width:100%;height:100%;background:#fff;border-radius:2vmin;touch-action:none}
#color-hint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;border-radius:2vmin}
#color-glint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#color-hint.show{animation:hint-pulse 1.1s ease-in-out infinite}
@keyframes hint-pulse{0%,100%{opacity:.15}50%{opacity:.85}}
.canvas-box.framed{box-shadow:0 0 0 1.6vmin #d9a04e,0 0 0 2.4vmin #8a5a22,0 2vmin 5vmin rgba(0,0,0,.45);animation:swing 1.4s ease-in-out 3;z-index:60}
@keyframes swing{25%{rotate:-2.5deg}75%{rotate:2.5deg}}
.canvas-box.alive:after{content:"";position:absolute;inset:0;border-radius:2vmin;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:shine 1.6s ease-in-out 2}
@keyframes shine{from{background-position:120% 0}to{background-position:-60% 0}}
.canvas-box.alive .stuck{animation:dance .5s ease-in-out infinite alternate}
/* НЕАКТИВНО (перекрыто более поздним @keyframes dance, строка 324 старого style.css — побеждает последнее определение): @keyframes dance{from{transform:translateY(0) scale(1)}to{transform:translateY(-6%) scale(1.12)}} */
.color-alive{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:2vmin}
.color-alive i{position:absolute;width:7%;aspect-ratio:1;translate:-50% -50%;background:var(--c);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 1.2s ease-in-out infinite;filter:drop-shadow(0 0 .6vmin #fff)}
/* НЕАКТИВНО (перекрыто более поздним @keyframes twinkle, строка 494 старого style.css — побеждает последнее определение): @keyframes twinkle{0%,100%{scale:0;rotate:0deg}50%{scale:1;rotate:45deg}} */
.sticker-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:2vmin}
.stuck{position:absolute;width:18%;aspect-ratio:1;object-fit:contain;translate:-50% -50%;rotate:var(--r);pointer-events:auto;touch-action:none;animation:pop-in .3s;transition:scale .2s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 .4vmin .3vmin rgba(0,0,0,.3))}
.stuck.drag{scale:1.15;filter:drop-shadow(0 1.2vmin .8vmin rgba(0,0,0,.35));z-index:2}
.stk-ghost{position:fixed;translate:-50% -50%;pointer-events:none;z-index:900;object-fit:contain}

/* tools: big picture buttons, the selected one is lifted */
.cw-tools{position:absolute;left:calc(2.5vmin + env(safe-area-inset-left));top:17vmin;display:grid;grid-template-columns:repeat(2,var(--tb));gap:1.3vmin;z-index:20}
.cw-tool{width:var(--tb);height:var(--tb);border-radius:3vmin;background:#fff;border:.6vmin solid #fff;box-shadow:0 .7vmin 0 #e8c58a,0 1vmin 1.6vmin rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;padding:1vmin;transition:transform .28s cubic-bezier(.3,1.6,.5,1),background .12s;--cur:#6cccff}
.cw-tool svg,.cw-tool img{width:100%;height:100%;pointer-events:none;object-fit:contain}
.cw-tool.sel{background:#fff6c9;border-color:#ffb300;transform:translateY(-.6vmin) scale(1.06);box-shadow:0 .9vmin 0 #e09a00,0 1.2vmin 2vmin rgba(0,0,0,.2)}
.cw-tool.undo{background:#fff3e0}
.cw-tool:active{transform:translateY(.4vmin) scale(.95)}
.cw-tool.hinted,.palette button.hinted{animation:hinted .8s ease-in-out infinite}
@keyframes hinted{50%{transform:scale(1.18);box-shadow:0 0 0 1vmin #ffd23f,0 0 3vmin #ffb300}}

/* palette (24 colours) and the sticker tray share the side panel */
.cw-side{position:absolute;right:calc(2.5vmin + env(safe-area-inset-right));top:16vmin;bottom:calc(2vmin + env(safe-area-inset-bottom));width:calc(var(--sw) * 4 + 7.5vmin);display:flex;align-items:center;justify-content:center;z-index:20}
.palette{display:grid;grid-template-columns:repeat(4,var(--sw));gap:1.3vmin 1.5vmin;padding:1.4vmin;border-radius:4vmin;background:rgba(255,255,255,.55)}
.palette button{width:var(--sw);height:var(--sw);border-radius:50%;border:.7vmin solid #fff;box-shadow:0 .5vmin 1vmin rgba(0,0,0,.25);transition:transform .26s cubic-bezier(.3,1.6,.5,1)}
.palette button[data-c=white]{box-shadow:0 0 0 .25vmin #d9cbb0,0 .5vmin 1vmin rgba(0,0,0,.25)}
.palette button.sel{transform:scale(1.2);border-color:#5a3b1f;z-index:1}
.color-work.nocolor .palette{opacity:.4}
.sticker-tray{display:none;flex-direction:column;align-items:center;gap:1.6vmin;padding:1.4vmin;border-radius:4vmin;background:rgba(255,255,255,.55)}
.color-work.stickers .palette{display:none}
.color-work.stickers .sticker-tray{display:flex}
.stk-sets{display:flex;gap:1.3vmin}
.stk-sets button{width:var(--sw);height:var(--sw);border-radius:2.6vmin;background:#fff;border:.5vmin solid #fff;box-shadow:0 .5vmin 0 #e8c58a;padding:.6vmin;opacity:.6}
.stk-sets button.sel{opacity:1;border-color:#ff8fc8;box-shadow:0 .5vmin 0 #ff5ba8}
.stk-sets img{width:100%;height:100%;object-fit:contain}
.stk-list{display:grid;grid-template-columns:repeat(3,var(--stk));gap:1.3vmin}
.stk{width:var(--stk);height:var(--stk);padding:1vmin;border-radius:3vmin;background:#fff;box-shadow:0 .6vmin 0 #ffc94d,0 .8vmin 1.4vmin rgba(0,0,0,.15);touch-action:none;animation:pop-in .3s backwards;transition:scale .22s cubic-bezier(.3,1.6,.5,1)}
.stk.press{scale:.9}
.stk img{width:100%;height:100%;object-fit:contain;pointer-events:none}

/* parent/action buttons */
.cw-acts{position:absolute;right:calc(2.5vmin + env(safe-area-inset-right));top:calc(2vmin + env(safe-area-inset-top));display:flex;gap:1.3vmin;z-index:30}
.cw-act{width:var(--sw);height:var(--sw);border-radius:50%;background:linear-gradient(var(--b1),var(--b2));box-shadow:0 .7vmin 0 var(--b3),0 1vmin 1.6vmin rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;transition:transform .26s cubic-bezier(.3,1.6,.5,1)}
.cw-act svg{width:66%;height:66%}
.cw-act:active{transform:translateY(.5vmin) scale(.95)}
.cw-act.busy{animation:busy .6s linear infinite}
@keyframes busy{50%{scale:.9}}
#color-done{position:absolute;left:calc(17.5vmin + env(safe-area-inset-left));bottom:calc(2.5vmin + env(safe-area-inset-bottom));width:var(--tb);height:var(--tb);z-index:30}

/* helper (shared makeHelper): small portrait bottom-left, the bubble opens to the right as a row */
#s-color.picking .helper{display:none}
#s-color .helper{left:calc(2.5vmin + env(safe-area-inset-left));bottom:2.5vmin;width:13.5vmin;height:13.5vmin;z-index:40}
#s-color .hp-bub{left:calc(100% + 3.4vmin);translate:none;bottom:0;flex-direction:row;transform-origin:0 50%;z-index:41}
#s-color .hp-bub:before{left:-2.6vmin;bottom:5vmin}
#s-color .hp-bub:after{left:-4.6vmin;bottom:3vmin}
#s-color .hp-it{width:12vmin;height:12vmin}
/* start over: ask with pictures */
.cw-ask{position:absolute;inset:0;z-index:200;background:rgba(60,40,20,.45);display:none;align-items:center;justify-content:center}
.cw-ask.show{display:flex}
.cw-ask-box{background:#fff;border-radius:5vmin;padding:4vmin;box-shadow:0 2vmin 5vmin rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:4vmin;animation:pop-in .3s}
.cw-ask-pics{display:flex;align-items:center;gap:3vmin}
.cw-ask-pics img{width:22vmin;aspect-ratio:2/3;border-radius:2vmin;border:.6vmin solid #ffc94d;object-fit:cover}
.cw-ask-pics svg{width:14vmin}
.cw-ask-btns{display:flex;gap:10vmin}
.cw-toast{position:absolute;left:50%;top:50%;width:22vmin;height:22vmin;translate:-50% -50%;z-index:210;pointer-events:none;opacity:0}
.cw-toast.show{animation:toast 1.6s ease-out}
@keyframes toast{0%{opacity:0;scale:.3}15%{opacity:1;scale:1.1}25%{scale:1}80%{opacity:1}100%{opacity:0}}
.cw-toast svg{width:100%;height:100%}

/* landscape: tools (2 columns) left, picture in the middle, actions + palette right */
@media (orientation:landscape){
  .color-work{--tb:min(11.5vmin,6.2vw);--sw:min(10.4vmin,5.6vw)}
}
/* portrait: actions on top, tools left of the picture, palette under it */
@media (orientation:portrait){
  .color-work{--tb:11.6vmin;--sw:10.6vmin;--stk:13vmin}
  .canvas-wrap{left:calc(2vmin + var(--tb) * 2 + 3.5vmin);right:1.2vmin;top:15.2vmin;bottom:calc(var(--sw) * 3 + 9vmin + env(safe-area-inset-bottom))}
  .cw-tools{left:2vmin;top:17vmin}
  .cw-side{left:0;right:0;top:auto;bottom:calc(1vmin + env(safe-area-inset-bottom));width:auto;height:calc(var(--sw) * 3 + 6vmin)}
  .palette{grid-template-columns:repeat(8,var(--sw));gap:1.3vmin 1.4vmin}
  .sticker-tray{flex-direction:row;gap:2vmin}
  .stk-sets{display:grid;grid-template-columns:repeat(2,var(--sw))}
  .color-work{--stk:13vmin}
  .cw-acts{top:calc(2.5vmin + env(safe-area-inset-top));right:calc(3.8vmin + var(--sw) + env(safe-area-inset-right))}
  #s-color .helper{left:calc(17vmin + env(safe-area-inset-left));top:calc(1.8vmin + env(safe-area-inset-top));bottom:auto;width:13vmin;height:13vmin}
  #s-color .hp-bub{bottom:auto;top:-1vmin;padding:1.2vmin}
  #s-color .hp-bub:before{bottom:auto;top:5vmin}
  #s-color .hp-bub:after{bottom:auto;top:8vmin}
  #s-color .hp-it{width:11vmin;height:11vmin}
  #color-done{left:auto;right:calc(2.5vmin + env(safe-area-inset-right));top:calc(2.5vmin + env(safe-area-inset-top));bottom:auto;width:var(--sw);height:var(--sw)}
  .color-pick button{width:40vmin}
}
/* tall phones: one tool column, a wider picture */
@media (orientation:portrait) and (max-aspect-ratio:10/19){
  .canvas-wrap{left:calc(2vmin + var(--tb) + 3vmin)}
  .cw-tools{grid-template-columns:var(--tb)}
}
/* помощник из семьи: размер и место на экране этой игры (их читает общий .helper.fam3d в core/core.css).
   --hp-h = высота фигуры (доля высоты экрана), --hp-x = отступ слева, --hp-y = где стоят ноги (от низа) */
#s-color .helper.fam3d{--hp-h:30%;--hp-x:2.5vmin;--hp-y:1%}
@media (orientation:portrait){#s-color .helper.fam3d{--hp-h:20%}}

@media (orientation:portrait) and (max-aspect-ratio:10/19){#s-color.has-fam3d .canvas-wrap{align-items:flex-start}}   /* the helper stands under the picture */
@media (orientation:landscape){#s-color.has-fam3d .canvas-wrap{left:calc(40vmin + var(--tb) + env(safe-area-inset-left))}}   /* a column for the helper between "done" and the picture */
/* the big 3D helper (placeHelper in color.js): landscape — "done" goes up to the top of the helper's column (its old place is under the figure);
   portrait — "waist up": the legs fade out above the palette (--col-cut = the visible part of the figure's box), only the visible part takes taps */
@media (orientation:landscape){#s-color.has-fam3d #color-done{left:calc(6.3vmin + var(--tb) * 2 + env(safe-area-inset-left));top:calc(2.5vmin + env(safe-area-inset-top));bottom:auto}}
#s-color .helper.col-crop .hp-pic{height:calc(100% / var(--col-k));-webkit-mask-image:linear-gradient(#000 calc(var(--col-cut) - 9%),transparent var(--col-cut));mask-image:linear-gradient(#000 calc(var(--col-cut) - 9%),transparent var(--col-cut))}
#s-color .helper.col-crop .hp-hit{bottom:calc(100% - var(--col-cut))}

/* ---------- polish (15.10): фон, слои эффектов, кнопки-пружины. План: agents/polish/color_plan.md. Классы cfx-*, анимации colfx-* (twinkle/dance — имена заняты чужими играми) ---------- */
#s-color .cfx-bg,#s-color .cfx-rb{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#s-color .cfx-bg .cl{position:absolute;left:-36vmax;width:34vmax;height:12vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));opacity:.7;animation:colfx-drift 70s linear infinite}
@keyframes colfx-drift{from{translate:0 0}to{translate:190vw 0}}
#s-color .cfx-bg .gl{position:absolute;width:3.2vmin;aspect-ratio:1;translate:-50% -50%;background:#fff6b0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:colfx-tw 3s ease-in-out infinite}
@keyframes colfx-tw{0%,100%{scale:0;opacity:0}50%{scale:1;opacity:.85}}
#s-color .cfx-bg .bf{position:absolute;left:-10%;width:7vmin;height:5vmin;animation:colfx-fly 20s ease-in-out infinite alternate}
#s-color .cfx-bg .bf svg{width:100%;height:100%;overflow:visible;animation:colfx-flap .5s ease-in-out infinite alternate}
@keyframes colfx-flap{from{scale:1 1}to{scale:.3 1}}
@keyframes colfx-fly{0%{translate:0 0;rotate:8deg}25%{translate:30vw -6vh;rotate:-8deg}50%{translate:58vw 5vh;rotate:10deg}75%{translate:84vw -4vh;rotate:-6deg}100%{translate:112vw 2vh;rotate:6deg}}
#s-color.cfx-still .cfx-bg *,#s-color.cfx-still .cfx-rb i{animation-play-state:paused}
#s-color .cfx-rb{opacity:0}
#s-color .cfx-rb i{position:absolute;left:50%;top:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;background:conic-gradient(#ffb3c1,#ffe6a0,#c9f5a8,#a8e4ff,#d1b8ff,#ffb3e0,#ffb3c1);border-radius:50%}
#s-color .cfx-rb.on i{animation:colfx-spin 7s linear infinite}
@keyframes colfx-spin{to{rotate:360deg}}
#s-color .cfx-l{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:150}
#s-color .cfx-l>div{position:absolute}
#s-color .cfx-flash,#s-color .cfx-pulse,#s-color .cfx-veil{inset:0;opacity:0}
#s-color .cfx-pulse{background:radial-gradient(circle at 50% 45%,transparent 30%,var(--pc,#ffd23f) 135%)}
#s-color .cfx-veil{background:#fffaf0}
#s-color .cfx-ring{width:9vmin;height:9vmin;margin:-4.5vmin 0 0 -4.5vmin;border:.9vmin solid #ffd23f;border-radius:50%;opacity:0}
#s-color .cfx-plus{font-weight:900;font-size:6.4vmin;line-height:1;translate:-50% -30%;opacity:0;text-shadow:0 0 .5vmin #fff,0 0 .5vmin #fff,0 .3vmin .3vmin rgba(0,0,0,.25)}
#s-color .cfx-say{translate:-50% 0;white-space:nowrap;opacity:0;font-weight:900;font-size:9.5vmin;line-height:1;color:#ff5ba8;-webkit-text-stroke:.8vmin #fff;paint-order:stroke fill;text-shadow:0 1vmin 2vmin rgba(0,0,0,.25)}
#s-color .cfx-say.rec{color:#ff8a00}
#s-color .cfx-say.big{color:#35b955;font-size:12vmin}
@media (prefers-reduced-motion:reduce){#s-color .cfx-bg *{animation:none}}