*,*::before,*::after{box-sizing:border-box}
:root{--ink:#14202b;--red:#d6342c;--gold:#ffc53d;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif}
html,body{margin:0;height:100%;overflow:hidden;background:#c7ddeb;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-family:var(--sans);color:var(--ink)}
canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
button{font-family:inherit}

/* top bar */
#hud{position:fixed;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;pointer-events:none}
.brand{font:900 17px/1 var(--sans);letter-spacing:-.01em;display:flex;align-items:center;gap:7px;white-space:nowrap;margin-right:auto}
.brand i{display:inline-block;width:22px;height:14px;border-radius:7px;border:3px solid var(--red);border-bottom-color:transparent;transform:rotate(-12deg)}
.hb{pointer-events:auto;appearance:none;border:0;height:40px;min-width:40px;padding:0 13px;border-radius:20px;background:rgba(20,32,43,.82);color:#fff;font:800 14px/1 var(--sans);cursor:pointer;display:none}
#redraw{font-size:19px;padding:0}
body.hasTrack #redraw{display:block}
/* mini map button: only while riding in 3D */
/* view toggles (track, pillars, mini map): only while riding in 3D */
.tog{position:relative;padding:0;display:none !important;align-items:center;justify-content:center}
.tog svg{width:22px;height:22px;display:block}
body.pov3d .tog{display:flex !important}
.tog::after{content:'';position:absolute;left:9px;right:9px;top:50%;height:2.5px;margin-top:-1px;border-radius:2px;background:#ff7a6e;transform:rotate(-45deg);display:none}
body.mapOff #mapBtn,body.railsOff #railBtn,body.postsOff #postBtn{background:rgba(20,32,43,.45);color:rgba(255,255,255,.75)}
body.mapOff #mapBtn::after,body.railsOff #railBtn::after,body.postsOff #postBtn::after{display:block}
body.pov3d .brand{visibility:hidden}
/* mini map (the course from the side, with where you are now) */
#mini{position:fixed;inset:auto;left:12px;top:calc(env(safe-area-inset-top) + 10px);z-index:8;display:none;width:auto;height:auto;border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 6px 20px rgba(0,30,60,.25);pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.pov3d:not(.mapOff) #mini{display:block}
@media (max-width:440px){body.hasTrack .brand span{display:none}}
#gl{z-index:1;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
body.pov3d #gl{opacity:1;visibility:visible;transition:opacity .7s ease}

/* start bar (after drawing) */
#startBar{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);transform:translateX(-50%);z-index:8;display:none;flex-direction:column;align-items:center;gap:10px;width:min(420px,calc(100vw - 24px))}
body.ready #startBar{display:flex}
#readyMsg{font:800 14px/1.3 var(--sans);background:rgba(255,255,255,.88);padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,40,80,.12);text-align:center}
#startBar .row2{display:flex;gap:10px;width:100%}
#startBar .btn{flex:1;padding:17px 10px;font-size:16px;box-shadow:0 6px 16px rgba(0,30,60,.15)}
#bGo{flex:1.7 !important;font-size:20px !important;letter-spacing:.04em;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.045);box-shadow:0 10px 26px rgba(214,52,44,.45)}}

/* start screen */
#hint{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;text-align:center;pointer-events:none;width:min(94vw,520px);transition:opacity .3s}
#hint.off{opacity:0}
#hint .h1{font:900 clamp(24px,6.6vw,40px)/1.15 var(--sans);letter-spacing:-.02em;text-shadow:0 2px 0 rgba(255,255,255,.6)}
#hint .sub{margin:12px 0 0;font:700 15px/1.5 var(--sans);opacity:.7}
#hint .pen{display:block;margin:14px auto 0;width:150px;height:56px}
#hint .pen path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.4s ease-in-out infinite}
@keyframes draw{60%,100%{stroke-dashoffset:0}}

#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translate(-50%,-8px);z-index:10;background:var(--ink);color:#fff;font:700 14px/1.4 var(--sans);padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);text-align:center}
#toast.in{opacity:1;transform:translate(-50%,0)}

/* cards */
.ov{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;padding:16px 12px calc(env(safe-area-inset-bottom) + 14px);background:linear-gradient(rgba(20,32,43,0) 40%,rgba(20,32,43,.35));overflow:auto;touch-action:pan-y}
.ov[hidden]{display:none}
.card{width:min(440px,100%);background:#fff;border-radius:22px;padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,30,60,.35);animation:up .45s cubic-bezier(.2,.9,.25,1.1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.kick{font:800 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:4px 0 7px}
.name{font:900 25px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 16px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{appearance:none;border:0;border-radius:14px;padding:15px 10px;font:800 15px/1 var(--sans);cursor:pointer;background:#eef3f7;color:var(--ink);text-align:center;text-decoration:none;display:block}
.btn.pri{background:var(--ink);color:#fff}
.btn.red{background:var(--red);color:#fff}
.btn.wide{grid-column:1/3}
.small{margin:12px 0 0;text-align:center;font-size:12px;opacity:.5;line-height:1.7}
.small a{color:inherit}
.ad-slot{margin-top:14px;display:flex;justify-content:center}
.ad-slot:empty{display:none}
@media (max-height:700px){.card{padding:14px 14px 12px}.name{font-size:22px;margin-bottom:12px}.btn{padding:13px 10px}.small{margin-top:8px}}

button:focus-visible,a:focus-visible{outline:3px solid #14202b;outline-offset:3px}