/* WizPlayo - giao diện 8 kiểu chơi "trò chơi": phân loại, lật thẻ, núm xoay, chạm điểm, tô ô, gom đủ, săn bong bóng, tô nét.
   Mọi hoạt cảnh dùng transform/opacity; html[data-motion="reduced"] tắt hoạt cảnh lặp và đổi chuyển động thành hiện/ẩn tức thì. */

/* ---------- hình minh họa dùng chung ---------- */
.blk--viz { display: inline-flex; }
.blk--viz .viz { height: auto; max-width: 100%; }
.blk--frac .viz--frac-bar { width: calc(var(--u, 3rem) * 4.6); }
.blk--frac .viz--frac-circle, .blk--frac .viz--frac-grid { width: calc(var(--u, 3rem) * 1.9); }
.blk--numline .viz { width: min(100%, calc(var(--u, 3rem) * 6.4)); }
.blk--blocks10 .viz { width: auto; height: calc(var(--u, 3rem) * 2.2); }
.blk--thermo .viz { height: calc(var(--u, 3rem) * 3.3); width: auto; }
.blk--angle .viz { width: calc(var(--u, 3rem) * 2.6); }
.blk--coordmap .viz { width: min(100%, calc(var(--u, 3rem) * 5.6)); }
.blk--table .viz { width: min(100%, calc(var(--u, 3rem) * 6)); }
.blk--bars .viz { width: min(100%, calc(var(--u, 3rem) * 5.4)); }
.blk--tenframe .viz { width: min(100%, calc(var(--u, 3rem) * 4.6)); }
.choice .blk--viz, .match__cell .blk--viz, .tile .blk--viz { --u: clamp(1.6rem, 6vmin, 2.4rem); }

/* ---------- khung chung ---------- */
.dial__status { min-height: 1.5rem; margin: 0; font-weight: var(--fw-black); color: var(--c-orange-deep); text-align: center; }
.paint__actions { display: flex; justify-content: center; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.pairs__tally, .point__tally, .hunt__tally, .paint__count, .mix__total { margin: 0; text-align: center; font-weight: var(--fw-black); color: var(--c-ink-2); font-size: var(--fs-md); }

/* ================= Phân loại (sort) ================= */
.sort { --u: clamp(1.9rem, 8vmin, 3rem); display: flex; flex-direction: column; gap: var(--s-5); width: 100%; }
.sort__bins { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-3); align-items: end; }
.sort__pool { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); min-height: 5rem; }

.bin {
  --bc: var(--c-sky); --bd: var(--c-sky-deep);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--s-2);
  min-height: 8.5rem; padding: var(--s-3) var(--s-2) var(--s-4);
  border: 0; border-radius: var(--r-md) var(--r-md) 1.75rem 1.75rem;
  background: var(--bc); color: var(--c-ink);
  box-shadow: 0 var(--edge) 0 var(--bd);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-bounce), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-2) linear;
}
.bin:nth-child(2) { --bc: var(--c-coral); --bd: var(--c-coral-deep); }
.bin:nth-child(3) { --bc: var(--c-lime); --bd: var(--c-lime-deep); }
.bin:nth-child(4) { --bc: var(--c-sun); --bd: var(--c-sun-deep); }
.bin__label { display: flex; justify-content: center; padding: .2rem .6rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .82); }
.bin__blocks { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1em .4em; --u: clamp(1.3rem, 5.2vmin, 2rem); }
.bin--basket { background-image: repeating-linear-gradient(90deg, transparent 0 .9rem, rgba(255, 255, 255, .25) .9rem 1.05rem); margin-top: 1.6rem; }
.bin--basket::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: calc(100% - .3rem); height: 1.4rem; border: .45rem solid var(--bd); border-bottom: 0; border-radius: 1.4rem 1.4rem 0 0; z-index: -1; }
.bin__pile { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: .25rem; width: 100%; min-height: 2.4rem; }
.bin__art { display: none; }
.bin--over { transform: translateY(-4px) scale(1.04); filter: brightness(1.06); box-shadow: 0 var(--edge) 0 var(--bd), 0 0 0 5px rgba(255, 255, 255, .9); }
.bin--chomp { animation: pp-chomp 520ms var(--ease-bounce) both; }
@keyframes pp-chomp { 0% { transform: scale(1); } 30% { transform: scale(1.1, .86); } 60% { transform: scale(.95, 1.08); } 100% { transform: scale(1); } }

