/* Copied from animalarmygame e24e710; keep in sync by hand (see scripts/lib/copy-rules.mjs). */
/*
 * Animal Army — authentication gate styling.
 *
 * Kept in its own file so styles/game.css stays byte-for-byte diffable against
 * the original prototype artifact. Everything here reuses the existing design
 * tokens from game.css (:root) — flat dark panels on a dark ink background,
 * stamp-monospace labels, pine/stamp accents.
 */

/* While the gate is up, the game must not be visible or reachable. game.js
   also defers its boot, so these nodes are empty at this point — hiding them
   prevents any flash of layout while auth resolves. */
body.aa-locked .fight-layout,
body.aa-locked .top-strip,
body.aa-locked .how-to-play-fab,
body.aa-locked .fight-overlay,
body.aa-locked .rules-overlay,
body.aa-locked .leaderboard-overlay,
body.aa-locked .draft-status,
body.aa-locked .roster-sheet-overlay {
  display: none !important;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 0%, rgba(10, 6, 3, 0.35), rgba(6, 20, 12, 0.82));
}
.auth-gate[hidden] { display: none; }

/* The gate centres a single child, so the badge and the card are stacked inside
   one column rather than made siblings of the flex centring. */
.auth-gate-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(400px, 100%);
  margin: auto;
}
/* .auth-card carries `margin: auto` for the overflow case; inside the stack the
   wrapper owns that, and leaving it on would fight the gap. */
.auth-gate-stack .auth-card { margin: 0; }

.auth-gate-logo {
  display: block;
  width: min(240px, 66%);
  height: auto;
  /* The badge is a knockout, so it picks up the gate's gradient through the
     mane. The shadow stops it reading as a flat sticker. */
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

/* Short viewports: the form matters more than the badge, so shrink it rather
   than pushing the sign-in button below the fold. */
@media (max-height: 760px) {
  .auth-gate-stack { gap: 10px; }
  .auth-gate-logo { width: min(150px, 44%); }
}
@media (max-height: 600px) {
  .auth-gate-logo { display: none; }
}

/* Reuses .card from game.css (flat dark panel, settle animation) and only
   overrides what a form needs. */
.auth-card {
  width: min(400px, 100%);
  margin: auto;
  padding: 30px 26px 24px;
}

.auth-title {
  /* Bungee Inline as on the in-game masthead so the landing surface
     matches the animal-army vibe instead of reading as generic
     monospace. Bumped from ~23px floor to 30px+: below that, Bungee
     Inline's stripe disappears and it reads as a bold monospace anyway.
     Font-weight normalized to 400 - Bungee Inline is single-weight. */
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(30px, 6vw, 40px);
  line-height: 1.05;
  color: var(--parchment);
  margin: 8px 0 12px;
}
.auth-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--parchment-dim);
  margin: 0 0 18px;
}

.auth-form { display: block; margin: 0; }

.auth-field { display: block; margin-bottom: 14px; }
.auth-label {
  display: block;
  font-family: var(--font-stamp);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  margin-bottom: 6px;
}
.auth-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px avoids the iOS focus zoom */
  color: var(--parchment);
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid var(--parchment-dim);
  border-radius: 4px;
  padding: 11px 12px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth-input::placeholder { color: rgba(243, 236, 224, 0.42); }
.auth-input:hover { border-color: var(--parchment); }
.auth-input:focus {
  outline: none;
  border-color: var(--moss-dark);
  box-shadow: 0 0 0 3px rgba(92, 143, 58, 0.24);
}
.auth-hint {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--parchment-dim);
  margin-top: 5px;
}

.auth-submit { margin-top: 6px; }
.auth-submit[disabled] { opacity: 0.65; cursor: progress; }

.auth-message {
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
  border-left: 3px solid transparent;
}
.auth-message-error {
  /* -light, not -dark: -dark text on this tint composited over the (now
     dark) --drawer measured 1.17:1 - see the --blaze-bright/--moss-bright note
     in game.css :root. */
  color: var(--blaze-bright);
  background: rgba(196, 69, 31, 0.12);
  border-left-color: var(--blaze);
}
.auth-message-success {
  color: var(--moss-bright);
  background: rgba(92, 143, 58, 0.14);
  border-left-color: var(--moss);
}
.auth-message-info {
  color: var(--parchment);
  background: rgba(217, 150, 46, 0.14);
  border-left-color: var(--brass-bright);
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
}
.auth-link {
  font-family: var(--font-stamp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(243, 236, 224, 0.5);  /* contrast pass: alpha bumped for ≥3:1 border */
  padding: 2px 0;
  cursor: pointer;
}
.auth-link:hover { color: var(--parchment); border-bottom-color: var(--parchment); }
.auth-link:focus-visible { outline: 2px solid var(--blaze); outline-offset: 3px; }

.auth-foot {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--parchment-dim);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(243, 236, 224, 0.5);  /* contrast pass: alpha bumped for ≥3:1 border */
}
/* The "create an account" link reads as part of a sentence here rather than as
   a row of actions, so it sits on the text baseline instead of on its own. */
