/* InvokeHoneyBadger - HBV Terminal Styles */
/* ========================================= */

:root{
  --hbv-yellow:#FFF244;
  --bg:#030304;
  --muted:#83a17a;
  --matrix-green: #6af072;
  --matrix-dark:#0b2510;
  --card-bg: rgba(3,4,6,0.72);
  --card-border: rgba(100,255,140,0.06);
  --accent:#3aa0ff;
}

/* Accessibility: Skip to main content link */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: var(--hbv-yellow);
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
}

html,body{height:100%;margin:0;background:var(--bg);color:#d9e6d6;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; -webkit-font-smoothing:antialiased}

/* canvas background full bleed */
#matrix-canvas{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#020202 0%, #041104 60%);display:block}

/* hexagon overlay (left panel) */
#hex-canvas{
  position:fixed; inset:0; z-index:1; display:block; pointer-events:none;
  mix-blend-mode:screen;
}

/* soft vignette + CRT scan (raised z-index to sit above hex) */
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(0,80,20,0.06), transparent 12%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  mix-blend-mode:screen;opacity:0.9;
}
.scanlines{position:fixed;inset:0;z-index:3;pointer-events:none;background:
  repeating-linear-gradient(180deg, rgba(0,0,0,0.02) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode:overlay;opacity:0.55;
}

/* container */
.wrap{position:relative;z-index:4;min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px}
.card{width:100%;max-width:1080px;background:var(--card-bg);border-radius:12px;padding:22px;border:1px solid var(--card-border);box-shadow:0 16px 60px rgba(0,0,0,0.8);backdrop-filter: blur(4px);display:flex;gap:18px;align-items:stretch; position:relative}

/* terminal column */
.term{
  width:320px;min-width:240px;border-radius:10px;padding:14px;background:linear-gradient(180deg, rgba(0,16,6,0.5), rgba(0,8,4,0.35));border:1px solid rgba(0,255,140,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  color:var(--matrix-green);font-size:12.5px;line-height:1.4;overflow:hidden;display:flex;flex-direction:column;gap:8px;
}
.term .title{font-weight:700;color:var(--hbv-yellow);letter-spacing:0.04em}
/* after (valid; clamps to ~20 lines) */
.term pre{
margin:0;
font-family:inherit;
font-size:12px;
color:var(--matrix-green);
opacity:0.95;
white-space:pre-wrap;
word-break:break-word;
line-height:1.4;
max-height:calc(20 * 1.4em);
overflow:hidden;
}
/* main content */
.main{flex:1;display:flex;flex-direction:column;gap:12px;padding:6px 8px}
.hero{display:flex;gap:18px;align-items:flex-start}
.logo{width:96px;height:96px;border-radius:12px;background:var(--hbv-yellow);display:flex;align-items:center;justify-content:center;position:relative;color:#0b0c0f;font-weight:900;font-size:28px;flex-shrink:0;box-shadow:0 8px 34px rgba(0,0,0,0.5)}
.logo .hb{line-height:1;margin:0}
.logo .v{position:absolute;right:8px;bottom:6px;color:#0b0c0f;font-weight:900;font-size:18px;transform:rotate(-8deg);background:rgba(0,0,0,0.03);padding:3px 6px;border-radius:6px}

h1{margin:0;font-size:28px;color:#dff8d8}
p.lead{color:#a9d0a1;margin-top:6px;max-width:72ch}
.cta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:9px 14px;border-radius:8px;font-weight:700;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform 0.2s,box-shadow 0.2s}
.btn-solid{background:var(--hbv-yellow);color:#0b0c0f}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.04);color:#9fbf9a}
.btn:focus{outline:2px solid var(--hbv-yellow);outline-offset:2px}
.btn:hover{transform:translateY(-1px)}

.meta{margin-top:10px;color:#9fbf9a;font-size:13px;display:flex;gap:12px;align-items:center}
.handle{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;background:rgba(255,255,255,0.02);padding:6px 8px;border-radius:8px;color:var(--hbv-yellow);font-weight:700}

.social{margin-left:auto;display:flex;gap:10px;align-items:center}
.social a{color:#9fbf9a;text-decoration:none;font-size:13px;padding:6px 8px;border-radius:6px}

/* HBV Network link grid */
.links{
  background:rgba(12,16,12,0.5);
  border:1px solid rgba(100,255,140,0.06);
  border-radius:12px;
  padding:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.links h2{
  margin:0 0 10px 0;
  font-size:16px;
  color:#cdecca;
  letter-spacing:.02em
}
.links-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.link-card{
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:10px;
  background:linear-gradient(180deg,#0b0d0b, #0a0c0a);
  border:1px solid rgba(100,255,140,0.06);
  text-decoration:none; color:#cfe7cc;
  transition: transform .12s ease, border-color .12s ease;
}
.link-card:hover{ transform: translateY(-2px); border-color: rgba(255,242,68,0.35); }
.link-card:focus{ outline: 2px solid var(--hbv-yellow); outline-offset: 2px; transform: translateY(-2px); border-color: rgba(255,242,68,0.5); }
.link-icon{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,242,68,0.1); color:var(--hbv-yellow); font-weight:900
}
.link-text{display:flex;flex-direction:column;line-height:1.2}
.link-title{font-weight:800; color:#e9ffe6; font-size:14px}
.link-sub{color:#9fbf9a; font-size:12px}
.ext{color:var(--accent); font-weight:700; margin-left:6px}

footer{margin-top:8px;color:#9fbf9a;font-size:13px;text-align:center}

/* Signature / tribute styling */
.signature{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  color:#bfe6b7;
  font-size:13px;
  line-height:1.2;
  opacity:0.95;
  font-style:italic;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.signature .sig-emoji{ font-size:18px; transform:translateY(1px); }
.signature .sig-text{ font-style:italic; }
.signature .sig-nod{ margin-left:8px; font-style:normal; color:var(--muted); font-weight:600; letter-spacing:0.02em; }

/* responsive */
@media (max-width:920px){
  .card{flex-direction:column}
  .term{width:100%;min-width:auto;order:2}
  .hero{flex-direction:row;align-items:center}
  .social{margin-left:0}
}
@media (max-width:520px){
  .logo{width:72px;height:72px;font-size:20px}
  .term{font-size:12px}
  h1{font-size:22px}
}

/* subtle glow under card */
.card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-80px;width:520px;height:260px;border-radius:50%;background:radial-gradient(closest-side, rgba(111,255,146,0.06), rgba(0,0,0,0));filter:blur(40px);opacity:0.95;z-index:2;pointer-events:none}

@keyframes hbvGlow {
0%, 100% { box-shadow:0 0 10px #FFF244; }
50% { box-shadow:0 0 20px #FFF244; }
}
#hbvCounter {
animation: hbvGlow 2s infinite;
}
#hbvBootBar, #hbvCounter {
box-shadow: 0 0 8px #FFF244, inset 0 0 3px rgba(255,255,200,0.3);
}

/* Boot sequence container */
.boot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* HBV Boot Banner Styles */
#hbvBootBar {
  background-color: #0b0b0b;
  color: var(--hbv-yellow);
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 10px;
  border: 1px solid var(--hbv-yellow);
  border-radius: 6px;
  width: 300px;
  margin: 10px auto 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  box-shadow: 0 0 15px var(--hbv-yellow);
}

/* HBV Status Display Styles */
#hbvCounter {
  background-color: var(--bg);
  color: var(--hbv-yellow);
  font-family: 'Courier New', monospace;
  text-align: center;
  padding: 8px 0;
  border: 1px solid var(--hbv-yellow);
  border-radius: 6px;
  width: 280px;
  margin: 12px auto 20px;
  box-shadow: 0 0 12px var(--hbv-yellow);
}