/* Lantern Bites — a tela é desenhada nas medidas do desenho base.
   --u = px de tela por px do desenho base. Em pé o desenho base tem 941×1672; deitado, 1672×941.
   Cada peça .p recebe --x --y --w --h em px do desenho base; --a diz a que borda ela fica presa
   quando sobra altura (0 = topo, .5 = meio, 1 = base). */
:root {
  --u: 0.4px;
  --ex: 0;
  --gold: #ffcf5a;
  --ink: #fff7e6;
  --brown: #5a3418;
}
* {
  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;
}
/* Fredoka (SIL Open Font License 1.1, assets/fonts/LICENSE-Fredoka-OFL.txt): a mesma letra em todo aparelho. O 700 atende também o 800. */
@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 900;
  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 900;
  font-display: swap;
  src: url(assets/fonts/fredoka-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
body {
  font-family:
    Fredoka, 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans KR', 'Microsoft YaHei', 'Trebuchet MS', 'Segoe UI', system-ui,
    sans-serif;
  font-weight: 700;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #2a2158, #1c163f 60%, #151033);
}
img {
  -webkit-user-drag: none;
  pointer-events: none;
  display: block;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
b {
  font-weight: 800;
}

#scene {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: calc((446 + var(--ex) / 2) * var(--u));
  background: var(--scene, url(assets/ui/scene.jpg)) center bottom / cover;
}
#scene::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(118 * var(--u));
  height: calc(46 * var(--u));
  background: linear-gradient(180deg, rgba(255, 170, 90, 0), rgba(255, 170, 90, 0.38) 55%, rgba(255, 150, 70, 0));
  mix-blend-mode: screen;
  pointer-events: none;
}
body.land #scene::after {
  display: none;
}
#app,
.design {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(941 * var(--u));
  transform: translateX(-50%);
}
.p {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) + var(--ex) * var(--a, 0)) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.ib {
  display: grid;
  place-items: center;
}
.ib img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#hFlame,
#hCoin {
  object-fit: contain;
}
#snd::after,
#snd2::after,
#book::after,
#sell::after,
.tag .go::after,
.tag .swap::after,
.area:not(.off) .gold::after {
  content: '';
  position: absolute;
  inset: -5px;
}
#sell {
  position: relative;
}
.ib {
  transition: transform 0.08s;
}
.ib:active,
.gold:active,
#sell:active,
.go:active {
  transform: translateY(calc(4 * var(--u))) scale(0.97);
}

/* ---------- topo ---------- */
.pill {
  border-style: solid;
  border-width: calc(20 * var(--u)) calc(46 * var(--u));
  border-image: url(assets/ui/pill.png) 50 146 fill / calc(22 * var(--u)) calc(64 * var(--u)) stretch;
  --ui: 2;
  border-radius: 999px;
  background: linear-gradient(#1e294c, #1e294c) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  border-color: transparent;
  display: flex;
  align-items: center;
  font-size: calc(34 * var(--u));
  line-height: 1;
}
.pill b {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(10, 6, 30, 0.8);
}
.pill small {
  margin-left: auto;
  opacity: 0.65;
  font-size: calc(20 * var(--u));
  font-variant-numeric: tabular-nums;
}
#hStar {
  --x: 28;
  --y: 12;
  --w: 72;
  --h: 69;
  z-index: 2;
  display: grid;
  place-items: center;
}
#hStar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.45));
}
#hStar b {
  position: relative;
  font-size: calc(30 * var(--u));
  color: #fff;
  margin-top: calc(8 * var(--u));
  text-shadow:
    0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(120, 60, 0, 0.95),
    0 0 calc(6 * var(--u)) rgba(150, 80, 0, 0.8);
}
#hBar {
  --x: 85;
  --y: 23;
  --w: 213;
  --h: 50;
}
#starBar2 {
  margin-left: calc(14 * var(--u)) !important;
}
#starBar,
#starBar2 {
  flex: 1;
  height: calc(24 * var(--u));
  margin: 0 calc(-22 * var(--u)) 0 calc(-14 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(8, 6, 28, 0.5);
  overflow: hidden;
}
#starBar u,
#starBar2 u {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffe38a, #f5a623);
  transition: width 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
}
#hEn {
  --x: 318;
  --y: 22;
  --w: 217;
  --h: 54;
}
#hEn b {
  margin-left: calc(30 * var(--u));
}
#hFlame {
  --x: 328;
  --y: 10;
  --w: 60;
  --h: 69;
  z-index: 2;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4));
}
#hCo {
  --x: 603;
  --y: 24;
  --w: 216;
  --h: 50;
}
#hCo b {
  margin-left: calc(6 * var(--u));
}
#hCoin {
  --x: 558;
  --y: 16;
  --w: 70;
  --h: 70;
  z-index: 2;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4));
}
#snd {
  --x: 836;
  --y: 8;
  --w: 86;
  --h: 86;
}
#snd img {
  width: 87%;
  height: 87%;
}
#snd2 {
  --x: 822;
  --y: 26;
  --w: 86;
  --h: 86;
}
#snd2 img {
  width: 100%;
  height: 100%;
}
#divider {
  display: none;
}

