/* SHOALMATES: interface em DOM/CSS, jogo no canvas.
   --u = 1% da largura da coluna do jogo (definido por src/main.js). Tudo se mede em --u.
   Regras da casa: faixa sempre reta; texto escrito pelo codigo, centralizado, com largura maxima (data-fit encolhe);
   vidro por degrade e brilho de borda (sem backdrop-filter por cima do canvas). */
@font-face {
  font-family: Fredoka;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/fredoka-latin-600.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Fredoka;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/fredoka-latin-700.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Fredoka;
  font-weight: 600;
  font-display: swap;
  src: url(./assets/fonts/fredoka-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Fredoka;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/fredoka-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --u: 4px;
  --ink: #5a2a0a;
  --coral: #f4553c;
  --coral-d: #b02a17;
  --teal: #17b3b0;
  --teal-d: #0b6f78;
  --gold: #ffc64d;
  --gold-d: #f08a24;
  --cream: #fff3d6;
  --out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --back: cubic-bezier(0.3, 1.5, 0.5, 1);
  --snap: cubic-bezier(0.2, 1.8, 0.4, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  overflow: hidden;
  background: #06303d;
  touch-action: manipulation;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
body {
  font-family:
    Fredoka, 'Nunito', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', 'Malgun Gothic', 'Microsoft YaHei', system-ui,
    sans-serif;
  font-weight: 700;
  color: #fff;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#bg {
  position: absolute;
  inset: 0;
  background: #0a6b80;
  transition: filter 0.4s;
  overflow: hidden;
}
#bg::before,
#bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bgimg) center bottom / cover no-repeat;
}
#bg::before {
  display: none;
}
/* tela larga (deitada, computador): a pintura fica na coluna do jogo e os lados recebem a mesma pintura desfocada */
@media (min-aspect-ratio: 3/4) {
  #bg::before {
    display: block;
    inset: -6%;
    background-position: center;
    filter: blur(calc(var(--u) * 4)) brightness(0.72);
  }
  #bg::after {
    left: 50%;
    right: auto;
    width: calc(var(--u) * 124);
    margin-left: calc(var(--u) * -62);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  }
}
#app[data-dim] #bg {
  filter: brightness(0.55) saturate(0.9);
}
#stage,
#reef {
  position: absolute;
  inset: 0;
  display: none;
  touch-action: none;
}
#app[data-screen='play'] #stage {
  display: block;
}
#app[data-screen='home'] #reef,
#app[data-screen='title'] #reef {
  display: block;
}
#app[data-dim] #stage,
#app[data-dim] #reef {
  filter: brightness(0.5) saturate(0.9);
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}
#app[data-screen='title'] #s-title,
#app[data-screen='home'] #s-home,
#app[data-screen='journey'] #s-journey,
#app[data-screen='play'] #s-play,
#app[data-screen='album'] #s-album,
#app[data-screen='daily'] #s-daily {
  display: block;
}
.col {
  position: relative;
  width: calc(var(--u) * 100);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col > * {
  pointer-events: auto;
}

/* texto branco com contorno escuro */
.tx {
  color: #fff;
  -webkit-text-stroke: 0.16em var(--ink);
  paint-order: stroke fill;
  letter-spacing: 0.01em;
  line-height: 1.05;
  white-space: nowrap;
}
[data-fit] {
  display: inline-block;
  max-width: 100%;
}

/* vidro */
.glass {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.36) 0%,
      rgba(190, 240, 255, 0.16) 46%,
      rgba(110, 210, 240, 0.26) 100%
    ),
    rgba(20, 110, 140, 0.22);
  border: calc(var(--u) * 0.55) solid rgba(255, 255, 255, 0.82);
  border-radius: calc(var(--u) * 6);
  box-shadow:
    inset 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--u) * -2.4) calc(var(--u) * 4) rgba(255, 255, 255, 0.12),
    0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
}

/* faixa: sempre reta */
.ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 46);
  max-width: calc(var(--u) * 84);
  height: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 7);
  font-size: calc(var(--u) * 6.4);
  background: linear-gradient(180deg, #ff8a70, var(--coral));
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 3.2) 50%, 100% 100%, 0 100%, calc(var(--u) * 3.2) 50%);
  box-shadow:
    inset 0 calc(var(--u) * 0.8) 0 rgba(255, 255, 255, 0.4),
    inset 0 calc(var(--u) * -1) 0 rgba(120, 20, 10, 0.35);
}
.ribbon.small {
  height: calc(var(--u) * 7.6);
  font-size: calc(var(--u) * 4.2);
  min-width: calc(var(--u) * 34);
}
.ribbon span {
  text-transform: uppercase;
}

