/*
  Ryan Graham — Retro Retrowave Personal Site
  ------------------------------------------------
  - Dark-only theme (locked)
  - Fully local assets (no CDNs, no remote fonts/libs)
  - Shared styles for all pages
  - Visual FX: scanlines, noise, subtle CRT flicker, chromatic/glow accents
  - Responsive breakpoint: 768px
*/

:root{
  --bg0:#07060f;
  --bg1:#0b0a16;
  --ink:#e9e8ff;
  --muted:#bcb8ff;
  --dim:#8a86c9;

  --cyan:#42e7ff;
  --magenta:#ff3df2;
  --purple:#8a5bff;
  --blue:#2a6bff;
  --green:#54ff9a;

  --glass: rgba(10, 8, 24, .55);
  --glass-2: rgba(10, 8, 24, .70);
  --border: rgba(120, 106, 255, .22);
  --shadow: 0 18px 50px rgba(0,0,0,.55);

  --radius: 18px;
  --radius-sm: 12px;
  --pad: 22px;

  --max: 1100px;

  /* Typography:
     "pixel/arcade vibe" using system/local fallbacks only.
     - Keep a chunky, game-ish headline fallback chain
     - Use monospace for terminal
  */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-arcade: ui-rounded, "Avenir Next", "Trebuchet MS", "Verdana", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --focus: 0 0 0 3px rgba(66,231,255,.28), 0 0 0 1px rgba(255,61,242,.18);

  /* Parallax variables are updated by script.js (disabled for reduced motion) */
  --bg-tx: 0px;
  --bg-ty: 0px;
}

/* ---------- Themes (site-wide; set by terminal `themes`) ---------- */
:root[data-theme="dracula"]{
  --bg0:#282a36;
  --bg1:#21222c;
  --ink:#f8f8f2;
  --muted:#bd93f9;
  --dim:#6272a4;
  --cyan:#8be9fd;
  --magenta:#ff79c6;
  --purple:#bd93f9;
  --blue:#6272a4;
  --green:#50fa7b;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 28%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 18%, transparent);
}

:root[data-theme="nord"]{
  --bg0:#2e3440;
  --bg1:#3b4252;
  --ink:#eceff4;
  --muted:#e5e9f0;
  --dim:#d8dee9;
  --cyan:#88c0d0;
  --magenta:#b48ead;
  --purple:#b48ead;
  --blue:#81a1c1;
  --green:#a3be8c;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 26%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="gruvbox-dark"]{
  --bg0:#282828;
  --bg1:#3c3836;
  --ink:#ebdbb2;
  --muted:#d5c4a1;
  --dim:#a89984;
  --cyan:#689d6a;
  --magenta:#d3869b;
  --purple:#b16286;
  --blue:#458588;
  --green:#98971a;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 26%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="solarized-dark"]{
  --bg0:#002b36;
  --bg1:#073642;
  --ink:#93a1a1;
  --muted:#839496;
  --dim:#657b83;
  --cyan:#2aa198;
  --magenta:#d33682;
  --purple:#6c71c4;
  --blue:#268bd2;
  --green:#859900;
  --glass: color-mix(in srgb, var(--bg0) 60%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 22%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="solarized-light"]{
  color-scheme: light;
  --bg0:#fdf6e3;
  --bg1:#eee8d5;
  --ink:#586e75;
  --muted:#657b83;
  --dim:#93a1a1;
  --cyan:#2aa198;
  --magenta:#d33682;
  --purple:#6c71c4;
  --blue:#268bd2;
  --green:#859900;
  --glass: color-mix(in srgb, var(--bg0) 74%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 84%, transparent);
  --border: color-mix(in srgb, var(--blue) 18%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 14%, transparent);
}

:root[data-theme="tokyo-night"]{
  --bg0:#1a1b26;
  --bg1:#24283b;
  --ink:#c0caf5;
  --muted:#a9b1d6;
  --dim:#9aa5ce;
  --cyan:#7dcfff;
  --magenta:#bb9af7;
  --purple:#bb9af7;
  --blue:#7aa2f7;
  --green:#9ece6a;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 22%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="catppuccin-mocha"]{
  --bg0:#1e1e2e;
  --bg1:#181825;
  --ink:#cdd6f4;
  --muted:#bac2de;
  --dim:#a6adc8;
  --cyan:#94e2d5;
  --magenta:#f5c2e7;
  --purple:#cba6f7;
  --blue:#89b4fa;
  --green:#a6e3a1;
  --glass: color-mix(in srgb, var(--bg0) 64%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--blue) 22%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--blue) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="one-dark"]{
  --bg0:#282c34;
  --bg1:#21252b;
  --ink:#abb2bf;
  --muted:#98c379;
  --dim:#7f848e;
  --cyan:#56b6c2;
  --magenta:#c678dd;
  --purple:#c678dd;
  --blue:#61afef;
  --green:#98c379;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--blue) 20%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 14%, transparent);
}