/* ---------- clientes e pedidos ---------- */
.who,
.tag {
  --a: 0.5;
}
.who {
  z-index: 1;
}
.who img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.35));
  transform-origin: 50% 100%;
}
.dish {
  position: absolute;
  left: 4%;
  width: 92%;
  bottom: 6%;
  height: 46%;
  background: url(assets/ui/dish.png) center bottom / contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4));
}
.dish img {
  position: static !important;
  width: auto !important;
  height: 92% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 -5% 16% !important;
  filter: none !important;
}
.dish[data-n='3'] img {
  height: 76% !important;
  margin: 0 -6% 18% !important;
}
body.land .dish {
  left: 6%;
  width: 88%;
  bottom: 0;
  height: 32%;
} /* deitado: na altura das mãos, abaixo do rosto */
.panel {
  border-style: solid;
  border-width: calc(26 * var(--u));
  border-image: url(assets/ui/panel-plain.png) 40 fill / calc(34 * var(--u)) stretch;
  --ui: 12;
  background: linear-gradient(#fcdfaf, #fcdfaf) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  border-color: transparent;
  color: var(--brown);
}
.tag {
  z-index: 3;
  border-image: url(assets/ui/tag.png) 30 fill / calc(18 * var(--u)) stretch;
  --ui: 10;
  background: linear-gradient(#fae4bd, #fae4bd) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.35));
}
.tag .want {
  display: flex;
  gap: calc(2 * var(--u));
  align-items: center;
  justify-content: center;
  margin: calc(-20 * var(--u));
}
.tag .want span {
  position: relative;
  width: calc(90 * var(--u));
  height: calc(90 * var(--u));
}
.tag[data-n='2'] .want span {
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
}
.tag[data-n='3'] .want span {
  width: calc(66 * var(--u));
  height: calc(66 * var(--u));
}
.tag .want img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(60, 30, 0, 0.3));
}
.tag .want span.has::after {
  content: '';
  position: absolute;
  right: calc(-4 * var(--u));
  bottom: calc(-2 * var(--u));
  width: calc(30 * var(--u));
  height: calc(26 * var(--u));
  background: url(assets/ui/btn-check.png) center/contain no-repeat;
}
.tag .pay {
  position: absolute;
  right: calc(-18 * var(--u));
  top: calc(-46 * var(--u));
  height: calc(46 * var(--u));
  display: flex;
  align-items: center;
}
.tag .pay b {
  font-size: calc(25 * var(--u));
  color: #fff;
  background: #6b3a14;
  border-radius: calc(16 * var(--u));
  padding: calc(3 * var(--u)) calc(28 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u));
  margin-right: calc(-22 * var(--u));
  line-height: 1.1;
}
.tag .pay img {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  position: relative;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.4));
}
/* a caixa do botão é maior que o desenho: alvo de toque de pelo menos 40 px no celular */
.tag .go {
  position: absolute;
  right: calc(-28 * var(--u));
  bottom: calc(-42 * var(--u));
  width: calc(90 * var(--u));
  height: calc(86 * var(--u));
  display: none;
  place-items: center;
}
.tag .go img {
  width: calc(76 * var(--u));
}
.tag .swap img {
  width: calc(48 * var(--u));
}
.tag.ready .go {
  display: grid;
  animation: bob 0.9s ease-in-out infinite;
}
.tag.ready,
.who[data-o] {
  cursor: pointer;
}
.tag.ready {
  animation: readyglow 1.2s ease-in-out infinite;
}
@keyframes readyglow {
  50% {
    filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(150, 240, 110, 0.95));
  }
}
.it.wanted::before {
  content: '';
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: 36%;
  height: 32%;
  background: url(assets/ui/btn-check.png) center / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}
.tag .swap {
  position: absolute;
  left: calc(-42 * var(--u));
  bottom: calc(-50 * var(--u));
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  display: none;
  place-items: center;
}
.tag.canswap:not(.ready) .swap {
  display: grid;
}

/* ---------- tabuleiro ---------- */
#boardFrame {
  --x: 40;
  --y: 412;
  --w: 860;
  --h: 983;
  --a: 0.5;
  --bw: 18;
  border-style: solid;
  border-width: calc(var(--bw) * var(--u));
  border-color: transparent;
  border-image: url(assets/ui/frame.png) 30 fill / calc(var(--bw) * 1.6 * var(--u)) stretch;
  --ui: calc(var(--bw) * 0.6);
  background: linear-gradient(#210f38, #210f38) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45));
}
#board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: calc(2 * var(--u));
}
.cell {
  position: relative;
  background: url(assets/ui/tile-p.png) center / 100% 100%;
  min-width: 0;
  min-height: 0;
  border-radius: calc(6 * var(--u));
  box-shadow:
    inset 0 calc(2 * var(--u)) 0 rgba(170, 150, 230, 0.16),
    inset 0 0 0 calc(1.5 * var(--u)) rgba(8, 5, 25, 0.5);
}
.cell.locked::before {
  content: '';
  position: absolute;
  inset: 3% 4%;
  background: url(assets/ui/lid.png) center / contain no-repeat;
  filter: saturate(1.12) brightness(0.94) drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4));
}
.cell.locked.next::after {
  content: attr(data-lv);
  position: absolute;
  right: 6%;
  bottom: 4%;
  min-width: calc(34 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: #6b3a14;
  border-radius: calc(14 * var(--u));
  padding: 0 calc(6 * var(--u));
}
.it {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.it img {
  height: 84%;
  width: auto;
  max-width: 88%;
  object-fit: contain;
  filter: saturate(1.12) brightness(1.04) drop-shadow(0 calc(5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.45));
}
.it.gen img {
  height: 97%;
  max-width: 92%;
  animation: breathe 2.4s ease-in-out infinite;
}
.it.gen::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 80, 0.34), rgba(255, 150, 70, 0) 68%);
}
.it.gen::after {
  content: '';
  position: absolute;
  right: 2%;
  bottom: 3%;
  width: 30%;
  height: 34%;
  background: url(assets/ui/flame.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.it.wanted::after {
  content: '';
  position: absolute;
  right: 2%;
  bottom: 3%;
  width: 36%;
  height: 30%;
  background: url(assets/ui/btn-check.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.it.covered {
  cursor: default;
}
.it.covered img {
  filter: grayscale(0.3) brightness(0.8);
}
.it.covered::after {
  content: '';
  position: absolute;
  left: 2%;
  bottom: 3%;
  width: 52%;
  height: 50%;
  background: url(assets/ui/lid.png) center / contain no-repeat;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.6));
}
.it.twin img {
  animation: wiggle 0.6s ease-in-out infinite;
}
.it.hint::before {
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  border: calc(5 * var(--u)) solid rgba(255, 220, 130, 0.9);
  animation: hint 1.3s ease-out infinite;
  background: none;
}
.it.lift {
  z-index: 50;
  cursor: grabbing;
}
body.drag-c #boardFrame,
body.drag-s #shelf {
  z-index: 60;
}
.it.lift img {
  transform: scale(1.1);
  filter: drop-shadow(0 calc(22 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.5));
}
@media (hover: hover) {
  .it:not(.covered):not(.lift):hover img {
    transform: scale(1.04);
  }
}
.selbox {
  position: absolute;
  inset: 1%;
  pointer-events: none;
  z-index: 2;
  animation: selpulse 1.4s ease-in-out infinite;
}
.selbox {
  filter: drop-shadow(0 0 calc(8 * var(--u)) #ff9a1e) drop-shadow(0 0 calc(3 * var(--u)) #ffc24a);
}
.selbox i {
  position: absolute;
  width: 26%;
  height: 28%;
  border: calc(7 * var(--u)) solid #ffd27a;
  border-right: 0;
  border-bottom: 0;
  border-radius: 34% 0 0 0;
}
.selbox i:nth-child(1) {
  left: 0;
  top: 0;
}
.selbox i:nth-child(2) {
  right: 0;
  top: 0;
  transform: scaleX(-1);
}
.selbox i:nth-child(3) {
  left: 0;
  bottom: 0;
  transform: scaleY(-1);
}
.selbox i:nth-child(4) {
  right: 0;
  bottom: 0;
  transform: scale(-1);
}
.cell.target::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 16%;
  box-shadow:
    inset 0 0 0 calc(4 * var(--u)) rgba(255, 220, 130, 0.9),
    0 0 calc(16 * var(--u)) rgba(255, 200, 110, 0.6);
  pointer-events: none;
}

/* ---------- base ---------- */
#info {
  --x: 30;
  --y: 1418;
  --w: 878;
  --h: 102;
  --a: 1;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
#book {
  position: relative;
  flex: none;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  margin: calc(-18 * var(--u)) 0 calc(-18 * var(--u)) calc(-12 * var(--u));
}
body.land #book {
  position: absolute;
  right: calc(-18 * var(--u));
  top: calc(-18 * var(--u));
  margin: 0;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
}
#infoImg {
  display: none;
}
#infoTxt {
  flex: 1;
  min-width: 0;
  margin: calc(-14 * var(--u)) 0 calc(-14 * var(--u)) calc(-2 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: 1.15;
}
#infoTxt b {
  font-size: calc(33 * var(--u));
  line-height: 1.1;
}
#infoTxt small {
  display: block;
  font-weight: 600;
  opacity: 0.8;
  font-size: calc(25 * var(--u));
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#infoTxt small.hint {
  font-size: calc(24 * var(--u));
  -webkit-line-clamp: 3;
}
#sell {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  width: auto;
  min-width: calc(114 * var(--u));
  white-space: nowrap;
  height: calc(84 * var(--u));
  margin: calc(-17 * var(--u)) calc(-10 * var(--u)) calc(-17 * var(--u)) 0;
  color: #fff;
  font-size: calc(24 * var(--u));
  border-style: solid;
  border-width: calc(18 * var(--u)) calc(18 * var(--u));
  border-color: transparent;
  border-image: url(assets/ui/btn-orange.png) 60 80 fill / calc(26 * var(--u)) calc(34 * var(--u)) stretch;
  --ui: 8;
  background: linear-gradient(#fc8b15, #f65c01) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(120, 40, 0, 0.7);
}
#sell.on {
  display: flex;
}
#sell.serve {
  border-image-source: url(assets/ui/btn-green.png);
  background-image: linear-gradient(#4acc24, #58ba1f);
  text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(10, 70, 0, 0.7);
  padding: 0 calc(14 * var(--u));
}
#sell.serve img {
  display: none !important;
}
#sell img.one {
  display: none;
}
#sell img {
  height: calc(58 * var(--u));
  margin: calc(-20 * var(--u)) calc(-2 * var(--u)) calc(-18 * var(--u)) calc(-10 * var(--u));
}
#shelf {
  --x: 30;
  --y: 1538;
  --w: 615;
  --h: 120;
  --a: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(7 * var(--u));
  border-style: solid;
  border-width: calc(17 * var(--u)) calc(22 * var(--u));
  border-color: transparent;
  border-image: url(assets/ui/shelf-port.png) 17 22 fill / calc(17 * var(--u)) calc(22 * var(--u)) stretch;
  --ui: 8;
  background: linear-gradient(#ba5127, #ba5127) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4));
}
#shelf .cell {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-image: url(assets/ui/slot-port.png) 30 fill / calc(16 * var(--u)) stretch;
  --ui: 5;
  background: linear-gradient(#311a2c, #311a2c) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
}
#shelf .it img {
  height: 100%;
  max-width: 100%;
}
#gift img,
#toStreet img {
  transform: scale(1.06);
}
#gift.empty img {
  filter: saturate(0.35) brightness(0.8);
}
#gift em {
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: calc(24 * var(--u));
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.8);
}
#gift {
  --x: 658;
  --y: 1535;
  --w: 126;
  --h: 126;
  --a: 1;
}
#toStreet {
  --x: 790;
  --y: 1535;
  --w: 126;
  --h: 126;
  --a: 1;
}
.ib em {
  position: absolute;
  right: 2%;
  top: 0;
  width: 26%;
  aspect-ratio: 1;
  background: url(assets/ui/dot.png) center / contain no-repeat;
  display: none;
}
.ib em.on {
  display: block;
  animation: bob 1s ease-in-out infinite;
}
#coach {
  --x: 30;
  --y: 1232;
  --w: 880;
  --h: 170;
  --a: 1;
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: calc(6 * var(--u));
  animation: popin 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#coach[hidden],
