/* SHOALMATES, folha 2 de 3 (carregada depois de style-1-base.css): vidro, faixas, paineis, vitoria e album.
   As regras daqui valem por cima das mesmas regras da folha anterior. */
/* ===== Ajuste 1: vidro mais vivo e medidas do desenho de referencia ===== */
.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44) 0%, rgba(160, 235, 250, 0.22) 42%, rgba(95, 208, 238, 0.38) 100%),
    rgba(46, 165, 196, 0.36);
  border: calc(var(--u) * 0.9) solid rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.7),
    inset calc(var(--u) * 0.7) 0 0 rgba(255, 190, 236, 0.38),
    inset calc(var(--u) * -0.7) 0 0 rgba(170, 255, 225, 0.38),
    inset 0 calc(var(--u) * -2.6) calc(var(--u) * 4) rgba(255, 255, 255, 0.16),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
}
.panel {
  z-index: 0;
  border-radius: calc(var(--u) * 8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(150, 232, 250, 0.2) 40%, rgba(90, 205, 238, 0.34) 100%),
    rgba(40, 150, 184, 0.9);
}
.panel.narrow {
  width: calc(var(--u) * 76);
}
.panel.wide {
  width: calc(var(--u) * 96);
}
#panelPeek {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -19);
  width: calc(var(--u) * 19);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  animation: bob 2.2s ease-in-out infinite;
}
#panelRibbon {
  z-index: 1;
}
.btn.wide {
  width: calc(var(--u) * 63);
  max-width: 100%;
}

/* settings */
.panel.settings {
  width: calc(var(--u) * 92);
  padding-top: calc(var(--u) * 8.5);
}
.panel.settings #panelBody {
  gap: calc(var(--u) * 1.5);
}
.panel.settings .set-row {
  min-height: calc(var(--u) * 11.6);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 3);
}
.btn-row.three {
  flex-wrap: nowrap;
  gap: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.6);
}
.btn-row.three .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 calc(var(--u) * 2.4);
  --bh: calc(var(--u) * 11.6);
  height: var(--bh);
  font-size: calc(var(--u) * 4.4);
}
input[type='range'].vol::-webkit-slider-thumb {
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
  margin-top: calc(var(--u) * -2.1);
}
input[type='range'].vol::-moz-range-thumb {
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
}
.set-row .ctl .sel {
  position: relative;
  display: block;
  width: calc(var(--u) * 34);
}
.sel::after {
  content: '';
  position: absolute;
  right: calc(var(--u) * 3);
  top: 50%;
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  transform: translateY(-50%) rotate(90deg);
  background: url(./assets/art/ic-right.webp) center / contain no-repeat;
  filter: sepia(1) saturate(8) brightness(1.05);
  pointer-events: none;
}
select.lang {
  text-transform: uppercase;
}

/* jogo: topo e ajudas */
#s-play .top {
  padding-top: calc(var(--u) * 0.6);
  height: calc(var(--u) * 15.6);
}
.badge {
  width: calc(var(--u) * 16.5);
  height: calc(var(--u) * 14);
}
.badge small {
  font-size: calc(var(--u) * 3.3);
}
.badge b {
  font-size: calc(var(--u) * 7);
}
.badge::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.5) calc(var(--u) * -4.6) calc(var(--u) * 1);
  z-index: -2;
  background:
    url(./assets/art/deco-coral.webp) left 40% / calc(var(--u) * 7) no-repeat,
    url(./assets/art/deco-kelp.webp) right 30% / calc(var(--u) * 6) no-repeat;
}
.helpers {
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 2);
}
.helper {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 31);
}
.hico {
  width: calc(var(--u) * 25.5);
  height: calc(var(--u) * 25.5);
}
.helper span {
  --bh: calc(var(--u) * 7.8);
  font-size: calc(var(--u) * 4.9);
  min-width: calc(var(--u) * 23);
}
.helper span::before {
  filter: brightness(1.72) saturate(1.3) hue-rotate(8deg);
}
.helper .cost {
  --bh: calc(var(--u) * 9.4);
  height: var(--bh);
  min-width: calc(var(--u) * 9.4);
  font-size: calc(var(--u) * 5);
  top: calc(var(--u) * -0.4);
}

/* home */
.home-bottom {
  gap: calc(var(--u) * 2.6);
  padding-bottom: calc(var(--u) * 5);
}
#btnPlay {
  --bh: calc(var(--u) * 24);
  height: var(--bh);
  min-width: calc(var(--u) * 52);
  font-size: calc(var(--u) * 11);
}
#btnPlay::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 4) calc(var(--u) * -9) calc(var(--u) * -1);
  z-index: -2;
  background:
    url(./assets/art/deco-kelp.webp) left bottom / calc(var(--u) * 13) no-repeat,
    url(./assets/art/deco-kelp.webp) right bottom / calc(var(--u) * 13) no-repeat;
}
.dock {
  width: calc(var(--u) * 97);
  height: calc(var(--u) * 31);
  border-radius: calc(var(--u) * 9);
}
.dock-btn {
  width: calc(var(--u) * 30);
  font-size: calc(var(--u) * 4.7);
  gap: calc(var(--u) * 0.3);
}
.ico {
  width: calc(var(--u) * 21.5);
  height: calc(var(--u) * 21.5);
  background-image: url(./assets/art/ui-round-teal.webp);
}

/* abertura */
#s-title .col {
  padding-top: calc(var(--u) * 17);
  gap: 0;
}
.logo {
  width: calc(var(--u) * 78);
}
#s-title .ribbon {
  margin-top: calc(var(--u) * -3.5);
  --bh: calc(var(--u) * 12.5);
  height: var(--bh);
  min-width: calc(var(--u) * 62);
  font-size: calc(var(--u) * 6);
  z-index: 1;
}
.pill-btn {
  height: calc(var(--u) * 21);
  width: calc(var(--u) * 82);
  font-size: calc(var(--u) * 9);
  margin-bottom: calc(var(--u) * 22);
}

/* mapa: nome do mundo numa fita clara que fica presa sob o titulo; trilha em tubo de vidro */
.world .ribbon {
  position: sticky;
  top: 0;
  z-index: 3;
  --img: url(./assets/art/ui-ribbon-gold.webp);
  --l: url(./assets/art/ui-ribbon-gold-l.webp);
  --m: url(./assets/art/ui-ribbon-gold-m.webp);
  --r: url(./assets/art/ui-ribbon-gold-r.webp);
  width: max-content;
  min-width: calc(var(--u) * 40);
}
.world .ribbon::before {
  filter: saturate(0.5) brightness(1.14);
}
.world .ribbon .tx {
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-transform: none;
}
.node > .tx {
  transform: translateY(-12%);
}
.node .stars {
  bottom: 9%;
}
.node .stars img {
  width: calc(var(--u) * 4.3);
  height: calc(var(--u) * 4.3);
  margin: 0 calc(var(--u) * -0.2);
}
.node.now {
  animation: nowkit 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(var(--u) * 2.4) #ffd54a);
}
.node.lock {
  font-size: calc(var(--u) * 5.2);
  border: calc(var(--u) * 0.7) solid rgba(255, 255, 255, 0.92);
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.1) 36%,
    rgba(150, 230, 255, 0.3) 72%,
    rgba(255, 255, 255, 0.75) 100%
  );
}
.node.lock > .tx {
  transform: translateY(-42%);
}
.node.lock::after {
  bottom: 10%;
  width: calc(var(--u) * 5.6);
  height: calc(var(--u) * 5.6);
}

