/* ===================================================================
   HORTINHA CARDS — DESIGN SYSTEM OFICIAL (pack visual + mockups)
   Só camada visual. IDs/rotas/regras não mudam aqui.
   Critério: parecer o jogo das referências, não um site verde.
   =================================================================== */

:root{
  /* —— COLORS (pack) —— */
  --garden-green-dark:#145B37;
  --garden-green:#238847;
  --garden-green-mid:#2E9B45;
  --garden-green-light:#71B95B;
  --garden-green-soft:#E8F6E0;
  --garden-green-panel:#1F6B2A;

  --cream:#FFF7E4;
  --cream-light:#FFFEF7;
  --beige:#F4E8C9;
  --beige-2:#EFE3C4;

  --wood:#8B542D;
  --wood-light:#C98A4B;
  --wood-mid:#A66A32;
  --wood-dark:#4A2A18;

  --coin-yellow:#F6B92D;
  --coin-dark:#D49212;
  --orange:#F47B31;

  --danger:#D64545;
  --success:#2E9B45;

  --sky:#7EC8E3;
  --sky-deep:#4FA8C8;
  --soil:#A9714C;
  --soil-dark:#6B4429;
  --leaf:#4A9E2F;

  --text-primary:#2A1F18;
  --text-secondary:#5A6B5C;
  --text-on-green:#FFF7E4;
  --text-on-wood:#FFF7E4;
  --text-muted:#6B7A6C;

  --line-soft:rgba(20,91,55,.14);
  --line-mid:rgba(20,91,55,.28);
  --outline-art:#2E1F52; /* só cartas/ilustrações */

  /* —— RADIUS —— */
  --radius-small:10px;
  --radius-medium:16px;
  --radius-large:22px;
  --radius-xl:28px;
  --radius-pill:999px;

  /* —— SHADOW —— */
  --shadow-small:0 2px 6px rgba(0,0,0,.12);
  --shadow-card:0 6px 16px rgba(0,0,0,.16);
  --shadow-modal:0 18px 48px rgba(0,0,0,.32);
  --shadow-button:0 4px 0 rgba(20,91,55,.35);
  --shadow-button-press:0 1px 0 rgba(20,91,55,.35);
  --inset-highlight:inset 0 2px 0 rgba(255,255,255,.35);

  /* —— SPACING —— */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;

  /* —— TYPE —— */
  --font-display:"Fredoka","Nunito",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
  --fs-display:clamp(34px,9vw,48px);
  --fs-h1:clamp(24px,6vw,32px);
  --fs-h2:20px;
  --fs-h3:16px;
  --fs-body:15px;
  --fs-caption:12px;
  --fs-tiny:11px;

  /* —— Z / TOUCH —— */
  --z-dock:40;--z-event:45;--z-modal:60;--z-toast:80;
  --tap-min:48px;

  /* aliases legados (não quebrar CSS antigo) */
  --g-deep:var(--garden-green-dark);
  --g-main:var(--garden-green);
  --g-mid:var(--garden-green-mid);
  --g-light:var(--garden-green-light);
  --g-mint:var(--garden-green-soft);
  --cream-2:var(--beige);
  --cream-3:var(--cream-light);
  --ink:var(--text-primary);
  --ink-soft:var(--text-secondary);
  --muted:var(--text-secondary);
  --gold:var(--coin-yellow);
  --gold-dark:var(--coin-dark);
  --purple-line:var(--outline-art);
  --line:var(--garden-green-soft);
  --r-sm:var(--radius-small);--r-md:var(--radius-medium);
  --r-lg:var(--radius-large);--r-xl:var(--radius-xl);--r-pill:var(--radius-pill);
  --sp-1:var(--space-1);--sp-2:var(--space-2);--sp-3:var(--space-3);
  --sp-4:var(--space-4);--sp-5:var(--space-5);--sp-6:var(--space-6);--sp-7:var(--space-7);
  --shadow-btn:var(--shadow-button);
  --shadow-panel:var(--shadow-modal);
  --inset-soft:var(--inset-highlight);
  --fs-h1:var(--fs-h1);--fs-cap:var(--fs-caption);--fs-num:16px;
}

/* ===================== BASE ===================== */
html{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--text-on-green);
  min-height:100%;
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(ellipse 140% 55% at 50% -8%, #8FD0E8 0%, var(--sky) 32%, transparent 58%),
    linear-gradient(180deg,
      #5BB8D6 0%,
      #71B95B 22%,
      #3E9A4A 48%,
      #2B6B3A 72%,
      #1A4A28 100%);
  background-attachment:fixed;
}
/* cenário: cercas / folhas / terra (CSS até assets PNG individuais) */
body.home-scene::before{
  content:"";position:fixed;left:0;right:0;bottom:0;height:min(42vh,320px);
  pointer-events:none;z-index:0;
  background:
    linear-gradient(180deg,transparent 0%,rgba(107,68,41,.15) 30%,rgba(107,68,41,.45) 100%),
    repeating-linear-gradient(90deg,
      transparent 0 28px,
      rgba(74,42,24,.18) 28px 32px,
      transparent 32px 60px);
  opacity:.55;mask-image:linear-gradient(180deg,transparent,black 40%);
}
body.home-scene::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(ellipse 40% 28% at 8% 78%, rgba(74,158,47,.55) 0 40%, transparent 70%),
    radial-gradient(ellipse 36% 26% at 92% 80%, rgba(74,158,47,.5) 0 42%, transparent 72%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35) 0 28px, transparent 32px),
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.28) 0 36px, transparent 40px);
}
#main,.topbar,.home-dock,.event-button{position:relative;z-index:1}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
button,input,select,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.55}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ===================== BOTÕES ===================== */
.game-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap-min);padding:12px 20px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.1;
  box-shadow:var(--shadow-button);
  transition:transform .1s ease,box-shadow .1s ease,filter .15s ease;
  -webkit-user-select:none;user-select:none;
}
.game-btn:active:not(:disabled){transform:scale(.96);box-shadow:var(--shadow-button-press)}
.game-btn:disabled{filter:grayscale(.25);box-shadow:none}
.game-btn.is-loading{pointer-events:none;opacity:.75}
.game-btn--primary{
  background:linear-gradient(180deg,#2F9B4A 0%,var(--garden-green) 55%,var(--garden-green-dark) 100%);
  color:var(--text-on-green);
  box-shadow:0 5px 0 rgba(15,60,35,.45), var(--inset-highlight);
}
.game-btn--secondary{
  background:linear-gradient(180deg,#FFFEF7,#F4E8C9);
  color:var(--garden-green-dark);
  box-shadow:0 3px 0 rgba(20,91,55,.2), var(--inset-highlight);
  border:1.5px solid var(--line-mid);
}
.game-btn--coin{
  background:linear-gradient(180deg,#FFE27A,var(--coin-yellow) 55%,var(--coin-dark));
  color:var(--text-primary);
  box-shadow:0 4px 0 rgba(140,90,10,.35), var(--inset-highlight);
}
.game-btn--danger{
  background:linear-gradient(180deg,#F06A6A,var(--danger));
  color:#fff;box-shadow:0 3px 0 rgba(120,30,30,.35)
}
.game-btn--ghost{
  background:rgba(255,247,228,.16);color:var(--text-on-green);
  box-shadow:none;min-height:44px;border:1.5px solid rgba(255,247,228,.28)
}
.game-btn--block{width:100%}
.game-btn--sm{min-height:40px;padding:8px 14px;font-size:13px}
.game-btn.is-selected{
  outline:3px solid rgba(246,185,45,.65);outline-offset:2px
}
.game-icon-btn{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFEF7,#F4E8C9);
  color:var(--garden-green-dark);
  box-shadow:0 3px 0 rgba(20,91,55,.22), var(--inset-highlight);
}
.game-icon-btn:active{transform:scale(.94)}

/* ===================== SUPERFÍCIES ===================== */
.game-panel{
  background:linear-gradient(180deg,var(--cream) 0%,var(--beige) 100%);
  color:var(--text-primary);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card), var(--inset-highlight);
  border:1px solid rgba(255,255,255,.55);
  padding:var(--space-5);
}
.game-panel--soft{
  background:var(--cream-light);
  border-radius:var(--radius-large);
  box-shadow:var(--shadow-small);
  border:1px solid var(--line-soft);
}
.game-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
  background:linear-gradient(180deg,#3AA34D 0%,#2F8B3C 55%,var(--garden-green-dark) 100%);
  color:var(--text-on-green);
  border-radius:var(--radius-large) var(--radius-large) 0 0;
  padding:var(--space-4) var(--space-5);
}
.game-header h2,.game-header h1{margin:0;color:var(--text-on-green);font-size:var(--fs-h2)}
.game-header p{margin:4px 0 0;color:#EAF6DF;font-weight:700;font-size:var(--fs-caption)}

/* WoodSign — placas do pack (CSS até PNG separado) */
.wood-sign{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--wood-light) 0%,var(--wood-mid) 48%,var(--wood) 100%);
  color:var(--text-on-wood);
  border-radius:14px 16px 12px 14px;
  padding:10px 18px;
  box-shadow:0 4px 0 rgba(74,42,24,.45), var(--inset-highlight);
  font-family:var(--font-display);font-weight:700;
  position:relative;
}
.wood-sign--logo{
  flex-direction:column;gap:2px;padding:14px 28px 12px;
  border-radius:18px 22px 16px 18px;
  max-width:min(340px,92vw);
}
.wood-sign--logo .logo-title{
  font-size:var(--fs-display);line-height:0.95;color:#FFF6D8;
  text-shadow:0 3px 0 rgba(74,42,24,.55);
  margin:0
}
.wood-sign--logo .logo-sub{
  font-size:13px;letter-spacing:.14em;font-weight:800;
  color:#FFE9A8;margin:2px 0 0;text-shadow:0 1px 0 rgba(74,42,24,.4)
}
.wood-sign--sm{padding:6px 14px;font-size:13px;border-radius:12px}
.wood-sign .leaf-deco{
  position:absolute;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9BE8A8,var(--leaf));
  box-shadow:0 2px 0 rgba(20,91,55,.35)
}
.wood-sign .leaf-deco--l{left:10px;top:-8px}
.wood-sign .leaf-deco--r{right:10px;top:-8px}

/* Player / coins / XP */
.player-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 5px;
  background:linear-gradient(180deg,#1A7A3A,#145B37);
  color:var(--text-on-green);
  border-radius:var(--radius-pill);
  box-shadow:0 3px 0 rgba(10,40,20,.35), var(--inset-highlight);
  font-weight:800;min-width:0;max-width:min(220px,58vw)
}
.player-badge .avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FFE27A,var(--coin-yellow));
  color:var(--text-primary);font-family:var(--font-display);font-weight:700;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4)
}
.player-badge .home-level{display:flex;flex-direction:column;gap:3px;min-width:0}
.player-badge strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.player-badge small{font-size:10px;opacity:.9;font-weight:800}
.progress-bar{
  height:8px;border-radius:var(--radius-pill);background:rgba(0,0,0,.25);
  overflow:hidden;width:min(110px,26vw)
}
.progress-bar>span{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--garden-green-light),var(--coin-yellow));
  transition:width .35s ease
}

