/* Layout for the emulated ZX Spectrum screen. */
:root { --bg: #111; --key-bg: #0000d7; --key-fg: #fff; --key-hot: #00d7d7; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; overflow: hidden; }
canvas#zx { image-rendering: pixelated; image-rendering: crisp-edges; display: block; touch-action: manipulation; cursor: pointer; max-width: 100%; }
#controls { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#keypad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; max-width: 640px; }
#keypad button { font: bold 16px/1 "Courier New", monospace; min-width: 44px; min-height: 44px; padding: 0 12px; color: var(--key-fg); background: var(--key-bg); border: 0; touch-action: manipulation; }
#keypad button:active, #keypad button:hover { background: var(--key-hot); color: #000; }
#sound { font: 12px/1 "Courier New", monospace; color: #aaa; background: none; border: 1px solid #444; padding: 6px 10px; min-width: 44px; min-height: 44px; cursor: pointer; }
#sound:hover, #sound:focus-visible { color: #fff; border-color: #888; }
/* The site's footer links, the same on every icelander.net page, always under the game. */
.site-links { color: #777; font: 13px/1.7 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; }
.site-links a { color: #bbb; text-underline-offset: .15em; }
.site-links a:hover, .site-links a:focus-visible { color: #fff; }
/* Phones on their side: controls in a column beside the screen, keypad two keys wide. */
@media (orientation: landscape) and (max-height: 520px) {
  body { flex-direction: row; gap: 16px; padding: 12px; }
  #keypad { display: grid; grid-template-columns: repeat(2, minmax(56px, auto)); max-width: 160px; }
}
.noscript { color: #fff; font: 16px "Courier New", monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Mouse-and-keyboard devices use the real keys: no touch keypad (last, so it wins). */
@media (hover: hover) and (pointer: fine) { #keypad { display: none; } }