@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #080808;
  --bg2: #0e0e0e;
  --bg3: #151515;
  --line: #222;
  --line2: #333;
  --fg: #ececec;
  --mute: #7d7d7d;
  --dim: #4a4a4a;
  --acc: #d4ff00;
  --ink: #0a0a0a;
  --red: #ff3b2f;
  --blue: #3d6bff;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .1, 1);
  --spring: cubic-bezier(.3, 1.6, .4, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--acc); color: var(--ink); }
a { color: inherit; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.mono { font-family: var(--mono); }
.label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.acc { color: var(--acc); }
.wide { font-stretch: 125%; }
.narrow { font-stretch: 62%; }

/* grain over everything — subtle, animated */
.grain {
  pointer-events: none;
  position: fixed;
  inset: -100%;
  z-index: 9998;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(5%, -9%); }
  60% { transform: translate(-3%, 7%); } 80% { transform: translate(9%, 2%); } 100% { transform: translate(0, 0); }
}

/* buttons */
.btn {
  --b: var(--fg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.3em;
  border: 1px solid var(--b);
  background: transparent;
  color: var(--fg);
  font: 600 13px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s var(--ease), border-color .3s;
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--b);
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: none; }
.btn.solid { background: var(--acc); border-color: var(--acc); color: var(--ink); }
.btn.solid::before { background: var(--fg); }
.btn.ghost { border-color: var(--line2); }
.btn.ghost::before { background: var(--fg); }
.btn.sm { padding: .6em .9em; font-size: 11px; }
.btn.danger { --b: var(--red); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px) rotate(-45deg); }

