/* TenguBet gold edge — shared outline for banner art and section cards.
   Lifts them off the dark background using the same gold outline that is
   painted into the membership card artwork. Sampled from VIP.webp as rendered:
   ~2px line, peak #e4ab44, ~18px corner radius on a ~340px card.

   Each component keeps its OWN border-radius so the outline follows the
   geometry that is already there — only the edge colour, weight and glow are
   unified. Selectors are prefixed with `html` so they beat the single-class
   rules in page-level <style> blocks, which load after this file. */

:root {
  --tb-gold-edge: rgba(255, 212, 107, 0.72);
  --tb-gold-edge-w: 2px;
  /* lift + glow, kept separate so components can drop the lift if they sit flush */
  --tb-gold-edge-lift: 0 18px 44px rgba(0, 0, 0, 0.48);
  --tb-gold-edge-glow: 0 0 26px rgba(255, 201, 92, 0.13);
}

/* ---- Banner art -------------------------------------------------------- */
/* OPERATOR RULE (2026-09-11): never put gold trim around a transparent banner
   image. Only add a selector here once you have checked the artwork is opaque:
     python3 -c "from PIL import Image;a=Image.open('X').getchannel('A');print(a.getextrema(),a.getbbox())"
   Fully transparent gives (0, 0) / None. A rectangular border on one of those
   outlines empty space. The guard block at the end of this file enforces it.

   Verified opaque and included:
     .tb-scene-hero  home LCX banner — photographic backdrop, already carries a
                     1px rgba(255,212,107,0.16) hairline; this strengthens it.
     .hero-banner    showgame / subscriptions — a gradient panel (not an image)
                     that already has border 1px rgba(255,214,102,.18).

   Checked and deliberately EXCLUDED:
     .tb-hub-banner-image  strategies / tools / roulette / baccarat / blackjack
                     / showgames / guides / alerts hubs. The file is a fully
                     transparent 2048x768 spacer (alpha extrema 0,0); the
                     visible banner is a CSS 3D wheel plus heading text drawn
                     over it. This is why tengu-hub-banner.css strips banner
                     chrome with !important.
     .guide-hero     not a banner — a two-column layout grid with its own
                     border-bottom separator. A full border would box in the
                     whole hero region. */
html .tb-scene-hero,
html .hero-banner {
  border: var(--tb-gold-edge-w) solid var(--tb-gold-edge);
  box-shadow: var(--tb-gold-edge-lift), var(--tb-gold-edge-glow);
}

/* ---- Section cards ----------------------------------------------------- */
/* .member-card is drawn from homeframe.webp, whose opaque artwork stops
   0.75% in horizontally and 0.48%/0.34% vertically. A border on the element
   box would float outside that artwork, so the outline is an overlay inset to
   land exactly on the frame edge. Its own corner radius measures ~5.1% of
   width, which is the 18px below at the rendered card size. */
html .member-card {
  position: relative;
}

html .member-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0.48% 0.75% 0.34%;
  z-index: 3;
  border: var(--tb-gold-edge-w) solid var(--tb-gold-edge);
  border-radius: 18px;
  box-shadow: var(--tb-gold-edge-glow);
  pointer-events: none;
  /* cancel the decorative ::after these cards use elsewhere */
  background: none;
  filter: none;
  opacity: 1;
  transform: none;
  inset-inline-end: 0.75%;
}

/* Section-entry cards that are plain boxes: give them the same edge. */
html .guide-card,
html .service-card,
html .library-card,
html .visual-card,
html .card-art {
  border: var(--tb-gold-edge-w) solid var(--tb-gold-edge);
  border-radius: 18px;
  box-shadow: var(--tb-gold-edge-lift), var(--tb-gold-edge-glow);
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  html .tb-scene-hero,
  html .guide-card,
  html .service-card,
  html .library-card,
  html .visual-card,
  html .card-art {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  html .guide-card:hover,
  html .service-card:hover,
  html .library-card:hover,
  html .visual-card:hover,
  html .card-art:hover {
    border-color: rgba(255, 226, 150, 0.92);
    box-shadow: var(--tb-gold-edge-lift), 0 0 32px rgba(255, 201, 92, 0.2);
  }
}

/* Light theme: the outline is there to separate cards from a dark page. On the
   light theme the background is already light, so keep it but soften it. */
body[data-theme="light"] {
  --tb-gold-edge: rgba(155, 101, 0, 0.55);
  --tb-gold-edge-glow: 0 0 18px rgba(155, 101, 0, 0.1);
}

/* ---- GUARD: transparent banner art is never trimmed -------------------- */
/* Operator rule, 2026-09-11. These banners are transparent spacers with the
   real artwork drawn over them in CSS, so any box drawn here frames nothing.
   This block is LAST and uses !important on purpose: it must survive someone
   later adding a broad `.hero img` or `[class*="banner"]` rule above it.
   Do not add selectors here to "fix" a banner — remove the offending rule
   instead. Matches the intent of tengu-hub-banner.css, which strips the same
   chrome for the same reason. */
html .tb-hub-banner-image,
html .tb-hub-banner-link,
html .tb-hub-banner-link > img,
html :is(.hero, header):has(.tb-hub-banner-link) {
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}