/* album */
.grid {
  gap: calc(var(--u) * 2.2);
}
.cell {
  aspect-ratio: 1 / 1.16;
  padding: calc(var(--u) * 1.6);
}
.cell .orb {
  width: 86%;
}
.cell .orb img {
  width: 84%;
  height: 84%;
}
.cell .name {
  font-size: calc(var(--u) * 3.9);
  border: calc(var(--u) * 0.55) solid #f0a030;
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #8a4a16;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4);
  min-width: 72%;
}
.cell.unknown .orb img {
  filter: brightness(0) invert(0.36) sepia(1) saturate(4) hue-rotate(150deg) opacity(0.92);
}
.cell.unknown .orb::after {
  width: 32%;
  height: 32%;
}
.titlebar.plate {
  position: relative;
  isolation: isolate;
  --bh: calc(var(--u) * 11.5);
  height: var(--bh);
  filter: drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
}
.titlebar.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--bh) * 0.46);
  border-image: url(./assets/art/ui-plate.webp) 0 72 fill / 0 calc(var(--bh) * 0.46) stretch;
}

/* desafio do dia */
#s-daily .col {
  gap: calc(var(--u) * 2.4);
}
.cal {
  width: calc(var(--u) * 96);
  padding: calc(var(--u) * 3.5) calc(var(--u) * 3.5) calc(var(--u) * 5);
  gap: calc(var(--u) * 2.6);
}
.pill.month {
  justify-content: center;
  min-width: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 7);
  font-size: calc(var(--u) * 5.6);
  text-transform: uppercase;
  --bh: calc(var(--u) * 11);
  height: var(--bh);
}
.pill.month::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -1) calc(var(--u) * -8);
  z-index: -2;
  background:
    url(./assets/art/deco-coral.webp) left center / calc(var(--u) * 8.5) no-repeat,
    url(./assets/art/deco-kelp.webp) right center / calc(var(--u) * 7.5) no-repeat;
}
.cal-week {
  border: calc(var(--u) * 0.55) solid #f0a030;
  font-size: calc(var(--u) * 4.2);
}
.cal-grid {
  gap: calc(var(--u) * 1.8) calc(var(--u) * 1.2);
}
.day {
  aspect-ratio: 1 / 1.06;
  font-size: calc(var(--u) * 4.4);
  place-items: start center;
  padding-top: 10%;
  border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.92);
  background: radial-gradient(
    circle at 35% 26%,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.1) 36%,
    rgba(140, 225, 250, 0.34) 74%,
    rgba(255, 255, 255, 0.75) 100%
  );
}
.day.done::after {
  bottom: 5%;
  width: 44%;
  height: 44%;
}
.day.today {
  border: calc(var(--u) * 0.9) solid #f6b52a;
  background: radial-gradient(circle at 40% 30%, rgba(255, 240, 170, 0.85), rgba(246, 181, 42, 0.55));
  box-shadow: 0 0 calc(var(--u) * 4) #ffd45a;
}
.day.today::before {
  content: '';
  position: absolute;
  bottom: 5%;
  width: 66%;
  height: 46%;
  background: url(./assets/art/clown.webp) center / contain no-repeat;
}
.day.today.done::before {
  display: none;
}
.strip {
  width: calc(var(--u) * 86);
  height: calc(var(--u) * 19);
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 7);
}
.pill.chip {
  --bh: calc(var(--u) * 12);
  height: var(--bh);
  font-size: calc(var(--u) * 7.4);
  min-width: calc(var(--u) * 28);
  padding-right: calc(var(--u) * 5);
  flex: none;
}
.pill.chip img {
  height: calc(var(--u) * 9);
  width: calc(var(--u) * 9);
}
#btnDaily {
  --bh: calc(var(--u) * 21);
  height: var(--bh);
  min-width: calc(var(--u) * 70);
  font-size: calc(var(--u) * 10);
}

/* ensino: medalha do ajudante com raios e brilhos */
.medal {
  position: relative;
  isolation: isolate;
  width: calc(var(--u) * 33);
  height: calc(var(--u) * 33);
  display: grid;
  place-items: center;
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 1);
}
.medal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(./assets/art/ui-round-blue.webp) center / 100% 100% no-repeat;
}
.medal.sweep::before {
  filter: hue-rotate(52deg) saturate(1.1);
}
.medal.whirl::before {
  background-image: url(./assets/art/ui-round-teal.webp);
}
.medal::after {
  content: '';
  position: absolute;
  inset: -38%;
  z-index: -1;
  background: url(./assets/art/rays.webp) center / contain no-repeat;
  opacity: 0.8;
  animation: spin 16s linear infinite;
  -webkit-mask-image: radial-gradient(circle, #000 32%, transparent 70%);
  mask-image: radial-gradient(circle, #000 32%, transparent 70%);
}
.medal img {
  position: relative;
  width: 62%;
  height: 62%;
  object-fit: contain;
}
.spark {
  position: absolute;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: url(./assets/art/sparkle.webp) center / contain no-repeat;
  animation: twinkle 1.6s ease-in-out infinite;
  pointer-events: none;
}
.spark:nth-of-type(1) {
  left: -14%;
  top: 4%;
}
.spark:nth-of-type(2) {
  right: -16%;
  top: 44%;
  animation-delay: 0.5s;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
}
.spark:nth-of-type(3) {
  left: -20%;
  bottom: 8%;
  animation-delay: 1s;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes twinkle {
  50% {
    transform: scale(0.55) rotate(20deg);
    opacity: 0.6;
  }
}
.msg.up {
  text-transform: uppercase;
  font-size: calc(var(--u) * 9);
}
.msg.soft {
  background: rgba(255, 255, 255, 0.2);
  border: calc(var(--u) * 0.35) solid rgba(255, 255, 255, 0.55);
  border-radius: calc(var(--u) * 5);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 4);
}

/* ficha do peixe: bicho dentro de uma bolha */
.orb.big {
  position: relative;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.92);
  background: radial-gradient(
    circle at 34% 26%,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.1) 34%,
    rgba(150, 230, 255, 0.3) 72%,
    rgba(255, 255, 255, 0.78) 100%
  );
}
.orb.big img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.35));
}

/* enfeite: cartoes maiores */
.panel.wide .tiles {
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3) calc(var(--u) * 1) 0;
}
.panel.wide .btn {
  min-width: calc(var(--u) * 56);
  --bh: calc(var(--u) * 15);
  height: var(--bh);
  font-size: calc(var(--u) * 7);
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 0.9) solid #f2b02a;
}

