:root{color:#f6f8ff;background:#0b0d14;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}*{box-sizing:border-box}body{background:#0b0d14;min-height:100vh;margin:0}#app{min-height:100vh}.phone-stage{place-items:center;min-height:100vh;padding:0;display:grid}.phone-frame{background:#070a12;width:min(100vw,56.25vh);height:min(100vh,177.778vw);position:relative;overflow:hidden}.phone-camera{object-fit:cover;width:100%;height:100%;display:block;transform:scaleX(-1)}.scene{width:100%;height:100%;position:relative;overflow:hidden}.scene-overlay{pointer-events:none;position:absolute;inset:0}.road{transform-origin:bottom;background:linear-gradient(90deg,#949ab0f5 0 8%,#383c4ef5 8% 92%,#949ab0f5 92% 100%);border-top:2px solid #f2f7ffa8;width:160%;height:80%;position:absolute;bottom:-47%;left:50%;transform:translate(-50%)perspective(700px)rotateX(65deg);box-shadow:inset 0 12px 36px #00000073}.lane{background:repeating-linear-gradient(0deg,#fffffff5 0 18px,#0000 18px 34px);width:7px;height:66%;position:absolute;bottom:17%}.lane-left{left:41%}.lane-right{left:57%}.wall{aspect-ratio:1.08;background:repeating-linear-gradient(0deg,#a95757 0 18px,#8f4040 18px 20px,#a95757 20px 38px),repeating-linear-gradient(90deg,#0000 0 25px,#8f4040 25px 28px,#0000 28px 54px);border:2px solid #7c3b3b;border-radius:6px;width:29%;position:absolute;top:35%;right:6%;box-shadow:0 12px 30px #00000057}.wall-label{text-align:center;color:#fff3f3;text-shadow:0 2px 6px #000000a3;font-size:.82rem;font-weight:700;position:absolute;top:8px;left:8px;right:8px}.wall .hole{opacity:0;background:#080a129e;border-radius:50%;width:52px;height:52px;transition:opacity .18s;position:absolute;top:59%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 4px #0d0e14e6,0 0 0 2px #ffe8e86b}.wall.open .hole{opacity:1}.ball{color:#fc6a6a;background:#373b48f5;border:2px solid #aab2d0cc;border-radius:13px;place-items:center;width:56px;height:56px;display:grid;position:absolute;bottom:14%;left:8%;box-shadow:0 10px 20px #00000054}.ball-mark{font-size:2rem;font-weight:800;line-height:1}.ball.moving,.ball.listening{animation:1.6s linear infinite moveForward}.ball.blocked{animation:.65s ease-out hitBounce}.ball.passed{background:radial-gradient(circle at 30% 22%,#fff9c8 0 16%,#ff9d46 72%);border-color:#ffe28feb;border-radius:50%;animation:.9s ease-in forwards passHole}@keyframes moveForward{0%{bottom:14%;left:8%;transform:scale(1)}to{bottom:33%;left:63%;transform:scale(.78)}}@keyframes hitBounce{0%{bottom:30%;left:61%;transform:scale(.84)}45%{bottom:34%;left:68%;transform:scale(.78)}to{bottom:26%;left:52%;transform:scale(.9)}}@keyframes passHole{0%{bottom:30%;left:61%;transform:scale(.82)}58%{bottom:36%;left:76%;transform:scale(.66)}to{bottom:39%;left:88%;transform:scale(.5)}}.overlay-meta{text-shadow:0 2px 6px #000000a8;justify-content:space-between;font-size:.84rem;font-weight:700;display:flex;position:absolute;top:14px;left:14px;right:14px}.overlay-message{text-align:center;text-shadow:0 2px 6px #000000a8;margin:0;font-size:.86rem;font-weight:600;position:absolute;bottom:18px;left:14px;right:14px}.overlay-error{text-align:center;color:#ffd8d8;text-shadow:0 2px 6px #000000a8;margin:0;font-size:.8rem;font-weight:700;position:absolute;bottom:46px;left:14px;right:14px}.success-screen{text-align:center;place-content:center;gap:10px;min-height:100vh;padding:20px;display:grid}.success-screen h1{margin:0;font-size:clamp(1.8rem,3.8vw,2.8rem)}.success-screen p{color:#d7def8;margin:0}button{color:#f4f7ff;cursor:pointer;background:#3f7dff;border:none;border-radius:10px;margin-top:8px;padding:10px 14px;font-size:.96rem}.start-overlay-btn{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080c17bf;border:1px solid #ffffff73;border-radius:999px;margin:0;padding:12px 18px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}