/* v9p — gold Option E drop tiles (size film). Tokens are local to .drop-tile
   so boss-red chrome on [data-section=drops] / .boss-card is unchanged. */
:root{
  --c-drops:#E4C25A;
  --c-drops-rgb:228,194,90;
  --drops-base:#E4C25A;
  --drops-hi:#FFF3C4;
  --drops-mid:#C9A227;
  --drops-deep:#8A6416;
  --drops-sheen:linear-gradient(165deg,#FFF3C4 0%,#E4C25A 42%,#C9A227 78%,#8A6416 100%);
  --drops-sheen-hover:linear-gradient(165deg,#FFFBE6 0%,#F0D36A 38%,#E4C25A 70%,#8A6416 100%);
  --c-common:#4DC8FF;--c-common-rgb:77,200,255;
  --c-uncommon:#3DFF6E;--c-uncommon-rgb:61,255,110;
  --c-legendary:#FFD24A;--c-legendary-rgb:255,210,74;
}

/* Boss / AI-(BOTS) chrome stays boss red even though --c-drops is now gold. */
.nav-neon.nav--drops,
.sbtn--drops,
.eyebrow--drops,
.tile--drops,
.boss-card,
.bb-card,
[data-section="drops"],
.pill--boss,
.jump-tile--bosses,
.home-latest__link--bosses{
  --c-drops:var(--c-bosses);
  --c-drops-rgb:var(--c-bosses-rgb);
  --pc:var(--c-bosses);
  --pc-rgb:var(--c-bosses-rgb);
  --acc:var(--c-bosses);
  --acc-rgb:var(--c-bosses-rgb);
  --mk-glow:var(--c-bosses-rgb);
}

.drop-tile{
  --pad:12px;--r:16px;
  box-sizing:border-box;
  position:relative;
  display:flex;flex-direction:column;
  margin:0;padding:0;
  width:248px;
  color:#E8EEF8;
  background:linear-gradient(180deg,rgba(12,16,22,.88),rgba(5,7,11,.94)) padding-box,
             var(--drops-sheen) border-box;
  border:1px solid transparent;
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,243,196,.14),0 0 28px -6px rgba(228,194,90,.35);
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  min-width:0;
  font:inherit;
}
.drop-tile::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--drops-sheen);border-radius:var(--r) 0 0 var(--r);
  pointer-events:none;
}
a.drop-tile, button.drop-tile{color:#E8EEF8;text-align:left;appearance:none;-webkit-appearance:none}
.drop-tile:hover,
.drop-tile:focus-visible,
.drop-tile.is-hover{
  background:linear-gradient(180deg,rgba(12,16,22,.92),rgba(5,7,11,.96)) padding-box,
             var(--drops-sheen-hover) border-box;
  box-shadow:0 0 0 1px rgba(228,194,90,.4),0 0 28px -6px rgba(228,194,90,.7),inset 0 1px 0 rgba(255,243,196,.2);
  outline:none;
}
.drop-tile--full{width:248px;--pad:12px;border-radius:16px}
.drop-tile--medium{width:168px;--pad:10px;border-radius:12px}
.drop-tile--slim{
  width:112px;height:62px;--pad:6px;border-radius:10px;
  flex-direction:column;justify-content:stretch;
}
.drop-tile--slim::before{width:2px}
.drop-tile--slim:hover,
.drop-tile--slim:focus-visible{
  box-shadow:0 0 0 1px rgba(228,194,90,.4),0 0 16px -4px rgba(228,194,90,.7),inset 0 1px 0 rgba(255,243,196,.2);
}

.drop-tile__top{display:flex;align-items:center;gap:6px;padding:10px var(--pad) 0;min-width:0}
.drop-tile--medium .drop-tile__top{padding:8px var(--pad) 0;gap:5px}
.drop-tile__top .drop-tile__neon{width:28px;height:28px;flex:none}
.drop-tile--medium .drop-tile__top .drop-tile__neon{width:22px;height:22px}
.drop-tile__kicker{
  font:700 .58rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;
  color:var(--drops-hi);
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(28,22,8,.78),rgba(12,10,5,.92)) padding-box,
    var(--drops-sheen) border-box;
  box-shadow:0 0 10px -2px rgba(228,194,90,.45);
  flex:none;
}
.drop-tile--medium .drop-tile__kicker{font-size:.5rem;padding:1px 5px;letter-spacing:.1em}
.drop-tile__rarity{
  font:700 .58rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;
  color:var(--rarity,#fff);
  background:transparent;
  border:1px solid var(--rarity,#fff);
  box-shadow:none;
  flex:none;
}
.drop-tile--medium .drop-tile__rarity{font-size:.5rem;padding:1px 5px}
.drop-tile__rarity--common{--rarity:var(--c-common)}
.drop-tile__rarity--uncommon{--rarity:var(--c-uncommon)}
.drop-tile__rarity--legendary{--rarity:var(--c-legendary)}
.drop-tile__rarity--rare{--rarity:#4AA3FF;color:#4AA3FF}

.drop-tile h3,
.drop-tile__title{
  font:700 1rem/1.2 "Chakra Petch",system-ui,sans-serif;
  color:#fff;margin:8px var(--pad) 0;letter-spacing:-.015em;
}
.drop-tile--medium h3,
.drop-tile--medium .drop-tile__title{font-size:.86rem;margin:5px var(--pad) 0}

.drop-tile__body{padding:8px var(--pad) 0;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.drop-tile--medium .drop-tile__body{padding:6px var(--pad) 0;gap:5px}
.drop-tile--slim .drop-tile__body{padding:3px var(--pad) 0;gap:0;flex:1}

.drop-tile__stack{display:flex;flex-direction:column;gap:6px;min-width:0}
.drop-tile--medium .drop-tile__stack{gap:5px}
.drop-tile__slot{margin:0;min-width:0}
.drop-tile__slot figcaption,
.drop-tile__px{
  display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:#9AA8BD;margin:0 0 3px;
}
.drop-tile--medium .drop-tile__slot figcaption,
.drop-tile--medium .drop-tile__px{font-size:.55rem}
.drop-tile__px{margin:3px 0 0;text-transform:none;letter-spacing:.02em}
.drop-tile__frame{
  background:#03050a;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-width:0;
}
.drop-tile__frame img,
.drop-tile__ph img{
  display:block;max-width:100%;height:auto;object-fit:contain;
}
.drop-tile__frame--fullcard{width:100%}
.drop-tile__frame--hover{width:100%;max-height:220px}
.drop-tile--medium .drop-tile__frame--hover{max-height:160px}
.drop-tile__frame--mini{width:100%;height:36px;padding:2px 0}
.drop-tile--medium .drop-tile__frame--mini{height:32px}
.drop-tile__frame--mini img{height:100%;width:auto;max-width:100%;margin:0 auto}

.drop-tile__ph{
  position:relative;background:#03050a;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:32px;
}
.drop-tile__ph img{display:block;max-width:100%;height:auto;object-fit:contain}
.drop-tile__mark{
  position:absolute;right:4px;bottom:3px;z-index:2;
  width:8px;height:8px;padding:0;overflow:hidden;
  border-radius:999px;
  background:var(--drops-sheen);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
  text-indent:-999px; /* no visible label; gold pip only */
}
.drop-tile--medium .drop-tile__mark{width:7px;height:7px;right:4px;bottom:3px}
.drop-tile--slim .drop-tile__mark{width:6px;height:6px;right:3px;bottom:2px}

.drop-tile__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px var(--pad) var(--pad);min-width:0;
}
.drop-tile--medium .drop-tile__foot{padding:6px var(--pad) var(--pad)}
.drop-tile--slim .drop-tile__foot{display:none}
.drop-tile__meta{font-size:.66rem;color:#9AA8BD}
.drop-tile--medium .drop-tile__meta{font-size:.58rem}
.drop-tile__cta{
  font:700 .72rem/1 Geist,system-ui,sans-serif;
  letter-spacing:.04em;color:var(--drops-hi);
  text-shadow:0 0 10px rgba(228,194,90,.45);
  flex:none;
}
.drop-tile--medium .drop-tile__cta{font-size:.68rem}
.drop-tile:hover .drop-tile__cta,
.drop-tile:focus-visible .drop-tile__cta{text-decoration:underline;text-underline-offset:2px}

.drop-tile--slim .drop-tile__media,
.drop-tile--slim .slim-media{
  height:32px;display:flex;align-items:center;justify-content:center;
  background:#03050a;border-radius:6px;overflow:hidden;min-width:0;
}
.drop-tile--slim .drop-tile__media img,
.drop-tile--slim .slim-media img{
  display:block;height:100%;width:auto;max-width:100%;object-fit:contain;margin:0 auto;
}
.drop-tile--slim .drop-tile__ph{height:32px;border-radius:6px;width:100%}
.drop-tile--slim .drop-tile__footslim,
.drop-tile--slim .slim-foot{
  display:flex;align-items:center;gap:4px;
  padding:2px var(--pad) 4px;min-width:0;flex:none;
}
.drop-tile--slim .drop-tile__neon{width:14px;height:14px;flex:none}
.drop-tile--slim h3,
.drop-tile--slim .drop-tile__title{
  font:700 .62rem/1.15 "Chakra Petch",system-ui,sans-serif;
  margin:0;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;
}

.drop-tile-row,
.drop-tile-row--slim,
.ten-up{
  display:flex;flex-wrap:wrap;gap:8px;
  width:100%;min-width:0;
}
@media (min-width:1100px){
  .drop-tile-row--slim,
  .ten-up{
    display:grid;
    grid-template-columns:repeat(10,112px);
    gap:8px;
    width:max-content;
    max-width:100%;
  }
}
@media (max-width:1099px) and (min-width:701px){
  .drop-tile-row--slim,
  .ten-up{display:grid;grid-template-columns:repeat(auto-fill,112px);gap:8px;width:100%}
}
@media (max-width:700px){
  .drop-tile-row--slim,
  .ten-up{
    display:grid;
    grid-template-columns:repeat(3,112px);
    gap:8px;
    width:352px;
    max-width:100%;
  }
}

.drop-tile-grid--medium{
  display:flex;flex-wrap:wrap;gap:14px;
  width:100%;min-width:0;
}

.loot-hub{margin:0 0 28px;min-width:0}
.loot-hub__grid{
  display:grid;grid-template-columns:1fr;gap:12px;width:100%;min-width:0;
}
@media (min-width:720px){
  .loot-hub__grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media (min-width:1100px){
  .loot-hub__grid{grid-template-columns:repeat(4,1fr);gap:14px}
}

.catalog-group{margin:0 0 28px;min-width:0}
.catalog-group .group-label{margin:0 0 12px}
.catalog-note{color:#9AA8BD;font-size:.88rem;margin:0 0 12px;max-width:70ch}

.task-lead .drop-tile--full{margin:16px 0 8px;max-width:100%}
@media (max-width:700px){
  .task-lead .drop-tile--full{width:248px;max-width:100%}
}

/* v9p map scroll-margin: keep the gate switcher and intro clear of the sticky header */
#map, .xmap, #map.xmap--pending, .xmap--pending{scroll-margin-top:176px}
@media (max-width:1023px){
  #map, .xmap, #map.xmap--pending, .xmap--pending{scroll-margin-top:228px}
}

/* Thin item pages have no .task-hero. The v5 12-col grid would otherwise
   auto-place .task-lead into a single column (~80px) and crush the header. */
@media (min-width:1024px){
  .task-layout:not(:has(> .task-hero)) > .task-lead{
    grid-column:1 / -1;
    min-width:0;
  }
}