/* Lantern Bites: abertura deitada, hora do rush, cliente especial, mapa dos bairros e vitória.
   Carregado por último (depois de style.css e style-land.css): mantenha a ordem no index.html. */
/* ---------- abertura deitada, tabuleiro em xadrez, hora do rush, cliente especial, abas das comidas de bairro ---------- */
body.land #boot {
  background-image: url(assets/ui/splash-land.jpg);
  padding-right: 50vw;
} /* logo e botão na metade vazia do desenho; a cozinheira fica à direita */
body.land #bootLogo {
  width: min(40vw, 86vh);
  max-width: none;
  margin-top: 8vh;
}
body.land #bootPlay,
body.land #bootBar {
  margin-bottom: 12vh;
}
/* xadrez suave: com o balcão todo aberto a grade deixava de ser um pano liso */
#board .cell:nth-child(odd):not(.locked) {
  box-shadow:
    inset 0 0 0 100vmax rgba(205, 185, 255, 0.075),
    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);
}
/* hora do rush: faixa em cima do tabuleiro com o tempo que resta */
#rush {
  --x: 220;
  --y: 392;
  --w: 500;
  --h: 52;
  --a: 0.5;
  z-index: 5;
  border-radius: calc(26 * var(--u));
  background: linear-gradient(180deg, #ff9a3c, #e2541c);
  border: calc(3 * var(--u)) solid #ffe08a;
  box-shadow:
    0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.45),
    0 0 calc(22 * var(--u)) rgba(255, 150, 60, 0.7);
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: popin 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
  pointer-events: none;
}
#rush[hidden] {
  display: none;
}
#rush b {
  font-size: calc(25 * var(--u));
  color: #fff;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(120, 30, 0, 0.7);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
#rush i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(7 * var(--u));
  background: rgba(90, 20, 0, 0.45);
}
#rush u {
  display: block;
  height: 100%;
  background: #ffe98a;
  transition: width 0.5s linear;
}
body.land #rush {
  --x: 616;
  --y: 6;
  --h: 46;
}
body.rush .tag .pay b {
  background: #c8371a;
  color: #fff3b0;
  animation: bob 0.6s ease-in-out infinite;
}
body.rush.land .tag .pay b {
  background: none;
}
/* cliente especial: estrela no ombro e etiqueta dourada */
.who.vip::before {
  content: '';
  position: absolute;
  right: -4%;
  top: 2%;
  width: 36%;
  aspect-ratio: 1;
  background: url(assets/ui/star.png) center / contain no-repeat;
  z-index: 2;
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(255, 220, 110, 0.95));
  animation: bob 1s ease-in-out infinite;
}
.who.vip img {
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 215, 110, 0.9));
}
.tag.vip:not(.ready) {
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 205, 90, 0.95))
    drop-shadow(0 calc(5 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.35));
}
.tag.vip .pay b {
  background: #b8860b;
  color: #fff8cf;
}
body.land .tag.vip .pay b {
  background: none;
}
/* livro com as 7 comidas: abas mais estreitas para caberem na mesma fileira */
#bookTabs[data-n='7'] {
  gap: calc(8 * var(--u));
}
#bookTabs[data-n='7'] button,
#bookTabs[data-n='7'] button.on {
  width: calc(104 * var(--u));
  height: calc(112 * var(--u));
}
#bookTabs[data-n='7'] button img:first-child {
  height: calc(90 * var(--u));
}
#bookTabs[data-n='7'] button .lk {
  width: calc(28 * var(--u));
  height: calc(36 * var(--u));
}
/* bairro novo: a barraca que chega junto */
#popR div.big.stall {
  overflow: visible;
  padding: calc(14 * var(--u));
}
#popR div.big.stall b {
  background: #2f8a3a;
  font-size: calc(24 * var(--u));
  right: 50%;
  transform: translateX(50%);
  white-space: nowrap;
}

