/* ===========================================================================
   EMI — "CASSETTE CORE" theme.
   One color (amber) on black. Apple-II minimalism, dressed as a live CRT:
   scanlines, a faint shadow-mask gap, and phosphor bloom on the text.
   Drives every screen: registration, wallet, ATM, bouncer, admin.

   Typeface: "Print Char 21" — the genuine Apple II character ROM, traced by
   Kreative Software (Relay Fonts Free Use License v1.2f — embedding permitted;
   see PrintChar21-LICENSE.txt). Uppercase-only, like the real Apple II.
   =========================================================================== */
@font-face{
  font-family:'Print Char 21';
  src:url('/assets/PrintChar21.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
:root{
  --amber:     #ffb000;   /* the one color            */
  --amber-dim: #9c6a00;   /* secondary text / borders */
  --black:     #000000;

  /* --- CRT tuning knobs (turn these to taste) --- */
  --scan-period: 3px;     /* height of one scanline + its gap         */
  --scan-dark:   0.22;    /* darkness of the gap (0 = off, 1 = black) */
  --mask-dark:   0.07;    /* vertical shadow-mask gap (subtler)       */
  --bloom:       0.85;    /* phosphor glow strength on text (0 = off) */
}

*{ box-sizing:border-box; }

/* Kiosk touch policy: keep normal scrolling, but NO pinch-zoom or
   double-tap-zoom on the Cintiq touchscreen. Allowing only pan-x/pan-y
   (i.e. dropping pinch from the gesture set) is what disables the zoom. */
html, body{ touch-action: pan-x pan-y; }

body{
  margin:0; background:var(--black); color:var(--amber);
  /* Print Char 21 lacks ₠ (U+20A0); the Noto fallbacks carry it so the currency
     mark renders on Android phones. Per-glyph fallback keeps letters/digits Apple II. */
  font-family:'Print Char 21', 'Courier New', ui-monospace, 'Noto Sans Symbols', 'Noto Sans', monospace;
  text-transform:uppercase;     /* original Apple II was uppercase-only */
  letter-spacing:1px;
  -webkit-text-size-adjust:100%;
  /* phosphor bloom: layered halos, near -> far, all scaled by --bloom */
  text-shadow:
    0 0 1px  rgba(255,176,0,var(--bloom)),
    0 0 5px  rgba(255,176,0,calc(var(--bloom) * 0.7)),
    0 0 14px rgba(255,176,0,calc(var(--bloom) * 0.4));
}

/* The CRT glass: a fixed overlay of horizontal scanlines + a fainter
   vertical shadow-mask gap. pointer-events:none so it never blocks taps. */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--scan-period) / 2),
      rgba(0,0,0,var(--scan-dark)) calc(var(--scan-period) / 2) var(--scan-period)),
    repeating-linear-gradient(to right,
      transparent 0 2px,
      rgba(0,0,0,var(--mask-dark)) 2px 3px);
}

body.screen, body.atm{
  display:flex; min-height:100vh; align-items:center; justify-content:center; padding:16px;
}

.card{
  width:100%; max-width:440px; background:var(--black);
  border:2px solid var(--amber); padding:22px;
}
.card.wide{ max-width:820px; }

h1{ font-size:22px; margin:0 0 16px; border-bottom:2px solid var(--amber); padding-bottom:8px; }
h2{ font-size:15px; margin:20px 0 8px; color:var(--amber-dim); }
p{ line-height:1.5; }

label{ display:block; margin:14px 0 4px; font-size:12px; color:var(--amber-dim); }

input, select{
  width:100%; padding:14px; font-size:18px; font-family:inherit;
  text-transform:uppercase; letter-spacing:1px;
  background:var(--black); color:var(--amber);
  border:1px solid var(--amber); border-radius:0;
}

button{
  margin-top:18px; width:100%; padding:15px; font-size:16px; letter-spacing:2px;
  font-family:inherit; text-transform:uppercase;
  background:var(--amber); color:var(--black);
  border:2px solid var(--amber); border-radius:0; cursor:pointer;
}
button:hover{ background:var(--black); color:var(--amber); }

.big{ font-size:44px; margin:10px 0; letter-spacing:1px; }
.muted{ color:var(--amber-dim); font-size:13px; }
.ok{ color:var(--amber); }                                   /* status by text, not by hue */
.err{ color:var(--amber); border:1px solid var(--amber); padding:8px; }

.list{ width:100%; border-collapse:collapse; font-size:13px; }
.list th, .list td{ border:1px solid var(--amber-dim); padding:6px 8px; text-align:left; }
.list th{ color:var(--amber-dim); }

a{ color:var(--amber); }
code{ font-family:inherit; }

/* admin pages get a little breathing room */
.admin{ padding:16px; }
.admin .card{ margin:0 auto; }