html,body{margin:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#caf0ef;color:#16343a;font-family:Segoe UI,sans-serif;user-select:none;-webkit-user-select:none}canvas{display:block;width:100vw;height:100dvh;touch-action:none}#veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:#0c28306b}#veil[hidden],#hud[hidden]{display:none}#hud{position:fixed;left:max(16px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:2;pointer-events:none;text-shadow:0 1px 0 rgb(255 255 255 / 65%)}#title{margin:0;font-size:18px;letter-spacing:.08em;text-transform:uppercase}#lines,#help{margin:4px 0 0;font-size:14px}#scores,#teams{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}#scores li,#teams li{display:flex;align-items:center;gap:8px;width:max-content;max-width:min(280px,70vw);min-width:92px;padding:3px 8px;border-radius:8px;border:1px solid rgb(255 255 255 / 70%);background:#ffffffc7;box-shadow:0 8px 24px #0c283029;font-variant-numeric:tabular-nums}#scores .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#scores li.lead{box-shadow:inset 0 0 0 2px #ff9ec8}#scores li.mine{outline:2px solid #16343a}#scores .mark{font-size:10px;font-weight:700}#scores .swatch,#teams .swatch{width:12px;height:12px;border-radius:3px}#scores .pts,#teams .pts{margin-left:auto;font-weight:700}#lobby{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:2;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(76px,env(safe-area-inset-bottom) + 56px));overflow:auto;overscroll-behavior:contain;padding:14px;border:1px solid rgb(255 255 255 / 72%);border-radius:16px;background:#ffffffd6;box-shadow:0 18px 50px #0c283047;color:#16343a;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#lobby[hidden]{display:none}#lobby.center{inset:50% auto auto 50%;width:min(640px,calc(100vw - 104px));transform:translate(-50%,-50%);max-height:calc(100svh - env(safe-area-inset-top) - max(72px,env(safe-area-inset-bottom) + 56px))}#lobby.dock{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:auto;bottom:auto;transform:none;width:min(220px,calc(100vw - 24px));max-height:min(70dvh,420px);padding:10px;gap:6px}#lobby.dock:has(#picks:not([hidden])){width:min(320px,calc(100vw - 24px))}#roster{position:fixed;z-index:3;left:max(12px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);box-sizing:border-box;width:min(240px,42vw);max-height:70dvh;overflow:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:4px;border:1px solid rgb(255 255 255 / 72%);border-radius:16px;background:#ffffffd6;box-shadow:0 18px 50px #0c283047;color:#16343a;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#roster li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}#roster .state,#roster .mammoth{font-weight:700;font-variant-numeric:tabular-nums}#roster .note{flex:1 0 100%;font-size:12px}#roster .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#roster button{padding:2px 8px}#seat-role{display:flex;flex-wrap:wrap;gap:6px;align-items:center}#brand{margin:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}#lobby fieldset{margin:0;padding:8px;border:1px solid rgb(22 52 58 / 14%);border-radius:12px;display:flex;flex-direction:column;gap:8px}#lobby legend{padding:0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}#lobby p{margin:0}#lobby label{display:flex;justify-content:space-between;gap:8px;align-items:center}#create-options,#join-options,#lobby .role{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#create-options,#join-options{flex-direction:column;align-items:stretch}#lobby label.check{justify-content:flex-start;align-items:flex-start}#lobby label.check span{flex:1;min-width:0}#lobby details{border:1px solid rgb(22 52 58 / 14%);border-radius:12px;padding:8px}#lobby summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}#lobby .secret{display:flex;gap:6px;align-items:center}#lobby .secret button{width:auto;padding:4px 8px}#picks button .trait{font-size:9px;line-height:1.2;text-align:center}#invite{overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}#lobby button:focus-visible,#join-lock button:focus-visible,#join-lock input:focus-visible,#result button:focus-visible,#roster button:focus-visible,#picks button:focus-visible,#lesson button:focus-visible,#playback button:focus-visible,#watch-front:focus-visible,#gear button:focus-visible,#gear input:focus-visible{outline:2px solid #16343a;outline-offset:2px}#lesson,#playback{position:fixed;z-index:4;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:min(320px,calc(100vw - 24px));box-sizing:border-box;padding:12px 14px;border-radius:12px;background:#ffffffeb;color:#16343a;pointer-events:auto;box-shadow:0 8px 24px #0c28302e}#lesson[hidden],#playback[hidden]{display:none}#playback p{margin:0 0 8px;font-size:14px;line-height:1.35}#playback .row{display:flex;flex-wrap:wrap;gap:6px}#playback button{font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:6px 10px;cursor:pointer}#lobby #presets button[aria-pressed=true]{background:#16343a;color:#f0fafb;border-color:#16343a}#preset-blurb{margin:0;font-size:14px;line-height:1.35}#lesson-note{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}#lesson h2{margin:0 0 6px;font-size:16px}#lesson-body{margin:0 0 10px;font-size:14px;line-height:1.35}#lesson .row{display:flex;flex-wrap:wrap;gap:6px}#lesson button{font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:6px 10px;cursor:pointer}#lobby input[type=text],#lobby input[type=password],#lobby input[type=number],#lobby select{width:140px;font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:8px;padding:4px 8px;user-select:text;-webkit-user-select:text}#lobby input[type=checkbox],#lobby input[type=radio]{width:auto;margin:2px 0 0;accent-color:#16343a}#lobby input:disabled,#lobby select:disabled{opacity:.45}#room-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}#lobby .row{display:flex;flex-wrap:wrap;gap:6px}#lobby.home .row{flex-direction:column}#lobby.home .row button{width:100%;padding:12px 14px;border-radius:12px;font-size:16px}#picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}#lobby button,#result button,#roster button,#picks button{font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:6px 10px;cursor:pointer}#picks button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 2px 6px;border-radius:10px;border-width:2px}#picks button img{width:36px;height:36px;object-fit:contain;pointer-events:none}#picks button .num{font-size:11px;font-variant-numeric:tabular-nums}#picks button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #16343a}#pick-random{grid-column:1 / -1;flex-direction:row;justify-content:center;padding:8px 10px;border-radius:999px}#lobby button:disabled,#result button:disabled{opacity:.45}#room-list button{width:100%;border-radius:10px;text-align:left;line-height:1.35}#join-lock{box-sizing:border-box;width:min(360px,calc(100vw - 32px));padding:14px;border:1px solid rgb(255 255 255 / 72%);border-radius:16px;background:#f0fafb;color:#16343a;box-shadow:0 18px 50px #0c283047}#join-lock::backdrop{background:#0c283075}#join-lock form{display:flex;flex-direction:column;gap:8px;margin:0}#join-lock p,#join-lock label{margin:0}#join-lock label{display:flex;flex-direction:column;gap:4px}#join-lock .secret{display:flex;gap:6px;align-items:center}#join-lock input[type=password],#join-lock input[type=text]{flex:1;min-width:0;font:inherit;color:inherit;background:#fff;border:1px solid rgb(22 52 58 / 28%);border-radius:8px;padding:6px 8px}#join-lock .row{display:flex;flex-wrap:wrap;gap:6px}#join-lock button{font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:6px 10px;cursor:pointer}#join-lock .secret button{width:auto;padding:4px 8px}#create-options[hidden],#join-options[hidden],#room-list[hidden],#rules[hidden],#teams[hidden],#picks[hidden],#name-label[hidden],#code-label[hidden],#roster[hidden],#series[hidden],#result-series[hidden],#result[hidden],#gear-menu[hidden],#volume-panel[hidden],#seat-role[hidden],#room-options[hidden]{display:none}#banner{position:fixed;top:18%;left:50%;transform:translate(-50%);margin:0;max-width:90vw;pointer-events:none;font-size:32px;font-weight:700;letter-spacing:.04em;text-align:center;text-shadow:0 2px 0 rgb(255 255 255 / 70%)}#banner[hidden]{display:none}#gear{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#16343a;font-size:13px}#gear-menu{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(280px,calc(100vw - 24px));max-height:min(70dvh,520px);overflow:auto;padding:10px;border:1px solid rgb(255 255 255 / 72%);border-radius:16px;background:#ffffffe0;box-shadow:0 18px 50px #0c283047}#volume-panel{display:flex;flex-direction:column;align-items:stretch;gap:8px}#race-count[hidden],#race-pause[hidden],#race-stop[hidden],#race-continue[hidden]{display:none}#race-count{margin:0;font-weight:700}#gear #picks{width:100%}#result{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:min(520px,calc(100vw - 104px));max-height:calc(100svh - 24px);overflow:auto;overscroll-behavior:contain;padding:14px;border:1px solid rgb(255 255 255 / 72%);border-radius:16px;background:#ffffffd6;box-shadow:0 18px 50px #0c283047;color:#16343a;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#result h2,#result p{margin:0}#result h2{text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}#result-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}#result-rows li{display:flex;align-items:center;gap:8px;min-width:0}#result-rows .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#result-rows .pts,#result-rows .num{font-weight:700;font-variant-numeric:tabular-nums}#result-rows .assist{font-size:12px}#result .row{display:flex;flex-wrap:wrap;gap:8px}#series,#result-series{display:flex;flex-direction:column;gap:4px;margin:0;font-size:13px}#series p,#result-series p,#series ol,#result-series ol{margin:0}#series ol,#result-series ol{list-style:none;padding:0}#hud.race{inset:auto 0 0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}#hud.race #title,#hud.race #help{display:none}#hud.race #lines{position:fixed;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));margin:0;font-size:12px}#watch{margin:0;font-size:13px;font-weight:700}#watch[hidden],#watch-front[hidden]{display:none}#hud.race #watch,#hud.race #watch-front{pointer-events:auto}#watch-front{font:inherit;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:2px 8px;cursor:pointer}#scores li.pick{cursor:pointer}#hud.race #teams,#hud.race #scores{flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0;max-width:100%}#hud.race #scores{max-height:72px;overflow:auto;pointer-events:auto}#hud.race #scores li,#hud.race #teams li{font-size:12px;padding:1px 6px;gap:4px;min-width:0;max-width:148px}#hud.race #scores .swatch,#hud.race #teams .swatch{width:8px;height:8px}#diag-panel{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:4;max-width:min(280px,calc(100vw - 24px));padding:8px 10px;color:#16343a;background:#ffffffe0;border:1px solid rgb(22 52 58 / 28%);border-radius:12px;font-size:12px;line-height:1.35}#diag-panel[hidden]{display:none}#diag-text{margin:0 0 8px;white-space:pre-wrap}#gear button{font:inherit;color:inherit;background:#ffffffb8;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:6px 12px;cursor:pointer}#gear-open{width:40px;height:40px;padding:0;font-size:18px;line-height:1}#gear input[type=range]{width:100%;cursor:pointer}#turn{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;background:#caf0ef;text-align:center}#turn p{margin:0;max-width:18em;font-size:22px;font-weight:700}#turn-detail{margin-top:12px;font-size:16px;font-weight:600}#turn-detail a,#install-banner a{color:inherit}#turn button{margin-top:16px;font:inherit;font-size:18px;color:inherit;background:#fffc;border:1px solid rgb(22 52 58 / 28%);border-radius:999px;padding:10px 16px;cursor:pointer}#turn[hidden],#turn-detail[hidden],#turn button[hidden],#install-banner[hidden]{display:none}#install-banner{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:5;margin:0;max-width:min(28em,calc(100vw - 24px));padding:10px 14px;border-radius:12px;background:#ffffffe0;font-size:14px;font-weight:600;text-align:center}@media(max-width:720px){#banner{font-size:24px}#picks{grid-template-columns:repeat(5,minmax(0,1fr))}#picks button img{width:28px;height:28px}}@media(max-height:640px){#lobby.center.home{top:max(8px,env(safe-area-inset-top));transform:translate(-50%);max-height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(64px,env(safe-area-inset-bottom) + 48px))}}@media(max-width:960px){#roster{top:auto;bottom:max(12px,env(safe-area-inset-bottom));transform:none;width:min(240px,70vw);max-height:34dvh}body:has(#roster:not([hidden])) #lobby.center{top:max(8px,env(safe-area-inset-top));transform:translate(-50%);max-height:calc(100svh - 36dvh - 16px)}}@media(min-width:961px)and (max-width:1200px){body:has(#roster:not([hidden])) #lobby.center{left:calc(50% + 90px);width:min(480px,calc(100vw - 280px))}}@media(orientation:landscape)and (max-height:520px){#lesson,#playback{width:min(280px,46vw);padding:8px 10px}#lesson-body{font-size:12px}#help{display:none}#title{font-size:14px}#lines{font-size:13px}#scores,#teams{flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))}#lobby{gap:6px;padding:8px;font-size:13px}}
