/* PINLOOP: interface limpa, de gelatina. O canvas pinta um cenário profundo e saturado; por cima dele o texto é
   claro e liso (sem contorno de tinta), com uma sombra macia, e os botões são gomas brilhantes: degradê na própria
   cor, uma faixa de brilho em cima, sombra colorida embaixo e um aperto elástico. Nada de traço preto.
   Os cartões (ajustes, ranking, apelido) são claros, com texto escuro.
   Tamanhos em --u (px por unidade lógica da cena, vindo do layout): a interface escala junto com o alvo.
   O palco é a janela inteira; em tela larga a interface se alinha à coluna central --col.
   Sem vw/vh: dentro de iframe de portal eles mentem. Sem backdrop-filter: borrar um canvas vivo custa caro. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./outfit-latin-ext-wght-normal-DdQaqQDo.woff2')
    format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./outfit-latin-wght-normal-Bc-8i84L.woff2')
    format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* sobre o cenário */
  --paper: #fff8ea;
  --paper-soft: #f1e2c8;
  --amber: #ffb53d;
  --amber-ink: #4a2603;
  /* dentro dos cartões */
  --card: #fff6e2;
  --ink: #2b2530;
  --ink-soft: #665b69;
  --teal: #1aa89c;
  --teal-deep: #136a64;
  --ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --u: 1px;
  --col: 100%;
  /* sombra macia sob o texto claro: separa do fundo sem desenhar contorno */
  --lift: 0 1px 2px rgba(6, 10, 18, 0.42), 0 3px 12px rgba(6, 10, 18, 0.26);
  --lift-big: 0 2px 3px rgba(6, 10, 18, 0.34), 0 8px 22px rgba(6, 10, 18, 0.3);
  /* goma translúcida (botões de canto e fichas sobre o cenário) */
  --glass: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07));
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -5px 9px rgba(6, 10, 18, 0.16),
    0 6px 16px rgba(6, 10, 18, 0.22);
  /* mola: passa um pouco do ponto e assenta */
  --spring: cubic-bezier(0.3, 1.7, 0.5, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0a3540;
  color: var(--paper);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

[hidden] {
  display: none !important;
}

/* Aviso discreto exigido no portal com ranking externo; não bloqueia a entrada. */
#privacy-note {
  position: absolute;
  bottom: max(10px, var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 420px);
  pointer-events: auto;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  z-index: 3;
}
#privacy-note summary {
  cursor: pointer;
  text-shadow: var(--lift);
}
#privacy-note[open] {
  padding: 12px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--card);
}
#privacy-note p {
  max-height: 35dvh;
  overflow: auto;
  margin-top: 8px;
}

#app {
  position: fixed;
  inset: 0;
  background: #0a3540;
}

#stage {
  position: relative;
  overflow: hidden;
  container-type: size;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#safe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ------------------------------------------------------------------ botões: gomas */

button {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}

.card button:focus-visible,
.card input:focus-visible {
  outline-color: var(--teal-deep);
}

/* Todo botão aperta como gelatina: achata, alarga um pouco e volta com mola. */
.btn,
.chip,
.icon {
  transition: transform 260ms var(--spring);
}

.btn:active,
.chip:active {
  transform: scale(1.05, 0.9);
  transition-duration: 70ms;
}

.icon:active {
  transform: scale(0.88);
  transition-duration: 70ms;
}

.btn {
  position: relative;
  isolation: isolate;
  min-height: max(46px, calc(var(--u) * 52));
  padding: 0 calc(var(--u) * 28);
  border-radius: 999px;
  font-weight: 800;
  font-size: max(16px, calc(var(--u) * 18));
  letter-spacing: 0.01em;
}

