/* Glowpane Puzzle. Unidade --u (definida em main.js pelo tamanho da tela): tudo escala junto.
   Botões, faixa, molduras e painel são imagens (assets/art) que esticam só onde podem; o texto é do código. */
@font-face {
  font-family: Fredoka;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/fredoka-latin-600.woff2) format('woff2');
}
@font-face {
  font-family: Fredoka;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/fredoka-latin-700.woff2) format('woff2');
}
@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-024F, U+1E00-1EFF;
}
@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-024F, U+1E00-1EFF;
}

:root {
  --u: 4px;
  --ink: #fffaf0;
  --gold: #f6cf6a;
  --deep: #2a1456;
  --shadow: 0 calc(var(--u) * 0.35) calc(var(--u) * 0.9) rgba(25, 10, 45, 0.6);
}
* {
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: #1b1530;
}
body {
  font-family: Fredoka, 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans KR', 'Microsoft YaHei', system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  text-shadow: var(--shadow);
}
button {
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
img {
  -webkit-user-drag: none;
}

#bg {
  position: fixed;
  inset: 0;
  background: #1b1530 url(assets/art/bg-portrait.webp) center / cover no-repeat;
}
#bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20, 10, 40, 0) 35%, rgba(14, 8, 30, 0.6) 100%),
    linear-gradient(rgba(12, 6, 30, 0.3), rgba(12, 6, 30, 0.08) 45%, rgba(12, 6, 30, 0.28));
}
body.playing #bg {
  filter: brightness(0.6) saturate(0.85) blur(2px);
  transform: scale(1.04);
  transition:
    filter 0.5s,
    transform 0.5s;
}
@media (orientation: landscape) {
  #bg {
    background-image: url(assets/art/bg-landscape.webp);
  }
  body.on-map #bg,
  body.playing #bg {
    background-image: var(--map-bg-wide, url(assets/art/bg-landscape.webp));
  }
}
@media (orientation: portrait) {
  body.on-map #bg,
  body.playing #bg {
    background-image: var(--map-bg, url(assets/art/bg-map.webp));
  }
}
body.on-map #bg {
  transition: background-image 0.45s ease;
} /* fundo de cada capítulo (levels.json: mapBackground / mapBackgroundWide) */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  padding: max(calc(var(--u) * 3), env(safe-area-inset-top)) calc(var(--u) * 4)
    max(calc(var(--u) * 4), env(safe-area-inset-bottom));
}
.screen.on {
  display: flex;
  animation: enter 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes enter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* ---------- peças em 3 fatias: o meio entra 4 px por baixo de cada ponta (sem fio na emenda) ---------- */
.btn,
.ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bh);
  flex: none;
  background:
    var(--l) left center / auto 100% no-repeat,
    var(--r) right center / auto 100% no-repeat,
    var(--m) center / calc(100% - var(--cap) * 2 + 8px) 100% no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1) rgba(15, 5, 35, 0.45));
}
.btn > span,
.ribbon > span {
  position: relative;
  padding: 0 calc(var(--cap) * 0.72);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.btn {
  --bh: calc(var(--u) * 14);
  --cap: calc(var(--bh) * 0.6);
  min-width: calc(var(--u) * 50);
  font-size: calc(var(--u) * 6);
  transition:
    transform 0.08s,
    filter 0.12s;
}
.btn.gold > span {
  text-shadow:
    0 calc(var(--u) * 0.45) 0 #6a3500,
    0 0 calc(var(--u) * 1.6) rgba(80, 30, 0, 0.9);
}
.btn.gold {
  --l: url(assets/art/btn-gold-l.webp);
  --m: url(assets/art/btn-gold-m.webp);
  --r: url(assets/art/btn-gold-r.webp);
}
.btn.red {
  --l: url(assets/art/btn-red-l.webp);
  --m: url(assets/art/btn-red-m.webp);
  --r: url(assets/art/btn-red-r.webp);
}
.btn.green {
  --l: url(assets/art/btn-green-l.webp);
  --m: url(assets/art/btn-green-m.webp);
  --r: url(assets/art/btn-green-r.webp);
}
.btn.big {
  --bh: calc(var(--u) * 17);
  min-width: calc(var(--u) * 62);
  font-size: calc(var(--u) * 7);
}
.btn.glow {
  filter: drop-shadow(0 0 calc(var(--u) * 2.2) rgba(255, 214, 110, 0.55))
    drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1) rgba(15, 5, 35, 0.5));
}
.btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 calc(var(--u) * 2.4) rgba(255, 214, 110, 0.6))
    drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 1.3) rgba(15, 5, 35, 0.5));
  transform: translateY(calc(var(--u) * -0.4));
}
.btn:active {
  transform: translateY(calc(var(--u) * 0.8)) scale(0.985);
  filter: brightness(0.92) drop-shadow(0 calc(var(--u) * 0.3) calc(var(--u) * 0.5) rgba(15, 5, 35, 0.45));
}
.ribbon {
  --bh: calc(var(--u) * 13);
  --cap: calc(var(--bh) * 0.81);
  --l: url(assets/art/ribbon-l.webp);
  --m: url(assets/art/ribbon-m.webp);
  --r: url(assets/art/ribbon-r.webp);
  min-width: calc(var(--u) * 56);
  max-width: 96%;
  font-size: calc(var(--u) * 5.4);
}
/* a parte reta da faixa ocupa as linhas 2-82 de 106 da arte (os rabos descem até embaixo): o centro dela fica 9% da altura acima do centro da imagem */
.ribbon > span {
  padding: 0 calc(var(--cap) * 1.05);
  line-height: 1;
  transform: translateY(calc(var(--bh) * -0.09));
}
.ribbon.small {
  --bh: calc(var(--u) * 12);
  min-width: calc(var(--u) * 64);
  font-size: calc(var(--u) * 4.4);
}

