/* ══════════════════════════════════════════════════════════════════════
   THE ITEM TOOLTIP v3 (#3276, tracker #3274)

   Wray's final design (2026-09-26, rulings C40 to C63), drawn from the mock
   archived at audit/artifacts/mint-enchant-marks/index.html: its `.tip`
   rules, renamed `.it3`. public/js/world-item-tip.js builds the markup and
   is the one place that decides whether it shows (FEATURE_WORLD_ITEM_TIP_V3,
   or `?tip=1`), so every rule here is scoped to `.it3` and matches nothing
   with the flag off. (An enchanted piece's bag cell, C44, is data and shows
   either way, so its rule lives in world-skin.css beside `.ww-slotc`.)

   ONE `corners` BLOCK, so the tooltip answers world-skin.css's parchment
   hover card (`.ww-hover`, skin layer) by layer, never by a specificity
   race: the card keeps the `.ww-hover` class because the bag's pin, unpin
   and redraw paths find it by that name.

   The see-through window (C58): a slate fill at .74 alpha under the card
   kit's pixel frame, whose rim takes the enchant colour (C47). The frame is
   public/assets/cards/kit/cz_panel2Dark.png (Cozy UI Essentials, recolouring
   permitted, ATTRIBUTION.md) with its tan rim swapped for the enchant colour
   by audit/artifacts/mint-enchant-marks/src/tint_rim.py: panel_e0 (grey,
   plain) to panel_e4 (gold, .4), in public/assets/ui/tip/.
   ══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

.it3 {
  --it3-white: #f0ead8;
  --it3-grey: #8f8f8f;
  --it3-green: #62d862;
  --it3-red: #ec6a52;
  --it3-ip: #efe2c4;
  --it3-flav: #d9c38e;
  --it3-wave: linear-gradient(90deg, #9945ff, #7962e7, #00c2ff, #19fb9b, #00c2ff, #7962e7, #9945ff);
  --g: #9aa0a6;
  position: relative;
  box-sizing: border-box;
  width: 288px;
  max-width: calc(100vw - 16px);
  min-width: 0;
  padding: 12px 14px;
  margin: 0;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
  image-rendering: pixelated;
  font: 400 18px/1.1 'VT323', 'Courier New', monospace;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--it3-white);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6));
}
/* in the world it hangs on <body> over everything, like the card it replaces */
.ww-hover.it3 {
  position: fixed;
  z-index: 9400;
}
/* ⭐IT GROWS WITH THE CHROME (#3549). Every size above is the 1920x1080
   picture's, where the chrome pixel (--hv-k, world-hud-v2.css) is 2. The
   Inventory, its cells and its rims grow with --hv-k past that (3 from
   2560x1440, 4 from 3840x2160), and the card stayed 288 wide: at 3840 it
   read at half the size it has beside the same bag at 1920. So the floating
   card is drawn at --hv-k / 2, never under 1: a laptop or a phone (--hv-k 1)
   and 1920 are exactly as they were.
   ⛔A SCALE FROM THE TOP LEFT, NOT `zoom`. Zoom multiplies the card's own
   `left` and `top` too and threw it off the screen (the relic clip's first
   try, audit/ui-gen/2026-10-02-relic-hover/README.md). A transform leaves
   `left` and `top` where the placers put them, and getBoundingClientRect
   (which every placer measures the card with: world-windows.js placeCard,
   world-bank.js placePinned, world-player-card.js placeTip) answers the
   SCALED box, so a card is flipped and clamped at the size it is drawn.
   The Bank's phone sheet is pinned to the window's edges instead, and is
   never scaled (a phone is --hv-k 1 anyway). */
.ww-hover.it3:not(.wb-sheetcard) {
  --it3-s: max(1, calc(var(--hv-k, 2) / 2));
  scale: var(--it3-s);
  transform-origin: 0 0;
  max-width: calc((100vw - 16px) / var(--it3-s));
}
.it3.is-mat { width: 220px; }

