/* Two-person mode is an optional overlay on the original kinetic typography demo. */
.specimen.duel-active .viewport{isolation:isolate}
.specimen.duel-active .viewport>canvas{visibility:hidden}
.duel-layer{position:absolute;inset:0;z-index:20;background:#050609;color:#f9f9fd;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow:hidden}
.duel-layer[hidden],.duel-layer [hidden]{display:none!important}
.duel-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;outline-offset:-3px}
.duel-canvas:focus-visible{outline:2px solid #f5f5fa}
.duel-top{pointer-events:none;position:absolute;z-index:2;left:4%;right:4%;top:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.duel-top>span{display:flex;gap:8px;align-items:center}
.duel-top strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:115px;font-size:10px;letter-spacing:.05em;font-weight:600}
.duel-top b{font-size:17px;font-weight:650}
.duel-top .p1score{justify-content:flex-end}
.duel-top i{width:7px;height:7px;border-radius:50%;background:#8fe9ff;display:inline-block}
.duel-top .p2score i{background:#ffab8f}
.duel-top .duel-time{font:600 18px "Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;color:#fff}
.duel-lobby,.duel-online,.duel-end{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:min(410px,calc(100% - 28px));max-height:calc(100% - 45px);overflow:auto;background:#090b10f2;border:1px solid #5a5c68;border-radius:13px;text-align:center;padding:22px 21px;box-shadow:0 20px 65px #0009}
.duel-kicker{color:#c4c7d2;letter-spacing:.14em;font:700 9px ui-monospace,monospace}
.duel-lobby h3,.duel-online h3,.duel-end h3{font:550 clamp(24px,3vw,39px)/1.05 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.06em;margin:12px 0 11px}
.duel-lobby p,.duel-online p,.duel-end p{font-size:12px;color:#c0c1cd;line-height:1.6;margin:0 0 16px}
.duel-lobby>button,.duel-room-actions button,.duel-end>button{width:100%;margin:4px 0;min-height:37px;border-radius:6px}
.duel-lobby [data-local],.duel-lobby [data-host],.duel-room-actions [data-start-online],.duel-end [data-rematch]{background:#f8f8fc;border-color:#f8f8fc;color:#09090e;font-weight:650}
.duel-lobby [data-local]:hover,.duel-lobby [data-host]:hover,.duel-room-actions [data-start-online]:hover{background:#dbdbe8}
.duel-lobby [data-host]{background:#ded4ff}
.duel-lobby small{display:block;color:#9699aa;font-size:10px;line-height:1.6;margin-top:13px}
.duel-join,.duel-share{display:flex;gap:6px;margin-top:9px}
.duel-join input,.duel-share input,.duel-name input{min-width:0;width:100%;background:#161922;border:1px solid #5c5e69;border-radius:5px;padding:10px 11px;color:#fff;font-size:12px}
.duel-join input{text-align:center;font-family:ui-monospace,monospace;letter-spacing:.12em;font-weight:700}
.duel-join button,.duel-share button{white-space:nowrap;min-width:75px}
.duel-name{display:block;color:#b4b6c2;text-align:left;font-size:11px;margin:12px 0}
.duel-name input{display:block;margin:7px 0 0}
.duel-room-actions{display:flex;gap:9px;margin-top:14px}
.duel-room-actions button:disabled{opacity:.35;cursor:not-allowed}
.duel-end p{font-size:24px;color:#fff;margin:10px 0 18px}
.duel-bottom{position:absolute;z-index:4;bottom:8px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#bec0cb;font:600 9px ui-monospace,monospace;letter-spacing:.045em;pointer-events:none}
.duel-bottom button{pointer-events:auto;padding:6px 10px;background:#08090ddd;border:1px solid #444754;color:#f9f9f9}
.duel-notice{position:absolute;z-index:8;bottom:42px;left:50%;transform:translateX(-50%);max-width:90%;text-align:center;background:#0a101eea;border:1px solid #bbb6f4;color:#fff;border-radius:6px;padding:9px 14px;font-size:12px;pointer-events:none}
.specimen-actions .duel-open{border-color:#c9c5ff;background:#28253b;color:#e7e4ff;font-weight:700}
.specimen-actions .duel-open:hover{background:#494063}
@media(max-width:640px){
 .specimen.duel-active .viewport{min-height:405px;height:405px}
 .duel-canvas{top:50%;height:auto;aspect-ratio:720/520;transform:translateY(-50%)}
 .duel-lobby,.duel-online,.duel-end{max-height:calc(100% - 52px);padding:13px 12px;width:min(360px,calc(100% - 20px))}
 .duel-lobby h3,.duel-online h3,.duel-end h3{font-size:27px;margin:7px 0}
 .duel-lobby p,.duel-online p{font-size:11px;margin-bottom:10px}
 .duel-lobby>button,.duel-room-actions button{min-height:32px}
 .duel-bottom{bottom:5px;left:8px;right:8px;font-size:8px}
 .duel-top{top:9px;left:2%;right:2%}
 .duel-top strong{max-width:74px;font-size:9px}
 .duel-top>span{gap:4px}
 .duel-top .duel-time{font-size:16px}
 .duel-lobby small{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.duel-layer *{scroll-behavior:auto!important}}