/* Homebrew catalogue. Cover-forward and dense, same visual language as the retro
   catalogue so the two read as one site. The difference is functional: these cards
   start a game rather than opening a file picker, so each one carries a play mark. */

:root {
  --bg: #0b0e12;
  --bg2: #12161d;
  --bg3: #1a2029;
  --line: #232b36;
  --text: #e8edf4;
  --text2: #94a2b5;
  --accent: #7ee787;
  --accent2: #58c8ff;
  --radius: 12px;
  --tm: 160ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

/* A `display` rule beats the `hidden` attribute, so this keeps a closed overlay
   from covering the catalogue. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent2); }

/* ------------------------------------------------------------------ header */
.top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(0.9rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em;
  white-space: nowrap; color: inherit; text-decoration: none;
}
.brand .mark {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; font-size: 0.95rem; color: #05121c;
  background: linear-gradient(135deg, var(--accent), #2f9d5b);
}
.brand b { color: var(--accent); }

.titles { flex: 1; min-width: 0; }
.titles h1 { margin: 0; font-size: 1.05rem; }
.titles p { margin: 0; font-size: 0.76rem; color: var(--text2); }

.tools { display: flex; gap: 0.5rem; align-items: center; }
#q {
  width: clamp(130px, 22vw, 260px);
  padding: 0.5rem 0.75rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font-size: 0.85rem; outline: none; transition: border-color var(--tm);
}
#q:focus { border-color: var(--accent); }
#random, .back {
  padding: 0.5rem 0.85rem; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--tm), background var(--tm); white-space: nowrap;
}
#random:hover, .back:hover { border-color: var(--accent); background: var(--bg3); }

/* ----------------------------------------------------------------- filters */
.filters {
  display: flex; gap: 0.4rem; overflow-x: auto;
  padding: 0.7rem clamp(0.9rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--text2);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all var(--tm);
}
.chip:hover { color: var(--text); border-color: #35414f; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #04210f; }
.chip .n { opacity: 0.62; margin-left: 0.3rem; font-weight: 500; }

/* -------------------------------------------------------------------- grid */
main { padding: clamp(0.9rem, 2.5vw, 1.6rem); }

.count {
  margin: 0 0 0.8rem;
  font-size: 0.76rem; color: var(--text2);
}
.count span { color: var(--text); font-weight: 700; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg2); overflow: hidden; cursor: pointer;
  text-align: left; padding: 0; color: inherit; font: inherit;
  transition: transform var(--tm), border-color var(--tm), box-shadow var(--tm);
}
.card:hover, .card:focus-visible {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); outline: none;
}

/* The card image is the whole reason to browse, so it fills a fixed 3:4 box. */
.card-art {
  position: relative;
  aspect-ratio: 3 / 4; background: #0d1117;
  display: grid; place-items: center; overflow: hidden;
}
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The play mark is what tells a visitor these cards actually start something,
   which is the difference from the bring-your-own-ROM catalogue. */
.play-dot {
  position: absolute;
  inset: auto auto 8px 8px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(126, 231, 135, 0.92);
  color: #04210f; font-size: 0.72rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: scale(0.9); opacity: 0.92;
  transition: transform var(--tm), opacity var(--tm);
}
.card:hover .play-dot { transform: scale(1.06); opacity: 1; }

.card-body { padding: 0.5rem 0.6rem 0.6rem; }
.card-title {
  font-size: 0.8rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.1em;
}
.card-sys {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.3rem; margin-top: 0.3rem;
  font-size: 0.68rem; color: var(--text2);
}
.card-region {
  padding: 0.1rem 0.35rem; border-radius: 5px;
  background: var(--bg3); font-size: 0.62rem;
}

.empty { text-align: center; color: var(--text2); padding: 3rem 1rem; }

/* ------------------------------------------------------------------- stage */
.stage {
  position: fixed; inset: 0; z-index: 60;
  background: #05070a; display: flex; flex-direction: column;
}
.stage-bar {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem clamp(0.7rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.stage-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.55rem; }
.stage-info strong {
  font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage-info span { font-size: 0.74rem; color: var(--text2); white-space: nowrap; }

.screen {
  flex: 1; display: grid; place-items: center;
  padding: clamp(0.4rem, 2vw, 1rem); min-height: 0; overflow: hidden;
}
/* The emulator sizes its own canvas from the parent box, so the chain has to be
   bounded all the way down. Without an explicit height here the canvas grows to
   the parent's scroll height and the frame is stretched into a sliver. */
/* EmulatorJS manages the layout inside this element and sizes its canvas from the
   box it measures here. It expects a plain, bounded block, so this deliberately
   does not impose a grid or flex on the children -- doing that confuses the
   sizing pass and the canvas backing store balloons. */
#mount {
  width: 100%; height: 100%;
  min-height: 0; max-height: 100%;
  position: relative;
  overflow: hidden;
}
#mount .ejs_canvas_parent { max-width: 100%; max-height: 100%; }
#mount canvas { max-width: 100%; max-height: 100%; object-fit: contain; }

.desc {
  margin: 0; padding: 0.4rem clamp(0.7rem, 2.5vw, 1.4rem) 0;
  font-size: 0.76rem; color: var(--text2); line-height: 1.5;
  max-height: 3.4em; overflow: hidden;
}
.notice {
  margin: 0; padding: 0.5rem clamp(0.7rem, 2.5vw, 1.4rem);
  font-size: 0.72rem; color: var(--text2);
  border-top: 1px solid var(--line); background: var(--bg);
}

/* ------------------------------------------------------------------ footer */
.foot {
  margin-top: 1rem;
  padding: 1.2rem clamp(0.9rem, 3vw, 2rem) 2rem;
  border-top: 1px solid var(--line);
  color: var(--text2); font-size: 0.76rem; line-height: 1.65;
}
.foot p { margin: 0 0 0.5rem; max-width: 70ch; }
.foot b { color: var(--text); }
.foot .src { font-size: 0.72rem; opacity: 0.8; }

@media (max-width: 620px) {
  .titles p { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .stage-info { flex-direction: column; gap: 0; align-items: flex-start; }
  .stage-info span { display: none; }
  .desc { display: none; }
}

/* Fullscreen: let the canvas have the whole area. */
.stage:fullscreen .stage-bar,
.stage:fullscreen .notice,
.stage:fullscreen .desc { display: none; }
.stage:fullscreen .screen { padding: 0; }