/* Layout and art from the owner's existing HUD 2.0 and backpack. */
:root{--u:clamp(.75px,min(calc(100vh / 390),calc(100vw / 850)),2px);--gold-soft:#f6d77b;--text-muted:#bba77d}
body{color:#efe3c4}.entry-art{background-image:url('/assets/ui_cong/nen_dang_nhap.webp')}.entry-form{background:linear-gradient(#28190ef5,#100903f5);border:2px solid #a77b2c;box-shadow:0 0 0 3px #1a1008,0 15px 60px #0009}.entry-form::before{content:'';position:absolute;top:-71px;left:50%;transform:translateX(-50%);width:150px;height:95px;background:url('ui/dragon_head.png') center/contain no-repeat;pointer-events:none}.entry-form input,.entry-form select{background:#120b06;border-color:#62431d}.entry-character{background:radial-gradient(ellipse at 35% 80%,#b17b2130,transparent 60%)}.brand h1{color:#f8d681}.primary{background:linear-gradient(#d9ac48,#90621d);color:#fff1b5;text-shadow:0 1px 2px #321d07;border-color:#dbad45}
.skillbar{display:contents}.skillbar button,#gather{position:fixed;right:calc((var(--rx) - var(--d)/2) * var(--u));bottom:calc((var(--by) - var(--d)/2) * var(--u));width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));padding:0;border:0;border-radius:50%;background:radial-gradient(#273f65 10%,#091629 69%,transparent 70%);box-shadow:none;overflow:visible}.skillbar button:hover{filter:brightness(1.15)}.skillbar img.art,#gather .art{position:absolute;left:11%;top:11%;width:78%;height:78%;border-radius:50%;object-fit:cover;filter:none}.skillbar img.ring,#gather .ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3;pointer-events:none;filter:none}.skillbar kbd,#gather kbd{z-index:4;top:auto;bottom:-1px;right:4px;left:auto;font-size:calc(7 * var(--u));background:none;border:0;color:#ffe8a8}.skillbar button span,#gather span{position:absolute;bottom:calc(-9 * var(--u));left:0;width:100%;font-size:calc(8 * var(--u));text-shadow:0 1px 2px #000;white-space:nowrap;text-align:center}.skillbar i{inset:12%;border-radius:50%;z-index:2;font-size:calc(14 * var(--u));background:#001324bb}
.skillbar [data-skill=attack]{--rx:70.6;--by:59.9;--d:72.9;background:radial-gradient(#502b16,#0e0503 68%,transparent 70%)}.skillbar [data-skill=attack] .art{opacity:.35}.skillbar [data-skill=attack] span{top:42%;bottom:auto;font-weight:bold;font-size:calc(14 * var(--u));z-index:4}.skillbar [data-skill=storm]{--rx:117.85;--by:157.1;--d:54}.skillbar [data-skill=dash]{--rx:178.6;--by:68;--d:54}.skillbar [data-skill=heal]{--rx:159.7;--by:120.65;--d:54}.skillbar #potion{--rx:65.2;--by:217.85;--d:37.8}#gather{--rx:283.9;--by:41;--d:32.4;pointer-events:auto}
#joystick{display:block;left:calc(36 * var(--u));bottom:calc(28 * var(--u));width:calc(78 * var(--u));height:calc(78 * var(--u));background:radial-gradient(#263b5288,#25384944 65%,#b1c1cc44 67%,transparent 70%);border:2px solid #9baab844;box-shadow:inset 0 0 12px #0005}#joystick>div{width:44%;height:44%;left:28%;top:28%;border:0;background:radial-gradient(#6885a3,#233a57);box-shadow:0 3px 8px #0006}#joystick img{width:100%;height:100%;pointer-events:none}
#target{top:calc(22 * var(--u));left:calc(248 * var(--u));width:calc(125 * var(--u));transform:none;background:#0a152a77;border:1px solid #b69b61;border-radius:3px}#target strong{font-size:calc(9 * var(--u))}#notices{top:calc(80 * var(--u))}
.modal-backdrop{background:#02030591;backdrop-filter:blur(2px)}.modal{width:min(1050px,96vw);background:linear-gradient(#28180bf8,#0e0703fb);border:2px solid #a97623;border-radius:8px;box-shadow:inset 0 0 0 3px #3a2410,0 0 0 2px #110a04,0 20px 80px #0009;color:#efe3c4}.modal header{padding:12px 20px;border-bottom:1px solid #795322;position:relative;justify-content:center;background:linear-gradient(#3a2413,#1f1007)}.modal header>div{text-align:center}.modal header .eyebrow{display:none}.modal h2{font:700 19px 'Segoe UI',Arial;color:#ffd451;letter-spacing:1px}.modal h2::before,.modal h2::after{content:' ◆ ';font-size:12px}.modal header>button{position:absolute;right:12px;top:9px;border:2px solid #9b642b;border-radius:50%;height:27px;width:27px;padding:0;font-size:22px;line-height:20px;color:#e4c57e}.modal button{background:linear-gradient(#3e2912,#211106);border-color:#67461d;color:#efe3c4}.modal select,.modal input{background:#1f1107;border-color:#6b4318}.modal .primary{background:linear-gradient(#b68330,#694215);color:#ffecaa}.tui2{padding:15px}.tui2-phai{flex:1;min-width:0}.tui2-toolbar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.tui2-toolbar button{padding:5px 9px;font-size:11px}.tui2-toolbar button.active{background:linear-gradient(#994421,#6b220e);border-color:#d6ad56}.tui2-tb-o{padding:0;position:relative;min-height:54px;cursor:pointer}.tui2-tb-o img{width:36px;height:36px;object-fit:contain}.tui2-tb-o span{position:absolute;bottom:2px;left:0;width:100%;font-size:8px;color:#d9c69c!important}.tui2-tb-o .plus{position:absolute;right:3px;top:0;color:#eacb75;font-size:10px}.tui2-tb-giua canvas{width:112px;height:156px;object-fit:contain}.tui2-tb-giua b{font-size:11px;color:#f1d887}.tui2-tb-giua small{font-size:10px;color:#c7af78}.tui2-tb-cp{font-size:12px;text-align:center;color:#e4d3af;margin:9px 0}.tui2-tb-cp strong{display:block;font-size:22px;color:#eeb4f2}.tui2-stat{display:flex;justify-content:space-between;font-size:10px;color:#bba77d;padding:4px 0}.tui2-giua button img{width:30px;height:30px}.tui2-footer{display:flex;align-items:center;gap:20px;border-top:1px solid #5f4019;margin-top:12px;padding-top:10px;font-size:12px}.tui2-footer b{color:#f7d25b}.tui2-luoi{min-height:306px;grid-auto-rows:54px}.tui2-slot .equipped{position:absolute;bottom:1px;right:2px;font-size:8px;color:#a7e3a5;background:#102410ba}.tui2-slot .plus{position:absolute;top:2px;right:3px;font-size:10px;color:#ffe997}.tui2-ct>button{padding:7px;font-size:12px}.tui2-ct dl{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0;font-size:12px}.tui2-ct dd{text-align:right;margin:0;color:#87cf8c}
.menu button span{white-space:nowrap}.tui2-luoi{min-height:306px;max-height:306px}.tui2-giua button{flex:0 0 94px}.tui2-trai{min-height:360px}
@media(max-width:850px){.tui2-trai{flex-basis:238px}.tui2-giua{flex-basis:55px}.tui2-giua button{font-size:9px}.modal{max-height:95vh}.quest small{display:none}.currencies{display:none}.map-panel>div>span{display:block}.chat-panel{width:calc(210 * var(--u));left:46%}}
@media(max-width:560px) and (orientation:portrait){:root{--u:.9px}.tui2-body{flex-wrap:wrap}.tui2-trai{flex:1;min-width:238px}.tui2-giua{flex-basis:60px}.tui2-phai{flex-basis:100%}.tui2-footer{gap:10px;flex-wrap:wrap}.menu{top:90px;right:5px}.map-panel{width:100px;height:75px}#sound{top:135px;right:10px}#screenshot{top:155px;right:10px}#helpButton{top:135px;right:100px}.chat-panel{bottom:10px;left:50%;width:180px}.hint{display:none}.quest{top:65px;width:145px}.entry-form::before{top:-60px}.skillbar button,#gather{margin-bottom:45px}#joystick{bottom:135px;left:22px}#target{top:210px;left:50%;transform:translateX(-50%)}}
/* Cụm nút nhỏ quanh vòng chiêu: đúng toạ độ HUD của chủ dự án (web/css/style.css, .c-btn.*). Không xếp thành hàng, không tự dời chỗ. */
.tu-bar{display:contents}
.tu-bar button{position:fixed;right:calc((var(--rx) - var(--d)/2) * var(--u));bottom:calc((var(--by) - var(--d)/2) * var(--u));width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));padding:0;border:0;border-radius:50%;background:radial-gradient(#273f65 10%,#091629 69%,transparent 70%);box-shadow:none;overflow:visible;pointer-events:auto}
.tu-bar button:hover{filter:brightness(1.15)}
.tu-bar button img{position:absolute;left:12%;top:12%;width:76%;height:76%;border-radius:50%;object-fit:cover}
.tu-bar button img.ring{left:0;top:0;width:100%;height:100%;border-radius:0;object-fit:contain;z-index:3;pointer-events:none}
#medButton{--rx:232;--by:168;--d:32.4}#tribButton{--rx:272;--by:140;--d:32.4}#treoButton{--rx:224.5;--by:116.6;--d:32.4}#aimButton{--rx:228;--by:214;--d:32.4}#flyButton{--rx:32.8;--by:111.2;--d:32.4}
#rideButton{--rx:0;--by:0;--d:28;right:auto;left:calc(10 * var(--u));bottom:calc(60 * var(--u))}
.tu-bar button span{position:absolute;left:50%;bottom:calc(-9 * var(--u));transform:translateX(-50%);font-size:calc(7 * var(--u));white-space:nowrap;text-shadow:0 1px 2px #000;color:#f6e6bd}
.tu-bar button.on{box-shadow:0 0 calc(6 * var(--u)) #ffd86b}
#tribButton{box-shadow:0 0 calc(7 * var(--u)) #ff9b4a}
#rideButton span{bottom:auto;top:calc(-10 * var(--u))}#flyButton span{display:none}
#potion span{display:none}.skillbar [data-skill=attack] i{display:none}
/* nút Treo và Tự nhắm như HUD của chủ dự án */
#treoButton .orb,#aimButton .orb{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a3f45,#16191d 75%)}
#treoButton img.ring,#aimButton img.ring{filter:grayscale(1) brightness(.8)}
#treoButton .glow{position:absolute;inset:calc(-2 * var(--u));border-radius:50%}
.tu-bar button span.treo-lbl,.tu-bar button span.nham-lbl{left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%);z-index:2;display:block;text-align:center;white-space:normal;line-height:1.05;font-weight:600;font-size:calc(8 * var(--u));color:#aab3bd}
.tu-bar button span.nham-lbl{font-size:calc(7 * var(--u));color:#cfd6de}
.treo-lbl::before{content:"Treo"}.nham-lbl::before{content:"Tự nhắm"}
#aimButton.on .orb{background:radial-gradient(circle at 50% 35%,#e8b44c,#7a4b0c 75%)}#aimButton.on span.nham-lbl{color:#fff}#aimButton.on .nham-lbl::before{content:"Nhắm tay"}
#treoButton.active .orb{background:radial-gradient(circle at 50% 35%,#3ddc84,#0d6b3a 75%)}#treoButton.active img.ring{filter:saturate(.8)}
.tu-bar #treoButton.active span.treo-lbl{font-size:calc(6.6 * var(--u));font-weight:800;color:#fff;text-shadow:0 0 calc(3 * var(--u)) #0b3,0 1px 1px #000}.tu-bar #treoButton.active span.treo-lbl{white-space:pre}#treoButton.active .treo-lbl::before{content:"Đang\A treo"}
#treoButton.active .glow{inset:calc(-3 * var(--u));border:calc(1.5 * var(--u)) solid transparent;border-top-color:#b9ffd2;border-right-color:#78ffaa8c;box-shadow:0 0 calc(6 * var(--u)) #5aff96d9,inset 0 0 calc(4 * var(--u)) #5aff9699;animation:treoSpin 1.4s linear infinite,treoPulse 1.4s ease-in-out infinite}
@keyframes treoSpin{to{transform:rotate(360deg)}}@keyframes treoPulse{0%,100%{opacity:.75}50%{opacity:1}}
/* cần đi như HUD của chủ dự án */
#joystick{left:calc(70 * var(--u));bottom:calc(42 * var(--u));width:calc(110 * var(--u));height:calc(110 * var(--u));background:radial-gradient(circle,#0e1c2c38 0%,#0a162475 68%,#1c344c9e 100%);border:calc(1.5 * var(--u)) solid #d4b4708c;box-shadow:inset 0 0 calc(14 * var(--u)) #060e18a6,0 0 0 calc(1 * var(--u)) #0000008c}
#joystick::before{content:"";position:absolute;inset:17%;border-radius:50%;border:1px dashed #d4b47047;pointer-events:none}
#joystick>div{width:38%;height:38%;left:31%;top:31%}
#joystick .arr{position:absolute;width:0;height:0;border-left:calc(5.5 * var(--u)) solid transparent;border-right:calc(5.5 * var(--u)) solid transparent;border-bottom:calc(8 * var(--u)) solid #e6d2a0a6;filter:drop-shadow(0 1px 1px #000d);pointer-events:none}
#joystick .arr.up{top:calc(5 * var(--u));left:50%;transform:translateX(-50%)}#joystick .arr.down{bottom:calc(5 * var(--u));left:50%;transform:translateX(-50%) rotate(180deg)}#joystick .arr.left{left:calc(3.5 * var(--u));top:50%;transform:translateY(-50%) rotate(-90deg)}#joystick .arr.right{right:calc(3.5 * var(--u));top:50%;transform:translateY(-50%) rotate(90deg)}