#hand[hidden] {
  display: none;
}
#coach.over {
  z-index: 130;
}
.spot2 {
  animation: hudpulse 1s ease-in-out infinite;
}
@keyframes hudpulse {
  50% {
    transform: scale(1.1);
    filter: brightness(1.3) drop-shadow(0 0 calc(10 * var(--u)) #ffe9a0);
  }
}
#hStar,
#hBar,
#hFlame,
#hEn,
#hCoin,
#hCo {
  cursor: pointer;
}
#hFlame,
#hCoin {
  pointer-events: auto;
} /* imagens não recebem toque (regra geral); estas duas explicam o que são */
#coach img {
  height: 100%;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45));
}
#coachTxt {
  flex: 1;
  align-self: center;
  font-size: calc(32 * var(--u));
  line-height: 1.2;
  border-width: calc(22 * var(--u));
  filter: drop-shadow(0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45));
}
body.land #coach {
  --x: 470;
  --y: 716;
  --w: 730;
  --h: 180;
  --a: 0.5;
}
body.land #coachTxt {
  font-size: calc(28 * var(--u));
  border-width: calc(18 * var(--u));
}
#street #coach {
  --x: 30;
  --y: 1236;
  --w: 880;
  --h: 170;
  --a: 1;
} /* na rua (em pé e deitado a rua usa o desenho em pé): embaixo, sobre o lugar ainda trancado */
#hand {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(110 * var(--u));
  z-index: 210;
  pointer-events: none;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.5));
  will-change: transform;
}
.cell.spot::before,
.tag.spot::before,
.ib.spot::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 170, 0.55), rgba(255, 220, 130, 0) 70%);
  animation: selpulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.cell.locked.spot::before {
  background: none;
}
/* ---------- menu de pausa: som, música, idioma, menos movimento, menu e recomeçar ---------- */
#pause {
  background: rgba(10, 8, 30, 0.78);
  z-index: 120;
}
#pauseP {
  --x: 88;
  --y: 412;
  --w: 768;
  --h: 996;
  --a: 0.5;
  border-width: calc(40 * var(--u));
  border-image-width: calc(52 * var(--u));
  animation: popin 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#pauseP > * {
  position: absolute;
}
#pauseP::before,
#pauseP::after {
  content: '';
  position: absolute;
  bottom: calc(-22 * var(--u));
  width: calc(40 * var(--u));
  height: calc(44 * var(--u));
  background: url(assets/ui/greca.png) center / contain no-repeat;
}
#pauseP::before {
  left: calc(-24 * var(--u));
}
#pauseP::after {
  right: calc(-24 * var(--u));
  transform: scaleX(-1);
}
#pauseMedal {
  left: calc(90 * var(--u));
  top: calc(-166 * var(--u));
  width: calc(508 * var(--u));
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.4));
}
#pauseP .hang {
  top: calc(-36 * var(--u));
  width: calc(100 * var(--u));
  height: calc(226 * var(--u));
  animation: sway 3s ease-in-out infinite;
  transform-origin: 50% 0;
}
#pauseP .hang.l {
  left: calc(-38 * var(--u));
}
#pauseP .hang.r {
  right: calc(-32 * var(--u));
  animation-delay: -1.2s;
}
#pauseP .hang::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(3 * var(--u));
  height: calc(96 * var(--u));
  margin-left: calc(-1.5 * var(--u));
  background: #c9973f;
}
#pauseP .hang img {
  position: absolute;
  bottom: calc(2 * var(--u));
  left: -26%;
  width: 152%;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 140, 50, 0.7));
}
#pauseH {
  left: calc(92 * var(--u));
  top: calc(35 * var(--u));
  width: calc(500 * var(--u));
  height: calc(108 * var(--u));
  font-size: calc(50 * var(--u));
  line-height: calc(68 * var(--u));
  text-align: center;
  color: #7a3a00;
  white-space: nowrap;
  border-style: solid;
  border-color: transparent;
  border-width: calc(18 * var(--u)) calc(34 * var(--u));
  border-image: url(assets/ui/plate.png) 44 fill / calc(36 * var(--u)) stretch;
  --ui: 14;
  background: linear-gradient(#fbe2be, #fbe2be) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
}
#pauseRows {
  left: calc(14 * var(--u));
  width: calc(655 * var(--u));
  top: calc(194 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(19 * var(--u));
  font-size: calc(34 * var(--u));
}
#pauseRows label {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  height: calc(100 * var(--u));
  padding: 0 calc(38 * var(--u)) 0 calc(46 * var(--u));
  border-radius: calc(26 * var(--u));
  background: rgba(255, 246, 226, 0.5);
  border: calc(3 * var(--u)) solid #dd9a55;
}
#pauseRows label:nth-child(2) img {
  width: calc(74 * var(--u));
  margin-right: calc(14 * var(--u));
}
#pauseRows label img {
  height: calc(72 * var(--u));
  width: calc(88 * var(--u));
  object-fit: contain;
  flex: none;
  filter: sepia(0.75) saturate(1.5) hue-rotate(-8deg) brightness(1.02) drop-shadow(0 1px 1px rgba(120, 80, 30, 0.45));
}
#pauseRows label span {
  flex: none;
  max-width: 46%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pauseRows label span.sr {
  display: none;
} /* som e música: só o ícone */
#pauseRows label.chk span {
  max-width: none;
  flex: 1;
  white-space: normal;
  line-height: 1.1;
}
/* barra: trilho bege com a parte cheia laranja (--v) e botão redondo */
#pauseRows input[type='range'] {
  margin-left: calc(15 * var(--u)) !important;
  flex: 1;
  min-width: 0;
  height: calc(60 * var(--u));
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-x;
  cursor: pointer;
  --v: 50%;
}
#pauseRows input[type='range']::-webkit-slider-runnable-track {
  height: calc(28 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(90deg, transparent var(--v), #e8d0a8 var(--v)), linear-gradient(180deg, #f9b233, #e8830a);
  box-shadow:
    inset 0 0 0 calc(3 * var(--u)) rgba(190, 130, 60, 0.75),
    inset 0 calc(5 * var(--u)) calc(3 * var(--u)) rgba(255, 255, 255, 0.25);
}
#pauseRows input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  margin-top: calc(-14 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, #f39410 62%, #d9760a);
  border: calc(3 * var(--u)) solid #c06a08;
  box-shadow: 0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(80, 40, 0, 0.35);
}
#pauseRows input[type='range']::-moz-range-track {
  height: calc(26 * var(--u));
  border-radius: calc(13 * var(--u));
  background: #e6d6ba;
}
#pauseRows input[type='range']::-moz-range-progress {
  height: calc(26 * var(--u));
  border-radius: calc(13 * var(--u));
  background: #f6a21c;
}
#pauseRows input[type='range']::-moz-range-thumb {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd98a, #f39410 62%, #d9760a);
  border: calc(3 * var(--u)) solid #c06a08;
}
#pauseRows select {
  margin-left: auto;
  margin-right: calc(-9 * var(--u));
  width: calc(290 * var(--u));
  height: calc(64 * var(--u));
  font: inherit;
  font-size: calc(30 * var(--u));
  color: var(--brown);
  -webkit-appearance: none;
  appearance: none;
  border: calc(3 * var(--u)) solid #b8782a;
  border-radius: calc(14 * var(--u));
  padding: 0 calc(46 * var(--u)) 0 calc(16 * var(--u));
  cursor: pointer;
  background: linear-gradient(180deg, #fdf1d4, #fbeccb);
  background-image:
    linear-gradient(45deg, transparent 50%, #8a4a1a 50%), linear-gradient(-45deg, transparent 50%, #8a4a1a 50%),
    linear-gradient(180deg, #fdf1d4, #fbeccb);
  background-size:
    calc(15 * var(--u)) calc(15 * var(--u)),
    calc(15 * var(--u)) calc(15 * var(--u)),
    100% 100%;
  background-position:
    right calc(30.5 * var(--u)) center,
    right calc(16 * var(--u)) center,
    0 0;
  background-repeat: no-repeat;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(170, 110, 40, 0.35);
}
#pauseRows input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  margin: 0;
  border-radius: calc(12 * var(--u));
  background: #fbeccb;
  border: calc(3 * var(--u)) solid #8a4a1a;
  cursor: pointer;
}
#pauseRows input[type='checkbox']:checked {
  background: #fbeccb
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5' fill='none' stroke='%238a4a1a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 92% no-repeat;
}
#pauseOk {
  --bh: 51.5;
  left: calc(89 * var(--u));
  top: calc(683 * var(--u));
  width: calc(503 * var(--u));
  height: calc(103 * var(--u));
  font-size: calc(46 * var(--u));
}
#pauseMenu,
#pauseP #reset {
  --bh: 46;
  top: calc(814 * var(--u));
  width: calc(280 * var(--u));
  height: calc(92 * var(--u));
  font-size: calc(32 * var(--u));
  border-width: calc(24 * var(--u)) calc(34 * var(--u));
}
#pauseMenu {
  left: calc(45 * var(--u));
}
#pauseP #reset {
  left: calc(359 * var(--u));
}
.gold.alt {
  filter: saturate(0.42) brightness(1.17);
}