:root[data-theme="monokai"]{
  --bg0:#272822;
  --bg1:#1f201b;
  --ink:#f8f8f2;
  --muted:#e6db74;
  --dim:#a59f85;
  --cyan:#66d9ef;
  --magenta:#f92672;
  --purple:#ae81ff;
  --blue:#66d9ef;
  --green:#a6e22e;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--cyan) 24%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--cyan) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 14%, transparent);
}

:root[data-theme="night-owl"]{
  --bg0:#011627;
  --bg1:#0b2942;
  --ink:#d6deeb;
  --muted:#c792ea;
  --dim:#5f7e97;
  --cyan:#7fdbca;
  --magenta:#ff2c83;
  --purple:#c792ea;
  --blue:#82aaff;
  --green:#22da6e;
  --glass: color-mix(in srgb, var(--bg0) 62%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 78%, transparent);
  --border: color-mix(in srgb, var(--blue) 22%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--blue) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent);
}

:root[data-theme="github-light"]{
  color-scheme: light;
  --bg0:#ffffff;
  --bg1:#f6f8fa;
  --ink:#24292f;
  --muted:#57606a;
  --dim:#6e7781;
  --cyan:#0550ae;
  --magenta:#bf3989;
  --purple:#8250df;
  --blue:#0969da;
  --green:#1a7f37;
  --glass: color-mix(in srgb, var(--bg0) 78%, transparent);
  --glass-2: color-mix(in srgb, var(--bg0) 86%, transparent);
  --border: color-mix(in srgb, var(--blue) 18%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--magenta) 14%, transparent);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-ui);
  background: radial-gradient(1200px 800px at 60% 20%, rgba(138,91,255,.14), transparent 55%),
              radial-gradient(900px 700px at 30% 90%, rgba(66,231,255,.10), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

::selection{
  background: rgba(255,61,242,.35);
  color: white;
}

a{ color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius: 10px;
}

/* Screen reader only utility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.skip-link{
  position: absolute;
  left: 10px;
  top: 10px;
  transform: translateY(-200%);
  background: rgba(10, 8, 24, .92);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(66,231,255,.30);
  z-index: 1000;
}
.skip-link:focus{
  transform: translateY(0);
}

/* ---------- Background layer (parallax) ---------- */
.bg{
  position: fixed;
  inset: 0;
  z-index: -3;
  /* Animated retro background GIF */
  background-image:
    radial-gradient(1200px 900px at 55% 35%, rgba(255,61,242,.12), transparent 58%),
    radial-gradient(1100px 800px at 35% 80%, rgba(66,231,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(6,5,15,.55), rgba(6,5,15,.86)),
    url("./background1.gif");
  /* Each background layer needs its own size - GIF uses cover to fill without stretching/letterboxing */
  background-size:
    auto,
    auto,
    auto,
    cover;
  /* Favor the middle so composition survives all screen sizes */
  background-position: center center;
  /* Avoid any tile edges during translate */
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: translate3d(var(--bg-tx), var(--bg-ty), 0) scale(1.06);
  filter: saturate(1.08) contrast(1.05);
  will-change: transform;
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70)),
    radial-gradient(800px 520px at 50% 30%, rgba(66,231,255,.12), transparent 65%),
    radial-gradient(900px 620px at 55% 78%, rgba(255,61,242,.10), transparent 62%);
}

/* ---------- CRT / VHS overlays (whole page) ---------- */
/* Scanlines */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 30;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.020) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
  opacity: .35;
}

/* Subtle noise using inline SVG turbulence (local-only via data URI) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 31;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}

/* Subtle CRT flicker */
.crt{
  animation: crtFlicker 6.5s infinite steps(1, end);
}
@keyframes crtFlicker{
  0%, 2%{ opacity: 1; }
  3%{ opacity: .98; }
  4%{ opacity: 1; }
  30%{ opacity: 1; }
  31%{ opacity: .985; }
  32%{ opacity: 1; }
  70%{ opacity: 1; }
  71%{ opacity: .992; }
  72%{ opacity: 1; }
}