/* botoes */
.btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 40);
  max-width: calc(var(--u) * 80);
  height: calc(var(--u) * 13);
  padding: 0 calc(var(--u) * 6);
  border-radius: 999px;
  font-size: calc(var(--u) * 6.2);
  text-transform: uppercase;
  background: linear-gradient(180deg, #ff8168 0%, var(--coral) 55%, #e8402a 100%);
  border: calc(var(--u) * 0.8) solid var(--gold);
  box-shadow:
    0 calc(var(--u) * 1.5) 0 var(--coral-d),
    0 calc(var(--u) * 2.6) calc(var(--u) * 3) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
  transition:
    transform 0.09s var(--out),
    box-shadow 0.09s var(--out);
}
.btn:active {
  transform: translateY(calc(var(--u) * 1.1));
  box-shadow:
    0 calc(var(--u) * 0.4) 0 var(--coral-d),
    0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
}
.btn.teal {
  background: linear-gradient(180deg, #3fd6cf 0%, var(--teal) 55%, #0e9aa0 100%);
  box-shadow:
    0 calc(var(--u) * 1.5) 0 var(--teal-d),
    0 calc(var(--u) * 2.6) calc(var(--u) * 3) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
}
.btn.teal:active {
  box-shadow:
    0 calc(var(--u) * 0.4) 0 var(--teal-d),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
}
.btn.big {
  height: calc(var(--u) * 19);
  min-width: calc(var(--u) * 56);
  font-size: calc(var(--u) * 9.5);
}
.btn.sm {
  height: calc(var(--u) * 11);
  min-width: calc(var(--u) * 24);
  font-size: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 3.5);
}
.btn small {
  font-size: 0.46em;
  text-transform: none;
  margin-top: 0.05em;
}
.btn[disabled] {
  filter: grayscale(0.8) brightness(0.8);
  pointer-events: none;
}
.btn .price {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-left: 0.5em;
}
.btn .price img {
  height: 1em;
}
.btn .row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.rbtn {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  border-radius: 50%;
  flex: none;
  background: linear-gradient(180deg, #2f8fe8, #1458b8);
  border: calc(var(--u) * 0.8) solid var(--gold);
  box-shadow:
    0 calc(var(--u) * 1) 0 #0c3c82,
    0 calc(var(--u) * 2) calc(var(--u) * 2.4) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 0.8) 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.09s var(--out);
  position: relative;
}
.rbtn:active {
  transform: translateY(calc(var(--u) * 0.8)) scale(0.96);
}
.rbtn::after {
  content: '';
  position: absolute;
  inset: 18%;
  background: #fff center / contain no-repeat;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.rbtn.gear {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.5 7.5 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.4 7.4 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7.4 7.4 0 0 0-1.700 1l-2.500-1-2 3.500L6.600 11a7.5 7.5 0 0 0 0 2l-2.100 1.600 2 3.500 2.500-1a7.400 7.400 0 0 0 1.700 1l.400 2.600h4l.400-2.600a7.400 7.400 0 0 0 \
1.700-1l2.500 1 2-3.500zM13 15.200a3.200 3.200 0 1 1 0-6.400 3.200 3.200 0 0 1 0 6.400z' transform='translate(-1 0)'/%3E%3C/svg%3E");
}
.rbtn.back {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4 3 12l8 8v-5h10V9H11z'/%3E%3C/svg%3E");
}
.rbtn.x {
  background-image: linear-gradient(180deg, #ff7765, #e2311c);
  box-shadow:
    0 calc(var(--u) * 1) 0 #8f1d10,
    inset 0 calc(var(--u) * 0.8) 0 rgba(255, 255, 255, 0.4);
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7.500 7.500 5 12 9.500 16.500 5 19 7.500 14.500 12 19 16.500 16.500 19 12 14.500 7.500 19 5 16.500 9.500 12z'/%3E%3C/svg%3E");
}
.rbtn.undo {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 2 10l7 6v-4h5a4 4 0 0 1 0 8h-4v3h4a7 7 0 0 0 0-14H9z'/%3E%3C/svg%3E");
}
.rbtn.arrow-r {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 4 8 8-8 8-2.500-2.500L12 12 6.500 6.500z'/%3E%3C/svg%3E");
  background-image: linear-gradient(180deg, #3fd6cf, #0e9aa0);
  box-shadow:
    0 calc(var(--u) * 0.8) 0 var(--teal-d),
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.4);
}
.rbtn.arrow-l {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 4-8 8 8 8 2.500-2.500L12 12l5.500-5.500z'/%3E%3C/svg%3E");
  background-image: linear-gradient(180deg, #3fd6cf, #0e9aa0);
  box-shadow:
    0 calc(var(--u) * 0.8) 0 var(--teal-d),
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.4);
}
.rbtn.speak {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9zm12.500-1.500v9a5 5 0 0 0 0-9zM15 3.500v2.200a7 7 0 0 1 0 12.600v2.200a9 9 0 0 0 0-17z'/%3E%3C/svg%3E");
  background-image: linear-gradient(180deg, #3fd6cf, #0e9aa0);
  box-shadow:
    0 calc(var(--u) * 0.8) 0 var(--teal-d),
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.4);
}

/* placas do topo */
.top {
  width: 100%;
  height: calc(var(--u) * 16.5);
  padding: calc(var(--u) * 2) calc(var(--u) * 3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  flex: none;
}
.pill {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  height: calc(var(--u) * 10.5);
  min-width: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 1.4);
  border-radius: 999px;
  font-size: calc(var(--u) * 6.4);
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.8) solid var(--gold);
  box-shadow:
    0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.18);
}
.pill img {
  height: calc(var(--u) * 8);
  width: calc(var(--u) * 8);
  object-fit: contain;
}
.pill b {
  flex: 1;
  text-align: center;
}
.badge {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 13);
  border-radius: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.8) solid var(--gold);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.4);
}
.badge small {
  font-size: calc(var(--u) * 2.9);
  text-transform: uppercase;
  max-width: 92%;
  overflow: hidden;
}
.badge b {
  font-size: calc(var(--u) * 6.6);
}
.titlebar {
  flex: 1;
  height: calc(var(--u) * 11);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 4);
  font-size: calc(var(--u) * 6.2);
  text-transform: uppercase;
  border-radius: 999px;
  min-width: 0;
}
.spacer {
  width: calc(var(--u) * 13);
  flex: none;
}

