:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#030706;touch-action:none;user-select:none}body{min-height:100dvh}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;filter:grayscale(.4);opacity:.6}
#app-shell{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#07120f}#battlefield{display:block;width:100%;height:100%;background:#07120f;touch-action:none}
.screen{position:absolute;inset:0;z-index:20;display:none;place-items:center;padding:18px;background:radial-gradient(circle at 50% 30%,rgba(16,62,49,.68),rgba(2,8,7,.94))}.screen.active{display:grid}.hidden{display:none!important}
.card{width:min(92vw,560px);padding:24px;border:1px solid rgba(176,234,211,.34);border-radius:20px;background:rgba(4,21,17,.96);box-shadow:0 24px 90px #000,inset 0 0 30px rgba(68,181,141,.1);text-align:center}.brand{color:#92e5c6;font-weight:900;letter-spacing:.18em}.card h1{margin:8px 0 18px;font-family:Georgia,serif;color:#f2e4b6}.card p{color:#bad3ca}.v6-note{margin:0 0 14px;font-size:12px;line-height:1.45}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.tab,.primary,.secondary,.faction,.leave,.reconnect,.portal-action{border:1px solid rgba(255,255,255,.24);border-radius:12px;color:#fff;background:#16362e;font-weight:900}.tab{padding:10px}.tab.active{background:#2c6958}.auth-card label{display:grid;gap:6px;text-align:left;margin:10px 0;color:#cde5dc;font-size:13px;font-weight:800}.auth-card input{width:100%;padding:12px 13px;border:1px solid #38695c;border-radius:10px;background:#071713;color:#fff;outline:none}.auth-card input:focus{border-color:#73d9b7;box-shadow:0 0 0 3px rgba(77,197,156,.12)}.primary{width:100%;padding:13px;margin-top:8px;background:linear-gradient(#3e967c,#23624f)}.secondary{width:100%;padding:11px;margin-top:8px;background:#17382f;border-color:#4f8f7b;color:#d9fff1}.message{min-height:22px;margin:10px 0 0!important;color:#ffd48a!important;font-size:13px;white-space:pre-line}.stage-link{display:inline-block;margin-top:10px;color:#9ddcc7;font-size:12px}
.faction-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.faction{min-height:170px;padding:18px;display:grid;place-items:center;gap:4px}.faction .crest{font-size:48px}.faction strong{font-size:20px}.faction small{opacity:.82}.faction.valoria{background:linear-gradient(145deg,#153d58,#315f6d 55%,#806b28)}.faction.ravenhold{background:linear-gradient(145deg,#572126,#2f1424 58%,#6a2929)}.faction-actions{display:flex;gap:10px;margin-top:8px}.faction-actions .primary,.faction-actions .secondary{margin-top:0}.faction-actions .primary{flex:1}.faction-actions .secondary{width:auto;min-width:138px}
.battle-ui{position:absolute;inset:0;z-index:5;pointer-events:none}.topbar{position:absolute;top:2.2%;left:2.2%;right:2.2%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;color:#fff;text-shadow:0 2px 5px #000}.topbar>div{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(4,18,15,.76);backdrop-filter:blur(5px)}.topbar span{display:block;font-size:11px;opacity:.95}.battle-title{text-align:center;min-width:min(46vw,520px)}.counts{text-align:right}.counts span{display:inline-block;margin-left:10px}.valoria-text{color:#8fdcff}.ravenhold-text{color:#ff9099}.player-card #hp-label{color:#8effb2}
.core-hud{position:absolute;top:13%;left:50%;transform:translateX(-50%);width:min(330px,42vw);padding:8px 12px;border:1px solid rgba(255,225,150,.42);border-radius:13px;background:rgba(20,15,8,.8);color:#fff4d0;text-align:center;backdrop-filter:blur(5px);text-shadow:0 2px 4px #000}.core-hud strong,.core-hud span,.core-hud small{display:block}.core-hud strong{font-family:Georgia,serif}.core-hud span{font-size:11px}.core-hud small{margin-top:3px;color:#ffe498;font-size:10px}.core-bar{height:8px;margin:5px 0 3px;border-radius:6px;background:#2b1712;overflow:hidden}.core-bar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#f2bc4d,#fff0a0);transition:width .18s}
.joystick{pointer-events:auto;position:absolute;left:4%;bottom:7%;width:clamp(92px,14vw,168px);aspect-ratio:1;border:2px solid rgba(213,245,232,.5);border-radius:50%;background:radial-gradient(circle,rgba(17,65,54,.42),rgba(0,13,11,.7));box-shadow:inset 0 0 28px rgba(126,240,194,.15),0 6px 24px rgba(0,0,0,.3)}.joystick-arrows{position:absolute;inset:10%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:rgba(231,255,246,.46);font-size:clamp(11px,1.5vw,18px);pointer-events:none}#joystick-knob{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#8edbc1,#276b59 58%,#123f35);border:2px solid rgba(230,255,246,.75);box-shadow:0 4px 12px #001b14,inset 0 0 12px rgba(255,255,255,.2)}
.attack{pointer-events:auto;position:absolute;right:4.5%;bottom:8%;width:clamp(94px,13vw,158px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,224,154,.8);color:#fff6d7;background:radial-gradient(circle at 35% 30%,#8b5735,#3d1d14 55%,#160907);box-shadow:inset 0 0 25px rgba(255,180,78,.22),0 5px 26px rgba(0,0,0,.48);display:grid;place-content:center;text-shadow:0 2px 4px #000}.attack span{font-size:clamp(25px,4vw,48px)}.attack:active{transform:scale(.95)}
.portal-action,.shop-action{pointer-events:auto;position:absolute;left:50%;bottom:8%;transform:translateX(-50%);min-width:190px;padding:12px 18px;border:1px solid #c9f6e7;border-radius:12px;color:#fff;font-weight:900;background:linear-gradient(180deg,rgba(53,140,116,.95),rgba(20,69,57,.95));box-shadow:0 8px 30px #000,0 0 22px rgba(78,234,188,.25)}.shop-action{background:linear-gradient(180deg,rgba(142,92,34,.97),rgba(74,41,18,.97));border-color:#ffd98d}.leave{pointer-events:auto;position:absolute;right:3%;top:15%;padding:8px 12px;background:rgba(60,20,20,.84)}.reconnect{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:13px 18px;background:#245f50;box-shadow:0 12px 40px #000}
.toast{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);padding:9px 15px;border-radius:18px;background:rgba(5,19,16,.94);color:#fff1c2;opacity:0;transition:.2s;max-width:74%;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.45)}.toast.show{opacity:1}.legend{position:absolute;left:50%;bottom:1.8%;transform:translateX(-50%);font-size:10px;color:#bfe8dc;text-shadow:0 1px 3px #000;text-align:center;width:72%}
#net-status{font-style:normal;color:#ffd994}#net-status.ok{color:#94f2c9}#net-status.error{color:#ff9a9a}
.network-debug{pointer-events:auto;position:absolute;left:2.2%;top:15%;width:min(250px,34vw);border:1px solid rgba(127,230,194,.32);border-radius:12px;background:rgba(2,17,13,.82);backdrop-filter:blur(5px);color:#dff9ef;box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:11px;overflow:hidden}.network-debug header{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:rgba(67,159,128,.16)}.network-debug header b{font-size:10px;letter-spacing:.08em;color:#93e7c9}.network-debug header button{width:24px;height:22px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#153e33;color:#fff}.network-debug #debug-body{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:8px 9px}.network-debug span{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}.network-debug b{color:#fff1b8}.network-debug.collapsed #debug-body{display:none}
@media(max-width:720px){.faction-grid{grid-template-columns:1fr}.faction{min-height:120px}.topbar{grid-template-columns:1fr 1fr}.battle-title{display:none}.core-hud{top:14%;width:42vw}.network-debug{width:42vw;top:14%;font-size:9px}.network-debug #debug-body{grid-template-columns:1fr}.portal-action{min-width:150px}}
@media(max-height:430px){.card{padding:14px}.card h1{margin:4px 0 10px}.faction{min-height:100px}.faction .crest{font-size:32px}.legend{display:none}.core-hud{top:18%;padding:5px 9px}.network-debug{top:20%;max-height:44vh;overflow:auto}.leave{top:20%}.toast{bottom:23%}}

/* OUTERLANDS V6.4 */
.publisher-screen{position:absolute;inset:0;z-index:60;display:none;place-content:center;place-items:center;gap:14px;background:radial-gradient(circle at 50% 44%,#173b32 0,#06120f 42%,#010403 100%);color:#f3e2a8;letter-spacing:.28em}.publisher-screen.active{display:grid}.publisher-screen strong{font-family:Georgia,serif;font-size:clamp(20px,3vw,40px);text-shadow:0 3px 14px #000}.publisher-logo,.game-logo{display:grid;place-items:center;border:2px solid #f3cf70;border-radius:50%;font-family:Georgia,serif;font-weight:900;color:#ffe89b;background:radial-gradient(circle at 35% 28%,#426d61,#122d27 58%,#06110e);box-shadow:0 0 0 5px rgba(4,16,13,.7),0 0 30px rgba(245,203,94,.3),inset 0 0 15px rgba(255,230,155,.22)}.publisher-logo{width:clamp(86px,11vw,144px);aspect-ratio:1;font-size:clamp(50px,7vw,88px)}
.auth-screen{background:linear-gradient(rgba(1,8,7,.55),rgba(1,7,6,.88)),url("assets/maps/valoria.png") center/cover no-repeat}.auth-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 0 20%,rgba(0,0,0,.42) 75%);pointer-events:none}.auth-screen .auth-card{position:relative}.game-logo{width:54px;aspect-ratio:1;margin:0 auto 5px;font-size:31px}.outerlands-title{margin:2px 0 0!important;font-size:clamp(34px,5.2vw,66px)!important;line-height:.95;letter-spacing:.11em;color:#ffe6a3!important;text-shadow:0 3px 0 #543718,0 8px 20px #000}.outerlands-subtitle{margin:8px 0 13px;color:#d7ede6;font-family:Georgia,serif;font-size:clamp(11px,1.4vw,16px);font-weight:900;letter-spacing:.25em;text-shadow:0 2px 6px #000}
.topbar .player-card{display:flex;align-items:center;gap:9px;min-width:min(350px,35vw);padding:7px 10px}.self-avatar{pointer-events:auto;flex:0 0 auto;width:46px;height:46px;padding:0;border:2px solid #f5d88b;border-radius:50%;overflow:hidden;background:#10211d;box-shadow:0 2px 10px #000}.self-avatar span{display:block;width:100%;height:100%;background-image:url("assets/idle-right.png");background-size:900% 100%;background-position:0 0;background-repeat:no-repeat;transform:scale(1.75);transform-origin:50% 42%}.player-hud-copy{min-width:0;flex:1}.player-hud-copy>strong,.player-hud-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-hp{position:relative;width:min(220px,22vw);height:14px;margin-top:3px;border:1px solid #f5b2ad;border-radius:8px;overflow:hidden;background:#321010;box-shadow:inset 0 1px 4px #000}.hud-hp i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#941f25,#e64d52 55%,#ff7979);transition:width .18s}.hud-hp b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;line-height:12px;text-shadow:0 1px 2px #000}.hud-badge{flex:0 0 auto;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 5px #000)}
.modal-layer{position:absolute;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:rgba(0,4,4,.74);backdrop-filter:blur(5px);pointer-events:auto}.interaction-card,.character-card,.shop-card{border:1px solid rgba(255,227,157,.45);border-radius:18px;background:linear-gradient(145deg,rgba(15,35,30,.98),rgba(5,15,13,.99));box-shadow:0 22px 90px #000,inset 0 0 35px rgba(87,181,148,.08);color:#fff}.interaction-card{width:min(360px,88vw);padding:20px;text-align:center}.interaction-card h2{margin:0 0 14px;color:#ffe2a0;font-family:Georgia,serif}.interaction-card button{display:block;width:100%;margin-top:8px;padding:11px;border:1px solid #4d7a6c;border-radius:10px;background:#173c32;color:#fff;font-weight:900}.interaction-card button:hover{background:#24594a}
.character-card,.shop-card{width:min(1080px,94vw);height:min(680px,88vh);padding:14px;overflow:hidden}.character-card>header,.shop-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 5px 12px;border-bottom:1px solid rgba(255,255,255,.14)}.character-card h2,.shop-card h2{margin:0;color:#ffe2a0;font-family:Georgia,serif}.character-card header span,.shop-card header span{color:#a9d5c6;font-size:12px}.modal-close{width:38px;height:38px;border:1px solid #876b43;border-radius:10px;background:#3d211b;color:#fff;font-size:25px}.profile-eliminations{margin-left:auto;display:grid;min-width:100px;text-align:center}.profile-eliminations strong{font-size:25px;color:#ffde85}.character-layout{display:grid;grid-template-columns:minmax(340px,.92fr) minmax(360px,1.25fr);gap:14px;height:calc(100% - 58px);padding-top:14px}.equipment-side,.inventory-side{min-height:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(2,13,11,.55)}.paperdoll{position:relative;width:100%;height:100%;min-height:420px}.character-figure{position:absolute;left:50%;top:50%;width:45%;height:84%;transform:translate(-50%,-50%);background-image:url("assets/idle-right.png");background-repeat:no-repeat;background-size:900% 100%;background-position:0 0;filter:drop-shadow(0 12px 15px #000)}.equipment-slot{position:absolute;width:76px;aspect-ratio:1;border:1px solid #8b744d;border-radius:12px;background:linear-gradient(145deg,#253d37,#0d1c18);color:#d7cba9;font-size:10px;overflow:hidden;box-shadow:inset 0 0 14px rgba(255,214,126,.05)}.equipment-slot img{width:100%;height:100%;object-fit:contain}.equipment-slot span{position:absolute;left:2px;right:2px;bottom:2px;padding:2px;border-radius:5px;background:rgba(0,0,0,.68)}.slot-helmet{left:10%;top:5%}.slot-armor{left:10%;top:37%}.slot-pants{left:10%;bottom:8%}.slot-weapon{right:10%;top:5%}.slot-necklace{right:10%;top:37%}.slot-ring{right:10%;bottom:8%}.slot-shoes{left:50%;bottom:3%;transform:translateX(-50%)}
.inventory-side{display:flex;flex-direction:column;padding:10px}.inventory-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inventory-tabs button{padding:9px;border:1px solid #4b7165;border-radius:9px;background:#102a23;color:#bddbce;font-weight:900}.inventory-tabs button.active{border-color:#e5c277;background:#315c4e;color:#fff0bd}.inventory-grid,.shop-grid{display:grid;grid-template-columns:repeat(5,minmax(76px,1fr));gap:8px;align-content:start;overflow:auto;padding:10px 2px}.inventory-grid{flex:1}.inventory-empty{margin:auto;color:#8eaaa0;font-size:13px}.item-card{position:relative;min-height:116px;padding:7px;border:1px solid #5d6e64;border-radius:11px;background:linear-gradient(155deg,#1b302a,#091512);color:#fff;text-align:center}.item-card img{display:block;width:100%;height:70px;object-fit:contain}.item-card strong{display:block;font-size:10px;line-height:1.2}.item-card small{display:block;margin-top:3px;color:#d9c78e;font-size:9px;white-space:pre-line}.socket-dot{position:absolute;right:5px;bottom:5px;width:13px;height:13px;border:2px solid #c9b273;border-radius:50%;background:#07100e;box-shadow:0 0 5px #d6b75b}.quantity{position:absolute;right:5px;top:5px;min-width:20px;padding:2px 5px;border-radius:9px;background:#07100e;color:#fff;font-size:9px}.shop-card{height:min(620px,86vh)}.shop-grid{grid-template-columns:repeat(4,minmax(150px,1fr));max-height:calc(100% - 92px);padding:14px 4px}.shop-grid .item-card{min-height:210px}.shop-grid .item-card img{height:105px}.shop-grid .item-card strong{font-size:13px}.shop-grid .item-card small{font-size:10px;line-height:1.35}.shop-price-note{margin:4px 0 0;color:#ffd38c;text-align:center;font-size:12px}

@media(max-width:800px){.topbar .player-card{min-width:49vw}.counts{display:none}.hud-hp{width:24vw}.character-card,.shop-card{width:98vw;height:94vh;padding:9px}.character-layout{grid-template-columns:44% 56%;gap:8px}.paperdoll{min-height:300px}.equipment-slot{width:55px}.inventory-grid{grid-template-columns:repeat(4,minmax(58px,1fr));gap:5px}.shop-grid{grid-template-columns:repeat(4,minmax(110px,1fr))}.item-card{min-height:94px}.item-card img{height:52px}.shop-grid .item-card{min-height:170px}.shop-grid .item-card img{height:75px}}
@media(max-height:480px){.publisher-logo{width:70px}.auth-card{max-height:96vh;overflow:auto}.game-logo{display:none}.outerlands-title{font-size:30px!important}.character-card,.shop-card{height:96vh}.character-layout{height:calc(100% - 48px);padding-top:7px}.paperdoll{min-height:260px}.equipment-slot{width:48px}.inventory-grid,.shop-grid{padding-top:5px}.shop-grid .item-card{min-height:150px}.shop-grid .item-card img{height:62px}.modal-layer{padding:4px}}

/* OUTERLANDS V6.5 — cụm 4 Kill */
.player-level{display:inline-block;margin-top:3px;padding:2px 7px;border:1px solid rgba(255,224,143,.48);border-radius:8px;background:rgba(24,15,6,.78);color:#ffe4a0;font-size:9px;letter-spacing:.08em;text-shadow:0 1px 3px #000}.hud-badge{width:23px;height:23px}
.combat-controls{--main-size:clamp(88px,11vw,132px);--skill-size:clamp(52px,6.2vw,76px);pointer-events:none;position:absolute;right:3.2%;bottom:5.5%;width:calc(var(--main-size) + var(--skill-size)*2.55);height:calc(var(--main-size) + var(--skill-size)*1.7)}
.combat-controls .attack{pointer-events:auto;position:absolute;right:0;bottom:0;width:var(--main-size);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,224,154,.9);color:#fff6d7;background:radial-gradient(circle at 35% 28%,#a96d42,#4b2417 55%,#160907);box-shadow:inset 0 0 25px rgba(255,180,78,.25),0 5px 26px rgba(0,0,0,.52),0 0 16px rgba(255,157,60,.18);display:grid;place-content:center;text-shadow:0 2px 4px #000}.combat-controls .attack span{font-size:clamp(25px,4vw,48px)}.combat-controls .attack strong{font-size:clamp(8px,1.05vw,12px)}.combat-controls .attack:active,.skill-button:active{transform:scale(.94)}
.skill-button{pointer-events:auto;position:absolute;width:var(--skill-size);aspect-ratio:1;padding:0;border:2px solid rgba(255,231,166,.82);border-radius:50%;overflow:hidden;color:#fff;background-color:#10221d;background-position:center;background-repeat:no-repeat;background-size:88%;box-shadow:inset 0 0 17px rgba(255,255,255,.18),0 5px 17px rgba(0,0,0,.62),0 0 12px rgba(255,203,103,.16);text-shadow:0 2px 4px #000}.skill-button small{position:absolute;right:4px;bottom:3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:1px solid rgba(255,225,152,.7);border-radius:9px;background:rgba(0,0,0,.76);font-size:9px;font-weight:900}.skill-button:disabled{filter:none;opacity:.64}.skill-button.cooling{border-color:rgba(174,195,189,.54)}.skill-cooldown{display:none;position:absolute;inset:0;place-items:center;border-radius:50%;background:rgba(0,8,7,.72);color:#fff7c7;font-size:clamp(16px,2.2vw,25px);font-weight:1000}.skill-button.cooling .skill-cooldown{display:grid}.skill-1{right:calc(var(--main-size) + 10px);bottom:0;background-image:url("assets/skills/effects/KILL-1-upward-slash.png");background-size:62%}.skill-2{right:calc(var(--main-size) + var(--skill-size)*.72);bottom:calc(var(--skill-size)*.72);background-image:url("assets/skills/effects/KILL-2-spectral-sword-right.png");background-size:105%}.skill-3{right:calc(var(--main-size) + var(--skill-size)*.10);bottom:calc(var(--skill-size)*1.42);background-image:url("assets/skills/effects/KILL-3-full-area.png");background-size:108%}.skill-4{right:6px;bottom:calc(var(--main-size) + 16px);background-image:url("assets/skills/effects/KILL-4-three-crescents-right.png");background-size:104%}
@media(max-height:480px){.combat-controls{--main-size:82px;--skill-size:48px;right:2%;bottom:3%}.skill-button small{min-width:15px;height:15px;font-size:8px}}

/* V6.6 — ELYON: giao diện tách lớp, dùng được với nền động */
.runtime-hidden{display:none!important}
.auth-screen,.creation-screen{overflow:hidden;background:#071016 url("assets/ui/ELYON-login-background.png") center/cover no-repeat}
.auth-screen:before,.creation-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,18,.16),rgba(0,0,0,.34) 50%,rgba(16,3,6,.16)),radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(0,0,0,.30) 85%);pointer-events:none}
.elyon-logo{position:absolute;z-index:2;left:50%;top:1.2%;width:min(360px,30vw);height:auto;transform:translateX(-50%);filter:drop-shadow(0 8px 18px rgba(0,0,0,.9))}.elyon-logo.small{width:min(300px,25vw);top:0}
.boi-brand{position:absolute;z-index:3;left:2.2%;bottom:2.4%;display:flex;align-items:center;gap:8px;color:#f7e6ba;font:900 clamp(11px,1.2vw,17px) Georgia,serif;letter-spacing:.08em;text-shadow:0 2px 6px #000}.boi-brand img{width:clamp(38px,4vw,64px);height:clamp(38px,4vw,64px);object-fit:contain;filter:drop-shadow(0 3px 6px #000)}
.auth-card{position:absolute!important;z-index:2;left:50%;top:59%;width:min(480px,48vw,calc(58vh * 1.4402));aspect-ratio:1060/736;max-width:none!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transform:translate(-50%,-50%)}
.auth-panel-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 28px rgba(0,0,0,.72))}.auth-content{position:absolute;z-index:1;inset:9% 11% 10%;display:flex;flex-direction:column;gap:clamp(4px,.62vh,7px)}
.auth-content .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:0 0 clamp(28px,5.6vh,42px);width:100%;margin:0 0 clamp(1px,.3vh,4px);gap:6px}.auth-content .tab{width:100%;min-width:0;height:100%;padding:0;border:1px solid rgba(211,178,106,.52)!important;border-radius:6px!important;color:#bfc4c9!important;font:900 clamp(10px,1.05vw,15px) Georgia,serif;letter-spacing:.03em;text-shadow:0 2px 5px #000}.auth-content #tab-login{background:linear-gradient(180deg,rgba(22,70,103,.92),rgba(7,22,35,.96))!important}.auth-content #tab-register{background:linear-gradient(180deg,rgba(105,35,39,.92),rgba(38,9,14,.96))!important}.auth-content .tab.active{border-color:#f2cf7c!important;color:#ffe5a4!important;box-shadow:inset 0 0 12px rgba(255,204,101,.16),0 0 8px rgba(255,197,80,.18);text-shadow:0 0 8px rgba(255,195,80,.5),0 2px 5px #000}
.auth-content label{display:block;flex:0 0 auto;width:100%;margin:0!important}.auth-content label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.auth-content input{display:block;width:100%;height:clamp(28px,5.4vh,44px);margin:0;padding:0 clamp(10px,4%,17px);border:1px solid rgba(204,171,104,.50)!important;border-radius:5px!important;background:rgba(2,6,9,.72)!important;color:#fff!important;font-size:clamp(10px,1.05vw,15px);line-height:1;box-shadow:inset 0 0 13px rgba(0,0,0,.7)}.auth-content input:focus{border-color:#e7c275!important;box-shadow:0 0 0 2px rgba(231,194,117,.14),inset 0 0 13px rgba(0,0,0,.72)!important}.auth-content .primary{flex:0 0 clamp(30px,5.7vh,46px);height:auto;margin:clamp(1px,.3vh,4px) 0 0!important;padding:0;border:1px solid #e6c071;background:linear-gradient(90deg,#10335e,#4c271d 53%,#72170f);font:900 clamp(10px,1.15vw,16px) Georgia,serif;color:#ffe3a4;letter-spacing:.07em}.auth-content .secondary{padding:4px;margin:0;font-size:9px}.auth-content .message{position:absolute;left:1%;right:1%;top:100%;min-height:16px!important;margin:3px 0 0!important;text-align:center;font-size:clamp(8px,.8vw,11px)!important}.auth-card.register-mode{width:min(480px,48vw,calc(58vh * 1.4402))}.auth-card.register-mode .auth-content{inset:8% 11% 9%}.auth-card.register-mode .auth-content .tabs{margin-bottom:0}.auth-card.register-mode .auth-content input{height:clamp(25px,4.7vh,38px)}.auth-card.register-mode .auth-content .primary{flex-basis:clamp(28px,5vh,41px)}
.creation-screen{place-items:center;padding:5.5% 4% 3%}.creation-card{position:relative;z-index:2;width:min(1120px,92vw);height:min(720px,84vh);padding:clamp(14px,2vw,28px);border:1px solid rgba(235,200,125,.58);border-radius:18px;background:linear-gradient(145deg,rgba(7,17,24,.92),rgba(8,9,14,.95));box-shadow:0 25px 90px #000,inset 0 0 45px rgba(45,130,180,.10);color:#fff}.creation-title{text-align:center;color:#ffe0a0;font:900 clamp(19px,2.1vw,31px) Georgia,serif;letter-spacing:.10em;text-shadow:0 2px 8px #000}.creation-card h1{margin:6px 0 12px;text-align:center;font-size:clamp(14px,1.5vw,21px);font-weight:700;color:#cbdadf}.character-slots{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:clamp(16px,3vw,44px);height:calc(100% - 145px);max-width:850px;margin:auto}.character-slot{position:relative;display:grid;place-items:center;align-content:center;overflow:hidden;border:2px solid rgba(193,167,101,.52);border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(30,68,84,.65),rgba(5,10,14,.96) 70%);color:#dcebf0;box-shadow:inset 0 0 35px rgba(68,170,210,.08),0 12px 28px rgba(0,0,0,.45)}.character-slot:hover,.character-slot.selected{border-color:#ffda82;box-shadow:0 0 22px rgba(255,198,78,.22),inset 0 0 38px rgba(56,147,190,.15)}.character-slot.add b{font:200 clamp(72px,10vw,150px) Georgia,serif;color:rgba(220,235,240,.70);line-height:.8}.character-slot.add span{margin-top:20px;font-weight:900;letter-spacing:.08em}.character-slot.created{grid-template-rows:1fr auto auto}.character-slot.created .character-sprite{width:75%;height:100%;background:url("assets/idle-right.png") 0 center/900% 100% no-repeat;filter:drop-shadow(0 12px 10px #000)}.character-slot.created strong{font:900 20px Georgia,serif;color:#ffe09b}.character-slot.created small{padding:4px 0 10px;color:#9dd7e9}.corner-actions{position:absolute;left:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);bottom:clamp(12px,1.6vw,22px);display:flex;justify-content:space-between;gap:16px}.corner-actions .primary,.corner-actions .secondary{width:auto;min-width:150px;margin:0}.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);height:calc(100% - 100px);padding:18px 0 64px}.class-option{position:relative;display:grid;grid-template-rows:1fr auto auto;place-items:center;overflow:hidden;border:2px solid rgba(173,145,87,.52);border-radius:16px;background:radial-gradient(circle at 50% 42%,rgba(26,73,94,.62),rgba(4,9,13,.96) 72%);color:#fff}.class-option.selected{border-color:#f4cf79;box-shadow:0 0 24px rgba(91,190,233,.20)}.class-figure{width:82%;height:100%;background:url("assets/idle-right.png") 0 center/900% 100% no-repeat;filter:drop-shadow(0 10px 12px #000)}.class-option strong{padding-top:5px;color:#ffe0a0;font:900 clamp(16px,1.7vw,24px) Georgia,serif}.class-option small{padding:5px 0 14px;color:#91e4ff}.class-option.locked{filter:grayscale(1) brightness(.33);border-color:#555}.locked-symbol{display:grid;place-items:center;width:42%;aspect-ratio:1;border:2px solid #777;border-radius:50%;font-size:clamp(60px,8vw,120px);color:#999;background:#111}.faction-card{width:min(1180px,94vw)}.faction-grid{height:calc(100% - 115px);padding:14px 0 68px;gap:clamp(16px,2.5vw,34px)}.faction{position:relative;display:grid!important;grid-template-rows:1fr auto auto!important;min-height:0!important;padding:0 0 12px!important;overflow:hidden;border:2px solid rgba(210,178,103,.48)!important;border-radius:17px!important;background:#080d12!important;color:#fff}.faction.selected{border-color:#ffe09a!important;box-shadow:0 0 28px rgba(255,213,119,.28)}.faction-image{width:100%;height:100%;background-position:center;background-size:cover;filter:saturate(.9) brightness(.75);transition:.2s}.faction:hover .faction-image,.faction.selected .faction-image{filter:saturate(1.15) brightness(1)}.faction.valoria .faction-image{background-image:url("assets/maps/valoria.png")}.faction.ravenhold .faction-image{background-image:url("assets/maps/ravenhold.png")}.faction strong{padding-top:7px;font:900 clamp(18px,2vw,28px) Georgia,serif;color:#ffe2a0}.faction small{opacity:.82}.faction-actions{position:absolute;left:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);bottom:clamp(12px,1.6vw,22px);justify-content:space-between}.faction-actions .primary,.faction-actions .secondary{width:auto;min-width:170px}.confirm-card{width:min(470px,90vw);padding:24px;border:1px solid #d3ab63;border-radius:16px;background:linear-gradient(145deg,#15232a,#130a0d);text-align:center;box-shadow:0 25px 80px #000}.confirm-card h2{margin:0;color:#ffe09b;font:900 23px Georgia,serif}.confirm-card>div{display:flex;gap:12px}.confirm-card button{flex:1;margin:0}
.topbar{grid-template-columns:minmax(300px,32vw) 1fr auto;align-items:start}.topbar .player-card.hud-v66{position:relative;display:block;width:min(510px,31vw);min-width:300px;aspect-ratio:1596/912;padding:0;border:0;background:none;box-shadow:none}.hud-frame-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.hud-v66 .self-avatar{position:absolute;z-index:3;left:1.5%;top:10%;width:40%;height:70%;border:0;border-radius:50%;background:transparent;box-shadow:none}.hud-v66 .hud-hp,.hud-v66 .hud-exp{position:absolute;z-index:2;left:42.3%;width:55%;height:15%;margin:0;border:0;border-radius:4px;background:transparent;overflow:hidden;box-shadow:none}.hud-v66 .hud-hp{top:25.7%}.hud-v66 .hud-exp{top:45.7%}.hud-v66 .hud-hp i,.hud-v66 .hud-exp i{position:absolute;inset:10% 1.5%;display:block;background-position:left center;background-size:100% 100%;transition:width .18s;clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%)}.hud-v66 .hud-hp i{background-image:url("assets/ui/HUD-hp-fill.png")}.hud-v66 .hud-exp i{background-image:url("assets/ui/HUD-mana-fill.png")}.hud-v66 .hud-hp b,.hud-v66 .hud-exp b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(7px,.65vw,10px);text-shadow:0 1px 3px #000}.hud-v66 .player-level{position:absolute;z-index:3;left:48%;top:65%;width:34%;margin:0;padding:0;border:0;background:none;color:#e9e2d7;font:900 clamp(8px,.8vw,13px) Georgia,serif;letter-spacing:.06em;text-align:center}.hud-v66 .hud-badge{position:absolute;z-index:4;left:36%;top:65%;width:9%;height:auto}.battle-title{padding-top:5px}
.joystick{left:3.2%;bottom:5.2%;width:clamp(98px,13vw,170px);border:0;background:transparent url("assets/ui/JOYSTICK.png") center/contain no-repeat;box-shadow:none}.joystick:before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.10);backdrop-filter:blur(1px)}#joystick-knob{width:37%;border:1px solid rgba(185,207,205,.32);background:radial-gradient(circle at 38% 32%,#424b4c,#121719 65%,#050708);box-shadow:0 4px 14px #000,inset 0 0 10px rgba(255,255,255,.08)}
.combat-controls .attack,.skill-button{border:0!important;background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 6px 9px rgba(0,0,0,.75))}.combat-controls .attack{background-image:url("assets/ui/BUTTON-attack.png")!important}.skill-1{background-image:url("assets/ui/BUTTON-kill-1.png")!important}.skill-2{background-image:url("assets/ui/BUTTON-kill-2.png")!important}.skill-3{background-image:url("assets/ui/BUTTON-kill-3.png")!important}.skill-4{background-image:url("assets/ui/BUTTON-kill-4.png")!important}.skill-button small{right:1px;bottom:1px}.skill-cooldown{inset:10%;background:rgba(0,5,9,.78)}
@media(max-width:800px){.elyon-logo{width:min(310px,35vw)}.creation-screen{padding-top:3%}.creation-card{height:91vh}.faction-grid{grid-template-columns:1fr 1fr}.topbar{grid-template-columns:minmax(270px,42vw) 1fr}.topbar .player-card.hud-v66{width:42vw;min-width:270px}.battle-title{display:none}.character-slots{height:calc(100% - 120px)}.corner-actions .primary,.corner-actions .secondary,.faction-actions .primary,.faction-actions .secondary{min-width:120px;padding:9px}.auth-card{top:53%}}
@media(max-height:480px){.elyon-logo{top:-5%;width:min(250px,29vw)}.boi-brand{bottom:1%}.auth-card{top:52%;width:min(330px,38vw,calc(93vh * .80))}.auth-content{inset:10% 18% 8%;gap:3px}.auth-content .tabs{margin-bottom:5%}.creation-screen{padding:2%}.creation-card{height:96vh;padding:10px}.creation-title{font-size:17px}.creation-card h1{margin:2px 0 5px}.class-grid,.faction-grid{padding-top:5px;padding-bottom:48px}.character-slots{height:calc(100% - 83px)}.corner-actions,.faction-actions{bottom:7px}.topbar .player-card.hud-v66{width:min(360px,39vw);min-width:270px}.hud-v66 .hud-hp b,.hud-v66 .hud-exp b{font-size:7px}}

/* V6.6 UI2 — khung đăng nhập gọn và chọn phe bằng hai ảnh thành phố lớn */
.faction-card{width:96vw;height:92vh;padding:clamp(8px,1.2vw,16px);background:rgba(4,7,11,.68)}
.faction-card .faction-grid{grid-template-columns:repeat(2,minmax(0,1fr));height:calc(100% - 88px);padding:8px 0 54px;gap:clamp(8px,1.2vw,18px)}
.faction-card .faction{position:relative;display:grid!important;grid-template-rows:1fr auto auto!important;min-width:0;min-height:0!important;padding:0 0 8px!important;overflow:hidden;border:3px solid rgba(210,178,103,.48)!important;border-radius:13px!important;background:#080d12!important;color:#fff}
.faction-card .faction:after{content:"CHẠM ĐỂ CHỌN PHE";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);padding:7px 12px;border:1px solid rgba(255,225,154,.58);border-radius:8px;background:rgba(0,0,0,.68);color:#fff0c2;font:900 clamp(9px,1vw,14px) Georgia,serif;white-space:nowrap;opacity:.86}
.faction-card .faction.selected{border-color:#ffe09a!important;box-shadow:0 0 28px rgba(255,213,119,.42)}
.faction-card .faction.selected:after{content:"ĐÃ CHỌN";border-color:#ffe09a;background:rgba(68,43,10,.88);color:#fff4c9}
.faction-card .faction-image{width:100%;height:100%;background-position:center;background-size:cover;filter:saturate(.92) brightness(.73);transition:.2s}
.faction-card .faction:hover .faction-image,.faction-card .faction.selected .faction-image{filter:saturate(1.15) brightness(1)}
.faction-card .faction strong{padding-top:6px;font:900 clamp(17px,2vw,28px) Georgia,serif;color:#ffe2a0}
.faction-card .faction small{opacity:.82}
.faction-card .faction-actions{left:clamp(12px,1.5vw,22px);right:clamp(12px,1.5vw,22px);bottom:clamp(8px,1vw,14px)}
.faction-card .faction-actions .primary,.faction-card .faction-actions .secondary{width:auto;min-width:150px}
@media(max-width:800px){.elyon-logo{width:min(260px,32vw)}.auth-card,.auth-card.register-mode{top:59%;width:min(300px,48vw,calc(58vh * 1.4402))}.faction-card{width:98vw;height:96vh}.faction-card .faction-actions .primary,.faction-card .faction-actions .secondary{min-width:110px;padding:8px}}
@media(max-height:480px){.elyon-logo{top:1%;width:min(210px,28vw)}.auth-card,.auth-card.register-mode{top:59%;width:min(300px,48vw,calc(57vh * 1.4402));max-height:none;overflow:visible}.auth-content{inset:8% 11% 9%;gap:3px}.auth-content .tabs{flex-basis:25px;gap:4px;margin-bottom:0}.auth-content input{height:27px}.auth-content .primary{flex-basis:28px}.auth-card.register-mode .auth-content{inset:7% 11% 8%;gap:2px}.auth-card.register-mode .auth-content .tabs{flex-basis:23px}.auth-card.register-mode .auth-content input{height:23px}.auth-card.register-mode .auth-content .primary{flex-basis:25px}.creation-screen{padding:1%}.faction-card{width:98vw;height:98vh;padding:7px}.faction-card .creation-title{font-size:16px}.faction-card .faction-grid{padding:4px 0 42px;gap:7px;height:calc(100% - 50px)}.faction-card .faction:after{padding:5px 8px}.faction-card .faction-actions{bottom:5px}}

/* Trình cập nhật dữ liệu game dùng chung cho web và vỏ APK */
.game-update-layer{z-index:100;background:rgba(0,3,7,.88);backdrop-filter:blur(8px)}

/* ELYON 1.0.20: cổng tải dữ liệu che toàn bộ cảnh cho đến khi tài nguyên
   bắt buộc đã tải, giải mã và renderer 3D sẵn sàng. */
.world-loading-screen{position:absolute;inset:0;z-index:80;display:none;overflow:hidden;background:#071426 url("assets/ui/loading-screen-1.0.20.png") center/cover no-repeat;color:#fff;pointer-events:auto}
.world-loading-screen.active{display:block}
.world-loading-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,9,20,.02) 0 55%,rgba(1,7,18,.44) 70%,rgba(1,6,16,.94) 100%),radial-gradient(circle at 50% 46%,transparent 25%,rgba(0,0,0,.20) 100%)}
.world-loading-content{position:absolute;left:50%;bottom:max(5.5%,env(safe-area-inset-bottom));display:grid;justify-items:center;width:min(680px,82vw);transform:translateX(-50%);text-align:center;text-shadow:0 2px 8px #000}
.world-loading-content>img{width:min(260px,36vw);max-height:16vh;object-fit:contain;filter:drop-shadow(0 5px 14px #000)}
.world-loading-content>strong{margin-top:3px;color:#fff0bd;font:900 clamp(15px,2vw,26px) Georgia,serif;letter-spacing:.16em}
.world-loading-progress{width:100%;height:clamp(13px,2.2vh,22px);margin-top:12px;overflow:hidden;border:2px solid rgba(255,220,133,.9);border-radius:14px;background:rgba(1,8,17,.82);box-shadow:inset 0 2px 8px #000,0 0 20px rgba(73,178,255,.26)}
.world-loading-progress i{display:block;width:0;height:100%;border-radius:12px;background:linear-gradient(90deg,#176db7,#55c8ff 62%,#fff2ad);box-shadow:0 0 17px #58cfff;transition:width .16s linear}
#world-loading-progress-text{margin-top:6px;color:#fff5cf;font-size:clamp(16px,2.3vw,28px)}
#world-loading-status{min-height:1.4em;margin-top:2px;color:#c8e9ff;font-size:clamp(10px,1.1vw,14px)}
#world-loading-retry{margin-top:10px;padding:9px 22px;border:1px solid #ffe3a0;border-radius:10px;background:linear-gradient(#275b91,#12365e);color:#fff;font-weight:900}
.game-update-card{width:min(520px,88vw);padding:clamp(16px,2.2vw,28px);border:2px solid #caa55c;border-radius:18px;background:linear-gradient(135deg,rgba(8,31,48,.98),rgba(18,8,13,.98));box-shadow:0 25px 90px #000,inset 0 0 35px rgba(69,147,193,.12);text-align:center;color:#fff}
.game-update-card>img{display:block;width:min(270px,55%);height:auto;margin:-4% auto -2%;filter:drop-shadow(0 8px 15px #000)}
.game-update-card h2{margin:0 0 7px;color:#ffe1a0;font:900 clamp(18px,2.2vw,28px) Georgia,serif;letter-spacing:.08em}
.game-update-card p{margin:4px 0;color:#d5e2e7}.game-update-card>strong{display:block;margin:7px 0 10px;color:#ffe0a0}
.game-update-progress{height:clamp(13px,2vh,20px);overflow:hidden;border:1px solid #9b844f;border-radius:12px;background:#070a0d;box-shadow:inset 0 2px 7px #000}
.game-update-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#1b78b7,#51c8ff 48%,#ca3c3f 52%,#ff775c);transition:width .15s}
.game-update-card>small{display:block;margin:6px 0 9px;color:#d9e7eb}.game-update-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.game-update-actions .primary,.game-update-actions .secondary{width:100%;height:clamp(36px,6vh,50px);margin:0;padding:0}
@media(max-height:480px){.game-update-card{width:min(470px,80vw);padding:10px 16px}.game-update-card>img{width:min(190px,42%)}.game-update-card h2{font-size:16px}.game-update-card p,.game-update-card>strong,.game-update-card>small{font-size:10px;margin:3px 0}.game-update-progress{height:12px}.game-update-actions .primary,.game-update-actions .secondary{height:30px}}

/* ELYON 1.0.0 — HUD gọn, lưới kỹ năng đều và bảng Phế tích theo khoảng cách */
.topbar{grid-template-columns:minmax(210px,25vw) 1fr auto}
.topbar .player-card.hud-v66{width:min(360px,25vw);min-width:210px;backdrop-filter:none!important}
.hud-v66 .hud-hp b,.hud-v66 .hud-exp b{font-size:clamp(6px,.54vw,8px)}
.hud-v66 .player-level{font-size:clamp(7px,.68vw,10px)}
.core-hud{top:6.5%;width:min(250px,30vw);padding:4px 8px;border-radius:9px;backdrop-filter:none}
.core-hud strong{font-size:clamp(10px,1.05vw,14px)}
.core-hud span{font-size:9px}.core-hud small{margin-top:1px;font-size:8px}.core-bar{height:6px;margin:3px 0 2px}
.leave{right:2%;top:2.2%;padding:6px 10px;border-radius:8px;font-size:10px}
.combat-controls{--skill-gap:clamp(7px,.8vw,12px);display:grid;grid-template-columns:repeat(2,var(--skill-size)) var(--main-size);grid-template-rows:repeat(2,var(--skill-size));gap:var(--skill-gap);align-items:end;width:calc(var(--main-size) + var(--skill-size)*2 + var(--skill-gap)*2);height:calc(var(--skill-size)*2 + var(--skill-gap))}
.combat-controls .attack{position:relative;right:auto;bottom:auto;grid-column:3;grid-row:1/3;align-self:end;justify-self:end}
.combat-controls .skill-button{position:relative!important;right:auto!important;bottom:auto!important;align-self:center;justify-self:center}
.combat-controls .skill-1{grid-column:1;grid-row:1}.combat-controls .skill-2{grid-column:2;grid-row:1}.combat-controls .skill-3{grid-column:1;grid-row:2}.combat-controls .skill-4{grid-column:2;grid-row:2}
@media(max-width:800px){.topbar{grid-template-columns:minmax(200px,34vw) 1fr}.topbar .player-card.hud-v66{width:34vw;min-width:200px}.core-hud{top:7%;width:min(230px,34vw)}}
@media(max-height:480px){.topbar .player-card.hud-v66{width:min(280px,32vw);min-width:200px}.core-hud{top:7%;padding:3px 7px}.leave{top:2%;right:1.5%}.combat-controls{--main-size:78px;--skill-size:46px;--skill-gap:7px}}

/* ELYON 1.0.1 — HUD sát góc, joystick trong và nút kỹ năng ổn định */
.topbar{top:.8%;left:.8%;right:.8%;grid-template-columns:minmax(220px,29vw) 1fr auto}
.topbar .player-card.hud-v66{width:min(320px,29vw);min-width:220px}
.joystick:before{content:none!important;background:none!important;backdrop-filter:none!important}
.combat-controls button{
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  outline:none!important;
}

/* GAME2 1.0.24 */
.inventory-pagination{display:flex;align-items:center;justify-content:center;gap:12px;min-height:34px;color:#f7dda0;font-weight:900}.inventory-pagination button{width:34px;height:28px;border:1px solid #8c7445;border-radius:7px;background:#122b28;color:#fff;font-size:20px}.inventory-grid .item-card .quantity{right:4px;top:4px;z-index:3;display:block;min-width:22px;padding:2px 4px;background:#050a0c;color:#fff;border:1px solid #bea85b;border-radius:8px;font-size:10px}.material-detail-image{display:block;width:128px;height:128px;margin:6px auto;object-fit:contain;filter:drop-shadow(0 8px 12px #000)}
.forest-mode-card{position:relative;width:min(620px,92vw);text-align:center}.forest-mode-card h2{margin:5px 0;color:#ffe39a;font-family:Georgia,serif}.forest-mode-card p{max-width:510px;margin:10px auto 18px;color:#c9ddd2}.forest-mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.forest-party{position:fixed;z-index:30;left:2.2%;top:13%;min-width:180px;padding:10px 14px;border:1px solid #b99c58;border-radius:10px;background:rgba(4,18,17,.9);color:#f7e3a9;box-shadow:0 10px 28px #000}.forest-party ol{margin:5px 0 0;padding-left:22px;color:#c8f4dd}.forest-party li{padding:2px 0}
.blacksmith-card,.trade-card{width:min(1050px,96vw);height:min(690px,92vh);overflow:hidden}.blacksmith-card>header,.trade-card>header{display:flex;align-items:center;justify-content:space-between}.blacksmith-card h2,.trade-card h2{margin:2px 0;color:#ffe0a0}.blacksmith-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}.blacksmith-tabs button{min-height:40px;border:1px solid #5d756d;background:#102a27;color:#bcd3c9;font-weight:900}.blacksmith-tabs button.active{border-color:#dfb95d;background:#314b3f;color:#fff1bf}.blacksmith-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(440px,1.28fr);gap:14px;height:calc(100% - 110px)}.blacksmith-layout>section{position:relative;min-height:0;padding:12px;border:1px solid rgba(226,190,107,.28);border-radius:12px;background:rgba(1,11,12,.62)}.blacksmith-layout .inventory-grid{position:static;height:calc(100% - 35px);grid-template-rows:repeat(4,minmax(72px,1fr));overflow:auto}.forge-stage{text-align:center}.forge-slot{display:grid;place-items:center;width:min(190px,60%);aspect-ratio:1;margin:20px auto;border:2px solid #b89850;border-radius:20px;background:radial-gradient(circle,#415d4c,#07120f 70%);color:#c8d7cc}.forge-slot img{width:80%;height:80%;object-fit:contain}.forge-sockets{display:flex;justify-content:center;gap:7px;min-height:28px}.forge-sockets button{width:28px;height:28px;border:2px solid #765d2d;background:#0b1617;color:#fff}.forge-sockets button.active{border-color:#e1bd62;box-shadow:0 0 9px #d59b39}.trade-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:calc(100% - 112px)}.trade-layout>section{position:relative;min-height:0;padding:10px;border:1px solid rgba(226,190,107,.26);border-radius:10px}.trade-layout .inventory-grid{position:static;height:calc(100% - 35px);overflow:auto}.trade-offer{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;min-height:125px;padding:8px;border:1px dashed #826b3f;border-radius:10px;background:rgba(0,0,0,.24)}.trade-offer .item-card{min-height:90px}.trade-card footer{display:flex;align-items:center;justify-content:space-between;gap:15px}.trade-card footer p{color:#c8d8cf}.trade-invite-card{width:min(480px,90vw);text-align:center}
.character-figure canvas{width:100%!important;height:100%!important;object-fit:contain}.character-figure.profile-3d{background-image:none!important}
@media(max-width:800px){.blacksmith-layout,.trade-layout{grid-template-columns:1fr 1fr;gap:7px}.blacksmith-card,.trade-card{height:96vh}.forest-party{top:16%;left:2%;min-width:145px;font-size:10px}.trade-offer{grid-template-columns:repeat(4,1fr)}}

/* ELYON 1.0.6 — HUD gọn, chữ tương tác cân trái và khung Túi fantasy đã duyệt */
.hud-v66 .player-level{top:68%}

.world-action{overflow:visible;text-overflow:clip}
.world-action span{display:block;width:100%;transform:translateX(-7%);font-size:clamp(9px,1.08vw,14px);line-height:1.05;white-space:nowrap}
.world-action.long-label span{font-size:clamp(8px,.94vw,12px)}
.world-action.very-long-label span{font-size:clamp(7px,.8vw,10px);letter-spacing:0}

.city-dock{width:min(900px,64vw);bottom:1.1%}
.city-tool strong{display:none!important}
.view-compass{padding:24% 7.2% 15%;gap:2.8%}
.view-snap{border-radius:7%;background-position:center;background-size:cover;filter:saturate(.82) brightness(.82);box-shadow:inset 0 0 0 2px rgba(226,188,99,.52),inset 0 0 12px rgba(0,0,0,.3)}
.view-snap.selected{position:relative;background-color:transparent;color:#fff;filter:saturate(1.08) brightness(1.02);transform:none;box-shadow:inset 0 0 0 2px #ffe092,inset 0 0 15px rgba(67,181,231,.2),0 0 8px rgba(63,199,255,.48)}
.view-snap.selected:after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(25,137,196,.14);pointer-events:none}
.view-snap span{z-index:2}

.character-card{position:relative;width:min(1774px,98vw,calc(96vh * 2));height:auto;aspect-ratio:1774/887;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent url("assets/ui/inventory-frame-fantasy-1.0.6.png") center/100% 100% no-repeat;box-shadow:0 24px 100px #000;color:#fff}
.character-card>header{position:absolute;z-index:12;inset:0;min-height:0;padding:0;border:0;pointer-events:none}
.profile-heading{position:absolute;left:24%;top:3.2%;width:30%;display:block;text-align:center;text-shadow:0 2px 5px #000;pointer-events:none}
.profile-heading h2{margin:0;color:#f4d48b;font-size:clamp(10px,1.2vw,20px)}
.profile-heading span{display:block;color:#b8d8e5;font-size:clamp(7px,.75vw,12px)}
.profile-eliminations{position:absolute;left:34%;bottom:4.2%;min-width:18%;display:flex;align-items:center;justify-content:center;gap:8px;color:#bad8e5;font-size:clamp(7px,.7vw,11px);text-shadow:0 2px 4px #000;pointer-events:none}
.profile-eliminations strong{font-size:clamp(11px,1.35vw,22px);color:#f2d080}
.character-card .modal-close{position:absolute;right:1.15%;top:1.15%;width:5.15%;height:auto;aspect-ratio:1;border:0;background:transparent;color:transparent;box-shadow:none;pointer-events:auto}

.character-layout{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.equipment-side{position:absolute;left:0;top:0;width:60%;height:100%;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.paperdoll{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0}
.paperdoll:before{display:none}
.character-figure{position:absolute;z-index:1;left:39%;top:9.5%;width:43%;height:70%;transform:none;background-position:center bottom;background-size:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.82))}
.equipment-slot{position:absolute;z-index:3;width:15.5%;height:auto;aspect-ratio:1;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.equipment-slot.equipped{border:0;box-shadow:none}
.equipment-slot img{position:absolute;inset:11%;display:block;width:78%;height:78%;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8))}
.equipment-slot span{display:none}
.slot-weapon{left:4.6%;top:37.7%}.slot-helmet{left:23.5%;top:16.5%}.slot-armor{left:23.5%;top:40%}.slot-pants{left:23.5%;top:63%}.slot-necklace{left:82.1%;top:16.5%}.slot-ring{left:82.1%;top:40%}.slot-shoes{left:82.1%;top:63%;width:15.5%;margin:0;transform:none}

.inventory-side{position:absolute;left:59.7%;top:0;width:40.3%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.inventory-title{display:none}
.inventory-tabs{position:absolute;z-index:5;left:5.2%;right:6.4%;top:6.5%;height:9%;display:grid;grid-template-columns:1fr 1fr;gap:3.8%}
.inventory-tabs button{min-height:0;padding:0 5px;border:0;border-radius:8px;background:linear-gradient(#202426,#0e1317)!important;color:#c9d4d9;font:900 clamp(7px,.8vw,13px) Georgia,serif;text-shadow:0 2px 4px #000;box-shadow:inset 0 0 10px rgba(0,0,0,.4)}
.inventory-tabs button.active{border:0;background:linear-gradient(#125f9a,#07365f)!important;color:#ffe09a;box-shadow:inset 0 0 12px rgba(83,196,255,.24)}
.inventory-grid{position:absolute;left:6.4%;right:6.1%;top:19.3%;bottom:20.5%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2.4% 2.6%;padding:0;overflow:hidden}
.inventory-grid .item-card,.inventory-cell{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;padding:9%;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.inventory-grid .item-card{display:block}
.inventory-grid .item-card img{display:block;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px #000)}
.inventory-grid .item-card strong,.inventory-grid .item-card small{display:none}
.inventory-cell.empty{opacity:1}.inventory-cell.empty:after{display:none}
.inventory-empty{left:50%;bottom:8.2%;width:78%;margin:0;transform:translateX(-50%);overflow:hidden;color:#b8cad2;font-size:clamp(7px,.75vw,12px);text-align:center;text-overflow:ellipsis;white-space:nowrap}

.character-card.inspection-mode{width:min(1064px,96vw,calc(96vh * 1.2));aspect-ratio:1064/887;background-position:left top;background-size:auto 100%}
.character-card.inspection-mode .character-layout{display:block;width:100%;height:100%}
.character-card.inspection-mode .equipment-side{width:100%}
.character-card.inspection-mode .character-figure{left:39%;width:43%}
.character-card.inspection-mode .modal-close{right:1.5%;top:1.5%;width:7%;border:1px solid #a8864e;border-radius:50%;background:linear-gradient(#173147,#081621);color:#ffe4a4;font-size:clamp(20px,3.2vw,34px)}

@media(max-height:500px){
  .city-dock{width:min(760px,62vw);bottom:.6%}
  .view-compass{padding:24% 7.2% 15%;gap:2.8%}
  .character-card{width:min(1774px,98vw,calc(97vh * 2))}
}

/* ELYON 1.0.7 FINAL — căn tâm giao diện, bản đồ và Solo */
.world-action{display:grid;place-items:center;padding:0 10.5%;text-align:center}
.world-action span{display:grid;place-items:center;width:100%;height:100%;transform:none!important;text-align:center}
.world-action.long-label span{font-size:clamp(8px,.94vw,12px)}
.world-action.very-long-label span{font-size:clamp(7px,.8vw,10px)}

.view-compass{overflow:hidden}
.view-snap{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;transform:none!important}
.view-snap.selected{background-color:transparent!important;filter:saturate(1.06) brightness(1.02);box-shadow:inset 0 0 0 2px #ffe092,inset 0 0 9px rgba(67,181,231,.16),0 0 7px rgba(63,199,255,.38)}
.view-snap.selected:after{background:rgba(25,137,196,.045)}

.world-map-card .modal-close{position:absolute;left:auto;right:4.1%;top:4.8%;width:clamp(30px,3.3vw,44px);height:auto;aspect-ratio:1;padding:0;border-radius:50%;font-size:clamp(19px,2.5vw,29px)}
.forest-return{right:2.2%;top:12.5%;min-width:76px;padding:5px 8px;border-radius:8px;font-size:clamp(8px,.76vw,11px)}

.solo-invite-layer{position:absolute;inset:0;z-index:56;display:grid;place-items:start center;padding-top:12vh;pointer-events:none}
.solo-invite-layer.hidden{display:none}
.solo-invite-card{pointer-events:auto;width:min(340px,82vw);padding:16px 18px;border:1px solid #e0bd6d;border-radius:16px;background:radial-gradient(circle at 50% 0,rgba(43,126,168,.24),transparent 48%),linear-gradient(155deg,rgba(9,31,43,.98),rgba(7,10,16,.99));box-shadow:0 18px 65px rgba(0,0,0,.88),inset 0 0 25px rgba(89,188,225,.08);color:#eef9ff;text-align:center}
.solo-invite-card small{color:#7ed9ff;font-weight:1000;letter-spacing:.22em}.solo-invite-card h2{margin:3px 0 8px;color:#ffe3a0;font:900 clamp(16px,1.7vw,22px) Georgia,serif}.solo-invite-card p{margin:0 0 8px;color:#d4e4e9;font-size:13px}.solo-invite-card>strong{display:block;margin:1px 0 9px;color:#fff0a8;font:900 clamp(24px,3vw,36px) Georgia,serif;text-shadow:0 0 12px rgba(255,204,85,.45)}
.solo-invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.solo-invite-card button{width:100%;margin:0;padding:9px;border:1px solid #8c7547;border-radius:9px;color:#fff;font-weight:1000}.solo-invite-card .primary{background:linear-gradient(#21805f,#0d4536)}.solo-invite-card .secondary{background:linear-gradient(#673038,#35151b)}
.solo-status{position:absolute;z-index:22;left:50%;top:14%;display:grid;place-items:center;min-width:min(270px,46vw);padding:8px 20px;border:1px solid rgba(230,194,111,.75);border-radius:13px;background:linear-gradient(145deg,rgba(8,34,48,.92),rgba(4,10,17,.94));transform:translateX(-50%);box-shadow:0 8px 28px rgba(0,0,0,.65),inset 0 0 16px rgba(75,194,237,.09);color:#fff;text-align:center;pointer-events:none}
.solo-status small{color:#8cddff;font-size:9px;font-weight:1000;letter-spacing:.16em}.solo-status strong{color:#ffe49a;font:900 clamp(22px,2.5vw,34px) Georgia,serif;line-height:1}.solo-status span{color:#d7e8ed;font-size:10px}

@media(max-height:480px){
  .forest-return{top:13.5%;right:1.8%;min-width:68px;padding:4px 7px}
  .solo-invite-layer{padding-top:7vh}.solo-invite-card{width:min(310px,70vw);padding:10px 14px}.solo-invite-card h2{font-size:15px}.solo-invite-card p{font-size:11px}.solo-invite-card>strong{font-size:23px;margin:0 0 6px}.solo-invite-card button{padding:6px}
  .solo-status{top:10%;padding:5px 15px}.solo-status strong{font-size:21px}
}

/* Giữ căn chỉnh biểu mẫu đăng nhập ổn định từ nhánh 1.0.14-r1. */
.auth-card.login-mode .auth-content,.auth-card.register-mode .auth-content{padding-top:clamp(4px,.8vh,7px);padding-bottom:clamp(18px,3.1vh,25px)}
.auth-content .tabs{transform:translateY(clamp(3px,.7vh,6px));margin-bottom:clamp(4px,.75vh,7px)!important}
.combat-controls button:focus,.combat-controls button:focus-visible{outline:none!important;box-shadow:none!important}
.combat-controls .attack:disabled,.combat-controls .skill-button:disabled{opacity:1!important}
.combat-controls .attack,.combat-controls .skill-button{transition:transform .08s ease;will-change:transform}
@media(max-width:800px){.topbar{grid-template-columns:minmax(220px,29vw) 1fr}.topbar .player-card.hud-v66{width:min(255px,29vw);min-width:220px}}
@media(max-height:480px){.topbar .player-card.hud-v66{width:min(255px,29vw);min-width:220px}}

/* ELYON 1.0.3 — Kinh Thành, bản đồ khu vực và trạng thái chạm sạch */
html,body,*{-webkit-tap-highlight-color:transparent}
button,a,canvas,[role="button"]{-webkit-appearance:none;appearance:none;outline:0!important;touch-action:manipulation}
button:focus,button:focus-visible,a:focus,a:focus-visible,canvas:focus,canvas:focus-visible,[role="button"]:focus,[role="button"]:focus-visible{outline:0!important}
.combat-controls .skill-button{opacity:1!important;animation:none!important}
.combat-controls .skill-button[aria-disabled="true"]{filter:drop-shadow(0 6px 9px rgba(0,0,0,.75)) grayscale(.12)}
.combat-controls .skill-button.cooling{opacity:1!important;animation:none!important}
.return-capital{pointer-events:auto;position:absolute;right:2%;top:10%;z-index:14;padding:8px 16px;border:1px solid #efd28b;border-radius:9px;background:linear-gradient(#294e70,#10263b);color:#fff2c7;font:900 11px Georgia,serif;box-shadow:0 5px 18px rgba(0,0,0,.5)}
.capital-map-layer{z-index:48;background:rgba(2,8,12,.80)}
.capital-map-card{width:min(850px,92vw);max-height:88vh;padding:18px;border:2px solid #d4b36a;border-radius:18px;background:linear-gradient(145deg,rgba(10,28,39,.98),rgba(22,10,17,.98));box-shadow:0 25px 90px #000;color:#eef9fa}
.capital-map-card>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,225,158,.25);padding-bottom:10px}.capital-map-card h2{margin:2px 0 0;color:#ffe2a0;font:900 clamp(19px,2.4vw,30px) Georgia,serif}.capital-map-card header small{color:#8ed7f2;font-weight:900;letter-spacing:.16em}.capital-map-card>p{margin:10px 0 0;color:#b9d1d5;font-size:11px;text-align:center}
.capital-map-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:14px}.capital-zone{position:relative;min-height:116px;padding:14px;border:1px solid #466c77;border-radius:13px;background:linear-gradient(150deg,rgba(19,62,73,.95),rgba(7,19,29,.98));color:#fff;text-align:left;overflow:hidden}.capital-zone strong,.capital-zone span{position:relative;z-index:1;display:block}.capital-zone strong{color:#fff0b7;font:900 clamp(13px,1.5vw,18px) Georgia,serif}.capital-zone span{margin-top:7px;color:#aee7d9;font-size:11px}.capital-zone.unlocked:after{content:"ĐÃ MỞ";position:absolute;right:7px;bottom:7px;color:#78ffc2;font-size:9px;font-weight:1000}.capital-zone.locked{filter:grayscale(.5);color:#9eaaad;background:linear-gradient(150deg,#21282a,#0c1114)}.capital-zone.locked span{color:#ffbe9f}.capital-zone.locked:after{content:"CHƯA CẬP NHẬT";position:absolute;right:7px;bottom:7px;color:#ffba98;font-size:9px;font-weight:1000}
.npc-dialogue-panel{pointer-events:auto;position:absolute;z-index:47;left:50%;bottom:3.5%;display:grid;grid-template-columns:minmax(92px,18%) 1fr;width:min(900px,92vw);min-height:118px;transform:translateX(-50%);overflow:hidden;border:2px solid #d9b86b;border-radius:17px;background:linear-gradient(145deg,rgba(8,28,37,.97),rgba(18,9,14,.98));box-shadow:0 18px 60px #000;color:#fff}.npc-dialogue-portrait{min-height:118px;background-image:url("assets/npcs/npc-dialogue-front.png");background-repeat:no-repeat;background-size:200% 100%;background-position:0 center;filter:drop-shadow(4px 0 6px #000)}.npc-dialogue-panel[data-npc="mira"] .npc-dialogue-portrait{background-position:100% center}.npc-dialogue-copy{align-self:center;padding:13px 18px}.npc-dialogue-copy strong{display:block;margin-bottom:5px;color:#ffe1a0;font:900 clamp(17px,2vw,25px) Georgia,serif}.npc-dialogue-copy p{min-height:1.5em;margin:0;color:#f1f7f7;font-size:clamp(14px,1.6vw,20px)}.npc-dialogue-copy small{display:block;margin-top:10px;color:#9ec4c8;text-align:right;font-size:9px;letter-spacing:.08em}
@media(max-width:720px){.capital-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capital-map-card{padding:12px}.capital-zone{min-height:88px}.npc-dialogue-panel{grid-template-columns:95px 1fr;min-height:92px}.npc-dialogue-portrait{min-height:92px}.npc-dialogue-copy{padding:9px 12px}.return-capital{top:9%;right:1.5%}}
@media(max-height:480px){.capital-map-card{max-height:96vh;padding:9px 12px}.capital-map-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:8px}.capital-zone{min-height:66px;padding:8px}.capital-map-card>p{display:none}.npc-dialogue-panel{bottom:2%;min-height:84px}.npc-dialogue-portrait{min-height:84px}.npc-dialogue-copy p{font-size:13px}.return-capital{top:12%;padding:6px 11px}}

/* ELYON 1.0.3 — một nút tương tác chung và quảng trường xoay góc */
html,body,*{-webkit-tap-highlight-color:transparent!important}
button,a,input,canvas,[role="button"]{-webkit-tap-highlight-color:transparent!important;outline:none!important}
button:focus,button:focus-visible,a:focus,a:focus-visible,input:focus,input:focus-visible,canvas:focus,canvas:focus-visible,[role="button"]:focus,[role="button"]:focus-visible{outline:none!important}
.world-action,.rotate-view{pointer-events:auto;position:absolute;z-index:16;left:50%;display:grid;place-items:center;width:clamp(210px,27vw,350px);aspect-ratio:1100/340;padding:0 10%;transform:translateX(-50%);border:0!important;background:transparent url("assets/ui/world-interaction-button.png") center/100% 100% no-repeat!important;color:#fff0c4;font:900 clamp(10px,1.25vw,16px) Georgia,serif;letter-spacing:.035em;text-align:center;text-shadow:0 2px 4px #000;filter:drop-shadow(0 7px 11px rgba(0,0,0,.72));box-shadow:none!important;white-space:nowrap}
.world-action{bottom:5.5%}.rotate-view{bottom:18%;width:clamp(170px,21vw,280px);color:#dff6ff;font-size:clamp(9px,1.05vw,13px)}
.world-action:active,.rotate-view:active{transform:translateX(-50%) scale(.96)}
.combat-controls .skill-button[aria-disabled="true"]{filter:drop-shadow(0 6px 9px rgba(0,0,0,.75))!important}
.combat-controls .skill-button.cooling{filter:drop-shadow(0 6px 9px rgba(0,0,0,.75)) grayscale(.16)!important}
.skill-cooldown{font-variant-numeric:tabular-nums;line-height:1}
@media(max-height:480px){.world-action{bottom:3%;width:clamp(180px,24vw,265px)}.rotate-view{bottom:19%;width:clamp(150px,18vw,220px)}}

/* ELYON 1.0.4 — la bàn ba nấc, sáu chức năng và bảng Vượt Ải */
.world-action{left:auto;right:3.2%;top:50%;bottom:auto;transform:translateY(-50%);width:clamp(205px,22vw,310px);padding:0 11%;line-height:1.15;white-space:normal}
.world-action:active{transform:translateY(-50%) scale(.96)}

.city-dock{pointer-events:auto;position:absolute;z-index:15;left:50%;bottom:1.2%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(7px,.8vw,13px);width:min(920px,76vw);transform:translateX(-50%);transition:transform .3s ease,opacity .22s ease;filter:drop-shadow(0 8px 13px rgba(0,0,0,.72))}
.city-dock.solo-away{transform:translate(-50%,calc(100% + 90px));opacity:0;pointer-events:none}
.city-tools{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,.65vw,11px)}
.city-tool{width:clamp(51px,5.7vw,72px);min-width:0;padding:0;border:0;background:transparent;color:#fff1c3;text-align:center;text-shadow:0 2px 4px #000;filter:drop-shadow(0 4px 7px rgba(0,0,0,.72));transition:transform .12s ease}
.city-tool:active{transform:scale(.93)}
.city-tool-icon{display:grid;place-items:center;width:100%;aspect-ratio:1;margin:auto;border:2px solid #d9bd75;border-radius:50%;background:radial-gradient(circle at 35% 27%,#1a78af,#083b69 52%,#061d36 76%,#030b14);box-shadow:inset 0 0 0 3px rgba(5,18,31,.78),inset 0 0 16px rgba(83,199,255,.36),0 0 0 2px rgba(24,41,61,.9);font:900 clamp(21px,2.6vw,34px) Georgia,serif;color:#fff6d4}
.city-tool strong{display:block;margin-top:3px;font-size:clamp(7px,.66vw,10px);line-height:1.05;white-space:nowrap}

.view-compass{--needle-angle:-45deg;position:relative;flex:0 0 clamp(104px,10vw,132px);width:clamp(104px,10vw,132px);aspect-ratio:1;touch-action:none}
.joystick,#joystick-knob{touch-action:none}
.view-compass.compass-unavailable{opacity:.42;filter:grayscale(.55);pointer-events:none}
.compass-face{position:absolute;inset:6% 6% 12%;border:3px solid #d7b96e;border-radius:50%;background:radial-gradient(circle,#173b58 0 25%,#0a2137 26% 49%,#03111e 50% 100%);box-shadow:inset 0 0 0 5px #06111d,inset 0 0 25px rgba(82,184,237,.26),0 0 0 2px #2b4860,0 7px 18px #000;overflow:hidden}
.compass-face:before,.compass-face:after{content:"";position:absolute;inset:10%;border:1px solid rgba(114,211,255,.38);border-radius:50%}.compass-face:after{inset:24%;border-color:rgba(239,205,121,.4)}
.compass-ring{position:absolute;inset:2%;border-radius:50%;background:conic-gradient(from 337.5deg,rgba(94,202,255,.16) 0 15deg,transparent 15deg 37deg,rgba(255,219,132,.2) 37deg 53deg,transparent 53deg 75deg,rgba(94,202,255,.16) 75deg 90deg,transparent 90deg);opacity:.9}
.compass-needle{position:absolute;z-index:2;left:calc(50% - 3px);top:14%;width:6px;height:42%;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#886323,#fff0a4 52%,#9e7129);clip-path:polygon(50% 0,100% 23%,68% 100%,32% 100%,0 23%);transform:rotate(var(--needle-angle));transform-origin:50% 92%;transition:transform .28s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 5px #7edcff)}
.compass-gem{position:absolute;z-index:3;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:2px solid #e9d28a;background:linear-gradient(135deg,#56d9ff,#0754aa);box-shadow:0 0 10px #3ccfff}
.view-snap{position:absolute;z-index:4;display:grid;place-items:center;width:24%;aspect-ratio:1;padding:0;border:2px solid #8d7847;border-radius:50%;background:#09192a;color:#9ecbe2;font:900 clamp(9px,1vw,13px) Georgia,serif;box-shadow:0 3px 8px #000;transition:.16s}
.view-snap-1{left:1%;top:39%}.view-snap-2{left:38%;top:-2%}.view-snap-3{right:1%;top:39%}
.view-snap.selected{border-color:#fff0a4;background:radial-gradient(circle,#45aee1,#07539a 58%,#06192c);color:#fff6c7;box-shadow:0 0 0 3px rgba(246,212,119,.22),0 0 14px #42caff;transform:scale(1.12)}
.view-compass>small{position:absolute;z-index:5;left:50%;bottom:2%;transform:translateX(-50%);min-width:72%;padding:2px 7px;border:1px solid rgba(225,195,115,.62);border-radius:8px;background:rgba(3,14,25,.88);color:#fff1c4;font:900 clamp(7px,.7vw,10px) Georgia,serif;text-align:center;letter-spacing:.07em;white-space:nowrap}

.combat-controls{transition:transform .3s ease,opacity .22s ease}
.combat-controls.city-combat-hidden{transform:translateY(calc(100% + 110px));opacity:0;pointer-events:none}

.quest-board-layer,.capital-map-layer{z-index:49;background:rgba(1,7,12,.84);backdrop-filter:blur(4px)}
.quest-board-card,.world-map-card{position:relative;width:min(96vw,calc(94vh * 1.5));aspect-ratio:3/2;overflow:hidden;color:#142132;filter:drop-shadow(0 25px 55px #000)}
.quest-board-art,.world-map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.quest-board-card>header,.world-map-card>header{position:absolute;z-index:3;left:50%;top:4.5%;display:flex;align-items:center;justify-content:center;transform:translateX(-50%);text-align:center;color:#fff0bd;text-shadow:0 2px 4px #000}
.quest-board-card>header small,.world-map-card>header small{display:block;color:#a6ddf2;font-size:clamp(7px,.7vw,10px);letter-spacing:.15em}.quest-board-card>header h2,.world-map-card>header h2{margin:1px 0 0;font:900 clamp(15px,2vw,27px) Georgia,serif;letter-spacing:.06em}
.quest-board-card .modal-close,.world-map-card .modal-close{position:fixed;right:5.5%;top:5.2%;z-index:5;background:linear-gradient(#4d2630,#261018);color:#fff5d5}

.quest-list{position:absolute;z-index:3;left:11.5%;top:23%;display:grid;gap:clamp(4px,.55vw,8px);width:21%;max-height:63%;overflow:auto;padding:2px}
.quest-list button{padding:clamp(6px,.8vw,11px);border:1px solid rgba(101,66,25,.66);border-radius:7px;background:rgba(236,210,154,.93);box-shadow:0 3px 8px rgba(50,27,8,.35);color:#39230f;text-align:left}
.quest-list button strong,.quest-list button small{display:block}.quest-list button strong{font:900 clamp(9px,1vw,14px) Georgia,serif}.quest-list button small{margin-top:2px;color:#70451d;font-size:clamp(7px,.62vw,9px)}

/* ELYON 1.0.5 — túi đồ, paper-doll và quyền riêng tư khi xem người chơi khác */
.character-card{width:min(1500px,96vw);height:min(820px,94vh);padding:clamp(9px,1.1vw,18px);border-color:rgba(229,194,119,.68);background:radial-gradient(circle at 24% 58%,rgba(23,74,94,.24),transparent 33%),linear-gradient(145deg,rgba(8,25,34,.985),rgba(3,12,18,.99));box-shadow:0 24px 100px #000,inset 0 0 46px rgba(70,155,180,.08)}
.character-card>header{min-height:62px;padding:4px 8px 12px;border-bottom-color:rgba(229,194,119,.28)}
.profile-heading{display:grid;gap:2px}.profile-view-note{margin-top:2px;color:#e8c982!important;font-weight:800}.character-card .modal-close{width:clamp(38px,3.7vw,52px);height:clamp(38px,3.7vw,52px);border-color:#a8864e;background:linear-gradient(#173147,#081621);color:#ffe4a4}
.character-layout{grid-template-columns:minmax(420px,.95fr) minmax(520px,1.25fr);gap:clamp(9px,1.1vw,18px);height:calc(100% - 66px);padding-top:clamp(8px,1vw,16px)}
.equipment-side,.inventory-side{border-color:rgba(212,176,99,.34);border-radius:16px;background:linear-gradient(160deg,rgba(8,30,39,.78),rgba(2,12,17,.86));box-shadow:inset 0 0 34px rgba(71,151,178,.07)}
.paperdoll{position:relative;display:grid;grid-template-columns:clamp(64px,17%,96px) minmax(150px,1fr) clamp(64px,17%,96px);grid-template-rows:repeat(3,minmax(0,1fr)) auto;gap:clamp(5px,.75vw,12px) clamp(10px,1.4vw,22px);width:100%;height:100%;min-height:0;padding:clamp(10px,1.25vw,22px)}
.paperdoll:before{content:"";position:absolute;z-index:0;left:19%;right:19%;top:5%;bottom:4%;border:1px solid rgba(86,177,213,.17);border-radius:50%;background:radial-gradient(circle,rgba(31,106,140,.13),transparent 66%);box-shadow:inset 0 0 42px rgba(35,129,166,.08);pointer-events:none}
.character-figure{position:relative;z-index:1;grid-column:2;grid-row:1/4;align-self:stretch;justify-self:stretch;width:auto;height:auto;transform:none;background-image:url("assets/ui/character-preview-valoria.png");background-repeat:no-repeat;background-size:contain;background-position:center bottom;filter:drop-shadow(0 13px 13px rgba(0,0,0,.86));pointer-events:none}
.equipment-slot{position:relative;z-index:2;align-self:center;justify-self:center;display:block;width:min(100%,92px);height:auto;aspect-ratio:1;padding:0 4px 23px;border:1px solid #8c7449;border-radius:11px;background:linear-gradient(145deg,rgba(27,58,69,.96),rgba(5,18,25,.98));color:#ead7a3;font-size:clamp(9px,.78vw,12px);overflow:hidden;box-shadow:inset 0 0 17px rgba(95,181,211,.09),0 5px 15px rgba(0,0,0,.35)}
.equipment-slot.equipped{border-color:#e1b85f;box-shadow:inset 0 0 18px rgba(95,181,211,.16),0 0 11px rgba(229,182,83,.18),0 5px 15px rgba(0,0,0,.4)}
.equipment-slot img{display:block;width:100%;height:100%;padding:5px;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px rgba(0,0,0,.72))}
.equipment-slot span{position:absolute;left:0;right:0;bottom:0;display:grid;place-items:center;min-height:22px;padding:2px 3px;border:0;border-top:1px solid rgba(205,169,91,.35);border-radius:0;background:rgba(1,8,12,.92);line-height:1.05;text-align:center;white-space:normal}
.slot-helmet{grid-column:1;grid-row:1}.slot-armor{grid-column:1;grid-row:2}.slot-pants{grid-column:1;grid-row:3}.slot-weapon{grid-column:3;grid-row:1}.slot-necklace{grid-column:3;grid-row:2}.slot-ring{grid-column:3;grid-row:3}.slot-shoes{grid-column:2;grid-row:4;transform:none;width:clamp(58px,29%,86px);margin-top:-4px}
.inventory-side{position:relative;padding:clamp(8px,1vw,14px)}.inventory-title{margin:0 0 8px;color:#f0d291;font:900 clamp(16px,1.7vw,26px) Georgia,serif;letter-spacing:.08em;text-align:center}.inventory-tabs{gap:clamp(5px,.7vw,10px)}.inventory-tabs button{min-height:42px;padding:7px;border-color:#466e7c;border-radius:8px;background:linear-gradient(#142f3d,#091a23);color:#c5dbe0;font-family:Georgia,serif}.inventory-tabs button.active{border-color:#e1b85f;background:linear-gradient(#245f7a,#12364a);color:#ffe3a0;box-shadow:inset 0 0 12px rgba(255,211,117,.1)}
.inventory-grid{grid-template-columns:repeat(5,minmax(70px,1fr));grid-auto-rows:minmax(92px,1fr);gap:clamp(6px,.7vw,10px);align-content:start;padding:clamp(8px,1vw,14px) 2px 2px}.inventory-grid .item-card,.inventory-cell{width:100%;min-width:0;min-height:0;aspect-ratio:1;border:1px solid #5f7580;border-radius:9px;background:linear-gradient(145deg,rgba(18,42,53,.96),rgba(4,15,22,.98));box-shadow:inset 0 0 15px rgba(76,158,188,.06)}.inventory-grid .item-card{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:5px;overflow:hidden}.inventory-grid .item-card img{width:100%;height:100%;min-height:0;padding:3px;object-fit:contain;object-position:center}.inventory-grid .item-card strong{min-height:19px;padding:3px 2px 1px;border-top:1px solid rgba(213,175,92,.24);overflow:hidden;color:#f0dfb2;font-size:clamp(8px,.7vw,11px);text-overflow:ellipsis;white-space:nowrap}.inventory-cell.empty{position:relative;opacity:.72}.inventory-cell.empty:after{content:"";position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;border:1px solid rgba(184,154,91,.24);transform:translate(-50%,-50%) rotate(45deg)}.inventory-empty{position:absolute;left:50%;bottom:3%;z-index:2;margin:0;transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.character-card.inspection-mode{width:min(820px,92vw)}.character-card.inspection-mode .character-layout{grid-template-columns:minmax(440px,720px);justify-content:center}.character-card.inspection-mode .equipment-side{width:100%}
@media(max-width:900px){.character-card{width:98vw;height:96vh}.character-layout{grid-template-columns:minmax(320px,46%) minmax(380px,54%);gap:7px}.paperdoll{grid-template-columns:clamp(48px,17%,66px) minmax(110px,1fr) clamp(48px,17%,66px);gap:4px 7px;padding:7px}.equipment-slot{width:min(100%,62px);padding-bottom:18px;border-radius:7px}.equipment-slot span{min-height:18px;font-size:8px}.slot-shoes{width:54px}.inventory-title{margin-bottom:4px}.inventory-tabs button{min-height:31px;padding:4px}.inventory-grid{grid-template-columns:repeat(5,minmax(52px,1fr));grid-auto-rows:minmax(60px,1fr);gap:4px;padding-top:5px}}
@media(max-height:500px){.character-card{height:98vh;padding:5px}.character-card>header{min-height:43px;padding:1px 5px 5px}.character-card h2{font-size:18px}.character-card header span{font-size:9px}.profile-eliminations strong{font-size:18px}.character-card .modal-close{width:34px;height:34px;font-size:21px}.character-layout{height:calc(100% - 45px);padding-top:5px}.paperdoll{padding:5px}.equipment-slot{width:min(100%,52px);padding-bottom:16px}.equipment-slot span{min-height:16px;font-size:7px}.slot-shoes{width:46px}.inventory-title{display:none}.inventory-tabs button{min-height:27px;font-size:10px}.inventory-grid{grid-auto-rows:minmax(52px,1fr);padding-top:4px}.inventory-grid .item-card strong{min-height:14px;padding:1px;font-size:7px}}

/* ELYON 1.0.5 hoàn chỉnh — thanh ảnh trong suốt, ba ảnh góc và cổng hai bản đồ */
.world-action{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.city-dock{display:grid;grid-template-columns:31.8% 36.4% 31.8%;align-items:stretch;gap:0;width:min(1280px,96vw);aspect-ratio:5/1;bottom:.2%;padding:0;background:none;isolation:isolate;filter:drop-shadow(0 8px 13px rgba(0,0,0,.76))}
.city-dock:before{content:"";position:absolute;z-index:0;inset:0;background:transparent url("assets/ui/capital-bottom-hud-v2-1.0.5.png") center center/100% auto no-repeat;pointer-events:none}
.city-tools{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:0;width:100%;height:100%}
.city-tool{position:relative;width:100%;height:100%;padding:0;border:0!important;background:transparent!important;filter:none;box-shadow:none!important}
.city-tool strong{position:absolute;left:50%;bottom:0;display:grid;place-items:center;width:96%;min-height:17%;margin:0;padding:2px 3px;transform:translateX(-50%);border:1px solid rgba(225,188,104,.7);border-radius:7px;background:linear-gradient(180deg,rgba(13,48,77,.94),rgba(3,17,34,.96));color:#fff1c3;font:900 clamp(7px,.7vw,11px)/1.05 Georgia,serif;letter-spacing:.015em;text-align:center;text-shadow:0 2px 4px #000;white-space:nowrap}
.city-tool:active strong{transform:translateX(-50%) scale(.94)}
.view-compass{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2%;align-items:stretch;width:100%;height:100%;padding:17% 2.7% 17%;aspect-ratio:auto;touch-action:none}
.view-compass.compass-unavailable{opacity:.42;filter:grayscale(.55);pointer-events:none}
.view-snap{position:relative;inset:auto!important;display:block;width:100%;height:100%;padding:0;border:0;border-radius:9%;overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 2px rgba(226,188,99,.55),inset 0 0 18px rgba(0,0,0,.42);filter:saturate(.72) brightness(.72);transition:filter .16s ease,transform .16s ease,box-shadow .16s ease}
.view-snap-1{background-image:url("assets/capital/plaza-angle-1.png")}.view-snap-2{background-image:url("assets/capital/plaza-angle-2.png")}.view-snap-3{background-image:url("assets/capital/plaza-angle-3.png")}
.view-snap span{position:absolute;left:50%;bottom:1%;display:grid;place-items:center;width:clamp(19px,2vw,29px);aspect-ratio:1;transform:translateX(-50%);border:2px solid #efd482;border-radius:50%;background:radial-gradient(circle,#1d7eb4,#06345d 68%,#031629);color:#fff1b9;font:900 clamp(8px,.85vw,12px) Georgia,serif;text-shadow:0 1px 3px #000;box-shadow:0 0 8px rgba(85,197,255,.72)}
.view-snap.selected{border:0;background-color:transparent;color:#fff;box-shadow:inset 0 0 0 3px #ffe092,inset 0 0 18px rgba(78,204,255,.48),0 0 15px rgba(63,199,255,.82);filter:saturate(1.18) brightness(1.08);transform:scale(1.025)}
.view-compass>small{display:none}
.forest-return{pointer-events:auto;position:absolute;z-index:18;right:3%;top:24%;min-width:112px;padding:8px 12px;border:1px solid #d5b76d;border-radius:10px;background:linear-gradient(#244f67,#0b2538);color:#fff0c5;font-weight:900;box-shadow:0 7px 20px rgba(0,0,0,.64)}
.portal-choice-card{width:min(90vw,430px);padding:24px;border:1px solid #c9a85d;border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(36,111,151,.28),transparent 42%),linear-gradient(160deg,#102f42,#061522);box-shadow:0 24px 80px #000,inset 0 0 30px rgba(76,183,221,.08);text-align:center}
.portal-choice-card h2{margin:0;color:#ffe3a1;font:900 25px Georgia,serif;letter-spacing:.06em}.portal-choice-card p{margin:7px 0 18px;color:#b9d7e0}.portal-destination{display:block;width:100%;margin:10px 0;padding:14px;border:1px solid #d6b664;border-radius:10px;background:linear-gradient(#245f82,#0c3453);color:#fff2c5;font:900 17px Georgia,serif;letter-spacing:.09em;box-shadow:inset 0 0 15px rgba(80,198,239,.15)}
@media(max-height:500px){.city-dock{width:min(1050px,91vw);bottom:-1.5%}.city-tool strong{font-size:7px;min-height:15%}.view-snap span{width:18px}.forest-return{top:27%;padding:6px 10px}.portal-choice-card{padding:14px}.portal-choice-card h2{font-size:19px}.portal-destination{margin:6px 0;padding:9px}}
.quest-list button.selected{border-color:#17639c;background:#f7e8bd;box-shadow:0 0 0 3px rgba(34,131,184,.28),0 4px 11px rgba(50,27,8,.46)}
.quest-list button.accepted:after{content:"ĐÃ NHẬN";float:right;margin-top:3px;color:#176136;font-size:8px;font-weight:1000}
.quest-detail{position:absolute;z-index:3;left:36.5%;top:31%;display:flex;flex-direction:column;width:28%;height:42%;padding:clamp(6px,1.1vw,16px);color:#39230f;text-align:center}
.quest-detail>small{color:#875820;font-size:clamp(7px,.65vw,10px);font-weight:1000;letter-spacing:.14em}.quest-detail h3{margin:clamp(3px,.5vw,8px) 0;color:#3f260e;font:900 clamp(13px,1.7vw,22px) Georgia,serif}.quest-detail p{flex:1;margin:0;overflow:auto;color:#4c3521;font-size:clamp(8px,.8vw,12px);line-height:1.35;text-align:left}.quest-reward{display:flex;justify-content:space-between;gap:8px;margin-top:4px;padding-top:4px;border-top:1px solid rgba(95,60,24,.35);font-size:clamp(8px,.75vw,11px)}.quest-reward strong{color:#8f5315}
.quest-accept{margin-top:5px;padding:clamp(5px,.55vw,8px);border:1px solid #e7c771;border-radius:8px;background:linear-gradient(#1d73a8,#0c3e71);color:#fff5cb;font:900 clamp(8px,.8vw,11px) Georgia,serif;box-shadow:0 3px 8px rgba(20,42,70,.4)}
.quest-accept:disabled{opacity:.62}

.world-map-card>p{position:absolute;z-index:3;left:50%;bottom:3.2%;transform:translateX(-50%);margin:0;padding:4px 12px;border-radius:12px;background:rgba(2,15,28,.78);color:#d5ebf5;font-size:clamp(7px,.72vw,10px);white-space:nowrap}
.world-map-zones{position:absolute;z-index:3;inset:0}
.world-zone{position:absolute;min-width:clamp(112px,13vw,190px);padding:clamp(6px,.75vw,11px);transform:translate(-50%,-50%);border:2px solid #e2c576;border-radius:12px;background:linear-gradient(145deg,rgba(11,63,94,.93),rgba(3,23,43,.94));box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 12px rgba(92,199,240,.2);color:#fff4c8;text-align:center;text-shadow:0 2px 4px #000}
.world-zone strong,.world-zone span{display:block}.world-zone strong{font:900 clamp(9px,1vw,14px) Georgia,serif}.world-zone span{margin-top:2px;color:#c8ecf9;font-size:clamp(7px,.68vw,10px)}
.world-zone.unlocked{border-color:#8dffbd;background:linear-gradient(145deg,rgba(18,110,83,.95),rgba(5,45,48,.95));box-shadow:0 0 16px rgba(89,255,178,.72),0 6px 18px rgba(0,0,0,.55)}
.world-zone.locked{border-color:#7d8792;background:linear-gradient(145deg,rgba(20,29,39,.93),rgba(5,10,17,.95));filter:saturate(.55)}
.world-zone.locked:before{content:"🔒";position:absolute;right:-9px;top:-12px;display:grid;place-items:center;width:28px;aspect-ratio:1;border:1px solid #c1b279;border-radius:50%;background:#111927;font-size:14px}
.zone-mountains{left:22%;top:26%}.zone-forest{left:23%;top:68%}.zone-desert{left:57%;top:49%}.zone-ice{left:73%;top:24%}.zone-lava{left:72%;top:74%}

@media(max-height:480px){
  .world-action{right:2%;top:47%;width:clamp(170px,20vw,235px)}
  .city-dock{bottom:.5%;width:min(780px,75vw);gap:5px}.city-tools{gap:4px}.city-tool{width:46px}.city-tool strong{font-size:7px}.city-tool-icon{font-size:20px}
  .view-compass{flex-basis:86px;width:86px}.view-snap{font-size:8px}.view-compass>small{font-size:6px}
  .quest-board-card,.world-map-card{width:min(94vw,calc(96vh * 1.5))}.quest-board-card>header,.world-map-card>header{top:3.5%}.quest-board-card>header h2,.world-map-card>header h2{font-size:14px}
  .quest-list{gap:3px}.quest-list button{padding:5px}.quest-detail{top:29%;height:45%}.quest-detail h3{font-size:12px}.quest-detail p{font-size:8px}.quest-accept{padding:4px}
  .world-zone{min-width:100px;padding:5px}.world-map-card>p{bottom:2%;font-size:7px}
}

@media(max-height:480px){
  .city-dock{display:grid;grid-template-columns:31.8% 36.4% 31.8%;width:min(1050px,91vw);gap:0;bottom:-1.5%}
  .city-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;height:100%}
  .city-tool{width:100%;height:100%}.city-tool strong{font-size:7px;min-height:15%}
  .view-compass{display:grid;grid-template-columns:repeat(3,1fr);flex-basis:auto;width:100%;height:100%;padding:17% 2.7% 17%;gap:2.2%}
  .view-snap{width:100%;height:100%}.view-snap span{width:18px}
}

/* ELYON 1.0.6 FINAL — các luật dưới đây phải là lớp giao diện cuối cùng */
.hud-v66 .player-level{top:68%}
.world-action{overflow:visible;text-overflow:clip}
.world-action span{display:block;width:100%;transform:translateX(-7%);font-size:clamp(9px,1.08vw,14px);line-height:1.05;white-space:nowrap}
.world-action.long-label span{font-size:clamp(8px,.94vw,12px)}
.world-action.very-long-label span{font-size:clamp(7px,.8vw,10px);letter-spacing:0}

.city-dock{width:min(900px,64vw);bottom:1.1%}
.city-tool strong{display:none!important}
.view-compass{padding:24% 7.2% 15%;gap:2.8%}
.view-snap{border-radius:7%;background-position:center;background-size:cover;filter:saturate(.82) brightness(.82);box-shadow:inset 0 0 0 2px rgba(226,188,99,.52),inset 0 0 12px rgba(0,0,0,.3)}
.view-snap.selected{position:relative;background-color:transparent;color:#fff;filter:saturate(1.08) brightness(1.02);transform:none;box-shadow:inset 0 0 0 2px #ffe092,inset 0 0 15px rgba(67,181,231,.2),0 0 8px rgba(63,199,255,.48)}
.view-snap.selected:after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(25,137,196,.14);pointer-events:none}
.view-snap span{z-index:2}

.character-card{position:relative;width:min(1774px,98vw,calc(96vh * 2));height:auto;aspect-ratio:1774/887;padding:0;overflow:hidden;border:0;border-radius:0;background:transparent url("assets/ui/inventory-frame-fantasy-1.0.6.png") center/100% 100% no-repeat;box-shadow:0 24px 100px #000;color:#fff}
.character-card>header{position:absolute;z-index:12;inset:0;min-height:0;padding:0;border:0;pointer-events:none}
.profile-heading{position:absolute;left:24%;top:3.2%;width:30%;display:block;text-align:center;text-shadow:0 2px 5px #000;pointer-events:none}
.profile-heading h2{margin:0;color:#f4d48b;font-size:clamp(10px,1.2vw,20px)}
.profile-heading span{display:block;color:#b8d8e5;font-size:clamp(7px,.75vw,12px)}
.profile-eliminations{position:absolute;left:34%;bottom:4.2%;min-width:18%;display:flex;align-items:center;justify-content:center;gap:8px;color:#bad8e5;font-size:clamp(7px,.7vw,11px);text-shadow:0 2px 4px #000;pointer-events:none}
.profile-eliminations strong{font-size:clamp(11px,1.35vw,22px);color:#f2d080}
.character-card .modal-close{position:absolute;right:1.15%;top:1.15%;width:5.15%;height:auto;aspect-ratio:1;border:0;background:transparent;color:transparent;box-shadow:none;pointer-events:auto}
.character-layout{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.equipment-side{position:absolute;left:0;top:0;width:60%;height:100%;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.paperdoll{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0}
.paperdoll:before{display:none}
.character-figure{position:absolute;z-index:1;left:39%;top:9.5%;width:43%;height:70%;transform:none;background-position:center bottom;background-size:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.82))}
.equipment-slot{position:absolute;z-index:3;width:15.5%;height:auto;aspect-ratio:1;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.equipment-slot.equipped{border:0;box-shadow:none}
.equipment-slot img{position:absolute;inset:11%;display:block;width:78%;height:78%;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px rgba(0,0,0,.8))}
.equipment-slot span{display:none}
.slot-weapon{left:4.6%;top:37.7%}.slot-helmet{left:23.5%;top:16.5%}.slot-armor{left:23.5%;top:40%}.slot-pants{left:23.5%;top:63%}.slot-necklace{left:82.1%;top:16.5%}.slot-ring{left:82.1%;top:40%}.slot-shoes{left:82.1%;top:63%;width:15.5%;margin:0;transform:none}

.inventory-side{position:absolute;left:59.7%;top:0;width:40.3%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.inventory-title{display:none}
.inventory-tabs{position:absolute;z-index:5;left:5.2%;right:6.4%;top:6.5%;height:9%;display:grid;grid-template-columns:1fr 1fr;gap:3.8%}
.inventory-tabs button{min-height:0;padding:0 5px;border:0;border-radius:8px;background:linear-gradient(#202426,#0e1317)!important;color:#c9d4d9;font:900 clamp(7px,.8vw,13px) Georgia,serif;text-shadow:0 2px 4px #000;box-shadow:inset 0 0 10px rgba(0,0,0,.4)}
.inventory-tabs button.active{border:0;background:linear-gradient(#125f9a,#07365f)!important;color:#ffe09a;box-shadow:inset 0 0 12px rgba(83,196,255,.24)}
.inventory-grid{position:absolute;left:6.4%;right:6.1%;top:19.3%;bottom:20.5%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2.4% 2.6%;padding:0;overflow:hidden}
.inventory-grid .item-card,.inventory-cell{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto;padding:9%;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.inventory-grid .item-card{display:block}
.inventory-grid .item-card img{display:block;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 5px #000)}
.inventory-grid .item-card strong,.inventory-grid .item-card small{display:none}
.inventory-cell.empty{opacity:1}.inventory-cell.empty:after{display:none}
.inventory-empty{left:50%;bottom:8.2%;width:78%;margin:0;transform:translateX(-50%);overflow:hidden;color:#b8cad2;font-size:clamp(7px,.75vw,12px);text-align:center;text-overflow:ellipsis;white-space:nowrap}

.character-card.inspection-mode{width:min(1064px,96vw,calc(96vh * 1.2));aspect-ratio:1064/887;background-position:left top;background-size:auto 100%}
.character-card.inspection-mode .character-layout{display:block;width:100%;height:100%}
.character-card.inspection-mode .equipment-side{width:100%}
.character-card.inspection-mode .character-figure{left:39%;width:43%}
.character-card.inspection-mode .modal-close{right:1.5%;top:1.5%;width:7%;border:1px solid #a8864e;border-radius:50%;background:linear-gradient(#173147,#081621);color:#ffe4a4;font-size:clamp(20px,3.2vw,34px)}

@media(max-height:500px){
  .city-dock{width:min(760px,62vw);bottom:.6%}
  .view-compass{padding:24% 7.2% 15%;gap:2.8%}
  .character-card{width:min(1774px,98vw,calc(97vh * 2))}
}

/* 1.0.15 final lock: the map header spans the card so X is anchored to its top-right. */
.world-map-card>header{position:absolute;left:0;right:0;top:0;width:100%;height:100%;transform:none;pointer-events:none}
.world-map-card>header>div{position:absolute;left:50%;top:4.5%;transform:translateX(-50%);text-align:center;pointer-events:auto}
.world-map-card>header>.modal-close{position:absolute;left:auto;right:4.1%;top:4.8%;pointer-events:auto}

/* ELYON 1.0.7 END-OF-FILE LOCK */
.world-action{display:grid;place-items:center;padding:0 10.5%;text-align:center}
.world-action span{display:grid;place-items:center;width:100%;height:100%;transform:none!important;text-align:center}
.world-action.long-label span{font-size:clamp(8px,.94vw,12px)}
.world-action.very-long-label span{font-size:clamp(7px,.8vw,10px);letter-spacing:0}
.view-compass{overflow:hidden}
.view-snap{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;transform:none!important}
.view-snap.selected{background-color:transparent!important;filter:saturate(1.06) brightness(1.02);box-shadow:inset 0 0 0 2px #ffe092,inset 0 0 9px rgba(67,181,231,.16),0 0 7px rgba(63,199,255,.38)}
.view-snap.selected:after{background:rgba(25,137,196,.045)}
.world-map-card .modal-close{position:absolute;left:auto;right:4.1%;top:4.8%;width:clamp(30px,3.3vw,44px);height:auto;aspect-ratio:1;padding:0;border-radius:50%;font-size:clamp(19px,2.5vw,29px)}
.forest-return{right:2.2%;top:12.5%;min-width:76px;padding:5px 8px;border-radius:8px;font-size:clamp(8px,.76vw,11px)}
@media(max-height:480px){.forest-return{top:13.5%;right:1.8%;min-width:68px;padding:4px 7px}}

/* ELYON 1.0.8 END-OF-FILE LOCK — ảnh Góc, kính chọn và vùng bấm chính xác */
.view-compass{padding:12% 7.2% 10%;gap:2.8%;overflow:hidden}
.view-snap{width:100%;height:100%;overflow:hidden;clip-path:inset(0 round 7%);background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.view-snap-1{background-image:url("assets/capital/thumbnails/plaza-angle-1-thumb-1.0.8.png")}
.view-snap-2{background-image:url("assets/capital/thumbnails/plaza-angle-2-thumb-1.0.8.png")}
.view-snap-3{background-image:url("assets/capital/thumbnails/plaza-angle-3-thumb-1.0.8.png")}
.view-snap.selected{background-color:transparent!important;filter:saturate(1.04) brightness(1.015);box-shadow:inset 0 0 0 2px #ffe092,inset 0 0 7px rgba(67,181,231,.12),0 0 6px rgba(63,199,255,.32)}
.view-snap.selected:after{background:linear-gradient(135deg,rgba(190,236,255,.055),rgba(25,137,196,.015) 55%,rgba(255,255,255,.028))}

.city-tools{pointer-events:none;align-items:center;transform:translateY(5%)}
.city-tools-left{padding-left:16%;padding-right:0}
.city-tools-right{padding-left:4%;padding-right:12%}
.city-tool{pointer-events:auto;justify-self:center;align-self:center;width:83%;height:auto;aspect-ratio:1;clip-path:circle(48% at 50% 50%);touch-action:manipulation}

#interaction-panel.opening .interaction-card button{pointer-events:none}

@media(max-height:500px){
  .view-compass{padding:12% 7.2% 10%;gap:2.8%}
}

/* ELYON 1.0.13 — khóa chữ tương tác đúng tâm thật của khung trên mọi WebView */
.world-action{padding:0!important}
.world-action>#world-action-label{
  position:absolute!important;
  inset:0 10.5%!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:auto!important;
  height:auto!important;
  margin:0;
  padding:0;
  overflow:hidden;
  transform:none!important;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}

/* ELYON 1.0.15 — Túi hành trang, bảng chức năng quan trọng và Bang hội */

/* Túi dùng trực tiếp hình giao diện đã thiết kế; mọi vật phẩm nằm trong ô ảnh. */
.character-stats-button{
  position:absolute;
  z-index:8;
  left:4.7%;
  bottom:4.6%;
  width:18%;
  min-height:6.8%;
  padding:0 3%;
  border:1px solid rgba(224,190,110,.82);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(20,74,108,.92),rgba(5,31,54,.96));
  color:#ffe4a0;
  font:900 clamp(7px,.75vw,12px) Georgia,serif;
  letter-spacing:.06em;
  text-shadow:0 2px 4px #000;
  box-shadow:inset 0 0 12px rgba(82,192,238,.16),0 4px 12px rgba(0,0,0,.44);
  pointer-events:auto;
  touch-action:manipulation;
}
.character-stats-button:active{transform:scale(.96)}
.character-card.inspection-mode .character-stats-button{display:none}

.inventory-tabs{
  left:5.2%;
  right:6.4%;
  top:6.5%;
  height:9%;
  gap:3.8%;
}
.inventory-tabs button{
  display:grid;
  place-items:center;
  min-height:0;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#aab7bd;
  font:900 clamp(8px,.88vw,14px) Georgia,serif;
  letter-spacing:.065em;
  text-shadow:0 2px 5px #000;
  box-shadow:none!important;
  filter:none;
  touch-action:manipulation;
}
.inventory-tabs button.active{
  border:0!important;
  background:transparent!important;
  color:#ffe29b;
  text-shadow:0 2px 4px #000,0 0 9px rgba(71,196,255,.72);
  box-shadow:none!important;
}
.inventory-tabs button:active{transform:scale(.96)}

.inventory-grid{
  left:6.35%;
  right:6.05%;
  top:19.35%;
  bottom:20.45%;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:2.45% 2.55%;
  padding:0;
  overflow:hidden;
}
.inventory-grid .item-card,
.inventory-grid .inventory-cell,
.inventory-grid .item-card:hover,
.inventory-grid .item-card:focus,
.inventory-grid .item-card:active{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:8%;
  border:0!important;
  outline:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
}
.inventory-grid .item-card img{
  position:absolute;
  inset:10%;
  display:block;
  width:80%;
  height:80%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.82));
  pointer-events:none;
}
.inventory-grid .item-card .quantity{
  position:absolute;
  z-index:2;
  top:auto;
  right:8%;
  bottom:7%;
  min-width:18px;
  padding:1px 3px;
  border:0;
  border-radius:5px;
  background:rgba(0,0,0,.76);
  color:#fff2c3;
  font-size:clamp(7px,.68vw,11px);
  line-height:1.2;
  text-align:center;
  text-shadow:0 1px 3px #000;
}
.equipment-slot,
.equipment-slot.equipped,
.equipment-slot:focus,
.equipment-slot:active{
  border:0!important;
  outline:0;
  background:transparent!important;
  box-shadow:none!important;
}
.equipment-slot img{
  border:0;
  outline:0;
  background:transparent;
}

/* Bảng thông tin trang bị và bảng chỉ số nằm trên túi nhưng không đổi bố cục túi. */
.inventory-subpanel{
  z-index:58;
  padding:12px;
  background:rgba(1,6,10,.68);
  backdrop-filter:blur(3px);
}
.inventory-info-card{
  position:relative;
  width:min(90vw,430px);
  max-height:88dvh;
  padding:clamp(16px,2vw,26px);
  overflow:auto;
  border:2px solid #c49b50;
  border-radius:16px;
  background:
    linear-gradient(90deg,rgba(51,184,233,.16),transparent 18%,transparent 82%,rgba(51,184,233,.16)),
    radial-gradient(circle at 50% 0,rgba(44,142,187,.24),transparent 42%),
    linear-gradient(160deg,#10293a,#050e17 68%,#0b1e2d);
  color:#dceef5;
  box-shadow:0 22px 70px #000,inset 0 0 0 4px rgba(2,9,15,.88),inset 0 0 32px rgba(65,185,229,.12);
  text-align:left;
}
.inventory-info-card:before,
.inventory-info-card:after{
  content:"◆";
  position:absolute;
  top:9px;
  color:#7ce3ff;
  font-size:13px;
  text-shadow:0 0 8px #32bfe9;
}
.inventory-info-card:before{left:12px}.inventory-info-card:after{right:12px}
.inventory-info-card>header{text-align:center}
.inventory-info-card>header small{color:#81dafa;font-size:10px;font-weight:900;letter-spacing:.15em}
.inventory-info-card>header h2{margin:5px 0 16px;font:900 clamp(20px,2.2vw,28px) Georgia,serif;text-shadow:0 2px 5px #000}
.item-quality-white{color:#fff}.item-quality-purple{color:#d490ff}.item-quality-gold{color:#ffd45e}
.item-quality-purple{text-shadow:0 0 10px rgba(179,75,255,.62)!important}
.item-quality-gold{text-shadow:0 0 11px rgba(255,192,41,.68)!important}
.item-detail-stats,
.character-stats-list{display:grid;gap:6px}
.item-detail-stats p,
.character-stats-list p{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:34px;
  margin:0;
  padding:7px 10px;
  border-bottom:1px solid rgba(130,203,228,.18);
  background:linear-gradient(90deg,rgba(37,112,145,.12),transparent);
  color:#bcd2dc;
  font-size:13px;
}
.item-detail-stats strong,.character-stats-list strong{color:#fff0ba}
.item-socket-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0;
  padding:8px 10px;
  color:#bad4df;
  font-size:12px;
}
.item-sockets{display:flex;align-items:center;gap:7px;min-height:24px}
.item-socket,
.item-socket-square,
.item-sockets>i{
  display:block;
  width:clamp(18px,2.1vw,25px);
  aspect-ratio:1;
  border:2px solid #d1ad63;
  border-radius:3px;
  background:linear-gradient(145deg,#07131d,#163a4c);
  box-shadow:inset 0 0 7px #000,0 0 7px rgba(80,198,241,.2);
}
.equipped-sockets{
  position:absolute;
  z-index:3;
  right:5%;
  bottom:5%;
  display:flex;
  gap:2px;
  margin:0;
  pointer-events:none;
}
.equipped-sockets .item-socket-square{
  width:clamp(6px,.65vw,10px);
  border-width:1px;
  border-radius:1px;
  box-shadow:inset 0 0 3px #000,0 0 3px rgba(80,198,241,.34);
}
.inventory-item-sockets{
  position:absolute;
  z-index:3;
  right:7%;
  top:7%;
  display:flex;
  gap:2px;
  pointer-events:none;
}
.inventory-item-sockets .item-socket-square{
  width:clamp(6px,.62vw,9px);
  border-width:1px;
  border-radius:1px;
  box-shadow:inset 0 0 3px #000,0 0 3px rgba(80,198,241,.34);
}
.inventory-info-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.character-stats-card>.feature-button{display:block;width:46%;margin:15px auto 0}

/* Khung quan trọng dùng chung cho Cổng dịch chuyển và toàn bộ Bang hội. */
.important-feature-layer{
  z-index:56;
  padding:clamp(8px,1.5vw,18px);
  background:
    radial-gradient(circle at 50% 45%,rgba(20,105,139,.18),transparent 42%),
    rgba(0,5,10,.78);
  backdrop-filter:blur(5px);
}
.important-feature-frame{
  position:relative;
  isolation:isolate;
  width:min(94vw,920px);
  max-height:90dvh;
  padding:clamp(18px,2.3vw,30px);
  overflow:hidden;
  border:2px solid #d9b763;
  border-radius:18px 18px 28px 28px;
  background:
    linear-gradient(135deg,transparent 22px,#0a2638 23px) top left,
    linear-gradient(225deg,transparent 22px,#0a2638 23px) top right,
    linear-gradient(45deg,transparent 25px,#061827 26px) bottom left,
    linear-gradient(315deg,transparent 25px,#061827 26px) bottom right;
  background-size:51% 51%;
  background-repeat:no-repeat;
  color:#e6f4f8;
  box-shadow:
    0 25px 90px #000,
    0 0 24px rgba(60,200,244,.25),
    inset 0 0 0 5px rgba(2,11,18,.92),
    inset 0 0 0 7px rgba(90,203,238,.2),
    inset 0 0 55px rgba(54,188,231,.14);
}
.important-feature-frame:before,
.important-feature-frame:after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.important-feature-frame:before{
  inset:10px;
  border:1px solid rgba(120,224,255,.34);
  border-radius:10px 10px 20px 20px;
  background:
    radial-gradient(circle at 50% -10%,rgba(68,211,255,.25),transparent 35%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 12px);
  box-shadow:inset 0 0 26px rgba(31,152,196,.18);
}
.important-feature-frame:after{
  left:50%;
  top:7px;
  width:clamp(18px,2.1vw,28px);
  aspect-ratio:1;
  transform:translateX(-50%) rotate(45deg);
  border:2px solid #e4c66f;
  background:radial-gradient(circle at 35% 30%,#b8f2ff,#1b98d4 42%,#073259 72%);
  box-shadow:0 0 13px #47caf4,inset 0 0 5px #fff;
}
.important-frame-title{position:relative;z-index:2;text-align:center}
.important-frame-title small{display:block;color:#80daf5;font-size:clamp(8px,.75vw,11px);font-weight:900;letter-spacing:.18em}
.important-frame-title h2{margin:5px 0 3px;color:#ffe3a0;font:900 clamp(19px,2.2vw,30px) Georgia,serif;letter-spacing:.055em;text-shadow:0 2px 5px #000,0 0 12px rgba(78,204,255,.18)}
.important-frame-title p{margin:3px 0 12px;color:#b7d4df;font-size:clamp(10px,.88vw,13px)}
.important-frame-close{
  position:absolute;
  z-index:8;
  right:3px;
  top:-4px;
  width:clamp(34px,3.5vw,46px);
  aspect-ratio:1;
  padding:0;
  border:1px solid #d7b866;
  border-radius:50%;
  background:linear-gradient(#4e2630,#210c15);
  color:#fff0bc;
  font-size:clamp(20px,2.5vw,30px);
  line-height:1;
  box-shadow:0 4px 12px #000,inset 0 0 10px rgba(255,180,120,.15);
  touch-action:manipulation;
}
.feature-button{
  min-height:42px;
  padding:9px 14px;
  border:1px solid #d7b966;
  border-radius:9px;
  background:linear-gradient(180deg,#236f96,#0a395b);
  color:#fff0bd;
  font:900 clamp(10px,1vw,14px) Georgia,serif;
  letter-spacing:.035em;
  text-shadow:0 2px 4px #000;
  box-shadow:inset 0 0 12px rgba(93,211,249,.18),0 4px 11px rgba(0,0,0,.46);
  touch-action:manipulation;
}
.feature-button:active{transform:scale(.97)}
.feature-button:disabled{filter:grayscale(.55);opacity:.54}
.feature-button-muted{background:linear-gradient(#263d4b,#101e29);color:#c9dce4}
.feature-button-danger{background:linear-gradient(#763634,#361519);border-color:#ca8a64}

.portal-choice-card.important-feature-frame{
  width:min(92vw,640px);
  padding:clamp(20px,2.5vw,32px);
  text-align:center;
}
.portal-destination-list{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 15px}
.portal-destination{
  position:relative;
  display:grid;
  place-content:center;
  gap:5px;
  width:100%;
  min-height:112px;
  margin:0;
  padding:14px 10px;
  overflow:hidden;
  border:1px solid #d5b862;
  border-radius:50% 50% 12px 12px/18% 18% 12px 12px;
  background:
    radial-gradient(ellipse at 50% 115%,rgba(93,232,255,.6),transparent 42%),
    linear-gradient(180deg,rgba(18,105,144,.94),rgba(4,28,49,.98));
  color:#fff2c5;
  font:900 clamp(12px,1.4vw,18px) Georgia,serif;
  letter-spacing:.055em;
  text-shadow:0 2px 5px #000;
  box-shadow:inset 0 0 20px rgba(100,224,255,.21),0 5px 16px rgba(0,0,0,.48);
  touch-action:manipulation;
}
.portal-destination:before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:-18%;
  height:42%;
  border:2px solid rgba(150,238,255,.72);
  border-radius:50%;
  box-shadow:0 0 16px #49c9ed,inset 0 0 12px rgba(111,227,255,.35);
}
.portal-destination strong{position:relative;z-index:1;font:900 clamp(12px,1.4vw,18px) Georgia,serif;letter-spacing:.055em}
.portal-destination small{position:relative;z-index:1;color:#bfe7f2;font:700 clamp(8px,.76vw,11px) Arial,sans-serif;letter-spacing:0}
.portal-destination:active{transform:scale(.97)}
.portal-choice-card>.feature-button{position:relative;z-index:2;width:min(220px,55%)}

/* Bang hội */
.guild-card{height:min(88dvh,690px);display:flex;flex-direction:column}
.guild-heading{flex:0 0 auto;min-height:72px;padding:0 52px}
.guild-heading>div{min-width:0}.guild-heading p{margin-bottom:5px}
.guild-view{position:relative;z-index:2;flex:1;min-height:0;padding:10px 4px 0}
.guild-browse-view{display:grid;grid-template-rows:auto minmax(120px,1fr) auto auto;gap:8px}
.guild-list-heading,
.guild-list>button,
.guild-member-heading,
.guild-member-list>.guild-member-row{
  display:grid;
  grid-template-columns:minmax(150px,1.5fr) minmax(105px,1fr) minmax(80px,.7fr);
  align-items:center;
  gap:10px;
}
.guild-list-heading,.guild-member-heading{
  padding:7px 13px;
  border-bottom:1px solid rgba(222,189,104,.55);
  color:#8edbf3;
  font-size:clamp(9px,.8vw,12px);
  font-weight:900;
  text-transform:uppercase;
}
.guild-list-heading span:last-child,.guild-member-heading span:last-child{text-align:right}
.guild-list{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(116,205,234,.24);
  border-radius:10px;
  background:rgba(1,12,21,.54);
  scrollbar-color:#397fa2 #081620;
}
.guild-list>button{
  width:100%;
  min-height:48px;
  padding:9px 13px;
  border:0;
  border-bottom:1px solid rgba(112,174,196,.16);
  border-radius:0;
  background:linear-gradient(90deg,rgba(29,84,109,.24),transparent);
  color:#d8ebf1;
  text-align:left;
  touch-action:manipulation;
}
.guild-list>button:hover,.guild-list>button.selected,.guild-list>button[aria-selected="true"]{
  background:linear-gradient(90deg,rgba(37,137,177,.5),rgba(21,66,90,.32));
  color:#fff1ba;
  box-shadow:inset 3px 0 #e3c06d;
}
.guild-list>button span:last-child{text-align:right}
.guild-list .guild-list-empty{display:block;text-align:center;color:#99aeb7;background:transparent;box-shadow:none}
.guild-message{min-height:20px;margin:0;color:#ffd490;font-size:12px;text-align:center}
.guild-footer{display:flex;align-items:center;gap:10px}.guild-footer-split{justify-content:space-between}
.guild-footer .feature-button{width:min(270px,46%)}
.guild-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:4px 12px 10px;
  border-bottom:1px solid rgba(216,183,95,.36);
}
.guild-summary small{color:#79d3ef;font-size:9px;font-weight:900;letter-spacing:.13em}
.guild-summary h3{margin:2px 0;color:#ffe5a1;font:900 clamp(18px,2vw,27px) Georgia,serif}
.guild-summary>span{color:#b9d8e3;font-size:12px}
.guild-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.guild-tabs button{
  min-height:38px;
  border:1px solid rgba(113,196,224,.34);
  border-radius:8px;
  background:rgba(7,31,45,.8);
  color:#abc8d4;
  font-weight:900;
  touch-action:manipulation;
}
.guild-tabs button.active{border-color:#ddbc66;background:linear-gradient(#17678d,#093c5d);color:#fff0bd}
.guild-tab-content{height:calc(100% - 116px);min-height:125px}
.guild-member-list{height:calc(100% - 32px);overflow:auto;border:1px solid rgba(116,205,234,.22);border-radius:9px;background:rgba(1,12,21,.48)}
.guild-member-list>.guild-member-row{min-height:44px;padding:7px 13px;border-bottom:1px solid rgba(112,174,196,.15)}
.guild-member-list>.guild-member-row span:last-of-type{text-align:right}
.guild-role-toggle{grid-column:1/-1;justify-self:end;min-height:28px;padding:4px 9px;border:1px solid rgba(215,185,102,.7);border-radius:6px;background:rgba(12,52,72,.9);color:#ffe7ab;font-size:10px;font-weight:800}
.guild-ranking-view{display:grid;place-items:center;border:1px solid rgba(116,205,234,.22);border-radius:9px;background:rgba(1,12,21,.48);color:#ffe1a0;font:900 clamp(17px,2vw,26px) Georgia,serif;letter-spacing:.08em}

.guild-dialog{width:min(90vw,500px);padding:clamp(22px,3vw,34px)}
.guild-dialog>label{position:relative;z-index:2;display:block;margin:15px 0 6px;color:#c4dce5;font-size:12px;font-weight:900}
.guild-dialog>input{
  position:relative;
  z-index:2;
  width:100%;
  min-height:46px;
  padding:10px 13px;
  border:1px solid #d0ad60;
  border-radius:8px;
  outline:0;
  background:#06131f;
  color:#fff;
  font-size:16px;
  box-shadow:inset 0 0 12px #000;
  user-select:text;
  touch-action:manipulation;
}
.guild-dialog>input:focus{border-color:#75dafa;box-shadow:0 0 0 3px rgba(67,194,234,.16),inset 0 0 12px #000}
.guild-input-meta{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;margin-top:5px;color:#88b4c4;font-size:10px}
.guild-dialog-actions{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.guild-confirm-copy{position:relative;z-index:2;margin:18px auto;max-width:410px;color:#cde2e9;font-size:14px;line-height:1.55;text-align:center}
.guild-confirm-copy strong{color:#ffe09a}
.guild-invite-countdown{position:relative;z-index:2;margin:0 auto 10px;color:#8fbcca;font-size:11px;text-align:center}
.guild-invite-countdown strong{display:inline-block;min-width:2ch;color:#ffe09a;font-size:13px;font-variant-numeric:tabular-nums}

@media(max-width:720px){
  .important-feature-frame{width:96vw;padding:15px}
  .portal-destination-list{gap:6px}
  .guild-card{height:92dvh}
  .guild-heading{padding:0 42px}
  .guild-list-heading,.guild-list>button,.guild-member-heading,.guild-member-list>.guild-member-row{grid-template-columns:minmax(105px,1.35fr) minmax(75px,.85fr) 65px;gap:6px}
}

@media(max-height:500px){
  .character-stats-button{bottom:3.5%;min-height:7.5%}
  .inventory-info-card{width:min(84vw,500px);max-height:96dvh;padding:11px 16px}
  .inventory-info-card>header h2{margin:2px 0 7px;font-size:18px}
  .item-detail-stats,.character-stats-list{grid-template-columns:1fr 1fr;gap:3px 8px}
  .item-detail-stats p,.character-stats-list p{min-height:27px;padding:4px 7px;font-size:10px}
  .item-socket-section{margin:5px 0;padding:4px 7px}
  .inventory-info-actions{margin-top:6px}.feature-button{min-height:34px;padding:6px 10px;font-size:9px}
  .important-feature-frame{max-height:96dvh;padding:12px 18px;border-radius:13px 13px 20px 20px}
  .important-feature-frame:before{inset:7px}
  .important-feature-frame:after{top:4px;width:17px}
  .important-frame-title small{font-size:7px}.important-frame-title h2{margin:2px 0;font-size:16px}.important-frame-title p{margin:2px 0 5px;font-size:8px}
  .portal-choice-card.important-feature-frame{width:min(88vw,720px);padding:10px 17px}
  .portal-destination-list{margin:6px 0;gap:7px}
  .portal-destination{min-height:70px;padding:7px;font-size:11px}.portal-destination strong{font-size:11px}.portal-destination small{font-size:7px}
  .portal-choice-card>.feature-button{min-height:30px;padding:4px}
  .guild-card{width:min(94vw,900px);height:96dvh;padding:10px 17px}
  .guild-heading{min-height:45px;padding:0 38px}.important-frame-close{width:30px;font-size:19px}
  .guild-view{padding-top:3px}.guild-browse-view{grid-template-rows:auto minmax(82px,1fr) auto auto;gap:4px}
  .guild-list-heading,.guild-member-heading{padding:3px 10px;font-size:7px}
  .guild-list>button{min-height:32px;padding:4px 10px;font-size:9px}
  .guild-message{min-height:12px;font-size:8px}.guild-footer .feature-button{min-height:30px}
  .guild-summary{padding:1px 9px 4px}.guild-summary h3{font-size:14px}.guild-summary>span{font-size:8px}
  .guild-tabs{margin:4px 0;gap:5px}.guild-tabs button{min-height:28px;font-size:8px}
  .guild-tab-content{height:calc(100% - 71px);min-height:76px}.guild-member-list{height:calc(100% - 22px)}
  .guild-member-list>.guild-member-row{min-height:29px;padding:3px 10px;font-size:8px}
  .guild-dialog{width:min(82vw,540px);padding:13px 20px}.guild-dialog>label{margin:7px 0 3px;font-size:9px}.guild-dialog>input{min-height:34px;padding:5px 9px;font-size:13px}
  .guild-input-meta{font-size:7px}.guild-dialog-actions{margin-top:5px}.guild-confirm-copy{margin:8px auto;font-size:10px}
}

/* ELYON 1.0.24 — làm mới màn thương hiệu, chọn nhân vật, túi đồ và Thợ Rèn. */

/* BOI MOBI: màn thương hiệu trắng, rõ và có nhận diện riêng. */
.publisher-screen{
  gap:clamp(8px,1.5vw,18px);
  background:
    radial-gradient(circle at 50% 44%,rgba(20,108,151,.08),transparent 31%),
    linear-gradient(135deg,#fff 0,#f7fbfd 52%,#eef5f8 100%);
  color:#102b3b;
  letter-spacing:normal;
}
.publisher-screen:before,
.publisher-screen:after{
  content:"";
  position:absolute;
  width:min(30vw,390px);
  height:1px;
  top:50%;
  background:linear-gradient(90deg,transparent,rgba(20,74,101,.28));
}
.publisher-screen:before{right:calc(50% + 112px)}
.publisher-screen:after{left:calc(50% + 112px);transform:scaleX(-1)}
.publisher-brand{
  position:relative;
  display:grid;
  place-items:center;
  width:clamp(78px,9vw,126px);
  aspect-ratio:1;
  border:1px solid rgba(20,74,101,.18);
  border-radius:28%;
  background:linear-gradient(145deg,#183e54,#0d2637);
  box-shadow:0 16px 38px rgba(17,53,72,.22),inset 0 0 0 5px rgba(255,255,255,.06);
  transform:rotate(45deg);
}
.publisher-monogram{
  color:#fff;
  font:900 clamp(24px,3.3vw,46px) Georgia,serif;
  letter-spacing:-.08em;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  transform:rotate(-45deg) translateX(-.05em);
}
.publisher-brand i{position:absolute;right:12%;bottom:12%;width:18%;aspect-ratio:1;border-radius:50%;background:#d5ac50;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
.publisher-screen>strong{margin-top:clamp(8px,1vw,14px);color:#133447;font:800 clamp(27px,3.8vw,50px)/1 "Segoe UI",sans-serif;letter-spacing:.16em;text-shadow:none}
.publisher-screen>strong em{color:#b4862e;font-style:normal}
.publisher-screen>small{color:#6d818b;font-size:clamp(8px,.8vw,12px);font-weight:800;letter-spacing:.42em}

/* Chọn nhân vật: sân khấu hiện đại và vùng canvas 3D Idle riêng. */
#character-screen:before{
  background:
    linear-gradient(90deg,rgba(1,8,14,.72),rgba(3,14,22,.18) 50%,rgba(1,8,14,.72)),
    radial-gradient(ellipse at 50% 62%,transparent 0 21%,rgba(0,4,8,.60) 76%);
}
#character-screen .character-select-card{
  width:min(1180px,94vw);
  height:min(720px,88vh);
  padding:clamp(18px,2.4vw,32px);
  border:1px solid rgba(216,181,97,.72);
  border-radius:26px;
  background:
    linear-gradient(90deg,rgba(56,178,219,.08),transparent 32%,transparent 68%,rgba(56,178,219,.08)),
    linear-gradient(155deg,rgba(8,29,41,.96),rgba(3,11,18,.97));
  box-shadow:0 34px 100px rgba(0,0,0,.82),inset 0 0 0 5px rgba(1,8,13,.82),inset 0 0 55px rgba(55,171,211,.11);
}
#character-screen .character-select-card:before,
#character-screen .character-select-card:after{content:"";position:absolute;left:4%;right:4%;height:1px;background:linear-gradient(90deg,transparent,#c9a557,transparent)}
#character-screen .character-select-card:before{top:11%}
#character-screen .character-select-card:after{bottom:12%}
#character-screen .creation-title{position:relative;z-index:2;color:#f5d994;letter-spacing:.17em}
#character-screen .character-slots{position:relative;z-index:1;grid-template-columns:repeat(2,minmax(230px,1fr));max-width:900px;height:calc(100% - 145px);gap:clamp(18px,3vw,42px)}
#character-screen .character-slot{
  border:1px solid rgba(157,204,219,.34);
  border-radius:22px;
  background:
    radial-gradient(ellipse at 50% 82%,rgba(69,177,213,.18),transparent 33%),
    linear-gradient(165deg,rgba(17,54,70,.86),rgba(3,13,20,.95));
  box-shadow:inset 0 0 0 4px rgba(2,12,19,.54),inset 0 0 42px rgba(62,178,215,.08),0 18px 42px rgba(0,0,0,.44);
}
#character-screen .character-slot:hover,
#character-screen .character-slot.selected{border-color:#e8c46c;box-shadow:inset 0 0 0 4px rgba(2,12,19,.54),inset 0 0 45px rgba(70,188,225,.14),0 0 28px rgba(238,196,93,.19),0 18px 42px rgba(0,0,0,.5)}
#character-screen .character-slot.created{display:grid;grid-template-rows:minmax(0,1fr) auto;padding:0;isolation:isolate}
.character-model-host{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 92%,rgba(92,200,231,.2),transparent 35%),
    linear-gradient(180deg,transparent,rgba(0,6,10,.32));
  pointer-events:none;
}
.character-model-host:after{content:"";position:absolute;z-index:0;left:18%;right:18%;bottom:5%;height:8%;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(7px)}
.character-model-host canvas{position:relative;z-index:2;display:block;width:100%!important;height:100%!important;object-fit:contain;filter:drop-shadow(0 14px 13px rgba(0,0,0,.7))}
.character-model-loading{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#88b6c7;font-size:clamp(8px,.8vw,11px);font-weight:800;letter-spacing:.08em}
.character-model-loading i{width:12px;aspect-ratio:1;border:2px solid rgba(132,205,231,.25);border-top-color:#e1bd65;border-radius:50%;animation:character-model-loader .8s linear infinite}
.character-model-host.model-ready .character-model-loading{display:none}
@keyframes character-model-loader{to{transform:rotate(360deg)}}
.character-slot-copy{position:relative;z-index:4;display:grid;width:100%;padding:10px 12px 13px;border-top:1px solid rgba(216,181,97,.42);background:linear-gradient(180deg,rgba(2,13,20,.76),rgba(1,7,12,.94));pointer-events:none}
#character-screen .character-slot.created .character-slot-copy strong{padding:0;color:#ffe09a;font:900 clamp(15px,1.55vw,21px) Georgia,serif;letter-spacing:.09em}
#character-screen .character-slot.created .character-slot-copy small{padding:3px 0 0;color:#92d9ef;font-size:clamp(9px,.8vw,12px);font-weight:800;letter-spacing:.06em}

/* Hồ sơ dùng model 3D thật; không hiện lại ảnh tĩnh trong lúc chờ renderer. */
.character-card .character-figure{background-image:none!important;background-color:transparent!important;overflow:hidden}
.character-card .character-figure canvas{display:block;width:100%!important;height:100%!important;object-fit:contain}

/* Trang bị luôn nằm trong khung, có nhãn và thêm ô khảm ngọc riêng. */
.character-card .equipment-slot,
.character-card .equipment-slot.equipped{
  overflow:hidden!important;
  border:1px solid rgba(194,158,79,.74)!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(18,52,68,.92),rgba(3,15,23,.95))!important;
  box-shadow:inset 0 0 14px rgba(61,167,205,.09),0 5px 13px rgba(0,0,0,.36)!important;
}
.character-card .equipment-slot.equipped{border-color:#e3bc63!important;box-shadow:inset 0 0 14px rgba(61,167,205,.15),0 0 10px rgba(226,182,87,.22),0 5px 13px rgba(0,0,0,.4)!important}
.character-card .equipment-slot img{position:absolute;inset:7% 9% 22%;width:82%;height:71%;margin:0;padding:0;object-fit:contain;object-position:center;overflow:hidden}
.character-card .equipment-slot span{position:absolute;left:0;right:0;bottom:0;display:flex;height:22%;min-height:0;align-items:center;justify-content:center;padding:1px 3px;border:0;border-top:1px solid rgba(197,160,79,.28);border-radius:0;background:rgba(1,9,15,.9);color:#e5d4a7;font-size:clamp(6px,.58vw,9px);line-height:1;text-align:center;white-space:nowrap}
.slot-gem{left:4.6%;top:61.2%}
.slot-gem .gem-count{position:absolute;inset:10% 9% 24%;display:grid;place-items:center;color:#db9cff;font:900 clamp(13px,1.5vw,21px) Georgia,serif;text-shadow:0 0 10px rgba(184,82,255,.75)}

/* Túi 5 x 4; khung chọn loại/trang nằm hoàn toàn bên dưới 20 ô. */
.inventory-side>.inventory-grid{top:10.8%;bottom:24.2%}
.inventory-page-frame{
  position:absolute;
  z-index:7;
  left:6.1%;
  right:6.1%;
  bottom:4.6%;
  height:15.4%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr);
  gap:4px 9px;
  padding:5px 7px 7px;
  border:1px solid rgba(200,165,83,.68);
  border-radius:10px;
  background:linear-gradient(155deg,rgba(12,45,61,.96),rgba(3,17,27,.98));
  box-shadow:inset 0 0 0 3px rgba(1,9,15,.68),inset 0 0 18px rgba(59,172,211,.09),0 6px 15px rgba(0,0,0,.36);
}
.inventory-page-caption{grid-column:1/-1;color:#ddc17e;font:900 clamp(6px,.56vw,9px) Georgia,serif;letter-spacing:.14em;text-align:center}
.inventory-page-frame .inventory-tabs{position:static!important;z-index:auto;display:grid;width:auto;height:auto;min-height:0;grid-template-columns:1fr 1fr;gap:5px}
.inventory-page-frame .inventory-tabs button{min-width:0;min-height:0;padding:3px 5px!important;border:1px solid rgba(99,161,183,.33)!important;border-radius:6px!important;background:rgba(5,27,39,.82)!important;color:#a9c3cd;font:900 clamp(6px,.59vw,9px) "Segoe UI",sans-serif;letter-spacing:.025em;white-space:nowrap}
.inventory-page-frame .inventory-tabs button.active{border-color:#d9b65f!important;background:linear-gradient(#176083,#0a3450)!important;color:#fff0ba;text-shadow:0 1px 3px #000,0 0 7px rgba(66,193,235,.46)}
.inventory-page-frame .inventory-pagination{display:flex;align-items:center;justify-content:center;gap:5px;min-height:0;color:#ffe6a3;font-size:clamp(7px,.65vw,10px);font-variant-numeric:tabular-nums}
.inventory-page-frame .inventory-pagination button{display:grid;place-items:center;width:clamp(22px,2.15vw,30px);height:100%;min-height:22px;padding:0;border:1px solid rgba(208,172,83,.64);border-radius:6px;background:linear-gradient(#183f52,#071d2b);color:#fff1bd;font-size:clamp(14px,1.4vw,20px);line-height:1}
.inventory-page-frame .inventory-pagination button:disabled{opacity:.36}
.inventory-side>.inventory-empty{top:42%;bottom:auto;z-index:8;padding:5px 11px;border-radius:12px;background:rgba(2,10,16,.75)}
.inventory-side>.inventory-grid .item-card,
.inventory-side>.inventory-grid .inventory-cell{overflow:hidden!important}
.inventory-side>.inventory-grid .item-card img{inset:9%;width:82%;height:82%;max-width:82%;max-height:82%}

/* Bảng chi tiết trang bị/vật liệu rõ phẩm chất, chỉ số và hành động. */
.item-detail-card.inventory-info-card{width:min(92vw,480px);padding:clamp(18px,2.2vw,28px);border-color:#d6b45f;background:radial-gradient(circle at 50% 0,rgba(50,166,208,.25),transparent 39%),linear-gradient(155deg,#102f42,#06131f 68%,#0b2434)}
.item-detail-header{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:13px;padding:3px 3px 14px;border-bottom:1px solid rgba(208,173,88,.3);text-align:left!important}
.item-detail-header>div{text-align:left}
.item-detail-emblem{display:grid;place-items:center;width:clamp(48px,6vw,66px);aspect-ratio:1;border:1px solid #d2ad59;border-radius:13px;background:radial-gradient(circle,#275e75,#071825 70%);color:#ffe49a;font-size:clamp(22px,3vw,32px);box-shadow:inset 0 0 15px rgba(77,190,228,.15),0 5px 14px rgba(0,0,0,.38)}
.inventory-info-card .item-detail-header h2{margin:3px 0 4px;font-size:clamp(19px,2.1vw,27px)}
.item-detail-quality{display:inline-flex;padding:3px 8px;border:1px solid currentColor;border-radius:10px;font-size:9px;letter-spacing:.08em;background:rgba(0,0,0,.24)}
.item-detail-quality.item-quality-white{color:#f4f5f5}
.item-detail-quality.item-quality-purple{color:#d490ff}
.item-detail-quality.item-quality-gold{color:#ffd45e}
.item-detail-card .item-detail-stats{margin-top:12px;padding:7px;border:1px solid rgba(96,184,214,.18);border-radius:10px;background:rgba(1,10,17,.42)}
.item-detail-card .item-detail-stats p{border-radius:5px}
.item-detail-card .item-socket-section{border:1px solid rgba(208,173,88,.26);border-radius:9px;background:linear-gradient(90deg,rgba(34,104,132,.18),transparent)}
.material-detail-image-frame{display:grid;place-items:center;width:148px;aspect-ratio:1;margin:9px auto 12px;border:1px solid rgba(207,172,86,.6);border-radius:14px;background:radial-gradient(circle,rgba(42,118,145,.28),rgba(3,14,21,.82) 70%);box-shadow:inset 0 0 18px rgba(64,183,221,.1)}
.material-detail-image-frame .material-detail-image{width:82%;height:82%;margin:0;object-fit:contain}
#material-detail-copy{margin:0;padding:10px;border:1px solid rgba(101,181,208,.2);border-radius:9px;background:rgba(3,17,26,.58);color:#c4dce5;font-size:12px;line-height:1.45;text-align:center}

/* Thợ Rèn: ô đặt đồ gọn, năm ô khảm luôn nhìn thấy và túi đủ 20 ô. */
.blacksmith-card.important-feature-frame{width:min(96vw,980px);height:min(90dvh,650px);padding:clamp(14px,1.8vw,24px)}
.blacksmith-card>header{min-height:42px;padding-right:96px}
.blacksmith-card>header small{color:#75d5f0;font-size:9px;font-weight:900;letter-spacing:.13em}
.blacksmith-card>header h2{font:900 clamp(19px,2vw,28px) Georgia,serif;letter-spacing:.04em}
.blacksmith-card .blacksmith-close{top:clamp(12px,1.5vw,20px);right:clamp(12px,1.5vw,20px);width:auto;height:34px;min-width:78px;aspect-ratio:auto!important;padding:0 14px;border:1px solid #a97e48;border-radius:8px;background:linear-gradient(#5b2e26,#2c1112);color:#fff0cf;font-size:10px;font-weight:900;letter-spacing:.08em}
.blacksmith-tabs{height:38px;margin:7px 0 10px}.blacksmith-tabs button{min-height:34px;border-radius:7px}
.blacksmith-layout{grid-template-columns:minmax(230px,.58fr) minmax(430px,1.42fr);gap:11px;height:calc(100% - 95px)}
.blacksmith-layout>section{padding:10px;border-color:rgba(221,183,93,.38);background:linear-gradient(155deg,rgba(7,31,43,.82),rgba(1,12,19,.82))}
.blacksmith-layout h3{margin:0 0 5px;color:#eed28d;font:900 clamp(12px,1.15vw,16px) Georgia,serif;letter-spacing:.05em}
.forge-stage{display:flex;flex-direction:column;align-items:center;text-align:center}
.forge-help{display:block;min-height:25px;color:#8fb2be;font-size:9px;line-height:1.35}
.blacksmith-card .forge-slot{flex:0 0 auto;width:clamp(92px,10vw,118px);height:auto;aspect-ratio:1;margin:5px auto 7px;border-width:1px;border-radius:13px;background:radial-gradient(circle,rgba(64,128,145,.5),#06141c 72%);color:#9fb7bd;font-size:10px;line-height:1.25;overflow:hidden}
.blacksmith-card .forge-slot img{display:block;width:76%;height:76%;max-width:76%;max-height:76%;object-fit:contain;object-position:center}
.forge-socket-row{width:100%;padding:6px 7px;border:1px solid rgba(210,175,87,.26);border-radius:9px;background:rgba(1,11,17,.46)}
.forge-socket-row>span{display:block;margin-bottom:4px;color:#9ec1cb;font-size:8px;font-weight:900;letter-spacing:.1em}
.blacksmith-card .forge-sockets{display:grid;grid-template-columns:repeat(5,1fr);justify-content:center;gap:5px;width:min(100%,190px);min-height:0;margin:auto}
.blacksmith-card .forge-sockets button{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:1;max-width:31px;margin:auto;padding:0;border-radius:5px;font-size:13px}
.blacksmith-card #forge-cost{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;min-height:34px;margin:5px 0;overflow:auto;color:#d8e7e9;font-size:10px;line-height:1.35}
.blacksmith-card #forge-cost button{margin:2px;padding:4px 6px;border:1px solid #9d7c43;border-radius:5px;background:#12394a;color:#fff0bd;font-size:8px}
.blacksmith-card #forge-action{width:100%;min-height:38px;margin:0}
.blacksmith-card .blacksmith-layout>section:last-child{display:flex;min-height:0;flex-direction:column}
.blacksmith-card .blacksmith-layout .inventory-grid{position:static!important;display:grid!important;flex:1;width:100%;height:auto!important;min-height:0;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding:4px!important;overflow:hidden!important}
.blacksmith-card .inventory-grid .item-card,
.blacksmith-card .inventory-grid .inventory-cell{width:100%;height:100%;min-width:0;min-height:0;padding:5%!important;overflow:hidden!important;border:1px solid rgba(91,130,143,.58)!important;border-radius:7px!important;background:linear-gradient(145deg,rgba(15,42,53,.85),rgba(3,14,20,.88))!important}
.blacksmith-card .inventory-grid .item-card img{inset:10%;width:80%;height:80%;max-width:80%;max-height:80%;object-fit:contain;object-position:center}

/* Bản đồ Vượt Ải dùng nút chữ THOÁT thay cho dấu X. */
.world-map-card .world-map-exit{
  right:3.7%!important;
  top:4.1%!important;
  width:auto!important;
  height:auto!important;
  min-width:clamp(68px,7vw,94px);
  aspect-ratio:auto!important;
  padding:clamp(6px,.7vw,9px) clamp(10px,1.25vw,17px)!important;
  border:1px solid #b78a4f;
  border-radius:8px!important;
  background:linear-gradient(#5c3029,#2b1214)!important;
  color:#fff1cf;
  font-size:clamp(8px,.82vw,12px)!important;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:0 5px 14px rgba(0,0,0,.42),inset 0 0 9px rgba(255,196,105,.08);
}
.world-map-card .world-map-exit:active{transform:scale(.96)}

@media(max-width:800px){
  #character-screen .character-select-card{width:97vw;height:94vh;padding:13px}
  #character-screen .character-slots{gap:12px;height:calc(100% - 115px)}
  .character-card .equipment-slot span{font-size:6px}
  .inventory-page-frame{left:5.4%;right:5.5%;padding:3px 4px 4px;gap:2px 4px}
  .inventory-page-frame .inventory-tabs button{font-size:6px;padding:2px!important}
  .blacksmith-layout{grid-template-columns:minmax(190px,.62fr) minmax(350px,1.38fr);gap:6px}
  .blacksmith-card .blacksmith-layout .inventory-grid{gap:3px!important;padding:2px!important}
}

@media(max-height:500px){
  .publisher-screen{gap:5px}.publisher-brand{width:58px}.publisher-screen>strong{margin-top:5px;font-size:24px}.publisher-screen>small{font-size:7px}
  #character-screen .character-select-card{height:97vh;padding:8px 13px;border-radius:16px}
  #character-screen .creation-title{font-size:16px}
  #character-screen .character-select-card h1{margin:1px 0 3px;font-size:11px}
  #character-screen .character-slots{height:calc(100% - 72px);gap:9px}
  .character-slot-copy{padding:4px 8px 5px}
  #character-screen .character-slot.created .character-slot-copy strong{font-size:12px}
  #character-screen .character-slot.created .character-slot-copy small{font-size:7px}
  .inventory-side>.inventory-grid{top:10%;bottom:24.5%}
  .inventory-page-frame{bottom:3.7%;height:17%;padding:2px 4px 3px}
  .inventory-page-caption{font-size:5px}.inventory-page-frame .inventory-pagination button{min-height:17px}.inventory-page-frame .inventory-pagination{font-size:6px}
  .item-detail-card.inventory-info-card{width:min(86vw,500px);padding:10px 15px}
  .item-detail-header{grid-template-columns:auto 1fr;gap:8px;padding-bottom:6px}.item-detail-emblem{width:42px}.item-detail-quality{padding:2px 6px;font-size:7px}
  .material-detail-image-frame{width:88px;margin:3px auto 5px}
  .blacksmith-card.important-feature-frame{width:96vw;height:97dvh;padding:9px 14px}
  .blacksmith-card>header{min-height:29px;padding-right:72px}.blacksmith-card>header h2{font-size:15px}.blacksmith-card>header small{font-size:6px}
  .blacksmith-card .blacksmith-close{top:8px;right:11px;height:26px;min-width:61px;padding:0 8px;font-size:7px}
  .blacksmith-tabs{height:28px;margin:3px 0 5px}.blacksmith-tabs button{min-height:26px;font-size:8px}
  .blacksmith-layout{height:calc(100% - 59px);grid-template-columns:minmax(180px,.56fr) minmax(360px,1.44fr);gap:6px}
  .blacksmith-layout>section{padding:5px}.blacksmith-layout h3{margin-bottom:2px;font-size:10px}.forge-help{min-height:13px;font-size:6px}
  .blacksmith-card .forge-slot{width:68px;margin:2px auto 3px;border-radius:8px;font-size:7px}
  .forge-socket-row{padding:3px 5px}.forge-socket-row>span{margin-bottom:2px;font-size:6px}.blacksmith-card .forge-sockets{width:130px;gap:3px}.blacksmith-card .forge-sockets button{max-width:22px;font-size:9px}
  .blacksmith-card #forge-cost{min-height:22px;margin:2px 0;font-size:7px}.blacksmith-card #forge-action{min-height:27px;padding:3px;font-size:8px}
  .world-map-card .world-map-exit{top:3.5%!important;min-width:59px;padding:5px 8px!important;font-size:7px!important}
}

/* GAME2 1.0.26 · điều khiển riêng cho Chiến trường 1. */
.battlefield-tools{
  pointer-events:none;
  position:absolute;
  z-index:12;
  top:clamp(58px,9vh,90px);
  right:clamp(10px,1.6vw,24px);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}
.battle-camera-switch{
  pointer-events:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:clamp(170px,16vw,226px);
  padding:3px;
  border:1px solid rgba(213,176,92,.58);
  border-radius:10px;
  background:rgba(3,15,23,.88);
  box-shadow:0 5px 18px rgba(0,0,0,.48);
}
.battle-camera{
  min-height:28px;
  padding:4px 7px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#9bb6c1;
  font-size:clamp(7px,.7vw,10px);
  font-weight:900;
  letter-spacing:.06em;
}
.battle-camera.active{
  background:linear-gradient(180deg,#29799a,#123c55);
  color:#f5e6b7;
  box-shadow:inset 0 0 8px rgba(91,209,238,.24);
}
.battle-minimap-shell{
  position:relative;
  width:clamp(132px,14vw,210px);
  aspect-ratio:1;
  padding:5px;
  border:2px solid rgba(222,188,104,.8);
  border-radius:50%;
  background:radial-gradient(circle,#163641,#06131b 72%);
  box-shadow:0 8px 25px rgba(0,0,0,.62),inset 0 0 18px rgba(65,190,216,.14);
}
.battle-minimap-shell canvas{display:block;width:100%;height:100%;border-radius:50%}
.battle-minimap-shell small{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  min-width:51px;
  padding:2px 6px;
  border:1px solid rgba(210,177,94,.55);
  border-radius:8px;
  background:#06141d;
  color:#dfc879;
  font-size:8px;
  font-weight:900;
  text-align:center;
}
.battlefield-3d-fallback{
  position:absolute;
  z-index:13;
  top:clamp(62px,9.5vh,94px);
  left:50%;
  transform:translateX(-50%);
  padding:5px 10px;
  border:1px solid #c58c45;
  border-radius:8px;
  background:rgba(65,28,13,.88);
  color:#ffe2a4;
  font-size:clamp(7px,.72vw,10px);
  font-weight:900;
  letter-spacing:.06em;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
}
.movement-controls{
  pointer-events:auto;
  position:absolute;
  z-index:12;
  right:3.2%;
  bottom:calc(6% + clamp(130px,14vw,188px));
  display:grid;
  width:clamp(142px,15vw,205px);
  gap:4px;
  padding:6px;
  border:1px solid rgba(207,174,91,.56);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(7,29,41,.92),rgba(2,12,18,.9));
  box-shadow:0 7px 22px rgba(0,0,0,.55),inset 0 0 13px rgba(50,168,205,.1);
}
.movement-controls button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:30px;
  padding:4px 8px;
  border:1px solid #5a8795;
  border-radius:7px;
  background:linear-gradient(#22536a,#102f40);
  color:#fff0b4;
  font-size:clamp(9px,.85vw,12px);
  font-weight:900;
}
.movement-controls button small{color:#9ec0ca;font-size:clamp(6px,.55vw,8px);font-weight:800}
.movement-controls button[aria-pressed="false"]{border-color:#a78952;background:linear-gradient(#5a4929,#2d281b)}
.run-energy{height:7px;overflow:hidden;border:1px solid #345663;border-radius:6px;background:#040b0f;box-shadow:inset 0 1px 3px #000}
.run-energy i{display:block;width:100%;height:100%;transform-origin:left center;background:linear-gradient(90deg,#2089a9,#57d9e9 72%,#f1dc72);transition:width .12s linear}
.movement-controls>b{color:#a6c7cf;font-size:7px;letter-spacing:.06em;text-align:center}
.battle-return{
  position:absolute;
  z-index:12;
  right:calc(3.2% + clamp(235px,25vw,350px));
  bottom:5.5%;
  width:clamp(112px,11vw,155px);
  min-height:44px;
  overflow:hidden;
  padding:7px 9px 5px;
  border:1px solid #d0a958;
  border-radius:12px;
  background:linear-gradient(#4d3641,#211822);
  color:#fff0bd;
  box-shadow:0 7px 22px rgba(0,0,0,.58),inset 0 0 12px rgba(226,180,87,.1);
  font-size:clamp(8px,.85vw,12px);
  font-weight:900;
  letter-spacing:.06em;
}
.battle-return>i{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(36,128,157,.68),rgba(78,200,209,.48));
  transition:width .08s linear;
}
.battle-return>span,.battle-return>small{position:relative;z-index:1;display:block}
.battle-return>small{margin-top:2px;color:#a9c4ca;font-size:7px}
.battle-return.counting{border-color:#65d4db;color:#fff}
.joystick.battlefield-runtime-disabled,
.combat-controls.battlefield-runtime-disabled,
.movement-controls.battlefield-runtime-disabled{pointer-events:none!important;opacity:.34;filter:grayscale(.72)}
.battle-camera:disabled,.movement-controls button:disabled{cursor:not-allowed;opacity:.45}

@media(max-width:800px){
  .battlefield-tools{top:52px;right:8px}.battle-camera-switch{width:145px}.battle-minimap-shell{width:118px}
  .movement-controls{right:2%;bottom:calc(3% + 112px);width:134px;padding:4px}
  .battle-return{right:calc(2% + 202px);bottom:3%;width:104px;min-height:38px;padding:5px}
}
@media(max-height:500px){
  .battlefield-tools{top:42px;right:7px;gap:4px}.battle-camera-switch{width:132px;padding:2px}.battle-camera{min-height:22px;padding:2px;font-size:6px}.battle-minimap-shell{width:92px;padding:3px}.battle-minimap-shell small{bottom:-6px;font-size:6px}
  .movement-controls{right:2%;bottom:calc(3% + 91px);width:124px;gap:2px;padding:3px}.movement-controls button{min-height:23px;padding:2px 5px;font-size:7px}.movement-controls button small,.movement-controls>b{font-size:5px}.run-energy{height:5px}
  .battle-return{right:calc(2% + 190px);bottom:3%;width:91px;min-height:31px;padding:3px;font-size:7px}.battle-return>small{font-size:5px}
  .battlefield-3d-fallback{top:44px;padding:3px 7px;font-size:6px}
}