/* ================= DESK STAGE ================= */
#mac-wrap{height:360vh;height:360svh;position:relative;background:#07080c}
.stage{position:sticky;top:0;z-index:1;height:100vh;height:100svh;overflow:hidden;background:#0b0a10;cursor:pointer;--p:0;--z:0;--o:0;--mo:0;-webkit-tap-highlight-color:transparent}
.stage::after{content:"";position:absolute;inset:0;background:#05040a;opacity:calc(var(--o)*.62);pointer-events:none;z-index:30}
.zooming .stage{cursor:default}.zooming:not(.zoomed) .stage{cursor:zoom-in}
.cam{position:absolute;inset:0;transform:translate3d(calc(var(--cx,0px)*(1 - var(--z))),calc(var(--cy,0px)*(1 - var(--z))),0) scale(1);scale:calc(1 - var(--o)*.06);transform-origin:50% 48%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.desk-layer{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;--ik:1}
.desk-img{width:100%;height:100%;user-select:none;-webkit-user-select:none;pointer-events:none}
.lamp-glow,.screen-glow,.night,.zoom-dim,.motes{position:absolute;pointer-events:none}
.lamp-glow{left:-160px;top:150px;width:760px;height:720px;background:radial-gradient(46% 42% at 30% 22%,rgba(255,196,120,.42),rgba(255,170,90,.12) 55%,transparent 72%);mix-blend-mode:screen;animation:breathe 6s ease-in-out infinite;transition:opacity .35s}
@keyframes breathe{50%{opacity:.72}}
.screen-glow{left:330px;top:600px;width:860px;height:360px;background:radial-gradient(50% 48% at 50% 0%,rgba(255,138,128,.32),rgba(140,110,255,.1) 55%,transparent 75%);mix-blend-mode:screen;animation:breathe 4.5s ease-in-out infinite reverse}
.is-m .screen-glow{left:60px;top:880px;width:900px;height:420px}
.is-m .lamp-glow{left:-200px;top:40px;width:800px;height:820px}
.night{inset:0;background:radial-gradient(28% 34% at 50% 45%,rgba(20,16,60,0),rgba(3,4,12,.78) 75%);opacity:0;transition:opacity .6s}
.lamp-off .night{opacity:1}.lamp-off .lamp-glow{opacity:0}.lamp-off .screen-glow{filter:brightness(1.6)}
.zoom-dim{inset:-2px;background:#05060b;opacity:0}
.motes{left:0;top:100px;width:520px;height:600px;transition:opacity .4s}
.is-m .motes{left:0;top:120px;width:560px;height:700px}
.motes i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,226,170,.9);box-shadow:0 0 6px rgba(255,210,140,.9);opacity:0;animation:mote var(--d) linear var(--dl) infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.8}85%{opacity:.5}100%{opacity:0;transform:translate(var(--dx),-180px)}}
.lamp-off .motes{opacity:0}

/* mac on the desk */
#mac{box-shadow:0 0 0 1px rgba(0,0,0,.6);pointer-events:none}
.desk-layer #mac::after{content:"";position:absolute;inset:0;z-index:9990;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.11),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05));opacity:calc(1 - var(--z,0));transition:opacity .3s}
.on-mac #mac{pointer-events:auto}

/* phone (desktop) */
.phone-scr{position:absolute;left:1365px;top:461px;width:141px;height:235px;border-radius:17px;overflow:hidden;color:#fff;text-align:center;cursor:pointer;
  background:radial-gradient(80% 50% at 30% 20%,rgba(255,120,110,.55),transparent 70%),radial-gradient(70% 50% at 80% 80%,rgba(140,110,255,.55),transparent 70%),#12102a;filter:brightness(.55);transition:filter .6s}
.phone-scr.ring{filter:brightness(1);animation:buzz .5s 2 ease-in-out}
@keyframes buzz{25%{transform:translateX(-1.5px) rotate(-.6deg)}75%{transform:translateX(1.5px) rotate(.6deg)}}
.ps-time{font:600 38px/1 var(--round);margin-top:30px;letter-spacing:-.5px}
.ps-date{font-size:9.5px;opacity:.85;margin-top:4px}
.ps-noti{margin:20px 7px 0;padding:7px 8px;border-radius:11px;background:rgba(255,255,255,.26);backdrop-filter:blur(8px);text-align:left;font-size:8.6px;line-height:1.35;opacity:0;transform:translateY(-14px) scale(.92);transition:.55s cubic-bezier(.2,1.3,.4,1)}
.ring .ps-noti{opacity:1;transform:none}
.ps-noti b{display:flex;align-items:center;gap:4px;font-size:8px;opacity:.9}.ps-noti b img{width:12px;height:12px}.ps-noti em{margin-left:auto;font-style:normal;opacity:.7}
.ps-noti p{margin-top:3px}
.is-m .phone-scr{display:none}

/* mobile preview on the laptop */
.m-preview{display:none}
.is-m .m-preview{display:flex;position:absolute;left:158px;top:471px;width:709px;height:417px;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden;
  background:url(../assets/img/wall_p.webp) center/cover;text-shadow:0 4px 24px rgba(60,20,40,.4)}
.m-preview p{font-size:26px;letter-spacing:.14em;opacity:.9}
.m-preview h1{font:800 120px/1.05 var(--round);letter-spacing:.05em;background:linear-gradient(180deg,#fff 30%,#ffe2c8);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-preview small{font-size:22px;letter-spacing:.16em;opacity:.85}
.mp-bar{position:absolute;top:0;left:0;right:0;height:28px;display:flex;justify-content:space-between;padding:0 14px;align-items:center;font-size:15px;background:rgba(40,24,40,.25)}
.mp-dock{position:absolute;bottom:12px;display:flex;gap:10px;padding:8px 12px;border-radius:18px;background:rgba(255,255,255,.22)}
.mp-dock i{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#fff,#cfd6ff)}
.mp-dock i:nth-child(2){background:linear-gradient(135deg,#ff6b8a,#ff2d55)}.mp-dock i:nth-child(3){background:linear-gradient(135deg,#6dff8f,#28c840)}.mp-dock i:nth-child(4){background:linear-gradient(135deg,#7ab8ff,#2f7bf6)}.mp-dock i:nth-child(5){background:linear-gradient(135deg,#f6ffa0,#d8f24b)}

/* mobile: real mac is fullscreen, fades in after the zoom */
.is-m #mac{position:fixed;inset:0;width:auto;height:100vh;height:100svh;border-radius:0;z-index:40;opacity:var(--mo);visibility:hidden;scale:calc(1 - var(--o)*.05)}

/* hotspots */
.hots{position:absolute;inset:0;pointer-events:none;transition:opacity .4s}
.zooming .hots,.zooming .phone-scr{pointer-events:none}
.zooming .hots{opacity:0}
.hot{position:absolute;width:0;height:0;pointer-events:auto;cursor:pointer}
.hot::before{content:"";position:absolute;left:calc(-22px*var(--ik));top:calc(-22px*var(--ik));width:calc(44px*var(--ik));height:calc(44px*var(--ik));border-radius:50%}
.hot i{position:absolute;left:calc(-7px*var(--ik));top:calc(-7px*var(--ik));width:calc(14px*var(--ik));height:calc(14px*var(--ik));border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 calc(3px*var(--ik)) rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.35);opacity:0;transform:scale(.4);transition:.4s}
.hot i::after{content:"";position:absolute;inset:0;border-radius:50%;border:calc(2px*var(--ik)) solid #fff;animation:ping 2.2s ease-out infinite}
.stage:not(.intro) .hot i{opacity:1;transform:none}
.hot:nth-child(2n) i::after{animation-delay:-.7s}.hot:nth-child(3n) i::after{animation-delay:-1.4s}
.hot.seen i{background:var(--tennis);box-shadow:0 0 0 calc(3px*var(--ik)) rgba(216,242,75,.25)}
.hot.seen i::after{animation:none;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.8);opacity:0}}
.hot span{position:absolute;left:calc(14px*var(--ik));top:calc(-12px*var(--ik));white-space:nowrap;font-size:calc(12.5px*var(--ik));font-weight:600;padding:calc(4px*var(--ik)) calc(9px*var(--ik));border-radius:99px;background:rgba(20,16,28,.66);backdrop-filter:blur(8px);color:#fff;opacity:0;transform:translateX(-4px);transition:.25s;pointer-events:none}
.hot:hover span{opacity:1;transform:none}
.hot:hover i{transform:scale(1.25)}
.hot.off{display:none}
.is-m .hot span{display:none}

/* screen-space ui */
.room-dark{position:absolute;inset:0;background:#030306;pointer-events:none;opacity:0;z-index:35}
.intro .room-dark{animation:lights 2.3s ease-out forwards}
@keyframes lights{0%,28%{opacity:1}31%{opacity:.45}34%{opacity:.95}40%{opacity:.25}44%{opacity:.7}52%{opacity:.18}100%{opacity:0}}
.desk-cap{position:absolute;left:clamp(18px,3vw,44px);top:clamp(18px,3.4vh,40px);z-index:32;color:#fff;display:flex;flex-direction:column;gap:4px;pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.6);opacity:calc(1 - var(--z)*2);animation:capIn 1s cubic-bezier(.2,.8,.2,1) 1.9s both}
.desk-cap small{font-size:13px;letter-spacing:.12em;opacity:.78}
.desk-cap b{font:800 clamp(22px,2.4vw,34px)/1.15 var(--round);letter-spacing:.02em}
.desk-cap span{font-size:13px;letter-spacing:.2em;opacity:.7}
@keyframes capIn{from{opacity:0;transform:translateY(12px)}}
.desk-cta{position:absolute;left:50%;bottom:clamp(18px,4.5vh,44px);transform:translateX(-50%);z-index:32;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;pointer-events:none;opacity:calc(1 - var(--z)*2.5);animation:capIn 1s cubic-bezier(.2,.8,.2,1) 2.4s both}
.desk-cta b{display:flex;align-items:center;gap:10px;padding:11px 20px 11px 16px;border-radius:99px;background:rgba(18,14,26,.55);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 30px rgba(0,0,0,.35);font-size:15px;letter-spacing:.06em}
.desk-cta b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tennis);box-shadow:0 0 0 0 rgba(216,242,75,.7);animation:dotp 1.8s infinite}
@keyframes dotp{70%{box-shadow:0 0 0 10px rgba(216,242,75,0)}100%{box-shadow:0 0 0 0 rgba(216,242,75,0)}}
.desk-cta small{font-size:12px;letter-spacing:.16em;opacity:.65;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.dc-dot{display:none}
.cursor-pill{position:absolute;left:0;top:0;z-index:33;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.9);color:#1d1a16;font-size:12.5px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cursor-pill.show{opacity:1}
.zooming .cursor-pill{opacity:0!important}
.desk-bubble{position:absolute;z-index:34;max-width:300px;padding:10px 14px;border-radius:16px;background:rgba(255,253,246,.96);color:#1d1a16;font-size:14px;line-height:1.55;font-weight:500;box-shadow:0 14px 40px rgba(0,0,0,.4);transform:translateY(-100%) scale(.85);transform-origin:50% 100%;opacity:0;pointer-events:none;transition:.32s cubic-bezier(.2,1.4,.4,1)}
.desk-bubble.show{opacity:1;transform:translateY(-100%) scale(1)}
.desk-bubble.below{transform:translateY(0) scale(.85);transform-origin:50% 0}.desk-bubble.below.show{transform:none}
.fly{position:absolute;z-index:34;font-size:22px;pointer-events:none;animation:fly 1.6s cubic-bezier(.2,.7,.3,1) both;margin:-14px 0 0 -11px}
@keyframes fly{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1.15)}}
.m-banner{position:absolute;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:36;display:none;gap:10px;align-items:center;padding:10px 12px;border-radius:18px;background:rgba(245,244,250,.82);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);color:#1d1d1f;box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translateY(-140%);transition:transform .55s cubic-bezier(.2,1.2,.4,1)}
.is-m .m-banner{display:flex}.m-banner.show{transform:none}
.m-banner img{width:36px;height:36px}.m-banner b{font-size:13.5px;display:flex;gap:8px}.m-banner em{font-style:normal;font-weight:400;opacity:.5;font-size:12px}.m-banner p{font-size:13px;line-height:1.4;margin-top:1px}
.is-m .desk-cap{top:auto;bottom:calc(120px + env(safe-area-inset-bottom));left:22px}
.is-m .desk-cap b{font-size:24px}
.back-desk{position:fixed;left:18px;top:16px;z-index:9500;display:flex;align-items:center;gap:6px;padding:8px 15px 8px 11px;border-radius:99px;background:rgba(24,20,34,.62);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);color:#fff;font-size:13.5px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transform:translateY(-8px);transition:.35s}
.back-desk span{transition:transform .2s}.back-desk:hover span{transform:translateX(-3px)}
.on-mac .back-desk{opacity:1;pointer-events:auto;transform:none}
.is-m .back-desk{left:50%;top:calc(38px + env(safe-area-inset-top));transform:translate(-50%,-8px);font-size:12.5px;padding:6px 13px 6px 10px;background:rgba(24,20,34,.5)}
.is-m .on-mac .back-desk{transform:translate(-50%,0)}
.zoom-hint{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:9500;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.08em;opacity:0;transition:opacity .6s;pointer-events:none;white-space:nowrap}
.zoom-hint.show{opacity:1}.is-m .zoom-hint{display:none}
.ptoast{position:fixed;left:50%;top:22px;z-index:9800;transform:translate(-50%,-30px);padding:10px 18px;border-radius:14px;font-size:14px;color:#1d1d1f;background:rgba(250,249,252,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;transition:.35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;max-width:92vw;text-align:center}
.ptoast.show{opacity:1;transform:translate(-50%,0)}

/* desktop icons: two columns, works first */
.desk-icons{display:flex;flex-direction:column;gap:2px;align-items:center}
.desk-icons>*{direction:ltr}
.dicon{text-decoration:none;color:#fff}
.dicon.link{position:relative}
.dicon.link::after{content:"↗";position:absolute;left:24px;top:46px;width:17px;height:17px;border-radius:50%;background:#fff;color:#111;font-size:11px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.dicon.link:hover span{background:rgba(47,111,224,.85)}
@media (max-width:760px){
  .desk-icons{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-template-rows:none;direction:ltr;gap:6px 0;justify-items:center}
  .dicon.link::after{left:18px;top:36px;width:15px;height:15px;line-height:15px;font-size:10px}
  .dicon[data-open="photos"]{display:none}
  #mac .desk-hello{top:9%}
}

/* ================= FINAL · TENNIS STADIUM ================= */
.stadium{position:relative;padding:14vh 5vw 2vh;text-align:center;color:#fff;overflow:hidden}
.st-lights{position:absolute;left:0;right:0;top:3vh;display:flex;justify-content:space-between;padding:0 4vw;pointer-events:none}
.st-lights i{width:clamp(56px,7vw,96px);height:clamp(18px,2.4vw,30px);border-radius:6px;background:repeating-linear-gradient(90deg,#2b2f3d 0 22%,#1b1e28 22% 25%);box-shadow:0 0 0 2px #2a2d38;transition:background .2s,box-shadow .6s}
.st-lights i:nth-child(2),.st-lights i:nth-child(3){margin-top:-1.5vh}
.lit .st-lights i{background:repeating-linear-gradient(90deg,#fffbe6 0 22%,#d6d2bd 22% 25%);box-shadow:0 0 0 2px #3a3d48,0 0 40px 12px rgba(255,250,215,.55),0 0 120px 40px rgba(255,250,215,.18)}
.lit .st-lights i:nth-child(1){transition-delay:.1s}.lit .st-lights i:nth-child(2){transition-delay:.45s}.lit .st-lights i:nth-child(3){transition-delay:.8s}.lit .st-lights i:nth-child(4){transition-delay:1.15s}
.st-beams{position:absolute;inset:0;pointer-events:none}
.st-beams i{position:absolute;top:4vh;width:38vw;height:95%;background:linear-gradient(180deg,rgba(255,250,215,.2),rgba(255,250,215,0) 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:0;transition:opacity 1s}
.st-beams i:nth-child(1){left:-12vw;transform:rotate(-14deg)}.st-beams i:nth-child(2){left:14vw;transform:rotate(-5deg)}.st-beams i:nth-child(3){right:14vw;transform:rotate(5deg)}.st-beams i:nth-child(4){right:-12vw;transform:rotate(14deg)}
.lit .st-beams i{opacity:1}
.lit .st-beams i:nth-child(1){transition-delay:.2s}.lit .st-beams i:nth-child(2){transition-delay:.55s}.lit .st-beams i:nth-child(3){transition-delay:.9s}.lit .st-beams i:nth-child(4){transition-delay:1.25s}
.fin-head{position:relative;max-width:760px;margin:0 auto}
.fin-head small{font:700 12px/1 var(--round);letter-spacing:.32em;color:var(--tennis)}
.fin-head h2{font:900 clamp(34px,4.6vw,64px)/1.15 var(--round);margin:.4em 0 .35em}
.fin-ball{display:inline-block;animation:fball 1.1s cubic-bezier(.3,0,.7,1) infinite alternate}
@keyframes fball{from{transform:translateY(-.25em) rotate(0)}to{transform:translateY(.08em) rotate(140deg) scaleY(.92)}}
.fin-head p{font-size:16px;line-height:1.75;opacity:.75}
.arena{position:relative;max-width:1000px;margin:30px auto 0;height:min(70vh,640px);border-radius:28px;overflow:hidden;background:#16244a;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12),0 0 80px rgba(216,242,75,.08);transform:translateY(40px) scale(.96);opacity:0;transition:transform 1s cubic-bezier(.2,.8,.2,1) .3s,opacity 1s .3s}
.lit .arena{transform:none;opacity:1}
.pong.big{height:100%;outline:none}
.pong.big .pong-bar{padding:9px 14px 9px 18px;font-size:13px}
.arena-start{position:absolute;inset:0 0 44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(60% 60% at 50% 50%,rgba(6,10,26,.35),rgba(6,10,26,.7));transition:opacity .45s;z-index:2}
.arena-start .btn{font-size:18px;padding:15px 30px;background:var(--tennis);box-shadow:0 10px 30px rgba(216,242,75,.35);animation:pulseB 1.8s ease-in-out infinite}
@keyframes pulseB{50%{transform:scale(1.05)}}
.arena-start small{font-size:13px;opacity:.7;letter-spacing:.08em}
.arena.on .arena-start{opacity:0;pointer-events:none}
.st-stats{position:relative;display:flex;justify-content:center;gap:12px;list-style:none;margin:20px auto 0;padding:0;flex-wrap:wrap}
.st-stats li{display:flex;flex-direction:column;gap:3px;min-width:118px;padding:11px 16px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.st-stats b{font:900 24px/1 var(--round);color:var(--tennis)}.st-stats span{font-size:12px;opacity:.65}
.st-stats li.bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{40%{transform:scale(1.14)}}
.ship-card.won{animation:wonGlow 2.4s ease-in-out 2}
@keyframes wonGlow{50%{box-shadow:inset 0 0 0 2px var(--tennis),0 0 60px rgba(216,242,75,.45);transform:scale(1.02)}}
#ship .end-wrap{padding-top:9vh}
@media (max-width:760px){
  .stadium{padding:11vh 4vw 2vh}
  .fin-head p{font-size:14.5px}
  .arena{height:66svh;border-radius:18px;margin-top:18px}
  .pb-tip{display:none}
  .pong.big .pong-bar{justify-content:center}
  .st-stats{gap:8px}.st-stats li{min-width:calc(50% - 8px);padding:9px 12px}
}
@media (max-width:760px){
  .is-m .desk-cap{top:calc(84px + env(safe-area-inset-top));bottom:auto;left:20px}
  .desk-cta b{white-space:nowrap;font-size:14px;padding:10px 16px 10px 13px}
  .cursor-pill{display:none}
  .dock .dk[data-open="trash"],.dock .dk-sep:last-of-type{display:none}
}

/* steps: 书桌 → 电脑桌面 → 我的故事 */
.desk-steps{position:absolute;right:clamp(16px,2vw,30px);bottom:clamp(18px,4.5vh,44px);z-index:9400;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(18,14,26,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:0;pointer-events:none;transition:opacity .4s}
.desk-steps.show{opacity:1;pointer-events:auto}
.desk-steps button{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.06em;cursor:pointer;transition:.3s}
.desk-steps i{width:6px;height:6px;border-radius:50%;background:currentColor;transition:.3s}
.desk-steps button:hover{color:#fff}
.desk-steps button.on{background:rgba(255,255,255,.16);color:#fff}
.desk-steps button.on i{background:var(--tennis);box-shadow:0 0 8px rgba(216,242,75,.8)}
.zoomed .desk-steps{bottom:auto;top:14px;right:18px;opacity:.85}
@media (max-width:760px){.desk-steps{right:6px;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:2px}.desk-steps button{padding:5px}.desk-steps span{display:none}.desk-steps button.on{background:none}.desk-steps button.on i{height:16px;border-radius:4px}.zoomed .desk-steps{top:50%;right:2px;opacity:.6}}
/* scroll cue */
.desk-cta small{display:flex;align-items:center;gap:8px}
.mouse{width:16px;height:24px;border:1.6px solid rgba(255,255,255,.75);border-radius:9px;position:relative;flex:none}
.mouse::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:5px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
/* screen hover: hint it's clickable */
.screen-ring{position:absolute;pointer-events:none;border-radius:6px;box-shadow:0 0 0 calc(2px*var(--ik)) rgba(216,242,75,.0),0 0 calc(40px*var(--ik)) rgba(216,242,75,0);transition:box-shadow .35s}
.stage.hover-scr .screen-ring{box-shadow:0 0 0 calc(2px*var(--ik)) rgba(216,242,75,.85),0 0 calc(50px*var(--ik)) rgba(216,242,75,.35)}
.zooming .screen-ring{opacity:0}
/* dock: official sites */
a.dk{display:block;text-decoration:none}
.dk-link::after{content:"↗";position:absolute;right:-3px;top:-3px;width:15px;height:15px;border-radius:50%;background:#fff;color:#111;font-size:10px;font-weight:800;line-height:15px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.dk-link img{border-radius:22%}
/* tight screens: drop the todo widget so nothing overlaps the title */
#mac.tight .w-note{display:none}
.is-m .stage::after{z-index:45}

/* ---- v8 ---- */
/* readable caption over the bright lamp */
.desk-cap::before{content:"";position:absolute;z-index:-1;left:-120px;top:-110px;width:calc(100% + 300px);height:calc(100% + 220px);background:radial-gradient(closest-side,rgba(10,7,14,.72),rgba(10,7,14,.45) 55%,transparent);pointer-events:none}
.desk-cap{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.7)}
.desk-cap small,.desk-cap span{opacity:.92}
/* stadium fits one screen */
.stadium{min-height:100vh;min-height:100svh;padding:clamp(56px,9vh,96px) 5vw 3vh;display:flex;flex-direction:column;box-sizing:border-box}
.fin-head h2{font-size:clamp(28px,3.4vw,48px);margin:.35em 0 .25em}
.fin-head p{font-size:15px}
.arena{flex:1;width:100%;height:auto;min-height:320px;max-height:640px;margin-top:clamp(14px,2.4vh,26px)}
.st-stats{margin-top:14px;gap:10px}
.st-stats li{flex-direction:row;align-items:baseline;gap:8px;min-width:0;padding:8px 16px;border-radius:99px}
.st-stats b{font-size:18px}
#final-pong .pong-bar{display:none}
.lit .st-lights i:nth-child(n){transition-duration:.25s}
.stadium:not(.lit) .st-lights i:nth-child(4){transition-delay:0s}.stadium:not(.lit) .st-lights i:nth-child(3){transition-delay:.25s}.stadium:not(.lit) .st-lights i:nth-child(2){transition-delay:.5s}.stadium:not(.lit) .st-lights i:nth-child(1){transition-delay:.75s}
.stadium:not(.lit) .st-beams i{transition-delay:0s!important}
/* auto-start guide */
.arena-guide{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:99px;background:rgba(10,14,32,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(216,242,75,.35);color:#fff;font-size:14px;pointer-events:none;transition:opacity .4s,transform .4s;opacity:0}
.arena.on .arena-guide{opacity:1}
.arena-guide.hide{opacity:0!important;transform:translate(-50%,10px)}
.ag-hand{display:inline-block;font-size:20px;animation:agh 1.6s ease-in-out infinite}
@keyframes agh{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}80%{transform:translateX(0) scale(.85)}}
/* neon sign lights up when you reach it */
.neon{position:relative}
.end-head h2 em.neon{background:none;color:rgba(255,179,107,.18);-webkit-text-fill-color:currentColor;text-shadow:none;transition:color .2s}
.end-head h2 em.neon.on{animation:neonOn 1.6s steps(1) forwards}
@keyframes neonOn{0%{color:rgba(255,179,107,.18);text-shadow:none}12%{color:#ffd2a8;text-shadow:0 0 8px #ff9a5a,0 0 26px #ff6a3d}18%{color:rgba(255,179,107,.25);text-shadow:none}30%{color:#ffd2a8;text-shadow:0 0 8px #ff9a5a,0 0 26px #ff6a3d}36%{color:rgba(255,179,107,.3);text-shadow:none}48%,100%{color:#ffe4c8;text-shadow:0 0 6px #ffb36b,0 0 18px #ff8a4d,0 0 46px rgba(255,106,61,.7)}}
@media (max-width:760px){
  .stadium{padding:64px 4vw 2vh}
  .fin-head h2{font-size:26px}.fin-head p{font-size:13px}
  .arena{min-height:0;max-height:none;border-radius:18px}
  .st-stats li{min-width:0;padding:6px 12px}.st-stats b{font-size:15px}.st-stats span{font-size:11px}
  #final-pong canvas{touch-action:pan-y}
  .arena-guide{font-size:13px;bottom:14%;white-space:nowrap}
}
/* v8.1 arena fill fix */
.arena{display:flex;flex-direction:column}
.arena>.pong.big{flex:1;height:auto;min-height:0}
@media (max-width:760px){.stadium{justify-content:center}.arena{flex:none;height:min(60svh,118vw)}}