/* ---------- Layout ---------- */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,8,24,.82), rgba(10,8,24,.55));
  border-bottom: 1px solid rgba(120, 106, 255, .18);
}
.site-header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  min-width: 180px;
}
.brand .mark{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 18px rgba(255,61,242,.35), 0 0 18px rgba(66,231,255,.30);
}
.brand .name{
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(233,232,255,.92);
  text-shadow:
    1px 0 0 rgba(66,231,255,.25),
    -1px 0 0 rgba(255,61,242,.18);
}

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav a{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(233,232,255,.88);
  font-family: var(--font-arcade);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 12px;
  border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(66,231,255,.24);
  background: rgba(10, 8, 24, .35);
  box-shadow: 0 0 0 1px rgba(255,61,242,.12), 0 0 16px rgba(66,231,255,.18);
}
.nav a[aria-current="page"]{
  border-color: rgba(255,61,242,.34);
  background: rgba(10, 8, 24, .42);
  box-shadow:
    0 0 0 1px rgba(66,231,255,.14),
    0 0 22px rgba(255,61,242,.18);
}

.hamburger{
  display:none;
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(10, 8, 24, .42);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1;
  font-family: var(--font-arcade);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: 12px;
}
.hamburger .icon{
  display:inline-block;
  width: 18px;
  height: 12px;
  position: relative;
  margin-right: 8px;
}
.hamburger .icon span{
  position:absolute;
  left:0;
  right:0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow: 0 0 10px rgba(66,231,255,.25);
}
.hamburger .icon span:nth-child(1){ top: 0; }
.hamburger .icon span:nth-child(2){ top: 5px; opacity: .85; }
.hamburger .icon span:nth-child(3){ top: 10px; }

.mobile-nav{
  display:none;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav .sheet{
  margin: 10px 0 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(10, 8, 24, .64);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mobile-nav a{
  display:block;
  padding: 14px 14px;
  text-decoration:none;
  font-family: var(--font-arcade);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(233,232,255,.92);
  border-bottom: 1px solid rgba(120, 106, 255, .14);
  background: linear-gradient(90deg, rgba(66,231,255,.08), transparent);
}
.mobile-nav a:last-child{ border-bottom: none; }
.mobile-nav a:hover{
  background: linear-gradient(90deg, rgba(255,61,242,.12), rgba(66,231,255,.06));
}

main{
  padding: 28px 0 90px;
}

/* ---------- Panels / Cards ---------- */
.panel{
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--pad);
}
.panel.tight{ padding: 18px; }
.panel h1, .panel h2{
  margin: 0 0 12px;
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.subtle{
  color: rgba(233,232,255,.80);
}
.muted{
  color: rgba(188,184,255,.86);
}
.kicker{
  font-family: var(--font-mono);
  letter-spacing: .08em;
  color: rgba(66,231,255,.85);
  text-transform: uppercase;
  font-size: 12px;
}

.glow{
  text-shadow:
    0 0 10px rgba(255,61,242,.18),
    0 0 18px rgba(66,231,255,.12),
    1px 0 0 rgba(66,231,255,.22),
    -1px 0 0 rgba(255,61,242,.16);
}

.btn-row{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.btn{
  appearance:none;
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(10, 8, 24, .45);
  color: rgba(233,232,255,.92);
  border-radius: 14px;
  padding: 12px 14px;
  cursor:pointer;
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,61,242,.34);
  box-shadow:
    0 0 0 1px rgba(66,231,255,.18),
    0 0 24px rgba(255,61,242,.20),
    0 0 24px rgba(66,231,255,.14);
}
.btn.primary{
  border-color: rgba(66,231,255,.30);
  background: linear-gradient(90deg, rgba(66,231,255,.12), rgba(255,61,242,.10));
}
.btn.ghost{
  background: rgba(10, 8, 24, .20);
}

/* ---------- Home hero ---------- */
.hero{
  min-height: calc(100svh - 64px);
  display:grid;
  place-items:center;
  padding: 54px 0 42px;
}
.hero .panel{
  width: min(820px, 100%);
  text-align:center;
  position: relative;
  overflow:hidden;
}
.hero .panel::before{
  /* neon frame */
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(66,231,255,.35), rgba(255,61,242,.30));
  filter: blur(14px);
  opacity: .40;
  z-index: 0;
}
.hero .panel > *{ position: relative; z-index: 1; }
.hero h1{
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.03;
  margin: 10px 0 8px;
}
.hero .tagline{
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233,232,255,.86);
  margin: 0;
}
.hero .cta{
  margin-top: 12px;
  font-family: var(--font-mono);
  color: rgba(188,184,255,.82);
}

