:root{--arcade-bg:#090b12;--arcade-panel:#111522;--arcade-cream:#f1f2e9;--arcade-muted:#8c93a5;--arcade-lime:#d7ff32;--arcade-cyan:#72e5e7;--arcade-purple:#a68aff;--arcade-mono:'DM Mono',monospace;--arcade-display:'Space Grotesk',sans-serif}
html{scroll-behavior:smooth}body[data-page="trend"]{background:var(--arcade-bg);color:var(--arcade-cream)}
body[data-page="trend"] .site-header{background:#090b12ed;border-bottom:1px solid #fff1;backdrop-filter:blur(16px)}body[data-page="trend"] .desktop-nav a.active{color:var(--arcade-lime)}
body[data-page="trend"] .runner-page{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding:clamp(50px,7vw,90px) max(5vw,calc((100vw - 1420px)/2)) 0;background:radial-gradient(ellipse at 50% 44%,#252b4844,transparent 50%),linear-gradient(180deg,#0c0f19,#090b12 78%)}
body[data-page="trend"] .runner-ambient{position:absolute;z-index:-2;inset:0;opacity:.28;background-image:linear-gradient(#c4d3ff0b 1px,transparent 1px),linear-gradient(90deg,#c4d3ff0b 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent)}
body[data-page="trend"] .runner-heading{text-align:center;max-width:880px;margin:0 auto 34px}.arcade-label{display:inline-flex;align-items:center;gap:11px;color:#aab3c8;font:500 9px var(--arcade-mono);letter-spacing:.16em}.arcade-label i{width:7px;height:7px;border-radius:50%;background:var(--arcade-lime);box-shadow:0 0 14px var(--arcade-lime);animation:pixelPulse 1.6s infinite}.arcade-label b{padding:4px 6px;border:1px solid #ffffff24;color:var(--arcade-lime);font-weight:400}
body[data-page="trend"] .runner-heading h1{margin:20px 0 13px;font:700 clamp(44px,7.5vw,92px)/.92 var(--arcade-display);letter-spacing:-.085em;text-shadow:0 0 45px #a68aff29}body[data-page="trend"] .runner-heading p{max-width:600px;margin:auto;color:#a9b0c1;font-size:15px;line-height:1.65}
body[data-page="trend"] .game-frame{width:min(100%,1120px);margin:auto;border:1px solid #abb8ed38;background:#0e111c;box-shadow:0 30px 100px #0009,0 0 70px #8f7aff0d}
body[data-page="trend"] .game-topbar{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #c8d4ff19;background:#141827}.game-brand{display:flex;align-items:center;gap:9px;font:500 9px var(--arcade-mono);letter-spacing:.13em}.game-brand i{margin-left:5px;color:#7f8aa3;font-style:normal}.pixel-logo{display:grid;place-items:center;width:25px;height:25px;background:var(--arcade-lime);color:#151827;font:700 9px var(--arcade-display);letter-spacing:-.08em;box-shadow:3px 3px 0 #8ca921}.game-top-status{display:flex;align-items:center;gap:8px;color:#9da7bd;font:9px var(--arcade-mono);letter-spacing:.1em}.game-status-dot{width:6px;height:6px;border-radius:50%;background:var(--arcade-cyan);box-shadow:0 0 10px var(--arcade-cyan)}
body[data-page="trend"] .sound-toggle{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #ffffff20;background:#0e111c;color:#b7c1d5;cursor:pointer;font:9px var(--arcade-mono);letter-spacing:.08em}.sound-toggle[aria-pressed="false"]{color:#6e7689}.sound-icon{color:var(--arcade-lime);font-size:12px}.sound-toggle[aria-pressed="false"] .sound-icon{color:#7a8292}
body[data-page="trend"] .scorebar{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 18px;border-bottom:1px solid #c8d4ff14;background:#101421}.scorebar>div{display:grid;gap:5px;padding-left:14px;border-left:1px solid #c8d4ff17}.scorebar>div:first-child{padding-left:0;border-left:0}.scorebar small{color:#758199;font:8px var(--arcade-mono);letter-spacing:.13em}.scorebar strong{color:#eff4ff;font:600 19px var(--arcade-mono);letter-spacing:.03em}.scorebar strong i{margin-left:4px;color:var(--arcade-lime);font:9px var(--arcade-mono);font-style:normal}.scorebar .level-readout{text-align:right}
body[data-page="trend"] .game-screen{position:relative;overflow:hidden;aspect-ratio:16/9;min-height:0;background:#111729;touch-action:manipulation;outline:none}body[data-page="trend"] .game-screen:focus-visible{box-shadow:inset 0 0 0 2px var(--arcade-lime)}body[data-page="trend"] #runnerCanvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}body[data-page="trend"] .screen-scanlines{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.16;background:repeating-linear-gradient(0deg,#080a11 0 1px,transparent 1px 4px);mix-blend-mode:multiply}.screen-corner{position:absolute;z-index:3;width:17px;height:17px;border-color:#d7ff3275;border-style:solid;pointer-events:none}.corner-tl{top:12px;left:12px;border-width:1px 0 0 1px}.corner-tr{top:12px;right:12px;border-width:1px 1px 0 0}.corner-bl{bottom:12px;left:12px;border-width:0 0 1px 1px}.corner-br{right:12px;bottom:12px;border-width:0 1px 1px 0}
body[data-page="trend"] .move-callout{position:absolute;z-index:4;top:18px;left:50%;display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid #d7ff3238;background:#090b12c9;color:#e9eddf;opacity:.92;transform:translateX(-50%);font:500 9px var(--arcade-mono);letter-spacing:.13em;pointer-events:none;white-space:nowrap}.move-callout.is-active{border-color:#d7ff32a1;color:var(--arcade-lime);box-shadow:0 0 22px #d7ff321e}.callout-star{color:var(--arcade-lime)}
body[data-page="trend"] .game-overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:#080b14a6;backdrop-filter:blur(2px);transition:opacity .28s,visibility .28s}.game-overlay.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.overlay-card{width:min(90%,420px);padding:28px 25px;text-align:center;border:1px solid #a68aff63;background:linear-gradient(150deg,#171b2d,#10131e);box-shadow:0 20px 70px #0009,0 0 44px #a68aff14}.overlay-kicker{color:var(--arcade-cyan);font:9px var(--arcade-mono);letter-spacing:.17em}.overlay-card h2{margin:12px 0 8px;color:#f1f3eb;font:700 clamp(30px,5vw,48px)/.95 var(--arcade-display);letter-spacing:-.07em}.overlay-card p{max-width:330px;margin:0 auto 19px;color:#aab3c4;font-size:13px;line-height:1.6}.overlay-card button{display:inline-flex;align-items:center;gap:12px;padding:12px 19px;border:0;background:var(--arcade-lime);color:#141827;cursor:pointer;font:700 10px var(--arcade-mono);letter-spacing:.1em;box-shadow:4px 4px 0 #839f1d;transition:transform .16s,box-shadow .16s}.overlay-card button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #839f1d}.overlay-card button span{font-size:10px}.overlay-card>small{display:block;margin-top:14px;color:#788399;font:8px var(--arcade-mono);letter-spacing:.08em}
body[data-page="trend"] .game-controls{display:grid;grid-template-columns:1fr minmax(160px,.8fr) 1fr;align-items:center;gap:15px;padding:14px 17px;border-top:1px solid #d3dcff16;background:#121625}.direction-control{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #ffffff18;background:#171c2c;color:#e7ebdf;text-align:left;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.direction-control:hover,.direction-control.is-active{border-color:#d7ff3285;background:#222a2b;transform:translateY(-2px)}.direction-control .keycap{display:grid;place-items:center;width:35px;height:31px;border:1px solid #67718a;background:#0c101c;color:var(--arcade-lime);font:17px var(--arcade-mono);box-shadow:0 3px 0 #06070c}.direction-control b,.direction-control small{display:block}.direction-control b{font:500 9px var(--arcade-mono);letter-spacing:.08em}.direction-control small{margin-top:4px;color:#77839c;font:8px var(--arcade-mono);letter-spacing:.09em}.direction-control>i{margin-left:auto;color:#84915a;font:7px var(--arcade-mono);font-style:normal;letter-spacing:.08em}.direction-right{justify-content:flex-end;text-align:right}.direction-right>i{margin:0 auto 0 0}.control-center{display:flex;align-items:center;justify-content:center;gap:8px;color:#8691a6;text-align:center;font:8px/1.5 var(--arcade-mono);letter-spacing:.05em}.control-cross{color:var(--arcade-purple);font-size:18px}
body[data-page="trend"] .game-instructions{display:flex;justify-content:center;gap:clamp(18px,5vw,65px);width:min(100%,1050px);margin:23px auto 26px;color:#8e98ad;font:8px var(--arcade-mono);letter-spacing:.1em}.game-instructions span{display:flex;align-items:center;gap:8px}.game-instructions i{color:var(--arcade-lime);font-style:normal}.game-instructions b{font-weight:400}.arcade-marquee{display:flex;align-items:center;justify-content:space-around;gap:16px;width:calc(100% + 10vw);margin:0 -5vw;padding:15px 4vw;border-top:1px solid #ffffff12;color:#778197;white-space:nowrap;font:9px var(--arcade-mono);letter-spacing:.18em}.arcade-marquee i{color:var(--arcade-lime);font-size:13px;font-style:normal}
body[data-page="trend"] .experience-cta{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:8vw;padding:clamp(80px,10vw,130px) max(9vw,calc((100vw - 1200px)/2));background:#111522}.experience-mark{position:relative;display:grid;place-items:center;width:min(25vw,270px);aspect-ratio:1;border:1px solid #a68aff55;border-radius:50%;color:var(--arcade-lime);font:700 clamp(60px,10vw,120px)/1 var(--arcade-display);letter-spacing:-.1em;text-shadow:0 0 30px #d7ff3240}.experience-mark:before,.experience-mark:after{position:absolute;inset:12%;border:1px solid #ffffff20;border-radius:50%;content:""}.experience-mark:after{inset:27%;border-color:#a68aff55}.experience-mark i{position:absolute;top:15%;right:16%;width:9px;height:9px;border-radius:50%;background:var(--arcade-lime);box-shadow:0 0 15px var(--arcade-lime)}.experience-mark b{position:absolute;right:-30px;bottom:15%;padding:7px 9px;background:var(--arcade-lime);color:#161927;font:8px var(--arcade-mono);letter-spacing:.1em}.experience-copy .section-index{color:var(--arcade-cyan);font:9px var(--arcade-mono);letter-spacing:.15em}.experience-copy h2{max-width:710px;margin:20px 0 14px;font:700 clamp(40px,5.7vw,72px)/.94 var(--arcade-display);letter-spacing:-.08em}.experience-copy p{max-width:560px;color:#aab2c1;font-size:14px;line-height:1.75}.experience-actions{display:flex;gap:12px;margin-top:25px}.experience-actions a{padding:11px 14px;text-decoration:none;font:9px var(--arcade-mono);letter-spacing:.07em;transition:transform .18s}.experience-actions a:hover{transform:translateY(-2px)}.explore-button{border:1px solid #c7d0e346;color:#dce3f1}.project-button{background:var(--arcade-lime);color:#101421}
body[data-page="trend"] .site-footer{border-top:1px solid #ffffff16;background:#090b12}
@keyframes pixelPulse{0%,100%{opacity:1}50%{opacity:.36}}
@media(max-width:850px){body[data-page="trend"] .runner-page{padding:54px 4vw 0}.runner-heading{margin-bottom:25px}.game-controls{gap:8px;padding:11px}.direction-control>i{display:none}.game-instructions{gap:18px}.experience-cta{gap:5vw;padding-left:7vw;padding-right:7vw}}
@media(max-width:600px){body[data-page="trend"] .runner-page{padding:40px 12px 0}.runner-heading h1{font-size:clamp(43px,12vw,68px)}.runner-heading p{font-size:13px}.game-topbar{height:46px;padding:0 10px}.game-brand{gap:7px;font-size:8px}.pixel-logo{width:22px;height:22px}.game-top-status{font-size:7px}.sound-toggle{gap:5px;padding:6px;font-size:8px}.scorebar{padding:9px}.scorebar>div{padding-left:8px}.scorebar small{font-size:7px}.scorebar strong{font-size:15px}.move-callout{top:12px;font-size:8px}.game-controls{grid-template-columns:1fr 1fr;gap:8px;padding:9px}.control-center{grid-column:1/-1;grid-row:1;font-size:7px}.direction-control{justify-content:center;gap:8px;padding:9px 5px}.direction-control .keycap{width:31px;height:29px}.direction-control b{font-size:8px}.direction-control small{font-size:7px}.direction-right{flex-direction:row-reverse}.game-instructions{display:grid;grid-template-columns:1fr;gap:8px;margin:17px 5px 22px;font-size:8px}.arcade-marquee{justify-content:flex-start;overflow:hidden;width:calc(100% + 24px);margin-left:-12px;padding:13px 12px;font-size:8px}.arcade-marquee span:nth-of-type(n+3),.arcade-marquee i:nth-of-type(n+2){display:none}.experience-cta{grid-template-columns:1fr;gap:38px;padding:70px 25px}.experience-mark{width:175px;margin:auto}.experience-copy h2{font-size:clamp(39px,11vw,55px)}.experience-actions{flex-wrap:wrap}.experience-mark b{right:-22px;font-size:7px}}
@media(prefers-reduced-motion:reduce){body[data-page="trend"] .arcade-label i{animation:none}body[data-page="trend"] .game-overlay,body[data-page="trend"] .direction-control,body[data-page="trend"] .experience-actions a{transition:none}}
.game-actions{display:flex;align-items:center;gap:6px}.game-action-button{display:flex;align-items:center;gap:6px;min-height:30px;padding:5px 8px;border:1px solid #ffffff20;background:#0e111c;color:#b7c1d5;cursor:pointer;font:8px var(--arcade-mono);letter-spacing:.07em}.game-action-button:hover{border-color:#d7ff3285;color:var(--arcade-lime)}.game-action-button span{color:var(--arcade-lime);font-size:12px}.game-action-button[hidden]{display:none}
.game-screen:focus-visible,.direction-control:focus-visible,.game-action-button:focus-visible,.sound-toggle:focus-visible{outline:2px solid var(--arcade-lime);outline-offset:2px}
.game-screen.is-hit{animation:runnerHit .26s steps(2,end)}
@keyframes runnerHit{20%{transform:translateX(-5px);filter:brightness(1.45)}40%{transform:translateX(5px)}60%{transform:translateX(-3px);filter:brightness(.78)}80%{transform:translateX(2px)}}
@media(max-width:600px){.game-actions{gap:4px}.game-action-button{min-height:32px;min-width:36px;justify-content:center;padding:4px 6px}.game-action-button b{display:none}.game-top-status{max-width:90px;white-space:nowrap}.game-screen{touch-action:pan-y}.direction-control{min-height:48px}.direction-control .keycap{width:36px;height:34px}.game-controls{gap:10px;padding:10px}}
@media(prefers-reduced-motion:reduce){.game-screen.is-hit{animation:none}}

/* Phone play: put the hint above two equal, thumb-friendly lane buttons. */
@media(max-width:600px){
  body[data-page="trend"] .game-controls{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:9px;padding:10px}
  body[data-page="trend"] .control-center{grid-column:1/-1;grid-row:1;min-height:20px}
  body[data-page="trend"] #moveLeft{grid-column:1;grid-row:2}
  body[data-page="trend"] #moveRight{grid-column:2;grid-row:2}
  body[data-page="trend"] .direction-control{box-sizing:border-box;width:100%;min-width:0;min-height:58px;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:5px}
  body[data-page="trend"] .direction-control .keycap{flex:0 0 40px;width:40px;height:40px;font-size:20px}
  body[data-page="trend"] .direction-control b{font-size:9px;white-space:nowrap}
  body[data-page="trend"] .direction-control small{font-size:7px}
  body[data-page="trend"] .fullscreen-control b{display:none}
}

/* Mobile start screen: keep the controls usable without an inner scroll area. */
@media(max-width:600px){
  body[data-page="trend"] .runner-page{padding:30px 12px 0}
  body[data-page="trend"] .runner-heading{margin-bottom:16px}
  body[data-page="trend"] .runner-heading h1{margin:12px 0 8px;font-size:clamp(38px,10vw,52px)}
  body[data-page="trend"] .runner-heading p{max-width:350px;font-size:12px;line-height:1.45}
  body[data-page="trend"] .game-frame .overlay-card{width:calc(100% - 20px);max-height:calc(100% - 12px);padding:11px 12px;overflow:hidden}
  body[data-page="trend"] .game-frame .overlay-kicker,
  body[data-page="trend"] .game-frame .overlay-card>p,
  body[data-page="trend"] .game-frame .overlay-card>small{display:none}
  body[data-page="trend"] .game-frame .overlay-card h2{margin:0 0 7px;font-size:24px;line-height:1}
  body[data-page="trend"] .game-frame .player-name-field{gap:4px;margin-bottom:6px;font-size:7px}
  body[data-page="trend"] .game-frame .player-name-field input{min-height:36px;padding:7px 9px;font-size:12px}
  body[data-page="trend"] .game-frame .name-error{margin:0 auto 5px;font-size:9px}
  body[data-page="trend"] .game-frame .how-to-play{gap:0;margin:0 auto 7px;padding:6px 8px;font-size:9px;line-height:1.3}
  body[data-page="trend"] .game-frame .how-to-play b{display:none}
  body[data-page="trend"] .game-frame .overlay-card button{padding:9px 15px;font-size:9px}
  body[data-page="trend"] .game-frame .leaderboard{max-width:calc(100% - 24px);margin:14px auto 12px;padding-top:10px}
  body[data-page="trend"] .game-frame .leaderboard ol{grid-template-columns:1fr;gap:4px}
}

/* A real service ad, with full-width copy and thumb-friendly actions on phones. */
@media(max-width:600px){
  body[data-page="trend"] .experience-cta{grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 22px}
  body[data-page="trend"] .experience-mark{width:128px;margin:0 auto 3px}
  body[data-page="trend"] .experience-mark b{right:50%;bottom:8%;transform:translateX(50%);white-space:nowrap}
  body[data-page="trend"] .experience-copy{width:100%;min-width:0}
  body[data-page="trend"] .experience-copy h2{max-width:100%;margin:13px 0 12px;font-size:clamp(31px,8.5vw,40px);line-height:1.04;letter-spacing:-.055em;overflow-wrap:break-word}
  body[data-page="trend"] .experience-copy p{max-width:100%;margin:0;font-size:14px;line-height:1.7}
  body[data-page="trend"] .experience-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px}
  body[data-page="trend"] .experience-actions a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;font-size:10px}
}

/* Keep the pixel scene at its original 16:9 ratio in portrait fullscreen. */
body[data-page="trend"] .game-frame.is-fullscreen .game-screen{display:grid;place-items:center;background:#090b12}
body[data-page="trend"] .game-frame.is-fullscreen #runnerCanvas{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:16/9}
body[data-page="trend"] .overlay-card{box-sizing:border-box;max-height:calc(100% - 20px);overflow:auto;overscroll-behavior:contain}
.player-name-field{display:grid;gap:6px;margin:0 auto 9px;max-width:280px;text-align:left;color:#9ba6bd;font:8px var(--arcade-mono);letter-spacing:.12em}
.player-name-field input{box-sizing:border-box;width:100%;min-height:38px;padding:9px 11px;border:1px solid #ffffff30;border-radius:2px;background:#0b0f1a;color:#f1f2e9;font:500 13px var(--arcade-display);letter-spacing:.02em;outline:none}
.player-name-field input:focus{border-color:var(--arcade-lime);box-shadow:0 0 0 2px #d7ff3224}
.player-name-field input::placeholder{color:#657089}
.name-error{display:block;margin:-3px auto 8px;color:#ff9c83;font-size:10px}
.how-to-play{display:grid;gap:5px;margin:0 auto 13px;padding:9px 11px;max-width:340px;border:1px solid #ffffff18;background:#0e1320;color:#aab4c9;text-align:left;font-size:11px;line-height:1.45}
.how-to-play b{color:var(--arcade-lime);font:8px var(--arcade-mono);letter-spacing:.12em}
.leaderboard{max-width:340px;margin:17px auto 0;padding-top:11px;border-top:1px solid #ffffff1c;text-align:left}
.leaderboard header{display:flex;justify-content:space-between;align-items:center;color:#aeb8cc;font:8px var(--arcade-mono);letter-spacing:.13em}
.leaderboard header span{color:var(--arcade-lime)}
.leaderboard ol{display:grid;gap:5px;margin:8px 0 6px;padding:0;list-style:none}
.leaderboard li{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 8px;background:#0d1220;color:#b9c2d3;font:10px var(--arcade-mono)}
.leaderboard li>span{color:var(--arcade-purple)}.leaderboard li>b{overflow:hidden;color:#edf0e7;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.leaderboard li>strong{color:var(--arcade-lime);font-weight:500}.leaderboard .leaderboard-empty{display:block;color:#79849c}
.leaderboard>small{display:block;color:#68748d;font:7px var(--arcade-mono);letter-spacing:.08em}
@media(max-width:600px){.overlay-card{padding:18px 16px}.overlay-card p{margin-bottom:12px;font-size:12px}.overlay-card h2{margin:8px 0;font-size:clamp(28px,8vw,38px)}.overlay-card>small{margin-top:10px;font-size:7px}.leaderboard{margin-top:11px}.leaderboard ol{gap:3px}.leaderboard li{padding:5px 7px}.player-name-field input{min-height:42px}}

/* Preserve the game's landscape composition when the phone viewport is portrait. */
body[data-page="trend"] .game-frame.is-fullscreen .game-screen{isolation:isolate;display:grid;place-items:center;min-width:0;min-height:0}
body[data-page="trend"] .game-frame.is-fullscreen #runnerCanvas{grid-area:1/1;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:16/9;object-fit:contain}
body[data-page="trend"] .game-frame.is-fullscreen .screen-scanlines,
body[data-page="trend"] .game-frame.is-fullscreen .screen-corner,
body[data-page="trend"] .game-frame.is-fullscreen .move-callout,
body[data-page="trend"] .game-frame.is-fullscreen .game-overlay{grid-area:1/1}
body[data-page="trend"] .game-frame.is-fullscreen .control-center{min-height:28px;padding:4px 10px;border:1px solid #d7ff3238;border-radius:3px;background:#0b0f1ae8;color:#dce2eb;font-size:9px;letter-spacing:.08em}
body[data-page="trend"] .game-frame.is-fullscreen .control-cross{color:var(--arcade-lime)}
body[data-page="trend"] .game-frame.is-fullscreen .direction-control{box-shadow:0 5px 0 #090b12;touch-action:manipulation}
body[data-page="trend"] .game-frame.is-fullscreen .direction-control:active{transform:translateY(2px);box-shadow:0 2px 0 #090b12}
body[data-page="trend"] .game-frame.is-fullscreen .overlay-card{width:min(92%,430px);max-height:calc(100% - 16px);padding:clamp(15px,3vh,25px) clamp(16px,4vw,25px)}
@media(max-width:600px){
  body[data-page="trend"] .game-frame.is-fullscreen .game-screen{height:100%;}
  body[data-page="trend"] .game-frame.is-fullscreen .game-controls{min-height:132px;}
  body[data-page="trend"] .game-frame.is-fullscreen .control-center{font-size:9px;}
  body[data-page="trend"] .game-frame.is-fullscreen .direction-control{min-height:62px;}
}

html.trend-game-fullscreen,html.trend-game-fullscreen body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body[data-page="trend"] .game-frame.is-fullscreen{position:fixed;z-index:2147483000;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;margin:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;border:0;box-shadow:none;background:#090b12}
body[data-page="trend"] .game-frame.is-fullscreen .game-screen{width:100%;height:100%;min-height:0;aspect-ratio:auto}
body[data-page="trend"] .game-frame.is-fullscreen .game-controls{padding-bottom:max(12px,env(safe-area-inset-bottom))}
@media(max-width:600px){
  body[data-page="trend"] .game-frame.is-fullscreen .game-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}
  body[data-page="trend"] .game-frame.is-fullscreen .game-top-status{display:none}
  body[data-page="trend"] .game-frame.is-fullscreen .sound-toggle{min-width:36px;min-height:32px;justify-content:center;padding:4px 6px}
  body[data-page="trend"] .game-frame.is-fullscreen .sound-toggle b{display:none}
  body[data-page="trend"] .game-frame.is-fullscreen .game-topbar{height:48px;padding-block:0;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  body[data-page="trend"] .game-frame.is-fullscreen .scorebar{padding:8px 10px}
  body[data-page="trend"] .game-frame.is-fullscreen .scorebar>div{padding-left:7px}
  body[data-page="trend"] .game-frame.is-fullscreen .scorebar small{font-size:6px;letter-spacing:.08em}
  body[data-page="trend"] .game-frame.is-fullscreen .scorebar strong{font-size:14px}
  body[data-page="trend"] .game-frame.is-fullscreen .game-controls{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:8px;padding:8px max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right))}
  body[data-page="trend"] .game-frame.is-fullscreen .control-center{grid-column:1/-1;grid-row:1;min-height:18px;font-size:7px}
  body[data-page="trend"] .game-frame.is-fullscreen #moveLeft{grid-column:1;grid-row:2}
  body[data-page="trend"] .game-frame.is-fullscreen #moveRight{grid-column:2;grid-row:2}
  body[data-page="trend"] .game-frame.is-fullscreen .direction-control{min-height:60px;padding:8px 10px}
}

/* The start card reuses the runner sprite sheet for a brief pre-game flash-step. */
body[data-page="trend"] .overlay-intro{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;gap:14px;max-width:360px;margin:0 auto 12px;text-align:left}
body[data-page="trend"] .intro-dancer{display:block;width:94px;height:120px;image-rendering:pixelated;filter:drop-shadow(0 7px 10px #a68aff24);animation:introDancerFloat 1.9s steps(2,end) infinite}
body[data-page="trend"] .overlay-copy{min-width:0;text-align:left}
body[data-page="trend"] .overlay-copy .overlay-kicker{display:block;color:var(--arcade-cyan);font:8px var(--arcade-mono);letter-spacing:.13em}
body[data-page="trend"] .overlay-copy h2{margin:7px 0 0;text-align:left;font-size:clamp(26px,4vw,38px);line-height:.98}
@keyframes introDancerFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:600px){
  body[data-page="trend"] .game-frame .overlay-intro{grid-template-columns:56px minmax(0,1fr);gap:8px;margin-bottom:5px}
  body[data-page="trend"] .game-frame .intro-dancer{width:56px;height:70px}
  body[data-page="trend"] .game-frame .overlay-copy h2{margin:3px 0 0;font-size:clamp(21px,6vw,25px);line-height:1;text-align:left}
}
@media(prefers-reduced-motion:reduce){body[data-page="trend"] .intro-dancer{animation:none}}

/* Results turn a completed run into a shareable invitation and a clear path to the WebWorks portfolio. */
body[data-page="trend"] .run-result[hidden]{display:none}
body[data-page="trend"] .run-result{max-width:340px;margin:12px auto 13px;padding:12px;border:1px solid #d7ff3242;background:linear-gradient(135deg,#d7ff3210,#a68aff0c);text-align:left}
body[data-page="trend"] .run-result>span{display:block;color:var(--arcade-cyan);font:8px var(--arcade-mono);letter-spacing:.15em}
body[data-page="trend"] .run-result>strong{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;color:#f1f2e9;font:600 15px var(--arcade-display)}
body[data-page="trend"] .run-result>strong b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-page="trend"] .run-result>strong i{flex:none;color:var(--arcade-lime);font:600 17px var(--arcade-mono);font-style:normal}
body[data-page="trend"] .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
body[data-page="trend"] .result-actions button,body[data-page="trend"] .result-actions a{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:38px;padding:8px 7px;border:1px solid #ffffff2c;background:#0d1220;color:#e8eddf;text-decoration:none;text-align:center;font:8px var(--arcade-mono);letter-spacing:.04em;cursor:pointer}
body[data-page="trend"] .result-actions .share-result{border-color:var(--arcade-lime);background:var(--arcade-lime);color:#111522;font-weight:700}
body[data-page="trend"] .result-actions button:disabled{opacity:.65;cursor:wait}
body[data-page="trend"] .result-actions a:hover{border-color:var(--arcade-cyan)}
body[data-page="trend"] #shareStatus{display:block;min-height:1em;margin-top:8px;color:#aab4c9;font-size:8px;line-height:1.4}
body[data-page="trend"] .challenge-prompt{max-width:320px;margin:0 auto 10px;padding:7px 9px;border-left:2px solid var(--arcade-lime);background:#d7ff320d;color:#d7e3b2;font-size:10px;line-height:1.4;text-align:left}
body[data-page="trend"] .overlay-card.is-game-over .player-name-field,body[data-page="trend"] .overlay-card.is-game-over .name-error,body[data-page="trend"] .overlay-card.is-game-over .how-to-play{display:none}
body[data-page="trend"] .overlay-card.is-game-over .overlay-intro{margin-bottom:8px}
@media(max-width:600px){
  body[data-page="trend"] .game-frame .overlay-card .challenge-prompt:not([hidden]){display:block;margin:0 auto 7px;font-size:9px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over{padding:10px 12px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .overlay-intro{grid-template-columns:48px minmax(0,1fr);margin-bottom:3px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .intro-dancer{width:48px;height:60px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over h2{margin-bottom:2px;font-size:22px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .run-result{margin:6px auto;padding:8px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .run-result>strong{margin-top:5px;font-size:13px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .run-result>strong i{font-size:15px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .result-actions{gap:6px;margin-top:7px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over .result-actions button,body[data-page="trend"] .game-frame .overlay-card.is-game-over .result-actions a{min-height:34px;font-size:7px}
  body[data-page="trend"] .game-frame .overlay-card.is-game-over #startGame{padding:8px 13px}
}
@media(prefers-reduced-motion:reduce){body[data-page="trend"] .run-result,body[data-page="trend"] .result-actions button,body[data-page="trend"] .result-actions a{transition:none}}

/* Native portrait playfield. Desktop uses a side console; phones stack around 9:16 play. */
body[data-page="trend"] .game-frame{display:grid;grid-template-columns:minmax(0,420px) minmax(280px,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,920px)}
body[data-page="trend"] .game-screen{grid-column:1;grid-row:1/5;width:100%;height:auto;aspect-ratio:9/16;border-right:1px solid #d7ff3235}
body[data-page="trend"] #runnerCanvas{width:100%;height:100%;aspect-ratio:9/16}
body[data-page="trend"] .game-topbar{grid-column:2;grid-row:1;min-width:0}
body[data-page="trend"] .scorebar{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}
body[data-page="trend"] .scorebar>div:nth-child(3){padding-left:0;border-left:0}
body[data-page="trend"] .game-controls{grid-column:2;grid-row:3;display:flex;flex-direction:column;justify-content:center;gap:20px;min-width:0;padding:30px}
body[data-page="trend"] .direction-control{width:100%;min-height:70px}
body[data-page="trend"] .control-center{min-height:48px}
body[data-page="trend"] .game-frame>.leaderboard{grid-column:2;grid-row:4;align-self:end;width:calc(100% - 36px);max-width:none;margin:0 18px 18px}
body[data-page="trend"] .game-frame .overlay-card{max-height:calc(100% - 36px)}

@media(max-width:850px){
  body[data-page="trend"] .game-frame{display:flex;flex-direction:column;width:min(100%,540px)}
  body[data-page="trend"] .game-screen{flex:none;width:100%;height:auto;aspect-ratio:9/16;border-right:0}
  body[data-page="trend"] .scorebar{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  body[data-page="trend"] .scorebar>div:nth-child(3){padding-left:14px;border-left:1px solid #c8d4ff17}
  body[data-page="trend"] .game-controls{display:grid;grid-template-columns:1fr minmax(130px,.8fr) 1fr;gap:10px;padding:12px}
  body[data-page="trend"] .direction-control{min-height:54px}
  body[data-page="trend"] .control-center{min-height:0}
  body[data-page="trend"] .game-frame>.leaderboard{width:calc(100% - 28px);margin:15px 14px 18px}
}
@media(max-width:600px){
  body[data-page="trend"] .game-controls{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:9px;padding:10px}
  body[data-page="trend"] .control-center{grid-column:1/-1;grid-row:1}
  body[data-page="trend"] #moveLeft{grid-column:1;grid-row:2}
  body[data-page="trend"] #moveRight{grid-column:2;grid-row:2}
  body[data-page="trend"] .game-frame .overlay-card{width:calc(100% - 26px);max-height:calc(100% - 30px);padding:17px 15px;overflow:auto}
  body[data-page="trend"] .game-frame .overlay-kicker{display:block}
  body[data-page="trend"] .game-frame .overlay-card>p{display:block;font-size:11px;line-height:1.45}
  body[data-page="trend"] .game-frame .overlay-card>small{display:block}
  body[data-page="trend"] .game-frame .overlay-intro{grid-template-columns:65px minmax(0,1fr);margin-bottom:9px}
  body[data-page="trend"] .game-frame .intro-dancer{width:65px;height:83px}
  body[data-page="trend"] .game-frame .overlay-copy h2{font-size:clamp(23px,7vw,32px)}
}

body[data-page="trend"] .game-frame.is-fullscreen{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;width:100vw;max-width:none}
body[data-page="trend"] .game-frame.is-fullscreen .game-topbar{grid-column:1;grid-row:1}
body[data-page="trend"] .game-frame.is-fullscreen .scorebar{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
body[data-page="trend"] .game-frame.is-fullscreen .game-screen{grid-column:1;grid-row:3;display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-right:0}
body[data-page="trend"] .game-frame.is-fullscreen #runnerCanvas{position:absolute;top:50%;left:50%;width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:9/16;object-fit:contain;transform:translate(-50%,-50%)}
body[data-page="trend"] .game-frame.is-fullscreen .game-overlay{position:fixed;z-index:20;inset:0}
body[data-page="trend"] .game-frame.is-fullscreen .game-controls{grid-column:1;grid-row:4;display:grid;grid-template-columns:1fr minmax(160px,.8fr) 1fr;gap:12px;min-height:0;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
body[data-page="trend"] .game-frame.is-fullscreen>.leaderboard{display:none}
@media(max-width:600px){
  body[data-page="trend"] .game-frame.is-fullscreen .game-controls{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:8px}
  body[data-page="trend"] .game-frame.is-fullscreen .control-center{grid-column:1/-1;grid-row:1}
  body[data-page="trend"] .game-frame.is-fullscreen #moveLeft{grid-column:1;grid-row:2}
  body[data-page="trend"] .game-frame.is-fullscreen #moveRight{grid-column:2;grid-row:2}
}

/* Keep the complete desktop playfield in view under the sticky site header. */
@media (min-width:851px){
  body[data-page="trend"] .runner-page{overflow:clip}
  body[data-page="trend"] .game-frame:not(.is-fullscreen){
    --play-width:min(420px,calc((100svh - 140px)*.5625));
    position:sticky;
    top:102px;
    z-index:5;
    grid-template-columns:minmax(0,var(--play-width)) minmax(280px,1fr);
  }
}
@media (min-width:851px){
  body[data-page="trend"] .game-instructions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:12px;width:min(100%,920px);min-height:115px;margin:28px auto}
  body[data-page="trend"] .game-instructions span{align-items:center;padding:18px;border:1px solid #d7ff3228;background:#151a27;color:#b4bfd0;font:10px/1.5 var(--arcade-mono);letter-spacing:.04em}
  body[data-page="trend"] .game-instructions i{font-size:12px}
}

/* A compact desktop console keeps the controls and the rules in one glance. */
body[data-page="trend"] .console-guide{display:none}
@media (min-width:851px){
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .game-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto minmax(86px,auto);align-content:center;align-items:stretch;gap:12px;padding:24px;background:linear-gradient(145deg,#171d2c,#101521)}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .console-guide{grid-column:1/-1;grid-row:1;display:grid;gap:0;padding:12px 16px;border:1px solid #d7ff3245;background:#0a101b;box-shadow:inset 3px 0 var(--arcade-lime)}
  body[data-page="trend"] .console-guide>b{margin-bottom:8px;color:var(--arcade-lime);font:600 12px var(--arcade-mono);letter-spacing:.08em}
  body[data-page="trend"] .console-guide>span{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid #ffffff13;color:#c0cad7;font:10px/1.4 var(--arcade-mono);letter-spacing:.02em}
  body[data-page="trend"] .console-guide i{flex:none;color:var(--arcade-lime);font-style:normal}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .control-center{grid-column:1/-1;grid-row:2;justify-content:flex-start;min-height:24px;padding-left:2px;font-size:9px}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) #moveLeft{grid-column:1;grid-row:3}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) #moveRight{grid-column:2;grid-row:3}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control{min-width:0;min-height:86px;gap:12px;padding:14px;border-color:#d7ff3255;background:#212a30}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control:hover,body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control.is-active{background:#303e2d}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control .keycap{flex:none;width:42px;height:42px;border-color:#d7ff3280;font-size:23px}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control b{font-size:11px}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .direction-control>i{display:none}
}
@media (min-width:851px) and (max-height:650px){
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .console-guide{display:none}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .game-controls{grid-template-rows:auto minmax(64px,auto);gap:8px;padding:14px}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) .control-center{grid-row:1}
  body[data-page="trend"] .game-frame:not(.is-fullscreen) #moveLeft,body[data-page="trend"] .game-frame:not(.is-fullscreen) #moveRight{grid-row:2;min-height:64px}
}
body[data-page="trend"] .direction-control small{color:#a7b3c8}
body[data-page="trend"] .site-footer{color:#f1f2e9}
body[data-page="trend"] .footer-bottom{border-color:#ffffff26;color:#b4bdad}
body[data-page="trend"] .footer-bottom a{color:#f1f2e9}
body[data-page="trend"] .leaderboard>small{color:#a7b3c8}