/* style.css - Estilo Rústico de Fazenda, Menus Retráteis e UI Invertida */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* Fonte pixelada própria (gerada para o jogo, offline) — 1 pixel da fonte = 1/10 do tamanho: use 10px/20px/30px */
@font-face {
  font-family: 'Colheita Pixel';
  src: url('../fonts/colheita-pixel.woff') format('woff'), url('../fonts/colheita-pixel.ttf') format('truetype');
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #1e2912;
  font-family: 'Outfit', sans-serif;
  color: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: 1024px;
  height: 640px;
  background: #000;
  border: 4px solid #452b1b;
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

canvas#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

/* --- HUD SUPERIOR (Rústico de Madeira, Retangular Simples) --- */
#top-hud {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.hud-panel {
  background: #3e2719;
  border: 2px solid #6d4327;
  border-radius: 4px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* HUB de Perfil Unificado com Recursos na Base */
.hud-profile-unified {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px 10px;
  min-width: 195px;
}

.hud-resources-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(18, 10, 6, 0.7);
  border: 1px solid #5a3720;
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 2px;
}

.hud-stat-divider {
  width: 1px;
  height: 14px;
  background: #5a3720;
}

.hud-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.coin-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #facc15;
  color: #713f12;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 800;
  border: 1.5px solid #ca8a04;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.coin-val { color: #facc15; font-weight: 700; font-size: var(--fs-sm); }
.gem-val { color: #38bdf8; font-weight: 700; font-size: var(--fs-sm); }

.level-badge {
  background: #16a34a;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  font-size: var(--fs-sm);
}

.xp-bar-container {
  width: 90px;
  height: 6px;
  background: #1e130c;
  border: 1px solid #6d4327;
  border-radius: 2px;
  overflow: hidden;
}

.xp-bar-fill {
  width: 20%;
  height: 100%;
  background: #4ade80;
}

/* Dica de Câmera com Badge ! */
#camera-hint {
  position: absolute;
  top: 60px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 27, 16, 0.9);
  border: 1px solid #6d4327;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  z-index: 20;
}

/* --- DOCK INFERIOR INVERTIDO (Categorias em Baixo, Subopções Abrem em Cima) --- */
#tool-dock {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* Painel Superior (Subopções da Categoria) - Abre e Fecha */
#action-items-container {
  display: none; /* Controlado via JS com toggle */
  gap: 6px;
  background: #2d1c13;
  padding: 6px 8px;
  border: 2px solid #5a3720;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}

#action-items-container.open {
  display: flex;
}

/* Barra Principal de Gestão da Fazenda (Dock Hub) */
#farm-hub-dock {
  display: flex;
  gap: 8px;
  background: linear-gradient(180deg, #3e2719, #2b170e);
  padding: 6px 10px;
  border: 2px solid #6d4327;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}

.dock-hub-btn {
  background: linear-gradient(180deg, #4a2e1d, #331d10);
  border: 1.5px solid #6d4327;
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 62px;
  min-height: 48px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Telas estreitas: 6 botões no dock (Milestone 2 adicionou o Arquiteto) cabem sem cortar as pontas */
/* html.is-phone (antes (max-width: 560px)) */
  html.is-phone #farm-hub-dock { gap: 4px; padding: 5px 6px; max-width: calc(100vw - 24px); box-sizing: border-box; }
  html.is-phone .dock-hub-btn { padding: 5px 4px; min-width: 0; flex: 1 1 0; font-size: var(--fs-xs); min-height: 44px; }
  html.is-phone .dock-btn-icon { font-size: 16px; }
  html.is-phone .dock-sub-info { font-size: var(--fs-xs); }


.dock-hub-btn:hover {
  background: linear-gradient(180deg, #5c3924, #442616);
  border-color: #facc15;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(250, 204, 21, 0.3);
}

.dock-hub-btn:active {
  transform: translateY(0);
}

.dock-btn-icon {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.dock-btn-label {
  font-size: var(--fs-sm);
  letter-spacing: 0.3px;
}

.dock-sub-info {
  font-size: var(--fs-xs);
  color: #fef08a;
  font-weight: 800;
}

.tool-btn {
  background: #3a2215;
  border: 1px solid #6d4327;
  border-radius: 4px;
  color: #f8fafc;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: 2px;
}

.tool-btn:hover {
  background: #533220;
}

.tool-btn.active {
  background: #eab308;
  border-color: #fff;
  color: #1e130c;
  box-shadow: 0 0 8px #facc15;
}

/* Estado de Ação Bloqueada no Vizinho (Avermelhado e com Cadeado) */
.tool-btn.locked {
  background: #451a1a !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  opacity: 0.85;
  position: relative;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.tool-btn.locked:hover {
  background: #5c1d1d !important;
  border-color: #f87171 !important;
}

.tool-btn.locked .lock-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: var(--fs-sm);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

.tool-icon {
  font-size: 18px;
}

/* --- GAVETA LATERAL DIREITA DE VIZINHOS (ABRE E RECOLHE) --- */
#friends-sidebar {
  position: absolute;
  top: 70px;
  right: 0;
  display: flex;
  align-items: flex-start;
  z-index: 50;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(calc(100% - 32px)); /* Recolhido por padrão */
}

#friends-sidebar.open {
  transform: translateX(0); /* Aberto para a esquerda */
}

/* Aba do botão de abrir/fechar */
#btn-toggle-friends {
  background: #3e2719;
  border: 2px solid #6d4327;
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: #fef08a;
  padding: 12px 6px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  box-shadow: -3px 4px 8px rgba(0, 0, 0, 0.5);
}

#btn-toggle-friends:hover {
  background: #533220;
}

/* Corpo do painel de amigos */
#friends-panel {
  background: #2d1c13;
  border: 2px solid #6d4327;
  border-radius: 0 0 0 8px;
  width: 280px;
  max-height: calc(100vh - 120px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  box-shadow: -6px 8px 20px rgba(0, 0, 0, 0.7);
}

.friend-card {
  background: #3a2215;
  border: 1px solid #5a3720;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
  overflow: visible;
}

.friend-card:hover {
  background: #4e2e1c;
  border-color: #854d0e;
}

.friend-card.active-visit {
  border-color: #ef4444;
  background: #7f1d1d;
}

.friend-avatar {
  font-size: 24px;
  min-width: 28px;
  text-align: center;
  user-select: none;
}

.friend-info {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  flex: 1;
  min-width: 0; /* Permite text-overflow em flex child */
  overflow: hidden;
}

.friend-info strong {
  color: #fef08a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.friend-info span {
  color: #94a3b8;
  font-size: var(--fs-sm);
}

/* --- BOTÃO DE RETORNO NO HUD SUPERIOR --- */
.btn-home-top {
  background: linear-gradient(180deg, #15803d, #14532d);
  border: 1.5px solid #4ade80;
  color: #f0fdf4;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.15s ease;
  pointer-events: auto;
  animation: pulse-return-btn 2.5s infinite;
}

.btn-home-top:hover {
  background: linear-gradient(180deg, #16a34a, #15803d);
  border-color: #86efac;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(74, 222, 128, 0.4);
}

@keyframes pulse-return-btn {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
}

/* --- TRANSIÇÃO DE NUVENS (ESTILO CLASH OF CLANS) --- */
.cloud-transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  display: none;
  overflow: hidden;
}

.cloud-transition-overlay.active {
  display: block;
  pointer-events: auto;
}

.cloud-curtain {
  position: absolute;
  top: 0;
  width: 65%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #e2e8f0 70%, #cbd5e1 100%);
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
}

.curtain-left {
  left: 0;
  transform: translateX(-100%);
  border-radius: 0 40% 40% 0;
}

.curtain-right {
  right: 0;
  transform: translateX(100%);
  border-radius: 40% 0 0 40%;
}

/* Nuvens fofas sobrepostas na borda da cortina */
.cloud-puff {
  position: absolute;
  background: #f8fafc;
  border-radius: 50%;
  box-shadow: inset -5px -5px 15px rgba(148, 163, 184, 0.3);
}

.curtain-left .p1 { width: 140px; height: 140px; top: 10%; right: -50px; }
.curtain-left .p2 { width: 180px; height: 180px; top: 40%; right: -70px; }
.curtain-left .p3 { width: 150px; height: 150px; bottom: 10%; right: -50px; }

.curtain-right .p4 { width: 150px; height: 150px; top: 15%; left: -50px; }
.curtain-right .p5 { width: 200px; height: 200px; top: 42%; left: -80px; }
.curtain-right .p6 { width: 160px; height: 160px; bottom: 8%; left: -60px; }

.cloud-center-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  background: rgba(30, 17, 10, 0.95);
  border: 2px solid #eab308;
  padding: 12px 28px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 1000;
  transition: all 0.35s ease;
}

.cloud-plane-icon {
  font-size: 26px;
  animation: plane-fly 1.2s ease-in-out infinite alternate;
}

.cloud-travel-text {
  font-size: 14px;
  font-weight: 800;
  color: #fef08a;
  letter-spacing: 0.5px;
}

@keyframes plane-fly {
  0% { transform: translateY(0px) rotate(-5deg); }
  100% { transform: translateY(-4px) rotate(5deg); }
}

/* Estados da animação: Nuvem Fechada (Cobrindo a tela) */
.cloud-transition-overlay.closed .curtain-left {
  transform: translateX(0);
}

.cloud-transition-overlay.closed .curtain-right {
  transform: translateX(0);
}

.cloud-transition-overlay.closed .cloud-center-banner {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* --- MODAIS RÚSTICOS SIMPLES --- */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-box {
  background: #3e2719;
  border: 3px solid #6d4327;
  border-radius: 4px;
  padding: 20px;
  width: 520px;
  max-width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#upgrades-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #5a3720;
  padding-bottom: 8px;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #fef08a;
}

.close-btn {
  background: #b91c1c;
  border: 1px solid #ef4444;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: bold;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.shop-item {
  background: #2a180e;
  border: 1.5px solid #5a3720;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, transform 0.15s;
}

.shop-item:hover {
  border-color: #854d0e;
}

.shop-item-btn {
  background: #15803d;
  border: 1px solid #4ade80;
  border-radius: 4px;
  color: #fff;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shop-item-btn:hover:not(:disabled) {
  background: #16a34a;
  box-shadow: 0 2px 6px rgba(74, 222, 128, 0.3);
  transform: translateY(-1px);
}

.shop-item-btn:active:not(:disabled) {
  transform: translateY(0);
}

/* --- ESTILOS DO MERCADO REESTRUTURADO --- */
.market-modal-box {
  width: 580px !important;
  max-width: 95vw;
}

.market-tabs-nav {
  display: flex;
  background: #23130b;
  border: 1px solid #5a3720;
  border-radius: 6px;
  padding: 3px;
  gap: 4px;
}

.market-subtabs-nav {
  display: flex;
  background: rgba(18, 9, 5, 0.6);
  border: 1px solid #4a2816;
  border-radius: 5px;
  padding: 2px;
  gap: 4px;
  margin-bottom: 4px;
}

.market-subtab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #94a3b8;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.market-subtab-btn:hover {
  color: #fef08a;
  background: rgba(254, 240, 138, 0.05);
}

.market-subtab-btn.active {
  background: #452414;
  color: #fef08a;
  border: 1px solid #ca8a04;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.market-subpanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Botão de Ferramenta Comprada (Efeito de Botão Pressionado / Afundado) */
.btn-tool-bought {
  background: #1c130d !important;
  color: #94a3b8 !important;
  border: 1.5px solid #3d2214 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  transform: translateY(1px) !important;
  cursor: default !important;
  opacity: 0.85;
}

.btn-tool-bought:hover {
  background: #1c130d !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  transform: translateY(1px) !important;
}

.market-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #94a3b8;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.market-tab-btn:hover {
  color: #fef08a;
  background: rgba(254, 240, 138, 0.05);
}

.market-tab-btn.active {
  background: linear-gradient(180deg, #5a3720, #3e2617);
  color: #fef08a;
  border: 1px solid #eab308;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.market-tab-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.market-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #5a3720;
  padding-bottom: 4px;
}

.market-section-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #fef08a;
  letter-spacing: 0.3px;
}

.market-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.market-sell-header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 10, 6, 0.5);
  border: 1px solid #5a3720;
  border-radius: 4px;
  padding: 6px 10px;
}

/* Card compacto e detalhado de Sementes e Ferramentas */
.market-crop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.market-crop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.market-crop-title {
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 5px;
}

.market-crop-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(15, 8, 4, 0.6);
  border: 1px solid #4a2816;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: var(--fs-sm);
}

.market-stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
}

.market-stat-item strong {
  color: #fef08a;
}

/* --- BADGE DE INFORMAÇÃO / AJUDA (CÍRCULO COM PONTO DE !) --- */
.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: #0284c7;
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 800;
  font-family: monospace, sans-serif;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.info-badge:hover {
  background: #0369a1;
  transform: scale(1.15);
}

/* Tooltip flutuante ativado ao hover ou foco */
/* Oculta os tooltips filhos locais para evitar que fiquem presos dentro de overflow: hidden ou empilhamento de z-index */
.info-badge .info-tooltip {
  display: none !important;
}

/* --- BALÃO INFORMATIVO GLOBAL PORTAL (RENDERIZADO NO TOPO DE TUDO NO GAME-CONTAINER) --- */
.global-floating-tooltip {
  position: absolute;
  z-index: 999999;
  width: 230px;
  background: #1e130c;
  color: #f1f5f9;
  text-align: left;
  border: 1.5px solid #d97706;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  font-weight: normal;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95);
  box-sizing: border-box;
}

/* Setinha do balão global */
.global-floating-tooltip::after {
  content: "";
  position: absolute;
  border-width: 6px;
  border-style: solid;
}

/* Setinha apontando para cima (quando o balão fica abaixo do ícone) */
.global-floating-tooltip.arrow-top::after {
  bottom: 100%;
  left: var(--arrow-left, 20px);
  border-color: transparent transparent #d97706 transparent;
}

/* Setinha apontando para baixo (quando o balão fica acima do ícone) */
.global-floating-tooltip.arrow-bottom::after {
  top: 100%;
  left: var(--arrow-left, 20px);
  border-color: #d97706 transparent transparent transparent;
}

/* Menu Dropdown de Perfil */
.profile-menu-item:hover {
  background: #4a2f1c !important;
}



/* =====================================================================
   PELE "STARDEW" — molduras de madeira, interior de pergaminho, fonte pixelada.
   Camada de sobreposição: mantém todos os IDs/ganchos de JS; só restiliza.
   A fonte pixelada fica nítida em múltiplos de 10px (10px = texto miúdo, 20px = títulos).
   ===================================================================== */
:root {
  color-scheme: light dark; /* "já cuido do escuro": o navegador não escurece o jogo sozinho (ver index.html) */
  --px-out: #2b1d14;
  --wood-0: #e0ac6a; --wood-1: #c98a4b; --wood-2: #b5753c; --wood-3: #8c5523; --wood-4: #5e3a1a;
  --parch: #f3e3b8; --parch-hi: #fff3d0; --parch-2: #ead2a0; --parch-3: #d9bd84; --parch-line: #c9a66b;
  --ink: #4a2e1a; --ink-soft: #7a5636; --ink-faint: #9a7a52;
  --gold: #9a6a0c; --leaf: #3e7a2c; --sky: #2a6f9a; --berry: #a3352c;
  /* cor de TEXTO das cores de destaque (no tema escuro ficam mais claras para ler no fundo escuro) */
  --gold-t: var(--gold); --leaf-t: var(--leaf); --sky-t: var(--sky); --berry-t: var(--berry);
  --pixel-font: 'Colheita Pixel', 'VT323', 'Courier New', monospace;
}

body {
  background-color: #17210f;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 4px, transparent 4px 8px),
    radial-gradient(circle at 50% 40%, #2a3a1a 0%, #121a0b 75%);
  font-family: var(--pixel-font);
  -webkit-font-smoothing: none;
  font-smooth: never;
}
#game-container, #game-container button, #game-container input, #game-container select, #game-container textarea {
  font-family: var(--pixel-font);
}
#game-container {
  border: 4px solid var(--px-out);
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--wood-3), 0 0 0 6px var(--wood-1), 0 0 0 10px var(--px-out), 0 18px 40px rgba(0,0,0,0.8);
  background: #2f5f24;
}
/* Botões e campos sem cor própria usam a tinta do tema (e não o padrão do navegador, que fica branco
   quando o aparelho está no modo escuro). :where() = especificidade zero: qualquer regra com cor ganha. */
:where(#game-container) :where(button, select, textarea, input) { color: var(--ink); }
#game-container ::-webkit-scrollbar { width: 10px; height: 10px; }
#game-container ::-webkit-scrollbar-track { background: var(--parch-2); border-left: 2px solid var(--parch-line); }
#game-container ::-webkit-scrollbar-thumb { background: var(--wood-2); border: 2px solid var(--px-out); }

/* ---------- Moldura padrão (madeira + pergaminho) ---------- */
.hud-panel, .modal-box, #friends-panel, .auth-card, #player-architect-toolbar, #profile-dropdown-menu,
.global-floating-tooltip, #camera-hint, #action-items-container {
  background: var(--parch) !important;
  color: var(--ink) !important;
  border: 3px solid var(--px-out) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 0 0 3px var(--wood-2),
    inset 0 0 0 6px var(--wood-3),
    inset 0 0 0 8px var(--wood-4),
    inset 0 0 0 10px var(--px-out),
    inset 0 12px 0 0 var(--parch-hi),
    5px 5px 0 rgba(20, 10, 4, 0.45) !important;
}
.modal-box { padding: 22px 24px !important; gap: 12px !important; font-size: var(--fs-sm); }

