/* ====================================================================
   base.css — verbatim from jannerm.github.io/css/base.css
   ==================================================================== */
body {
  margin: 1em auto;
  padding: 2em;
  max-width: 65em;
  font: .8em/1.5 Helvetica;
}
h1, h2, h3 {
  line-height: 1.5;
}
h2 {
  padding-top: 10px;
}
div.title {
  font-weight: bold;
  padding-top: 10px;
}
li {
  margin: 1em auto;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: inherit;
}
a:hover {
  text-decoration: underline;
}
.author {
  color: #000000;
  text-decoration: none;
}
.author:hover {
  text-decoration: underline;
}
.backlink {
  color: #969696;
  text-decoration: none;
}
.backlink:hover {
  text-decoration: underline;
}
.venue {
  color: #bb2222;
  font-weight: bold;
  text-decoration: none;
}
.nohover:hover {
  text-decoration: none;
}
.link {
  color: #bb2222;
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}
.bold {
  color: #bb2222;
  font-weight: bold;
}

/* ====================================================================
   desktop.css — verbatim from jannerm.github.io/css/desktop.css
   ==================================================================== */
div.teaser {
  height: 20ex;
}
td.teaser {
  width: 30%;
  text-align: center;
  padding-left: 2.5%;
  direction: rtl;
}
td.metadata {
  vertical-align: top;
}

/* ====================================================================
   ADDITIONS — everything below is ours, not on Janner's site
   ==================================================================== */

/* --- links ---
   Overrides base.css, where `a { color: inherit }` makes links invisible
   until you hover them. #0066CC is the blue Janner has commented out on
   `.link` in his own stylesheet.
   Note the `a.backlink` selector: the contact line uses <span class="backlink">
   for things that aren't links (email, discord, location), and those must
   stay gray rather than look clickable. */
a,
a.backlink,
.link {
  color: #0066CC;
  text-decoration: underline;
}
a:hover,
a.backlink:hover,
.link:hover {
  color: #0066CC;
  text-decoration: underline;
}

/* keep bracketed links intact — "[more\ndetails]" reads terribly */
.backlink {
  white-space: nowrap;
}

/* --- entry titles: "Company | Role", resume-style ---
   Black and undecorated even though both halves are links, so the row reads
   as a heading rather than a wall of blue. Hover still underlines them, and
   the blue [more details] link carries the affordance. */
div.title {
  font-size: 1.15em;
}
div.title a,
h1 a {
  color: #000;
  text-decoration: none;
}
div.title a:hover,
h1 a:hover {
  color: #000;
  text-decoration: underline;
}

/* the "|" between company and role — lighter, like the resume */
.sep {
  font-weight: normal;
  color: #969696;
}

/* He sets width=100% per <img>; we size once here instead so the
   teaser images sit inside the 20ex band. */
div.teaser img,
div.teaser video {
  max-height: 20ex;
  max-width: 100%;
}

/* Teasers and heroes open in the lightbox on click, and videos also preview
   on hover — both live in script.js. */
div.teaser img,
div.teaser video,
.hero {
  cursor: zoom-in;
}

/* --- lightbox ---
   A dimmed full-screen overlay built in script.js on click. Nothing here is
   on the reference site. */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  transition: opacity .22s ease;
}
.lightbox.open {
  opacity: 1;
}

/* starts slightly small and settles — the "zoom in" part */
.lightbox img,
.lightbox video {
  max-width: 100%;
  max-height: 100%;
  cursor: default;
  transform: scale(.92);
  transition: transform .22s ease;
  box-shadow: 0 2px 40px rgba(0, 0, 0, .6);
  /* the placeholder SVGs are transparent — without this you'd see the dimmed
     page through them instead of the light card they look like in the row */
  background: #fff;
}
.lightbox.open img,
.lightbox.open video {
  transform: scale(1);
}

/* A playable ROM instead of a still: play.html in an iframe, pinned to the
   GBA's 3:2 so the picture is never stretched. No zoom transition here —
   resizing the canvas while the core is booting looks broken. */
