/* Capy Bakery: interface por cima do canvas. Contorno marrom grosso, botões gordinhos. */
@font-face {
  font-family: 'Fredoka';
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fredoka-latin.woff2) format('woff2');
}
:root {
  --ink: #3a2416;
  --u: min(calc(1 * var(--vw)), calc(1 * var(--vh)), 8px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f6dfbf; touch-action: none; user-select: none; -webkit-user-select: none; }
body { background: transparent !important; font-family: 'Fredoka', system-ui, sans-serif; color: var(--ink); }
#game { position: fixed; inset: 0 auto 0 var(--sx, 0); width: var(--sw, 100vw); display: block; }
#ui { position: fixed; inset: 0 auto 0 var(--sx, 0); width: var(--sw, 100vw); pointer-events: none; transform: translateZ(0); }
:root { --vw: 1vw; --vh: 1vh; --vhs: 1vh; }
body::before { content: ''; position: fixed; inset: -40px; background: #f6dfbf var(--side-bg, url(../assets/img/bg-title-landscape.webp)) center / cover; filter: blur(22px) brightness(0.8); z-index: -1; } /* laterais no ultrawide */
#ui > * { pointer-events: auto; }

.btn {
  font: 600 clamp(16px, calc(2.6 * var(--vh)), 22px) 'Fredoka', sans-serif;
  color: var(--ink);
  background: linear-gradient(#fffaf0, #f6e3c4);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.55em 1.4em;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: linear-gradient(#ffe36a, #ffbf2a); }
.btn.big { font-size: clamp(22px, calc(4 * var(--vh)), 32px); padding: 0.5em 2.2em; }
.btn.round { width: 46px; height: 46px; padding: 0; font-size: 15px; letter-spacing: -2px; background: linear-gradient(#ffe36a, #ffbf2a); }

.hud {
  position: absolute; top: max(var(--hud-top, 8px), env(safe-area-inset-top)); left: 8px; right: 8px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.pill {
  display: flex; align-items: center; gap: 6px;
  font: 700 18px 'Fredoka', sans-serif;
  background: #fffaf0; border: 3px solid var(--ink); border-radius: 999px;
  padding: 5px 12px; box-shadow: 0 3px 0 var(--ink); height: 40px;
}
@media (max-width: 400px) { .pill { padding: 5px 10px; font-size: 17px; gap: 4px; } .hud { gap: 7px; } }
@media (min-width: 1000px) and (min-height: 600px) {
  .hud { gap: 14px; top: 14px; left: 14px; }
  .pill { font-size: 30px; height: 62px; padding: 6px 22px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); }
  .btn.round { width: 66px; height: 66px; font-size: 20px; }
  .pill .coin { width: 32px; height: 32px; }
  .pill img { width: 42px; height: 42px; }
}
.pill.goal { background: #c9f1a8; }
.pill.lvl { background: #ffc4dd; }
.pill .coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0 0 20%, #ffcf3a 22%); border: 2.5px solid var(--ink); }
.pill .cust { font-style: normal; font-size: 20px; }
.bump { animation: bump 0.28s ease-out; }
@keyframes bump { 30% { transform: scale(1.2); } }
.relaxed-tag { position: absolute; top: 60px; left: 12px; font: 600 13px 'Fredoka'; background: #bfe6fa; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; }

.banner {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font: 600 17px 'Fredoka'; background: #fffaf0; border: 3px solid var(--ink); border-radius: 16px;
  padding: 8px 16px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; pointer-events: none;
}
body:not(.land) .banner { bottom: auto; top: var(--banner-top, 64px); }

.modal-back { position: absolute; inset: 0; background: rgba(58, 36, 22, 0.35); display: grid; place-items: center; }
.modal {
  background: linear-gradient(#fffaf0, #f9e7c9); border: 4px solid var(--ink); border-radius: 26px;
  box-shadow: 0 6px 0 var(--ink); padding: 22px 26px; width: min(calc(88 * var(--vw)), 360px);
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center;
  animation: pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
.modal h2 { margin: 0; font-size: 28px; }
.modal h3 { margin: 0; font-size: 22px; }
.modal p { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.news-img { width: 110px; align-self: center; animation: wob 1.2s ease-in-out infinite; }
@keyframes wob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.stars { display: flex; justify-content: center; gap: 6px; font-size: 54px; }
.star { color: #e8d4b4; -webkit-text-stroke: 3px var(--ink); }
.star.on { color: #ffd23f; animation: starpop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes starpop { from { transform: scale(0); } }

.title {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255, 245, 228, 0.12); padding: 16px;
}
.title .logo { width: min(calc(86 * var(--vw)), 520px); }
.title-capy { height: min(calc(30 * var(--vh)), 320px); animation: wob 2.4s ease-in-out infinite; }
.levels h2 { font-size: 30px; margin: 0; background: #fffaf0; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 22px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.btn.day { width: 76px; height: 76px; border-radius: 20px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(#ffe9a6, #ffcf5a); }
.btn.day b { font-size: 26px; }
.btn.day span { font-size: 13px; color: #c98a14; letter-spacing: 1px; }
.btn.day.locked { filter: grayscale(0.8) opacity(0.6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* placar: carinha do cliente */
.pill img { width: 26px; height: 26px; margin: -4px 0; }
/* fim do dia: capivara saindo do cartão e faixa no título */
.modal.end { position: relative; padding-top: 74px; margin-top: 70px; overflow: visible; }
.end-capy { position: absolute; left: 50%; top: -96px; height: 150px; transform: translateX(-50%); animation: hop 0.6s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes hop { from { transform: translate(-50%, 30px) scale(0.6); opacity: 0; } }
.ribbon { align-self: center; background: linear-gradient(#ff9fc0, #f2789f); color: #fff; padding: 6px 26px; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; font-size: 26px !important; }
.modal .sum { display: flex; justify-content: center; gap: 10px; margin: 2px 0 6px; }
.stars .star.on { filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.8)); }

.modal-back:has(.end) { background: rgba(58, 36, 22, 0.18); }
.title { padding-bottom: calc(16px + min(calc(13 * var(--vh)), calc(22 * var(--vw))) * 0.9); }

/* ---- telas: título, dias, loja, ajustes, pausa, derrota ---- */
.btn.huge { font-size: clamp(30px, calc(5.4 * var(--vh)), 44px); padding: 0.32em 2.4em; letter-spacing: 1px; box-shadow: 0 6px 0 var(--ink); }
.btn.round.icon { width: 58px; height: 58px; font-size: 26px; letter-spacing: 0; background: linear-gradient(#fffaf0, #f6e3c4); display: grid; place-items: center; padding: 0; }
.icon-row { display: flex; gap: 16px; justify-content: center; }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; padding-left: 0.6em; padding-right: 0.6em; }
.modal .btn.big { font-size: 24px; }
.modal.pause, .modal.settings { position: relative; padding-top: 74px; margin-top: 70px; overflow: visible; }

/* derrota: gentil, faixa azul, sem vermelho */
.modal.lose .ribbon { background: linear-gradient(#9fd8f5, #6fb7e6); }
.modal.lose .star { color: #f1e3c9; }

/* ajustes: interruptores grandes */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; background: #fff8ea; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 14px; cursor: pointer; position: relative; }
.switch-row b { display: block; font-size: 19px; }
.switch-row small { display: block; font-size: 14px; color: #8a6a52; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row .knob { flex: none; width: 58px; height: 32px; border-radius: 99px; background: #e2d2b8; border: 3px solid var(--ink); position: relative; transition: background 0.15s; }
.switch-row .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.switch-row input:checked + .knob { background: #8bd36a; }
.switch-row input:checked + .knob::after { transform: translateX(26px); }

/* cabeçalho das telas de dias e loja */
.shop, .levels { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 12px 16px; background: rgba(255, 245, 228, 0.25); overflow-y: auto; }
.shop-head { width: min(100%, 560px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-head .ribbon { margin: 0; font-size: clamp(20px, calc(5.6 * var(--vw)), 28px) !important; white-space: nowrap; }
.levels h2.ribbon, .shop h2.ribbon { background: linear-gradient(#ff9fc0, #f2789f); color: #fff; padding: 6px 18px; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }

/* caminho dos dias: nós redondos em zigue-zague */
.path { display: flex; flex-direction: column; gap: 6px; width: min(100%, 420px); padding: 8px 0 12px; flex: 1; justify-content: center; }
.btn.node { width: 84px; height: 84px; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd25a 60%, #f2ad2a); }
.btn.node.l { align-self: flex-start; margin-left: 14%; }
.btn.node.r { align-self: flex-end; margin-right: 14%; }
.btn.node b { font-size: 30px; line-height: 1; }
.btn.node span { font-size: 13px; color: #b3700b; letter-spacing: 1px; }
.btn.node.locked { background: radial-gradient(circle at 35% 30%, #f6efe3, #ddd0bb); }
.btn.node.locked b { font-size: 24px; }
.btn.node.cur { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 8px rgba(255, 214, 70, 0.55); } }
.node-capy { position: absolute; height: 92px; right: -78px; bottom: -6px; pointer-events: none; }
.btn.node.r .node-capy { right: auto; left: -78px; }
.shop-btn { font-size: 22px; }

/* loja */
.up-list { display: flex; flex-direction: column; gap: 10px; width: min(100%, 560px); flex: 1; justify-content: center; }
.up-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(#fffaf0, #f9e7c9); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink); padding: 10px 12px; }
.up-pic { width: 64px; height: 64px; flex: none; display: grid; place-items: center; background: #ffe6bd; border: 2.5px solid var(--ink); border-radius: 16px; }
.up-pic img { max-width: 54px; max-height: 54px; }
.up-emoji { font-size: 36px; }
.up-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.up-txt b { font-size: 18px; }
.up-txt small { font-size: 13px; color: #8a6a52; }
.pips { display: flex; gap: 4px; margin-top: 3px; }
.pip { width: 16px; height: 9px; border-radius: 99px; background: #eadbc2; border: 2px solid var(--ink); }
.pip.on { background: #8bd36a; }
.btn.buy { padding: 0.4em 0.8em; display: flex; align-items: center; gap: 5px; font-size: 18px; }
.btn.buy .coin, .modal .coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0 0 20%, #ffcf3a 22%); border: 2.5px solid var(--ink); display: inline-block; }
.btn.buy.poor { filter: saturate(0.4) opacity(0.75); }
.pill.max { background: #c9f1a8; }
.shake { animation: shake 0.32s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

@media (min-width: 900px) {
  .up-list { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 860px); }
  .path { flex-direction: row; flex-wrap: wrap; width: min(100%, 900px); gap: 14px 28px; justify-content: center; align-content: center; }
  .btn.node.l, .btn.node.r { align-self: auto; margin: 0; }
  .btn.node.r { transform: translateY(26px); }
}

.btn.corner { position: absolute; top: max(14px, env(safe-area-inset-top)); width: 64px; height: 64px; font-size: 30px; }
.btn.corner.left { left: 14px; }
.btn.corner.right { right: 14px; }
.title .logo { width: min(calc(92 * var(--vw)), 560px); margin-top: 40px; filter: drop-shadow(0 6px 0 rgba(58, 36, 22, 0.25)); }
.title-capy { height: min(calc(36 * var(--vh)), 360px) !important; }
.btn.huge.play { font-size: clamp(38px, calc(7 * var(--vh)), 60px); padding: 0.22em 1.6em; border-width: 4px; }

/* ==== rodada de mockup: faixas de fita, painéis, mapa, loja ==== */
.bi { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; margin-right: 0.35em; }
.btn.round.icon .bi { width: 72%; height: 72%; margin: 0; }
.btn.round.icon { background: none; border: none; box-shadow: none; }
.btn.round.icon.off { filter: grayscale(1) opacity(0.6); }
.btn.go { background: linear-gradient(#a6e86b, #5fbf3b); color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.btn.pink { background: linear-gradient(#ffc0d6, #f48fb4); }

/* faixa de fita (imagem do Codex) com o texto por cima */
.ribbon { position: relative; align-self: center; margin: 0; padding: 0.55em 2.1em 0.9em; border: 0 !important; box-shadow: none !important; background: none !important;
  color: #fff; font-size: clamp(22px, calc(6 * var(--vw)), 30px) !important; white-space: nowrap; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.ribbon::before { content: ''; position: absolute; inset: -6px -14px -4px; background: url(../assets/img/rib-pink.webp) center / 100% 100% no-repeat; z-index: -1; }
.ribbon.blue::before { background-image: url(../assets/img/rib-blue.webp); }
.ribbon.red::before { background-image: url(../assets/img/rib-red.webp); }
.ribbon span { position: relative; }
.ribbon.small { font-size: clamp(18px, calc(4.8 * var(--vw)), 24px) !important; padding: 0.5em 1.8em 0.85em; }
.modal { isolation: isolate; }

/* capivara e amigos saindo por cima do painel */
.modal.pause, .modal.settings, .modal.end, .modal.news { position: relative; padding-top: 86px; margin-top: 84px; overflow: visible; }
.peek { position: absolute; left: 0; right: 0; top: -104px; height: 160px; pointer-events: none; }
.peek .end-capy { position: absolute; left: 50%; top: 0; height: 160px; transform: translateX(-50%); animation: hop 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.peek .friend { position: absolute; top: 46px; height: 100px; animation: hop 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.peek .friend.l { left: 8%; transform: rotate(-8deg); }
.peek .friend.r { right: 8%; transform: rotate(8deg); }
.modal.news .peek .end-capy { left: auto; right: -30px; top: auto; bottom: -330px; height: 120px; transform: none; }
.modal .hint-line { font-size: 15px; background: #fff3dc; border-radius: 12px; padding: 6px 10px; }
.modal .pill.name { align-self: center; background: #ffc4dd; font-size: 22px; }

/* estrelas da vitória com brilho atrás */
.stars { position: relative; align-items: center; min-height: 80px; }
.stars .burst { position: absolute; left: 50%; top: 50%; width: 240px; transform: translate(-50%, -50%); opacity: 0.85; animation: spin 9s linear infinite; z-index: -1; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.stars .star img { width: 64px; height: 64px; display: block; }
.stars .star:nth-child(3) img { width: 80px; height: 80px; }
.news-box { position: relative; height: 150px; display: grid; place-items: center; }
.news-box .burst { position: absolute; width: 230px; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: spin 9s linear infinite; }
.news-box .news-img { position: relative; width: 130px; }

/* ajustes */
.slider-row { display: flex; align-items: center; gap: 10px; background: #fff8ea; border: 3px solid var(--ink); border-radius: 18px; padding: 8px 12px; }
.slider-row .bi { width: 30px; height: 30px; margin: 0; }
.slider-row b { width: 58px; text-align: left; }
.slider-row input { flex: 1; accent-color: #f2b632; height: 26px; }
.lang-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; }
.lang-row .pill { background: #ffc4dd; height: 34px; font-size: 16px; }

/* cabeçalho das telas cheias */
.screen-head { position: relative; z-index: 2; width: min(100%, 900px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.screen-head .btn.round.icon { width: 56px; height: 56px; }
.coins-pill { background: #fffaf0; }

/* mapa dos dias sobre a ruazinha do Codex */
.levels { position: absolute; inset: 0; background: center / cover no-repeat; padding: max(10px, env(safe-area-inset-top)) 10px 0; display: block; overflow: hidden; }
.levels .screen-head { margin: 0 auto; }
.btn.node { position: absolute; translate: -50% -62%; transform: none; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd25a 60%, #f2ad2a); border-width: 3px; }
.btn.node b { font-size: 1.7em; line-height: 1; }
.btn.node span { position: absolute; bottom: -22px; font-size: 15px; color: #ffcb2e; -webkit-text-stroke: 1px var(--ink); white-space: nowrap; letter-spacing: -1px; }
.btn.node span i { font-style: normal; color: #f4e7d2; }
.btn.node.locked { background: radial-gradient(circle at 35% 30%, #fffaf0, #e6d6bd); }
.btn.node.locked .bi { width: 56%; height: 56%; margin: 0; }
.btn.node.cur { animation: glow 1.6s ease-in-out infinite; }
.node-capy { position: absolute; left: 88%; bottom: -8px; pointer-events: none; }
.map-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 10px 0 max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(150, 90, 40, 0.55)); }
.btn.shop-btn { font-size: 26px; padding: 0.3em 1.6em; }

/* loja */
.shop { background: url(../assets/img/bg-portrait.webp) center / cover; gap: 8px; }
body.land .shop { background-image: url(../assets/img/bg-landscape.webp); }
.board { width: min(100%, 560px); background: linear-gradient(#c98b52, #a96a37); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 4px #e3a96d;
  padding: 26px 12px 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 30px; position: relative; }
.board > .ribbon { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); }
.up-card { border-left: 10px solid var(--tint, #ffe6bd); }
.up-pic { background: var(--tint, #ffe6bd); width: 70px; height: 70px; }
.up-pic img { max-width: 60px; max-height: 60px; }
.pips em { font-style: normal; font-size: 13px; margin-left: 6px; color: #8a6a52; }
.btn.buy { font-size: 20px; padding: 0.35em 0.7em; min-width: 86px; justify-content: center; }
.shop-foot { position: relative; width: min(100%, 560px); display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: auto; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.foot-capy { height: 120px; margin-right: -14px; }
.foot-friend { height: 72px; }
.btn.huge-ish { font-size: 26px; padding: 0.35em 1.2em; white-space: nowrap; }

/* faixas de jogo */
.day-open { position: absolute; top: calc(var(--hud-top, 8px) + 58px); left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; animation: dayopen 1.9s ease-in-out both; }
@keyframes dayopen { 0% { transform: translate(-50%, -30px) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.06); opacity: 1; } 25%, 80% { transform: translate(-50%, 0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; } }
.rush { position: absolute; right: 10px; bottom: 12px; z-index: 3; pointer-events: none; font: 700 17px 'Fredoka'; color: #fff; background: linear-gradient(#ffb04a, #f08a2a); border: 3px solid var(--ink);
  border-radius: 999px; padding: 6px 14px; box-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; text-transform: uppercase; animation: rushin var(--rush-in, 0.26s) ease-out both, rush 1.2s ease-in-out var(--rush-in, 0.26s) infinite; }
@keyframes rush { 50% { transform: scale(1.05); } }
@keyframes rushin { 0% { transform: scale(var(--rush-from, 0.85)); opacity: 0; } 60% { transform: scale(var(--rush-peak, 1.06)); opacity: 1; } 100% { transform: none; opacity: 1; } }
body.calm .rush { animation: none; }
body.land .rush { bottom: auto; top: 14px; right: 14px; }

/* título */
.play-wrap { position: relative; display: grid; place-items: center; }
.play-wrap .rays { position: absolute; width: 150%; max-width: 520px; animation: spin 14s linear infinite; opacity: 0.8; pointer-events: none; }
.title .btn.corner { width: 66px; height: 66px; }

/* tutorial: fala da capivara no lugar da faixa */
.banner.speech { left: var(--sp-x, 50%); top: var(--sp-y, 64px) !important; bottom: auto; transform: none; border-radius: 18px 18px 18px 4px; font-size: 16px; max-width: calc(46 * var(--vw)); white-space: normal; }

@media (min-width: 900px) {
  .board { width: min(100%, 860px); }
  .shop-foot { width: min(100%, 860px); }
}

.play-wrap .btn { position: relative; z-index: 1; }
.play-wrap .rays { z-index: 0; width: 125%; max-width: 440px; opacity: 0.55; }
.btn.huge.play { font-size: clamp(34px, calc(5.6 * var(--vh)), 50px); padding: 0.2em 1.4em; }
.btn-row > .btn { white-space: nowrap; font-size: 18px; }
body.land .foot-capy { height: calc(30 * var(--vhs)); }
body.land .foot-friend { height: calc(16 * var(--vhs)); }
body.land .board { margin-top: calc(6 * var(--vhs)); }
body.land .shop-foot { width: min(100%, 1100px); }

.head-mid { display: flex; flex-direction: column; align-items: center; gap: 0; }
.head-logo { width: min(calc(48 * var(--vw)), 230px); margin-bottom: -6px; }
.btn.node span { font-size: 20px; bottom: -26px; color: #ffc928; -webkit-text-stroke: 0; text-shadow: 0 0 2px var(--ink), 0 2px 0 var(--ink); letter-spacing: 0; }
.btn.node span i { color: #fff3dc; }
.node-capy { left: auto; right: 82%; }
.map-foot { flex-direction: column; align-items: center; gap: 0; background: linear-gradient(transparent, rgba(120, 70, 30, 0.6) 40%); }
.map-crowd { display: flex; gap: calc(2 * var(--vw)); margin-bottom: -18px; pointer-events: none; }
.map-crowd img { height: min(calc(13 * var(--vh)), calc(24 * var(--vw))); }
body.land .map-crowd img { height: calc(15 * var(--vhs)); }

/* ==== rodada 1 do crítico de mockup ==== */
.modal-back { background: rgba(58, 36, 22, 0.45); }
.modal-back:has(.end) { background: rgba(58, 36, 22, 0.4); }
.peek .end-capy { height: 136px; top: 14px; }
.btn.round.pause-btn { display: flex; gap: 5px; justify-content: center; align-items: center; background: linear-gradient(#ffe36a, #ffbf2a); }
.pause-btn i { width: 6px; height: 18px; background: #fff; border: 2px solid var(--ink); border-radius: 3px; }
.btn.round.back { width: 56px; height: 56px; padding: 0; font-size: 30px; font-weight: 700; background: linear-gradient(#ffe36a, #ffbf2a); display: grid; place-items: center; }
.btn.corner .bi { width: 66%; height: 66%; }
.title-capy { position: relative; z-index: 2; }
.title .btn.huge.play { min-width: min(calc(78 * var(--vw)), 420px); }
.mini-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; position: relative; }
.mini-toggle .bi { width: 40px; height: 40px; margin: 0; }
.mini-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mini-toggle .knob { width: 50px; height: 28px; border-radius: 99px; background: #e2d2b8; border: 3px solid var(--ink); position: relative; }
.mini-toggle .knob::after { content: ''; position: absolute; top: 1px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); transition: transform 0.18s; }
.mini-toggle input:checked + .knob { background: #8bd36a; }
.mini-toggle input:checked + .knob::after { transform: translateX(20px); }
.icon-row { align-items: center; flex-wrap: wrap; }
.switch-row { justify-content: flex-start; }
.switch-row > span { flex: 1; }
.ri { font-style: normal; font-size: 24px; width: 30px; text-align: center; }
.lang-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.pill.lang { background: linear-gradient(#ffc0d6, #f48fb4); color: #fff; -webkit-text-stroke: 0.8px var(--ink); paint-order: stroke fill; }
.btn.node { box-shadow: 0 4px 0 var(--ink), 0 10px 0 -2px #b9773a; }
.btn.node.cur { background: radial-gradient(circle at 35% 30%, #fffbe0, #ffe36a 55%, #ffb81f); }
.levels .ribbon span { color: #fff; }

/* deitado: painéis largos e loja ocupando a tela */
body.land .modal { width: min(calc(52 * var(--vw)), 600px); }
/* telas largas: o painel inteiro cresce junto (como no mockup, ~60% da largura) */
@media (min-width: 1000px) and (min-height: 600px) { body.land .modal-back .modal { zoom: 1.4; } }
body.land .modal.end .stars .star img { width: 76px; height: 76px; }
body.land .modal.end .stars .star:nth-child(3) img { width: 92px; height: 92px; }
body.land .modal .sum .pill { white-space: nowrap; font-size: 20px; }
body.land .modal.end .btn-row > .btn, body.land .modal.end .btn.go { font-size: 20px; }
body.land .modal.end { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
body.land .modal.end > * { grid-column: 1 / -1; }
body.land .modal.end > .btn.go { grid-column: 1; }
body.land .modal.end > .btn-row { grid-column: 2; }
body.land .board { width: min(calc(64 * var(--vw)), 900px); padding: 40px 18px 18px; margin-top: calc(2 * var(--vhs)); }
body.land .shop { justify-content: flex-start; }
body.land .board > .ribbon { font-size: 34px !important; top: -42px; }
body.land .up-card { padding: 14px 16px; }
body.land .up-pic { width: 96px; height: 96px; }
body.land .up-pic img { max-width: 84px; max-height: 84px; }
body.land .up-txt b { font-size: 24px; }
body.land .up-txt small { font-size: 16px; }
body.land .btn.buy { font-size: 24px; min-width: 110px; }
body.land .shop-foot { position: absolute; left: 0; right: 0; bottom: 0; width: auto; justify-content: space-between; padding: 0 calc(3 * var(--vw)) 14px; }
body.land .shop-foot .btn.go { order: 3; font-size: 30px; }
body.land .foot-capy { height: calc(34 * var(--vhs)); order: 0; }

@media (min-width: 1000px) and (min-height: 600px) {
  body.land .board { zoom: 1.3; width: min(calc(52 * var(--vw)), 720px); }
  body.land .shop-foot .btn.go { zoom: 1.5; }
  body.land .foot-friend { height: calc(22 * var(--vhs)); }
  body.land .shop .screen-head { zoom: 1.3; }
}

/* ==== rodada 2 do crítico de mockup ==== */
.modal { border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 6px 0 var(--ink), inset 0 0 0 5px #ffd77a, inset 0 0 0 8px #fff6df; background: linear-gradient(#fffaf0, #fbe9c8); }
.btn.purple { background: linear-gradient(#d8b4ff, #a97be8); color: #fff; -webkit-text-stroke: 0.8px var(--ink); paint-order: stroke fill; }
.btn.go { background: linear-gradient(#ffe36a, #ffbf2a); color: var(--ink); -webkit-text-stroke: 0; }
.modal.end .btn.go { font-size: 26px; }
.tip-line { align-self: center; background: #d9f5c4; border: 2.5px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 600; font-size: 15px; }
.stars .star img { width: 82px !important; height: 82px !important; }
.stars .star:nth-child(3) img { width: 104px !important; height: 104px !important; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear infinite; }
@keyframes fall { to { top: 105%; transform: rotate(540deg) translateX(30px); } }
.sub-ribbon { align-self: center; margin: 0; color: #fff; background: linear-gradient(#9fd8f5, #6fb7e6); border: 3px solid var(--ink); border-radius: 12px; padding: 2px 18px; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.modal.lose .ribbon::before { background-image: url(../assets/img/rib-red.webp); }
.map-ribbon { position: relative; z-index: 2; display: table; margin: -4px auto 0 !important; font-size: clamp(24px, calc(7 * var(--vw)), 34px) !important; }
.map-ribbon span { color: #fff !important; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 3px 0 var(--ink); }
.map-foot { background: linear-gradient(transparent, rgba(120, 70, 30, 0.5) 30%); }
.map-foot .btn.shop-btn { font-size: 30px; padding: 0.25em 1.8em; border-width: 4px; }
.map-foot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(#b8763d, #8f5528); border-top: 4px solid var(--ink); z-index: -1; }
.btn.node span { font-size: 24px !important; bottom: -30px !important; }
.btn.node.cur::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(rgba(255, 220, 80, 0.75), rgba(255, 220, 80, 0) 70%); z-index: -1; animation: halo 1.4s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.18); opacity: 0.7; } }
.pip { width: 20px; height: 20px; border-radius: 50%; background: #eadbc2; }
.pip.on { background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcc2e); }
.pill.max { background: #d6cfc4; color: #fff; -webkit-text-stroke: 0.8px var(--ink); paint-order: stroke fill; }
.slider-row input { -webkit-appearance: none; appearance: none; height: 16px; border-radius: 99px; background: linear-gradient(#ffe36a, #ffbf2a); border: 2.5px solid var(--ink); }
.slider-row input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.slider-row input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
.switch-row input:checked + .knob, .mini-toggle input:checked + .knob { background: #5cc93d; }
.banner.speech::after { content: ''; position: absolute; left: -14px; bottom: 6px; border: 8px solid transparent; border-right: 10px solid var(--ink); }
.banner.speech { border-radius: 22px; }

/* título sobre o fundo com balcão: capivara em pé no balcão, PLAY embaixo */
.title { justify-content: flex-start; padding-top: max(10px, env(safe-area-inset-top)); gap: 0; background: none; }
.title .logo { margin-top: 64px; width: min(calc(88 * var(--vw)), 520px); }
.title-capy { height: min(calc(32 * var(--vh)), 330px) !important; margin-top: calc(-1 * var(--vh)); }
.title .play-wrap { margin-top: calc(5 * var(--vh)); }
body.land .title { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items: center; justify-items: center; }
body.land .title .logo { grid-column: 1 / -1; margin-top: 10px; width: min(calc(44 * var(--vw)), 560px); }
body.land .title-capy { grid-column: 1; grid-row: 2; height: min(calc(56 * var(--vhs)), 460px) !important; align-self: end; margin: 0 0 calc(2 * var(--vhs)); }
body.land .title .play-wrap { grid-column: 2; grid-row: 2; margin: 0 0 calc(22 * var(--vhs)) calc(-12 * var(--vw)); }

.play-wrap .rays { opacity: 0.35 !important; max-width: 320px !important; }
body.land .title-capy { height: min(calc(64 * var(--vhs)), 520px) !important; margin-bottom: calc(-2 * var(--vhs)); }
body.land .title .btn.huge.play { font-size: 64px; min-width: 0; }
body.land .title .play-wrap { margin: 0 0 calc(30 * var(--vhs)) calc(-14 * var(--vw)); }

/* ==== rodada 3 ==== */
.btn.green { background: linear-gradient(#a6e86b, #5fbf3b); color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.btn.ghost { background: none; border: none; box-shadow: none; font-size: 17px; color: #7a5a44; }
.modal .ribbon { font-size: clamp(28px, calc(8 * var(--vw)), 38px) !important; padding: 0.5em 2.2em 0.85em; }
.modal { border-radius: 36px; }
.set-foot { display: flex; align-items: flex-end; gap: 8px; }
.set-foot .btn { flex: 1; }
.set-capy { height: 86px; margin: -20px -6px -6px -10px; }
.map-ribbon { margin-top: 2px !important; }
.head-logo { margin-bottom: 0; }
.map-crowd img { height: min(calc(16 * var(--vh)), calc(30 * var(--vw))); }
.title .btn.huge.play { min-width: min(calc(86 * var(--vw)), 470px); font-size: clamp(44px, calc(7.4 * var(--vh)), 64px); }
.title .play-wrap::before, .title .play-wrap::after { content: '✦'; position: absolute; top: 50%; font-size: 34px; color: #ffcf2e; -webkit-text-stroke: 2px var(--ink); transform: translateY(-50%); z-index: 2; }
.title .play-wrap::before { left: -6px; }
.title .play-wrap::after { right: -6px; }
.banner.speech { font-size: 20px; padding: 10px 16px; }
body.land .up-txt b { font-size: 19px; white-space: nowrap; }
body.land .up-txt small { font-size: 14px; }
.switch-row .knob::after, .mini-toggle .knob::after { transition: transform 0.22s cubic-bezier(0.34, 1.8, 0.64, 1); }

/* ==== rodada 4: regressões ==== */
.title .btn.huge.play { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-width: min(calc(72 * var(--vw)), 400px); padding: 0.18em 0.9em; font-size: clamp(40px, calc(6.4 * var(--vh)), 58px); margin-bottom: 18px; }
.title .btn.huge.play .bi { width: 1em; height: 1em; }
@media (min-width: 1000px) and (min-height: 600px) { body.land .modal-back .modal { zoom: 1.15; } }
body.land .modal.end { padding-top: 70px; margin-top: 64px; gap: 6px; }
body.land .modal.end .stars { min-height: 64px; }
body.land .modal.end .stars .star img { width: 62px !important; height: 62px !important; }
body.land .modal.end .stars .star:nth-child(3) img { width: 78px !important; height: 78px !important; }
body.land .tip-line { display: none; }
body.land .shop-foot .btn.green { zoom: 1.6; order: 3; }
.btn.buy { font-size: 22px; min-width: 100px; }

body.land .board .up-list { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.land .board .up-card { min-width: 0; }
body.land .board .up-txt b { white-space: normal; }
body.land .board { width: min(calc(56 * var(--vw)), 760px) !important; }

.map-ribbon { isolation: isolate; }
.day-open { top: calc(var(--hud-top, 8px) + 52px) !important; font-size: 20px !important; }
/* menus vivos: botão principal respira, moedas brilham */
.modal .btn.primary.big, .btn.shop-btn, .shop-foot .btn.green, .set-foot .btn { animation: breathe 2.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.035); } }
.coins-pill .coin, .hud-coins .coin { animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0%, 80%, 100% { filter: none; } 88% { filter: brightness(1.5) drop-shadow(0 0 4px #ffe680); } }

/* ==== rodada 6 ==== */
.modal { box-shadow: 0 7px 0 var(--ink), inset 0 0 0 6px #ffcf5a, inset 0 0 0 9px #fff3d6, inset 0 0 0 11px #e7b25a; border-radius: 38px; }
.btn.primary, .btn.green, .btn.pink, .btn.purple { position: relative; overflow: hidden; }
.btn.primary::before, .btn.green::before, .btn.pink::before, .btn.purple::before { content: ''; position: absolute; left: 10%; right: 10%; top: 4px; height: 32%; border-radius: 99px; background: rgba(255, 255, 255, 0.55); pointer-events: none; }
.btn.primary::after, .btn.green::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: sweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0%, 60% { left: -40%; } 100% { left: 120%; } }
.modal .btn.big.primary { overflow: visible; }
.modal .btn.big.primary::after { display: none; }
.stars .star.off img { filter: grayscale(1) brightness(1.55) sepia(0.35); opacity: 0.85; }
.modal.lose .stars::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220px; height: 120px; transform: translate(-50%, -50%); background: radial-gradient(rgba(255, 214, 80, 0.35), transparent 70%); z-index: -1; }
.hint-line { display: flex; gap: 6px; align-items: center; justify-content: center; }
.up-card:has(.max) { background: linear-gradient(#f3eee6, #e3dbcf); }
.up-card:has(.max) .up-pic { filter: saturate(0.6); }
.pill.max { font-size: 20px; padding: 6px 18px; box-shadow: 0 3px 0 var(--ink), 0 0 0 4px rgba(255, 214, 80, 0.5); }
.board > .ribbon::before { inset: -10px -60px -6px; }
.board > .ribbon { font-size: clamp(26px, calc(7.4 * var(--vw)), 36px) !important; }
.day-open::before { background-image: url(../assets/img/rib-pink.webp); }
.day-open { opacity: 1; font-size: 22px !important; }
.switch-row input:checked + .knob::after, .mini-toggle input:checked + .knob::after { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5), 0 0 10px #c8ff9a; }
.set-capy { animation: wob 1.4s ease-in-out infinite; transform-origin: bottom center; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none !important; } }

.shop-foot .btn.green { flex: none; white-space: nowrap; }
.shop-foot { gap: 0; }
.foot-friend { height: 56px; }
.stars .star.off img { filter: grayscale(1) brightness(1.4) contrast(1.4) sepia(0.3); }

/* brilho passando só por trás do rótulo (não apaga o texto) */
.btn.primary::after, .btn.green::after { z-index: 0; opacity: 0.6; }
.btn.primary > *, .btn.green > * { position: relative; z-index: 1; }
.btn.primary, .btn.green { isolation: isolate; }
body.land .modal.end .btn-row > .btn { white-space: nowrap; font-size: 17px; padding-left: 0.4em; padding-right: 0.4em; }
body.land .modal.end { width: min(calc(60 * var(--vw)), 660px); }
.day-open::before { background-image: url(../assets/img/rib-red.webp) !important; }


/* Rodada 2 de feel and juice: botões sem brilho piscando; painéis (vitória em fade, pausa com mola suave); menos movimento */
.btn.primary::after, .btn.green::after { display: none; }
.coins-pill .coin, .hud-coins .coin { animation: none; }
@keyframes panelfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelspring { 0% { transform: scale(0.92); opacity: 0; } 50% { transform: scale(1.025); opacity: 1; } 78% { transform: scale(0.995); } 100% { transform: scale(1); opacity: 1; } }
.modal-back:has(.end) { animation: panelfade var(--panel-fade, 0.12s) linear both; }
.modal.end { animation: panelfade var(--panel-fade, 0.12s) linear both; }
.modal.pause { animation: panelspring var(--panel-spring, 0.34s) ease-out both; }
body.calm .modal.pause { animation: panelfade var(--panel-fade, 0.12s) linear both; }
body.calm .btn, body.calm .modal .btn.primary.big, body.calm .btn.shop-btn, body.calm .shop-foot .btn.green, body.calm .set-foot .btn { animation: none !important; }
body.calm .btn.node.cur, body.calm .btn.node.cur::before, body.calm .stars .burst, body.calm .news-box .burst, body.calm .news-img, body.calm .end-capy { animation: none !important; }
body.calm .stars .star.on { filter: none; }
body.calm .stars .burst, body.calm .pings { display: none; }

/* Rodada 3: faixa "End of day rush" fora de bandeja, combo, balões e máquinas: em pé: regra em fit.css (céu, acima do placar, à direita); deitado: canto de cima (ajustes.css). Máx. 40% da largura. */
.rush { max-width: 40%; box-sizing: border-box; white-space: nowrap; animation: rushin var(--rush-in, 0.28s) ease-out both !important; }
@keyframes rushin { 0% { transform: translateX(36px) scale(var(--rush-from, 0.85)); opacity: 0; } 60% { transform: translateX(-4px) scale(var(--rush-peak, 1.06)); opacity: 1; } 100% { transform: none; opacity: 1; } }
body.calm .rush { animation: none !important; }

/* Rodada 4: sem as linhas de velocidade da faixa "rush" (pareciam retângulos colados); largura: PC 22%, em pé 40%, deitado 28% */
#ui#ui#ui .rush::before { content: none !important; }
#ui#ui#ui .rush { padding-left: 0.9em !important; }
@media (orientation: landscape) and (max-height: 499.98px) { #ui#ui#ui .rush { font-size: calc(2.64 * var(--vw)) !important; } }
@media (orientation: landscape) and (min-height: 500px) and (max-height: 899.98px) { #ui#ui#ui .rush { font-size: calc(1.735 * var(--vw)) !important; } }
@media (orientation: landscape) and (min-height: 900px) { #ui#ui#ui .rush { font-size: calc(1.41 * var(--vw)) !important; } }

/* End of css/game.css */