/* chủ đề: thuyền */
.bin--boat { border-radius: .5rem .5rem 4rem 4rem / .5rem .5rem 3rem 3rem; margin-top: 3.2rem; animation: pp-bob 3.2s var(--ease-in-out) calc(var(--i) * -.7s) infinite; }
.bin--boat::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 3rem; height: 2.8rem; margin-left: .2rem; background: var(--c-sun-soft); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.bin--boat::after { content: ''; position: absolute; left: 50%; bottom: 100%; width: .4rem; height: 3.2rem; margin-left: -.2rem; border-radius: .2rem; background: var(--c-ink); }
@keyframes pp-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-.35rem) rotate(1.5deg); } }
/* chủ đề: toa tàu */
.bin--train { border-radius: .9rem; margin-bottom: 1.4rem; border-top: .55rem solid var(--bd); }
.bin--train::after { content: ''; position: absolute; right: -.7rem; top: 55%; width: .8rem; height: .5rem; border-radius: .25rem; background: var(--c-ink); }
.bin--train .bin__art { display: flex; position: absolute; left: 0; right: 0; bottom: -1.4rem; justify-content: space-around; padding-inline: 1rem; }
.bin__wheel { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c-ink); border: 4px solid var(--c-line); animation: pp-spin 1.6s linear infinite; position: relative; }
.bin__wheel::after { content: ''; position: absolute; inset: 35% 0 auto 0; height: 4px; background: var(--c-line); }
.sort--done .bin--train { animation: pp-chug 900ms var(--ease-in-out) 2; }
@keyframes pp-chug { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.6rem); } }
/* chủ đề: tên lửa */
.bin--rocket { border-radius: 50% 50% 1rem 1rem / 38% 38% 1rem 1rem; padding-top: var(--s-5); margin-bottom: 1rem; }
.bin--rocket::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.6rem; height: 1.6rem; margin-left: -.8rem; border-radius: 0 0 50% 50%; background: var(--c-orange); transform-origin: top; animation: pp-flame .5s var(--ease-in-out) infinite alternate; }
@keyframes pp-flame { from { transform: scaleY(.7); } to { transform: scaleY(1.25); } }
/* chủ đề: thùng */
.bin--bin { border-radius: .6rem .6rem 1.2rem 1.2rem; }
.bin--bin::before { content: ''; position: absolute; left: -.3rem; right: -.3rem; top: -.55rem; height: 1rem; border-radius: var(--r-pill); background: var(--bd); }

.sitem {
  --u: clamp(1.9rem, 8vmin, 3rem);
  display: inline-flex; align-items: center; justify-content: center; min-width: 4.25rem; min-height: 4.25rem; padding: .25rem .7rem;
  border: 0; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink);
  box-shadow: 0 var(--edge) 0 var(--accent, var(--c-violet));
  cursor: grab; touch-action: none; user-select: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.sitem__body { display: inline-flex; align-items: center; gap: .1em .4em; }
.sitem.is-selected { transform: translateY(-6px) scale(1.06); box-shadow: 0 var(--edge) 0 var(--accent, var(--c-violet)), 0 0 0 5px var(--c-sun); }
.sitem.is-dragging { opacity: .35; }
.sitem--ghost { position: fixed; left: 0; top: 0; z-index: var(--z-overlay); pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 .6rem 0 rgba(46, 34, 87, .25); scale: 1.12; }
.bin__pile .sitem { --u: 1.35rem; min-width: 0; min-height: 0; padding: .15rem .4rem; box-shadow: 0 3px 0 var(--bd); cursor: default; pointer-events: none; }
.bin__pile .sitem .blk--icon { width: 2rem; }
.sitem.is-placed { animation: pp-pop-in var(--dur-3) var(--ease-bounce) both; }

