@font-face {
  font-family: PressStart;
  src: url(fonts/PressStart2P.woff2) format('woff2');
}
@font-face {
  font-family: Jersey;
  src: url(fonts/Jersey10.woff2) format('woff2');
}
:root { --u: 4; --ink: #383838; --frame: #4a5a9a; --frame-in: #b8c8f0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #101018; overflow: hidden; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#game {
  position: relative; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none;
  width: calc(var(--u) * 320px); height: calc(var(--u) * 180px);
  font-family: Jersey, monospace; color: var(--ink);
}
#world, #hi { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#hi { pointer-events: none; }

/* Label bangunan */
#labels { position: absolute; inset: 0; pointer-events: none; }
.lbl {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1;
  font-size: calc(var(--u) * 8px); font-weight: 400; letter-spacing: calc(var(--u) * 0.5px);
}
.lbl.sign { color: #ffd23f; }
.lbl.cafe { color: #f8e8c8; }
.lbl.post { color: #4a3820; font-size: calc(var(--u) * 7px); background: rgba(248, 240, 216, 0.9); padding: 0 calc(var(--u) * 2px); border-radius: calc(var(--u) * 1px); }
.lbl.water { color: #e8f6ff; font-size: calc(var(--u) * 9px); letter-spacing: calc(var(--u) * 1px); }
.lbl.posko { color: #5a3a28; font-size: calc(var(--u) * 7px); }
.lbl.wall { color: #2a58b0; font-size: calc(var(--u) * 10px); letter-spacing: calc(var(--u) * 1.5px); }
.lbl.gate { color: #4a3e2a; font-size: calc(var(--u) * 9px); }
.lbl.enc { transform: translate(0, -50%); color: #383838; font-size: calc(var(--u) * 13px); letter-spacing: 0; }
.lbl.enc.right { transform: translate(-100%, -50%); color: #2f8a4e; }
.lbl.trip { font-size: calc(var(--u) * 15px); color: #4a3820; background: rgba(248, 240, 216, 0.92); padding: calc(var(--u) * 1px) calc(var(--u) * 5px); border-radius: calc(var(--u) * 2px); border: calc(var(--u) * 1px) solid #8a6a40; }
.lbl.node.blur { filter: blur(calc(var(--u) * 1.6px)); opacity: 0.55; }
.lbl.node {
  font-size: calc(var(--u) * 10px); color: #4a3820; background: rgba(248, 240, 216, 0.85);
  padding: calc(var(--u) * 1px) calc(var(--u) * 3px); border-radius: calc(var(--u) * 2px);
}

/* Kotak dialog gaya GBA */
#dlg, #choices {
  position: absolute; background: #f8f8f8;
  border: calc(var(--u) * 2px) solid var(--frame); border-radius: calc(var(--u) * 4px);
  box-shadow: inset 0 0 0 calc(var(--u) * 1px) var(--frame-in), 0 calc(var(--u) * 1px) 0 rgba(0, 0, 0, 0.35);
}
#dlg {
  left: calc(var(--u) * 4px); right: calc(var(--u) * 4px); bottom: calc(var(--u) * 4px);
  height: calc(var(--u) * 48px); padding: calc(var(--u) * 6px) calc(var(--u) * 10px);
}
#dlg.top { bottom: auto; top: calc(var(--u) * 4px); }
/* Bu Connie bicara / memilih jawaban = hijau; orang lain = biru */
#dlg.me, #choices { --frame: #2f8a4e; --frame-in: #b4e4c2; }
#dlg-text {
  font-size: calc(var(--u) * 15px); line-height: calc(var(--u) * 15px); white-space: pre;
  text-shadow: calc(var(--u) * 0.7px) calc(var(--u) * 0.7px) 0 #d4d4dc;
}
#dlg-name {
  position: absolute; left: calc(var(--u) * 6px); top: calc(var(--u) * -12px);
  background: var(--frame); color: #fff; font-size: calc(var(--u) * 10px); line-height: calc(var(--u) * 10px);
  padding: 0 calc(var(--u) * 5px); border-radius: calc(var(--u) * 2px) calc(var(--u) * 2px) 0 0;
}
#dlg.top #dlg-name { top: auto; bottom: calc(var(--u) * -12px); border-radius: 0 0 calc(var(--u) * 2px) calc(var(--u) * 2px); }
#dlg-arrow {
  position: absolute; right: calc(var(--u) * 8px); bottom: calc(var(--u) * 6px); width: 0; height: 0;
  border-left: calc(var(--u) * 4px) solid transparent; border-right: calc(var(--u) * 4px) solid transparent;
  border-top: calc(var(--u) * 5px) solid #e04848; animation: bob 0.6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(calc(var(--u) * 2px)); } }

#choices {
  right: calc(var(--u) * 4px); bottom: calc(var(--u) * 56px);
  padding: calc(var(--u) * 4px) calc(var(--u) * 10px) calc(var(--u) * 4px) calc(var(--u) * 16px);
  font-size: calc(var(--u) * 15px); line-height: calc(var(--u) * 16px);
}
#choices.top { bottom: auto; top: calc(var(--u) * 68px); }
#choices div { position: relative; white-space: nowrap; }
#choices div.sel::before {
  content: ''; position: absolute; left: calc(var(--u) * -10px); top: calc(var(--u) * 4px);
  border-top: calc(var(--u) * 4px) solid transparent; border-bottom: calc(var(--u) * 4px) solid transparent;
  border-left: calc(var(--u) * 5px) solid var(--ink);
}

/* HUD */
#hud {
  position: absolute; left: calc(var(--u) * 4px); right: calc(var(--u) * 4px); top: calc(var(--u) * 4px);
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.hud-box {
  background: rgba(248, 248, 248, 0.94); border: calc(var(--u) * 1px) solid var(--frame);
  border-radius: calc(var(--u) * 3px); padding: calc(var(--u) * 2px) calc(var(--u) * 4px);
  font-size: calc(var(--u) * 10px); line-height: calc(var(--u) * 10px);
}
.hud-row { display: flex; gap: calc(var(--u) * 6px); justify-content: space-between; }
#hud-lv { color: #2a58b0; }
#hud-bar {
  width: calc(var(--u) * 52px); height: calc(var(--u) * 3px); margin-top: calc(var(--u) * 1px);
  background: #d0d0d8; border-radius: calc(var(--u) * 1px); overflow: hidden;
}
#hud-bar i { display: block; height: 100%; width: 0; background: #48c060; transition: width 0.6s; }
#hud-badges { display: flex; gap: calc(var(--u) * 1px); padding: calc(var(--u) * 1px) calc(var(--u) * 2px); }
#hud-badges canvas { width: calc(var(--u) * 12px); height: calc(var(--u) * 12px); image-rendering: pixelated; }
#hud-badges canvas.off { filter: grayscale(1) brightness(0.7); opacity: 0.35; }

/* Banner lokasi */
#banner {
  position: absolute; left: calc(var(--u) * 4px); top: calc(var(--u) * 22px);
  background: #f8f0d8; border: calc(var(--u) * 2px) solid #8a6a4a; border-radius: calc(var(--u) * 2px);
  padding: calc(var(--u) * 2px) calc(var(--u) * 12px); font-size: calc(var(--u) * 15px); color: #4a3820;
  transform: translateY(calc(var(--u) * -70px)); transition: transform 0.45s; pointer-events: none;
}
#banner.show { transform: none; }

/* Layar judul */
#title {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--u) * 14px); color: #fff; text-align: center; pointer-events: none;
}
#title h1 {
  margin: 0; font-family: PressStart; font-size: calc(var(--u) * 20px); line-height: 1.25; color: #ffd84a; font-weight: 400;
  letter-spacing: calc(var(--u) * 1px);
  text-shadow: 0 calc(var(--u) * 2px) 0 #d05a20, calc(var(--u) * 2px) calc(var(--u) * 4px) 0 #2a2a60;
}
#title .sub {
  margin-top: calc(var(--u) * 6px); font-family: PressStart; font-size: calc(var(--u) * 9px);
  text-shadow: calc(var(--u) * 1px) calc(var(--u) * 1px) 0 #2a2a60;
}
#title .press {
  position: absolute; top: calc(var(--u) * 88px); font-size: calc(var(--u) * 12px); color: #2a2a50;
  background: rgba(255, 255, 255, 0.8); padding: calc(var(--u) * 1px) calc(var(--u) * 6px); border-radius: calc(var(--u) * 2px);
  animation: blink 1.1s steps(2) infinite;
}
#title .foot { position: absolute; bottom: calc(var(--u) * 5px); font-size: calc(var(--u) * 9px); color: #2a4a20; }
@keyframes blink { 50% { opacity: 0.2; } }

