/* ============================================================================
   DB INVESTING AD OVERLAY  ·  db-ad.css
   THARΞX palette. Namespace .dbi-* — no collisions with style.css.
   Breakpoints: phone < 600px · tablet 600–1023px · desktop ≥ 1024px
   ============================================================================ */

.dbi-ad {
  --dbi-accent: var(--c-accent, #d4ff00);
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px 16px 46px;
}
.dbi-ad.is-open { display: flex; }

.dbi-ad__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 6, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.dbi-ad__box {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100dvh - 72px);
  display: flex;
  flex-direction: column;
  background: var(--c-panel, #111);
  border: 0.5px solid rgba(212, 255, 0, 0.32);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 70px rgba(212, 255, 0, 0.07);
  animation: dbiIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* shimmer hairline — same treatment as the site's cards */
.dbi-ad__box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 4;
  background: linear-gradient(90deg, transparent 0%, var(--dbi-accent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: dbiShimmer 3s linear infinite;
  pointer-events: none;
}
@keyframes dbiShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes dbiIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* -------------------- top bar -------------------- */
.dbi-ad__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 11px 15px;
  background: var(--c-panel-2, #161616);
  border-bottom: 0.5px solid var(--c-line, #222);
}
.dbi-ad__brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dbi-ad__mark {
  font-family: 'Major Mono Display', monospace;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--c-text, #e8e8e8);
  line-height: 1;
}
.dbi-ad__mark i { font-style: normal; color: var(--dbi-accent); }
.dbi-ad__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dbi-ad__x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0.5px solid var(--c-line-2, #2a2a2a);
  border-radius: 3px;
  background: transparent;
  color: var(--c-text-mute, #888);
  font: 400 18px/1 'Manrope', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dbi-ad__x:hover {
  border-color: var(--dbi-accent);
  color: var(--dbi-accent);
  background: rgba(212, 255, 0, 0.06);
}
.dbi-ad__x:focus-visible { outline: 2px solid var(--dbi-accent); outline-offset: 2px; }

/* -------------------- creative -------------------- */
.dbi-ad__creative {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  background: #050505;
  line-height: 0;
}
.dbi-ad__creative img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -------------------- bottom bar -------------------- */
.dbi-ad__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-panel-2, #161616);
  border-top: 0.5px solid var(--c-line, #222);
}
.dbi-ad__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dbi-ad__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint, #555);
}
.dbi-ad__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-text-2, #d4d4d4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbi-ad__code b { color: var(--dbi-accent); font-weight: 700; letter-spacing: 0.1em; }

.dbi-ad__cta {
  flex: 0 0 auto;
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--dbi-accent);
  border-radius: 2px;
  background: var(--dbi-accent);
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dbi-ad__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 255, 0, 0.25);
  color: #000;
}
.dbi-ad__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* -------------------- skip link -------------------- */
.dbi-ad__skip {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  background: none;
  border: 0;
  padding: 6px 8px;
  color: var(--c-text-faint, #555);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}
.dbi-ad__skip:hover { color: var(--c-text-2, #d4d4d4); }

/* ============================ TABLET ============================ */
@media (min-width: 600px) and (max-width: 1023px) {
  .dbi-ad { padding: 32px 24px 50px; }
  .dbi-ad__box { width: min(470px, 100%); max-height: calc(100dvh - 82px); }
  .dbi-ad__top { padding: 13px 14px 13px 17px; }
  .dbi-ad__mark { font-size: 16px; }
  .dbi-ad__bar { padding: 14px 16px; }
  .dbi-ad__cta { padding: 14px 24px; }
}

/* ============================ PHONE ============================= */
@media (max-width: 599px) {
  .dbi-ad { padding: 14px 12px 42px; }
  .dbi-ad__box { width: 100%; max-height: calc(100dvh - 58px); border-radius: 6px; }
  .dbi-ad__top { padding: 9px 9px 9px 12px; }
  .dbi-ad__mark { font-size: 14px; }
  .dbi-ad__kicker { display: none; }
  .dbi-ad__x { width: 32px; height: 32px; }
  .dbi-ad__bar { padding: 10px 11px; gap: 9px; }
  .dbi-ad__code { font-size: 11px; }
  .dbi-ad__cta { padding: 12px 15px; font-size: 10px; letter-spacing: 0.1em; }
  .dbi-ad__skip { bottom: -29px; font-size: 9px; }
}

/* Short/landscape screens — keep the whole card on screen */
@media (max-height: 560px) {
  .dbi-ad { padding: 10px 12px 34px; }
  .dbi-ad__box { max-height: calc(100dvh - 46px); }
  .dbi-ad__top { padding: 7px 9px 7px 12px; }
  .dbi-ad__bar { padding: 8px 11px; }
  .dbi-ad__cta { padding: 10px 14px; }
  .dbi-ad__skip { bottom: -25px; }
}

@media (prefers-reduced-motion: reduce) {
  .dbi-ad__box,
  .dbi-ad__box::before { animation: none; }
  .dbi-ad__cta:hover { transform: none; }
}