/* Shared theme tokens for login + play pages. Pulled out so the canvas
   renderer in app.js can read them off computed-style without depending
   on which HTML embedded them. */
:root {
  --page-bg: #0E2018;
  --trim: #dfe5cf;
  --trim-muted: rgba(223, 229, 207, 0.5);
  --edge-inset: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  /* See play.html: 100dvh / 100% trigger the iOS PWA "chin gap" bug
     under viewport-fit=cover + black-translucent. 100vh is the only
     value that resolves to the true viewport height with the status
     bar offset applied. */
  height: 100vh;
  overflow: hidden;
  background: var(--page-bg);
  color: var(--trim);
  font-family: "Inter", "SF Pro Text", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body {
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Auth pages (login / signup / reset) ----------
   Shared by login.html, signup.html, reset.html — the same glass-panel
   treatment as the in-game modals, so every pre-auth surface reads as
   part of one UI. Page-specific layout (body centering, #bgShader)
   stays inline in each page. */
.login-card {
  position: relative;
  z-index: 2;
  width: min(320px, 100%);
  background: rgba(15, 16, 20, 0.96);
  color: var(--trim);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Fields are placeholder-labeled with a line icon inset on the left
   (inputs carry aria-label so the removed <label> stays announced). */
.login-field {
  position: relative;
}
.login-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--trim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  pointer-events: none;
}
.login-field input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--trim);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 10px 12px 10px 38px;
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.login-field input::placeholder {
  color: var(--trim);
  opacity: 0.45;
}
.login-field input:focus {
  outline: none;
  border-color: var(--trim);
}
.login-btn {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--trim);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 12px;
  font: 600 13px "Inter", "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.login-btn:active { background: rgba(255, 255, 255, 0.06); }
.login-error {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  text-align: center;
  opacity: 0.9;
}
.login-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
}
.login-links a {
  color: var(--trim);
  opacity: 0.75;
}
.login-links span { opacity: 0.4; }
.login-hint {
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  opacity: 0.55;
}

/* ---------- Brand mark (emblem + portrait trio) ----------
   The circular FARO POKER wordmark with spade overlay and the three menu
   portraits, for the pre-auth pages. play.html deliberately doesn't
   link style.css, so its home screen carries a copy of these identity
   rules inline — edits go in both places. */
.home-screen__emblem {
  display: flex;
  justify-content: center;
}
.home-screen__emblem-wrap {
  position: relative;
  width: 96px;
  height: 96px;
}
/* The ring and spade are siblings so a transform on the ring (the home
   screen spins it on scroll) leaves the spade upright. */
.home-screen__emblem-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Bungee on an SVG circle path; the repeat count + font-size are tuned
   together so the text closes the loop without a seam. */
.home-screen__emblem-ring text {
  fill: var(--trim);
  font: 400 8.1px "Bungee", "Inter", system-ui, sans-serif;
}
.home-screen__emblem-spade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--trim);
}
/* Handwritten lowercase x knocked out of the spade's body — part of
   the brand mark wherever the spade renders. */
.home-screen__emblem-x {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font: 400 9px "Permanent Marker", "Marker Felt", "Bradley Hand", cursive;
  line-height: 1;
  color: var(--page-bg);
}
/* Each portrait pixel-matches the in-game banter portrait
   (drawBanterPortrait in table-draw.js): 56px square, glass fill under
   the sprite, sprite stretched edge-to-edge, single 1px trim stroke
   (inside the box; global border-box mirrors strokeRect's inset
   stroke). The glass fill doubles as the loading placeholder. */
.home-screen__portraits {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.home-screen__portrait {
  width: 56px;
  height: 56px;
  border: 1px solid var(--trim);
  background-color: rgba(0, 0, 0, 0.45);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.home-screen__portrait--tj {
  background-image: url("/assets/sprites/tj-bad-beat.png");
}
.home-screen__portrait--clint {
  background-image: url("/assets/sprites/clint.png");
}
.home-screen__portrait--cowgirl {
  background-image: url("/assets/sprites/cowgirl.png");
}
/* Pre-auth wrapper for the brand mark, above the .login-card. The
   auto margins (here and on the card) center the pair as a group when
   there's room and collapse to zero when a short viewport forces the
   page to scroll — flexbox justify-content:center would clip the top. */
.login-brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
  margin-bottom: 36px;
}
/* Wordmark over the card. Archivo Black is the brand face for the
   wordmark itself; the in-game menu headings stay Anton. */
.login-title {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slim space between the spade emblem and the wordmark. */
  gap: 4px;
  font: 400 28px "Archivo Black", "Inter", system-ui, sans-serif;
  color: var(--trim);
  line-height: 1;
}
/* Pre-auth pages run the spade inline with the wordmark (no ring), so
   the wrap hugs the glyph instead of reserving the ring's 96px
   diameter. The spade stays flex-centered in the wrap, which keeps
   the knockout x anchored identically at any wrap size. */
.login-brand .home-screen__emblem-wrap {
  width: 24px;
  height: 24px;
}
/* The spade is an inline SVG (see the pre-auth h1s), not the ♠ font
   glyph: the glyph is short and round next to Anton's tall condensed
   caps, and pinching it with a transform blurs it. The vector is drawn
   condensed, sized to Anton's cap height, and centers by geometry. */
.login-title .home-screen__emblem-spade svg {
  display: block;
  width: 18px;
  height: 21px;
}
.login-card { margin-bottom: auto; }