/* WhiteCup.net — J.A.R.V.I.S. HUD: boot screen, terminal, radar, rain */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #02050d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 13px/1.6 var(--mono);
  color: #7dd3fc;
  transition:
    opacity 0.8s,
    visibility 0.8s;
  padding: 20px;
}
#boot.off {
  opacity: 0;
  visibility: hidden;
}
#boot .core {
  width: 190px;
  height: 190px;
}
#boot .r1,
#boot .r2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 8s linear infinite;
}
#boot .r2 {
  animation-duration: 5s;
  animation-direction: reverse;
}
#boot pre {
  margin: 18px 0 0;
  min-height: 140px;
  width: min(440px, 86vw);
  white-space: pre-wrap;
}
#boot .bar {
  width: min(440px, 86vw);
  height: 3px;
  background: #0b1d33;
  margin: 6px 0 14px;
}
#boot .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fbbf24, #38bdf8);
  box-shadow: 0 0 12px #38bdf8;
  transition: width 0.2s;
}
#boot small {
  color: #4a6a8c;
  letter-spacing: 0.12em;
}
#fxrain {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
}
.hud #fxrain {
  display: block;
}
.hud body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(56, 189, 248, 0.045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 10, 30, 0.65));
  animation: fl 6s infinite;
}
@keyframes fl {
  0%,
  93%,
  100% {
    opacity: 1;
  }
  94% {
    opacity: 0.6;
  }
  96% {
    opacity: 1;
  }
  97% {
    opacity: 0.75;
  }
}
.hud .card {
  --b: linear-gradient(#fbbf24, #fbbf24);
  background-image: var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b);
  background-position:
    0 0,
    0 0,
    100% 0,
    100% 0,
    0 100%,
    0 100%,
    100% 100%,
    100% 100%;
  background-size:
    16px 2px,
    2px 16px,
    16px 2px,
    2px 16px,
    16px 2px,
    2px 16px,
    16px 2px,
    2px 16px;
  background-repeat: no-repeat;
}
.hud .pill {
  border-color: #fbbf24;
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.3);
}
.hud .pill i {
  background: #fbbf24;
  box-shadow: 0 0 10px #fbbf24;
}
.hud h2 small,
.hud .svc i {
  color: #fbbf24;
}
.hud #fxr {
  border-style: dashed;
  border-color: #fbbf24;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
}
.hud #fxr::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#fbbf24, #fbbf24) center/1px 150% no-repeat,
    linear-gradient(#fbbf24, #fbbf24) center/150% 1px no-repeat;
}
.hud #fxr::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px dotted #22d3ee;
  border-radius: 50%;
  animation: spin 4s linear infinite;
}
.hud #fxr.big {
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
}
#fxl {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  font: 11px/1.4 var(--mono);
  color: #fbbf24;
  white-space: pre;
  text-shadow: 0 0 8px #fbbf24;
}
.hud #fxl {
  display: block;
}
h1.gl {
  animation: gl 0.42s steps(2) 1;
}
@keyframes gl {
  20% {
    transform: translate(-4px, 1px) skewX(5deg);
    filter: hue-rotate(70deg) drop-shadow(3px 0 #f0f);
  }
  45% {
    transform: translate(4px, -1px);
    filter: hue-rotate(-70deg) drop-shadow(-3px 0 #0ff);
  }
  70% {
    transform: translate(-2px, 0) skewX(-3deg);
  }
  100% {
    transform: none;
  }
}
#hp {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 45;
  width: 210px;
  background: rgba(2, 8, 20, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 10px;
  font: 11px/1.5 var(--mono);
  color: #9fd8ff;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.18);
}
#hp .hh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
#hp b {
  color: #fbbf24;
  letter-spacing: 0.14em;
}
#hp button {
  background: none;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  border-radius: 4px;
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}
#hp button:hover {
  background: rgba(34, 211, 238, 0.15);
}
#hp #ht {
  width: 100%;
  margin-top: 8px;
  border-color: #fbbf24;
  color: #fbbf24;
  padding: 5px;
}
#hp .hr {
  display: flex;
  gap: 10px;
  align-items: center;
}
#rd {
  width: 84px;
  height: 84px;
  flex: none;
}
#hs {
  margin: 0;
  font: inherit;
  white-space: pre;
}
.rg {
  fill: none;
  stroke: rgba(34, 211, 238, 0.45);
  stroke-width: 0.6;
}
#rd .sw {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 3.2s linear infinite;
}
#rd .sw path {
  fill: rgba(34, 211, 238, 0.35);
}
#rd .sw line {
  stroke: #22d3ee;
  stroke-width: 0.8;
}
#bl circle {
  fill: #fbbf24;
  animation: bp 2.4s forwards;
}
@keyframes bp {
  to {
    opacity: 0;
  }
}
#tm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(48vh, 400px);
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: rgba(2, 8, 20, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #22d3ee;
  box-shadow: 0 -10px 50px rgba(34, 211, 238, 0.25);
  font: 14px/1.6 var(--mono);
  transform: translateY(105%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#tm.on {
  transform: none;
}
#to {
  flex: 1;
  overflow: auto;
  padding: 14px 20px;
  color: #bfe8ff;
  white-space: pre-wrap;
}
#to .p {
  color: #fbbf24;
}
#to .y {
  color: #22d3ee;
}
#to .g {
  color: #34d399;
  font-weight: 700;
  font-size: 18px;
}
#to .e {
  color: #f87171;
}
#to .m {
  color: #5b6b99;
}
.ti {
  display: flex;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  color: #34d399;
}
.ti input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  color: #fff;
  font: inherit;
  min-width: 0;
}
@media (max-width: 700px) {
  #hp {
    width: auto;
    left: 12px;
    bottom: 12px;
  }
  #hp .hr {
    display: none;
  }
}
#boot .bw {
  position: relative;
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
}
#boot .bw .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#boot .bw .cupc {
  width: 180px;
  height: auto;
  position: relative;
}