/* ================= Lật thẻ (pairs) ================= */
.pairs { display: flex; flex-direction: column; gap: var(--s-4); align-items: center; width: 100%; }
.pairs__grid { --u: clamp(1.7rem, 7vmin, 2.6rem); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s-3); width: min(100%, 26rem); }
.pcard { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.pcard__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 480ms var(--ease-bounce); }
.pcard.is-open .pcard__in { transform: rotateY(180deg); }
.pcard__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: .2rem; }
.pcard__face--back { background: var(--accent, var(--c-violet)); box-shadow: 0 var(--edge) 0 var(--accent-deep, var(--c-violet-deep)); }
.pcard__face--back svg { width: 55%; height: auto; opacity: .9; }
.pcard__face--front { background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); transform: rotateY(180deg); }
.pcard__body { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; text-align: center; }
.pcard.is-found .pcard__face--front { background: var(--c-ok-soft); box-shadow: 0 var(--edge) 0 var(--c-teal-deep); }
.pcard.is-found .pcard__in { animation: pp-found 600ms var(--ease-bounce) both; }
@keyframes pp-found { 0%, 100% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.12); } }
.pcard:disabled { cursor: default; }

/* ================= Núm xoay / thanh trượt (dial) ================= */
.dial { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.dial__stage { display: flex; justify-content: center; width: 100%; touch-action: none; }
.dial__clock { width: min(78vw, 17rem, 38dvh); height: auto; touch-action: none; cursor: grab; filter: drop-shadow(0 var(--edge) 0 var(--c-line)); }
.dial__angle { width: min(92vw, 22rem); height: auto; touch-action: none; cursor: grab; }
.dial__readout { margin: 0; min-height: 3rem; font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: 1; color: var(--c-ink); }
.dial__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.dial__step { min-width: var(--tap); min-height: var(--tap); font-size: 2rem; font-weight: var(--fw-black); }
.dial__check { min-height: 4rem; padding-inline: var(--s-5); white-space: nowrap; flex: none; }
.dial__hands { display: flex; gap: var(--s-2); }
.dial__hand.is-on { background: var(--accent-soft, var(--c-violet-soft)); box-shadow: 0 0 0 4px var(--accent, var(--c-violet)); }
.dial--done .dial__clock, .dial--done .dial__angle { animation: pp-found-pop 600ms var(--ease-bounce) both; }
@keyframes pp-found-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.05); } }
.dial--telescope .dial__angle .arm { filter: drop-shadow(0 4px 0 rgba(46, 34, 87, .18)); }
.dial--done.dial--telescope .dial__angle .arm { animation: pp-wiggle 700ms var(--ease-in-out) 1; transform-origin: 120px 128px; }

