/* ============================================================
   WeGames - קנבס צביעה בעמוד משחק
   assets/css/coloring-canvas.css

   פריסה:
   דסקטופ - הציור מימין, פלטה בעמודה צרה משמאל (2 טורים x 10).
            שניהם גלויים יחד, בלי גלילה בין בחירת צבע לצביעה.
   מובייל  - הפלטה נדבקת לתחתית המסך בשתי שורות קבועות,
            כך שהציור נשאר במקום והצבע במרחק אצבע.
   ============================================================ */

/* המכל של אזור המשחק צבוע כהה עבור iframe.
   כשיש בתוכו קנבס צביעה, מאפסים אותו לרקע בהיר. */
.sg-col-game:has(.cpg){
  background:var(--bg, #f4f4f6);
  border-radius:0;
}

.cpg{
  --cpg-ink:#1a1a2e;
  --cpg-soft:#4a4a63;
  --cpg-faint:#8c8ca6;
  --cpg-accent:var(--accent, #5c6bc0);
  --cpg-paper:#fff;
  --cpg-line:#dcdce6;
  direction:rtl;
  background:var(--bg, #f4f4f6);
  color:var(--cpg-ink);

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"main palette";
  gap:14px;
  align-items:start;
}
.cpg-main{grid-area:main;min-width:0}
.cpg-palette{grid-area:palette}

/* ---------- שתי שכבות הקנבס ---------- */
.cpg-stage{
  position:relative;
  background:var(--cpg-paper);
  border:1px solid rgba(26,26,46,.08);
  border-radius:4px;
  overflow:hidden;
}
.cpg-layers{
  position:relative;transform-origin:center center;
  line-height:0;border-radius:4px;overflow:hidden;
}
.cpg-layers canvas{display:block;width:100%;height:auto}
#cpgPaint{position:relative;z-index:1}
#cpgLines{position:absolute;inset:0;z-index:2;cursor:crosshair;touch-action:none}
.cpg-loading{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:var(--cpg-paper);color:var(--cpg-faint);font-size:.9rem;
}

/* ---------- שורת הכלים ---------- */
.cpg-tools{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;flex-wrap:wrap;
}
.cpg-pill{
  display:flex;align-items:center;gap:6px;
  font-family:inherit;font-size:.82rem;font-weight:600;
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--cpg-line);background:var(--cpg-paper);
  color:var(--cpg-soft);cursor:pointer;min-height:40px;
  transition:background .12s,color .12s,border-color .12s;
}
.cpg-pill:hover{border-color:var(--cpg-accent);color:var(--cpg-ink)}
.cpg-pill[aria-pressed="true"]{
  background:var(--cpg-accent);border-color:var(--cpg-accent);color:#fff;
}
.cpg-pill:focus-visible{outline:2px solid var(--cpg-accent);outline-offset:2px}
.cpg-pill svg{width:17px;height:17px;flex-shrink:0}

.cpg-sizes{display:flex;align-items:center;gap:4px;margin-inline-start:4px}
.cpg-size{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--cpg-line);background:var(--cpg-paper);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .12s,background .12s;
}
.cpg-size:hover{border-color:var(--cpg-accent)}
.cpg-size[aria-pressed="true"]{background:var(--cpg-accent);border-color:var(--cpg-accent)}
.cpg-size span{display:block;border-radius:50%;background:var(--cpg-soft)}
.cpg-size[aria-pressed="true"] span{background:#fff}
.cpg-size[data-size="10"] span{width:8px;height:8px}
.cpg-size[data-size="22"] span{width:14px;height:14px}
.cpg-size[data-size="40"] span{width:20px;height:20px}
.cpg-size:focus-visible{outline:2px solid var(--cpg-accent);outline-offset:2px}

.cpg-grow{flex:1}
.cpg-tool{
  font-family:inherit;font-size:.82rem;font-weight:600;
  padding:9px 13px;border-radius:8px;border:none;
  background:transparent;color:var(--cpg-soft);
  cursor:pointer;transition:background .12s,color .12s;min-height:40px;
}
.cpg-tool:hover{background:rgba(26,26,46,.06);color:var(--cpg-ink)}
.cpg-tool:disabled{opacity:.35;cursor:default}
.cpg-tool:disabled:hover{background:transparent;color:var(--cpg-soft)}
.cpg-tool:focus-visible{outline:2px solid var(--cpg-accent);outline-offset:2px}
.cpg-tool-solid{background:var(--cpg-accent);color:#fff}
.cpg-tool-solid:hover{background:#4f5cb0;color:#fff}

/* ---------- פלטה: עמודה בצד ---------- */
.cpg-palette{
  background:var(--cpg-paper);
  border:1px solid var(--cpg-line);
  border-radius:14px;
  padding:12px;
}
.cpg-wells{
  display:grid;
  grid-template-columns:repeat(2,44px);
  gap:8px;
}
.cpg-well{
  position:relative;width:44px;height:44px;
  border:none;padding:0;border-radius:50%;cursor:pointer;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.14),
    0 1px 3px rgba(26,26,46,.18);
  transition:transform .13s cubic-bezier(.34,1.4,.64,1);
}
.cpg-well:hover{transform:scale(1.08)}
.cpg-well:focus-visible{outline:2px solid var(--cpg-ink);outline-offset:3px}
.cpg-well[aria-pressed="true"]{transform:scale(1.1)}
.cpg-well::after{
  content:"";position:absolute;inset:0;
  background-repeat:no-repeat;background-position:center;
  background-size:56% 56%;opacity:0;transition:opacity .12s;
}
.cpg-well[aria-pressed="true"]::after{opacity:1}
.cpg-well[data-check="light"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.cpg-well[data-check="dark"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.cpg-mix{margin-top:10px;display:flex;justify-content:center}
.cpg-mix input[type=color]{
  width:44px;height:44px;border:none;border-radius:50%;
  background:none;padding:0;cursor:pointer;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.4),0 1px 3px rgba(26,26,46,.2);
}
.cpg-mix input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.cpg-mix input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}

/* ---------- מסך צר: הפלטה נדבקת לתחתית ---------- */
@media(max-width:820px){
  .cpg{
    display:block;
    /* מקום לפלטה הצפה, כדי שהיא לא תכסה את סוף הציור */
    padding-bottom:132px;
  }

  .cpg-tools{gap:5px}
  .cpg-pill{padding:8px 11px;font-size:.78rem}
  .cpg-pill-label{display:none}
  .cpg-pill svg{width:19px;height:19px}
  .cpg-tool{padding:9px 11px;font-size:.78rem}
  .cpg-size{width:38px;height:38px}

  .cpg-palette{
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:60;
    border:none;
    border-top:1px solid var(--cpg-line);
    border-radius:16px 16px 0 0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(26,26,46,.14);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .cpg-wells{
    grid-template-columns:repeat(10,1fr);
    grid-template-rows:repeat(2,auto);
    gap:6px;
    flex:1;
  }
  .cpg-well{width:100%;height:auto;aspect-ratio:1}
  .cpg-mix{margin-top:0;flex-shrink:0}
  .cpg-mix input[type=color]{width:40px;height:40px}
}

@media(max-width:400px){
  .cpg-wells{gap:5px}
  .cpg-palette{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
}

/* ---------- נגישות ---------- */
@media(prefers-reduced-motion:reduce){
  .cpg-well,.cpg-well:hover{transition:none;transform:none}
}

/* ---------- הדפסה ---------- */
@media print{
  .cpg-tools,.cpg-palette,.cpg-loading{display:none !important}
  .cpg{display:block;background:#fff;padding:0}
  .cpg-stage{box-shadow:none;border:none;border-radius:0}
}