/* Cosmo Color. Unidade --s: 1/100 da largura útil (deitado: tela 16:9 = 100 x 56,25; em pé: 100 x ~170). */
:root {
  --s: min(1vw, 1.7778vh);
  --ink: #3b2a63;
  --panel: #fbfaff;
}
@media (orientation: portrait) {
  :root {
    --s: min(1vw, 0.6vh);
  }
}
@supports (height: 1dvh) {
  :root {
    --s: min(1vw, 1.7778dvh);
  }
  @media (orientation: portrait) {
    :root {
      --s: min(1vw, 0.6dvh);
    }
  }
} /* navegador sem dvh fica no vh */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #6fc3ff;
  overscroll-behavior: none;
}
body {
  font-family: ui-rounded, 'Arial Rounded MT Bold', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
img {
  display: block;
  -webkit-user-drag: none;
}
[hidden] {
  display: none !important;
}
#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.bg {
  position: absolute;
  inset: 0;
  background: url(../assets/ui/bg-land.webp) center/cover;
  transition: filter 0.3s;
}
@media (orientation: portrait) {
  .bg {
    background-image: url(../assets/ui/bg-port.webp);
  }
}
#app[data-screen='gallery'] .bg {
  background-image: url(../assets/ui/bg-galeria.webp);
}
@media (orientation: portrait) {
  #app[data-screen='gallery'] .bg {
    background-image: url(../assets/ui/bg-galeria-port.webp);
  }
}
#app[data-screen='paint'] .bg {
  filter: saturate(0.85) brightness(1.04);
}
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 60;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s,
    visibility 0s 0.16s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app[data-screen='home'] #home,
#app[data-screen='choose'] #choose,
#app[data-screen='paint'] #paint,
#app[data-screen='done'] #done,
#app[data-screen='gallery'] #gallery {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* botões de imagem: proporção sempre da própria imagem, nunca esticados */
.ib {
  width: calc(var(--s) * 7.5);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 calc(var(--s) * 0.5) calc(var(--s) * 0.4) rgba(40, 60, 120, 0.28));
  transition: transform 0.12s;
}
.ib img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ib:active {
  transform: scale(0.92);
}
.corner {
  position: absolute;
  top: calc(var(--s) * 1.6 + env(safe-area-inset-top));
  display: flex;
  gap: calc(var(--s) * 1.2);
  z-index: 5;
  align-items: center;
}
.corner.tl {
  left: calc(var(--s) * 1.6 + env(safe-area-inset-left));
}
.corner.tr {
  right: calc(var(--s) * 1.6 + env(safe-area-inset-right));
}

/* ---------- mascote ---------- */
#mascot {
  position: absolute;
  z-index: 20;
  width: calc(var(--s) * var(--mw, 24));
  aspect-ratio: 1;
  left: calc(50% + var(--s) * var(--mx, -34));
  top: calc(50% + var(--s) * var(--my, -8));
  transition:
    left 0.45s cubic-bezier(0.3, 1.3, 0.5, 1),
    top 0.45s cubic-bezier(0.3, 1.3, 0.5, 1),
    width 0.45s;
  cursor: pointer;
}
#mascot img {
  height: 100%;
  width: auto;
  max-width: none;
  transform-origin: 50% 100%;
  pointer-events: none;
}
#app[data-screen='home'] #mascot {
  --mw: 34;
  --mx: -40;
  --my: -13.5;
}
#app[data-screen='choose'] #mascot {
  pointer-events: none;
  --mw: 8;
  left: auto;
  right: calc(var(--s) * 0.3);
  top: auto;
  bottom: calc(var(--s) * 1);
}
#app[data-screen='paint'] #mascot {
  --mw: 11;
  left: auto;
  right: calc(var(--s) * 10.5 + env(safe-area-inset-right));
  top: auto;
  bottom: calc(var(--s) * 36.6 + env(safe-area-inset-bottom));
  pointer-events: none;
} /* em pé em cima da paleta, fora do papel */
#app[data-screen='done'] #mascot {
  --mw: 24;
  --mx: -46;
  --my: -4;
}
#app[data-screen='gallery'] #mascot {
  --mw: 14;
  left: auto;
  right: calc(var(--s) * 1.5);
  top: auto;
  bottom: calc(var(--s) * 2);
}
@media (orientation: portrait) {
  #app[data-screen='home'] #mascot {
    --mw: 70;
    --mx: -35;
    --my: -34;
  }
  #app[data-screen='choose'] #mascot {
    --mw: 17;
    left: calc(50% - var(--s) * 8.5);
    right: auto;
    bottom: auto;
    top: calc(var(--s) * 1.5 + env(safe-area-inset-top));
  }
  #app[data-screen='paint'] #mascot {
    --mw: 38;
    --mx: -50;
    left: calc(50% + var(--s) * var(--mx));
    right: auto;
    top: auto;
    bottom: calc(var(--s) * 55);
  }
  #app[data-screen='done'] #mascot {
    --mw: 50;
    --mx: -25;
    top: auto;
    bottom: calc(var(--s) * 39);
  }
  #app[data-screen='gallery'] #mascot {
    --mw: 32;
    --mx: 16;
    top: auto;
    bottom: calc(var(--s) * 2);
  }
}