/* the window: fill, frame, and on a relic the glow and the top edge (C60) */
.it3 > .it3-bgf {
  position: absolute;
  inset: 3px;
  z-index: 0;
  background: rgba(24, 30, 42, .74);
}
.it3 > .it3-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-image: url('/assets/ui/tip/panel_e0.png?v=2026-09-26a') 5 / 5px stretch;
}
.it3 > .it3-halo {
  position: absolute;
  inset: -6px;
  z-index: 0;
  background: var(--it3-wave);
  background-size: 200% 100%;
  animation: it3Slide 3s linear infinite;
  filter: blur(9px);
  opacity: .55;
}
.it3 > .it3-edge {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 4px;
  z-index: 2;
  background: var(--it3-wave);
  background-size: 200% 100%;
  animation: it3Slide 3s linear infinite;
}
/* the lines, and anything the bag adds under them (the pinned Equip) */
.it3 > .it3-body,
.it3 > .ww-hover-act {
  position: relative;
  z-index: 2;
}
.it3 > .it3-body > div { margin: 0; padding: 0; }

.it3 .it3-name {
  font: 400 27px/1 'VT323', 'Courier New', monospace;
  color: var(--it3-white);
  margin: 1px 0 5px;
}
.it3 .it3-name.is-ench { color: var(--g); }
.it3.is-pinned-tip .it3-name { margin-right: 22px; }
.it3 .it3-wave {
  color: transparent;
  background: var(--it3-wave);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: it3Slide 3s linear infinite;
}
.it3 .it3-body > .it3-rule {
  height: 3px;
  margin: -1px 0 7px;
  background: var(--it3-wave);
  background-size: 200% 100%;
  animation: it3Slide 3s linear infinite;
}

/* Item Power: the number embossed, the spell card's stat face at half size (C48) */
.it3 .it3-body > .it3-ip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 2px 0;
}
.it3 .it3-ip.is-tap { cursor: pointer; }
.it3 .it3-ip.is-tap:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }
.it3 .it3-ipn {
  font: 400 12px/1 'Press Start 2P', 'Courier New', monospace;
  color: var(--it3-ip);
  text-shadow: -1px -1px 0 #fffaf0, 1px 1px 0 rgba(0, 0, 0, .75);
  margin-left: 6px;
}
/* the breakdown (D47), under the number it adds up to */
.it3 .it3-body > .it3-parts {
  margin: 2px 0 4px 8px;
  font-size: 16px;
  color: var(--it3-grey);
}

/* the change figures (C61): small, beside the number they change */
.it3 .it3-d {
  font: 400 16px/1 'VT323', 'Courier New', monospace;
  margin-left: 6px;
}
.it3 .it3-d.is-up { color: var(--it3-green); }
.it3 .it3-d.is-dn { color: var(--it3-red); }

.it3 .it3-row { display: flex; justify-content: space-between; gap: 8px; }
.it3 .it3-white { color: var(--it3-white); }
.it3 .it3-grey { color: var(--it3-grey); }
.it3 .it3-green { color: var(--it3-green); }
.it3 .it3-red { color: var(--it3-red); }
.it3 .it3-flav { color: var(--it3-flav); }
.it3 .it3-ench { color: var(--g); }
.it3 .it3-body > .it3-gap { height: 8px; }