/* ---------- acabamento, parte 1 ---------- */
/* rua deitada: três cartões em pé, lado a lado, usando a largura (antes era a coluna do celular no meio da tela) */
body.land #street .design {
  --u: min(calc(100vw / 1900), calc(100vh / 1060));
  width: calc(941 * var(--u));
  height: calc(1060 * var(--u));
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
body.land #areas {
  position: absolute;
  left: 50%;
  top: calc(196 * var(--u));
  transform: translateX(-50%);
  display: flex;
  gap: calc(64 * var(--u));
  width: max-content;
}
body.land #areas .area {
  position: relative;
  left: auto;
  top: auto;
  flex: none;
  width: calc(560 * var(--u));
  height: calc(700 * var(--u));
}
body.land .area .thumb {
  left: calc(4 * var(--u));
  top: calc(0 * var(--u));
  width: calc(500 * var(--u));
  height: calc(300 * var(--u));
}
body.land .area h2 {
  left: calc(26 * var(--u));
  top: calc(326 * var(--u));
}
body.land .area .lamps {
  left: calc(-1 * var(--u));
  top: calc(400 * var(--u));
}
body.land .area .gold {
  left: calc(73 * var(--u));
  top: calc(540 * var(--u));
}
body.land .area.off .gold {
  top: calc(549 * var(--u));
}
body.land #toKitchen {
  --y: 946;
}
body.land #street #coach {
  --y: 742;
}
/* cartão trancado em tom de madeira escura (era cinza frio) e texto legível */
.area.off::before {
  background: rgba(96, 62, 52, 0.74);
}
.area.off .gold {
  color: #2e1f18;
}
/* cartões de nível e bairro novo maiores na tela deitada */
body.land #pop .design {
  transform: translateX(-50%) scale(1.4);
  transform-origin: 50% 55.4%;
}
/* abertura deitada: botão maior e logo abaixo do logo, não solto no calçamento */
body.land #bootPlay {
  margin-top: 5vh;
  margin-bottom: auto;
  width: min(26vw, 56vh);
  height: min(7.4vw, 16vh);
  font-size: min(3.1vw, 6.6vh);
  --bh: 0;
  border-width: 0;
  background: linear-gradient(180deg, #ffe38a, #f5a623 60%, #e08a12);
  box-shadow:
    0 0.5vh 0 #9a5a08,
    0 1.2vh 2.4vh rgba(0, 0, 0, 0.45),
    inset 0 0.4vh 0 rgba(255, 255, 255, 0.55);
}
body.land #bootBar {
  margin-top: 7vh;
  margin-bottom: auto;
}
/* hora do rush: barra de tempo que se vê */
#rush i {
  height: calc(10 * var(--u));
  background: rgba(70, 12, 0, 0.7);
}
#rush u {
  background: linear-gradient(180deg, #fffbe0, #ffe24a);
  box-shadow: 0 0 calc(6 * var(--u)) #fff3a0;
}
#rush b {
  margin-top: calc(-8 * var(--u));
}
/* tempo da próxima chama legível */
#enT {
  color: #cfe6ff;
  opacity: 1;
  font-size: calc(22 * var(--u));
}
/* contador do livro não é botão: sem dourado enquanto a página não está completa */
#bookClaim:disabled {
  filter: none;
  background: #e9c79a;
  border-radius: calc(40 * var(--u));
  box-shadow: 0 0 0 calc(3 * var(--u)) #c98f55;
  color: #6b4a2a;
  text-shadow: none;
}
body.land #infoTxt small.hint {
  font-size: calc(27 * var(--u));
  line-height: 1.25;
}
/* cada bairro tinge as casas do balcão (em pé o cenário é só uma tira no alto: sem isso os bairros pareciam a mesma tela) */
body {
  --tA: rgba(205, 185, 255, 0);
  --tB: rgba(205, 185, 255, 0.075);
}
body[data-bairro='porto'] {
  --tA: rgba(60, 170, 210, 0.13);
  --tB: rgba(90, 205, 235, 0.22);
}
body[data-bairro='lotus'] {
  --tA: rgba(235, 110, 170, 0.12);
  --tB: rgba(255, 150, 200, 0.21);
}
body[data-bairro='neve'] {
  --tA: rgba(150, 200, 255, 0.16);
  --tB: rgba(215, 235, 255, 0.27);
}
#board .cell:not(.locked) {
  box-shadow:
    inset 0 0 0 100vmax var(--tA),
    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);
}
#board .cell:nth-child(odd):not(.locked) {
  box-shadow:
    inset 0 0 0 100vmax var(--tB),
    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);
}