/* inputs */
.field { display: grid; gap: 7px; }
.input, select.input, textarea.input {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--line2);
  padding: .8em .9em;
  outline: none;
  border-radius: 0;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.input:focus { border-color: var(--acc); background: #0b0b0b; box-shadow: 0 0 0 3px #d4ff0014; }
textarea.input { resize: vertical; min-height: 80px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2em; }

.tag {
  display: inline-block;
  padding: 3px 6px;
  font: 700 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.tag.pro { color: var(--acc); }

/* toast */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: grid; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 360px;
  padding: 12px 14px 12px 16px;
  background: var(--fg);
  color: var(--ink);
  font: 500 13px/1.35 var(--mono);
  border-left: 4px solid var(--acc);
  animation: toastIn .5s var(--spring) both;
  box-shadow: 0 10px 30px #0008;
}
.toast.err { border-left-color: var(--red); }
.toast.out { animation: toastOut .3s var(--ease) both; }
@keyframes toastIn { from { transform: translateX(120%) skewX(-10deg); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

/* custom cursor (marketing + dashboard) */
.cur, .cur-dot { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 10000; mix-blend-mode: difference; }
.cur { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s; }
.cur.big { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #fff; }
.cur-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; border-radius: 50%; }
@media (hover: none) { .cur, .cur-dot { display: none; } }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
/* wipe via a cover layer — clip-path on the element itself would hide it from IntersectionObserver */
[data-reveal='clip'] { opacity: 1; transform: none; position: relative; }
[data-reveal='clip']::after { content: ''; position: absolute; inset: 0; z-index: 5; background: var(--bg); transform-origin: top; pointer-events: none; transition: transform 1.1s var(--ease); }
[data-reveal='clip'].in::after { transform: scaleY(0); }
[data-reveal='left'] { transform: translateX(-60px); }
[data-reveal='scale'] { transform: scale(.85); }
[data-reveal].in { opacity: 1; transform: none; }

.split-ch { display: inline-block; transform: translateY(110%) rotate(8deg); opacity: 0; transition: transform .9s var(--spring), opacity .5s; }
.split-wrap { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.in .split-ch, .split-ch.in { transform: none; opacity: 1; }

.skeleton { background: linear-gradient(90deg, var(--bg2), var(--bg3), var(--bg2)); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- stars currency ---------- */
.st { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; filter: drop-shadow(0 0 5px #ffb30055); flex: none; }
.stv { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.stv b { font-weight: inherit; }
.fly-star { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 10001; pointer-events: none; will-change: transform; }
.fly-star .st { width: 100%; height: 100%; }

/* ---------- smoothness ---------- */
html { scroll-behavior: smooth; interpolate-size: allow-keywords; }
.btn { transition: color .3s var(--ease), border-color .3s, transform .25s var(--spring); }
.btn:active { transform: scale(.96); transition-duration: .08s; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
details[open]::details-content { block-size: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(view) { animation: vtOut .22s var(--ease) both; }
::view-transition-new(view) { animation: vtIn .5s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* ---------- animated emoji ---------- */
img.ae:not(.gift-model) { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; margin: 0 .04em; object-fit: contain; user-select: none; }
.ae-txt { font-style: normal; }

/* ---------- collectible gifts (telegram-style: model + backdrop + symbol pattern + number) ---------- */
.gift { --c1: #3b3b3b; --c2: #0b0b0b; --pc: #7a7a7a; position: relative; aspect-ratio: 1; width: 100%; container-type: inline-size; overflow: hidden; isolation: isolate; border-radius: inherit;
  background: radial-gradient(circle at 50% 46%, var(--c1), var(--c2) 74%); }
.gift-pat { position: absolute; inset: 0; animation: giftSpin 140s linear infinite; pointer-events: none; }
.gift-pat i { position: absolute; transform: translate(-50%, -50%); color: var(--pc); font-style: normal; line-height: 1; font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--sans); }
@keyframes giftSpin { to { transform: rotate(360deg); } }
.gift-model { position: absolute; left: 50%; top: 50%; width: 58%; height: 58%; margin: 0; transform: translate(-50%, -50%); object-fit: contain;
  filter: drop-shadow(0 5cqw 6cqw rgba(0, 0, 0, .45)); transition: transform .6s var(--spring); pointer-events: none; }
.gift-model.ae-txt { display: grid; place-items: center; font-size: 40cqw; line-height: 1; }
.gift:hover .gift-model { transform: translate(-50%, -55%) scale(1.07) rotate(-3deg); }
.gift::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1s var(--ease); pointer-events: none; }
.gift:hover::after { background-position: -30% 0; }
.gift-num { position: absolute; top: 5.5cqw; right: 6cqw; font: 700 6cqw/1 var(--mono); letter-spacing: .04em; color: color-mix(in srgb, var(--pc) 70%, #fff); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.gift.mini .gift-num, .gift.mini::after { display: none; }
.gift.mini .gift-pat i { opacity: .25 !important; }
.gift.mini .gift-model { width: 76%; height: 76%; filter: none; }

/* hover card for a status collectible */
.gcard { width: 230px; padding: 10px; background: #0b0b0b; border: 1px solid #2c2c2c; box-shadow: 0 24px 60px -12px #000c; color: #ececec; text-align: left; border-radius: 12px; }
.gcard-art { border-radius: 8px; overflow: hidden; }
.gcard-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 10px 2px 8px; }
.gcard-t b { font: 800 16px var(--sans); font-stretch: 112%; }
.gcard-t span { font-size: 12px; color: #ffd54a; }
.gcard-rows { display: grid; gap: 0; font-size: 11px; }
.gcard-rows div { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; padding: 6px 2px; border-top: 1px solid #1d1d1d; align-items: center; }
.gcard-rows span { color: #7d7d7d; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.gcard-rows b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-rows i { font-style: normal; color: #7d7d7d; font-size: 10px; }

/* the collectible next to a name */
.stx { position: relative; display: inline-grid; place-items: center; width: .95em; height: .95em; margin-left: .22em; vertical-align: -.08em; border-radius: 28%; cursor: pointer; text-decoration: none; transition: transform .35s var(--spring); }
.stx .gift { border-radius: inherit; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 6px 18px -6px var(--c1); }
.stx:hover { transform: scale(1.12) rotate(-6deg); }
.stx .gcard { position: absolute; left: 50%; top: calc(100% + 10px); z-index: 50; font-size: 14px; letter-spacing: 0; line-height: 1.4; font-weight: 400; white-space: normal;
  opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(.96); transform-origin: top center; transition: opacity .25s var(--ease), transform .35s var(--spring); }
.stx:hover .gcard, .stx:focus-visible .gcard, .stx.open .gcard { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* real Telegram gifts: symbols are silhouettes tinted with the backdrop's pattern colour, models swap PNG -> Lottie */
.gift-pat i.sym { background: var(--pc); -webkit-mask: var(--sym) center / contain no-repeat; mask: var(--sym) center / contain no-repeat; }
.gift.tgg > .gift-model { width: 64%; height: 64%; }
.gift.tgg.mini > .gift-model { width: 80%; height: 80%; }
.gift-lottie svg { display: block; width: 100% !important; height: 100% !important; }
.gift.playing > img.gift-model { opacity: 0; }
.gpop { position: fixed; z-index: 70; pointer-events: none; animation: gpopIn .35s var(--spring) both; }
@keyframes gpopIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* model only, no backdrop — the gift shown next to a name */
.gift.bare { background: none; overflow: visible; }
.gift.bare::after { display: none; }
.gift.bare > .gift-model, .gift.tgg.bare > .gift-model { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.gift.bare:hover > .gift-model { transform: translate(-50%, -50%); }
.stx .gift.bare { box-shadow: none; }
.stx:hover { transform: scale(1.15) rotate(-4deg); }

/* ---------- emoji picker ---------- */
.ep-wrap { position: relative; display: block; width: 100%; }
.ep-wrap > .input { padding-right: 40px; }
.ep-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 3px; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; transition: color .2s, background .2s, transform .3s var(--spring); }
.ep-ta .ep-btn { top: 8px; transform: none; }
.ep-btn svg { width: 100%; height: 100%; }
.ep-btn:hover { color: var(--acc); background: rgba(255, 255, 255, .05); transform: translateY(-50%) rotate(-12deg) scale(1.1); }
.ep-ta .ep-btn:hover { transform: rotate(-12deg) scale(1.1); }
.ep-btn:disabled { opacity: .35; pointer-events: none; }
.ep-pop { position: fixed; z-index: 10002; width: 330px; max-width: calc(100vw - 16px); display: grid; grid-template-rows: auto auto 1fr auto; height: 380px; max-height: calc(100vh - 16px);
  background: rgba(12, 12, 12, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 30px 70px -20px #000; overflow: hidden; animation: epIn .25s var(--spring); }
@keyframes epIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.ep-q { margin: 10px 10px 6px; padding: 9px 11px; border: 1px solid var(--line2); border-radius: 9px; background: rgba(255, 255, 255, .04); font: 13px var(--mono); outline: none; }
.ep-q:focus { border-color: var(--acc); }
.ep-tabs { display: flex; gap: 2px; padding: 0 8px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ep-tabs button { flex: none; width: 32px; height: 30px; border: 0; border-radius: 8px; background: none; font-size: 17px; cursor: pointer; filter: grayscale(.7); opacity: .6; transition: .2s; }
.ep-tabs button:hover, .ep-tabs button.on { filter: none; opacity: 1; background: rgba(255, 255, 255, .07); }
.ep-grid { display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; gap: 2px; padding: 8px; overflow-y: auto; }
.ep-e { aspect-ratio: 1; border: 0; border-radius: 8px; background: none; cursor: pointer; display: grid; place-items: center; padding: 3px; transition: background .15s, transform .25s var(--spring); }
.ep-e:hover { background: rgba(255, 255, 255, .09); transform: scale(1.18); }
.ep-e img.ae { width: 100% !important; height: 100% !important; margin: 0 !important; vertical-align: 0 !important; }
.ep-none { grid-column: 1 / -1; padding: 30px 10px; text-align: center; font: 12px var(--mono); color: var(--mute); }
.ep-foot { padding: 7px 12px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- live sales ticker ---------- */
.ticker { position: relative; display: flex; align-items: center; height: 36px; overflow: hidden; border-bottom: 1px solid var(--line); background: rgba(10, 10, 10, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 12px var(--mono); }
.ticker.ping { animation: tkPing 1.2s var(--ease); }
@keyframes tkPing { 0% { box-shadow: inset 0 0 0 1px var(--acc); background: color-mix(in srgb, var(--acc) 12%, #0a0a0a); } }
.tk-live { flex: none; display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px; border-right: 1px solid var(--line); font: 700 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); background: var(--bg); z-index: 1; }
.tk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 var(--red); animation: tkDot 1.6s infinite; }
@keyframes tkDot { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tk-roll { display: flex; width: max-content; animation: tkRoll linear infinite; }
.ticker:hover .tk-roll { animation-play-state: paused; }
@keyframes tkRoll { to { transform: translateX(-50%); } }
.tk-row { display: flex; }
.tk-i { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; height: 36px; white-space: nowrap; text-decoration: none; color: var(--mute); border-right: 1px solid var(--line); transition: background .2s; }
.tk-i:hover { background: rgba(255, 255, 255, .04); color: var(--fg); }
.tk-i b { color: var(--fg); font-weight: 600; }
.tk-i .tk-t { color: var(--fg); }
.tk-i .tk-p { color: #ffd54a; }
.tk-i i { font-style: normal; color: var(--dim); font-size: 10px; }
.tk-i.fresh { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.tk-i.fresh::before { content: 'NEW'; font: 700 8px var(--mono); padding: 2px 4px; background: var(--acc); color: var(--ink); }
.tk-art { width: 22px; height: 22px; border-radius: 5px; overflow: hidden; flex: none; display: grid; place-items: center; }
.tk-at { background: var(--bg3); color: var(--acc); font-weight: 800; }
.tk-empty { padding: 0 16px; color: var(--dim); }
.ep-e { position: relative; }
.ep-g { font-size: 22px; line-height: 1; transition: opacity .2s; }
.ep-e img.ae { position: absolute; inset: 3px; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; opacity: 0; transition: opacity .25s; }
.ep-e img.ae.ok { opacity: 1; }
.ep-e:has(img.ok) .ep-g { opacity: 0; }

/* ---------- price chart ---------- */
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.pc-legend { display: flex; gap: 14px; flex-wrap: wrap; font: 11px var(--mono); color: var(--mute); }
.pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pc-line { width: 16px; height: 2px; border-radius: 2px; display: inline-block; }
.pc-floor { width: 16px; height: 0; border-top: 2px dashed var(--mute); display: inline-block; }
.pc-tbl-btn { border: 1px solid var(--line2); background: none; padding: 4px 8px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); cursor: pointer; }
.pc-tbl-btn:hover { color: var(--fg); border-color: var(--fg); }
.pc-wrap { position: relative; }
.pc { display: block; width: 100%; height: auto; }
.pc-grid { stroke: #ffffff12; stroke-width: 1; }
.pc-ax { font: 10px var(--mono); fill: var(--mute); }
.pc-floorline { stroke: var(--mute); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pc-cross { stroke: #ffffff55; stroke-width: 1; }
.pc-hit { cursor: crosshair; }
.pc-tip { position: absolute; pointer-events: none; padding: 7px 10px; background: #000d; border: 1px solid var(--line2); border-radius: 8px; font: 11px/1.45 var(--mono); color: var(--fg); white-space: nowrap; z-index: 3; }
.pc-tip span { color: var(--mute); }
.pc-empty { padding: 26px 16px; text-align: center; border: 1px dashed var(--line2); font: 12px var(--mono); color: var(--mute); }
.pc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font: 11px var(--mono); }
.pc-table th, .pc-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.pc-table th { color: var(--mute); font-weight: 500; }

/* rough dollar worth next to star prices — quiet on purpose */
.usd { margin-left: 4px; font: 400 .82em var(--mono); color: rgba(255, 255, 255, .38); letter-spacing: 0; white-space: nowrap; }

/* the mascot sits in front of the wordmark everywhere the logo appears */
a.logo { white-space: nowrap; }
a.logo::before { content: ''; display: inline-block; vertical-align: -.28em; width: 1.35em; height: 1.35em; margin-right: .28em; background: url('https://fonts.gstatic.com/s/e/notoemoji/latest/1f410/512.webp') center / contain no-repeat; transform-origin: 50% 100%; transition: transform .35s var(--spring); }
a.logo:hover::before { transform: rotate(-10deg) translateY(-2px) scale(1.08); }
.side a.logo { display: block; }

/* in-site confirm / prompt dialog (ui.js ask) */
.ask-ov { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); animation: askIn .18s ease-out; }
.ask-ov.out { opacity: 0; transition: opacity .18s; }
.ask-box { width: min(420px, 100%); display: grid; gap: 14px; padding: 22px; border: 1px solid var(--line2); border-radius: 16px; background: #0f0f10; box-shadow: 0 30px 80px -20px #000; animation: askPop .25s var(--spring); }
.ask-box h3 { margin: 0; font: 700 18px var(--sans); }
.ask-box p { margin: 0; font: 13px/1.6 var(--mono); color: #b5b5b5; }
.ask-acts { display: flex; justify-content: flex-end; gap: 8px; }
@keyframes askIn { from { opacity: 0; } }
@keyframes askPop { from { transform: translateY(10px) scale(.97); opacity: 0; } }

/* the goat that follows the cursor (desktop only — see ui.js goatFollower) */
.cur-goat { position: fixed; left: 0; top: 0; z-index: 9998; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.cur-goat.on { opacity: 1; }
.cur-goat img { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.cur-goat.rest img { animation: goatRest 2.4s ease-in-out infinite; }
@keyframes goatRest { 50% { translate: 0 -1px; } }

/* ---------- steady hovers ----------
   Lots of things lift, tilt or grow when hovered. Moving the box moves its hover area too, so with the mouse near
   an edge it would slide out from under the cursor, un-hover, drop back, re-hover… and flicker. While hovered,
   each of these gets an invisible pseudo-element covering where it used to be (plus a margin), so the hover holds. */
:is(.tp, .badge, .relic, .ico, .lnk, .soc-card, .presence, .discord, .lw-btn, .preset, .rl, .curb, .upg, .pm-f, .vt-card, .sh, .wl-scene, .wl-opt, .coin-pill, .nm-card, .stx, .dr-models span):hover::after,
:is(.chip, .tu):hover::before {
  content: ''; position: absolute; inset: -7px; z-index: -1; background: none; border: 0; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; animation: none;
}
/* the gift card that pops out of a name: bridge the gap so moving onto it doesn't close it */
.stx .gcard::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* one floating tooltip for anything with data-tip (see ui.js tips()) — never clipped, never in the way */
.gd-tip { position: fixed; z-index: 2147483000; left: 0; top: 0; padding: 6px 9px; max-width: min(280px, 90vw); background: #000; color: #fff; border: 1px solid #333; border-radius: 6px;
  font: 500 10.5px/1.35 var(--mono, ui-monospace, monospace); letter-spacing: .03em; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; white-space: normal; text-align: center; }
.gd-tip.on { opacity: 1; transform: none; }
@media (hover: none) { .gd-tip { display: none; } }