/* Merge Farm no navegador: computador com janela larga (html.desk) → o jogo ocupa a janela inteira, deitado; janela
   estreita → o jogo em pé (proporção de celular) no centro, com céu e morros; celular → tela cheia em pé.
   Cores e fontes da marca (apps/server/src/landing.ts). */
:root {
  --soil: #4a2f16; --soil-2: #7a5a3a; --wood: #9a6232; --wood-d: #6e3f18; --hay: #fbf0cc;
  --grass: #58b332; --grass-d: #3a8a1f; --sky: #aee0ff; --sky-2: #e2f5ff; --gold: #f6b93b; --paper: #fffaf0;
  --f-d: "Baloo 2", "Fredoka", system-ui, sans-serif; --f-b: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ratio: 0.462; /* 390 × 844, a tela de referência do jogo */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--f-b); color: var(--soil);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 62%, #9ed86f 62%, #7cc653 100%);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}

/* Cenário dos lados (só enfeite) */
#mf-scene { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#mf-scene .hill { position: absolute; border-radius: 50%; }
#mf-scene .h1 { left: -20vw; right: 35vw; bottom: -38vh; height: 70vh; background: #7fcc52; }
#mf-scene .h2 { left: 30vw; right: -25vw; bottom: -44vh; height: 74vh; background: #58b332; }
#mf-scene .cloud { position: absolute; width: 180px; height: 54px; background: #fff; border-radius: 40px; opacity: .9; animation: drift 60s linear infinite; }
#mf-scene .cloud::before, #mf-scene .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
#mf-scene .cloud::before { width: 80px; height: 80px; left: 26px; top: -38px; }
#mf-scene .cloud::after { width: 64px; height: 64px; left: 88px; top: -26px; }
#mf-scene .c1 { top: 12vh; left: -200px; }
#mf-scene .c2 { top: 26vh; left: -200px; transform: scale(.7); animation-duration: 85s; animation-delay: -40s; }
#mf-scene .c3 { top: 6vh; left: -200px; transform: scale(.5); animation-duration: 110s; animation-delay: -70s; }
@keyframes drift { to { translate: calc(100vw + 400px) 0; } }

/* Coluna da marca (telas largas) */
#mf-side { position: relative; z-index: 1; width: 340px; margin-right: 48px; display: none; flex-direction: column; align-items: flex-start; }
#mf-side .lead { font: 800 22px/1.2 var(--f-d); margin: 10px 0 14px; text-shadow: 0 2px 0 rgba(255,255,255,.6); }
#mf-side .tips { list-style: none; margin: 0; padding: 14px 16px; background: rgba(255,250,240,.85); border: 3px solid #e2c48e; border-radius: 20px; box-shadow: 0 5px 0 rgba(74,47,22,.14); font-size: 14.5px; line-height: 1.45; }
#mf-side .tips li { padding: 3px 0 3px 22px; position: relative; }
#mf-side .tips li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--grass); box-shadow: 0 0 0 2px #fff; }
#mf-side .barn { width: 170px; margin: 18px 0 0 40px; filter: drop-shadow(0 6px 0 rgba(74,47,22,.18)); }
@media (min-width: 900px) and (min-height: 560px) { html:not(.mobile) #mf-side { display: flex; } }

/* Logo (placa + letras) */
.plaque { position: relative; display: block; aspect-ratio: 384 / 144; width: 100%; }
.plaque img { position: absolute; display: block; max-width: none; pointer-events: none; }
.plaque .pl-b { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.plaque .pl-l { height: auto; animation: lPop .42s cubic-bezier(.34,1.7,.6,1) both, lWave 2.6s ease-in-out infinite; animation-delay: calc(.3s + var(--k) * .07s), calc(1.2s + var(--k) * .12s); }
@keyframes lPop { 0% { scale: 0; rotate: 18deg; } 70% { scale: 1.12 .9; } 100% { scale: 1; rotate: 0deg; } }
@keyframes lWave { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4%; } }

/* O jogo em pé, centralizado, com moldura de madeira no computador */
#mf-stage { position: relative; z-index: 1; display: flex; align-items: center; }
#mf-frame {
  position: relative; overflow: hidden; background: #5aa83a;
  height: min(calc(100vh - 48px), 932px); height: min(calc(100dvh - 48px), 932px);
  width: auto; aspect-ratio: 390 / 844; max-width: calc(100vw - 32px);
  border-radius: 34px; border: 10px solid var(--wood-d);
  box-shadow: 0 0 0 3px #4a2f16, 0 14px 0 rgba(74,47,22,.28), 0 30px 60px rgba(0,0,0,.18);
}
#unity-canvas { display: block; width: 100%; height: 100%; background: #5aa83a; outline: none; touch-action: none; }
:fullscreen #mf-frame { height: calc(100vh - 24px); height: calc(100dvh - 24px); }

