/* Caveat Arena: shared styles for arena.html (host) and play.html (player). Observatory system (design/SYSTEM.md): brand blues and ink
   only, Bricolage for display, Manrope for text, the ring as the Orbit mechanic, glass on dark. Answer tiles differ by letter, shape
   AND lightness, so color is never the only signal. body.proj is the projector mode: larger type, darker ground. */
:root{--ar-ink2:#0B1020;--ar-glass:rgba(255,255,255,.06);--ar-gb:rgba(255,255,255,.14)}
[hidden]{display:none!important}
.ar-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ar-dark{background:var(--n);color:#fff}
.ar-dark a{color:#fff}
.ar-stage{position:relative;isolation:isolate;margin-top:calc(-1 * var(--cv-hdr-h,72px));padding:calc(var(--cv-hdr-h,72px) + 12px) 0 40px;background:var(--n);color:#fff;min-height:calc(100vh - 120px);overflow:hidden}
.ar-stage::before{content:"";position:absolute;left:62%;top:36%;width:min(980px,130vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(46,75,240,.5) 0%,rgba(46,75,240,.2) 30%,rgba(46,75,240,0) 64%);filter:blur(26px);z-index:-1;pointer-events:none}
.ar-stage::after{content:"";position:absolute;left:62%;top:36%;width:min(820px,120vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.12);z-index:-1;pointer-events:none}
body.proj .ar-stage{background:var(--ar-ink2)}
.ar-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.ar-top .sp{flex:1}
.ar-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--ar-gb);font-weight:600;font-size:14px;color:#fff}
.ar-ctl{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--ar-gb);color:#fff;font:700 14px/1 var(--t);cursor:pointer}
.ar-ctl[aria-pressed=true]{background:#fff;color:var(--n)}
.ar-ctl:focus-visible,.ar-dark .bt:focus-visible,.ans:focus-visible,.ar-x:focus-visible{outline:0;box-shadow:0 0 0 2px var(--n),0 0 0 5px #fff}
.ar-dark .bt.g,.ar-stage .bt.g{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid var(--ar-gb)}
.ar-dark .bt.w{background:#fff!important;color:var(--n)!important}
.glass{background:var(--ar-glass);border:1px solid var(--ar-gb);border-radius:22px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.av{width:28px;height:28px;border-radius:50%;flex:none;background:var(--ar-ink2);object-fit:cover}
/* rings */
.pr{position:relative;display:inline-block;width:72px;height:72px;flex:none}
.pr svg{width:100%;height:100%;transform:rotate(-90deg)}
.pr .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}
.pr .fg{fill:none;stroke:var(--c);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .6s ease-out}
.pr img{position:absolute;left:14px;top:14px;width:44px;height:44px;border-radius:50%}
.ring{width:64px;height:64px;transform:rotate(-90deg)}.ring.big{width:120px;height:120px}
.ring .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:10}.ring .fg{fill:none;stroke:var(--c);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s ease-out}
/* the timer */
.tmr{position:relative;width:96px;height:96px;flex:none;margin-bottom:22px}
.tmr svg{width:100%;height:100%;transform:rotate(-90deg)}
.tmr .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:8}
.tmr .fg{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round}
.tmr b{position:absolute;inset:0;display:grid;place-items:center;font:700 34px/1 var(--d);font-variant-numeric:tabular-nums}
.tmr small{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}
/* answer tiles (host) and answer buttons (player) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.tiles.n2{grid-template-columns:1fr 1fr}.tiles.n3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:700px){.tiles,.tiles.n3{grid-template-columns:1fr}}
.tile,.ans{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px;border-radius:20px;font:600 clamp(17px,1.1vw + 12px,24px)/1.3 var(--t);text-align:left;border:1px solid transparent;overflow:hidden}
.ans{width:100%;cursor:pointer;min-height:84px;font-size:19px;font-family:var(--t);transition:transform .15s ease-out,box-shadow .15s ease-out}
.ans:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,24,40,.35)}
.ans:disabled{cursor:default;opacity:.55}.ans.picked{opacity:1;box-shadow:0 0 0 3px #fff inset}
.ans.small{min-height:56px;font-size:17px;padding:10px 14px;width:auto;display:inline-flex}
.t0{background:var(--c);color:#fff}.t1{background:var(--ci);color:#fff}.t2{background:var(--ar-ink2);color:#fff;border-color:rgba(255,255,255,.28)}.t3{background:var(--s);color:var(--n)}.t4{background:#fff;color:var(--n)}.t5{background:rgba(255,255,255,.12);color:#fff;border-color:var(--ar-gb)}
.let{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:6px;flex:none;font:700 18px/1 var(--d)}
.let svg{width:20px;height:20px;display:block}
.tile .txt,.ans .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.tile .bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(0,0,0,.18)}
.tile .bar i{display:block;height:100%;width:0;background:#fff;transition:width .8s ease-out}
.t3 .bar,.t4 .bar{background:rgba(16,24,40,.12)}.t3 .bar i,.t4 .bar i{background:var(--c)}
.tile .cnt{font:700 22px/1 var(--d);font-variant-numeric:tabular-nums;flex:none;min-width:28px;text-align:right}
.tiles.reveal .tile.dim{opacity:.45}.tiles.reveal .tile.ok{box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(255,255,255,.25)}
.mark{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#fff;color:var(--n);font:700 13px/1.4 var(--t);vertical-align:middle}
.t3 .mark,.t4 .mark{background:var(--n);color:#fff}
/* why */
.why{display:flex;gap:14px;align-items:flex-start;margin:18px 0 0;padding:16px 20px;position:relative;overflow:hidden}
.why .qm{flex:none;margin-top:5px;background:conic-gradient(rgba(255,255,255,.3) 0 90deg,#fff 90deg 360deg)}
.why p{margin:0;font-size:clamp(16px,1vw + 10px,21px);line-height:1.45}
.why b{display:block;font:700 13px/1 var(--t);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:6px}
.why .wb{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#fff;transition:width 4s linear}
/* leaderboard, teams, rings */
.lb,.teams,.rings{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.lb li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);font-size:17px}
.lb li.me{box-shadow:0 0 0 2px #fff inset}
.lb .rk{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--n);display:grid;place-items:center;font:700 14px/1 var(--d);flex:none}
.lb b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pts{font:700 18px/1 var(--d);font-variant-numeric:tabular-nums}
.teams li{display:grid;grid-template-columns:auto 1fr auto;gap:8px 14px;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06)}
.teams li.me{box-shadow:0 0 0 2px #fff inset}
.teams small{grid-column:1 / -1;color:rgba(255,255,255,.7)}
.lane{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.lane i{display:block;height:100%;background:var(--c);border-radius:999px;transition:width .8s ease-out}
.rings{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rings li{display:grid;justify-items:center;gap:4px;padding:12px 8px;border-radius:16px;background:rgba(255,255,255,.06);text-align:center}
.rings li small{color:rgba(255,255,255,.7)}
/* podium */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;margin:20px 0 0}
.spot{background:rgba(255,255,255,.06);border:1px solid var(--ar-gb)}
.spot{display:grid;justify-items:center;gap:6px;padding:22px 12px;border-radius:22px;text-align:center}
.spot.s1{order:2;padding-top:40px;background:linear-gradient(180deg,rgba(46,75,240,.55),rgba(46,75,240,.15));border:1px solid rgba(255,255,255,.2)}
.spot.s2{order:1}.spot.s3{order:3}
.spot .place{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--n);display:grid;place-items:center;font:700 20px/1 var(--d)}
.spot b{font:700 clamp(18px,1.2vw + 12px,28px)/1.1 var(--d);letter-spacing:-.02em;overflow-wrap:anywhere}
.spot .pts{font-size:clamp(20px,1.4vw + 12px,34px)}
.spot small{color:rgba(255,255,255,.75)}
@media (max-width:600px){.podium{grid-template-columns:1fr;align-items:stretch}.spot.s1,.spot.s2,.spot.s3{order:0}}
/* projector */
body.proj .ar-wrap{max-width:1400px}
body.proj .tile{min-height:104px;font-size:clamp(22px,1.6vw + 14px,34px)}
body.proj .lb li{font-size:22px}body.proj .pts{font-size:24px}
body.proj .why p{font-size:clamp(20px,1.4vw + 12px,30px)}
body.proj .cv-hdr,body.proj .cv-footer,body.proj footer{display:none}
body.proj .ar-stage{margin-top:0;padding-top:16px}
/* reduced motion */
@media (prefers-reduced-motion:reduce){.ans,.pr .fg,.ring .fg,.tile .bar i,.lane i,.why .wb{transition:none!important}.ans:hover:not(:disabled){transform:none}}