/* ---------- telas por cima ---------- */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100;
}
.screen.on {
  display: block;
}
@property --lit {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
#street {
  background: var(--street-dark, url(assets/ui/street-dark.jpg)) center / cover;
}
#streetLit {
  position: absolute;
  inset: 0;
  background: var(--street, url(assets/ui/street.jpg)) center / cover;
  --lit: 0%;
  transition: --lit 1.8s cubic-bezier(0.3, 0.7, 0.3, 1);
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--lit) - 14%), transparent calc(var(--lit) + 6%));
  mask-image: linear-gradient(100deg, #000 calc(var(--lit) - 14%), transparent calc(var(--lit) + 6%));
}
#areas {
  transition: opacity 0.35s;
}
#areas.peek {
  opacity: 0.12;
}
#street::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(18, 12, 44, 0), rgba(18, 12, 44, 0.55));
}
#sLv {
  --x: 36;
  --y: 37;
  --w: 362;
  --h: 67;
  gap: calc(8 * var(--u));
}
#sCo {
  --x: 420;
  --y: 37;
  --w: 388;
  --h: 67;
  gap: calc(8 * var(--u));
}
#sLv img {
  width: calc(72 * var(--u));
  height: calc(64 * var(--u));
  object-fit: contain;
  transform: scale(1.06);
  margin: calc(-24 * var(--u)) 0 calc(-24 * var(--u)) calc(-40 * var(--u));
}
#sCo img {
  height: calc(76 * var(--u));
  margin: calc(-30 * var(--u)) 0 calc(-30 * var(--u)) calc(-44 * var(--u));
}
#sLv,
#sCo {
  font-size: calc(40 * var(--u));
  border-width: calc(24 * var(--u)) calc(50 * var(--u));
  border-image-width: calc(36 * var(--u)) calc(90 * var(--u));
}
#reset {
  --x: 822;
  --y: 26;
  --w: 86;
  --h: 86;
}
#reset img {
  width: 93%;
  height: 93%;
}
.area {
  --x: 37;
  --w: 866;
  --h: 372;
  display: block;
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45));
}
.area > * {
  position: absolute;
}
.area .thumb {
  left: calc(-2 * var(--u));
  top: calc(10 * var(--u));
  width: calc(270 * var(--u));
  height: calc(300 * var(--u));
  object-fit: cover;
  border-radius: calc(20 * var(--u));
  box-shadow:
    0 0 0 calc(3.5 * var(--u)) #e9b54a,
    0 0 0 calc(5 * var(--u)) #a8742a;
}
.area h2 {
  left: calc(304 * var(--u));
  top: calc(-2 * var(--u));
  width: calc(456 * var(--u));
  height: calc(58 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: calc(54 * var(--u));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-style: solid;
  border-color: transparent;
  border-width: calc(10 * var(--u)) calc(26 * var(--u));
  border-image: url(assets/ui/plate.png) 44 fill / calc(20 * var(--u)) stretch;
  --ui: 8;
  background: linear-gradient(#fbe2be, #fbe2be) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  line-height: calc(40 * var(--u));
}
.area .lamps {
  left: calc(296 * var(--u));
  top: calc(76 * var(--u));
  width: calc(510 * var(--u));
  height: calc(118 * var(--u));
  display: flex;
}
.area .lamps i {
  flex: 1;
  background: url(assets/ui/lamp2-off.png) center / auto 112% no-repeat;
}
.area .lamps i.lit {
  background-image: url(assets/ui/lamp2-on.png);
  animation: sway 3.2s ease-in-out infinite;
  transform-origin: 50% 0;
}
.area .lamps i.lit:nth-child(2n) {
  animation-delay: -1.3s;
}
.area .gold {
  left: calc(352 * var(--u));
  top: calc(213 * var(--u));
  width: calc(362 * var(--u));
  height: calc(98 * var(--u));
}
.area.off .gold {
  height: calc(80 * var(--u));
  top: calc(222 * var(--u));
}
.area .gold img {
  position: absolute;
  left: calc(30 * var(--u));
  top: 50%;
  height: calc(64 * var(--u));
  margin: calc(-32 * var(--u)) 0 0;
}
.area.off::before {
  content: '';
  position: absolute;
  inset: calc(-26 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(138, 121, 133, 0.7);
}
.area.off h2 {
  filter: sepia(0.3) saturate(0.6) brightness(0.8);
}
.area.off .gold {
  border-width: calc(14 * var(--u)) calc(30 * var(--u));
  border-image: url(assets/ui/plate-lock.png) 60 fill / calc(31 * var(--u)) stretch;
  --ui: 12;
  background: linear-gradient(#8a7979, #8a7979) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
  filter: none;
  text-shadow: none;
  color: #5a4a40;
}
.gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  color: #6b3a00;
  font-size: calc(34 * var(--u));
  white-space: nowrap;
  border-style: solid;
  border-width: calc(24 * var(--u)) calc(50 * var(--u));
  border-color: transparent;
  background:
    url(assets/ui/btn-gold-l.png) left / auto 100% no-repeat border-box,
    url(assets/ui/btn-gold-r.png) right / auto 100% no-repeat border-box,
    url(assets/ui/btn-gold-m.png) center / calc(100% - var(--bh) * var(--u)) 100% no-repeat border-box;
  border-radius: 999px; /* meio uniforme entra até metade das pontas; o arredondado do botão recorta os cantos */
  --bh: 49; /* --bh: metade da altura do botão, em px do desenho base */
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(255, 240, 180, 0.7);
}
.gold img {
  height: calc(58 * var(--u));
  margin: calc(-20 * var(--u)) 0;
}
.gold:disabled {
  filter: saturate(0.45) brightness(0.96);
  cursor: default;
}
.area.off .gold img {
  position: static;
  height: calc(84 * var(--u));
  margin: calc(-32 * var(--u)) calc(6 * var(--u)) calc(-32 * var(--u)) 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
#toKitchen {
  --x: 298;
  --y: 1537;
  --w: 340;
  --h: 98;
  --a: 1;
  font-size: calc(40 * var(--u));
}
/* ---------- livro de receitas ---------- */
#bookS {
  background: rgba(10, 8, 30, 0.78);
}
#bookP {
  --x: 40;
  --y: 300;
  --w: 861;
  --h: 1197;
  --a: 0.5;
  border-width: calc(40 * var(--u));
  border-image-width: calc(52 * var(--u));
  animation: popin 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
}
#bookP > * {
  position: absolute;
}
.tint {
  inset: calc(-34 * var(--u));
  border-radius: calc(34 * var(--u));
  background: radial-gradient(ellipse at 50% 45%, rgba(246, 150, 70, 0) 55%, rgba(246, 150, 70, 0.13));
  pointer-events: none;
}
.tint::after {
  content: '';
  position: absolute;
  inset: calc(13 * var(--u));
  border: calc(2 * var(--u)) solid rgba(212, 130, 63, 0.8);
  border-radius: calc(22 * var(--u));
}
#bookP .tint {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(246, 150, 70, 0) 55%, rgba(246, 150, 70, 0.12)),
    linear-gradient(180deg, rgba(246, 160, 80, 0.08), rgba(244, 150, 70, 0.14));
}
#bookP .hang {
  top: calc(-36 * var(--u));
  width: calc(122 * var(--u));
  height: calc(262 * var(--u));
  animation: sway 3s ease-in-out infinite;
  transform-origin: 50% 0;
}
#bookP .hang.l {
  left: calc(-28 * var(--u));
}
#bookP .hang.r {
  right: calc(-22 * var(--u));
  animation-delay: -1.2s;
}
#bookP .hang::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(3 * var(--u));
  height: calc(100 * var(--u));
  margin-left: calc(-1.5 * var(--u));
  background: #c9973f;
}
#bookP .hang img {
  position: absolute;
  bottom: calc(2 * var(--u));
  left: -26%;
  width: 152%;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 140, 50, 0.7));
}
#bookMedal {
  left: calc(125 * var(--u));
  top: calc(-176 * var(--u));
  width: calc(531 * var(--u));
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.4));
}
#bookH {
  left: calc(110 * var(--u));
  top: calc(45 * var(--u));
  width: calc(558 * var(--u));
  height: calc(127 * var(--u));
  font-size: calc(54 * var(--u));
  line-height: calc(87 * var(--u));
  text-align: center;
  color: #7a3a00;
  white-space: nowrap;
  border-style: solid;
  border-color: transparent;
  border-width: calc(18 * var(--u)) calc(34 * var(--u));
  border-image: url(assets/ui/plate.png) 44 fill / calc(36 * var(--u)) stretch;
  --ui: 14;
  background: linear-gradient(#fbe2be, #fbe2be) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
}
#bookTabs {
  left: 0;
  right: 0;
  top: calc(205 * var(--u));
  height: calc(135 * var(--u));
  display: flex;
  gap: calc(18 * var(--u));
  justify-content: center;
  align-items: center;
}
#bookTabs button {
  position: relative;
  width: calc(146 * var(--u));
  height: calc(135 * var(--u));
  border-radius: calc(24 * var(--u));
  background: #eec59c;
  border: calc(4 * var(--u)) solid #c98f55;
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(150, 95, 45, 0.45);
  display: grid;
  place-items: center;
  transition: transform 0.1s;
}
#bookTabs button img {
  height: calc(118 * var(--u));
}
#bookTabs button.on {
  width: calc(146 * var(--u));
  height: calc(135 * var(--u));
  transform: scale(1.08);
  z-index: 1; /* mesma largura das outras: trocar de aba não empurra a fileira */
  background: #fcd49d;
  border: calc(6 * var(--u)) solid #fdc829;
  box-shadow:
    0 0 0 calc(2 * var(--u)) #b9671f,
    inset 0 0 0 calc(2 * var(--u)) #cd6e07;
}
#bookTabs button.off {
  background: #9b7352;
  border-color: #7a563c;
}
#bookTabs button.off img:first-child {
  opacity: 0.6;
  filter: saturate(0.7);
}
#bookTabs button .lk {
  position: absolute;
  right: calc(6 * var(--u));
  bottom: calc(6 * var(--u));
  width: calc(37 * var(--u));
  height: calc(48 * var(--u));
  object-fit: contain;
}
#bookTabs button em {
  position: absolute;
  right: calc(-8 * var(--u));
  top: calc(-8 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  background: url(assets/ui/dot.png) center / contain no-repeat;
  display: none;
}
#bookTabs button.ready em {
  display: block;
  animation: bob 1s ease-in-out infinite;
}
#bookGrid {
  left: 0;
  right: 0;
  top: calc(372 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, calc(182 * var(--u)));
  gap: calc(15 * var(--u)) calc(14 * var(--u));
  justify-content: center;
}
.card {
  position: relative;
  height: calc(180 * var(--u));
  justify-content: center;
  cursor: pointer;
  border-radius: calc(22 * var(--u));
  background: linear-gradient(180deg, #fbd9a8, #f8c88f);
  border: calc(3 * var(--u)) solid #c8813f;
  box-shadow:
    inset 0 0 0 calc(2 * var(--u)) rgba(255, 246, 222, 0.85),
    inset 0 0 calc(12 * var(--u)) rgba(200, 130, 50, 0.25),
    0 calc(4 * var(--u)) 0 rgba(190, 120, 60, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: popin 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.card img {
  height: calc(142 * var(--u));
  filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(80, 40, 0, 0.3));
}
.card b {
  position: absolute;
  right: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
  min-width: calc(58 * var(--u));
  font-size: calc(21 * var(--u));
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background: #7e4325;
  border-radius: calc(18 * var(--u));
  padding: 0 calc(8 * var(--u));
}

.card:not(.no)::before {
  content: '';
  position: absolute;
  left: calc(12 * var(--u));
  top: calc(10 * var(--u));
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23fff0a6' d='M26 11L30.9 25.1L45 30L30.9 34.9L26 49L21.1 34.9L7 30L21.1 25.1ZM52 4L54.1 9.9L60 12L54.1 14.1L52 20L49.9 14.1L44 12L49.9 9.9ZM9 47L10.8 52.2L16 54L10.8 55.8L9 61L7.2 55.8L2 54L7.2 52.2Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 214, 110, 0.95));
  animation: twinkle 2.2s ease-in-out infinite;
}
@keyframes twinkle {
  50% {
    transform: scale(0.8) rotate(8deg);
    opacity: 0.75;
  }
}
#bookStalls {
  left: 0;
  right: 0;
  top: calc(775 * var(--u));
  height: calc(180 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(20 * var(--u));
  border-top: calc(4 * var(--u)) solid #d9a441;
  border-image: linear-gradient(90deg, #c98a2c, #f4cf6a 50%, #c98a2c) 1;
  padding-top: calc(8 * var(--u));
}
#bookStalls::before,
#bookStalls::after {
  content: '';
  position: absolute;
  top: calc(-7 * var(--u));
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: #e0aa45;
  transform: rotate(45deg);
}
#bookStalls::before {
  left: calc(-5 * var(--u));
}
#bookStalls::after {
  right: calc(-5 * var(--u));
}
#bookStalls img {
  width: calc(109 * var(--u));
  height: calc(102 * var(--u));
  object-fit: contain;
  object-position: 50% 100%;
}
#bookStalls img:nth-child(2) {
  width: calc(123 * var(--u));
  height: calc(115 * var(--u));
}
#bookStalls img:nth-child(3) {
  width: calc(147 * var(--u));
  height: calc(127 * var(--u));
}
#bookStalls img:nth-child(4) {
  width: calc(147 * var(--u));
  height: calc(124 * var(--u));
}
#bookStalls img:nth-child(5) {
  width: calc(163 * var(--u));
  height: calc(149 * var(--u));
}
.card.no img,
#bookStalls img.no {
  object-fit: none;
  object-position: -9999px 0;
  background: #7e4a28;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  filter: none;
}
#bookStalls img.no {
  background: #653920;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
}
#bookClaim {
  --bh: 61.5;
  left: calc(96 * var(--u));
  top: calc(980 * var(--u));
  width: calc(566 * var(--u));
  height: calc(123 * var(--u));
  font-size: calc(33 * var(--u));
  border-width: calc(30 * var(--u)) calc(52 * var(--u));
}
#bookClaim {
  position: absolute;
  padding-left: calc(58 * var(--u));
  white-space: nowrap;
} /* espaço da moeda: o texto centra no resto */
#bookClaim img {
  position: absolute;
  left: calc(-24 * var(--u));
  top: 50%;
  width: calc(87 * var(--u));
  height: calc(87 * var(--u));
  object-fit: contain;
  margin: calc(-43.5 * var(--u)) 0 0;
} /* moeda inteira: com cover ela saía cortada embaixo */
#bookClaim:disabled {
  filter: saturate(0.82);
}
#bookOk {
  --x: 293;
  --y: 1535;
  --w: 355;
  --h: 98;
  --a: 0.5;
  font-size: calc(40 * var(--u));
}
#pop {
  background: rgba(10, 8, 30, 0.72);
}
#popPanel {
  --x: 93;
  --y: 563;
  --w: 763;
  --h: 729;
  --a: 0.5;
  text-align: center;
  animation: popin 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-width: calc(40 * var(--u));
  border-image-width: calc(52 * var(--u));
}
#popPanel > * {
  position: absolute;
}
#popMedal {
  left: calc(52 * var(--u));
  top: calc(-178 * var(--u));
  width: calc(570 * var(--u));
  filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.4));
}
#pop.gen #popMedal {
  left: calc(206 * var(--u));
  top: calc(-300 * var(--u));
  width: calc(270 * var(--u));
  animation: breathe 2.4s ease-in-out infinite;
}
#pop.gen #popR b {
  background: #2f8a3a;
}
#popPanel .hang {
  top: calc(-36 * var(--u));
  width: calc(114 * var(--u));
  height: calc(259 * var(--u));
  animation: sway 3s ease-in-out infinite;
  transform-origin: 50% 0;
}
#popPanel .hang.l {
  left: calc(-50 * var(--u));
}
#popPanel .hang.r {
  right: calc(-42 * var(--u));
  animation-delay: -1.2s;
}
#popPanel .hang::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(3 * var(--u));
  height: calc(110 * var(--u));
  margin-left: calc(-1.5 * var(--u));
  background: #c9973f;
}
#popPanel .hang img {
  position: absolute;
  bottom: calc(2 * var(--u));
  left: -26%;
  width: 152%;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255, 140, 50, 0.7));
}
#popT {
  left: calc(77 * var(--u));
  top: calc(59 * var(--u));
  width: calc(520 * var(--u));
  height: calc(135 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-color: transparent;
  border-width: calc(18 * var(--u)) calc(34 * var(--u));
  border-image: url(assets/ui/plate.png) 44 fill / calc(36 * var(--u)) stretch;
  --ui: 14;
  background: linear-gradient(#fbe2be, #fbe2be) center / calc(100% - var(--ui) * 2 * var(--u))
    calc(100% - var(--ui) * 2 * var(--u)) no-repeat border-box;
}
#popH {
  font-size: calc(50 * var(--u));
  line-height: 1.05;
  color: #7a3a00;
  white-space: nowrap;
}
#popS {
  font-size: calc(27 * var(--u));
  line-height: 1.1;
  font-weight: 600;
  opacity: 0.85;
  text-align: center;
}
#popR {
  left: 0;
  right: 0;
  top: calc(270 * var(--u));
  display: flex;
  gap: calc(26 * var(--u));
  justify-content: center;
}
#popR div:nth-child(2) {
  width: calc(215 * var(--u));
}
#popR div {
  width: calc(200 * var(--u));
  height: calc(191 * var(--u));
  border-radius: calc(22 * var(--u));
  background: #fddba9;
  border: calc(3 * var(--u)) solid #c98a4e;
  box-shadow:
    0 calc(5 * var(--u)) 0 #c58050,
    inset 0 0 calc(12 * var(--u)) rgba(230, 160, 90, 0.22);
  display: grid;
  place-items: center;
  position: relative;
  animation: popin 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
