/* ═══════════════════════════════════════════════════════════
   Two designed layouts, not one that survives.

   Phone is not the desktop page with things hidden: it is laid out for a
   thumb and a narrow column, and the only thing it drops is decoration
   that would sit on top of the words.
   ═══════════════════════════════════════════════════════════ */

/* ── phone ───────────────────────────────────────────────── */
@media (max-width: 720px) {

  .hud { font-size: 6px; gap: 7px; padding: 8px 10px; }
  .hud__l { gap: 9px; }
  .hud__hp { font-size: 9px; }
  .ctl { min-width: 44px; min-height: 44px; padding: 0 5px; }  /* the project's own floor */
  .lang__opt, .ctl > span { padding: 5px 6px; }

  .world { padding: clamp(40px, 11vw, 64px) var(--gut); }
  .world--first { padding-top: 64px; }

  /* The cat walks a shorter path and is smaller, so she reads as a sprite
     passing over the page rather than as something blocking it. The halo is
     what keeps her legible when she crosses a paragraph. */
  .cat--rider { width: 40px; height: 24px; bottom: 5px; filter: drop-shadow(0 0 5px var(--deep)); }
  .cat--sheet { width: 46px; margin: -8px 0 0 10px; }

  /* Two layers of parallax, not five. More costs more than it gives here. */
  #world4 .terrain, #world5 .terrain, #world6 .terrain { display: none; }

  .inv__grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; }
  .inv__nm { font-size: 10.5px; }
  .inv__ico { width: 26px; height: 26px; }
  /* A tooltip that opens on hover has no hover here: tapping focuses the
     button, and the panel opens in flow instead of floating over the next row. */
  .inv__used { position: static; opacity: 1; visibility: visible;
               display: none; margin-top: 4px; border-top: 0; }
  .inv__item:focus-within .inv__used { display: block; }

  .kitgrps { grid-template-columns: 1fr; }
  .mines { grid-template-columns: 1fr 1fr; gap: 7px; }
  .ore-tile__n { font-size: 12px; }
  .ore-tile__d { font-size: 10.5px; }

  .seam { padding-left: 26px; padding-bottom: 20px; }
  .seam::before { width: 15px; height: 15px; }
  .strata::before { left: 5px; }
  .vein { padding: 8px 9px; }

  .bugbox { padding-right: clamp(66px, 22vw, 96px); }
  .cat--taunt { width: 62px; }

  .post { grid-template-columns: 1fr; }
  .twoup { grid-template-columns: 1fr; }

  /* On a phone, pixel type stays for chrome only. Anything carrying a FACT
     a recruiter reads — dates, statuses — switches to the body face at a
     size you can actually read. Press Start 2P at 6px is a texture, not a
     typeface, and a date is not a texture. */
  .seam__d {
    font: 700 11px/1.4 var(--f-body);
    letter-spacing: .07em; text-transform: uppercase;
  }
  .vein__d { font-size: 10.5px; }
  .stat dd i { font-size: 10.5px; }
  .ore-tile__s {
    font: 700 9.5px/1.3 var(--f-body);
    letter-spacing: .09em; padding: 5px 7px;
  }
  .post__l, .card__h { font: 700 10px/1.4 var(--f-body); letter-spacing: .11em; text-transform: uppercase; }
  .kit li { font-size: 10.5px; }
  .specs li { font-size: 11px; }
  .inv__nm { font-size: 11px; }
  .ore-tile__d { font-size: 11.5px; }
  .colophon__c { font: 700 10px/1.5 var(--f-body); letter-spacing: .06em; }
  .flow__l i { font-size: 10px; }

  /* These three are recruiter facts, so they do not get to be 6px. */
  .sheet__role, .sheet__open { font-size: 10px; }
  .stat dt {
    font: 700 9.5px/1.4 var(--f-body);
    letter-spacing: .1em; text-transform: uppercase;
  }
}

/* very narrow: one column of tiles reads better than two cramped ones */
@media (max-width: 420px) {
  .mines { grid-template-columns: 1fr; }
  .inv__grid { grid-template-columns: 1fr 1fr; }
}

/* ── laptop and up ───────────────────────────────────────── */
@media (min-width: 1024px) {
  .mines { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
  .inv__grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .seam { padding-left: 52px; }
  .seam::before { width: 21px; height: 21px; }
}

/* ── pointer-less devices never get a hover-only affordance ── */
@media (hover: none) {
  .inv__item:hover .inv__used { opacity: 0; visibility: hidden; }
  .inv__item:focus-within .inv__used { opacity: 1; visibility: visible; }
}

/* ── print: the page is not the artefact, the CV is ──
   Forcing a white background is only half the job: every descendant keeps
   its own light colour, and the whole Strata section printed cream on white
   at 1.07:1. Force the text too, and reach the descendants. */
@media print {
  .hud, .terrain, .rider, .cat, .bugbox { display: none !important; }

  html, body { background: #fff !important; }
  .world, .world * {
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }
  .world { padding: 12px 0; }
  .sheet, .chamber, .ore-tile, .card, .kitgrp, .post__c, .lastcall, .vein {
    box-shadow: none !important; break-inside: avoid;
    border-color: #000 !important;
  }
  /* keep the labels distinguishable without colour */
  .world__label, .sheet__role, .chamber__k, .ore-tile__s, .beat__l,
  .seam__d, .card__h, .post__l, .inv__ico {
    border: 1px solid #000 !important; font-weight: 700;
  }
  .ore-tile__img, .ore-block, .sealed { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; }
}