/* =========================================================
   Mundo de Blocos 3D — versão de teste, mais simples
   (src/minigames/block-world-3d.js)
   Mesma linguagem das Trilhas da Natureza: chips escuros
   translúcidos, botões redondos e o botão de ação amarelo.
   ========================================================= */

/* `clip` (e não só `hidden`): o navegador não consegue rolar o palco ao focar um botão da bandeja,
   o que tiraria o mundo do lugar embaixo do dedo. */
.game-stage--b3 { background: #9fdcff; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; overflow: clip; }
.b3-canvas { touch-action: none; }

/* z-index 1: abaixo da barra do topo do palco (pontos, som, tela cheia, pausa, sair). */
.b3-hud {
  /* Áreas seguras (entalhe, barra de gestos): só valem na tela cheia, quando o palco encosta na borda do aparelho. */
  --sl: 0px; --sr: 0px; --sb: 0px;
  position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #f6f8ff; font-family: var(--font-body);
}
.game-stage.is-fullscreen .b3-hud { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); }
.b3-hud button, .b3-stickzone, .b3-panel { pointer-events: auto; }

/* ---------- topo ---------- */
.b3-top {
  position: absolute; top: calc(var(--stage-hud, 52px) + 4px); left: calc(6px + var(--sl)); right: calc(6px + var(--sr));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.b3-left { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.b3-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: min(62vw, 320px);
  padding: 2px 8px; border-radius: var(--r-pill); color: #f6f8ff;
  background: rgba(10,14,40,.58); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
  font: 700 .7rem/1.35 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b3-chip--place { max-width: 46vw; color: #dbe6ff; }
/* O lugar só aparece ao chegar numa terra diferente. */
.b3-chip--place.is-showing { animation: b3-place 3.8s ease both; }
@keyframes b3-place { 0% { opacity: 0; transform: translateX(-8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* Missão: fechada mostra só o ícone e o progresso; aberta (missão nova, avanço ou toque) mostra o texto. */
.b3-chip--quest { cursor: pointer; background: rgba(60,40,110,.68); border-color: rgba(255,214,90,.5); font-size: .72rem; max-width: min(64vw, 320px); }
.b3-quest__icon { flex: none; }
.b3-quest__text { overflow: hidden; text-overflow: ellipsis; max-width: 0; opacity: 0; transition: max-width .35s ease, opacity .25s ease; }
.b3-chip--quest.is-open .b3-quest__text { max-width: 280px; opacity: 1; }
.b3-chip--quest.is-open { box-shadow: 0 0 0 2px rgba(255,214,90,.35); }
.b3-chip__n { flex: none; padding: 0 6px; border-radius: var(--r-pill); background: #ffd34d; color: #3a1a00; font-size: .64rem; }
.b3-chip--test { background: rgba(34,120,80,.66); border-color: rgba(187,247,208,.5); font-size: .64rem; }
.b3-right { display: grid; gap: 4px; justify-items: end; flex: none; }
.b3-round--more { font: 800 1.1rem/1 var(--font-display); color: #fff; }
.b3-round--more.is-on { background: rgba(255,211,77,.9); color: #3a1a00; border-color: #ffe08a; }
/* Ferramentas (girar, zoom, sair): abrem do botão ⋯ e fecham sozinhas. */
.b3-tools { display: grid; gap: 4px; padding: 4px; border-radius: 22px; background: rgba(10,14,40,.45); animation: b3-tools .18s ease-out; }
@keyframes b3-tools { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.b3-round {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(10,14,40,.58); font-size: .95rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform var(--t-fast, .12s);
}
.b3-round:active { transform: scale(.94); }

/* ---------- joystick (arrastar em qualquer lugar) ---------- */
.b3-stickzone { position: absolute; inset: 0; touch-action: none; }
.b3-stick {
  position: absolute; left: calc(66px + var(--sl)); bottom: calc(120px + var(--sb)); width: 88px; height: 88px; transform: translate(-50%, 50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(10,14,40,.22); opacity: .65;
  pointer-events: none;
}
.b3-stick.is-on { bottom: auto; transform: translate(-50%, -50%); opacity: 1; }
.b3-stick__knob {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #bbf7d0 60%, #22c55e); box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* ---------- botões de ação (direita, embaixo) ---------- */
.b3-actions { position: absolute; right: calc(10px + var(--sr)); bottom: calc(64px + var(--sb)); display: grid; justify-items: end; gap: 7px; transition: bottom .2s ease; }
.b3-actions > * { margin-bottom: 0; }
.b3-act {
  width: 70px; height: 70px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 1px; cursor: pointer;
  border: 2px solid #ffe08a; color: #3a1a00;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4d 55%, #ff9a3d);
  box-shadow: 0 5px 14px rgba(255,138,61,.4);
  transition: transform var(--t-fast, .12s), filter .2s;
}
.b3-act:active { transform: scale(.93); }
.b3-act.is-dim { filter: saturate(.35) brightness(.92); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.b3-act__icon { font-size: 1.45rem; line-height: 1; }
.b3-act__label { max-width: 62px; font: 800 .58rem/1.05 var(--font-display); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3-build {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 2px 6px; cursor: pointer;
  border-radius: var(--r-pill); border: 2px solid #bbf7d0; color: #fff;
  background: radial-gradient(circle at 30% 25%, #6ee79a, #22a35a);
  box-shadow: 0 4px 10px rgba(34,163,90,.35); font: 800 .76rem var(--font-display);
  transition: transform var(--t-fast, .12s);
}
.b3-build.is-on { background: radial-gradient(circle at 30% 25%, #8fb4ff, #4f6fd8); border-color: #dbe6ff; padding: 2px 12px 2px 8px; }
/* Fechado, Construir é só o ícone; aberto, mostra "Pronto". */
.b3-build:not(.is-on) .b3-build__label { display: none; }
.b3-build:active { transform: scale(.94); }
.b3-build__icon { font-size: 1.1rem; }
.b3-side {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid #dbe6ff; cursor: pointer;
  background: radial-gradient(circle at 30% 25%, #8fb4ff, #4f6fd8); color: #fff; font: 800 1.15rem var(--font-display);
}

/* ---------- baixo: mochila e bandeja de peças ---------- */
.b3-bottom {
  position: absolute; left: calc(6px + var(--sl)); right: calc(6px + var(--sr)); bottom: 0; display: grid; gap: 4px; justify-items: center;
  /* A coluna não cresce com a fileira de peças (que rola por dentro da bandeja). */
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: calc(6px + var(--sb));
}
.b3-bag {
  display: flex; gap: 3px; padding: 3px; border-radius: 16px;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  background: rgba(10,14,40,.62); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
}
.b3-item {
  display: inline-flex; align-items: center; gap: 2px; min-width: 40px; justify-content: center;
  padding: 3px 6px; border-radius: 12px; background: rgba(255,255,255,.1); font: 800 .76rem var(--font-display);
}
.b3-item__icon { font-size: .92rem; }
.b3-item.is-bump { animation: b3-bump .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes b3-bump { 40% { transform: scale(1.28); background: rgba(255,211,77,.5); } }
.b3-tray {
  width: min(100%, 520px); padding: 4px; border-radius: 16px; pointer-events: auto;
  background: rgba(10,14,40,.72); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px);
}
.b3-tray__row { min-width: 0; display: flex; gap: 4px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2px; }
.b3-tray__row::-webkit-scrollbar { display: none; }
.b3-piece {
  flex: none; display: grid; justify-items: center; gap: 0; width: 58px; padding: 3px 2px; cursor: pointer;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff;
  transition: transform var(--t-fast, .12s), border-color .15s, background .15s;
}
.b3-piece:active { transform: scale(.94); }
.b3-piece.is-on { border-color: #ffd34d; background: rgba(255,211,77,.24); box-shadow: 0 0 0 2px rgba(255,211,77,.35); }
.b3-piece.is-poor { opacity: .5; }
.b3-piece.is-poor.is-on { opacity: .8; }
.b3-piece__icon { font-size: 1.2rem; line-height: 1.1; }
.b3-piece__name { max-width: 100%; font: 800 .56rem/1.1 var(--font-display); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b3-piece__cost { display: flex; gap: 2px; font: 700 .56rem var(--font-display); color: #fde68a; }
.b3-piece--erase { background: rgba(255,255,255,.14); }
.b3-piece--erase .b3-piece__cost { color: #bbf7d0; font-size: .5rem; }

/* ---------- avisos e "+3 🪵" ---------- */
.b3-toast {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%); max-width: min(86%, 340px);
  padding: 6px 12px; border-radius: 14px; text-align: center;
  background: rgba(10,14,40,.8); border: 2px solid #9fffe0; backdrop-filter: blur(8px);
  font: 800 .8rem var(--font-display); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.b3-toast[data-kind="quest"] { border-color: #ffd34d; box-shadow: 0 0 26px rgba(255,211,77,.45); }
.b3-toast.is-showing { animation: b3-pop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes b3-pop { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.85); } }
.b3-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.b3-float {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font: 800 1.15rem var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 10px rgba(0,0,0,.35);
  animation: b3-up 1.1s ease-out forwards;
}
@keyframes b3-up { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -240%) scale(1); } }

/* ---------- painéis ---------- */
.b3-panel {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 56px 14px 16px;
  background: rgba(6,10,26,.45); backdrop-filter: blur(3px); overflow-y: auto;
}
.b3-card {
  position: relative; width: min(100%, 380px); display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 20px 18px 18px; border-radius: 24px; color: #f6f8ff;
  background: linear-gradient(180deg, rgba(30,70,60,.95), rgba(14,30,40,.96)); border: 2px solid rgba(159,255,224,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.b3-card__close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; }
.b3-card__art { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.b3-card__title { margin: 0; font: 800 1.25rem var(--font-display); }
.b3-card__sub { margin: 0; font-size: .9rem; color: #cbe9dc; }
.b3-card__warn { margin: 0; font-size: .82rem; color: #fde68a; }
.b3-tips { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 7px; width: 100%; text-align: left; }
.b3-tips li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: .88rem; }
.b3-tips__icon { font-size: 1.4rem; flex: none; }
.b3-btn {
  width: 100%; min-height: 48px; border-radius: var(--r-pill); cursor: pointer; font: 800 1rem var(--font-display);
  border: 3px solid #ffe08a; color: #3a1a00; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4d 55%, #ff9a3d);
}
.b3-btn--ghost { border-color: rgba(255,255,255,.35); color: #f6f8ff; background: rgba(255,255,255,.1); }
.b3-btn:active { transform: scale(.97); }
.b3-quests { display: grid; gap: 6px; width: 100%; max-height: 52vh; overflow-y: auto; }
.b3-quest { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: .86rem; text-align: left; }
.b3-quest.is-done { background: rgba(134,239,172,.16); color: #dcfce7; }
.b3-quest__icon { font-size: 1.2rem; }
.b3-quest__n { font: 800 .8rem var(--font-display); color: #ffe27a; }

@media (prefers-reduced-motion: reduce) {
  .b3-float, .b3-toast.is-showing, .b3-item.is-bump { animation-duration: .01s; }
}

/* =========================================================
   Aventura, lojas, trocas e on-line
   ========================================================= */

/* ---------- topo: corações, moedas e efeitos ---------- */
.b3-status { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; max-width: 72vw; }
.b3-chip--hearts { background: rgba(120,20,50,.62); border-color: rgba(255,170,190,.45); }
.b3-chip--hearts.is-low { background: rgba(190,20,50,.8); animation: b3-low 1.2s ease-in-out infinite; }
@keyframes b3-low { 50% { box-shadow: 0 0 0 3px rgba(255,90,110,.45); } }
.b3-chip--coins { background: rgba(120,80,0,.66); border-color: rgba(255,214,90,.6); color: #fff3c4; }
.b3-chip--fx { background: rgba(60,90,160,.7); }
.is-creative .b3-chip--hearts, .is-creative .b3-chip--coins { display: none; }

/* ---------- mochila: itens tocáveis (elixir = beber) ---------- */
.b3-item { border: 0; color: inherit; cursor: default; }
.b3-item--use { cursor: pointer; background: rgba(255,122,217,.22); box-shadow: inset 0 0 0 2px rgba(255,160,230,.5); }
.b3-item--use:active { transform: scale(.94); }
.b3-bag { max-width: 100%; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
/* Recolhida (nada acontecendo): o espaço fica reservado, então os botões não pulam. */
.b3-bag.is-away { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.b3-bag::-webkit-scrollbar { display: none; }

/* ---------- bandeja: abas ---------- */
.b3-tray__tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.b3-tab {
  flex: 1; min-width: 0; min-height: 26px; padding: 2px 6px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: 800 .64rem/1.1 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b3-tab.is-on { background: #ffd34d; color: #3a1a00; border-color: #ffe08a; }

/* ---------- troca (amigo perto) ---------- */
.b3-side--trade { background: radial-gradient(circle at 30% 25%, #ffd08a, #e0892b); border-color: #ffe8bf; font-size: 1.1rem; }

/* ---------- botão de ação por tipo ---------- */
.b3-act[data-kind="attack"] { border-color: #ffb3b3; background: radial-gradient(circle at 35% 30%, #ffd6d6, #ff7a7a 55%, #e0444a); color: #3a0006; box-shadow: 0 6px 18px rgba(224,68,74,.45); }
.b3-act[data-kind="talk"] { border-color: #d9c8ff; background: radial-gradient(circle at 35% 30%, #f1eaff, #b79bff 55%, #8261e8); color: #1c0b45; box-shadow: 0 6px 18px rgba(130,97,232,.45); }
.b3-act[data-kind="factory"] { border-color: #bbf7d0; background: radial-gradient(circle at 35% 30%, #e9ffef, #6ee79a 55%, #22a35a); color: #052e16; }

/* ---------- rótulos no mundo (nomes, fábricas, vida das gosmas) ---------- */
.b3-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.b3-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(10,14,40,.62); color: #fff; font: 800 .7rem var(--font-display); will-change: transform;
}
.b3-label--npc { background: rgba(60,40,110,.75); border: 1px solid rgba(255,214,90,.5); }
.b3-label--fac { background: #ffd34d; color: #3a1a00; font-size: .8rem; box-shadow: 0 0 12px rgba(255,211,77,.7); }
.b3-label--friend { background: rgba(224,137,43,.85); }
.b3-label--hp { background: transparent; color: #ff5a6e; font-size: .62rem; letter-spacing: -1px; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding: 0; }
.b3-float--other { opacity: .75; font-size: .95rem; }
.b3-float--hit { color: #ffe27a; font-size: 1.3rem; }

/* ---------- levou um golpe ---------- */
.b3-hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 80px 30px rgba(255,40,60,.65); }
.b3-hurt.is-on { animation: b3-hurt .5s ease-out; }
@keyframes b3-hurt { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- escolha do modo ---------- */
.b3-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.b3-mode { display: grid; gap: 6px; justify-items: center; align-content: start; padding: 10px 8px; border-radius: 18px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.12); }
.b3-mode--aventura { border-color: rgba(255,170,120,.5); }
.b3-mode--criativo { border-color: rgba(159,255,224,.5); }
.b3-mode__icon { font-size: 2rem; line-height: 1; }
.b3-mode__name { font: 800 1rem var(--font-display); }
.b3-mode__desc { margin: 0; font-size: .74rem; color: #cbe9dc; min-height: 3.2em; }
.b3-btn--small { width: auto; min-height: 36px; padding: 4px 12px; font-size: .82rem; }
.b3-btn.is-poor { filter: saturate(.4); opacity: .75; }
.b3-btn:disabled { opacity: .55; cursor: default; }
.b3-spin { animation: b3-spin 2.4s ease-in-out infinite; }
@keyframes b3-spin { 50% { transform: translateY(-6px) rotate(-6deg); } }

/* ---------- painel embaixo (loja): a ilha continua aparecendo em cima ---------- */
.b3-panel--sheet { place-items: end center; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent 40%, rgba(6,10,26,.35)); backdrop-filter: none; }
.b3-card--sheet { width: min(100%, 460px); max-height: 56vh; overflow-y: auto; gap: 8px; padding: 14px 12px 12px; animation: b3-sheet .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes b3-sheet { from { transform: translateY(40px); opacity: 0; } }
.b3-card__h { margin: 4px 0 0; font: 800 .82rem var(--font-display); color: #9fffe0; justify-self: start; }

/* ---------- loja ---------- */
.b3-shop__head { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; }
.b3-shop__face { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 1.8rem; }
.b3-shop__talk { display: grid; gap: 2px; min-width: 0; }
.b3-shop__bubble { position: relative; margin: 0; padding: 6px 10px; border-radius: 14px; background: #fff; color: #1c1630; font-size: .84rem; }
.b3-shop__wallet { justify-self: end; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(120,80,0,.66); color: #fff3c4; font: 800 .82rem var(--font-display); }
.b3-shop__tabs { display: flex; gap: 6px; width: 100%; }
.b3-shop__list { display: grid; gap: 6px; width: 100%; }
.b3-shop__row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: rgba(255,255,255,.07); text-align: left; }
.b3-shop__row.is-owned { opacity: .7; }
.b3-shop__icon { flex: none; font-size: 1.5rem; width: 34px; text-align: center; }
.b3-shop__text { display: grid; flex: 1; min-width: 0; }
.b3-shop__text small { color: #cbe9dc; font-size: .7rem; }

/* ---------- mochila completa ---------- */
.b3-gear, .b3-bagfull { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; width: 100%; }
.b3-gear__item, .b3-bagfull__item { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 14px; background: rgba(255,255,255,.06); opacity: .45; font-size: .66rem; }
.b3-gear__item.is-owned, .b3-bagfull__item:not(.is-empty) { opacity: 1; }
.b3-gear__item.is-using { background: rgba(255,211,77,.22); box-shadow: inset 0 0 0 2px #ffd34d; }
.b3-gear__icon, .b3-bagfull__item > span { font-size: 1.4rem; }
.b3-gear__name { font: 800 .62rem/1.1 var(--font-display); text-align: center; }
.b3-gear__tag { color: #fde68a; }
.b3-bagfull__item small { color: #cbe9dc; text-align: center; }

/* ---------- troca ---------- */
.b3-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.b3-trade__col { display: grid; gap: 4px; align-content: start; max-height: 40vh; overflow-y: auto; }
.b3-trade__row { display: flex; align-items: center; gap: 4px; justify-content: center; }
.b3-trade__icon { width: 26px; font-size: 1.2rem; text-align: center; }
.b3-trade__n { min-width: 24px; text-align: center; font: 800 .9rem var(--font-display); }
.b3-step { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font: 800 1rem var(--font-display); cursor: pointer; }
.b3-step:disabled { opacity: .3; }
.b3-offer { margin: 0; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.08); width: 100%; font-weight: 700; }

/* ---------- golpes do pet (botões redondos acima do amarelo) ---------- */
.b3-golpes { display: flex; gap: 6px; justify-content: flex-end; }
.b3-golpe {
  --el: #ffd34d; --cd: 0deg;
  position: relative; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 0;
  border: 2px solid color-mix(in srgb, var(--el) 60%, #fff); color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--el) 35%, #fff), var(--el) 60%, color-mix(in srgb, var(--el) 70%, #000));
  box-shadow: 0 5px 14px rgba(0,0,0,.3); transition: transform var(--t-fast, .12s);
}
.b3-golpe:active { transform: scale(.92); }
.b3-golpe::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(10,14,40,.62) var(--cd), transparent 0);
}
.b3-golpe.is-cooling { filter: saturate(.55); }
.b3-golpe__icon { font-size: 1.05rem; line-height: 1; position: relative; z-index: 1; }
.b3-golpe__name {
  position: relative; z-index: 1; max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 800 .44rem/1.1 var(--font-display); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.b3-float--golpe { font-size: 1rem; color: #fff7c2; }
.b3-float--super { color: #ffe14d; font-size: 1.45rem; text-shadow: 0 0 12px rgba(255,180,0,.8), 0 2px 0 rgba(0,0,0,.4); }
.b3-float--weak { color: #c9d3e6; font-size: 1rem; }
.b3-float--dot { color: #ff9a6b; font-size: .95rem; }

/* ---------- placas das terras novas ---------- */
.b3-label--marco { background: rgba(122,82,0,.85); border: 1px solid #ffd34d; color: #fff7d6; }
.b3-act[data-kind="marco"] { border-color: #fff1b8; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd34d 55%, #d08a10); }
.b3-marco__price { font: 800 1rem var(--font-display); color: #fde68a; margin: 4px 0 10px; }
.b3-marco__price.is-poor { color: #ffb3b3; }
.b3-bob { animation: b3-spin 2s ease-in-out infinite; }

/* ---------- minimapa ---------- */
.b3-map {
  display: block; width: 60px; height: 60px; margin-top: 2px; pointer-events: auto;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.55); background: #4fb3ea; image-rendering: pixelated;
  box-shadow: 0 6px 16px rgba(0,0,0,.3); cursor: pointer; transition: width .2s ease, height .2s ease;
}
.b3-map.is-big { width: min(70vw, 260px); height: min(70vw, 260px); }
@media (max-height: 560px) { .b3-map:not(.is-big) { width: 48px; height: 48px; } }

/* ---------- construção detalhada (pecinhas) ---------- */
.b3-mini { display: grid; gap: 6px; overflow: visible; }
.b3-mini[hidden] { display: none; }
.b3-mini__shapes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.b3-mini__shapes::-webkit-scrollbar { display: none; }
.b3-piece--mini { width: 52px; }
.b3-piece--mini .b3-piece__icon { filter: drop-shadow(0 0 0 var(--sw, #fff)); }
.b3-mini__colors { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.b3-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; background: var(--sw);
  border: 3px solid rgba(255,255,255,.35); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.b3-swatch.is-on { border-color: #ffd34d; transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255,211,77,.5); }
.b3-mini__craft { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.b3-mini__count { font: 800 .85rem var(--font-display); color: #fde68a; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .b3-bob { animation: none; } }
.game-stage--b3 [hidden] { display: none !important; }

/* Telas grandes (tablet, computador): sobra espaço, os controles crescem um pouco. */
@media (min-width: 760px) and (min-height: 620px) {
  .b3-chip { font-size: .8rem; padding: 3px 10px; }
  .b3-chip--quest { font-size: .82rem; }
  .b3-round { width: 40px; height: 40px; font-size: 1.1rem; }
  .b3-act { width: 82px; height: 82px; }
  .b3-act__icon { font-size: 1.7rem; }
  .b3-act__label { max-width: 74px; font-size: .64rem; }
  .b3-golpe { width: 54px; height: 54px; }
  .b3-piece { width: 68px; padding: 5px 3px; }
  .b3-piece__icon { font-size: 1.4rem; }
  .b3-map { width: 72px; height: 72px; }
}

/* ---------- deitado (palco largo e baixo) ----------
   Botões de ação em linha no canto, ao lado da faixa de baixo — nada sobe
   por cima do minimapa —, e a faixa de baixo fica entre o joystick e eles. */
.b3-hud.is-wide .b3-right { position: relative; }
/* Deitado, as ferramentas abrem para o lado do ⋯ (a altura é pouca). */
.b3-hud.is-wide .b3-tools { position: absolute; top: 38px; right: calc(100% + 4px); display: flex; }
.b3-hud.is-short .b3-tools { top: 36px; }
.b3-hud.is-wide .b3-actions { grid-auto-flow: column; align-items: end; bottom: calc(8px + var(--sb)); }
.b3-hud.is-wide .b3-golpes { align-self: end; }
.b3-hud.is-wide .b3-bottom { right: calc(var(--actions-w, 220px) + var(--sr)); left: calc(8px + var(--sl)); justify-items: start; }
.b3-hud.is-wide .b3-tray { width: min(100%, 520px); }
.b3-hud.is-wide .b3-stick { bottom: calc(96px + var(--sb)); }
.b3-hud.is-short .b3-map:not(.is-big) { width: 48px; height: 48px; }
.b3-hud.is-short .b3-round { width: 32px; height: 32px; font-size: .9rem; }
.b3-hud.is-short .b3-act { width: 62px; height: 62px; }
.b3-hud.is-short .b3-act__icon { font-size: 1.3rem; }
@media (prefers-reduced-motion: reduce) { .b3-chip--place.is-showing, .b3-tools { animation: none; } }