/* flipper.salvo.host — shared theme · Salvo Praxis × Claude Code · v1.0.0 */
:root{
  --bg1:#eaf4f4;--bg2:#dcefe9;--card:#fff;--ink:#163b45;--muted:#5b7884;--line:#cfe3e2;
  --accent:#1b9aaa;--accent2:#0f7886;--coral:#ef767a;--sun:#f4b942;--green:#3aa06a;
  --purple:#8a6bd6;--teal:#2ba3a3;--slate:#7a8a99;--gold:#e0a500;--pink:#e86a92;--mystery:#4a9d5b;
  --done-bg:#e6f6ec;--done-bd:#3aa06a;--wip-bg:#fff6e0;--wip-bd:#f4b942;
  --todo-bg:#f3f7f8;--todo-bd:#cfe3e2;--defer-bg:#eef1f4;--defer-bd:#9fb0bd;
  --shadow:0 2px 10px rgba(20,60,70,.08);--radius:14px;--nav-h:54px;
}
html[data-theme="dark"]{
  --bg1:#0e1c22;--bg2:#13262d;--card:#162a31;--ink:#e7f1f1;--muted:#9bb3bb;--line:#26424b;
  --accent:#2bc0d4;--accent2:#36d1e6;--coral:#ff8b8f;--sun:#ffce6b;--green:#46b87e;
  --done-bg:#143626;--done-bd:#3aa06a;--wip-bg:#3a3015;--wip-bd:#caa040;
  --todo-bg:#15282f;--todo-bd:#284851;--defer-bg:#1a2730;--defer-bd:#3a505c;
  --shadow:0 2px 12px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2));min-height:100vh;line-height:1.45}
a{color:var(--accent2)}
h1,h2,h3{line-height:1.2}
.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 90px}

/* ---- top nav ---- */
.topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  padding:0 16px;height:var(--nav-h)}
.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.05rem;white-space:nowrap}
.brand span{display:none}
@media(min-width:560px){.brand span{display:inline}}
.games{display:flex;gap:6px;flex:1;overflow:auto}
.gtab{text-decoration:none;color:var(--muted);font-weight:700;font-size:.86rem;padding:6px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.gtab:hover{border-color:var(--line)}
.gtab.on{background:var(--accent);color:#fff}
.gtab.soon{opacity:.55;cursor:default}
.gtab.soon i{font-style:normal;font-size:.66rem;opacity:.8}
.themebtn{cursor:pointer;border:1px solid var(--line);background:var(--bg1);color:var(--ink);
  border-radius:9px;font-size:1rem;width:38px;height:34px;line-height:1}
.themebtn:hover{border-color:var(--accent)}
/* ---- sub nav (per-game pages) ---- */
.subnav{position:sticky;top:var(--nav-h);z-index:39;display:flex;gap:6px;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:8px 16px}
.subtab{text-decoration:none;color:var(--muted);font-size:.84rem;padding:5px 11px;border-radius:8px;border:1px solid transparent}
.subtab:hover{border-color:var(--line);color:var(--ink)}
.subtab.on{background:var(--todo-bg);border-color:var(--line);color:var(--ink);font-weight:700}

/* ---- page header / hero ---- */
.pagehead{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.pagehead h1{margin:0;font-size:1.45rem}
.pagehead p{margin:4px 0 0;color:var(--muted);font-size:.86rem}

/* ---- progress ring + stats ---- */
.ringwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ring{position:relative;width:104px;height:104px}
.ring svg{transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .pct b{font-size:1.5rem;line-height:1}
.ring .pct span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{background:var(--todo-bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:74px;text-align:center}
.stat b{display:block;font-size:1.2rem}
.stat span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ---- toolbar ---- */
.toolbar{position:sticky;top:calc(var(--nav-h) + 42px);z-index:30;margin:14px 0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:9px}
.toolrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg1);color:var(--ink);font-size:.9rem}
.chip{cursor:pointer;border:1px solid var(--line);background:var(--bg1);color:var(--ink);padding:6px 11px;border-radius:999px;font-size:.78rem;user-select:none;transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip.set-scooby.on{background:var(--mystery);border-color:var(--mystery)}
.chip.set-sakura.on{background:var(--pink);border-color:var(--pink)}
.lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--bg1);color:var(--ink);padding:7px 12px;border-radius:9px;font-size:.8rem;transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--accent2)}
.spacer{flex:1}

/* ---- section groups ---- */
section.grp{margin-top:24px;scroll-margin-top:120px}
.grphead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 2px 10px}
.grphead h2{margin:0;font-size:1.12rem}
.gbadge{font-size:.7rem;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.gbar{flex:1;min-width:120px;height:8px;background:var(--todo-bg);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.gbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--green));width:0;transition:width .3s}
.gpct{font-size:.78rem;color:var(--muted);min-width:48px;text-align:right}

