@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&family=Rubik:wght@400;500;600&display=swap');
:root{
  --night:#121829;      /* page */
  --slate:#1b2337;      /* panels */
  --slate2:#242e47;     /* raised */
  --edge:#33405f;       /* borders */
  --ink:#e9edf7;        /* text */
  --dim:#9aa6c2;        /* secondary */
  --gold:#f2b544;       /* Valenor gold, goals, ranks */
  --amethyst:#b48cff;   /* challenges */
  --emerald:#4fd18b;    /* completed */
  --task:#c9d2e6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:16px/1.55 Rubik,system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(900px 420px at 15% -120px,rgba(242,181,68,.10),transparent 70%),radial-gradient(800px 400px at 95% -100px,rgba(180,140,255,.10),transparent 70%)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:28px 16px 72px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top img.logo{width:56px;height:56px;border-radius:10px}
.top .brand{font:700 26px/1.1 'Pixelify Sans',system-ui;letter-spacing:.5px}
.top .brand small{display:block;font:400 13px Rubik,system-ui;color:var(--dim);letter-spacing:0;margin-top:4px}
.tabs{display:flex;gap:4px;margin:22px 0 26px;border-bottom:2px solid var(--edge);overflow-x:auto}
.tabs a{font:600 15px Rubik;text-decoration:none;color:var(--dim);padding:10px 14px;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--gold);border-bottom-color:var(--gold)}
h1,h2,h3{font-family:'Pixelify Sans',system-ui;font-weight:700;letter-spacing:.3px;margin:0}
h1{font-size:34px;line-height:1.1}
h2{font-size:22px;margin:40px 0 14px}
h3{font-size:17px}
.lede{color:var(--dim);max-width:62ch;margin:8px 0 0}
.panel{background:var(--slate);border:1px solid var(--edge);border-radius:12px;padding:16px}
.grid{display:grid;gap:12px}
.muted{color:var(--dim);font-size:14px}
.num{font-variant-numeric:tabular-nums}
.head{width:28px;height:28px;border-radius:5px;image-rendering:pixelated;flex:none;background:var(--slate2)}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:8px;border-radius:4px;background:var(--slate2);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ffd77f);border-radius:4px}
.bar.em i{background:linear-gradient(90deg,#2fae6c,var(--emerald))}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);background:var(--slate);color:var(--ink);border-radius:999px;padding:6px 12px;font:500 14px Rubik;cursor:pointer}
.chip.on{border-color:var(--gold);background:rgba(242,181,68,.12)}
.chip img{width:20px;height:20px;image-rendering:pixelated}
input.search,select{background:var(--slate);border:1px solid var(--edge);color:var(--ink);border-radius:10px;padding:10px 12px;font:15px Rubik;width:100%}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;text-align:left;border-bottom:1px solid var(--edge);white-space:nowrap}
th{color:var(--dim);font-weight:500;font-size:13px;cursor:pointer;user-select:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--slate2)}
td.r,th.r{text-align:right}
.scroll{overflow-x:auto}
/* advancement frames */
.fr{--c:var(--task);position:relative;width:52px;height:52px;display:grid;place-items:center;flex:none;background:#2a3350;border:3px solid var(--c);border-radius:4px}
.fr.goal{--c:var(--gold);border-radius:16px}
.fr.challenge{--c:var(--amethyst);border-radius:4px;clip-path:polygon(50% 0,62% 12%,82% 6%,85% 26%,100% 38%,90% 50%,100% 62%,85% 74%,82% 94%,62% 88%,50% 100%,38% 88%,18% 94%,15% 74%,0 62%,10% 50%,0 38%,15% 26%,18% 6%,38% 12%);border-width:0;background:radial-gradient(circle,#3a2f5c 55%,var(--c) 56%)}
.fr img{width:32px;height:32px;image-rendering:pixelated}
.fr.off{filter:grayscale(1) brightness(.45)}
.fr.done::after{content:"";position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;background:var(--emerald);border:2px solid var(--night)}
.fr.challenge.done::after{right:6px;bottom:6px}
.modal{position:fixed;inset:0;background:rgba(6,9,18,.78);display:none;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;z-index:20}
.modal.open{display:flex}
.sheet{background:var(--night);border:1px solid var(--edge);border-radius:14px;max-width:820px;width:100%;padding:20px}
.close{margin-left:auto;background:none;border:1px solid var(--edge);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer;font:500 14px Rubik}
.foot{margin-top:40px;color:var(--dim);font-size:13px}
.rb{display:inline-block;font:600 11px/1 Rubik;padding:3px 7px;border-radius:999px;margin-left:8px;vertical-align:middle;flex:none}
.rb-b{color:#ffcf6e;background:rgba(242,181,68,.14);border:1px solid rgba(242,181,68,.45)}
.rb-p{color:#ff8a8a;background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.45)}
.embed .wrap{padding-top:18px}
*{scrollbar-color:var(--edge) transparent;scrollbar-width:thin}
@media (max-width:600px){h1{font-size:28px}.fr{width:46px;height:46px}.fr img{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}