/* ============================================================================
   pixiroll — pixel-art design language
   Bubblegum pastel · Pixelify Sans headings + readable sans body · hard pixel
   borders & offset shadows, zero border-radius. The anti-SpecCalcs.
   ============================================================================ */
:root{
  --bg:#f2ecff;          /* soft lavender paper */
  --panel:#ffffff;
  --ink:#2a2140;         /* deep purple-black = text AND borders */
  --ink-soft:#574c73;
  --muted:#8a7ea8;
  --pink:#ff4d8d;
  --blue:#37c4ff;
  --yellow:#ffce2b;
  --green:#37dd9a;
  --purple:#8b5cff;
  --shadow:#2a2140;
  --max:1280px;
  --narrow:860px;
  --pixel:'Pixelify Sans',system-ui,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --uni:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#171225;--panel:#241c3a;--ink:#f1ecff;--ink-soft:#c8bce8;--muted:#8f82b4;
    --shadow:#0c0916;}
}
:root[data-theme="dark"]{--bg:#171225;--panel:#241c3a;--ink:#f1ecff;--ink-soft:#c8bce8;--muted:#8f82b4;--shadow:#0c0916;}
:root[data-theme="light"]{--bg:#f2ecff;--panel:#ffffff;--ink:#2a2140;--ink-soft:#574c73;--muted:#8a7ea8;--shadow:#2a2140;}

*{box-sizing:border-box}
img,.sprite{image-rendering:pixelated}
body{margin:0;color:var(--ink);font:16px/1.6 var(--body);-webkit-text-size-adjust:100%;
  background-color:var(--bg);
  background-image:radial-gradient(var(--dot,rgba(139,92,255,.10)) 2px,transparent 2px);
  background-size:22px 22px}
@media (prefers-color-scheme:dark){body{--dot:rgba(139,92,255,.14)}}
:root[data-theme="dark"] body{--dot:rgba(139,92,255,.14)}
h1,h2,h3,.pix{font-family:var(--pixel);font-weight:700;line-height:1.1}
h1{font-size:clamp(1.6rem,5vw,2.6rem);margin:.2em 0 .4em}
h2{font-size:1.4rem;margin:1.6em 0 .5em}
h3{font-size:1.05rem;margin:1.2em 0 .4em}
a{color:var(--purple);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

/* ---- pixel primitives ---- */
.card{background:var(--panel);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow)}
.btn{font-family:var(--pixel);font-size:.95rem;font-weight:700;cursor:pointer;
  background:var(--yellow);color:var(--ink);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--shadow);padding:9px 16px;transition:transform .04s,box-shadow .04s;
  display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:#ffd94f}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow)}
.btn.pink{background:var(--pink);color:#fff}.btn.pink:hover{background:#ff639c}
.btn.blue{background:var(--blue);color:var(--ink)}
.btn.sm{font-size:.78rem;padding:5px 10px;box-shadow:3px 3px 0 var(--shadow)}
.btn.sm:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}

/* ---- header ---- */
.site-head{background:var(--pink);border-bottom:4px solid var(--ink)}
.site-head .wrap{display:flex;align-items:center;gap:16px;padding:12px 18px;flex-wrap:wrap}
.brand{font-family:var(--pixel);font-weight:700;font-size:1.5rem;color:#fff;text-decoration:none;
  text-shadow:3px 3px 0 var(--ink);letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--yellow)}
.mainnav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.mainnav a{font-family:var(--pixel);font-size:.8rem;color:var(--ink);background:#fff;
  border:2px solid var(--ink);padding:5px 9px;box-shadow:2px 2px 0 var(--ink);text-decoration:none}
.mainnav a:hover{background:var(--yellow);text-decoration:none}

main{padding:22px 0 60px}
.crumbs{font-family:var(--pixel);font-size:.72rem;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
.lead{font-size:1.08rem;max-width:60ch;color:var(--ink-soft);margin:0 0 18px}

/* ---- hero: layered pixel scene (SVG bg + content overlay + scanlines) ---- */
:root{
  --sky1:#cdb9ff;--sky2:#e3c4ff;--sky3:#ffd0e4;--sky4:#ffe6d4;
  --hill1:#57d48e;--hill2:#37b874;--cloud:#ffffff;--sun:#ffd94f;--sunray:#ffce2b;
  --hero-txsh:#ffffff;
}
@media (prefers-color-scheme:dark){:root{
  --sky1:#241b4d;--sky2:#33246b;--sky3:#4a2a78;--sky4:#63357c;
  --hill1:#1d5c48;--hill2:#154236;--cloud:#5a4d8f;--sun:#ffe9a8;--sunray:#ffd94f;
  --hero-txsh:#0c0916;
}}
:root[data-theme="dark"]{--sky1:#241b4d;--sky2:#33246b;--sky3:#4a2a78;--sky4:#63357c;
  --hill1:#1d5c48;--hill2:#154236;--cloud:#5a4d8f;--sun:#ffe9a8;--sunray:#ffd94f;--hero-txsh:#0c0916}
:root[data-theme="light"]{--sky1:#cdb9ff;--sky2:#e3c4ff;--sky3:#ffd0e4;--sky4:#ffe6d4;
  --hill1:#57d48e;--hill2:#37b874;--cloud:#ffffff;--sun:#ffd94f;--sunray:#ffce2b;--hero-txsh:#ffffff}

.hero{position:relative;overflow:hidden;border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--shadow);margin:8px 0 24px;min-height:340px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:48px 24px 72px}
.hero .scene{position:absolute;inset:0;width:100%;height:100%;shape-rendering:crispEdges;z-index:0}
/* CRT scanlines, very subtle */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(20,10,40,.05) 0 2px,transparent 2px 4px)}
.hero-in{position:relative;z-index:3;max-width:640px}
.hero h1{margin:0 0 12px;color:var(--ink);font-size:clamp(1.9rem,6vw,3.2rem);
  text-shadow:3px 3px 0 var(--hero-txsh)}
.hero h1 .fancy{color:var(--pink)}
.hero p{margin:0 0 20px;font-size:1.1rem;color:var(--ink);font-weight:600;
  text-shadow:1px 1px 0 var(--hero-txsh)}
.hero .badge{display:inline-block;font-family:var(--pixel);font-size:.72rem;background:var(--yellow);
  color:#2a2140;border:2px solid #2a2140;box-shadow:2px 2px 0 #2a2140;padding:4px 10px;margin-bottom:16px}
.btn.big{font-size:1.05rem;padding:12px 22px}

/* frame-stepped sprite motion (steps(), not fluid easing) */
@keyframes drift-a{from{transform:translateX(-16px)}to{transform:translateX(216px)}}
@keyframes drift-b{from{transform:translateX(232px)}to{transform:translateX(-56px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}
.cloud-a{animation:drift-a 44s steps(88) infinite}
.cloud-b{animation:drift-b 58s steps(116) infinite}
.mascot{animation:bob 1.6s steps(2) infinite}
.star{animation:twinkle 2.4s steps(2) infinite}
.star:nth-child(2n){animation-delay:.8s}
.star:nth-child(3n){animation-delay:1.6s}
@media (prefers-reduced-motion:reduce){.cloud-a,.cloud-b,.mascot,.star{animation:none}}

/* ---- feature strip (pixel SVG icons, no emoji) ---- */
.feats{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0;padding:0}
.feats li{list-style:none;flex:1 1 150px;background:var(--panel);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--shadow);padding:12px 14px}
.feats svg{width:20px;height:20px;shape-rendering:crispEdges;display:block;margin-bottom:8px}
.feats .fi{font-family:var(--pixel);font-size:.85rem;display:block;margin-bottom:3px}
.feats .fd{font-size:.8rem;color:var(--muted)}

/* ---- tool directory grid ---- */
.cat{font-family:var(--pixel);font-size:1.2rem;margin:26px 0 12px;
  display:inline-block;background:var(--yellow);border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--shadow);padding:5px 12px}
.grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.grid a{display:block;background:var(--panel);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--shadow);padding:14px;color:var(--ink);text-decoration:none;
  transition:transform .06s,box-shadow .06s}
.grid a:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow);text-decoration:none}
.grid .t{font-family:var(--pixel);font-size:1rem;display:block;margin-bottom:4px}
.grid .d{display:block;font-size:.82rem;color:var(--muted)}
.grid .prev{display:block;font-size:1.2rem;margin-top:10px;font-family:var(--uni);color:var(--purple);word-break:break-all}

