/* ============================================================================
   account.css — the ACCOUNT panel (sign in, onboarding, your account), the
   avatar creator, and the sign-in plaque in the room's corner
   ----------------------------------------------------------------------------
   js/account/main.js and creator.js. The panel is the menu's own (paper
   on barnwood, css/style.css section 8-9); this adds only what's new, in
   the same materials: dark edges, burnt ink on paper, the lit gold of the
   SETTLE UP board for the one button that moves you on.

   Pixel art (the avatar, the name in the house font) is drawn at a whole-
   number scale into its canvas and shown at exactly that size, or at an
   exact multiple with image-rendering: pixelated. Never stretched.
   ========================================================================== */

/* ---- The plaque in the room's corner ------------------------------------------------ */
.acct-chip {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 18;                      /* over the room and its click-catcher, under the panel */
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 12px;
  border: 4px solid #1A1410;
  background: linear-gradient(#5C4029, #42301F);
  box-shadow: inset 0 2px 0 #6B4A2F, 4px 4px 0 rgba(26, 20, 16, .55);
  color: #F4E8D0;
  font: 700 13px/1 'Bitter', Georgia, serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.acct-chip:hover { background: linear-gradient(#6E4E33, #4E3825); }
.acct-chip:focus-visible { outline: 4px solid #E8A317; outline-offset: 2px; }
.acct-chip--in { padding: 2px 12px 2px 4px; }
.acct-chip__pic { display: block; image-rendering: pixelated; }
.acct-chip__name { color: #EDBA78; }
@media (max-width: 760px) {
  /* phones: a small square in the corner, clear of the sign */
  .acct-chip { min-width: 56px; justify-content: center; padding: 4px 6px; font-size: 11px; letter-spacing: .1em; }
  .acct-chip__text { max-width: 4.2em; line-height: 1.15; text-align: center; }
  .acct-chip--in .acct-chip__name { display: none; }      /* just your face */
  .acct-chip--in { padding: 2px 4px; }
}

/* ---- The panel's pages ------------------------------------------------------------------ */
.acct {
  max-width: 760px;
  margin: 0 auto;
  color: var(--paper-ink);
  font-family: var(--font-menu);
}
.acct--avatar { max-width: 1040px; }
.acct-h {
  margin: 0 0 8px;
  color: var(--burn);
  font: 700 28px/1.2 var(--font-menu);
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;                /* (the site's display headings wear a hard shadow; this is text on paper) */
}
.acct-steps {
  margin: 0 0 4px;
  color: var(--paper-dim);
  font: 700 12.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.acct-lead {
  max-width: 60ch;
  margin: 0 0 20px;
  font: 17px/1.6 var(--font-menu);
}
.acct-small {
  max-width: 64ch;
  margin: 16px 0 0;
  color: var(--paper-dim);
  font: 14.5px/1.6 var(--font-menu);
}
.acct-dev { font-style: italic; }
.acct-danger { margin-top: 32px; }

.acct-note {
  max-width: 60ch;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 2px solid var(--paper-rule);
  background: rgba(255, 255, 255, .35);
  font: 600 15px/1.5 var(--font-menu);
}
.acct-note--error { border-color: #8C1C13; color: #6E140E; }

/* forms */
.acct-form { display: grid; gap: 10px; max-width: 460px; }
.acct-label {
  color: var(--paper-dim);
  font: 700 13px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.acct-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 4px solid var(--edge);
  border-radius: 0;
  background: #F4E8D0;
  color: var(--burn);
  font: 600 20px/1.3 var(--font-menu);
}
.acct-input:focus-visible { outline: 4px solid var(--burn); outline-offset: 2px; }
.acct-input--code {
  max-width: 240px;
  font: 700 32px/1 'Courier New', monospace;
  letter-spacing: .3em;
}
.acct-error {
  margin: 0;
  color: #6E140E;
  font: 600 15px/1.5 var(--font-menu);
}
.acct-status {
  min-height: 1.5em;
  margin: 0;
  font: 600 15px/1.5 var(--font-menu);
}
.acct-status[data-kind="bad"] { color: #6E140E; }
.acct-status[data-kind="ok"] { color: #2F4A1E; }
.acct-status[data-kind="wait"] { color: var(--paper-dim); }

/* buttons: the panel's own BACK plank, and the lit gold one that moves you on */
.acct-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.acct-row--end { justify-content: flex-end; margin-top: 20px; }
.acct-btn {
  min-height: 48px;
  padding: 12px 18px;
  border: 4px solid var(--edge);
  background: linear-gradient(#5C4029, #42301F);
  color: var(--bone);
  font: 700 14px/1 var(--font-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.acct-btn:hover:not(:disabled) { background: linear-gradient(#6E4E33, #4E3825); }
.acct-btn:disabled { opacity: .55; cursor: not-allowed; }
.acct-btn:focus-visible { outline: 4px solid var(--burn); outline-offset: 2px; }
.acct-btn--go {
  background: linear-gradient(#D0A94C, #A37F2E);
  color: var(--burn);
  justify-self: start;
}
.acct-btn--go:hover:not(:disabled) { background: linear-gradient(#E0B65C, #B08A3C); }
.acct-btn--quiet {
  border-width: 2px;
  background: rgba(255, 255, 255, .3);
  color: var(--burn);
}
.acct-btn--quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .55); }
.acct-btn--danger { background: linear-gradient(#A0261B, #7A1A12); color: #F4E8D0; }
.acct-btn--danger:hover:not(:disabled) { background: linear-gradient(#B8352A, #8C1C13); }
.acct-btn.is-busy { cursor: progress; }
.acct-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--burn);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  cursor: pointer;
}
.acct-link:disabled { color: var(--paper-dim); text-decoration: none; cursor: default; }

/* the name, as the TV shows it: gold house letters on the screen's black */
.acct-tv {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 18px 12px 10px;
  border: 4px solid #1E1E22;
  outline: 4px solid var(--edge);
  background: #0F1014;
  box-shadow: inset 0 0 0 2px #3A3A42;
}
.acct-tv__name { display: block; min-height: 26px; image-rendering: pixelated; }
.acct-tv__cap {
  color: #8E8E84;
  font: 700 11px/1.3 var(--font-menu);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* your account */
.acct-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 0 0 20px;
  padding: 16px;
  border: 4px solid var(--edge);
  background: linear-gradient(var(--paper-hi), #CDB78E);
  box-shadow: inset 0 0 0 2px var(--paper-sh);
}
.acct-card__pic {
  display: grid;
  place-items: center;
  padding: 8px;
  border: 4px solid var(--edge);
  background: #0F1014;
}
.acct-card__img, .acct-card__canvas { display: block; image-rendering: pixelated; }
.acct-card__who { flex: 1 1 220px; min-width: 0; }
.acct-card__plate {                 /* the name as the TV sets it: gold on the screen's black */
  display: inline-block;
  padding: 8px 10px;
  border: 4px solid var(--edge);
  background: #0F1014;
}
.acct-card__name { display: block; image-rendering: pixelated; }
.acct-card__plain { margin: 8px 0 0; color: var(--burn); font: 700 20px/1.3 var(--font-menu); }
.acct-card__email { margin: 2px 0 0; color: var(--paper-dim); font: 15px/1.4 var(--font-menu); overflow-wrap: anywhere; }

/* ---- The avatar creator -------------------------------------------------------------------- */
.av {
  display: grid;
  gap: 20px;
  align-items: start;
}
@container (min-width: 700px) {
  .av { grid-template-columns: 336px minmax(0, 1fr); gap: 28px; }
}
.av__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "fig bust" "fig roll";
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 4px solid var(--edge);
  background:
    linear-gradient(transparent 70%, rgba(0, 0, 0, .25)),
    repeating-linear-gradient(90deg, #4A3020 0 28px, #4E3423 28px 32px);   /* the saloon floor */
  box-shadow: inset 0 0 0 2px #6B4A2F;
}
.av__figure { grid-area: fig; display: grid; place-items: end center; min-width: 0; width: 100%; }
.av__full { display: block; image-rendering: pixelated; }
.av__bust-box {
  grid-area: bust;
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px;
  border: 4px solid var(--edge);
  background: #0F1014;
}
.av__bust { display: block; image-rendering: pixelated; }
.av__bust-note {
  color: #8E8E84;
  font: 700 10px/1.2 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.av__roll { grid-area: roll; justify-self: stretch; padding-left: 8px; padding-right: 8px; }
@container (min-width: 700px) {
  /* the figure on top at 6x, the picture and the dice under it */
  .av__stage { position: sticky; top: 0; grid-template-areas: "fig fig" "bust roll"; align-items: center; }
}

.av__controls { display: grid; gap: 8px; min-width: 0; }
.av-group { display: grid; gap: 4px; }
.av-slot {
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 2px solid var(--paper-rule);
  background: rgba(255, 255, 255, .22);
}
.av-slot.is-off { opacity: .45; }
.av-slot__legend {
  padding: 0 6px;
  color: var(--paper-dim);
  font: 700 12.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.av-slot__now { color: var(--burn); letter-spacing: .06em; }
.av-slot__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.av-opt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  cursor: pointer;
}
.av-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.av-slot:disabled .av-opt { cursor: not-allowed; }
.av-opt__sw, .av-opt__none {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--edge);
  background: var(--c, #F4E8D0);
  color: var(--burn);
  font: 700 13px/1 var(--font-menu);
  text-transform: uppercase;
}
.av-opt__none { width: auto; min-width: 44px; padding: 0 10px; font-size: 18px; }
.av-slot--smoking .av-opt__none { font-size: 13px; }
.av-opt__thumb {
  display: block;
  box-sizing: content-box;
  width: 64px;                     /* 32 x 40, shown at exactly 2x */
  height: 80px;
  border: 4px solid var(--edge);
  background: #2A1B10;
  image-rendering: pixelated;
}
.av-opt__name {
  color: var(--paper-dim);
  font: 600 12px/1.2 var(--font-menu);
}
/* picked: a gold ring outside the dark edge; focused: the burnt focus ring */
.av-opt input:checked + .av-opt__sw,
.av-opt input:checked + .av-opt__none,
.av-opt input:checked + .av-opt__thumb { box-shadow: 0 0 0 3px #E8A317, 0 0 0 6px var(--edge); }
.av-opt input:checked ~ .av-opt__name { color: var(--burn); font-weight: 700; }
.av-opt input:focus-visible + .av-opt__sw,
.av-opt input:focus-visible + .av-opt__none,
.av-opt input:focus-visible + .av-opt__thumb { outline: 4px solid var(--burn); outline-offset: 7px; }
.av-opt:hover .av-opt__sw, .av-opt:hover .av-opt__none, .av-opt:hover .av-opt__thumb { border-color: #6B4A2F; }

@media (max-width: 760px) {
  .acct-h { font-size: 24px; }
  .acct-lead { font-size: 16px; }
  .av__stage { position: sticky; top: -16px; z-index: 1; }   /* the panel page's padding */
  .av-opt__thumb { width: 64px; height: 80px; }
}

/* ---- On a phone (css/mobile.css's breakpoint: the panel is the whole screen) ----------------
   The button that moves you on is the width of the phone, under the thumb,
   and the little text buttons ("send a new code") get room round them to
   hit. The plaque's place on a phone is css/mobile.css's: it rides the
   header. */
@media (max-width: 1023px), (max-width: 1151px) and (max-height: 679px), (max-height: 500px) {
  .acct-form { max-width: none; }
  .acct-form .acct-btn--go { justify-self: stretch; min-height: 56px; font-size: 15px; }
  .acct-row .acct-btn { flex: 1 1 auto; min-height: 52px; }
  .acct-row--end .acct-btn { flex-basis: 100%; }
  .acct-link { padding: 10px 0; }
}

/* ---- The staff sign-in page (staff/login.html) -------------------------------------------- */
.staff-login {
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px;
  box-sizing: border-box;
  background: repeating-linear-gradient(90deg, #4A3323 0 28px, var(--wood) 28px 32px, #44301F 32px 60px, var(--edge) 60px 64px);
}
.staff-login__sheet {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 28px 32px;
  border: 4px solid var(--edge);
  background:
    radial-gradient(120% 90% at 20% 0%, var(--paper-hi), transparent 60%),
    var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper-sh), 8px 8px 0 rgba(26, 20, 16, .5);
}
.staff-login__brand {
  margin: 0 0 18px;
  color: var(--paper-dim);
  font: 700 13px/1.3 var(--font-menu);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.staff-login__brand span { color: #8C1C13; }
.staff-login .acct-small { max-width: none; }
.staff-steps { margin: 0 0 8px; padding-left: 1.4em; font: 16px/1.5 var(--font-menu); }
.staff-qr { display: inline-block; margin: 4px 0 8px; padding: 8px; border: 4px solid var(--edge); background: #fff; line-height: 0; }
.staff-qr svg { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.staff-secret { font: 700 15px/1.4 'Courier New', monospace; letter-spacing: .06em; overflow-wrap: anywhere; }
.staff-pages { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.staff-pages .acct-btn { display: block; text-align: left; text-decoration: none; }
@media (max-width: 520px) { .staff-login__sheet { padding: 18px 16px 24px; } }