/* Team personality game (landing, host big screen, phones) */

/* ---- Landing ---- */
.ts-hero { background: linear-gradient(135deg, #312e81 0%, #6d28d9 55%, #db2777 100%); color: #fff; border-radius: 20px; padding: 1.8rem 1.6rem; }
.ts-hero .lead, .seo-article .ts-hero .lead, .seo-article .ts-hero p { color: #ede9fe; }
.ts-hero h1, .seo-article .ts-hero h1 { color: #fff; }
.ts-code-input::placeholder { color: #cbd5e1; font-weight: 600; }
.ts-hero-emojis { font-size: 1.9rem; letter-spacing: .25rem; margin-bottom: .6rem; }
.ts-hero-emojis span { display: inline-block; animation: ts-bob 2.4s ease-in-out infinite; }
.ts-hero-emojis span:nth-child(2n) { animation-delay: .4s; }
.ts-hero-emojis span:nth-child(3n) { animation-delay: .8s; }
.ts-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.3rem; box-shadow: 0 6px 20px rgba(15, 23, 42, .05); }
.ts-code-input { text-transform: uppercase; letter-spacing: .35rem; font-weight: 700; text-align: center; font-size: 1.6rem; }
.ts-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.ts-steps li { display: flex; gap: .8rem; align-items: flex-start; background: #f8fafc; border-radius: 12px; padding: .8rem 1rem; }
.ts-step-n { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: #6d28d9; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ts-trait-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.ts-chip { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 12px; padding: .6rem .8rem; display: flex; flex-direction: column; }
.ts-chip span { color: #5b21b6; font-size: .9rem; }

/* ---- Big screen ---- */
body.ts-stage { min-height: 100vh; margin: 0; color: #fff; background: radial-gradient(circle at 20% 10%, #4c1d95 0%, #1e1b4b 45%, #0f172a 100%); display: flex; flex-direction: column; overflow-x: hidden; font-size: 18px; }
.ts-topbar { display: flex; justify-content: space-between; padding: 14px 28px; color: #c4b5fd; font-weight: 600; }
.ts-team { color: #fff; }
.ts-lobby { flex: 1; display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.1fr; gap: 32px; padding: 10px 32px 20px; align-items: start; }
.ts-joinbox { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 24px; padding: 28px; text-align: center; }
.ts-join-title { font-size: 2.2rem; font-weight: 800; margin: 0 0 .4rem; }
.ts-join-url { font-size: 1.2rem; color: #ddd6fe; margin-bottom: 1rem; }
.ts-join-url strong { color: #fff; }
.ts-bigcode { display: flex; justify-content: center; gap: 10px; margin: 8px 0 18px; }
.ts-bigcode span { width: 64px; height: 84px; border-radius: 14px; background: #fff; color: #1e1b4b; font-size: 3rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 #a78bfa; }
.ts-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ts-qr-label { color: #c4b5fd; }
.ts-qr { width: 190px; height: 190px; background: #fff; border-radius: 14px; padding: 8px; }
.ts-qr svg { width: 100%; height: 100%; display: block; }
.ts-room { min-height: 60vh; display: flex; flex-direction: column; }
.ts-counters { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.ts-waiting { color: #c4b5fd; font-size: 1.3rem; animation: ts-pulse 1.6s ease-in-out infinite; }
.ts-members { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.ts-member { position: relative; background: rgba(255,255,255,.1); border-radius: 18px; padding: 10px 14px; display: flex; flex-direction: column; align-items: center; min-width: 96px; }
.ts-member-emoji { font-size: 2.6rem; line-height: 1.1; }
.ts-member-name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-member.done::after { content: '✓'; position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: #22c55e; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.ts-room-actions { margin-top: auto; padding-top: 24px; }
.ts-reveal-btn { font-size: 1.4rem; font-weight: 800; padding: .7rem 1.6rem; border-radius: 14px; }
.ts-need { color: #c4b5fd; margin: .5rem 0 0; }
.ts-show { flex: 1; display: flex; flex-direction: column; padding: 0 32px 10px; }
.ts-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.ts-slide.ts-in { opacity: 1; transform: none; }
.ts-slide-title { font-size: 3rem; font-weight: 800; margin: 0 0 .3rem; }
.ts-slide-sub { color: #c4b5fd; font-size: 1.4rem; margin: 0 0 1.4rem; }
.ts-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.ts-dots { display: flex; gap: 8px; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); }
.ts-dot.on { background: #fbbf24; }
.ts-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 10px; }
.ts-footer .btn-link { color: #a5b4fc; }
.ts-av { display: inline-flex; flex-direction: column; align-items: center; }
.ts-av-emoji { font-size: 2.4rem; line-height: 1.1; }
.ts-av-name { font-weight: 700; font-size: .95rem; background: rgba(15,23,42,.65); border-radius: 8px; padding: 0 6px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-meet { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; max-width: 1100px; }
.ts-meet .ts-av-emoji { font-size: 4rem; }
.ts-scale { width: min(1150px, 94vw); margin-top: 1.5rem; }
.ts-scale-track { position: relative; height: 300px; border-bottom: 6px solid rgba(255,255,255,.5); background: linear-gradient(90deg, rgba(96,165,250,.18), rgba(167,139,250,.08), rgba(244,114,182,.18)); border-radius: 16px 16px 0 0; }
.ts-on-track { position: absolute; transform: translateX(-50%); }
.ts-on-track .ts-av-emoji { font-size: 3rem; }
.ts-row-0 { bottom: 8px; } .ts-row-1 { bottom: 72px; } .ts-row-2 { bottom: 136px; } .ts-row-3 { bottom: 200px; } .ts-row-4 { bottom: 264px; } .ts-row-5 { bottom: 264px; }
.ts-avg { position: absolute; bottom: -6px; top: 0; width: 0; border-left: 3px dashed #fbbf24; }
.ts-scale-ends { display: flex; justify-content: space-between; font-size: 1.4rem; font-weight: 700; margin-top: 10px; }
.ts-end-low { color: #93c5fd; } .ts-end-high { color: #f9a8d4; }
.ts-teamis { font-size: 1.4rem; color: #c4b5fd; margin: 0; }
.ts-teamtype { font-size: 3.4rem; font-weight: 900; background: linear-gradient(90deg, #fde68a, #f9a8d4, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem; }
.ts-avgbars { width: min(720px, 90vw); display: grid; gap: 8px; margin-bottom: 1rem; }
.ts-avgbar { display: grid; grid-template-columns: 220px 1fr 50px; align-items: center; gap: 12px; text-align: left; }
.ts-avgbar-track { height: 14px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.ts-avgbar-fill { height: 100%; background: linear-gradient(90deg, #60a5fa, #f472b6); border-radius: 999px; }
.ts-avgbar-val { font-weight: 700; }
.ts-notes { text-align: left; max-width: 900px; font-size: 1.25rem; }
.ts-notes li { margin-bottom: .4rem; }
.ts-guesses { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 20px; width: min(1150px, 94vw); }
.ts-guess { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 18px; }
.ts-guess-q { font-size: 1.3rem; font-weight: 700; }
.ts-guess-row { display: flex; align-items: center; justify-content: space-around; gap: 10px; }
.ts-guess-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ts-guess-label { color: #c4b5fd; font-size: .95rem; }
.ts-guess-vs { font-size: 2.2rem; }
.ts-guess-right { color: #86efac; font-weight: 700; margin: .6rem 0 0; }
.ts-guess-none { color: #94a3b8; }
.ts-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; width: min(1150px, 94vw); }
.ts-award { background: linear-gradient(160deg, rgba(251,191,36,.25), rgba(255,255,255,.06)); border: 1px solid rgba(251,191,36,.5); border-radius: 20px; padding: 16px; }
.ts-award-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.ts-talk { text-align: left; font-size: 1.8rem; max-width: 1000px; }
.ts-talk li { margin-bottom: 1rem; }
.ts-thanks { font-size: 1.6rem; color: #fde68a; font-weight: 700; }

/* ---- Phone ---- */
body.ts-phone { min-height: 100vh; margin: 0; background: linear-gradient(180deg, #312e81 0%, #6d28d9 100%); }
.ts-phone-main { max-width: 520px; margin: 0 auto; padding: 14px 14px max(20px, env(safe-area-inset-bottom)); }
.ts-phone-brand { color: #ddd6fe; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
.ts-phone-team { color: #fff; font-weight: 700; font-size: 1.2rem; margin: 0 0 8px; }
.ts-pcard { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.ts-emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ts-emoji input { position: absolute; opacity: 0; pointer-events: none; }
.ts-emoji span { display: flex; align-items: center; justify-content: center; font-size: 1.9rem; height: 54px; border-radius: 14px; background: #f5f3ff; border: 2px solid transparent; cursor: pointer; }
.ts-emoji input:checked + span { border-color: #6d28d9; background: #ede9fe; transform: scale(1.06); }
.ts-emoji input:focus-visible + span { outline: 2px solid #1d4ed8; }
.ts-qprogress { margin-bottom: 10px; color: #475569; font-weight: 600; font-size: .9rem; }
.ts-qtrack { height: 8px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin-top: 4px; }
.ts-qfill { height: 100%; background: linear-gradient(90deg, #6d28d9, #db2777); border-radius: 999px; transition: width .3s; }
.ts-qtext { font-size: 1.35rem; font-weight: 700; min-height: 3.4em; }
.ts-qopts { display: grid; gap: 8px; }
.ts-qopt { border: 1px solid #ddd6fe; background: #f8fafc; border-radius: 14px; padding: 13px; font-weight: 600; font-size: 1.05rem; }
.ts-qopt.on, .ts-qopt:active { background: #6d28d9; color: #fff; border-color: #6d28d9; }
.ts-wait-emoji { font-size: 4.5rem; animation: ts-bob 1.8s ease-in-out infinite; }
.ts-my-awards { display: grid; gap: 8px; margin-top: 8px; }
.ts-my-award { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 12px; padding: 10px; font-weight: 800; text-align: center; }
.ts-pbar { margin-bottom: 10px; }
.ts-pbar-head { display: flex; justify-content: space-between; }
.ts-pbar-ends { display: flex; justify-content: space-between; color: #64748b; font-size: .8rem; }

/* ---- Animations ---- */
@keyframes ts-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ts-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes ts-popin { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ts-dropin { 0% { opacity: 0; margin-bottom: 120px; } 100% { opacity: 1; margin-bottom: 0; } }
@keyframes ts-flipin { 0% { transform: rotateY(90deg); opacity: 0; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes ts-fall { 0% { transform: translateY(-10vh) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: .8; } }
.ts-pop { animation: ts-popin .55s ease both; }
.ts-drop { animation: ts-dropin .7s ease both; }
.ts-flip { animation: ts-flipin .6s ease both; }
.ts-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.ts-cf { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: ts-fall 3.2s linear both; }
.ts-cf-c0 { background: #fbbf24; } .ts-cf-c1 { background: #f472b6; } .ts-cf-c2 { background: #60a5fa; } .ts-cf-c3 { background: #34d399; } .ts-cf-c4 { background: #a78bfa; } .ts-cf-c5 { background: #fb7185; }
.ts-cs-1 { animation-duration: 2.6s; } .ts-cs-2 { animation-duration: 3.8s; }
@media (prefers-reduced-motion: reduce) { .ts-pop, .ts-drop, .ts-flip, .ts-cf, .ts-hero-emojis span, .ts-wait-emoji, .ts-waiting { animation: none !important; } .ts-confetti { display: none; } }

@media (max-width: 900px) {
    .ts-lobby { grid-template-columns: 1fr; }
    .ts-guesses { grid-template-columns: 1fr; }
    .ts-slide-title { font-size: 2rem; }
    .ts-teamtype { font-size: 2.2rem; }
    .ts-avgbar { grid-template-columns: 130px 1fr 40px; }
    .ts-bigcode span { width: 46px; height: 62px; font-size: 2.2rem; }
}

/* positions, widths and delays as classes (the CSP allows no inline styles) */
.ts-l-0{left:0%}.ts-l-1{left:1%}.ts-l-2{left:2%}.ts-l-3{left:3%}.ts-l-4{left:4%}.ts-l-5{left:5%}.ts-l-6{left:6%}.ts-l-7{left:7%}.ts-l-8{left:8%}.ts-l-9{left:9%}.ts-l-10{left:10%}.ts-l-11{left:11%}.ts-l-12{left:12%}.ts-l-13{left:13%}.ts-l-14{left:14%}.ts-l-15{left:15%}.ts-l-16{left:16%}.ts-l-17{left:17%}.ts-l-18{left:18%}.ts-l-19{left:19%}.ts-l-20{left:20%}.ts-l-21{left:21%}.ts-l-22{left:22%}.ts-l-23{left:23%}.ts-l-24{left:24%}.ts-l-25{left:25%}.ts-l-26{left:26%}.ts-l-27{left:27%}.ts-l-28{left:28%}.ts-l-29{left:29%}.ts-l-30{left:30%}.ts-l-31{left:31%}.ts-l-32{left:32%}.ts-l-33{left:33%}.ts-l-34{left:34%}.ts-l-35{left:35%}.ts-l-36{left:36%}.ts-l-37{left:37%}.ts-l-38{left:38%}.ts-l-39{left:39%}.ts-l-40{left:40%}.ts-l-41{left:41%}.ts-l-42{left:42%}.ts-l-43{left:43%}.ts-l-44{left:44%}.ts-l-45{left:45%}.ts-l-46{left:46%}.ts-l-47{left:47%}.ts-l-48{left:48%}.ts-l-49{left:49%}.ts-l-50{left:50%}.ts-l-51{left:51%}.ts-l-52{left:52%}.ts-l-53{left:53%}.ts-l-54{left:54%}.ts-l-55{left:55%}.ts-l-56{left:56%}.ts-l-57{left:57%}.ts-l-58{left:58%}.ts-l-59{left:59%}.ts-l-60{left:60%}.ts-l-61{left:61%}.ts-l-62{left:62%}.ts-l-63{left:63%}.ts-l-64{left:64%}.ts-l-65{left:65%}.ts-l-66{left:66%}.ts-l-67{left:67%}.ts-l-68{left:68%}.ts-l-69{left:69%}.ts-l-70{left:70%}.ts-l-71{left:71%}.ts-l-72{left:72%}.ts-l-73{left:73%}.ts-l-74{left:74%}.ts-l-75{left:75%}.ts-l-76{left:76%}.ts-l-77{left:77%}.ts-l-78{left:78%}.ts-l-79{left:79%}.ts-l-80{left:80%}.ts-l-81{left:81%}.ts-l-82{left:82%}.ts-l-83{left:83%}.ts-l-84{left:84%}.ts-l-85{left:85%}.ts-l-86{left:86%}.ts-l-87{left:87%}.ts-l-88{left:88%}.ts-l-89{left:89%}.ts-l-90{left:90%}.ts-l-91{left:91%}.ts-l-92{left:92%}.ts-l-93{left:93%}.ts-l-94{left:94%}.ts-l-95{left:95%}.ts-l-96{left:96%}.ts-l-97{left:97%}.ts-l-98{left:98%}.ts-l-99{left:99%}.ts-l-100{left:100%}
.ts-w-0{width:0%}.ts-w-1{width:1%}.ts-w-2{width:2%}.ts-w-3{width:3%}.ts-w-4{width:4%}.ts-w-5{width:5%}.ts-w-6{width:6%}.ts-w-7{width:7%}.ts-w-8{width:8%}.ts-w-9{width:9%}.ts-w-10{width:10%}.ts-w-11{width:11%}.ts-w-12{width:12%}.ts-w-13{width:13%}.ts-w-14{width:14%}.ts-w-15{width:15%}.ts-w-16{width:16%}.ts-w-17{width:17%}.ts-w-18{width:18%}.ts-w-19{width:19%}.ts-w-20{width:20%}.ts-w-21{width:21%}.ts-w-22{width:22%}.ts-w-23{width:23%}.ts-w-24{width:24%}.ts-w-25{width:25%}.ts-w-26{width:26%}.ts-w-27{width:27%}.ts-w-28{width:28%}.ts-w-29{width:29%}.ts-w-30{width:30%}.ts-w-31{width:31%}.ts-w-32{width:32%}.ts-w-33{width:33%}.ts-w-34{width:34%}.ts-w-35{width:35%}.ts-w-36{width:36%}.ts-w-37{width:37%}.ts-w-38{width:38%}.ts-w-39{width:39%}.ts-w-40{width:40%}.ts-w-41{width:41%}.ts-w-42{width:42%}.ts-w-43{width:43%}.ts-w-44{width:44%}.ts-w-45{width:45%}.ts-w-46{width:46%}.ts-w-47{width:47%}.ts-w-48{width:48%}.ts-w-49{width:49%}.ts-w-50{width:50%}.ts-w-51{width:51%}.ts-w-52{width:52%}.ts-w-53{width:53%}.ts-w-54{width:54%}.ts-w-55{width:55%}.ts-w-56{width:56%}.ts-w-57{width:57%}.ts-w-58{width:58%}.ts-w-59{width:59%}.ts-w-60{width:60%}.ts-w-61{width:61%}.ts-w-62{width:62%}.ts-w-63{width:63%}.ts-w-64{width:64%}.ts-w-65{width:65%}.ts-w-66{width:66%}.ts-w-67{width:67%}.ts-w-68{width:68%}.ts-w-69{width:69%}.ts-w-70{width:70%}.ts-w-71{width:71%}.ts-w-72{width:72%}.ts-w-73{width:73%}.ts-w-74{width:74%}.ts-w-75{width:75%}.ts-w-76{width:76%}.ts-w-77{width:77%}.ts-w-78{width:78%}.ts-w-79{width:79%}.ts-w-80{width:80%}.ts-w-81{width:81%}.ts-w-82{width:82%}.ts-w-83{width:83%}.ts-w-84{width:84%}.ts-w-85{width:85%}.ts-w-86{width:86%}.ts-w-87{width:87%}.ts-w-88{width:88%}.ts-w-89{width:89%}.ts-w-90{width:90%}.ts-w-91{width:91%}.ts-w-92{width:92%}.ts-w-93{width:93%}.ts-w-94{width:94%}.ts-w-95{width:95%}.ts-w-96{width:96%}.ts-w-97{width:97%}.ts-w-98{width:98%}.ts-w-99{width:99%}.ts-w-100{width:100%}
.ts-d0{animation-delay:0.00s}.ts-d1{animation-delay:0.12s}.ts-d2{animation-delay:0.24s}.ts-d3{animation-delay:0.36s}.ts-d4{animation-delay:0.48s}.ts-d5{animation-delay:0.60s}.ts-d6{animation-delay:0.72s}.ts-d7{animation-delay:0.84s}.ts-d8{animation-delay:0.96s}.ts-d9{animation-delay:1.08s}.ts-d10{animation-delay:1.20s}.ts-d11{animation-delay:1.32s}.ts-d12{animation-delay:1.44s}.ts-d13{animation-delay:1.56s}.ts-d14{animation-delay:1.68s}.ts-d15{animation-delay:1.80s}.ts-d16{animation-delay:1.92s}.ts-d17{animation-delay:2.04s}.ts-d18{animation-delay:2.16s}.ts-d19{animation-delay:2.28s}.ts-d20{animation-delay:2.40s}
.ts-cd-0{animation-delay:0.00s}.ts-cd-1{animation-delay:0.18s}.ts-cd-2{animation-delay:0.36s}.ts-cd-3{animation-delay:0.54s}.ts-cd-4{animation-delay:0.72s}.ts-cd-5{animation-delay:0.90s}.ts-cd-6{animation-delay:1.08s}.ts-cd-7{animation-delay:1.26s}.ts-cd-8{animation-delay:1.44s}.ts-cd-9{animation-delay:1.62s}