/* Cyberfrog Cards - shared card visual CSS.
   Source of truth for .card, .card-cell, .card-name, .frog-wrap,
   .card-stats, .stat-edition, .stat-serial, .card-glyph, .tier-pill,
   tap-pop, and all placeholder styles.

   Consumed by both the card creator (subprojects/cyberfrog-cards-tma/creator/index.html)
   and the TMA game (frontend/index.html). Game-specific layout (nav,
   screens, modals, badge rack) lives in frontend/css/style.css.

   §10.3 scaling invariant: .card sets width:100% and
   container-type: inline-size. Every text size, gap, padding, and
   border-radius inside the card is expressed in cqi (relative to
   the card's inline size) or % - never px. The TAD specifies
   "font-size: 4.5cqi" as the base; rather than rely on em cascades
   from a single base (which css containers don't propagate to the
   container element itself), each leaf declares its size in cqi
   directly. Base = 4.5cqi; em multiples are folded into the cqi
   value (e.g. 1.2em -> 5.4cqi). Result: pure proportional scaling.

   The ONLY legal px values inside the card are the 1px border and
   the box-shadow blur radii. */

/* ---- Card base -------------------------------------------------- */

.card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  /* Cards are not text; long-press should never enter selection mode and
     iOS Safari shouldn't pop the copy/share callout. Applies to the SVG
     frog + name + stats inside. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    url("./holo/img/matrix-rain.svg") 0 0 / 56% 100% repeat-x,
    var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5.6%;
  padding: 3% 3.75%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color-scheme: dark;
  transform-style: preserve-3d;
  transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg));
  /* attachHolo() updates --tilt-x/--tilt-y every animation frame; a short
     linear transition smooths out the per-frame jitter without lagging
     the pointer. Only active while the pointer is over the card (data
     attribute set by attachHolo); off-stage cards stay snappy. */
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /* Box-shadow blur radii are the only legal px values besides the
     1px border (sub-pixel shadows degrade visibly past a threshold;
     §10.3 documents this as acceptable). */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    inset 2px 0 6px rgba(255, 255, 255, 0.10),
    inset -2px 0 6px rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    var(--shadow-x, 0px) var(--shadow-y, 18px) var(--shadow-blur, 36px) rgba(0, 0, 0, 0.65),
    0 0 38px -6px var(--card-border, transparent),
    0 0 0 2px var(--card-border, transparent) inset;
}

/* Edition 2 watermark: hex-digit (0-9, A-F) rain instead of binary (0/1).
   Background color stays the same as E1; only the pattern differs.
   Holo overlay layers and frog palette logic continue to apply on top. */
.card[data-edition="2"] {
  background-image: url("./holo/img/matrix-hex.svg");
}

.card--featured { cursor: pointer; }

/* Pointer-active smoothing - set by attachHolo on pointermove, cleared
   on pointerout. 80ms linear is the sweet spot: long enough to dampen
   the per-rAF jitter, short enough not to lag the cursor. */
.card[data-holo-active="true"] {
  transition: transform 80ms linear;
}

/* ---- Tap animation ---------------------------------------------- */

.card.tap-pop {
  animation: card-tap-pop 0.08s ease-out;
}
@keyframes card-tap-pop {
  0%   { transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) scale(1); }
  45%  { transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) scale(0.94); }
  100% { transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) scale(1); }
}

/* ---- Card name -------------------------------------------------- */

.card-name {
  font-family: "Orbitron", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 5.4cqi;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(238, 242, 248, 0.95);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.4em;
  padding: 0.45em 0 0.3em;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(0, 0, 0, 0.65),
    0 -1px 0 rgba(255, 255, 255, 0.20),
    0 0 14px rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 10;
  transform: translateZ(0.01px);
  outline: 1px solid transparent;
}

/* ---- Frog wrap -------------------------------------------------- */

.card .frog-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
}
.card .frog-wrap svg {
  width: 100%;
  height: 100%;
  opacity: 0.88;
}

/* ---- Stats block ------------------------------------------------ */

.card-stats {
  width: 100%;
  font-family: "Orbitron", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3cqi;
  margin-top: 2cqi;
  padding: 2cqi 1.3cqi 1.3cqi;
  position: relative;
  z-index: 10;
  transform: translateZ(0.01px);
  outline: 1px solid transparent;
}

.card-stats .stat-edition {
  font-size: 2.925cqi;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: rgba(220, 226, 234, 0.55);
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(0, 0, 0, 0.55);
}
.card-stats .stat-edition .tier {
  color: var(--card-border);
  font-weight: 700;
  margin-left: 0.4em;
}