/* ---- cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--slate);border-radius:12px;
  padding:12px 13px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;transition:.15s}
.card.cls-story{border-left-color:var(--accent)}.card.cls-collectible{border-left-color:var(--sun)}
.card.cls-missable{border-left-color:var(--coral)}.card.cls-gag{border-left-color:var(--purple)}
.card.cls-sandbox{border-left-color:var(--green)}.card.cls-cumulative{border-left-color:var(--teal)}
.card.cls-flip{border-left-color:var(--slate)}.card.cls-platinum{border-left-color:var(--gold)}
.card.cls-dlc{border-left-color:var(--mystery)}
.card.is-done{opacity:.72}
.card.pulse{animation:pulse .4s ease}
@keyframes pulse{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.ctop{display:flex;align-items:flex-start;gap:9px;justify-content:space-between}
.cname{font-weight:700;font-size:.97rem}
.badges{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:.63rem;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.miss{color:var(--coral);border-color:var(--coral)}
.tag.recov{color:var(--accent2);border-color:var(--accent)}
.tag.set.scooby{color:#fff;background:var(--mystery);border-color:var(--mystery)}
.tag.set.sakura{color:#fff;background:var(--pink);border-color:var(--pink)}
.creq{font-size:.84rem}
.cgate{font-size:.76rem;color:var(--muted)}
.chint{font-size:.8rem;background:var(--todo-bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.status{cursor:pointer;border:none;border-radius:8px;padding:6px 10px;font-size:.78rem;font-weight:700;white-space:nowrap;min-width:104px;text-align:center;transition:.15s}
.status.todo{background:var(--todo-bg);border:1px solid var(--todo-bd);color:var(--muted)}
.status.wip{background:var(--wip-bg);border:1px solid var(--wip-bd);color:#9a6b00}
.status.done{background:var(--done-bg);border:1px solid var(--done-bd);color:#1d6c42}
.status.deferred{background:var(--defer-bg);border:1px solid var(--defer-bd);color:var(--slate)}
html[data-theme="dark"] .status.wip{color:var(--sun)}html[data-theme="dark"] .status.done{color:#7fd6a3}

/* bessie / job rows (progress page reuse) */
.check{cursor:pointer;width:30px;height:30px;border-radius:8px;border:1px solid var(--todo-bd);background:var(--todo-bg);font-size:1rem;display:flex;align-items:center;justify-content:center}
.check.on{background:var(--done-bg);border-color:var(--done-bd)}
.bloc{font-size:.8rem;background:var(--todo-bg);border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-top:6px}
.stars{display:inline-flex;gap:2px}
.star{cursor:pointer;font-size:1.15rem;color:var(--todo-bd);line-height:1}
.star.on{color:var(--sun)}
.numin{width:96px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg1);color:var(--ink);font-size:.82rem}
table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.tbl th,table.tbl td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;font-size:.86rem;vertical-align:middle}
table.tbl th{background:var(--todo-bg);font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
table.tbl tr:last-child td{border-bottom:none}

/* landing cards */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tile{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.15s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.tile.soon{opacity:.6;cursor:default}
.tile h3{margin:0 0 6px}

/* footer */
.sitefoot{max-width:1180px;margin:30px auto 0;padding:18px 16px;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.7;border-top:1px solid var(--line)}

/* ---- back-to-top floater (tucks against right edge) ---- */
.totop{position:fixed;right:0;bottom:90px;z-index:45;display:flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;padding:10px 12px 10px 10px;
  border-radius:10px 0 0 10px;box-shadow:var(--shadow);transform:translateX(calc(100% - 26px));
  transition:transform .22s ease,opacity .2s;opacity:0;pointer-events:none}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover,.totop:focus{transform:translateX(0)}
.totop .tt-ico{font-size:.9rem}
.totop .tt-lbl{font-size:.8rem;font-weight:700;white-space:nowrap}
.toc-pop{position:fixed;right:10px;bottom:130px;z-index:46;max-width:280px;max-height:55vh;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 8px}
.toc-pop a{display:block;text-decoration:none;color:var(--ink);font-size:.82rem;padding:5px 9px;border-radius:7px}
.toc-pop a:hover{background:var(--todo-bg);color:var(--accent2)}
.toc-pop .toc-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:3px 9px 6px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg1);
  padding:10px 16px;border-radius:10px;font-size:.85rem;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.toast.show{opacity:1}
.hide{display:none!important}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px}
.legend .tag{cursor:pointer}

/* ---- perks grid (in-game-style: one row per category) ---- */
.perkrow{display:flex;align-items:stretch;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:12px}
.perkcat{flex:0 0 130px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  border-right:1px solid var(--line);padding-right:12px}
.perkcat .pc-ico{font-size:1.5rem}
.perkcat .pc-name{font-weight:800;font-size:.92rem;line-height:1.1}
.perkcat .pc-prog{font-size:.72rem;color:var(--muted)}
.perklanes{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1}
.lane{display:flex;align-items:center;gap:6px}
.pdot{color:var(--muted);font-size:1.1rem;opacity:.5;padding:0 6px;user-select:none}
.parrow{color:var(--accent);font-weight:800;user-select:none}
.perknode{position:relative;cursor:pointer;border:1px solid var(--line);background:var(--bg1);color:var(--ink);
  border-radius:10px;padding:8px 11px;min-width:108px;max-width:150px;text-align:center;transition:.15s}
.perknode .pn-name{font-size:.78rem;font-weight:700;line-height:1.15}
.perknode .pn-fx{font-size:.64rem;color:var(--muted);margin-top:2px;line-height:1.2}
.perknode.on{background:var(--done-bg);border-color:var(--done-bd)}
.perknode.on::after{content:'✓';position:absolute;top:-7px;right:-7px;background:var(--green);color:#fff;
  width:18px;height:18px;border-radius:50%;font-size:.7rem;line-height:18px;font-weight:800}
.perknode.avail:hover{border-color:var(--accent);transform:translateY(-1px)}
.perknode.blocked{opacity:.42;cursor:not-allowed;border-style:dashed}
.perknode.tier::before{content:attr(data-tier);position:absolute;top:-7px;left:-6px;background:var(--accent);color:#fff;
  width:16px;height:16px;border-radius:50%;font-size:.6rem;line-height:16px;text-align:center;font-weight:800}
@media(max-width:560px){.perkrow{flex-direction:column}.perkcat{flex-basis:auto;border-right:none;border-bottom:1px solid var(--line);padding:0 0 8px;flex-direction:row;align-items:center;gap:8px}}