/* ---------- Content pages ---------- */
.page{
  padding-top: 24px;
}
.page .panel{
  max-width: 900px;
}
.page p{
  line-height: 1.65;
  color: rgba(233,232,255,.86);
}

/* ---------- Projects cards ---------- */
.cards{
  display:grid;
  gap: 14px;
  margin-top: 14px;
}
.card{
  text-decoration:none;
  display:block;
  border-radius: var(--radius);
  background: rgba(10, 8, 24, .50);
  border: 1px solid rgba(120, 106, 255, .20);
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
  padding: 18px;
  position: relative;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card::before{
  /* chromatic edge */
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow:
    inset 1px 0 0 rgba(66,231,255,.16),
    inset -1px 0 0 rgba(255,61,242,.12);
  opacity: .75;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(66,231,255,.30);
  box-shadow:
    0 0 0 1px rgba(255,61,242,.20),
    0 18px 44px rgba(0,0,0,.60),
    0 0 26px rgba(66,231,255,.16),
    0 0 34px rgba(255,61,242,.12);
}
.card h3{
  margin: 0 0 6px;
  font-family: var(--font-arcade);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.card .blurb{
  margin: 0 0 12px;
  color: rgba(233,232,255,.84);
}
.tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag{
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(10, 8, 24, .45);
  color: rgba(188,184,255,.86);
}
.tag.hot{
  border-color: rgba(255,61,242,.30);
  color: rgba(255, 219, 252, .92);
}
.tag.cool{
  border-color: rgba(66,231,255,.30);
  color: rgba(211, 251, 255, .92);
}

/* ---------- Contact form ---------- */
.form{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}
.field{
  display:grid;
  gap: 6px;
}
label{
  font-family: var(--font-mono);
  letter-spacing: .06em;
  font-size: 12px;
  color: rgba(66,231,255,.86);
  text-transform: uppercase;
}
input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(10, 8, 24, .55);
  color: rgba(233,232,255,.92);
  font-family: var(--font-ui);
}
textarea{ min-height: 140px; resize: vertical; }
.help{
  font-size: 13px;
  color: rgba(188,184,255,.82);
}

/* ---------- Links list ---------- */
.links{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}
.link-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(10, 8, 24, .50);
  border: 1px solid rgba(120, 106, 255, .20);
  text-decoration:none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.link-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,61,242,.28);
  box-shadow: 0 0 22px rgba(255,61,242,.12), 0 0 18px rgba(66,231,255,.10);
}
.link-item .meta{
  color: rgba(188,184,255,.82);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- Footer ---------- */
.footer{
  margin-top: 22px;
  color: rgba(188,184,255,.65);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
}

/* ---------- Terminal FAB + modal ---------- */
.term-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
}
.term-fab button{
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 14%, transparent),
    color-mix(in srgb, var(--magenta) 12%, transparent)
  );
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  border-radius: 999px;
  padding: 12px 14px;
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  cursor:pointer;
  box-shadow:
    0 10px 28px rgba(0,0,0,.50),
    0 0 24px color-mix(in srgb, var(--cyan) 12%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.term-fab button:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--magenta) 32%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 20%, transparent),
    0 14px 34px rgba(0,0,0,.60),
    0 0 26px color-mix(in srgb, var(--magenta) 18%, transparent);
}

.term-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.55);
  display:grid;
  place-items: end center;
  padding: 16px;
}
.term-overlay[hidden]{ display:none; }