/* ---------- HUD do jogador ---------- */
.hud-panel { padding: 14px 16px 12px !important; font-size: var(--fs-sm); font-weight: normal; }
#hud-player-name { color: var(--ink) !important; font-size: 20px !important; font-weight: normal !important; text-shadow: 1px 1px 0 var(--parch-hi); }
#hud-farm-id-badge {
  background: var(--parch-2) !important; color: var(--sky-t) !important; border: 2px solid var(--parch-line) !important;
  border-radius: 0 !important; font-size: var(--fs-sm) !important; font-weight: normal !important; padding: 2px 6px !important;
}
#hud-visiting-tag { border-radius: 0 !important; font-size: var(--fs-sm) !important; font-weight: normal !important; background: var(--berry) !important; color: #fff3d0 !important; border: 2px solid var(--px-out) !important; }
#hud-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--parch-2); border: 2px solid var(--px-out); box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3);
  filter: none !important; font-size: 24px !important;
}
.level-badge {
  background: var(--leaf); color: #fff3d0; border: 2px solid var(--px-out); border-radius: 0; font-size: var(--fs-sm); padding: 1px 5px;
  box-shadow: inset 0 2px 0 #5a9a3a; font-weight: normal;
}
.xp-bar-container { width: 110px; height: 10px; background: var(--wood-4); border: 2px solid var(--px-out); border-radius: 0; }
.xp-bar-fill { background: #78b84a; box-shadow: inset 0 2px 0 #9bd35a, inset 0 -2px 0 #3e7a2c; }
.hud-resources-row {
  background: var(--parch-2) !important; border: 2px solid var(--parch-line) !important; border-radius: 0 !important;
  box-shadow: inset 2px 2px 0 var(--parch-3); padding: 4px 8px !important; margin-top: 4px !important;
}
.hud-stat-divider { background: var(--parch-line); width: 2px; height: 16px; }
.coin-icon-badge { background: transparent; border: none; box-shadow: none; width: auto; height: auto; font-size: 16px; }
.coin-val { color: var(--gold-t); font-size: 20px; font-weight: normal; }
.gem-val { color: var(--sky-t); font-size: 20px; font-weight: normal; }
.btn-home-top {
  border-radius: 0; border: 3px solid var(--px-out); background: var(--leaf); color: #fff3d0; font-size: var(--fs-sm); font-weight: normal;
  box-shadow: inset 0 3px 0 #5a9a3a, inset 0 -3px 0 #2f5f24, 4px 4px 0 rgba(20,10,4,0.45); text-shadow: 1px 1px 0 var(--px-out);
  animation: none;
}
.btn-home-top:hover { background: #4f8f33; transform: translateY(-2px); box-shadow: inset 0 3px 0 #78b84a, inset 0 -3px 0 #2f5f24, 4px 6px 0 rgba(20,10,4,0.45); }
.info-badge {
  border-radius: 0; background: var(--sky); border: 2px solid var(--px-out); font-family: var(--pixel-font); font-size: var(--fs-sm); font-weight: normal;
  box-shadow: inset 0 2px 0 #5aa0cc; width: 18px; height: 18px; min-width: 18px; min-height: 18px;
}
.info-badge:hover { transform: none; background: #3a86b5; }
.global-floating-tooltip { padding: 14px 16px !important; font-size: var(--fs-sm); line-height: 1.5; }
.global-floating-tooltip.arrow-top::after { border-color: transparent transparent var(--px-out) transparent; }
.global-floating-tooltip.arrow-bottom::after { border-color: var(--px-out) transparent transparent transparent; }

/* ---------- Barra de ferramentas inferior (estilo hotbar) ---------- */
#farm-hub-dock {
  background: var(--wood-3);
  border: 3px solid var(--px-out);
  border-radius: 0;
  padding: 8px 10px;
  gap: 6px;
  box-shadow: inset 0 3px 0 var(--wood-1), inset 0 -3px 0 var(--wood-4), inset 3px 0 0 var(--wood-2), inset -3px 0 0 var(--wood-4), 5px 5px 0 rgba(20,10,4,0.45);
}
.dock-hub-btn, .tool-btn {
  background: var(--parch);
  border: 2px solid var(--px-out);
  border-radius: 0;
  color: var(--ink);
  font-weight: normal;
  box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3);
  min-width: 70px; min-height: 58px; padding: 4px 8px;
  transition: transform 0.08s steps(2);
}
.dock-hub-btn:hover, .tool-btn:hover {
  background: #fff0c4; border-color: var(--px-out); color: var(--ink); transform: translateY(-3px);
  box-shadow: inset 2px 2px 0 #fffbe8, inset -2px -2px 0 var(--parch-3), 0 3px 0 var(--wood-4);
}
.dock-hub-btn:active, .tool-btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 var(--parch-3), inset -2px -2px 0 var(--parch-hi); }
.dock-btn-icon, .tool-icon { font-size: 20px; filter: drop-shadow(2px 2px 0 rgba(43,29,20,0.35)); line-height: 1; }
.dock-btn-label { font-size: var(--fs-sm); letter-spacing: 0; color: var(--ink); }
.dock-sub-info { font-size: var(--fs-sm); color: var(--gold-t); font-weight: normal; }
#dock-mail-badge { border-radius: 0 !important; border: 2px solid var(--px-out) !important; background: var(--berry) !important; font-weight: normal !important; box-shadow: none !important; }
.tool-btn { width: 58px; height: 58px; font-size: var(--fs-sm); }
.tool-btn.active { background: #f6d55c; border-color: var(--px-out); color: var(--ink); box-shadow: inset 2px 2px 0 #fff3a6, inset -2px -2px 0 #c99a20, 0 0 0 3px #fff3d0; }
.tool-btn.locked { border-radius: 0 !important; background: #e8b4a8 !important; border-color: var(--px-out) !important; color: var(--berry-t) !important; box-shadow: inset 2px 2px 0 #f6d0c6 !important; }
#action-items-container { padding: 14px !important; gap: 6px; }

/* ---------- Gaveta de vizinhos ---------- */
#btn-toggle-friends {
  background: var(--wood-3); color: #fff3d0; border: 3px solid var(--px-out); border-radius: 0; font-size: var(--fs-sm); font-weight: normal;
  text-shadow: 1px 1px 0 var(--px-out); padding: 14px 8px;
  box-shadow: inset 3px 0 0 var(--wood-1), inset -3px 0 0 var(--wood-4), -4px 4px 0 rgba(20,10,4,0.4);
}
#btn-toggle-friends:hover { background: var(--wood-2); }
#friends-panel { padding: 18px !important; font-size: var(--fs-sm); }
.friend-card {
  background: var(--parch-2); border: 2px solid var(--parch-line); border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--parch-hi);
}
.friend-card:hover { background: #f6e6bc; border-color: var(--wood-3); }
.friend-card.active-visit { background: #f2c7bd; border-color: var(--berry); }
.friend-info { font-size: var(--fs-sm); }
.friend-info strong { color: var(--ink); font-weight: normal; font-size: var(--fs-sm); }
.friend-info span { color: var(--ink-soft); font-size: var(--fs-sm); }
#input-search-friend { font-size: var(--fs-sm) !important; }
#friends-panel input, .modal-box input, .modal-box select, .modal-box textarea, .auth-card input, .auth-card select {
  background: #fffaf0 !important; color: var(--ink) !important; border: 2px solid var(--px-out) !important; border-radius: 0 !important;
  box-shadow: inset 2px 2px 0 var(--parch-3) !important; font-size: var(--fs-sm) !important; outline: none;
}
#friends-panel input:focus, .modal-box input:focus, .auth-card input:focus { box-shadow: inset 2px 2px 0 var(--parch-3), 0 0 0 2px #f6d55c !important; }
#game-container input::placeholder { color: var(--ink-faint); }
#tab-sidebar-my-friends, #tab-sidebar-radar-results, #tab-mailbox-inbox, #tab-mailbox-admin { font-weight: normal !important; font-size: var(--fs-sm) !important; }

/* ---------- Modais ---------- */
.modal-overlay { background: rgba(23, 14, 6, 0.62); }
.modal-header { border-bottom: 2px dashed var(--parch-line); padding-bottom: 10px; }
.modal-title { font-size: 20px; color: var(--ink); font-weight: normal; text-shadow: 2px 2px 0 var(--parch-hi); }
.close-btn {
  width: 30px; height: 30px; border-radius: 0; border: 2px solid var(--px-out); background: #c9453a; color: #fff3d0;
  font-size: var(--fs-sm); font-weight: normal; box-shadow: inset 2px 2px 0 #de6a5a, inset -2px -2px 0 #8e2f27; text-shadow: 1px 1px 0 var(--px-out);
}
.close-btn:hover { background: #d9564a; }
.shop-grid { gap: 10px; }
.shop-item {
  background: var(--parch-2); border: 2px solid var(--parch-line); border-radius: 0; font-size: var(--fs-sm); color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3), 2px 2px 0 rgba(43,29,20,0.18);
}
.shop-item:hover { border-color: var(--wood-3); }
.market-crop-title { color: var(--ink); font-weight: normal; font-size: 20px; }
.market-crop-stats, .market-sell-header-info {
  background: rgba(255, 243, 208, 0.6) !important; border: 2px solid var(--parch-line) !important; border-radius: 0 !important; font-size: var(--fs-sm);
}
.market-stat-item { color: var(--ink-soft); }
.market-stat-item strong { color: var(--ink); font-weight: normal; }
.market-section-title { color: var(--ink); font-weight: normal; font-size: var(--fs-sm); }
.market-seed-badge { border-radius: 0 !important; border-width: 2px !important; font-weight: normal !important; }

.shop-item-btn, #btn-barn-sell-everything {
  border: 2px solid var(--px-out) !important;
  border-radius: 0 !important;
  font-size: var(--fs-sm) !important;
  font-weight: normal !important;
  color: #fff7e0 !important;
  text-shadow: 1px 1px 0 var(--px-out), -1px 0 0 rgba(43,29,20,0.4);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.28), 2px 2px 0 rgba(43,29,20,0.35) !important;
  transition: transform 0.08s steps(2);
}
.shop-item-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255,255,255,0.32), inset 0 -3px 0 rgba(0,0,0,0.28), 2px 4px 0 rgba(43,29,20,0.35) !important; }
.shop-item-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 3px 0 rgba(0,0,0,0.25) !important; }
.shop-item-btn:disabled { filter: grayscale(0.4); }
.btn-tool-bought { background: var(--parch-3) !important; color: var(--ink-soft) !important; border: 2px solid var(--parch-line) !important; text-shadow: none !important; }

.market-tabs-nav, .market-subtabs-nav {
  background: var(--wood-3) !important; border: 2px solid var(--px-out) !important; border-radius: 0 !important; padding: 4px !important;
  box-shadow: inset 0 2px 0 var(--wood-1), inset 0 -2px 0 var(--wood-4);
}
.market-tab-btn, .market-subtab-btn {
  border-radius: 0; color: #f3e3b8; font-weight: normal; font-size: var(--fs-sm); text-shadow: 1px 1px 0 var(--px-out); border: 2px solid transparent;
}
.market-tab-btn:hover, .market-subtab-btn:hover { color: #fff3d0; background: rgba(255, 243, 208, 0.12); }
.market-tab-btn.active, .market-subtab-btn.active {
  background: var(--parch) !important; color: var(--ink) !important; border: 2px solid var(--px-out) !important; text-shadow: none;
  box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3) !important;
}
.market-tab-btn { font-size: 20px; }

