:root{--l0:#9bbc0f;--l1:#8bac0f;--l2:#306230;--l3:#0f380f}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}
html,body{width:100%;min-height:100%;background:#15171c;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;overflow:hidden}
body{display:flex;justify-content:center;align-items:flex-start}

/* ---------- bodi konsol ---------- */
#gb-case{width:100%;max-width:420px;padding:14px 16px 12px;background:linear-gradient(160deg,#dcd8ca,#b8b3a1);border-radius:16px 16px 70px 16px;box-shadow:0 8px 24px #0009,inset 0 2px #fff9;contain:content}
.toprow{display:flex;justify-content:space-between;padding:0 6px 8px;font-size:9px;font-weight:800;letter-spacing:2px;color:#5b5f70}
.toprow b{color:#7c2d6b}
#bezel{padding:10px 16px 12px;background:linear-gradient(145deg,#51556a,#3a3d4e);border-radius:10px 10px 38px 10px;box-shadow:inset 0 2px 6px #000a}
.bz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:7px;font-weight:800;letter-spacing:1.2px;color:#c8c6d8}
#battery-ind{display:flex;align-items:center;gap:5px;padding:4px 6px 4px 0;cursor:pointer}
#battery-led{width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 5px #ef4444;transition:background .15s,box-shadow .15s}

/* ---------- layar LCD ---------- */
#screen-container{position:relative;width:100%;aspect-ratio:10/9;background:var(--l0);border-radius:4px;overflow:hidden;box-shadow:inset 0 0 12px #0008;contain:paint layout}
canvas#screen{display:none;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;image-rendering:crisp-edges}
#grid{position:absolute;inset:0;pointer-events:none;z-index:6;background-image:linear-gradient(rgba(15,56,15,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(15,56,15,.09) 1px,transparent 1px);background-size:3px 3px}
#hint{position:absolute;left:6px;right:6px;bottom:6px;z-index:7;padding:4px 6px;text-align:center;font:700 11px/1.2 "Courier New",monospace;color:var(--l0);background:#0f380fe0;border-radius:3px;opacity:0;transition:opacity .2s;pointer-events:none}
#hint.on{opacity:1}

/* UI berukuran asli 160x144, diskalakan oleh JS */
#ui{position:absolute;left:0;top:0;width:160px;height:144px;transform-origin:0 0;background:var(--l0);color:var(--l3);font-family:"Courier New",ui-monospace,monospace;font-weight:700;overflow:hidden}
.sc{position:absolute;inset:0;display:none}.sc.on{display:block}

/* boot */
#bootLogo{position:absolute;left:0;right:0;top:-22px;text-align:center;font-size:17px;line-height:1;letter-spacing:1px}
#bootLogo.go{animation:drop 1.25s steps(14) forwards}
@keyframes drop{from{top:-22px}to{top:52px}}
#bootSub{position:absolute;left:0;right:0;top:76px;text-align:center;font-size:8px;letter-spacing:3px;opacity:0}
#bootSub.go{animation:appear .1s steps(1) 1.3s forwards}
@keyframes appear{to{opacity:1}}
#bootTap{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:6px;opacity:0}
#bootTap.go{animation:blink 1s steps(1) 1.6s infinite}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}

/* library */
.hdr{height:16px;padding:0 5px;background:var(--l3);color:var(--l0);font-size:8px;line-height:16px;display:flex;justify-content:space-between}
.sub{height:12px;padding:0 5px;font-size:6px;line-height:12px;border-bottom:1px solid var(--l2);display:flex;justify-content:space-between}
#list{position:absolute;top:29px;left:0;right:0;height:101px;overflow:hidden}
.row{position:relative;height:25px;padding:3px 4px;border-bottom:1px dotted var(--l2)}
.row.sel{background:var(--l3);color:var(--l0)}
.row .cur{position:absolute;left:2px;top:4px;font-size:7px}
.row .t{padding-left:8px;font-size:8px;line-height:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}
.row .s{padding-left:8px;font-size:6px;line-height:8px;opacity:.85}
.row .bd{position:absolute;right:4px;top:6px;padding:0 2px;font-size:6px;line-height:8px;border:1px solid currentColor}
.row.na{color:var(--l2)}.row.na.sel{color:var(--l1)}
.empty{padding:26px 6px;text-align:center;font-size:7px;line-height:11px}
.ftr{position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--l2);color:var(--l0);font-size:6px;line-height:14px;text-align:center}

/* pesan & loading */
.box{position:absolute;left:10px;right:10px;top:24px;bottom:22px;border:2px solid var(--l3);padding:8px 6px;text-align:center}
.box h2{font-size:9px;margin-bottom:6px;letter-spacing:1px}
.box p{font-size:7px;line-height:10px}
.box .ok{position:absolute;left:0;right:0;bottom:4px;font-size:6px}
.bar{position:absolute;left:20px;right:20px;top:72px;height:10px;border:2px solid var(--l3)}
.bar i{display:block;height:100%;width:0;background:var(--l3);transition:width .15s steps(6)}
.ld{position:absolute;left:0;right:0;top:54px;text-align:center;font-size:8px;letter-spacing:1px}

/* ---------- kontrol ---------- */
#controls{padding:14px 6px 0;display:flex;flex-direction:column;gap:6px}
#primary-controls{display:flex;justify-content:space-between;align-items:center}
#dpad{position:relative;width:114px;height:114px;filter:drop-shadow(0 4px 3px #0006)}
#dpad:before,#dpad:after{content:"";position:absolute;background:#2d2f3a;border-radius:6px}
#dpad:before{left:0;right:0;top:38px;height:38px}#dpad:after{top:0;bottom:0;left:38px;width:38px}
.dpad-btn{position:absolute;z-index:2;background:transparent;border:0;outline:0;color:#6b6f80;font-size:12px;display:flex;align-items:center;justify-content:center}
.dpad-btn.touching{color:#fff;background:#00000040}
#btn-up{left:38px;top:0;width:38px;height:40px}#btn-down{left:38px;bottom:0;width:38px;height:40px}
#btn-left{left:0;top:38px;width:40px;height:38px}#btn-right{right:0;top:38px;width:40px;height:38px}
#ab-wrapper{display:flex;gap:16px;transform:rotate(-20deg);margin-right:4px;padding-top:10px}
.btn-action-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.btn-action-wrap:first-child{margin-top:18px}
.btn-action{width:50px;height:50px;border-radius:50%;border:0;outline:0;background:radial-gradient(circle at 35% 30%,#d6336c,#8e1f4d);box-shadow:0 4px #4c0f2a,0 7px 8px #0005}
.btn-action.touching{transform:translateY(3px);box-shadow:0 1px #4c0f2a}
.lbl{font-size:10px;font-weight:900;color:#3d4163;letter-spacing:1px}
#secondary-controls{display:flex;justify-content:center;gap:26px;margin-top:2px;transform:rotate(-18deg)}
.system-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.btn-system{width:54px;height:15px;border-radius:8px;border:0;outline:0;background:#6a6d7c;box-shadow:0 3px #3a3c47}
.btn-system.touching{transform:translateY(2px);box-shadow:0 1px #3a3c47}
.system-label{font-size:8px;font-weight:900;letter-spacing:1px;color:#3d4163}
#footrow{display:flex;justify-content:space-between;align-items:flex-end;padding:4px 8px 0}
#brand{font-size:15px;font-weight:900;font-style:italic;letter-spacing:1px;color:#2b3595}
#brand span{font-size:8px;font-style:normal;margin-left:6px;color:#7c2d6b;letter-spacing:2px}
#grille{width:62px;height:34px;background:repeating-linear-gradient(-62deg,#8f8a78 0 4px,transparent 4px 9px);border-radius:6px;opacity:.8;margin-bottom:2px}