/* The accounts pages. Same night sky, grass and gold as triboigames.com,
   with a plain font for forms so they're easy to read. */
:root {
  --sky: #1b1b2f;
  --panel: #26263f;
  --text: #f0f0e8;
  --dim: #9a9ab0;
  --grass: #66aa33;
  --grass-dark: #4d8a22;
  --gold: #ffcc33;
  --red: #d9534f;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--gold); }
h2 { font-family: var(--pixel); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 14px; }
.sr { position: absolute; left: -9999px; }

.top { display: flex; align-items: baseline; gap: 12px; padding: 16px; border-bottom: 4px solid #000; background: linear-gradient(var(--grass) 0 8px, #885533 8px); }
.brand { font-family: var(--pixel); font-size: 14px; color: var(--text); text-decoration: none; text-shadow: 2px 2px 0 #000; }
.top .dim { color: #f0e0c8; font-size: 14px; }

main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--panel); border: 4px solid #000; box-shadow: 4px 4px 0 #000; padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

input, select { font: inherit; padding: 10px; border: 3px solid #000; background: #f0f0e8; color: #111; min-width: 0; }
input.code { font-family: var(--pixel); font-size: 16px; letter-spacing: 4px; text-transform: uppercase; width: 11em; }

.btn { font: inherit; font-weight: 700; padding: 10px 14px; border: 3px solid #000; cursor: pointer; text-decoration: none; display: inline-block; color: #000; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.go { background: var(--grass); box-shadow: inset -3px -3px 0 var(--grass-dark); }
.btn.quiet { background: #c8c8d8; }
.btn.danger { background: var(--red); color: #fff; }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.msg { min-height: 1.5em; margin: 8px 0 0; color: var(--gold); }
.msg.error { color: #ff8f8a; }

.profiles { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.profiles li { border: 3px solid #000; background: #1f1f33; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pname { font-family: var(--pixel); font-size: 13px; color: var(--gold); }
.profiles .btn { font-size: 14px; padding: 6px 10px; }

.codebox { margin-top: 12px; padding: 12px; border: 3px dashed var(--gold); text-align: center; }
.bigcode { font-family: var(--pixel); font-size: 28px; letter-spacing: 6px; color: var(--gold); margin: 8px 0; }
hr { border: 0; border-top: 2px solid #000; margin: 16px 0; }

footer { padding: 16px; text-align: center; font-size: 13px; color: var(--dim); }

/* The privacy notice page. */
.notice h3 { font-size: 17px; margin: 18px 0 6px; }
.notice ul { padding-left: 20px; }