/* SkyBlock DPS Lab – Minecraft authenticity layer (loads after styles.css and panels.css).
   1. Pixel font            "Monocraft SkyBlock" (fonts/monocraft-sb.woff, OFL 1.1, built by tools/build_mc_font.py)
   2. Lore colour codes     .mc-c0 … .mc-cf (+ .mc-l bold, .mc-o italic, .mc-n underline, .mc-m strike, .mc-k obfuscated)
                            – rendered by ui/tooltip.js mcSpans(); theme-aware outside the tooltip
   3. Item tooltip          .mc-tooltip (ui/tooltip.js) – the in-game lore box: #100010 @ 94 %, notched corners,
                            1 px #5000FF → #28007F border at 31 % alpha, pixel font on the Minecraft grid, drop shadows
   4. Item icons            .mc-icon (ui/icons.js) – pixelated, sizes .mc-icon--16/24/32/48 or --icon-size,
                            .mc-icon--frame (inventory slot, tinted by data-rarity="LEGENDARY"), .mc-icon--glint
                            (enchant glint), .mc-icon--head (skull items: <img> child, never cropped),
                            .mc-icon--face (flat player face), .is-pending / .is-missing (or data-state).
   Icon contract for ui/icons.js: put the texture on the element as --icon-img: url(…) (plus --icon-pos and
   --icon-bgsize for atlas sprites) – it is used both as the background and as the glint mask. An <img> child also
   works; the glint then needs the same url as --glint-mask (or --icon-img) – without a mask there is no glint
   rather than a purple square. */

/* ------------------------------------------------------------------------------------------ */
/* 1. Font                                                                                      */

