/* Mobilfabriken: en canvas i spelpixlar (384×216) förstorad i hela steg på dator och så stor det går på
   pekskärmar, mot mörk bakgrund.
   3D-telefonen (#gl) och textfältet (#falt) läggs ovanpå i samma koordinater. */
@font-face { font-family: 'Pixelstad'; src: url(../fonts/pixelstad.otf) format('opentype'); font-display: block; }
@font-face { font-family: 'Pixelstad Fet'; src: url(../fonts/pixelstad-fet.otf) format('opentype'); font-display: block; }
:root { --bg: #070912; --fg: #f1ebe0; --guld: #ffd23f; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
body { display: flex; align-items: center; justify-content: center; font-family: 'Pixelstad', monospace; }
#spel { position: relative; line-height: 0; }
#c { display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: default; }
#gl { position: absolute; display: none; pointer-events: none; }
#falt { position: absolute; display: none; font: 400 24px 'Pixelstad', monospace; text-transform: uppercase; color: var(--fg);
  background: #070912; border: 3px solid #6aa6ff; outline: none; padding: 0 8px; line-height: 1; letter-spacing: 1px; border-radius: 0; }
#hemskarm { position: fixed; z-index: 5; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 8px 12px; font: 400 16px/1.25 'Pixelstad', monospace; color: var(--fg); text-align: center;
  background: rgba(11, 14, 28, 0.94); border: 2px solid var(--guld); cursor: pointer; }
/* Pixelstad Fet har ett gement m som blir en kloss i små storlekar – feta ord skrivs med versaler */
#hemskarm b { font-family: 'Pixelstad Fet', 'Pixelstad', monospace; font-weight: 400; color: var(--guld); text-transform: uppercase; }
#hemskarm.dold { display: none; }
#vand { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: var(--bg); text-align: center; padding: 24px; }
#vand.dold { display: none; }
#vand b { font: 400 24px 'Pixelstad Fet', monospace; color: var(--guld); text-transform: uppercase; }
#vand p { font-size: 16px; line-height: 1.4; }
#vand button { font: 400 16px 'Pixelstad', monospace; background: #1b2340; color: var(--fg); border: 2px solid #2f3a62; padding: 8px 12px; }