/* Krillion — brand tokens sourced from krillion.io/packs shipped CSS
   (font-family:VT323 var(--font-display)/var(--font-mono-ui); :root tier
   colors; .hub-*/.pack-* rules), fetched via curl 2026-08-26. */
body.krillion{
  --k-bg-a:#0b1526; --k-bg-b:#050a14; --k-bg-c:#03070f;
  --k-ink:#e8f1ff; --k-drift:#7d93b8; --k-hairline:#7d93b838;
  --k-panel:#101d33; --k-ring:#1b3050;
  --k-cyan:#4de3ff; --k-pink:#ff5d8f; --k-gold:#ffd166;
  background:var(--k-bg-b);
  color:var(--k-ink);
  font-family:"VT323","Source Sans 3",monospace;
  min-height:100vh;
}

.krillion .hub-root{
  background:linear-gradient(var(--k-bg-a),var(--k-bg-b) 45%,var(--k-bg-c));
  min-height:100vh;
  padding:56px 20px 64px;
  position:relative;
  overflow:hidden;
}
.krillion .hub-crt{
  pointer-events:none;
  z-index:5;
  opacity:.45;
  position:fixed;
  inset:0;
  background:
    radial-gradient(at 50% 40%, transparent 60%, #02040a99 100%),
    repeating-linear-gradient(0deg, #0000002e 0 1px, transparent 1px 3px);
}
.krillion .hub-inner{
  z-index:1;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:36px;
  max-width:460px;
  margin:0 auto;
}

.krillion header{ text-align:center; }
.krillion .hub-wordmark{
  font-size:40px;
  line-height:1;
  letter-spacing:.06em;
  color:var(--k-ink);
  text-shadow:-3px 2px var(--k-pink), 3px -2px #4de3ffd9, 0 0 16px #4de3ff4d;
  margin:0;
}
.krillion .hub-sub{
  font-family:"VT323",monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--k-drift);
  margin:8px 0 0;
  font-size:14px;
}

.krillion .pack-list{ display:flex; flex-direction:column; gap:16px; }
.krillion .pack-card{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--pc-panel,#101d33);
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--pc-ring,#1b3050);
  transition:box-shadow .25s ease-out, transform .18s ease-out;
  cursor:pointer;
}
.krillion .pack-card:hover{
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--pc), 0 0 26px color-mix(in srgb, var(--pc) 40%, transparent);
  transform:translateY(-2px);
}
.krillion .pack-card.is-disabled{ opacity:.55; pointer-events:none; cursor:default; }

.krillion .pack-art{
  height:150px;
  image-rendering:pixelated;
  background-position:bottom;
  background-size:cover;
  box-shadow:inset 0 -26px 22px -14px var(--pc-panel,#101d33);
  position:relative;
}
.krillion .pack-art:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(0deg, #0003 0 1px, transparent 1px 3px);
}
.krillion .pack-chip{
  position:absolute; top:8px; right:8px;
  z-index:1;
  font-family:"VT323",monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:11px;
  padding:5px 8px 3px;
  color:var(--pc);
  background:#050a14e0;
  box-shadow:0 0 0 1px var(--pc);
  text-shadow:0 0 8px color-mix(in srgb, var(--pc) 60%, transparent);
}
.krillion .pack-body{ padding:13px 16px 14px; }
.krillion .pack-name{
  font-size:22px;
  letter-spacing:.05em;
  color:var(--k-ink);
  text-shadow:0 0 14px color-mix(in srgb, var(--pc) 45%, transparent), 0 2px 0 #00000080;
}
.krillion .pack-tagline{
  font-family:"VT323",monospace;
  letter-spacing:.08em;
  color:var(--k-drift);
  margin-top:4px;
  font-size:13px;
}
.krillion .pack-foot{
  display:flex; align-items:baseline; gap:10px;
  margin-top:11px; padding-top:9px;
  border-top:1px dashed var(--k-hairline);
  font-family:"VT323",monospace;
}
.krillion .pack-go{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--pc);
  text-shadow:0 0 9px color-mix(in srgb, var(--pc) 55%, transparent);
  animation:k-go-bob .9s ease-in-out infinite;
}
@keyframes k-go-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }

.krillion .hub-charting{
  text-align:center;
  font-family:"VT323",monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#7d93b899;
  font-size:12px;
  margin:6px 0 0;
  animation:k-charting-pulse 2.2s ease-in-out infinite;
}
@keyframes k-charting-pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* ---- pack-open result panel ---- */
.krillion .pack-open{
  background:var(--k-panel);
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--k-ring);
  padding:22px 18px;
  text-align:center;
}
.krillion .po-descend{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0; }
.krillion .po-krill{ image-rendering:pixelated; animation:k-bob 1.4s ease-in-out infinite; }
@keyframes k-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.krillion .po-descend p{
  font-family:"VT323",monospace;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--k-drift);
  font-size:14px;
  margin:0;
}
.krillion .po-eyebrow{
  font-family:"VT323",monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--k-cyan);
  font-size:12px;
  margin:0 0 6px;
}
.krillion .po-title{
  font-size:28px;
  letter-spacing:.05em;
  color:var(--k-ink);
  text-shadow:0 0 14px #4de3ff73;
  margin:0 0 16px;
}
.krillion .po-prompt{
  background:var(--k-bg-c);
  box-shadow:inset 0 0 0 1px var(--k-hairline);
  padding:16px;
  margin:0 0 18px;
  text-align:left;
}
.krillion .po-prompt-label{
  font-family:"VT323",monospace;
  letter-spacing:.18em;
  color:var(--k-drift);
  font-size:11px;
  margin:0 0 8px;
}
.krillion .po-prompt-text{
  font-family:"Source Sans 3",sans-serif;
  font-size:17px;
  line-height:1.4;
  color:var(--k-ink);
  margin:0;
}

/* ---- logbook panel + back link ---- */
.krillion .hub-panel{
  background:#101d33bf;
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--k-ring);
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.krillion .fathom{
  font-family:"VT323",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--k-drift);
  font-size:14px;
  display:flex; align-items:center; gap:.75rem;
  white-space:nowrap;
  margin:0;
}
.krillion .fathom:after{ content:""; flex:1; border-top:1px dashed var(--k-hairline); }
.krillion .fathom-depth{ color:#7d93b88c; letter-spacing:.05em; }
.krillion .fathom-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid var(--k-hairline);
  padding-top:12px;
}
.krillion .fathom-note{
  font-family:"VT323",monospace;
  font-size:13px;
  color:#7d93b8b3;
  max-width:26ch;
  margin:0;
}
.krillion .hub-back-row{ display:flex; justify-content:center; }
.krillion .hub-back{
  font-family:"VT323",monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--k-drift);
  background:#0b1526d9;
  border:1px solid var(--k-ring);
  padding:8px 16px 6px;
  font-size:13px;
  text-decoration:none;
}
.krillion .hub-back:hover{ color:var(--k-ink); border-color:#4de3ffa6; }

.krillion .btn-quiet{
  font-family:"VT323",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--k-drift);
  background:linear-gradient(#24365a 0 5px, var(--k-panel) 5px calc(100% - 6px), #070d1a calc(100% - 6px) 100%);
  box-shadow:inset 0 0 0 2px #040810d9;
  border:none;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  padding:.85rem 1.4rem;
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.krillion .btn-quiet:hover{ color:var(--k-cyan); }

/* ---------------------------------------------------------------
   gate skin — scoped to body.krillion, the modal reads as the hub's
   own retro-terminal "unlock a pack" furniture
   --------------------------------------------------------------- */
body.krillion .gate-eyebrow{
  font-family:"VT323",monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--k-cyan);
  text-shadow:0 0 8px #4de3ff66;
}
body.krillion .reward-locker{
  background:var(--k-panel);
  border-radius:0;
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--k-ring);
}
body.krillion .lock-badge{ color:var(--k-cyan); }
body.krillion .reward-locker h3{
  font-family:"VT323",monospace;
  font-weight:400;
  font-size:26px;
  letter-spacing:.04em;
  color:var(--k-ink);
  text-shadow:0 0 14px #4de3ff59;
}
body.krillion .reward-locker p{ font-family:"Source Sans 3",sans-serif; color:var(--k-drift); }
body.krillion .rv-cta{
  font-family:"VT323",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:18px;
  color:#050a14;
  background:var(--k-cyan);
  border-radius:0;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}
body.krillion .rv-cta:hover{ filter:brightness(1.1); }
body.krillion .rv-later{
  font-family:"VT323",monospace;
  letter-spacing:.1em;
  color:var(--k-drift);
}
body.krillion .lk-side{ border-left:1px dashed var(--k-hairline); }
body.krillion .lk-side h4{
  font-family:"VT323",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--k-drift);
}
body.krillion .lk-side li{ font-family:"Source Sans 3",sans-serif; color:var(--k-ink); }
body.krillion .lk-side svg{ color:var(--k-cyan); }
body.krillion .gate-fine{ font-family:"VT323",monospace; color:#7d93b899; }
body.krillion .gate-fine .lnk{ color:var(--k-cyan); }
body.krillion .rv-floating{
  background:var(--k-panel);
  box-shadow:0 0 0 2px var(--k-bg-b), 0 0 0 4px var(--k-ring);
}
body.krillion .rv-floating .txt{ font-family:"Source Sans 3",sans-serif; color:var(--k-drift); }
body.krillion .rv-floating button{
  font-family:"VT323",monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#050a14;
  background:var(--k-cyan);
  border-radius:0;
}
body.krillion .lock-badge,
body.krillion .rv-foot{ display:none; }