/* font-family dimuat via Google Fonts di index.html */
:root{
  --ink:#241d2e; --paper:#f4ecd8; --bevel:#fffae8;
  --gold:#e0a52b; --gold-dark:#a9781b;
  --green:#3a8a4f; --blue:#2d6cb5; --red:#c0432f;
  --shadow:#14101c; --panel:#f4ecd8;
}

*{box-sizing:border-box;font-family:'Pixelify Sans','Trebuchet MS',Verdana,sans-serif}
h1,h2,.grade,#qtitle{font-family:'Jersey 10',cursive}

body{margin:0;background:radial-gradient(ellipse at 50% 30%,#1c1828 0%,#0c0a14 100%);
     color:#fff;display:flex;flex-direction:column;align-items:center;min-height:100vh}
h1{margin:14px 0 2px;font-size:24px;letter-spacing:1px}
h1 span{background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-dark));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{color:#9aa0b4;font-size:13px;margin-bottom:8px;text-align:center;padding:0 8px}

#wrap{position:relative;width:800px;max-width:100vw}
@keyframes winGlow{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.6)}
  40%{box-shadow:0 8px 32px rgba(0,0,0,.6), 0 0 64px rgba(224,165,43,.65), 0 0 120px rgba(224,165,43,.25)}}
#game{border:3px solid var(--gold);border-radius:8px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px var(--gold-dark), 0 8px 32px rgba(0,0,0,.6), inset 0 0 0 1px rgba(224,165,43,.15);
  position:relative}
#game::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:200;border-radius:6px;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.018) 2px,rgba(0,0,0,.018) 4px)}
#game.win-glow{animation:winGlow 1.6s ease-out 3}

/* HUD - panel perkamen */
#hud{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:8px;
     pointer-events:none;flex-wrap:wrap}
@keyframes chipPulse{
  0%,100%{box-shadow:inset 0 0 0 1px var(--gold), 3px 3px 0 0 var(--shadow)}
  45%{box-shadow:inset 0 0 0 1px var(--gold), 3px 3px 0 0 var(--shadow), 0 0 14px var(--gold)}}
.chip{
  background:linear-gradient(160deg,#fffae8 0%,var(--paper) 40%);
  border:2px solid var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px var(--gold),
             3px 3px 0 0 var(--shadow);
  border-radius:6px;padding:5px 12px;
  font-family:'Jersey 10',cursive;font-size:14px;font-weight:bold;
  color:var(--ink);display:flex;align-items:center;gap:5px}
.chip-pulse{animation:chipPulse .45s ease-out}
.chip small{color:#6b5a3a;font-family:'Pixelify Sans',sans-serif;font-size:11px;font-weight:normal}
.hud-icon{width:14px;height:14px;flex-shrink:0}

/* Panel misi - gaya perkamen */
#quest{position:absolute;top:46px;right:8px;width:230px;
  background:linear-gradient(160deg,#fffae8 0%,var(--paper) 30%);
  border:2px solid var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px var(--gold),
             3px 3px 0 0 var(--shadow);
  border-radius:6px;padding:10px 12px;font-size:12.5px;pointer-events:none;
  color:var(--ink)}
#quest b{color:var(--blue)}
#quest .obj{margin-top:6px;color:#3a4a63;font-size:12px;line-height:1.45}
#qtitle{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:6px}
#qtitle::before{content:'';display:inline-block;width:3px;height:13px;
  background:var(--gold);border-radius:1px;flex-shrink:0}
.step-bar{height:7px;background:rgba(36,29,46,0.22);border-radius:2px;margin-top:7px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(0,0,0,.15)}
.step-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .5s ease;width:0%}
.step-label{font-size:11px;letter-spacing:.5px;color:#9a8a60;text-align:right;margin-top:2px;font-family:'Jersey 10',cursive}

/* Dialog */
@keyframes dlgSlideIn{
  from{opacity:0;transform:translateX(-50%) translateY(14px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}}
#dlg{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:92%;
  background:var(--panel);color:var(--ink);
  border:3px solid var(--gold);
  box-shadow:0 0 0 2px var(--ink), 0 8px 0 var(--shadow), 0 14px 32px rgba(0,0,0,.55);
  border-radius:8px;padding:0;display:none;overflow:hidden}
#dlg.dlg-open{animation:dlgSlideIn .2s cubic-bezier(.22,1,.36,1) both}
#dlg .who{
  font-family:'Jersey 10',cursive;font-size:15px;font-weight:bold;
  color:#231a0e;
  background:linear-gradient(100deg,var(--gold-dark) 0%,var(--gold) 35%,#f5d060 55%,var(--gold-dark) 100%);
  padding:7px 14px;display:flex;align-items:center;gap:8px;min-height:52px;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  border-bottom:2px solid var(--shadow)}
.who-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:50%;padding:0 3px;
  font-family:'Jersey 10',cursive;font-size:10px;font-weight:bold;
  color:#fff;flex-shrink:0;letter-spacing:0;
  border:1.5px solid rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.35)}
