/* GUI v0.6 — panel pixel-art bergaya hutan. Dimuat setelah style.css (menimpa tampilan, bukan fungsi).
   Font: tumpukan monospace tebal (tanpa berkas font eksternal) + text-shadow keras agar terbaca & bernuansa pixel. Tanpa emoji: ikon = sprite pixel (--ic-*). */
:root{--ink:#06140d;--pn:#10382a;--pn2:#0b2a1f;--hi:#3f9a5a;--gold:#ffd36a;--cream:#f6efd8;--wood:#6b4423;--danger:#d8452e;
  --px:ui-monospace,"Cascadia Mono","Roboto Mono","Courier New",monospace}
html,body,button,input{font-family:var(--px)}
body{-webkit-font-smoothing:none;font-smooth:never;letter-spacing:.2px}
h1,.hud-title,.btn-main,.btn-alt,.btn-sm,#btn-act,.dlg-badge,#dlg-name,.mp-top,.tr-name{font-weight:800}
/* ----- ikon pixel inline ----- */
.px-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin:0 .05em;background:center/contain no-repeat;image-rendering:pixelated}
.i-star{background-image:var(--ic-star)}.i-star0{background-image:var(--ic-star0)}.i-check{background-image:var(--ic-check)}.i-close{background-image:var(--ic-close);filter:hue-rotate(-30deg) saturate(3) brightness(.9)}
.i-warn{background-image:var(--ic-warn)}.i-box{background-image:var(--ic-box)}.i-flag{background-image:var(--ic-flag)}.i-sound{background-image:var(--ic-sound)}.i-mute{background-image:var(--ic-mute)}
.i-medal{background-image:var(--ic-medal)}.i-book{background-image:var(--ic-book)}.i-lock{background-image:var(--ic-lock)}.i-play{background-image:var(--ic-play)}.i-chev{background-image:var(--ic-chev)}.i-down{background-image:var(--ic-down)}
/* ----- tombol & panel bergaya pixel ----- */
.btn-main,.btn-alt,.btn-sm{border-radius:0;border:3px solid var(--ink);text-shadow:1px 1px 0 rgba(0,0,0,.55);transition:transform .08s steps(2),filter .12s;image-rendering:pixelated}
.btn-main{background:linear-gradient(#3fae62,#238245);box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.28),0 4px 0 var(--ink)}
.btn-alt{background:linear-gradient(#8a6038,#6a4524);box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.28),0 4px 0 var(--ink)}
.btn-sm{background:linear-gradient(#1f5a40,#143f2e);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.3),0 3px 0 var(--ink)}
.btn-main:active,.btn-alt:active,.btn-sm:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(0,0,0,.25),0 1px 0 var(--ink)}
@media (hover:hover){.btn-main:hover,.btn-alt:hover,.btn-sm:hover{filter:brightness(1.12)}}
button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.panel,.mp-box,.dlg-box{background:var(--pn);border:3px solid var(--ink);border-radius:0;box-shadow:inset 0 0 0 2px var(--hi),inset 0 0 0 4px var(--ink),0 6px 0 rgba(0,0,0,.45)}
.panel{animation:popIn .22s steps(5)}.mp-box{animation:popIn .2s steps(5)}
@keyframes popIn{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:none;opacity:1}}
#menu{background:linear-gradient(180deg,#6fb7e0 0,#a6d9a0 40%,#3a8a3e 40%,#1b4f2a 100%)}
h1{text-shadow:0 3px 0 var(--ink);font-size:22px}h1 span{font-size:40px;color:var(--gold);text-shadow:0 4px 0 #7a4a0a,0 0 0 var(--ink)}
.note,.sub{opacity:.88}
input[type=range]{accent-color:var(--gold)}
/* ----- HUD: ikon kotak, ringkas ----- */
.hud-title{background:rgba(6,20,13,.72);border:2px solid var(--ink);border-radius:0;padding:3px 7px;font-size:11px;letter-spacing:.5px;color:var(--cream);box-shadow:inset 0 0 0 1px var(--hi)}
.hud-btns{gap:5px}
.hud-btns .btn-sm{width:42px;height:42px;min-height:42px;padding:0;font-size:0;position:relative}
.hud-btns .btn-sm>*{display:none}
.hud-btns .btn-sm::before{content:"";position:absolute;inset:7px;background:center/contain no-repeat;image-rendering:pixelated}
#btn-mute::before{background-image:var(--ic-sound)}#btn-mute.is-muted::before{background-image:var(--ic-mute)}
.hud-btns .btn-sm:nth-child(2)::before{background-image:var(--ic-full)}#btn-pause::before{background-image:var(--ic-pause)}
/* ----- panel misi (kiri atas) + minimize ----- */
#btn-missions{background:rgba(6,20,13,.78);border:3px solid var(--ink);border-radius:0;box-shadow:inset 0 0 0 2px var(--hi),0 3px 0 rgba(0,0,0,.4);min-width:150px;max-width:min(250px,46vw);overflow:hidden;transition:max-height .28s steps(6),padding .2s,opacity .2s;max-height:150px;text-align:left;position:relative;padding-right:32px}
#btn-missions .tr-bar{height:6px;border-radius:0;background:var(--ink);border:1px solid var(--hi)}
#btn-missions #tr-fill{border-radius:0;background:repeating-linear-gradient(90deg,#7be08f 0 4px,#4ea03a 4px 6px)}
.tr-name{font-size:12px}.tr-top,.tr-row{font-size:11px}
.tr-mini{display:none;font-size:11px;font-weight:800;color:var(--gold);white-space:nowrap}
.tr-minbtn{position:absolute;top:3px;right:3px;z-index:3;width:24px;height:24px;padding:0;border:2px solid var(--ink);border-radius:0;background:#1f5a40 var(--ic-min) center/70% no-repeat;image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--hi);pointer-events:auto;transition:transform .15s steps(3)}
body.tr-min .tr-minbtn{background-image:var(--ic-max)}
body.tr-min #btn-missions{max-height:30px;min-width:0;padding:5px 9px;opacity:.92;cursor:pointer}
body.tr-min #btn-missions>*:not(.tr-mini){display:none!important}
body.tr-min #btn-missions .tr-mini{display:block}
/* ----- dialog: tidak menutupi gameplay ----- */
#dialog .dlg-box{max-height:46vh;overflow:auto;animation:popIn .18s steps(4)}
#dlg-name{letter-spacing:.4px;text-shadow:1px 1px 0 #000}
.dlg-badge{border-radius:0;border:2px solid var(--ink);font-size:11px}
#dlg-actions button{border-radius:0;border:3px solid var(--ink);background:linear-gradient(#2f6a4c,#1c4a35);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 var(--ink);text-shadow:1px 1px 0 #000;min-height:44px;text-align:left}
#dlg-actions button:active{transform:translateY(2px)}
/* ----- tombol interaksi & prompt ----- */
#btn-act{border-radius:0;border:3px solid var(--ink);background:linear-gradient(#ffb04a,#e07a1a);color:#2a1604;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.25),0 5px 0 var(--ink);letter-spacing:.5px;min-width:104px;min-height:64px;animation:actPulse 1.1s steps(2) infinite}
#btn-act:disabled{animation:none;filter:grayscale(.7) brightness(.8)}
@keyframes actPulse{50%{transform:translateY(-2px)}}
#act-hint{border-radius:0;border:2px solid var(--ink);background:rgba(6,20,13,.85);box-shadow:inset 0 0 0 1px var(--hi);font-weight:700}
#actions.ready #act-hint:not(:empty)::before{content:"[INTERAKSI] ";color:var(--gold)}
body.mode-pc #actions.ready #act-hint::before{content:"[E]";border-radius:0;border:2px solid var(--ink);font-weight:800}
#pchint{border-radius:0}
#pchint kbd::before{content:"["}#pchint kbd::after{content:"]"}
kbd{border-radius:0;border:2px solid var(--ink);background:#27503c;color:var(--gold);box-shadow:0 2px 0 var(--ink);padding:0 4px}
/* ----- layar hasil / sertifikat / audio ----- */
.mp-top{border-bottom:3px solid var(--ink)}
#end-body .ev-status,.ev-status{color:var(--gold)}
#popup,#toast,#safety{border-radius:0;border:2px solid var(--ink);box-shadow:inset 0 0 0 1px var(--hi)}
.cine-cap{font-family:var(--px);font-weight:800;letter-spacing:.4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}