/* abertura */
#s-title .col {
  justify-content: flex-start;
  padding-top: calc(var(--u) * 16);
  gap: calc(var(--u) * 2);
}
.logo {
  width: calc(var(--u) * 84);
  height: auto;
  filter: drop-shadow(0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 30, 45, 0.45));
  pointer-events: none;
}
.logo.mini {
  width: calc(var(--u) * 34);
  flex: none;
}
.title-shoal {
  flex: 1;
  width: 100%;
}
.pill-btn {
  height: calc(var(--u) * 15);
  width: calc(var(--u) * 72);
  border-radius: 999px;
  font-size: calc(var(--u) * 6.6);
  text-transform: uppercase;
  margin-bottom: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 5);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    box-shadow:
      inset 0 calc(var(--u) * 0.7) 0 rgba(255, 255, 255, 0.75),
      0 0 calc(var(--u) * 6) rgba(255, 255, 255, 0.55),
      0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(0, 40, 60, 0.38);
  }
}

/* home */
.home-bottom {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3.5);
  padding-bottom: calc(var(--u) * 4);
}
.dock {
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 25);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * 8);
}
.dock-btn {
  width: calc(var(--u) * 25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 4.1);
  text-transform: uppercase;
  transition: transform 0.09s var(--out);
}
.dock-btn:active {
  transform: scale(0.94);
}
.ico {
  width: calc(var(--u) * 14.5);
  height: calc(var(--u) * 14.5);
  border-radius: 50%;
  border: calc(var(--u) * 0.8) solid var(--gold);
  background: linear-gradient(180deg, #3fa0ee, #1560c0);
  box-shadow:
    0 calc(var(--u) * 1) 0 #0c3c82,
    inset 0 calc(var(--u) * 0.8) 0 rgba(255, 255, 255, 0.4);
  position: relative;
  display: block;
}
.ico::after {
  content: '';
  position: absolute;
  inset: 20%;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.ico.album {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5c3-1.500 6-1.500 9 0v15c-3-1.500-6-1.500-9 0zm11 0c3-1.500 6-1.500 9 0v15c-3-1.500-6-1.500-9 0z'/%3E%3C/svg%3E");
}
.ico.journey {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m2 5 6-2 8 2 6-2v16l-6 2-8-2-6 2zm7 .500v13l6 1.500V7z'/%3E%3C/svg%3E");
}
.ico.daily {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h2v3h8V2h2v3h3v17H3V5h3zm-1 8v10h14V10zm3 2h3v3H8zm5 0h3v3h-3z'/%3E%3C/svg%3E");
}

/* jogo */
#s-play .col {
  justify-content: space-between;
}
.rbtn.undo {
  position: absolute;
  left: calc(var(--u) * 6);
  top: calc(var(--u) * 67.5);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  animation: pop 0.25s var(--back);
}
.helpers {
  width: 100%;
  height: calc(var(--u) * 30);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 2);
  flex: none;
}
.helper {
  position: relative;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition:
    transform 0.09s var(--out),
    filter 0.2s;
}
.helper:active {
  transform: scale(0.94) translateY(calc(var(--u) * 0.6));
}
.hico {
  position: absolute;
  top: 0;
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  border-radius: 50%;
  border: calc(var(--u) * 0.9) solid var(--gold);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    0 calc(var(--u) * 1.2) 0 rgba(0, 40, 70, 0.6),
    0 calc(var(--u) * 2.4) calc(var(--u) * 2.6) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 1.2) 0 rgba(255, 255, 255, 0.45);
}
.helper[data-helper='scoop'] .hico {
  background: radial-gradient(circle at 50% 30%, #6fc4ff, #1b6fd6);
}
.helper[data-helper='sweep'] .hico {
  background: radial-gradient(circle at 50% 30%, #c79bff, #7a3fd8);
}
.helper[data-helper='whirl'] .hico {
  background: radial-gradient(circle at 50% 30%, #8ff0ff, #18a6d4);
}
.hico img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.helper span {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 4.4);
  text-transform: uppercase;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.6);
  border-radius: 999px;
  max-width: calc(var(--u) * 28);
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.6) solid var(--gold);
}
.helper .cost {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(var(--u) * -1);
  min-width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: calc(var(--u) * 4.4);
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.6) solid var(--gold);
}
.helper.off {
  filter: grayscale(0.9) brightness(0.7);
}
.helper.locked {
  filter: grayscale(1) brightness(0.55);
  pointer-events: none;
}
.helper.poor .cost {
  background: linear-gradient(180deg, #9a2f22, #6a160d);
}
.helper.spot {
  animation: spot 1s ease-in-out infinite;
  z-index: 5;
}
@keyframes spot {
  50% {
    filter: drop-shadow(0 0 calc(var(--u) * 3) #fff6a8);
  }
}
.banner {
  position: absolute;
  top: calc(var(--u) * 78);
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: bannerIn 1.5s var(--out) both;
}
@keyframes bannerIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  14% {
    transform: scale(1.08);
    opacity: 1;
  }
  22% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--u) * -4));
  }
}

