/* SHOALMATES, folha 3 de 3 (carregada por ultimo): mapa, numeros, desempenho, pecas que esticam, respiro da tela
   de jogo e bolhas de fundo. As regras daqui valem por cima das mesmas regras das folhas anteriores. */
/* ===== Ajuste 7 (paineis) ===== */
#app[data-panel='wide'] .home-bottom {
  visibility: hidden;
}
#panelClose {
  right: calc(var(--u) * 0.5);
}
.spark {
  filter: saturate(0.55) brightness(1.3) drop-shadow(0 0 calc(var(--u) * 1) #fff6c8);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}
.spark:nth-of-type(2) {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
}
.spark:nth-of-type(3) {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
}
/* settings */
.panel.settings {
  margin-top: calc(var(--u) * 5);
}
.panel.settings #panelBody {
  gap: calc(var(--u) * 1.2);
}
.panel.settings .set-row {
  min-height: calc(var(--u) * 11.5);
  gap: calc(var(--u) * 1.6);
}
.set-row label {
  -webkit-text-stroke: 0.13em var(--ink);
}
input[type='range'].vol::-webkit-slider-runnable-track {
  height: calc(var(--u) * 5);
  border-width: calc(var(--u) * 0.4);
}
input[type='range'].vol::-webkit-slider-thumb {
  width: calc(var(--u) * 6.6);
  height: calc(var(--u) * 6.6);
  margin-top: calc(var(--u) * -1.2);
}
.btn-row.three {
  width: calc(100% + calc(var(--u) * 3));
  margin-left: calc(var(--u) * -1.5);
}
.btn-row.three .btn {
  font-size: calc(var(--u) * 5.2);
  padding: 0 calc(var(--u) * 1.6);
}
.btn-row.three .btn:nth-child(1) {
  font-size: calc(var(--u) * 6.4);
}
/* ensino */
.panel.narrow {
  padding-top: calc(var(--u) * 6.5);
  padding-bottom: calc(var(--u) * 4);
}
.panel.narrow #panelBody {
  gap: calc(var(--u) * 1.4);
}
.panel.narrow #panelRibbon {
  max-width: calc(var(--u) * 64);
  font-size: calc(var(--u) * 7.4);
}
.medal {
  width: calc(var(--u) * 31);
  height: calc(var(--u) * 31);
}
.medal::after {
  background:
    url(./assets/art/sunburst.webp) center / contain no-repeat,
    radial-gradient(circle, rgba(255, 240, 170, 0.8), rgba(255, 240, 170, 0) 60%);
}
.msg.soft {
  border: calc(var(--u) * 0.4) solid rgba(255, 255, 255, 0.6);
  font-size: calc(var(--u) * 4.3);
}
/* ficha */
.panel.card #panelBody {
  overflow: visible;
}
.panel.card .orb.big {
  width: calc(var(--u) * 45);
  height: calc(var(--u) * 45);
  margin-top: 0;
}
.panel.card .name-row .rbtn {
  width: calc(var(--u) * 12.6);
  height: calc(var(--u) * 12.6);
}
.panel.card .stat img {
  filter: saturate(0.7) brightness(1.3) hue-rotate(-12deg);
}
/* enfeite */
.tile::before {
  filter: saturate(0.5) brightness(1.15);
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 1.5) solid #f5a623;
}
.panel.wide {
  padding-bottom: calc(var(--u) * 4.5);
}
/* vitoria */
.panel.win #panelRibbon {
  filter: drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
}
.panel.win .win-card {
  min-height: calc(var(--u) * 40);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(120, 226, 250, 0.2) 100%), rgba(28, 200, 232, 0.26);
}
.mascots::before {
  left: 0;
  right: 0;
  bottom: -26%;
  height: 74%;
  background: url(./assets/art/splash-wide.webp) left bottom / 34% 100% repeat-x;
}
.mascots span {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 23);
}
.panel.win #panelBody {
  gap: calc(var(--u) * 1.2);
  justify-content: flex-start;
  padding-top: calc(var(--u) * 1);
}
.panel.win .btn.big {
  margin-top: calc(var(--u) * 2);
  animation:
    pop 0.35s var(--back) 0.75s both,
    nudge 1.8s ease-in-out 1.6s infinite;
}
@keyframes nudge {
  50% {
    transform: scale(1.045);
  }
}
.panel.win .stars3 img.on {
  animation:
    starIn 0.42s var(--snap) both,
    shine 2.4s ease-in-out 0.6s infinite;
}
@keyframes shine {
  50% {
    filter: brightness(1.25) drop-shadow(0 0 calc(var(--u) * 1.6) #fff3a0);
  }
}
.friend {
  animation: pop 0.45s var(--snap) 0.2s both;
}
.confetti i {
  border-radius: 40% 10%;
}
.floater.big {
  font-size: calc(var(--u) * 13);
  color: #ffe27a;
  z-index: 3;
}

/* ===== Ajuste 7 (telas cheias) ===== */
/* vidro: ciano saturado, quase sem perolado */
.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(130, 228, 250, 0.16) 40%, rgba(60, 196, 236, 0.34) 100%),
    rgba(48, 186, 222, 0.48);
}
.glass::after {
  filter: saturate(0.3) brightness(1.06);
}
.tile::before {
  filter: saturate(0.3) brightness(1.15);
}
.top .rbtn {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
}
.titlebar {
  height: calc(var(--u) * 13);
  font-size: calc(var(--u) * 7.9);
}
.titlebar.glass {
  --bh: calc(var(--u) * 14.8);
}

/* jogo */
.helpers {
  padding: 0 calc(var(--u) * 4.5) calc(var(--u) * 2.2);
}
.helper .cost {
  --bh: calc(var(--u) * 7.8);
  min-width: calc(var(--u) * 7.8);
  font-size: calc(var(--u) * 4.3);
}

/* home */
#btnPlay {
  min-width: calc(var(--u) * 46);
}
#btnPlay::after {
  inset: calc(var(--u) * 3) calc(var(--u) * -7.5) calc(var(--u) * 1);
}
.dock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(110, 224, 250, 0.16) 40%, rgba(50, 190, 234, 0.34) 100%),
    rgba(50, 186, 216, 0.62);
}
.dock-btn span {
  margin-top: calc(var(--u) * -5.8);
  font-size: calc(var(--u) * 4.8);
}