.terminal{
  width: min(920px, 100%);
  height: min(560px, 80svh);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: color-mix(in srgb, var(--bg0) 82%, transparent);
  box-shadow:
    0 22px 70px rgba(0,0,0,.75),
    0 0 0 1px color-mix(in srgb, var(--magenta) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--cyan) 12%, transparent);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  resize: both;
}
.terminal::before{
  /* terminal-only scanlines overlay */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.014) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: .38;
  mix-blend-mode: overlay;
}
.terminal .titlebar{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 10%, transparent),
    color-mix(in srgb, var(--magenta) 8%, transparent)
  );
}
.terminal .titlebar .title{
  font-family: var(--font-mono);
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--green) 22%, transparent);
}
.terminal .titlebar .actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.chip{
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg0) 65%, transparent);
}
.terminal .close{
  border: 1px solid color-mix(in srgb, var(--magenta) 30%, transparent);
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-family: var(--font-arcade);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.terminal .close:hover{
  box-shadow:
    0 0 18px color-mix(in srgb, var(--magenta) 18%, transparent),
    0 0 14px color-mix(in srgb, var(--cyan) 12%, transparent);
}

.terminal .body{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 12px;
  height: 100%;
  min-height: 0;
}
.term-output{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  background: color-mix(in srgb, var(--bg0) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 10%, transparent);
  font-family: var(--font-mono);
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  line-height: 1.5;
}
.term-output a{
  color: color-mix(in srgb, var(--cyan) 92%, transparent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--cyan) 44%, transparent);
}
.term-output a:hover{
  text-shadow:
    0 0 14px color-mix(in srgb, var(--cyan) 22%, transparent),
    0 0 10px color-mix(in srgb, var(--magenta) 18%, transparent);
}
.term-line{
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.term-line.cmd{
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  text-shadow:
    1px 0 0 color-mix(in srgb, var(--cyan) 20%, transparent),
    -1px 0 0 color-mix(in srgb, var(--magenta) 18%, transparent);
}
.term-line.err{
  color: rgba(255, 194, 194, .92);
  text-shadow: 0 0 16px color-mix(in srgb, var(--magenta) 16%, transparent);
}
.term-line.ok{
  color: color-mix(in srgb, var(--ink) 92%, transparent);
}

.term-input{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
  background: color-mix(in srgb, var(--bg0) 72%, transparent);
  font-family: var(--font-mono);
}
.prompt{
  color: color-mix(in srgb, var(--green) 92%, var(--ink));
  text-shadow: 0 0 14px color-mix(in srgb, var(--green) 22%, transparent);
}
.term-input input{
  flex:1;
  border: none;
  outline: none;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 14px;
}

.matrix-pre{
  margin: 8px 0 0;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--green) 22%, transparent);
  padding: 10px;
  background: color-mix(in srgb, var(--bg0) 70%, transparent);
  color: color-mix(in srgb, var(--green) 92%, var(--ink));
  max-height: 180px;
  overflow:hidden;
  text-shadow: 0 0 14px color-mix(in srgb, var(--green) 20%, transparent);
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 120;
  background: rgba(10, 8, 24, .92);
  border: 1px solid rgba(66,231,255,.26);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.65), 0 0 22px rgba(66,231,255,.10);
  color: rgba(233,232,255,.92);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ---------- Decrypt timing-bar modal ---------- */
.decrypt-overlay{
  position: fixed;
  inset: 0;
  z-index: 140; /* above terminal (100) + toast (120) */
  background: rgba(0,0,0,.72);
  display: grid;
  place-items: center;
  padding: 16px;
}
.decrypt-dialog{
  width: min(980px, 100%);
  height: min(620px, 86svh);
  border-radius: 16px;
  border: 1px solid rgba(66,231,255,.26);
  background: rgba(7, 6, 15, .90);
  box-shadow:
    0 26px 80px rgba(0,0,0,.80),
    0 0 0 1px rgba(255,61,242,.14),
    0 0 36px rgba(66,231,255,.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}
.decrypt-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.014) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: .34;
  mix-blend-mode: overlay;
}
.decrypt-header{
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(66,231,255,.16);
  background: linear-gradient(90deg, rgba(66,231,255,.08), rgba(255,61,242,.06));
}
.decrypt-title{
  font-family: var(--font-mono);
  color: rgba(211, 255, 231, .92);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(84,255,154,.22);
}
.decrypt-subtitle{
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(188,184,255,.82);
}
.decrypt-body{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
  padding: 12px;
  height: 100%;
  min-height: 0;
}
.decrypt-feed, .decrypt-game{
  border-radius: 14px;
  border: 1px solid rgba(66,231,255,.16);
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,61,242,.08);
  overflow: hidden;
  min-height: 0;
}
.decrypt-feed{
  display: flex;
  flex-direction: column;
}
.decrypt-feed-head{
  padding: 10px 10px 8px;
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(66,231,255,.86);
  border-bottom: 1px solid rgba(120, 106, 255, .14);
  background: linear-gradient(90deg, rgba(66,231,255,.06), transparent);
}
.decrypt-feed-lines{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(211, 255, 231, .86);
  text-shadow: 0 0 14px rgba(84,255,154,.14);
}
.decrypt-feed-line{
  margin: 0 0 6px;
  opacity: .96;
}
.decrypt-game{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decrypt-frame{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 219, 252, .90);
  text-shadow: 1px 0 0 rgba(66,231,255,.16), -1px 0 0 rgba(255,61,242,.12);
  border: 1px dashed rgba(84,255,154,.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.18);
}
.decrypt-frame-line{ margin: 0 0 6px; }
.decrypt-frame-line:last-child{ margin-bottom: 0; }
.decrypt-status{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(188,184,255,.84);
}
.decrypt-status-label{
  text-transform: uppercase;
  color: rgba(66,231,255,.84);
}
.decrypt-status-value{
  text-transform: uppercase;
  color: rgba(211, 255, 231, .92);
}
.decrypt-status-value.is-err{
  color: rgba(255, 194, 194, .92);
  text-shadow: 0 0 16px rgba(255,61,242,.14);
}
.decrypt-status-sep{
  color: rgba(120, 106, 255, .42);
}
.decrypt-bar{
  position: relative;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(66,231,255,.18);
  background:
    linear-gradient(90deg, rgba(66,231,255,.06), rgba(255,61,242,.05)),
    rgba(0,0,0,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,61,242,.08),
    0 0 22px rgba(66,231,255,.08);
  overflow: hidden;
  user-select: none;
}
.decrypt-window{
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(84,255,154,.22);
  box-shadow:
    inset 0 0 0 1px rgba(84,255,154,.28),
    0 0 18px rgba(84,255,154,.10);
}
.decrypt-window::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(84,255,154,.10) 0px,
    rgba(84,255,154,.10) 3px,
    rgba(0,0,0,0) 6px,
    rgba(0,0,0,0) 10px
  );
  opacity: .65;
}
.decrypt-cursor{
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 10px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,61,242,.85), rgba(66,231,255,.80));
  box-shadow: 0 0 22px rgba(255,61,242,.20), 0 0 18px rgba(66,231,255,.14);
}
.decrypt-controls{
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(188,184,255,.72);
  letter-spacing: .02em;
  text-align: center;
}
.decrypt-overlay.decrypt-shake .decrypt-dialog{
  animation: decryptShake 220ms linear;
}
@keyframes decryptShake{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
  100%{ transform: translateX(0); }
}
.decrypt-overlay.decrypt-flash .decrypt-dialog{
  box-shadow:
    0 26px 80px rgba(0,0,0,.80),
    0 0 0 1px rgba(84,255,154,.22),
    0 0 42px rgba(84,255,154,.14),
    0 0 36px rgba(66,231,255,.10);
}

