/* M34: one compact status strip; the masthead scrolls away naturally on phones.
   No height animation or scroll-triggered layout changes. */
:root{--masthead-art-height:86px}
header.top{
 display:grid;grid-template-columns:300px minmax(0,1fr) 44px;grid-template-rows:auto;
 column-gap:32px;row-gap:0;align-items:center;max-width:1300px;
 padding:8px 28px;margin:auto;position:sticky;top:0;z-index:8;
 background:radial-gradient(ellipse at 130px 0,#64512b26,transparent 380px),#111c16;
 border:0;border-bottom:1px solid #b49a6530;box-shadow:none;
}
header.top .brand{display:block;grid-column:1;grid-row:1;min-width:0;line-height:0;align-self:center}
header.top .brand img,header.top.compact .brand img{
 display:block;width:300px;height:var(--masthead-art-height);max-width:100%;aspect-ratio:auto;object-fit:contain;
 filter:brightness(1.12) drop-shadow(0 2px 8px #d9b76720);
}
header.top .header-actions{grid-column:3;grid-row:1;max-width:none;min-width:0;display:block}
header.top .header-actions .language-picker,header.top.compact .language-picker{display:none}
header.top #account-button{
 display:block;width:44px;height:44px;min-height:44px;max-width:none;padding:0;
 font-size:0;border:1px solid #b49a6540;border-radius:50%;background:#ffffff04;
 box-shadow:none;color:#dbc28e;line-height:1;
}
header.top #account-button span{display:none}
header.top #account-button::before{content:'☰';position:static;display:block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;font:400 20px/1 system-ui,sans-serif;pointer-events:none}
header.top #account-button::after{content:none}
header.top #account-button:hover{background:#b49a6518;border-color:#b49a6590}
header.top .wallet{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:26px auto;
 grid-column:2;grid-row:1;width:100%;max-width:620px;min-width:0;
 margin:0;gap:3px 14px;order:initial;justify-self:end;align-items:center;
}
header.top .wallet .resource-counter,header.top.compact .wallet .resource-counter{
 display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
 grid-row:1;gap:6px;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
header.top .wallet .resource-label{display:flex;flex-wrap:nowrap;flex:0 0 auto;gap:0}
header.top .wallet .resource-label img{display:block;width:22px;height:22px;object-fit:contain}
header.top .wallet .resource-label span,header.top.compact .resource-label span{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
header.top .wallet .resource-value,header.top.compact .resource-value{
 font:600 16px/1.25 var(--font-body);font-variant-numeric:tabular-nums;
 white-space:nowrap;overflow-wrap:normal;text-align:left;max-width:100%;color:#e8d3a1;
}
header.top .wallet [data-resource=emeralds] .resource-value{color:#98cdaa}
header.top .wallet .player-progress{grid-column:1/-1;grid-row:2;min-width:0;padding:0;position:relative}
header.top .wallet .player-progress-copy{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px}
header.top .wallet .player-progress-copy strong{font:600 11px/16px var(--font-body);white-space:nowrap;color:#cdb682}
header.top .wallet .player-progress-copy span{font:400 11px/16px var(--font-body);white-space:nowrap;color:#a5afa1}
header.top .wallet .player-progress progress{display:block;width:100%;height:2px;margin:2px 0 0;border:0;border-radius:0;background:#ffffff0d}
header.top progress::-webkit-progress-bar{background:#ffffff0d}
header.top progress::-webkit-progress-value{background:#c2a266}
header.top progress::-moz-progress-bar{background:#c2a266}
.nav-caption{display:none}
@media(min-width:721px) and (max-width:1100px){
 :root{--masthead-art-height:66px}
 header.top{grid-template-columns:230px minmax(0,1fr) 44px;column-gap:20px;padding-inline:20px}
 header.top .brand img,header.top.compact .brand img{width:230px;height:var(--masthead-art-height)}
 header.top .wallet{column-gap:8px}
 header.top .wallet .resource-value{font-size:14px}
 header.top .wallet .resource-label img{width:18px;height:20px}
}
@media(max-width:720px){
 header.top{
  grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:72px auto;
  column-gap:12px;row-gap:2px;padding:0 14px 7px;
  padding-top:env(safe-area-inset-top,0px);
  top:calc(-74px - env(safe-area-inset-top,0px));
  background:radial-gradient(ellipse at 110px 0,#64512b26,transparent 280px),#111c16;
 }
 header.top .brand img,header.top.compact .brand img{width:270px;height:72px;max-width:100%}
 header.top .header-actions{grid-column:2;grid-row:1}
 header.top .wallet{grid-column:1/-1;grid-row:2;grid-template-rows:22px auto;gap:2px 12px;max-width:none}
 header.top .wallet .resource-value,header.top.compact .resource-value{font-size:14px}
 header.top .wallet .resource-label img{width:20px;height:20px}
 header.top .wallet .resource-counter,header.top.compact .wallet .resource-counter{gap:5px}
 header.top .wallet .player-progress-copy strong,header.top .wallet .player-progress-copy span{font-size:10px;line-height:14px}
 main{padding-top:18px}
}
@media(max-width:359px){
 header.top{padding-inline:10px;column-gap:8px}
 header.top .wallet{column-gap:6px}
 header.top .wallet .resource-value,header.top.compact .resource-value{font-size:12px}
 header.top .wallet .resource-label img{width:18px;height:18px}
}
@media(min-width:721px) and (max-width:850px){
 :root{--masthead-art-height:64px}
 header.top{grid-template-columns:210px minmax(0,1fr) 44px;column-gap:12px;padding-inline:16px}
 header.top .brand img,header.top.compact .brand img{width:210px;height:var(--masthead-art-height)}
 header.top .wallet{column-gap:6px}
 header.top .wallet .resource-value{font-size:12px}
 header.top .wallet .resource-counter{gap:4px}
}
@media(max-height:480px) and (orientation:landscape){
 header.top{position:relative;top:0}
 .workspace nav{top:0}
}
/* The desktop masthead contains this logo plus 16px padding and a 1px border.
   CSS supplies the minimum offset even if WebKit delays resize/scroll events;
   the measured value still accommodates content taller than the logo. */
@media(min-width:721px) and (min-height:481px){
 .workspace nav{top:max(calc(var(--masthead-art-height) + 17px),var(--header-height,0px))}
}
.relic-event.quest-card{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);padding:0;overflow:hidden;border:1px solid #a889515c;border-radius:20px;background:linear-gradient(130deg,#253024,#121d17);box-shadow:0 12px 36px #0003}
.relic-portrait{position:relative;min-height:400px;background:#111b16}
.relic-portrait img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.relic-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,#17221977)}
.relic-content{min-width:0;padding:28px 32px}
.relic-content .detail-heading{margin-bottom:16px}
.relic-content h3{font-size:clamp(24px,2.5vw,32px);margin:8px 0 16px}
.relic-content p{font-size:15px;line-height:1.5;margin:10px 0;color:#d9dbcc}
.relic-content summary{font-size:14px;color:var(--gold)}
.relic-content>small{display:block;font-size:13px;line-height:1.5;color:#aeb7a8;margin-top:16px}
.relic-content .relic-start{width:100%;margin:12px 0 0;border-radius:12px;min-height:48px}
@media(min-width:721px){
 .workspace nav{padding:8px;margin-bottom:28px;border:1px solid #b49a6533;border-radius:16px;background:#131f18;gap:8px}
 .workspace nav button.nav-art-button{flex-direction:row;gap:12px;min-height:60px;padding:6px 12px;border-radius:11px}
 .workspace nav .nav-art-button img{width:42px;height:42px}
 .workspace nav .nav-caption{display:block;font:500 14px/1.3 var(--font-body);color:#bdc5b5}
 .workspace nav .active .nav-caption{color:#f0d49d}
 .workspace nav .nav-art-button.active{background:linear-gradient(120deg,#35412b,#202e22);border-color:#b49a6566}
 .workspace nav .nav-art-button.active::after{display:none}
}

@media(max-width:720px){
 .relic-event.quest-card{grid-template-columns:minmax(0,1fr);border-radius:16px}
 .relic-portrait{min-height:0;aspect-ratio:1.8}
 .relic-portrait img{object-position:50% 28%}
 .relic-portrait::after{background:linear-gradient(0deg,#1b281a,transparent 35%)}
 .relic-content{padding:16px 20px 22px}
 .relic-content h3{font-size:25px;margin:6px 0 12px}
}
@media(min-width:721px) and (max-width:850px){
 .workspace nav button.nav-art-button{gap:6px;padding:6px}.workspace nav .nav-caption{font-size:12px}
}

/* M35: one landscape per expedition route; locations retain their compact cards. */
.route-atlas .route-illustrated{
 position:relative;isolation:isolate;overflow:hidden;min-height:210px;
 justify-content:flex-end;gap:8px;padding:64px 24px 22px;text-align:left;
 background:#142019;border-radius:14px;box-shadow:0 5px 18px #0003;
}
.route-atlas .route-illustrated::before{content:none}
.route-atlas .route-illustrated::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,#08110ff5 0%,#08110fc9 27%,#08110f35 72%,#08110f0a 100%);
}
.route-illustrated .route-art{
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 object-position:center 48%;z-index:0;pointer-events:none;
}
.route-atlas .route-illustrated>span,.route-atlas .route-illustrated>strong{
 position:relative;z-index:2;max-width:100%;text-shadow:0 2px 5px #000;
}
.route-atlas .route-illustrated>strong{color:#fff0ce}
.route-atlas .route-illustrated>span:last-child{color:#e0e3d8}
.route-atlas .route-illustrated:disabled{opacity:1;border-color:#777563}
.route-illustrated:disabled .route-art{filter:saturate(.45) brightness(.75)}
.route-atlas .route-illustrated:focus-visible{outline:3px solid #f0d49d;outline-offset:3px}
@media(hover:hover){
 .route-atlas .route-illustrated:hover:not(:disabled){border-color:#ffe0a1}
}
@media(min-width:721px){
 .route-atlas .route-illustrated{min-height:230px;padding:70px 32px 26px}
 .route-illustrated .route-art{object-position:center 45%}
 .route-atlas .route-illustrated::after{background:linear-gradient(90deg,#08110fe6,#08110f66 65%,#08110f26),linear-gradient(0deg,#08110f99,transparent 80%)}
}
@media(max-width:359px){
 .route-atlas .route-illustrated{padding:58px 18px 18px;min-height:206px}
 .route-atlas .route-illustrated>strong{font-size:27px}
}

/* M36: viewport scenery behind every screen. Fixed element avoids iOS
   background-attachment resizing; isolation keeps it behind the UI. */
html{background:#0c130f}
body{position:relative;isolation:isolate;background:transparent}
body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,#09120f73 0%,#09120f99 45%,#09120fcc 100%),
 url("/backgrounds/valley-m36.webp") center 35%/cover no-repeat;
}
main#app{background:linear-gradient(90deg,#0c150f40,#0c150f80 20%,#0c150f80 80%,#0c150f40)}
footer{text-shadow:0 2px 5px #000}
@media(max-width:767px){
 body::before{background-position:center,72% center}
 main#app{background:#0c150f38}
}

/* M36.1: continue the world behind the masthead, with a stronger scrim
   behind balances. Backdrop blur keeps scrolling cards from competing. */
header.top{
 background:linear-gradient(180deg,#0b150e26 0%,#0b150e59 58%,#0b150ed9 100%);
 -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 text-shadow:0 1px 4px #000;
}
header.top #account-button{background:#0b150e80;border-color:#b49a6570}

/* M37: actual equipment silhouettes; rarity belongs to a small marker. */
.item-card img.gear-cutout,.item-slot img.gear-cutout,img.gear-cutout.detail-art,
.detail-heading img.gear-cutout,.equipped-reference img.gear-cutout{background:transparent;border:0;border-radius:0;filter:drop-shadow(0 3px 3px #0009)}
.item-card.item-slot{background:transparent;border:1px solid transparent;border-radius:0;box-shadow:none;overflow:visible}
.item-card.item-slot:hover{background:transparent;border-color:transparent;box-shadow:none}
.item-slot img.gear-cutout{transition:transform .15s;user-select:none;-webkit-user-drag:none}
.item-slot:hover img.gear-cutout,.item-slot.slot-selected img.gear-cutout{filter:drop-shadow(0 0 4px var(--quality));transform:translateY(-2px)}
.item-slot .rarity-mark{border-radius:2px;height:3px;bottom:0;left:24%;right:24%;width:52%;box-shadow:none}
.item-card.merchant-card,.item-card.loot-card,.item-card.reward-item{background:transparent;border:0;border-bottom:2px solid var(--quality,var(--edge));border-radius:0;box-shadow:none}
.item-card.merchant-card:hover,.item-card.loot-card:hover,.item-card.reward-item:hover{background:#ffffff06;box-shadow:none}
@media(prefers-reduced-motion:reduce){.item-slot img.gear-cutout{transition:none;transform:none}}

/* M38 audit: keep complete words on narrow phone controls. */
.merchant-modes{flex-wrap:wrap}
.merchant-modes button{min-width:max-content;white-space:nowrap}
@media(max-width:420px){.paperdoll .body-slot>span{font-size:10px;letter-spacing:.025em;white-space:nowrap}}

/* M39: items first on phones; character and bag remain side by side on desktop. */
@media(min-width:721px){.inventory-shell>.paperdoll{grid-column:1;grid-row:1}.inventory-shell>.backpack{grid-column:2;grid-row:1}}
.compact-wallet{padding:0!important;margin:0 0 12px;background:#17241bd9}
.compact-wallet>summary{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:10px 14px;color:#b9d6bd;font-size:14px;cursor:pointer}
.compact-wallet>summary::before{content:'▸';color:var(--gold)}
.compact-wallet[open]>summary::before{content:'▾'}
.compact-wallet>summary>strong{margin-left:auto;color:#98cdaa;white-space:nowrap}
.compact-wallet>summary>small{width:100%;font-size:12px}
.compact-wallet>p,.compact-wallet>.emerald-rewards{margin:12px 14px}
.screen-merchant>.section-head{margin-bottom:14px}
.screen-merchant>.catalog-tools{margin:12px 0;gap:8px}
.screen-merchant>.merchant-modes{margin-bottom:12px}

.shop-filters{margin:8px 0;border-block:1px solid #b49a6530}
.shop-filters>summary{color:var(--gold);font-size:14px;padding:10px 0}
.shop-filters>.catalog-tools{margin:8px 0 14px}