.currency-badge{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:5px 8px 5px 8px;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#1A7A3A,#145B37);
  color:var(--text-on-green);
  font-weight:800;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 0 rgba(10,40,20,.35), var(--inset-highlight)
}
.currency-badge .coin-dot{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE27A,var(--coin-yellow) 55%,var(--coin-dark));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45)
}
.currency-badge button,#buyCoinsPlus{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#3FBF55,var(--garden-green));
  color:#fff;font-weight:900;line-height:1;padding:0;
  box-shadow:0 2px 0 rgba(10,40,20,.3)
}

.status-badge{
  display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  border-radius:var(--radius-pill);font:800 11px var(--font-body);
  background:var(--garden-green-soft);color:var(--garden-green-dark)
}
.status-badge.is-live{background:#E8FFF0}
.status-badge.is-wait{background:#FFF3C9;color:var(--wood)}

.game-input,.game-search{
  width:100%;min-height:var(--tap-min);padding:12px 14px;
  border-radius:var(--radius-medium);
  border:1.5px solid var(--line-mid);
  background:var(--cream-light);color:var(--text-primary);
  font-weight:700;box-shadow:inset 0 2px 0 rgba(0,0,0,.04)
}
.game-input:focus,.game-search:focus{outline:3px solid rgba(113,185,91,.45);outline-offset:1px}
.game-input::placeholder{color:#8A9580;font-weight:600}

.tab-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-row::-webkit-scrollbar{display:none}
.tab-btn{
  flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:var(--radius-pill);
  background:rgba(20,91,55,.08);color:var(--text-secondary);
  font:800 13px var(--font-body)
}
.tab-btn.is-active,.tab-btn[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--garden-green-mid),var(--garden-green));
  color:var(--text-on-green);box-shadow:0 3px 0 rgba(20,91,55,.3)
}

.timer-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;
  border-radius:var(--radius-pill);background:#FFF3C9;color:var(--wood);
  font-family:var(--font-display);font-weight:700;font-size:13px
}
.timer-chip.is-urgent{background:#FFE0D6;color:#B33A2B}

.notification-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--radius-pill);background:var(--danger);color:#fff;
  font:800 10px var(--font-body);display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(0,0,0,.2)
}

