:root{
  --bg:#050a06;
  --bg2:#040804;
  --fg:#b9ffb9;
  --fg2:#6bff6b;
  --muted:#6fbf6f;
  --line:rgba(107,255,107,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, rgba(107,255,107,.08), transparent 60%),
              radial-gradient(900px 700px at 90% 10%, rgba(107,255,107,.05), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.5;
}

a{color:var(--fg2)}
code{color:var(--fg2)}

.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;
}

.terminal{
  max-width: 980px;
  margin: 48px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.terminal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.45);
}
.terminal__left{display:flex;align-items:center;gap:10px;min-width:0}
.terminal__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.terminal__dots{display:flex;gap:7px}
.dot{width:10px;height:10px;border-radius:999px;opacity:.9}
.dot--red{background:#ff5f56}
.dot--yellow{background:#ffbd2e}
.dot--green{background:#27c93f}
.terminal__title{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  color:var(--fg2);
  font-size:12px;
  letter-spacing:.02em;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.terminal__title:hover{filter:brightness(1.15)}
.terminal__crumbs{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.terminal__clock{
  color: var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}
.crumb{
  color:var(--fg2);
  background:transparent;
  border:0;
  font:inherit;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.crumb:hover{filter:brightness(1.15)}
.crumbsep{opacity:.7}

.menubar{
  display:flex;
  gap:2px;
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.35);
  position: relative;
  user-select:none;
}
.menubar__item{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.menubar__item:hover,
.menubar__item[aria-expanded="true"]{
  background: rgba(107,255,107,.08);
  outline:1px solid rgba(107,255,107,.14);
}

.dropdown{
  position:absolute;
  top: 40px;
  left: 8px;
  min-width: 240px;
  border:1px solid rgba(107,255,107,.18);
  border-radius:12px;
  background: rgba(0,0,0,.85);
  box-shadow: var(--shadow);
  padding:6px;
  z-index: 10;
}
.dropdown--sub{
  top: 0;
  left: calc(100% - 6px);
  min-width: 240px;
}
.dropdown__submenu{position:relative}
.dropdown__submenu:hover > .dropdown--sub{display:block}
.dropdown__submenu > .dropdown--sub{display:none}
.dropdown__item--submenu::after{
  content:"▸";
  margin-left:auto;
  opacity:.8;
}
.dropdown__sep{height:1px;background:rgba(107,255,107,.12);margin:6px 6px}
.dropdown__item{
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  color:var(--fg);
  font:inherit;
  text-decoration:none;
  cursor:pointer;
}
.dropdown__item:hover{
  background: rgba(107,255,107,.10);
}
.dropdown__item code{color:var(--fg2)}

.terminal__screen{
  padding:16px 14px;
  min-height: 62vh;
  max-height: 70vh;
  overflow:auto;
  scrollbar-color: rgba(107,255,107,.30) rgba(0,0,0,.2);
  position: relative;
}

.line{white-space:pre-wrap;word-break:break-word}
.line--muted{color:var(--muted)}
.line a{color:var(--fg2)}
.line code{color:var(--fg2)}
.cmdlink{
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:var(--fg2);
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset: 2px;
}
.cmdlink:hover{filter:brightness(1.12)}
.block{margin:10px 0;padding:10px 12px;border:1px dashed rgba(107,255,107,.22);border-radius:12px;background:rgba(0,0,0,.22)}

.ascii{
  margin:0;
  white-space:pre;
  color:var(--fg);
}

.embed{margin-top:10px}
.embed__meta{color:var(--muted);margin-bottom:8px}
.embed__iframe{width:100%;height:360px;border:1px solid rgba(107,255,107,.16);border-radius:12px}
.img__wrap{margin-top:10px;display:inline-block}
.img__wrap img{max-width:100%;height:auto;border:1px solid rgba(107,255,107,.16);border-radius:12px}

.lightbox{
  position:fixed;
  inset:0;
  z-index: 1000;
}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.75);
}
.lightbox__panel{
  position:absolute;
  inset: 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.lightbox__close{
  align-self:flex-end;
  border:1px solid rgba(107,255,107,.22);
  background: rgba(0,0,0,.45);
  color: var(--fg2);
  font: inherit;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.lightbox__close:hover{background: rgba(0,0,0,.60)}
.lightbox__img{
  max-width: min(1200px, 96vw);
  max-height: 88vh;
  border-radius: 14px;
  border:1px solid rgba(107,255,107,.18);
  background: rgba(0,0,0,.2);
}

/* Contact overlay (hidden command) */
.contact-overlay{
  position:absolute;
  inset:0;
  z-index: 50;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.92);
}
.contact-overlay--active{display:flex}
.contact-overlay__stage{
  position:relative;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.contact-overlay__img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: contrast(1.18) brightness(.96) saturate(1.55) drop-shadow(0 0 22px var(--fg2));
  opacity: .95;
}
.contact-overlay__img--glitch{
  position:absolute;
  inset:0;
  mix-blend-mode: screen;
  opacity:.34;
  filter: contrast(1.4) saturate(2.2) hue-rotate(12deg) drop-shadow(0 0 30px var(--fg2));
  animation: contactGlitch 2.2s steps(2, end) infinite;
}
.contact-overlay__tint{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 620px at 40% 35%, var(--fg2), transparent 60%),
    radial-gradient(700px 520px at 70% 60%, var(--fg2), transparent 62%);
  mix-blend-mode: screen;
  opacity:.12;
  pointer-events:none;
}
.contact-overlay__noise{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 4px);
  opacity:.16;
  mix-blend-mode: overlay;
  animation: contactNoise 140ms steps(2) infinite;
  pointer-events:none;
}
.contact-overlay__hint{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: var(--muted);
  font-size: 12px;
  text-shadow: 0 0 12px rgba(0,0,0,.85);
  pointer-events:none;
}

@keyframes contactNoise{
  0%{transform: translate3d(0,0,0); filter: contrast(1.2)}
  25%{transform: translate3d(-2px,1px,0); filter: contrast(1.35)}
  50%{transform: translate3d(2px,-1px,0); filter: contrast(1.45)}
  75%{transform: translate3d(1px,2px,0); filter: contrast(1.25)}
  100%{transform: translate3d(0,0,0); filter: contrast(1.4)}
}

@keyframes contactGlitch{
  0%{transform: translate3d(0,0,0) skewX(0deg); clip-path: inset(0 0 0 0)}
  12%{transform: translate3d(-8px,0,0) skewX(-2deg); clip-path: inset(12% 0 58% 0)}
  16%{transform: translate3d(10px,0,0) skewX(2deg); clip-path: inset(42% 0 36% 0)}
  22%{transform: translate3d(-6px,0,0) skewX(-1deg); clip-path: inset(68% 0 18% 0)}
  30%{transform: translate3d(0,0,0); clip-path: inset(0 0 0 0)}
  56%{transform: translate3d(4px,0,0); clip-path: inset(8% 0 72% 0)}
  62%{transform: translate3d(-10px,0,0); clip-path: inset(52% 0 28% 0)}
  70%{transform: translate3d(0,0,0); clip-path: inset(0 0 0 0)}
  100%{transform: translate3d(0,0,0); clip-path: inset(0 0 0 0)}
}

.prompt{
  display:flex;
  align-items:center;
  gap:0;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background: rgba(0,0,0,.45);
}
.prompt__lhs{color:var(--muted);margin-right:10px}
.prompt__buffer{
  min-width: 0;
  white-space: pre;
  color: var(--fg);
}
.prompt__input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  color:transparent;
  font: inherit;
  padding:0;
  caret-color: transparent;
  width: 1px;
  min-width: 1px;
  opacity: 0;
}
#term-login .prompt__input{
  opacity:1;
  color:var(--fg);
  caret-color:var(--fg);
  width:100%;
  min-width:0;
  border:1px solid var(--muted);
  border-radius:6px;
  padding:8px 10px;
  background:rgba(0,0,0,.35);
}
#term-login .prompt__input::placeholder{color:var(--muted)}
#term-login .prompt__input:focus{border-color:var(--accent);outline:none}
.cursor{
  width: 0.62em;
  height: 1.2em;
  background: var(--fg2);
  display:inline-block;
  border-radius: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: -0.15em;
}
@keyframes blink{ 50%{opacity:0} }

@media (max-width: 780px){
  .terminal{margin:18px 12px}
  .terminal__screen{min-height: 72vh}
}

/* Rainbow (hidden theme) */
@keyframes rainbowHue {
  0%{filter:hue-rotate(0deg) saturate(1.4)}
  100%{filter:hue-rotate(360deg) saturate(1.4)}
}

@keyframes rainbowBg {
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}

html[data-theme="rainbow"] body{
  background: linear-gradient(120deg, #18001f, #001a2a, #001f12, #2a1b00, #250010);
  background-size: 300% 300%;
  animation: rainbowBg 10s ease-in-out infinite;
}

html[data-theme="rainbow"] .terminal{
  animation: rainbowHue 2.2s linear infinite;
  box-shadow: 0 18px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04) inset;
}

html[data-theme="rainbow"] .cursor{
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 0 22px rgba(255,255,255,.18);
}

html[data-theme="rainbow"] .arcade__crt{
  animation: rainbowHue 1.4s linear infinite;
}

/* Arcade overlay */
.arcade{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.92);
}
.arcade--active{display:flex}