.slider { --p: 0; width: min(100%, 24rem); padding: var(--s-5) var(--s-5) 2.6rem; }
.slider__track { position: relative; height: 3.5rem; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: inset 0 0 0 4px var(--c-line); touch-action: none; cursor: pointer; }
.slider__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: var(--r-pill); background: var(--accent-soft, var(--c-violet-soft)); }
.slider__tick { position: absolute; top: 100%; left: calc(var(--p) * 100%); width: 4px; height: .6rem; margin-left: -2px; border-radius: 2px; background: var(--c-ink-3); pointer-events: none; }
.slider__tick--major { height: .9rem; background: var(--c-ink); }
.slider__lab { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .1rem; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--c-ink); white-space: nowrap; }
.slider__thumb { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border: 4px solid var(--c-ink); border-radius: 50%; background: var(--c-sun); box-shadow: 0 var(--edge) 0 var(--c-sun-deep); cursor: grab; transition: left var(--dur-1) var(--ease-out); }
.slider__thumb:focus-visible { outline: 4px solid var(--c-violet); outline-offset: 3px; }
.slider--line .slider__thumb, .slider--fraction .slider__thumb { border-radius: .6rem .6rem 50% 50%; }
.slider--ruler .slider__track { background: var(--c-sun); box-shadow: inset 0 0 0 4px var(--c-ink); height: 3rem; }
.slider--ruler .slider__fill { background: var(--c-coral); border-radius: var(--r-pill) 0 0 var(--r-pill); }
.slider--ruler .slider__thumb { background: var(--c-coral); box-shadow: 0 var(--edge) 0 var(--c-coral-deep); }
/* dọc: nhiệt kế, ca đong */
.slider--v { width: auto; padding: var(--s-4) 3.2rem 2.4rem var(--s-4); }
.slider--v .slider__track { width: 3rem; height: min(15rem, 34dvh); border-radius: 1.5rem 1.5rem 0 0; }
.slider--v .slider__fill { top: auto; width: auto; height: calc(var(--p) * 100%); left: 0; right: 0; border-radius: 0; background: var(--c-coral); transition: height var(--dur-2) var(--ease-out); }
.slider--v .slider__tick { top: auto; left: 100%; bottom: calc(var(--p) * 100%); width: .8rem; height: 4px; margin: 0 0 -2px .2rem; }
.slider--v .slider__tick--major { width: 1.1rem; }
.slider--v .slider__lab { top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 .5rem; }
.slider--v .slider__thumb { top: auto; left: 50%; bottom: calc(var(--p) * 100%); margin: 0 0 -1.5rem -1.5rem; width: 3rem; height: 3rem; transition: bottom var(--dur-1) var(--ease-out); }
.slider--jug .slider__track { border-radius: 0 0 1.4rem 1.4rem; width: 5.5rem; background: rgba(211, 241, 253, .55); box-shadow: inset 0 0 0 5px var(--c-ink); }
.slider--jug .slider__fill { background: var(--c-sky); border-radius: 0 0 1rem 1rem; }
.slider--jug .slider__thumb { background: var(--c-sky); box-shadow: 0 var(--edge) 0 var(--c-sky-deep); }
.slider--thermo .slider__track { box-shadow: inset 0 0 0 5px var(--c-ink); overflow: visible; }
.slider--thermo .slider__track::after { content: ''; position: absolute; left: 50%; bottom: -1.4rem; width: 4.2rem; height: 4.2rem; margin-left: -2.1rem; border-radius: 50%; background: var(--c-coral); box-shadow: 0 0 0 5px var(--c-ink); z-index: -1; }

