/* emendas: peca na casa inteira (o miolo do bloco nao comeca em fracao de pixel) */
.blk .skin {
  inset: round(calc(var(--cell) * 0.035), 1px);
}
/* barras-trituradoras: mais finas (nunca grossas no desktop), dentes de cera correndo dentro e acelerando quando o
   pote entra (classe .busy, posta pelo grind). Modo calmo: parado. */
.gate .mat {
  height: clamp(9px, calc(var(--cell) * 0.2), 15px);
  bottom: calc(var(--cell) * -0.04);
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.34) 0 5px, rgba(255, 255, 255, 0) 5px 12px),
    linear-gradient(to top, var(--c3) 0, var(--c2) 30%, var(--c2) 60%, var(--c1) 100%);
  background-size:
    24px 100%,
    100% 100%;
  animation: grind-idle 2.4s linear infinite;
}
.gate .mat::before {
  top: 10%;
  height: 28%;
}
@keyframes grind-idle {
  to {
    background-position:
      24px 0,
      0 0;
  }
}
.gate .mat.busy {
  animation: grind-idle 0.18s linear infinite;
  filter: brightness(1.18);
}
.gate.locked .mat {
  animation: none;
}
#app.calm .gate .mat,
#app.calm .gate .mat.busy {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .gate .mat,
  .gate .mat.busy {
    animation: none;
  }
}
/* peca de 9 pedacos ja montada numa imagem so (src/nine.js): o fundo inteiro substitui os pedacos */
.nine {
  border-image: none !important;
  background-size: 100% 100% !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-repeat: no-repeat !important;
}
/* mapa: numero no meio da pedra, menor e menos grosso; pedra atual do mesmo tamanho das outras;
   trilha mais fina no celular; setas de mundo nos cantos de baixo (longe da abelha) */
.node b {
  top: 47%;
  translate: 0 -50%;
  font-size: calc(var(--u) * 5.2);
  font-weight: 600;
  line-height: 1;
  -webkit-text-stroke: 0;
  color: #1c4c8a;
  text-shadow:
    0 0 calc(var(--u) * 0.6) #fff,
    0 calc(var(--u) * 0.25) 0 rgba(255, 255, 255, 0.85);
}
#app:not([data-layout='port']) .node b {
  font-size: calc(var(--u) * 4.2);
}
.node.now > img {
  animation: none;
}
.node.now {
  animation: glow2 1.6s ease-in-out infinite;
}
@keyframes glow2 {
  50% {
    filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ffe27a);
  }
}
#app.calm .node.now {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .node.now {
    animation: none;
  }
}
#app[data-layout='port'] #mapPath .edge {
  stroke-width: calc(var(--u) * 6.2);
}
#app[data-layout='port'] #mapPath .rim {
  stroke-width: calc(var(--u) * 5);
}
#app[data-layout='port'] #mapPath .ice {
  stroke-width: calc(var(--u) * 3.9);
}
#app[data-layout='port'] #mapPath .shine {
  stroke-width: calc(var(--u) * 0.8);
  transform: translateY(calc(var(--u) * -0.9));
}
.wnav {
  top: auto;
  bottom: calc(var(--u) * 1.5);
}
/* ajustes: caixinha vira interruptor */
.row input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 7.4);
  min-width: 46px;
  min-height: 26px;
  border-radius: 99px;
  background: #b8cbe0;
  box-shadow: inset 0 calc(var(--u) * 0.4) calc(var(--u) * 0.8) rgba(20, 50, 100, 0.35);
  cursor: pointer;
  transition: background 0.18s;
}
.row input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 9%;
  left: 6%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8f1fb 60%, #c6d6ea);
  box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.6) rgba(10, 40, 90, 0.4);
  transition: left 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.row input[type='checkbox']:checked {
  background: linear-gradient(#5fe06a, #2fb53c);
}
.row input[type='checkbox']:checked::after {
  left: 48%;
}
.row input[type='checkbox']:focus-visible {
  outline: calc(var(--u) * 0.6) solid #ffe27a;
  outline-offset: 2px;
}
#app[data-layout='desk'] .row input[type='checkbox'] {
  width: calc(var(--u) * 8.6);
  height: calc(var(--u) * 4.9);
}