#popR div:nth-child(2) {
  animation-delay: 0.12s;
}
#popR div:nth-child(3) {
  animation-delay: 0.24s;
}
#popR img {
  width: calc(170 * var(--u));
  height: calc(170 * var(--u));
  object-fit: contain;
}
#popR img[src*='steamer'] {
  transform: scale(1.22);
}
#popR div.big {
  width: calc(236 * var(--u));
  height: calc(236 * var(--u));
  padding: 0;
  overflow: hidden;
}
#popR div.big img {
  width: 100%;
  height: 100%;
}
#streetName {
  --x: 0;
  --y: 104;
  --w: 941;
  --h: 60;
  --a: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(40 * var(--u));
  font-weight: 800;
  color: #fff3d6;
  text-shadow:
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(20, 10, 40, 0.9),
    0 0 calc(14 * var(--u)) rgba(255, 170, 80, 0.6);
  pointer-events: none;
}
#bookP::before,
#bookP::after,
#popPanel::before,
#popPanel::after {
  content: '';
  position: absolute;
  bottom: calc(-22 * var(--u));
  width: calc(40 * var(--u));
  height: calc(44 * var(--u));
  background: url(assets/ui/greca.png) center / contain no-repeat;
}
#bookP::before,
#popPanel::before {
  left: calc(-24 * var(--u));
}
#bookP::after,
#popPanel::after {
  right: calc(-24 * var(--u));
  transform: scaleX(-1);
}
#popR b {
  position: absolute;
  right: calc(-2 * var(--u));
  bottom: calc(-14 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.25;
  color: #fff;
  background: #6b3a14;
  border-radius: calc(18 * var(--u));
  padding: 0 calc(12 * var(--u));
}
#popR b:empty {
  display: none;
}
#popOk {
  --bh: 53;
  left: calc(102 * var(--u));
  top: calc(527 * var(--u));
  width: calc(479 * var(--u));
  height: calc(106 * var(--u));
  font-size: calc(44 * var(--u));
}

