.number-runner-page #main{max-width:1120px;padding-top:20px}
.nr-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nr-heading h1{font-size:clamp(26px,4vw,38px);margin:0}
.nr-heading p{margin:4px 0 12px}
.nr-heading a{font-size:14px}
.nr-options{display:flex;align-items:end;gap:12px;margin:8px 0 12px;flex-wrap:wrap}
.nr-options label{display:grid;gap:4px;font-size:13px;font-weight:700}
.nr-options select{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:15px;background:white;border:1px solid #c3d7e4;border-radius:12px;padding:10px;max-width:100%}
.nr-options button{margin-left:auto;padding:10px 16px}
.nr-frame{position:relative;isolation:isolate;height:clamp(340px,calc(100svh - 320px),560px);min-height:340px;overflow:hidden;border:1px solid #bdd8e8;border-radius:24px;background:#d9eff9;touch-action:pan-y;outline-offset:3px}
.nr-frame canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.nr-hud{position:absolute;top:12px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:4}
.nr-hud>div:first-child{background:#fffffff0;border-radius:16px;padding:6px 20px;text-align:center;box-shadow:0 2px 10px #17608012}
.nr-hud span{display:block;font-size:13px}
.nr-hud output{display:block;font-size:32px;line-height:1.1;font-weight:800;color:#173a56}
.nr-progress{flex:1;max-width:300px;text-align:center}
.nr-progress progress{width:100%;height:12px;accent-color:#ed1231}
.nr-hud button{padding:10px 14px;font-size:14px;background:#fff}
.nr-gate,.nr-enemy{position:absolute;top:0;left:0;display:grid;place-content:center;gap:2px;min-height:80px;width:24%;max-width:190px;padding:8px 3px;box-sizing:border-box;text-align:center;font-size:clamp(14px,2.5vw,23px);font-weight:800;line-height:1.15;will-change:transform;pointer-events:none;color:#183a51}
.nr-gate{background:linear-gradient(#fff 70%,#f0faffdd);border:5px solid #2992ca;border-bottom-width:2px;border-radius:48% 48% 10px 10px;box-shadow:0 4px 0 #fff8,inset 0 0 0 2px #fff}
.nr-gate.weak{border-color:#e83a50}
.nr-gate small{font:inherit}
.nr-enemy{background:#243951;color:white;border-radius:36% 40% 30% 30%;width:20%;max-width:145px;min-height:78px;box-shadow:0 5px 0 #1a2c3d;clip-path:polygon(10% 20%,0 0,30% 10%,50% 0,70% 10%,100% 0,90% 30%,100% 60%,90% 100%,10% 100%,0 60%)}
.nr-enemy::before{content:'•  •';letter-spacing:8px;font-size:24px;line-height:.6;color:white}
.nr-lane-mark{position:absolute;width:20%;height:7px;background:#fff9;border-radius:10px;pointer-events:none}
.nr-frame #nr-cub{position:absolute;left:50%;top:71%;width:150px;height:150px;transform:translate(-50%,-50%);pointer-events:none;will-change:transform;z-index:2}
.nr-controls{position:absolute;bottom:12px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:end;z-index:5;pointer-events:none}
.nr-controls button{pointer-events:auto;min-width:70px;min-height:52px;background:#ffffffef;border:1px solid #b1d3e7;border-radius:16px;color:#154f77;font-size:32px;font-weight:800;box-shadow:0 3px 0 #a8cfe0;touch-action:manipulation}
.nr-controls #nr-continue{font-size:16px;padding:10px;max-width:44%}
.nr-controls button:disabled{opacity:.45}
.nr-overlay{position:absolute;inset:0;background:#eaf5fbe8;z-index:6;display:grid;place-items:center;text-align:center;padding:20px}
.nr-overlay>div{max-width:460px}
.nr-overlay h2{font-size:30px;margin:0 0 12px}
.nr-overlay p{font-size:17px;line-height:1.5}
.nr-overlay[hidden],.nr-controls [hidden]{display:none}
.nr-feedback{min-height:1.5em;text-align:center;margin:8px 0;font-size:18px;color:#176080;font-weight:700}
.nr-help{font-size:14px;margin:4px 0 16px;color:#567083}
.nr-frame:fullscreen{height:100svh;width:100vw;border-radius:0;max-height:none}
.nr-game-link{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid #d0e3ef;background:#fff;border-radius:20px;margin:12px 0 24px}
.nr-game-link img{width:50px;height:65px;object-fit:contain}
.nr-game-link p{margin:0;font-size:15px}
.nr-game-link strong{display:block;font-size:20px}
@media(max-width:600px){.nr-heading{align-items:start}
.nr-heading a{max-width:100px;text-align:right}
.nr-options{gap:8px}
.nr-options label{flex:1 1 130px;min-width:0}
.nr-options button{font-size:12px;padding:8px}
.nr-frame{height:clamp(390px,65svh,560px)}
.nr-hud{gap:8px;left:10px;right:10px;top:10px}
.nr-hud>div:first-child{padding:6px 12px}
.nr-hud output{font-size:27px}
.nr-hud button{padding:8px;font-size:13px}
.nr-gate{width:29%;border-width:4px;min-height:80px;font-size:16px}
.nr-enemy{width:24%;font-size:17px}
.nr-controls button{min-width:64px}
.nr-help{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.nr-frame *{scroll-behavior:auto}
}

/* The monster is drawn on Canvas; this stationary card identifies his target. */
.nr-enemy{clip-path:none;box-shadow:0 3px 0 #153943;background:#245c61;border:2px solid #c5dcd5;border-radius:14px;width:26%;max-width:150px;min-height:64px;padding:6px 2px}
.nr-enemy::before{content:none}
.nr-enemy>span:first-child{font-size:clamp(10px,1.7vw,16px);font-weight:600}

.nr-pack .nr-member{position:absolute;margin:0;max-width:none;object-fit:contain;pointer-events:none;animation:nr-pack-step .55s ease-in-out infinite alternate;animation-play-state:paused}
.nr-pack.is-walking .nr-member{animation-play-state:running}
@keyframes nr-pack-step{from{transform:translateY(-1px) rotate(-1deg)}to{transform:translateY(1px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.nr-pack .nr-member{animation:none}}
.nr-swarm{position:absolute;top:21%;left:50%;transform:translateX(-50%);max-width:92%;padding:6px 12px;border-radius:14px;background:#fff3dded;border:1px solid #d9a675;color:#684328;text-align:center;font-size:clamp(12px,1.6vw,16px);font-weight:700;z-index:3;pointer-events:none}
.nr-swarm[hidden]{display:none}
.nr-gate[hidden],.nr-enemy[hidden],.nr-lane-mark[hidden]{display:none}
.nr-pack .nr-member.is-leaving{opacity:0;transition:opacity .035s linear}

/* Reuse the approved three-second family animation inside the win card. */
.nr-overlay #nr-victory{position:static;inset:auto;z-index:auto;display:block;width:100%;height:auto;max-height:min(220px,35svh);object-fit:contain}
.nr-overlay #nr-victory[hidden]{display:none}
.nr[data-won="true"] .nr-overlay{background:#f4fafff5}
.nr[data-won="true"] .nr-overlay h2{margin-bottom:0}
.nr[data-won="true"] .nr-overlay p{margin:0 0 12px}


.nr-route-preview{margin:10px 0 16px}.nr-route-preview>p{margin:0 0 6px;font-weight:700;font-size:14px}
#nr-route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;list-style:none;padding:0;margin:0}
#nr-route li{padding:8px;border:1px solid #c6dce9;border-radius:10px;background:#fff;font-size:11px;overflow-wrap:anywhere}
#nr-route strong,#nr-route span{display:block}#nr-route strong{font-size:12px;color:#194d70}
#nr-route .is-final{border:2px solid #b76b22;background:#fff3df}
#nr-route [aria-current]{outline:2px solid #127ba9;outline-offset:1px;background:#e9f8ff}
#nr-route .is-complete{opacity:.65}
@media(max-width:600px){#nr-route{grid-template-columns:repeat(2,minmax(0,1fr))}#nr-route li{padding:5px 8px}#nr-route .is-final{grid-column:1/-1}}

.nr-route-preview>p{display:flex;justify-content:space-between;align-items:center;gap:8px}#nr-new-course{padding:5px 10px;font-size:12px}


.nr-overlay #nr-result-father{display:block;width:min(240px,70vw);height:auto;max-height:32svh;object-fit:contain;margin:4px auto 12px}.nr-overlay #nr-result-father[hidden]{display:none}