:root{
  --shell:#eb8734;--shell-hi:#f7a64f;--shell-deep:#bd5427;--ink:#713828;
  --navy:#243b5c;--blue:#395d7c;--cream:#ffe2a4;--paper:#ffe8ba;--red:#c94f3d;
  --shadow:rgba(82,42,28,.30);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden}
button{font:inherit}
body{
  color:var(--ink);font-family:"SFMono-Regular","PingFang SC","Microsoft YaHei",monospace;
  background:
    radial-gradient(circle at 16% 14%,rgba(255,237,185,.88) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 76%,rgba(255,219,146,.55) 0 3px,transparent 4px),
    linear-gradient(135deg,#f8ddb3 0%,#e8b77e 48%,#c97856 100%);
  background-size:47px 47px,83px 83px,100% 100%;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}
.stage{width:100%;height:100vh;height:100svh;min-height:0;display:grid;place-items:center;padding:38px 240px 38px 38px;position:relative;overflow:hidden}
.handheld{
  width:min(730px,calc(100vw - 80px));position:relative;padding:48px 46px 30px;border-radius:38px 38px 62px 38px;
  background:linear-gradient(145deg,var(--shell-hi),var(--shell) 45%,#dc702e 78%,#c75c29);
  border:4px solid #bd572a;box-shadow:0 6px 0 #9f4327,0 18px 0 #b9512a,0 35px 65px var(--shadow),inset 4px 4px 0 rgba(255,213,124,.55),inset -5px -7px 0 rgba(130,52,25,.17);
  transform:rotate(-.35deg);transform-origin:center center;isolation:isolate;will-change:transform
}
.handheld:before{content:"";position:absolute;inset:18px;border:2px solid rgba(115,49,26,.26);border-radius:25px 25px 48px 25px;pointer-events:none}
.top-ridge{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.top-ridge span{width:37px;height:5px;border-radius:5px;background:#c8612d;box-shadow:inset 0 2px #8f3c25}
.screw{position:absolute;width:17px;height:17px;border-radius:50%;z-index:4;background:radial-gradient(circle at 35% 30%,#ffe0a0,#9d5937 55%,#613624 63%,#eaa35d 68%);box-shadow:0 1px 2px #74351f}
.screw:after{content:"";position:absolute;width:8px;height:2px;left:4px;top:7px;background:#70442e;transform:rotate(-35deg)}
.s1{left:19px;top:20px}.s2{right:19px;top:20px}.s3{left:22px;bottom:20px}.s4{right:22px;bottom:20px}
.screen-frame{padding:15px;border-radius:28px 28px 42px 28px;background:linear-gradient(145deg,#94502f,#db8a45 46%,#f1ad58);box-shadow:inset 4px 4px 7px rgba(76,34,22,.5),0 3px 0 rgba(255,199,100,.65)}
.screen{position:relative;overflow:hidden;aspect-ratio:16/10;border:5px solid #263d55;border-radius:17px 17px 28px 17px;background:#294c67;box-shadow:inset 0 0 0 3px #7190a0,0 0 0 2px #763f2b}
#scene{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.screen-wash{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,238,173,.08),transparent 36%,rgba(255,205,120,.12));mix-blend-mode:screen}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(28,48,64,.6) 3px)}
.pixel-noise{position:absolute;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath fill='%23fff' d='M2 4h2v2H2zm18 8h2v2h-2zM8 20h2v2H8zM26 2h2v2h-2z'/%3E%3C/svg%3E");animation:noise .4s steps(2) infinite}
@keyframes noise{50%{transform:translate(2px,-1px)}}
.screen-hud{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;color:#fff0bf;text-shadow:2px 2px #74483a;font-size:10px;letter-spacing:.08em;z-index:4}
.route-chip,.weather{color:inherit;font:inherit;background:rgba(31,58,76,.68);padding:6px 8px;border:1px solid rgba(255,229,163,.55);box-shadow:2px 2px 0 rgba(64,37,34,.45)}.route-chip{cursor:pointer}
.pulse-dot{display:inline-block;width:6px;height:6px;margin-right:6px;background:#ffd27b;box-shadow:0 0 0 2px #bd5740;animation:pulse 1.5s steps(2) infinite}
@keyframes pulse{50%{opacity:.35}}
.scene-title-wrap{position:absolute;left:17px;top:52px;color:#fff2bd;text-shadow:2px 2px 0 #803e35;z-index:3;transition:.2s}
.scene-title-wrap h1{margin:2px 0 0;font-size:30px;line-height:1;font-weight:900;letter-spacing:.08em}
.scene-title-wrap p{margin:5px 0 0;font-size:8px;letter-spacing:.25em;font-weight:bold}
.scene-kicker{display:inline-block;font-size:9px;padding:3px 5px;background:#c4553f;color:#ffe5aa;box-shadow:2px 2px 0 #783a32}
.screen-footer{position:absolute;left:15px;right:15px;bottom:12px;display:flex;align-items:end;justify-content:space-between;color:#ffe6a5;text-shadow:2px 2px #683b37;z-index:3}
.caption{min-width:190px;text-align:center;background:rgba(28,54,72,.72);border:1px solid rgba(255,225,157,.6);padding:6px 10px;box-shadow:3px 3px 0 rgba(82,45,39,.5)}
.caption span{display:block;font-size:8px;letter-spacing:.18em}.caption strong{display:block;margin-top:3px;font-size:10px}
.pixel-arrow{font-size:14px;animation:nudge 1.2s steps(2) infinite}
.pixel-arrow:last-child{animation-direction:reverse}@keyframes nudge{50%{transform:translateX(-3px)}}
.postcard{position:absolute;z-index:7;width:56%;right:14px;top:47px;padding:16px 17px 12px;color:#6f3b31;background:#ffe6ae;border:2px solid #fff1c9;box-shadow:7px 7px 0 rgba(55,56,55,.45);transform:translateX(120%) rotate(3deg);opacity:0;transition:.28s cubic-bezier(.2,.8,.25,1);background-image:repeating-linear-gradient(0deg,transparent 0 17px,rgba(173,92,57,.15) 18px)}
.postcard.open{transform:translateX(0) rotate(-1deg);opacity:1}
.postcard-stamp{position:absolute;right:12px;top:11px;width:38px;height:42px;padding-top:5px;text-align:center;border:2px dashed #b75b41;color:#b75b41;font-weight:bold;line-height:13px}.postcard-stamp small{font-size:8px}
.postcard-label{font-size:8px;letter-spacing:.15em;margin:0 0 10px}.postcard h2{font-size:20px;margin:0 0 10px}.postcard>p:not(.postcard-label){width:78%;font-size:10px;line-height:1.7;margin:0}.card-meta{border-top:1px dashed #bd7650;margin-top:10px;padding-top:7px;display:flex;justify-content:space-between;font-size:8px}
.route-drawer{position:absolute;z-index:8;inset:0;padding:17px 18px;background:rgba(31,56,73,.96);color:#ffe4a7;transform:translateY(105%);transition:.28s cubic-bezier(.2,.8,.2,1)}
.route-drawer.open{transform:translateY(0)}
.drawer-head{display:flex;justify-content:space-between;font-size:11px;font-weight:bold;letter-spacing:.1em;border-bottom:2px solid #d97b4c;padding-bottom:8px}.drawer-head button{border:0;background:#d66040;color:#ffe8ae;width:23px;height:23px;cursor:pointer}
.mini-map{height:47px;position:relative;margin:11px 7px 6px;background:linear-gradient(170deg,transparent 47%,#d58151 48% 51%,transparent 52%)}
.map-dot{position:absolute;width:9px;height:9px;background:#f4bc66;border:2px solid #863d34;transform:translate(-50%,-50%);cursor:pointer}.map-dot.active{background:#fff1b8;box-shadow:0 0 0 3px #d15a40}
.route-list{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.route-item{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid rgba(255,226,158,.25);font-size:9px;cursor:pointer}.route-item.active{background:#c8583d;color:#fff0ba}.route-item b{font-size:8px;color:#f2ad62}.route-item.active b{color:#fff}.drawer-tip{text-align:center;font-size:7px;opacity:.7;margin:8px 0 0}
.transition-grid{position:absolute;z-index:6;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(10,1fr)}
.transition-grid i{background:#f5b65d;opacity:0;transform:scale(0)}.transition-grid.active i{animation:blockFlip .34s steps(2) both;animation-delay:var(--d)}@keyframes blockFlip{0%{opacity:0;transform:scale(0)}45%,60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
.boot{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;color:#ffe7a8;background:#315a75;transition:opacity .5s,visibility .5s}.boot.done{opacity:0;visibility:hidden;pointer-events:none}.boot-logo{margin:auto;width:61px;height:61px;display:grid;place-items:center;background:#e98042;border:5px solid #ffd27b;box-shadow:6px 6px 0 #1d405b}.boot-logo span{font-size:29px;font-weight:900;text-shadow:3px 3px #9f4538}.boot p{font-size:10px;font-weight:bold;letter-spacing:.14em;margin:15px 0 10px}.boot small{font-size:6px;letter-spacing:.12em}.boot-bar{width:160px;height:9px;border:2px solid #f8d47f;padding:1px;margin:0 auto 8px}.boot-bar i{display:block;height:100%;background:#e97b44;animation:load 1.3s steps(8) forwards}@keyframes load{from{width:0}to{width:100%}}
.brand-row{display:flex;justify-content:space-between;align-items:end;padding:19px 14px 8px}.eyebrow{font-size:8px;letter-spacing:.18em;margin:0 0 4px;color:#8f432c}.brand-row h2{font-family:"Arial Black","PingFang SC",sans-serif;margin:0;font-size:26px;letter-spacing:.03em;color:#a8432d;text-shadow:1px 1px #ffc170}.brand-row h2 em{font-style:normal;font-size:9px;color:#773a2e;border:1px solid #963f2d;padding:3px}
.battery{display:flex;gap:5px;margin-bottom:5px}.battery span{width:8px;height:8px;border-radius:50%;background:#ffd372;box-shadow:inset 0 -2px #d36535}.battery span:last-child{animation:pulse 1s steps(2) infinite}
.controls{display:grid;grid-template-columns:1.2fr .65fr 1.2fr;gap:20px;align-items:center;padding:0 8px 15px}.control-label{text-align:center;font-size:7px;font-weight:bold;letter-spacing:.15em;color:#8c422d;margin:0 0 9px}.dpad{position:relative;width:153px;height:153px;margin:auto;filter:drop-shadow(0 8px 0 #6e392e)}
.dpad button{position:absolute;border:3px solid #1c314e;background:linear-gradient(145deg,#496485,#243c60);color:#f0c475;cursor:pointer;box-shadow:inset 3px 3px 0 #7e92a5,inset -4px -4px 0 #172945;user-select:none;-webkit-tap-highlight-color:transparent}.dpad button:active,.dpad button.pressed{transform:translateY(4px);filter:brightness(1.2)}
.d-up,.d-down{left:51px;width:51px;height:57px}.d-left,.d-right{top:51px;width:57px;height:51px}.d-up{top:0;border-radius:8px 8px 0 0}.d-down{bottom:0;border-radius:0 0 8px 8px}.d-left{left:0;border-radius:8px 0 0 8px}.d-right{right:0;border-radius:0 8px 8px 0}.d-center{left:51px;top:51px;width:51px;height:51px;border-radius:0!important;z-index:2}.d-center span{display:grid;place-items:center;width:26px;height:26px;margin:auto;border-radius:50%;border:2px dashed #edba71;font-size:13px}
.middle-controls{text-align:center;align-self:end}.speaker{display:flex;justify-content:center;gap:5px;transform:rotate(-12deg);margin-bottom:22px}.speaker i{width:5px;height:35px;border-radius:5px;background:#a94e2d;box-shadow:inset 2px 0 #713824}.speaker i:nth-child(2),.speaker i:nth-child(4){height:27px;margin-top:4px}
.start-button{border:0;background:none;cursor:pointer;filter:drop-shadow(0 5px 0 #773b2c)}.start-button span{display:block;background:#294564;color:#f4ce83;border:3px solid #1b304b;box-shadow:inset 2px 2px #75889a;padding:8px 14px;border-radius:15px;transform:rotate(-4deg);font-size:9px;font-weight:bold}.start-button:active{transform:translateY(3px)}.middle-controls p{font-size:7px;margin:8px 0 2px}
.actions{display:flex;justify-content:center;gap:18px;align-items:end}.actions>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:8px}.actions>div:first-child{transform:translateY(17px)}.round{width:65px;height:65px;border-radius:50%;border:4px solid #1c314e;background:radial-gradient(circle at 35% 25%,#617593,#294261 57%,#172a47 60%);color:#f6cd82;font-weight:bold;font-size:16px;box-shadow:0 7px 0 #71392f,inset 3px 3px 0 #8795a7;cursor:pointer}.round:active,.round.active{transform:translateY(5px);box-shadow:0 2px 0 #71392f;filter:brightness(1.15)}
.bottom-copy{border-top:2px solid rgba(131,57,31,.22);padding:12px 14px 0;display:flex;justify-content:space-between;align-items:center;font-size:7px;color:#8f422c}.bottom-copy b{font-size:9px;letter-spacing:.08em}
.desk-note{position:absolute;right:35px;top:18%;width:215px;padding:27px 20px 20px;background:#ffe1a5;color:#704034;box-shadow:10px 12px 25px rgba(83,47,32,.25);transform:rotate(3deg);background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(173,96,58,.12) 24px)}.desk-note:after{content:"";position:absolute;inset:5px;border:1px dashed #c77a50}.note-pin{position:absolute;left:50%;top:-10px;width:18px;height:18px;border-radius:50%;background:#ba4c3b;box-shadow:2px 4px 0 #743829;z-index:2}.desk-note p{font-size:8px;letter-spacing:.15em;margin:0 0 12px}.desk-note strong{display:block;font-family:"Kaiti SC","STKaiti",serif;font-size:15px;line-height:1.7}.desk-note small{display:block;margin-top:17px;font-size:7px;opacity:.7}
body.sound-on .a-button{animation:soundGlow 1.2s steps(2) infinite}@keyframes soundGlow{50%{box-shadow:0 7px 0 #71392f,inset 3px 3px #8795a7,0 0 0 6px rgba(255,210,115,.4)}}
@media(max-width:1050px){.stage{padding:28px}.desk-note{display:none}}
@media(max-width:760px){.stage{padding:max(9px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));align-items:center}.handheld{width:100%;max-width:100%;min-width:0;padding:35px 17px 20px;border-radius:25px 25px 38px 25px}.handheld:before{inset:10px}.screen-frame{padding:9px}.scene-title-wrap{top:43px}.scene-title-wrap h1{font-size:22px}.brand-row{padding:14px 5px 7px}.brand-row h2{font-size:20px}.controls{grid-template-columns:1.05fr .55fr 1fr;gap:3px;padding:0}.controls>*{min-width:0}.dpad{transform:scale(.72);margin:-21px auto}.round{width:53px;height:53px}.actions{gap:7px}.speaker{transform:scale(.8) rotate(-12deg);margin-bottom:13px}.bottom-copy{padding:8px 4px 0}.bottom-copy b{font-size:7px}.postcard{width:67%;top:38px}.route-list{gap:3px}.route-item{padding:4px}.screw{transform:scale(.8)}}
@media(max-width:450px){.screen-hud{top:7px}.route-chip,.weather{padding:4px;font-size:7px}.scene-title-wrap{left:10px;top:34px}.scene-title-wrap h1{font-size:18px}.scene-title-wrap p,.scene-kicker{font-size:6px}.screen-footer{left:8px;right:8px;bottom:6px}.caption{min-width:155px;padding:4px}.caption strong{font-size:8px}.brand-row h2{font-size:17px}.eyebrow{font-size:6px}.controls{margin-top:-4px}.dpad-wrap,.action-wrap{overflow:visible}.dpad{transform:scale(.78);margin:-17px auto}.actions{transform:scale(.86)}.middle-controls{transform:scale(.85)}.bottom-copy span{display:none}.bottom-copy{justify-content:center}.route-drawer{padding:10px}.mini-map{height:35px;margin:5px}.route-item{font-size:7px}.postcard{padding:10px}.postcard h2{font-size:15px}.postcard>p:not(.postcard-label){font-size:8px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-height:520px) and (orientation:landscape){.desk-note{display:none}.bottom-copy{display:none}.handheld{border-radius:24px;padding-top:34px;padding-bottom:20px}.brand-row{padding-top:10px}.controls{padding-bottom:4px}.stage{padding:8px}}
@media(min-width:1800px){.desk-note{right:9vw;transform:rotate(3deg) scale(1.08)}.stage:before,.stage:after{content:"";position:absolute;width:170px;height:230px;border:2px solid rgba(123,64,42,.18);background:rgba(255,225,165,.12);transform:rotate(-8deg);z-index:-1}.stage:before{left:8%;top:18%}.stage:after{left:13%;top:24%;transform:rotate(5deg)}}
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){
  .stage{padding:8px}
  .handheld{
    width:min(900px,calc(100vw - 16px));max-width:calc(100vw - 16px);min-width:0;
    display:grid;grid-template-columns:minmax(360px,1.5fr) minmax(250px,1fr);grid-template-rows:auto 1fr;
    column-gap:14px;padding:28px 25px 21px;border-radius:27px 27px 38px 27px
  }
  .screen-frame{grid-column:1;grid-row:1 / 3;align-self:center;min-width:0;padding:10px}
  .brand-row{grid-column:2;grid-row:1;padding:8px 2px 5px;align-self:end}
  .brand-row h2{font-size:19px}.eyebrow{font-size:6px}.battery{display:none}
  .controls{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;gap:0;padding:0;align-self:center;min-width:0}
  .middle-controls{display:none}.control-label{font-size:6px;margin-bottom:2px}
  .dpad{transform:scale(.66);margin:-23px -24px}.actions{transform:scale(.75);margin:0 -15px;gap:6px}
  .bottom-copy{display:none}.screw{transform:scale(.75)}
}
.route-drawer{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.route-drawer::-webkit-scrollbar{display:none}
@media(max-width:450px){.postcard{top:24px}}
@media(max-width:320px){
  .postcard{top:20px;right:7px;width:74%;padding:6px 8px 5px;background-image:none}
  .postcard-stamp{right:7px;top:6px;width:27px;height:30px;padding-top:2px;font-size:9px;line-height:9px}.postcard-stamp small{font-size:6px}
  .postcard-label{font-size:5px;margin:0 0 4px}.postcard h2{font-size:12px;margin:0 0 4px}.postcard>p:not(.postcard-label){font-size:6px;line-height:1.35;width:80%}
  .card-meta{margin-top:4px;padding-top:3px;font-size:5px}
  .route-drawer{padding:6px 7px}.drawer-head{font-size:7px;padding-bottom:3px}.drawer-head button{width:18px;height:18px}
  .mini-map{height:21px;margin:3px 4px}.route-list{gap:2px 3px}.route-item{padding:2px;font-size:6px}.route-item b{font-size:5px}.drawer-tip{display:none}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){
  .route-drawer{padding:9px 10px}.drawer-head{font-size:8px;padding-bottom:4px}.drawer-head button{width:18px;height:18px}
  .mini-map{height:28px;margin:4px 5px}.route-list{gap:2px 4px}.route-item{padding:3px;font-size:7px}.route-item b{font-size:6px}.drawer-tip{display:none}
}
@media(max-width:450px){.route-drawer{padding:8px 9px}.mini-map{height:28px;margin:3px 5px}.route-list{gap:2px 4px}.route-item{padding:3px}.drawer-tip{display:none}}
/* ---------- Shanghai desk world: expressive background layer ---------- */
body{
  background:
    radial-gradient(circle at 72% 12%,rgba(255,221,135,.95) 0 5%,rgba(255,188,91,.34) 16%,transparent 34%),
    radial-gradient(circle at 7% 83%,rgba(52,83,103,.42),transparent 32%),
    linear-gradient(145deg,#f8deb0 0%,#edb56f 39%,#d97a4f 71%,#8e5560 100%);
}
.stage{isolation:isolate;perspective:1200px}
.handheld{z-index:3}
.desk-note{z-index:4}
.ambient-world{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;transform-style:preserve-3d}
.ambient-world:before{content:"";position:absolute;inset:-15%;opacity:.19;background-image:linear-gradient(rgba(108,55,37,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(108,55,37,.22) 1px,transparent 1px);background-size:42px 42px;transform:rotate(-8deg) scale(1.12);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 72%)}
.ambient-world:after{content:"SHANGHAI  ·  POCKET  CITY  ·  SLOW  WALK  ·  31°N";position:absolute;left:-45px;top:48%;font-family:"Arial Black",sans-serif;font-size:12px;letter-spacing:.7em;color:rgba(255,231,173,.35);transform:rotate(-90deg);transform-origin:left top;white-space:nowrap;text-shadow:1px 1px rgba(102,52,39,.2)}
.sun-halo{position:absolute;width:min(66vw,880px);aspect-ratio:1;right:-16vw;top:-40vw;border-radius:50%;background:radial-gradient(circle,rgba(255,240,174,.72) 0 7%,rgba(255,201,105,.26) 24%,transparent 66%);filter:blur(2px);animation:haloBreath 8s ease-in-out infinite}
@keyframes haloBreath{50%{opacity:.68;transform:scale(1.035)}}
.map-sheet{position:absolute;left:4.8vw;top:7.5vh;width:315px;height:390px;border:2px solid rgba(126,66,43,.28);border-radius:4px;background:
  linear-gradient(113deg,transparent 47%,rgba(205,104,63,.28) 48% 49%,transparent 50%),
  linear-gradient(25deg,transparent 42%,rgba(92,117,112,.23) 43% 44%,transparent 45%),
  repeating-linear-gradient(18deg,transparent 0 25px,rgba(124,78,50,.13) 26px 27px),
  repeating-linear-gradient(102deg,transparent 0 33px,rgba(124,78,50,.12) 34px 35px),#f8dba2;
  box-shadow:14px 18px 38px rgba(87,43,31,.2),inset 0 0 35px rgba(184,96,55,.12);transform:rotate(-8deg) translate3d(calc(var(--mx,0)*-5px),calc(var(--my,0)*-4px),-10px);opacity:.9
}
.map-sheet:before{content:"";position:absolute;inset:20px;border:1px dashed rgba(146,72,45,.38)}
.map-sheet:after{content:"";position:absolute;width:54px;height:54px;border:3px double rgba(178,77,53,.48);border-radius:50%;right:23px;bottom:28px;box-shadow:0 0 0 5px rgba(178,77,53,.08)}
.map-title{position:absolute;left:24px;top:22px;font:bold 9px/1 monospace;letter-spacing:.18em;color:#94503c}
.map-sheet small{position:absolute;left:27px;bottom:24px;font-size:7px;letter-spacing:.12em;color:#8a5541}
.river{position:absolute;height:15px;border:4px solid #6c9195;border-left:0;border-right:0;border-radius:50%;opacity:.65}.river-a{width:330px;left:-18px;top:185px;transform:rotate(18deg)}.river-b{width:205px;left:65px;top:222px;transform:rotate(-12deg)}
.map-stop{position:absolute;width:11px;height:11px;background:#f3b75f;border:3px solid #a84e3c;box-shadow:0 0 0 3px rgba(255,221,148,.7)}.m1{left:65px;top:126px}.m2{left:186px;top:160px}.m3{left:121px;top:255px}.m4{left:245px;top:282px}
.metro-ticket{position:absolute;left:7vw;bottom:8.5vh;width:265px;height:92px;padding:17px 21px;color:#f9daa0;border:2px solid rgba(255,220,153,.42);background:#36566d;box-shadow:12px 15px 30px rgba(74,42,36,.25);transform:rotate(5deg) translate3d(calc(var(--mx,0)*7px),calc(var(--my,0)*4px),15px);clip-path:polygon(0 0,100% 0,100% 36%,96% 41%,100% 46%,100% 100%,0 100%,0 63%,4% 58%,0 53%)}
.metro-ticket:before{content:"";position:absolute;left:66%;top:0;bottom:0;border-left:2px dashed rgba(255,218,151,.45)}
.metro-ticket span{display:block;font-size:9px;letter-spacing:.12em}.metro-ticket strong{display:block;margin-top:8px;font:23px/1 "Arial Black",sans-serif;color:#f7ad59;text-shadow:3px 3px #243f57}.metro-ticket i{position:absolute;right:-21px;top:39px;font-style:normal;font-size:6px;letter-spacing:.16em;transform:rotate(90deg)}
.film-strip{position:absolute;left:1.5vw;bottom:28vh;display:flex;gap:7px;padding:8px 14px;background:#754236;box-shadow:8px 10px 22px rgba(70,37,31,.18);transform:rotate(-13deg);opacity:.72}.film-strip:before,.film-strip:after{content:"";position:absolute;left:5px;right:5px;height:4px;background:repeating-linear-gradient(90deg,#efc77f 0 5px,transparent 5px 12px)}.film-strip:before{top:2px}.film-strip:after{bottom:2px}.film-strip i{width:42px;height:34px;background:linear-gradient(145deg,#557887,#e09a5e 55%,#344f67)}
.city-stamp{position:absolute;right:4.5vw;bottom:9vh;width:118px;height:118px;border:4px double rgba(115,51,42,.35);border-radius:50%;display:grid;place-content:center;text-align:center;color:rgba(105,48,41,.46);transform:rotate(-14deg)}.city-stamp:before,.city-stamp:after{content:"";position:absolute;left:9px;right:9px;border-top:2px solid currentColor}.city-stamp:before{top:25px}.city-stamp:after{bottom:25px}.city-stamp b{font-size:37px;line-height:1}.city-stamp span{font:bold 7px/1.3 monospace;letter-spacing:.12em}
.coordinate{position:absolute;right:5vw;top:8vh;color:rgba(255,233,176,.68);font:bold 9px/1.7 monospace;letter-spacing:.2em;text-align:right;text-shadow:2px 2px rgba(91,47,42,.18)}
.route-orbit{position:absolute;width:min(72vw,980px);height:min(72vw,980px);left:48%;top:49%;transform:translate(-50%,-50%) rotate(-12deg);border:2px dashed rgba(255,228,158,.23);border-radius:50%;animation:orbitDrift 24s linear infinite}.route-orbit:after{content:"";position:absolute;inset:8%;border:1px dashed rgba(52,78,92,.18);border-radius:50%}.route-orbit i{position:absolute;width:9px;height:9px;background:#ffd274;border:2px solid #a64c3d;box-shadow:0 0 0 5px rgba(255,210,116,.1)}.route-orbit i:nth-child(1){left:12%;top:22%}.route-orbit i:nth-child(2){right:5%;top:43%}.route-orbit i:nth-child(3){left:28%;bottom:4%}.route-orbit i:nth-child(4){left:3%;top:57%}.route-orbit i:nth-child(5){right:24%;top:8%}@keyframes orbitDrift{to{transform:translate(-50%,-50%) rotate(348deg)}}
.pixel-star{position:absolute;color:#ffe4a1;text-shadow:3px 3px rgba(151,65,49,.35);animation:starBlink 2.6s steps(2) infinite}.ps1{left:31%;top:12%;font-size:21px}.ps2{right:27%;top:18%;font-size:14px;animation-delay:.7s}.ps3{right:12%;bottom:32%;font-size:22px;animation-delay:1.2s}@keyframes starBlink{50%{opacity:.32;transform:scale(.8)}}
.skyline-layer{position:absolute;left:0;right:0;bottom:0;height:25vh;display:flex;align-items:end;gap:3px;padding:0 2vw;opacity:.23;filter:drop-shadow(0 -8px 18px rgba(45,62,73,.12))}.skyline-layer:after{content:"";position:absolute;left:0;right:0;bottom:0;height:37%;background:linear-gradient(#36556b,#243e55)}.skyline-layer i{position:relative;z-index:1;flex:1;max-width:120px;background:linear-gradient(#496a79,#2e4b62);clip-path:polygon(0 9%,14% 9%,14% 0,25% 0,25% 12%,62% 12%,62% 4%,76% 4%,76% 18%,100% 18%,100% 100%,0 100%)}.skyline-layer i:nth-child(1){height:45%}.skyline-layer i:nth-child(2){height:70%}.skyline-layer i:nth-child(3){height:53%}.skyline-layer i:nth-child(4){height:91%;max-width:85px}.skyline-layer i:nth-child(5){height:66%}.skyline-layer i:nth-child(6){height:100%;max-width:48px}.skyline-layer i:nth-child(7){height:58%}.skyline-layer i:nth-child(8){height:78%}.skyline-layer i:nth-child(9){height:49%}
.river-shimmer{position:absolute;left:-10%;right:-10%;bottom:-7vh;height:19vh;background:repeating-linear-gradient(0deg,rgba(255,211,124,.13) 0 2px,transparent 2px 10px),linear-gradient(180deg,rgba(70,103,116,.08),rgba(45,75,92,.24));transform:rotate(-2deg)}
@media(max-width:1050px){.map-sheet{left:-90px;top:4vh;opacity:.38;transform:rotate(-10deg) scale(.8)}.metro-ticket{left:-55px;bottom:5vh;opacity:.5;transform:rotate(8deg) scale(.78)}.film-strip,.city-stamp,.coordinate{display:none}.route-orbit{width:115vw;height:115vw;opacity:.55}.skyline-layer{opacity:.16}}
@media(max-width:760px){body{background:radial-gradient(circle at 75% 8%,rgba(255,222,139,.9),transparent 27%),linear-gradient(155deg,#f6d9a6 0%,#e79a5e 55%,#9f5b59 100%)}.ambient-world:after{display:none}.map-sheet{width:230px;height:290px;left:-105px;top:-30px;opacity:.3}.metro-ticket{width:210px;height:74px;left:-80px;bottom:3vh;opacity:.42}.route-orbit{width:155vw;height:155vw}.pixel-star.ps1{left:8%;top:17%}.pixel-star.ps2{right:8%;top:11%}.pixel-star.ps3{right:5%;bottom:12%}.skyline-layer{height:19vh;opacity:.18}.sun-halo{width:130vw;right:-70vw;top:-65vw}}
@media (orientation:landscape) and (max-height:520px){.map-sheet{left:-48px;top:-85px;opacity:.28}.metro-ticket{left:2vw;bottom:-25px;opacity:.35}.route-orbit{width:95vw;height:95vw}.skyline-layer{height:26vh}.sun-halo{width:85vw;right:-35vw;top:-60vw}}
@media(min-width:1800px){.map-sheet{left:9vw;top:13vh;transform:rotate(-8deg) scale(1.15)}.metro-ticket{left:11vw;bottom:13vh;transform:rotate(5deg) scale(1.12)}.film-strip{left:3vw}.coordinate{right:9vw}.city-stamp{right:8vw;bottom:12vh;transform:rotate(-14deg) scale(1.15)}}