/* Capy Bakery: fitas do Codex, responsividade (ultrawide, celular deitado) e acabamento. Carrega depois de screens.css. */
/* fitas grossas do Codex (r14, a partir da fita do mockup 12): proporção da arte, nunca esticadas; texto no meio da parte reta (38% da altura) */
.ribbon { --rib-ar: 3.833; aspect-ratio: var(--rib-ar); display: grid !important; place-items: center; box-sizing: border-box; padding: 0 1.2em !important; line-height: 1; }
.ribbon > span { position: relative; } /* a altura do texto é calculada em fitRibbons */ /* a parte reta fica um pouco acima do meio (as pontas dobram para baixo) */
.ribbon.red, .day-open { --rib-ar: 3.667; }
.ribbon.blue { --rib-ar: 4.135; }
.ribbon.gold { --rib-ar: 3.691; }
.shop .board > .ribbon { --rib-ar: 5.366; }
.ribbon::before, .shop .board > .ribbon::before { inset: 0 !important; background: url(../assets/img/rib4-pink.webp) center / contain no-repeat !important; }
.ribbon.red::before, .day-open::before { background-image: url(../assets/img/rib4-red.webp) !important; }
.ribbon.blue::before { background-image: url(../assets/img/rib4-blue.webp) !important; }
.ribbon.gold::before { background-image: url(../assets/img/rib4-gold.webp) !important; }
.shop .board > .ribbon::before { background-image: url(../assets/img/rib4-laurel.webp) !important; }
/* novidade (12): fita atravessada na borda de cima da janela; bolo menor e conteúdo mais embaixo */
body:not(.land) .modal.news > h2.ribbon { position: absolute; left: 50% !important; transform: translateX(-50%) !important; top: calc(-6.6 * var(--vh)) !important; width: calc(78 * var(--vw)) !important; height: auto !important; margin: 0 !important; font-size: calc(3.9 * var(--vh)) !important; }
body:not(.land) .modal.news { padding-top: calc(5.2 * var(--vh)) !important; }
body:not(.land) .modal.news .news-box { height: calc(11.5 * var(--vh)) !important; }
.modal.news .news-box .news-img { width: auto !important; height: 112% !important; max-width: 70%; object-fit: contain; }
.modal.news .news-box .burst { width: auto !important; height: 150% !important; }
body:not(.land) .modal.news .news-box { height: calc(13 * var(--vh)) !important; margin-bottom: calc(0.8 * var(--vh)); }

/* novidade (12), pedido do William: sem capivara embaixo; bolo, nome, dica e botão centralizados, com folga entre eles */
body:not(.land) .modal.news { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: calc(5.6 * var(--vh)) !important; gap: calc(1.4 * var(--vh)) !important; }
body:not(.land) .modal.news .news-box { height: calc(13.5 * var(--vh)) !important; margin: 0 !important; flex: none; }
body:not(.land) .modal.news .pill.name { margin: 0 !important; flex: none; }
body:not(.land) .modal.news .hint-line { width: 84% !important; margin: 0 !important; text-align: center; justify-content: center; flex: none; }
body:not(.land) .modal.news > .btn.big { width: 62% !important; margin: auto 0 calc(3.2 * var(--vh)) !important; flex: none; }

/* todas as fitas: a ALTURA manda e a largura sai da proporção da arte; nas janelas a fita atravessa a borda de cima */
.ribbon { width: auto !important; }
body:not(.land) .modal > h2.ribbon { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; height: calc(9.4 * var(--vh)) !important; top: calc(-4.2 * var(--vh)) !important; font-size: calc(3.9 * var(--vh)) !important; }
body:not(.land) .modal.end:not(.lose) > h2.ribbon { height: calc(10.4 * var(--vh)) !important; top: calc(-4.6 * var(--vh)) !important; font-size: calc(4.4 * var(--vh)) !important; }
body:not(.land) .modal.pause { padding-top: calc(7.4 * var(--vh)) !important; }
body:not(.land) .modal.settings { padding-top: calc(7.6 * var(--vh)) !important; }
body:not(.land) .modal.end:not(.lose) { padding-top: calc(7 * var(--vh)) !important; }
body:not(.land) .modal.end.lose { padding-top: calc(6.4 * var(--vh)) !important; }
body:not(.land) .modal.end.lose h3.ribbon.sub { height: calc(7 * var(--vh)) !important; font-size: calc(3.2 * var(--vh)) !important; }
body:not(.land) .levels .map-ribbon { height: calc(7.6 * var(--vh)) !important; font-size: calc(3.4 * var(--vh)) !important; }
body:not(.land) .shop .board > .ribbon { position: absolute; left: 50% !important; transform: translateX(-50%) !important; top: calc(-4.6 * var(--vh)) !important; height: calc(9.6 * var(--vh)) !important; font-size: calc(3.8 * var(--vh)) !important; }
body:not(.land) .shop .board { padding-top: calc(6.4 * var(--vh)) !important; }
body.land .modal > h2.ribbon { height: 2.5em !important; }
body.land .levels .map-ribbon { height: calc(9.5 * var(--vhs)) !important; font-size: calc(3.8 * var(--vhs)) !important; }
body.land .shop .board > .ribbon { position: absolute; left: 50% !important; transform: translateX(-50%) !important; height: calc(13 * var(--vhs)) !important; top: calc(-6.8 * var(--vhs)) !important; font-size: calc(4.4 * var(--vhs)) !important; }
body.land .shop .board { padding-top: calc(7.4 * var(--vhs)) !important; }
body.land .modal.end:not(.lose) > h2.ribbon { height: calc(12 * var(--vhs)) !important; top: calc(-5 * var(--vhs)) !important; font-size: calc(5.6 * var(--vhs)) !important; }
@media (orientation: landscape) and (max-height: 800px) { body.land .levels .map-ribbon { height: calc(7.6 * var(--vhs)) !important; font-size: calc(3.2 * var(--vhs)) !important; margin-top: calc(-0.6 * var(--vhs)) !important; } }

/* acabamento r1 (crítico): derrota, vitória, ajustes e pausa */
body.land .modal.end.lose { display: flex !important; flex-direction: column; align-items: center; gap: 10px !important; padding-top: 2.6em !important; }
body.land .modal.end.lose > * { flex: none; }
body.land .modal.end.lose .lose-capy { height: 120px !important; margin: 0 !important; align-self: center; position: static !important; }
body.land .modal.end.lose h3.ribbon.sub { height: 2.3em !important; width: auto !important; margin: 0 !important; font-size: 24px !important; }
body.land .modal.end.lose > .btn.big { width: 72% !important; }
body.land .modal.end.lose > .btn-row { width: 72% !important; display: flex; justify-content: center; }
body.land .modal.end.lose .btn-row > .btn { width: 60%; }
body:not(.land) .modal.end.lose { top: calc(33 * var(--vh)) !important; height: calc(63 * var(--vh)) !important; }
body:not(.land) .modal.end.lose .lose-capy { height: calc(14.5 * var(--vh)) !important; }
body:not(.land) .modal.end:not(.lose) { top: calc(47.5 * var(--vh)) !important; }
body:not(.land) .modal.end:not(.lose) .peek { top: calc(-24.6 * var(--vh)) !important; height: calc(20 * var(--vh)) !important; }
body.land .set-logo { display: none; }
body.land .modal.settings .set-capy { display: none !important; }
body.land .modal.pause .peek { display: none !important; }
body.land .modal.pause, body.land .modal.settings, body.land .modal.news, body.land .modal.end.lose { margin-top: 48px !important; }

