/* Open Font License pixel fonts, bundled in fonts/ */
  @font-face { font-family: "Press Start 2P"; font-display: swap;
               src: url("fonts/press-start-2p.woff2") format("woff2"); }
  @font-face { font-family: "VT323"; font-display: swap;
               src: url("fonts/vt323.woff2") format("woff2"); }
  /* Four-shade handheld LCD palette */
  :root {
    --lcd-0: #e0f0c8;   /* lightest: screen */
    --lcd-1: #a8c878;   /* light */
    --lcd-2: #5f8a48;   /* dark */
    --lcd-3: #1f3a24;   /* darkest: ink */
    --bezel: #c9c6bd;
    --bezel-ink: #8c8a84;
    --pixel: "Press Start 2P", ui-monospace, monospace;
    --term: "VT323", ui-monospace, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --lcd-0: #1c2a1e; --lcd-1: #2f4a30; --lcd-2: #7fa860; --lcd-3: #d4ecb4;
      --bezel: #2a2a2e; --bezel-ink: #55555c;
    }
  }
  * { box-sizing: border-box; }
  html { background: var(--bezel); }
  body { margin: 0; color: var(--lcd-3); font: 22px/1.15 var(--term); -webkit-font-smoothing: none; }

  /* The "console": a bezel around a green screen */
  .console { max-width: 1000px; margin: 20px auto 40px; padding: 0 12px; }
  .bezel { background: var(--bezel); border: 4px solid var(--bezel-ink); border-radius: 14px 14px 48px 14px;
           padding: 22px 22px 30px; box-shadow: 0 6px 0 var(--bezel-ink); }
  .bezel-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 4px;
                 font: 8px var(--pixel); color: var(--bezel-ink); letter-spacing: .1em; }
  .led { width: 10px; height: 10px; border-radius: 50%; background: #d33; box-shadow: 0 0 6px #f55; }
  .screen { position: relative; background: var(--lcd-0); border: 4px solid var(--lcd-3);
            padding: 20px 18px 24px; overflow: hidden; }
  .screen > * { position: relative; z-index: 1; }  /* keep content (and card art) above the grid */
  /* faint LCD pixel grid */
  .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: linear-gradient(var(--lcd-1) 1px, transparent 1px),
                      linear-gradient(90deg, var(--lcd-1) 1px, transparent 1px);
    background-size: 3px 3px; }

  /* RPG-style text box: double pixel border */
  .box { position: relative; background: var(--lcd-0); border: 4px solid var(--lcd-3);
         box-shadow: inset 0 0 0 3px var(--lcd-0), inset 0 0 0 6px var(--lcd-3); padding: 16px 18px; }

  /* Title screen */
  .title { text-align: center; padding: 22px 12px 18px; }
  .title h1 { margin: 0; font: 28px/1.3 var(--pixel); letter-spacing: .04em;
              text-shadow: 3px 3px 0 var(--lcd-1); }
  .title .sub { margin: 10px 0 0; font: 10px/1.6 var(--pixel); color: var(--lcd-2); }
  .title .day { margin-top: 14px; font-size: 24px; }
  .blink { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

  /* Menu (filters) */
  form { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
  .menu { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; max-width: 100%; }
  .menu select { min-width: 0; max-width: 100%; }
  .menu label { font: 8px var(--pixel); color: var(--lcd-2); }
  select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--lcd-3);
           font: 22px var(--term); padding: 0 18px 0 16px; cursor: pointer;
           background-image: linear-gradient(45deg, transparent 50%, var(--lcd-3) 50%),
                             linear-gradient(-45deg, transparent 50%, var(--lcd-3) 50%);
           background-size: 6px 6px; background-position: right 6px center, right 0 center; background-repeat: no-repeat; }
  .menu:focus-within::before { content: "\25B6"; position: absolute; left: 6px; font-size: 14px; }
  select:focus { outline: none; }

  /* Card list */
  .list { display: grid; gap: 14px; }
  .entry { display: grid; grid-template-columns: 70px 96px 1fr 220px; gap: 16px; align-items: center; }
  .no { font: 12px/1.6 var(--pixel); text-align: center; }
  .no span { display: block; font-size: 8px; color: var(--lcd-2); }
  /* Card art stays full color and full resolution: the one thing on screen that isn't 8-bit */
  .art { width: 96px; aspect-ratio: 5 / 7; border: 3px solid var(--lcd-3); background: var(--lcd-1);
         display: grid; place-items: center; overflow: hidden; padding: 0; cursor: zoom-in; }
  .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .art:focus-visible { outline: 3px dashed var(--lcd-3); outline-offset: 3px; }
  .art .noimg { font: 8px var(--pixel); color: var(--lcd-2); text-align: center; }
  .name { font: 12px/1.7 var(--pixel); }
  .name a { color: inherit; text-decoration: none; }
  .name a:hover, .name a:focus { text-decoration: underline; text-decoration-thickness: 2px; }
  .set { color: var(--lcd-2); margin-top: 4px; font-size: 20px; }
  .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .tag { border: 2px solid var(--lcd-3); padding: 0 6px; font-size: 18px; line-height: 1.2; }
  .stars { letter-spacing: 2px; font-size: 18px; }

  .stats { font-size: 20px; }
  .now { font: 16px/1.4 var(--pixel); }
  .drop { font: 9px/1.6 var(--pixel); margin: 4px 0 6px; }
  /* value bar: today's price as a share of the old low, like a health bar */
  .bar { display: flex; align-items: center; gap: 6px; font: 8px var(--pixel); }
  .bar .track { flex: 1; height: 10px; border: 2px solid var(--lcd-3); background: var(--lcd-0); padding: 1px; }
  .bar .fill { height: 100%; background: repeating-linear-gradient(90deg, var(--lcd-2) 0 6px, var(--lcd-3) 6px 8px); }
  .was { color: var(--lcd-2); font-size: 19px; line-height: 1.1; margin-top: 4px; }

  .empty { text-align: left; line-height: 1.3; }
  .empty code { font: inherit; background: var(--lcd-1); padding: 0 4px; }
  .cursor { position: absolute; right: 16px; bottom: 8px; font-size: 18px; }

  footer { margin-top: 20px; font: 8px/1.8 var(--pixel); color: var(--lcd-2); text-align: center; }

  @media (max-width: 760px) {
    .entry { grid-template-columns: 96px 1fr; }
    .no { grid-column: 1 / -1; text-align: left; }
    .no span { display: inline; margin-left: 6px; }
    .stats { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .console { padding: 0 6px; margin-top: 8px; }
    .bezel { padding: 12px 10px 20px; border-radius: 10px 10px 32px 10px; }
    .screen { padding: 12px 10px 16px; }
    .title h1 { font-size: 20px; }
    .title .day { font-size: 20px; }
    .name { font-size: 10px; }
    form .menu { flex: 1 1 100%; }
    .box { padding: 14px 12px; }
  }

  /* Large card view */
  dialog.zoom { border: 4px solid var(--lcd-3); background: var(--lcd-0); color: var(--lcd-3); padding: 14px;
                box-shadow: inset 0 0 0 3px var(--lcd-0), inset 0 0 0 6px var(--lcd-3); max-width: min(92vw, 520px); }
  dialog.zoom::backdrop { background: rgb(0 0 0 / .7); }
  dialog.zoom img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
  dialog.zoom .cap { margin-top: 10px; font: 10px/1.6 var(--pixel); }
  dialog.zoom button { margin-top: 10px; font: 10px var(--pixel); background: var(--lcd-0); color: var(--lcd-3);
                       border: 3px solid var(--lcd-3); padding: 8px 12px; cursor: pointer; }
  .loading { padding: 20px; }