/* Sigils Road screen (sigil-road.js). Base component rules followed by the approved
   painted-landscape and bronze-plaque presentation overrides. */
.sigil-road{position:fixed;inset:0;z-index:60;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;display:flex;flex-direction:column;
 color:var(--wr-text,#eef1fb);font-family:var(--wr-font-body,'Rubik',system-ui,sans-serif);
 background:radial-gradient(120% 60% at 50% 0%,#3a4470 0%,#232a46 45%,#141a2c 100%)}
.sigil-road:not([open]){display:none}
.sigil-road::backdrop{background:#05060ccc}
.sigil-road>*{width:100%;max-width:560px;margin-inline:auto;box-sizing:border-box}

/* Header: back, plaque, total */
.sr-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 16px 6px}
.sr-back{width:44px;height:44px;display:grid;place-items:center;padding:0 0 3px;border:1px solid #c9a65a;border-radius:12px;cursor:pointer;
 background:linear-gradient(180deg,#343d60,#1d2338);box-shadow:inset 0 1px 0 #ffffff2e,0 3px 0 #0b0e1c,0 6px 12px #0007;color:#ffeaa6;font:800 30px/1 var(--wr-font-display,'Rubik',sans-serif)}
.sr-back:hover{filter:brightness(1.12)}
.sr-back:focus-visible{outline:2px solid #ffcf4d;outline-offset:2px}
.sr-title{margin:0!important;justify-self:center;max-width:100%;font-size:18px!important;white-space:nowrap}
.sr-total{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border:1px solid #c9a65a;border-radius:22px;background:linear-gradient(180deg,#2b3350,#1d2338);box-shadow:inset 0 1px 0 #ffffff24,0 4px 10px #0007}
.sr-total b{font:800 20px/1 var(--wr-font-display,'Rubik',sans-serif);color:#ffcf4d;text-shadow:0 1px 0 #10142a}
.sr-total small{font-size:11px;color:#b9c0d6}
.sr-hex-icon{display:inline-block;flex:none;width:28px;height:28px;background:url(assets/ui/sigils.svg?v=152deb543cf34574) center/contain no-repeat;filter:drop-shadow(0 2px 2px #0009)}

/* Next milestone and how to earn */
.sr-info{padding:2px 16px 8px}
.sr-next{padding:10px 12px;border:1px solid #c9a65a66;border-radius:12px;background:linear-gradient(180deg,#2b3350e6,#1d2338e6);box-shadow:inset 0 1px 0 #ffffff1f,0 6px 16px #0006}
.sr-next__text{margin:0 0 8px;font-size:14px;line-height:1.3;color:#d9deee}
.sr-next__text strong{color:#ffcf4d}
.sr-bar{position:relative;height:16px;border-radius:8px;background:#0d0f19;box-shadow:inset 0 1px 3px #000}
.sr-bar i{position:absolute;left:0;top:0;bottom:0;min-width:8px;border-radius:8px;background:linear-gradient(180deg,#fff1b3,#f1c158 45%,#c8861c)}
.sr-bar em{position:absolute;inset:0;display:grid;place-items:center;font:800 11px/1 var(--wr-font-body,'Rubik',sans-serif);font-style:normal;color:#fff;text-shadow:0 0 3px #000,0 1px 1px #000,0 0 1px #000}
.sr-how{margin:8px 2px 0;font-size:12px;line-height:1.4;color:#aab2c8}

/* Scrolling road */
.sr-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 16px max(12px,env(safe-area-inset-bottom));scroll-behavior:auto;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.sr-body{position:relative;width:100%}
.sr-path{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.sr-path path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sr-path__edge{stroke:#0b0e1c;stroke-width:24}
.sr-path__road{stroke:#5b4a35;stroke-width:17}
.sr-path__dash{stroke:#c9a65a55;stroke-width:2.5;stroke-dasharray:3 11}
.sr-path__done{stroke:#ffcf4d;stroke-width:7;filter:drop-shadow(0 0 5px #ffb43a99)}
.sr-start{position:absolute;transform:translate(-50%,-50%);padding:4px 10px;border:1px solid #c9a65a;border-radius:10px;background:linear-gradient(180deg,#343d60,#1d2338);font:800 11px/1 var(--wr-font-display,'Rubik',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#ffeaa6;box-shadow:0 3px 8px #0008}
.sr-summit{position:absolute;width:34px;height:40px;transform:translate(-50%,-80%);
 background:linear-gradient(#9aa3bd,#9aa3bd) 4px 0/3px 100% no-repeat,linear-gradient(135deg,#6b7080,#3a3e4a) 7px 2px/24px 16px no-repeat;filter:drop-shadow(0 3px 3px #0009)}
.sr-summit.is-done{background:linear-gradient(#ffeaa6,#c8861c) 4px 0/3px 100% no-repeat,linear-gradient(135deg,#ffcf4d,#c8861c) 7px 2px/24px 16px no-repeat}

/* Milestone rows: medallion on the winding road (--x), cards in one column right of the road so the token never touches them */
.sr-list{list-style:none;margin:0;padding:0}
.sr-node{position:absolute;left:0;right:0;height:112px}
.sr-medal{position:absolute;left:var(--x);top:50%;width:60px;height:60px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
 background:radial-gradient(circle at 40% 30%,#4c5680,#2b3350 60%,#1a2036);box-shadow:0 0 0 2px #c9a65a,0 0 0 4px #10142a,0 6px 12px #000a}
.sr-reward-img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px #0009)}
.sr-medal__count{position:absolute;right:-6px;bottom:2px;padding:1px 5px;border-radius:8px;background:#10142a;border:1px solid #c9a65a;font:800 11px/1.2 var(--wr-font-body,'Rubik',sans-serif);color:#fff}
.sr-medal__sigils{position:absolute;left:50%;top:-12px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:1px 7px 1px 2px;border-radius:10px;background:#10142a;border:1px solid #c9a65a;white-space:nowrap}
.sr-medal__sigils .sr-hex-icon{width:16px;height:16px;filter:none}
.sr-medal__sigils b{font:800 12px/1.2 var(--wr-font-body,'Rubik',sans-serif);color:#ffcf4d}
.sr-medal__icon{display:grid;place-items:center;width:40px;height:40px}
.sr-medal__icon svg{width:100%;height:100%}
.sr-medal--unlock{width:70px;height:70px;background:radial-gradient(circle at 40% 30%,#9a6ae0,#5a2fa0 60%,#2e1660);box-shadow:0 0 0 3px #ffcf4d,0 0 0 5px #10142a,0 0 18px #9a6ae088,0 6px 12px #000a}
.sr-medal--claimable{background:radial-gradient(circle at 40% 30%,#fff1b3,#f1c158 50%,#b5761f);animation:sr-pulse 1.8s ease-in-out infinite}
.sr-medal--claimed{background:radial-gradient(circle at 40% 30%,#4f8a46,#2c5b28 60%,#173415)}
.sr-medal--locked{filter:grayscale(.85) brightness(.75)}
.sr-medal__check,.sr-medal__lock{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #10142a}
.sr-medal__check{background:radial-gradient(circle at 40% 30%,#c8ffa8,#3fae2a 60%,#23731a)}
.sr-medal__check::after{content:'';position:absolute;inset:5px 4px 5px 5px;background:#fff;clip-path:polygon(0 55%,18% 38%,40% 60%,82% 0,100% 18%,40% 100%)}
.sr-medal__lock{background:radial-gradient(circle at 40% 30%,#a3a8b8,#5a5f70)}
.sr-medal__lock::after{content:'';position:absolute;left:6px;right:6px;bottom:5px;height:7px;border-radius:2px;background:#10142a;box-shadow:0 -5px 0 -1px transparent}
.sr-medal__lock::before{content:'';position:absolute;left:7px;top:4px;width:6px;height:6px;border:2px solid #10142a;border-bottom:0;border-radius:5px 5px 0 0}
@keyframes sr-pulse{0%,100%{box-shadow:0 0 0 2px #fff3cf,0 0 0 4px #10142a,0 0 8px #ffcf4d66,0 6px 12px #000a}50%{box-shadow:0 0 0 2px #fff3cf,0 0 0 4px #10142a,0 0 22px #ffcf4dcc,0 6px 12px #000a}}
@media (prefers-reduced-motion:reduce){.sr-medal--claimable{animation:none}}

.sr-card{position:absolute;left:var(--card-left,160px);right:0;top:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:9px 11px;box-sizing:border-box;min-width:0;
 border:1px solid #ffffff1f;border-radius:12px;background:linear-gradient(180deg,#343d60,#232a43);box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #0006,0 4px 12px #0007}
.sr-node.is-claimable .sr-card{border-color:#ffcf4d;box-shadow:0 0 0 1px #ffcf4d,0 0 16px #ffcf4d55,0 4px 12px #0007}
.sr-node.is-unlock .sr-card{border-color:#9a6ae0aa}
.sr-node.is-locked .sr-card{background:linear-gradient(180deg,#2a3048,#1c2134);opacity:.86}
.sr-card__title{margin:0;font:800 15px/1.15 var(--wr-font-display,'Rubik',sans-serif);color:#ffcf4d;text-shadow:0 1px 0 #10142a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-node.is-locked .sr-card__title{color:#d4d8e6}
.sr-card__reward{margin:0;font-size:13px;font-weight:600;line-height:1.25;color:#eef1fb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-node.is-unlock .sr-card__reward{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-card__text{margin:0;font-size:12px;line-height:1.25;color:#aab2c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.sr-card__status{min-width:0;font-size:12px;font-weight:700;color:#aab2c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-node.is-claimed .sr-card__status,.sr-node.is-unlocked .sr-card__status{color:#8fe26a}
.sr-claim.wr-btn{width:auto!important;flex:none;min-height:34px!important;min-width:0;padding:3px 16px 6px!important;font-size:14px!important}

/* You-are-here token on the road */
.sr-token{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:3px;padding:3px 9px 3px 3px;border-radius:18px;
 background:linear-gradient(180deg,#fff1b3,#f1c158 50%,#c8861c);border:2px solid #10142a;box-shadow:0 0 0 2px #fff3cf,0 0 18px #ffcf4daa,0 4px 10px #000b}
.sr-token .sr-hex-icon{width:24px;height:24px}
.sr-token b{font:900 15px/1 var(--wr-font-display,'Rubik',sans-serif);color:#10142a}

/* The counter in the resource strip opens the road. */
#home-xp{position:relative;cursor:pointer}
#home-xp:focus-visible{outline:2px solid #ffcf4d;outline-offset:2px;border-radius:10px}

@media (max-width:400px){.sr-head{gap:8px;padding-inline:12px}.sr-title{font-size:16px!important}.sr-total{padding-right:9px}.sr-total small{display:none}.sr-info{padding-inline:12px}.sr-scroll{padding-inline:12px}}

/* User-approved painted progression presentation; rewards and states are unchanged. */
.sigil-road{background:radial-gradient(ellipse at top,#765338,#38291f);color:#fff0d5}
.sr-head{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:12px;background:linear-gradient(#94683f,#563922);border-bottom:4px solid #342719}
.sr-title.wr-plaque{background:linear-gradient(145deg,#858785,#44464a);border:3px solid #7e8998;box-shadow:inset 0 2px #c5c7c4,inset 0 -4px #303036,0 3px #30251e}
.sr-total{border-radius:7px;background:linear-gradient(#686563,#3c3630);border-color:#b79866}.sr-total b{color:#ffe1a1}
.sr-next{background:linear-gradient(#654d35,#463323);border-color:#a38a62}.sr-next__text,.sr-how{color:#f1ddbc}.sr-info{background:#3b2b20;padding-top:8px}
/* Keep vertical overscan even in portrait Windows windows: cover can fit the
   entire picture exactly and leave background-position with no travel. */
.sr-scroll{padding-inline:10px;background:linear-gradient(#39271c26,#39271c26),url(assets/ui/sigil-road-landscape-preview.png?v=13ec146c22843ad2) 15% var(--sr-landscape-y,50%)/auto var(--sr-landscape-height,1000px) no-repeat #55402d;mask-image:none;-webkit-mask-image:none}
.sr-body{isolation:isolate}
.sr-path__edge{stroke:#352a20;stroke-width:19}.sr-path__road{stroke:#716859;stroke-width:12}.sr-path__dash{stroke:#40352b;stroke-width:2}.sr-path__done{stroke:#ffca55;stroke-width:9;filter:drop-shadow(1px 0 1px #ffe6a1)}
.sr-node{height:164px}.sr-card{left:12px;right:66px;padding:89px 12px 10px;border:0;border-radius:9px;isolation:isolate;background:linear-gradient(140deg,#cdb18a,#a88a61 22%,#6c4c31 66%,#473322);box-shadow:0 2px #efdab2,0 0 0 2px #32291d,0 6px #342719,0 10px 15px #1c150ba6}
.sr-card::before{content:'';position:absolute;inset:5px;z-index:-1;border-radius:5px;background:linear-gradient(170deg,#a88155,#805a3b 70%,#68472d);border:2px solid #e5c99b88;box-shadow:inset 0 3px 6px #25180c90,inset 0 -2px #c6a47a55}
.sr-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:9px;background:radial-gradient(circle at 10px 10px,#c6c7c2 0 2px,#626569 3px,#252b30 4px,transparent 5px),radial-gradient(circle at calc(100% - 10px) 10px,#c6c7c2 0 2px,#626569 3px,#252b30 4px,transparent 5px),radial-gradient(circle at 10px calc(100% - 10px),#8c8d87 0 2px,#55544e 3px,#252b30 4px,transparent 5px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#8c8d87 0 2px,#55544e 3px,#252b30 4px,transparent 5px)}
.sr-node:not(.is-unlock) .sr-card{left:auto;width:min(190px,calc(100% - 78px));text-align:center}.sr-node:not(.is-unlock) .sr-card__title,.sr-node:not(.is-unlock) .sr-card__text{display:none}
.sr-node.is-unlock .sr-card{padding:22px 14px 12px 84px;justify-content:center}.sr-node.is-unlock .sr-card__title{font-size:21px;color:#fff1d9;white-space:normal}.sr-card__reward{color:#fff0d3;font-size:15px;white-space:normal;line-height:1.3}.sr-card__title{text-shadow:0 2px #382719}.sr-card__foot{gap:4px;justify-content:center}.sr-card__status{color:#e5ccaa;font-size:11px}.sr-node.is-unlock .sr-card__foot{justify-content:flex-start;min-height:20px;margin-top:8px}
.sr-node.is-locked .sr-card{background:linear-gradient(140deg,#b8a17f,#64533e);opacity:.82;filter:saturate(.5)}.sr-node.is-claimed .sr-card__status,.sr-node.is-unlocked .sr-card__status{color:#c0ed9b}
.sr-medal{left:50%;top:45px;width:68px;height:68px;border:3px solid #a3a3a0;background:radial-gradient(circle at 35% 22%,#686768,#373438 65%,#242128);box-shadow:0 0 0 2px #2d2e2b,inset 0 3px #d1ccc0,inset 0 -4px #1e2024,0 5px 7px #35231190}.sr-node.is-unlock .sr-medal{left:43px;top:65px;width:54px;height:65px;border-radius:6px;background:linear-gradient(#9870b2,#543365 70%,#302237)}
.sr-reward-img{width:48px;height:48px}.sr-medal__sigils{left:auto;right:9px;top:50%;transform:translateY(-50%);width:46px;height:48px;padding:0;justify-content:center;border:0;border-radius:0;background:linear-gradient(#fa9850,#bc3b25);clip-path:polygon(50% 0,96% 26%,87% 83%,50% 100%,10% 82%,3% 28%)}.sr-medal__sigils .sr-hex-icon{display:none}.sr-medal__sigils b{font-size:21px;color:#fff3d9;text-shadow:0 2px #4e1b13,2px 0 #4e1b13,-2px 0 #4e1b13}.sr-node.is-locked .sr-medal__sigils{background:linear-gradient(#7e7469,#4a423c)}
.sr-medal__check{inset:0;width:auto;height:auto;background:none;box-shadow:none;border-radius:0}.sr-medal__check::after{inset:10px 4px;background:#63ee20;filter:drop-shadow(0 3px 1px #21560c)}.sr-node.is-claimed .sr-reward-img{filter:grayscale(1) brightness(.75)}
.sr-token{transform:translate(-50%,-50%);padding:2px;border-radius:50%;background:#f7c34c;box-shadow:0 0 0 2px #fff0bd,0 3px 7px #0009}.sr-token .sr-hex-icon{width:17px;height:17px}.sr-token b{display:none}
.sr-start{font-size:9px;padding:3px 6px}.sr-back{border-radius:50%;background:radial-gradient(circle at 35% 25%,#ff7755,#ba231c 70%);border:3px solid #7f858b;color:white}
@media(max-width:400px){.sr-head{grid-template-columns:40px minmax(0,1fr) auto;gap:6px;padding-inline:8px}.sr-back{width:36px;height:36px}.sr-total{padding:5px;font-size:12px}.sr-total b{font-size:17px}.sr-info{padding-inline:9px}.sr-card__reward{font-size:13px}.sr-node.is-unlock .sr-card{padding-left:75px;padding-right:10px}.sr-node.is-unlock .sr-card__title{font-size:18px}.sr-medal__sigils b{font-size:19px}}

/* The same menu frame and safe-area spacing as Army, Shop, Social and Events.
   This is a non-modal dialog: the resource strip and navigation remain usable. */
body.mode-online .sigil-road{inset:max(92px,var(--sr-shell-top,0px)) 18px max(106px,var(--sr-shell-bottom,0px));width:auto;height:auto;max-width:960px;margin:var(--safe-top,0px) auto var(--safe-bottom,0px);border:1px solid #8f805b;border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 3px #151726,inset 0 0 0 4px #b3986233,0 16px 55px #0005}
body.mode-online .sigil-road .sr-head{padding-top:10px}
body.mode-online .sigil-road .sr-scroll{padding-bottom:12px}
@media(max-width:650px){body.mode-online .sigil-road{inset:max(80px,var(--sr-shell-top,0px)) 5px max(93px,var(--sr-shell-bottom,0px))}body.mode-online .sigil-road .sr-head{grid-template-columns:36px minmax(0,1fr) auto;gap:5px;padding-inline:9px}body.mode-online .sigil-road .sr-back{width:32px;height:32px}body.mode-online .sigil-road .sr-title{font-size:15px!important}body.mode-online .sigil-road .sr-total{padding:4px 6px}body.mode-online .sigil-road .sr-total small{display:none}}
@media(max-height:500px){body.mode-online .sigil-road .sr-info{display:none}body.mode-online .sigil-road .sr-next{padding:5px 10px}body.mode-online .sigil-road .sr-next__text{margin-bottom:4px}}

/* Compact frame (phones especially): the popup covers its menu panel edge to edge, from the panel's top (measured by sigil-road.js
   fitMenuFrame as --sr-shell-top) down to just above the dock (--sr-shell-bottom); a slim header and a tight next-milestone box. */
body.mode-online .sigil-road{inset:var(--sr-shell-top,calc(92px + var(--safe-top,0px))) 18px var(--sr-shell-bottom,calc(106px + var(--safe-bottom,0px)));margin-block:0}
body.mode-online .sigil-road .sr-head{grid-template-columns:32px minmax(0,1fr) auto;gap:6px;padding:4px 10px;border-bottom-width:3px}
body.mode-online .sigil-road .sr-back{width:28px;height:28px;padding:0 0 2px;border-width:2px;font-size:22px}
body.mode-online .sigil-road .sr-title.wr-plaque{min-height:0;padding:1px 14px 2px;font-size:15px!important;border-width:2px}
body.mode-online .sigil-road .sr-total{gap:4px;padding:1px 8px 1px 4px}
body.mode-online .sigil-road .sr-total .sr-hex-icon{width:20px;height:20px}
body.mode-online .sigil-road .sr-total b{font-size:16px}
body.mode-online .sigil-road .sr-info{padding:6px 10px}
body.mode-online .sigil-road .sr-next{padding:5px 10px 6px;border-radius:9px}
body.mode-online .sigil-road .sr-next__text{margin:0 0 4px;font-size:13px;line-height:1.2}
body.mode-online .sigil-road .sr-bar{height:12px;border-radius:6px}
body.mode-online .sigil-road .sr-bar i{border-radius:6px}
body.mode-online .sigil-road .sr-bar em{font-size:10px}
@media(max-width:650px){body.mode-online .sigil-road{inset:var(--sr-shell-top,calc(80px + var(--safe-top,0px))) 5px var(--sr-shell-bottom,calc(93px + var(--safe-bottom,0px)))}body.mode-online .sigil-road .sr-head{grid-template-columns:30px minmax(0,1fr) auto;padding:2px 8px}body.mode-online .sigil-road .sr-title{font-size:14px!important}body.mode-online .sigil-road .sr-back{width:26px;height:26px;font-size:20px}body.mode-online .sigil-road .sr-info{padding:5px 8px}}
body.mode-online .sigil-road .sr-back{position:relative}body.mode-online .sigil-road .sr-back::after{content:"";position:absolute;inset:-8px}