*{box-sizing:border-box;margin:0;padding:0}
:root{
  --top-h:76px; --bot-h:148px;
  --cyan:#7be5d5; --cyan2:#22d8ff; --gold:#ffd47a; --bg:#020409;
}
html,body{width:100%;height:100%;overflow:hidden;background:#020409;color:#e8f0f5;font-family:'Noto Sans JP',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
body{position:fixed;inset:0;touch-action:manipulation;}
.top-wrap{position:fixed;top:0;left:0;right:0;height:calc(var(--top-h) + env(safe-area-inset-top));z-index:50;padding-top:env(safe-area-inset-top);background:linear-gradient(180deg,rgba(5,10,20,.96),rgba(5,10,20,.86));border-bottom:1px solid rgba(123,229,213,.22);backdrop-filter:blur(10px)}
.top-bar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:7px 14px 4px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:28px;height:28px;clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);background:radial-gradient(circle at 35% 28%,#f3fffb 0,#7be5d5 46%,#153c55 100%);box-shadow:0 0 15px rgba(123,229,213,.55),inset 0 0 10px rgba(255,255,255,.28)}
.brand-name{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--cyan);text-transform:uppercase;line-height:1}
.brand-sub{font-size:8px;color:#8aa2ae;letter-spacing:.38em;margin-top:3px;white-space:nowrap}
.king-btn{min-width:72px;height:32px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,212,122,.45);background:linear-gradient(180deg,rgba(48,36,14,.78),rgba(13,17,26,.86));color:var(--gold);box-shadow:0 0 12px rgba(255,212,122,.12);font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.strip{height:34px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;padding:0 12px 6px}
.strip-cell{text-align:center;padding:1px 4px}
.strip-label{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:8px;letter-spacing:.28em;color:#6f8390;text-transform:uppercase;line-height:1.15}
.strip-value{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;line-height:1.15;color:#d9edf1;white-space:nowrap}
.strip-value.cyan{color:var(--cyan);text-shadow:0 0 8px rgba(123,229,213,.5)}
.strip-value.mile{font-family:'Orbitron',sans-serif;background:linear-gradient(180deg,#fff5d0,#ffd47a 58%,#a47a25);-webkit-background-clip:text;background-clip:text;color:transparent}
.strip-value.mile small{margin-left:4px;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:9px;letter-spacing:.08em;color:#9fe8dd;background:none;-webkit-background-clip:initial}
.stage{position:fixed;top:calc(var(--top-h) + env(safe-area-inset-top));bottom:calc(var(--bot-h) + env(safe-area-inset-bottom));left:0;right:0;display:flex;align-items:center;justify-content:center;padding:0;background:#000;overflow:hidden}
.canvas{position:relative;width:100vw;height:auto;aspect-ratio:450/785;max-width:100vw;max-height:100%;overflow:hidden;background:#030811;filter:drop-shadow(0 0 18px rgba(34,216,255,.08));transform-origin:center center;}
.map{display:block;position:relative;z-index:4;width:100%;height:100%;}

/* side-fill removed for exact map fit */
.map-side-fill,.map-side-fill.left,.map-side-fill.right{display:none!important}
.map-corner-fade{display:none!important}

.bottom-wrap{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bot-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:50;background:linear-gradient(0deg,rgba(5,10,20,.97),rgba(5,10,20,.86) 72%,rgba(5,10,20,.18));border-top:1px solid rgba(123,229,213,.22);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:space-between}
.dock-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;margin:5px 9px 0;padding:7px 9px;border:1px solid rgba(123,229,213,.32);border-radius:8px;background:linear-gradient(180deg,rgba(10,30,40,.86),rgba(5,15,25,.94));box-shadow:0 0 18px rgba(123,229,213,.08)}
.mile-pct{font-family:'Orbitron',sans-serif;font-weight:800;font-size:19px;line-height:1;background:linear-gradient(180deg,#fff5d0,#ffd47a 52%,#5dc7c7);-webkit-background-clip:text;background-clip:text;color:transparent}
.mile-pct small{font-family:'Rajdhani',sans-serif;font-size:10px;color:#7a8a98;background:none;-webkit-background-clip:initial}
.mile-now{min-width:0}
.mile-now-l{font-family:'Rajdhani',sans-serif;font-size:7px;letter-spacing:.32em;text-transform:uppercase;color:#627683;line-height:1}
.mile-now-t{font-size:11px;font-weight:600;color:#e0f4f0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mile-next{display:flex;align-items:center;gap:5px;margin-top:3px;min-width:0;font-size:10px;line-height:1.25;color:#b8c9cf}
.mile-next b{flex:0 0 auto;font-size:9px;color:#ffd47a;letter-spacing:.12em}
.mile-next span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-state{font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;letter-spacing:.10em;color:#7be5d5;white-space:nowrap;max-width:104px;overflow:hidden;text-overflow:ellipsis}
.mile-bar{height:4px;margin:4px 10px 0;display:flex;gap:2px}
.mile-seg{flex:1;background:rgba(80,100,120,.25);border-radius:999px;overflow:hidden}
.mile-seg.done{background:linear-gradient(90deg,#9d7b23,#ffd47a)}
.mile-seg.now{background:linear-gradient(90deg,#7be5d5,#22d8ff);box-shadow:0 0 8px rgba(123,229,213,.5)}
.mile-route-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px;margin:3px 10px 0;padding:1px 0 2px}
.mile-route-strip::-webkit-scrollbar{display:none}
.mile-route-chip{position:relative;min-width:0;height:25px;border-radius:7px;border:1px solid rgba(123,229,213,.22);background:linear-gradient(180deg,rgba(7,20,30,.82),rgba(2,8,14,.92));color:#8ca2ad;font-family:'Rajdhani','Noto Sans JP',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:1px 0}
.mile-route-chip b{font-size:8px;line-height:1;letter-spacing:0;color:#d6edf0}
.mile-route-chip span{font-size:9px;line-height:1.05;font-weight:800;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
.mile-route-chip[data-state-label]:not([data-state-label=""])::after{content:attr(data-state-label);position:absolute;top:-6px;right:-2px;min-width:18px;height:10px;border-radius:999px;padding:0 3px;background:rgba(4,10,14,.94);border:1px solid rgba(255,212,122,.62);color:#ffd47a;font-size:7px;line-height:9px;font-weight:900;letter-spacing:0;box-shadow:0 0 8px rgba(255,212,122,.18)}
.mile-route-done{border-color:rgba(255,212,122,.44);color:#ffd47a}
.mile-route-active{border-color:rgba(123,229,213,.72);box-shadow:0 0 10px rgba(123,229,213,.18);color:#7be5d5}
.nav{display:grid;grid-template-columns:repeat(4,1fr);padding:2px 4px 2px}
.nav-item{border:0;background:none;color:#637784;font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em;display:flex;flex-direction:column;align-items:center;gap:0;padding:1px 0;text-transform:uppercase}
.nav-item .ico{font-size:14px;line-height:1.05}
.nav-item.active{color:var(--cyan);text-shadow:0 0 8px rgba(123,229,213,.45)}
.version-tag{position:fixed;top:calc(var(--top-h) + env(safe-area-inset-top) + 5px);right:102px;z-index:54;font-family:'Rajdhani',sans-serif;font-size:9px;letter-spacing:.22em;color:#7be5d5;border:1px solid rgba(123,229,213,.38);border-radius:5px;padding:2px 6px;background:rgba(5,15,25,.86);max-width:86px;overflow:hidden;white-space:nowrap;text-overflow:clip;pointer-events:none}
.sheet{position:fixed;left:12px;right:12px;bottom:calc(var(--bot-h) + env(safe-area-inset-bottom) + 10px);z-index:80;transform:translateY(18px);opacity:0;pointer-events:none;transition:.22s ease;background:linear-gradient(180deg,rgba(8,22,34,.96),rgba(3,9,16,.98));border:1px solid rgba(123,229,213,.32);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 18px rgba(123,229,213,.09);padding:11px 12px 12px;backdrop-filter:blur(16px);max-height:min(70svh,560px);overflow:auto}
.sheet.show{transform:translateY(0);opacity:1;pointer-events:auto}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sheet-kicker{font-family:'Rajdhani',sans-serif;font-size:8px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#7be5d5}
.sheet-title{font-size:16px;font-weight:800;letter-spacing:.04em;margin-top:1px}
.sheet-role{font-size:11px;color:#b3c5cd;margin-top:2px}
.sheet-body{font-size:12px;color:#d7e7ec;line-height:1.55;margin-top:8px;overflow-wrap:anywhere}
.sheet-close{width:28px;height:28px;border-radius:8px;border:1px solid rgba(123,229,213,.28);background:rgba(10,25,35,.8);color:#aeece6;font-size:18px;line-height:1}
.sheet-plan-row{width:100%;display:grid;grid-template-columns:68px 1fr;gap:8px;align-items:start;border-top:1px solid rgba(123,229,213,.14);padding-top:8px;font-size:12px;line-height:1.45}
.sheet-plan-row span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#ffd47a;white-space:nowrap}
.sheet-plan-row b{display:block;min-width:0;font-weight:700;color:#e8f6f4;white-space:pre-line;overflow-wrap:anywhere;word-break:normal;line-break:anywhere}
.sheet-route-head{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,212,122,.22);font-size:11px;font-weight:900;letter-spacing:.10em;color:#7be5d5}
.sheet-route-row.active{border-top-color:rgba(123,229,213,.36)}
.sheet-route-row.done span{color:#aee48a}
.sheet-route-status{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(123,229,213,.26);border-radius:9px;background:rgba(4,13,20,.76);padding:8px 10px;font-size:12px;font-weight:800;color:#dffbf7}
.sheet-route-status b{color:#7be5d5;letter-spacing:.08em}
.sheet-route-status.done{border-color:rgba(255,212,122,.54);color:#fff1bd}
.sheet-route-status.done b{color:#ffd47a}
@media (max-width:767px){
  :root{--top-h:58px;--bot-h:140px}
  .top-bar{height:31px;padding:4px 10px 1px}
  .brand{gap:8px}
  .brand-mark{width:24px;height:24px}
  .brand-name{font-size:11px;letter-spacing:.22em}
  .brand-sub{font-size:7px;letter-spacing:.32em;margin-top:2px}
  .king-btn{min-width:62px;height:25px;padding:0 8px;border-radius:8px;font-size:10px}
  .strip{height:27px;padding:0 8px 4px;gap:0}
  .strip-cell{padding:0 2px}
  .strip-label{font-size:7px;letter-spacing:.22em}
  .strip-value{font-size:11px}
  .strip-value.mile small{font-size:8px}
  .version-tag{top:calc(var(--top-h) + env(safe-area-inset-top) + 5px);right:112px;font-size:8px;padding:2px 5px;max-width:72px}
  .stage{align-items:flex-start;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .stage::-webkit-scrollbar{display:none}
  .canvas{width:100vw!important;max-width:none;max-height:none;flex:0 0 auto}
}
@media (max-width:380px){.dock-row{grid-template-columns:44px minmax(0,1fr)}.scan-state{display:none}}
@media (max-height:720px){:root{--top-h:70px;--bot-h:130px}.dock-row{padding:5px 8px}.mile-pct{font-size:17px}.mile-now-t,.mile-next{font-size:10px}}
@media (max-width:767px) and (max-height:720px){:root{--top-h:54px;--bot-h:128px}.top-bar{height:29px;padding-top:3px}.strip{height:25px;padding-bottom:3px}.brand-mark{width:22px;height:22px}.brand-name{font-size:10px}.brand-sub{display:none}.king-btn{height:24px}.mile-route-chip{height:23px}.mile-route-chip b{font-size:7px}.mile-route-chip span{font-size:8px}}
@media (min-width:768px){.stage{padding:18px 24px 22px;background:#000}.canvas{width:min(56vw,540px);max-width:540px}.sheet{left:auto;right:20px;width:min(360px,calc(100vw - 40px))}}


/* ===== v28 Luxury Sky / Mountain / Night Neon Upgrade ===== */
:root{
  --day-cycle:1800s;
  --sky-deep:#020409; --dawn:#233d60; --noon:#90d8ef; --dusk:#3d244e; --night:#02040b;
}
.stage{background:#000;isolation:isolate;perspective:900px;}
.canvas{z-index:5;}
.sky-system{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#020409 0%,#07172b 48%,#050914 100%);
  animation:skyCycle var(--day-cycle) linear infinite;
}
.sky-system::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at 50% 68%,rgba(105,235,225,.18),transparent 36%),
    radial-gradient(circle at 18% 28%,rgba(255,207,127,.20),transparent 28%),
    radial-gradient(circle at 84% 18%,rgba(109,169,255,.16),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 38%,rgba(0,0,0,.22));
  mix-blend-mode:screen;animation:horizonCycle var(--day-cycle) linear infinite;
}
.sky-system::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    radial-gradient(circle at 12% 15%,rgba(255,255,255,.96) 0 1px,transparent 1.8px),
    radial-gradient(circle at 28% 32%,rgba(155,235,255,.92) 0 .9px,transparent 1.7px),
    radial-gradient(circle at 42% 19%,rgba(255,255,255,.9) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 58% 10%,rgba(255,255,255,.86) 0 .8px,transparent 1.5px),
    radial-gradient(circle at 75% 25%,rgba(190,245,255,.86) 0 1px,transparent 1.9px),
    radial-gradient(circle at 87% 41%,rgba(255,255,255,.82) 0 .9px,transparent 1.7px),
    radial-gradient(circle at 19% 52%,rgba(255,255,255,.70) 0 .8px,transparent 1.6px),
    radial-gradient(circle at 63% 58%,rgba(180,230,255,.76) 0 .9px,transparent 1.6px);
  background-size:310px 230px,380px 260px,460px 340px,330px 210px,420px 300px,500px 370px,360px 290px,470px 350px;
  opacity:.9;filter:drop-shadow(0 0 5px rgba(190,245,255,.45));
  animation:starsCycle var(--day-cycle) linear infinite, twinkle 7s ease-in-out infinite alternate;
}
.sky-vignette{position:absolute;inset:0;z-index:18;background:radial-gradient(ellipse at 50% 42%,transparent 0 58%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.16) 100%);mix-blend-mode:multiply;}
.starfield{position:absolute;inset:-12%;z-index:3;opacity:.94;animation:starsCycle var(--day-cycle) linear infinite, starDrift 240s linear infinite;}
.starfield-a{background:radial-gradient(circle at 8% 28%,#fff 0 1px,transparent 1.8px),radial-gradient(circle at 18% 76%,#9cecff 0 .9px,transparent 1.7px),radial-gradient(circle at 31% 18%,#fff 0 1.1px,transparent 2px),radial-gradient(circle at 49% 66%,#d7ffff 0 .9px,transparent 1.8px),radial-gradient(circle at 71% 22%,#fff 0 1px,transparent 2px),radial-gradient(circle at 88% 72%,#9cecff 0 .9px,transparent 1.7px),radial-gradient(circle at 57% 14%,rgba(255,255,255,.95) 0 .8px,transparent 1.5px),radial-gradient(circle at 77% 42%,rgba(212,243,255,.88) 0 .7px,transparent 1.4px),radial-gradient(circle at 24% 52%,rgba(255,255,255,.9) 0 .8px,transparent 1.6px);background-size:520px 420px;}
.starfield-b{opacity:.68;filter:blur(.15px);animation-duration:var(--day-cycle),360s;background:radial-gradient(circle at 15% 42%,rgba(255,255,255,.9) 0 .7px,transparent 1.4px),radial-gradient(circle at 36% 12%,rgba(171,237,255,.82) 0 .7px,transparent 1.5px),radial-gradient(circle at 68% 48%,rgba(255,255,255,.8) 0 .6px,transparent 1.5px),radial-gradient(circle at 93% 33%,rgba(190,245,255,.75) 0 .7px,transparent 1.4px),radial-gradient(circle at 55% 78%,rgba(255,255,255,.78) 0 .55px,transparent 1.2px),radial-gradient(circle at 5% 60%,rgba(176,232,255,.76) 0 .55px,transparent 1.2px);background-size:270px 210px;}
.starfield-c{opacity:.42;filter:blur(.05px);animation-duration:var(--day-cycle),420s;background:radial-gradient(circle at 6% 16%,rgba(255,255,255,.75) 0 .45px,transparent 1px),radial-gradient(circle at 13% 74%,rgba(193,240,255,.72) 0 .42px,transparent .95px),radial-gradient(circle at 22% 37%,rgba(255,255,255,.68) 0 .42px,transparent .95px),radial-gradient(circle at 34% 8%,rgba(208,244,255,.70) 0 .44px,transparent 1px),radial-gradient(circle at 46% 61%,rgba(255,255,255,.70) 0 .44px,transparent 1px),radial-gradient(circle at 58% 23%,rgba(193,240,255,.68) 0 .42px,transparent .95px),radial-gradient(circle at 66% 81%,rgba(255,255,255,.74) 0 .44px,transparent 1px),radial-gradient(circle at 78% 42%,rgba(208,244,255,.68) 0 .42px,transparent .95px),radial-gradient(circle at 89% 14%,rgba(255,255,255,.72) 0 .44px,transparent 1px),radial-gradient(circle at 95% 63%,rgba(193,240,255,.66) 0 .42px,transparent .95px);background-size:190px 160px;}
.milkyway{position:absolute;z-index:4;left:-20%;top:2%;width:140%;height:56%;opacity:.0;transform:rotate(-14deg);background:linear-gradient(90deg,transparent 0%,rgba(125,215,255,.05) 18%,rgba(255,255,255,.18) 46%,rgba(143,240,255,.08) 62%,transparent 100%);filter:blur(12px);mix-blend-mode:screen;animation:milkywayCycle var(--day-cycle) linear infinite;}
.aurora{position:absolute;z-index:5;left:-12%;right:-12%;height:28%;top:15%;opacity:0;filter:blur(18px);mix-blend-mode:screen;transform:skewY(-6deg);animation:auroraCycle var(--day-cycle) linear infinite, auroraWave 12s ease-in-out infinite alternate;}
.aurora-a{background:linear-gradient(90deg,transparent,rgba(67,255,221,.20),rgba(84,170,255,.13),transparent);}
.aurora-b{top:23%;height:22%;background:linear-gradient(90deg,transparent,rgba(166,112,255,.12),rgba(96,255,219,.16),transparent);animation-delay:0s,-4s;}
.meteor{position:absolute;z-index:6;width:170px;height:1.2px;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(236,250,255,.98),rgba(123,229,213,0));filter:drop-shadow(0 0 8px rgba(180,245,255,.82));transform:rotate(-28deg);animation:meteorFly 18s linear infinite;}
.meteor.m1{left:72%;top:14%;animation-delay:-2s}.meteor.m2{left:34%;top:24%;animation-delay:-10s}.meteor.m3{left:88%;top:38%;animation-delay:-16s}
.map-shell-glow{position:absolute;inset:0;z-index:7;background:radial-gradient(ellipse at 50% 92%,rgba(22,116,148,.08),transparent 24%),radial-gradient(ellipse at 50% 100%,rgba(11,34,47,.10),transparent 32%);mix-blend-mode:screen;animation:mapBacklight var(--day-cycle) linear infinite;}
.celestial{position:absolute;border-radius:50%;will-change:left,top,opacity,transform;z-index:9;pointer-events:none;transform:translate(-50%,-50%);}
.sun-orb{width:15px;height:15px;background:radial-gradient(circle at 40% 38%,#fffdf8 0 22%,#fff6d9 28% 58%,rgba(255,225,160,.46) 68%,rgba(255,225,160,0) 100%);box-shadow:0 0 8px rgba(255,225,160,.22),0 0 16px rgba(255,198,118,.08);animation:none;opacity:0;left:-10%;top:-10%;}
.sun-orb::before{content:"";position:absolute;inset:-55%;border-radius:50%;background:radial-gradient(circle,rgba(255,226,162,.22) 0 8%,rgba(255,226,162,.06) 24%,rgba(255,226,162,0) 68%);filter:blur(1.8px);opacity:.68;animation:sunCorona 30s linear infinite;}
.sun-orb::after{content:"";position:absolute;left:22%;top:20%;width:18%;height:18%;border-radius:50%;background:rgba(255,255,255,.42);filter:blur(.7px);}
.moon-orb{width:12px;height:12px;background:radial-gradient(circle at 34% 30%,#fbfeff 0 28%,#effaff 34% 64%,rgba(205,236,255,.34) 72%,rgba(205,236,255,0) 100%);box-shadow:0 0 7px rgba(214,241,255,.14),0 0 14px rgba(123,190,255,.05);animation:none;opacity:0;left:-10%;top:-10%;}
.moon-orb::before{content:"";position:absolute;inset:-52%;border-radius:50%;background:radial-gradient(circle,rgba(214,240,255,.16) 0 10%,rgba(214,240,255,.04) 30%,rgba(214,240,255,0) 70%);filter:blur(1.6px);opacity:.65;}
.moon-orb::after{content:"";position:absolute;left:4px;top:1px;width:10px;height:10px;border-radius:50%;background:rgba(2,6,16,.94);filter:blur(.05px);}
.cloud{position:absolute;z-index:10;width:248px;height:72px;opacity:.18;filter:blur(1.1px);will-change:transform,opacity;animation:cloudDrift 300s linear infinite, cloudLight var(--day-cycle) linear infinite;}
.cloud::before,.cloud::after,.cloud i{content:"";position:absolute;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(214,238,248,.40));box-shadow:0 8px 22px rgba(15,80,110,.11)}
.cloud::before{left:10px;bottom:8px;width:120px;height:42px}.cloud::after{left:75px;bottom:12px;width:126px;height:50px}.cloud i{left:47px;bottom:22px;width:72px;height:46px;display:block}
.cloud-1{top:14%;left:-48%;transform:scale(.98);animation-duration:360s,var(--day-cycle)}.cloud-2{top:27%;left:-70%;transform:scale(1.12);animation-duration:480s,var(--day-cycle);animation-delay:-120s,0s;opacity:.16}.cloud-3{top:40%;left:-62%;transform:scale(.72);animation-duration:330s,var(--day-cycle);animation-delay:-70s,0s;opacity:.12}.cloud-4{top:22%;left:-90%;transform:scale(.96);animation-duration:440s,var(--day-cycle);animation-delay:-220s,0s;opacity:.10}
.sky-haze{position:absolute;left:0;right:0;bottom:7%;height:28%;z-index:11;background:radial-gradient(ellipse at 50% 0%,rgba(255,224,160,.12),transparent 38%),linear-gradient(180deg,rgba(130,185,210,.10),rgba(12,22,35,0) 70%);mix-blend-mode:screen;animation:hazeCycle var(--day-cycle) linear infinite;}
.night-city-halo{position:absolute;left:18%;right:18%;bottom:5%;height:20%;z-index:12;background:radial-gradient(ellipse at 50% 85%,rgba(91,255,230,.16),transparent 54%),radial-gradient(ellipse at 40% 88%,rgba(35,165,255,.10),transparent 50%);filter:blur(10px);mix-blend-mode:screen;animation:nightHaloCycle var(--day-cycle) linear infinite;}
.mountain-layer{position:absolute;bottom:7%;z-index:13;opacity:.94;filter:drop-shadow(0 -10px 16px rgba(255,220,160,.05));animation:mountainTone var(--day-cycle) linear infinite;}
.mountain-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.72) 0 7%,transparent 8% 100%),linear-gradient(215deg,rgba(230,255,255,.44) 0 8%,transparent 9% 100%);mix-blend-mode:screen;opacity:.54;animation:snowcapCycle var(--day-cycle) linear infinite;}
.mountain-layer.far{height:22%;bottom:16%;opacity:.48;filter:blur(.8px);background:linear-gradient(180deg,rgba(120,165,185,.32),rgba(18,31,47,.84));}
.mountain-layer.mid{height:28%;bottom:10%;opacity:.78;background:linear-gradient(180deg,rgba(150,190,200,.26),rgba(9,20,33,.94));}
.mountain-layer.near{height:28%;bottom:5%;opacity:.92;background:linear-gradient(180deg,rgba(32,54,72,.55),rgba(3,9,17,.98));}
.mountain-layer.west{left:-6%;width:52%;clip-path:polygon(0 100%,0 76%,12% 71%,20% 59%,29% 48%,39% 32%,48% 45%,57% 27%,70% 10%,80% 28%,91% 42%,100% 55%,100% 100%);}
.mountain-layer.east{right:-7%;width:60%;clip-path:polygon(0 100%,0 58%,10% 52%,21% 60%,33% 42%,45% 26%,56% 39%,67% 25%,80% 43%,90% 53%,100% 48%,100% 100%);}
.mountain-layer.center{left:20%;width:62%;clip-path:polygon(0 100%,0 62%,11% 58%,22% 47%,34% 55%,48% 31%,62% 16%,73% 38%,84% 48%,100% 57%,100% 100%);}
.sky-depth{position:absolute;inset:0;z-index:17;background:radial-gradient(ellipse at 50% 42%,transparent 0 56%,rgba(2,4,9,.12) 78%,rgba(2,4,9,.26) 100%);}
.front-structure{pointer-events:none;animation:frontToneCycle var(--day-cycle) linear infinite;}
.front-sun-shadow{pointer-events:none;mix-blend-mode:multiply;transform-origin:225px 160px;opacity:0;}
.city-day-shadow{animation:cityShadowCycle var(--day-cycle) linear infinite;mix-blend-mode:multiply;}
.sun-reflection{animation:sunReflectionCycle var(--day-cycle) linear infinite;mix-blend-mode:screen;}
.moon-reflection{animation:moonReflectionCycle var(--day-cycle) linear infinite;mix-blend-mode:screen;}
.neon-road,.neon-window,.tower-breath,.night-neon,.neon-ripple,.glass-edge{animation:neonCycle var(--day-cycle) linear infinite;mix-blend-mode:screen;}
.neon-road{stroke-linecap:round;stroke-linejoin:round;}
.neon-ripple{animation-name:neonCycle,neonBreathe;animation-duration:var(--day-cycle),5.8s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;}
.tower-breath,.neon-window{animation-name:neonCycle,towerBreathe;animation-duration:var(--day-cycle),5.6s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;}
@keyframes skyCycle{0%,20%,100%{background:linear-gradient(180deg,#01030a 0%,#071225 46%,#020409 100%)}21%{background:linear-gradient(180deg,#172b48 0%,#466d88 54%,#d99662 100%)}28%{background:linear-gradient(180deg,#4b97c1 0%,#88d1e6 54%,#eaf5f4 100%)}50%{background:linear-gradient(180deg,#75c9e8 0%,#b9edf5 55%,#f6fbfb 100%)}70%{background:linear-gradient(180deg,#4d78a2 0%,#ebb168 50%,#70425f 100%)}79%{background:linear-gradient(180deg,#111024 0%,#2a1b3d 46%,#050813 100%)}88%{background:linear-gradient(180deg,#02050e 0%,#081122 48%,#020409 100%)}}
@keyframes horizonCycle{0%,20%,100%{opacity:.30}28%,50%{opacity:.78}70%{opacity:.92}79%{opacity:.38}}
@keyframes starsCycle{0%,20%,82%,100%{opacity:.95}28%,70%{opacity:.04}79%{opacity:.62}}
@keyframes twinkle{0%{filter:drop-shadow(0 0 2px rgba(190,245,255,.28));transform:translateY(0)}100%{filter:drop-shadow(0 0 7px rgba(190,245,255,.65));transform:translateY(-1.6px)}}
@keyframes starDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-34px,18px,0)}}
@keyframes milkywayCycle{0%,18%,84%,100%{opacity:.38}28%,70%{opacity:0}79%{opacity:.20}}
@keyframes auroraCycle{0%,18%,84%,100%{opacity:.54}28%,70%{opacity:0}79%{opacity:.25}}
@keyframes auroraWave{0%{transform:skewY(-6deg) translateX(-3%)}100%{transform:skewY(-3deg) translateX(3%)}}
@keyframes meteorFly{0%,75%,100%{opacity:0;transform:translate3d(0,0,0) rotate(-28deg)}80%{opacity:.0}83%{opacity:.96}88%{opacity:0;transform:translate3d(-280px,138px,0) rotate(-28deg)}}
@keyframes sunArc{0%,20%,80%,100%{opacity:0;left:4%;top:31%;transform:translate(-50%,-50%) scale(.84)}22%{opacity:.24;left:10%;top:27%;transform:translate(-50%,-50%) scale(.90)}36%{opacity:.56;left:28%;top:16%;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.76;left:50%;top:6.5%;transform:translate(-50%,-50%) scale(1.04)}64%{opacity:.56;left:72%;top:16%;transform:translate(-50%,-50%) scale(.96)}78%{opacity:.24;left:90%;top:27%;transform:translate(-50%,-50%) scale(.90)}}
@keyframes moonArc{0%,100%{opacity:.68;left:50%;top:7.5%;transform:translate(-50%,-50%) scale(1)}8%{opacity:.46;left:28%;top:16%;transform:translate(-50%,-50%) scale(.96)}18%{opacity:.16;left:9%;top:27%;transform:translate(-50%,-50%) scale(.90)}20%,79%{opacity:0;left:4%;top:31%;transform:translate(-50%,-50%) scale(.84)}80%{opacity:.16;left:91%;top:27%;transform:translate(-50%,-50%) scale(.90)}92%{opacity:.46;left:72%;top:16%;transform:translate(-50%,-50%) scale(.96)}}
@keyframes sunCorona{to{transform:rotate(360deg)}}
@keyframes cloudDrift{0%{transform:translate3d(-22vw,0,0)}35%{transform:translate3d(36vw,4px,0)}70%{transform:translate3d(94vw,-3px,0)}100%{transform:translate3d(158vw,2px,0)}}
@keyframes cloudLight{0%,20%,100%{opacity:.08;filter:blur(1.4px) brightness(.56)}28%,50%{opacity:.22;filter:blur(1.08px) brightness(1.10)}70%{opacity:.16;filter:blur(1.28px) brightness(.98)}79%{opacity:.10;filter:blur(1.55px) brightness(.72)}}
@keyframes hazeCycle{0%,20%,100%{opacity:.14}28%,50%{opacity:.36}70%{opacity:.26}79%{opacity:.08}}
@keyframes nightHaloCycle{0%,20%,82%,100%{opacity:.62}28%,70%{opacity:.04}79%{opacity:.32}}
@keyframes mountainTone{0%,20%,100%{filter:brightness(.60) saturate(.92) drop-shadow(0 -10px 14px rgba(120,240,255,.04))}28%,50%{filter:brightness(1.05) saturate(.96) drop-shadow(0 -10px 14px rgba(255,230,180,.10))}70%{filter:brightness(.86) saturate(1.04) drop-shadow(0 -10px 14px rgba(255,170,120,.12))}79%{filter:brightness(.50) saturate(.98) drop-shadow(0 -10px 18px rgba(80,220,255,.08))}}
@keyframes snowcapCycle{0%,20%,100%{opacity:.34}28%,50%{opacity:.70}70%{opacity:.48}79%{opacity:.28}}
@keyframes mapBacklight{0%,20%,100%{opacity:.22}28%,50%{opacity:.70}70%{opacity:.45}79%{opacity:.18}}
@keyframes frontToneCycle{0%,20%,100%{filter:brightness(.60) contrast(1.10) saturate(1.18) drop-shadow(0 18px 26px rgba(0,0,0,.44))}28%{filter:brightness(1.02) contrast(1.04) saturate(1.03) drop-shadow(-16px 20px 20px rgba(15,18,25,.24))}50%{filter:brightness(1.18) contrast(1.01) saturate(1.01) drop-shadow(0 12px 16px rgba(20,55,65,.10))}70%{filter:brightness(.96) contrast(1.08) saturate(1.12) drop-shadow(16px 20px 20px rgba(13,6,18,.26))}79%{filter:brightness(.56) contrast(1.16) saturate(1.22) drop-shadow(0 20px 30px rgba(0,0,0,.48))}}
@keyframes frontSunShadowCycle{
  0%,20%,80%,100%{opacity:0;transform:translateX(0) skewX(0deg) scaleX(1)}
  24%{opacity:.18;transform:translateX(-18px) skewX(14deg) scaleX(1.1)}
  38%{opacity:.12;transform:translateX(-8px) skewX(8deg) scaleX(1.02)}
  50%{opacity:.04;transform:translateX(0) skewX(0deg) scaleX(.96)}
  64%{opacity:.12;transform:translateX(8px) skewX(-8deg) scaleX(1.02)}
  76%{opacity:.18;transform:translateX(18px) skewX(-14deg) scaleX(1.1)}
}
@keyframes cityShadowCycle{0%,20%,100%{opacity:.38}28%{opacity:.16}50%{opacity:.05}70%{opacity:.22}79%{opacity:.42}}
@keyframes sunReflectionCycle{0%,20%,100%{opacity:0}25%{opacity:.20}50%{opacity:.55}70%{opacity:.22}79%{opacity:0}}
@keyframes moonReflectionCycle{0%,20%,82%,100%{opacity:.46}28%,70%{opacity:0}79%{opacity:.25}}
@keyframes neonCycle{0%,20%,82%,100%{opacity:.92}28%,70%{opacity:.05}79%{opacity:.58}}
@keyframes neonBreathe{0%,100%{transform:scale(.985);filter:drop-shadow(0 0 4px rgba(123,229,213,.24))}50%{transform:scale(1.025);filter:drop-shadow(0 0 12px rgba(123,229,213,.72))}}
@keyframes towerBreathe{0%,100%{filter:drop-shadow(0 0 6px rgba(123,229,213,.35))}50%{filter:drop-shadow(0 0 20px rgba(123,229,213,.88))}}

/* ===== v31 random time offset ===== */
.sky-system,.sky-system::before,.sky-system::after,.milkyway,.aurora,.map-shell-glow,.sun-orb,.moon-orb,.sky-haze,.night-city-halo,.mountain-layer,.city-day-shadow,.sun-reflection,.moon-reflection,.sky-depth,.sky-vignette,.front-sun-shadow{animation-delay:var(--time-offset,0s)!important;}
.starfield{animation-delay:var(--time-offset,0s),0s!important;}
.cloud{animation-delay:0s,var(--time-offset,0s)!important;}
.neon-road,.neon-window,.tower-breath,.night-neon,.neon-ripple,.glass-edge{animation-delay:var(--time-offset,0s),0s!important;}

.time-hud{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:22;display:flex;align-items:center;gap:8px;padding:5px 9px 6px;border:1px solid rgba(123,229,213,.24);border-radius:999px;background:linear-gradient(180deg,rgba(5,16,26,.78),rgba(2,8,14,.68));box-shadow:0 8px 18px rgba(0,0,0,.22),0 0 12px rgba(123,229,213,.06);backdrop-filter:blur(10px)}
.time-hud-label{font-family:'Rajdhani',sans-serif;font-size:8px;font-weight:800;letter-spacing:.22em;color:#7be5d5;white-space:nowrap;text-transform:uppercase}
.time-hud-readout{min-width:42px;font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;color:#e8f8ff;text-align:right}
.time-hud-slider{width:112px;appearance:none;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(255,201,94,.72),rgba(123,229,213,.88),rgba(120,170,255,.78));outline:none}
.time-hud-slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 16%,#c7f7ff 18% 40%,#22d8ff 55%,#0d415e 100%);border:1px solid rgba(255,255,255,.42);box-shadow:0 0 8px rgba(123,229,213,.42),0 0 0 2px rgba(5,12,22,.72)}
.time-hud-slider::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 16%,#c7f7ff 18% 40%,#22d8ff 55%,#0d415e 100%);box-shadow:0 0 8px rgba(123,229,213,.42),0 0 0 2px rgba(5,12,22,.72)}
.time-hud-slider::-moz-range-track{height:3px;border:none;border-radius:999px;background:linear-gradient(90deg,rgba(255,201,94,.72),rgba(123,229,213,.88),rgba(120,170,255,.78))}
@media (max-width:420px){.time-hud{top:7px;padding:4px 8px 5px;gap:7px}.time-hud-slider{width:92px}.time-hud-label{font-size:7px}.time-hud-readout{font-size:9px;min-width:38px}}

@media (prefers-reduced-motion:reduce){.sky-system,.sky-system::before,.sky-system::after,.sun-orb,.moon-orb,.cloud,.front-structure,.front-sun-shadow,.city-day-shadow,.sun-reflection,.moon-reflection,.neon-road,.neon-window,.tower-breath,.starfield,.milkyway,.aurora,.meteor,.sky-haze,.night-city-halo,.mountain-layer{animation:none!important}.sun-orb{opacity:.45;left:50%;top:11%;transform:translate(-50%,-50%)}.moon-orb{opacity:.25;left:70%;top:17%;transform:translate(-50%,-50%)}}

body.low-power .top-wrap,body.low-power .bottom-wrap,body.low-power .time-hud,body.low-power .sheet,body.low-power .auth-modal,body.low-power .king-mode-indicator{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.low-power .canvas{filter:none!important}
body.low-power .sky-system,body.low-power .sky-system::before,body.low-power .sky-system::after,body.low-power .front-structure,body.low-power .front-sun-shadow,body.low-power .city-day-shadow,body.low-power .sun-reflection,body.low-power .moon-reflection,body.low-power .neon-road,body.low-power .neon-window,body.low-power .tower-breath,body.low-power .night-neon,body.low-power .neon-ripple,body.low-power .glass-edge,body.low-power .mountain-layer,body.low-power .mountain-layer::after,body.low-power .map-shell-glow,body.low-power .sky-haze,body.low-power .night-city-halo,body.low-power .activePulse,body.low-power .activeRing,body.low-power .targetPulse,body.low-power .kingRoom,body.low-power .agentArrivalPulse,body.low-power .agentArrivalCore,body.low-power .busyGlyphHalo,body.low-power .busyGlyphCore,body.low-power .activeRoute{animation:none!important}
body.low-power .starfield,body.low-power .milkyway,body.low-power .aurora,body.low-power .meteor,body.low-power .cloud,body.low-power .starfield-b,body.low-power .starfield-c{display:none!important}
body.low-power .sky-system::after{filter:none!important;opacity:.36}
body.low-power .sun-orb::before,body.low-power .moon-orb::before{animation:none!important;filter:none!important}
body.low-power .activeRoute{filter:none!important;stroke-width:3.2;opacity:.72}
body.low-power .labelGroup,body.low-power .labelGroup.activeLabel,body.low-power .labelGroup.visitingLabel,body.low-power .activeLabel .labelPill,body.low-power .visitingLabel .labelPill,body.low-power .visitBadgePill{filter:none!important}
body.low-power #kingRoom.king-authenticated,body.low-power #kingRoom.king-present,body.low-power[data-king-present="true"] #kingRoom{filter:none!important}

/* v37: JS-driven time tone. Mobile low-power disables the old long CSS cycle,
   so brightness, stars, reflections, and city tone must be driven directly. */
body.sky-js .sky-system,
body.sky-js .sky-system::before,
body.sky-js .sky-system::after,
body.sky-js .starfield,
body.sky-js .milkyway,
body.sky-js .aurora,
body.sky-js .cloud,
body.sky-js .map-shell-glow,
body.sky-js .sky-haze,
body.sky-js .night-city-halo,
body.sky-js .mountain-layer,
body.sky-js .mountain-layer::after,
body.sky-js .front-structure,
body.sky-js .city-day-shadow,
body.sky-js .sun-reflection,
body.sky-js .moon-reflection,
body.sky-js .neon-window,
body.sky-js .tower-breath,
body.sky-js .night-neon,
body.sky-js .neon-ripple,
body.sky-js .glass-edge{animation:none!important}
body.sky-js .sky-system{background:var(--sky-bg,linear-gradient(180deg,#020409 0%,#07172b 48%,#050914 100%))!important}
body.sky-js .sky-system::before{opacity:var(--horizon-opacity,.30)!important}
body.sky-js .sky-system::after,
body.sky-js .starfield{opacity:var(--stars-opacity,.80)!important;filter:none!important}
body.sky-js .starfield-b{opacity:var(--stars-soft-opacity,.46)!important}
body.sky-js .starfield-c{opacity:var(--stars-faint-opacity,.28)!important}
body.sky-js .milkyway{opacity:var(--milkyway-opacity,.32)!important}
body.sky-js .aurora{opacity:var(--aurora-opacity,.34)!important;filter:blur(12px)!important}
body.sky-js .cloud{opacity:var(--cloud-opacity,.14)!important;filter:blur(.8px)!important}
body.sky-js .map-shell-glow{opacity:var(--map-backlight-opacity,.24)!important}
body.sky-js .sky-haze{opacity:var(--haze-opacity,.14)!important}
body.sky-js .night-city-halo{opacity:var(--night-halo-opacity,.56)!important;filter:blur(8px)!important}
body.sky-js .mountain-layer{filter:var(--mountain-filter,brightness(.64) saturate(.94))!important}
body.sky-js .mountain-layer::after{opacity:var(--snowcap-opacity,.34)!important}
body.sky-js .front-structure{filter:var(--front-filter,brightness(.62) contrast(1.10) saturate(1.16))!important}
body.sky-js .city-day-shadow{opacity:var(--city-shadow-opacity,.36)!important}
body.sky-js .sun-reflection{opacity:var(--sun-reflection-opacity,0)!important}
body.sky-js .moon-reflection{opacity:var(--moon-reflection-opacity,.28)!important}
body.sky-js .neon-window,
body.sky-js .tower-breath,
body.sky-js .night-neon,
body.sky-js .neon-ripple,
body.sky-js .glass-edge{opacity:var(--neon-opacity,.84)!important;filter:none!important}
body.sky-js .meteor{display:none!important}

/* v25 微調整: 無関係な道路内フローを消し、韓信の巡回/到着/認証だけを強調 */
.neon-road{display:none!important;animation:none!important;opacity:0!important}
#orbTrailLayer,#orbTrailLayer *{display:none!important;opacity:0!important;animation:none!important}
.king-btn.auth,.king-btn.exit{border-color:rgba(255,212,122,.92);background:linear-gradient(180deg,rgba(86,61,18,.94),rgba(22,18,10,.96));box-shadow:0 0 16px rgba(255,212,122,.42),inset 0 0 10px rgba(255,212,122,.14)}
.king-btn.present{border-color:rgba(123,229,213,.72);box-shadow:0 0 14px rgba(123,229,213,.34),inset 0 0 8px rgba(123,229,213,.10)}
.sheet-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sheet-status{width:100%;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:10px;font-weight:700;letter-spacing:.12em;color:#8feee3;text-transform:uppercase;border-top:1px solid rgba(123,229,213,.16);padding-top:8px}
.sheet-action{border:1px solid rgba(123,229,213,.34);background:linear-gradient(180deg,rgba(16,36,46,.92),rgba(5,14,22,.94));color:#dffdf8;border-radius:8px;padding:7px 10px;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:12px;font-weight:800;letter-spacing:.03em;box-shadow:0 0 14px rgba(123,229,213,.10);touch-action:manipulation}
.sheet-action.gold{border-color:rgba(255,212,122,.66);color:#fff3c0;background:linear-gradient(180deg,rgba(78,54,14,.92),rgba(18,16,10,.96));box-shadow:0 0 16px rgba(255,212,122,.20)}
.sheet-action.royal-decree{width:100%;justify-content:center;border-color:rgba(255,226,144,.82);background:linear-gradient(180deg,rgba(111,77,18,.92),rgba(25,19,10,.98));box-shadow:0 0 18px rgba(255,212,122,.24),inset 0 0 0 1px rgba(255,255,255,.05)}
.sheet-action.ghost{opacity:.86}
.sheet-action:disabled{opacity:.42;filter:grayscale(.25);cursor:not-allowed}
#kingRoom.king-authenticated{filter:drop-shadow(0 0 10px rgba(255,212,122,.88)) drop-shadow(0 0 22px rgba(255,212,122,.38))}
#kingRoom.king-present{filter:drop-shadow(0 0 9px rgba(123,229,213,.72)) drop-shadow(0 0 18px rgba(123,229,213,.26))}
.activePulse.agentOnline{animation-duration:1.05s;filter:url(#hardGlow)}
.activePulse.instOnline{animation-duration:2.65s;opacity:.32}
.activeRing{mix-blend-mode:screen;animation:activeRing 1.28s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes activeRing{0%,100%{opacity:.42;transform:scale(.92)}50%{opacity:.96;transform:scale(1.18)}}
.agentArrivalPulse{mix-blend-mode:screen;animation:agentArrivalPulse 1.18s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes agentArrivalPulse{0%{opacity:.95;transform:scale(.58)}76%{opacity:.12;transform:scale(1.9)}100%{opacity:0;transform:scale(2.22)}}
.agentArrivalCore{mix-blend-mode:screen;animation:agentArrivalCore .72s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes agentArrivalCore{from{opacity:.68;transform:scale(.94)}to{opacity:1;transform:scale(1.18)}}
.visitBadge,.activeBadge{font-family:'Rajdhani','Noto Sans JP',sans-serif;font-weight:800;letter-spacing:.12em;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(2,9,13,.88);stroke-width:2.4px;pointer-events:none}
.visitBadge{font-size:8px;fill:#fff4bb}
.activeBadge{font-size:7px;fill:#bffff6}
.activeBadgePill{fill:rgba(4,20,25,.74);stroke:rgba(123,229,213,.52);stroke-width:.7;rx:4;pointer-events:none}
.visitBadgePill{fill:rgba(58,38,8,.72);stroke:rgba(255,212,122,.74);stroke-width:.75;rx:4;pointer-events:none}
.visitingLabel .labelPill{fill:rgba(255,212,122,.88)!important;stroke:rgba(255,244,190,.98)!important;filter:drop-shadow(0 0 7px rgba(255,212,122,.55))}
.visitingLabel .labelText{fill:#071016!important;stroke:rgba(255,250,219,.98)!important}


/* ===== v29 Final polish: Label / Patrol HUD / Royal Auth UI ===== */
:root{--royal:#ffd47a;--royal-soft:rgba(255,212,122,.22);--royal-line:rgba(255,212,122,.66);--glass:rgba(6,18,28,.72)}
.top-bar{gap:8px}.brand-name{letter-spacing:.22em}.brand-sub{letter-spacing:.30em}
.king-btn{position:relative;min-width:78px;height:34px;border-radius:12px;border-color:rgba(255,212,122,.58);background:linear-gradient(180deg,rgba(64,46,18,.88),rgba(11,14,22,.94));font-size:11px;box-shadow:0 0 13px rgba(255,212,122,.16),inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .16s ease,box-shadow .22s ease,border-color .22s ease;color:#ffe7a3}
.king-btn::before{content:"";position:absolute;inset:3px;border-radius:9px;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 30%,transparent 70%,rgba(123,229,213,.08));pointer-events:none;opacity:.72}
.king-btn:active{transform:scale(.96)}
.king-btn.auth,.king-btn.exit{color:#081014;border-color:rgba(255,226,144,.96);background:linear-gradient(180deg,#fff2b8,#ffd47a 54%,#9f711e);box-shadow:0 0 18px rgba(255,212,122,.52),0 0 32px rgba(255,212,122,.18),inset 0 0 0 1px rgba(255,255,255,.38)}
.king-mode-indicator{position:fixed;top:calc(var(--top-h) + env(safe-area-inset-top) + 5px);right:9px;z-index:54;min-width:82px;text-align:center;border:1px solid rgba(123,229,213,.26);border-radius:999px;background:linear-gradient(180deg,rgba(5,17,28,.82),rgba(2,8,14,.78));color:#75e8dc;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:9px;font-weight:800;letter-spacing:.18em;padding:3px 8px;box-shadow:0 0 14px rgba(123,229,213,.08);backdrop-filter:blur(12px);pointer-events:none;opacity:.72;text-transform:uppercase}
body.king-active .king-mode-indicator{color:#161006;border-color:rgba(255,212,122,.88);background:linear-gradient(180deg,rgba(255,236,171,.96),rgba(255,212,122,.88));box-shadow:0 0 20px rgba(255,212,122,.45),0 0 38px rgba(255,212,122,.16);opacity:1}
.scan-state{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:18px;padding:0 8px;border:1px solid rgba(123,229,213,.30);border-radius:999px;background:linear-gradient(180deg,rgba(6,26,35,.82),rgba(3,12,20,.92));box-shadow:0 0 12px rgba(123,229,213,.09);transition:.2s ease;color:#95fff1}
.scan-state::before{content:"";width:5px;height:5px;border-radius:50%;margin-right:6px;background:#7be5d5;box-shadow:0 0 8px rgba(123,229,213,.82)}
.scan-state[data-state="standby"]{color:#94e8df;border-color:rgba(123,229,213,.22)}
.scan-state[data-state="standby"]::before{background:#7be5d5;animation:scanDot 2.4s ease-in-out infinite}
.scan-state[data-state="moving"]{color:#fff0b8;border-color:rgba(255,212,122,.62);box-shadow:0 0 16px rgba(255,212,122,.22)}
.scan-state[data-state="moving"]::before{background:#ffd47a;box-shadow:0 0 10px rgba(255,212,122,.9);animation:scanDot .72s ease-in-out infinite}
.scan-state[data-state="return"]{color:#b8dcff;border-color:rgba(120,190,255,.48)}
.scan-state[data-state="hold"]{color:#fff7ce;border-color:rgba(255,212,122,.72)}
.scan-state[data-state="king"]{color:#161006;background:linear-gradient(180deg,#fff2b8,#ffd47a);border-color:rgba(255,240,190,.96)}
.scan-state[data-state="gate"]{color:#c6f7ff;border-color:rgba(123,229,213,.40);opacity:.88}
@keyframes scanDot{0%,100%{transform:scale(.8);opacity:.58}50%{transform:scale(1.35);opacity:1}}
.sheet{border-radius:16px;border-color:rgba(123,229,213,.32);box-shadow:0 18px 45px rgba(0,0,0,.48),0 0 22px rgba(123,229,213,.10),inset 0 0 0 1px rgba(255,255,255,.035)}
.sheet.king-mode{border-color:rgba(255,212,122,.56);box-shadow:0 18px 45px rgba(0,0,0,.52),0 0 24px rgba(255,212,122,.14),inset 0 0 0 1px rgba(255,255,255,.045)}
.sheet.locked{border-color:rgba(255,212,122,.26)}
.sheet-title{font-size:17px}.sheet-role{color:#c5d8dd}.sheet-body{font-size:12.5px;line-height:1.62;color:#e7f6f5}
.sheet-status{border-top:1px solid rgba(123,229,213,.14);display:flex;align-items:center;gap:6px;color:#8feee3}
.sheet-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#7be5d5;box-shadow:0 0 8px rgba(123,229,213,.72)}
.sheet-status.locked{color:#ffdca0}.sheet-status.locked::before{background:#ffd47a;box-shadow:0 0 9px rgba(255,212,122,.74)}
.sheet-status.unlocked{color:#fff2b8}.sheet-status.unlocked::before{background:#ffd47a;box-shadow:0 0 10px rgba(255,212,122,.86)}
.sheet-action{border-radius:11px;padding:8px 12px;transition:transform .14s ease,box-shadow .2s ease}.sheet-action:active{transform:scale(.97)}
.sheet-work-section{margin-top:8px;border:1px solid rgba(123,229,213,.18);border-radius:12px;padding:8px 10px;background:linear-gradient(180deg,rgba(8,28,36,.48),rgba(3,12,20,.58))}
.sheet-work-section h3{margin:0 0 6px;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:10px;font-weight:900;letter-spacing:.16em;color:#7be5d5}
.sheet-work-section ol{margin:0;padding-left:18px;color:#e9f7f6;font-size:12px;line-height:1.55;font-weight:800}
.sheet-work-section li+li{margin-top:4px}
.sheet-work-section.done{border-color:rgba(255,212,122,.26);background:linear-gradient(180deg,rgba(44,34,10,.40),rgba(4,12,20,.58))}
.sheet-work-section.done h3{color:#ffe0a0}
.sheet-work-section.active{border-color:rgba(123,229,213,.34);box-shadow:0 0 12px rgba(123,229,213,.08)}
.sheet-work-section.idle{opacity:.9}
.detail-card,.lock-card,.king-card{position:relative;border:1px solid rgba(123,229,213,.18);border-radius:12px;padding:10px 11px;background:linear-gradient(180deg,rgba(10,31,42,.56),rgba(3,12,20,.62));box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.king-card{border-color:rgba(255,212,122,.34);background:linear-gradient(180deg,rgba(63,43,13,.45),rgba(4,12,20,.64))}
.lock-card{border-color:rgba(255,212,122,.28);color:#ffe5a8}
.detail-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;color:#89a7ad;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.detail-chip{border:1px solid rgba(123,229,213,.18);border-radius:999px;padding:2px 6px;background:rgba(5,18,26,.62)}
.detail-chip.gold{color:#ffe4a4;border-color:rgba(255,212,122,.35);background:rgba(50,35,10,.45)}
.auth-modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at 50% 38%,rgba(255,212,122,.12),transparent 34%),rgba(0,4,9,.66);backdrop-filter:blur(11px);opacity:0;pointer-events:none;transition:opacity .18s ease}
.auth-modal.show{opacity:1;pointer-events:auto}
.auth-card{width:min(360px,100%);border:1px solid rgba(255,212,122,.48);border-radius:20px;padding:18px;background:linear-gradient(180deg,rgba(12,24,34,.96),rgba(3,8,14,.98));box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 38px rgba(255,212,122,.13),inset 0 0 0 1px rgba(255,255,255,.04);transform:translateY(12px) scale(.98);transition:transform .18s ease}
.auth-modal.show .auth-card{transform:translateY(0) scale(1)}
.auth-orb{width:42px;height:42px;margin:0 auto 10px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#151006;background:radial-gradient(circle at 35% 25%,#fff8db,#ffd47a 58%,#8d641e);box-shadow:0 0 24px rgba(255,212,122,.38),inset 0 0 0 1px rgba(255,255,255,.32);font-size:20px}
.auth-kicker{text-align:center;font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:9px;font-weight:800;letter-spacing:.28em;color:#7be5d5}.auth-title{text-align:center;font-weight:900;font-size:18px;margin-top:2px;color:#fff2c4}.auth-copy{text-align:center;font-size:12px;line-height:1.55;color:#bcd1d6;margin:9px 0 14px}.auth-label{font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:9px;font-weight:800;letter-spacing:.22em;color:#7be5d5}.auth-input{width:100%;height:40px;border-radius:12px;border:1px solid rgba(123,229,213,.28);background:rgba(3,11,18,.82);color:#f2fffc;font-size:15px;font-weight:800;letter-spacing:.10em;padding:0 12px;outline:none;margin-top:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}.auth-input:focus{border-color:rgba(255,212,122,.72);box-shadow:0 0 16px rgba(255,212,122,.18),inset 0 0 0 1px rgba(255,255,255,.05)}.auth-error{min-height:18px;color:#ffb9a8;font-size:11px;margin-top:6px}.auth-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}.auth-cancel,.auth-submit{height:36px;border-radius:11px;border:1px solid rgba(123,229,213,.26);padding:0 13px;font-weight:800;font-size:12px}.auth-cancel{background:rgba(7,21,30,.86);color:#d7f5f0}.auth-submit{border-color:rgba(255,212,122,.70);background:linear-gradient(180deg,#fff0b3,#ffd47a 58%,#9d711f);color:#111006;box-shadow:0 0 15px rgba(255,212,122,.22)}
.busyGlyph{pointer-events:none;mix-blend-mode:screen}.busyGlyphHalo{animation:busyHalo 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.busyGlyphCore{animation:busyCore .72s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.busyGlyphTick{font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:6.5px;font-weight:900;letter-spacing:.04em;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(2,9,13,.86);stroke-width:1.6px;fill:#fff4bf;pointer-events:none}
@keyframes busyHalo{0%,100%{opacity:.22;transform:scale(.86)}50%{opacity:.68;transform:scale(1.2)}}@keyframes busyCore{from{opacity:.74;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
.labelGroup{filter:drop-shadow(0 1px 2px rgba(0,0,0,.38))}.labelPill{fill:rgba(239,252,255,.82);stroke:rgba(5,14,20,.52);stroke-width:.72}.labelText{stroke:rgba(247,255,255,.94);stroke-width:1.85px}.labelInst{stroke-width:2.55px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}.activeLabel .labelPill{fill:rgba(141,245,226,.92);filter:drop-shadow(0 0 5px rgba(123,229,213,.38))}.visitingLabel .labelPill{filter:drop-shadow(0 0 9px rgba(255,212,122,.62))}.visitBadgePill{filter:drop-shadow(0 0 6px rgba(255,212,122,.40))}
@media (max-width:420px){.version-tag{right:104px;max-width:66px}.king-mode-indicator{right:7px;min-width:74px;font-size:8px}.king-btn{min-width:72px;padding:0 10px}.auth-card{border-radius:18px}.sheet{left:9px;right:9px}.scan-state{min-width:66px;font-size:8.5px;padding:0 7px}}

/* SVG runtime styles from v36 source. */
.activePulse{mix-blend-mode:screen;animation:activePulse 1.65s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
          @keyframes activePulse{0%,100%{opacity:.42;transform:scale(.82)}50%{opacity:.9;transform:scale(1.22)}}
          .targetPulse{mix-blend-mode:screen;animation:targetPulse .95s ease-out infinite;transform-box:fill-box;transform-origin:center}
          @keyframes targetPulse{0%{opacity:.85;transform:scale(.65)}100%{opacity:0;transform:scale(2.15)}}
          .kingRoom{animation:kingRoom 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
          @keyframes kingRoom{0%,100%{opacity:.72}50%{opacity:1}}
          .routeGuard{fill:none;stroke:#7be5d5;stroke-width:1;opacity:0;pointer-events:none}
          .labelText{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:800;fill:#071016;stroke:rgba(244,255,255,.86);stroke-width:1.7px;paint-order:stroke;dominant-baseline:middle;text-anchor:middle;pointer-events:none}
          .labelPill{fill:rgba(236,251,255,.74);stroke:rgba(9,18,24,.35);stroke-width:.55;rx:2.2;pointer-events:none}
          .labelInst{font-size:17px;font-weight:900;letter-spacing:-.04em;stroke-width:2.2px}
          .labelAgent{font-size:10px;letter-spacing:-.03em}
          .labelTiny{font-size:9px;letter-spacing:-.05em}
          .labelKing{font-family:'Noto Sans JP',system-ui,sans-serif;font-size:9px;letter-spacing:-.04em;fill:#061014;stroke:rgba(255,245,208,.88);stroke-width:1.5px}
          .activeLabel .labelPill{fill:rgba(123,229,213,.80);stroke:rgba(2,16,22,.55)}
          .activeLabel .labelText{fill:#021115;stroke:rgba(238,255,252,.98)}
          .tapZone{fill:transparent;pointer-events:auto;cursor:pointer}

/* ===== AgentHub integrated runtime layer ===== */
body.agenthub-v27{position:fixed;inset:0;overflow:hidden;background:#020409;color:#e8f0f5;}
/* SVG runtime styles from the approved v27 map, kept in external CSS for Flask integration. */
.activePulse{mix-blend-mode:screen;animation:activePulse 1.65s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes activePulse{0%,100%{opacity:.42;transform:scale(.82)}50%{opacity:.9;transform:scale(1.22)}}
.targetPulse{mix-blend-mode:screen;animation:targetPulse .95s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes targetPulse{0%{opacity:.85;transform:scale(.65)}100%{opacity:0;transform:scale(2.15)}}
.kingRoom{animation:kingRoom 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes kingRoom{0%,100%{opacity:.72}50%{opacity:1}}
.labelText{font-family:'Noto Sans JP',system-ui,sans-serif;font-weight:800;fill:#071016;stroke:rgba(244,255,255,.86);stroke-width:1.7px;paint-order:stroke;dominant-baseline:middle;text-anchor:middle;pointer-events:none}
.labelPill{fill:rgba(236,251,255,.74);stroke:rgba(9,18,24,.35);stroke-width:.55;rx:2.2;pointer-events:none}
.labelInst{font-size:17px;font-weight:900;letter-spacing:-.04em;stroke-width:2.2px}
.labelAgent{font-size:10px;letter-spacing:-.03em}
.labelTiny{font-size:9px;letter-spacing:-.05em}
.labelKing{font-size:9px;letter-spacing:-.04em;fill:#061014;stroke:rgba(255,245,208,.88);stroke-width:1.5px}
.activeLabel .labelPill{fill:rgba(123,229,213,.80);stroke:rgba(2,16,22,.55)}
.activeLabel .labelText{fill:#021115;stroke:rgba(238,255,252,.98)}
.tapZone{fill:transparent;pointer-events:auto;cursor:pointer}
body.agenthub-v27 .brand-sub{letter-spacing:.24em;}
body.agenthub-v27 .strip{grid-template-columns:1fr 1fr 1fr;}
body.agenthub-v27 .strip-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
body.agenthub-v27 .king-btn{cursor:pointer;}
body[data-king-present="true"] #kingRoom{filter:drop-shadow(0 0 12px rgba(255,212,122,.95)) drop-shadow(0 0 28px rgba(255,212,122,.45));}
.activeRoute{fill:none;stroke:rgba(123,229,213,.78);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#hardGlow);opacity:.9;mix-blend-mode:screen;animation:routeGlow 2.8s ease-in-out infinite;}
.activeRoute.king{stroke:rgba(255,212,122,.88);stroke-width:4.8;}
.activeRoute.idle{opacity:.18;stroke-width:1.2;animation:none;}
@keyframes routeGlow{0%,100%{opacity:.52}50%{opacity:.94}}
.labelGroup{transition:opacity .2s ease, filter .2s ease;}
.labelGroup.activeLabel{filter:drop-shadow(0 0 8px rgba(123,229,213,.72));}
.labelGroup.visitingLabel{filter:drop-shadow(0 0 10px rgba(255,212,122,.86));}
.activeBadgePill{fill:rgba(10,35,40,.9);stroke:rgba(123,229,213,.8);stroke-width:.8;}
.activeBadge,.visitBadge{font-family:'Rajdhani','Noto Sans JP',sans-serif;font-size:7px;font-weight:800;fill:#dffdf8;text-anchor:middle;dominant-baseline:middle;letter-spacing:.05em;paint-order:stroke;stroke:rgba(0,8,12,.75);stroke-width:1.3px;}
.visitBadgePill{fill:rgba(50,34,12,.92);stroke:rgba(255,212,122,.76);stroke-width:.8;}
.sheet-overlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:.2s ease;}
.sheet-overlay.show{opacity:1;pointer-events:auto;}
.sheet-field{display:grid;gap:4px;margin-top:8px;}
.sheet-field label{font-size:9px;color:#8aa2ae;letter-spacing:.14em;font-weight:800;}
.sheet-field input,.sheet-field textarea{width:100%;border:1px solid rgba(123,229,213,.28);border-radius:8px;background:rgba(0,8,14,.72);color:#e8f0f5;padding:8px 9px;font:600 13px system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;outline:none;}
.sheet-field textarea{min-height:72px;resize:vertical;}
.sheet-private{margin-top:10px;border-top:1px solid rgba(123,229,213,.16);padding-top:9px;display:grid;gap:7px;}
.sheet-private-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.sheet-private-grid div{border:1px solid rgba(123,229,213,.16);border-radius:8px;background:rgba(3,12,18,.5);padding:7px;}
.sheet-private-grid span{display:block;font-size:9px;color:#8aa2ae;letter-spacing:.12em;font-weight:800;}
.sheet-private-grid b{display:block;margin-top:2px;font-size:12px;color:#e8f0f5;}
.toast-container{position:fixed;left:12px;right:12px;bottom:calc(var(--bot-h) + env(safe-area-inset-bottom) + 16px);z-index:120;display:grid;justify-items:center;pointer-events:none;}
.toast{max-width:min(340px,100%);border:1px solid rgba(123,229,213,.34);border-radius:999px;background:rgba(4,14,22,.94);box-shadow:0 10px 28px rgba(0,0,0,.35);color:#dffdf8;padding:8px 12px;font-size:12px;font-weight:800;opacity:0;transform:translateY(8px);animation:toastIn 2.2s ease forwards;}
@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}12%,82%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){.activePulse,.targetPulse,.kingRoom,.agentArrivalPulse,.agentArrivalCore,.activeRoute,.sky-system,.cloud,.celestial{animation:none!important}.orbTrailLayer *{display:none}}
@media (max-width:390px){.brand-name{font-size:11px}.brand-sub{font-size:7px}.strip-value{font-size:11px}.king-btn{min-width:66px;padding:0 9px}.sheet{left:10px;right:10px}}

/* Vistary v0.5 shell. Keep v27 assets on disk, but do not show unused legacy UI in Vistary. */
body.vistary-shell{
  --top-h:50px;
  --bot-h:0px;
  background:#02070d;
  width:100%;
  overflow-x:hidden;
}
body.vistary-shell .top-wrap{
  height:calc(var(--top-h) + env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(3,10,17,.98),rgba(3,10,17,.92));
}
body.vistary-shell .top-bar{
  height:50px;
  padding:8px 14px;
}
body.vistary-shell .brand{
  gap:9px;
}
body.vistary-shell .brand-name{
  color:#f4fbf8;
  font-size:16px;
  letter-spacing:.08em;
}
body.vistary-shell .brand-sub{
  color:#7be5d5;
  font-size:9px;
  letter-spacing:.12em;
}
body.vistary-shell .king-btn{
  min-width:72px;
}
body.vistary-shell .strip,
body.vistary-shell .bottom-wrap,
body.vistary-shell .king-mode-indicator,
body.vistary-shell .time-hud{
  display:none!important;
}
body.vistary-shell .stage{
  top:calc(var(--top-h) + env(safe-area-inset-top));
  bottom:0;
  background:#02070d;
}
body.vistary-shell .canvas{
  background:#02070d;
  filter:none;
}
body.vistary-shell .sheet{
  box-sizing:border-box;
  max-width:calc(100vw - 24px);
}
body.vistary-shell .sky-system,
body.vistary-shell #cityShadowLayer,
body.vistary-shell #skyReflectionLayer,
body.vistary-shell #activeRouteLayer,
body.vistary-shell #activeGlowLayer,
body.vistary-shell #orbHaloLayer,
body.vistary-shell #orbTrailLayer,
body.vistary-shell #orbHeadLayer,
body.vistary-shell #kingRoom,
body.vistary-shell #frontStructureLayer,
body.vistary-shell .front-sun-shadow,
body.vistary-shell #targetLayer,
body.vistary-shell #labelsLayer,
body.vistary-shell #tapLayer{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.vistary-legacy-quest .sky-system,
body.vistary-legacy-quest .starfield,
body.vistary-legacy-quest .milkyway,
body.vistary-legacy-quest .aurora,
body.vistary-legacy-quest .meteor,
body.vistary-legacy-quest .map-shell-glow,
body.vistary-legacy-quest .celestial,
body.vistary-legacy-quest .cloud,
body.vistary-legacy-quest .sky-haze,
body.vistary-legacy-quest .night-city-halo,
body.vistary-legacy-quest .mountain-layer,
body.vistary-legacy-quest .sky-depth,
body.vistary-legacy-quest .sky-vignette,
body.vistary-legacy-quest #cityShadowLayer,
body.vistary-legacy-quest #skyReflectionLayer,
body.vistary-legacy-quest .front-sun-shadow{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.vistary-legacy-quest .stage,
body.vistary-legacy-quest .canvas{
  background:#02070d!important;
}
body.vistary-shell .vistary-server-backdrop{
  opacity:1;
}
body.vistary-shell .version-tag{
  top:calc(env(safe-area-inset-top) + 14px);
  right:96px;
  color:#ffd47a;
  border-color:rgba(255,212,122,.34);
  background:rgba(5,15,25,.72);
  letter-spacing:.08em;
  max-width:96px;
}
@media (min-width:900px){
  body.vistary-legacy-quest .stage{
    right:430px;
  }
  body.vistary-legacy-quest .sheet{
    width:min(420px,calc(100vw - 40px));
  }
}
.vistary-badge-row{
  position:fixed;
  top:calc(var(--top-h) + env(safe-area-inset-top) + 6px);
  left:10px;
  z-index:55;
  display:flex;
  gap:5px;
  max-width:calc(100vw - 120px);
  overflow:hidden;
  pointer-events:none;
}
.vistary-badge{
  min-height:24px;
  padding:3px 7px;
  border:1px solid rgba(255,212,122,.42);
  border-radius:6px;
  background:rgba(5,15,25,.88);
  color:#ffd47a;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
  box-shadow:0 0 10px rgba(255,212,122,.08);
}
.vistary-badge.case{
  border-color:rgba(123,229,213,.38);
  color:#7be5d5;
}
.vistary-district-list{
  width:100%;
  display:grid;
  gap:6px;
}
.vistary-case-row{
  width:100%;
  min-height:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(123,229,213,.22);
  border-radius:8px;
  background:rgba(4,13,20,.72);
  color:#e8f6f4;
  padding:7px 9px;
  text-align:left;
}
.vistary-case-row b{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
}
.vistary-case-row span{
  display:block;
  margin-top:1px;
  color:#b8c9cf;
  font-size:10px;
}
.vistary-case-row i{
  font-style:normal;
  color:#ffd47a;
  font-family:'Orbitron','Rajdhani',sans-serif;
  font-size:13px;
}
body.vistary-shell .sheet-plan-row{
  grid-template-columns:minmax(64px,88px) minmax(0,1fr);
}
body.vistary-shell .sheet-plan-row span,
body.vistary-shell .sheet-plan-row b,
body.vistary-shell .city-metric span,
body.vistary-shell .city-metric b{
  overflow-wrap:anywhere;
  line-break:anywhere;
}
.vistary-castle-counts{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.vistary-count{
  min-height:44px;
  border:1px solid rgba(123,229,213,.18);
  border-radius:8px;
  background:rgba(4,13,20,.68);
  padding:7px 8px;
}
.vistary-count span{
  display:block;
  color:#7be5d5;
  font-size:9px;
  font-weight:900;
}
.vistary-count b{
  display:block;
  color:#e8f6f4;
  font-size:14px;
  line-height:1.2;
}
.vistary-gate-note{
  border:1px solid rgba(255,212,122,.28);
  border-radius:8px;
  padding:8px 9px;
  background:rgba(48,36,14,.30);
  color:#ffe8aa;
  font-size:11px;
  line-height:1.45;
}
@media (max-width:767px){
  .vistary-badge-row{top:calc(var(--top-h) + env(safe-area-inset-top) + 4px);left:8px;max-width:calc(100vw - 96px)}
  .vistary-badge{font-size:7px;padding:2px 5px;min-height:22px}
  .vistary-castle-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .vistary-badge,.vistary-case-row,.vistary-count{transition:none!important;animation:none!important}
}

body.vistary-map-ready #targetLayer,
body.vistary-map-ready #labelsLayer,
body.vistary-map-ready #tapLayer{
  opacity:0;
  pointer-events:none;
}
body.vistary-map-ready #activeRouteLayer,
body.vistary-map-ready #activeGlowLayer,
body.vistary-map-ready #orbHaloLayer,
body.vistary-map-ready #orbTrailLayer,
body.vistary-map-ready #orbHeadLayer{
  opacity:.08;
  pointer-events:none;
}
#vistaryMapLayer,
#vistaryMapLayer *{
  pointer-events:none;
}
.vistary-map-backdrop{
  opacity:.98;
  filter:saturate(1.05) contrast(1.02);
}
#vistaryZoneLayer{
  pointer-events:auto;
}
.vistary-zone{
  cursor:pointer;
  outline:none;
  --zone-stroke:rgba(255,212,122,.82);
  --zone-fill:rgba(123,229,213,.12);
}
.vistary-zone-hint{
  position:fixed;
  z-index:70;
  width:min(268px,calc(100vw - 24px));
  min-height:44px;
  padding:9px 10px;
  border:1px solid rgba(255,212,122,.48);
  border-radius:8px;
  background:rgba(3,10,17,.94);
  color:#f4fbf8;
  font-size:11px;
  font-weight:800;
  line-height:1.45;
  box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 18px rgba(255,212,122,.12);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;
}
.vistary-zone-hint.show{
  opacity:1;
  transform:translateY(0);
}
body.vistary-route-quest .vistary-dimmed-zone{
  opacity:.30;
}
body.vistary-route-quest .vistary-dimmed-zone:hover{
  opacity:.72;
}
body.vistary-route-quest .vistary-selected-zone{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,212,122,.36));
}
body.vistary-route-quest .vistary-selected-zone .vistary-zone-hit{
  stroke:rgba(255,212,122,.96);
  stroke-width:2.2;
  fill:rgba(255,212,122,.12);
}
.vistary-zone-hit{
  fill:transparent;
  stroke:transparent;
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  pointer-events:all;
  transition:fill .16s ease,stroke .16s ease,opacity .16s ease;
}
.vistary-zone:focus .vistary-zone-hit,
.vistary-zone:hover .vistary-zone-hit,
.vistary-zone.vistary-zone-hover .vistary-zone-hit{
  fill:var(--zone-fill);
  stroke:var(--zone-stroke);
}
.vistary-zone-hit.castle{
  fill:transparent;
  stroke:transparent;
  stroke-width:1.6;
}
.vistary-zone-label-bg{
  fill:rgba(2,8,14,.70);
  stroke:rgba(123,229,213,.20);
  stroke-width:.8;
}
.vistary-zone-title,
.vistary-zone-sub{
  pointer-events:none;
  paint-order:stroke;
  stroke:rgba(1,7,12,.72);
  stroke-width:2.4px;
  stroke-linejoin:round;
  fill:#e8f6f4;
  font-family:'Noto Sans JP','Rajdhani',sans-serif;
  letter-spacing:0;
}
.vistary-zone-title{
  font-size:9px;
  font-weight:900;
}
.vistary-zone-title.castle{
  fill:#ffe6a6;
  font-size:13px;
}
.vistary-zone-sub{
  fill:#aeece6;
  font-size:7.5px;
  font-weight:800;
}
.vistary-zone-progress-bg{
  fill:rgba(2,8,14,.72);
  stroke:rgba(255,255,255,.08);
  stroke-width:.5;
}
.vistary-zone-progress{
  fill:#ffd47a;
  filter:drop-shadow(0 0 3px rgba(255,212,122,.66));
}
.vistary-state-empty .vistary-zone-hit{
  --zone-stroke:rgba(148,163,184,.66);
  --zone-fill:rgba(3,12,20,.10);
}
.vistary-state-running .vistary-zone-hit{
  --zone-stroke:rgba(123,229,213,.88);
  --zone-fill:rgba(123,229,213,.12);
}
.vistary-state-approval .vistary-zone-hit{
  --zone-stroke:rgba(255,212,122,.92);
  --zone-fill:rgba(255,212,122,.14);
}
.vistary-state-completed .vistary-zone-hit{
  --zone-stroke:rgba(174,228,138,.92);
  --zone-fill:rgba(100,210,126,.14);
}
.vistary-state-archived .vistary-zone-hit{
  --zone-stroke:rgba(148,163,184,.72);
  --zone-fill:rgba(148,163,184,.12);
}
.vistary-state-blocked .vistary-zone-hit{
  --zone-stroke:rgba(255,126,126,.88);
  --zone-fill:rgba(255,126,126,.14);
}
.vistary-marker{
  pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(0,8,14,.74)) drop-shadow(0 0 10px rgba(123,229,213,.28));
}
.vistary-field-strip{
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
}
.vistary-field-title{
  position:absolute;
  left:50%;
  top:76.8%;
  transform:translateX(-50%);
  min-width:96px;
  padding:3px 9px;
  border:1px solid rgba(255,212,122,.38);
  border-radius:999px;
  background:rgba(3,12,20,.82);
  color:#ffd47a;
  font-size:9px;
  font-weight:900;
  text-align:center;
  pointer-events:none;
  box-shadow:0 0 10px rgba(255,212,122,.12);
}
.vistary-field-route{
  position:absolute;
  left:47%;
  top:81.3%;
  width:6%;
  height:7.5%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(123,229,213,.20);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(2,8,14,.36),rgba(2,8,14,.68));
  color:#7be5d5;
  font-family:'Rajdhani','Noto Sans JP',sans-serif;
  font-size:8px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}
.vistary-field-agent{
  position:absolute;
  z-index:2;
  min-width:44px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:1px solid rgba(123,229,213,.44);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(4,18,28,.86),rgba(2,8,14,.90));
  color:#e8f6f4;
  font-weight:900;
  letter-spacing:0;
  box-shadow:0 0 12px rgba(123,229,213,.13),inset 0 0 0 1px rgba(255,255,255,.04);
  pointer-events:auto;
}
.vistary-field-agent b{
  font-size:11px;
  line-height:1.05;
}
.vistary-field-agent span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#aeece6;
  font-size:7px;
  line-height:1.05;
}
.vistary-field-agent.right{
  border-color:rgba(255,212,122,.44);
  color:#ffe8aa;
}
.vistary-field-agent.right span{
  color:#ffe8aa;
}
.vistary-field-agent:active{
  transform:scale(.97);
}
.vistary-quest-panel{
  position:fixed;
  z-index:58;
  top:calc(var(--top-h) + env(safe-area-inset-top) + 10px);
  right:12px;
  bottom:12px;
  width:318px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(123,229,213,.28);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(4,15,24,.94),rgba(2,8,14,.96));
  color:#e8f6f4;
  box-shadow:0 18px 40px rgba(0,0,0,.42),0 0 18px rgba(123,229,213,.10);
  overflow:hidden;
}
.vistary-quest-panel-head{
  padding:12px 13px 10px;
  border-bottom:1px solid rgba(123,229,213,.18);
  background:rgba(4,22,31,.70);
}
.vistary-quest-panel-head span{
  display:block;
  color:#ffd47a;
  font-size:10px;
  font-weight:900;
}
.vistary-quest-panel-head h2{
  margin:2px 0 4px;
  color:#f4fbf8;
  font-size:18px;
  line-height:1.25;
  letter-spacing:0;
}
.vistary-quest-panel-head p{
  margin:0;
  color:#aeece6;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
.vistary-quest-panel-body{
  flex:1;
  min-height:0;
  display:grid;
  align-content:start;
  gap:8px;
  padding:10px;
  overflow:auto;
}
.vistary-quest-block{
  display:grid;
  gap:3px;
  border:1px solid rgba(123,229,213,.18);
  border-radius:8px;
  background:rgba(2,10,16,.62);
  padding:8px 9px;
}
.vistary-quest-block.active{
  border-color:rgba(255,212,122,.40);
  background:rgba(45,34,12,.28);
}
.vistary-quest-block span{
  color:#7be5d5;
  font-size:10px;
  font-weight:900;
}
.vistary-quest-block b{
  color:#e8f6f4;
  font-size:12px;
  line-height:1.45;
  font-weight:800;
}
.vistary-quest-progress{
  --progress:0;
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid rgba(255,212,122,.28);
  border-radius:8px;
  background:
    linear-gradient(90deg,rgba(255,212,122,.22) calc(var(--progress) * 1%),rgba(3,12,20,.74) 0),
    rgba(3,12,20,.74);
  color:#ffd47a;
  font-weight:900;
}
@media (max-width:899px){
  body.vistary-route-quest .stage{
    bottom:252px;
  }
  .vistary-quest-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    max-height:238px;
  }
  .vistary-quest-panel-head{
    padding:8px 10px;
  }
  .vistary-quest-panel-head h2{
    font-size:14px;
  }
  .vistary-quest-panel-body{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:8px;
  }
  .vistary-quest-panel-body .sheet-action,
  .vistary-quest-panel-body .vistary-start-form{
    grid-column:1/-1;
  }
}
body.vistary-legacy-quest .vistary-quest-panel{
  top:82px;
  right:12px;
  bottom:calc(var(--bottom-nav-h, 72px) + 14px);
  width:318px;
}
body.vistary-legacy-quest .vistary-quest-panel-head h2{
  font-size:16px;
}
body.vistary-legacy-quest .vistary-quest-panel-body{
  gap:7px;
}
.vistary-legacy-field-agents{
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
}
.vistary-legacy-field-title{
  position:absolute;
  top:88.3%;
  left:50%;
  transform:translateX(-50%);
  min-width:86px;
  padding:3px 8px;
  border:1px solid rgba(255,212,122,.36);
  border-radius:999px;
  background:rgba(3,12,20,.80);
  color:#ffd47a;
  font-size:9px;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 0 10px rgba(255,212,122,.12);
}
.vistary-legacy-field-route{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(123,229,213,.22);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(2,8,14,.28),rgba(2,8,14,.68));
  color:#7be5d5;
  font-family:'Rajdhani','Noto Sans JP',sans-serif;
  font-size:8px;
  font-weight:900;
  letter-spacing:0;
  pointer-events:none;
}
.vistary-legacy-field-agent{
  position:absolute;
  z-index:2;
  min-width:44px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border:1px solid rgba(123,229,213,.44);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(4,18,28,.88),rgba(2,8,14,.94));
  color:#e8f6f4;
  font-weight:900;
  box-shadow:0 0 10px rgba(123,229,213,.12);
  pointer-events:auto;
}
.vistary-legacy-field-agent b{
  font-size:11px;
  line-height:1.05;
}
.vistary-legacy-field-agent span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#aeece6;
  font-size:7px;
  line-height:1.05;
}
.vistary-legacy-field-agent.right{
  border-color:rgba(255,212,122,.44);
  color:#ffe8aa;
}
.vistary-legacy-field-agent.right span{
  color:#ffe8aa;
}
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"] .labelPill,
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"] .labelAgent,
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"] .labelTiny{
  opacity:0;
}
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"].visitingLabel .labelPill,
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"].visitingLabel .labelAgent,
body.vistary-legacy-quest #labelsLayer .labelGroup[data-id^="T"].visitingLabel .labelTiny{
  opacity:1;
}
@media (max-width:899px){
  body.vistary-legacy-quest .vistary-quest-panel{
    top:auto;
    left:8px;
    right:8px;
    bottom:calc(var(--bottom-nav-h, 72px) + 8px);
    width:auto;
    max-height:232px;
  }
  .vistary-legacy-field-agents{
    z-index:17;
  }
  .vistary-legacy-field-agent{
    min-height:40px;
  }
}
.vistary-start-form{
  width:100%;
  display:grid;
  gap:7px;
  border:1px solid rgba(255,212,122,.22);
  border-radius:8px;
  padding:9px;
  background:rgba(48,36,14,.18);
}
.vistary-start-form h3{
  margin:0;
  color:#ffd47a;
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
}
.vistary-template-actions{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  border:1px solid rgba(123,229,213,.18);
  border-radius:8px;
  padding:8px;
  background:rgba(2,18,26,.24);
}
.vistary-template-actions h3,
.vistary-template-note{
  grid-column:1/-1;
}
.vistary-template-actions h3{
  margin:0;
  color:#7be5d5;
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
}
.vistary-template-note{
  margin:0;
  color:#aeece6;
  font-size:10px;
  font-weight:700;
  line-height:1.4;
}
.vistary-form-control{
  width:100%;
  min-height:44px;
  border:1px solid rgba(123,229,213,.28);
  border-radius:8px;
  background:rgba(0,8,14,.74);
  color:#e8f6f4;
  padding:8px 9px;
  font:700 13px 'Noto Sans JP',system-ui,sans-serif;
  outline:none;
}
textarea.vistary-form-control{
  min-height:78px;
  resize:vertical;
}
select.vistary-form-control{
  appearance:auto;
}
.vistary-details{
  border:1px solid rgba(123,229,213,.20);
  border-radius:8px;
  padding:7px 8px;
  background:rgba(2,8,14,.38);
  color:#dffcf7;
  font:800 12px 'Noto Sans JP',system-ui,sans-serif;
}
.vistary-details summary{
  cursor:pointer;
  color:#ffd47a;
  font-weight:900;
}
.vistary-details select{
  margin-top:7px;
}
.vistary-agent-list{
  width:100%;
  display:grid;
  gap:4px;
  max-height:220px;
  overflow:auto;
  padding-right:2px;
}
.sheet-action.warn{
  border-color:rgba(255,212,122,.44);
  color:#ffe8aa;
  background:linear-gradient(180deg,rgba(90,66,18,.42),rgba(36,24,8,.68));
}
.sheet-action.danger{
  border-color:rgba(255,126,126,.50);
  color:#ffd4d4;
  background:linear-gradient(180deg,rgba(82,20,20,.44),rgba(32,8,10,.72));
}
body.vistary-map-ready .bottom-wrap .nav{
  display:none;
}
body.vistary-map-ready .bottom-wrap{
  min-height:calc(var(--mile-h) + env(safe-area-inset-bottom));
}
@media (max-width:420px){
  .vistary-zone-title{font-size:8.2px}
  .vistary-zone-sub{font-size:7px}
  .vistary-field-agent{font-size:10px}
  .vistary-template-actions{grid-template-columns:1fr}
}