/* v10d Mission Key boss-hub tile standard (from mock/boss-tile-v3). */

/* v10d: /bosses hub tiles only. Scoped under .mk-boss-tile so Home, boards,
   Lieutenant pages, and the AI Bots tile keep their current CSS. */

/* ---- Stacked tile (all widths) ---- */
.mk-boss-tile{
  --mk-blue:#4DC8FF;
  --c-key-item:#19F5E6;
  --mk-blue-glow:#00A6FF;
  --boss:#FF2030;
  --boss-rgb:255,32,48;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:12px 12px 14px 14px; /* left padding clears the 3px inset bar */
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,16,22,.92),rgba(5,7,11,.96));
  border:1px solid rgba(var(--boss-rgb),.38);
  box-shadow:
    inset 3px 0 0 var(--boss),
    0 0 0 1px rgba(var(--boss-rgb),.08),
    0 0 22px -8px rgba(var(--boss-rgb),.45);
  overflow:hidden;
}
.mk-boss-tile *,
.mk-boss-tile *::before,
.mk-boss-tile *::after{box-sizing:border-box}

.mk-boss-tile__photo{
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  background:#03050a;
}
.mk-boss-tile__photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center top;
  background:#03050a;
  vertical-align:top;
}
.mk-boss-tile__who{
  display:block;
  color:inherit;
  text-decoration:none;
  min-width:0;
  margin:12px 0 10px;
}
.mk-boss-tile__who:hover .mk-boss-tile__name,
.mk-boss-tile__who:focus-visible .mk-boss-tile__name{
  text-decoration:underline;
  text-underline-offset:3px;
}
.mk-boss-tile__who:focus-visible{
  outline:2px solid #4DC8FF;
  outline-offset:3px;
  border-radius:4px;
}
.mk-boss-tile__kicker{
  margin:0 0 4px;
  font:700 .62rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FF2030;
}
.mk-boss-tile__name{
  margin:0;
  font:700 1.28rem/1.1 "Chakra Petch",system-ui,sans-serif;
  color:#fff;
  letter-spacing:-.02em;
}

/* Found in / Type / Difficulty — one compact row, no dead space.
   Extra right padding keeps the EXTREME badge off the tile edge. */
.mk-boss-tile__facts{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:10px 12px;
  min-width:0;
  align-items:start;
  padding-right:10px;
}
.mk-boss-tile__cell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.mk-boss-tile__lab{
  display:block;
  margin:0;
  font:700 .62rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mk-blue);
  text-shadow:0 0 6px var(--mk-blue-glow), 0 0 14px rgba(0,166,255,.45);
}
.mk-boss-tile__val{
  margin:0;
  color:#fff;
  font:500 .88rem/1.3 Geist,system-ui,sans-serif;
}
.mk-boss-tile__val .pill{vertical-align:middle}

