/* WizPlayo - giao diện các trò mô phỏng (20 trò mới). Mỗi trò một khối, đặt tên lớp theo kind (.route, ...).
   Chuyển động dùng --dur-* (giảm chuyển động thì gần như tức thì). */

/* ================= Vẽ đường cứu bạn (route) ================= */
.route { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.route__board {
  --cell: 4.6rem; position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  width: min(100%, calc(var(--cols) * var(--cell)), calc(48dvh * var(--cols) / var(--rows))); aspect-ratio: var(--cols) / var(--rows);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 0 0 5px var(--c-ink), 0 var(--edge) 0 5px var(--c-ink); touch-action: none; user-select: none; -webkit-user-select: none;
}
.route__cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: var(--c-lime-soft); color: var(--c-ink); cursor: pointer; transition: background var(--dur-2) var(--ease-out); }
.route__cell.is-alt { background: #D3EEBC; }
.route__cell.is-on { background: var(--c-sun-soft); }
.route__cell:focus-visible { outline: 4px solid var(--c-violet); outline-offset: -4px; z-index: 3; }
.route__haz, .route__goal { position: absolute; inset: 8%; display: flex; }
.route__haz svg, .route__goal svg { width: 100%; height: 100%; }
.route__goal svg { animation: pp-float 2.4s var(--ease-in-out) infinite; }
.route__stop { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 4px var(--c-ink); font-weight: var(--fw-black); font-size: clamp(1.1rem, 4.5vmin, 1.7rem); line-height: 1; color: var(--c-ink); transition: transform var(--dur-3) var(--ease-bounce), opacity var(--dur-3); }
.route__stop--icon { background: var(--c-surface); width: 62%; padding: 4%; }
.route__stop--icon svg { width: 100%; height: 100%; }
.route__cell.is-got .route__stop { transform: scale(1.25); background: var(--c-lime); }
.route__cell.is-got .route__stop--icon { opacity: .45; transform: scale(.7); }
.route__trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.route__line { stroke: var(--c-violet); stroke-width: .26; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.route__head { fill: var(--c-violet); stroke: #fff; stroke-width: .06; }
.route__hero { position: absolute; left: 0; top: 0; z-index: 4; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); padding: 6%; display: flex; pointer-events: none; transform: translate(calc(var(--x, 0) * 100%), calc(var(--y, 0) * 100%)); transition: transform 240ms var(--ease-in-out); }
.route__hero.is-instant { transition: none; }
.route__hero svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(46, 34, 87, .25)); }
.route__hero.is-win svg { animation: pp-hop 900ms var(--ease-out) 2; }
.route__cell.is-bad { background: var(--c-coral-soft); box-shadow: inset 0 0 0 4px var(--c-coral); animation: pp-wiggle 600ms; }
.route__tally { margin: 0; font-weight: var(--fw-black); color: var(--c-ink-2); font-size: var(--fs-md); }
.route__board.is-busy { cursor: progress; }

/* ================= Xưởng ghép hình xoay (tangram) ================= */
.tangram { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.tg__board {
  position: relative; width: min(100%, calc(var(--cols) * 3rem), calc(38dvh * var(--cols) / var(--rows))); aspect-ratio: var(--cols) / var(--rows);
  border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 0 0 5px var(--c-ink), 0 var(--edge) 0 5px var(--c-ink); touch-action: none; user-select: none; -webkit-user-select: none;
}
.tg__bg, .tg__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tg__empty { fill: none; stroke: var(--c-line); stroke-width: .03; }
.tg__slot { fill: var(--c-violet-soft); stroke: var(--c-violet); stroke-width: .05; stroke-dasharray: .16 .12; transition: fill var(--dur-2); }
.tg__slot.is-filled { fill: var(--c-sun-soft); stroke-dasharray: none; stroke: transparent; }
.tg__out { fill: var(--c-coral); opacity: .55; }
.tg__gap { fill: none; stroke: var(--c-coral); stroke-width: .08; stroke-dasharray: .14 .1; animation: pp-twinkle 900ms ease-in-out infinite; }
.tg__prev { fill: var(--c-teal); opacity: .45; }
.tg__prev--bad { fill: var(--c-coral); opacity: .55; }
.tg__layer { position: absolute; inset: 0; }
.tg__piece { position: absolute; display: flex; cursor: grab; touch-action: none; border-radius: .2rem; transition: left var(--dur-2) var(--ease-out), top var(--dur-2) var(--ease-out); }
.tg__tray .tg__piece { position: relative; margin: .25rem; }
.tg__svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 0 rgba(46, 34, 87, .18)); }
.tg__piece.is-sel { z-index: 3; }
.tg__piece.is-sel .tg__svg { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 .35rem var(--c-violet)); animation: pp-wiggle 900ms ease-in-out 1; }
.tg__piece:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 3px; }
.tg__piece.is-lifted { opacity: .25; }
.tg__tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .15rem .6rem; min-height: 4rem; width: min(100%, 26rem); padding: var(--s-2); border-radius: var(--r-sm); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 3px var(--c-line); }
.tg__tray.is-empty::after { content: '✓'; color: var(--c-teal-deep); font-weight: var(--fw-black); font-size: var(--fs-lg); }
.tg__ghost { position: fixed; z-index: var(--z-toast); pointer-events: none; margin: 0; transform: scale(1.04) rotate(-2deg); filter: drop-shadow(0 .5rem .4rem rgba(46, 34, 87, .3)); }
.tg__board.is-done .tg__piece { cursor: default; }
.tg__board.is-done .tg__svg { animation: pp-hop 800ms var(--ease-out) 1; }

