/* Penghantar: dusk over a tiny KLCC. */
@font-face {
  font-family: 'Marcellus';
  src: url('fonts/marcellus.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --malam: #0b1026;
  --malam-deep: #070b1a;
  --emas: #f5c36b;
  --menara: #e8ecf4;
  --teal: #1fa79b;
  --amber: #b06a3a;
  --ink: #dfe4f2;
  --ink-dim: #8b93b0;
  --display: 'Marcellus', 'Palatino Linotype', Georgia, serif;
  --body: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--malam-deep);
  color: var(--ink);
  font-family: var(--body);
  touch-action: none; /* no pinch or double-tap zoom; taps still work */
  overscroll-behavior: none;
}
input, textarea, button { touch-action: manipulation; }

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 40;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hidden { display: none !important; }
.fadeout { opacity: 0 !important; transition: opacity 0.7s ease; }

/* loader */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--malam-deep);
}
#loader p { color: var(--ink-dim); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.wau-line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw 2.2s ease-in-out infinite;
}
@keyframes draw { 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } }

/* full screens */
.screen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 120%, rgba(176, 106, 58, 0.22), transparent 55%),
              radial-gradient(ellipse at 50% -20%, rgba(31, 26, 58, 0.5), transparent 60%),
              rgba(7, 11, 26, 0.82);
  backdrop-filter: blur(3px);
}
/* title shows the live globe behind it: only a light legibility gradient */
#title {
  background: linear-gradient(to top,
    rgba(7, 11, 26, 0.78) 0%, rgba(7, 11, 26, 0.25) 26%,
    rgba(7, 11, 26, 0) 45%, rgba(7, 11, 26, 0.3) 100%);
  backdrop-filter: none;
  justify-content: flex-end;
  padding-bottom: 9vh;
}
#title h1 { font-size: clamp(44px, 8.5vw, 92px); text-shadow: 0 4px 40px rgba(4, 6, 15, 0.9); }
#title .eyebrow, #title .bm, #title .en { text-shadow: 0 2px 16px rgba(4, 6, 15, 0.9); }
.screen .eyebrow {
  font-size: 11px; letter-spacing: 0.34em; color: var(--emas);
  margin-bottom: 18px;
}
.screen h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 11vw, 118px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--menara);
  text-shadow: 0 0 60px rgba(245, 195, 107, 0.25);
  margin-bottom: 22px;
}
.screen h2 { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--menara); margin-bottom: 6px; }
.screen .bm { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.screen .en { font-size: 14px; color: var(--ink-dim); margin-bottom: 34px; }
.screen .sub { font-size: 13px; color: var(--ink-dim); margin-bottom: 18px; }

.screen button, .card button {
  font-family: var(--body);
  font-size: 15px; letter-spacing: 0.08em;
  padding: 13px 34px;
  color: var(--malam-deep);
  background: linear-gradient(160deg, #ffe2a8, var(--emas));
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 30px rgba(245, 195, 107, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.screen button:hover, .card button:hover { transform: translateY(-1px); box-shadow: 0 6px 40px rgba(245, 195, 107, 0.5); }
.screen button:focus-visible, .card button:focus-visible { outline: 2px solid var(--menara); outline-offset: 3px; }

.credit { position: absolute; bottom: 22px; left: 0; right: 0; font-size: 12px; color: var(--ink-dim); }
.credit a { color: var(--emas); text-decoration: none; }
.credit a:hover { text-decoration: underline; }

/* compose card */
.card {
  width: min(420px, 92vw);
  background: rgba(11, 16, 38, 0.92);
  border: 1px solid rgba(245, 195, 107, 0.35);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}
.card textarea, .card input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: rgba(20, 26, 56, 0.8);
  border: 1px solid rgba(139, 147, 176, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
  resize: none;
}
.card textarea:focus, .card input:focus { outline: 1px solid var(--emas); border-color: var(--emas); }
.compose-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.compose-row input { flex: 1; }
#compose-count { font-size: 12px; color: var(--ink-dim); margin-top: 12px; white-space: nowrap; }
.card button { width: 100%; margin-top: 4px; }

/* HUD */
#minimap {
  position: fixed; top: 56px; left: 24px; z-index: 50;
  border: 1px solid rgba(245, 195, 107, 0.35);
  border-radius: 10px;
  opacity: 0.92;
}
@media (max-width: 640px) { #minimap { top: 52px; left: 12px; width: 110px; height: 72px; } }

#brand {
  position: fixed; top: 20px; left: 24px; z-index: 50;
  font-family: var(--display);
  font-size: 17px; letter-spacing: 0.32em; color: var(--menara);
  opacity: 0.85;
}
body:not(.playing) #objective { display: none !important; }
#objective {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: rgba(11, 16, 38, 0.78);
  border: 1px solid rgba(245, 195, 107, 0.3);
  border-radius: 999px;
  padding: 8px 18px;
  max-width: min(560px, 86vw);
}
#objective-step { font-size: 10px; letter-spacing: 0.22em; color: var(--emas); white-space: nowrap; }
#objective-text { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* mission stars */
#missions {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 10px;
  background: rgba(11, 16, 38, 0.6);
  border-radius: 999px;
  padding: 5px 14px;
}
.mission-star { font-size: 16px; color: rgba(139, 147, 176, 0.4); transition: color 0.6s ease, text-shadow 0.6s ease; }
.mission-star.done { color: var(--emas); text-shadow: 0 0 12px rgba(245, 195, 107, 0.8); }
.mission-wau { border-left: 1px solid rgba(139, 147, 176, 0.35); padding-left: 10px; }

/* reward medal */
#medal { position: relative; width: 96px; height: 120px; margin-bottom: 14px; }
#medal-ribbon {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 34px; height: 52px;
  background: linear-gradient(90deg, #cc0001 0 25%, #f2ead8 25% 50%, #010066 50% 75%, #ffcc00 75%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#medal-disc {
  position: absolute; left: 50%; top: 38px; transform: translateX(-50%);
  width: 82px; height: 82px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: #7a4a10;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f5c36b 55%, #b8862e);
  border: 3px solid #8a6a24;
  box-shadow: 0 6px 30px rgba(245, 195, 107, 0.5);
  animation: medalpop 1s ease;
}
@keyframes medalpop { 0% { transform: translateX(-50%) scale(0.2); opacity: 0; } 70% { transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%) scale(1); } }

