/* C64 disk library — palette straight off the VIC-II:
   screen  #40318D  (C64 dark blue)
   frame   #7C70DA  (C64 light blue: border + text)
   bright  #FFFFFF  (highlights)
   ok      #94E089  (C64 light green, used only for the READY prompt)
   desk    #17142A  (page surround) */

:root {
  --screen: #40318D;
  --frame:  #7C70DA;
  --bright: #FFFFFF;
  --ok:     #94E089;
  --desk:   #17142A;
  --mono: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--desk);
  color: var(--frame);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 48px;
}

/* Side-by-side layout: menu screen on the left, player on the right.
   Stacks vertically on narrow windows. */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 1400px;
}

/* The classic boot screen: light-blue border ring around a dark blue screen */
.screen {
  background: var(--screen);
  border: 16px solid var(--frame);
  border-radius: 3px;
  flex: 0 1 400px;
  min-width: 300px;
  padding: 18px 20px;
}

#emu-wrap {
  flex: 1 1 0;
  min-width: 0;
  position: sticky;
  top: 16px;
}
#emu-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  background: #000;
  display: none;
}
#emu-frame.active { display: block; }

@media (max-width: 900px) {
  .layout { flex-direction: column; align-items: stretch; }
  .screen { flex: none; min-width: 0; }
  #emu-wrap { position: static; }
}

.screen h1 {
  color: var(--bright);
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.ready { color: var(--ok); margin: 10px 0 0; }

.cursor {
  display: inline-block;
  width: 0.62em; height: 1.05em;
  background: var(--ok);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* Category filter row */
.cats { margin: 10px 0 6px; }
.cats button {
  font: inherit; font-family: var(--mono);
  background: none; border: 0; color: var(--frame);
  padding: 1px 6px; cursor: pointer;
}
.cats button[aria-checked="true"],
.cats button:hover, .cats button:focus-visible {
  background: var(--frame); color: var(--screen); outline: none;
}

/* Directory-listing menus */
.listing { margin: 14px 0 0; padding: 0; list-style: none; }
.listing button {
  font: inherit;
  font-family: var(--mono);
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--frame);
  padding: 2px 4px;
  cursor: pointer;
  white-space: pre-wrap;
}
.listing button:hover,
.listing button:focus-visible {
  background: var(--frame);
  color: var(--screen);
  outline: none;
}
.listing .blocks { display: inline-block; min-width: 4ch; }
.listing button.current { color: var(--bright); }
.listing .ftype { opacity: 0.75; }

.crumb {
  font: inherit; font-family: var(--mono);
  background: none; border: 0; padding: 0;
  color: var(--bright);
  cursor: pointer;
  margin-top: 12px;
}
.crumb:hover, .crumb:focus-visible { background: var(--bright); color: var(--screen); outline: none; }

.dim { opacity: 0.75; }
.error { color: var(--bright); background: #A03030; padding: 4px 8px; }

/* player.html */
.player-body { padding: 10px; }
#emu { width: 100%; height: 100%; }
.emu-holder { width: 100%; aspect-ratio: 4 / 3; background: #000; }

.startup-note {
  width: 100%;
  margin-top: 10px;
  border: 2px solid var(--frame);
  background: var(--screen);
  padding: 10px 14px;
}
.startup-note pre {
  margin: 6px 0 10px;
  color: var(--bright);
  white-space: pre-wrap;
}
.startup-note button {
  font: inherit; font-family: var(--mono);
  background: var(--frame);
  color: var(--screen);
  border: 0;
  padding: 4px 12px;
  cursor: pointer;
}
.startup-note button:hover, .startup-note button:focus-visible {
  background: var(--bright);
  outline: none;
}

footer {
  margin-top: 26px;
  font-size: 0.8em;
  opacity: 0.55;
  max-width: 720px;
  text-align: center;
}