@font-face {
  font-family: "Optimistic";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/OptimisticAI_VF_Optimized.woff2") format("woff2");
}
@font-face {
  font-family: "Optimistic Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/OptimisticMono_W_TextRegular.woff2") format("woff2");
}
:where(html) {
  font-family: "Optimistic", system-ui, sans-serif;
}
:where(code, pre, kbd, samp) {
  font-family: "Optimistic Mono", ui-monospace, monospace;
}

/* === BLOCK GUEST - REQUIRE LOGIN === */
#guest-block-overlay{position:absolute;inset:0;z-index:60;display:none;place-items:center;background:linear-gradient(180deg,rgba(255,247,237,.96) 0%,rgba(224,242,254,.96) 100%);backdrop-filter:blur(14px)}
#guest-block-overlay.show{display:grid;animation:guestPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes guestPop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.guest-block-card{width:90%;max-width:360px;background:rgba(255,255,255,.98);border:3px solid #fecdd3;border-radius:28px;box-shadow:0 0 0 3px #fff,0 20px 50px rgba(0,0,0,.18);padding:22px 18px;text-align:center}
.guest-block-card h2{font-family:'Baloo 2';font-weight:900;font-size:22px;margin:8px 0 6px}
.guest-block-card p{font-size:13px;font-weight:700;color:#6b7280;line-height:1.5;margin:0 0 14px}
.btn-login-big{width:100%;height:52px;border-radius:999px;border:0;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 0 #a78bfa;display:flex;align-items:center;justify-content:center;gap:8px}
#auth-modal .auth-switch #auth-close{display:none !important}

/* ===================== */

:root{--pink:#fb7185;--pink2:#fecdd3;--text:#431407}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;width:100%;height:100%;background:#0f172a;font-family:'Quicksand',system-ui;color:var(--text);overscroll-behavior:none;touch-action:manipulation;user-select:none}
button{font-family:'Baloo 2';font-weight:800}
#header{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:3px solid #fecdd3;display:flex;align-items:center;justify-content:space-between;padding:0 14px;box-shadow:0 4px 0 #fff,0 12px 32px rgba(0,0,0,.12)}
.h-left{display:flex;align-items:center;gap:10px}.h-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#fff,#ffe4e6);border:2.5px solid #fecdd3;display:grid;place-items:center;font-size:22px;box-shadow:0 3px 0 #fecdd3}
.h-title{font-family:'Baloo 2';font-weight:900;font-size:17px;line-height:1}.h-sub{font-size:10px;font-weight:800;color:#9f1239;opacity:.75}
.h-right{display:flex;align-items:center;gap:8px}
.coin-pill,.zem-pill{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:999px;background:#fff;border:2.5px solid #fecdd3;box-shadow:0 3px 0 #fecdd3;font-weight:900;font-size:13px}
.coin-pill{border-color:#fde68a;background:linear-gradient(180deg,#fff,#fffbeb);color:#92400e}
.zem-pill{border-color:#c4b5fd;background:linear-gradient(180deg,#fff,#f5f3ff);color:#6d28d9}

#btn-login{height:36px;padding:0 14px;border-radius:999px;border:0;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:10px;box-shadow:0 3px 0 #a78bfa;cursor:pointer}
.auth-wrap{position:relative}
#user-menu{position:absolute;top:44px;right:0;width:240px;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);border:3px solid #fecdd3;border-radius:20px;box-shadow:0 0 0 3px #fff,0 18px 40px rgba(0,0,0,.18);padding:12px;display:none;z-index:250;flex-direction:column;gap:10px}
#user-menu.open{display:flex;animation:menuPop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes menuPop{0%{transform:translateY(-8px) scale(.9);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.user-menu-info{display:flex;align-items:center;gap:10px;padding:10px;background:linear-gradient(135deg,#fff7ed,#fef3c7);border-radius:14px;border:2px dashed #fde68a}
#user-menu-avatar{width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg,#fecdd3,#fda4af);border:2px solid #fff;display:grid;place-items:center;font-size:18px;box-shadow:0 2px 0 #fecdd3}
#user-menu-name{font-family:'Baloo 2';font-weight:900;font-size:14px;line-height:1}
#user-menu-email{font-size:11px;font-weight:700;opacity:.6;word-break:break-all}
#btn-logout{height:42px;border-radius:999px;border:0;background:#111827;color:#fff;cursor:pointer;box-shadow:0 3px 0 #374151}
#auth-modal .modal-card{max-width:380px}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.auth-field{display:flex;flex-direction:column;gap:5px;text-align:left}
.auth-field label{font-size:11px;font-weight:800;color:#9f1239;opacity:.8;margin-left:4px}
.auth-field input{height:44px;border-radius:14px;border:2.5px solid #fecdd3;padding:0 14px;font-family:'Quicksand';font-weight:700;outline:none;background:#fff}
.auth-field input:focus{border-color:#fb7185;box-shadow:0 0 0 3px #ffe4e6}
.btn-google{width:100%;height:46px;border-radius:999px;border:2.5px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 #e5e7eb}
.btn-primary{width:100%;height:46px;border-radius:999px;border:0;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;cursor:pointer;box-shadow:0 3px 0 #a78bfa}
.btn-secondary{width:100%;height:42px;border-radius:999px;border:2px solid #fecdd3;background:#fff7f7;color:#9f1239;cursor:pointer}
.divider{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:11px;font-weight:800;opacity:.5}
.divider:before,.divider:after{content:'';flex:1;height:2px;background:#ffe4e6;border-radius:999px}
#auth-error{margin-top:8px;color:#ef4444;font-size:12px;font-weight:700;min-height:16px;text-align:center}
.auth-switch{font-size:12px;font-weight:700;text-align:center;margin-top:6px}
.auth-switch b{color:#8b5cf6;cursor:pointer;text-decoration:underline}

#game{position:fixed;inset:64px 0 0 0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(1200px 600px at 50% -10%,#e0f2fe 0%,#fefce8 35%,#dcfce7 100%)}
#top-stats{display:flex;gap:8px;padding:10px 10px 0;overflow-x:auto;scrollbar-width:none}#top-stats::-webkit-scrollbar{display:none}
.stat-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:2px solid #fecdd3;font-weight:800;font-size:11.5px;box-shadow:0 2px 0 #fecdd3;backdrop-filter:blur(8px)}
.stat-chip b{font-family:'Baloo 2';font-size:13px}
#farm-viewport{flex:1;position:relative;margin:10px;border-radius:28px;overflow:hidden;background:#87CEEB;border:3px solid #fff;box-shadow:0 0 0 3px #fecdd3,0 18px 40px rgba(0,0,0,.18),inset 0 2px 0 #fff}
#farm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#loading-screen{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(180deg,#fff7ed 0%,#e0f2fe 100%);transition:opacity .6s}
#loading-screen.hide{opacity:0;pointer-events:none}
.loader-card{background:#fff;border:3px solid #fecdd3;border-radius:24px;padding:20px 24px;box-shadow:0 0 0 4px #fff,0 20px 50px rgba(0,0,0,.15);text-align:center;min-width:260px}
.loader-bar{height:8px;background:#fef3c7;border-radius:999px;overflow:hidden;margin-top:12px;border:2px solid #fde68a}
.loader-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f59e0b,#ec4899);border-radius:999px;transition:width .3s}
#combo-toast{position:absolute;left:50%;top:16%;transform:translateX(-50%) scale(.8);opacity:0;background:#111827;color:#fff;padding:12px 20px;border-radius:999px;font-weight:900;font-size:14px;box-shadow:0 12px 32px rgba(0,0,0,.3);transition:.4s cubic-bezier(.34,1.56,.64,1);z-index:10;pointer-events:none}
#combo-toast.show{opacity:1;transform:translateX(-50%) scale(1)}
#toolbar{position:absolute;left:10px;right:10px;bottom:10px;z-index:20;pointer-events:auto;display:flex;gap:8px;align-items:end;justify-content:space-between}
.tool-group{display:flex;gap:8px;padding:8px;border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:2.5px solid #fff;box-shadow:0 0 0 2px #fecdd3,0 10px 30px rgba(0,0,0,.18)}
.tool-btn{width:58px;height:58px;border-radius:16px;border:2.5px solid #fecdd3;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 3px 0 #fecdd3;transition:.12s;position:relative}
.tool-btn.active{background:linear-gradient(135deg,#fecdd3,#fda4af);border-color:#fb7185;color:#fff;box-shadow:0 3px 0 #fb7185,0 6px 18px rgba(251,113,133,.35);transform:translateY(-2px)}
.tool-btn span{font-size:9px;font-weight:800;font-family:'Quicksand'}
#shop{position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:76vh;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-top-left-radius:28px;border-top-right-radius:28px;border:3px solid #fecdd3;border-bottom:0;box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(100%);transition:transform .38s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column}
#shop.open{transform:translateY(0)}.shop-handle{width:44px;height:5px;border-radius:999px;background:#fecdd3;margin:10px auto 6px}
.shop-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px 10px;border-bottom:2px dashed #ffe4e6}
.shop-head h3{font-family:'Baloo 2';font-weight:900;font-size:18px;margin:0}
.shop-tabs{display:flex;gap:6px;padding:10px 12px;overflow-x:auto}
.shop-tab{flex:0 0 auto;height:34px;padding:0 14px;border-radius:999px;border:2px solid #e9d5ff;background:#f9f5ff;color:#6d28d9;font-size:12px;font-weight:800;cursor:pointer}
.shop-tab.active{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border-color:transparent}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;overflow:auto}
.seed-card{background:#fff;border:2px solid #fde68a;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 3px 0 #fde68a}
.seed-card.rare{border-color:#c4b5fd;background:linear-gradient(180deg,#fff,#f5f3ff);box-shadow:0 3px 0 #c4b5fd}
.seed-card-icon{width:100%;height:56px;border-radius:12px;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #fde68a}
.seed-card-name{font-family:'Baloo 2';font-weight:800;font-size:13px}
.meta-chip{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:#f9fafb;border:1px solid #e5e7eb}
.seed-card-price{font-weight:900;font-size:12px;color:#92400e}
.seed-card-buy{height:32px;border-radius:999px;border:0;background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;font-weight:800;font-size:12px;cursor:pointer}
#side-panel{position:fixed;right:10px;top:74px;width:300px;max-height:calc(100vh - 84px);z-index:30;display:none;flex-direction:column;gap:10px;pointer-events:none}
#side-panel .panel-card{pointer-events:auto;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:20px;border:2.5px solid #fff;box-shadow:0 0 0 2px #fecdd3,0 10px 30px rgba(0,0,0,.12);padding:12px}
.panel-title{font-family:'Baloo 2';font-weight:900;font-size:14px;margin:0 0 8px}
.inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.inv-slot{aspect-ratio:1;border-radius:12px;background:#fff;border:2px solid #f3f4f6;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;position:relative;box-shadow:0 2px 0 #f3f4f6;text-align:center;line-height:1}
.inv-slot .inv-emoji{font-size:22px;line-height:1;display:grid;place-items:center;width:100%;flex:1}
.inv-slot b{position:absolute;bottom:3px;right:4px;font-size:10px;background:#111827;color:#fff;padding:2px 6px;border-radius:999px;line-height:1;min-width:18px;text-align:center}
.inv-slot .inv-sell{position:absolute;top:3px;left:3px;right:3px;height:18px;border-radius:999px;border:0;background:#111827;color:#fff;font-size:8px;font-weight:900;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2}
.inv-slot:hover .inv-sell{display:flex}
.inv-slot.has-item:hover .inv-emoji{opacity:.35}
.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:16px}
.modal.open{display:grid}.modal-card{width:min(420px,94vw);background:#fff;border-radius:28px;border:3px solid #fecdd3;box-shadow:0 0 0 4px #fff,0 20px 60px rgba(0,0,0,.25);overflow:hidden;animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.9) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-head{padding:18px 18px 0;text-align:center}.modal-head h2{font-family:'Baloo 2';font-weight:900;font-size:22px;margin:6px 0 2px}
.modal-body{padding:14px 18px 18px}
#toast-root{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#111827;color:#fff;padding:10px 16px;border-radius:999px;font-weight:800;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toastIn .35s ease,toastOut .35s ease 2.5s forwards}
@keyframes toastIn{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{to{transform:translateY(-10px);opacity:0}}
.quest-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:#fff;border:2px solid #fef3c7;margin-bottom:8px}
.quest-progress{height:6px;background:#fef3c7;border-radius:999px;overflow:hidden;flex:1}
.quest-progress i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ec4899);border-radius:999px;transition:width .4s}
@media(min-width:900px){#farm-viewport{margin:12px 320px 12px 12px}#side-panel{display:flex}#shop{left:auto;width:360px;border-radius:28px;bottom:12px;right:12px;top:auto;max-height:78vh;border:3px solid #fecdd3}#toolbar{right:332px}}

/* === FIX MOBILE MENU CHE HẾT === */
#shop-backdrop{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s ease}
#shop-backdrop.open{opacity:1;pointer-events:auto}
#side-backdrop{position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .3s ease}
#side-backdrop.open{opacity:1;pointer-events:auto}
#toolbar{transition:opacity .25s ease, transform .25s ease}

@media(max-width:768px){
  #header{height:56px;padding:0 10px}
  .h-logo{width:36px;height:36px;border-radius:10px;font-size:18px}
  .h-title{font-size:14px}
  .h-sub{font-size:9px}
  .coin-pill,.zem-pill{height:30px;padding:0 9px;font-size:11.5px;border-width:2px;box-shadow:0 2px 0 #fecdd3}
  #btn-login{height:30px;padding:0 10px;font-size:11px}
  #game{inset:56px 0 0 0}
  #top-stats{padding:6px 8px 0;gap:6px}
  .stat-chip{padding:5px 9px;font-size:10px;border-width:1.5px;box-shadow:0 1.5px 0 #fecdd3}
  .stat-chip b{font-size:11px}
  #farm-viewport{margin:6px;border-radius:18px;border-width:2px;box-shadow:0 0 0 2px #fecdd3,0 10px 24px rgba(0,0,0,.15)}
  #toolbar{
    left:50%!important;right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%);
    width:auto;max-width:calc(100vw - 12px);
    gap:6px;
    justify-content:center;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px
  }
  #toolbar::-webkit-scrollbar{display:none}
  .tool-group{padding:5px;gap:5px;border-radius:14px;flex:0 0 auto;box-shadow:0 0 0 1.5px #fecdd3,0 6px 18px rgba(0,0,0,.14)}
  .tool-btn{width:48px;height:48px;border-radius:12px;font-size:18px;border-width:2px;box-shadow:0 2px 0 #fecdd3}
  .tool-btn span{font-size:8px}
  .tool-btn.active{transform:translateY(-1px)}
  #btn-inventory-mobile{display:flex!important}
  #shop{
    max-height:84vh;
    max-height:84dvh;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -8px 32px rgba(0,0,0,.18)
  }
  .shop-handle{margin:8px auto 4px}
  .shop-head{padding:0 14px 8px}
  .shop-head h3{font-size:16px}
  .shop-tabs{padding:8px 10px;gap:5px}
  .shop-tab{height:30px;padding:0 10px;font-size:11px}
  .shop-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 10px 16px;overflow:auto;-webkit-overflow-scrolling:touch}
  .seed-card{padding:8px;border-radius:14px}
  .seed-card-icon{height:48px;font-size:28px;border-radius:10px}
  .seed-card-name{font-size:12px}
  .seed-card-price{font-size:11px}
  .seed-card-buy{height:30px;font-size:11px}
  /* SIDE PANEL MOBILE - thành drawer trượt lên trên toolbar */
  #side-panel{
    display:flex!important;
    position:fixed!important;
    left:6px!important;right:6px!important;
    top:auto!important;bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;
    max-height:0!important;
    overflow:hidden!important;
    flex-direction:column!important;
    gap:8px!important;
    background:transparent!important;
    pointer-events:none!important;
    z-index:26!important;
    transition:max-height .36s cubic-bezier(.34,1.56,.64,1)!important;
    border:none!important;box-shadow:none!important;padding:0!important
  }
  #side-panel.open{
    max-height:42vh!important;
    max-height:42dvh!important;
    pointer-events:auto!important;
    overflow:auto!important
  }
  #side-panel .panel-card{
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border-radius:16px!important;
    border:2px solid #fff!important;
    box-shadow:0 0 0 2px #fecdd3,0 8px 24px rgba(0,0,0,.14)!important;
    padding:10px!important
  }
  .panel-title{font-size:12px!important;margin:0 0 6px!important}
  .inventory-grid{grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
  .inv-slot{border-radius:10px!important;font-size:18px!important}
  .quest-item{padding:6px 8px!important;border-radius:10px!important;margin-bottom:6px!important}
  #side-panel .panel-card:nth-child(2),
  #side-panel .panel-card:nth-child(3){
    display:none!important
  }
  /* modal full width mobile */
  .modal{padding:10px!important}
  .modal-card{width:92vw!important;border-radius:20px!important}
}
@media(max-width:380px){
  .tool-btn{width:44px;height:44px;font-size:16px}
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}


/* === TOOLBAR 1 HÀNG 7-8 NÚT CUỘN NGANG === */
#toolbar{
  position:absolute;
  left:50%!important;
  right:auto!important;
  bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%);
  display:flex;
  justify-content:flex-start;
  align-items:center;
  width:auto;
  max-width:calc(100vw - 12px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  gap:0;
  pointer-events:auto;
  padding:2px;
}
#toolbar::-webkit-scrollbar{display:none}
#tool-group-all{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  padding:8px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  border:2.5px solid #fff!important;
  box-shadow:0 0 0 2px #fecdd3,0 10px 30px rgba(0,0,0,.18)!important;
  width:max-content;
  max-width:none;
}
#tool-group-all .tool-btn{
  flex:0 0 auto;
}
@media(max-width:768px){
  #toolbar{
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    max-width:calc(100vw - 10px)!important;
  }
  #tool-group-all{
    gap:6px!important;
    padding:6px!important;
    border-radius:16px!important;
  }
  #tool-group-all .tool-btn{
    width:52px!important;
    height:52px!important;
    font-size:19px!important;
  }
}
@media(max-width:380px){
  #tool-group-all{gap:5px!important;padding:5px!important}
  #tool-group-all .tool-btn{width:46px!important;height:46px!important;font-size:17px!important}
}
/* Desktop vẫn 1 hàng nhưng to hơn chút */
@media(min-width:900px){
  #toolbar{right:auto!important;left:50%!important;transform:translateX(-50%)!important;bottom:14px!important}
  #tool-group-all{padding:8px 10px!important}
}


/* TAP LABEL - CHỮ VIỀN KHÔNG NỀN */
.tap-hint{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:12;pointer-events:none;background:rgba(0,0,0,0.55);color:#fff;padding:6px 14px;border-radius:999px;font-weight:800;font-size:11px;opacity:0;transition:opacity .3s}
.tap-hint.show{opacity:1}


/* === FIX: Khay chọn hạt trực tiếp trong game - bỏ popup === */
#seed-tray{
  position:absolute;left:10px;right:10px;bottom:78px;z-index:19;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:2.5px solid #fff;box-shadow:0 0 0 2px #fecdd3,0 10px 30px rgba(0,0,0,.18);
  border-radius:20px;padding:8px 10px;
  display:none;flex-direction:column;gap:6px;
  transform:translateY(20px);opacity:0;transition:.32s cubic-bezier(.34,1.56,.64,1);
}
#seed-tray.show{display:flex;transform:translateY(0);opacity:1}
#seed-tray-head{display:flex;justify-content:space-between;align-items:center}
#seed-tray-title{font-family:'Baloo 2';font-weight:900;font-size:13px}
#seed-tray-inner{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#seed-tray-inner::-webkit-scrollbar{display:none}

/* === DECOR TRAY - KHO HIỆN NGAY TRÊN DECOR === */
#decor-tray{
  position:absolute;left:10px;right:10px;bottom:78px;z-index:20;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:2.5px solid #fff;box-shadow:0 0 0 2px #fde68a,0 10px 30px rgba(0,0,0,.18);
  border-radius:20px;padding:10px;
  display:none;flex-direction:column;gap:8px;
  transform:translateY(20px);opacity:0;transition:.32s cubic-bezier(.34,1.56,.64,1);
  max-height:46vh;overflow:auto;
}
#decor-tray.show{display:flex;transform:translateY(0);opacity:1}
#decor-tray-head{display:flex;justify-content:space-between;align-items:center}
#decor-tray-title{font-family:'Baloo 2';font-weight:900;font-size:13px}
#decor-tray-inner{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;flex-wrap:nowrap}
#decor-tray-inner::-webkit-scrollbar{display:none}
.decor-tray-item{flex:0 0 auto;width:84px;border:2.5px solid #fde68a;border-radius:14px;padding:6px 4px;background:linear-gradient(180deg,#fff,#fffbeb);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;transition:.18s;box-shadow:0 2px 0 #fde68a}
.decor-tray-item.active{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e,0 3px 0 #bbf7d0;transform:translateY(-2px) scale(1.02);background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
.decor-tray-item .dt-emoji{font-size:26px;line-height:1}
.decor-tray-item b{font-size:9.5px;text-align:center;line-height:1.2;font-family:'Baloo 2';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;width:100%;font-weight:800}
.decor-tray-item .dt-count{font-size:10px;font-weight:800;background:#fef3c7;border:1.5px solid #fde68a;border-radius:999px;padding:1px 6px}
.decor-tray-item.empty{opacity:.35;filter:grayscale(.5)}

/* === PLOT TRAY - KHO Ô ĐẤT XỊN === */
#plot-tray{
  position:absolute;left:10px;right:10px;bottom:78px;z-index:20;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:2.5px solid #fff;box-shadow:0 0 0 2px #86efac,0 10px 30px rgba(0,0,0,.18);
  border-radius:20px;padding:10px;
  display:none;flex-direction:column;gap:8px;
  transform:translateY(20px);opacity:0;transition:.32s cubic-bezier(.34,1.56,.64,1);
  max-height:46vh;overflow:auto;
}
#plot-tray.show{display:flex;transform:translateY(0);opacity:1}
#plot-tray-head{display:flex;justify-content:space-between;align-items:center}
#plot-tray-title{font-family:'Baloo 2';font-weight:900;font-size:13px}
#plot-tray-inner{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;flex-wrap:nowrap}
#plot-tray-inner::-webkit-scrollbar{display:none}
.plot-tray-item{flex:0 0 auto;width:84px;border:2.5px solid #86efac;border-radius:14px;padding:6px 4px;background:linear-gradient(180deg,#fff,#f0fdf4);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;transition:.18s;box-shadow:0 2px 0 #86efac}
.plot-tray-item.active{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e,0 3px 0 #bbf7d0;transform:translateY(-2px) scale(1.02);background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
.plot-tray-item .pt-emoji{font-size:28px;line-height:1}
.plot-tray-item b{font-size:10px;text-align:center;line-height:1.2;font-family:'Baloo 2';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;width:100%;font-weight:800}
.plot-tray-item .pt-count{font-size:10px;font-weight:800;background:#dcfce7;border:1.5px solid #86efac;border-radius:999px;padding:1px 6px}
.plot-tray-item.empty{opacity:.35;filter:grayscale(.5)}
.tray-sell-btn{margin-top:3px;width:100%;height:24px;border-radius:999px;border:1.5px solid #fecdd3;background:#fff1f2;color:#be123c;font-weight:900;font-size:9.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:2px;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;line-height:1;z-index:3;position:relative;pointer-events:auto}
.tray-sell-btn:hover{background:#fecdd3;transform:scale(1.05)}
.tray-sell-btn:disabled{opacity:.4;pointer-events:none}

.seed-tray-item{
  flex:0 0 auto;width:74px;height:78px;border-radius:14px;background:#fff;border:2.5px solid #fde68a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 3px 0 #fde68a;cursor:pointer;position:relative;transition:.15s
}
.seed-tray-item.active{border-color:#fb7185;background:linear-gradient(135deg,#fecdd3,#fda4af);box-shadow:0 3px 0 #fb7185,0 6px 16px rgba(251,113,133,.3);transform:translateY(-2px);color:#fff}
.seed-tray-item .ti-emoji{font-size:26px;line-height:1}
.seed-tray-item b{font-size:10px;font-family:'Baloo 2';line-height:1}
.seed-tray-item .ti-count{position:absolute;top:-6px;right:-6px;background:#111827;color:#fff;font-size:10px;font-weight:900;padding:2px 6px;border-radius:999px;border:2px solid #fff}
#seed-inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#seed-picker-modal{display:none !important}
@media(max-width:768px){
  #seed-tray{left:6px;right:6px;bottom:72px;border-radius:16px;padding:6px 8px}
  .seed-tray-item{width:64px;height:70px;border-radius:12px}
  .seed-tray-item .ti-emoji{font-size:22px}
  #plot-tray{left:6px;right:6px;bottom:72px;border-radius:16px;padding:6px 8px}
  .plot-tray-item{width:70px}
  #decor-tray{left:6px;right:6px;bottom:72px;border-radius:16px;padding:6px 8px}
}

.sync-dot.saving{background:#f59e0b !important;animation:pulse 1s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.coin-pill .coin-icon-img, .zem-pill .zem-icon-img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.seed-card-price { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* === CUSTOM ICON XU & ZEM by user === */
.coin-icon-img, .zem-icon-img, .coin-icon-inline, .zem-icon-inline {
  display:inline-block;
  vertical-align:middle;
  object-fit:contain;
  flex-shrink:0;
}
.coin-icon-img { width:13px; height:13px; }
.zem-icon-img { width:13px; height:13px; }
.coin-icon-inline { width:13px; height:13px; margin-right:1px; }
.zem-icon-inline { width:13px; height:13px; margin-right:1px; }
.coin-pill, .zem-pill { gap:6px; }

a.h-logo{ text-decoration:none; color:inherit; display:grid; place-items:center; }

/* === DECOR SHOP TWEAKS === */
.seed-card.active{border-color:#22c55e !important; box-shadow:0 0 0 2px #22c55e, 0 3px 0 #bbf7d0 !important}
.shop-tab[data-tab="decor"]{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;color:#92400e}
.shop-tab[data-tab="themes"]{background:linear-gradient(135deg,#fce7f3,#e0e7ff);border-color:#f472b6;color:#9d174d}
.shop-tab[data-tab="themes"].active{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;border-color:transparent}
.shop-tab[data-tab="decor"].active{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;border-color:transparent}
#tool-decor.active{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#78350f;border-color:#fcd34d}
.shop-tab[data-tab="plots"]{background:linear-gradient(135deg,#dcfce7,#bbf7d0);border-color:#22c55e;color:#14532d}
.shop-tab[data-tab="plots"].active{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-color:transparent}
#tool-plot.active{background:linear-gradient(135deg,#22c55e,#4ade80);color:#052e16;border-color:#86efac}
.seed-card.plot{border-color:#86efac;background:linear-gradient(180deg,#fff,#f0fdf4)}
.seed-card.plot.rare{border-color:#fbbf24;background:linear-gradient(180deg,#fffbeb,#fef3c7)}
.seed-card.plot.epic{border-color:#c4b5fd;background:linear-gradient(180deg,#f5f3ff,#ede9fe)}
.seed-card.plot.legend{border-color:#f472b6;background:linear-gradient(180deg,#fff1f2,#fce7f3);box-shadow:0 3px 0 #fda4af,0 0 12px rgba(244,114,182,.3)}
.plot-preview{width:100%;height:52px;border-radius:10px;display:grid;place-items:center;font-size:28px;background:linear-gradient(180deg,#f0fdf4,#dcfce7);border:2px dashed #86efac;margin-bottom:4px}

/* === DECOR MODE - LƯỚI & HIGHLIGHT === */
#farm-viewport.decor-mode{border-color:#fb7185 !important;box-shadow:0 0 0 3px #fecdd3,0 0 0 6px #fff,0 18px 40px rgba(251,113,133,.25),inset 0 0 80px rgba(254,205,211,.25) !important}
#farm-viewport.decor-mode::after{content:'';position:absolute;inset:0;pointer-events:none;border:2px dashed rgba(251,113,133,.5);border-radius:26px;animation:decorDash 1.2s linear infinite}
@keyframes decorDash{to{stroke-dashoffset:20} 0%{opacity:.8} 50%{opacity:.5} 100%{opacity:.8}}
#decor-mode-bar{display:none;position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:20;background:linear-gradient(135deg,#fb7185,#f43f5e);color:#fff;padding:7px 16px;border-radius:999px;font-family:'Baloo 2';font-weight:900;font-size:12px;letter-spacing:.2px;box-shadow:0 4px 0 #be123c,0 8px 20px rgba(251,113,133,.4);border:2.5px solid #fff;white-space:nowrap;align-items:center;gap:6px}
#decor-mode-bar.show{display:flex;animation:decorBarPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes decorBarPop{0%{transform:translateX(-50%) translateY(-10px) scale(.8);opacity:0}100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
#decor-mode-bar b{background:#fff;color:#be123c;padding:2px 7px;border-radius:999px;font-size:11px}


/* === VISIT FRIEND - EMAIL ONLY - BXH TUAN - HELP 5 LAN === */
#visit-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:40;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;padding:9px 18px;border-radius:999px;border:2.5px solid #fff;box-shadow:0 0 0 3px #fecdd3,0 10px 24px rgba(0,0,0,.18);font-weight:900;display:none;align-items:center;gap:10px;font-family:'Baloo 2';font-size:13px;max-width:92%;white-space:nowrap}
#visit-banner.active{display:flex;animation:popIn .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{0%{transform:translateX(-50%) scale(.8);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
#visit-banner .visit-avatar{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px;border:2px solid #fecdd3}
#btn-visit{background:linear-gradient(180deg,#e0f2fe,#bae6fd)!important;border-color:#7dd3fc!important}
.tool-btn.visit-active{background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#fff!important;border-color:#86efac!important;box-shadow:0 3px 0 #22c55e!important}
#friend-visit-modal{position:fixed;inset:0;z-index:210;background:rgba(15,23,42,.55);backdrop-filter:blur(10px);display:none;place-items:center;padding:16px}
#friend-visit-modal.open{display:grid;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.friend-modal-card{width:100%;max-width:420px;background:rgba(255,255,255,.98);border:3px solid #fecdd3;border-radius:24px;box-shadow:0 0 0 4px #fff,0 24px 60px rgba(0,0,0,.25);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.friend-modal-head{padding:16px 18px;background:linear-gradient(135deg,#e0f2fe,#fce7f3);border-bottom:2.5px solid #fecdd3;display:flex;justify-content:space-between;align-items:center}
.friend-modal-head h3{margin:0;font-family:'Baloo 2';font-weight:900;font-size:18px}
.friend-modal-body{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.friend-code-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:2px dashed #7dd3fc;border-radius:14px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.friend-code-box code{font-size:12px;font-weight:800;word-break:break-all;background:#fff;padding:6px 8px;border-radius:8px;border:1.5px solid #7dd3fc;flex:1}
.friend-input-row{display:flex;gap:8px}
.friend-input-row input{flex:1;height:44px;border-radius:14px;border:2.5px solid #c4b5fd;padding:0 12px;font-family:'Quicksand';font-weight:700;outline:none}
.friend-input-row input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px #ede9fe}
.btn-visit-go{height:44px;padding:0 16px;border-radius:999px;border:0;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #a78bfa;white-space:nowrap}
.friend-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.friend-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#fff;border:2px solid #e5e7eb;border-radius:14px}
.friend-item-info{flex:1;min-width:0}
.friend-item-name{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-item-sub{font-size:11px;opacity:.6;font-weight:700}
.friend-item button{height:32px;padding:0 12px;border-radius:999px;border:0;background:#111827;color:#fff;font-weight:800;cursor:pointer}
.friend-hint{font-size:11px;font-weight:700;color:#6b7280;background:#f9fafb;border:1.5px dashed #e5e7eb;border-radius:10px;padding:8px 10px;line-height:1.4}
.help-float-btn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:45;background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:10px 18px;border-radius:999px;border:2.5px solid #fff;box-shadow:0 0 0 3px #bbf7d0,0 10px 24px rgba(0,0,0,.2);font-weight:900;font-family:'Baloo 2';font-size:13px;display:none;align-items:center;gap:8px;cursor:pointer}
.help-float-btn.show{display:flex;animation:popIn .28s}
.help-float-btn:disabled{opacity:.5;pointer-events:none}


/* === FIX SHOP 3 CỘT - NÚT MUA KHÔNG CHỒNG - V4 CLEAN === */
#shop{
  background:#fff !important;
  background:linear-gradient(180deg,#ffffff 0%, #fffaf5 100%) !important;
  border:3px solid #fecdd3 !important;
  border-bottom:0 !important;
  max-height:84vh !important;
  display:flex !important;
  flex-direction:column !important;
}
.shop-head{
  background:linear-gradient(135deg,#fff1f2,#ffe4e6) !important;
  border-bottom:3px solid #fecdd3 !important;
  flex-shrink:0 !important;
}
.shop-tabs{
  background:#fff !important;
  padding:10px 12px !important;
  gap:8px !important;
  border-bottom:2px dashed #ffe4e6 !important;
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  flex-shrink:0 !important;
}
.shop-tab{
  height:36px !important;
  border:2.5px solid #fecdd3 !important;
  background:#fff !important;
  box-shadow:0 2px 0 #fecdd3 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
.shop-tab.active{
  background:linear-gradient(135deg,#fb7185,#f59e0b) !important;
  color:#fff !important;
  border-color:#fb7185 !important;
  box-shadow:0 3px 0 #be123c !important;
}

/* GRID 3 CỘT */
.shop-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:10px !important;
  padding:12px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  align-items:stretch !important;
  align-content:start !important;
}

/* CARD - FLEX COLUMN, NÚT Ở ĐÁY TỰ NHIÊN, KHÔNG ABSOLUTE */
.seed-card{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  background:#fff !important;
  border:2.5px solid #fde68a !important;
  border-radius:18px !important;
  padding:10px 8px 10px 8px !important;
  box-shadow:0 3px 0 #fde68a !important;
  min-height:230px !important;
  height:100% !important;
  position:relative !important;
  overflow:hidden !important;
  transform:none !important;
}
.seed-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 5px 0 #fde68a, 0 10px 20px rgba(0,0,0,.08) !important;
}
.seed-card::before{content:none !important}
.seed-card.rare{
  border-color:#c4b5fd !important;
  background:linear-gradient(180deg,#fff,#f5f3ff) !important;
  box-shadow:0 3px 0 #c4b5fd !important;
}
.seed-card-icon{
  width:100% !important;
  height:52px !important;
  min-height:52px !important;
  border-radius:14px !important;
  font-size:28px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,#fffbeb,#fef3c7) !important;
  border:1.5px solid #fde68a !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.seed-card.rare .seed-card-icon{
  background:linear-gradient(135deg,#ede9fe,#ddd6fe) !important;
  border-color:#c4b5fd !important;
}
.seed-card-name{
  font-family:'Baloo 2' !important;
  font-weight:900 !important;
  font-size:11px !important;
  line-height:1.25 !important;
  text-align:center !important;
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#431407 !important;
  flex-shrink:0 !important;
}
.seed-card .meta-chip{
  font-size:8px !important;
  padding:3px 6px !important;
  border-radius:999px !important;
  background:#fff7ed !important;
  border:1.5px solid #fed7aa !important;
  line-height:1 !important;
  text-align:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:fit-content !important;
  margin:0 auto !important;
  flex-shrink:0 !important;
}
.seed-card-price{
  min-height:30px !important;
  font-size:10px !important;
  font-weight:900 !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  background:#fffbeb !important;
  border:1.5px dashed #fde68a !important;
  border-radius:10px !important;
  padding:5px 6px !important;
  color:#92400e !important;
  flex-shrink:0 !important;
  margin-bottom:2px !important;
}
/* NÚT MUA - KHÔNG ABSOLUTE, DÍNH ĐÁY BẰNG margin-top:auto */
.seed-card-buy{
  position:static !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:36px !important;
  min-height:36px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  background:linear-gradient(135deg,#fb7185 0%, #f59e0b 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 3px 0 #be123c !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  cursor:pointer !important;
  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:2 !important;
  white-space:nowrap !important;
  margin-top:auto !important;
  flex-shrink:0 !important;
}
.seed-card-buy:hover{transform:translateY(-1px) !important; box-shadow:0 4px 0 #be123c !important}
.seed-card-buy:active{transform:translateY(1px) !important; box-shadow:0 1px 0 #be123c !important}
.seed-card-buy:disabled{background:#e5e7eb !important; color:#9ca3af !important; box-shadow:0 2px 0 #d1d5db !important}

.shop-grid > div[style*="grid-column:1/-1"]{
  grid-column:1 / -1 !important;
  width:100% !important;
}

@media(max-width:768px){
  .shop-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; padding:10px !important}
  .seed-card{min-height:210px !important; padding:8px 6px 8px 6px !important; gap:3px !important}
  .seed-card-icon{height:44px !important; min-height:44px !important; font-size:22px !important}
  .seed-card-name{font-size:10px !important; min-height:20px !important}
  .seed-card-price{font-size:8px !important; min-height:28px !important}
  .seed-card-buy{height:32px !important; min-height:32px !important; font-size:10px !important}
}
@media(max-width:380px){
  .shop-grid{grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:6px !important}
  .seed-card{min-height:200px !important}
  .seed-card-name{font-size:9px !important}
  .seed-card-buy{font-size:9px !important; height:30px !important}
}

@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.8;transform:scale(1.05)}}