/* ────────────────────────────────────────────────────────────
   games.css — per-game layouts.
   ──────────────────────────────────────────────────────────── */

/* every full-area game shares this frame */
#traceWrap,#colorWrap,#quranWrap,#puzzleWrap,#readWrap{
  display:none; flex-direction:column; align-items:center; gap:12px;
  width:min(580px,94vw);
}

/* ── tracing ────────────────────────────────────────────── */
#traceCanvas{
  background:var(--white); border-radius:26px;
  box-shadow:0 6px 0 rgba(58,58,86,.15); touch-action:none;
}

/* ── colouring ──────────────────────────────────────────── */
.color-pic svg{
  width:min(84vw,48vh,360px); height:auto; background:var(--white);
  border-radius:26px; box-shadow:0 6px 0 rgba(58,58,86,.15); display:block;
}
.color-pic .region{ cursor:pointer; transition:fill .15s; }
.palette{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:94vw; }
.swatch{
  width:44px; height:44px; border-radius:50%; border:4px solid var(--white);
  cursor:pointer; box-shadow:0 3px 0 rgba(58,58,86,.25);
}
.swatch.sel{ border-color:var(--ink); transform:scale(1.16); }

/* ── puzzles ────────────────────────────────────────────── */
.pz-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; }
.pz-card{
  border:none; border-radius:22px; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:bold; color:var(--ink); padding:16px 8px;
  box-shadow:0 6px 0 rgba(58,58,86,.18); transition:transform .12s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pz-card:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(58,58,86,.18); }

.pattern-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.pattern-q{ font-size:44px; font-weight:bold; color:#9A9AB8; }
.num-pattern{ font-size:clamp(22px,5.4vw,36px); font-weight:bold; letter-spacing:1px; }

.mem-grid{ display:grid; gap:9px; justify-content:center; }
.mem-card{
  border:none; border-radius:16px; background:var(--grape); cursor:pointer;
  width:min(20vw,80px); height:min(20vw,80px);
  box-shadow:0 5px 0 var(--shadow); transition:transform .15s;
  display:grid; place-items:center; padding:6px;
}
.mem-grid.dense .mem-card{ width:min(15vw,64px); height:min(15vw,64px); }
.mem-back{
  width:60%; height:60%; border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5);
}
.mem-card.open{ background:var(--white); transform:scale(1.05); }
.mem-card.done{ background:var(--mint); box-shadow:none; transform:scale(.94); cursor:default; }

.jig-grid{
  display:grid; gap:4px; background:var(--white); padding:8px;
  border-radius:20px; box-shadow:0 6px 0 rgba(58,58,86,.15);
}
.jig-tile{
  border:3px solid #EDEDF8; border-radius:10px; cursor:pointer; padding:0;
  background-repeat:no-repeat; transition:transform .12s;
}
.jig-tile.sel{ border-color:var(--sun); transform:scale(1.07); z-index:2; }

.pz-back{
  border:none; background:var(--white); border-radius:16px; padding:9px 20px;
  font-size:18px; cursor:pointer; box-shadow:0 4px 0 var(--shadow); font-family:inherit;
  color:var(--ink);
}

/* ── reading ────────────────────────────────────────────── */
.passage{
  background:var(--white); border-radius:20px; padding:16px 20px;
  font-size:clamp(16px,3.9vw,22px); line-height:1.55; text-align:center;
  max-width:92vw; box-shadow:0 5px 0 rgba(58,58,86,.12);
}
.gap-line{ font-weight:bold; letter-spacing:.4px; }
body[dir="rtl"] .passage{ font-family:var(--arabic); line-height:1.9; }