/* Goma âmbar: mais clara em cima, barriga mais escura embaixo (na própria cor) e sombra colorida. */
.btn.primary {
  color: var(--amber-ink);
  background: linear-gradient(#ffdc82, #ffb53d 50%, #f6931f);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.7),
    inset 0 -7px 12px rgba(196, 92, 0, 0.36),
    0 10px 24px rgba(240, 138, 28, 0.4),
    0 2px 5px rgba(6, 10, 18, 0.24);
}

/* a faixa de brilho que faz a goma parecer molhada */
.btn.primary::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 7%;
  right: 7%;
  top: 8%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.btn.big {
  min-height: max(52px, calc(var(--u) * 60));
  min-width: calc(var(--u) * 210);
  font-size: max(18px, calc(var(--u) * 21));
}

/* Ficha: goma translúcida sobre o cenário. Dentro de cartão ela vira goma clara (logo abaixo). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: max(44px, calc(var(--u) * 46));
  padding: 0 max(16px, calc(var(--u) * 18));
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  font-weight: 700;
  font-size: max(14px, calc(var(--u) * 15));
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(6, 10, 18, 0.35);
}

.chip svg {
  width: max(18px, calc(var(--u) * 19));
  height: max(18px, calc(var(--u) * 19));
}

.card .chip {
  color: var(--ink);
  text-shadow: none;
  background: linear-gradient(#ffffff, #efe3cc);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -4px 7px rgba(120, 96, 50, 0.13),
    0 3px 9px rgba(43, 37, 48, 0.15);
}

.chip.small {
  padding: 0 14px;
  margin-left: 6px;
}

.card > .chip {
  align-self: center;
}

.icon {
  width: max(44px, calc(var(--u) * 46));
  height: max(44px, calc(var(--u) * 46));
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
}

/* botões de canto: bolhas de vidro */
#btn-gear,
#btn-rank,
#btn-album,
.icon.code {
  color: var(--paper);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

.icon svg {
  width: max(22px, calc(var(--u) * 24));
  height: max(22px, calc(var(--u) * 24));
}

.icon.code {
  font-weight: 800;
  font-size: max(14px, calc(var(--u) * 15));
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(6, 10, 18, 0.35);
}

.link {
  min-height: 44px;
  padding: 0 10px;
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(43, 37, 48, 0.1);
  box-shadow: inset 0 1px 3px rgba(43, 37, 48, 0.14);
}

.seg button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #4f4552;
}

.seg button[aria-pressed='true'],
.seg button[aria-selected='true'] {
  background: linear-gradient(#ffffff, #f4ead7);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px rgba(43, 37, 48, 0.2);
}

/* ------------------------------------------------------------------ logo: letras lisas; o I é um pino do jogo */

.logo {
  display: inline-flex;
  align-items: baseline;
  font-weight: 900;
  font-size: calc(var(--u) * 50);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
  text-shadow: var(--lift-big);
}

/* A haste nasce na linha de base e a tampa sobe um pouco acima das letras, como um pino espetado na palavra. */
.logo .pin {
  height: 0.84em;
  width: 0.34em;
  margin: 0 0.05em 0 0.04em;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 5) rgba(6, 10, 18, 0.35));
}

.tagline {
  color: var(--paper-soft);
  font-weight: 600;
  font-size: max(14px, calc(var(--u) * 16));
  letter-spacing: 0.02em;
  text-shadow: var(--lift);
}

.note {
  color: var(--paper-soft);
  font-size: max(13px, calc(var(--u) * 14));
  font-weight: 600;
  text-shadow: var(--lift);
}

.card .note {
  color: var(--ink-soft);
  font-weight: 500;
  text-shadow: none;
}

/* ------------------------------------------------------------------ partida */

/* A interface vive numa coluna central da largura da cena: no celular é a tela, no PC fica no meio. */
#hud,
.title-top {
  position: absolute;
  top: var(--safe-top, 0px);
  left: calc(50% - var(--col) / 2);
  width: var(--col);
  height: calc(var(--u) * 84);
  pointer-events: none;
}

/* Placar com respiro em cima: o número não encosta na borda em aparelho sem entalhe. */
#hud {
  height: calc(var(--u) * 92);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(var(--u) * 6) max(14px, calc(var(--u) * 15)) 0;
  animation: drop 240ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

#btn-gear {
  position: absolute;
  z-index: 2;
  top: calc(var(--safe-top, 0px) + var(--u) * 42);
  left: calc(50% + var(--col) / 2 - max(14px, var(--u) * 15));
  transform: translate(-100%, -50%);
}

#btn-gear:active {
  transform: translate(-100%, -50%) scale(0.88);
}

.hud-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: var(--paper-soft);
  font-size: max(12px, calc(var(--u) * 12));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: var(--lift);
}

