/* A continuous climb through the eight mountain gates. The map nodes remain real buttons. */
.realm-dialog.player-dialog{
  width:min(1460px,calc(100vw - 24px));max-height:calc(100dvh - 20px);
  border:1px solid #c4a269;border-radius:9px;
  background:#071923;
  box-shadow:0 0 0 5px #071724,0 0 0 7px #a88a567d,0 28px 105px #000e,inset 0 0 0 5px #102534;
}
.realm-dialog .player-dialog-header{
  position:relative;display:flex;justify-content:center;align-items:center;
  min-height:140px;padding:14px 66px 13px;text-align:center;
  background:linear-gradient(180deg,#06141ce8,#081c27c8),url('./realm-ascent-map-v1.webp') center 17%/cover;
  border-bottom:1px solid #c3a366b7;
}
.realm-dialog .player-dialog-header::after{content:"◆";background:#0a1e2b}
.realm-dialog .player-dialog-header h2{
  margin:2px 0 1px;color:#ffe3a1;
  font:700 clamp(38px,5.5vw,68px)/1.17 var(--display);
  letter-spacing:.12em;text-shadow:0 4px 3px #1e130a,0 9px 23px #000,0 0 28px #c99b515f;
}
.realm-dialog .player-dialog-header .eyebrow{color:#dfc38d;letter-spacing:.22em;font-size:13px}
.realm-dialog .player-dialog-header p{margin:5px 0 0;color:#dfd1ad;font:17px/1.4 var(--display);letter-spacing:.14em}
.realm-dialog .player-dialog-close{position:absolute;right:27px;top:30px;z-index:2}
.realm-dialog .player-dialog-body{
  padding:12px clamp(14px,2.3vw,29px) 24px;
  background:linear-gradient(180deg,#0a1e2c,#071822 55%,#0a1d29);
}
.realm-dialog .realm-travel-summary{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:0 0 12px;color:#ead8af;font-size:14px;
}
.realm-dialog .realm-party-badge,.realm-dialog .realm-progress-badge{
  display:inline-flex;align-items:center;min-height:33px;padding:5px 15px;
  border:1px solid #b9986280;border-radius:3px;
  background:linear-gradient(115deg,#1d3039d9,#11232eaa);
  box-shadow:inset 0 0 0 2px #071a29;
  letter-spacing:.05em;
}
.realm-dialog .realm-travel-summary b{margin:0 3px;color:#ffe0a0;font-size:16px}
.realm-dialog .realm-mode-tabs{display:flex;justify-content:center;gap:11px;margin:0 0 14px}
.realm-dialog .realm-mode-tabs button{
  flex:0 1 220px;min-height:41px;padding:7px 17px;border:1px solid #a28b628f;
  border-radius:3px;background:linear-gradient(180deg,#1b2d3b,#101e2a);
  color:#dbc79e;font:700 15px/1.4 var(--display);letter-spacing:.07em;
  box-shadow:inset 0 0 0 2px #0a1c29;
}
.realm-dialog .realm-mode-tabs button[aria-pressed="true"]{
  border-color:#f3d58e;background:linear-gradient(155deg,#f2d58a,#b88b4c);
  color:#32200f;box-shadow:0 0 16px #ebbf6588,inset 0 0 0 2px #ffe2a6;
}
.realm-dialog .realm-ongoing{min-height:68px;margin:0 0 10px;padding:8px 14px}
.realm-dialog .realm-ongoing>div{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.realm-dialog .realm-ongoing b{margin:0;font-size:18px}
.realm-dialog .realm-ongoing button{min-height:39px}
.realm-dialog .realm-map-stage{
  position:relative;isolation:isolate;min-height:660px;overflow:hidden;
  border:1px solid #c1a069;border-radius:8px;
  background:url('./realm-ascent-map-v1.webp') center center/cover no-repeat,#102839;
  box-shadow:inset 0 0 0 5px #081a26,inset 0 0 0 6px #bb995d82,0 18px 36px #0009;
}
.realm-dialog .realm-map-stage::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#04121e68 0%,transparent 22%,transparent 47%,#03111b24 73%,#05131fd9 100%),linear-gradient(90deg,#03142153,transparent 29%,transparent 67%,#0618247d);
}
.realm-dialog .realm-map-stage::after{
  content:"";position:absolute;z-index:5;inset:11px;pointer-events:none;
  border:1px solid #dfbb7359;border-radius:3px;
}
.realm-dialog .realm-map-heading{
  position:absolute;z-index:4;left:30px;top:25px;max-width:42%;padding:7px 14px;
  border-left:2px solid #e9c078;
  color:#ffe1a2;background:linear-gradient(90deg,#061824e6,#06182400);
  text-shadow:0 2px 9px #000;
}
.realm-dialog .realm-map-heading span{font:700 24px/1.3 var(--display);letter-spacing:.12em}
.realm-dialog .realm-map-heading p{margin:3px 0 0;color:#f3e4c1;font-size:12px;line-height:1.5}
.realm-dialog .realm-route-line{
  position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 0 5px #fbd080);
}
.realm-dialog .realm-route-line path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.realm-dialog .realm-route-shadow{stroke:#102934a8;stroke-width:8}
.realm-dialog .realm-route-light{stroke:#f5d48fbd;stroke-width:2.4;stroke-dasharray:3 8}
.realm-dialog .realm-route-nodes{position:absolute;z-index:3;inset:0}
.realm-dialog .realm-route-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:128px;min-height:98px;padding:0;border:0;background:none;color:#f3deaa;
  transform:translate(-50%,-50%);cursor:pointer;text-shadow:0 2px 5px #000;
  transition:filter .18s ease,transform .18s ease;
}
.realm-dialog .realm-route-node:hover,.realm-dialog .realm-route-node:focus-visible{
  transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.25);outline:0;
}
.realm-dialog .realm-route-node.is-selected{filter:brightness(1.2)}
.realm-dialog .realm-route-number{
  position:absolute;top:-2px;left:24px;z-index:2;padding:2px 5px;border:1px solid #c4a469;
  border-radius:2px;background:#0c2631d9;color:#fbe0a5;font:12px/1 Georgia,serif;
}
.realm-dialog .realm-route-glyph{
  display:grid;place-items:center;width:57px;height:57px;border:2px solid #d6b775;
  border-radius:50%;background:radial-gradient(circle,#204452,#081d2ce8 73%);
  color:#f9e8b8;font:32px/1 var(--display);
  box-shadow:0 0 0 5px #0b2730c9,0 0 0 7px color-mix(in srgb,var(--realm-accent) 70%,#ba995e),0 0 21px 7px color-mix(in srgb,var(--realm-accent) 53%,transparent);
}
.realm-dialog .realm-route-node.is-cleared .realm-route-glyph,
.realm-dialog .realm-route-node.is-selected .realm-route-glyph{
  border-color:#ffe2a0;background:radial-gradient(circle,#8b6940,#18303a 75%);
  box-shadow:0 0 0 5px #0b2730c9,0 0 0 7px #e8bc71,0 0 31px 13px #efca7b9c;
}
.realm-dialog .realm-route-node.is-current .realm-route-number{border-color:#ffe6a4;background:#a87935;color:#221913}
.realm-dialog .realm-route-label{
  margin-top:8px;min-width:102px;max-width:126px;padding:3px 7px;
  border:1px solid #c6a57196;border-radius:2px;
  background:#071b29e6;color:#ffe8b4;
  font:700 16px/1.2 var(--display);white-space:nowrap;text-align:center;
  box-shadow:0 5px 13px #000a;
}
.realm-dialog .realm-step-1{left:8%;top:82%}
.realm-dialog .realm-step-2{left:24%;top:65%}
.realm-dialog .realm-step-3{left:43%;top:55%}
.realm-dialog .realm-step-4{left:60%;top:49%}
.realm-dialog .realm-step-5{left:55%;top:35%}
.realm-dialog .realm-step-6{left:68%;top:29%}
.realm-dialog .realm-step-7{left:84%;top:27%}
.realm-dialog .realm-step-8{left:79%;top:11%}
.realm-dialog .realm-selected-panel{
  position:absolute;z-index:4;right:25px;bottom:22px;
  width:clamp(305px,29%,378px);max-height:calc(100% - 155px);overflow:auto;
  scrollbar-color:#ba985e #0b2030;
}
.realm-dialog .realm-selected-panel .realm-card{
  padding:17px 16px 14px;border:1px solid #d8b273;border-radius:6px;
  background:linear-gradient(155deg,#102634f5,#081b2af5 76%);
  box-shadow:inset 0 0 0 3px #102532,inset 0 0 0 4px #a887528c,0 13px 26px #000c;
  color:#efdfbe;
}
.realm-dialog .realm-selected-panel .realm-card::before,.realm-dialog .realm-selected-panel .realm-card::after{border-color:#e5bf79}
.realm-dialog .realm-selected-panel .realm-gua{
  background:#152d38;color:#e4c47e;border-color:#c5a86f;
  box-shadow:0 0 13px color-mix(in srgb,var(--realm-accent) 45%,transparent);
}
.realm-dialog .realm-selected-panel .realm-card-heading h3{color:#f8dfaa;font-size:26px}
.realm-dialog .realm-selected-panel .realm-card-heading>div{flex:1;min-width:0}
.realm-dialog .realm-selected-panel .realm-card-heading h3{font-size:22px;letter-spacing:0;white-space:nowrap}
.realm-dialog .realm-selected-panel .realm-element{font-size:10px;padding:3px 5px}
.realm-dialog .realm-selected-panel .realm-card-heading small{color:#d0ba91}
.realm-dialog .realm-selected-panel .realm-element{color:#ebd09b;border-color:#bd9b66}
.realm-dialog .realm-selected-panel .realm-description{margin:11px 0 12px;color:#d7c9ae;font-size:13px;line-height:1.7}
.realm-dialog .realm-selected-panel .realm-card-state{color:#dcc9a1;border-top-color:#b69b6777}
.realm-dialog .realm-selected-panel .realm-card-state .realm-counter{color:#f0a886}
.realm-dialog .realm-selected-panel .realm-details{color:#d4c2a0}
.realm-dialog .realm-selected-panel .realm-details summary{color:#f2d28f}
.realm-dialog .realm-selected-panel .realm-start{
  min-height:47px;margin-top:8px;border:1px solid #e7c788;
  background:linear-gradient(135deg,#d8ad63,#8e693a);color:#201b15;
  box-shadow:inset 0 1px #fff0b5a1,0 0 13px #d2a65a4e;
}
.realm-dialog .realm-selected-panel .realm-start:hover{background:linear-gradient(135deg,#f1d48c,#b58847)}
.realm-dialog .realm-selected-panel .realm-start:disabled{opacity:.65;color:#e7d1a5;background:#30383b}
.realm-dialog .realm-route-index{
  margin:18px 0 0;padding:18px 15px 15px;border:1px solid #b59a6a7d;border-radius:5px;
  background:linear-gradient(180deg,#142a37c7,#0b202ddc);
  box-shadow:inset 0 0 0 3px #081c29;
}
.realm-dialog .realm-route-index h3{margin:0 0 15px;color:#f3d593;font:700 26px/1.25 var(--display)}
.realm-dialog .realm-route-index h3 small{margin-left:15px;color:#c6b28c;font:13px/1.4 var(--body)}
.realm-dialog .realm-step-links{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.realm-dialog .realm-step-link{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:0;min-height:86px;padding:10px 11px;
  border:1px solid #8e79559c;border-radius:3px;
  background:linear-gradient(160deg,#1a3441,#102632);color:#dcc9a0;text-align:left;cursor:pointer;
}
.realm-dialog .realm-step-link:hover,.realm-dialog .realm-step-link:focus-visible{border-color:#f4d88f;outline:0;background:#284351}
.realm-dialog .realm-step-link.is-selected{border-color:#f2d18c;background:linear-gradient(160deg,#645034,#253c43);box-shadow:0 0 14px #d4ab6070}
.realm-dialog .realm-step-link.is-cleared::after{content:"✓";position:absolute;right:8px;top:6px;color:#f6d685}
.realm-dialog .realm-step-link>span{font:12px Georgia,serif;color:#e7c583}
.realm-dialog .realm-step-link b{font:700 clamp(14px,1.3vw,18px)/1.2 var(--display);overflow-wrap:anywhere}
.realm-dialog .realm-step-link small{color:#bda985;font-size:11px;white-space:nowrap}
.realm-dialog .realm-footer-note{margin:15px 0 0;text-align:center;color:#cdb78c}
.realm-dialog .realm-expedition-settings{margin:0 0 14px;background:#112a38cf}
@media(max-width:1200px){
  .realm-dialog .realm-step-links{grid-template-columns:repeat(4,minmax(0,1fr))}
  .realm-dialog .realm-map-stage{min-height:610px}
  .realm-dialog .realm-route-node{width:105px}
  .realm-dialog .realm-route-label{font-size:14px;min-width:85px}
}
@media(max-width:760px){
  .realm-dialog.player-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}
  .realm-dialog .player-dialog-header{min-height:113px;padding:17px 40px 13px}
  .realm-dialog .player-dialog-header h2{font-size:clamp(27px,6vw,38px);letter-spacing:.03em;white-space:nowrap}
  .realm-dialog .player-dialog-header p{font-size:12px}
  .realm-dialog .player-dialog-header .eyebrow{font-size:10px}
  .realm-dialog .player-dialog-close{right:9px;top:10px;width:31px;height:31px}
  .realm-dialog .player-dialog-body{padding:12px 10px 18px}
  .realm-dialog .realm-travel-summary{gap:5px;font-size:11px}
  .realm-dialog .realm-party-badge,.realm-dialog .realm-progress-badge{padding:4px 7px}
  .realm-dialog .realm-travel-summary b{font-size:12px}
  .realm-dialog .realm-mode-tabs{gap:5px}
  .realm-dialog .realm-mode-tabs button{font-size:12px;padding:6px 5px;min-height:39px}
  .realm-dialog .realm-map-stage{min-height:0;height:auto;padding-top:56%;background-size:100% auto;background-position:center top;background-repeat:no-repeat}
  .realm-dialog .realm-map-stage::before{background:linear-gradient(180deg,#06182450 0%,#071a28c2 48%,#071a28 62%)}
  .realm-dialog .realm-map-heading{left:10px;top:8px;max-width:78%;padding:4px 7px}
  .realm-dialog .realm-map-heading span{font-size:15px}
  .realm-dialog .realm-map-heading p{display:none}
  .realm-dialog .realm-route-line,.realm-dialog .realm-route-nodes{display:none}
  .realm-dialog .realm-selected-panel{position:relative;right:auto;bottom:auto;width:auto;max-height:none;overflow:visible;margin:0 9px 11px}
  .realm-dialog .realm-route-index{padding:14px 10px}
  .realm-dialog .realm-route-index h3{font-size:22px}
  .realm-dialog .realm-route-index h3 small{display:block;margin:3px 0 0}
  .realm-dialog .realm-step-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .realm-dialog .realm-step-link{min-height:72px}
}
@media(prefers-reduced-motion:no-preference){
  .realm-dialog .realm-route-node.is-selected .realm-route-glyph{animation:realmWaypointGlow 2.8s ease-in-out infinite alternate}
  .realm-dialog .realm-route-light{animation:realmPathTravel 22s linear infinite}
  @keyframes realmWaypointGlow{to{filter:brightness(1.25);box-shadow:0 0 0 5px #0b2730c9,0 0 0 7px #ffe0a0,0 0 36px 18px #efca7bc2}}
  @keyframes realmPathTravel{to{stroke-dashoffset:-220}}
}