/* ---------- botões redondos e ícones ---------- */
.rbtn {
  position: relative;
  width: calc(var(--u) * 12.5);
  height: calc(var(--u) * 12.5);
  flex: none;
  background: url(assets/art/btn-round.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 0.8) calc(var(--u) * 1) rgba(15, 5, 35, 0.45));
  transition:
    transform 0.08s,
    filter 0.12s;
}
.rbtn.big {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
}
.rbtn:hover {
  filter: brightness(1.12) drop-shadow(0 0 calc(var(--u) * 1.6) rgba(255, 214, 110, 0.5));
  transform: scale(1.04);
}
.rbtn:active {
  transform: translateY(calc(var(--u) * 0.6)) scale(0.95);
}
.rbtn .ico {
  position: absolute;
  inset: 19%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 calc(var(--u) * 0.5) rgba(8, 14, 50, 0.95))
    drop-shadow(0 calc(var(--u) * 0.3) calc(var(--u) * 0.3) rgba(0, 0, 0, 0.6));
}
.rlab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 4.2);
  max-width: calc(var(--u) * 24);
  text-align: center;
  white-space: nowrap;
}
.rlab > span {
  max-width: 100%;
  overflow: hidden;
  text-shadow:
    0 calc(var(--u) * 0.4) 0 #1a0f3a,
    0 0 calc(var(--u) * 1.6) rgba(10, 5, 25, 0.95),
    0 0 calc(var(--u) * 0.6) #000;
}
.ico {
  display: inline-block;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  background: var(--i) center / contain no-repeat;
  vertical-align: middle;
  flex: none;
}
.ico.gear {
  --i: url(assets/art/ic-gear.webp);
}
.ico.play {
  --i: url(assets/art/ic-play.webp);
}
.ico.pause {
  --i: url(assets/art/ic-pause.webp);
}
.ico.home {
  --i: url(assets/art/ic-home.webp);
}
.ico.restart {
  --i: url(assets/art/ic-restart.webp);
}
.ico.hint {
  --i: url(assets/art/ic-hint.webp);
}
.ico.music {
  --i: url(assets/art/ic-music.webp);
}
.ico.sound {
  --i: url(assets/art/ic-sound.webp);
}
.ico.vibrate {
  --i: url(assets/art/ic-vibrate.webp);
}
.ico.globe {
  --i: url(assets/art/ic-globe.webp);
}
.ico.back {
  --i: url(assets/art/ic-back.webp);
}
.ico.lock {
  --i: url(assets/art/ic-lock.webp);
}
.ico.star {
  --i: url(assets/art/ic-star.webp);
}
.ico.map {
  --i: url(assets/art/ic-map.webp);
}
.ico.close {
  --i: url(assets/art/ic-close.webp);
}
.ico.check {
  --i: url(assets/art/ic-check.webp);
}
.ico.eye {
  --i: url(assets/art/ic-eye.webp);
}
.ico.motion {
  --i: url(assets/art/ic-motion.webp);
}
.ico.fullscreen {
  --i: url(assets/art/ic-fullscreen.webp);
}
.hintbtn em {
  position: absolute;
  right: -6%;
  top: -6%;
  min-width: calc(var(--u) * 6.5);
  height: calc(var(--u) * 6.5);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: 99px;
  background: linear-gradient(#ffe39a, #e9a530);
  color: #3a2410;
  text-shadow: none;
  font-style: normal;
  font-size: calc(var(--u) * 4);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hintbtn.empty em {
  background: #5d5470;
  color: #eee;
}

/* placa de vidro opaca com aro dourado (contadores, nome da fase) */
.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  min-height: calc(var(--u) * 11.5);
  min-width: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 4);
  font-size: calc(var(--u) * 5);
  border-radius: 99px;
  background: linear-gradient(180deg, #4a2c9a, #2a1866);
  border: calc(var(--u) * 0.5) solid var(--gold);
  box-shadow:
    inset 0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgba(255, 255, 255, 0.2),
    0 calc(var(--u) * 0.7) calc(var(--u) * 1.2) rgba(15, 5, 35, 0.5);
}
.plate.wide {
  flex: 1;
  min-width: 0;
}
#s-play .bar {
  display: grid;
  grid-template-columns: calc(var(--u) * 28) 1fr calc(var(--u) * 28);
}
#s-play .plate.moves b {
  white-space: nowrap;
}
#s-play .bar > :first-child {
  justify-self: start;
}
#s-play .bar > :last-child {
  justify-self: end;
}
.plate .ico {
  width: calc(var(--u) * 7.5);
  height: calc(var(--u) * 7.5);
}
.plate.moves {
  flex-direction: column;
  gap: 0;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 3.5);
  border-radius: calc(var(--u) * 5);
  line-height: 1.05;
}
.plate.moves small {
  font-size: calc(var(--u) * 3.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e3d6ff;
}
.plate.moves b {
  font-size: calc(var(--u) * 6);
}
#levelName {
  font-size: calc(var(--u) * 4.6);
}
.mini {
  display: flex;
  gap: calc(var(--u) * 0.3);
}
.mini .ico {
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
}
.mini .ico.off {
  filter: grayscale(1) brightness(0.55);
}