/* the socket: a small gem, lit when a card sits in it */
.it3 .it3-sock { display: flex; align-items: flex-start; gap: 7px; }
.it3 .it3-gem {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 3px;
  box-sizing: border-box;
  border: 1px solid #0a0d13;
  box-shadow: inset 0 0 0 1px #4a5264;
  background: #1c2230;
}
.it3 .it3-gem.is-on {
  background: linear-gradient(135deg, #e9dcb8, #a58d5d);
  box-shadow: inset 0 0 0 1px #fff6d8;
}
.it3 .it3-via { margin-left: 19px; }

.it3 .it3-serial {
  font: 400 13px/1.3 'Press Start 2P', 'Courier New', monospace;
  letter-spacing: 1px;
}
.it3 .it3-body > .it3-serial { margin-top: 8px; }

/* ── THE MAKER'S CALLING CARD (#3278, C62, C63): the mock's `.stamp.A`,
   renamed. A well inside the window: the portrait in the kit's dark
   portrait frame, the name with Profile and Message, the house banner, the
   guild in its accent with the guild's coin, how many they have made, and
   the relic number or the craft date on its last line. No badge row until
   badges exist (#3279). ── */
.it3 .it3-body > .it3-stamp {
  position: relative;
  margin-top: 11px;
  padding: 9px;
  background: rgba(8, 11, 16, .6);
  box-shadow: inset 0 0 0 1px #0a0d13, inset 0 0 0 2px #454e64;
}
.it3 .it3-stamp-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.it3 .it3-portrait {
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  border-image: url('/assets/cards/kit/cz_portraitDark.png?v=2026-09-26k') 8 fill / 4px stretch;
  image-rendering: pixelated;
}
.it3 .it3-bust {
  display: block;
  width: 50px;
  height: 50px;
  image-rendering: pixelated;
}
/* the left column: the portrait, and the badges under it in two columns
   (#3279 fills them; nothing draws them yet) */
.it3 .it3-stamp-side {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: start;
}
.it3 .it3-badges {
  display: grid;
  grid-template-columns: repeat(2, 20px);
  gap: 3px;
}
.it3 .it3-badges i {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px #3a4152;
}
.it3 .it3-badges i img { width: 16px; height: 16px; image-rendering: pixelated; }
.it3 .it3-stamp-main { min-width: 0; }
.it3 .it3-who {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.it3 .it3-handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 23px/1 'VT323', 'Courier New', monospace;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.it3 .it3-handle:hover { text-decoration: underline; }
.it3 .it3-sbtns { display: flex; flex: none; gap: 4px; }
/* the kit's dark button, drawn 4px, a 16px icon in it (the pinned card's
   Compare and close wear the same) */
.it3 .it3-ibtn {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-image: url('/assets/cards/kit/cz_btnDark.png?v=2026-09-26a') 4 fill / 4px stretch;
  cursor: pointer;
  image-rendering: pixelated;
  text-decoration: none;
}
.it3 .it3-ibtn img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.it3 .it3-ibtn:hover,
.it3 .it3-ibtn:focus-visible { filter: brightness(1.3); outline: none; }
.it3 .it3-ibtn:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }
.it3 .it3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0;
}
/* the house banner (public/assets/banners), stretched behind its name */
.it3 .it3-house {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 10px 0 7px;
  box-sizing: border-box;
  font: 400 7px/16px 'Press Start 2P', 'Courier New', monospace;
  letter-spacing: .5px;
  color: #fff;
  background-image: var(--hb);
  background-size: 100% 100%;
  image-rendering: pixelated;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
/* the guild in its accent (--gc), with the mock's small shield before it */
.it3 .it3-guild {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px 0 5px;
  box-sizing: border-box;
  font: 400 7px/16px 'Press Start 2P', 'Courier New', monospace;
  letter-spacing: .5px;
  color: #fff;
  background: var(--gc, #3a4152);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
.it3 .it3-guild::before {
  content: "";
  width: 7px;
  height: 8px;
  margin-right: 5px;
  background: #fff;
  opacity: .85;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
}
.it3 .it3-guild.is-none { --gc: #3a4152; color: #b8b2a2; }
.it3 .it3-guild.is-none::before { display: none; }
/* a guild with a coin: the coin's logo in place of the shield, and the chip
   opens the guild. One chip, the tag written once. */
.it3 .it3-guild.has-coin { padding-left: 2px; gap: 4px; text-decoration: none; cursor: pointer; }
.it3 .it3-guild.has-coin::before { display: none; }
.it3 .it3-guild.has-coin .it3-coin-logo { width: 12px; height: 12px; margin-left: 0; }
.it3 .it3-guild.has-coin:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }
/* the guild's coin: its logo and $TAG, opening the guild */
.it3 .it3-coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px 0 2px;
  box-sizing: border-box;
  font: 400 7px/16px 'Press Start 2P', 'Courier New', monospace;
  letter-spacing: .5px;
  color: #f3dfa2;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px #5a4a22;
  text-decoration: none;
  cursor: pointer;
}
.it3 .it3-coin-logo {
  width: 16px;
  height: 16px;
  margin-left: -2px;
  border-radius: 50%;
  object-fit: cover;
}
.it3 .it3-coin:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }
.it3 .it3-made {
  font: 400 16px/1 'VT323', 'Courier New', monospace;
  color: var(--it3-grey);
}
.it3 .it3-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
/* EAT on a meal's pinned card (#3619, EAT-AB): the kit's dark button with a
   word in it, at the foot of the card */
.it3 .ww-eatfoot { justify-content: flex-end; }
.it3 .it3-eat {
  min-height: 0;
  margin: 0;
  padding: 6px 18px 5px;
  background: none;
  border: 0;
  border-image: url('/assets/cards/kit/cz_btnDark.png?v=2026-09-26a') 4 fill / 4px stretch;
  font: 400 22px/1 'VT323', 'Courier New', monospace;
  letter-spacing: 2px;
  color: var(--it3-white);
  cursor: pointer;
  image-rendering: pixelated;
}
.it3 .it3-eat:hover,
.it3 .it3-eat:focus-visible { filter: brightness(1.3); outline: none; }
.it3 .it3-eat:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }

