/* ==========================================================================
   IndiaCoin design system  ·  public/assets/ic.css
   ==========================================================================
   One file, no build step. Linked by every page on indiacoin.com and copied
   to each game site for its balance badge.

   Single committed dark theme: this product is dark by decision, not by
   default, so there is no light palette to fall back to. Every colour is
   painted explicitly rather than inherited from the page behind it.

   The full living reference — every component rendered against real ledger
   data — is public/assets/style-guide.html. Open that before changing
   anything here.
   ========================================================================== */

/* ==========================================================================
   IndiaCoin design system
   Single committed dark theme: this product is dark by decision, not by
   default, so there is no light palette to fall back to. Every colour is
   painted explicitly so the page holds on any host ground.
   ========================================================================== */

:root {
  /* --- Ground and surfaces -------------------------------------------- */
  /* Neutrals carry a blue bias so they read as chosen, not as grey. */
  --ink:          #05070d;
  --surface:      #0c1018;
  --surface-2:    #141a26;
  --surface-3:    #1c2433;
  --line:         rgba(142, 168, 214, 0.14);
  --line-strong:  rgba(142, 168, 214, 0.26);

  /* --- Text ------------------------------------------------------------ */
  --text:         #e9eef8;
  --text-dim:     #96a3ba;
  --text-faint:   #5e6b81;

  /* --- Accent ---------------------------------------------------------- */
  --blue:         #3d7bff;
  --blue-bright:  #6ba1ff;
  --blue-dim:     rgba(61, 123, 255, 0.14);
  /* Cyan is reserved for the chain: hashes, height, verification. */
  --cyan:         #35d4e8;
  --cyan-dim:     rgba(53, 212, 232, 0.13);

  /* --- Semantic (deliberately not the accent hue) ---------------------- */
  --mint:         #3ddc97;   /* earned, paid out, verified   */
  --mint-dim:     rgba(61, 220, 151, 0.13);
  --amber:        #f5c451;   /* held in escrow, pending      */
  --amber-dim:    rgba(245, 196, 81, 0.13);
  --red:          #ff5e5e;   /* burned, failed, destructive  */
  --red-dim:      rgba(255, 94, 94, 0.13);
  --slate:        #7f8ca3;   /* neutral / system             */
  --slate-dim:    rgba(127, 140, 163, 0.13);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Space (4px base) ------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  /* --- Radius ---------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Ambient: one soft blue bloom behind the header. Used once, not repeated. */
body::before {
  content: "";
  position: fixed;
  inset: -20% 0 auto 0;
  height: 60vh;
  background: radial-gradient(ellipse 900px 420px at 22% 0%, rgba(61, 123, 255, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 0 var(--s8);
}

/* --- Type scale ------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.08; font-weight: 800; }
h2 { font-size: clamp(22px, 3.1vw, 28px); line-height: 1.15; font-weight: 800; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0; max-width: 66ch; }
a { color: var(--blue-bright); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.lede  { color: var(--text-dim); font-size: 16px; }
.note  { color: var(--text-faint); font-size: 13px; max-width: 62ch; }
.token { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }

/* Numbers in a ledger must line up. This is not optional. */
.mono, .amount, .addr, .hash {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   The mark
   ========================================================================== */

.lockup { display: flex; align-items: center; gap: 13px; }
.lockup svg { display: block; flex: none; }
.lockup .word {
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.025em;
  line-height: 1;
}

.mark-bench {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s6);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(61, 123, 255, 0.05), transparent 60%),
    var(--surface);
}
.mark-bench figure { margin: 0; display: grid; gap: var(--s3); justify-items: center; }
.mark-bench figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* The app-icon treatment: the mark knocked out of the accent. */
.app-icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--blue-bright), var(--blue) 55%, #1e4fd0);
  box-shadow: 0 6px 22px rgba(61, 123, 255, 0.36);
}
.app-icon.sm { width: 32px; height: 32px; border-radius: 9px; }
.app-icon.xs { width: 16px; height: 16px; border-radius: 5px; box-shadow: none; }

/* ==========================================================================
   The chain strip — the one thing only this product has
   ========================================================================== */

