body.obby-page{touch-action:none;background:#8fd3ff;position:fixed;inset:0;overflow:hidden}#ob-stage{touch-action:none;position:fixed;inset:0}#ob-stage canvas{touch-action:none;width:100%;height:100%;display:block}#ob-join{z-index:5;touch-action:pan-y;background:radial-gradient(circle at 50% 20%,#ffffff59,#2878dc8c 75%);align-content:safe center;position:fixed;inset:0;overflow-y:auto}#ob-join .card{width:min(440px,100%);padding:18px 20px 20px}#ob-cover{aspect-ratio:16/8;object-fit:cover;border-radius:15px 15px 0 0;width:calc(100% + 40px);margin:-18px -20px 10px;display:block}#ob-join h1{font-family:"Black Han Sans", var(--display);color:#ffd43b;text-shadow:0 4px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink);font-size:40px}#ob-join .tag{margin:6px 0 14px;font-size:15px}#ob-join input{width:100%;font:20px var(--display);border:3px solid var(--ink);text-align:center;border-radius:12px;margin-bottom:10px;padding:10px 14px}.ob-char-label{font-family:var(--display);color:var(--muted);margin:2px 0 6px}.ob-char-label b{color:var(--ink);font-weight:400}#ob-chars{grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:14px;display:grid}#ob-chars button{aspect-ratio:1;cursor:pointer;touch-action:manipulation;background:#eaf6ff;border:3px solid #0000;border-radius:12px;padding:2px}#ob-chars button img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}#ob-chars button[aria-pressed=true]{border-color:var(--ink);background:#ffe066;transform:scale(1.08)}.ob-credit{color:var(--muted);margin:10px 0 0;font-size:11px}@media (max-height:560px){#ob-cover{display:none}#ob-join .card{padding:12px 16px}#ob-join h1{font-size:28px}#ob-join .tag{margin:2px 0 8px;font-size:13px}#ob-join input{margin-bottom:6px;padding:6px 12px;font-size:17px}#ob-chars{grid-template-columns:repeat(16,1fr);gap:3px;margin-bottom:8px}}#ob-hud{pointer-events:none;color:#fff;font-family:var(--ui);position:fixed;inset:0}#ob-hud button,#ob-hud a{pointer-events:auto}.glass{background:#161434b8;border:2px solid #ffffff40}#ob-top{top:max(8px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));flex-wrap:wrap;align-items:center;gap:6px;max-width:46vw;display:flex;position:absolute}#ob-place{top:max(8px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));font-family:"Black Han Sans", var(--display);background:#161434b8;border:2px solid #ffffff40;border-radius:16px;align-items:baseline;gap:2px;padding:2px 14px 4px;display:flex;position:absolute}#ob-place b{color:#fff;-webkit-text-stroke:1px var(--ink);font-size:46px;font-weight:400;line-height:1}#ob-place span{font-size:22px}#ob-place small{color:#c9c4ef;margin-left:4px;font-size:18px}#ob-place.first b{color:#ffd43b}#ob-mid{top:max(8px, env(safe-area-inset-top));justify-items:center;gap:6px;width:min(560px,40vw);display:grid;position:absolute;left:50%;transform:translate(-50%)}#ob-timer{font-family:"Black Han Sans", var(--display);white-space:nowrap;background:#161434b8;border:2px solid #ffffff40;border-radius:12px;padding:2px 14px;font-size:22px}#ob-timer.hurry{color:#ff8787;animation:1s infinite ob-pulse}#ob-bar{background:#1614348c;border:2px solid #ffffff40;border-radius:17px;width:100%;height:34px;position:relative}#ob-track{position:absolute;inset:0 22px 0 6px}#ob-track .seg{opacity:.85;border-right:2px dashed #ffffff4d;place-items:center;font-size:15px;display:grid;position:absolute;top:3px;bottom:3px}#ob-track .seg.surprise{background:#ffd43b29}#ob-track .goal{font-size:18px;position:absolute;top:4px;right:-20px}#ob-track i{background:#fff;border:3px solid #fff;border-radius:50%;width:26px;height:26px;margin-left:-13px;transition:left .15s linear;position:absolute;top:3px;overflow:hidden;box-shadow:0 2px #0000004d}#ob-track i img{object-fit:cover;width:100%;height:100%;display:block}#ob-track i.me{z-index:2;width:32px;height:32px;margin-left:-16px;top:0;box-shadow:0 0 0 3px #ffd43b}#ob-call{top:calc(max(8px, env(safe-area-inset-top)) + 96px);font-family:"Black Han Sans", var(--display);white-space:nowrap;color:#fff;-webkit-text-stroke:1.5px var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:18px;padding:6px 22px;font-size:34px;animation:.6s infinite ob-pulse;position:absolute;left:50%;transform:translate(-50%)}#ob-banner{text-align:center;opacity:0;gap:4px;display:grid;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}#ob-banner b{font-family:"Black Han Sans", var(--display);-webkit-text-stroke:1.5px var(--ink);text-shadow:0 4px 0 var(--ink);white-space:nowrap;font-size:40px;font-weight:400}#ob-banner small{font-family:var(--display);background:#161434b3;border-radius:12px;justify-self:center;padding:4px 14px;font-size:18px}#ob-banner.show{animation:2.6s ease-out forwards ob-banner}#ob-banner.surprise b{color:#ffd43b}#ob-big{opacity:0;white-space:nowrap;font-family:"Black Han Sans", var(--display);color:#fff;-webkit-text-stroke:2.5px var(--ink);text-shadow:0 6px 0 var(--ink);font-size:84px;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}#ob-big.show{animation:1.1s ease-out forwards ob-big}#ob-big.count{color:#ffd43b;font-size:110px}#ob-big.go{color:#8ce99a}#ob-big.cp{color:#8ce99a;font-size:56px}#ob-big.fin{color:#74c0fc;animation-duration:2.2s}#ob-big.gold{color:#ffd43b;font-size:120px;animation-duration:2.6s}#ob-toasts{left:max(10px, env(safe-area-inset-left));top:calc(max(8px, env(safe-area-inset-top)) + 56px);justify-items:start;gap:6px;max-width:44vw;display:grid;position:absolute}#ob-toasts p{font-family:var(--display);background:#161434bf;border:2px solid #fff3;border-radius:12px;margin:0;padding:6px 12px;font-size:16px;animation:3.2s forwards ob-toast}#ob-hint{bottom:max(10px, env(safe-area-inset-bottom));white-space:nowrap;background:#16143499;border-radius:10px;margin:0;padding:5px 12px;font-size:13px;transition:opacity .8s;position:absolute;left:50%;transform:translate(-50%)}body.touch #ob-hint,body.coarse #ob-hint{display:none}#ob-pad{width:132px;height:132px;left:calc(24px + env(safe-area-inset-left));bottom:calc(30px + env(safe-area-inset-bottom));opacity:.6;background:#ffffff24;border:3px solid #ffffff80;border-radius:50%;transition:opacity .2s;display:none;position:absolute}#ob-pad.on{opacity:1}#ob-pad i{border:3px solid var(--ink);background:#ffffffe6;border-radius:50%;width:58px;height:58px;margin:-29px 0 0 -29px;position:absolute;top:50%;left:50%}body.touch #ob-pad,body.coarse #ob-pad{display:block}#ob-jump{right:calc(26px + env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border:4px solid var(--ink);width:108px;height:108px;box-shadow:0 7px 0 var(--ink);font-family:"Black Han Sans", var(--display);color:#fff;-webkit-text-stroke:1px var(--ink);background:radial-gradient(circle at 50% 35%,#8ce99a,#2f9e44);border-radius:50%;font-size:24px;display:none;position:absolute}#ob-jump.down{box-shadow:0 2px 0 var(--ink);transform:translateY(5px)}#ob-jump.wings{background:radial-gradient(circle at 50% 35%,#d0ebff,#4dabf7)}#ob-jump.wings span:before{content:"🪽 "}body.touch #ob-jump,body.coarse #ob-jump{display:block}#ob-emotes{right:max(10px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));gap:6px;display:flex;position:absolute}#ob-emotes button{cursor:pointer;touch-action:manipulation;border:2px solid var(--ink);width:42px;height:42px;box-shadow:0 3px 0 var(--ink);background:#ffffffd9;border-radius:50%;padding:0;font-size:22px}body.touch #ob-emotes,body.coarse #ob-emotes{bottom:calc(160px + env(safe-area-inset-bottom));right:calc(14px + env(safe-area-inset-right));flex-direction:column}body.touch #ob-emotes button,body.coarse #ob-emotes button{width:40px;height:40px;font-size:20px}#ob-results{left:50%;bottom:max(14px, env(safe-area-inset-bottom));pointer-events:auto;touch-action:pan-y;background:#161434d1;border:3px solid #ffffff4d;border-radius:18px;width:min(460px,94vw);max-height:46vh;padding:12px 16px;position:absolute;overflow-y:auto;transform:translate(-50%)}@media (orientation:landscape){#ob-results{left:auto;right:max(14px, env(safe-area-inset-right));top:calc(max(8px, env(safe-area-inset-top)) + 64px);width:min(380px,40vw);max-height:calc(100vh - 150px);bottom:auto;transform:none}}@media (orientation:portrait){#ob-results{max-height:42vh}}body.ob-end #ob-jump,body.ob-end #ob-pad,body.ob-end #ob-hint,body.ob-end #ob-mid,body.ob-end #ob-call,body.ob-end #ob-place{display:none!important}body.ob-end #ob-emotes{bottom:max(10px, env(safe-area-inset-bottom))}@media (orientation:landscape){body.ob-end #ob-results{top:max(10px, env(safe-area-inset-top));max-height:calc(100vh - 86px)}body.ob-end #ob-emotes,body.ob-end.coarse #ob-emotes,body.ob-end.touch #ob-emotes{left:max(10px, env(safe-area-inset-left));top:auto!important;right:auto!important;bottom:max(10px, env(safe-area-inset-bottom))!important;flex-direction:row!important}}@media (orientation:portrait){body.ob-end #ob-results{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 58px)}body.ob-end #ob-emotes,body.ob-end.coarse #ob-emotes,body.ob-end.touch #ob-emotes{left:50%;right:auto;bottom:max(10px, env(safe-area-inset-bottom));flex-direction:row;transform:translate(-50%)}}#ob-watch{right:max(10px, env(safe-area-inset-right));top:calc(max(8px, env(safe-area-inset-top)) + 70px);pointer-events:auto;text-overflow:ellipsis;white-space:nowrap;max-width:46vw;padding:7px 14px;font-size:17px;position:absolute;overflow:hidden}@media (max-width:700px) and (orientation:portrait){#ob-watch{top:calc(max(8px, env(safe-area-inset-top)) + 108px)}}#ob-results h2{font-family:"Black Han Sans", var(--display);text-align:center;color:#ffd43b;margin:0 0 6px;font-size:28px}#ob-res-list{gap:3px;margin:0;padding:0;list-style:none;display:grid}#ob-res-list li{font-family:var(--display);border-radius:10px;align-items:center;gap:8px;padding:2px 6px;font-size:17px;display:flex}#ob-res-list li.me{color:#ffe066;background:#ffd43b40}#ob-res-list li b{text-align:center;width:30px;font-weight:400}#ob-res-list li img{object-fit:contain;width:30px;height:30px}#ob-res-list li span{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}#ob-res-list li small{color:#c9c4ef;font-size:15px}#ob-next{text-align:center;color:#c9c4ef;font-family:var(--display);margin:6px 0 0}#ob-net{pointer-events:auto;font-family:var(--display);text-align:center;background:#161434e6;border-radius:14px;padding:12px 18px;font-size:18px;position:absolute;top:40%;left:50%;transform:translate(-50%)}@media (max-width:700px) and (orientation:portrait){#ob-top{max-width:70vw}#ob-mid{top:calc(max(8px, env(safe-area-inset-top)) + 48px);width:calc(100vw - 20px)}#ob-place{padding:0 10px 2px}#ob-place b{font-size:34px}#ob-call{top:calc(max(8px, env(safe-area-inset-top)) + 140px);font-size:26px}#ob-toasts{top:auto;bottom:calc(190px + env(safe-area-inset-bottom));max-width:70vw}#ob-banner b{font-size:30px}#ob-big{font-size:64px}#ob-big.count{font-size:90px}}@media (max-height:500px){#ob-mid{width:min(420px,44vw)}#ob-timer{padding:1px 10px;font-size:17px}#ob-bar{height:28px}#ob-track i{width:22px;height:22px;margin-left:-11px}#ob-track i.me{width:26px;height:26px;margin-left:-13px}#ob-jump{width:92px;height:92px;bottom:calc(18px + env(safe-area-inset-bottom));font-size:20px}#ob-pad{bottom:calc(14px + env(safe-area-inset-bottom))}body.touch #ob-emotes,body.coarse #ob-emotes{bottom:calc(124px + env(safe-area-inset-bottom));right:calc(120px + env(safe-area-inset-right));flex-direction:row;top:auto}#ob-results{max-height:62vh}#ob-toasts{top:calc(max(8px, env(safe-area-inset-top)) + 46px)}#ob-big{font-size:60px}#ob-banner b{font-size:28px}}@keyframes ob-pulse{50%{transform:translateX(var(--tx,0)) scale(1.06)}}#ob-call{--tx:-50%}@keyframes ob-banner{0%{opacity:0;transform:translate(-50%,-30%)scale(.8)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.06)}20%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)}}@keyframes ob-big{0%{opacity:0;transform:translate(-50%,-50%)scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%)scale(.95)}25%{transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-70%)scale(1)}}@keyframes ob-toast{0%{opacity:0;transform:translate(-12px)}8%{opacity:1;transform:none}85%{opacity:1}to{opacity:0}}