/* a finger's buttons are a finger tall: the icons stay 16, the target grows */
@media (pointer: coarse) {
  .it3 .it3-ibtn { width: 44px; height: 44px; }
  .it3 .it3-eat { min-height: 44px; padding-inline: 24px; }
}

.it3 .it3-body > .it3-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 400 7px/1 'Press Start 2P', 'Courier New', monospace;
  letter-spacing: .5px;
  color: var(--it3-grey);
}
.it3 .it3-body > .it3-hint.is-on { color: var(--it3-green); }
/* "COMPARING WITH WHAT YOU WEAR" and "TAP TO PIN" are wider than the window
   together: the second drops to its own line, still at the right, rather than
   each breaking mid-phrase */
.it3 .it3-body > .it3-hint { flex-wrap: wrap; row-gap: 5px; }
.it3 .it3-hint > span { white-space: nowrap; }
.it3 .it3-hint > :last-child { margin-left: auto; }

/* a pinned card's controls: the kit's dark button, drawn 4px */
.it3 .it3-cmp,
.it3 > .it3-close {
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  background: none;
  border: 0;
  border-image: url('/assets/cards/kit/cz_btnDark.png?v=2026-09-26a') 4 fill / 4px stretch;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: none;
  color: #e9e3d3;
  cursor: pointer;
  image-rendering: pixelated;
}
.it3 .it3-cmp {
  height: 20px;
  padding: 0 8px;
  font-size: 7px;
  line-height: 20px;
}
.it3 .it3-cmp[aria-pressed='true'] { color: var(--it3-green); }
.it3 > .it3-close {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 8px;
  line-height: 18px;
}
.it3 .it3-cmp:focus-visible,
.it3 > .it3-close:focus-visible { outline: 1px solid var(--it3-ip); outline-offset: 2px; }
/* a finger's buttons are a finger tall */
@media (pointer: coarse) {
  .it3 .it3-cmp { height: 44px; line-height: 44px; padding: 0 14px; }
  .it3 > .it3-close { width: 44px; height: 44px; line-height: 44px; right: 4px; top: 4px; }
  .it3.is-pinned-tip .it3-name { margin-right: 44px; }
}

@keyframes it3Slide { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .it3 .it3-wave,
  .it3 .it3-body > .it3-rule,
  .it3 > .it3-halo,
  .it3 > .it3-edge { animation: none; }
}

}
/* end of @layer corners */