/* ---- generator widget ---- */
.gen{margin:0 0 26px}
.gen textarea{width:100%;font:1.15rem var(--body);color:var(--ink);background:var(--panel);
  border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);padding:14px 16px;resize:vertical;
  min-height:72px}
.gen textarea:focus{outline:none;border-color:var(--pink);box-shadow:5px 5px 0 var(--pink)}
.gen .genbar{font-family:var(--pixel);font-size:.72rem;color:var(--muted);margin:10px 0 2px}
.results{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}
.results li{background:var(--panel);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);
  padding:9px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.results li.feat{border-color:var(--pink);box-shadow:5px 5px 0 var(--pink);order:-1}
.results .name{font-family:var(--pixel);font-size:.72rem;color:var(--muted);flex:0 0 88px}
.results li.feat .name{color:var(--pink)}
.results .out{flex:1 1 160px;min-width:0;font-size:1.3rem;font-family:var(--uni);
  color:var(--ink);word-break:break-word;line-height:1.45}
.results .btn{flex:0 0 auto;margin-left:auto}
.results .btn.copied{background:var(--green);color:#063}

/* ---- random/name tool widget ---- */
.narrow{max-width:var(--narrow);margin:0 auto}
.tool{background:var(--panel);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--shadow);
  padding:18px;margin:0 0 26px}