/* vitoria: tela cheia de festa (sem o tabuleiro atras), como no desenho de referencia */
#app[data-win] #stage,
#app[data-win] #s-play {
  display: none;
}
#app[data-win] #bg {
  filter: none;
}
#modal[data-kind='win'] {
  background: radial-gradient(circle at 50% 22%, rgba(255, 240, 170, 0.38), rgba(255, 240, 170, 0) 48%);
}
.panel.win {
  width: calc(var(--u) * 100);
  height: 100%;
  max-height: 100%;
  padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 6);
  background: none;
  border: 0;
  box-shadow: none;
  justify-content: flex-start;
  gap: 0;
  animation: none;
}
.panel.win #panelRibbon {
  position: static;
  transform: none;
  --bh: calc(var(--u) * 16);
  height: var(--bh);
  min-width: calc(var(--u) * 88);
  max-width: calc(var(--u) * 96);
  font-size: calc(var(--u) * 8.6);
  padding: 0 calc(var(--u) * 12) calc(var(--u) * 1.6);
  animation: stamp 0.38s var(--snap) both;
}
.panel.win #panelBody {
  flex: 1;
  gap: calc(var(--u) * 2);
  overflow: visible;
}
.panel.win .stars3 {
  position: relative;
  isolation: isolate;
  height: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 1);
}
.panel.win .stars3::before {
  content: '';
  position: absolute;
  inset: -45% 12%;
  z-index: -1;
  background: url(./assets/art/rays.webp) center / contain no-repeat;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
}
.panel.win .stars3 img {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
}
.panel.win .stars3 img:nth-child(2) {
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 23);
  margin-bottom: calc(var(--u) * 3);
}
.mascots {
  width: 100%;
  height: calc(var(--u) * 27);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 calc(var(--u) * 3);
}
.mascots span {
  position: relative;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 22);
  display: grid;
  place-items: center;
}
.mascots span::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -26%;
  height: 62%;
  background: url(./assets/art/splash.webp) center / contain no-repeat;
}
.mascots span:nth-child(2)::after {
  transform: scaleX(-1);
}
.mascots img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 80%;
  object-fit: contain;
  animation: jump 0.9s var(--out) infinite alternate;
  filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1.4) rgba(0, 30, 45, 0.35));
}
.mascots span:nth-child(2) img {
  animation-delay: 0.2s;
}
.mascots span:nth-child(3) img {
  animation-delay: 0.4s;
}
@keyframes jump {
  from {
    transform: translateY(12%) rotate(-7deg);
  }
  to {
    transform: translateY(-38%) rotate(7deg);
  }
}
@keyframes stamp {
  from {
    transform: scale(1.7);
    opacity: 0;
  }
}
.panel.win .win-card {
  width: calc(var(--u) * 90);
  padding: calc(var(--u) * 3.5);
  border-radius: calc(var(--u) * 7);
  margin-top: calc(var(--u) * 3);
}
.win-card .msg.sm {
  text-transform: uppercase;
  font-size: calc(var(--u) * 4.6);
}
.friend {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
}
.panel.win .btn.big {
  --bh: calc(var(--u) * 21);
  height: var(--bh);
  min-width: calc(var(--u) * 60);
  font-size: calc(var(--u) * 10.5);
  margin-top: auto;
}
.panel.win .btn.sm {
  --bh: calc(var(--u) * 12.5);
  height: var(--bh);
  min-width: calc(var(--u) * 46);
  font-size: calc(var(--u) * 5.6);
}
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.confetti i {
  position: absolute;
  top: -4%;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 3.8);
  border-radius: calc(var(--u) * 0.5);
  animation: fall linear infinite;
}
@keyframes fall {
  to {
    transform: translateY(calc(var(--u) * 200)) rotate(720deg);
  }
}
.btn.wide.teal {
  font-size: calc(var(--u) * 4.7);
  padding: 0 calc(var(--u) * 4);
}
.panel.narrow .orb.big {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
}

/* ===== Ajuste 2: vidro com aro furta-cor e brilho, bolhas com reflexo ===== */
:root {
  --iri: linear-gradient(135deg, #fff 0%, #ffd0f0 18%, #c4f4ff 38%, #fff 52%, #c9ffe6 70%, #ffe0f4 86%, #fff 100%);
  --bubble: radial-gradient(
    circle at 34% 24%,
    rgba(255, 255, 255, 0.95) 0 6%,
    rgba(255, 255, 255, 0.18) 26%,
    rgba(140, 226, 250, 0.34) 60%,
    rgba(255, 205, 240, 0.5) 84%,
    rgba(190, 255, 236, 0.75) 95%,
    #fff 100%
  );
}
.glass {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(170, 238, 252, 0.2) 38%, rgba(100, 214, 242, 0.36) 100%),
    rgba(60, 180, 214, 0.3);
}
/* aro furta-cor: degrade so na borda (a mascara tira o miolo), acompanha o canto arredondado */
.glass::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.9);
  border-radius: inherit;
  padding: calc(var(--u) * 1);
  background: var(--iri);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}
.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(160, 236, 252, 0.2) 36%, rgba(96, 210, 240, 0.34) 100%),
    rgba(52, 168, 204, 0.74);
}
.panel.glass::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: calc(var(--u) * 1.6);
  height: calc(var(--u) * 2.4);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 0;
}
.panel.win::before,
.panel.win::after {
  display: none;
}
.cell .orb,
.day,
.node.lock,
.friend,
.orb.big {
  background: var(--bubble);
  border-color: rgba(255, 255, 255, 0.95);
}
.pill-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(150, 236, 255, 0.3) 40%, rgba(90, 214, 246, 0.5) 100%),
    rgba(70, 190, 226, 0.4);
}

/* faixa e botoes dos paineis no tamanho do desenho de referencia */
#panelRibbon {
  --bh: calc(var(--u) * 14);
  height: var(--bh);
  font-size: calc(var(--u) * 7.4);
  top: calc(var(--u) * -7);
  padding: 0 calc(var(--u) * 10.5) calc(var(--bh) * 0.1);
  max-width: calc(var(--u) * 92);
}
#panelPeek {
  top: calc(var(--u) * -18.5);
}
#panelClose {
  right: calc(var(--u) * -1);
  top: calc(var(--u) * -5.5);
}
.btn.wide {
  --bh: calc(var(--u) * 15);
  height: var(--bh);
  font-size: calc(var(--u) * 7);
}
.btn.wide.teal {
  font-size: calc(var(--u) * 5);
}
.panel.narrow {
  width: calc(var(--u) * 80);
}
.panel.narrow .btn:not(.sm):not(.wide) {
  --bh: calc(var(--u) * 14.5);
  height: var(--bh);
  font-size: calc(var(--u) * 7);
  min-width: calc(var(--u) * 46);
}
.msg.soft {
  font-size: calc(var(--u) * 4.4);
}
.panel.card {
  width: calc(var(--u) * 90);
}
.panel.card .orb.big {
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
}
.panel.card .card-nav .rbtn {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}
.panel.card .bigname {
  --bh: calc(var(--u) * 12.5);
  height: var(--bh);
  font-size: calc(var(--u) * 7.6);
  min-width: calc(var(--u) * 50);
  justify-content: center;
}
.panel.card .name-row .rbtn {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}
.panel.card .msg {
  font-size: calc(var(--u) * 4.6);
}
.panel.card .stat {
  --bh: calc(var(--u) * 9.4);
  height: var(--bh);
  font-size: calc(var(--u) * 4.6);
}
.spark:nth-of-type(2) {
  right: -22%;
}

