/* ===========================================================================
   PlayBy1st — pastel AAA arcade theme
   Safe to load on every page: only :root tokens + opt-in .pb-* classes.
   Does NOT override a game's own element styles, so it can't break layouts.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* base / plum */
  --pb-plum-900:#190f2c; --pb-plum-800:#221540; --pb-plum-700:#2c1d52;
  --pb-panel:#2a1c46; --pb-panel-2:#33235a;
  /* pastel accents */
  --pb-coral:#ff7a9c; --pb-coral-hi:#ff9db4; --pb-coral-lo:#f4628a;
  --pb-lav:#b98cff;   --pb-lav-hi:#cda9ff;   --pb-lav-lo:#9a6bf0;
  --pb-mint:#7fe0c8;  --pb-mint-hi:#9ff0db;  --pb-mint-lo:#5fd0b6;
  --pb-gold:#ffc46b;  --pb-blue:#8fb8ff;
  /* ink */
  --pb-ink:#f6eeff; --pb-ink-dim:#c9bfe6; --pb-ink-soft:#a99fc4;
  --pb-line:rgba(255,255,255,.12);
  /* depth — soft, low aggression */
  --pb-shadow:0 16px 40px rgba(18,9,38,.45);
  --pb-shadow-sm:0 8px 20px rgba(18,9,38,.35);
  --pb-radius:16px; --pb-radius-lg:22px; --pb-pill:999px;
  /* type */
  --pb-display:"Fredoka",system-ui,-apple-system,sans-serif;
  --pb-ui:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}

/* ---- candy button system (recreated from the style sheet, real CSS) ---- */
.pb-btn{
  font-family:var(--pb-ui); font-weight:700; font-size:15px; line-height:1;
  border:0; border-radius:var(--pb-pill); padding:13px 22px; color:#fff;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,var(--pb-coral-hi),var(--pb-coral-lo));
  box-shadow:0 6px 0 rgba(126,40,72,.45), 0 12px 22px rgba(18,9,38,.35), inset 0 1.5px 0 rgba(255,255,255,.55);
  transition:transform .12s ease, filter .15s ease, box-shadow .12s ease;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.pb-btn:hover{filter:brightness(1.06) saturate(1.03)}
.pb-btn:active{transform:translateY(4px);
  box-shadow:0 2px 0 rgba(126,40,72,.45), 0 5px 12px rgba(18,9,38,.3), inset 0 1.5px 0 rgba(255,255,255,.5)}
.pb-btn:focus-visible{outline:3px solid var(--pb-lav-hi); outline-offset:2px}
.pb-btn--secondary{background:linear-gradient(180deg,var(--pb-lav-hi),var(--pb-lav-lo));
  box-shadow:0 6px 0 rgba(78,42,128,.5),0 12px 22px rgba(18,9,38,.35),inset 0 1.5px 0 rgba(255,255,255,.5)}
.pb-btn--secondary:active{box-shadow:0 2px 0 rgba(78,42,128,.5),0 5px 12px rgba(18,9,38,.3),inset 0 1.5px 0 rgba(255,255,255,.45)}
.pb-btn--mint{background:linear-gradient(180deg,var(--pb-mint-hi),var(--pb-mint-lo)); color:#0e3a31;
  box-shadow:0 6px 0 rgba(34,110,94,.5),0 12px 22px rgba(18,9,38,.3),inset 0 1.5px 0 rgba(255,255,255,.6)}
.pb-btn--gold{background:linear-gradient(180deg,#ffd596,var(--pb-gold)); color:#5c3a07;
  box-shadow:0 6px 0 rgba(150,96,20,.5),0 12px 22px rgba(18,9,38,.3),inset 0 1.5px 0 rgba(255,255,255,.6)}
.pb-btn--ghost{background:rgba(255,255,255,.07); color:var(--pb-ink);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24), 0 6px 16px rgba(18,9,38,.25)}
.pb-btn--ghost:hover{background:rgba(255,255,255,.12); filter:none}
.pb-btn--ghost:active{transform:translateY(2px); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}
.pb-btn--lg{font-size:17px; padding:16px 30px}
.pb-btn--sm{font-size:13px; padding:9px 15px;
  box-shadow:0 4px 0 rgba(126,40,72,.4),0 8px 16px rgba(18,9,38,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.pb-btn--block{display:flex; width:100%}
.pb-btn[disabled]{filter:grayscale(.5) brightness(.8); cursor:not-allowed; transform:none}

/* pill / tab */
.pb-pill{font-family:var(--pb-ui);font-weight:600;font-size:13px;border:0;border-radius:var(--pb-pill);
  padding:8px 14px;color:var(--pb-ink-dim);background:rgba(255,255,255,.06);cursor:pointer;transition:all .15s ease}
.pb-pill[aria-selected="true"],.pb-pill.is-on{color:#fff;background:linear-gradient(180deg,var(--pb-lav-hi),var(--pb-lav-lo))}

/* surfaces */
.pb-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--pb-line);border-radius:var(--pb-radius-lg);box-shadow:var(--pb-shadow-sm)}

/* type helpers (opt-in) */
.pb-display{font-family:var(--pb-display);font-weight:700;letter-spacing:.005em}
.pb-ui{font-family:var(--pb-ui)}