/* ============================================================
   BOYAMA — oyun sayfası stilleri
   ============================================================ */
#cl { --bs: max(260px, min(560px, 92vw, calc(100dvh - 300px))); max-width: 800px; }

.cl-layout { display: flex; gap: 14px; align-items: flex-start; justify-content: center; margin-top: 12px; }
.cl-main { display: flex; flex-direction: column; align-items: center; }

/* Tuval */
#cl-board {
  position: relative; width: var(--bs); height: var(--bs);
  border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 4px rgba(166, 123, 251, 0.35), 0 20px 44px rgba(0, 0, 0, 0.45);
  cursor: crosshair;
  touch-action: manipulation;
}
#cl-board.erasing { cursor: cell; }
.cl-board-wrap { position: relative; }
#cl-board { overflow: hidden; overscroll-behavior: contain; }
#cl-board.zoomed { overflow: auto; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: var(--violet) transparent; }
#cl-board.panning { cursor: grabbing !important; }
#cl-zoom { --z: 1; position: relative; width: calc(var(--z) * 100%); height: calc(var(--z) * 100%); }
/* Yakınlaştırma: resmin DIŞINDA, ilerleme çubuğunun sağında */
.cl-zoombar {
  flex: none;
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.cl-zoombar button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.cl-zoombar button:hover:not(:disabled) { background: rgba(139, 92, 246, 0.3); }
.cl-zoombar button:disabled { opacity: 0.3; cursor: default; }
.cl-zoombar span { min-width: 34px; text-align: center; font-family: "Fredoka", sans-serif; font-size: 12.5px; color: var(--ink-dim); }
#cl-color, #cl-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#cl-line { object-fit: contain; }
.cl-ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--col); box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(0, 0, 0, 0.25); pointer-events: none; animation: cl-ripple 0.55s ease-out forwards; }
@keyframes cl-ripple { to { transform: scale(6); opacity: 0; } }
.cl-loading { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.85); color: #5a3fa8; font-family: "Fredoka", sans-serif; z-index: 3; }
#cl.loading .cl-loading { display: flex; }
.cl-loading b { font-size: 40px; animation: cl-spin 1.2s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* İlerleme */
.cl-progress { width: var(--bs); display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; font-family: "Fredoka", sans-serif; }
.cl-progress small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.cl-progress-track { flex: 1; height: 8px; border-radius: 99px; background: var(--bg-soft-2); overflow: hidden; }
#cl-bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff4d6d, #ffb627, #38b000, #4cc9f0, #8b5cf6); transition: width 0.4s; }
#cl-pct { font-size: 15px; color: var(--ink); min-width: 40px; text-align: right; }

/* Araçlar + palet */
.cl-side { display: flex; flex-direction: column; gap: 12px; width: 190px; }
.cl-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cl-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--bg-soft); color: var(--ink);
  font-family: "Fredoka", sans-serif; font-size: 12.5px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.cl-tool b { font-size: 20px; line-height: 1; font-weight: 400; }
.cl-tool:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-2px); }
.cl-tool.on { border-color: var(--violet); background: rgba(139, 92, 246, 0.25); }
.cl-tool:disabled { opacity: 0.4; cursor: default; }
.cl-tool.save { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; background: linear-gradient(180deg, #a67bfb, #7c3aed); border: 0; color: #fff; font-size: 15px; padding: 11px; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); }
#cl-cur { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(139, 92, 246, 0.6); }
#cl-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); }
.cl-sw { aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); background: var(--sw); cursor: pointer; transition: transform 0.15s; }
.cl-sw:hover { transform: scale(1.15); }
.cl-sw.on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--bg-soft), 0 0 0 4px #fff; }

/* Sayfalar */
#cl-pages { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.cl-pg { position: relative; width: 58px; height: 58px; padding: 0; border-radius: 12px; border: 2px solid transparent; background: #fff; cursor: pointer; transition: transform 0.15s; }
.cl-pg img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; }
.cl-pg:hover { transform: translateY(-2px); }
.cl-pg.active { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.35); }
.cl-pg i { position: absolute; top: -8px; right: -8px; font-style: normal; font-size: 15px; }

.cl-demo { display: flex; justify-content: center; gap: 8px; margin: 6px 0; }
.cl-demo i { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); animation: cl-bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes cl-bob { 50% { transform: translateY(-8px); } }