/* ---------- início ---------- */
.logo {
  position: absolute;
  left: 50%;
  top: calc(var(--s) * 1.5);
  width: calc(var(--s) * 34);
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(var(--s) * 0.6) calc(var(--s) * 0.6) rgba(40, 60, 120, 0.25));
  animation: bob 4s ease-in-out infinite;
}
.play {
  position: absolute;
  left: calc(50% + var(--s) * 8);
  top: calc(50% - var(--s) * 4);
  width: calc(var(--s) * 23);
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    scale: 1.05;
  }
}
@keyframes bob {
  50% {
    translate: 0 calc(var(--s) * -0.8);
  }
}
@media (orientation: portrait) {
  .logo {
    width: calc(var(--s) * 78);
    top: calc(var(--s) * 20);
  }
  .ib.play {
    left: calc(50% - var(--s) * 19);
    top: auto;
    bottom: calc(var(--s) * 16);
    width: calc(var(--s) * 38);
  }
  .ib {
    width: calc(var(--s) * 13.5);
  }
  .corner {
    gap: calc(var(--s) * 2);
    top: calc(var(--s) * 2.5 + env(safe-area-inset-top));
  }
  .corner.tl {
    left: calc(var(--s) * 2.5);
  }
  .corner.tr {
    right: calc(var(--s) * 2.5);
  }
}

/* ---------- escolher ---------- */
.tabbar {
  position: absolute;
  top: calc(var(--s) * 1 + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(var(--s) * 1);
  z-index: 4;
}
.arrow {
  width: calc(var(--s) * 6.4);
  flex: none;
}
.arrow.prev img {
  transform: scaleX(-1);
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs {
  position: relative;
  width: calc(var(--s) * 57.2);
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x;
  display: flex;
  gap: calc(var(--s) * 1.6);
  padding: calc(var(--s) * 1.5) calc(var(--s) * 2.4);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 99px;
  box-shadow:
    0 calc(var(--s) * 0.5) calc(var(--s) * 1.2) rgba(40, 60, 120, 0.2),
    inset 0 0 0 calc(var(--s) * 0.3) #fff;
}
.tab {
  flex: none;
  width: calc(var(--s) * 7.4);
  opacity: 0.78;
  transition:
    transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1),
    opacity 0.2s;
}
.tab.on {
  opacity: 1;
  transform: scale(1.15);
  filter: drop-shadow(0 0 calc(var(--s) * 0.8) #ffe14a)
    drop-shadow(0 calc(var(--s) * 0.5) calc(var(--s) * 0.4) rgba(40, 60, 120, 0.3));
}
.grid {
  --cw: min(calc(var(--s) * 18), calc((100dvh - var(--s) * 15.5) / 2.25));
  position: absolute;
  inset: calc(var(--s) * 13) 0 calc(var(--s) * 2.5) 0;
  display: grid;
  grid-template-columns: repeat(4, var(--cw));
  justify-content: center;
  align-content: center;
  gap: calc(var(--cw) * 0.24) calc(var(--cw) * 0.22);
}
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3.75;
  display: block;
  transition: transform 0.14s;
}
.card:active {
  transform: scale(0.95);
}
.card .paper {
  position: absolute;
  inset: 0 4% 24%;
  background: #fff;
  border-radius: calc(var(--s) * 1.6);
  border: calc(var(--s) * 0.45) solid #fff;
  box-shadow:
    0 0 0 calc(var(--s) * 0.25) #e9d9b8,
    0 calc(var(--s) * 0.9) calc(var(--s) * 1.2) rgba(40, 60, 120, 0.28);
  overflow: hidden;
  z-index: 1;
}
.card .paper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.isle {
  position: absolute;
  left: -13%;
  width: 126%;
  top: 69%;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--s) * 0.6) calc(var(--s) * 0.7) rgba(40, 60, 120, 0.28));
} /* a folha repousa na grama da ilha */
.card .medal {
  position: absolute;
  right: -6%;
  top: -9%;
  width: 30%;
  z-index: 2;
  filter: drop-shadow(0 calc(var(--s) * 0.3) calc(var(--s) * 0.3) rgba(0, 0, 0, 0.3));
}
@media (orientation: portrait) {
  .tabbar {
    top: calc(var(--s) * 19 + env(safe-area-inset-top));
  }
  .arrow {
    width: calc(var(--s) * 13.5);
  }
  .tabs {
    width: calc(var(--s) * 64);
    gap: calc(var(--s) * 2);
    padding: calc(var(--s) * 2.4) calc(var(--s) * 3);
  }
  .tab {
    width: calc(var(--s) * 13);
  }
  .grid {
    --cw: min(calc(var(--s) * 38), calc((100dvh - var(--s) * 48) / 4.8));
    inset: calc(var(--s) * 41) 0 calc(var(--s) * 4) 0;
    grid-template-columns: repeat(2, var(--cw));
  }
}

