html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body {
  font-family: "Press Start 2P", system-ui, sans-serif;
  background: radial-gradient(1200px circle at 50% 30%, #2b2b2b, #151515 70%);
  color: #e7ffe7;
}
.topbar {
  height: 72px; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; background: linear-gradient(#303030, #1f1f1f);
  box-shadow: 0 3px 0 #0f0, inset 0 -3px 0 #0a0;
}
.logo { height: 48px; image-rendering: pixelated; }
.marquee { flex: 1; overflow: hidden; color: #9cff9c; font-size: 12px; }
.marquee span { display: inline-block; padding-left: 100%; animation: scroll 12s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.app { height: calc(100vh - 72px); display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 12px; padding: 12px; overflow-y: auto; }
.panel {
  background: linear-gradient(180deg, #262626, #1a1a1a);
  border: 3px solid #0f0; box-shadow: inset 0 0 0 3px #0a0, 0 6px #000;
  border-radius: 10px; padding: 12px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btns { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.retro-input {
  padding: 14px; font-size: 14px; background: #101610; color: #c8ffc8;
  border: 2px solid #0a0; border-radius: 8px; box-shadow: inset 0 0 0 2px #063, 0 3px #000;
}
.retro-input:focus { outline: none; border-color: #3f3; box-shadow: inset 0 0 0 2px #0a4, 0 3px #000; }
.retro-btn {
  padding: 14px; font-size: 14px; background: linear-gradient(#0c220c, #081808);
  color: #baffba; border: 2px solid #0a0; border-radius: 10px; box-shadow: inset 0 0 0 2px #063, 0 4px #000; cursor: pointer;
}
.retro-btn.primary { background: linear-gradient(#0f3c0f, #0a260a); color: #eaffea; }
.retro-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px #063, 0 2px #000; }
.status { margin-top: 8px; font-size: 12px; color: #9cff9c; min-height: 16px; }
.result-panel { display: grid; grid-template-columns: 360px 1fr; gap: 12px; align-items: start; }
@media (max-width: 800px) { .result-panel { grid-template-columns: 1fr; } }
.score-wrap { display: grid; gap: 12px; }
.score-circle {
  width: 100%; aspect-ratio: 1/1; background: radial-gradient(circle, #133513 0%, #0b1f0b 60%, #071407 100%);
  border: 4px solid #0f0; border-radius: 50%; box-shadow: inset 0 0 40px #0b0, 0 6px #000;
  display: grid; place-items: center;
}
.score-number { font-size: 48px; color: #e7ffe7; text-shadow: 0 0 6px #0f0; }
.score-label { font-size: 10px; color: #9cff9c; margin-top: -6px; }
.summary { font-size: 12px; line-height: 1.5; color: #c8ffc8; background: #0d1b0d; border: 2px solid #0a0; border-radius: 8px; padding: 12px; }
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cat {
  background: linear-gradient(180deg, #222, #171717);
  border: 3px solid #0f0; border-radius: 10px; padding: 10px; box-shadow: inset 0 0 0 3px #0a0, 0 6px #000;
}
.cat-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #e7ffe7; }
.cat-bar {
  height: 10px; border: 2px solid #0a0; border-radius: 8px; background: #0d1b0d; margin-top: 8px; overflow: hidden;
}
.cat-fill { height: 100%; background: linear-gradient(90deg, #2bff2b, #0f0); width: 0%; }
.cat-text { margin-top: 8px; font-size: 11px; color: #c8ffc8; }
.badge {
  font-size: 10px; color: #101610; background: #7aff7a; border: 2px solid #0a0; border-radius: 8px; padding: 3px 6px;
}
.hidden { display: none; }