/* ===================================================================
   HORTINHA — IDENTIDADE VISUAL CARTOON 2D WHIMSICAL
   Contornos suaves roxo-marinho, cores chapadas, soft cel shading,
   manchas tonais orgânicas, formas arredondadas e legíveis.
   =================================================================== */
@font-face{font-family:Fredoka;src:url('/fonts/fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url('/fonts/nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap}
:root{
  --ink-deep:#2E1F52;
  --ink-soft:#4A3A78;
  --cream:#FFF6E4;
  --cream-2:#F7E7C8;
  --soil-light:#A9714C;
  --soil:#8A5A3B;
  --soil-dark:#6B4429;
  --leaf:#6FCF4F;
  --leaf-dark:#4A9E2F;
  --leaf-light:#9BE8A8;
  --gold:#FFC93C;
  --gold-dark:#E09A18;
}


body{
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,sans-serif;
  background-color:#2B4A38;
  background-image:
    radial-gradient(ellipse 900px 520px at 50% -10%,#4A7A56 0%,#35593F 45%,#24402E 100%),
    radial-gradient(circle at 12% 22%,rgba(155,232,168,.10) 0 90px,transparent 100px),
    radial-gradient(circle at 88% 14%,rgba(155,232,168,.08) 0 130px,transparent 140px),
    radial-gradient(circle at 78% 78%,rgba(155,232,168,.07) 0 160px,transparent 170px),
    radial-gradient(circle at 20% 88%,rgba(255,201,60,.06) 0 120px,transparent 130px);
  background-attachment:fixed;
  color:var(--cream);
}
h1,h2,h3,h4,.brand,.table-heading h1{font-family:"Fredoka","Nunito",sans-serif;letter-spacing:-.01em}
h1,.intro h1{color:var(--cream);text-shadow:0 3px 0 var(--ink-soft),0 6px 14px rgba(0,0,0,.28)}
.intro h1 em{color:var(--gold);text-shadow:0 3px 0 #B8810A,0 6px 14px rgba(0,0,0,.3)}
.eyebrow,.small-number{color:var(--leaf-light);text-shadow:0 2px 0 rgba(46,31,82,.55)}
.intro-copy,.intro-foot,.hand-heading p{color:#D6E8D2}
.history,.pile-caption,.zone-label,.connection{color:#D6E8D2}

/* --- Topbar: placa de madeira pintada com contorno cartoon --- */
.topbar{
  background:linear-gradient(180deg,#C98A4B 0%,#B0713A 100%);
  border-bottom:4px solid var(--ink-deep);
  box-shadow:0 6px 0 rgba(46,31,82,.35),0 12px 26px rgba(0,0,0,.28);
  padding:16px 30px;
}
.brand{font-size:27px;color:var(--cream);text-shadow:0 3px 0 var(--ink-deep)}
.brand-note{color:#FFE9C4;opacity:.9}
.brand-symbol{
  width:40px;height:40px;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,var(--leaf-light),var(--leaf-dark));
  border:3px solid var(--ink-deep);border-radius:13px;
  box-shadow:0 3px 0 rgba(46,31,82,.5);transform:rotate(-5deg);
}
.brand-symbol svg{width:30px;height:30px;display:block}
.subtle{
  background:var(--cream);color:var(--ink-deep);
  border:3px solid var(--ink-deep);border-bottom-width:4px;border-radius:13px;
  font-weight:800;box-shadow:0 4px 0 rgba(46,31,82,.45);
  transition:transform .1s ease,box-shadow .1s ease,background .15s ease;
}
.subtle:hover:not(:disabled){background:#FFE9C4;transform:translateY(-2px);box-shadow:0 6px 0 rgba(46,31,82,.45)}
.subtle:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(46,31,82,.45)}
.icon-btn{display:inline-flex;align-items:center;gap:6px}
.icon-btn:before{
  content:'';width:16px;height:16px;flex-shrink:0;
  background-repeat:no-repeat;background-size:contain;background-position:center;
}
#soundToggle:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4Z' fill='%232E1F52'/%3E%3Cpath d='M16 8.5c1.5 1.7 1.5 5.3 0 7' stroke='%232E1F52' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
#shopOpen:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16l-1.5 12H5.5L4 7Z' fill='%23F7C948' stroke='%232E1F52' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3' stroke='%232E1F52' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
#rulesOpen:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='3' fill='%236FCF4F' stroke='%232E1F52' stroke-width='2'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5' stroke='%232E1F52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}


/* --- Botões principais: plástico moldado com contorno cartoon --- */
.primary{
  font-family:"Fredoka","Nunito",sans-serif;font-weight:700;
  background:linear-gradient(180deg,#FF8A5C,#EF4B3C);
  color:var(--cream);text-shadow:0 2px 0 rgba(46,31,82,.45);
  border:3px solid var(--ink-deep);border-bottom-width:5px;border-radius:15px;
  box-shadow:0 5px 0 var(--ink-deep),0 10px 20px rgba(0,0,0,.26);
  transition:transform .1s ease,box-shadow .1s ease,filter .15s ease;
}
.primary:hover:not(:disabled){background:linear-gradient(180deg,#FF9A72,#F2594A);filter:none;transform:translateY(-2px);box-shadow:0 7px 0 var(--ink-deep),0 14px 24px rgba(0,0,0,.3)}
.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink-deep),0 6px 12px rgba(0,0,0,.26)}
.join-panel .primary{background:linear-gradient(180deg,#FF8A5C,#EF4B3C)}

/* --- Painel de entrada: papel de caderno com cel shading --- */
.join-panel{
  background:linear-gradient(170deg,#FFFCF0 0%,var(--cream) 45%,var(--cream-2) 100%);
  border:4px solid var(--ink-deep);border-radius:24px;color:var(--ink-deep);
  box-shadow:0 6px 0 var(--ink-deep),0 18px 34px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.7);
}
.join-panel h2{color:var(--ink-deep)}
.join-panel p{color:#6B5A46}
.join-panel .small-number,.join-panel .eyebrow{color:#C9622F;text-shadow:none}
.join-panel label{color:#6B5A46}
.join-panel input{
  background:#FFFDF6;color:var(--ink-deep);
  border:3px solid var(--ink-deep);border-radius:13px;font-weight:700;
  box-shadow:inset 0 2px 0 rgba(46,31,82,.12);
}
.join-panel input:focus{outline:none;box-shadow:0 0 0 4px rgba(111,207,79,.55)}
.join-panel .form-error{color:#C0392B}
.join-panel .text-button{color:#3E7A34}
.connection-note{color:#6B5A46;border-top:2px dashed rgba(46,31,82,.22)}
.status-dot{background:var(--leaf);box-shadow:0 0 0 3px rgba(111,207,79,.28)}

/* --- Mesa de jogo --- */
.table-middle{
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(155,232,168,.12),transparent 70%),
    linear-gradient(180deg,#3A6647 0%,#2B4A38 100%);
  border:4px solid var(--ink-deep);border-radius:26px;
  box-shadow:0 6px 0 var(--ink-deep),inset 0 4px 0 rgba(255,255,255,.08),inset 0 -10px 24px rgba(0,0,0,.22);
  padding:18px;
}
.opponent-area{
  background:rgba(255,246,228,.09);
  border:3px solid var(--ink-deep);border-radius:20px;
  box-shadow:0 4px 0 rgba(46,31,82,.4);
}
.my-area{
  background:rgba(255,246,228,.12);
  border:3px solid var(--ink-deep);border-radius:22px;
  box-shadow:0 4px 0 rgba(46,31,82,.4),inset 0 2px 0 rgba(255,255,255,.1);
  padding-bottom:14px;
}
.avatar{border:3px solid var(--ink-deep);box-shadow:0 2px 0 rgba(46,31,82,.4);color:var(--cream)}
.field{
  background:var(--soil);
  background-image:
    radial-gradient(ellipse 40px 22px at 26% 32%,rgba(169,113,76,.55),transparent 70%),
    radial-gradient(ellipse 34px 18px at 72% 66%,rgba(107,68,41,.5),transparent 72%),
    repeating-linear-gradient(96deg,rgba(0,0,0,.10) 0 3px,transparent 3px 14px),
    linear-gradient(180deg,var(--soil-light),var(--soil) 55%,var(--soil-dark));
  border:3px solid var(--ink-deep);border-bottom-width:5px;border-radius:18px;
  box-shadow:0 4px 0 var(--ink-deep),inset 0 4px 10px rgba(0,0,0,.24),inset 0 -6px 12px rgba(0,0,0,.2);
}
.field.plantable{
  background-image:
    radial-gradient(ellipse 44px 24px at 30% 30%,rgba(200,150,110,.6),transparent 70%),
    repeating-linear-gradient(96deg,rgba(0,0,0,.08) 0 3px,transparent 3px 14px),
    linear-gradient(180deg,#B67C4E,#8A5A3B 60%,#6B4429);
  animation:fieldPulse 1.6s ease-in-out infinite;
}
@keyframes fieldPulse{
  0%,100%{box-shadow:0 4px 0 var(--ink-deep),0 0 0 5px rgba(111,207,79,.85),0 0 18px rgba(111,207,79,.4)}
  50%{box-shadow:0 4px 0 var(--ink-deep),0 0 0 8px rgba(111,207,79,.95),0 0 28px rgba(111,207,79,.65)}
}
.field .field-heading{color:#FFE9C4;font-weight:800;text-shadow:0 2px 0 rgba(46,31,82,.5)}
.field .field-heading span:last-child{color:var(--gold);text-shadow:0 2px 0 rgba(120,80,0,.5)}
.field-name{color:var(--cream);font-weight:800;text-shadow:0 2px 0 rgba(46,31,82,.45)}
.field-count{color:#F0DFC0}
.field-empty{color:#EBD9BC;font-weight:700}
.field-empty .sprout{opacity:.85}
.field-content svg{flex-shrink:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.protection{color:#FFD9A8;font-weight:700;font-size:9px}

/* --- Botões de canteiro --- */
.plant-button,.harvest-button,.phase-actions button{
  font-family:"Fredoka","Nunito",sans-serif;font-weight:700;border-radius:12px;
  border:3px solid var(--ink-deep);border-bottom-width:4px;
  box-shadow:0 3px 0 var(--ink-deep);transition:transform .1s,box-shadow .1s;
}
.plant-button{background:linear-gradient(180deg,#8FE07A,var(--leaf-dark));color:var(--cream);text-shadow:0 2px 0 rgba(46,31,82,.45)}
.harvest-button{background:linear-gradient(180deg,#FFDE7E,var(--gold-dark));color:#5A3A08}
.plant-button:hover:not(:disabled),.harvest-button:hover:not(:disabled),.phase-actions button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 var(--ink-deep)}
.plant-button:active:not(:disabled),.harvest-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink-deep)}
.phase-actions button{background:var(--cream);color:var(--ink-deep)}
.phase-actions button.danger{background:#FFD9D3;color:#A32B1F}
.my-area{padding-bottom:14px}

/* --- Cartas: papel colecionável com moldura colorida --- */
.bean-card{
  border-radius:16px;
  background:linear-gradient(170deg,#FFFCF0 0%,var(--cream) 45%,var(--cream-2) 100%);
  color:var(--ink-deep);
  border:3px solid var(--ink-deep);border-bottom-width:5px;
  box-shadow:0 5px 0 var(--ink-deep),0 12px 22px rgba(0,0,0,.32);
  transition:transform .18s cubic-bezier(.18,.89,.32,1.28),box-shadow .18s;
}
.bean-card:before{
  content:"";position:absolute;inset:3px;border:3px solid var(--bean);border-radius:12px;
  pointer-events:none;opacity:.9;
}
/* --- Cabeçalho da carta: nome à ESQUERDA, quantidade à DIREITA ---
   Fica numa linha só com flexbox, então os dois nunca se sobrepõem:
   o nome ocupa o espaço que sobra (com reticências se não couber) e a
   quantidade tem largura fixa, sempre visível. */
.bean-card{width:128px}
/* O style.css define .market/.hand .bean-card com seletor mais especifico,
   entao a largura precisa ser repetida aqui para o theme.css vencer. */
.hand .bean-card,.market .bean-card{width:128px;height:148px}
.sample-cards .bean-card{width:114px;height:140px}
.sample-cards .bean-card:nth-child(2){margin-left:-14px}
.sample-cards .bean-card:nth-child(3){margin-left:-12px}
.bean-card .card-head{
  display:flex;align-items:center;gap:4px;
  min-height:26px;padding:0 2px;position:relative;z-index:1;
}
.bean-card .bean-name{
  font-family:"Fredoka","Nunito",sans-serif;font-size:12.5px;font-weight:600;
  color:var(--ink-deep);text-transform:none;margin:0;line-height:1.15;
  letter-spacing:-.15px;
  flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:left;
}
.bean-card .card-count{
  flex:0 0 auto;position:static;float:none;margin:0;
  min-width:22px;text-align:center;
  background:linear-gradient(180deg,#FF8A5C,#EF4B3C);color:var(--cream);opacity:1;
  border:2px solid var(--ink-deep);border-radius:8px;font-weight:800;
  font-family:"Fredoka","Nunito",sans-serif;font-size:11px;
  box-shadow:0 2px 0 rgba(46,31,82,.5);
  padding:1px 5px;line-height:1.35;
}
.bean-card .bean-meter{border-top:2px dashed rgba(46,31,82,.22);color:var(--ink-deep);margin-top:auto}
.bean-card .bean-meter b{color:var(--ink-deep)}
.bean-card .bean-meter small{color:#8B7A63}

/* --- Moedinha amarela: disco dourado com contorno, para ficar obvio
   que o numero ao lado e uma moeda e nao um ponto qualquer. --- */
.coin{
  display:inline-block;vertical-align:-1px;
  width:1.05em;height:1.05em;margin-left:3px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF0B8 0%,var(--gold) 52%,var(--gold-dark) 100%);
  border:1.5px solid #8A5A08;
  box-shadow:inset 0 -1px 2px rgba(138,90,8,.45),0 1px 0 rgba(46,31,82,.35);
  text-indent:-9999px;overflow:hidden;
}
.bean-card .bean-meter small .coin{width:1.15em;height:1.15em;margin-left:2px;border-width:1px}
.field-heading .coin{width:.9em;height:.9em;margin-left:2px;border-width:1px}
.harvest-button .coin{
  width:1.15em;height:1.15em;margin-left:5px;
  border-color:#7A4E06;box-shadow:inset 0 -1px 2px rgba(122,78,6,.5),0 1px 2px rgba(46,31,82,.4);
}
.bean-card .bean-art svg{overflow:visible;filter:drop-shadow(0 3px 3px rgba(46,31,82,.28))}
.bean-card.selectable{cursor:pointer}
.bean-card.selectable:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 12px 0 var(--ink-deep),0 20px 30px rgba(0,0,0,.38);z-index:5}
.bean-card.selected{
  border-color:var(--ink-deep)!important;border-bottom-color:var(--ink-deep)!important;
  box-shadow:0 0 0 5px var(--gold),0 12px 0 var(--ink-deep),0 20px 32px rgba(0,0,0,.42)!important;
  transform:translateY(-10px) scale(1.06)!important;z-index:10;
}
.bean-card.unavailable{filter:saturate(.6);opacity:.72}
.card-order{color:#D6E8D2;font-weight:700;text-shadow:0 2px 0 rgba(46,31,82,.5)}
.card-order.first{color:var(--gold);text-shadow:0 2px 0 rgba(120,80,0,.5)}
.sample-cards .bean-card{box-shadow:0 5px 0 var(--ink-deep),0 12px 22px rgba(0,0,0,.32)}

/* Descarte: a carta e bem estreita (55px). O nome nao caberia de jeito
   nenhum, entao some e fica so a quantidade, centralizada. A arte ja
   identifica a hortalça. */
.discard-pile .bean-card .card-head{justify-content:center;min-height:16px;padding:0}
.discard-pile .bean-card .bean-name{display:none}
.discard-pile .bean-card .card-count{
  min-width:22px;font-size:9px;padding:0 4px;line-height:1.35;
  position:static;left:auto;top:auto;right:auto;float:none;
}

/* --- Baralho do adversário e descarte --- */
.deck-card,.card-back{
  background:linear-gradient(150deg,#FF8A5C,#EF4B3C);
  border:3px solid var(--ink-deep);border-bottom-width:4px;border-radius:11px;
  box-shadow:0 4px 0 var(--ink-deep);
}
.card-back{display:grid;place-items:center;padding:0;overflow:hidden}
.card-back svg{width:100%;height:100%;display:block}
.empty-pile{
  color:#EBD9BC;font-size:10px;font-weight:700;
  border:3px dashed rgba(255,246,228,.35);border-radius:13px;padding:14px 8px;text-align:center;
}
.market-empty{color:#EBD9BC;font-weight:700;font-style:italic}

/* --- Painel da vez --- */
.turn-guide{
  background:linear-gradient(170deg,#FFFCF0 0%,var(--cream) 50%,var(--cream-2) 100%);
  border:4px solid var(--ink-deep);border-radius:22px;color:var(--ink-deep);
  box-shadow:0 5px 0 var(--ink-deep),0 14px 28px rgba(0,0,0,.3),inset 0 3px 0 rgba(255,255,255,.7);
}
.turn-guide h2,.turn-guide .step b{color:var(--ink-deep)}
.turn-guide .eyebrow{color:#C9622F;text-shadow:none}
.turn-tag{
  background:var(--leaf);color:var(--cream);font-weight:800;
  border:2px solid var(--ink-deep);border-radius:999px;
  text-shadow:0 1px 0 rgba(46,31,82,.4);
}

/* --- Moedas e relógio --- */
.coins{
  background:linear-gradient(180deg,#FFDE7E,var(--gold-dark));color:#5A3A08;
  border:2px solid var(--ink-deep);box-shadow:0 2px 0 var(--ink-deep);
}
.coins:before{background:radial-gradient(circle at 34% 28%,#FFF3C4,#FFC93C 55%,#E09A18);border:2px solid var(--ink-deep);box-shadow:none}
.turn-timer{
  background:var(--cream);color:var(--ink-deep);border:3px solid var(--ink-deep);
  border-radius:999px;font-weight:800;box-shadow:0 3px 0 rgba(46,31,82,.45);
}
.turn-timer .turn-clock{color:#C9622F}
.turn-timer.warn{background:linear-gradient(180deg,#FFDE7E,var(--gold-dark));animation:clockGlow 1s ease-in-out infinite}
.turn-timer.over{background:linear-gradient(180deg,#FFB0A6,#E05545);color:var(--cream)}

/* --- Lobby, resultado, histórico --- */
.lobby{
  background:rgba(255,246,228,.1);border:4px dashed rgba(255,246,228,.4);
  border-radius:24px;box-shadow:inset 0 3px 0 rgba(255,255,255,.08);
}
.lobby h2{color:var(--cream);text-shadow:0 3px 0 var(--ink-soft)}
.lobby p{color:#D6E8D2}
.lobby-art svg{width:100%;height:100%}
#inviteUrl{background:rgba(255,246,228,.94);color:var(--ink-deep);border:3px solid var(--ink-deep);border-radius:12px;font-weight:700}
.result{
  background:linear-gradient(170deg,#FFFCF0,#FFE9C4);color:var(--ink-deep);
  border:4px solid var(--ink-deep);border-bottom-width:6px;border-radius:22px;
  box-shadow:0 6px 0 var(--ink-deep),0 16px 30px rgba(0,0,0,.32);
}
.result h2{color:var(--ink-deep);text-shadow:none}
.result button{background:var(--leaf);color:var(--cream);border:3px solid var(--ink-deep);border-radius:12px;font-weight:800;box-shadow:0 3px 0 var(--ink-deep)}
.history{border-top:3px dashed rgba(255,246,228,.28);color:#D6E8D2}
.history ol li{color:#D6E8D2}

/* --- Diálogos --- */
dialog{
  background:linear-gradient(170deg,#FFFCF0 0%,var(--cream) 50%,var(--cream-2) 100%);
  color:var(--ink-deep);
  border:4px solid var(--ink-deep);border-bottom-width:6px;border-radius:24px;
  box-shadow:0 8px 0 var(--ink-deep),0 24px 50px rgba(0,0,0,.4);
}
dialog::backdrop{background:rgba(30,50,38,.62)}
dialog h2{color:var(--ink-deep)}
dialog .eyebrow{color:#C9622F;text-shadow:none}
dialog .intro-copy{color:#6B5A46}
.source-note{color:#8B7A63!important}
.rule-steps li{color:#4A3A78}
.dialog-close{
  background:linear-gradient(180deg,#FFB0A6,#E05545);color:var(--cream);
  border:3px solid var(--ink-deep);border-bottom-width:4px;border-radius:11px;
  box-shadow:0 3px 0 var(--ink-deep);
}
.shop-item,.skin-item{
  background:linear-gradient(170deg,#FFFCF0,var(--cream-2))!important;
  border:3px solid var(--ink-deep)!important;border-bottom-width:4px!important;
  border-radius:14px!important;color:var(--ink-deep);
  box-shadow:0 3px 0 var(--ink-deep);
}

/* --- Aviso (toast) --- */
.toast{
  background:linear-gradient(170deg,#FFFCF0,var(--cream-2));color:var(--ink-deep);
  border:3px solid var(--ink-deep);border-bottom-width:5px;border-radius:16px;
  font-weight:700;box-shadow:0 5px 0 var(--ink-deep),0 14px 28px rgba(0,0,0,.34);
}
.toast.error{background:linear-gradient(170deg,#FFD9D3,#FFB0A6);color:#8C2618}

/* --- Celular: as cartas encolhem, entao o nome e a quantidade
   diminuem juntos para continuarem cabendo lado a lado.
   A mao e o mercado tem rolagem horizontal, entao as cartas podem
   ficar um pouco mais largas do que caberia na tela. --- */
@media(max-width:600px){
  .bean-card{width:100px;height:146px}
  .bean-card .card-head{gap:3px;min-height:24px}
  .bean-card .bean-name{font-size:10px;letter-spacing:-.2px}
  .bean-card .card-count{
    min-width:17px;font-size:8.5px;padding:1px 3px;line-height:1.3;
  }
  .hand .bean-card{width:100px;height:146px}
  .hand .bean-art{height:66px;padding:3px 0}
  .market .bean-card{width:112px;height:134px}
  .market .bean-art{height:58px;padding:2px 0}
  .market .bean-name{font-size:10px;letter-spacing:-.2px}
  .market .bean-card .card-count{
    min-width:17px;font-size:8.5px;padding:1px 3px;
  }
  .sample-cards .bean-card{width:84px;height:98px}
  .sample-cards .bean-card .bean-name{font-size:9px}
  .sample-cards .bean-card .card-count{
    min-width:16px;font-size:8px;padding:1px 3px;
  }
  .bean-card .bean-meter{padding-top:3px;margin-top:auto}
  .bean-card .bean-meter small .coin{width:1em;height:1em;margin-left:1px}
}

/* Controles e leitura: dimensões independentes das cartas decorativas. */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 18px;min-height:44px}
.topbar-actions .subtle,.light-button,.field-actions button,.phase-actions button{min-height:44px}
.topbar{gap:18px;flex-wrap:wrap}
.topbar-actions{flex-wrap:wrap}
.field .field-heading{display:flex;justify-content:space-between;gap:4px}
.field-count,.hand-heading p,.protection{font-size:11px}
.protection{color:#FFF0D2}
.turn-guide p{font-size:13px;line-height:1.6;color:#574563}
.turn-guide .selection-hint{margin-top:8px;color:#2D6025;font-weight:800}
.field-actions{flex-wrap:wrap}
.field-actions button{font-size:12px}
.phase-actions button{font-size:13px}
.bean-art{min-height:0;flex-shrink:1}
.bean-meter{flex-shrink:0}
.sample-cards{height:auto;min-height:155px;padding-bottom:16px}
.sample-cards .bean-card{height:142px}
.discard-pile .bean-card .card-head{display:block;min-height:0}
.discard-pile .bean-card .bean-name{display:block;font-size:8px;white-space:normal}
.discard-pile .bean-card .card-count{display:none}
.discard-pile .bean-card .bean-art{height:38px;padding:1px 0}
.deck-card .seed-pattern{width:28px;height:28px}
.seed-pattern svg{width:100%;height:100%}
.resume-room{display:block;margin-top:12px;font-weight:800;color:#326C28;text-underline-offset:4px}
.network-notice{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;margin-bottom:16px;background:#FFE4A1;color:var(--ink-deep);border:3px solid var(--ink-deep);border-radius:14px;font-size:13px}
.network-notice button{color:var(--ink-deep);flex-shrink:0;border-color:var(--ink-deep)}
.confirm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#harvestDescription{margin-top:14px;line-height:1.7}
#shopItems{display:grid}
.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);z-index:30;padding:12px;background:var(--cream);color:var(--ink-deep)}
.skip-link:focus{transform:none}
@media(max-width:600px){
 .topbar{padding:12px;gap:12px}
 .brand{font-size:24px}
 .topbar-actions{width:100%;gap:6px;display:grid;grid-template-columns:1.2fr .8fr 1fr}
 .topbar-actions .subtle{padding:7px 6px;justify-content:center;font-size:11px}
 .sample-cards{min-height:135px}
 .sample-cards .bean-card{height:120px}
 .sample-cards .bean-art{height:42px}
 .my-area .field-actions button{min-height:44px;font-size:11px}
 .turn-guide p{font-size:12px}
 .opponent-row{flex-wrap:wrap}
 .opponent-fields{flex-basis:100%}
 .hidden-hand{width:auto;display:flex;align-items:center;gap:8px;margin-left:auto;font-size:10px}
 .card-backs{height:30px;margin-bottom:0}
 .field-count{font-size:10px}
 .hand-heading p{font-size:11px}
 .network-notice{align-items:stretch;flex-direction:column}
 .discard-pile .bean-card .bean-art{height:29px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Mesa aberta e negociação, com a mesma arte dos canteiros. */
.fields{grid-template-columns:repeat(var(--field-count,3),minmax(0,1fr))}
.lobby-players{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;margin:22px 0;list-style:none}
.lobby-players li{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--cream);color:var(--ink-deep);border:2px solid var(--ink-deep);border-radius:12px}
.lobby-players small{font-size:10px;color:#6B5A46}
.lobby .lobby-mode{font-size:12px;max-width:520px;margin:16px auto}
.opponents{display:grid;gap:10px}
.opponents.many{grid-template-columns:repeat(2,minmax(0,1fr))}
.opponents.many .opponent-row{display:block}
.opponents.many .hidden-hand{text-align:right;margin-top:6px}
.opponent-area.is-active{border-color:var(--gold)}
.opponents.many .field-content{min-height:48px}
.opponents.many .field-empty{font-size:11px}
.trade-area{margin:16px 0;padding:24px;background:var(--cream);color:var(--ink-deep);border:4px solid var(--ink-deep);border-radius:22px}
.trade-area>p{max-width:70ch;font-size:13px;line-height:1.7;margin:8px 0 16px;color:#574563}
.trade-area .eyebrow{color:#80502D;text-shadow:none}
.trade-area h2{font-size:26px}
.trade-area h3{font-size:18px;margin:0 0 8px}
.trade-area label,.trade-area legend{font-weight:800;font-size:13px}
.trade-area select{display:block;width:100%;max-width:350px;padding:10px;margin:8px 0 16px;font:inherit;background:#fffaf0;color:var(--ink-deep);border:2px solid var(--ink-deep);border-radius:10px;min-height:44px}
.trade-area fieldset{min-width:0;padding:14px 0;border:0;border-top:1px dashed #9A8F80;margin:16px 0}
.trade-area legend{padding-right:12px}
.trade-card-options{display:flex;gap:8px;flex-wrap:wrap}
.trade-card-choice{display:flex;align-items:center;gap:6px;padding:7px 10px;border:2px solid #A99D8D;border-radius:12px;background:#fffaf0;cursor:pointer;min-height:54px}
.trade-card-choice:has(input:checked){border-color:#336B29;background:#E2F3CA;box-shadow:0 2px 0 #336B29}
.trade-card-choice input{accent-color:#336B29;width:20px;height:20px;flex-shrink:0}
.trade-card-choice small{display:block;font-size:10px;font-weight:500}
.trade-art{display:inline-flex;width:30px;height:34px;flex-shrink:0}
.trade-art svg{width:100%;height:100%}
.trade-wants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.trade-wants label{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:4px;padding:10px;border:1px solid #BEB09C;border-radius:10px}
.trade-wants input{grid-column:1/-1;width:100%;min-width:0;min-height:44px;padding:6px 8px;font:inherit;font-size:16px;background:#fffaf0;color:var(--ink-deep);border:2px solid #8E816D;border-radius:8px}
.trade-proposals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.trade-proposal{border:2px solid #8D7958;border-radius:14px;background:#FFEAC1;padding:16px;min-width:0}
.trade-proposal p{font-size:13px;margin:8px 0;overflow-wrap:anywhere}
.trade-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.trade-validation{color:#8B2E23;font-weight:700}
.trade-footnote{font-size:12px;margin-top:14px}
.received-area{padding:14px 0;border-bottom:2px dashed #D6E8D2;margin-bottom:16px}
.received-area h2{font-size:18px}
.received-area p{font-size:12px;margin-top:6px;color:#D6E8D2}
.score-list{list-style:none;padding:0;max-width:420px;margin:20px auto}
.score-list li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #BDA886;text-align:left;overflow-wrap:anywhere}
#rules h3{margin:20px 0 8px}
#rules p{font-size:13px;line-height:1.7;margin:12px 0}
@media(max-width:800px){.trade-wants{grid-template-columns:repeat(3,minmax(0,1fr))}.trade-proposals{grid-template-columns:1fr}}
@media(max-width:600px){
 .opponents.many{grid-template-columns:1fr}
 .opponents.many .field-content{display:flex;text-align:left;gap:5px;min-height:34px}
 .opponents.many .field-empty{flex-direction:row;font-size:10px;padding:0}
 .opponents.many .field-empty .sprout{width:22px}
 .opponents.many .field-content svg{height:26px;width:25px}
 .opponents.many .field-name{font-size:11px}
 .trade-area{padding:16px 12px}
 .trade-wants{grid-template-columns:repeat(2,minmax(0,1fr))}
 .trade-wants label{padding:8px;font-size:12px}
 .trade-area h2{font-size:22px}
 .lobby-players{display:grid;grid-template-columns:1fr;text-align:left}
}

.opponents-hint{font-size:12px;color:#D6E8D2;margin:0 0 8px}
@media(min-width:1100px){.opponents.many{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 .opponents.many{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:10px;padding:0 0 12px;scrollbar-color:var(--leaf) transparent}
 .opponents.many .opponent-area{flex:0 0 88%;min-width:0;scroll-snap-align:start}
}

.quick-plant-note{font-size:11px;color:#D6E8D2;margin-top:6px;max-width:52ch}
.bean-card.selectable{touch-action:manipulation}

.turn-timer{max-width:100%;border-radius:16px}.turn-timer .turn-who{letter-spacing:.2px;line-height:1.3;overflow-wrap:anywhere}

/* Tela de encerramento ocupa o lugar do tabuleiro. */
.end-screen{min-height:calc(100svh - 160px);max-width:720px;margin:12px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 22px;text-align:center}
.end-screen h2{font-size:clamp(30px,6vw,54px);max-width:620px;line-height:1.08;overflow-wrap:anywhere}.result-emblem{font-size:68px;line-height:1.1}
.end-screen .score-list{width:100%;max-width:480px;margin:0;padding-left:26px;text-align:left}.end-screen .score-list li{gap:12px;overflow-wrap:anywhere}.end-screen button{min-height:48px;padding:12px 22px;max-width:100%}.end-screen button.review-board{background:var(--cream);color:var(--ink-deep)}#backToResult{margin:14px 0}

#resultTitle:focus{outline:none}

/* Partida: cenário contínuo e controles compactos. */
body.in-match{background-color:#2B4A38;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22420%22%20height%3D%22460%22%20viewBox%3D%220%200%20420%20460%22%3E%3Cg%20fill%3D%22%23a3c880%22%20opacity%3D%22.10%22%3E%3Cg%20transform%3D%22translate%2820%2020%29%20rotate%28-18%2080%20100%29%22%3E%3Cpath%20d%3D%22M80%20210Q45%20110%2084%2022L92%2024Q64%20125%2088%20210Z%22/%3E%3Cpath%20d%3D%22M80%20150Q-10%20140%2010%2058Q94%2068%2080%20150M79%20105Q160%20112%20160%2025Q83%2026%2079%20105%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28225%20200%29%20rotate%2816%2080%20100%29%22%3E%3Cpath%20d%3D%22M80%20210Q45%20110%2084%2022L92%2024Q64%20125%2088%20210Z%22/%3E%3Cpath%20d%3D%22M80%20150Q-10%20140%2010%2058Q94%2068%2080%20150M79%20105Q160%20112%20160%2025Q83%2026%2079%20105%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-size:420px 460px}
.in-match .topbar{background:none;border:0;box-shadow:none;padding:8px 16px;min-height:52px;justify-content:flex-end;gap:0}
.in-match .brand{display:none}.in-match .topbar-actions{width:auto;display:flex;gap:4px;flex-wrap:nowrap}
.in-match .topbar-actions .icon-btn{font-size:0;width:44px;height:44px;min-height:44px;padding:10px;border:0;background:transparent;box-shadow:none;border-radius:12px;gap:0}
.in-match .topbar-actions .icon-btn:before{width:24px;height:24px}.in-match .topbar-actions .icon-btn:hover{background:#ffffff20}
.in-match .opponent-area,.in-match .my-area,.in-match .table-middle,.in-match .market-area{background:none;border:0;box-shadow:none;border-radius:0}
.in-match .opponent-area{padding:8px 0}.in-match .my-area{padding:12px 0}.in-match .table-middle{padding:14px 0}
.in-match .table-heading{margin-top:0;padding-top:0}.in-match .table-heading .eyebrow,.in-match #opponentsHint,.in-match #marketCount,.in-match .hand-heading p,.in-match #selectionHint,.in-match #stepLabel,.in-match .card-backs{display:none!important}
.in-match .turn-guide{border:0;box-shadow:none;background:rgba(255,246,228,.95);border-radius:16px}
.in-match .hidden-hand:empty{display:none}.in-match .opponent-row{gap:8px}.in-match .history{border:0}
#rulesSound{margin:8px 0 18px}#rulesSound:empty{display:none}

/* Creme de papel e verde sálvia: cenário claro da partida. */
body.in-match{background-color:#F3EBD8;color:#354638}
.in-match .table-heading h1{color:#354638;text-shadow:none}
.in-match .player-label strong,.in-match .hand-heading h2,.in-match .zone-label,.in-match .zone-label h2,.in-match .history,.in-match .connection,.in-match .pile-caption,.in-match .hidden-hand,.in-match .market-empty,.in-match .hand-heading p,.in-match .protection{color:#4B5946;text-shadow:none}
.in-match .market-empty{background:rgba(255,255,255,.3)}
.in-match .turn-guide{background:#FFF9EB}.in-match .topbar-actions .icon-btn:hover{background:#35463812}

.in-match .card-order:not(.first){color:#354638;text-shadow:none}

/* Ações de navegação legíveis sobre o cenário creme. */
#invite.light-button,#backToResult.light-button{background:#426347;color:#FFF9EB;border:2px solid #293F2D;box-shadow:0 2px 0 #293F2D;text-shadow:none;font-weight:800;min-height:44px}
#invite.light-button:hover,#backToResult.light-button:hover{background:#354F39}
#invite.light-button:focus-visible,#backToResult.light-button:focus-visible{outline:3px solid #293F2D;outline-offset:4px}

/* Ordem da mão fora da carta, abaixo também da sombra. */
#hand{padding-top:14px;padding-bottom:62px}
#hand .card-order{top:calc(100% + 14px);bottom:auto;left:-2px;right:-2px;min-height:34px;display:flex;align-items:center;justify-content:center;padding:4px 3px;font-size:11px;line-height:1.25;color:#354638;background:#E6EAD9;border-radius:7px;text-shadow:none;font-weight:800;white-space:normal}
#hand .card-order.first{color:#354638;background:#F5D77B;text-shadow:none}

.in-match .turn-guide.hand-stage{margin:0 0 14px;padding:14px 16px}.turn-guide.hand-stage .phase-actions{flex-shrink:0}

/* No computador, mesa e ações ao alcance da mão, sem longa rolagem. */
@media(min-width:1000px){
 .in-match #board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 28px;align-items:start}
 .in-match #board>.my-area{grid-column:1;grid-row:1 / span 3;min-width:0;margin:0;padding-top:0}
 .in-match #board>.table-middle{grid-column:2;grid-row:1;min-width:0;margin:0;padding-top:0}
 .in-match #board>.turn-guide{grid-column:2;grid-row:2;margin:0;flex-direction:column;align-items:stretch}
 .in-match #board>.trade-area{grid-column:2;grid-row:3;min-width:0}
 .in-match #board>#opponents,.in-match #board>#opponentsHint,.in-match #board>.history{grid-column:1 / -1;min-width:0}
 .in-match #board>.my-area .fields{gap:8px}
 .in-match #board>.my-area .turn-guide{flex-direction:column;align-items:stretch}
}
@media(min-width:1000px){
 .in-match #board>.table-middle{gap:14px}
 .in-match #board>.table-middle .piles{display:flex;flex-direction:column;align-items:center;gap:10px;width:58px;flex:0 0 58px}
 .in-match #board>.table-middle .market .bean-card{width:120px}
}

/* Celular: cabeçalho em uma linha e ações sempre ao alcance. */
@media(max-width:767px){
 .in-match .topbar{min-height:60px;padding:8px 10px 8px 150px}
 .in-match .topbar-actions{gap:0}
 .in-match #invite.light-button{width:44px;height:44px;padding:9px;font-size:0;background:transparent;border:0;box-shadow:none;color:#354638}
 .in-match #invite:before{content:"";display:block;width:24px;height:24px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23354638' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3Cpath d='M2 20v-3a5 5 0 0 1 10 0v3M18 7v8M14 11h8'/%3E%3C/g%3E%3C/svg%3E")}
 .in-match #game>.table-heading{position:absolute;top:17px;left:12px;width:calc(100% - 158px);margin:0;padding:0;min-height:0}
 .in-match .table-heading h1{font-size:19px;line-height:1.2;overflow-wrap:anywhere}
 .in-match .heading-actions{display:none}
 .in-match #main{padding-top:4px}
 .in-match .my-area{padding-top:0}
 .playing-match #board{padding-bottom:210px}
 .playing-match .turn-guide,.playing-match .turn-guide.hand-stage{position:fixed;bottom:0;left:0;right:0;z-index:20;margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#FFF9EB;box-shadow:0 -3px 14px #35463822;max-height:32svh;overflow-y:auto;gap:6px}
 .playing-match .turn-guide #phaseDescription{display:none}
 .playing-match .turn-guide h2{font-size:15px;line-height:1.2}
 .playing-match .turn-guide .turn-timer{margin-top:5px;padding:4px 8px;box-shadow:none;border-width:1px}
 .playing-match .turn-guide .phase-actions{display:flex;max-width:none;gap:6px;justify-content:flex-start;flex-wrap:wrap}
 .playing-match .turn-guide .phase-actions button{min-height:44px;padding:8px 12px;font-size:12px;flex:1}
}
@media(max-width:767px){html:has(body.playing-match){scroll-padding-bottom:220px}.playing-match [data-card],.playing-match [data-action]{scroll-margin-bottom:180px}}

/* Descarte: somente a ilustração da hortaliça. */
#discardPile .bean-card .card-head,#discardPile .bean-card .bean-meter{display:none}
#discardPile .bean-card{justify-content:center}
#discardPile .bean-card .bean-art{height:100%;min-height:0;padding:2px;display:flex;align-items:center;justify-content:center}
#discardPile .bean-card .bean-art svg{max-height:100%;max-width:100%}

.founder-border #myAvatar{border-color:#E2BD62;box-shadow:0 0 0 2px #785125}
#shopItems{display:grid}#shopItems svg{height:70px;width:100%}#shopItems h3{grid-column:1/-1}#shopItems .shop-item{color:#354638;background:#FFF9EB!important;border:2px solid #BCA774!important}

.emote-options{display:flex;gap:12px;margin:18px 0}.emote-options button{font-size:32px;padding:12px;background:#F3EBD8;border-radius:12px;min-width:64px}.reaction-bubble{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:80;background:#FFF9EB;border:2px solid #426347;border-radius:18px;padding:12px 20px;color:#354638;box-shadow:0 4px 10px #0002;max-width:90vw;pointer-events:none}#myAvatar[role=button]{cursor:pointer}

#accountMenu label{display:block;margin:12px 0}#accountMenu input{display:block;width:100%;padding:10px}#accountMenu button{padding:10px 14px;margin:6px 4px;min-height:44px}#accountRooms a{padding:8px 0}#accountError{color:#A42E28}

.shop-navigation{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.shop-navigation button{padding:8px 10px;border-radius:10px;background:#E5EAD8;color:#354638;min-height:44px}.shop-navigation button[aria-pressed=true]{background:#426347;color:#FFF9EB}.commerce-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}.commerce-grid article{padding:14px;background:#F3EBD8;color:#354638;border-radius:12px}.commerce-grid h4{margin:0 0 8px}.commerce-grid button,#commercePanel>button{min-height:44px;padding:8px 12px;margin-top:10px;border-radius:8px;background:#426347;color:#FFF9EB}#commercePanel h3{margin:18px 0 8px}#commercePanel{color:#354638}

#productPreview{width:min(680px,calc(100vw - 24px))}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}.product-grid figure{margin:0;padding:8px;border:2px solid;border-radius:12px;background:#FFF9EB}.product-grid svg{width:100%;height:90px;display:block}.product-grid figcaption{text-align:center;font-size:12px;color:#354638}.product-art{width:100%;max-height:260px;object-fit:contain;margin:16px 0}.product-emote{font-size:80px;text-align:center;margin:20px}.product-actions{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:-20px;background:#FFF9EB;padding:12px 0}.product-actions button{padding:10px 14px;min-height:44px;border-radius:10px;background:#426347;color:#FFF9EB}#productPrice{font-weight:800;margin:12px 0}

.founder-product-sample{width:110px;height:140px;margin:18px auto;padding:12px;background:#FFF9EB;border:6px double #C2A15A;border-radius:14px;box-shadow:0 4px 0 #785125}.founder-product-sample svg{width:100%;height:100%}

#menuCoins{display:inline-flex;align-items:center;max-width:100%;margin:0 12px 12px 0;font-size:18px} .end-screen #returnToMenu{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;text-decoration:none;box-sizing:border-box}

/* Ilustrações dos sete pacotes de moedas, fornecidas pelo Afreim. */
.commerce-grid .pack-art{display:block;width:100%;height:160px;object-fit:contain;margin:0 auto 8px}
#commercePreview .pack-preview-art{display:block;width:min(240px,100%);height:240px;object-fit:contain;margin:0 auto 12px}

/* Seis pacotes: duas fileiras de três, inclusive no celular. */
.coin-pack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.coin-pack-grid article{min-width:0;display:flex;flex-direction:column;text-align:center}
.coin-pack-grid h4{min-height:2.6em;line-height:1.3}
.coin-pack-grid button{margin-top:auto;width:100%}
@media(max-width:480px){
 .coin-pack-grid{gap:6px}
 .coin-pack-grid article{padding:8px 4px}
 .coin-pack-grid .pack-art{height:90px;margin-bottom:6px}
 .coin-pack-grid h4{font-size:12px;min-height:3.9em;overflow-wrap:anywhere}
 .coin-pack-grid strong,.coin-pack-grid p{font-size:12px;line-height:1.4}
 .coin-pack-grid p{margin:8px 0}
 .coin-pack-grid button{font-size:12px;padding:8px 3px}
}