/* ==========================================================================
   behind7proxies.com — a green-phosphor terminal from a movie about hacking.
   ========================================================================== */

:root {
  --bg: #040a06;
  --panel: #07120b;
  --green: #5dff8f;
  --dim: #3fba6f;
  --faint: #1b5a36;
  --land: #1d6a3e;
  --amber: #ffc24a;
  --red: #ff6b6b;
  --white: #eafff0;
  --glow: 0 0 6px rgba(93, 255, 143, .38);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 22px/1.2 "VT323", "Courier New", Courier, monospace;
  color: var(--green);
  text-shadow: var(--glow);
  background: radial-gradient(120% 90% at 50% 30%, #0a1c11 0%, var(--bg) 70%);
  background-attachment: fixed;
}

/* scanlines and the dark corners of the tube */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; }
body::before { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
body::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }

h1, h2, p, ul, ol, pre { margin: 0; }
h1, h2 { font-weight: 400; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
b { font-weight: 400; color: var(--white); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[hidden] { display: none !important; }

.dim { color: var(--dim); }
.small { font-size: 18px; }

.crt {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 860px; min-height: 100vh; min-height: 100svh; margin: 0 auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  animation: boot .7s ease-out both;
}

/* ------------------------------ top bar ------------------------------ */

.bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--faint); font-size: 20px;
}
.bar__name { text-decoration: none; color: var(--white); letter-spacing: .04em; }
.bar__status { display: flex; align-items: center; gap: 14px; color: var(--dim); white-space: nowrap; }
.bar__btn {
  padding: 0 .4em; background: none; border: 1px solid var(--faint); color: var(--dim); cursor: pointer;
}
.bar__btn:hover { color: var(--green); border-color: var(--green); }

/* ------------------------------ the board ------------------------------ */

.map { position: relative; padding: 4px; background: var(--panel); border: 1px solid var(--faint); }
.map svg { display: block; width: 100%; height: auto; max-height: 24vh; }
.map__title { padding: 0 4px 2px; font-size: 16px; color: var(--dim); letter-spacing: .06em; }
.map__title span { color: var(--amber); }

