/* ═══════════════════════════════════════════════════════════════════════
   world-card-tip.css — A CARD'S ICON AND ITS LARGE PREVIEW (#3560)

   Wray, 2026-10-02: "we should stop trying to display the smaller size
   cards, just use their icon and hovering can open a much larger preview."

   Two objects, both drawn by script:
     .wci   a card as its icon (world-card-icon.js): a square slot, kit B's
            slot and its rarity rims under the HUD pass (.hv-slot .hv-rN,
            world-hud-v2.css), a plain square rimmed in the rarity's ink
            without it. The art is painted inline, so no rule here sizes it.
     .wct   the preview (world-card-tip.js): the card's whole painted bounds
            (292 x 389), fixed over everything, taking no pointer events so
            it can never steal the hover that opened it.

   ONE `corners` BLOCK: the preview must stand over every window, and the
   icon's fallback rim must answer the skin's cell rules by layer.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── THE ICON ─────────────────────────────────────────────────────────── */
.wci {
  --wci-r: #9d8a6d;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 3px;
  background: #141a24;
  box-shadow: inset 0 0 0 2px var(--wci-r);
}
.wci-art {
  display: block;
  min-width: 0;
  min-height: 0;
}
/* under the HUD pass the slot is kit B's (.hv-slot draws the rim and its
   padding); the fallback rim and fill step aside */
body.hud-v2 .wci.hv-slot {
  padding: calc(5 * var(--hv-k, 2) * 1px);
  background: none;
  box-shadow: none;
}

/* THE LONG PULL's FOIL (#4292 B28): a card you hold as a foil wears the
   foil look's colours round its icon (world-card-tip.js dress) and round
   its cell in the pre-HUD grid (world-windows.js). Marked only with
   FEATURE_PACKS_LONG_PULL on, so off nothing here matches. A ring drawn
   OVER the slot (kit B's slot is a border-image, which a border of ours
   would replace): the gradient, with its middle masked away. */
.wci.is-foil,
body.skin-majesty .ww-spells .ww-cell.is-foil { position: relative; }
.wci.is-foil::after,
body.skin-majesty .ww-spells .ww-cell.is-foil::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 2px;
  background: linear-gradient(135deg, #f08a24, #f2c23a, #44b86a, #2fb3a6, #3a7bd5, #8b3fc0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* the Spellbook's pre-HUD grid (world-windows.js grid): a cell holding a
   card's icon is square, its rarity rim the bag cell's own */
body.skin-majesty .ww-spells .ww-cell.is-icon { aspect-ratio: 1 / 1; }
/* the icon's corners are see-through: a dark well under it, as the action
   bar's slot has, and the two-letter fallback under it put away */
body.skin-majesty .ww-spells .ww-cellicon { display: block; background-color: #141a24; }
body.skin-majesty .ww-spells .ww-cell.is-icon .ww-abbr { display: none; }

/* a finger holding an icon opens its preview: no callout, no selection */
.wct-on {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── THE PREVIEW ──────────────────────────────────────────────────────── */
.wct {
  position: fixed;
  z-index: 9500;
  box-sizing: border-box;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
}
.wct[hidden] { display: none; }
.wct-img,
.wct-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
/* the flat face is 240 x 380 inside the 292 x 389 bounds: drawn at the
   frame's place in them, until the painted copy lands over it */
.wct-img {
  left: 8.904%;
  top: 0.514%;
  width: 82.192%;
  height: 97.686%;
}
.wct-cv { opacity: 0; }
.wct-cv.is-painted { opacity: 1; }
.wct.is-painted .wct-img { visibility: hidden; }

}
/* end of @layer corners */