/* ---------- abertura: carrega as imagens e espera um toque (o toque também libera o som) ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 300;
  --u: var(--u2);
  background: #151033 url(assets/ui/splash.jpg) center / cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.45s;
}
#boot.out {
  opacity: 0;
  pointer-events: none;
}
#bootLogo {
  width: calc(720 * var(--u));
  max-width: 86vw;
  margin-top: 7vh;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(10, 6, 30, 0.6));
  animation:
    popin 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
    logofloat 3.2s ease-in-out 0.6s infinite;
}
#bootBar {
  margin-top: auto;
  margin-bottom: 9vh;
  width: calc(560 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(15 * var(--u));
  background: rgba(8, 6, 28, 0.6);
  border: calc(3 * var(--u)) solid rgba(255, 207, 90, 0.7);
  overflow: hidden;
}
#bootBar u {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #ffe38a, #f5a623);
  border-radius: inherit;
  transition: width 0.2s;
}
#bootPlay {
  --bh: 60;
  margin-top: auto;
  margin-bottom: 8vh;
  width: calc(420 * var(--u));
  height: calc(120 * var(--u));
  font-size: calc(50 * var(--u));
  border-width: calc(30 * var(--u)) calc(60 * var(--u));
  animation:
    popin 0.4s cubic-bezier(0.34, 1.5, 0.64, 1),
    bob 1.2s ease-in-out 0.4s infinite;
}
#boot [hidden],
#boot[hidden] {
  display: none;
}
@keyframes logofloat {
  50% {
    transform: translateY(-2.5%);
  }
}

.hang::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(-14 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  margin-left: calc(-12 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe58a 0, #eaa417 45%, #b56d08 100%);
  box-shadow:
    0 0 0 calc(2 * var(--u)) #a8650e,
    0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(80, 40, 0, 0.5);
}
#pauseP .hang::before,
#bookP .hang::before,
#popPanel .hang::before {
  background: #7a4a1c;
  width: calc(4 * var(--u));
  margin-left: calc(-2 * var(--u));
}

/* fogos e confete atrás da medalha: enfeite fixo dos painéis de nível, livro e pausa */
.fw {
  left: calc(-50 * var(--u));
  top: calc(-204 * var(--u));
  width: calc(118 * var(--u));
  height: calc(124 * var(--u));
  background: url(assets/ui/fogos-1.png) center / contain no-repeat;
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 190, 110, 0.95))
    drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 150, 70, 0.5));
  animation: fw 2.6s ease-in-out infinite;
  pointer-events: none;
}
.fw.r {
  left: auto;
  right: calc(-30 * var(--u));
  top: calc(-206 * var(--u));
  background-image: url(assets/ui/fogos-2.png);
  animation-delay: -1.3s;
}
.cf {
  width: calc(28 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #e8453c;
  transform: rotate(-28deg);
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.cf.a {
  left: calc(-78 * var(--u));
  top: calc(-52 * var(--u));
}
.cf.b {
  left: calc(96 * var(--u));
  top: calc(-112 * var(--u));
  transform: rotate(34deg);
}
.cf.c {
  right: calc(104 * var(--u));
  top: calc(-100 * var(--u));
  transform: rotate(-40deg);
}
.cf.d {
  right: calc(-50 * var(--u));
  top: calc(-72 * var(--u));
  background: #f5b942;
  transform: rotate(22deg);
}
#bookP .fw {
  left: calc(34 * var(--u));
  top: calc(-182 * var(--u));
  width: calc(140 * var(--u));
  height: calc(138 * var(--u));
}
#bookP .fw.r {
  left: auto;
  right: calc(30 * var(--u));
  top: calc(-174 * var(--u));
  filter: none;
}
.cf.e {
  left: calc(-97 * var(--u));
  top: calc(221 * var(--u));
  background: #f58a2a;
  transform: rotate(40deg);
}
.cf.f {
  left: calc(-98 * var(--u));
  top: calc(549 * var(--u));
  background: #f58a2a;
  transform: rotate(-20deg);
}
.cf.g {
  left: calc(115 * var(--u));
  top: calc(716 * var(--u));
  transform: rotate(18deg);
}
.cf.h {
  left: calc(589 * var(--u));
  top: calc(714 * var(--u));
  transform: rotate(-35deg);
}
.cf.i {
  right: calc(-96 * var(--u));
  top: calc(26 * var(--u));
  transform: rotate(50deg);
}
.cf.j {
  right: calc(-100 * var(--u));
  top: calc(497 * var(--u));
  transform: rotate(-15deg);
}
#bookP .cf.a,
#bookP .cf.d {
  display: none;
}
#bookP .cf.b {
  left: calc(190 * var(--u));
  top: calc(-134 * var(--u));
}
#bookP .cf.c {
  right: calc(181 * var(--u));
  top: calc(-118 * var(--u));
  background: #f5b942;
}
#pauseP .fw {
  top: calc(-186 * var(--u));
}
#pauseP .fw.r {
  top: calc(-190 * var(--u));
}
@keyframes fw {
  50% {
    transform: scale(1.08);
    opacity: 0.82;
  }
}
.gr {
  width: calc(40 * var(--u));
  height: calc(44 * var(--u));
  top: calc(-19 * var(--u));
  left: calc(-24 * var(--u));
  background: url(assets/ui/greca.png) center / contain no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
.gr.r {
  left: auto;
  right: calc(-24 * var(--u));
  transform: scale(-1);
}
#popPanel,
#bookP,
#pauseP {
  border-image-slice: 54 fill;
  --ui: 19;
}

/* ---------- efeitos ---------- */
#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
#fx > * {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.spark {
  border-radius: 50%;
}
.conf {
  width: 9px;
  height: 13px;
  border-radius: 2px;
}
.ring {
  border-radius: 50%;
  border: 4px solid;
}
.float {
  font-size: calc(40 * var(--u));
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 5px rgba(10, 6, 30, 0.85);
  white-space: nowrap;
}
.float.f-gold {
  color: var(--gold);
}
.float.f-new {
  color: #9ff0ff;
}
@keyframes bob {
  50% {
    transform: translateY(-6%);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.04) translateY(-1.5%);
  }
}
@keyframes wiggle {
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes sway {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
@keyframes popin {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}
@keyframes hint {
  from {
    transform: scale(0.7);
    opacity: 1;
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes selpulse {
  50% {
    transform: scale(1.05);
  }
}
body.calm * {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* End of style.css */