/* C64 look based on the Pepto palette — same colors as docs/anleitung.html.
   Screen metaphor: dark room (body) → light blue monitor border → dark blue screen. */

:root {
  --c64-black: #000000;
  --c64-white: #ffffff;
  --c64-red: #68372b;
  --c64-cyan: #70a4b2;
  --c64-purple: #6f3d86;
  --c64-green: #588d43;
  --c64-blue: #352879;
  --c64-yellow: #b8c76f;
  --c64-orange: #6f4f25;
  --c64-light-red: #9a6759;
  --c64-grey: #6c6c6c;
  --c64-light-green: #9ad284;
  --c64-light-blue: #6c5eb5;
  --c64-light-grey: #959595;
  --c64-pale: #9f9fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--c64-black);
  font-family: "Consolas", "Courier New", monospace;
  font-size: 16px;
  line-height: 1.5;
}

.screen {
  max-width: 900px;
  margin: 0 auto;
  border: 14px solid var(--c64-light-blue);
  background: var(--c64-blue);
  color: var(--c64-light-blue);
  padding: 28px 32px 20px;
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: normal;
}

h1 { color: var(--c64-white); font-size: 2em; margin: 0 0 4px; }

h2 {
  color: var(--c64-white);
  font-size: 1.15em;
  border-bottom: 2px solid var(--c64-light-blue);
  padding-bottom: 3px;
  margin: 28px 0 10px;
}

p, li { color: var(--c64-pale); }
b, strong { color: var(--c64-white); font-weight: normal; }

a { color: var(--c64-white); text-decoration: none; }
a:hover, a:focus {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
  outline: none;
}

/* Header */
.titlebox { text-align: center; margin-bottom: 8px; }
.titlebox .sub { letter-spacing: 2px; }

/* Navigation as C64 menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 14px 0 26px;
  padding: 8px 0;
  border-top: 2px solid var(--c64-light-blue);
  border-bottom: 2px solid var(--c64-light-blue);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.menu a, .menu .disabled { padding: 0 6px; }
.menu a.active {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
}
.menu .disabled { color: var(--c64-grey); cursor: default; }

/* Language switcher */
.lang-switch { text-align: right; margin: -18px 0 10px; }
.lang-switch form { display: inline; }
.lang-switch button {
  background: none;
  border: none;
  padding: 0 4px;
  font: inherit;
  color: var(--c64-white);
  cursor: pointer;
  letter-spacing: 1px;
}
.lang-switch button:hover { background: var(--c64-light-blue); color: var(--c64-blue); }
.lang-switch .current {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
  padding: 0 4px;
  letter-spacing: 1px;
}

/* Boot screen block on the welcome page */
.bootscreen {
  color: var(--c64-light-blue);
  text-align: center;
  margin: 30px 0;
  white-space: pre-line;
}
.bootscreen .load { color: var(--c64-pale); }

/* Blinking cursor */
.cursor {
  display: inline-block;
  width: 0.65em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; } }

/* Call-to-action button */
.btn {
  display: inline-block;
  border: 2px solid var(--c64-white);
  padding: 8px 22px;
  margin: 10px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.btn:hover { background: var(--c64-white); color: var(--c64-blue); }

/* Tables (scores, controls, downloads) */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}
th, td {
  border: 1px solid var(--c64-light-blue);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--c64-pale);
}
th {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
}
td.key { color: var(--c64-white); white-space: nowrap; }

kbd {
  background: var(--c64-light-blue);
  color: var(--c64-blue);
  padding: 0 6px;
  border-radius: 2px;
}

.hint {
  border-left: 6px solid var(--c64-light-blue);
  background: rgba(108, 94, 181, 0.15);
  padding: 8px 12px;
  margin: 14px 0;
}

/* Footer READY. prompt */
.ready {
  margin-top: 34px;
  padding-top: 8px;
  border-top: 2px solid var(--c64-light-blue);
  color: var(--c64-pale);
}
.ready .meta {
  float: right;
  color: var(--c64-grey);
  font-size: 0.85em;
}

@media (max-width: 600px) {
  body { padding: 6px; }
  .screen { border-width: 8px; padding: 16px 14px 12px; }
  .lang-switch { margin-top: 0; }
}