:root{font-family:Pretendard,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#fff;background:#0f52e8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}button{font-family:inherit}.live-display{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 52% 16%,#bae6fdf2,#60a5fa94 26%,#2563eb00 54%),linear-gradient(145deg,#1248d5,#1d7cf2 48%,#38bdf8)}.live-display:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.48;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.28) 0 1px,transparent 2px) 0 0 / 82px 82px,radial-gradient(circle at 80% 18%,rgba(255,255,255,.18) 0 1px,transparent 2px) 0 0 / 126px 126px}.bg-orb{position:absolute;border-radius:999px;filter:blur(6px);pointer-events:none}.orb-a{width:360px;height:360px;left:-120px;top:140px;background:#ffffff1f}.orb-b{width:440px;height:440px;right:-160px;bottom:70px;background:#ffffff1c}.top-bar{position:fixed;z-index:50;top:24px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.brand,.socket-status{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:#0f172a3d;box-shadow:0 14px 34px #0f172a29;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{padding:10px 18px 10px 10px;font-size:16px;font-weight:1000;letter-spacing:-.03em}.socket-status{padding:12px 16px;color:#ffffffe6;font-size:14px;font-weight:950}.socket-status svg{flex:0 0 auto}.socket-status:before{content:"";width:10px;height:10px;border-radius:999px;background:#f87171;box-shadow:0 0 0 5px #f871712e}.socket-status.is-connected:before{background:#34d399;box-shadow:0 0 0 5px #34d39933}.main-stage{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:96px 28px 190px}.center-card{position:relative;z-index:10;width:min(1050px,90vw);border-radius:48px;padding:clamp(34px,6vw,76px);text-align:center;box-shadow:0 42px 120px #0f172a45}.waiting-card,.scan-card{border:1px solid rgba(255,255,255,.3);background:#ffffff2b;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.school-run-logo{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;border-radius:30%;background:linear-gradient(150deg,#67e8f9,#2563eb 54%,#1238b7);box-shadow:inset 0 8px 20px #ffffff5c,inset 0 -10px 24px #0f172a33,0 24px 46px #1e40af59}.school-run-logo.large{width:clamp(136px,16vw,206px);height:clamp(136px,16vw,206px);margin-bottom:30px}.school-run-logo.small{width:42px;height:42px;border-radius:16px;box-shadow:inset 0 3px 8px #ffffff52,0 8px 16px #0f172a29}.logo-track{position:relative;width:60%;height:38%;border:7px solid #fff;border-radius:999px;box-shadow:inset 0 0 0 7px #ffffff38}.school-run-logo.small .logo-track{border-width:3px;box-shadow:inset 0 0 0 3px #ffffff38}.logo-runner .head{position:absolute;width:14%;height:22%;border-radius:999px;background:#fff;left:37%;top:16%}.logo-runner .body,.logo-runner .arm,.logo-runner .leg,.logo-runner .speed{position:absolute;height:9%;border-radius:999px;background:#fff;transform-origin:left center}.logo-runner .body{width:24%;left:37%;top:47%;transform:rotate(16deg)}.logo-runner .arm-front{width:22%;left:48%;top:48%;transform:rotate(-34deg)}.logo-runner .arm-back{width:22%;left:35%;top:55%;transform:rotate(145deg)}.logo-runner .leg-front{width:28%;left:49%;top:66%;transform:rotate(26deg)}.logo-runner .leg-back{width:27%;left:38%;top:66%;transform:rotate(136deg)}.logo-runner .speed{width:16%;left:13%;height:6%;opacity:.9}.logo-runner .s1{top:38%}.logo-runner .s2{top:54%;width:12%}.logo-flag{position:absolute;right:13%;top:22%;width:3px;height:42%;border-radius:999px;background:#fff}.logo-flag span{position:absolute;left:0;top:0;width:18px;height:12px;background:#fff;border-radius:3px 8px 8px 3px}.school-run-logo.small .logo-flag span{width:8px;height:6px}.logo-km{display:flex;align-items:center;gap:8px;margin-top:7%;color:#fff;font-size:clamp(15px,2vw,22px);line-height:1;font-weight:1000;letter-spacing:.05em}.school-run-logo.small .logo-km{display:none}.logo-km i{display:block;width:28px;height:5px;border-radius:999px;background:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 12px)}.waiting-card h1{margin:0;font-size:clamp(56px,8vw,112px);line-height:.95;font-weight:1000;letter-spacing:-.07em;text-shadow:0 10px 30px rgba(15,23,42,.18)}.waiting-card p{margin:18px 0 14px;font-size:clamp(28px,3.4vw,46px);line-height:1.16;font-weight:950;color:#ffffffe0}.waiting-help{max-width:720px;margin:0 auto 28px;font-size:clamp(16px,1.8vw,24px);font-weight:800;line-height:1.55;color:#ffffffb3}.event-pill,.completed-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:#ffffff2e;border:1px solid rgba(255,255,255,.16);font-size:clamp(18px,2vw,28px);font-weight:1000}.scan-card h2{margin:28px 0 0;font-size:clamp(76px,10vw,160px);line-height:.94;font-weight:1000;letter-spacing:-.08em;text-shadow:0 10px 28px rgba(15,23,42,.18)}.sub-title{margin-top:18px;color:#fffc;font-size:clamp(26px,3.2vw,48px);font-weight:950}.distance-number{margin-top:32px;font-size:clamp(76px,11vw,168px);line-height:.9;font-weight:1000;letter-spacing:-.08em}.info-chips{margin:28px auto 32px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.info-chips span{padding:13px 18px;border-radius:999px;background:#ffffff26;color:#ffffffeb;font-size:clamp(16px,1.7vw,24px);font-weight:950}.progress-bar{height:clamp(22px,2.2vw,32px);overflow:hidden;border-radius:999px;background:#0f172a3d;box-shadow:inset 0 2px 8px #00000024}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#fff,#fef08a,#facc15);box-shadow:0 0 26px #facc1570;transition:width .5s ease}.progress-copy{margin-top:14px;font-size:clamp(18px,2vw,30px);font-weight:950;color:#ffffffd6}.completed-card{width:min(1100px,91vw);background:#fff;color:#1d4ed8;box-shadow:0 46px 130px #0f172a61;border:0}.medal-wrap{display:inline-flex;width:clamp(96px,10vw,148px);height:clamp(96px,10vw,148px);align-items:center;justify-content:center;border-radius:42px;color:#f59e0b;background:linear-gradient(145deg,#fff7ed,#fef3c7);box-shadow:0 22px 40px #f59e0b38}.completed-eyebrow{margin-top:28px;background:#eff6ff;color:#2563eb;border:0}.completed-card h2{margin:26px 0 0;font-size:clamp(54px,7vw,112px);line-height:1.03;font-weight:1000;letter-spacing:-.07em}.completed-name{margin-top:34px;color:#0f172a;font-size:clamp(74px,9vw,146px);line-height:.94;font-weight:1000;letter-spacing:-.08em}.completed-class{margin-top:18px;color:#64748b;font-size:clamp(26px,3vw,48px);font-weight:950}.completed-distance{margin-top:38px;color:#2563eb;font-size:clamp(84px,11vw,178px);line-height:.88;font-weight:1000;letter-spacing:-.09em}.completed-card p{margin:34px 0 0;color:#475569;font-size:clamp(22px,2.6vw,40px);line-height:1.25;font-weight:950}.track-scene{position:absolute;left:0;right:0;bottom:-58px;height:390px;pointer-events:none;overflow:hidden}.school-building{position:absolute;right:7vw;bottom:230px;width:min(470px,38vw);height:150px;opacity:.2;border-radius:28px 28px 0 0;background:linear-gradient(#fff,#fff) 50% 0 / 11% 38% no-repeat,linear-gradient(#fff,#fff) 50% 36% / 18% 64% no-repeat,linear-gradient(#fff,#fff) 0 76% / 100% 24% no-repeat,repeating-linear-gradient(90deg,transparent 0 20px,#fff 20px 34px,transparent 34px 56px) 10% 58% / 80% 16% no-repeat}.school-building .roof{position:absolute;left:42%;top:-12px;width:16%;height:18px;background:#fff;border-radius:20px 20px 0 0}.school-building .flag{position:absolute;left:54%;top:-32px;width:38px;height:24px;border-radius:4px 14px 14px 4px;background:#fff}.school-building .clock{position:absolute;left:50%;top:31px;transform:translate(-50%);width:26px;height:26px;border:5px solid #fff;border-radius:999px}.track-lanes{position:absolute;left:0;right:0;bottom:-100px;height:480px}.lane{position:absolute;bottom:-100px;height:560px;border:4px solid rgba(255,255,255,.42);border-bottom:0;border-radius:50% 50% 0 0;transform:perspective(720px) rotateX(63deg)}.lane-a{left:10%;right:10%}.lane-b{left:21%;right:21%;border-color:#ffffff8f}.lane-c{left:32%;right:32%;border-color:#ffffffb3}.lane-d{left:43%;right:43%;border-color:#ffffffdb}.marker{position:absolute;padding:8px 13px;border-radius:999px;color:#fff;font-size:18px;font-weight:1000;background:#ffffff2e;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 20px #0f172a1a}.marker:after{content:"";position:absolute;left:50%;bottom:-13px;width:10px;height:10px;border-radius:999px;background:#fff;box-shadow:0 0 18px #fff;transform:translate(-50%)}.marker-0{left:14%;bottom:80px}.marker-1{left:38%;bottom:154px}.marker-2{right:34%;bottom:205px}.marker-3{right:14%;bottom:252px}.recent-panel{position:fixed;z-index:60;right:28px;bottom:28px;width:min(374px,calc(100vw - 56px));max-height:44vh;overflow:hidden;border-radius:30px;border:1px solid rgba(255,255,255,.18);background:#0f172a4d;box-shadow:0 22px 62px #0f172a38;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.recent-header{padding:18px 20px 9px;font-size:16px;font-weight:1000}.recent-list{padding:0 14px 14px;display:grid;gap:10px}.recent-empty{padding:18px;color:#ffffffad;font-size:14px;font-weight:800}.recent-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 14px;border-radius:18px;background:#ffffff1f}.recent-item strong{display:block;font-size:15px;font-weight:1000}.recent-item small{display:block;margin-top:3px;color:#ffffffad;font-size:12px;font-weight:800}.recent-item b{flex:0 0 auto;font-size:15px;font-weight:1000}.confetti-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9;pointer-events:none;overflow:hidden}.confetti-layer span{--x: calc((var(--i) * 29) % 100);position:absolute;left:calc(var(--x) * 1%);top:-60px;width:16px;height:42px;border-radius:999px;background:hsl(calc(var(--i) * 37),88%,64%);animation:confettiFall 2.8s linear infinite;animation-delay:calc(var(--i) * -.11s)}.test-buttons{position:fixed;z-index:80;left:28px;bottom:28px;display:flex;gap:10px;flex-wrap:wrap}.test-buttons button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:16px;padding:12px 15px;color:#1d4ed8;background:#fff;font-size:13px;font-weight:1000;box-shadow:0 10px 28px #0f172a38}.animate-pop{animation:popIn .45s cubic-bezier(.2,1.18,.2,1) both}.animate-celebrate{animation:celebrateIn .7s cubic-bezier(.2,1.18,.2,1) both}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(32px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes celebrateIn{0%{opacity:0;transform:scale(.82) rotate(-1.5deg)}66%{opacity:1;transform:scale(1.04) rotate(1deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes confettiFall{0%{transform:translate3d(0,-80px,0) rotate(0);opacity:0}12%{opacity:1}to{transform:translate3d(calc((var(--i) % 2) * 60px - 30px),115vh,0) rotate(540deg);opacity:0}}@media (max-width: 820px){body{overflow:auto}.top-bar{top:14px;left:14px;right:14px}.brand{padding:8px 12px 8px 8px;font-size:13px}.socket-status{padding:9px 11px;font-size:12px}.main-stage{padding:84px 16px 248px}.center-card{width:100%;border-radius:34px;padding:32px 20px}.recent-panel{left:14px;right:14px;bottom:14px;width:auto}.test-buttons{left:14px;bottom:224px;right:14px}.test-buttons button{flex:1;justify-content:center}.marker{font-size:13px}}.sound-enable-button,.sound-ready-pill{position:fixed;z-index:90;left:50%;top:82px;transform:translate(-50%);display:inline-flex;align-items:center;gap:10px;border-radius:999px;border:1px solid rgba(255,255,255,.34);padding:13px 20px;color:#fff;font-size:16px;font-weight:1000;letter-spacing:-.02em;background:#0f172a5c;box-shadow:0 16px 36px #0f172a38;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.sound-enable-button{cursor:pointer;animation:soundPulse 1.8s ease-in-out infinite}.sound-enable-button:active{transform:translate(-50%) scale(.98)}.sound-ready-pill{background:#16a34a61}.completed-view{padding-bottom:150px}.completion-popup-backdrop{position:fixed;z-index:25;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:92px 28px 130px;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.22),transparent 38%),#0f172a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.celebration-flash{position:fixed;z-index:24;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.82),rgba(255,255,255,.18) 26%,transparent 54%);animation:flashBoom 1.1s ease-out both}.ba-bam{position:absolute;left:50%;top:-42px;transform:translate(-50%) rotate(-3deg);padding:14px 30px 16px;border-radius:999px;color:#fff;font-size:clamp(32px,5vw,76px);line-height:1;font-weight:1000;letter-spacing:-.08em;background:linear-gradient(135deg,#f97316,#ef4444,#db2777);box-shadow:0 24px 44px #ef44445c;text-shadow:0 5px 12px rgba(127,29,29,.28);animation:baBamPop .9s cubic-bezier(.2,1.7,.2,1) both}.sound-burst{position:absolute;top:-34px;right:-34px;bottom:-34px;left:-34px;pointer-events:none;border-radius:64px}.sound-burst i{position:absolute;left:50%;top:50%;width:88%;height:88%;border:6px solid rgba(250,204,21,.55);border-radius:999px;transform:translate(-50%,-50%) scale(.52);opacity:0;animation:soundWave 1.65s ease-out infinite}.sound-burst i:nth-child(2){animation-delay:.22s}.sound-burst i:nth-child(3){animation-delay:.44s}.completed-card{transform-origin:center}.completed-card:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#fef08a,#f97316,#38bdf8,#2563eb);filter:blur(8px);opacity:.8}@keyframes soundPulse{0%,to{box-shadow:0 16px 36px #0f172a38,0 0 #ffffff38}50%{box-shadow:0 16px 36px #0f172a38,0 0 0 10px #fff0}}@keyframes flashBoom{0%{opacity:0;transform:scale(.92)}18%{opacity:1;transform:scale(1.02)}to{opacity:0;transform:scale(1.18)}}@keyframes baBamPop{0%{opacity:0;transform:translate(-50%) scale(.55) rotate(-8deg)}55%{opacity:1;transform:translate(-50%) scale(1.14) rotate(3deg)}to{opacity:1;transform:translate(-50%) scale(1) rotate(-3deg)}}@keyframes soundWave{0%{opacity:.72;transform:translate(-50%,-50%) scale(.48)}to{opacity:0;transform:translate(-50%,-50%) scale(1.18)}}@media (max-width: 760px){.sound-enable-button,.sound-ready-pill{top:70px;font-size:13px;padding:10px 14px}.completion-popup-backdrop{padding:100px 14px 170px}.ba-bam{top:-30px}}