/* ═══════════════════════════════════════════════════════════════════
   theme: pomoplayer
   8-bit, because the thing itself is a 320x240 pixel display on an ESP32
   with a sand-through-an-hourglass timer. NES-ish night palette: indigo
   ground, tomato for work, mint for break, coin gold for emphasis.
   Everything is hard-edged. No radii, no blur, no gradients that fade.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;500;700&display=swap');

:root {
  --night:  #14121F;
  --night2: #1E1B2E;
  --slab:   #2A2640;
  --edge:   #07060D;
  --text:   #F2F0E6;
  --text-2: #A9A4C4;
  /* Set against the night once the games behind the page have lifted it, not
     against bare night. This was already under AA before the arcade went in,
     at 3.62:1, and it carries real body text: field lists, file sizes, the
     footer. It doubles as the status chip background, where --edge sits on
     it at 5.52:1. The arcade costs at most 7/255 inside the column. */
  --text-3: #8B85AF;   /* 4.68:1 on the measured ground, wash included */
  --work:   #E8453C;   /* tomato: the session is running */
  --break:  #5BD98A;   /* mint: the session is not */
  --coin:   #F7D51D;
  --px: 4px;
  --pad: clamp(1.2rem, 5vw, 2.6rem);
  --max: 58rem;
  --disp: "Press Start 2P", monospace;
  --body: "Pixelify Sans", "Courier New", monospace;
}

body {
  background: var(--night);
  color: var(--text);
  font: 400 clamp(1.06rem, .4vw + 1rem, 1.2rem)/1.62 var(--body);
  image-rendering: pixelated;
  /* a dither field rather than a gradient: 8-bit hardware had no blends */
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,.014) 0% 25%, transparent 0% 50%);
  background-size: 6px 6px;
}
/* scanlines, coarse to match the pixel grid. Sits above everything, the
   cabinets included, so the whole page is behind one piece of glass. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 2px, transparent 2px 4px);
}
/* the light off the two screens, spilling into the room */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(44% 38% at 0% 50%,   rgba(91,217,138,.055), transparent 70%),
    radial-gradient(44% 38% at 100% 50%, rgba(232,69,60,.050), transparent 70%);
}
.band, .pr, .pr__foot { position: relative; z-index: 1; }

/* ── the arcade ─────────────────────────────────────────────────────
   Two games from themes/pomoplayer.backdrop.html, each looping on a 128x160
   canvas scaled up with nearest-neighbour, so the pixels you see are the
   pixels the games draw rather than a filter over something smooth.

   They are background, not furniture: large, faded, bleeding off the edges.
   The first cut framed them as two small cabinets pinned to the margins at a
   capped 264px, which on a wide display left a 540px gap beside each one and
   read as two postage stamps in the corners. Sizing off the viewport instead
   means they grow with the window rather than sitting in it. */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.arcade {
  position: absolute; inset: 0;
  opacity: .13;
  /* hold the games back further behind the reading column. In rem, because
     the column is a fixed 58rem centred, and percentage stops would only
     line up at one window width. */
  mask-image: var(--arcade-mask);
  -webkit-mask-image: var(--arcade-mask);
}
:root {
  --arcade-mask: linear-gradient(90deg,
    #000 0,
    #000 calc(50% - 33rem),
    rgba(0,0,0,.22) calc(50% - 28rem),
    rgba(0,0,0,.22) calc(50% + 28rem),
    #000 calc(50% + 33rem),
    #000 100%);
}

.cab {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: min(44vw, 56rem);
}
.cab--l { left: 0; }
.cab--r { right: 0; }

.cab__screen { position: relative; }
.cab__screen canvas {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
}
/* the glass: scanlines at the scale of the enlarged pixels, plus the corner
   falloff that makes a tube read as curved rather than flat */
.cab__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 2px, transparent 2px 6px),
    radial-gradient(132% 132% at 50% 50%, transparent 46%, rgba(0,0,0,.70) 100%);
}

/* signage, sized off the viewport so it stays in proportion to the screen */
.cab__marquee {
  font: 400 clamp(.5rem, 1vw, 1.05rem)/1 var(--disp);
  text-align: center; padding: .8em .4em .9em;
  color: var(--coin); letter-spacing: .12em;
}
.cab--r .cab__marquee { color: var(--break); }

/* below this the column takes the full width; the games would be entirely
   behind text, so there is nothing to gain by running them */
@media (max-width: 859px) { .arcade { display: none; } }

a { color: var(--coin); }
::selection { background: var(--work); color: var(--text); }
:focus-visible { outline: var(--px) solid var(--coin); outline-offset: 2px; }

/* the classic dialog box: hard outline, lit top edge, shadowed bottom */
.box {
  background: var(--night2);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge),
    calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge),
    inset 0 var(--px) 0 0 rgba(255,255,255,.10),
    inset 0 calc(var(--px) * -1) 0 0 rgba(0,0,0,.45);
}

/* band */
.band {
  background: var(--slab);
  border-bottom: var(--px) solid var(--edge);
  font: 400 .62rem/1.6 var(--disp);
}
.band a { color: var(--text-2); text-decoration: none; }
.band a:hover { color: var(--coin); }
.band__home { color: var(--coin) !important; text-shadow: 2px 2px 0 var(--edge); }