/* listas com rolagem */
.scroll {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 8);
  scrollbar-width: none;
  touch-action: pan-y;
}
.scroll::-webkit-scrollbar {
  display: none;
}

/* mapa */
.world {
  position: relative;
  width: 100%;
  margin-bottom: calc(var(--u) * 4);
}
.world .ribbon {
  margin: 0 auto calc(var(--u) * 2);
}
.path {
  position: relative;
  width: 100%;
}
.path svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.node {
  position: absolute;
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  margin: calc(var(--u) * -8.5) 0 0 calc(var(--u) * -8.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 7);
  background: linear-gradient(180deg, #ff8168, #e8402a);
  border: calc(var(--u) * 0.8) solid var(--gold);
  box-shadow:
    0 calc(var(--u) * 1.2) 0 var(--coral-d),
    0 calc(var(--u) * 2) calc(var(--u) * 2.4) rgba(0, 30, 45, 0.4),
    inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.09s var(--out);
}
.node:active {
  transform: scale(0.94);
}
.node .stars {
  position: absolute;
  bottom: calc(var(--u) * -3.2);
  display: flex;
  gap: 0;
}
.node .stars img {
  width: calc(var(--u) * 5.2);
  height: calc(var(--u) * 5.2);
  margin: 0 calc(var(--u) * -0.3);
}
.node.now {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -11);
  font-size: calc(var(--u) * 9);
  animation: now 1.6s ease-in-out infinite;
}
@keyframes now {
  50% {
    box-shadow:
      0 calc(var(--u) * 1.2) 0 var(--coral-d),
      0 0 calc(var(--u) * 7) #fff3a0,
      inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.45);
  }
}
.node.now::before {
  content: '';
  position: absolute;
  top: calc(var(--u) * -12);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  background: url(./assets/art/puffer.webp) center / contain no-repeat;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  50% {
    transform: translateY(calc(var(--u) * -1.6));
  }
}
.node.lock {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(150, 225, 250, 0.22));
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.3);
  pointer-events: none;
}
.node.lock::after {
  content: '';
  position: absolute;
  bottom: calc(var(--u) * -2.6);
  width: calc(var(--u) * 6.5);
  height: calc(var(--u) * 6.5);
  background: url(./assets/art/padlock.webp) center / contain no-repeat;
}
.node.deep::marker {
  content: '';
}
.node .deepmark {
  position: absolute;
  top: calc(var(--u) * -4.5);
  right: calc(var(--u) * -4.5);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  background: url(./assets/art/turtle.webp) center / contain no-repeat;
}

/* album */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 2.6);
}
.cell {
  position: relative;
  aspect-ratio: 1 / 1.12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 5);
  transition: transform 0.09s var(--out);
}
.cell:active {
  transform: scale(0.96);
}
.cell .orb {
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.08) 38%,
    rgba(150, 230, 255, 0.22) 72%,
    rgba(255, 255, 255, 0.7) 100%
  );
  border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.85);
}
.cell .orb img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}
.cell .name {
  font-size: calc(var(--u) * 3.6);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.6);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  -webkit-text-stroke: 0;
  border: calc(var(--u) * 0.5) solid #a05a1c;
  max-width: 98%;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
.cell .name span {
  white-space: nowrap;
}
.cell.unknown .orb img {
  filter: brightness(0) saturate(0) opacity(0.45);
}
.cell.unknown .orb::after {
  content: '?';
  position: absolute;
  font-size: calc(var(--u) * 11);
  color: #fff;
  -webkit-text-stroke: 0.14em #0b4a5a;
  paint-order: stroke fill;
}
.cell.unknown .name {
  visibility: hidden;
}
.cell .new {
  position: absolute;
  top: calc(var(--u) * -1);
  right: calc(var(--u) * -1);
  font-size: calc(var(--u) * 3.2);
  padding: calc(var(--u) * 0.4) calc(var(--u) * 1.6);
  border-radius: 999px;
  background: var(--coral);
  border: calc(var(--u) * 0.4) solid var(--gold);
  text-transform: uppercase;
}

/* desafio do dia */
#s-daily .col {
  gap: calc(var(--u) * 3);
}
.cal {
  width: calc(var(--u) * 92);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
}
.cal-week,
.cal-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 1.4);
  text-align: center;
}
.cal-week {
  font-size: calc(var(--u) * 3.8);
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  padding: calc(var(--u) * 1) 0;
  border: calc(var(--u) * 0.5) solid #a05a1c;
}
.day {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 4.4);
  background: rgba(255, 255, 255, 0.14);
  border: calc(var(--u) * 0.4) solid rgba(255, 255, 255, 0.7);
}
.day.done::after {
  content: '';
  position: absolute;
  bottom: -8%;
  width: 46%;
  height: 46%;
  background: url(./assets/art/pearl.webp) center / contain no-repeat;
}
.day.today {
  border-color: var(--gold);
  box-shadow: 0 0 calc(var(--u) * 3) #ffe38a;
  background: rgba(255, 220, 120, 0.3);
}
.day.pad {
  visibility: hidden;
}
.strip {
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 13);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 5.2);
  padding: 0 calc(var(--u) * 4);
  border-radius: 999px;
}
.strip img {
  height: 66%;
}
.strip span {
  min-width: 0;
  flex: 0 1 auto;
}
.note {
  font-size: calc(var(--u) * 4.2);
  white-space: normal;
  text-align: center;
  padding: 0 calc(var(--u) * 6);
}

