/* ═══════════════════════════════════════════════════════════════════════════
 * style.css — the play page and the auth forms.
 *
 * Everything is scoped under .enp / .enp-*, so this cannot collide with the
 * host site's stylesheet whichever of the eleven it is dropped onto. The
 * colours come from custom properties that config/config.php sets inline, so
 * one file serves every domain.
 *
 * Written in logical properties where direction matters, which keeps it
 * correct if it is ever reused on one of the Persian (RTL) builds.
 * ═══════════════════════════════════════════════════════════════════════════ */

.enp {
  --enp-bg: #0c0c0e;
  --enp-panel: #17181c;
  --enp-line: #2e3038;
  --enp-accent: #00a63d;
  --enp-accent-ink: #fff;
  --enp-ink: #fff;
  --enp-ink-muted: #a7abbd;
  --enp-radius: 14px;
  --enp-wrap: 1120px;

  margin: 0;
  background: var(--enp-bg);
  color: var(--enp-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.enp *, .enp *::before, .enp *::after { box-sizing: border-box; }
.enp img { max-width: 100%; height: auto; display: block; }
.enp a { color: var(--enp-accent); }

/* Buttons are <a> elements, and the generic ".enp a" rule above has higher
   specificity than ".enp-btn--go", so without these a filled button paints its
   label in the accent colour — the same colour as its own background, leaving
   it invisible. These compound selectors (0,2,1) beat ".enp a" (0,1,1). */
.enp a.enp-btn              { color: var(--enp-ink); }
.enp a.enp-btn--go          { color: var(--enp-accent-ink); }
.enp a.enp-btn--ghost       { color: var(--enp-ink); }
.enp a.enp-pcard__btn--site { color: var(--card-accent-ink, var(--enp-accent-ink)); }
.enp a.enp-pcard__btn--app  { color: var(--card-accent, var(--enp-accent)); }

/* Parked above the viewport rather than off to the side: a large negative
   inline offset widens the page in one of the two directions. */
.enp-skip {
  position: absolute; inset-inline-start: 12px; top: -64px; z-index: 100;
  background: var(--enp-accent); color: var(--enp-accent-ink);
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  text-decoration: none; font-weight: 700; transition: top .15s ease;
}
.enp-skip:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .enp-skip { transition: none; } }

.enp :focus-visible { outline: 2px solid var(--enp-accent); outline-offset: 2px; }

/* ── header ──────────────────────────────────────────────────────────────── */
.enp-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: var(--enp-wrap); margin-inline: auto;
  padding: 14px 16px;
  border-block-end: 1px solid var(--enp-line);
}
.enp-brand {
  font-weight: 800; font-size: 19px; color: var(--enp-ink);
  text-decoration: none; margin-inline-end: auto;
}
.enp-topnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enp-who {
  color: var(--enp-ink-muted); font-size: 13px;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.enp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--enp-line);
  background: var(--enp-panel); color: var(--enp-ink);
}
.enp-btn:hover { border-color: var(--enp-accent); text-decoration: none; }
.enp-btn--go {
  background: var(--enp-accent); border-color: var(--enp-accent);
  color: var(--enp-accent-ink);
}
.enp-btn--go:hover { filter: brightness(1.08); }
.enp-btn--ghost { background: transparent; }
.enp-btn--wide { width: 100%; padding-block: 13px; font-size: 15px; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.enp-wrap {
  max-width: var(--enp-wrap); margin-inline: auto; padding: 28px 16px 48px;
}
.enp-wrap--narrow { max-width: 480px; }

.enp-head { text-align: center; margin-block-end: 22px; }
.enp-h1 { font-size: clamp(25px, 4vw, 36px); font-weight: 800; margin: 0 0 10px; }
.enp-lead { color: var(--enp-ink-muted); margin: 0 auto; max-width: 62ch; }
.enp-signedin { color: var(--enp-ink-muted); font-size: 14px; margin-block-start: 10px; }

/* ── the "you are leaving" notice ────────────────────────────────────────── */
.enp-leaving {
  border: 1px solid var(--enp-line);
  border-inline-start: 3px solid var(--enp-accent);
  background: var(--enp-panel);
  border-radius: var(--enp-radius);
  padding: 13px 16px; margin-block-end: 22px;
  color: var(--enp-ink-muted); font-size: 14.5px;
}
.enp-leaving strong { color: var(--enp-ink); }

/* ── card grid ───────────────────────────────────────────────────────────── */
.enp-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Four across only when there is genuinely room; the auto-fit above handles
   every width between. */
@media (min-width: 1040px) { .enp-grid { grid-template-columns: repeat(4, 1fr); } }

.enp-pcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--enp-panel);
  border: 1px solid var(--enp-line);
  border-radius: var(--enp-radius);
  padding: 20px 18px;
  text-align: center;
}
.enp-pcard__logo {
  display: grid; place-items: center; min-height: 64px; margin-block-end: 2px;
}
.enp-pcard__logo img { max-height: 60px; width: auto; object-fit: contain; }
.enp-pcard__mark {
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 50%; background: var(--enp-accent); color: var(--enp-accent-ink);
  font-weight: 800; font-size: 20px;
}
.enp-pcard__name { font-size: 18px; font-weight: 800; margin: 0; }
.enp-pcard__feat {
  color: var(--enp-ink-muted); font-size: 14px; margin: 0; flex: 1 1 auto;
}
.enp-pcard__bonus {
  border-block: 1px solid var(--enp-line); padding-block: 11px; margin-block: 2px;
}
.enp-pcard__bonus-t { margin: 0; font-weight: 700; font-size: 14.5px; }
.enp-pcard__bonus-d { margin: 3px 0 0; color: var(--enp-ink-muted); font-size: 13px; }

