/* One lightweight stone gateway for every route. No per-frame DOM or JS particle emitters. */
.transition-portal{--portal-accent:#a2deff;--portal-core:#367c93;--portal-stone:#94a8a5;--portal-crown:#c3d0c7}
.portal-theme-emerald{--portal-accent:#8ceab6;--portal-core:#347b5e}.portal-theme-violet{--portal-accent:#d5b3fa;--portal-core:#67518d}.portal-theme-gold{--portal-accent:#f8d395;--portal-core:#9b7547}
.portal-terrain-moss{--portal-stone:#718e7f;--portal-crown:#adbc9a}.portal-terrain-broken{--portal-stone:#7e8597;--portal-crown:#bcb9c9}.portal-terrain-dressed{--portal-stone:#a2aaa1;--portal-crown:#d4cdb2}
:is(.gate-panorama,.city-panorama,.valley-terrain) .transition-portal{position:absolute;z-index:10;display:block;width:156px;height:132px;max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;transform:translate(-50%,-50%);color:#f2f8f3;cursor:pointer;backdrop-filter:none;isolation:isolate}
:is(.gate-panorama,.city-panorama,.valley-terrain) .transition-portal:hover{background:transparent;box-shadow:none;transform:translate(-50%,-50%)}
.transition-portal:focus-visible{outline:2px solid var(--portal-accent);outline-offset:8px;border-radius:18px!important}
.transition-portal-art{position:absolute;inset:0;display:block;pointer-events:none}
.transition-portal-stone{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portal-stone-block{fill:var(--portal-stone);stroke:#4d6561;stroke-width:3}.portal-stone-crown{fill:var(--portal-crown);stroke:#596d69;stroke-width:2}.portal-stone-seams{fill:none;stroke:#4d655f;stroke-width:3}.portal-stone-base{fill:#63796e;stroke:var(--portal-crown);stroke-width:3}
.transition-portal-ring{position:absolute;left:50%;top:58%;width:64px;height:64px;display:grid;place-items:center;translate:-50% -50%;border:3px double var(--portal-accent);border-radius:50%;background:radial-gradient(circle,var(--portal-accent),var(--portal-core) 45%,#19313c 78%);box-shadow:inset 0 0 10px var(--portal-accent),0 0 14px var(--portal-accent);animation:transition-pulse 3s ease-in-out infinite alternate}
.transition-portal-ring::before{content:'';position:absolute;inset:-8px;border:2px dotted var(--portal-accent);border-radius:50%}
.transition-portal-runes{position:absolute;inset:-10px;display:grid;place-items:center;border:1px solid var(--portal-accent);border-radius:50%;font:11px Georgia,serif;color:var(--portal-accent);letter-spacing:5px;animation:transition-runes 18s linear infinite}
.transition-portal-sigil{font:700 25px Georgia,serif;color:#edfff5;text-shadow:0 0 6px var(--portal-accent)}
.transition-portal-particles{position:absolute;left:23%;right:23%;top:24%;bottom:9%;background:radial-gradient(circle at 10% 30%,var(--portal-accent) 0 1.5px,transparent 2px),radial-gradient(circle at 87% 15%,var(--portal-accent) 0 1px,transparent 2px),radial-gradient(circle at 82% 85%,var(--portal-accent) 0 1.5px,transparent 2px),radial-gradient(circle at 24% 73%,var(--portal-accent) 0 1px,transparent 2px);animation:transition-sparks 3.6s ease-in-out infinite alternate;pointer-events:none}
.transition-portal-copy{position:absolute;bottom:calc(100% + 3px);left:50%;translate:-50% 0;display:flex!important;flex-direction:column;gap:3px;width:184px;padding:7px 9px;border:1px solid var(--portal-accent);border-radius:8px;background:#1b333deF;color:#f2f8f3;text-align:center;opacity:1!important;visibility:visible!important;pointer-events:none;box-shadow:0 3px 8px #132a3255}
.transition-portal-copy strong{font:700 13px Georgia,serif}.transition-portal-copy small{display:block!important;font:10px/1.3 system-ui,sans-serif;color:#d1e2dc}
.transition-portal.portal-nearby .transition-portal-copy,.transition-portal:hover .transition-portal-copy{border-color:#fff3cb}
@keyframes transition-pulse{from{transform:scale(.96);opacity:.82}to{transform:scale(1.04);opacity:1}}
@keyframes transition-runes{to{transform:rotate(360deg)}}
@keyframes transition-sparks{from{transform:translateY(4px);opacity:.45}to{transform:translateY(-6px);opacity:1}}
@media(max-width:950px),(max-height:560px){
 :is(.gate-panorama,.city-panorama) .transition-portal{width:112px;height:96px}
 .gate-panorama .transition-portal-ring,.city-panorama .transition-portal-ring{width:44px;height:44px}
 .transition-portal-copy{width:148px;padding:5px 6px}.transition-portal-copy strong{font-size:11px}.transition-portal-copy small{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.transition-portal-ring,.transition-portal-runes,.transition-portal-particles{animation:none!important}}

.gate-panorama .transition-portal-copy{bottom:78%}
/* Keep the road-home arch inside short landscape viewports at its original 87% anchor. */
@media(max-height:460px){.gate-panorama .transition-portal{width:min(112px,28vh);height:min(96px,24vh)}}