/* mapa */
#worldName {
  --bh: calc(var(--u) * 11.6);
  min-width: calc(var(--u) * 50);
  font-size: calc(var(--u) * 5.6);
}
#worldName::before {
  filter: saturate(0.42) brightness(1.2);
}
#worldName .tx {
  color: #fff;
  -webkit-text-stroke: 0.2em #5a2d0c;
}
#journeyScroll {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 6),
    #000 calc(100% - calc(var(--u) * 8)),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 6),
    #000 calc(100% - calc(var(--u) * 8)),
    transparent 100%
  );
}
.node {
  width: calc(var(--u) * 15.6);
  height: calc(var(--u) * 15.6);
  margin: calc(var(--u) * -7.8) 0 0 calc(var(--u) * -7.8);
  font-size: calc(var(--u) * 5.8);
}
.node.now {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10);
  font-size: calc(var(--u) * 8.2);
}
.node .stars img {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
}
.bead {
  width: calc(var(--u) * 4.2);
  height: calc(var(--u) * 4.2);
  margin: calc(var(--u) * -2.1) 0 0 calc(var(--u) * -2.1);
}
.node .deepmark {
  top: calc(var(--u) * -8);
  right: calc(var(--u) * -6.5);
}
#s-journey .pill {
  font-size: calc(var(--u) * 5.6);
  min-width: calc(var(--u) * 24);
}

/* album */
.cell.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(120, 226, 250, 0.12) 100%), rgba(63, 195, 220, 0.72);
}
.cell .orb {
  border: calc(var(--u) * 0.5) solid rgba(232, 251, 255, 0.85);
}
.cell .orb img {
  inset: 12%;
  width: 76%;
  height: 76%;
}
.cell .name {
  font-size: calc(var(--u) * 4);
  border: calc(var(--u) * 0.75) solid #f5a623;
  background: #fff1d0;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 2);
}

/* dia */
#s-daily .col {
  gap: calc(var(--u) * 1.5);
}
.cal {
  padding: calc(var(--u) * 2.6) calc(var(--u) * 1.6) calc(var(--u) * 4);
  gap: calc(var(--u) * 2.2);
}
.cal-grid {
  gap: calc(var(--u) * 1) calc(var(--u) * 0.2);
}
.pill.month {
  font-size: calc(var(--u) * 6.8);
}
.day.today {
  border: calc(var(--u) * 1.2) solid #ffc93c;
  box-shadow: 0 0 calc(var(--u) * 4.4) calc(var(--u) * 1) #ffd84a;
}
.strip .pill.chip {
  --bh: calc(var(--u) * 13.2);
  font-size: calc(var(--u) * 8.6);
  min-width: calc(var(--u) * 30);
}
.strip {
  gap: calc(var(--u) * 2);
}
#modal[data-kind='win'] .col {
  padding-top: 0;
}
.msg.soft {
  font-size: calc(var(--u) * 3.9);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1.6);
}

/* ===== Feel F5: numeros que se leem ===== */
.floater {
  color: #fff;
  -webkit-text-stroke: 0.24em #4a1f0a;
  font-size: calc(var(--u) * 8.4);
}
.floater.big {
  color: #ffd23a;
  font-size: calc(var(--u) * 14);
}
.floater.mini {
  color: #fff;
  font-size: calc(var(--u) * 6.4);
  animation-duration: 0.8s;
}
.floater.pearl {
  color: #fff;
  font-size: calc(var(--u) * 8.8);
}

/* ===== Ajuste 8: mapa e home ===== */
.node {
  z-index: 2;
}
.bead {
  z-index: 1;
}
.node.lock {
  width: calc(var(--u) * 17.6);
  height: calc(var(--u) * 17.6);
  margin: calc(var(--u) * -8.8) 0 0 calc(var(--u) * -8.8);
}
.node.lock > .tx {
  transform: translateY(-62%);
}
.node.lock::after {
  bottom: 15%;
  width: calc(var(--u) * 6.6);
  height: calc(var(--u) * 6.6);
}
.node .stars img {
  width: calc(var(--u) * 3.5);
  height: calc(var(--u) * 3.5);
}
#s-journey .titlebar {
  height: calc(var(--u) * 11.6);
  --bh: calc(var(--u) * 13.2);
}
#worldName {
  margin-top: calc(var(--u) * 0.8);
}
#worldName::before {
  filter: hue-rotate(-14deg) saturate(0.62) brightness(1.06);
}
#worldName::after {
  inset: calc(var(--u) * -2) calc(var(--u) * -11.5);
  background-size: calc(var(--u) * 11), calc(var(--u) * 10);
}
#s-home .top {
  padding-top: calc(var(--u) * 0.8);
  height: calc(var(--u) * 15);
}
#s-home .pill {
  height: calc(var(--u) * 9.6);
  --bh: calc(var(--u) * 9.6);
}
.dock {
  height: calc(var(--u) * 30);
  padding-bottom: calc(var(--u) * 2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(120, 228, 250, 0.14) 40%, rgba(50, 196, 236, 0.3) 100%),
    rgba(70, 205, 234, 0.8);
}
#btnPlay::after {
  inset: calc(var(--u) * 9) calc(var(--u) * -7) calc(var(--u) * 1);
  background-size: calc(var(--u) * 14.5);
}
.helpers {
  padding-bottom: calc(var(--u) * 3.6);
}
.cell .name {
  border-width: calc(var(--u) * 0.9);
  margin-bottom: calc(var(--u) * 0.6);
}
.cell.unknown .orb::before {
  inset: 10%;
}
.strip .pill.chip img {
  height: calc(var(--u) * 8);
  width: calc(var(--u) * 8);
  margin-left: calc(var(--u) * 1.6);
}
.pill.month {
  outline: calc(var(--u) * 0.5) solid #f5a623;
  outline-offset: calc(var(--u) * -0.6);
  border-radius: 999px;
}

