/* WAKE RIDERS (v11; style base v7) — minimal: Liquid Glass light, one quiet line of text in play */
:root {
--ink: #1b2740; --ink2: rgba(27,39,64,.6);
--sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
/* full-screen height. Safari tab: the visible area (dvh). Home-screen app: 100lvh. In iOS standalone, 100%/dvh/inset:0
resolve to screen − top inset (WebKit bug), which left a blank strip at the bottom in v7. */
--fullh: 100dvh;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
--shade: 0 1px 10px rgba(80,40,40,.32);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@media (display-mode: standalone), (display-mode: fullscreen) { :root { --fullh: 100lvh; } }
html.standalone { --fullh: 100lvh; }
/* anything iOS shows outside the canvas (home-indicator strip, overscroll) matches the sea at the bottom of the frame */
html[data-stage=tropic], html[data-stage=tropic] body { background-color: #1b7d9b; }
html[data-stage=night], html[data-stage=night] body { background-color: #12182d; }
html, body { margin: 0; height: var(--fullh); overflow: hidden; background: #1b7d9b; overscroll-behavior: none; }
body { position: fixed; left: 0; top: 0; width: 100%; height: var(--fullh); font-family: var(--font); color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; -webkit-font-smoothing: antialiased; }
html.pre body > section, html.pre #hud { opacity: 0; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:active { transform: scale(.97); transition: transform .1s; }
#game { position: fixed; left: 0; top: 0; width: 100vw; height: max(100lvh, var(--fullh)); display: block; background: linear-gradient(#ffb86b, #ff8a7a 26%, #22b8c8 58%, #1b7d9b); }
#stage { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); touch-action: none; }
/* Liquid glass (blur only on static screens; play HUD below uses a flat tint — iOS re-blurs over a live canvas every frame) */
.glass {
background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.22));
-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
border: .5px solid rgba(255,255,255,.65);
box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 28px rgba(80,40,30,.14);
}
.pill { border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.pill.big { padding: 15px 44px; font-size: 17px; font-weight: 700; }
.round { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
/* HUD */
#hud { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); pointer-events: none; }
.timer { position: absolute; left: 16px; top: calc(var(--sat) + 12px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 3px; width: 42px; height: 42px; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.timer .track { stroke: rgba(27,39,64,.1); }
#ringfill { stroke: #ff7a5e; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; }
#time { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.low #time { color: #e2452f; }
.scorebox { position: absolute; left: 50%; top: calc(var(--sat) + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#score { font-size: 38px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: var(--shade); line-height: 1.05; }
#fever { position: relative; width: 72px; height: 3px; margin-top: 6px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; }
#fever i { position: absolute; inset: 0; border-radius: 99px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition: transform .18s; will-change: transform; }
html.fever #fever i { background: #ffd66b; }
html.fever #score { color: #fff4d2; }
#lives { position: absolute; left: 70px; top: calc(var(--sat) + 28px); display: flex; gap: 3px; }
#lives i { width: 15px; height: 14px; display: block; background: #fff; filter: drop-shadow(0 1px 3px rgba(120,40,40,.35));
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat; }
#lives i.lost { opacity: .3; filter: none; }
/* speedometer: right column under the mute button */
#spd { position: absolute; right: 16px; top: calc(var(--sat) + 64px); width: 52px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 3px; color: #fff; text-shadow: var(--shade); }
#kmh { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-style: italic; line-height: 1; }
#spd small { font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .85; }
#spd > i { flex-basis: 100%; height: 2px; margin-top: 4px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
#spd #spdFill { display: block; height: 100%; background: #fff; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .2s; will-change: transform; }
html.boost #spdFill, html.fever #spdFill { background: #ffd66b; }
#mute { position: fixed; right: 16px; top: calc(var(--sat) + 16px); z-index: 20; color: var(--ink); }
#mute svg { width: 20px; height: 20px; }
#mute .offi, #mute.off .on { display: none; }
#mute.off .offi { display: block; }
#hud .glass, #mute, #cue, #warn { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#hud .glass, #mute.glass { background: rgba(255,255,255,.5); }
/* the one line of in-run text: what you landed + points */
#note { position: fixed; left: 0; right: 0; top: 24%; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 8; text-align: center; color: #fff; text-shadow: var(--shade); }
#note .name { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .08em; opacity: .92; max-width: 90vw; }
#note .pts { font-size: 24px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.1; }
#note .pts:empty { display: none; }
#note .pts.neg { color: #ff6b6b; }
/* jump timing ring at the rider (no words) */
#cue { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .12s; }
#cue i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); transform: scale(1.4); transition: transform .25s cubic-bezier(.2,.9,.3,1.2), border-color .15s; }
#cue.soon { opacity: .45; }
#cue.soon i { transform: scale(1.6); }
#cue.ready, #cue.now, #cue.release { opacity: 1; }
#cue.ready i { transform: scale(1.05); }
#cue.now i { transform: scale(.9); border-color: #ffe08a; border-width: 3px; }
#cue.release i { transform: scale(.8); border-color: #ff9a9a; }
#cue.release::after { content: 'はなして STOMP!'; position: absolute; left: -60px; top: 34px; width: 120px; text-align: center; font: 800 12px/1 system-ui, sans-serif; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); } /* v15 */
/* shark / obstacle marker */
#warn { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .15s; }
#warn b { position: absolute; left: -12px; top: -36px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; background: #e8473f; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
#warn.on { opacity: 1; }
/* Title */
#title { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--sat) + 92px) calc(env(safe-area-inset-right, 0px) + 24px) calc(var(--sab) + 30px) calc(env(safe-area-inset-left, 0px) + 24px); z-index: 10; }
#title .top { text-align: center; }
h1 { margin: 0; display: flex; flex-direction: column; align-items: center; color: #fff; }
h1 .logo { width: min(78vw, 320px); height: auto; display: block; filter: drop-shadow(0 4px 18px rgba(140,60,40,.22)); }
/* add-to-home hint (browser only, dismissible) */
#a2hs { margin: 14px auto 0; max-width: 300px; display: flex; align-items: center; gap: 8px; padding: 9px 8px 9px 14px; border-radius: 14px; text-align: left; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
#a2hs[hidden] { display: none; }
#a2hs .t { flex: 1; }
#a2hs small { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; }
#a2hs small svg { width: 11px; height: 13px; vertical-align: -2px; color: #0a7aff; }
#a2hs .x { flex: none; width: 28px; height: 28px; border: 0; background: none; font-size: 18px; color: var(--ink); opacity: .55; }
#title .bottom { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.howto { margin: 0; color: #fff; font-size: min(13.5px, 3.3vw); white-space: nowrap; font-weight: 600; letter-spacing: .02em; text-shadow: var(--shade); }
/* v11 stage picker: swipeable cards (scroll-snap; scales to any number of stages, peeks the next card) */
.stages { display: flex; gap: 10px; width: 100vw; max-width: 100vw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
padding: 6px 20px 8px; margin: -6px 0 -8px; align-self: center; touch-action: pan-x; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.stages::-webkit-scrollbar { display: none; }
.stages .card { position: relative; flex: 0 0 136px; scroll-snap-align: start; border-radius: 18px; padding: 0 0 9px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
text-align: left; color: var(--ink); background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 6px 16px rgba(40,30,60,.14); transition: box-shadow .2s, transform .2s, background .2s; touch-action: pan-x; }
.stages .card:last-child { scroll-snap-align: end; }
.stages::after { content: ""; flex: 0 0 10px; } /* trailing padding inside the scroller */
@media (min-width: 500px) { .stages { justify-content: center; } }
.stages .card .pv { width: 100%; height: 58px; display: block; margin-bottom: 4px; }
.stages .card > * { margin-left: 11px; margin-right: 11px; }
.stages .card > .pv { margin: 0 0 4px; }
.stages .card b.sn { display: flex; flex-direction: column; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .03em; line-height: 1.02; white-space: nowrap; }
.stages .card b.sn span + span { font-size: 11px; font-weight: 800; letter-spacing: .06em; opacity: .72; margin-top: 2px; }
.stages .card .lv { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.stages .card .lv i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .2; }
.stages .card .lv i.f { opacity: .85; }
.stages .card .lv em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; opacity: .65; margin-left: 4px; }
.stages .card small { font-size: 11px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 22px); }
.stages .card .ck { position: absolute; top: 7px; right: 7px; margin: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.stages .card .ck::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid #ff7a6b; border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.stages .card.on { background: rgba(255,255,255,.86); box-shadow: 0 0 0 2.5px #fff inset, 0 0 0 1px rgba(255,122,107,.0), 0 8px 22px rgba(40,30,60,.22); transform: translateY(-3px); }
.stages .card.on .ck { opacity: 1; transform: none; }
.stages .card:active { transform: scale(.97); }
.mission-line { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92); text-shadow: var(--shade); text-align: center; }
.mission-line.dark { color: var(--ink2); text-shadow: none; margin-top: 12px; }
/* Result */
#result { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); display: grid; place-items: center; padding: 24px; z-index: 10; }
.sheet { width: min(320px, 100%); border-radius: 32px; padding: 26px 22px 18px; text-align: center; }
/* v11 new best (stamp + count-up + shimmer + sparkles; resting state is static) */
#result .sheet { position: relative; }
#rNew { position: absolute; top: -13px; right: 16px; padding: 5px 10px 4px; border: 2px solid #ff6b7a; border-radius: 9px; color: #ff6b7a; font-size: 13px; font-weight: 900; font-style: italic; letter-spacing: .14em; transform: rotate(-8deg); background: #fff; box-shadow: 0 3px 12px rgba(255,107,122,.3); }
.scorewrap { position: relative; }
#rSpark { position: absolute; inset: 0; pointer-events: none; }
#rSpark i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: radial-gradient(circle, #fff 0 35%, rgba(255,214,140,.9) 36% 60%, rgba(255,214,140,0) 61%); opacity: 0; }
.sheet.nb #rScore { background: linear-gradient(100deg, var(--ink) 42%, #ff9a7a 50%, var(--ink) 58%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
#rBest b.up { color: #ff6b7a; font-weight: 800; margin-left: 4px; font-variant-numeric: tabular-nums; }
.rank { font-size: 15px; font-weight: 800; letter-spacing: .3em; color: var(--ink2); }
.big { font-size: 48px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 4px; }
.muted { color: var(--ink2); font-weight: 600; font-size: 14px; }
.stats { margin-top: 10px; font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.btns { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; }
.pill.primary { padding: 15px; font-size: 17px; font-weight: 700; color: #fff; background: #ff7a6b; }
.pill.ghost { padding: 10px; font-size: 14px; color: var(--ink2); }
.row { display: flex; gap: 6px; } .row > * { flex: 1; }
.small { font-size: 12px; margin-top: 10px; }
#rNet:not([hidden]) { cursor: pointer; }
.linkbtn { font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: var(--shade); padding: 6px 14px; margin-top: -6px; opacity: .92; }
/* v10.2: one tidy row of equal columns, never wrapping (375–440px wide) */
#title .links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 360px; gap: 0; margin-top: -6px; }
#title .links .linkbtn { margin-top: 0; padding: 8px 2px; font-size: 12px; letter-spacing: .02em; white-space: nowrap; text-align: center; min-width: 0; }
#title .links .linkbtn[hidden] { display: none; }
/* きせかえ */
#cz { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px calc(var(--sab, env(safe-area-inset-bottom)) + 12px); }
#czView { flex: 1; touch-action: none; cursor: grab; }
#cz .sheet { width: 100%; max-width: 420px; margin: 0 auto; padding: 14px 14px 12px; border-radius: 30px; }
#cz .seg, #cz .tabs { display: flex; gap: 6px; }
#cz .seg { margin-bottom: 10px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.28); }
#cz .seg button, #cz .tabs button { flex: 1; padding: 8px 0; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink2); border: 1.5px solid transparent; }
#cz .seg button.on { color: var(--ink); background: rgba(255,255,255,.85); box-shadow: 0 1px 6px rgba(80,40,30,.12); }
#cz .tabs button { padding: 6px 0; font-size: 11.5px; letter-spacing: -.02em; }
#cz .tabs button.on { color: var(--ink); border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.5); }
#cz .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; min-height: 124px; max-height: 31vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; align-content: start; }
#cz .opts button { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--ink); border: 1.5px solid transparent; background: rgba(255,255,255,.3); text-align: left; min-width: 0; }
#cz .opts button .tx { display: flex; flex-direction: column; min-width: 0; }
#cz .opts button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
#cz .opts button small { font-size: 9.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
#cz .opts button.on { border-color: rgba(255,255,255,.98); background: rgba(255,255,255,.72); }
#cz .opts button.lock { opacity: .62; }
#cz .opts button.lock small::before { content: '🔒 '; font-size: 8.5px; }
#cz .opts i { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
#cz .small { min-height: 1.3em; margin: 6px 0 8px; }
#cz .pill.primary { width: 100%; }
html[data-stage="night"] #cz .seg button.on, html[data-stage="night"] #cz .opts button.on, html[data-stage="night"] #cz .tabs button.on { background: rgba(150,150,230,.5); }
html[data-stage="night"] #cz .opts button { color: #f2f0ff; }
/* 全国ランキング */
#lb { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); display: grid; place-items: center; padding: calc(var(--sat, env(safe-area-inset-top)) + 12px) 16px calc(var(--sab, env(safe-area-inset-bottom)) + 12px); z-index: 20; background: rgba(30,30,60,.18); }
#lb .sheet { display: flex; flex-direction: column; max-height: 100%; padding-bottom: 12px; }
#lb .tabs { display: flex; gap: 6px; margin: 12px 0 8px; }
#lb .tabs button { flex: 1; padding: 7px 0; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink2); border: 1.5px solid transparent; }
#lb .tabs button.on { color: var(--ink); border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.55); }
#lb .nick { display: flex; gap: 6px; margin: 4px 0; }
#lb .nick input { flex: 1; min-width: 0; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.9); background: rgba(255,255,255,.7); padding: 10px 14px; font: inherit; font-size: 16px; color: #333; }
#lb .nick .pill { padding: 10px 16px; font-size: 15px; }
#lbList { list-style: none; margin: 6px 0 0; padding: 0; overflow-y: auto; min-height: 60px; flex: 1 1 auto; text-align: left; font-variant-numeric: tabular-nums; -webkit-overflow-scrolling: touch; }
#lbList li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 6px; padding: 6px 4px; font-size: 14px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.35); }
#lbList li i { font-style: normal; color: var(--ink2); }
#lbList li b { font-weight: 800; }
#lbList li.me { background: rgba(255,122,107,.18); border-radius: 8px; }
#lb .me { font-size: 13px; font-weight: 700; margin: 8px 0 4px; min-height: 1.2em; }
#lb .row { margin-top: 4px; }
#pause { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); display: grid; place-items: center; z-index: 25; background: rgba(30,30,60,.28); }
#pause .sheet { width: min(76vw, 260px); padding: 20px 18px 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 9px; text-align: center; }
#pause .ttl { font-size: 12px; font-weight: 700; letter-spacing: .3em; padding-left: .3em; opacity: .6; margin-bottom: 6px; }
#pause .pill { width: 100%; }
/* pause: top-right, left of the mute button (timer/lives are top-left, score centre, speed under mute) */
#pauseBtn { position: fixed; right: 64px; top: calc(var(--sat) + 16px); z-index: 20; color: var(--ink); }
#pauseBtn[hidden] { display: none; }
#pauseBtn svg { width: 18px; height: 18px; }
#pauseBtn.glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,.5); }
html[data-stage="night"] #pauseBtn.glass { background: rgba(40,48,90,.62); color: #fff; }
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
#rotate { display: grid; place-items: center; position: fixed; left: 0; right: 0; top: 0; height: max(100lvh, var(--fullh)); z-index: 50; background: linear-gradient(#8f9fd8, #f6a7a0 60%, #ffcf9e); }
}
/* night stage: dark glass */
html[data-stage="night"] .glass { --ink: #f2f0ff; --ink2: rgba(242,240,255,.7); color: #f2f0ff;
background: linear-gradient(180deg, rgba(120,120,200,.4), rgba(60,60,130,.3)); border-color: rgba(255,255,255,.3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 28px rgba(0,0,30,.3); }
html[data-stage="night"] #hud .glass, html[data-stage="night"] #mute.glass { background: rgba(40,48,90,.62); }
html[data-stage="night"] #lb .tabs button.on { background: rgba(150,150,230,.5); }
html[data-stage="night"] .stages .card { background: rgba(40,44,96,.55); color: #eef0ff; }
html[data-stage="night"] .stages .card.on { background: rgba(70,76,150,.85); }
/* v10 power-up 'zone': a soft coloured haze at the screen edges (green for the leaf, neon for the capsule) */
#zone { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .6s ease;
background: radial-gradient(120% 90% at 50% 55%, rgba(0,0,0,0) 40%, rgba(80,240,120,.34) 100%); }
html.zone #zone { opacity: 1; animation: zonePulse 2.4s ease-in-out infinite; }
html[data-zone="cap"] #zone { background: radial-gradient(120% 90% at 50% 55%, rgba(0,0,0,0) 38%, rgba(255,60,220,.26) 78%, rgba(60,230,255,.34) 100%); }
@keyframes zonePulse { 50% { opacity: .7; } }
/* v10 missions list */
#ms { position: fixed; left: 0; right: 0; top: 0; height: var(--fullh); display: grid; place-items: center; padding: calc(var(--sat, env(safe-area-inset-top)) + 12px) 16px calc(var(--sab, env(safe-area-inset-bottom)) + 12px); z-index: 20; background: rgba(30,30,60,.18); }
#ms[hidden] { display: none; }
#ms .sheet { display: flex; flex-direction: column; max-height: 100%; width: min(360px, 100%); padding: 20px 14px 12px; }
#msSum { margin: 4px 0 8px; }
#msList { list-style: none; margin: 0; padding: 0 2px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 80px; text-align: left; font-variant-numeric: tabular-nums; }
#msList li { display: grid; grid-template-columns: 1.9em 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.35); }
#msList li > i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink2); text-align: center; }
#msList li b { font-size: 13.5px; font-weight: 700; }
#msList li .st { font-size: 12px; font-weight: 800; text-align: right; white-space: nowrap; }
#msList li .rw { grid-column: 2 / 4; font-size: 11px; font-weight: 600; color: var(--ink2); }
#msList li.done b { opacity: .55; }
#msList li.done .st { color: #1f9d6b; }
#msList li.now { background: rgba(255,122,107,.16); border-radius: 10px; border-bottom-color: transparent; }
#msList li.now .st { color: #e2452f; }
#msList li.later { opacity: .6; }
#ms .row { margin-top: 10px; }
/* v10 stage names (English display names) */
.stagename { font-size: 11px; font-weight: 900; font-style: italic; letter-spacing: .32em; padding-left: .32em; }
#intro { position: fixed; left: 0; right: 0; top: 34%; text-align: center; z-index: 8; pointer-events: none; color: #fff; text-shadow: var(--shade); font-size: 20px; }
#intro[hidden] { display: none; }
#rStage { opacity: .6; margin-bottom: 4px; }
#lb .tabs button { font-size: 10px; font-style: italic; font-weight: 900; letter-spacing: .06em; line-height: 1.2; padding: 6px 8px; } /* long stage names wrap onto two even lines */
.msbest { display: flex; gap: 6px; margin: 0 0 8px; }
.msbest span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: rgba(255,255,255,.35); }
.msbest em { font-style: italic; font-weight: 900; font-size: 8.5px; letter-spacing: .08em; opacity: .7; white-space: nowrap; }
.msbest b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
#ms, #lb { grid-template-rows: minmax(0, 1fr); }
#ms .sheet, #lb .sheet { min-height: 0; }
/* v10 personal-best moment: gold readout + tiny tag (no sound, no big text) */
.scorebox.pb #score { color: #ffd668; text-shadow: 0 1px 10px rgba(255,170,40,.45), var(--shade); }
.scorebox.pb #score::after { content: 'BEST'; position: absolute; margin: 6px 0 0 5px; font-size: 9px; font-weight: 900; letter-spacing: .12em; color: #ffd668; opacity: .95; }
/* v10 tutorial */
#tut { position: fixed; left: 0; right: 0; top: 21%; display: grid; place-items: center; z-index: 6; pointer-events: none; }
#tut .box { pointer-events: none; width: min(300px, 84vw); border-radius: 22px; padding: 12px 14px 8px; text-align: center; }
#tut p { margin: 4px 0 2px; font-size: 14px; font-weight: 800; color: var(--ink); }
#tut .row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
#tut small { font-size: 11px; font-weight: 700; color: var(--ink2); }
#tut .linkbtn { pointer-events: auto; color: var(--ink2); text-shadow: none; margin: 0; padding: 6px 4px 6px 12px; }
#tut.ok p::after { content: ' ✓'; color: #1f9d6b; }
.hand { position: relative; height: 54px; margin: 0 auto; width: 120px; }
.hand i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.25); }
.hand.swx i { animation: tSwx 1.3s ease-in-out infinite; }
.hand.swy i { animation: tSwy 1.1s ease-in-out infinite; }
.hand.tap i { animation: tTap 1s ease-out infinite; }
.hand.circle i { animation: tCirc 1.1s linear infinite; }
@keyframes tSwx { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }
@keyframes tSwy { 0%, 100% { transform: translateY(-16px); } 50% { transform: translateY(16px); } }
@keyframes tTap { 0% { transform: scale(1.25); opacity: .6; } 30% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tCirc { from { transform: rotate(0deg) translateX(18px) rotate(0deg); } to { transform: rotate(360deg) translateX(18px) rotate(-360deg); } }
html.night #tut p, html[data-stage="night"] #tut p { color: #fff; }
/* v10 'near me' */
.near ol { list-style: none; margin: 6px 0 2px; padding: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.near li { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 6px; padding: 3px 8px; border-radius: 8px; text-align: left; }
.near li i { font-style: normal; font-weight: 700; color: var(--ink2); text-align: right; }
.near li b { font-weight: 800; }
.near li.me { background: rgba(255,255,255,.55); font-weight: 800; }
.near p { margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--ink2); }
/* v10 board traits in the picker */
.bstats { display: flex; gap: 10px; justify-content: center; margin: 6px 2px 0; }
.bstats span { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--ink2); }
.bstats em { font-style: normal; }
.bstats i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); overflow: hidden; }
.bstats b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ffb25b, #ff6f6f); }
.bstats small { grid-column: 2; font-size: 9.5px; text-align: right; }
#result .row .pill { padding-left: 12px; padding-right: 12px; white-space: nowrap; min-width: 0; }
#result .row { gap: 6px; }
/* v11 launch / loading screen — same layout as the apple-touch-startup-image (dev/make_icons.py), so the hand-off is seamless */
#boot { position: fixed; left: 0; top: 0; width: 100vw; height: max(100lvh, var(--fullh)); z-index: 100; overflow: hidden; pointer-events: none; transition: opacity .4s ease;
background: linear-gradient(180deg, #ffb86b 0%, #ff8a7a 26%, #22b8c8 58%, #1b7d9b 100%); --lw: min(300px, 76vw); }
#boot.out { opacity: 0; }
#boot::before { content: ""; position: absolute; left: 50%; top: 44%; width: 140vw; height: 140vw; transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,244,200,.75), rgba(255,226,160,.25) 45%, rgba(255,226,160,0) 70%); }
#boot img { position: absolute; left: 50%; top: 44%; width: var(--lw); height: auto; transform: translate(-50%, -50%); }
#boot .dots { position: absolute; left: 0; right: 0; top: calc(44% + var(--lw) * .33); display: flex; justify-content: center; gap: 8px; }
#boot .dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .35; animation: bootdot 1.2s ease-in-out infinite; }
#boot .dots i:nth-child(2) { animation-delay: .2s; } #boot .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bootdot { 0%, 100% { opacity: .35; } 35% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { #boot .dots i { animation: none; opacity: .7; } }
/* v11.2 EXTREME trick (pickup): white flash + gold banner with the multiplier */
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
#mega { position: fixed; left: 0; right: 0; top: 17%; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 8; text-align: center; }
#mega .k { font-style: italic; font-weight: 900; font-size: 15px; letter-spacing: .32em; padding: 3px 12px 3px 16px; border-radius: 999px; color: #2a1d05;
background: linear-gradient(90deg, #ffd25a, #fff3c4 40%, #ff86e0 70%, #7ff6ff); box-shadow: 0 2px 12px rgba(255,190,60,.55); }
#mega .nm { margin-top: 8px; font-size: 27px; font-weight: 900; font-style: italic; line-height: 1.12; max-width: 94vw; color: #fff;
-webkit-text-stroke: 1px rgba(120,60,0,.35); text-shadow: 0 2px 0 #c77a12, 0 4px 14px rgba(0,0,0,.45), 0 0 26px rgba(255,200,80,.8); }
#mega .pts { margin-top: 4px; font-size: 46px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, #fff8d6 10%, #ffd25a 55%, #ff9a2e); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 3px 0 rgba(120,60,0,.55)) drop-shadow(0 0 16px rgba(255,190,60,.7)); }
#mega .pts:empty, #mega .mx:empty { display: none; }
#mega .mx { margin-top: 6px; font-size: 14px; font-weight: 800; letter-spacing: .06em; color: #fff; padding: 2px 10px; border-radius: 8px; background: rgba(40,20,0,.45); }
/* DEV board in the picker + stats */
#cz .opts button.dev { border-color: #ffd25a; background: linear-gradient(135deg, rgba(255,226,140,.85), rgba(255,170,230,.6) 55%, rgba(140,245,255,.65)); position: relative; }
#cz .opts button.dev::after { content: 'DEV'; position: absolute; top: -6px; right: -4px; font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #2a1d05; padding: 1px 5px; border-radius: 6px; background: linear-gradient(90deg, #ffd25a, #fff3c4); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.bstats.dev b { background: linear-gradient(90deg, #ffd25a, #ff86e0, #7ff6ff) !important; }
#title h1.devok { animation: devOk 1.2s ease-out; }
@keyframes devOk { 0% { filter: drop-shadow(0 0 0 #ffd25a) hue-rotate(0); } 40% { filter: drop-shadow(0 0 18px #ffd25a) hue-rotate(160deg); } 100% { filter: none; } }
/* v11.3 title showcase: a small trick label above the demo rider (placed in JS inside the open band) */
#demoTag { position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0); pointer-events: none; z-index: 1; white-space: nowrap;
font-weight: 800; font-size: 13px; line-height: 1; letter-spacing: .03em; color: #fff; padding: 6px 11px; border-radius: 999px;
background: rgba(16, 38, 70, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
#demoTag.x { background: linear-gradient(90deg, #ffb300, #ff4fa0); font-size: 14px; }
#demoTag[hidden] { display: none; }
#mute, #title h1 { -webkit-touch-callout: none; }
/* ===================================================================================================================
SPIN — UI in the IRON RECORDS family: 生成り paper, 墨 ink, hairline rules, flat ink buttons, Cormorant Garamond
wordmark spaced wide, Karla for Latin + numbers, Noto Sans JP for Japanese (all bundled in fonts/, OFL).
The 3D sea / riders / boat underneath are unchanged; only the type and the controls on top follow this.
=================================================================================================================== */
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-garamond.woff2?v=37') format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../fonts/karla.woff2?v=37') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Noto Sans JP'; src: url('../fonts/noto-sans-jp.woff2?v=37') format('woff2'); font-weight: 400 500; font-display: swap; }
:root {
--paper: #f9f7f5; --sumi: #333; --sumi-ink: #1a1a1a; --sub: #756f67; --faint: #9a948c; --gray: #c6c2bc; --rule: #e3e1de;
--paper-rgb: 249, 247, 245; --shade-rgb: 31, 26, 20;
--serif: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
--sans: Karla, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
--font: var(--sans);
}
/* title: a thin paper header with the wordmark, the sea in the middle, a paper sheet from the bottom */
#title { padding: 0; font-family: var(--sans); color: var(--sumi); }
#title .top { position: relative; padding: calc(var(--sat) + 16px) 64px 13px; background: rgba(var(--paper-rgb), .86);
-webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border-bottom: 1px solid var(--rule); }
#title h1 { color: var(--sumi); }
#title h1 .wordmark { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.25; letter-spacing: .62em; padding-left: .62em; }
#title #a2hs { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: min(340px, calc(100vw - 40px)); max-width: none; margin: 0;
background: rgba(var(--paper-rgb), .92); border: 1px solid var(--rule); box-shadow: none; border-radius: 12px; color: var(--sumi); font-weight: 500; font-size: 11px; letter-spacing: .02em; }
#title #a2hs small { color: var(--sub); opacity: 1; font-weight: 400; }
#title #a2hs small svg { color: var(--sumi); }
#title #a2hs .x { color: var(--sub); opacity: 1; }
#title .bottom { align-items: stretch; gap: 0; padding: 20px 20px calc(var(--sab) + 6px); border-radius: 28px 28px 0 0;
background: rgba(var(--paper-rgb), .94); -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
box-shadow: 0 -10px 40px rgba(var(--shade-rgb), .12); animation: spinSheet .5s cubic-bezier(.34, 1.2, .64, 1) both; }
@keyframes spinSheet { from { transform: translateY(100%); } to { transform: none; } }
#title .howto { color: var(--faint); text-shadow: none; font-weight: 400; font-size: 11px; letter-spacing: .06em; text-align: center; margin: 0 0 14px; }
#title .label { font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--sumi); padding-bottom: 8px; border-bottom: 1px solid var(--sumi); }
/* stage list: one row per sea, separated by hairlines; the picked one gets a filled ink dot */
#title .stages { flex-direction: column; gap: 0; width: auto; max-width: none; align-self: stretch; overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; touch-action: manipulation; }
#title .stages::after { display: none; }
#title .stages .card { display: grid; grid-template-columns: 20px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 1px; align-items: center;
flex: none; padding: 11px 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--sumi);
border-bottom: 1px solid var(--rule); transform: none; transition: none; text-align: left; touch-action: manipulation; }
#title .stages .card > * { margin: 0; }
#title .stages .card .pv { display: none; }
#title .stages .card .ck { position: static; grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gray); background: none; box-shadow: none; opacity: 1; transform: none; }
#title .stages .card .ck::after { display: none; }
#title .stages .card.on .ck { background: var(--sumi); border-color: var(--sumi); box-shadow: inset 0 0 0 4px var(--paper); }
#title .stages .card b.sn { flex-direction: row; gap: .5em; font-style: normal; font-weight: 500; font-size: 13px; letter-spacing: .16em; line-height: 1.4; }
#title .stages .card b.sn span + span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; opacity: 1; margin: 0; }
#title .stages .card .lv { grid-column: 2; margin: 0; gap: 3px; color: var(--sub); }
#title .stages .card .lv i { width: 5px; height: 5px; background: var(--sumi); opacity: .18; }
#title .stages .card .lv i.f { opacity: .8; }
#title .stages .card .lv em { font-size: 10px; font-weight: 400; letter-spacing: .2em; opacity: 1; margin-left: 6px; }
#title .stages .card small { grid-column: 3; grid-row: 1 / 3; max-width: none; font-size: 12px; font-weight: 400; letter-spacing: .06em; color: var(--sub); opacity: 1; }
#title .stages .card.on b.sn { font-weight: 700; }
#title .stages .card:active { transform: none; background: rgba(var(--shade-rgb), .04); }
#title .mission-line { color: var(--sub); text-shadow: none; font-weight: 400; font-size: 11px; letter-spacing: .06em; margin: 14px 0 12px; }
/* flat ink start button (no gloss, no shadow) */
#title #startBtn { width: 100%; padding: 15px; border-radius: 100px; background: var(--sumi); color: var(--paper); border: 0; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none; font-size: 14px; font-weight: 500; letter-spacing: .32em; }
#title .links { max-width: none; margin: 12px 0 0; border-top: 1px solid var(--rule); }
#title .links .linkbtn { color: var(--sumi); text-shadow: none; opacity: 1; font-weight: 400; font-size: 12px; letter-spacing: .14em; padding: 13px 2px 6px; }
#title .links .linkbtn + .linkbtn { border-left: 1px solid var(--rule); }
/* sound button: a flat paper disc with an ink icon */
#mute.glass { background: rgba(var(--paper-rgb), .86); border: 1px solid var(--rule); box-shadow: none; color: var(--sumi); }
html[data-stage="night"] #mute.glass { background: rgba(var(--paper-rgb), .86); color: var(--sumi); }
#mute { top: calc(var(--sat) + 9px); right: 12px; width: 36px; height: 36px; }
#mute svg { width: 18px; height: 18px; }
/* ---- SPIN sheets: every panel is the same paper sheet rising from the bottom, ruled, with flat ink buttons ---- */
.sheet.glass, html[data-stage="night"] .sheet.glass { --ink: var(--sumi); --ink2: var(--sub); color: var(--sumi); font-family: var(--sans);
background: rgba(var(--paper-rgb), .95); -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
border: 1px solid rgba(255, 255, 255, .6); border-bottom: 0; box-shadow: 0 -10px 40px rgba(var(--shade-rgb), .14); }
#result, #lb, #ms { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: calc(var(--sat) + 12px) 0 0; background: none; }
#result .sheet, #lb .sheet, #ms .sheet { width: 100%; max-width: 480px; max-height: 92%; border-radius: 28px 28px 0 0; padding: 24px 20px calc(var(--sab) + 18px);
text-align: left; animation: spinSheet .45s cubic-bezier(.34, 1.2, .64, 1) both; }
#lb, #ms { background: rgba(var(--shade-rgb), .22); }
.pill.primary, html[data-stage="night"] .pill.primary { width: 100%; padding: 15px; border-radius: 100px; background: var(--sumi); color: var(--paper); font-size: 14px; font-weight: 500; letter-spacing: .3em; box-shadow: none; }
.pill.ghost { padding: 12px 4px; color: var(--sub); font-size: 12px; font-weight: 400; letter-spacing: .14em; }
.row > .pill.ghost + .pill.ghost { border-left: 1px solid var(--rule); border-radius: 0; }
.muted { color: var(--sub); font-weight: 400; font-size: 12px; letter-spacing: .04em; }
.small { font-size: 11px; }
.rank { font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--sumi); padding-bottom: 10px; border-bottom: 1px solid var(--sumi); }
.stagename { font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .26em; }
/* result: stage · rank · one big number · three ruled stats · buttons */
#rStage { opacity: 1; color: var(--sub); margin: 0 0 8px; }
#result #rRank { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: .34em; border-bottom: 0; padding: 0; }
#result .scorewrap { border-bottom: 1px solid var(--rule); padding: 0 0 12px; }
#rScore.big, #rScore { font-family: Karla, var(--sans); font-weight: 300; font-size: 56px; letter-spacing: -.03em; line-height: 1; margin: 10px 0 6px; color: var(--sumi); }
.sheet.nb #rScore { background: linear-gradient(100deg, var(--sumi) 42%, var(--gray) 50%, var(--sumi) 58%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
#rBest { margin-top: 2px; }
#rBest b.up { color: var(--sumi); font-weight: 500; }
#rNew { top: 22px; right: 20px; transform: none; border: 1px solid var(--sumi); border-radius: 100px; padding: 5px 12px 4px; background: var(--paper); color: var(--sumi); box-shadow: none;
font-style: normal; font-weight: 500; font-size: 10px; letter-spacing: .24em; }
#rSpark i { background: radial-gradient(circle, var(--sumi) 0 30%, rgba(51, 51, 51, 0) 31%); }
#result .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-bottom: 1px solid var(--rule); }
#result .stats span { display: flex; flex-direction: column; padding: 12px 0 10px; }
#result .stats span + span { padding-left: 14px; border-left: 1px solid var(--rule); }
#result .stats em { font-style: normal; font-size: 10px; letter-spacing: .16em; color: var(--sub); }
#result .stats b { font-family: Karla, var(--sans); font-weight: 400; font-size: 22px; letter-spacing: -.01em; margin-top: 2px; }
#result .btns { margin-top: 16px; gap: 4px; }
#result .row { gap: 0; }
#result #rNet { margin-top: 12px; color: var(--sumi); }
#result .mission-line.dark { color: var(--sub); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-align: left; margin-top: 10px; }
/* near-me + leaderboard rows: rank · name · score on hairlines */
.near ol { font-size: 12px; margin: 6px 0 2px; }
.near li { border-radius: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.near li i { color: var(--faint); font-weight: 400; font-family: Karla, var(--sans); }
.near li b { font-family: Karla, var(--sans); font-weight: 500; }
.near li.me { background: none; font-weight: 700; }
.near p { color: var(--sub); font-weight: 400; font-size: 11px; }
#lb .tabs { display: flex; gap: 0; margin: 14px 0 6px; padding: 3px; border-radius: 100px; background: rgba(var(--shade-rgb), .05); }
#lb .tabs button { flex: 1; border: 0; border-radius: 100px; padding: 7px 4px; color: var(--sub); font-style: normal; font-weight: 500; font-size: 9.5px; letter-spacing: .1em; line-height: 1.25; }
#lb .tabs button.on, html[data-stage="night"] #lb .tabs button.on { background: #fff; color: var(--sumi); box-shadow: 0 1px 4px rgba(var(--shade-rgb), .1); }
#lb .nick input { border-radius: 12px; border: 0; background: rgba(var(--shade-rgb), .05); color: var(--sumi); font-size: 16px; }
#lb .nick .pill.primary { width: auto; letter-spacing: .14em; padding: 10px 18px; }
#lbList li { padding: 9px 0; font-size: 13px; font-weight: 400; border-bottom: 1px solid var(--rule); }
#lbList li i { color: var(--faint); font-family: Karla, var(--sans); }
#lbList li b { font-family: Karla, var(--sans); font-weight: 500; }
#lbList li.me { background: none; border-radius: 0; font-weight: 700; box-shadow: inset 3px 0 0 var(--sumi); padding-left: 8px; }
#lb .me { font-weight: 500; font-size: 12px; color: var(--sumi); }
#lb .row, #ms .row { margin-top: 6px; border-top: 1px solid var(--rule); }
/* missions: hairline rows, the current one marked with an ink bar */
#msSum { margin: 10px 0 8px; }
.msbest { gap: 0; margin: 0 0 6px; border-bottom: 1px solid var(--rule); }
.msbest span { border-radius: 0; background: none; align-items: flex-start; padding: 6px 0 10px; }
.msbest span + span { padding-left: 12px; border-left: 1px solid var(--rule); }
.msbest em { font-style: normal; font-weight: 500; font-size: 8.5px; letter-spacing: .12em; color: var(--sub); opacity: 1; }
.msbest b { font-family: Karla, var(--sans); font-weight: 400; font-size: 18px; margin-top: 2px; }
#msList li { border-bottom: 1px solid var(--rule); padding: 10px 0; }
#msList li > i { color: var(--faint); font-weight: 400; font-family: Karla, var(--sans); }
#msList li b { font-weight: 500; font-size: 13px; }
#msList li .st { font-weight: 500; font-size: 11px; letter-spacing: .08em; color: var(--sub); }
#msList li .rw { color: var(--faint); font-weight: 400; }
#msList li.done b { opacity: .45; }
#msList li.done .st { color: var(--faint); }
#msList li.now { background: none; border-radius: 0; box-shadow: inset 3px 0 0 var(--sumi); padding-left: 8px; }
#msList li.now .st { color: var(--sumi); }
/* きせかえ: the same paper sheet; picks are ruled cells, the worn one outlined in ink */
#cz { padding: 0; }
#cz .sheet { max-width: 480px; border-radius: 28px 28px 0 0; padding: 16px 16px calc(var(--sab) + 14px); }
#cz .seg { background: rgba(var(--shade-rgb), .05); margin-bottom: 10px; }
#cz .seg button { font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--sub); }
#cz .seg button.on, html[data-stage="night"] #cz .seg button.on { background: #fff; color: var(--sumi); box-shadow: 0 1px 4px rgba(var(--shade-rgb), .1); }
#cz .tabs { gap: 0; border-bottom: 1px solid var(--sumi); }
#cz .tabs button { border: 0; border-radius: 0; padding: 8px 0 9px; font-weight: 400; font-size: 11.5px; letter-spacing: .04em; color: var(--sub); }
#cz .tabs button.on, html[data-stage="night"] #cz .tabs button.on { background: none; color: var(--sumi); font-weight: 700; box-shadow: inset 0 -2px 0 var(--sumi); }
#cz .opts button, html[data-stage="night"] #cz .opts button { border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, .55); color: var(--sumi); font-weight: 500; }
#cz .opts button small { color: var(--sub); font-weight: 400; }
#cz .opts button.on, html[data-stage="night"] #cz .opts button.on { border-color: var(--sumi); background: #fff; box-shadow: inset 0 0 0 1px var(--sumi); }
#cz .opts button.lock small::before { content: ''; }
.bstats span { color: var(--sub); font-weight: 400; }
.bstats i { background: var(--rule); }
.bstats b, .bstats.dev b { background: var(--sumi) !important; }
/* pause + tutorial: small paper cards */
#pause { background: rgba(var(--shade-rgb), .28); }
#pause .sheet.glass { border-radius: 24px; border-bottom: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 10px 40px rgba(var(--shade-rgb), .2); }
#pause .ttl { font-family: var(--serif); font-weight: 400; font-size: 18px; letter-spacing: .3em; opacity: 1; color: var(--sumi); }
#tut .box.glass, html[data-stage="night"] #tut .box.glass { background: rgba(var(--paper-rgb), .94); border: 1px solid rgba(255, 255, 255, .6); color: var(--sumi); font-family: var(--sans);
box-shadow: 0 8px 30px rgba(var(--shade-rgb), .16); }
#tut p, html[data-stage="night"] #tut p { color: var(--sumi); font-weight: 500; font-size: 13px; letter-spacing: .04em; }
#tut small, #tut .linkbtn { color: var(--sub); font-weight: 400; letter-spacing: .1em; }
#tut.ok p::after { color: var(--sumi); }
.hand i { background: var(--sumi); box-shadow: 0 0 0 6px rgba(51, 51, 51, .14); }
/* ---- in play: same type, white on the sea; flat paper discs instead of glass ---- */
#hud, #note, #intro, #mega, #demoTag, #cue, #warn { font-family: var(--sans); }
#hud .glass, html[data-stage="night"] #hud .glass, #pauseBtn.glass, html[data-stage="night"] #pauseBtn.glass { background: rgba(var(--paper-rgb), .86); border: 1px solid var(--rule); box-shadow: none; color: var(--sumi); }
#pauseBtn { top: calc(var(--sat) + 9px); right: 56px; width: 36px; height: 36px; }
#time { font-family: Karla, var(--sans); font-weight: 500; color: var(--sumi); }
.timer .track { stroke: var(--rule); }
#ringfill { stroke: var(--sumi); }
.timer.low #time { color: var(--sumi); font-weight: 700; }
#score { font-family: Karla, var(--sans); font-weight: 400; letter-spacing: -.02em; }
#kmh { font-family: Karla, var(--sans); font-style: normal; font-weight: 500; }
#spd small { font-weight: 400; letter-spacing: .12em; }
#note .name { font-weight: 500; letter-spacing: .12em; }
#note .pts { font-family: Karla, var(--sans); font-weight: 500; }
#intro.stagename { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: .3em; }
#mega .nm { font-style: normal; font-weight: 500; }
#mega .k { font-style: normal; font-weight: 500; letter-spacing: .3em; }
#mega .pts { font-family: Karla, var(--sans); font-weight: 500; }
#demoTag { font-weight: 500; letter-spacing: .12em; font-size: 12px; background: rgba(var(--paper-rgb), .86); color: var(--sumi); text-shadow: none; border: 1px solid var(--rule); box-shadow: none; }
#demoTag.x { background: var(--sumi); color: var(--paper); border-color: var(--sumi); }
#cue.release::after { font: 500 12px/1 var(--sans); letter-spacing: .1em; }
.scorebox.pb #score::after { font-weight: 500; letter-spacing: .2em; }
/* launch screen = the apple-touch-startup-image (dev/make_icons.py): paper ground, the ink wordmark, three ink dots */
#boot { background: var(--paper); --lw: min(170px, 42vw); }
#boot::before { display: none; }
#boot .dots { top: calc(44% + var(--lw) * .24 + 22px); }
#boot .dots i { width: 6px; height: 6px; background: var(--sumi); }
/* v33: a short, curated きせかえ — two roomy columns, nothing locked */
#cz .opts { grid-template-columns: repeat(2, 1fr); min-height: 0; }
/* v34: title — the stage picker floats over the sea as a see-through glass panel; the footer (start, mission, links)
is its own paper sheet underneath. The how-to line is gone so the demo ride has the room. */
#title .bottom { gap: 10px; padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; animation: none; }
#title .pick { margin: 0 14px; padding: 13px 16px 2px; border-radius: 20px; background: rgba(var(--paper-rgb), .4);
-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(var(--paper-rgb), .55);
animation: spinFade .5s .1s ease-out both; }
#title .pick .stages .card { border-bottom-color: rgba(var(--shade-rgb), .1); }
#title .pick .stages .card:last-child { border-bottom: 0; }
#title .pick .stages .card small { color: var(--sumi); opacity: .7; }
#title .pick .stages .card .ck { border-color: rgba(var(--shade-rgb), .35); }
#title .pick .stages .card.on .ck { box-shadow: inset 0 0 0 4px rgba(var(--paper-rgb), .9); }
html[data-stage="night"] #title .pick { background: rgba(var(--paper-rgb), .66); }
#title .foot { display: flex; flex-direction: column; align-items: stretch; padding: 18px 20px calc(var(--sab) + 6px); border-radius: 28px 28px 0 0;
background: rgba(var(--paper-rgb), .94); -webkit-backdrop-filter: blur(40px) saturate(1.7); backdrop-filter: blur(40px) saturate(1.7);
box-shadow: 0 -10px 40px rgba(var(--shade-rgb), .12); animation: spinSheet .5s cubic-bezier(.34, 1.2, .64, 1) both; }
#title .foot .mission-line { margin: 12px 0 0; text-align: center; }
@keyframes spinFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* v35: スタート lives in the stage panel (pick a sea, go); the footer keeps the mission line and the links */
#title .pick { padding-bottom: 14px; }
#title .pick #startBtn { margin-top: 12px; }
#title .foot { padding-top: 12px; }
#title .foot .mission-line { margin: 0; }
/* v36: the current mission sits on the STAGE heading's right; the footer is just the three links */
#title .pick .label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#title .pick .label .mission-line { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; color: var(--sumi); opacity: .72; text-align: right; }
#title .foot { padding-top: 4px; }
#title .foot .links { margin-top: 0; border-top: 0; }