*{box-sizing:border-box}html,body{margin:0}
body{font-family:"Trebuchet MS",system-ui,Arial,sans-serif;background:radial-gradient(circle at 50% 0,#4b2f86,#1a0f38 70%);color:#fff4d6;line-height:1.5;min-height:100vh}
.hdr{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 16px 4px}.hdr img{width:78px;height:78px;background:#fff6ea;border-radius:50%;padding:3px}
h1{font-family:"Arial Black",Impact,sans-serif;margin:0;font-size:clamp(1.6rem,6vw,2.8rem);background:linear-gradient(90deg,#ff8fc4,#ff9a3d,#ffe14d,#7be37b,#5fd0ff,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}
.tag{text-align:center;margin:0 0 10px;color:#cfc0ff}
#stage{position:relative;margin:0 auto;width:100%;max-width:520px;padding:0 8px}
canvas{display:block;width:100%;height:auto;border:4px solid #a98bff;border-radius:16px;background:#120a2a;touch-action:none}
#ov{position:absolute;inset:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(18,10,42,.9);border-radius:14px;padding:12px;overflow:auto;border:4px solid transparent}
#ov h1{font-size:clamp(1.6rem,5vw,2.4rem)}#ov h2{font-family:"Arial Black",sans-serif;color:#ffe066;margin:6px 0}#ov p{margin:6px 0;max-width:420px}.sm{font-size:.85rem;color:#bfa9ee}
.ovlogo{width:min(46%,180px);margin-bottom:4px;background:#fff6ea;border-radius:50%;padding:6px}.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.b,.diff button,.ctl button{font:inherit;font-weight:800;border:3px solid #1a0f38;border-radius:30px;padding:10px 20px;cursor:pointer;background:linear-gradient(135deg,#ffd23f,#ff8a1f);color:#1a0f38}.b:hover{filter:brightness(1.1)}.b.alt{background:#cfc0ff}
.diff{margin:6px 0}.diff button{padding:5px 14px;margin:0 3px;background:#3b2a66;color:#fff4d6;border-color:#a98bff;font-size:.9rem}.diff button.on{background:#ffd23f;color:#1a0f38}
.chest{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0}.chest span{display:flex;align-items:center;gap:2px;font-weight:800;background:#2a1a52;border-radius:10px;padding:2px 8px}.chest img{width:28px;height:28px}
.ctl{display:flex;gap:8px;justify-content:center;margin:10px 0}.ctl button{padding:6px 14px;font-size:.9rem;background:#3b2a66;color:#fff4d6;border-color:#a98bff}
.wrap{max-width:980px;margin:0 auto;padding:6px 16px 40px}section.info{background:rgba(255,255,255,.06);border:2px solid #7b5cc4;border-radius:18px;padding:14px 20px;margin:16px 0}
h2.s{font-family:"Arial Black",sans-serif;color:#ffe066;margin:0 0 6px}h3{color:#ffb3d9;margin:14px 0 6px}
.gtab{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}.gc{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.25);border-radius:12px;padding:8px 10px;font-size:.92rem}.gc img{width:52px;height:52px;flex:none}.gc small{color:#bfa9ee}.em{font-size:2rem;width:52px;text-align:center;flex:none}
table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid #5a43a0;padding:6px 8px;text-align:left}kbd{background:#2a1a52;border:1px solid #a98bff;border-radius:6px;padding:1px 7px;font-family:inherit}
footer{text-align:center;padding:10px 16px 30px;color:#bfa9ee;font-size:.9rem}footer img{width:70px;margin:0 auto 4px;display:block;background:#fff6ea;border-radius:50%;padding:3px}