/* ===== Ajuste 8: paineis ===== */
/* vidro dos paineis: azul-petroleo denso (o que estava atras aparecia atraves), sem veu branco */
.panel,
.panel.card,
.panel.wide {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(120, 220, 245, 0.08) 30%, rgba(40, 170, 210, 0.2) 100%),
    rgba(35, 150, 185, 0.86);
}
.panel.narrow #panelBody > *,
.panel.settings #panelBody > *,
.panel.wide #panelBody > * {
  flex: none;
}
/* settings */
.panel.settings {
  margin-top: calc(var(--u) * 7);
  padding-bottom: calc(var(--u) * 4);
}
.panel.settings #panelBody {
  gap: calc(var(--u) * 1);
}
.panel.settings .set-row {
  min-height: calc(var(--u) * 11);
}
input[type='range'].vol::-webkit-slider-runnable-track {
  border: calc(var(--u) * 0.6) solid #ffb829;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0 34%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(90deg, #58d024 0, #3fbf1f var(--v), #55300f var(--v), #55300f 100%);
}
.sel::after {
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3);
  transform: translateY(-50%);
  background: #ffb020;
  filter: none;
  clip-path: polygon(0 12%, 100% 12%, 50% 92%);
}
/* ensino */
.medal {
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
}
.medal::after {
  inset: -70%;
  background:
    url(./assets/art/sunburst.webp) center / contain no-repeat,
    repeating-conic-gradient(from 4deg, rgba(255, 244, 190, 0.5) 0 15deg, rgba(255, 244, 190, 0) 15deg 30deg),
    radial-gradient(circle, rgba(255, 240, 170, 0.85), rgba(255, 240, 170, 0) 62%);
  -webkit-mask-image: radial-gradient(circle, #000 36%, transparent 68%);
  mask-image: radial-gradient(circle, #000 36%, transparent 68%);
}
.msg.up {
  font-size: calc(var(--u) * 8.8);
}
/* derrota e ensino: painel um pouco mais baixo, faixa maior */
.panel.narrow {
  margin-top: calc(var(--u) * 4);
}
.panel.narrow #panelRibbon {
  font-size: calc(var(--u) * 8.1);
  max-width: calc(var(--u) * 66);
}
.hico {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
}
.helpers {
  padding-bottom: calc(var(--u) * 3);
}
/* enfeite */
.tile::before {
  filter: saturate(0.4) brightness(1.3);
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 1.8) solid #ffc21a;
  box-shadow: 0 0 calc(var(--u) * 3.4) rgba(255, 200, 40, 0.85);
}
.panel.wide .btn {
  font-size: calc(var(--u) * 8.6);
}
/* ficha */
.panel.card {
  margin-top: calc(var(--u) * -3);
}
.panel.card .orb.big {
  width: calc(var(--u) * 46.5);
  height: calc(var(--u) * 46.5);
}
.panel.card .orb.big img {
  width: 80%;
  height: 80%;
}
/* vitoria: cartao mais baixo, placa do nome encostada na bolha, tres coroas de respingo */
.panel.win #panelRibbon {
  font-size: calc(var(--u) * 11.2);
}
.panel.win .win-card {
  min-height: 0;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 3);
  box-shadow:
    0 0 calc(var(--u) * 1.6) rgba(127, 232, 255, 0.9),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
}
.win-card > div {
  gap: calc(var(--u) * 0.6);
}
.friend {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
}
.panel.win .stat {
  margin-top: calc(var(--u) * -3.4);
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 5.2);
  --bh: calc(var(--u) * 9.4);
}
.mascots::before {
  display: none;
}
.mascots span::after {
  display: block;
  content: '';
  position: absolute;
  left: -22%;
  right: -22%;
  bottom: -40%;
  height: 92%;
  background: url(./assets/art/splash-crown.webp) center bottom / contain no-repeat;
  transform: none;
}
.mascots span:nth-child(2)::after {
  transform: scaleX(-1);
}

/* ===== Ajuste 9: mapa em serpente (3 fases por fileira), como no desenho de referencia ===== */
.path {
  margin: 0 auto;
}
.node {
  width: calc(var(--u) * 15.4);
  height: calc(var(--u) * 15.4);
  margin: calc(var(--u) * -7.7) 0 0 calc(var(--u) * -7.7);
  font-size: calc(var(--u) * 6);
}
.node.now {
  width: calc(var(--u) * 19.4);
  height: calc(var(--u) * 19.4);
  margin: calc(var(--u) * -9.7) 0 0 calc(var(--u) * -9.7);
  font-size: calc(var(--u) * 8);
}
.node.lock {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  margin: calc(var(--u) * -8.5) 0 0 calc(var(--u) * -8.5);
}
.bead {
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  margin: calc(var(--u) * -2) 0 0 calc(var(--u) * -2);
  background:
    url(./assets/art/glass-orb.webp) center / contain no-repeat,
    radial-gradient(circle, rgba(230, 250, 255, 0.8), rgba(170, 235, 252, 0.35));
}
.node.now::before {
  top: calc(var(--u) * -9.4);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}
/* marca da fase funda: pino laranja com a tartaruga, em cima da fase */
.node .deepmark {
  left: 50%;
  right: auto;
  top: calc(var(--u) * -11);
  margin-left: calc(var(--u) * -5.2);
  width: calc(var(--u) * 10.4);
  height: calc(var(--u) * 10.4);
  border: calc(var(--u) * 0.8) solid #f5a623;
  background:
    url(./assets/art/turtle.webp) center / 70% no-repeat,
    radial-gradient(circle, #7a4a22, #55300f);
}
.node .deepmark::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -2.3);
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  margin-left: calc(var(--u) * -1.3);
  background: #f5a623;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#journeyScroll {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 4),
    #000 calc(100% - calc(var(--u) * 5)),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 4),
    #000 calc(100% - calc(var(--u) * 5)),
    transparent 100%
  );
  padding-top: calc(var(--u) * 2);
}
#s-journey .pill {
  min-width: calc(var(--u) * 22);
  padding-right: calc(var(--u) * 3);
}

/* jogo: fileiras de bolhas so se tocam; ajudas um pouco mais baixas */
.helpers {
  padding-bottom: calc(var(--u) * 2);
}
.helper span {
  font-size: calc(var(--u) * 4.8);
}

/* home: logo no centro, PLAY mais largo, + branco com aro laranja */
.logo.mini {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 2.4);
  width: calc(var(--u) * 29);
  margin-left: calc(var(--u) * -14.5);
}
#btnPlay {
  min-width: calc(var(--u) * 49);
}
#btnPlay small {
  font-size: 0.56em;
}
#btnPlay::after {
  inset: calc(var(--u) * 7) calc(var(--u) * -9.5) calc(var(--u) * 0);
  background-size: calc(var(--u) * 19);
}

