/* Game: Hộp quà bí mật */
.arcade-hop-qua .hq-title { margin: 0; color: var(--a-fg); font-size: clamp(1.6rem, 4vw, 2.3rem); text-align: center; }
.arcade-hop-qua .hq-opens { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.arcade-hop-qua .hq-opens[hidden] { display: none; }
.arcade-hop-qua .hq-dot { position: relative; width: 20px; height: 18px; border: 2px solid #1C1433; border-radius: 5px; background: var(--a-accent); box-shadow: 0 2px 0 #1C1433; transition: opacity .3s, transform .3s, background .3s; }
.arcade-hop-qua .hq-dot::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 4px; margin-left: -2px; background: var(--a-c1); }
.arcade-hop-qua .hq-dot.is-used { opacity: .35; transform: scale(.85); box-shadow: none; }
.arcade-hop-qua .hq-status { min-height: 1.65em; margin: 8px 0 6px; color: var(--a-fg); font-weight: 600; text-align: center; opacity: .92; text-wrap: balance; }

/* Lưới hộp */
.arcade-hop-qua .hq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(4px, 1.6vw, 18px) clamp(10px, 3.4vw, 36px); width: min(100%, 590px); margin-top: 6px; }
.arcade-hop-qua .hq-grid[data-n="3"] { width: min(100%, 610px); }
.arcade-hop-qua .hq-grid[data-n="9"] { width: min(100%, 450px); gap: 2px clamp(10px, 3vw, 28px); }

.arcade-hop-qua .hq-box { position: relative; display: block; width: 100%; aspect-ratio: 106 / 122; padding: 0; border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; cursor: pointer; container-type: inline-size; -webkit-tap-highlight-color: transparent; }
.arcade-hop-qua .hq-box:disabled { cursor: default; }
.arcade-hop-qua .hq-box:focus-visible { outline: 3px solid var(--a-accent); outline-offset: 2px; }
.arcade-hop-qua .hq-lift, .arcade-hop-qua .hq-float, .arcade-hop-qua .hq-shake { display: block; width: 100%; height: 100%; }
.arcade-hop-qua .hq-lift { position: relative; z-index: 1; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .4s, filter .4s; }
.arcade-hop-qua .hq-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arcade-hop-qua.is-dark .hq-box::before { content: ""; position: absolute; left: 50%; top: 58%; z-index: 0; width: 125%; aspect-ratio: 1.15; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a-accent) 26%, transparent), transparent); pointer-events: none; }
.arcade-hop-qua.is-dark .hq-box.is-peek::before { opacity: .4; }

/* Màu từ theme (JS gán --hq-body / --hq-rib / --hq-ink cho từng hộp) */
.arcade-hop-qua .hq-fill, .arcade-hop-qua .hq-in { fill: var(--hq-body, var(--a-c1)); }
.arcade-hop-qua .hq-rib { fill: var(--hq-rib, var(--a-accent)); }
.arcade-hop-qua .hq-pf { fill: var(--hq-ink, #fff); }
.arcade-hop-qua .hq-pat { opacity: .2; }
.arcade-hop-qua .hq-shadow { fill: rgba(12, 6, 30, .3); }
.arcade-hop-qua .hq-lid { transform-box: view-box; transform-origin: 60px 62px; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }

/* Nhún nhẹ khi chờ */
.arcade-hop-qua .hq-float { animation: hq-bob 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.73s); transform-origin: 50% 92%; }
@keyframes hq-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	22% { transform: translateY(-5px) rotate(0); }
	44% { transform: translateY(0) rotate(0); }
	52% { transform: translateY(-1px) rotate(-3.5deg); }
	60% { transform: translateY(-1px) rotate(3deg); }
	68% { transform: translateY(0) rotate(-1.5deg); }
	76% { transform: translateY(0) rotate(0); }
}
.arcade-hop-qua .hq-box:not(:disabled):hover .hq-lift,
.arcade-hop-qua .hq-box:not(:disabled):focus-visible .hq-lift { transform: translateY(-9px) scale(1.04); }
.arcade-hop-qua .hq-box:not(:disabled):active .hq-lift { transform: translateY(-2px) scale(.98); }
.arcade-hop-qua.is-busy .hq-box:not(.is-picked) .hq-lift { opacity: .7; }
.arcade-hop-qua.is-busy .hq-box:not(.is-picked) { cursor: progress; }

/* Lắc → mở */
.arcade-hop-qua .is-picked .hq-float, .arcade-hop-qua .is-peek .hq-float { animation: none; }
.arcade-hop-qua .is-shaking .hq-shake { animation: hq-shake .56s ease-in-out; transform-origin: 50% 92%; }
@keyframes hq-shake {
	0%, 100% { transform: none; }
	12% { transform: rotate(-8deg) scale(1.03); }
	26% { transform: rotate(7deg) scale(1.05); }
	40% { transform: rotate(-7deg) scale(1.05); }
	54% { transform: rotate(6deg) scale(1.06); }
	68% { transform: rotate(-4deg) scale(1.04, .96); }
	84% { transform: rotate(2deg) scale(1.06, .92); }
}
.arcade-hop-qua .is-open .hq-lid { animation: hq-lid-fly .85s cubic-bezier(.25, .8, .35, 1) forwards; }
@keyframes hq-lid-fly {
	0% { transform: none; opacity: 1; }
	16% { transform: translateY(4px) scale(1.04, .9); opacity: 1; }
	48% { transform: translate(10px, -60px) rotate(20deg); opacity: 1; }
	100% { transform: translate(38px, -104px) rotate(68deg) scale(.9); opacity: 0; }
}

