/* Página do jogo (board Game-Loading): o canvas ocupa a janela e recebe os
 * gestos (touch-action: none, senão o navegador rola e dá zoom na página); a
 * tela de carga fica por cima até a fazenda chegar. Só variáveis de
 * theme.css: a CSP não admite estilo inline. */
html, body.cr-game { height: 100%; margin: 0; overflow: hidden; }
body.cr-game { background: var(--df-bg); overscroll-behavior: none; }
.cr-game [hidden] { display: none !important; }

.cr-view { position: fixed; inset: 0; width: 100%; height: 100%; display: block;
    touch-action: none; }
.cr-ui-key { position: fixed; left: -1000px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* Tela de carga: fundo bg com os morros da marca; nada clicável enquanto carrega. */
.cr-load { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column;
    background: var(--df-bg); color: var(--df-text); }
.cr-load-main { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 24px; padding: 24px; text-align: center; }
.cr-load-mark { width: 96px; height: 96px; }
.cr-load-word { width: 260px; height: 70px; }
.cr-load-hills { display: block; flex: none; width: 100%; height: 56px; }

.cr-bar { box-sizing: border-box; width: 320px; max-width: 100%; height: 24px;
    border: var(--cr-stroke) solid var(--df-text); border-radius: 999px;
    background: var(--cr-bg-deep); overflow: hidden; }
.cr-bar i { box-sizing: border-box; display: block; width: 0; height: 100%;
    background: var(--df-accent); box-shadow: var(--cr-highlight-top);
    border-right: var(--cr-stroke) solid var(--df-text); }
/* Sem o total, a barra corre de um lado para o outro. */
.cr-bar.cr-indet i { width: 30%; animation: cr-run 1.2s ease-in-out infinite alternate; }
@keyframes cr-run { to { transform: translateX(233%); } }
.cr-load-msg { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 16px;
    line-height: 24px; font-weight: 700; }
.cr-load-msg .cr-spin { width: 18px; height: 18px; border-width: 3px; }

/* Falha de carga: a barra some, o logo fica apagado. */
.cr-load-fail { gap: 16px; }
.cr-load-fail h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.cr-load-fail p { margin: 0; color: var(--df-muted); }
.cr-off-mark { width: 56px; height: 56px; }
.cr-off-face { fill: var(--cr-off-bg); stroke: var(--df-text); stroke-width: 3px; }
.cr-off-leaf { fill: var(--cr-off-ink); stroke: var(--df-text); stroke-width: 2.5px;
    stroke-linejoin: round; }

/* Telas da conexão: o véu sobre tudo (a fazenda, o HUD e a tela de carga),
 * que toma todo toque; no meio, a pílula ou um cartão de até 380 px. */
.cr-conn { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center;
    justify-content: center; padding: 16px; background: var(--cr-veil); touch-action: none; }
.cr-conn-wait { display: inline-flex; align-items: center; gap: 8px; height: 52px; margin: 0;
    padding: 0 24px; box-sizing: border-box; background: var(--df-surface);
    border: var(--cr-stroke) solid var(--df-text); border-radius: 999px;
    box-shadow: 0 3px 0 var(--df-text); font-size: 18px; line-height: 20px; font-weight: 700; }
.cr-conn-wait .cr-spin { width: 18px; height: 18px; border-width: 3px; }
.cr-conn-card { box-sizing: border-box; max-width: 380px; }
.cr-conn-off { max-width: 360px; }
.cr-conn-card .df-btn { width: 100%; }
.cr-conn-art { display: block; flex: none; }
.cr-conn-cut { fill: none; stroke: var(--df-text); stroke-width: 3px; stroke-linecap: round; }
.cr-tab-back { fill: var(--cr-off-bg); stroke: var(--df-text); stroke-width: 3px; }
.cr-tab-front { fill: var(--df-surface); stroke: var(--df-text); stroke-width: 3px; }
.cr-tab-check { fill: none; stroke: var(--df-accent); stroke-width: 4px; stroke-linecap: round;
    stroke-linejoin: round; }

@media (max-width: 599px) {
    .cr-conn-tabs { display: none; }
    .cr-load-mark { width: 72px; height: 72px; }
    .cr-load-word { width: 200px; height: 54px; }
    .cr-bar { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .cr-bar.cr-indet i { animation: none; width: 100%; opacity: .5; }
}