/* ===== Ajuste 10: paineis e numeros ===== */
.floater.big {
  color: #fff;
  -webkit-text-stroke: 0.26em #c2410c;
}
.floater.mini {
  animation-duration: 1s;
}
.pill.hit {
  animation: pillhit 0.32s var(--back);
}
@keyframes pillhit {
  30% {
    transform: scale(0.88);
  }
  65% {
    transform: scale(1.08);
  }
}
/* settings */
.panel.settings {
  margin-top: calc(var(--u) * 4.5);
}
.panel.settings #panelBody {
  overflow: visible;
}
.btn-row.three {
  width: calc(100% + calc(var(--u) * 5));
  margin-left: calc(var(--u) * -2.5);
}
.btn-row.three .btn {
  font-size: calc(var(--u) * 5.7);
}
.btn-row.three .btn:nth-child(1) {
  font-size: calc(var(--u) * 6.8);
}
input[type='range'].vol::-webkit-slider-runnable-track {
  border: calc(var(--u) * 0.8) solid #ffb829;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0 36%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(90deg, #7be83a 0, #2fb21a var(--v), #55300f var(--v), #55300f 100%);
}
.sel::after {
  right: calc(var(--u) * 3.6);
}
/* ensino */
.msg.up {
  font-size: calc(var(--u) * 9.8);
  margin-top: calc(var(--u) * -1.4);
}
.panel.narrow #panelBody {
  gap: calc(var(--u) * 1);
}
.msg.soft {
  padding: calc(var(--u) * 2.3) calc(var(--u) * 1.6);
}
.spark {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  filter: saturate(0.35) brightness(1.5) drop-shadow(0 0 calc(var(--u) * 1.2) #fff6c8);
}
.spark:nth-of-type(2) {
  width: calc(var(--u) * 9.6);
  height: calc(var(--u) * 9.6);
}
.spark:nth-of-type(3) {
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
}
.panel.card .spark:nth-of-type(1),
.panel.card .spark:nth-of-type(3) {
  width: calc(var(--u) * 8.6);
  height: calc(var(--u) * 8.6);
}
.panel.card .spark:nth-of-type(2),
.panel.card .spark:nth-of-type(4) {
  width: calc(var(--u) * 6.4);
  height: calc(var(--u) * 6.4);
}
.medal::after {
  background:
    url(./assets/art/sunburst.webp) center / contain no-repeat,
    repeating-conic-gradient(from 4deg, rgba(255, 244, 190, 0.66) 0 15deg, rgba(255, 244, 190, 0) 15deg 30deg),
    radial-gradient(circle, rgba(255, 240, 170, 0.85), rgba(255, 240, 170, 0) 62%);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 70%);
  mask-image: radial-gradient(circle, #000 42%, transparent 70%);
}
/* derrota */
.panel.narrow {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(120, 220, 245, 0.1) 30%, rgba(40, 170, 210, 0.22) 100%),
    rgba(35, 150, 185, 0.74);
}
.btn.wide {
  --bh: calc(var(--u) * 17);
}
.btn.wide.teal {
  --bh: calc(var(--u) * 14.5);
  font-size: calc(var(--u) * 4.6);
}
.panel.narrow .msg.big:not(.up) {
  font-size: calc(var(--u) * 7.9);
}
/* ficha */
.panel.card {
  margin-top: calc(var(--u) * -6);
  padding-top: calc(var(--u) * 6);
}
.rbtn.speak::after {
  inset: 18%;
}
/* enfeite */
.panel.wide #panelRibbon {
  font-size: calc(var(--u) * 6.6);
}
.tile::before {
  filter: saturate(0.5) brightness(1.4) drop-shadow(0 0 calc(var(--u) * 0.8) #6fe7ff);
}
.panel.wide {
  padding-bottom: calc(var(--u) * 3.4);
}
/* vitoria */
.mascots span::after {
  left: -32%;
  right: -32%;
  bottom: -52%;
  height: 122%;
}
.panel.win .win-card {
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.7) rgba(127, 240, 255, 0.9),
    0 0 calc(var(--u) * 2.2) rgba(127, 240, 255, 0.95),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(120, 226, 250, 0.2) 100%), rgba(40, 196, 236, 0.42);
}
.friend {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
}
.panel.win .btn.big {
  margin-top: calc(var(--u) * 4);
  animation:
    pop 0.35s var(--back) 1s both,
    nudge 1.8s ease-in-out 1.9s infinite;
}
.panel.win .btn.sm {
  margin-top: calc(var(--u) * 1.2);
  animation: pop 0.35s var(--back) 1.15s both;
}
.pill.chip.bump {
  animation: chipbump 0.4s var(--back);
}
@keyframes chipbump {
  40% {
    transform: scale(1.3);
  }
}

/* ===== Ajuste 11: defeitos apontados na confirmacao ===== */
.node.now {
  z-index: 4;
  filter: drop-shadow(0 0 calc(var(--u) * 3.6) #ffd54a) drop-shadow(0 0 calc(var(--u) * 1.2) #fff3a0);
}
.path {
  margin-bottom: calc(var(--u) * 9);
}
#journeyScroll {
  padding-top: calc(var(--u) * 5);
}
.node .stars img {
  width: calc(var(--u) * 4.3);
  height: calc(var(--u) * 4.3);
  margin: 0 calc(var(--u) * -0.45);
  filter: saturate(1.3) drop-shadow(0 0 calc(var(--u) * 0.2) #c8601a);
}
.node .stars {
  bottom: 13%;
}
#s-journey .top .rbtn,
#s-album .top .rbtn,
#s-daily .top .rbtn {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}
#btnPlay::after {
  inset: calc(var(--u) * 11) calc(var(--u) * -6) calc(var(--u) * 0);
  background-size: calc(var(--u) * 14.5);
}
.dock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(110, 224, 248, 0.12) 40%, rgba(40, 186, 226, 0.3) 100%),
    rgba(48, 180, 214, 0.84);
}
.cell {
  padding-bottom: calc(var(--u) * 1.8);
}
.cell .name {
  border-width: calc(var(--u) * 0.9);
  font-weight: 700;
  margin-bottom: 0;
}
.cell.unknown .orb::before {
  inset: 19%;
}
.cell .new {
  transform: rotate(8deg);
}
.cal {
  padding-bottom: calc(var(--u) * 2.6);
}
.cal-week {
  font-size: calc(var(--u) * 4.7);
  padding: calc(var(--u) * 0.3) 0;
}
.day {
  -webkit-text-stroke: 0.12em var(--ink);
}
#s-play .badge {
  margin-left: calc(var(--u) * 2);
}

