/* Verfdoos: overview + coloring screen (needs /shared/base.css). */
/* --- overview ------------------------------------------------------------------ */
#overview { display: flex; flex-direction: column; gap: 14px; background: linear-gradient(#bee6ff, #fff0c8); }
#overview header { display: flex; align-items: center; justify-content: center; position: relative; }
#home { position: absolute; left: 4px; top: 4px; --b: min(9vh, 74px); }
#tabs { display: flex; gap: clamp(8px, 2vw, 28px); flex-wrap: wrap; justify-content: center; padding: 8px 60px; }
.tab {
  width: clamp(96px, 14vw, 210px); aspect-ratio: 3 / 2; background: #fff; border-radius: 20px;
  border: 5px solid #fff; box-shadow: 0 5px 0 rgba(60, 40, 90, .18); overflow: hidden;
}
.tab img { width: 100%; height: 100%; object-fit: contain; }
.tab svg { width: 78%; height: 78%; }
.tab.selected { box-shadow: 0 0 0 7px var(--gold), 0 5px 0 rgba(60, 40, 90, .18); }
#grid {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 42vw), 1fr));
  gap: clamp(12px, 2.4vw, 30px); align-content: start;
  padding: clamp(12px, 2.4vw, 30px); background: #fff; border-radius: 34px; border: 7px solid var(--gold);
}
.card {
  position: relative; width: 100%; background: #fff; border-radius: 18px; overflow: hidden; display: block;
  border: 6px solid #eef1f8; box-shadow: 0 5px 0 rgba(60, 40, 90, .14);
}
.card canvas, .card img { width: 100%; height: auto; aspect-ratio: 3 / 2; display: block; object-fit: contain; }
.card .stars { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 2px; }
.card .stars svg { width: clamp(18px, 2.2vw, 30px); height: clamp(18px, 2.2vw, 30px); }
.empty { grid-column: 1 / -1; display: flex; justify-content: center; padding: 8vh 0; opacity: .5; }
.empty svg { width: 30vmin; height: 30vmin; }

/* --- coloring screen ------------------------------------------------------------- */
#paint {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(8px, 1.4vw, 18px);
  background: linear-gradient(#ffecc8, #ffcdaa);
}
.tools { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 0 6px; }
.tools .tool { background: #fff; }
.stage { position: relative; overflow: hidden; touch-action: none; border-radius: 18px; }
.sheet {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff;
  box-shadow: 0 0 0 8px #fff, 6px 10px 0 8px rgba(160, 110, 80, .35); border-radius: 4px;
}
.sheet canvas, .sheet img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sheet img { mix-blend-mode: multiply; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .6s; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ripple {
  position: absolute; width: 9%; aspect-ratio: 1; border: 6px solid; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; animation: ripple .45s ease-out forwards;
}
@keyframes ripple { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.zoomout { position: absolute; right: 12px; bottom: 12px; --b: min(9vh, 74px); }

.palette {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 8px;
  background: rgba(255, 250, 238, .9); border-radius: 28px; padding: 10px;
}
.swatches { display: grid; grid-template-columns: repeat(2, auto); gap: min(1.1vh, 10px) min(1vw, 12px); }
.swatch {
  width: calc(var(--b) * .72); height: calc(var(--b) * .72); border-radius: 50%;
  border: 4px solid #fff; box-shadow: 0 4px 0 rgba(60, 40, 90, .2); overflow: hidden;
}
.swatch svg { width: 100%; height: 100%; }
.swatch.selected { box-shadow: 0 0 0 6px var(--gold), 0 4px 0 rgba(60, 40, 90, .2); }
.potwrap { position: relative; }
.pot { width: calc(var(--b) * 1.7); height: calc(var(--b) * 1.15); border-radius: 26px; background: #fff; box-shadow: 0 5px 0 rgba(60, 40, 90, .2); }
.pot.selected { box-shadow: 0 0 0 7px var(--gold), 0 5px 0 rgba(60, 40, 90, .2); }
.bowl {
  position: relative; width: 82%; height: 62%; margin-top: 10%;
  background: #aa7850; border: 4px solid var(--ink); border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
}
.bowl .mix { position: absolute; left: 7%; right: 7%; top: 6%; height: 34%; border-radius: 50%; border: 3px solid var(--ink); }
.bowl.wobble { animation: wobble .5s; }
@keyframes wobble { 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
.potempty { position: absolute; right: -10px; top: -14px; --b: min(6vh, 48px); }

/* portrait (iPad upright): tools on top, palette at the bottom */
@media (orientation: portrait) {
  :root { --b: min(8.5vw, 6.5vh, 92px); }
  #paint { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .tools { flex-direction: row; padding: 6px 0; }
  .palette { flex-direction: row; }
  .swatches { grid-template-columns: repeat(9, auto); grid-auto-flow: row; }
}