.chain {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-block: var(--s2) var(--s4);
  scrollbar-width: thin;
}
.block {
  flex: none;
  width: 172px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  gap: 3px;
}
.block.head {
  border-color: rgba(53, 212, 232, 0.42);
  background: linear-gradient(180deg, var(--cyan-dim), var(--surface) 70%);
}
.block .h    { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.06em; }
.block .t    { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: 14px; }
.block .hash { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; }

.link-arrow {
  flex: none;
  align-self: center;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), rgba(53, 212, 232, 0.6));
  position: relative;
}
.link-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -2.5px;
  border-left: 5px solid rgba(53, 212, 232, 0.7);
  border-block: 3px solid transparent;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-bright); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-quiet { background: transparent; color: var(--text-dim); padding-inline: 8px; }
.btn-quiet:hover { color: var(--text); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(255, 94, 94, 0.4); }
.btn-danger:hover { background: var(--red-dim); }

/* Stat tiles ----------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: var(--s3); }
.stat {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  gap: var(--s1);
}
.stat .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.stat .value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat .value .unit { font-size: 13px; color: var(--text-faint); margin-left: 3px; }
.stat .sub { font-size: 12px; color: var(--text-dim); }
.stat.accent { border-color: rgba(61, 123, 255, 0.32); background: linear-gradient(180deg, var(--blue-dim), var(--surface) 72%); }
.stat.accent .value { color: var(--blue-bright); }
.stat.burn .value { color: var(--red); }

/* Address chip --------------------------------------------------------- */
.addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.addr:hover { border-color: var(--line-strong); background: var(--surface-3); }
.addr .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.addr.sys { color: var(--text-dim); }

/* Type badges ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.mint  { background: var(--mint-dim);  color: var(--mint); }
.badge.cyan  { background: var(--cyan-dim);  color: var(--cyan); }
.badge.amber { background: var(--amber-dim); color: var(--amber); }
.badge.red   { background: var(--red-dim);   color: var(--red); }
.badge.blue  { background: var(--blue-dim);  color: var(--blue-bright); }
.badge.slate { background: var(--slate-dim); color: var(--slate); }

/* Transaction feed ------------------------------------------------------ */
.feed { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.feed-row {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: 13px var(--s4);
  border-bottom: 1px solid var(--line);
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--surface-2); }
.feed-row .flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.feed-row .to { color: var(--text-faint); font-size: 12px; }
.feed-row .right { text-align: right; display: grid; gap: 2px; }
.feed-row .amount { font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.feed-row .amount.in  { color: var(--mint); }
.feed-row .amount.out { color: var(--text); }
.feed-row .amount.gone { color: var(--red); }
.feed-row .when { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.feed-row .site { font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 640px) {
  .feed-row { grid-template-columns: 1fr auto; row-gap: 7px; }
  .feed-row .badge-cell { grid-column: 1 / -1; }
}

/* Table ----------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
thead th {
  text-align: left;
  padding: 10px var(--s4);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 500;
}
tbody td { padding: 11px var(--s4); border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rank { font-family: var(--font-mono); color: var(--text-faint); font-size: 12px; }

/* Empty + loading -------------------------------------------------------- */
.empty {
  display: grid;
  gap: var(--s2);
  justify-items: center;
  text-align: center;
  padding: var(--s7) var(--s4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}
.empty .t { font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: 16px; }
.empty .d { color: var(--text-dim); font-size: 13.5px; max-width: 40ch; }

.skel { border-radius: var(--r-sm); background: var(--surface-2); position: relative; overflow: hidden; }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(142, 168, 214, 0.1), transparent);
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Layout helpers --------------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.stack { display: grid; gap: var(--s4); }
.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--s6); }

.usage { display: grid; gap: var(--s4); }
.usage-item { display: grid; grid-template-columns: 88px 1fr; gap: var(--s4); align-items: start; padding-block: var(--s3); border-top: 1px solid var(--line); }
.usage-item .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.usage-item .k.do  { color: var(--mint); }
.usage-item .k.dont { color: var(--red); }
.usage-item p { font-size: 13.5px; color: var(--text-dim); }

@media (max-width: 560px) {
  .usage-item { grid-template-columns: 1fr; gap: var(--s1); }
}