/* outfit-latin-ext-wght-normal */
@font-face {
  font-family: 'Outfit Variable';
  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;
}

/* outfit-latin-wght-normal */
@font-face {
  font-family: 'Outfit Variable';
  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;
}/* TRIMORA: escultura de coleção sobre fundo marfim. Tinta escura para texto, sem tema preto e sem neon.
   Os botões são lajes como as do jogo: face de cima na cor e face lateral sólida, sem contorno e sem sombra borrada.
   Nada rola: telas ocupam a área inteira e as janelas abrem por cima. */
:root {
  --ivory: #f9f3e7;
  --ivory-deep: #ecdfc8;
  --ink: #2c2231;
  --ink-soft: #5d4f60;
  --track: rgba(44, 34, 49, 0.1);
  --paper: #fffaf1;
  --slab: #f5bb82;
  --slab-side: #dc9460;
  --tile: #f3e9d8;
  --tile-side: #e0d1b8;
  --coral: #ee8573;
  --lagoon: #3f9f96;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  font-family: 'Outfit Variable', system-ui, sans-serif;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
}
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ivory);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(var(--ivory), var(--ivory-deep));
  container-type: size;
}

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

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------- botões */
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--lagoon);
  outline-offset: 3px;
}

.btn,
.chip {
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.btn {
  min-height: 48px;
  padding: 0 28px;
  border-radius: 16px;
  font-weight: 650;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.btn.primary {
  background: var(--slab);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--slab-side);
  margin-bottom: 6px;
}
.btn svg {
  width: 24px;
  height: 24px;
  flex: none;
}
.btn:has(svg) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--slab-side);
}
.btn.big {
  min-height: 58px;
  padding: 0 44px;
  font-size: 1.2rem;
  min-width: min(260px, 78cqw);
}
.btn.soft {
  background: var(--tile);
  box-shadow: 0 4px 0 var(--tile-side);
  margin-bottom: 4px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.98rem;
}
.btn.soft:active,
.chip:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--tile-side);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 550;
  font-size: 0.98rem;
  white-space: nowrap;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--tile-side);
  margin-bottom: 4px;
}
.chip svg {
  width: 20px;
  height: 20px;
  flex: none;
}
/* Dentro de uma janela o fundo já é claro: a laje fica um tom abaixo para aparecer. */
.card .chip {
  background: var(--tile);
}

.icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ink);
}
.icon svg {
  width: 26px;
  height: 26px;
}
.icon:active {
  background: var(--track);
}

.link {
  min-height: 44px;
  padding: 0 12px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* segmentos (idioma, efeitos, abas): a mesma trilha em todo lugar */
.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: var(--track);
}
.seg button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 11px;
  font-weight: 550;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.seg.small button {
  min-width: 44px;
  padding: 0 13px;
  font-size: 0.9rem;
}
.seg button[aria-pressed='true'],
.seg button[aria-selected='true'] {
  background: var(--paper);
  color: var(--ink);
}

/* ---------------------------------------------------------------- partida */
#hud {
  position: absolute;
  top: calc(var(--sat) + 14px);
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  pointer-events: none;
}
#hud-score {
  font-size: clamp(3.2rem, 15cqw, 5.4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
#hud-score.bump {
  animation: bump 0.16s ease-out;
}
/* Perfeito: o número pisca coral e volta à tinta. Marco: um pulo maior, com mola. */
#hud-score.bump.perfect {
  animation:
    bump 0.16s ease-out,
    glint 0.55s ease-out;
}
#hud-score.bump.mile {
  animation:
    mile 0.42s cubic-bezier(0.2, 1.5, 0.4, 1),
    glint 0.7s ease-out;
}
@keyframes bump {
  40% {
    transform: translateY(-3px) scale(1.05);
  }
}
@keyframes glint {
  0% {
    color: #c2543f;
  }
}
@keyframes mile {
  0% {
    transform: scale(1.26);
  }
}
@keyframes pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
}
#hud-streak {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
#hud-streak i,
.tag.fresh::before {
  width: 9px;
  height: 9px;
  background: var(--coral);
  transform: rotate(45deg);
  border-radius: 2px;
}

