:root {
  --bg: #070014;
  --line: #2f6dff;
  --line-2: #6f8dff;
  --purple: #3a1ea8;
  --text: #f5f7ff;
  --text-soft: #e4ebff;
  --label: #9eb6ff;
  --dim: #c5d2f5;
  --green: #19e07a;
  --red: #ff3154;
  --orange: #ff8a1e;
  --font-pixel: "Press Start 2P", monospace;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-body: 16px;
  --fs-nav: 15px;
  --fs-h: 19px;
  --fs-foot: 13px;
  --lh-body: 1.6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(90, 40, 180, .35), transparent 60%),
    #05010f;
  padding: 18px 22px 28px;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff, transparent),
    radial-gradient(1px 1px at 18% 28%, #fff, transparent),
    radial-gradient(1px 1px at 32% 8%, #cfe, transparent),
    radial-gradient(1px 1px at 48% 18%, #fff, transparent),
    radial-gradient(1px 1px at 63% 10%, #fff, transparent),
    radial-gradient(1px 1px at 77% 22%, #fff, transparent),
    radial-gradient(1px 1px at 90% 14%, #fff, transparent),
    radial-gradient(1px 1px at 12% 70%, #fff, transparent),
    radial-gradient(1px 1px at 84% 64%, #fff, transparent);
  opacity: .8;
}
body.crt .hero {
  position: relative;
}
body.crt .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4px);
}
button, input, textarea { font-family: inherit; color: inherit; font-size: var(--fs-body); letter-spacing: normal; }
a { color: var(--line-2); }
.top {
  display: grid;
  grid-template-columns: 240px 1fr 150px;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.cookie-banner {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #12082a;
  border: 2px solid var(--orange);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(255, 138, 30, .25);
}
.cookie-banner p { margin: 0 0 8px; color: var(--text); }
.cookie-banner strong { font-size: var(--fs-h); color: var(--orange); }
.cookie-banner code { font-family: var(--font-mono); color: var(--text-soft); }
.cookie-ok {
  background: #24115f;
  border: 2px solid #8d6bff;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
}
.logo-atari {
  font-family: var(--font-pixel);
  font-size: 48px;
  line-height: 1;
  background: linear-gradient(180deg, #ffe14a 0%, #ff8a1e 45%, #c84bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 140, 40, .45));
}
.logo-sub {
  margin-top: 8px;
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.4;
  color: #ffe14a;
  text-shadow: 2px 2px 0 #7a2d00;
}
.hero-svg { width: 100%; height: 130px; display: block; }
.slogan { text-align: right; }
.slogan p {
  margin: 0 0 8px;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 1px;
  color: #f3f6ff;
}
.fuji { width: 54px; height: 42px; margin-left: auto; display: block; }
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: linear-gradient(#4b2ad4, #2a1578);
  border: 2px solid #7d6bff;
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(80, 60, 255, .35);
}
.nav button {
  background: transparent;
  border: 0;
  color: #f4f6ff;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}
.nav button.active { background: #1a0c4a; border-radius: 8px; box-shadow: inset 0 0 0 2px #8d7dff; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}
.panel {
  background: rgba(3, 6, 24, .92);
  border: 2px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(10, 30, 80, .8) inset, 0 0 18px rgba(40, 90, 255, .18);
}
.player, .answer, .more, .side-box, .worth, .subview { padding: 12px 14px 14px; margin-bottom: 12px; }
.player-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.track-no {
  font-family: var(--font-pixel);
  font-size: 28px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 10px rgba(120, 170, 255, .8);
}
.mystery {
  margin-top: 6px;
  letter-spacing: 4px;
  color: #9eb6ff;
}
.eq-wrap { position: relative; width: 100%; margin: 8px 0 4px; }
#eq { width: 100%; height: 88px; display: block; }
.eq-mode {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  color: #d7e6ff;
  background: rgba(6, 10, 28, .72);
  border: 1px solid #3d6dff;
  border-radius: 6px;
  padding: 2px 8px;
  pointer-events: none;
}
.eq-hint { margin-left: 10px; color: var(--label); font-size: 13px; }
.transport { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#cover {
  width: 168px;
  height: 112px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid #3d6dff;
  background: #120028;
  flex: 0 0 auto;
}
.play, .ghost, .arrow {
  border: 2px solid #3ecf7a;
  background: #06321c;
  color: #b8ffd4;
  cursor: pointer;
}
.play { width: 54px; height: 54px; border-radius: 8px; font-size: 22px; }
.ghost, .arrow { width: 36px; height: 36px; border-radius: 8px; background: #10183a; border-color: var(--line); }
.seek-col { flex: 1; min-width: 0; }
input[type="range"] { width: 100%; accent-color: #7aa2ff; }
.time { text-align: center; color: var(--text); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.4; margin-top: 4px; }
.vol { display: flex; align-items: center; gap: 6px; width: 110px; font-size: 14px; }
.vote-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.like, .dislike, .send {
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
}
.like { background: #0d3320; border: 2px solid var(--green); color: var(--green); }
.dislike { background: #3a0d18; border: 2px solid var(--red); color: #ff8b9a; }
.like.on, .dislike.on { filter: brightness(1.25); box-shadow: 0 0 12px currentColor; }
.cta { flex: 1; margin: 0; text-align: center; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); min-width: 180px; }
.bot { font-size: 28px; }
.answer-head, .more-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.lock { color: var(--text-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.prompt { color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 8px; }
textarea {
  width: 100%;
  min-height: 74px;
  background: #070b22;
  border: 2px solid #3558c8;
  border-radius: 8px;
  padding: 8px;
  resize: vertical;
}
#answerForm { display: flex; flex-direction: column; align-items: stretch; }
.send { align-self: flex-end; margin-top: 8px; background: #24115f; border: 2px solid #8d6bff; }
.hp { position: absolute; left: -9999px; }
.comment { border-top: 1px solid #24366e; padding: 8px 0; }
.comment.mine { color: #d9fff0; }
.comment-meta { color: var(--label); font-family: var(--font-mono); font-size: var(--fs-foot); line-height: 1.4; margin-bottom: 4px; }
.comment p { margin: 0; white-space: pre-wrap; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.carousel { display: flex; align-items: center; gap: 8px; }
.cards { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 4px; flex: 1; }
.card {
  width: 132px;
  flex: 0 0 auto;
  background: #070b22;
  border: 2px solid #2a4ea8;
  border-radius: 10px;
  color: inherit;
  text-align: left;
  padding: 6px;
  cursor: pointer;
}
.card.active { border-color: #7ec0ff; box-shadow: 0 0 12px rgba(80, 160, 255, .45); }
.card img { width: 100%; height: 72px; object-fit: cover; image-rendering: pixelated; display: block; }
.card-num { font-family: var(--font-pixel); font-size: 12px; line-height: 1.4; }
.card-q { color: var(--text-soft); font-size: var(--fs-foot); min-height: 14px; line-height: 1.4; }
.card-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-foot); margin-top: 4px; line-height: 1.4; }
.mini-like { color: var(--green); }
.mini-dis { color: var(--red); }
.linkish { background: none; border: 0; color: #9ec0ff; cursor: pointer; }
.answer-head, .more-head, .side h2, .subview h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--label);
}
.side h2, .subview h2 { margin: 0 0 8px; }
.side dl { margin: 0; }
.side dl div { display: flex; gap: 8px; margin: 4px 0; }
.side dt { color: var(--label); min-width: 68px; }
.side dd { margin: 0; color: var(--text); font-family: var(--font-mono); }
.side ol { margin: 0; padding-left: 18px; color: var(--text); }
.side li { margin: 4px 0; }
.ai p, .worth p, .subview p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.worth { border-color: #ff4f78; box-shadow: 0 0 16px rgba(255, 60, 110, .2); }
.worth h2 { color: #ff8aa6; }
.fine { color: var(--text-soft); }
.subview { padding: 16px; }
.rank-row {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  background: #0a1030;
  border: 2px solid #27408e;
  color: inherit;
  margin: 8px 0;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stats div { border: 2px solid #2f6dff; padding: 12px; text-align: center; }
.stats b { display: block; font-family: var(--font-pixel); font-size: 18px; line-height: 1.4; margin-bottom: 8px; }
.stats span { font-size: var(--fs-foot); letter-spacing: normal; }
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: var(--fs-foot);
  line-height: 1.5;
  align-items: center;
}
footer button, footer a { background: none; border: 0; color: var(--text-soft); font-size: var(--fs-foot); cursor: pointer; text-decoration: none; }
.muted { color: var(--dim); }
@media (max-width: 980px) {
  .top { grid-template-columns: 1fr; }
  .slogan { text-align: left; }
  .fuji { margin-left: 0; }
  .stage { grid-template-columns: 1fr; }
  .logo-atari { font-size: 32px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .transport { flex-wrap: wrap; }
  .seek-col { flex-basis: 100%; }
}