/* ============================================================
   TRAP COIN ECONOMY — shared skin (additive layer).
   Lives alongside design-system.css; uses the SAME --tt-* tokens
   (obsidian #04030a, raised #0a0818, cyan #00e5ff, magenta #ff3df2,
   violet #8a5cff, lime #c8ff2d, ice #d8fbff). Never redefines a
   legacy selectors. All classes are namespaced `.tc-*` / `.cmp-*`.
   ============================================================ */
:root{
  --tc-coin:#c8ff2d;          /* the coin accent = lime (money in your pocket) */
  --tc-gold-coin:#ffd23d;     /* the coin glyph highlight */
}

/* ---- pinned balance bar (top-of-screen, network-wide) ---- */
.tc-bar{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; gap:12px;
  padding:8px 16px;
  background:rgba(4,3,10,.88);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgba(0,229,255,.24);
  box-shadow:0 4px 26px -6px rgba(0,229,255,.18);
  font-family:var(--font-mono,"JetBrains Mono",monospace);
}
.tc-bar .tc-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Archivo Black","Arial Black",sans-serif; font-size:12px;
  letter-spacing:.04em; color:var(--tt-ice); white-space:nowrap;
}
.tc-bar .tc-coin-dot{
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--tc-gold-coin), var(--tc-coin) 70%);
  box-shadow:0 0 12px var(--tc-coin);
}
.tc-bar .tc-bal{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:13.5px; color:var(--tc-coin);
  text-shadow:0 0 12px rgba(200,255,45,.5);
}
.tc-bar .tc-bal b{ font-size:15px; }
.tc-bar .tc-spacer{ flex:1; }
.tc-bar .tc-actions{ display:inline-flex; align-items:center; gap:8px; }
.tc-bar a.tc-btn, .tc-bar button.tc-btn{
  text-decoration:none; cursor:pointer;
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:12px;
  letter-spacing:.14em; font-weight:700; color:var(--tt-obs);
  background:linear-gradient(135deg,#e2ff9a,var(--tc-coin));
  padding:7px 14px; border-radius:8px; border:none;
  box-shadow:0 0 16px rgba(200,255,45,.35);
}
.tc-bar .tc-btn.ghost{
  color:var(--tt-cyn); background:transparent;
  border:1px solid rgba(0,229,255,.4); box-shadow:none;
}
.tc-bar .tc-user{
  display:inline-flex; align-items:center; gap:7px; color:var(--tt-ice);
  font-size:12.5px; white-space:nowrap;
}
.tc-bar .tc-user .tc-ava{ font-size:16px; }
@media (max-width:640px){
  .tc-bar{ padding:7px 10px; gap:8px; flex-wrap:wrap; }
  .tc-bar .tc-brand span{ display:none; }
}

/* body padding so the fixed bar doesn't cover existing chrome */
body.tc-has-bar{ padding-top:46px; }

/* ---- lock screen sheet (obsidian glass, sales screen at the moment of want) ---- */
.tc-lock{
  position:fixed; inset:0; z-index:9500; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,3,10,.82);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
}
.tc-lock.open{ display:flex; }
.tc-lock-sheet{
  position:relative; width:min(440px,92vw);
  border-radius:22px; padding:28px 24px;
  background:linear-gradient(180deg, rgba(16,13,32,.96), rgba(6,4,16,.98));
  border:1px solid rgba(0,229,255,.30);
  box-shadow:0 0 0 1px rgba(0,229,255,.08),0 20px 60px -12px rgba(0,229,255,.28),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.tc-lock-kick{
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:11px;
  letter-spacing:.26em; color:var(--tt-vio); text-transform:uppercase;
}
.tc-lock-title{
  font-family:"Archivo Black","Arial Black",sans-serif; font-size:clamp(22px,5vw,30px);
  line-height:1.02; margin-top:6px;
  background:linear-gradient(145deg,#d8fbff,#00e5ff 40%,#8a5cff 78%,#ff3df2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.tc-lock-sub{ font-size:13px; color:var(--tt-ice); opacity:.78; margin-top:10px; line-height:1.55; }
.tc-lock-price{
  margin-top:16px; padding:14px 16px; border-radius:12px;
  font-family:var(--font-mono,"JetBrains Mono",monospace);
  background:rgba(200,255,45,.07); border:1px solid rgba(200,255,45,.32);
  box-shadow:0 0 20px rgba(200,255,45,.12);
}
.tc-lock-price .tc-lp-label{ font-size:10px; letter-spacing:.2em; color:var(--tc-coin); opacity:.85; }
.tc-lock-price .tc-lp-num{ font-size:24px; font-weight:800; color:var(--tc-coin);
  text-shadow:0 0 14px rgba(200,255,45,.5); }
.tc-lock-price .tc-lp-num b{ font-size:13px; font-weight:600; color:var(--tt-ice); opacity:.7; }
.tc-lock-btn{
  margin-top:16px; width:100%; text-align:center;
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:15px;
  letter-spacing:.16em; font-weight:700; color:var(--tt-obs);
  background:linear-gradient(135deg,#e2ff9a,var(--tc-coin));
  padding:14px; border-radius:12px; border:none; cursor:pointer;
  box-shadow:0 0 24px rgba(200,255,45,.4);
}
.tc-lock-btn.no-coins{ background:linear-gradient(135deg,#baf4ff,#00e5ff); box-shadow:0 0 24px rgba(0,229,255,.4); }
.tc-lock-close{ margin-top:10px; width:100%; text-align:center; cursor:pointer;
  font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:11px;
  color:var(--tt-ice); opacity:.55; background:none; border:none; }
.tc-lock-balance{ margin-top:12px; font-family:var(--font-mono,"JetBrains Mono",monospace);
  font-size:11.5px; color:var(--tt-ice); opacity:.7; text-align:center; }

/* ---- comment threads (TikTok-style, DTN skin — obsidian glass, cyan likes) ---- */
.cmp-thread{ display:flex; flex-direction:column; gap:10px; }
.cmp-item{
  display:flex; gap:10px; padding:12px 14px; border-radius:12px;
  background:rgba(10,8,24,.5);
  border:1px solid rgba(255,255,255,.07);
}
.cmp-item.pinned{
  border:1px solid var(--tc-coin);
  box-shadow:0 0 0 1px rgba(200,255,45,.18), 0 0 18px rgba(200,255,45,.16);
}
.cmp-ava{ flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:19px; border-radius:50%; background:rgba(0,229,255,.08); border:1px solid rgba(0,229,255,.2); }
.cmp-body{ flex:1; min-width:0; }
.cmp-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmp-name{ font-size:12.5px; font-weight:700; color:var(--tt-ice); }
.cmp-pin{ font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:9px; letter-spacing:.18em;
  color:var(--tt-obs); background:var(--tc-coin); padding:2px 7px; border-radius:4px; }
.cmp-text{ font-size:13px; color:var(--tt-ice); opacity:.88; margin-top:4px; line-height:1.5; word-break:break-word; }
.cmp-actions{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.cmp-like{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:none; background:none;
  font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:12px; color:var(--tt-cyn);
}
.cmp-like.liked{ color:var(--tt-cyn); text-shadow:0 0 10px rgba(0,229,255,.6); }
.cmp-like svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.cmp-like.liked svg{ fill:currentColor; }
.cmp-reply{ cursor:pointer; border:none; background:none; font-family:var(--font-mono,"JetBrains Mono",monospace);
  font-size:12px; color:var(--tt-ice); opacity:.6; }
.cmp-tip{ cursor:pointer; border:none; background:none; font-family:var(--font-mono,"JetBrains Mono",monospace);
  font-size:12px; color:var(--tc-coin); }
.cmp-replies{ margin-left:44px; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.cmp-replies .cmp-item{ background:rgba(10,8,24,.34); }
.cmp-composer{ display:flex; gap:10px; margin-top:14px; }
.cmp-composer input{
  flex:1; min-width:0; background:rgba(10,8,24,.6); border:1px solid rgba(0,229,255,.25);
  border-radius:10px; padding:11px 14px; color:var(--tt-ice); font-family:"Inter",sans-serif; font-size:13px;
}
.cmp-composer input::placeholder{ color:rgba(234,230,255,.4); }
.cmp-composer button{
  flex:0 0 auto; cursor:pointer; border:none; border-radius:10px; padding:0 18px;
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:13px; letter-spacing:.12em; font-weight:700;
  color:var(--tt-obs); background:linear-gradient(135deg,#baf4ff,#00e5ff);
  box-shadow:0 0 16px rgba(0,229,255,.35);
}
.cmp-empty{ font-size:12.5px; color:var(--tt-ice); opacity:.5; padding:10px 4px; }

/* ---- Heat Index sparkline chip ---- */
.tc-spark{ display:inline-flex; align-items:center; gap:7px; }
.tc-spark svg{ display:block; }
.tc-spark .tc-spark-price{ font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:12px; color:var(--tt-cyn); font-weight:700; }
.tc-spark .tc-spark-price.up{ color:#7dffb0; }
.tc-spark .tc-spark-price.dn{ color:#ff5f82; }