.bar {
  position: absolute;
  top: max(calc(var(--u) * 3), env(safe-area-inset-top));
  left: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  justify-content: space-between;
  z-index: 2;
}

/* ---------- abertura ---------- */
.logo {
  width: calc(var(--u) * 80);
  max-width: 94%;
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 2.5) rgba(20, 5, 40, 0.6));
}
.logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
#s-title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 42% at 50% 50%, rgba(14, 7, 34, 0.6), transparent 72%);
}
.logo-wrap::before {
  content: '';
  position: absolute;
  inset: -18% -10%;
  background: radial-gradient(closest-side, rgba(255, 210, 110, 0.42), rgba(255, 180, 80, 0.12) 55%, transparent 75%);
  animation: halo 4s ease-in-out infinite alternate;
}
@keyframes halo {
  to {
    opacity: 0.65;
    transform: scale(1.06);
  }
}
.logo.big {
  position: relative;
  width: calc(var(--u) * 92);
  animation: float 3.2s ease-in-out infinite alternate;
}
@keyframes float {
  to {
    transform: translateY(calc(var(--u) * -1.6));
  }
}
#s-title {
  gap: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 14);
}
.tagline {
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(var(--u) * 7.2);
  letter-spacing: 0.02em;
  margin-top: calc(var(--u) * -4);
  color: #fff3d0;
  text-shadow:
    0 calc(var(--u) * 0.5) 0 #1a0f3a,
    0 0 calc(var(--u) * 0.8) #000,
    0 0 calc(var(--u) * 2.4) rgba(10, 5, 25, 0.95);
}
#btnStart {
  --bh: calc(var(--u) * 20);
  font-size: calc(var(--u) * 8.4);
  margin-top: calc(var(--u) * 4);
  min-width: calc(var(--u) * 76);
  animation: breathe 1.6s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    transform: scale(1.04);
  }
}
.version {
  display: none;
  position: absolute;
  bottom: max(calc(var(--u) * 3), env(safe-area-inset-bottom));
  font-size: calc(var(--u) * 3);
  opacity: 0.6;
  font-weight: 600;
}
.shards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.7;
}
#s-title > :not(.shards) {
  position: relative;
  z-index: 1;
}
.shards i {
  position: absolute;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 6.6);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.85;
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) currentColor);
  animation: drift 7s ease-in-out infinite alternate;
}
.shards i:nth-child(1) {
  left: 28%;
  top: 31%;
  background: #ff8fc8;
  color: #ff8fc8;
}
.shards i:nth-child(2) {
  left: 78%;
  top: 34%;
  background: #ffd36b;
  color: #ffd36b;
  animation-delay: -2s;
}
.shards i:nth-child(3) {
  left: 12%;
  top: 55%;
  background: #7fd3ff;
  color: #7fd3ff;
  animation-delay: -4s;
}
.shards i:nth-child(4) {
  left: 88%;
  top: 62%;
  background: #ff9a4c;
  color: #ff9a4c;
  animation-delay: -1s;
}
.shards i:nth-child(5) {
  left: 9%;
  top: 74%;
  background: #b88cff;
  color: #b88cff;
  animation-delay: -5s;
}
.shards i:nth-child(6) {
  left: 85%;
  top: 22%;
  background: #8cf0a0;
  color: #8cf0a0;
  animation-delay: -3s;
}
.shards i:nth-child(7) {
  left: 20%;
  top: 18%;
  background: #fff3c4;
  color: #fff3c4;
  animation-delay: -6s;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 3);
}
.shards i:nth-child(8) {
  left: 70%;
  top: 80%;
  background: #7fd3ff;
  color: #7fd3ff;
  animation-delay: -2.5s;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 3.4);
}
@keyframes drift {
  to {
    transform: translateY(calc(var(--u) * -4)) rotate(25deg);
    opacity: 0.5;
  }
}