/* old-TV static effect while transitioning */
.arcade__static{
  position:absolute;
  inset:0;
  opacity: 0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, rgba(0,0,0,0) 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(900px 600px at 40% 20%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 600px at 60% 80%, rgba(255,255,255,.04), transparent 60%);
  animation: staticFlicker 140ms steps(2) infinite;
}
.arcade--entering .arcade__static,
.arcade--exiting .arcade__static{
  opacity: 1;
}
@keyframes staticFlicker{
  0%{transform: translate3d(0,0,0); filter: contrast(1.3) brightness(.9)}
  25%{transform: translate3d(-2px,1px,0); filter: contrast(1.4) brightness(1.0)}
  50%{transform: translate3d(2px,-1px,0); filter: contrast(1.5) brightness(.95)}
  75%{transform: translate3d(1px,2px,0); filter: contrast(1.35) brightness(1.05)}
  100%{transform: translate3d(0,0,0); filter: contrast(1.45) brightness(.92)}
}

.arcade__crt{
  position: relative;
  /* Match the arcade canvas native width (960px) to avoid fractional upscaling
     that can make glyph-based UI elements look like they overlap at some zoom/DPI. */
  width: min(960px, 92vw);
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: 0 35px 120px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.04) inset;
  background: rgba(0,0,0,.45);
  overflow: hidden;
  transform: perspective(900px) rotateX(1.6deg);
}

.arcade__screen{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
}

.arcade__canvas{
  width:100%;
  height:100%;
  display:block;
}

/* scanlines */
.arcade__scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.20) 0px,
    rgba(0,0,0,.20) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: multiply;
  opacity: .55;
}

/* vignette + subtle glow */
.arcade__vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 600px at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.50) 78%, rgba(0,0,0,.78) 100%);
}
.arcade__phosphor{
  position:absolute;
  inset:-6px;
  pointer-events:none;
  border-radius: 30px;
  opacity: .16;
  box-shadow: 0 0 44px var(--fg2);
}

.arcade__hud{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  pointer-events:none;
  text-shadow: 0 0 12px rgba(0,0,0,.9);
}
.arcade__hud strong{color:var(--fg2)}

body.arcade-mode .terminal{
  filter: blur(2px) brightness(.55);
}
body.arcade-mode .terminal *{
  pointer-events:none;
}