.map__land { fill: var(--land); }
.map__leg { fill: none; stroke: var(--green); stroke-width: 1.1; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.map__leg[data-state="live"] { opacity: .95; stroke: var(--amber); stroke-dasharray: 3 3; animation: march .7s linear infinite; }
.map__leg[data-state="done"] { opacity: .8; }

.map__node { transition: opacity .4s; }
.map__node[data-state="hidden"] { opacity: 0; }
.map__dot { fill: var(--bg); stroke: var(--green); stroke-width: 1; }
.map__num { font: 7px "VT323", monospace; text-anchor: middle; fill: var(--green); text-shadow: none; }
.map__node[data-state="done"] .map__dot { fill: var(--green); }
.map__node[data-state="done"] .map__num { fill: var(--bg); }
.map__node[data-state="target"] .map__dot { stroke: var(--amber); }
.map__node[data-state="target"] .map__num { fill: var(--amber); }
.map__ping { fill: none; stroke: var(--amber); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map__node[data-state="target"] .map__ping { animation: ping 1.3s ease-out infinite; }

/* ------------------------------ trace log ------------------------------ */

.log {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 3.75em; margin: 0; padding: 2px 8px; overflow: hidden;
  list-style: none; font-size: 18px; color: var(--dim); border-left: 2px solid var(--faint);
}
.log li { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log--ok { color: var(--green); }
.log--warn { color: var(--amber); }

/* ------------------------------ the stage ------------------------------ */

.stage {
  flex: 1; min-width: 0; padding: 16px 16px 20px; background: var(--panel); border: 1px solid var(--faint); outline: none;
}
.screen > * + * { margin-top: .6em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1em; }

.btn {
  padding: .22em .8em .26em; font-size: 24px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
  color: var(--green); background: transparent; border: 2px solid var(--green); border-radius: 0; cursor: pointer;
  box-shadow: 0 0 10px rgba(93, 255, 143, .2); -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, color .12s;
}
.btn:hover { background: var(--green); color: var(--bg); text-shadow: none; }
.btn--go { background: var(--green); color: var(--bg); text-shadow: none; }
.btn--go:hover { background: var(--white); border-color: var(--white); }
.btn--big { font-size: 30px; padding: .25em 1em .3em; }

.linkish {
  padding: .2em 0; background: none; border: 0; cursor: pointer;
  color: var(--dim); text-decoration: underline; text-underline-offset: .15em;
}
.linkish:hover { color: var(--green); }

/* intro */
.quote { font-size: clamp(34px, 9.5vw, 58px); line-height: .98; color: var(--white); text-wrap: balance; }
.shall { font-size: 28px; color: var(--amber); text-shadow: 0 0 8px rgba(255, 194, 74, .45); }
.cursor {
  display: inline-block; width: .5em; height: .85em; margin-left: .2em; vertical-align: -.08em;
  background: currentColor; animation: cursor 1s steps(1) infinite;
}
.intro > * { animation: rise .4s ease-out both; }
.intro > :nth-child(2) { animation-delay: .25s; }
.intro > :nth-child(3) { animation-delay: .7s; }
.intro > :nth-child(4) { animation-delay: 1.1s; }
.intro > :nth-child(5) { animation-delay: 1.4s; }
.intro > :nth-child(6) { animation-delay: 1.6s; }

/* a proxy */
.hop__count { font-size: 18px; color: var(--amber); letter-spacing: .06em; }
.hop__title { font-size: clamp(30px, 8vw, 42px); line-height: 1; color: var(--white); }
.hop__brief { margin-top: .35em; }
.hop__game { margin-top: .8em; }
.hop__say { min-height: 1.25em; color: var(--dim); }
.hop__say[data-tone="bad"] { color: var(--red); text-shadow: 0 0 6px rgba(255, 107, 107, .4); }
.hop__say[data-tone="warn"] { color: var(--amber); text-shadow: 0 0 6px rgba(255, 194, 74, .4); }
.hop__result { animation: rise .35s ease-out both; }
.hop__win { margin-bottom: .6em; }
.hop__win b { color: var(--amber); }

.meter { height: 28px; padding: 3px; border: 2px solid var(--green); }
.meter i {
  display: block; width: 0; height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, transparent 10px 13px);
  transition: width .06s linear;
}

/* 1. captive portal */
.portal { padding: 12px; border: 1px dashed var(--dim); }
.portal__brand { font-size: 32px; line-height: 1; color: var(--amber); }
.portal__terms {
  max-height: 5.1em; margin-top: 8px; padding: 6px 8px; overflow: auto;
  font-size: 18px; color: var(--dim); border: 1px solid var(--faint);
}
.portal__field { position: relative; height: 132px; margin-top: 10px; }
.portal__go { position: absolute; left: 0; top: 0; transition: transform .16s ease-out; }

/* 2. the library */
.lib__note {
  display: inline-block; padding: 8px 14px 10px; transform: rotate(-4deg);
  font-size: 20px; line-height: 1; color: #3d3200; text-shadow: none; background: #ffe76a;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .5);
}
.lib__note b { display: block; margin-top: 4px; font-size: 34px; letter-spacing: 2px; color: #1f1900; }
.lib__form { margin-top: 14px; }
.lib__form label { display: block; margin-bottom: 4px; font-size: 18px; color: var(--dim); }
.lib__row { display: flex; gap: 10px; }
.lib__row input {
  flex: 1; min-width: 0; padding: .1em .4em; font-size: 28px;
  color: var(--green); background: #020503; border: 2px solid var(--dim); border-radius: 0; caret-color: var(--amber);
}
.lib__row input::placeholder { color: var(--faint); }
.lib__hint { margin-top: 8px; }

/* 3. dial-up */
.modem > * + * { margin-top: 10px; }
.modem__line b { color: var(--green); }
.modem[data-phase="warn"] .modem__line b { color: var(--amber); }
.modem[data-phase="grandma"] .modem__line b { color: var(--red); }
.modem[data-phase="grandma"] .meter { border-color: var(--red); animation: shake .2s linear infinite; }
.modem__dial { width: 100%; padding-block: .5em; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.modem__dial.is-held { background: var(--amber); border-color: var(--amber); }

/* 4. enhance */
.cctv__screen {
  display: block; width: 100%; max-width: 400px; height: auto;
  image-rendering: pixelated; border: 2px solid var(--dim);
}
.cctv__screen.is-zapped { animation: zap .4s ease-out; }
.cctv__go { margin-top: 12px; }

/* 5. the firewall */
.fire__grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; max-width: min(460px, 46vh); margin: 8px 0; }
.fire__cell {
  aspect-ratio: 1; padding: 0; font-size: clamp(22px, 7.5vw, 36px); line-height: 1; text-shadow: none;
  color: var(--faint); background: #06100a; border: 1px solid var(--faint); border-radius: 0; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.fire__cell.is-burning {
  cursor: pointer; background: radial-gradient(circle at 50% 70%, #6b2200, #1d0800 75%); border-color: #ff7a2a;
  animation: flicker .45s ease-in-out infinite alternate;
}
.fire__count b { color: var(--amber); }

/* 6. Visual Basic. Deliberately not the terminal. */
.w95 {
  position: relative; max-width: 440px;
  font: 400 14px/1.35 Tahoma, "MS Sans Serif", Geneva, Arial, sans-serif; color: #000; text-shadow: none;
  background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff;
}
.w95 b { color: inherit; font-weight: 700; }
.w95__title {
  display: flex; justify-content: space-between; gap: 10px; padding: 3px 6px;
  font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #000080, #1084d0);
}
.w95__title span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w95__body { position: relative; min-height: 236px; padding: 12px; }
.w95__body--popup { min-height: 0; }
.w95__label { display: block; margin-bottom: 10px; }
.w95__input { width: 130px; padding: 2px 4px; font: inherit; color: #000; background: #fff; border: 2px solid; border-color: #808080 #fff #fff #808080; border-radius: 0; }
.w95__btn {
  min-width: 76px; padding: 4px 12px; font: inherit; color: #000; cursor: pointer;
  background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0;
}
.w95__btn:active { border-color: #404040 #fff #fff #404040; }
.w95__btn:disabled { color: #808080; cursor: default; }
.w95__btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.w95__progress { height: 20px; margin: 12px 0 8px; padding: 2px; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.w95__progress i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, #000080 0 10px, #c0c0c0 10px 12px); transition: width 1.3s linear; }
.w95__popups { position: absolute; inset: 0; pointer-events: none; }
.w95--popup {
  position: absolute; left: calc(10px + var(--n) * 9px); top: calc(34px + var(--n) * 11px);
  width: min(290px, calc(100% - 20px)); pointer-events: auto; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45);
  animation: pop .12s ease-out;
}
.w95__msg { display: flex; align-items: flex-start; gap: 12px; }
.w95__icon {
  flex: none; display: grid; place-items: end center; width: 30px; height: 28px; padding-bottom: 1px;
  font-weight: 900; background: #ffd400; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.w95__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* 7. the penguins */
.duel > * + * { margin-top: 10px; }
.duel__art { width: max-content; max-width: 100%; margin-inline: auto; font: inherit; line-height: 1; color: var(--white); }
.duel__code { min-height: 1.2em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel__pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duel__pad { padding: 16px 6px 14px; font-size: 32px; touch-action: none; user-select: none; -webkit-user-select: none; }
.duel__pad small { display: block; font-size: 16px; text-transform: none; letter-spacing: 0; opacity: .75; }
.duel__pad.is-hit { animation: hit .12s ease-out; }

/* the end */
.ip {
  font-size: clamp(64px, 19vw, 128px); line-height: .9; color: var(--amber);
  text-shadow: 0 0 14px rgba(255, 194, 74, .55); animation: rise .5s ease-out .2s both;
}

.hub__title { font-size: clamp(32px, 8vw, 44px); line-height: 1; color: var(--white); }
.hub__dir { margin-top: 1.1em; }
.hub__dir h2 { font-size: 28px; line-height: 1.1; color: var(--amber); text-shadow: 0 0 6px rgba(255, 194, 74, .35); }
.hub__dir h2 span { font-size: 18px; color: var(--dim); text-shadow: var(--glow); }
.hub__dir ul { margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px dashed var(--faint); }
.hub__dir a {
  display: grid; grid-template-columns: 12.5em 1fr; gap: 0 16px; align-items: baseline;
  padding: 7px 8px; text-decoration: none; border-bottom: 1px dashed var(--faint);
}
.hub__name { color: var(--white); text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.hub__desc { color: var(--dim); font-size: 20px; }
.hub__dir a:hover, .hub__dir a:focus-visible { background: var(--green); text-shadow: none; }
.hub__dir a:hover span, .hub__dir a:focus-visible span { color: var(--bg); }
.hub__readme { margin-top: 4px; color: var(--dim); max-width: 34em; }

.foot { font-size: 16px; color: var(--dim); text-align: center; }
.foot .linkish { font-size: 18px; }

/* Wide screens: the board and the log on the left, the game on the right. */
@media (min-width: 1000px) {
  .crt {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    column-gap: 16px; align-content: start; max-width: 1280px; padding-inline: 20px;
  }
  .bar, .foot { grid-column: 1 / -1; }
  .map { grid-column: 1; grid-row: 2; }
  .map svg { max-height: none; }
  .log { grid-column: 1; grid-row: 3; height: auto; min-height: 6em; max-height: 14em; justify-content: flex-start; padding-block: 6px; }
  .stage { grid-column: 2; grid-row: 2 / 4; padding: 22px 24px 26px; }
}

@media (max-width: 560px) {
  body { font-size: 21px; }
  .crt { padding-inline: 10px; }
  .bar { font-size: 18px; }
  .bar__status { gap: 9px; }
  .map svg { max-height: 21vh; }
  .map__title { font-size: 14px; }
  .log { height: 1.35em; font-size: 16px; }
  .hop__brief { font-size: 19px; }
  .portal__field { height: 104px; }
  .cctv__screen { max-width: min(400px, 42vh); }
  .stage { padding: 14px 12px 18px; }
  .hub__dir a { grid-template-columns: 1fr; }
  .lib__row { flex-wrap: wrap; }
  .lib__row input { flex-basis: 100%; }
}

/* ------------------------------ motion ------------------------------ */

@keyframes boot {
  0% { transform: scaleY(.01); filter: brightness(6); }
  55% { transform: scaleY(1); filter: brightness(2); }
  100% { transform: none; filter: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes cursor { 50% { opacity: 0; } }
@keyframes march { to { stroke-dashoffset: -6; } }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes zap { 0% { transform: scale(1.08); filter: brightness(2.4); } 100% { transform: none; filter: none; } }
@keyframes flicker { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
@keyframes hit { 50% { transform: scale(.95); filter: brightness(1.6); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}