.hud-side b {
  color: var(--paper);
  font-size: max(17px, calc(var(--u) * 21));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* a barrinha enche conforme a partida chega perto do recorde */
#hud-chase {
  display: block;
  width: max(46px, calc(var(--u) * 54));
  height: 6px;
  margin-top: 3px;
  border-radius: 3px;
  background: rgba(6, 10, 18, 0.34);
  overflow: hidden;
}

#hud-chase b {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(#ffd97a, var(--amber));
  transition: width 180ms ease-out;
}

/* o recorde caiu no meio da partida: o rótulo acende e dá um pulo, uma vez */
.hud-side.beaten span {
  color: var(--amber);
  animation: jelly 420ms backwards;
}

.hud-side.beaten b {
  color: var(--amber);
}

.hud-mid {
  text-align: center;
}

#hud-score {
  font-size: calc(var(--u) * 46);
  font-weight: 800;
  line-height: 1;
  color: var(--paper);
  text-shadow: var(--lift-big);
}

#hud-round {
  display: inline-block;
  /* nunca chega no botão do canto: texto comprido (a pergunta da vida a mais, em espanhol) quebra em duas linhas */
  max-width: calc(var(--col) - 2 * (max(44px, var(--u) * 46) + max(14px, var(--u) * 15) + 6px));
  text-wrap: balance;
  line-height: 1.2;
  margin-top: calc(var(--u) * 4);
  color: var(--paper);
  font-size: max(12px, calc(var(--u) * 13));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: var(--lift);
}

/* Alvo especial: o nome dele acende no lugar de "Rodada N". */
#hud-round.boss {
  color: #ffd97a;
}

/* Recorde novo no resultado: uma goma âmbar no lugar do rótulo do placar. */
#hud-round.record {
  padding: calc(var(--u) * 4) calc(var(--u) * 13);
  border-radius: 999px;
  background: linear-gradient(#ffdc82, #ffb53d 55%, #f6931f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 5px rgba(196, 92, 0, 0.3),
    0 5px 14px rgba(240, 138, 28, 0.4);
  color: var(--amber-ink);
  font-weight: 800;
  text-shadow: none;
  animation: jelly 420ms backwards;
}

/* Etapa: cinco pontos por grupo de rodadas; o último é o alvo especial (uma estrela). */
#hud-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 13);
  margin-top: calc(var(--u) * 4);
}

#hud-stage i {
  width: max(7px, calc(var(--u) * 8));
  height: max(7px, calc(var(--u) * 8));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.26);
}

#hud-stage i.done {
  background: var(--amber);
}

#hud-stage i.now {
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
  animation: now 1s ease-in-out infinite;
}

#hud-stage i.boss {
  width: max(12px, calc(var(--u) * 13));
  height: max(12px, calc(var(--u) * 13));
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.34);
  clip-path: polygon(
    50% 0%,
    62% 34%,
    98% 35%,
    69% 57%,
    79% 91%,
    50% 71%,
    21% 91%,
    31% 57%,
    2% 35%,
    38% 34%
  );
}

#hud-stage i.boss.done {
  background: var(--amber);
}

#hud-stage i.boss.now {
  background: var(--paper);
}

@keyframes now {
  50% {
    transform: scale(1.3);
  }
}