/* settings */
.panel.settings .btn-row.three .btn {
  --bh: calc(var(--u) * 13.2);
  height: var(--bh);
  font-size: calc(var(--u) * 5);
}
.set-row .ctl .sel {
  width: calc(var(--u) * 31);
}
select.lang {
  font-size: calc(var(--u) * 3.9);
  padding-right: calc(var(--u) * 3);
}
.sel::after {
  right: calc(var(--u) * 2.6);
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
}

/* jogo: ajudas um pouco maiores */
.helpers {
  height: calc(var(--u) * 36);
}
.helper {
  width: calc(var(--u) * 31);
  height: calc(var(--u) * 33.5);
}
.hico {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
}

/* home: rotulo encosta no botao redondo */
.dock-btn {
  gap: 0;
}
.dock-btn span {
  margin-top: calc(var(--u) * -1.6);
  position: relative;
  z-index: 1;
}
#btnPlay::after {
  inset: calc(var(--u) * -1) calc(var(--u) * -12) calc(var(--u) * -1);
  background-size: calc(var(--u) * 17);
}

/* mapa */
.node.lock::after {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  bottom: 6%;
}
.node .stars img {
  width: calc(var(--u) * 3.8);
  height: calc(var(--u) * 3.8);
}
.world .ribbon::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -1) calc(var(--u) * -7.5);
  z-index: -2;
  background:
    url(./assets/art/deco-coral.webp) left center / calc(var(--u) * 7) no-repeat,
    url(./assets/art/deco-kelp.webp) right center / calc(var(--u) * 6.4) no-repeat;
}

/* album */
.cell {
  aspect-ratio: auto;
  height: calc(var(--u) * 36);
  border-radius: calc(var(--u) * 6.5);
}
.cell .orb {
  position: relative;
  flex: none;
  border-width: calc(var(--u) * 0.6);
}
.cell .orb img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
}
.cell.unknown .orb img {
  filter: brightness(0) opacity(0.6);
}
.cell.unknown .orb::after {
  z-index: 1;
}

/* dia */
.day.today::before {
  width: 84%;
  height: 54%;
  bottom: 3%;
}
#btnDaily {
  font-size: calc(var(--u) * 8.8);
}
.pill.chip {
  --bh: calc(var(--u) * 13.5);
  font-size: calc(var(--u) * 8.4);
  min-width: calc(var(--u) * 32);
}

/* vitoria */
.panel.win #panelRibbon {
  --bh: calc(var(--u) * 20);
  font-size: calc(var(--u) * 9.6);
  top: auto;
}
.win-card .msg.sm {
  font-size: calc(var(--u) * 5.4);
}
.panel.win .stat {
  --bh: calc(var(--u) * 9);
  height: var(--bh);
  font-size: calc(var(--u) * 4.8);
}
.mascots span::after {
  left: -22%;
  right: -22%;
  bottom: -34%;
  height: 78%;
}
.set-row .ctl .sel .lang {
  width: 100%;
}

/* ===== Ajuste 3: ajustes pequenos ===== */
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(160, 236, 252, 0.2) 36%, rgba(96, 210, 240, 0.34) 100%),
    rgba(46, 160, 198, 0.88);
}
.dock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(150, 234, 252, 0.24) 40%, rgba(90, 210, 242, 0.42) 100%),
    rgba(40, 172, 214, 0.62);
}
.pill-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(150, 236, 255, 0.34) 40%, rgba(84, 212, 246, 0.56) 100%),
    rgba(44, 190, 230, 0.55);
}
.node > .tx {
  transform: translateY(-20%);
}
.node .stars {
  bottom: 15%;
}
.panel.settings .btn-row.three .btn {
  font-size: calc(var(--u) * 4.6);
}
.panel.narrow #panelBody {
  gap: calc(var(--u) * 2.2);
}
.panel.narrow .hero {
  width: calc(var(--u) * 29);
  height: calc(var(--u) * 29);
}
.panel.card {
  width: calc(var(--u) * 84);
}
.panel.card .orb.big {
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
}
.cell .new {
  z-index: 2;
}
.cell .name {
  box-shadow: none;
}
.panel.win .btn.sm {
  --bh: calc(var(--u) * 14);
  font-size: calc(var(--u) * 6.4);
}
.confetti i {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 4.6);
}
.panel.wide #panelRibbon {
  max-width: calc(var(--u) * 78);
  font-size: calc(var(--u) * 6.4);
}
.panel.wide .tiles {
  gap: calc(var(--u) * 2);
}
.panel.wide .btn {
  --bh: calc(var(--u) * 17);
  font-size: calc(var(--u) * 8);
}

/* ===== Ajuste 4: faixa grossa de massinha (reta), baiacu apoiado nela, vidro pintado ===== */
/* faixa: a ponta (rabo dobrado + canto) e fixa, 0,86 da altura; o meio estica; o texto fica so no meio */
.ribbon {
  --img: url(./assets/art/ribbon-coral.webp);
  --l: url(./assets/art/ribbon-coral-l.webp);
  --m: url(./assets/art/ribbon-coral-m.webp);
  --r: url(./assets/art/ribbon-coral-r.webp);
  padding: 0 calc(var(--bh) * 0.78) calc(var(--bh) * 0.17);
  min-width: calc(var(--bh) * 2.4);
}
.ribbon::before {
  border-width: 0 calc(var(--bh) * 0.86);
  border-image: var(--img) 0 100 fill / 0 calc(var(--bh) * 0.86) stretch;
}
.ribbon.gold {
  --img: url(./assets/art/ribbon-gold.webp);
  --l: url(./assets/art/ribbon-gold-l.webp);
  --m: url(./assets/art/ribbon-gold-m.webp);
  --r: url(./assets/art/ribbon-gold-r.webp);
}
.ribbon.purple {
  --img: url(./assets/art/ribbon-purple.webp);
  --l: url(./assets/art/ribbon-purple-l.webp);
  --m: url(./assets/art/ribbon-purple-m.webp);
  --r: url(./assets/art/ribbon-purple-r.webp);
}
.ribbon.small {
  padding: 0 calc(var(--bh) * 0.78) calc(var(--bh) * 0.17);
}
.ribbon .tx {
  -webkit-text-stroke: 0.2em #4a1f0a;
}
#panelRibbon {
  --bh: calc(var(--u) * 15.5);
  top: calc(var(--u) * -8);
  font-size: calc(var(--u) * 7.6);
  padding: 0 calc(var(--bh) * 0.78) calc(var(--bh) * 0.17);
  min-width: calc(var(--u) * 52);
}
#s-title .ribbon {
  --bh: calc(var(--u) * 14);
  padding: 0 calc(var(--bh) * 0.78) calc(var(--bh) * 0.17);
}
.world .ribbon {
  --img: url(./assets/art/ribbon-gold.webp);
  --l: url(./assets/art/ribbon-gold-l.webp);
  --m: url(./assets/art/ribbon-gold-m.webp);
  --r: url(./assets/art/ribbon-gold-r.webp);
  --bh: calc(var(--u) * 9.4);
  height: var(--bh);
}
.world .ribbon::before {
  filter: saturate(0.55) brightness(1.12);
}
.panel.win #panelRibbon {
  padding: 0 calc(var(--bh) * 0.78) calc(var(--bh) * 0.17);
}
.panel.wide #panelRibbon {
  max-width: calc(var(--u) * 84);
  font-size: calc(var(--u) * 6.6);
}