/* ================= Cửa hàng tí hon (shop) ================= */
.shop { --u: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.shop__steps { display: flex; justify-content: center; gap: .35rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.shop__step { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem .15rem .25rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 3px var(--c-line); font-weight: var(--fw-bold); font-size: var(--fs-xs); color: var(--c-ink-2); }
.shop__stepico { display: inline-flex; width: 1.7rem; height: 1.7rem; opacity: .55; }
.shop__stepico svg { width: 100%; height: 100%; }
.shop__step.is-now { background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun-deep); color: var(--c-ink); }
.shop__step.is-now .shop__stepico, .shop__step.is-done .shop__stepico { opacity: 1; }
.shop__step.is-done { background: var(--c-teal-soft); box-shadow: inset 0 0 0 3px var(--c-teal); color: var(--c-teal-deep); }
.shop__say { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%; }
.shop__line { margin: 0; text-align: center; font-weight: var(--fw-black); font-size: var(--fs-md); line-height: 1.25; }
.shop__order { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; }
.shop__chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem .15rem .3rem; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: 0 0 0 3px var(--c-ink); font-weight: var(--fw-black); font-size: var(--fs-md); }
.shop__chip svg { width: 2.2rem; height: 2.2rem; }
.shop__stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3); border-radius: var(--r-md); background: rgba(255, 255, 255, .65); box-shadow: inset 0 0 0 4px var(--c-line); }
.shop--fruit .shop__stage { background: linear-gradient(#FFF6DA, #FFF0C2); box-shadow: inset 0 0 0 4px var(--c-sun); }
.shop--bakery .shop__stage { background: linear-gradient(#FFEFF4, #FFE2EA); box-shadow: inset 0 0 0 4px var(--c-coral); }
.shop--mix .shop__stage { background: linear-gradient(#EAF6FF, #D9F0FD); box-shadow: inset 0 0 0 4px var(--c-sky); }
.shop__stage.is-ok { animation: pp-hop 700ms var(--ease-out); }
.shop__label { display: block; margin-bottom: .2rem; font-weight: var(--fw-black); font-size: var(--fs-xs); color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .06em; }
.shop__shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: .5rem; border-radius: var(--r-sm); background: rgba(139, 94, 60, .12); box-shadow: 0 .45rem 0 -.1rem #C79A6B; }
.shop__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 4.9rem; padding: .35rem .2rem .2rem; border: 0; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); cursor: pointer; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.shop__item:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--c-line); }
.shop__item svg { width: 3.2rem; height: 3.2rem; }
.shop__tag { display: inline-block; padding: .02rem .5rem; border-radius: var(--r-pill); background: var(--c-sun); color: var(--c-ink); font-weight: var(--fw-black); font-size: var(--fs-sm); line-height: 1.35; }
.shop__tag--big { font-size: var(--fs-md); }
.shop__basketwrap, .shop__walletwrap, .shop__traywrap { width: 100%; }
.shop__basket, .shop__tray { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; gap: .1rem; min-height: 5rem; padding: .5rem; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--c-surface); border: 4px solid var(--c-ink); border-top-width: 0; }
.shop__tray { border-radius: var(--r-sm); border-width: 4px; border-style: dashed; border-color: var(--c-teal); background: var(--c-teal-soft); min-height: 4.2rem; }
.shop__basket:empty::before, .shop__tray:empty::before { content: attr(data-empty); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: .3rem; color: var(--c-ink-3); font-weight: var(--fw-bold); }
.shop__basket:not(:empty)::before, .shop__tray:not(:empty)::before { content: none; }
.shop__unit { display: inline-flex; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; background: none; cursor: pointer; }
.shop__unit svg { width: 100%; height: 100%; }
/* cân */
.shop__scale { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.shop__dial { position: relative; width: min(16rem, 70vw); aspect-ratio: 2 / 1.1; border-radius: 16rem 16rem 1rem 1rem / 16rem 16rem 1rem 1rem; background: var(--c-surface); box-shadow: 0 0 0 5px var(--c-ink); overflow: hidden; }
.shop__needle { --f: 0; position: absolute; left: 50%; bottom: 8%; width: 40%; height: .5rem; margin-top: -.25rem; transform-origin: 0 50%; transform: rotate(calc(180deg + var(--f) * 180deg)); background: var(--c-coral); border-radius: var(--r-pill); box-shadow: 0 0 0 2px var(--c-ink); transition: transform 500ms var(--ease-bounce); z-index: 2; }
.shop__hub { position: absolute; left: 50%; bottom: 8%; width: 1.2rem; height: 1.2rem; margin: 0 0 -.6rem -.6rem; border-radius: 50%; background: var(--c-ink); z-index: 3; }
.shop__tick { --f: 0; position: absolute; left: 50%; bottom: 8%; width: 46%; height: 0; transform-origin: 0 0; transform: rotate(calc(180deg + var(--f) * 180deg)); }
.shop__tick i { position: absolute; right: 0; top: -.15rem; width: .8rem; height: .3rem; border-radius: 2px; background: var(--c-ink-2); }
.shop__tick em { display: none; }
.shop__read { padding: .05em .6em; border-radius: var(--r-md); background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--accent, var(--c-violet)); font-size: var(--fs-xl); font-weight: var(--fw-black); }
.shop__bowl { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; width: 11rem; min-height: 3.6rem; padding: .3rem .4rem .1rem; border-radius: .4rem .4rem 3rem 3rem; background: var(--c-surface); box-shadow: 0 0 0 4px var(--c-ink); }
.shop__bit { display: inline-flex; width: 1.8rem; height: 1.8rem; margin: 0 -.15rem; animation: pp-pop-in 260ms var(--ease-bounce); }
.shop__bit svg { width: 100%; height: 100%; }
.shop__scoop { min-width: 6.5rem; font-size: var(--fs-md); }
/* tính tiền */
.shop__bill { display: flex; flex-direction: column; gap: .25rem; width: min(100%, 20rem); margin: 0; padding: .5rem .8rem; list-style: none; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 0 0 3px var(--c-ink); }
.shop__bill li { display: flex; align-items: center; gap: .5rem; font-weight: var(--fw-black); font-size: var(--fs-md); }
.shop__bill svg { width: 2.2rem; height: 2.2rem; }
.shop__at { margin-left: auto; color: var(--c-ink-2); font-size: var(--fs-sm); }
.shop__numpad { --u: 2.4rem; }
.shop__sum { font-size: clamp(1.8rem, 7vmin, 2.6rem); }
/* tiền */
.shop__wallet { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.shop__cashbtn { padding: .1rem; border: 0; background: none; cursor: pointer; border-radius: var(--r-xs); transition: transform var(--dur-1) var(--ease-out); }
.shop__cashbtn:active { transform: scale(.94); }
.shop__cash { --bg: var(--c-sun); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--c-ink), 0 .2rem 0 3px var(--c-ink); font-weight: var(--fw-black); color: var(--c-ink); background: var(--bg); }
.shop__cash b { font-size: var(--fs-sm); font-weight: var(--fw-black); line-height: 1; }
.shop__cash--coin { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF1A8, var(--bg) 60%); }
.shop__cash--note { width: 5.6rem; height: 3rem; border-radius: .4rem; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .25) 0 .35rem, transparent .35rem .7rem); background-color: var(--bg); }
.shop__cash--c0 { --bg: #FFD23F; } .shop__cash--c1 { --bg: #FFB86B; } .shop__cash--c2 { --bg: #FFC9D6; } .shop__cash--c3 { --bg: #BFEDE7; } .shop__cash--c4 { --bg: #C9F0A8; } .shop__cash--c5 { --bg: #CFC3FF; }
.shop__cash--big { transform: scale(1.15); }
.shop__given { display: block; margin-top: .3rem; text-align: center; font-weight: var(--fw-black); font-size: var(--fs-md); color: var(--c-ink-2); }

/* ====== Trò 4: Phòng thí nghiệm nước (kind jugs) ====== */
.jugs { --wc: #4DC3F5; --wc-deep: #2E9FD6; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.jugs--juice { --wc: #FFA94D; --wc-deep: #E8832A; }
.jugs--milk { --wc: #FCE8C4; --wc-deep: #E6C48A; }
.jugs__goal { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem .35rem .6rem; border-radius: var(--r-pill); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun-deep); font-weight: var(--fw-black); font-size: var(--fs-md); text-align: center; }
.jugs__goal svg { width: 2rem; height: 2rem; flex: none; }
.jugs__turns { margin: 0; font-weight: var(--fw-bold); color: var(--c-ink-2); }
.jugs__stage { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; padding: var(--s-3) var(--s-3) var(--s-2); border-radius: var(--r-md); background: linear-gradient(#F1FBFF, #D6F0FC); box-shadow: inset 0 0 0 4px var(--c-sky); }
.jugs__stage.is-ok { animation: pp-hop 700ms var(--ease-out); }
.jugs__row { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; width: 100%; padding-bottom: .4rem; border-bottom: .5rem solid #C79A6B; border-radius: 0 0 .3rem .3rem; }
.jugs__total { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--c-ink-2); }
.jug { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; transform-origin: 50% 100%; transition: transform 420ms var(--ease-out); }
.jug__glass { position: relative; width: 5rem; height: calc(var(--cap) * var(--u)); border: .28rem solid var(--c-ink); border-top-width: .2rem; border-radius: .3rem .3rem 1.1rem 1.1rem; background: rgba(255, 255, 255, .55); overflow: hidden; transition: box-shadow var(--dur-1) var(--ease-out); }
.jug__water { position: absolute; inset: auto 0 0 0; height: calc(var(--lv) / var(--cap) * 100%); background: linear-gradient(var(--wc), var(--wc-deep)); border-top: .18rem solid rgba(255, 255, 255, .8); transition: height 600ms var(--ease-out); }
.jug__ticks { position: absolute; inset: 0; background-image: repeating-linear-gradient(to top, transparent 0 calc(var(--u) - .14rem), rgba(45, 33, 80, .28) calc(var(--u) - .14rem) var(--u)); background-size: 55% 100%; background-repeat: no-repeat; background-position: right bottom; pointer-events: none; }
.jug__goal { position: absolute; left: 0; right: 0; bottom: calc(var(--g) * var(--u)); height: 0; border-top: .2rem dashed var(--c-coral); pointer-events: none; }
.jug__goal svg { position: absolute; left: .1rem; bottom: .05rem; width: 1.5rem; height: 1.5rem; }
.jug__goal b { position: absolute; right: .25rem; bottom: .05rem; font-size: var(--fs-sm); color: var(--c-coral); font-weight: var(--fw-black); }
.jug__num { display: inline-flex; min-width: 2.4rem; justify-content: center; padding: .05rem .5rem; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: 0 .15rem 0 var(--c-line); font-size: var(--fs-md); font-weight: var(--fw-black); }
.jug__cap { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.jug:focus-visible { outline: none; }
.jug:focus-visible .jug__glass { box-shadow: 0 0 0 .3rem var(--c-violet); }
.jug.is-sel .jug__glass { box-shadow: 0 0 0 .3rem var(--c-sun), 0 0 0 .5rem var(--c-ink); }
.jug.is-sel { transform: translateY(-.35rem); }
.jug.is-goal .jug__num { background: var(--c-teal-soft); box-shadow: 0 .15rem 0 var(--c-teal); }
.jug.is-tilt-r { transform: rotate(16deg) translateY(-.4rem); }
.jug.is-tilt-l { transform: rotate(-16deg) translateY(-.4rem); }
.jug.is-splash { animation: pp-wiggle 500ms var(--ease-out); }
.jugs__ctl { display: flex; gap: .6rem; justify-content: center; }
.jugs__act { display: inline-flex; align-items: center; gap: .4rem; }
.jugs__act svg { width: 1.6rem; height: 1.6rem; }
.jugs__hint { margin: 0; min-height: 1.4em; text-align: center; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--c-ink-2); }

/* ====== Trò 5: Xây cầu cho bạn đi qua (kind bridge) ====== */
.bridge { --cs: min(3.4rem, calc((100vw - 3.2rem) / var(--g))); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.bridge__rule { display: flex; align-items: center; gap: .5rem; padding: .25rem .9rem .25rem .4rem; border-radius: var(--r-pill); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun-deep); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.bridge__rule svg { width: 2.4rem; height: 2.4rem; flex: none; }
.bridge__chiprow { display: inline-flex; gap: 2px; }
.bridge__chipplank { display: inline-block; width: 1rem; height: .6rem; margin-right: .25rem; border-radius: .15rem; background: #C9884A; box-shadow: 0 0 0 2px var(--c-ink); }
.bridge__chiprow .bridge__chipplank { margin: 0; }
.bridge__chippillar { display: inline-block; width: .6rem; height: 1rem; margin-right: .25rem; border-radius: .15rem; background: #A9A5C8; box-shadow: 0 0 0 2px var(--c-ink); vertical-align: middle; }
.bridge__board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), var(--cs)); grid-template-rows: repeat(var(--rows), var(--cs)); padding: 0 .2rem; border-radius: var(--r-md); background: linear-gradient(#D9F3FF, #EFFAFF 60%); box-shadow: inset 0 0 0 4px var(--c-sky); overflow: hidden; }
.bridge__board.is-ok { animation: pp-hop 700ms var(--ease-out); }
.bridge__cliff { background: linear-gradient(#7CD43F 0 .7rem, #B07A45 .7rem); border: .22rem solid var(--c-ink); border-top-width: .22rem; border-radius: .5rem .5rem 0 0; z-index: 2; }
.bridge__cliff--l { border-right-width: .22rem; margin-right: -.1rem; }
.bridge__goal { display: flex; align-items: flex-end; justify-content: center; z-index: 3; }
.bridge__goal svg, .bridge__hero svg { width: 90%; height: 90%; }
.bridge__water { background: linear-gradient(#5CCBF7, #2E9FD6); box-shadow: inset 0 .3rem 0 rgba(255, 255, 255, .5); }
.bridge__slot { position: relative; z-index: 4; display: block; padding: 0; border: .18rem dashed rgba(45, 33, 80, .35); border-radius: .35rem; background: rgba(255, 255, 255, .35); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.bridge__slot::after { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: var(--fw-black); color: rgba(45, 33, 80, .45); }
.bridge__slot:active { transform: translateY(2px); }
.bridge__slot.is-on { border: .2rem solid var(--c-ink); background: repeating-linear-gradient(90deg, #D9A066 0 .55rem, #C9884A .55rem 1.1rem); }
.bridge__slot.is-on::after { content: none; }
.bridge__slot.is-weak { background: repeating-linear-gradient(135deg, #FF7A59 0 .4rem, #FFB199 .4rem .8rem); animation: pp-wiggle 900ms ease-in-out infinite; }
.bridge__slot.is-broken { animation: bridge-snap 700ms var(--ease-out) forwards; }
.bridge__pillar { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: center; margin-inline: 22%; padding: 0; border: .18rem dashed rgba(255, 255, 255, .7); border-radius: .3rem; background: rgba(255, 255, 255, .12); cursor: pointer; }
.bridge__pillar.is-on, .bridge__pillar.is-island { border: .2rem solid var(--c-ink); background: repeating-linear-gradient(#B9B5D6 0 .9rem, #9E99C4 .9rem 1rem); }
.bridge__pillar.is-island { background: radial-gradient(circle at 40% 25%, #C9C5E6, #8F8AB8); border-radius: 1rem 1rem .3rem .3rem; margin-inline: 12%; }
.bridge__pillar.is-boat { margin-inline: 0; border: 0; background: none; cursor: not-allowed; align-items: flex-start; }
.bridge__pillar.is-boat svg { width: 100%; height: auto; max-height: var(--cs); }
.bridge__hero { position: absolute; left: calc(var(--hx) * var(--cs) + .2rem); top: calc(var(--cs) * 0); width: var(--cs); height: var(--cs); z-index: 5; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transition: left 280ms linear, transform 700ms var(--ease-out), opacity 700ms; }
.bridge__hero.is-fall { transform: translateY(calc(var(--cs) * 2.1)) rotate(120deg); opacity: .2; }
.bridge__hero.is-cheer { animation: pp-hop 800ms var(--ease-out) infinite; }
.bridge__legend { display: flex; gap: 1rem; margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.bridge__budget { display: flex; align-items: center; gap: .6rem; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.bridge__budgetbar { display: inline-block; width: 7rem; height: .8rem; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.bridge__budgetfill { display: block; height: 100%; background: var(--c-teal); transition: width var(--dur-2) var(--ease-out); }
.bridge__budget.is-full .bridge__budgetfill { background: var(--c-coral); }
@keyframes bridge-snap { 0% { transform: none; } 40% { transform: translateY(.3rem) rotate(6deg); } 100% { transform: translateY(calc(var(--cs) * 1.6)) rotate(25deg); opacity: 0; } }

/* ====== Trò 6: Máy biến đổi bí mật (kind machine) ====== */
.mach { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.mach__row { display: flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; padding: .6rem .4rem; border-radius: var(--r-md); background: linear-gradient(#F3EEFF, #E4DAFF); box-shadow: inset 0 0 0 4px var(--c-violet); }
.mach__arrow { display: inline-flex; width: 1.6rem; height: 1.6rem; color: var(--c-violet); flex: none; }
.mach__arrow svg { width: 100%; height: 100%; }
.mach__slot { display: flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: inset 0 0 0 3px var(--c-line); flex: none; }
.mach__q { font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--c-ink-2); opacity: .5; }
.mach__body { width: 6.8rem; flex: none; transform-origin: 50% 90%; }
.mach__body svg { width: 100%; height: auto; display: block; }
.mach__body.is-run { animation: pp-wiggle 300ms ease-in-out infinite; }
.mach__body.is-ok { animation: pp-hop 700ms var(--ease-out); }
.mach__label { margin: 0; align-self: flex-start; font-weight: var(--fw-black); font-size: var(--fs-xs); color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .06em; }
.mach__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; padding: .5rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 3px var(--c-line); }
.mach__item { padding: .2rem; border: 0; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.mach__item:active:not(:disabled) { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--c-line); }
.mach__item.is-used { background: var(--c-violet-soft, #E9E1FF); }
.mach__item:disabled { opacity: .6; cursor: default; }
.mach__thing { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--c-ink); }
.mach__thing--num { border-radius: .8rem; background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun-deep); }
.mach__thing svg { width: 100%; height: 100%; }
.mach__thing--small svg { transform: scale(.62); }
.mach__thing.is-small { width: 2.4rem; height: 2.4rem; font-size: var(--fs-md); }
.mach__logbox { width: 100%; }
.mach__log { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .35rem; margin: .25rem 0 0; padding: 0; list-style: none; min-height: 2.6rem; }
.mach__logrow { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .15rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 2px var(--c-line); }
.mach__logarrow { font-weight: var(--fw-black); color: var(--c-violet); }
.mach__gate { margin: 0; text-align: center; font-weight: var(--fw-bold); color: var(--c-ink-2); }
.mach__adjust { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 4px var(--c-sun-deep); }
.mach__stage { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; }
.mach__stagetitle { margin: 0; font-weight: var(--fw-bold); text-align: center; }
.mach__stageval { font-size: var(--fs-md); font-weight: var(--fw-black); }
.mach__ops { display: flex; gap: .4rem; }
.mach__op { width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--c-ink); cursor: pointer; }
.mach__op.is-on { background: var(--c-violet); color: #fff; box-shadow: 0 var(--edge) 0 #4A2FC0; }
.mach__stepper { display: flex; align-items: center; gap: .8rem; }
.mach__n { min-width: 3.2rem; text-align: center; font-size: var(--fs-xl, 2rem); font-weight: var(--fw-black); }
.mach__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.mach__card { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: .25rem; border: 0; border-radius: var(--r-sm); background: var(--c-surface); box-shadow: 0 var(--edge) 0 var(--c-line); cursor: pointer; }
.mach__card.is-on { box-shadow: 0 0 0 .22rem var(--c-violet), 0 var(--edge) 0 .22rem #4A2FC0; transform: translateY(-2px); }
.mach__card svg { width: 100%; height: 100%; }
.mach__swatch { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--c-ink); }
.mach__sizeico { display: block; border-radius: 50%; background: var(--c-ink-2); }
.mach__sizeico--small { width: 36%; height: 36%; }
.mach__sizeico--big { width: 78%; height: 78%; }
.mach__ruletext { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.mach__diff { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; justify-content: center; vertical-align: middle; }

/* ====== Trò 7: Tập viết trên cát (kind strokes) ====== */
.strk { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: min(100%, 26rem); margin-inline: auto; }
.strk__glyph { display: flex; align-items: center; justify-content: center; min-width: 4.5rem; height: 4.5rem; padding: 0 1rem; border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 4px var(--c-sun-deep); font-size: 3rem; font-weight: var(--fw-black); line-height: 1; }
.strk__board { width: min(100%, 19rem); border-radius: var(--r-md); background: linear-gradient(#F8E7BE, #EFD59C); box-shadow: inset 0 0 0 4px #D2A862, 0 .3rem 0 #B98A45; overflow: hidden; }
.strk__svg { display: block; width: 100%; height: auto; aspect-ratio: 100 / 120; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.strk__base { stroke: #B98A45; stroke-width: 1.2; }
.strk__dash { stroke: #C9A15F; stroke-width: 0.9; stroke-dasharray: 3 3; }
.strk__ghost { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.strk__ghost.is-done { opacity: 0; }
.strk__ghostdot { fill: rgba(255, 255, 255, .75); }
.strk__badge circle { fill: #fff; stroke: #B98A45; stroke-width: 1.2; }
.strk__badge text { font-size: 6.5px; font-weight: 800; fill: #5A3A12; font-family: inherit; }
.strk__badge.is-now circle { fill: var(--c-violet); stroke: #fff; stroke-width: 1.4; }
.strk__badge.is-now text { fill: #fff; }
.strk__path { fill: none; stroke: rgba(111, 76, 255, .45); stroke-width: 1.6; stroke-dasharray: 2.5 3.5; stroke-linecap: round; }
.strk__chev { fill: var(--c-violet); }
.strk__runner { fill: var(--c-violet); stroke: #fff; stroke-width: 1.2; }
.strk__pulse { fill: rgba(111, 76, 255, .25); stroke: var(--c-violet); stroke-width: 1.4; animation: pp-float 1s ease-in-out infinite alternate; }
.strk__ink { fill: none; stroke: #5A3A12; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0.6px 0 rgba(255, 255, 255, .6)); }
.strk__pen { fill: none; stroke: #7A5220; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.strk__pen.is-bad { stroke: var(--c-coral); opacity: 0; transition: opacity 600ms var(--ease-out); }
.strk--guided .strk__ink, .strk--trace .strk__ink { stroke: #2B8F7F; }
.strk__svg.is-ok .strk__ink { stroke: var(--c-teal-deep); }
.strk__dots { display: flex; gap: .35rem; min-height: .7rem; }
.strk__dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-line); }
.strk__dot.is-on { background: var(--c-teal); }

/* ====== Trò 8: Đường đua số (kind numjump) ====== */
.nj { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.nj__panel { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; padding: var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-md); background: linear-gradient(#E6F8D5, #D3F1FD); box-shadow: inset 0 0 0 4px var(--c-sky); }
.nj__where { margin: 0; font-weight: var(--fw-black); font-size: var(--fs-md); }
.nj__turns { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--c-ink-2); }
.nj__line { position: relative; width: 100%; }
.nj__line.is-ok { animation: pp-hop 700ms var(--ease-out); }
.nj__svg { display: block; width: 100%; height: auto; overflow: visible; }
.nj__axis { stroke: var(--c-ink); stroke-width: 2.2; stroke-linecap: round; }
.nj__tick { stroke: var(--c-ink); stroke-width: 1.2; }
.nj__num { font-size: 6.2px; font-weight: 800; fill: var(--c-ink-2); font-family: inherit; }
.nj__num.is-goal { fill: var(--c-coral); font-size: 7.4px; }
.nj__hole { fill: #2E9FD6; stroke: var(--c-ink); stroke-width: 1; }
.nj__ripple { fill: none; stroke: #fff; stroke-width: .9; stroke-linecap: round; }
.nj__flag line { stroke: var(--c-ink); stroke-width: 1.2; }
.nj__flag path { fill: #CFC3FF; stroke: var(--c-ink); stroke-width: 1; stroke-linejoin: round; }
.nj__flag.is-got path { fill: var(--c-sun); }
.nj__goal line { stroke: var(--c-ink); stroke-width: 1.6; }
.nj__goal path { fill: var(--c-coral); stroke: var(--c-ink); stroke-width: 1.2; stroke-linejoin: round; }
.nj__arc { fill: none; stroke: var(--c-violet); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 2.5; opacity: .8; }
.nj__arc.is-back { stroke: var(--c-coral); }
.nj__arclabel { font-size: 6.4px; font-weight: 800; fill: var(--c-violet); font-family: inherit; }
.nj__hero { position: absolute; top: 64%; width: 2.8rem; height: 2.8rem; margin-left: -1.4rem; transform: translateY(-96%); transition: left 380ms var(--ease-out); pointer-events: none; }
.nj__hero span { display: block; width: 100%; height: 100%; }
.nj__hero svg { width: 100%; height: 100%; }
.nj__hero.is-hop span { animation: pp-hop 450ms var(--ease-out); }
.nj__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.nj__jump { min-width: 3.8rem; height: 3.6rem; padding: 0 .8rem; border: 0; border-radius: var(--r-pill); background: var(--c-violet); color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-black); box-shadow: 0 var(--edge) 0 #4A2FC0; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.nj__jump.is-back { background: var(--c-coral); box-shadow: 0 var(--edge) 0 #C84468; }
.nj__jump:active:not(:disabled) { transform: translateY(var(--edge)); box-shadow: 0 0 0; }
.nj__jump:disabled { opacity: .55; cursor: default; }

/* ===== Trò 9: Băng chuyền đóng gói (.cv) ===== */
.cv { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.cv__goal { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); }
.cv__goalitem { flex: none; width: 2.6rem; height: 2.6rem; }
.cv__goalitem svg { width: 100%; height: 100%; }
.cv__goalchips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cv__chip { padding: .1rem .55rem; border-radius: var(--r-pill); background: #fff; font-size: var(--fs-sm); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 2px var(--c-line); animation: pp-pop-in 240ms var(--ease-out); }
.cv__chip.is-want { background: var(--c-lime-soft, #E6F8D5); box-shadow: inset 0 0 0 2px var(--c-lime); }
.cv__chip.is-not { background: #FFE9EE; box-shadow: inset 0 0 0 2px var(--c-coral); }
.cv__chip.is-has { background: #EEF0FF; box-shadow: inset 0 0 0 2px var(--c-violet); }
.cv__stage { width: 100%; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-md); background: linear-gradient(#EEF0FF, #DCE2F8); box-shadow: inset 0 0 0 4px var(--c-line); }
.cv__belt { --cell: calc(100% / var(--cols)); position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); padding-top: calc(100% / var(--cols) * .95); border-radius: var(--r-sm); background-image: repeating-linear-gradient(90deg, #6F6A93 0 14px, #5B5683 14px 28px); background-size: auto calc(100% / var(--cols) * 0.5); background-repeat: repeat-x; background-position: 0 calc(100% - 0px); }
.cv__belt.is-running { animation: cv-belt 500ms linear infinite; }
@keyframes cv-belt { from { background-position-x: 0; } to { background-position-x: 28px; } }
.cv__belt.is-ok { box-shadow: 0 0 0 4px var(--c-lime); }
.cv__slots { display: contents; }
.cv__cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
.cv__cell svg { width: 78%; height: 78%; }
.cv__gate, .cv__crate { opacity: .95; }
.cv__gate svg { width: 56%; height: 56%; color: var(--c-ink-2); }
button.cv__slot { border-radius: var(--r-sm); background: #fff; box-shadow: 0 var(--edge) 0 var(--c-line), inset 0 0 0 2px var(--c-line); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
button.cv__slot:disabled { cursor: default; }
button.cv__slot:disabled:not(.is-sel):not(.is-jam) { opacity: 1; }
.cv__slot.is-empty { border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); border: 2px dashed rgba(255, 255, 255, .7); }
.cv__slot.is-sel { transform: translateY(-4px); box-shadow: 0 var(--edge) 0 var(--c-violet), inset 0 0 0 3px var(--c-violet); }
.cv__slot.is-done { background: #F2FFE6; }
.cv__slot.is-jam { background: #FFE9EE; box-shadow: 0 var(--edge) 0 var(--c-coral), inset 0 0 0 3px var(--c-coral); animation: pp-wiggle 420ms var(--ease-out); }
.cv__slot.is-work { animation: pp-wiggle 460ms var(--ease-out); }
.cv__no { position: absolute; top: 1px; left: 4px; font-size: .62rem; font-weight: var(--fw-black); color: var(--c-ink-2); }
.cv__slot.is-empty .cv__no { color: #fff; }
.cv__stop { position: absolute; right: -2px; top: -10px; font-size: 1.3rem; }
.cv__item { position: absolute; top: 0; width: calc(100% / var(--cols)); aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; transition: left 380ms var(--ease-out); pointer-events: none; }
.cv__item.is-still { transition: none; }
.cv__item svg { width: 74%; height: 74%; filter: drop-shadow(0 2px 0 rgba(46, 34, 87, .25)); transition: filter 200ms; }
.cv__item.is-dirty svg { filter: sepia(.9) saturate(1.4) brightness(.8) drop-shadow(0 2px 0 rgba(46, 34, 87, .25)); }
.cv__item.is-wet svg { filter: saturate(.8) brightness(1.05) drop-shadow(0 4px 0 rgba(66, 160, 220, .6)); }
.cv__item.is-clean::after { content: '✨'; position: absolute; top: -2px; right: 6%; font-size: .9rem; }
.cv__state { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; min-height: 1.7rem; }
.cv__tools { display: flex; gap: .5rem; }
.cv__tools[hidden] { display: none; }
.cv__palette { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; width: 100%; }
.cv__st { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 4.4rem; padding: .35rem .4rem .3rem; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: 0 var(--edge) 0 var(--c-line), inset 0 0 0 2px var(--c-line); font: inherit; cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.cv__st:active:not(:disabled) { transform: translateY(var(--edge)); box-shadow: 0 0 0; }
.cv__st:disabled { opacity: .55; cursor: default; }
.cv__stic { display: block; width: 2.9rem; height: 2.9rem; }
.cv__stic svg { width: 100%; height: 100%; }
.cv__stname { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.cv__run { display: inline-flex; align-items: center; gap: .4rem; }
.cv__run svg { width: 1.2em; height: 1.2em; }
.cv__bars { display: inline-flex; gap: 3px; }
.cv__bars i { display: block; width: 5px; height: 1em; border-radius: 2px; background: currentColor; }
.cv .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.cv .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.cv .paint__actions .cv__run { flex: 1 1 auto; min-width: 0; justify-content: center; }

/* ===== Trò 10: Mạch điện sống (.wr) ===== */
.wr { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.wr__goal { display: flex; flex-direction: column; gap: .35rem; width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); }
.wr__case { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .15rem .4rem; border-radius: var(--r-sm); }
.wr__case.is-now { background: #fff; box-shadow: inset 0 0 0 2px var(--c-violet); }
.wr__gsws, .wr__gdevs { display: flex; align-items: center; gap: .5rem; }
.wr__gsw { position: relative; display: block; width: 2.2rem; height: 2.2rem; }
.wr__gsw svg { width: 100%; height: 100%; }
.wr__gsw i { position: absolute; right: -2px; top: -4px; font-style: normal; font-size: .62rem; font-weight: var(--fw-black); background: var(--c-ink); color: #fff; border-radius: 50%; width: .95rem; height: .95rem; display: grid; place-items: center; }
.wr__garrow svg { width: 1.2rem; height: 1.2rem; color: var(--c-ink-2); }
.wr__gdev { display: flex; flex-direction: column; align-items: center; gap: 0; }
.wr__gdev b { font-size: .68rem; font-weight: var(--fw-black); color: var(--c-ink-2); }
.wr__gart { display: block; width: 2.3rem; height: 2.3rem; }
.wr__gart svg { width: 100%; height: 100%; }
.wr__gdev.is-off .wr__gart { filter: grayscale(1) brightness(.95); opacity: .55; }
.wr__gdev.is-dim .wr__gart { filter: drop-shadow(0 0 3px rgba(255, 210, 63, .85)); opacity: .85; }
.wr__gdev.is-bright .wr__gart, .wr__gdev.is-on .wr__gart { filter: drop-shadow(0 0 6px rgba(255, 210, 63, 1)); }
.wr__board { position: relative; width: 100%; border-radius: var(--r-md); background: linear-gradient(#EAF7E2, #D5EFD0); box-shadow: inset 0 0 0 4px var(--c-lime); }
.wr__board.is-ok { animation: pp-hop 700ms var(--ease-out); }
.wr__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wr__wire-ink { fill: none; stroke: var(--c-ink); stroke-width: 2.3; stroke-linecap: round; }
.wr__wire-col { fill: none; stroke-width: 1.15; stroke-linecap: round; }
.wr__wire-hit { fill: none; stroke: transparent; stroke-width: 5; cursor: pointer; pointer-events: stroke; }
.wr__part, .wr__bat { position: absolute; transform: translate(-50%, -50%); width: 16%; margin: 0; padding: 0; border: 0; background: none; font: inherit; }
.wr__bat { width: 13%; }
.wr__part { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
button.wr__part { pointer-events: auto; cursor: pointer; }
.wr__art { display: block; width: 100%; aspect-ratio: 1; }
.wr__art svg, .wr__bat svg { width: 100%; height: 100%; display: block; }
.wr__bat svg { transform: rotate(-90deg); }
.wr__lab { position: absolute; top: 100%; margin-top: -.1rem; font-size: .62rem; font-weight: var(--fw-black); color: var(--c-ink-2); white-space: nowrap; }
.wr__part--bulb.is-off .wr__art, .wr__part--buzzer.is-off .wr__art, .wr__part--fan.is-off .wr__art { filter: grayscale(1) brightness(.95); opacity: .6; }
.wr__part--bulb.is-dim .wr__art { filter: drop-shadow(0 0 4px rgba(255, 210, 63, .9)); opacity: .9; }
.wr__part--bulb.is-bright .wr__art { filter: drop-shadow(0 0 9px rgba(255, 210, 63, 1)) drop-shadow(0 0 3px #fff); }
.wr__part--buzzer.is-dim .wr__art { animation: pp-wiggle 1.1s linear infinite; }
.wr__part--buzzer.is-bright .wr__art { animation: pp-wiggle .35s linear infinite; }
.wr__part--fan .fan-blades { transform-origin: 50px 50px; }
.wr__part--fan.is-dim .fan-blades { animation: wr-spin 1.6s linear infinite; }
.wr__part--fan.is-bright .fan-blades { animation: wr-spin .45s linear infinite; }
@keyframes wr-spin { to { transform: rotate(360deg); } }
button.wr__part:active:not(:disabled) .wr__art { transform: scale(.94); }
.wr__bat.is-short { animation: pp-wiggle .5s linear infinite; filter: drop-shadow(0 0 6px var(--c-coral)); }
.wr__term { position: absolute; transform: translate(-50%, -50%); width: 6.5%; aspect-ratio: 1; min-width: 1.4rem; padding: 0; border: 3px solid var(--c-ink); border-radius: 50%; background: #fff; color: var(--c-ink); font-weight: var(--fw-black); font-size: .9rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-1) var(--ease-out); }
.wr__term.is-plus { background: #FFD6DE; }
.wr__term.is-minus { background: #D4E8FF; }
.wr__term.is-used { background: var(--c-sun); }
.wr__term.is-sel { transform: translate(-50%, -50%) scale(1.25); background: var(--c-violet); color: #fff; box-shadow: 0 0 0 4px rgba(123, 92, 255, .35); }
.wr__term:disabled { cursor: default; }
.wr__bar { display: flex; justify-content: center; min-height: 1.2rem; }
.wr__count { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.wr__check { display: inline-flex; align-items: center; gap: .4rem; }
.wr__check svg { width: 1.2em; height: 1.2em; }
.wr .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.wr .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.wr .paint__actions .wr__check { flex: 1 1 auto; min-width: 0; justify-content: center; }

/* ===== Trò 11: Vườn cây của bé (.gd) ===== */
.gd { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 36rem); margin-inline: auto; }
.gd__day { margin: 0; padding: .15rem 1rem; border-radius: var(--r-pill); background: var(--c-sun-soft); box-shadow: inset 0 0 0 2px var(--c-sun); font-weight: var(--fw-black); font-size: var(--fs-md); }
.gd__bed { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.6rem, 1fr)); gap: .5rem; width: 100%; padding: .5rem; border-radius: var(--r-md); background: #B98B5A; box-shadow: inset 0 0 0 4px #8E6838; }
.gd__bed.is-ok { animation: pp-hop 700ms var(--ease-out); box-shadow: inset 0 0 0 4px var(--c-lime); }
.gd__spot { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 11.5rem; padding: .3rem .2rem .4rem; border-radius: var(--r-sm); transition: box-shadow var(--dur-1) var(--ease-out); }
.gd__spot.is-l1 { background: #5E8A5E; }
.gd__spot.is-l2 { background: #A7C96A; }
.gd__spot.is-l3 { background: #FFE27A; }
.gd__spot.is-target { box-shadow: 0 0 0 3px var(--c-violet); }
.gd__spotlight { align-self: flex-start; }
.gd__light { display: inline-flex; align-items: center; padding: .05rem .3rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); }
.gd__light svg { width: 1.1rem; height: 1.1rem; }
.gd__hit { display: flex; justify-content: center; width: 100%; flex: 1; margin: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.gd__hit:disabled { cursor: default; }
.gd__hit--empty { min-height: 6rem; border-radius: var(--r-sm); border: 3px dashed rgba(255, 255, 255, .8); }
.gd__plant { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 100%; padding: .1rem; border-radius: var(--r-sm); }
.gd__plant.is-sel { box-shadow: 0 0 0 3px var(--c-violet); background: rgba(255, 255, 255, .35); }
.gd__art { display: block; width: 3.6rem; height: 3.6rem; margin-bottom: -.5rem; z-index: 1; transition: transform 300ms var(--ease-out); }
.gd__art svg { width: 100%; height: 100%; }
.gd__plant.sp-fern .gd__art svg { filter: hue-rotate(-30deg) saturate(1.2); }
.gd__plant.sp-cactus .gd__art svg { filter: hue-rotate(20deg) saturate(.9) brightness(.95); }
.gd__plant.sp-daisy .gd__art svg { filter: hue-rotate(60deg); }
.gd__plant.is-dead .gd__art svg { filter: grayscale(1) brightness(.8); }
.gd__plant.is-dead .gd__art { transform: rotate(-24deg); }
.gd__plant.is-done .gd__art { animation: pp-float 1.6s ease-in-out infinite; }
.gd__plant.is-done .gd__art::after { content: '✨'; position: absolute; top: -.2rem; right: -.2rem; }
.gd__pot { display: block; width: 3.2rem; height: 1.7rem; border-radius: .3rem .3rem 1rem 1rem; background: #E07B4F; box-shadow: inset 0 0 0 3px var(--c-ink); }
.gd__plant.sp-fern .gd__pot { background: #5FA3D9; }
.gd__plant.sp-cactus .gd__pot { background: #D9A441; }
.gd__plant.sp-daisy .gd__pot { background: #C078D9; }
.gd__name { font-size: .72rem; font-weight: var(--fw-black); line-height: 1.1; text-align: center; background: rgba(255, 255, 255, .85); padding: 0 .35rem; border-radius: var(--r-pill); }
.gd__need { display: block; }
.gd__hearts { display: flex; gap: 1px; }
.gd__heart { display: block; width: .95rem; height: .95rem; }
.gd__heart svg { width: 100%; height: 100%; }
.gd__heart.is-lost { filter: grayscale(1) opacity(.45); }
.gd__grow { display: flex; gap: 2px; }
.gd__grow i { display: block; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.gd__grow i.is-on { background: var(--c-lime); }
.gd__gauge { position: relative; display: block; width: 88%; height: .8rem; border-radius: var(--r-pill); background: #8E6838; box-shadow: inset 0 0 0 2px var(--c-ink); overflow: hidden; }
.gd__gauge i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.gd__band { background: rgba(124, 212, 63, .75); border-inline: 2px solid #fff; }
.gd__plus { background: rgba(46, 159, 214, .45); transition: width 250ms var(--ease-out); }
.gd__level { background: #2E9FD6; transition: width 350ms var(--ease-out); height: 45%; top: 28% !important; border-radius: var(--r-pill); }
.gd__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 1.1rem; }
.gd__chip { padding: 0 .4rem; border-radius: var(--r-pill); font-size: .62rem; font-weight: var(--fw-black); background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-line); animation: pp-pop-in 250ms var(--ease-out); }
.gd__chip.is-good { background: #E0F6CF; box-shadow: inset 0 0 0 1.5px var(--c-lime-deep); }
.gd__chip.is-bad { background: #FFE9EE; box-shadow: inset 0 0 0 1.5px var(--c-coral); }
.gd__drop { position: absolute; right: .25rem; top: .25rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--c-line), inset 0 0 0 2px var(--c-sky); cursor: pointer; }
.gd__drop svg { width: 1.3rem; height: 1.3rem; }
.gd__drop b { position: absolute; right: -.25rem; bottom: -.25rem; min-width: 1rem; height: 1rem; border-radius: 50%; background: var(--c-sky); color: #fff; font-size: .65rem; display: grid; place-items: center; }
.gd__drop:disabled { opacity: .5; cursor: default; }
.gd .paint__actions { flex-wrap: nowrap; justify-content: center; gap: .4rem; }
.gd .paint__actions .gd__next, .gd .paint__actions .gd__ff { flex: 1 1 auto; min-width: 0; justify-content: center; padding-inline: .8rem; }
.gd .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.gd__next, .gd__ff { display: inline-flex; align-items: center; gap: .35rem; }
.gd__next svg, .gd__ff svg { width: 1.1em; height: 1.1em; }
.gd .paint__actions .gd__next, .gd .paint__actions .gd__ff { white-space: nowrap; font-size: var(--fs-sm); padding-inline: .6rem; }

/* ===== Trò 12: Bếp bánh chia phần (.sh) ===== */
.sh { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.sh__plates { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; width: 100%; }
.sh__plates.is-ok { animation: pp-hop 700ms var(--ease-out); }
.sh__plate { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 6.6rem; padding: .3rem .2rem .4rem; border-radius: var(--r-md); background: #fff; box-shadow: 0 var(--edge) 0 var(--c-line), inset 0 0 0 3px var(--c-line); }
.sh__plate.is-more { box-shadow: 0 var(--edge) 0 var(--c-coral), inset 0 0 0 3px var(--c-coral); }
.sh__plate.is-less { box-shadow: 0 var(--edge) 0 var(--c-sky), inset 0 0 0 3px var(--c-sky); }
.sh__hero { display: block; width: 2.2rem; height: 2.2rem; }
.sh__hero svg { width: 100%; height: 100%; }
.sh__dish { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 1px; width: 5.6rem; min-height: 4.4rem; padding: .2rem; border-radius: 50%; background: radial-gradient(circle, #FFF 55%, #E8ECFA 100%); box-shadow: inset 0 0 0 2px var(--c-line); }
.sh__tok { display: block; width: 1.35rem; height: 1.35rem; animation: pp-pop-in 220ms var(--ease-out); }
.sh__tok svg { width: 100%; height: 100%; }
.sh__plate.is-many .sh__tok { width: 1rem; height: 1rem; }
.sh__count { font-size: var(--fs-md); font-weight: var(--fw-black); }
.sh__tag { position: absolute; top: -.5rem; right: -.3rem; padding: 0 .4rem; border-radius: var(--r-pill); font-size: .65rem; font-weight: var(--fw-black); color: #fff; }
.sh__tag.is-more { background: var(--c-coral); }
.sh__tag.is-less { background: var(--c-sky); }
.sh__ctl { display: flex; gap: .4rem; }
.sh__btn { width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 50%; background: #FFE9EE; box-shadow: 0 3px 0 #E7B9C5; font: inherit; font-size: 1.5rem; font-weight: var(--fw-black); line-height: 1; cursor: pointer; }
.sh__btn--plus { background: #E0F6CF; box-shadow: 0 3px 0 var(--c-lime-deep); }
.sh__btn:disabled { opacity: .4; cursor: default; }
.sh__tray { width: 100%; padding: .5rem .7rem; border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); }
.sh__tray.is-empty { opacity: .7; }
.sh__traylab { font-weight: var(--fw-black); }
.sh__items { display: flex; flex-wrap: wrap; gap: 2px; min-height: 1.6rem; margin-top: .25rem; }
.sh__target { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; padding: .3rem .8rem; border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); font-weight: var(--fw-black); }
.sh__frac { display: inline-flex; flex-direction: column; align-items: center; min-width: 1.6rem; line-height: 1; font-size: var(--fs-lg); }
.sh__frac i { display: block; width: 100%; height: 3px; margin: 2px 0; background: var(--c-ink); border-radius: 2px; }
.sh__cakebox { width: min(100%, 24rem); }
.sh__cakebox.is-ok { animation: pp-hop 700ms var(--ease-out); }
.sh__cake { display: block; width: 100%; height: auto; overflow: visible; }
.sh__part { stroke: var(--c-ink); stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill 200ms; }
.sh__part.is-big { stroke: var(--c-coral); stroke-width: 2.6; }
.sh__part.is-small { stroke: var(--c-sky); stroke-width: 2.6; }
.sh__grid { stroke: rgba(46, 34, 87, .22); stroke-width: .5; stroke-dasharray: 1.4 1.4; pointer-events: none; }
.sh__cut { stroke: var(--c-ink); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.sh__spot { cursor: pointer; }
.sh__hit { fill: transparent; }
.sh__dot { fill: #fff; stroke: var(--c-ink); stroke-width: 1; }
.sh__spot.is-on .sh__dot { fill: var(--c-coral); }
.sh__spot:focus-visible .sh__dot { stroke-width: 2; }
.sh__info { margin: 0; font-weight: var(--fw-bold); color: var(--c-ink-2); }
.sh .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.sh .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.sh .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.sh .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 13: Bánh răng chuyển động (.gr) ===== */
.gr { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 36rem); margin-inline: auto; }
.gr__goal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin: 0; padding: .3rem .8rem; border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); font-weight: var(--fw-black); }
.gr__star { color: var(--c-sun-deep); font-size: 1.3em; line-height: 1; }
.gr__chip { padding: .1rem .55rem; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 2px var(--c-sun); }
.gr__stage { width: 100%; border-radius: var(--r-md); background: #F1F6FF; box-shadow: inset 0 0 0 3px var(--c-line); padding: .3rem; }
.gr__board { display: block; width: 100%; height: auto; max-height: 20rem; overflow: visible; }
.gr__board.is-ok { animation: pp-hop 700ms var(--ease-out); }
.gr__spin { transform-box: fill-box; transform-origin: center; }
.gr__body { stroke: var(--c-ink); stroke-width: 1.6; stroke-linejoin: round; fill: var(--c-sun); }
.gr__body.gr-t8 { fill: #7EDCC8; }
.gr__body.gr-t12 { fill: #B9E87A; }
.gr__body.gr-t16 { fill: var(--c-sun); }
.gr__body.gr-t24 { fill: #FF9C8A; }
.gr__body.is-driver { fill: #B7A2FF; }
.gr__body.is-bad { stroke: #E0334D; stroke-width: 3; fill: #FFC2CB; }
.gr__hub { fill: #fff; stroke: var(--c-ink); stroke-width: 1.4; }
.gr__hub.is-driver { fill: var(--c-ink); }
.gr__num { font-weight: 900; fill: var(--c-ink); pointer-events: none; font-family: inherit; }
.gr__hub.is-driver + .gr__num { fill: #fff; }
.gr__ring { fill: none; stroke: var(--c-sun-deep); stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.gr__ring.is-ok { stroke: var(--c-lime-deep); stroke-dasharray: none; }
.gr__peg { cursor: pointer; outline: none; }
.gr__peg.is-locked { cursor: default; }
.gr__pin { fill: var(--c-ink-2); }
.gr__ghost { fill: rgba(94, 74, 200, .08); stroke: var(--c-violet); stroke-width: 2; stroke-dasharray: 5 5; pointer-events: none; }
.gr__tstar { fill: var(--c-sun-deep); stroke: var(--c-ink); stroke-width: 1; pointer-events: none; }
.gr__hit { fill: transparent; }
.gr__peg:focus-visible .gr__hit { stroke: var(--c-violet); stroke-width: 3; }
.gr__tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.5rem; padding: .4rem; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px var(--c-line); }
.gr__slot { display: flex; align-items: center; justify-content: center; padding: .15rem; border: 0; border-radius: var(--r-md); background: transparent; cursor: pointer; }
.gr__slot.is-sel { background: #E9E2FF; box-shadow: 0 0 0 3px var(--c-violet); }
.gr__slot.is-used { opacity: .3; cursor: default; }
.gr__mini { display: block; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes pp-gr-cw { from { transform: rotate(var(--r0, 0deg)); } to { transform: rotate(calc(var(--r0, 0deg) + 360deg)); } }
  @keyframes pp-gr-ccw { from { transform: rotate(var(--r0, 0deg)); } to { transform: rotate(calc(var(--r0, 0deg) - 360deg)); } }
}
.gr .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.gr .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.gr .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.gr .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 14: Săn bóng và ánh sáng (.sd) ===== */
.sd { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 36rem); margin-inline: auto; }
.sd__goal { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .3rem .9rem; border-radius: var(--r-md); background: var(--c-sun-soft); box-shadow: inset 0 0 0 3px var(--c-sun); font-weight: var(--fw-black); }
.sd__star { color: var(--c-sun-deep); font-size: 1.3em; line-height: 1; }
.sd__scene { position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 3px var(--c-line), 0 var(--edge) 0 var(--c-line); }
.sd__scene.is-ok { animation: pp-hop 700ms var(--ease-out); }
.sd__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd__sky { fill: #CFEAFF; }
.sd__ground { fill: #9AD98B; }
.sd__line { stroke: var(--c-ink); stroke-width: .07; }
.sd__tick { stroke: var(--c-ink); stroke-width: .05; opacity: .55; }
.sd__zone { fill: rgba(255, 214, 90, .55); stroke: var(--c-sun-deep); stroke-width: .06; stroke-dasharray: .2 .14; }
.sd__zone.is-ok { fill: rgba(140, 220, 100, .75); stroke: var(--c-lime-deep); stroke-dasharray: none; }
.sd__ray { stroke: #FFB400; stroke-width: .06; stroke-dasharray: .22 .16; opacity: .9; }
.sd__ray.is-after { opacity: .55; }
.sd__shadow { fill: #3C3A5C; opacity: .85; }
.sd__shadow.is-ok { fill: #2E6B2E; }
.sd__layer { position: absolute; inset: 0; pointer-events: none; }
.sd__layer > * { position: absolute; transform: translate(-50%, -50%); }
.sd__light { display: block; filter: drop-shadow(0 0 .5rem rgba(255, 200, 0, .8)); pointer-events: none; }
.sd__light svg, .sd__obj svg { width: 100%; height: 100%; display: block; }
.sd__obj { display: block; pointer-events: none; }
.sd__flag { display: block; pointer-events: none; font-size: 1.4rem; line-height: 1; color: var(--c-sun-deep); text-align: center; -webkit-text-stroke: 1px var(--c-ink); }
.sd__flagpole { display: block; }
.sd__dot { pointer-events: auto; width: 1.8rem; height: 1.8rem; padding: 0; border: 3px dashed var(--c-violet); border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; }
.sd__dot--ground { width: 1.5rem; height: 1.5rem; border-color: #4F8F3F; }
.sd__dot:hover:not(:disabled), .sd__dot:focus-visible { background: #fff; border-style: solid; }
.sd__dot:disabled { cursor: default; opacity: .5; }
.sd__tray { display: flex; justify-content: center; gap: .6rem; }
.sd__pick { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 5rem; padding: .3rem; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px var(--c-line); font: inherit; font-weight: var(--fw-black); cursor: pointer; }
.sd__pick svg { width: 2.6rem; height: 2.6rem; }
.sd__pick i { font-style: normal; font-size: var(--fs-sm); }
.sd__pick.is-sel { box-shadow: inset 0 0 0 3px var(--c-violet); background: #EFE9FF; }
.sd .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.sd .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.sd .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.sd .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 15: Thám tử tìm luật (.rh) ===== */
.rh { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 36rem); margin-inline: auto; }
.rh__gate { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .8rem; border-radius: var(--r-md); background: #EDE9FF; box-shadow: inset 0 0 0 3px var(--c-violet); }
.rh__door { flex: none; width: 2.2rem; height: 2.6rem; border-radius: .6rem .6rem .2rem .2rem; background: #8D7BE0; box-shadow: inset 0 0 0 3px var(--c-ink); transition: background 200ms; }
.rh__gate.is-yes .rh__door { background: #7ED66B; }
.rh__gate.is-no .rh__door { background: #FF8A8A; }
.rh__gate.is-ok .rh__door { background: #7ED66B; }
.rh__gatemsg { margin: 0; font-weight: var(--fw-black); min-height: 1.3em; }
.rh__hist { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; min-height: 2.4rem; }
.rh__empty { color: var(--c-ink-2); font-weight: var(--fw-bold); }
.rh__chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .4rem .1rem .3rem; border-radius: var(--r-pill); background: #fff; font-weight: var(--fw-black); box-shadow: inset 0 0 0 2px var(--c-line); animation: pp-pop-in 220ms var(--ease-out); }
.rh__chip.is-yes { box-shadow: inset 0 0 0 2px #4CC96B; }
.rh__chip.is-no { box-shadow: inset 0 0 0 2px #FF6B6B; }
.rh__chip i { font-style: normal; }
.rh__chip.is-yes i { color: #2F9E4A; }
.rh__chip.is-no i { color: #E0334D; }
.rh__count { margin: 0; font-weight: var(--fw-black); color: var(--c-ink-2); }
.rh__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; width: 100%; }
.rh__card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: .2rem; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: 0 var(--edge) 0 var(--c-line), inset 0 0 0 3px var(--c-line); cursor: pointer; }
.rh__card:disabled { cursor: default; }
.rh__card.is-tested { opacity: .95; }
.rh__card.is-yes { box-shadow: 0 var(--edge) 0 #4CC96B, inset 0 0 0 3px #4CC96B; background: #F1FFF0; }
.rh__card.is-no { box-shadow: 0 var(--edge) 0 #FF6B6B, inset 0 0 0 3px #FF6B6B; background: #FFF3F3; }
.rh__card.is-picked { box-shadow: 0 var(--edge) 0 var(--c-violet), inset 0 0 0 4px var(--c-violet); background: #EFE9FF; }
.rh__shape { display: block; width: 78%; height: auto; }
.rh__badge { position: absolute; top: -.35rem; right: -.35rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: .85rem; color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.rh__badge.is-yes { background: #4CC96B; }
.rh__badge.is-no { background: #FF6B6B; }
.rh .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.rh .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.rh .paint__actions .btn--round[hidden] { display: none; }
.rh .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.rh .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 16: Bản đồ kho báu (.tr) ===== */
.tr { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.tr__clues { display: flex; flex-direction: column; gap: .4rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.tr__clue { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border-radius: var(--r-md); background: #FFF6D8; box-shadow: inset 0 0 0 3px var(--c-sun); font-weight: var(--fw-bold); }
.tr__clue.is-yes { background: #EFFFEA; box-shadow: inset 0 0 0 3px #4CC96B; }
.tr__clue.is-no { background: #FFF0F0; box-shadow: inset 0 0 0 3px #FF6B6B; }
.tr__cicon { display: inline-flex; gap: .1rem; flex: none; }
.tr__cicon svg { width: 2rem; height: 2rem; display: block; }
.tr__ctext { flex: 1; }
.tr__mark { font-style: normal; font-weight: 900; min-width: 1.2rem; text-align: center; }
.tr__clue.is-yes .tr__mark { color: #2F9E4A; }
.tr__clue.is-no .tr__mark { color: #E0334D; }
.tr__mapwrap { position: relative; width: 100%; }
.tr__map { display: grid; width: 100%; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 var(--edge) 0 var(--c-line), inset 0 0 0 3px var(--c-line); background: #CDEBA5; }
.tr__map.is-ok { animation: pp-hop 700ms var(--ease-out); }
.tr__cell { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: #CDEBA5; font: inherit; cursor: pointer; }
.tr__cell.is-alt { background: #BFE393; }
.tr__cell:disabled { cursor: default; }
.tr__cell.has-mark svg { width: 78%; height: 78%; }
.tr__cell:not(:disabled):hover { background: #E8F7C9; }
.tr__cell.is-sel { box-shadow: inset 0 0 0 4px var(--c-coral); }
.tr__cell.is-found { box-shadow: inset 0 0 0 4px #FFC700; background: #FFF3B0; }
.tr__x { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 900; color: #D63B3B; animation: pp-pop-in 200ms var(--ease-out); }
.tr__x svg { width: 70%; height: 70%; }
.tr__compass { position: absolute; top: .3rem; right: .3rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 2px var(--c-ink); pointer-events: none; }
.tr__compass b { position: absolute; font-size: .7rem; line-height: 1; }
.tr__c-n { top: 2px; left: 50%; transform: translateX(-50%); color: #D63B3B; }
.tr__c-s { bottom: 2px; left: 50%; transform: translateX(-50%); }
.tr__c-e { right: 3px; top: 50%; transform: translateY(-50%); }
.tr__c-w { left: 3px; top: 50%; transform: translateY(-50%); }
.tr .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.tr .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.tr .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.tr .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 17: Đường ống dẫn nước (.pi) ===== */
.pi { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 30rem); margin-inline: auto; }
.pi__goal { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; }
.pi__chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .7rem .15rem .4rem; border-radius: var(--r-pill); background: #E4F2FF; box-shadow: inset 0 0 0 2px var(--c-sky); font-weight: var(--fw-black); }
.pi__chip.is-dry { background: #FFF0F0; box-shadow: inset 0 0 0 2px #FF6B6B; }
.pi__chip svg { width: 1.5rem; height: 1.5rem; display: block; }
.pi__grid { display: grid; gap: 3px; width: 100%; padding: 4px; border-radius: var(--r-md); background: #B98E5C; box-shadow: 0 var(--edge) 0 #8F6A3D; }
.pi__grid.is-ok { animation: pp-hop 700ms var(--ease-out); }
.pi__tile { position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: .5rem; background: #E7D2AE; cursor: pointer; overflow: visible; }
.pi__tile:disabled { cursor: default; }
.pi__tile--empty { background: #D3B98A; }
.pi__tile--pipe { background: #F4E6C8; }
.pi__tile--plant, .pi__tile--dry { background: #F4E6C8; }
.pi__tile--src { background: #D6ECFF; box-shadow: inset 0 0 0 3px #4DA3FF; }
.pi__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pi__rot { transition: transform 180ms var(--ease-out); transform-origin: 50% 50%; }
.pi__edge, .pi__edgec { stroke: var(--c-ink); fill: var(--c-ink); }
.pi__edge { fill: none; }
.pi__edgec { stroke: none; }
.pi__fill { stroke: #A6B0DA; fill: none; transition: stroke 200ms; }
.pi__fillc { fill: #A6B0DA; transition: fill 200ms; }
.is-wet .pi__fill { stroke: #4DA3FF; }
.is-wet .pi__fillc { fill: #4DA3FF; }
.pi__ico { position: absolute; inset: 14%; display: grid; place-items: center; pointer-events: none; }
.pi__ico svg { width: 100%; height: 100%; }
.pi__ico--src { inset: 26%; padding: 4%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--c-ink); color: #2E78C8; }
.pi__ico--dst { transition: transform 300ms var(--ease-out), filter 300ms; filter: grayscale(.7) opacity(.75); }
.pi__tile--plant.is-wet .pi__ico--dst { transform: scale(1.25); filter: none; }
.pi__tile--plant.is-wet { background: #DFF3FF; box-shadow: inset 0 0 0 3px #4DA3FF; }
.pi__tile--dry { box-shadow: inset 0 0 0 3px #FF6B6B; background: #FFF3F3; }
.pi__tile--dry.is-wet { background: #BBD8FF; }
.pi__ico--dry { filter: grayscale(.2); }
.pi__leaks { position: absolute; inset: 0; pointer-events: none; }
.pi__drip { position: absolute; width: 38%; height: 38%; transform: translate(-50%, -50%); animation: pp-pop-in 240ms var(--ease-out); }
.pi__drip svg { width: 100%; height: 100%; display: block; }
.pi .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.pi .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.pi .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.pi .paint__actions .btn--accent svg { width: 1.2em; height: 1.2em; }

/* ===== Trò 18: Nhạc trưởng tí hon (.rm) ===== */
.rm { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.rm__stage { display: flex; justify-content: center; align-items: flex-end; gap: .6rem; padding: .5rem .8rem; width: 100%; min-height: 5.2rem; border-radius: var(--r-md); background: linear-gradient(#FFF7DC, #FFE9B0); box-shadow: inset 0 0 0 3px #F2D58A; }
.rm__stagei { display: block; width: 4rem; height: 4rem; transform-origin: 50% 90%; filter: saturate(.85); }
.rm__stagei.is-play { filter: none; }
.rm__art, .rm__art svg { display: block; width: 100%; height: 100%; }
.rm__row { display: flex; justify-content: center; }
.rm__btn { display: inline-flex; align-items: center; gap: .4rem; }
.rm__btn svg { width: 1.2em; height: 1.2em; }
.rm__strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; width: 100%; padding: 4px; border-radius: var(--r-md); background: #E9E4FF; box-shadow: 0 var(--edge) 0 #C7BEF2; }
.rm__strip--ref { background: #FFF; box-shadow: inset 0 0 0 3px #C7BEF2; }
.rm__strip.is-ok { animation: pp-hop 700ms var(--ease-out); }
.rm__cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 6%; border: 0; border-radius: .5rem; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 2px #D6D0F0; }
.rm__cell:disabled { cursor: default; }
.rm__cell em { position: absolute; left: 4px; top: 1px; font-style: normal; font-size: .7rem; font-weight: var(--fw-black); color: #7A74A8; }
.rm__cell .rm__art { width: 82%; height: 82%; }
.rm__cell.is-rest { background: #F6F4FF; }
.rm__dot { display: block; width: 28%; aspect-ratio: 1; border-radius: 50%; background: #D6D0F0; }
.rm__c--red.rm__cell:not(.is-rest) { background: #FFE3E3; box-shadow: inset 0 0 0 3px #FF6B6B; }
.rm__c--yellow.rm__cell:not(.is-rest) { background: #FFF4C2; box-shadow: inset 0 0 0 3px #E8B800; }
.rm__c--blue.rm__cell:not(.is-rest) { background: #DDEEFF; box-shadow: inset 0 0 0 3px #4DA3FF; }
.rm__c--green.rm__cell:not(.is-rest) { background: #DFF7E2; box-shadow: inset 0 0 0 3px #3FAE55; }
.rm__cell.is-now { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 4px var(--c-ink); z-index: 1; }
.rm__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.rm__pad { display: grid; justify-items: center; gap: 2px; width: 4.6rem; padding: .35rem .2rem; border: 0; border-radius: var(--r-md); background: #fff; cursor: pointer; box-shadow: inset 0 0 0 3px #D6D0F0; font-weight: var(--fw-black); font-size: .8rem; }
.rm__pad .rm__art { width: 2.8rem; height: 2.8rem; }
.rm__pad.is-sel { box-shadow: inset 0 0 0 4px var(--c-ink); transform: translateY(-2px); }
.rm__pad:disabled { cursor: default; opacity: .7; }
.rm__pad .rm__dot { width: 1rem; margin: 1.1rem 0; }
.rm__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; width: 100%; }
.rm__rule { display: flex; gap: .5rem; align-items: center; padding: .3rem .7rem; border-radius: var(--r-pill); background: #F4F1FF; box-shadow: inset 0 0 0 2px #D6D0F0; font-weight: var(--fw-black); }
.rm__rule i { font-style: normal; width: 1.4rem; text-align: center; color: #9C95C9; }
.rm__rule.is-held { background: #E3F8E6; box-shadow: inset 0 0 0 2px #3FAE55; }
.rm__rule.is-held i { color: #1E8A37; }
.rm .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.rm .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.rm .paint__actions .btn--accent, .rm .paint__actions .rm__btn { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; }
.rm .paint__actions svg { width: 1.2em; height: 1.2em; }
@media (prefers-reduced-motion: no-preference) {
  .rm__stagei.is-play[data-move="bounce"] { animation: rm-bounce 260ms var(--ease-out); }
  .rm__stagei.is-play[data-move="swing"] { animation: rm-swing 380ms ease-in-out; }
  .rm__stagei.is-play[data-move="sway"] { animation: rm-sway 400ms ease-in-out; }
  .rm__stagei.is-play[data-move="shake"] { animation: rm-shake 300ms linear; }
}
@keyframes rm-bounce { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(1.12, .84); } 65% { transform: translateY(-8px) scale(.96, 1.06); } }
@keyframes rm-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
@keyframes rm-sway { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-8px) rotate(-8deg); } 70% { transform: translateX(8px) rotate(8deg); } }
@keyframes rm-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(5px, -2px); } }
.rm .paint__actions .btn:not(.btn--round) { white-space: nowrap; padding-inline: .7rem; font-size: 1rem; }

/* ===== Trò 19: Sửa máy cùng robot (.rp) ===== */
.rp { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.rp__head { display: flex; align-items: center; gap: .7rem; width: 100%; }
.rp__bot { flex: none; display: block; width: 4.2rem; height: 4.4rem; }
.rp__bot svg { display: block; width: 100%; height: 100%; }
.rp__say { margin: 0; flex: 1; padding: .5rem .8rem; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px #C7BEF2; font-weight: var(--fw-black); }
.rp__signs { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; width: 100%; }
.rp__signs li { padding: .4rem .8rem .4rem 2rem; border-radius: var(--r-md); background: #FFF4C2; box-shadow: inset 0 0 0 2px #E8B800; font-weight: var(--fw-black); position: relative; }
.rp__signs li::before { content: '!'; position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; display: grid; place-items: center; border-radius: 50%; background: #E8B800; color: #fff; font-size: .8rem; }
.rp__signs.is-done { opacity: .75; }
.rp__ask { display: grid; gap: .4rem; width: 100%; }
.rp__q { margin: 0; text-align: center; font-weight: var(--fw-black); }
.rp__opts { display: grid; gap: .4rem; }
.rp__opt { padding: .6rem .9rem; border: 0; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px #C7BEF2, 0 var(--edge) 0 #C7BEF2; font: inherit; font-weight: var(--fw-black); text-align: left; cursor: pointer; }
.rp__opt:active:not(:disabled) { transform: translateY(2px); }
.rp__opt.is-bad { opacity: .5; box-shadow: inset 0 0 0 3px #FF6B6B; text-decoration: line-through; }
.rp__fix { width: 100%; }
.rp__ask[hidden], .rp__fix[hidden] { display: none; }

/* ===== Trò 20: Truyện tương tác bằng đồ vật (.st) ===== */
.st { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 34rem); margin-inline: auto; }
.st__intro { margin: 0; text-align: center; font-weight: var(--fw-black); }
.st__scene { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25), 0 var(--edge) 0 rgba(43, 42, 76, .2); }
.st__scene--meadow { background: linear-gradient(#BFE6FF 0 62%, #9AD98B 62%); }
.st__scene--room { background: linear-gradient(#FFEFC9 0 70%, #D9B488 70%); }
.st__scene--river { background: linear-gradient(#BFE6FF 0 40%, #9AD98B 40% 100%); }
.st__scene--sky { background: linear-gradient(#9FD3FF, #E4F4FF); }
.st__scene.is-ok { animation: pp-hop 700ms var(--ease-out); }
.st__prop { position: absolute; display: block; aspect-ratio: 1; transform: translate(-50%, -50%); }
.st__prop svg { display: block; width: 100%; height: 100%; }
.st__prop.is-new { animation: pp-pop-in 360ms var(--ease-out); }
.st__shade { position: absolute; inset: 0; background: rgba(20, 20, 60, .55); pointer-events: none; z-index: 2; }
.st__goals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.st__goal { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .8rem .2rem .5rem; border-radius: var(--r-pill); background: #F4F1FF; box-shadow: inset 0 0 0 2px #C7BEF2; font-weight: var(--fw-black); }
.st__goal i { font-style: normal; color: #9C95C9; }
.st__goal.is-ok { background: #E3F8E6; box-shadow: inset 0 0 0 2px #3FAE55; }
.st__goal.is-ok i { color: #1E8A37; }
.st__say { margin: 0; min-height: 1.5em; text-align: center; font-weight: var(--fw-black); }
.st__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.st__item { display: grid; justify-items: center; gap: 2px; width: 5.2rem; padding: .4rem .2rem; border: 0; border-radius: var(--r-md); background: #fff; cursor: pointer; box-shadow: inset 0 0 0 3px #C7BEF2, 0 var(--edge) 0 #C7BEF2; font-weight: var(--fw-black); font-size: .78rem; line-height: 1.15; text-align: center; }
.st__item svg { display: block; width: 3rem; height: 3rem; }
.st__item:active:not(:disabled) { transform: translateY(2px); }
.st__item.is-used { opacity: .45; filter: grayscale(.6); }
.st__item:disabled { cursor: default; }
.st .paint__actions .btn--round { width: 3.1rem; height: 3.1rem; }

/* ===== Bản mẫu A1: Đường đua cổng số (.ln) ===== */
.ln { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); width: min(100%, 24rem); margin-inline: auto; }
.ln__hud { margin: 0; min-height: 1.4em; font-weight: var(--fw-black); text-align: center; }
.ln__road { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-md); background: #5B5F7A; box-shadow: inset 0 0 0 4px #3C3A5C, 0 var(--edge) 0 #3C3A5C; touch-action: manipulation; }
.ln__dash { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: repeating-linear-gradient(#fff 0 14px, transparent 14px 34px); background-size: 6px 34px; opacity: .85; }
.is-moving .ln__dash { animation: ln-dash 420ms linear infinite; }
.ln__world { position: absolute; inset: 0; will-change: transform; }
.ln__row { position: absolute; left: 0; right: 0; }
.ln__target { position: absolute; left: 50%; top: -2%; transform: translateX(-50%); padding: .05rem .6rem; border-radius: var(--r-pill); background: #FFD23F; color: var(--c-ink); font-size: .9rem; box-shadow: 0 0 0 2px var(--c-ink); }
.ln__gate { position: absolute; top: 22%; bottom: 14%; display: grid; place-items: center; padding-inline: 8%; box-sizing: border-box; }
.ln__gate em { display: grid; place-items: center; width: 100%; height: 100%; max-height: 3.1rem; border-radius: .8rem; background: #fff; box-shadow: 0 0 0 3px var(--c-ink), 0 4px 0 3px rgba(0, 0, 0, .25); font-style: normal; font-weight: var(--fw-black); font-size: clamp(1rem, 6.4vw, 1.5rem); color: var(--c-ink); white-space: nowrap; }
.ln__gate--0 em { background: #FFE3E3; }
.ln__gate--1 em { background: #DDEEFF; }
.ln__gate--2 em { background: #FFF4C2; }
.ln__gate--3 em { background: #DFF7E2; }
.ln__gate.is-pass em { background: #B6F0BE; animation: ln-pass 520ms var(--ease-out); box-shadow: 0 0 0 3px #1E8A37, 0 0 0 8px rgba(91, 199, 107, .45); }
.ln__gate.is-bump em { background: #FFB9B9; animation: ln-bump 420ms linear; box-shadow: 0 0 0 3px #D63B3B; }
.ln__finish { position: absolute; left: 0; right: 0; background: repeating-conic-gradient(var(--c-ink) 0 25%, #fff 0 50%) 0 0 / 28px 28px; box-shadow: 0 0 0 3px var(--c-ink); }
.ln__tap { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 3; }
.ln__tap.is-far { background: rgba(20, 20, 60, .28); }
.ln__tap:disabled { cursor: default; }
.ln__car { position: absolute; top: 80%; width: 15%; aspect-ratio: .56; transform: translate(-50%, -50%); transition: left 260ms var(--ease-out), rotate 160ms; z-index: 2; pointer-events: none; }
.ln__car.is-right { rotate: 9deg; }
.ln__car.is-left { rotate: -9deg; }
.ln__car.is-bump { animation: ln-car-bump 420ms linear; }
.ln__car.is-win { animation: ln-car-win 900ms var(--ease-out); }
.ln__body { position: absolute; inset: 6% 8%; border-radius: 40% 40% 28% 28% / 26% 26% 20% 20%; background: #FF6B6B; box-shadow: 0 0 0 3px var(--c-ink); }
.ln__cab { position: absolute; left: 14%; right: 14%; top: 26%; height: 34%; border-radius: 30%; background: #BFE6FF; box-shadow: 0 0 0 2px var(--c-ink); }
.ln__lamp { position: absolute; top: 4%; width: 18%; height: 7%; border-radius: 50%; background: #FFF4A8; box-shadow: 0 0 0 2px var(--c-ink); }
.ln__lamp--l { left: 14%; }
.ln__lamp--r { right: 14%; }
.ln__wheel { position: absolute; width: 20%; height: 22%; border-radius: 22%; background: repeating-linear-gradient(#2B2A4C 0 5px, #555878 5px 10px); background-size: 100% 10px; box-shadow: 0 0 0 2px var(--c-ink); }
.is-moving .ln__wheel { animation: ln-wheel 160ms linear infinite; }
.ln__wheel--fl { left: -2%; top: 14%; }
.ln__wheel--fr { right: -2%; top: 14%; }
.ln__wheel--bl { left: -2%; bottom: 10%; }
.ln__wheel--br { right: -2%; bottom: 10%; }
.ln__puff { position: absolute; top: 88%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: translate(-50%, -50%); animation: ln-puff 560ms ease-out forwards; z-index: 1; pointer-events: none; }
.ln__ctrl { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; }
.ln__arrow { flex: none; width: 3.6rem; height: 3.6rem; }
.ln__go { flex: 1 1 auto; max-width: 11rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.ln__go svg { width: 1.2em; height: 1.2em; }
.ln__pause { display: inline-block; width: .9em; height: 1em; border-left: .3em solid currentColor; border-right: .3em solid currentColor; box-sizing: border-box; }
.ln__road.is-win { box-shadow: inset 0 0 0 4px #3FAE55, 0 var(--edge) 0 #3C3A5C; }
@keyframes ln-dash { to { background-position: 0 34px; } }
@keyframes ln-wheel { to { background-position: 0 10px; } }
@keyframes ln-puff { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, 90%) scale(2.2); } }
@keyframes ln-pass { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes ln-bump { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes ln-car-bump { 0%, 100% { translate: 0 0; } 25% { translate: 0 6px; } 55% { translate: 0 -4px; } }
@keyframes ln-car-win { 0% { scale: 1; } 30% { scale: 1.2; translate: 0 -8px; } 60% { scale: 1.1; rotate: 360deg; } 100% { scale: 1; rotate: 360deg; } }
:root[data-motion="reduced"] .ln__gate.is-pass em, :root[data-motion="reduced"] .ln__gate.is-bump em, :root[data-motion="reduced"] .ln__car.is-bump, :root[data-motion="reduced"] .ln__car.is-win, :root[data-motion="reduced"] .is-moving .ln__dash { animation: none; }

/* ===== Bản mẫu A2: Xe thang cứu bạn thú (.ld) ===== */
.ld { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: min(100%, 36rem); margin-inline: auto; }
.ld__goal { margin: 0; text-align: center; font-weight: var(--fw-black); }
.ld__scene { position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25), 0 var(--edge) 0 rgba(43, 42, 76, .2); }
.ld__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld__layer { position: absolute; inset: 0; }
.ld__sky { fill: #BFE6FF; }
.ld__ground { fill: #7CC96B; }
.ld__grid { stroke: rgba(255, 255, 255, .45); stroke-width: .03; }
.ld__num { font-size: .42px; font-size: .42px; text-anchor: middle; fill: #2B5A2B; font-weight: 800; font-family: inherit; }
.ld__pole, .ld__cap { stroke: var(--c-ink); stroke-width: .08; }
.ld__wire { stroke: #2B2A4C; stroke-width: .12; stroke-dasharray: .35 .2; }
.ld__wirepole { stroke: #2B2A4C; stroke-width: .12; }
.ld__bolt { fill: #FFD23F; stroke: #2B2A4C; stroke-width: .05; }
.ld__seg { stroke-width: .3; stroke-linecap: butt; }
.ld__seg--0 { stroke: #FF6B6B; }
.ld__seg--1 { stroke: #FFD23F; }
.ld__rung { stroke: #2B2A4C; stroke-width: .06; }
.ld__hinge { fill: #2B2A4C; }
.ld__arc { fill: none; stroke: #2B2A4C; stroke-width: .07; stroke-dasharray: .15 .1; }
.ld__deg { font-size: .5px; font-weight: 900; fill: #2B2A4C; text-anchor: middle; font-family: inherit; }
.ld__basket { fill: #FFA94D; stroke: #2B2A4C; stroke-width: .08; }
.ld__basket.is-ok { fill: #8BE08F; }
.ld__gap { stroke: #D63B3B; stroke-width: .08; stroke-dasharray: .2 .15; }
.ld__zone { fill: rgba(255, 210, 63, .18); stroke: #E8B800; stroke-width: .07; stroke-dasharray: .22 .14; }
.ld__zone.is-ok { fill: rgba(91, 199, 107, .3); stroke: #3FAE55; }
.ld__svg.is-zap .ld__wire { stroke: #FF3B3B; stroke-width: .2; }
.ld__truck { position: absolute; display: block; aspect-ratio: 2 / 1; pointer-events: none; }
.ld__truck svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ld__tb { fill: #FF5A5A; stroke: #2B2A4C; stroke-width: 2.5; }
.ld__tc { fill: #FF5A5A; stroke: #2B2A4C; stroke-width: 2.5; }
.ld__tw { fill: #BFE6FF; stroke: #2B2A4C; stroke-width: 2; }
.ld__tt { fill: #8B97C4; stroke: #2B2A4C; stroke-width: 2; }
.ld__wh circle { fill: #2B2A4C; stroke: #8B97C4; stroke-width: 3; }
.ld__legs rect { fill: #8B97C4; stroke: #2B2A4C; stroke-width: 2; opacity: 0; }
.ld__truck.is-set .ld__legs rect { opacity: 1; animation: ld-legs 400ms var(--ease-out); }
.ld__truck.is-driving .ld__wh { animation: ld-wheel 300ms linear infinite; transform-origin: 50% 80%; }
.ld__truck.is-driving svg { animation: ld-rock 300ms ease-in-out infinite; }
.ld__animal { position: absolute; display: block; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.ld__animal svg { display: block; width: 100%; height: 100%; }
.ld__animal.is-wave { animation: ld-wave 650ms ease-in-out; }
.ld__heart { position: absolute; display: block; aspect-ratio: 1; transform: translate(-50%, -50%); animation: ld-heart 900ms var(--ease-out) forwards; pointer-events: none; }
.ld__heart[hidden] { display: none; }
.ld__heart svg { display: block; width: 100%; height: 100%; }
.ld__spot { position: absolute; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c-ink); font-weight: var(--fw-black); font-size: .8rem; cursor: pointer; display: grid; place-items: center; }
.ld__spot.is-sel { background: #FFD23F; }
.ld__spot:disabled { cursor: default; opacity: .7; }
.ld__ctrl { display: grid; gap: .4rem; width: 100%; }
.ld__row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: .5rem; padding: .2rem .6rem; border-radius: var(--r-md); background: #F4F1FF; box-shadow: inset 0 0 0 2px #C7BEF2; }
.ld__lab { font-weight: var(--fw-black); }
.ld__val { min-width: 4.8rem; text-align: center; font-size: 1.15rem; }
.ld__pm { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; font-weight: var(--fw-black); line-height: 1; }
.ld .paint__actions { flex-wrap: nowrap; gap: .4rem; }
.ld .paint__actions .btn--round { flex: none; width: 3.1rem; height: 3.1rem; }
.ld .paint__actions .btn--accent { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.ld .paint__actions svg { width: 1.2em; height: 1.2em; }
@keyframes ld-wheel { to { transform: translateX(1px); } }
@keyframes ld-rock { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
@keyframes ld-legs { from { transform: translateY(-8px); } to { transform: translateY(0); } }
@keyframes ld-wave { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 12deg; } }
@keyframes ld-heart { 0% { opacity: 0; scale: .4; } 40% { opacity: 1; scale: 1.2; } 100% { opacity: 1; scale: 1; translate: 0 -40%; } }
:root[data-motion="reduced"] .ld__truck.is-driving svg, :root[data-motion="reduced"] .ld__animal.is-wave, :root[data-motion="reduced"] .ld__heart, :root[data-motion="reduced"] .ld__truck.is-set .ld__legs rect { animation: none; }

/* ===== Bản mẫu A3: Dẫn đàn thú về nhà (.hd) ===== */
.hd { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.hd__goal { margin: 0; display: flex; gap: .5em; align-items: center; justify-content: center; text-align: center; font-weight: var(--fw-black); }
.hd__goalIcon { width: 1.8em; height: 1.8em; display: inline-flex; }
.hd__goalIcon > * { width: 100%; height: 100%; }
.hd__board { position: relative; width: 100%; max-width: 560px; border-radius: var(--r-md); overflow: hidden; background: #A8DE8B; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25), 0 var(--edge) 0 rgba(43, 42, 76, .2); touch-action: manipulation; }
.hd__cell { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(43, 42, 76, .08); }
.hd__cell:disabled { cursor: default; }
.hd__cell--grass:nth-child(odd) { background: rgba(255, 255, 255, .08); }
.hd__cell--rock { background: #8FC878; cursor: default; }
.hd__prop { position: absolute; inset: 8%; display: block; }
.hd__prop > * { width: 100%; height: 100%; }
.hd__cell--water { background: repeating-linear-gradient(135deg, #5DB8F5 0 10px, #7CCBFA 10px 20px); }
.hd__cell--water::after { content: ''; position: absolute; left: 20%; right: 20%; top: 45%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .6); animation: hd-wave 2.4s ease-in-out infinite; }
.hd__cell.is-can::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 3px dashed rgba(43, 42, 76, .35); }
.hd__cell.is-bad { box-shadow: inset 0 0 0 3px #D63B3B; background-color: rgba(214, 59, 59, .18); animation: hd-bad 1.1s ease-in-out 2; }
.hd__pieces, .hd__home, .hd__piece { pointer-events: none; }
.hd__pieces { position: absolute; inset: 0; }
.hd__piece { position: absolute; display: flex; align-items: center; justify-content: center; }
.hd__piece.is-new { animation: pp-pop-in .28s var(--ease-out); }
.hd__art { position: relative; display: block; width: 78%; height: 78%; }
.hd__art--fence { background:
  linear-gradient(var(--c-ink), var(--c-ink)) 12% 0 / 12% 100% no-repeat,
  linear-gradient(var(--c-ink), var(--c-ink)) 44% 0 / 12% 100% no-repeat,
  linear-gradient(var(--c-ink), var(--c-ink)) 76% 0 / 12% 100% no-repeat,
  linear-gradient(#C98A4B, #C98A4B) 0 24% / 100% 18% no-repeat,
  linear-gradient(#C98A4B, #C98A4B) 0 62% / 100% 18% no-repeat; border-radius: 4px; }
.hd__art--bridge { background: repeating-linear-gradient(90deg, #C98A4B 0 22%, #8B5E34 22% 26%); border-radius: 4px; box-shadow: 0 0 0 3px var(--c-ink); height: 70%; }
.hd__piece--bridge.is-hit .hd__art { animation: hd-plank .4s ease-out; }
.hd__art--arrow { transform: rotate(var(--rot, 0deg)); width: 70%; height: 70%; transition: transform .2s var(--ease-out); }
.hd__art--arrow::before { content: ''; position: absolute; inset: 0; background: var(--c-ink); clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%); }
.hd__art--arrow::after { content: ''; position: absolute; inset: 10%; background: #FFC93C; clip-path: polygon(50% 0, 100% 48%, 70% 48%, 70% 100%, 30% 100%, 30% 48%, 0 48%); }
.hd__piece--arrow.is-hit .hd__art { animation: hd-sign .4s ease-out; }
.hd__home { position: absolute; display: flex; align-items: center; justify-content: center; }
.hd__house { display: block; width: 92%; height: 92%; transform-origin: 50% 90%; }
.hd__house > * { width: 100%; height: 100%; }
.hd__tag { position: absolute; right: 0; top: 0; width: 38%; height: 38%; padding: 2%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--c-ink); }
.hd__tag > * { width: 100%; height: 100%; }
.hd__home.is-in .hd__house { animation: hd-house .5s var(--ease-out); }
.hd__home.is-dance .hd__house { animation: hd-house .7s var(--ease-out) 2; }
.hd__home.is-in::after { content: '♥'; position: absolute; left: 40%; top: 10%; color: #E5484D; font-weight: var(--fw-black); animation: hd-heart 1s ease-out forwards; }
.hd__animal { position: absolute; left: 0; top: 0; transition: transform var(--tick, 640ms) linear; will-change: transform; pointer-events: none; }
.hd__body { position: absolute; inset: 6%; display: block; transform-origin: 50% 90%; animation: hd-breathe 3.2s ease-in-out infinite; }
.hd__sprite { display: block; width: 100%; height: 100%; transition: transform .2s; }
.hd__sprite > * { width: 100%; height: 100%; }
.hd__sprite.is-flip { transform: scaleX(-1); }
.hd__face { position: absolute; left: 50%; top: -4%; width: 0; height: 0; transform-origin: 0 55%; border: 6px solid transparent; border-bottom: 9px solid #fff; filter: drop-shadow(0 0 1.5px var(--c-ink)); margin-left: -6px; transition: transform .22s var(--ease-out); }
.hd__animal.is-walking .hd__gait--walk { animation: hd-walk var(--tick) ease-in-out infinite; }
.hd__animal.is-walking .hd__gait--waddle { animation: hd-waddle var(--tick) ease-in-out infinite; }
.hd__animal.is-walking .hd__gait--hop { animation: hd-hop var(--tick) ease-out infinite; }
.hd__animal.is-walking .hd__gait--flap { animation: hd-flap var(--tick) ease-in-out infinite; }
.hd__animal.is-bump .hd__body { animation: hd-bonk .45s ease-out; }
.hd__animal.is-home { transition: transform var(--tick, 640ms) linear, opacity .35s ease-in .1s; opacity: 0; }
.hd__animal.is-home .hd__body { animation: hd-enter .45s ease-in forwards; }
.hd__animal.is-lost .hd__body { animation: hd-sad 1.6s ease-in-out infinite; }
.hd__bubble { position: absolute; left: 50%; top: -22%; min-width: 46%; height: 40%; transform: translateX(-50%) scale(0); display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 2px var(--c-ink); font-weight: var(--fw-black); font-size: .8em; line-height: 1; transition: transform .18s var(--ease-out); z-index: 2; padding: 0 4%; }
.hd__bubble.is-on { transform: translateX(-50%) scale(1); }
.hd__bubble.is-low { top: 62%; left: 78%; }
.hd__bubble > * { height: 80%; width: auto; display: block; }
.hd__bubble > span { color: #D63B3B; }
.hd__bubble > svg, .hd__bubble > img { max-width: 70%; }
.hd__tray { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; width: 100%; }
.hd__tool { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; min-height: 76px; padding: 6px 10px; border: 3px solid var(--c-ink); border-radius: var(--r-md); background: #fff; font: inherit; font-weight: var(--fw-black); cursor: pointer; }
.hd__tool .hd__art { width: 40px; height: 32px; }
.hd__tool .hd__art--arrow { width: 32px; height: 32px; }
.hd__tool.is-sel { background: #FFE9A6; transform: translateY(-2px); box-shadow: 0 4px 0 rgba(43, 42, 76, .3); }
.hd__tool.is-empty:not(.is-sel) { opacity: .5; }
.hd__tool:disabled { cursor: default; }
.hd__toolName { font-size: .85em; }
.hd__left { font-style: normal; font-size: .8em; opacity: .75; }
.hd__dirs { display: flex; gap: var(--s-2); justify-content: center; opacity: .55; }
.hd__dirs[hidden] { display: none; }
.hd__dirs.is-active { opacity: 1; }
.hd__dir { width: 52px; height: 52px; border: 3px solid var(--c-ink); border-radius: var(--r-md); background: #fff; font: inherit; font-size: 1.3em; cursor: pointer; }
.hd__dir.is-sel { background: #FFE9A6; }
.hd__board.is-ok { box-shadow: inset 0 0 0 4px #4CAF50, 0 var(--edge) 0 rgba(43, 42, 76, .2); }
@keyframes hd-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes hd-walk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes hd-waddle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes hd-hop { 0% { transform: translateY(0) scale(1.08, .88); } 45% { transform: translateY(-34%) scale(.94, 1.08); } 100% { transform: translateY(0) scale(1.08, .88); } }
@keyframes hd-flap { 0%, 100% { transform: translateY(-4%) rotate(-4deg); } 50% { transform: translateY(-16%) rotate(4deg) scale(1.05, .94); } }
@keyframes hd-bonk { 0% { transform: rotate(0); } 25% { transform: rotate(-9deg) translateY(2%); } 60% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
@keyframes hd-enter { to { transform: scale(.2) translateY(-30%); } }
@keyframes hd-sad { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(2%); } }
@keyframes hd-house { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14, .9); } 70% { transform: scale(.96, 1.1); } }
@keyframes hd-heart { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-120%) scale(1.3); opacity: 0; } }
@keyframes hd-wave { 0%, 100% { transform: translateX(-12%); } 50% { transform: translateX(12%); } }
@keyframes hd-plank { 0% { transform: scale(1); } 40% { transform: scale(1.1, .85); } 100% { transform: scale(1); } }
@keyframes hd-sign { 0% { transform: rotate(var(--rot)) scale(1); } 40% { transform: rotate(var(--rot)) scale(1.3); } 100% { transform: rotate(var(--rot)) scale(1); } }
@keyframes hd-bad { 0%, 100% { background-color: rgba(214, 59, 59, .1); } 50% { background-color: rgba(214, 59, 59, .3); } }
@media (prefers-reduced-motion: reduce) { .hd__body, .hd__cell--water::after, .hd__animal.is-walking .hd__body { animation: none !important; } .hd__animal { transition-duration: .01ms !important; } }
html[data-motion=reduced] .hd__body, html[data-motion=reduced] .hd__cell--water::after, html[data-motion=reduced] .hd__animal.is-walking .hd__body, html[data-motion=reduced] .hd__cell.is-bad { animation: none !important; }
html[data-motion=reduced] .hd__animal { transition: none !important; }

/* ===== Bản mẫu B1: Garage sửa xe (.gr) ===== */
.gr { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.gr__goal, .gr__count { margin: 0; text-align: center; font-weight: var(--fw-black); }
.gr__count { font-size: .9em; opacity: .75; }
.gr__stage { position: relative; width: 100%; display: flex; justify-content: center; padding: var(--s-2) 0; border-radius: var(--r-md); background: linear-gradient(#E6EAF7, #D5DBEF); box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .2); overflow: hidden; }
.gr__veh { position: relative; width: min(46%, 190px); aspect-ratio: 100 / 150; transition: transform .6s cubic-bezier(.5, 0, .75, .4); }
.gr__shadow { position: absolute; inset: 6% 8%; border-radius: 22px; background: rgba(43, 42, 76, .22); filter: blur(6px); transform: translateY(3%); transition: transform .25s, opacity .25s; }
.gr__body { position: absolute; border-radius: 26px; background: var(--body, #4DA3FF); box-shadow: inset 0 0 0 4px var(--c-ink), inset 0 -10px 0 rgba(0, 0, 0, .12); animation: gr-breathe 3.6s ease-in-out infinite; transform-origin: 50% 60%; }
.gr__glass { position: absolute; left: 14%; right: 14%; top: 22%; height: 20%; border-radius: 8px; background: #CFEBFF; box-shadow: inset 0 0 0 3px var(--c-ink); }
.gr__lamp { position: absolute; top: 5%; width: 18%; height: 4.5%; border-radius: 4px; background: #FFE89A; box-shadow: 0 0 0 2px var(--c-ink); transition: background .3s, box-shadow .3s; }
.gr__lamp--l { left: 10%; } .gr__lamp--r { right: 10%; }
.gr__lamp.is-on { background: #FFF6C2; box-shadow: 0 0 0 2px var(--c-ink), 0 0 12px 4px rgba(255, 233, 130, .8); }
.gr__veh.is-lift { transform: scale(1.07) translateY(-3%); transition: transform .5s ease-out; }
.gr__veh.is-lift .gr__shadow { transform: translateY(8%) scale(.92); opacity: .5; }
.gr__veh.is-drive { transform: translateY(-165%); transition: transform 1s cubic-bezier(.55, 0, 1, .6); }
.gr__veh.is-drive .gr__wheel { animation: gr-spin .45s linear infinite; }
.gr__veh.is-bumpy { animation: gr-bump .42s ease-in-out 3; }
.gr__slot { position: absolute; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.gr__slot--s { width: 17%; }
.gr__slot:disabled { cursor: default; }
.gr__slot.is-empty { border: 3px dashed rgba(43, 42, 76, .5); background: rgba(255, 255, 255, .45); }
.gr__slot.is-hint { animation: gr-hint .6s ease-in-out 3; border-color: #D63B3B; }
.gr__slot.is-off .gr__wheel { animation: gr-off .42s ease-in forwards; }
.gr__slot.is-ok .gr__wheel { animation: gr-fine .5s ease-out; }
.gr__wheel { position: absolute; inset: 0; display: block; border-radius: 50%; background: radial-gradient(circle, #DDE1F2 0 26%, #2B2A4C 28% 100%); box-shadow: 0 0 0 2px var(--c-ink); }
.gr__wheel--s { inset: 16%; }
.gr__wheel--square { border-radius: 14%; }
.gr__wheel--triangle { border-radius: 0; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); box-shadow: none; }
.gr__wheel--oval { inset: 15% 0; border-radius: 50%; }
.gr__wheel.is-mount { animation: gr-mount .5s var(--ease-out); }
.gr__wheel.is-reject { animation: gr-reject .45s ease-in forwards; }
.gr__bolt { position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: #FFC93C; box-shadow: 0 0 0 2px var(--c-ink); }
.gr__bolt::after { content: ''; position: absolute; left: 10%; right: 10%; top: 44%; height: 12%; background: var(--c-ink); }
.is-mount .gr__bolt, .gr__wheel.is-mount .gr__bolt { animation: gr-bolt .6s ease-out .15s; }
.gr__tray { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; width: 100%; }
.gr__tray[hidden] { display: none; }
.gr__part { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; min-height: 76px; padding: 6px 10px; border: 3px solid var(--c-ink); border-radius: var(--r-md); background: #fff; font: inherit; font-weight: var(--fw-black); cursor: pointer; }
.gr__part.is-sel { background: #FFE9A6; transform: translateY(-2px); box-shadow: 0 4px 0 rgba(43, 42, 76, .3); }
.gr__part:disabled { opacity: .55; cursor: default; }
.gr__left { font-style: normal; font-size: .8em; opacity: .75; }
.gr__wheelIcon { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #DDE1F2 0 26%, #2B2A4C 28% 100%); box-shadow: 0 0 0 2px var(--c-ink); }
.gr__wheelIcon--s { width: 30px; height: 30px; margin: 7px 0; }
.gr__wheelIcon--square { border-radius: 14%; }
.gr__wheelIcon--triangle { border-radius: 0; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); box-shadow: none; }
.gr__wheelIcon--oval { height: 30px; margin: 7px 0; border-radius: 50%; }
.gr__panel { position: relative; width: min(92%, 360px); padding: 14px; border-radius: 22px; background: #FFD66B; box-shadow: inset 0 0 0 4px var(--c-ink), 0 6px 0 rgba(43, 42, 76, .2); transition: transform .5s ease-in; }
.gr__panel.is-lift { transform: scale(1.04); }
.gr__panel.is-drive { transform: translateY(-160%); transition: transform .9s ease-in; }
.gr__board { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 12px; justify-items: center; }
.gr__hole, .gr__shapePart, .gr__plug { position: relative; display: block; width: 72px; height: 72px; padding: 0; border: 0; cursor: pointer; }
.gr__hole { background: rgba(43, 42, 76, .55); }
.gr__hole.is-filled { background: rgba(43, 42, 76, .3); }
.gr__hole.is-hint { animation: gr-hint .6s ease-in-out 3; }
.gr__hole.is-reject, .gr__shapePart.is-reject { animation: gr-nope .45s ease-out; }
.gr__plug { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; }
.gr__plug.is-mount { animation: gr-mount .45s var(--ease-out); }
.gr__shape--circle { border-radius: 50%; }
.gr__shape--square { border-radius: 10%; }
.gr__shape--triangle { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.gr__shape--rect { height: 44px; margin: 14px 0; border-radius: 8%; }
.gr__hole.gr__shape--rect, .gr__shapePart.gr__shape--rect { height: 44px; }
.gr__plug.gr__shape--rect { height: 100%; margin: 0; }
.gr__size--s { transform: scale(.7); }
.gr__col--red { background: #E5484D; } .gr__col--blue { background: #4DA3FF; } .gr__col--yellow { background: #FFC93C; } .gr__col--green { background: #5BC76B; } .gr__col--pink { background: #FF8FB8; }
.gr__shapePart { box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .6); }
.gr__shapePart.is-sel { outline: 4px solid #FFC93C; outline-offset: 3px; }
.gr__shapePart.is-used { opacity: .25; }
.gr__shapePart:disabled { cursor: default; }
.gr__pumpArea { display: flex; gap: var(--s-4, 24px); align-items: flex-end; justify-content: center; padding: var(--s-3) 0; }
.gr__tireBox { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.gr__tire { position: relative; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, #E9ECF8 0 42%, #2B2A4C 44% 100%); box-shadow: 0 0 0 3px var(--c-ink); transform: scale(var(--s, .8), calc(var(--s, .8) * (.78 + var(--s, .8) * .22))); transition: transform .3s var(--ease-out); }
.gr__pumpArea--bike .gr__tire { background: radial-gradient(circle, #E9ECF8 0 62%, #2B2A4C 64% 100%); }
.gr__pumpArea--ball .gr__tire { background: radial-gradient(circle at 35% 30%, #FFE08A, #FF8A5B 70%); box-shadow: 0 0 0 3px var(--c-ink); }
.gr__rim { position: absolute; inset: 30%; border-radius: 50%; border: 3px dashed rgba(43, 42, 76, .35); }
.gr__pumpArea--ball .gr__rim { inset: 0; border: 0; background: repeating-linear-gradient(90deg, transparent 0 46%, rgba(43, 42, 76, .5) 46% 54%, transparent 54% 100%); border-radius: 50%; }
.gr__valve { position: absolute; right: 4%; top: 40%; width: 10px; height: 14px; border-radius: 3px; background: #FFC93C; box-shadow: 0 0 0 2px var(--c-ink); }
.gr__tire.is-squish { animation: gr-squish .32s ease-out; }
.gr__tire.is-full { box-shadow: 0 0 0 3px #D63B3B; }
.gr__puffs { position: absolute; right: 0; top: 40%; width: 0; height: 0; }
.gr__puff { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(43, 42, 76, .25); animation: gr-puff .7s ease-out forwards; }
.gr__puff--out { animation-name: gr-puff-out; }
.gr__gauge { position: relative; width: 34px; height: 190px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); overflow: hidden; }
.gr__gfill { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(#7FC8FF, #4DA3FF); transition: height .3s var(--ease-out); }
.gr__gzone { position: absolute; left: 0; right: 0; background: rgba(91, 199, 107, .45); box-shadow: inset 0 0 0 2px #2F8F3F; }
.gr__gtick { position: absolute; left: 0; width: 28%; height: 2px; background: rgba(43, 42, 76, .5); }
.gr__pump { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 120px; min-height: 96px; padding: 6px; border: 3px solid var(--c-ink); border-radius: var(--r-md); background: #fff; font: inherit; font-weight: var(--fw-black); cursor: pointer; }
.gr__handle { width: 44px; height: 8px; border-radius: 4px; background: var(--c-ink); margin-bottom: 2px; transition: transform .15s; }
.gr__barrel { width: 18px; height: 28px; border-radius: 4px; background: #FF8A5B; box-shadow: inset 0 0 0 2px var(--c-ink); margin-bottom: 4px; }
.gr__pump.is-press .gr__handle { animation: gr-press .3s ease-out; }
.gr__pump:disabled { opacity: .6; cursor: default; }
.gr__pumpArea.is-test .gr__tireBox { animation: gr-roll 1.4s ease-in-out forwards; }
.gr__pumpArea.is-test.is-ok .gr__tire { animation: gr-spin 0.7s linear 2; }
.gr__pumpArea.is-test.is-flat .gr__tireBox { animation: gr-drag 1.4s ease-in-out forwards; }
.gr__pumpArea.is-test.is-full .gr__tireBox { animation: gr-boing 1.4s ease-in-out forwards; }
@keyframes gr-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.008); } }
@keyframes gr-spin { to { transform: rotate(360deg); } }
@keyframes gr-bump { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1.5%) rotate(-1.2deg); } 60% { transform: translate(2%, -1%) rotate(1.2deg); } }
@keyframes gr-mount { 0% { transform: scale(1.8) rotate(-140deg); opacity: 0; } 70% { transform: scale(.95) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes gr-bolt { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(540deg); } }
@keyframes gr-reject { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-80%) scale(1.3) rotate(40deg); opacity: 0; } }
@keyframes gr-off { 0% { transform: rotate(0); opacity: 1; } 100% { transform: translate(60%, -90%) scale(1.4) rotate(280deg); opacity: 0; } }
@keyframes gr-fine { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes gr-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 59, 59, 0); } 50% { box-shadow: 0 0 0 6px rgba(214, 59, 59, .45); } }
@keyframes gr-nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes gr-squish { 0% { transform: scale(calc(var(--s) * 1.12), calc(var(--s) * .92)); } 100% { transform: scale(var(--s), calc(var(--s) * (.78 + var(--s) * .22))); } }
@keyframes gr-puff { 0% { transform: translate(-30px, 0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-70px, -26px) scale(1.2); opacity: 0; } }
@keyframes gr-puff-out { 0% { transform: translate(0, 0) scale(.5); opacity: 1; } 100% { transform: translate(34px, -30px) scale(1.4); opacity: 0; } }
@keyframes gr-press { 0% { transform: translateY(0); } 40% { transform: translateY(18px); } 100% { transform: translateY(0); } }
@keyframes gr-roll { 0% { transform: translateX(0); } 100% { transform: translateX(130%); opacity: .2; } }
@keyframes gr-drag { 0% { transform: translateX(0); } 20% { transform: translateX(8%); } 40% { transform: translateX(10%); } 60% { transform: translateX(22%); } 80% { transform: translateX(24%); } 100% { transform: translateX(30%); } }
@keyframes gr-boing { 0% { transform: translate(0, 0); } 15% { transform: translate(15%, -45%); } 30% { transform: translate(30%, 0); } 45% { transform: translate(45%, -38%); } 60% { transform: translate(60%, 0); } 75% { transform: translate(75%, -28%); } 100% { transform: translate(90%, 0); } }
@media (prefers-reduced-motion: reduce) { .gr__body { animation: none !important; } }
html[data-motion=reduced] .gr__body, html[data-motion=reduced] .gr__veh.is-bumpy, html[data-motion=reduced] .gr__veh.is-drive .gr__wheel, html[data-motion=reduced] .gr__pumpArea.is-test.is-ok .gr__tire { animation: none !important; }
html[data-motion=reduced] .gr__veh.is-drive { transition: opacity .2s; opacity: 0; transform: none; }
html[data-motion=reduced] .gr__panel.is-drive { transition: opacity .2s; opacity: 0; transform: none; }
html[data-motion=reduced] .gr__pumpArea.is-test .gr__tireBox { animation: none !important; }

/* ===== Bản mẫu B2: Bãi đỗ xe thông minh (.pk) ===== */
.pk { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.pk__goal { margin: 0; text-align: center; font-weight: var(--fw-black); }
.pk__board { position: relative; width: 100%; max-width: 560px; border-radius: var(--r-md); overflow: hidden; background: #8D93AE; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25), 0 var(--edge) 0 rgba(43, 42, 76, .2); }
.pk__cell { position: absolute; display: block; background: #9AA0BA; }
.pk__cell.is-alt { background: #A2A8C1; }
.pk__cell.is-block { background: rgba(214, 59, 59, .55); animation: pk-block .6s ease-in-out 2; }
.pk__spot { position: absolute; border: 3px dashed #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; background: rgba(255, 255, 255, .12); transition: background .3s, border-color .3s; }
.pk__spot.is-h { flex-direction: row; }
.pk__spot b { color: #fff; font-size: 1.4em; line-height: 1; text-shadow: 0 0 0 var(--c-ink); }
.pk__len { display: flex; gap: 2px; }
.pk__spot.is-h .pk__len { flex-direction: column; }
.pk__len i { display: block; width: 7px; height: 7px; border-radius: 2px; background: #fff; }
.pk__spot.is-ok { border-color: #5BC76B; background: rgba(91, 199, 107, .4); border-style: solid; }
.pk__obs { position: absolute; display: flex; align-items: center; justify-content: center; }
.pk__obsArt { display: block; width: 62%; height: 62%; }
.pk__obs--cone .pk__obsArt { background: linear-gradient(#FFFFFF 0 0) 50% 52% / 52% 12% no-repeat, #FF8A3C; clip-path: polygon(50% 0, 88% 92%, 12% 92%); filter: drop-shadow(0 2px 0 rgba(43, 42, 76, .4)); }
.pk__obs--car .pk__obsArt { width: 78%; height: 78%; border-radius: 28%; background: var(--c); box-shadow: inset 0 0 0 3px var(--c-ink); }
.pk__car { position: absolute; left: 0; top: 0; z-index: 3; transition: transform var(--ms, 380ms) cubic-bezier(.4, 0, .3, 1); will-change: transform; pointer-events: none; }
.pk__body { position: absolute; right: 0; top: 8%; height: 84%; border-radius: 30% / 40%; background: #4DA3FF; box-shadow: inset 0 0 0 3px var(--c-ink), inset 0 -6px 0 rgba(0, 0, 0, .13); animation: pk-breathe 3.4s ease-in-out infinite; transform-origin: 70% 50%; }
.pk__glass { position: absolute; right: 12%; top: 16%; width: 20%; height: 68%; border-radius: 22%; background: #CFEBFF; box-shadow: inset 0 0 0 2px var(--c-ink); }
.pk__wheel { position: absolute; width: 18%; height: 16%; border-radius: 30%; background: #2B2A4C; transition: transform .25s var(--ease-out); }
.pk__wheel--fl { right: 8%; top: -10%; } .pk__wheel--fr { right: 8%; bottom: -10%; }
.pk__wheel--bl { left: 8%; top: -10%; } .pk__wheel--br { left: 8%; bottom: -10%; }
.pk__body.is-steerL .pk__wheel--fl, .pk__body.is-steerL .pk__wheel--fr { transform: rotate(-28deg); }
.pk__body.is-steerR .pk__wheel--fl, .pk__body.is-steerR .pk__wheel--fr { transform: rotate(28deg); }
.pk__lamp { position: absolute; right: -1%; width: 5%; height: 18%; border-radius: 40%; background: #FFE89A; box-shadow: 0 0 0 2px var(--c-ink); transition: background .3s, box-shadow .3s; }
.pk__lamp--l { top: 12%; } .pk__lamp--r { bottom: 12%; }
.pk__lamp.is-on { background: #FFF6C2; box-shadow: 0 0 0 2px var(--c-ink), 0 0 10px 4px rgba(255, 233, 130, .9); }
.pk__rev { position: absolute; left: -1%; width: 5%; height: 16%; border-radius: 40%; background: #A33; box-shadow: 0 0 0 2px var(--c-ink); transition: background .2s; }
.pk__rev--l { top: 14%; } .pk__rev--r { bottom: 14%; }
.pk__body.is-reverse .pk__rev { background: #fff; box-shadow: 0 0 0 2px var(--c-ink), 0 0 8px 3px rgba(255, 255, 255, .9); }
.pk__body.is-bumpF { animation: pk-bumpF .4s ease-out; }
.pk__body.is-bumpB { animation: pk-bumpB .4s ease-out; }
.pk__car.is-parked .pk__body { animation: pk-settle .5s ease-out; }
.pk__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); width: 100%; max-width: 420px; }
.pk__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 64px; padding: 6px; font-size: 1.5em; line-height: 1; }
.pk__btn em { font-style: normal; font-size: .5em; font-weight: var(--fw-black); }
.pk__btn svg { width: 1em; height: 1em; }
.pk__park span { font-size: 1.1em; }
@keyframes pk-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.02); } }
@keyframes pk-block { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes pk-bumpF { 0% { transform: translateX(0); } 35% { transform: translateX(9%); } 100% { transform: translateX(0); } }
@keyframes pk-bumpB { 0% { transform: translateX(0); } 35% { transform: translateX(-9%); } 100% { transform: translateX(0); } }
@keyframes pk-settle { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pk__body { animation: none !important; } }
html[data-motion=reduced] .pk__body, html[data-motion=reduced] .pk__cell.is-block { animation: none !important; }
html[data-motion=reduced] .pk__car { transition-duration: .01ms; }

/* ===== Bản mẫu B3: Thành phố giao hàng (.dv) ===== */
.dv { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.dv__orders { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.dv__order { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); }
.dv__who { display: block; width: 38px; height: 38px; }
.dv__who > * { width: 100%; height: 100%; }
.dv__needs { display: flex; gap: 6px; align-items: center; }
.dv__chip { display: inline-flex; align-items: center; gap: 1px; font-weight: var(--fw-black); }
.dv__chip > :first-child { width: 28px; height: 28px; display: block; }
.dv__chip > :first-child > * { width: 100%; height: 100%; }
.dv__tick { position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #5BC76B; color: #fff; display: none; align-items: center; justify-content: center; font-style: normal; font-weight: var(--fw-black); box-shadow: 0 0 0 2px var(--c-ink); }
.dv__order.is-done { opacity: .75; background: #E6F7E8; }
.dv__order.is-done .dv__tick { display: flex; animation: pp-pop-in .3s var(--ease-out); }
.dv__map { position: relative; width: 100%; max-width: 560px; border-radius: var(--r-md); overflow: hidden; background: #BEE5A0; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25), 0 var(--edge) 0 rgba(43, 42, 76, .2); }
.dv__roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv__road { stroke: #7A7F9C; stroke-width: .3; stroke-linecap: round; }
.dv__roadLine { stroke: #fff; stroke-width: .035; stroke-dasharray: .12 .1; stroke-linecap: round; }
.dv__node { position: absolute; width: 54px; height: 54px; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; border-radius: 50%; }
.dv__node:not(.is-house):not(.is-depot)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #7A7F9C; box-shadow: 0 0 0 2px #fff; }
.dv__node.is-near::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 3px dashed #fff; background: rgba(255, 255, 255, .25); animation: dv-near 1.4s ease-in-out infinite; }
.dv__home { position: absolute; inset: 0; display: block; }
.dv__homeArt { position: absolute; inset: 2px; display: block; }
.dv__homeArt > * { width: 100%; height: 100%; }
.dv__door { position: absolute; left: 50%; bottom: 8%; width: 16%; height: 30%; margin-left: -8%; border-radius: 3px 3px 0 0; background: #8B5E34; transform-origin: 0 50%; transition: transform .3s ease-out; }
.dv__node.is-open .dv__door { transform: scaleX(.2); }
.dv__guest { position: absolute; left: 50%; top: -34%; width: 60%; height: 60%; margin-left: -30%; transform: scale(0); transition: transform .35s var(--ease-out); }
.dv__guest > * { width: 100%; height: 100%; }
.dv__node.is-open .dv__guest { transform: scale(1); }
.dv__node.is-open::after { content: '♥'; position: absolute; right: -4px; top: -12px; color: #E5484D; font-weight: var(--fw-black); animation: hd-heart 1.1s ease-out forwards; border: 0; background: none; inset: auto; }
.dv__node.is-no .dv__home { animation: gr-nope .45s ease-out; }
.dv__bubble { position: absolute; left: 50%; top: -52%; transform: translateX(-50%) scale(0); display: flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 0 0 2px var(--c-ink); font-style: normal; font-size: .85em; white-space: nowrap; transition: transform .2s var(--ease-out); z-index: 4; }
.dv__bubble.is-on { transform: translateX(-50%) scale(1); }
.dv__bubble > :first-child { width: 22px; height: 22px; display: block; }
.dv__bubble em { font-style: normal; font-weight: var(--fw-black); }
.dv__depot { position: absolute; inset: 6px 2px 2px; display: block; border-radius: 6px 6px 3px 3px; background: #FFC93C; box-shadow: inset 0 0 0 3px var(--c-ink); }
.dv__depot i { position: absolute; left: 12%; right: 12%; top: 38%; bottom: 0; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(0deg, #C98A4B 0 5px, #8B5E34 5px 7px); box-shadow: inset 0 0 0 2px var(--c-ink); }
.dv__depot b { position: absolute; left: 0; right: 0; top: 2%; text-align: center; font-size: .62em; line-height: 1.5; }
.dv__truck { position: absolute; z-index: 5; width: 46px; height: 28px; transform: translate(-50%, -4%); transition: left var(--ms, 420ms) linear, top var(--ms, 420ms) linear; pointer-events: none; }
.dv__box { position: absolute; left: 0; top: 0; width: 28px; height: 22px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); display: flex; align-items: center; justify-content: center; font-size: .75em; }
.dv__cab { position: absolute; right: 0; top: 6px; width: 16px; height: 16px; border-radius: 4px 7px 3px 3px; background: #E5484D; box-shadow: inset 0 0 0 3px var(--c-ink); }
.dv__wheel { position: absolute; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2B2A4C; box-shadow: 0 0 0 2px #fff; }
.dv__wheel--a { left: 5px; } .dv__wheel--b { right: 5px; }
.dv__truck.is-west { transform: translate(-50%, -4%) scaleX(-1); }
.dv__truck.is-driving .dv__wheel { animation: gr-spin .3s linear infinite; background: conic-gradient(#2B2A4C 0 25%, #555a80 25% 50%, #2B2A4C 50% 75%, #555a80 75%); }
.dv__truck.is-driving { animation: dv-bob .24s ease-in-out infinite; }
.dv__truck.is-load { animation: dv-squat .3s ease-out; }
.dv__truck.is-happy { animation: dv-honk .6s ease-in-out 2; }
.dv__fly { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 6; pointer-events: none; transition: transform .5s cubic-bezier(.3, .7, .4, 1), opacity .5s; }
.dv__fly > * { width: 100%; height: 100%; display: block; }
.dv__dock { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); width: 100%; max-width: 560px; }
.dv__shelfBox, .dv__bayBox { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25); }
.dv__label { font-size: .75em; font-weight: var(--fw-black); opacity: .7; }
.dv__shelf, .dv__bay { display: flex; flex-wrap: wrap; gap: 6px; }
.dv__shelf.is-away { opacity: .45; }
.dv__item, .dv__slot { width: 48px; height: 48px; padding: 4px; border: 3px solid var(--c-ink); border-radius: 12px; background: #FFF6D8; cursor: pointer; }
.dv__slot { background: rgba(43, 42, 76, .06); border-style: dashed; border-color: rgba(43, 42, 76, .4); }
.dv__slot.is-full { background: #fff; border-style: solid; border-color: var(--c-ink); animation: pp-pop-in .25s var(--ease-out); }
.dv__item > *, .dv__slot > * { width: 100%; height: 100%; display: block; }
.dv__item:disabled, .dv__slot:disabled { cursor: default; }
.dv__item:disabled { opacity: .5; }
.dv__fuel { position: relative; width: min(100%, 320px); height: 22px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); overflow: hidden; }
.dv__fuelBar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#7FE08C, #4CC15F); transition: width .3s; }
.dv__fuel.is-low .dv__fuelBar { background: linear-gradient(#FFB35C, #FF8A3C); }
.dv__fuel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; }
@keyframes dv-near { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes dv-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -2px; } }
@keyframes dv-squat { 0% { margin-top: 0; } 40% { margin-top: 3px; } 100% { margin-top: 0; } }
@keyframes dv-honk { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
@media (prefers-reduced-motion: reduce) { .dv__node.is-near::after { animation: none; } }
html[data-motion=reduced] .dv__node.is-near::after, html[data-motion=reduced] .dv__truck.is-driving, html[data-motion=reduced] .dv__truck.is-driving .dv__wheel { animation: none !important; }
html[data-motion=reduced] .dv__truck { transition: none !important; }

/* ===== Bản mẫu B4: Xưởng lắp phương tiện (.ws) ===== */
.ws { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.ws__goal { margin: 0; text-align: center; font-weight: var(--fw-black); }
.ws__crew { display: flex; gap: 6px; justify-content: center; min-height: 40px; }
.ws__pal { display: block; width: 38px; height: 38px; transition: opacity .3s, transform .3s; animation: ws-idle 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ws__pal > * { display: block; width: 100%; height: 100%; }
.ws__pal.is-aboard { opacity: .25; transform: scale(.8); animation: none; }
.ws__pal.is-left { animation: gr-nope .5s ease-in-out 2; }
.ws__stage { position: relative; isolation: isolate; width: 100%; max-width: 520px; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(#BFE6FF, #E8F7FF); box-shadow: inset 0 0 0 3px var(--c-ink); }
.ws__legs { position: absolute; inset: 0; display: flex; }
.ws__leg { position: relative; flex: 1; overflow: hidden; }
.ws__leg + .ws__leg { box-shadow: inset 3px 0 0 rgba(43, 42, 76, .3); }
.ws__leg::before, .ws__leg::after { content: ''; position: absolute; left: 0; right: 0; }
.ws__leg::after { bottom: 0; }
.ws__leg--road::after { height: 30%; background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 28px) center / 100% 4px no-repeat, #7A7F9C; }
.ws__leg--water::after { height: 36%; background: linear-gradient(#5DB8F5, #3E96DC); }
.ws__leg--water::before { bottom: 36%; height: 10px; background: radial-gradient(circle at 10px 10px, #5DB8F5 9px, transparent 10px) 0 0 / 20px 10px repeat-x; animation: ws-wave 2s linear infinite; }
.ws__leg--air::after { height: 10%; background: #9AD98B; }
.ws__leg--air::before { top: 14%; height: 40%; background: radial-gradient(ellipse 30px 12px at 25% 30%, #fff 98%, transparent), radial-gradient(ellipse 38px 14px at 72% 62%, #fff 98%, transparent); animation: ws-drift 7s ease-in-out infinite alternate; }
.ws__leg--snow::after { height: 30%; background: #fff; border-top: 3px solid #D5E7F5; }
.ws__leg--snow::before { bottom: 30%; height: 20px; background: radial-gradient(ellipse 46px 20px at 30% 100%, #fff 98%, transparent), radial-gradient(ellipse 38px 14px at 78% 100%, #fff 98%, transparent); }
.ws__tag { position: absolute; left: 6px; top: 6px; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 2px var(--c-ink); font-size: .72em; }
.ws__tagIcon { display: block; width: 22px; height: 22px; }
.ws__tagIcon > * { display: block; width: 100%; height: 100%; }
.ws__stage.is-night::after { content: ''; position: absolute; inset: 0; z-index: 3; background: rgba(24, 22, 70, .55); pointer-events: none; }
.ws__moon { position: absolute; right: 8px; top: 6px; z-index: 5; width: 34px; height: 34px; }
.ws__moon > * { display: block; width: 100%; height: 100%; }
.ws__flag { position: absolute; right: 3%; bottom: 28%; z-index: 2; width: 4px; height: 46px; border-radius: 2px; background: var(--c-ink); }
.ws__flag::after { content: ''; position: absolute; left: 4px; top: 0; width: 22px; height: 16px; background: #E5484D; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: left center; }
.ws__stage.is-win .ws__flag::after { animation: ws-flag .45s ease-in-out infinite alternate; }
/* xe */
.ws__veh { position: absolute; left: calc(var(--x) * 1%); bottom: 12%; z-index: 4; width: 62%; aspect-ratio: 10 / 7; transform: translate(-50%, var(--y)) scale(var(--sc)); transform-origin: 50% 100%; transition: left var(--ms) ease-in-out, transform var(--ms) ease-in-out; }
.ws__rig { position: absolute; inset: 0; animation: ws-idle 2.6s ease-in-out infinite; }
.ws__shadow { position: absolute; left: 16%; right: 16%; bottom: -2%; height: 6%; border-radius: 50%; background: rgba(43, 42, 76, .22); }
.ws__body { position: absolute; left: 14%; width: 72%; top: 36%; height: 32%; border-radius: 18px 26px 10px 10px; background: #4DA3FF; box-shadow: inset 0 0 0 3px var(--c-ink), inset 0 -8px 0 rgba(0, 0, 0, .12); }
.ws__glass { position: absolute; left: 6%; right: 6%; top: 12%; height: 26%; border-radius: 8px; background: #DFF3FF; box-shadow: inset 0 0 0 2px var(--c-ink); }
.ws__seats { position: absolute; left: 4%; right: 4%; bottom: 6%; height: 62%; display: flex; gap: 2px; justify-content: center; align-items: flex-end; }
.ws__seat { position: relative; flex: 1; max-width: 34px; min-width: 0; height: 100%; padding: 0; border: 2px dashed rgba(255, 255, 255, .85); border-radius: 8px; background: rgba(255, 255, 255, .18); cursor: pointer; }
.ws__seat.is-full { border-color: transparent; background: transparent; }
.ws__seat .ws__part { position: absolute; inset: 0; }
.ws__rider { position: absolute; left: -10%; right: -10%; bottom: 30%; height: 100%; z-index: 2; pointer-events: none; animation: pp-pop-in .3s var(--ease-out); }
.ws__rider > * { display: block; width: 100%; height: 100%; }
.ws__slot { position: absolute; padding: 0; border: 3px dashed rgba(43, 42, 76, .45); border-radius: 12px; background: rgba(255, 255, 255, .4); cursor: pointer; }
.ws__slot--move { top: 52%; height: 48%; width: 44%; }
.ws__slot--drive { top: 2%; height: 36%; width: 40%; }
.ws__slot--lamp { left: 86%; top: 36%; width: 16%; height: 28%; }
.ws__slot:not(.is-full) { animation: ws-hint 1.8s ease-in-out infinite; }
.ws__slot:not(.is-full)::after { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: rgba(43, 42, 76, .55); }
.ws__slot.is-full { border-color: transparent; background: transparent; }
.ws__slot.is-new, .ws__seat.is-new { animation: ws-snap .35s var(--ease-out); }
.ws__part { position: relative; display: block; width: 100%; height: 100%; }
.ws__part svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ws__part .wh, .ws__part .prop, .ws__part .rot, .ws__part .cog { transform-box: fill-box; transform-origin: center; }
.ws__part .ped { transform-box: view-box; transform-origin: 30px 24px; }
.ws__part .oar { transform-box: view-box; transform-origin: 14px 40px; }
.ws__part .sail { transform-box: fill-box; transform-origin: left center; }
.ws__beam { position: absolute; left: 92%; top: 36%; width: 60%; height: 34%; background: linear-gradient(90deg, rgba(255, 240, 150, .9), rgba(255, 240, 150, 0)); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ws__stage.is-night .ws__veh.has-lamp .ws__beam { opacity: 1; }
.ws__fx { position: absolute; left: 50%; top: -6%; z-index: 3; display: flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); font-style: normal; font-weight: 900; transform: translateX(-50%) scale(0); }
.ws__veh[data-fail] .ws__fx { transform: translateX(-50%) scale(1); animation: ws-fxpop .3s var(--ease-out); }
.ws__veh[data-fail=sink] .ws__fx { display: none; }
/* chìm: mặt nước phủ lên xe */
.ws__stage.is-sinking .ws__leg--water::after { z-index: 5; background: linear-gradient(rgba(93, 184, 245, .78), rgba(62, 150, 220, .88)); }
.ws__stage.is-sinking .ws__leg--water::before { z-index: 5; }
/* chạy thử */
.ws__veh.is-go .ws__part .wh { animation: ws-roll .5s linear infinite; }
.ws__veh.is-go .ws__part .prop, .ws__veh.is-go .ws__part .cog { animation: ws-roll .25s linear infinite; }
.ws__veh.is-go .ws__part .ped { animation: ws-roll 1s linear infinite; }
.ws__veh.is-go .ws__part .rot { animation: ws-flick .12s linear infinite alternate; }
.ws__veh.is-go .ws__part .oar { animation: ws-oar .5s ease-in-out infinite alternate; }
.ws__veh.is-go .ws__part .sail { animation: ws-billow .8s ease-in-out infinite alternate; }
.ws__veh.is-go .ws__part--engine::after { content: ''; position: absolute; right: -4%; top: 32%; width: 10px; height: 10px; border-radius: 50%; background: #C9CEE6; opacity: 0; animation: ws-puff .7s ease-out infinite; }
.ws__veh.is-go[data-env=road] .ws__rig { animation: ws-bump .3s ease-in-out infinite; }
.ws__veh.is-go[data-env=water] .ws__rig { animation: ws-float 1s ease-in-out infinite; }
.ws__veh.is-go[data-env=snow] .ws__rig { animation: ws-slide .6s ease-in-out infinite; }
.ws__veh.is-go[data-env=air] .ws__rig { animation: ws-fly 1.2s ease-in-out infinite; }
.ws__veh[data-win] .ws__rider { animation: ws-wave .5s ease-in-out infinite alternate; }
/* hỏng: mỗi nguyên nhân một kiểu */
.ws__veh[data-fail] .ws__part .wh, .ws__veh[data-fail] .ws__part .prop, .ws__veh[data-fail] .ws__part .cog, .ws__veh[data-fail] .ws__part .ped { animation: none; }
.ws__veh[data-fail=slip] .ws__part .wh { animation: ws-roll .16s linear infinite; }
.ws__veh[data-fail=sink] .ws__rig { transform: translateY(58px) rotate(5deg); animation: ws-sink 1.2s ease-in forwards; }
.ws__veh[data-fail=sink] .ws__rig::before, .ws__veh[data-fail=sink] .ws__rig::after { content: ''; position: absolute; top: 28%; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; animation: ws-bubble 1s ease-out infinite; }
.ws__veh[data-fail=sink] .ws__rig::before { left: 36%; }
.ws__veh[data-fail=sink] .ws__rig::after { left: 60%; animation-delay: .4s; }
.ws__veh[data-fail=stuck] .ws__rig, .ws__veh[data-fail=slip] .ws__rig, .ws__veh[data-fail=wrongDrive] .ws__rig { animation: ws-shake .35s ease-in-out 4; }
.ws__veh[data-fail=grind] .ws__rig { animation: ws-grind .12s linear 8; }
.ws__veh[data-fail=fall] .ws__rig { animation: ws-fall 1.2s ease-in-out forwards; }
.ws__veh[data-fail=sit] .ws__rig, .ws__veh[data-fail=still] .ws__rig, .ws__veh[data-fail=dark] .ws__rig { animation: ws-droop 1.2s ease-in-out forwards; }
.ws__veh[data-fail=wrongDrive] .ws__slot--drive .ws__part { animation: ws-shake .3s ease-in-out 4; }
/* kho */
.ws__tray { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; width: 100%; }
.ws__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 80px; min-height: 80px; padding: 6px 4px 4px; border: 3px solid var(--c-ink); border-radius: var(--r-md); background: #fff; font: inherit; font-size: .72em; font-weight: var(--fw-black); cursor: pointer; }
.ws__item .ws__part { width: 56px; height: 42px; }
.ws__item.is-used { background: #EEF0FA; opacity: .55; }
.ws__item--seat.is-used { background: #fff; opacity: 1; }
.ws__badge { position: absolute; right: -6px; top: -8px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--c-ink); color: #fff; font-style: normal; font-size: 1.1em; }
@keyframes ws-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ws-hint { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes ws-snap { from { transform: translateY(-14px) scale(1.15); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes ws-wave { to { background-position-x: 20px; } }
@keyframes ws-drift { to { transform: translateX(18px); } }
@keyframes ws-flag { to { transform: skewY(-10deg) scaleX(.85); } }
@keyframes ws-roll { to { transform: rotate(360deg); } }
@keyframes ws-flick { from { transform: scaleX(1); } to { transform: scaleX(.15); } }
@keyframes ws-oar { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes ws-billow { from { transform: scaleX(.85); } to { transform: scaleX(1.08); } }
@keyframes ws-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(14px, -10px) scale(1.6); } }
@keyframes ws-bump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ws-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(3px) rotate(1.5deg); } }
@keyframes ws-slide { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1.5deg) translateY(-1px); } }
@keyframes ws-fly { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes ws-sink { from { transform: none; } to { transform: translateY(58px) rotate(5deg); } }
@keyframes ws-bubble { 0% { opacity: 0; transform: translateY(20px) scale(.5); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }
@keyframes ws-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-1deg); } 75% { transform: translateX(5px) rotate(1deg); } }
@keyframes ws-grind { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes ws-fall { 0% { transform: none; } 35% { transform: translateY(-46px) rotate(-4deg); } 100% { transform: none; } }
@keyframes ws-droop { 0%, 100% { transform: none; } 40% { transform: scaleY(.93) translateY(4px); } }
@keyframes ws-fxpop { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ws__pal, .ws__rig, .ws__slot, .ws__leg::before, .ws__flag::after { animation: none !important; } .ws__veh { transition: none !important; } }
html[data-motion=reduced] .ws__pal, html[data-motion=reduced] .ws__rig, html[data-motion=reduced] .ws__slot, html[data-motion=reduced] .ws__seat, html[data-motion=reduced] .ws__leg::before, html[data-motion=reduced] .ws__flag::after, html[data-motion=reduced] .ws__part *, html[data-motion=reduced] .ws__rider, html[data-motion=reduced] .ws__veh[data-fail] .ws__fx, html[data-motion=reduced] .ws__part::after { animation: none !important; }
html[data-motion=reduced] .ws__veh { transition: none !important; }

/* ===== Bản mẫu B5: Phi thuyền thu năng lượng (.sp) ===== */
.sp { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.sp__rule { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 440px; padding: 8px 12px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); }
.sp__ruleText { margin: 0; text-align: center; font-weight: var(--fw-black); }
.sp__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; min-height: 40px; }
.sp__arrow { font-weight: var(--fw-black); opacity: .7; }
.sp__times { font-size: 1.2em; }
.sp__sum { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 14px; border-radius: var(--r-pill); background: #EEF0FA; font-size: 1.5em; font-weight: var(--fw-black); transition: background .2s; }
.sp__sum.is-ok { background: #CFF5D2; }
.sp__sum.is-over { background: #FFD6D6; }
.sp__sum i { font-style: normal; opacity: .5; }
.sp__slot { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border: 3px dashed rgba(43, 42, 76, .4); border-radius: 12px; }
.sp__slot.is-next { border-color: var(--c-ink); animation: ws-hint 1.6s ease-in-out infinite; }
.sp__slot.is-full { border-style: solid; border-color: transparent; }
.sp__chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; border: 3px solid var(--c-ink); font-weight: var(--fw-black); line-height: 1; color: var(--c-ink); background: #fff; }
.sp__chip--num { background: #FFF1B8; border-radius: 10px; }
.sp__chip--red { background: #FF8F8F; } .sp__chip--blue { background: #8EC5FF; } .sp__chip--yellow { background: #FFE27A; } .sp__chip--green { background: #A5E09A; }
.sp__chip.is-shown { opacity: .75; }
.sp__chip.is-ghost { opacity: .4; }
.sp__chip.is-new { animation: pp-pop-in .3s var(--ease-out); }
.sp__stage { position: relative; isolation: isolate; width: min(100%, 440px); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); touch-action: none; user-select: none; background: radial-gradient(ellipse at 30% 20%, #3B3E8F, #1B1D4A 70%); box-shadow: inset 0 0 0 3px var(--c-ink); cursor: crosshair; }
.sp__stage:focus-visible { outline: 4px solid var(--c-sun); outline-offset: 2px; }
.sp__stars { position: absolute; inset: -16%; pointer-events: none; background-repeat: repeat; }
.sp__stars--far { background-image: radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 80px, #cfd4ff, transparent), radial-gradient(1.5px 1.5px at 140px 20px, #fff, transparent), radial-gradient(1px 1px at 60px 130px, #cfd4ff, transparent); background-size: 170px 170px; opacity: .8; }
.sp__stars--near { background-image: radial-gradient(2.5px 2.5px at 40px 60px, #fff, transparent), radial-gradient(2px 2px at 150px 110px, #ffe9a8, transparent), radial-gradient(2px 2px at 100px 20px, #fff, transparent); background-size: 220px 220px; animation: sp-twinkle 3.5s ease-in-out infinite; }
.sp__station { position: absolute; width: var(--r); aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sp__ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .55); animation: sp-spin 14s linear infinite; }
.sp__core { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8EF0C9, #2FB59A); box-shadow: inset 0 0 0 3px var(--c-ink); }
.sp__station b { position: relative; z-index: 1; font-size: .62em; color: var(--c-ink); }
.sp__energy { position: absolute; left: 12%; right: 12%; bottom: -12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; --e: 0; }
.sp__energy::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--e)); background: linear-gradient(90deg, #7FE08C, #FFE27A); transition: transform .6s ease-out; }
.sp__station.is-near .sp__ring { border-color: #FFE27A; }
.sp__station.is-charge .sp__core { animation: sp-charge .5s ease-in-out 3; }
.sp__station.is-nope .sp__core { background: radial-gradient(circle at 35% 30%, #FFB3B3, #E5484D); }
.sp__orb { position: absolute; width: 9.5%; aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid var(--c-ink); font-size: 1em; font-weight: 900; color: var(--c-ink); background: #FFE27A; pointer-events: none; animation: sp-bob 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); transition: opacity .25s; }
.sp__orb--num { background: radial-gradient(circle at 35% 30%, #fff6c9, #FFC93C); }
.sp__orb--red { background: radial-gradient(circle at 35% 30%, #FFC1C1, #E5484D); } .sp__orb--blue { background: radial-gradient(circle at 35% 30%, #CFE6FF, #4DA3FF); }
.sp__orb--yellow { background: radial-gradient(circle at 35% 30%, #FFF6C9, #FFC93C); } .sp__orb--green { background: radial-gradient(circle at 35% 30%, #D6F5CE, #6CC25D); }
.sp__orb b { position: relative; z-index: 1; }
.sp__sym { font-size: .85em; }
.sp__glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 65%); z-index: 0; animation: sp-pulse 2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.sp__orb.is-kick { transition: left .3s var(--ease-out), top .3s var(--ease-out), opacity .25s; }
.sp__orb.is-got { opacity: 0; transform: translate(-50%, -50%) scale(.2); transition: opacity .25s, transform .25s, left .2s, top .2s; animation: none; }
.sp__target { position: absolute; width: 5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); opacity: 0; pointer-events: none; }
.sp__target.is-on { opacity: 1; animation: sp-ping .7s ease-out infinite; }
.sp__ship { position: absolute; z-index: 3; width: 11%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); pointer-events: none; }
.sp__tilt { position: absolute; inset: 0; display: block; transform: rotate(var(--a, 0deg)); transition: none; }
.sp__art { position: absolute; inset: 0; display: block; animation: sp-hover 2.2s ease-in-out infinite; }
.sp__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp__flame { position: absolute; left: 26%; right: 26%; top: 86%; height: calc(30% + var(--f, 0) * 45%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#FFE27A, #FF8A3C 60%, rgba(255, 90, 60, 0)); transform-origin: top; animation: sp-flame .18s ease-in-out infinite alternate; }
.sp__ship.is-gulp .sp__art { animation: sp-gulp .3s var(--ease-out); }
.sp__ship.is-bump .sp__art { animation: sp-bumped .35s ease-in-out; }
.sp__ship.is-dock .sp__art { animation: sp-hover 1.4s ease-in-out infinite; }
.sp__ship.is-launch { transition: transform .8s ease-in, opacity .8s; transform: translate(-50%, -260%) scale(.5); opacity: 0; }
.sp__hold { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 6px 10px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 3px rgba(43, 42, 76, .25); }
.sp__hold.is-empty::before { content: attr(data-empty); opacity: .5; }
@keyframes sp-twinkle { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@keyframes sp-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }
@keyframes sp-pulse { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes sp-ping { from { transform: translate(-50%, -50%) scale(.6); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
@keyframes sp-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
@keyframes sp-flame { from { transform: scaleY(.85) scaleX(.9); } to { transform: scaleY(1.1) scaleX(1.05); } }
@keyframes sp-gulp { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes sp-bumped { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-6deg); } 75% { transform: translateX(4px) rotate(6deg); } }
@keyframes sp-charge { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.2); filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .sp__stars--near, .sp__ring, .sp__orb, .sp__glow, .sp__art, .sp__flame, .sp__slot.is-next, .sp__target.is-on { animation: none !important; } .sp__ship.is-launch { transition: none; } }
html[data-motion=reduced] .sp__stars--near, html[data-motion=reduced] .sp__ring, html[data-motion=reduced] .sp__orb, html[data-motion=reduced] .sp__glow, html[data-motion=reduced] .sp__art, html[data-motion=reduced] .sp__flame, html[data-motion=reduced] .sp__slot.is-next, html[data-motion=reduced] .sp__target.is-on, html[data-motion=reduced] .sp__chip.is-new, html[data-motion=reduced] .sp__station.is-charge .sp__core, html[data-motion=reduced] .sp__ship.is-gulp .sp__art, html[data-motion=reduced] .sp__ship.is-bump .sp__art { animation: none !important; }
html[data-motion=reduced] .sp__ship.is-launch { transition: none; }
html[data-motion=reduced] .sp__energy::after { transition: none; }

/* ===== Bản mẫu B6: Hạ cánh lên hành tinh (.lg) ===== */
.lg { display: flex; flex-direction: column; gap: var(--s-3); align-items: center; width: 100%; }
.lg__goal { margin: 0; text-align: center; font-weight: var(--fw-black); }
.lg__info { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.lg__badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); font-size: .78em; }
.lg__badge i { font-style: normal; opacity: .7; }
.lg__badge b { font-size: 1.15em; }
.lg__badge--planet { background: #FFE9A6; }
.lg__stage { position: relative; isolation: isolate; width: min(100%, 420px); aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); box-shadow: inset 0 0 0 3px var(--c-ink); background: linear-gradient(#0F1233, #2A2F6B); }
.lg__stage--mars { background: linear-gradient(#5B2A3A, #E58A5C); }
.lg__stage--giant { background: linear-gradient(#2B2160, #7A5BD6); }
.lg__stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent), radial-gradient(1px 1px at 110px 90px, #dfe3ff, transparent), radial-gradient(1.5px 1.5px at 190px 30px, #fff, transparent); background-size: 220px 160px; opacity: .65; }
.lg__gridV, .lg__gridH { position: absolute; pointer-events: none; background: rgba(255, 255, 255, .14); }
.lg__gridV { top: 0; bottom: 18%; width: 1px; }
.lg__gridH { left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 14px); }
.lg__ground { position: absolute; left: 0; right: 0; top: 82%; bottom: 0; background: #B8BBD1; box-shadow: inset 0 4px 0 rgba(0, 0, 0, .12), inset 0 0 0 3px var(--c-ink); }
.lg__stage--mars .lg__ground { background: #C65B3C; } .lg__stage--giant .lg__ground { background: #6D63A8; }
.lg__pad { position: absolute; top: 80.5%; height: 3.6%; z-index: 1; border-radius: 6px; background: repeating-linear-gradient(90deg, #7BE08A 0 12px, #4CC15F 12px 24px); box-shadow: 0 0 0 3px var(--c-ink); }
.lg__padLight { position: absolute; top: -70%; width: 8px; height: 8px; border-radius: 50%; background: #FFE27A; animation: sp-pulse 1.4s ease-in-out infinite; }
.lg__padLight:first-child { left: 2px; } .lg__padLight:last-child { right: 2px; }
.lg__lander { position: absolute; z-index: 3; width: 11%; aspect-ratio: 6 / 7; transform: translate(-50%, -50%); transition: left var(--ms, .5s) linear, top var(--ms, .5s) linear; }
.lg__body { position: absolute; inset: 0; display: block; transform: rotate(var(--tilt, 0deg)); transition: transform .4s var(--ease-out); animation: ws-idle 2.4s ease-in-out infinite; }
.lg__art { position: absolute; inset: 0; display: block; }
.lg__art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lg__legs { opacity: 0; transition: opacity .25s; }
.lg__lander.is-legs .lg__legs { opacity: 1; }
.lg__flame { position: absolute; left: 30%; right: 30%; top: 82%; height: calc(var(--t, 0) * 16% + 6%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#FFE27A, #FF8A3C 60%, rgba(255, 90, 60, 0)); opacity: 0; transform-origin: top; }
.lg__lander.is-lit .lg__flame { opacity: 1; animation: sp-flame .16s ease-in-out infinite alternate; }
.lg__jet { position: absolute; top: 38%; width: 22%; height: 8%; border-radius: 50%; background: linear-gradient(90deg, #FFE27A, rgba(255, 138, 60, 0)); opacity: 0; }
.lg__jet--l { right: 96%; transform: scaleX(-1); } .lg__jet--r { left: 96%; }
.lg__jet.is-on { opacity: 1; animation: sp-flame .14s ease-in-out infinite alternate; }
.lg__smoke { position: absolute; left: 20%; right: 20%; top: -10%; height: 40%; border-radius: 50%; background: radial-gradient(circle, rgba(220, 224, 240, .9), transparent 70%); opacity: 0; }
.lg__lander.is-crash .lg__smoke { opacity: 1; animation: lg-smoke 1.2s ease-out infinite; }
.lg__lander.is-fast .lg__body, .lg__lander.is-fuel .lg__body { animation: lg-squash .45s var(--ease-out) forwards; }
.lg__lander.is-fast .lg__art, .lg__lander.is-fuel .lg__art { transform: scaleY(.8); transform-origin: bottom; }
.lg__lander.is-off .lg__body { animation: none; }
.lg__lander.is-soft .lg__body { animation: lg-soft .5s var(--ease-out); }
.lg__dust { position: absolute; top: 80%; width: 12%; height: 6%; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.lg__dust b { position: absolute; bottom: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(240, 240, 250, .85); opacity: 0; }
.lg__dust b:nth-child(1) { left: 0; } .lg__dust b:nth-child(2) { left: 33%; } .lg__dust b:nth-child(3) { right: 0; }
.lg__stage.is-dust .lg__dust b { animation: lg-dust .9s ease-out forwards; }
.lg__stage.is-dust .lg__dust b:nth-child(2) { animation-delay: .08s; } .lg__stage.is-dust .lg__dust b:nth-child(3) { animation-delay: .16s; }
.lg__astro { position: absolute; top: 74%; width: 4.5%; aspect-ratio: 1 / 1.5; transform: translateX(70%); border-radius: 40% 40% 20% 20%; background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); opacity: 0; z-index: 2; }
.lg__astro::before { content: ''; position: absolute; left: 22%; right: 22%; top: 14%; height: 30%; border-radius: 50%; background: #7FD6FF; box-shadow: 0 0 0 2px var(--c-ink); }
.lg__flag { position: absolute; left: 100%; bottom: 40%; width: 3px; height: 150%; background: var(--c-ink); }
.lg__flag::after { content: ''; position: absolute; left: 3px; top: 0; width: 14px; height: 10px; background: #E5484D; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: left center; animation: ws-flag .45s ease-in-out infinite alternate; }
.lg__stage.is-win .lg__astro { opacity: 1; animation: pp-pop-in .4s var(--ease-out) .3s backwards; }
.lg__wind { position: absolute; inset: 0 0 18% 0; pointer-events: none; overflow: hidden; }
.lg__wind i { position: absolute; left: 0; width: 22%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .4); animation: lg-wind 2.4s linear infinite; }
.lg__wind i:nth-child(1) { top: 25%; } .lg__wind i:nth-child(2) { top: 48%; animation-delay: .8s; } .lg__wind i:nth-child(3) { top: 66%; animation-delay: 1.6s; }
.lg__wind--l i { animation-direction: reverse; }
.lg__hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; max-width: 420px; }
.lg__fuel { position: relative; flex: 1; min-width: 160px; height: 22px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); overflow: hidden; }
.lg__fuelBar { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(#7FE08C, #4CC15F); transition: transform .3s; }
.lg__fuel.is-low .lg__fuelBar { background: linear-gradient(#FFB35C, #FF8A3C); }
.lg__fuel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; }
.lg__speedBox { display: inline-flex; align-items: baseline; gap: 6px; font-size: .85em; }
.lg__speedBox i { font-style: normal; opacity: .7; }
.lg__speed { min-width: 1.5ch; font-size: 1.5em; }
.lg__speed.is-bad { color: #D6333A; }
.lg__plan { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; }
.lg__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; padding: 14px 4px 5px; border: 3px solid var(--c-ink); border-radius: 14px; background: #fff; transition: transform .2s, background .2s, opacity .2s; }
.lg__card.is-now { background: #FFE9A6; transform: translateY(-3px); }
.lg__card.is-past { opacity: .55; }
.lg__num { position: absolute; left: 50%; top: -11px; transform: translateX(-50%); min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--c-ink); color: #fff; font-style: normal; font-size: .72em; font-weight: var(--fw-black); }
.lg__thrust, .lg__dir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 46px; padding: 0; border: 3px solid rgba(43, 42, 76, .35); border-radius: 10px; background: #F3F4FB; font: inherit; font-weight: var(--fw-black); color: var(--c-ink); cursor: pointer; }
.lg__dir { height: 36px; font-size: 1.1em; }
.lg__thrust.is-on { border-color: #FF8A3C; background: #FFF0DC; }
.lg__dir.is-on { border-color: var(--c-ink); background: #DCEBFF; }
.lg__bars { display: flex; gap: 2px; align-items: flex-end; height: 8px; }
.lg__bars i { width: 6px; height: 6px; border-radius: 2px; background: rgba(43, 42, 76, .2); }
.lg__bars i.is-on { background: #FF8A3C; height: 8px; }
@keyframes lg-smoke { 0% { transform: translateY(0) scale(.7); opacity: .9; } 100% { transform: translateY(-30px) scale(1.5); opacity: 0; } }
@keyframes lg-squash { 0% { transform: translateY(0); } 50% { transform: translateY(4px) scaleY(.88); } 100% { transform: translateY(2px) scaleY(.92); } }
@keyframes lg-soft { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-5px); } 65% { transform: translateY(1px); } }
@keyframes lg-dust { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(var(--dx, 10px), -16px) scale(1.7); } }
@keyframes lg-wind { from { transform: translateX(-120%); } to { transform: translateX(480%); } }
.lg__dust b:nth-child(1) { --dx: -12px; } .lg__dust b:nth-child(3) { --dx: 12px; }
@media (prefers-reduced-motion: reduce) { .lg__body, .lg__padLight, .lg__wind i, .lg__flag::after, .lg__lander.is-lit .lg__flame, .lg__jet.is-on { animation: none !important; } .lg__lander { transition-duration: .01ms; } }
html[data-motion=reduced] .lg__body, html[data-motion=reduced] .lg__padLight, html[data-motion=reduced] .lg__wind i, html[data-motion=reduced] .lg__flag::after, html[data-motion=reduced] .lg__lander.is-lit .lg__flame, html[data-motion=reduced] .lg__jet.is-on, html[data-motion=reduced] .lg__lander.is-crash .lg__smoke, html[data-motion=reduced] .lg__stage.is-dust .lg__dust b, html[data-motion=reduced] .lg__stage.is-win .lg__astro { animation: none !important; }
html[data-motion=reduced] .lg__lander { transition: none !important; }
html[data-motion=reduced] .lg__stage.is-dust .lg__dust b { opacity: .6; }

/* ===== B7 Cứu hộ trạm không gian (kind station) ===== */
.sx { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.sx__goal { text-align: center; }
.sx__board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); border-radius: 16px; background: #1F2354; box-shadow: 0 0 0 4px var(--c-ink); overflow: hidden; }
.sx__cell { position: relative; display: flex; align-items: center; justify-content: center; background: #C9D4F5; box-shadow: inset 0 0 0 1px rgba(43, 42, 76, .12); transition: filter .5s, opacity .5s; }
.sx__cell:nth-child(odd) { background: #D6DEF8; }
.sx__wall { background: repeating-linear-gradient(45deg, #5B6191 0 6px, #4A5080 6px 12px) !important; box-shadow: inset 0 0 0 2px #2F345F; }
.sx__cell.is-dark:not(.sx__wall) { filter: brightness(.45) saturate(.6); }
.sx__cell.is-bump { animation: sx-cellbump .3s; }
.sx__pad { width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #9AA3C7 31% 100%); box-shadow: inset 0 0 0 3px var(--c-ink); opacity: .55; }
.sx__c-a { --c: #E5484D; } .sx__c-b { --c: #FFB020; } .sx__c-c { --c: #2E9BFF; } .sx__c-d { --c: #9B5CF6; }
.sx__mod { position: relative; display: flex; align-items: center; justify-content: center; width: 78%; height: 78%; border-radius: 22%; background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink), 0 0 0 3px var(--c); font-style: normal; z-index: 1; }
.sx__mod b { color: var(--c); font-size: 1.2em; line-height: 1; }
.sx__lamp { position: absolute; top: -6%; right: -6%; width: 30%; height: 30%; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--c-ink); animation: sx-blink 1s steps(2) infinite; }
.sx__mod.is-fixed .sx__lamp { background: #4CC15F; animation: none; }
.sx__mod.is-fixed { animation: sx-fixed .5s var(--ease-out); }
.sx__mod:not(.is-fixed) { animation: sx-wobble 1.8s ease-in-out infinite; }
.sx__spark { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, #FFE27A 0 20%, transparent 21%), repeating-conic-gradient(#FFE27A 0 8deg, transparent 8deg 45deg); opacity: 0; pointer-events: none; }
.sx__mod.is-zap .sx__spark { animation: sx-spark .5s ease-out; }
.sx__doorCell { background: #AEB8E6 !important; }
.sx__door { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--c); box-shadow: inset 0 0 0 3px var(--c-ink); transform-origin: top; transition: transform .5s var(--ease-out), opacity .4s; z-index: 1; font-style: normal; }
.sx__door::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, .25) 8px 10px); }
.sx__door b { position: relative; color: #fff; font-size: 1.3em; text-shadow: 0 0 0 var(--c-ink), 0 2px 0 var(--c-ink); }
.sx__door.is-open { transform: scaleY(.1); opacity: .35; }
.sx__bot { position: absolute; z-index: 3; pointer-events: none; transition: left var(--stm, .38s) ease-in-out, top var(--stm, .38s) ease-in-out; --face: 1; }
.sx__botMove { position: absolute; inset: 6% 8%; display: block; }
.sx__botIn { position: absolute; inset: 0; display: block; animation: sx-hover 2.2s ease-in-out infinite; }
.sx__botIn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sx__eye { transform-box: fill-box; transform-origin: center; animation: sx-blinkeye 4s infinite; transform: translateX(calc(var(--face) * 1.5px)); }
.sx__ant { animation: sx-ant 1.2s steps(2) infinite; }
.sx__bubble { position: absolute; right: -14%; top: -22%; min-width: 1.2em; padding: 0 .25em; border-radius: var(--r-pill); background: #E5484D; color: #fff; font-style: normal; font-weight: var(--fw-black); font-size: .9em; text-align: center; box-shadow: 0 0 0 2px var(--c-ink); opacity: 0; transform: scale(.4); }
.sx__bot.is-bump .sx__botMove { animation: sx-shake .3s; }
.sx__bot.is-bump .sx__bubble { animation: sx-bubble .7s ease-out; }
.sx__bot.is-fix .sx__botIn { animation: sx-tinker .5s ease-in-out; }
.sx__bot.is-cheer .sx__botIn { animation: sx-cheer .5s ease-in-out 2; }
.sx__board.is-win .sx__cell { filter: none; animation: sx-light .8s ease-out; }
.sx__todo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sx__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); transition: background .3s; }
.sx__tag b { color: var(--c); font-size: 1.15em; }
.sx__tag i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--c-ink); }
.sx__tag.is-done { background: #E3F8E6; }
.sx__tag.is-done i { background: #4CC15F; }
.sx__prog { display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: 440px; min-height: 52px; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 3px var(--c-ink); }
.sx__queue { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-height: 40px; }
.sx__count { flex: none; align-self: center; font-size: .85em; opacity: .8; }
.sx__count.is-full { color: #D6333A; opacity: 1; }
.sx__chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 3px solid var(--c-ink); border-radius: 12px; background: #fff; font-size: 1.15em; transition: transform .2s, background .2s; }
.sx__chip svg { width: 70%; height: 70%; }
.sx__chip.is-new { animation: pp-pop-in .25s var(--ease-out); }
.sx__chip.is-now { background: var(--c-sun); transform: translateY(-3px); }
.sx__chip.is-past { opacity: .55; }
.sx__chip.is-bad { background: #FFD5D6; border-color: #D6333A; animation: gr-nope .35s; }
.sx__palette { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.sx__pad4 { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 56px); gap: 6px; }
.sx__pad4 .sx__cmd--U { grid-column: 2; grid-row: 1; } .sx__pad4 .sx__cmd--L { grid-column: 1; grid-row: 2; } .sx__pad4 .sx__cmd--D { grid-column: 2; grid-row: 2; } .sx__pad4 .sx__cmd--R { grid-column: 3; grid-row: 2; }
.sx__cmd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 3px solid var(--c-ink); border-radius: 16px; background: #fff; font-size: 1.5em; font-weight: var(--fw-black); box-shadow: 0 4px 0 var(--c-ink); transition: transform .12s, box-shadow .12s; }
.sx__cmd:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-ink); }
.sx__cmd:disabled { opacity: .45; }
.sx__cmd--F { width: 112px; height: 118px; flex-direction: column; background: #FFE27A; font-size: .8em; }
.sx__cmd--F svg { width: 50px; height: 50px; }
@keyframes sx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sx-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes sx-fixed { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes sx-spark { 0% { opacity: 1; transform: scale(.4) rotate(0); } 100% { opacity: 0; transform: scale(1.4) rotate(30deg); } }
@keyframes sx-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sx-blinkeye { 0%, 92%, 100% { transform: translateX(calc(var(--face) * 1.5px)) scaleY(1); } 96% { transform: translateX(calc(var(--face) * 1.5px)) scaleY(.1); } }
@keyframes sx-ant { 0% { fill: #FF8A3C; } 100% { fill: #FFE27A; } }
@keyframes sx-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes sx-bubble { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-6px); } }
@keyframes sx-tinker { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) translateY(2px); } 50% { transform: rotate(10deg) translateY(2px); } 75% { transform: rotate(-8deg); } }
@keyframes sx-cheer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(8deg); } }
@keyframes sx-light { 0% { filter: brightness(1.6); } 100% { filter: none; } }
@keyframes sx-cellbump { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(43, 42, 76, .12); } 50% { box-shadow: inset 0 0 0 4px #E5484D; } }
@media (prefers-reduced-motion: reduce) { .sx__lamp, .sx__mod, .sx__botIn, .sx__eye, .sx__ant, .sx__bot.is-bump .sx__botMove, .sx__bot.is-bump .sx__bubble, .sx__bot.is-fix .sx__botIn, .sx__bot.is-cheer .sx__botIn, .sx__mod.is-zap .sx__spark, .sx__cell.is-bump, .sx__board.is-win .sx__cell { animation: none !important; } .sx__bot, .sx__door { transition: none; } .sx__bot.is-bump .sx__bubble { opacity: 1; transform: none; } }
html[data-motion=reduced] .sx__lamp, html[data-motion=reduced] .sx__mod, html[data-motion=reduced] .sx__botIn, html[data-motion=reduced] .sx__eye, html[data-motion=reduced] .sx__ant, html[data-motion=reduced] .sx__bot.is-bump .sx__botMove, html[data-motion=reduced] .sx__bot.is-bump .sx__bubble, html[data-motion=reduced] .sx__bot.is-fix .sx__botIn, html[data-motion=reduced] .sx__bot.is-cheer .sx__botIn, html[data-motion=reduced] .sx__mod.is-zap .sx__spark, html[data-motion=reduced] .sx__cell.is-bump, html[data-motion=reduced] .sx__board.is-win .sx__cell { animation: none !important; }
html[data-motion=reduced] .sx__bot, html[data-motion=reduced] .sx__door { transition: none !important; }
html[data-motion=reduced] .sx__bot.is-bump .sx__bubble { opacity: 1; transform: none; }

/* ===== B8 Điều phối đội tàu (kind fleet) ===== */
.fl { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.fl__goal { text-align: center; }
.fl__c-0 { --c: #E5484D; } .fl__c-1 { --c: #FFB020; } .fl__c-2 { --c: #2E9BFF; } .fl__c-3 { --c: #9B5CF6; }
.fl__board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); border-radius: 16px; background: #5CC8F2; box-shadow: 0 0 0 4px var(--c-ink); overflow: hidden; touch-action: none; user-select: none; cursor: pointer; }
.fl__board:focus-visible { outline: 4px solid var(--c-sun); outline-offset: 3px; }
.fl__cell { position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); }
.fl__cell::after { content: ''; position: absolute; left: 22%; top: 55%; width: 34%; height: 8%; border-radius: 99px; background: rgba(255, 255, 255, .4); animation: fl-wave 3s ease-in-out infinite; }
.fl__cell[data-wave="1"]::after { animation-delay: -1s; left: 40%; top: 35%; } .fl__cell[data-wave="2"]::after { animation-delay: -2s; left: 30%; top: 70%; }
.fl__island { background: #7BD389; box-shadow: inset 0 0 0 3px #3FA65A, inset 0 -8px 0 #E9D28B; border-radius: 30%; }
.fl__island::after { display: none; }
.fl__palm { position: absolute; left: 44%; top: 16%; width: 12%; height: 52%; border-radius: 3px; background: #8A5A2B; }
.fl__palm::before { content: ''; position: absolute; left: -130%; top: -34%; width: 360%; height: 50%; border-radius: 50% 50% 10% 10%; background: #2F9E57; box-shadow: 0 0 0 2px #1F7A40; }
.fl__paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.fl__dock { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; }
.fl__dock b { position: relative; display: flex; align-items: center; justify-content: center; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--c), 0 0 0 3px var(--c-ink); color: var(--c); font-size: 1.3em; line-height: 1; }
.fl__dock s { position: absolute; width: 96%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed #fff; animation: fl-dock 3s linear infinite; }
.fl__dock.is-reached b { background: #E3F8E6; box-shadow: inset 0 0 0 4px #4CC15F, 0 0 0 3px var(--c-ink); animation: pp-pop-in .35s var(--ease-out); }
.fl__wait { position: absolute; z-index: 4; transform: translate(-60%, -10%); min-width: 1.5em; padding: 0 .3em; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); font-style: normal; font-weight: var(--fw-black); font-size: .8em; text-align: center; opacity: .55; pointer-events: none; }
.fl__wait.is-on { opacity: 1; background: var(--c-sun); }
.fl__boat { position: absolute; z-index: 3; pointer-events: none; transition: left var(--ms, .5s) linear, top var(--ms, .5s) linear; }
.fl__bob { position: absolute; inset: 4%; display: block; animation: fl-bob 2.4s ease-in-out infinite; }
.fl__boat:nth-of-type(2n) .fl__bob { animation-delay: -1.2s; }
.fl__art { position: absolute; inset: 0; display: block; }
.fl__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fl__tag { position: absolute; left: 50%; top: 20%; transform: translateX(8%); font-size: .75em; color: #fff; text-shadow: 0 1px 0 var(--c-ink); line-height: 1; }
.fl__boat.is-sel .fl__art { filter: drop-shadow(0 0 5px #fff); }
.fl__wake { position: absolute; left: 14%; right: 14%; bottom: 8%; height: 14%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); opacity: 0; }
.fl__boat.is-sail .fl__wake { animation: fl-wake .5s ease-out infinite; }
.fl__boat.is-sail .fl__bob { animation: fl-sail .5s ease-in-out infinite; }
.fl__boat.is-docked .fl__bob { animation: fl-docked .45s var(--ease-out); }
.fl__boat.is-cheer .fl__bob { animation: fl-cheer .5s ease-in-out 2; }
.fl__boat.is-crash .fl__bob { animation: fl-crash .4s ease-in-out 3; }
.fl__burst { position: absolute; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0 16%, #FFE27A 17% 30%, transparent 31%), repeating-conic-gradient(#FF8A3C 0 10deg, transparent 10deg 40deg); border-radius: 50%; transform: scale(.3); }
.fl__burst.is-on { animation: fl-burst .6s ease-out forwards; }
.fl__board.is-win { animation: fl-win .8s ease-out; }
.fl__cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; max-width: 440px; }
.fl__card { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 3px solid var(--c-ink); border-radius: 16px; background: #fff; transition: transform .2s, box-shadow .2s, background .2s; }
.fl__card.is-sel { box-shadow: 0 0 0 4px var(--c); transform: translateY(-2px); }
.fl__card.is-done { background: #E3F8E6; }
.fl__pick { display: inline-flex; align-items: center; gap: 6px; min-width: 64px; height: 46px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; font-weight: var(--fw-black); }
.fl__glyph { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: inset 0 0 0 3px var(--c-ink); font-size: 1.1em; }
.fl__len { font-size: .85em; opacity: .85; }
.fl__waitBox { display: inline-flex; align-items: center; gap: 4px; }
.fl__waitBox i { font-style: normal; font-size: .75em; opacity: .75; }
.fl__waitVal { min-width: 1.2ch; text-align: center; font-size: 1.2em; }
.fl__step { width: 40px; height: 40px; padding: 0; border: 3px solid var(--c-ink); border-radius: 12px; background: #FFF3C4; font-size: 1.4em; font-weight: var(--fw-black); box-shadow: 0 3px 0 var(--c-ink); line-height: 1; }
.fl__step:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-ink); }
.fl__step:disabled { opacity: .4; }
@keyframes fl-wave { 0%, 100% { transform: translateX(0); opacity: .35; } 50% { transform: translateX(8px); opacity: .7; } }
@keyframes fl-dock { to { transform: rotate(360deg); } }
@keyframes fl-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes fl-sail { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes fl-wake { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes fl-docked { 0% { transform: scale(1); } 40% { transform: scale(1.2) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes fl-cheer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes fl-crash { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-6px) rotate(-10deg); } 75% { transform: translateX(6px) rotate(10deg); } }
@keyframes fl-burst { 0% { opacity: 1; transform: scale(.3) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(40deg); } }
@keyframes fl-win { 0% { filter: brightness(1.4); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fl__cell::after, .fl__dock s, .fl__bob, .fl__boat.is-sail .fl__wake, .fl__boat.is-docked .fl__bob, .fl__boat.is-cheer .fl__bob, .fl__boat.is-crash .fl__bob, .fl__burst.is-on, .fl__board.is-win, .fl__dock.is-reached b { animation: none !important; } .fl__boat, .fl__card { transition: none; } .fl__burst.is-on { opacity: 1; transform: scale(1); } }
html[data-motion=reduced] .fl__cell::after, html[data-motion=reduced] .fl__dock s, html[data-motion=reduced] .fl__bob, html[data-motion=reduced] .fl__boat.is-sail .fl__wake, html[data-motion=reduced] .fl__boat.is-docked .fl__bob, html[data-motion=reduced] .fl__boat.is-cheer .fl__bob, html[data-motion=reduced] .fl__boat.is-crash .fl__bob, html[data-motion=reduced] .fl__burst.is-on, html[data-motion=reduced] .fl__board.is-win, html[data-motion=reduced] .fl__dock.is-reached b { animation: none !important; }
html[data-motion=reduced] .fl__boat, html[data-motion=reduced] .fl__card { transition: none !important; }
html[data-motion=reduced] .fl__burst.is-on { opacity: 1; transform: scale(1); }

/* ===== B9 Đội cứu hỏa tí hon (kind fire) ===== */
.fr { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.fr__goal { text-align: center; }
.fr__board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); border-radius: 16px; background: #A8E08F; box-shadow: 0 0 0 4px var(--c-ink); overflow: hidden; cursor: pointer; }
.fr__cell { position: relative; box-shadow: inset 0 0 0 1px rgba(43, 42, 76, .1); background: #B6E89E; transition: background .3s; }
.fr__cell:nth-child(odd) { background: #A8E08F; }
.fr__cell.is-wet { background: #8FD3F4; }
.fr__cell.is-peek { animation: fr-peek .6s ease-out; }
.fr__cell.is-left { box-shadow: inset 0 0 0 4px #E5484D; animation: fr-left 1s ease-in-out infinite; }
.fr__wall { background: #8A8FB8 !important; box-shadow: inset 0 0 0 3px #4A4F7C; }
.fr__bricks { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 30%, rgba(43, 42, 76, .35) 30% 34%), repeating-linear-gradient(90deg, transparent 0 45%, rgba(43, 42, 76, .3) 45% 49%); }
.fr__house { position: absolute; inset: 12% 14% 8%; display: block; transition: filter .4s; }
.fr__house svg { width: 100%; height: 100%; display: block; }
.fr__house.is-safe { animation: pp-pop-in .4s var(--ease-out); }
.fr__house.is-left { filter: saturate(.7) brightness(.85); }
.fr__flames { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2%; pointer-events: none; z-index: 2; }
.fr__flame { position: relative; width: 36%; height: 62%; border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 80%, #FFE27A 0 25%, #FF8A3C 26% 62%, #E5484D 63%); box-shadow: 0 0 0 2.5px var(--c-ink); transform-origin: 50% 100%; animation: fr-flicker .5s ease-in-out infinite alternate; }
.fr__flames--1 .fr__flame { width: 42%; height: 56%; }
.fr__flames--2 .fr__flame { width: 40%; height: 78%; }
.fr__flame:nth-child(2) { animation-delay: -.25s; }
.fr__flame.is-gone { display: none; }
.fr__flames.is-hit .fr__flame { animation: fr-hit .3s ease-out; }
.fr__flames.is-out { opacity: 0; transition: opacity .3s; }
.fr__steam { position: absolute; left: 30%; top: 20%; width: 40%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .85); opacity: 0; pointer-events: none; z-index: 3; }
.fr__steam.is-on { animation: fr-steam 1s ease-out forwards; }
.fr__hydrant { position: absolute; inset: 14% 20%; display: flex; align-items: flex-end; justify-content: center; }
.fr__hydrant i { position: relative; width: 56%; height: 82%; border-radius: 34% 34% 14% 14%; background: #E5484D; box-shadow: inset 0 0 0 3px var(--c-ink); }
.fr__hydrant i::before { content: ''; position: absolute; left: -26%; right: -26%; top: 36%; height: 22%; border-radius: 6px; background: #F26B6F; box-shadow: 0 0 0 2.5px var(--c-ink); }
.fr__hydrant.is-sel { animation: fr-pulse 1.2s ease-in-out infinite; }
.fr__hydrant:not(.is-sel) { filter: saturate(.8); }
.fr__guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fr__dot { position: absolute; width: 14%; max-width: 14px; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #3C7FB1; opacity: .75; transform: translate(-50%, -50%); }
.fr__stop { position: absolute; width: 58%; max-width: 40px; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-linear-gradient(45deg, rgba(229, 72, 77, .5) 0 4px, transparent 4px 8px); border-radius: 8px; }
.fr__truck { position: absolute; z-index: 4; display: none; pointer-events: none; transition: left .35s var(--ease-out), top .35s var(--ease-out); }
.fr__truck.is-on { display: block; }
.fr__truckIn { position: absolute; inset: 8% -6% 8%; display: block; animation: fr-idle 2s ease-in-out infinite; }
.fr__truckIn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fr__siren { animation: fr-siren .6s steps(2) infinite; }
.fr__truck.is-spray .fr__truckIn { animation: fr-spray .25s linear infinite; }
.fr__jets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fr__jet { position: absolute; border-radius: 99px; background: repeating-linear-gradient(90deg, #BFEBFF 0 8px, #5AB4F0 8px 14px); box-shadow: 0 0 0 2px #3C7FB1; opacity: .95; }
.fr__jet--U, .fr__jet--D { background: repeating-linear-gradient(0deg, #BFEBFF 0 8px, #5AB4F0 8px 14px); }
.fr__jet--R { transform-origin: left center; animation: fr-jetx .35s ease-out backwards; } .fr__jet--L { transform-origin: right center; animation: fr-jetx .35s ease-out backwards; }
.fr__jet--D { transform-origin: center top; animation: fr-jety .35s ease-out backwards; } .fr__jet--U { transform-origin: center bottom; animation: fr-jety .35s ease-out backwards; }
.fr__jet.is-fade { opacity: 0; transition: opacity .15s; }
.fr__board.is-win { animation: fr-win .8s ease-out; }
.fr__tank { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; max-width: 360px; padding: 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 3px var(--c-ink); }
.fr__tankLabel { font-style: normal; font-weight: var(--fw-black); font-size: .8em; margin-right: 4px; }
.fr__drop { width: 16px; height: 22px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #D7DCF0; box-shadow: inset 0 0 0 2px #9AA3C7; transition: background .25s, transform .25s; }
.fr__drop.is-full { background: #5AB4F0; box-shadow: inset 0 0 0 2px #2E7FBF; }
.fr__queue { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 48px; width: 100%; max-width: 420px; align-items: center; }
.fr__empty { font-size: .85em; opacity: .65; }
.fr__chip { display: inline-flex; align-items: center; gap: 4px; min-width: 56px; height: 44px; padding: 0 10px; border: 3px solid var(--c-ink); border-radius: 14px; background: #fff; font-size: 1.1em; animation: pp-pop-in .25s var(--ease-out); }
.fr__chip i { font-style: normal; font-weight: var(--fw-black); padding: 0 .35em; border-radius: var(--r-pill); background: #BFEBFF; }
.fr__chip.is-now { background: var(--c-sun); }
@keyframes fr-flicker { 0% { transform: scale(1, 1) rotate(-3deg); } 100% { transform: scale(.92, 1.1) rotate(3deg); } }
@keyframes fr-hit { 0% { transform: scale(1.2, .8); } 100% { transform: scale(1); } }
@keyframes fr-steam { 0% { opacity: .9; transform: translateY(0) scale(.5); } 100% { opacity: 0; transform: translateY(-26px) scale(1.6); } }
@keyframes fr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes fr-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fr-siren { 0% { filter: none; } 100% { filter: hue-rotate(-40deg) brightness(1.3); } }
@keyframes fr-spray { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
@keyframes fr-jetx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fr-jety { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fr-peek { 0% { background: #8FD3F4; } 100% { background: inherit; } }
@keyframes fr-left { 0%, 100% { box-shadow: inset 0 0 0 4px #E5484D; } 50% { box-shadow: inset 0 0 0 4px #FFB3B5; } }
@keyframes fr-win { 0% { filter: brightness(1.35); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fr__flame, .fr__flames.is-hit .fr__flame, .fr__steam.is-on, .fr__hydrant.is-sel, .fr__truckIn, .fr__siren, .fr__truck.is-spray .fr__truckIn, .fr__jet, .fr__board.is-win, .fr__cell.is-peek, .fr__cell.is-left, .fr__chip, .fr__house.is-safe { animation: none !important; } .fr__truck { transition: none; } .fr__steam.is-on { opacity: .8; } }
html[data-motion=reduced] .fr__flame, html[data-motion=reduced] .fr__flames.is-hit .fr__flame, html[data-motion=reduced] .fr__steam.is-on, html[data-motion=reduced] .fr__hydrant.is-sel, html[data-motion=reduced] .fr__truckIn, html[data-motion=reduced] .fr__siren, html[data-motion=reduced] .fr__truck.is-spray .fr__truckIn, html[data-motion=reduced] .fr__jet, html[data-motion=reduced] .fr__board.is-win, html[data-motion=reduced] .fr__cell.is-peek, html[data-motion=reduced] .fr__cell.is-left, html[data-motion=reduced] .fr__chip, html[data-motion=reduced] .fr__house.is-safe { animation: none !important; }
html[data-motion=reduced] .fr__truck { transition: none !important; }
html[data-motion=reduced] .fr__steam.is-on { opacity: .8; }

/* ===== B10 Trung tâm điều phối cứu hộ (kind dispatch) ===== */
.dp { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); width: 100%; }
.dp__goal { text-align: center; }
.dp__map { position: relative; width: min(100%, 440px); aspect-ratio: 5 / 4.4; border-radius: 16px; background: linear-gradient(#BDEBFF 0 18%, #A8E08F 18%); box-shadow: 0 0 0 4px var(--c-ink); overflow: hidden; }
.dp__roads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dp__garage { position: absolute; width: 62%; height: 15%; transform: translate(-50%, -50%); border-radius: 12px 12px 6px 6px; background: #D8DCF3; box-shadow: inset 0 0 0 3px var(--c-ink); display: flex; align-items: flex-end; justify-content: center; font-size: .7em; }
.dp__garage i { position: absolute; left: 6%; right: 6%; top: -18%; height: 26%; border-radius: 10px 10px 0 0; background: #E5484D; box-shadow: inset 0 0 0 3px var(--c-ink); }
.dp__garage b { position: relative; padding-bottom: 2px; }
.dp__inc { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 24%; min-width: 84px; padding: 5px 4px 6px; transform: translate(-50%, -50%); border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 3px var(--c); transition: background .3s, box-shadow .3s; }
.dp__glyph { position: absolute; left: -6px; top: -10px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 2.5px var(--c-ink); font-size: .85em; }
.dp__icons { display: flex; gap: 2px; }
.dp__icons svg { width: 28px; height: 28px; }
.dp__chain { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
.dp__chain em { font-style: normal; font-size: .7em; opacity: .6; }
.dp__need { position: relative; display: inline-block; width: 36px; height: 26px; }
.dp__need .dp__veh { width: 100%; height: 100%; }
.dp__tick { position: absolute; right: -4px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #4CC15F; color: #fff; box-shadow: 0 0 0 2px var(--c-ink); font-style: normal; font-size: .7em; line-height: 16px; text-align: center; transform: scale(0); }
.dp__need.is-ok .dp__tick { transform: scale(1); animation: pp-pop-in .3s var(--ease-out); }
.dp__need.is-ok .dp__veh { opacity: .55; }
.dp__veh { display: inline-block; width: 44px; height: 32px; }
.dp__veh svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dp__beacon { position: absolute; right: 4px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--c-ink); animation: dp-beacon 1s steps(2) infinite; }
.dp__inc.is-done { background: #E3F8E6; box-shadow: inset 0 0 0 3px #4CC15F; }
.dp__inc.is-done .dp__beacon { background: #4CC15F; animation: none; }
.dp__inc.is-late { animation: dp-late 1s ease-in-out infinite; }
.dp__car { position: absolute; z-index: 3; width: 11%; min-width: 36px; aspect-ratio: 56 / 40; transform: translate(-50%, -50%); transition: left var(--trip, .75s) ease-in-out, top var(--trip, .75s) ease-in-out; animation: dp-idle 2.4s ease-in-out infinite; }
.dp__car:nth-child(odd) { animation-delay: -1.2s; }
.dp__car .dp__veh { width: 100%; height: 100%; }
.dp__car.is-out { animation: none; }
.dp__work { position: absolute; left: 50%; top: -20%; width: 40%; aspect-ratio: 1; transform: translateX(-50%) scale(0); border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #FFE27A 21% 45%, transparent 46%), repeating-conic-gradient(#FFB020 0 10deg, transparent 10deg 40deg); }
.dp__car.is-work .dp__work { animation: dp-work .5s ease-out; }
.dp__bub { position: absolute; right: -14%; top: -30%; min-width: 1.2em; padding: 0 .25em; border-radius: var(--r-pill); background: #E5484D; color: #fff; font-size: .8em; text-align: center; box-shadow: 0 0 0 2px var(--c-ink); opacity: 0; transform: scale(.4); }
.dp__car.is-bad { animation: dp-shake .35s 2; }
.dp__car.is-bad .dp__bub { opacity: 1; transform: scale(1); transition: transform .2s var(--ease-out); }
.dp__map.is-win { animation: dp-win .8s ease-out; }
.dp__table { display: flex; flex-direction: column; gap: 6px; width: min(100%, 440px); }
.dp__row { display: grid; grid-template-columns: 4.6em repeat(var(--nv), 1fr); align-items: center; gap: 6px; padding: 4px 6px; border-radius: 14px; background: rgba(255, 255, 255, .7); transition: background .2s, transform .2s; }
.dp__row--head { background: transparent; padding-bottom: 0; }
.dp__row.is-now { background: var(--c-sun); transform: translateY(-2px); }
.dp__row.is-past { opacity: .6; }
.dp__row.is-bad { background: #FFD5D6; }
.dp__rn { font-size: .85em; }
.dp__col { display: flex; justify-content: center; }
.dp__col .dp__veh { width: 100%; max-width: 54px; height: auto; aspect-ratio: 56 / 40; }
.dp__cell { height: 46px; border: 3px solid var(--c, #9AA3C7); border-radius: 12px; background: #fff; color: var(--c, #9AA3C7); font-size: 1.4em; font-weight: var(--fw-black); line-height: 1; transition: transform .12s, background .2s; }
.dp__cell.is-set { background: #fff; box-shadow: inset 0 0 0 2px var(--c); }
.dp__cell:active:not(:disabled) { transform: scale(.94); }
.dp__cell:disabled { opacity: .6; }
@keyframes dp-beacon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes dp-late { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-52%, -50%); } 75% { transform: translate(-48%, -50%); } }
@keyframes dp-idle { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -54%); } }
@keyframes dp-work { 0% { transform: translateX(-50%) scale(.2) rotate(0); opacity: 1; } 100% { transform: translateX(-50%) scale(1.4) rotate(40deg); opacity: 0; } }
@keyframes dp-shake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-58%, -50%); } 75% { transform: translate(-42%, -50%); } }
@keyframes dp-win { 0% { filter: brightness(1.35); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .dp__beacon, .dp__inc.is-late, .dp__car, .dp__car.is-work .dp__work, .dp__car.is-bad, .dp__map.is-win, .dp__need.is-ok .dp__tick { animation: none !important; } .dp__car { transition: none; } .dp__car.is-work .dp__work { opacity: 1; transform: translateX(-50%) scale(1); } }
html[data-motion=reduced] .dp__beacon, html[data-motion=reduced] .dp__inc.is-late, html[data-motion=reduced] .dp__car, html[data-motion=reduced] .dp__car.is-work .dp__work, html[data-motion=reduced] .dp__car.is-bad, html[data-motion=reduced] .dp__map.is-win, html[data-motion=reduced] .dp__need.is-ok .dp__tick { animation: none !important; }
html[data-motion=reduced] .dp__car { transition: none !important; }
html[data-motion=reduced] .dp__car.is-work .dp__work { opacity: 1; transform: translateX(-50%) scale(1); }