@media (orientation: landscape) and (max-height: 560px) {
  body.land .shop .up-card { grid-template-columns: calc(8 * var(--vw)) minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; align-content: center; }
  body.land .shop .up-pic { grid-row: 1 / span 2 !important; width: calc(8 * var(--vw)) !important; height: calc(15 * var(--vhs)) !important; }
  body.land .shop .up-txt { grid-column: 2; grid-row: 1 / span 2; }
  body.land .shop .up-txt b { font-size: calc(3.6 * var(--vhs)) !important; }
  body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center; justify-self: end !important; }
  body.land .shop .pips em { display: none; }
}
body:not(.land) .shop .board { height: calc(53.6 * var(--vh)) !important; }
body:not(.land) .shop .up-card { height: calc(10.9 * var(--vh)) !important; }

@media (orientation: landscape) and (max-height: 560px) {
  body.land .shop .up-list { grid-template-columns: minmax(0, 1fr) !important; gap: calc(1.2 * var(--vhs)) !important; margin-top: calc(0.6 * var(--vhs)) !important; }
  body.land .shop .up-card { height: calc(13.4 * var(--vhs)) !important; padding: 0 calc(1.6 * var(--vhs)) !important; grid-template-columns: calc(11 * var(--vhs)) minmax(0, 1fr) auto !important; column-gap: calc(1.6 * var(--vhs)) !important; }
  body.land .shop .up-pic { width: calc(11 * var(--vhs)) !important; height: calc(11 * var(--vhs)) !important; }
  body.land .shop .up-txt b { font-size: calc(3.6 * var(--vhs)) !important; white-space: nowrap; }
  body.land .shop .up-card .pip { width: calc(3 * var(--vhs)) !important; height: calc(3 * var(--vhs)) !important; }
  body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { height: calc(8 * var(--vhs)) !important; font-size: calc(3.6 * var(--vhs)) !important; }
}
@media (orientation: landscape) and (max-height: 560px) { body.land .shop .up-card { height: calc(12.4 * var(--vhs)) !important; } body.land .shop .up-pic img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; } }

body:not(.land) .rush { right: calc(4 * var(--vw)) !important; }
body.land .map-foot .btn.shop-btn { height: calc(9 * var(--vhs)) !important; font-size: calc(4.2 * var(--vhs)) !important; padding: 0 2.4em !important; }
body.land .levels .map-foot { zoom: 1 !important; }
body.land .banner.speech { border-radius: 4px 22px 22px 22px !important; }
body.land .banner.speech::after { left: 18px !important; bottom: auto !important; top: -18px; border: 9px solid transparent !important; border-bottom: 11px solid var(--ink) !important; }

/* acabamento r2 (crítico 2) */
/* vitória deitada: a nuvem mantém a proporção do mockup (1,96:1) em qualquer tela; nunca estica */
body.land .modal-back .modal.end:not(.lose) { width: min(calc(67.4 * var(--vw)), calc(119.8 * var(--vhs))) !important; left: calc(49.5 * var(--vw) - min(calc(33.7 * var(--vw)), calc(59.9 * var(--vhs)))) !important; }
/* derrota deitada: duas colunas (capivara e estrelas | fita, placar, dica), botões lado a lado: janela baixa e texto grande */
body.land .modal.end.lose { display: grid !important; grid-template-columns: 150px 1fr; grid-template-areas: 'capy sub' 'capy stars' 'capy sum' 'hint hint' 'go row'; column-gap: 18px; row-gap: 8px !important; align-items: center; width: 560px !important; }
body.land .modal.end.lose .lose-capy { grid-area: capy; height: 150px !important; justify-self: center; }
body.land .modal.end.lose h3.ribbon.sub { grid-area: sub; justify-self: center; height: 2.4em !important; font-size: 22px !important; }
body.land .modal.end.lose .stars { grid-area: stars; justify-self: center; }
body.land .modal.end.lose .sum { grid-area: sum; justify-self: center; }
body.land .modal.end.lose .hint-line { grid-area: hint; width: 100% !important; font-size: 16px !important; justify-content: center; }
body.land .modal.end.lose > .btn.big { grid-area: go; width: 100% !important; }
body.land .modal.end.lose > .btn-row { grid-area: row; width: 100% !important; }
body.land .modal.end.lose .btn-row > .btn { width: 100%; }
body.land .modal.end.lose .peek { position: absolute; }
/* loja deitada: preço, bolinhas e nome pela altura da tela (não em px) */
body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { zoom: 1 !important; font-size: calc(3.2 * var(--vhs)) !important; height: calc(6.4 * var(--vhs)) !important; padding: 0 calc(2.2 * var(--vhs)) !important; }
body.land .shop .up-card .pips { zoom: 1 !important; }
body.land .shop .up-card .pip { width: calc(2.6 * var(--vhs)) !important; height: calc(2.6 * var(--vhs)) !important; }
body.land .shop .up-card .pips em { font-size: calc(2 * var(--vhs)) !important; }
body.land .shop .up-txt b { font-size: calc(3.4 * var(--vhs)) !important; }
/* tutorial deitado: letra do balão acompanha a altura */
body.land .banner.speech { font-size: clamp(14px, calc(2.6 * var(--vhs)), 30px) !important; padding: 0.5em 0.9em !important; }
body.land .modal.end.lose { grid-template-columns: 150px 1fr 1fr !important; grid-template-areas: 'capy sub sub' 'capy stars stars' 'capy sum sum' 'hint hint hint' 'go go row' !important; }
body.land .modal.end.lose h3.ribbon.sub { font-size: 26px !important; height: 2.5em !important; }
body.land .modal.end.lose { padding-top: 3.6em !important; }

/* acabamento r3 (crítico 3) */
body.land .modal.end:not(.lose) .stars { height: calc(14 * var(--vhs)) !important; }
body.land .modal.end:not(.lose) .stars .star img { width: calc(11.5 * var(--vhs)) !important; height: calc(11.5 * var(--vhs)) !important; }
body.land .modal.end:not(.lose) .stars .star:nth-child(2) img { width: calc(13 * var(--vhs)) !important; height: calc(13 * var(--vhs)) !important; }
body.land .modal.end:not(.lose) .sum { top: 55% !important; }
body.land .modal.end.lose { width: 600px !important; padding-left: 28px !important; padding-right: 28px !important; }
body.land .modal.end.lose .lose-capy { align-self: center; }
body.land .modal.end.lose .hint-line { font-size: 19px !important; border-radius: 14px; }
body.land .shop-foot .btn.green { left: calc(75.6 * var(--vw)) !important; width: calc(22.6 * var(--vw)) !important; bottom: calc(4 * var(--vhs)) !important; }
body.land .board .up-txt b, body.land .shop .up-txt b { white-space: normal !important; font-size: calc(3.2 * var(--vhs)) !important; line-height: 1.1; }
@media (orientation: landscape) and (max-height: 560px) { body.land .shop .up-txt b { white-space: nowrap !important; font-size: calc(3.6 * var(--vhs)) !important; } }
body.land .shop .up-card { align-content: center; }
body:not(.land) .shop .board { height: calc(52 * var(--vh)) !important; }
body:not(.land) .shop .up-card { height: calc(10.5 * var(--vh)) !important; }
body:not(.land) .shop-foot .foot-capy { height: calc(15 * var(--vh)) !important; }
body.land .modal.settings .set-foot { justify-content: center !important; padding-left: 0 !important; }
body.land .modal.settings .peek { display: none !important; }
body.land .modal.pause > .btn:not(.big) { font-size: 20px !important; }
@media (orientation: landscape) and (max-height: 560px) { body.land .shop .board { padding-top: calc(6 * var(--vhs)) !important;
  } body.land .shop .up-list { margin-top: 0 !important;
  gap: calc(1 * var(--vhs)) !important;
  } body.land .shop .up-card { height: calc(11 * var(--vhs)) !important;
  } body.land .shop .up-pic { height: calc(9.5 * var(--vhs)) !important;
  width: calc(9.5 * var(--vhs)) !important;
  } }

