/* ========================
   Theme variables
======================== */
:root{
    --bg:#0b0f14;
    --panel:#111722;
    --panel-2:#0f1420;
    --bd:#1e2633;
    --txt:#e8eef7;
    --mut:#93a0b5;
    --c1:#22d3ee;   /* cyan */
    --c2:#7c3aed;   /* violet */
    --c3:#f43f5e;   /* neon pink */
    --glow:0 10px 30px rgba(0,0,0,.45);
    --r:16px;
    --mx:50%;
    --my:50%;
    --rx:0deg;
    --ry:0deg;
}

/* ========================
   Base / reset
======================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
    display:flex;
    min-height:100vh;
    flex-direction: column;
    margin:0;
    color:var(--txt);
    background:var(--bg);
    font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    overflow-x:hidden;
}
main.wrap { flex: 1 0 auto }
/* ========================
   Background effects
======================== */
.halo{
    position:fixed; inset:-20% -20% auto -20%; height:70vh; z-index:-2;
    background:
            radial-gradient(60vh 60vh at 15% 10%, rgba(34,211,238,.18), transparent 60%),
            radial-gradient(50vh 50vh at 90% 5%, rgba(124,58,237,.22), transparent 65%),
            radial-gradient(40vh 40vh at 50% -10%, rgba(244,63,94,.12), transparent 65%);
    filter:saturate(130%) blur(.4px);
    animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{transform:translateY(-10px)} 100%{transform:translateY(10px)} }

canvas.stars{
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
}

/* ========================
   Header
======================== */
header.nav{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border-bottom:1px solid var(--bd);
    background:linear-gradient(180deg, rgba(17,23,34,.85), rgba(17,23,34,.55) 70%, rgba(17,23,34,0));
    backdrop-filter: blur(8px);
}
.badge{
    width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
    color:#09131b;font-weight:800;font-family:"JetBrains Mono",monospace;
    background:conic-gradient(from 210deg, var(--c1), var(--c2), var(--c3), var(--c1));
    box-shadow:0 0 22px rgba(34,211,238,.35);
    letter-spacing:.2px;
}
.brand{font-weight:700;font-size:18px;letter-spacing:.3px}
.spacer{flex:1}
.pill{font-size:12px;color:#cbd5e1; display:flex; align-items:center; gap:8px}
.dot{width:9px;height:9px;border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12)}

/* ========================
   Page wrap / hero
======================== */
.wrap{ max-width:1080px; margin:28px auto 80px; padding:0 18px }
.hero{ margin:28px 0 18px; display:grid; gap:8px }
.hero h1{
    margin:0; font-size:clamp(28px, 5vw, 48px); line-height:1.05; letter-spacing:.2px;
    text-shadow:0 2px 0 rgba(0,0,0,.2);
}
.hero p{ margin:0; color:var(--mut); max-width:70ch }

