:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #050403;
}

* { box-sizing: border-box; }

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

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.portal-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1.78062));
  aspect-ratio: 1672 / 939;
  background: #080604;
  overflow: hidden;
  user-select: none;
}

.portal-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-hit,
.server-hit {
  position: absolute;
  display: block;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.nav-hit:focus-visible,
.nav-hit:hover {
  border-bottom-color: #e8bd5c;
  background: rgba(232, 189, 92, .04);
  outline: none;
}

.nav-home { left: 31.8%; top: 1.2%; width: 8.3%; height: 5.2%; }
.nav-server { left: 40.9%; top: 1.2%; width: 8.1%; height: 5.2%; }
.nav-guide { left: 49.4%; top: 1.2%; width: 8.3%; height: 5.2%; }
.nav-community { left: 58.2%; top: 1.2%; width: 10.2%; height: 5.2%; }

.server-hit {
  top: 36.4%;
  width: 25.4%;
  height: 52.8%;
  border-radius: .55rem;
}

.server-bach-duong { left: 23.45%; }
.server-song-tu { left: 51.15%; }

.server-hit:hover,
.server-hit:focus-visible {
  border-color: rgba(255, 206, 97, .88);
  box-shadow: 0 0 1.7rem rgba(219, 158, 45, .42), inset 0 0 2.5rem rgba(228, 174, 65, .08);
  outline: none;
}

.server-song-tu:hover,
.server-song-tu:focus-visible {
  border-color: rgba(116, 173, 221, .8);
  box-shadow: 0 0 1.7rem rgba(69, 129, 184, .36), inset 0 0 2.5rem rgba(87, 151, 207, .08);
}

.race-overlay {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .7vw, 12px);
  padding: .35% .45%;
  border: 1px solid rgba(214, 167, 79, .52);
  border-radius: .35rem;
  background: linear-gradient(180deg, rgba(16, 11, 6, .98), rgba(8, 6, 4, .99));
  box-shadow: inset 0 0 1.5rem rgba(218, 164, 63, .06), 0 .35rem 1rem rgba(0, 0, 0, .4);
  pointer-events: none;
}

.race-overlay-bach-duong { left: 28.45%; top: 69.45%; width: 15.3%; height: 8.8%; }
.race-overlay-song-tu { left: 56.45%; top: 69.15%; width: 15.2%; height: 10.9%; border-color: rgba(109, 155, 196, .58); background: linear-gradient(180deg, rgba(9, 18, 28, .99), rgba(6, 10, 16, .99)); }

.race-choice {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, .45vw, 8px);
  color: #f0ce83;
  font: 800 clamp(7px, .62vw, 11px)/1.1 Arial, sans-serif;
  letter-spacing: .05em;
  white-space: nowrap;
}

.race-choice img {
  width: clamp(26px, 3.15vw, 53px);
  height: clamp(32px, 3.65vw, 62px);
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(231, 190, 105, .74);
  border-radius: 50%;
  filter: sepia(.18) saturate(.72) contrast(1.08) brightness(.82);
  box-shadow: 0 0 .7rem rgba(220, 174, 88, .18);
}

.race-overlay-song-tu .race-choice { display: grid; justify-items: center; gap: 2px; }
.race-overlay-song-tu .race-choice img { width: clamp(25px, 2.75vw, 47px); height: clamp(30px, 3.15vw, 54px); }

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .8rem 1.2rem;
  color: #f7dfaa;
  background: rgba(12, 9, 6, .96);
  border: 1px solid #a87928;
  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .55);
  font: 600 .9rem/1.4 Arial, sans-serif;
  text-align: center;
}

.mobile-panel { display: none; }

@media (max-width: 760px), (orientation: portrait) {
  body { overflow: auto; }

  .portal-stage {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    display: grid;
    place-items: center;
    padding: 1.25rem;
  }

  .portal-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    filter: brightness(.34) blur(1px);
    transform: scale(1.02);
  }

  .desktop-navigation,
  .desktop-server-links,
  .race-overlay { display: none; }

  .mobile-panel {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 28rem);
    gap: .85rem;
    padding: 1.2rem;
    color: #f7dfa7;
    background: rgba(8, 6, 4, .9);
    border: 1px solid #9b6d23;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .68);
  }

  .mobile-brand {
    display: grid;
    gap: .15rem;
    text-align: center;
  }

  .mobile-brand span { font-size: clamp(1.7rem, 8vw, 2.5rem); font-weight: 800; }
  .mobile-brand small { color: #d1bb8c; font-style: italic; }
  .mobile-panel h2 { margin: .45rem 0 0; text-align: center; text-transform: uppercase; font-size: 1rem; letter-spacing: .18em; }

  .mobile-server {
    display: grid;
    gap: .28rem;
    width: 100%;
    padding: 1.05rem;
    color: #f5d58d;
    text-decoration: none;
    text-align: left;
    background: linear-gradient(135deg, rgba(83, 49, 13, .45), rgba(13, 9, 5, .94));
    border: 1px solid #a87827;
    font-family: inherit;
  }

  .mobile-server strong { font-size: 1.55rem; }
  .mobile-server span, .mobile-server em { font: 600 .76rem/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
  .mobile-server em { color: #92e870; font-style: normal; }
  .mobile-server.is-upcoming { color: #d8e6f5; border-color: #52799d; background: linear-gradient(135deg, rgba(20, 48, 75, .6), rgba(8, 12, 18, .94)); }
  .mobile-server.is-upcoming em { color: #b6c2d0; }

  .mobile-links { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .mobile-links a { padding: .72rem; color: #ead09a; border: 1px solid rgba(171, 126, 46, .6); text-align: center; text-decoration: none; font: 700 .8rem Arial, sans-serif; text-transform: uppercase; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}