#hud-streak.pop {
  animation: pop 0.24s cubic-bezier(0.2, 1.6, 0.4, 1);
}
/* "Quase": o corte foi por um fio. Aparece e some sozinho. */
#hud-near {
  margin-top: 4px;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#hud-near.pop {
  animation:
    pop 0.24s cubic-bezier(0.2, 1.6, 0.4, 1),
    fadeout 0.3s 0.42s ease-in both;
}
@keyframes fadeout {
  to {
    opacity: 0;
  }
}
/* De noite o céu escurece atrás dos números: eles clareiam (a tinta escura sumiria). */
#hud,
#cue,
#btn-gear,
#best-mark,
#hud-streak,
#hud-near {
  transition: color 0.6s ease;
}
#app.night #hud,
#app.night #cue,
#app.night #btn-gear,
#app.night #best-mark,
#app.night #hud-streak,
#app.night #hud-near {
  color: #fff7ea;
}
#app.night #best-mark i {
  background: #fff7ea;
}

/* Etiqueta da marca do recorde: pequena, ao lado da torre, movida pelo jogo a cada quadro. */
#best-mark {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink-soft);
  pointer-events: none;
  will-change: transform;
}
#best-mark i {
  width: 7px;
  height: 7px;
  background: var(--ink-soft);
  transform: rotate(45deg);
  border-radius: 1.5px;
}

/* Rival do ranking: sobre o vértice de trás do quadro dele, no céu (o recorde fica do lado direito da torre). Nunca recebe toque. */
#rival-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink-soft);
  background: rgba(255, 250, 241, 0.8);
  pointer-events: none;
  will-change: transform;
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - 10px));
  animation: fade 0.25s ease-out both;
}
#rival-tag i {
  width: 7px;
  height: 7px;
  background: var(--coral);
  transform: rotate(45deg);
  border-radius: 1.5px;
  flex: none;
}
#rival-tag.side {
  transform: translate(calc(var(--x, 0px) - 100% - 12px), calc(var(--y, 0px) - 50%));
}
#app.night #rival-tag {
  color: #fff7ea;
  background: rgba(46, 36, 82, 0.6);
}

#btn-gear {
  position: absolute;
  top: calc(var(--sat) + 8px);
  right: calc(var(--sar) + 8px);
  z-index: 3;
}

/* Desfazer: embaixo, no meio. Entra subindo; enquanto não aceita toque fica meio apagado. */
#btn-undo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 22px);
  z-index: 3;
  transform: translateX(-50%);
  animation: undo-in 0.26s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  transition: opacity 0.2s;
}
#btn-undo:active {
  transform: translate(-50%, 3px);
}
#btn-undo.arming {
  opacity: 0.55;
  pointer-events: none;
}
@keyframes undo-in {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}

/* Dica de ação: texto solto, nunca com cara de botão. Fica no alto, longe do polegar. */
#cue,
#tap-start {
  font-size: 1.02rem;
  font-weight: 550;
  text-align: center;
  letter-spacing: 0.02em;
}
/* Nunca encosta nos pontos: em tela baixa e larga 19% da altura seria pouco. */
#cue {
  position: absolute;
  left: 24px;
  right: 24px;
  top: calc(var(--sat) + max(19cqh, 124px));
  color: var(--ink-soft);
  pointer-events: none;
}
#tap-start {
  color: var(--ink);
}
.pulse {
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.62;
  }
}