/* rodada 6: medidas do mockup de volta depois do acabamento (pausa, derrota, loja) */
body:not(.land) .modal.pause { padding-top: calc(10.4 * var(--vh)) !important; }
body:not(.land) .modal.end.lose { top: calc(35.3 * var(--vh)) !important; height: calc(64 * var(--vh)) !important; padding-top: calc(3 * var(--vh)) !important; }
body:not(.land) .modal.end.lose .lose-capy { height: calc(19.6 * var(--vh)) !important; }
body:not(.land) .shop-foot .foot-capy { height: calc(17.8 * var(--vh)) !important; }
body:not(.land) .shop .board > .ribbon { height: min(calc(9.4 * var(--vh)), calc(17 * var(--vw))) !important; top: calc(-4.8 * var(--vh)) !important; }
body.land .shop .board > .ribbon { height: calc(10.5 * var(--vhs)) !important; top: calc(-5.4 * var(--vhs)) !important; }

/* rodada 6: arte nova do Codex (r15) */
.btn.node { background: url(../assets/img/node.webp) center bottom / contain no-repeat !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; filter: drop-shadow(0 3px 2px rgba(58, 36, 22, 0.25)); }
.btn.node.cur { background: url(../assets/img/node-cur.webp) center bottom / contain no-repeat !important; }
.btn.node > b { position: absolute; left: 50%; top: 40%; translate: -50% -50%; line-height: 1; } /* centro da bolha da arte */
.btn.node.cur { filter: drop-shadow(0 0 10px rgba(255, 214, 70, 0.9)) drop-shadow(0 3px 2px rgba(58, 36, 22, 0.25)) !important; }
.btn.node > span { background: none !important; top: auto !important; bottom: 4% !important; height: 24% !important; aspect-ratio: auto !important; } /* estrelas e cadeado sobre a base da pedra */
.modal.news .news-box .news-plate { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); width: 96%; max-width: none; height: auto; z-index: 0; }
.modal.news .news-box .news-img { position: relative; z-index: 1; }

/* pausa (07): capivara dormindo apoiada sobre a fita, a fita na frente */
body:not(.land) .modal.pause .peek { top: calc(-15.6 * var(--vh)) !important; height: calc(13 * var(--vh)) !important; z-index: 1; }
body:not(.land) .modal.pause .peek .end-capy { height: calc(13 * var(--vh)) !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; }
body:not(.land) .modal.pause > h2.ribbon { z-index: 2; }

/* rodada 8: clarão dourado atrás do grupo da vitória, traços ao lado das estrelas */
.modal.end:not(.lose) .peek { isolation: isolate; }
.modal.end:not(.lose) .peek::before { content: ''; position: absolute; left: 50%; top: 55%; width: 92%; height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 236, 140, 0.95), rgba(255, 214, 90, 0.55) 55%, rgba(255, 214, 90, 0) 100%); z-index: -1; pointer-events: none; }
.modal.end .stars { position: relative; }
.modal.end .stars .pings { width: 9%; height: 60%; animation: none; }
.modal.end .stars .pings.l { left: 6%; }
.modal.end .stars .pings.r { right: 6%; }
.modal.end.lose .stars .pings { display: none; }

/* rodada 9: arte do Codex (r16) */
.ribbon.gold > span { color: var(--ink) !important; -webkit-text-stroke: 0 !important; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) !important; }
.shop-shelf { position: absolute; left: 0; top: calc(25.9 * var(--vh)); width: calc(100 * var(--vw)); height: auto; z-index: 0; pointer-events: none; }
body:not(.land) .shop-friend { z-index: 1; }
.shop-plant { position: absolute; left: calc(90.9 * var(--vw)); top: calc(20.3 * var(--vh)); height: calc(9 * var(--vh)); width: auto; z-index: 0; pointer-events: none; }

/* rodada 9: medidas do título (01/21) e nuvem da vitória deitada sem esticar */
body.land .title > .title-capy { top: 43.6% !important; height: 55.8% !important; }
body:not(.land) .title > .title-capy { top: 29.3% !important; height: 26.6% !important; }
body.land .modal.end:not(.lose) { background-size: contain !important; background-position: center bottom !important; }

/* vitória deitada (23): fita comprida e fina como no mockup (46,4% da largura) */
body.land .modal.end:not(.lose) > h2.ribbon { --rib-ar: 5.093; height: min(calc(9.1 * var(--vw)), calc(16 * var(--vhs))) !important; top: calc(0.5 * var(--vhs)) !important; font-size: calc(5 * var(--vhs)) !important; }
body.land .modal.end:not(.lose) > h2.ribbon::before { background-image: url(../assets/img/rib4-pinkwide.webp) !important; }
.modal.end .stars .burst { object-fit: contain; }

.title .btn.huge.play { border: 0 !important; } /* aro escuro extra que contornava a arte do PLAY */

/* 2ª opinião do Codex (título, 08/11): logo menor no deitado; no ultrawide a cena se dissolve nas laterais (sem corte reto) */
body.land .title > .logo { width: 30% !important; left: 35% !important; top: 9% !important; }
body.ultra #game { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
body.ultra .levels::after, body.ultra .shop::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* 2ª opinião do Codex (08/11): pausa, ajustes, loja e novidade no deitado; mapa */
body.land .modal.pause .peek { display: block !important; top: -128px !important; height: 116px !important; z-index: 1; }
body.land .modal.pause .peek .end-capy { height: 116px !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; }
body.land .modal.pause > h2.ribbon { z-index: 2; }
body.land .map-foot .btn.shop-btn { height: calc(11 * var(--vhs)) !important; font-size: calc(5 * var(--vhs)) !important; }
@media (orientation: landscape) and (max-height: 700px) {
  body.land .modal.settings { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 10px !important; width: 820px !important; align-items: center; }
  body.land .modal.settings > .slider-row:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  body.land .modal.settings > .slider-row:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  body.land .modal.settings > .lang-row { grid-column: 1; grid-row: 3; }
  body.land .modal.settings > .switch-row:nth-of-type(3) { grid-column: 2; grid-row: 1; }
  body.land .modal.settings > .switch-row:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  body.land .modal.settings > .switch-row:nth-of-type(5) { grid-column: 2; grid-row: 3; }
  body.land .modal.settings > .set-foot { grid-column: 1 / -1; grid-row: 4; }
  body.land .modal.news { display: grid !important; grid-template-columns: 42% 1fr; grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 10px !important; width: 640px !important; align-items: center; }
  body.land .modal.news .news-box { grid-column: 1; grid-row: 1 / span 3; height: 190px !important; }
  body.land .modal.news .pill.name, body.land .modal.news .hint-line, body.land .modal.news > .btn { grid-column: 2; margin: 0 !important; width: 100% !important; justify-self: stretch; }
}
@media (orientation: landscape) and (max-height: 560px) {
  body.land .shop .board { left: calc(21 * var(--vw)) !important; width: calc(53 * var(--vw)) !important; }
  body.land .shop .up-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: calc(1.6 * var(--vhs)) 1.2vw !important; }
  body.land .shop .up-card { height: calc(27 * var(--vhs)) !important; grid-template-columns: calc(13 * var(--vhs)) minmax(0, 1fr) !important; grid-template-rows: auto auto !important; padding: 0 calc(1.4 * var(--vhs)) !important; align-content: center; }
  body.land .shop .up-pic { grid-row: 1 / span 2 !important; width: calc(13 * var(--vhs)) !important; height: calc(13 * var(--vhs)) !important; }
  body.land .shop .up-pic img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain; }
  body.land .shop .up-txt { grid-column: 2; grid-row: 1; }
  body.land .shop .up-txt b { font-size: calc(3.4 * var(--vhs)) !important; white-space: normal !important; }
  body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; height: calc(7 * var(--vhs)) !important; font-size: calc(3.4 * var(--vhs)) !important; }
  body.land .shop .pips em { display: inline !important; }
}