/* ===================== EVENT BUTTON ===================== */
.event-button{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:6px 12px 6px 6px;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#2A8F45,#1A6B35);
  color:var(--text-on-green);
  box-shadow:0 4px 0 rgba(10,40,20,.4), var(--shadow-small), var(--inset-highlight);
  font-weight:800;position:relative;max-width:min(200px,48vw);
  z-index:var(--z-event)
}
.event-button:active{transform:scale(.96)}
.event-button__icon{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#C8F5A8,#4A9E2F);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)
}
.event-button__icon img{width:20px;height:20px;object-fit:contain}
.event-button__body{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.event-button__title{
  font:800 11px var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px
}
.event-button__timer{font:800 12px var(--font-display);opacity:.95}
.event-button__badge{top:-2px;right:-2px}
/* temas */
.event-button[data-theme="halloween"]{background:linear-gradient(180deg,#6B3FA0,#3D2466)}
.event-button[data-theme="halloween"] .event-button__icon{background:radial-gradient(circle at 35% 30%,#FFB86B,#F47B31)}
.event-button[data-theme="christmas"]{background:linear-gradient(180deg,#C23B3B,#7A1F1F)}
.event-button[data-theme="christmas"] .event-button__icon{background:radial-gradient(circle at 35% 30%,#E8FFF0,#2E9B45)}
.event-button[data-theme="autumn"]{background:linear-gradient(180deg,#C9782A,#8B4A12)}
.event-button[data-theme="spring"]{background:linear-gradient(180deg,#5BBF7A,#2E8B4A)}
.event-button[data-theme="new-year"]{background:linear-gradient(180deg,#3A5FBF,#1E2F7A)}

.home-event-slot{
  position:absolute;top:max(8px,env(safe-area-inset-top));right:12px;z-index:var(--z-event)
}
@media(max-width:360px){
  .home-event-slot{right:8px;top:max(6px,env(safe-area-inset-top))}
  .event-button{max-width:42vw;padding:5px 10px 5px 5px}
  .event-button__title{max-width:72px;font-size:10px}
}

/* ===================== BOTTOM NAV ===================== */
.home-dock{
  position:fixed;
  bottom:max(10px,env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  width:min(400px,calc(100% - 16px));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;padding:8px;z-index:var(--z-dock);
  background:linear-gradient(180deg,var(--garden-green) 0%,var(--garden-green-dark) 100%);
  border-radius:22px;
  box-shadow:0 6px 0 rgba(10,40,20,.45),0 14px 32px rgba(0,0,0,.28), var(--inset-highlight)
}
.home-dock .dock-button{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;padding:6px 2px;border-radius:14px;
  background:transparent;color:var(--text-on-green);
  font:800 11px var(--font-body);line-height:1.05
}
.home-dock .dock-button::before{
  content:"";width:22px;height:22px;flex-shrink:0;
  background-color:currentColor;
  mask-size:contain;mask-repeat:no-repeat;mask-position:center;
  -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center
}
.home-dock .dock-button.is-current{
  background:var(--cream);color:var(--garden-green-dark);
  box-shadow:inset 0 0 0 0 transparent
}
.home-dock .dock-extra[hidden]{display:none!important}
.in-match .home-dock{display:none}
body:not(.in-match) #main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

#homeOpen:before{mask-image:url('/icons/house.svg');-webkit-mask-image:url('/icons/house.svg')}
#inventoryOpen:before{mask-image:url('/icons/backpack.svg');-webkit-mask-image:url('/icons/backpack.svg')}
#shopOpen:before{mask-image:url('/icons/storefront.svg');-webkit-mask-image:url('/icons/storefront.svg')}
#friendsOpen:before{mask-image:url('/icons/users.svg');-webkit-mask-image:url('/icons/users.svg')}
#eventsOpen:before{mask-image:url('/icons/sprout.svg');-webkit-mask-image:url('/icons/sprout.svg')}
#rankingOpen:before{mask-image:url('/icons/trophy.svg');-webkit-mask-image:url('/icons/trophy.svg')}

/* ===================== HOME ===================== */
.topbar.game-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:440px;margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) 14px 6px;
  background:transparent!important;border:0!important;box-shadow:none!important
}
.topbar.game-topbar .brand{display:none!important}
.home-profile{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.home-account{display:flex;align-items:center;gap:8px;min-width:0}
.home-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

#welcome.welcome{
  max-width:440px;margin:0 auto;
  padding:4px 14px 28px;
  display:flex;flex-direction:column;align-items:center;gap:12px
}
#welcome[hidden]{display:none!important}

.home-hero{
  width:100%;text-align:center;padding:4px 0 2px;
  display:flex;flex-direction:column;align-items:center;gap:10px
}
.home-hero .wood-sign--logo{margin:0 auto}
.home-hero .sample-cards{
  display:flex;justify-content:center;align-items:flex-end;gap:6px;
  min-height:120px;margin:4px 0 2px;pointer-events:none
}
.home-hero .sample-cards .bean-card{
  flex:none;width:min(100px,26vw);min-height:132px;
  box-shadow:0 6px 0 rgba(46,31,82,.35),0 10px 18px rgba(0,0,0,.18)!important
}
.home-hero .sample-cards .bean-card:nth-child(1){transform:rotate(-9deg) translateY(10px)}
.home-hero .sample-cards .bean-card:nth-child(2){transform:translateY(0);z-index:1}
.home-hero .sample-cards .bean-card:nth-child(3){transform:rotate(9deg) translateY(10px)}
.home-hero .players-chip{
  margin:0 auto;
  font-size:13px
}

.join-panel.game-panel{
  width:100%;margin:0;padding:16px 14px 14px;
  text-align:center
}
.join-panel .join-kicker{
  display:block;font:800 12px var(--font-body);letter-spacing:.1em;
  text-transform:uppercase;color:var(--garden-green-dark);margin-bottom:4px
}
.join-panel #joinTitle{
  margin:0;font-size:var(--fs-h2);color:var(--garden-green-dark);text-align:center
}
.join-panel #joinDescription{
  margin:6px 0 14px;color:var(--text-secondary);font-weight:700;font-size:14px;text-align:center
}
#entryForm{display:flex;flex-direction:column;gap:10px;text-align:left}
#entryForm label{font:800 13px var(--font-body);color:var(--garden-green-dark)}

/* Pace selector — pack style */
#paceChoice{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;border:0;padding:0
}
#paceChoice[hidden]{display:none!important}
#paceChoice legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pace-card{
  position:relative;text-align:left;padding:12px;
  border-radius:var(--radius-large);
  background:var(--cream-light);
  color:var(--text-primary);
  box-shadow:var(--shadow-small);
  border:2px solid transparent;
  min-height:96px;display:flex;flex-direction:column;gap:4px;cursor:pointer
}
.pace-card input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.pace-card strong{font-family:var(--font-display);font-size:14px;color:var(--garden-green-dark)}
.pace-card span{font-size:12px;color:var(--text-secondary);font-weight:700;line-height:1.35}
.pace-card.is-selected,.pace-card:has(input:checked){
  border-color:var(--garden-green);
  background:linear-gradient(180deg,#F3FAEE,#E8F6E0);
  box-shadow:0 0 0 3px rgba(35,136,71,.2),0 3px 0 rgba(20,91,55,.18)
}
.pace-card.is-selected::after,.pace-card:has(input:checked)::after{
  content:"✓";position:absolute;top:8px;right:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--garden-green);color:#fff;
  font:800 12px var(--font-body);display:grid;place-items:center
}

#entrySubmit.game-btn--primary,
#welcome #entrySubmit{
  width:100%;min-height:54px;font-size:18px;margin-top:2px;
  border-radius:var(--radius-pill)
}
.home-or{
  display:flex;align-items:center;gap:10px;margin:6px 0;
  color:var(--text-muted);font:800 12px var(--font-body)
}
.home-or::before,.home-or::after{content:"";flex:1;height:2px;background:var(--line-soft);border-radius:2px}
.home-secondary{display:flex;flex-direction:column;gap:8px}
.home-secondary .game-btn{width:100%}
#welcome #entryError:empty{display:none}
#welcome #resumeRoom{
  display:block;margin-top:10px;padding:12px;border-radius:14px;
  background:var(--garden-green-soft);color:var(--garden-green-dark);
  font-weight:800;text-align:center;text-decoration:none
}
#welcome #resumeRoom[hidden]{display:none}

/* esconde teaser banner antigo se sobrar classe */
.home-event-teaser:not(.event-button){
  /* legado: se JS ainda injetar HTML solto, compacta */
  max-width:min(200px,48vw)
}

/* ===================== PARTIDA (base, polish depois) ===================== */
#game{max-width:560px;margin:0 auto;padding:8px 10px 20px}
#game .table-heading{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:transparent;border:0;box-shadow:none;padding:4px 0 8px;text-align:center
}
#game .table-heading .eyebrow{display:none}
#game #tableTitle{
  margin:0;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--wood-light),var(--wood));
  color:var(--text-on-wood)!important;
  border-radius:16px;padding:10px 18px;
  box-shadow:0 4px 0 rgba(74,42,24,.4);font-size:clamp(16px,4.5vw,20px);
  max-width:100%
}
#game .my-area,#game .table-middle,#game .turn-guide,#game .opponents{
  background:linear-gradient(180deg,rgba(255,253,247,.95),rgba(244,232,201,.92));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  border:1px solid rgba(255,255,255,.5);
  color:var(--text-primary);padding:12px
}
#game .hand-heading{background:transparent;border:0;box-shadow:none;padding:4px 2px;display:flex;justify-content:space-between;align-items:end}
#game .hand-heading h2{margin:0;color:var(--garden-green-dark);font-size:18px}
#game .hand-heading p{margin:0;color:var(--text-secondary);font-size:12px;font-weight:700}
#game .coins{
  background:linear-gradient(180deg,#FFFDF6,#FFE9A8);border-radius:var(--radius-pill);
  padding:6px 12px;color:var(--text-primary);font-weight:800;box-shadow:var(--shadow-small)
}
#game .hand .card.is-selected,#game .hand article.is-selected{
  transform:translateY(-6px);box-shadow:0 8px 0 rgba(35,136,71,.3),0 12px 20px rgba(0,0,0,.16)
}
#game .turn-clock{
  font-family:var(--font-display);font-weight:700;
  background:#FFF3C9;color:var(--wood);border-radius:var(--radius-pill);padding:6px 12px
}
#lobby{
  max-width:520px;margin:12px auto;padding:18px;text-align:center;
  background:linear-gradient(180deg,var(--cream),var(--beige));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);color:var(--text-primary)
}
#result.result{
  background:linear-gradient(180deg,var(--cream),var(--beige));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);
  color:var(--text-primary);padding:18px;margin:10px auto /* auto: centralizado no PC (a tela é mais larga que o cartão) */
}
.ad-chip,.end-ad-banner{
  background:linear-gradient(180deg,#FFFDF6,#F3FAEE)!important;
  border:1px solid var(--line-mid)!important;border-radius:16px!important;
  color:var(--text-primary)!important;box-shadow:var(--shadow-small)
}

@media (hover:hover){
  .game-btn:hover:not(:disabled){filter:brightness(1.04)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:390px){
  #paceChoice{grid-template-columns:1fr}
  .pace-card{min-height:0}
  .home-dock{width:calc(100% - 10px)}
  .home-dock .dock-button{min-height:50px;font-size:10px}
  .home-hero .sample-cards .bean-card{width:min(92px,27vw);min-height:120px}
}
@media(min-width:760px){
  #welcome.welcome,#game,#lobby{max-width:480px}
}

/* X1 — fila de duelo rápido (matchmaking) */
.quick-match{display:grid;gap:8px;margin-bottom:4px}
.quick-match__btn{font-size:1.15rem}
.quick-match__hint{margin:0;text-align:center;font:600 13px Nunito,sans-serif;color:var(--text-secondary)}
.xq-dialog{width:min(420px,calc(100vw - 32px));text-align:center}
.xq-dialog h2{margin:4px 0 6px}
.xq-dialog .eyebrow{margin:0;color:var(--garden-green-dark);font:800 12px Nunito,sans-serif;letter-spacing:.08em}
.xq-radar{position:relative;width:110px;height:110px;margin:4px auto 12px;display:grid;place-items:center}
.xq-radar span{position:absolute;inset:0;border-radius:50%;border:3px solid var(--garden-green-mid);animation:queuePulse 2.1s cubic-bezier(.16,1,.3,1) infinite;opacity:0}
.xq-radar span:nth-child(2){animation-delay:.7s}
.xq-radar span:nth-child(3){animation-delay:1.4s}
.xq-radar i{font-style:normal;font-size:40px;animation:queueBob 1.6s ease-in-out infinite}
@keyframes queuePulse{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1);opacity:0}}
@keyframes queueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.xq-timer{margin:6px 0 14px;font:800 28px Fredoka,Nunito,sans-serif;font-variant-numeric:tabular-nums;color:var(--wood-dark)}
@media (prefers-reduced-motion:reduce){.xq-radar span,.xq-radar i{animation:none}.xq-radar span:first-child{opacity:.6;transform:scale(.8)}}