/* ===== Ajuste 11: paineis ===== */
.mascots {
  margin-top: calc(var(--u) * 2.5);
}
.mascots span::after {
  left: -20%;
  right: -20%;
  bottom: -30%;
  height: 78%;
  z-index: 0;
}
.mascots img {
  z-index: 2;
}
.panel.win .win-card {
  margin-top: calc(var(--u) * 2.4);
}
.panel.win .stat {
  margin-top: calc(var(--u) * -4.2);
  min-width: 0;
  padding: 0 calc(var(--u) * 3.6);
}
.win-card .msg.sm {
  margin-top: calc(var(--u) * 0.8);
}
input[type='range'].vol::-webkit-slider-runnable-track {
  border: calc(var(--u) * 0.55) solid #ffc23a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 30%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(90deg, #43d11e 0, #2fa80f var(--v), #55300f var(--v), #55300f 100%);
}
input[type='range'].vol::-webkit-slider-thumb {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  margin-top: calc(var(--u) * -1.3);
  filter: brightness(1.08) saturate(0.5) drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 0.8) rgba(0, 30, 45, 0.5));
}
.panel.settings {
  margin-top: calc(var(--u) * 2.5);
  padding-bottom: calc(var(--u) * 3.2);
}
.panel.narrow {
  margin-top: calc(var(--u) * 1);
  padding-bottom: calc(var(--u) * 3);
}
.panel.narrow.lose {
  margin-top: calc(var(--u) * 5.5);
}
.panel.narrow.lose .hero {
  width: calc(var(--u) * 31);
  height: calc(var(--u) * 31);
  margin-top: 0;
}
.msg.soft {
  font-size: calc(var(--u) * 4.3);
  -webkit-text-stroke: 0.2em var(--ink);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 1.2);
}
.medal::after {
  background:
    url(./assets/art/sunburst.webp) center / contain no-repeat,
    repeating-conic-gradient(from 4deg, rgba(255, 244, 190, 0.7) 0 15deg, rgba(255, 244, 190, 0) 15deg 30deg),
    radial-gradient(circle, rgba(255, 246, 200, 0.95), rgba(255, 240, 170, 0.5) 40%, rgba(255, 240, 170, 0) 64%);
}
.panel.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(120, 220, 245, 0.08) 30%, rgba(40, 170, 210, 0.2) 100%),
    rgba(35, 150, 185, 0.95);
}
.panel.card .bigname {
  font-size: calc(var(--u) * 6.7);
}
.panel.card .spark:nth-of-type(1),
.panel.card .spark:nth-of-type(2) {
  filter: brightness(2) saturate(0.2) drop-shadow(0 0 calc(var(--u) * 1) #fff);
}
.tile {
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.9) rgba(150, 238, 255, 0.95),
    inset 0 0 calc(var(--u) * 3) rgba(190, 246, 255, 0.6);
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 1.6) solid #ffc21a;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.6) #f28c1b,
    0 0 calc(var(--u) * 1.6) rgba(255, 200, 40, 0.8);
}
.panel.wide #panelRibbon {
  font-size: calc(var(--u) * 7.2);
  max-width: calc(var(--u) * 80);
}
.panel.wide .msg.sm {
  font-size: calc(var(--u) * 3.9);
  margin-top: calc(var(--u) * -1);
}

/* ===== Feel F7: numeros ficam onde fazem sentido ===== */
/* +3 e progresso: nasce na boia e desce em direcao a barra (nao sobe para as perolas) */
.floater.big {
  animation: tobar 0.85s var(--out) both;
}
@keyframes tobar {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.2);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 40%) scale(0.7);
  }
}
/* -N do gasto: sai do contador de perolas para baixo, vermelho, e fica meio segundo */
.floater.spend {
  color: #ff6a55;
  -webkit-text-stroke: 0.24em #5a0f08;
  animation: sink 1s var(--out) both;
}
@keyframes sink {
  0% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.6);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -30%) scale(1.15);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 10%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 60%) scale(0.9);
  }
}
.floater.mini {
  color: #fff6c0;
  font-size: calc(var(--u) * 7.4);
}

/* ===== Ajuste 12: ultima passada (mapa, vitoria, album) ===== */
#journeyScroll {
  padding-top: calc(var(--u) * 7);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 11),
    #000 calc(100% - calc(var(--u) * 11)),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 calc(var(--u) * 11),
    #000 calc(100% - calc(var(--u) * 11)),
    transparent 100%
  );
}
.path {
  margin-bottom: calc(var(--u) * 12);
}
.node .stars img {
  width: calc(var(--u) * 3.7);
  height: calc(var(--u) * 3.7);
  margin: 0 calc(var(--u) * -0.1);
}
.node .stars {
  bottom: 16%;
}
.node.now::before {
  top: calc(var(--u) * -8.6);
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
}
#worldName::after {
  inset: calc(var(--u) * -2) calc(var(--u) * -7.5);
}
.panel.win #panelBody {
  gap: calc(var(--u) * 0.8);
  padding-top: 0;
}
.panel.win .stars3 {
  height: calc(var(--u) * 20);
}
.mascots {
  margin-top: calc(var(--u) * 1.6);
  height: calc(var(--u) * 23);
}
.mascots span::after {
  left: -26%;
  right: -26%;
  bottom: -26%;
  height: 92%;
}
.panel.win .win-card {
  margin-top: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(120, 226, 250, 0.14) 100%), rgba(40, 196, 236, 0.46);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.9) #7fe6ff,
    0 0 calc(var(--u) * 2.2) rgba(127, 240, 255, 0.95),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
}
.panel.win .btn.big {
  margin-top: calc(var(--u) * 1.6);
}
.panel.win .btn.sm {
  margin-top: calc(var(--u) * 0.6);
}
.cell.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(120, 226, 250, 0.1) 100%), rgba(52, 186, 216, 0.8);
  box-shadow:
    0 0 0 calc(var(--u) * 0.45) #1b8fb5,
    inset 0 0 0 calc(var(--u) * 0.7) rgba(191, 244, 255, 0.9);
}
.cell {
  height: calc(var(--u) * 37.5);
}
.cell .orb {
  width: calc(var(--u) * 27.2);
  height: calc(var(--u) * 27.2);
  border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.8);
}
.cell .name {
  border: calc(var(--u) * 0.9) solid #f2a33a;
  background: #fff3dc;
  color: #5a3418;
  margin-top: calc(var(--u) * -1.6);
  position: relative;
  z-index: 1;
}
.cell.unknown .orb::before {
  inset: 15%;
}
#s-album .titlebar.plate {
  transform: translateX(calc(var(--u) * 2.5));
}
.ico {
  width: calc(var(--u) * 24.4);
  height: calc(var(--u) * 24.4);
}

/* estrela da vitoria nasce pequena e passa do ponto (antes nascia grande e borrada) */
@keyframes starIn {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-24deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.28) rotate(4deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Ajuste 13: mapa, vitoria e album ===== */
.path svg {
  overflow: visible;
}
/* vitoria: tres jatos separados, um sob cada bicho, mais altos */
.mascots {
  height: calc(var(--u) * 25);
  margin-top: calc(var(--u) * 0.6);
}
.mascots span {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 24);
}
.mascots span::after {
  left: -4%;
  right: -4%;
  bottom: -22%;
  height: 74%;
}
.mascots img {
  height: 74%;
  margin-bottom: 18%;
}
/* album: cartoes na altura do desenho de referencia, placa por cima do pe da bolha */
.cell {
  height: calc(var(--u) * 35.4);
  padding-bottom: calc(var(--u) * 1.4);
}
.cell .orb {
  width: calc(var(--u) * 26.4);
  height: calc(var(--u) * 26.4);
}
.cell .name {
  margin-top: calc(var(--u) * -2.6);
}
.grid {
  gap: calc(var(--u) * 1.5) calc(var(--u) * 2.2);
}
.mascots span::after {
  left: -12%;
  right: -12%;
  bottom: -5%;
  height: 70%;
}
.mascots img {
  height: 70%;
  margin-bottom: 26%;
}
.mascots {
  height: calc(var(--u) * 27);
}
.mascots span {
  height: calc(var(--u) * 26);
}
.mascots {
  margin-top: calc(var(--u) * 2.2);
}

