:root {
  --navy: #000033;
  --panel: #000066;
  --cyan: #00ffff;
  --lime: #00ff00;
  --yellow: #ffff00;
  --magenta: #ff00ff;
  --gray: #c0c0c0;
  --gray-hi: #ffffff;
  --gray-lo: #808080;
  --gray-dk: #000000;
  --titlebar: #000080;
  --titlebar2: #1084d0;
  --red: #ff2020;
  color-scheme: only light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: #fff;
  font: 16px/1.4 "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Trebuchet MS", sans-serif;
  background-color: #000018;
  background-image: url(/tile.svg);
}

a { color: var(--cyan); }
a:visited { color: var(--magenta); }
a:hover { color: var(--yellow); }

.page {
  max-width: 980px;
  margin: 0 auto;
  background: var(--navy);
  border-left: 6px ridge var(--gray);
  border-right: 6px ridge var(--gray);
  overflow: hidden;
}

.ticker {
  display: block;
  padding: 3px 0;
  background: var(--yellow);
  color: var(--red);
  font: bold 15px "Courier New", monospace;
  border-bottom: 3px ridge var(--gray);
}

.masthead { text-align: center; padding: 22px 12px 6px; }

.wordart {
  margin: 0;
  font: 900 clamp(38px, 9vw, 84px)/1 Impact, "Arial Black", Haettenschweiler, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffd400;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe14d 28%, #ff9d00 52%, #ff2a00 74%, #a10000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #fff) drop-shadow(4px 4px 0 #2222bb) drop-shadow(7px 7px 0 #000);
  transform: perspective(500px) rotateX(14deg);
  transform-origin: 50% 100%;
}

.tagline { margin: 12px 0 0; color: var(--lime); font-size: 15px; }

.blink { animation: blink 1s steps(2, start) infinite; }
.red { color: var(--red); font-weight: bold; }
@keyframes blink { to { visibility: hidden; } }

hr.rainbow {
  height: 7px;
  margin: 12px 0;
  border: 0;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
}