#prompt {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 50;
  font-size: 13px; letter-spacing: 0.06em; color: var(--menara);
  background: rgba(11, 16, 38, 0.8);
  border: 1px solid rgba(139, 147, 176, 0.4);
  border-radius: 999px;
  padding: 7px 16px;
}
#hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 50;
  font-size: 12px; color: var(--ink-dim);
  opacity: 1; transition: opacity 1.2s ease;
}
#mute {
  position: fixed; top: 16px; right: 18px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(11, 16, 38, 0.7);
  border: 1px solid rgba(139, 147, 176, 0.4);
  color: var(--ink); font-size: 16px;
  cursor: pointer;
}
#gaya {
  position: fixed; top: 16px; right: 66px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(11, 16, 38, 0.7);
  border: 1px solid rgba(139, 147, 176, 0.4);
  font-size: 16px; cursor: pointer;
}
#gayapanel {
  position: fixed; top: 66px; right: 18px; z-index: 55;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(9, 13, 30, 0.92);
  border: 1px solid rgba(245, 195, 107, 0.35);
  border-radius: 14px;
  padding: 14px 16px;
}
.gaya-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.gaya-label { width: 76px; color: var(--emas); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.gaya-row button {
  width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
  background: rgba(139, 147, 176, 0.25); color: var(--ink); font-size: 10px;
}
.gaya-row span:not(.gaya-label) { min-width: 110px; text-align: center; }

/* dialogue bubble */
#bubble {
  position: fixed; z-index: 55;
  transform: translate(-50%, -100%);
  width: min(400px, 84vw);
  background: rgba(9, 13, 30, 0.92);
  border: 1px solid rgba(139, 147, 176, 0.45);
  border-radius: 14px;
  padding: 14px 18px 16px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
#bubble-name {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 6px;
}
#bubble-text { font-size: 15px; line-height: 1.5; color: var(--ink); min-height: 22px; }
#bubble-next {
  position: absolute; right: 12px; bottom: 8px;
  color: var(--emas); font-size: 14px;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* kite message label */
#kitemsg {
  position: fixed; z-index: 55;
  transform: translate(-50%, -100%);
  max-width: min(380px, 80vw);
  font-family: var(--display);
  font-size: 20px; color: #ffe9c4;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  text-align: center;
  pointer-events: none;
}

/* mobile controls */
#joystick {
  position: fixed; bottom: 30px; left: 28px; z-index: 50;
  width: 108px; height: 108px; border-radius: 50%;
  background: rgba(11, 16, 38, 0.5);
  border: 1px solid rgba(139, 147, 176, 0.4);
  touch-action: none;
}
#stick {
  position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; border-radius: 50%;
  margin: -22px 0 0 -22px;
  background: rgba(245, 195, 107, 0.8);
  pointer-events: none;
}
#flyctl {
  position: fixed; right: 28px; bottom: 140px; z-index: 50;
  display: flex; flex-direction: column; gap: 12px;
}
#flyctl button {
  width: 60px; height: 60px; border-radius: 50%;
  font-size: 18px;
  color: var(--malam-deep);
  background: linear-gradient(160deg, #cfe4ff, #8ad4ff);
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(138, 212, 255, 0.4);
  touch-action: none;
}

#talkbtn {
  position: fixed; bottom: 52px; right: 30px; z-index: 50;
  width: 74px; height: 74px; border-radius: 50%;
  font-size: 14px; letter-spacing: 0.04em;
  color: var(--malam-deep);
  background: linear-gradient(160deg, #ffe2a8, var(--emas));
  border: none; cursor: pointer;
  box-shadow: 0 4px 24px rgba(245, 195, 107, 0.4);
}

@media (max-width: 640px) {
  #brand { display: none; }
  #objective { top: 12px; }
  #prompt { bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .wau-line { animation: none; stroke-dashoffset: 0; }
  #bubble-next { animation: none; }
}