/* ═══════════════════════════════════════════════════════════════
   Ghosties — stylesheet
   Colours, spacing and type live here. Change the values in :root
   below and the whole site follows.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#141b30; --panel:#182142; --panel2:#141c38; --deep:#101728;
  --line:#26314f; --line2:#222c49; --edge:#2b3654;
  --ink:#eef1fa; --ink2:#e6eaf6; --dim:#a8b1cc; --dim2:#6d78a0;
  --acc:#8ecdf5; --acc2:#b6dffa; --pink:#ffb3bf; --ok:#5ec98b; --bad:#ff8a9c;
  --px:'Silkscreen',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--acc)} a:hover{color:var(--pink)}
img{display:block}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bobBig{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── boot / loading screen ───────────────────────────── */
#boot{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;
      flex-direction:column;align-items:center;justify-content:center;gap:26px;
      transition:opacity .5s ease}
#boot.done{opacity:0;pointer-events:none}
#bootGhosts{display:flex;align-items:flex-end;gap:14px;height:132px}
#bootGhosts img{image-rendering:pixelated;animation:bobBig 1.6s ease-in-out infinite}
#bootGhosts img:nth-child(1){width:72px;height:72px;animation-delay:0s;opacity:.55}
#bootGhosts img:nth-child(2){width:112px;height:112px;animation-delay:.2s}
#bootGhosts img:nth-child(3){width:72px;height:72px;animation-delay:.4s;opacity:.55}
#bootTitle{font-family:var(--px);font-size:30px;letter-spacing:.06em;color:#fff;text-shadow:0 4px 0 #232d4d}
#bootBar{display:flex;gap:4px}
#bootBar i{width:14px;height:10px;background:#1e2a52;border:1px solid var(--line);display:block}
#bootBar i.on{background:var(--acc);border-color:var(--acc)}
#bootMsg{font-family:var(--px);font-size:9px;letter-spacing:.14em;color:var(--dim2);min-height:12px}