/* entrada de gelatina: chega pequeno, passa do ponto, treme uma vez e assenta */
@keyframes jelly {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  45% {
    transform: scale(1.1, 0.92);
    opacity: 1;
  }
  70% {
    transform: scale(0.96, 1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* o botão de tentar de novo pulsa em luz: está pedindo o dedo. É a sombra que respira; o botão não sai do lugar */
@keyframes breathe {
  50% {
    box-shadow:
      inset 0 2px 1px rgba(255, 255, 255, 0.7),
      inset 0 -7px 12px rgba(196, 92, 0, 0.36),
      0 12px 38px rgba(255, 176, 66, 0.78),
      0 2px 5px rgba(6, 10, 18, 0.24);
  }
}

@keyframes drop {
  from {
    transform: translateY(-18px);
    opacity: 0;
  }
}

@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* Dica de ação: texto solto, nunca com cara de botão. */
#hint {
  text-wrap: balance;
  position: absolute;
  /* centralizada sem transform (a entrada anima o transform). Em tela larga usa a largura do palco, não a da
     coluna: a frase cabe numa linha só e não empurra o fim para fora da tela baixa. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(calc(100% - 32px), 520px);
  top: calc(var(--free-top, 70%) + var(--u) * 14);
  text-align: center;
  color: var(--paper);
  font-size: max(15px, calc(var(--u) * 17));
  font-weight: 700;
  text-shadow: var(--lift);
  pointer-events: none;
  animation: rise 260ms ease-out backwards;
}

/* Com uma janela alta aberta, o que fica por baixo some: nada aparece cortado pela borda do cartão. */
#stage:has(:is(#settings, #rank, #album, #rotate, #audio, #ad-wait):not([hidden]))
  :is(#hud, #hint, #btn-gear, #title, #result) {
  visibility: hidden;
}

/* O cartão do apelido é baixo: o placar (e o recorde novo) continuam à vista; some só o que ele cobriria. */
#stage:has(#nick:not([hidden])) :is(#hint, #result, #title .below) {
  visibility: hidden;
}

/* ------------------------------------------------------------------ telas */

.screen {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen > *,
.below > * {
  pointer-events: auto;
}

/* O convite acende e apaga em luz. O texto não muda de tamanho: é um botão, e o alvo de toque fica parado. */
.pulse {
  color: var(--paper);
  font-weight: 800;
  font-size: max(17px, calc(var(--u) * 20));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: var(--lift-big);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    color: #ffd97a;
    text-shadow:
      0 2px 3px rgba(6, 10, 18, 0.34),
      0 0 22px rgba(255, 196, 92, 0.75);
  }
}

/* "Toque para começar": é um botão de verdade (teclado, leitor de tela), mas tem cara de convite, não de botão. */
#btn-play {
  min-height: 48px;
  padding: 0 18px;
  animation:
    rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) 50ms backwards,
    pulse 1.5s ease-in-out 310ms infinite;
}

.title-top {
  display: grid;
  place-items: center;
  animation: drop 300ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.title-top .icon {
  position: absolute;
  left: max(14px, calc(var(--u) * 15));
  pointer-events: auto;
}

/* Faixa abaixo do lançador: convite do título e resultado. Começa onde o layout diz que a cena termina. */
.below {
  position: absolute;
  left: calc(50% - var(--col) / 2);
  width: var(--col);
  top: var(--below-top, 62%);
  bottom: var(--safe-bottom, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: max(8px, calc(var(--u) * 10));
  padding: calc(var(--u) * 6) 18px calc(var(--u) * 10);
  text-align: center;
  pointer-events: none;
}

/* o que entra na faixa sobe de leve, um depois do outro; os botões chegam como gelatina */
.below > * {
  animation: rise 260ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.below > :nth-child(2) {
  animation-delay: 50ms;
}

.below > :nth-child(3) {
  animation-delay: 100ms;
}

.below > :nth-child(4) {
  animation-delay: 150ms;
}

.below .chip {
  animation: jelly 420ms backwards;
}

#btn-again {
  animation:
    jelly 420ms backwards,
    breathe 1.7s ease-in-out 700ms infinite;
}

/* Ao lado do lançador, no título: o ranking à esquerda e o recorde à direita. É o espaço que sobra em toda
   tela, da menor à maior; embaixo ficam só o slogan e o convite. Sem transform no botão (o aperto usa). */
#btn-rank,
#btn-album {
  position: absolute;
  width: 48px;
  height: 48px;
  top: calc(var(--wait-y, 70%) - var(--u) * 24 - 32px);
}

#btn-rank {
  left: calc(50% - var(--u) * 105 - 24px);
}

#btn-album {
  left: calc(50% + var(--u) * 105 - 24px);
}

/* a linha embaixo de cada bolha: o recorde sob o troféu, o andamento da coleção sob a coleção */
.side-note {
  position: absolute;
  width: calc(var(--u) * 150);
  top: calc(var(--wait-y, 70%) - var(--u) * 24 + 19px);
  text-align: center;
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: var(--lift);
  pointer-events: none;
}

#title-best {
  left: calc(50% - var(--u) * 180);
}

