/* AEL // GLITCH — v1.3.5 */
:root{
  --bg0:#14151b; --bg1:#1a1b23;
  --ink:#cfd6e5; --muted:#98a3b8;
  --accent1:#7da4d4; --accent2:#a792ff;
  --panel:rgba(0,0,0,.22); --panelH:rgba(255,255,255,.08); --border:rgba(255,255,255,.12);
  --extra-pad: 560px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; color:var(--ink); font-family:"Share Tech Mono", ui-monospace, Menlo, Consolas, monospace; background:linear-gradient(180deg, var(--bg1), var(--bg0) 60%); overflow-x:hidden}
img{ image-rendering:auto !important; -ms-interpolation-mode:bicubic; }
#night{ position:fixed; inset:0; pointer-events:none; background:radial-gradient(80% 200% at 50% 120%, rgba(200,40,60,.0), rgba(200,40,60,.1) 60%, rgba(200,40,60,.0)); opacity:0; transition:opacity .3s; z-index:2 }
#synapses,#synapsemouse{position:fixed; inset:0; pointer-events:none}
#synapsemouse{mix-blend-mode:screen; opacity:1; z-index:1}
#synapses{z-index:0}
/* Header synthwave */
.hdr{ position:sticky; top:0; z-index:60; border-bottom:1px solid var(--border); background:linear-gradient(90deg, #251c34, #2b2350) }
.synthwave{ position:relative; overflow:hidden }
.synthwave .sun{
  position:absolute; left:6vw; top:-30px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle at 50% 65%, rgba(255,214,109,.96), rgba(255,92,171,.95) 42%, rgba(122,60,255,.68) 75%, rgba(122,60,255,0) 76%);
  filter: drop-shadow(0 0 28px rgba(255,166,200,.55)) drop-shadow(0 0 14px rgba(160,110,255,.45));
  -webkit-mask: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 14px);
          mask: repeating-linear-gradient(to bottom, #000 0 8px, transparent 8px 14px);
  animation: sun-scan 4.8s linear infinite;
}
.synthwave .sun:before,
.synthwave .sun:after{ content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; filter:blur(2px); opacity:.38; mix-blend-mode:screen }
.synthwave .sun:before{ transform:translateX(2px) } .synthwave .sun:after{ transform:translateX(-2px) }
@keyframes sun-scan{ to{ -webkit-mask-position:0 14px; mask-position:0 14px } }

.circuits{ position:absolute; inset:auto 0 0 0; height:54px; opacity:.95; pointer-events:none }
.headbar{ height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.logo{ height:64px; filter:drop-shadow(0 0 10px rgba(167,146,255,.36)) drop-shadow(0 0 6px rgba(125,164,212,.28)) }
h1,h3{font-family:Orbitron, system-ui, sans-serif; margin:0}

/* Glitch titles + borders */
.glitch,.glitch-s{ position:relative; display:inline-block; color:var(--ink); text-shadow:0 0 12px rgba(167,146,255,.34), 0 0 18px rgba(125,164,212,.24) }
.glitch:before,.glitch:after,.glitch-s:before,.glitch-s:after{ content:attr(data-text); position:absolute; inset:0; pointer-events:none }
.glitch:before{ color:#70b7ff; transform:translate(2px,-1px); clip-path:inset(0 0 58% 0); animation:glitchX 1.1s steps(12,end) infinite }
.glitch:after { color:#caa2ff; transform:translate(-2px,1px); clip-path:inset(42% 0 0 0); animation:glitchY 1.3s steps(14,end) infinite }
.glitch-s:before{ color:#70b7ff; transform:translate(1px,-1px); clip-path:inset(0 0 62% 0); animation:glitchX 1.2s steps(10,end) infinite }
.glitch-s:after { color:#caa2ff; transform:translate(-1px,1px); clip-path:inset(38% 0 0 0); animation:glitchY 1.4s steps(12,end) infinite }
@keyframes glitchX{ 0%{clip-path:inset(0 0 64% 0)} 50%{clip-path:inset(12% 0 44% 0)} 100%{clip-path:inset(0 0 64% 0)} }
@keyframes glitchY{ 0%{clip-path:inset(36% 0 0 0)} 50%{clip-path:inset(56% 0 0 0)} 100%{clip-path:inset(36% 0 0 0)} }

.container{max-width:1200px; margin:0 auto; padding:22px}
.tabs{display:flex; gap:10px}
.btn{ appearance:none; border:1px solid rgba(199,180,255,.45); background:var(--panel); color:var(--ink); padding:10px 14px; border-radius:12px; cursor:pointer; transition:.2s ease; font-size:13px; text-decoration:none; box-shadow:0 0 0 1px rgba(199,180,255,.25) inset }
.btn:hover{ background:var(--panelH); box-shadow:0 0 0 1px rgba(199,180,255,.55) inset, 0 0 10px rgba(199,180,255,.25) }
.btn.play{ background:rgba(80,180,120,.15); border-color:rgba(120,220,160,.45) }

.neon-border{ position:relative; isolation:isolate; overflow:hidden }
.neon-border:before{ content:""; position:absolute; inset:-1.5px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(125,164,212,.22), rgba(167,146,255,.22), rgba(125,164,212,.22));
  filter:blur(6px); opacity:.24; z-index:-1; animation:spin 6s linear infinite }
.scan-border:after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px; background:
    linear-gradient(0deg, transparent 48%, rgba(199,180,255,.95) 50%, transparent 52%),
    conic-gradient(from var(--a,0deg), rgba(199,180,255,0) 0 10%, rgba(199,180,255,.9) 12%, rgba(125,164,212,0) 15% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation:edgeFlow 4s linear infinite; opacity:.95;
}
@keyframes spin{ to{ transform:rotate(1turn) } } @keyframes edgeFlow{ to{ --a:360deg } }
.sci-lines:after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px;
  background:repeating-linear-gradient(0deg, rgba(199,180,255,.12), rgba(199,180,255,.12) 1px, transparent 2px, transparent 6px),
             repeating-linear-gradient(90deg, rgba(125,164,212,.08), rgba(125,164,212,.08) 1px, transparent 2px, transparent 8px);
  mix-blend-mode:soft-light; opacity:.28 }

.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; margin:12px 0}
.subtitle{color:var(--muted)} .muted{color:var(--muted)} .list{margin:0; padding-left:18px}
main section[data-tab]{display:none} main section.active{display:block}

/* categories */
.catgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.catcard{background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:.25s}
.catcard:hover{transform:translateY(-2px) scale(1.01)}
.catcard img{width:100%; height:180px; object-fit:cover; background:#000; image-rendering:auto !important}
.catmeta{padding:10px; display:flex; align-items:center; justify-content:space-between}
.catname{font-weight:700} .catcount{font-size:12px; color:var(--muted)}

/* gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; align-items:stretch }
.gallery-grid .item{ min-width:0; position:relative; overflow:hidden; border:1px solid var(--border); border-radius:12px; aspect-ratio: var(--tile-ratio, 4/3); background:#000 }
.gallery-grid .item figure{ margin:0; height:100%; position:relative }
.gallery-grid .item img{ width:100%; height:100%; display:block; object-fit:cover; image-rendering:auto !important }
.gallery-grid .item figcaption{ position:absolute; left:0; right:0; bottom:0; padding:6px 8px; font-size:12px; color:var(--muted); background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)) }
.gallery-grid .vec-frame::before{ display:none !important }

/* linktree embed */
.linktreeEmbed { background:#000; border:1px solid var(--border); border-radius:12px; padding:10px; overflow:hidden }

/* lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center; z-index:9999}
.lightbox.active{display:flex}
.viewer{max-width:min(96vw,1200px); max-height:88vh; position:relative; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px}
.zoomWrap{ position:relative; width:calc(min(96vw,1200px) - 120px); height:72vh; overflow:hidden; cursor:grab }
.zoomWrap:active{ cursor:grabbing }
.viewer img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); transform-origin:center; max-width:none; max-height:none; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:#000; user-select:none; -webkit-user-drag:none; image-rendering:auto !important }
.closeBtn{ position:absolute; top:-42px; right:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:10px; width:42px; height:42px; display:grid; place-items:center; cursor:pointer; font-size:18px }
.navBtn{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); width:48px; height:48px; border-radius:10px; display:grid; place-items:center; cursor:pointer; font-size:20px }
.navPrev{left:-56px} .navNext{right:-56px}
.navBtn.disabled{display:none}
.lb-controls{position:absolute; inset:auto 0 -40px 0; display:flex; justify-content:center; align-items:center; gap:10px}
.lb-help{ position:absolute; left:0; right:0; bottom:-28px; text-align:center; color:var(--muted); font-size:12px; opacity:.9 }
.pill{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff}

/* footer game */
footer{position:fixed; left:0; right:0; bottom:0; z-index:50; background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.92)); border-top:1px solid var(--border); transition: transform .25s ease }
.footHUD{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 22px; }
.tools{ display:flex; gap:8px } .score b{ font-size:16px }
.lapinBar{ padding:4px 22px 0 } .lapinList{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin; }
.lapinCard{ display:flex; align-items:center; gap:6px; padding:6px 8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; white-space:nowrap }
.lapinCard .face{ font-size:16px }
.lapinCard .bars{ display:flex; gap:6px; align-items:center }
.lapinCard .bar{ width:60px; height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; border:1px solid rgba(255,255,255,.18) }
.lapinCard .bar>i{ display:block; height:100%; background:linear-gradient(90deg, #7da4d4, #a792ff); width:50% }
.lapinCard .hp>i{ background:linear-gradient(90deg, #78e08f, #2ecc71) }

.footstage{ position:relative; height:190px; max-width:1200px; margin:0 auto; display:block; overflow:hidden }
.hole{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); font-size:44px; cursor:pointer }
.entity{ position:absolute; bottom:52px; font-size:28px; transform: translateX(var(--x,0)) scaleX(calc(-1 * var(--dir,1))); user-select:none; cursor:pointer; transition: opacity .25s }
.entity.baby{ font-size:22px } .entity.dog{ bottom:58px; font-size:30px }
.entity.infected{ filter: hue-rotate(60deg) saturate(1.3); text-shadow: 0 0 8px rgba(60,255,120,.55); }
.fx{ position:absolute; bottom:84px; font-size:18px; transform:translateX(var(--x,0)); animation:fade 1.2s ease forwards }
.fx.blue{ color:#7da4d4; text-shadow:0 0 10px rgba(125,164,212,.5) }
@keyframes fade{ from{opacity:1; transform:translateX(var(--x,0)) translateY(0)} to{opacity:0; transform:translateX(var(--x,0)) translateY(-14px)} }
.poop{ position:absolute; bottom:32px; font-size:16px; transform:translateX(var(--x,0)) }
.item{ position:absolute; bottom:32px; font-size:22px; transform:translateX(var(--x,0)) } .item.bait{ bottom:38px }
.grave{ position:absolute; bottom:36px; font-size:20px; transform:translateX(var(--x,0)) }
.toolCursor{ position:fixed; top:0; left:0; pointer-events:none; transform:translate(-50%,-50%); font-size:22px; z-index:70; display:none }
.hint{ position:absolute; right:12px; bottom:6px; color:var(--muted); font-size:12px; opacity:.85 }
.gameover{ position:absolute; left:50%; transform:translateX(-50%); bottom:4px; font-weight:700; display:none; background:rgba(0,0,0,.45); padding:4px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12) }
.shopPanel{ position:absolute; left:12px; bottom:204px; background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px; display:none; z-index:80 }
.shopPanel .shopItem{ padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.12); margin-bottom:6px; cursor:pointer }
.shopPanel .shopItem:hover{ background:rgba(255,255,255,.06) }

#footerGame.collapsed{ transform: translateY(calc(100% - 24px)); }
.collapseHandle{ position:absolute; left:50%; transform:translateX(-50%); top:-24px; width:44px; height:24px; border-radius:10px 10px 0 0; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.75); color:var(--ink); cursor:pointer; z-index:70; box-shadow:0 0 10px rgba(199,180,255,.25) }
.pauseOverlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); color:#fff; font-weight:800; letter-spacing:.2em; font-family:Orbitron,system-ui,sans-serif; z-index:65; pointer-events:none }
#footerGame.paused .pauseOverlay{ display:flex }

main{ padding-bottom: calc(var(--footer-h, 300px) + var(--extra-pad)); }