/* paineis por cima do jogo */
#modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(4, 34, 48, 0.5);
  animation: fade 0.18s var(--out);
}
#modal .col {
  justify-content: center;
}
.panel {
  position: relative;
  width: calc(var(--u) * 88);
  max-height: 92%;
  padding: calc(var(--u) * 9) calc(var(--u) * 5) calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(160, 232, 250, 0.2) 40%, rgba(90, 200, 235, 0.3) 100%),
    rgba(14, 96, 124, 0.62);
  animation: panelIn 0.32s var(--back) both;
}
@keyframes panelIn {
  from {
    transform: scale(0.82) translateY(calc(var(--u) * 4));
    opacity: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
#panelRibbon {
  position: absolute;
  top: calc(var(--u) * -5.5);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}
#panelClose {
  position: absolute;
  top: calc(var(--u) * -4);
  right: calc(var(--u) * -3);
  width: calc(var(--u) * 11.5);
  height: calc(var(--u) * 11.5);
  z-index: 2;
}
#panelBody {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.msg {
  font-size: calc(var(--u) * 5);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}
.msg.big {
  font-size: calc(var(--u) * 7.4);
}
.msg.sm {
  font-size: calc(var(--u) * 3.6);
}
.hero {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 30, 45, 0.4));
}
.hero.round {
  border-radius: 50%;
  border: calc(var(--u) * 1) solid var(--gold);
  padding: calc(var(--u) * 4);
  box-shadow:
    0 0 0 calc(var(--u) * 3) rgba(255, 246, 170, 0.25),
    0 0 calc(var(--u) * 10) rgba(255, 240, 150, 0.7);
}
.hero.scoop {
  background: radial-gradient(circle at 50% 30%, #6fc4ff, #1b6fd6);
}
.hero.sweep {
  background: radial-gradient(circle at 50% 30%, #c79bff, #7a3fd8);
}
.hero.whirl {
  background: radial-gradient(circle at 50% 30%, #8ff0ff, #18a6d4);
}
.btn-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2.4);
  flex-wrap: wrap;
}

/* settings */
.set-row {
  width: 100%;
  min-height: calc(var(--u) * 13.5);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3);
  border-radius: calc(var(--u) * 4.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border: calc(var(--u) * 0.35) solid rgba(255, 255, 255, 0.6);
}
.set-row label {
  flex: 1 1 0;
  min-width: 0;
  font-size: calc(var(--u) * 4.6);
  text-transform: uppercase;
  overflow: hidden;
}
.set-row .sico {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  flex: none;
  background: #fff;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  filter: drop-shadow(0 0 0 var(--ink));
}
.set-row .ctl {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}
.set-row .ctl .vol,
.set-row .ctl .lang {
  width: calc(var(--u) * 38);
}
.sico.music {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v11.500a3.500 3.500 0 1 0 2 3.200V8l8-2v6.500a3.500 3.500 0 1 0 2 3.200V1z'/%3E%3C/svg%3E");
}
.sico.sfx {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9zm12.500-1.500v9a5 5 0 0 0 0-9zM15 3.500v2.200a7 7 0 0 1 0 12.600v2.200a9 9 0 0 0 0-17z'/%3E%3C/svg%3E");
}
.sico.voice {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a3.500 3.500 0 0 0-3.500 3.500v6a3.500 3.500 0 0 0 7 0v-6A3.500 3.500 0 0 0 12 2zM5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.900V21h3v2H8v-2h3v-3.100A7 7 0 0 1 5 11z'/%3E%3C/svg%3E");
}
.sico.vib {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 3v13h8V5zM2 8h2v8H2zm18 0h2v8h-2z'/%3E%3C/svg%3E");
}
.sico.motion {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12c-2.500-4-6-6-9.500-6S6.200 8 5 9.500L1 6v12l4-3.500C6.200 16 9 18 12.500 18s7-2 9.500-6zm-6-1.500a1.500 1.500 0 1 1 0 3 1.500 1.500 0 0 1 0-3z'/%3E%3C/svg%3E");
}
.sico.lang {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.900 6h-3a15 15 0 0 0-1.300-3.500A8 8 0 0 1 18.900 8zM12 4c.800 1 1.500 2.400 1.900 4h-3.800c.400-1.600 1.100-3 1.900-4zM4.300 14a8 8 0 0 1 0-4h3.400a16 16 0 0 0 0 4zm.800 2h3a15 15 0 0 0 1.300 3.500A8 8 0 0 1 \
5.100 16zm3-8h-3a8 8 0 0 1 4.300-3.500A15 15 0 0 0 8.100 8zM12 20c-.800-1-1.500-2.400-1.900-4h3.800c-.400 1.600-1.100 3-1.900 4zm2.300-6H9.700a14 14 0 0 1 0-4h4.600a14 14 0 0 1 0 4zm.300 5.500a15 15 0 0 0 1.300-3.500h3a8 8 0 0 1-4.300 3.500zM16.300 14a16 16 0 0 0 0-4h3.400a8 8 0 0 1 0 4z'/%3E%3C/svg%3E");
}

/* barra de volume */
input[type='range'].vol {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: calc(var(--u) * 9);
  background: none;
  cursor: pointer;
  --v: 70%;
  touch-action: none;
}
input[type='range'].vol::-webkit-slider-runnable-track {
  height: calc(var(--u) * 4.6);
  border-radius: 999px;
  border: calc(var(--u) * 0.6) solid var(--gold);
  background: linear-gradient(90deg, #7af04c 0, #2fbf3a var(--v), #55300f var(--v), #55300f 100%);
}
input[type='range'].vol::-moz-range-track {
  height: calc(var(--u) * 3.6);
  border-radius: 999px;
  border: calc(var(--u) * 0.6) solid var(--gold);
  background: linear-gradient(90deg, #7af04c 0, #2fbf3a var(--v), #55300f var(--v), #55300f 100%);
}
input[type='range'].vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--u) * 8.6);
  height: calc(var(--u) * 8.6);
  margin-top: calc(var(--u) * -2.6);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f1e4c6);
  border: calc(var(--u) * 0.7) solid var(--gold);
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.2) rgba(0, 30, 45, 0.5);
}
input[type='range'].vol::-moz-range-thumb {
  width: calc(var(--u) * 7.2);
  height: calc(var(--u) * 7.2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f1e4c6);
  border: calc(var(--u) * 0.7) solid var(--gold);
}
/* liga/desliga */
.sw {
  position: relative;
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 9.4);
  border-radius: 999px;
  border: calc(var(--u) * 0.6) solid var(--gold);
  background: linear-gradient(180deg, #70757d, #4b4f56);
  transition: background 0.18s;
}
.sw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--u) * 0.5);
  width: calc(var(--u) * 7.2);
  height: calc(var(--u) * 7.2);
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #fff, #f1e4c6);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 30, 45, 0.5);
  transition: left 0.22s var(--back);
}
.sw[aria-checked='true'] {
  background: linear-gradient(180deg, #7af04c, #2fbf3a);
}
.sw[aria-checked='true']::after {
  left: calc(var(--u) * 10);
}
select.lang {
  width: 100%;
  height: calc(var(--u) * 9.4);
  border-radius: 999px;
  border: calc(var(--u) * 0.6) solid var(--gold);
  background: linear-gradient(180deg, #3fd6cf, #0e9aa0);
  color: #fff;
  font: inherit;
  font-size: calc(var(--u) * 4.2);
  padding: 0 calc(var(--u) * 3);
  text-align: center;
  text-align-last: center;
}
select.lang option {
  color: #123;
  background: #fff;
}

/* vitoria */
.stars3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * 1);
  height: calc(var(--u) * 26);
}
.stars3 img {
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  opacity: 0;
  transform: scale(2.4) rotate(-20deg);
}
.stars3 img:nth-child(2) {
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 27);
  margin-bottom: calc(var(--u) * 2);
}
.stars3 img.on {
  animation: starIn 0.42s var(--snap) both;
}
.stars3 img.off {
  opacity: 0.55;
  transform: none;
}
@keyframes starIn {
  from {
    opacity: 0;
    transform: scale(2.6) rotate(-24deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.win-card {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border: calc(var(--u) * 0.35) solid rgba(255, 255, 255, 0.6);
}
.win-card > div {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.4);
}
.win-card .sep {
  flex: 0 0 calc(var(--u) * 0.5);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 9px;
}
.reward {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 9);
}
.reward img {
  height: calc(var(--u) * 11);
}
.friend {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.08) 38%,
    rgba(150, 230, 255, 0.22) 72%,
    rgba(255, 255, 255, 0.7) 100%
  );
  border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.85);
  animation: pop 0.4s var(--back) 0.9s both;
}
.friend img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
.tag {
  font-size: calc(var(--u) * 3.8);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.4);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  -webkit-text-stroke: 0;
  border: calc(var(--u) * 0.5) solid #a05a1c;
  max-width: 100%;
}
.stat {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 4);
  padding: calc(var(--u) * 1) calc(var(--u) * 3.5);
  border-radius: 999px;
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.6) solid var(--gold);
  max-width: 100%;
}
.stat img {
  height: calc(var(--u) * 5);
}
.card-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
}
.card-nav .rbtn {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}
.name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  max-width: 100%;
}
.name-row .rbtn {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
}
.bigname {
  font-size: calc(var(--u) * 7);
  text-transform: uppercase;
  padding: calc(var(--u) * 1) calc(var(--u) * 4);
  border-radius: 999px;
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.6) solid var(--gold);
  min-width: 0;
}
.tiles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 2.4);
}
.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 4.5);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.7);
  transition: transform 0.12s var(--back);
}
.tile img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.tile[aria-pressed='true'] {
  border-color: var(--gold);
  box-shadow: 0 0 calc(var(--u) * 4) #ffe38a;
  transform: scale(1.05);
}
.tile[aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  top: calc(var(--u) * -2);
  right: calc(var(--u) * -2);
  width: calc(var(--u) * 7.5);
  height: calc(var(--u) * 7.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 5);
  background: #2fbf3a;
  border: calc(var(--u) * 0.5) solid #fff;
}

