/* ============================================================
   THE DUMB STREET — $TDS  |  style.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  --bg:     #050505;
  --fg:     #ffffff;
  --green:  #00FF41;
  --red:    #FF0040;
  --yellow: #FFD700;
  --muted:  #444;
  --dim:    #666;
  --border: rgba(0,255,65,0.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); font-family: 'JetBrains Mono', monospace; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); overflow-x: hidden; }
::selection { background: var(--green); color: var(--bg); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green); }

/* ---- SCANLINES ---- */
.scanlines { position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent 0px,transparent 1px,rgba(0,0,0,0.04) 1px,rgba(0,0,0,0.04) 2px); pointer-events:none; z-index:50; }

/* ============================================================
   PRICE TICKER
   ============================================================ */
.ticker-bar { position:fixed; top:0; left:0; width:100%; z-index:40; overflow:hidden; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.94); height:28px; display:flex; align-items:center; }
.ticker-track { display:inline-flex; align-items:center; white-space:nowrap; animation:ticker-scroll 45s linear infinite; will-change:transform; padding:0 16px; }
.ticker-bar:hover .ticker-track { animation-play-state:paused; }
@keyframes ticker-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tick-item { display:inline-flex; align-items:center; gap:6px; font-size:0.58rem; letter-spacing:0.06em; padding:0 20px; border-right:1px solid rgba(255,255,255,0.05); height:28px; }
.tick-sym   { color:rgba(255,255,255,0.45); font-weight:500; }
.tick-price { color:#fff; }
.tick-up    { color:var(--green); }
.tick-down  { color:var(--red); }
.tick-loading { font-size:0.58rem; color:var(--muted); letter-spacing:0.15em; padding:0 16px; }

/* ============================================================
   LAYOUT WRAPPERS
   ============================================================ */
.wrapper {
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:center;
  max-width:640px; margin:0 auto; padding:0 1.5rem;
}
#wrapper        { padding-top:60px; }
#wrapper-bottom { padding-bottom:1.5rem; }

/* ---- TOP BAR ---- */
.topbar { width:100%; display:flex; justify-content:space-between; align-items:center; font-size:0.62rem; letter-spacing:0.08em; color:var(--muted); margin-bottom:2.6rem; flex-wrap:wrap; gap:0.4rem; }
.prompt { color:var(--green); }
.agent-status { display:inline-flex; align-items:center; gap:7px; color:var(--green); font-size:0.58rem; letter-spacing:0.12em; }

/* ---- HERO ---- */
.hero { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.init-text { font-size:0.62rem; color:var(--muted); letter-spacing:0.3em; margin-bottom:1.8rem; min-height:1rem; text-transform:uppercase; transition:opacity 1.5s; }

/* ---- LOGO ---- */
.logo-group { cursor:pointer; user-select:none; margin-bottom:1.2rem; }
.headline { display:block; font-size:clamp(1.3rem,4vw,2rem); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin-bottom:0.1rem; color:var(--fg); }
.token    { display:block; font-size:clamp(3rem,9vw,4.8rem); font-weight:700; line-height:1.05; color:var(--fg); letter-spacing:-0.02em; }

/* ---- RULE / SUBTITLE ---- */
.rule { width:100%; height:1px; background:linear-gradient(90deg,transparent 0%,var(--green) 50%,transparent 100%); margin-bottom:0.9rem; opacity:0.35; }
.subtitle { font-size:0.58rem; letter-spacing:0.38em; color:var(--muted); text-transform:uppercase; margin-bottom:0.3rem; }
.tagline  { font-size:0.62rem; color:#404040; letter-spacing:0.1em; margin-bottom:1.8rem; }

/* ============================================================
   TWO-COLUMN: terminal  |  feed
   ============================================================ */
.two-col {
  display: flex;
  gap: 1rem;
  width: 100%;
  align-items: stretch;
  margin-bottom: 0; /* flush against arena */
}

.two-col > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ============================================================
   TERMINAL CARD
   ============================================================ */
.terminal-card { border:1px solid var(--border); background:rgba(0,0,0,0.88); }
.terminal-head { display:flex; align-items:center; gap:6px; padding:7px 10px; border-bottom:1px solid var(--border); background:rgba(0,255,65,0.02); }
.tb { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.tb-red   { background:rgba(255,0,64,0.45);  border:1px solid rgba(255,0,64,0.7); }
.tb-amber { background:rgba(255,200,0,0.35); border:1px solid rgba(255,200,0,0.6); }
.tb-green { background:rgba(0,255,65,0.3);   border:1px solid rgba(0,255,65,0.5); }
.terminal-label { font-size:0.58rem; color:var(--muted); letter-spacing:0.04em; margin-left:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.terminal-body { padding:12px 14px; }
.t-line { display:flex; align-items:baseline; margin-bottom:8px; font-size:0.65rem; gap:5px; }
.t-line:last-child { margin-bottom:0; }
.t-key   { color:#505050; flex-shrink:0; white-space:nowrap; }
.t-fill  { flex:1; border-bottom:1px dotted #1a1a1a; min-width:4px; }
.t-val   { flex-shrink:0; color:var(--fg); white-space:nowrap; font-size:0.65rem; }
.t-green { color:var(--green) !important; }
.t-locked{ color:var(--red)   !important; }
.t-dim   { color:var(--dim)   !important; }
.ca-val  { cursor:crosshair; }

/* ============================================================
   DEGEN ACTIVITY FEED
   ============================================================ */
.degen-feed {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0,255,65,0.14);
  background: rgba(0,0,0,0.72);
  overflow: hidden;
}

.feed-header {
  font-size: 0.56rem;
  color: var(--muted);
  letter-spacing: 0.16em;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(0,255,65,0.1);
  background: rgba(0,255,65,0.015);
  flex-shrink: 0;
}

.feed-blink { animation: blink 1s step-end infinite; color: var(--green); }

.feed-entries {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feed-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  animation: feed-slide-in 0.3s ease forwards;
  opacity: 0;
  min-height: 0;
}
.feed-entry:last-child { border-bottom: none; }

@keyframes feed-slide-in {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}

.feed-time  { color:#2a2a2a; font-size:0.52rem; flex-shrink:0; min-width:22px; }
.feed-addr  { color:#474747; flex-shrink:0; font-size:0.58rem; }
.feed-event { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.feed-green { color:var(--green); }
.feed-red   { color:var(--red); }
.feed-yellow{ color:var(--yellow); }
.feed-dim   { color:var(--dim); }

/* ============================================================
   THE ARENA — full viewport width
   ============================================================ */
.arena-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: clamp(320px, 48vh, 520px);
  background: #060606;
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  cursor: default;
  box-shadow: inset 0 0 60px rgba(0,255,65,0.02);
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

.arena-wrap canvas { display:block; width:100%!important; height:100%!important; }

/* Faint horizontal guide lines */
.arena-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg,
      transparent 28%, rgba(0,255,65,0.045) calc(28.5%), transparent calc(29%),
      transparent 60%, rgba(0,255,65,0.045) calc(60.5%), transparent calc(61%),
      transparent 87%, rgba(0,255,65,0.045) calc(87.5%), transparent 88%
    );
}

/* ============================================================
   COMING SOON BANNER
   ============================================================ */
.cs-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 3.2rem 1.5rem 3rem;
  background: #060606;
  border-bottom: 1px solid var(--border);
}

.cs-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.cs-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--muted);
  text-transform: uppercase;
}

.cs-title {
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green);
  text-shadow: 0 0 32px rgba(0,255,65,0.35), 0 0 8px rgba(0,255,65,0.2);
  text-transform: uppercase;
  line-height: 1;
}

/* Override glitch pseudo-element colors for cs-title */
.cs-title.glitch::before { color: var(--red); }
.cs-title.glitch::after  { color: rgba(0,255,65,0.5); }

.cs-sub {
  font-size: 0.66rem;
  color: #3a3a3a;
  letter-spacing: 0.08em;
  max-width: 420px;
  line-height: 1.8;
}
.cs-sub .cursor { margin-left: 4px; }

/* ============================================================
   SOCIAL + SCAM
   ============================================================ */
.socials { display:flex; gap:2.2rem; margin-bottom:1.6rem; margin-top:0.2rem; }
.social-link { color:#2e2e2e; font-size:1.3rem; text-decoration:none; transition:color 0.2s,transform 0.2s; }
.social-link:hover { color:var(--green); transform:translateY(-3px); }

.scam-bar { width:100%; border:1px solid rgba(255,0,64,0.28); background:rgba(255,0,64,0.04); padding:9px 14px; font-size:0.56rem; color:var(--red); letter-spacing:0.06em; text-align:center; text-transform:uppercase; line-height:1.7; }
.warn-icon { display:inline-block; border:1px solid var(--red); width:14px; height:14px; line-height:12px; text-align:center; margin-right:6px; font-size:0.56rem; vertical-align:middle; }

/* ============================================================
   GLITCH
   ============================================================ */
.glitch { position:relative; }
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.glitch::before { color:var(--green); clip-path:inset(0 0 55% 0); animation:glitch-top 5s infinite; }
.glitch::after  { color:var(--red);   clip-path:inset(60% 0 0 0); animation:glitch-bot 7s infinite; }
.token.glitch::before { animation-duration:6s;   animation-delay:-1.2s; }
.token.glitch::after  { animation-duration:8.5s; animation-delay:-3s; }

@keyframes glitch-top { 0%,82%,100%{opacity:0;transform:none;} 84%{opacity:1;transform:translate(-4px,0);} 86%{opacity:0;} 89%{opacity:1;transform:translate(4px,0);} 91%{opacity:0;} }
@keyframes glitch-bot { 0%,55%,100%{opacity:0;transform:none;} 57%{opacity:1;transform:translate(3px,0);} 59%{opacity:0;} 62%{opacity:1;transform:translate(-3px,0);} 64%{opacity:0;} }

/* ---- ATOMS ---- */
.cursor   { display:inline-block; animation:blink 1s step-end infinite; color:var(--green); }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.live-dot { display:inline-block; width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.3;transform:scale(0.75);} }

/* ============================================================
   EASTER EGGS
   ============================================================ */
.matrix-overlay { position:fixed; inset:0; z-index:9999; pointer-events:none; animation:fade-overlay 5.5s forwards; }
.matrix-overlay canvas { position:absolute; inset:0; width:100%; height:100%; }
.matrix-msg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:'JetBrains Mono',monospace; font-size:clamp(0.7rem,2.2vw,1rem); color:var(--green); text-align:center; letter-spacing:0.2em; text-transform:uppercase; border:1px solid rgba(0,255,65,0.45); padding:20px 28px; background:rgba(0,0,0,0.93); opacity:0; animation:fade-msg 0.5s 1.2s forwards; line-height:2.2; white-space:nowrap; }
@keyframes fade-overlay { 0%,75%{opacity:1;} 100%{opacity:0;} }
@keyframes fade-msg { from{opacity:0;transform:translate(-50%,-53%) scale(0.95);} to{opacity:1;transform:translate(-50%,-50%) scale(1);} }
.secret-flash { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:8000; font-family:'JetBrains Mono',monospace; font-size:clamp(0.6rem,1.8vw,0.85rem); color:var(--green); letter-spacing:0.3em; text-align:center; text-transform:uppercase; pointer-events:none; animation:flash-in 3s forwards; border:1px solid rgba(0,255,65,0.35); padding:12px 24px; background:rgba(0,0,0,0.92); }
@keyframes flash-in { 0%{opacity:0;} 12%{opacity:1;} 80%{opacity:1;} 100%{opacity:0;} }
@keyframes shake { 0%,100%{transform:translate(0);}15%{transform:translate(-6px,2px);}30%{transform:translate(6px,-2px);}45%{transform:translate(-4px,4px);}60%{transform:translate(4px,-4px);}75%{transform:translate(-2px,2px);} }
.shake { animation:shake 0.45s ease; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 540px) {
  .two-col { flex-direction: column; }
  #wrapper        { padding-top:50px; padding-left:1rem; padding-right:1rem; }
  #wrapper-bottom { padding-left:1rem; padding-right:1rem; }
  .topbar  { margin-bottom:1.6rem; }
  .t-line  { font-size:0.6rem; }
  .token   { font-size:clamp(2.5rem,13vw,3.5rem); }
  .arena-wrap { height:clamp(260px,40vh,380px); }
}