.decrypt-overlay.decrypt-pulse .decrypt-dialog{
  box-shadow:
    0 26px 80px rgba(0,0,0,.80),
    0 0 0 1px rgba(66,231,255,.26),
    0 0 60px rgba(66,231,255,.16),
    0 0 52px rgba(255,61,242,.10);
}

.decrypt-overlay.decrypt-commit .decrypt-dialog{
  filter: saturate(1.04) contrast(1.02);
}

.decrypt-result{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.decrypt-result-inner{
  text-align: center;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(120, 106, 255, .22);
  background: rgba(7, 6, 15, .70);
  box-shadow: 0 18px 50px rgba(0,0,0,.70);
  width: min(520px, 92%);
}
.decrypt-result-title{
  font-family: var(--font-arcade);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.05;
  margin: 0 0 10px;
}
.decrypt-result-detail{
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(188,184,255,.84);
}
.decrypt-result.is-win .decrypt-result-title{
  color: rgba(211, 255, 231, .96);
  text-shadow:
    0 0 18px rgba(84,255,154,.20),
    1px 0 0 rgba(66,231,255,.22),
    -1px 0 0 rgba(255,61,242,.16);
}
.decrypt-result.is-lose .decrypt-result-title{
  color: rgba(255, 194, 194, .96);
  text-shadow:
    0 0 18px rgba(255,61,242,.16),
    1px 0 0 rgba(66,231,255,.18),
    -1px 0 0 rgba(255,61,242,.14);
}

/* ---------- Memory Injection modal (memcorrupt) ---------- */
.meminject-open{ overflow: hidden; }

.meminject-overlay{
  position: fixed;
  inset: 0;
  z-index: 145; /* above decrypt (140) */
  background: rgba(0,0,0,.76);
  display: grid;
  place-items: center;
  padding: 16px;
}

.meminject-dialog{
  width: min(1080px, 100%);
  height: min(640px, 88svh);
  border-radius: 16px;
  border: 1px solid rgba(84,255,154,.22);
  background: rgba(7, 6, 15, .92);
  box-shadow:
    0 26px 80px rgba(0,0,0,.82),
    0 0 0 1px rgba(66,231,255,.12),
    0 0 42px rgba(84,255,154,.10);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 12px;
  padding: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.meminject-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.028) 0px,
      rgba(255,255,255,.014) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: .34;
  mix-blend-mode: overlay;
}

.meminject-left, .meminject-right{
  position: relative;
  z-index: 1;
  border-radius: 14px;
  border: 1px solid rgba(66,231,255,.16);
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,61,242,.08);
  overflow: hidden;
  min-height: 0;
}