/* topo do painel de settings: algas e corais atras da faixa, baiacu com as maos na faixa */
#panelPeek {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(100% + calc(var(--u) * 3.6));
  width: calc(var(--u) * 70);
  height: calc(var(--u) * 24);
  margin-left: calc(var(--u) * -35);
  transform: none;
  animation: none;
  z-index: auto;
  pointer-events: none;
  background:
    url(./assets/art/coral-pink.webp) left calc(var(--u) * 1) bottom / calc(var(--u) * 12) no-repeat,
    url(./assets/art/deco-kelp.webp) left calc(var(--u) * 12) bottom / calc(var(--u) * 11.5) no-repeat,
    url(./assets/art/deco-kelp.webp) right calc(var(--u) * 12) bottom / calc(var(--u) * 11.5) no-repeat,
    url(./assets/art/coral-pink.webp) right calc(var(--u) * 1) bottom / calc(var(--u) * 12) no-repeat;
}
#panelPeek img {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 0.4);
  width: calc(var(--u) * 30);
  margin-left: calc(var(--u) * -15);
  z-index: 2;
  animation: peek 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes peek {
  50% {
    transform: translateY(calc(var(--u) * -0.6)) scale(1.02, 0.985);
  }
}

/* vidro pintado: a peca de arte (luz sobre preto virou transparencia) estica em 9 fatias por cima do fundo em CSS */
.glass {
  --gw: calc(var(--u) * 8.7);
}
.glass::after {
  inset: calc(var(--u) * -0.9);
  padding: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: var(--gw);
  border-image: url(./assets/art/glass-panel.webp) 130 fill / var(--gw) stretch;
}
.panel.glass {
  --gw: calc(var(--u) * 11.5);
}
.panel.glass::before {
  display: none;
}
.cell.glass {
  --gw: calc(var(--u) * 9.4);
}
.win-card.glass {
  --gw: calc(var(--u) * 10);
}
/* pecas em forma de pilula usam a capsula de vidro (pontas = metade da altura) */
.titlebar.glass::after,
.pill-btn.glass::after,
.strip.glass::after {
  border-width: 0 calc(var(--bh) * 0.5);
  border-image: url(./assets/art/glass-pill.webp) 0 92 fill / 0 calc(var(--bh) * 0.5) stretch;
}
.titlebar.glass {
  --bh: calc(var(--u) * 12.8);
}
.pill-btn.glass {
  --bh: calc(var(--u) * 22.8);
}
.strip.glass {
  --bh: calc(var(--u) * 20.8);
  border-radius: 999px;
}
/* bolhas em CSS (album, dias, amigo novo, ficha, fase trancada): a bolha pintada por cima do miolo claro */
.cell .orb,
.day,
.node.lock,
.friend,
.orb.big {
  border-color: transparent;
  background:
    url(./assets/art/glass-orb.webp) center / 104% 104% no-repeat,
    radial-gradient(circle at 50% 55%, rgba(160, 232, 250, 0.3), rgba(120, 215, 245, 0.42));
}
.day.today {
  background:
    url(./assets/art/glass-orb.webp) center / 104% 104% no-repeat,
    radial-gradient(circle at 40% 30%, rgba(255, 240, 170, 0.9), rgba(246, 181, 42, 0.6));
}
#panelPeek {
  width: calc(var(--u) * 58);
  margin-left: calc(var(--u) * -29);
  height: calc(var(--u) * 20);
  background:
    url(./assets/art/coral-pink.webp) left calc(var(--u) * 1) bottom / calc(var(--u) * 9.5) no-repeat,
    url(./assets/art/deco-kelp.webp) left calc(var(--u) * 10) bottom / calc(var(--u) * 9.5) no-repeat,
    url(./assets/art/deco-kelp.webp) right calc(var(--u) * 10) bottom / calc(var(--u) * 9.5) no-repeat,
    url(./assets/art/coral-pink.webp) right calc(var(--u) * 1) bottom / calc(var(--u) * 9.5) no-repeat;
}
#panelPeek img {
  width: calc(var(--u) * 23);
  margin-left: calc(var(--u) * -11.5);
}
/* linhas de settings: tiras de vidro */
.set-row {
  position: relative;
  --bh: calc(var(--u) * 11.6);
  border-color: transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
}
.set-row::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--bh) * 0.5);
  border-image: url(./assets/art/glass-pill.webp) 0 92 fill / 0 calc(var(--bh) * 0.5) stretch;
  opacity: 0.85;
}
.set-row > * {
  position: relative;
  z-index: 1;
}
.floater {
  font-size: calc(var(--u) * 8);
  color: #fff6c0;
}
.rbtn.undo {
  top: calc(var(--u) * 66);
}

/* ===== Ajuste 5 ===== */
/* geral: a cena atras do painel quase nao escurece; vidro verde-agua translucido; furta-cor mais discreto */
#modal {
  background: rgba(4, 34, 48, 0.2);
}
#modal .col {
  padding-top: calc(var(--u) * 6);
}
#app[data-dim] #bg {
  filter: brightness(0.78) saturate(0.95);
}
#app[data-dim] #stage,
#app[data-dim] #reef {
  filter: brightness(0.74) saturate(0.95);
}
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(150, 232, 250, 0.16) 36%, rgba(80, 196, 232, 0.3) 100%),
    rgba(38, 150, 190, 0.66);
}
.glass::after {
  filter: saturate(0.6);
}
#app[data-dim][data-screen='album'] .cell .name,
#app[data-dim][data-screen='album'] .cell .new {
  opacity: 0;
}
.panel.narrow {
  width: calc(var(--u) * 74);
  padding-top: calc(var(--u) * 7.5);
}
.panel.card {
  width: calc(var(--u) * 78);
}
.panel.card .orb.big {
  width: calc(var(--u) * 45);
  height: calc(var(--u) * 45);
}
.panel.card .card-nav {
  gap: calc(var(--u) * 1);
}
.panel.card .card-nav .rbtn {
  width: calc(var(--u) * 10.5);
  height: calc(var(--u) * 10.5);
}
.panel.card .bigname {
  font-size: calc(var(--u) * 6.4);
  min-width: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 6);
}
.rbtn.speak::after {
  filter: brightness(0) invert(1);
}
.panel.card .stat img {
  height: calc(var(--u) * 6.4);
  filter: saturate(0.75) brightness(1.25);
}
.spark {
  width: calc(var(--u) * 8.5);
  height: calc(var(--u) * 8.5);
  filter: saturate(0.15) brightness(1.5);
}
.spark:nth-of-type(2) {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
}
.spark:nth-of-type(3) {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
.spark:nth-of-type(4) {
  right: -12%;
  bottom: 2%;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  animation-delay: 0.8s;
}

/* settings */
.panel.settings #panelRibbon {
  --bh: calc(var(--u) * 13.6);
  top: calc(var(--u) * -7);
  font-size: calc(var(--u) * 6.8);
  min-width: calc(var(--u) * 46);
}
.panel.settings #panelPeek {
  bottom: calc(100% + calc(var(--u) * 3.2));
}
.panel.settings #panelPeek img {
  width: calc(var(--u) * 19.5);
  margin-left: calc(var(--u) * -9.75);
}
.btn-row.three .btn:nth-child(1) {
  flex: 1.32 1 0;
  font-size: calc(var(--u) * 5.4);
}
.btn-row.three .btn:nth-child(2) {
  flex: 1.12 1 0;
}
.btn-row.three .btn:nth-child(3) {
  flex: 0.96 1 0;
}
.sw {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 8.2);
}