/* faixas simples (2ª opinião do Codex, 08/11): cápsula reta 9-slice, largura do texto, pontas sem deformar, texto reto */
.ribbon, .shop .board > .ribbon, body.land .modal.end:not(.lose) > h2.ribbon { aspect-ratio: auto !important;
  height: 2.2em !important;
  width: fit-content !important;
  max-width: 94% !important;
  padding: 0 1.25em !important;
  display: grid !important;
  place-items: center;
  border-style: solid !important;
  border-width: 0 !important;
  border-image: url(../assets/img/banner-pink.webp) 0 70 fill / 0 1.1em stretch !important;
  background: none !important;
  }
.ribbon::before, .shop .board > .ribbon::before, body.land .modal.end:not(.lose) > h2.ribbon::before { display: none !important; }
.ribbon.red, .day-open, .shop .board > .ribbon { border-image-source: url(../assets/img/banner-red.webp) !important; }
.ribbon.blue { border-image-source: url(../assets/img/banner-blue.webp) !important; }
.ribbon.gold { border-image-source: url(../assets/img/banner-gold.webp) !important; }
.ribbon > span { top: 0 !important; line-height: 1 !important; white-space: nowrap; }
.levels .map-ribbon, .map-ribbon { margin-left: auto !important; margin-right: auto !important; }
/* placar: pause com a mesma altura das pílulas */
body:not(.land) .hud .pause-btn { height: calc(4.2 * var(--vh)) !important; width: calc(4.2 * var(--vh)) !important; top: calc(10.2 * var(--vh)) !important; }

/* logo só na home (pedido do William, 08/11) */
.head-logo, .set-logo, body.land .modal-back:has(.modal.end:not(.lose))::before { display: none !important; }

/* loja em pé em tela baixa (iPhone com navegador): sem a frase de descrição, mais espaço entre os cartões */
@media (orientation: portrait) and (max-height: 760px) {
  body:not(.land) .shop .up-txt small { display: none !important; }
  body:not(.land) .shop .up-list { gap: calc(1.8 * var(--vh)) !important; margin-top: calc(1.2 * var(--vh)) !important; }
  body:not(.land) .shop .up-card { height: calc(10 * var(--vh)) !important; align-items: center; }
  body:not(.land) .shop .up-txt { display: flex; flex-direction: column; justify-content: center; gap: calc(0.6 * var(--vh)); }
}

/* ==== rodada 2 do acabamento ==== */
/* loja em pé: a figura não passa do cartão (antes a altura em % não valia e a capivara cobria o Tip jar) */
body:not(.land) .shop .up-pic img { width: 92% !important; height: calc(9 * var(--vh)) !important; max-width: none !important; max-height: none !important; object-fit: contain; }
/* loja em pé grande (tablet): lista na largura do painel, figuras dentro do cartão, textos maiores */
@media (orientation: portrait) and (min-width: 600px) {
  body:not(.land) .shop .up-list { width: 100% !important; }
  body:not(.land) .shop .up-txt b { font-size: 24px !important; white-space: nowrap; }
  body:not(.land) .shop .up-txt small { font-size: 16px !important; }
}
/* toque >= 44 px nos botões de compra e no MAX (celular deitado e em pé pequeno); contador legível */
.up-card .btn.buy, .up-card .pill.max { min-height: 44px; }
@media (orientation: landscape) and (max-height: 560px) {
  body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { height: 44px !important; min-width: 96px; font-size: 18px !important; }
  body.land .shop .up-card .btn.buy .coin, body.land .shop .up-card .btn.buy img { width: 24px !important; height: 24px !important; }
  body.land .shop .pips em { font-size: 12px !important; }
  body.land .shop .up-txt b { font-size: 14px !important; white-space: nowrap !important; letter-spacing: -0.2px; }
  body.land .shop .up-card { grid-template-columns: calc(11 * var(--vhs)) minmax(0, 1fr) !important; column-gap: 8px !important; padding: 0 calc(1.2 * var(--vhs)) !important; }
  body.land .shop .up-pic { width: calc(11 * var(--vhs)) !important; height: calc(11 * var(--vhs)) !important; }
}
/* derrota em celular deitado: painel compacto para o zoom da janela deixar botões >= 44 px */
@media (orientation: landscape) and (max-height: 500px) {
  body.land .modal.end.lose { padding-top: 56px !important; row-gap: 4px !important; grid-template-columns: 120px 1fr 1fr !important; }
  body.land .modal.end.lose .lose-capy { height: 110px !important; }
  body.land .modal.end.lose h3.ribbon.sub { height: 46px !important; font-size: 22px !important; }
  body.land .modal.end.lose .stars { height: 50px !important; }
  body.land .modal.end.lose .stars .star:nth-child(n) img { width: 46px !important; height: 46px !important; }
  body.land .modal.end.lose .sum { margin: 0 !important; }
  body.land .modal.end.lose .hint-line { padding: 3px 10px !important; font-size: 18px !important; }
  body.land .modal.end.lose > .btn.big, body.land .modal.end.lose .btn-row > .btn { height: 64px !important; min-height: 64px !important; }
}
/* pausa em celular deitado: sem a capivara por cima (nada de altura gasta fora do painel) e botões altos */
@media (orientation: landscape) and (max-height: 500px) {
  body.land .modal.pause .peek { display: none !important; }
  body.land .modal.pause { padding-top: 50px !important; gap: 8px !important; }
  body.land .modal.pause > .btn { height: 62px !important; min-height: 62px !important; }
  body.land .modal.pause .mini-toggle { min-height: 60px; }
}
/* em pé: toque >= 44 px nos botões dos painéis finais e margem de baixo maior */
@media (orientation: portrait) {
  body:not(.land) .modal.end .btn-row > .btn, body:not(.land) .modal.pause > .btn, body:not(.land) .modal.end.lose > .btn { min-height: 46px !important; }
  body:not(.land) .modal.end:not(.lose) .btn-row > .btn { font-size: max(17px, calc(2.3 * var(--vh))) !important; }
  body:not(.land) .modal.end.lose .hint-line { font-size: 14px !important; }
}
@media (orientation: portrait) and (max-width: 599.98px) {
  body:not(.land) .modal.end:not(.lose) { top: calc(43 * var(--vh)) !important; }
  body:not(.land) .modal.end:not(.lose) .btn-row { margin-top: 8px !important; }
  body:not(.land) .modal.end.lose { top: calc(30.5 * var(--vh)) !important; }
}
/* derrota deitado (notebook e maior): Try again e All days com a mesma altura e o mesmo topo */
@media (orientation: landscape) and (min-height: 500px) {
  body.land .modal.end.lose > .btn.big, body.land .modal.end.lose > .btn-row { align-self: stretch !important; height: 66px !important; min-height: 66px !important; margin: 0 !important; }
  body.land .modal.end.lose > .btn-row { display: flex; }
  body.land .modal.end.lose .btn-row > .btn { height: 100% !important; font-size: inherit; }
}
/* loja deitada (notebook e maior): nome do upgrade numa linha só */
@media (orientation: landscape) and (min-height: 561px) {
  body.land .shop .up-txt b { font-size: calc(2.5 * var(--vhs)) !important; white-space: nowrap !important; }
  body.land .shop .up-txt small { font-size: calc(2.1 * var(--vhs)) !important; }
  body.land .shop .up-card { grid-template-columns: calc(14 * var(--vhs)) minmax(0, 1fr) !important; column-gap: calc(0.8 * var(--vhs)) !important; padding: 0 calc(1 * var(--vhs)) !important; }
  body.land .shop .up-pic { width: calc(14 * var(--vhs)) !important; }
}
/* ajustes: linhas com toque >= 44 px */
.switch-row { min-height: 46px; }