.meminject-left{
  display: flex;
  flex-direction: column;
}

.meminject-left-head{
  padding: 10px 10px 8px;
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(66,231,255,.86);
  border-bottom: 1px solid rgba(120, 106, 255, .14);
  background: linear-gradient(90deg, rgba(66,231,255,.06), transparent);
}

.meminject-left-feed{
  /* Keep the feed ~half height; memory map gets the rest */
  flex: 0 0 44%;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(211, 255, 231, .86);
  text-shadow: 0 0 14px rgba(84,255,154,.14);
}

.meminject-feed-line{
  margin: 0 0 6px;
  opacity: .96;
}

.meminject-left-timer{
  border-top: 1px solid rgba(120, 106, 255, .14);
  border-bottom: 1px solid rgba(120, 106, 255, .14);
  padding: 10px;
  background: linear-gradient(90deg, rgba(66,231,255,.06), rgba(255,61,242,.05));
}

.meminject-left-timer-label{
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(66,231,255,.86);
}

.meminject-left-timer-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}

.meminject-left-timer-value{
  font-family: var(--font-arcade);
  font-size: 36px;
  line-height: 1;
  letter-spacing: .10em;
  color: rgba(255, 219, 252, .96);
  text-shadow:
    0 0 20px rgba(255,61,242,.18),
    1px 0 0 rgba(66,231,255,.18),
    -1px 0 0 rgba(255,61,242,.14);
  font-variant-numeric: tabular-nums;
}

.meminject-left-timer-units{
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(211, 255, 231, .86);
  opacity: .9;
}

.meminject-left-timer-bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(66,231,255,.18);
  background:
    linear-gradient(90deg, rgba(66,231,255,.06), rgba(255,61,242,.05)),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,61,242,.08);
  overflow: hidden;
  margin-top: 8px;
}

.meminject-left-timer-bar-fill{
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(84,255,154,.20), rgba(84,255,154,.85));
  transition: width 140ms linear;
}

.meminject-left-map{
  /* Timer supplies the divider; keep this clean */
  padding: 10px;
  background: rgba(0,0,0,.18);
  flex: 1 1 auto;
  min-height: 0;
}

.meminject-left-map-head{
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255, 219, 252, .82);
}

.meminject-left-map-body{
  margin: 8px 0 0;
  max-height: none;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(188,184,255,.84);
  text-shadow: 0 0 14px rgba(66,231,255,.10);
}

.meminject-right{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meminject-title{
  font-family: var(--font-mono);
  color: rgba(211, 255, 231, .92);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(84,255,154,.22);
}

.meminject-frame{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 219, 252, .90);
  text-shadow: 1px 0 0 rgba(66,231,255,.16), -1px 0 0 rgba(255,61,242,.12);
  border: 1px dashed rgba(84,255,154,.18);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0,0,0,.18);
}

.meminject-frame-line{ margin: 0 0 6px; }
.meminject-frame-line:last-child{ margin-bottom: 0; }

.meminject-right-status{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(188,184,255,.84);
}

.meminject-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.meminject-card{
  border-radius: 14px;
  border: 1px solid rgba(66,231,255,.18);
  background:
    linear-gradient(90deg, rgba(66,231,255,.06), rgba(255,61,242,.05)),
    rgba(0,0,0,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,61,242,.08),
    0 0 18px rgba(66,231,255,.06);
  user-select: none;
  cursor: pointer;
  padding: 0;
  color: rgba(211, 255, 231, .92);
}

.meminject-card:disabled{
  cursor: default;
  opacity: .92;
}

.meminject-card-inner{
  position: relative;
  height: 100%;
  min-height: 92px;
  transform-style: preserve-3d;
  transition: transform 260ms ease;
}
.meminject-card.is-flipped .meminject-card-inner{ transform: rotateY(180deg); }

.meminject-card-face{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
.meminject-card-back{
  background:
    radial-gradient(circle at 40% 40%, rgba(84,255,154,.12), transparent 55%),
    rgba(0,0,0,.24);
}
.meminject-card-backmark{
  opacity: .72;
  letter-spacing: .20em;
}
.meminject-card.is-flipped .meminject-card-backmark{
  opacity: 0;
}
.meminject-card-front{
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, rgba(84,255,154,.10), rgba(0,0,0,.26)),
    rgba(0,0,0,.22);
}
.meminject-card-label{
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  text-shadow: 0 0 14px rgba(84,255,154,.16);
}