/* tela final de agradecimento */
#m-end .m-title {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
  font-size: calc(var(--u) * 7.4);
  text-align: center;
}
#m-end .m-text {
  text-align: center;
  font-size: calc(var(--u) * 4.6);
  line-height: 1.3;
  padding: 0 calc(var(--u) * 4);
}
#m-end .chip.gold {
  min-width: calc(var(--u) * 46);
}
#app[data-layout='desk'] #m-end .m-title {
  font-size: calc(var(--u) * 5);
}
#app[data-layout='desk'] #m-end .m-text {
  font-size: calc(var(--u) * 3.3);
}

/* abertura: engrenagem e musica no canto de cima (Idioma mora dentro dos ajustes) */
.t-corner {
  position: absolute;
  top: max(calc(var(--u) * 4), env(safe-area-inset-top));
  right: calc(var(--u) * 4);
  display: flex;
  gap: calc(var(--u) * 2.4);
  z-index: 3;
}
.t-corner .rbtn {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  min-width: 44px;
  min-height: 44px;
}
#app:not([data-layout='port']) .t-corner {
  top: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
}
#app:not([data-layout='port']) .t-corner .rbtn {
  width: calc(var(--u) * 8.5);
  height: calc(var(--u) * 8.5);
}

/* janela de som: controle de volume caprichado (trilha de cera com preenchimento dourado e uma estrela de botao) */
#m-sound .panel {
  gap: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 4);
}
.vol {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.6);
}
.vl {
  font-size: calc(var(--u) * 5);
  text-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 0.4) var(--shade);
}
.vr {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.vp {
  min-width: 3.2em;
  text-align: right;
  font-size: calc(var(--u) * 4.4);
  color: #fff6c9;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(8, 40, 100, 0.6);
}
.vol input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: calc(var(--u) * 4.6);
  min-height: 16px;
  margin: 0;
  border-radius: 99px;
  cursor: pointer;
  outline: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%) no-repeat,
    linear-gradient(to right, #ffe680, #ffb21e var(--p, 50%), rgba(6, 40, 100, 0.5) var(--p, 50%)) no-repeat;
  box-shadow:
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 0.9) rgba(0, 20, 60, 0.45),
    0 0 0 calc(var(--u) * 0.7) rgba(255, 255, 255, 0.75),
    0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgba(8, 40, 100, 0.35);
}
.vol input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  min-width: 36px;
  min-height: 36px;
  border: 0;
  background: url(./assets/art/star.webp) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(90, 50, 0, 0.5));
  transition: scale 0.12s;
}
.vol input[type='range']:active::-webkit-slider-thumb {
  scale: 1.15;
}
.vol input[type='range']::-moz-range-thumb {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border: 0;
  background: url(./assets/art/star.webp) center / contain no-repeat;
}
.vol input[type='range']::-moz-range-track {
  background: transparent;
}
.vol input[type='range']:focus-visible {
  box-shadow:
    0 0 0 calc(var(--u) * 0.9) #ffe27a,
    inset 0 calc(var(--u) * 0.5) calc(var(--u) * 0.9) rgba(0, 20, 60, 0.45);
}
#app[data-layout='desk'] .vl {
  font-size: calc(var(--u) * 3.6);
}
#app[data-layout='desk'] .vp {
  font-size: calc(var(--u) * 3.2);
}
#app[data-layout='desk'] .vol input[type='range'] {
  height: calc(var(--u) * 3.2);
}
#app[data-layout='desk'] .vol input[type='range']::-webkit-slider-thumb {
  width: calc(var(--u) * 7.5);
  height: calc(var(--u) * 7.5);
}