#mf-full {
  all: unset; box-sizing: border-box; position: absolute; right: -58px; bottom: 6px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--soil); background: var(--paper);
  border: 3px solid #e2c48e; box-shadow: 0 4px 0 rgba(74,47,22,.22); transition: transform .15s;
}
#mf-full svg { width: 22px; height: 22px; }
#mf-full:hover { transform: scale(1.08); }
#mf-full:active { transform: scale(.92); }
#mf-full:focus-visible { outline: 3px solid #1b6fd1; }
@media (max-width: 560px) { #mf-full { display: none; } } /* janela estreita: sem espaço ao lado do jogo */

/* Carregando */
#mf-loading, #mf-error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 58%, #9ed86f 58%, #7cc653 100%); text-align: center; transition: opacity .45s;
}
#mf-loading.done { opacity: 0; pointer-events: none; }
#mf-loading .plaque, #mf-error .plaque { width: min(86%, 330px); margin-bottom: 18px; }
#mf-loading .bar { width: min(80%, 300px); height: 26px; padding: 4px; border-radius: 999px; background: var(--wood-d); box-shadow: inset 0 2px 0 rgba(0,0,0,.25), 0 4px 0 rgba(74,47,22,.25); }
#mf-loading .fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, #8de05e, var(--grass) 60%, var(--grass-d)); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); transition: width .25s; min-width: 18px; }
#mf-loading .pct { font: 800 18px var(--f-d); color: var(--soil); }
#mf-loading .tip { font-size: 14px; font-weight: 700; color: var(--soil-2); min-height: 2.6em; max-width: 280px; }
#mf-error h1 { font: 800 26px var(--f-d); margin: 0; }
#mf-error p { margin: 0; font-size: 15px; line-height: 1.45; max-width: 300px; }
#mf-error .btn { margin-top: 6px; padding: 12px 26px; border-radius: 999px; background: var(--grass); color: #fff; text-decoration: none; font: 800 17px var(--f-d); border: 3px solid #fff; box-shadow: 0 5px 0 var(--grass-d); }
[hidden] { display: none !important; }

/* Celular pelo navegador: o jogo ocupa a tela inteira */
html.mobile body { display: block; background: #5aa83a; }
html.mobile #mf-scene { display: none; }
html.mobile #mf-stage { position: fixed; inset: 0; display: block; }
html.mobile #mf-frame { width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
html.mobile #mf-full { display: none; } /* celular: tela cheia no primeiro toque (Android) */
/* Computador com janela larga: o jogo na janela inteira (o próprio jogo arruma o mapa, a HUD e o painel lateral) */
html.desk body { display: block; background: #5aa83a; }
html.desk #mf-scene, html.desk #mf-side { display: none !important; }
html.desk #mf-stage { position: fixed; inset: 0; display: block; }
html.desk #mf-frame { width: 100vw; height: 100vh; height: 100dvh; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
/* Tela cheia no computador: na ponta direita da barra do jogador (o jogo deixa o lugar livre: Hud.BuildDesk). --pt = um
   ponto do jogo em CSS (altura da janela / 844, entre 0,72 e 1,35 — o mesmo de Game.ApplyScale). Mesmo visual dos botões
   redondos da barra (aro marrom, face creme). */
html.desk { --pt: clamp(.72px, calc(100vh / 844), 1.35px); }
html.desk #mf-full { position: fixed; left: auto; bottom: auto; right: calc(var(--pt) * 14); top: calc(var(--pt) * 13); width: calc(var(--pt) * 42); height: calc(var(--pt) * 42);
  border: calc(var(--pt) * 2.5) solid #8a5a2b; background: #fff3d6; color: #6b4020; box-shadow: 0 calc(var(--pt) * 2) 0 rgba(0,0,0,.22); z-index: 5; }
html.desk #mf-full svg { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }

@media (prefers-reduced-motion: reduce) { .plaque .pl-l, #mf-scene .cloud { animation: none; } }