/* ---------- pintar ---------- */
#paint {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'tools stage pal';
  gap: calc(var(--s) * 1.2);
  padding: calc(var(--s) * 1.2 + env(safe-area-inset-top)) calc(var(--s) * 1.2 + env(safe-area-inset-right))
    calc(var(--s) * 1.2 + env(safe-area-inset-bottom)) calc(var(--s) * 1.2 + env(safe-area-inset-left));
  padding-top: calc(var(--s) * 10.2 + env(safe-area-inset-top));
}
.stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  margin-top: calc(var(--s) * -8.6);
}
.easel {
  position: absolute;
  transform-origin: 50% 90%;
}
.easel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(40, 60, 120, 0.3));
}
.sheet {
  position: absolute;
  left: 8.24%;
  top: 24.98%;
  width: 83.62%;
  height: 55.08%;
  background: #fff;
  display: grid;
  place-items: center;
  border-radius: 7% / 10%;
  overflow: hidden;
}
.view {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.tools {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) * 0.9);
  align-self: center;
  padding: calc(var(--s) * 0.8);
  background: rgba(255, 255, 255, 0.55);
  border-radius: calc(var(--s) * 2.4);
  box-shadow: inset 0 0 0 calc(var(--s) * 0.25) rgba(255, 255, 255, 0.9);
  z-index: 3;
}
.tool {
  width: calc(var(--s) * 7.6);
  border-radius: 22%;
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tool.on {
  transform: scale(1.14);
  filter: drop-shadow(0 0 calc(var(--s) * 0.9) #ffe14a) drop-shadow(0 0 calc(var(--s) * 0.3) #fff);
  z-index: 1;
}
.trash {
  width: calc(var(--s) * 7.2);
  margin-right: calc(var(--s) * 1.4);
}
.trash img {
  filter: none;
} /* apagar é laranja-avermelhado, não o verde do "sim" */
.undo.off {
  filter: saturate(0.2) brightness(1.08);
}
.donebtn.sleepy {
  filter: saturate(0.2) brightness(1.08);
} /* apagado e opaco: não se mistura com o fundo */
.donebtn.ready {
  animation: breathe 1s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(var(--s) * 1.2) #ffe14a);
}
.palette {
  grid-area: pal;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--s) * 0.65) calc(var(--s) * 0.9);
  padding: calc(var(--s) * 1.2) calc(var(--s) * 1.3);
  background: radial-gradient(circle at 30% 20%, #fff, #f1ecff);
  border-radius: calc(var(--s) * 4.5);
  box-shadow:
    0 calc(var(--s) * 0.6) calc(var(--s) * 1.2) rgba(40, 60, 120, 0.25),
    inset 0 calc(var(--s) * -0.5) 0 #dcd3f5;
  z-index: 3;
}
.pot {
  --c: #f00;
  width: calc(var(--s) * 8.2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    inset 0 calc(var(--s) * -0.35) 0 #d9d2ee,
    0 calc(var(--s) * 0.3) calc(var(--s) * 0.4) rgba(40, 60, 120, 0.25);
  display: grid;
  place-items: center;
  transition: transform 0.18s cubic-bezier(0.3, 1.8, 0.5, 1);
  position: relative;
}
.pot i {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%), var(--c);
  box-shadow: inset 0 0 0 calc(var(--s) * 0.15) rgba(0, 0, 0, 0.12);
}
.pot[data-fx='rainbow'] i,
.pot.more i {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 9%, rgba(255, 255, 255, 0) 24%),
    conic-gradient(#ff4d5e, #ff9a2e, #ffe14a, #55d86b, #3fa9ff, #9b6bff, #ff7fd0, #ff4d5e);
}
.pot[data-fx='glitter'] i {
  background:
    radial-gradient(circle at 32% 26%, #fff 0 9%, transparent 24%),
    radial-gradient(circle, #fff6c9 1px, transparent 2px) 0 0/7px 7px,
    radial-gradient(circle, #d99a12 1px, transparent 2px) 3px 4px/9px 9px,
    #f5b82e;
}
.pot[data-fx='pastel'] i {
  background:
    radial-gradient(circle at 32% 26%, #fff 0 9%, transparent 24%),
    radial-gradient(circle, #fff 1px, transparent 2px) 0 0/8px 8px,
    linear-gradient(135deg, #ffc8e8, #c9d8ff, #ffc8e8);
}
.pot[data-fx='dots'] i {
  background:
    radial-gradient(circle at 32% 26%, #fff 0 9%, transparent 24%),
    radial-gradient(circle, #fff 28%, transparent 30%) 0 0/34% 34%,
    #ff7fb6;
}
.pot.more::after {
  content: '+';
  position: absolute;
  font-size: calc(var(--s) * 3.4);
  color: #fff;
  text-shadow: 0 0 calc(var(--s) * 0.5) rgba(60, 30, 120, 0.8);
  line-height: 1;
}
.pot.on {
  transform: scale(1.2);
  box-shadow:
    0 0 0 calc(var(--s) * 0.45) #ffd92e,
    0 0 calc(var(--s) * 1.4) #ffe14a,
    0 calc(var(--s) * 0.3) calc(var(--s) * 0.4) rgba(40, 60, 120, 0.25);
  z-index: 1;
}
.zoomout {
  position: absolute;
  right: calc(var(--s) * 1);
  bottom: calc(var(--s) * 1);
  width: calc(var(--s) * 6.4);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #9fe0ff, #2f8bff);
  color: #fff;
  font-size: calc(var(--s) * 3.6);
  box-shadow:
    0 calc(var(--s) * 0.4) calc(var(--s) * 0.6) rgba(40, 60, 120, 0.35),
    inset 0 0 0 calc(var(--s) * 0.35) #fff;
  z-index: 4;
  animation: pop 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pop {
  from {
    scale: 0;
  }
}
.hint {
  position: absolute;
  left: 50%;
  top: 42%;
  width: calc(var(--s) * 9);
  aspect-ratio: 1;
  margin: calc(var(--s) * -4.5);
  border-radius: 50%;
  border: calc(var(--s) * 0.6) solid #ffd92e;
  pointer-events: none;
  animation: hint 1.3s ease-out infinite;
  z-index: 4;
}
@keyframes hint {
  from {
    scale: 0.3;
    opacity: 1;
  }
  to {
    scale: 1.3;
    opacity: 0;
  }
}
.drawer {
  position: absolute;
  right: calc(var(--s) * 1.2);
  top: calc(var(--s) * 10.4);
  bottom: calc(var(--s) * 1.2);
  align-content: center;
  overflow-y: auto;
  touch-action: pan-y;
  scrollbar-width: none;
  width: calc(var(--s) * 30.5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--s) * 0.5);
  padding: calc(var(--s) * 5) calc(var(--s) * 1.4) calc(var(--s) * 1.2);
  background: var(--panel);
  border-radius: calc(var(--s) * 4);
  box-shadow:
    0 0 0 calc(var(--s) * 0.5) #fff,
    0 0 0 calc(var(--s) * 0.9) #cdbdf7,
    0 calc(var(--s) * 1.2) calc(var(--s) * 3) rgba(40, 40, 110, 0.4);
  z-index: 30;
  transform-origin: 100% 50%;
}
.drawer .closex {
  right: calc(var(--m) * 0.7);
  top: calc(var(--m) * 0.5);
  width: calc(var(--m) * 4.6);
}
.drawer .item {
  aspect-ratio: 1;
  width: 100%;
  justify-self: center;
  border-radius: 22%;
  padding: 3%;
  transition: transform 0.12s;
}
.drawer .item:active {
  transform: scale(0.88);
}
.drawer .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drawer.stamp .item {
  background: #f1ecff;
  padding: 16%;
}
.drawer.stamp .item img {
  opacity: 0.8;
}
@media (orientation: portrait) {
  #paint {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas: 'stage' 'pal' 'tools';
    padding: calc(var(--s) * 2);
    padding-bottom: calc(var(--s) * 4 + env(safe-area-inset-bottom));
    padding-top: calc(var(--s) * 18.5 + env(safe-area-inset-top));
    gap: calc(var(--s) * 2);
  }
  .stage {
    margin-top: calc(var(--s) * -4);
  }
  .tools {
    flex-direction: row;
    justify-content: center;
    gap: calc(var(--s) * 2);
    padding: calc(var(--s) * 1.5);
    justify-self: center;
  }
  .tool {
    width: calc(var(--s) * 15.4);
  }
  .trash {
    width: calc(var(--s) * 11.5);
    margin-right: 0;
  }
  .palette {
    grid-template-columns: repeat(6, 1fr);
    gap: calc(var(--s) * 1.3);
    padding: calc(var(--s) * 2) calc(var(--s) * 2.4);
    justify-self: center;
    border-radius: calc(var(--s) * 7);
  }
  .pot {
    width: calc(var(--s) * 13.8);
  }
  .drawer .item {
    max-height: none;
  }
  .pot.more::after {
    font-size: calc(var(--s) * 7);
  }
  .zoomout {
    width: calc(var(--s) * 12);
    font-size: calc(var(--s) * 7);
  }
  .hint {
    width: calc(var(--s) * 18);
    margin: calc(var(--s) * -9);
  }
  .drawer {
    right: 50%;
    translate: 50% 0;
    top: auto;
    bottom: calc(var(--s) * 1.5);
    width: calc(var(--s) * 96);
    grid-template-columns: repeat(6, 1fr);
    gap: calc(var(--s) * 0.6);
    padding: calc(var(--s) * 9) calc(var(--s) * 2) calc(var(--s) * 2);
    border-radius: calc(var(--s) * 7);
    transform-origin: 50% 100%;
  }
}

/* ---------- terminei ---------- */
#done {
  display: grid;
  place-items: center;
}
.goldframe {
  position: absolute;
  left: 50%;
  top: 53%;
  width: calc(var(--s) * 46);
  translate: -50% -50%;
  padding: calc(var(--s) * 1.3);
  border-radius: calc(var(--s) * 2.2);
  background: linear-gradient(135deg, #ffe27a, #f5a623 45%, #ffd95e 60%, #e08a12);
  box-shadow:
    inset 0 0 0 calc(var(--s) * 0.35) #fff3b8,
    0 calc(var(--s) * 1.2) calc(var(--s) * 2.4) rgba(40, 40, 110, 0.4);
  z-index: 2;
}
.goldframe canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--s) * 1.1);
  background: #fff;
}
.rays {
  position: absolute;
  left: 50%;
  top: 53%;
  width: calc(var(--s) * 92);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.6) 0 9deg, rgba(255, 255, 255, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 96%);
  mask: radial-gradient(closest-side, #000 25%, transparent 96%);
  opacity: 0;
  z-index: 1;
  animation: spin 40s linear infinite;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
.stars {
  position: absolute;
  left: 50%;
  top: 53%;
  translate: -50% calc(var(--s) * -24);
  display: flex;
  gap: calc(var(--s) * 1.5);
  z-index: 3;
}
.star {
  width: calc(var(--s) * 9);
  opacity: 0;
}
.star:nth-child(2) {
  width: calc(var(--s) * 11.5);
  margin-top: calc(var(--s) * -3);
}
.endbtns {
  pointer-events: none;
  position: absolute;
  left: calc(50% + var(--s) * 27.5);
  top: 53%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--s) * 2);
  align-items: center;
  opacity: 0;
  z-index: 3;
}
.endbtns .ib {
  width: calc(var(--s) * 9.5);
}
.endbtns .big {
  width: calc(var(--s) * 13);
}
#done.fin .rays,
#done.fin .star,
#done.fin .endbtns {
  opacity: 1;
  pointer-events: auto;
}
@media (orientation: portrait) {
  .goldframe {
    width: calc(var(--s) * 86);
    top: 38%;
  }
  .rays {
    width: calc(var(--s) * 160);
    top: 38%;
  }
  .stars {
    top: 38%;
    translate: -50% calc(var(--s) * -51);
    gap: calc(var(--s) * 3);
  }
  .star {
    width: calc(var(--s) * 17);
  }
  .star:nth-child(2) {
    width: calc(var(--s) * 22);
    margin-top: calc(var(--s) * -6);
  }
  .endbtns {
    left: 50%;
    top: auto;
    translate: -50% 0;
    flex-direction: row;
    bottom: calc(var(--s) * 6);
    gap: calc(var(--s) * 5);
  }
  .endbtns .ib {
    width: calc(var(--s) * 19);
  }
  .endbtns .big {
    width: calc(var(--s) * 26);
  }
}

/* ---------- galeria ---------- */
.wall {
  position: absolute;
  inset: calc(var(--s) * 9) calc(var(--s) * 17) calc(var(--s) * 5) calc(var(--s) * 9);
  display: grid;
  grid-template-columns: repeat(3, calc(var(--s) * 18.5));
  justify-content: center;
  gap: calc(var(--s) * 3) calc(var(--s) * 3);
  align-content: center;
  overflow-y: auto;
  touch-action: pan-y;
  padding: calc(var(--s) * 2);
  scrollbar-width: none;
}
.frame .isle {
  display: none;
}
.frame .paper {
  inset: 0;
  border: calc(var(--s) * 0.9) solid #f5b82e;
  box-shadow:
    inset 0 0 0 calc(var(--s) * 0.2) #b9770e,
    0 0 0 calc(var(--s) * 0.25) #fff3b8,
    0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(90, 50, 30, 0.35);
  border-radius: calc(var(--s) * 1.4);
}
.frame {
  aspect-ratio: 4/3;
}
.frame.f1 .paper {
  border-color: #c98a5e;
  box-shadow:
    inset 0 0 0 calc(var(--s) * 0.2) #8a5a36,
    0 0 0 calc(var(--s) * 0.25) #e9c9a8,
    0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(90, 50, 30, 0.35);
}
.frame.f2 .paper {
  border-color: #bcd3ff;
  box-shadow:
    inset 0 0 0 calc(var(--s) * 0.2) #cdd8f5,
    0 0 0 calc(var(--s) * 0.25) #cdd8f5,
    0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(90, 50, 30, 0.35);
  border-radius: calc(var(--s) * 3);
}
.frame.f3 .paper {
  border-color: #ff9ad0;
  box-shadow:
    inset 0 0 0 calc(var(--s) * 0.2) #e05a9c,
    0 0 0 calc(var(--s) * 0.25) #ffd3ea,
    0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(90, 50, 30, 0.35);
}
.frame:nth-child(odd) {
  rotate: -1.5deg;
}
.frame:nth-child(even) {
  rotate: 1.2deg;
}
.frame.empty .paper {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  display: grid;
  place-items: center;
}
.frame.empty .paper img {
  width: 34%;
  height: auto;
  opacity: 0.75;
}
@media (orientation: portrait) {
  .wall {
    grid-template-columns: repeat(2, calc(var(--s) * 41));
    align-content: start;
    inset: calc(var(--s) * 36) calc(var(--s) * 3) calc(var(--s) * 28);
    gap: calc(var(--s) * 6) calc(var(--s) * 5);
  }
}

/* ---------- modais ---------- */
#modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(60, 70, 150, 0.38);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.mcard {
  --m: min(var(--s), 1.45dvh);
  position: relative;
  background: var(--panel);
  border-radius: calc(var(--m) * 4);
  padding: calc(var(--m) * 3);
  box-shadow:
    0 0 0 calc(var(--m) * 0.5) #fff,
    0 0 0 calc(var(--m) * 1) transparent,
    0 calc(var(--m) * 1.5) calc(var(--m) * 4) rgba(30, 30, 100, 0.45);
}
.mcard::before {
  content: '';
  position: absolute;
  inset: calc(var(--m) * -1);
  border-radius: calc(var(--m) * 4.8);
  background: conic-gradient(from 200deg, #ff7fd0, #ffb14a, #ffe14a, #7be07a, #5bbcff, #b08bff, #ff7fd0);
  z-index: -1;
  filter: saturate(1.1);
}
.mcard::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--panel);
  z-index: -1;
  box-shadow: inset 0 0 0 calc(var(--m) * 0.45) #fff;
}
.closex {
  position: absolute;
  right: calc(var(--m) * -2.4);
  top: calc(var(--m) * -2.4);
  width: calc(var(--m) * 7);
  z-index: 3;
}
.peek {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--m) * 4.6);
  width: calc(var(--m) * 17);
  translate: -50% 0;
  z-index: -2;
  pointer-events: none;
}
.settings {
  width: calc(var(--m) * 54);
  display: flex;
  flex-direction: column;
  gap: calc(var(--m) * 1.1);
  padding-top: calc(var(--m) * 5.4);
  font-size: calc(var(--m) * 2.5);
}
.plate {
  position: absolute;
  left: 50%;
  top: calc(var(--m) * -2.2);
  translate: -50% 0;
  padding: calc(var(--m) * 0.7) calc(var(--m) * 4);
  font-size: calc(var(--m) * 3.6);
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(#c59bff, #8a55f0);
  border-radius: 99px;
  box-shadow:
    0 0 0 calc(var(--m) * 0.45) #fff,
    0 calc(var(--m) * 0.6) calc(var(--m) * 1) rgba(60, 30, 140, 0.4),
    inset 0 calc(var(--m) * -0.5) 0 rgba(60, 20, 150, 0.35);
  text-shadow: 0 calc(var(--m) * 0.25) 0 rgba(60, 20, 150, 0.6);
  z-index: 2;
}
.row {
  display: grid;
  grid-template-columns: calc(var(--m) * 5.4) 1fr calc(var(--m) * 23);
  align-items: center;
  gap: calc(var(--m) * 1.6);
  min-height: calc(var(--m) * 5.6);
}
.row .lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings hr {
  width: 100%;
  border: 0;
  height: calc(var(--m) * 0.3);
  border-radius: 9px;
  background: #e5defa;
  margin: calc(var(--m) * 0.2) 0;
}
.ico {
  width: calc(var(--m) * 5.4);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--b, #3fa9ff);
  box-shadow:
    inset 0 0 0 calc(var(--m) * 0.35) #fff,
    0 calc(var(--m) * 0.3) calc(var(--m) * 0.5) rgba(40, 60, 120, 0.3);
  position: relative;
}
.ico::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: #fff;
  -webkit-mask: var(--i) center/contain no-repeat;
  mask: var(--i) center/contain no-repeat;
}
.i-sound {
  --b: #3fa9ff;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 9v6h4l6 5V4L7 9zm13.5-1.5a6 6 0 010 9l-1.2-1.4a4 4 0 000-6.2zm2.6-2.8a10 10 0 010 14.6l-1.3-1.4a8 8 0 000-11.8z"/></svg>');
}
.i-music {
  --b: #ff5fa8;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 4l11-2v14.5a3.5 3.5 0 11-2-3.2V6.3l-7 1.3v10.9a3.5 3.5 0 11-2-3.2z"/></svg>');
}
.i-voice {
  --b: #55d86b;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2h-7l-5 4v-4H4a2 2 0 01-2-2V6a2 2 0 012-2z"/></svg>');
}
.i-vib {
  --b: #9a55f0;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 3h8a2 2 0 012 2v14a2 2 0 01-2 2H8a2 2 0 01-2-2V5a2 2 0 012-2zM2 8h2v8H2zm18 0h2v8h-2z"/></svg>');
}
.i-turtle {
  --b: #4ccb3f;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 15a7 7 0 0114 0h1.5a2.5 2.5 0 100-5H20a1 1 0 010-2h1a3 3 0 013 3v1a4 4 0 01-4 4h-1v3h-3v-2H8v2H5v-3H2v-1z"/></svg>');
}
.i-globe {
  --b: #2f8bff;
  --i: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="9.5"/><path d="M2.5 12h19M12 2.5c3.5 3 3.5 16 0 19M12 2.5c-3.5 3-3.5 16 0 19"/></svg>');
}
.vol {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(var(--m) * 5);
  background: none;
  margin: 0;
  cursor: pointer;
  --p: 50%;
  touch-action: none;
}
.vol::-webkit-slider-runnable-track {
  height: calc(var(--m) * 1.7);
  border-radius: 99px;
  background: linear-gradient(90deg, #6fe05a var(--p), #d6d2e8 var(--p));
  box-shadow: inset 0 calc(var(--m) * 0.25) calc(var(--m) * 0.3) rgba(40, 30, 90, 0.25);
}
.vol::-moz-range-track {
  height: calc(var(--m) * 1.7);
  border-radius: 99px;
  background: linear-gradient(90deg, #6fe05a var(--p), #d6d2e8 var(--p));
}
.vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--m) * 4.2);
  height: calc(var(--m) * 4.2);
  margin-top: calc(var(--m) * -1.25);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e9e6f5);
  box-shadow:
    0 calc(var(--m) * 0.3) calc(var(--m) * 0.6) rgba(40, 30, 90, 0.45),
    inset 0 0 0 calc(var(--m) * 0.2) #cfc8e8;
}
.vol::-moz-range-thumb {
  width: calc(var(--m) * 4.2);
  height: calc(var(--m) * 4.2);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e9e6f5);
  box-shadow: 0 calc(var(--m) * 0.3) calc(var(--m) * 0.6) rgba(40, 30, 90, 0.45);
}
.tog {
  justify-self: end;
  width: calc(var(--m) * 10.5);
  height: calc(var(--m) * 5);
  border-radius: 99px;
  background: #b9b6c9;
  box-shadow: inset 0 calc(var(--m) * 0.3) calc(var(--m) * 0.4) rgba(40, 30, 90, 0.3);
  position: relative;
  transition: background 0.18s;
}
.tog i {
  position: absolute;
  top: 8%;
  left: 4%;
  height: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e9e6f5);
  box-shadow: 0 calc(var(--m) * 0.25) calc(var(--m) * 0.5) rgba(40, 30, 90, 0.4);
  transition: left 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tog.on {
  background: #4ccb3f;
}
.tog.on i {
  left: 56%;
}
.selwrap {
  position: relative;
  display: block;
}
.selwrap::after {
  content: '';
  position: absolute;
  right: calc(var(--m) * 1.8);
  top: 50%;
  border: calc(var(--m) * 0.8) solid transparent;
  border-top-color: var(--ink);
  translate: 0 -20%;
  pointer-events: none;
}
.langsel {
  width: 100%;
  height: calc(var(--m) * 5.4);
  font: inherit;
  font-size: calc(var(--m) * 2.3);
  color: var(--ink);
  padding: 0 calc(var(--m) * 4.4) 0 calc(var(--m) * 2);
  border-radius: 99px;
  border: calc(var(--m) * 0.3) solid #cdbdf7;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.okbtn {
  align-self: center;
  margin-top: calc(var(--m) * 0.6);
  min-width: calc(var(--m) * 22);
  padding: calc(var(--m) * 1.1) calc(var(--m) * 5);
  font-size: calc(var(--m) * 3.4);
  color: #fff;
  border-radius: 99px;
  background: linear-gradient(#7be05a, #2faa2a);
  box-shadow:
    0 calc(var(--m) * 0.7) 0 #1c7d22,
    0 calc(var(--m) * 1.2) calc(var(--m) * 1.2) rgba(20, 80, 30, 0.35),
    inset 0 calc(var(--m) * 0.4) 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 calc(var(--m) * 0.25) 0 rgba(10, 80, 20, 0.6);
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}
.okbtn:active {
  transform: translateY(calc(var(--m) * 0.5));
  box-shadow:
    0 calc(var(--m) * 0.2) 0 #1c7d22,
    inset 0 calc(var(--m) * 0.4) 0 rgba(255, 255, 255, 0.45);
}
.mcard.more {
  padding: calc(var(--m) * 3.4);
}
.moregrid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: calc(var(--m) * 1.5);
}
.more .pot {
  width: calc(var(--m) * 8.6);
}
.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--m) * 2.4);
  padding: calc(var(--m) * 3.5) calc(var(--m) * 5);
}
.cpic {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--m) * 1);
}
.cpic > img {
  width: calc(var(--m) * 17);
  margin-bottom: calc(var(--m) * -1);
}
.cpic .paper {
  width: calc(var(--m) * 22);
  border-radius: calc(var(--m) * 1.4);
  overflow: hidden;
  border: calc(var(--m) * 0.5) solid #f5b82e;
  background: #fff;
  rotate: 3deg;
  animation: wipe 1.6s ease-in-out infinite alternate;
}
.cpic canvas {
  display: block;
  width: 100%;
}
@keyframes wipe {
  to {
    filter: saturate(0.25) brightness(1.15);
  }
}
.crow {
  display: flex;
  align-items: center;
  gap: calc(var(--m) * 6);
}
.crow .big {
  width: calc(var(--m) * 14);
}
.crow .ib:last-child {
  width: calc(var(--m) * 8);
}
@media (orientation: portrait) {
  .mcard {
    --m: min(var(--s) * 1.62, 1.3dvh);
  }
  .moregrid {
    grid-template-columns: repeat(5, 1fr);
  }
  .more .pot {
    width: calc(var(--m) * 8.4);
  }
  .more .closex {
    right: calc(var(--m) * -1);
    top: calc(var(--m) * -2.6);
  }
  .drawer {
    overflow: visible;
  }
}
@media (orientation: landscape) and (max-height: 430px) {
  .peek {
    display: none;
  }
}