/* ensino */
.medal::after {
  inset: -62%;
  opacity: 0.95;
  filter: saturate(0.55) brightness(1.25);
  -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 72%);
  mask-image: radial-gradient(circle, #000 42%, transparent 72%);
}
.msg.up {
  font-size: calc(var(--u) * 10);
  -webkit-text-stroke: 0.2em var(--ink);
}
.panel.narrow .btn:not(.sm):not(.wide) {
  font-size: calc(var(--u) * 8);
}

/* derrota */
.btn.wide {
  --bh: calc(var(--u) * 15.5);
  font-size: calc(var(--u) * 8);
}
.btn.wide.teal {
  font-size: calc(var(--u) * 5);
}
.btn.wide .price {
  font-size: 1.25em;
}
.panel.narrow .hero {
  width: calc(var(--u) * 33);
  height: calc(var(--u) * 33);
  margin-top: calc(var(--u) * -1);
}
.panel.narrow .msg.sm {
  margin-top: calc(var(--u) * -1.6);
}

/* enfeite: cartoes em pe, aro grosso */
.panel.wide {
  padding-left: calc(var(--u) * 3);
  padding-right: calc(var(--u) * 3);
}
.panel.wide .tiles {
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 2.5);
}
.tile {
  aspect-ratio: 1 / 1.06;
  border: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(160, 236, 252, 0.16));
  border-radius: calc(var(--u) * 5.5);
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 1.3) solid #f2b02a;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(200, 246, 255, 0.36));
}
.panel.wide #panelRibbon {
  font-size: calc(var(--u) * 6);
  left: 47%;
}

/* vitoria: medidas do desenho de referencia (faixa 14% da altura, NEXT 11,7%, MY REEF 7,7%) */
.panel.win {
  padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 9);
}
.panel.win #panelRibbon {
  --bh: calc(var(--u) * 21);
  font-size: calc(var(--u) * 10.4);
  padding: 0 calc(var(--bh) * 0.62) calc(var(--bh) * 0.17);
  min-width: calc(var(--u) * 92);
}
.panel.win #panelBody {
  justify-content: center;
  gap: calc(var(--u) * 2);
}
.panel.win .stars3 {
  height: calc(var(--u) * 22);
  margin-top: 0;
}
.mascots {
  position: relative;
  height: calc(var(--u) * 27);
}
.mascots span::after {
  display: none;
}
.mascots::before {
  content: '';
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: -8%;
  height: 52%;
  background: url(./assets/art/splash.webp) left bottom / 34% auto repeat-x;
}
.panel.win .win-card {
  margin-top: calc(var(--u) * 1);
  min-height: calc(var(--u) * 46);
}
.pill.chip {
  --bh: calc(var(--u) * 15);
  font-size: calc(var(--u) * 10);
  min-width: calc(var(--u) * 34);
  padding-left: calc(var(--u) * 3);
  animation: pop 0.4s var(--back) 0.35s both;
}
.pill.chip img {
  height: calc(var(--u) * 10.5);
  width: calc(var(--u) * 10.5);
}
.friend {
  width: calc(var(--u) * 29);
  height: calc(var(--u) * 29);
}
.panel.win .btn.big {
  --bh: calc(var(--u) * 21);
  font-size: calc(var(--u) * 11.6);
  min-width: calc(var(--u) * 60);
  margin-top: calc(var(--u) * 1);
}
.panel.win .btn.sm {
  --bh: calc(var(--u) * 13.7);
  font-size: calc(var(--u) * 6.4);
  min-width: calc(var(--u) * 46);
}
.confetti i {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 5.2);
  opacity: 1;
}
@keyframes fall {
  to {
    transform: translateY(calc(var(--u) * 215)) rotate(540deg);
  }
}

/* jogo */
.pill img {
  filter: drop-shadow(0 0 calc(var(--u) * 0.5) rgba(90, 40, 10, 0.85));
}
.helpers {
  height: calc(var(--u) * 34.5);
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 2.6);
}
.helper {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 31.4);
}
.hico {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
}

/* abertura: placa escura em volta do logo (da peso, como no desenho de referencia) */
.logo {
  filter: drop-shadow(0 0 calc(var(--u) * 1) #0e5a63) drop-shadow(0 0 calc(var(--u) * 1) #0e5a63)
    drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 30, 45, 0.5));
}
.logo.mini {
  filter: drop-shadow(0 0 calc(var(--u) * 0.5) #0e5a63)
    drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1.2) rgba(0, 30, 45, 0.45));
}

/* home */
.ico {
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 23);
}
.dock-btn span {
  margin-top: calc(var(--u) * -3.2);
  font-size: calc(var(--u) * 5.1);
}
.dock {
  height: calc(var(--u) * 31);
  padding-bottom: calc(var(--u) * 0.6);
}
#btnPlay::after {
  inset: calc(var(--u) * 3) calc(var(--u) * -8) calc(var(--u) * -1);
  background-size: calc(var(--u) * 12.5);
}

/* mapa */
.titlebar {
  font-size: calc(var(--u) * 7.2);
}
#journeyScroll {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 9));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 9));
  padding-top: calc(var(--u) * 7);
}
.world .ribbon {
  top: calc(var(--u) * 7.5);
}
.node {
  font-size: calc(var(--u) * 6.2);
}
.node > .tx {
  transform: translateY(-26%);
}
.node .stars {
  bottom: 17%;
}
.node .stars img {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  margin: 0 calc(var(--u) * -0.35);
}
.node.now > .tx {
  transform: translateY(-6%);
}
.node.now::before {
  top: calc(var(--u) * -11.5);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  background-image: url(./assets/art/puffer-front.webp);
}
.node .deepmark {
  top: calc(var(--u) * -6);
  right: calc(var(--u) * -6);
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
  border-radius: 50%;
  background:
    url(./assets/art/glass-orb.webp) center / 104% no-repeat,
    url(./assets/art/turtle.webp) center / 64% no-repeat,
    radial-gradient(circle, rgba(110, 70, 36, 0.92), rgba(80, 48, 22, 0.92));
}

