/* Hoot Spot: interface (placar, botões, telas, janelas). --u = unidade de escala calculada pelo tamanho da tela. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fredoka-latin.woff2) format('woff2');
}
:root {
  --u: 1px;
  --ink: #3a2416;
  --cream: #fff6e3;
  --cream2: #fbe6bf;
  --font: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --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);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font);
  color: var(--ink);
  background: #9fdc6a url(../assets/pagina-retrato.webp) center / cover no-repeat;
}
body.land {
  background-image: url(../assets/pagina-deitada.webp);
}
#game,
#fx {
  position: fixed;
  left: 0;
  top: 0;
}
#fx {
  pointer-events: none;
  z-index: 30;
}
#ui {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
#ui > * {
  pointer-events: auto;
}
.hidden {
  display: none !important;
}

/* ---- botões ---- */
.btn {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: calc(18 * var(--u));
  background: linear-gradient(#fff9e9, var(--cream2));
  box-shadow:
    0 calc(5 * var(--u)) 0 var(--ink),
    inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.08);
  transition:
    transform 90ms ease,
    box-shadow 90ms ease;
  padding: calc(10 * var(--u)) calc(22 * var(--u));
  font-size: calc(22 * var(--u));
  position: relative;
  outline: none;
}
.btn:focus-visible {
  box-shadow:
    0 calc(5 * var(--u)) 0 var(--ink),
    0 0 0 calc(4 * var(--u)) #fff;
}
@media (hover: hover) and (pointer: fine) {
  /* só levanta: a sombra escura retangular aparecia e sumia nos botões desenhados (parecia piscar) */
  .btn:hover {
    transform: translateY(calc(-2 * var(--u)));
  }
}
.btn:active,
.btn.press {
  transform: translateY(calc(4 * var(--u)));
}
.btn.green {
  isolation: isolate;
  background: linear-gradient(#9cf56a 0%, #5ad83a 45%, #34b52a 100%);
  color: #fff;
  -webkit-text-stroke: calc(5 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(3 * var(--u)) 0 var(--ink);
  box-shadow:
    0 calc(6 * var(--u)) 0 var(--ink),
    inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.14);
}
.btn.green::before {
  z-index: -1;
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  height: 32%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
}
.btn.green.big {
  border-width: calc(5 * var(--u));
}
.btn.round {
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe680, #ffc21a 60%, #f0a40c);
}
.btn.round svg {
  width: 52%;
  height: 52%;
}
.btn.big {
  font-size: calc(50 * var(--u));
  padding: calc(14 * var(--u)) calc(64 * var(--u));
  border-radius: calc(34 * var(--u));
  border-width: calc(4 * var(--u));
}
.btn.green.big .spk {
  position: absolute;
  pointer-events: none;
  color: #ffd23a;
  -webkit-text-stroke: calc(2 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
  font-size: 0.5em;
  line-height: 1;
}
.btn.green.big .spk.a {
  left: -0.7em;
  top: -0.3em;
}
.btn.green.big .spk.b {
  left: -1em;
  top: 0.7em;
  font-size: 0.36em;
}
.btn.green.big .spk.c {
  right: -0.7em;
  top: -0.3em;
}
.btn.green.big .spk.d {
  right: -1em;
  top: 0.7em;
  font-size: 0.36em;
}
.badge {
  position: absolute;
  right: calc(-8 * var(--u));
  top: calc(-8 * var(--u));
  min-width: calc(29 * var(--u));
  height: calc(29 * var(--u));
  border-radius: 99px;
  background: #3fbf3a;
  color: #fff;
  border: calc(2.5 * var(--u)) solid var(--ink);
  font-size: calc(17 * var(--u));
  display: grid;
  place-items: center;
  line-height: 1;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
/* ---- placar (igual aos mockups) ---- */
.btn.round.yellow {
  background: radial-gradient(circle at 35% 30%, #ffe680, #ffc21a 60%, #f0a40c);
}
.btn.round.blue {
  background: radial-gradient(circle at 35% 30%, #8fd8ff, #3aa6f0 60%, #1f7fd0);
}
.btn.round.purple {
  background: radial-gradient(circle at 35% 30%, #d9a8ff, #a463ef 60%, #7d3fd0);
}
.pill {
  background: linear-gradient(#fffaf0, #fbe9c8);
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: 99px;
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(22 * var(--u));
  white-space: nowrap;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(58, 36, 22, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
}
.pill.lvl {
  background: linear-gradient(#fff3a6, #ffd84a);
}
.pill.cnt img {
  height: calc(30 * var(--u));
}
.pill.cnt b {
  font-weight: 700;
  font-size: 1.1em;
}
.stars5 {
  gap: calc(2 * var(--u));
  padding: calc(5 * var(--u)) calc(10 * var(--u));
}
.stars5 svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#hud > * {
  position: absolute;
  pointer-events: auto;
}
.ptop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(6 * var(--u));
}
.ptop .hudlogo {
  height: calc(74 * var(--u));
  max-width: 70%;
  object-fit: contain;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(6 * var(--u));
  width: 100%;
}
.topbar .pill {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(22 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
}
.topbar .btn.round {
  flex: 0 0 auto;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}
.ribbon {
  align-self: flex-start;
  margin-left: 2%;
  max-width: 74%;
  background: linear-gradient(#fbd08f, #eba95c);
  border: calc(3 * var(--u)) solid var(--ink);
  border-radius: calc(12 * var(--u));
  padding: calc(3 * var(--u)) calc(14 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 700;
  color: #4a2a14;
  text-transform: uppercase;
  letter-spacing: calc(0.6 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(58, 36, 22, 0.35);
}
.ribbon span::before,
.ribbon span::after {
  content: '✦';
  color: #fff3a6;
  margin: 0 calc(6 * var(--u));
}
.boosts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(30 * var(--u));
}
body:not(.land) .boosts {
  padding-bottom: calc(16 * var(--u));
}
body.land .boosts {
  gap: calc(34 * var(--u));
}
.blabel {
  font-size: calc(22 * var(--u));
  padding: calc(4 * var(--u)) calc(18 * var(--u));
}
.btn.boost {
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #fffdf4, #fbe6bf);
}
.btn.boost img {
  width: 66%;
  height: 66%;
  object-fit: contain;
  pointer-events: none;
}
body.land .btn.boost.reveal {
  background: radial-gradient(circle at 35% 30%, #e2b8ff, #a463ef 62%, #7d3fd0);
}
body.land .btn.boost.hint {
  background: radial-gradient(circle at 35% 30%, #a6e2ff, #3aa6f0 62%, #1f7fd0);
}
body.land .btn.boost.eye {
  background: radial-gradient(circle at 35% 30%, #ffc2df, #ff6fae 62%, #e0458d);
}
.btn.boost .cap {
  position: absolute;
  left: 50%;
  bottom: calc(-13 * var(--u));
  transform: translateX(-50%);
  background: var(--cream);
  border: calc(2.5 * var(--u)) solid var(--ink);
  border-radius: 99px;
  padding: 0 calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: var(--ink);
}
.btn.boost.empty .badge {
  background: #9a9a9a;
}
.btn.boost.empty {
  filter: grayscale(0.85) brightness(0.95);
}
#owl {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
.owlwrap {
  display: inline-block;
  transform-origin: 50% 100%;
}
#owl img {
  height: 100%;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(3 * var(--u)) 0 rgba(58, 36, 22, 0.25));
}
.pill.cnt.gold {
  background: linear-gradient(#fff3a6, #ffd23a);
}
.tip {
  position: absolute;
  background: var(--cream);
  border: calc(3 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  font-size: calc(17 * var(--u));
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  transition: opacity 300ms;
}

/* ---- telas (iguais aos mockups de todas as telas, fontes/folhas/15..18) ---- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u));
  padding-top: calc(16 * var(--u) + var(--sat));
  padding-bottom: calc(16 * var(--u) + var(--sab));
}
.plate {
  background: linear-gradient(#fbd08f, #eba95c);
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u));
  padding: calc(4 * var(--u)) calc(22 * var(--u));
  font-weight: 700;
  font-size: calc(32 * var(--u));
  color: var(--ink);
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(58, 36, 22, 0.45);
  white-space: nowrap;
}
.plate span::before,
.plate span::after {
  content: '✦';
  color: #fff3a6;
  margin: 0 calc(8 * var(--u));
  font-size: 0.7em;
  vertical-align: middle;
}
.plate.big {
  font-size: calc(40 * var(--u));
  padding: calc(4 * var(--u)) calc(30 * var(--u));
  position: relative;
}
.plate .peekowl {
  position: absolute;
  right: calc(-80 * var(--u));
  bottom: calc(-18 * var(--u));
  height: calc(86 * var(--u));
}
.plate .peekowl img {
  height: 100%;
}
.owlwrap {
  position: relative;
}
.owlwrap .drop {
  position: absolute;
  right: 4%;
  top: 6%;
  width: 30%;
  pointer-events: none;
}
.owlwrap .drop svg {
  width: 100%;
  display: block;
}
.ico {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  object-fit: contain;
  flex: 0 0 auto;
}

/* início */
.playico {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}
.btn.iconbtn {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  border-radius: 50%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fffdf4, #fbe6bf);
}
.btn.iconbtn .ico {
  width: 58%;
  height: 58%;
}
.btn.iconbtn span {
  position: absolute;
  bottom: calc(-14 * var(--u));
  background: var(--cream);
  border: calc(2.5 * var(--u)) solid var(--ink);
  border-radius: 99px;
  padding: 0 calc(16 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.5;
}
.homeleft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
}
body.land .homeleft {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.land .homepanel {
  padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
  gap: calc(24 * var(--u));
}
.homepanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34 * var(--u));
  background:
    repeating-linear-gradient(
      176deg,
      rgba(160, 96, 40, 0) 0 22px,
      rgba(160, 96, 40, 0.18) 22px 24px,
      rgba(160, 96, 40, 0) 24px 40px
    ),
    linear-gradient(#f2b066, #d98c3e);
  border: calc(5 * var(--u)) solid var(--ink);
  box-shadow:
    inset 0 0 0 calc(6 * var(--u)) rgba(255, 220, 160, 0.9),
    0 0 0 calc(8 * var(--u)) #e9a456,
    0 0 0 calc(11 * var(--u)) var(--ink),
    0 calc(14 * var(--u)) 0 calc(8 * var(--u)) rgba(58, 36, 22, 0.35);
  border-radius: calc(30 * var(--u));
  padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u));
}

/* fases */
#levels {
  justify-content: flex-start;
  gap: calc(12 * var(--u));
}
.lhead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.llogo {
  height: calc(60 * var(--u));
}
.lhead .btn.round .ico {
  width: 62%;
  height: 62%;
}
.tabs {
  display: flex;
  gap: calc(12 * var(--u));
}
.btn.tab {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(20 * var(--u)) calc(6 * var(--u)) calc(7 * var(--u));
  border-radius: 99px;
  font-size: calc(26 * var(--u));
}
.btn.tab img {
  width: calc(48 * var(--u));
  height: calc(36 * var(--u));
  object-fit: cover;
  border-radius: calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--ink);
}
.btn.tab.on {
  background: linear-gradient(#b8ff7a, #5ad83a);
  box-shadow:
    0 calc(5 * var(--u)) 0 var(--ink),
    0 0 calc(12 * var(--u)) rgba(150, 255, 110, 0.8);
}
.worldbox {
  flex: 1 1 auto;
  width: 100%;
  max-width: calc(520 * var(--u));
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.world {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(24 * var(--u));
  box-shadow:
    0 0 0 calc(9 * var(--u)) #f2b066,
    0 0 0 calc(12 * var(--u)) var(--ink);
  margin: calc(12 * var(--u));
  overflow: hidden;
}
.world.map {
  flex: 0 0 auto;
  height: calc(100% - 24 * var(--u));
  width: auto;
  aspect-ratio: 3 / 4;
  max-width: calc(100% - 24 * var(--u));
  margin: calc(12 * var(--u)) auto;
  background-size: 100% 100%;
}
.path {
  position: absolute;
  inset: 0;
}
.path .node {
  position: absolute;
  transform: translate(-50%, -62%);
}
.path .btn.node:active {
  transform: translate(-50%, -55%);
}
.btn.node {
  width: calc(66 * var(--u));
  height: calc(66 * var(--u));
  font-size: calc(30 * var(--u));
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #ffd977);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(26 * var(--u));
}
.btn.node b {
  line-height: 1;
}
.btn.node .st {
  display: flex;
  border-radius: 99px;
  padding: calc(1 * var(--u)) calc(3 * var(--u));
}
.btn.node .st svg {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.btn.node .lock svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.btn.node:not(.locked) {
  background: radial-gradient(circle at 35% 30%, #fffdf4, #fbe6bf 75%, #efcf95);
}
.btn.node.locked {
  background: radial-gradient(circle at 35% 30%, #fbf6ea, #eadcc2);
  color: #9a8466;
}
.btn.node.current {
  background: radial-gradient(circle at 35% 30%, #fffdf4, #fbe6bf 75%, #efcf95);
  animation: nodepulse 1.2s ease-in-out infinite;
}
@keyframes nodepulse {
  50% {
    box-shadow:
      0 calc(5 * var(--u)) 0 var(--ink),
      0 0 0 calc(7 * var(--u)) rgba(255, 230, 120, 0.8);
  }
}
.path .btn.node.current {
  animation: nodepulse 1.2s ease-in-out infinite;
}
#levels .llogo {
  height: calc(76 * var(--u));
}
.worlds {
  display: flex;
  gap: calc(20 * var(--u));
  width: 100%;
  flex: 1;
  min-height: 0;
}
.worlds .world {
  flex: 1 1 0;
  min-width: 0;
  margin: calc(14 * var(--u)) calc(6 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(10 * var(--u));
}
.strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: calc(4 * var(--u));
  width: 100%;
  background: rgba(255, 246, 227, 0.92);
  border: calc(3 * var(--u)) solid var(--ink);
  border-radius: calc(14 * var(--u));
  padding: calc(5 * var(--u));
}
.strip .btn.node {
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 0.72;
  border-radius: calc(10 * var(--u));
  font-size: calc(22 * var(--u));
  border-width: calc(2.5 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) 0 var(--ink);
}
.strip .btn.node:not(.locked) {
  background: radial-gradient(circle at 35% 25%, #fff3a6, #ffd23a 60%, #f2a614);
}
.strip .btn.node .st {
  flex-wrap: wrap;
  justify-content: center;
}
body.land .lvowl {
  display: none;
}
.worlds .world > .plate {
  margin-top: calc(-30 * var(--u));
}
.worlds .world {
  overflow: visible;
}
.strip .btn.node .st svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
}

/* ---- janelas ---- */
.modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(40, 26, 16, 0.66);
  z-index: 20;
}
.card {
  position: relative;
  background: linear-gradient(#fffaf0, #fbe9c8);
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(28 * var(--u));
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  box-shadow:
    0 0 0 calc(5 * var(--u)) #ffd9a0,
    0 0 0 calc(15 * var(--u)) #e9a456,
    0 0 0 calc(18 * var(--u)) var(--ink),
    0 calc(14 * var(--u)) 0 calc(8 * var(--u)) rgba(58, 36, 22, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  min-width: calc(290 * var(--u));
  max-width: 92vw;
}
.card > .plate {
  margin-top: calc(-46 * var(--u));
}
.row {
  display: flex;
  gap: calc(12 * var(--u));
  align-items: center;
}
.set {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: 100%;
  font-weight: 700;
  font-size: calc(19 * var(--u));
}
.set > span:not(.ico) {
  flex: 1 1 auto;
}
.globe {
  font-size: calc(22 * var(--u));
  text-align: center;
}
input.vol {
  -webkit-appearance: none;
  appearance: none;
  width: calc(150 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 99px;
  border: calc(2.5 * var(--u)) solid var(--ink);
  background: linear-gradient(90deg, #7ad94f var(--p, 50%), #f1e2c4 var(--p, 50%));
  outline: none;
}
input.vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe680, #ffc21a 60%, #f0a40c);
  border: calc(3 * var(--u)) solid var(--ink);
  cursor: pointer;
}
input.vol::-moz-range-thumb {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: #ffc21a;
  border: calc(3 * var(--u)) solid var(--ink);
}
.tog {
  width: calc(64 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 99px;
  border: calc(3 * var(--u)) solid var(--ink);
  background: #e3d4b8;
  position: relative;
  cursor: pointer;
  padding: 0;
}
.tog i {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(3 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  background: #fff;
  border: calc(2.5 * var(--u)) solid var(--ink);
  transition: left 140ms;
}
.tog.on {
  background: #7ad94f;
}
.tog.on i {
  left: calc(31 * var(--u));
}
.langsel {
  font-family: var(--font);
  font-weight: 700;
  font-size: calc(17 * var(--u));
  border: calc(2.5 * var(--u)) solid var(--ink);
  border-radius: 99px;
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  background: var(--cream);
  color: var(--ink);
}
.btn.round.closex {
  position: absolute;
  right: calc(-20 * var(--u));
  top: calc(-20 * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
}
.card.pause {
  padding-top: calc(44 * var(--u));
}
.card.pause .peek {
  position: absolute;
  top: calc(-150 * var(--u));
  height: calc(126 * var(--u));
}
body.land .card.pause,
body.land .card.settings {
  margin-top: calc(60 * var(--u));
  max-height: calc(100vh - 80 * var(--u));
}
body.land .card.pause .peek,
body.land .card.settings .peek {
  top: calc(-96 * var(--u));
  height: calc(92 * var(--u));
}
.card.pause .peek img {
  height: 100%;
}
.card.pause > .plate,
.card.settings > .plate {
  margin-top: 0;
  font-size: calc(36 * var(--u));
}
.card .btn.green.big {
  font-size: calc(38 * var(--u));
  padding: calc(10 * var(--u)) calc(52 * var(--u));
}
.btn.pillbtn {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: calc(19 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(#fff3a6, #ffd84a);
}
.btn.pillbtn svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.lvowl {
  position: absolute;
  right: calc(6 * var(--u));
  bottom: calc(6 * var(--u) + var(--sab));
  height: min(15vh, calc(120 * var(--u)));
  pointer-events: none;
  z-index: 2;
}
.lvowl img {
  height: 100%;
}
.card.settings {
  padding-top: calc(40 * var(--u));
}
.card.settings .peek {
  position: absolute;
  top: calc(-140 * var(--u));
  height: calc(112 * var(--u));
}
.card.settings .peek img {
  height: 100%;
}
.card.settings > .plate {
  margin-top: 0;
}
/* tutorial */
.tutplate {
  position: absolute;
  left: 50%;
  top: calc(8 * var(--u) + var(--sat));
  transform: translateX(-50%);
}
body.tutoring .boosts,
body.tutoring .ptop .topbar,
body.tutoring .ptop .ribbon,
body.tutoring #owl {
  visibility: hidden;
}
.tut .tutplate {
  font-size: calc(36 * var(--u));
  top: calc(78 * var(--u) + var(--sat));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(18 * var(--u));
}
body.land .tut .tutplate {
  top: calc(8 * var(--u) + var(--sat));
}
.tutbadge {
  position: absolute;
  bottom: calc(-20 * var(--u));
  font-size: calc(20 * var(--u));
  background: linear-gradient(#fff6dc, #f6dba8);
  border: calc(3 * var(--u)) solid var(--ink);
  border-radius: 99px;
  padding: 0 calc(14 * var(--u));
  white-space: nowrap;
}
.tutbadge i {
  font-style: normal;
  color: #ffc21a;
  -webkit-text-stroke: calc(1.5 * var(--u)) var(--ink);
}
.btn.tutback {
  position: absolute;
  left: calc(12 * var(--u));
  top: calc(12 * var(--u) + var(--sat));
}
.tutspk {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tutspk i {
  position: absolute;
  width: 18%;
  height: calc(6 * var(--u));
  background: #ffd23a;
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: 99px;
  left: 41%;
  top: 50%;
  transform-origin: 50% 50%;
  animation: pulse 1.1s ease-in-out infinite;
}
.tutspk i:nth-child(1) {
  transform: rotate(-135deg) translateX(240%);
}
.tutspk i:nth-child(2) {
  transform: rotate(-45deg) translateX(240%);
}
.tutspk i:nth-child(3) {
  transform: rotate(-110deg) translateX(330%);
}
.tutspk i:nth-child(4) {
  transform: rotate(-70deg) translateX(330%);
}
.owlspk {
  position: absolute;
  left: 0;
  right: 0;
  top: -18%;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  color: #ffd23a;
  -webkit-text-stroke: calc(1.5 * var(--u)) var(--ink);
  font-size: calc(16 * var(--u));
}
.btn.tutgo {
  font-size: calc(42 * var(--u));
  padding: calc(12 * var(--u)) calc(70 * var(--u));
}
.tut {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: linear-gradient(rgba(58, 36, 22, 0.05), rgba(58, 36, 22, 0.22));
}
.tutbox {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
}
.tutbox .tutowl {
  height: calc(140 * var(--u));
}
.tutbox .tutowl img {
  height: 100%;
}
.bubble {
  position: relative;
  background: #fff;
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: calc(22 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(22 * var(--u));
  max-width: 60%;
  text-align: center;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(58, 36, 22, 0.35);
}
.handwrap {
  position: absolute;
  width: calc(48 * var(--u));
  pointer-events: none;
  animation: tap 1.1s ease-in-out infinite;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(2 * var(--u)) rgba(58, 36, 22, 0.35));
}
.handwrap svg {
  width: 100%;
  display: block;
}
@keyframes tap {
  0%,
  100% {
    transform: translateY(-10px);
  }
  45% {
    transform: translateY(6px);
  }
}
.tutring {
  position: absolute;
  border-radius: 50%;
  border: calc(4 * var(--u)) dashed #fff;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(58, 36, 22, 0.6);
  pointer-events: none;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    transform: scale(1.08);
  }
}
.btn.tutgo {
  position: absolute;
  left: 50%;
  bottom: calc(26 * var(--u) + var(--sab));
  transform: translateX(-50%);
  font-size: calc(36 * var(--u));
}
.btn.tutgo:active {
  transform: translateX(-50%) translateY(calc(4 * var(--u)));
}

/* vitória: raios rosa e dourados, título grande, estrelas, coruja, miniaturas (mockup) */
.card.win {
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 38%, #ffe066 0%, #ffb3d6 45%, #ff6fb5 100%);
  gap: calc(10 * var(--u));
}
.card.win .confetti {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.card.win .confetti i {
  position: absolute;
  top: -8%;
  width: calc(16 * var(--u));
  height: calc(9 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--ink);
  border-radius: calc(2 * var(--u));
  animation: fall linear infinite;
}
@keyframes fall {
  to {
    transform: translateY(115vh) rotate(var(--r));
  }
}
.card.win .rays {
  position: absolute;
  inset: -50%;
  z-index: -2;
  background: repeating-conic-gradient(
    from 0deg at 50% 40%,
    rgba(255, 255, 255, 0.4) 0deg 9deg,
    rgba(255, 255, 255, 0) 9deg 18deg
  );
  animation: spin 30s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.card h2 {
  margin: 0;
  font-size: calc(40 * var(--u));
  line-height: 1.05;
  color: #ffd23a;
  -webkit-text-stroke: calc(7 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
  text-align: center;
}
.stars {
  position: relative;
  display: flex;
  gap: calc(2 * var(--u));
  align-items: flex-end;
}
.stars svg.mid {
  margin-bottom: calc(20 * var(--u));
}
.stars .halo {
  position: absolute;
  inset: -30% -15%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(255, 244, 150, 0.95),
    rgba(255, 220, 90, 0.45) 55%,
    rgba(255, 220, 90, 0)
  );
}
.stars svg {
  width: min(27vw, calc(132 * var(--u)));
  height: min(27vw, calc(132 * var(--u)));
  transform: scale(0);
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 240, 150, 0.9));
}
.stars svg.mid {
  width: min(35vw, calc(170 * var(--u)));
  height: min(35vw, calc(170 * var(--u)));
}
.owlwin {
  height: calc(150 * var(--u));
}
.owlwin {
  position: relative;
}
.owlwin::before {
  content: '';
  position: absolute;
  inset: -12% -30%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(255, 244, 150, 0.95),
    rgba(255, 220, 90, 0.4) 60%,
    rgba(255, 220, 90, 0)
  );
}
.owlwin img {
  height: 100%;
}
.thumbs {
  display: flex;
  gap: calc(10 * var(--u));
}
.thumb {
  max-width: min(46vw, calc(180 * var(--u)));
  max-height: calc(130 * var(--u));
  border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(58, 36, 22, 0.35);
}
.winrow {
  gap: calc(16 * var(--u));
}
.winrow .btn.round {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
}
.alldone {
  text-align: center;
  font-weight: 600;
}
body.land .card.win {
  max-height: 94vh;
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  gap: calc(8 * var(--u));
}
body.land .card.win h2 {
  font-size: calc(54 * var(--u));
}
body.land .card.win .thumbs {
  align-items: center;
  gap: calc(14 * var(--u));
}
body.land .card.win .owlwin {
  height: min(26vh, calc(150 * var(--u)));
}
body.land .card.win .stars svg {
  width: min(12vh, calc(78 * var(--u)));
  height: min(12vh, calc(78 * var(--u)));
}
body.land .card.win .stars svg.mid {
  width: min(14.5vh, calc(96 * var(--u)));
  height: min(14.5vh, calc(96 * var(--u)));
}
body.land .card.win .thumb {
  max-height: 28vh;
}
/* em pé a vitória ocupa a tela inteira, como no mockup */
.modal.full {
  background: none;
}
.modal.full .card.win {
  position: absolute;
  inset: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  justify-content: space-evenly;
  padding: calc(16 * var(--u) + var(--sat)) calc(16 * var(--u)) calc(20 * var(--u) + var(--sab));
}
.winlogo {
  width: min(70vw, calc(300 * var(--u)));
}
.modal.full .card h2 {
  font-size: calc(60 * var(--u));
}
.card.win h2 {
  color: #ffd23a;
  -webkit-text-stroke: calc(9 * var(--u)) var(--ink);
  text-shadow: 0 calc(6 * var(--u)) 0 var(--ink);
}
.modal.full .card.win::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16%;
  z-index: -1;
  background: url(../assets/pagina-retrato.webp) center bottom / cover;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
.modal.full .thumb {
  max-width: calc(178 * var(--u));
  border: calc(5 * var(--u)) solid #f2b066;
  outline: calc(3 * var(--u)) solid var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .card.win .rays,
  .handwrap,
  .tutring,
  .btn.node.current {
    animation: none;
  }
  .btn {
    transition: none;
  }
}

.tutbox .bubble::before {
  content: '';
  position: absolute;
  left: calc(-17 * var(--u));
  top: 50%;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  background: #fff;
  border-left: calc(3.5 * var(--u)) solid var(--ink);
  border-bottom: calc(3.5 * var(--u)) solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 0 0 0 calc(4 * var(--u));
}
body:not(.land) .playico {
  display: none;
}

/* rodada 12 */
.card.pause .peek {
  top: calc(-96 * var(--u));
  z-index: 2;
}
.card.settings .peek {
  top: calc(-84 * var(--u));
  z-index: 2;
}
body.land .card.pause .peek,
body.land .card.settings .peek {
  top: calc(-64 * var(--u));
}
.card.pause,
.card.settings {
  margin-top: calc(70 * var(--u));
}
.card.win h2 .w1 {
  color: #fff;
}
.card.win .stars {
  gap: calc(8 * var(--u));
}
.card.win .stars svg {
  width: min(21vw, calc(88 * var(--u)));
  height: min(21vw, calc(88 * var(--u)));
}
.card.win .stars svg.mid {
  width: min(25vw, calc(104 * var(--u)));
  height: min(25vw, calc(104 * var(--u)));
  margin-bottom: calc(14 * var(--u));
}
body:not(.land) .lhead .lgear {
  visibility: hidden;
}
body:not(.land) .tabs {
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  background:
    repeating-linear-gradient(
      176deg,
      rgba(160, 96, 40, 0) 0 18px,
      rgba(160, 96, 40, 0.18) 18px 20px,
      rgba(160, 96, 40, 0) 20px 34px
    ),
    linear-gradient(#f9c47a, #e9a456);
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(22 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) rgba(255, 236, 196, 0.8);
}
.path .btn.node {
  box-shadow:
    0 calc(5 * var(--u)) 0 #f2d39a,
    0 calc(8 * var(--u)) 0 var(--ink);
}
.tutbox .tutowl {
  height: calc(120 * var(--u));
}

/* ---- tela inicial fiel ao mockup (posições em % do inventário) ---- */
.btn.imgbtn {
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  padding: 0;
  border-radius: 0;
}
.btn.imgbtn:active {
  transform: translateY(3%) scale(0.98);
  box-shadow: none;
}
.hplay span,
.hlv span,
.hst span {
  font-weight: 700;
  line-height: 1;
  color: #fff8e6;
  -webkit-text-stroke: 0.1em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.06em 0 var(--ink);
}
/* em pé o mockup usa o pódio e a engrenagem roxa; deitado, a lista com estrelas e a engrenagem amarela */
/* deitado */

/* ---- fases em pé fiel ao mockup (02-fases-celular.json) ---- */
.btn.round.yellow {
  background: url(../assets/ui/btn-amarelo.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
}

/* ---- partida em pé fiel ao mockup (04-partida-inicio-celular.json) ---- */

/* rodada 4: medidas exatas (verificador de mockup) e arte do placar recortada do mockup */
.btn.tutback {
  top: 6%;
}

/* ---- vitória em pé fiel ao mockup (09-vitoria-celular.json, mockup sem moedas) ---- */
.card.win .confetti.fixo i {
  top: auto;
  border-radius: 1cqw;
  animation: balanca 2.4s ease-in-out infinite;
  transform: rotate(var(--r));
}
@media (prefers-reduced-motion: reduce) {
  .card.win .confetti.fixo i {
    animation: none;
  }
}

/* rodada 5: medidas e deformações apontadas pelo verificador de mockup */
.btn.round.yellow {
  background-size: contain;
}

/* palco 9:16 do mockup: as peças ficam na proporção do mockup em qualquer aparelho; o fundo cobre a tela */

/* ---- encaixe responsivo pelo mockup (fit() em hud.js; mesma regra do verificador de mockup) ---- */
.fitbox {
  container-type: size;
  --mw: min(100cqw, 100cqh * var(--ar));
  --mh: calc(min(100cqw, 100cqh * var(--ar)) / var(--ar));
}
.fitbox .fit:not(#_) {
  position: absolute;
  margin: 0;
  width: calc(var(--w) * var(--mw) / 100);
  height: calc(var(--h) * var(--mh) / 100);
}
.fitbox .fx-l:not(#_) {
  left: calc(var(--x) * var(--mw) / 100);
}
.fitbox .fx-r:not(#_) {
  left: auto;
  right: calc((100 - var(--x) - var(--w)) * var(--mw) / 100);
}
.fitbox .fx-c:not(#_) {
  left: calc(50cqw + (var(--x) - 50) * var(--mw) / 100);
}
.fitbox .fx-s:not(#_) {
  left: calc(var(--x) * 1cqw);
  width: calc(var(--w) * 1cqw);
}
.fitbox .fy-t:not(#_) {
  top: calc(var(--y) * var(--mh) / 100);
}
.fitbox .fy-b:not(#_) {
  top: auto;
  bottom: calc((100 - var(--y) - var(--h)) * var(--mh) / 100);
}
.fitbox .fy-m:not(#_) {
  top: calc(50cqh + (var(--y) - 50) * var(--mh) / 100);
}
.fitbox .fy-s:not(#_) {
  top: calc(var(--y) * 1cqh);
  height: calc(var(--h) * 1cqh);
}
.fitbox img.fit,
.fitbox .fit > img {
  object-fit: contain;
}
/* vitória em pé (09-vitoria-celular.json, mockup sem moedas) */
.modal.full .card.win.fw {
  display: block;
  padding: 0;
}
.card.win.fw .fit .owlface,
.card.win.fw .owlwin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card.win.fw h2 {
  text-align: center;
  font-size: calc(var(--mh) * 0.096);
  line-height: 0.92;
  -webkit-text-stroke: calc(var(--mh) * 0.006) var(--ink);
  text-shadow: 0 calc(var(--mh) * 0.005) 0 var(--ink);
}
.card.win.fw h2 .w1 {
  display: block;
  font-size: calc(var(--mh) * 0.076);
}
.card.win.fw .stars {
  display: block;
}
.card.win.fw .stars svg {
  position: absolute;
  left: 0;
  top: 14%;
  width: 29.5%;
  height: 85.7%;
  margin: 0;
}
.card.win.fw .stars svg.mid {
  left: 32.9%;
  top: 0;
  width: 34.2%;
  height: 93.9%;
}
.card.win.fw .stars svg:last-of-type {
  left: auto;
  right: 0;
}
.card.win.fw .thumbs {
  display: flex;
  justify-content: space-between;
  gap: 0;
}
.card.win.fw .thumb {
  width: 49%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: calc(var(--mw) * 0.016) solid #f2b45e;
  border-radius: calc(var(--mw) * 0.04);
  box-shadow:
    0 0 0 calc(var(--mw) * 0.007) var(--ink),
    inset 0 0 0 calc(var(--mw) * 0.005) var(--ink);
}
.card.win.fw .winrow > * {
  position: absolute;
  margin: 0;
  top: 0;
}
.card.win.fw .winrow .btn.round {
  width: 18.8%;
  height: 92.7%;
  background-size: contain;
}
.card.win.fw .winrow .btn.round:first-child {
  left: 0;
}
.card.win.fw .winrow .btn.round:last-child {
  right: 0;
}
.card.win.fw .winrow .btn.green {
  left: 20.8%;
  width: 58.2%;
  height: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.048);
  font-size: calc(var(--mh) * 0.059);
}
.card.win.fw .winrow .btn.green::before,
.card.win.fw .winrow .btn.green .spk {
  display: none;
}
.card.win.fw .confetti.fixo {
  overflow: visible;
}
.card.win .confetti.fixo i {
  border-radius: 20%;
  animation: balanca 2.4s ease-in-out infinite;
  transform: rotate(var(--r));
}
@keyframes balanca {
  50% {
    transform: rotate(var(--r)) translateY(-8%);
  }
}
.card.win.fw .wbrilho {
  pointer-events: none;
}
.card.win.fw .wbrilho.t1,
.card.win.fw .wbrilho.s1 {
  transform: scaleX(-1);
}

.card.win.fw .owlwin {
  display: block;
}
.card.win.fw .thumb {
  width: auto;
  height: 100%;
  aspect-ratio: 0.93;
}
.card.win.fw .winrow .btn.round {
  width: calc(var(--mw) * 0.161);
  height: calc(var(--mw) * 0.161);
}
.card.win.fw .winrow .btn.green {
  left: calc(50% - var(--mw) * 0.249);
  width: calc(var(--mw) * 0.498);
}

/* ---- tela inicial: posições por fit() (caixas do inventário); aqui só estilo, em unidades do mockup ---- */
#home.fh {
  display: block;
  padding: 0;
}
#home.fh .owlbig {
  display: block;
}
#home.fh .owlbig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#home.fh .hplay {
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.066);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mh) * 0.093);
}
body.land #home.fh .hplay {
  border-image-width: calc(var(--mh) * 0.12);
  font-size: calc(var(--mh) * 0.15);
  padding-left: 30%;
}
#home.fh .hplayico {
  position: absolute;
  left: 18.2%;
  top: 23.5%;
  width: 19.5%;
  height: 53%;
  object-fit: contain;
}
#home.fh .hlv,
#home.fh .hst {
  background: url(../assets/ui/ic-fases.webp) center / contain no-repeat;
}
body:not(.land) #home.fh .hlv {
  background:
    url(../assets/icon-fases.webp) center 38% / 60% no-repeat,
    url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
body:not(.land) #home.fh .hst {
  background:
    url(../assets/icon-ajustes.webp) center 40% / 56% no-repeat,
    url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
body.land #home.fh .hst {
  background-image: url(../assets/ui/ic-engrenagem.webp);
}
#home.fh .hlv span,
#home.fh .hst span {
  position: absolute;
  left: -10.6%;
  top: 67%;
  width: 118.8%;
  height: 35.7%;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.0255);
  font-size: calc(var(--mh) * 0.037);
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
#home.fh .hst span {
  left: -8.2%;
  width: 116.9%;
}
body.land #home.fh .hlv span,
body.land #home.fh .hst span {
  left: 0;
  top: 100%;
  width: 101%;
  height: 41%;
  border-image-width: calc(var(--mh) * 0.0445);
  font-size: calc(var(--mh) * 0.056);
}
body.land #home.fh .hst span {
  left: -3%;
  width: 104%;
}
#home.fh .hpanel {
  border: 0 solid transparent;
  border-image: url(../assets/ui/painel-madeira.webp) 90 fill / calc(var(--mh) * 0.09);
}
#home.fh .hbrilho {
  pointer-events: none;
}
#home.fh .hbrilho.b1 {
  transform: scaleX(-1);
}
body.land #home.fh .hbrilho.b1 {
  transform: none;
}

#home.fh {
  background: url(../assets/home-retrato.webp) center / cover no-repeat;
}
body.land #home.fh {
  background-image: url(../assets/home-deitado.webp);
}

.card.win.fw .stars img {
  position: absolute;
  left: 0;
  top: 14%;
  width: 29.5%;
  height: 85.7%;
  object-fit: contain;
}
.card.win.fw .stars img.mid {
  left: 32.9%;
  top: 0;
  width: 34.2%;
  height: 93.9%;
}
.card.win.fw .stars img:last-of-type {
  left: auto;
  right: 0;
}
.card.win.fw .stars img.off {
  filter: grayscale(1) brightness(1.25) opacity(0.55);
}
.card.win.fw .wmoitas {
  object-fit: contain;
  pointer-events: none;
}

/* ---- fases em pé: posições por fit() (02-fases-celular.json); aqui só estilo ---- */
#levels.fl {
  display: block;
  padding: 0;
}
#levels.fl .lhead {
  position: static;
}
#levels.fl .lvowl,
#levels.fl .lhead .lgear {
  display: none;
}
#levels.fl .llogo {
  object-fit: contain;
}
#levels.fl .peekowl {
  display: block;
}
#levels.fl .peekowl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#levels.fl > .plate {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../assets/ui/placa-madeira.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  font-size: calc(var(--mh) * 0.056);
}
#levels.fl .lwood {
  border: 0 solid transparent;
  border-image: url(../assets/ui/painel-madeira.webp) 90 fill / calc(var(--mw) * 0.09);
}
#levels.fl .tabs {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
}
#levels.fl .btn.tab {
  width: 48.5%;
  height: 100%;
  padding: 0 0 0 1%;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.046);
  font-size: calc(var(--mh) * 0.034);
  justify-content: flex-start;
  gap: 4%;
}
#levels.fl .btn.tab.on {
  border-image-source: url(../assets/ui/btn-verde.webp);
  border-image-slice: 76 fill;
}
#levels.fl .btn.tab img {
  height: calc(var(--mh) * 0.07);
  width: auto;
  border-radius: calc(var(--mh) * 0.015);
}
#levels.fl .world.map {
  margin: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  border-radius: calc(var(--mw) * 0.04);
  box-shadow: none;
}
#levels.fl .path .btn.node {
  width: 14.9%;
  height: 11.3%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  background: url(../assets/ui/btn-creme.webp) center / 100% 100% no-repeat;
  box-shadow: none;
  font-size: calc(var(--mh) * 0.037);
  color: var(--ink);
  animation: none;
}
#levels.fl .path .btn.node.current {
  filter: drop-shadow(0 0 calc(var(--mw) * 0.012) #ffd23a);
}
#levels.fl .path .btn.node .st svg {
  width: calc(var(--mw) * 0.036);
  height: calc(var(--mw) * 0.036);
}
#levels.fl .path .btn.node .lock svg {
  width: calc(var(--mw) * 0.06);
  height: calc(var(--mw) * 0.06);
}
#levels.fl .path .btn.node .lock svg * {
  fill: #ffc21a;
  stroke: var(--ink);
}