#title-album {
  left: calc(50% + var(--u) * 30);
}

/* Coleção: seis por linha, cinco linhas. */
.album {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.album canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.album canvas.got {
  filter: drop-shadow(0 2px 3px rgba(43, 37, 48, 0.25));
}

/* Vida a mais: o botão, a contagem e a recusa. */
.revive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(8px, calc(var(--u) * 9));
}

.revive .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.revive .btn svg {
  width: 1.25em;
  height: 1.25em;
}

.bar {
  display: block;
  width: calc(var(--u) * 170);
  height: 6px;
  border-radius: 3px;
  background: rgba(6, 10, 18, 0.34);
  overflow: hidden;
}

.bar b {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(#ffd97a, var(--amber));
}

/* Tela baixa: o slogan sai para o convite caber sem aperto (a demonstração já explica o jogo). */
#stage.compact #title .tagline {
  display: none;
}

#result {
  top: var(--result-top, 66%);
  gap: max(8px, calc(var(--u) * 10));
  padding-top: calc(var(--u) * 10);
}

.stats {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 20);
  color: var(--paper-soft);
  font-size: max(13px, calc(var(--u) * 15));
  font-weight: 600;
  text-shadow: var(--lift);
}

.stats b {
  color: var(--paper);
  font-weight: 800;
  margin-left: 6px;
}

/* "tentar enviar de novo", dentro da linha do ranking: claro, porque fica sobre o cenário */
#res-rank .link {
  color: #ffd97a;
}

/* quase bateu o recorde: é isto que faz querer mais uma */
.short {
  color: #ffd97a;
  font-size: max(14px, calc(var(--u) * 15));
  font-weight: 800;
  text-shadow: var(--lift);
}

/* Tentar de novo e Ranking lado a lado: o resultado cabe abaixo do anel mesmo na menor tela. */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: calc(var(--u) * 4);
}

.actions .btn.big {
  min-width: calc(var(--u) * 190);
}

/* Coluna estreita: o Ranking vira só o troféu (o nome continua no aria-label). */
@container (max-width: 400px) {
  #btn-res-rank {
    width: 48px;
    padding: 0;
    justify-content: center;
  }
  #btn-res-rank span {
    display: none;
  }
}

/* ------------------------------------------------------------------ janelas por cima */

.sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top, 0px) + 10px) 14px calc(var(--safe-bottom, 0px) + 10px);
  background: rgba(6, 10, 18, 0.5);
  text-align: center;
  animation: fade 160ms ease-out backwards;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
}

.sheet.solid {
  background: linear-gradient(#115d63, #0a3540);
}

.card {
  width: min(100%, 400px);
  max-height: 100%;
  /* Último recurso para janelas minúsculas (abaixo dos tamanhos do guia): nenhuma opção fica inalcançável. */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 22px 20px;
  border-radius: 30px;
  background: linear-gradient(#fffaf0, var(--card));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 #fff,
    0 18px 50px rgba(6, 10, 18, 0.45);
  animation: sheet-up 320ms var(--spring) backwards;
}

/* Tela média (iframe de portal): a janela é larga o bastante para cobrir o anel inteiro, sem tampas de fora. */
@container (min-width: 561px) {
  .sheet:not(.solid) .card:not(.bare) {
    width: min(100%, max(400px, calc(var(--col) + 24px)));
  }
}

/* PC largo: a janela encosta ao lado do anel e o alvo pausado continua inteiro à vista. */
@container (min-width: 1180px) {
  .sheet:not(.solid) {
    place-items: center start;
    padding-left: calc(50% + var(--col) / 2 + 24px);
  }
  .sheet:not(.solid) .card:not(.bare) {
    width: min(100%, 380px);
  }
}

/* Celular: a janela sobe de baixo e deixa o alvo parado à vista em cima. */
@container (max-width: 560px) {
  .sheet:not(.solid) {
    place-items: end center;
    padding: calc(var(--safe-top, 0px) + 10px) 0 0;
  }
  .sheet:not(.solid) .card:not(.bare) {
    width: 100%;
    max-width: 480px;
    border-radius: 30px 30px 0 0;
    padding-bottom: calc(var(--safe-bottom, 0px) + 20px);
    /* sobe sem mola: a mola deixaria uma fresta embaixo no fim do curso */
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .sheet:not(.solid) .card.bare {
    align-self: center;
  }
}

.card.bare {
  background: none;
  box-shadow: none;
  align-items: center;
  gap: 10px;
  color: var(--paper);
}

#audio {
  background: rgba(8, 30, 40, 0.92);
}

#ad-wait {
  color: var(--paper);
}

.card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card h2 {
  font-size: 21px;
  font-weight: 800;
}

.card.bare p {
  color: var(--paper-soft);
}

.card.bare p.pulse {
  color: var(--paper);
}

.big-icon {
  width: 56px;
  height: 56px;
  color: var(--paper);
}

#pause-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}

.slider,
.toggle,
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.slider input {
  flex: 0 1 56%;
  min-width: 120px;
  height: 44px;
  accent-color: var(--teal);
}

/* chave de gelatina: trilho rebaixado e um botão branco que escorrega com mola */
.toggle i {
  flex: none;
  position: relative;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  /* trilho desligado com 3:1 contra o cartão */
  background: #8f867c;
  box-shadow: inset 0 2px 4px rgba(43, 37, 48, 0.3);
  transition: background 160ms ease;
}

.toggle i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(#ffffff, #f0ead9);
  box-shadow: 0 2px 5px rgba(6, 10, 18, 0.3);
  transition: transform 260ms var(--spring);
}

.toggle[aria-checked='true'] i {
  background: linear-gradient(#22b8ab, #138a80);
}

.toggle[aria-checked='true'] i::after {
  transform: translateX(20px);
}

#rank-tabs {
  display: flex;
}

#rank-tabs button {
  flex: 1;
  padding: 0 6px;
}