/* ---------- início: rosácea do capítulo ---------- */
#s-home {
  justify-content: center;
  gap: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 18);
}
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--u) * 120);
  aspect-ratio: 1;
  transform: translate(-50%, -12%);
  background: radial-gradient(closest-side, rgba(14, 8, 32, 0.62), rgba(14, 8, 32, 0.35) 60%, transparent);
  pointer-events: none;
}
.hero > * {
  position: relative;
}
.rose {
  position: relative;
  width: calc(var(--u) * 74);
  aspect-ratio: 1;
}
.rose > div {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat;
}
.rose .rose-dim {
  background-image: url(assets/art/rose-dim.webp);
}
/* aro dourado por cima da borda da rosácea: o furo do aro (70% do raio) cobre a borda dela (≈90% de 0,945) → aro 1,215× */
.hero > .ribbon {
  margin-top: calc(var(--u) * 6);
}
.rose .rose-ring {
  inset: -10.7%;
  background-image: url(assets/art/rose-ring.webp);
  pointer-events: none;
}
/* acesas: as N primeiras pétalas (fatias de 36°, começando no topo) + o aro e o miolo sempre acesos */
.rose .rose-lit {
  background-image: url(assets/art/rose.webp);
  -webkit-mask:
    conic-gradient(
      from -18deg,
      #000 0 calc(var(--lit, 0) * 36deg - 5deg),
      transparent calc(var(--lit, 0) * 36deg + 5deg)
    ),
    radial-gradient(circle, #000 0 20%, transparent 23% 83%, #000 87%);
  mask:
    conic-gradient(
      from -18deg,
      #000 0 calc(var(--lit, 0) * 36deg - 5deg),
      transparent calc(var(--lit, 0) * 36deg + 5deg)
    ),
    radial-gradient(circle, #000 0 20%, transparent 23% 83%, #000 87%);
  filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 210, 110, 0.45));
}
.rose::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--u) * 10) rgba(255, 200, 100, 0.35);
  pointer-events: none;
}
.hero .ribbon {
  margin-top: calc(var(--u) * -6);
}
.count {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 4.6);
}
.count b {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 4);
  border-radius: 99px;
  background: linear-gradient(180deg, #4a2c9a, #2a1866);
  border: calc(var(--u) * 0.45) solid var(--gold);
}
.count i {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 0.5);
  background: linear-gradient(90deg, transparent, var(--gold));
  position: relative;
}
.count i:last-child {
  transform: scaleX(-1);
}
.count i::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  background: #7fe3ff;
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 calc(var(--u) * 1) #7fe3ff;
}
.dock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--u) * 3);
  width: 100%;
  padding: 0 calc(var(--u) * 2);
}
.dock .btn {
  margin-top: calc(var(--u) * 0.5);
  min-width: calc(var(--u) * 52);
}
.dock > .rlab {
  flex: none;
}
.btn > span.two {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.02;
  font-size: 0.78em;
}
.btn > span.two .sep {
  display: none;
}
@media (orientation: portrait) {
  .dock .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(var(--u) * 66);
  }
} /* texto longo (ru, de) encolhe a letra em vez de empurrar Mapa/Ajustes para fora */

