@layer base, reactive;

@layer base {
  :root { color-scheme: light; }
  * { box-sizing: border-box; margin: 0; }

  body {
    min-block-size: 100dvh;
    background: radial-gradient(120vmax 90vmax at 30% 20%, oklch(97% .05 95), oklch(86% .1 80));
    color: oklch(28% .06 60);
    font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;   /* 數字等寬，數值變動時不會抖動 */
  }

  .game {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    gap: 3vmin;
    min-block-size: 100dvh;
    padding: 3vmin;
  }
  /* 手機與直向平板採堆疊排版，其他情況左右並排。 */
  @media (width < 900px), (orientation: portrait) and (width < 1100px) { .game { grid-template-columns: 1fr; } }

  /* 場景固定在畫面中（sticky、滿版一屏），較長的商店則在旁邊捲動。 */
  .world { position: sticky; inset-block-start: 3vmin; block-size: calc(100dvh - 6vmin); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto; justify-items: center; text-align: center; }
  @media (width < 900px), (orientation: portrait) and (width < 1100px) { .world { position: static; block-size: auto; } }

  .kicker {
    font: 600 clamp(12px, 1.4vmin, 15px)/1.4 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: oklch(45% .08 60 / .8);
  }

  .honey {
    margin-block-start: 1vmin;
    font: 900 clamp(44px, 8vmin, 96px)/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    letter-spacing: -.03em;
    color: oklch(62% .16 65);
    text-shadow: 0 3px 0 oklch(45% .12 55 / .35);
    span { font-size: .4em; font-weight: 700; letter-spacing: 0; color: oklch(45% .08 60); }
  }
  .rates { font-weight: 600; color: oklch(42% .07 60); }

  /* VIP 徽章：只有倍率大於 1 時才出現。 */
  .vip-badge {
    display: none;
    align-items: center;
    gap: 6px;
    margin-block-start: 1vmin;
    padding: 5px 14px;
    border-radius: 999px;
    background: oklch(30% .07 55);
    color: oklch(95% .14 95);
    font: 800 clamp(12px, 1.6vmin, 16px)/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    letter-spacing: .04em;
  }
  .vip-badge .vip-mul { color: oklch(85% .17 80); }

  .stage {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: min(100%, 64vmin);
    aspect-ratio: 1;
    container-type: inline-size;            /* 蜂巢、蜜蜂與金蜂跟著舞台縮放，而不是跟著視窗縮放 */
  }

  .hive {
    position: relative;
    inline-size: 56%;
    aspect-ratio: 200 / 236;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(0 1.4vmin 1.6vmin oklch(45% .12 55 / .35));
    transition: scale 120ms;
    &:hover { scale: 1.03; }
    &:active { scale: .96; }
    &:focus-visible { outline: 4px solid oklch(45% .12 55); outline-offset: 8px; border-radius: 24px; }
  }
  .hive-art { display: block; inline-size: 100%; block-size: 100%; }

  .floats { position: absolute; inset: 0; pointer-events: none; }
  .float {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
    font: 900 clamp(18px, 3vmin, 30px)/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    color: oklch(99% .04 95);
    -webkit-text-stroke: .16em oklch(42% .12 50);
    paint-order: stroke fill;               /* 實心描邊，在稻草色背景上也看得清楚 */
    text-shadow: 0 3px 0 oklch(35% .1 50 / .5);
    opacity: 0;
    --x: 50%; --y: 30%;
  }
  .fl1 { --x: var(--fx1); --y: var(--fy1); }
  .fl2 { --x: var(--fx2); --y: var(--fy2); }
  .fl3 { --x: var(--fx3); --y: var(--fy3); }

  /* VIP 倍率標記：只有倍率大於 1 時才跟在浮動數字後面。 */
  .fmul { display: none; font-size: .55em; letter-spacing: 0; }
  .game:when(--vmul > 1) .fmul { display: inline; }

  /* 蜂后皇冠戴在蜂巢上：頂端一枚，左右肩各一枚斜戴。 */
  .crowns { position: absolute; inset: 0; pointer-events: none; }
  .crown {
    position: absolute;
    inline-size: 22%;
    aspect-ratio: 64 / 44;
    opacity: 0;
    translate: 0 30%;
    transition: opacity 400ms, translate 400ms cubic-bezier(.3, 1.5, .5, 1);
    svg { display: block; inline-size: 100%; filter: drop-shadow(0 2px 1px oklch(45% .12 55 / .45)); }
  }
  .q1 { inset-inline-start: 39%; inset-block-start: 3%; }
  .q2 { inset-inline-start: 13%; inset-block-start: 21%; rotate: -24deg; }
  .q3 { inset-inline-start: 65%; inset-block-start: 21%; rotate: 24deg; }

  /* 蜜蜂繞著蜂巢飛；每買一隻就多一隻現身。 */
  .swarm { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* 蜜蜂在蜂巢前面飛 */
  .bee {
    --size: 9cqi;
    --r: calc(34cqi + sibling-index() * 1.35cqi);
    position: absolute;
    inset-inline-start: calc(50% + var(--r));
    inset-block-start: 50%;
    inline-size: var(--size);
    aspect-ratio: 1;
    margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
    transform-origin: calc(-1 * var(--r) + var(--size) / 2) 50%;
    animation: orbit calc(4s + sibling-index() * .55s) linear infinite;
    animation-delay: calc(sibling-index() * -.83s);
    opacity: 0;
    scale: 0;
    transition: opacity 300ms, scale 400ms cubic-bezier(.3, 1.6, .5, 1);

    /* 圖案朝上；順時針繞行時，前進方向就是下方。 */
    svg { display: block; inline-size: 100%; rotate: 180deg; filter: drop-shadow(0 .5vmin .4vmin oklch(40% .1 55 / .3)); }
    .wing { transform-box: fill-box; animation: flap 70ms linear infinite alternate; }
    .wl { transform-origin: 90% 60%; }
    .wr { transform-origin: 10% 60%; }
  }
  /* 隔一隻蜜蜂就反向繞行，因此牠面向的方向也相反。 */
  .bee:nth-child(even) { animation-direction: reverse; svg { rotate: 0deg; } }

  .meadow { display: flex; justify-content: center; gap: 2vmin; min-block-size: 9vmin; align-items: end; }
  .flower {
    --h: calc(sibling-index() * 36);
    inline-size: 4.5vmin;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(82% .17 90) 26%, transparent 28%),
      conic-gradient(from 0deg, oklch(78% .15 calc(var(--h) * 1deg)) 0 12.5%, oklch(70% .17 calc(var(--h) * 1deg)) 0 25%, oklch(78% .15 calc(var(--h) * 1deg)) 0 37.5%, oklch(70% .17 calc(var(--h) * 1deg)) 0 50%, oklch(78% .15 calc(var(--h) * 1deg)) 0 62.5%, oklch(70% .17 calc(var(--h) * 1deg)) 0 75%, oklch(78% .15 calc(var(--h) * 1deg)) 0 87.5%, oklch(70% .17 calc(var(--h) * 1deg)) 0);
    box-shadow: 0 3vmin 0 -1.9vmin oklch(55% .14 140);
    opacity: .15;
    scale: .5;
    filter: grayscale(1);
    transition: opacity 400ms, scale 500ms cubic-bezier(.3, 1.6, .5, 1), filter 400ms;
  }

  .shop {
    align-self: start;
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: 22px;
    background: oklch(99% .02 95 / .7);
    box-shadow: 0 0 0 1px oklch(60% .1 70 / .25), 0 2vmin 5vmin -2vmin oklch(45% .1 60 / .35);
    backdrop-filter: blur(6px);
    h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: oklch(45% .1 60); }
  }

  .items { display: grid; gap: 10px; padding: 0; list-style: none; }
  .item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: oklch(96% .04 90);
    .text { display: grid; gap: 1px; strong { font-size: 1rem; } span { font-size: .875rem; color: oklch(45% .06 60); } }
    .owned { font-weight: 600; }
  }
  .icon { inline-size: 44px; aspect-ratio: 1; border-radius: 12px; background: oklch(88% .1 85); display: grid; place-items: center; font-size: 24px; }

  .buy {
    min-inline-size: 104px;
    min-block-size: 44px;                 /* 觸控目標至少 44px */
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: oklch(62% .16 65);
    color: oklch(99% .02 95);
    font: 800 .9375rem/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;            /* 去掉 300ms 點擊延遲與雙擊縮放 */
    transition: filter 180ms ease;
    box-shadow: 0 4px 0 oklch(45% .13 55);
    &:hover:not(:disabled) { filter: brightness(1.07) saturate(1.05); }
    &:active:not(:disabled) { translate: 0 2px; box-shadow: 0 2px 0 oklch(45% .13 55); }
    &:disabled { background: oklch(85% .03 80); color: oklch(55% .03 70); box-shadow: none; cursor: not-allowed; }
    &:focus-visible { outline: 3px solid oklch(40% .1 55); outline-offset: 2px; }
  }

  .badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; list-style: none; }
  .badge {
    --got: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 4px;
    border-radius: 12px;
    background: color-mix(in oklch, oklch(80% .16 80) calc(var(--got) * 100%), oklch(93% .02 80));
    opacity: calc(.45 + var(--got) * .55);
    filter: grayscale(calc(1 - var(--got)));
    transition: background-color 500ms, opacity 500ms;
    b { font-size: 1.125rem; }
    span { font-size: .75rem; text-align: center; }
  }

  /* 收入計時器。 */
  .income { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; animation: tick-a 1s linear; }
  @keyframes tick-a { to { opacity: .01; } }
  @keyframes tick-b { to { opacity: .01; } }

  @keyframes orbit { to { rotate: 1turn; } }
  @keyframes flap { to { scale: 1 .35; } }
  @keyframes rise {
    0% { opacity: 1; translate: calc(var(--x) - 50%) calc(var(--y) - 50%); scale: .7; }
    20% { scale: 1.15; }
    100% { opacity: 0; translate: calc(var(--x) - 50%) calc(var(--y) - 50% - 9vmin); scale: 1; }
  }
  @keyframes squish { 40% { scale: 1.08 .9; } }
  @keyframes fade { from { opacity: 1; } to { opacity: 0; } }

  /* 尊重「減少動態效果」：關掉裝飾性動畫，只留下功能性的計時器。 */
  @media (prefers-reduced-motion: reduce) {
    .bee { animation-duration: calc(14s + sibling-index() * 1s); }   /* 繞行放慢 */
    .bee .wing { animation: none; }                                  /* 翅膀不扇動 */
    .game:changed(--k1) .fl1,
    .game:changed(--k2) .fl2,
    .game:changed(--k3) .fl3 { animation: fade 700ms ease-out !important; }
    .game:changed(--k1) .hive,
    .game:changed(--k2) .hive,
    .game:changed(--k3) .hive { animation: none !important; }
    .crown { transition: none !important; }
    .golden { animation: none !important; }                            /* 金蜂不再飛過 */
  }

  /* 商店樣式 */
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: oklch(93% .04 85); }
  .tab {
    position: relative;
    min-block-size: 44px;                 /* 觸控目標至少 44px */
    padding: 10px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: oklch(40% .07 60);
    font: 700 .9375rem/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 200ms ease, color 200ms ease;
    &:hover:not([aria-selected="true"]) { background: oklch(97% .04 88); }
    &[aria-selected="true"] { background: oklch(99% .02 95); color: oklch(30% .07 55); box-shadow: 0 2px 6px oklch(45% .1 60 / .2); }
    &:focus-visible { outline: 3px solid oklch(45% .12 55); outline-offset: 2px; }
    .dot { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background: oklch(62% .2 30); opacity: 0; transition: opacity 200ms; }
  }
  /* 隱藏的分頁仍然保留在畫面上（用 visibility 而非 display: none），
     這樣增益的計時條會持續倒數，切到其他分頁時 animationend 仍能正確結束增益。 */
  .panels { position: relative; }
  .panel { position: absolute; inset-inline: 0; inset-block-start: 0; visibility: hidden; pointer-events: none; }
  .req, .timer { font-size: .75rem; }
  .req { color: oklch(52% .12 40); font-weight: 600; }
  .lbl-lock, .lbl-own, .lbl-on { display: none; }
  .hint { padding: 10px 12px; border-radius: 14px; background: oklch(95% .07 95); color: oklch(42% .08 60); font-size: .8125rem; list-style: none; }
  .timer { display: block; block-size: 6px; margin-block-start: 4px; border-radius: 999px; background: oklch(88% .04 80); overflow: hidden; opacity: 0; }
  .timer span { display: block; block-size: 100%; background: linear-gradient(90deg, oklch(70% .2 40), oklch(85% .17 90)); transform-origin: left; scale: 0 1; }
  .stats { font-size: .8125rem; font-weight: 600; color: oklch(45% .06 60); output { color: oklch(30% .07 55); } }
  .save { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .reset, .confirm {
    min-block-size: 44px;
    padding: 10px 18px;
    border: 1px solid oklch(60% .08 60 / .4);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: 700 .875rem/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 180ms ease, border-color 180ms ease;
    &:hover { background: oklch(95% .05 92); }
    &:focus-visible { outline: 3px solid oklch(45% .12 55); outline-offset: 2px; }
  }
  .confirm { display: none; border-color: oklch(55% .2 25); color: oklch(45% .18 25); }
  .confirm:hover { background: oklch(95% .05 92); }
  .badges { grid-template-columns: repeat(3, 1fr); }

  /* VIP 面板：密碼、啟用／停用、自動連點開關。 */
  .vipbox { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: oklch(96% .04 90); }
  .vip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .vip-form { display: flex; flex: 1 1 12em; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
  .vip-label { font-size: .8125rem; font-weight: 700; color: oklch(42% .07 60); }
  .vip-pw {
    flex: 1 1 8em;
    -webkit-text-security: disc;         /* 顯示成圓點；不支援的瀏覽器則顯示原字 */
    min-inline-size: 0;
    min-block-size: 44px;                 /* 觸控目標至少 44px */
    padding: 8px 10px;
    border: 1px solid oklch(60% .08 60 / .35);
    border-radius: 10px;
    background: oklch(99% .02 95);
    color: inherit;
    font: 600 1rem/1.2 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  }
  .vip-pw:focus-visible { outline: 3px solid oklch(45% .12 55); outline-offset: 2px; }
  .vip-go, .vip-off {
    min-block-size: 44px;                 /* 觸控目標至少 44px */
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: oklch(62% .16 65);
    color: oklch(99% .02 95);
    font: 800 .875rem/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    transition: filter 180ms ease;
    &:hover:not(:disabled) { filter: brightness(1.07); }
  }
  .vip-off { background: transparent; color: oklch(45% .08 60); border: 1px solid oklch(60% .08 60 / .4); }
  .vip-go:focus-visible, .vip-off:focus-visible { outline: 3px solid oklch(45% .12 55); outline-offset: 2px; }
  .vip-note { font-size: .8125rem; line-height: 1.55; color: oklch(45% .06 60); }
  /* 窄螢幕：標籤一行、密碼一行、按鈕一行，避免折行錯位。 */
  @media (width < 520px) {
    .vip-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .vip-form { flex-wrap: wrap; }
    .vip-pw { flex: 1 1 100%; }
    .vip-go, .vip-off { flex: 1 1 auto; }
  }
  .hint-bad { display: none; color: oklch(45% .18 25); font-weight: 700; }
  .game:has(.vip-pw:not(:placeholder-shown):invalid) .hint-ok { display: none; }
  .game:has(.vip-pw:not(:placeholder-shown):invalid) .hint-bad { display: inline; }
  .vip-status { font-weight: 600; }
  .st-on { display: none; }
  .auto-t1, .auto-t2, .auto-t3 { display: none; }
  .game:when(--vmul > 1) .st-off { display: none; }
  .game:when(--vmul > 1) .st-on { display: inline; }
  .game:when(--vmul == 10) .auto-t1 { display: inline; }
  .game:when(--vmul == 100) .auto-t2 { display: inline; }
  .game:when(--vmul == 1000) .auto-t3 { display: inline; }
  .auto-row { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 700; cursor: pointer; }
  .auto-row small { display: block; font-weight: 400; font-size: .75rem; color: oklch(45% .06 60); }

  /* 自動連點的時鐘：鋪滿蜂巢但完全看不見，動畫結束就等於點一次。 */
  .auto { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

  /* 金蜂出現時會橫越舞台；抓到牠時橫幅會跳出來。 */
  .golden {
    position: absolute;
    z-index: 4;
    inset-inline-start: 0;
    inset-block-start: 18%;
    inline-size: 15cqi;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: none;
    filter: drop-shadow(0 0 1.4vmin oklch(88% .17 90)) drop-shadow(0 0 .4vmin oklch(95% .12 95));
    svg { display: block; inline-size: 100%; rotate: 90deg; }
    .wing { transform-box: fill-box; animation: flap 60ms linear infinite alternate; }
    &:focus-visible { outline: 3px solid oklch(45% .12 55); outline-offset: 4px; border-radius: 50%; }
  }
  .banner {
    position: absolute;
    z-index: 5;
    inset-block-start: 4%;
    padding: 10px 18px;
    border-radius: 999px;
    background: oklch(30% .07 55);
    color: oklch(95% .14 95);
    font: 900 clamp(16px, 2.4vmin, 24px)/1 "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
  }
  .jar { inline-size: 5.2vmin; opacity: 0; scale: .4; transition: opacity 400ms, scale 500ms cubic-bezier(.3, 1.6, .5, 1); svg { display: block; } }

  /* 蜂蜜衝刺期間，「+N」浮動數字上會顯示倍率標記。 */
  .float::after { content: ""; }

  .spawner { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; animation: spawn-a 6s linear; }
  @keyframes spawn-a { to { opacity: .01; } }
  @keyframes spawn-b { to { opacity: .01; } }
  @keyframes auto-a { to { opacity: .01; } }
  @keyframes auto-b { to { opacity: .01; } }
  @keyframes fly-a { from { translate: -20cqi 0; } 50% { translate: 50cqi -8cqi; } to { translate: 120cqi 5cqi; } }
  @keyframes fly-b { from { translate: -20cqi 0; } 50% { translate: 50cqi -8cqi; } to { translate: 120cqi 5cqi; } }
  @keyframes drain { from { scale: 1 1; } to { scale: 0 1; } }
  @keyframes banner { 0% { opacity: 0; translate: 0 10px; } 15%, 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }
  /* 商店樣式結束 */
}

/* ---- Reactive CSS 區塊 ---- */

@layer reactive {
  .game {
    --honey: state(0, persist("showcase.hive.honey"));
    --total: state(0, persist("showcase.hive.total"));
    --power: state(1, persist("showcase.hive.power"));
    --mult: state(1, persist("showcase.hive.mult"));
    --rate: state(0, persist("showcase.hive.rate"));
    --gmul: state(1, persist("showcase.hive.gmul"));
    --clicks: state(0, persist("showcase.hive.clicks"));
    --caught: state(0, persist("showcase.hive.caught"));
    --tab: state(1, persist("showcase.hive.tab"));
    --n-bee: state(0, persist("showcase.hive.n-bee"));
    --c-bee: state(15, persist("showcase.hive.c-bee"));
    --o-bee: state(1, persist("showcase.hive.o-bee"));
    --n-flower: state(0, persist("showcase.hive.n-flower"));
    --c-flower: state(100, persist("showcase.hive.c-flower"));
    --o-flower: state(6, persist("showcase.hive.o-flower"));
    --n-queen: state(0, persist("showcase.hive.n-queen"));
    --c-queen: state(1100, persist("showcase.hive.c-queen"));
    --o-queen: state(40, persist("showcase.hive.o-queen"));
    --n-keeper: state(0, persist("showcase.hive.n-keeper"));
    --c-keeper: state(12000, persist("showcase.hive.c-keeper"));
    --o-keeper: state(150, persist("showcase.hive.o-keeper"));
    --n-factory: state(0, persist("showcase.hive.n-factory"));
    --c-factory: state(130000, persist("showcase.hive.c-factory"));
    --o-factory: state(600, persist("showcase.hive.o-factory"));
    --n-wings: state(0, persist("showcase.hive.n-wings"));
    --c-wings: state(50, persist("showcase.hive.c-wings"));
    --n-jelly: state(0, persist("showcase.hive.n-jelly"));
    --c-jelly: state(500, persist("showcase.hive.c-jelly"));
    --u-pollen: state(false, persist("showcase.hive.u-pollen"));
    --u-seeds: state(false, persist("showcase.hive.u-seeds"));
    --u-court: state(false, persist("showcase.hive.u-court"));
    --u-smoker: state(false, persist("showcase.hive.u-smoker"));
    --u-comb: state(false, persist("showcase.hive.u-comb"));
    --c-rush: state(200, persist("showcase.hive.c-rush"));
    --rush: state(false);
    --c-dance: state(500, persist("showcase.hive.c-dance"));
    --dance: state(false);
    --tick: state(false);
    --gt: state(false);
    --g: state(9);
    --bonus: state(0);
    --slot: state(1);
    --k1: state(0); --k2: state(0); --k3: state(0);
    --fx1: state(0px); --fy1: state(0px); --fx2: state(0px); --fy2: state(0px); --fx3: state(0px); --fy3: state(0px);
    --vmul: state(1, persist("showcase.hive.vmul"));     /* VIP 點擊倍率：1 / 10 / 100 / 1000 */
    --vip-ok: state(false);                              /* 密碼是否已通過檢查 */
    --pw: state("");                                     /* 輸入的密碼（只留在記憶體） */
    --auto-t: state(false);                              /* 自動連點的時鐘翻轉次 */
    --armed: state(false);                               /* 「重來一次」的二次確認 */
    --rushmul: state(1);                                 /* 蜂蜜衝刺期間點擊 ×3 */
  }

    /* 點擊：每點一次得一次點擊量的蜂蜜（倍率＝VIP 倍率 × 蜂蜜衝刺 ×3），並在點擊處浮起「+N」。 */
  .game:when(--slot == 1) .hive:on(click) { --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx1: set(clamp(24px, event(local-x), calc(element(width) - 24px))); --fy1: set(clamp(24px, event(local-y), calc(element(height) - 24px))); --k1: increment(1); --slot: set(2); }
  .game:when(--slot == 2) .hive:on(click) { --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx2: set(clamp(24px, event(local-x), calc(element(width) - 24px))); --fy2: set(clamp(24px, event(local-y), calc(element(height) - 24px))); --k2: increment(1); --slot: set(3); }
  .game:when(--slot == 3) .hive:on(click) { --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx3: set(clamp(24px, event(local-x), calc(element(width) - 24px))); --fy3: set(clamp(24px, event(local-y), calc(element(height) - 24px))); --k3: increment(1); --slot: set(1); }

  /* 自動連點：計時器的動畫每結束一次，就等於自動點了一下蜂巢（落點隨機，倍率同上）。 */
  .game:when(--slot == 1 and --vmul > 1) .auto:on(animationend) { --auto-t: toggle(); --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx1: set(random(24px, calc(element(width) - 24px))); --fy1: set(random(24px, calc(element(height) - 24px))); --k1: increment(1); --slot: set(2); }
  .game:when(--slot == 2 and --vmul > 1) .auto:on(animationend) { --auto-t: toggle(); --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx2: set(random(24px, calc(element(width) - 24px))); --fy2: set(random(24px, calc(element(height) - 24px))); --k2: increment(1); --slot: set(3); }
  .game:when(--slot == 3 and --vmul > 1) .auto:on(animationend) { --auto-t: toggle(); --honey: set(var(--honey) + var(--power) * var(--vmul) * var(--rushmul)); --total: set(var(--total) + var(--power) * var(--vmul) * var(--rushmul)); --clicks: increment(1); --fx3: set(random(24px, calc(element(width) - 24px))); --fy3: set(random(24px, calc(element(height) - 24px))); --k3: increment(1); --slot: set(1); }
  .game:changed(--k1) .fl1 { animation: rise 900ms ease-out; }
  .game:changed(--k1) .hive { animation: squish 260ms ease-out; }
  .game:changed(--k2) .fl2 { animation: rise 900ms ease-out; }
  .game:changed(--k2) .hive { animation: squish 260ms ease-out; }
  .game:changed(--k3) .fl3 { animation: rise 900ms ease-out; }
  .game:changed(--k3) .hive { animation: squish 260ms ease-out; }
  .pw { content: var(--power); }
  .vmul { content: var(--vmul); }
  .game:when(--rush) .float::after { content: " ×3"; }

  /* 收入：計時器動畫每結束一次就加上一秒的收益（蜂群之舞期間為兩倍），然後重新開始。 */
  .game:when(--tick) .income { animation-name: tick-b; }
  .game:when(not --dance) .income:on(animationend) { --tick: toggle(); --honey: set(var(--honey) + var(--rate)); --total: set(var(--total) + var(--rate)); }
  .game:when(--dance) .income:on(animationend) { --tick: toggle(); --honey: set(var(--honey) + var(--rate) * 2); --total: set(var(--total) + var(--rate) * 2); }

  /* 助手：付款、漲價、把目前的產出加進收益，全部在同一個交易裡完成。 */
  .game:when(--honey >= --c-bee) .buy-bee:on(click) { --honey: set(var(--honey) - var(--c-bee)); --c-bee: set(round(var(--c-bee) * 1.15)); --n-bee: increment(1); --rate: set(var(--rate) + var(--o-bee)); }
  .buy-bee { --attr-disabled: when(--honey < --c-bee); }
  .game:when(--honey >= --c-flower) .buy-flower:on(click) { --honey: set(var(--honey) - var(--c-flower)); --c-flower: set(round(var(--c-flower) * 1.15)); --n-flower: increment(1); --rate: set(var(--rate) + var(--o-flower)); }
  .buy-flower { --attr-disabled: when(--honey < --c-flower); }
  .game:when(--honey >= --c-queen) .buy-queen:on(click) { --honey: set(var(--honey) - var(--c-queen)); --c-queen: set(round(var(--c-queen) * 1.15)); --n-queen: increment(1); --rate: set(var(--rate) + var(--o-queen)); }
  .buy-queen { --attr-disabled: when(--honey < --c-queen); }
  .game:when(--honey >= --c-keeper) .buy-keeper:on(click) { --honey: set(var(--honey) - var(--c-keeper)); --c-keeper: set(round(var(--c-keeper) * 1.15)); --n-keeper: increment(1); --rate: set(var(--rate) + var(--o-keeper)); }
  .buy-keeper { --attr-disabled: when(--honey < --c-keeper); }
  .game:when(--honey >= --c-factory) .buy-factory:on(click) { --honey: set(var(--honey) - var(--c-factory)); --c-factory: set(round(var(--c-factory) * 1.15)); --n-factory: increment(1); --rate: set(var(--rate) + var(--o-factory)); }
  .buy-factory { --attr-disabled: when(--honey < --c-factory); }
  .game:when(--honey >= --c-wings) .buy-wings:on(click) { --honey: set(var(--honey) - var(--c-wings)); --c-wings: set(round(var(--c-wings) * 1.4)); --n-wings: increment(1); --power: set(var(--power) + var(--mult)); }
  .buy-wings { --attr-disabled: when(--honey < --c-wings); }
  .game:when(--honey >= --c-jelly) .buy-jelly:on(click) { --honey: set(var(--honey) - var(--c-jelly)); --c-jelly: set(round(var(--c-jelly) * 4)); --n-jelly: increment(1); --power: set(var(--power) * 2); --mult: set(var(--mult) * 2); }
  .buy-jelly { --attr-disabled: when(--honey < --c-jelly); }

  /* 一次性升級：由已拥有的項目解鎖，只能買一次。加成時也會把已拥有的助手当下
     產出的部分一併加回去，收益數值才會準確。 */
  .game:when(--n-bee >= 10 and not --u-pollen and --honey >= 1000) .buy-pollen:on(click) { --honey: set(var(--honey) - 1000); --u-pollen: set(true); --rate: set(var(--rate) + var(--n-bee) * var(--o-bee)); --o-bee: set(var(--o-bee) * 2); }
  .buy-pollen { --attr-disabled: when(not (--n-bee >= 10) or --u-pollen or --honey < 1000); }
  .game:when(not (--n-bee >= 10)) .buy-pollen .lbl-buy, .game:when(--u-pollen) .buy-pollen .lbl-buy { display: none; }
  .game:when(not (--n-bee >= 10) and not --u-pollen) .buy-pollen .lbl-lock { display: inline; }
  .game:when(--u-pollen) .buy-pollen .lbl-own { display: inline; }
  .game:when(--n-bee >= 10) .it-pollen .req, .game:when(--u-pollen) .it-pollen .req { visibility: hidden; }
  .game:when(--n-flower >= 5 and not --u-seeds and --honey >= 5000) .buy-seeds:on(click) { --honey: set(var(--honey) - 5000); --u-seeds: set(true); --rate: set(var(--rate) + var(--n-flower) * var(--o-flower)); --o-flower: set(var(--o-flower) * 2); }
  .buy-seeds { --attr-disabled: when(not (--n-flower >= 5) or --u-seeds or --honey < 5000); }
  .game:when(not (--n-flower >= 5)) .buy-seeds .lbl-buy, .game:when(--u-seeds) .buy-seeds .lbl-buy { display: none; }
  .game:when(not (--n-flower >= 5) and not --u-seeds) .buy-seeds .lbl-lock { display: inline; }
  .game:when(--u-seeds) .buy-seeds .lbl-own { display: inline; }
  .game:when(--n-flower >= 5) .it-seeds .req, .game:when(--u-seeds) .it-seeds .req { visibility: hidden; }
  .game:when(--n-queen >= 3 and not --u-court and --honey >= 50000) .buy-court:on(click) { --honey: set(var(--honey) - 50000); --u-court: set(true); --rate: set(var(--rate) + var(--n-queen) * var(--o-queen)); --o-queen: set(var(--o-queen) * 2); }
  .buy-court { --attr-disabled: when(not (--n-queen >= 3) or --u-court or --honey < 50000); }
  .game:when(not (--n-queen >= 3)) .buy-court .lbl-buy, .game:when(--u-court) .buy-court .lbl-buy { display: none; }
  .game:when(not (--n-queen >= 3) and not --u-court) .buy-court .lbl-lock { display: inline; }
  .game:when(--u-court) .buy-court .lbl-own { display: inline; }
  .game:when(--n-queen >= 3) .it-court .req, .game:when(--u-court) .it-court .req { visibility: hidden; }
  .game:when(--n-keeper >= 3 and not --u-smoker and --honey >= 300000) .buy-smoker:on(click) { --honey: set(var(--honey) - 300000); --u-smoker: set(true); --rate: set(var(--rate) + var(--n-keeper) * var(--o-keeper)); --o-keeper: set(var(--o-keeper) * 2); }
  .buy-smoker { --attr-disabled: when(not (--n-keeper >= 3) or --u-smoker or --honey < 300000); }
  .game:when(not (--n-keeper >= 3)) .buy-smoker .lbl-buy, .game:when(--u-smoker) .buy-smoker .lbl-buy { display: none; }
  .game:when(not (--n-keeper >= 3) and not --u-smoker) .buy-smoker .lbl-lock { display: inline; }
  .game:when(--u-smoker) .buy-smoker .lbl-own { display: inline; }
  .game:when(--n-keeper >= 3) .it-smoker .req, .game:when(--u-smoker) .it-smoker .req { visibility: hidden; }
  .game:when(--caught >= 1 and not --u-comb and --honey >= 10000) .buy-comb:on(click) { --honey: set(var(--honey) - 10000); --u-comb: set(true); --gmul: set(3); }
  .buy-comb { --attr-disabled: when(not (--caught >= 1) or --u-comb or --honey < 10000); }
  .game:when(not (--caught >= 1)) .buy-comb .lbl-buy, .game:when(--u-comb) .buy-comb .lbl-buy { display: none; }
  .game:when(not (--caught >= 1) and not --u-comb) .buy-comb .lbl-lock { display: inline; }
  .game:when(--u-comb) .buy-comb .lbl-own { display: inline; }
  .game:when(--caught >= 1) .it-comb .req, .game:when(--u-comb) .it-comb .req { visibility: hidden; }

  /* 增益：會縮短的進度條就是計時器；動畫結束時增益也跟著結束。 */
  .game:when(--honey >= --c-rush and not --rush) .buy-rush:on(click) { --honey: set(var(--honey) - var(--c-rush)); --c-rush: set(round(var(--c-rush) * 1.5)); --rush: set(true); --rushmul: set(3); }
  .buy-rush { --attr-disabled: when(--honey < --c-rush or --rush); }
  .game:when(--rush) .t-rush { opacity: 1; }
  .game:when(--rush) .t-rush span { animation: drain 15s linear; }
  .t-rush span:on(animationend) { --rush: set(false); --rushmul: set(1); }
  .game:when(--rush) .buy-rush .lbl-buy { display: none; }
  .game:when(--rush) .buy-rush .lbl-on { display: inline; }
  .game:when(--honey >= --c-dance and not --dance) .buy-dance:on(click) { --honey: set(var(--honey) - var(--c-dance)); --c-dance: set(round(var(--c-dance) * 1.6)); --dance: set(true); }
  .buy-dance { --attr-disabled: when(--honey < --c-dance or --dance); }
  .game:when(--dance) .t-dance { opacity: 1; }
  .game:when(--dance) .t-dance span { animation: drain 20s linear; }
  .t-dance span:on(animationend) { --dance: set(false); }
  .game:when(--dance) .buy-dance .lbl-buy { display: none; }
  .game:when(--dance) .buy-dance .lbl-on { display: inline; }
  .game:when(--rush) .hive { filter: drop-shadow(0 0 2.4vmin oklch(80% .2 60)) drop-shadow(0 1.4vmin 1.6vmin oklch(45% .12 55 / .35)); }
  .game:when(--dance) .bee { animation-duration: calc(2s + sibling-index() * .25s); }

  /* VIP：密碼欄位用原生 pattern 檢查，值正確時 :valid 成立，於是 --vip-ok 打開；
     每按一次「啟用」就往上一級（×10 → ×100 → ×1000），「停用」則回到 ×1。
     自動連點是 VIP 的一部分：啟用 VIP 就會連點，等級越高連點越快；
     計時器的動畫每結束一次，就當作自動點了一下蜂巢（翻轉動畫名稱讓它重新開始）。 */
  .vip-pw:valid:on(input) { --vip-ok: set(true); }
  .vip-pw:invalid:on(input) { --vip-ok: set(false); }
  .vip-pw:on(keydown(Enter), prevent()) { }   /* 密碼欄位在表單裡：按 Enter 不要送出表單 */
  .vip-pw { bind: --pw; attr: data-pw var(--pw); }        /* 把輸入內容鏡射成屬性，才能分辨是哪一組密碼 */
  .game:has(.vip-pw[data-pw="fd"]) .vip-go:on(click) { --vmul: set(10); }
  .game:has(.vip-pw[data-pw="vip100"]) .vip-go:on(click) { --vmul: set(100); }
  .game:has(.vip-pw[data-pw="ming"]) .vip-go:on(click) { --vmul: set(1000); }
  .vip-go { --attr-disabled: when(not --vip-ok); }
  .vip-off:on(click) { --vmul: set(1); --vip-ok: set(false); }
  .vip-mul { content: var(--vmul); }
  .game:when(--vmul > 1) .vip-badge { display: inline-flex; }
  .game:when(--vmul > 1) .auto { animation: auto-a 200ms linear; }
  .game:when(--vmul >= 100) .auto { animation-duration: 100ms; }
  .game:when(--vmul >= 1000) .auto { animation-duration: 50ms; }
  .game:when(--auto-t and --vmul > 1) .auto { animation-name: auto-b; }

  /* 金蜂：每 6 秒慢速時鐘擲一次亂數；擲到 0（四分之一的機率）就會有金蜂飛過。
     抓到牠可獲得 30 秒的收益（至少 50），有了金色蜂巢則是三倍。 */
  .game:when(--gt) .spawner { animation-name: spawn-b; }
  .spawner:on(animationend) { --gt: toggle(); --g: set(random(0, 3, 1)); }
  .game:when(--g == 0) .golden { display: block; animation: fly-a 6s linear; }
  .game:when(--g == 0 and --gt) .golden { animation-name: fly-b; }
  .game:when(--g == 0) .golden:on(click) { --honey: set(var(--honey) + max(50, var(--rate) * 30) * var(--gmul)); --total: set(var(--total) + max(50, var(--rate) * 30) * var(--gmul)); --bonus: set(max(50, var(--rate) * 30) * var(--gmul)); --caught: increment(1); --g: set(9); }
  .game:changed(--caught) .banner { animation: banner 1.8s ease-out; }
  .bonus { content: var(--bonus); }

  /* 商店分頁：被選中的分頁與它的內容面板位置相同，因此 :nth-var() 同時符合兩者。 */
  .tab:on(click) { --tab: set(sibling-index()); }
  .tab { --attr-aria-selected: false; }
  .tab:nth-var(--tab) { --attr-aria-selected: true; }
  .panel:nth-var(--tab) { position: static; visibility: visible; pointer-events: auto; }
  .game:when(--honey >= --c-bee or --honey >= --c-flower or --honey >= --c-queen or --honey >= --c-keeper or --honey >= --c-factory) .tab-helpers .dot { opacity: 1; }
  .game:when(--honey >= --c-wings or --honey >= --c-jelly or (--n-bee >= 10 and not --u-pollen and --honey >= 1000) or (--n-flower >= 5 and not --u-seeds and --honey >= 5000) or (--n-queen >= 3 and not --u-court and --honey >= 50000) or (--n-keeper >= 3 and not --u-smoker and --honey >= 300000) or (--caught >= 1 and not --u-comb and --honey >= 10000)) .tab-upgrades .dot { opacity: 1; }
  .game:when((--honey >= --c-rush and not --rush) or (--honey >= --c-dance and not --dance)) .tab-boosts .dot { opacity: 1; }

  /* 場景會隨著你擁有的東西一起成長。 */
  .game:when(--n-bee >= 1) .b1,
  .game:when(--n-bee >= 2) .b2,
  .game:when(--n-bee >= 3) .b3,
  .game:when(--n-bee >= 4) .b4,
  .game:when(--n-bee >= 5) .b5,
  .game:when(--n-bee >= 6) .b6,
  .game:when(--n-bee >= 7) .b7,
  .game:when(--n-bee >= 8) .b8,
  .game:when(--n-bee >= 9) .b9,
  .game:when(--n-bee >= 10) .b10,
  .game:when(--n-bee >= 11) .b11,
  .game:when(--n-bee >= 12) .b12 { opacity: 1; scale: 1; }
  .game:when(--n-flower >= 1) .f1,
  .game:when(--n-flower >= 2) .f2,
  .game:when(--n-flower >= 3) .f3,
  .game:when(--n-flower >= 4) .f4,
  .game:when(--n-flower >= 5) .f5,
  .game:when(--n-flower >= 6) .f6,
  .game:when(--n-flower >= 7) .f7,
  .game:when(--n-flower >= 8) .f8,
  .game:when(--n-flower >= 9) .f9,
  .game:when(--n-flower >= 10) .f10 { opacity: 1; scale: 1; filter: none; }
  .game:when(--n-queen >= 1) .q1,
  .game:when(--n-queen >= 2) .q2,
  .game:when(--n-queen >= 3) .q3 { opacity: 1; translate: 0 0; }
  .game:when(--n-factory >= 1) .j1,
  .game:when(--n-factory >= 2) .j2,
  .game:when(--n-factory >= 3) .j3 { opacity: 1; scale: 1; }

  .game:when(--total >= 100) .m1 { --got: 1; }
  .game:when(--total >= 1000) .m2 { --got: 1; }
  .game:when(--total >= 10000) .m3 { --got: 1; }
  .game:when(--total >= 100000) .m4 { --got: 1; }
  .game:when(--total >= 1000000) .m5 { --got: 1; }
  .game:when(--total >= 10000000) .m6 { --got: 1; }

  /* 兩段式重設：先按一下準備，再按一次確認；點其他地方則取消。 */
  .reset:on(click) { --armed: set(true); }
  .save:on(outside(click)) { --armed: set(false); }
  .game:when(--armed) .reset { display: none; }
  .game:when(--armed) .confirm { display: inline-block; }
  .confirm:on(click) { --honey: set(0); --total: set(0); --power: set(1); --mult: set(1); --rate: set(0); --gmul: set(1); --clicks: set(0); --caught: set(0); --n-bee: set(0); --c-bee: set(15); --o-bee: set(1); --n-flower: set(0); --c-flower: set(100); --o-flower: set(6); --n-queen: set(0); --c-queen: set(1100); --o-queen: set(40); --n-keeper: set(0); --c-keeper: set(12000); --o-keeper: set(150); --n-factory: set(0); --c-factory: set(130000); --o-factory: set(600); --n-wings: set(0); --c-wings: set(50); --n-jelly: set(0); --c-jelly: set(500); --u-pollen: set(false); --u-seeds: set(false); --u-court: set(false); --u-smoker: set(false); --u-comb: set(false); --c-rush: set(200); --rush: set(false); --c-dance: set(500); --dance: set(false); --armed: set(false); --vmul: set(1); --vip-ok: set(false); --auto-t: set(false); --rushmul: set(1); }

  /* 數字以真正的文字呈現。 */
  .amount { content: var(--honey); }
  .rate { content: var(--rate); }
  .power { content: var(--power); }
  .clicks { content: var(--clicks); }
  .caught { content: var(--caught); }
  .n-bee { content: var(--n-bee); }
  .c-bee { content: var(--c-bee); }
  .o-bee { content: var(--o-bee); }
  .n-flower { content: var(--n-flower); }
  .c-flower { content: var(--c-flower); }
  .o-flower { content: var(--o-flower); }
  .n-queen { content: var(--n-queen); }
  .c-queen { content: var(--c-queen); }
  .o-queen { content: var(--o-queen); }
  .n-keeper { content: var(--n-keeper); }
  .c-keeper { content: var(--c-keeper); }
  .o-keeper { content: var(--o-keeper); }
  .n-factory { content: var(--n-factory); }
  .c-factory { content: var(--c-factory); }
  .o-factory { content: var(--o-factory); }
  .n-wings { content: var(--n-wings); }
  .c-wings { content: var(--c-wings); }
  .n-jelly { content: var(--n-jelly); }
  .c-jelly { content: var(--c-jelly); }
  .c-rush { content: var(--c-rush); }
  .c-dance { content: var(--c-dance); }

}