.auth-foot .auth-link { vertical-align: baseline; }

/* Guest trial offer. Deliberately quieter than the sign-in submit: a returning
   player's job is still the form above, and this only has to be findable by
   someone who does not want to fill one in. */
.auth-guest {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(243, 236, 224, 0.5);  /* contrast pass: alpha bumped for ≥3:1 border */
}
/* Centred "or" sitting on the rule above, in the same stamped voice as the
   rest of the card. */
.auth-guest-rule {
  align-self: center;
  margin-top: -24px;
  padding: 0 10px;
  background: var(--drawer);
  font-family: var(--font-stamp);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.auth-guest-btn {
  font-family: var(--font-stamp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12.5px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 4px;
  border: 2px solid var(--parchment);
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.auth-guest-btn:hover {
  background: var(--parchment);
  color: var(--drawer);
  transform: translateY(-1px);
}
.auth-guest-btn:focus-visible { outline: 2px solid var(--blaze); outline-offset: 2px; }
.auth-guest-note {
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--parchment-dim);
}

.auth-spinner {
  width: 26px;
  height: 26px;
  margin: 12px auto 18px;
  border: 3px solid rgba(243, 236, 224, 0.5);  /* contrast pass: alpha bumped for ≥3:1 border */
  border-top-color: var(--moss-dark);
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- signed-in account bar */

/* Laid out by .top-strip in game.css, which is the fixed element. Keeping this
   `position: static` is what stops the bar from overlapping the buttons on the
   left: two fixed corners cannot negotiate, one flex row can. */
.account-bar {
  position: static;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px 6px 12px;
  border: 1px solid rgba(251, 241, 222, 0.5); /* contrast pass: alpha bumped for ≥3:1 border */
  border-radius: 999px;
  background: rgba(10, 6, 3, 0.55);
  backdrop-filter: blur(4px);
}
.account-bar[hidden] { display: none; }

/* Equipped-avatar sprite sits before the name column. Uses the same warm
   cream tile look as the leaderboard row's .lb-avatar so the two badges
   read as members of the same set. flex-shrink stops it from squishing on
   narrow phones - the .account-name column absorbs any width pressure. */
.account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(251, 241, 222, 0.55);
  border: 1px solid rgba(154, 124, 77, 0.55);
  object-fit: contain;
  flex-shrink: 0;
}
.account-avatar[hidden] { display: none; }

.account-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
/* An alias can be 40 characters; it truncates rather than pushing Sign out off
   the screen. The cap is on the flex row, not on this element, so it shrinks to
   whatever is actually left over at any width. */
.account-name {
  font-family: var(--font-stamp);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--parchment-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-level {
  font-family: var(--font-stamp);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass-bright);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-level:empty { display: none; }
/* Daily Intel streak, third line of .account-id underneath the level -
   only ever shown once there is a live streak (see accountStreak write-up
   in game.parts/05-screens-fight-and-boot.js's central render() pass), so
   [hidden] is the normal state rather than an edge case. Warmer color than
   .account-level so a hot streak reads as a small ember, not just another
   status line in the same brass tone. */
.account-streak {
  font-family: var(--font-stamp);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--blaze-bright);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-streak[hidden] { display: none; }
/* Cloud-save status. Sits between the account name and Sign out: readable at a
   glance, never louder than the game. Only the states that need the player to
   act (offline / error / conflict / stale) pick up a colour and a pointer. */
.sync-chip {
  font-family: var(--font-stamp);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: transparent;
  border: 1px solid rgba(251, 241, 222, 0.5); /* contrast pass: alpha bumped for ≥3:1 border */
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
  cursor: default;
}
.sync-chip[hidden] { display: none; }
.sync-chip:not([disabled]) { cursor: pointer; }
.sync-chip:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }
.sync-chip[data-state='saved'] { color: var(--moss); border-color: rgba(92, 143, 58, 0.55); }
.sync-chip[data-state='syncing'] { animation: syncPulse 1.4s ease-in-out infinite; }
.sync-chip[data-state='offline'],
.sync-chip[data-state='stale'] { color: var(--brass-bright); border-color: rgba(217, 150, 46, 0.6); }
.sync-chip[data-state='error'],
.sync-chip[data-state='conflict'] { color: var(--parchment); background: var(--blaze-dark); border-color: var(--blaze); }
/* The spoken-out-loud version of the chip. Full-width under the account bar so
   it can wrap onto two lines on a phone rather than being truncated, and styled
   as information rather than as an alarm: the game is still playable in every
   state that can put text here. */
.sync-notice {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--parchment-dim);
}
.sync-notice[hidden] { display: none; }
.sync-notice[data-state='error'] .sync-notice-text,
.sync-notice[data-state='conflict'] .sync-notice-text { color: var(--parchment); }
.sync-notice[data-state='offline'] .sync-notice-text,
.sync-notice[data-state='stale'] .sync-notice-text { color: var(--brass-bright); }
.sync-notice-action {
  font-family: var(--font-stamp);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parchment);
  background: transparent;
  border: 1px solid rgba(251, 241, 222, 0.4);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.sync-notice-action[hidden] { display: none; }
.sync-notice-action:hover { background: rgba(251, 241, 222, 0.14); }
.sync-notice-action:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }

.sync-chip[data-state='offline']:hover,
.sync-chip[data-state='stale']:hover,
.sync-chip[data-state='error']:hover,
.sync-chip[data-state='conflict']:hover { color: var(--parchment); background: var(--blaze); border-color: var(--blaze); }
@keyframes syncPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.account-signout {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment);
  background: transparent;
  border: 1px solid rgba(251, 241, 222, 0.4);
  border-radius: 999px;
  padding: 5px 10px;
  min-height: 24px;
  cursor: pointer;
  white-space: nowrap;
}
.account-signout:hover { background: var(--blaze); border-color: var(--blaze); }
.account-signout:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }
.account-signout[disabled] { opacity: 0.6; cursor: progress; }

/* Lower emphasis than Sign out, which is the routine action in this bar —
   dimmer text and a fainter border at rest, so the destructive option does not
   compete with it for attention. The red only appears on hover/focus, the
   moment someone actually means to reach for it. */
.account-delete {
  font-family: var(--font-stamp);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: transparent;
  border: 1px solid rgba(251, 241, 222, 0.5); /* contrast pass: alpha bumped for ≥3:1 border */
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.account-delete[hidden] { display: none; }
.account-delete:hover, .account-delete:focus-visible { color: var(--parchment); border-color: var(--blaze); background: rgba(196, 69, 31, 0.28); }
.account-delete:focus-visible { outline: 2px solid var(--blaze); outline-offset: 2px; }
.account-delete[disabled] { opacity: 0.6; cursor: progress; }

/* Apple's HIG puts the minimum tap target at 44pt, and these pills render at
   about 24px tall — 10.5px type plus 5px of padding. App Review taps Delete
   account on a real device, so it is the one control in the app that cannot
   afford to be fiddly.

   Growing the pills themselves would push the account bar down over the game,
   so grow only the touch area: a transparent ::after centred on each control
   stretches the hit box to 44px tall while the visible pill stays exactly
   where it was. Vertical only — the two pills sit side by side, so widening
   would make them overlap each other. */
.account-signout,
.account-delete { position: relative; }
.account-signout::after,
.account-delete::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Guest bar. "Save progress" is the only conversion prompt a guest sees while
   playing, so unlike Sign out it is filled rather than outlined — it is an
   offer, not an exit. */
.account-bar.is-guest {
  border-color: rgba(217, 150, 46, 0.55);
}
.account-bar.is-guest .account-name { color: var(--brass-bright); }
.account-bar.is-guest .account-signout {
  color: var(--cabinet);
  background: var(--brass-bright);
  border-color: var(--brass-bright);
}
.account-bar.is-guest .account-signout:hover {
  background: var(--parchment);
  border-color: var(--parchment);
}

/* ------------------------------------------------------ account settings --

   Sign out, Delete account and Rename all moved behind one gear. The bar sat
   on a single row with the sync chip and the player's name, and every button
   added there came out of the name's width budget on a phone. A gear is a
   fixed 34px no matter how many items end up behind it. */
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu[hidden] { display: none; }

.account-settings {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 34px visible, but the ::before below pads the hit area out to 44px so the
     control is thumb-sized without the gear itself looking oversized in a
     32px-tall bar. */
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--parchment);
  background: transparent;
  border: 1px solid rgba(251, 241, 222, 0.4);
  border-radius: 999px;
  cursor: pointer;
}
.account-settings::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.account-settings:hover { background: var(--blaze); border-color: var(--blaze); }
.account-settings:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }
.account-settings[aria-expanded='true'] { background: var(--blaze); border-color: var(--blaze); }