/* dica do tutorial como vidro transparente (liquid glass): da para ver a porta e os blocos por baixo, texto com contraste */
#hint {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.32), rgba(190, 230, 255, 0.14));
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: blur(6px) saturate(1.4);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(8, 40, 100, 0.25);
  color: #fff;
  pointer-events: none;
}
#hint .tx {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(8, 40, 100, 0.85),
    0 0 calc(var(--u) * 1.4) rgba(8, 40, 100, 0.6);
}
/* desktop: cada poder numa grade fixa (icone | nome | quantidade ou cadeado | tecla), atalhos todos alinhados e do mesmo tamanho */
#app[data-layout='desk'] .pw {
  display: grid;
  grid-template-columns: calc(var(--u) * 7.6) 1fr calc(var(--u) * 6.4) calc(var(--u) * 4.6);
  align-items: center;
  justify-items: center;
  column-gap: calc(var(--u) * 1.6);
  padding: 0 calc(var(--u) * 1.4);
  box-sizing: border-box;
}
#app[data-layout='desk'] .pw .nm {
  justify-self: stretch;
}
#app[data-layout='desk'] .pw .ct {
  margin: 0;
}
#app[data-layout='desk'] .pw kbd {
  width: calc(var(--u) * 4.6);
  min-width: 0;
  height: calc(var(--u) * 4.6);
  padding: 0;
  font-size: calc(var(--u) * 2.4);
}
/* a linha do poder tem ~30u: colunas que cabem (antes somavam mais que a linha e a tecla saia para fora) */
#app[data-layout='desk'] .pw {
  grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr) calc(var(--u) * 5.4) calc(var(--u) * 4);
  column-gap: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 1);
}
#app[data-layout='desk'] .pw img {
  width: calc(var(--u) * 6);
}
#app[data-layout='desk'] .pw .nm {
  font-size: calc(var(--u) * 2.7);
}
#app[data-layout='desk'] .pw .ct {
  width: calc(var(--u) * 5.4);
}
#app[data-layout='desk'] .pw kbd {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  font-size: calc(var(--u) * 2.2);
}
#app[data-layout='desk'] .sysbtn {
  display: grid;
  grid-template-columns: calc(var(--u) * 6) minmax(0, 1fr) calc(var(--u) * 4);
  column-gap: calc(var(--u) * 1);
}
#app[data-layout='desk'] .sysbtn kbd {
  width: calc(var(--u) * 4);
  justify-self: center;
}
/* abertura em pe: a logo desce um pouco para os icones do canto nao encostarem nela */
#app[data-layout='port'] .t-brand {
  margin-top: calc(var(--u) * 13);
}
#app[data-layout='port'] .t-brand .logo {
  width: calc(var(--u) * 80);
}
#app[data-layout='desk'] .pw .nm {
  font-size: calc(var(--u) * 2.5);
}
#app[data-layout='desk'] .sysbtn kbd {
  font-size: calc(var(--u) * 1.7);
}
/* abertura em pe: logo em cima, abelha no meio, botoes embaixo (antes ficava tudo amontoado no alto) */
#app[data-layout='port'] #s-title {
  justify-content: space-between;
  padding-bottom: max(calc(var(--u) * 12), env(safe-area-inset-bottom));
}
#app[data-layout='port'] .t-hero {
  height: calc(var(--u) * 66);
  margin: auto 0;
}
#app[data-layout='port'] .t-menu {
  gap: calc(var(--u) * 4);
}
/* deitado e desktop: abelha 15% menor */
#app:not([data-layout='port']) .t-hero {
  height: calc(var(--u) * 64.6);
}
/* mostrar solucao (?solution): botao que joga a solucao sozinho */
#solveBtn {
  position: fixed;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  z-index: 80;
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(20, 20, 40, 0.82);
  color: #fff;
  font:
    600 15px Fredoka,
    sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#solveBtn[hidden] {
  display: none;
}
/* botoes azuis com icone (ajustes): icone na mesma posicao em todos, sem achatar; texto centralizado */
.pill.blue img {
  position: absolute;
  left: 12%;
  top: 50%;
  translate: -50% -50%;
  height: 66%;
  width: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

/* ===================== AJUSTES DE ARTE (1) ===================== */
/* flor: pequena, presa no canto de cima a direita */
.blk .flower {
  width: calc(var(--cell) * 0.34);
  right: calc(var(--cell) * -0.02);
  top: calc(var(--cell) * -0.1);
}
/* pote: a arte ja e a pote inteira; sem fita, e a estrela fica dourada (sem tingir) */
.blk.gift .rib {
  display: none;
}
.blk.gift .bowc {
  display: none;
}
.blk.gift .bow {
  filter: drop-shadow(0 calc(var(--cell) * 0.03) calc(var(--cell) * 0.03) rgba(0, 0, 0, 0.35));
  width: calc(var(--cell) * (0.28 + 0.36 * var(--m)));
  top: calc(var(--cell) * -0.08);
}
/* pedra do jardim (bloco preso que racha) com arte propria; numero branco com contorno escuro */
.blk.ice .skin,
.blk.ice .skin.nine {
  border-image: none !important;
  background: url(./assets/art/rock.webp) center / 100% 100% no-repeat border-box !important;
  filter: drop-shadow(0 calc(var(--cell) * 0.05) calc(var(--cell) * 0.03) rgba(0, 0, 0, 0.45)) !important;
}
.blk.ice .n {
  color: #fff;
  -webkit-text-stroke: calc(var(--cell) * 0.07) #3a2a20;
  paint-order: stroke fill;
  text-shadow: none;
}
/* favo preso (pin) e caixa: cor do numero no tema */
.blk.pin .skin {
  filter: hue-rotate(75deg) saturate(1.7);
}
/* vitoria: a placa nao tem enfeite em cima, entao o conteudo fica no meio; estrela menor e com folga do numero */
#m-win .chip {
  padding: 0 calc(var(--u) * 3);
  gap: calc(var(--u) * 3);
  justify-content: center;
}
#m-win .chip b {
  line-height: 1;
  display: block;
  translate: 0 -0.04em;
}
#m-win .chip img,
#m-win .chip.gold img {
  height: 58%;
}

