/* ============================================================
   ספר צביעה לילדים — CSS
   ============================================================ */

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: #efced5;
  font-family: Arial, sans-serif;
}
body { display: flex; flex-direction: column; }

/* ---- מסכים ---- */
.color-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  gap: 16px;
  background: #efced5;
  box-sizing: border-box;
}
.color-screen.active { display: flex; }

/* ---- כותרת ---- */
.screen-title {
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: #1a6e9e;
  margin: 0 0 8px;
  text-align: center;
  font-weight: bold;
}

/* ---- כרטיס ---- */
.color-card {
  background: white;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  direction: rtl;
}
.color-card h2 {
  font-size: 1rem;
  color: #1a6e9e;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #7fd0f0;
}

/* ---- גריד תמונות קטלוג ---- */
#catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.catalog-thumb {
  cursor: pointer;
  border-radius: 12px;
  border: 3px solid transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #e8f6fd;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.catalog-thumb img {
  width: 100%; height: 150px;
  object-fit: cover; display: block;
}
.catalog-thumb span {
  font-size: 0.72rem; padding: 4px 6px;
  text-align: center; color: #1a4a6e;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; width: 100%;
  box-sizing: border-box;
}
.catalog-thumb:hover { transform: scale(1.06); border-color: #4db8e8; }
.catalog-thumb .del-btn {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px;
  background: rgba(200,40,40,0.8);
  color: white; border: none; border-radius: 50%;
  font-size: 0.7rem; cursor: pointer; display: none;
  align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
.catalog-thumb:hover .del-btn { display: flex; }

/* ---- כפתור העלאה ---- */
.upload-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e0f4fd;
  border: 2px dashed #4db8e8;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #1a6e9e;
  margin-top: 4px;
  transition: background 0.15s;
}
.upload-label:hover { background: #c8ecfa; }

/* ---- הודעה ריקה ---- */
#catalog-empty {
  color: #5a9ec0;
  font-size: 1rem;
  text-align: center;
  padding: 20px;
}

/* ============================================================
   מסך צביעה
   ============================================================ */
#screen-coloring {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  background: #efced5;
  height: 100%;
  flex: 1;
}
#screen-coloring.active { display: flex !important; flex-direction: column !important; }

/* ---- סרגל עליון ---- */
#coloring-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #ddb8c4;
  border-bottom: 2px solid #c8a0b0;
  flex-shrink: 0;
  gap: 8px;
  direction: rtl;
}
#btn-catalog {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #4db8e8;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
#btn-catalog:hover { background: #2fa0d4; }

.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid #cce8f8;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: all 0.15s;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.tool-btn:hover { transform: scale(1.1); border-color: #4db8e8; }
.tool-btn.active {
  background: #f471b5;
  border-color: #d0308a;
  color: white;
  box-shadow: 0 3px 10px rgba(244,113,181,0.45);
}

/* ---- אזור ציור ---- */
#coloring-workspace {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
}
#canvas-card {
  background: white;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s;
  flex-shrink: 0;
}
#canvas-card.zoomed { transform: scale(1.6); transform-origin: center center; }
#coloring-canvas { display: block; cursor: crosshair; touch-action: none; }

/* ---- לוח צבעים ---- */
#palette-bar {
  flex-shrink: 0;
  background: #ddb8c4;
  border-top: 2px solid #c8a0b0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  direction: ltr;
}
.palette-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #4db8e8;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.palette-nav:hover { background: #2fa0d4; }

#palette-colors {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  grid-template-rows: repeat(2, 44px);
  gap: 7px;
}
.color-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.selected {
  border-color: #e07030;
  box-shadow: 0 0 0 3px #e07030;
  transform: scale(1.2);
}
/* white dot needs visible border */
.color-dot[data-color="#ffffff"] { border-color: #aaa; }

/* ---- ספינר ---- */
#loading-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(197,234,248,0.92);
  align-items: center; justify-content: center;
  z-index: 9999; flex-direction: column; gap: 16px;
}
.color-spinner {
  width: 44px; height: 44px;
  border: 5px solid #c8a0b0;
  border-top-color: #4db8e8;
  border-radius: 50%;
  animation: colorSpin 0.8s linear infinite;
}
@keyframes colorSpin { to { transform: rotate(360deg); } }

/* ---- קונפטי ---- */
.confetti-particle {
  position: fixed;
  top: -20px;
  border-radius: 3px;
  animation: colorConfetti linear forwards;
  pointer-events: none;
}
@keyframes colorConfetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ---- אפקט מילוי ---- */
@keyframes fillRipple {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(5);   opacity: 0;   }
}

/* ============================================================
   ריספונסיב
   ============================================================ */

/* ---- טאבלט / פאבלט ---- */
@media (max-width: 640px) {
  .tool-btn { width: 44px; height: 44px; }
  .tool-group { gap: 6px; }
  #coloring-topbar { padding: 6px 10px; gap: 6px; }
  #btn-catalog { padding: 7px 12px; font-size: 0.82rem; }
}

/* ---- טלפון בינוני ---- */
@media (max-width: 480px) {
  .catalog-thumb img { height: 110px; }
  .tool-btn { width: 38px; height: 38px; }
  .tool-btn svg { width: 20px; height: 20px; }
  .tool-group { gap: 5px; }
  #coloring-topbar { padding: 5px 8px; gap: 5px; }
  #btn-catalog { padding: 6px 10px; font-size: 0.78rem; gap: 4px; }

  #palette-bar { padding: 6px 8px; gap: 7px; }
  .palette-nav { width: 30px; height: 30px; font-size: 1rem; }
  #palette-colors {
    grid-template-columns: repeat(6, 38px);
    grid-template-rows: repeat(2, 38px);
    gap: 5px;
  }
  .color-dot { width: 38px; height: 38px; }
}

/* ---- Credit bar ---- */
#credit-bar {
  width: 100%;
  text-align: center;
  font-size: 0.72rem;
  color: #7a4a5a;
  background: rgba(255,255,255,0.35);
  padding: 5px 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
#credit-bar a {
  color: #b0306a;
  text-decoration: none;
  font-weight: bold;
}
#credit-bar a:hover { text-decoration: underline; }

/* ---- טלפון קטן ---- */
@media (max-width: 380px) {
  .tool-btn { width: 34px; height: 34px; }
  .tool-btn svg { width: 18px; height: 18px; }
  .tool-group { gap: 4px; }
  #coloring-topbar { padding: 4px 6px; gap: 4px; }
  #btn-catalog { padding: 5px 8px; font-size: 0.74rem; }

  .palette-nav { width: 26px; height: 26px; font-size: 0.9rem; }
  #palette-colors {
    grid-template-columns: repeat(6, 33px);
    grid-template-rows: repeat(2, 33px);
    gap: 4px;
  }
  .color-dot { width: 33px; height: 33px; }
}

/* ---- landscape נמוך (גובה < 500px) ---- */
@media (max-height: 500px) {
  #coloring-topbar { padding: 4px 10px; }
  .tool-btn { width: 36px; height: 36px; }
  #palette-bar { padding: 4px 8px; }
  #palette-colors {
    grid-template-columns: repeat(6, 34px);
    grid-template-rows: repeat(2, 34px);
    gap: 4px;
  }
  .color-dot { width: 34px; height: 34px; }
  .palette-nav { width: 28px; height: 28px; }
}