.leader {
  margin: 0 10px 12px;
  padding: 12px 12px 8px;
  text-align: center;
  background: linear-gradient(180deg, #c80000, #7a0000);
  border: 5px ridge #ffd400;
}
.decree { margin: 0; font: bold 13px Arial, Helvetica, sans-serif; letter-spacing: 2px; color: #ffe680; }
.leader h2 {
  margin: 2px 0 8px;
  font: 900 clamp(24px, 5vw, 42px)/1.05 Impact, "Arial Black", sans-serif;
  color: #ffd400;
  text-shadow: 3px 3px 0 #500000;
}
#flag { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.slogans { margin: 6px 0 0; padding: 0; list-style: none; font: 900 clamp(14px, 2.4vw, 18px)/1.3 "Arial Black", Arial, sans-serif; color: #fff2b0; }
.slogans li { padding: 2px 0; }

.layout {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 180px;
  gap: 10px;
  padding: 0 10px;
}

.side { min-width: 0; font-size: 14px; }

.sidehead {
  margin: 12px 0 6px;
  padding: 2px 4px;
  font: bold 14px Arial, Helvetica, sans-serif;
  text-align: center;
  color: var(--yellow);
  background: linear-gradient(90deg, #a00000, #d02000);
  border: 2px outset var(--gray);
}
.side > .sidehead:first-child { margin-top: 0; }

.bevel {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 6px 8px;
  font: bold 13px Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #000 !important;
  background: var(--gray);
  border: 2px solid;
  border-color: var(--gray-hi) var(--gray-dk) var(--gray-dk) var(--gray-hi);
  box-shadow: inset -1px -1px 0 var(--gray-lo), inset 1px 1px 0 #dfdfdf;
  cursor: pointer;
}
.bevel:hover { background: #d8d8d8; }
.bevel:active { border-color: var(--gray-dk) var(--gray-hi) var(--gray-hi) var(--gray-dk); }
.bevel:focus-visible, .win input:focus-visible, .askform input:focus-visible { outline: 2px dashed var(--magenta); outline-offset: 1px; }
.bevel.big { font-size: 16px; padding: 10px; }
.bevel.dl { color: #000 !important; background: var(--lime); }

.micro { margin: 4px 0; font-size: 12px; color: #b8c8ff; }
.center { text-align: center; }

.odometer {
  padding: 4px;
  text-align: center;
  font: bold 21px "Courier New", monospace;
  letter-spacing: 1px;
  color: var(--lime);
  background: #000;
  border: 3px inset var(--gray);
}

.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 12px; }
.badge {
  display: block;
  padding: 3px 1px;
  font: bold 10px/1.15 Arial, Helvetica, sans-serif;
  text-align: center;
  border: 2px outset #fff;
}
.b1 { background: #ffcc00; color: #000; }
.b2 { background: #cc0000; color: #fff; }
.b3 { background: #006600; color: #fff; }
.b4 { background: #fff; color: #000080; }

.panel {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 4px ridge var(--gray);
}
.panel.wide, .win.wide { margin: 10px; }
.main { min-width: 0; }

.panel h2 { margin: 0 0 8px; text-align: center; font: 900 clamp(21px, 4vw, 28px) "Arial Black", Impact, sans-serif; }
.rainbowtext {
  background: linear-gradient(90deg, #ff4040, #ffa000, #ffff40, #40ff40, #40ffff, #6090ff, #ff60ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stage {
  position: relative;
  border: 4px inset var(--gray);
  background:
    radial-gradient(ellipse at 50% 45%, #5a1fb0 0%, #1d0a5c 45%, #03001a 100%);
}
#ram {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: pan-y;
}
#ram:active { cursor: grabbing; }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; color: var(--yellow); }
.nogl[hidden] { display: none; }

.flash {
  position: absolute;
  top: 8px;
  right: 10px;
  font: bold 16px "Courier New", monospace;
  color: var(--yellow);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  opacity: 0;
}
.flash.on { animation: flash 1.4s ease-out; }
@keyframes flash {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-14px); }
}

.pricebox {
  margin-top: 8px;
  padding: 10px;
  text-align: center;
  background: #000;
  border: 4px ridge var(--yellow);
}
.pricelabel { font: bold 12px Arial, Helvetica, sans-serif; color: var(--cyan); }
.price {
  margin: 2px 0;
  font: bold clamp(36px, 8vw, 54px)/1.1 "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--lime);
  text-shadow: 0 0 10px #00ff0088;
  overflow-wrap: anywhere;
}
.pricenote { margin-bottom: 8px; font: bold 13px Arial, Helvetica, sans-serif; color: var(--red); }
.up { color: var(--red); }
.cartmsg { min-height: 1.4em; margin: 6px 0 0; color: var(--yellow); font-size: 14px; }

.stats { margin: 0; }
.stats dt { color: #b8c8ff; font-size: 12px; }
.stats dd { margin: 0 0 6px; font: bold 18px "Courier New", monospace; color: var(--lime); }
.scan { margin: 0; color: #fff; font-size: 13px; }

.hot { margin: 0; padding-left: 18px; font-size: 13px; }
.newtag { color: var(--red); font: bold 10px Arial, Helvetica, sans-serif; }

.stream {
  position: relative;
  height: 322px;
  margin: 0 10px;
  overflow: hidden;
  background: #000;
  border: 4px inset var(--gray);
}
.card {
  position: absolute;
  top: 8px;
  left: 0;
  width: 216px;
  border: 3px outset var(--gray);
  background: var(--gray);
  color: #000;
  will-change: transform;
}
.card header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 4px;
  font: bold 11px Arial, Helvetica, sans-serif;
  color: #fff;
  background: linear-gradient(90deg, var(--titlebar), var(--titlebar2));
  white-space: nowrap;
}
.card canvas { display: block; width: 210px; height: 210px; background: #000; }
.card p {
  margin: 0;
  height: 62px;
  padding: 3px 5px;
  overflow: hidden;
  font: 11px/1.25 "Courier New", monospace;
  color: var(--lime);
  background: #000;
}
.stream.still { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; height: auto; padding: 8px; }
.stream.still .card { position: static; }

.construction {
  margin: 10px;
  padding: 7px;
  text-align: center;
  font: 900 15px Arial, Helvetica, sans-serif;
  color: #000;
  background: repeating-linear-gradient(-45deg, #ffd400 0 22px, #111 22px 44px);
}
.construction span { display: inline-block; padding: 2px 10px; background: #ffd400; border: 2px solid #000; }
.feedhead { margin-bottom: 0 !important; border-bottom: 0; }

.ledger { width: 100%; border-collapse: collapse; background: #000; font-size: 15px; }
.ledger th, .ledger td { padding: 5px 8px; border: 2px ridge var(--gray); text-align: left; }
.ledger th { color: var(--yellow); background: #400060; font-family: Arial, Helvetica, sans-serif; }
.ledger td:last-child, .ledger th:last-child { width: 110px; text-align: right; font-family: "Courier New", monospace; }
.ledger .you td { color: var(--red); font-weight: bold; }

.faq { margin: 0; }
.faq dt { margin-top: 10px; color: var(--yellow); font-weight: bold; }
.faq dd { margin: 2px 0 0 16px; }

.win {
  color: #000;
  background: var(--gray);
  border: 2px solid;
  border-color: var(--gray-hi) var(--gray-dk) var(--gray-dk) var(--gray-hi);
  box-shadow: inset -1px -1px 0 var(--gray-lo), inset 1px 1px 0 #dfdfdf;
  padding: 3px;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
}
.wintitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 2px 3px 2px 5px;
  font: bold 13px Tahoma, Arial, Helvetica, sans-serif;
  color: #fff;
  background: linear-gradient(90deg, var(--titlebar), var(--titlebar2));
}
.winbtns { display: inline-flex; gap: 2px; flex: none; }
.winbtns i, .winbtns button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 16px;
  padding: 0;
  font: bold 11px Tahoma, Arial, sans-serif;
  color: #000;
  background: var(--gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
}
.winbtns button { cursor: pointer; }
.winbody { padding: 8px; font-size: 14px; }

.dimmywrap { display: flex; gap: 10px; align-items: flex-start; }
.dimmyface { flex: 0 0 110px; width: 110px; }
.pupil { fill: #000; }
.chat {
  flex: 1;
  min-width: 0;
  height: 150px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 2px inset var(--gray);
}
.chat p { margin: 0 0 6px; }
.chat .me { color: #000080; font-weight: bold; }
.chat .cost { color: #a00000; font: 11px "Courier New", monospace; }

.askform { display: flex; gap: 6px; margin-top: 8px; }
.askform input {
  flex: 1;
  min-width: 0;
  padding: 5px;
  font: 16px "Courier New", monospace;
  color: #000;
  background: #fff;
  border: 2px inset var(--gray);
}
.askform .bevel { width: auto; flex: none; margin: 0; }

.serious {
  color: #111;
  background: #f4f1e4;
  font: 16px/1.5 Georgia, "Times New Roman", serif;
  border-color: var(--gray);
}
.serious h2 { color: #111; font: bold 22px Georgia, "Times New Roman", serif; text-align: left; }
.serious ul { margin: 8px 0 0; padding-left: 22px; }
.serious li { margin-bottom: 6px; }
.serious a, .serious a:visited { color: #0000cc; }

.entries p { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px dashed #6878c8; }
.entries b { color: var(--yellow); }

.foot { padding: 8px 12px 18px; text-align: center; font-size: 13px; }
.foot p { margin: 6px 0; }
.webring { padding: 6px; font-family: "Times New Roman", serif; border: 3px double var(--gray); }

.dialog {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 22%;
  width: min(380px, calc(100vw - 32px));
  transform: translateX(-50%);
  box-shadow: 4px 4px 0 #0008, inset -1px -1px 0 var(--gray-lo), inset 1px 1px 0 #dfdfdf;
}
.dialog[hidden] { display: none; }
.dialog p { margin: 0 0 10px; }
.progress { height: 20px; margin-bottom: 8px; padding: 2px; background: #fff; border: 2px inset var(--gray); }
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #000080 0 12px, #fff 12px 14px);
}
.dialog .bevel { width: auto; min-width: 80px; margin: 0 auto; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .page { border-width: 3px; }
  .page { display: flex; flex-direction: column; }
  .page > * { order: 10; }
  .ticker, .masthead, hr.rainbow, .leader { order: 0; }
  .layout { display: contents; }
  .main { order: 1; margin: 0 10px; }
  .feedhead { order: 2; }
  .stream { order: 3; flex: none; }
  .side { order: 4; margin: 10px 10px 0; }
  .side:not(.right) { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .side:not(.right) .sidehead,
  .side:not(.right) .odometer,
  .side:not(.right) .micro,
  .side:not(.right) .badges { grid-column: 1 / -1; }
  .side:not(.right) .bevel { margin: 0; }
  .badges { grid-template-columns: repeat(4, 1fr); }
  .dimmywrap { flex-direction: column; align-items: center; }
  .chat { width: 100%; flex: none; }
  .ledger { font-size: 14px; }
  .ledger td:last-child, .ledger th:last-child { width: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink { animation: none; }
  .flash.on { animation: none; opacity: 1; }
}