/* ===================== AJUSTES DE ARTE (2) ===================== */
/* o "10" e o pote de mel inteiro, na cor dele; sem o enfeite de cima */
.blk.gift .skin,
.blk.gift .skin.nine {
  border-image: none !important;
  background: none !important;
}
.blk.gift .bow {
  display: none;
}
.blk.gift::before {
  content: '';
  position: absolute;
  inset: calc(var(--cell) * 0.02);
  background: var(--jar) center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--cell) * 0.05) calc(var(--cell) * 0.04) rgba(60, 30, 0, 0.45));
}
.blk.gift.c-r {
  --jar: url(./assets/art/jar-r.webp);
}
.blk.gift.c-b {
  --jar: url(./assets/art/jar-b.webp);
}
.blk.gift.c-g {
  --jar: url(./assets/art/jar-g.webp);
}
.blk.gift.c-y {
  --jar: url(./assets/art/jar-y.webp);
}
.blk.gift.c-p {
  --jar: url(./assets/art/jar-p.webp);
}
.blk.gift.c-o {
  --jar: url(./assets/art/jar-o.webp);
}
.blk.gift.c-t {
  --jar: url(./assets/art/jar-t.webp);
}
.blk.gift.c-k {
  --jar: url(./assets/art/jar-k.webp);
}
.blk.gift .n {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--cell) * 0.22);
}
/* favo preso (pin) com a arte propria */
.blk.pin .skin,
.blk.pin .skin.nine {
  border-image: none !important;
  background: url(./assets/art/stuck-comb.webp) center / 100% 100% no-repeat border-box !important;
  filter: drop-shadow(0 calc(var(--cell) * 0.05) calc(var(--cell) * 0.03) rgba(60, 30, 0, 0.4)) !important;
}
.blk.pin .n {
  color: #5a2e00;
  text-shadow: 0 0 calc(var(--cell) * 0.08) #fff6c0;
}
/* trilha do mapa cor de mel */
#mapPath .edge {
  stroke: rgba(150, 80, 0, 0.55);
}
#mapPath .rim {
  stroke: #fff4c4;
}
#mapPath .ice {
  stroke: #ffc53d;
}
.blk.gift .n {
  padding-top: calc(var(--cell) * (0.12 + 0.2 * var(--m)));
}
.blk.gift .n {
  position: absolute !important;
  inset: 0;
  padding-top: 0 !important;
  translate: 0 calc(var(--cell) * 0.17 * var(--m));
  z-index: 1;
}
/* contraste: texto branco sobre madeira e mel ganha contorno marrom (botoes verdes e laranja ficam como estao) */
.panel,
.bar,
#mapBar,
#app[data-layout='desk'] #info,
#app[data-layout='desk'] #tray,
#app:not([data-layout='port']) #s-map .lvl,
#hint {
  -webkit-text-stroke: 0.16em #6b3300;
  paint-order: stroke fill;
}
.panel .pill,
.bar .pill,
.panel .pill *,
#tray .pw .ct,
#tray .pw .ct * {
  -webkit-text-stroke: 0;
}
#hint .tx {
  -webkit-text-stroke: 0.14em #6b3300;
}
.panel :is(h2, .tx, span, b, label, .m-text),
.bar :is(b, span, small),
#mapBar :is(b, span, small),
#app[data-layout='desk'] #info :is(b, span, small, .lvl *),
#app[data-layout='desk'] #tray :is(.nm, span),
#app:not([data-layout='port']) #s-map .lvl *,
#hint .tx {
  text-shadow:
    -0.07em -0.07em 0 #7a3d00,
    0.07em -0.07em 0 #7a3d00,
    -0.07em 0.07em 0 #7a3d00,
    0.07em 0.07em 0 #7a3d00,
    0 0.1em 0 #7a3d00,
    0 0.14em 0.1em rgba(60, 25, 0, 0.5) !important;
}
.panel .pill :is(.tx, span),
.bar .pill :is(.tx, span),
#tray .pw .ct * {
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.3) !important;
}
/* vitoria: conteudo no corpo da placa (os pingos de mel ficam embaixo), icones com contorno; botao sem recuo de enfeite */
#m-win .chip {
  padding: 0 calc(var(--u) * 3) calc(var(--u) * 2.2);
  gap: calc(var(--u) * 2.4);
  justify-content: center;
}
#m-win .chip b {
  line-height: 1;
  display: block;
}
#m-win .chip img,
#m-win .chip.gold img {
  height: 52%;
  filter: drop-shadow(0 0 1px #7a3d00) drop-shadow(0 0 1px #7a3d00) drop-shadow(0 2px 1px rgba(80, 35, 0, 0.6));
}
#m-win .pill {
  padding-top: 0;
}
#m-win .pill .tx {
  line-height: 1;
  translate: 0 -0.06em;
}
/* alinhamento otico: pecas com relevo embaixo (pingo de mel, bisel do botao) parecem baixas se o
   conteudo fica no meio geometrico; o conteudo sobe um pouco e fica um pouco menor */
