*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
  background: #ffffff;
  overflow: hidden;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lake: 80% of viewport height, centered */
#lake-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80vh;
  max-height: 80vh;
  transition: height 350ms ease, max-height 350ms ease;
}

#lake {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  max-width: 100%;
  height: 80vh;
  max-height: 80vh;
  object-fit: contain;
  object-position: center;
  transition: transform 350ms ease;
  z-index: 1;
}

body.map-active #lake-container {
  height: 90vh;
  max-height: 90vh;
}

body.map-active #lake {
  transform: translate(-50%, -50%) scale(1.05);
}

/* Markers aligned with the lake image */
.marker {
  position: absolute;
  z-index: 2;
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 15%;
  height: 15%;
  cursor: pointer;
  opacity: 0;
  transform: scale(1);
  transform-origin: center center;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.marker::after {
  content: attr(data-page);
  position: absolute;
  left: 50%;
  top: calc(100% + 0.35rem);
  transform: translateX(-50%) translateY(-2px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  font: 600 0.8rem/1.2 system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
  background: #e8f3ff; /* match Enter button very light blue */
  border: 1px solid rgba(148, 191, 255, 0.8);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  box-shadow: 0 6px 18px rgba(148, 191, 255, 0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

body.map-active .marker {
  opacity: 0.9;
  pointer-events: auto;
}

.marker:hover,
.marker:focus-visible {
  outline: none;
  opacity: 1;
  transform: scale(1.3);
}

.marker:hover::after,
.marker:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.marker-baoshu {
  background-image: url("../assets/img/baoshu.png");
  top: 10%;
  left: 50%;
  width: 18%;
  height: 18%;
}

.marker-hehua {
  background-image: url("../assets/img/hehua.png");
  top: 30%;
  left: 33%;
}

.marker-ting {
  background-image: url("../assets/img/ting.png");
  top: 35%;
  left: 60%;
}

.marker-santan {
  background-image: url("../assets/img/santan.png");
  top: 60%;
  left: 45%;
}

/* Landing UI: name + start button, centered */
#landingUI {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  z-index: 2;
  transition: opacity 350ms ease, transform 350ms ease;
}

#landingUI.is-hidden {
  pointer-events: none;
  opacity: 0;
}

#landingName {
  max-width: 55vw;
  max-height: 22vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

#startBtn {
  appearance: none;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 191, 255, 0.8);
  padding: 0.65rem 1.6rem;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #e8f3ff; /* very light blue */
  color: #0f172a;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

#startBtn:hover {
  background: #d7ebff;
  border-color: rgba(59, 130, 246, 0.9);
}

#startBtn:active {
  transform: scale(0.98);
}

/* Header (map view): small name at top-left */
#header {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  transform: none;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease 150ms;
}

#header.is-visible {
  opacity: 1;
}

#headerName {
  max-height: 2.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Islands are disabled for now; kept here for future use */

/* Bio page content over the lake */
#bio-content {
  position: relative;
  z-index: 2;
  max-width: 36rem;
  padding: 1.5rem 1.75rem;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.6;
  transform: translate(10%, -28%) rotate(-30deg);
  transform-origin: center;
}

#bio-content p {
  margin: 0 0 0.9rem;
}

#bio-content p:last-child {
  margin-bottom: 0;
}

/* Research page content over the lake */

#research-content {
  position: relative;
  z-index: 2;
  max-width: 44rem;
  padding: 1.6rem 1.9rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.7;
}

#research-content h2 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

#research-content h3 {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.abstract-school {
  font-weight: 600;
}

.return-container {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 3;
}

.return-btn {
  appearance: none;
  border-radius: 999px;
  border: 1.5px solid rgba(148, 191, 255, 0.9);
  padding: 0.55rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #e8f3ff;
  color: #0f172a;
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease,
    transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 10px 25px rgba(148, 191, 255, 0.3);
}

.return-btn:hover {
  background: #d7ebff;
  border-color: rgba(59, 130, 246, 0.95);
  box-shadow: 0 14px 35px rgba(148, 191, 255, 0.45);
}

.return-btn:active {
  transform: scale(0.97);
}

/* Research page: publication cards */

.paper-list {
  margin: 1.5rem 0 0;
  padding: 0;
}

.paper-card {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(232, 243, 255, 0.75);
  border: 1px solid rgba(148, 191, 255, 0.85);
  box-shadow: 0 10px 28px rgba(148, 191, 255, 0.35);
  max-width: 40rem;
}

.paper-title {
  margin: 0 0 0.2rem;
  font-weight: 500;
}

.paper-title a {
  color: #0f172a;
  text-decoration-color: rgba(59, 130, 246, 0.8);
  text-underline-offset: 0.14em;
}

.paper-title a:hover,
.paper-title a:focus-visible {
  color: #1d4ed8;
}

.paper-meta {
  margin: 0.1rem 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.paper-authors {
  margin: 0;
  font-size: 0.9rem;
  color: #0f172a;
}

.co-first {
  font-weight: 600;
}

.paper-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #64748b;
}

/* Individual paper pages */

#paper-content {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  padding: 1.7rem 2rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.7;
}

.paper-header {
  margin-bottom: 1.25rem;
}

.paper-header .paper-title {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.paper-header .paper-meta {
  margin-bottom: 0.35rem;
}

.paper-header .paper-authors {
  margin-bottom: 0.35rem;
}

.paper-author {
  color: inherit;
  text-decoration-color: rgba(59, 130, 246, 0.7);
  text-underline-offset: 0.14em;
}

.paper-author:hover,
.paper-author:focus-visible {
  color: #1d4ed8;
}

.paper-links {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}

.paper-links a {
  color: #1d4ed8;
  text-decoration-color: rgba(59, 130, 246, 0.8);
}

.paper-links a:hover,
.paper-links a:focus-visible {
  color: #1e40af;
}

.abstract {
  margin-top: 1.25rem;
}

.abstract h3 {
  margin-top: 0;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
}

.paper-footnote {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: #64748b;
}