/* ---------- mapa: janelas em arco ligadas por uma trilha de luz ---------- */
#s-map {
  justify-content: flex-start;
  padding-top: calc(var(--u) * 24);
}
.scroll {
  width: 100%;
  max-width: calc(var(--u) * 120);
  flex: 1;
  overflow-y: auto;
  touch-action: pan-y;
  padding: 0 calc(var(--u) * 4) calc(var(--u) * 10);
  scrollbar-width: none;
}
.scroll::-webkit-scrollbar {
  display: none;
}
.chapter {
  position: relative;
  margin-bottom: calc(var(--u) * 8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
}
.chapter > .rose {
  display: none;
}
.ch-nav {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  width: 100%;
}
.ch-nav .ribbon {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(var(--u) * 80);
}
.ch-nav .ribbon > span {
  padding: 0 calc(var(--cap) * 0.9);
} /* folga até o aro dourado em nome longo (it, pt, pl) */
.ch-nav .arrow[hidden] {
  display: block;
  visibility: hidden;
}
.ch-nav .arrow.next .ico {
  transform: scaleX(-1);
}
.dots {
  display: flex;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2.6);
  border-radius: 99px;
  background: rgba(20, 10, 44, 0.75);
}
.dots i {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  border-radius: 50%;
  background: #6d5aa8;
  box-shadow: 0 0 0 1px rgba(20, 10, 40, 0.7);
}
.dots i.on {
  background: #ffd46e;
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 214, 110, 0.9);
  transform: scale(1.25);
}
.dots i.shut:not(.on) {
  background: #3a2d63;
}
.ch-lock {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 4);
  border-radius: 99px;
  background: rgba(20, 10, 44, 0.82);
  border: 2px solid #c9a24a;
  color: #ffe9b0;
  font-size: calc(var(--u) * 3.8);
  text-shadow: 0 1px 0 #000;
}
.ch-lock .ico {
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 5.5);
}
.windows {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 12) calc(var(--u) * 6);
  width: 100%;
  padding: calc(var(--u) * 4) calc(var(--u) * 3) 0;
}
.trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.trail path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.win {
  position: relative;
  isolation: isolate;
  aspect-ratio: 400 / 530;
  display: grid;
  place-items: center;
  transition: transform 0.1s;
}
.win .pic {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  -webkit-mask: url(assets/art/arch-mask.png) center / 100% 100% no-repeat;
  mask: url(assets/art/arch-mask.png) center / 100% 100% no-repeat;
}
.win .pic .mosaic {
  position: absolute;
  inset: 0;
}
.win.locked .pic {
  background: radial-gradient(ellipse at 50% 35%, #3a3a52, #16141f 75%);
}
.win::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(assets/art/arch.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(10, 4, 25, 0.6));
}
.win.locked::after {
  filter: saturate(0.75) brightness(0.85) drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(10, 4, 25, 0.6));
}
.win .num {
  position: absolute;
  z-index: 2;
  bottom: 2.5%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  min-width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 1);
  border-radius: 99px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #e4a63b);
  color: #4a2600;
  text-shadow: none;
  font-size: calc(var(--u) * 3.6);
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.55);
}
.win.locked .num {
  background: none;
  box-shadow: none;
  color: #ede6ff;
  font-size: calc(var(--u) * 5.4);
  text-shadow:
    0 2px 0 #120a28,
    0 0 calc(var(--u) * 1.5) #000;
}
.win .ico.lock {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 36%;
  margin-top: -10%;
}
.win .stars {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--u) * -4.5);
  display: flex;
  gap: calc(var(--u) * 0.4);
}
.win .stars i {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.win .stars i.off {
  filter: grayscale(1) brightness(1.1) opacity(0.55) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.win.current {
  animation: pulse 1.6s ease-in-out infinite;
}
.win.current::before {
  content: '';
  position: absolute;
  inset: -22% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 220, 120, 0.85), rgba(255, 190, 80, 0.35) 60%, transparent);
}
.win.current::after {
  filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ffd36b) drop-shadow(0 0 calc(var(--u) * 3.5) rgba(255, 214, 110, 0.8));
}
@keyframes pulse {
  50% {
    transform: scale(1.05);
  }
}
.win:not(.locked):active {
  transform: scale(0.95);
}
.mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 2.5%;
  padding: 2.5%;
  background: #1b1230;
}
.mosaic i {
  border-radius: 8%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, 0.25);
}

