/* ── Đêm trên biển Đông ───────────────────────────────────────
   nền đêm   #0A1420   xanh đêm sâu
   biển      #0E2233
   ngọc      #7FD1AE   xanh ngọc đất liền
   vàng lá   #FFCD00   điểm nhấn
   ngà       #EFE6D0   chữ chính
   khói biển #8FA3B0   chữ phụ
──────────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  background: #0a1420;
  color: #efe6d0;
}

#app { position: fixed; inset: 0; }
#app canvas { display: block; }

/* ── Tiêu đề ── */
.masthead {
  position: fixed;
  top: clamp(20px, 4.5vh, 48px);
  left: clamp(20px, 4vw, 56px);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.eyebrow {
  font-size: clamp(10px, 1.05vw, 13px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffcd00;
  margin-bottom: 10px;
}

.masthead h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.masthead .sub {
  margin-top: 10px;
  font-size: clamp(12px, 1.25vw, 15px);
  font-style: italic;
  color: #8fa3b0;
}

.masthead .sub::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 1px;
  background: #8fa3b0;
  opacity: 0.6;
  vertical-align: middle;
  margin-right: 10px;
}

/* ── Thẻ thông tin tỉnh ── */
.card {
  position: fixed;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4.5vh, 48px);
  width: min(360px, calc(100vw - 40px));
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: rgba(10, 22, 34, 0.78);
  border: 1px solid rgba(127, 209, 174, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  z-index: 3;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card.show { opacity: 1; transform: translateY(0); }

.card-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8fa3b0;
}

.card-name {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  color: #ffcd00;
  margin: 2px 0 10px;
}

.card-landmark {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(127, 209, 174, 0.08);
  border: 1px solid rgba(127, 209, 174, 0.14);
}

.card-landmark-icon { color: #7fd1ae; font-size: 11px; }

.card-landmark-title { font-weight: 600; font-size: 15px; color: #efe6d0; }

.card-landmark-desc { font-size: 12.5px; color: #8fa3b0; margin-top: 2px; }

.card-facts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 10px;
  font-size: 12px;
  color: #8fa3b0;
}

.card-facts span:empty { display: none; }

/* ── Gợi ý ── */
.hint {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vh, 28px);
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #8fa3b0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  opacity: 0;
  animation: hint-in 1.2s ease 2.2s forwards;
}

@keyframes hint-in { to { opacity: 0.85; } }

/* ── Watermark holetex.com ── */
.brand {
  position: fixed;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4.5vh, 48px);
  z-index: 4;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 22, 34, 0.7);
  border: 1px solid rgba(255, 205, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffcd00;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.brand span { color: #efe6d0; font-weight: 600; }

.brand:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 205, 0, 0.8);
  box-shadow: 0 8px 26px rgba(255, 205, 0, 0.18);
}

.brand:focus-visible {
  outline: 2px solid #ffcd00;
  outline-offset: 2px;
}

/* ── Màn hình chờ ── */
.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0a1420;
  z-index: 10;
  transition: opacity 0.7s ease;
}

.loader.done { opacity: 0; pointer-events: none; }

.loader span {
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8fa3b0;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .hint { animation: none; opacity: 0.85; }
  .loader span { animation: none; }
}

@media (max-width: 640px) {
  .hint { display: none; }
  .card { left: 16px; bottom: 16px; }
}