/* "menos movimento": sem animação de enfeite; o estado continua visível */
[data-motion='reduced'] *,
[data-motion='reduced'] *::before,
[data-motion='reduced'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
[data-motion='reduced'] .hint {
  opacity: 0.9;
  scale: 0.8;
}
.drawer {
  --m: var(--s);
}
@media (orientation: portrait) {
  .drawer {
    --m: calc(var(--s) * 1.7);
  }
}

/* "mais cores" em tablet deitado (4:3) cabe na tela */
@media (orientation: landscape) {
  .mcard.more {
    --m: min(var(--s) * 0.88, 1.45dvh);
  }
}
/* gaveta de adesivos e carimbos: painel justo, itens grandes, X pendurado no canto */
.drawer {
  --iw: calc(var(--s) * 6.6);
  top: calc(50% + var(--s) * 4.5);
  bottom: auto;
  translate: 0 -50%;
  width: calc(var(--s) * 31.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: calc(var(--s) * 1.6);
  overflow: visible;
}
.drawer .item {
  width: var(--iw);
}
.drawer .closex {
  right: calc(var(--m) * -1.4);
  top: calc(var(--m) * -1.8);
}
@media (orientation: portrait) {
  .drawer {
    --iw: calc(var(--s) * 14);
    width: calc(var(--s) * 96);
    top: auto;
    bottom: calc(var(--s) * 23 + env(safe-area-inset-bottom));
    translate: 50% 0;
    padding: calc(var(--s) * 2.5);
  }
  #app.drawer-open #mascot {
    opacity: 0;
  }
}

/* carrossel de categorias: para sempre em categoria inteira */
.tabs {
  scroll-snap-type: x mandatory;
  scroll-padding: 0 calc(var(--s) * 2.4);
}
.tab {
  scroll-snap-align: start;
}
.frame.empty .paper img.faint {
  opacity: 0.28;
  width: 22%;
}
/* gaveta: toma o lugar da paleta; o X fica no meio da borda de cima, sempre dentro da tela */
#app.drawer-open .palette {
  visibility: hidden;
}
.drawer {
  --iw: calc(var(--s) * 6.3);
  width: calc(var(--s) * 30.4);
}
.drawer .item {
  padding: 0;
}
.drawer.stamp .item {
  padding: 0;
  background: none;
}
.drawer.stamp .item img {
  padding: 14%;
  background: #f1ecff;
  border-radius: 22%;
}
.drawer .closex {
  right: auto;
  left: 50%;
  translate: -50% 0;
  top: calc(var(--m) * -2.6);
}
@media (orientation: portrait) {
  .tabs {
    scroll-padding: 0 calc(var(--s) * 3);
  }
  .drawer {
    --iw: calc(var(--s) * 21);
    width: calc(var(--s) * 96);
    bottom: calc(var(--s) * 25 + env(safe-area-inset-bottom));
  }
}

