#combat-ui{position:absolute;inset:0;z-index:9;pointer-events:none;font-family:Georgia,serif;color:#f8e7c1}.boss-panel{position:absolute;top:66px;left:50%;transform:translateX(-50%);width:min(460px,55%);text-align:center;background:linear-gradient(100deg,#253e48ed,#4d3c51ed,#253e48ed);border:1px solid #d0b37c;border-radius:14px 3px;padding:9px 15px;box-shadow:0 4px 0 #1c34454d}.boss-caption{font-weight:bold;font-size:15px;letter-spacing:.4px}.boss-meter,.hp-meter,.mp-meter{height:8px;background:#172c3b;border:1px solid #c9a77866;border-radius:10px;overflow:hidden;margin:6px 0}.boss-meter i,.hp-meter i,.mp-meter i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b64b69,#e6a19b);transition:width .15s}.boss-panel small{font-size:10px;color:#e6ceb0}.vitals{position:absolute;left:18px;bottom:47px;width:190px;background:#283f48e8;padding:10px 13px;border:1px solid #c4ac7b;border-radius:10px 2px;font-size:11px}.hp-meter i{background:linear-gradient(90deg,#769971,#b9d99b)}.mp-meter i{background:linear-gradient(90deg,#648ba8,#a7dbdf)}.skill-bar{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}.skill,.bag-button{position:relative;width:72px;height:77px;border:1px solid #d6bd86;border-radius:14px 3px;background:radial-gradient(circle at top,#597879,#263c4d);color:#fbeac5;box-shadow:0 4px 0 #20354480;cursor:pointer;font-family:Georgia}.skill b{display:block;font-size:26px;font-weight:normal;color:#c3ede2;text-shadow:0 0 10px #91d3cf}.skill span,.bag-button span{display:block;font-size:10px;margin-top:3px}.skill kbd,.bag-button kbd{position:absolute;top:-8px;left:5px;background:#f3dfb9!important;color:#4c514a!important;font-size:9px;border:1px solid #a89069;border-radius:3px;padding:1px 4px}.skill em{position:absolute;inset:5px 0 20px;display:flex;align-items:center;justify-content:center;font-size:21px;font-style:normal;color:#fff}.skill.unready{filter:saturate(.35)}.skill.unready b{opacity:.25}.skill:active,.bag-button:active{transform:translateY(2px)}.bag-button{background:#755c4e;font-size:24px}.equipment-overlay{position:absolute;inset:0;z-index:40;background:#1d3039bb;display:flex;align-items:center;justify-content:center;pointer-events:auto}.equipment-scroll{width:min(680px,94%);max-height:88%;overflow:auto;padding:24px;background:#f5e7c9;border:3px double #8e7855;border-radius:18px 3px;box-shadow:0 0 0 4px #d4bd8e;color:#3f594e;font:14px Georgia}.equipment-scroll h2{margin:0 0 10px}.equipment-scroll p{font-size:12px}.bag-close{float:right;padding:7px 12px;border:1px solid #ad8d63;background:#fff4da;cursor:pointer}.equipment-list{display:grid;gap:8px;max-height:44vh;overflow:auto}.gear-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff5df;padding:12px;border-left:4px solid #899f86}.gear-item small{display:block;margin-top:6px;font-size:10px;color:#7a7968}.gear-item button{padding:8px;border:1px solid #b1a17f;border-radius:4px;background:#446e60;color:#fff1cd;cursor:pointer}.gear-item button:disabled{background:#d3d4b8;color:#536654}.rarity-1{border-color:#649daf}.rarity-2{border-color:#b091d6}.equipment-scroll footer{font-size:11px;margin-top:16px}#root:has(#combat-ui) #toast{top:150px;font-size:14px!important}#root:has(#combat-ui) #hint{bottom:135px}.touch .skill-bar{bottom:160px}.touch .vitals{bottom:auto;top:60px;left:8px;width:140px}.touch .boss-panel{top:60px;max-width:48%;left:60%}
@media(max-width:900px){.skill{width:57px;height:65px}.bag-button{width:58px;height:65px}.skill-bar{gap:5px;bottom:38px}.vitals{bottom:113px;left:10px;width:150px}.boss-panel{width:52%;padding:6px}.boss-caption{font-size:12px}.boss-panel small{font-size:9px}}
@media(max-width:520px){.skill-bar{width:96%;justify-content:center}.skill,.bag-button{width:15%;height:61px}.skill span{font-size:8px}.boss-panel{top:100px;width:88%;max-width:88%;left:50%}.vitals{top:57px;bottom:auto;width:130px;padding:5px;font-size:9px}.boss-caption{font-size:11px}#root:has(#combat-ui) #toast{top:185px}.equipment-scroll{padding:14px}.touch .boss-panel{top:100px;left:50%;max-width:88%}.touch .vitals{top:55px}}

@media(max-width:520px){.boss-panel,.touch .boss-panel{top:132px}.vitals,.touch .vitals{top:66px}.boss-panel small{font-size:8px}.touch .skill-bar{bottom:175px}#root:has(#combat-ui) #toast{top:215px;max-width:90%;font-size:11px!important}.equipment-scroll footer{line-height:1.6}}

/* Nút Đánh thường to cho cảm ứng: nằm trên nút NHẢY (solo) để ngón cái phải bấm được, không che joystick trái và thanh skill-bar ở giữa */
.atk-btn{position:absolute;right:20px;bottom:calc(var(--joy,130px)*.78 + 40px + env(safe-area-inset-bottom));width:88px;height:88px;border:2px solid #ffd166;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a8543f,#5c2e26 70%);color:#ffe9b3;box-shadow:0 5px 0 rgba(0,0,0,.35),0 0 14px rgba(255,209,102,.25);cursor:pointer;font-family:Georgia,serif;pointer-events:auto;touch-action:none;z-index:10}
.atk-btn b{display:block;font-size:30px;line-height:1.05}
.atk-btn span{display:block;font-size:15px;font-weight:bold;margin-top:2px}
.atk-btn kbd{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#f3dfb9;color:#4c514a;font-size:9px;border:1px solid #a89069;border-radius:3px;padding:1px 4px}
.atk-btn em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;font-style:normal;color:#fff;pointer-events:none}
.atk-btn.unready{filter:saturate(.35)}
.atk-btn.unready b{opacity:.25}
.atk-btn:active{transform:translateY(2px)}
/* 2 người cùng máy: NHẢY phải ở trên cao nên nút Đánh nằm bên trái nút NHẢY, cùng hàng */
#root.two .atk-btn{right:calc(48px + var(--joy,130px)*.62 + env(safe-area-inset-right));bottom:calc(var(--joy,130px) + 34px + env(safe-area-inset-bottom))}
/* Màn hẹp (điện thoại dọc): thanh skill-bar chiếm gần hết chiều ngang nên nút Đánh dời lên trên nó */
@media(max-width:520px){.atk-btn,#root.two .atk-btn{right:20px;bottom:250px;width:84px;height:84px}}
