/* tpl-C.css — giao diện nhóm C: gameshow, quiz, truefalse, openbox, wheel, hangman, anagram (tách từ CSS nhúng trong template) */

/* ===== gameshow (sân khấu truyền hình: đèn rọi, khán giả, MC + bục, 4 đáp án màu, đồng hồ, trợ giúp) ===== */
.tg { --gs-bg: #120a36; --gs-panel: #241a6b; --gs-edge: #7c6cff; --gs-gold: #ffc53d; --gs-a0: #e5484d; --gs-a1: #2f7cf6; --gs-a2: #f5a524; --gs-a3: #1fa463;
  color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 19vw, 340px); gap: clamp(10px, 1.4vw, 24px); width: 100%; max-width: 1800px; margin: 0 auto; min-height: 100%; padding: clamp(10px, 1.4vw, 24px); border-radius: var(--r-xl);
  background: radial-gradient(70% 45% at 50% 108%, #3a2bb0 0, transparent 70%), radial-gradient(40% 60% at 12% -10%, rgba(255,214,102,.28), transparent 70%), radial-gradient(40% 60% at 88% -10%, rgba(124,108,255,.35), transparent 70%), linear-gradient(180deg, #1b1050 0%, var(--gs-bg) 60%, #0b0626 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.5), var(--shadow-card); position: relative; overflow: hidden; isolation: isolate; }
/* đèn rọi quét */
.tg::before { content: ""; position: absolute; z-index: -1; inset: -20% -20% 30%; background: conic-gradient(from 160deg at 18% 0%, transparent 0 8deg, rgba(255,240,200,.12) 12deg, transparent 18deg), conic-gradient(from 168deg at 82% 0%, transparent 0 8deg, rgba(190,180,255,.14) 12deg, transparent 18deg); pointer-events: none; animation: tg-sweep 7s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes tg-sweep { to { transform: skewX(-8deg); } }
/* hàng khán giả + sàn sân khấu */
.tg::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: clamp(40px, 8vh, 90px); pointer-events: none; opacity: .55;
  background: radial-gradient(14px 16px at 20px 100%, #05021a 98%, transparent) 0 100% / 40px 30px repeat-x, radial-gradient(12px 14px at 20px 100%, #0a0630 98%, transparent) 20px 100% / 40px 46px repeat-x, linear-gradient(180deg, transparent, rgba(0,0,0,.5)); }
.tg-main { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(8px, 1.6vh, 22px); min-width: 0; }
.tg-top { display: flex; align-items: center; gap: clamp(6px, .9vw, 14px); flex-wrap: wrap; }
.tg-life { position: relative; width: clamp(50px, 4.6vw, 80px); aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); background: radial-gradient(circle at 50% 30%, #4a3cc9, #251a7a 70%); color: #fff; font-family: inherit; font-weight: 900; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 0 #0c0733, 0 0 0 4px rgba(124,108,255,.25); transition: transform .15s var(--ease-out), box-shadow .2s, filter .2s; padding: 0; touch-action: manipulation; }
.tg-life svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tg-life:hover:not([disabled]) { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 0 #0c0733, 0 0 22px rgba(255,197,61,.55); }
.tg-life:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 2px 0 #0c0733; }
.tg-life:focus-visible { outline: 3px solid var(--gs-gold); outline-offset: 3px; }
.tg-life[disabled] { cursor: default; filter: grayscale(.7) brightness(.7); }
.tg-life.used::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: linear-gradient(to top right, transparent calc(50% - 2.5px), var(--gs-a0) calc(50% - 2.5px) calc(50% + 2.5px), transparent calc(50% + 2.5px)); }
.tg-life.fire { animation: tg-fire .6s var(--ease-out); }
@keyframes tg-fire { 40% { transform: scale(1.25); box-shadow: 0 0 30px var(--gs-gold); } }
.tg-life kbd { position: absolute; right: -6px; top: -6px; min-width: 1.4em; padding: 0 .3em; font-size: .6rem; color: var(--c-ink); }
.tg-sp { flex: 1; }
.tg-clock { --p: 100; position: relative; width: clamp(58px, 5.6vw, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gs-gold) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); font-weight: 900; font-size: clamp(1.2rem, .8rem + 1.1vw, 2.4rem); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 24px rgba(255,197,61,.35); }
.tg-clock span { width: 80%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #2d2185, #120a36); }
.tg-clock.low { background: conic-gradient(var(--gs-a0) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); box-shadow: 0 0 0 4px rgba(0,0,0,.35), 0 0 26px rgba(229,72,77,.7); animation: pulse 1s infinite; }
.tg-clock.bonus::after { content: "+15"; position: absolute; top: -8px; right: -14px; font-size: .5em; color: var(--gs-gold); animation: tg-up 1s var(--ease-out) forwards; }
@keyframes tg-up { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
.tg-walk { background: rgba(255,255,255,.08); color: #fff; border: 2px solid rgba(255,255,255,.35); }
.tg-walk .ws { display: none; }
.tg-walk:hover { background: rgba(255,255,255,.16); }
.tg-walk.arm { background: var(--gs-a0); border-color: var(--gs-a0); }
.tg-prize { font-weight: 900; color: var(--gs-gold); font-size: clamp(.9rem, .75rem + .5vw, 1.4rem); white-space: nowrap; padding: .3em .8em; border-radius: 999px; background: rgba(0,0,0,.3); border: 2px solid rgba(255,197,61,.4); }
/* bảng câu hỏi: màn hình LED */
.tg-qwrap { position: relative; padding: 4px; border-radius: 24px; background: linear-gradient(135deg, #ffd166, #7c6cff 40%, #2f7cf6 70%, #ffd166); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 40px rgba(124,108,255,.35); }
.tg-q { display: grid; place-items: center; gap: clamp(6px, 1.2vh, 16px); text-align: center; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, #3a2c9c, #1a1158 70%); padding: clamp(12px, 2.2vh, 34px) clamp(16px, 3vw, 60px); min-height: clamp(90px, 16vh, 220px); }
.tg-q h2 { font-size: clamp(1.15rem, .8rem + 1.8vw, 3.1rem); font-weight: 800; line-height: 1.22; overflow-wrap: anywhere; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.tg-q img { max-height: min(22vh, 260px); max-width: 100%; border-radius: 14px; object-fit: contain; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.tg-qno { font-weight: 900; color: #1b0f30; background: var(--gs-gold); padding: .2em .9em; border-radius: 999px; font-size: clamp(.75rem, .65rem + .4vw, 1.1rem); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 3px 0 #a8650a; }
/* 4 đáp án màu */
.tg-opts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vh, 22px) clamp(10px, 1.6vw, 26px); align-content: start; }
.tg-optw { --c: var(--gs-a0); --d: #9c1f2c; border-radius: 18px; transition: opacity .3s, transform .2s var(--ease-out), filter .3s; }
.tg-optw:nth-child(2) { --c: var(--gs-a1); --d: #1747a6; }
.tg-optw:nth-child(3) { --c: var(--gs-a2); --d: #a8650a; }
.tg-optw:nth-child(4) { --c: var(--gs-a3); --d: #0e6a3c; }
.tg-opt { width: 100%; display: flex; align-items: center; gap: .55em; min-height: clamp(56px, 9vh, 116px); padding: .3em clamp(12px, 1.4vw, 26px); border: 0; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%); color: #fff; font-family: inherit; font-weight: 800; font-size: clamp(1rem, .7rem + 1.1vw, 2.2rem); text-align: left; cursor: pointer; line-height: 1.18; touch-action: manipulation; box-shadow: 0 6px 0 var(--d), 0 10px 18px rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s, filter .2s; }
.tg-opt .L { flex: none; display: grid; place-items: center; width: 1.7em; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--d); font-weight: 900; text-shadow: none; font-size: .85em; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.tg-opt .T { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tg-opt:hover:not([disabled]) { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 0 var(--d), 0 14px 22px rgba(0,0,0,.4); }
.tg-opt:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 2px 0 var(--d), 0 4px 8px rgba(0,0,0,.35); }
.tg-opt:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.tg-optw.sel { transform: scale(1.03); }
.tg-optw.sel .tg-opt, .tg-optw.lock .tg-opt { outline: 4px solid var(--gs-gold); outline-offset: 3px; box-shadow: 0 6px 0 var(--d), 0 0 30px rgba(255,197,61,.8); }
.tg-optw.lock { animation: tg-blink .5s steps(2) infinite; }
@keyframes tg-blink { 50% { filter: brightness(1.35); } }
.tg-opts.done .tg-optw:not(.ok):not(.bad) { opacity: .35; filter: grayscale(.6); }
.tg-optw.ok { animation: tg-win .35s steps(2) 4; transform: scale(1.04); }
.tg-optw.ok .tg-opt { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 6px 0 var(--d), 0 0 34px rgba(80,255,160,.9); }
.tg-optw.ok .L { color: var(--gs-a3); } .tg-optw.bad .L { color: var(--gs-a0); }
@keyframes tg-win { 50% { filter: brightness(1.5); } }
.tg-optw.bad { animation: shake .45s; filter: saturate(.6) brightness(.8); }
.tg-optw.gone { opacity: .12; filter: grayscale(1); transform: scale(.94); }
.tg-optw.gone .tg-opt { cursor: default; box-shadow: none; }
.tg-confirm { display: flex; justify-content: center; gap: .6rem; min-height: calc(var(--tap) + 12px); }
.tg-confirm .btn-primary { background: linear-gradient(180deg, #ffd166, #f59e0b); color: #1b0f30; box-shadow: 0 5px 0 #a8650a; animation: pop .25s var(--ease-out); }
.tg-aux:not(:empty) { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 10px; border-radius: 20px; background: rgba(10,6,38,.78); backdrop-filter: blur(2px); cursor: pointer; }
.tg-aux:not(:empty)::after { content: "Chạm để đóng"; position: absolute; bottom: 6px; right: 12px; font-size: .72rem; opacity: .6; }
.tg-poll { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2vw, 34px); height: clamp(110px, 18vh, 230px); padding: 10px 18px 0; border-radius: 16px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.12); animation: pop .3s var(--ease-out); }
.tg-bar { width: clamp(30px, 4vw, 70px); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; font-weight: 800; font-size: clamp(.75rem, .6rem + .4vw, 1.1rem); }
.tg-bar i { align-self: end; width: 100%; height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #fff6, transparent), var(--c, var(--gs-gold)); transition: height 1.4s var(--ease-out); }
.tg-bar:nth-child(1) { --c: var(--gs-a0); } .tg-bar:nth-child(2) { --c: var(--gs-a1); } .tg-bar:nth-child(3) { --c: var(--gs-a2); } .tg-bar:nth-child(4) { --c: var(--gs-a3); }
.tg-bar b { color: var(--gs-gold); padding: 4px 0; }
.tg-call { display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.22); font-weight: 700; font-size: clamp(.95rem, .75rem + .6vw, 1.5rem); animation: pop .3s var(--ease-out); }
.tg-call .av { flex: none; width: 2.4em; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gs-a1); font-size: 1.1em; }
/* cột phải: bảng điểm + MC đứng bục */
.tg-side { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; contain: size; }
.tg-ladder { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: clamp(6px, .8vw, 14px); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(36,26,107,.85), rgba(10,6,38,.85)); border: 2px solid rgba(124,108,255,.45); box-shadow: inset 0 0 20px rgba(0,0,0,.4); overflow: auto; min-height: 0; scrollbar-width: thin; }
.tg-step { display: grid; grid-template-columns: 2.2em 1fr; align-items: center; padding: clamp(2px, .4vh, 7px) .8em; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(.78rem, .6rem + .45vw, 1.25rem); color: color-mix(in srgb, #fff 70%, transparent); transition: background .3s; }
.tg-step .n { opacity: .7; }
.tg-step .v { text-align: right; }
.tg-step.safe { color: #fff; } .tg-step.safe .v::before { content: "◆ "; color: var(--gs-gold); }
.tg-step.top .v { color: var(--gs-gold); }
.tg-step.won { color: color-mix(in srgb, #fff 45%, transparent); }
.tg-step.won .n::after { content: " ✓"; color: #34d27b; }
.tg-step.cur { background: linear-gradient(90deg, #ffd166, #f59e0b); color: #1b0f30; box-shadow: 0 0 16px rgba(255,179,71,.6); }
.tg-step.cur .v::before { color: #1b0f30; }
.tg-host { position: relative; display: grid; justify-items: center; height: clamp(110px, 20vh, 200px); }
.tg-host svg { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.tg-host .hb { transform-origin: 60px 150px; animation: tg-idle 2.4s ease-in-out infinite; }
@keyframes tg-idle { 50% { transform: translateY(-2px) rotate(-1deg); } }
.tg-host .arm-r { transform-origin: 82px 92px; transition: transform .3s var(--ease-out); }
.tg-host .m-sad, .tg-host .m-o { display: none; }
.tg-host.happy .arm-r { transform: rotate(-70deg); } .tg-host.happy .hb { animation: tg-jump .5s ease-in-out 2; }
.tg-host.sad .m-happy { display: none; } .tg-host.sad .m-sad { display: inline; } .tg-host.sad .hb { animation: none; transform: rotate(3deg); }
.tg-host.think .m-happy { display: none; } .tg-host.think .m-o { display: inline; }
@keyframes tg-jump { 50% { transform: translateY(-10px); } }
.tg-bubble { position: absolute; z-index: 2; top: -6px; left: 50%; transform: translate(-50%, -100%); max-width: 100%; padding: .4em .8em; border-radius: 14px; background: #fff; color: var(--c-ink, #1b1b2f); font-weight: 800; font-size: clamp(.75rem, .6rem + .35vw, 1.05rem); white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,.3); animation: pop .3s var(--ease-out); }
.tg-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }
.tg-bubble:empty { display: none; }
.tg-banner { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(60,40,160,.6), rgba(10,5,30,.85)); backdrop-filter: blur(4px); animation: pop .3s var(--ease-out); }
.tg-banner div { display: grid; gap: .4em; padding: 1em 1.4em; }
.tg-banner small { font-weight: 800; color: var(--gs-gold); font-size: clamp(1rem, .8rem + .8vw, 1.8rem); text-transform: uppercase; letter-spacing: .08em; }
.tg-banner b { font-size: clamp(2.2rem, 1.4rem + 4vw, 6rem); font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(255,197,61,.7); }
.tg-banner span { font-weight: 700; opacity: .85; font-size: clamp(.95rem, .8rem + .5vw, 1.4rem); }
@media (max-width: 900px) {
  .tg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 10px; gap: 8px; border-radius: var(--r-lg); align-content: start; }
  .tg-side { order: -1; display: block; contain: none; }
  .tg-host { display: none; }
  .tg-ladder { flex-direction: row; justify-content: flex-start; overflow-x: auto; padding: 5px; gap: 4px; scrollbar-width: none; }
  .tg-step { grid-template-columns: auto; padding: 3px 10px; flex: none; font-size: .76rem; }
  .tg-step .n { display: none; }
  .tg-main { gap: 8px; }
  .tg-opts { grid-template-columns: 1fr; gap: 10px; }
  .tg-opt { min-height: 52px; font-size: 1rem; padding: .3em 12px; border-radius: 14px; box-shadow: 0 4px 0 var(--d); }
  .tg-optw { border-radius: 14px; }
  .tg-q { min-height: 0; padding: 10px 14px; border-radius: 16px; }
  .tg-qwrap { border-radius: 19px; padding: 3px; }
  .tg-q h2 { font-size: 1.12rem; }
  .tg-q img { max-height: 18vh; }
  .tg-life kbd, .tg-prize { display: none; }
  .tg-top { flex-wrap: nowrap; gap: 6px; }
  .tg-walk { padding: 0 10px; font-size: .8rem; min-height: 44px; white-space: nowrap; }
  .tg-walk .wl { display: none; } .tg-walk .ws { display: inline; }
  .tg-top, .tg-qwrap, .tg-opts { min-width: 0; }
  .tg-life { width: 44px; border-width: 2px; box-shadow: 0 3px 0 #0c0733; }
  .tg-clock { width: 50px; font-size: 1.05rem; }
  .tg-poll { height: 110px; }
  .tg-side { min-width: 0; }
  .tg-call { font-size: .92rem; padding: 10px 12px; }
  .tg-aux:not(:empty) { border-radius: 16px; }
  .tg-confirm { min-height: 0; }
}
@media (max-width: 380px) { .tg-life { width: 40px; } .tg-clock { width: 44px; } .tg-walk { padding: 0 8px; font-size: .72rem; } .tg-top { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .tg::before, .tg-optw.lock, .tg-optw.ok, .tg-host .hb, .tg-optw.bad { animation: none; } }

/* ===== truefalse ===== */
.tt { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: clamp(10px, 2vh, 28px); width: 100%; max-width: 1600px; margin: 0 auto; min-height: 100%; }
.tt-head { display: flex; justify-content: center; align-items: center; gap: .7rem; flex-wrap: wrap; font-weight: 800; color: var(--c-muted); font-size: clamp(.95rem, .8rem + .5vw, 1.5rem); }
.tt-combo { background: var(--c-accent); color: #fff; border-radius: 999px; padding: .2em 1em; transition: transform .2s var(--ease-out), opacity .2s; }
.tt-combo.off { opacity: .35; }
.tt-combo.bump { animation: pulse .35s; }
.tt-bar { height: clamp(8px, 1.2vh, 16px); border-radius: 99px; background: var(--c-surface-2); overflow: hidden; border: 1px solid var(--c-line); }
.tt-bar i { display: block; height: 100%; width: 100%; background: var(--c-primary); border-radius: 99px; transform-origin: left; }
.tt-bar i.run { transition: width linear; width: 0; }
.tt-bar.low i { background: var(--c-bad); }
.tt-card { display: grid; align-content: center; justify-items: center; gap: clamp(10px, 2vh, 30px); text-align: center; background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: clamp(16px, 3vh, 56px) clamp(16px, 3vw, 72px); animation: tt-in .3s var(--ease-out); min-height: clamp(220px, 38vh, 640px); }
.tt-card h2 { font-size: clamp(1.3rem, .9rem + 2.2vw, 3.6rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tt-card img { max-height: min(24vh, 280px); max-width: 100%; border-radius: var(--r); object-fit: contain; }
.tt-eq { width: clamp(40px, 5vw, 80px); height: 6px; border-radius: 6px; background: var(--c-line); }
.tt-ans { display: inline-block; max-width: 100%; padding: .35em .9em; border-radius: var(--r-lg); background: var(--c-primary-soft); color: var(--c-ink); font-weight: 900; font-size: clamp(1.5rem, 1rem + 3vw, 4.8rem); line-height: 1.15; overflow-wrap: anywhere; border: 4px dashed var(--c-primary); }
.tt-card.ok { box-shadow: 0 0 0 8px var(--c-ok), var(--shadow-card); } .tt-card.bad { box-shadow: 0 0 0 8px var(--c-bad), var(--shadow-card); animation: shake .4s; }
.tt-verdict { font-weight: 900; font-size: clamp(1.1rem, .8rem + 1.4vw, 2.4rem); min-height: 1.3em; }
.tt-verdict.ok { color: var(--c-ok); } .tt-verdict.bad { color: var(--c-bad); }
.tt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 28px); }
.tt-btn { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: clamp(70px, 14vh, 180px); border: 0; border-radius: var(--r-lg); color: #fff; font: inherit; font-weight: 900; font-size: clamp(1.4rem, .9rem + 2vw, 3.6rem); cursor: pointer; touch-action: manipulation; transition: transform .12s var(--ease-out), opacity .2s; }
.tt-btn.yes { background: var(--c-ok); box-shadow: 0 7px 0 color-mix(in srgb, var(--c-ok) 60%, #000); }
.tt-btn.no { background: var(--c-bad); box-shadow: 0 7px 0 color-mix(in srgb, var(--c-bad) 60%, #000); }
.tt-btn:hover:not([disabled]) { transform: translateY(-3px); }
.tt-btn:active:not([disabled]) { transform: translateY(3px); }
.tt-btn[disabled] { cursor: default; opacity: .45; }
.tt-btn .icon { width: 1.1em; height: 1.1em; stroke-width: 3; }
.tt-btn kbd { font-size: .35em; color: var(--c-ink); }
@keyframes tt-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .tt-btn kbd { display: none; } .tt-btn { min-height: 76px; } }
@media (prefers-reduced-motion: reduce) { .tt-card, .tt-combo.bump { animation: none; } .tt-bar i.run { transition: none; } }

/* ===== openbox ===== */
.to { display: grid; grid-template-rows: auto 1fr; gap: clamp(10px, 2vh, 28px); width: 100%; max-width: 1760px; margin: 0 auto; min-height: 100%; }
.to-head { display: flex; justify-content: center; font-weight: 800; color: var(--c-muted); font-size: clamp(.95rem, .8rem + .6vw, 1.7rem); text-align: center; }
.to-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 36px); align-content: center; }
@media (max-width: 700px) { .to-grid { --cols: var(--cols-m, 3); gap: 10px; } }
.to-box { --c: var(--opt-1); position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.12; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; touch-action: manipulation; font-family: inherit; }
.to-box .body { position: absolute; left: 6%; right: 6%; bottom: 0; height: 66%; border-radius: 6% 6% 14% 14%; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 58%, #000), 0 14px 22px -8px rgba(34, 22, 58, .35); transition: transform .15s var(--ease-out); }
.to-box .body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 42%; width: 16%; background: rgba(255, 255, 255, .55); }
.to-box .lid { position: absolute; left: 1%; right: 1%; top: 6%; height: 34%; border-radius: 12%; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), color-mix(in srgb, var(--c) 92%, #000)); box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 58%, #000); transform-origin: 50% 100%; transition: transform .45s var(--ease-out); z-index: 2; }
.to-box .lid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 43.5%; width: 13%; background: rgba(255, 255, 255, .6); }
.to-box .num { position: relative; z-index: 3; margin-top: 30%; font-weight: 900; color: #fff; font-size: clamp(1.5rem, .8rem + 2.6vw, 4.6rem); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); line-height: 1; }
.to-box:hover:not([disabled]) .body, .to-box:focus-visible .body { transform: translateY(-4px); }
.to-box:hover:not([disabled]) .lid, .to-box:focus-visible .lid { transform: translateY(-4px) rotateX(18deg); }
.to-box:focus-visible { outline: 4px solid var(--c-primary); outline-offset: 4px; border-radius: 16px; }
.to-box.opening { animation: to-pop .5s var(--ease-out) forwards; z-index: 5; }
.to-box.opening .lid { transform: translateY(-14%) rotateX(-110deg); }
.to-box.opening .body::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0, #fff8, transparent 70%); }
@keyframes to-pop { 50% { transform: scale(1.18) rotate(-3deg); } 100% { transform: scale(1.05); } }
.to-box.done { cursor: default; --c: var(--c-ok); }
.to-box.done.bad { --c: var(--c-bad); }
.to-box.done .lid { transform: translateY(-10%) rotateX(-70deg); opacity: .5; }
.to-box.done .num { margin-top: 18%; font-size: clamp(2rem, 1rem + 3vw, 5.5rem); }
.to-box.done .body::before { display: none; }
.to-card { display: grid; grid-template-rows: auto auto 1fr; gap: clamp(12px, 2.4vh, 36px); width: 100%; max-width: 1760px; margin: 0 auto; min-height: 100%; animation: pop .3s var(--ease-out); }
.to-badge { justify-self: center; font-weight: 900; color: var(--c-primary-ink); background: var(--c-primary); border-radius: 999px; padding: .3em 1.1em; font-size: clamp(.95rem, .8rem + .6vw, 1.7rem); box-shadow: var(--shadow-press); }
.to-card .tq-opts { align-self: start; }
@media (max-width: 700px) { .to-card .tq-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .to-box, .to-box * { transition: none !important; animation-duration: .01s !important; } }

/* ===== wheel ===== */
.tw { display: grid; align-content: center; gap: clamp(10px, 2vh, 28px); width: 100%; max-width: 1760px; margin: 0 auto; min-height: 100%; }
.tw-main { display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: clamp(16px, 3vw, 72px); align-items: center; justify-content: center; }
.tw-wheelbox { position: relative; width: min(58vw, calc(100vh - 190px)); aspect-ratio: 1; touch-action: manipulation; }
.tw-wheelbox canvas { width: 100%; height: 100%; display: block; cursor: pointer; filter: drop-shadow(0 14px 24px rgba(34, 22, 58, .28)); }
.tw-side { display: grid; gap: clamp(12px, 2vh, 28px); justify-items: center; text-align: center; align-content: center; }
.tw-left { font-weight: 800; color: var(--c-muted); font-size: clamp(1rem, .8rem + .9vw, 2rem); }
.tw-left b { color: var(--c-primary); font-size: 1.6em; }
.tw-spin { min-width: min(100%, 14em); }
.tw-spin[disabled] { opacity: .6; cursor: default; }
.tw-hist { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 36em; }
.tw-hist i { font-style: normal; font-weight: 800; min-width: 2.2em; padding: .25em .6em; border-radius: 999px; font-size: clamp(.8rem, .7rem + .4vw, 1.2rem); color: #fff; background: var(--c-ok); }
.tw-hist i.bad { background: var(--c-bad); }
.tw-card { display: grid; grid-template-rows: auto auto 1fr; gap: clamp(12px, 2.4vh, 36px); width: 100%; max-width: 1760px; margin: 0 auto; min-height: 100%; animation: pop .3s var(--ease-out); }
.tw-badge { justify-self: center; font-weight: 900; color: var(--c-primary-ink); background: var(--c-primary); border-radius: 999px; padding: .3em 1.1em; font-size: clamp(.95rem, .8rem + .6vw, 1.7rem); box-shadow: var(--shadow-press); }
.tw-card .tq-opts { align-self: start; }
@media (max-width: 820px) {
  .tw-main { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .tw-wheelbox { width: min(94vw, calc(100vh - 300px)); max-width: 100%; }
  .tw-main { min-width: 0; max-width: 100%; }
  .tw-card .tq-opts { grid-template-columns: 1fr; }
}

/* ===== hangman ===== */
.th { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "scene hint" "scene word" "scene keys"; gap: clamp(10px, 1.8vh, 26px) clamp(14px, 2vw, 40px); width: 100%; max-width: 1800px; margin: 0 auto; height: 100%; min-height: 0; }
.th-scene { grid-area: scene; position: relative; min-height: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-primary-soft) 70%, var(--c-surface)), var(--c-surface) 75%); }
[data-theme="dem"] .th-scene { background: linear-gradient(to bottom, #2c2158, var(--c-surface) 80%); }
.th-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.th-scene .th-msg { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); z-index: 2; padding: .3em .9em; border-radius: 999px; background: var(--c-surface); box-shadow: var(--shadow-card); font-weight: 900; font-size: clamp(.85rem, .7rem + .7vw, 1.6rem); white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.th-scene .th-msg.show { opacity: 1; }
.th-scene .th-msg.ok { color: var(--c-ok); } .th-scene .th-msg.bad { color: var(--c-bad); }
.th-hint { grid-area: hint; display: flex; align-items: center; gap: clamp(10px, 1.4vw, 26px); background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: clamp(10px, 1.8vh, 26px) clamp(14px, 2vw, 36px); min-width: 0; }
.th-hint img { max-height: min(15vh, 170px); max-width: 30%; border-radius: var(--r); object-fit: contain; flex: none; }
.th-hint h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(1.05rem, .8rem + 1.5vw, 2.8rem); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.th-hint small { display: block; font-size: .5em; color: var(--c-muted); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.th-count { flex: none; display: grid; place-items: center; min-width: 3.2em; height: 3.2em; padding: 0 .5em; border-radius: 999px; background: var(--c-primary-soft); font-weight: 900; font-size: clamp(.8rem, .7rem + .4vw, 1.3rem); font-variant-numeric: tabular-nums; }
.th-audio { flex: none; width: clamp(44px, 5.6vh, 68px); min-height: clamp(44px, 5.6vh, 68px); padding: 0; border-radius: 50%; }
.th-audio .icon { width: 1.5em; height: 1.5em; }
.th-word { grid-area: word; container-type: inline-size; display: grid; gap: clamp(6px, 1vh, 14px); justify-items: center; align-content: center; }
.th-letters { --ts: clamp(22px, calc(100cqi / (var(--n, 8) + 1) - 4px), 82px); display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(var(--ts) * .6); row-gap: calc(var(--ts) * .25); max-width: 100%; }
.th-w { display: flex; gap: calc(var(--ts) * .12); }
.th-l { width: var(--ts); height: calc(var(--ts) * 1.2); display: grid; place-items: center; font-weight: 900; font-size: calc(var(--ts) * .7); line-height: 1; text-transform: uppercase; border-bottom: max(3px, calc(var(--ts) * .08)) solid color-mix(in srgb, var(--c-ink) 35%, transparent); color: var(--c-ink); }
.th-l.p { border-bottom-color: transparent; color: var(--c-muted); }
.th-l.on { animation: th-in .35s var(--ease-out); border-bottom-color: var(--c-primary); }
.th-l.miss { color: var(--c-warn); border-bottom-color: var(--c-warn); }
.th.win .th-l { color: var(--c-ok); border-bottom-color: var(--c-ok); animation: th-hop .5s var(--ease-out) both; }
.th.win .th-l:nth-child(2n) { animation-delay: .07s; }
@keyframes th-in { from { transform: translateY(-40%) scale(.4); opacity: 0; } }
@keyframes th-hop { 40% { transform: translateY(-30%); } }
.th-status { min-height: 1.4em; font-weight: 800; color: var(--c-muted); font-size: clamp(.9rem, .75rem + .45vw, 1.35rem); text-align: center; }
.th-status b { color: var(--c-bad); letter-spacing: .12em; }
.th-keys { grid-area: keys; display: grid; align-content: start; gap: clamp(8px, 1.4vh, 18px); min-height: 0; }
.th-kb { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(36px, 4.6vw, 86px), 1fr)); gap: clamp(5px, .6vw, 12px); }
.th-k { min-height: clamp(44px, 6.4vh, 84px); border: 0; border-radius: clamp(10px, 1vw, 18px); background: var(--c-surface); color: var(--c-ink); font: inherit; font-weight: 900; font-size: clamp(1.05rem, .8rem + .9vw, 2.1rem); text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--c-ink) 18%, transparent); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .1s, background .15s; padding: 0; }
.th-k:hover:not(:disabled) { transform: translateY(-2px); background: var(--c-primary-soft); }
.th-k:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c-ink) 18%, transparent); }
.th-k:focus-visible { outline: 4px solid var(--c-primary); outline-offset: 2px; }
.th-k.ok { background: var(--c-ok); color: #fff; box-shadow: none; }
.th-k.bad { background: var(--c-surface-2); color: var(--c-muted); box-shadow: none; text-decoration: line-through; opacity: .6; }
.th-k:disabled { cursor: default; }
.th-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
/* cảnh */
.th-bal { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s var(--ease-out), opacity .3s; }
.th-bal.pop { animation: th-pop .35s ease-out forwards; }
@keyframes th-pop { 50% { transform: scale(1.35); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.th-bird { transition: transform .7s cubic-bezier(.3,1.4,.5,1); }
.th-bird .wing { transform-box: fill-box; transform-origin: 20% 30%; animation: th-flap 1.4s ease-in-out infinite; }
.th-bird .wing.r { transform-origin: 80% 30%; }
@keyframes th-flap { 50% { transform: rotate(-14deg); } }
.th-bird.worry .body { animation: th-wobble .45s; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes th-wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.th-bird .eye-o { display: none; } .th-bird.worry .eye-o, .th-bird.fell .eye-o { display: inline; } .th-bird.worry .eye-n, .th-bird.fell .eye-n { display: none; }
.th-bird .cheek { opacity: .55; }
.th-bird.fly { transition: transform 1.2s cubic-bezier(.5,0,.6,1); }
.th-bird.fly .wing { animation-duration: .18s; }
.th-bird.fell { transition: transform .9s cubic-bezier(.5,0,.9,.6); }
.th-bird.fell .wing { animation: none; }
.th-stars { opacity: 0; transition: opacity .3s .8s; } .th-bird.fell + .th-stars { opacity: 1; }
.th-spark { opacity: 0; } .th.win .th-spark { animation: th-spark .9s ease-out; }
@keyframes th-spark { 30% { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }
.th-cloud { animation: th-drift 40s linear infinite alternate; }
@keyframes th-drift { to { transform: translateX(30px); } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .th { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "scene hint" "word word" "keys keys"; gap: 8px; }
  .th-scene { min-height: clamp(150px, 24vh, 300px); border-radius: var(--r-lg); }
  .th-hint { flex-direction: column; align-items: stretch; text-align: center; padding: 10px; border-radius: var(--r-lg); gap: 6px; }
  .th-hint img { max-width: 100%; max-height: 12vh; align-self: center; }
  .th-hint h2 { font-size: clamp(.95rem, 4.2vw, 1.5rem); }
  .th-hint .th-row { display: flex; justify-content: center; gap: 6px; }
  .th-kb { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
  .th-k { min-height: 44px; font-size: 1.1rem; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .th-bird .wing, .th-cloud { animation: none; } }

/* ===== anagram ===== */
.ta { display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(10px, 2.2vh, 32px); width: 100%; max-width: 1760px; margin: 0 auto; min-height: 100%; align-content: start; }
.ta-head { display: flex; justify-content: center; font-weight: 800; color: var(--c-muted); font-size: clamp(.95rem, .8rem + .5vw, 1.5rem); }
.ta-area { display: grid; align-content: center; justify-items: center; gap: clamp(14px, 3vh, 44px); --ts: clamp(38px, min(9vw, 14vh, calc(82vw / (var(--n, 8) + 1))), 120px); }
.ta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--ts) * .14); max-width: 100%; }
.ta-word { display: flex; flex-wrap: wrap; gap: calc(var(--ts) * .1); }
.ta-gap { width: calc(var(--ts) * .45); }
.ta-slot, .ta-tile { width: var(--ts); height: calc(var(--ts) * 1.18); border-radius: calc(var(--ts) * .2); font-family: inherit; font-weight: 900; font-size: calc(var(--ts) * .6); line-height: 1; display: grid; place-items: center; padding: 0; text-transform: uppercase; }
.ta-slot { border: 3px dashed color-mix(in srgb, var(--c-primary) 45%, var(--c-line)); background: color-mix(in srgb, var(--c-surface) 60%, transparent); cursor: pointer; transition: background .15s, border-color .15s; }
.ta-slot.hover, .ta-slot:focus-visible { background: var(--c-primary-soft); border-color: var(--c-primary); }
.ta-slot.filled { border-style: solid; border-color: transparent; background: transparent; }
.ta-tile { border: 0; cursor: grab; color: #fff; background: var(--c-accent); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-accent) 60%, #000); touch-action: none; user-select: none; transition: transform .12s; }
.ta-tile:hover { transform: translateY(-3px); }
.ta-tile.in { background: var(--c-primary); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-primary) 60%, #000); }
.ta-tile.lifting { opacity: .3; }
.ta-tile.ghost { position: fixed; z-index: 70; pointer-events: none; transform: rotate(-4deg) scale(1.08); box-shadow: 0 16px 30px rgba(0,0,0,.3); }
.ta-area.ok .ta-tile { background: var(--c-ok); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-ok) 60%, #000); animation: ta-hop .5s var(--ease-out) both; }
.ta-area.bad .ta-tile { background: var(--c-bad); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-bad) 60%, #000); }
.ta-area.bad .ta-slots { animation: shake .4s; }
.ta-area.reveal .ta-tile { background: var(--c-warn); box-shadow: 0 5px 0 color-mix(in srgb, var(--c-warn) 60%, #000); }
.ta-area.ok .ta-tile:nth-child(2n) { animation-delay: .06s; }
@keyframes ta-hop { 40% { transform: translateY(-14px); } }
.ta-bank { min-height: calc(var(--ts) * 1.4); padding: calc(var(--ts) * .2); border-radius: var(--r-lg); background: color-mix(in srgb, var(--c-surface) 60%, transparent); border: 2px solid var(--c-line); width: min(100%, 1500px); box-sizing: border-box; justify-content: center; }
.ta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding-top: .3rem; }
.ta-tries { font-weight: 800; color: var(--c-muted); font-size: clamp(.9rem, .75rem + .4vw, 1.3rem); min-height: 1.5em; text-align: center; }
.ta-tries.bad { color: var(--c-bad); }
.ta-typer { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; }
.ta-q h2 { font-size: clamp(1.1rem, .8rem + 1.6vw, 2.8rem); }
.ta-q { padding-block: clamp(12px, 2.2vh, 36px); }
@media (prefers-reduced-motion: reduce) { .ta-area .ta-tile { animation: none !important; } }

/* ===== fx-C chung: hạt, chữ bay, cảnh nền, linh vật Cú, màn thưởng ===== */
#fxc-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.fxc-p { position: absolute; width: calc(12px * var(--s)); height: calc(8px * var(--s)); margin: -4px 0 0 -6px; background: var(--c); border-radius: 2px; animation: fxc-burst .9s cubic-bezier(.15,.7,.3,1) forwards; }
.fxc-p.fxc-stars { background: none; width: auto; height: auto; color: var(--c); font-size: calc(22px * var(--s)); text-shadow: 0 0 8px rgba(255,210,80,.8); }
.fxc-p.fxc-smoke { width: calc(20px * var(--s)); height: calc(20px * var(--s)); border-radius: 50%; background: rgba(200,200,215,.3); filter: blur(4px); }
@keyframes fxc-burst { 0% { transform: translate(0,0) rotate(0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)) scale(1); opacity: 0; } }
.fxc-float { position: absolute; transform: translate(-50%,-50%); font: 900 clamp(1.4rem, 1rem + 1.6vw, 2.6rem)/1 var(--font, inherit); color: #fff; -webkit-text-stroke: 2px #1f9d55; paint-order: stroke; text-shadow: 0 4px 0 #157a40, 0 8px 18px rgba(0,0,0,.3); animation: fxc-float 1.15s ease-out forwards; white-space: nowrap; }
.fxc-float.combo { -webkit-text-stroke-color: #c2410c; text-shadow: 0 4px 0 #9a3412, 0 0 20px #ffb020; }
@keyframes fxc-float { 0% { transform: translate(-50%,-30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%,-70%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%,-190%) scale(1); opacity: 0; } }
.fxc-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fxc-rain i { position: absolute; top: -24px; width: 11px; height: 16px; border-radius: 3px; background: var(--c); animation: fxc-fall linear forwards; }
@keyframes fxc-fall { to { transform: translateY(110vh) rotate(var(--r)); } }

/* bảng chơi có cảnh nền */
.fxc-board { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl, 24px); width: 100%; max-width: 1800px; margin: 0 auto; min-height: 100%; box-shadow: inset 0 0 80px rgba(0,0,0,.25), var(--shadow-card); }
.fxc-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fxc-space { background: radial-gradient(60% 50% at 80% 10%, rgba(168,85,247,.45), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(59,130,246,.45), transparent 70%), linear-gradient(160deg, #1a1446 0%, #0d0b2b 60%, #170a35 100%); }
.fxc-space .st { position: absolute; width: calc(3px * var(--z)); height: calc(3px * var(--z)); border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: fxc-tw 2.6s ease-in-out infinite; }
@keyframes fxc-tw { 50% { opacity: .2; transform: scale(.5); } }
.fxc-space .pl { position: absolute; border-radius: 50%; }
.fxc-space .p1 { width: clamp(70px, 9vw, 150px); aspect-ratio: 1; right: 4%; top: 8%; background: radial-gradient(circle at 35% 30%, #ffd08a, #ff7a59 55%, #a23b6b); box-shadow: 0 0 40px rgba(255,140,90,.45); animation: fxc-bob 9s ease-in-out infinite; }
.fxc-space .p1::after { content: ""; position: absolute; inset: 42% -28%; border-radius: 50%; border: 4px solid rgba(255,220,170,.7); transform: rotate(-18deg); }
.fxc-space .p2 { width: clamp(30px, 4vw, 64px); aspect-ratio: 1; left: 3%; bottom: 12%; background: radial-gradient(circle at 35% 30%, #a5f3fc, #3b82f6 60%, #1e3a8a); animation: fxc-bob 7s ease-in-out infinite reverse; }
.fxc-space .sh { position: absolute; top: 12%; left: -10%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(-20deg); animation: fxc-shoot 6s ease-in 2s infinite; opacity: 0; }
@keyframes fxc-shoot { 0% { opacity: 0; transform: translate(0,0) rotate(-20deg); } 5% { opacity: 1; } 18%, 100% { opacity: 0; transform: translate(70vw, 26vh) rotate(-20deg); } }
@keyframes fxc-bob { 50% { transform: translateY(-12px); } }
.fxc-sky, .fxc-meadow { background: linear-gradient(180deg, #7cc8ff 0%, #bfe6ff 55%, #e8f7ff 100%); }
.fxc-sky .cl, .fxc-meadow .cl { position: absolute; left: -25%; width: calc(160px * var(--z)); height: calc(46px * var(--z)); background: #fff; border-radius: 50px; opacity: .9; animation: fxc-cloud linear infinite; }
.fxc-sky .cl::before, .fxc-meadow .cl::before { content: ""; position: absolute; left: 22%; top: -55%; width: 46%; height: 120%; background: #fff; border-radius: 50%; }
@keyframes fxc-cloud { to { transform: translateX(150vw); } }
.fxc-meadow .hill { position: absolute; border-radius: 50%; bottom: -30%; }
.fxc-meadow .h1 { left: -10%; width: 70%; height: 55%; background: #7bd389; }
.fxc-meadow .h2 { right: -15%; width: 75%; height: 48%; background: #5cc275; }
.fxc-meadow .sun { position: absolute; right: 7%; top: 7%; width: clamp(50px, 6vw, 90px); aspect-ratio: 1; border-radius: 50%; background: #ffd34d; box-shadow: 0 0 0 12px rgba(255,211,77,.3), 0 0 50px #ffd34d; animation: fxc-bob 6s ease-in-out infinite; }
.fxc-stage { background: radial-gradient(70% 40% at 50% 110%, #a3123a 0, transparent 70%), linear-gradient(180deg, #3a0b2a 0%, #1d0620 70%, #12030f 100%); }
.fxc-stage::before, .fxc-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; background: repeating-linear-gradient(90deg, #8f1238 0 14px, #6e0c2a 14px 28px); box-shadow: 0 0 30px rgba(0,0,0,.6); }
.fxc-stage::before { left: 0; border-radius: 0 0 60% 0; } .fxc-stage::after { right: 0; border-radius: 0 0 0 60%; }
.fxc-stage .bulb { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 10px #ffd34d, 0 0 20px #ffb020; animation: fxc-bulb 0.9s steps(1) infinite; }
@keyframes fxc-bulb { 50% { background: #7a5a20; box-shadow: none; } }
.fxc-stage .sp { position: absolute; top: -10%; width: 40%; height: 120%; background: linear-gradient(180deg, rgba(255,240,200,.18), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: fxc-sweep 6s ease-in-out infinite alternate; transform-origin: 50% 0; }
.fxc-stage .s1 { left: 5%; } .fxc-stage .s2 { right: 5%; animation-delay: -3s; }
@keyframes fxc-sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.fxc-table { background: radial-gradient(70% 60% at 50% 40%, #1f7a55 0%, #135b3e 60%, #0b3b28 100%); }
.fxc-table::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); }
.fxc-table::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,230,160,.25); border-radius: 18px; }
.fxc-table .lamp { position: absolute; left: 50%; top: -30%; width: 80%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,240,190,.22), transparent); }
.fxc-chalk { background: radial-gradient(80% 60% at 50% 30%, #3b4a44 0%, #26302c 70%, #1b221f 100%); }
.fxc-chalk::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(#8b5a2b, #5e3a17); }

/* linh vật Cú */
.fxc-owl { position: absolute; z-index: 3; right: clamp(8px, 1.4vw, 24px); bottom: clamp(6px, 1vh, 16px); width: clamp(70px, 8vw, 128px); pointer-events: none; }
.fxc-owlart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fxc-owl .ow-sh { fill: rgba(0,0,0,.25); }
.fxc-owl .ow-b { transform-origin: 60px 120px; transform-box: view-box; }
.fxc-owl .ow-wl { transform-origin: 26px 64px; transform-box: view-box; } .fxc-owl .ow-wr { transform-origin: 94px 64px; transform-box: view-box; }
.fxc-owl .ow-hap, .fxc-owl .ow-tear, .fxc-owl .ow-ck { opacity: 0; transition: opacity .2s; }
.fxc-owl .ow-lid { transform: scaleY(0); transform-origin: 60px 36px; transform-box: view-box; }
.fxc-owl.idle .ow-b { animation: fxc-breath 3s ease-in-out infinite; }
.fxc-owl.idle .ow-lid { animation: fxc-blink 4.2s infinite; }
@keyframes fxc-breath { 50% { transform: scale(1.02, .98); } }
@keyframes fxc-blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
.fxc-owl.happy .ow-b { animation: fxc-jump .5s ease-out 2; }
.fxc-owl.happy .ow-wl { animation: fxc-flapl .25s ease-in-out 6 alternate; } .fxc-owl.happy .ow-wr { animation: fxc-flapr .25s ease-in-out 6 alternate; }
.fxc-owl.happy .ow-pu { opacity: 0; } .fxc-owl.happy .ow-hap, .fxc-owl.happy .ow-ck, .fxc-owl.wow .ow-ck { opacity: 1; }
@keyframes fxc-jump { 40% { transform: translateY(-18%) scale(.95, 1.06); } 80% { transform: translateY(0) scale(1.06, .94); } }
@keyframes fxc-flapl { to { transform: rotate(40deg); } } @keyframes fxc-flapr { to { transform: rotate(-40deg); } }
.fxc-owl.sad .ow-b { transform: rotate(-4deg) translateY(4%); transition: transform .3s; }
.fxc-owl.sad .ow-pu { transform: translateY(4px); } .fxc-owl.sad .ow-tear { opacity: 1; animation: fxc-tear 1s ease-in infinite; }
.fxc-owl.sad .ow-lid { transform: scaleY(.45); }
@keyframes fxc-tear { from { transform: translateY(0); } to { transform: translateY(14px); opacity: 0; } }
.fxc-owl.think .ow-b { transform: rotate(6deg); transition: transform .3s; } .fxc-owl.think .ow-pu { transform: translate(3px, -4px); transition: transform .3s; }
.fxc-owl.wow .ow-b { animation: fxc-jump .45s ease-out; } .fxc-owl.wow .ow-eyes { transform: scale(1.12); transform-origin: 60px 52px; transform-box: view-box; }
.fxc-say { position: absolute; bottom: 100%; right: 30%; margin-bottom: 4px; background: #fff; color: #1d1640; font-weight: 800; font-size: clamp(.78rem, .6rem + .45vw, 1.05rem); padding: .4em .8em; border-radius: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; transform: translateY(6px) scale(.8); transition: .2s cubic-bezier(.3,1.6,.5,1); transform-origin: 80% 100%; }
.fxc-say::after { content: ""; position: absolute; right: 18px; top: 100%; border: 7px solid transparent; border-top-color: #fff; }
.fxc-say.on { opacity: 1; transform: none; }

/* màn thưởng cuối bài */
.fxc-fin { z-index: 20; background: rgba(12,8,40,.72); backdrop-filter: blur(5px); animation: fxc-in .25s ease-out; overflow: hidden; }
@keyframes fxc-in { from { opacity: 0; } }
.fxc-fincard { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(4px, 1vh, 12px); text-align: center; color: #fff; padding: clamp(16px, 3vh, 36px) clamp(24px, 4vw, 64px); animation: fxc-zoom .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes fxc-zoom { from { transform: scale(.3); opacity: 0; } }
.fxc-rays { position: absolute; z-index: -1; left: 50%; top: 32%; width: clamp(320px, 50vw, 620px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,214,90,.28) 0 10deg, transparent 10deg 20deg); mask: radial-gradient(closest-side, #000 30%, transparent); animation: fxc-spin 14s linear infinite; }
@keyframes fxc-spin { to { rotate: 360deg; } }
.fxc-cup { width: clamp(110px, 20vh, 190px); filter: drop-shadow(0 10px 20px rgba(0,0,0,.4)); animation: fxc-bob 2.4s ease-in-out infinite; }
.fxc-cup svg { width: 100%; height: auto; display: block; }
.fxc-stars { display: flex; gap: clamp(6px, 1vw, 14px); align-items: end; }
.fxc-star { font-size: clamp(2.4rem, 7vh, 4.2rem); line-height: 1; color: rgba(255,255,255,.18); -webkit-text-stroke: 2px rgba(255,255,255,.35); transform: scale(.8); }
.fxc-star:nth-child(2) { font-size: clamp(3rem, 9vh, 5.4rem); }
.fxc-star.pop { color: #ffd34d; -webkit-text-stroke-color: #c98a00; text-shadow: 0 0 22px rgba(255,211,77,.9); animation: fxc-starpop .5s cubic-bezier(.3,1.8,.5,1) forwards; }
@keyframes fxc-starpop { 0% { transform: scale(2.2) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.fxc-fincard h2 { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); font-weight: 900; text-shadow: 0 4px 0 rgba(0,0,0,.3); margin: 0; }
.fxc-num { font-size: clamp(1.8rem, 1rem + 3vw, 3.8rem); font-weight: 900; color: #ffd34d; font-variant-numeric: tabular-nums; line-height: 1; }
.fxc-fincard p { margin: 0; opacity: .85; font-weight: 700; }
.fxc-go { margin-top: 6px; }
.fxc-owl.fin { right: auto; left: calc(50% + clamp(130px, 18vw, 260px)); bottom: 18%; width: clamp(80px, 10vw, 140px); }
@media (max-width: 700px) { .fxc-owl.fin { left: auto; right: 6px; bottom: 6px; width: 76px; } }
@media (prefers-reduced-motion: reduce) { .fxc-scene *, .fxc-owl *, .fxc-rays, .fxc-cup { animation: none !important; } }

/* ===== quiz (Phi thuyền vũ trụ) ===== */
.qz { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 1.6vh, 22px); padding: clamp(10px, 1.8vh, 26px) clamp(12px, 2vw, 36px) clamp(12px, 2vh, 28px); color: #fff; }
.qz-hud { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qz-count { flex: none; background: linear-gradient(180deg, #ffd34d, #ffb020); color: #4a2a00; padding: .3em .9em; border-radius: 99px; font-weight: 900; font-size: clamp(.85rem, .7rem + .4vw, 1.15rem); box-shadow: 0 3px 0 #b77a00; }
.qz-dots { flex: 1; display: flex; gap: 5px; min-width: 0; overflow: hidden; justify-content: center; }
.qz-dot { flex: 0 1 26px; min-width: 6px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); transition: .3s; }
.qz-dot.cur { background: #fff; box-shadow: 0 0 10px #fff; }
.qz-dot.ok { background: #34d399; } .qz-dot.bad { background: #f87171; }
.qz-combo { flex: none; min-width: 4.2em; text-align: center; font-weight: 900; color: #ffb020; font-size: clamp(.9rem, .7rem + .5vw, 1.3rem); opacity: 0; transform: scale(.6); transition: .25s cubic-bezier(.3,1.6,.5,1); }
.qz-combo.on { opacity: 1; transform: none; text-shadow: 0 0 14px rgba(255,140,0,.8); }
.qz-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(10px, 2vh, 26px); min-height: 0; padding-right: clamp(0px, 7vw, 120px); }
.qz-q { display: grid; place-items: center; align-content: center; gap: clamp(8px, 1.6vh, 20px); text-align: center; padding: clamp(14px, 2.6vh, 40px) clamp(16px, 3vw, 56px); border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 2px solid rgba(255,255,255,.22); box-shadow: 0 0 0 6px rgba(124,92,255,.18), 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter: blur(6px); animation: qz-in .55s cubic-bezier(.2,1.3,.4,1); min-height: 0; }
@keyframes qz-in { from { transform: perspective(900px) rotateX(-35deg) translateY(-30px) scale(.9); opacity: 0; } }
.qz-q h2 { margin: 0; font-size: clamp(1.35rem, .9rem + 2.2vw, 3.6rem); font-weight: 900; line-height: 1.2; text-shadow: 0 3px 0 rgba(0,0,0,.35); overflow-wrap: anywhere; }
.qz-q img { max-height: min(30vh, 360px); max-width: 100%; width: auto; border-radius: 16px; background: #fff; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.4); object-fit: contain; }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 24px); }
.qz-opt { --c: #e5484d; --d: #9c1f2c; position: relative; display: flex; align-items: center; gap: clamp(10px, 1.1vw, 20px); min-height: clamp(62px, 11vh, 140px); padding: 0 clamp(14px, 1.6vw, 30px); border: 0; border-radius: 20px; color: #fff; font: inherit; font-weight: 900; font-size: clamp(1.05rem, .7rem + 1.3vw, 2.4rem); text-align: left; cursor: pointer; touch-action: manipulation;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0, var(--c) 45%, color-mix(in srgb, var(--c) 85%, #000) 100%); box-shadow: 0 7px 0 var(--d), 0 12px 24px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35);
  animation: qz-pop .45s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: calc(.12s + var(--i) * .08s); transition: transform .12s, filter .2s, opacity .25s; }
.qz-opt:nth-child(2) { --c: #2f7cf6; --d: #1747a6; } .qz-opt:nth-child(3) { --c: #f5a524; --d: #a8650a; } .qz-opt:nth-child(4) { --c: #1fa463; --d: #0e6a3c; }
@keyframes qz-pop { from { transform: scale(.4) translateY(30px); opacity: 0; } }
.qz-opt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; pointer-events: none; }
.qz-opt:hover:not([disabled]) { transform: translateY(-4px); filter: brightness(1.07); }
.qz-opt:hover:not([disabled])::after { background-position: -40% 0; transition: background-position .6s; }
.qz-opt:active:not([disabled]) { transform: translateY(5px); box-shadow: 0 2px 0 var(--d), 0 4px 10px rgba(0,0,0,.3); }
.qz-opt:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.qz-opt .shape { flex: none; width: clamp(36px, 3.2vw, 60px); aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.25); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.qz-opt .shape svg { width: 60%; height: 60%; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.qz-opt .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.qz-opt .key { flex: none; font-size: .45em; background: rgba(0,0,0,.2); border-radius: 8px; padding: .15em .5em; opacity: .9; }
.qz-opt.dim { opacity: .3; filter: grayscale(.6); transform: scale(.97); }
.qz-opt.ok { --c: #22c55e; --d: #15803d; animation: qz-win .6s ease-out; box-shadow: 0 7px 0 var(--d), 0 0 0 5px #fff, 0 0 40px 8px rgba(52,211,153,.75); z-index: 1; }
.qz-opt.bad { --c: #ef4444; --d: #991b1b; animation: qz-shake .45s; }
@keyframes qz-win { 30% { transform: scale(1.06); } }
@keyframes qz-shake { 20%, 60% { transform: translateX(-10px) rotate(-1deg); } 40%, 80% { transform: translateX(10px) rotate(1deg); } }
.qz-opt .mark { position: absolute; right: -8px; top: -12px; width: clamp(34px, 3vw, 48px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #16a34a; box-shadow: 0 4px 12px rgba(0,0,0,.3); font-size: clamp(1.1rem, 1.6vw, 1.6rem); animation: qz-pop .4s cubic-bezier(.3,1.8,.5,1); }
.qz-opt.bad .mark { color: #dc2626; }
.qz .fxc-owl { width: clamp(70px, 7.5vw, 120px); }
@media (max-width: 760px) {
  .qz-opts { grid-template-columns: 1fr; } .qz-opt { min-height: 54px; border-radius: 16px; } .qz-opt .key { display: none; }
  .qz-body { padding-right: 0; } .qz-hud { padding-right: 58px; }
  .qz .fxc-owl { top: 4px; bottom: auto; right: 6px; width: 54px; } .qz .fxc-say { right: 100%; bottom: 10%; margin: 0 6px 0 0; }
  .qz .fxc-say::after { right: auto; left: 100%; top: 50%; border-top-color: transparent; border-left-color: #fff; transform: translateY(-50%); }
}
body[data-view="play"][data-playmode="window"] .qz-q img { max-height: min(24vh, 280px); }
body[data-view="play"][data-playmode="window"] .qz-opt { min-height: clamp(50px, 9vh, 104px); }

/* ===== truefalse v2 (Đồi nắng: bảng gỗ, dấu mộc ĐÚNG/SAI, Cú trọng tài) ===== */
.tt-board { padding: clamp(10px, 1.8vh, 26px) clamp(12px, 2vw, 36px) clamp(12px, 2vh, 28px); display: grid; }
.tt-board .tt { position: relative; z-index: 1; }
.tt-board .tt-head { color: #1b4d2b; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.tt-board .tt-head > :first-child { background: rgba(255,255,255,.85); border-radius: 999px; padding: .2em .9em; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.tt-board .tt-combo { background: linear-gradient(180deg, #ff9a3c, #f05a28); box-shadow: 0 3px 0 #b8401a; }
.tt-board .tt-bar { background: rgba(255,255,255,.6); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.tt-board .tt-bar i { background: linear-gradient(90deg, #22c55e, #facc15); }
.tt-board .tt-card { position: relative; overflow: hidden; background: linear-gradient(180deg, #fffdf5, #fff6dd); border: 6px solid #c98a4b; box-shadow: 0 0 0 4px #8a5a2b, 0 14px 0 #6b4220, 0 22px 40px rgba(0,0,0,.25); animation: tt-flip .55s cubic-bezier(.2,1.3,.4,1); color: #3b2a14; }
.tt-board .tt-card::before, .tt-board .tt-card::after { content: ""; position: absolute; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4, #8a5a2b 60%); }
.tt-board .tt-card::before { left: 10px; } .tt-board .tt-card::after { right: 10px; }
@keyframes tt-flip { 0% { transform: perspective(900px) rotateX(-80deg) translateY(-30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tt-board .tt-ans { background: #fff; border-color: #f59e0b; color: #b45309; box-shadow: 0 4px 0 #fde68a; }
.tt-board .tt-card.ok { box-shadow: 0 0 0 4px #8a5a2b, 0 0 0 12px #22c55e, 0 14px 0 #6b4220, 0 0 50px #22c55e; }
.tt-board .tt-card.bad { box-shadow: 0 0 0 4px #8a5a2b, 0 0 0 12px #ef4444, 0 14px 0 #6b4220; }
.tt-stamp { position: absolute; right: 6%; top: 14%; padding: .1em .45em; border: 6px solid currentColor; border-radius: 12px; font-weight: 900; font-size: clamp(1.4rem, 1rem + 2.4vw, 3.6rem); letter-spacing: .06em; transform: rotate(-14deg); opacity: .85; animation: tt-stamp .4s cubic-bezier(.3,1.6,.5,1) both; pointer-events: none; mix-blend-mode: multiply; }
.tt-stamp.t { color: #16a34a; } .tt-stamp.f { color: #dc2626; }
@keyframes tt-stamp { 0% { transform: rotate(-14deg) scale(3); opacity: 0; } 100% { transform: rotate(-14deg) scale(1); opacity: .85; } }
.tt-board .tt-verdict.ok { color: #15803d; } .tt-board .tt-verdict.bad { color: #b91c1c; }
.tt-board .tt-btn { position: relative; border-radius: 22px; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.tt-board .tt-btn.yes { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 8px 0 #0f6b31, 0 14px 22px rgba(0,0,0,.25); }
.tt-board .tt-btn.no { background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 8px 0 #8f1230, 0 14px 22px rgba(0,0,0,.25); }
.tt-board .tt-btn .ic { display: inline-block; font-size: .9em; animation: fxc-bob 2.4s ease-in-out infinite; }
.tt-board .tt-btn.no .ic { animation-delay: -1.2s; }
.tt-board .tt-btn.picked { opacity: 1 !important; transform: scale(1.04); outline: 5px solid #fff; outline-offset: 3px; }
.tt-board .tt-btn kbd { color: #fff; background: rgba(0,0,0,.2); border: 0; border-radius: 6px; padding: .1em .4em; }
.tt-board .tt-card { min-height: 0; margin: 0 clamp(4px, 1vw, 16px) 20px; gap: clamp(6px, 1.4vh, 20px); }
.tt-board .tt-stamp { top: auto; bottom: 10%; right: 4%; }
.tt-board .fxc-owl { top: 4px; bottom: auto; right: clamp(8px, 1.2vw, 20px); width: clamp(64px, 6vw, 96px); z-index: 2; }
.tt-board .fxc-say { right: 100%; bottom: 20%; margin: 0 6px 0 0; }
.tt-board .fxc-say::after { right: auto; left: 100%; top: 50%; border-top-color: transparent; border-left-color: #fff; transform: translateY(-50%); }
@media (max-width: 760px) {
  .tt-board .fxc-owl { top: 4px; bottom: auto; right: 6px; width: 54px; } .tt-board .fxc-say { right: 100%; bottom: 10%; margin: 0 6px 0 0; }
  .tt-board .fxc-say::after { right: auto; left: 100%; top: 50%; border-top-color: transparent; border-left-color: #fff; transform: translateY(-50%); }
  .tt-board .tt-head { padding-right: 60px; }
}

/* ===== openbox v2 (Kho quà sân khấu: hộp quà nơ, nắp bay, sao bung) ===== */
.to-board { padding: clamp(12px, 2vh, 28px) clamp(14px, 10%, 120px) clamp(14px, 2.4vh, 30px); display: grid; }
.to-board > .to, .to-board > .to-card { position: relative; z-index: 1; }
.to-board .to-head { color: #ffe9b0; text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 18px rgba(255,200,80,.5); letter-spacing: .02em; }
.to-board .to-grid { padding-bottom: 6px; }
.to-board .to-box { animation: to-wiggle 3.2s ease-in-out var(--d) infinite; }
@keyframes to-wiggle { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-5deg) translateY(-3px); } 93% { transform: rotate(4deg) translateY(-3px); } 96% { transform: rotate(-2deg); } }
.to-board .to-box .shadow { position: absolute; left: 10%; right: 10%; bottom: -6%; height: 12%; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.5), transparent 70%); }
.to-board .to-box .body { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000)); box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.35); }
.to-board .to-box .body::before, .to-board .to-box .lid::before { background: linear-gradient(90deg, #fde68a, #f59e0b 50%, #fde68a); opacity: .95; }
.to-board .to-box .lid { z-index: 2; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.to-board .to-box .bow { position: absolute; left: 50%; top: -38%; width: 54%; height: 60%; transform: translateX(-50%); pointer-events: none; }
.to-board .to-box .bow::before, .to-board .to-box .bow::after { content: ""; position: absolute; top: 10%; width: 48%; height: 80%; border: clamp(4px, .6vw, 8px) solid #f59e0b; background: #fde68a55; border-radius: 50% 50% 10% 50%; }
.to-board .to-box .bow::before { left: 0; transform: rotate(-30deg); } .to-board .to-box .bow::after { right: 0; transform: scaleX(-1) rotate(-30deg); }
.to-board .to-box .num { text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.25); }
.to-board .to-box:hover:not([disabled]) { animation: none; transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 14px rgba(255,220,120,.7)); }
.to-board .to-box.opening { animation: to-shake .32s ease-in-out 1, to-pop .45s .32s var(--ease-out) forwards; }
.to-board .to-box.opening .lid { animation: to-lidfly .45s .3s cubic-bezier(.3,.9,.4,1) forwards; transform: none; }
.to-board .to-box.opening .body::after { animation: to-glow .5s .32s ease-out forwards; opacity: 0; background: radial-gradient(circle at 50% 0, #fff, #ffe58a88 40%, transparent 75%); }
@keyframes to-shake { 25% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-5deg); } }
@keyframes to-lidfly { to { transform: translateY(-160%) rotate(-28deg); opacity: 0; } }
@keyframes to-glow { to { opacity: 1; } }
.to-board .to-box.done { animation: none; filter: saturate(.8); }
.to-board .to-box.done .bow { display: none; }
.to-board .to-box.done .lid { transform: translateY(-30%) rotate(-12deg); opacity: .55; }
.to-board .to-card { align-content: start; }
.to-board .to-card .tq-q { background: linear-gradient(180deg, #fffdf7, #fff4dc); border: 5px solid var(--c, #f59e0b); box-shadow: 0 10px 0 color-mix(in srgb, var(--c, #f59e0b) 60%, #000), 0 20px 40px rgba(0,0,0,.4); animation: to-reveal .5s cubic-bezier(.2,1.4,.4,1); color: #2a1a10; }
@keyframes to-reveal { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.to-board .to-badge { background: linear-gradient(180deg, #ffd34d, #f59e0b); color: #4a2500; box-shadow: 0 4px 0 #b45309, 0 0 24px rgba(255,200,80,.6); display: inline-flex; gap: .4em; align-items: center; }
.to-board .to-badge .gift { display: inline-block; animation: fxc-bob 1.6s ease-in-out infinite; }
.to-board .tq-opt { animation: to-optin .45s cubic-bezier(.2,1.3,.4,1) both; }
.to-board .tq-opt:nth-child(2) { animation-delay: .06s; } .to-board .tq-opt:nth-child(3) { animation-delay: .12s; } .to-board .tq-opt:nth-child(4) { animation-delay: .18s; }
@keyframes to-optin { 0% { transform: translateY(30px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.to-board .fxc-owl { width: clamp(64px, 7vw, 110px); z-index: 2; }
@media (max-width: 760px) {
  .to-board { padding: 10px 12px 14px; }
  .to-board .fxc-owl { top: 4px; bottom: auto; right: 6px; width: 50px; } .to-board .fxc-say { right: 100%; bottom: 10%; margin: 0 6px 0 0; }
  .to-board .fxc-say::after { right: auto; left: 100%; top: 50%; border-top-color: transparent; border-left-color: #fff; transform: translateY(-50%); }
  .to-board .to-head { padding-right: 56px; font-size: .9rem; }
  .to-board .to-grid { grid-template-columns: repeat(var(--cols-m, 3), minmax(0, 1fr)); gap: 14px 12px; padding-top: 14px; }
  .to-board .fxc-say { right: 0; top: 100%; bottom: auto; margin: 4px 0 0; } .to-board .fxc-say::after { left: auto; right: 16px; top: auto; bottom: 100%; border-left-color: transparent; border-bottom-color: #fff; transform: none; }
  .fxc-stage::before, .fxc-stage::after { width: 5%; }
}
@media (prefers-reduced-motion: reduce) { .to-board .to-box, .to-board .to-box * { animation: none !important; } }

/* ===== wheel v2 (Vòng quay may mắn: viền vàng, vòng đèn, kim bật, pháo giấy) ===== */
.tw-board { padding: clamp(10px, 2vh, 26px) clamp(14px, 6%, 90px); display: grid; }
.tw-board > .tw, .tw-board > .tw-card { position: relative; z-index: 1; }
.tw-board .tw-wheelbox { width: min(40vw, calc(100vh - 420px), 640px); min-width: 220px; margin: 2% 0; }
.tw-board .tw-main { grid-template-columns: auto minmax(220px, 340px); }
.tw-board .tw-wheelbox canvas { filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.tw-board.spinning .tw-wheelbox::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,220,120,.35), transparent 65%); animation: tw-pulse .5s ease-in-out infinite alternate; pointer-events: none; z-index: -1; }
@keyframes tw-pulse { to { transform: scale(1.06); opacity: .6; } }
.tw-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 2; }
.tw-ring i { position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; margin: -1.6%; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 8px #ffd34d, 0 0 16px #ffb020; transform: rotate(var(--a)) translateY(-1484%); animation: tw-bulb 1s steps(1) infinite; animation-delay: calc(var(--k) * -.5s); }
.tw-board.spinning .tw-ring i { animation-duration: .2s; }
@keyframes tw-bulb { 50% { background: #fff8; box-shadow: none; } }
.tw-ptr { position: absolute; left: 50%; top: -6%; width: 12%; aspect-ratio: .8; transform: translateX(-50%); transform-origin: 50% 20%; z-index: 3; background: linear-gradient(180deg, #ff5a5a, #c81e3a); clip-path: polygon(0 0, 100% 0, 100% 35%, 50% 100%, 0 35%); filter: drop-shadow(0 4px 4px rgba(0,0,0,.4)); }
.tw-ptr::after { content: ""; position: absolute; left: 50%; top: 18%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffd34d 50%, #b8860b); }
.tw-ptr.flick { animation: tw-flick .14s ease-out; }
@keyframes tw-flick { 40% { transform: translateX(-50%) rotate(-18deg); } }
.tw-board .tw-title { font-weight: 900; line-height: 1; color: #fff; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.8rem); text-shadow: 0 3px 0 #7a0a2e, 0 0 20px rgba(255,120,160,.6); display: grid; gap: .1em; }
.tw-board .tw-title b { color: #ffd34d; font-size: 1.15em; text-shadow: 0 3px 0 #9a5b00, 0 0 22px rgba(255,200,60,.8); animation: fxc-bob 2.6s ease-in-out infinite; }
.tw-board .tw-left { color: #ffe9c2; } .tw-board .tw-left b { color: #ffd34d; }
.tw-board .tw-spin { background: linear-gradient(180deg, #ffd34d, #f59e0b); color: #4a2500; border: 0; box-shadow: 0 7px 0 #a85d00, 0 0 30px rgba(255,200,60,.55); font-weight: 900; gap: .4em; animation: tw-cta 1.6s ease-in-out infinite; }
.tw-board .tw-spin:hover:not([disabled]) { transform: translateY(-3px); } .tw-board .tw-spin:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 3px 0 #a85d00; }
.tw-board .tw-spin[disabled] { animation: none; }
@keyframes tw-cta { 50% { box-shadow: 0 7px 0 #a85d00, 0 0 46px rgba(255,220,100,.9); } }
.tw-board .tw-hist i { box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.tw-board .tw-card { align-content: start; }
.tw-board .tw-card .tq-q { background: linear-gradient(180deg, #fffdf7, #fff4dc); border: 5px solid #f59e0b; box-shadow: 0 10px 0 #a85d00, 0 20px 40px rgba(0,0,0,.4); animation: to-reveal .5s cubic-bezier(.2,1.4,.4,1); color: #2a1a10; }
.tw-board .tw-badge { background: linear-gradient(180deg, #ffd34d, #f59e0b); color: #4a2500; box-shadow: 0 4px 0 #b45309, 0 0 24px rgba(255,200,80,.6); }
.tw-board .tq-opt { animation: to-optin .45s cubic-bezier(.2,1.3,.4,1) both; }
.tw-board .tq-opt:nth-child(2) { animation-delay: .06s; } .tw-board .tq-opt:nth-child(3) { animation-delay: .12s; } .tw-board .tq-opt:nth-child(4) { animation-delay: .18s; }
.tw-board .fxc-owl { width: clamp(64px, 7vw, 110px); z-index: 2; }
@media (max-width: 820px) {
  .tw-board { padding: 10px 12px 14px; }
  .tw-board .tw-main { grid-template-columns: 1fr; } .tw-board .tw-wheelbox { width: min(78vw, calc(100vh - 380px)); margin: 6% auto 2%; }
  .tw-board .tw-title { display: none; }
  .tw-board .fxc-owl { top: 4px; bottom: auto; right: 6px; width: 50px; }
  .tw-board .fxc-say { right: 0; top: 100%; bottom: auto; margin: 4px 0 0; } .tw-board .fxc-say::after { left: auto; right: 16px; top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .tw-ring i, .tw-board .tw-spin, .tw-ptr { animation: none !important; } }

/* ===== hangman v2 (Đồi nắng: cảnh trời, bóng vỡ bung mảnh) ===== */
.th-board { padding: clamp(8px, 1.2vh, 16px) clamp(10px, 1.4vw, 24px); display: grid; }
.th-board > .th { min-height: 0; height: 100%; row-gap: clamp(6px, 1.1vh, 20px); }
.th-board .th-k { min-height: clamp(34px, 4.8vh, 72px); }
.th-board .th-hint { padding-block: clamp(6px, 1vh, 18px); }
.th-board .th-hint img { max-height: clamp(48px, 10vh, 150px); }
.th-board .th-l { min-height: 0; }
.th-board > .th { position: relative; z-index: 1; }
.th-board .th-scene { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); border: 3px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px rgba(20,60,40,.25), inset 0 0 30px rgba(255,255,255,.35); backdrop-filter: blur(2px); }
.th-board .th-hint { background: rgba(255,255,255,.92); border: 3px solid #fff; box-shadow: 0 6px 0 rgba(30,90,50,.25), 0 12px 24px rgba(0,0,0,.12); }
.th-board .th-word { filter: drop-shadow(0 4px 10px rgba(0,0,0,.12)); }
.th-board .th-l { background: #fff; }
.th-board .th-l.on { animation: th-lpop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes th-lpop { 0% { transform: scale(.3) rotate(-12deg); } 100% { transform: none; } }
.th-board .th-k { box-shadow: 0 5px 0 rgba(30,90,50,.35); }
.th-board .th-k:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(30,90,50,.35); }
.th-board .th-bal { animation: th-sway 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.th-board .th-bal:nth-child(2n) { animation-delay: -1.5s; } .th-board .th-bal:nth-child(3n) { animation-duration: 3.6s; }
@keyframes th-sway { 50% { transform: rotate(4deg) translateY(-2px); } }
.th-board .th-bal.pop { animation: th-pop .28s ease-out forwards; }
@keyframes th-pop { 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(.1); opacity: 0; } }
[data-theme="dem"] .th-board .th-hint, [data-theme="dem"] .th-board .th-l { color: #1d1640; }
@media (prefers-reduced-motion: reduce) { .th-board .th-bal { animation: none !important; } }

/* ===== anagram v2 — "Bàn gỗ": nền nỉ xanh, thẻ chữ gỗ kiểu Scrabble, khay gỗ, Cú cổ vũ ===== */
.ta-board { padding: clamp(10px, 1.8vh, 26px) clamp(12px, 2vw, 36px) clamp(12px, 2vh, 28px); display: grid; }
.ta-board .ta { position: relative; z-index: 1; }
.ta-board .ta-head > * , .ta-board .ta-head { color: #fff6dd; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.ta-board .ta-head { justify-self: center; background: rgba(0,0,0,.25); border: 2px solid rgba(255,230,160,.35); border-radius: 999px; padding: .15em 1em; }
.ta-board .ta-q { background: linear-gradient(180deg, #fffdf5, #fff1cf); border: 5px solid #c98a4b; box-shadow: 0 0 0 3px #8a5a2b, 0 10px 0 #5e3a1a, 0 18px 34px rgba(0,0,0,.35); border-radius: 22px; color: #3b2410; max-width: min(100%, 1100px); justify-self: center; width: 100%; box-sizing: border-box; animation: fxc-zoomsoft .45s var(--ease-out) both; }
@keyframes fxc-zoomsoft { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.ta-board .ta-slot { border: 3px dashed rgba(255,230,160,.55); background: rgba(0,0,0,.22); box-shadow: inset 0 4px 10px rgba(0,0,0,.35); }
.ta-board .ta-slot.hover, .ta-board .ta-slot:focus-visible { background: rgba(255,214,102,.25); border-color: #ffd666; }
.ta-board .ta-slot.filled { border-color: transparent; background: transparent; box-shadow: none; }
.ta-board .ta-tile { position: relative; color: #4a2c10; background: linear-gradient(160deg, #ffe6b3 0%, #f3c47e 55%, #d99b52 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(120,70,20,.25), 0 6px 0 #8a5a2b, 0 10px 16px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.ta-board .ta-tile::after { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: repeating-linear-gradient(100deg, transparent 0 9px, rgba(150,90,30,.07) 9px 11px); pointer-events: none; }
.ta-board .ta-tile:hover { transform: translateY(-4px) rotate(-2deg); }
.ta-board .ta-tile.in { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); background: linear-gradient(160deg, #8fb5ff, #4f7cf0 60%, #3557c9); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #22398a, 0 10px 16px rgba(0,0,0,.35); }
.ta-board .ta-area.ok .ta-tile { color: #fff; background: linear-gradient(160deg, #6ee7a0, #22c55e 60%, #15803d); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #0f5a2b, 0 0 22px rgba(74,222,128,.7); }
.ta-board .ta-area.bad .ta-tile { color: #fff; background: linear-gradient(160deg, #fca5a5, #ef4444 60%, #b91c1c); box-shadow: 0 6px 0 #7f1d1d; }
.ta-board .ta-area.reveal .ta-tile { color: #4a2c10; background: linear-gradient(160deg, #fff3a8, #facc15 60%, #d49b00); box-shadow: 0 6px 0 #8a6400; }
.ta-board .ta-bank { background: linear-gradient(180deg, #8a5a2b, #6b4220); border: 0; border-radius: 20px; box-shadow: inset 0 6px 12px rgba(0,0,0,.45), 0 3px 0 rgba(255,220,160,.25); }
.ta-board .ta-bank.fresh .ta-tile { animation: ta-dealin .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--k, 0) * 55ms); }
@keyframes ta-dealin { from { transform: translateY(-90px) rotate(-25deg) scale(.4); opacity: 0; } }
.ta-board .ta-tries { color: #fff6dd; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.ta-board .ta-tries.bad { color: #ffb4b4; }
.ta-board .ta-actions .btn-soft, .ta-board .ta-actions .btn-ghost { background: rgba(255,246,221,.92); color: #5e3a1a; border-color: transparent; box-shadow: 0 4px 0 #8a5a2b; }
.ta-board .ta-actions .btn-primary { background: linear-gradient(180deg, #ffb347, #f07a1c); border-color: transparent; color: #fff; box-shadow: 0 5px 0 #a24b0c; }
.ta-board .fxc-owl { top: 4px; bottom: auto; right: clamp(8px, 1.2vw, 20px); width: clamp(64px, 6vw, 96px); z-index: 2; }
.ta-board .fxc-say { right: 100%; bottom: 10%; margin: 0 6px 0 0; }
@media (max-width: 760px) { .ta-board .fxc-owl { right: 6px; width: 50px; } }
@media (prefers-reduced-motion: reduce) { .ta-board .ta-bank.fresh .ta-tile, .ta-board .ta-q { animation: none; } }
.ta-board > .ta { min-height: 0; gap: clamp(6px, 1.2vh, 20px); }
.ta-board .ta-q { grid-template-columns: auto auto; grid-auto-flow: column; justify-content: center; align-items: center; column-gap: clamp(12px, 2vw, 32px); row-gap: 4px; padding: clamp(8px, 1.4vh, 20px) clamp(14px, 2vw, 36px); }
.ta-board .ta-q img { grid-row: span 2; max-height: min(12.5vh, 170px); }
.ta-board .ta-q h2 { font-size: clamp(1.1rem, .8rem + 1.3vw, 2.4rem); }
.ta-board .ta-area { gap: clamp(8px, 1.6vh, 26px); --ts: clamp(36px, min(8vw, 7.4vh, calc(80vw / (var(--n, 8) + 1))), 96px); }
.ta-board .ta-actions { padding-top: 0; }
@media (max-width: 760px) { .ta-board .ta-q { grid-template-columns: 1fr; grid-auto-flow: row; } .ta-board .ta-q img { grid-row: auto; max-height: 16vh; } }
@media (max-width: 760px) { .ta-board { padding: 8px 8px 10px; } .ta-board > .ta { gap: 6px; } }
/* khung cảnh có overflow:hidden trong lưới .game-stage bị ép bằng hàng → fitStage không thấy phần tràn; để cao theo nội dung (tối thiểu đầy khung) */
.game-stage > :is(.fxc-board, .tg) { align-self: start; }
body[data-view="play"][data-playmode="window"] .tg-q { min-height: 0; padding: clamp(8px, 1.4vh, 20px) clamp(14px, 2vw, 40px); }
body[data-view="play"][data-playmode="window"] .tg-q img { max-height: min(14vh, 170px); }
body[data-view="play"][data-playmode="window"] .tg-opt { min-height: clamp(46px, 7vh, 90px); }
body[data-view="play"][data-playmode="window"] .tg-main { gap: clamp(6px, 1.1vh, 16px); }
body[data-view="play"][data-playmode="window"] .ta-board .ta .ta-q img { max-height: min(12vh, 150px); }
body[data-view="play"][data-playmode="window"] .ta-board .ta .ta-area { --ts: clamp(38px, min(7.2vh, calc(80vw / (var(--n, 8) + 1))), 80px); }

/* ---- Linh vật Sẻ chia (thay cú tím) ---- */
.ax-owl-b, .fxc-owlart { display: grid; }
.sc-p { grid-area: 1 / 1; width: 100%; height: 100%; aspect-ratio: 1 / 1.08; object-fit: contain; object-position: 50% 100%; opacity: 0; transition: opacity .18s; pointer-events: none; user-select: none; filter: drop-shadow(0 5px 5px rgba(20,10,50,.3)); }
.ax-owl.idle .sc-dung, .fxc-owl.idle .sc-dung, .ax-owl.sad .sc-dung, .fxc-owl.sad .sc-dung { opacity: 1; }
.ax-owl.happy .sc-cuoi, .fxc-owl.happy .sc-cuoi { opacity: 1; }
.ax-owl.cheer .sc-vay { opacity: 1; }
.ax-owl.think .sc-chi, .fxc-owl.think .sc-chi { opacity: 1; }
.fxc-owl.wow .sc-F { opacity: 1; }
.ax-owl.sad .ax-owl-b, .fxc-owl.sad .fxc-owlart { filter: saturate(.55) brightness(.92); transform: rotate(-4deg) translateY(4%); }
.ax-owl.think .ax-owl-b, .fxc-owl.think .fxc-owlart { transform: rotate(5deg); transition: transform .3s; }
.fxc-owl.idle .fxc-owlart { animation: fxc-breath 3s ease-in-out infinite; transform-origin: 50% 100%; }
.fxc-owl.happy .fxc-owlart, .fxc-owl.wow .fxc-owlart { animation: fxc-jump .5s ease-out 2; }