/* ---- Correções de legibilidade (30/09) ---- */
/* "Continuar como …": botão fantasma estava creme sobre creme */
.join-panel .game-btn--ghost,.home-secondary .game-btn--ghost{
  background:#FFFDF5;color:var(--garden-green-dark);border:2px solid rgba(20,91,55,.35);font-weight:800
}
/* Amigos › Adicionar pelo nome da conta: caixa clara em diálogo claro, texto escuro */
#friendsMenu #friendAdd{background:#EFF4E2;border:2px solid rgba(20,91,55,.28)}
#friendsMenu #friendAdd label{color:var(--garden-green-dark);text-shadow:none}
#friendsMenu #friendAdd input{color:var(--text-primary)}
#friendsMenu #friendAdd input::placeholder{color:var(--text-muted)}
/* Evento: sai de cima do logo e vira uma faixa no fluxo da página */
.home-event-slot{position:static;display:flex;justify-content:center;padding:6px 12px 0;z-index:auto}
.home-event-slot .event-button{max-width:100%}
#friendsContent h3,#friendsMenu h3{color:var(--garden-green-dark);text-shadow:none}
#friendsMenu .collection-empty{background:#F4F0E2;color:var(--text-secondary);text-shadow:none}

/* ---- Partida no celular: a barra de turno é fixa; o conteúdo ganha folga e o aviso sobe ---- */
@media(max-width:767px){
  body.playing-match #game{padding-bottom:210px}
  body.playing-match .toast{bottom:calc(200px + env(safe-area-inset-bottom));z-index:30}
  body.playing-match #game .my-area,body.playing-match #game .table-middle,body.playing-match #game .opponents{margin-bottom:14px}
  body.playing-match .turn-guide{max-height:38vh;overflow-y:auto}
}
#friendsMenu h3,#friendsMenu #friendsContent h3{color:var(--garden-green-dark)!important;text-shadow:none!important;-webkit-text-stroke:0!important;font-weight:600}
@media(max-width:767px){
  body.playing-match .toast{bottom:auto;top:calc(70px + env(safe-area-inset-top));max-width:88vw}
  body.playing-match #game .table-middle{min-height:0}
  body.playing-match #game .table-middle .market,body.playing-match #game .table-middle .table-cards{min-height:96px}
}

/* ---- Mão: rola só para os lados, sem subir/descer; primeira carta colada no início ---- */
#game #hand,#game #market{
  overflow-x:auto;overflow-y:hidden;height:auto;max-height:none;
  overscroll-behavior-x:contain;overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
  scroll-snap-type:x proximity;scroll-padding-inline:8px;
}
#game #hand{padding-inline:8px;justify-content:flex-start}
#game #hand>*{scroll-snap-align:start;flex:0 0 auto}
#game #hand{padding-top:16px;padding-bottom:30px}
body.playing-match #game .my-area{padding-bottom:10px}
body.playing-match #game .table-middle{padding-top:8px;padding-bottom:8px}
#game #hand{height:auto!important;min-height:200px}
#game #hand{padding-top:24px}