/* ================= Chạm điểm (point) ================= */
.pointgame { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.point { --u: clamp(1.4rem, 6vmin, 2.2rem); display: grid; grid-template-columns: repeat(var(--xs), minmax(0, 1fr)); width: min(100%, 22rem); }
.point__wrap { display: flex; align-items: stretch; gap: .35rem; width: min(100%, 24rem); }
.point__col { flex: 1; min-width: 0; }
.point__col .point { width: 100%; }
.point__axis { display: grid; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--c-ink-2); text-align: center; }
.point__axis--x { grid-template-columns: repeat(var(--xs), minmax(0, 1fr)); margin-top: .15rem; }
.point__axis--y { grid-template-rows: repeat(var(--ys), minmax(0, 1fr)); align-items: center; width: 1.2rem; padding-bottom: 1.35rem; }
.pt { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.pt--cell { margin: 2px; border-radius: var(--r-xs); background: var(--c-surface); box-shadow: 0 4px 0 var(--c-line); }
.pt--cell.is-found { background: var(--c-ok-soft); box-shadow: 0 4px 0 var(--c-teal-deep); animation: pp-pop-in var(--dur-3) var(--ease-bounce) both; }
.pt--cell.is-miss { background: var(--c-oops-soft); }
.pt__body { display: inline-flex; align-items: center; justify-content: center; }
.pt--node::before, .pt--node::after { content: ''; position: absolute; background: var(--c-ink-3); opacity: .45; }
.pt--node::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.pt--node::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.point--nodes { background: var(--c-sky-soft); border-radius: var(--r-xs); box-shadow: inset 0 0 0 3px var(--c-line); }
.pt__dot { position: relative; z-index: 1; width: 34%; height: 34%; border-radius: 50%; background: var(--c-surface); border: 3px solid var(--c-ink-3); transition: transform var(--dur-2) var(--ease-bounce), background-color var(--dur-2) linear; }
.pt--node:active .pt__dot { transform: scale(1.5); }
.pt--node.is-found .pt__dot { width: 52%; height: 52%; background: var(--c-coral); border-color: var(--c-ink); animation: pp-pop-in var(--dur-3) var(--ease-bounce) both; }
.pt--node.is-miss .pt__dot { background: var(--c-orange); }
.pt__ring { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0; }
.pt.is-found .pt__ring { border: 4px solid var(--c-teal); animation: pp-ping 900ms var(--ease-out) 1 both; }

/* ================= Tô ô (paint) ================= */
.paint { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.pgrid { --cell: clamp(2.1rem, 11vmin, 3.4rem); position: relative; display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: 3px; padding: 3px; border-radius: var(--r-xs); background: var(--c-ink-3); touch-action: manipulation; }
.pgrid--ref { --cell: clamp(1.1rem, 5.4vmin, 1.7rem); gap: 2px; padding: 2px; }
.paint__reflabel { margin: 0 0 .25rem; text-align: center; font-weight: var(--fw-black); color: var(--c-ink-2); font-size: var(--fs-sm); }
.pcell { aspect-ratio: 1; padding: 0; border: 0; border-radius: .3rem; background: var(--c-surface); cursor: pointer; transition: background-color var(--dur-1) linear, transform var(--dur-1) var(--ease-out); }
.pcell:active:not([disabled]) { transform: scale(.9); }
.pcell.is-locked { cursor: default; }
.pcell.is-miss { animation: pp-nudge var(--dur-3) var(--ease-in-out) 2 both; box-shadow: inset 0 0 0 4px var(--c-orange); }
.swatch.pc--orange, .pc--orange { background: var(--c-orange); } .pc--sky { background: var(--c-sky); } .pc--coral { background: var(--c-coral); }
.pc--teal { background: var(--c-teal); } .pc--lime { background: var(--c-lime); } .pc--violet { background: var(--c-violet); } .pc--sun { background: var(--c-sun); }
.pgrid--mirror-v::after, .pgrid--mirror-h::after { content: ''; position: absolute; pointer-events: none; z-index: 2; }
.pgrid--mirror-v::after { top: -.4rem; bottom: -.4rem; left: 50%; width: 0; margin-left: -2px; border-left: 4px dashed var(--c-violet); }
.pgrid--mirror-h::after { left: -.4rem; right: -.4rem; top: 50%; height: 0; margin-top: -2px; border-top: 4px dashed var(--c-violet); }
.paint__swatches { display: flex; gap: var(--s-3); }
.swatch.pc--sky { background: var(--c-sky); } .swatch.pc--coral { background: var(--c-coral); } .swatch.pc--teal { background: var(--c-teal); } .swatch.pc--lime { background: var(--c-lime); } .swatch.pc--violet { background: var(--c-violet); } .swatch.pc--sun { background: var(--c-sun); }
.swatch { flex: none; width: 3.25rem; height: 3.25rem; border: 4px solid var(--c-ink); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 0 rgba(46, 34, 87, .25); }
.swatch.is-on { transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 5px var(--c-surface), 0 0 0 9px var(--c-ink); }

/* ================= Gom đủ (mix) ================= */
.mix { --u: clamp(1.7rem, 7vmin, 2.6rem); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.mix__goal { display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: .35rem 1.2rem; border-radius: var(--r-pill); background: var(--accent-soft, var(--c-violet-soft)); }
.mix__goallab { font-weight: var(--fw-black); color: var(--c-ink-2); font-size: var(--fs-md); }
.mix__goalnum { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1.1; }
.mix__goalblocks { display: inline-flex; align-items: center; gap: .3em; --u: 2rem; }
.mix__tray { display: flex; align-items: flex-end; justify-content: center; width: min(100%, 24rem); min-height: 6rem; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 4px var(--c-line); }
.mix__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; width: 100%; }
.mixchip { display: inline-flex; padding: .1rem .5rem; border: 0; border-radius: var(--r-xs); background: var(--c-surface); box-shadow: 0 3px 0 var(--c-line), 0 0 0 3px var(--accent, var(--c-violet)); cursor: pointer; --u: 1.5rem; }
.mix__tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.mixtok { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 4.5rem; padding: .2rem .8rem; border: 0; border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink); box-shadow: 0 var(--edge) 0 var(--accent, var(--c-violet)); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.mixtok:active:not([disabled]) { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--accent, var(--c-violet)); }
.mixtok__body { display: inline-flex; align-items: center; gap: .1em .4em; }
.mix .mixtok__body .blk--text { font-size: calc(var(--u) * .85); }

/* ca đong */
.mix--jug .mix__jug { position: relative; width: 7.5rem; height: min(10.5rem, 26dvh); border: 5px solid var(--c-ink); border-top: 0; border-radius: 0 0 1.6rem 1.6rem; background: rgba(211, 241, 253, .45); }
.mix__liquid { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); border-radius: 0 0 1.2rem 1.2rem; background: var(--c-sky); transition: height 600ms var(--ease-out); }
.mix__liquid::before { content: ''; position: absolute; left: 0; right: 0; top: -.35rem; height: .7rem; border-radius: 50%; background: #8FE0FF; }
.mix__line { position: absolute; left: -1rem; right: -1rem; bottom: calc(var(--p) * 100%); height: 0; border-top: 4px dashed var(--c-coral); }
.mix__line span { position: absolute; left: calc(100% + .35rem); top: -.95rem; font-weight: var(--fw-black); font-size: var(--fs-sm); color: var(--c-coral-deep); white-space: nowrap; }
.mix--jug .mix__chips { min-height: 3.2rem; }
/* cân */
.mix__scale { position: relative; width: min(100%, 22rem); height: 12.5rem; }
.mix__post { position: absolute; left: 50%; top: 1rem; bottom: 0; width: 1.2rem; margin-left: -.6rem; border-radius: .6rem .6rem 0 0; background: var(--c-violet); box-shadow: 0 0 0 4px var(--c-ink); z-index: 0; }
.mix__beam { --tilt: 0; position: absolute; left: 0; right: 0; top: 1.4rem; height: 1rem; transform: rotate(calc(var(--tilt) * -11deg)); transition: transform 650ms var(--ease-bounce); z-index: 1; }
.mix__arm { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--c-sun); box-shadow: 0 0 0 4px var(--c-ink); }
.mix__pan { position: absolute; top: .5rem; width: 41%; min-height: 6rem; padding-top: 1.6rem; display: flex; justify-content: center; align-items: flex-end; transform: rotate(calc(var(--tilt) * 11deg)); transform-origin: top center; transition: transform 650ms var(--ease-bounce); }
.mix__pan--l { left: 1%; } .mix__pan--r { right: 1%; }
.mix__pan::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1.6rem; background: linear-gradient(to top right, transparent 49%, var(--c-ink) 50%, transparent 52%) left / 50% 100% no-repeat, linear-gradient(to top left, transparent 49%, var(--c-ink) 50%, transparent 52%) right / 50% 100% no-repeat; }
.mix__panload { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .2rem; min-width: 100%; min-height: 4.5rem; padding: .4rem .3rem; border-radius: .4rem .4rem 2.2rem 2.2rem; background: var(--c-surface); box-shadow: 0 0 0 4px var(--c-ink), 0 .35rem 0 4px var(--c-line); }
.mix__beam.is-level .mix__arm { background: var(--c-lime); }
/* khối chục */
.mix__blocks { display: flex; align-items: flex-end; justify-content: center; min-width: 14rem; min-height: 10rem; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface); box-shadow: inset 0 0 0 4px var(--c-line); }
.mix__blocks .viz { height: 9rem; width: auto; }
.mix__blocks.is-merge { animation: pp-chomp 600ms var(--ease-bounce) both; }
.mix__tray.is-solved, .mix__jug.is-solved, .mix__blocks.is-solved { animation: pp-found-pop 600ms var(--ease-bounce) both; }