.tctrls{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tc{font-family:var(--pixel);font-size:.78rem;color:var(--ink-soft);display:flex;
  flex-direction:column;gap:5px}
.tc input[type=number],.tc select{font:1rem var(--body);color:var(--ink);background:var(--bg);
  border:3px solid var(--ink);padding:8px 10px;min-width:110px}
.tc input:focus,.tc select:focus{outline:none;border-color:var(--pink)}
.tcheck{flex-direction:row;align-items:center;gap:8px;align-self:flex-end;padding-bottom:10px}
.tcheck input{width:20px;height:20px;accent-color:var(--pink)}
.tgo{width:100%;justify-content:center;font-size:1.1rem;padding:13px}
.tres{margin-top:16px;min-height:56px;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;background:var(--bg);border:3px dashed var(--muted);padding:18px 14px}
.rbig{font-family:var(--pixel);font-size:clamp(1.8rem,7vw,3rem);color:var(--ink);word-break:break-all}
.rbig.mono{font-family:var(--mono,ui-monospace,monospace);font-size:clamp(1.1rem,4vw,1.7rem)}
.rbig.c-pink{color:var(--pink)}.rbig.c-blue{color:var(--blue)}.rbig.c-green{color:var(--green)}
.rlist{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ritem{font-family:var(--pixel);font-size:1.15rem;background:var(--panel);border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--shadow);padding:6px 12px}
.rsub{flex-basis:100%;margin-top:10px;font-family:var(--pixel);font-size:.85rem;color:var(--muted)}
.rswatches{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sw{display:flex;flex-direction:column;width:86px;height:76px;border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--shadow);justify-content:flex-end}
.sw code{font-size:.72rem;background:var(--panel);color:var(--ink);padding:3px 0;text-align:center}

/* ---- prose ---- */
.prose{max-width:62ch;color:var(--ink-soft)}
.prose p{margin:0 0 1em}
.prose strong{color:var(--ink)}
.xlink{margin-top:24px;font-family:var(--pixel);font-size:.8rem}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:#c8bce8;margin-top:40px;border-top:4px solid var(--pink)}
.site-foot .wrap{padding:20px 18px;font-size:.85rem}
.site-foot a{color:var(--yellow)}
.site-foot .pix{font-size:1.2rem;color:#fff;display:block;margin-bottom:6px}

@media (max-width:520px){
  .results .name{flex-basis:100%}
  .mainnav{width:100%;margin-left:0}
}