:root{--bg:#fdf6f9;--ink:#2b2a3a;--pink:#ff7fa8;--blue:#7fbfff;--card:rgba(255,255,255,.92);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1d1b2a;--ink:#f4eef7;--card:rgba(40,36,58,.92)}}
:root[data-theme="dark"]{--bg:#1d1b2a;--ink:#f4eef7;--card:rgba(40,36,58,.92)}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:"Trebuchet MS",Verdana,sans-serif;overflow:hidden}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none;color:#2b2a3a;font-weight:bold}
#cross{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #2b2a3a}
#stats{position:absolute;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center}
.pill{background:rgba(255,255,255,.92);border-radius:14px;padding:8px 14px;font-size:18px}
#hpwrap{width:160px;height:14px;background:#fff;border-radius:8px;overflow:hidden;border:2px solid #2b2a3a}
#hp{height:100%;width:100%;background:var(--pink);transition:width .1s}
#ammo{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
#score{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top,0px))}
#mm{position:absolute;left:16px;top:calc(16px + env(safe-area-inset-top,0px));width:150px;height:150px;background:rgba(255,255,255,.8);border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 2px #2b2a3a}
#gren{position:absolute;right:16px;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
#msg{position:absolute;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(255,255,255,.92);border-radius:14px;padding:8px 16px;font-size:16px;opacity:0;transition:opacity .25s;white-space:nowrap}
#scope{position:absolute;inset:0;display:none;pointer-events:none}
.sc #scope{display:block}.sc #cross,.ads #cross{display:none}
.srim{position:absolute;left:50%;top:50%;width:calc(var(--lr)*2);height:calc(var(--lr)*2);margin:calc(var(--lr)*-1) 0 0 calc(var(--lr)*-1);border-radius:50%;box-sizing:border-box;background:rgba(0,10,14,.14);animation:scin .22s ease-out;
  box-shadow:inset 0 0 calc(var(--lr)*.35) rgba(0,0,0,.6),          /* tối dần ở mép kính */
             0 0 0 calc(var(--lr)*.1) #0d0d12,                      /* viền kính dày */
             0 0 0 calc(var(--lr)*.115) #3a3a46,                    /* vành sáng ngoài */
             0 0 0 200vmax rgba(0,0,0,.45)}                         /* làm tối cảnh bên ngoài kính */
.srim::before,.srim::after{content:"";position:absolute;background:#000}
.srim::before{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.srim::after{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
#hurt{position:absolute;inset:0;background:radial-gradient(transparent 40%,rgba(255,40,80,.55));opacity:0;transition:opacity .25s}
#ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(207,232,255,.55);backdrop-filter:blur(3px);cursor:pointer}
#card{background:var(--card);color:var(--ink);border-radius:22px;padding:16px 24px;width:min(96vw,1240px);max-height:97vh;overflow-y:auto;text-align:center;border:3px solid var(--pink);box-sizing:border-box;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px}   /* bảng NẰM NGANG: tiêu đề / ngôn ngữ / mô tả / thẻ hướng dẫn chiếm cả hàng; chọn súng + nhạc + tên + nút chơi xếp chung 1 hàng dưới cùng -> không phải cuộn */
#card>h1,#card>#lg,#card>#sub,#card>#ctrl{flex:0 0 100%}
#card>#pk{margin:0}
#card h1{margin:0 0 2px;font-size:30px}
#card p{margin:6px 0;line-height:1.5}
.lb{font:inherit;font-size:13px;font-weight:bold;border:2px solid var(--pink);background:transparent;color:var(--ink);border-radius:10px;padding:3px 9px;margin:2px;cursor:pointer}.lb.on{background:var(--pink);color:#2b2a3a}
#lg{margin:4px 0 8px}
.wb{font:inherit;font-weight:bold;border:3px solid var(--blue);background:transparent;color:var(--ink);border-radius:12px;padding:8px 16px;margin:4px;cursor:pointer}.wb.on{background:var(--blue);color:#2b2a3a}
#go{display:inline-block;margin-top:0;background:var(--pink);color:#2b2a3a;border-radius:12px;padding:10px 22px;font-size:18px;font-weight:bold}
#ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px;margin:6px 0 4px;text-align:left}
.tile{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:rgba(255,127,168,.12);border:2px solid var(--pink);animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i)*55ms);transition:transform .15s}
.tile:hover{transform:translateY(-3px) rotate(-.6deg)}
.tile:nth-child(3n+2){border-color:var(--blue);background:rgba(127,191,255,.14)}
.tile:nth-child(3n){border-color:#7fe0a0;background:rgba(127,224,160,.14)}
.ti{font-size:28px;line-height:1;flex:none}
.tt{font-weight:bold;font-size:14px;margin-bottom:3px}
.td{font-size:12.5px;line-height:1.6;opacity:.9}
kbd{display:inline-block;min-width:20px;padding:0 6px;margin:0 2px;border-radius:6px;border:2px solid #2b2a3a;border-bottom-width:4px;background:#fff;color:#2b2a3a;font:700 11px/1.5 "Trebuchet MS",Verdana,sans-serif;text-align:center}
#go{animation:pulse 1.4s ease-in-out infinite}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.tile,#go{animation:none}}
@media (max-width:520px){#ctrl{grid-template-columns:1fr 1fr}.tile{flex-direction:column;gap:4px}}
@keyframes scin{from{background-color:rgba(0,0,0,.9)}to{background-color:rgba(0,10,14,.14)}}   /* vừa áp mắt vào kính: tối rồi sáng dần */
#who{margin-top:0!important;display:flex;align-items:center;gap:4px}#who img{height:46px;width:auto;image-rendering:pixelated;vertical-align:middle}   /* ảnh nhân vật cạnh tên: nhỏ lại để vừa 1 hàng */
#card>.lb{margin:0}
@media (max-height:820px){#card{padding:10px 20px}#card h1{font-size:26px}.tile{padding:6px 10px}.td{font-size:12px;line-height:1.45}.ti{font-size:24px}#ctrl{gap:6px}#lg{margin:2px 0 4px}#card p{margin:3px 0;line-height:1.3}.wb{padding:5px 14px}}   /* màn thấp: thu gọn thêm */
@media (max-width:900px){#card{flex-direction:column;flex-wrap:nowrap}#card>h1,#card>#lg,#card>#sub,#card>#ctrl{flex:0 0 auto;width:100%}}   /* điện thoại / màn hẹp: quay về xếp dọc, cho phép cuộn */