/* TNT hero: playable hold-to-grow demo (same rules as the app: 85-98% scores, 95%+ close call, 98-102% too perfect) */
.tnt-demo { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1.08; border-radius: 30px; border: 1px solid var(--line); background: #070808; overflow: hidden; box-shadow: var(--shadow); }
.tnt-demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tnt-hud { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; pointer-events: none; }
.tnt-hud b { display: block; font-weight: 300; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.tnt-right { text-align: right; }
.tnt-right b { font-size: 26px; color: var(--ink-2); }
.tnt-cap { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .tnt-cap { letter-spacing: 0; font-size: 12px; }
.tnt-fb { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; pointer-events: none; min-height: 56px; }
.tnt-fb strong { display: block; font-weight: 400; font-size: 26px; letter-spacing: .12em; }
html[lang="ar"] .tnt-fb strong { letter-spacing: 0; }
.tnt-fb span { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tnt-hint { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; pointer-events: none; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .tnt-hint { letter-spacing: 0; font-size: 14px; }
.tnt-demo canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 30px; }
@media (max-width: 900px) { .tnt-demo { max-width: 420px; } }