@font-face { font-family: 'Nunito'; src: url('../assets/fonts/Nunito-900.woff2') format('woff2'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../assets/fonts/Nunito-700i.woff2') format('woff2'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Gochi'; src: url('../assets/fonts/GochiHand.woff2') format('woff2'); font-weight: 400; }

:root {
  --ui: 'Nunito', 'Segoe UI', Roboto, system-ui, sans-serif;
  --hand: 'Gochi', 'Comic Sans MS', cursive;
  --gold: #ffd864;
  --paper: #fbf3dc;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: #07090c; overflow: hidden; font-family: var(--ui); color: #fff; }
button { font-family: var(--ui); cursor: pointer; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; background: #07090c; }
#stage { position: absolute; left: 0; top: 0; width: 1024px; height: 576px; transform-origin: top left; overflow: hidden; background: #000; user-select: none; }
#stage > * { position: absolute; }
#gl { left: 0; top: 0; width: 1024px; height: 576px; display: block; }
#debug { left: 0; top: 0; width: 1024px; height: 576px; pointer-events: none; display: none; }
#debug.on { display: block; }
#touch { inset: 0; }

/* HUD */
#hud { inset: 0; pointer-events: none; }
#clock { position: absolute; left: 18px; top: 14px; background: rgba(20, 30, 40, .62); border: 2px solid rgba(255,255,255,.35); border-radius: 14px; padding: 6px 14px; min-width: 128px; text-shadow: 0 1px 2px #000; backdrop-filter: blur(4px); }
#clock-day { font-size: 15px; letter-spacing: .5px; color: var(--gold); }
#clock-slot { font-size: 20px; display: flex; gap: 8px; align-items: center; }
#objective { position: absolute; left: 164px; top: 16px; max-width: 500px; background: rgba(20,30,40,.55); border-radius: 18px; padding: 6px 16px; font-size: 15px; line-height: 1.25; text-shadow: 0 1px 2px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; border: 1.5px solid rgba(255,255,255,.25); }
#objective:empty { display: none; }
#hud-buttons { position: absolute; right: 18px; top: 14px; display: flex; gap: 8px; pointer-events: auto; }
#hud-buttons button { background: rgba(20,30,40,.62); color: #fff; border: 2px solid rgba(255,255,255,.35); border-radius: 12px; padding: 8px 12px; font-size: 16px; font-weight: 900; text-shadow: 0 1px 2px #000; backdrop-filter: blur(4px); }
#hud-buttons button:hover { background: rgba(255,216,100,.85); color: #222; text-shadow: none; }

#vignette { inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%); }
#chapter { left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--hand); font-size: 54px; color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.8); pointer-events: none; white-space: nowrap; animation: chapter 2.2s ease-out forwards; }
@keyframes chapter { 0% { opacity: 0; transform: translate(-50%, -40%); } 15% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; } 100% { opacity: 0; } }
#rotate-hint { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); background: rgba(255,216,100,.95); color: #222; padding: 12px 22px; border-radius: 999px; font-size: 18px; font-weight: 900; z-index: 50; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.fs-btn.hidden { display: none !important; }

/* Touch devices: bigger targets */
@media (pointer: coarse) {
  .hs { font-size: 18px; padding: 10px 18px; }
  .hs.far { font-size: 15px; padding: 7px 14px; }
  #hud-buttons button { font-size: 18px; padding: 10px 14px; }
  #dialog-text { font-size: 27px; }
  #dialog-choices button { font-size: 19px; padding: 10px 22px; }
  #closeup-shoot { font-size: 22px; padding: 14px 34px; }
}

/* Hotspot prompts */
#hotspots { inset: 0; pointer-events: none; }
.hs { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; background: rgba(255,255,255,.93); color: #1d2a33; border: 0; border-radius: 999px; padding: 7px 14px; font-size: 15px; font-weight: 900; box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; transition: transform .15s; animation: hs-pop .25s ease-out; }
.hs::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.hs.far { background: rgba(255,255,255,.62); font-size: 13px; padding: 5px 11px; }
.hs.exit { background: rgba(255,216,100,.95); }
.hs:hover { transform: translate(-50%, -100%) scale(1.06); }
.hs.mini { padding: 3px 8px; font-size: 17px; background: rgba(255,255,255,.72); animation: hs-pop .25s ease-out, mini-bob 1.6s ease-in-out infinite; }
.hs.mini.exit { background: rgba(255,216,100,.92); font-size: 18px; padding: 4px 10px; }
@keyframes mini-bob { 50% { margin-top: -5px; } }
@keyframes hs-pop { from { opacity: 0; transform: translate(-50%, -80%); } to { opacity: 1; transform: translate(-50%, -100%); } }

/* Toast */
#toast { left: 50%; top: 84px; transform: translateX(-50%); background: rgba(255,216,100,.95); color: #222; padding: 8px 18px; border-radius: 999px; font-size: 16px; font-weight: 900; opacity: 0; transition: opacity .3s, top .3s; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
#toast.on { opacity: 1; top: 92px; }

/* Dialog (bottom subtitles) */
#dialog { inset: 0; }
#dialog-catch { position: absolute; inset: 0; cursor: pointer; }
#dialog-box { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 70px 34px 70px; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); pointer-events: none; display: flex; gap: 22px; align-items: flex-end; }
#dialog-main { position: relative; flex: 1; min-width: 0; }
#portrait { flex: none; width: 136px; height: 173px; margin-bottom: 2px; border-radius: 22px; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.55); background: #cfd6d2 no-repeat; background-size: 300% 100%; animation: portrait-in .25s ease-out; }
@keyframes portrait-in { from { transform: translateY(10px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
#dialog-name { color: var(--gold); font-size: 17px; letter-spacing: 1px; margin-bottom: 6px; text-shadow: 0 2px 3px #000; }
#dialog-name:empty { display: none; }
#dialog-text { font-size: 25px; line-height: 1.35; min-height: 68px; text-shadow: 0 2px 4px #000, 0 0 10px rgba(0,0,0,.6); }
#dialog-next { position: absolute; right: 0; bottom: 0; color: var(--gold); font-size: 16px; animation: bob 1s infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
#dialog-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; pointer-events: auto; }
#dialog-choices:empty { display: none; }
#dialog-choices button { background: rgba(255,255,255,.92); color: #1d2a33; border: 0; border-radius: 999px; padding: 8px 18px; font-size: 17px; font-weight: 900; }
#dialog-choices button:hover { background: var(--gold); }
#dialog-input { display: flex; gap: 8px; margin-top: 12px; pointer-events: auto; }
#dialog-input input { font-family: var(--hand); font-size: 26px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--gold); background: var(--paper); color: #2b2b2b; width: 260px; }
#dialog-input button { background: var(--gold); border: 0; border-radius: 10px; padding: 6px 18px; font-size: 17px; font-weight: 900; }

/* Camera close-up mode */
#closeup { inset: 0; cursor: crosshair; overflow: hidden; background: #000; }
#closeup-img { position: absolute; left: 0; top: 0; width: 1024px; height: 576px; object-fit: cover; animation: closeup-in .6s ease-out; }
@keyframes closeup-in { from { transform: scale(1.15); opacity: 0; } to { transform: none; opacity: 1; } }
#closeup-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); background: rgba(0,0,0,.55); border-radius: 999px; padding: 8px 20px; font-size: 16px; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
#viewfinder { position: absolute; width: 300px; height: 210px; transform: translate(-50%, -50%); pointer-events: none; }
#viewfinder span { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); }
#viewfinder span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
#viewfinder span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
#viewfinder span:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
#viewfinder span:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#viewfinder::after { content: '+'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 26px; text-shadow: 0 0 4px #000; }
#closeup-shoot { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--gold); border: 0; border-radius: 999px; padding: 12px 28px; font-size: 20px; font-weight: 900; color: #222; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
#closeup-shoot:hover { transform: translateX(-50%) scale(1.05); }

/* Photo polaroid */
#photo { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
.polaroid { background: #fff; padding: 12px 12px 10px; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.5); transform: rotate(-3deg); animation: polaroid-in .5s cubic-bezier(.2,1.4,.5,1); color: #333; }
@keyframes polaroid-in { from { transform: rotate(-3deg) scale(.4); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.polaroid img { display: block; width: 300px; height: 210px; object-fit: cover; background: #ddd; }
#photo-cap { font-family: var(--hand); font-size: 24px; text-align: center; margin-top: 8px; }
.polaroid-hint { font-size: 12px; text-align: center; color: #888; }

/* Journal */
#journal { inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
#journal-book { width: 900px; height: 520px; background: var(--paper); background-image: repeating-linear-gradient(transparent 0 31px, rgba(60,90,140,.12) 31px 32px); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 6px #d8c7a0; color: #2b2b2b; position: relative; overflow: hidden; display: flex; flex-direction: column; }
#journal-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px 8px; border-bottom: 2px dashed #c9b98f; }
#journal-title { font-family: var(--hand); font-size: 32px; color: #3a4a2f; }
#journal-tabs { display: flex; gap: 6px; margin-left: auto; }
#journal-tabs button { border: 2px solid #b8a97e; background: #fff8e8; color: #4a4a3a; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 900; }
#journal-tabs button.on { background: #5d8a3c; color: #fff; border-color: #5d8a3c; }
#journal-close, #journal-back { border: 0; background: #e2555a; color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 15px; }
#journal-back { background: #5d8a3c; }
#journal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px 20px; overflow-y: auto; flex: 1; }
.jcard { background: #fff; border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.15); padding: 8px; cursor: pointer; transition: transform .12s; border: 2px solid transparent; }
.jcard:hover { transform: translateY(-3px); border-color: #5d8a3c; }
.jcard.locked { opacity: .65; cursor: default; }
.jcard.locked:hover { transform: none; border-color: transparent; }
.jcard .jimg { width: 100%; height: 110px; border-radius: 6px; background: #e9e4d2; display: flex; align-items: center; justify-content: center; font-size: 56px; overflow: hidden; }
.jcard .jimg img { width: 100%; height: 100%; object-fit: cover; }
.jcard.locked .jimg { filter: grayscale(1); font-size: 44px; color: #aaa; }
.jcard .jname { font-family: var(--hand); font-size: 20px; margin-top: 6px; text-align: center; line-height: 1.1; }
.jcard .jhint { font-size: 11px; color: #777; text-align: center; margin-top: 2px; }
#journal-detail { position: absolute; inset: 70px 0 0 0; background: var(--paper); display: flex; gap: 20px; padding: 16px 24px; overflow-y: auto; }
#journal-detail.hidden { display: none; }
#journal-back { position: absolute; left: 20px; top: 14px; }
#jd-photo { width: 340px; flex: none; margin-top: 44px; }
#jd-photo img, #jd-photo .big { width: 340px; height: 240px; object-fit: cover; border: 10px solid #fff; border-bottom-width: 36px; box-shadow: 0 8px 20px rgba(0,0,0,.25); transform: rotate(-2deg); background: #e9e4d2; display: flex; align-items: center; justify-content: center; font-size: 120px; }
#jd-body { flex: 1; margin-top: 44px; }
#jd-name { font-family: var(--hand); font-size: 38px; color: #3a4a2f; line-height: 1; }
#jd-latin { font-style: italic; font-weight: 700; color: #777; font-size: 15px; margin-bottom: 4px; }
#jd-found { font-size: 13px; color: #5d8a3c; margin-bottom: 10px; }
#jd-facts { padding-left: 20px; margin: 0; font-family: var(--hand); font-size: 20px; line-height: 1.35; color: #333; }
#jd-facts li { margin-bottom: 8px; }
#journal-count { padding: 6px 20px 10px; font-size: 13px; color: #6a6a5a; text-align: right; }

/* Diary */
#diary { inset: 0; background: rgba(10,10,20,.9); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#diary-page { width: 620px; min-height: 380px; background: var(--paper); background-image: repeating-linear-gradient(transparent 0 35px, rgba(60,90,140,.18) 35px 36px); padding: 30px 40px; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.7); color: #2a2a3a; transform: rotate(-1deg); font-family: var(--hand); }
#diary-date { font-size: 22px; color: #8a5a2a; margin-bottom: 10px; }
#diary-text { font-size: 27px; line-height: 36px; white-space: pre-wrap; }
.diary-hint { margin-top: 18px; font-size: 16px; color: #999; text-align: right; }

/* Story cards */
#cards { inset: 0; background: #000 center/cover no-repeat; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; }
#cards.bg #card-text { background: rgba(0,0,0,.5); border-radius: 16px; padding: 22px 32px; }
#card-text { max-width: 760px; font-size: 27px; line-height: 1.5; text-align: center; text-shadow: 0 2px 6px #000; padding: 0 30px; animation: fadein .8s; }
.card-hint { position: absolute; bottom: 26px; right: 36px; font-size: 14px; color: rgba(255,255,255,.55); }
#cards.scene { background: transparent; }
#cards.scene #card-text { background: rgba(0,0,0,.45); border-radius: 16px; padding: 22px 32px; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ending */
#ending { inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, rgba(40,20,30,.5), rgba(0,0,0,.85)); }
#ending-inner { text-align: center; max-width: 760px; padding: 20px; }
#ending-title { font-family: var(--hand); font-size: 64px; color: var(--gold); text-shadow: 0 3px 10px #000; }
#ending-msg { font-size: 26px; line-height: 1.5; margin: 14px 0 20px; text-shadow: 0 2px 6px #000; }
#ending-stats { font-size: 16px; color: #ddd; margin-bottom: 24px; }
#ending-buttons button { background: var(--gold); border: 0; border-radius: 999px; padding: 12px 24px; font-size: 18px; font-weight: 900; margin: 0 6px; color: #222; }

/* Flash & fade */
#flash { inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
#fade { inset: 0; background: #000; opacity: 1; pointer-events: none; transition: opacity .5s; }
#fade.clear { opacity: 0; }

/* Title */
#title { inset: 0; overflow: hidden; }
#title-art { position: absolute; inset: -20px; background: url('../assets/title.jpg') center/cover, url('../assets/bg/senja.jpg') center/cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-10px, -6px); } }
#title-inner { position: absolute; left: 2%; top: 1%; bottom: 40px; width: 42%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center; }
#title::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,.12) 48%, rgba(0,0,0,0) 62%), linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 18%); }
#title-inner, #title-credit { z-index: 1; }
#title-sub { font-size: 17px; letter-spacing: 1px; text-shadow: 0 2px 6px #000; color: #ffe9b0; }
#title-logo { width: 340px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
#title-main { font-family: var(--hand); font-size: 84px; line-height: 1; color: #fff; text-shadow: 0 0 0 #000, 4px 4px 0 #8a3a1a, 0 10px 30px rgba(0,0,0,.6); -webkit-text-stroke: 2px #4a2010; transform: rotate(-2deg); margin: 2px 0 4px; white-space: nowrap; }
#title-tag { font-size: 18px; font-weight: 900; color: var(--gold); text-shadow: 0 2px 6px #000; margin-bottom: 8px; }
#title-buttons2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
#title-buttons2 button { background: rgba(255,255,255,.22); color: #fff; border: 2px solid rgba(255,255,255,.55); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 900; backdrop-filter: blur(4px); text-shadow: 0 1px 3px #000; }
#title-buttons2 button:hover { background: rgba(255,255,255,.4); }
#title-buttons { display: flex; gap: 14px; }
#title.hidden { display: none; }
#title-buttons button { background: var(--gold); color: #222; border: 0; border-radius: 999px; padding: 14px 30px; font-size: 22px; font-weight: 900; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .12s; }
#title-buttons button:hover { transform: scale(1.06); }
#btn-continue { background: #fff !important; }
#title-tip { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.8); text-shadow: 0 1px 3px #000; }
#title-credit { position: absolute; bottom: 10px; left: 46%; right: 14px; text-align: right; font-size: 12px; color: rgba(255,255,255,.65); text-shadow: 0 1px 3px #000; }

/* Loading */
#loading { inset: 0; background: #0b1a12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
#loading-text { font-size: 20px; color: #cfe6c6; }
#loading-bar { width: 320px; height: 12px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
#loading-fill { width: 0; height: 100%; background: var(--gold); transition: width .2s; }

/* Splash: Presented by AnakMelben Production */
#splash { inset: 0; background: radial-gradient(ellipse at center, #1a2b22 0%, #07100b 75%); display: flex; align-items: center; justify-content: center; z-index: 30; transition: opacity .7s; cursor: pointer; }
#splash.out { opacity: 0; pointer-events: none; }
#splash-inner { text-align: center; }
#splash-pre { font-size: 17px; letter-spacing: 6px; text-transform: uppercase; color: #9fb8a6; opacity: 0; animation: splash-in 1s .3s forwards; }
#splash-brand { font-family: var(--hand); font-size: 62px; color: #ffe9b0; text-shadow: 0 0 24px rgba(255,200,100,.45); margin-top: 8px; opacity: 0; animation: splash-in 1.2s .9s forwards; }
#splash-line { width: 0; height: 3px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: splash-line 1.6s 1.4s forwards; }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-line { to { width: 360px; } }

#lang-pick { inset: 0; background: radial-gradient(ellipse at center, #1c3a2c 0%, #0a1710 80%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 25; }
#lang-pick.hidden { display: none; }
#lang-logo { width: 130px; height: 130px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
#lang-title { font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px #000; }
#lang-buttons { display: flex; gap: 18px; }
#lang-buttons button { background: var(--gold); color: #222; border: 0; border-radius: 999px; padding: 16px 36px; font-size: 24px; font-weight: 900; box-shadow: 0 8px 24px rgba(0,0,0,.45); transition: transform .12s; }
#lang-buttons button:hover { transform: scale(1.07); }

#hud-buttons #btn-lang { min-width: 52px; }
#ending-talk { margin: 0 auto 20px; max-width: 640px; text-align: left; background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.28); border-radius: 16px; padding: 12px 20px; font-size: 16px; line-height: 1.45; }
#ending-talk-title { font-family: var(--hand); font-size: 26px; color: var(--gold); margin-bottom: 4px; }
#ending-talk ul { margin: 0; padding-left: 22px; }
#ending-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#ending-buttons button { margin: 0; }
#ending-msg { font-size: 23px; margin: 8px 0 12px; }
#ending-title { font-size: 54px; }
#ending-stats { margin-bottom: 12px; }

#backdrop { inset: 0; opacity: 0; transition: opacity .45s; pointer-events: none; background: #000; }
#backdrop.on { opacity: 1; }
#backdrop img { width: 100%; height: 100%; object-fit: cover; animation: none; }
#backdrop.on img { animation: kenburns 18s ease-in-out infinite alternate; }

/* ---------- Kuis Penjaga Rimba ---------- */
#ending-quiz { background: #fff !important; box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(255,216,100,.7); animation: qzpulse 1.8s ease-in-out infinite; }
@keyframes qzpulse { 50% { box-shadow: 0 0 0 3px var(--gold), 0 0 30px rgba(255,216,100,1); } }
#title-links { position: absolute; top: 14px; right: 18px; display: flex; gap: 8px; z-index: 1; }
#title-links a { margin: 0; background: rgba(0,0,0,.38); padding: 6px 12px; border-radius: 999px; text-decoration: none; color: #e8f3d8; font-size: 14px; text-shadow: 0 1px 3px #000; }
#title-links #title-help { background: rgba(214,104,40,.85); color: #fff; }
#quiz { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4,12,8,.78); z-index: 30; }
#quiz .qz-box { width: min(720px, 92%); max-height: 94%; overflow: auto; background: var(--paper); color: #2b2418; border-radius: 22px; padding: 18px 24px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6); text-align: center; }
.qz-top { display: flex; justify-content: space-between; font-weight: 900; color: #6a5a3a; font-size: 15px; }
.qz-top span:first-child { font-family: var(--hand); font-size: 24px; color: #2f6b45; }
.qz-dots { display: flex; gap: 6px; justify-content: center; margin: 6px 0 10px; }
.qz-dots i { width: 34px; height: 6px; border-radius: 3px; background: #d8ccae; }
.qz-dots i.done { background: #2f6b45; } .qz-dots i.now { background: #e0a526; }
.qz-q { font-size: 23px; font-weight: 900; line-height: 1.3; margin: 4px 0 14px; }
.qz-opts { display: flex; flex-direction: column; gap: 9px; }
.qz-opts button { font-size: 18px; font-weight: 800; padding: 11px 16px; border-radius: 14px; border: 2.5px solid #c9b88f; background: #fff; color: #2b2418; transition: transform .1s; }
.qz-opts button:hover { transform: scale(1.015); }
.qz-opts button.right { background: #cfeec0; border-color: #3d8a4f; }
.qz-opts button.wrong { background: #f6cfc4; border-color: #b8553e; }
.qz-opts button.dim { opacity: .55; }
.qz-why { margin-top: 12px; font-size: 16px; line-height: 1.4; background: #fff8e2; border-radius: 12px; padding: 9px 12px; text-align: left; }
.qz-foot { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.qz-foot button { border: 0; border-radius: 999px; padding: 10px 20px; font-size: 16px; font-weight: 900; background: #2f6b45; color: #fff; }
.qz-foot .qz-close { background: #d8ccae; color: #3b3222; }
.qz-badge { width: min(300px, 52vh); height: auto; display: block; margin: 6px auto 4px; }
.qz-msg { font-size: 19px; font-weight: 800; margin: 6px 0; }
.qz-big { font-size: 80px; margin: 10px 0; }
#btn-voice.off { opacity: .5; filter: grayscale(1); }
#title-main { display: none; }
html[lang="en"] #title-main { display: block; font-family: var(--ui); font-weight: 900; font-size: 22px; letter-spacing: 1px; -webkit-text-stroke: 0; transform: none; margin: -6px 0 0; color: #ffe9b0; text-shadow: 0 2px 6px #000; }

/* ---------- Catatan pembuat (real fires acknowledgement) ---------- */
#note { inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40,22,10,.92), rgba(5,8,6,.97)); z-index: 40; }
#note-box { width: min(700px, 90%); color: #f4ead2; text-align: left; }
#note-title { font-family: var(--hand); font-size: 36px; color: var(--gold); margin-bottom: 6px; }
#note-box p { font-size: 19px; line-height: 1.55; margin: 0 0 12px; text-shadow: 0 1px 3px #000; }
#note-buttons { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
#note-buttons a, #note-buttons button { border: 0; border-radius: 999px; padding: 12px 22px; font-size: 17px; font-weight: 900; text-decoration: none; }
#note-help { background: rgba(214,104,40,.95); color: #fff; }
#note-ok { background: var(--gold); color: #222; }
#ending-links { margin-top: 12px; font-size: 14px; color: #e8f3d8; }
#ending-links a { color: #e8f3d8; text-underline-offset: 3px; }
#ending-links a:first-child { color: #ffc49a; font-weight: 800; }
.qz-promises { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.qz-promises button { font-size: 15px; font-weight: 800; padding: 9px 12px; border-radius: 12px; border: 2.5px solid #c9b88f; background: #fff; color: #2b2418; }
.qz-promises button.on { background: #cfeec0; border-color: #3d8a4f; }
.qz-own { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 12px; border: 2px solid #c9b88f; }
.qz-make:disabled { opacity: .45; }
/* Story cards, diary, chapter titles and the ending must sit above the black transition layer. */
#cards, #diary, #ending, #chapter { z-index: 30; }
#note-box p.note-small { font-size: 15px; opacity: .75; margin-top: -2px; }