/* Mission Key difficulty badges */
.mk-diff{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid currentColor;
  font:700 .68rem/1 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mk-diff--easy{
  color:#3DFF6E;
  background:rgba(61,255,110,.12);
  box-shadow:0 0 12px -4px rgba(61,255,110,.55);
  text-shadow:0 0 8px rgba(61,255,110,.4);
}
.mk-diff--medium{
  color:#FFD24A;
  background:rgba(255,210,74,.12);
  box-shadow:0 0 12px -4px rgba(255,210,74,.55);
  text-shadow:0 0 8px rgba(255,210,74,.4);
}
.mk-diff--hard{
  color:#FF7A18;
  background:rgba(255,122,24,.12);
  box-shadow:0 0 12px -4px rgba(255,122,24,.55);
  text-shadow:0 0 8px rgba(255,122,24,.4);
}
.mk-diff--extreme{
  color:#FF2030;
  background:rgba(255,32,48,.14);
  box-shadow:0 0 14px -4px rgba(255,32,48,.7);
  text-shadow:0 0 8px rgba(255,32,48,.5);
}

/* Intel callout sits in a full-width row; visual style comes from site CSS */
.mk-boss-tile__intel{
  margin:12px 0 0;
  min-width:0;
}
.mk-boss-tile__intel .intel-callout,
.mk-boss-tile__intel .order-intel{
  margin:0;
}

/* DROPS — thin horizontal reward tags, stacked, then SHOW MORE */
.mk-boss-tile__drops{
  --drops-sheen:linear-gradient(165deg, #FFF3C4 0%, #E4C25A 42%, #C9A227 78%, #8A6416 100%);
  --c-common:#4DC8FF;
  --c-uncommon:#3DFF6E;
  --c-rare:#4AA3FF;
  --c-epic:#7B6DFF;
  --c-legendary:#FFD24A;
  --c-key-item:#19F5E6;
  margin:14px 0 0;
  padding:12px 0 0;
  border-top:1px solid rgba(228,194,90,.28);
  min-width:0;
}
.mk-boss-tile__drops-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
}
.mk-boss-tile__drops-lab{
  margin:0;
  font:700 .62rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#E4C25A;
  text-shadow:0 0 8px rgba(228,194,90,.55);
}
.mk-boss-tile__catalog{
  color:#E4C25A;
  font:700 .68rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.mk-boss-tile__catalog:hover,
.mk-boss-tile__catalog:focus-visible{
  text-decoration:underline;
  text-underline-offset:2px;
}
.mk-boss-tile__drops-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.mk-boss-tile__drops:not(.is-open) .mk-htag:nth-child(n+3){
  display:none;
}
.mk-boss-tile__more{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  margin:10px 0 0;
  padding:0;
  border:0;
  background:none;
  color:#FF2030;
  font:700 .68rem/1.2 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mk-boss-tile__more:focus-visible{
  outline:2px solid #FF2030;
  outline-offset:2px;
}
.mk-boss-tile__more[hidden]{display:none !important}

/* Horizontal drop tag */
.mk-htag{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0, 1fr);
  gap:0 10px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  padding:6px 8px 6px 6px;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(18,16,10,.94), rgba(8,7,5,.97)) padding-box,
    var(--drops-sheen) border-box;
  border:1px solid transparent;
  box-shadow:
    0 0 0 1px rgba(228,194,90,.16),
    inset 0 1px 0 rgba(255,243,196,.22),
    0 0 18px -6px rgba(228,194,90,.55);
}
.mk-htag:hover,
.mk-htag:focus-visible{
  box-shadow:
    0 0 0 1px rgba(228,194,90,.45),
    inset 0 1px 0 rgba(255,251,230,.35),
    0 0 22px -4px rgba(228,194,90,.75);
}
.mk-htag:focus-visible{
  outline:2px solid #E4C25A;
  outline-offset:2px;
}
.mk-htag__shine{
  position:absolute;
  top:0; bottom:0;
  left:0;
  width:42%;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 15%, rgba(255,243,196,.28) 50%, transparent 85%);
  transform:translateX(-140%);
  animation:mk-htag-shimmer 3.8s ease-in-out infinite;
}
.mk-htag__spark,
.mk-htag__spark--2,
.mk-htag__spark--3{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  pointer-events:none;
  background:#FFF3C4;
  box-shadow:0 0 6px 1px rgba(228,194,90,.9);
  animation:mk-htag-glint 2.8s ease-in-out infinite;
}
.mk-htag__spark{ top:5px; left:10px; animation-delay:.2s; }
.mk-htag__spark--2{ top:6px; right:10px; width:3px; height:3px; animation-delay:1.1s; }
.mk-htag__spark--3{ bottom:6px; left:22px; width:3px; height:3px; animation-delay:1.9s; }
@keyframes mk-htag-shimmer{
  0%{ transform:translateX(-140%); opacity:0; }
  12%{ opacity:1; }
  55%{ transform:translateX(280%); opacity:.7; }
  100%{ transform:translateX(280%); opacity:0; }
}
@keyframes mk-htag-glint{
  0%, 70%, 100%{ opacity:.15; transform:scale(.7); }
  80%{ opacity:1; transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .mk-htag__shine,
  .mk-htag__spark,
  .mk-htag__spark--2,
  .mk-htag__spark--3{
    animation:none;
  }
  .mk-htag__shine{ opacity:.14; transform:translateX(40%); }
  .mk-htag__spark,
  .mk-htag__spark--2,
  .mk-htag__spark--3{ opacity:.4; }
}

.mk-htag__art{
  width:48px;
  height:48px;
  border-radius:6px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  align-self:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(228,194,90,.18), #0c101a 70%) padding-box,
    var(--drops-sheen) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(228,194,90,.2);
}
.mk-htag__art img{
  display:block;
  width:78%;
  height:78%;
  object-fit:contain;
  pointer-events:none;
}

.mk-htag__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  z-index:1;
}
.mk-htag__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.mk-htag__title{
  margin:0;
  min-width:0;
  font:700 .78rem/1.2 "Chakra Petch",system-ui,sans-serif;
  color:#fff;
  letter-spacing:-.01em;
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
}
.mk-htag__desc{
  margin:0;
  font:400 .68rem/1.35 Geist,system-ui,sans-serif;
  color:#C8D0DC;
  overflow-wrap:anywhere;
}
.mk-rarity{
  flex:none;
  display:inline-flex;
  align-items:center;
  margin:1px 0 0;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid currentColor;
  font:700 .55rem/1 "Chakra Petch",system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mk-rarity--legendary{
  color:var(--c-legendary);
  background:rgba(255,210,74,.12);
  box-shadow:0 0 10px -2px rgba(255,210,74,.7);
  text-shadow:0 0 8px rgba(255,210,74,.55);
}
.mk-rarity--uncommon{
  color:var(--c-uncommon);
  background:rgba(61,255,110,.12);
  box-shadow:0 0 10px -2px rgba(61,255,110,.7);
  text-shadow:0 0 8px rgba(61,255,110,.5);
}
.mk-rarity--epic{
  color:var(--c-epic);
  background:rgba(123,109,255,.14);
  box-shadow:0 0 10px -2px rgba(123,109,255,.75);
  text-shadow:0 0 8px rgba(123,109,255,.55);
}
.mk-rarity--rare{
  color:var(--c-rare);
  background:rgba(74,163,255,.12);
  box-shadow:0 0 10px -2px rgba(74,163,255,.7);
  text-shadow:0 0 8px rgba(74,163,255,.5);
}
.mk-rarity--common{
  color:var(--c-common);
  background:rgba(77,200,255,.12);
  box-shadow:0 0 10px -2px rgba(77,200,255,.7);
  text-shadow:0 0 8px rgba(77,200,255,.5);
}

/* Phone stage uses the same stacked tile at full content width */


/* Two fact cells (no difficulty rating) fill the row; three-cell row keeps
   the EXTREME badge inset from the tile edge. */
.mk-boss-tile__facts{
  grid-template-columns:1fr 1fr;
  padding-right:0;
}
.mk-boss-tile__facts:has(.mk-boss-tile__cell--diff){
  grid-template-columns:1fr 1fr auto;
  padding-right:10px;
}

/* Prestige uses the site's default rarity pill color — there is no dedicated
   Prestige token in Option E or styles-v5. */
.mk-rarity--prestige{
  color:#8FA3C2;
  background:rgba(143,163,194,.14);
  box-shadow:0 0 10px -2px rgba(143,163,194,.7);
  text-shadow:0 0 8px rgba(143,163,194,.5);
}


.mk-rarity--key-item{
  color:var(--c-key-item);
  background:rgba(25,245,230,.12);
  box-shadow:0 0 10px -2px rgba(25,245,230,.7);
  text-shadow:0 0 8px rgba(25,245,230,.55);
}
a.mk-rarity{
  text-decoration:none;
  z-index:2;
}
a.mk-rarity--key-item:hover,
a.mk-rarity--key-item:focus-visible{
  color:#9FFBF5;
  background:rgba(25,245,230,.18);
  box-shadow:0 0 12px -1px rgba(25,245,230,.85);
  text-shadow:0 0 10px rgba(25,245,230,.7);
}
a.mk-rarity--key-item:focus-visible{
  outline:2px solid #19F5E6;
  outline-offset:2px;
}
a.mk-htag__art,
a.mk-htag__title{
  text-decoration:none;
  color:inherit;
}
a.mk-htag__title{
  color:#fff;
}
a.mk-htag__art:focus-visible,
a.mk-htag__title:focus-visible{
  outline:2px solid #E4C25A;
  outline-offset:2px;
}

/* Unlinked drop (no item page yet): same tag chrome, not a link. */
span.mk-htag{
  cursor:default;
}
span.mk-htag:hover,
span.mk-htag:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 1px rgba(228,194,90,.16),
    inset 0 1px 0 rgba(255,243,196,.22),
    0 0 18px -6px rgba(228,194,90,.55);
}

/* Beat v10c 540px clamp and 16/9 cover crop on these tiles only. */
@media (min-width:1024px){
  .boss-hub-tile.mk-boss-tile:not(.boss-hub-tile--ai),
  .boss-hub-tile.mk-boss-tile:not(.boss-hub-tile--ai):has(.is-open){
    height:auto;
    min-height:0;
  }
}
.boss-hub-tile.mk-boss-tile{
  /* v3 chrome already on .mk-boss-tile; keep height content-sized. */
  height:auto;
  min-height:0;
}

/* v10e: Video Expert square item crops fill the gold well. Logo placeholders stay inset. */
.mk-htag__art img.mk-htag__thumb{
  width:100%;
  height:100%;
  object-fit:contain;
}