/* ==== rodada 3 do acabamento ==== */
/* ajustes deitado (notebook e maior): duas colunas como no celular; o zoom da janela (fitModal) cresce pela largura, sem escala extra */
@media (orientation: landscape) and (min-height: 701px) {
  body.land .modal.settings { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 10px !important; width: 820px !important; align-items: center; }
  body.land .modal.settings > .slider-row:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  body.land .modal.settings > .slider-row:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  body.land .modal.settings > .lang-row { grid-column: 1; grid-row: 3; }
  body.land .modal.settings > .switch-row:nth-of-type(3) { grid-column: 2; grid-row: 1; }
  body.land .modal.settings > .switch-row:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  body.land .modal.settings > .switch-row:nth-of-type(5) { grid-column: 2; grid-row: 3; }
  body.land .modal.settings > .set-foot { grid-column: 1 / -1; grid-row: 4; }
}


/* loja deitada baixa (celular): contadores >= 12 px, faixa e painel maiores */
@media (orientation: landscape) and (max-height: 560px) {
  body.land .shop .up-card .pips { gap: 3px; }
  body.land .shop .up-card .pip { width: 14px !important; height: 14px !important; }
  body.land .shop .up-card .pips em { font-size: 12px !important; line-height: 16px; font-style: normal; font-weight: 800; }
  body.land .shop .board > .ribbon { height: calc(12.5 * var(--vhs)) !important; font-size: calc(5.2 * var(--vhs)) !important; top: calc(-6.4 * var(--vhs)) !important; }
  body.land .shop .up-txt b { font-size: 15px !important; }
}
/* loja deitada (notebook e maior): nome e contadores maiores que o botão de preço */
@media (orientation: landscape) and (min-height: 561px) {
  body.land .shop .up-txt b { font-size: calc(2.6 * var(--vhs)) !important; }
  body.land .shop .up-card .pip { width: calc(3.4 * var(--vhs)) !important; height: calc(3.4 * var(--vhs)) !important; }
  body.land .shop .up-card .pips em { font-size: calc(2.7 * var(--vhs)) !important; }
}
/* ajustes em pé pequeno: capivara fora da borda do painel, Back centrado */
@media (orientation: portrait) and (max-width: 599.98px) {
  body:not(.land) .modal.settings .set-foot { justify-content: center !important; padding-left: 0 !important; }
  body:not(.land) .modal.settings .set-capy { translate: -4px 16px; scale: 0.85; transform-origin: 0 100%; }
}