/* Kartu overlay */
#card {
  position: absolute; inset: 0; background: rgba(16, 16, 40, 0.78); color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4px);
}
.lv-big {
  font-family: PressStart; font-size: calc(var(--u) * 20px); font-weight: 400; color: #ffd84a;
  text-shadow: calc(var(--u) * 2px) calc(var(--u) * 2px) 0 #b04020; animation: pop 0.5s ease-out;
}
.lv-sub { font-size: calc(var(--u) * 17px); }
.lv-sub b { color: #ffd84a; font-weight: 400; }
.card-desc { font-size: calc(var(--u) * 12px); opacity: 0.85; }
.card-hint { font-size: calc(var(--u) * 9px); opacity: 0.6; margin-top: calc(var(--u) * 8px); animation: blink 1.1s steps(2) infinite; }
.badge-big { width: calc(var(--u) * 64px); height: calc(var(--u) * 64px); image-rendering: pixelated; animation: pop 0.6s ease-out; }
@keyframes pop { 0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* Tamat */
#ending {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 12px);
}
.end-title {
  font-family: PressStart; font-size: calc(var(--u) * 12px); line-height: 1.5; color: #ffd84a;
  text-shadow: calc(var(--u) * 1px) calc(var(--u) * 2px) 0 #b04020; animation: pop 0.7s ease-out;
}
.end-title.small { font-size: calc(var(--u) * 13px); line-height: 1.6; margin-top: calc(var(--u) * 22px); }
.end-sub { font-size: calc(var(--u) * 17px); margin-top: calc(var(--u) * 10px); line-height: 1.1; }
.end-date { font-size: calc(var(--u) * 12px); opacity: 0.8; margin-top: calc(var(--u) * 4px); }
.end-again { position: absolute; bottom: calc(var(--u) * 16px); right: calc(var(--u) * 10px); text-align: right; font-size: calc(var(--u) * 10px); opacity: 0.7; animation: blink 1.1s steps(2) infinite; }
#ending .roll { position: absolute; top: 100%; left: 0; right: 0; }
#ending .role { font-size: calc(var(--u) * 11px); color: #ffd84a; margin-top: calc(var(--u) * 10px); }
#ending .nm { font-size: calc(var(--u) * 15px); line-height: 1.2; }
#ending .note { font-size: calc(var(--u) * 9px); line-height: 1.3; color: #c8c0d8; max-width: calc(var(--u) * 220px); margin: calc(var(--u) * 14px) auto 0; }
#ending .note.big { font-size: calc(var(--u) * 14px); color: #fff; margin-top: 0; }

/* Barang diterima -> masuk tas */
.item-stage { display: flex; align-items: flex-end; gap: calc(var(--u) * 24px); margin-bottom: calc(var(--u) * 4px); }
.item-wrap { position: relative; transition: transform 0.7s ease-in, opacity 0.7s ease-in; }
.item-wrap.stow { transform: translate(calc(var(--u) * 74px), calc(var(--u) * 14px)) scale(0.12); opacity: 0; }
.item-big { width: calc(var(--u) * 64px); height: calc(var(--u) * 64px); image-rendering: pixelated; display: block; animation: pop 0.6s ease-out; }
.item-label { position: absolute; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 9px); color: #ffd23f; letter-spacing: calc(var(--u) * 0.5px); white-space: nowrap; }
.bag-big { width: calc(var(--u) * 36px); height: calc(var(--u) * 36px); image-rendering: pixelated; display: block; }
.bag-big.bounce { animation: bagb 0.45s ease-out; }
@keyframes bagb { 40% { transform: scale(1.25) rotate(-6deg); } 70% { transform: scale(0.95); } }

/* Kartu ucapan ulang tahun */
.wish {
  background: #fffaf0; color: #3a3030; border: calc(var(--u) * 2px) solid #e04868; border-radius: calc(var(--u) * 5px);
  box-shadow: 0 0 0 calc(var(--u) * 1px) #f8c8d4 inset; width: calc(var(--u) * 270px);
  padding: calc(var(--u) * 10px) calc(var(--u) * 14px); text-align: left; animation: pop 0.45s ease-out;
}
.wish-count { font-size: calc(var(--u) * 9px); color: #b0909a; text-align: right; }
.wish-text { font-size: calc(var(--u) * 14px); line-height: 1.15; margin: calc(var(--u) * 2px) 0 calc(var(--u) * 8px); }
.wish-from { font-size: calc(var(--u) * 14px); color: #e04868; text-align: right; }
.wish-role { font-size: calc(var(--u) * 10px); color: #8a7078; text-align: right; }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.35s; }

#press {
  position: absolute; inset: 0; background: #101018; color: #f0f0f0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(var(--u) * 6px); font-size: calc(var(--u) * 15px);
}
#press small { font-size: calc(var(--u) * 9px); opacity: 0.6; }
.pc-title { font-family: PressStart; font-size: calc(var(--u) * 9px); color: #ffd84a; }
#pc-form { display: flex; gap: calc(var(--u) * 4px); align-items: stretch; }
#pc {
  width: calc(var(--u) * 104px); font: inherit; font-size: calc(var(--u) * 18px); text-align: center;
  letter-spacing: calc(var(--u) * 3px); padding: calc(var(--u) * 2px) calc(var(--u) * 4px);
  background: #f8f8f8; color: #383838; border: calc(var(--u) * 2px) solid #4a5a9a; border-radius: calc(var(--u) * 3px); outline: none;
}
#pc:focus { border-color: #ffd84a; }
#pc-go {
  font: inherit; font-size: calc(var(--u) * 13px); padding: 0 calc(var(--u) * 8px); cursor: pointer;
  background: #2f8a4e; color: #fff; border: 0; border-radius: calc(var(--u) * 3px);
}
#pc-msg { font-size: calc(var(--u) * 11px); color: #f88080; min-height: calc(var(--u) * 12px); }
#press.shake #pc-form { animation: shake 0.35s; }
@keyframes shake { 20%, 60% { transform: translateX(calc(var(--u) * -4px)); } 40%, 80% { transform: translateX(calc(var(--u) * 4px)); } }

/* Tombol kecil suara & layar penuh */
#controls {
  position: absolute; right: calc(var(--u) * 3px); bottom: calc(var(--u) * 3px); display: flex; gap: calc(var(--u) * 2px);
  opacity: 0.25; transition: opacity 0.2s;
}
#controls:hover { opacity: 0.9; }
#controls button {
  width: calc(var(--u) * 10px); height: calc(var(--u) * 10px); border: 0; padding: 0; cursor: pointer;
  background: #f8f8f8; border-radius: calc(var(--u) * 2px); display: grid; place-items: center;
}
#controls span { display: block; width: 50%; height: 50%; }
#btn-mute span { background: #383838; clip-path: polygon(0 30%, 35% 30%, 75% 0, 75% 100%, 35% 70%, 0 70%); }
#btn-mute.muted span { background: #c04040; }
#btn-fs span { border: calc(var(--u) * 1px) solid #383838; }

