/* OnlineTools Kenya Typing Games 1.1.1 — game shell for six Languages Lab tools, drawn with the site's tokens. */
.tg{--tg-blue:#0053e2;--tg-blue-dark:#003fac;--tg-ink:#142642;--tg-muted:#52657e;--tg-border:#dbe4f0;--tg-soft:#edf4ff;--tg-panel:#f5f8fc;--tg-chip:#eef2f8;--tg-chip-hover:#e3e9f3;--tg-amber:#e39b12;--tg-red:#c8372d;--tg-green:#13804a;--tg-radius:16px;color:var(--tg-ink);font-variant-numeric:tabular-nums}
.tg *{box-sizing:border-box}
.tg [hidden]{display:none!important}
.tg-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0}
.tg-icon svg{width:18px;height:18px}
/* Header */
.tg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.tg-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--tg-blue)}
.tg-title{margin:6px 0 6px;font-size:clamp(24px,3.2vw,32px);line-height:1.15;letter-spacing:-.5px}
.tg-tagline{margin:0;color:var(--tg-muted);max-width:620px}
.tg-player{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;min-width:230px;padding:12px 14px;border:1px solid var(--tg-border);border-radius:13px;background:#fff;position:relative}
.tg-player-level{font-size:14px}
.tg-player-title{font-size:12px;color:var(--tg-muted);text-align:right}
.tg-player .tg-xp-bar{grid-column:1/-1}
.tg-player-xp{grid-column:1/-1;font-size:11px;color:var(--tg-muted)}
.tg-player.tg-has-streak::after{content:attr(data-streak);position:absolute;top:-10px;right:12px;background:var(--tg-soft);color:var(--tg-blue);font-size:11px;font-weight:650;padding:2px 9px;border-radius:99px}
.tg-xp-bar{display:block;height:6px;border-radius:99px;background:#e6ecf5;overflow:hidden}
.tg-xp-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--tg-blue);transition:width .6s ease}
/* Stage */
.tg-stage{position:relative;overflow:hidden;border:1px solid var(--tg-border);border-radius:var(--tg-radius);padding:16px;background:#fff;box-shadow:0 2px 5px rgba(23,58,96,.03)}
.tg-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tg-chip{padding:9px 10px;border-radius:10px;background:var(--tg-panel);text-align:center;min-width:0;transition:background .2s}
.tg-chip strong{display:flex;justify-content:center;align-items:center;gap:3px;min-height:26px;font-size:20px;line-height:1.3;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-chip>span{display:block;font-size:10.5px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;color:var(--tg-muted)}
.tg-chip.tg-hot{background:var(--tg-soft)}
.tg-chip.tg-hot strong{color:var(--tg-blue)}
.tg-heart{color:#cfd8e5}
.tg-heart svg{width:19px;height:19px}
.tg-heart-on{color:var(--tg-red)}
.tg-heart-on svg{fill:currentColor}
.tg-scene{position:relative;min-height:220px;border-radius:12px}
.tg-scene-ladder,.tg-scene-coach{min-height:0}
.tg-pops{position:absolute;inset:0;pointer-events:none;z-index:4}
.tg-pop{position:absolute;transform:translate(-50%,-50%);font-weight:750;font-size:20px;color:var(--tg-blue);animation:tg-rise .9s ease-out forwards;white-space:nowrap}
.tg-pop-miss{color:var(--tg-red)}
.tg-pop-combo,.tg-pop-level{font-size:24px;color:var(--tg-blue-dark)}
.tg-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--tg-blue);opacity:.8;animation:tg-spark .7s ease-out forwards}
@keyframes tg-rise{from{opacity:1;transform:translate(-50%,-40%) scale(.85)}to{opacity:0;transform:translate(-50%,-140%) scale(1.08)}}
@keyframes tg-spark{from{opacity:.8;transform:translate(0,0)}to{opacity:0;transform:translate(var(--tg-dx),var(--tg-dy))}}
/* Overlay (ready, countdown, paused) */
.tg-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);backdrop-filter:blur(4px)}
.tg-overlay-card{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:420px;padding:18px}
.tg-overlay-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--tg-soft);color:var(--tg-blue)}
.tg-overlay-icon svg{width:24px;height:24px}
.tg-overlay-card h3{color:var(--tg-ink);font-size:22px;margin:12px 0 6px}
.tg-overlay-card p{color:var(--tg-muted);margin:0 0 16px;font-size:14px}
.tg-count{font-size:88px;font-weight:800;color:var(--tg-blue);animation:tg-count .6s ease-out}
@keyframes tg-count{from{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}
/* Typing input */
.tg-input-wrap{margin-top:14px}
.tg-input-label{display:block;font-size:12px;font-weight:650;color:#294262;margin-bottom:7px}
.tg .tg-entry{display:block;width:100%;min-height:52px;resize:none;border-radius:10px;padding:12px 14px;font-size:20px;line-height:1.3;background:#fff;color:var(--tg-ink)}
.tg-progress{height:4px;margin-top:10px;border-radius:99px;background:#e6ecf5;overflow:hidden}
.tg-progress span{display:block;height:100%;width:0;background:var(--tg-blue);transition:width .2s linear}
.tg-feedback{margin:10px 0 0;font-size:13px;color:var(--tg-muted);min-height:1.4em}
.tg-feedback-error{color:var(--tg-red)}
/* Typed text trail */
.tg-trail{font-size:22px;line-height:1.65;max-height:9.8em;overflow:auto;padding:14px 16px;border-radius:12px;background:var(--tg-panel);letter-spacing:.2px;word-break:break-word;scroll-behavior:smooth}
.tg-trail-short{max-height:6.6em;font-size:21px;margin-top:12px}
.tg-trail-big{font-size:26px;margin-top:12px}
.tg-ch{color:#97a6bb;border-radius:3px}
.tg-ok{color:var(--tg-ink)}
.tg-bad{color:var(--tg-red);background:#fdeceb;text-decoration:none}
.tg-miss{animation:tg-miss .32s ease-out}
@keyframes tg-miss{0%,40%{background:#fbd5d1;box-shadow:0 2px 0 var(--tg-red)}100%{background:#dfeaff;box-shadow:0 2px 0 var(--tg-blue)}}
.tg-cursor{background:#dfeaff;box-shadow:0 2px 0 var(--tg-blue);color:var(--tg-ink)}
.tg-space-ch{display:inline-block;min-width:.35em}
/* Word Catch */
.tg-sky{position:relative;height:300px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#f9fbff 0%,#eef4fd 100%);box-shadow:inset 0 0 0 1px #e3eaf4}
.tg-sky::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,83,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,83,226,.045) 1px,transparent 1px);background-size:32px 32px}
.tg-ground{position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(180deg,rgba(200,55,45,.04),rgba(200,55,45,.09));border-top:1.5px dashed rgba(200,55,45,.4)}
.tg-falling{--tg-fall:0;position:absolute;left:50%;top:16px;transform:translate(-50%,calc(var(--tg-fall)*196px));padding:10px 18px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--tg-border),0 10px 24px -8px rgba(20,38,66,.25);font-size:32px;font-weight:700;white-space:nowrap;transition:background .2s,box-shadow .2s}
.tg-falling .tg-ch{color:#97a6bb}
.tg-falling .tg-ok{color:var(--tg-green);background:none}
.tg-falling .tg-bad{color:var(--tg-red);background:#fdeceb}
.tg-falling .tg-cursor{background:#dfeaff;color:var(--tg-ink);box-shadow:0 3px 0 var(--tg-blue)}
.tg-falling.tg-danger{background:#fff8f7;box-shadow:0 0 0 1px #f1b9b4,0 10px 24px -8px rgba(200,55,45,.3);animation:tg-wobble .4s ease-in-out infinite}
.tg-falling.tg-caught{animation:tg-catch .35s ease-out}
.tg-falling.tg-missed{animation:tg-drop .4s ease-in}
@keyframes tg-wobble{0%,100%{rotate:-1deg}50%{rotate:1deg}}
@keyframes tg-catch{from{scale:1.15}to{scale:1}}
@keyframes tg-drop{from{opacity:1}to{opacity:.35}}
.tg-next-words{position:absolute;top:12px;right:14px;font-size:12px;color:var(--tg-muted)}
/* Speed Sprint */
.tg-sprint{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.tg-gauge{position:relative;text-align:center}
.tg-gauge svg{width:100%;height:auto;display:block;margin-bottom:4px}
.tg-gauge-fill{transition:stroke-dasharray .25s ease}
.tg-gauge-value{position:absolute;left:0;right:0;top:30%;font-size:40px;line-height:1;font-weight:800}
.tg-gauge-unit{position:absolute;left:0;right:0;top:62%;font-size:11px;font-weight:650;color:var(--tg-muted);letter-spacing:1px}
.tg-gauge-rank{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:5px 12px;border-radius:99px;background:var(--tg-soft);color:var(--tg-blue-dark);font-weight:650;font-size:13px}
.tg-rank-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.tg-rank-bars i{display:block;width:4px;border-radius:2px;background:#c9d4e4}
.tg-rank-bars i:nth-child(1){height:5px}.tg-rank-bars i:nth-child(2){height:7px}.tg-rank-bars i:nth-child(3){height:9px}.tg-rank-bars i:nth-child(4){height:11px}.tg-rank-bars i:nth-child(5){height:14px}
.tg-rank-bars i.tg-bar-on{background:var(--tg-blue)}
/* Typing Race */
.tg-track{display:grid;gap:8px}
.tg-lane{position:relative;height:46px;border-radius:10px;background:var(--tg-panel);overflow:hidden}
.tg-lane::before{content:"";position:absolute;left:136px;right:44px;top:50%;border-top:1.5px dashed #d3dce9}
.tg-lane-you{background:var(--tg-soft);box-shadow:inset 0 0 0 1px rgba(0,83,226,.28)}
.tg-lane-you::before{border-color:rgba(0,83,226,.25)}
.tg-lane-name{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:120px;font-size:12px;line-height:1.25;color:var(--tg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-runner{--tg-pos:0;position:absolute;top:50%;left:calc(132px + var(--tg-pos)*(100% - 192px));display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #cdd7e5,0 2px 6px rgba(20,38,66,.08);color:var(--tg-ink);font-size:12px;font-weight:700;transform:translateY(-50%);transition:left .15s linear}
.tg-lane-you .tg-runner{background:var(--tg-blue);color:#fff;box-shadow:0 4px 10px -2px rgba(0,83,226,.45)}
.tg-flag{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#8ea0b8}
/* Rhythm */
.tg-rhythm{display:flex;align-items:center;justify-content:center;gap:28px;min-height:170px}
.tg-beat{--tg-beat:1000ms;position:relative;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0%,var(--tg-soft) 100%);box-shadow:inset 0 0 0 1px var(--tg-border),0 10px 24px -12px rgba(0,83,226,.35)}
.tg-beat.tg-pulsing::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--tg-blue);animation:tg-pulse var(--tg-beat) linear infinite}
.tg-beat-core{color:var(--tg-blue)}
.tg-beat-core svg{width:40px;height:40px}
@keyframes tg-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.tg-judge{min-width:150px;font-size:28px;font-weight:800;opacity:0}
.tg-judge-show{animation:tg-judge .6s ease-out forwards}
.tg-judge-perfect{color:var(--tg-blue)}
.tg-judge-good{color:var(--tg-green)}
.tg-judge-off{color:var(--tg-red)}
@keyframes tg-judge{0%{opacity:0;transform:scale(1.25)}20%{opacity:1;transform:scale(1)}100%{opacity:.9}}
/* Finger Coach */
.tg-levels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tg .tg-level{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border-radius:9px;background:var(--tg-chip);color:var(--tg-ink);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}
.tg .tg-level:hover{background:var(--tg-chip-hover)}
.tg .tg-level-on{background:var(--tg-soft);color:var(--tg-blue)}
.tg-star{color:#cfd8e5}
.tg-star-on{color:var(--tg-amber)}
.tg-star-on svg{fill:currentColor}
.tg-star-row{display:inline-flex;gap:1px}
.tg-star-row-small svg{width:13px;height:13px}
.tg-bigkey{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px auto 18px}
.tg-bigkey strong{display:grid;place-items:center;min-width:112px;height:112px;padding:0 22px;border-radius:22px;background:linear-gradient(180deg,#fff 0%,#f3f6fa 100%);color:var(--tg-ink);font-size:54px;font-weight:600;line-height:1;box-shadow:0 0 0 1px rgba(20,38,66,.1),0 3px 0 1px rgba(20,38,66,.07),0 24px 40px -20px rgba(20,38,66,.4),inset 0 -3px 0 rgba(20,38,66,.04)}
.tg-bigkey-wide strong{min-width:260px;font-size:20px;font-weight:600;color:var(--tg-muted)}
.tg-bigkey strong .tg-icon svg{width:46px;height:46px;color:var(--tg-green)}
.tg-bigkey span{font-size:13px;font-weight:600;color:var(--tg-muted)}
.tg-bigkey-name{margin-top:-4px;font-size:12px;font-style:normal;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--tg-blue)}
.tg-bigkey-name:empty{display:none}
.tg-bigkey.tg-shake{animation:tg-shake .3s}
@keyframes tg-shake{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
.tg-hands{display:flex;justify-content:center;align-items:flex-end;gap:6px}
.tg-finger{width:22px;height:40px;border-radius:11px 11px 7px 7px;background:#e3e9f2;transition:background .15s,transform .15s}
.tg-finger.tg-lane-L5,.tg-finger.tg-lane-R5{height:30px}.tg-finger.tg-lane-L4,.tg-finger.tg-lane-R4{height:38px}.tg-finger.tg-lane-L3,.tg-finger.tg-lane-R3{height:42px}.tg-finger.tg-lane-L2,.tg-finger.tg-lane-R2{height:38px}
.tg-finger.tg-lane-TH{width:38px;height:20px;margin:0 10px;border-radius:10px}
.tg-finger-on{background:var(--tg-blue);transform:translateY(-4px)}
/* Sentence Ladder */
.tg-ladder{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.tg-rung{flex:1;display:flex;align-items:center;justify-content:center;min-height:38px;border-radius:9px;background:var(--tg-panel);color:var(--tg-muted);font-weight:650}
.tg-rung-now{background:var(--tg-soft);color:var(--tg-blue);box-shadow:inset 0 0 0 1px rgba(0,83,226,.3)}
.tg-rung-done{background:#fff;box-shadow:inset 0 0 0 1px var(--tg-border);color:var(--tg-green)}
/* Keyboard: a keycap case on the US QWERTY grid; rows are 15 units wide. */
.tg-keys{--g:6px;container-type:inline-size;width:min(100%,780px);margin:18px auto 6px;padding:14px;border-radius:18px;background:linear-gradient(180deg,#f4f7fb 0%,#e9eef5 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px #d6dee9,0 22px 44px -26px rgba(20,38,66,.45);user-select:none}
.tg-key-row{--u:calc((100cqi - 14 * var(--g)) / 15);display:flex;gap:var(--g)}
.tg-key-row+.tg-key-row{margin-top:var(--g)}
.tg-key{--w:1;position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:calc(var(--w) * var(--u) + (var(--w) - 1) * var(--g));height:calc(var(--u) * .92);min-height:22px;padding:0 calc(var(--u) * .2);border-radius:calc(var(--u) * .2);background:linear-gradient(180deg,#fff 0%,#f7f9fc 100%);box-shadow:0 0 0 1px rgba(20,38,66,.1),0 1px 0 1px rgba(20,38,66,.05),0 2px 3px rgba(20,38,66,.07),inset 0 -1.5px 0 rgba(20,38,66,.04);color:#2b3b56;font-size:clamp(10px,calc(var(--u) * .34),15px);font-weight:550;line-height:1;transition:background .12s,box-shadow .12s,transform .08s,color .12s}
.tg-mod{font-size:clamp(8px,calc(var(--u) * .24),11px);font-weight:500;color:#7c8ca4;letter-spacing:.2px}
.tg-mod-left{justify-content:flex-start}
.tg-mod-right{justify-content:flex-end}
.tg-home::after{content:"";position:absolute;left:50%;bottom:16%;width:24%;height:2px;border-radius:2px;background:#a3b3c9;transform:translateX(-50%)}
.tg-key-zone{background:linear-gradient(180deg,#f6f9ff 0%,#e9f1ff 100%);color:var(--tg-blue-dark)}
.tg-key-next{background:linear-gradient(180deg,#2c76ff 0%,#0053e2 100%);color:#fff;box-shadow:0 0 0 1px #0047c4,0 6px 14px -4px rgba(0,83,226,.55),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-1px)}
.tg-key-next.tg-mod{color:#fff}
.tg-key-next.tg-home::after{background:rgba(255,255,255,.85)}
.tg-key-wrong{background:linear-gradient(180deg,#fff4f3 0%,#fde3e0 100%);color:var(--tg-red);box-shadow:0 0 0 1px rgba(200,55,45,.35),0 2px 3px rgba(200,55,45,.15)}
.tg-key-press{transform:translateY(1px);box-shadow:0 0 0 1px rgba(20,38,66,.12),inset 0 1px 2px rgba(20,38,66,.1);background:#eef2f8}
.tg-finger-hint{text-align:center;color:var(--tg-muted);font-size:13px;margin:8px 0 14px;min-height:1.4em}
@container (max-width:520px){.tg-mod .tg-key-label{font-size:8px}}
@container (max-width:400px){.tg-mod .tg-key-label{display:none}}
/* Buttons: the site's shapes; secondary actions sit on a soft tint, the main action is blue. */
.tg-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 14px}
.tg .tg-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;border-radius:9px;background:var(--tg-chip);color:var(--tg-ink);font-size:13px;font-weight:650;line-height:1.3;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.tg .tg-button:hover{background:var(--tg-chip-hover);color:var(--tg-ink)}
.tg .tg-button .tg-icon{color:#4b5f7c}
.tg .tg-primary,.tg .tg-primary:hover{color:#fff}
.tg .tg-primary{background:var(--tg-blue)}
.tg .tg-primary:hover{background:var(--tg-blue-dark)}
.tg .tg-primary .tg-icon{color:#fff}
.tg .tg-big{min-height:48px;padding:13px 22px;font-size:15px}
.tg .tg-next .tg-icon{color:var(--tg-blue)}
.tg .tg-button[aria-pressed=true] .tg-icon{color:var(--tg-blue)}
/* Options, saving and more games */
.tg-options,.tg-details{margin:10px 0;border-radius:13px;background:var(--tg-panel);padding:12px 16px}
.tg-options summary,.tg-details summary{cursor:pointer;font-size:14px;font-weight:650}
.tg-options-body{display:grid;gap:16px;margin-top:14px}
.tg-options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 16px;align-items:start}
.tg-field-wide{grid-column:span 2}
.tg .tg-field textarea{min-height:88px}
.tg-options-checks{display:flex;flex-wrap:wrap;gap:10px 28px}
.tg-check{max-width:420px}
.tg-check label{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;color:#294262;cursor:pointer;line-height:1.45}
.tg input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--tg-blue)}
.tg-check .tg-help{margin:2px 0 0 28px}
.tg-options-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tg-options-actions .tg-button{flex:0 0 auto}
.tg-options-actions .tg-help{margin:0}
.tg-help{font-size:12px;color:var(--tg-muted);margin:4px 0 0}
.tg-save{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0;padding:12px 16px;border-radius:13px;background:var(--tg-panel)}
.tg-save-toggle{display:flex;align-items:center;gap:10px;font-weight:650;font-size:14px}
.tg-save .tg-help{flex-basis:100%;margin:0}
.tg-save .tg-button{background:#fff}
.tg-save .tg-button:hover{background:var(--tg-chip-hover)}
.tg-more{margin-top:22px}
.tg-more h3{font-size:16px;margin:0 0 12px}
.tg-more-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tg-more-card{position:relative;display:grid;grid-template-columns:42px 1fr;gap:2px 12px;align-items:center;padding:14px 36px 14px 14px;border-radius:13px;background:var(--tg-panel);color:var(--tg-ink);text-decoration:none;transition:transform .16s,background .16s}
.tg-more-card:hover{transform:translateY(-2px);background:var(--tg-soft);color:var(--tg-ink)}
.tg-more-icon{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#fff;color:var(--tg-blue)}
.tg-more-icon svg{width:22px;height:22px}
.tg-more-title{font-size:14px;font-weight:650;line-height:1.35}
.tg-more-text{font-size:12px;line-height:1.5;color:var(--tg-muted)}
.tg-more-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#7d94b2}
.tg-more-arrow svg{width:16px;height:16px}
/* Results */
.tg-results{margin:14px 0;position:relative}
.tg-result-card{position:relative;overflow:hidden;text-align:center;padding:26px 20px;border:1px solid var(--tg-border);border-radius:var(--tg-radius);background:#fff;box-shadow:0 2px 5px rgba(23,58,96,.03)}
.tg-result-eyebrow{margin:0;font-weight:700;font-size:20px}
.tg-stars{display:flex;justify-content:center;gap:8px;margin:12px 0}
.tg-stars .tg-star svg{width:40px;height:40px}
.tg-stars .tg-star{animation:tg-star .45s ease-out both}
@keyframes tg-star{from{transform:scale(0)}to{transform:scale(1)}}
.tg-result-big strong{display:block;font-size:52px;line-height:1.05;font-weight:800;letter-spacing:-1px}
.tg-result-big span{color:var(--tg-muted)}
.tg-rank{display:inline-grid;grid-template-columns:auto auto;gap:0 12px;align-items:center;margin:14px auto 4px;padding:9px 16px;border-radius:12px;background:var(--tg-soft);text-align:left}
.tg-rank .tg-rank-bars{grid-row:span 2;height:18px}
.tg-rank .tg-rank-bars i{width:5px}
.tg-rank strong{font-size:14px;color:var(--tg-ink)}
.tg-rank-next{font-size:12px;color:var(--tg-muted)}
.tg-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}
.tg-result-grid div{padding:11px 10px;border-radius:10px;background:var(--tg-panel)}
.tg-result-grid strong{display:block;font-size:19px}
.tg-result-grid span{font-size:12px;color:var(--tg-muted)}
.tg-result-xp{display:grid;gap:6px;max-width:420px;margin:0 auto 14px}
.tg-result-xp strong{color:var(--tg-blue);font-size:17px}
.tg-result-xp span{font-size:13px;color:var(--tg-muted)}
.tg-ribbons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px}
.tg-ribbon{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:99px;background:var(--tg-panel);font-weight:600;font-size:13px}
.tg-ribbon .tg-icon{color:var(--tg-blue)}
.tg-ribbon .tg-icon svg{width:15px;height:15px}
.tg-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.tg-details{text-align:left;margin-top:16px}
.tg-details table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.tg-details th,.tg-details td{text-align:left;padding:7px 8px;border-bottom:1px solid #e3e9f3}
.tg-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tg-confetti span{position:absolute;top:-10px;width:6px;height:12px;border-radius:2px;opacity:.85;animation:tg-fall 2.2s ease-in forwards}
@keyframes tg-fall{to{transform:translateY(520px) rotate(540deg);opacity:0}}
.tg-stage-done .tg-overlay{display:none}
/* Still mode: no movement. */
.tg-still .tg-falling,.tg-still .tg-runner,.tg-still .tg-xp-fill,.tg-still .tg-progress span,.tg-still .tg-key{transition:none}
.tg-still .tg-falling.tg-danger,.tg-still .tg-falling.tg-caught,.tg-still .tg-star,.tg-still .tg-count,.tg-still .tg-judge-show,.tg-still .tg-bigkey.tg-shake{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.tg *{animation-duration:.001s!important;transition-duration:.001s!important}}
@media (max-width:720px){
  .tg-hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-sprint{grid-template-columns:1fr}
  .tg-gauge{max-width:220px;margin:0 auto}
  .tg-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-trail{font-size:19px}
  .tg-sky{height:250px}
  .tg-falling{font-size:26px;transform:translate(-50%,calc(var(--tg-fall)*150px))}
  .tg-keys{--g:4px;padding:8px;border-radius:14px}
  .tg-lane::before{left:72px}
  .tg-lane-name{width:60px}
  .tg-lane-name{font-size:10px;white-space:normal}
  .tg-runner{left:calc(70px + var(--tg-pos)*(100% - 124px))}
  .tg-player{width:100%}
  .tg-field-wide{grid-column:auto}
  .tg-bigkey strong{min-width:96px;height:96px;font-size:46px}
}
@media (max-width:720px) and (pointer:coarse){.tg:not([data-tg-mode=coach]) .tg-keys,.tg:not([data-tg-mode=coach]) .tg-finger-hint{display:none}}

/* dark-mode:start — generated by scripts/dark-mode.py from build/language-lab-assets/games.css; do not edit by hand */
@media screen{
 html[data-theme="dark"] .tg:not([data-otk-paper],[data-otk-paper] *){--tg-ink:#f6f6f6;--tg-muted:#ababab;--tg-border:#353535;--tg-soft:#292929;--tg-panel:#191919;--tg-chip:#292929;--tg-chip-hover:#313131;color:#f6f6f6}
 html[data-theme="dark"] .tg-eyebrow:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-tagline:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-player:not([data-otk-paper],[data-otk-paper] *){border:1px solid #696969;background:#212121}
 html[data-theme="dark"] .tg-player-title:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-player-xp:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-player.tg-has-streak:not([data-otk-paper],[data-otk-paper] *)::after{background:#292929;color:#80abf7}
 html[data-theme="dark"] .tg-xp-bar:not([data-otk-paper],[data-otk-paper] *){background:#2f2f2f}
 html[data-theme="dark"] .tg-xp-fill:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg-stage:not([data-otk-paper],[data-otk-paper] *){border:1px solid #696969;background:#212121;box-shadow:0 2px 5px rgba(23,58,96,.03)}
 html[data-theme="dark"] .tg-chip:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-chip>span:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-chip.tg-hot:not([data-otk-paper],[data-otk-paper] *){background:#292929}
 html[data-theme="dark"] .tg-chip.tg-hot strong:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-heart:not([data-otk-paper],[data-otk-paper] *){color:#cfd8e5}
 html[data-theme="dark"] .tg-heart-on:not([data-otk-paper],[data-otk-paper] *){color:#f76455}
 html[data-theme="dark"] .tg-heart-on svg:not([data-otk-paper],[data-otk-paper] *){fill:currentColor}
 html[data-theme="dark"] .tg-pop:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-pop-miss:not([data-otk-paper],[data-otk-paper] *){color:#f76455}
 html[data-theme="dark"] .tg-pop-combo:not([data-otk-paper],[data-otk-paper] *),
html[data-theme="dark"] .tg-pop-level:not([data-otk-paper],[data-otk-paper] *){color:#abc8fb}
 html[data-theme="dark"] .tg-spark:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg-overlay:not([data-otk-paper],[data-otk-paper] *){background:rgba(33,33,33,0.88)}
 html[data-theme="dark"] .tg-overlay-icon:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#80abf7}
 html[data-theme="dark"] .tg-overlay-card h3:not([data-otk-paper],[data-otk-paper] *){color:#fafafa}
 html[data-theme="dark"] .tg-overlay-card p:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-count:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-input-label:not([data-otk-paper],[data-otk-paper] *){color:#d4d4d4}
 html[data-theme="dark"] .tg .tg-entry:not([data-otk-paper],[data-otk-paper] *){background:#212121;color:#f6f6f6}
 html[data-theme="dark"] .tg-progress:not([data-otk-paper],[data-otk-paper] *){background:#2f2f2f}
 html[data-theme="dark"] .tg-progress span:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg-feedback:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-feedback-error:not([data-otk-paper],[data-otk-paper] *){color:#f76455}
 html[data-theme="dark"] .tg-trail:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-ch:not([data-otk-paper],[data-otk-paper] *){color:#97a6bb}
 html[data-theme="dark"] .tg-ok:not([data-otk-paper],[data-otk-paper] *){color:#f6f6f6}
 html[data-theme="dark"] .tg-bad:not([data-otk-paper],[data-otk-paper] *){color:#f76455;background:#342524}
 html[data-theme="dark"] .tg-cursor:not([data-otk-paper],[data-otk-paper] *){background:#303030;box-shadow:0 2px 0 #0053e2;color:#f6f6f6}
 html[data-theme="dark"] .tg-sky:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#1d1d1d 0%,#292929 100%);box-shadow:inset 0 0 0 1px #303030}
 html[data-theme="dark"] .tg-sky:not([data-otk-paper],[data-otk-paper] *)::before{background-image:linear-gradient(rgba(0,83,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,83,226,.045) 1px,transparent 1px)}
 html[data-theme="dark"] .tg-ground:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,rgba(200,55,45,.04),rgba(200,55,45,.09));border-top:1.5px dashed rgba(200,55,45,.4)}
 html[data-theme="dark"] .tg-falling:not([data-otk-paper],[data-otk-paper] *){background:#212121;box-shadow:0 0 0 1px #353535,0 10px 24px -8px rgba(20,38,66,.25)}
 html[data-theme="dark"] .tg-falling .tg-ch:not([data-otk-paper],[data-otk-paper] *){color:#97a6bb}
 html[data-theme="dark"] .tg-falling .tg-ok:not([data-otk-paper],[data-otk-paper] *){color:#5ab980;background:none}
 html[data-theme="dark"] .tg-falling .tg-bad:not([data-otk-paper],[data-otk-paper] *){color:#f76455;background:#342524}
 html[data-theme="dark"] .tg-falling .tg-cursor:not([data-otk-paper],[data-otk-paper] *){background:#303030;color:#f6f6f6;box-shadow:0 3px 0 #0053e2}
 html[data-theme="dark"] .tg-falling.tg-danger:not([data-otk-paper],[data-otk-paper] *){background:#1d1d1d;box-shadow:0 0 0 1px #673d3a,0 10px 24px -8px rgba(200,55,45,.3)}
 html[data-theme="dark"] .tg-next-words:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-gauge-unit:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-gauge-rank:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#abc8fb}
 html[data-theme="dark"] .tg-rank-bars i:not([data-otk-paper],[data-otk-paper] *){background:#424242}
 html[data-theme="dark"] .tg-rank-bars i.tg-bar-on:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg-lane:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-lane:not([data-otk-paper],[data-otk-paper] *)::before{border-top:1.5px dashed #3f3f3f}
 html[data-theme="dark"] .tg-lane-you:not([data-otk-paper],[data-otk-paper] *){background:#292929;box-shadow:inset 0 0 0 1px rgba(0,83,226,.28)}
 html[data-theme="dark"] .tg-lane-you:not([data-otk-paper],[data-otk-paper] *)::before{border-color:rgba(0,83,226,.25)}
 html[data-theme="dark"] .tg-lane-name:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-runner:not([data-otk-paper],[data-otk-paper] *){background:#212121;box-shadow:0 0 0 1px #3f3f3f,0 2px 6px rgba(20,38,66,.08);color:#f6f6f6}
 html[data-theme="dark"] .tg-lane-you .tg-runner:not([data-otk-paper],[data-otk-paper] *){background:#0053e2;color:#fff;box-shadow:0 4px 10px -2px rgba(0,83,226,.45)}
 html[data-theme="dark"] .tg-flag:not([data-otk-paper],[data-otk-paper] *){color:#8ea0b8}
 html[data-theme="dark"] .tg-beat:not([data-otk-paper],[data-otk-paper] *){background:radial-gradient(circle,#212121 0%,#292929 100%);box-shadow:inset 0 0 0 1px #353535,0 10px 24px -12px rgba(0,83,226,.35)}
 html[data-theme="dark"] .tg-beat.tg-pulsing:not([data-otk-paper],[data-otk-paper] *)::after{border:3px solid #0053e2}
 html[data-theme="dark"] .tg-beat-core:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-judge-perfect:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-judge-good:not([data-otk-paper],[data-otk-paper] *){color:#5ab980}
 html[data-theme="dark"] .tg-judge-off:not([data-otk-paper],[data-otk-paper] *){color:#f76455}
 html[data-theme="dark"] .tg .tg-level:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#f6f6f6}
 html[data-theme="dark"] .tg .tg-level:hover:not([data-otk-paper],[data-otk-paper] *){background:#313131}
 html[data-theme="dark"] .tg .tg-level-on:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#80abf7}
 html[data-theme="dark"] .tg-star:not([data-otk-paper],[data-otk-paper] *){color:#cfd8e5}
 html[data-theme="dark"] .tg-star-on:not([data-otk-paper],[data-otk-paper] *){color:#e39b12}
 html[data-theme="dark"] .tg-star-on svg:not([data-otk-paper],[data-otk-paper] *){fill:currentColor}
 html[data-theme="dark"] .tg-bigkey strong:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#212121 0%,#191919 100%);color:#f6f6f6;box-shadow:0 0 0 1px rgba(20,38,66,.1),0 3px 0 1px rgba(20,38,66,.07),0 24px 40px -20px rgba(20,38,66,.4),inset 0 -3px 0 rgba(20,38,66,.04)}
 html[data-theme="dark"] .tg-bigkey-wide strong:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-bigkey strong .tg-icon svg:not([data-otk-paper],[data-otk-paper] *){color:#5ab980}
 html[data-theme="dark"] .tg-bigkey span:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-bigkey-name:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-finger:not([data-otk-paper],[data-otk-paper] *){background:#313131}
 html[data-theme="dark"] .tg-finger-on:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg-rung:not([data-otk-paper],[data-otk-paper] *){background:#191919;color:#ababab}
 html[data-theme="dark"] .tg-rung-now:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#80abf7;box-shadow:inset 0 0 0 1px rgba(0,83,226,.3)}
 html[data-theme="dark"] .tg-rung-done:not([data-otk-paper],[data-otk-paper] *){background:#212121;box-shadow:inset 0 0 0 1px #353535;color:#5ab980}
 html[data-theme="dark"] .tg-keys:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#191919 0%,#2d2d2d 100%);box-shadow:inset 0 1px 0 rgba(33,33,33,0.9),0 0 0 1px #3a3a3a,0 22px 44px -26px rgba(20,38,66,.45)}
 html[data-theme="dark"] .tg-key:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#212121 0%,#1d1d1d 100%);box-shadow:0 0 0 1px rgba(20,38,66,.1),0 1px 0 1px rgba(20,38,66,.05),0 2px 3px rgba(20,38,66,.07),inset 0 -1.5px 0 rgba(20,38,66,.04);color:#dbdbdb}
 html[data-theme="dark"] .tg-mod:not([data-otk-paper],[data-otk-paper] *){color:#7c8ca4}
 html[data-theme="dark"] .tg-home:not([data-otk-paper],[data-otk-paper] *)::after{background:#4f6077}
 html[data-theme="dark"] .tg-key-zone:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#1d1d1d 0%,#292929 100%);color:#abc8fb}
 html[data-theme="dark"] .tg-key-next:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#506486 0%,#0053e2 100%);color:#fff;box-shadow:0 0 0 1px #0047c4,0 6px 14px -4px rgba(0,83,226,.55),inset 0 1px 0 rgba(33,33,33,0.25)}
 html[data-theme="dark"] .tg-key-next.tg-mod:not([data-otk-paper],[data-otk-paper] *){color:#fff}
 html[data-theme="dark"] .tg-key-next.tg-home:not([data-otk-paper],[data-otk-paper] *)::after{background:rgba(33,33,33,0.85)}
 html[data-theme="dark"] .tg-key-wrong:not([data-otk-paper],[data-otk-paper] *){background:linear-gradient(180deg,#191919 0%,#402927 100%);color:#f76455;box-shadow:0 0 0 1px rgba(200,55,45,.35),0 2px 3px rgba(200,55,45,.15)}
 html[data-theme="dark"] .tg-key-press:not([data-otk-paper],[data-otk-paper] *){box-shadow:0 0 0 1px rgba(20,38,66,.12),inset 0 1px 2px rgba(20,38,66,.1);background:#292929}
 html[data-theme="dark"] .tg-finger-hint:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg .tg-button:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#f6f6f6}
 html[data-theme="dark"] .tg .tg-button:hover:not([data-otk-paper],[data-otk-paper] *){background:#313131;color:#f6f6f6}
 html[data-theme="dark"] .tg .tg-button .tg-icon:not([data-otk-paper],[data-otk-paper] *){color:#b2b2b2}
 html[data-theme="dark"] .tg .tg-primary:not([data-otk-paper],[data-otk-paper] *),
html[data-theme="dark"] .tg .tg-primary:hover:not([data-otk-paper],[data-otk-paper] *){color:#fff}
 html[data-theme="dark"] .tg .tg-primary:not([data-otk-paper],[data-otk-paper] *){background:#0053e2}
 html[data-theme="dark"] .tg .tg-primary:hover:not([data-otk-paper],[data-otk-paper] *){background:#003fac}
 html[data-theme="dark"] .tg .tg-primary .tg-icon:not([data-otk-paper],[data-otk-paper] *){color:#fff}
 html[data-theme="dark"] .tg .tg-next .tg-icon:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg .tg-button[aria-pressed=true] .tg-icon:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-options:not([data-otk-paper],[data-otk-paper] *),
html[data-theme="dark"] .tg-details:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-check label:not([data-otk-paper],[data-otk-paper] *){color:#d4d4d4}
 html[data-theme="dark"] .tg-help:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-save:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-save .tg-button:not([data-otk-paper],[data-otk-paper] *){background:#212121}
 html[data-theme="dark"] .tg-save .tg-button:hover:not([data-otk-paper],[data-otk-paper] *){background:#313131}
 html[data-theme="dark"] .tg-more-card:not([data-otk-paper],[data-otk-paper] *){background:#191919;color:#f6f6f6}
 html[data-theme="dark"] .tg-more-card:hover:not([data-otk-paper],[data-otk-paper] *){background:#292929;color:#f6f6f6}
 html[data-theme="dark"] .tg-more-icon:not([data-otk-paper],[data-otk-paper] *){background:#212121;color:#80abf7}
 html[data-theme="dark"] .tg-more-text:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-more-arrow:not([data-otk-paper],[data-otk-paper] *){color:#7d94b2}
 html[data-theme="dark"] .tg-result-card:not([data-otk-paper],[data-otk-paper] *){border:1px solid #696969;background:#212121;box-shadow:0 2px 5px rgba(23,58,96,.03)}
 html[data-theme="dark"] .tg-result-big span:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-rank:not([data-otk-paper],[data-otk-paper] *){background:#292929}
 html[data-theme="dark"] .tg-rank strong:not([data-otk-paper],[data-otk-paper] *){color:#f6f6f6}
 html[data-theme="dark"] .tg-rank-next:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-result-grid div:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-result-grid span:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-result-xp strong:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-result-xp span:not([data-otk-paper],[data-otk-paper] *){color:#ababab}
 html[data-theme="dark"] .tg-ribbon:not([data-otk-paper],[data-otk-paper] *){background:#191919}
 html[data-theme="dark"] .tg-ribbon .tg-icon:not([data-otk-paper],[data-otk-paper] *){color:#80abf7}
 html[data-theme="dark"] .tg-details th:not([data-otk-paper],[data-otk-paper] *),
html[data-theme="dark"] .tg-details td:not([data-otk-paper],[data-otk-paper] *){border-bottom:1px solid #393939}
}
/* dark-mode:end */