/* ===== Koda Companions — Dark Aurora (art-director tuned) ===== */
:root{
  /* Base */
  --bg:#0A0E14;          /* deep coal */
  --bg2:#0C1118;         /* charcoal */
  --card:#0E141C;        /* surface */
  --text:#E9EEF5;
  --muted:#94A3B8;
  --border:rgba(255,255,255,.07);

  /* Brand */
  --brand-purple:#A93AFF;
  --brand-gold:#F2C94C;
  --brand-ink:#0D1320;

  /* Derived accents */
  --accent:var(--brand-purple);
  --accent2:var(--brand-gold);

  /* Shadows & glow */
  --glow: 0 10px 40px rgba(169,58,255,.15), 0 6px 24px rgba(242,201,76,.10);
  --radius:18px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace,"JetBrains Mono","Fira Code","SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.2px;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 5% -10%, rgba(169,58,255,.10), transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, rgba(242,201,76,.10), transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* Subtle grain */
.bg-noise{
  position:fixed; inset:0; pointer-events:none;
  background-image: repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
  opacity:.15; mix-blend-mode:soft-light;
}

/* Aurora veil */
.aurora{
  position:fixed; inset:-20vh -10vw auto -10vw; height:55vh; z-index:-1;
  background:
    radial-gradient(800px 480px at 18% 15%, rgba(169,58,255,.22), transparent 60%),
    radial-gradient(900px 520px at 82% 20%, rgba(242,201,76,.18), transparent 60%),
    radial-gradient(600px 360px at 50% 5%, rgba(132,224,255,.10), transparent 60%);
  filter: blur(8px) saturate(110%);
  pointer-events:none;
}

/* Header */
.site-header{
  max-width:1100px; margin:32px auto 12px; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:16px}
.logo{width:44px; height:44px; filter:drop-shadow(0 0 18px rgba(169,58,255,.35))}
.titles h1{margin:0; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing:.4px}
.subtitle{margin:.35rem 0 0; color:var(--muted)}
.accent{color:var(--accent)}

.links{display:flex; gap:14px}
.nav-link{
  color:var(--text); text-decoration:none; opacity:.9; padding:8px 12px;
  border:1px solid var(--border); border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(4px);
}
.nav-link:hover{opacity:1; border-color:rgba(255,255,255,.18)}

/* Layout */
.grid{
  max-width:1100px; margin:16px auto; padding: 0 20px 32px;
  display:grid; gap:24px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

/* Card */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    radial-gradient(1200px 800px at 50% -60%, rgba(255,255,255,.03), transparent 60%),
    var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:20px;
  box-shadow: var(--glow);
  position:relative; overflow:hidden;
  transform: translateZ(0); /* new stacking context for effects */
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}

/* Ambient gradient ring */
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: calc(var(--radius) + 1px);
  background: conic-gradient(from 180deg,
    rgba(169,58,255,.25),
    rgba(242,201,76,.18),
    transparent 40% 100%);
  opacity:.0;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
  pointer-events:none;
  filter: blur(18px) saturate(110%);
}

/* Interactive glare following the cursor */
.card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 140px at var(--mx,50%) var(--my,0%),
               rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  opacity:0;
  transition: opacity .3s var(--ease);
  pointer-events:none;
}

.card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.16);
}
.card:hover::before{ opacity: 1; }
.card:hover::after{ opacity: 1; }

/* Left/Right color personalities */
.card.is-left{ --ringA: rgba(169,58,255,.25); --ringB: rgba(242,201,76,.14); }
.card.is-right{ --ringA: rgba(242,201,76,.28); --ringB: rgba(169,58,255,.14); }
.card.is-left::before{
  background: conic-gradient(from 200deg, var(--ringA), var(--ringB), transparent 42% 100%);
}
.card.is-right::before{
  background: conic-gradient(from 340deg, var(--ringA), var(--ringB), transparent 42% 100%);
}
.card.is-left:hover{
  box-shadow:
    0 18px 70px rgba(169,58,255,.25),
    0 10px 44px rgba(242,201,76,.12);
}
.card.is-right:hover{
  box-shadow:
    0 18px 70px rgba(242,201,76,.24),
    0 10px 44px rgba(169,58,255,.14);
}

.card-head .badge{
  display:inline-block; font-size:.9rem; color:#0B0E14;
  background: linear-gradient(135deg, rgba(169,58,255,.9), rgba(242,201,76,.9));
  border:1px solid rgba(255,255,255,.25);
  padding:4px 10px; border-radius:999px; letter-spacing:.5px;
  box-shadow: 0 4px 14px rgba(169,58,255,.25);
}
.card h2{margin:.35rem 0 .25rem; font-weight:800; letter-spacing:.2px}
.muted{color:var(--muted); margin-top:0; font-size:.7rem;}

/* Info band */
.detected{
  font-size:.92rem; color:#C7D2E0;
  background: linear-gradient(180deg, rgba(12,17,24,.6), rgba(12,17,24,.3));
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid rgba(169,58,255,.45);
  padding:10px 12px; margin:10px 0 4px; border-radius:12px;
}

/* Controls */
.controls{
  display:flex; gap:12px; flex-wrap:wrap; margin:14px 0;
}
label{display:flex; flex-direction:column; font-size:.8rem; gap:6px}
.select{
  appearance:none; background:linear-gradient(180deg, #0D1219, #0B0F15);
  color:var(--text);
  border:1px solid var(--border); border-radius:999px; padding:10px 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.select:focus{outline:none; border-color: rgba(255,255,255,.18); box-shadow:0 0 0 3px rgba(169,58,255,.18)}

/* Actions */
.actions{display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 30px}
.btn{
  font-size:.8rem;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; padding:12px 18px; border-radius:999px;
  border:1px solid var(--border); color:var(--text);
  transition: transform .1s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), background-position .4s var(--ease);
  will-change: transform;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-gold));
  background-size: 160% 160%;
  border-color: rgba(169,58,255,.45);
  color:#0B0E14; font-weight:500;
  box-shadow: 0 10px 26px rgba(169,58,255,.25), 0 6px 18px rgba(242,201,76,.18);
}
.btn.primary:hover{ background-position: 80% 20%; filter:saturate(1.05) }
.btn.ghost{
  background:linear-gradient(180deg, #0D1219, #0B0F15);
  border-color: rgba(255,255,255,.10);
}

/* Footer */
.card-foot small{color:var(--muted)}
code{background:rgba(255,255,255,.06); padding:.2em .5em; border-radius:8px}

.site-footer{
  max-width:1100px; margin:6px auto 40px; padding:0 20px;
  text-align:center; color:var(--muted);
  border-top:1px dashed var(--border);
  padding-top:18px;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .card, .btn{ transition:none !important; }
  .card::after, .card::before{ display:none }
}