/* ================= Săn bong bóng (hunt) ================= */
.hunt { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.hunt__field { --u: clamp(1.6rem, 7vmin, 2.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); width: min(100%, 24rem); padding: var(--s-3); border-radius: var(--r-lg); background: linear-gradient(var(--c-sky-soft), #fff); }
.bubble { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: .2rem; border: 4px solid var(--c-sky-deep); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, rgba(211, 241, 253, .85) 40%, rgba(120, 214, 246, .75)); color: var(--c-ink); cursor: pointer; animation: pp-bubble var(--dur, 4s) var(--ease-in-out) var(--d, 0ms) infinite; }
.bubble:nth-child(3n + 2) { animation-direction: reverse; }
.bubble__body { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em; }
.bubble__shine { position: absolute; top: 12%; left: 18%; width: 22%; height: 12%; border-radius: 50%; background: rgba(255, 255, 255, .85); transform: rotate(-30deg); pointer-events: none; }
@keyframes pp-bubble { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.3rem, -.6rem); } }
.bubble.is-popped { animation: pp-bubble-pop 420ms var(--ease-out) both; pointer-events: none; }
@keyframes pp-bubble-pop { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.35); opacity: .9; border-width: 2px; } 100% { transform: scale(1.7); opacity: 0; } }
.bubble:disabled { cursor: default; }