/* ---------------------------------------------------------------- título */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--sat) + 7cqh) calc(var(--sar) + 20px) calc(var(--sab) + 4.5cqh)
    calc(var(--sal) + 20px);
  pointer-events: none;
}
.screen > * {
  pointer-events: auto;
}
.brand {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.mark {
  width: clamp(44px, 12cqw, 64px);
  height: auto;
}
.logo {
  font-size: clamp(2rem, 10.5cqw, 3.6rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  line-height: 1.05;
}
.tagline {
  font-size: 0.98rem;
  color: var(--ink-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.title-foot {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
}
.title-actions {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  animation: rise 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.title-actions .seg {
  justify-self: center;
}
.title-actions .row .chip {
  flex: 1 1 0;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
#title.splash .title-actions {
  display: none;
}
#title:not(.splash) #tap-start {
  display: none;
}
/* O toque que abre o título não aperta o botão que aparece embaixo. */
#title.arming .title-actions {
  pointer-events: none;
}

/* ---------------------------------------------------------------- resultado */
/* Em retrato a faixa de pontos é um painel claro e fosco, com os cantos de cima arredondados: a torre gira
   atrás dele, e uma torre alta some por trás sem emenda (o céu da cena tem névoa e não é mais um degradê liso). */
.tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 20px calc(var(--sab) + 3.5cqh);
  border-radius: 30px 30px 0 0;
  background: rgba(255, 250, 241, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
  animation: fade 0.3s ease-out both;
}
.tray > * {
  pointer-events: auto;
}
.eyebrow {
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.huge {
  font-size: clamp(4rem, 22cqw, 7rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.tag {
  min-height: 1.5em;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.tag.fresh,
.tag.near {
  color: var(--ink);
}
.tag.fresh {
  animation: pop 0.32s 0.18s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.tag.fresh::before {
  content: '';
  flex: none;
}
.rankline {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: center;
}
/* O próximo alvo: é o que faz o jogador querer mais uma. */
.rankline.strong {
  color: var(--ink);
  font-weight: 650;
}
.actions {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 12px;
  animation: fade 0.28s ease-out both;
}
/* Prazo da oferta de mais uma vida: uma barra que esvazia. */
.bar {
  width: min(260px, 78cqw);
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--slab-side);
  transform-origin: left;
  animation: drain var(--offer-ms, 7s) linear both;
}
@keyframes drain {
  to {
    transform: scaleX(0);
  }
}
/* Reserva o espaço dos botões: nada pula quando eles entram. */
.tray:not(.ready) {
  padding-bottom: calc(var(--sab) + 3.5cqh + 136px);
}

/* ---------------------------------------------------------------- janelas */
.sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: calc(var(--sat) + 12px) calc(var(--sar) + 14px) calc(var(--sab) + 12px)
    calc(var(--sal) + 14px);
  /* Opaco: nada do que está atrás aparece cortado pela borda do cartão. */
  background: #f0e5d1;
  animation: fade 0.16s ease-out both;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.card {
  width: min(100%, 380px);
  max-height: 100%;
  display: grid;
  gap: 12px;
  padding: 16px 20px 22px;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 8px 0 var(--tile-side);
}
.card.wide {
  width: min(100%, 420px);
}
/* Conteúdo largo (abas, campo) encolhe em vez de empurrar o cartão para fora da tela. */
.card,
.card > *,
.cols > * {
  min-width: 0;
}
.card.bare {
  background: none;
  box-shadow: none;
  justify-items: center;
  text-align: center;
}
.card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -8px;
}
.card h2 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.card footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cols,
.col {
  display: grid;
  gap: 6px;
  align-content: start;
}
.big-icon {
  width: 56px;
  height: 56px;
}
.note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: center;
}

.toggle,
.slider,
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
}
.field {
  flex-wrap: wrap;
  row-gap: 4px;
}
.field + .field {
  margin-top: 6px;
}
.toggle i {
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: 10px;
  background: #8f838d;
  position: relative;
  transition: background-color 0.15s;
}
.toggle i::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--paper);
  transition: transform 0.15s;
}
.toggle[aria-checked='true'] i {
  background: var(--lagoon);
}
.toggle[aria-checked='true'] i::after {
  transform: translateX(20px);
}
.slider input {
  flex: 1;
  max-width: 190px;
  height: 44px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.slider input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: #8f838d;
}
.slider input::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: #8f838d;
}
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 8px;
  border: 0;
  background: var(--slab);
  box-shadow: 0 3px 0 var(--slab-side);
}
.slider input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: var(--slab);
  box-shadow: 0 3px 0 var(--slab-side);
}

.inline {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.inline input,
.solo-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  border: 0;
  background: var(--tile);
  font: inherit;
  font-size: 16px; /* 16px: o iPhone não dá zoom no campo */
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}
.inline input::placeholder,
.solo-input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}
.solo-input {
  width: 100%;
  text-align: center;
}
.lead {
  font-size: 1rem;
  color: var(--ink-soft);
  text-align: center;
}
.note.err {
  color: #a8402f;
  font-weight: 600;
}
.note:empty {
  display: none;
}
.row.wrap {
  flex-wrap: wrap;
  align-items: center;
}
#name .card {
  text-align: center;
}
#name .btn {
  min-width: 0;
}
.inline .btn.soft {
  min-height: 44px;
  background: var(--slab);
  box-shadow: 0 4px 0 var(--slab-side);
}
#rank-tabs {
  display: flex;
  width: 100%;
}
#rank-tabs button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  font-size: 0.9rem;
}
.board {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1px;
  min-height: 96px;
  align-content: start;
}
.board li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  height: 29px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 0.97rem;
}
.board li span:first-child {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.board li span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board li span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.board li.me {
  background: rgba(63, 159, 150, 0.18);
  font-weight: 600;
}
.recs {
  display: grid;
  gap: 4px;
}
.recs div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: 44px;
}
.recs dt {
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.recs dd {
  font-size: 1.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

#ad-wait {
  z-index: 7;
}
#audio {
  z-index: 6;
  cursor: pointer;
}
#fatal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  z-index: 9;
  background: var(--ivory);
}

/* Anúncio falso de desenvolvimento (?ads=test). */
.ad-test {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  gap: 16px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}
.ad-test button {
  text-decoration: underline;
  min-height: 44px;
}

