/* =========================================================================
   CẤU HÌNH — đổi API_BASE thành URL backend của bạn nếu khác domain.
   Mặc định gọi cùng domain: https://<domain>/api
   ========================================================================= */
    :root {
      --sky-1: #FFE9C4;
      --sky-2: #FFD79A;
      --field-1: #9BD46A;
      --field-2: #5CA844;
      --field-3: #3F8A37;
      --paper: #FFF7E6;
      --paper-edge: #F0E2C2;
      --soil: #8A5A36;
      --soil-dk: #6E4427;
      --gold: #F6A92B;
      --gold-dk: #C97E12;
      --gold-lt: #FFD37A;
      --gem: #7C5CF0;
      --gem-dk: #5B3FD6;
      --gem-lt: #C3B4FF;
      --ink: #3B2C1C;
      --ink-soft: #7A6650;
      --leaf: #2F8F4E;
      --rose: #E5604D;
      --sky-blue: #3FA9E0;
      --ok: #3FA45B;
      --warn: #E08A2B;
      --r-lg: 22px;
      --r-md: 16px;
      --r-sm: 11px;
      --shadow: 0 8px 22px rgba(74, 48, 20, .18);
      --shadow-sm: 0 3px 9px rgba(74, 48, 20, .14);
      --tap: rgba(0, 0, 0, 0);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: var(--tap);
    }

    html,
    body {
      margin: 0;
      height: 100%;
    }

    body {
      font-family: "Be Vietnam Pro", system-ui, sans-serif;
      color: var(--ink);
      background:
        linear-gradient(180deg, rgba(255, 233, 196, .72), rgba(183, 222, 140, .66) 50%, rgba(95, 168, 68, .72)),
        url('/static/bg.jpg') center top / cover no-repeat fixed,
        var(--field-1);
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      overscroll-behavior-y: none;
    }

    h1,
    h2,
    h3,
    .disp {
      font-family: "Baloo 2", system-ui, sans-serif;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: 0;
      background: none;
      color: inherit;
    }

    img {
      display: block;
    }

    .cimg {
      width: 1.05em;
      height: 1.05em;
      vertical-align: -0.12em;
      border-radius: 50%;
      display: inline-block;
      object-fit: contain;
    }

    .cimg.hay-xu {
      border-radius: 0;
      object-fit: contain;
    }

    .cimg.hay-coin {
      border-radius: 50%;
      object-fit: contain;
      filter: drop-shadow(0 .06em .05em rgba(116, 62, 10, .24));
    }

    .cimg.hay-grass {
      border-radius: 4px;
      object-fit: contain;
    }

    .cimg.hay-lg {
      width: 1.35em;
      height: 1.35em;
    }

    .resource-icon {
      display: inline-block;
      line-height: 1;
      vertical-align: -.08em;
    }

    .resource-icon.hay-lg {
      font-size: 1.3em;
    }

    /* phone frame */
    #app {
      max-width: 480px;
      margin: 0 auto;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* ===================== HUD ===================== */
    .hud {
      position: sticky;
      top: 0;
      z-index: 30;
      padding: calc(env(safe-area-inset-top) + 10px) 14px 12px;
      background: linear-gradient(180deg, rgba(255, 233, 196, .96), rgba(255, 233, 196, .78) 70%, transparent);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      flex: 0 0 auto;
      background: var(--leaf);
      color: #fff;
      display: grid;
      place-items: center;
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 18px;
      border: 2.5px solid #fff;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .who {
      flex: 1;
      min-width: 0;
    }

    .who .nm {
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .who .lv-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-top: 1px;
    }

    .who .lv {
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 600;
    }

    .who .exp-num {
      font-size: 10px;
      color: var(--ink-soft);
      font-weight: 600;
      white-space: nowrap;
    }

    .exp-track {
      height: 7px;
      border-radius: 999px;
      margin-top: 4px;
      background: rgba(0, 0, 0, .08);
      border: 1px solid rgba(255, 255, 255, .6);
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
    }

    .exp-fill {
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #66bb6a, #43a047);
      transition: width .45s ease;
      box-shadow: 0 0 6px rgba(67, 160, 71, .35);
    }

    .who .exp-hint {
      font-size: 10px;
      color: var(--leaf-dk, #2e7d32);
      font-weight: 600;
      margin-top: 3px;
      line-height: 1.3;
    }

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

    .farm-rank-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, #FFF9C4, #FFE082);
      border: 1.5px solid #F6A92B;
      border-radius: 14px;
      padding: 8px 12px;
      margin: 6px 0 10px;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: transform .15s ease;
    }

    .farm-rank-strip:active {
      transform: scale(0.98);
    }

    .farm-rank-strip-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #5D3800;
    }

    .farm-rank-strip .rank-trophy {
      font-size: 16px;
    }

    .farm-rank-strip .rank-arrow {
      font-size: 11px;
      font-weight: 800;
      color: #8D5B00;
    }

    .lang-toggle {
      flex: 0 0 auto;
      min-width: 104px;
      height: 32px;
      padding: 0 9px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      border: 1.5px solid var(--paper-edge);
      border-radius: 10px;
      background: rgba(255,255,255,.9);
      color: var(--ink);
      font-family: "Baloo 2", system-ui, sans-serif;
      font-size: 11px;
      font-weight: 900;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
    }

    .coin {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 13px;
      background: #fff;
      border-radius: 999px;
      padding: 5px 11px 5px 6px;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid var(--paper-edge);
    }

    .coin .ic {
      width: 21px;
      height: 21px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 13px;
    }

    .coin.gold .ic {
      background: radial-gradient(circle at 35% 30%, var(--gold-lt), var(--gold));
      box-shadow: inset 0 -2px 0 var(--gold-dk);
    }

    .coin.gem .ic {
      background: radial-gradient(circle at 35% 30%, var(--gem-lt), var(--gem));
      box-shadow: inset 0 -2px 0 var(--gem-dk);
    }

    /* ===================== SCREENS ===================== */
    main {
      flex: 1;
      padding: 6px 14px calc(env(safe-area-inset-bottom) + 72px);
    }

    body.has-ad-banner main {
      padding-bottom: calc(env(safe-area-inset-bottom) + 132px);
    }

    .screen {
      display: none;
      animation: fade .25s ease both;
    }

    .screen.on {
      display: block;
    }

    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .scrn-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin: 6px 2px 12px;
    }

    .scrn-head h2 {
      margin: 0;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: .2px;
    }

    .scrn-head .sub {
      font-size: 12px;
      color: var(--ink-soft);
      font-weight: 500;
    }

    /* barn block */
    .barn {
      background: var(--paper);
      border-radius: var(--r-lg);
      padding: 12px;
      margin-bottom: 14px;
      box-shadow: var(--shadow);
      border: 2px solid #fff;
      position: relative;
    }

    .barn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: var(--r-lg);
      border: 2px solid var(--paper-edge);
      pointer-events: none;
    }

    .barn-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 2px 4px 11px;
    }

    .barn-top .tag {
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 14px;
      color: var(--soil-dk);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .barn-top .slots {
      margin-left: auto;
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 600;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    /* Hay Farm — chuồng vuốt dọc, thú xếp list */
    #s-farm.farm-scroll-mode {
      display: flex;
      flex-direction: column;
      min-height: calc(100dvh - var(--nav-h, 72px) - 52px);
    }

    #s-farm.farm-scroll-mode #farmBody {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .farm-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    .barn-panel {
      min-height: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      box-sizing: border-box;
      padding: 0 2px 20px;
      display: flex;
      flex-direction: column;
    }

    .barn-panel-head {
      text-align: center;
      padding: 8px 8px 12px;
    }

    .barn-panel-head h3 {
      margin: 0;
      font-family: "Baloo 2";
      font-size: 20px;
      color: var(--soil-dk);
    }

    .barn-panel-head p {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--ink-soft);
      font-weight: 600;
    }

    .barn-vlist {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 4px;
    }

    .barn-panel-foot {
      text-align: center;
      font-size: 11px;
      color: var(--ink-soft);
      padding: 10px 0 4px;
      font-weight: 600;
      opacity: .85;
    }

    .farm-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding: 8px 0 2px;
    }

    .farm-dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #cbbda4;
      display: inline-block;
      transition: transform .2s, background .2s;
    }

    .farm-dots i.on {
      background: var(--leaf);
      transform: scale(1.25);
    }

    .pen-card {
      display: flex;
      gap: 12px;
      align-items: stretch;
      border-radius: var(--r-md);
      padding: 12px;
      position: relative;
      background: linear-gradient(180deg, #FBFFEF, #EAF6D6);
      border: 1.5px solid #DCE9C2;
      min-height: 100px;
    }

    .pen-card.ready {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(246, 169, 43, .18);
    }

    .pen-card.retired {
      opacity: .88;
    }

    .pen-beast {
      flex: 0 0 72px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pen-beast .beast {
      margin: 0;
    }

    .pen-beast .aimg {
      width: 56px;
      height: 56px;
    }

    .pen-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }

    .pen-body .nm {
      text-align: left;
      font-size: 15px;
    }

    .pen-body .lvl {
      text-align: left;
      margin-bottom: 2px;
    }

    .pen-body .yield {
      margin-top: 4px;
      width: 100%;
    }

    .pen-body .act {
      margin-top: 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .pen-body .act button {
      flex: 1 1 45%;
      min-width: 0;
    }

    .pen-add,
    .pen-lock {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 88px;
      border-style: dashed;
      cursor: pointer;
    }

    .pen-lock {
      flex-direction: column;
      cursor: default;
      background: #efe9dc;
    }

    /* Hay Farm — khu nuôi 1 màn */
    #s-farm.farm-pasture-mode .scrn-head h2::before {
      content: '🌾 ';
    }

    #s-farm.farm-pasture-mode #farmBody {
      margin: 0 -4px;
    }

    .pasture-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pasture-hud {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px;
      background: var(--paper);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-sm);
      border: 2px solid #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .pasture-hud .cap {
      color: var(--soil-dk);
      font-family: "Baloo 2";
    }

    .pasture-hud .hint {
      color: var(--gold-dk);
    }

    .pasture-hud .hint.muted {
      color: var(--ink-soft);
      font-weight: 600;
    }

    .pasture-field {
      position: relative;
      min-height: min(62dvh, 420px);
      border-radius: var(--r-lg);
      overflow: hidden;
      border: 3px solid #6d4c2a;
      box-shadow: inset 0 0 0 2px #a1887f, var(--shadow);
      background: linear-gradient(180deg, #7ec8e8 0%, #9ad4ef 14%, #8bc34a 14%, #689f38 55%, #558b2f 100%);
    }

    .pasture-field::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .35;
      background: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(255, 255, 255, .08) 18px, rgba(255, 255, 255, .08) 20px);
    }

    .pasture-field::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 28px;
      pointer-events: none;
      background: repeating-linear-gradient(90deg, #8d6e63 0, #8d6e63 8px, #6d4c41 8px, #6d4c41 16px);
      border-top: 2px solid #5d4037;
    }

    .pasture-deco {
      position: absolute;
      pointer-events: none;
      font-size: 22px;
      opacity: .55;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    }

    .pasture-beast {
      position: absolute;
      z-index: 2;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      transform: translate(-50%, -50%);
      touch-action: manipulation;
    }

    .pasture-beast .beast-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: roam var(--roam-dur, 5.5s) ease-in-out infinite;
      animation-delay: var(--roam-delay, 0s);
    }

    @keyframes roam {

      0%,
      100% {
        transform: translate(0, 0) rotate(-3deg);
      }

      33% {
        transform: translate(5px, -7px) rotate(2deg);
      }

      66% {
        transform: translate(-4px, 5px) rotate(-1deg);
      }
    }

    .pasture-beast .beast {
      margin: 0;
      font-size: 0;
      filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25));
    }

    .pasture-beast .beast .aimg {
      width: 52px;
      height: 52px;
    }

    .pasture-beast.ready .beast-wrap::before {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(246, 169, 43, .35) 0%, transparent 70%);
      animation: pasture-glow 2s ease-in-out infinite;
    }

    @keyframes pasture-glow {

      0%,
      100% {
        opacity: .6;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.08);
      }
    }

    .pasture-beast.hungry .beast .aimg {
      filter: grayscale(.35) brightness(.95);
    }

    .pasture-beast.retired .beast .aimg {
      opacity: .82;
      filter: grayscale(.4);
    }

    .pasture-bubble {
      position: absolute;
      bottom: calc(100% + 2px);
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 11px;
      background: #fff8e8;
      color: var(--gold-dk);
      border: 1.5px solid var(--gold);
      border-radius: 999px;
      padding: 2px 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
      animation: bubble-bob 2.4s ease-in-out infinite;
    }

    .pasture-bubble.hungry {
      background: #fff0f0;
      color: var(--rose);
      border-color: var(--rose);
    }

    @keyframes bubble-bob {

      0%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      50% {
        transform: translateX(-50%) translateY(-3px);
      }
    }

    .pasture-beast .pasture-tag {
      margin-top: 2px;
      font-family: "Baloo 2";
      font-size: 9px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
      max-width: 64px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pasture-empty {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
      pointer-events: none;
    }

    .pasture-empty .e {
      font-size: 48px;
    }

    .pasture-empty .t {
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 16px;
    }

    .pasture-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .pasture-bar button {
      padding: 12px;
      border-radius: var(--r-md);
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 13px;
      border: 2px solid #fff;
      box-shadow: var(--shadow-sm);
    }

    .pasture-bar .btn-buy {
      background: linear-gradient(180deg, #6FE08A, var(--leaf));
      color: #0f3d20;
    }

    .pasture-bar .btn-expand {
      background: #fff;
      color: var(--soil-dk);
    }

    .pasture-bar .btn-expand:disabled {
      opacity: .45;
    }

    /* Khu nuôi tương tác v2 */
    .farm-zone-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      padding: 4px;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(82, 126, 44, .2);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(8px);
    }

    .farm-zone-tabs button {
      border: 0;
      border-radius: 12px;
      padding: 9px 8px;
      color: #58705d;
      background: transparent;
      font-family: "Baloo 2";
      font-size: 13px;
      font-weight: 800;
    }

    .farm-zone-tabs button.on {
      color: #174e2a;
      background: #fff;
      box-shadow: 0 3px 10px rgba(50, 92, 38, .13);
    }

    .pasture-hud {
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .9);
      background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 255, 235, .9));
    }

    .pasture-stats {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .pasture-stat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #eff8df;
      color: #38622f;
      font-size: 11px;
      white-space: nowrap;
    }

    .pasture-stat.alert {
      color: #a3472e;
      background: #fff0df;
    }

    .pasture-field {
      min-height: min(54dvh, 390px);
      border: 3px solid #fff3c9;
      box-shadow: inset 0 0 0 2px rgba(67, 118, 44, .3), 0 10px 24px rgba(43, 82, 34, .2);
      background:
        radial-gradient(ellipse at 18% 28%, rgba(255,255,255,.3) 0 14%, transparent 15%),
        linear-gradient(165deg, transparent 54%, rgba(226, 201, 132, .48) 55% 62%, transparent 63%),
        linear-gradient(180deg, #8ed7f2 0 24%, #b7dc76 24% 44%, #78bd4d 44% 100%);
    }

    .pasture-field::before {
      opacity: 1;
      background:
        radial-gradient(ellipse at 12% 48%, #4f9e42 0 10%, transparent 10.5%),
        radial-gradient(ellipse at 28% 45%, #5ba748 0 14%, transparent 14.5%),
        radial-gradient(ellipse at 84% 43%, #4c9840 0 15%, transparent 15.5%);
    }

    .pasture-field::after {
      height: 18px;
      border-top: 3px solid #795535;
      background: repeating-linear-gradient(90deg, #9f7245 0 7px, #714b2d 7px 10px, #b18455 10px 18px);
    }

    .pasture-landmark {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      filter: drop-shadow(0 3px 2px rgba(41, 70, 29, .2));
    }

    .pasture-landmark.barn {
      top: 15%;
      right: 5%;
      font-size: 48px;
    }

    .pasture-landmark.pond {
      left: 6%;
      bottom: 10%;
      width: 78px;
      height: 28px;
      border: 3px solid rgba(231, 248, 199, .85);
      border-radius: 50%;
      background: linear-gradient(180deg, #78d6dc, #3ea7ba);
      transform: rotate(-5deg);
      opacity: .82;
    }

    .pasture-beast .beast .aimg {
      width: 58px;
      height: 58px;
    }

    .pasture-beast:active .beast-wrap {
      transform: scale(.92);
    }

    .pasture-beast .pasture-tag {
      padding: 1px 6px;
      border-radius: 999px;
      background: rgba(31, 73, 34, .58);
      max-width: 76px;
    }

    .pasture-toolbar {
      position: sticky;
      bottom: calc(var(--nav-h, 62px) + 7px);
      z-index: 8;
      display: grid;
      grid-template-columns: 1fr 1fr 1.05fr;
      gap: 6px;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .85);
      border-radius: 18px;
      background: rgba(255, 252, 239, .94);
      box-shadow: 0 8px 24px rgba(69, 79, 42, .2);
      backdrop-filter: blur(10px);
    }

    .pasture-toolbar button {
      min-height: 48px;
      padding: 5px;
      border: 0;
      border-radius: 13px;
      font-family: "Baloo 2";
      font-size: 11px;
      line-height: 1.12;
      font-weight: 800;
    }

    .pasture-toolbar button span {
      display: block;
      margin-bottom: 2px;
      font-size: 18px;
    }

    .pasture-toolbar button:disabled {
      filter: grayscale(.7);
      opacity: .46;
    }

    .pasture-toolbar .feed-all { background: #fff0d4; color: #8b552a; }
    .pasture-toolbar .collect-all { background: #e9f7d8; color: #27612d; }
    .pasture-toolbar .buy-animal { background: linear-gradient(180deg, #63d97c, #35ad5c); color: #fff; }

    .pasture-manage {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px;
      color: var(--ink-soft);
      font-size: 11px;
      font-weight: 700;
    }

    .pasture-manage button {
      border: 0;
      padding: 4px 6px;
      background: transparent;
      color: var(--leaf-dk);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .crop-zone-card .crop-section {
      margin-top: 0;
    }

    @media (max-width: 370px) {
      .pasture-field { min-height: 340px; }
      .pasture-beast .beast .aimg { width: 50px; height: 50px; }
      .pasture-stat { font-size: 10px; padding: 3px 5px; }
    }

    /* Vườn trồng lúa & nông sản mở rộng */
    .crop-section {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.94);
      border-radius: 18px;
      border: 1.5px solid #DCE9C2;
      margin: 10px 0 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    .crop-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .crop-head .t {
      font-family: "Baloo 2";
      font-size: 15px;
      font-weight: 700;
      color: var(--soil-dk);
    }
    .crop-head .sub {
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 600;
    }
    .crop-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .crop-card {
      background: linear-gradient(180deg, #F9FBE7, #F0F4C3);
      border: 1.5px solid #E6EE9C;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      position: relative;
    }
    .crop-card.locked {
      background: #f5f5f5;
      border-color: #e0e0e0;
      opacity: 0.85;
    }
    .crop-card.ready {
      background: linear-gradient(180deg, #FFF9C4, #FFF59D);
      border-color: #FBC02D;
      box-shadow: 0 0 0 2px rgba(251, 192, 45, 0.3);
    }
    .crop-card .c-icon {
      font-size: 26px;
      line-height: 1.1;
      margin: 1px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
    }
    .c-img {
      width: 44px;
      height: 44px;
      object-fit: contain;
    }
    .c-seed-img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
    }
    .product-img {
      width: 34px;
      height: 34px;
      object-fit: contain;
      display: block;
    }
    .crop-card .c-name {
      font-family: "Baloo 2";
      font-size: 11px;
      font-weight: 700;
      color: var(--ink);
      margin: 2px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
    .crop-card .c-status {
      font-size: 9px;
      font-weight: 600;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }
    .crop-card .pill {
      font-size: 10px;
      padding: 4px 8px;
    }

    /* Hay Farm — Kho hàng */
    #s-store.store-hay-mode .scrn-head h2::before {
      content: '🌾 ';
    }

    .hay-barn {
      padding: 16px 14px 14px;
      text-align: center;
    }

    .hay-barn-visual {
      font-size: 42px;
      line-height: 1.1;
      margin-bottom: 10px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
    }

    .hay-meter-wrap {
      text-align: left;
      margin: 10px 0 12px;
    }

    .hay-meter-label {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }

    .hay-meter-label span:last-child {
      font-family: "Baloo 2";
      color: var(--soil-dk);
    }

    .hay-meter {
      height: 14px;
      border-radius: 999px;
      background: #e8dcc4;
      border: 1px solid #d7c8a8;
      overflow: hidden;
    }

    .hay-meter-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #aed581, #7cb342);
      transition: width .4s ease;
    }

    .hay-price {
      font-size: 13px;
      font-weight: 700;
      color: var(--soil-dk);
      margin-bottom: 4px;
    }

    .hay-preview {
      font-size: 12px;
      color: var(--ink-soft);
      font-weight: 600;
      margin-bottom: 12px;
    }

    .hay-actions {
      display: grid;
      gap: 8px;
    }

    .hay-note {
      font-size: 11.5px;
      color: var(--ink-soft);
      line-height: 1.45;
      margin-top: 10px;
      text-align: center;
    }

    /* animal / slot card */
    .slot {
      border-radius: var(--r-md);
      min-height: 118px;
      padding: 10px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #FBFFEF, #EAF6D6);
      border: 1.5px solid #DCE9C2;
      display: flex;
      flex-direction: column;
    }

    .slot.ready {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(246, 169, 43, .22);
    }

    .slot .crit {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 10px;
      font-weight: 700;
      font-family: "Baloo 2";
      background: var(--rose);
      color: #fff;
      border-radius: 999px;
      padding: 2px 8px;
    }

    .slot.ready .crit {
      background: var(--gold);
      color: #3a2a08;
    }

    .beast {
      font-size: 40px;
      line-height: 1;
      text-align: center;
      margin: 6px 0 4px;
      filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12));
    }

    .aimg {
      width: 1.15em;
      height: 1.15em;
      object-fit: contain;
      display: inline-block;
      vertical-align: middle;
    }

    .beast .aimg {
      width: 64px;
      height: 64px;
    }

    .beast.bob {
      animation: bob 3.2s ease-in-out infinite;
    }

    @keyframes bob {

      0%,
      100% {
        transform: translateY(0) rotate(-2deg);
      }

      50% {
        transform: translateY(-5px) rotate(2deg);
      }
    }

    .slot .nm {
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 13px;
      text-align: center;
    }

    .slot .lvl {
      font-size: 10px;
      color: var(--ink-soft);
      text-align: center;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .yield {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 14px;
      color: var(--gold-dk);
      background: #fff8e8;
      border-radius: 9px;
      padding: 4px;
      border: 1px dashed var(--gold);
    }

    .yield.empty {
      color: var(--ink-soft);
      border-color: #d9cdb4;
      background: #fbf6ec;
      font-weight: 600;
      font-size: 12px;
    }

    .slot .act {
      margin-top: 7px;
    }

    .act button {
      width: 100%;
      padding: 7px;
      border-radius: 9px;
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 12px;
    }

    .btn-collect {
      background: linear-gradient(180deg, var(--gold-lt), var(--gold));
      color: #4a2f06;
      box-shadow: inset 0 -2px 0 var(--gold-dk);
    }

    .btn-feed {
      background: #fff;
      border: 1.5px solid var(--rose) !important;
      color: var(--rose);
    }

    .slot.add {
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      border-style: dashed;
      background: #f7fbec;
    }

    .slot.add .plus {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--leaf);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 26px;
      font-family: "Baloo 2";
      line-height: 1;
    }

    .slot.add .t {
      font-size: 11px;
      color: var(--leaf);
      font-weight: 700;
    }

    .slot.locked {
      align-items: center;
      justify-content: center;
      background: #efe9dc;
      border-style: dashed;
      color: var(--ink-soft);
      gap: 8px;
    }

    .slot.locked .lk {
      font-size: 30px;
    }

    .slot.locked button {
      font-size: 11px;
      padding: 6px 12px;
      border-radius: 999px;
      background: var(--soil);
      color: #fff;
      font-family: "Baloo 2";
      font-weight: 700;
    }

    .slot.retired {
      opacity: .86;
    }

    .slot.retired .beast {
      filter: grayscale(.5) drop-shadow(0 3px 2px rgba(0, 0, 0, .1));
    }

    .btn-sell {
      background: #fff;
      border: 1.5px solid var(--soil) !important;
      color: var(--soil-dk);
    }

    /* big collect-all dock */
    .dock {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom) + 58px);
      z-index: 25;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    body.has-ad-banner .dock {
      bottom: calc(env(safe-area-inset-bottom) + 118px);
    }

    .dock[hidden] {
      display: none;
    }

    .dock button {
      pointer-events: auto;
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 15px;
      color: #4a2f06;
      background: linear-gradient(180deg, var(--gold-lt), var(--gold));
      padding: 13px 26px;
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(201, 126, 18, .45), inset 0 -3px 0 var(--gold-dk);
      transform: translateY(0);
      transition: transform .1s;
    }

    .dock button:active {
      transform: translateY(2px);
    }

    .dock .cnt {
      background: #4a2f06;
      color: var(--gold-lt);
      border-radius: 999px;
      font-size: 12px;
      padding: 1px 9px;
    }

    /* generic card / list */
    .card {
      background: var(--paper);
      border-radius: var(--r-lg);
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: var(--shadow);
      border: 2px solid #fff;
    }

    .row {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 0;
      border-bottom: 1px solid var(--paper-edge);
    }

    .row:last-child {
      border-bottom: 0;
    }

    .row .emo {
      font-size: 26px;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: #fff;
      display: grid;
      place-items: center;
      box-shadow: var(--shadow-sm);
      flex: 0 0 auto;
    }

    .row .mid {
      flex: 1;
      min-width: 0;
    }

    .row .mid .t {
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 14px;
    }

    .row .mid .d {
      font-size: 11.5px;
      color: var(--ink-soft);
      font-weight: 500;
    }

    .row.dim {
      opacity: .45;
    }

    .pill {
      padding: 8px 14px;
      border-radius: 999px;
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 12.5px;
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
      transition: transform 0.1s, box-shadow 0.1s;
      white-space: nowrap;
    }

    .pill:active, button:active, .farm-order-deliver:active {
      transform: scale(0.92);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    }

    .pill.go {
      background: linear-gradient(180deg, var(--gold-lt), var(--gold));
      color: #4a2f06;
      box-shadow: inset 0 -2px 0 var(--gold-dk);
    }

    .pill.gem {
      background: linear-gradient(180deg, var(--gem-lt), var(--gem));
      color: #fff;
      box-shadow: inset 0 -2px 0 var(--gem-dk);
    }

    .pill.ok {
      background: var(--ok);
      color: #fff;
    }

    .pill.ghost {
      background: #fff;
      border: 1.5px solid var(--paper-edge);
      color: var(--ink-soft);
    }

    .pill.done {
      background: #e9efe0;
      color: var(--ink-soft);
    }

    .pill:disabled {
      opacity: .55;
    }

    .tier {
      font-size: 10px;
      font-weight: 700;
      font-family: "Baloo 2";
      padding: 1px 7px;
      border-radius: 6px;
      color: #fff;
    }

    .tier.common {
      background: #8aa06b;
    }

    .tier.rare {
      background: var(--sky-blue);
    }

    .tier.epic {
      background: #a05ad8;
    }

    .tier.legendary {
      background: linear-gradient(90deg, #f0962b, #e5604d);
    }

    /* exchange / stat boxes */
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }

    .stat {
      background: var(--paper);
      border-radius: var(--r-md);
      padding: 13px;
      box-shadow: var(--shadow-sm);
      border: 2px solid #fff;
      text-align: center;
    }

    .stat .v {
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 21px;
    }

    .stat .k {
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 600;
      margin-top: 1px;
    }

    .field {
      margin-bottom: 11px;
    }

    .field label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink-soft);
      margin: 0 0 5px 3px;
    }

    .field input,
    .field select {
      width: 100%;
      padding: 12px 13px;
      border-radius: 12px;
      border: 1.5px solid var(--paper-edge);
      background: #fff;
      font-family: inherit;
      font-size: 14px;
      color: var(--ink);
    }

    .field input:focus,
    .field select:focus {
      outline: 2px solid var(--leaf);
      border-color: var(--leaf);
    }

    .btn-full {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 15px;
    }

    .btn-primary {
      background: linear-gradient(180deg, #6FE08A, var(--leaf));
      color: #0f3d20;
      box-shadow: inset 0 -3px 0 #1f6b39;
    }

    .btn-gem {
      background: linear-gradient(180deg, var(--gem-lt), var(--gem));
      color: #fff;
      box-shadow: inset 0 -3px 0 var(--gem-dk);
    }

    .invite-box {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .invite-box input {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 360px) {
      .invite-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .invite-box .pill {
        padding-inline: 10px;
      }
    }

    .note {
      font-size: 11.5px;
      color: var(--ink-soft);
      line-height: 1.5;
      margin: 8px 2px 0;
    }

    adsgram-task.partner-task {
      display: block;
      width: 100%;
      padding: 0;
      margin: 0;
      --adsgram-task-font-size: 14px;
      --adsgram-task-icon-size: 48px;
      --adsgram-task-icon-title-gap: 12px;
      --adsgram-task-button-width: 72px;
      --adsgram-task-icon-border-radius: 12px;
    }

    adsgram-task.partner-task [slot="button"] {
      padding: 10px 16px;
      border-radius: 12px;
      background: linear-gradient(180deg, #6FE08A, var(--leaf));
      color: #0f3d20;
      font-weight: 800;
      border: 0;
      font-family: "Baloo 2", inherit;
      font-size: 13px;
      box-shadow: inset 0 -2px 0 #1f6b39;
      min-width: 72px;
    }

    adsgram-task.partner-task [slot="reward"] {
      font-size: 13px;
      font-weight: 700;
      color: var(--leaf-dk, #2e7d32);
    }

    adsgram-task.partner-task [slot="claim"],
    adsgram-task.partner-task [slot="done"] {
      display: none !important;
    }

    #adsgramPartnerHost {
      padding: 4px 0;
      border-radius: 12px;
    }

    /* AdsGram Post interstitial — SDK render thẻ dưới; chừa chỗ nav */
    body.adsgram-bar-active .nav {
      transform: translateY(0);
    }

    /* Banner QC cố định — trên nav, mọi tab */
    .ad-banner-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom) + 52px);
      z-index: 35;
      max-width: 480px;
      margin: 0 auto;
      background: linear-gradient(180deg, #fff9ef, var(--paper));
      border-top: 1px solid var(--paper-edge);
      box-shadow: 0 -4px 14px rgba(74, 48, 20, .1);
      padding: 3px 10px 4px;
    }

    .ad-banner-bar[hidden] {
      display: none !important;
    }

    .ad-banner-bar .ad-banner-label {
      font-size: 8.5px;
      color: var(--ink-soft);
      text-align: center;
      font-weight: 600;
      letter-spacing: .3px;
      margin-bottom: 2px;
    }

    .ad-banner-bar .ad-banner-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 50px;
      max-height: 60px;
      overflow: hidden;
    }

    .partner-card {
      padding: 14px 12px 12px;
      margin-top: 8px;
    }

    .partner-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
      padding: 0 2px;
    }

    .partner-head .t {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }

    .partner-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--leaf-dk);
      background: rgba(76, 175, 80, .12);
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap;
    }

    .partner-foot {
      margin-top: 10px;
      text-align: center;
    }

    .partner-hint {
      font-size: 11px;
      color: var(--ink-soft);
      text-align: center;
      margin: 8px 0 0;
      line-height: 1.45;
    }

    .ref-tiers {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ref-tier {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(0, 0, 0, .04);
      font-size: 12.5px;
    }

    .ref-tier span {
      color: var(--ink-soft);
    }

    .ref-tier b {
      font-family: 'Baloo 2';
      font-weight: 700;
      white-space: nowrap;
    }

    .ref-tier.done {
      background: rgba(76, 175, 80, .1);
    }

    .ref-friend {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, .03);
    }

    .ref-friend-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }

    .ref-friend-h .name {
      font-family: 'Baloo 2';
      font-weight: 700;
      font-size: 14px;
    }

    .ref-friend-h .lv {
      font-size: 12px;
      color: var(--ink-soft);
    }

    .ref-bar {
      height: 6px;
      background: #e8e0cc;
      border-radius: 999px;
      overflow: hidden;
      margin: 6px 0 4px;
    }

    .ref-bar>i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #7cb342, #4caf50);
      border-radius: 999px;
    }

    .ref-friend-meta {
      font-size: 11px;
      color: var(--ink-soft);
      line-height: 1.4;
    }

    .invite-hero {
      padding: 16px;
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(135deg, #176b3a, #35a755 58%, #f0a51b 140%);
      box-shadow: 0 8px 22px rgba(23, 107, 58, .22);
      margin-bottom: 12px;
    }

    .invite-hero-title {
      font-family: 'Baloo 2';
      font-size: 21px;
      font-weight: 800;
      line-height: 1.1;
    }

    .invite-hero p { margin: 5px 0 12px; font-size: 12.5px; opacity: .92; }
    .invite-hero .invite-box input { background: rgba(255,255,255,.94); border: 0; }
    .invite-hero .pill { background: #ffd166; color: #5d3a00; box-shadow: none; }
    .invite-share { margin-top: 9px; background: #fff; color: #176b3a; border: 0; }

    .invite-duo {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      padding: 11px;
      margin-bottom: 12px;
      border-radius: 16px;
      background: #fff8e1;
      border: 1px solid #f3d58b;
      text-align: center;
    }

    .invite-duo b { display: block; font-family: 'Baloo 2'; font-size: 16px; color: #9a5b00; }
    .invite-duo span { font-size: 10.5px; color: var(--ink-soft); }
    .invite-duo .duo-link { font-size: 20px; color: #db8b00; }

    .invite-road {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .invite-road .ref-tier {
      display: block;
      padding: 9px 10px;
      border: 1px solid #dcebd8;
      background: #f5fbf3;
    }

    .invite-road .ref-tier span,
    .invite-road .ref-tier b { display: block; }
    .invite-road .ref-tier b { margin-top: 2px; color: #247a42; }

    .bank-hero {
      position: relative;
      overflow: hidden;
      padding: 18px 16px 16px;
      border-radius: 22px;
      color: #fff;
      background: linear-gradient(145deg, #173f2a, #257247 62%, #b68025 145%);
      box-shadow: 0 10px 25px rgba(26, 77, 48, .25);
      margin-bottom: 10px;
    }

    .bank-hero::after {
      content: '🌾';
      position: absolute;
      right: -10px;
      bottom: -24px;
      font-size: 100px;
      opacity: .12;
      transform: rotate(-12deg);
      pointer-events: none;
    }

    .bank-brand { font-size: 11px; font-weight: 800; letter-spacing: .7px; opacity: .8; text-transform: uppercase; }
    .bank-balance { font-family: 'Baloo 2'; font-size: 31px; font-weight: 800; line-height: 1.15; margin-top: 3px; }
    .bank-balance-note { font-size: 12px; opacity: .84; margin-top: 2px; }
    .bank-hero .bank-withdraw { position: relative; z-index: 1; margin-top: 14px; background: #ffd166; color: #513600; border: 0; }

    .bank-facts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      margin: 10px 0 12px;
    }

    .bank-fact {
      padding: 9px 5px;
      border-radius: 13px;
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(69, 115, 62, .16);
      text-align: center;
      box-shadow: 0 3px 10px rgba(49, 79, 41, .08);
    }

    .bank-fact b { display: block; font-family: 'Baloo 2'; font-size: 12px; color: #285d3b; }
    .bank-fact span { display: block; margin-top: 1px; font-size: 9.5px; color: var(--ink-soft); }

    .bank-gift {
      border: 1px dashed #e2b250;
      background: linear-gradient(135deg, #fffaf0, #fff1cd);
    }

    .bank-gift-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 9px; }
    .bank-gift-row input { min-width: 0; padding: 11px 12px; border: 1.5px solid #ecd39b; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase; outline: none; }
    .bank-ledger-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
    .bank-ledger-title b { font-family: 'Baloo 2'; font-size: 16px; }
    .bank-ledger-title span { color: var(--ink-soft); font-size: 10.5px; }
    .bank-history-row { border-bottom: 1px dashed var(--paper-edge); }
    .bank-history-row:last-child { border-bottom: 0; }

    .withdraw-intro { padding: 12px; border-radius: 14px; background: linear-gradient(135deg,#eef9e9,#fff8df); border: 1px solid #cfe3bd; margin-bottom: 10px; }
    .withdraw-step { font-family: 'Baloo 2'; font-size: 13px; font-weight: 800; color: #2b6940; margin: 13px 0 6px; }
    .withdraw-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:-2px 0 9px; }
    .withdraw-quick button { border:1px solid #cfe3bd; background:#f7fbf2; color:#285d3b; border-radius:10px; padding:8px 4px; font-size:11.5px; font-weight:800; }
    .withdraw-checks { display:grid; gap:5px; margin-top:7px; }
    .withdraw-check { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:9px; background:rgba(255,255,255,.65); }
    .withdraw-check.ok { color:#238636; }
    .withdraw-check.bad { color:#b42318; }
    .withdraw-warning { padding:9px 11px; border-radius:11px; background:#fff3e8; border:1px solid #f2c99d; color:#8a4b08; font-size:11.5px; line-height:1.45; margin:8px 0; }

    .empty {
      text-align: center;
      padding: 34px 16px;
      color: var(--ink-soft);
    }

    .empty .e {
      font-size: 46px;
      margin-bottom: 8px;
    }

    .empty .t {
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 15px;
      color: var(--ink);
    }

    .empty .d {
      font-size: 12.5px;
      margin-top: 3px;
    }

    .empty .retry-btn { margin-top:12px; padding:8px 14px; border:0; border-radius:10px; color:#fff; background:var(--leaf); font-weight:800; }
    .loading-state { display:grid; place-items:center; min-height:110px; color:var(--ink-soft); font-size:12px; font-weight:700; }
    .loading-state::before { content:''; width:28px; height:28px; margin-bottom:7px; border:4px solid rgba(47,143,78,.18); border-top-color:var(--leaf); border-radius:50%; animation:loadSpin .8s linear infinite; }
    @keyframes loadSpin { to { transform:rotate(360deg); } }
    .network-banner { margin:0 11px 6px; padding:8px 12px; border-radius:10px; color:#6d431d; background:#fff0b8; box-shadow:0 2px 0 #d9a94d; font-size:11px; font-weight:800; text-align:center; }

    .skel {
      background: var(--paper);
      border-radius: var(--r-md);
      height: 118px;
      margin-bottom: 9px;
      background-image: linear-gradient(100deg, #f3ead4 30%, #fffaf0 50%, #f3ead4 70%);
      background-size: 200% 100%;
      animation: sh 1.2s infinite;
    }

    @keyframes sh {
      to {
        background-position: -200% 0;
      }
    }

    /* ===================== BOTTOM NAV ===================== */
    .nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      max-width: 480px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      background: #fff;
      border-top: 2px solid var(--paper-edge);
      padding: 3px 4px calc(env(safe-area-inset-bottom) + 4px);
      box-shadow: 0 -6px 18px rgba(74, 48, 20, .1);
    }

    .nav button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 2px 0;
      border-radius: 10px;
      color: var(--ink-soft);
    }

    .nav button .ni {
      font-size: 21px;
      line-height: 1;
      transition: transform .15s;
    }

    img.ni {
      width: 40px;
      height: 40px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
    }

    .nav button.on img.ni {
      transform: translateY(-2px) scale(1.1);
    }

    .nav button .nt {
      font-size: 9.5px;
      font-weight: 600;
    }

    .nav button.on {
      color: var(--leaf);
    }

    .nav button.on .ni {
      transform: translateY(-2px) scale(1.12);
    }

    /* ===================== SHEET / MODAL ===================== */
    .scrim {
      position: fixed;
      inset: 0;
      z-index: 50;
      background: rgba(40, 26, 12, .5);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s;
      backdrop-filter: blur(2px);
    }

    .scrim.on {
      opacity: 1;
      pointer-events: auto;
    }

    .sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 51;
      max-width: 480px;
      margin: 0 auto;
      background: var(--paper);
      border-radius: 24px 24px 0 0;
      padding: 8px 16px calc(env(safe-area-inset-bottom) + 18px);
      transform: translateY(100%);
      transition: transform .26s cubic-bezier(.2, .8, .2, 1);
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
      visibility: hidden;
      pointer-events: none;
    }

    .sheet.on {
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
    }

    .sheet-close {
      position: absolute;
      right: 12px;
      top: 9px;
      z-index: 2;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(27, 67, 50, .08);
      color: var(--ink-soft);
      font-size: 22px;
      line-height: 1;
      font-weight: 700;
    }

    .sheet-close:active {
      transform: scale(.94);
    }

    .grab {
      width: 38px;
      height: 4px;
      background: #dcceb4;
      border-radius: 99px;
      margin: 6px auto 12px;
    }

    .sheet h3 {
      margin: 0 0 12px;
      font-size: 19px;
      font-weight: 800;
    }

    /* toast */
    #toast {
      position: fixed;
      left: 50%;
      bottom: 140px;
      transform: translate(-50%, 20px);
      z-index: 80;
      max-width: 88%;
      text-align: center;
      background: #3B2C1C;
      color: #fff;
      padding: 11px 18px;
      border-radius: 14px;
      font-weight: 600;
      font-size: 13.5px;
      opacity: 0;
      pointer-events: none;
      transition: all .25s;
      box-shadow: var(--shadow);
    }

    #toast.on {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    #toast.bad {
      background: #9b2f24;
    }

    #toast.win {
      background: #1f6b39;
    }

    body.desktop-preview::before {
      content: "🖥 XEM THỬ · DỮ LIỆU MẪU";
      position: fixed;
      top: 8px;
      right: 10px;
      z-index: 89;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(27, 94, 32, .9);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .35px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    }

    /* fullscreen status (auth fail) */
    .splash {
      position: fixed;
      inset: 0;
      z-index: 90;
      overflow: hidden;
      background: #174a29;
      background-image: url('splash-hay-farm.webp');
      background-size: cover;
      background-position: center;
      transition: opacity .45s ease;
    }

    body.desktop-preview .splash {
      left: 50%;
      right: auto;
      width: min(100%, 480px);
      transform: translateX(-50%);
    }

    .splash.out {
      opacity: 0;
      pointer-events: none;
    }

    /* Che phần thanh tải in sẵn trong ảnh để dùng tiến trình thật của ứng dụng. */
    .splash::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 52%, rgba(14, 38, 16, .34) 66%, rgba(12, 27, 12, .96) 82%);
    }

    .spl-box {
      position: absolute;
      left: 50%;
      bottom: max(5%, calc(env(safe-area-inset-bottom) + 18px));
      transform: translateX(-50%);
      z-index: 2;
      width: min(88%, 390px);
      text-align: center;
      background: rgba(39, 25, 10, .8);
      backdrop-filter: blur(7px);
      border: 2px solid rgba(255, 220, 135, .82);
      border-radius: 18px;
      padding: 11px 14px 13px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .15);
    }

    .spl-title {
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 17px;
      color: #FFF2C6;
      letter-spacing: .4px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
    }

    .spl-track {
      position: relative;
      margin-top: 7px;
      height: 22px;
      border-radius: 999px;
      overflow: hidden;
      background: #3c2414;
      border: 2px solid #d9a34c;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, .65);
    }

    .spl-fill {
      height: 100%;
      width: 8%;
      border-radius: 999px;
      background: linear-gradient(180deg, #9BEA27 0%, #48C915 55%, #269A0C 100%);
      background-size: 200% 100%;
      box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 10px rgba(105, 214, 28, .55);
      transition: width .28s ease-out;
      animation: shimmer 1.1s linear infinite;
    }

    .spl-pct {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #fff;
      font-family: "Baloo 2";
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      text-shadow: 0 1px 3px #174a08;
    }

    @keyframes shimmer {
      to {
        background-position: -200% 0
      }
    }

    .spl-tip {
      margin-top: 7px;
      color: #fff;
      font-size: 10.5px;
      line-height: 1.4;
      font-weight: 600;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
    }

    .spl-tip b {
      color: #A7F35B;
    }

    .splash .plaque {
      background: rgba(20, 12, 30, .72);
      backdrop-filter: blur(3px);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      border: 2px solid rgba(180, 150, 255, .55);
      border-radius: 18px;
      padding: 14px 20px;
      width: min(82%, 320px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
      text-align: center;
    }

    .splash .lock {
      font-family: "Baloo 2";
      font-weight: 800;
      font-size: 20px;
      color: #fff;
      text-shadow: 0 2px 5px rgba(0, 0, 0, .7);
    }

    .splash .lockd {
      color: #ffe;
      font-size: 13px;
      line-height: 1.55;
      margin-top: 6px;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
    }

    /* ========== HAY FARM — giao diện riêng (khác Animals Farm) ========== */
    body.hay-farm-mode {
      --hay-sky: #7EC8E8;
      --hay-grass: #43A047;
      --hay-grass-lt: #A5D6A7;
      --hay-grass-dk: #1B5E20;
      --hay-meadow: #E8F5E9;
      --hay-card: #fff;
      --hay-ink: #1B4332;
      --hay-ink-soft: #558B6E;
      --hay-line: #C8E6C9;
      --hay-accent: #FF8F00;
      --hay-accent-dk: #E65100;
      --paper: var(--hay-card);
      --paper-edge: var(--hay-line);
      --ink: var(--hay-ink);
      --ink-soft: var(--hay-ink-soft);
      --leaf: var(--hay-grass);
      --gold: var(--hay-accent);
      --gold-dk: var(--hay-accent-dk);
      --gold-lt: #FFCC80;
      --shadow: 0 6px 20px rgba(27, 67, 50, .14);
      --shadow-sm: 0 2px 8px rgba(27, 67, 50, .1);
      background: linear-gradient(165deg, #B3E5FC 0%, #DCEDC8 38%, #81C784 72%, #388E3C 100%);
      background-attachment: fixed;
    }

    body.hay-farm-mode .hud {
      background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(232, 245, 233, .82) 75%, transparent);
      backdrop-filter: blur(10px);
    }

    body.hay-farm-mode .avatar {
      background: var(--hay-grass);
      border-color: #fff;
    }

    body.hay-farm-mode .exp-fill {
      background: linear-gradient(90deg, #81C784, #2E7D32);
    }

    body.hay-farm-mode .who .exp-hint {
      color: var(--hay-grass-dk);
    }

    body.hay-farm-mode .coin {
      border-color: var(--hay-line);
      background: #fff;
    }

    body.hay-farm-mode .coin .ic {
      background: none !important;
      box-shadow: none !important;
      width: 24px;
      height: 24px;
      border-radius: 0;
    }

    body.hay-farm-mode .coin .ic img {
      width: 24px;
      height: 24px;
      border-radius: 0 !important;
      object-fit: contain;
      display: block;
      transform: none;
    }

    body.hay-farm-mode .coin.hay .ic img {
      border-radius: 4px !important;
    }

    body.hay-farm-mode .purse {
      flex-shrink: 0;
    }

    body.hay-farm-mode main {
      padding: 4px 12px calc(env(safe-area-inset-bottom) + 92px);
    }

    body.hay-farm-mode.has-ad-banner main {
      padding-bottom: calc(env(safe-area-inset-bottom) + 152px);
    }

    body.hay-farm-mode .scrn-head {
      margin: 4px 0 10px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, .78);
      border-radius: 16px;
      border: 1.5px solid var(--hay-line);
      box-shadow: var(--shadow-sm);
    }

    body.hay-farm-mode .scrn-head h2 {
      font-size: 20px;
      color: var(--hay-grass-dk);
    }

    body.hay-farm-mode .scrn-head .sub {
      color: var(--hay-ink-soft);
      font-size: 11px;
    }

    body.hay-farm-mode .card {
      background: #fff;
      border: 1.5px solid var(--hay-line);
      border-radius: 18px;
      box-shadow: var(--shadow-sm);
    }

    body.hay-farm-mode .row .emo {
      background: var(--hay-meadow);
      box-shadow: none;
      border: 1px solid var(--hay-line);
    }

    body.hay-farm-mode .pill.go {
      background: linear-gradient(180deg, #FFCC80, var(--hay-accent));
      color: #4E2600;
      box-shadow: inset 0 -2px 0 var(--hay-accent-dk);
    }

    body.hay-farm-mode .pill.ok {
      background: var(--hay-grass);
    }

    body.hay-farm-mode .btn-primary {
      background: linear-gradient(180deg, #A5D6A7, var(--hay-grass));
      color: #fff;
      box-shadow: inset 0 -3px 0 var(--hay-grass-dk);
    }

    body.hay-farm-mode .stat {
      background: #fff;
      border-color: var(--hay-line);
    }

    body.hay-farm-mode .field input,
    body.hay-farm-mode .field select {
      border-color: var(--hay-line);
    }

    body.hay-farm-mode .field input:focus,
    body.hay-farm-mode .field select:focus {
      outline-color: var(--hay-grass);
      border-color: var(--hay-grass);
    }

    body.hay-farm-mode .nav {
      left: 0;
      right: 0;
      bottom: calc(env(safe-area-inset-bottom) + 6px);
      width: calc(100% - 20px);
      max-width: 460px;
      margin: 0 auto;
      grid-template-columns: repeat(6, 1fr);
      background: rgba(255, 255, 255, .94);
      border: none;
      border-radius: 22px;
      padding: 6px 5px;
      box-shadow: 0 10px 36px rgba(27, 67, 50, .22);
      backdrop-filter: blur(14px);
    }

    body.hay-farm-mode .nav button {
      gap: 2px;
      padding: 6px 2px;
      border-radius: 14px;
      transition: background .15s, color .15s;
    }

    body.hay-farm-mode .nav button .ni.hay-emoji {
      font-size: 22px;
      line-height: 1;
      display: block;
      filter: none;
      width: auto;
      height: auto;
    }

    body.hay-farm-mode .nav button.on {
      background: linear-gradient(180deg, #DCEDC8, #81C784);
      color: var(--hay-grass-dk);
    }

    body.hay-farm-mode .nav button.on .ni {
      transform: none;
    }

    body.hay-farm-mode .dock {
      bottom: calc(env(safe-area-inset-bottom) + 78px);
    }

    body.hay-farm-mode.has-ad-banner .dock {
      bottom: calc(env(safe-area-inset-bottom) + 138px);
    }

    body.hay-farm-mode .dock button {
      background: linear-gradient(180deg, #C8E6C9, #43A047);
      color: #fff;
      box-shadow: 0 10px 28px rgba(46, 125, 50, .42), inset 0 -3px 0 #2E7D32;
    }

    body.hay-farm-mode .dock .cnt {
      background: #fff;
      color: var(--hay-grass-dk);
    }

    body.hay-farm-mode .sheet {
      background: #fff;
      border-top: 3px solid var(--hay-line);
    }

    body.hay-farm-mode .grab {
      background: var(--hay-line);
    }

    body.hay-farm-mode #toast {
      background: var(--hay-grass-dk);
    }

    body.hay-farm-mode #toast.win {
      background: #2E7D32;
    }

    body.hay-farm-mode .pasture-hud {
      background: rgba(255, 255, 255, .92);
      border-color: var(--hay-line);
    }

    body.hay-farm-mode .pasture-hud .cap {
      color: var(--hay-grass-dk);
    }

    body.hay-farm-mode .pasture-hud .hint {
      color: var(--hay-accent-dk);
    }

    body.hay-farm-mode .pasture-bar .btn-buy {
      background: linear-gradient(180deg, #A5D6A7, var(--hay-grass));
      color: #fff;
    }

    body.hay-farm-mode .pasture-bar .btn-expand {
      border: 1.5px solid var(--hay-line);
    }

    body.hay-farm-mode #s-task .scrn-head h2::before {
      content: '📋 ';
    }

    body.hay-farm-mode #s-ref .scrn-head h2::before {
      content: '👥 ';
    }

    body.hay-farm-mode #s-wallet.wallet-hay-mode .scrn-head h2::before {
      content: '🏦 ';
    }

    body.hay-farm-mode #taskDailyProgress {
      background: var(--hay-meadow) !important;
      border: 1px solid var(--hay-line);
      box-shadow: none !important;
    }

    body.hay-farm-mode .ad-banner-bar {
      background: linear-gradient(180deg, #fff, #E8F5E9);
      border-color: var(--hay-line);
      bottom: calc(env(safe-area-inset-bottom) + 72px);
    }

    body.hay-farm-mode .skel {
      background: #E8F5E9;
      background-image: linear-gradient(100deg, #E8F5E9 30%, #fff 50%, #E8F5E9 70%);
    }

    body.hay-farm-mode .hay-neighbor-card {
      border: 2px dashed var(--hay-line);
      background: linear-gradient(180deg, #fff, #F1F8E9);
    }

    body.hay-farm-mode .hay-neighbor-tier {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--hay-meadow);
      margin: 5px 0;
      font-size: 12.5px;
    }

    body.hay-farm-mode .hay-neighbor-friend {
      padding: 10px 12px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid var(--hay-line);
      margin-bottom: 8px;
    }

    body.hay-farm-mode .hay-bar {
      height: 8px;
      background: #E8F5E9;
      border-radius: 99px;
      overflow: hidden;
      margin: 6px 0;
    }

    body.hay-farm-mode .hay-bar>i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, #A5D6A7, #43A047);
      border-radius: 99px;
    }

    body.hay-farm-mode .hay-chore-board {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    body.hay-farm-mode .hay-chore-section {
      font-family: "Baloo 2";
      font-weight: 700;
      font-size: 14px;
      color: var(--hay-grass-dk);
      padding: 6px 2px 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    body.hay-farm-mode #s-ref.ref-hay-mode .scrn-head h2::before {
      content: '🏡 ';
    }

    body.hay-farm-mode #s-task.task-hay-mode .scrn-head h2::before {
      content: '';
    }

    /* ================================================================
       SUNNY FARM UI — bộ nhận diện mới, tách khỏi giao diện Animals Farm
       ================================================================ */
    body.hay-farm-mode {
      --hay-sky: #8ed7f2;
      --hay-grass: #3aa85b;
      --hay-grass-lt: #b9e889;
      --hay-grass-dk: #185c35;
      --hay-meadow: #f1f8d5;
      --hay-card: #fff7d7;
      --hay-ink: #3d321f;
      --hay-ink-soft: #76684d;
      --hay-line: #e5c982;
      --hay-accent: #ffb938;
      --hay-accent-dk: #ce7625;
      --paper: var(--hay-card);
      --paper-edge: var(--hay-line);
      --ink: var(--hay-ink);
      --ink-soft: var(--hay-ink-soft);
      --leaf: var(--hay-grass);
      --gold: var(--hay-accent);
      --gold-dk: var(--hay-accent-dk);
      --gold-lt: #ffe07b;
      --shadow: 0 7px 0 rgba(105, 68, 34, .16), 0 14px 28px rgba(47, 95, 49, .13);
      --shadow-sm: 0 4px 0 rgba(105, 68, 34, .12), 0 7px 16px rgba(47, 95, 49, .1);
      background:
        radial-gradient(circle at 14% 9%, rgba(255,255,255,.82) 0 34px, transparent 35px),
        radial-gradient(circle at 78% 16%, rgba(255,255,255,.55) 0 44px, transparent 45px),
        linear-gradient(167deg, transparent 0 56%, rgba(90,174,82,.3) 56.2% 64%, transparent 64.2%),
        linear-gradient(180deg, #8dd8f5 0 34%, #dff1a7 34% 49%, #7fc95f 49% 100%);
      background-attachment: fixed;
    }

    body.hay-farm-mode #app {
      overflow: clip;
    }

    body.hay-farm-mode .hud {
      top: 7px;
      margin: 7px 10px 8px;
      padding: calc(env(safe-area-inset-top) + 8px) 10px 9px;
      border: 2px solid #fff3c5;
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(255,250,225,.97), rgba(255,239,181,.94));
      box-shadow: 0 5px 0 #9b6738, 0 11px 24px rgba(56, 84, 38, .2);
      backdrop-filter: blur(12px);
    }

    body.hay-farm-mode .hud::after {
      content: '☀';
      position: absolute;
      top: -8px;
      right: 8px;
      color: #ffc84b;
      font-size: 18px;
      filter: drop-shadow(0 2px 0 #d28726);
      pointer-events: none;
    }

    body.hay-farm-mode .avatar {
      width: 44px;
      height: 44px;
      border-radius: 15px 19px 14px 20px;
      border: 3px solid #fff;
      background: linear-gradient(145deg, #65c76e, #258d4f);
      box-shadow: 0 3px 0 #17663b;
      transform: rotate(-2deg);
    }

    body.hay-farm-mode .who .nm {
      color: #274a2e;
      font-family: "Baloo 2";
      font-size: 15px;
      font-weight: 800;
    }

    body.hay-farm-mode .who .lv {
      color: #5b351d;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    body.hay-farm-mode .level-board {
      display: grid;
      grid-template-columns: 23px 1fr auto;
      align-items: center;
      gap: 6px;
      margin-top: 3px;
      padding: 4px 7px 4px 5px;
      border: 1px solid #d9a84d;
      border-radius: 9px 14px 14px 9px;
      background: linear-gradient(180deg, #fff4c9, #f2cd75);
      box-shadow: inset 0 1px 0 #fff9df, 0 2px 0 #a96e2d;
    }

    body.hay-farm-mode .level-seed {
      width: 23px;
      height: 23px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      background: #e9f5c9;
      border: 1px solid #8db651;
      font-size: 14px;
    }

    body.hay-farm-mode .level-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    body.hay-farm-mode .level-kicker {
      color: #7e6236;
      font-size: 7px;
      font-weight: 900;
      letter-spacing: .7px;
      line-height: 1;
    }

    body.hay-farm-mode .exp-track {
      height: 5px;
      margin: 5px 4px 0;
      border: 0;
      background: rgba(69, 112, 49, .18);
      box-shadow: inset 0 1px 2px rgba(36, 76, 31, .2);
    }

    body.hay-farm-mode .exp-fill {
      background: repeating-linear-gradient(90deg, #58a94f 0 9px, #8acb5a 9px 12px);
      box-shadow: 0 0 5px rgba(57, 130, 60, .35);
    }

    body.hay-farm-mode .purse {
      flex-direction: column;
      gap: 3px;
    }

    body.hay-farm-mode .lang-toggle {
      width: 100%;
      min-width: 104px;
      height: 32px;
      border-color: #e4c56f;
      background: rgba(255,255,255,.82);
      color: #31543a;
      box-shadow: 0 2px 0 rgba(125, 78, 30, .15);
    }

    body.hay-farm-mode .hud::after { right: 45px; }

    body.hay-farm-mode .coin {
      min-width: 82px;
      justify-content: flex-start;
      padding: 3px 9px 3px 5px;
      border: 1px solid #e4c56f;
      border-radius: 10px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 2px 0 rgba(125, 78, 30, .15);
      font-size: 12px;
    }

    body.hay-farm-mode main {
      padding: 7px 11px calc(env(safe-area-inset-bottom) + 116px);
    }

    body.hay-farm-mode .scrn-head {
      position: relative;
      align-items: center;
      min-height: 54px;
      margin: 5px 5px 14px;
      padding: 9px 15px;
      border: 3px solid #f3d58e;
      border-radius: 13px 20px 12px 18px;
      background: linear-gradient(180deg, #9b6335, #774526);
      box-shadow: 0 5px 0 #56321e, 0 9px 18px rgba(52, 71, 35, .2);
      transform: rotate(-.25deg);
    }

    body.hay-farm-mode .scrn-head::before,
    body.hay-farm-mode .scrn-head::after {
      content: '';
      position: absolute;
      top: 7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f6c75a;
      box-shadow: inset 0 -2px 0 #b36a25;
    }

    body.hay-farm-mode .scrn-head::before { left: 7px; }
    body.hay-farm-mode .scrn-head::after { right: 7px; }

    body.hay-farm-mode .scrn-head h2 {
      flex: 1 1 auto;
      min-width: 0;
      color: #fff8d6;
      font-size: 21px;
      line-height: 1;
      text-shadow: 0 2px 0 #4b2918;
    }

    body.hay-farm-mode .scrn-head .sub {
      flex: 0 1 48%;
      max-width: 48%;
      color: #f5dfaf;
      font-size: 10px;
      line-height: 1.25;
      text-align: right;
      overflow-wrap: anywhere;
    }

    @media (max-width: 360px) {
      body.hay-farm-mode .scrn-head {
        gap: 8px;
        padding-inline: 13px;
      }

      body.hay-farm-mode .scrn-head h2 {
        font-size: 18px;
      }

      body.hay-farm-mode .scrn-head .sub {
        flex-basis: 43%;
        max-width: 43%;
        font-size: 9px;
      }

      .crop-section {
        padding-inline: 8px;
      }

      .crop-grid {
        gap: 6px;
      }

      .crop-card .pill {
        width: 100%;
        padding-inline: 3px;
        white-space: normal;
        line-height: 1.15;
      }
    }

    body.hay-farm-mode .card {
      position: relative;
      padding: 12px;
      border: 2px solid #ffe9a7;
      border-radius: 15px 22px 16px 20px;
      background: linear-gradient(145deg, #fff9df, #ffefbd);
      box-shadow: 0 5px 0 #c99955, 0 12px 24px rgba(70, 88, 42, .12);
    }

    body.hay-farm-mode .row {
      margin: 5px 0;
      padding: 9px;
      border: 1px solid rgba(189, 147, 72, .22);
      border-radius: 13px;
      background: rgba(255,255,255,.58);
    }

    body.hay-farm-mode .row .emo {
      border: 2px solid #fff;
      border-radius: 14px 18px 13px 17px;
      background: linear-gradient(145deg, #dff2b4, #b8dc83);
      box-shadow: 0 3px 0 #81ad5d;
    }

    body.hay-farm-mode .row .mid .t {
      color: #3c4a2d;
      font-size: 14px;
      font-weight: 800;
    }

    body.hay-farm-mode .pill {
      border-radius: 10px 15px 10px 14px;
    }

    body.hay-farm-mode .pill.go,
    body.hay-farm-mode .btn-primary {
      color: #fff;
      background: linear-gradient(180deg, #58c56d, #279451);
      box-shadow: inset 0 -3px 0 #17683a, 0 2px 0 rgba(255,255,255,.75);
    }

    body.hay-farm-mode .pill.ok {
      color: #5a3718;
      background: linear-gradient(180deg, #ffe174, #ffad2e);
      box-shadow: inset 0 -3px 0 #c97022;
    }

    body.hay-farm-mode .task-subtabs {
      gap: 5px;
      padding: 5px;
      border: 2px solid #efd18e;
      border-radius: 16px;
      background: #fff3c9;
      box-shadow: 0 4px 0 #bc8a4d;
    }

    body.hay-farm-mode .subtab-btn {
      border-radius: 11px;
      color: #796344;
    }

    body.hay-farm-mode .subtab-btn.active {
      color: #fff;
      background: #319c53;
      box-shadow: inset 0 -3px 0 #1b6939;
    }

    body.hay-farm-mode .nav {
      bottom: calc(env(safe-area-inset-bottom) + 8px);
      width: calc(100% - 18px);
      max-width: 462px;
      padding: 7px 6px 6px;
      border: 3px solid #f2cf79;
      border-radius: 20px 25px 18px 23px;
      background: linear-gradient(180deg, #9b6238, #754326);
      box-shadow: 0 6px 0 #4f2c1c, 0 14px 34px rgba(42, 58, 29, .34);
      overflow: visible;
    }

    body.hay-farm-mode .nav button {
      min-width: 0;
      padding: 4px 1px;
      border-radius: 13px 16px 12px 15px;
      color: #f7dfad;
      transition: transform .16s ease, background .16s ease;
    }

    body.hay-farm-mode .nav button .ni.hay-emoji {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 11px;
      background: rgba(255,255,255,.12);
      font-size: 19px;
    }

    body.hay-farm-mode .nav button .nt {
      max-width: 100%;
      overflow: hidden;
      color: inherit;
      font-size: 8.5px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    body.hay-farm-mode .nav button.on {
      color: #214b29;
      background: linear-gradient(180deg, #ffe171, #ffb438);
      box-shadow: inset 0 -3px 0 #d27524, 0 3px 0 rgba(61,34,19,.45);
      transform: translateY(-7px) rotate(-1deg);
    }

    body.hay-farm-mode .nav button.on .ni.hay-emoji {
      background: rgba(255,255,255,.42);
      transform: scale(1.04);
    }

    body.hay-farm-mode .sheet {
      border: 3px solid #edca7f;
      border-bottom: 0;
      border-radius: 25px 25px 0 0;
      background: linear-gradient(155deg, #fff9df, #ffedb2);
      box-shadow: 0 -10px 40px rgba(50, 44, 27, .25);
    }

    body.hay-farm-mode .grab {
      width: 54px;
      height: 6px;
      background: #9c6a3c;
    }

    body.hay-farm-mode #toast {
      border: 2px solid #ffe79e;
      border-radius: 13px 18px 13px 17px;
      background: #684229;
      box-shadow: 0 5px 0 #45291b;
    }

    .town-progress-card {
      margin-bottom: 12px;
      padding: 12px;
      border: 2px solid #ffe7a0;
      border-radius: 16px 22px 15px 20px;
      color: #4e3922;
      background: linear-gradient(145deg, #fff8d8, #ffdf86);
      box-shadow: 0 5px 0 #ba7c37, 0 10px 22px rgba(66, 82, 40, .14);
    }

    .town-progress-head,
    .town-storage-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-weight: 800;
    }

    .town-progress-head .town-level {
      padding: 3px 8px;
      border-radius: 9px;
      color: #fff;
      background: #29924d;
      box-shadow: inset 0 -2px 0 #176238;
      font-size: 11px;
    }

    .town-xp-track,
    .town-storage-track {
      height: 10px;
      margin-top: 7px;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,.8);
      border-radius: 999px;
      background: rgba(116,78,35,.2);
    }

    .town-xp-track i,
    .town-storage-track i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #56bf69, #2a944e);
    }

    .town-storage-head {
      margin-top: 10px;
      font-size: 11px;
      color: #715f43;
    }

    .town-storage-track i { background: linear-gradient(90deg, #57bfe1, #347cb8); }
    .town-storage-track.full i { background: linear-gradient(90deg, #f6a13a, #df5940); }

    .town-storage-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }

    .town-storage-limit {
      color: #806d4e;
      font-size: 9px;
      font-weight: 700;
    }

    .town-storage-upgrade {
      padding: 7px 10px;
      border: 1px solid #d39a29;
      border-radius: 10px;
      color: #70430d;
      background: linear-gradient(180deg, #ffe57b, #ffc13f);
      box-shadow: inset 0 -2px 0 #d78a20;
      font-size: 10px;
      font-weight: 900;
    }

    .town-storage-upgrade:disabled { opacity: .65; box-shadow: none; }

    .crop-seed-locked { opacity: .68; }

    .crop-level-lock {
      display: inline-flex;
      margin-top: 3px;
      padding: 2px 6px;
      border-radius: 999px;
      color: #7d4e25;
      background: #ffe2a6;
      font-size: 9px;
      font-weight: 800;
    }

    .farm-orders-title {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin: 4px 3px 8px;
    }

    .farm-orders-title b {
      color: #4d3b25;
      font-family: "Baloo 2";
      font-size: 17px;
    }

    .farm-orders-title span { color: #7a6748; font-size: 10px; }

    .farm-order-card {
      position: relative;
      margin-bottom: 10px;
      padding: 11px;
      border: 2px solid #edd096;
      border-radius: 14px 20px 14px 19px;
      background: linear-gradient(145deg, #fffdf0, #fff0c1);
      box-shadow: 0 4px 0 #b9864c, 0 8px 18px rgba(73,75,41,.1);
    }

    .farm-order-customer {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: #4f412e;
      font-weight: 800;
    }

    .farm-order-customer .face {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: #dff0aa;
      font-size: 20px;
    }

    .farm-order-deadline {
      display: inline-flex;
      align-items: center;
      margin-top: 3px;
      padding: 3px 7px;
      border: 1px solid #e2b85f;
      border-radius: 999px;
      color: #7a4e16;
      background: #fff2bd;
      font-size: 10px;
      font-weight: 800;
    }

    .farm-order-deadline.urgent {
      color: #9c2e20;
      border-color: #e88c78;
      background: #ffe0d4;
      animation: farmDeadlinePulse 1.2s ease-in-out infinite alternate;
    }

    @keyframes farmDeadlinePulse {
      to { transform: scale(1.025); }
    }

    .farm-order-items {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 9px;
    }

    .farm-order-item {
      padding: 5px 8px;
      border: 1px solid #e4c27c;
      border-radius: 9px;
      color: #6d5838;
      background: rgba(255,255,255,.7);
      font-size: 11px;
      font-weight: 700;
    }

    .farm-order-item.ready { color: #287044; border-color: #88c77e; background: #eff9d7; }

    .farm-order-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
    }

    .farm-order-reward { color: #756040; font-size: 11px; font-weight: 700; }

    .farm-order-deliver {
      padding: 8px 12px;
      border-radius: 10px 14px 10px 13px;
      color: #fff;
      background: linear-gradient(180deg, #59c76e, #279450);
      box-shadow: inset 0 -3px 0 #17663a;
      font-size: 11px;
      font-weight: 800;
    }

    .farm-order-deliver:disabled { color: #86775e; background: #ded5bd; box-shadow: none; }

    .farm-order-refresh {
      padding: 7px 9px;
      border: 1px solid #d6c394;
      border-radius: 10px;
      color: #765d31;
      background: #fff8df;
      font-size: 10px;
      font-weight: 800;
    }

    .farm-order-refresh:disabled { opacity: .58; }

    .order-choice-intro, .order-choice-note {
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.5;
    }

    .order-choice-note { margin: 12px 2px 0; }

    .order-choice {
      margin-top: 12px;
      padding: 12px;
      border: 2px solid #e6cf96;
      border-radius: 15px;
      background: #fff9e9;
    }

    .order-choice-title {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px 10px;
      margin-bottom: 9px;
      color: #493920;
    }

    .order-choice-title span { color: #287044; font-size: 12px; font-weight: 800; }

    .order-choice-wait {
      margin: 0 0 9px;
      color: #80591d;
      font-size: 12px;
      font-weight: 800;
    }

    .order-choice-item {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 0;
      border-top: 1px dashed #e6cf96;
      font-size: 12px;
    }

    .order-choice-item b { white-space: nowrap; color: #a9432c; }

    .order-choice-submit {
      width: 100%;
      min-height: 42px;
      margin-top: 10px;
      border-radius: 11px;
      color: white;
      background: #278d4c;
      font-weight: 800;
    }

    .order-choice-submit:disabled { opacity: .55; }

    @media (max-width: 360px) {
      .farm-orders-title {
        align-items: flex-start;
        gap: 3px;
      }

      .farm-orders-title b {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        line-height: 1.15;
      }

      .farm-orders-title span {
        flex: 0 0 42%;
        line-height: 1.2;
        text-align: right;
      }

      .farm-order-foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      }

      .farm-order-reward {
        grid-column: 1 / -1;
      }

      .farm-order-refresh,
      .farm-order-deliver {
        width: 100%;
        min-height: 36px;
        padding-inline: 6px;
      }
    }

    .starter-guide {
      margin: 8px 10px 10px;
      padding: 11px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 2px solid #edc760;
      border-radius: 16px;
      background: linear-gradient(135deg, #fff9d9, #fff1b9);
      box-shadow: 0 3px 0 rgba(139, 102, 28, .15);
      color: #614918;
    }
    .starter-guide .guide-step { font-size: 10px; font-weight: 900; color: #a16a16; }
    .starter-guide .guide-copy { flex: 1; min-width: 0; }
    .starter-guide .guide-title { font-size: 13px; font-weight: 900; }
    .starter-guide .guide-desc { margin-top: 2px; font-size: 11px; font-weight: 650; line-height: 1.3; }
    .starter-guide button {
      flex: 0 0 auto;
      padding: 8px 10px;
      border-radius: 11px;
      background: linear-gradient(180deg, #63c96f, #27964c);
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      box-shadow: inset 0 -3px 0 #17683a;
    }
    .starter-guide.is-ready {
      border-color: #4caf50;
      background: linear-gradient(135deg, #efffe8, #fff7c7);
      box-shadow: 0 0 0 3px rgba(76, 175, 80, .15), 0 4px 0 rgba(53, 128, 58, .16);
    }
    .starter-guide .guide-countdown {
      display: inline-flex;
      align-items: center;
      margin-top: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #fff;
      color: #d46b00;
      font-size: 13px;
      font-weight: 900;
      box-shadow: inset 0 0 0 1px rgba(212, 107, 0, .2);
    }
    .starter-guide button:disabled {
      opacity: .78;
      background: linear-gradient(180deg, #f2b74e, #df8719);
      cursor: default;
    }
    .crop-card.tutorial-target,
    .farm-order-card.tutorial-target {
      position: relative;
      border: 3px solid #ffad16 !important;
      box-shadow: 0 0 0 4px rgba(255, 173, 22, .18), 0 5px 12px rgba(120, 75, 0, .16);
      animation: tutorialTargetPulse 1.15s ease-in-out infinite alternate;
    }
    .crop-card.tutorial-target::before,
    .farm-order-card.tutorial-target::before {
      content: 'LÀM BƯỚC NÀY';
      position: absolute;
      z-index: 3;
      top: -10px;
      left: 10px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #ff9d00;
      color: #fff;
      font-size: 8px;
      font-weight: 1000;
      letter-spacing: .35px;
    }
    @keyframes tutorialTargetPulse {
      from { transform: scale(1); }
      to { transform: scale(1.012); }
    }

    @media (min-width: 600px) {
      body.hay-farm-mode #app {
        border-left: 2px solid rgba(255,255,255,.35);
        border-right: 2px solid rgba(255,255,255,.35);
        box-shadow: 0 0 50px rgba(37, 77, 37, .18);
      }
    }

    /* Sub-tabs trong tab Nhiệm vụ */
    .task-subtabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin: 0 0 14px;
      background: rgba(255, 255, 255, 0.85);
      padding: 4px;
      border-radius: 16px;
      border: 1.5px solid var(--hay-line, #C8E6C9);
      box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
    }

    .subtab-btn {
      padding: 9px 4px;
      border-radius: 12px;
      font-family: "Baloo 2", system-ui, sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      color: var(--hay-ink-soft, #558B6E);
      background: transparent;
      border: none;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .subtab-btn:active {
      transform: scale(0.96);
    }

    .subtab-btn.active {
      background: linear-gradient(180deg, #A5D6A7, #43A047);
      color: #fff;
      box-shadow: 0 3px 10px rgba(46, 125, 50, 0.28);
    }

    .task-subpane { display: none; }
    .task-subpane.active { display: block; }
    .vip-task-row { align-items: flex-start; }
    .vip-task-row .d { line-height: 1.4; margin-top: 3px; }
    .vip-tag {
      display: inline-flex;
      padding: 2px 7px;
      margin-left: 4px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffe082, #ffb300);
      color: #6d4100;
      font-size: 9px;
      font-weight: 900;
      vertical-align: 2px;
    }

    .membership-gate[hidden] { display: none; }
    .membership-gate {
      position: fixed; inset: 0; z-index: 10000; overflow-y: auto;
      display: flex; align-items: center; justify-content: center;
      padding: 24px 16px; background: linear-gradient(165deg, #b7e6a5, #e9f8ce 55%, #ffe5ae);
      font-family: 'Be Vietnam Pro', sans-serif; color: #294527;
    }
    .membership-card {
      width: min(100%, 420px); padding: 26px 20px; border-radius: 24px;
      background: #fffdf3; box-shadow: 0 18px 44px rgba(30, 80, 30, .2);
      text-align: center;
    }
    .membership-icon { font-size: 42px; }
    .membership-card h2 { margin: 8px 0; font-size: 21px; line-height: 1.3; }
    .membership-card > p { font-size: 13px; line-height: 1.55; }
    .membership-channel {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin-top: 12px; padding: 13px; border: 1px solid #d5e8bd; border-radius: 15px;
      background: #f6fbe9; text-align: left;
    }
    .membership-channel b { display: block; font-size: 13px; }
    .membership-channel small { display: block; margin-top: 3px; color: #637461; font-size: 11px; }
    .membership-channel a, #membershipRetry {
      flex-shrink: 0; padding: 10px 13px; border: 0; border-radius: 11px;
      background: #2e8746; color: white; font: 700 12px 'Be Vietnam Pro', sans-serif;
      text-decoration: none;
    }
    .membership-channel.joined a { background: #dcebd8; color: #326340; }
    .membership-message { min-height: 20px; color: #8b5e15; }
    #membershipRetry { width: 100%; margin-top: 8px; padding: 14px; font-size: 14px; cursor: pointer; }
    #membershipRetry:disabled { opacity: .65; }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .001ms !important;
        transition-duration: .05ms !important;
      }

      .beast.bob {
        animation: none;
      }
    }