/* Hào quang + lấp lánh */
.arcade-hop-qua .hq-glow { position: absolute; left: 50%; top: 35%; z-index: 0; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; }
.arcade-hop-qua .hq-glow i { display: block; width: 100%; height: 100%; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--hq-ray, var(--a-accent)) 70%, transparent), transparent 70%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hq-ray, var(--a-accent)) 60%, transparent) 0deg 9deg, transparent 9deg 30deg);
	-webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.arcade-hop-qua .is-lose { --hq-ray: #FFFFFF; }
.arcade-hop-qua .is-open .hq-glow { animation: hq-glow-in .7s .12s ease-out forwards; }
.arcade-hop-qua .is-open.is-lose .hq-glow { animation-name: hq-glow-soft; }
.arcade-hop-qua .is-open .hq-glow i { animation: hq-spin 16s linear infinite; }
@keyframes hq-glow-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes hq-glow-soft { to { opacity: .45; transform: translate(-50%, -50%) scale(.8); } }
@keyframes hq-spin { to { transform: rotate(360deg); } }

.arcade-hop-qua .hq-sparks { position: absolute; left: 50%; top: 37%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.arcade-hop-qua .hq-spark { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: var(--c, #fff); opacity: 0;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	animation: hq-spark .95s var(--d, 0ms) cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes hq-spark {
	0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; }
	65% { opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) scale(var(--s, 1)) rotate(120deg); opacity: 0; }
}

/* Nhãn quà */
.arcade-hop-qua .hq-prize { position: absolute; left: 50%; top: 25%; z-index: 3; box-sizing: border-box; width: max-content; max-width: 108%; padding: .34em .6em .26em; border: 2px solid #1C1433; border-radius: 12px; background: #fff; color: #1C1433;
	font: 800 clamp(12px, 13.5cqi, 23px)/1.06 var(--display, system-ui); text-align: center; overflow-wrap: anywhere; text-wrap: balance;
	box-shadow: 0 4px 0 #1C1433; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; pointer-events: none; }
.arcade-hop-qua .hq-prize.is-win { background: var(--a-accent); color: var(--a-accent-ink); }
.arcade-hop-qua .hq-prize.is-lose { background: #fff; color: #463D5E; }
.arcade-hop-qua .hq-prize.is-win::before, .arcade-hop-qua .hq-prize.is-win::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 1px #1C1433); animation: hq-twinkle 1.7s ease-in-out infinite; }
.arcade-hop-qua .hq-prize.is-win::before { top: -9px; left: -8px; }
.arcade-hop-qua .hq-prize.is-win::after { right: -7px; bottom: -8px; width: 9px; height: 9px; animation-delay: -.85s; }
@keyframes hq-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .4; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.arcade-hop-qua .is-open .hq-prize { visibility: visible; animation: hq-rise .75s .14s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes hq-rise {
	0% { transform: translate(-50%, 20%) scale(.25); opacity: 0; }
	55% { transform: translate(-50%, -78%) scale(1.1); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Các hộp còn lại: hé nắp, mờ đi, hiện quà "có thể có" */
.arcade-hop-qua .is-peek .hq-lift { opacity: .74; filter: saturate(.55) brightness(.92); }
.arcade-hop-qua .is-picked .hq-lift { transform: scale(1.06); }
.arcade-hop-qua .is-peek .hq-lid { transform: translate(-3px, -16px) rotate(-11deg); }
.arcade-hop-qua .is-peek .hq-prize { visibility: visible; top: 27%; background: rgba(255, 255, 255, .88); color: #463D5E; border-style: dashed; border-color: rgba(28, 20, 51, .5); box-shadow: none; font-size: clamp(11px, 11.5cqi, 19px); font-weight: 700; animation: hq-peek .45s .12s ease-out both; }
@keyframes hq-peek { from { transform: translate(-50%, -10%) scale(.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: .92; } }

/* Nút chơi lại */
.arcade-hop-qua .hq-again { min-width: 180px; min-height: 52px; margin-top: 18px; background: var(--a-accent); color: var(--a-accent-ink); border-color: #1C1433; box-shadow: 0 5px 0 #1C1433; font-size: 1.1rem; }
.arcade-hop-qua .hq-again:hover { color: var(--a-accent-ink); }
.arcade-hop-qua .hq-again[hidden] { display: none; }

@media (max-width: 640px) {
	.arcade-hop-qua .hq-status { font-size: .95rem; }
	.arcade-hop-qua .hq-grid { column-gap: 10px; row-gap: 14px; }
	.arcade-hop-qua .hq-prize { border-radius: 10px; box-shadow: 0 3px 0 #1C1433; }
}

/* Giảm chuyển động */
.arcade-hop-qua.is-reduced .hq-float, .arcade-hop-qua.is-reduced .hq-glow i,
.arcade-hop-qua.is-reduced .hq-prize.is-win::before, .arcade-hop-qua.is-reduced .hq-prize.is-win::after { animation: none; }
.arcade-hop-qua.is-reduced .hq-lift, .arcade-hop-qua.is-reduced .hq-lid { transition: none; }
.arcade-hop-qua.is-reduced .is-open .hq-lid { animation: none; opacity: 0; }
.arcade-hop-qua.is-reduced .is-open .hq-glow { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.arcade-hop-qua.is-reduced .is-open.is-lose .hq-glow { opacity: .45; }
.arcade-hop-qua.is-reduced .is-open .hq-prize { animation: none; opacity: 1; }
.arcade-hop-qua.is-reduced .is-peek .hq-prize { animation: none; opacity: .92; }
@media (prefers-reduced-motion: reduce) {
	.arcade-hop-qua .hq-float, .arcade-hop-qua .hq-glow i { animation: none; }
}