/* ---------------------------------------------------------------- retrato baixo: sem o ícone da marca, a torre ganha o espaço */
@container (max-height: 620px) and (max-aspect-ratio: 6/5) {
  .mark {
    display: none;
  }
  .screen {
    padding-top: calc(var(--sat) + 5cqh + 18px);
    padding-bottom: calc(var(--sab) + 3cqh);
  }
  .title-actions {
    gap: 9px;
  }
}

/* ---------------------------------------------------------------- telas largas: marca, botões e resultado à direita, torre à esquerda */
@container (min-aspect-ratio: 6/5) {
  .screen {
    justify-content: center;
    align-items: flex-end;
    gap: 5cqh;
    padding: calc(var(--sat) + 14px) calc(var(--sar) + 6cqw) calc(var(--sab) + 14px) 20px;
  }
  .screen > * {
    width: clamp(300px, 42%, 470px);
  }
  /* A torre fica ao lado: a faixa de pontos não precisa de fundo. */
  /* Mesma coluna do título: mesma largura e mesma margem direita. */
  .tray {
    left: auto;
    right: calc(var(--sar) + 6cqw);
    top: 0;
    width: calc(clamp(300px, 42%, 470px) * var(--ui, 1));
    align-content: center;
    padding: 16px 0 calc(var(--sab) + 16px);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tray:not(.ready) {
    padding-bottom: calc(var(--sab) + 16px + 136px);
  }
}

/* ---------------------------------------------------------------- telas baixas (celular deitado, iframe de portal) */
@container (max-height: 480px) {
  .screen {
    gap: 3cqh;
    padding-top: calc(var(--sat) + 10px);
    padding-bottom: calc(var(--sab) + 10px);
  }
  .screen > * {
    width: clamp(300px, 46%, 470px);
  }
  .mark {
    width: 36px;
  }
  .logo {
    font-size: clamp(1.5rem, 4.6cqw, 2.4rem);
  }
  .tagline {
    font-size: 0.82rem;
  }
  .title-actions {
    gap: 7px;
  }
  .btn.big {
    min-height: 50px;
    min-width: 200px;
  }
  #hud {
    justify-items: start;
    left: calc(var(--sal) + 22px);
    top: calc(var(--sat) + 8px);
  }
  #hud-score {
    font-size: clamp(2.4rem, 16cqh, 3.6rem);
  }
  #cue {
    top: calc(var(--sat) + 16px);
    left: 110px;
    right: 70px;
  }
  .tray {
    width: clamp(300px, 46%, 470px);
    padding: 10px 0 calc(var(--sab) + 10px);
  }
  .tray:not(.ready) {
    padding-bottom: calc(var(--sab) + 10px + 124px);
  }
  .huge {
    font-size: clamp(3rem, 22cqh, 5rem);
  }
  .actions {
    margin-top: 6px;
    gap: 7px;
  }
  .card {
    padding: 10px 18px 16px;
    gap: 6px;
    border-radius: 22px;
  }
  .card.wide {
    width: min(100%, 640px);
  }
  .cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 26px;
  }
  .toggle,
  .slider,
  .field {
    min-height: 44px;
  }
  .board {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    min-height: 60px;
  }
  .board li {
    height: 27px;
  }
}

/* Telas muito estreitas: aperta as margens e o logo para nada cortar. */
@container (max-width: 350px) {
  .logo {
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }
  .card {
    padding: 12px 14px 18px;
  }
  .seg.small button {
    padding: 0 10px;
  }
  .chip {
    padding: 0 12px;
    gap: 6px;
    font-size: 0.92rem;
  }
}

/* PC: a interface cresce com a tela, para não ficar miúda num monitor grande. */
@container (min-width: 1100px) and (min-height: 640px) {
  .screen > *,
  .tray > *,
  .card,
  #hud,
  #btn-gear,
  #cue,
  #btn-undo {
    zoom: 1.2;
  }
  .tray {
    --ui: 1.2;
  }
}
@container (min-width: 1600px) and (min-height: 900px) {
  .screen > *,
  .tray > *,
  .card,
  #hud,
  #btn-gear,
  #cue,
  #btn-undo {
    zoom: 1.45;
  }
  .tray {
    --ui: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse,
  .title-actions,
  .tray,
  .actions,
  .sheet,
  #hud-score.bump,
  #hud-streak.pop,
  .tag.fresh {
    animation: none;
  }
}
body.calm .pulse,
body.calm .title-actions,
body.calm .tray,
body.calm .actions,
body.calm .sheet,
body.calm #hud-score.bump,
body.calm #hud-streak.pop,
body.calm .tag.fresh {
  animation: none;
}