/* album */
.grid {
  gap: calc(var(--u) * 1.6) calc(var(--u) * 2.2);
}
.cell {
  height: calc(var(--u) * 35);
  padding: calc(var(--u) * 1) calc(var(--u) * 0.8);
  gap: calc(var(--u) * 0.5);
}
.cell::after {
  opacity: 0.75;
}
.cell .orb {
  width: calc(var(--u) * 24.6);
  height: calc(var(--u) * 24.6);
  aspect-ratio: auto;
}
.cell .name {
  font-size: calc(var(--u) * 3.7);
  border: calc(var(--u) * 0.7) solid #f5a623;
  min-width: 74%;
  max-width: 99%;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6);
}
.cell .name span {
  max-width: none;
}
.cell.unknown .orb img {
  opacity: 0;
  filter: none;
}
.cell.unknown .orb::before {
  content: '';
  position: absolute;
  inset: 9%;
  background: #0f5a63;
  -webkit-mask: var(--sil) center / contain no-repeat;
  mask: var(--sil) center / contain no-repeat;
}
.cell.unknown .orb::after {
  width: 42%;
  height: 42%;
}

/* dia */
.cal {
  border-radius: calc(var(--u) * 10);
  --gw: calc(var(--u) * 14);
  padding: calc(var(--u) * 3.5) calc(var(--u) * 2.6) calc(var(--u) * 5);
}
.cal-grid {
  gap: calc(var(--u) * 1.2) calc(var(--u) * 0.5);
}
.day {
  font-size: calc(var(--u) * 4.6);
}
.day.done::after {
  width: 54%;
  height: 54%;
  bottom: 2%;
}
.day.today {
  border: calc(var(--u) * 1.2) solid #f6a81e;
  box-shadow: 0 0 calc(var(--u) * 3) calc(var(--u) * 0.8) rgba(255, 184, 0, 0.75);
  overflow: visible;
}
.day.today::before {
  width: 112%;
  height: 62%;
  bottom: -8%;
  z-index: 1;
}
.pill.month::after {
  inset: calc(var(--u) * -2) calc(var(--u) * -11);
  background-size: calc(var(--u) * 11.5), calc(var(--u) * 10);
}
#panelBody > * {
  position: relative;
  z-index: 1;
}
#panelBody > .medal,
#panelBody > .confetti {
  z-index: 0;
}
#panelBody > .confetti {
  position: absolute;
}
.medal::after {
  inset: -44%;
  opacity: 0.9;
}
.msg.soft {
  font-size: calc(var(--u) * 4);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
}
.cell .name {
  font-size: calc(var(--u) * 3.5);
}
.cell .name span {
  max-width: 100%;
}

/* ===== Ajuste 6 ===== */
#modal .col {
  padding-top: calc(var(--u) * 8);
}
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(140, 228, 248, 0.14) 36%, rgba(70, 188, 226, 0.28) 100%),
    rgba(32, 136, 176, 0.76);
}
#panelClose {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  top: calc(var(--u) * -6.5);
  right: calc(var(--u) * -1.5);
}

/* settings */
.set-row .sico {
  width: calc(var(--u) * 10.6);
  height: calc(var(--u) * 10.6);
}
.panel.settings .set-row {
  min-height: calc(var(--u) * 12.2);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 3);
}
input[type='range'].vol::-webkit-slider-runnable-track {
  height: calc(var(--u) * 5.6);
  background: linear-gradient(90deg, #8cf04a 0, #3fc41a var(--v), #55300f var(--v), #55300f 100%);
}
input[type='range'].vol::-webkit-slider-thumb {
  width: calc(var(--u) * 7.2);
  height: calc(var(--u) * 7.2);
  margin-top: calc(var(--u) * -1.4);
}
.btn-row.three .btn:nth-child(1) {
  font-size: calc(var(--u) * 6.2);
}
.badge::after {
  inset: calc(var(--u) * -0.5) calc(var(--u) * -3.4) calc(var(--u) * 1) calc(var(--u) * -2.6);
  background-size: calc(var(--u) * 5.6), calc(var(--u) * 6);
}
.badge small {
  margin-top: calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 3.6);
}

/* ensino */
.panel.narrow {
  padding-bottom: calc(var(--u) * 5);
}
.panel.narrow #panelBody {
  gap: calc(var(--u) * 1.8);
}
.panel.narrow #panelRibbon {
  min-width: 0;
  max-width: calc(var(--u) * 60);
  font-size: calc(var(--u) * 6.6);
}
.medal {
  margin: calc(var(--u) * 2) 0 0;
}
.medal::after {
  inset: -52%;
  opacity: 1;
  filter: none;
  background: url(./assets/art/sunburst.webp) center / contain no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  animation: spin 18s linear infinite;
}
.msg.soft {
  background: rgba(0, 60, 90, 0.3);
  width: 100%;
  padding: calc(var(--u) * 2) calc(var(--u) * 2.4);
}

/* derrota */
.panel.narrow .hero {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  margin-top: calc(var(--u) * -1);
}
.btn.wide {
  --bh: calc(var(--u) * 15.5);
}
.btn.wide.teal {
  --bh: calc(var(--u) * 13.2);
}

/* ficha */
.panel.card {
  padding-left: calc(var(--u) * 3);
  padding-right: calc(var(--u) * 3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(140, 228, 248, 0.12) 36%, rgba(70, 188, 226, 0.24) 100%),
    rgba(30, 140, 170, 0.88);
}
.panel.card .orb.big {
  width: calc(var(--u) * 46.5);
  height: calc(var(--u) * 46.5);
  margin-top: calc(var(--u) * -2);
}
.panel.card .card-nav .rbtn {
  width: calc(var(--u) * 11.7);
  height: calc(var(--u) * 11.7);
}
.panel.card .bigname {
  min-width: calc(var(--u) * 52);
}
.panel.card .spark:nth-of-type(1) {
  left: 2%;
  top: 4%;
  right: auto;
  bottom: auto;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
.panel.card .spark:nth-of-type(2) {
  left: -6%;
  top: 16%;
  right: auto;
  bottom: auto;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
}
.panel.card .spark:nth-of-type(3) {
  left: auto;
  right: 0%;
  top: auto;
  bottom: 10%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
.panel.card .spark:nth-of-type(4) {
  left: auto;
  right: 8%;
  top: auto;
  bottom: 1%;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
}

/* enfeite: cartoes de vidro, escolhido dourado e maior */
.panel.wide {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(140, 228, 248, 0.12) 36%, rgba(70, 188, 226, 0.24) 100%),
    rgba(30, 140, 176, 0.88);
}
.panel.wide #panelRibbon {
  left: 50%;
  max-width: calc(var(--u) * 74);
  font-size: calc(var(--u) * 6);
}
.tile {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border: 0;
  background: rgba(60, 180, 220, 0.35);
  border-radius: calc(var(--u) * 6);
}
.tile::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -0.6);
  pointer-events: none;
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--u) * 7);
  border-image: url(./assets/art/glass-tile.webp) 110 fill / calc(var(--u) * 7) stretch;
  filter: saturate(0.6);
}
.tile img {
  position: relative;
  width: 84%;
  height: 84%;
}
.tile[aria-pressed='true'] {
  border: calc(var(--u) * 1.6) solid #f7b500;
  background: rgba(160, 235, 255, 0.5);
  transform: scale(1.06);
  box-shadow: 0 0 calc(var(--u) * 4) #ffe38a;
  z-index: 1;
}
.panel.wide .tiles {
  padding-top: calc(var(--u) * 4.5);
}

