:root{font-family:Arial,Helvetica,sans-serif;color:#f4f7fc;background:#071629;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}#app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:radial-gradient(ellipse at 50% 48%,#123456,#091d34 49%,#071629)}header{position:absolute;top:calc(env(safe-area-inset-top,0px) + 26px);left:calc(env(safe-area-inset-left,0px) + 24px);right:calc(env(safe-area-inset-right,0px) + 24px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{font-weight:900;font-size:15px;letter-spacing:2.4px}.brand b{font-size:10px;letter-spacing:2px;color:#87a8c9;margin-left:5px}.brand-mark{color:#438bc1;font-size:22px}.court{position:absolute;inset:88px 22px 70px;border:1px solid #9ebcda10;border-radius:12px;pointer-events:none}.court:before{content:"";position:absolute;left:50%;top:50%;width:160px;height:160px;border:1px solid #9ebcda13;border-radius:50%;transform:translate(-50%,-50%)}.court:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#9ebcda10}#faces,#center,#result,footer{pointer-events:none}#faces{position:absolute;inset:0}.touch{position:absolute;inset:0;transition:opacity .24s}.dimmed{opacity:.25}.ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;border:1.5px solid #61b5fa;background:#238ceb12}.chosen .ring{border:3px solid white;box-shadow:0 0 0 8px #087ccd55}.connector{position:absolute;height:1px;background:#65b3e978;transform-origin:left center}.face{position:absolute;left:0;top:0;border-radius:50%;border:1px solid #76b9e9;box-shadow:0 5px 20px #0005;transition:transform 90ms linear,width .15s,height .15s}.chosen .face{border:3px solid white;box-shadow:0 0 0 5px #007bcb,0 8px 26px #0008}.portrait{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(140deg,#235887,#0b2947);border-radius:inherit}.portrait img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 34%;-webkit-user-drag:none}.fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;font-weight:700;color:#c8def2}.participant{position:absolute;bottom:-5px;right:0;display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:12px;background:#e9f4ff;color:#103252;font-size:10px;font-weight:700;border:2px solid #0a2038}#center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#a6c5e2;font-size:13px;width:80%}#center.countdown{font-size:104px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-7px;text-shadow:0 8px 40px #001327}#result{position:absolute;align-items:center;justify-content:center;flex-direction:column;border-radius:18px;background:radial-gradient(ellipse,#0a2f50ee,#071b30e8);z-index:2;padding:12px;box-shadow:0 12px 45px #0003}#result .portrait{width:170px;height:170px;border-radius:50%;border:2px solid #b7ddff;box-shadow:0 0 0 5px #007bc74a}#result h1{margin:15px 0 0;font-size:21px;font-weight:700;text-align:center;letter-spacing:-.4px}.result-label{font-size:9px;letter-spacing:3px;color:#8dc6f2;margin-bottom:15px}footer{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:8px;letter-spacing:3px;color:#67829c}footer i{width:18px;height:1px;background:#3a5874}@media(max-height:480px){header{top:14px}.court{inset:60px 22px 40px}footer{bottom:14px}#result .portrait{width:100px;height:100px}#result h1{font-size:17px;margin-top:8px}.result-label{margin-bottom:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}#result{inset:0;width:100%;height:100%;padding:calc(env(safe-area-inset-top,0px) + 20px) calc(env(safe-area-inset-right,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 20px) calc(env(safe-area-inset-left,0px) + 24px);align-items:center;justify-content:center;background:#020b18b8;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:0;box-shadow:none;z-index:5;pointer-events:auto}.result-card{width:min(100%,320px);padding:28px 24px 24px;display:flex;flex-direction:column;align-items:center;border:1px solid #4384b869;border-radius:24px;background:linear-gradient(155deg,#173c60,#0a213b);box-shadow:0 24px 70px #0007}#result .portrait{width:190px;height:190px;max-width:100%;flex-shrink:0}#result h1{font-size:24px;margin:22px 0 24px}.retry{width:100%;min-height:50px;border:0;border-radius:12px;color:#fff;background:#007acb;font:700 16px Arial,Helvetica,sans-serif;cursor:pointer;touch-action:manipulation}.retry:focus-visible{outline:3px solid white;outline-offset:4px}.retry:active{background:#0665a5}@media(max-height:480px){.result-card{padding:16px 22px;width:min(100%,300px)}#result .portrait{width:105px;height:105px}#result h1{font-size:20px;margin:12px 0 16px}.retry{min-height:44px}.result-label{margin-bottom:10px}}