* {
  box-sizing: border-box;
}

html {
  overscroll-behavior: none;
}

body {
  font-family: "Courier New", Courier, monospace;
  margin: 8px;
}

img {
  max-width: 100%;
  image-rendering: pixelated;
}

table {
  max-width: 96vw;
}

.blink {
  animation: kd-blink 1.06s step-end infinite;
}

@keyframes kd-blink {
  50% {
    visibility: hidden;
  }
}
.welcome-marquee {
  width: 96%;
  padding: 4px 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  color: #00ff99;
  text-shadow: 1px 1px 0 #003300;
}

.main-table {
  border-style: ridge;
  border-color: #6666cc;
}

.rainbow-title {
  font-family: "DM Serif Display", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(44px, 6vw, 76px);
  margin: 8px 0 28px;
  color: #000000;
  text-shadow: 2px 2px 0 #ff66cc;
  letter-spacing: clamp(0.4rem, 1.5vw, 1.1rem);
  text-indent: clamp(0.4rem, 1.5vw, 1.1rem);
  white-space: nowrap;
}
@media only screen and (max-width: 600px) {
  .rainbow-title {
    font-size: 28px;
    letter-spacing: 0.25rem;
    text-indent: 0.25rem;
  }
}

.main-table .rainbow-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: clamp(0.3rem, 1vw, 0.8rem);
  text-indent: clamp(0.3rem, 1vw, 0.8rem);
}

.section-head {
  font-family: "Courier New", Courier, monospace;
  color: #66ffcc;
  font-size: 24px;
  text-shadow: 2px 2px 0 #003333;
}

.sparkle-frame {
  color: #ffff99;
  font-size: 20px;
}

.episode-table {
  border-style: outset;
  border-color: #9999ff;
}

.episode-link {
  font-family: "Courier New", Courier, monospace;
  font-size: 24px;
  text-decoration: none;
}
.episode-link:hover {
  background-color: #00ffff;
  color: #000033;
}
@media only screen and (max-width: 600px) {
  .episode-link {
    font-size: 18px;
  }
}

.btn3d {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  padding: 4px 14px;
  margin: 6px 4px;
  color: #000000;
  background-color: #c0c0c0;
  border: 3px outset #ffffff;
  cursor: pointer;
}
.btn3d:active {
  border-style: inset;
}

.midi-console {
  border-style: ridge;
  border-color: #9966ff;
}

.hit-counter {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #00ff00;
  background-color: #000000;
  padding: 4px 6px 4px 12px;
  border: 3px inset #666666;
}

.webring {
  border-style: groove;
  border-color: #66cccc;
}
.webring a {
  text-decoration: none;
}

.badge88 {
  display: inline-block;
  width: 88px;
  height: 31px;
  vertical-align: middle;
  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.2;
  padding-top: 4px;
  margin: 0 2px;
  color: #ffff00;
  background-color: #333333;
  border: 2px outset #999999;
}
.badge88--pink {
  color: #ff99cc;
  background-color: #330033;
}
.badge88--green {
  color: #66ff66;
  background-color: #003300;
}

.play-button {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 26px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  color: #000000;
  background-color: #00ffcc;
  padding: 12px 28px;
  border: 5px outset #99ffee;
}
.play-button:link, .play-button:visited {
  color: #000000;
}
.play-button:hover {
  background-color: #ff99ff;
  border-color: #ffccff;
}
.play-button:active {
  border-style: inset;
}
.play-button.is-playing {
  background-color: #ffcc00;
  border-color: #ffe680;
  border-style: inset;
}
.play-button.is-playing:hover {
  background-color: #ff99ff;
  border-color: #ffccff;
}
@media only screen and (max-width: 600px) {
  .play-button {
    font-size: 18px;
    padding: 10px 16px;
  }
}

.transport {
  display: inline-block;
  margin-top: 6px;
  color: #00ffcc;
  letter-spacing: 1px;
}
.transport[hidden] {
  display: none;
}

.tracklist {
  border-color: #3366cc;
}
.tracklist td {
  padding: 4px 10px;
}

.sparkle {
  position: absolute;
  pointer-events: none;
  color: #ffff99;
  font-size: 14px;
  z-index: 9999;
  animation: kd-sparkle-fall 0.9s ease-out forwards;
}

@keyframes kd-sparkle-fall {
  to {
    transform: translateY(18px);
    opacity: 0;
  }
}
.gb-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.gb-input {
  font-family: "Courier New", monospace;
  font-size: 14px;
  color: #00ff99;
  background-color: #000000;
  border: 2px inset #666666;
  width: 90%;
  max-width: 420px;
  padding: 4px;
  margin: 2px 0 8px;
}

.gb-entries {
  width: 100%;
}

.gb-entry {
  margin: 6px auto;
  border-style: ridge;
  border-color: #3366cc;
  text-align: left;
}