/* pílula das categorias: o fundo fica na pílula e só categorias inteiras aparecem dentro dela */
.pill {
  padding: 0 calc(var(--s) * 1.6);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 99px;
  box-shadow:
    0 calc(var(--s) * 0.5) calc(var(--s) * 1.2) rgba(40, 60, 120, 0.2),
    inset 0 0 0 calc(var(--s) * 0.3) #fff;
}
.tabs {
  width: calc(var(--s) * 53.6);
  padding: calc(var(--s) * 1.5) calc(var(--s) * 0.6);
  scroll-padding: 0 calc(var(--s) * 0.6);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
#app.drawer-open #mascot {
  opacity: 0;
}
.drawer {
  --iw: calc(var(--s) * 6.4);
  width: calc(var(--s) * 30.6);
  right: calc(var(--s) * 1.8 + env(safe-area-inset-right));
} /* mesma caixa da paleta: não invade o cavalete */
.drawer .closex {
  width: calc(var(--s) * 7);
  top: calc(var(--s) * -4);
}
@media (orientation: portrait) {
  .tabs {
    width: calc(var(--s) * 59.2);
    padding: calc(var(--s) * 2.4) calc(var(--s) * 0.6);
    scroll-padding: 0 calc(var(--s) * 0.6);
  }
  .palette {
    align-self: center;
  }
  .drawer {
    --iw: calc(var(--s) * 14.6);
    width: calc(var(--s) * 96);
  }
  .drawer .closex {
    width: calc(var(--s) * 13);
    top: calc(var(--s) * -7);
  }
}
@media (orientation: portrait) {
  .drawer {
    right: 50%;
  }
}
@media (orientation: portrait) {
  .drawer {
    bottom: calc(var(--s) * 2.5 + env(safe-area-inset-bottom));
  }
} /* em pé a gaveta ocupa a zona da paleta e das ferramentas, sem cobrir o desenho */

