/* KidColoro Coloring Canvas v3 — Big, colorful, kid-friendly */
.kc-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.9); opacity:0; transition:opacity .3s; }
.kc-overlay.active { opacity:1; }
.kc-container { width:100%; height:100%; }
.kc-app { display:flex; flex-direction:column; height:100%; background:#1e1e3a; color:#fff; font-family:'Nunito','Comic Sans MS',sans-serif; }

/* ═══ TOP BAR ═══ */
.kc-topbar {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.5rem 0.75rem;
  padding-top:max(0.5rem, env(safe-area-inset-top));
  background:linear-gradient(180deg, #2d2d5e 0%, #1e1e3a 100%);
  border-bottom:2px solid rgba(255,255,255,0.08);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.kc-topbar::-webkit-scrollbar { display:none; }

/* Close X */
.kc-x {
  width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,80,80,0.15);
  color:#ff6b6b; font-size:1.4rem; font-weight:700; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.kc-x:hover { background:rgba(255,80,80,0.3); }

/* Tool buttons (Brush / Fill / Eraser) — big, with emoji + label */
.kc-topbar-tools { display:flex; gap:0.4rem; flex-shrink:0; }

.kc-tbtn {
  height:48px; padding:0 1rem; border:none; border-radius:14px;
  background:rgba(255,255,255,0.07); color:#ccc;
  font-size:0.85rem; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:0.4rem; white-space:nowrap;
  transition:all .15s; flex-shrink:0;
}
.kc-tbtn:hover { background:rgba(255,255,255,0.12); color:#fff; }
.kc-tbtn.active { background:#667eea; color:#fff; box-shadow:0 3px 12px rgba(102,126,234,0.4); }
.kc-emoji { font-size:1.3rem; line-height:1; }

/* Small action buttons (undo/redo/clear/zoom) */
.kc-topbar-actions { display:flex; gap:0.25rem; flex-shrink:0; margin-left:0.5rem; }

.kc-abtn {
  width:40px; height:40px; border:none; border-radius:10px;
  background:transparent; color:#888; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0;
}
.kc-abtn:hover { background:rgba(255,255,255,0.1); color:#fff; }
.kc-abtn:disabled { opacity:0.2; cursor:not-allowed; }

/* Save + Print buttons */
.kc-topbar-save { display:flex; gap:0.35rem; margin-left:auto; flex-shrink:0; }

.kc-savebtn {
  height:48px; padding:0 1.2rem; border:none; border-radius:14px;
  background:#22c55e; color:#fff; font-weight:700; font-size:0.9rem;
  cursor:pointer; display:flex; align-items:center; gap:0.5rem; white-space:nowrap;
  transition:background .15s; flex-shrink:0;
}
.kc-savebtn:hover { background:#16a34a; }

.kc-printbtn {
  height:48px; padding:0 1rem; border:none; border-radius:14px;
  background:rgba(255,255,255,0.1); color:#ddd; font-weight:700; font-size:0.9rem;
  cursor:pointer; display:flex; align-items:center; gap:0.5rem; white-space:nowrap;
  transition:all .15s; flex-shrink:0;
}
.kc-printbtn:hover { background:rgba(255,255,255,0.18); color:#fff; }

/* ═══ CANVAS AREA ═══ */
.kc-area {
  flex:1; overflow:hidden; position:relative; background:#2a2a4a;
  background-image:
    linear-gradient(45deg, #252545 25%, transparent 25%),
    linear-gradient(-45deg, #252545 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #252545 75%),
    linear-gradient(-45deg, transparent 75%, #252545 75%);
  background-size:20px 20px;
  background-position:0 0, 0 10px, 10px -10px, -10px 0;
}
.kc-wrap {
  position:absolute; top:0; left:0; transform-origin:0 0;
  box-shadow:0 4px 40px rgba(0,0,0,0.5); will-change:transform;
}
#kcBg, #kcDraw { position:absolute; top:0; left:0; }
#kcDraw { cursor:default; }

.kc-load {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; color:#aaa; font-size:1.1rem;
}
.kc-spin {
  width:48px; height:48px; border:4px solid rgba(255,255,255,0.1);
  border-top-color:#667eea; border-radius:50%; animation:kcSp .8s linear infinite;
}
@keyframes kcSp { to { transform:rotate(360deg); } }

/* ═══ BOTTOM BAR ═══ */
.kc-bottom {
  padding:0.75rem 1rem;
  padding-bottom:max(0.75rem, env(safe-area-inset-bottom));
  background:linear-gradient(0deg, #2d2d5e 0%, #1e1e3a 100%);
  border-top:2px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap:0.75rem;
}

/* Brush sizes — big round buttons with label */
.kc-sizes { display:flex; align-items:center; justify-content:center; gap:0.75rem; }

.kc-sz {
  width:56px; height:56px; border:3px solid transparent; border-radius:50%;
  background:rgba(255,255,255,0.06); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:all .15s; position:relative;
}
.kc-sz:hover { border-color:rgba(255,255,255,0.3); }
.kc-sz.active { border-color:#667eea; background:rgba(102,126,234,0.2); box-shadow:0 0 12px rgba(102,126,234,0.3); }

.kc-szdot { display:block; border-radius:50%; background:#fff; }
.kc-szlbl { font-size:0.6rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.05em; }
.kc-sz.active .kc-szlbl { color:#a5b4fc; }

/* Color palette — big circles */
.kc-colors {
  display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; padding:0.2rem 0;
}

.kc-clr {
  width:44px; height:44px; border:3px solid transparent; border-radius:50%;
  cursor:pointer; transition:all .12s; flex-shrink:0;
}
.kc-clr:hover { transform:scale(1.15); }
.kc-clr.active {
  border-color:#fff; transform:scale(1.25);
  box-shadow:0 0 16px rgba(255,255,255,0.35);
}

.kc-clr-custom {
  border:3px dashed rgba(255,255,255,0.3) !important; background:transparent !important;
  color:#aaa; font-size:1.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.kc-clr-custom:hover { border-color:#fff !important; color:#fff; }
.kc-clr-custom.active { border-style:solid !important; border-color:#fff !important; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .kc-tbtn { height:44px; padding:0 0.8rem; font-size:0.8rem; border-radius:12px; }
  .kc-emoji { font-size:1.15rem; }
  .kc-savebtn { height:44px; padding:0 1rem; font-size:0.85rem; }
  .kc-printbtn { height:44px; padding:0 0.8rem; font-size:0.85rem; }
  .kc-abtn { width:36px; height:36px; font-size:0.9rem; }
  .kc-clr { width:40px; height:40px; }
  .kc-sz { width:50px; height:50px; }
}

@media (max-width: 640px) {
  .kc-topbar { gap:0.3rem; padding:0.4rem 0.5rem; }
  .kc-tbtn { height:40px; padding:0 0.6rem; font-size:0.75rem; border-radius:10px; gap:0.25rem; }
  .kc-emoji { font-size:1.1rem; }
  .kc-abtn { width:34px; height:34px; font-size:0.85rem; border-radius:8px; }
  .kc-savebtn { height:40px; padding:0 0.8rem; font-size:0.8rem; border-radius:10px; }
  .kc-printbtn { height:40px; padding:0 0.6rem; font-size:0.8rem; border-radius:10px; }
  .kc-x { width:38px; height:38px; font-size:1.2rem; }
  .kc-clr { width:36px; height:36px; }
  .kc-clr-custom { font-size:1.2rem; }
  .kc-sz { width:44px; height:44px; }
  .kc-szlbl { font-size:0.55rem; }
  .kc-sizes { gap:0.5rem; }
  .kc-colors { gap:0.35rem; }
  .kc-bottom { padding:0.5rem; gap:0.5rem; }
}

@media (max-width: 420px) {
  .kc-tbtn span:not(.kc-emoji) { display:none; }
  .kc-tbtn { padding:0 0.5rem; width:44px; justify-content:center; }
  .kc-savebtn span, .kc-printbtn span { display:none; }
  .kc-savebtn { width:44px; padding:0; justify-content:center; border-radius:50%; }
  .kc-printbtn { width:44px; padding:0; justify-content:center; border-radius:50%; }
  .kc-topbar-actions { margin-left:0; }
  .kc-clr { width:32px; height:32px; border-width:2px; }
  .kc-sz { width:40px; height:40px; }
}