#clockLabel.is-low { color: var(--bad); }

.t24-stage { --t24-text: #3b2a6e; --t24-chip: #ffffffb3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: clamp(400px, calc(100vh - 310px), 600px); padding: 28px 14px 18px;
    background:
        radial-gradient(60px 22px at 12% 22%, #ffffffd9 60%, transparent 62%),
        radial-gradient(90px 30px at 18% 26%, #ffffffc4 60%, transparent 62%),
        radial-gradient(80px 26px at 84% 16%, #ffffffd0 60%, transparent 62%),
        radial-gradient(110px 34px at 90% 21%, #ffffffb8 60%, transparent 62%),
        radial-gradient(70px 22px at 72% 88%, #ffffff8c 60%, transparent 62%),
        radial-gradient(circle at 50% 120%, #ffe8f3 0%, transparent 55%),
        linear-gradient(180deg, #a5d8ff 0%, #c5c8ff 55%, #e3d0ff 100%);
    user-select: none; -webkit-user-select: none; }
:root[data-theme="dark"] .t24-stage { --t24-text: #ede9fe; --t24-chip: #ffffff1f;
    background:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff 99%, transparent),
        radial-gradient(1.5px 1.5px at 28% 8%, #fff 99%, transparent),
        radial-gradient(2px 2px at 46% 22%, #fde68a 99%, transparent),
        radial-gradient(1.5px 1.5px at 66% 12%, #fff 99%, transparent),
        radial-gradient(2px 2px at 82% 26%, #fff 99%, transparent),
        radial-gradient(1.5px 1.5px at 92% 9%, #c4b5fd 99%, transparent),
        radial-gradient(1.5px 1.5px at 6% 52%, #fff 99%, transparent),
        radial-gradient(circle at 50% 120%, #7c3aed55 0%, transparent 60%),
        linear-gradient(180deg, #1e1b4b 0%, #2e1f5e 60%, #3b2a6e 100%); }
.t24-stage { background: url("chibi/nen-ngay.webp?v=20261104a") center / cover, #e3d0ff; }
:root[data-theme="dark"] .t24-stage { background: url("chibi/nen-dem.webp?v=20261104a") center / cover, #2e1f5e; }
.t24-critter.is-img { z-index: 3; width: 62%; transform: translate(-50%, -86%); filter: drop-shadow(0 3px 2px #0000002a); }
.t24-critter.is-img img { display: block; width: 100%; height: auto; pointer-events: none; }
.t24-card:has(.t24-critter.is-img) .t24-paws { display: none; }
@media (hover: hover) { .typing-game .t24-card:not(:disabled):hover .t24-critter.is-img { transform: translate(-50%, -94%); } }
.typing-game .t24-card.is-picked .t24-critter.is-img { transform: translate(-50%, -98%) rotate(-6deg); }
.t24-mascot { position: absolute; left: 14px; bottom: 8px; width: clamp(96px, 10vw, 150px); pointer-events: none; filter: drop-shadow(0 6px 8px #0004); z-index: 2; }
.t24-mascot.is-pop { animation: t24-pop .45s; }
@keyframes t24-pop { 40% { transform: translateY(-14px) scale(1.06); } }
@media (max-width: 1180px) { .t24-mascot { display: none; } }
.t24-stage .ba-banner { color: #ffffff; text-shadow: 0 3px 0 #7c3aed, 0 0 18px #4c1d9580; }
.t24-tier { position: absolute; top: 10px; left: 14px; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--t24-chip); color: var(--t24-text); font-size: var(--small); font-weight: 700; letter-spacing: .3px; }
.t24-cards { display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: 22px; width: min(100%, 700px, max(300px, calc((100vh - 490px) * 2.6))); }
.t24-cards[data-count="3"] { --count: 3; width: min(100%, 530px); }
.t24-cards[data-count="2"] { --count: 2; width: min(100%, 350px); }
.t24-cards[data-count="1"] { --count: 1; width: min(100%, 170px); }
.t24-cards { perspective: 900px; padding-top: 48px; }
.t24-card[data-tone="pink"] { --c1: #ffe1ec; --c2: #ff9ebc; --edge: #d9708f; --ink: #b4234d; }
.t24-card[data-tone="lemon"] { --c1: #fff5cc; --c2: #ffd66b; --edge: #c99a2a; --ink: #8a5a00; }
.t24-card[data-tone="mint"] { --c1: #d9f8e8; --c2: #8fe0b8; --edge: #4fae84; --ink: #17694a; }
.t24-card[data-tone="sky"] { --c1: #dceeff; --c2: #9cc8ff; --edge: #5d8fd6; --ink: #1f4f9e; }
.t24-card[data-tone="gold"] { --c1: #fff6c9; --c2: #f6c945; --edge: #b8860b; --ink: #6b4300; }
.typing-game .t24-card { position: relative; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--ink); cursor: pointer; transform-style: preserve-3d; animation: t24-float 3.2s ease-in-out infinite; animation-delay: var(--float-delay, 0s); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), filter .18s; }
@keyframes t24-float { 50% { translate: 0 -5px; } }
.t24-face { position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; border-radius: 20px;
    background: radial-gradient(120% 80% at 30% 15%, #ffffff 0%, var(--c1) 35%, var(--c2) 100%);
    box-shadow: inset 0 0 0 5px #ffffffcc, inset 0 -10px 18px #0000001a,
        0 3px 0 var(--edge), 0 6px 0 var(--edge), 0 9px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 18px 22px #0000006b; }
.t24-face::after { content: ""; position: absolute; inset: -30% 40% 55% -40%; background: linear-gradient(115deg, transparent 30%, #ffffffb0 48%, transparent 62%); transform: rotate(8deg); pointer-events: none; }
.t24-card strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 6.4vw, 54px); font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 #ffffffd9, 0 6px 10px #0000002e; }
.t24-card strong.is-long { font-size: clamp(20px, 4.4vw, 36px); }
.t24-paws { position: absolute; z-index: 2; top: -8px; left: 50%; width: 50%; height: 18px; transform: translateX(-50%);
    background:
        radial-gradient(circle at 20% 64%, #ffc6da 0 14%, transparent 16%), radial-gradient(circle at 80% 64%, #ffc6da 0 14%, transparent 16%),
        radial-gradient(circle at 20% 58%, #f4f9ff 0 33%, transparent 35%), radial-gradient(circle at 80% 58%, #f4f9ff 0 33%, transparent 35%);
    filter: drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 0 1px #8fb6dd); }
.t24-critter { position: absolute; z-index: 0; top: 0; left: 50%; width: 58%; transform: translate(-50%, -74%); transition: transform .2s; filter: drop-shadow(0 3px 0 #00000014); }
.t24-critter svg { display: block; width: 100%; height: auto; overflow: visible; }
.t24-critter .fur { fill: #f6fbff; }
.t24-critter .line { stroke: color-mix(in srgb, var(--edge) 70%, #6d8fb8); stroke-width: 2.5; stroke-linejoin: round; }
.t24-critter .ear { fill: #ffc6da; }
.t24-critter .shade { fill: #dcebfa; opacity: .75; }
.t24-critter .bolt { fill: #ffd43b; stroke: #e8a400; stroke-width: 1.6; stroke-linejoin: round; }
.t24-critter .crown { fill: #ffd43b; stroke: #d08c00; stroke-width: 1.6; stroke-linejoin: round; }
.t24-critter .eye { fill: #1f2a44; }
.t24-critter .shine { fill: #ffffff; }
.t24-critter .blush { fill: #ff9ebc; opacity: .6; }
.t24-critter .muzzle { fill: #ffffff; }
.t24-critter .nose { fill: #2b3550; }
.t24-critter .mouth { fill: none; stroke: #2b3550; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) {
    .typing-game .t24-card:not(:disabled):hover { animation-play-state: paused; transform: translateY(-6px) rotateX(10deg) rotateY(-8deg); }
    .typing-game .t24-card:not(:disabled):hover .t24-critter { transform: translate(-50%, -84%); }
}
.typing-game .t24-card:not(:disabled):active { transform: translateY(5px) scale(.97); }
.typing-game .t24-card:not(:disabled):active .t24-face { box-shadow: inset 0 0 0 5px #ffffffcc, 0 2px 0 var(--edge), 0 4px 0 var(--edge), 0 8px 12px #00000055; }
.typing-game .t24-card.is-picked { animation: none; transform: translateY(-18px) rotate(-3deg) scale(1.05); filter: drop-shadow(0 0 14px #fde68a); }
.typing-game .t24-card.is-picked .t24-face { box-shadow: inset 0 0 0 5px #fff7d1, 0 0 0 4px #fbbf24, 0 3px 0 var(--edge), 0 6px 0 var(--edge), 0 9px 0 color-mix(in srgb, var(--edge) 80%, #000), 0 26px 28px #00000080; }
.typing-game .t24-card.is-picked .t24-critter { transform: translate(-50%, -88%) rotate(-6deg); }
.typing-game .t24-card:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .typing-game .t24-card { animation: none; } }
.t24-ops { display: flex; gap: 16px; }
.typing-game .t24-ops button { --k1: #ff9a8b; --k2: #ff5c7a; --kd: #d6335a; width: 64px; height: 64px; border: 0; border-radius: 22px; background: linear-gradient(160deg, var(--k1), var(--k2)); color: #fff; font-size: 32px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 #00000033; box-shadow: inset 0 3px 0 #ffffff66, 0 6px 0 var(--kd), 0 12px 18px #00000040; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.typing-game .t24-ops button:nth-child(2) { --k1: #8fd3ff; --k2: #4dabf7; --kd: #1c7ed6; }
.typing-game .t24-ops button:nth-child(3) { --k1: #8cf0cf; --k2: #38d9a9; --kd: #0ca678; }
.typing-game .t24-ops button:nth-child(4) { --k1: #c7b3ff; --k2: #9775fa; --kd: #7048e8; }
.typing-game .t24-ops button:not(:disabled):hover { transform: translateY(-3px); }
.typing-game .t24-ops button:not(:disabled):active { transform: translateY(4px); box-shadow: inset 0 3px 0 #ffffff66, 0 2px 0 var(--kd), 0 6px 10px #00000040; }
.typing-game .t24-ops button.is-picked { transform: translateY(-6px) scale(1.08); box-shadow: inset 0 3px 0 #ffffff66, 0 0 0 4px #ffffff, 0 0 0 7px var(--kd), 0 6px 0 var(--kd), 0 16px 22px #00000050; }
.typing-game .t24-ops button:disabled { opacity: .5; cursor: default; }
.t24-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.typing-game .t24-tools button { padding: 8px 16px; border: 0; border-radius: 999px; background: var(--t24-chip); color: var(--t24-text); font-weight: 700; box-shadow: 0 3px 0 #00000014; cursor: pointer; }
.typing-game .t24-tools button:disabled { opacity: .45; cursor: default; }
.typing-game #skipButton { color: #c2255c; }
:root[data-theme="dark"] .typing-game #skipButton { color: #fda4c4; }

@media (max-width: 699px) {
    .t24-stage { min-height: 380px; gap: 14px; padding-top: 30px; }
    .t24-cards { gap: 8px; }
    .typing-game .t24-ops button { width: 54px; height: 54px; border-radius: 18px; font-size: 26px; }
}