.card-stats .stat-serial {
  text-align: center;
  font-size: 5.175cqi;
  line-height: 1.15;
  font-weight: 700;
  color: rgba(238, 242, 248, 0.92);
  letter-spacing: 0.22em;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(255, 255, 255, 0.12);
}
.card-stats .stat-serial .hash {
  opacity: 0.45;
  font-weight: 500;
  margin-right: 0.05em;
}

.card-glyph {
  width: 9.9cqi;
  height: 9.9cqi;
  margin: 1.3cqi auto 0;
  pointer-events: none;
  opacity: 0.9;
  color: var(--card-border);
}
.card-glyph svg {
  width: 100%;
  height: 100%;
}

/* ---- Tier pills ------------------------------------------------- */

.tier-pill {
  display: inline-block;
  font-size: 3.06cqi;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border-radius: 0.8em;
  line-height: 1.4;
  border: 1px solid transparent;
  vertical-align: middle;
}
.tier-pill[data-tier="legendary"] { background: rgba(255,152,0,0.15); color: #ff9800; border-color: rgba(255,152,0,0.30); }
.tier-pill[data-tier="epic"]      { background: rgba(201,86,255,0.15); color: #c956ff; border-color: rgba(201,86,255,0.30); }
.tier-pill[data-tier="rare"]      { background: rgba(33,150,243,0.15); color: #2196f3; border-color: rgba(33,150,243,0.30); }
.tier-pill[data-tier="uncommon"]  { background: rgba(76,201,76,0.15);  color: #4cc94c; border-color: rgba(76,201,76,0.30); }
.tier-pill[data-tier="common"]    { background: rgba(212,212,212,0.10); color: #d4d4d4; border-color: rgba(212,212,212,0.18); }

/* ---- Thumbnail cell (binder / tradeup / creator grid) ---------- */

/* Transparent passthrough wrapper. Only purpose: anchor for absolutely-
   positioned overlays (count badge, active star, set-active button) and a
   click target. No styling that would interfere with the card's own
   rendering - the inspect modal renders a bare .card and that's the
   SSOT for what a card looks like. .card-cell must not clip, scale, or
   tilt the inner card. */
.card-cell {
  cursor: pointer;
  position: relative;
}

/* Cards render flat by default. attachHolo paints pointer-driven motion
   when the context wires it up (inspect modal, creator edit modal,
   profile active card, home featured). Grid views (binder + creator)
   show a STATIC rest state via the .card-grid-rest helper class so
   cards look tilted-and-holo'd without per-cell pointer listeners. */

/* Shared rest state for grid views. Cards are flat (no tilt) with a SUBTLE
   holo paint so the surface reads as holographic without the full pull-
   out effect. The card-opacity 0.35 keeps the shimmer faint - just enough
   to hint at what the interactive state will look like. */
.card-grid-rest {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-left: 0.50;
  --pointer-from-top: 0.50;
  --card-opacity: 0.35;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* ---- Card back -------------------------------------------------- */
/*
   The shared "unknown card" face. Same outer dimensions / aspect-ratio /
   border-radius as .card so it slots into any .card container without a
   layout shift. Used for:
     - binder placeholders (unowned cards in a live edition)
     - locked-edition cells (whole edition not yet live)
     - pack-reveal initial state (before the flip)
   Identity-less: every card-back is the same DOM. */

.card-back {
  /* Reset the painted-card defaults that don't apply: no holo gradient
     stops, no palette CSS vars, no glare/shine. Keep .card's outer box
     (aspect-ratio, border-radius, padding, container-type, etc). */
  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(25, 195, 125, 0.10) 0%,
      rgba(13, 18, 22, 0.0) 60%
    ),
    linear-gradient(160deg, #0b1416 0%, #0a1f1d 45%, #050c0f 100%);
  border-color: rgba(255, 255, 255, 0.10);
  /* Holographic edge gradient at low opacity - subtle rainbow inner glow
     that hints "this is a holo card, just face-down". */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 24px rgba(76, 201, 124, 0.08),
    0 8px 22px rgba(0, 0, 0, 0.55);
  cursor: default;
  /* The back never tilts on its own - the pack-reveal flip drives its
     transform via WAAPI. Disable the .card hover-tilt vars. */
  transform: none;
  transition: none;
}

.card-back-frog {
  position: absolute;
  inset: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.55;
}
.card-back-frog svg {
  width: 100%;
  height: 100%;
}

.card-back-mark {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: auto 0;
  text-align: center;
  font-family: "Orbitron", ui-monospace, monospace;
  font-size: 28cqi;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(238, 242, 248, 0.55);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(76, 201, 124, 0.20);
}

/* ---- Placeholder cell for unowned cards ------------------------ */
/* Placeholder cells render a .card-back inside; the cell wrapper only
   controls cursor + click behavior. */

.card-cell--placeholder { cursor: default; }
.card-cell--placeholder:hover { transform: none; }