/* ===== Ajuste 14: mapa e vitoria ===== */
.node.now::before {
  top: calc(var(--u) * -10.4);
  width: calc(var(--u) * 12.8);
  height: calc(var(--u) * 12.8);
}
#worldName {
  --bh: calc(var(--u) * 9.6);
  min-width: calc(var(--u) * 40);
  font-size: calc(var(--u) * 4.8);
  margin-top: calc(var(--u) * -0.6);
}
#worldName::after {
  inset: calc(var(--u) * -1.6) calc(var(--u) * -6.5);
  background-size: calc(var(--u) * 8.6), calc(var(--u) * 8);
}
#s-journey .top,
#s-album .top,
#s-daily .top {
  padding-top: calc(var(--u) * 0.6);
  height: calc(var(--u) * 15);
}
#s-journey .pill {
  min-width: 0;
  width: calc(var(--u) * 29);
  font-size: calc(var(--u) * 5.2);
}
.rbtn.back::after {
  inset: 16%;
  filter: brightness(0) invert(1) drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(10, 50, 120, 0.7));
}
#s-journey .top .rbtn,
#s-album .top .rbtn,
#s-daily .top .rbtn {
  width: calc(var(--u) * 13.8);
  height: calc(var(--u) * 13.8);
}
.node.lock {
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.7) rgba(255, 255, 255, 0.75),
    inset 0 0 calc(var(--u) * 2) rgba(200, 246, 255, 0.7);
}
.bead {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  margin: calc(var(--u) * -2.2) 0 0 calc(var(--u) * -2.2);
}
/* vitoria */
.panel.win .stars3 {
  height: calc(var(--u) * 19);
}
.mascots {
  margin-top: calc(var(--u) * 4.4);
  height: calc(var(--u) * 25);
}
.mascots span {
  height: calc(var(--u) * 24);
}
.mascots img {
  height: 64%;
  margin-bottom: 30%;
}
.mascots span::after {
  left: -20%;
  right: -20%;
  bottom: -15%;
  height: 76%;
}
.panel.win .win-card {
  padding-bottom: calc(var(--u) * 3.4);
}
.friend img {
  width: 66%;
  height: 66%;
}
.panel.win .stat {
  margin-top: calc(var(--u) * -5.4);
}
/* album: ultimos acertos */
.cell.glass {
  box-shadow:
    0 0 0 calc(var(--u) * 0.35) rgba(191, 238, 252, 0.9),
    inset 0 0 0 calc(var(--u) * 0.7) rgba(191, 244, 255, 0.9);
}
.cell .new {
  top: calc(var(--u) * 2);
}
.cell.unknown {
  height: calc(var(--u) * 31);
}

/* ===== Ajuste 15: mapa como no recorte do desenho de referencia; fundo antigo do botao verde-agua removido ===== */
.btn.teal,
.btn.teal:active {
  background: none;
}
.bead {
  width: calc(var(--u) * 5.8);
  height: calc(var(--u) * 5.8);
  margin: calc(var(--u) * -2.9) 0 0 calc(var(--u) * -2.9);
  background:
    url(./assets/art/glass-orb.webp) center / 104% no-repeat,
    radial-gradient(
      circle at 40% 35%,
      rgba(255, 255, 255, 0.75),
      rgba(190, 240, 255, 0.5) 55%,
      rgba(150, 225, 250, 0.55)
    );
}
.node > .tx {
  transform: translateY(-34%);
}
.node.now > .tx {
  transform: translateY(-4%);
}
.node .stars {
  bottom: 22%;
}
.node .stars img {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  margin: 0 calc(var(--u) * 0.05);
  filter: saturate(1.25);
}
.node:has(.deepmark) {
  z-index: 3;
}
.node .deepmark {
  top: calc(var(--u) * -11.6);
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin-left: calc(var(--u) * -5.5);
  border: calc(var(--u) * 0.9) solid #f5a623;
  background:
    url(./assets/art/turtle.webp) center / 82% no-repeat,
    radial-gradient(circle at 40% 30%, #eafaff, #9fdcf0);
}
.node.lock {
  border: calc(var(--u) * 0.8) solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.5) rgba(255, 200, 236, 0.55),
    inset 0 0 calc(var(--u) * 2.4) rgba(200, 246, 255, 0.8);
  background:
    url(./assets/art/glass-orb.webp) center / 106% 106% no-repeat,
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.22), rgba(150, 226, 248, 0.34));
}
/* vitoria */
.panel.win {
  padding-top: calc(var(--u) * 8.5);
}
.panel.win .stars3 {
  margin-top: calc(var(--u) * 1.4);
}
.mascots {
  margin-top: calc(var(--u) * 3);
}
.mascots img {
  margin-bottom: 20%;
}
.panel.win .win-card {
  background:
    linear-gradient(180deg, rgba(120, 226, 246, 0.34) 0%, rgba(80, 210, 235, 0.2) 100%), rgba(40, 190, 230, 0.4);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.8) rgba(160, 240, 255, 0.95),
    inset 0 0 0 calc(var(--u) * 1.3) rgba(255, 200, 236, 0.35),
    0 0 calc(var(--u) * 1.3) rgba(127, 240, 255, 0.7),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
}
.win-card .sep {
  margin: calc(var(--u) * 2) 0;
  background: rgba(255, 255, 255, 0.85);
}
.panel.win #panelRibbon {
  filter: drop-shadow(0 0 calc(var(--u) * 0.35) #f5a623) drop-shadow(0 0 calc(var(--u) * 0.35) #f5a623)
    drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
}

