/* tokens, locked off the approved art + the lane brief:
   bg tile: cropped straight from the avatar's own digit-grid pixels (assets/tile.png)
   phosphor green #00c900 / chrome yellow #f3c400 / trust red #cc0000 (sampled from avatar/banner)
   classic hyperlink blue #0000ee / visited #551a8b (the lane's own "list of blue underlined links")
   crushed paper #e4e0c8, ink #1a1a10
   type: system Arial/Helvetica only, tiny, no bundled font (site predates webfonts by design) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background-color: #05170a;
  background-image: url('assets/tile.png');
  background-repeat: repeat;
  background-size: 100px 72px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #1a1a10;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }
a { text-decoration: underline; }

.wrap {
  max-width: 960px;
  margin: 12px auto;
  background: #e4e0c8;
  border: 1px solid #000;
}

/* banner.png is 1200x400; the graphic band we want is its top 234px (the fake
   mockup UI baked into the art's bottom half is deliberately cropped out here
   so the real, working mockup below can be the actual site instead) */
.banner-holder {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 19.5%;
  border-bottom: 1px solid #000;
}
.banner-img {
  position: absolute;
  top: -1.5%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

.navbar {
  background: #0a4d1a;
  color: #d8f5c8;
  padding: 4px 8px;
  font-size: 11px;
  border-bottom: 1px solid #000;
}
.navbar a { color: #f3c400; text-decoration: underline; }
.navbar a:visited { color: #f3c400; }
.clock {
  float: right;
  color: #00e000;
  font-family: 'Courier New', monospace;
}

table.layout { width: 100%; border-collapse: collapse; table-layout: fixed; }
.col { vertical-align: top; padding: 8px; border-right: 1px solid #999; }
.col:last-child { border-right: none; }
.col-links { width: 24%; }
.col-main { width: 52%; }
.col-trust { width: 24%; }

.box {
  background: #f6f4e6;
  border: 1px solid #999;
  margin-bottom: 8px;
}
.box-title {
  background: #0a4d1a;
  color: #f3c400;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  text-transform: uppercase;
}
.box > p, .box .lede { padding: 6px 8px; margin: 0; }

.linklist { list-style: none; margin: 0; padding: 6px 8px; }
.linklist li { margin-bottom: 4px; }

.adbox { border: 1px dashed #cc0000; }
.ad-flash {
  background: #ffee00;
  color: #cc0000;
  font-weight: bold;
  text-align: center;
  padding: 4px;
  animation: adflash 1.1s steps(1) infinite;
}
@keyframes adflash {
  0%, 49% { background: #ffee00; }
  50%, 100% { background: #fff6b0; }
}
.ad-body { padding: 6px 8px; text-align: center; }
.ad-fine { font-size: 9px; color: #666; }
.ad-body-2 { font-size: 11px; }

.status-box { padding-bottom: 8px; }
.lede { font-style: italic; color: #333; }

.bar-frame { padding: 4px 8px 0; }
.bar-track {
  border: 1px solid #000;
  background: #ccc;
  height: 18px;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(45deg, #00c900, #00c900 6px, #00e000 6px, #00e000 12px);
}
.bar-readout { text-align: right; font-size: 11px; padding: 2px 0; }

.check-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 0;
  font-family: inherit;
  font-size: 11px;
  padding: 4px;
  background: #d8d5c0;
  border: 1px solid #000;
  cursor: pointer;
}
.check-btn:active { background: #c0bda8; }
.check-line { padding: 6px 8px 0; font-size: 11px; min-height: 14px; }
.check-count { padding: 2px 8px 6px; font-size: 10px; color: #555; }

.ref-box { margin: 6px 8px; border: 1px solid #999; background: #fffef2; }
.ref-label { background: #cc0000; color: #fff; font-size: 10px; padding: 2px 6px; font-weight: bold; }
.ref-value {
  display: block;
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 5px 6px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  word-break: break-all;
}
.ref-value.copied::after { content: ' [copied]'; color: #0a4d1a; }

.buy-link {
  display: block;
  margin: 6px 8px 8px;
  text-align: center;
  background: #0a4d1a;
  color: #f3c400 !important;
  font-weight: bold;
  padding: 6px;
  text-decoration: none;
  border: 1px solid #000;
}

.trust-title { background: #cc0000; }
.counter-frame { padding: 6px 8px; text-align: center; }
.counter-label { font-size: 10px; margin-bottom: 3px; }
.counter-digits {
  background: #000;
  color: #00e000;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  letter-spacing: 4px;
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #333;
}
.sound-row { text-align: center; padding: 0 8px 8px; }
.sound-toggle {
  font-family: inherit;
  font-size: 10px;
  padding: 3px 8px;
  background: #d8d5c0;
  border: 1px solid #000;
  cursor: pointer;
}
.sound-toggle[aria-pressed="true"] { background: #00c900; }

.marquee-strip {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #000;
  color: #00e000;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 0;
}
.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 22s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.faq-box, .contact-box { margin: 8px; }
.faq-box p, .contact-box p { padding: 4px 8px; margin: 0; }

.footer {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 10px;
  color: #555;
  border-top: 1px solid #999;
}

@media (prefers-reduced-motion: reduce) {
  .ad-flash { animation: none; background: #ffee00; }
  .marquee-track { animation: none; padding-left: 0; }
}

@media (max-width: 640px) {
  table.layout, table.layout tbody, table.layout tr, .col {
    display: block;
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid #999;
  }
  .navbar .clock { float: none; display: block; margin-top: 2px; }
}