/* CrAIme Time – rozhraní účastníka (index.html). Navrženo pro telefon (QR kód), funguje i na počítači.
   Obrazovky: vstup → čekání na výzvu → spis se zápisníkem → kvíz a výsledek. Sdílené části jsou ve style.css. */

.bar .brand{margin-right:auto}
/* přezdívka a stolek v liště: otevře profil s osobním kódem */
.who{display:flex;align-items:center;gap:8px;min-width:0;max-width:52vw;background:none;border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--fg)}
.who:hover{border-color:color-mix(in srgb,var(--signal) 55%,var(--line))}
.who-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.who-t{flex:none;background:var(--tape);color:#111;font-weight:600;border-radius:999px;padding:2px 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:400px){.bar .wrap{gap:8px}.brand{font-size:18px}.who{font-size:11px;padding-left:9px}}

.view{min-height:calc(100dvh - 57px)}
.narrow{max-width:760px}

/* ---------- 1. vstup ---------- */
.v-join{position:relative;isolation:isolate;overflow:hidden}
.v-join::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/hero.webp) center/cover no-repeat;opacity:.5}
.v-join::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 35%,transparent)),linear-gradient(0deg,var(--bg),transparent 45%)}
.v-join .wrap{max-width:760px;padding-block:clamp(36px,7vw,88px) 56px}
.v-join h1{font-size:clamp(64px,16vw,150px);font-weight:900;line-height:.82;margin-top:14px}
.v-join h1 .ai{color:var(--signal)}
.v-join .q{font-size:clamp(19px,2.4vw,26px);line-height:1.3;font-weight:500;max-width:30ch;margin:22px 0 26px;text-wrap:balance}
.msg{margin:0 0 18px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--tape) 55%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--tape) 8%,var(--panel));color:var(--fg);max-width:520px}
.join-card{display:flex;flex-direction:column;gap:10px;max-width:520px;padding:20px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(6px)}
.join-card label,.code-form label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.join-card input,.code-form input{font:inherit;font-size:18px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;width:100%;min-width:0}
.join-card input:focus,.code-form input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 18%,transparent)}
.join-card input[aria-invalid="true"],.code-form input[aria-invalid="true"]{border-color:var(--alarm)}
.join-card .cta{margin-top:6px;width:100%}
.join-card .note{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.alt{max-width:520px;margin-top:18px;font-size:14px}
.alt summary{cursor:pointer;color:var(--muted);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;padding:6px 0}
.alt summary:hover{color:var(--fg)}
.code-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.code-form .row{display:flex;gap:8px}
.code-form input{font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.code-form .ib{flex:none}

/* ---------- 2. čekání ---------- */
.v-wait .wrap{max-width:760px;padding-block:clamp(28px,6vw,64px) 56px}
.v-wait h2{font-size:clamp(40px,9vw,72px);margin:10px 0 20px}
.assign{border:1px solid color-mix(in srgb,var(--tape) 60%,var(--line));border-radius:4px 10px 10px 10px;background:var(--panel);overflow:hidden}
.assign .img{position:relative;aspect-ratio:16/7;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.assign .img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--panel),transparent 65%)}
.assign .num{position:absolute;right:16px;bottom:-6px;z-index:1;font-family:var(--f-display);font-weight:900;font-size:clamp(84px,22vw,140px);line-height:1;color:var(--tape);text-shadow:0 4px 24px rgba(0,0,0,.6)}
.assign .body{padding:12px 20px 20px;display:flex;flex-direction:column;gap:10px}
.assign h3{font-size:clamp(26px,5vw,36px)}
.assign p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.waiting{display:flex;gap:16px;align-items:flex-start;margin-top:20px;padding:16px 20px;border:1px dashed color-mix(in srgb,var(--signal) 50%,var(--line));border-radius:10px}
.waiting b{display:block;font-size:17px}
.waiting p{margin:4px 0 0;color:var(--muted)}
.waiting strong{color:var(--tape);font-size:1.15em}
.pulse{flex:none;width:12px;height:12px;margin-top:7px;border-radius:50%;background:var(--signal);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.code-note{margin:18px 0 0;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.code-note b{color:var(--fg);letter-spacing:.14em}

/* ---------- 3. spis a zápisník ---------- */
/* pruh se stolkem pod lištou: je vidět celou dobu vyšetřování */
.banner{position:sticky;top:calc(env(safe-area-inset-top,0px) + 57px);z-index:20;background:color-mix(in srgb,var(--tape) 14%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--tape) 45%,var(--line));backdrop-filter:blur(10px)}
.banner .wrap{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding-block:10px;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.banner .wrap>span{flex:1 1 260px;min-width:0}
.banner .tbl{display:flex;align-items:baseline;gap:8px;font-family:var(--f-display);font-weight:900;font-size:34px;line-height:1;color:var(--tape)}
.banner .tbl small{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
@media (max-width:560px){.banner .wrap{font-size:13px;padding-block:8px}.banner .tbl{font-size:28px}}
.side .ib{justify-content:center}
.finish{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--tape) 45%,var(--line));border-radius:10px;padding:18px 20px;background:var(--panel)}
.finish:empty{display:none}
.fin-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.fin-txt b{font-family:var(--f-display);font-size:26px;font-weight:800;text-transform:uppercase;line-height:1}
.fin-txt span{font-size:14px;color:var(--muted)}
.fin-txt .pbar{flex:none;max-width:260px;height:6px}
@media (max-width:560px){.finish .cta{width:100%}}

/* ---------- 4. kvíz ---------- */
.v-quiz .wrap{max-width:720px;padding-block:clamp(28px,6vw,56px) 64px}
.v-quiz h2{font-size:clamp(34px,7vw,56px);margin-top:10px}
.qz-note{color:var(--muted);font-size:14px;margin:12px 0 0;max-width:56ch}
.qz-team{margin:14px 0 0;color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.qz-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
.sub-h{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.4;color:var(--muted);margin:30px 0 8px}
.me-code{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--tape) 55%,var(--line));border-radius:8px}
.me-code span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.me-code b{font-family:var(--f-mono);font-size:32px;letter-spacing:.2em;color:var(--tape)}
@media (pointer:coarse){.join-card input,.code-form input{font-size:18px}}