html, body { width: 100%; height: 100%; margin: 0; background: #000; }
body { overflow: hidden; }
#workspace { display: flex; width: 100%; height: 100%; }
#terminal { flex: 1; min-width: 0; height: 100%; padding: 10px; box-sizing: border-box; }
#terminal .xterm { height: 100%; }

#cover-panel { box-sizing: border-box; width: 220px; flex: 0 0 220px; padding: 14px 14px 0 6px; color: #48db55; font: 12px/1.4 "Courier New", monospace; }
#cover-panel[hidden] { display: none; }
.cover-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #316b35; padding-bottom: 5px; margin-bottom: 8px; }
.cover-heading button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; font: inherit; }
.cover-frame { position: relative; width: 100%; background: #080c08; }
.cover-frame img { display: block; width: 100%; height: auto; }
.cover-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%), linear-gradient(90deg,rgba(255,0,0,.06),rgba(0,255,0,.02),rgba(0,0,255,.06)); background-size: 100% 2px, 3px 100%; }
#cover-label { padding-top: 7px; overflow-wrap: anywhere; }
@media (max-width: 600px) { #cover-panel { width: 115px; flex-basis: 115px; padding: 10px 8px 0 0; font-size: 10px; } }

#cover-facts { margin: 12px 0 0; border-top: 1px solid #316b35; overflow-wrap: anywhere; }
#cover-facts dt { margin-top: 10px; opacity: .65; font-size: .85em; }
#cover-facts dd { margin: 1px 0 0; }
#cover-panel { overflow-y: auto; scrollbar-width: none; }
#cover-panel::-webkit-scrollbar { display: none; }

/* CRT scanlines, matching the rest of the site. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .25) 50%), linear-gradient(90deg, rgba(255, 0, 0, .06), rgba(0, 255, 0, .02), rgba(0, 0, 255, .06));
    background-size: 100% 2px, 3px 100%;
    z-index: 9999;
    pointer-events: none;
}
.cover-frame::after { display: none; }

/* Compact touch layout: preserve terminal width and move the release card above it. */
#mobile-controls { display: none; }
@media (max-width: 700px) {
  html, body { height: 100%; height: 100dvh; }
  body { display: flex; flex-direction: column; }
  #workspace { flex: 1 1 auto; min-height: 0; height: auto; flex-direction: column-reverse; }
  #terminal { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; padding: 6px; }
  #cover-panel { width: 100%; flex: 0 0 auto; max-height: 155px; padding: 6px 8px; display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto 1fr; column-gap: 10px; overflow-y: auto; border-bottom: 1px solid #316b35; }
  #cover-panel[hidden] { display: none; }
  .cover-heading { grid-column: 1 / -1; margin-bottom: 5px; }
  .cover-frame { grid-column: 1; grid-row: 2 / 4; }
  .cover-frame img { width: 90px; max-height: 105px; object-fit: contain; object-position: top left; }
  #cover-label { grid-column: 2; padding-top: 0; }
  #cover-facts { grid-column: 2; margin: 4px 0 0; border: 0; display: flex; flex-wrap: wrap; gap: 3px 6px; align-content: start; }
  #cover-facts dt { margin: 0; }
  #cover-facts dd { margin: 0 6px 0 0; }
  #mobile-controls { display: flex; flex: 0 0 auto; border-top: 1px solid #316b35; }
  #mobile-controls button { flex: 1; min-height: 42px; border: 0; border-right: 1px solid #183a1e; background: #000; color: #48db55; font: 10px "Courier New", monospace; }
}

/* Leave breathing room beneath the final terminal row. */
#terminal { padding-bottom: 24px; }
#terminal .xterm { height: auto; }
@media (max-width: 700px) {
  #terminal { padding-bottom: 18px; }
  #mobile-controls { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* FitAddon measures the terminal parent and subtracts xterm padding. */
#terminal { padding: 0; }
#terminal .xterm { box-sizing: border-box; padding: 10px 10px 24px; }
@media (max-width: 700px) {
  #terminal { padding: 0; }
  #terminal .xterm { padding: 6px 6px 18px; }
}