/* Openworld -- the Patreon members page (patreon.html, js/patreon.js), on top of legal.css.
   Mobile first: one column from 320 px, 44 px touch targets, no horizontal scroll. */
:root { --patreon: #f96854; --patreon-dk: #c9422f; --card: rgba(255, 255, 255, 0.05); }
.pat [hidden] { display: none !important; }
.pat { overflow-x: clip; }
.pat h1, .pat h2, .pat h3 { font-family: var(--display); }

/* ---- hero: the night sky over a voxel horizon ---------------------------------- */
.pat-hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(36px, 8vw, 84px) var(--gutter) clamp(56px, 9vw, 96px);
  background:
    radial-gradient(1.4px 1.4px at 12% 24%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 78% 16%, #cfe6ff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 44% 62%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 90% 58%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 28% 80%, #ffe9b0 50%, transparent 52%), radial-gradient(1.4px 1.4px at 64% 38%, #fff 50%, transparent 52%),
    radial-gradient(70% 60% at 50% 0%, rgba(249, 104, 84, 0.22), transparent 70%),
    linear-gradient(180deg, #0b1330 0%, var(--bg) 100%);
}
.pat-hero::after {   /* voxel skyline: blocky steps along the bottom */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: -1; opacity: 0.9;
  background:
    linear-gradient(var(--grass), var(--grass)) 0 100% / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, #17301f 0 40px, #1d3b26 40px 80px, #14281c 80px 120px) 0 100% / 100% 28px no-repeat;
  clip-path: polygon(0 55%, 8% 55%, 8% 30%, 16% 30%, 16% 55%, 30% 55%, 30% 15%, 38% 15%, 38% 40%, 52% 40%, 52% 25%, 60% 25%, 60% 55%, 78% 55%, 78% 20%, 86% 20%, 86% 45%, 100% 45%, 100% 100%, 0 100%);
}
.pat-hero-in { max-width: 720px; margin: 0 auto; }
.pat-hero h1 { margin: 0 0 12px; font: 800 clamp(2.1rem, 8vw, 3.6rem)/1.05 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pat-lead { margin: 0 auto 22px; max-width: 34em; font-size: clamp(1.05rem, 3.4vw, 1.25rem); color: var(--muted); }
.pat-cta { display: grid; justify-items: center; gap: 12px; }
.pat-fine { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 34em; }
.pat[data-mode="in"] .pat-cta { display: none; }
.pat[data-mode="in"] .pat-hero { padding-bottom: 56px; }
.pat[data-mode="in"] .pat-lead { display: none; }

/* ---- buttons -------------------------------------------------------------------- */
.pat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%;
  padding: 12px 24px 10px; border: 0; border-bottom: 4px solid #2f6b27; border-radius: 12px;
  background: var(--grass); color: #0d2a0f; font: 800 1.05rem var(--display); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.pat-btn:hover { filter: brightness(1.08); color: #0d2a0f; }
.pat-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.pat-btn[disabled] { opacity: 0.55; cursor: default; }
.pat-btn-patreon { background: var(--patreon); border-bottom-color: var(--patreon-dk); color: #fff; }
.pat-btn-patreon:hover { color: #fff; }
.pat-btn-lg { min-height: 58px; padding: 15px 32px 13px; font-size: clamp(1.05rem, 4.4vw, 1.3rem); width: min(100%, 420px); }
.pat-btn-alt { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-bottom: 4px solid rgba(255, 255, 255, 0.14); }
.pat-btn-alt:hover { color: var(--ink); }
.pat-pmark { width: 14px; height: 14px; flex: none; border-radius: 50%; background: #fff; box-shadow: -7px 0 0 -3px #fff; margin-left: 6px; }
.pat-btn-patreon .pat-pmark { box-shadow: none; }
.pat-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 0; }

/* ---- layout under the hero ------------------------------------------------------ */
.pat-wrap { max-width: 880px; margin: -34px auto 0; padding: 0 var(--gutter) 64px; position: relative; }
.pat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- steps ---------------------------------------------------------------------- */
.pat-steps {
  list-style: none; margin: 0 0 22px; padding: 10px; display: grid; gap: 6px; grid-template-columns: 1fr;
  border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.pat-steps li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--muted); font: 800 0.95rem/1.25 var(--display); }
.pat-num {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line);
  font: 800 0.9rem var(--display); color: var(--muted);
}
.pat-steps li[aria-current="step"] { color: var(--ink); background: rgba(249, 104, 84, 0.12); }
.pat-steps li[aria-current="step"] .pat-num { background: var(--patreon); border-color: var(--patreon); color: #fff; }
.pat-steps li.done { color: var(--ink); }
.pat-steps li.done .pat-num { background: var(--grass); border-color: var(--grass); color: #0d2a0f; font-size: 0; }
.pat-steps li.done .pat-num::before { content: "\2713"; font-size: 1rem; }
@media (min-width: 640px) {
  .pat-steps { grid-template-columns: repeat(3, 1fr); }
  .pat-steps li { flex-direction: column; text-align: center; justify-content: flex-start; padding: 10px 8px; gap: 8px; }
}

/* ---- cards and states ----------------------------------------------------------- */
.pat-view { display: grid; gap: 16px; min-height: 120px; }
.pat-card {
  margin: 0; padding: 20px clamp(16px, 4vw, 26px); border-radius: 18px; background: var(--card); border: 1px solid var(--line);
}
.pat-card h2 { margin: 0 0 8px; padding: 0; border: 0; font: 800 1.3rem/1.25 var(--display); overflow-wrap: anywhere; }
.pat-card p { margin: 0 0 12px; }
.pat-card p:last-child { margin-bottom: 0; }
.pat-card .note, .pat-card .pat-fine { color: var(--muted); font-size: 0.93rem; }
.pat-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.pat-hello { margin: 0 0 4px; color: var(--muted); font-size: 0.95rem; }
.pat-tier { font: 800 1.5rem/1.2 var(--display); overflow-wrap: anywhere; }
.pat-chip {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font: 800 0.72rem var(--display); letter-spacing: 0.08em;
  text-transform: uppercase; background: rgba(126, 217, 87, 0.16); color: var(--grass);
}
.pat-chip.warn { background: rgba(255, 204, 77, 0.16); color: var(--gold); }
.pat-chip.bad { background: rgba(255, 107, 107, 0.16); color: #ff8c8c; }
.pat-chip.off { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.pat-card.is-warn { border-left: 4px solid var(--gold); }
.pat-card.is-info { border-left: 4px solid var(--water); }

.pat-error {
  margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 107, 107, 0.35); border-left: 4px solid #ff6b6b;
  background: rgba(255, 107, 107, 0.1); overflow-wrap: anywhere;
}
.pat-error strong { display: block; margin-bottom: 2px; font: 800 1.05rem var(--display); }

/* skeleton */
.pat-skel { display: grid; gap: 12px; }
.pat-skel span {
  display: block; height: 76px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--card) 30%, rgba(255, 255, 255, 0.11) 50%, var(--card) 70%) 0 0 / 300% 100%;
  animation: pat-shimmer 1.4s linear infinite;
}
.pat-skel span:first-child { height: 110px; }
@keyframes pat-shimmer { to { background-position: -300% 0; } }

/* licence code */
.pat-card.is-code { border-color: rgba(126, 217, 87, 0.55); background: linear-gradient(160deg, rgba(126, 217, 87, 0.09), var(--card) 60%); }
.pat-code {
  margin: 14px 0; padding: 18px 12px; text-align: center; border-radius: 14px; border: 2px dashed rgba(126, 217, 87, 0.7);
  background: linear-gradient(160deg, #131d35 0%, #0a0f1c 80%); display: grid; gap: 14px; justify-items: center;
}
.pat-code output {
  display: block; max-width: 100%; font: 800 clamp(1.05rem, 5.4vw, 2rem)/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em; color: var(--ink); overflow-wrap: anywhere; user-select: all;
}
.pat-copy.is-done { background: var(--gold); border-bottom-color: #b98a1c; color: #2a1d00; }
.pat-next { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 8px; }
.pat-next li { counter-increment: n; position: relative; margin: 0; padding: 2px 0 2px 38px; min-height: 28px; }
.pat-next li::before {
  content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line); font: 800 0.85rem var(--display); color: var(--grass);
}

/* form */
.pat-form { display: grid; gap: 14px; margin: 14px 0 0; max-width: 460px; }
.pat-form label { display: grid; gap: 6px; font: 800 0.92rem var(--display); color: var(--muted); }
.pat-form input {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: 1rem var(--text);
}
.pat-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.pat-form .pat-btn { width: 100%; }
@media (min-width: 480px) { .pat-form .pat-btn { width: auto; justify-self: start; } }

/* player cards */
.pat-players { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pat-players li { margin: 0; }
.pat-players button {
  width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--bg-2); color: var(--ink); font: 800 1.1rem var(--display); cursor: pointer; text-align: start;
  overflow-wrap: anywhere; transition: border-color 0.12s, transform 0.12s;
}
.pat-players button:hover { border-color: var(--grass); }
.pat-players button:active { transform: scale(0.98); }
.pat-players button[disabled] { opacity: 0.6; cursor: default; }
.pat-players small { color: var(--muted); font: 600 0.82rem var(--text); }

/* success */
.pat-ok {
  position: relative; overflow: hidden; margin: 0; padding: 26px clamp(16px, 4vw, 28px); text-align: center; border-radius: 20px;
  border: 1px solid rgba(126, 217, 87, 0.55); background: radial-gradient(90% 120% at 50% 0%, rgba(126, 217, 87, 0.2), transparent 70%), var(--card);
}
.pat-ok-mark {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 16px; background: var(--grass); color: #0d2a0f;
  border-bottom: 5px solid #2f6b27; font: 800 2rem var(--display);
}
.pat-ok h2 { margin: 0 0 8px; padding: 0; border: 0; font: 800 1.6rem var(--display); }
.pat-ok p { margin: 0 auto 10px; max-width: 34em; }
.pat-ok .pat-row { justify-content: center; }
.pat-ok .note { color: var(--muted); font-size: 0.93rem; }
@media (prefers-reduced-motion: no-preference) { .pat-ok-mark { animation: pat-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); } }
@keyframes pat-pop { from { transform: scale(0.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pat *, .pat *::before, .pat *::after { animation: none !important; transition: none !important; }
}