.board {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 60px;
}

.board li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 15px;
  text-align: left;
}

.board li span:first-child {
  color: var(--ink-soft);
  font-weight: 700;
}

.board li span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board li b {
  font-weight: 800;
}

.board li.me {
  background: rgba(255, 181, 61, 0.35);
  font-weight: 700;
}

/* pódio: os três primeiros em âmbar escuro */
.board li:nth-child(-n + 3):not(.empty) span:first-child {
  color: #9a5a00;
  font-weight: 900;
}

/* a posição do jogador quando ele está fora da lista, presa embaixo dela */
.mine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 181, 61, 0.35);
  font-size: 15px;
  font-weight: 700;
}

.board li.empty {
  display: block;
  padding: 16px 8px;
  color: var(--ink-soft);
  text-align: center;
}

.inline {
  display: flex;
  gap: 8px;
}

.inline input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 2px 5px rgba(43, 37, 48, 0.2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}

.ad-test {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  gap: 16px;
  background: #1d1a20;
  color: #fff;
  text-align: center;
}

.ad-test button {
  color: #fff;
  text-decoration: underline;
  min-height: 44px;
}

/* ------------------------------------------------------------------ telas baixas */

#stage.compact .card {
  gap: 4px;
  padding-top: 10px;
}

#stage.compact .album {
  gap: 6px;
  padding: 0 12%;
}

#stage.compact #pause-actions {
  gap: 10px;
  padding-bottom: 6px;
}

/* tela bem baixa: o rótulo do placar aperta as letras para caber numa linha só */
#stage.tiny #hud-round {
  letter-spacing: 0.04em;
}

#stage.tiny .board li {
  min-height: 26px;
  font-size: 14px;
}

/* Menos movimento: nada pulsa, treme nem entra deslizando. */
#app.calm
  :is(
    .pulse,
    #hud,
    #hint,
    .title-top,
    .below > *,
    .below .chip,
    #btn-again,
    .card,
    .sheet,
    #hud-stage i.now,
    #hud-round.record,
    .hud-side.beaten span
  ) {
  animation: none;
}

#app.calm :is(.btn, .chip, .icon),
#app.calm .toggle i::after {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .pulse,
    #hud,
    #hint,
    .title-top,
    .below > *,
    .below .chip,
    #btn-again,
    .card,
    .sheet,
    #hud-stage i.now,
    #hud-round.record,
    .hud-side.beaten span
  ) {
    animation: none;
  }
  .btn,
  .chip,
  .icon,
  .toggle i::after {
    transition: none;
  }
}