/* Anchored to the gear's right edge so it can never run off the right of the
   viewport, and capped at the viewport width so it cannot run off the left
   either on a 320px phone. */
.account-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-width: 208px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid rgba(251, 241, 222, 0.5); /* contrast pass: alpha bumped for ≥3:1 border */
  border-radius: 14px;
  background: rgba(10, 6, 3, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.account-menu-list[hidden] { display: none; }

.account-menu-item {
  display: block;
  width: 100%;
  /* 44px unconditional so a phone and a mouse pointer land the same target.
     Was 40px in the base rule with a 44px override at max-width:560px, which
     shipped the popup below the 44pt HIG minimum at every desktop width. */
  min-height: 44px;
  padding: 11px 12px;
  font-family: var(--font-stamp);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  color: var(--parchment);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.account-menu-item:hover { background: rgba(251, 241, 222, 0.12); }
.account-menu-item:focus-visible { outline: 2px solid var(--parchment); outline-offset: -2px; }
.account-menu-item[disabled] {
  opacity: 0.45;
  cursor: default;
}
.account-menu-item[disabled]:hover { background: transparent; }

/* Same reasoning as .account-delete in the old bar: red only on hover/focus,
   so the destructive item does not shout at someone who opened the menu to
   sign out. */
.account-menu-danger { color: rgba(251, 241, 222, 0.72); }
.account-menu-danger:hover,
.account-menu-danger:focus-visible {
  color: var(--parchment);
  background: rgba(176, 42, 30, 0.85);
}

/* Why Rename is greyed out. Sits under the item rather than replacing its
   label, so the disabled control still says what it would have done. */
.account-menu-note {
  padding: 0 12px 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(251, 241, 222, 0.6);
  white-space: normal;
}
.account-menu-note[hidden] { display: none; }

.account-menu-sep {
  height: 1px;
  margin: 5px 8px;
  background: rgba(251, 241, 222, 0.16);
}

@media (max-width: 560px) {
  /* Item height is 44px unconditional now (see the base rule above); this
     block only carries the phone-specific popup width. */
  .account-menu-list { min-width: 196px; }
}

/* Unmissable marker for an AA_AUTH_ENABLED=false build. */
.auth-disabled-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  font-family: var(--font-stamp);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cabinet);
  background: var(--brass-bright);
  padding: 5px 8px;
}

/* .top-strip stacks into two rows at this width (see game.css), so the account
   bar has a full row to itself and the name gets a real budget again instead of
   the 26vw it needed when it was sharing the row with the buttons. */
@media (max-width: 560px) {
  .account-bar { padding-left: 10px; gap: 6px; }
  .sync-chip { font-size: 9px; padding: 4px 7px; letter-spacing: 0.05em; }
  .auth-card { padding: 26px 20px 22px; }
}

/* The account bar has five children on one row (avatar, id column, sync chip,
   sign-out or gear, and — for guests — the Save progress pill). At 320–360px
   the sum of their intrinsic widths plus gaps and padding leaves the id column
   almost nothing, which is what truncated "Guest · 10 battles left" to "Guest
   · 10 battles le…" in production. Splitting that string into two lines (name
   + level; see renderAccountBar in js/auth.js) is the other half of the fix;
   this rule shrinks the avatar tile and tightens gaps so a signed-in player
   with an equipped avatar keeps enough room for a real display name. */
@media (max-width: 360px) {
  .account-bar { padding-left: 8px; padding-right: 6px; gap: 5px; }
  .account-avatar { width: 24px; height: 24px; border-radius: 7px; }
  .account-name { font-size: 10.5px; letter-spacing: 0.05em; }
  .account-level { font-size: 8.5px; }
  .account-streak { font-size: 8.5px; }
  .sync-chip { font-size: 8.5px; padding: 3px 6px; }
  .account-signout { font-size: 10px; padding: 4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-spinner { animation-duration: 2s; }
}

/* ------------------------------------------------- guest-trial exit wall --

   Rendered over the result screen rather than in place of it: the score is
   still on screen, dimmed, behind the card. Same fixed-scrim-plus-centred-card
   shape as .roster-sheet-overlay in game.css, kept here instead because this
   wall belongs to the gate, not to a fight. z-index sits above .fight-overlay
   (1150 in game.css) and below the gate itself (1400) - this can only ever be
   reached from a result screen, and the gate coming up on top of it is exactly
   correct if a session happens to resolve while it is showing. */
.trial-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: rgba(10, 6, 3, 0.72);
}
.trial-complete-overlay[hidden] { display: none; }

