/* ===== EthanElstein.com – modern refresh (drop-in) ===== */
:root{
  --bg: #0b0c10;
  --surface: #12141a;
  --elev: #1a1d25;
  --text: #e7e9ee;
  --muted: #9aa3b2;
  --brand: #5eead4;            /* teal-mint */
  --brand-2: #8b5cf6;          /* accent */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --maxw: 1100px;
  --gap: 1rem;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Auto-light mode if user prefers */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fa; --surface:#ffffff; --elev:#ffffff;
    --text:#0f172a; --muted:#5b6472; --shadow:0 10px 30px rgba(2,6,23,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(94,234,212,.10), transparent 60%),
              radial-gradient(800px 400px at 110% 10%, rgba(139,92,246,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ===== Layout ===== */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding: clamp(16px, 3vw, 32px);
}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background-color: color-mix(in oklab, var(--surface) 75%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; gap:1rem; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit;
  font-weight:800; letter-spacing:.2px; font-size:clamp(18px, 2.4vw, 24px);
}
.brand-badge{
  width:28px; height:28px; border-radius:9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 14px rgba(91, 206, 195, .35);
}

/* Search (works for a simple <input type="search">) */
.search{
  display:flex; align-items:center; gap:.6rem;
}
.search input[type="search"]{
  width:min(340px, 60vw);
  padding:.7rem .9rem;
  border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:var(--surface); color:var(--text);
  outline:none; transition:border .2s, box-shadow .2s, background .2s;
}
.search input[type="search"]::placeholder{color:var(--muted)}
.search input[type="search"]:focus{
  border-color:color-mix(in oklab, var(--brand) 60%, #fff 0%);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 25%, transparent);
}

/* ===== Headings & text ===== */
h1,h2,h3{line-height:1.15; margin:.2em 0 .3em}
h1{font-size: clamp(28px, 4.5vw, 48px); letter-spacing:-.5px}
h2{font-size: clamp(22px, 3vw, 28px)}
section + section{margin-top: clamp(24px, 5vw, 56px)}
p{color:var(--muted)}

/* ===== Buttons ===== */
.button, button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid transparent;
  background:linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), var(--brand-2) 35%));
  color:#0b0c10; font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .2s ease;
}
.button:hover, button:hover, .btn:hover{ transform: translateY(-1px) }
.button:active, button:active, .btn:active{ transform: translateY(0) scale(.99) }

/* ===== Card Grid (use for Banana Face Arcade links) ===== */
.grid{
  display:grid; gap:clamp(14px, 2.4vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items:stretch;
}
.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 35%, #fff 0%);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.card-media{
  aspect-ratio: 16/9; background:
    linear-gradient(135deg, color-mix(in oklab, var(--brand) 35%, transparent),
                           color-mix(in oklab, var(--brand-2) 35%, transparent));
}
.card-body{ padding:16px }
.card h3{ margin:0 0 .25rem; font-size:1.05rem }
.card p{ margin:0; font-size:.925rem }

/* Turn plain lists of links into pretty cards */
.card a{ color:inherit; text-decoration:none }

/* ===== “Everything Else” section as compact list ===== */
.list{
  display:grid; gap:.6rem;
}
.list a{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.8rem 1rem;
  color:var(--text); text-decoration:none; font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
  transition: border-color .18s ease, transform .12s ease;
}
.list a:hover{
  border-color: color-mix(in oklab, var(--brand) 35%, #fff 0%);
  transform: translateY(-2px);
}

/* ===== Game canvas/pages ===== */
canvas, .game-root{
  max-width: 100%;
  background: #0a0d12;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.game-ui{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.8rem 0;
}
.stat{
  padding:.35rem .6rem; border-radius:999px;
  background: color-mix(in oklab, var(--brand) 20%, var(--surface));
  color: var(--text); font-weight:700; font-size:.85rem;
  border:1px solid rgba(255,255,255,.06);
}

/* ===== Footer ===== */
footer{
  margin-top: clamp(32px, 6vw, 80px);
  border-top:1px solid rgba(255,255,255,.08);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
}
footer .container{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  color:var(--muted); font-size:.95rem;
}

/* ===== Utilities ===== */
.center{ display:grid; place-items:center }
.muted{ color:var(--muted) }
.hidden{ display:none !important }

/* Respect motion settings */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}