.meminject-hint{
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(188,184,255,.72);
  letter-spacing: .02em;
  text-align: center;
}

.meminject-overlay.meminject-lowtime .meminject-dialog{
  box-shadow:
    0 26px 80px rgba(0,0,0,.82),
    0 0 0 1px rgba(255,61,242,.16),
    0 0 52px rgba(255, 80, 80, .12),
    0 0 42px rgba(84,255,154,.10);
}

.meminject-overlay.meminject-glitch .meminject-dialog{
  animation: decryptShake 120ms linear; /* reuse shake keyframes */
}

.meminject-shuffle{
  animation: meminjectShuffle 260ms ease;
}
@keyframes meminjectShuffle{
  0%{ transform: translateX(0); }
  35%{ transform: translateX(-6px); }
  70%{ transform: translateX(6px); }
  100%{ transform: translateX(0); }
}

/* Win cinematic */
.meminject-cine-title{
  font-family: var(--font-arcade);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(211, 255, 231, .96);
  text-shadow:
    0 0 18px rgba(84,255,154,.18),
    1px 0 0 rgba(66,231,255,.20),
    -1px 0 0 rgba(255,61,242,.14);
}

.meminject-cine-panels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.meminject-cine-panel{
  border-radius: 14px;
  border: 1px solid rgba(66,231,255,.16);
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(255,61,242,.08);
  overflow: hidden;
  padding: 10px;
}

.meminject-cine-head{
  font-family: var(--font-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(66,231,255,.86);
  opacity: .92;
}

.meminject-cine-body{
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(211, 255, 231, .88);
  white-space: pre-wrap;
  word-break: break-word;
}

.meminject-diff-chg{
  background: rgba(255, 219, 252, .12);
  box-shadow: 0 0 16px rgba(255,61,242,.12);
  border-radius: 4px;
  padding: 0 2px;
  display: inline-block;
  animation: meminjectPulse 640ms ease-in-out infinite alternate;
  position: relative;
}
.meminject-diff-chg.is-after{
  background: rgba(84,255,154,.14);
  box-shadow: 0 0 16px rgba(84,255,154,.14);
}
@keyframes meminjectPulse{
  from{ opacity: .92; filter: saturate(1); }
  to{ opacity: 1; filter: saturate(1.25); }
}

.meminject-reticle::before{
  content:"";
  position:absolute;
  inset:-6px;
  border: 1px solid rgba(66,231,255,.55);
  border-radius: 8px;
  box-shadow:
    0 0 18px rgba(66,231,255,.14),
    0 0 16px rgba(255,61,242,.10);
  pointer-events:none;
  animation: meminjectReticleContract 520ms ease-out infinite;
}

.meminject-reticle::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 8px;
  pointer-events:none;
  opacity: .9;
  background:
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) left top / 10px 1px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) left top / 1px 10px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) right top / 10px 1px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) right top / 1px 10px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) left bottom / 10px 1px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) left bottom / 1px 10px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) right bottom / 10px 1px no-repeat,
    linear-gradient(rgba(66,231,255,.9), rgba(66,231,255,.9)) right bottom / 1px 10px no-repeat;
  animation: meminjectReticleFlicker 320ms steps(2, end) infinite;
}

@keyframes meminjectReticleContract{
  from{ transform: scale(1.30); opacity: .35; }
  to{ transform: scale(1.00); opacity: 1; }
}

@keyframes meminjectReticleFlicker{
  0%, 100%{ opacity: .95; }
  50%{ opacity: .72; }
}

.meminject-progress{
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(66,231,255,.18);
  background:
    linear-gradient(90deg, rgba(66,231,255,.06), rgba(255,61,242,.05)),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,61,242,.08);
  overflow: hidden;
}
.meminject-progress-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(84,255,154,.18), rgba(84,255,154,.85));
  transition: width 1800ms linear;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .nav{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; }
  /* Mobile menu should overlay content (not push layout down) */
  .site-header .wrap{ position: relative; }
  .mobile-nav{
    display:block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 80;
  }
  .mobile-nav .sheet{
    margin-top: 0;
  }

  .hero{
    padding: 32px 0 26px;
    min-height: calc(100svh - 56px);
  }
  .hero .panel{ text-align:left; }

  /* Terminal as full-screen drawer on mobile */
  .term-overlay{
    place-items: end stretch;
    padding: 0;
  }
  .terminal{
    width: 100%;
    height: 92svh;
    border-radius: 18px 18px 0 0;
    resize: none;
  }
  .decrypt-body{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .crt{ animation: none !important; }
  body::after{ opacity: .06; }
}