/* ================= Tô nét (trace) ================= */
.trace { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.trace__box { position: relative; width: min(100%, 20rem, 44dvh); aspect-ratio: 1; border-radius: var(--r-md); background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); overflow: hidden; }
.trace__guide, .trace__ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace__ink { touch-action: none; cursor: crosshair; }
.trace__box.is-solved { box-shadow: 0 var(--edge) 0 var(--c-teal-deep), 0 0 0 5px var(--c-teal); animation: pp-found-pop 600ms var(--ease-bounce) both; }
.trace__meter { width: min(100%, 14rem); height: .9rem; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.trace__meter i { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--c-teal); transition: width var(--dur-2) var(--ease-out); }

/* ---- Giảm chuyển động ---- */
:root[data-motion="reduced"] .bin--boat, :root[data-motion="reduced"] .bin__wheel, :root[data-motion="reduced"] .bin--rocket::after,
:root[data-motion="reduced"] .bubble, :root[data-motion="reduced"] .bin--chomp, :root[data-motion="reduced"] .sort--done .bin--train { animation: none; }
:root[data-motion="reduced"] .bubble.is-popped { animation: none; opacity: 0; }
:root[data-motion="reduced"] .pcard__in, :root[data-motion="reduced"] .mix__beam, :root[data-motion="reduced"] .mix__pan, :root[data-motion="reduced"] .mix__liquid,
:root[data-motion="reduced"] .slider__thumb, :root[data-motion="reduced"] .slider__fill { transition: none; }
:root[data-motion="reduced"] .pcard.is-found .pcard__in, :root[data-motion="reduced"] .trace__box.is-solved, :root[data-motion="reduced"] .dial--done .dial__clock,
:root[data-motion="reduced"] .dial--done .dial__angle, :root[data-motion="reduced"] .mix__blocks.is-merge { animation: none; }
:root[data-motion="reduced"] .pcell.is-miss { animation: none; }