/* ===== Ajuste 16: mapa ===== */
/* pino da tartaruga no ombro da fase (em cima cobria o cadeado da fileira seguinte) */
.node .deepmark {
  left: auto;
  right: calc(var(--u) * -6.4);
  top: calc(var(--u) * -6.6);
  margin-left: 0;
  width: calc(var(--u) * 9.6);
  height: calc(var(--u) * 9.6);
}
.node .deepmark::after {
  left: calc(var(--u) * 0.2);
  bottom: calc(var(--u) * -0.6);
  margin-left: 0;
  transform: rotate(42deg);
}
.rbtn.back::after {
  inset: 19%;
  filter: brightness(1.12);
}
#s-journey .pill {
  font-size: calc(var(--u) * 4.7);
}
/* faiscas em volta da fase atual */
.node.now::after {
  content: '';
  position: absolute;
  inset: -34%;
  pointer-events: none;
  animation: twinkle 1.8s ease-in-out infinite;
  background:
    url(./assets/art/sparkle.webp) 2% 34% / 15% no-repeat,
    url(./assets/art/sparkle.webp) 98% 22% / 12% no-repeat,
    url(./assets/art/sparkle.webp) 92% 80% / 10% no-repeat;
  filter: saturate(0.3) brightness(1.5);
}
.node .stars img[src*='star-off'] {
  filter: brightness(2.1) saturate(0.35) opacity(0.7);
}

/* ===== Desempenho ===== */
/* canvas e textos soltos so na coluna do jogo (menos pixels para pintar a cada quadro) */
#stage,
#reef,
#floaters {
  inset: 0 auto auto 50%;
  margin-left: calc(var(--u) * -50);
  width: calc(var(--u) * 100);
  height: 100%;
}
/* escurecer atras do painel: um veu por cima, nao um filtro no canvas (filtro refaz a conta a cada quadro) */
#app[data-dim] #bg,
#app[data-dim] #stage,
#app[data-dim] #reef {
  filter: none;
}
#modal {
  background: rgba(4, 34, 48, 0.32);
}
#modal[data-kind='win'] {
  background: radial-gradient(circle at 50% 22%, rgba(255, 240, 170, 0.38), rgba(255, 240, 170, 0) 48%);
}
/* animacoes em laco so mexem em transform (o navegador nao repinta nada) */
@keyframes nowkit {
  50% {
    transform: scale(1.05);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.025);
  }
}
@keyframes spot {
  50% {
    transform: scale(1.08);
  }
}
@keyframes shine {
  50% {
    transform: scale(1.07);
  }
}

/* placa de nivel: maior, com o texto LEVEL dentro da placa e folga para o numero */
.badge {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 15.4);
  --bh: calc(var(--u) * 15.4);
  gap: 0;
  padding-top: calc(var(--u) * 0.6);
}
.badge small {
  font-size: calc(var(--u) * 3);
  margin-top: 0;
  line-height: 1;
  letter-spacing: 0.03em;
}
.badge b {
  font-size: calc(var(--u) * 6.6);
  line-height: 1.05;
}
.badge::after {
  inset: calc(var(--u) * 1) calc(var(--u) * -3.4) calc(var(--u) * 2) calc(var(--u) * -2.6);
}
#s-play .top {
  height: calc(var(--u) * 16.4);
}

/* ===== Pecas que esticam: tres imagens (ponta, meio, ponta) sobrepostas em 1 px =====
   Fatiar uma imagem so (border-image) deixava um risco "|" na emenda em telas com escala quebrada (125%, 150%). */
.btn::before,
.pill::before,
.badge::before,
.ribbon::before,
.helper span::before,
.helper .cost::before,
.stat::before,
.bigname::before,
#toast::before,
.cell .new::before,
.titlebar.plate::before {
  border: 0;
  border-image: none;
  background:
    var(--l) left center / auto 100% no-repeat,
    var(--r) right center / auto 100% no-repeat,
    var(--m) center / calc(100% - var(--bh) * var(--cap, 0.46) * 2 + 2px) 100% no-repeat;
}
.ribbon {
  --cap: 0.86;
}
.ribbon.brown {
  --cap: 0.6;
}
.helper span {
  --l: url(./assets/art/ui-plate-gold-l.webp);
  --m: url(./assets/art/ui-plate-gold-m.webp);
  --r: url(./assets/art/ui-plate-gold-r.webp);
}
.titlebar.plate {
  --l: url(./assets/art/ui-plate-l.webp);
  --m: url(./assets/art/ui-plate-m.webp);
  --r: url(./assets/art/ui-plate-r.webp);
}
select.lang {
  border: 0;
  border-image: none;
  padding: 0 calc(var(--bh) * 0.46);
  --l: url(./assets/art/ui-btn-teal-l.webp);
  --m: url(./assets/art/ui-btn-teal-m.webp);
  --r: url(./assets/art/ui-btn-teal-r.webp);
  background:
    var(--l) left center / auto 100% no-repeat,
    var(--r) right center / auto 100% no-repeat,
    var(--m) center / calc(100% - var(--bh) * 0.92 + 2px) 100% no-repeat;
}

/* ===== Respiro na tela de jogo ===== */
.helpers {
  height: calc(var(--u) * 25);
  padding: 0 calc(var(--u) * 8) calc(var(--u) * 2.2);
  align-items: flex-end;
}
.helper {
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 22.6);
}
.hico {
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19);
}
.helper span {
  --bh: calc(var(--u) * 6.2);
  font-size: calc(var(--u) * 3.8);
  min-width: calc(var(--u) * 17);
  padding: 0 calc(var(--u) * 2.4);
}
.helper .cost {
  --bh: calc(var(--u) * 6.4);
  min-width: calc(var(--u) * 6.4);
  font-size: calc(var(--u) * 3.6);
  top: calc(var(--u) * -0.6);
  right: calc(var(--u) * 0.4);
}
.rbtn.undo {
  top: calc(var(--u) * 59);
  left: calc(var(--u) * 7);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
}
.banner {
  top: calc(var(--u) * 70);
}
#s-play .top {
  padding-left: calc(var(--u) * 4);
  padding-right: calc(var(--u) * 4);
}
/* mapa: numero no centro quando a fase nao tem estrelas */
.node > .tx {
  transform: none;
}
.node:has(.stars) > .tx {
  transform: translateY(-34%);
}