/* Telefonda: araçlar ve palet tuvalin altında */
@media (max-width: 820px) {
  .cl-layout { flex-direction: column; align-items: center; }
  .cl-side { width: var(--bs); }
  .cl-tools { grid-template-columns: repeat(4, 1fr) 1.4fr; }
  .cl-tool.save { grid-column: auto; flex-direction: column; gap: 2px; font-size: 12.5px; padding: 8px 4px; }
  #cl-palette { grid-template-columns: repeat(12, 1fr); gap: 5px; padding: 8px; }
}
@media (max-width: 640px) {
  #cl { --bs: max(260px, min(560px, calc(100vw - 32px), calc(100dvh - 330px))); }
  .cl-tool b { font-size: 18px; }
  #cl-pages { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: var(--bs); padding: 8px 2px 6px; scrollbar-width: none; }
  #cl-pages::-webkit-scrollbar { display: none; }
  .cl-pg { flex: none; width: 50px; height: 50px; }
  .cl-tool span { font-size: 11px; }
  #cl-palette { grid-template-columns: repeat(8, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cl-ripple, .cl-demo i { animation: none; } }

/* Galerim */
.cl-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.cl-gal-i { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-soft-2); cursor: pointer; font-family: "Fredoka", sans-serif; transition: transform 0.15s, border-color 0.15s; }
.cl-gal-i:hover { transform: translateY(-2px); border-color: var(--violet); }
.cl-gal-i img { width: 100%; aspect-ratio: 1; border-radius: 9px; background: #fff; object-fit: cover; }
.cl-gal-bar { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.cl-gal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff4d6d, #ffb627, #38b000, #4cc9f0, #8b5cf6); }
.cl-gal-i small { font-size: 11.5px; color: var(--ink-dim); text-align: center; line-height: 1.2; }
.cl-gal-i em { position: absolute; top: 2px; right: 2px; font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 99px; background: rgba(20, 12, 46, 0.85); color: #fff; }
.cl-gal-i.done { border-color: rgba(255, 204, 51, 0.75); background: linear-gradient(180deg, rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.04)); }
.cl-gal-i.done small { color: #ffcc33; }
@media (max-width: 640px) { .cl-gal { grid-template-columns: repeat(3, 1fr); } }

/* İndir: değişiklik yokken soluk */
.cl-tool.save.off { filter: grayscale(0.6); opacity: 0.55; box-shadow: none; }
/* İndirme önizleme penceresi */
.g-card.cl-dl { width: min(400px, 100%); }
.cl-dl-prev { margin: 4px auto 12px; width: min(260px, 70vw); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px rgba(166, 123, 251, 0.45), 0 14px 30px rgba(0, 0, 0, 0.45); animation: cl-prev 0.5s cubic-bezier(.34,1.56,.64,1); }
.cl-dl-prev img { width: 100%; height: 100%; display: block; }
@keyframes cl-prev { from { transform: scale(0.8) rotate(-4deg); opacity: 0; } }
.cl-dl .g-end-main .btn svg { width: 17px; height: 17px; }
/* İndirme penceresi: daha ferah */
.g-card.cl-dl { padding: 28px 26px 24px; }
.cl-dl h3 { margin-bottom: 18px !important; }
.cl-dl-prev { margin: 0 auto 20px; }
.cl-dl p { margin: 0 0 20px !important; font-size: 15px; }
.cl-dl-yes { width: 100%; justify-content: center; font-size: 17px; padding: 14px 24px; }
/* İndirdiklerim: sıra numarası */
.g-row.cl-hrow { grid-template-columns: 30px 44px 1fr auto auto; }
.cl-hnum { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; color: var(--violet-bright); text-align: right; }
.g-row.cl-hrow.top .cl-hnum { color: #ffcc33; }
@media (max-width: 640px) { .g-row.cl-hrow { grid-template-columns: 26px 40px 1fr auto auto; gap: 7px; } }
/* "Sayfa silinsin mi?" penceresi: ferah */
.g-card.cl-ask { padding: 30px 26px 26px; }
.cl-ask-ic { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.cl-ask h3 { margin: 0 0 24px !important; }
.cl-ask .g-end-main { margin-bottom: 0; }
.cl-ask .g-end-main .btn { padding-top: 13px; padding-bottom: 13px; }