.cat-tab {
  background: var(--parch-2); color: var(--ink-soft); border: 2px solid var(--px-out); border-radius: 0; cursor: pointer;
  font-size: var(--fs-sm) !important; box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3);
}
.cat-tab.active { background: #f6d55c; color: var(--ink); box-shadow: inset 2px 2px 0 #fff3a6, inset -2px -2px 0 #c99a20; }



/* Menu de perfil e toolbars */
#profile-dropdown-menu { padding: 10px !important; }
#profile-dropdown-menu > div:first-child { background: var(--parch-2) !important; border-bottom: 2px dashed var(--parch-line) !important; }
.profile-menu-item { color: var(--ink) !important; font-size: var(--fs-sm) !important; border-bottom: 2px dashed var(--parch-2) !important; }
.profile-menu-item:hover { background: #f6d55c !important; }
#menu-btn-logout { color: var(--berry-t) !important; }
#map-architect-toolbar { font-family: var(--pixel-font) !important; border-radius: 0 !important; }
#camera-hint { padding: 12px 14px !important; font-size: var(--fs-sm); }
.cloud-center-banner { border-radius: 0; background: var(--parch); border: 3px solid var(--px-out); box-shadow: inset 0 0 0 3px var(--wood-2), inset 0 0 0 6px var(--wood-3), 5px 5px 0 rgba(20,10,4,0.45); padding: 16px 30px; }
.cloud-travel-text { color: var(--ink); font-size: 20px; font-weight: normal; }

/* ---------- Remapeia cores escuras/claras em estilos inline (texto legível no pergaminho) ---------- */
:where(.modal-box, #friends-panel, .auth-card, .hud-panel, #player-architect-toolbar, #profile-dropdown-menu, .shop-item) :is(
  [style*="color: #cbd5e1"], [style*="color:#cbd5e1"], [style*="color: #94a3b8"], [style*="color:#94a3b8"],
  [style*="color: #e2e8f0"], [style*="color: #f8fafc"], [style*="color: #f1f5f9"], [style*="color: #fff;"], [style*="color: #ffffff"], [style*="color: #e0e7ff"], [style*="color: #c7d2fe"], [style*="color:#c7d2fe"]) {
  color: var(--ink-soft) !important;
}
:where(.modal-box, #friends-panel, .auth-card, .hud-panel, #player-architect-toolbar, #profile-dropdown-menu, .shop-item) :is(
  [style*="color: #fef08a"], [style*="color: #fde047"], [style*="color: #facc15"], [style*="color: #fbbf24"], [style*="color: #eab308"], [style*="color: #f59e0b"]) {
  color: var(--gold-t) !important;
}
:where(.modal-box, #friends-panel, .auth-card, .hud-panel, #player-architect-toolbar, .shop-item) :is(
  [style*="color: #4ade80"], [style*="color:#4ade80"], [style*="color: #22c55e"], [style*="color: #84cc16"], [style*="color: #bef264"]) {
  color: var(--leaf-t) !important;
}
:where(.modal-box, #friends-panel, .auth-card, .hud-panel, #player-architect-toolbar, .shop-item) :is(
  [style*="color: #38bdf8"], [style*="color: #bae6fd"], [style*="color: #a5b4fc"], [style*="color:#a5b4fc"], [style*="color: #818cf8"]) {
  color: var(--sky-t) !important;
}
:where(.modal-box, #friends-panel, .auth-card, .hud-panel, #player-architect-toolbar, .shop-item) :is(
  [style*="color: #f87171"], [style*="color: #ef4444"], [style*="color:#ef4444"], [style*="color: #fca5a5"], [style*="color: #fecaca"]) {
  color: var(--berry-t) !important;
}
/* botões coloridos mantêm texto claro */
:is(.modal-box, #friends-panel, .auth-card, #player-architect-toolbar) .shop-item-btn[style] { color: #fff7e0 !important; }
:where(.modal-box, #friends-panel, .auth-card, #player-architect-toolbar, .hud-panel) :is(
  [style*="background: #2a1a11"], [style*="background: #1e110a"], [style*="background: #23150c"], [style*="background: #2a170c"],
  [style*="background: rgba(15, 8, 4, 0.6)"], [style*="background: rgba(0,0,0,0.3)"], [style*="background: rgba(0,0,0,0.35)"], [style*="background: #1f140e"],
  [style*="background: #140c07"], [style*="background: #1a100a"], [style*="background: #2a180e"], [style*="background: #0f172a"],
  [style*="background: #2d1b11"], [style*="background: #3e2617"], [style*="background: #1e130c"], [style*="background:#1e130c"], [style*="background: #23130b"],
  [style*="background: #1e1b4b"], [style*="background:#1e293b"], [style*="background: #3b2315"], [style*="background: #27170e"], [style*="background:#1e130c"], [style*="background: rgba(18, 10, 6"], [style*="background: rgba(20, 10, 6"]) {
  background: var(--parch-2) !important;
  border-color: var(--parch-line) !important;
  border-radius: 0 !important;
}
:is(.modal-box, #friends-panel, .auth-card, .hud-panel) :is(h3, strong[style*="font-size: 15px"], strong[style*="font-size: 16px"], strong[style*="font-size: 18px"]) { font-size: 20px !important; font-weight: normal !important; }
:is(.modal-box, #friends-panel, .auth-card, .hud-panel) strong, :is(.modal-box, #friends-panel, .auth-card) b { font-weight: normal; }
:is(.modal-box, #friends-panel, .auth-card, .hud-panel) [style*="border-radius"] { border-radius: 0 !important; }
:is(.modal-box, #friends-panel) [style*="border: 1px solid #5a3720"], :is(.modal-box, #friends-panel) [style*="border: 1px solid #6d4327"] { border: 2px solid var(--parch-line) !important; }
#barn-modal-bar-fill { background: #5aa0cc !important; box-shadow: inset 0 3px 0 #8ccbe8; }
#barn-modal-bar-fill { border-radius: 0; }
#game-container [style*="font-weight: bold"], #game-container [style*="font-weight: 700"], #game-container [style*="font-weight: 600"], #game-container [style*="font-weight: 800"] { font-weight: normal !important; }

/* ---------- Celular: o jogo ocupa a tela inteira ---------- */
/* html.is-phone (antes (max-width: 560px)) */
  html.is-phone body { align-items: stretch; }
  html.is-phone #game-container { width: 100vw; height: 100vh; height: 100dvh; border-width: 0; box-shadow: none; }
  html.is-phone #farm-hub-dock { padding: 6px; gap: 4px; }
  html.is-phone .dock-hub-btn { min-width: 0; min-height: 52px; padding: 4px 2px; }
  html.is-phone .dock-btn-label { font-size: var(--fs-sm); letter-spacing: -0.5px; }
  html.is-phone .dock-btn-icon { font-size: 18px; }
  html.is-phone .hud-panel { padding: 12px 12px 10px !important; }
  html.is-phone #hud-player-name { font-size: var(--fs-sm) !important; }
  html.is-phone .coin-val, html.is-phone .gem-val { font-size: var(--fs-sm); }
  html.is-phone .modal-box { padding: 18px 16px !important; }
  html.is-phone .market-tab-btn { font-size: var(--fs-sm); }

/* html.is-narrow (antes (max-width: 440px)) */
  html.is-narrow .dock-hub-btn { min-height: 48px; }
  html.is-narrow .dock-btn-label { display: none; }
  html.is-narrow .dock-btn-icon { font-size: 22px; }


/* ---------- v2: HUD e dock enxutos (só o essencial) ---------- */
#hud-farm-id-badge, #hud-farm-id-info, #camera-hint { display: none !important; }
.hud-panel { padding: 12px 14px 10px !important; min-width: 0 !important; }
#hud-player-name { font-size: var(--fs-sm) !important; }
#hud-avatar { width: 34px; height: 34px; font-size: 20px !important; }
.xp-bar-container { width: 90px; }
.hud-resources-row { padding: 2px 8px !important; }
.coin-val, .gem-val { font-size: 20px; }
.dock-hub-btn { min-width: 60px; min-height: 52px; }
/* html.is-phone (antes (max-width: 560px)) */
  html.is-phone #top-hud { top: 8px; left: 8px; }
  html.is-phone .hud-panel { padding: 10px 12px 8px !important; }
  html.is-phone #hud-player-name { display: none; }
  html.is-phone .coin-val, html.is-phone .gem-val { font-size: var(--fs-sm); }
  html.is-phone #tool-dock { bottom: 10px; }

/* html.is-phone (antes (max-width: 560px)) */
  html.is-phone #farm-hub-dock { max-width: calc(100vw - 16px); }
  html.is-phone .dock-hub-btn { min-width: 0 !important; flex: 1 1 0; padding: 4px 2px; }


/* =====================================================================
   TELA DE ENTRADA — placa de madeira + pergaminho sobre a fazenda viva
   ===================================================================== */
body.auth-open #game-container > :not(#game-canvas):not(#auth-screen) { visibility: hidden !important; }

#auth-screen.auth-screen {
  position: absolute; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; overflow-y: auto;
  /* a fazenda do canvas aparece por trás; só escurecemos as bordas */
  background:
    radial-gradient(ellipse at 50% 45%, rgba(20, 12, 4, 0) 35%, rgba(20, 12, 4, 0.55) 100%),
    linear-gradient(180deg, rgba(143, 208, 236, 0.18) 0%, rgba(23, 14, 6, 0) 40%, rgba(23, 14, 6, 0.35) 100%);
  font-family: var(--pixel-font);
  -webkit-tap-highlight-color: transparent;
}
#auth-screen.auth-screen.is-open { display: flex; }

.auth-stack {
  width: min(380px, 100%); margin: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  animation: auth-drop 420ms steps(6, end) both;
}
@keyframes auth-drop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- placa pendurada com o nome do jogo --- */
.auth-sign { position: relative; align-self: center; padding-top: 18px; margin-bottom: -6px; z-index: 2; transform-origin: 50% 0; animation: auth-sway 5s ease-in-out infinite; }
@keyframes auth-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.auth-rope { position: absolute; top: 0; width: 4px; height: 22px; background: repeating-linear-gradient(180deg, #c9a66b 0 4px, #8c5523 4px 8px); border-left: 1px solid var(--px-out); border-right: 1px solid var(--px-out); }
.auth-rope-l { left: 26px; } .auth-rope-r { right: 26px; }
.auth-sign-board {
  display: flex; align-items: center; gap: 10px; padding: 10px 22px 12px;
  background: repeating-linear-gradient(180deg, var(--wood-1) 0 10px, var(--wood-2) 10px 12px);
  border: 3px solid var(--px-out);
  box-shadow: inset 0 3px 0 var(--wood-0), inset 0 -3px 0 var(--wood-3), 4px 4px 0 rgba(20, 10, 4, 0.45);
}
.auth-sign-icon { font-size: 28px; line-height: 1; filter: drop-shadow(2px 2px 0 var(--wood-4)); }
.auth-sign-board h1 {
  margin: 0; font-size: 30px; font-weight: normal; line-height: 1; letter-spacing: 1px; color: #f6d55c; white-space: nowrap;
  text-shadow: 3px 0 0 var(--px-out), -3px 0 0 var(--px-out), 0 3px 0 var(--px-out), 0 -3px 0 var(--px-out), 3px 3px 0 var(--px-out), -3px 3px 0 var(--px-out), 0 6px 0 var(--wood-4), 3px 6px 0 var(--wood-4), -3px 6px 0 var(--wood-4);
}

/* --- cartão de pergaminho (moldura padrão do jogo vem da regra .auth-card) --- */
#auth-screen .auth-card { width: auto; max-width: none; padding: 28px 24px 22px !important; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-sm); }
.auth-head { text-align: center; }
.auth-head h2 { margin: 0; font-size: 20px; font-weight: normal; color: var(--ink); text-shadow: 2px 2px 0 var(--parch-hi); }
.auth-head p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }

.auth-form { display: none; flex-direction: column; gap: 12px; margin: 0; }
#auth-screen[data-mode="login"] .auth-form[data-for="login"],
#auth-screen[data-mode="register"] .auth-form[data-for="register"],
#auth-screen[data-mode="forgot"] .auth-form[data-for="forgot"],
#auth-screen[data-mode="reset"] .auth-form[data-for="reset"] { display: flex; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--ink); }
.auth-field em { font-style: normal; color: var(--ink-faint); }

/* campos: 20px evita o zoom automático do iPhone e mantém o pixel nítido */
#auth-screen .auth-card input[type="email"], #auth-screen .auth-card input[type="text"], #auth-screen .auth-card input[type="password"] {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px !important; font-size: 20px !important; font-family: var(--pixel-font);
}
.auth-pass { position: relative; display: block; }
#auth-screen .auth-pass input { padding-right: 46px !important; }
.auth-eye {
  position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  font-size: 16px; opacity: 0.45; filter: grayscale(1);
}
.auth-eye.is-on { opacity: 1; filter: none; }

.auth-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.auth-avatar {
  aspect-ratio: 1; min-height: 40px; font-size: 22px; line-height: 1; cursor: pointer;
  background: var(--parch-2); border: 2px solid var(--parch-line); box-shadow: inset 2px 2px 0 var(--parch-hi);
  filter: grayscale(0.6); opacity: 0.75; transition: transform 80ms steps(2);
}
.auth-avatar:hover { opacity: 1; filter: none; }
.auth-avatar.is-on { background: #f6d55c; border-color: var(--px-out); opacity: 1; filter: none; box-shadow: inset 2px 2px 0 #fff3d0, inset -2px -2px 0 var(--gold); transform: translateY(-2px); }

/* botões no padrão dos botões de madeira do jogo */
.auth-btn {
  height: 48px; margin-top: 4px; cursor: pointer; font-family: var(--pixel-font); font-size: 20px; letter-spacing: 0.5px;
  color: #fff7e0; border: 3px solid var(--px-out); border-radius: 0;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.auth-btn-go { background: #4f8f33; box-shadow: inset 0 3px 0 #78b84a, inset 0 -4px 0 #2f5f24, 3px 3px 0 rgba(20, 10, 4, 0.45); }
.auth-btn-go:hover:not(:disabled) { background: #5a9a3a; }
.auth-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 0 3px 0 #78b84a, inset 0 -2px 0 #2f5f24, 1px 1px 0 rgba(20, 10, 4, 0.45); }
.auth-btn:disabled { cursor: progress; }
.auth-btn.is-busy { background: repeating-linear-gradient(-45deg, #4f8f33 0 10px, #5a9a3a 10px 20px); background-size: 28px 28px; animation: auth-busy 600ms steps(4) infinite; }
@keyframes auth-busy { to { background-position: 28px 0; } }
.auth-btn:focus-visible, .auth-link:focus-visible, .auth-guest:focus-visible, .auth-avatar:focus-visible, .auth-eye:focus-visible { outline: 2px solid #f6d55c; outline-offset: 2px; }

.auth-switch { margin: 2px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); }
.auth-link {
  border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: var(--pixel-font); font-size: var(--fs-sm);
  color: var(--sky-t); text-decoration: underline; text-underline-offset: 3px;
}
.auth-link:hover { color: var(--ink); }

.auth-note { padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.5; border: 2px solid var(--px-out); }
.auth-note[hidden] { display: none; }
.auth-note.is-error { background: #f2c7bd; color: #6e1f18; box-shadow: inset 3px 0 0 var(--berry); }
.auth-note.is-ok { background: #d6ecb8; color: #24481a; box-shadow: inset 3px 0 0 var(--leaf); }

.auth-guest {
  align-self: center; margin-top: 14px; padding: 8px 14px; cursor: pointer; font-family: var(--pixel-font); font-size: var(--fs-sm);
  color: #fff3d0; background: rgba(43, 29, 20, 0.72); border: 2px solid var(--px-out); box-shadow: 2px 2px 0 rgba(20, 10, 4, 0.45);
}
.auth-guest small { font-size: var(--fs-sm); color: #d9bd84; }
.auth-guest:hover { background: rgba(43, 29, 20, 0.9); }

/* html.is-narrow (antes (max-width: 400px)) */
  html.is-narrow .auth-sign-board { padding: 8px 14px 10px; }
  html.is-narrow .auth-sign-board h1 { font-size: 24px; }
  html.is-narrow #auth-screen .auth-card { padding: 24px 18px 18px !important; }

@media (max-height: 640px) { #auth-screen.auth-screen { align-items: flex-start; } }
/* =====================================================================
   TELA DE INÍCIO — nome do jogo grande, céu animado e menu de madeira
   (o cartão de entrar/criar conta só aparece depois de escolher no menu)
   ===================================================================== */
#auth-screen[data-stage="title"] { padding: 0; overflow: hidden; }
#auth-screen[data-stage="title"] .auth-stack { display: none; }
#auth-screen[data-stage="form"] .title-screen { display: none; }

.title-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); box-sizing: border-box;
  /* céu de fim de tarde por cima da fazenda viva do canvas */
  background:
    linear-gradient(180deg, #6fb6e0 0%, #9fd3ee 20%, rgba(190, 228, 244, 0.35) 36%, rgba(190, 228, 244, 0) 50%),
    linear-gradient(0deg, rgba(23, 14, 6, 0.55) 0%, rgba(23, 14, 6, 0) 35%);
}
.title-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.title-cloud {
  position: absolute; width: 96px; height: 24px; background: #fff; opacity: 0.92;
  box-shadow: 16px -12px 0 #fff, 40px -20px 0 #fff, 64px -10px 0 #fff, 0 6px 0 #d8eef8, 16px 6px 0 #d8eef8, 40px 6px 0 #d8eef8, 64px 6px 0 #d8eef8;
  animation: title-drift linear infinite;
}
.title-cloud::before { content: ""; position: absolute; left: 24px; top: -20px; width: 40px; height: 20px; background: #fff; }
.title-cloud.c1 { top: 9%;  animation-duration: 70s; animation-delay: -20s; }
.title-cloud.c2 { top: 19%; animation-duration: 95s; animation-delay: -60s; transform: scale(0.7); opacity: 0.8; }
.title-cloud.c3 { top: 5%;  animation-duration: 120s; animation-delay: -95s; transform: scale(1.3); }
@keyframes title-drift { from { left: -180px; } to { left: 110%; } }
.title-bird { position: absolute; width: 10px; height: 4px; border-top: 3px solid #2b1d14; border-radius: 0; animation: title-fly 26s linear infinite; }
.title-bird::before, .title-bird::after { content: ""; position: absolute; top: -6px; width: 4px; height: 3px; background: #2b1d14; animation: title-flap 0.5s steps(2) infinite; }
.title-bird::before { left: -3px; } .title-bird::after { right: -3px; }
.title-bird.b1 { top: 27%; animation-delay: -6s; }
.title-bird.b2 { top: 31%; animation-delay: -9s; animation-duration: 30s; transform: scale(0.8); }
@keyframes title-fly { from { left: 108%; } to { left: -40px; } }
@keyframes title-flap { 50% { transform: translateY(4px); } }

/* --- logo --- */
.title-logo {
  position: relative; z-index: 1; margin-top: clamp(10px, 6vh, 64px);
  display: grid; grid-template-columns: auto auto auto; align-items: end; justify-items: center; column-gap: 6px;
  animation: title-drop 700ms steps(8, end) both;
}
@keyframes title-drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.title-name {
  margin: 0; font-weight: normal; line-height: 0.95; text-align: center; white-space: nowrap;
  font-size: clamp(52px, 11vw, 112px); letter-spacing: 2px; color: #fff3d0;
  /* contorno escuro grosso + "madeira" embaixo, como letreiro entalhado */
  text-shadow:
    4px 0 0 var(--px-out), -4px 0 0 var(--px-out), 0 4px 0 var(--px-out), 0 -4px 0 var(--px-out),
    4px 4px 0 var(--px-out), -4px 4px 0 var(--px-out), 4px -4px 0 var(--px-out), -4px -4px 0 var(--px-out),
    0 8px 0 var(--wood-2), 4px 8px 0 var(--wood-2), -4px 8px 0 var(--wood-2),
    0 12px 0 var(--wood-4), 4px 12px 0 var(--wood-4), -4px 12px 0 var(--wood-4),
    0 18px 0 rgba(20, 10, 4, 0.35);
}
.title-word { display: inline-block; animation: title-bob 3.2s ease-in-out infinite; }
.title-word:first-child { color: #f6d55c; }
.title-word:last-child { color: #a8dd6e; animation-delay: -1.6s; }
@keyframes title-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.title-flowers { display: flex; align-items: flex-end; gap: 2px; margin-bottom: 4px; }
.title-flowers i { display: block; background-size: 100% 100%; image-rendering: pixelated; transform-origin: 50% 100%; animation: title-sway 2.8s ease-in-out infinite; }
.title-flowers .px-sunflower { height: clamp(66px, 11vw, 110px); }
.title-flowers .px-wheat { height: clamp(48px, 8vw, 80px); animation-delay: -1.2s; }
.title-flowers.right { transform: scaleX(-1); }
@keyframes title-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.px-sunflower { background-image: url("../assets/ui/titulo-sunflower.svg"); aspect-ratio: 12 / 22; }
.px-wheat     { background-image: url("../assets/ui/titulo-wheat.svg");     aspect-ratio: 8 / 18; }
.px-gate      { background-image: url("../assets/ui/titulo-gate.svg"); }
.px-sprout    { background-image: url("../assets/ui/titulo-sprout.svg"); }
.px-house     { background-image: url("../assets/ui/titulo-house.svg"); }

/* faixa vermelha com as pontas dobradas */
.title-ribbon { grid-column: 1 / -1; position: relative; margin: 18px 0 0; padding: 0 28px; }
.title-ribbon span {
  position: relative; z-index: 1; display: block; padding: 6px 22px 8px; font-size: clamp(18px, 3.4vw, 28px); color: #fff3d0; white-space: nowrap;
  background: #b8432f; border: 3px solid var(--px-out); box-shadow: inset 0 3px 0 #d8644b, inset 0 -4px 0 #7f2a1d;
  text-shadow: 2px 2px 0 #5c1c12;
}
.title-ribbon::before, .title-ribbon::after {
  content: ""; position: absolute; top: 10px; bottom: -8px; width: 40px; background: #8a3020; border: 3px solid var(--px-out);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
}
.title-ribbon::before { left: 0; }
.title-ribbon::after { right: 0; transform: scaleX(-1); }

/* --- menu --- */
.title-menu {
  position: relative; z-index: 1; margin-top: auto; margin-bottom: clamp(8px, 4vh, 36px);
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(560px, 100%);
  animation: title-rise 600ms 250ms steps(6, end) both;
}
@keyframes title-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.title-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.title-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; padding: 12px 6px 10px;
  cursor: pointer; font-family: var(--pixel-font); font-size: 20px; line-height: 1.05; color: var(--ink); text-align: center;
  background: var(--parch); border: 3px solid var(--px-out); border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--wood-1), inset 0 0 0 6px var(--wood-3), inset 0 9px 0 6px var(--parch-hi), 4px 4px 0 rgba(20, 10, 4, 0.5);
  transition: transform 80ms steps(2);
}
.title-btn .px-icon { display: block; width: 48px; height: 48px; background-size: 100% 100%; image-rendering: pixelated; }
.title-btn:hover { transform: translateY(-3px); background: var(--parch-hi); }
.title-btn:hover .px-icon { animation: title-hop 400ms steps(2) infinite; }
@keyframes title-hop { 50% { transform: translateY(-3px); } }
.title-btn:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px var(--wood-1), inset 0 0 0 6px var(--wood-3), 2px 2px 0 rgba(20, 10, 4, 0.5); }
.title-btn:focus-visible, .title-sound-btn:focus-visible, .title-mute:focus-visible { outline: 3px solid #f6d55c; outline-offset: 2px; }
.title-btn.is-main {
  flex-direction: row; justify-content: flex-start; gap: 14px; width: 100%; min-height: 0; padding: 12px 18px; color: #fff7e0; text-align: left;
  background: #4f8f33; box-shadow: inset 0 3px 0 #78b84a, inset 0 -4px 0 #2f5f24, 4px 4px 0 rgba(20, 10, 4, 0.5);
}
.title-btn.is-main:hover { background: #5a9a3a; }
.title-btn.is-main[hidden] { display: none; }
.title-btn.is-main::after { content: "▶"; margin-left: auto; font-size: 22px; }
.title-btn-icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; font-size: 28px; background: var(--parch-2); border: 2px solid var(--px-out); box-shadow: inset 2px 2px 0 var(--parch-hi); }
.title-btn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title-btn-text small { font-size: var(--fs-sm); color: #d6ecb8; }
.title-btn-text strong { font-size: 24px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }

/* --- rodapé: versão, termos e som --- */
.title-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; font-size: var(--fs-sm); }
.title-version { padding: 3px 8px; color: #fff3d0; background: rgba(43, 29, 20, 0.75); border: 2px solid var(--px-out); }
.title-links { flex: 1; text-align: center; color: #fff3d0; text-shadow: 2px 2px 0 var(--px-out); }
.title-links a { color: #fff3d0; }
.title-sound-btn {
  width: 44px; height: 44px; cursor: pointer; font-size: 22px; line-height: 1;
  background: var(--parch); border: 3px solid var(--px-out); box-shadow: inset 0 0 0 2px var(--wood-1), 3px 3px 0 rgba(20, 10, 4, 0.5);
}
.title-sound {
  position: absolute; z-index: 3; right: 16px; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 56px); width: min(300px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 10px; padding: 16px; box-sizing: border-box; font-size: var(--fs-sm); color: var(--ink);
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 3px var(--wood-1), inset 0 0 0 6px var(--wood-3), 4px 4px 0 rgba(20, 10, 4, 0.5);
}
.title-sound[hidden] { display: none; }
.title-sound h3 { margin: 0 0 2px; font-size: var(--fs-md); font-weight: normal; text-align: center; }
.title-vol { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; }
.title-vol input { width: 100%; accent-color: #4f8f33; }
.title-vol output { text-align: right; }
.title-mute {
  margin-top: 4px; height: 40px; cursor: pointer; font-family: var(--pixel-font); font-size: var(--fs-sm); color: #fff7e0;
  background: var(--wood-3); border: 3px solid var(--px-out); box-shadow: inset 0 3px 0 var(--wood-1), 2px 2px 0 rgba(20, 10, 4, 0.45);
}

/* instalar no celular (PWA): botão no rodapé e passo a passo do iPhone */
.title-install-btn {
  height: 44px; padding: 0 12px; cursor: pointer; font-family: var(--pixel-font); font-size: var(--fs-sm); color: #fff7e0;
  background: #4f8f33; border: 3px solid var(--px-out); box-shadow: inset 0 3px 0 #78b84a, inset 0 -3px 0 #2f5f24, 3px 3px 0 rgba(20, 10, 4, 0.5);
}
.title-install-btn[hidden] { display: none; }
.title-install-btn:focus-visible { outline: 3px solid #f6d55c; outline-offset: 2px; }
.title-install-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.4; }
.title-install-steps b { font-weight: normal; color: var(--leaf-t, #2f5f24); }

/* aviso "seu navegador está escurecendo o jogo" (js/boot/escuro.js): por cima de tudo, até tocar em Entendi */
.aviso-escuro {
  position: fixed; z-index: 100000; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100% - 32px)); box-sizing: border-box; padding: 16px;
  display: flex; flex-direction: column; gap: 8px; font-family: var(--pixel-font); font-size: var(--fs-sm); line-height: 1.4; color: var(--ink);
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 3px var(--wood-1), inset 0 0 0 6px var(--wood-3), 4px 4px 0 rgba(20, 10, 4, 0.5);
}
.aviso-escuro h3 { margin: 0; font-size: var(--fs-md); font-weight: normal; text-align: center; }
.aviso-escuro p { margin: 0; }
.aviso-escuro b { font-weight: normal; color: var(--leaf-t, #2f5f24); }

/* voltar do cartão para a tela de início */
.auth-back { margin-top: -4px; }
#auth-screen.has-resume[data-mode="login"] .auth-back { display: block; }

/* celular */
html.is-narrow .title-row { gap: 8px; }
html.is-narrow .title-btn { min-height: 88px; font-size: 17px; }
html.is-narrow .title-btn .px-icon { width: 40px; height: 40px; }
html.is-narrow .title-ribbon { padding: 0 20px; }
html.is-narrow .title-ribbon::before, html.is-narrow .title-ribbon::after { width: 28px; }
html.is-narrow .title-flowers .px-wheat { display: none; }
@media (max-height: 560px) {
  .title-logo { margin-top: 4px; }
  .title-name { font-size: 52px; }
  .title-btn { min-height: 72px; }
  .title-btn .px-icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-cloud, .title-bird, .title-word, .title-flowers i, .title-logo, .title-menu, .title-btn:hover .px-icon { animation: none; }
  .title-bird { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-stack, .auth-sign, .auth-btn.is-busy { animation: none; }
}


/* =====================================================================
   TIPOGRAFIA + LAYOUT RESPONSIVO (celular primeiro, computador também)
   A fonte pixel do jogo fica nítida e legível a partir de 15px.
   ===================================================================== */
:root {
  --fs-xs: 12px;   /* contadores e selos */
  --fs-sm: 15px;   /* texto padrão da interface */
  --fs-md: 20px;   /* títulos de janela, valores do HUD */
  --fs-lg: 30px;
}
html, body { height: 100%; }
/* o Chrome do celular não aumenta as letras sozinho ("font boosting"); o tamanho vem do CSS do jogo */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: var(--app-h, 100vh); font-size: var(--fs-sm); line-height: 1.35; }
.modal-box, .hud-panel, #friends-panel, #tool-dock { font-size: var(--fs-sm) !important; line-height: 1.35; }
.modal-title, .modal-box h2, .modal-box h3 { font-size: var(--fs-md) !important; }

/* computador: janela ampla com moldura de madeira, usando a tela toda */
html.is-desktop #game-container {
  width: min(calc(var(--app-w, 100vw) - 48px), 1600px);
  height: min(calc(var(--app-h, 100vh) - 48px), 1000px);
}

/* celular: tela cheia, sem moldura, respeitando entalhe e barra de gestos */
html.is-phone body { align-items: stretch; justify-content: stretch; }
html.is-phone #game-container {
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
  border-width: 0; box-shadow: none;
}
html.is-phone #top-hud { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
html.is-phone #tool-dock { bottom: max(10px, env(safe-area-inset-bottom)); }
html.is-phone .modal-overlay { padding: 10px; box-sizing: border-box; align-items: center; }
html.is-phone .modal-box {
  width: 100% !important; max-width: 520px !important;
  max-height: calc(var(--app-h, 100dvh) - 20px) !important;
  padding: 18px 14px !important;
}
html.is-phone .coin-val, html.is-phone .gem-val { font-size: var(--fs-md); }
html.is-phone .dock-btn-label { font-size: var(--fs-xs); letter-spacing: 0; }
html.is-phone .dock-sub-info { font-size: var(--fs-xs); }
/* alvos de toque confortáveis */
html.is-phone .shop-item-btn, html.is-phone .close-btn { min-height: 40px; }
html.is-phone .close-btn { min-width: 40px; }

/* --- "Continuar como" na tela de entrada --- */
.auth-resume { display: flex; flex-direction: column; gap: 8px; }
.auth-resume[hidden] { display: none; }
.auth-resume-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; cursor: pointer; text-align: left;
  font-family: var(--pixel-font); color: #fff7e0; background: #4f8f33; border: 3px solid var(--px-out);
  box-shadow: inset 0 3px 0 #78b84a, inset 0 -4px 0 #2f5f24, 3px 3px 0 rgba(20, 10, 4, 0.45);
}
.auth-resume-btn:hover:not(:disabled) { background: #5a9a3a; }
.auth-resume-btn:active:not(:disabled) { transform: translate(2px, 2px); }
.auth-resume-btn.is-busy { opacity: 0.8; cursor: progress; }
.auth-resume-avatar {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center; font-size: 26px;
  background: var(--parch-2); border: 2px solid var(--px-out); box-shadow: inset 2px 2px 0 var(--parch-hi);
}
.auth-resume-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-resume-text small { font-size: var(--fs-sm); color: #d6ecb8; }
.auth-resume-text strong { font-size: var(--fs-md); font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
.auth-resume-go { font-size: var(--fs-md); }
.auth-or { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: var(--fs-sm); margin: 4px 0 2px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 2px dashed var(--parch-line); }
#auth-screen.has-resume[data-mode="login"] .auth-switch { display: none; }
#auth-screen.has-resume[data-mode="login"] #auth-resume .auth-switch { display: block; }

/* tela de entrada com a escala de texto nova */
.auth-head p, .auth-field > span:first-child, .auth-switch, .auth-link, .auth-note, .auth-guest, .auth-guest small { font-size: var(--fs-sm); }
.auth-head h2 { font-size: var(--fs-md); }
.auth-guest { padding: 10px 16px; }

/* --- Correio: cartas em pergaminho, tudo empilhado (lê bem em qualquer largura) --- */
.mail-letter {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--parch-hi); border: 2px solid var(--parch-line); box-shadow: inset 0 -3px 0 var(--parch-2);
}
.mail-letter.is-new { border-color: var(--wood-3); box-shadow: inset 4px 0 0 #f6d55c, inset 0 -3px 0 var(--parch-2); }
.mail-head { display: flex; align-items: flex-start; gap: 10px; }
.mail-icon { font-size: 22px; line-height: 1; }
.mail-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail-title { font-size: var(--fs-sm); font-weight: normal; color: var(--ink); line-height: 1.3; }
.mail-new { display: inline-block; margin-left: 4px; padding: 1px 5px; font-size: var(--fs-xs); color: #fff3d0; background: var(--berry); border: 1px solid var(--px-out); vertical-align: 1px; }
.mail-meta { font-size: var(--fs-xs); color: var(--ink-soft); }
.mail-body { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.mail-action {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: var(--parch-2); border: 2px dashed var(--parch-line);
}
.mail-action-label { font-size: var(--fs-sm); color: var(--ink); }
.mail-action-label.is-bad { color: var(--berry-t); }
.mail-action-label b { font-weight: normal; margin-left: 4px; }
.mail-coins { color: var(--gold-t); } .mail-gems { color: var(--sky-t); }
.mail-action-btns { display: flex; gap: 6px; margin-left: auto; }
.mail-btn { padding: 6px 14px !important; font-size: var(--fs-sm) !important; color: #fff7e0 !important; }
.mail-btn-go { background: #4f8f33 !important; border-color: var(--px-out) !important; }
.mail-btn-no { background: var(--berry) !important; border-color: var(--px-out) !important; }
.mail-btn.is-claimed { background: var(--parch-3) !important; color: var(--ink-soft) !important; cursor: default; }
.mail-done { font-size: var(--fs-sm); color: var(--ink-soft); } .mail-done.is-ok { color: var(--leaf-t); }
.mail-empty { text-align: center; padding: 30px 10px; font-size: var(--fs-sm); color: var(--ink-soft); }
.mail-toolbar { display: flex; flex-direction: column; gap: 6px; }
.mail-tabs button { white-space: nowrap; }
.mail-tabs .mail-new { margin-left: 2px; }
.mail-clear { align-self: flex-end; padding: 4px 12px !important; font-size: var(--fs-sm) !important; }
.mail-clear[disabled] { opacity: .5; cursor: default; }
.mail-head .mail-del { margin-left: auto; flex: 0 0 auto; padding: 2px 6px; font-size: 16px; line-height: 1; background: none; border: 0; cursor: pointer; opacity: .6; }
.mail-head .mail-del:hover { opacity: 1; }

/* --- Celular: linhas de "título ⟷ valor" quebram em vez de espremer --- */
.shop-item > div[style*="space-between"] { flex-wrap: wrap; gap: 4px 8px; }
.shop-item > div[style*="space-between"] > span[style] { flex: 1 1 100%; }
html.is-phone .market-subtabs-nav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; }
html.is-phone .market-subtab-btn, html.is-phone .market-tab-btn { white-space: normal; min-height: 44px; }

/* contraste: amarelos/verdes neon de estilos antigos ficam ilegíveis no pergaminho */
:where(.modal-box, #friends-panel, .hud-panel) :is([style*="color:#facc15"], [style*="color:#fde047"], [style*="color: #fcd34d"], [style*="color:#fef08a"]) { color: var(--gold-t) !important; }
:where(.modal-box, #friends-panel, .hud-panel) :is([style*="color:#22c55e"], [style*="color: #86efac"], [style*="color:#86efac"]) { color: var(--leaf-t) !important; }

/* contraste no pergaminho: estilos inline antigos (hex ou rgb, como o JS os grava) */
:where(.modal-box, #friends-panel, .hud-panel, .shop-item) :is([style^="color: rgb(250, 204, 21)"], [style*="; color: rgb(250, 204, 21)"], [style*=" color: #facc15"], [style^="color: #facc15"], [style*="color:#facc15"], [style^="color: rgb(253, 224, 71)"], [style*="; color: rgb(253, 224, 71)"], [style*=" color: #fde047"], [style^="color: #fde047"], [style*="color:#fde047"], [style^="color: rgb(254, 240, 138)"], [style*="; color: rgb(254, 240, 138)"], [style*=" color: #fef08a"], [style^="color: #fef08a"], [style*="color:#fef08a"], [style^="color: rgb(251, 191, 36)"], [style*="; color: rgb(251, 191, 36)"], [style*=" color: #fbbf24"], [style^="color: #fbbf24"], [style*="color:#fbbf24"], [style^="color: rgb(234, 179, 8)"], [style*="; color: rgb(234, 179, 8)"], [style*=" color: #eab308"], [style^="color: #eab308"], [style*="color:#eab308"], [style^="color: rgb(245, 158, 11)"], [style*="; color: rgb(245, 158, 11)"], [style*=" color: #f59e0b"], [style^="color: #f59e0b"], [style*="color:#f59e0b"], [style^="color: rgb(252, 211, 77)"], [style*="; color: rgb(252, 211, 77)"], [style*=" color: #fcd34d"], [style^="color: #fcd34d"], [style*="color:#fcd34d"]) { color: var(--gold-t) !important; }
:where(.modal-box, #friends-panel, .hud-panel, .shop-item) :is([style^="color: rgb(74, 222, 128)"], [style*="; color: rgb(74, 222, 128)"], [style*=" color: #4ade80"], [style^="color: #4ade80"], [style*="color:#4ade80"], [style^="color: rgb(34, 197, 94)"], [style*="; color: rgb(34, 197, 94)"], [style*=" color: #22c55e"], [style^="color: #22c55e"], [style*="color:#22c55e"], [style^="color: rgb(52, 211, 153)"], [style*="; color: rgb(52, 211, 153)"], [style*=" color: #34d399"], [style^="color: #34d399"], [style*="color:#34d399"], [style^="color: rgb(134, 239, 172)"], [style*="; color: rgb(134, 239, 172)"], [style*=" color: #86efac"], [style^="color: #86efac"], [style*="color:#86efac"], [style^="color: rgb(132, 204, 22)"], [style*="; color: rgb(132, 204, 22)"], [style*=" color: #84cc16"], [style^="color: #84cc16"], [style*="color:#84cc16"], [style^="color: rgb(190, 242, 100)"], [style*="; color: rgb(190, 242, 100)"], [style*=" color: #bef264"], [style^="color: #bef264"], [style*="color:#bef264"]) { color: var(--leaf-t) !important; }
:where(.modal-box, #friends-panel, .hud-panel, .shop-item) :is([style^="color: rgb(56, 189, 248)"], [style*="; color: rgb(56, 189, 248)"], [style*=" color: #38bdf8"], [style^="color: #38bdf8"], [style*="color:#38bdf8"], [style^="color: rgb(186, 230, 253)"], [style*="; color: rgb(186, 230, 253)"], [style*=" color: #bae6fd"], [style^="color: #bae6fd"], [style*="color:#bae6fd"], [style^="color: rgb(165, 180, 252)"], [style*="; color: rgb(165, 180, 252)"], [style*=" color: #a5b4fc"], [style^="color: #a5b4fc"], [style*="color:#a5b4fc"], [style^="color: rgb(129, 140, 248)"], [style*="; color: rgb(129, 140, 248)"], [style*=" color: #818cf8"], [style^="color: #818cf8"], [style*="color:#818cf8"], [style^="color: rgb(199, 210, 254)"], [style*="; color: rgb(199, 210, 254)"], [style*=" color: #c7d2fe"], [style^="color: #c7d2fe"], [style*="color:#c7d2fe"], [style^="color: rgb(224, 231, 255)"], [style*="; color: rgb(224, 231, 255)"], [style*=" color: #e0e7ff"], [style^="color: #e0e7ff"], [style*="color:#e0e7ff"]) { color: var(--sky-t) !important; }
:where(.modal-box, #friends-panel, .hud-panel, .shop-item) :is([style^="color: rgb(148, 163, 184)"], [style*="; color: rgb(148, 163, 184)"], [style*=" color: #94a3b8"], [style^="color: #94a3b8"], [style*="color:#94a3b8"], [style^="color: rgb(203, 213, 225)"], [style*="; color: rgb(203, 213, 225)"], [style*=" color: #cbd5e1"], [style^="color: #cbd5e1"], [style*="color:#cbd5e1"], [style^="color: rgb(226, 232, 240)"], [style*="; color: rgb(226, 232, 240)"], [style*=" color: #e2e8f0"], [style^="color: #e2e8f0"], [style*="color:#e2e8f0"], [style^="color: rgb(248, 250, 252)"], [style*="; color: rgb(248, 250, 252)"], [style*=" color: #f8fafc"], [style^="color: #f8fafc"], [style*="color:#f8fafc"], [style^="color: rgb(241, 245, 249)"], [style*="; color: rgb(241, 245, 249)"], [style*=" color: #f1f5f9"], [style^="color: #f1f5f9"], [style*="color:#f1f5f9"], [style^="color: rgb(255, 255, 255)"], [style*="; color: rgb(255, 255, 255)"], [style*=" color: #ffffff"], [style^="color: #ffffff"], [style*="color:#ffffff"]) { color: var(--ink-soft) !important; }
:where(.modal-box, #friends-panel, .hud-panel, .shop-item) :is([style^="color: rgb(248, 113, 113)"], [style*="; color: rgb(248, 113, 113)"], [style*=" color: #f87171"], [style^="color: #f87171"], [style*="color:#f87171"], [style^="color: rgb(239, 68, 68)"], [style*="; color: rgb(239, 68, 68)"], [style*=" color: #ef4444"], [style^="color: #ef4444"], [style*="color:#ef4444"], [style^="color: rgb(252, 165, 165)"], [style*="; color: rgb(252, 165, 165)"], [style*=" color: #fca5a5"], [style^="color: #fca5a5"], [style*="color:#fca5a5"], [style^="color: rgb(254, 202, 202)"], [style*="; color: rgb(254, 202, 202)"], [style*=" color: #fecaca"], [style^="color: #fecaca"], [style*="color:#fecaca"]) { color: var(--berry-t) !important; }
:is(.modal-box, #friends-panel) :is(.shop-item-btn, .mail-btn, button[style*="background: #1"], button[style*="background: #7"], button[style*="background: #d9"]) { color: #fff7e0 !important; }

/* --- Som (Configurações) --- */
.sound-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--parch-2); border: 2px solid var(--parch-line); }
.sound-now { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--parch-hi); border: 2px dashed var(--parch-line); font-size: var(--fs-sm); color: var(--ink); }
.sound-now-icon { color: var(--gold-t); font-size: var(--fs-md); }
#sound-now-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-skip { border: 2px solid var(--px-out); background: var(--wood-1); color: #fff7e0; font-size: var(--fs-sm); min-width: 40px; min-height: 36px; cursor: pointer; box-shadow: inset 0 2px 0 var(--wood-0), inset 0 -2px 0 var(--wood-3); }
.sound-row { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink); }
.sound-row output { text-align: right; color: var(--ink-soft); font-size: var(--fs-xs); }
.sound-row input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.sound-row input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: var(--parch-3); border: 2px solid var(--px-out); }
.sound-row input[type="range"]::-moz-range-track { height: 8px; background: var(--parch-3); border: 2px solid var(--px-out); }
.sound-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 22px; margin-top: -9px; background: var(--leaf); border: 2px solid var(--px-out); box-shadow: inset 0 2px 0 #78b84a; }
.sound-row input[type="range"]::-moz-range-thumb { width: 16px; height: 20px; background: var(--leaf); border: 2px solid var(--px-out); border-radius: 0; }
.sound-mute { align-self: flex-start; padding: 6px 12px !important; }
.sound-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.sound-mute.is-off { opacity: 0.7; }
.modal-box .sound-row input[type="range"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* =====================================================================
   KIT DE JANELAS SIMPLES ("sheet") — respiro, uma decisão por linha
   Celular: folha que sobe de baixo. Computador: janela central de 500px.
   ===================================================================== */
.modal-box.sheet {
  width: 500px; max-width: calc(100% - 32px);
  max-height: min(84%, 720px) !important;
  overflow: hidden !important;
  padding: 18px 20px 16px !important; gap: 12px !important;
  display: flex; flex-direction: column;
}
.sheet .modal-header { padding-bottom: 10px; gap: 10px; }
.sheet-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet-title > span { font-size: 26px; line-height: 1; }
.sheet-title .modal-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .close-btn { flex: 0 0 auto; width: 36px; height: 36px; font-size: 18px; }
.sheet-hint { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }

/* abas Comprar/Vender */
.seg { display: flex; border: 3px solid var(--px-out); background: var(--wood-3); flex: 0 0 auto; }
.seg button {
  flex: 1 1 0; min-height: 42px; border: 0; cursor: pointer;
  background: transparent; color: var(--parch-hi); font-size: 18px; font-family: var(--pixel-font);
}
.seg button + button { border-left: 3px solid var(--px-out); }
.seg button.on { background: var(--parch-hi); color: var(--ink); box-shadow: inset 0 -3px 0 var(--parch-3); }

/* categorias (uma linha só, rola de lado se não couber) */
.chips { display: flex; gap: 8px; overflow-x: auto; flex: 0 0 auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; min-height: 36px; padding: 0 12px; cursor: pointer; white-space: nowrap;
  background: var(--parch-2); color: var(--ink); border: 2px solid var(--parch-line);
  font-size: var(--fs-sm); font-family: var(--pixel-font);
}
.chips button.on { background: var(--leaf); color: #fff7e0; border-color: var(--px-out); }

/* lista com rolagem própria (o título e o rodapé ficam sempre visíveis) */
.sheet-list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.sheet-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; position: relative; }
.sheet-foot:empty { display: none; }

.item-row {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; background: var(--parch-hi); border: 2px solid var(--parch-line);
}
.item-row.is-dim { opacity: 0.6; }
.item-icon {
  position: relative; width: 50px; height: 50px; display: grid; place-items: center;
  font-size: 30px; background: var(--parch-2); border: 2px solid var(--parch-line);
}
.item-icon .px-icon, .ind-chip .px-icon { image-rendering: pixelated; vertical-align: middle; }
.ind-chip .px-icon { width: 18px; height: 18px; margin-right: 2px; }
.item-count {
  position: absolute; right: -6px; bottom: -6px; min-width: 22px; padding: 1px 4px; text-align: center;
  background: var(--wood-3); color: #fff7e0; border: 2px solid var(--px-out); font-size: var(--fs-xs); line-height: 1.2;
}
.item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-text strong { color: var(--ink); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-text small { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.25; }
.item-tag { font-size: var(--fs-sm); color: var(--leaf-t); white-space: nowrap; }
.item-row.is-dim .item-tag { color: var(--ink-soft); font-size: 22px; }

/* botões pixel padrão */
.ui-btn {
  min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap; max-width: 100%;
  font-family: var(--pixel-font); font-size: 17px; color: #fff7e0;
  border: 3px solid var(--px-out); background: var(--leaf);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.25);
  overflow: hidden; text-overflow: ellipsis;
}
.ui-btn:hover:not(:disabled) { filter: brightness(1.08); }
.ui-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(255,255,255,0.2), inset 0 3px 0 rgba(0,0,0,0.25); }
.ui-btn:disabled { background: #b9a684; color: #f3e3b8; cursor: not-allowed; box-shadow: none; }
.ui-btn-gold { background: #c98a1c; }
.ui-btn-wood { background: var(--wood-2); }
.ui-btn-wide { width: 100%; min-height: 46px; font-size: 18px; flex: 0 0 auto; }

/* quantidade */
.qty-pick { display: flex; align-items: center; gap: 8px; }
.qty-pick span { color: var(--ink-soft); margin-right: auto; }
.qty-pick button {
  width: 52px; min-height: 38px; cursor: pointer; font-family: var(--pixel-font); font-size: 18px;
  background: var(--parch-2); color: var(--ink); border: 2px solid var(--parch-line);
}
.qty-pick button.on { background: var(--parch-hi); border: 3px solid var(--px-out); }
.seed-filter { margin: 0 0 8px; }
.seed-filter button { width: auto; flex: 1; padding: 0 8px; font-size: 16px; }

/* aviso curto */
.sheet-toast {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); text-align: center; pointer-events: none;
  padding: 8px 10px; background: var(--leaf); color: #fff7e0; border: 3px solid var(--px-out);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s;
}
.sheet-toast.show { opacity: 1; transform: none; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 12px; text-align: center; color: var(--ink-soft); }
.empty-state span { font-size: 44px; }
.empty-state strong { color: var(--ink); font-size: 20px; }

/* bolsa de sementes */
.seed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 2px; }
.seed-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; cursor: pointer;
  background: var(--parch-hi); border: 2px solid var(--parch-line); font-family: var(--pixel-font); color: var(--ink);
}
.seed-tile:hover { border-color: var(--wood-3); }
.seed-tile-icon { font-size: 34px; line-height: 1.1; }
.seed-tile strong { font-size: 17px; font-weight: normal; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seed-tile small { font-size: var(--fs-sm); color: var(--ink-soft); }
.seed-tile.on { background: #f6e39a; border: 3px solid var(--px-out); box-shadow: 0 0 0 3px #fff3d0; }
.seed-tile.is-empty { opacity: 0.6; }
.seed-tile.is-empty small { color: var(--leaf-t); }

/* chip "Plantando: Trigo ×10" */
.seed-chip {
  position: absolute; left: 16px; bottom: 18px; z-index: 30; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px;
  font-family: var(--pixel-font); color: var(--ink);
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 2px var(--wood-1), 3px 4px 0 rgba(20,10,4,0.45);
}
.seed-chip:hover { background: var(--parch-hi); }
.seed-chip-icon { font-size: 28px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--parch-2); border: 2px solid var(--parch-line); }
.seed-chip-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.seed-chip-text small { font-size: var(--fs-xs); color: var(--ink-soft); }
.seed-chip-text strong { font-size: 18px; font-weight: normal; }
.seed-chip-count { font-size: 16px; color: var(--gold-t); }
.seed-chip.is-empty { animation: chipNudge 2.4s ease-in-out infinite; }
.seed-chip.is-empty .seed-chip-count { color: var(--leaf-t); font-size: 22px; }
@keyframes chipNudge { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-4px); } }

html.is-phone .seed-chip { left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px); padding: 4px 10px 4px 6px; }
html.is-phone .seed-chip-icon { width: 34px; height: 34px; font-size: 24px; }

/* chip "Melhoria pronta" da Oficina: aparece acima do chip da semente quando dá para comprar */
.tool-chip { bottom: 84px; }
.tool-chip .seed-chip-icon { animation: toolGlow 1.6s ease-in-out infinite; }
@keyframes toolGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 50% { box-shadow: 0 0 10px 3px rgba(250, 204, 21, 0.9); } }
html.is-phone .tool-chip { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 146px); }
body.arch-on #tool-chip { display: none !important; }

/* celular: janelas sobem de baixo, largura total */
html.is-phone .modal-overlay:has(> .sheet) { align-items: flex-end; padding: 0; }
html.is-phone .modal-box.sheet {
  width: 100% !important; max-width: 100% !important;
  max-height: calc(var(--app-h, 100dvh) - 56px) !important;
  padding: 16px 14px max(14px, env(safe-area-inset-bottom)) !important;
  border-bottom: 0 !important;
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
html.is-phone .item-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
html.is-phone .item-icon { width: 46px; height: 46px; font-size: 26px; }
html.is-phone .ui-btn { padding: 0 10px; font-size: 16px; }

/* menos ruído: os "!" de ajuda espalhados saem; a explicação fica nas próprias telas */
.info-badge { display: none !important; }

/* dock no celular: ícone + nome curto (sempre dá para saber o que cada botão faz) */
html.is-narrow .dock-btn-label { display: block; font-size: 0 !important; line-height: 1; }
html.is-narrow .dock-btn-label::after { content: attr(data-short); font-size: var(--fs-xs); letter-spacing: 0; }
html.is-narrow .dock-hub-btn { position: relative; min-height: 54px; padding: 4px 2px; gap: 3px; }
html.is-narrow .dock-btn-icon { font-size: 20px; }
html.is-narrow #dock-btn-barn .dock-sub-info {
  position: absolute; top: -8px; right: -4px; padding: 0 3px; line-height: 1.3;
  background: var(--parch-hi); border: 2px solid var(--px-out); font-size: 11px !important;
}

/* abas: a selecionada é a escura com texto claro (igual às categorias) */
.seg { background: var(--parch-2); }
.seg button { color: var(--ink-soft); }
.seg button.on { background: var(--wood-3); color: #fff7e0; box-shadow: inset 0 3px 0 rgba(255,255,255,0.18); }
/* nomes longos quebram em 2 linhas em vez de cortar */
.item-text strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; }
html.is-narrow .dock-btn-label::after { font-size: 11px; letter-spacing: -0.5px; white-space: nowrap; }
html.is-narrow #farm-hub-dock { gap: 3px; padding: 5px; }

/* =====================================================================
   VIZINHOS — gaveta larga, nome legível, um botão por vizinho
   ===================================================================== */
#friends-sidebar { top: 96px; transform: translateX(calc(100% - 38px)); }
#friends-sidebar.open { transform: none; }
#friends-panel {
  width: 340px; max-height: calc(var(--app-h, 100vh) - 130px);
  padding: 14px 14px 12px !important; gap: 10px; display: flex; flex-direction: column; overflow: hidden;
}
.nb-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px dashed var(--parch-line); }
.nb-head h2 { margin: 0 auto 0 0; font-size: var(--fs-md); font-weight: normal; color: var(--ink); }
.nb-icon-btn {
  width: 38px; height: 38px; cursor: pointer; font-size: 20px; display: grid; place-items: center;
  background: var(--parch-2); border: 2px solid var(--parch-line);
}
.nb-icon-btn:hover { border-color: var(--wood-3); }
.nb-head .close-btn { width: 38px; height: 38px; font-size: 18px; }
.nb-search { display: flex; gap: 8px; }
.nb-search input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px !important; }
.nb-search .ui-btn { width: 46px; padding: 0; flex: 0 0 auto; }
.nb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nb-actions .ui-btn { width: 100%; padding: 0 6px; font-size: 16px; }
#btn-radar-random-neighbors { background: var(--sky); }
.nb-tabs button { min-height: 38px; font-size: 17px; }
.nb-tabs small { font-size: var(--fs-xs); opacity: 0.85; }
.nb-list { flex: 1 1 auto; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }

#friends-panel .friend-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 8px; cursor: pointer;
}
#friends-panel .friend-avatar { font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--parch-hi); border: 2px solid var(--parch-line); }
#friends-panel .friend-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#friends-panel .friend-info strong { font-size: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#friends-panel .friend-info small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--ink-soft); font-size: var(--fs-sm); }
#friends-panel .friend-info small span { color: inherit; font-size: inherit; }
.nb-icons { letter-spacing: 2px; }
#friends-panel .nb-wait { color: var(--berry-t); }
.nb-mini {
  width: 34px; height: 34px; padding: 0; cursor: pointer; font-size: 15px; display: grid; place-items: center;
  background: var(--parch-hi); border: 2px solid var(--leaf); color: var(--leaf-t);
}
.nb-mini-quiet { border-color: var(--parch-line); color: var(--ink-faint); }
.nb-mini-quiet:hover { border-color: var(--berry); color: var(--berry-t); }
#friends-panel .btn-visit-friend-action { min-height: 36px; padding: 0 12px; font-size: 16px; }

html.is-phone #friends-sidebar { top: 92px; }
html.is-phone #friends-panel { width: calc(var(--app-w, 100vw) - 46px); max-height: calc(var(--app-h, 100dvh) - 200px); }
#friends-panel .friend-info strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; overflow-wrap: anywhere; }
html.is-desktop #friends-panel { width: 360px; }

/* Celeiro */
.barn-cap { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.barn-cap-top { display: flex; justify-content: space-between; color: var(--ink-soft); }
.barn-cap-top strong { color: var(--ink); font-size: 18px; font-weight: normal; }
.barn-bar { height: 14px; background: var(--parch-2); border: 2px solid var(--px-out); }
#barn-modal-bar-fill { height: 100%; width: 0; background: #78b84a !important; box-shadow: inset 0 3px 0 #9bd35a !important; transition: width .3s; }
#barn-modal-bar-fill.is-warn { background: #e8b43a !important; box-shadow: inset 0 3px 0 #f6d55c !important; }
#barn-modal-bar-fill.is-full { background: #d9564a !important; box-shadow: inset 0 3px 0 #f08070 !important; }
#barn-foot .item-row { background: var(--parch-2); }
/* chips dentro de listas (escolha do cão) */
.sheet-list > .chips { padding: 2px 0; }
html.is-phone .seg button { font-size: 16px; }
#modal-mailbox .sheet-list { min-height: 0; }
.dog-fun { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dog-fun .ui-btn { min-height: 44px; }

/* Botão de configurações no HUD */
.hud-gear {
  flex: 0 0 auto; width: 46px; height: 46px; cursor: pointer; font-size: 22px; display: grid; place-items: center;
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 2px var(--wood-1), 3px 4px 0 rgba(20,10,4,0.45);
  order: 2; pointer-events: auto;
}
.hud-gear:hover { background: var(--parch-hi); }
.hud-gear:active { transform: translateY(1px); }
html.is-phone .hud-gear { width: 42px; height: 42px; font-size: 20px; }

/* Configurações */
.set-h { margin: 6px 0 0; font-size: 18px !important; font-weight: normal; color: var(--wood-3); border-bottom: 2px dashed var(--parch-line); padding-bottom: 4px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--parch-hi); border: 2px solid var(--parch-line); cursor: pointer; }
.set-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row strong { font-size: 17px; font-weight: normal; color: var(--ink); }
.set-row small { color: var(--ink-soft); font-size: var(--fs-sm); }
.tog { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 52px !important; height: 28px !important; margin: 0;
  background: #b9a684 !important; border: 3px solid var(--px-out) !important; position: relative; cursor: pointer; padding: 0 !important; box-shadow: none !important; }
.tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--parch-hi); border: 2px solid var(--px-out); box-sizing: border-box; transition: left .15s; }
.tog:checked { background: var(--leaf) !important; }
.tog:checked::after { left: 26px; }
#modal-settings .sheet-list { gap: 10px; }
.set-row.set-col { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.set-seg { display: flex; gap: 0; border: 3px solid var(--px-out); background: var(--parch-3); }
.set-seg button { flex: 1; min-height: 38px; padding: 6px 4px; margin: 0; border: 0; border-right: 2px solid var(--px-out);
  background: var(--parch-2); color: var(--ink); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; }
.set-seg button:last-child { border-right: 0; }
.set-seg button:hover { background: var(--parch-hi); }
.set-seg button[aria-checked="true"] { background: var(--leaf); color: #fff7e0; text-shadow: 0 2px 0 var(--px-out); }
/* Configurações → Aparência → Tamanho do texto: Grande */
:root[data-text="grande"] { --fs-xs: 14px; --fs-sm: 18px; --fs-md: 23px; --fs-lg: 34px; }
:root[data-text="grande"] .set-row strong { font-size: 20px; }
/* Configurações → Mostrar FPS */
#fps-badge { position: absolute; right: 10px; top: 10px; z-index: 40; pointer-events: none; padding: 2px 6px;
  background: rgba(20, 14, 8, 0.72); color: #d9f99d; font-size: var(--fs-xs); line-height: 1.3; }

/* =====================================================================
   VIZINHOS v3 — janela central (igual às outras), 3 abas e cartões que dizem o que fazer
   ===================================================================== */
#friends-sidebar.nb-overlay {
  position: absolute; inset: 0; z-index: 100; transform: none !important; transition: none;
  display: none; justify-content: center; align-items: center; background: rgba(23, 14, 6, 0.62);
}
#friends-sidebar.nb-overlay.open { display: flex; }
#friends-sidebar #btn-toggle-friends { display: none !important; }
#friends-panel.sheet { width: 500px !important; max-width: calc(100% - 32px); max-height: min(84%, 720px) !important; padding: 18px 20px 16px !important; }
html.is-phone #friends-sidebar.nb-overlay { align-items: flex-end; }
html.is-phone #friends-panel.sheet { width: 100% !important; max-width: 100%; max-height: calc(var(--app-h, 100dvh) - 56px) !important; border-bottom: 0 !important; animation: sheetUp .22s ease-out; padding: 16px 14px max(14px, env(safe-area-inset-bottom)) !important; }
.nb-explain { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-soft); font-size: var(--fs-sm); }
.nb-explain b { color: var(--ink); font-weight: normal; }
.nb-find { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.nb-quota { color: var(--ink-soft); font-size: var(--fs-sm); text-align: center; }
.nb-quota b { color: var(--ink); font-weight: normal; }
#btn-radar-random-neighbors { background: var(--sky); }

#friends-panel .friend-card {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px; background: var(--parch-hi); border: 2px solid var(--parch-line); border-left-width: 6px; cursor: pointer;
}
#friends-panel .friend-card.nb-good { border-left-color: #c98a1c; }
#friends-panel .friend-card.nb-help { border-left-color: var(--sky); }
#friends-panel .friend-card.nb-calm { border-left-color: var(--parch-line); }
#friends-panel .friend-avatar { width: 48px; height: 48px; font-size: 30px; display: grid; place-items: center; background: var(--parch-2); border: 2px solid var(--parch-line); }
#friends-panel .friend-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#friends-panel .friend-info strong { font-size: 19px; color: var(--ink); font-weight: normal; line-height: 1.1; overflow-wrap: anywhere; }
#friends-panel .friend-info strong em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-faint); }
#friends-panel .nb-todo { color: var(--ink); font-size: var(--fs-sm); }
#friends-panel .nb-left { color: var(--leaf-t); font-size: var(--fs-xs); }
#friends-panel .nb-left.is-wait { color: var(--berry-t); }
.nb-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.nb-btns .ui-btn { min-height: 40px; padding: 0 14px; }
#friends-panel .nb-mini { width: auto; height: 28px; padding: 0 8px; font-size: var(--fs-xs); font-family: var(--pixel-font); }
html.is-phone #friends-panel .friend-card { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
html.is-phone #friends-panel .friend-avatar { width: 42px; height: 42px; font-size: 26px; }
#friends-sidebar.nb-overlay { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; }

/* =====================================================================
   MODO ARQUITETO — bandeja de enfeites + botões flutuantes sobre o objeto
   ===================================================================== */
.arch-tray {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 900;
  width: min(620px, calc(100% - 24px)); box-sizing: border-box; pointer-events: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 3px var(--wood-2), inset 0 0 0 6px var(--wood-3), 0 8px 0 rgba(20,10,4,0.35);
  font-family: var(--pixel-font); color: var(--ink);
  animation: sheetUp .22s ease-out;
}
.arch-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 0; }
.arch-icon { font-size: 26px; line-height: 1; }
.arch-info { flex: 1; margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.25; min-width: 0; }
.arch-info b { display: block; color: var(--ink); font-size: 18px; font-weight: normal; }
#player-architect-done { flex: 0 0 auto; min-height: 44px; padding: 0 16px; font-size: 18px; }
.arch-stock { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; }
.arch-card {
  position: relative; flex: 0 0 auto; width: 76px; height: 82px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--parch-hi); border: 2px solid var(--parch-line); font-family: var(--pixel-font); color: var(--ink);
  transition: transform .12s;
}
.arch-card:hover { transform: translateY(-3px); border-color: var(--wood-3); }
.arch-card.on { background: #f6e39a; border: 3px solid var(--px-out); transform: translateY(-4px); box-shadow: 0 4px 0 var(--wood-3); }
.arch-card-icon { font-size: 32px; line-height: 1.1; }
.arch-card small { font-size: var(--fs-xs); color: var(--ink-soft); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-card-n { position: absolute; top: -6px; right: -6px; min-width: 22px; padding: 0 4px; background: var(--wood-3); color: #fff7e0; border: 2px solid var(--px-out); font-size: var(--fs-xs); font-weight: normal; line-height: 1.4; }
.arch-card-shop { border-style: dashed; background: var(--parch-2); }

.arch-actions {
  position: absolute; z-index: 910; transform: translate(-50%, -100%); pointer-events: auto;
  display: flex; gap: 8px; padding: 6px; background: rgba(43, 29, 20, 0.35); border-radius: 30px;
  animation: archPop .18s ease-out;
}
@keyframes archPop { from { transform: translate(-50%, -80%) scale(.7); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.arch-act {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 22px; display: grid; place-items: center;
  background: var(--parch-hi); border: 3px solid var(--px-out); color: var(--ink); font-family: var(--pixel-font);
  box-shadow: inset 0 -3px 0 var(--parch-3), 0 3px 0 rgba(20,10,4,0.4);
}
.arch-act:hover { transform: translateY(-2px); }
.arch-act:active { transform: translateY(1px); }
.arch-ok { background: #78b84a; color: #fff7e0; box-shadow: inset 0 -3px 0 #3e7a2c, 0 3px 0 rgba(20,10,4,0.4); font-size: 26px; }
.arch-no { background: #e7a093; color: #5a1a12; box-shadow: inset 0 -3px 0 #b0584a, 0 3px 0 rgba(20,10,4,0.4); }
body.arch-on #seed-chip, body.arch-on #hud-settings-btn { display: none !important; }
html.is-phone .arch-tray { bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px; }
html.is-phone .arch-card { width: 66px; height: 74px; }
html.is-phone .arch-act { width: 52px; height: 52px; }
#player-architect-toolbar.arch-tray { padding: 12px 14px !important; }
html.is-phone .arch-icon { display: none; }
html.is-phone .arch-info b { font-size: 16px; }
#player-architect-undo { min-height: 44px; width: 48px; padding: 0; font-size: 22px; flex: 0 0 auto; }

/* Desenhos próprios no lugar de qualquer emoji (GlyphArt.js) */
.ic-px {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 0.04em;
  background: center / contain no-repeat; image-rendering: pixelated; font-style: normal;
}

/* Moeda de ouro em pixel art (substitui o emoji 🪙 em toda a interface) */
.ic-coin {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin: 0 0.06em;
  background: url('../assets/ui/coin.svg') center / contain no-repeat;
  image-rendering: pixelated; font-style: normal;
}
.coin-icon-badge .ic-coin { width: 20px; height: 20px; vertical-align: middle; }

/* Janelas com abas: altura fixa (só a lista rola), para não "pular" ao trocar de aba */
.modal-box.sheet.market, #modal-upgrades .modal-box.sheet, #friends-panel.sheet, #modal-settings .modal-box.sheet {
  height: min(640px, 84%); max-height: none !important;
}
html.is-phone .modal-box.sheet.market, html.is-phone #modal-upgrades .modal-box.sheet,
html.is-phone #friends-panel.sheet, html.is-phone #modal-settings .modal-box.sheet {
  height: calc(var(--app-h, 100dvh) - 96px); max-height: none !important;
}
.sheet .sheet-list { min-height: 0; }

/* =====================================================================
   CASA DOS BICHOS
   ===================================================================== */
.ranch-sheet { height: min(680px, 88%); max-height: none !important; }
html.is-phone .ranch-sheet { height: calc(var(--app-h, 100dvh) - 70px); }
.ranch-info { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-soft); font-size: var(--fs-sm); flex: 0 0 auto; }
.ranch-info b { color: var(--ink); font-weight: normal; }
.animal-row { grid-template-columns: 50px minmax(0, 1fr) auto !important; }
.an-avatar { font-size: 30px; }
.an-mood { position: absolute; right: -8px; bottom: -8px; font-size: 18px; font-weight: normal; }
.an-name { display: flex !important; align-items: center; gap: 4px; }
.an-edit { background: none; border: 0; cursor: pointer; font-size: 14px; padding: 2px; opacity: .7; }
.an-edit:hover { opacity: 1; }
.an-name-input { width: 100%; min-height: 32px; font-size: 17px !important; padding: 0 8px !important; }
.an-bar { display: block; height: 8px; background: var(--parch-2); border: 2px solid var(--px-out); margin: 3px 0; max-width: 160px; }
.an-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9564a, #f2c94c 45%, #78b84a); }
.an-ready { color: var(--gold-t); font-weight: normal; }
.an-hungry { color: var(--berry-t); font-weight: normal; }
.an-btns { display: flex; gap: 6px; align-items: center; }
.an-btns .arch-act { width: 40px; height: 40px; font-size: 18px; }
.an-btns .arch-act:disabled { opacity: .4; cursor: default; }
.an-btns .ui-btn { min-width: 52px; font-size: 22px; padding: 0 8px; }
.animal-row.is-ready { border-color: var(--gold); background: #fff6d6; }
.animal-row.is-hungry .an-avatar { filter: saturate(.6); }
.ranch-bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ranch-bulk .ui-btn { width: 100%; }
.ranch-sell { background: var(--berry) !important; font-size: 15px !important; min-height: 38px !important; }

/* Painel de Admin */
.admin-sheet { width: 640px !important; height: min(720px, 90%); max-height: none !important; }
html.is-phone .admin-sheet { height: calc(var(--app-h, 100dvh) - 40px); }
.adm-lock { min-height: 36px; width: 40px; padding: 0; margin-right: 6px; }
.adm-status { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-sm); color: var(--ink); background: var(--parch-2); border: 2px solid var(--parch-line); padding: 6px 10px; flex: 0 0 auto; }
.adm-group { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-bottom: 2px dashed var(--parch-line); }
.adm-group h3 { margin: 0; font-size: 17px !important; font-weight: normal; color: var(--wood-3); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.adm-btn { min-height: 38px; font-size: 15px; white-space: normal; line-height: 1.1; padding: 4px 8px; }
.adm-danger { background: var(--berry) !important; }
.adm-inline { display: flex; gap: 6px; align-items: center; }
.adm-inline input[type=number] { flex: 1; min-height: 38px; }
.adm-inline input[type=range] { flex: 1; }
.adm-inline b { min-width: 48px; font-weight: normal; color: var(--ink); }
#adm-json { width: 100%; min-height: 60px; font-family: monospace; font-size: 12px; }
.adm-hint { margin: 0; font-size: 14px; color: var(--ink); opacity: .8; line-height: 1.25; }
.adm-tag { font-size: 12px; background: var(--sky, #bfe3ff); color: #2b1d14; padding: 1px 6px; border: 1px solid var(--parch-line); vertical-align: middle; }
.adm-forced { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #9a3412; }
.adm-mini { min-height: 28px; padding: 2px 8px; font-size: 13px; }
.adm-tabs button { white-space: nowrap; }
.adm-log { flex: 0 0 auto; height: 74px; overflow-y: auto; font-family: monospace; font-size: 12px; color: #c7f2a4; background: #2b1d14; border: 2px solid var(--px-out); padding: 4px 8px; }
#market-list .item-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Cartão "Enquanto você estava fora" ---- */
.away-card .away-row strong { font-weight: normal; }
.away-card .away-kind { font-size: 18px; }
.away-actions { display: flex; gap: 8px; justify-content: center; padding: 10px 6px 4px; flex-wrap: wrap; }
.away-actions .ui-btn { min-width: 140px; }
.ui-btn.btn-berry { background: var(--berry); }
.ui-btn.btn-green { background: var(--leaf); }
.rank-head { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 4px 0 8px; }
.rank-seg { display: flex; }
.rank-likes { opacity: .85; }
.rank-pos { display: inline-block; min-width: 26px; }
.rank-seg button { padding: 4px 14px; }
.rank-row.is-me { outline: 3px solid var(--gold); outline-offset: -3px; }

/* ======== Objetivo sempre visível ======== */
.goal-strip { position: absolute; top: 168px; left: 12px; width: 330px; z-index: 20; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.goal-strip .goal-main { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; cursor: pointer;
  background: var(--parch); color: var(--ink); border: 3px solid var(--px-out); box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3), 0 3px 0 #0005; font-family: inherit; }
.goal-strip .goal-main:hover { filter: brightness(1.04); }
.goal-icon { font-size: 22px; flex: none; width: 30px; text-align: center; }
.goal-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.goal-text strong { font-size: var(--fs-sm); font-weight: normal; line-height: 1.15; }
.goal-text small { font-size: var(--fs-xs); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-bar { display: block; height: 6px; margin-top: 3px; background: var(--parch-3); border: 1px solid var(--px-out); }
.goal-bar i { display: block; height: 100%; background: var(--leaf); transition: width .3s; }
.goal-count { font-size: var(--fs-sm); color: var(--leaf-t); flex: none; }
.goal-strip.is-claim .goal-main { background: #f6d55c; animation: goalPulse 1.1s ease-in-out infinite; }
.goal-strip.is-tut .goal-main { background: #fff3d0; border-color: #c98a1c; }
.goal-skip { align-self: flex-end; background: var(--wood-3); color: #fff3d0; border: 2px solid var(--px-out); font-family: inherit; font-size: var(--fs-xs); padding: 1px 8px; cursor: pointer; }
.goal-skip.confirm { background: var(--berry); }
.goal-weekend { align-self: flex-start; background: #2a6f9a; color: #fff3d0; border: 2px solid var(--px-out); font-size: var(--fs-xs); padding: 2px 8px; }
@keyframes goalPulse { 50% { transform: translateY(-2px); box-shadow: inset 2px 2px 0 #fff3a6, 0 5px 0 #0005, 0 0 14px #fde04788; } }
html.is-phone .goal-strip { top: calc(max(8px, env(safe-area-inset-top)) + 124px); left: max(8px, env(safe-area-inset-left)); width: min(300px, calc(100vw - 16px)); }

/* ======== Setinha do tutorial ======== */
.tut-arrow { position: fixed; z-index: 9999; width: 0; height: 0; pointer-events: none; }
.tut-arrow::before { content: ''; position: absolute; left: -18px; top: -44px; width: 36px; height: 40px; animation: tutBob .7s ease-in-out infinite; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10' shape-rendering='crispEdges'><path fill='%232b1d14' d='M2 0h5v5h2v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h2z'/><path fill='%23f6d55c' d='M3 1h3v5h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1z'/><path fill='%23fff3a6' d='M3 1h1v5h-1z'/></svg>") center / contain no-repeat; filter: drop-shadow(0 3px 0 #0006); image-rendering: pixelated; }
@keyframes tutBob { 50% { transform: translateY(-9px); } }
body.tut-on .tut-target { outline: 3px solid #f6d55c; outline-offset: 2px; animation: tutGlow 1s ease-in-out infinite; }
@keyframes tutGlow { 50% { outline-color: #fff3a6; } }
body.tut-on #farm-hub-dock .dock-hub-btn:not(.tut-target) { opacity: .55; }

/* ======== Janelinha do tutorial ======== */
.tut-ask { max-width: 420px; text-align: center; padding: 22px !important; }
.tut-ask-art { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.tut-ask p { margin: 10px 0 16px; line-height: 1.35; }
.tut-ask small { opacity: .65; font-size: var(--fs-xs); }
.tut-ask-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.tut-ask-btns .ui-btn { min-width: 150px; min-height: 44px; }

/* ======== Faixa da sequência ======== */
.streak-banner { position: absolute; top: 14px; left: 50%; z-index: 70; width: min(420px, calc(100% - 24px)); transform: translate(-50%, -140%); transition: transform .35s cubic-bezier(.2,1.4,.4,1);
  background: var(--parch); border: 3px solid var(--px-out); box-shadow: inset 2px 2px 0 var(--parch-hi), inset -2px -2px 0 var(--parch-3), 0 4px 0 #0006; padding: 8px 12px; cursor: pointer; }
.streak-banner.in { transform: translate(-50%, 0); }
.streak-banner.out { transform: translate(-50%, -140%); }
.sb-top { display: flex; align-items: center; gap: 10px; }
.sb-top strong { display: block; font-weight: normal; font-size: 18px; }
.sb-top small { font-size: var(--fs-xs); opacity: .75; }
.sb-fire { font-size: 28px; }
.sb-gain { margin-left: auto; color: var(--leaf-t); white-space: nowrap; }
.sb-dots { display: flex; gap: 5px; margin-top: 6px; justify-content: center; }
.sb-dots i { width: 26px; height: 14px; border: 2px solid var(--px-out); background: var(--parch-3); font-style: normal; font-size: 10px; line-height: 10px; text-align: center; }
.sb-dots i.past { background: #f2c94c; }
.sb-dots i.now { background: #de7a2a; animation: goalPulse 1s infinite; }
.sb-decor { margin-top: 6px; text-align: center; color: #9a6a0c; font-size: var(--fs-sm); }

/* ======== Pedidos do dia ======== */
.order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 10px; margin-bottom: 8px;
  background: var(--parch-hi); border: 3px solid var(--px-out); box-shadow: inset -2px -2px 0 var(--parch-3); }
.order-card.is-ready { background: #fff7c8; box-shadow: inset -2px -2px 0 var(--parch-3), 0 0 0 2px #f6d55c; }
.order-card.is-done { opacity: .6; }
.order-card.is-merchant { background: #e6f1f8; }
.oc-head { display: flex; align-items: center; gap: 8px; grid-column: 1; }
.oc-head strong { display: block; font-weight: normal; }
.oc-head small { font-size: var(--fs-xs); opacity: .75; }
.oc-av { font-size: 26px; width: 34px; text-align: center; }
.oc-items { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.oc-chip { border: 2px solid var(--px-out); padding: 1px 6px; font-size: var(--fs-sm); background: var(--parch-2); }
.oc-chip.ok { background: #cfe9b4; }
.oc-chip.miss { background: #f3d1c8; }
.oc-chip b { font-weight: normal; }
.oc-reward { font-size: var(--fs-sm); color: #9a6a0c; }
.oc-btns { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: stretch; }
.oc-btns .ui-btn { min-height: 40px; min-width: 92px; }
.oc-done { font-size: 28px; color: var(--leaf-t); text-align: center; }
.orders-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 4px 0; font-size: var(--fs-xs); opacity: .85; }

/* ======== Novidade liberada ======== */
.unlock-card { max-width: 380px; }
.unlock-body { text-align: center; padding: 6px 4px 14px; }
.unlock-icon { font-size: 52px; line-height: 1.1; }
.unlock-body strong { display: block; font-weight: normal; font-size: 22px; margin: 4px 0; }
.unlock-body p { margin: 4px 0; }
.unlock-body small { opacity: .7; }

/* ======== Especialidade ======== */
.spec-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 8px; margin-top: 6px; background: #fff3c4; border: 2px solid var(--px-out); font-size: var(--fs-sm); }
.spec-row .ui-btn { min-height: 34px; flex: none; width: auto; min-width: 96px; white-space: nowrap; padding: 0 10px; }

/* ======== Criação da fazenda ======== */
.newfarm { background: radial-gradient(ellipse at center, #2f5f24cc, #0b1a08ee) !important; }
.newfarm-box { max-width: 440px; text-align: center; padding: 20px 22px !important; }
.nf-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.nf-steps i { width: 30px; height: 8px; border: 2px solid var(--px-out); background: var(--parch-3); }
.nf-steps i.on { background: #f2c94c; }
.nf-step p { margin: 6px 0 12px; line-height: 1.35; }
.nf-art { font-size: 46px; line-height: 1.1; animation: tutBob 1.4s ease-in-out infinite; }
#nf-name { width: 100%; font-size: 20px; text-align: center; padding: 10px; margin-bottom: 8px; }
.nf-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.nf-chips button { font-family: inherit; font-size: var(--fs-sm); background: var(--parch-2); border: 2px solid var(--px-out); padding: 3px 8px; cursor: pointer; }
.nf-chips button:hover { background: #fff3c4; }
.nf-err { display: block; min-height: 18px; color: var(--berry-t); }
.nf-dogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.nf-dog { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; cursor: pointer; font-family: inherit;
  background: var(--parch-hi); border: 3px solid var(--px-out); box-shadow: inset -2px -2px 0 var(--parch-3); }
.nf-dog.on { background: #fff3c4; box-shadow: 0 0 0 3px #f2c94c; transform: translateY(-2px); }
.nf-dog-icon { font-size: 34px; }
.nf-dog strong { font-weight: normal; font-size: 18px; }
.nf-dog small { font-size: var(--fs-xs); opacity: .75; line-height: 1.2; }
html.is-phone .nf-dogs { grid-template-columns: 1fr; }
html.is-phone .nf-dog { flex-direction: row; text-align: left; gap: 10px; }
.nf-reveal { position: absolute; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; padding-top: 18vh; }
.nf-reveal-sign { background: var(--wood-2); color: #fff3d0; border: 4px solid var(--px-out); box-shadow: inset 3px 3px 0 var(--wood-0), inset -3px -3px 0 var(--wood-4), 0 6px 0 #0007;
  padding: 10px 26px; text-align: center; transform: translateY(-160%) rotate(-2deg); transition: transform .6s cubic-bezier(.2,1.5,.4,1); }
.nf-reveal-sign small { display: block; font-size: 16px; opacity: .85; }
.nf-reveal-sign strong { display: block; font-weight: normal; font-size: 30px; text-shadow: 2px 2px 0 var(--wood-4); }
.nf-reveal.in .nf-reveal-sign { transform: translateY(0) rotate(-2deg); }
.nf-reveal.out { opacity: 0; transition: opacity .5s; }
.nf-genders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.nf-gender { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; cursor: pointer; font-family: inherit;
  background: var(--parch-hi); border: 3px solid var(--px-out); box-shadow: inset -2px -2px 0 var(--parch-3); }
.nf-gender.on { background: #fff3c4; box-shadow: 0 0 0 3px #f2c94c; transform: translateY(-2px); }
.nf-gender strong { font-weight: normal; font-size: 18px; }
/* personalização grátis do fazendeiro (Plano §6) */
.nf-custom { display: grid; gap: 6px; margin-bottom: 14px; }
.nf-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nf-swatches small { width: 52px; color: var(--ink-soft); font-size: var(--fs-sm); }
.nf-swatch { width: 24px; height: 24px; border: 2px solid var(--px-out); cursor: pointer; padding: 0; box-shadow: inset -2px -2px 0 rgba(0,0,0,.18); }
.nf-swatch.on { outline: 3px solid #f2c94c; outline-offset: 1px; }
.farmer-preview { image-rendering: pixelated; height: 110px; width: auto; }
.dog-preview { image-rendering: pixelated; height: 44px; width: auto; }

/* ======== ✨ Especiais (loja de visuais) ======== */
#market-cats .cat-premium { background: #f6d55c; }
.prem-head { padding: 6px 4px 8px; }
.prem-head strong { display: block; font-weight: normal; font-size: 20px; }
.prem-head small { color: var(--ink-soft); }
.prem-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px;
  background: var(--parch-hi); border: 3px solid var(--px-out); box-shadow: inset -2px -2px 0 var(--parch-3); }
.prem-card.is-on { background: #fff3c4; box-shadow: 0 0 0 3px #f2c94c; }
.prem-card.is-wide { background: linear-gradient(90deg, #fff3c4, var(--parch-hi)); }
.prem-art { display: flex; align-items: center; justify-content: center; height: 72px; }
.prem-pair { display: flex; gap: 6px; align-items: flex-end; }
.prem-pair-cell { display: grid; justify-items: center; gap: 2px; }
.prem-pair-cell small { font-size: 10px; color: var(--ink-soft); }
.prem-art canvas { image-rendering: pixelated; max-height: 72px; max-width: 72px; width: auto; height: auto; }
.prem-emoji { font-size: 44px; }
.prem-text strong { display: block; font-weight: normal; }
/* Plano F3: texto sem transparência, cor --ink-soft (~6:1 sobre o pergaminho, acima do AA 4,5:1) */
.prem-text small { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.25; display: block; }
.prem-card.is-wide .prem-text small { font-size: var(--fs-sm); color: var(--ink); }
.prem-card .ui-btn { min-width: 92px; min-height: 40px; }
.prem-foot { display: block; color: var(--ink-soft); font-size: var(--fs-xs); padding: 6px 4px 12px; text-align: center; }
html.is-phone .prem-card { grid-template-columns: 56px minmax(0, 1fr) auto; }

/* ======== Armazém: categorias em grade (nada escondido fora da tela) ======== */
.market-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 0 0 auto; }
.market-cats button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 48px; padding: 4px 2px; cursor: pointer;
  background: var(--parch-2); color: var(--ink); border: 2px solid var(--parch-line); font-size: var(--fs-sm); font-family: var(--pixel-font); }
.market-cats button span { font-size: 18px; line-height: 1; }
.market-cats button.on { background: var(--leaf); color: #fff7e0; border-color: var(--px-out); }
.market-cats button[style*="none"] + button { }

/* ======== ✨ Loja Especial (janela própria) ======== */
.store-tabs { margin-bottom: 6px; }
.store-gems { margin-left: 8px; font-size: var(--fs-sm); background: var(--parch-2); border: 2px solid var(--parch-line); padding: 1px 6px; }
.hud-gems-btn { cursor: pointer; }
.hud-gems-btn .hud-plus { font-size: 11px; margin-left: 2px; }
.prem-tag { display: inline-block; font-style: normal; font-size: 11px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }
.prem-tag.gem { background: #bfe6ff; color: #1d4e78; }
.prem-tag.brl { background: #ffe08a; color: #6b4a00; }

/* Pacote Fundador da Roça */
#store-tabs.store-tabs { grid-template-columns: repeat(5, 1fr); }
.founder-hero { display: grid; gap: 8px; padding: 10px; margin-bottom: 8px; background: linear-gradient(180deg, #fff3c4, var(--parch-hi));
  border: 3px solid var(--px-out); box-shadow: 0 0 0 3px #f2c94c, inset -2px -2px 0 var(--parch-3); }
.founder-show { display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: 80px; }
.founder-show canvas { image-rendering: pixelated; max-height: 80px; width: auto; height: auto; }
.founder-sun { font-size: 46px; line-height: 1; animation: founder-sway 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes founder-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.founder-head strong { display: block; font-weight: normal; font-size: 20px; }
.founder-head small { color: var(--ink-soft); font-size: var(--fs-sm); }
.founder-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--fs-sm); color: var(--ink); }
.founder-items li { display: flex; gap: 6px; align-items: baseline; }
.founder-items li span { width: 22px; text-align: center; flex: 0 0 auto; }
.founder-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.founder-tags em { font-style: normal; font-size: var(--fs-xs); background: #ffe08a; color: #6b4a00; padding: 1px 6px; border: 2px solid #c99a20; }
.founder-hero .ui-btn { min-height: 44px; }
.founder-note { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.25; }
.founder-wall-btn { width: 100%; margin-bottom: 8px; min-height: 40px; }
.founder-wall { display: grid; gap: 4px; margin-bottom: 8px; }
.founder-row { display: flex; gap: 8px; align-items: center; padding: 4px 8px; background: var(--parch-hi); border: 2px solid var(--parch-line); font-size: var(--fs-sm); }
.founder-row b { font-weight: normal; color: #8a5a00; min-width: 44px; }
.founder-row.is-me { background: #fff3c4; border-color: #f2c94c; }

/* ======== Missões: Hoje · Caminho · Conquistas ======== */
.mis-tabs { grid-template-columns: repeat(3, 1fr); margin-bottom: 6px; }
.mis-tabs button { position: relative; }
.tab-dot { position: absolute; top: 2px; right: 4px; background: #e2453c; color: #fff; font-size: 11px; min-width: 16px; line-height: 16px; border-radius: 8px; padding: 0 3px; font-weight: normal; }
.dq-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; margin: 6px 0;
  background: var(--parch-2); border: 3px solid var(--parch-line); }
.dq-card > *:not(button) { grid-column: 1; }
.dq-card > button { grid-column: 2; grid-row: 1 / span 4; }
.dq-card.dq-easy { border-left: 8px solid #7cc35a; }
.dq-card.dq-medium { border-left: 8px solid #f2c94c; }
.dq-card.dq-hard { border-left: 8px solid #e8613c; }
.dq-card.dq-week { border-left: 8px solid #8a6bc4; }
.wq-title { margin: 16px 0 0; font-size: 18px; font-weight: normal; border-top: 2px dashed var(--parch-line); padding-top: 12px; }
/* Semente do dia (loja de sementes e venda) */
.seed-day { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 4px 0 8px; background: var(--parch-hi); border: 2px solid var(--gold); border-radius: 6px; }
.seed-day-icon { font-size: 28px; line-height: 1; }
.seed-day-text { display: flex; flex-direction: column; min-width: 0; }
.seed-day-text small { color: var(--ink-soft); }
.dq-card.is-on { background: #fff6d6; border-color: var(--px-out); }
.dq-card.is-dim { opacity: .45; }
.dq-diff { font-size: var(--fs-sm); opacity: .85; }
.dq-goal { font-weight: normal; font-size: 17px; }
.dq-rew { opacity: .85; }
.dq-reroll { width: 100%; margin: 4px 0; }
.dq-chest { text-align: center; margin: 8px 0 2px; letter-spacing: 2px; }
.dq-chest small { display: block; letter-spacing: 0; opacity: .75; }
.mis-unlock { font-style: normal; font-size: 12px; background: #ffe08a; color: #6b4a00; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
.item-row.is-recipe { border-color: #d9a520; }
.ach-medals { margin-left: 4px; }
.rec-path { background: var(--parch-2); border: 2px solid var(--parch-line); margin: 4px 0; padding: 4px 8px; }
.rec-path summary { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.rec-path summary strong { font-weight: normal; flex: 1; }
.rec-path summary small { opacity: .75; }
.rec-path ol { margin: 4px 0 4px 18px; padding: 0; font-size: var(--fs-sm); }
.rec-path li { margin: 2px 0; }
.rec-path li b { font-weight: normal; text-decoration: underline; }
.rec-path li.is-now { color: #2f7a2a; }
.rec-path li em { font-style: normal; opacity: .8; }
.mis-bar { display: block; height: 8px; margin: 3px 0 2px; background: #d9c9a3; border: 2px solid var(--px-out, #3a2a1a); }
.mis-bar i { display: block; height: 100%; background: #6cbf4a; }
.mis-reward { display: block; opacity: .85; }
.ach-medals { letter-spacing: 1px; }
/* ======== Especialidades (máx. 2 fábricas) ======== */
.spec-head { background: #fff6d6; border: 3px solid #d9a520; padding: 8px 10px; margin-bottom: 6px; }
.spec-head strong { display: block; font-weight: normal; font-size: 17px; }
.spec-head small { display: block; opacity: .85; margin: 2px 0 6px; }
.spec-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.spec-slots b { font-weight: normal; text-align: center; padding: 4px; background: var(--leaf, #5a9a3a); color: #fff7e0; border: 2px solid var(--px-out, #3a2a1a); }
.spec-slots b.free { background: transparent; color: inherit; border-style: dashed; opacity: .7; }
.ui-btn.ui-btn-danger { background: #e2453c !important; color: #fff !important; }

/* ======== 📦 Baú de Troca ======== */
.trade-lot { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; margin: 4px 0; background: var(--parch-2); border: 2px solid var(--parch-line); }
.trade-lot .item-text strong { display: block; font-weight: normal; }
.trade-form { display: grid; gap: 6px; padding: 8px 10px; margin: 4px 0 10px; background: #fff6d6; border: 3px dashed #d9a520; }
.trade-form label { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.trade-form input, .trade-form select { font: inherit; padding: 4px; min-width: 0; border: 2px solid var(--parch-line); background: #fffdf5; }
.trade-form small { opacity: .85; }
.trade-offer { padding: 8px 10px; margin: 6px 0; background: var(--parch-2); border: 3px solid var(--parch-line); }
.trade-offer b { font-weight: normal; text-decoration: underline; }
.to-give { margin: 2px 0; }
.to-fee { display: block; color: #a8481f; }
.to-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }

/* Plano P3: balãozinho com o XP atual, o que falta e o nível seguinte (mouse ou toque na barra) */
.xp-bar-container { position: relative; cursor: help; }
.hud-xp-tip { position: fixed; left: 0; top: 0; z-index: 9999;
  background: var(--parch-hi, #fff3d0); color: var(--ink, #4a2e1a); border: 2px solid var(--px-out, #3b2414);
  padding: 4px 8px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.hud-xp-tip[hidden] { display: none; }

/* Mural de Conquistas: cartão da fazenda + conquistas resgatadas */
.mural-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--parch-2, #efe0b8); border: 2px solid var(--parch-line, #c9a96a); }
.mural-card .mural-avatar { font-size: 34px; line-height: 1; }
.mural-card .mural-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mural-card .mural-who strong { font-size: 18px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mural-card .mural-who small { color: var(--ink-soft, #6b5236); }
.mural-card .mural-medals { font-size: 16px; white-space: nowrap; }
.mural-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; text-align: center; }
.mural-stats div { padding: 6px 4px; background: var(--parch, #f6ead0); border: 2px solid var(--parch-line, #c9a96a); }
.mural-stats b { display: block; font-size: 18px; font-weight: normal; }
.mural-stats small { color: var(--ink-soft, #6b5236); }

/* Créditos (Configurações > Créditos) */
.credits { text-align: center; padding: 4px 2px 8px; }
.credits-game { font-size: 22px; margin: 4px 0 12px; }
.credits-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 8px; background: var(--parch-2, #efe0b8); border: 2px solid var(--parch-line, #c9a96a); }
.credits-role { color: var(--ink-soft, #6b5236); font-size: 14px; }
.credits-name { font-size: 20px; font-weight: normal; }
.credits-thanks { margin: 12px 0 0; color: var(--ink-soft, #6b5236); }

/* Pedidos da comunidade (topo do quadro de pedidos) */
.co-box { display: flex; flex-direction: column; gap: 8px; }
.festa-card { grid-template-columns: minmax(0, 1fr); background: #fdf0d2; box-shadow: inset -2px -2px 0 var(--parch-3), 0 0 0 2px #f08a24; }
.festa-card.is-festa-done { background: #e9f6d8; box-shadow: inset -2px -2px 0 var(--parch-3), 0 0 0 2px #78b84a; }
.festa-rows { display: flex; flex-direction: column; gap: 6px; }
.festa-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.festa-name { font-size: var(--fs-sm); }
.festa-name b { font-weight: normal; opacity: .8; }
.festa-bar { grid-column: 1; display: flex; height: 10px; background: var(--parch-2); border: 2px solid var(--px-out); overflow: hidden; }
.festa-bar i { display: block; height: 100%; }
.festa-bar i.p { background: #f08a24; }
.festa-bar i.v { background: #f6c27a; }
.festa-row .ui-btn, .festa-row .oc-done { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; min-width: 92px; }
.festa-foot { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); opacity: .85; }
.co-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; }
.co-head strong { font-size: 17px; font-weight: normal; }
.co-vila { margin-top: 6px; border-top: 2px dashed var(--parch-line, #c9a96a); padding-top: 8px; }
.co-mine { display: flex; flex-direction: column; gap: 6px; }
.co-sub { color: var(--ink-soft, #6b5236); }
.co-more { align-self: center; }
.order-card.is-community .oc-av { background: #e8f3d8; }

.hud-title { display: block; font-size: 11px; color: #f2c94c; text-shadow: 1px 1px 0 #2b1d14; line-height: 1.1; }

/* Clima do dia (Mundo): etiqueta discreta acima do cartão de perfil */
.hud-weather { position: absolute; top: 2px; left: 8px; font-size: 12px; color: #fff7e0; text-shadow: 1px 1px 0 #2b1d14; pointer-events: none; z-index: 3; }
.hud-weather[hidden] { display: none; }
/* Afinidade com vizinhos (corações) e confirmação do jogo */
#friends-panel .nb-aff { display: block; font-size: var(--fs-xs); color: var(--berry-t); letter-spacing: -1px; }
.aff-mini { font-size: 10px; letter-spacing: -1px; margin-left: 4px; }
.confirm-overlay { z-index: 3000; }
.confirm-card { max-width: 360px; }
.confirm-text { margin: 10px 4px 16px; line-height: 1.4; }
.confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
#friends-panel .aff-head { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 2px 0 8px; text-align: center; }
#friends-panel .aff-sum { display: flex; gap: 10px; font-size: var(--fs-sm); }
#friends-panel .aff-rules { font-size: var(--fs-xs); opacity: .85; }
#friends-panel .aff-lv { display: inline; font-size: var(--fs-xs); opacity: .7; }
#friends-panel .aff-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.18); overflow: hidden; margin: 3px 0 2px; }
#friends-panel .aff-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f472b6, #fb7185); }
#friends-panel .aff-enemy .aff-bar i, #friends-panel .aff-wary .aff-bar i { background: #a8a29e; }
#friends-panel .aff-next, #friends-panel .aff-mood { display: block; font-size: var(--fs-xs); }
#friends-panel .aff-mood { color: var(--berry-t); }
#friends-panel .nb-tabs:has(> button:nth-child(4):not([style*="none"])) button { font-size: 13px; padding-left: 2px; padding-right: 2px; white-space: nowrap; }
#friends-panel .aff-card .friend-avatar { align-self: center; }

/* =====================================================================
   MEU PERFIL — ver e editar (ícone grátis; nomes custam 💎)
   ===================================================================== */
#modal-player-profile .sheet-list { gap: 10px; }
.prof-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--parch-hi); border: 2px solid var(--parch-line); }
.prof-avatar { flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: var(--parch-2); border: 3px solid var(--px-out); }
.prof-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof-info strong { font-size: var(--fs-md); font-weight: normal; color: var(--ink); overflow-wrap: anywhere; }
.prof-info small { color: var(--wood-3); font-size: var(--fs-sm); }
.prof-stats { color: var(--ink-soft); font-size: var(--fs-xs); }
.prof-stats b { font-weight: normal; color: var(--ink); }
.prof-free { font-size: var(--fs-xs); color: var(--leaf); margin-left: 6px; }
.prof-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.prof-avatars button { height: 44px; margin: 0; padding: 0; font-size: 24px; background: var(--parch-2); border: 2px solid var(--parch-line); cursor: pointer; }
.prof-avatars button:hover { background: var(--parch-hi); }
.prof-avatars button[aria-checked="true"] { border: 3px solid var(--leaf); background: var(--parch-hi); }
.prof-edit { display: flex; gap: 8px; align-items: stretch; }
.prof-edit input { flex: 1; min-width: 0; font-family: inherit; font-size: var(--fs-sm); padding: 8px 10px; }
.prof-pay { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; }
.prof-hint { color: var(--ink-soft); font-size: var(--fs-xs); margin-top: -4px; }
.prof-msg { margin: 0; min-height: 1.3em; font-size: var(--fs-sm); color: var(--leaf); }
.prof-msg.is-err { color: var(--berry); }

/* aviso das ações de visita (mordida, roubo, praga...): grande, parado e devagar para dar tempo de ler */
.visit-notice {
  position: fixed; left: 50%; top: 96px; z-index: 900; width: min(440px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: var(--parch-hi); color: var(--ink); border: 3px solid var(--px-out); box-shadow: 0 4px 0 var(--px-out);
  font-family: var(--pixel-font); opacity: 0; pointer-events: none;
  transform: translate(-50%, -16px) scale(.96); transition: opacity .35s ease, transform .35s ease;
}
.visit-notice.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); animation: vn-pop .45s ease-out; }
.visit-notice .vn-icon { font-size: 40px; line-height: 1; flex: 0 0 auto; }
.visit-notice .vn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.visit-notice .vn-title { font-size: 22px; font-weight: normal; line-height: 1.1; }
.visit-notice .vn-title em { font-style: normal; color: var(--ink-soft); }
.visit-notice .vn-text { font-size: 17px; line-height: 1.25; color: var(--ink-soft); }
.visit-notice.tone-bad { background: #fde2dc; border-left-width: 10px; border-left-color: var(--berry); }
.visit-notice.tone-bad .vn-title { color: var(--berry-t); }
.visit-notice.tone-mischief { border-left-width: 10px; border-left-color: #6b8e23; }
.visit-notice.tone-good { border-left-width: 10px; border-left-color: var(--leaf); }
.visit-notice.tone-good .vn-title { color: var(--leaf-t); }
.visit-notice.tone-bad.show .vn-icon { animation: vn-shake .5s ease-in-out 2; }
@keyframes vn-pop { 0% { transform: translate(-50%, -16px) scale(.9); } 70% { transform: translate(-50%, 2px) scale(1.03); } 100% { transform: translate(-50%, 0) scale(1); } }
@keyframes vn-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) {
  .visit-notice, .visit-notice.show, .visit-notice.tone-bad.show .vn-icon { animation: none; transition: opacity .2s; }
}

/* Loja da Vila: botão próprio no topo e textos de cada aba */
.hud-store { background: #fff3c4; }
.store-intro { margin: 2px 4px 8px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.3; }
.store-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.store-tabs button { width: auto; min-width: 0; }
/* prévia "hoje / no máximo": a coluna da arte cresce para caber os dois prédios */
.prem-card:has(.prem-pair) { grid-template-columns: auto minmax(0, 1fr) auto; }
.prem-pair canvas { max-height: 60px; max-width: 64px; }
.prem-art:has(.prem-pair) { height: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; } .adm-table td, .adm-table th { padding: 3px 6px; border-bottom: 1px solid var(--parch-line); text-align: left; }
.auth-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4; }
.auth-check input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.auth-check a, .auth-legal a, #modal-settings a { color: inherit; text-decoration: underline; }
.auth-legal { margin: 8px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); }
.adm-report { padding: 4px 0; border-bottom: 1px dashed var(--parch-line); }

/* o "í" da fonte pixel parece um "f" torto: desenha um i sem pingo + acento de pixel */
.title-iw { position: relative; display: inline-block; }
.title-i { display: inline-block; clip-path: inset(0.36em -12px -40px -12px); }
.title-acute {
  position: absolute; left: 50%; top: 0.12em; width: 0.1em; height: 0.14em; background: currentColor;
  transform: translateX(-35%) skewX(-35deg);
  box-shadow: 0 0 0 0.036em var(--px-out), 0 0.07em 0 0 var(--wood-2);
}

/* =====================================================================
   CELULAR ESTREITO / LETRAS GRANDES
   Celular com "tamanho da fonte" aumentado no sistema fica com ~300px de
   largura útil. Tudo aqui vale só em tela estreita; o computador não muda.
   ===================================================================== */
/* nome de quem você está visitando sempre aparece no celular */
html.is-phone.is-visiting #hud-player-name {
  display: block !important; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.is-phone.is-visiting #hud-title { display: none !important; }
.level-badge, #hud-visiting-tag { white-space: nowrap; }

/* barra de ações da visita (Regar/Pegar/Praga/Curtir) cabe na tela */
html.is-narrow #action-items-container { max-width: calc(var(--app-w, 100vw) - 16px); box-sizing: border-box; padding: 8px !important; }
html.is-narrow #action-items-container .tool-btn { flex: 1 1 0; min-width: 0; width: auto; padding: 4px 2px; }

/* abas: quebram em duas linhas em vez de sair da tela */
html.is-narrow .seg { flex-wrap: wrap; }
html.is-narrow .seg button { flex: 1 1 auto; min-width: 0; padding: 4px 6px; white-space: nowrap; }
html.is-narrow #store-tabs.store-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.is-narrow .store-tabs button { font-size: 13px; }

/* listas no celular: ícone + texto + botão numa linha enquanto o texto tiver pelo menos
   ~130px; se não tiver, o botão desce sozinho para a linha de baixo (flex-wrap com
   base mínima no texto). Assim "Evoluir · 1.500" não espreme o nome em uma palavra por linha. */
html.is-phone :is(.item-row, #friends-panel .friend-card, .prem-card) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html.is-phone :is(.item-row, #friends-panel .friend-card, .prem-card) > :first-child { flex: 0 0 auto; }
html.is-phone :is(.item-row, #friends-panel .friend-card, .prem-card) > :nth-child(2) { flex: 1 1 130px; min-width: 0; }
html.is-phone :is(.item-row, #friends-panel .friend-card, .prem-card) > :nth-child(n+3) { flex: 0 0 auto; margin-left: auto; }
html.is-phone .prem-card > .prem-art { width: 56px; height: 56px; }
html.is-phone .prem-art canvas { max-height: 56px; max-width: 56px; }
@media (max-width: 380px) {
  .item-row > .item-icon { width: 40px; height: 40px; font-size: 24px; }
  .modal-box.sheet { padding: 14px 10px 12px !important; }
  /* missões: botão "Escolher" embaixo do texto */
  .dq-card { grid-template-columns: minmax(0, 1fr); }
  .dq-card > button { grid-column: 1; grid-row: auto; justify-self: end; }
  #friends-panel .friend-card .nb-btns { flex-direction: row; }
}
/* pacote fundador e textos longos não empurram a janela para fora da tela */
html.is-narrow .founder-hero > * { min-width: 0; }
html.is-narrow .founder-show { gap: 6px; }
html.is-narrow .founder-show canvas { max-width: 30%; max-height: 64px; }
html.is-narrow .founder-sun { font-size: 34px; }
html.is-narrow .modal-box { overflow-wrap: break-word; }

/* ---------- Celular: tipografia que não quebra feio ----------
   Técnicas (text-wrap-style, não o atalho text-wrap, que desfaria o nowrap): pretty (sem palavra sozinha na última linha), balance
   (títulos e nomes divididos por igual), rótulos curtos nunca quebram,
   nomes curtos no lugar dos longos quando falta largura. Só no celular. */
html.is-phone .modal-box, html.is-phone #friends-panel, html.is-phone #top-hud { text-wrap-style: pretty; overflow-wrap: break-word; hyphens: manual; }
html.is-phone .modal-title, html.is-phone .item-text strong, html.is-phone .dq-goal,
html.is-phone .friend-info strong, html.is-phone .prem-text strong, html.is-phone .founder-head strong,
html.is-phone .ui-btn, html.is-phone .modal-box h3, html.is-phone .modal-box h4,
html.is-phone .modal-box :is(small, li, strong, .mail-title, .mail-meta), html.is-phone #friends-panel :is(small, strong) { text-wrap-style: balance; }
html.is-phone :is(.chips, .seg, .market-cats, .mis-tabs, .qty-pick) button,
html.is-phone :is(.store-gems, .level-badge, .mail-new, .item-tag, .item-count, .hud-stat) { white-space: nowrap; }
.lbl-short { display: none; }

html.is-narrow .sheet-title { min-width: 0; flex: 1 1 auto; }
/* títulos numa linha só: a letra encolhe até caber (js/ui/fitText.js) */
html.is-narrow .sheet-title > span[aria-hidden] { font-size: 22px; }
html.is-narrow .store-gems { margin-left: auto; flex: 0 0 auto; }
html.is-narrow .ui-btn { white-space: normal; line-height: 1.1; padding-top: 4px; padding-bottom: 4px; }
html.is-narrow .ui-btn-wide { white-space: nowrap; overflow: hidden; }
html.is-narrow .sheet-title > .store-gems { font-size: 15px; padding: 1px 5px; }
html.is-narrow .mural-card { flex-wrap: wrap; gap: 6px 10px; }
html.is-narrow .mural-card .mural-medals { flex: 1 1 100%; text-align: center; }
/* sementes: nome comprido vai para 2 linhas (quebra no hífen: "Cana-de-/açúcar") em vez de "…" */
html.is-narrow .seed-tile strong { white-space: normal; overflow: visible; text-overflow: clip; text-wrap-style: balance; line-height: 1.1; text-align: center; }
html.is-phone #friends-panel .nb-aff { white-space: nowrap; }
/* 4 abas (Vizinhos): 2×2 em vez de 3 + 1 sobrando */
html.is-narrow .seg:has(> button:nth-child(4):not([style*="none"])) { display: grid; grid-template-columns: 1fr 1fr; }
html.is-narrow .seg:has(> button:nth-child(4):not([style*="none"])) button { border-left: 0; border-top: 0; }
html.is-narrow .seg:has(> button:nth-child(4):not([style*="none"])) button:nth-child(odd) { border-right: 3px solid var(--px-out); }
html.is-narrow .seg:has(> button:nth-child(4):not([style*="none"])) button:nth-child(-n+2) { border-bottom: 3px solid var(--px-out); }
/* Armazém no celular: a descrição aparece inteira (sem "…" no fim) e os botões de preço têm a
   mesma largura, então todas as linhas da lista ficam iguais (todas com o botão ao lado ou todas embaixo) */
html.is-narrow #market-list .item-text small { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.is-phone .item-row > .ui-btn { min-width: 76px; justify-content: center; }

/* ---------- Celular: menus na tela toda ----------
   Armazém, Casa, Vizinhos, Correio, Loja, Missões, Configurações... abrem ocupando a tela
   inteira, como num app (sem a fazenda espremida atrás). Avisos curtos (boas-vindas,
   "enquanto você estava fora", novidade liberada) continuam como cartão no meio. */
html.is-phone .modal-overlay:has(> .modal-box.sheet:not(.away-card, .newfarm-box, .tut-ask, .unlock-card)),
html.is-phone #friends-sidebar.nb-overlay { align-items: stretch; justify-content: stretch; padding: 0; }
html.is-phone .modal-box.sheet:not(.away-card, .newfarm-box, .tut-ask, .unlock-card),
html.is-phone #friends-panel.sheet {
  box-sizing: border-box;
  width: 100% !important; max-width: 100% !important;
  height: var(--app-h, 100dvh) !important; max-height: none !important;
  /* a mesma moldura de madeira das janelas do computador, por dentro da tela (sem sombra de fora) */
  border: 3px solid var(--px-out) !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 3px var(--wood-2), inset 0 0 0 6px var(--wood-3), inset 0 0 0 8px var(--wood-4), inset 0 0 0 10px var(--px-out), inset 0 12px 0 0 var(--parch-hi) !important;
  padding: calc(max(0px, env(safe-area-inset-top)) + 20px) calc(max(0px, env(safe-area-inset-right)) + 18px) calc(max(0px, env(safe-area-inset-bottom)) + 18px) calc(max(0px, env(safe-area-inset-left)) + 18px) !important;
  animation: none;
}
html.is-narrow .modal-box.sheet:not(.away-card, .newfarm-box, .tut-ask, .unlock-card),
html.is-narrow #friends-panel.sheet { padding-left: calc(max(0px, env(safe-area-inset-left)) + 15px) !important; padding-right: calc(max(0px, env(safe-area-inset-right)) + 15px) !important; }

/* filtro Todas / Curtas / Longas: três partes iguais que sempre cabem */
html.is-narrow .seed-filter button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 14px; }
.ic-nw { white-space: nowrap; }

/* ---------- Topo do celular (tela estreita) ----------
   Regras de UI de jogo para celular: canto esquerdo = quem sou eu (foto, nome, nível e XP);
   canto direito = dinheiro (moedas e diamantes, um embaixo do outro); botões redondos numa
   coluna só à direita, com o mesmo tamanho e espaçamento; o resto do espaço fica para a fazenda.
   Tudo alinhado em uma grade de 8px. O computador não usa nada disto. */
html.is-narrow #top-hud { right: max(8px, env(safe-area-inset-right)); }
html.is-narrow #top-hud > div {
  display: grid !important; width: 100%; gap: 8px !important; align-items: start !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
/* o cartão some como caixa: as partes de dentro viram peças da grade */
html.is-narrow #hud-profile-card { display: contents !important; }
html.is-narrow #hud-profile-card > div:first-child {
  grid-column: 1 / 3; grid-row: 1; min-width: 0; box-sizing: border-box; height: 56px;
  display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 10px 0 8px;
  background: var(--parch); border: 3px solid var(--px-out);
  box-shadow: inset 0 0 0 2px var(--wood-1), inset 0 3px 0 2px var(--parch-hi), 3px 3px 0 rgba(20,10,4,0.45);
  pointer-events: auto; cursor: pointer;
}
html.is-narrow #hud-avatar { width: 36px; height: 36px; font-size: 22px !important; flex: 0 0 auto; }
html.is-narrow #hud-profile-card > div:first-child > div { flex: 1 1 auto; min-width: 0; gap: 3px !important; }
html.is-narrow #hud-profile-card > div:first-child > div > div { min-width: 0; margin: 0 !important; }
html.is-narrow #hud-profile-card > div:first-child > div > div:first-child { flex-wrap: nowrap !important; gap: 4px !important; }
html.is-narrow #hud-player-name {
  display: block !important; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px !important; line-height: 1.1;
}
html.is-narrow #hud-title { display: none !important; }
html.is-narrow #hud-visiting-tag { flex: 0 0 auto; font-size: 11px !important; padding: 0 3px !important; line-height: 1.3; }
html.is-narrow .level-badge { font-size: 13px; padding: 0 4px; line-height: 1.3; flex: 0 0 auto; }
html.is-narrow .xp-bar-container { flex: 1 1 auto; width: auto; min-width: 24px; height: 8px; }
/* dinheiro: duas plaquinhas iguais, alinhadas à direita, mesma altura do cartão */
html.is-narrow #hud-resources-panel {
  grid-column: 3; grid-row: 1; height: 56px; box-sizing: border-box;
  display: flex !important; flex-direction: column; justify-content: space-between; align-items: stretch;
  gap: 4px; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  pointer-events: auto;
}
html.is-narrow #hud-resources-panel .hud-stat-divider { display: none; }
html.is-narrow #hud-resources-panel .hud-stat {
  height: 26px; box-sizing: border-box; justify-content: flex-end; gap: 4px; padding: 0 8px; white-space: nowrap;
  background: var(--parch); border: 3px solid var(--px-out); box-shadow: inset 0 2px 0 var(--parch-hi), 3px 3px 0 rgba(20,10,4,0.45);
}
html.is-narrow #hud-resources-panel .coin-icon-badge { font-size: 14px; }
html.is-narrow .coin-val, html.is-narrow .gem-val { font-size: 15px !important; line-height: 1; }
html.is-narrow .hud-gems-btn .hud-plus { display: none; }
/* botões redondos: uma coluna à direita, logo abaixo do dinheiro */
html.is-narrow .hud-gear { grid-column: 3; justify-self: end; width: 40px; height: 40px; font-size: 18px; }
html.is-narrow #hud-settings-btn { grid-row: 2; }
html.is-narrow #hud-missions-btn { grid-row: 3; }
html.is-narrow #hud-store-btn { grid-row: 4; }
html.is-narrow #btn-report-player { grid-column: 3; grid-row: 5; justify-self: end; width: 40px; height: 40px; padding: 0; justify-content: center; }
/* visita: "Minha casa" e "Próximo" lado a lado embaixo do cartão */
html.is-narrow .btn-home-top {
  grid-row: 2; min-width: 0; height: 40px; padding: 0 8px; font-size: 15px; line-height: 1;
  justify-content: center; white-space: nowrap; overflow: hidden;
}
html.is-narrow #btn-return-home { grid-column: 1; }
html.is-narrow #btn-next-neighbor { grid-column: 2; }
html.is-narrow .btn-home-top .lbl-long { display: none; }
html.is-narrow .btn-home-top .lbl-short { display: inline; }
/* faixa da missão: logo abaixo do cartão, sem passar por baixo dos botões redondos */
html.is-narrow .goal-strip {
  top: calc(max(8px, env(safe-area-inset-top)) + 64px);
  width: calc(var(--app-w, 100vw) - 16px - 48px);
}
html.is-narrow.is-visiting .goal-strip { top: calc(max(8px, env(safe-area-inset-top)) + 112px); }

/* ---------- Correio no celular ----------
   Quatro abas iguais numa linha (ícone grande em cima, nome pequeno embaixo, bolinha só com as
   cartas novas), e "Limpar" pequeno à direita, sem disputar espaço com as abas. */
html.is-phone .mail-toolbar { gap: 8px; }
html.is-phone .mail-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 6px 0 0; }
html.is-phone .mail-tabs button {
  position: relative; min-width: 0; height: 54px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
html.is-phone .mail-tabs .mt-ic { font-size: 20px; line-height: 1; }
html.is-phone .mail-tabs .mt-lb { font-size: 12px; letter-spacing: -0.5px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
html.is-phone .mail-tabs .mt-n { display: none; }
html.is-phone .mail-tabs .mail-new {
  position: absolute; top: -7px; right: -4px; margin: 0; min-width: 18px; padding: 0 4px; line-height: 16px;
  font-size: 11px; text-align: center; border: 2px solid var(--px-out);
}
html.is-phone .mail-clear { min-height: 32px !important; padding: 0 10px !important; font-size: 14px !important; }
/* selo VIZINHO pendurado na borda do cartão: o nome fica com a linha toda */
html.is-narrow #hud-profile-card > div:first-child { position: relative; }
html.is-narrow #hud-visiting-tag { position: absolute; top: -8px; right: 6px; z-index: 1; }
html.is-narrow .goal-strip .goal-main strong { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 330px) { html.is-phone .mail-tabs .mt-lb { font-size: 11px; } html.is-phone .mail-tabs { gap: 4px; } }
@media (max-width: 300px) { html.is-phone .mail-tabs .mt-lb { font-size: 10px; letter-spacing: -0.3px; } }

/* Dois toques rápidos não dão mais zoom na página (celular). "manipulation" ainda deixa rolar listas e
   abrir a pinça; o mapa (canvas) continua com touch-action: none e a pinça de zoom do próprio jogo. */
html { touch-action: manipulation; }