/* The device, as a stylesheet rather than a <style> block inside one page.
 *
 * ⚠️ EVERY RULE IS UNDER .toy, AND HAS TO STAY THERE. This loads on the
 * vandev.fun home page alongside the other tools, which already own .brand,
 * .top, .row, .cap, .go and .close — an unscoped `.brand{}` in here would
 * restyle the site's masthead the moment somebody opened the van, and the
 * original `:root{}` would have pushed --ink, --btn and two font stacks into a
 * document that has its own. The names were chosen for a page where the van was
 * the only thing on it; the scope is what lets them survive the move.
 */
/* ⚠️ ONE OBJECT, ONE SCREEN.
     The previous version had three visual languages fighting: a two-tone LCD
     van, pasted into a photographic sodium-lit lot, wrapped in web-app chrome.
     A Tamagotchi is a thing you hold — a moulded shell, a small LCD, and
     buttons. EVERYTHING the game says lives inside that screen, in one colour.
     Nothing outside the shell is decorated at all. */
  .toy{
    --room:#0b0906;
    /* ⚠️ NOT AN ORANGE EGG. Orange was the site's lamp accent borrowed for a
       plastic body, which is not a reason, and a cute rounded egg fights a
       project where nothing else is cute. The right object for a van game is
       the thing you actually diagnose a van with: a handheld code reader.
       Charcoal ABS, a rubber overmould, a green LCD and hard buttons. Sober,
       tool-like, and it belongs on that dashboard. */
    --shell:#33312d; --shell-hi:#4a4741; --shell-lo:#1b1a17;
    --grip:#232120;
    --bezel:#141312;
    --lcd:#8a9a5b; --lcd-lo:#7d8d51; --ink:#18210b; --ink-dim:#5e6b3c;
    --btn:#e8e2d4; --btn-lo:#a9a294;
    --f-mono:"Courier New",Courier,ui-monospace,monospace;
    --f-display:"Arial Black","Archivo Black",Impact,sans-serif;
  }
  .toy, .toy *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  .toy, .toy{margin:0;min-height:100%}
  /* ⚠️ THIS WAS THE PAGE'S `body{}` RULE AND IT DOES NOT BELONG TO THE DEVICE.
     Scoping everything under .toy turned the ROOM into the object: the device
     became a flex container a full viewport tall, with a black background and a
     1rem pad. On its own page that passed for correct; dropped into a tool
     panel it made .shell a flex item that shrank to its content, so the menu
     buttons came out 69px wide and every value column was ragged. A mountable
     thing may style ITSELF and nothing around it — the room now lives in
     van/index.html, which is the only place that owns a page. */
  .toy{color:var(--lcd);font-family:var(--f-mono)}

  /* ── the toy ─────────────────────────────────────────────────────────────
     ⚠️ This was a flat orange blob with an amorphous border-radius and no
     evidence of ever having been manufactured. A moulded object has: an egg
     silhouette with a flat base, a parting line where the two halves meet,
     gloss where the light hits injection-moulded plastic, screws, a dished
     recess for the buttons, and a keyring loop. All of that is cheap in CSS
     and it is the difference between a shape and a thing. */
  /* ⚠️ margin-inline:auto because the device no longer owns its container. On
     /van a grid centred it; inside a tool panel it is one block in a column
     twice its width and sat hard against the left edge. */
  .toy{width:min(22rem,94vw);position:relative;padding-top:1.35rem;margin-inline:auto}

  /* the keyring loop, moulded into the top of the shell */
  /* the cable that plugs into the van, instead of a keychain loop */
  .toy::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:0.5rem;height:1.5rem;border-radius:0.25rem 0.25rem 0 0;
    background:linear-gradient(90deg,#151412,#2c2a26 40%,#151412);
  }

  .toy .shell{
    position:relative;
    /* ⚠️ A TRUE EGG CURVES IN WHERE THE SCREEN NEEDS TO BE. At 44%/56% vertical
       the sides pinched and the bezel hung out over the plastic on both edges.
       Domed top, gently rounded base, and STRAIGHT SIDES through the middle
       third — which is also what a real one does, for exactly this reason. */
    /* ⚠️ THE PLASTIC HAS TO BE WIDER THAN A SLIVER. The screen was ~85% of the
       body width, so the bezel looked like it was bursting out of the shell.
       On a real handheld the screen is closer to half, and the frame around it
       is what makes it read as an object rather than a monitor. */
    /* an instrument, not an egg: squared with eased corners */
    border-radius:1.6rem 1.6rem 1.1rem 1.1rem;
    padding:1.35rem 1.5rem 1.35rem;
    background:
      /* rubber grips down both flanks, moulded over the hard shell */
      linear-gradient(90deg, var(--grip) 0 5%, transparent 5% 95%, var(--grip) 95%),
      /* a soft sheen rather than a gloss — this is matte ABS, not a toy */
      radial-gradient(70% 40% at 30% 8%, rgba(255,255,255,0.10), transparent 66%),
      linear-gradient(172deg, var(--shell-hi) 2%, var(--shell) 44%, var(--shell-lo) 98%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -8px 18px rgba(0,0,0,0.45),
      0 22px 40px rgba(0,0,0,0.66),
      0 3px 0 rgba(0,0,0,0.6);
  }
  /* the parting line where the two mouldings meet */
  .toy .shell::before{
    content:"";position:absolute;inset:0.5rem;border-radius:inherit;pointer-events:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.5);
  }
  /* two screws, because somebody built this in a factory */
  .toy .shell::after{
    content:"";position:absolute;left:0;right:0;bottom:0.5rem;height:0.3rem;pointer-events:none;
    background:
      radial-gradient(circle at 18% 50%, rgba(0,0,0,0.6) 0 0.15rem, transparent 0.16rem),
      radial-gradient(circle at 82% 50%, rgba(0,0,0,0.6) 0 0.15rem, transparent 0.16rem);
  }

  .toy .brand{
    text-align:center;font-size:0.4688rem;letter-spacing:0.34em;text-transform:uppercase;
    color:#c9791c;margin:0 0 0.6rem;opacity:0.85;cursor:default;
  }

  /* the screen: everything the game says happens in here */
  /* the screen is SET INTO the shell, so it needs a lip above and shadow below */
  .toy .bezel{
    background:linear-gradient(180deg,#1d150d,#33261a);
    border-radius:9px;padding:0.55rem;
    box-shadow:
      inset 0 3px 7px rgba(0,0,0,0.75),
      inset 0 -1px 0 rgba(255,255,255,0.10),
      0 1px 0 rgba(255,255,255,0.30);
  }
  .toy .lcd{background:var(--lcd);border-radius:3px;padding:0.45rem 0.5rem 0.5rem;
    display:flex;flex-direction:column;gap:0.3rem;
    box-shadow:inset 0 0 16px rgba(24,33,11,0.28)}
  .toy .lcd .top{display:flex;justify-content:space-between;gap:0.3rem;font-size:0.5625rem;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);opacity:0.75}
  .toy .lcd .top #cash{opacity:1;font-weight:bold}
  .toy canvas{width:100%;height:auto;image-rendering:pixelated;display:block}

  /* the six systems, as LCD segments — dark when lit, ghosted when not */
  .toy .dash{display:flex;justify-content:space-between;gap:0.2rem}
  /* ⚠️ 0.16 WAS TOO FAINT TO READ AT ALL. An unlit segment should look unlit, but
     on a real LCD the legend is printed on the glass and you can always see
     which gauge is which — at 0.16 you could not, so the six bars were unlabelled
     until one of them went into warning. 0.32 still sits clearly below warn
     (0.62) and bad (1), so the three states stay distinct. */
  .toy .seg{flex:1;text-align:center;font-size:0.5rem;letter-spacing:0.06em;
    color:var(--ink);opacity:0.32;line-height:1.5}
  .toy .seg .bar{display:block;height:0.34rem;background:var(--ink);margin-bottom:0.14rem;border-radius:1px}
  .toy .seg.warn{opacity:0.62}
  .toy .seg.bad{opacity:1;animation:blip 1.1s steps(1) infinite}
  @keyframes blip{0%,60%{opacity:1}61%,100%{opacity:0.2}}

  .toy .says{font-size:0.625rem;line-height:1.45;color:var(--ink);min-height:2.2em;
    border-top:1px solid rgba(24,33,11,0.28);padding-top:0.3rem}

  /* physical buttons */
  /* a dished recess, the way buttons are actually seated */
  .toy .keys{
    display:flex;justify-content:center;gap:1.1rem;margin-top:1.05rem;
    padding:0.5rem 0.8rem;border-radius:0.7rem;
    background:linear-gradient(180deg, rgba(0,0,0,0.34), rgba(255,255,255,0.05));
    box-shadow:inset 0 2px 5px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.10);
  }
  .toy .key{
    width:2.6rem;height:2.6rem;border-radius:50%;border:0;cursor:pointer;
    background:linear-gradient(170deg,#514d46 4%,#35322d 96%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 -2px 4px rgba(0,0,0,0.5),
      0 3px 0 rgba(0,0,0,0.62),
      0 5px 9px rgba(0,0,0,0.45);
    font-family:var(--f-mono);font-size:0.4688rem;letter-spacing:0.14em;text-transform:uppercase;
    color:#cfc6b4;display:flex;align-items:center;justify-content:center}
  .toy .key:active{transform:translateY(2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 3px rgba(0,0,0,0.5),
               0 1px 0 rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.4)}
  .toy .key[disabled]{opacity:0.45;cursor:default}
  .toy .key:focus-visible{outline:2px solid #2a1f14;outline-offset:3px}

  /* the gate and the menu render INSIDE the screen — nothing floats over the toy */
  .toy .over{position:absolute;inset:0;background:var(--lcd);border-radius:3px;
    display:flex;flex-direction:column;justify-content:center;gap:0.4rem;
    padding:0.7rem;color:var(--ink);text-align:center}
  .toy .over h1{font-family:var(--f-display);font-size:0.8125rem;line-height:1.1;margin:0;
    text-transform:uppercase;letter-spacing:-0.01em}
  .toy .over p{margin:0;font-size:0.5rem;line-height:1.5}
  .toy .over .go{margin-top:0.2rem;border:1px solid var(--ink);background:transparent;color:var(--ink);
    font-family:var(--f-mono);font-size:0.5rem;letter-spacing:0.14em;text-transform:uppercase;
    padding:0.42rem;border-radius:2px;cursor:pointer}
  .toy .over .go[disabled]{opacity:0.5}
  .toy .over .err{color:#5a2410;font-size:0.4688rem;line-height:1.4}
  .toy .lcd{position:relative}

  /* ⚠️ NO NATIVE SCROLLBAR IN A FAKE LCD. Every one of these menus is taller than
     the screen, and `overflow:auto` put a real OS scrollbar inside the panel.
     It took its width out of the content, so rows narrowed by however many
     pixels this platform's scrollbar happens to be — and because the three
     menus overflow by different amounts, the right-hand column jumped sideways
     every time you moved between them. That is the "slippery" feeling. The list
     still scrolls; it just no longer changes width to do it. */
  .toy .menu{position:absolute;inset:0;background:var(--lcd);border-radius:3px;
    padding:0.45rem 0.5rem;overflow-y:auto;overflow-x:hidden;color:var(--ink);
    scrollbar-width:none;-ms-overflow-style:none}
  .toy .menu::-webkit-scrollbar{width:0;height:0;display:none}
  /* Sticks to the bottom of the list while it scrolls, so "there is more" is
     visible without a scrollbar to say it. */
  .toy .menu .more{position:sticky;bottom:-0.45rem;margin:0 -0.5rem -0.45rem;
    padding:0.25rem 0 0.3rem;text-align:center;font-family:var(--f-mono);
    font-size:0.5rem;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--ink);pointer-events:none;
    background:linear-gradient(to bottom,rgba(138,154,91,0),var(--lcd) 55%)}
  .toy .menu .cap{font-size:0.5rem;letter-spacing:0.2em;text-transform:uppercase;opacity:0.75;margin:0 0 0.3rem}
  /* A row can carry a second line saying what is actually there — power, water,
     signal, when it shuts. Without it the move list is seven place names and no
     way to choose between them. */
  /* ⚠️ THE NOTE IS THE ANSWER, SO IT CANNOT BE THE FAINTEST THING ON SCREEN.
     It was 7px at 0.6 opacity inside a button already dimmed to 0.35 — opacity
     multiplies, so the line explaining WHY a job is unavailable rendered at an
     effective 0.21 on rows that were almost all unavailable. */
  .toy .menu button i{display:block;font-style:normal;font-size:0.5625rem;opacity:0.85;
    margin-top:0.1rem;line-height:1.4}
  /* ⚠️ ONE SHAPE FOR EVERY ROW. There used to be a `.two` variant for rows that
     carried a second line and a plain flex button for those that did not, so
     the two kinds laid out differently and the value column did not line up
     down the list. Worse, the rows WITHOUT a note were the jobs you could
     actually do — so the column broke exactly on the rows that mattered. */
  .toy .menu button > span{display:flex;justify-content:space-between;
    align-items:baseline;gap:0.5rem;width:100%}
  .toy .menu button > span > b{flex:none;white-space:nowrap}
  .toy .menu button{display:block;width:100%;background:transparent;border:0;
    border-bottom:1px solid rgba(24,33,11,0.22);padding:0.45rem 0.1rem;font-family:var(--f-mono);
    font-size:0.625rem;color:var(--ink);cursor:pointer;text-align:left}
    /* ⚠️ DIM THE LABEL, NEVER THE WHOLE ROW. Opacity on the button multiplied
     down onto its own explanation. A greyed-out control still has to say why. */
  .toy .menu button[disabled]{opacity:1;cursor:default}
  .toy .menu button[disabled] > span{opacity:0.5}
  .toy .menu button.row{cursor:default}
  /* a purchase looks like a purchase, not like another row of the record */
  .toy .menu button.buy{border:1px solid var(--ink);border-radius:2px;margin-top:0.35rem;
    padding:0.5rem 0.4rem;font-weight:bold}
  .toy .menu button.buy b{font-weight:normal;opacity:0.8}
  .toy .menu button.row b{font-weight:bold}
  .toy .menu button:last-child{border-bottom:0;text-align:center;opacity:0.7}

  .toy [hidden]{display:none!important}
  @media(prefers-reduced-motion:reduce){.toy, .toy *{animation:none!important}}