/* PixelWorld — playful, parent-trustworthy pixel-art skin layered over the figurine base theme.
   Loaded AFTER style.css, so it re-tints the shared CSS variables (bright + friendly, not Roblox's
   branding/colors) and adds the avatar-lookup components. Keeps the same layout/classes. */
:root{
  --cream:#f3f6fd; --panel:#ffffff; --ink:#16204a; --ink-soft:#5a6488; --line:#dfe6f5;
  --stone:#e9eefb; --shadow:0 16px 40px rgba(30,48,110,.12);
  /* accent = bright friendly blue→violet (the "gold" hooks in the base sheet re-point here) */
  --gold:#4f6bff; --gold-soft:#7b8cff; --gold-deep:#3a52e0;
  --pw-accent:#4f6bff; --pw-accent2:#ff5aa8; --pw-lime:#22c9a3; --pw-sun:#ffb020;
  --pixel:'Press Start 2P',var(--sans);
}
body{background:
  radial-gradient(circle at 12% -10%, rgba(79,107,255,.10), transparent 42%),
  radial-gradient(circle at 92% 4%, rgba(255,90,168,.08), transparent 40%),
  var(--cream);}

/* ---- brand wordmark (blocky, no logo image, no Roblox marks) ---- */
.pw-brand{font-family:var(--pixel)!important;font-weight:400!important;font-size:15px!important;
  letter-spacing:0;color:var(--ink);display:inline-flex;align-items:center;gap:9px;line-height:1}
.foot-logo.pw-brand{font-size:14px}
.create-brand.pw-brand{font-size:12px}
.pw-logo{display:inline-block;color:var(--pw-accent);font-size:1.15em;
  text-shadow:2px 2px 0 var(--pw-accent2);transform:translateY(1px)}

/* ---- buttons: bright accent + a hard "pixel" edge on hover ---- */
.btn{background:linear-gradient(180deg,var(--pw-accent),var(--gold-deep));color:#fff;border-radius:12px;
  font-weight:700;box-shadow:0 4px 0 var(--gold-deep)}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--gold-deep),0 12px 22px rgba(58,82,224,.28)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-deep)}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn-ghost:hover{background:var(--stone);transform:translateY(-1px);box-shadow:0 4px 0 var(--line)}
.btn-invert{background:#fff;color:var(--pw-accent);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.eyebrow{color:var(--pw-accent)}
.accent{color:var(--pw-accent);background:linear-gradient(90deg,var(--pw-accent),var(--pw-accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ba-arrow{color:var(--pw-accent2)}
.pnum{background:linear-gradient(180deg,var(--pw-accent),var(--gold-deep))!important;color:#fff!important}

/* ---- hero lookup form ---- */
.pw-lookup{display:flex;gap:10px;margin:22px 0 4px;max-width:520px;flex-wrap:wrap}
.pw-lookup-col{flex-direction:column;max-width:420px;margin:18px auto 6px}
.pw-lookup .btn{flex:0 0 auto}
.pw-input{flex:1 1 220px;min-width:0;font-size:16px;padding:14px 16px;border:2px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);box-shadow:inset 0 2px 0 rgba(30,48,110,.04);
  font-family:var(--sans)}
.pw-input:focus{outline:none;border-color:var(--pw-accent);box-shadow:0 0 0 4px rgba(79,107,255,.16)}
.pw-lookup-col .pw-input,.pw-lookup-col .btn{width:100%}
.pw-error{color:#d63163;font-weight:600;font-size:14.5px;margin:12px 0 0;text-align:center}

/* ---- lookup loader (pulsing pixel grid) ---- */
.pw-loader{display:flex;justify-content:center;margin:8px auto 22px}
.pw-loader-grid{display:grid;grid-template-columns:repeat(3,18px);grid-gap:6px}
.pw-loader-grid i{width:18px;height:18px;border-radius:4px;background:var(--pw-accent);
  animation:pwpulse 1.1s ease-in-out infinite}
.pw-loader-grid i:nth-child(2){animation-delay:.08s;background:var(--pw-accent2)}
.pw-loader-grid i:nth-child(3){animation-delay:.16s;background:var(--pw-lime)}
.pw-loader-grid i:nth-child(4){animation-delay:.24s;background:var(--pw-sun)}
.pw-loader-grid i:nth-child(5){animation-delay:.32s;background:var(--pw-accent)}
.pw-loader-grid i:nth-child(6){animation-delay:.40s;background:var(--pw-accent2)}
.pw-loader-grid i:nth-child(7){animation-delay:.48s;background:var(--pw-lime)}
.pw-loader-grid i:nth-child(8){animation-delay:.56s;background:var(--pw-sun)}
.pw-loader-grid i:nth-child(9){animation-delay:.64s;background:var(--pw-accent)}
@keyframes pwpulse{0%,100%{transform:scale(.5);opacity:.35}50%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.pw-loader-grid i{animation:none;opacity:.8}}

/* ---- avatar preview ---- */
.pw-preview-wrap{display:flex;justify-content:center;padding:14px;border-radius:16px;
  background:
    linear-gradient(45deg,#eef2fc 25%,transparent 25%,transparent 75%,#eef2fc 75%),
    linear-gradient(45deg,#eef2fc 25%,#fff 25%,#fff 75%,#eef2fc 75%);
  background-size:26px 26px;background-position:0 0,13px 13px;border:2px solid var(--line)}
.pw-preview-wrap img{max-width:100%;max-height:52vh;width:auto;height:auto;border-radius:10px;
  background:#fff;box-shadow:var(--shadow)}

/* ---- size silhouettes tinted to the pixel palette ---- */
.sil .bust{background:linear-gradient(180deg,var(--pw-accent),var(--gold-deep))!important;border-radius:8px 8px 3px 3px}

/* ---- footer disclaimer (Roblox trademark hygiene) ---- */
.foot-disclaimer{max-width:640px;margin:14px auto 6px;font-size:12px;line-height:1.5;
  color:var(--ink-soft);text-align:center;opacity:.85}

/* ---- occasions chips a touch more playful ---- */
.occ{border-radius:12px}
.occ span:first-child{filter:saturate(1.1)}