/* ---------- Tambahan 2026-10-05 ---------- */
/* Buku kenangan (intro) */
.book { display: flex; width: calc(var(--u) * 290px); background: #6a4628; padding: calc(var(--u) * 4px); border-radius: calc(var(--u) * 4px); box-shadow: 0 calc(var(--u) * 3px) 0 #3a2410; animation: pop 0.45s ease-out; }
.book .page { flex: 1; background: #fbf5e6; color: #3a3030; padding: calc(var(--u) * 7px); min-height: calc(var(--u) * 120px); display: flex; flex-direction: column; justify-content: center; }
.book .pl { border-right: calc(var(--u) * 1px) solid #d8c8a8; }
.book .photo { background: #fff; padding: calc(var(--u) * 4px) calc(var(--u) * 4px) calc(var(--u) * 3px); box-shadow: 0 calc(var(--u) * 1px) calc(var(--u) * 2px) rgba(0,0,0,0.25); transform: rotate(-2deg); }
.book .ph-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.book .tag { font-size: calc(var(--u) * 10px); text-align: center; margin-top: calc(var(--u) * 3px); color: #5a4030; }
.book .quote { font-size: calc(var(--u) * 10.5px); line-height: 1.2; text-align: left; }
.book .sig { font-size: calc(var(--u) * 10px); text-align: right; margin-top: calc(var(--u) * 6px); color: #8a5a30; }
/* Surat */
.letter { width: calc(var(--u) * 230px); background: #fffaf0; color: #3a3030; border: calc(var(--u) * 2px) solid #c8a878; padding: calc(var(--u) * 12px) calc(var(--u) * 14px); text-align: left; animation: pop 0.45s ease-out; box-shadow: 0 calc(var(--u) * 2px) 0 #a88858; }
.letter .ref { font-size: calc(var(--u) * 11px); color: #8a5a30; margin-bottom: calc(var(--u) * 5px); }
.letter .verse { font-size: calc(var(--u) * 14px); line-height: 1.2; }
.letter .from { font-size: calc(var(--u) * 11px); text-align: right; margin-top: calc(var(--u) * 8px); color: #8a5a30; }
/* Kotak ketik */
.ask { width: calc(var(--u) * 260px); background: #f8f8f0; color: #383838; border: calc(var(--u) * 2px) solid #2f8a4e; border-radius: calc(var(--u) * 4px); padding: calc(var(--u) * 8px) calc(var(--u) * 10px); text-align: left; }
.ask-q { font-size: calc(var(--u) * 14px); margin-bottom: calc(var(--u) * 5px); }
.ask textarea { width: 100%; box-sizing: border-box; font-family: Jersey, monospace; font-size: calc(var(--u) * 14px); line-height: 1.15; padding: calc(var(--u) * 4px); border: calc(var(--u) * 1px) solid #9ab8a4; border-radius: calc(var(--u) * 2px); resize: none; background: #fff; color: #2a2a2a; outline: none; }
.ask button { margin-top: calc(var(--u) * 5px); float: right; font-family: Jersey, monospace; font-size: calc(var(--u) * 13px); padding: calc(var(--u) * 2px) calc(var(--u) * 10px); background: #2f8a4e; color: #fff; border: 0; border-radius: calc(var(--u) * 2px); cursor: pointer; }
.ask-hint { clear: both; font-size: calc(var(--u) * 9px); opacity: 0.6; padding-top: calc(var(--u) * 3px); }
/* GAME OVER */
.end-title.over { font-size: calc(var(--u) * 22px); color: #f85858; margin-top: calc(var(--u) * 40px); }
.again-btn { pointer-events: auto; margin-top: calc(var(--u) * 16px); font-family: PressStart; font-size: calc(var(--u) * 9px); padding: calc(var(--u) * 5px) calc(var(--u) * 10px); background: #ffd84a; color: #3a2a10; border: 0; border-radius: calc(var(--u) * 3px); cursor: pointer; }
/* Badge menyatu -> peti harta karun */
.merge { position: relative; width: calc(var(--u) * 120px); height: calc(var(--u) * 96px); margin: 0 auto; }
.merge .orbit, .merge .merge-chest { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.merge .orb { position: absolute; width: calc(var(--u) * 26px); height: calc(var(--u) * 26px); image-rendering: pixelated; filter: drop-shadow(0 0 calc(var(--u) * 3px) #fff8c0); }
.merge .orbit.gone { animation: flashout 0.35s ease-out forwards; }
@keyframes flashout { 0% { filter: brightness(3); opacity: 1; } 100% { filter: brightness(3); opacity: 0; } }
.chest-big { width: calc(var(--u) * 80px); height: calc(var(--u) * 68px); image-rendering: pixelated; display: block; margin: 0 auto; }
.chest-big.pop { animation: pop 0.6s ease-out; }
.chest-big.open { animation: pop 0.5s ease-out; filter: drop-shadow(0 0 calc(var(--u) * 6px) #fff0a0); }
/* Layar rapat online */
.lbl.zoomtitle { color: #e8e8f0; font-size: calc(var(--u) * 8px); }
.lbl.zoomname { transform: translate(0, -50%); color: #ffffff; font-size: calc(var(--u) * 7px); }
/* Daftar badge (intro) */
.blist { display: flex; gap: calc(var(--u) * 6px); justify-content: center; margin-bottom: calc(var(--u) * 6px); }
.bl-item { display: flex; flex-direction: column; align-items: center; animation: pop 0.5s ease-out; }
.bl-icon { width: calc(var(--u) * 28px); height: calc(var(--u) * 28px); image-rendering: pixelated; }
.bl-name { font-size: calc(var(--u) * 9px); margin-top: calc(var(--u) * 2px); }
#choices.many { display: grid; grid-auto-flow: column; column-gap: calc(var(--u) * 18px); }