/* Account bar and login sheet. Shared by the signup page and the game, so it
   leans on each page's own tokens where they exist and falls back where they
   don't. */
.acct{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  right:calc(14px + env(safe-area-inset-right));
  z-index:60;
}
.acct-btn{
  font:inherit;
  font-size:13px;
  padding:8px 15px;
  border-radius:99px;
  border:1px solid var(--rule, #332f2c);
  background:var(--surface, #232120);
  color:var(--ink-dim, #9d958a);
  cursor:pointer;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.acct-btn:hover{ color:var(--ink, #ece6dc); border-color:var(--ink-faint, #6e675e); }
.acct-btn.is-in{ color:var(--ink, #ece6dc); }

.acct-sheet{
  position:fixed; inset:0; z-index:120;
  background:rgba(10,9,8,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.acct-sheet[hidden]{ display:none; }
.acct-card{
  width:100%; max-width:380px;
  background:var(--surface, #232120);
  border:1px solid var(--rule, #332f2c);
  border-radius:var(--round, 16px);
  padding:26px;
  position:relative;
}
.acct-close{
  position:absolute; top:16px; right:18px;
  font:inherit; font-size:13px;
  background:none; border:0; cursor:pointer;
  color:var(--ink-faint, #6e675e);
}
.acct-close:hover{ color:var(--ink-dim, #9d958a); }

.acct-title{
  margin:0 0 8px;
  font-family:var(--serif, Georgia, serif);
  font-weight:400;
  font-size:24px;
  color:var(--ink, #ece6dc);
}
.acct-body{ margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--ink-dim, #9d958a); }
.acct-stat{ margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--ink-faint, #6e675e); }

.acct-card input[type=email]{
  width:100%;
  font:inherit; font-size:15px;
  padding:14px 15px;
  background:var(--bg, #1a1817);
  border:1px solid var(--rule, #332f2c);
  border-radius:12px;
  color:var(--ink, #ece6dc);
  margin-bottom:10px;
}
.acct-card input[type=email]::placeholder{ color:var(--ink-faint, #6e675e); }
.acct-card input[type=email]:focus{ outline:none; border-color:var(--ink-faint, #6e675e); }

.acct-primary{
  width:100%;
  font:inherit; font-size:15px;
  padding:15px;
  border:0; border-radius:12px;
  background:var(--ink, #ece6dc);
  color:var(--bg, #1a1817);
  cursor:pointer;
}
.acct-primary:disabled{ opacity:.45; cursor:not-allowed; }

.acct-msg{ margin:14px 0 0; font-size:13px; line-height:1.6; }
.acct-msg:empty{ display:none; }
.acct-msg.is-good{ color:var(--wildcard, #84a8a0); }
.acct-msg.is-bad{ color:var(--challenges, #c9705a); }

/* ── the printed language ────────────────────────────────
   Both pages run on paper stock with riso inks, so the dark fallbacks above
   would drop a black card onto a cream page. */
.press .acct-btn{
  background:transparent;
  border:1.5px solid var(--ink);
  border-radius:2px;
  color:var(--ink);
  font-family:var(--ui);
  font-weight:700;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 14px;
  box-shadow:3px 3px 0 var(--ink);
}
.press .acct-btn:hover{ background:var(--ink); color:var(--paper); }
.press .acct-btn:active{ transform:translate(3px,3px); box-shadow:none; }

.press .acct-sheet{ background:color-mix(in srgb, var(--ink) 55%, transparent); }
.press .acct-card{
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-radius:2px;
  box-shadow:8px 8px 0 var(--ink);
}
.press .acct-close{ color:var(--ink-3); font-family:var(--ui); }
.press .acct-close:hover{ color:var(--ink); }
.press .acct-title{ font-family:var(--display); font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.press .acct-body{ color:var(--ink-2); }
.press .acct-stat{ color:var(--ink-3); }
.press .acct-card input[type=email]{
  background:transparent;
  border:1.5px solid var(--ink);
  border-radius:2px;
  color:var(--ink);
}
.press .acct-card input[type=email]::placeholder{ color:var(--ink-3); }
.press .acct-primary{
  background:var(--ink); color:var(--paper);
  border:1.5px solid var(--ink); border-radius:2px;
  font-family:var(--ui); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; font-size:12px;
}
.press .acct-msg.is-good{ color:var(--wildcard-ink); }
.press .acct-msg.is-bad{ color:var(--challenges-ink); }