/* Hub page and the shared player badge. Same palette as Decimal Divers so modules feel like one place. */
:root{
  color-scheme:dark;
  --hub-bg:#0b0d0a; --hub-panel:#141711; --hub-panel2:#1c2018; --hub-line:#30362a;
  --hub-fg:#ebe7d4; --hub-muted:#9a9d88; --hub-accent:#f2c230; --hub-ink:#18140a;
  --hub-gold:#f2c230; --hub-silver:#c9cdd2; --hub-bronze:#c98a52; --hub-good:#78d672; --hub-bad:#ff6646;
}
.hub-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hub-muted);text-decoration:none;border:1px solid var(--hub-line);padding:6px 10px;background:var(--hub-panel)}
.hub-badge b{color:var(--hub-fg);font-weight:700;text-transform:none;letter-spacing:0;font-size:.9rem}
.hub-badge i{font-style:normal;color:var(--hub-accent)}
.hub-badge:hover{border-color:var(--hub-muted)}

.hub-page{margin:0;background:var(--hub-bg);color:var(--hub-fg);font:16px/1.45 'Chakra Petch','Segoe UI',system-ui,sans-serif;min-height:100vh}
.hub-page *{box-sizing:border-box}
.hub-band{height:10px;background:repeating-linear-gradient(-45deg,var(--hub-accent) 0 12px,var(--hub-ink) 12px 24px)}
.hub-wrap{max-width:1000px;margin:0 auto;padding:22px 16px 48px}
.hub-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:24px}
.hub-head h1{font-family:'Saira Stencil One',Impact,sans-serif;font-weight:400;font-size:clamp(2rem,6vw,3rem);line-height:1;margin:0;color:var(--hub-accent)}
.hub-sub{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hub-muted);margin-top:6px}
.hub-h2{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hub-muted);margin:0 0 12px;font-weight:500}
.hub-kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.hub-kid{font:inherit;font-size:1.3rem;font-weight:700;color:var(--hub-fg);background:var(--hub-panel);border:2px solid var(--hub-line);padding:22px 14px;cursor:pointer;text-align:center}
.hub-kid:hover,.hub-kid:focus-visible{border-color:var(--hub-accent);outline:none}
.hub-kid.guest{font-size:1rem;font-weight:600;color:var(--hub-muted)}
.hub-empty{color:var(--hub-muted);border:1px dashed var(--hub-line);padding:16px;margin-bottom:10px}
.hub-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hub-mod{display:flex;flex-direction:column;gap:8px;background:var(--hub-panel);border:1px solid var(--hub-line);border-left:4px solid var(--hub-accent);padding:16px 18px;color:inherit;text-decoration:none}
.hub-mod:hover{background:var(--hub-panel2);border-color:var(--hub-muted);border-left-color:var(--hub-accent)}
.hub-mod h3{margin:0;font-size:1.35rem}
.hub-mod .subj{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hub-muted)}
.hub-mod p{margin:0;color:var(--hub-muted);font-size:.95rem}
.hub-prog{display:flex;gap:4px;margin-top:4px}
.hub-prog i{width:16px;height:16px;border-radius:50%;border:2px dashed var(--hub-line)}
.hub-prog i.gold{background:var(--hub-gold);border:2px solid var(--hub-gold)}
.hub-prog i.silver{background:var(--hub-silver);border:2px solid var(--hub-silver)}
.hub-prog i.bronze{background:var(--hub-bronze);border:2px solid var(--hub-bronze)}
.hub-foot{margin-top:36px;font-size:.8rem;color:var(--hub-muted)}
.hub-foot a{color:var(--hub-muted)}
[hidden]{display:none!important}

/* ---- Mermaid Lagoon mode: deep-sea teal, coral pink, pearl gold; waves instead of hazard stripes ---- */
:root[data-mode=mermaid]{
  --hub-bg:#05242e; --hub-panel:#0a3541; --hub-panel2:#0f4351; --hub-line:#1f5d6b;
  --hub-fg:#eafcff; --hub-muted:#9fcbd3; --hub-accent:#ff8fb8; --hub-ink:#3a0b1f;
  --hub-gold:#f6d36b; --hub-silver:#d9e4ea; --hub-bronze:#e0a57a; --hub-good:#7ef0c8; --hub-bad:#ff7d7d;
}
[data-mode=mermaid] .hub-page{font-family:'Fredoka','Segoe UI',system-ui,sans-serif;
  background:radial-gradient(1200px 500px at 50% -10%,#0d4b5a 0,transparent 70%),var(--hub-bg)}
[data-mode=mermaid] .hub-band{height:14px;background:
  radial-gradient(circle at 10px -4px,transparent 12px,var(--hub-accent) 13px 15px,transparent 16px) 0 0/20px 14px repeat-x,#0a3541}
[data-mode=mermaid] .hub-head h1,[data-mode=mermaid] .p-title{font-family:'Pacifico',cursive;letter-spacing:0}
[data-mode=mermaid] .hub-sub,[data-mode=mermaid] .hub-h2,[data-mode=mermaid] .hub-mod .subj,[data-mode=mermaid] .hub-badge{font-family:'Fredoka',sans-serif;letter-spacing:.06em}
[data-mode=mermaid] .hub-kid,[data-mode=mermaid] .hub-mod,[data-mode=mermaid] .p-card{border-radius:16px}

/* mode picker on the hub */
.hub-modes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.hub-mode{font:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:210px;flex:1 1 210px;max-width:320px;
  background:var(--hub-panel);color:var(--hub-fg);border:2px solid var(--hub-line);padding:12px 14px;cursor:pointer;border-radius:12px}
.hub-mode b{font-size:1.05rem} .hub-mode span{font-size:.85rem;color:var(--hub-muted)}
.hub-mode[aria-pressed=true]{border-color:var(--hub-accent);box-shadow:0 0 0 1px var(--hub-accent) inset}

/* grade picker on the hub */
.hub-grades{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.hub-grade{font:inherit;font-weight:700;font-size:1.05rem;min-width:52px;height:46px;padding:0 12px;cursor:pointer;
  background:var(--hub-panel);color:var(--hub-fg);border:2px solid var(--hub-line);border-radius:10px}
.hub-grade[aria-pressed=true]{background:var(--hub-accent);color:var(--hub-ink);border-color:var(--hub-accent)}
.grade-mods .hub-empty{margin-bottom:16px}