#levels.fl .path .btn.node {
  width: calc(var(--mw) * 0.14);
  height: calc(var(--mh) * 0.078);
}
#levels.fl .btn.tab:first-child {
  width: calc(var(--mw) * 0.444);
}
#levels.fl .btn.tab:last-child {
  width: calc(var(--mw) * 0.425);
}

#levels.fl .world.map {
  background-size: cover;
  background-position: center;
}

/* ---- placar em pé: posições por fit() (04-partida-inicio-celular.json); aqui só estilo ---- */
#hud.fg .ptop,
#hud.fg .boosts {
  inset: 0;
  pointer-events: none;
  padding: 0;
}
#hud.fg .topbar {
  position: static;
  display: block;
}
#hud.fg .fit {
  pointer-events: auto;
}
#hud.fg .hudlogo {
  object-fit: contain;
}
#hud.fg .topbar .btn.round:last-child {
  background-image: url(../assets/ui/hud-reiniciar.webp);
}
#hud.fg .topbar .btn.round:last-child svg {
  visibility: hidden;
}
#hud.fg .topbar .pill {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.024);
  font-size: calc(var(--mh) * 0.029);
  color: var(--ink);
}
#hud.fg .topbar .pill.cnt img {
  height: calc(var(--mh) * 0.037);
  width: auto;
}
#hud.fg .topbar .pill.cnt b {
  font-size: calc(var(--mh) * 0.031);
}
#hud.fg .ribbon {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/hud-faixa.webp) 0 15% fill / 0 calc(var(--mh) * 0.024);
}
#hud.fg .ribbon::before,
#hud.fg .ribbon::after {
  display: none;
}
#hud.fg .ribbon span {
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#hud.fg #owl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#hud.fg .btn.boost {
  border: 0;
  box-shadow: none;
  background: url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
#hud.fg .btn.boost.reveal {
  background-image: url(../assets/ui/ajuda-lupa.webp);
}
#hud.fg .btn.boost.eye {
  background-image: url(../assets/ui/ajuda-olho.webp);
}
#hud.fg .btn.boost.reveal > img,
#hud.fg .btn.boost.eye > img {
  visibility: hidden;
}
#hud.fg .btn.boost .badge {
  right: -2%;
  top: -2%;
  min-width: calc(var(--mw) * 0.066);
  height: calc(var(--mw) * 0.066);
  font-size: calc(var(--mh) * 0.028);
}

/* End of css/01-base.css */