*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#050308;color:#eee;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}
body{display:flex;align-items:center;justify-content:center;min-height:100vh}
#wrap{position:relative;box-shadow:0 18px 60px rgba(80,0,120,.35),0 0 0 2px #1a1a1e;border-radius:6px;overflow:hidden;max-width:min(1120px,100vw)}
canvas{display:block;background:#000;cursor:pointer;width:100%;height:auto;outline:none}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(4,0,10,.62);backdrop-filter:blur(3px)}
.overlay.hidden{display:none}
.panel{width:min(640px,90%);text-align:center;padding:28px 32px 24px;background:linear-gradient(#3a3a40,#222226);border:2px solid #6a6a72;border-radius:8px;box-shadow:inset 0 1px 0 #888,0 12px 40px #000}
.title-art{width:100%;height:180px;object-fit:cover;border-radius:4px;margin-bottom:14px;background:#1a0828;display:none}
.title-art.ok{display:block}
h1{font-size:42px;letter-spacing:.08em;color:#f4f4f8;text-shadow:0 2px 0 #000,0 0 18px #a04cff}
.sub{margin-top:6px;color:#c9a0ff;letter-spacing:.18em;text-transform:uppercase;font-size:13px}
.btns{display:flex;gap:12px;justify-content:center;margin:22px 0 10px}
button{font:700 15px/1 Trebuchet MS,sans-serif;letter-spacing:.08em;padding:12px 22px;border-radius:4px;border:2px solid #111;cursor:pointer;background:#3a3a42;color:#eee;box-shadow:inset 0 1px 0 #777}
button.primary{background:linear-gradient(#e24a44,#9a1818);color:#fff}
button:hover{filter:brightness(1.12)}
.hint{font-size:12px;color:#aaa;margin-top:8px}