/* avisos soltos */
#toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 36);
  transform: translateX(-50%);
  z-index: 30;
  font-size: calc(var(--u) * 4.6);
  padding: calc(var(--u) * 2) calc(var(--u) * 5);
  border-radius: 999px;
  background: linear-gradient(180deg, #7a4520, #55300f);
  border: calc(var(--u) * 0.6) solid var(--gold);
  animation: toast 1.8s var(--out) both;
  pointer-events: none;
  max-width: 92vw;
}
@keyframes toast {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: calc(var(--u) * 5.4);
  display: flex;
  align-items: center;
  gap: 0.25em;
  animation: rise 1.15s var(--out) both;
}
.floater img {
  height: 1.1em;
}
.floater.gold {
  color: #ffe27a;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.5);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -220%) scale(1);
  }
}
#rotate {
  display: none;
}

/* ===== Kit de interface (assets/art/ui-*.webp e ic-*.webp) =====
   Botao, faixa e placa sao IMAGEM que estica so no meio (pontas fixas); o texto vai por cima, escrito pelo codigo.
   Cada peca declara a propria altura em --bh, porque a ponta fixa mede uma fracao da altura.
   O vidro continua em CSS: e translucido, e recorte por cor estraga a transparencia. */
.btn,
.pill,
.badge,
.ribbon,
.helper span,
.helper .cost,
.stat,
.bigname,
#toast,
.cell .new {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
}
.btn::before,
.pill::before,
.badge::before,
.ribbon::before,
.helper span::before,
.helper .cost::before,
.stat::before,
.bigname::before,
#toast::before,
.cell .new::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: var(--img) 0 72 fill / 0 calc(var(--bh) * 0.46) stretch;
}
.btn {
  --bh: calc(var(--u) * 13);
  --img: url(./assets/art/ui-btn-coral.webp);
  --l: url(./assets/art/ui-btn-coral-l.webp);
  --m: url(./assets/art/ui-btn-coral-m.webp);
  --r: url(./assets/art/ui-btn-coral-r.webp);
  height: var(--bh);
}
.btn.teal {
  --img: url(./assets/art/ui-btn-teal.webp);
  --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);
  box-shadow: none;
}
.btn.big {
  --bh: calc(var(--u) * 19);
  height: var(--bh);
}
.btn.sm {
  --bh: calc(var(--u) * 11);
  height: var(--bh);
}
.btn:active,
.btn.teal:active {
  transform: translateY(calc(var(--u) * 0.9)) scale(0.985);
  box-shadow: none;
  filter: brightness(0.93) drop-shadow(0 calc(var(--u) * 0.3) calc(var(--u) * 0.5) rgba(0, 30, 45, 0.38));
}
.pill,
.badge,
.helper span,
.helper .cost,
.stat,
.bigname,
#toast {
  --img: url(./assets/art/ui-plate.webp);
  --l: url(./assets/art/ui-plate-l.webp);
  --m: url(./assets/art/ui-plate-m.webp);
  --r: url(./assets/art/ui-plate-r.webp);
}
.pill {
  --bh: calc(var(--u) * 10.5);
}
.badge {
  --bh: calc(var(--u) * 13);
  border-radius: 0;
}
.helper span {
  --bh: calc(var(--u) * 6.8);
  height: var(--bh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--u) * 3.2);
  min-width: calc(var(--u) * 22);
}
.helper .cost {
  position: absolute;
  --bh: calc(var(--u) * 8.4);
}
.helper.poor .cost {
  background: none;
}
.helper.poor .cost::before {
  filter: hue-rotate(-30deg) saturate(1.6) brightness(0.9);
}
.stat {
  --bh: calc(var(--u) * 7.6);
  height: var(--bh);
  padding: 0 calc(var(--u) * 4.5);
}
.bigname {
  --bh: calc(var(--u) * 10.5);
  height: var(--bh);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 5);
}
#toast {
  --bh: calc(var(--u) * 9.5);
  height: var(--bh);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 6);
}
.cell .new {
  position: absolute;
  --bh: calc(var(--u) * 5.2);
  --img: url(./assets/art/ui-btn-coral.webp);
  --l: url(./assets/art/ui-btn-coral-l.webp);
  --m: url(./assets/art/ui-btn-coral-m.webp);
  --r: url(./assets/art/ui-btn-coral-r.webp);
  height: var(--bh);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 2.4);
}
/* faixa reta: as pontas dobradas ficam fixas, o meio estica, o texto nunca entra nas pontas */
.ribbon {
  --bh: calc(var(--u) * 11.5);
  --img: url(./assets/art/ui-ribbon-coral.webp);
  --l: url(./assets/art/ui-ribbon-coral-l.webp);
  --m: url(./assets/art/ui-ribbon-coral-m.webp);
  --r: url(./assets/art/ui-ribbon-coral-r.webp);
  height: var(--bh);
  padding: 0 calc(var(--u) * 8.5) calc(var(--bh) * 0.1);
}
.ribbon::before {
  border-width: 0 calc(var(--bh) * 0.6);
  border-image: var(--img) 0 76 fill / 0 calc(var(--bh) * 0.6) stretch;
}
.ribbon.gold {
  --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);
}
.ribbon.purple {
  --img: url(./assets/art/ui-ribbon-purple.webp);
  --l: url(./assets/art/ui-ribbon-purple-l.webp);
  --m: url(./assets/art/ui-ribbon-purple-m.webp);
  --r: url(./assets/art/ui-ribbon-purple-r.webp);
}
.ribbon.brown {
  --img: url(./assets/art/ui-ribbon-brown.webp);
  --l: url(./assets/art/ui-ribbon-brown-l.webp);
  --m: url(./assets/art/ui-ribbon-brown-m.webp);
  --r: url(./assets/art/ui-ribbon-brown-r.webp);
}
.ribbon.small {
  --bh: calc(var(--u) * 8.2);
  height: var(--bh);
  padding: 0 calc(var(--u) * 6.5) calc(var(--bh) * 0.1);
}
/* botoes redondos e icones desenhados */
.rbtn,
.ico,
.node {
  background: url(./assets/art/ui-round-blue.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 calc(var(--u) * 0.9) calc(var(--u) * 1.1) rgba(0, 30, 45, 0.38));
}
.rbtn::after,
.ico::after {
  inset: 23%;
  background: var(--ico) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}
