/*
 * ⭐ กิจกรรมแต้มชุดใหม่ — ขูดบัตร · ตู้กาชา · Plinko · หีบสมบัติ · ตู้คีบ + แผงโฮโลแกรม (000308 · 2026-10-15)
 *
 * ใช้ร่วม: หน้าผู้เล่น (`live-hub-fun.js`) + โหมดลองเล่นในหลังบ้าน (`game-designer.js`) — มาร์กอัปจาก `hub-arcade.js`
 * สีตามธีม: `--gt1 --gt2 --gt3` (hub-themes.css) · ไม่มีธีม = ม่วง/ทอง
 * ⚠️ 3 สำเนา (weblive · newweb-v2 · newwebbot-v2) ต้องตรงกันทุกไบต์ · คลาส `hax-*` · คีย์เฟรม `hax-*`
 */

.hax-ic { display: inline-grid; place-items: center; line-height: 1; }
.hax-empty { margin: 18px 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 13px; }

/* ══ แผงโฮโลแกรม ═══════════════════════════════════════════════ */
.hax-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 10px; }
.hax-holo {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border-radius: 12px; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gt1, #8b5cf6) 22%, rgba(10, 12, 30, .72)), rgba(6, 8, 20, .78));
  border: 1px solid color-mix(in srgb, var(--gt2, #22d3ee) 40%, transparent); box-shadow: inset 0 0 16px -6px var(--gt2, #22d3ee), 0 6px 18px -10px #000;
  animation: hax-in .45s cubic-bezier(.2, .8, .2, 1) backwards;
}
.hax-holo:nth-child(2) { animation-delay: .06s; }
.hax-holo:nth-child(3) { animation-delay: .12s; }
.hax-holo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
}
.hax-holo::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); animation: hax-scan 4.5s ease-in-out infinite;
}
.hax-holo__t { position: relative; display: grid; gap: 2px; min-width: 0; flex: 1; }
.hax-holo__t b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hax-holo__t small { font-size: 10px; line-height: 1.25; color: rgba(255, 255, 255, .7); }
.hax-holo__ring { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.hax-holo__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hax-holo__ring circle { fill: none; stroke-width: 4; }
.hax-holo__ring .t { stroke: rgba(255, 255, 255, .12); }
.hax-holo__ring .v { stroke: var(--gt2, #22d3ee); stroke-linecap: round; stroke-dashoffset: var(--full); filter: drop-shadow(0 0 4px var(--gt2, #22d3ee)); animation: hax-ring 1s .2s cubic-bezier(.2, .8, .2, 1) forwards; }
.hax-holo__ring b { position: relative; font-size: 9.5px; }
.hax-bar { position: relative; display: block; height: 6px; margin-top: 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hax-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; animation: hax-grow .9s .15s cubic-bezier(.2, .8, .2, 1) forwards;
  background: linear-gradient(90deg, var(--gt1, #8b5cf6), var(--gt2, #22d3ee)); box-shadow: 0 0 10px var(--gt2, #22d3ee);
}
.hax-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: hax-shimmer 1.8s linear infinite; }
.hax-bar.is-ok i { background: linear-gradient(90deg, #10b981, #6ee7b7); box-shadow: 0 0 10px #34d399; }
.hax-bar.is-bad i { background: linear-gradient(90deg, #ef4444, #fb7185); box-shadow: 0 0 10px #f43f5e; }
.hax-bar.is-gold i { background: linear-gradient(90deg, #f59e0b, #fde68a); box-shadow: 0 0 10px #fbbf24; }
.hax-bar.is-rare i { background: linear-gradient(90deg, #7c3aed, #f0abfc); box-shadow: 0 0 10px #c084fc; }
@media (max-width: 380px) { .hax-hud { grid-template-columns: 1fr 1fr; } .hax-hud .hax-holo:nth-child(3) { grid-column: 1 / -1; } }

/* ══ 🎟️ ขูดบัตร ════════════════════════════════════════════════ */
.hax-scratch { display: grid; place-items: center; padding: 6px 0 2px; }
.hax-ticket {
  position: relative; width: min(330px, 100%); padding: 12px; border-radius: 22px; color: #fff; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gt1, #f59e0b) 40%, #1a1030), #0e0a1c 70%);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), 0 0 40px -14px var(--gt2, #fde68a);
}
.hax-ticket::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; padding: 2px;
  background: conic-gradient(from var(--hax-a, 0deg), #fde68a, #f472b6, #67e8f9, #a78bfa, #fde68a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hax-hue 4s linear infinite;
}
.hax-ticket.is-new { animation: hax-print .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.hax-ticket__head { display: grid; justify-items: center; gap: 1px; margin-bottom: 8px; }
.hax-ticket__head b {
  font-size: 20px; font-weight: 900; letter-spacing: .14em;
  background: linear-gradient(90deg, #fff6c9, var(--gt2, #fde68a), #fff, #f9a8d4, #fff6c9); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hax-shine 3s linear infinite;
}
.hax-ticket__head small { font-size: 11px; color: rgba(255, 255, 255, .72); }
.hax-ticket__area { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fdf8ec; }
.hax-ticket__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }
.hax-cell {
  --i: 0; position: relative; display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 12px; color: #2a1d05;
  background: radial-gradient(circle at 50% 35%, #fff, #fef3c7); border: 1px dashed #e5c97a; text-align: center; padding: 2px;
}
.hax-cell i { font-style: normal; font-size: 26px; font-weight: 900; color: #d4b25c; }
.hax-cell__a { width: 52%; aspect-ratio: 1; object-fit: contain; font-size: 30px; }
.hax-cell small { font-size: 9.5px; font-weight: 800; line-height: 1.1; }
.hax-cell.is-deco .hax-cell__a { font-size: 34px; opacity: .85; }
.hax-cell.is-win { animation: hax-winc 1s ease-in-out infinite; border: 2px solid #f59e0b; background: radial-gradient(circle, #fff7d1, #fcd34d); box-shadow: 0 0 18px #f59e0b; z-index: 1; }
.hax-ticket.is-lost .hax-cell { filter: saturate(.6); }
.hax-ticket__cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; transition: opacity .5s ease; border-radius: 16px; }
.hax-ticket__cover.is-gone { opacity: 0; pointer-events: none; }
.hax-ticket__hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; pointer-events: none; white-space: nowrap;
  padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(20, 12, 40, .78); box-shadow: 0 6px 16px -6px #000;
  transition: opacity .4s ease, transform .4s ease;
}
.hax-ticket__hint.is-go { animation: hax-nudge 1s ease-in-out 2; }
.hax-ticket__hint.is-hide { opacity: 0; transform: translate(-50%, 10px); }
.hax-ticket__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 10.5px; color: rgba(255, 255, 255, .6); letter-spacing: .08em; }
.hax-auto { border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0; color: #1c1503; background: linear-gradient(180deg, #fff1b0, var(--gt2, #f5c542)); }
.hax-auto[hidden] { display: none; }
.hax-dust { position: absolute; z-index: 3; width: 6px; height: 6px; margin: -3px; border-radius: 2px; pointer-events: none; background: #e4e4e7; animation: hax-dust .7s ease-out forwards; }

/* ══ 🥚 ตู้กาชา ════════════════════════════════════════════════ */
.hax-gacha { position: relative; display: grid; justify-items: center; gap: 10px; padding: 4px 0; }
.hax-gm { position: relative; width: 210px; display: grid; justify-items: center; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55)); }
.hax-gm__dome {
  position: relative; z-index: 1; width: 196px; height: 196px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--gt2, #22d3ee) 30%, transparent), transparent 60%), radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .02));
  border: 5px solid color-mix(in srgb, var(--gt2, #a5f3fc) 70%, #fff); box-shadow: inset 0 -16px 30px rgba(0, 0, 0, .35), 0 0 28px -6px var(--gt2, #22d3ee);
}
.hax-gm__balls { position: absolute; inset: 0; }
.hax-cap {
  position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px; border-radius: 50%; transform: scale(var(--s));
  background: linear-gradient(180deg, var(--c1) 0 48%, rgba(0, 0, 0, .18) 48% 52%, var(--c2) 52%);
  box-shadow: inset -4px -5px 8px rgba(0, 0, 0, .22), inset 4px 4px 6px rgba(255, 255, 255, .55);
  animation: hax-bob 2.6s ease-in-out infinite; animation-delay: var(--d);
}
.hax-gm.is-turn .hax-cap { animation: hax-mix .42s ease-in-out infinite; animation-delay: var(--d); }
.hax-gm__glare { position: absolute; left: 18%; top: 10%; width: 32%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .45); filter: blur(4px); transform: rotate(-25deg); }
.hax-gm__body {
  position: relative; width: 190px; height: 118px; margin-top: -14px; border-radius: 18px 18px 26px 26px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--gt1, #ec4899) 85%, #fff), color-mix(in srgb, var(--gt1, #ec4899) 70%, #000));
  box-shadow: inset 0 6px 14px rgba(255, 255, 255, .35), inset 0 -10px 16px rgba(0, 0, 0, .3);
}
.hax-gm__logo { position: absolute; left: 66px; top: 24px; display: grid; line-height: 1; font-weight: 900; letter-spacing: .1em; font-size: 15px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 0 12px var(--gt2, #fde68a); }
.hax-gm__logo small { font-size: 10px; letter-spacing: .3em; opacity: .85; margin-top: 3px; }
/* ⭐ 2026-10-16 ตราบอท CPBot บนตัวตู้ (ตาเรืองแสงกะพริบ) */
.hax-gm__emblem {
  position: absolute; left: 10px; top: 16px; width: 50px; height: 50px; border-radius: 50%;
  background: url("hub-bot-head.webp") center 58% / 120% auto no-repeat, radial-gradient(circle at 50% 40%, #1f2937, #030712 75%);
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 16px #4ade80; animation: hax-emblem 2.4s ease-in-out infinite;
}
.hax-gm.is-turn .hax-gm__emblem { animation-duration: .5s; }
.hax-cap::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: url("hub-bot-head.webp") center 60% / 130% auto no-repeat; opacity: .9; }
.hax-capsule__a.hax-ic { font-size: 52px; }
.hax-gm__lights { position: absolute; left: 10px; right: 10px; top: 6px; display: flex; justify-content: space-between; }
.hax-gm__lights i { width: 8px; height: 8px; border-radius: 50%; background: #fff7c2; box-shadow: 0 0 8px #fde047; animation: hax-blink 1.2s ease-in-out infinite; animation-delay: var(--d); }
.hax-gm.is-turn .hax-gm__lights i { animation-duration: .3s; }
.hax-gm__crank {
  position: absolute; right: 16px; top: 22px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #e2e8f0 50%, #94a3b8); box-shadow: 0 4px 0 rgba(0, 0, 0, .25), inset 0 -3px 6px rgba(0, 0, 0, .2);
}
.hax-gm__crank i { width: 40px; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.hax-gm.is-turn .hax-gm__crank { animation: hax-crank .75s cubic-bezier(.5, 0, .5, 1) infinite; }
.hax-gm__chute { position: absolute; left: 50%; bottom: 12px; width: 62px; height: 34px; transform: translateX(-50%); border-radius: 10px 10px 16px 16px; background: radial-gradient(ellipse at 50% 0, #000, #1e1b2e); box-shadow: inset 0 6px 10px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .3); }
.hax-gacha__out { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.hax-capsule { position: relative; width: 132px; height: 132px; animation: hax-drop 1s cubic-bezier(.25, 1.4, .5, 1) both; }
.hax-capsule__top, .hax-capsule__bot { position: absolute; left: 0; right: 0; height: 50%; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .7s; }
.hax-capsule__top { top: 0; border-radius: 66px 66px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, #fff), var(--c1)); box-shadow: inset 6px 10px 14px rgba(255, 255, 255, .5); }
.hax-capsule__bot { bottom: 0; border-radius: 0 0 66px 66px; background: linear-gradient(180deg, var(--c2), color-mix(in srgb, var(--c2) 75%, #94a3b8)); box-shadow: inset -6px -10px 14px rgba(0, 0, 0, .15); }
.hax-capsule__burst { position: absolute; inset: -60%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .95), color-mix(in srgb, var(--c1) 70%, transparent) 30%, transparent 62%); }
.hax-capsule__prize { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; opacity: 0; transform: scale(.3); transition: transform .7s .15s cubic-bezier(.2, 1.5, .4, 1), opacity .4s .15s; text-align: center; }
.hax-capsule__a { width: 70px; height: 70px; object-fit: contain; font-size: 52px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.hax-capsule__prize b { padding: 3px 10px; border-radius: 99px; font-size: 13px; color: #fff; background: rgba(15, 10, 35, .82); white-space: nowrap; }
.hax-capsule__tag { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 15px; opacity: 0; transition: opacity .4s .3s; text-shadow: 0 0 12px currentColor; }
.hax-capsule.is-r1 .hax-capsule__tag { color: #e9d5ff; }
.hax-capsule.is-r2 .hax-capsule__tag { color: #fde68a; }
.hax-capsule.is-r1::before, .hax-capsule.is-r2::before {
  content: ""; position: absolute; inset: -26%; border-radius: 50%; z-index: -1; filter: blur(10px); animation: hax-spin 3s linear infinite;
  background: conic-gradient(#a855f7, #f0abfc, #6366f1, #a855f7);
}
.hax-capsule.is-r2::before { background: conic-gradient(#fbbf24, #f472b6, #67e8f9, #a3e635, #fbbf24); inset: -38%; }
.hax-capsule.is-wobble { animation: hax-wobble .3s ease-in-out infinite; }
.hax-capsule.is-open { animation: none; }
.hax-capsule.is-open .hax-capsule__top { transform: translate(-40%, -95%) rotate(-38deg); opacity: .0; }
.hax-capsule.is-open .hax-capsule__bot { transform: translate(30%, 90%) rotate(24deg); opacity: 0; }
.hax-capsule.is-open .hax-capsule__burst { animation: hax-burst .9s ease-out both; }
.hax-capsule.is-open .hax-capsule__prize { opacity: 1; transform: scale(1); }
.hax-capsule.is-open .hax-capsule__tag { opacity: 1; }
.hax-set { width: 100%; display: grid; gap: 6px; padding: 9px 10px; border-radius: 14px; background: rgba(8, 8, 24, .55); border: 1px solid rgba(192, 132, 252, .35); color: #fff; }
.hax-set__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
.hax-set__head small { color: rgba(255, 255, 255, .75); }
.hax-set__head small b { color: #fde68a; }
.hax-set__head em { margin-left: auto; font-style: normal; font-size: 11px; color: #c4b5fd; }
.hax-set__row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.hax-piece {
  flex: none; display: grid; justify-items: center; gap: 2px; width: 56px; padding: 6px 2px; border-radius: 12px; text-align: center;
  background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .2); animation: hax-in .4s backwards; animation-delay: calc(var(--i) * 50ms);
}
.hax-piece i { font-style: normal; font-size: 18px; font-weight: 900; color: rgba(255, 255, 255, .35); height: 28px; display: grid; place-items: center; }
.hax-piece__a { width: 28px; height: 28px; object-fit: contain; font-size: 22px; }
.hax-piece small { font-size: 9px; color: rgba(255, 255, 255, .7); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hax-piece.is-on { border: 1px solid #c084fc; background: color-mix(in srgb, #a855f7 22%, transparent); box-shadow: 0 0 12px -2px #c084fc; }

/* ══ 🔮 Plinko ═════════════════════════════════════════════════ */
.hax-plinko { display: grid; place-items: center; padding: 4px 0; }
.hax-pl {
  position: relative; width: min(360px, 100%); aspect-ratio: 1 / 1.02; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--gt2, #22d3ee) 26%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--gt3, #0b1020) 70%, #000), color-mix(in srgb, var(--gt1, #3b82f6) 25%, #050814));
  border: 1px solid color-mix(in srgb, var(--gt2, #22d3ee) 45%, transparent); box-shadow: inset 0 0 40px -10px var(--gt2, #22d3ee), 0 20px 40px -18px #000;
}
.hax-pl::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 20px 20px; animation: hax-gridmove 6s linear infinite; }
.hax-pl__glow { --bx: -50%; position: absolute; left: 50%; top: -30%; width: 120%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse, color-mix(in srgb, var(--gt2, #22d3ee) 30%, transparent), transparent 70%); animation: hax-breathe 3s ease-in-out infinite; }
.hax-pl__drop { position: absolute; left: 50%; top: 1%; transform: translateX(-50%); font-size: 12px; color: var(--gt2, #67e8f9); text-shadow: 0 0 8px currentColor; animation: hax-nudge 1.2s ease-in-out infinite; }
.hax-pl.is-arm .hax-pl__drop { animation-duration: .35s; }
.hax-peg { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #e0f2fe; box-shadow: 0 0 6px var(--gt2, #67e8f9), 0 0 12px color-mix(in srgb, var(--gt2, #67e8f9) 60%, transparent); }
.hax-peg.is-hit { animation: hax-peg .45s ease-out; }
.hax-slot {
  position: absolute; top: 86%; height: 13%; transform: translateX(-50%); display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 75%, #fff), color-mix(in srgb, var(--c) 70%, #000)); color: #fff; text-align: center; overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 10px -2px var(--c);
}
.hax-slot.is-none { background: linear-gradient(180deg, #475569, #1e293b); box-shadow: none; }
.hax-slot__a { width: 60%; max-width: 22px; aspect-ratio: 1; object-fit: contain; font-size: 13px; }
.hax-slot small { font-size: 7.5px; font-weight: 800; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1px; }
.hax-slot.is-hit { animation: hax-slot .9s ease-out; z-index: 2; }
.hax-ball {
  position: absolute; z-index: 3; left: 50%; top: 1%; width: calc(var(--dx) * .5); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fde68a 35%, #f59e0b 70%, #92400e); box-shadow: 0 0 12px #fbbf24, 0 0 26px color-mix(in srgb, #fbbf24 60%, transparent);
}
.hax-ball[hidden] { display: none; }
.hax-ball.is-in { animation: hax-pop .6s ease-out; }

/* ══ 🗝️ หีบสมบัติ ═══════════════════════════════════════════════ */
.hax-chests { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 14px 0 6px; }
.hax-chest {
  --m1: #c2773a; --m2: #7c3f16; --gl: #fb923c; --i: 0;
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px 8px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: #fff;
  background: rgba(10, 8, 24, .45); transition: transform .45s cubic-bezier(.2, 1.2, .4, 1), opacity .4s, filter .4s; animation: hax-in .5s backwards; animation-delay: calc(var(--i) * 90ms);
}
.hax-chest.is-t2 { --m1: #e2e8f0; --m2: #64748b; --gl: #a5f3fc; }
.hax-chest.is-t3 { --m1: #fcd34d; --m2: #b45309; --gl: #fde047; }
.hax-chest b { font-size: 12.5px; }
.hax-chest small { font-size: 11px; color: #fde68a; font-weight: 800; }
.hax-chest em { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .7); }
.hax-chest:disabled { cursor: default; }
.hax-chest__aura { position: absolute; left: 50%; top: 40px; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gl) 55%, transparent), transparent 65%); animation: hax-breathe 2.4s ease-in-out infinite; pointer-events: none; }
.hax-chest__box { position: relative; width: 84px; height: 72px; margin: 8px 0 4px; perspective: 300px; animation: hax-float 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.hax-chest__lid {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 2; border-radius: 30px 30px 6px 6px; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--m1) 80%, #fff), var(--m1) 55%, var(--m2)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px color-mix(in srgb, var(--m2) 70%, #000);
}
.hax-chest__lid i { position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: linear-gradient(135deg, #fff, #f0abfc 40%, #a855f7); box-shadow: 0 0 10px #f0abfc; animation: hax-blink 1.6s ease-in-out infinite; }
.hax-chest__body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 1; border-radius: 6px 6px 10px 10px;
  background: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--m2) 80%, #000) 18px 22px), linear-gradient(180deg, var(--m1), var(--m2));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 0 0 2px color-mix(in srgb, var(--m2) 70%, #000), 0 10px 18px -8px #000;
}
.hax-chest__body i { position: absolute; left: 50%; top: 6px; width: 16px; height: 18px; margin-left: -8px; border-radius: 4px; background: linear-gradient(180deg, #fef3c7, #d97706); box-shadow: 0 0 0 2px rgba(0, 0, 0, .25); }
.hax-chest__body i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: #3f2a06; }
.hax-chest__rays { position: absolute; left: 50%; top: 20px; width: 220px; height: 220px; margin: -110px 0 0 -110px; z-index: 0; opacity: 0; pointer-events: none; transform: scale(.2);
  background: repeating-conic-gradient(color-mix(in srgb, var(--gl) 70%, transparent) 0 8deg, transparent 8deg 20deg); -webkit-mask-image: radial-gradient(circle, #000, transparent 65%); mask-image: radial-gradient(circle, #000, transparent 65%); }
.hax-chest__item { position: absolute; left: 50%; top: 18px; z-index: 3; display: grid; justify-items: center; gap: 3px; transform: translate(-50%, 0) scale(.2); opacity: 0; pointer-events: none; }
.hax-chest__a { width: 52px; height: 52px; object-fit: contain; font-size: 40px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.hax-chest__item b { white-space: nowrap; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(10, 6, 30, .85); }
.hax-chest:not(:disabled):hover { transform: translateY(-4px) scale(1.04); }
.hax-chest.is-fade { opacity: .22; filter: grayscale(.6); transform: scale(.88); }
.hax-chest.is-chosen { transform: scale(1.14); z-index: 2; }
.hax-chest.is-shake .hax-chest__box { animation: hax-rattle .16s linear infinite; }
.hax-chest.is-open .hax-chest__lid { transform: rotateX(118deg) translateY(-2px); }
.hax-chest.is-open .hax-chest__rays { animation: hax-rays 2.8s ease-out forwards; }
.hax-chest.is-open .hax-chest__item { animation: hax-rise .9s .2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.hax-chest.is-empty .hax-chest__rays { display: none; }

/* ══ 🧸 ตู้คีบ ═════════════════════════════════════════════════ */
.hax-claw { display: grid; justify-items: center; gap: 10px; padding: 4px 0; }
.hax-cm { width: min(340px, 100%); border-radius: 22px; padding: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--gt1, #ec4899) 75%, #fff), color-mix(in srgb, var(--gt1, #ec4899) 60%, #000)); box-shadow: 0 24px 46px -20px #000, inset 0 2px 0 rgba(255, 255, 255, .4); }
.hax-cm__marquee { position: relative; display: grid; place-items: center; height: 34px; margin-bottom: 7px; border-radius: 14px; background: #120a24; overflow: hidden; }
.hax-cm__marquee b { position: relative; z-index: 1; font-size: 13px; letter-spacing: .3em; color: #fff; text-shadow: 0 0 10px var(--gt2, #f0abfc), 0 0 22px var(--gt2, #f0abfc); animation: hax-flicker 3s infinite; }
.hax-cm__bulbs { position: absolute; inset: 3px 6px; display: flex; justify-content: space-between; align-items: flex-end; }
.hax-cm__bulbs i { width: 5px; height: 5px; border-radius: 50%; background: #fde047; box-shadow: 0 0 6px #fde047; animation: hax-blink .9s ease-in-out infinite; }
.hax-cm__bulbs i:nth-child(odd) { animation-delay: .45s; }
.hax-cm__glass {
  position: relative; height: 270px; border-radius: 14px; overflow: hidden; touch-action: none;
  background: linear-gradient(180deg, rgba(186, 230, 253, .16), rgba(14, 10, 40, .6) 70%), radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--gt2, #22d3ee) 40%, transparent), transparent 60%), #140c2a;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 -20px 40px rgba(0, 0, 0, .4);
}
.hax-cm__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 38%, transparent 46%); animation: hax-scan 6s ease-in-out infinite; }
.hax-cm__rail { position: absolute; left: 6px; right: 6px; top: 6px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #e2e8f0, #64748b); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.hax-cm__claw { position: absolute; z-index: 3; top: 10px; left: 50%; width: 0; display: grid; justify-items: center; }
.hax-cm__cable { display: block; width: 3px; height: 26px; margin-left: -1.5px; background: linear-gradient(90deg, #94a3b8, #f1f5f9, #94a3b8); transition: height 1.1s cubic-bezier(.45, 0, .55, 1); }
.hax-cm__claw.is-down .hax-cm__cable { height: 176px; }
.hax-cm__head { position: relative; width: 46px; height: 34px; margin-left: -23px; }
.hax-cm__head::before { content: ""; position: absolute; left: 50%; top: 0; width: 26px; height: 14px; margin-left: -13px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #f8fafc, #94a3b8); box-shadow: 0 0 10px var(--gt2, #67e8f9); }
.hax-cm__head > i { position: absolute; top: 10px; width: 6px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, #e2e8f0, #475569); transition: transform .35s ease; }
.hax-cm__head > i.l { left: 8px; transform-origin: 50% 0; transform: rotate(28deg); }
.hax-cm__head > i.r { right: 8px; transform-origin: 50% 0; transform: rotate(-28deg); }
.hax-cm__claw.is-close .hax-cm__head > i.l { transform: rotate(4deg); }
.hax-cm__claw.is-close .hax-cm__head > i.r { transform: rotate(-4deg); }
.hax-cm__claw.is-drop .hax-cm__head > i.l { transform: rotate(34deg); }
.hax-cm__claw.is-drop .hax-cm__head > i.r { transform: rotate(-34deg); }
.hax-cm__claw:not(.is-down) .hax-cm__head { animation: hax-sway 2.4s ease-in-out infinite; }
.hax-cm__hold { position: absolute; left: 50%; top: 16px; width: 48px; height: 84px; margin-left: -24px; display: grid; justify-items: center; opacity: 0; }
.hax-cm__claw.has-item .hax-cm__hold { opacity: 1; }
.hax-cm__claw.is-slip .hax-cm__hold { animation: hax-slip .65s cubic-bezier(.5, 0, 1, .5) forwards; }
.hax-cm__claw.is-drop .hax-cm__hold { animation: hax-chute .8s cubic-bezier(.5, 0, 1, .5) forwards; }
.hax-hold__a { width: 74%; height: 74%; object-fit: contain; font-size: 24px; }
.hax-cm__pile { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
/* ⭐ 2026-10-16 ของในตู้ = บอท CPBot ท่าสุ่ม (เอียง/นอน/กลับด้าน/ขนาดต่างกัน) */
.hax-toy {
  position: absolute; left: var(--x); bottom: var(--y); width: 46px; height: 82px; margin-left: -23px; display: block;
  transform: rotate(var(--r)) scale(var(--s, 1)) scaleX(var(--f, 1)); transform-origin: 50% 70%; transition: opacity .2s;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55)); animation: hax-fadein .4s backwards; animation-delay: calc(var(--i) * 40ms);
}
.hax-toy__bot { display: block; width: 100%; height: 100%; background: url("hub-bot.webp") center / contain no-repeat; }
.hax-cm__hold .hax-toy__bot { width: 44px; height: 78px; margin-top: 6px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.hax-toy.is-gone { opacity: 0; }
.hax-toy.is-bounce { animation: hax-thud .6s ease-out; }
.hax-cm__chute { position: absolute; left: 2%; bottom: 0; width: 20%; height: 32%; display: grid; place-items: end center; padding-bottom: 6px; border-radius: 10px 10px 0 0; border: 2px dashed color-mix(in srgb, var(--gt2, #fde68a) 60%, transparent); border-bottom: 0; background: rgba(0, 0, 0, .35); }
.hax-cm__chute b { font-size: 9.5px; color: rgba(255, 255, 255, .75); }
.hax-cm__glass.is-prize .hax-cm__chute { animation: hax-chuteglow .9s ease-out 2; }
.hax-cm__ctl { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; width: min(340px, 100%); }
.hax-cm__btn { height: 40px; border: 0; border-radius: 50%; cursor: pointer; font-size: 15px; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gt2, #f0abfc) 70%, #fff), var(--gt1, #a855f7)); box-shadow: 0 4px 0 rgba(0, 0, 0, .35); touch-action: none; }
.hax-cm__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hax-cm__range { width: 100%; accent-color: var(--gt2, #f0abfc); }
.hax-claw.is-busy .hax-cm__ctl { opacity: .45; pointer-events: none; }

/* ══ ไอคอนเคลื่อนไหวบนแบนเนอร์ (56×56) ══════════════════════════ */
.hax-mini { position: relative; display: block; width: 56px; height: 56px; }
.hax-mini--scratch i { position: absolute; inset: 8px 2px; border-radius: 8px; background: linear-gradient(135deg, #fde68a, #f472b6, #67e8f9); box-shadow: 0 6px 12px -4px #000; }
.hax-mini--scratch b { position: absolute; top: 18px; width: 14px; height: 20px; display: grid; place-items: center; font-size: 11px; color: #3f2a06; border-radius: 4px; background: #d4d4d8; animation: hax-scratchm 2.4s ease-in-out infinite; }
.hax-mini--scratch b:nth-of-type(1) { left: 6px; }
.hax-mini--scratch b:nth-of-type(2) { left: 21px; animation-delay: .4s; }
.hax-mini--scratch b:nth-of-type(3) { left: 36px; animation-delay: .8s; }
.hax-mini--gacha::before { content: ""; position: absolute; left: 6px; top: 2px; width: 44px; height: 38px; border-radius: 50%; border: 3px solid #a5f3fc; background: rgba(255, 255, 255, .1); }
.hax-mini--gacha::after { content: ""; position: absolute; left: 9px; bottom: 2px; width: 38px; height: 18px; border-radius: 6px 6px 10px 10px; background: linear-gradient(180deg, #f472b6, #be185d); }
.hax-mini--gacha i { position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #fbbf24 50%, #fff 50%); animation: hax-bob 1.4s ease-in-out infinite; }
.hax-mini--gacha i:nth-child(1) { left: 14px; top: 20px; }
.hax-mini--gacha i:nth-child(2) { left: 25px; top: 14px; background: linear-gradient(180deg, #38bdf8 50%, #fff 50%); animation-delay: -.5s; }
.hax-mini--gacha i:nth-child(3) { left: 33px; top: 22px; background: linear-gradient(180deg, #a78bfa 50%, #fff 50%); animation-delay: -1s; }
.hax-mini--gacha em { position: absolute; z-index: 2; right: 4px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: #fde047; animation: hax-blink .8s infinite; }
.hax-mini--plinko i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e0f2fe; box-shadow: 0 0 5px #67e8f9; }
.hax-mini--plinko i:nth-child(1) { left: 26px; top: 14px; }
.hax-mini--plinko i:nth-child(2) { left: 19px; top: 25px; }
.hax-mini--plinko i:nth-child(3) { left: 33px; top: 25px; }
.hax-mini--plinko i:nth-child(4) { left: 12px; top: 36px; }
.hax-mini--plinko i:nth-child(5) { left: 26px; top: 36px; }
.hax-mini--plinko i:nth-child(6) { left: 40px; top: 36px; }
.hax-mini--plinko em { position: absolute; left: 25px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f59e0b); box-shadow: 0 0 8px #fbbf24; animation: hax-plinkom 2s cubic-bezier(.45, 0, .9, .6) infinite; }
.hax-mini--chest i { position: absolute; left: 8px; bottom: 6px; width: 40px; height: 22px; border-radius: 4px 4px 7px 7px; background: linear-gradient(180deg, #fcd34d, #b45309); box-shadow: 0 6px 10px -4px #000; }
.hax-mini--chest em { position: absolute; left: 8px; top: 16px; width: 40px; height: 14px; border-radius: 14px 14px 3px 3px; background: linear-gradient(180deg, #fde68a, #d97706); transform-origin: 50% 100%; animation: hax-lidm 2.6s ease-in-out infinite; }
.hax-mini--chest b { position: absolute; left: 22px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff, #fde047 40%, transparent 70%); opacity: 0; animation: hax-glintm 2.6s ease-in-out infinite; }
.hax-mini--claw { animation: hax-sway 2.2s ease-in-out infinite; transform-origin: 50% 0; }
.hax-mini--claw em { position: absolute; left: 27px; top: 0; width: 2px; height: 22px; background: #cbd5e1; }
.hax-mini--claw i { position: absolute; left: 18px; top: 20px; width: 20px; height: 10px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #f8fafc, #94a3b8); }
.hax-mini--claw b { position: absolute; left: 18px; top: 27px; width: 20px; height: 30px; background: url("hub-bot.webp") center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }

/* ══ คีย์เฟรม ══════════════════════════════════════════════════ */
@property --hax-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hax-hue { to { --hax-a: 360deg; } }
@keyframes hax-fadein { from { opacity: 0; } }
@keyframes hax-emblem { 0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 10px #4ade80; } 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 24px #4ade80; } }
@keyframes hax-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hax-scan { 0%, 40% { transform: translateX(0); } 100% { transform: translateX(420%); } }
@keyframes hax-ring { to { stroke-dashoffset: var(--off); } }
@keyframes hax-grow { from { width: 0; } to { width: var(--w); } }
@keyframes hax-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes hax-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes hax-print { from { opacity: 0; transform: translateY(40px) rotateX(40deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes hax-winc { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hax-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -5px); } }
@keyframes hax-dust { to { opacity: 0; transform: translate(var(--dx), 40px) rotate(160deg); } }
@keyframes hax-bob { 0%, 100% { transform: scale(var(--s, 1)) translateY(0); } 50% { transform: scale(var(--s, 1)) translateY(-5px); } }
@keyframes hax-mix { 0% { transform: translate(0, 0) scale(var(--s)); } 25% { transform: translate(14px, -46px) rotate(90deg) scale(var(--s)); } 50% { transform: translate(-12px, -20px) rotate(180deg) scale(var(--s)); } 75% { transform: translate(8px, -60px) rotate(270deg) scale(var(--s)); } 100% { transform: translate(0, 0) rotate(360deg) scale(var(--s)); } }
@keyframes hax-crank { to { transform: rotate(360deg); } }
@keyframes hax-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hax-drop { 0% { opacity: 0; transform: translate(0, 120px) scale(.25); } 60% { opacity: 1; transform: translate(0, -18px) scale(1.05); } 100% { transform: none; } }
@keyframes hax-wobble { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) scale(1.04); } }
@keyframes hax-burst { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hax-spin { to { transform: rotate(360deg); } }
@keyframes hax-gridmove { to { background-position: 0 20px, 20px 0; } }
@keyframes hax-breathe { 0%, 100% { opacity: .7; transform: translateX(var(--bx, 0)) scale(1); } 50% { opacity: 1; transform: translateX(var(--bx, 0)) scale(1.08); } }
@keyframes hax-peg { 0% { transform: scale(2.2); background: #fff; box-shadow: 0 0 16px #fff, 0 0 30px var(--gt2, #67e8f9); } 100% { transform: scale(1); } }
@keyframes hax-slot { 0% { transform: translateX(-50%) scale(1); } 30% { transform: translateX(-50%) translateY(4px) scale(1.18); filter: brightness(1.6); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes hax-pop { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.8); opacity: .6; } 100% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
@keyframes hax-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hax-rattle { 0% { transform: rotate(-4deg) translateX(-2px); } 50% { transform: rotate(4deg) translateX(2px); } 100% { transform: rotate(-4deg) translateX(-2px); } }
@keyframes hax-rays { 0% { opacity: 0; transform: scale(.2) rotate(0); } 20% { opacity: 1; } 100% { opacity: .85; transform: scale(1) rotate(90deg); } }
@keyframes hax-rise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.2); } 100% { opacity: 1; transform: translate(-50%, -64px) scale(1); } }
@keyframes hax-flicker { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .4; } }
@keyframes hax-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes hax-slip { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(150px) rotate(120deg); opacity: 0; } }
@keyframes hax-chute { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(190px) scale(.8); opacity: 0; } }
@keyframes hax-thud { 0% { transform: rotate(var(--r)) translateY(-40px); } 60% { transform: rotate(var(--r)) translateY(4px); } 100% { transform: rotate(var(--r)); } }
@keyframes hax-chuteglow { 0% { box-shadow: 0 0 0 0 var(--gt2, #fde68a); } 50% { box-shadow: 0 0 30px 6px var(--gt2, #fde68a); background: color-mix(in srgb, var(--gt2, #fde68a) 30%, transparent); } 100% { box-shadow: none; } }
@keyframes hax-scratchm { 0%, 30% { background: #d4d4d8; color: transparent; } 60%, 100% { background: #fef3c7; color: #3f2a06; } }
@keyframes hax-plinkom { 0% { transform: translate(0, 0); } 30% { transform: translate(-7px, 12px); } 60% { transform: translate(0, 24px); } 100% { transform: translate(7px, 46px); opacity: 0; } }
@keyframes hax-lidm { 0%, 40%, 100% { transform: rotateX(0); } 60%, 80% { transform: rotateX(70deg) translateY(-4px); } }
@keyframes hax-glintm { 0%, 50%, 100% { opacity: 0; transform: translateY(0); } 70% { opacity: 1; transform: translateY(-10px) scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
  .hax-holo::after, .hax-ticket::before, .hax-ticket__head b, .hax-cap, .hax-gm__lights i, .hax-pl::before, .hax-pl__glow, .hax-pl__drop,
  .hax-chest__aura, .hax-chest__box, .hax-chest__lid i, .hax-cm__shine, .hax-cm__bulbs i, .hax-cm__marquee b, .hax-cm__head, .hax-mini, .hax-mini * { animation: none !important; }
}