/* ---------- acabamento, parte 2 ---------- */
/* Porto verde-água e Neve branco-gelo: antes os dois balcões pareciam o mesmo azul */
body[data-bairro='porto'] {
  --tA: rgba(20, 170, 150, 0.16);
  --tB: rgba(60, 215, 190, 0.27);
}
body[data-bairro='neve'] {
  --tA: rgba(200, 225, 255, 0.24);
  --tB: rgba(240, 248, 255, 0.38);
}
/* bairro novo: a etiqueta "Barraca nova!" fica no alto do quadro, longe do botão */
#popR div.big.stall b {
  bottom: auto;
  top: calc(-16 * var(--u));
}
#enT {
  font-size: calc(25 * var(--u));
  font-weight: 800;
}

/* ---------- acabamento, parte 3 ---------- */
/* barraca nova no cartão de bairro leva a chama azul das barracas (sem ela parecia um prato) */
#popR div.big.stall::after {
  content: '';
  position: absolute;
  right: 6%;
  bottom: 6%;
  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));
}
#pop.dist #popS {
  font-size: calc(38 * var(--u));
  font-weight: 800;
  opacity: 1;
}
/* hora do rush: a faixa inteira esvazia como relógio (o filete embaixo não se lia) */
#rush {
  --y: 398;
  --h: 46;
  background: #8f2a08;
}
#rush i {
  top: 0;
  height: auto;
  background: none;
}
#rush u {
  background: linear-gradient(180deg, #ffa53c, #ee5a1c);
  box-shadow: none;
  border-right: calc(4 * var(--u)) solid #fff3a0;
}
#rush b {
  margin-top: 0;
}
body.land #rush {
  --y: 6;
}
/* cliente especial: selo "×3" vermelho, diferente da estrela do nível */
.who.vip::before {
  content: '×3';
  right: -2%;
  top: 4%;
  width: auto;
  aspect-ratio: auto;
  min-width: calc(58 * var(--u));
  padding: 0 calc(6 * var(--u));
  height: calc(58 * var(--u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7a5a, #d0241c 70%);
  border: calc(4 * var(--u)) solid #ffe08a;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(110, 0, 0, 0.7);
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.45);
  filter: none;
  box-sizing: border-box;
}
body.land .tag.vip .pay b {
  color: #ffe98a;
}
/* contador do livro sem moeda (a moeda fica só quando há prêmio para pegar) */
#bookClaim:disabled img {
  display: none;
}
#bookClaim:disabled {
  padding-left: 0;
}
#bookTabs button.on {
  box-shadow:
    0 0 0 calc(3 * var(--u)) #b9671f,
    0 0 calc(18 * var(--u)) rgba(255, 190, 60, 0.9),
    inset 0 0 0 calc(2 * var(--u)) #cd6e07;
}
body.land #hEn small {
  font-size: calc(24 * var(--u));
}
/* Neve menos clara: pão, massa e bolinho brancos sumiam nas casas */
body[data-bairro='neve'] {
  --tA: rgba(120, 175, 255, 0.14);
  --tB: rgba(165, 205, 255, 0.25);
}
body.land #bootPlay {
  border: 0.5vh solid #fff0b0;
}
/* a faixa do rush conta os segundos no texto; a parte gasta é só um laranja mais escuro (o corte marrom parecia falha) */
#rush {
  background: #c2481a;
}
#rush u {
  border-right: 0;
}

