:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #071328; font-family: Inter, Arial, sans-serif; color: #fff; }
.game-shell { width: min(100vw, 500px); height: min(100vh, 920px); background: #081c38; box-shadow: 0 0 60px #000b; }
.game { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; touch-action: none; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; contain: strict; }
.route-status { position:absolute; z-index:3; top:max(12px, env(safe-area-inset-top)); left:50%; display:grid; grid-template-columns:auto minmax(112px,1fr); align-items:center; gap:10px; width:min(270px,70vw); min-height:42px; transform:translateX(-50%); padding:7px 11px 7px 13px; border:1px solid #b8e5ff42; border-radius:999px; background:linear-gradient(110deg,#06142bd9,#071d38c2); box-shadow:0 5px 18px #0008,inset 0 1px #d8f7ff12; backdrop-filter:blur(10px) saturate(125%); pointer-events:none; }
.route-copy { display:grid; gap:1px; min-width:48px; line-height:1; text-align:left; text-shadow:0 1px 2px #001; }
.route-distance { color:#f2fbff; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.015em; }
.route-label { color:#b6d7e9; font-size:9px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.route-track { position:relative; height:3px; margin:0 3px 0 0; border-radius:999px; background:linear-gradient(90deg,#9fc7de 0%,#e4f5fb 72%,#f0a0a7 100%); box-shadow:0 1px 3px #0009,inset 0 1px #fff8; }
.route-waypoint { position:absolute; top:50%; width:7px; height:7px; border:1px solid #dff5ffb5; border-radius:50%; background:#0a2542; box-shadow:0 0 0 2px #071a32,0 0 5px #a4e5ff55; transform:translate(-50%,-50%); }
.waypoint-one { left:29%; }.waypoint-two { left:56%; }.waypoint-three { left:78%; }
.route-marker { position:absolute; top:50%; border-radius:50%; transform:translate(-50%,-50%); }
.player-marker { left:0; width:12px; height:12px; border:2px solid #e9fbff; background:#31bfff; box-shadow:0 0 0 3px #0874bd8a,0 0 12px #35c6ff; transition:left .12s linear; }
.boss-marker { left:100%; width:12px; height:12px; border:2px solid #ffe9ec; background:#f53647; box-shadow:0 0 0 3px #9b1f2c8a,0 0 12px #ff5364; }
.action-button { position:absolute; z-index:5; left:50%; bottom:31px; transform:translateX(-50%); border:3px solid #fff; border-radius:999px; padding:15px 25px; color:#073465; background:linear-gradient(#fff,#b7edff); font-weight:1000; font-size:19px; letter-spacing:.05em; box-shadow:0 6px 0 #5491bb,0 10px 25px #0019; white-space:nowrap; cursor:pointer; }.action-button:active { margin-bottom:-4px; box-shadow:0 2px 0 #5491bb; }
.toast { position:absolute; z-index:4; top:28%; left:50%; transform:translate(-50%,-10px) scale(.8); opacity:0; font-size:31px; font-weight:1000; color:#fff; text-shadow:0 3px 0 #0a356b,0 0 14px #02dcff; transition:.22s ease; pointer-events:none; white-space:nowrap; }.toast.show { opacity:1; transform:translate(-50%,0) scale(1); }
.start-overlay { position:absolute; z-index:7; inset:0; display:grid; align-content:center; justify-items:center; gap:16px; padding:42px 25px; text-align:center; background:linear-gradient(180deg,#08295bdd 0%,#061936b8 48%,#061329e8 100%); backdrop-filter:blur(2px); }.start-kicker { padding:7px 12px; border:1px solid #7eefff; border-radius:999px; color:#7eefff; font-size:12px; font-weight:1000; letter-spacing:.16em; text-shadow:0 0 12px #00cfff; }.start-title { font-size:clamp(30px,8vw,43px); font-weight:1000; line-height:.96; color:#fff; text-shadow:0 4px 0 #07336a,0 0 20px #00bdfb; }.start-overlay p { margin:0 0 10px; max-width:260px; color:#d9f6ff; font-size:15px; font-weight:700; line-height:1.4; }.start-button { position:static; transform:none; min-width:190px; padding:18px 32px; font-size:24px; color:#062f62; background:linear-gradient(#fff,#74e7ff); box-shadow:0 7px 0 #2585b8,0 0 28px #35e8ff99; }.start-button:active { margin-bottom:-4px; box-shadow:0 3px 0 #2585b8,0 0 20px #35e8ff99; }
.end-card { position:absolute; z-index:6; inset:27% 8% auto; padding:27px 18px 25px; text-align:center; border:3px solid #fff; border-radius:25px; background:linear-gradient(145deg,#073b7cf2,#10235df2); box-shadow:0 14px 45px #000b; }.end-card div { font-size:35px; font-weight:1000; color:#fff07b; text-shadow:0 3px #b87000; }.end-card p { margin:9px 0 21px; font-weight:700; line-height:1.4; }.end-card .action-button { position:static; transform:none; }.hidden { display:none; }
@media (max-width:500px) { .game-shell { width:100vw; height:100vh; } }