/* vitoria: nada encolhe (os botoes estavam ficando 22% mais finos); respingo e raios pintados */
.panel.win {
  padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 8);
}
.panel.win #panelBody > * {
  flex: none;
}
.panel.win #panelBody {
  gap: calc(var(--u) * 1.4);
}
.panel.win #panelRibbon {
  filter: drop-shadow(0 0 calc(var(--u) * 0.5) #ffb02e) drop-shadow(0 0 calc(var(--u) * 0.5) #ffb02e)
    drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
  animation: dropin 0.5s var(--back) both;
}
@keyframes dropin {
  from {
    transform: translateY(calc(var(--u) * -40));
  }
}
.panel.win .stars3 {
  height: calc(var(--u) * 21);
}
.panel.win .stars3::before {
  inset: -70% 0;
  opacity: 0.95;
  background: url(./assets/art/sunburst.webp) center / contain no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  animation: spin 22s linear infinite;
}
.mascots {
  height: calc(var(--u) * 24);
}
.mascots::before {
  left: -3%;
  right: -3%;
  bottom: -30%;
  height: 86%;
  background: url(./assets/art/splash-wide.webp) center bottom / 100% 100% no-repeat;
}
.panel.win .win-card {
  min-height: calc(var(--u) * 45);
}
.win-card > div:first-child {
  flex: 0.86 1 0;
}
.win-card .msg.sm {
  font-size: calc(var(--u) * 6.2);
}
.friend {
  width: calc(var(--u) * 29);
  height: calc(var(--u) * 29);
  flex: none;
}
.panel.win .btn.big {
  animation: pop 0.35s var(--back) 0.75s both;
}
.panel.win .btn.sm {
  animation: pop 0.35s var(--back) 0.9s both;
}
.confetti i:nth-child(3n) {
  border-radius: 50% 0;
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 6.4);
}

/* jogo: ajudas com a placa dourada sobre a base do circulo */
.helpers {
  height: calc(var(--u) * 33);
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 1.6);
  align-items: flex-end;
}
.helper {
  height: calc(var(--u) * 30.4);
}
.helper span::before {
  filter: none;
  border-image-source: url(./assets/art/ui-plate-gold.webp);
}
.helper span {
  --bh: calc(var(--u) * 8);
  font-size: calc(var(--u) * 5.2);
}

/* abertura */
.logo {
  filter: drop-shadow(calc(var(--u) * 0.8) 0 0 #0e5566) drop-shadow(calc(var(--u) * -0.8) 0 0 #0e5566)
    drop-shadow(0 calc(var(--u) * 0.8) 0 #0e5566) drop-shadow(0 calc(var(--u) * -0.8) 0 #0e5566)
    drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 1.6) rgba(0, 30, 45, 0.5));
}
#s-title .ribbon {
  margin-top: calc(var(--u) * -0.5);
}
.pill-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(130, 232, 255, 0.4) 40%, rgba(70, 206, 244, 0.62) 100%),
    rgba(60, 200, 238, 0.5);
}

/* home */
#btnPlay {
  --bh: calc(var(--u) * 26.4);
}
#btnPlay::after {
  inset: calc(var(--u) * 4) calc(var(--u) * -7.5) calc(var(--u) * -2);
  background-size: calc(var(--u) * 18.5);
}
.dock {
  --gw: calc(var(--u) * 11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(120, 224, 250, 0.2) 40%, rgba(60, 190, 232, 0.36) 100%),
    rgba(27, 143, 176, 0.6);
}
.dock-btn span {
  margin-top: calc(var(--u) * -5);
  font-size: calc(var(--u) * 5.4);
}

/* mapa: nome do mundo no cabecalho (um so, troca conforme a rolagem); trilha com contas de bolha */
#worldName {
  flex: none;
  margin: calc(var(--u) * -1.5) auto calc(var(--u) * 0.5);
  z-index: 3;
  --img: url(./assets/art/ribbon-gold.webp);
  --l: url(./assets/art/ribbon-gold-l.webp);
  --m: url(./assets/art/ribbon-gold-m.webp);
  --r: url(./assets/art/ribbon-gold-r.webp);
  --bh: calc(var(--u) * 9.4);
  height: var(--bh);
  width: max-content;
  min-width: calc(var(--u) * 40);
}
#worldName::before {
  filter: saturate(0.55) brightness(1.12);
}
#worldName .tx {
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-transform: none;
}
#worldName::after {
  content: '';
  position: absolute;
  inset: calc(var(--u) * -1) calc(var(--u) * -7.5);
  z-index: -2;
  background:
    url(./assets/art/deco-coral.webp) left center / calc(var(--u) * 7) no-repeat,
    url(./assets/art/deco-kelp.webp) right center / calc(var(--u) * 6.4) no-repeat;
}
#journeyScroll {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 5));
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--u) * 5));
  padding-top: calc(var(--u) * 3);
}
.bead {
  position: absolute;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  margin: calc(var(--u) * -1.8) 0 0 calc(var(--u) * -1.8);
  background:
    url(./assets/art/glass-orb.webp) center / contain no-repeat,
    radial-gradient(circle, rgba(200, 244, 255, 0.55), rgba(160, 230, 250, 0.2));
  border-radius: 50%;
  pointer-events: none;
}
.node.now::before {
  top: calc(var(--u) * -9);
  width: calc(var(--u) * 12.5);
  height: calc(var(--u) * 12.5);
}

/* album */
.titlebar.plate {
  flex: 0 1 calc(var(--u) * 50);
  margin: 0 auto;
}
#s-album .pill {
  min-width: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 3);
}
.cell.glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(150, 232, 250, 0.2) 100%), rgba(120, 220, 240, 0.25);
}
.cell .orb {
  width: calc(var(--u) * 25.4);
  height: calc(var(--u) * 25.4);
}
.cell .name {
  min-width: calc(var(--u) * 23);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 3);
  border: calc(var(--u) * 0.55) solid #f59e0b;
}
.cell.unknown .orb::before {
  inset: 16%;
}
.cell.unknown .orb::after {
  inset: 0;
  margin: auto;
}

/* dia */
.cal {
  --gw: calc(var(--u) * 11);
}
.cal-week {
  font-size: calc(var(--u) * 5.4);
  padding: calc(var(--u) * 0.6) 0;
  border: calc(var(--u) * 0.7) solid #f0a030;
}
.pill.month {
  --bh: calc(var(--u) * 12);
}
.day.today {
  border: calc(var(--u) * 1.1) solid #ffc21a;
  box-shadow: 0 0 calc(var(--u) * 3.4) calc(var(--u) * 0.6) #ffd84a;
  transform: scale(1.1);
  z-index: 1;
}

/* End of style-2-glass-panels.css */