/* Samurai's Road: floating glass nav + sticky parallax intro stage (index only).
   Art is generated: firebase-hosting/art-source/parallax (never hand-edit the WebPs). */

/* ---------- Nav ---------- */
.road-nav{position:fixed;z-index:60;top:calc(10px + env(safe-area-inset-top,0px));left:0;right:0;display:flex;justify-content:center;padding-inline:12px;pointer-events:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.road-nav.is-hidden{transform:translateY(calc(-100% - 20px));opacity:0}
.road-nav-inner{pointer-events:auto;width:min(1080px,100%);height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 16px;border-radius:999px;background:rgba(246,245,241,.66);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(15,26,51,.10),inset 0 1px 0 rgba(255,255,255,.55)}
.road-nav .brand{font-size:16px;gap:8px}
.road-nav .brand img{width:28px;height:28px;border-radius:8px}
.road-links{display:flex;align-items:center;gap:2px}
.road-links a{font-size:13px;font-weight:560;color:#3a4552;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.road-links a:hover{background:rgba(23,35,51,.06);color:var(--ink)}
.road-links a[aria-current=true]{background:rgba(23,35,51,.08);color:var(--ink)}
.road-get{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s}
.road-get:hover{background:var(--blue)}
@media (max-width:880px){.road-links{display:none}}
@media (max-width:380px){.road-nav .brand{font-size:14px}.road-get{padding:0 13px;font-size:12px}}

/* ---------- Stage ---------- */
.road-page{background:#0f1a33}
.road{position:relative;height:500vh;background:#0f1a33}
.road-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.road-sky{position:absolute;inset:0}
.road-sky.dawn{background:linear-gradient(180deg,#cfd9fa 0%,#e9e9f4 38%,#fbe6d4 62%,#ffd2b0 100%)}
.road-sky.night{background:linear-gradient(180deg,#0b1430 0%,#16275c 55%,#2b3f86 100%);opacity:0}
.road-stars{position:absolute;inset:0 0 40% 0;opacity:0;background-image:radial-gradient(1.5px 1.5px at 12% 20%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 8%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 48% 26%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66% 14%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 6%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 36%,#fff 50%,transparent 51%)}
.road-sun{position:absolute;left:50%;top:30%;width:min(34vh,260px);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#ffe7a6 0 55%,#ffc24a 56% 62%,rgba(255,194,74,0) 63%);filter:drop-shadow(0 0 40px rgba(255,194,74,.55))}
.road-moon{position:absolute;right:14%;top:14%;width:min(14vh,110px);aspect-ratio:1;border-radius:50%;background:#f6f0dc;box-shadow:0 0 50px rgba(246,240,220,.5);opacity:0}
.road-layer{position:absolute;left:50%;bottom:0;width:max(100%,calc(100svh * var(--w,1.5) * var(--k,1)));height:auto;max-width:none;transform-origin:50% 100%;will-change:transform;pointer-events:none;user-select:none}
.road-layer.top{bottom:auto;top:0;transform-origin:50% 0}
.road-lanterns img{display:block;width:100%;height:auto;transform-origin:50% 0;animation:road-sway 5s ease-in-out infinite alternate}
/* Paused by road.js while the element is off-screen/faded out. */
.idle,.idle img{animation-play-state:paused!important}
@keyframes road-sway{from{rotate:-1.2deg}to{rotate:1.2deg}}

.road-mascot{position:absolute;z-index:5;left:var(--mx,66%);bottom:7%;height:min(46%,500px);aspect-ratio:.68;translate:-50% 0;will-change:transform;--b:0}
.road-mascot img{position:absolute;bottom:0;left:50%;translate:-50% 0;height:100%;width:auto;max-width:none;opacity:0;filter:drop-shadow(0 0 2px rgba(255,244,214,var(--b))) drop-shadow(0 0 3px rgba(255,214,120,var(--b))) drop-shadow(0 0 14px rgba(255,194,74,calc(var(--b) * .6))) drop-shadow(0 10px 14px rgba(15,26,51,.28))}
.road-mascot img.on{opacity:1}
/* The leap sprites are drawn a touch smaller than the standing ones: scale them up from the feet so the samurai keeps his size through the jump. */
.road-mascot img[data-pose$="leap"]{scale:1.15;transform-origin:50% 100%}

.road-copy{position:absolute;z-index:8;left:max(20px,6vw);top:calc(96px + env(safe-area-inset-top,0px));max-width:min(660px,calc(100% - 40px));color:var(--ink);text-shadow:0 0 28px rgba(250,240,228,.95),0 0 10px rgba(250,240,228,.8)}
.road-copy .eyebrow{margin:0;font-size:10px;letter-spacing:1.8px;color:#4a5562}
.road-copy h1,.road-copy h2{margin:14px 0 0;font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-weight:800;font-size:clamp(38px,6.2vw,76px);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.road-copy h1 span{color:#c8202f}
.road-copy .sub{margin:16px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.55;max-width:40ch;color:#2c3744}
.road-copy.hero .sub{max-width:min(40ch,360px)}
.road-copy.night{color:#f6f0dc;opacity:0;top:33%;text-shadow:0 2px 24px rgba(11,20,48,.95),0 0 8px rgba(11,20,48,.8)}
.road-copy.night::before{content:"";position:absolute;z-index:-1;inset:-22% -30%;background:radial-gradient(closest-side,rgba(11,20,48,.88),rgba(11,20,48,.72) 55%,rgba(11,20,48,0));pointer-events:none}
.road-copy.night .eyebrow{color:#ffc24a;font-weight:650}
.road-copy.night h2{font-size:clamp(32px,4.8vw,60px)}
.road-copy.night h2 span{color:#ffc24a}
.road-copy.night .sub{color:#dfe3f0}
/* Store buttons: dark glass with a gold hairline, lit like the lanterns. */
.road-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;text-shadow:none}
.road-store{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 22px 0 18px;border-radius:999px;color:#f6f0dc;background:rgba(15,26,51,.55);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);border:1px solid rgba(255,194,74,.5);box-shadow:inset 0 1px 0 rgba(255,236,190,.12),0 10px 26px rgba(5,10,30,.4);transition:border-color .25s,box-shadow .25s,transform .25s}
.road-store:hover{transform:translateY(-1px);border-color:#ffc24a;box-shadow:inset 0 1px 0 rgba(255,236,190,.18),0 0 0 4px rgba(255,194,74,.1),0 0 28px rgba(255,194,74,.22)}
.road-store:focus-visible{outline:2px solid #ffc24a;outline-offset:3px}
.road-store .store-mark{width:20px;height:20px;color:#ffc24a}
.road-store > span:last-child{display:flex;flex-direction:column;font-size:15px;font-weight:650;line-height:1.15;letter-spacing:-.005em}
.road-store small{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#c8cfe6;margin-bottom:2px}

/* Feature beats: a glass card on top + four app-style icon chips scattered left/right at their own parallax depth. */
.road-beat{position:absolute;inset:0;z-index:8;pointer-events:none}
.road-beat-top{position:absolute;opacity:0;visibility:hidden;background:rgba(246,245,241,.68);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 32px rgba(15,26,51,.14),inset 0 1px 0 rgba(255,255,255,.5);color:var(--ink)}
.road-beat-top{left:max(20px,6vw);top:calc(92px + env(safe-area-inset-top,0px));max-width:min(520px,calc(100% - 40px));padding:18px 24px 20px;border-radius:24px}
.road-chip{position:absolute;top:var(--y);display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:18px;opacity:0;visibility:hidden;white-space:nowrap;background:rgba(28,29,34,.8);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(236,234,228,.1);box-shadow:0 14px 30px rgba(10,14,30,.28);color:#ECEAE4;font-size:16px;font-weight:620;letter-spacing:-.01em;animation:road-float 5.5s ease-in-out infinite alternate}
.road-chip.l{left:var(--x)}
.road-chip.r{right:var(--x)}
.road-chip:nth-child(3n){animation-duration:6.5s;animation-delay:-2s}
.road-chip:nth-child(3n+1){animation-duration:4.8s;animation-delay:-1s}
.road-chip .ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--s);color:var(--c)}
.road-chip .ico:not(.glyph)::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.road-chip .glyph{font-style:normal;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:26px;font-weight:700}
/* Beat 3: JLPT Library decks as paper study cards, tilted in 3D (rotation set by road.js). */
.road-card{position:absolute;top:var(--y);width:122px;height:154px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;visibility:hidden;border-radius:16px;background:linear-gradient(155deg,#fffdf7 0%,#f6f1e4 100%);border:1px solid rgba(23,35,51,.08);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 34px rgba(10,14,30,.32),0 3px 8px rgba(10,14,30,.16);color:#1c2a45;text-align:center;transform-style:preserve-3d;animation:road-float 6s ease-in-out infinite alternate}
.road-card.l{left:var(--x)}
.road-card.r{right:var(--x)}
.road-card:nth-child(odd){animation-duration:5s;animation-delay:-2.5s}
.road-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.road-card i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--bg);color:var(--fg);font-style:normal;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:22px;font-weight:700}
.road-card b{font-size:14.5px;font-weight:680;letter-spacing:-.01em;line-height:1.15;padding-inline:6px}
.road-card small{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7a8190;margin-top:-3px}
/* Beat 2: the app's result widgets, retold in the page's paper-cut style (sample values) + a rank medal. */
.road-w{position:absolute;top:var(--y);font-size:15px;line-height:1.3;opacity:0;visibility:hidden;color:#1c2a45;background:rgba(250,248,242,.86);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.75);border-radius:1.4em;padding:1.1em 1.2em 1.15em;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 16px 36px rgba(15,26,51,.2);font-variant-numeric:tabular-nums;animation:road-float 6s ease-in-out infinite alternate}
.road-w.l{left:var(--x)}
.road-w.r{right:var(--x)}
.road-w em{font-style:normal}
.road-w small{font-size:inherit}
.w-score{width:17.5em}
.w-kicker{margin:0;font-size:.68em;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:#5a6476}
.w-stamp{position:absolute;top:.75em;right:.85em;display:grid;place-items:center;width:2.9em;height:2.9em;border:2px solid #c8202f;border-radius:50%;color:#c8202f;font-family:"Hiragino Mincho ProN","Yu Mincho","Shippori Mincho B1",serif;font-size:.95em;font-weight:800;letter-spacing:-.04em;rotate:-14deg;opacity:.88;box-shadow:inset 0 0 0 2px rgba(200,32,47,.18)}
.w-big{display:flex;align-items:baseline;gap:.3em;margin-top:.15em;font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-weight:800}
.w-big b{font-size:2.9em;line-height:1.05;color:#24467e;letter-spacing:-.02em;min-width:1.8em}
.w-big span{font-size:1.05em;color:#8a91a0}
.w-pass{position:relative;height:.7em;margin:.55em 0 1.55em;border-radius:99px;background:rgba(28,42,69,.09)}
.w-pass i,.w-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:inherit;transform-origin:left;transform:scaleX(calc(var(--w) * var(--u,1)))}
.w-pass i{background:linear-gradient(90deg,#f4a7b9,#c8202f)}
.w-pass s{position:absolute;top:-.2em;width:.3em;height:1.1em;margin-left:-.15em;border-radius:99px;background:#24467e}
.w-pass s em{position:absolute;top:1.3em;left:50%;translate:-50% 0;font-size:.62em;font-weight:700;color:#5a6476;white-space:nowrap}
.w-sec{display:flex;align-items:center;gap:.45em;margin-top:.45em;padding:.5em .55em .5em .8em;border-radius:.9em;background:rgba(36,70,126,.07);font-size:.82em}
.w-sec span{flex:1;font-weight:600}
.w-sec b{font-weight:800;color:#24467e}
.w-sec small{color:#8a91a0;font-weight:600}
.w-ok{flex:none;width:1.35em;height:1.35em;background:#3d9a72;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.1-4.1 1.4-1.4 2.7 2.7 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.4 14.2-4.1-4.1 1.4-1.4 2.7 2.7 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.w-time{width:16.5em}
.w-row{display:flex;align-items:center;gap:.6em}
.w-row span{display:grid;line-height:1.2}
.w-row b{font-family:"Shippori Mincho B1","Hiragino Mincho ProN",Georgia,serif;font-size:1.15em;font-weight:800;color:#24467e}
.w-row small{font-size:.7em;color:#5a6476}
.w-clock{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#ffc24a;color:#1c2a45;box-shadow:0 3px 0 #d9952a}
.w-clock::before{content:"";width:1.25em;height:1.25em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22%3E%3Cpath d=%22M512 160Q432 160 363 190Q293 220 240.5 272.5Q188 325 158 395Q128 464 128 544Q128 624 158 693Q188 763 240.5 815.5Q293 868 363 898Q432 928 512 928Q592 928 661 898Q731 868 783.5 815.5Q836 763 866 693Q896 624 896 544Q896 465 866 395Q836 325 783.5 272.5Q731 220 661 190Q592 160 512 160ZM512 864Q446 864 387 839Q329 814 285.5 770.5Q242 727 217 669Q192 610 192 544Q192 478 217 419Q242 361 285.5 317.5Q329 274 387 249Q446 224 512 224Q578 224 637 249Q695 274 738.5 317.5Q782 361 807 419Q832 478 832 544Q832 610 807 668Q782 727 738.5 770.5Q695 814 637 839Q578 864 512 864ZM695 361Q699 366 701.5 371.5Q704 377 704 384Q704 391 701.5 396.5Q699 402 695 407L535 567Q530 571 524.5 573.5Q519 576 512 576Q499 576 489.5 566.5Q480 557 480 544Q480 537 482.5 531.5Q485 526 489 521L649 361Q654 357 659.5 354.5Q665 352 672 352Q679 352 684.5 354.5Q690 357 695 361ZM384 64Q384 51 393.5 41.5Q403 32 416 32H608Q621 32 630.5 41.5Q640 51 640 64Q640 77 630.5 86.5Q621 96 608 96H416Q403 96 393.5 86.5Q384 77 384 64Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22%3E%3Cpath d=%22M512 160Q432 160 363 190Q293 220 240.5 272.5Q188 325 158 395Q128 464 128 544Q128 624 158 693Q188 763 240.5 815.5Q293 868 363 898Q432 928 512 928Q592 928 661 898Q731 868 783.5 815.5Q836 763 866 693Q896 624 896 544Q896 465 866 395Q836 325 783.5 272.5Q731 220 661 190Q592 160 512 160ZM512 864Q446 864 387 839Q329 814 285.5 770.5Q242 727 217 669Q192 610 192 544Q192 478 217 419Q242 361 285.5 317.5Q329 274 387 249Q446 224 512 224Q578 224 637 249Q695 274 738.5 317.5Q782 361 807 419Q832 478 832 544Q832 610 807 668Q782 727 738.5 770.5Q695 814 637 839Q578 864 512 864ZM695 361Q699 366 701.5 371.5Q704 377 704 384Q704 391 701.5 396.5Q699 402 695 407L535 567Q530 571 524.5 573.5Q519 576 512 576Q499 576 489.5 566.5Q480 557 480 544Q480 537 482.5 531.5Q485 526 489 521L649 361Q654 357 659.5 354.5Q665 352 672 352Q679 352 684.5 354.5Q690 357 695 361ZM384 64Q384 51 393.5 41.5Q403 32 416 32H608Q621 32 630.5 41.5Q640 51 640 64Q640 77 630.5 86.5Q621 96 608 96H416Q403 96 393.5 86.5Q384 77 384 64Z%22/%3E%3C/svg%3E") center/contain no-repeat}
.w-pace{margin-top:.75em}
.w-pace-h{display:flex;align-items:center;gap:.45em;font-size:.82em}
.w-pace-h b{font-weight:650}
.w-pace-h strong{margin-left:auto;font-weight:800;color:#24467e}
.w-pill{padding:.25em .6em;border-radius:99px;background:#e3f3ea;color:#2f7d5c;font-size:.72em;font-weight:800}
.w-bar{position:relative;height:1.15em;margin-top:.3em}
.w-bar::before,.w-bar i{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:.6em;border-radius:99px}
.w-bar::before{background:rgba(28,42,69,.09)}
.w-bar i{background:linear-gradient(90deg,#b9cdf0,#5b80c4)}
.w-bar s{position:absolute;bottom:-.15em;width:.24em;height:.9em;margin-left:-.12em;border-radius:99px;background:#24467e}
.w-bar u{position:absolute;top:-.35em;margin-left:-.4em;font-size:.8em;line-height:1;text-decoration:none;color:#e9a92c;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.w-legend{margin:.8em 0 0;text-align:center;font-size:.68em;color:#5a6476}
.w-legend span{color:#e9a92c}
.w-legend b{display:inline-block;width:.25em;height:.85em;margin:0 .15em -.08em .25em;border-radius:99px;background:#24467e}
.w-medal{width:9.5em;padding:0;text-align:center;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.w-medal-art{display:block;width:6.6em;margin:0 auto -.7em;position:relative;z-index:1;transform-origin:50% 0;filter:drop-shadow(0 .45em .6em rgba(15,26,51,.3));animation:w-swing 3.2s ease-in-out infinite alternate}
.w-medal.go .w-medal-art{animation:w-swing 3.2s ease-in-out infinite alternate,w-pop-in .7s cubic-bezier(.3,1.6,.5,1)}
.w-rank{display:grid;gap:.1em;padding:1em .8em .8em;border-radius:1.2em;background:rgba(250,248,242,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.75);box-shadow:0 16px 36px rgba(15,26,51,.2)}
.w-rank b{font-family:"Shippori Mincho B1","Hiragino Mincho ProN",Georgia,serif;font-size:1.45em;font-weight:800;color:#c8202f}
.w-rank span{font-size:.74em;color:#5a6476}
.w-rank em{justify-self:center;margin-top:.4em;padding:.25em .7em;border-radius:99px;background:#ffc24a;color:#1c2a45;font-size:.74em;font-weight:800}
.w-confetti{position:absolute;left:50%;top:32%;z-index:2}
.w-confetti i{position:absolute;width:.45em;height:.7em;margin:-.35em 0 0 -.22em;border-radius:2px;background:var(--c);opacity:0}
.w-confetti i:nth-child(3n+1){width:.6em;height:.45em;border-radius:60% 0 60% 0}
.w-medal.go .w-confetti i{animation:w-burst 1.6s cubic-bezier(.15,.75,.3,1) forwards}
.w-medal.go .w-confetti i:nth-child(even){animation-duration:1.9s;animation-delay:.08s}
@keyframes w-burst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) rotate(0)}75%{opacity:1}100%{opacity:0;translate:0 2.2em;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(var(--t))}}
@keyframes w-swing{from{rotate:-4deg}to{rotate:4deg}}
@keyframes w-pop-in{from{scale:.3}to{scale:1}}
@keyframes road-float{from{translate:0 -4px}to{translate:0 5px}}
.road-beat-top .eyebrow{margin:0;font-size:10px;letter-spacing:1.8px;color:#5a6476}
.road-beat-top h2{margin:8px 0 0;font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.road-beat-top h2 span{color:#c8202f}
.road-cue{position:absolute;z-index:8;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));translate:-50% 0;font-size:10px;letter-spacing:1.6px;color:#f6f0dc;background:rgba(15,26,51,.55);padding:8px 12px;border-radius:999px;white-space:nowrap}
.road-page .footer{color:#c8cfe6}
.road-page .footer .brand{color:#f6f0dc}
.road-page .footer p,.road-page .footer nav,.road-page .footer .copyright{color:#8f9ab8}
.road-page .footer nav a:hover{color:#ffc24a}

@media (max-width:760px){
  .road{height:440vh}
  .road-stage{--k:.66}
  .road-mascot{--mx:50%;height:min(36%,360px);bottom:8%}
  .road-copy{left:20px;right:20px;top:calc(84px + env(safe-area-inset-top,0px));text-align:center;max-width:none}
  .road-copy .sub{margin-inline:auto;font-size:14px}
  .road-copy.night{top:calc(78px + env(safe-area-inset-top,0px))}
  .road-copy.night h2{font-size:27px}
  .road-copy.night .sub{margin-top:10px}
  .road-stores{justify-content:center;gap:10px;margin-top:16px}
  .road-store{height:50px;gap:10px;padding:0 18px 0 15px}
  .road-store .store-mark{width:18px;height:18px}
  .road-store > span:last-child{font-size:14px}
  .road-store small{font-size:8.5px}
  .road-beat-top{left:16px;right:16px;max-width:none;top:calc(84px + env(safe-area-inset-top,0px));text-align:center;padding:14px 18px 16px}
  .road-beat-top h2{font-size:26px}
  .road-chip{top:var(--py);flex-direction:column;gap:5px;padding:9px 10px 8px;border-radius:15px;font-size:10.5px;min-width:74px}
  .road-chip.l{left:var(--px)}
  .road-chip.r{right:var(--px)}
  .road-chip .ico{width:32px;height:32px;border-radius:10px}
  .road-chip .ico:not(.glyph)::before{width:18px;height:18px}
  .road-chip .glyph{font-size:17px}
  .road-card{top:var(--py);width:72px;height:92px;gap:4px;border-radius:12px}
  .road-card.l{left:var(--px)}
  .road-card.r{right:var(--px)}
  .road-card.wide{display:none}
  .road-card i{width:32px;height:32px;font-size:16px}
  .road-card b{font-size:10px}
  .road-card small{font-size:7.5px}
  .road-w{top:var(--py);font-size:9.4px}
  .road-w.l{left:var(--px)}
  .road-w.r{right:var(--px)}
          }
@media (max-width:760px) and (max-height:720px){.road-mascot{height:30%}.road-copy h1{font-size:34px}}

/* Reduced motion / Save-Data: one still dawn composition, no sticky scroll. */
.road.is-static{height:auto}
.road.is-static .road-stage{position:relative}
.road.is-static .road-cue,.road.is-static .road-beat{display:none}
/* Touch phones: backdrop-filter over layers that move every frame is the costliest thing on the page for a mobile GPU.
   Swap the glass blur for a more opaque fill, and slim the mascot's stacked glow filters to two. */
@media (hover:none) and (pointer:coarse),(max-width:760px){
  .road-nav-inner,.road-store,.road-beat-top,.road-chip,.road-w,.w-rank{-webkit-backdrop-filter:none;backdrop-filter:none}
  .road-nav-inner{background:rgba(246,245,241,.92)}
  .road-store{background:rgba(15,26,51,.82)}
  .road-beat-top{background:rgba(246,245,241,.93)}
  .road-chip{background:rgba(28,29,34,.93)}
  .road-w{background:rgba(250,248,242,.96)}
  .w-rank{background:rgba(250,248,242,.97)}
  .road-mascot img{filter:drop-shadow(0 0 10px rgba(255,194,74,calc(var(--b) * .7))) drop-shadow(0 8px 10px rgba(15,26,51,.28))}
  .road-sun{filter:none;box-shadow:0 0 40px rgba(255,194,74,.45)}
}
@media (prefers-reduced-motion:reduce){.road-lanterns img,.road-chip,.road-card,.road-w,.w-medal-art,.w-confetti i{animation:none!important}.road-nav{transition:none}}