/* Two buttons per card. The site button fills with the brand colour (set
   inline per card via --card-accent); the app button is an outline in the same
   colour, so the pair reads as one brand without two loud fills. */
.enp-pcard__actions { display: flex; flex-direction: column; gap: 8px; margin-block-start: 2px; }
.enp-pcard__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  text-decoration: none; border: 1.5px solid var(--card-accent, var(--enp-accent));
}
.enp-pcard__btn--site {
  background: var(--card-accent, var(--enp-accent));
  color: var(--card-accent-ink, var(--enp-accent-ink));
}
.enp-pcard__btn--app {
  background: transparent;
  color: var(--card-accent, var(--enp-accent));
}
/* On the near-black cards the brand colour can be dark (e.g. Bazi's purple);
   the app button keeps a readable fill tint behind its outline. */
.enp-pcard__btn--app { background: color-mix(in srgb, var(--card-accent, var(--enp-accent)) 12%, transparent); }
.enp-pcard__btn:hover { filter: brightness(1.08); text-decoration: none; }
.enp-pcard__ico { width: 16px; height: 16px; fill: currentColor; }
.enp-ext { font-size: 13px; }
.enp-pcard__host {
  margin: 0; font-size: 12.5px; color: var(--enp-ink-muted); word-break: break-all;
}
.enp-pcard__host strong { color: var(--enp-ink); font-weight: 600; }

.enp-note {
  margin-block-start: 26px; color: var(--enp-ink-muted);
  font-size: 13.5px; text-align: center; max-width: 76ch;
  margin-inline: auto;
}
.enp-back { text-align: center; margin-block-start: 18px; }

/* ── forms ───────────────────────────────────────────────────────────────── */
.enp-card--form {
  background: var(--enp-panel); border: 1px solid var(--enp-line);
  border-radius: var(--enp-radius); padding: 26px 22px;
}
.enp-card--form .enp-h1 { font-size: 24px; text-align: center; }
.enp-card--form .enp-lead { text-align: center; font-size: 15px; margin-block-end: 20px; }

.enp-form { display: grid; gap: 15px; }
.enp-field { display: grid; gap: 6px; }
.enp-field label { font-size: 14px; font-weight: 700; }
.enp-field input {
  width: 100%; font: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--enp-line);
  background: var(--enp-bg); color: var(--enp-ink);
}
.enp-field input::placeholder { color: var(--enp-ink-muted); opacity: .75; }
.enp-field input:focus { border-color: var(--enp-accent); outline: none; }
.enp-hint { margin: 0; font-size: 12.5px; color: var(--enp-ink-muted); }

.enp-pw { position: relative; display: flex; }
.enp-pw input { padding-inline-end: 74px; }
.enp-pw__toggle {
  position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%;
  border: 0; background: transparent; color: var(--enp-accent);
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 8px; cursor: pointer;
}

.enp-alert { border-radius: 10px; padding: 12px 15px; margin-block-end: 16px; font-size: 14.5px; }
.enp-alert p, .enp-alert ul { margin: 0; }
.enp-alert ul { padding-inline-start: 18px; }
.enp-alert li + li { margin-block-start: 4px; }
.enp-alert--error  { background: rgba(220, 38, 38, .12); border: 1px solid rgba(220, 38, 38, .45); }
.enp-alert--notice { background: rgba(255, 255, 255, .06); border: 1px solid var(--enp-line); }

.enp-privacy {
  margin-block-start: 22px; padding-block-start: 18px;
  border-block-start: 1px solid var(--enp-line);
  color: var(--enp-ink-muted); font-size: 13.5px;
}
.enp-privacy h2 { font-size: 14px; color: var(--enp-ink); margin: 0 0 8px; }
.enp-privacy ul { margin: 0 0 10px; padding-inline-start: 18px; }
.enp-privacy li + li { margin-block-start: 5px; }
.enp-privacy p { margin: 0; }

.enp-alt { text-align: center; margin-block-start: 18px; font-size: 14.5px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.enp-foot {
  border-block-start: 1px solid var(--enp-line);
  padding: 20px 16px 30px; text-align: center;
  color: var(--enp-ink-muted); font-size: 13.5px;
}
.enp-foot p { margin: 0 0 8px; }
.enp-foot a { color: var(--enp-ink-muted); }
.enp-foot__age { display: flex; align-items: center; justify-content: center; gap: 9px; }
.enp-age {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid currentColor; border-radius: 50%;
  font-weight: 800; font-size: 12px; flex: 0 0 auto;
}

/* ── admin ───────────────────────────────────────────────────────────────── */
.enp-tablewrap {
  overflow-x: auto; border: 1px solid var(--enp-line);
  border-radius: var(--enp-radius); background: var(--enp-panel);
}
.enp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 740px; }
.enp-table th, .enp-table td {
  padding: 11px 13px; text-align: start;
  border-block-end: 1px solid var(--enp-line); white-space: nowrap;
}
.enp-table th { background: rgba(255, 255, 255, .04); font-size: 12.5px; }
.enp-table tbody tr:last-child td { border-block-end: 0; }
.enp-adminbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-block-end: 16px;
}
.enp-adminbar form { display: flex; gap: 8px; flex: 1 1 260px; }
.enp-adminbar input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--enp-line); background: var(--enp-bg); color: var(--enp-ink);
}
.enp-count { color: var(--enp-ink-muted); font-size: 13.5px; }
.enp-pager { display: flex; gap: 8px; justify-content: center; margin-block-start: 18px; }