.trial-complete-card {
  margin: auto;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.trial-complete-card:focus { outline: none; }
.trial-complete-card .auth-submit { width: 100%; }

/* .auth-input is translucent by design on the gate, where it sits on an opaque
   card over a blurred background. This dialog floats over the live page, so at
   45% white the masthead reads straight through an empty field — the wordmark
   showed up inside the box looking like prefilled text. Opaque here only; the
   gate's own inputs are untouched. */
#deleteAccountInput { background: #fbf6ea; }

/* The two-stage dialog swaps parts of itself in and out with the `hidden`
   attribute, and `hidden` is only a UA `display:none` — any explicit `display`
   in this stylesheet silently beats it. `.auth-field` sets `display:block` and
   `.auth-links` sets `display:flex`, so without these the "last chance" stage
   would render on top of the stage it is supposed to replace. */
#deleteAccountField[hidden],
#deleteAccountNote[hidden],
#deleteAccountSureText[hidden],
#deleteAccountBackBtn[hidden] { display: none; }

/* Same shape as .primary-btn (game.css), recoloured to --blaze so the one
   irreversible action on this card reads as different from every other
   button in the auth flow rather than blending in with Create account /
   Sign in. Disabled (the typed confirmation has not matched yet) fades it
   rather than hiding it, so the requirement is visible, not a surprise. */
.account-delete-confirm {
  font-family: var(--font-stamp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  padding: 13px 18px;
  width: 100%;
  margin-top: 6px;
  border-radius: 4px;
  border: 2px solid var(--blaze);
  background: var(--blaze);
  color: var(--parchment);
  cursor: pointer;
}
.account-delete-confirm:hover:not([disabled]) { background: var(--blaze-dark); border-color: var(--blaze-dark); }
.account-delete-confirm:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }
.account-delete-confirm[disabled] { opacity: 0.45; cursor: not-allowed; }
/* No dismiss control on this one — see the comment on showTrialCompleteOverlay
   in auth.js — so the link row only ever holds the one secondary action and
   reads best centred rather than left-aligned like the gate's own screens. */
.trial-complete-card .auth-links { justify-content: center; margin-top: 10px; }

/* ---------------------------------------------------- new-user hero (top CTAs)
 * Shown only on the sign-in view for visitors who have never started the
 * trial. Two prominent buttons sit above the sign-in form; the form itself is
 * demoted into a labelled fold below so that Play and Create an account are
 * the obvious primary paths for a first-time player.
 */
.auth-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
}
.auth-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-hero-btn {
  font-family: var(--font-stamp);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 15px;
  padding: 16px 18px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
/* Filled amber primary — the mock's hero CTA. Gold pops on the dark
   panel card and reads as the obvious primary action on the whole
   page. Border and background stay in one accent family so the shape
   still matches .primary-btn structurally, only the fill changed.
   Text is --cabinet, not --parchment: --parchment is light (correct for the
   dark --drawer card) but amber is itself a light fill, so it needs the
   dark token instead (9.3:1 vs. 1.6:1). */
.auth-hero-play {
  border: 2px solid var(--brass-bright);
  background: var(--brass-bright);
  color: var(--cabinet);
}
.auth-hero-play:hover {
  transform: translateY(-1px);
  background: #d99400;
  border-color: #d99400;
}
.auth-hero-play:focus-visible { outline: 2px solid var(--blaze); outline-offset: 2px; }
/* Outlined secondary that still reads as a real button, not a link. Stamped
   accent border so it does not disappear against the card.
   -light text, and chalk (not --drawer) on hover's solid fill: both were
   tuned for a light-manila card where --blaze-dark/--drawer worked as text -
   on the current dark --drawer neither does (1.2:1 / 2.1:1). */
.auth-hero-signup {
  border: 2px solid var(--blaze);
  background: transparent;
  color: var(--blaze-bright);
}
.auth-hero-signup:hover {
  background: var(--blaze);
  color: var(--parchment);
  transform: translateY(-1px);
}
.auth-hero-signup:focus-visible { outline: 2px solid var(--blaze); outline-offset: 2px; }
.auth-hero-note {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--parchment-dim);
}

/* The sign-in form when demoted under the hero. A soft top rule and a small
   stamp-voice label make the alternative explicit without competing with the
   primary CTAs above. */
.auth-signin-fold {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed rgba(243, 236, 224, 0.5);  /* contrast pass: alpha bumped for ≥3:1 border */
}
.auth-signin-rule {
  display: flex;
  justify-content: center;
  margin: -22px 0 10px;
}
.auth-signin-rule span {
  padding: 0 10px;
  background: var(--drawer);
  font-family: var(--font-stamp);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}