.zone {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  border-bottom: solid 6px black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zone__center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 4rem 1rem;
  max-width: 760px;
}
.zone--sky {
  background: url(../img/gifcities/tile_water.gif);
}
.zone--sky .zone__center {
  max-width: none;
}
.zone--sky .zone__center p:has(img) {
  margin-top: 3.5rem;
}
.zone--sky .blink {
  margin-top: 2rem;
}
.zone--shallows {
  background-image: linear-gradient(rgba(0, 10, 70, 0.4), rgba(0, 10, 70, 0.4)), url(../img/gifcities/tile_zigzag_deep.gif);
}
.zone--reef {
  background-image: linear-gradient(rgba(0, 10, 70, 0.45), rgba(0, 10, 70, 0.45)), url(../img/gifcities/tile_interference.gif);
}
.zone--midnight {
  background-image: linear-gradient(rgba(0, 0, 40, 0.35), rgba(0, 0, 45, 0.4)), url(../img/gifcities/tile_starburst.gif);
}
.zone--void {
  background-image: linear-gradient(rgba(0, 15, 105, 0.82), rgba(0, 15, 105, 0.82)), url(../img/gifcities/tile_shimmer.gif);
  background-repeat: round;
}
.zone--tank {
  background-image: linear-gradient(rgba(15, 0, 35, 0.45), rgba(15, 0, 35, 0.45)), url(../img/gifcities/tile_watersheen.gif);
}
.zone--floor {
  min-height: 0;
  background: url(../img/gifcities/bg_stars.gif);
  padding: 2rem 0;
}

.depth {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #ffff99;
  background-color: rgba(0, 0, 0, 0.45);
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 153, 0.4);
}

.decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  max-width: 28vw;
}

.fragment {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  --sway: 6px;
  --drift: 17s;
  --phase: 0s;
  animation: kd-fragment-drift var(--drift) ease-in-out var(--phase) infinite alternate, kd-shimmer calc(var(--drift) * 0.63) ease-in-out var(--phase) infinite;
}

.fragment ~ .fragment {
  --phase: calc(var(--drift) * -0.45);
}

.zone--shallows .fragment {
  --sway: 8px;
  --drift: 13s;
}

.zone--reef .fragment {
  --sway: 6px;
  --drift: 16s;
}

.zone--midnight .fragment {
  --sway: 5px;
  --drift: 20s;
}

.zone--void .fragment {
  --sway: 4px;
  --drift: 25s;
}

.zone--tank .fragment {
  --sway: 3px;
  --drift: 30s;
  --shimmer-lo: 0.88;
}

@keyframes kd-fragment-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(calc(var(--sway) * 0.6), calc(var(--sway) * -0.8), 0) rotate(-0.6deg);
  }
  50% {
    transform: translate3d(calc(var(--sway) * -0.4), calc(var(--sway) * -1.3), 0) rotate(0.4deg);
  }
  75% {
    transform: translate3d(calc(var(--sway) * -0.9), calc(var(--sway) * -0.5), 0) rotate(0.8deg);
  }
  100% {
    transform: translate3d(calc(var(--sway) * 0.3), 0, 0) rotate(-0.3deg);
  }
}
.ltr {
  display: inline-block;
  animation: kd-wave var(--wave, 3.4s) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--wave-step, -0.075s));
}

.zone--midnight .ltr,
.zone--void .ltr {
  --wave: 4.2s;
  --wave-step: -0.06s;
}

.zone--tank .ltr {
  --wave: 5s;
  --wave-step: -0.05s;
}

@keyframes kd-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes kd-shimmer {
  0%, 100% {
    opacity: var(--shimmer-lo, 0.72);
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fragment,
  .ltr {
    animation: none;
  }
}
.epi {
  display: inline-block;
  font-family: "DM Serif Display", serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 6.5vw, 4.6rem);
  letter-spacing: 0.6rem;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 3px 3px 0 #000000, 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.epi:hover {
  filter: invert(100%);
}
.epi--1 {
  color: #ffcc00;
}
.epi--1:hover {
  filter: none;
  color: #ff2d95;
}
.epi--2 {
  color: #ff66cc;
}
.epi--3 {
  color: #66ffcc;
}
.epi--4 {
  color: #ff7a1f;
}
.epi--4:hover {
  filter: none;
  color: #ffffff;
}
.epi--5 {
  color: #cc99ff;
}

.epi-sub:link,
.epi-sub:visited {
  color: #00ffff;
}

.epi-group {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 8px double transparent;
}
.epi-group:has(.epi:hover) {
  border-color: var(--box, #ffffff);
}

.zone--shallows {
  --box: #ffcc00;
}

.zone--reef {
  --box: #ff66cc;
}

.zone--midnight {
  --box: #19e3ff;
}

.zone--void {
  --box: #ff7a1f;
}

.zone--tank {
  --box: #cc99ff;
}

.bob {
  animation: kd-bob 4s ease-in-out infinite alternate;
}

.drift {
  animation: kd-drift 9s ease-in-out infinite alternate;
}

@keyframes kd-bob {
  from {
    transform: translateY(0) rotate(-2deg);
  }
  to {
    transform: translateY(-1.6rem) rotate(2deg);
  }
}
@keyframes kd-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-3.5rem) translateY(-0.8rem);
  }
}
.deck {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10000;
  text-align: center;
  background-color: #330066;
  border: 3px ridge #9966ff;
  padding: 6px 10px;
}
.deck img {
  width: 14px;
  vertical-align: middle;
}
.deck .btn3d {
  font-size: 11px;
  padding: 2px 8px;
  margin: 4px 2px 0;
}

@media only screen and (max-width: 600px) {
  .fragment {
    display: none;
  }
  .decor {
    max-width: 20vw;
  }
}