/* o mascote da tela inicial pisa numa ilhazinha */
.homeisle {
  position: absolute;
  left: calc(50% - var(--s) * 38);
  top: calc(50% + var(--s) * 17.6);
  width: calc(var(--s) * 30);
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--s) * 0.8) calc(var(--s) * 1) rgba(40, 60, 120, 0.3));
}
/* "terminei" é o botão principal da pintura: maior que os vizinhos */
.donebtn {
  width: calc(var(--s) * 9.2);
}
.trash {
  width: calc(var(--s) * 6.6);
}
.drawer {
  --iw: max(calc(var(--s) * 6.4), 52px);
  width: calc(var(--iw) * 4 + var(--s) * 5);
} /* no celular deitado o adesivo não fica menor que 52 px */
@media (orientation: portrait) {
  .homeisle {
    left: calc(50% - var(--s) * 31);
    top: calc(50% + var(--s) * 29.5);
    width: calc(var(--s) * 62);
  }
  .donebtn {
    width: calc(var(--s) * 16.5);
  }
  .trash {
    width: calc(var(--s) * 11.5);
  }
  .drawer {
    --iw: calc(var(--s) * 14.6);
    width: calc(var(--s) * 96);
  }
}

/* ferramenta ativa com o mesmo anel amarelo da cor ativa */
.tool.on {
  box-shadow:
    0 0 0 calc(var(--s) * 0.55) #ffd92e,
    0 0 calc(var(--s) * 1.4) #ffe14a;
}
/* X da gaveta no canto, meio para fora, como nos outros painéis */
.drawer .closex {
  left: auto;
  translate: none;
  right: calc(var(--s) * -1.2);
  top: calc(var(--s) * -3.4);
}
.frame.empty .paper img.faint {
  display: none;
}
.wall {
  inset: calc(var(--s) * 9) calc(var(--s) * 13) calc(var(--s) * 5) calc(var(--s) * 13);
  grid-template-columns: repeat(3, calc(var(--s) * 19.5));
}
@media (orientation: landscape) {
  #app[data-screen='choose'] #mascot {
    opacity: 0;
  }
} /* sem lugar limpo na grade deitada: sai de cena */
@media (orientation: portrait) {
  /* em pé a sobra de altura vira alvo grande: paleta 4x3 e ferramentas maiores */
  .palette {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--s) * 1.6) calc(var(--s) * 2.6);
  }
  .pot {
    width: calc(var(--s) * 19);
  }
  .pot.more::after {
    font-size: calc(var(--s) * 9);
  }
  .tool {
    width: calc(var(--s) * 16.6);
  }
  .tools {
    gap: calc(var(--s) * 1.6);
  }
  .drawer {
    --iw: calc(var(--s) * 21);
  }
  .drawer .closex {
    right: calc(var(--s) * -1);
    top: calc(var(--s) * -6);
  }
  .wall {
    inset: calc(var(--s) * 36) calc(var(--s) * 3) calc(var(--s) * 34);
    grid-template-columns: repeat(2, calc(var(--s) * 41));
  }
}
@media (orientation: landscape) {
  #app[data-screen='paint'] #mascot {
    scale: -1 1;
  }
} /* na pintura deitada o mascote olha para o desenho, à esquerda */
/* tela inicial em pé: tudo ancorado de baixo para cima (logo, mascote com os pés na ilha, botão embaixo), sem amontoar em celular baixo */
.homeisle {
  top: calc(50% + var(--s) * 15.4);
}
@media (orientation: portrait) {
  .logo {
    width: calc(var(--s) * 62);
    top: calc(var(--s) * 17 + env(safe-area-inset-top));
  }
  #app[data-screen='home'] #mascot {
    --mw: 50;
    left: calc(50% - var(--s) * 25);
    top: auto;
    bottom: calc(var(--s) * 48.4 + env(safe-area-inset-bottom));
  } /* o quadro da pose tem ~6% de folga embaixo: descontado para os pés tocarem a grama */
  .homeisle {
    left: calc(50% - var(--s) * 25);
    width: calc(var(--s) * 50);
    top: auto;
    bottom: calc(var(--s) * 42 + env(safe-area-inset-bottom));
  }
  .ib.play {
    left: calc(50% - var(--s) * 15);
    width: calc(var(--s) * 30);
    top: auto;
    bottom: calc(var(--s) * 7 + env(safe-area-inset-bottom));
  }
}

/* End of css/style.css */