/* =====================================================================
   🧮 Calculator App
   ===================================================================== */

#calculator { width: 250px; }
#calculator .content { padding: 15px; background: #f0f0f0; }

#calcDisplay {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px 0;
  padding: 10px 8px;
  font-size: 20px;
  text-align: right;
  border: 2px solid #999;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
}
#calculator .content > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#calculator button {
  padding: 12px 0;
  font-size: 22px;
  font-weight: bold;
  border: 2px solid #333;
  border-radius: 6px;
  background: #f8f8f8;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  transition: all 0.1s ease;
  font-family: "VT323", monospace;
}
#calculator button:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
#calculator button[onclick*="calculate"] { background: #4a90e2; color: white; border-color: #2a6fc9; }
#calculator button[onclick*="clearCalc"] { background: #ff6b6b; color: white; border-color: #e74c3c; }

/* Once he has handed the keys over, the display keeps a quiet mark of it. The
   only thing body.maker-access changes anywhere in the OS, and deliberately so:
   the state is a story fact rather than a mode with a UI. */
body.maker-access #calcDisplay {
  border-color: #2f7d32;
}

/* #calculator carries left: 60px and top: 180px from css/main.css, and a bare
   id rule cannot be outranked by anything in css/responsive.css, because media
   queries add no specificity. So this window has to be placed here by id or it
   is not placed at all.

   It was not, and that had the ending's own door behind the dock: at 320px the
   window ran from y=180 to y=565 with the dock's top edge at y=468, so the whole
   bottom row — AC, 0, the decimal point and `=` — was under it. elementFromPoint
   at the `=` key returned .dock and a real tap could not reach it. That is the
   one key the endgame needs: `%` is on the keypad specifically so a phone player
   can enter 25 % 1976 by hand, and then there was nothing to press.

   Centred rather than pinned left, because this is the one window narrow enough
   at 250px for 3% to look like a mistake. max() keeps it on screen if the
   viewport is ever narrower than the window itself. No transform is used to do
   the centring: makeDraggable() writes `left` directly, so a translate would
   offset the window from the pointer for the whole drag. */
@media (max-width: 600px) {
  #calculator {
    left: max(6px, calc(50vw - 125px));
    top: 50px;
  }
}