.dlg-portrait{
  width:48px;height:48px;border-radius:4px;flex-shrink:0;overflow:hidden;
  border:1.5px solid rgba(0,0,0,.35);
  box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;background:#241d2e}
.dlg-portrait svg{width:48px;height:48px;display:block}
@media(max-width:560px){
  .dlg-portrait{width:36px;height:36px}
  .dlg-portrait svg{width:36px;height:36px}}
#dlg .txt{font-size:14px;line-height:1.6;min-height:42px;color:var(--ink);
  padding:12px 16px 4px;background:linear-gradient(180deg,rgba(255,253,245,.5),rgba(244,236,216,0))}
#dlg .choices{padding:8px 16px 4px;display:flex;gap:8px;flex-wrap:wrap}
#dlg button{
  cursor:pointer;font-family:'Jersey 10',cursive;font-size:15px;font-weight:bold;
  border:2px solid var(--ink);border-left:4px solid var(--ink);
  background:linear-gradient(180deg,#f8d060 0%,var(--gold) 55%);
  color:var(--ink);padding:7px 16px;border-radius:5px;
  box-shadow:2px 2px 0 var(--shadow);
  transition:transform .08s ease,box-shadow .08s ease,background .1s ease,border-left-color .08s ease}
#dlg button:hover{transform:translateY(-2px);box-shadow:2px 4px 0 var(--shadow);
  background:linear-gradient(180deg,#ffe060 0%,#f5c44a 50%);border-left-color:var(--gold-dark)}
#dlg button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}
#dlg button[data-disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.4);pointer-events:none;}
#dlg .hint{font-size:11px;color:#8a7d5a;padding:4px 16px 10px;
  border-top:1px solid rgba(36,29,46,.08);margin-top:4px}

.controls{color:#7a8094;font-size:12px;margin:10px 0 20px;text-align:center;padding:0 8px;letter-spacing:.2px}
kbd{background:#1e2130;border:1px solid #3a3e50;border-bottom:2px solid #3a3e50;
    border-radius:4px;padding:1px 7px;font-size:11px;color:#c8cedf}

/* Toast pemberitahuan tahap misi */
@keyframes toastIn{
  0%  {opacity:0;transform:translateX(-50%) translateY(-10px)}
  15% {opacity:1;transform:translateX(-50%) translateY(0)}
  75% {opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
#toast{position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:28;
  padding:7px 22px;border-radius:6px;white-space:nowrap;pointer-events:none;
  background:rgba(20,16,28,.96);color:var(--gold);
  font-family:'Jersey 10',cursive;font-size:14px;
  border:2px solid var(--gold);opacity:0}
#toast.toast-in{animation:toastIn 2.6s ease both}

/* Arrow lanjut yang memantul */
#darrow{display:none;justify-content:center;padding:6px 0 8px;opacity:0.9;
  animation:bounce .7s infinite ease-in-out}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Tombol bisukan & bantuan - panel perkamen */
#mute,#help{position:absolute;top:8px;z-index:30;cursor:pointer;
  width:38px;height:38px;border-radius:6px;
  border:2px solid var(--ink);
  background:linear-gradient(180deg,var(--bevel) 0%,var(--paper) 30%);
  box-shadow:inset 0 0 0 1px var(--gold), 2px 2px 0 var(--shadow);
  color:var(--ink);font-family:'Jersey 10',cursive;font-size:18px;line-height:1}
#mute{right:8px}
#help{right:54px}
#mute:hover,#help:hover{background:var(--bevel)}
#mute:active,#help:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shadow)}

/* Layar judul & tentang */
#title,#about{position:absolute;inset:0;z-index:40;display:flex;
  align-items:center;justify-content:center;border-radius:8px;
  background:radial-gradient(circle at 50% 35%, rgba(28,25,38,.85), rgba(10,8,16,.96))}
