/* ─────────────────────────────────────────────────────────────────────────
   LegendCreate — Founding Developer demo
   Loaded only on the page carrying [lgd_developer_demo]. Reuses the site's
   own tokens from public.css (--lgd-cyan, --lgd-panel, …) so the demo cannot
   drift away from the brand: change the palette once and this follows.
   ───────────────────────────────────────────────────────────────────────── */
.lgd-demo{
  --d-gap:22px;
  --d-radius:16px;
  --d-line:1px solid var(--lgd-border,rgba(255,255,255,.12));
  color:var(--lgd-text,#f6f8fc);
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:var(--d-gap);
  align-items:start;
  margin:0 0 48px;
}
.lgd-demo *{box-sizing:border-box}
.lgd-demo__noscript{padding:28px;border:var(--d-line);border-radius:var(--d-radius);background:var(--lgd-panel,#101c2d)}

/* ── Badges. Every fabricated number on screen carries one of these. The demo
      is shown to a developer deciding whether to trust us with his game, so
      "which of these numbers is real" must never require a guess. */
.lgd-dbadge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:999px;line-height:1.2;
  white-space:nowrap;vertical-align:middle}
.lgd-dbadge--data{background:rgba(255,117,151,.16);color:#ff9db4;border:1px solid rgba(255,117,151,.4)}
.lgd-dbadge--mode{background:rgba(168,117,255,.18);color:#c9a9ff;border:1px solid rgba(168,117,255,.45)}
.lgd-dbadge--profile{background:rgba(78,229,168,.14);color:#7ff0c4;border:1px solid rgba(78,229,168,.38)}
.lgd-dbadge--pilot{background:rgba(255,196,84,.16);color:#ffd489;border:1px solid rgba(255,196,84,.4)}

/* ── Sidebar */
.lgd-demo__side{position:sticky;top:16px;background:var(--lgd-panel,#101c2d);border:var(--d-line);
  border-radius:var(--d-radius);padding:16px;display:flex;flex-direction:column;gap:4px}
.lgd-demo__brand{font-weight:900;font-size:1rem;letter-spacing:.02em;margin:2px 4px 12px;
  display:flex;flex-direction:column;gap:6px}
.lgd-demo__brand small{font-weight:600;color:var(--lgd-muted,#a9b7ca);font-size:.76rem;letter-spacing:.04em}
.lgd-demo__nav{display:flex;flex-direction:column;gap:2px}
.lgd-demo__nav button{all:unset;cursor:pointer;display:block;padding:10px 12px;border-radius:10px;
  font-size:.9rem;font-weight:600;color:var(--lgd-muted,#a9b7ca);min-height:44px;line-height:1.3;
  transition:background .15s,color .15s}
.lgd-demo__nav button:hover{background:rgba(255,255,255,.05);color:var(--lgd-text,#f6f8fc)}
.lgd-demo__nav button:focus-visible{outline:2px solid var(--lgd-cyan,#31d7ff);outline-offset:2px}
.lgd-demo__nav button[aria-current=page]{background:rgba(49,215,255,.14);color:var(--lgd-cyan,#31d7ff)}
.lgd-demo__sidefoot{margin-top:12px;padding-top:12px;border-top:var(--d-line);display:flex;
  flex-direction:column;gap:8px}

/* ── Main column */
.lgd-demo__main{min-width:0}
.lgd-demo__head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin:0 0 6px}
.lgd-demo__head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;line-height:1.1}
.lgd-demo__sub{color:var(--lgd-muted,#a9b7ca);margin:0 0 20px;max-width:74ch;line-height:1.55}

.lgd-dcard{background:linear-gradient(180deg,var(--lgd-panel-2,#16263c),var(--lgd-panel,#101c2d));
  border:var(--d-line);border-radius:var(--d-radius);padding:20px}
.lgd-dcard+.lgd-dcard{margin-top:16px}
.lgd-dcard h3{margin:0 0 4px;font-size:1.05rem}
.lgd-dcard h4{margin:0 0 10px;font-size:.95rem;color:var(--lgd-muted,#a9b7ca);
  text-transform:uppercase;letter-spacing:.07em;font-size:.76rem}
.lgd-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lgd-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* ── Definition rows (game facts) */
.lgd-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:.92rem}
.lgd-dl dt{color:var(--lgd-muted,#a9b7ca)}
.lgd-dl dd{margin:0;font-weight:600}

/* ── Action tiles on the dashboard */
.lgd-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:4px}
.lgd-action{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:18px;
  border-radius:14px;border:var(--d-line);background:rgba(255,255,255,.04);min-height:44px;
  transition:transform .15s,border-color .15s,background .15s}
.lgd-action:hover{transform:translateY(-2px);border-color:rgba(49,215,255,.5);background:rgba(49,215,255,.07)}
.lgd-action:focus-visible{outline:2px solid var(--lgd-cyan,#31d7ff);outline-offset:2px}
.lgd-action b{font-size:1rem}
.lgd-action span{color:var(--lgd-muted,#a9b7ca);font-size:.86rem;line-height:1.45}

/* ── Selectable chips (focus areas, genres, options) */
.lgd-dchips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 4px}
.lgd-dchip{all:unset;cursor:pointer;padding:9px 15px;border-radius:999px;border:var(--d-line);
  background:rgba(255,255,255,.04);font-size:.88rem;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;transition:background .15s,border-color .15s,color .15s}
.lgd-dchip:hover{border-color:rgba(49,215,255,.5)}
.lgd-dchip:focus-visible{outline:2px solid var(--lgd-cyan,#31d7ff);outline-offset:2px}
.lgd-dchip[aria-pressed=true]{background:rgba(49,215,255,.16);border-color:var(--lgd-cyan,#31d7ff);
  color:var(--lgd-cyan,#31d7ff)}
.lgd-dchip[aria-pressed=true]::before{content:"✓ ";font-weight:900}

/* ── Form controls */
.lgd-demo label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lgd-muted,#a9b7ca);margin:0 0 8px;font-weight:700}
.lgd-demo textarea,.lgd-demo input[type=text],.lgd-demo select{width:100%;background:var(--lgd-bg,#07111f);
  color:var(--lgd-text,#f6f8fc);border:var(--d-line);border-radius:10px;padding:12px;font:inherit;
  font-size:.95rem;min-height:44px}
.lgd-demo textarea{min-height:96px;resize:vertical;line-height:1.5}
.lgd-demo textarea:focus,.lgd-demo input:focus,.lgd-demo select:focus{outline:0;
  border-color:var(--lgd-cyan,#31d7ff);box-shadow:0 0 0 2px rgba(49,215,255,.25)}
.lgd-field{margin:0 0 18px}
.lgd-field:last-child{margin-bottom:0}

.lgd-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 20px;border-radius:11px;font-weight:800;font-size:.94rem;min-height:44px;
  background:linear-gradient(135deg,var(--lgd-cyan,#31d7ff),var(--lgd-purple,#a875ff));
  color:var(--lgd-bg,#07111f);text-align:center}
.lgd-btn:hover{filter:brightness(1.08)}
.lgd-btn:focus-visible{outline:2px solid var(--lgd-cyan,#31d7ff);outline-offset:3px}
.lgd-btn--ghost{background:transparent;border:var(--d-line);color:var(--lgd-text,#f6f8fc)}
.lgd-btn--ghost:hover{border-color:var(--lgd-cyan,#31d7ff);filter:none}
.lgd-btn[disabled]{opacity:.5;cursor:not-allowed}
.lgd-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* ── Mission brief */
.lgd-brief{border:1px solid rgba(49,215,255,.35);background:rgba(49,215,255,.06);
  border-radius:14px;padding:18px;margin-top:16px}
.lgd-brief h4{color:var(--lgd-cyan,#31d7ff)}
.lgd-brief ul{margin:8px 0 0;padding-left:20px;line-height:1.7}
.lgd-brief li::marker{color:var(--lgd-cyan,#31d7ff)}

/* ── Stat tiles + bars */
.lgd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lgd-stat{background:rgba(255,255,255,.04);border:var(--d-line);border-radius:14px;padding:16px}
.lgd-stat b{display:block;font-size:1.8rem;line-height:1.1;color:var(--lgd-cyan,#31d7ff);font-weight:900}
.lgd-stat span{display:block;margin-top:4px;font-size:.82rem;color:var(--lgd-muted,#a9b7ca)}
.lgd-dbar{margin:14px 0 0}
.lgd-dbar__top{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:6px}
.lgd-dbar__track{height:9px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.lgd-dbar__fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--lgd-cyan,#31d7ff),var(--lgd-purple,#a875ff))}

/* ── Findings / comparison */
.lgd-finding{border-left:3px solid var(--lgd-cyan,#31d7ff);padding:2px 0 2px 14px;margin:0 0 14px}
.lgd-finding b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--lgd-muted,#a9b7ca);margin-bottom:3px}
.lgd-vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:stretch}
.lgd-vs__col{border-radius:14px;padding:18px;border:var(--d-line);display:flex;flex-direction:column;gap:10px}
.lgd-vs__col--bad{background:rgba(255,117,151,.06);border-color:rgba(255,117,151,.3)}
.lgd-vs__col--good{background:rgba(78,229,168,.06);border-color:rgba(78,229,168,.32)}
.lgd-vs__col h4{margin:0}
.lgd-vs__quote{font-size:1rem;line-height:1.6;margin:0}
.lgd-vs__caption{text-align:center;color:var(--lgd-muted,#a9b7ca);margin:14px 0 0;font-style:italic}

/* ── Ladder / academy / passport */
.lgd-step{display:flex;gap:14px;padding:14px 0;border-bottom:var(--d-line)}
.lgd-step:last-child{border-bottom:0}
.lgd-step__n{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;background:rgba(49,215,255,.14);color:var(--lgd-cyan,#31d7ff);border:1px solid rgba(49,215,255,.3)}
.lgd-step b{display:block;margin-bottom:2px}
.lgd-step p{margin:0;color:var(--lgd-muted,#a9b7ca);font-size:.92rem;line-height:1.5}
.lgd-modlist{list-style:none;margin:0;padding:0}
.lgd-modlist li{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:var(--d-line);font-size:.94rem}
.lgd-modlist li:last-child{border-bottom:0}
.lgd-tick{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;
  font-weight:900;border:1px solid rgba(255,255,255,.2);color:var(--lgd-muted,#a9b7ca)}
.lgd-tick--done{background:rgba(78,229,168,.18);border-color:rgba(78,229,168,.45);color:#7ff0c4}
.lgd-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lgd-pills li{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.05);
  border:var(--d-line);font-size:.86rem}

/* ── Star rating */
.lgd-stars{display:inline-flex;gap:4px}
.lgd-star{all:unset;cursor:pointer;font-size:1.35rem;line-height:1;color:rgba(255,255,255,.25);
  min-width:34px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lgd-star:focus-visible{outline:2px solid var(--lgd-cyan,#31d7ff);outline-offset:2px;border-radius:6px}
.lgd-star[aria-checked=true],.lgd-star.is-on{color:#ffd166}

/* ── Notices */
.lgd-note{border:var(--d-line);border-left:3px solid var(--lgd-purple,#a875ff);
  background:rgba(168,117,255,.07);border-radius:10px;padding:12px 14px;margin:14px 0 0;
  font-size:.88rem;color:var(--lgd-muted,#a9b7ca);line-height:1.55}
.lgd-note strong{color:var(--lgd-text,#f6f8fc)}
.lgd-ok{border-left-color:var(--lgd-green,#4ee5a8);background:rgba(78,229,168,.07)}

/* ── AI panel */
.lgd-ai__answer{margin-top:16px;border:1px solid rgba(168,117,255,.35);background:rgba(168,117,255,.07);
  border-radius:14px;padding:18px}
.lgd-ai__answer p{margin:8px 0 0;line-height:1.65}

/* ── Presentation mode. Hides the site's own chrome so a screen share shows only
      the walkthrough, and steps through the six-stage story. */
body.lgd-present #masthead,body.lgd-present .site-header,body.lgd-present #colophon,
body.lgd-present .site-footer,body.lgd-present .prefooter,body.lgd-present #wpadminbar,
body.lgd-present .lgd-demo__side{display:none!important}
body.lgd-present .lgd-demo{grid-template-columns:minmax(0,1fr)}
body.lgd-present #content.page-section{padding-top:18px!important}
body.lgd-present .entry-header,body.lgd-present .entry-title{display:none!important}
.lgd-present-bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;justify-content:space-between;padding:12px 16px;margin:0 0 18px;
  border:var(--d-line);border-radius:14px;background:rgba(7,17,31,.92);
  backdrop-filter:blur(8px)}
.lgd-present-bar__step{font-weight:800;font-size:.95rem}
.lgd-present-bar__step small{display:block;font-weight:600;color:var(--lgd-muted,#a9b7ca);
  font-size:.76rem;letter-spacing:.05em;text-transform:uppercase}
.lgd-present-bar__dots{display:flex;gap:6px}
.lgd-present-bar__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.lgd-present-bar__dots i.is-on{background:var(--lgd-cyan,#31d7ff)}

/* ── Mobile. The developer dashboard is desktop-first by nature, but the tester
      surfaces — mission, academy, passport, feedback form — are where a tester
      actually is, and that is a phone. */
@media(max-width:900px){
  .lgd-demo{grid-template-columns:minmax(0,1fr)}
  .lgd-demo__side{position:static}
  .lgd-demo__nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .lgd-demo__nav button{white-space:nowrap;flex:0 0 auto}
  .lgd-demo__sidefoot{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:560px){
  .lgd-dcard{padding:16px}
  .lgd-stat b{font-size:1.5rem}
  .lgd-demo__head h2{font-size:1.4rem}
  .lgd-btnrow .lgd-btn{width:100%}
}

/* ── The real playtest block ──────────────────────────────────────────────────
   Everything else on the demo page is invented and badged DEMO DATA in pink.
   This block is the exception, so it is deliberately the ONLY green-bordered
   card on the page: the visual difference is the honesty claim, and it has to
   survive someone skim-reading the page over a video call. */
.lgd-dbadge--real{background:rgba(78,229,168,.16);color:#7ff0c4;
	border:1px solid rgba(78,229,168,.55)}
.lgd-dreal .lgd-dcard{border-color:rgba(78,229,168,.45);
	box-shadow:0 0 0 1px rgba(78,229,168,.12) inset}
.lgd-dreal__meta{color:var(--lgd-muted,#a9b7ca);font-size:.9rem;margin:0 0 18px}
.lgd-dreal__answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:0 24px;margin:0 0 6px}
.lgd-dreal__findings{margin-top:8px}
/* Severity reads left-to-right off the rule colour; the label still says it in words,
   so this is reinforcement and never the only signal. */
.lgd-finding--high{border-left-color:#ff7597}
.lgd-finding--med{border-left-color:#ffc454}
.lgd-finding--low{border-left-color:#a9b7ca}
.lgd-finding--good{border-left-color:#4ee5a8}