:root{--purple: #7c5cff;--purple-dark: #6647e0;--mint: #2ec4a5;--ink: #3a3357;--ink-soft: #6f6892;--card: #ffffff;--ok-ink: #14805c;--bad-ink: #d23c69}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:Jua,Apple SD Gothic Neo,Malgun Gothic,sans-serif;background:linear-gradient(160deg,#fef6ff,#eef3ff);min-height:100vh;color:var(--ink)}.app{max-width:520px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(28px + env(safe-area-inset-bottom,0px))}.header{display:flex;align-items:center;gap:10px;padding:8px 2px 14px}.logo{font-size:24px;margin:0;color:var(--purple-dark);flex:1}.course-chip{border:none;background:var(--purple);color:#fff;font-family:inherit;font-size:15px;border-radius:999px;padding:6px 14px;cursor:pointer}.sound-btn{border:none;background:none;font-size:20px;cursor:pointer;padding:4px}.stars{background:#fff4d6;color:#a06b00;border-radius:999px;padding:6px 12px;font-size:15px;animation:star-pop .25s ease-out}@keyframes star-pop{0%{transform:scale(.7)}to{transform:scale(1)}}.picker-title{font-size:20px;margin:18px 0 4px;text-align:center}.picker-sub{color:var(--ink-soft);font-size:14px;margin:0 0 18px;text-align:center}.grade-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grade-cell{background:var(--card);border-radius:14px;padding:14px;text-align:center;box-shadow:0 2px 10px #503c8c14}.grade-name{font-size:18px;margin-bottom:10px}.grade-btns{display:flex;gap:8px}.grade-btns .btn{flex:1;padding:10px 4px;font-size:14.5px}.btn{border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:16px;padding:12px 20px;cursor:pointer;transition:transform .12s}.btn:active{transform:scale(.96)}.btn.primary{background:var(--purple)}.btn.mint{background:var(--mint)}.module{display:flex;flex-direction:column;gap:12px}.runner-hud{display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:12px;padding:10px 14px;font-size:16px;box-shadow:0 2px 8px #503c8c14}.runner-scene3d{position:relative;height:clamp(420px,calc(100dvh - 250px),700px);border-radius:18px;overflow:hidden;background:#8ecbff;box-shadow:0 4px 14px #503c8c1f;-webkit-user-select:none;user-select:none}.runner-scene3d canvas{display:block}.steer-zones{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;z-index:2}.steer-zone{flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;touch-action:none;cursor:pointer}.steer-zone span{font-size:30px;color:#ffffff8c;text-shadow:0 2px 6px rgba(40,20,90,.35);transition:transform .12s,color .12s}.steer-zone.active span{color:#fff;transform:scale(1.3)}.runner-pop{position:absolute;left:50%;top:45%;pointer-events:none;transform:translate(-50%);background:#fffffff0;border-radius:999px;padding:10px 22px;font-size:22px;white-space:nowrap;box-shadow:0 6px 18px #28145a40;animation:pop-in .25s ease-out;z-index:3}.runner-pop.ok{color:var(--ok-ink)}.runner-pop.bad{color:var(--bad-ink)}@keyframes pop-in{0%{transform:translate(-50%) scale(.5);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}.runner-over{position:absolute;top:0;right:0;bottom:0;left:0;background:#1e163c99;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;z-index:4}.runner-over-title{font-size:26px}.runner-over p{margin:0 0 10px;font-size:17px}.runner-hint{margin:0;text-align:center;color:var(--ink-soft);font-size:14px}