#about{display:none}

/* Partikel emas naik di layar judul */
#titleParticles{position:absolute;inset:0;overflow:hidden;border-radius:8px;pointer-events:none}
/* Siluet desa di bawah layar judul */
#titleSkyline{position:absolute;bottom:0;left:0;width:100%;pointer-events:none;z-index:1;border-radius:0 0 8px 8px}
.t-spark{
  position:absolute;border-radius:50%;background:var(--gold);
  animation:tSpark linear infinite;opacity:0}
@keyframes tSpark{
  0%  {opacity:0;transform:translateY(0) scale(0.6)}
  10% {opacity:.75}
  80% {opacity:.3}
  100%{opacity:0;transform:translateY(-130px) scale(1.3)}}
.t-drift{
  position:absolute;border-radius:50%;
  animation:tDrift linear infinite;opacity:0}
@keyframes tDrift{
  0%  {opacity:0;transform:translateX(0) translateY(0) scale(0.5)}
  12% {opacity:.6}
  70% {opacity:.22}
  100%{opacity:0;transform:translateX(var(--dx,14px)) translateY(-110px) scale(1.5)}}
.t-twinkle{
  position:absolute;border-radius:50%;background:#fffcf0;
  animation:tTwinkle ease-in-out infinite;opacity:0}
@keyframes tTwinkle{
  0%,100%{opacity:0;transform:scale(0.4)}
  30%    {opacity:.7;transform:scale(1.0)}
  65%    {opacity:.3;transform:scale(0.8)}}

/* Title skyline — window candle flicker */
@keyframes skyWin{
  0%,100%{opacity:.14}
  20%{opacity:.52}
  35%{opacity:.38}
  55%{opacity:.60}
  75%{opacity:.28}
}
.sky-win{animation:skyWin 3.8s ease-in-out infinite}

/* Title skyline — star twinkle */
@keyframes skyStarTw{
  0%,100%{opacity:.15;transform:scale(1)}
  45%{opacity:.75;transform:scale(1.5)}
  70%{opacity:.30;transform:scale(1)}
}
.sky-star{animation:skyStarTw ease-in-out infinite;animation-duration:4s}

/* Title moon glow pulse */
@keyframes moonPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(255,250,200,.35))}
  50%{filter:drop-shadow(0 0 14px rgba(255,250,200,.70)) drop-shadow(0 0 28px rgba(255,245,180,.25))}
}
.title-moon{animation:moonPulse 5.2s ease-in-out infinite}

/* Title card — breathing gold ambient */
@keyframes titleAura{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
#title::before{
  content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 28%,rgba(224,165,43,.10) 0%,transparent 58%);
  animation:titleAura 4.6s ease-in-out infinite;
}

@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
#title{animation:overlayIn .4s ease-out}
.title-card{animation:cardIn .55s cubic-bezier(.22,1,.36,1) .08s both}
#recap{animation:overlayIn .35s ease-out}
.recap-card{animation:cardIn .5s cubic-bezier(.22,1,.36,1) .05s both}

