*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;height:100%;background:#120a1f;overflow:hidden;font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;touch-action:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
canvas#cv{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.hide{display:none!important}
#hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:flex-start;pointer-events:none}
#obj{background:linear-gradient(#2a3c8f,#1a2462);border:3px solid #f6d77a;box-shadow:0 0 0 2px #1b1030,0 4px 0 #0008;color:#fff;border-radius:6px;padding:6px 10px;font-weight:800;font-size:clamp(12px,2.4vw,16px);max-width:60%;text-shadow:1px 1px 0 #000}
#obj:before{content:"★ ";color:#ffd54a}
#seals{display:flex;gap:4px;background:#1b1030cc;border:3px solid #f6d77a;border-radius:6px;padding:5px}
#seals i{width:22px;height:22px;border-radius:50%;background:#3b2a52;border:2px dashed #7d6a9a}
#seals i.on{background:radial-gradient(circle at 40% 35%,#fff6b0,#ffc627 45%,#c7801a);border:2px solid #fff3c0;box-shadow:0 0 8px #ffd54a}
#mute{margin-left:auto;pointer-events:auto;width:40px;height:40px;border-radius:8px;border:3px solid #f6d77a;background:#1b1030cc;color:#ffd54a;font-size:20px;font-weight:900}
#dlg{position:absolute;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));width:min(94vw,720px);min-height:104px;background:linear-gradient(#f9f3e2,#efe2bf);border:4px solid #2a3c8f;outline:3px solid #f6d77a;box-shadow:0 0 0 7px #1b1030,0 10px 0 7px #0006;border-radius:8px;padding:18px 18px 14px;color:#2b1d14;font-size:clamp(15px,3.6vw,21px);line-height:1.35;font-weight:700;z-index:5}
#dname{position:absolute;top:-18px;left:14px;background:#d6452f;color:#fff;border:3px solid #f6d77a;border-radius:6px;padding:2px 10px;font-size:15px;font-weight:900;text-shadow:1px 1px 0 #7a1b10}
#dnext{position:absolute;right:12px;bottom:6px;color:#d6452f;animation:bob .6s infinite alternate}
@keyframes bob{to{transform:translateY(4px)}}
#toast{position:absolute;top:30%;left:50%;transform:translateX(-50%);background:#1b1030ee;color:#ffe27a;border:3px solid #f6d77a;border-radius:10px;padding:10px 18px;font-weight:900;font-size:clamp(16px,4vw,24px);text-shadow:2px 2px 0 #000;z-index:6;white-space:nowrap}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:10;padding:20px}
#title{background:radial-gradient(ellipse at 50% 45%,#120a1f99 20%,#120a1fe0 100%)}
#tlogo{width:min(70vw,420px);filter:drop-shadow(0 6px 0 #0008)}
#tsub{margin:6px 0 18px;font-size:clamp(22px,5vw,40px);color:#ffe27a;letter-spacing:2px;text-shadow:3px 3px 0 #b8381f,5px 5px 0 #1b1030}
#tmenu{display:flex;flex-direction:column;gap:10px}
.ov button{font:inherit;font-weight:900;font-size:clamp(17px,3.6vw,22px);padding:12px 30px;border-radius:10px;border:4px solid #f6d77a;background:linear-gradient(#e55a3c,#b8381f);color:#fff;text-shadow:2px 2px 0 #6d1a0c;box-shadow:0 5px 0 #6d1a0c,0 0 0 3px #1b1030;cursor:pointer;min-width:240px}
.ov button:focus,.ov button:hover{filter:brightness(1.12);outline:none;transform:translateY(-1px)}
#bcont{background:linear-gradient(#3b56c4,#2a3c8f);box-shadow:0 5px 0 #141d4f,0 0 0 3px #1b1030;text-shadow:2px 2px 0 #141d4f}
#thint{margin-top:16px;font-weight:700;text-shadow:1px 1px 0 #000;font-size:14px}
.priv{opacity:.8;font-size:12px;margin:2px}
#end{background:radial-gradient(circle,#3a1f5ccc,#120a1ff2)}
#ecub{width:min(48vw,260px);filter:drop-shadow(0 0 24px #ffd54a)}
#end h2{font-size:clamp(24px,5.5vw,42px);color:#ffe27a;text-shadow:3px 3px 0 #b8381f;margin:8px 0}
#eseals{display:flex;gap:14px;margin:6px}#eseals canvas{width:48px;height:48px;image-rendering:pixelated}
.eq{font-size:20px;font-weight:900;color:#ffd0a0}#end p{max-width:520px;font-weight:700}
#pad{position:absolute;inset:auto 0 0 0;height:0;z-index:4}
#dpad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:150px;height:150px}
#pad b{position:absolute;display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:#1b1030b8;border:3px solid #f6d77a;color:#ffe27a;border-radius:10px;font-size:20px;touch-action:none}
#dpad b[data-d=up]{left:50px;top:0}#dpad b[data-d=down]{left:50px;top:100px}#dpad b[data-d=left]{left:0;top:50px}#dpad b[data-d=right]{left:100px;top:50px}
#pad b.on{background:#f6d77a;color:#1b1030}
#abtn{right:max(22px,env(safe-area-inset-right));bottom:max(46px,env(safe-area-inset-bottom));width:74px!important;height:74px!important;border-radius:50%!important;background:#d6452fd0!important;color:#fff!important;font-size:28px!important;font-weight:900}
body.talking #pad{display:none}