@font-face {
  font-family: 'Monocraft SkyBlock';
  src: url('../fonts/monocraft-sb.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-mc: 'Monocraft SkyBlock', 'Minecraft', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* ------------------------------------------------------------------------------------------ */
/* 2. § colour / format codes (theme-aware on the page; authentic inside .mc-tooltip)           */

.mc-c0 { color: var(--mc-0); --mc-sh: #000000; }
.mc-c1 { color: var(--mc-1); --mc-sh: #00002a; }
.mc-c2 { color: var(--mc-2); --mc-sh: #002a00; }
.mc-c3 { color: var(--mc-3); --mc-sh: #002a2a; }
.mc-c4 { color: var(--mc-4); --mc-sh: #2a0000; }
.mc-c5 { color: var(--mc-5); --mc-sh: #2a002a; }
.mc-c6 { color: var(--mc-6); --mc-sh: #3f2a00; }
.mc-c7 { color: var(--mc-7); --mc-sh: #2a2a2a; }
.mc-c8 { color: var(--mc-8); --mc-sh: #151515; }
.mc-c9 { color: var(--mc-9); --mc-sh: #15153f; }
.mc-ca { color: var(--mc-a); --mc-sh: #153f15; }
.mc-cb { color: var(--mc-b); --mc-sh: #153f3f; }
.mc-cc { color: var(--mc-c); --mc-sh: #3f1515; }
.mc-cd { color: var(--mc-d); --mc-sh: #3f153f; }
.mc-ce { color: var(--mc-e); --mc-sh: #3f3f15; }
.mc-cf { color: var(--mc-f); --mc-sh: #3f3f3f; }
.mc-l { font-weight: 600; }
.mc-o { font-style: italic; }
.mc-n { text-decoration: underline; }
.mc-m { text-decoration: line-through; }
.mc-n.mc-m { text-decoration: underline line-through; }

/* ------------------------------------------------------------------------------------------ */
/* 3. Item tooltip                                                                              */

.mc-tooltip {
  /* One Minecraft pixel in CSS px (GUI scale); ui/tooltip.js picks 2, 1.5 or 1 so the box fits the viewport. */
  --mc-px: 2px;
  --mc-bg: rgba(16, 0, 16, 0.94);
  /* The real Minecraft palette – the box is always dark, whatever the page theme. */
  --mc-0: #000000; --mc-1: #0000aa; --mc-2: #00aa00; --mc-3: #00aaaa;
  --mc-4: #aa0000; --mc-5: #aa00aa; --mc-6: #ffaa00; --mc-7: #aaaaaa;
  --mc-8: #555555; --mc-9: #5555ff; --mc-a: #55ff55; --mc-b: #55ffff;
  --mc-c: #ff5555; --mc-d: #ff55ff; --mc-e: #ffff55; --mc-f: #ffffff;

  position: fixed;
  inset: auto;
  left: 0;
  top: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  /* in-game: text 2 px inside the border; the font's baseline sits 8 of 10 px down the line box */
  padding: var(--mc-px) calc(2 * var(--mc-px));
  overflow: visible;
  color: var(--mc-7);
  background: var(--mc-bg);
  /* 1 px border: #5000FF at the top fading to #28007F at the bottom, both at alpha 0x50 over the background */
  border: var(--mc-px) solid transparent;
  border-image: linear-gradient(to bottom, rgba(80, 0, 255, 0.314), rgba(40, 0, 127, 0.314)) 1;
  /* the background reaches one more pixel past each edge but not into the corners (notched outline) */
  box-shadow:
    0 calc(-1 * var(--mc-px)) 0 0 var(--mc-bg),
    0 var(--mc-px) 0 0 var(--mc-bg),
    calc(-1 * var(--mc-px)) 0 0 0 var(--mc-bg),
    var(--mc-px) 0 0 0 var(--mc-bg);
  /* Not in-game, but on a web page the text behind a 94 % box would still be legible: blur it into a haze. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--font-mc);
  font-size: calc(9 * var(--mc-px));
  font-weight: 400;
  font-style: normal;
  line-height: calc(10 * var(--mc-px));
  letter-spacing: 0;
  word-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: pre;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
  font-synthesis: style;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: layout style;
}
.mc-tooltip[hidden] { display: none !important; }
.mc-tooltip[data-scale="1.5"] { --mc-px: 1.5px; }
.mc-tooltip[data-scale="1"] { --mc-px: 1px; }
.mc-tooltip.is-wrapping { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Tapped open on touch: may scroll when taller than the screen. */
.mc-tooltip[data-mode="pinned"] {
  pointer-events: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  user-select: text;
  -webkit-user-select: text;
}
.mc-tooltip[data-mode="pinned"]::-webkit-scrollbar { display: none; }

.mc-tooltip__body { display: block; }
.mc-line { display: block; min-height: calc(10 * var(--mc-px)); }
.mc-line--title:not(:last-child) { margin-bottom: calc(2 * var(--mc-px)); }

/* Drop shadow: one pixel down-right in a quarter of the text colour (exactly how the game draws text). */
.mc-tooltip .mc-line > span {
  text-shadow: var(--mc-px) var(--mc-px) 0 var(--mc-sh, #2a2a2a);
}
/* Bold: the game draws the glyph twice, one pixel apart, and advances one extra pixel per character. */
.mc-tooltip .mc-l {
  font-weight: 400;
  letter-spacing: var(--mc-px);
  text-shadow:
    var(--mc-px) 0 0 currentColor,
    var(--mc-px) var(--mc-px) 0 var(--mc-sh, #2a2a2a),
    calc(2 * var(--mc-px)) var(--mc-px) 0 var(--mc-sh, #2a2a2a);
}
/* Underline / strikethrough the way the game draws them: 1 px bars across the whole run – spaces included (Hypixel's
   pet XP bar is struck-through spaces, which text-decoration skips) – strike on the middle cap row with its own drop
   shadow, underline on the row below the descenders. The font's content area is exactly the 10 px line box
   (ascent 8 + descent 2), so the rows are measured from the top of the line. */
.mc-tooltip .mc-n,
.mc-tooltip .mc-m {
  --mc-bar: linear-gradient(currentColor, currentColor);
  --mc-bar-sh: linear-gradient(var(--mc-sh, #2a2a2a), var(--mc-sh, #2a2a2a));
  text-decoration: none;
  background-repeat: no-repeat;
}
.mc-tooltip .mc-m {
  background-image: var(--mc-bar), var(--mc-bar-sh);
  background-size: 100% var(--mc-px), 100% var(--mc-px);
  background-position: 0 calc(4 * var(--mc-px)), var(--mc-px) calc(5 * var(--mc-px));
}
.mc-tooltip .mc-n {
  background-image: var(--mc-bar);
  background-size: 100% var(--mc-px);
  background-position: 0 calc(9 * var(--mc-px));
}
.mc-tooltip .mc-n.mc-m {
  background-image: var(--mc-bar), var(--mc-bar), var(--mc-bar-sh);
  background-size: 100% var(--mc-px), 100% var(--mc-px), 100% var(--mc-px);
  background-position: 0 calc(9 * var(--mc-px)), 0 calc(4 * var(--mc-px)), var(--mc-px) calc(5 * var(--mc-px));
}

/* Touch: a long press on a tooltip anchor opens the lore box (ui/tooltip.js) – not the callout / text selection. */
@media (hover: none) {
  [data-mc-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

@media (forced-colors: active) {
  .mc-tooltip { background: Canvas; color: CanvasText; border: 1px solid CanvasText; border-image: none; box-shadow: none; }
  .mc-tooltip .mc-line > span { text-shadow: none; }
}
@media print { .mc-tooltip { display: none !important; } }

/* ------------------------------------------------------------------------------------------ */
/* 4. Item icons                                                                                */

.mc-icon {
  --icon-size: 32px;
  --frame-pad: 0px;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: content-box;
  width: var(--icon-size);
  height: var(--icon-size);
  padding: var(--frame-pad);
  vertical-align: middle;
  line-height: 0;
  background-image: var(--icon-img, none);
  background-position: var(--icon-pos, center);
  background-size: var(--icon-bgsize, contain);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.mc-icon--16 { --icon-size: 16px; }
.mc-icon--24 { --icon-size: 24px; }
.mc-icon--32 { --icon-size: 32px; }
.mc-icon--48 { --icon-size: 48px; }
.mc-icon > img,
.mc-icon > canvas,
.mc-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-user-drag: none;
}
img.mc-icon { object-fit: contain; }

/* Skull items (Hypixel custom head skins rendered as isometric heads – often not square, e.g. 50×53) and player
   avatars (flat faces). contain: a head is never cropped; .mc-head is a bare <img> outside .mc-icon. */
.mc-head,
.mc-icon--head > img,
img.mc-icon--head {
  width: var(--icon-size, 32px);
  height: var(--icon-size, 32px);
  object-fit: contain;
  image-rendering: pixelated;
}
.mc-icon--head > img { width: 100%; height: 100%; }
.mc-icon--head { background-size: var(--icon-bgsize, contain); }
/* Flat player faces (avatars): square, a hair of rounding. */
.mc-icon--face > img, img.mc-icon--face, img.mc-head--face { object-fit: cover; border-radius: 2px; }

/* Before the manifest / texture has loaded, and textures that do not exist. */
.mc-icon.is-pending,
.mc-icon[data-state="pending"] {
  background-color: var(--skel, var(--raised));
  border-radius: 2px;
}
.mc-icon.is-missing,
.mc-icon[data-state="missing"] {
  background-color: var(--raised);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Rarity → --rarity (frames, glint tint, or any child that wants it). */
[data-rarity="COMMON" i] { --rarity: var(--r-common); }
[data-rarity="UNCOMMON" i] { --rarity: var(--r-uncommon); }
[data-rarity="RARE" i] { --rarity: var(--r-rare); }
[data-rarity="EPIC" i] { --rarity: var(--r-epic); }
[data-rarity="LEGENDARY" i] { --rarity: var(--r-legendary); }
[data-rarity="MYTHIC" i] { --rarity: var(--r-mythic); }
[data-rarity="DIVINE" i] { --rarity: var(--r-divine); }
[data-rarity="SPECIAL" i] { --rarity: var(--r-special); }
[data-rarity="VERY_SPECIAL" i] { --rarity: var(--r-very_special); }
[data-rarity="ULTIMATE" i] { --rarity: var(--r-ultimate); }
[data-rarity="ADMIN" i] { --rarity: var(--r-admin); }

/* Inventory slot: a recessed square, 1 px inset edge tinted by rarity – no glow. */
.mc-icon--frame {
  --frame-pad: calc(var(--icon-size) / 8);
  --slot-bg: var(--bg);
  --slot-line: var(--border-strong);
  border-radius: var(--radius-sm, 4px);
  background-color: var(--slot-bg);
  box-shadow: inset 0 0 0 1px var(--slot-line);
}
.mc-icon--frame[data-rarity] {
  --slot-bg: color-mix(in srgb, var(--rarity) 7%, var(--bg));
  --slot-line: color-mix(in srgb, var(--rarity) 55%, var(--border));
}
:root[data-theme="light"] .mc-icon--frame { --slot-bg: #eceef1; }
:root[data-theme="light"] .mc-icon--frame[data-rarity] {
  --slot-bg: color-mix(in srgb, var(--rarity) 6%, #eceef1);
  --slot-line: color-mix(in srgb, var(--rarity) 60%, var(--border-strong));
}

/* Enchant glint: a slow purple sheen sweeping over the item's pixels (masked to the texture when --icon-img is set). */
.mc-icon--glint::after {
  content: '';
  position: absolute;
  inset: var(--frame-pad);
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 0 38%, rgba(140, 70, 255, 0.32) 46%, rgba(190, 150, 255, 0.5) 50%, rgba(140, 70, 255, 0.32) 54%, transparent 62% 100%),
    linear-gradient(rgba(128, 64, 204, 0.09), rgba(128, 64, 204, 0.09)); /* faint resting tint: dyes stay true */
  background-size: 300% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: var(--glint-mask, var(--icon-img, linear-gradient(transparent, transparent)));
  mask-image: var(--glint-mask, var(--icon-img, linear-gradient(transparent, transparent)));
  -webkit-mask-position: var(--icon-pos, center);
  mask-position: var(--icon-pos, center);
  -webkit-mask-size: var(--icon-bgsize, contain);
  mask-size: var(--icon-bgsize, contain);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: mc-glint 3.2s linear infinite;
}
@supports (mix-blend-mode: plus-lighter) {
  .mc-icon--glint::after { mix-blend-mode: plus-lighter; }
}
@keyframes mc-glint {
  0% { background-position: 120% 0, 0 0; }
  70%, 100% { background-position: -20% 0, 0 0; }
}
:root[data-theme="light"] .mc-icon--glint::after { mix-blend-mode: normal; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .mc-icon--glint::after { animation: none; background-position: 120% 0, 0 0; } /* no frozen band – just the tint */
}
@media (forced-colors: active) {
  .mc-icon--glint::after { display: none; }
  .mc-icon--frame { border: 1px solid CanvasText; }
}