.blk.num .n {
  color: #6b3300;
  font-size: calc(var(--cell) * (0.27 + 0.36 * var(--m)));
  translate: 0 calc(var(--cell) * -0.07);
  text-shadow:
    0 0 calc(var(--cell) * 0.08) #fff6c8,
    0 calc(var(--cell) * 0.03) 0 rgba(255, 246, 200, 0.9);
}
.blk.pin .n {
  translate: 0 calc(var(--cell) * -0.03);
}
.pill .tx {
  line-height: 1;
  translate: 0 -0.1em;
}
#m-win .pill .tx {
  translate: 0 -0.12em;
}
/* placas de numero: contorno liso (sem o anel de sombras, que parecia rasurado) */
#m-win .chip b {
  -webkit-text-stroke: 0.09em #6b3300;
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 #6b3300 !important;
  translate: 0 -0.06em;
}
#m-win .chip {
  padding-bottom: calc(var(--u) * 2.6);
}
/* plaquinha da quantidade dos poderes: numero marrom escuro, subido */
.pw .ct b {
  color: #5a2800;
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  translate: 0 -0.08em;
  display: block;
  line-height: 1;
}
/* grade do jogo: so as linhas de dentro (as de fora subiam na moldura de madeira), cor de cera, sem o veu azul */
#cells {
  background: none !important;
  clip-path: inset(2px round calc(var(--cell) * 0.12));
}
.cell {
  background: none !important;
  box-shadow: inset 0 0 0 calc(var(--cell) * 0.008) rgba(255, 214, 140, 0.42) !important;
}
/* mapa: numero no meio da face do favo, por estado; marrom; estrelas abaixo da face */
.node b {
  top: 40%;
  color: #6b3300;
  text-shadow:
    0 0 calc(var(--u) * 0.6) #fff3c0,
    0 calc(var(--u) * 0.25) 0 rgba(255, 240, 190, 0.9);
}
.node.now b {
  top: 58%;
}
.node .ms {
  bottom: -16%;
}
.node.off b {
  color: #8a5a2a;
}

/* End of theme.css */