/* ============================================================================
   styles.css - the error page, and the two rules the canvas depends on
   ----------------------------------------------------------------------------
   1  image-rendering: pixelated on the canvas. Every sprite is a 1x pixel
      drawing scaled up; smoothing would turn it to mush.
   2  The dark-mode block has to come LAST, or the base rule wins (13.25).

   The trip colour filter is NOT here. It is set on the canvas element from
   trip.js, because it changes every frame - as a CSS filter on the element,
   never as ctx.filter per sprite (13.17: 61 fps against 23).
   ============================================================================ */

:root{
  --ink:#535353; --strong:#202020; --mute:#7a7a7a; --err:#a8a8a8;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#fff;color:var(--ink);transition:background-color .12s linear;
     font-family:var(--ui);cursor:pointer;
     display:flex;align-items:center;justify-content:center;
     -webkit-tap-highlight-color:transparent;overflow:hidden}

/* The error page has only one dino - the icon IS the playfield. A separate icon
   above the text would give you two. Canvas on top, text below, and the text stays
   put once the game starts: in Chrome the message does not disappear while you
   play. (specification 2) */
.page{width:100%;max-width:620px;padding:0 24px}
.notice{margin-top:22px}
h1{font-size:19px;font-weight:500;color:var(--strong);margin:0 0 10px;letter-spacing:-.1px}
.notice p{font-size:14px;line-height:1.55;margin:0;color:var(--mute);max-width:42ch}
.err{font-family:var(--mono);font-size:11.5px;color:var(--err);margin-top:14px;letter-spacing:.06em}

canvas{display:block;width:100%;image-rendering:pixelated;touch-action:none;cursor:pointer}

/* The transient line at the bottom - "Trip mode", "Airborne", "Crashed". */
.hint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
      font-family:var(--mono);font-size:11px;color:#b4b4b4;pointer-events:none;
      opacity:0;transition:opacity .4s}
body.running .hint{opacity:1}

/* Only ever rendered by the file:// guard in index.html. Deliberately unmissable:
   the failure it reports is otherwise completely silent.

   The body is a centred flex container with overflow:hidden, which is right for
   the game and wrong for a message that makes the page taller than the viewport -
   it clipped the first line off the top with no way to scroll to it. So when the
   guard fires, the page stops centring and starts scrolling. */
:root[data-ready="needs-server"] body{
  align-items:flex-start;justify-content:center;overflow:auto;padding:28px 0
}
.needs-server{
  border:1px solid #d93025;border-left-width:4px;border-radius:3px;
  background:#fff4f4;color:#5f2120;padding:12px 14px;margin:0 0 18px;
  font-size:13px;line-height:1.55;cursor:auto
}
.needs-server b{color:#c5221f}
.needs-server p{margin:8px 0 0}
.needs-server code{font-family:var(--mono);font-size:12px;background:#ffe9e9;
  border:1px solid #f3c9c9;border-radius:3px;padding:1px 5px}

@media (max-width:520px){ .page{padding:0 14px} h1{font-size:17px} }

/* Dark mode - MUST come last, or the base rule wins (13.25).
   The playfield itself is not styled here: it is left transparent and the whole
   canvas gets invert(1) from draw.js, exactly like Chrome's own night mode.
   Filling it white would turn into a black box on #202124 (13.22). */
@media (prefers-color-scheme: dark){
  :root{--ink:#c9c9c9; --strong:#e8e8e8; --mute:#9aa0a6; --err:#7a7a7a}
  body{background:#202124; color:#c9c9c9}
  .needs-server{background:#2d1b1b;border-color:#f28b82;color:#f6d0cd}
  .needs-server b{color:#f28b82}
  .needs-server code{background:#3a2020;border-color:#5c3030}
}