:root {
  color-scheme: dark;
  --stormy-cyan: #39d6ea;
  --stormy-deep: #03141f;
  --nobs-gold: #e0b34d;
  --nobs-deep: #17140b;
  --ease-out: cubic-bezier(.18,.78,.2,1);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  margin: 0;
  background: #071015;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.portal {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  background: #071015;
}

.server {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

.server--stormy {
  z-index: 2;
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}

.server--nobs {
  z-index: 1;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}

.server__background,
.server__shade {
  position: absolute;
  inset: -3%;
  display: block;
}

.server__background {
  background-image: url("minecraft.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.025);
  transition:
    transform 850ms var(--ease-out),
    filter 700ms ease;
  will-change: transform;
}

.server--stormy .server__background {
  background-position: 17% center;
  filter: saturate(1.14) contrast(1.05) brightness(.72);
}

.server--nobs .server__background {
  background-position: 83% center;
  filter: saturate(.84) sepia(.12) contrast(1.08) brightness(.64);
}

.server__shade {
  transition: opacity 450ms ease;
}

.server--stormy .server__shade {
  background:
    radial-gradient(circle at 23% 46%, rgba(57, 214, 234, .23), transparent 31%),
    linear-gradient(112deg, rgba(1, 31, 44, .20) 0%, rgba(2, 21, 31, .46) 46%, rgba(2, 10, 17, .9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
}

.server--nobs .server__shade {
  background:
    radial-gradient(circle at 78% 47%, rgba(224, 179, 77, .19), transparent 29%),
    linear-gradient(248deg, rgba(55, 42, 11, .19) 0%, rgba(24, 21, 12, .48) 47%, rgba(8, 10, 10, .91) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.30));
}

.server__content {
  position: absolute;
  top: 50%;
  display: flex;
  width: min(31vw, 520px);
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2vw, 30px);
  transform: translateY(-50%);
  text-align: center;
  transition: transform 450ms var(--ease-out);
  z-index: 2;
}

.server--stormy .server__content {
  left: max(5vw, env(safe-area-inset-left));
}

.server--nobs .server__content {
  right: max(5vw, env(safe-area-inset-right));
}

.server__logo {
  display: block;
  width: min(20vw, 350px);
  height: auto;
  max-height: 35vh;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 26px rgba(0, 0, 0, .52))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
  transform: translateZ(0);
  transition:
    transform 450ms var(--ease-out),
    filter 450ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.server__logo--nobs {
  width: min(19vw, 330px);
}

.server__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.server__hint {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  background: rgba(5, 10, 14, .30);
  box-shadow:
    0 10px 35px rgba(0, 0, 0, .18),
    inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  color: rgba(255, 255, 255, .79);
  font-size: clamp(.64rem, .72vw, .82rem);
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1;
  white-space: nowrap;
  opacity: .82;
  transition:
    opacity 300ms ease,
    border-color 300ms ease,
    background 300ms ease,
    transform 300ms var(--ease-out),
    box-shadow 300ms ease;
}

.server__arrow {
  display: inline-block;
  margin-left: .08em;
  font-size: 1.05em;
  transition: transform 300ms var(--ease-out);
}


.divider {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  clip-path: polygon(57.72% 0, 58.18% 0, 42.28% 100%, 41.82% 100%);
  background: linear-gradient(180deg,
    rgba(255,255,255,.5),
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.25) 52%,
    rgba(255,255,255,.08) 82%,
    rgba(255,255,255,.42));
  box-shadow:
    0 0 24px rgba(255,255,255,.10),
    0 0 42px rgba(0,0,0,.58);
  opacity: .88;
}

.portal__grain {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
}

@media (hover: hover) and (pointer: fine) {
  .server:hover .server__background,
  .server:focus-visible .server__background {
    transform: scale(1.085);
  }

  .server--stormy:hover .server__background,
  .server--stormy:focus-visible .server__background {
    filter: saturate(1.28) contrast(1.06) brightness(.86);
  }

  .server--nobs:hover .server__background,
  .server--nobs:focus-visible .server__background {
    filter: saturate(.98) sepia(.13) contrast(1.09) brightness(.77);
  }

  .server:hover .server__content,
  .server:focus-visible .server__content {
    transform: translateY(-50%) translateY(-6px);
  }

  .server:hover .server__logo,
  .server:focus-visible .server__logo {
    transform: scale(1.06);
    filter:
      drop-shadow(0 23px 34px rgba(0, 0, 0, .60))
      drop-shadow(0 3px 8px rgba(0, 0, 0, .34));
  }

  .server:hover .server__hint,
  .server:focus-visible .server__hint {
    opacity: 1;
    transform: translateY(1px);
    border-color: rgba(255, 255, 255, .32);
    background: rgba(5, 10, 14, .49);
    box-shadow: 0 13px 40px rgba(0,0,0,.25);
  }

  .server:hover .server__arrow,
  .server:focus-visible .server__arrow {
    transform: translateX(3px);
  }

}

.server:active .server__logo {
  transform: scale(.975);
}

.server:focus-visible::after {
  content: "";
  position: absolute;
  inset:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  z-index: 4;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  pointer-events: none;
}

/* Phones and narrow tablets: make each destination a generous top/bottom target. */
@media (max-width: 760px) and (orientation: portrait) {
  .portal {
    min-height: 500px;
  }

  .server--stormy {
    clip-path: polygon(0 0, 100% 0, 100% 45.5%, 0 57.5%);
  }

  .server--nobs {
    clip-path: polygon(0 57.5%, 100% 45.5%, 100% 100%, 0 100%);
  }

  .server__background,
  .server__shade {
    inset: -6%;
  }

  .server--stormy .server__background {
    background-position: 25% center;
  }

  .server--nobs .server__background {
    background-position: 75% center;
  }

  .server__content {
    left: 50% !important;
    right: auto !important;
    width: min(82vw, 420px);
    gap: clamp(11px, 2.2vh, 18px);
    transform: translate(-50%, -50%);
  }

  .server--stormy .server__content {
    top: 26.5%;
  }

  .server--nobs .server__content {
    top: 74%;
  }

  .server__logo,
  .server__logo--nobs {
    width: min(47vw, 265px);
    max-height: 24vh;
  }

  .server__hint {
    padding: 9px 12px;
    font-size: clamp(.56rem, 2.25vw, .67rem);
    letter-spacing: .13em;
    opacity: .94;
  }


  .divider {
    clip-path: polygon(0 57.25%, 0 57.65%, 100% 45.7%, 100% 45.3%);
  }

  .server:focus-visible::after {
    inset: 12px;
    border-radius: 14px;
  }
}

/* Short landscape phones keep the desktop side-by-side concept, but tighten the scale. */
@media (max-height: 520px) and (orientation: landscape) {
  .portal {
    min-height: 300px;
  }

  .server__content {
    gap: 12px;
  }

  .server__logo,
  .server__logo--nobs {
    width: min(18vw, 210px);
    max-height: 43vh;
  }

  .server__hint {
    padding: 8px 11px;
    font-size: .55rem;
  }

}

/* Very small phones: keep the logos clear and prevent text crowding. */
@media (max-width: 390px) and (orientation: portrait) {
  .server__logo,
  .server__logo--nobs {
    width: min(51vw, 225px);
  }

  .server__hint {
    padding: 8px 10px;
    letter-spacing: .1em;
  }
}

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