/* neil-button pill (2026-10-15) */
/* neil-button.css - the 9-detail pill button. Add class "nb" to a <a>/<button>.
   Markup: <a class="nb" href="#">Continue <span class="nb-arrow" aria-hidden="true">&rarr;</span></a>
   Variants: nb--ghost (secondary). Tokens below override per site. */
:root{
  --nb-ink:#0b0b0d; --nb-paper:#f4f4f1; --nb-signal:#ff3b30; --nb-glow:rgba(255,255,255,.28);
  --nb-font:inherit;
}
.nb{
  --mx:50%; --my:50%;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  min-height:44px; padding:0 1.4em; border:1px solid transparent; border-radius:999px;
  font:600 1rem/1 var(--nb-font); letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  background:var(--nb-paper); color:var(--nb-ink); overflow:hidden; isolation:isolate;
  transform:translate(var(--tx,0px),var(--ty,0px));
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.nb::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--nb-signal);flex:none}
.nb::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
  background:radial-gradient(120px circle at var(--mx) var(--my),var(--nb-glow),transparent 70%)}
.nb-arrow{display:inline-block;transition:transform 350ms cubic-bezier(.2,.8,.2,1)}
.nb--ghost{background:transparent;color:var(--nb-paper);border-color:rgba(255,255,255,.22)}
.nb:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.nb:focus-visible{outline:2px solid var(--nb-signal);outline-offset:3px}
.nb[disabled],.nb[aria-busy="true"]{opacity:.6;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .nb:hover::after{opacity:1}
  .nb:hover .nb-arrow{transform:rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){
  .nb,.nb-arrow,.nb::after{transition:none}
  .nb:hover .nb-arrow{transform:none}
}

:root{--nb-ink:#f6f8fc;--nb-paper:#141b27;--nb-signal:#3aa0ff;--nb-glow:rgba(255,255,255,.2);--nb-font:var(--sans,'Urbanist',system-ui,sans-serif)}
.nb--ghost::before{display:none}
/* yourworld: three themes (light/dark/midnight). Light = near-black fill + white text; dark themes + studio chrome invert to near-white. Signal dot = the site's blue (never red: red here means danger). */
body[data-theme="dark"],body[data-theme="midnight"],body.in-studio,.studio-topright{--nb-paper:#eef3ff;--nb-ink:#0a0e18;--nb-signal:#0a84ff;--nb-glow:rgba(10,132,255,.32)}
body.in-studio:not([data-theme="dark"]):not([data-theme="midnight"]) .modal{--nb-paper:#141b27;--nb-ink:#f6f8fc;--nb-signal:#3aa0ff;--nb-glow:rgba(255,255,255,.2)}
.build-game-btn.nb,.build-send.nb,.tool.nb,.gen-btn.nb,.ghost-btn.nb{background:var(--nb-paper);color:var(--nb-ink);border:1px solid transparent;border-radius:999px;box-shadow:none;
  font:700 14px/1 var(--nb-font);padding:0 1.4em;min-height:44px;gap:.6em;justify-content:center;white-space:nowrap}
.build-game-btn.nb:hover,.build-send.nb:hover,.tool.nb:hover,.gen-btn.nb:hover,.ghost-btn.nb:hover{background:var(--nb-paper);color:var(--nb-ink);box-shadow:none;transform:translate(var(--tx,0px),var(--ty,0px))}
.build-game-btn.nb:active,.build-send.nb:active,.tool.nb:active,.gen-btn.nb:active,.ghost-btn.nb:active{transform:translate(var(--tx,0px),var(--ty,0px)) scale(.97)}
.nb.nb--ghost,.ghost-btn.nb.nb--ghost,.tool.nb.nb--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.nb.nb--ghost:hover,.ghost-btn.nb.nb--ghost:hover,.tool.nb.nb--ghost:hover{background:rgba(127,127,127,.1);color:var(--ink)}
.studio-topright .nb.nb--ghost{color:var(--nb-paper);border-color:rgba(255,255,255,.28)}
.studio-topright .nb.nb--ghost:hover{color:var(--nb-paper)}
.build-game-btn.nb:disabled,.build-send.nb:disabled,.tool.nb:disabled,.gen-btn.nb:disabled,.ghost-btn.nb:disabled{opacity:.6;cursor:not-allowed}
.build-send.nb.full,.gen-btn.nb.full{width:100%}
@media(max-width:560px){.build-game-btn.nb{padding:0 .9em;font-size:13px;gap:.4em}.build-game-btn.nb::before{display:none}}