/* item_icon.css — how a REWARD ICON is laid out, wherever one is drawn.
   ────────────────────────────────────────────────────────────────────────────
   `item_icon.js` builds the markup and, for medals / support memories / keys, fills a
   SLOT in JS; this file is the geometry that makes each type sit correctly inside its
   frame. Without it the art renders at its natural size in the corner of an unsized box,
   which reads as "the icons are misplaced".

   THE CARD GEOMETRY IS NOT ARBITRARY — art at width:100.5%, top:-6%, left:4% inside a
   frame drawn at 80% / top:8% / left:15%. The frame png is not centred in its own box, so
   drawing the art at 0,0 leaves it visibly leaning left. Copied verbatim from `.ft-slot`
   in detail.html; keep the two in step.

   Extracted from missions.html, which (with panel_missions.html) still carries its own
   copy — they had already drifted once. Anything new should link this rather than paste a
   third copy.
   ──────────────────────────────────────────────────────────────────────────── */

/* the variables the block below reads, so a page that does not define them still works */
:root{
  --line:rgba(255,255,255,.10);
  --bg4:#1e222c;
  --dim:#93A0B4;
}

.reward-link{text-decoration:none;transition:transform .14s,filter .14s;}
.reward-link:hover{transform:translateY(-3px) scale(1.05);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));}
.reward{display:flex;flex-direction:column;align-items:center;width:82px;gap:3px;flex:0 0 auto;}
/* medals were visibly smaller than everything beside them; their art is drawn in JS at
   ItemIcon.slotSize, so the box and that number are bumped together */
.reward.is-medal{width:100px;}
.reward.is-medal .rbox{width:90px;height:90px;}
.reward .rbox{width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:visible;}
/* the same Total: N plate the group previews, panel missions and the z-battle rows use,
   so a reward count reads identically everywhere on the site */
.reward .rqty{font-family:'Oswald',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.4px;
  line-height:1;color:#FFD84A;white-space:nowrap;
  background:linear-gradient(180deg,rgba(28,30,38,.96),rgba(12,14,19,.96));
  border:1px solid rgba(255,216,74,.34);border-radius:7px;padding:3px 7px;
  box-shadow:0 1px 3px rgba(0,0,0,.5);}
.reward .rqty b{color:#fff;font-weight:700;}

/* A CARD SKIN is the owning character's tile with its art-effect label over the corner —
   see the CardSkinItem branch in item_icon.js. */
.it-skin{position:relative;display:inline-block;width:72px;height:72px;}
.it-skin .it-card{width:100%;height:100%;}
.it-skin-lbl{position:absolute;right:-8%;bottom:-6%;width:56%;z-index:7;pointer-events:none;}
.it-skin-none{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border:1px dashed rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.03);
  color:var(--dim);font-family:'Oswald',sans-serif;font-size:1.1rem;}

/* item art */
.it-img{max-width:72px;max-height:72px;object-fit:contain;}
/* an item with no art anywhere falls back to the generic Dokkan banner (check_news.png)
   rather than a text chip, so a row of icons keeps its rhythm. contain, not cover — the
   banner is 550x160 and must not be cropped into the square slot. */
.it-placeholder{object-fit:contain!important;background:rgba(0,0,0,.28);border-radius:6px;
  opacity:.85;}
.it-chip{background:var(--bg4);border:1px solid var(--line);border-radius:6px;
  font-size:.6rem;color:var(--dim);padding:4px;text-align:center;width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;line-height:1.15;}
.it-card{position:relative;width:72px;height:72px;display:block;}
/* geometry copied verbatim from .ft-slot in detail.html — the art is offset
   (left:4%, top:-6%, 100.5%) to sit correctly inside a frame that is 80% at
   top:8%/left:15%. Drawing the art at 0,0 instead left it leaning to the left. */
.it-card-art{position:absolute;width:100.5%;height:100.5%;top:-6%;left:4%;object-fit:cover;z-index:4;
  clip-path:polygon(14% 0,86% 0,100% 15%,100% 85%,86% 100%,14% 100%,0 85%,0 15%);}
.it-card-frame{position:absolute;width:80%;height:80%;top:8%;left:15%;object-fit:contain;z-index:1;}
.it-card-orb{position:absolute;top:1.5%;right:-5%;width:33%;z-index:6;pointer-events:none;}
.it-card-rar{position:absolute;bottom:3%;left:-6%;width:58%;z-index:6;pointer-events:none;}
.act-slot{position:relative;width:72px;height:72px;display:block;}
.act-slot .act-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;}
.act-slot .act-art{position:absolute;left:50%;top:50%;object-fit:contain;z-index:2;}
.eq-slot,.ti-slot,.stk-slot,.tf-slot,.film-slot{position:relative;width:72px;height:72px;display:block;}
.eq-slot img,.ti-slot img,.stk-slot img,.tf-slot img,.film-slot img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;}
.eq-art,.ti-art,.stk-art,.tf-art,.film-art{z-index:2;}
/* THE ORB'S TWO BADGES, as shop.html draws them (30 Sep 2026): the character-exclusive (or
   category) mark top-right, the infinity mark on an eternal orb bottom-right. They undo the
   stretch-to-fill rule above, which would blow them up to the whole slot. */
.eq-slot img.eq-chara{inset:auto;top:-8%;right:-11%;left:auto;bottom:auto;width:44%;height:auto;z-index:4;}
.eq-slot img.eq-inf{inset:auto;bottom:2%;right:-6%;left:auto;top:auto;width:41%;height:auto;z-index:4;}
/* level badge sits ON TOP of the frame, bottom-left. It is a <span>, so the
   ".eq-slot img" rule above does not position it — it needs its own. */
/* THE LEVEL IS THE SHOP'S SIZE (1 Oct 2026, owner: "lv text is also small"): shop.html draws it
   at 0.2267 of the slot -- 16px on a 72px orb -- hanging off the bottom-left edge. */
.eq-lv{position:absolute;left:-2%;bottom:-6%;z-index:5;
  font-family:'Oswald',sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:.5px;
  pointer-events:none;}
/* Option E — the level reads as the metal itself: a grade gradient, brightest at the top
   so it keeps a white core, with the outline carried by drop-shadow rather than a
   text-shadow (a shadow would sit UNDER transparent text and vanish). */
.eq-lv{-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px rgba(0,0,0,.9));}
.eq-slot.eq-bronze .eq-lv{background-image:linear-gradient(180deg,#FFF1E6 8%,#D98C6A 46%,#9E4E2E 100%);}
.eq-slot.eq-silver .eq-lv{background-image:linear-gradient(180deg,#FFFFFF 8%,#CFD6DE 46%,#7C8794 100%);}
.eq-slot.eq-gold .eq-lv{background-image:linear-gradient(180deg,#FFFDF0 8%,#FFD84A 46%,#B8860B 100%);}