/* ---------- jogo ---------- */
#s-play {
  justify-content: flex-start;
  padding-top: calc(var(--u) * 18);
  padding-bottom: max(calc(var(--u) * 4), env(safe-area-inset-bottom));
  gap: calc(var(--u) * 2.5);
}
#stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.board {
  position: absolute;
  z-index: 1;
}
.frame {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-style: solid;
  border-color: transparent;
  border-image: url(assets/art/frame.webp) 118 / var(--fw) stretch;
  filter: drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 2.5) rgba(10, 4, 25, 0.6));
}
.frame-back {
  position: absolute;
  z-index: 0;
  border-radius: calc(var(--u) * 2);
  background: #120b24;
  box-shadow: inset 0 0 calc(var(--u) * 4) rgba(0, 0, 0, 0.8);
}
.crown {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  background: url(assets/art/crown.webp) center / contain no-repeat;
}
.crown.arch {
  background-image: url(assets/art/tympanum.webp);
  background-size: 100% 100%;
  filter: saturate(0.85) drop-shadow(0 calc(var(--u) * -0.5) calc(var(--u) * 1.5) rgba(10, 4, 25, 0.5));
}
.corner {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  background: url(assets/art/corner.webp) center / contain no-repeat;
}
.corner[hidden] {
  display: none;
}
.corner.tl {
  transform: scaleX(-1);
}
.corner.bl {
  transform: scale(-1, -1);
}
.corner.br {
  transform: scaleY(-1);
}
.tile {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.face {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transition:
    clip-path 140ms ease-out,
    filter 200ms ease-out;
  cursor: grab;
}
.tile.solo .face {
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.55) rgba(255, 240, 200, 0.55),
    inset 0 0 0 calc(var(--u) * 0.8) rgba(20, 10, 40, 0.35);
}
.tile.lift {
  z-index: 10;
  filter: drop-shadow(0 calc(var(--u) * 2.5) calc(var(--u) * 3) rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 214, 110, 0.7));
}
.tile.lift .face {
  cursor: grabbing;
}
@media (hover: hover) {
  .tile:not(.lift):hover .face {
    filter: brightness(1.08);
  }
}
.tile.glow .face {
  filter: brightness(1.4) saturate(1.15);
}
.fx {
  position: absolute;
  pointer-events: none;
  z-index: 20;
}
.fx.ring {
  border: calc(var(--u) * 0.7) solid #fff0b8;
  box-shadow:
    0 0 calc(var(--u) * 2.5) #ffd36b,
    inset 0 0 calc(var(--u) * 2.5) #ffd36b;
}
.fx.ring.amber {
  border-color: #ffd27a;
  box-shadow:
    0 0 calc(var(--u) * 3) rgba(255, 170, 60, 0.9),
    inset 0 0 calc(var(--u) * 2.5) rgba(255, 170, 60, 0.7);
}
.fx.light {
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 220, 0.7) 50%, transparent 65%) 0 0 / 250% 100%;
  mix-blend-mode: screen;
}
.peek {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.peek.on {
  opacity: 1;
}
.caption {
  min-height: calc(var(--u) * 11);
  max-width: calc(var(--u) * 88);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 5);
  text-align: center;
  font-size: calc(var(--u) * 4.2);
  line-height: 1.25;
  border-radius: calc(var(--u) * 4);
  background: linear-gradient(180deg, #4a2c9a, #2a1866);
  border: calc(var(--u) * 0.45) solid var(--gold);
  transition:
    opacity 0.3s,
    transform 0.3s;
  text-wrap: balance;
}
.caption:empty,
.caption.off {
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * 2));
  min-height: 0;
  padding: 0;
  border: 0;
}
.tools {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 1);
}
.progress {
  position: relative;
  flex: 1;
  align-self: center;
  margin-bottom: calc(var(--u) * 5);
  height: calc(var(--u) * 7.5);
  border-radius: 99px;
  background: #1d1036;
  border: calc(var(--u) * 0.5) solid var(--gold);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* barra em 10 gomos, divisórias por cima do preenchimento */
.progress::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(10% - 1.5px),
    rgba(20, 10, 40, 0.75) calc(10% - 1.5px) 10%
  );
}
.progress > b {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 3.8);
}
.progress > div {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffe39a, #e9a530);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 214, 110, 0.7);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ---------- painel ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 5, 25, 0.93);
  z-index: 50;
  padding: calc(var(--u) * 6) calc(var(--u) * 5);
}
.modal[hidden] {
  display: none;
}
body.modal-open:not(.keep-stage) #stage,
body.modal-open .caption,
body.modal-open .tools,
body.modal-open .screen.on .bar,
body.modal-open .dock {
  visibility: hidden;
}
.modal.on {
  animation: veil 0.22s ease-out;
}
@keyframes veil {
  from {
    background: rgba(10, 5, 25, 0);
  }
}
.modal.on .panel {
  animation: pop 0.34s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes pop {
  from {
    transform: scale(0.82);
    opacity: 0;
  }
}
.panel {
  position: relative;
  width: min(calc(var(--u) * 92), 100%);
  padding: calc(var(--u) * 13) calc(var(--u) * 5.5) calc(var(--u) * 7);
  border: calc(var(--u) * 4.5) solid transparent;
  border-image: url(assets/art/panel-glass.webp) 140 / calc(var(--u) * 8.8) stretch; /* faixa de 95 px em 140 → 6u visíveis */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150, 110, 230, 0.55), transparent 60%),
    linear-gradient(180deg, #5a2fa8, #3a1a78 55%, #2c1462);
  background-clip: padding-box;
  border-radius: calc(var(--u) * 5);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.panel > .ribbon {
  position: absolute;
  top: calc(var(--u) * -10);
  left: 50%;
  transform: translateX(-50%);
  --bh: calc(var(--u) * 14);
  min-width: calc(var(--u) * 58);
  max-width: calc(100% - var(--u) * 26);
  font-size: calc(var(--u) * 5.8);
}
.rbtn.x {
  position: absolute;
  top: calc(var(--u) * -5);
  right: calc(var(--u) * -5);
  width: calc(var(--u) * 12.5);
  height: calc(var(--u) * 12.5);
  z-index: 2;
}
.body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 4.6);
}
.set-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
  position: relative;
}
.set-row:not(:last-of-type)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 207, 106, 0.75) 12% 88%, transparent);
}
.set-row:not(:last-of-type)::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -1);
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  background: #ffd46e;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 calc(var(--u) * 1) rgba(255, 214, 110, 0.8);
  z-index: 1;
}
.set-row .ico {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
}
.panel .body > .btns.col:first-child {
  padding-bottom: calc(var(--u) * 4);
  background: linear-gradient(90deg, transparent, rgba(246, 207, 106, 0.75) 12% 88%, transparent) bottom / 100% 1px
    no-repeat;
}
.set-row .tx {
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.08;
  overflow-wrap: anywhere;
  font-size: calc(var(--u) * 4.1) !important;
}
.set-row .ctl {
  flex: none;
  width: calc(var(--u) * 25);
  display: flex;
  justify-content: flex-end;
}
.set-row .ctl:has(select) {
  width: calc(var(--u) * 31);
} /* "English" e nomes longos de idioma cabem */
.vol {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 12);
  background: none;
  outline: none;
  touch-action: none;
  cursor: pointer;
}
.vol::-webkit-slider-runnable-track {
  height: calc(var(--u) * 4.4);
  border-radius: 99px;
  border: 1.5px solid #9d88d6;
  --x: calc(var(--u) * 5.5 + (100% - var(--u) * 11) * var(--p, 0.5));
  background: linear-gradient(90deg, #ffd46e var(--x), #7a6aa8 var(--x));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}
.vol::-moz-range-track {
  height: calc(var(--u) * 4.4);
  border-radius: 99px;
  border: 1.5px solid #9d88d6;
  background: #4a3780;
}
.vol::-moz-range-progress {
  height: calc(var(--u) * 3.6);
  border-radius: 99px;
  background: #ffd46e;
}
.vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin-top: calc(var(--u) * -3.3);
  border-radius: 50%;
  background: url(assets/art/btn-round.webp) center / 100% 100%;
  border: 0;
}
.vol::-moz-range-thumb {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  background: url(assets/art/btn-round.webp) center / 100% 100%;
  border: 0;
}
.vol:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff3c4;
}
.sw {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 11.5);
  border-radius: 99px;
  background: #4a4470;
  border: 2px solid #b8a9e8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.sw::after {
  content: '';
  position: absolute;
  top: 6%;
  left: 4%;
  width: 52%;
  height: 88%;
  border-radius: 50%;
  background: url(assets/art/btn-round.webp) center / 100% 100%;
  filter: saturate(0.6) brightness(0.9);
  transition:
    left 0.2s cubic-bezier(0.34, 1.5, 0.64, 1),
    filter 0.2s;
}
.sw::before {
  content: '✕';
  position: absolute;
  right: 13%;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(var(--u) * 4);
  line-height: 1;
  color: #e4dcff;
  text-shadow: none;
}
.sw[aria-checked='true']::before {
  content: '✓';
  right: auto;
  left: 15%;
  color: #5a3000;
}
.sw[aria-checked='true'] {
  background: linear-gradient(90deg, #f2a516, #ffdc4a);
  border-color: #fff0b8;
}
.sw[aria-checked='true']::after {
  left: 44%;
  filter: none;
}
.sw:focus-visible,
.rbtn:focus-visible,
.btn:focus-visible,
select.lang:focus-visible {
  outline: 3px solid #fff3c4;
  outline-offset: 2px;
}
select.lang {
  font: inherit;
  font-size: calc(var(--u) * 4.4);
  color: var(--ink);
  background: #2a1866;
  border: calc(var(--u) * 0.45) solid var(--gold);
  border-radius: 99px;
  min-height: calc(var(--u) * 11);
  padding: 0 calc(var(--u) * 3);
  width: 100%;
}
.btns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 1);
}
.btns.col {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
}
.btns .row {
  display: flex;
  gap: calc(var(--u) * 8);
  justify-content: center;
}

