/* Coin toss (coin-toss-ui.js): TV graphics over the paused pitch. Tokens from styles.css :root, components from
   tv-theme.css (.tv-chip, .tv-lt). The coin is two CSS faces turning in 3D; reduced motion shows the face at once. */
.coin-toss{position:fixed;inset:0;z-index:640;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse 80% 70% at 50% 50%,#07080bb3,#07080be6);color:var(--ink);font-family:var(--ui-font);color-scheme:dark;isolation:isolate;overflow:auto;overscroll-behavior:contain}
.coin-toss[hidden],.coin-toss [hidden],.ct-lower[hidden]{display:none!important}
.coin-toss *{box-sizing:border-box}
.coin-toss[data-stage=summary],.coin-toss:has(>.ct-card[hidden]){background:transparent;pointer-events:none}
.ct-card{position:relative;width:min(600px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 20px 14px;border:1px solid var(--edge);border-top:3px solid var(--red);border-radius:var(--r-sm);background:var(--panel-grad);box-shadow:var(--shadow-3),inset 0 1px 0 #ffffff0d;text-align:center;outline:0;animation:ct-in var(--dur-slow) var(--ease-out) both}
.ct-header{display:flex;align-items:center;justify-content:space-between;align-self:stretch;gap:12px}
.ct-step{font:700 11px/1 var(--tv-font);letter-spacing:1.6px;color:var(--dim)}
.ct-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(8px,3vw,24px);align-self:stretch}
.ct-team{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.ct-crest{width:52px;height:52px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 6px #0009)}
.ct-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.1 var(--tv-font);letter-spacing:.6px;text-transform:uppercase}
.ct-team[data-team=blue] .ct-name{box-shadow:inset 0 -3px 0 var(--blue-kit)}.ct-team[data-team=orange] .ct-name{box-shadow:inset 0 -3px 0 var(--orange-kit)}
.ct-tag{min-height:16px;font:700 10px/16px var(--tv-font);letter-spacing:1.4px;color:var(--muted);text-transform:uppercase}
.ct-team[data-winner=true] .ct-tag{padding:0 7px;border-radius:var(--r-xs);background:var(--gold);color:var(--gold-ink)}
.ct-coin-wrap{position:relative;width:112px;height:150px;display:grid;place-items:end center;perspective:600px}
.ct-coin{--ct-end:1800deg;--ct-dur:2.2s;--ct-delay:0s;position:relative;width:104px;height:104px;margin-bottom:22px;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform var(--dur-slow) var(--ease-out)}
.ct-coin[data-face=tails]{transform:rotateY(180deg)}
/* The rim: seen edge-on mid-spin, so the coin never vanishes between its faces. */
.ct-coin::before{content:"";position:absolute;top:4%;bottom:4%;left:calc(50% - 4px);width:8px;border-radius:4px;background:linear-gradient(180deg,#ffe27a,var(--gold-deep) 50%,#9a6400);transform:rotateY(90deg)}
.ct-coin[data-anim=spin]{animation:ct-flip var(--ct-dur) cubic-bezier(.25,.7,.35,1) var(--ct-delay) both}
.ct-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 35% 30%,#fff4b8,var(--gold) 45%,var(--gold-deep) 100%);box-shadow:inset 0 0 0 4px var(--gold-deep),inset 0 0 0 7px #ffe27a,inset 0 0 0 9px var(--gold-deep),0 6px 16px #0009;color:#5a3a00}
.ct-face svg{width:42px;height:42px;fill:currentColor;image-rendering:pixelated}
.ct-face span{font:800 13px/1 var(--tv-font);letter-spacing:1.6px}
.ct-tails{transform:rotateY(180deg)}
.ct-shadow{position:absolute;bottom:8px;left:50%;width:78px;height:12px;border-radius:50%;background:#000a;transform:translateX(-50%);filter:blur(2px)}
.ct-coin[data-anim=spin]+.ct-shadow{animation:ct-shadow var(--ct-dur) cubic-bezier(.25,.7,.35,1) var(--ct-delay) both}
.ct-prompt{margin:2px 0 0;font:italic 800 clamp(20px,4.4vw,30px)/1.1 var(--tv-font);letter-spacing:.3px;text-transform:uppercase}
.ct-status{min-height:1.4em;margin:0;color:var(--ink-2);font:600 13px/1.4 var(--ui-font)}
.ct-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-self:stretch}
.ct-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--btn);color:var(--ink);box-shadow:inset 0 1px 0 #ffffff14,var(--shadow-1);transition:background var(--dur) ease,border-color var(--dur) ease,transform var(--dur-fast) ease}
.ct-choice strong{font:700 17px/1 var(--tv-font);letter-spacing:1.2px;text-transform:uppercase}
.ct-choice small{color:var(--muted);font:600 11px/1.3 var(--ui-font)}
.ct-choice:not(:disabled):hover{border-color:#646c7d;background:var(--btn-hover)}
.ct-choice:not(:disabled)[aria-pressed=true]{border-color:#ff8a9c;background:var(--primary);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 4px 14px #e5173a4d}
.ct-choice:not(:disabled)[aria-pressed=true] small{color:#ffe3e8}
.ct-choice:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ct-choice:disabled{cursor:default;opacity:.55;box-shadow:none}
.ct-choice[data-picked=true]{opacity:1;border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.ct-timer{display:flex;align-items:center;gap:10px;align-self:stretch}
.ct-timer-bar{appearance:none;flex:1;height:4px;border:0;border-radius:var(--r-pill);background:#ffffff1a;overflow:hidden}
.ct-timer-bar::-webkit-progress-bar{background:#ffffff1a}.ct-timer-bar::-webkit-progress-value{background:var(--gold)}.ct-timer-bar::-moz-progress-bar{background:var(--gold)}
.ct-countdown{flex:none;color:var(--muted);font:700 11px/1 var(--tv-font);letter-spacing:1px;font-variant-numeric:tabular-nums}
.ct-hints{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;align-self:stretch;padding-top:8px;border-top:1px solid var(--edge);color:var(--muted);font:700 11px/1 var(--tv-font);letter-spacing:1px;text-transform:uppercase}
.ct-hints>span{display:inline-flex;align-items:center;gap:6px}
.ct-hints>span[data-hint-missing],html[data-input=touch] .ct-hints>span{display:none}
.ct-auto{min-height:44px;padding:0 12px;border:1px solid var(--edge);border-radius:var(--r-sm);background:transparent;box-shadow:none;color:var(--gold);font:700 12px/1 var(--tv-font);letter-spacing:1px;text-transform:uppercase}
.ct-auto:hover{border-color:var(--edge-strong);background:#ffffff0d}
.ct-auto:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Lower third: at the foot of the pitch picture (.pitch-wrap sizes the canvas with --view-ratio), else of the screen. */
.ct-lower{position:fixed;left:0;right:0;bottom:max(18vh,calc(env(safe-area-inset-bottom) + 96px));z-index:6;width:max-content;max-width:calc(100vw - 32px);margin-inline:auto;animation:ct-lower var(--dur-slow) var(--ease-out) both;pointer-events:none}
.pitch-wrap>.ct-lower{position:absolute;bottom:auto;top:calc(min(100cqw / var(--view-ratio),100cqh) - 14px);max-width:calc(min(100cqw,100cqh * var(--view-ratio)) - 24px);transform:translateY(-100%)}
.ct-lower>b{display:flex;align-items:center;white-space:nowrap}
.ct-lower>span{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
@keyframes ct-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes ct-lower{from{opacity:0;translate:0 10px}}
@keyframes ct-flip{0%{transform:translateY(0) rotateY(0deg)}45%{transform:translateY(-78px) rotateY(calc(var(--ct-end) * .55))}78%{transform:translateY(0) rotateY(calc(var(--ct-end) * .93))}88%{transform:translateY(-12px) rotateY(calc(var(--ct-end) * .98))}100%{transform:translateY(0) rotateY(var(--ct-end))}}
@keyframes ct-shadow{45%{width:40px;opacity:.45}78%,100%{width:78px;opacity:1}88%{width:66px}}
@media (max-width:420px){.ct-card{padding:14px 12px 12px;gap:10px}.ct-crest{width:40px;height:40px}.ct-name{font-size:13px}.ct-coin-wrap{width:88px;height:124px}.ct-coin{width:84px;height:84px}.ct-face svg{width:32px;height:32px}.ct-choices{gap:8px}.ct-choice{padding:8px 6px}.ct-choice strong{font-size:15px}.ct-choice small{display:none}}
@media (max-height:520px){.coin-toss{place-items:start center}.ct-card{gap:6px;padding:10px 16px 8px}.ct-header{display:none}.ct-coin-wrap{height:92px;width:84px}.ct-coin{width:66px;height:66px;margin-bottom:14px}.ct-face svg{width:26px;height:26px}.ct-face span{font-size:10px}.ct-crest{width:34px;height:34px}.ct-prompt{font-size:20px}.ct-status{font-size:12px}.ct-choice{min-height:44px;padding:6px 10px}.ct-choice small{display:none}.ct-hints{padding-top:4px}}
@media (prefers-reduced-motion:reduce){.ct-card,.ct-lower{animation:none}.ct-coin{transition:none}.ct-coin[data-anim=spin],.ct-coin[data-anim=spin]+.ct-shadow{animation:none}}
.coin-toss[data-reduced-motion=true] .ct-card,.ct-lower[data-reduced-motion=true]{animation:none}
.coin-toss[data-reduced-motion=true] .ct-coin{transition:none;animation:none}