/* ── spelling ───────────────────────────────────────────── */
.spell-slots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.spell-slot{
  width:52px; height:62px; border-radius:14px; background:rgba(255,255,255,.55);
  border:3px dashed #A9A9C8; display:grid; place-items:center;
  font-size:30px; font-weight:bold;
}
.spell-slot.filled{ background:var(--mint); border-style:solid; border-color:var(--ink); }
.spell-tray{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:92vw; }
.letter-tile{
  border:none; border-radius:14px; background:var(--white);
  width:52px; height:58px; font-family:inherit; font-size:28px; font-weight:bold;
  color:var(--ink); cursor:pointer; box-shadow:0 5px 0 var(--shadow); transition:transform .12s;
}
.letter-tile:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--shadow); }
.letter-tile.used{ opacity:.28; box-shadow:none; transform:scale(.9); }
.letter-tile.wrong{ background:var(--coral); animation:shake .4s; }
body[dir="rtl"] .spell-slot,
body[dir="rtl"] .letter-tile{ font-family:var(--arabic); }

/* ── translation ────────────────────────────────────────── */
.translate-shown{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.translate-word{ font-size:clamp(26px,6.5vw,42px); font-weight:bold; text-align:center; }
.translate-flags{ display:flex; align-items:center; gap:12px; }
.tflag svg{ width:38px; height:28px; border-radius:6px; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.tarrow{ font-size:26px; color:#8B8BA8; }

/* ── Arabic literacy ────────────────────────────────────── */
.arabic-stage{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.arabic-letters{
  font-family:var(--arabic); font-size:clamp(30px,8vw,48px);
  letter-spacing:10px; font-weight:bold;
}
.arabic-meaning{ font-size:15px; color:#8B8BA8; }
.arabic-big{
  font-family:var(--arabic); font-size:clamp(46px,13vw,86px); font-weight:bold;
  background:var(--white); border-radius:24px; padding:18px 40px;
  box-shadow:0 6px 0 rgba(58,58,86,.15); line-height:1.5;
}
.arabic-reveal{
  visibility:hidden; text-align:center; background:rgba(255,255,255,.7);
  border-radius:16px; padding:10px 20px; min-height:58px;
}
.arabic-reveal.shown{ visibility:visible; }
.ar-translit{ font-size:22px; font-weight:bold; direction:ltr; }
.ar-meaning{ font-size:15px; color:#7A7A96; }

/* ── Quran ──────────────────────────────────────────────── */
.surah-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;
  max-height:62vh; overflow-y:auto; padding:2px; }
.surah-card{
  border:none; border-radius:20px; background:var(--white); cursor:pointer;
  font-family:inherit; color:var(--ink); padding:14px 10px;
  box-shadow:0 6px 0 rgba(58,58,86,.18); transition:transform .12s;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.surah-card:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(58,58,86,.18); }
.surah-ar{ font-family:var(--arabic); font-size:24px; font-weight:bold; direction:rtl; }
.surah-tr{ font-size:12px; color:#888; }
.surah-done{ font-size:13px; color:#C9A227; letter-spacing:2px; }

.ayah-box{
  background:var(--white); border-radius:22px; padding:16px 18px; width:100%;
  box-shadow:0 6px 0 rgba(58,58,86,.15); max-height:44vh; overflow-y:auto;
  direction:rtl; text-align:center;
}
.ayah-line{ font-family:var(--arabic); font-size:21px; line-height:2; color:#9A9AB8; margin:2px 0; }
.ayah-line.now{
  font-size:clamp(24px,6vw,36px); color:var(--ink);
  background:#FFF6D6; border-radius:14px; padding:6px 10px;
}
.ayah-line.hidden-ayah{ color:#C4C4DC; letter-spacing:6px; }
.basmala{ font-family:var(--arabic); font-size:17px; color:#B0A34A; direction:rtl; }
.ayah-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.adot{ width:12px; height:12px; border-radius:50%; background:#D9D9EC; }
.adot.on{ background:var(--sun); box-shadow:0 0 0 2px rgba(58,58,86,.15); }
.quran-actions{ display:flex; gap:10px; }
.q-btn{
  border:none; border-radius:18px; padding:12px 20px; font-family:inherit;
  font-size:22px; cursor:pointer; box-shadow:0 5px 0 var(--shadow); color:var(--ink);
}
.q-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--shadow); }
.q-replay{ background:var(--sun); }
.q-next{ background:var(--mint); font-weight:bold; }
.q-back{ background:var(--white); font-size:18px; }
.q-hide{ background:var(--white); }
.q-hide.on{ background:var(--grape); }
.q-note{ font-size:12px; color:#999; text-align:center; }

/* ── landscape tablets ──────────────────────────────────── */
@media (orientation:landscape) and (min-width:640px){
  .options{ width:min(640px,80vw); }
  .opt{ padding:12px 6px; font-size:clamp(26px,5.6vh,44px); }
  .opt.word{ font-size:clamp(15px,3vh,22px); }
  .opt.sentence{ font-size:clamp(13px,2.4vh,18px); }
  .emoji-stage{ max-height:30vh; padding:8px 16px; }
  .prompt{ font-size:clamp(17px,4vh,26px); padding:10px 20px; }
  .screen{ gap:9px; }
  .surah-list{ grid-template-columns:repeat(4,1fr); max-height:52vh; }
  .profile-avatar{ width:88px; height:88px; }
  .profile-avatar svg{ width:78px; height:78px; }
}

@media (max-width:380px){
  .options{ gap:9px; }
  .spell-slot,.letter-tile{ width:44px; }
}

/* ── manners ────────────────────────────────────────────── */
.scene{ display:flex; flex-direction:column; align-items:center; gap:8px; max-width:88vw; }
.scene-text{
  font-size:clamp(15px,3.6vw,21px); line-height:1.45; text-align:center;
  max-width:80vw; font-weight:bold;
}
body[dir="rtl"] .scene-text{ line-height:1.75; }
.why-note{
  margin-top:8px; font-size:clamp(13px,3vw,16px); font-weight:normal;
  line-height:1.4; text-align:center; color:#4A4A6B;
  background:#FFF6D6; border-radius:14px; padding:9px 14px; max-width:78vw;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.why-note.in{ opacity:1; transform:translateY(0); }

/* ── conversation ───────────────────────────────────────── */
.chat-box{
  display:flex; flex-direction:column; gap:8px;
  width:min(520px,90vw); max-height:34vh; overflow-y:auto; padding:4px 2px;
}
.bubble-row{ display:flex; align-items:flex-end; gap:6px; }
.bubble-row.them{ justify-content:flex-start; }
.bubble-row.me{ justify-content:flex-end; }
.bubble-face{ flex-shrink:0; align-self:flex-end; }
.bubble{
  max-width:78%; padding:9px 14px; border-radius:18px;
  font-size:clamp(14px,3.3vw,18px); line-height:1.4; text-align:start;
  box-shadow:0 3px 0 rgba(58,58,86,.12);
}
.bubble.them{ background:#FFFFFF; border-bottom-left-radius:6px; }
.bubble.me{ background:var(--mint); border-bottom-right-radius:6px; font-weight:bold; }
body[dir="rtl"] .bubble.them{ border-bottom-left-radius:18px; border-bottom-right-radius:6px; }
body[dir="rtl"] .bubble.me{ border-bottom-right-radius:18px; border-bottom-left-radius:6px; }
@media (orientation:landscape) and (min-width:640px){
  .chat-box{ max-height:28vh; }
  .bubble{ font-size:clamp(13px,2.5vh,16px); }
  .scene-text{ font-size:clamp(14px,2.8vh,18px); }
}

/* ── recitation follow-along ────────────────────────────── */
.ayah-line .w{
  display:inline-block; border-radius:8px; padding:0 3px;
  transition:background .12s ease, color .12s ease, transform .12s ease;
}
.ayah-line.now .w.now{
  background:var(--sun); color:var(--ink);
  transform:scale(1.06); box-shadow:0 2px 0 rgba(58,58,86,.18);
}
/* verses with no per-word data glow as a whole line instead */
.ayah-line.reciting{ box-shadow:0 0 0 3px var(--sun) inset; }
.ayah-num{ color:#B0A34A; font-size:.8em; }
@media (prefers-reduced-motion:reduce){
  .ayah-line .w{ transition:none; }
  .ayah-line.now .w.now{ transform:none; }
}

/* ── Arabic letters ─────────────────────────────────────── */
.arl-big{
  font-family:var(--arabic); font-size:clamp(70px,18vw,120px); font-weight:bold;
  line-height:1.25; background:var(--white); border-radius:26px;
  padding:6px 46px; box-shadow:0 6px 0 rgba(58,58,86,.15); cursor:pointer;
}
.arl-big.small{ font-size:clamp(48px,12vw,84px); padding:2px 34px; }
.arl-forms{ display:flex; gap:10px; justify-content:center; }
.arl-form{
  background:rgba(255,255,255,.72); border-radius:16px; padding:8px 16px;
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:74px;
}
.arl-form-glyph{ font-family:var(--arabic); font-size:34px; font-weight:bold; }
.arl-form-label{ font-size:11px; color:#8B8BA8; }
.arl-note{ font-size:12px; color:#8B8BA8; text-align:center; max-width:80vw; }
.arl-words{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.arl-word{
  border:none; background:var(--white); border-radius:20px; cursor:pointer;
  font-family:inherit; color:var(--ink); padding:10px 12px; min-width:96px;
  box-shadow:0 5px 0 rgba(58,58,86,.16); transition:transform .12s;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.arl-word:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(58,58,86,.16); }
.arl-word-ar{ font-family:var(--arabic); font-size:26px; font-weight:bold; }
.arl-word-tr{ font-size:12px; color:#8B8BA8; direction:ltr; }
.arl-word-me{ font-size:13px; }
.arl-quiz{ display:flex; flex-direction:column; align-items:center; gap:6px; }
@media (orientation:landscape) and (min-width:640px){
  .arl-big{ font-size:clamp(52px,11vh,90px); padding:4px 34px; }
  .arl-form-glyph{ font-size:28px; }
  .arl-word{ padding:8px 10px; min-width:86px; }
}

/* the manners illustration carries the situation for a non-reader */
.scene-frame{
  background:var(--white); border-radius:26px; padding:12px 26px;
  box-shadow:0 6px 0 rgba(58,58,86,.14); cursor:pointer;
  display:grid; place-items:center; transition:transform .12s;
}
.scene-frame:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(58,58,86,.14); }
@media (orientation:landscape) and (min-width:640px){
  .scene-frame{ padding:8px 22px; }
  .scene-frame .ico{ width:84px !important; height:84px !important; }
}

/* ── school ─────────────────────────────────────────────── */
#readWrap.school{ gap:10px; }
.school-head{ font-size:14px; color:#7A7A96; font-weight:bold; }
.school-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; }
.school-card{
  border:none; border-radius:22px; cursor:pointer; font-family:inherit;
  color:var(--ink); padding:14px 8px; box-shadow:0 6px 0 rgba(58,58,86,.18);
  display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform .12s;
}
.school-card:active{ transform:translateY(3px); box-shadow:0 3px 0 rgba(58,58,86,.18); }
.school-card-name{ font-size:15px; font-weight:bold; text-align:center; line-height:1.2; }

.topic-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
.topic-row{
  border:none; background:var(--white); border-radius:16px; cursor:pointer;
  font-family:inherit; color:var(--ink); padding:12px 14px;
  box-shadow:0 4px 0 rgba(58,58,86,.14);
  display:flex; align-items:center; gap:12px; text-align:start;
}
.topic-row:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(58,58,86,.14); }
.topic-name{ flex:1; font-size:15px; font-weight:bold; }
.topic-meta{ font-size:12px; color:#8B8BA8; min-width:38px; text-align:end; }

.mastery{
  width:70px; height:8px; border-radius:999px; background:#E8E8F4;
  overflow:hidden; flex-shrink:0;
}
.mastery-fill{ display:block; height:100%; border-radius:999px; background:var(--mint); }
.mastery.weak .mastery-fill{ background:var(--coral); }
.mastery.strong .mastery-fill{ background:var(--mint); }
.mastery.untried{ background:#EFEFF7; }
.school-card .mastery{ width:80%; }

.school-q{
  font-size:clamp(20px,5vw,30px); font-weight:bold; text-align:center;
  line-height:1.5; max-width:90vw;
}
body[dir="rtl"] .school-q{ font-family:var(--arabic); line-height:1.8; }
.school-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; }
@media (orientation:landscape) and (min-width:640px){
  .school-grid{ grid-template-columns:repeat(3,1fr); }
  .school-q{ font-size:clamp(18px,4vh,26px); }
  .topic-list{ max-height:44vh; overflow-y:auto; }
}

/* ── watching a sum happen ───────────────────────────────
   For the first two difficulty steps the pictures arrive one at a
   time, at counting speed, so a child sees the number being built
   rather than a finished pile they have to count themselves.
   ─────────────────────────────────────────────────────── */

@keyframes countPop{
  0%  { transform:scale(0)    rotate(-20deg); opacity:0; }
  62% { transform:scale(1.22) rotate(6deg);   opacity:1; }
  100%{ transform:scale(1)    rotate(0);      opacity:1; }
}
.icon-row.count-in > *{
  animation:countPop .44s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * .3s);
}

/* addition: the two groups lean toward each other as they land */
@keyframes leanRight{ from{ transform:translateX(-14px); } to{ transform:none; } }
@keyframes leanLeft { from{ transform:translateX(14px);  } to{ transform:none; } }
.icon-sum.joining > .icon-row:first-child{ animation:leanRight .5s ease .2s backwards; }
.icon-sum.joining > .icon-row:last-child { animation:leanLeft  .5s ease .2s backwards; }
.icon-sum.joining .sum-op{ animation:countPop .4s ease .15s backwards; }

/* subtraction: the ones taken away fall out of the picture */
@keyframes takeAway{
  0%  { transform:none;                                   opacity:1; }
  55% { transform:translateY(-8px) rotate(-8deg);         opacity:1; }
  100%{ transform:translateY(46px) rotate(22deg) scale(.6); opacity:0; }
}
.icon-takeaway{ display:flex; justify-content:center; overflow:visible; }
.icon-takeaway .taken{
  animation:takeAway .85s ease forwards;
  /* after every picture has arrived, then they leave, one by one */
  animation-delay:calc(1.1s + var(--i, 0) * .12s + var(--away, 0) * .28s);
}

/* ── a picture for a school question ─────────────────────── */

.qa-box{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.qa-cap{ font-size:15px; color:#5B5B7A; direction:ltr; }

.qa-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--sky-deep, #4FC3F7);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
  animation:countPop .34s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * .045s);
}
.qa-run .qa-dot.gone{
  animation:countPop .34s cubic-bezier(.34,1.56,.64,1) backwards,
            takeAway .8s ease calc(1.2s + var(--i, 0) * .08s) forwards;
}
.qa-run.alt .qa-dot, .qa-dot.alt{ background:#FFB74D; }

.qa-grid{ display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:7px; }
.qa-run{ display:flex; flex-wrap:wrap; gap:7px; max-width:340px; justify-content:center; }
.qa-groups{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.qa-group{
  display:flex; flex-wrap:wrap; gap:6px; max-width:120px; justify-content:center;
  padding:8px; border-radius:14px; background:rgba(255,255,255,.65);
  border:2px dashed #C9D9E8;
}
.qa-sum{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.qa-op{ font-size:24px; color:#5B5B7A; }

.qa-hundred{
  display:grid; grid-template-columns:repeat(10, 1fr); gap:3px;
}
.qa-hundred .qa-dot{ width:11px; height:11px; border-radius:3px; animation-delay:calc(var(--i,0) * .008s); }
.qa-hundred .qa-dot.off{ background:#E2E2EE; box-shadow:none; }

.qa-bar{ display:flex; gap:3px; }
.qa-part{
  width:34px; height:44px; border-radius:6px; background:#E2E2EE;
  animation:countPop .3s ease backwards; animation-delay:calc(var(--i,0) * .07s);
}
.qa-part.on{ background:#7EE8B2; }

.qa-clock{ width:132px; height:132px; }

.school-stage{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.qa-line{ display:flex; gap:6px; align-items:center; }
.qa-tick{
  min-width:34px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:#EDF4FB; color:#3A3A56; font-size:17px;
  border:2px solid #D3E3F1; direction:ltr;
  animation:countPop .3s ease backwards; animation-delay:calc(var(--i,0) * .06s);
}
.qa-tick.on{ background:#FFE9A8; border-color:#F0C93B; font-weight:bold; }
.qa-tick.ask{ background:#7EE8B2; border-color:#3AA76D; font-weight:bold; }

.qa-compare{ display:flex; gap:26px; align-items:flex-end; }
.qa-stack-holder{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.qa-stack{ display:flex; flex-direction:column-reverse; gap:4px; align-items:center; }

.qa-shape{ width:118px; height:118px; animation:countPop .4s ease backwards; }

.qa-measure{ display:flex; flex-direction:column; gap:10px; }
.qa-mrow{ display:flex; align-items:center; gap:9px; }
.qa-mbar{ height:18px; border-radius:9px; }
.qa-mbar.big{ background:#4FC3F7; }
.qa-mbar.small{ background:#FFB74D; }

.school-mark{
  animation:countPop .45s cubic-bezier(.34,1.56,.64,1) backwards;
  opacity:.92;
}

/* ── the discovery worlds ────────────────────────────────────
   Flags, seasons and the paint studio. Everything else in these five
   modules reuses the shared prompt and answer grid.
   ──────────────────────────────────────────────────────────── */

/* a flag is a picture with a hard edge — it must not inherit the
   round corners the rest of the app uses, or Japan becomes a pill */
.flag-pic{ display:block; line-height:0; }
.flag-pic svg{
  width:100%; height:auto; display:block;
  border-radius:4px; box-shadow:0 3px 10px var(--shadow);
}
.opt.flag-opt{ padding:14px; display:grid; place-items:center; }
.opt.flag-opt .flag-pic{ width:100%; max-width:120px; }

/* a season answer is an icon above its name */
.opt .season-name{
  display:block; margin-top:6px;
  font-size:clamp(14px,3.4vw,19px); line-height:1.15;
}
.options .opt:has(.season-name){ padding:14px 8px; }

/* ── the paint studio ── */

.paint-wrap{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:min(760px,96vw); flex:1; min-height:0;
}
.paint-canvas{
  flex:1; width:100%; min-height:0;
  border-radius:var(--r-lg); background:#fff;
  box-shadow:inset 0 0 0 3px var(--surface-4), 0 8px 22px var(--shadow);
  touch-action:none;                 /* the finger draws; it never scrolls */
  cursor:crosshair;
}
.paint-tools{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:100%; padding-bottom:4px;
}
.paint-palette{
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
}
.paint-palette .swatch{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:3px solid var(--white);
  box-shadow:0 3px 0 var(--shadow);
  transition:transform .12s;
}
.paint-palette .swatch.sel{ transform:scale(1.18); box-shadow:0 0 0 3px var(--vibrant); }
.paint-palette .swatch:active{ transform:scale(1.05); }

.brush-btn{ display:grid; place-items:center; }
.brush-btn .brush-dot{ border-radius:50%; background:var(--ink); display:block; }
.brush-btn.sel{ background:var(--sunshine); }
.brush-btn svg{ width:26px; height:26px; }

@media (max-width:700px){
  .paint-palette .swatch{ width:34px; height:34px; }
}