/* Webistics Trader 1.0 — CRT terminal
   Element styles are inline. This file holds globals, keyframes, and the live-clock/connect hooks' animation. */
body { margin: 0; background: #47536b; font-family: 'Nunito', 'Trebuchet MS', sans-serif; }
a { color: #9fc4ff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }
@keyframes wt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Responsive ----------
   The export is a 1020px CRT (1152px with bezel) with every element styled inline, so the overrides below use !important.
   Hooks are the wt-* classes added to the five screens (stage, bezel, crt, screen, topbar, titlebar, stack, thead, trow, kv, stmt, stand, base).
   Tablets: the bezel shrinks to the viewport and the panels tighten. Phones (≤700px, the same breakpoint as the board redirect):
   the bezel goes edge to edge, the CRT grows with its content, side-by-side panels stack, and the tables drop to what fits. */
.wt-bezel { max-width: calc(100vw - 156px); }               /* 1020 content + 132 bezel padding + 24 gutter */
.wt-stage-mobile { width: auto !important; height: auto !important; min-height: 100vh; min-height: 100dvh; padding: 16px 0; box-sizing: border-box; }
.wt-stage-mobile .wt-bezel { width: auto !important; max-width: 372px; margin: 0 12px; box-sizing: content-box; }
.wt-stage-mobile .wt-crt { height: calc(100vh - 170px) !important; height: calc(100dvh - 170px) !important; min-height: 520px; }

@media (max-width: 1000px) {
  /* the screen grows with its content instead of clipping at 700px; the two long lists keep a desktop-sized scroll box */
  .wt-crt { height: auto !important; min-height: 700px; }
  .wt-screen { height: auto !important; overflow: visible !important; }
  [data-panel="board"], [data-panel="pools"] { max-height: 420px; overflow-y: auto !important; }
  .wt-thead, .wt-trow { column-gap: 8px !important; }
  .wt-trow { font-size: 13px !important; }
  [data-panel] { padding-left: 14px !important; padding-right: 14px !important; }
  [data-q-last] { font-size: 28px !important; }
  .wt-kv { height: auto !important; min-height: 40px; padding: 4px 0; flex-wrap: wrap; gap: 0 12px; }
  .wt-kv > span:last-child { font-size: 15px !important; }
  .wt-actions > a { white-space: nowrap; padding: 12px 24px !important; font-size: 18px !important; }
  .wt-actions > div { margin-left: 16px; }
}

@media (max-width: 700px) {
  .wt-stage { padding: 12px 0 20px !important; }
  .wt-bezel { width: auto !important; max-width: none; margin: 0 10px; padding: 18px 12px 10px !important; border-radius: 16px !important;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,0.7), inset -3px -3px 0 rgba(90,95,100,0.55), 0 14px 26px rgba(0,0,0,0.4) !important; }
  .wt-crt { height: auto !important; min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); border-radius: 14px / 18px !important; }
  .wt-screen { height: auto !important; padding: 14px 14px 16px !important; overflow: visible !important; }
  .wt-topbar > div:first-child { font-size: 15px !important; }
  .wt-topbar > div:last-child { font-size: 11px !important; }
  .wt-titlebar { flex-wrap: wrap; gap: 2px 12px; margin-top: 12px !important; }
  .wt-titlebar > div:first-child { font-size: 20px !important; line-height: 1.25; }
  [data-stock-title] span { font-size: 13px !important; }
  [data-info-strip] { white-space: normal !important; }
  .wt-stack { flex-direction: column; gap: 10px !important; }
  .wt-stack > * { flex: none !important; max-width: none !important; }
  [data-panel], .wt-stmt { padding: 12px 14px 10px !important; overflow: visible !important; max-height: none; }
  [data-panel] > div:first-child { font-size: 15px !important; }
  [data-panel="chart"] svg { height: 130px !important; }
  [data-panel="quote"] { gap: 6px !important; }
  [data-q-last] { font-size: 26px !important; }
  [data-q-change], [data-q-volume], [data-q-liquidity] { font-size: 16px !important; }

  /* tables */
  .wt-thead { font-size: 11px !important; }
  .wt-trow { height: auto !important; min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px !important; }
  /* Ticker Board (desktop file, in case the redirect did not fire): Symbol / Last / 24h, like the mobile board */
  [data-panel="board"] .wt-thead, [data-panel="board"] .wt-trow { grid-template-columns: 1.2fr 1fr 0.8fr !important; }
  [data-panel="board"] .wt-thead > div:nth-child(2), [data-panel="board"] .wt-thead > div:nth-child(5),
  [data-panel="board"] [data-cell="name"], [data-panel="board"] [data-cell="mcap"] { display: none; }
  /* Liquidity Pools: two lines per pool. Pool + rating, then chain · DEX, volume, liquidity */
  [data-panel="pools"] .wt-thead { grid-template-columns: 1fr auto !important; }
  [data-panel="pools"] .wt-thead > div:nth-child(2), [data-panel="pools"] .wt-thead > div:nth-child(3), [data-panel="pools"] .wt-thead > div:nth-child(4) { display: none; }
  [data-meme-rows] > .wt-trow { grid-template-columns: 1fr auto auto !important; grid-template-areas: "meme meme rating" "ratio vol liq"; column-gap: 10px !important; row-gap: 2px; padding-top: 8px; padding-bottom: 8px; }
  [data-meme-rows] [data-cell="meme"] { grid-area: meme; }
  [data-meme-rows] [data-cell="rating"] { grid-area: rating; font-size: 14px !important; letter-spacing: 1px !important; }
  [data-meme-rows] [data-cell="ratio"], [data-meme-rows] [data-cell="vol"], [data-meme-rows] [data-cell="liq"] { font-size: 12px !important; font-weight: 700 !important; white-space: nowrap; }
  [data-meme-rows] [data-cell="ratio"] { grid-area: ratio; text-align: left !important; overflow: hidden; text-overflow: ellipsis; }
  [data-meme-rows] [data-cell="vol"] { grid-area: vol; }
  [data-meme-rows] [data-cell="liq"] { grid-area: liq; }
  [data-meme-rows] [data-cell="vol"]::before { content: "VOL "; color: #8fb0ea; font-size: 10px; }
  [data-meme-rows] [data-cell="liq"]::before { content: "LIQ "; color: #8fb0ea; font-size: 10px; }

  /* $WEBI Desk */
  .wt-wrap { flex-wrap: wrap; gap: 2px 12px; }
  [data-vest-summary] { font-size: 12px !important; }
  [data-vest-bar] { gap: 2px !important; padding: 5px 6px !important; }
  [data-vest-bar] > div { height: 18px !important; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 50%, calc(100% - 4px) 100%, 0 100%, 4px 50%) !important; }
  .wt-kv { min-height: 36px; padding: 6px 0; gap: 2px 12px; }
  .wt-kv [data-addr] { font-size: 12px !important; }

  /* Account Statement */
  .wt-stmt > div { flex-wrap: wrap; column-gap: 12px; font-size: 13px !important; }

  /* Place Order / Connect Wallet rows */
  .wt-actions { align-items: stretch !important; }
  .wt-actions > a { text-align: center; padding: 12px 20px !important; }
  .wt-actions > div { max-width: none !important; margin-left: 0; text-align: center !important; }

  /* bezel label and stand */
  .wt-bezel-label { padding: 8px 4px 2px !important; }
  .wt-bezel-label > div:nth-child(2) { font-size: 9px !important; letter-spacing: 3px !important; }
  .wt-stand { width: 40% !important; height: 40px !important; }
  .wt-base { width: 64% !important; height: 16px !important; }

  /* the mobile board keeps its own scrolling screen */
  .wt-stage-mobile .wt-bezel { margin: 0 10px; padding: 22px 12px 10px !important; }
  .wt-stage-mobile .wt-crt { min-height: 0; }
  .wt-stage-mobile .wt-screen { height: 100% !important; padding: 16px 16px !important; }
  .wt-stage-mobile [data-panel="board"] { overflow-y: auto !important; }
}