/* ── layout ──────────────────────────────────────────── */
.wrap{min-height:100vh;padding:48px 40px 68px}
.inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:34px}
header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.eyebrow{font-family:var(--px);font-size:11px;letter-spacing:.22em;color:var(--acc)}
h1.logo{margin:0;font-family:var(--px);font-size:38px;line-height:1.05;color:#fff;text-shadow:0 4px 0 #232d4d}
.lede{margin:0;max-width:52ch;font-size:14px;line-height:1.6;color:var(--dim);text-wrap:pretty}

.tab{all:unset;cursor:pointer;padding:12px 18px;font-family:var(--px);font-size:10px;
     letter-spacing:.14em;border:2px solid var(--line);background:var(--panel);color:#c3cae0;transition:.12s}
.tab:hover{border-color:var(--acc)}
.tab.on{border-color:var(--acc);background:var(--acc);color:var(--deep)}

.grid{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:24px;align-items:start}
.rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
.col{display:flex;flex-direction:column;gap:20px}
.card{border:2px solid var(--line);background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:14px}
.card.raised{background:linear-gradient(180deg,#1c2547 0%,#182142 100%);gap:16px}
.cap{font-family:var(--px);font-size:10px;letter-spacing:.16em;color:var(--acc)}
.cap.w{color:#fff}
.hint{font-size:12px;color:var(--dim2)}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* preview */
.stage{width:100%;aspect-ratio:1/1;background:var(--deep);border:2px solid var(--line);
       display:flex;align-items:center;justify-content:center}
.stage img{width:80%;height:80%;image-rendering:pixelated;animation:bob 3.4s ease-in-out infinite}
.code{font-family:var(--px);font-size:13px;letter-spacing:.06em;color:#fff}
.badge{font-family:var(--px);font-size:10px;letter-spacing:.1em;padding:5px 9px;border:1px solid}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.bad{color:var(--bad);border-color:var(--bad)}
.badge.warn{color:var(--dim2);border-color:var(--line)}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.attr{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:var(--panel2);border:1px solid var(--line)}
.attr b{font-family:var(--px);font-size:7px;letter-spacing:.1em;color:var(--dim2);font-weight:400}
.attr span{font-family:var(--px);font-size:8px;letter-spacing:.04em;color:var(--ink2)}

.suggest{display:flex;gap:8px;flex-wrap:wrap}
.suggestopt{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
     padding:6px;border:2px solid var(--line);background:var(--panel2);transition:border-color .12s ease}
.suggestopt:hover{border-color:var(--acc)}
.suggestopt img{width:40px;height:40px;image-rendering:pixelated}
.suggestopt s{font-family:var(--px);font-size:7px;color:var(--dim2);text-decoration:none}

.btn{all:unset;text-align:center;cursor:pointer;padding:12px;font-family:var(--px);font-size:10px;
     letter-spacing:.12em;transition:.12s}
.btn.pri{color:var(--deep);background:var(--acc)}
.btn.pri:hover{background:var(--acc2)}
.btn.sec{color:#c3cae0;border:2px solid var(--edge)}
.btn.sec:hover{border-color:var(--acc)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.textlink{all:unset;cursor:pointer;align-self:center;font-size:11px;color:var(--dim2);text-decoration:underline;text-align:center}
.textlink:hover{color:var(--acc)}
.btnrow{display:flex;gap:8px}
.btnrow>.btn{flex:1}

/* form */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--px);font-size:8px;letter-spacing:.12em;color:var(--dim2)}
.field input{all:unset;padding:11px 12px;background:var(--deep);border:2px solid var(--line);
             color:var(--ink2);font-size:13px;width:100%}
.field input::placeholder{color:#57628a}
.field input:focus{border-color:var(--acc)}
.field input.err{border-color:var(--bad)}
.msg{font-size:11px;line-height:1.5;min-height:15px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--bad)} .msg.neutral{color:var(--dim2)}

/* traits */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{all:unset;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 7px;
     width:82px;border:2px solid;transition:transform .12s ease,border-color .12s ease;cursor:pointer}
.opt:hover{transform:translateY(-3px)}
.opt img{width:56px;height:56px;image-rendering:pixelated}
.opt b{font-family:var(--px);font-size:7px;letter-spacing:.06em;color:var(--ink2);text-align:center;line-height:1.5;font-weight:400}

.stat{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--dim)}
.stat b{color:#fff;font-family:var(--px);font-size:10px;font-weight:400}
.rule{height:1px;background:var(--line)}

/* sprite sheet */
.sheetrow{display:flex;align-items:flex-start;gap:22px;border-top:1px solid var(--line2);padding-top:20px}
.sheetrow>div:first-child{width:104px;flex:0 0 104px;display:flex;flex-direction:column;gap:6px;padding-top:8px}
.sheetgrid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cellghost{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border:2px solid var(--line2);background:var(--panel)}
.cellghost img{width:96px;height:96px;image-rendering:pixelated}
.cellghost b{font-family:var(--px);font-size:8px;letter-spacing:.06em;color:#c3cae0;text-align:center;line-height:1.5;font-weight:400}

footer.bot{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
           border-top:1px solid var(--line2);padding-top:22px}
.sw{display:flex;gap:6px}
.sw span{width:24px;height:24px;border:1px solid var(--edge)}
.colophon{max-width:44ch;font-size:12px;line-height:1.6;color:var(--dim2)}

.fade{animation:fadeUp .4s ease both}

/* faq accordion */
.faqitem{padding:0;overflow:hidden}
.faqq{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;
      justify-content:space-between;gap:12px;padding:18px 20px;font-size:14px;color:var(--ink2)}
.faqq:hover{color:#fff}
.faqchev{font-family:var(--px);font-size:14px;color:var(--acc);flex:0 0 auto}
.faqa{padding:0 20px 18px}
.faqa p{margin:0;font-size:13px;line-height:1.6;color:var(--dim)}
.faqa[hidden]{display:none}

/* modal popup */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(8,11,20,0.72);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeUp .2s ease both}
.modal-card{width:100%;max-width:380px;border:2px solid var(--edge);background:var(--panel);
  padding:22px;display:flex;flex-direction:column;gap:14px}
.modal-close{all:unset;cursor:pointer;font-size:18px;line-height:1;color:var(--dim2);padding:2px 4px}
.modal-close:hover{color:#fff}

@media (max-width:900px){
  .wrap{padding:28px 18px 48px}
  .grid{grid-template-columns:1fr}
  .rail{position:static}
  h1.logo{font-size:30px}
  .sheetrow{flex-direction:column;gap:12px}
  .sheetgrid{grid-template-columns:repeat(3,1fr)}
  .sheetrow>div:first-child{width:auto;flex:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}