/* typing-game 전용. 공용은 /assets/site.css */
.tg-ui .tg-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.tg-ui .tg-seg { margin: 0; gap: 0; }
.tg-ui .tg-seg label + label span { margin-left: -1px; }
.tg-ui .tg-seg span { min-height: 38px; border-radius: 0; }
.tg-ui .tg-hud { margin-left: auto; display: flex; align-items: baseline; gap: 18px; }
.tg-ui .tg-hud span { display: inline-flex; align-items: baseline; gap: 5px; }
.tg-ui .tg-hud b { font-size: 24px; font-weight: 800; }
.tg-ui .tg-hud i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.tg-ui #lv.up b { animation: tg-up .6s; color: var(--seal); }
.tg-ui .tg-lives { gap: 4px !important; }
.tg-ui .tg-lives i { width: 12px; height: 12px; border-radius: 50%; background: var(--seal); display: inline-block; }
.tg-ui .tg-lives i.gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }
@keyframes tg-up { 30% { transform: scale(1.5); } }

/* 판: 흰 종이, 바닥은 먹선 */
.tg-ui .tg-field { position: relative; margin-top: 12px; height: min(62vh, 520px); min-height: 360px; overflow: hidden; border: 1px solid var(--rule); border-top: 3px solid var(--ink); background: var(--paper); background-image: linear-gradient(var(--rule-soft) 1px, transparent 1px); background-size: 100% 40px; cursor: text; }
.tg-ui .tg-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ink); }
.tg-ui .tg-floor.hit { animation: tg-floor .4s; }
@keyframes tg-floor { 0%, 60% { background: var(--danger); height: 10px; } }
.tg-ui .drop { position: absolute; left: 0; top: 0; padding: 4px 11px 5px; font-size: 19px; font-weight: 700; white-space: nowrap; background: var(--paper); border: 1px solid var(--ink-3); border-bottom-width: 2px; border-radius: 3px; will-change: transform; }
.tg-ui .drop.bomb { color: var(--seal-ink); background: var(--seal); border-color: var(--seal); }
.tg-ui .drop.lost { opacity: 0; transition: opacity .3s; }
.tg-ui .pop { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--seal); border: 3px solid var(--seal); border-radius: 50%; pointer-events: none; animation: tg-pop .5s forwards; }
@keyframes tg-pop { 0% { opacity: 0; scale: 1.8; rotate: -20deg; } 25% { opacity: 1; scale: 1; rotate: -8deg; } 100% { opacity: 0; scale: 1.1; rotate: -8deg; } }

.tg-ui .tg-start, .tg-ui .tg-over { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--paper) 92%, transparent); }
.tg-ui .tg-start-h { margin: 0; font-size: clamp(22px, 4vw, 30px); font-weight: 800; }
.tg-ui .tg-start-s { margin: 0; max-width: 460px; color: var(--ink-2); }
.tg-ui .tg-bomb-demo { padding: 1px 6px; color: var(--seal-ink); background: var(--seal); border-radius: 3px; font-weight: 700; }
.tg-ui .tg-best { margin: 0; font-size: 13px; color: var(--ink-3); }
.tg-ui .tg-over-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.tg-ui .tg-over-score { font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.tg-ui .tg-over dl { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0 0 6px; }
.tg-ui .tg-over dl div { display: flex; gap: 6px; align-items: baseline; }
.tg-ui .tg-over dt { font-size: 13px; color: var(--ink-3); }
.tg-ui .tg-over dd { margin: 0; font-weight: 700; }
.tg-ui .tg-paused { position: absolute; left: 0; right: 0; top: 40%; z-index: 1; margin: 0; text-align: center; font-weight: 700; color: var(--seal); }

.tg-ui .tg-input { display: block; width: 100%; margin-top: 10px; min-height: 56px; padding: 10px 16px; font: inherit; font-size: 22px; font-weight: 700; text-align: center; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-bottom: 3px solid var(--ink); border-radius: 2px; }
.tg-ui .tg-input:focus { outline: none; border-color: var(--seal); }
.tg-ui .tg-input.miss { animation: tg-shake .25s; border-color: var(--danger); }
@keyframes tg-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 520px) {
  .tg-ui .tg-hud { margin-left: 0; width: 100%; justify-content: space-between; }
  .tg-ui .drop { font-size: 16px; }
  .tg-ui .tg-field { height: 50vh; min-height: 300px; }
}

/* 겨냥한 낱말: 친 부분은 인주색으로 채워진다 */
.tg-ui .drop .typed { font-weight: 800; color: var(--seal); }
.tg-ui .drop.aim { border-color: var(--seal); border-width: 2px; border-bottom-width: 3px; z-index: 1; box-shadow: 0 0 0 3px var(--seal-soft); }
.tg-ui .drop.bomb .typed { color: var(--seal-ink); text-decoration: underline; }
.tg-ui .tg-combo { min-width: 2.5em; font-size: 18px !important; color: var(--seal); }
/* 가운데 알림: 3·2·1, 단계, 콤보 */
.tg-ui .tg-banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 3; margin: 0; text-align: center; font-size: 44px; font-weight: 800; color: var(--ink); pointer-events: none; opacity: 0; }
.tg-ui .tg-banner.show { animation: tg-banner .65s ease-out; }
.tg-ui .tg-banner.count { font-size: 72px; }
.tg-ui .tg-banner.level, .tg-ui .tg-banner.combo, .tg-ui .tg-banner.bomb { color: var(--seal); }
@keyframes tg-banner { 0% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(0.96); } }
/* 자판: 누른 키가 먹색으로 번쩍 */
.tg-ui .board { margin-top: 12px; }
.tg-ui .board .key { transition: none; }
.tg-ui .board .key.hit { background: var(--ink); border-color: var(--ink); }
.tg-ui .board .key.hit .l, .tg-ui .board .key.hit .j { color: var(--paper); }
.tg-ui .board.ko .key .j { align-self: center; margin-top: auto; margin-bottom: 0.5cqw; font-size: 1.6cqw; font-weight: 700; color: var(--ink); }
.tg-ui .board.ko .key .l { font-size: 0.85cqw; color: var(--ink-3); }
@media (max-width: 520px) { .tg-ui .board { display: none; } }
@media (prefers-reduced-motion: reduce) { .tg-ui .tg-banner.show { animation: none; opacity: 1; } }