/* ---- Mão e mesa com o MESMO tamanho de carta; menos espaço entre canteiros e mão ---- */
@media(max-width:767px){
  body.playing-match #game #hand .bean-card,
  body.playing-match #game #market .bean-card{width:92px;min-width:92px;max-width:92px;height:128px;flex:0 0 92px}
  body.playing-match #game #market{gap:6px}
  body.playing-match #game .hand-heading{margin:2px 0 0;padding-top:0}
  body.playing-match #game #hand{padding-top:12px;padding-bottom:26px}
  body.playing-match #game .my-area{padding-bottom:4px}
  /* rodapé fixo nunca cobre o fim da página */
  body.playing-match{padding-bottom:0}
  body.playing-match #game{padding-bottom:calc(230px + env(safe-area-inset-bottom))}
}
@media(max-width:767px){body.playing-match #game #market{padding-bottom:24px;overflow-y:visible}}

/* ---- Eventos: só um ícone de relógio ao lado das moedas (sem faixa no meio da tela) ---- */
.home-event-slot{display:none!important}
.events-icon{position:relative;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFEF7,#F4E8C9);color:var(--garden-green-dark);border:2px solid var(--wood-dark);box-shadow:0 2px 0 var(--wood-dark);cursor:pointer}
.events-icon:active{transform:translateY(1px);box-shadow:none}
.events-icon__dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid #fff}

/* ---- Diálogos (Loja, Mochila, Amigos…): título sem corte e X como bolinha sobre a moldura ---- */
dialog.collection-dialog.has-scroll{overflow:visible;padding:0}
dialog.has-scroll>.dlg-scroll{max-height:calc(100dvh - 24px);overflow-y:auto;overflow-x:hidden;padding:30px;box-sizing:border-box;border-radius:inherit;overscroll-behavior:contain}
dialog.has-scroll>.dialog-close{position:absolute!important;top:-12px;right:-6px;width:40px;height:40px;min-height:40px;z-index:10;display:grid;place-items:center;
  background:#FFFEF7;color:#2E4632;border:3px solid #2E1F52;border-radius:50%;box-shadow:0 3px 0 rgba(46,31,82,.45);font:800 22px/1 Nunito,sans-serif;padding:0}
dialog.has-scroll .collection-top{margin:-30px -30px 16px;padding:22px 24px 18px}
dialog.has-scroll .collection-heading{padding-right:34px;min-width:0}
dialog.has-scroll .collection-heading h2,dialog.has-scroll .collection-heading p{overflow-wrap:anywhere}
@media(max-width:767px){
  dialog.has-scroll>.dlg-scroll{padding:16px;max-height:calc(100dvh - 20px)}
  dialog.has-scroll .collection-top{margin:-16px -16px 14px;padding:20px 18px 16px}
  dialog.has-scroll>.dialog-close{top:-10px;right:-2px;width:38px;height:38px;min-height:38px}
}

/* ---- Anúncio da partida: faixa própria, visível, logo abaixo do cabeçalho ---- */
#game>.match-ad{position:relative;z-index:2;margin:6px 0 8px}
#game>.match-ad .ad-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:#FFFDF5;border:2px solid rgba(20,91,55,.3);font-size:12px}
#game>.match-ad .ad-chip-text{min-width:0;font-size:12px;line-height:1.25}
#game>.match-ad .ad-chip button{white-space:nowrap;font-size:12px;padding:6px 10px;min-height:32px}

/* ---- Carta (mão e mesa): vegetal maior; tracejado, rendimentos e moedas mais para baixo ---- */
body #game .bean-card{display:flex!important;flex-direction:column;justify-content:flex-start}
body #game .bean-card .card-head{flex:0 0 auto}
body #game .bean-card .bean-art{flex:1 1 auto;height:auto!important;min-height:52px;display:grid;place-items:center;overflow:visible}
body #game .bean-card .bean-art svg,body #game .bean-card .bean-art img{width:auto;height:100%;max-height:64px;max-width:80%}
body #game .bean-card .bean-meter{flex:0 0 auto;margin-top:auto;padding-top:4px;padding-bottom:4px}

/* moldura menor em volta dos canteiros e da mão; carta com vegetal grande */
@media(max-width:767px){
  body.playing-match #game{padding-inline:0}
  body.playing-match main,body.playing-match #main{padding-inline:8px}
  body.playing-match #game .my-area,body.playing-match #game .table-middle,body.playing-match #game .opponents .opponent-row{padding:8px 8px 4px;border-radius:18px}
  body.playing-match #game .my-area .player-label{margin-bottom:4px}
  body.playing-match #game .hand-heading{margin:0;padding:0 4px;line-height:1}
  body.playing-match #game .hand-heading h2{font-size:15px}
}
body #game .bean-card .bean-art svg,body #game .bean-card .bean-art img,body #game .bean-card .bean-art>*{width:60px!important;height:60px!important;max-width:100%!important;max-height:60px!important;object-fit:contain}
dialog.has-scroll>.dlg-scroll{max-height:calc(100dvh - 64px)}
@media(max-width:767px){dialog.has-scroll>.dlg-scroll{max-height:calc(100dvh - 56px)}}

/* ---- Foto de perfil e bordinha (topo, mesa, amigos, conta) ---- */
.avatar.has-photo,#homeAvatar.has-photo{background-size:cover;background-position:center;color:transparent;font-size:0}
#homeAvatar,.friend-avatar.avatar{border-radius:50%}
.friend-avatar.avatar{width:34px;height:34px;display:inline-grid;place-items:center;flex:0 0 34px;font:800 15px Nunito,sans-serif;background:#DDEBCB;color:var(--garden-green-dark);margin-right:8px;position:relative}
.founder-border #homeAvatar{position:relative;border:0;outline:0;box-shadow:none}
.founder-border #homeAvatar::after{content:'';position:absolute;inset:-7px;background:url('/profile/founder.png') center/100% 100% no-repeat;pointer-events:none}
.friend-avatar.avatar-founder::after{content:'';position:absolute;inset:-6px;background:url('/profile/founder.png') center/100% 100% no-repeat;pointer-events:none}
.photo-row{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.photo-preview{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:0 0 64px;background:#DDEBCB;color:var(--garden-green-dark);font:800 26px Nunito,sans-serif;border:3px solid var(--garden-green-dark);background-size:cover;background-position:center}
.photo-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.photo-msg{margin:4px 0 0;font-size:12px;color:var(--text-secondary)}
.photo-pick{cursor:pointer}

/* ---- Partida: mesa colada na mão, sem faixa vazia e sem precisar rolar para ver as duas ---- */
#game #hand{min-height:0!important;padding-bottom:22px!important}
@media(max-width:767px){
  body.playing-match #game{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  body.playing-match #game .my-area{margin-bottom:6px;padding-bottom:0}
  body.playing-match #game .table-middle{margin-top:0;margin-bottom:8px}
}

/* ---- Botões de descartar: vermelhos e bem visíveis ---- */
button[data-action="discard_offer"],button[data-action="discard_hand"],button[data-action="discard_all"]{
  background:linear-gradient(180deg,#F26B5B,#D64545)!important;color:#fff!important;border:2px solid #7A1F1F!important;border-bottom-width:4px!important;
  text-shadow:0 1px 0 rgba(90,20,20,.6);box-shadow:0 3px 0 rgba(122,31,31,.45)}
button[data-action="discard_offer"][disabled],button[data-action="discard_hand"][disabled]{opacity:.55;filter:saturate(.8)}

/* ---- Selo do jogador no topo: maior, com a borda de perfil inteira (sem corte) ---- */
.player-badge{overflow:visible!important;min-height:62px;padding:8px 16px 8px 12px!important;gap:14px!important}
.game-topbar,.home-profile,.home-account{overflow:visible!important}
.game-topbar{padding-top:14px;padding-bottom:10px}
#homeAvatar{width:48px!important;height:48px!important;flex:0 0 48px;margin:2px;display:grid;place-items:center;border-radius:50%}
.founder-border #homeAvatar::after{inset:-9px}
/* ---- Perfil (toque no nome) ---- */
.profile-head{display:flex;align-items:center;gap:16px;margin:8px 0 16px}
.profile-head h3{margin:0;color:var(--garden-green-dark);font:600 24px Fredoka,sans-serif;text-shadow:none}
.profile-head p{margin:2px 0 0;color:var(--text-secondary);font-weight:800}
.profile-avatar.avatar{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;border-radius:50%;background:#DDEBCB;color:var(--garden-green-dark);font:800 30px Nunito,sans-serif;position:relative;margin:6px}
.profile-avatar.avatar-founder::after{content:'';position:absolute;inset:-10px;background:url('/profile/founder.png') center/100% 100% no-repeat;pointer-events:none}
.profile-level{background:#EFF4E2;border:2px solid rgba(20,91,55,.25);border-radius:16px;padding:12px;margin-bottom:14px}
.profile-level-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px}
.profile-level-top strong{color:var(--garden-green-dark);font-size:18px}.profile-level-top span{font-size:12px;color:var(--text-secondary)}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.profile-grid>div{background:#FFFDF5;border:2px solid rgba(20,91,55,.18);border-radius:14px;padding:10px;text-align:center}
.profile-grid span{display:block;font-size:11px;color:var(--text-secondary);font-weight:800}.profile-grid strong{font-size:20px;color:var(--text-primary)}
.profile-actions{margin-top:16px}.profile-actions .game-btn{width:100%}
.profile-account-row{margin:14px 0 0;text-align:center}
.profile-account-row .game-btn--ghost{background:#FFFDF5;color:var(--garden-green-dark);border:2px solid rgba(20,91,55,.35);min-height:40px;padding:8px 18px;font-size:14px}

/* ---- Amigos: botão amarelo "Criar mesa" e nomes sem corte ---- */
#friendsMenu .friend-list li{flex-wrap:wrap;align-items:center}
#friendsMenu .friend-id{flex:1 1 150px;min-width:0}
#friendsMenu .friend-name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;max-width:none!important;min-width:0}
#friendsMenu .friend-list li>div{flex:0 0 auto;max-width:100%}
#friendsMenu .friend-list button.friend-create{background:linear-gradient(180deg,#FFD84D,#F6B92D)!important;color:#4A2A18!important;text-shadow:none!important;border:2px solid #4A2A18!important;border-bottom-width:4px!important;font-weight:900;border-radius:12px;padding:8px 14px;white-space:nowrap}
#friendsMenu .friend-list button.friend-create:active{transform:translateY(2px);border-bottom-width:2px}

/* ---- Tabuleiro pós-jogo: "Voltar ao resultado" desce para não ficar sob o título ---- */
#backToResult:not([hidden]){display:inline-flex;margin:56px 0 10px;position:relative;z-index:3}
/* ---- X dos diálogos sempre inteiro (nada de overflow cortando a bolinha) ---- */
dialog.collection-dialog.has-scroll,dialog.collection-dialog.has-scroll[open]{overflow:visible!important;clip-path:none!important;contain:none!important}
dialog.has-scroll>.dialog-close{z-index:20!important;margin:0!important;transform:none!important}

/* Selo do topo: sem a barra de progresso; só nome e nível dentro da moldura verde */
.player-badge .progress-bar,#homeXpBar{display:none!important}
.player-badge{min-height:58px}
.player-badge .home-level{gap:1px;justify-content:center}

/* ---- Sair da partida: botão visível na tela da partida (vermelho) ---- */
.leave-row{display:none}
body.in-match .leave-row{display:flex;justify-content:flex-start;margin:0 0 6px;padding:0 4px}
.leave-quick,#leaveOpen{background:linear-gradient(180deg,#F26B5B,#D64545)!important;color:#fff!important;border:2px solid #7A1F1F!important;border-bottom-width:4px!important;
  border-radius:999px;font:800 13px Nunito,sans-serif;padding:7px 14px;min-height:36px;text-shadow:0 1px 0 rgba(90,20,20,.55);cursor:pointer}
.leave-quick:active{transform:translateY(2px);border-bottom-width:2px}

/* ---- TESTE (celular): só os canteiros ficam fixos no topo; mão, mesa, oponente e fundo rolam juntos ---- */
@media(max-width:767px){
  body.playing-match #game .my-area{display:contents}
  body.playing-match #game .my-area>.player-label{background:#FFFDF5;margin:0;padding:8px 10px 0;border-radius:18px 18px 0 0;position:relative;z-index:2}
  body.playing-match #game #myFields{position:sticky;top:6px;z-index:8;background:#FFFDF5;padding:6px 8px 8px;margin:0 0 6px;border-radius:0 0 18px 18px;box-shadow:0 8px 14px rgba(60,40,10,.18)}
  body.playing-match #game .my-area>.hand-heading{background:#FFFDF5;margin:0;padding:8px 12px 0;border-radius:18px 18px 0 0;position:relative;z-index:2}
  body.playing-match #game #hand{background:#FFFDF5;border-radius:0 0 18px 18px;margin:0 0 8px;position:relative;z-index:2}
  body.playing-match #game #receivedArea{background:#FFFDF5;position:relative;z-index:2}
}

/* ---- Canteiro protegido legível ---- */
.field.garden-field .protection,.protection{display:block;width:fit-content;margin:6px auto 0!important;padding:3px 10px;border-radius:999px;background:#FFE7B8;color:#6B2E00!important;
  border:1.5px solid #A65A12;font:800 11px Nunito,sans-serif!important;text-align:center;text-shadow:none}
/* ---- "Mesa" no mesmo lugar do "Sua mão" (canto direito, verde) ---- */
#game .market-area .zone-label{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;margin:0 0 4px;padding:0 4px;background:transparent;border:0;box-shadow:none}
#game .market-area .zone-label h2{margin:0;color:var(--garden-green-dark)!important;font:600 15px Fredoka,Nunito,sans-serif;text-shadow:none!important}
@media(max-width:767px){body.playing-match #game .market-area .zone-label h2{font-size:15px}}
/* ---- Descarte centralizado dentro do quadradinho ---- */
#game .discard-pile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#game .discard-pile .empty-pile{display:grid;place-items:center;width:52px;height:64px;margin:0 auto;border:2px dashed rgba(20,91,55,.35);border-radius:10px;font-size:11px;color:var(--text-secondary);text-shadow:none}
#game .discard-pile .pile-caption{margin:4px 0 0!important;font-size:10px!important;white-space:nowrap;text-align:center;width:100%;color:var(--text-secondary)!important;text-shadow:none!important}
#game .deck-card{display:grid;place-items:center;text-align:center}

/* ---- Caixas de confirmação (sair, render-se, colher): botões com borda e cor ---- */
dialog:not(.collection-dialog) .confirm-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
dialog:not(.collection-dialog) .confirm-actions button{flex:1 1 140px;min-height:48px;padding:10px 16px;border-radius:14px;font:800 15px Nunito,sans-serif;cursor:pointer;
  border:3px solid #2E1F52;border-bottom-width:5px;box-shadow:0 3px 0 rgba(46,31,82,.35);text-shadow:none}
dialog:not(.collection-dialog) .confirm-actions button:active{transform:translateY(2px);border-bottom-width:3px}
/* "voltar/continuar/cancelar": verde; "sair/render-se/colher": vermelho */
#leaveCancel,#surrenderCancel,#harvestCancel,#inviteDecline{background:linear-gradient(180deg,#7ED957,#3E9B4F)!important;color:#fff!important;text-shadow:0 1px 0 rgba(20,60,30,.55)!important}
#leaveAccept,#surrenderAccept{background:linear-gradient(180deg,#F26B5B,#D64545)!important;color:#fff!important;border-color:#7A1F1F!important;text-shadow:0 1px 0 rgba(90,20,20,.55)!important}
#harvestAccept,#inviteAccept{background:linear-gradient(180deg,#FFD84D,#F6B92D)!important;color:#4A2A18!important;border-color:#4A2A18!important}

/* Placa "Hortinha Cards" um pouco mais abaixo: não cobre a borda do selo do jogador */
#welcome .home-hero{padding-top:20px}
.wood-sign--logo{margin-top:22px}
.wood-sign--logo{margin-top:48px!important}
#welcome .intro.home-hero .wood-sign--logo{margin:44px auto 0!important}

/* "Sua mão" com a mesma fonte de "Mesa" */
#game .hand-heading h2,body.playing-match #game .hand-heading h2{font:600 15px Fredoka,Nunito,sans-serif!important;color:var(--garden-green-dark)!important;text-shadow:none!important;margin:0}

/* Descarte: carta pequena com o vegetal centralizado no quadradinho */
#game .discard-pile .bean-card{width:50px!important;min-width:50px!important;max-width:50px!important;height:56px!important;padding:2px!important;margin:0 auto;display:flex!important;flex-direction:column;align-items:center;justify-content:center}
#game .discard-pile .bean-card .card-head{position:absolute;top:1px;right:1px;min-height:0;padding:0}
#game .discard-pile .bean-card .bean-art{flex:1 1 auto;min-height:0!important;height:auto!important;width:100%;display:grid;place-items:center;overflow:hidden}
#game .discard-pile .bean-card .bean-art svg,#game .discard-pile .bean-card .bean-art img,#game .discard-pile .bean-card .bean-art>*{width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;margin:0 auto}
#game .discard-pile .bean-card .bean-meter,#game .discard-pile .bean-card .bean-name{display:none!important}
#game .piles{align-items:center}#game .discard-pile{width:56px}

/* Evento de lançamento (Fundador) */
.launch-card{border:3px solid #C9922A!important;background:linear-gradient(180deg,#FFF8DC,#FBE9A8)!important}
.launch-card h3{color:#6B4A00}.launch-card .event-count{color:#7A5A10;font-weight:800}
.launch-card p{color:#4A3A10}.launch-ok{font-weight:800;color:#1F6B2A!important}
.launch-claim{margin-top:8px;width:100%}
#inventoryStatus{display:none!important}
.report-row{margin:12px 0 0;text-align:center}.report-link{color:#8A2C1F;font:800 13px Nunito,sans-serif;text-decoration:underline}

/* ---- Canteiros do oponente: mesma largura e proporção dos meus (preenchem a moldura) ---- */
@media(max-width:767px){
  body.playing-match #game .opponent-row{display:block}
  body.playing-match #game .opponent-fields{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--field-gap,8px);width:100%;flex:1 1 100%;margin:0}
  body.playing-match #game .opponent-fields .field{width:auto;min-width:0}
  body.playing-match #game .opponent-fields .garden-field{width:100%}
  body.playing-match #game .opponent-fields .garden-scene{height:112px}
  body.playing-match #game .opponent-area{padding-inline:8px}
}

/* Borda das cartas sempre por cima das vizinhas (mão, mesa, ofertas) */
#game .bean-card{position:relative}
#game .bean-card.selected,#game .bean-card.is-selected,#game .bean-card.selectable:hover,#game .bean-card:focus-visible,#game .bean-card:focus-within{z-index:40}
#game .bean-card.selected,#game .bean-card.is-selected{outline:3px solid var(--primary,#ff6b35);outline-offset:1px;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 14px rgba(0,0,0,.25)}
#game .table-cards,#game .my-area{overflow:visible}
/* mão rola para o lado; espaço em cima (carta levantada) e embaixo (selo 1ª/2ª na fila) */
body #game #hand{overflow-x:auto!important;overflow-y:hidden!important;padding-top:18px!important;padding-bottom:52px!important}

/* Foto de perfil: centralizada e preenchendo o círculo em qualquer lugar; clicável para ampliar */
.avatar.has-photo,.friend-avatar.avatar.has-photo,.profile-avatar.avatar.has-photo,#homeAvatar.has-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;cursor:zoom-in}
.friend-avatar.avatar{width:44px;height:44px;flex:0 0 44px}
#photoView{border:0;background:transparent;padding:0;max-width:none;max-height:none;overflow:visible}
#photoView::backdrop{background:rgba(0,0,0,.78)}
#photoView .photo-big{width:min(86vw,420px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 6px #fff,0 18px 50px rgba(0,0,0,.5);image-rendering:auto}
#photoView .photo-name{margin:14px 0 0;text-align:center;color:#fff;font:800 18px Nunito,sans-serif}
#photoView .photo-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#222;font:900 20px sans-serif}
body #game #hand .bean-card{position:relative!important}
body #game #hand .card-order{position:absolute!important;top:calc(100% + 8px)!important;bottom:auto!important;left:0!important;right:0!important;margin:0!important;transform:none!important}

/* Reações: botão 😀 ao lado do meu nome + grade de emojis */
.emote-quick{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:6px;padding:0;border:0;border-radius:50%;background:#FFF3C9;box-shadow:0 2px 0 rgba(0,0,0,.15);font-size:20px;line-height:1;cursor:pointer;animation:emoteHint 2.4s ease-in-out 1s 2}
.emote-quick:active{transform:scale(.92)}
@keyframes emoteHint{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-8deg)}}
#emoteMenu .emote-options{display:grid!important;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}
#emoteMenu .emote-options button{font-size:28px;min-width:0;padding:8px 0;border-radius:12px;background:#F3EBD8}
#emoteMenu .emote-options button:disabled{opacity:.35}
#emoteMenu .emote-note{font-size:13px;margin:0 0 10px}
@media(max-width:380px){#emoteMenu .emote-options{grid-template-columns:repeat(5,1fr)}}
#emoteClose{background:var(--garden-green,#238847)!important;color:#fff!important;border:0;border-radius:999px;padding:10px 22px;font-weight:800}
.reaction-bubble{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.reaction-bubble .reaction-big{font-size:56px;line-height:1.1;animation:reactPop .5s cubic-bezier(.2,1.6,.4,1)}
.reaction-bubble .reaction-who{font-size:14px;font-weight:700}
@keyframes reactPop{from{transform:scale(.2)}to{transform:scale(1)}}
#emoteMenu .emote-options button.locked{opacity:.4;filter:grayscale(.6);position:relative}
#emoteMenu .emote-options button.locked::after{content:'🔒';position:absolute;right:2px;bottom:0;font-size:13px}
.emote-test{display:block;margin:10px auto;background:#FFF3C9;border:0;border-radius:999px;padding:8px 18px;font-weight:800;color:#354638}
.vip-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:7px;background:linear-gradient(180deg,#FFE27A,#F2B705);color:#5A3B00;font:900 11px/1.2 Nunito,sans-serif;letter-spacing:.06em;box-shadow:0 1px 0 rgba(0,0,0,.2);vertical-align:middle}

/* Controles de volume */
.vol-rows{display:grid;gap:10px;margin:12px 0}
.vol-row{display:grid;grid-template-columns:92px 40px 1fr 40px;align-items:center;gap:8px}
.vol-label{font-weight:800;color:var(--text-primary,#2B2B2B);font-size:15px}
.vol-btn{width:40px;height:40px;border-radius:12px;border:0;background:var(--garden-green,#238847);color:#fff;font:900 22px/1 Nunito,sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.2);padding:0}
.vol-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.vol-bars{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;height:22px}
.vol-bars i{display:block;border-radius:4px;background:#E6DFCC}
.vol-bars i.on{background:linear-gradient(180deg,#FFD65A,#F2A900)}
/* Como jogar: botões empilhados com espaço */
#rules>.light-button,#rules>button.primary,#rules .dlg-scroll>.light-button,#rules .dlg-scroll>button.primary{display:block;width:100%;margin:0 0 10px!important}
.home-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.home-name-row .vip-tag{margin-left:0;flex:0 0 auto;font-size:10px;padding:2px 6px}
.player-badge strong{max-width:170px!important}
.player-badge{padding-right:20px!important}
.home-name-row strong{flex:0 1 auto;min-width:3.5em;max-width:150px!important}
body:not(.in-match) .topbar .home-account{flex:1 1 auto!important}
@media(max-width:380px){.home-name-row strong{max-width:90px!important}.home-name-row .vip-tag{font-size:9px;padding:1px 4px}}
.player-badge .home-level{min-width:0;flex:1 1 auto}
body:not(.in-match) .topbar #accountEntry{max-width:min(250px,calc(100vw - 190px))!important;overflow:visible!important}
@media(max-width:370px){.home-name-row .vip-tag{display:none!important}body:not(.in-match) .topbar #accountEntry{overflow:hidden!important}}

/* Borda Testador (verde) — mesma geometria da Fundador */
.avatar.avatar-tester,.tester-border #myAvatar,.tester-border #homeAvatar{position:relative;border:0!important;outline:0!important;box-shadow:none!important;border-radius:50%}
.avatar.avatar-tester::after,.tester-border #myAvatar::after{content:'';position:absolute;inset:-7px;background:url('/profile/tester.png') center/100% 100% no-repeat;pointer-events:none}
.tester-border #homeAvatar::after{content:'';position:absolute;inset:-9px;background:url('/profile/tester.png') center/100% 100% no-repeat;pointer-events:none}
.friend-avatar.avatar-tester::after{inset:-6px}
.profile-avatar.avatar-tester::after{inset:-10px}
.profile-tester{position:relative}.profile-tester::after{content:'';position:absolute;inset:-12px;background:url('/profile/tester.png') center/100% 100% no-repeat;pointer-events:none}

.tester-card .tester-row{display:flex;gap:12px;align-items:center}
.tester-card img{width:96px;height:96px;flex:0 0 96px}
.tester-count{font:900 20px Nunito,sans-serif;margin:6px 0 4px;color:var(--garden-green-dark,#1d5e31)}
.tester-bar{display:block;height:12px;border-radius:99px;background:#E6DFCC;overflow:hidden}.tester-bar i{display:block;height:100%;background:linear-gradient(90deg,#7ccf4a,#2e9c46);border-radius:99px}
.tester-msg{margin:6px 0 0;font-weight:700}
.tester-unlocked{text-align:center;max-width:360px;border:0;border-radius:22px;padding:22px 18px;background:linear-gradient(180deg,#FFFDF5,#EEF7E4)}
.tester-unlocked img{width:180px;height:180px;display:block;margin:0 auto 6px;animation:reactPop .6s cubic-bezier(.2,1.6,.4,1)}
.tester-unlocked h2{font-size:20px;color:#1d5e31;margin:6px 0}
.tester-unlocked .dialog-close{position:absolute;top:8px;right:8px}
.collection-item.is-locked{opacity:.75}.collection-item.is-locked .collection-art{filter:grayscale(.8)}
.legacy-tag{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:6px;background:#2e9c46;color:#fff;font:900 10px Nunito,sans-serif;letter-spacing:.05em}
.collection-state.is-owned{background:#E3F2DC!important;color:#1d5e31!important;border:0}
.collection-state.is-owned::before{content:'✔ '}
.collection-state.is-buy{background:linear-gradient(180deg,#FFD65A,#F2A900)!important;color:#5A3B00!important;border:0}
.vip-perks{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}.vip-perks li{background:#FFF8DC;border-radius:10px;padding:8px 10px}
.vip-buy{background:linear-gradient(180deg,#FFE27A,#F2B705)!important;color:#5A3B00!important;font-weight:900;border:0;border-radius:999px;padding:12px 22px;width:100%}
/* Mochila: combinação equipada fixa no topo ao rolar */
#inventory .equipped-preview{position:sticky;top:-16px;z-index:5;background:#FFFDF5;padding:8px 0 10px;margin-top:-4px;box-shadow:0 8px 12px -10px rgba(0,0,0,.35)}
#inventory .equipped-preview h3{font-size:14px;margin:0 0 6px}
#inventory #equippedPreview{grid-template-columns:78px minmax(0,150px);gap:14px;padding:8px}
#inventory #equippedPreview .bean-card{width:78px;height:112px;min-height:112px;padding:5px 5px 8px}
#inventory #equippedPreview .bean-card .bean-meter{display:none}
.league-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.league-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.league-list li.is-you{background:#E9F6E2;outline:2px solid #7cc36a}
.lg-ico{font-size:24px;text-align:center}.lg-name{font-weight:800}.lg-need{font-weight:700;color:#6b5b2e;font-size:13px}
.league-icon{display:inline-block;font-size:15px;line-height:1;margin-left:5px;vertical-align:middle}
#myAvatar.has-photo{background-size:cover!important;background-position:center!important;color:transparent}
/* "Sua vez / Vez de…" à direita, sem cobrir o botão Sair da partida */
@media(max-width:767px){.in-match #game>.table-heading{left:auto!important;right:12px!important;width:auto!important;max-width:calc(100% - 190px);text-align:right;justify-content:flex-end}}
/* Rodapé da partida: dicas e tempo da rápida no mesmo padrão dos botões */
.tips-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:#FFF3C9;box-shadow:0 3px 0 rgba(0,0,0,.18);font-size:20px;padding:0;cursor:pointer;flex:0 0 40px}
.tips-btn[aria-pressed="true"]{background:#FFD65A}
#matchTimer.queue-timer{display:inline-flex;align-items:center;gap:4px;font:700 16px/1 Fredoka,Nunito,sans-serif!important;color:#354638;background:#FFF3C9;border-radius:999px;padding:8px 12px;box-shadow:0 3px 0 rgba(0,0,0,.15);letter-spacing:0;white-space:nowrap}
.win-rule{background:#FFF6D6;border-radius:12px;padding:12px 14px;margin:10px 0 14px;line-height:1.5}
.open-tables{margin:14px 0 0;background:#FFFDF5;border-radius:16px;padding:12px}
.open-tables h3{margin:0 0 8px;font-size:16px}
.open-table{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #0001}
.open-table span{display:flex;flex-direction:column}.open-table small{color:#6b7566}
.open-table .game-btn{padding:8px 16px;text-decoration:none}
.history-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.history-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:12px;padding:8px 10px}
.h-main{display:flex;flex-direction:column}.h-main small{color:#6b7566}.h-win{color:#238847;font-weight:800}.h-loss{color:#c0392b;font-weight:800}
.history-add{border:0;border-radius:999px;background:#238847;color:#fff;font-weight:800;padding:6px 12px}
.toast-action{margin-left:8px;border:0;border-radius:999px;background:#FFD65A;color:#5A3B00;font-weight:800;padding:4px 12px}
#friendsBadge{background:#E74C3C!important}
.dock-button{position:relative}.dock-dot{position:absolute;top:4px;right:calc(50% - 26px);width:12px;height:12px;border-radius:50%;background:#E74C3C;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#myMusic.is-off{opacity:.45;filter:grayscale(1);text-decoration:line-through}
#myMusic{animation:none}
.online-dot{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;background:#2ECC71;box-shadow:0 0 0 2px #fff,0 0 8px #2ECC71;vertical-align:middle}

/* ===== COMPUTADOR (≥1000px): partida em duas colunas, tudo à vista ===== */
@media(min-width:1000px){
  body.in-match #game,body.playing-match #game{max-width:1240px;padding:12px 28px 48px}
  body.playing-match #game{padding-bottom:48px}
  /* cabeçalho normal (o do celular é absoluto) */
  .in-match #game>.table-heading{position:static;width:auto;display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
  .in-match .heading-actions{display:flex}
  .in-match #game>.table-heading #tableTitle{font-size:24px;margin:0}
  .in-match #game>.table-heading .eyebrow{display:none}
  .in-match #game>.leave-row,body.in-match .leave-row{margin:0 0 8px}
  .in-match #board{grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);grid-template-rows:auto auto 1fr auto;gap:16px 28px}
  /* adversários embaixo da minha área e da mesa, cada painel com a largura da minha área (sem esticar) */
  .in-match #board>#opponents{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,var(--opp-w,620px)));gap:14px;justify-content:start}
  .in-match #board>#opponentsHint{grid-column:1 / -1;grid-row:4;align-self:start}
  .in-match #board>.my-area{grid-column:1;grid-row:1 / span 3}
  .in-match #board>.table-middle{grid-column:2;grid-row:1}
  .in-match #board>.turn-guide{grid-column:2;grid-row:2;position:static!important;border-radius:18px!important;margin:0!important}
  .in-match #board>.trade-area{grid-column:2;grid-row:3}
  /* no PC a dica fica aberta só se o botão 💡 (ou a opção nas configurações) estiver ligado */
  body.playing-match.beginner-tips .turn-guide #phaseDescription{display:block!important}
  /* canteiros e cartas com tamanho de PC */
  .playing-match .my-area .garden-scene{height:130px}
  .playing-match .my-area .garden-crop{width:64px;height:74px}
  .playing-match .my-area .garden-sign{font-size:13px}
  .playing-match .my-area .field-actions button{font-size:13px;min-height:40px}
  body.playing-match #game #market .bean-card{width:104px;min-width:104px;max-width:104px;height:144px;flex:0 0 104px}
  body.playing-match #game #hand .bean-card{width:92px;min-width:92px;height:128px;flex:0 0 92px}
  #game .opponent-area{padding:12px}
  #game .opponent-fields .garden-scene{height:130px}
  #game .opponent-fields .garden-crop{width:64px;height:74px}
  #game .opponent-area .fields,#game .opponent-area .opponent-row{max-width:100%}
  /* mão: uma linha só (rola para o lado se passar de 7 cartas) */
  body #game #hand{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;padding-bottom:56px!important;gap:10px}
}

/* PC: tudo à vista em partida de 2 (X1); em grupo é normal rolar */
@media(min-width:1000px){
  body.playing-match #game #myFields{position:static!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important}
  #game{position:relative}
  .in-match #game>.table-heading{justify-content:center;min-height:40px;margin:0}
  .in-match #game>.table-heading #tableTitle{font-size:20px}
  .in-match #game>.table-heading .heading-actions{position:absolute;right:28px;top:14px}
  .in-match #game>.table-heading #connection{display:none}
  body.in-match .leave-row{position:absolute;left:28px;top:14px;margin:0;z-index:3}
  #game>.match-ad{margin:2px 0 8px}
  /* guia do turno (e o descarte opcional) na coluna da direita, embaixo da Mesa */
  .in-match #board>.my-area{position:relative}
  .in-match #board>.my-area>.turn-guide{position:absolute!important;left:calc(100% + 28px);top:234px;width:388px;margin:0!important;box-sizing:border-box}
  .playing-match .my-area .garden-scene{height:100px}
  .playing-match .my-area .garden-crop{width:52px;height:60px}
  #game .opponent-fields .garden-scene{height:100px}
  #game .opponent-fields .garden-crop{width:52px;height:60px}
  .in-match #board{gap:12px 28px}
  .in-match #board>#opponents{grid-template-columns:repeat(auto-fill,minmax(340px,648px))!important;justify-content:start!important}
  .in-match #board>#opponents:not(.many){grid-column:1!important;grid-template-columns:minmax(0,1fr)!important}
}
/* tela inicial no computador: espaço para a barra de baixo não cobrir o conteúdo */
@media(min-width:760px){
  #welcome.welcome{padding-bottom:120px}
  .home-dock{width:min(520px,calc(100% - 24px))}
}
/* PC: topo da tela inicial mais compacto para o "Jogar" aparecer sem rolar */
@media(min-width:760px) and (max-height:1000px){
  .home-hero .sample-cards,#welcome .sample-cards,.sample-cards{display:none!important}
}
/* Convite com recompensa (05/10/2026): WhatsApp, dica de moedas e aviso de ganho */
.invite-line .whats-invite{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;background:#25D366;color:#073b1d;font-weight:800;font-size:13px;text-decoration:none;box-shadow:0 3px 0 #179c4a;white-space:nowrap}
.invite-line .whats-invite:before{content:'💬'}
.invite-line .whats-invite:active{transform:translateY(2px);box-shadow:0 1px 0 #179c4a}
.invite-reward{max-width:520px;margin:4px auto 6px!important;padding:8px 12px;border-radius:12px;background:#FFF6D6;border:1px dashed #E3B53C;color:#6B4E0E!important;font-size:12.5px!important;font-weight:700}
.referral-reward{text-align:center;max-width:360px;border:0;border-radius:24px;padding:26px 20px 20px;background:radial-gradient(circle at 50% 0,#FFF3C4 0,#FFFDF5 45%,#EEF7E4 100%);color:#24341f;overflow:visible}
.referral-reward::backdrop{background:rgba(22,36,18,.55);backdrop-filter:blur(3px)}
.referral-reward .dialog-close{position:absolute;top:8px;right:10px;color:#4b5a44}
.referral-reward .eyebrow{color:#2f8a4a;margin:6px 0 2px}
.referral-reward h2{font-size:30px;color:#1d5e31;margin:0 0 6px}
.referral-reward h2 span{color:#C98A00}
.referral-reward p{color:#3d4a37;font-size:14px;line-height:1.5}
.referral-reward .confirm-actions{display:flex;gap:8px;justify-content:center;margin-top:14px}
.referral-coin{width:96px;height:96px;margin:-58px auto 4px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#FFF6B8,#F6C83B 55%,#C98A00);box-shadow:0 8px 20px rgba(201,138,0,.45),inset 0 -6px 0 rgba(0,0,0,.12);animation:refCoin .9s cubic-bezier(.2,1.6,.4,1) both,refFloat 2.4s ease-in-out .9s infinite}
.referral-coin span{font-size:52px;line-height:1}
@keyframes refCoin{from{transform:scale(.2) rotate(-180deg);opacity:0}to{transform:none;opacity:1}}
@keyframes refFloat{50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.referral-coin{animation:none}}
/* 18/10/2026: mesas abertas sempre visíveis + botão do bot */
.open-tables h3{display:flex;align-items:center;justify-content:space-between}
.open-tables__refresh{border:0;background:transparent;font-size:18px;cursor:pointer;color:#4a6b3a;padding:2px 8px;border-radius:8px}
.open-tables__refresh:active{transform:rotate(90deg)}
.open-tables__empty{margin:4px 0 2px;color:#6b7566;font-size:14px}