/* head */
.pr__name {
  font: 400 clamp(1.3rem, 3.6vw, 2.2rem)/1.35 var(--disp);
  color: var(--work);
  text-shadow: var(--px) var(--px) 0 var(--edge);
  letter-spacing: 0;
}
.pr__sum { color: var(--text-2); font-size: 1.04em; }
.pr__meta {
  border-top: var(--px) solid var(--slab);
  font: 400 .58rem/1.8 var(--disp);
}
.pr__fields { color: var(--text-3); }
.pr__links a { font: 400 .58rem/1.8 var(--disp); text-decoration: none; }

.pr > section { border-top: var(--px) solid var(--slab); }
.pr > section > h2 {
  font: 400 .72rem/1.6 var(--disp);
  color: var(--coin); text-shadow: 2px 2px 0 var(--edge);
  letter-spacing: 0;
}
.pr > section > h2::before { content: "\25BA  "; color: var(--work); }

/* status: a HUD badge, not a dot */
.st {
  font: 400 .56rem/1 var(--disp);
  padding: .45rem .55rem; color: var(--edge); background: var(--text-3);
}
.st::before { display: none; }
.st--run { background: var(--break); }
.st--bench { background: var(--coin); }
.st--dead { background: var(--text-3); }

/* figures: HUD counters, one box per digit */
.figs b i {
  display: grid; place-items: center;
  min-width: 1.9rem; padding: .5rem .3rem;
  font: 400 1.15rem/1 var(--disp);
  color: var(--coin); background: var(--edge);
  box-shadow: inset 0 0 0 2px var(--slab), 0 3px 0 0 var(--slab);
}
.figs li span {
  font: 400 .52rem/1.7 var(--disp); color: var(--text-3);
}

/* reference */
.pr__ref p, .pr__ref li { color: var(--text-2); }
.pr__ref h4 {
  font: 400 .62rem/1.7 var(--disp); color: var(--text);
  text-shadow: 2px 2px 0 var(--edge);
}
.tbl table { font-size: .95em; }
.tbl th {
  font: 400 .54rem/1.7 var(--disp); color: var(--coin);
  background: var(--slab); border-bottom: var(--px) solid var(--edge);
}
.tbl td { border-bottom: 2px solid var(--slab); color: var(--text-2); }
.tbl tr:hover td { background: var(--night2); }

/* files: inventory slots */
.dl li {
  margin-bottom: .8rem; padding: .9rem 1rem;
  background: var(--night2);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge),
    calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge),
    inset 0 var(--px) 0 0 rgba(255,255,255,.08);
}
.dl a { text-decoration: none; }
.dl__label { font: 400 .6rem/1.6 var(--disp); color: var(--coin); }
.dl__size { font: 400 .52rem/1 var(--disp); color: var(--text-3); }
.dl__desc { color: var(--text-3); font-size: .95em; }

/* log: each entry is a level, the date is its plate */
.ent { border-bottom: 2px dashed var(--slab); }
.ent__when time {
  display: inline-block; padding: .5rem .55rem;
  font: 400 .56rem/1.4 var(--disp);
  color: var(--edge); background: var(--work);
  box-shadow: 3px 3px 0 0 var(--edge);
}
.ent__body h3 {
  font: 400 .82rem/1.7 var(--disp); color: var(--text);
  text-shadow: 2px 2px 0 var(--edge); letter-spacing: 0;
}
.ent__body h3 a { color: inherit; }
.ent__body h3 a:hover { color: var(--coin); }
.ent__body p, .ent__body li { color: var(--text-2); }
.ent__body strong { color: var(--coin); font-weight: 700; }
.ent__body li::marker { content: "\25AA  "; color: var(--work); }
.ent__body h4 { font: 400 .6rem/1.7 var(--disp); color: var(--text); }
code {
  font: 400 .92em/1.4 var(--body); font-weight: 700;
  color: var(--break); background: var(--edge); padding: .1em .35em;
  box-shadow: inset 0 0 0 2px var(--slab);
}
pre {
  background: var(--edge);
  box-shadow: inset 0 0 0 2px var(--slab), 0 var(--px) 0 0 var(--slab);
}
pre code { box-shadow: none; background: none; padding: 0; font-size: .95rem; }
.pr__empty { color: var(--text-3); font: 400 .6rem/1.8 var(--disp); }

/* index */
.all a { color: var(--text); }
.all li { border-bottom: 2px solid var(--slab); }
.all a:hover { background: var(--night2); }
.all__name { font: 400 .62rem/1.7 var(--disp); }
.all__fields, .all__notes, .all__when { font-size: .9em; color: var(--text-3); }

.pr__foot {
  border-top: var(--px) solid var(--slab);
  font: 400 .56rem/1.9 var(--disp); color: var(--text-3);
}
.pr__foot a { color: var(--text-2); text-decoration: none; }
.pr__foot a:hover { color: var(--coin); }

/* ── screens ────────────────────────────────────────────────────────
   Device captures and face designs, framed like a bezel. Pixel art must
   not be smoothed, so nearest-neighbour scaling is forced. */
.gal img {
  image-rendering: pixelated;
  background: var(--edge);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge),
    calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge),
    inset 0 0 0 2px var(--slab);
}
.gal figcaption {
  font: 400 .52rem/1.7 var(--disp); letter-spacing: .04em;
  color: var(--text-3);
}
.figs b em {
  font-style: normal; align-self: flex-end;
  font: 400 1rem/2.2 var(--disp); color: var(--coin);
}