.title-card{max-width:460px;text-align:center;padding:26px 28px;
  background:rgba(22,18,32,.82);
  border:2px solid var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.55);
  border-radius:8px}
@keyframes emblemGlow{
  0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
  50%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(224,165,43,.38))}
}
.title-emblem{margin-bottom:8px;animation:emblemGlow 3.8s ease-in-out infinite}
.title-card h2{margin:6px 0 10px;font-size:30px;color:#fff;font-family:'Jersey 10',cursive}
.title-card h2 span{color:var(--gold)}
.title-card .tag{color:#cfd6e6;font-size:14px;line-height:1.5;margin:0 0 18px}
.title-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.title-card button{
  cursor:pointer;font-family:'Jersey 10',cursive;font-size:14px;font-weight:bold;
  border:2px solid var(--gold);border-radius:6px;
  padding:8px 18px;color:var(--gold);background:transparent;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
  transition:transform .1s ease}
.title-card button.primary{
  background:var(--gold);color:#231a0e;
  padding:14px 32px;font-size:17px;
  box-shadow:3px 3px 0 var(--shadow), 2px 2px 0 var(--gold-dark)}
.title-card button.tertiary{background:none;border:none;text-decoration:underline;color:var(--gold);opacity:.7;font-size:13px;padding:6px 12px;box-shadow:none}
.title-card button:hover{transform:translateY(-2px)}
.title-card button:active{transform:scale(.96)}
.title-hint{color:#8a90a4;font-size:12px;margin:16px 0 0}

/* Input nama */
#nameInput{display:block;width:100%;margin:0 auto 16px;padding:10px 14px;
  font-family:'Pixelify Sans',sans-serif;font-size:14px;
  border-radius:6px;border:2px solid rgba(232,163,61,.5);
  background:rgba(10,8,16,.5);color:#fff;text-align:center;outline:none}
#nameInput::placeholder{color:#8a90a4}
#nameInput:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(224,165,43,.2)}

/* Caption mode demo */
#caption{display:none;position:absolute;left:50%;bottom:54px;transform:translateX(-50%);
  z-index:25;max-width:90%;text-align:center;padding:10px 18px;border-radius:6px;
  background:rgba(20,17,30,.92);color:#fff;font-size:14px;font-weight:bold;
  border:2px solid var(--gold);box-shadow:0 4px 18px rgba(0,0,0,.55)}

/* Rapor & sertifikat */
#recap{position:absolute;inset:0;z-index:45;display:none;align-items:center;
  justify-content:center;border-radius:8px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%, rgba(28,25,38,.9), rgba(10,8,16,.97))}
