/* Phase 5.3 — 3つの地区（CONNECT / LIFE / CULTURE）・地区ナビ・LINE BUILDING・CULTUREのスポット */
#world{transition:transform .5s cubic-bezier(.6,.05,.3,1),opacity .25s,translate .4s cubic-bezier(.22,.8,.3,1)}
#world.dinstant{transition:transform .5s cubic-bezier(.6,.05,.3,1),opacity .25s,translate 0s}
#stage{touch-action:pan-y}
.dist{position:absolute;top:0;height:100%;width:100%;pointer-events:none}
.dist>*{pointer-events:auto}
.dist .ground{inset:0}
.dist.far{visibility:hidden}
.dist.idle *{animation-play-state:paused!important}
.dist .bld{width:27%}
.dist .bld.dsp{cursor:pointer}
.dist .bld.closed .body{filter:grayscale(.6) brightness(.95)}
/* ---- 見出し看板 ---- */
.bboard{position:absolute;transform:translateX(-50%);padding:6px 16px 7px;border-radius:10px;background:linear-gradient(#fff,#eef3fb);box-shadow:0 0 0 2px #d5deef,0 5px 0 rgba(35,38,82,.12);text-align:center;font-weight:900;font-size:15px;letter-spacing:.06em;color:#232652;white-space:nowrap;z-index:2}
.bboard b{color:#2f6fdd}.bboard.cul b{color:#e0457b}
.bboard small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#6b7691;margin-top:1px}
/* ---- CONNECT: LINE / LINE Apps / MEDIA ---- */
.f-line .body{background:linear-gradient(#e2f8ea,#bfeccf)}.f-lineapps .body{background:linear-gradient(#e6f0ff,#c7dbfb)}.f-media .body{background:linear-gradient(#efe8fb,#d9cdf1)}
.f-line .lbub{position:absolute;left:18%;right:18%;top:20%;height:34%;border-radius:12px;background:#06c755;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.f-line .lbub::after{content:"";position:absolute;left:22%;bottom:-6px;border:6px solid transparent;border-top-color:#06c755;border-bottom:0}
.f-line .lbub::before{content:"…";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 14px/1 system-ui;letter-spacing:2px}
.f-line .lbar,.f-lineapps .appg{position:absolute;left:10%;right:10%;bottom:30%;height:6px;border-radius:3px;background:rgba(6,199,85,.35)}
.f-lineapps .appg{height:18px;background:radial-gradient(circle at 12% 50%,#2f6fdd 0 4px,transparent 5px),radial-gradient(circle at 37% 50%,#06c755 0 4px,transparent 5px),radial-gradient(circle at 62% 50%,#f2a31b 0 4px,transparent 5px),radial-gradient(circle at 87% 50%,#e0457b 0 4px,transparent 5px)}
.f-media .shut{position:absolute;left:12%;right:12%;top:30%;bottom:22%;border-radius:3px;background:repeating-linear-gradient(0deg,#b9b2cf 0 4px,#cfc9e0 4px 8px);opacity:.9}
.f-media .mscreen{position:absolute;left:30%;right:30%;top:14%;height:12%;border-radius:2px;background:#6b5bc4;opacity:.65}
.soonrib,.linkrib{position:absolute;left:50%;top:-8px;transform:translateX(-50%) rotate(-3deg);padding:1px 8px;border-radius:999px;font:800 9.5px/1.5 system-ui;color:#fff;background:#8a93ab;z-index:7;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.14)}
.linkrib{background:#2f6fdd;padding:1px 7px}
.lot{position:absolute;width:24%;height:56px;transform:translateX(-50%);border-radius:6px;background:repeating-linear-gradient(45deg,#e4e8f1 0 8px,#eef1f7 8px 16px);box-shadow:inset 0 0 0 2px #c9d1e3;cursor:pointer;display:grid;place-items:center}
.lot b{font:900 9px/1.15 system-ui;letter-spacing:.08em;color:#8a93ab;text-align:center;background:#fff;padding:2px 6px;border-radius:4px}
.lot .fence{position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,#f2a31b 0 8px,#fff 8px 16px);opacity:.9;border-radius:3px 3px 0 0}
.lot .cone{position:absolute;bottom:-3px;width:9px;height:11px;background:#ff7a2b;clip-path:polygon(50% 0,100% 100%,0 100%)}.lot .c1{left:8%}.lot .c2{right:8%}
.kiosk{position:absolute;width:30px;height:36px;margin:-18px 0 0 -15px;border-radius:8px 8px 4px 4px;background:linear-gradient(#fff,#dce6f7);box-shadow:0 0 0 2px #c5d3ec,0 4px 0 rgba(35,38,82,.14)}
.kiosk b{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#2f6fdd;color:#fff;font:900 12px/18px system-ui;text-align:center}
.wifi{position:absolute;font-style:normal;font-size:14px;transform:translate(-50%,-30px);animation:wifiP 2.4s ease-in-out infinite}
@keyframes wifiP{50%{transform:translate(-50%,-34px);opacity:.7}}
/* ---- CULTURE ---- */
.f-dance .body{background:linear-gradient(#ffe2ec,#ffc3d6)}.f-roof .body{background:linear-gradient(#e6e1fb,#cfc7f2)}.f-popup .body{background:linear-gradient(#fff0cf,#ffdca0)}.f-photo .body{background:linear-gradient(#d9f2ee,#b8e6df)}
.f-dance .mirrors{position:absolute;left:10%;right:10%;top:26%;bottom:24%;background:linear-gradient(115deg,rgba(255,255,255,.85) 0 30%,rgba(190,215,255,.7) 30% 34%,rgba(255,255,255,.85) 34% 62%,rgba(190,215,255,.7) 62% 66%,rgba(255,255,255,.85) 66%);border-radius:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.f-dance .spk{position:absolute;bottom:-5px;width:12px;height:16px;border-radius:3px;background:#2b2d3a;box-shadow:inset 0 0 0 2px #444}.f-dance .sp1{left:-8px}.f-dance .sp2{right:-8px}
.f-dance .spk::after{content:"";position:absolute;left:3px;top:4px;width:6px;height:6px;border-radius:50%;background:#555;animation:spkB .5s ease-in-out infinite alternate}
@keyframes spkB{to{transform:scale(1.35)}}
.f-roof .vol{transform:translateY(-6px)}
.f-roof .rtg{position:absolute;left:-4px;right:-4px;top:-18px;height:11px;border-radius:5px;background:linear-gradient(#a8dba0,#6dbf6b);box-shadow:0 2px 0 rgba(0,0,0,.12);z-index:5}
.f-roof .rtl{position:absolute;left:0;right:0;top:-8px;height:3px;background:radial-gradient(circle,#ffd37a 0 1.6px,transparent 2px) 0 0/10px 3px;z-index:6;animation:rtB 2s ease-in-out infinite alternate}
@keyframes rtB{to{opacity:.55}}
.f-popup .tent{position:absolute;bottom:18%;width:26%;height:34%;border-radius:4px 4px 0 0;background:repeating-linear-gradient(90deg,#ff7a8a 0 5px,#fff 5px 10px)}.f-popup .t1{left:8%}.f-popup .t2{left:37%;background:repeating-linear-gradient(90deg,#4aa3ff 0 5px,#fff 5px 10px)}.f-popup .t3{right:8%;background:repeating-linear-gradient(90deg,#ffc84a 0 5px,#fff 5px 10px)}
.f-photo .pframe{position:absolute;left:24%;right:24%;top:20%;bottom:26%;border:5px solid #fff;border-radius:4px;box-shadow:0 0 0 2px #7fc7bd,inset 0 0 0 2px #cfeae6;background:linear-gradient(135deg,#ffd1e0,#bfe3ff)}
.f-photo .plight{position:absolute;right:-8px;top:10%;width:8px;height:8px;border-radius:50%;background:#fff6c4;box-shadow:0 0 10px 4px rgba(255,236,160,.8);animation:rtB 1.6s ease-in-out infinite alternate}
.spotpl{position:absolute;transform:translate(-50%,-50%);cursor:pointer;width:84px;height:60px}
.spotpl .nm{position:absolute;left:50%;top:100%;transform:translate(-50%,2px);font:800 9px/1.4 system-ui;padding:0 7px;border-radius:3px;color:#fff;white-space:nowrap}
.spotpl.plaza{width:30%;height:90px}.spotpl.plaza .nm{background:#3b82f6}.spotpl.water{width:70%;height:36px}.spotpl.water .nm{background:#2f86b3}
.cplaza .blk-in{background:repeating-conic-gradient(#dfe8fb 0 25%,#eef3fd 0 50%) 0 0/22px 22px}
.spotpl .ramp{position:absolute;left:6%;bottom:12%;width:48%;height:30px;background:linear-gradient(160deg,#cfd6e6 0 55%,#9aa5bf 55%);border-radius:2px 14px 3px 3px;clip-path:polygon(0 100%,0 40%,60% 40%,100% 100%)}
.spotpl .graf{position:absolute;right:4%;top:-6px;width:36%;height:44px;border-radius:3px;background:linear-gradient(135deg,#ff77aa,#7e57c2 45%,#2dd4bf);box-shadow:0 0 0 2px #fff,0 4px 0 rgba(35,38,82,.16);opacity:.92}
.spotpl .gspk{position:absolute;left:58%;bottom:8%;width:10px;height:14px;border-radius:2px;background:#2b2d3a}
.spotpl .bw{position:absolute;left:0;right:0;top:18px;height:14px;border-radius:3px;background:repeating-linear-gradient(90deg,#c79c6e 0 12px,#b78a5d 12px 13px);box-shadow:0 3px 0 rgba(35,38,82,.16)}
.spotpl .rail{position:absolute;left:0;right:0;top:12px;height:8px;border-top:2px solid #fff;background:repeating-linear-gradient(90deg,transparent 0 10px,#fff 10px 12px)}
.spotpl .boat{position:absolute;left:18%;top:36px;font-size:16px;animation:boatB 3.4s ease-in-out infinite alternate}
@keyframes boatB{to{transform:translate(8px,2px) rotate(3deg)}}
.spotpl .wl{position:absolute;top:10px;width:5px;height:5px;border-radius:50%;background:#ffd37a;box-shadow:0 0 6px 2px rgba(255,211,122,.7);opacity:0}.l1{left:14%}.l2{left:50%}.l3{left:86%}
body[data-tone=night] .spotpl .wl,body[data-tone=dusk] .spotpl .wl,body[data-tone=late] .spotpl .wl{opacity:1}
.neonlamp{position:absolute;width:3px;height:22px;margin:-22px 0 0 -1.5px;background:#9aa5bf;border-radius:2px}
.neonlamp::after{content:"";position:absolute;left:-5px;top:-3px;width:13px;height:5px;border-radius:3px;background:#ff77aa;box-shadow:0 0 calc(7px*var(--neon,1)) 1px rgba(255,119,170,.8)}
/* ---- ナビ ---- */
.dnav{position:absolute;inset:0;pointer-events:none;z-index:30}
.dnav>*{pointer-events:auto}
.dedge{position:absolute;top:44%;width:34px;height:64px;border:0;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(35,38,82,.08),0 4px 14px rgba(35,38,82,.16);color:#232652;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:transform .12s}
.dedge.l{left:4px}.dedge.r{right:4px}
.dedge:active{transform:scale(.97)}
.dedge i{font:900 22px/1 system-ui;font-style:normal;opacity:.85}
.dedge small{font:800 7.5px/1 system-ui;letter-spacing:.04em;color:#2f6fdd}
.ddots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(35,38,82,.14)}
.ddots i{display:block;width:8px;height:8px;border-radius:50%;background:#c3cbdd;transition:all .25s;cursor:pointer;position:relative}
.ddots i::after{content:"";position:absolute;inset:-10px}
.ddots i.on{background:#2f6fdd;transform:scale(1.25)}
.dtitle{position:absolute;left:50%;top:14%;transform:translate(-50%,-6px);padding:8px 18px;border-radius:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 22px rgba(35,38,82,.2);text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.dtitle.show{opacity:1;transform:translate(-50%,0)}
.dtitle b{display:block;font:900 20px/1.1 system-ui;letter-spacing:.14em;color:#232652}
.dtitle span{display:block;font:700 11px/1.4 system-ui;color:#5b6684;margin-top:2px}
.actor.nbr .bub,.actor.nbr .tag{display:none}
.spw{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.spc{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;padding:6px 8px;border-radius:12px;background:#f3f6fd;border:0;font-weight:800;font-size:13px}
.spc .fig.sm{position:relative;width:44px;height:62px;transform:scale(.9)}
.map.dnc:not(.cam){scale:1.055!important;transition:none!important}
.soonrib{top:auto!important;bottom:-9px}
.dist.settled.idle{content-visibility:hidden;contain:strict}