/* ---------- mapa dos bairros na rua e tela de vitória da noite ---------- */
#distMap {
  --x: 170;
  --y: 170;
  --w: 601;
  --h: 86;
  --a: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#distMap i {
  position: relative;
  flex: none;
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 calc(4 * var(--u)) #a8742a,
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.5);
}
#distMap i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#distMap i.now {
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  box-shadow:
    0 0 0 calc(5 * var(--u)) #ffd35a,
    0 0 calc(20 * var(--u)) rgba(255, 190, 70, 0.95);
}
#distMap i.off img {
  filter: grayscale(0.85) brightness(0.45);
}
#distMap i.off::after {
  content: '';
  position: absolute;
  inset: 22%;
  background: url(assets/ui/lock.png) center / contain no-repeat;
}
#distMap i.done::after {
  content: '';
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 46%;
  height: 42%;
  background: url(assets/ui/btn-check.png) center / contain no-repeat;
}
#distMap i.done {
  overflow: visible;
}
#distMap i.done img {
  border-radius: 50%;
}
#distMap u {
  flex: none;
  width: calc(46 * var(--u));
  height: calc(8 * var(--u));
  margin: 0 calc(8 * var(--u));
  border-radius: 99px;
  background: repeating-linear-gradient(
    90deg,
    #ffd35a 0 calc(8 * var(--u)),
    transparent calc(8 * var(--u)) calc(15 * var(--u))
  );
  opacity: 0.85;
}
body.land #areas {
  top: calc(268 * var(--u));
}
body.land #toKitchen {
  --y: 976;
  --h: 80;
  font-size: calc(34 * var(--u));
}
body.land #street #coach {
  --y: 800;
}
/* vitória: os quatro bairros e o prêmio numa fileira */
#pop.win #popR {
  gap: calc(10 * var(--u));
  top: calc(292 * var(--u));
}
#popR div.q,
#popR div.q:nth-child(2) {
  width: calc(128 * var(--u));
  height: calc(150 * var(--u));
  overflow: hidden;
  padding: 0;
  border-color: #e9b54a;
}
#popR div.q img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#popR div.q.prize {
  overflow: visible;
  background: #fff0c2;
}
#popR div.q.prize img {
  width: 84%;
  height: 70%;
  object-fit: contain;
}
#popR div.q.prize b {
  background: #b8860b;
  font-size: calc(26 * var(--u));
  right: 50%;
  transform: translateX(50%);
  white-space: nowrap;
}
#popR div.q:nth-child(4) {
  animation-delay: 0.36s;
}
#popR div.q:nth-child(5) {
  animation-delay: 0.5s;
}
#pop.win #popS {
  font-size: calc(28 * var(--u));
  font-weight: 800;
  opacity: 1;
}
#pop.win #popH {
  font-size: calc(29 * var(--u));
  white-space: normal;
  text-align: center;
  line-height: 1.05;
}
#pop.win #popS {
  font-size: calc(20 * var(--u));
  line-height: 1.1;
  margin-top: calc(3 * var(--u));
}
#pop.win #popT {
  margin: 0;
  padding: 0;
}
/* tela de vitória: título do tamanho de uma festa, prêmio destacado, bairros com visto */
#pop.win #popT {
  height: calc(196 * var(--u));
  top: calc(52 * var(--u));
}
#pop.win #popH {
  font-size: calc(40 * var(--u));
}
#pop.win #popS {
  font-size: calc(26 * var(--u));
  margin-top: calc(6 * var(--u));
}
#pop.win #popR {
  top: calc(300 * var(--u));
  align-items: center;
}
#popR div.q:not(.prize) {
  overflow: visible;
}
#popR div.q:not(.prize) img {
  border-radius: calc(18 * var(--u));
}
#popR div.q:not(.prize)::after {
  content: '';
  position: absolute;
  right: calc(-8 * var(--u));
  bottom: calc(-10 * var(--u));
  width: calc(48 * var(--u));
  height: calc(42 * var(--u));
  background: url(assets/ui/btn-check.png) center / contain no-repeat;
}
#popR div.q.prize {
  width: calc(150 * var(--u));
  height: calc(172 * var(--u));
  margin-left: calc(10 * var(--u));
  border-color: #ffd35a;
  box-shadow:
    0 calc(5 * var(--u)) 0 #c58050,
    0 0 calc(22 * var(--u)) rgba(255, 200, 70, 0.95);
}
#popR div.q.prize b {
  font-size: calc(34 * var(--u));
  bottom: calc(-20 * var(--u));
}
/* mapa: o bairro atual com aro claro e pulso; os feitos com aro de bronze; folga no deitado */
#distMap i.done {
  box-shadow:
    0 0 0 calc(4 * var(--u)) #8a5a22,
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.5);
}
#distMap i.now {
  box-shadow:
    0 0 0 calc(6 * var(--u)) #fff3b0,
    0 0 calc(24 * var(--u)) rgba(255, 210, 90, 1);
  animation: bob 1.4s ease-in-out infinite;
}
#distMap i.off + u,
#distMap u:has(+ i.off) {
  opacity: 0.3;
}
body.land #distMap {
  --y: 166;
}
body.land #areas {
  top: calc(280 * var(--u));
}
body.land #areas .area {
  height: calc(672 * var(--u));
}
body.land #toKitchen {
  --y: 986;
  --h: 70;
  font-size: calc(30 * var(--u));
  border-width: calc(18 * var(--u)) calc(40 * var(--u));
  --bh: 35;
}

/* End of style-more.css */