/* A window onto the expedition, within the persistent game frame. */
html:has(body.perimeter-view-open){overflow:hidden;scrollbar-gutter:auto}
body.perimeter-view-open .main-content{visibility:hidden}
#perimeter-view{position:fixed;right:0;z-index:80;padding:0;background:#0b1922;color:#ecf1e9;isolation:isolate}
#perimeter-view.is-obscured{visibility:hidden;pointer-events:none}
.perimeter-window{position:relative;width:100%;height:100%;min-height:180px;overflow:hidden;border:0;border-radius:0;background:#122e3b;box-shadow:0 18px 60px #0005}
.perimeter-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.perimeter-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05131bba,transparent 30%,transparent 58%,#041119d9),linear-gradient(90deg,#06121840,transparent 45%,#06121820)}
#perimeter-view.is-near-death .perimeter-vignette{animation:perimeter-danger-pulse .9s ease-in-out infinite alternate}
@keyframes perimeter-danger-pulse{to{box-shadow:inset 0 0 105px 24px #c52735a8;background-color:#8d182c48}}
@media(prefers-reduced-motion:reduce){#perimeter-view.is-near-death .perimeter-vignette{animation:none;box-shadow:inset 0 0 75px #b5263e88}}
.perimeter-loot-bubble{position:absolute;z-index:3;display:grid;place-items:center;width:80px;height:80px;min-width:0;min-height:0;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:perimeter-loot-rise .45s cubic-bezier(.2,1.3,.4,1) both,perimeter-loot-float 2.2s .45s ease-in-out infinite}
.perimeter-loot-bubble .loot-bubble-shell,.perimeter-loot-bubble .loot-bubble-burst{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.perimeter-loot-bubble .item-icon{position:relative;width:44px;height:44px;pointer-events:none;filter:drop-shadow(0 2px 2px #06182399)}
.perimeter-loot-bubble .loot-bubble-burst{opacity:0;inset:-35%;width:170%;height:170%}
.perimeter-loot-bubble.is-popped{animation:none;pointer-events:none}
.perimeter-loot-bubble.is-popped .loot-bubble-shell{opacity:0;transition:opacity .06s}
.perimeter-loot-bubble.is-popped .item-icon{animation:perimeter-loot-item-pop .2s ease-out forwards}
.perimeter-loot-bubble.is-popped .loot-bubble-burst{animation:perimeter-loot-pop .4s ease-out forwards}
@keyframes perimeter-loot-rise{from{opacity:0;transform:translateY(18px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes perimeter-loot-float{50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes perimeter-loot-item-pop{to{opacity:0;transform:scale(.5)}}
@keyframes perimeter-loot-pop{0%{opacity:1;transform:scale(.75)}65%{opacity:.7}100%{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){.perimeter-loot-bubble{animation:none}.perimeter-loot-bubble.is-popped{opacity:0}.perimeter-loot-bubble.is-popped :is(.item-icon,.loot-bubble-burst){animation:none}}

.perimeter-heading{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:32px 34px;pointer-events:none}
.perimeter-eyebrow{display:flex;align-items:center;gap:8px;color:#b6d7c9;font-size:9px;font-weight:700;letter-spacing:2.5px}
.perimeter-eyebrow>i{width:5px;height:5px;border-radius:50%;background:#9cedc4;box-shadow:0 0 10px #8debb473}
.perimeter-heading h1{font-family:Georgia,serif;font-size:clamp(28px,3.4vw,48px);font-weight:500;line-height:1.1;letter-spacing:-1px;color:#fff0ca;margin:11px 0 10px;text-shadow:0 2px 14px #0008}
.perimeter-tier{font-size:11px;color:#c1d3d7;letter-spacing:.5px}
.perimeter-close{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:12px;min-height:42px;padding:10px 15px;border-radius:8px;background:#0c202bc9;border:1px solid #819aa26b;color:#edf3ec;font-size:11px;font-weight:600;backdrop-filter:blur(10px)}
.perimeter-close:hover{background:#203b46;border-color:#b4c7cc}
.perimeter-heading-actions{display:flex;align-items:flex-start;gap:8px;pointer-events:auto}
.perimeter-run{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 13px;border:1px solid #e68585;border-radius:8px;background:#672e37e8;color:#ffe8e4;font-weight:800;white-space:nowrap;backdrop-filter:blur(10px)}
.perimeter-run:hover{background:#82343f}
.perimeter-run{border:0;background:#9a4048;color:#fff0e9;box-shadow:none;backdrop-filter:none;gap:8px;font-size:11px;letter-spacing:.035em;border-radius:10px}
.perimeter-run svg{width:22px;height:22px;flex:none}
.perimeter-run:focus-visible{outline:2px solid #ffaaaa;outline-offset:3px}
.perimeter-bottom>.perimeter-run{display:flex;width:max-content;max-width:100%;min-height:42px;margin:0 0 10px auto;padding:9px 13px;font-size:11px}
.perimeter-close:focus-visible{outline:2px solid #ffcf5c;outline-offset:3px}
.perimeter-bottom{position:absolute;left:34px;right:34px;bottom:22px;max-width:520px;margin:auto}
.perimeter-readout{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center;padding:17px 20px 15px;border:1px solid #8bafa22e;border-radius:10px;background:#0b202be3;backdrop-filter:blur(14px);box-shadow:0 8px 30px #0003}
.perimeter-step{display:flex;gap:14px;align-items:center;min-width:0}
.perimeter-step>div{display:grid;gap:5px}
.perimeter-phase{font-size:12px;color:#e4eadf;font-weight:600}
.perimeter-round{font-size:10px;color:#91adb6;font-weight:400;font-variant-numeric:tabular-nums}
.perimeter-walking{display:flex;align-items:center;gap:3px;height:22px;flex-shrink:0}
.perimeter-walking i{width:3px;height:13px;border-radius:2px;background:#92ccb3;animation:perimeter-steps 1.4s ease-in-out infinite alternate}
.perimeter-walking i:nth-child(2){height:21px;animation-delay:-.6s}.perimeter-walking i:nth-child(3){animation-delay:-1s}
.perimeter-timer{display:grid;text-align:right;gap:4px;white-space:nowrap}
.perimeter-timer strong{font-size:18px;font-weight:500;color:#e9eedf;font-variant-numeric:tabular-nums}
.perimeter-timer>span{font-size:9px;color:#91adb6}
.perimeter-progress{height:3px;border-radius:2px;overflow:hidden;background:#314752;grid-column:1/-1}
.perimeter-progress i{display:block;width:100%;height:100%;transform-origin:left;background:#9edbc0;transition:transform .25s linear}
.perimeter-explanation{font-size:10px;line-height:1.6;text-align:center;margin:11px 0 0;color:#bbcbd0;text-shadow:0 1px 8px #000}
.is-paused .perimeter-walking i{animation-play-state:paused;background:#ffd05b}
body.perimeter-view-open #objective-pointer-layer,body.perimeter-view-open #objective-notice,body.perimeter-view-open #opening-tour-host{visibility:hidden}
.activity-bar .activity-symbol.expedition-watch{position:relative;padding:0;cursor:pointer;overflow:visible;border:1px solid #547682;border-radius:7px;background:#17323d}
.expedition-watch:after{content:'';position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border:1px solid #709aa4;border-radius:50%;background:#142d37}
.expedition-watch:before{content:'';position:absolute;z-index:1;right:1px;bottom:1px;border-left:5px solid #b9e3d3;border-top:3px solid transparent;border-bottom:3px solid transparent}
.expedition-watch:focus-visible{outline:2px solid #ffcf5c;outline-offset:3px}
@keyframes perimeter-steps{from{transform:scaleY(.5);opacity:.6}to{transform:scaleY(1);opacity:1}}
@media(max-width:800px){
 #perimeter-view{padding:0}
 .perimeter-window{border:0;border-radius:0}
 .perimeter-heading{padding:24px 20px}
 .perimeter-heading h1{font-size:33px;letter-spacing:-.7px}
 .perimeter-eyebrow{font-size:8px;letter-spacing:1.8px}
 .perimeter-close{padding:10px;min-width:44px;min-height:44px;background:#0c202bd9}
 .perimeter-close>span{display:none}
 .perimeter-bottom{left:16px;right:16px;bottom:17px}
 .perimeter-readout{padding:14px;gap:13px}
 .perimeter-step{gap:10px}.perimeter-phase{font-size:11px}.perimeter-timer strong{font-size:17px}
 .perimeter-explanation{max-width:255px;margin:10px auto 0;font-size:10px}
}
@media(max-height:520px){.perimeter-heading{padding:12px 18px}.perimeter-heading h1{font-size:24px;margin:0 0 6px}.perimeter-bottom{bottom:9px}.perimeter-readout{padding:8px 12px;gap:6px}.perimeter-explanation{max-width:none;margin-top:5px}.perimeter-eyebrow,.perimeter-round{display:none}.perimeter-timer strong{font-size:15px}.perimeter-phase{font-size:10px}.perimeter-progress{height:2px}}
@media(prefers-reduced-motion:reduce){.perimeter-walking i{animation:none}.perimeter-progress i{transition:none}}
body.reduce-motion .perimeter-walking i{animation:none}body.reduce-motion .perimeter-progress i{transition:none}
body.perimeter-view-open:has(.activity-bar) .perimeter-heading{top:62px}body.perimeter-view-open .mobile-player-name{visibility:hidden}

/* A real damage receipt produces one brief camera scratch, over the scene only. */
.perimeter-damage{position:fixed;z-index:81;overflow:hidden;pointer-events:none;user-select:none;contain:layout paint;isolation:isolate}
.perimeter-damage-art{position:absolute;left:var(--scratch-x,50%);top:var(--scratch-y,50%);width:var(--scratch-size,76%);height:var(--scratch-size,76%);object-fit:contain;max-width:none;pointer-events:none;opacity:0;transform-origin:center;animation:perimeter-scratch-hit 680ms ease-out both;will-change:transform,opacity;filter:drop-shadow(0 2px 1px #25060555)}
@keyframes perimeter-scratch-hit{
 0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--scratch-rotation,0deg)) scale(var(--scratch-flip,1),.84)}
 12%{opacity:.96;transform:translate(-50%,-50%) rotate(var(--scratch-rotation,0deg)) scale(var(--scratch-flip,1),1.025)}
 32%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--scratch-rotation,0deg)) scale(var(--scratch-flip,1),1)}
 100%{opacity:0;transform:translate(-50%,-48%) rotate(var(--scratch-rotation,0deg)) scale(var(--scratch-flip,1),1.02)}
}
.perimeter-damage[data-reduced-motion="true"] .perimeter-damage-art{animation:none;opacity:.55;transform:translate(-50%,-50%) rotate(var(--scratch-rotation,0deg)) scaleX(var(--scratch-flip,1));will-change:auto}
@media(prefers-reduced-motion:reduce){.perimeter-damage-art{animation:none;opacity:.55;transform:translate(-50%,-50%) rotate(var(--scratch-rotation,0deg)) scaleX(var(--scratch-flip,1));will-change:auto}}
/* Tier colour lives at the edge and in the badge, leaving enemies readable. */
#perimeter-view .perimeter-window{border-color:var(--expedition-tier-color,#8cb7d6)}
#perimeter-view .perimeter-window::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,var(--expedition-tier-wash,#8cb7d628),transparent 25%,transparent 80%,var(--expedition-tier-wash,#8cb7d628));box-shadow:inset 0 3px var(--expedition-tier-color,#8cb7d6)}
#perimeter-view .perimeter-tier{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid var(--expedition-tier-color,#8cb7d6);border-radius:6px;background:#0b1727d9;color:var(--expedition-tier-color,#8cb7d6);font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
#perimeter-view .perimeter-progress i{background:var(--expedition-tier-color,#8cb7d6)}

.perimeter-health{max-width:420px;margin:0 auto 12px;padding:10px 14px;background:#10212de8;border:1px solid #496573;border-radius:12px}.perimeter-health[hidden]{display:none}.perimeter-health>span{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:7px}.perimeter-health [role]{height:10px;background:#38272a;border-radius:6px;overflow:hidden}.perimeter-health i{display:block;height:100%;background:#df7772;transition:width .3s ease}
#perimeter-view.is-defeated .perimeter-health i{transition:width 1.15s ease-in}
#perimeter-view.is-defeated .perimeter-window::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#9b28282b;animation:perimeter-fall 2.3s ease-out both}
@keyframes perimeter-fall{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#perimeter-view.is-defeated .perimeter-health i{transition:none}#perimeter-view.is-defeated .perimeter-window::before{animation:none}}

/* The defeat sheet replaces the expedition in the same frame; no character-page flash. */
body #modal .modal-backdrop:has(.opening-defeat){background:#091820!important;backdrop-filter:none!important;animation:none!important}
/* Item finds are inventory art alone, with a small collect motion. */
.perimeter-loot-bubble{width:76px;height:76px;border-radius:12px}
.perimeter-loot-bubble .item-icon{width:62px;height:62px;filter:drop-shadow(0 3px 5px #071016aa)}
.perimeter-loot-bubble.is-popped{animation:loot-retrieve .35s ease-in both;pointer-events:none}
.perimeter-loot-bubble.is-popped .item-icon{animation:none}
.perimeter-loot-bubble.is-fading{animation:loot-fade .4s ease-out both;pointer-events:none}
@keyframes loot-retrieve{25%{transform:scale(1.15)}100%{opacity:0;transform:translateY(26px) scale(.55)}}
@keyframes loot-fade{to{opacity:0;transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.perimeter-loot-bubble.is-popped,.perimeter-loot-bubble.is-fading{animation:none;opacity:0}}