/* ========================
   Social buttons
======================== */
.social{ display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 6px }
.soc{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px;
    text-decoration:none; color:var(--txt); font-weight:600; font-size:14px;
    background:linear-gradient(180deg,#121a27,#0e1521); border:1px solid var(--bd);
    transition:border-color .2s ease, transform .1s ease;
}
.soc:hover{ border-color:#334155; transform:translateY(-1px) }
.icon{ width:18px; height:18px; fill:#a6b4c8; transition:fill .2s ease }
.soc:hover .icon{ fill:var(--c1) }

/* ========================
   Columns (Games / Projects / Other)
======================== */
.columns{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px; margin-top:18px;
}
.col{ display:flex; flex-direction:column; gap:16px; max-height:520px; overflow:auto; padding-right:4px }
.col-title{ margin:0 0 4px; font-size:14px; color:var(--mut); font-weight:700; letter-spacing:.4px }

/* ========================
   Cards
======================== */
.card{
    position:relative;
    display:flex; flex-direction:column; min-height:180px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border:1px solid var(--bd); border-radius:var(--r); padding:18px; box-shadow:var(--glow);
    transform-style:preserve-3d; transition: transform .15s ease, border-color .2s ease;
    overflow:hidden;
}
.card .grow{ flex:1 1 auto }

/* Decorative spotlight overlay */
.card::before{
    content:"";
    position:absolute; inset:-1px; border-radius:inherit; z-index:0;
    background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(34,211,238,.18), transparent 50%);
    transition:opacity .2s ease; opacity:0;
    pointer-events:none;                 /* crucial: overlay must not capture clicks */
}
/* Ensure content is above overlay (and clickable) */
.card > *{ position:relative; z-index:1 }
.card .cta{ position:relative; z-index:2 }

.card:hover{ border-color:#334155; transform:translateY(-2px) }
.card:hover::before{ opacity:1 }

.card h3{ margin:0 0 6px }
.card p{ margin:0 0 12px; color:var(--mut) }

.cta{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:11px;
    background:linear-gradient(180deg, rgba(34,211,238,.12), rgba(124,58,237,.10)), linear-gradient(180deg,#131a26,#0d141e);
    border:1px solid var(--bd); color:var(--txt); text-decoration:none; font-weight:600;
    transition:border-color .2s ease, transform .08s ease;
}
.cta:hover{ border-color:#3b4252 }
.cta:active{ transform:translateY(1px) }

/* Tilt effect (controlled by JS via CSS vars) */
.tilt{ transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) }

/* Teaser/disabled cards */
.card.soon{ filter:saturate(85%) }
.card.soon::after{
    content:"Soon";
    position:absolute; top:12px; right:12px;
    padding:4px 10px; font-weight:700; font-size:12px; letter-spacing:.4px;
    color:#cbd5e1; border:1px solid #243041; border-radius:9999px;
    background:linear-gradient(180deg,#0e1521,#0b111b);
}
.card.soon .cta{ pointer-events:none; opacity:.45 }

/* ========================
   Calendar (upcoming list)
======================== */
.events{ display:grid; gap:10px; margin:10px 0 10px }
.event{
    display:grid; grid-template-columns:auto 1fr; gap:10px;
    padding:10px; border:1px solid var(--bd); border-radius:12px; background:#0e1521;
}
.event .date{ min-width:84px; text-align:center; border-right:1px solid #1e2633; padding-right:10px }
.event .date .d{ font:600 20px/1 "JetBrains Mono",monospace }
.event .date .m{ font-size:12px; color:var(--mut) }
.event .title{ font-weight:700; margin-bottom:4px }
.event .meta{ color:var(--mut); font-size:12px }

/* Block under columns */
.calendar-block{ margin-top:18px }


/* ========================
   Footer (minimal, elegant glow)
======================== */
.site-footer, footer {
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 16px 0 22px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.25px;
    color: rgba(232, 238, 247, 0.88);
    text-shadow: 0 0 6px rgba(34,211,238,0.2),
    0 0 12px rgba(124,58,237,0.15);
    backdrop-filter: blur(8px);
    z-index: 10;
    overflow: hidden;
    border-top: 1px solid rgba(30,38,51,0.5);
}

/* soft ambient bottom glow — no dock bar */
footer::after, .site-footer::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 160px;
    background: radial-gradient(80% 140% at 50% 100%,
    rgba(34,211,238,0.25),
    rgba(124,58,237,0.22) 35%,
    transparent 70%);
    filter: blur(40px) saturate(160%);
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
}

/* Ensure the layout doesn't get overlapped */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--txt);
    background: var(--bg);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x: hidden;
}
main.wrap {
    max-width: 1080px;
    margin: 28px auto 0px;
    padding: 0 16px; /* spacing before dock */
}


/* ---------- Mobile-first polish ---------- */

/* 1) Stack columns on tablets/phones */
@media (max-width: 980px){
    .columns { grid-template-columns: 1fr; }  /* 1 column */
    .col { max-height: none; padding-right: 0; }
}

/* 2) Tighten the global wrap a bit for phones */
@media (max-width: 640px){
    .wrap { padding: 0 12px; }
}

/* 3) Headline + hero spacing on small screens */
@media (max-width: 640px){
    .hero h1 { font-size: clamp(24px, 6vw, 32px); }
    .hero p  { font-size: 14px; line-height: 1.5; }
}

/* 4) Cards: remove minimum height, increase line-height */
@media (max-width: 640px){
    .card { min-height: auto; padding: 14px; }
    .card h3 { font-size: 16px; margin-bottom: 6px; }
    .card p  { font-size: 13px; line-height: 1.5; }
}

/* 5) Clamp long descriptions so the button isn't pushed offscreen */
@media (max-width: 640px){
    .card p {
        display: -webkit-box;
        -webkit-line-clamp: 2;   /* show up to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 6) Buttons: full-width, thumb-friendly tap target on phones */
@media (max-width: 640px){
    .cta {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 14px;
        margin-top: 10px;
    }
}

/* 7) Social buttons: shrink a touch and wrap nicely */
@media (max-width: 640px){
    .social { gap: 8px; }
    .soc { font-size: 13px; padding: 7px 10px; }
    .icon { width: 16px; height: 16px; }
}

/* 8) Disable tilt/hover-ish transforms on touch (prevents jitter) */
@media (pointer: coarse){
    .tilt { transform: none !important; }
    .card:hover { transform: none; }
    .card::before { opacity: 0 !important; }
}