.play-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.lightbox iframe.play {
  border: 0;
  background: #000;
  aspect-ratio: 3 / 2;
  /* Fit the 3:2 frame inside the padded overlay: as wide as it can be, but
     never wider than the leftover height allows, minus the control legend
     stacked underneath. `height: 100%` would win over aspect-ratio and
     letterbox the game inside its own iframe.

     Both terms are viewport-relative on purpose. A `100%` here would resolve
     against .play-stage, whose own width is shrink-to-fit around this iframe —
     circular, and the browser settles it at a fraction of the real size. */
  width: min(calc(100vw - 8vmin), calc((100vh - 8vmin - 3.2em) * 1.5));
  box-shadow: 0 2px 40px rgba(0, 0, 0, .6);
}

/* the key mapping, spelled out under the game — it's otherwise buried in
   EmulatorJS's own menu bar, which you have to know to hover for */
.play-controls {
  margin: .9em 0 0;
  color: #d4d4d4;
  font-size: .95em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* --- playable teasers ---
   A ROM teaser gets a pointer rather than the zoom-in magnifier, and explains
   itself on hover: "click to play" plus the key mapping, which is otherwise
   buried in EmulatorJS's own menu. */
div.teaser [data-rom],
.hero[data-rom] {
  cursor: pointer;
}

.playable {
  position: relative;
  display: inline-block;
  line-height: 0;          /* no descender gap under the image */
  max-width: 100%;
}
.playable-hero {
  display: block;
  max-width: 32em;
  margin: 1.5em 0;
}
.playable-hero .hero {
  margin: 0;               /* the wrapper carries the margin now */
}

.play-hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35em;
  /* dark enough to read against the title art, which is busy and mid-toned */
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .95em;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;    /* the click still belongs to the image underneath */
}
.play-keys {
  font-size: .85em;
  color: #dcdcdc;
}

/* Only on machines with a real pointer. On a touch screen there is no hover
   state to reveal it, and it would just sit on top of the art forever. */
@media (hover: hover) {
  .playable:hover .play-hint,
  .playable:focus-within .play-hint {
    opacity: 1;
  }
}

.lightbox-close {
  position: absolute;
  top: .35em;
  right: .55em;
  padding: 0 .25em;
  border: 0;
  background: none;
  color: #fff;
  font: 2.2em/1.3 Helvetica;
  cursor: pointer;
  opacity: .7;
  /* keeps it legible if a pale image sits right underneath */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.lightbox-close:hover,
.lightbox-close:focus {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox img,
  .lightbox video {
    transition: none;
  }
}

/* Breathing room between rows (his entries are taller, so they don't
   need it). */
td.metadata, td.teaser {
  padding-bottom: 2em;
}

/* --- sections ---
   Always expanded. A hairline above each one is the whole delineation scheme. */
.section {
  border-top: 1px solid #e0e0e0;
}
.section:last-of-type {
  border-bottom: 1px solid #e0e0e0;
}

.section h2 {
  margin: 0;
  padding: .8em .25em .6em;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5;
}

/* entries sit slightly inset from the section heading */
.section table {
  padding-left: 1.2em;
  padding-bottom: .5em;
}

/* a row can use a bullet list as its description — base.css puts 1em between
   list items, which is far too airy inside a compact row */
td.metadata ul {
  margin: .2em 0 .3em;
  padding-left: 1.4em;
}
td.metadata li {
  margin: .1em 0;
}

/* --- entry detail pages --- */

/* attribution under a hero photo — small and gray, out of the way, but the
   CC BY images on this site aren't licensed without it */
p.credit {
  margin: -.9em 0 1.5em;
  font-size: .9em;
  color: #969696;
}

.hero {
  display: block;
  max-width: 32em;
  width: 100%;
  margin: 1.5em 0;
}

/* --- narrow screens: stack the metadata/teaser cells --- */
@media (max-width: 40em) {
  body { padding: 1.25em; }
  td.metadata, td.teaser {
    display: block;
    width: 100%;
    padding-left: 0;
    direction: ltr;
  }
  td.teaser { margin-bottom: 1.5em; }
}