:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, monospace;
  color: #fff;
  background: #09051d;
  --cyan: #39f5f6;
  --pink: #ff51d2;
  --yellow: #ffe652;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 50% 40%, #21105788, transparent 65%);
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 17px 28px, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 71px 106px, #7778fb 0 1px, transparent 1.5px),
    radial-gradient(circle at 133px 49px, #fe95f1 0 1px, transparent 1.5px),
    radial-gradient(circle at 88px 161px, #fff9 0 1px, transparent 1.5px),
    radial-gradient(circle at 198px 124px, #70ffff 0 1.2px, transparent 1.8px);
  background-size: 211px 193px, 263px 229px, 307px 251px, 347px 313px, 389px 367px;
}

.bounce-space { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.flying-jim {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(104px, 14vw, 186px);
  height: auto;
  aspect-ratio: 1186 / 1326;
  object-fit: contain;
  transform: translate3d(18px, 85px, 0);
  filter: drop-shadow(3px 3px 0 #ff42d088) drop-shadow(-2px -2px 0 #46ffff99);
  will-change: transform;
}

.flying-jim.is-reacting { filter: drop-shadow(4px 4px 0 #ff51d2) drop-shadow(-3px -3px 0 #ffe652); }
.bounce-caption { position: absolute; transform: translateX(-50%); padding: 4px 8px; border: 1px solid var(--yellow); background: #14092e; color: var(--yellow); font: bold 14px "Courier New", monospace; box-shadow: 3px 3px 0 var(--pink); white-space: nowrap; }
[hidden] { display: none !important; }

.webpage { width: min(100% - 48px, 1016px); margin: 0 auto; padding: 25px 0 18px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 16px; font-size: 11px; letter-spacing: 1px; }
.welcome { color: var(--cyan); }
.address { color: #b8a5dc; font-size: 10px; }

.ticker { overflow: hidden; height: 30px; border: 1px solid #7750c9; background: #211039; color: var(--yellow); font-size: 11px; letter-spacing: 1.6px; }
.ticker-track { display: flex; width: max-content; animation: scroll-text 32s linear infinite; }
.ticker-track span { flex: none; padding: 7px 24px 7px 0; white-space: nowrap; }
@keyframes scroll-text { to { transform: translateX(-50%); } }

main { position: relative; margin: 28px 0 25px; padding: 34px 30px 26px; text-align: center; border: 2px solid #8761d6; outline: 1px solid #48346b; outline-offset: 5px; background: #0e0825c9; box-shadow: inset 0 0 0 4px #170d32, 7px 7px 0 #01010e; }
main::before, main::after { position: absolute; font-size: 35px; color: var(--pink); text-shadow: 2px 2px #fff; content: "✦"; top: 24px; }
main::before { left: 25px; }
main::after { right: 25px; color: var(--cyan); }
.little-heading { color: #b79fe5; font-size: 10px; letter-spacing: 2px; }
.little-heading span { margin: 0 10px; color: var(--yellow); }
h1 { margin: 20px 0 0; font-family: Impact, "Arial Black", sans-serif; line-height: .93; font-weight: 900; letter-spacing: -2px; }
.justice { display: block; font-size: clamp(64px, 9vw, 114px); color: var(--yellow); text-shadow: 3px 3px 0 #c3690b, 6px 6px 0 #e440cb, 9px 9px 0 #372784; -webkit-text-stroke: 1px #fff589; }
.for-jim { display: block; position: relative; width: max-content; max-width: 100%; margin: 4px auto 0; font-size: clamp(64px, 9vw, 114px); color: #fff0a4; text-shadow: 3px 3px 0 #b97316, 6px 6px 0 #e440cb, 9px 9px 0 #372784; -webkit-text-stroke: 1px #fff9cf; }
.title-star { position: absolute; font-size: 27px; top: 9px; right: -42px; color: var(--pink); -webkit-text-stroke: 0; text-shadow: 2px 2px 0 #773795; transform: rotate(15deg); }
.the-game { display: inline-block; position: relative; z-index: 4; margin-top: 27px; padding: 7px 21px 6px; font-family: "Courier New", Courier, monospace; font-weight: 700; font-size: 18px; letter-spacing: 8px; line-height: 1; color: var(--cyan); background: #0e0825; border: 1px solid var(--cyan); box-shadow: 3px 3px 0 #087580; }
.divider { display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 432px; margin: 24px auto 22px; color: #8c64c3; font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #774cad); }
.divider::after { transform: rotate(180deg); }
.divider span:nth-child(2) { color: var(--cyan); }

.construction { position: relative; z-index: 4; margin: 0 auto; max-width: 500px; border: 2px solid var(--yellow); box-shadow: 5px 5px 0 #322640; background: #100b20; }
.construction-label { padding: 8px 10px; background: repeating-linear-gradient(135deg, var(--yellow) 0 12px, #1b142c 12px 24px); color: #151018; font-size: 12px; font-weight: 900; letter-spacing: 2px; text-shadow: -1px -1px var(--yellow), 1px 1px var(--yellow), -1px 1px var(--yellow), 1px -1px var(--yellow); }
.construction-label-text { padding: 3px 9px; background: var(--yellow); }
.construction-body { padding: 24px 15px 22px; }
.release-note { margin: 0 0 13px; color: #af94cd; font-size: 10px; letter-spacing: 2px; }
h2 { margin: 0; color: var(--pink); font-size: clamp(27px, 4.8vw, 43px); font-weight: 700; letter-spacing: -1.5px; text-shadow: 2px 2px 0 #750b69; }
.blinking-cursor { animation: blink-cursor 1.4s step-end infinite; color: var(--cyan); }
@keyframes blink-cursor { 50% { opacity: 0; } }
.wait-message { margin: 17px 0 0; color: #ded1f0; font-size: 12px; line-height: 1.8; }
.jim-note { margin: 24px auto 16px; color: #af94ca; font-size: 10px; line-height: 1.6; }
.controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; position: relative; z-index: 4; }
button { cursor: pointer; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; background: #c4c4c4; color: #151515; padding: 7px 11px; font: 700 10px "Courier New", Courier, monospace; letter-spacing: .3px; box-shadow: 1px 1px 0 #000; }
button:hover { background: #dedede; }
button:active { border-color: #555 #fff #fff #555; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.bounce-counter { display: flex; gap: 8px; align-items: center; color: #ac99bf; font-size: 9px; letter-spacing: .5px; }
output { background: #000; border: 2px inset #655279; padding: 4px 6px 3px; color: #54ff92; font-size: 13px; letter-spacing: 2px; }
.noscript { font-size: 12px; color: var(--yellow); }
.sound-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 17px; color: #af94ca; font-size: 9px; letter-spacing: .3px; }
.sound-controls input { width: 100px; cursor: pointer; accent-color: var(--pink); }
.sound-controls input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#sound-status { flex-basis: 100%; color: #9280ad; line-height: 1.5; }

footer { text-align: center; color: #9381b0; font-size: 9px; }
.web-badges { display: flex; justify-content: center; gap: 9px; }
.web-badge { display: flex; align-items: center; width: 88px; height: 31px; border: 2px outset #dadada; background: #dedede; color: #171221; text-align: left; }
.web-badge b { display: flex; justify-content: center; align-items: center; align-self: stretch; width: 34px; background: #062f8f; color: #fff; font: italic 800 11px Arial, sans-serif; }
.web-badge span { padding: 0 4px; font: 800 7px/1.3 Arial, sans-serif; }
.jim-badge b { background: #b71e9d; color: #fff287; }
.plug-badge b { background: #056534; }
footer p { margin: 16px 0 8px; line-height: 1.5; }
footer small { color: #6f5e8e; font-size: 9px; }
footer small span { margin: 0 7px; }

body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
@media (max-width: 600px) {
  .webpage { width: calc(100% - 30px); padding-top: 17px; }
  .masthead { justify-content: center; padding-bottom: 13px; }
  .welcome { font-size: 8px; letter-spacing: .4px; }
  .address { display: none; }
  main { margin-top: 24px; padding: 34px 13px 24px; }
  main::before, main::after { top: 12px; font-size: 19px; }
  main::before { left: 11px; }
  main::after { right: 11px; }
  .little-heading { font-size: 8px; letter-spacing: .5px; }
  .little-heading span { margin: 0 3px; }
  h1 { margin-top: 22px; }
  .justice, .for-jim { font-size: clamp(55px, 15vw, 88px); letter-spacing: -1px; }
  .title-star { font-size: 17px; right: -23px; }
  .the-game { font-size: 14px; letter-spacing: 5px; margin-top: 24px; }
  .construction-label { font-size: 10px; letter-spacing: 1px; }
  .construction-body { padding: 22px 10px; }
  .release-note { font-size: 8px; letter-spacing: 1px; }
  .jim-note { max-width: 260px; }
  .controls { gap: 14px; }
}