/* pausa deitada: a capivara dormindo senta na borda do painel, ao lado da faixa Paused (antes ficava atrás dela) */
@media (orientation: landscape) and (min-height: 500px) {
  body.land .modal.pause .peek { top: -104px !important; }
  body.land .modal.pause .peek .end-capy { left: 82% !important; }
}
/* novidade deitada: faixa abaixo da HUD */
@media (orientation: landscape) and (min-height: 500px) { body.land .modal.news { margin-top: 76px !important; } }
/* mapa de dias deitado (notebook e maior): pedras maiores, números dos bloqueados legíveis */
@media (orientation: landscape) and (min-height: 561px) {
  body.land .btn.node { scale: 1.2; }
  body.land .btn.node.locked > b { font-size: 30px !important; }
}
/* celular deitado: derrota e pausa abaixo da HUD, SHOP do mapa com 48 px */
@media (orientation: landscape) and (max-height: 499.98px) {
  body.land .map-foot .btn.shop-btn { height: calc(12.4 * var(--vhs)) !important; }
  body.land .modal.news .pill.name { font-size: 22px !important; }
}
/* em pé pequeno: SHOP do mapa e Play da loja longe da borda de baixo */
@media (orientation: portrait) and (max-width: 599.98px) and (max-height: 719.98px) {
  body:not(.land) .map-foot .btn.shop-btn { translate: 0 -10px; }
  body:not(.land) .shop .foot-capy { translate: -14px 0; }
}
/* tablet em pé: rótulos dos ajustes, botões da pausa e descrições da loja maiores */
@media (orientation: portrait) and (min-width: 600px) {
  #ui#ui#ui .modal.settings .slider-row b, #ui#ui#ui .modal.settings .switch-row b, #ui#ui#ui .modal.settings .lang-row b { font-size: 26px !important; }
  #ui#ui#ui .modal.settings .switch-row small { font-size: 15px !important; }
  #ui#ui#ui .modal.pause > .btn:not(.big) { font-size: 24px !important; height: 64px !important; }
  #ui#ui#ui .shop .up-txt small { font-size: 15px !important; }
}
/* loja: MAX com mais contraste */
.shop .pill.max { color: #6b5a4a !important; }
/* ===== rodada 4 (acabamento): só o que o editor não faz (grid, alinhamento, altura, display) ===== */
/* novidade: faixa em pé com a mesma proporção das outras fitas (antes ficava achatada) e nome do bolo centralizado */
body:not(.land) .modal.news > h2.ribbon { width: calc(74 * var(--vw)) !important; height: calc(74 * var(--vw) / 3.833) !important; font-size: calc(3 * var(--vh)) !important; }
.modal.news .pill.name { display: flex !important; justify-content: center; text-align: center; }
/* derrota deitada: botões longe da borda dourada (margem lateral e embaixo) */
body.land .modal.end.lose { padding-left: calc(6.5 * var(--vhs)) !important; padding-right: calc(6.5 * var(--vhs)) !important; padding-bottom: calc(5 * var(--vhs)) !important; }
/* End of fit.css */

/* ===== rodada 5 ===== */
/* MAX: texto no centro da pílula (era flex com justify start) */
.shop .up-card .pill.max { justify-content: center; align-items: center; text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
/* loja 375x635: cartões 6% mais baixos para o último caber na moldura e soltar do Play Day */
@media (orientation: portrait) and (max-height: 719.98px) { body:not(.land) .shop .up-card { height: calc(9.4 * var(--vh)) !important; } }
/* dias em pé: amigos acima do SHOP (sem cobrir os pés) */
body:not(.land) .map-crowd { margin-bottom: 0 !important; }
body:not(.land) .map-crowd img { height: min(calc(14.4 * var(--vh)), calc(27 * var(--vw))) !important; }
body:not(.land) .map-foot .btn.shop-btn { translate: 0 0 !important; }
/* ajustes: alvo de toque de 44 px (slider e idioma) sem mudar o desenho */
#ui#ui .modal.settings .slider-row input { height: 44px !important; background: none !important; border: 0 !important; }
#ui#ui .modal.settings .slider-row input::-webkit-slider-runnable-track { height: 16px; border-radius: 99px; background: linear-gradient(#ffe36a, #ffbf2a); border: 2.5px solid var(--ink); }
#ui#ui .modal.settings .slider-row input::-moz-range-track { height: 16px; border-radius: 99px; background: linear-gradient(#ffe36a, #ffbf2a); border: 2.5px solid var(--ink); }
#ui#ui .modal.settings .slider-row input::-webkit-slider-thumb { margin-top: -8px; }
#ui#ui .modal.settings .lang-row .pill.lang { min-height: 44px; height: 44px !important; }

/* ===== rodada 6 ===== */
/* celular em pé: vitória, derrota e novidade com folga de 20 px embaixo (antes o último botão colava na borda do painel) */
@media (orientation: portrait) and (max-width: 599.98px) {
  body:not(.land) .modal.end:not(.lose) { height: calc(49 * var(--vh) + 28px) !important; }
  body:not(.land) .modal.end.lose { height: calc(64 * var(--vh) + 20px) !important; }
  body:not(.land) .modal.news { height: calc(43.7 * var(--vh) + 20px) !important; }
  body:not(.land) .modal.news .peek { bottom: calc(-8 * var(--vh) + 20px) !important; }
  /* a fileira de botões cabe na largura do conteúdo e cresce com o botão (min 46 px) */
  body:not(.land) .modal.end:not(.lose) > .btn-row { width: 92% !important; height: auto !important; min-height: 46px; gap: 8px !important; }
  body:not(.land) .modal.end.lose > .btn-row { height: auto !important; min-height: 46px; }
  body:not(.land) .modal.end .btn-row > .btn { min-width: 0 !important; flex: 1 1 0 !important; padding-left: 0.3em !important; padding-right: 0.3em !important; gap: 4px; }
  body:not(.land) .modal.end:not(.lose) .btn-row > .btn { font-size: max(17px, calc(2.4 * var(--vh))) !important; }
}
@media (orientation: portrait) and (max-width: 599.98px) and (min-height: 720px) {
  body:not(.land) .modal.end:not(.lose) { height: calc(49 * var(--vh) + 20px) !important; }
  body:not(.land) .modal.end.lose { height: calc(64 * var(--vh) + 4px) !important; }
}
/* loja em pé: Play Day com o mesmo respiro dos dois lados (texto + ícone centralizados) */
body:not(.land) .shop-foot .btn.green { padding-left: 24px !important; padding-right: 24px !important; }
/* ajustes no tablet em pé: rótulo Sound/Music com largura para a fonte maior */
@media (orientation: portrait) and (min-width: 600px) { #ui#ui#ui .modal.settings .slider-row b { width: 112px !important; } }

/* ===== rodada 7 ===== */
/* tablet em pé: vitória e novidade com folga embaixo (antes os botões subiam sobre a dica); faixa da novidade com a proporção das outras */
@media (orientation: portrait) and (min-width: 600px) {
  body:not(.land) .modal.end:not(.lose) { height: calc(49 * var(--vh) + 16px) !important; }
  body:not(.land) .modal.news { height: calc(43.7 * var(--vh) + 16px) !important; }
  body:not(.land) .modal.news .peek { bottom: calc(-8 * var(--vh) + 16px) !important; }
  body:not(.land) .modal.news > h2.ribbon { height: 2.2em !important; }
}
/* pausa: Resume e os outros botões com a mesma largura */
.modal.pause > .btn.big, .modal.pause > .btn:not(.big) { width: 74% !important; }
/* derrota em pé (celular): a dica cabe numa linha só (mais larga, menos folga, ícone menor) */
@media (orientation: portrait) and (max-width: 599.98px) {
  body:not(.land) .modal.end.lose .hint-line { width: 92% !important; padding: 6px 8px !important; gap: 4px; }
  body:not(.land) .modal.end.lose .hint-line img.hat { width: 32px; height: 32px; padding-right: 5px; }
}
/* vitória em celular deitado: Next day, Play again e Shop com a mesma altura (47 px de tela) */
@media (orientation: landscape) and (max-height: 499.98px) {
  body.land .modal.end:not(.lose) > .btn.go { height: 60px !important; min-height: 0 !important; }
}
/* mapa de dias em pé com faixas laterais (tablet): a borda do mapa nítido some em degradê, sem costura */
body:not(.land) .levels.seam::after { -webkit-mask-image: linear-gradient(90deg, transparent var(--map-l), #000 calc(var(--map-l) + 44px), #000 calc(100% - var(--map-l) - 44px), transparent calc(100% - var(--map-l))); mask-image: linear-gradient(90deg, transparent var(--map-l), #000 calc(var(--map-l) + 44px), #000 calc(100% - var(--map-l) - 44px), transparent calc(100% - var(--map-l))); }
/* ajustes: ícones e rótulos das três linhas (volume, interruptores, idioma) no mesmo eixo */
.modal.settings .lang-row { padding-left: 4px !important; }
.modal.settings .lang-row > span:first-child { gap: 10px; }
.modal.settings .lang-row img.ri { width: 44px !important; height: 44px !important; }
.modal.settings .switch-row { padding-left: 8px !important; }
@media (orientation: portrait) and (max-width: 599.98px) { .modal.settings .lang-row .pill.lang { width: 122px !important; min-width: 0 !important; padding-left: 8px !important; padding-right: 8px !important; } }
/* loja: botões de compra e MAX com a mesma largura na coluna */
@media (orientation: landscape) and (min-height: 561px) { body.land .shop .up-card .btn.buy, body.land .shop .up-card .pill.max { min-width: max(122px, calc(15.2 * var(--vhs))) !important; } }
@media (orientation: portrait) { body:not(.land) .shop .up-card .btn.buy, body:not(.land) .shop .up-card .pill.max { min-width: 100px; } }

/* ===== rodada 8 ===== */
/* ajustes no tablet em pé: Back no centro do painel (a regra base reserva 34vw à esquerda para a capivara, que é absoluta) */
@media (orientation: portrait) and (min-width: 600px) {
  body:not(.land) .modal.settings .set-foot { justify-content: center !important; padding-left: 0 !important; }
}

/* ultrawide: a máscara fica só no fundo da loja (na .shop ela escondia o voltar, as moedas e o Play Day nos cantos da janela) */
body.ultra .shop { background: none !important; isolation: isolate; }
body.ultra .shop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(../assets/img/bg-landscape.webp) center / cover; pointer-events: none; }

/* ==== tela 4:3 do William (1672x1266), 08/11 ==== */
/* derrota deitada: a faixa "Almost there!" no centro do painel, não só da coluna da direita */
body.land .modal.end.lose { grid-template-areas: 'sub sub sub' 'capy stars stars' 'capy sum sum' 'hint hint hint' 'go go row' !important; }
/* mapa: no dia da metade esquerda a capivara fica à direita da pedra (na borda ela tapava o número) */
.levels .btn.node.cap-r .node-capy { right: auto !important; left: 74% !important; }
/* mapa deitado: o cabeçalho ocupa a largura toda, então voltar e moedas ficam nos cantos em qualquer proporção (antes: 900 px no meio e o editor empurrava em %) */
body.land .levels .screen-head { margin: 0 0 0 calc(-10px / var(--kz, 1)) !important; width: calc(var(--sw) / var(--kz, 1)) !important; max-width: none !important; padding: 0 14px; box-sizing: border-box; }
/* SHOP do mapa deitado menor (o William achou gigante) */
body.land .map-foot .btn.shop-btn { height: calc(8 * var(--vhs)) !important; min-height: 48px; font-size: calc(3.6 * var(--vhs)) !important; padding: 0 2.2em !important; }
/* voltar do mapa maior (era fácil de errar) */
body.land .levels .screen-head .btn.round.back { width: 68px !important; height: 68px !important; }
/* números do mapa: todos do mesmo tamanho e grossura; o dia bloqueado só fica mais claro (o cadeado já diz que está fechado) */
.btn.node.locked > b, body.land .btn.node.locked > b { font-size: 1.7em !important; opacity: 0.6 !important; }
/* home deitada: PLAY e logo com teto pela altura útil (no G9 e no PC eram gigantes: 30% da largura da cena) */
body.land .title { --pw: max(min(calc(30.7 * var(--vw)), calc(36 * var(--vhs))), min(calc(30.7 * var(--vw)), 230px)); --lw: max(min(calc(30 * var(--vw)), calc(40 * var(--vhs))), min(calc(30 * var(--vw)), 250px)); }
body.land .title > .play-wrap { width: var(--pw) !important; left: calc(50% - var(--pw) / 2) !important; }
body.land .title .btn.huge.play { font-size: calc(var(--pw) * 0.15) !important; }
body.land .title > .logo { width: var(--lw) !important; left: calc(50% - var(--lw) / 2) !important; }
/* o brilho que corre nos botões virava um retângulo claro em cima da arte do PLAY */
.title .btn.huge.play::after { display: none !important; }
/* painel novo (Codex, 08/11): retângulo de cantos redondos em alta resolução, no lugar do dourado ondulado */
.modal.pause, .modal.news, .modal.end.lose, .modal.settings { background: none !important; border: 0 !important; box-shadow: none !important; border-image: url(../assets/img/panel-round.webp) 175 fill / clamp(26px, calc(4 * var(--vhs)), 60px) stretch !important; }
body:not(.land) .modal.pause, body:not(.land) .modal.news, body:not(.land) .modal.end.lose, body:not(.land) .modal.settings { border-image-width: clamp(24px, calc(7 * var(--vw)), 44px) !important; }
/* loja: mesmo painel novo das janelas e margem interna maior (os cartões passavam por cima da moldura) */
.shop .board { border-image: url(../assets/img/panel-round.webp) 175 fill / clamp(26px, calc(4 * var(--vhs)), 60px) stretch !important; }
body.land .shop .board { padding-left: calc(3.4 * var(--vhs)) !important; padding-right: calc(3.4 * var(--vhs)) !important; padding-bottom: calc(3.4 * var(--vhs)) !important; box-sizing: border-box; }
body:not(.land) .shop .board { border-image-width: clamp(24px, calc(7 * var(--vw)), 44px) !important; }
/* emendas "|" das artes esticadas em pedaços (border-image): por baixo vai o meio da própria arte (botões e faixas) ou o creme (painéis),
   então a fresta de 1 px que o navegador deixa com zoom fracionado some */
.btn { --cw: 28px; --mid: url(../assets/img/btn-cream-mid.webp); }
.btn.big, .modal .btn.big { --cw: 34px; }
.btn.primary, .btn.go { --mid: url(../assets/img/btn-gold-mid.webp); }
.btn.pink { --mid: url(../assets/img/btn-pink-mid.webp); }
.btn.purple { --mid: url(../assets/img/btn-purple-mid.webp); }
.btn.green, body.land .modal.end:not(.lose) .btn.go { --mid: url(../assets/img/btn-green-mid.webp); }
body.land .modal.end:not(.lose) .btn.purple { --mid: url(../assets/img/btn-gold-mid.webp); }
.btn:not(.round):not(.corner):not(.back):not(.node):not(.play) { background: var(--mid) center / calc(100% - 2 * var(--cw) + 6px) 100% no-repeat !important; }
.ribbon, .shop .board > .ribbon, body.land .modal.end:not(.lose) > h2.ribbon { background: url(../assets/img/banner-pink-mid.webp) center / calc(100% - 2.2em + 6px) 100% no-repeat !important; }
.ribbon.red, .day-open, .shop .board > .ribbon { background-image: url(../assets/img/banner-red-mid.webp) !important; }
.ribbon.blue { background-image: url(../assets/img/banner-blue-mid.webp) !important; }
.ribbon.gold { background-image: url(../assets/img/banner-gold-mid.webp) !important; }
.modal.pause, .modal.news, .modal.end.lose, .modal.settings, .shop .board { --bw: clamp(26px, calc(4 * var(--vhs)), 60px); background: linear-gradient(#fcead0, #fcead0) center / calc(100% - 2 * var(--bw) + 10px) calc(100% - 2 * var(--bw) + 10px) no-repeat !important; }
body:not(.land) .modal.pause, body:not(.land) .modal.news, body:not(.land) .modal.end.lose, body:not(.land) .modal.settings, body:not(.land) .shop .board { --bw: clamp(24px, calc(7 * var(--vw)), 44px); }
/* pausa em pé: centralizada na tela (estava presa a ~47% da altura e ficava baixa) */
body:not(.land) .modal.pause { top: 0 !important; bottom: 0 !important; margin-top: auto !important; margin-bottom: auto !important; height: fit-content !important; }
/* ==== 08/11 noite: pausa, HUD e vitória ==== */
/* pausa: título menor, botões logo abaixo dele, barras de volume com espaço */
body.land .modal.pause > h2.ribbon { font-size: max(28px, calc(4.6 * var(--vhs))) !important; }
body:not(.land) .modal.pause > h2.ribbon { font-size: calc(3.1 * var(--vh)) !important; width: calc(56 * var(--vw)) !important; }
body:not(.land) .modal.pause { padding-top: calc(7.6 * var(--vh)) !important; padding-bottom: calc(2.6 * var(--vh)) !important; gap: calc(1.2 * var(--vh)) !important; }
.modal.pause .vol-rows { width: 74%; display: grid; gap: 10px; margin-top: 6px; }
.modal.pause .vol-rows .slider-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
.modal.pause .vol-rows .slider-row .gi, .modal.pause .vol-rows .slider-row img { width: 40px; height: 40px; }
.modal.pause .vol-rows input { width: 100%; height: 44px; }
/* HUD: ícones maiores; em pé, as três pílulas com o mesmo tamanho e o mesmo espaço entre elas */
.hud .pill img { height: 1.2em !important; width: auto !important; max-height: none !important; }
body:not(.land) .hud .pill.lvl { left: calc(12.2 * var(--vw)) !important; width: calc(27.4 * var(--vw)) !important; }
body:not(.land) .hud .hud-coins { left: calc(41.4 * var(--vw)) !important; width: calc(27.4 * var(--vw)) !important; }
body:not(.land) .hud .hud-served { left: calc(70.6 * var(--vw)) !important; width: calc(27.4 * var(--vw)) !important; }
/* vitória: servidos e moedas mais acima (longe dos botões) e com ícones maiores */
.modal.end:not(.lose) .sum { margin-bottom: calc(1.6 * var(--vhs)) !important; translate: 0 calc(-0.8 * var(--vhs)); }
.modal.end .sum .pill img { height: 1.45em !important; width: auto !important; }
#ui#ui .modal.pause .vol-rows { width: 84% !important; }
#ui#ui .modal.pause .vol-rows .slider-row { display: grid !important; grid-template-columns: 40px max-content minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; }
#ui#ui .modal.pause .vol-rows .slider-row b { white-space: nowrap; position: static !important; width: auto !important; }
#ui#ui .modal.pause .vol-rows .slider-row input { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; }
/* pausa deitada: espaço de cima acompanha a faixa (no PC e no G9 ela cobria o Resume) */
body.land .modal.pause { --rf: max(28px, calc(4.6 * var(--vhs))); padding-top: calc(1.5 * var(--rf) + 16px) !important; }
body.land .modal.pause > h2.ribbon { font-size: var(--rf) !important; top: calc(-1.1 * var(--rf)) !important; }
/* dica do tutorial (08/11): caixa de cantos arredondados que cresce com o texto, numa linha, letra legível */
#ui#ui#ui .banner.speech { width: max-content !important;
  height: auto !important;
  max-width: 90% !important;
  white-space: nowrap !important;
  display: block !important;
  border-radius: 16px !important;
  padding: 0.5em 1em !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 4px 0 rgba(58, 36, 22, 0.3) !important;
  translate: none !important;
  }
body:not(.land) #ui#ui#ui .banner.speech { left: max(50%, calc(var(--sw) - 50% + 4px)) !important; left: clamp(50%, 65%, 65%) !important; top: var(--banner-top) !important; transform: translateX(-50%) !important; font-size: clamp(15px, calc(2.3 * var(--vh)), 26px) !important; }
body:not(.land) #ui#ui#ui .banner.speech::after { display: none !important; }
body.land #ui#ui#ui .banner.speech { font-size: clamp(18px, calc(3.5 * var(--vhs)), 42px) !important; }
/* dica do tutorial sem a setinha */
#ui#ui#ui .banner.speech::after, #ui#ui#ui .banner.speech::before { display: none !important; content: none !important; }
/* celular em pé: sem a capivara; a dica do tutorial fica centralizada */
body:not(.land) #ui#ui#ui .banner.speech { left: 50% !important; }
/* derrota no celular em pé: capivara à esquerda, faixa+estrelas+placar à direita, botões do mesmo tamanho */
body:not(.land) .modal.end.lose { display: grid !important; grid-template-columns: 34% 1fr; grid-template-areas: 'capy sub' 'capy stars' 'capy sum' 'hint hint' 'go go' 'row row'; column-gap: 3%; row-gap: calc(1.4 * var(--vh)) !important; align-items: center; padding: calc(7.4 * var(--vh)) 6% calc(3.4 * var(--vh)) !important; height: fit-content !important; }
body:not(.land) .modal.end.lose .lose-capy { grid-area: capy; width: 100% !important; height: auto !important; max-height: calc(15 * var(--vh)); object-fit: contain; justify-self: center; margin: 0 !important; }
body:not(.land) .modal.end.lose h3.ribbon.sub { grid-area: sub; justify-self: center; height: 2em !important; font-size: calc(2.8 * var(--vh)) !important; margin: 0 !important; }
body:not(.land) .modal.end.lose .stars { grid-area: stars; justify-self: center; margin: 0 !important; }
body:not(.land) .modal.end.lose .stars img { height: calc(5.4 * var(--vh)) !important; width: auto !important; }
body:not(.land) .modal.end.lose .sum { grid-area: sum; justify-self: center; margin: 0 !important; }
body:not(.land) .modal.end.lose .hint-line { grid-area: hint; width: 100% !important; margin: 0 !important; }
body:not(.land) .modal.end.lose > .btn.big { grid-area: go; width: 100% !important; height: calc(7 * var(--vh)) !important; min-height: 48px !important; margin: 0 !important; }
body:not(.land) .modal.end.lose > .btn-row { grid-area: row; width: 100% !important; display: flex; margin: 0 !important; }
body:not(.land) .modal.end.lose .btn-row > .btn { width: 100% !important; height: calc(6 * var(--vh)) !important; min-height: 44px !important; }
/* "End of day rush" no celular em pé (rodada 3): no céu, encostada à direita e acima do placar, sem cobrir bandeja, combo, balões nem máquinas; máx. 40% da largura */
body:not(.land) #ui#ui#ui .rush { top: max(6px, calc(var(--hud-top, 8px) - 1.75em - 10px)) !important; bottom: auto !important; right: calc(3 * var(--vw)) !important; left: auto !important; translate: none !important; scale: 1 !important; font-size: calc(4 * var(--vw)) !important; padding: 0.2em 0.7em 0.2em 0.9em !important; border-width: 2px !important; max-width: 40%; opacity: 0.95; }
/* botões redondos de uma peça só: o ícone já vem dentro da arte do botão (rb-*.webp), sem camada separada */
.btn.round:has(> img.bi.gi[src*="gi-gear"]), .btn.round:has(> img.bi.gi[src*="gi-sound"]), .btn.round:has(> img.bi.gi[src*="gi-back"]), .btn.round:has(> img.bi.gi[src*="gi-home"]), .btn.corner:has(> img.bi.gi), .btn.round.back { border-image: none !important; background: none !important; padding: 0 !important; filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.25)); }
.btn.round > img.bi.gi[src*="gi-gear"] { content: url(../assets/img/rb-gear.webp); }
.btn.round > img.bi.gi[src*="gi-sound"] { content: url(../assets/img/rb-sound.webp); }
.btn.round > img.bi.gi[src*="gi-back"] { content: url(../assets/img/rb-back.webp); }
.btn.round > img.bi.gi[src*="gi-home"] { content: url(../assets/img/rb-home.webp); }
.btn.round > img.bi.gi[src*="gi-gear"], .btn.round > img.bi.gi[src*="gi-sound"], .btn.round > img.bi.gi[src*="gi-back"], .btn.round > img.bi.gi[src*="gi-home"] { width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: contain; display: block; }
.btn.round.off > img.bi.gi { filter: grayscale(0.7) brightness(0.9); }
/* tela "toque para começar" */
#splash { position: absolute; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: calc(6 * var(--vh)); background: radial-gradient(circle at 50% 40%, #ffe9c4, #f7b36b 70%, #e98a45); cursor: pointer; transition: opacity 0.26s ease; touch-action: manipulation; }
#splash.out { opacity: 0; pointer-events: none; }
#splash .sp-logo { width: min(70vw, calc(52 * var(--vh)), 640px); height: auto; filter: drop-shadow(0 6px 0 rgba(58, 36, 22, 0.25)); }
#splash .sp-txt { font: 700 clamp(22px, calc(3.4 * var(--vh)), 44px) 'Fredoka', system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.14em var(--ink, #3a2416); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(58, 36, 22, 0.35); animation: sp-pulse 1.6s ease-in-out infinite; text-align: center; padding: 0 1em; }
@keyframes sp-pulse { 50% { transform: scale(1.06); } }
body.calm #splash .sp-txt { animation: none; }
/* tela final */
.finale { position: absolute; inset: 0; z-index: 150; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #ffe9c4, #f7b36b 70%, #e98a45); overflow: hidden; animation: fin-in 0.3s ease-out both; }
.fin-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: calc(1.6 * var(--vhs)); width: min(88%, 560px); max-height: 94%; padding: calc(2.4 * var(--vhs)) 5%; text-align: center; }
.fin-logo { width: min(60%, calc(26 * var(--vhs)) * 3, 360px); height: auto; filter: drop-shadow(0 4px 0 rgba(58, 36, 22, 0.25)); }
.fin-title { margin: 0; font: 700 clamp(30px, calc(6 * var(--vhs)), 64px) 'Fredoka', system-ui, sans-serif; color: #fff; -webkit-text-stroke: 0.14em var(--ink, #3a2416); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(58, 36, 22, 0.3); }
.fin-capy { height: calc(24 * var(--vhs)); max-height: 34vh; width: auto; animation: fin-bob 1.8s ease-in-out infinite; }
.fin-text { margin: 0; font: 600 clamp(16px, calc(2.6 * var(--vhs)), 28px) 'Fredoka', system-ui, sans-serif; color: #5a3416; }
.fin-row { display: flex; gap: 12px; justify-content: center; }
.fin-row .pill { font-size: clamp(20px, calc(3.4 * var(--vhs)), 36px); }
.fin-row .pill img { height: 1.3em; width: auto; }
.fin-btns { display: grid; gap: 10px; width: min(100%, 360px); }
.fin-btns .btn { width: 100%; min-height: 48px; height: calc(7 * var(--vhs)); font-size: clamp(20px, calc(3.4 * var(--vhs)), 34px); }
.fin-conf { position: absolute; top: -14px; width: 9px; height: 14px; border: 1px solid var(--ink, #3a2416); border-radius: 2px; z-index: 1; animation: fin-fall 3.2s linear infinite; }
@keyframes fin-in { from { opacity: 0; } }
@keyframes fin-bob { 50% { transform: translateY(-4px) scale(1.02); } }
@keyframes fin-fall { to { transform: translateY(110vh) rotate(540deg); } }
body.calm .fin-capy, body.calm .fin-conf { animation: none; }
@media (orientation: landscape) and (max-height: 560px) {
  .fin-card { grid-template-columns: 1fr 1fr; grid-template-areas: 'title capy' 'text capy' 'row capy' 'btns capy'; width: min(94%, 820px); column-gap: 4%; align-items: center; }
  .fin-logo { display: none; }
  .fin-title { grid-area: title; } .fin-text { grid-area: text; } .fin-row { grid-area: row; } .fin-btns { grid-area: btns; width: 100%; grid-template-columns: 1fr 1fr; }
  .fin-capy { grid-area: capy; height: auto; max-height: 70vh; max-width: 90%; }
  .fin-btns .btn { height: 44px; min-height: 44px; font-size: 18px; }
}
/* seletor de idioma: lista dos 14 idiomas dentro da janela padrão */
.modal.settings.langs .lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.modal.settings.langs .lang-grid .btn { min-width: 0; width: 100%; box-sizing: border-box; min-height: 44px; height: 44px; font-size: 18px; padding: 0 8px; }
body.land .modal.settings.langs .lang-grid { grid-template-columns: repeat(5, 1fr); grid-column: 1 / -1; grid-row: auto; }
body.land .modal.settings.langs > .btn.big { grid-column: 1 / -1; grid-row: auto; justify-self: center; width: 40%; }

.modal.end .sum { max-width: 100%; }
.modal.end .sum .pill { min-width: 0; flex: 0 1 auto; padding-left: 8px; padding-right: 8px; }

/* End of css/fit.css */