/* vitória: estrelas grandes em cima, vitral na moldura com raios atrás, placa de jogadas */
.win-stars {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -40);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 1);
}
.win-stars::before {
  content: '';
  position: absolute;
  inset: -110% -45%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 214, 110, 0.55), rgba(255, 200, 90, 0.15) 55%, transparent),
    repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 215, 120, 0.32) 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
  mask: radial-gradient(closest-side, #000 30%, transparent);
}
/* gemas de vidro em volta das estrelas */
.win-stars::after {
  content: '';
  position: absolute;
  inset: -40% -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 30%, #ff6fb0 0 calc(var(--u) * 0.9), transparent calc(var(--u) * 1.1)),
    radial-gradient(circle at 94% 26%, #5fe3ff 0 calc(var(--u) * 1), transparent calc(var(--u) * 1.2)),
    radial-gradient(circle at 16% 82%, #ffb347 0 calc(var(--u) * 0.8), transparent calc(var(--u) * 1)),
    radial-gradient(circle at 86% 80%, #8cf0a0 0 calc(var(--u) * 0.9), transparent calc(var(--u) * 1.1)),
    radial-gradient(circle at 50% 2%, #fff3c4 0 calc(var(--u) * 0.7), transparent calc(var(--u) * 0.9));
  filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.8));
}
.panel.with-stars {
  margin-top: calc(var(--u) * 30);
}
.panel.with-stars > .ribbon {
  min-width: calc(var(--u) * 70);
}
.win-stars i {
  width: calc(var(--u) * 17);
  height: calc(var(--u) * 17);
  filter: grayscale(1) brightness(0.5);
}
.win-stars i:nth-child(2) {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}
.win-stars i.on {
  filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 214, 110, 0.9));
  animation: stamp 0.42s cubic-bezier(0.34, 1.7, 0.64, 1);
}
@keyframes stamp {
  from {
    transform: scale(1.6) rotate(-20deg);
    opacity: 0;
  }
}
/* vitória sem a figura: o resultado (jogadas x par) é o destaque, em placas como a de jogadas do jogo */
.score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 2);
}
.score > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--u) * 30);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(180deg, #4a2c9a, #2a1866);
  border: calc(var(--u) * 0.45) solid var(--gold);
  line-height: 1.05;
  box-shadow:
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.12),
    0 calc(var(--u) * 0.8) calc(var(--u) * 1.6) rgba(10, 5, 25, 0.5);
}
.score small {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: calc(var(--u) * 3.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e3d6ff;
}
.score b {
  font-size: calc(var(--u) * 12);
  text-shadow:
    0 calc(var(--u) * 0.5) 0 #1a0f3a,
    0 0 calc(var(--u) * 1.5) rgba(10, 5, 25, 0.8);
}
.score.good > div:first-child b {
  color: #ffd36b;
}
.score > i {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  background: #7fe3ff;
  transform: rotate(45deg);
  box-shadow: 0 0 calc(var(--u) * 1) #7fe3ff;
  flex: none;
}
.verdict {
  margin: 0;
  font-size: calc(var(--u) * 6.4);
  color: #ffd36b;
  text-shadow:
    0 calc(var(--u) * 0.45) 0 #6a3500,
    0 0 calc(var(--u) * 2) rgba(255, 200, 90, 0.6);
}
.perfect {
  color: #ffd36b;
}
.btns.col .btn.green {
  animation: nudge 1.8s ease-in-out 2.6s infinite;
}
@keyframes nudge {
  50% {
    transform: scale(1.04);
  }
}
.sparkle {
  position: absolute;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  background: #fff3c4;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
}

.gift {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  color: #ffe39a;
  font-size: calc(var(--u) * 4.4);
  animation: giftIn 0.45s 1.1s both cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gift .ico {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
}
@keyframes giftIn {
  from {
    opacity: 0;
    transform: translateY(calc(var(--u) * 2)) scale(0.7);
  }
}
.toast {
  position: fixed;
  left: 50%;
  top: auto;
  bottom: 9%;
  transform: translate(-50%, -20px) scale(0.8);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 6);
  border-radius: 99px;
  font-size: calc(var(--u) * 5);
  background: linear-gradient(#ffe39a, #e9a530);
  color: #3a2410;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
}
body.modal-open .toast {
  visibility: hidden;
} /* aviso não cobre o painel de pausa/ajustes */
.toast.on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ---------- deitado ---------- */
@media (orientation: landscape) {
  #s-home {
    flex-direction: row;
    gap: calc(var(--u) * 10);
    padding-top: calc(var(--u) * 6);
  }
  #s-home .rose {
    width: calc(var(--u) * 72);
  }
  #s-home .dock {
    position: relative;
    flex-wrap: wrap;
    width: calc(var(--u) * 70);
    justify-content: space-between;
    padding: 0 calc(var(--u) * 12);
    gap: calc(var(--u) * 4) 0;
  }
  #s-home .dock::before {
    content: '';
    position: absolute;
    inset: calc(var(--u) * -10);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(14, 7, 34, 0.6), transparent);
  }
  #s-home .dock .btn {
    order: -1;
    flex-basis: 100%;
  }
  #s-home .dock .rlab {
    font-size: calc(var(--u) * 4);
  }
  #s-play {
    flex-direction: row;
    padding: calc(var(--u) * 4) calc(var(--u) * 42);
    align-items: stretch;
    gap: calc(var(--u) * 4);
  }
  #s-play .bar {
    display: flex;
    right: auto;
    left: calc(var(--u) * 5);
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--u) * 32);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: calc(var(--u) * 3);
  }
  #s-play .bar .rbtn {
    align-self: center;
  }
  #s-play .plate.wide {
    flex: none;
    width: 100%;
  }
  #s-play .plate.moves {
    width: 100%;
  }
  #s-play .tools {
    position: absolute;
    right: calc(var(--u) * 5);
    left: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--u) * 32);
    flex-wrap: wrap;
    justify-content: space-around;
    gap: calc(var(--u) * 3);
  }
  #s-play .tools .progress {
    order: 3;
    flex-basis: 100%;
  }
  #s-play .caption {
    position: absolute;
    left: calc(var(--u) * 5);
    top: auto;
    bottom: calc(var(--u) * 5);
    width: calc(var(--u) * 32);
    font-size: calc(var(--u) * 3.8);
  }
  .windows {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo.big,
  .logo-wrap::before,
  .shards i,
  #btnStart,
  .win.current {
    animation: none;
  }
}
body.reduced .logo.big,
body.reduced .logo-wrap::before,
body.reduced .shards i,
body.reduced #btnStart,
body.reduced .win.current,
body.reduced .gift {
  animation: none;
}

/* End of style.css */