/* The passcode page, in the home screen's palette: the #2b2b2b page, a #1a1a1a
   card shaped like the set tiles, Courier New, and the home title's letter-spaced
   grey for the small print. BITW's page in shape; only the colours and type differ. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #2b2b2b; color: #e2e2e2;
  font: 14px/1.4 'Courier New', monospace;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.card {
  background: #1a1a1a; border: 1px solid #3a3a3a; border-radius: 16px;
  box-shadow: 0 4px 20px #00000066, inset 0 1px 0 #ffffff0a;
  padding: 28px 24px; width: 100%; max-width: 360px; text-align: center;
}
.logo { display: block; margin: 0 auto 10px; }
h1 { font-size: 22px; font-weight: 900; letter-spacing: 5px; color: #ccc; text-transform: uppercase; margin: 0; }
.by { font-size: 11px; letter-spacing: 3px; color: #888; margin: 4px 0 22px; }
label { display: block; text-align: left; color: #888; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; }
input {
  width: 100%; font: inherit; font-size: 22px; letter-spacing: 2px; padding: 12px 14px;
  border: 1px solid #ffffff22; border-radius: 6px; background: #ffffff0d; color: #fff; outline: none;
}
input:focus { border-color: #888; }
button {
  width: 100%; margin-top: 14px; padding: 12px; font: inherit; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  border: 1px solid #3a3a3a; border-radius: 6px; background: #e2e2e2; color: #1a1a1a; cursor: pointer;
}
button:disabled { opacity: .6; }
#msg { color: #ff4444; font-size: 12px; min-height: 1.4em; margin: 12px 0 0; }