/* The simple front door. Paired with entry-simple.js, which sets data-simple.
 *
 * Closed (the default a new player meets): the hero art becomes the whole screen, the
 * wordmark sits in the middle, and there is exactly one gold action — play. The account
 * machinery folds behind a single quiet button. Nothing scrolls at any size.
 *
 * Open: the original panel comes back for the people who actually want an account.
 *
 * Only `#account-entry[data-simple]` is targeted, so the code-backup and account-settings
 * screens (which have no #entry-guest, so the script clears the attribute) are untouched.
 */

/* ------------------------------------------------------------------ shared frame */

#account-entry[data-simple] {
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* the no-scroll guarantee */
}

#account-entry[data-simple] #entry-nav { flex: 0 0 auto; }

/* No site chrome on the front door.
 *
 * Play / Deck builder / Ranked arena / Leaderboard cannot go anywhere from here anyway:
 * `account-pending` hides the rest of the page, so the links were decoration that read
 * as options. Closed, the bar goes entirely — the hero already carries the wordmark, and
 * a second copy of it above the first is just noise. Open, the bar stays for identity
 * (the hero is hidden at phone landscape) but loses the menu and the account button.
 *
 * Hidden, never detached: account-entry.js:24 restores #site-nav to the lobby with
 * `navParent.insertBefore(navigation, navNext)`, and site-nav.js's account button is the
 * only route back to SiteAccount.open() once the gate closes. Both must survive.
 */
#account-entry[data-simple="closed"] #entry-nav { display: none; }

#account-entry[data-simple="open"] #site-nav nav,
#account-entry[data-simple="open"] #site-nav .site-account,
#account-entry[data-simple="open"] #site-nav .site-format { display: none; }

#account-entry[data-simple] .entry-layout {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------- closed: one screen */

/* Hero and panel occupy the same cell: art behind, actions in front. */
#account-entry[data-simple="closed"] .entry-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'stack';
}

#account-entry[data-simple="closed"] .entry-hero,
#account-entry[data-simple="closed"] .entry-panel {
  grid-area: stack;
  min-height: 0;
  min-width: 0;
}

#account-entry[data-simple="closed"] .entry-hero {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

/* The wordmark and its one line, centred and lifted clear of the buttons. */
#account-entry[data-simple="closed"] .entry-hero-copy {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 16vh;
  text-shadow: 0 2px 18px #000b;
}

#account-entry[data-simple="closed"] .entry-eyebrow,
#account-entry[data-simple="closed"] .entry-tags,
#account-entry[data-simple="closed"] .entry-art-caption,
#account-entry[data-simple="closed"] #entry-panel-title,
#account-entry[data-simple="closed"] .entry-intro,
#account-entry[data-simple="closed"] .entry-create,
#account-entry[data-simple="closed"] #entry-login,
#account-entry[data-simple="closed"] .entry-warning,
#account-entry[data-simple="closed"] .entry-guest p {
  display: none;
}

#account-entry[data-simple="closed"] h1 { margin: 0 0 10px; }

#account-entry[data-simple="closed"] .entry-hero-description {
  margin: 0 auto;
  max-width: 34ch;
  font-size: clamp(14px, 1.6vw, 19px);
  color: #d8e6ea;
}

/* The panel loses its card and becomes a column of actions at the foot of the art. */
/* .entry-hero is position:relative (account-entry.css:9), so it paints in the
   positioned layer and covered the static panel stacked beneath it. */
#account-entry[data-simple="closed"] .entry-panel {
  position: relative;
  z-index: 1;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px clamp(18px, 6vh, 48px);
  pointer-events: none;          /* only the controls themselves take clicks */
}

#account-entry[data-simple="closed"] #entry-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  pointer-events: auto;
}

#account-entry[data-simple="closed"] .entry-guest {
  border-top: 0;
  margin: 0;
  padding: 0;
  width: min(420px, 100%);
}

/* The one action on the screen. */
#account-entry[data-simple="closed"] #entry-guest {
  width: 100%;
  min-height: 54px;
  background: linear-gradient(115deg, #f0d193, #cfa356);
  border-color: #e8c98e;
  color: #2a1f0b;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 26px #0006;
}

#account-entry[data-simple="closed"] #entry-guest:hover:not(:disabled) { background: #f7dfaf; }

/* Quiet, but a real 44px target — this is the only route to an account. */
#account-entry[data-simple] .entry-more {
  pointer-events: auto;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #cfe0e6;
  font: 600 clamp(13px, 1.4vw, 15px)/1.3 EntryBody, 'Segoe UI', sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

#account-entry[data-simple] .entry-more:hover { color: #fff; }

#account-entry[data-simple="closed"] #entry-status {
  pointer-events: auto;
  margin: 0;
  text-align: center;
}

/* ------------------------------------------------------------- open: the full panel */

/* Back to two columns, and the panel scrolls on its own rather than the page. */
#account-entry[data-simple="open"] .entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 0;
}

#account-entry[data-simple="open"] .entry-hero { min-height: 0; }
#account-entry[data-simple="open"] .entry-panel { overflow: auto; min-height: 0; }
#account-entry[data-simple="open"] .entry-guest { order: 1; border-top: 0; }
#account-entry[data-simple="open"] #entry-login { order: 2; }
#account-entry[data-simple="open"] #entry-content { display: flex; flex-direction: column; }
#account-entry[data-simple="open"] .entry-more { align-self: flex-start; padding-left: 0; }

/* Landscape phone: the art has no room to breathe, so tighten the middle. */
@media (orientation: landscape) and (max-height: 540px) {
  #account-entry[data-simple="closed"] .entry-hero-copy { margin-bottom: 12vh; }
  #account-entry[data-simple="closed"] #entry-guest { min-height: 48px; }
  #account-entry[data-simple="open"] .entry-hero { display: none; }
  #account-entry[data-simple="open"] .entry-layout { grid-template-columns: 1fr; }
}