@keyframes recapAura{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.recap-card{max-width:440px;position:relative;z-index:2}
/* Grade letter: bounce-in then breathing glow */
@keyframes gradeIn{
  0%{opacity:0;transform:scale(0.25) rotate(-18deg)}
  55%{opacity:1;transform:scale(1.24) rotate(4deg);text-shadow:0 0 40px rgba(224,165,43,.9),0 4px 10px rgba(0,0,0,.5)}
  78%{transform:scale(0.91) rotate(-2deg)}
  100%{transform:scale(1) rotate(0);text-shadow:0 0 14px rgba(224,165,43,.55),0 4px 10px rgba(0,0,0,.5)}
}
@keyframes gradePulse{
  0%,100%{text-shadow:0 0 14px rgba(224,165,43,.55),0 4px 10px rgba(0,0,0,.5)}
  50%{text-shadow:0 0 36px rgba(224,165,43,.9),0 0 60px rgba(224,165,43,.25),0 4px 10px rgba(0,0,0,.5)}
}
.recap-card .grade{font-size:64px;font-weight:bold;color:var(--gold);line-height:1;
  margin:4px 0;font-family:'Jersey 10',cursive;display:inline-block;
  animation:gradeIn .7s cubic-bezier(.22,1,.36,1) .3s both, gradePulse 3s ease-in-out 1.1s infinite}
/* Staggered checklist reveal */
.recap-list{list-style:none;padding:0;margin:14px 0;text-align:left;
  color:#e8ecf5;font-size:14px;line-height:1.9}
@keyframes listIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.recap-list li{border-bottom:1px solid rgba(255,255,255,.08);padding:2px 4px;
  animation:listIn .32s ease-out both}
.recap-list li:nth-child(1){animation-delay:.55s}
.recap-list li:nth-child(2){animation-delay:.72s}
.recap-list li:nth-child(3){animation-delay:.89s}
.recap-list li:nth-child(4){animation-delay:1.06s}
.recap-list li:nth-child(5){animation-delay:1.23s}
/* Floating sparkle particles */
.recap-spark{position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:var(--gold);animation:sparkRise linear infinite;opacity:0}
@keyframes sparkRise{
  0%{opacity:0;transform:translateY(0) scale(0)}
  12%{opacity:.75}
  50%{opacity:.35;transform:translateY(-55px) scale(1)}
  88%{opacity:.1}
  100%{opacity:0;transform:translateY(-110px) scale(.2)}
}

/* Glosarium */
#helpOverlay{position:absolute;inset:0;z-index:46;display:none;align-items:center;
  justify-content:center;border-radius:8px;
  background:radial-gradient(circle at 50% 35%, rgba(28,25,38,.9), rgba(10,8,16,.97))}
.help-card{max-width:440px}
.help-list{list-style:none;padding:0;margin:12px 0;text-align:left;
  color:#e8ecf5;font-size:14px;line-height:1.7}
.help-list li{padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.help-list b{color:var(--gold)}

/* Petunjuk awal */
#hint{display:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:24;max-width:90%;text-align:center;padding:9px 16px;border-radius:6px;
  background:rgba(20,17,30,.92);color:#fff;font-size:13px;
  border:2px solid var(--blue);box-shadow:0 4px 16px rgba(0,0,0,.5)}

/* Kontrol sentuh */
#touch{display:none}
@media (hover:none) and (pointer:coarse){ #touch{display:block} }
#dpad{position:absolute;right:14px;bottom:14px;z-index:26;
  display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);
  gap:4px;justify-items:center;align-items:center}
#dpad button{width:50px;height:50px;border-radius:6px;font-size:18px;
  border:2px solid var(--ink);
  background:linear-gradient(180deg,var(--bevel) 0%,var(--paper) 30%);
  box-shadow:inset 0 0 0 1px var(--gold), 2px 2px 0 var(--shadow);
  color:var(--ink);touch-action:none;user-select:none}
#dpad button:active{background:var(--gold);color:#231a0e;
  box-shadow:1px 1px 0 var(--shadow);transform:translate(1px,1px)}
#dpad button[data-dir="up"]{grid-column:2;grid-row:1}
#dpad button[data-dir="left"]{grid-column:1;grid-row:2}
#dpad button[data-dir="act"]{grid-column:2;grid-row:2;border-radius:50%;width:54px;height:54px;
  font-size:22px;background:var(--gold);color:#231a0e;font-weight:bold;
  box-shadow:0 0 0 3px var(--gold-dark),2px 2px 0 var(--shadow)}
#dpad button[data-dir="right"]{grid-column:3;grid-row:2}
#dpad button[data-dir="down"]{grid-column:2;grid-row:3}

/* Layar sempit */
@media (max-width:560px){
  h1{font-size:19px}
  .chip{font-size:12px;padding:4px 9px}
  #quest{width:180px;font-size:11px}
  .title-card h2{font-size:24px}
  .title-card .tag{font-size:13px}
}
/* Cegah tumpang-tindih HUD & panel misi di layar sangat sempit */
@media (max-width:420px){
  #quest{top:78px}
}