@import url("typography.css");

/* Account screens share the arena's velvet, gold trim, and pixel headings. */
.auth-page { max-width: 600px; }
.auth-panel { padding: clamp(20px, 5vw, 36px); margin: 8px; background: var(--panel); box-shadow: 0 0 0 4px var(--gold-dark), 0 0 0 8px #000, 8px 12px 0 8px #0006; }
.auth-copy, .auth-link { font-family: var(--font-copy); font-weight: 400; font-size: 20px; line-height: 1.5; }
.auth-copy { color: var(--ink-dim); }
#auth-status { min-height: 26px; overflow-wrap: anywhere; }
#auth-status[data-error="true"] { color: #ffaaa3; }
.auth-providers { display: grid; gap: 16px; margin: 28px 0 24px; }
.auth-provider { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; border: 2px solid; padding: 14px 16px; font: 400 20px/1.4 var(--font-copy); cursor: pointer; box-shadow: 0 4px 0 #000; }
.auth-provider svg { flex-shrink: 0; }
.auth-github { color: #fff; background: #24292f; border-color: #586069; }
.auth-provider:not(:disabled):hover { filter: brightness(.92); }
.auth-note { font-size: 18px; margin-bottom: 0; }
.auth-link { display: inline-block; padding: 10px 0; color: var(--gold); border: 0; background: transparent; text-decoration: underline; cursor: pointer; min-height: 44px; }
.auth-panel :focus-visible, .account-control:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.auth-panel :disabled { opacity: .6; cursor: not-allowed; }
[hidden] { display: none !important; }
/* The account strip: email (shortened with an ellipsis), sign in/out, and the sound
   switch, in one pixel-font row pinned to the top right so nothing can overlap. */
.account-nav { position: fixed; top: 10px; right: 10px; z-index: 20; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 20px); padding: 6px 6px 6px 12px; background: rgba(28, 15, 23, 0.92);
  box-shadow: 0 0 0 2px #000, 0 3px 0 #000; font: 9px/1 "Press Start 2P", monospace; }
.account-label { font: 400 16px/1 var(--font-copy); min-width: 0; max-width: 32ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-dim, #b7a98a); }
.account-label:empty { display: none; }
.account-control { flex-shrink: 0; font: inherit; color: var(--gold, #f2b84b); border: 1px solid var(--gold-dark, #9a5b16); background: #100b13;
  padding: 8px 9px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.account-control:hover { color: #f4ead2; }
.account-nav .sound-toggle { position: static; flex-shrink: 0; box-shadow: none; border: 1px solid #3b2030; padding: 8px 9px; }
/* The fixed account strip overlays the curtain on desktop. Narrow screens keep
   room inside the curtain so the strip cannot cover the heading. */
@media (max-width: 1100px) {
  body:has(.account-nav:not([hidden])) .valance { padding-top: 66px; }
}
/* During a round the question owns the top of the screen. */
body[data-arena="stage"]:not([data-phase="setup"]) .account-nav { opacity: 0; pointer-events: none; transition: opacity 300ms; }
@media (max-width: 480px) { .account-label { max-width: 14ch; } }