/* THE LOOP (assets/loop.js): the start screen, the ring (the ∞ loop), playing at home, class mode, results. */
:root{--tl-a:#4F46E5;--tl-b:#A855F7;--tl-bt:#9333EA;--tl-ink:#1E1B3A;--tl-lav:#EEEBFF;--tl-lav2:#F6F4FF;--tl-line:#DCD6FB;--tl-bad:#C2364B;--tl-badbg:#FDECEF}

/* hub page */
.tl-hero{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:center}
.tl-hero h1,.tl-intro h1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.tl-mark{width:84px;height:42px;flex:0 0 auto}
.tl-intro h1 .tl-mark{width:64px;height:32px}
.tl-hero-img{width:100%;max-width:240px;height:auto;justify-self:center}
.tl-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tl-lv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 12px;padding:14px 16px;border-radius:18px;background:#fff;border:1.5px solid var(--tl-line);text-decoration:none;color:var(--tl-ink);transition:border-color .2s,transform .2s var(--ease-out,ease)}
.tl-lv b{font-family:var(--display);font-size:22px;color:var(--tl-a)}.tl-lv span{font-weight:700;font-size:14px}.tl-lv i{font-style:normal;color:var(--tl-a);font-weight:800}
@media(hover:hover){.tl-lv:hover{border-color:var(--tl-a);transform:translateY(-2px)}}
.tl-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 18px}
.tl-mode{display:block;padding:20px;border-radius:22px;background:linear-gradient(160deg,#fff,var(--tl-lav2));border:1px solid var(--tl-line);text-decoration:none;color:var(--tl-ink)}
.tl-mode h3{margin:10px 0 6px;font-size:18px}.tl-mode p{margin:0;color:var(--muted);line-height:1.55;font-size:15px}.tl-ic{font-size:26px}
.tl-how ol{margin:0;padding-left:20px;line-height:1.7}.tl-how li{margin-bottom:6px}
.tl-teach{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}.tl-teach img{width:150px;height:auto}.tl-teach p{line-height:1.6}
.tl-faq-g{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}.tl-faq-g h3{margin:0 0 4px;font-size:16px}.tl-faq-g p{margin:0;color:var(--muted);line-height:1.55}
@media(max-width:760px){.tl-hero{grid-template-columns:1fr}.tl-hero-img{display:none}.tl-levels,.tl-modes{grid-template-columns:1fr}.tl-teach{grid-template-columns:1fr}.tl-teach img{display:none}.tl-faq-g{grid-template-columns:1fr}}

/* start screen */
.tl-setup h2{margin:18px 0 8px}.tl-setup h3{margin:16px 0 8px;font-size:15px;color:var(--muted)}
.tl-seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--tl-lav);width:max-content;max-width:100%}.tl-modes-pick{width:100%;max-width:520px}.tl-modes-pick button{flex:1 1 0;padding:8px 6px}
.tl-seg button{flex:0 0 auto;min-height:44px;padding:8px 16px;border:0;border-radius:12px;background:none;font:inherit;font-weight:800;font-size:15px;color:#4a4670;cursor:pointer;touch-action:manipulation;transition:background-color .15s,color .15s}
.tl-seg button[aria-pressed=true]{background:#fff;color:var(--tl-a);box-shadow:0 2px 8px #4f46e522}
.tl-seg-s button{min-height:38px;padding:6px 12px;font-size:14px}
.tl-chips{display:flex;flex-wrap:wrap;gap:6px}
.tl-chip{min-height:42px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--tl-line);background:#fff;font:inherit;font-weight:700;font-size:14.5px;color:var(--tl-ink);cursor:pointer;touch-action:manipulation}
.tl-chip[aria-pressed=true]{background:var(--tl-a);border-color:var(--tl-a);color:#fff}
.tl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:12px}
.tl-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:16px;border:1.5px solid var(--tl-line);background:#fff;font:inherit;text-align:left;color:var(--tl-ink);cursor:pointer;touch-action:manipulation}
.tl-card b{font-size:15.5px}.tl-card span{font-size:13px;color:var(--muted);font-weight:600}.tl-card[aria-pressed=true]{border-color:var(--tl-a);background:var(--tl-lav2);box-shadow:0 0 0 3px #4f46e51f}
.tl-go{margin-top:18px;min-height:52px;font-size:17px;padding:12px 26px}
.tl-hw{margin:0 0 8px;padding:10px 14px;border-radius:12px;background:#fff7e6;color:#7a4b00;font-weight:700}
.tl-done{font-weight:800;color:var(--good)}
.tl-teams{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.tl-teams label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.tl-teams input{min-height:46px;border:1.5px solid var(--tl-line);border-radius:12px;padding:8px 12px;font:inherit;font-size:16px}
.tl-check{display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700;cursor:pointer}.tl-check input{width:22px;height:22px;accent-color:var(--tl-a)}
.tl-keys{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:14px;color:var(--muted)}.tl-keys small{flex-basis:100%}
.tl-keys kbd{display:inline-block;padding:2px 7px;border-radius:7px;border:1px solid var(--tl-line);border-bottom-width:2px;background:#fff;font:inherit;font-size:12.5px;font-weight:800;color:var(--tl-ink)}
.tl-words{display:inline-block;margin-top:16px;font-weight:800;color:var(--tl-a)}
.tl-copied{min-height:1.2em;font-weight:700}

/* the ring */
.tl-ring{position:relative;container-type:inline-size;width:100%;margin:0 auto;user-select:none;-webkit-user-select:none}
.tl-ring svg{display:block;width:100%;height:auto;overflow:visible}
.tl-track{fill:none;stroke:var(--tl-line);stroke-width:4}
.tl-chev{fill:none;stroke:var(--tl-b);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.tl-gap{fill:var(--tl-line)}
.tl-dot{fill:var(--tl-lav);stroke:#cfc7fb;stroke-width:2;transition:fill .25s,stroke .25s}
.tl-ch{font:800 26px/1 var(--display,system-ui);fill:var(--tl-a);transition:fill .25s}
.tl-x{stroke:var(--tl-bad);stroke-width:3;stroke-linecap:round;opacity:0}
.tl-halo{fill:none;stroke:var(--tl-a);stroke-width:3;opacity:0}
.tl-b{transition:transform .25s}
.s-ok .tl-dot{fill:var(--tl-a);stroke:var(--tl-a)}.s-ok .tl-ch{fill:#fff}
.s-bad .tl-dot{fill:var(--tl-badbg);stroke:var(--tl-bad)}.s-bad .tl-ch{fill:var(--tl-bad)}.s-bad .tl-x{opacity:.85}
.s-pass .tl-dot{fill:#fff;stroke:var(--tl-b);stroke-dasharray:6 5;stroke-width:3}.s-pass .tl-ch{fill:var(--tl-b)}
.cur .tl-dot{fill:#fff;stroke:var(--tl-a);stroke-width:5;stroke-dasharray:none}.cur .tl-ch{fill:var(--tl-ink)}
.cur .tl-halo{opacity:.35;animation:tl-breathe 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.cur>.tl-dot,.cur>.tl-ch,.cur>.tl-halo{transform:scale(1.25)}
@keyframes tl-breathe{50%{opacity:.08;transform:scale(1.18)}}
.tl-big{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.tl-big.right{left:75%}
.tl-big b{font:900 15cqw/1 var(--display,system-ui);color:var(--tl-a);letter-spacing:-.02em}
.tl-big span{margin-top:.4cqw;font-weight:800;font-size:max(12px,2.2cqw);color:#6c66a8;text-transform:uppercase;letter-spacing:.06em}
.tl-hub{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.2cqw;padding:1.1cqw 1.8cqw;border-radius:2.2cqw;background:#fff;box-shadow:0 .6cqw 2.4cqw #2b1f7a1f;border:1px solid var(--tl-line)}
.tl-time{font:800 max(15px,4.4cqw)/1 var(--display,system-ui);color:var(--tl-ink);font-variant-numeric:tabular-nums}.tl-time.low{color:var(--tl-bad)}
.tl-pts{font-weight:800;font-size:max(11px,1.8cqw);color:var(--tl-a);white-space:nowrap}
.tl-masc{position:absolute;left:50%;top:44%;width:10cqw;max-height:14cqw;object-fit:contain;transform-origin:50% 100%;height:auto;transform:translate(-50%,-100%);pointer-events:none}
.tl-masc.pop{animation:tl-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes tl-pop{from{transform:translate(-50%,-100%) scale(.7)}}

/* playing at home */
.tl-game{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:20px;align-items:center}
.tl-card-q{margin:0}
.tl-qhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tl-ql{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tl-a);color:#fff;font:900 28px/1 var(--display,system-ui)}
.tl-qhow{font-weight:800;color:#5b55a0;text-transform:uppercase;letter-spacing:.05em;font-size:14px}.tl-lap{margin-left:auto;font-size:13px;font-weight:800;color:var(--tl-bt)}
.tl-def{font-size:clamp(19px,2.2vw,24px);line-height:1.45;font-weight:600;color:var(--tl-ink);margin:14px 0 16px;min-height:3em;text-wrap:pretty}
.tl-form{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.tl-in{min-width:0;min-height:52px;padding:10px 14px;border:2px solid var(--tl-line);border-radius:14px;font:inherit;font-size:19px;font-weight:700;color:var(--tl-ink);background:#fff}
.tl-in:focus{outline:none;border-color:var(--tl-a);box-shadow:0 0 0 4px #4f46e522}
.tl-form .btn{min-height:52px}.tl-pass{color:var(--tl-bt)!important;border-color:#e6d5fb!important}
.tl-fb{min-height:1.5em;margin:12px 0 0;font-size:15px;color:var(--muted)}.tl-fb.good b{color:var(--good)}.tl-fb.bad b{color:var(--tl-bad)}.tl-note{color:#6c5a00;background:#fff7d6;border-radius:6px;padding:0 4px}
.tl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:800;color:var(--muted);font-size:14px;white-space:pre}
.tl-end{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer;min-height:40px}
@media(max-width:860px){.tl-game{grid-template-columns:1fr;gap:12px}.tl-game .tl-ring{max-width:560px}}
@media(max-width:520px){.tl-def{margin:10px 0 12px;min-height:0;font-size:19px}.tl-ql{width:44px;height:44px;font-size:24px;border-radius:13px}.tl-form{grid-template-columns:1fr 1fr}.tl-in{grid-column:1/-1}.tl-card-q{padding:16px}.tl-fb{margin-top:8px}.tl-foot{margin-top:10px;padding-top:8px}}
@media(max-width:860px){.tl-playing .tl-intro,.tl-playing .crumb{display:none}}
/* phones with the keyboard open: a small loop, the definition in sight */
.tl-kb .tl-intro,.tl-kb .tl-how-s,.tl-kb header.top,.tl-kb .crumb{display:none}
.tl-kb .tl-game .tl-ring{max-width:min(100%,34vh)}.tl-kb .tl-foot,.tl-kb .tl-lap{display:none}.tl-kb .tl-game{gap:6px}.tl-kb .tl-card-q{padding:12px 14px}.tl-kb .tl-def{margin:6px 0 8px}.tl-kb .tl-ql{width:36px;height:36px;font-size:20px}
.tl-playing .tl-how-s{display:none}

/* results */
.tl-res{text-align:center}.tl-res-m{width:130px;height:auto}.tl-res h2{font:900 clamp(40px,8vw,64px)/1 var(--display,system-ui);color:var(--tl-a);margin:6px 0}
.tl-res-k{margin:6px 0 0;font-weight:800;color:var(--muted)}.tl-res-sub{font-weight:700;font-size:17px}.tl-row{font-size:18px;letter-spacing:2px;overflow-wrap:anywhere}
.tl-res-acts{justify-content:center}
.tl-missed{text-align:left;margin-top:22px}.tl-missed ul{list-style:none;padding:0;margin:0 0 14px}
.tl-missed li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl-missed li>*:not(.tl-ml){grid-column:2}.tl-ml{grid-row:span 4;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tl-lav);color:var(--tl-a);font-family:var(--display,system-ui)}
.tl-missed strong{font-size:17px}.tl-missed span{color:var(--tl-ink)}.tl-missed em{font-style:normal;font-size:14px;color:#6c5a00}.tl-missed small{color:var(--muted)}
.tl-cscore{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:14px 0}.tl-cscore div{display:flex;flex-direction:column;gap:2px;padding:14px 22px;border-radius:18px;background:var(--tl-lav2);border:1.5px solid var(--tl-line);min-width:160px}
.tl-cscore div.win{border-color:var(--tl-a);background:#fff;box-shadow:0 0 0 4px #4f46e51f}.tl-cscore strong{font:900 30px/1.1 var(--display,system-ui);color:var(--tl-a)}.tl-cscore span{color:var(--muted);font-weight:700;font-size:14px}
.tl-rev-n{font-weight:800;color:var(--muted)}.tl-rev-c{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.tl-rev-c .tl-def{flex-basis:100%}

/* class mode: the whole screen, made for a projector (16:9) */
body.tl-cl-on{overflow:hidden}
.tl-class{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr;gap:1.6vmin;padding:2vmin 2.4vmin;background:radial-gradient(circle at 20% 0%,#fff 0,var(--tl-lav2) 45%,var(--tl-lav) 100%);color:var(--tl-ink);overflow:hidden}
.tl-teams-bar{display:grid;grid-template-columns:1fr 1fr auto;gap:1.6vmin;align-items:stretch}
.tl-team{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2vmin;padding:1.4vmin 2.4vmin;border-radius:2.4vmin;background:#fffc;border:.35vmin solid transparent;transition:border-color .2s,opacity .2s}
.tl-team b{font:800 3.4vmin/1.1 var(--display,system-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-tt{font:800 4.4vmin/1 var(--display,system-ui);font-variant-numeric:tabular-nums}.tl-ts{font-weight:800;font-size:3vmin;color:var(--tl-a)}
.tl-team.on{border-color:var(--tl-a);background:#fff;box-shadow:0 .8vmin 2.6vmin #4f46e526}.tl-team:not(.on){opacity:.6}.tl-team.out{opacity:.45}
.tl-exit{width:7vmin;border:0;border-radius:2vmin;background:#fff9;font-size:3vmin;cursor:pointer;color:var(--muted)}
.tl-stage{display:grid;grid-template-columns:1.25fr 1fr;gap:3vmin;align-items:center;min-height:0}
.tl-cring{min-height:0;display:flex;justify-content:center;align-items:center}.tl-cring .tl-ring{width:min(100%,calc(78vh * 1000 / 540))}
.tl-side{display:flex;flex-direction:column;gap:2vmin;min-width:0}
.tl-class .tl-ql{width:12vmin;height:12vmin;border-radius:3vmin;font-size:7.4vmin}.tl-class .tl-qhow{font-size:3vmin}
.tl-class .tl-def{font-size:clamp(22px,4.6vmin,64px);line-height:1.3;font-weight:700;margin:0;min-height:0}
.tl-ans{min-height:1.2em;margin:0;font:800 5vmin/1.2 var(--display,system-ui);color:var(--tl-bt)}
.tl-kbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.6vmin}
.tl-k{min-height:11vmin;border:0;border-radius:2.4vmin;font:800 3.6vmin/1 var(--display,system-ui);cursor:pointer;touch-action:manipulation;color:#fff;transition:transform .12s}
.tl-k:active{transform:scale(.97)}.tl-k-ok{background:var(--tl-a)}.tl-k-bad{background:var(--tl-bad)}.tl-k-pass{background:#fff;color:var(--tl-bt);box-shadow:inset 0 0 0 .4vmin var(--tl-b)}
.tl-kmini{display:flex;gap:1.6vmin}.tl-kmini button{border:0;background:none;font:inherit;font-size:2.4vmin;font-weight:700;color:var(--muted);text-decoration:underline;cursor:pointer}
.tl-class.paused .tl-stage{filter:saturate(.6);opacity:.75}
.tl-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vmin;background:#f6f4ffe6;backdrop-filter:blur(4px);text-align:center;padding:4vmin}
.tl-over[hidden]{display:none}.tl-over b{font:900 9vmin/1.1 var(--display,system-ui);color:var(--tl-ink)}.tl-over span{font-size:4vmin;font-weight:700;color:var(--tl-a)}.tl-over .btn{font-size:3vmin;min-height:9vmin;padding:0 5vmin}
@media(max-aspect-ratio:1/1){.tl-stage{grid-template-columns:1fr}.tl-cring .tl-ring{width:min(100%,calc(40vh * 1000 / 540))}}

@media(prefers-reduced-motion:reduce){.cur .tl-halo,.tl-masc.pop{animation:none}.tl-b,.tl-dot,.tl-ch,.tl-lv,.tl-k{transition:none}}