.rbtn.gear {
  --ico: url(./assets/art/ic-gear.webp);
}
.rbtn.back {
  --ico: url(./assets/art/ic-back.webp);
}
.rbtn.undo {
  --ico: url(./assets/art/ic-undo.webp);
}
.rbtn.x {
  background-image: url(./assets/art/ui-round-red.webp);
  box-shadow: none;
  --ico: url(./assets/art/ic-x.webp);
}
.rbtn.arrow-r,
.rbtn.arrow-l,
.rbtn.speak {
  background-image: url(./assets/art/ui-round-teal.webp);
  box-shadow: none;
}
.rbtn.arrow-r {
  --ico: url(./assets/art/ic-right.webp);
}
.rbtn.arrow-l {
  --ico: url(./assets/art/ic-left.webp);
}
.rbtn.speak {
  --ico: url(./assets/art/ic-speaker.webp);
}
.ico.album {
  --ico: url(./assets/art/ic-book.webp);
}
.ico.journey {
  --ico: url(./assets/art/ic-map.webp);
}
.ico.daily {
  --ico: url(./assets/art/ic-calendar.webp);
}
.ico::after {
  inset: 17%;
}
.node {
  background-image: url(./assets/art/ui-round-red.webp);
}
.node.now {
  animation: nowkit 1.6s ease-in-out infinite;
}
@keyframes nowkit {
  50% {
    filter: drop-shadow(0 0 calc(var(--u) * 3.5) #fff3a0);
  }
}
.node.lock {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(150, 225, 250, 0.22));
  border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.8);
}
/* ajudantes: botao redondo do kit com o personagem por cima */
.hico {
  border: 0;
  box-shadow: none;
  overflow: visible;
  background: none !important;
}
.hico::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(./assets/art/ui-round-blue.webp) center / 100% 100% no-repeat;
}
.helper[data-helper='sweep'] .hico::before {
  filter: hue-rotate(52deg) saturate(1.1);
}
.helper[data-helper='whirl'] .hico::before {
  background-image: url(./assets/art/ui-round-teal.webp);
}
.hico img {
  position: relative;
  width: 64%;
  height: 64%;
}
/* settings: icones desenhados, interruptor e botao da barra em imagem */
.set-row .sico {
  background: var(--ico) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
  filter: none;
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
}
.sico.music {
  --ico: url(./assets/art/ic-music.webp);
}
.sico.sfx {
  --ico: url(./assets/art/ic-speaker.webp);
}
.sico.voice {
  --ico: url(./assets/art/ic-mic.webp);
}
.sico.vib {
  --ico: url(./assets/art/ic-phone.webp);
}
.sico.motion {
  --ico: url(./assets/art/ic-motion.webp);
}
.sico.lang {
  --ico: url(./assets/art/ui-globe.webp);
}
.sw {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 9.6);
  border: 0;
  border-radius: 0;
  background: url(./assets/art/ui-toggle-off.webp) center / contain no-repeat;
  transition: none;
}
.sw::after {
  display: none;
}
.sw[aria-checked='true'] {
  background: url(./assets/art/ui-toggle-on.webp) center / contain no-repeat;
}
input[type='range'].vol::-webkit-slider-thumb {
  background: url(./assets/art/ui-knob.webp) center / contain no-repeat;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width: calc(var(--u) * 9.4);
  height: calc(var(--u) * 9.4);
  margin-top: calc(var(--u) * -3);
  filter: drop-shadow(0 calc(var(--u) * 0.5) calc(var(--u) * 0.8) rgba(0, 30, 45, 0.5));
}
input[type='range'].vol::-moz-range-thumb {
  background: url(./assets/art/ui-knob.webp) center / contain no-repeat;
  border: 0;
  border-radius: 0;
  width: calc(var(--u) * 9.4);
  height: calc(var(--u) * 9.4);
}
select.lang {
  --bh: calc(var(--u) * 10);
  height: var(--bh);
  border-radius: 0;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--bh) * 0.46);
  border-image: url(./assets/art/ui-btn-teal.webp) 0 72 fill / 0 calc(var(--bh) * 0.46) stretch;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-text-stroke: 0.14em var(--ink);
  paint-order: stroke fill;
}
/* marcas que eram caractere */
.tile[aria-pressed='true']::after {
  content: '';
  background: url(./assets/art/ui-check.webp) center / contain no-repeat;
  border: 0;
  width: calc(var(--u) * 8.5);
  height: calc(var(--u) * 8.5);
}
.cell.unknown .orb::after {
  content: '';
  width: 46%;
  height: 46%;
  background: url(./assets/art/ic-question.webp) center / contain no-repeat;
}
.badge img.daystar {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
}

/* End of style-1-base.css */