/* ===== Ajustes finais ===== */
/* Album: sem bolha em volta do bicho (o quadrado de vidro ja emoldura) e bicho no centro do quadrado */
.cell .orb {
  background: none;
  border: 0;
  box-shadow: none;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 25);
}
.cell .orb img {
  inset: 2%;
  width: 96%;
  height: 96%;
}
.cell.unknown .orb::before {
  inset: 5%;
}
.cell.unknown .name {
  display: none;
}
.cell.unknown .orb::after {
  width: 34%;
  height: 44%;
  filter: drop-shadow(0 calc(var(--u) * 0.4) calc(var(--u) * 0.7) rgba(3, 46, 66, 0.6));
}
/* Textos: sem contorno marrom ("nao combina com o jogo"). No lugar, sombra suave azul-petroleo. */
.tx,
.ribbon .tx,
.msg.up,
.msg.soft,
.set-row label,
#worldName .tx,
.day,
.floater,
select.lang {
  -webkit-text-stroke: 0;
  text-shadow:
    0 0.06em 0.08em rgba(3, 46, 66, 0.7),
    0 0 0.2em rgba(3, 46, 66, 0.55),
    0 0 0.45em rgba(3, 46, 66, 0.3);
}
/* Vitoria: na tela mais baixa (coluna 3:5) o MY REEF passava do fim. Sobe tudo e encolhe um pouco estrelas e amigo novo. */
.panel.win {
  padding-top: calc(var(--u) * 5);
}
.panel.win .stars3 {
  height: calc(var(--u) * 17.5);
}
.friend {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
}
/* Legenda do tutorial (fases 1 e 2): no rodape, no lugar das ajudas, que ali ainda estao trancadas */
#guide {
  position: absolute;
  left: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  bottom: calc(var(--u) * 4);
  z-index: 5;
  min-height: calc(var(--u) * 19);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 5.5);
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  background: rgba(8, 72, 100, 0.78);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.6) rgba(170, 240, 255, 0.9),
    0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 30, 45, 0.35);
  animation: pop 0.3s var(--back) both;
}
#guide[hidden] {
  display: none;
}
#guide span {
  white-space: normal;
  font-size: calc(var(--u) * 5);
  line-height: 1.22;
  text-wrap: balance;
}
#app[data-guide] .helpers {
  visibility: hidden;
}
/* Home: brilho do topo da barra mais fraco, icones um pouco menores e textos longe da borda (barra e PLAY) */
.dock {
  padding-bottom: calc(var(--u) * 3.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(110, 224, 248, 0.08) 40%, rgba(40, 186, 226, 0.26) 100%),
    rgba(48, 180, 214, 0.84);
}
.dock.glass::after {
  opacity: 0.55;
}
.ico {
  width: calc(var(--u) * 21.4);
  height: calc(var(--u) * 21.4);
}
.dock-btn span {
  margin-top: calc(var(--u) * -4.4);
  font-size: calc(var(--u) * 4.5);
}
#btnPlay {
  font-size: calc(var(--u) * 9.2);
}
#btnPlay small {
  font-size: 0.6em;
}
/* Placa da fase: duas pontas largas da placa, sem meio (o meio espremido parecia rasurado). 20u = 2 * 102/157 * 15,4u */
.badge::before {
  background:
    url(./assets/art/ui-plate-bl.webp) left center / auto 100% no-repeat,
    url(./assets/art/ui-plate-br.webp) right center / auto 100% no-repeat;
}
/* Final do jogo (vitoria da ultima fase): mensagem e botao do desafio do dia; bichos e amigo novo menores para caber */
.panel.win.last .mascots {
  height: calc(var(--u) * 17);
  margin-top: calc(var(--u) * 2.4);
}
.panel.win.last .mascots span {
  height: calc(var(--u) * 16.4);
}
/* altura e folga em medida fixa: em % o bicho ficava do tamanho antigo e descia para tras do cartao */
.panel.win.last .mascots img {
  height: calc(var(--u) * 14);
  margin-bottom: calc(var(--u) * 3.2);
}
.panel.win.last .friend {
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
}
.panel.win.last .win-card .msg.sm {
  white-space: nowrap;
}
.panel.win.last .btn.sm {
  margin-top: calc(var(--u) * 0.2);
}
.panel.win.last .msg.soft {
  font-size: calc(var(--u) * 4.2);
  margin-top: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3);
  max-width: 92%;
}
.panel.win.last .btn.big {
  font-size: calc(var(--u) * 7.2);
  --bh: calc(var(--u) * 16);
  height: var(--bh);
  margin-top: calc(var(--u) * 1.2);
}
/* Home com o jogo zerado: sem a segunda linha, o JOGAR fica sozinho no centro do botao */
#playSub:empty {
  display: none;
}
/* Aviso curto ("Faltam perolas", "Ainda nao encontrado"): uma regra de grupo o deixava relativo e ele saia por cima da tela, sem ninguem ver */
#toast {
  position: absolute;
}
/* frase de duas linhas (segunda chance): quebra equilibrada, sem palavra sozinha na ultima linha */
.panel .msg {
  text-wrap: balance;
}
/* Bolhas de fundo: sobem acelerando um pouco, balancam de lado, pulsam e somem crescendo no topo. Ficam atras do jogo. */
#bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#bubbles i {
  position: absolute;
  bottom: calc(var(--u) * -8);
  width: calc(var(--u) * var(--s));
  height: calc(var(--u) * var(--s));
  opacity: 0;
  animation: bubRise linear infinite;
  will-change: transform, opacity;
}
#bubbles b {
  display: block;
  width: 100%;
  height: 100%;
  background: url(./assets/art/bubble-sm.webp) center / contain no-repeat;
  animation: bubSway ease-in-out infinite alternate;
}
@keyframes bubRise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  10% {
    transform: translateY(-9vh) scale(1);
    opacity: var(--o);
  }
  90% {
    transform: translateY(calc(-94vh - var(--u) * 6)) scale(1.05);
    opacity: var(--o);
  }
  100% {
    transform: translateY(calc(-100vh - var(--u) * 12)) scale(1.5);
    opacity: 0;
  }
}
@keyframes bubSway {
  from {
    transform: translateX(calc(var(--u) * -1 * var(--sw))) scale(0.94, 1.05);
  }
  to {
    transform: translateX(calc(var(--u) * var(--sw))) scale(1.05, 0.95);
  }
}
[data-motion='reduced'] #bubbles,
#bubbles[hidden],
#app[data-screen='play'] #bubbles i.x {
  display: none;
}
/* Seletor de idioma: a seta ficava por cima de nomes compridos (PORTUGUES, NEDERLANDS). O texto ganha uma faixa so dele, a esquerda da seta. */
.set-row .ctl .sel {
  width: calc(var(--u) * 35);
}
select.lang {
  padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 3.4);
  font-size: calc(var(--u) * 3.7);
}

/* menos movimento: corta animacao e transicao, mantem o estado */
[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;
}
/* o que entra com atraso (botoes e premio da vitoria) aparece na hora: nada importante fica esperando animacao */
[data-motion='reduced'] .panel.win .btn,
[data-motion='reduced'] .pill.chip,
[data-motion='reduced'] .friend,
[data-motion='reduced'] #panelRibbon {
  animation: none !important;
}

/* End of style-3-polish.css */