:root{--font:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --bg:#0e1412; --panel:#151d1a; --panel2:#1c2723; --line:#2c3b35; --line2:#4a5f55;
  --gold:#e6c67a; --gold2:#a8864a; --text:#e9e2d0; --dim:#98a397; --red:#c8321f; --hp:#b8322a; --mp:#2f64b8; --xp:#c9a23a;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#050807;color:var(--text);font:14px/1.4 var(--font);overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button[disabled]{opacity:.4;cursor:default}
.hidden{display:none!important}
.dim{color:var(--dim)} .small{font-size:12px}
#app{position:relative;height:100dvh;width:min(100vw,calc(100dvh*9/16));margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 40px #000}

#top{display:flex;align-items:center;gap:8px;padding:calc(6px + var(--safe-t)) 10px 6px;background:linear-gradient(#1a2521,#0f1613);border-bottom:1px solid var(--gold2);z-index:3}
.app-update{position:static;display:inline-flex;align-items:center;justify-content:center;z-index:4;min-height:28px;padding:0 7px;border:1px solid #f4cf78;border-radius:6px;background:linear-gradient(110deg,#742018 0%,#a92a20 30%,#e9a33c 48%,#a92a20 66%,#742018 100%);background-size:220% 100%;color:#ffe8a6;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;text-shadow:0 1px 2px #48110c;box-shadow:0 2px 7px #0009,inset 0 1px #ffffff55,0 0 5px #f2bf4b88;animation:app-update-shimmer 2.4s ease-in-out infinite}
@keyframes app-update-shimmer{0%,100%{background-position:100% 0;box-shadow:0 2px 7px #0009,inset 0 1px #ffffff40,0 0 4px #f2bf4b66}50%{background-position:0 0;box-shadow:0 2px 8px #000b,inset 0 1px #ffffff70,0 0 9px #ffd76dcc}}
.app-update:hover{filter:brightness(1.12)}
.app-update:active{transform:translateY(1px)}
.app-update:disabled{opacity:.78;color:#ffe8a6}
@media(prefers-reduced-motion:reduce){.app-update{animation:none}}
/* iOS installed PWA: keep the status-bar area opaque and free of backdrop blur. */
@media (display-mode:standalone){html,body{background:var(--bg)} #top{padding-top:calc(16px + var(--safe-t));background:linear-gradient(#1a2521,#0f1613);backdrop-filter:none;-webkit-backdrop-filter:none}}
.lvbox{position:relative;width:46px;height:46px;border-radius:5px;border:2px solid transparent;background:var(--pl, none) center 12%/auto 135% no-repeat padding-box,radial-gradient(circle at 50% 35%,#354537,#0b100d 78%) padding-box,linear-gradient(145deg,#f0d889 0%,#96713a 27%,#dfbd61 52%,#6e5028 78%,#e7ca76 100%) border-box;box-shadow:0 0 0 1px #090d0a,0 2px 6px #000b,inset 0 1px 0 #fff5;image-rendering:pixelated;flex:none;overflow:hidden}
.lvbox::after{content:"";position:absolute;inset:2px;border:1px solid #f3d98b77;border-radius:2px;box-shadow:inset 0 0 5px #e6c67a2e;pointer-events:none}
.lvbox.avatar-live{background:radial-gradient(circle at 50% 35%,#354537,#0b100d 78%) padding-box,linear-gradient(145deg,#f0d889 0%,#96713a 27%,#dfbd61 52%,#6e5028 78%,#e7ca76 100%) border-box}
.lvbox canvas{display:block;width:100%;height:100%;border-radius:2px;image-rendering:pixelated}
.hero-mark{display:grid;justify-items:center;align-content:center;gap:3px;flex:none;width:max-content;min-width:46px}
.topmid{flex:1;min-width:0}
.topmid .row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px}
.topmid b{color:var(--gold);font-family:var(--font)}
.hero-identity{display:flex;align-items:center;gap:7px;flex:0 1 auto;min-width:0;order:1}
#heroName{display:block;max-width:130px;min-width:0;overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.hero-level{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 3px;border:1px solid #a8864a;background:linear-gradient(180deg,#20271d,#11170f);color:#f3d68c;font-size:9px;line-height:1}
.hero-level>b{display:grid;place-items:center;min-width:27px;height:16px;padding:0 3px;border:1px solid #d2b45c;border-radius:0;background:linear-gradient(180deg,#dbc16d,#a78135);box-shadow:inset 0 1px 0 #fff8;color:#241b08;font-size:9px;text-shadow:0 1px 0 #fff5}
#stageLbl{flex:1 1 auto;min-width:0;overflow:hidden;border-left:1px solid #a8864a88;padding-left:8px;color:var(--dim);font-size:9px;order:3;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.top-power{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 4px;border:1px solid #8f7541;background:linear-gradient(180deg,#24291c,#11160f);color:#dfc477;font-size:8px;line-height:1;white-space:nowrap;order:2}
.top-power>b{color:#ffe08a;font-size:9px;font-weight:700;text-shadow:0 1px 2px #000}
.gold{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--gold);font-size:13px}
.gold-stack{flex-direction:column;align-items:flex-end;gap:2px}
.money-line{white-space:nowrap;align-items:center;gap:4px;display:flex}
.knb-amount{color:#e7c56b;font-size:11px}
.knb-amount .coin{width:16px;height:13px}
.knb-amount small{opacity:.75;font-size:8px}
.coin{display:block;flex:none;width:20px;height:16px;object-fit:contain}
.bar{position:relative;height:12px;min-width:0;background:linear-gradient(180deg,#080c0a,#030605);border:0;border-radius:2px;overflow:hidden}
.bar i{position:absolute;inset:1px auto 1px 1px;width:0;border-radius:2px;transition:width .18s ease-out;box-shadow:inset 0 1px 0 #ffffff4a,inset 0 -1px 1px #0008}
.bar>span:not(.bar-label){position:absolute;z-index:2;inset:0;font-size:9px;font-weight:600;line-height:12px;text-align:center;letter-spacing:.02em;color:#fff7e3;text-shadow:0 1px 2px #000,0 0 4px #000}
.bar .bar-label{position:absolute;z-index:3;inset:1px auto 1px 2px;min-width:32px;padding:0 5px;display:grid;place-items:center;border:1px solid #a8864a;border-radius:3px;background:linear-gradient(180deg,#2b261b,#11140f);box-shadow:inset 0 0 3px #e6c67a44,0 0 2px #000;font-size:8px;font-weight:700;line-height:1;color:#f1d58f;text-shadow:0 1px 2px #000;letter-spacing:.07em}
.bar.xp i{background:linear-gradient(180deg,#ffe49a 0%,#dfb54c 32%,#a47527 100%)}
.bar.hp i{background:linear-gradient(180deg,#ff9784 0%,#dc4b38 32%,#851d17 100%)}
.bar.mp i{background:linear-gradient(180deg,#a7d9ff 0%,#528fda 32%,#234d91 100%)}
.bar.hp .bar-label{color:#ffc0ad;border-color:#aa554b;background:linear-gradient(180deg,#3b201d,#18100f);box-shadow:inset 0 0 3px #e75d4c55,0 0 2px #000}
.bar.mp .bar-label{color:#b7dcff;border-color:#547fb4;background:linear-gradient(180deg,#1e2b3a,#0d141e);box-shadow:inset 0 0 3px #5fa6ff55,0 0 2px #000}

#battle{position:relative;flex:0 0 46%;overflow:hidden;background:#1a211b}
#worldChat{position:absolute;left:10px;right:168px;bottom:10px;z-index:4;pointer-events:none}
#worldChat.wc-emoji-active{z-index:4}
.wc-toggle{position:relative;left:104px;pointer-events:auto;width:32px;height:32px;border:1px solid #b99a5c;border-radius:50%;background:#000a;box-shadow:0 3px 9px #000b,inset 0 1px #ffffff25;font-size:16px;line-height:1}
.wc-toggle:active{transform:scale(.96)}
.wc-unread{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 3px;border:1px solid #ffd4a0;border-radius:10px;background:#bc3a29;color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center}
.wc-panel{position:absolute;left:0;bottom:86px;pointer-events:auto;width:min(430px,100%);height:min(420px,calc(100% - 64px));min-height:232px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #d5c08b66;border-radius:5px;background:linear-gradient(180deg,#07100a35,#03090552);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);box-shadow:0 4px 14px #0004;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,backdrop-filter .4s ease}
@media (orientation:portrait) and (min-height:800px){.wc-panel:not(.wc-maximized){bottom:132px}}
.wc-panel[hidden]{display:none}
.wc-panel.wc-idle{border-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.wc-topline{position:relative;z-index:2;display:flex;flex:none;align-items:center;justify-content:space-between;gap:5px;min-height:25px;padding:2px 5px 0;text-shadow:0 1px 3px #000;font-size:9px}
.wc-topline,.wc-form{transition:opacity .4s ease,visibility 0s linear}
.wc-panel.wc-idle .wc-topline,.wc-panel.wc-idle .wc-form{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s}
.wc-panel.wc-idle .wc-list,.wc-panel.wc-idle .wc-system-list{scrollbar-width:none}
.wc-panel.wc-idle .wc-list::-webkit-scrollbar,.wc-panel.wc-idle .wc-system-list::-webkit-scrollbar{display:none}
.wc-header-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;font-size:8px;line-height:20px}
.wc-online{color:#8de98c;font-size:10px}
.wc-status{color:#f1d06e}
.wc-status[data-state="ok"]{color:#8de98c}
.wc-status[data-state="error"]{color:#ff9c8b}
.wc-status[data-state="wait"]{color:#e1c477}
.wc-maximize{pointer-events:auto;flex:none;width:20px;height:20px;border:1px solid #d5c08b88;border-radius:4px;background:#07100a66;color:#fff7dc;font-size:13px;line-height:1;transition:background .4s ease,border-color .4s ease}
.wc-maximize:hover{background:#07100a99;border-color:#e6c67a}
.wc-panel.wc-maximized .wc-maximize:hover{color:#fff6d8;background:#e6c67a22;border-color:#e6c67a;box-shadow:0 2px 8px #0009,0 0 0 2px #e6c67a1a}
.wc-panel.wc-maximized .wc-maximize:focus-visible{outline-offset:2px;outline:2px solid #e6c67a}
.wc-idle .wc-form{border-top-color:transparent;background:transparent}
.wc-idle .wc-input{border-color:transparent;background:transparent;box-shadow:none}
.wc-idle .wc-send,.wc-idle .wc-maximize{border-color:transparent;background:transparent;box-shadow:none}
.wc-panel.wc-maximized{position:absolute;z-index:100;top:40px;right:auto;bottom:86px;left:0;width:min(430px,100%);height:auto;min-height:0;transform:none;border-color:#d5c08b99;border-radius:5px;background:rgba(3,8,6,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 4px 18px #0009}
.wc-panel.wc-reduced-transparency{background:rgba(3,8,6,.64);border-right-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.wc-panel.wc-idle.wc-reduced-transparency{background:rgba(3,8,6,.56);-webkit-backdrop-filter:none;backdrop-filter:none}
.wc-panel.wc-maximized.wc-reduced-transparency{background:rgba(3,8,6,.64);border-right-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.wc-panel.wc-maximized.wc-idle.wc-reduced-transparency{background:rgba(3,8,6,.56);-webkit-backdrop-filter:none;backdrop-filter:none}
.wc-panel.wc-reduced-transparency:not(.wc-idle){background:rgba(2,5,4,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
.wc-panel.wc-maximized.wc-reduced-transparency:not(.wc-idle){background:rgba(2,5,4,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
#worldChat.wc-maximized.wc-reduced-transparency::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.wc-panel.wc-maximized .wc-topline{min-height:44px;padding:4px 5px}
.wc-panel.wc-maximized .wc-header-right .wc-online,.wc-panel.wc-maximized .wc-header-right .wc-status{display:none}
.wc-panel.wc-maximized .wc-maximize{position:absolute;top:5px;right:5px;z-index:3;width:36px;height:36px;border:2px solid #e6c67a;border-radius:50%;background:#07100acc;box-shadow:0 2px 9px #000c;font-size:26px;line-height:1}
.wc-panel.wc-maximized.wc-idle .wc-topline{opacity:1;visibility:visible;pointer-events:none;transition:none}
.wc-panel.wc-maximized.wc-idle .wc-tabs,.wc-panel.wc-maximized.wc-idle .wc-header-right{visibility:hidden}
.wc-panel.wc-maximized.wc-idle .wc-maximize{opacity:1;visibility:visible;pointer-events:auto}
#worldChat.wc-maximized{top:0;bottom:10px}
#worldChat.wc-maximized .wc-toggle{position:absolute;left:104px;bottom:0}
#worldChat.wc-maximized::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(3,8,6,.56);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wc-list,.wc-system-list{flex:1;min-height:0;overflow:auto;padding:3px 7px 5px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#81907855 transparent;text-shadow:0 1px 3px #000,0 0 2px #000;user-select:none;-webkit-user-select:none}
.wc-list[hidden],.wc-system-list[hidden]{display:none}
.wc-line{font-size:clamp(10px,2.7vw,12px);line-height:1.5;color:#f1f0d7;overflow-wrap:anywhere}
.wc-time{color:#ddd9c2}
.wc-name{color:#9ff18a;font-weight:700}
.wc-name.wc-profile-link{font:inherit;font-weight:700;line-height:inherit;text-align:inherit;cursor:default;background:0 0;border:0;padding:0;text-decoration:none;display:inline}
.wc-name.wc-profile-link:hover{color:#d5ffc8;text-underline-offset:2px;text-decoration:underline}
.wc-name.wc-boyo-name{color:#69aaff}
.wc-name.wc-hard-name{color:#ff7070}
.wc-name.wc-gm-name{color:#ffbf00;-webkit-text-stroke:.45px #000;paint-order:stroke fill;text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,-1px 0 0 #000,1px 0 0 #000,-1px 1px 0 #000,0 1px 0 #000,1px 1px 0 #000}
.wc-faction{color:#a8edb2}
.wc-level{color:#d6f2b6}
.wc-message-text{color:#f5f2db}
.wc-shared-item-link{display:inline;padding:0;border:0;background:none;color:#ffd24a;font:inherit;text-decoration:none;text-shadow:0 1px 3px #000,0 0 2px #000;cursor:default}
.wc-shared-item-link:hover{color:#fff0a0;text-decoration:underline;text-underline-offset:2px}
.wc-system-list{color:#f1f0d7;font-size:11px;line-height:1.45}
.wc-system-list>div{padding:1px 0}
.log-item-link{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;text-shadow:0 1px 3px #000,0 0 2px #000;cursor:default}
.log-item-link:hover{filter:brightness(1.25);text-decoration:underline;text-underline-offset:2px}
.wc-form{flex:none;padding:4px 6px;background:#07100a20;border-top:1px solid #e0d5a633;transition:background .4s ease,border-color .4s ease}
.wc-compose{display:flex;gap:5px}
.wc-emoji-toggle{display:grid;flex:none;width:27px;height:27px;min-height:0;place-items:center;padding:0;border:1px solid #d5c68c77;border-radius:3px;background:#fff1c20c;color:#fff1c5}
.wc-emoji-toggle img{display:block;width:17px;height:17px;object-fit:contain}
.wc-emoji-toggle:hover{border-color:#f0d286aa;background:#f0d28618}
.wc-emoji-picker{position:absolute;right:6px;bottom:43px;left:auto;z-index:9999;display:flex;flex-direction:column;width:min(320px,calc(100% - 12px));height:min(250px,calc(100% - 54px));min-height:90px;overflow:hidden;border:1px solid #d5c08b99;border-radius:5px;background:rgba(7,13,10,.97);box-shadow:0 5px 18px #000b;color:#f3ead3}
.wc-emoji-picker[hidden]{display:none}
.wc-panel.wc-emoji-open:not(.wc-maximized){min-height:min(300px,calc(100dvh - 80px))}
.wc-emoji-toolbar{display:flex;flex:none;align-items:center;justify-content:space-between;height:27px;padding:0 6px;border-bottom:1px solid #d5c08b55;color:#ffe894;font-size:10px}
.wc-emoji-close{width:21px;height:21px;min-height:0;padding:0;border:1px solid #d5c08b66;border-radius:50%;color:#fff2c8;font-size:15px;line-height:1}
.wc-emoji-grid{display:grid;flex:1;min-height:0;grid-template-columns:repeat(auto-fill,minmax(29px,1fr));align-content:start;gap:2px;overflow:auto;padding:4px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#81907866 transparent}
.wc-emoji-item{width:100%;height:29px;min-height:0;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;font:19px/1 system-ui,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.wc-emoji-item:hover{border-color:#d5c08b88;background:#d5c08b22}
.wc-input{min-width:0;flex:1;height:27px;padding:0 7px;border:1px solid #e0d6ad55;border-radius:3px;background:rgba(0,0,0,.05);color:#f3ead3;font:11px var(--font);box-shadow:none;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;user-select:text;-webkit-user-select:text}
.wc-input::placeholder{color:#e1ddce99}
.wc-send{flex:none;height:27px;min-height:0;padding:0 9px;border:1px solid #d5c68c77;border-radius:3px;background:#fff1c20c;color:#fff1c5;font-size:10px;line-height:1;transition:background .4s ease,border-color .4s ease}
.wc-send:hover:not(:disabled){border-color:#f0d286aa;background:#f0d28618;color:#fff5d0}
.wc-send:disabled{opacity:.5}
.wc-line.wc-pending{opacity:.78}
.wc-delivery{color:#f0b88e;font-size:.9em}
.wc-tabs{position:static;display:flex;flex:none;gap:5px;padding:0;background:none;border:0}
.wc-tab{flex:none;min-height:18px;padding:1px 3px;border:0;border-bottom:1px solid transparent;border-radius:0;color:#7fe1d2;font-size:10px;line-height:1.3;text-shadow:0 1px 2px #000}
.wc-tab.active{border-color:#d9bd6e99;background:none;color:#ffe894;font-weight:700}
.wc-tab:active{background:#88732d99}
.wc-tab.wc-ranking{color:#ffe894;border:1px solid #d9bd6e77;border-radius:4px;padding:1px 5px;font-weight:700}
.wc-tab.wc-ranking:hover{color:#fff1b8;background:#8e762522;border-color:#f4d77d}
#miniFloat{display:none;position:absolute;z-index:9;touch-action:none;cursor:grab}
#miniFloat.open{display:block}
#miniFloat:active{cursor:grabbing}
#miniCanvas{display:block}
#bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.85) brightness(.8);transition:background-image .6s}
#battle::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 55%,transparent 45%,#0009 100%)}
#arena{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.enh{color:#7fe3ff;font-size:.85em;text-shadow:0 0 4px #2aa8ff}
/* Luyen Cong (survival.js) */
#svHud{pointer-events:none}
#svTopBar{position:absolute;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;align-items:center;z-index:5;pointer-events:auto}
#svGoldWrap{font-size:12px;color:#ffd24a;background:#000a;padding:2px 8px;border-radius:10px;border:1px solid #e6c67a44;}
#svHud #svPauseBtn{position:static;font-size:13px;padding:3px 10px}
#svPad{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:5;pointer-events:auto}
#svPad .pbtn{width:46px;height:46px;border-radius:50%;background:#1c2520dd;border:2px solid #e6c67a88;color:#fff;position:relative;overflow:hidden;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;user-select:none;box-shadow:0 3px 6px #0009}
#svPad .pbtn:active{transform:scale(0.95)}
#svPad .pbtn.ult{width:58px;height:58px;border-color:#e6c67a;;background:radial-gradient(circle,#2d3e33,#131a16)}
#svPad .pbtn.ult .lock{font-size:8px;color:#ff9865;font-weight:normal;line-height:1}
#svPad .pbtn.bomb{border-color:#ff7a45;background:#261814dd}
#svPad .pbtn.bomb .bomb-icon{position:relative;z-index:1;width:32px;height:32px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}
#svPad .pbtn.bomb .bomb-count{position:absolute;right:2px;bottom:2px;z-index:5;min-width:13px;height:13px;padding:0 2px;display:grid;place-items:center;box-sizing:border-box;border:1px solid #ff9a68;border-radius:9px;background:#241713;color:#fff4df;font:600 8px/1 var(--font);text-shadow:0 1px 2px #000;box-shadow:0 1px 3px #000b;pointer-events:none}
#svPad .pbtn.pot .potion-icon{inset:2px auto auto 50%;width:30px;height:30px;transform:translateX(-50%)}
#svPad .pbtn:disabled{opacity:0.45;filter:grayscale(0.8);cursor:not-allowed}
#svPad .pbtn .cd{position:absolute;inset:0;pointer-events:none;background:conic-gradient(#000b var(--p, 0%), transparent 0)}
body.sv #panel,body.sv #tabs,body.sv #pad,body.sv #autoControls,body.sv #townBar,body.sv #mainSk{display:none!important}
body.sv #hud .bar.hp,body.sv #hud .bar.mp{display:none}
body.sv #hud{grid-template-columns:minmax(0,1fr)}
body.sv #hud .bar.xp{grid-column:auto}
body.sv #battle{flex:1 1 auto}
.svopts{display:grid;gap:6px}
.svopt{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;gap:0 8px;align-items:center;text-align:left;padding:8px;border:1px solid var(--gold2);border-radius:8px;background:linear-gradient(#1f2a25,#121a16)}
.svopt:hover{border-color:var(--gold);box-shadow:0 0 8px #e6c67a55}
.svopt img{grid-row:1/3;width:40px;height:40px;object-fit:contain}
.svopt b{color:var(--gold)} .svopt .new{font-style:normal;font-size:9px;padding:1px 4px;border-radius:3px;background:var(--red);color:#fff;vertical-align:1px} .svopt em{font-style:normal;color:#ffd24a;letter-spacing:1px} .svopt small{grid-column:2/4;color:var(--dim);font-size:11px}
.sv-pause{display:grid;gap:7px}.sv-pause>.btnrow{margin-top:0}.sv-pause-title{margin:0 24px 0 0;font-size:16px;color:#f3d68c}.sv-pause-title small{font:12px var(--font);color:var(--dim)}
.sv-run-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 2px}.sv-run-meta span{padding:5px 9px;border:1px solid #c1a35b44;border-radius:999px;background:linear-gradient(180deg,#27271c,#151a16);color:#ded6bd;font-size:12px;white-space:nowrap}.sv-run-meta span:first-child{color:#ffe08a}
.sv-stats-panel{overflow:hidden;padding:7px 8px;border:1px solid #82928055;border-radius:10px;background:linear-gradient(145deg,#111a15eF,#0b110eE8);box-shadow:inset 0 1px #ffffff08}
.sv-stats-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px}.sv-stats-heading b,.sv-passives>b{color:#e7d39a;font-size:12px}.sv-stats-heading small{color:var(--dim);font-size:12px}
.sv-table-wrap{overflow-x:auto}.svtab{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px;margin:0}.svtab th,.svtab td{padding:4px 6px;border-bottom:1px solid #b9c9b21b;text-align:right;white-space:nowrap}.svtab th{color:#a9b6aa;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.svtab th:first-child,.svtab td:first-child{text-align:left;width:55%}.svtab tbody tr:first-child{background:linear-gradient(90deg,#d6b55713,transparent)}.svtab tbody tr:last-child td{border-bottom:0}.svtab td:nth-child(3){color:#bce6d9}.sv-skill{display:flex;align-items:center;gap:7px;min-width:0}.sv-skill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-stars{flex:none;color:#ffd24a;letter-spacing:1px;font-size:12px;text-shadow:0 0 5px #ffbd3377;white-space:nowrap}
.sv-passives{display:grid;gap:5px;margin-top:6px;padding-top:6px;border-top:1px solid #b9c9b222}.sv-perk-list{display:flex;flex-wrap:wrap;gap:4px}.sv-perk-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 6px;border:1px solid #697c6844;border-radius:999px;background:#101914;color:#c4cbbd;font-size:12px}.sv-perk-chip .sv-stars{font-size:12px;letter-spacing:0}
@media(max-width:520px){.sv-stats-panel{padding:7px}.svtab th,.svtab td{padding:5px 4px}.svtab th:first-child,.svtab td:first-child{width:51%}.sv-skill{gap:4px}.sv-stars{letter-spacing:0;font-size:12px}.sv-run-meta{gap:4px}.sv-run-meta span{padding:4px 7px;font-size:12px}}
/* thanh chieu khi Luyen Cong: 6 o chu dong + 6 o bi dong, luon hien */
#svBar{position:absolute;left:4px;right:4px;top:28px;z-index:4;pointer-events:none}
.svrow{display:grid;grid-template-columns:repeat(6,38px);gap:4px;justify-content:center;margin-bottom:4px}
.svcell{position:relative;width:38px;height:38px;border:1px solid var(--gold2);border-radius:6px;background:#0b100ea8;overflow:hidden;pointer-events:auto}
.svcell img{width:100%;height:100%;object-fit:contain;display:block}
.svcell .star{position:absolute;left:1px;bottom:0;font-size:9px;letter-spacing:-1px;color:#ffd24a;text-shadow:0 0 3px #000}
.svcell .cd{position:absolute;inset:0;background:conic-gradient(#000c calc(var(--cd,0)*360deg),transparent 0)}
.svcell-evo{position:absolute;z-index:2;right:2px;top:0;color:#ffd24a;font-size:11px;line-height:1;font-style:normal;text-shadow:0 0 4px #000,0 0 5px #ffd24a88}
.sv-evo-tag{flex:none;color:#ffd24a;font-size:11px;font-style:normal;text-shadow:0 0 4px #ffd24a88}.sv-evo-note{color:#ffd24a}
.svrow.pas .svcell{border-color:var(--line2)} .svrow.pas .svcell img{opacity:.85}
/* phan thuong (rewards.js) */
#giftBtn{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#3a2f1c,#120d06);font-size:16px;line-height:30px}
#giftBtn.on::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:#e0402a;box-shadow:0 0 0 2px #0f1613;animation:gpulse 1.2s infinite}
@keyframes gpulse{50%{transform:scale(1.3)}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.day{padding:6px 3px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);text-align:center;font-size:11px}
.day b{display:block;color:var(--gold);font-size:11px} .day small{display:block;color:var(--dim);font-size:9.5px;line-height:1.2}
.day.cur{border-color:var(--gold);box-shadow:0 0 6px #e6c67a55} .day.got{opacity:.5} .day.got b::after{content:" ✓"}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 8px;margin:4px 0;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.qrow small{color:var(--dim);font-size:11px} .qrow span small{display:block} .qrow.lock{opacity:.5}
.petpick{display:block;max-height:40vh;overflow:auto;padding-right:2px}
/* Thẻ Đồng hành mở modal riêng (pet-card-modal): bỏ giới hạn 40vh của danh sách
   loài, để tràn hết hộp — hộp tự cuộn, card không bị chèn ép cùng 17 tab Phần thưởng */
#modal.pet-card-modal .petpick{max-height:none;overflow:visible;padding-right:0}
.petgroup{margin:7px 0 9px}.petgroup h4{display:flex;align-items:center;gap:7px;margin:0 0 4px;color:var(--gold);font-size:10px;font-weight:600}.petgroup h4::after{content:"";height:1px;flex:1;background:var(--line)}.petgroup h4 small{order:1;color:var(--dim);font-size:8px;font-weight:400;white-space:nowrap}
.petgroup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.petgroup-grid button{padding:4px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-size:10px}
.petgroup-grid button.on{border-color:var(--gold)} .petgroup-grid button.active:not(.on){border-color:#648e70} .petgroup-grid img{display:block;width:100%;height:44px;object-fit:contain} .petgroup-grid b{display:block;font-weight:500}
.petgroup-grid .pet-active-hint{display:block;min-height:10px;margin-top:1px;color:#9fe36a;font-size:8px;line-height:1.2}
.petgroup-grid .pet-skill-hint{display:block;margin-top:3px;color:var(--dim);font-size:8px;line-height:1.3}
.pet-card-tags,.pet-role-tags{display:flex;flex-wrap:wrap;gap:2px}
.pet-card-tags{justify-content:center;min-height:13px;margin-top:2px}
.pet-role-tag{display:inline-flex;align-items:center;padding:1px 4px;border:1px solid #536b5d;border-radius:8px;background:#24332b;color:#c9e5b9;font-size:8px;line-height:1.35;white-space:nowrap}
.pet-role-block{padding:5px 7px;margin-top:5px;border:1px solid #536b5d;border-radius:6px;background:#19251f}
.pet-role-block>b{display:block;color:var(--gold);font-size:9px;letter-spacing:.04em}
.pet-role-block p{margin-top:4px;color:#d0d9cb;font-size:10px;line-height:1.4}
.pet-role-block p b{color:#9fe36a}
.pet-preview{padding:6px 8px;margin:5px 0 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
.pet-preview-head{display:flex;align-items:center;gap:8px}.pet-preview-head img{width:40px;height:40px;object-fit:contain}.pet-preview-head span{display:grid;gap:2px;flex:1;min-width:0}.pet-preview-head span small{color:var(--dim);font-size:9px}.pet-preview-head span b{font-size:12px;color:var(--gold)}
.petskills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:6px 0 10px}
.petskill{padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.petskill-head{display:flex;align-items:center;gap:7px;min-height:34px}.petskill-head img{width:34px;height:34px;flex:none;object-fit:contain;image-rendering:pixelated;border-radius:4px;background:#101713}.petskill b,.petskill small{display:block}.petskill b{font-size:11px;color:var(--gold)}.petskill small{margin-top:2px;color:var(--dim);font-size:10px;line-height:1.35}.petskill.lock{opacity:.58}
#hud{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 5px;padding:3px;border:1px solid #927847;border-radius:5px;
  background:linear-gradient(180deg,#111a16,#080e0b);box-shadow:inset 0 1px 0 #fff2,0 1px 3px #0008;pointer-events:none}
#hud .bar.xp{grid-column:1/3}
#mainSk{position:absolute;left:8px;top:3px;z-index:1;font-size:11px;color:var(--gold);text-shadow:0 0 3px #000}
#skBuffs{position:absolute;z-index:5;top:24px;left:12px;display:flex;gap:3px;pointer-events:none}
#skBuffs .sti{display:flex;flex-direction:column;align-items:center;min-width:26px;padding:1px 2px;border-radius:3px;background:#0009;text-align:center}
#skBuffs .sti img{display:block;width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
#skBuffs .sti b{color:#62ff72;font:700 9px/11px var(--font);text-shadow:0 1px 2px #000}
/* Keep active buffs below the two-row training skill bar. */
body.sv #skBuffs{top:116px;left:8px;right:8px;z-index:3;flex-wrap:wrap;align-content:flex-start}

#panel{flex:1;min-height:0;overflow:hidden;background:var(--panel);border-top:1px solid var(--gold2)}
.ios-switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;cursor:pointer}
.ios-switch-row input{position:absolute;width:1px;height:1px;opacity:0}
.ios-switch-row .ios-switch{position:relative;flex:0 0 44px;width:44px;height:26px;border:1px solid #586159;border-radius:999px;background:#303833;transition:background .18s ease,border-color .18s ease}
.ios-switch-row .ios-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#d5d8d2;box-shadow:0 1px 3px #0008;transition:transform .18s ease,background .18s ease}
.ios-switch-row input:checked+.ios-switch{border-color:#e6c67a;background:#8b6c2e;box-shadow:0 0 7px #e6c67a55,inset 0 0 0 1px #fff2}
.ios-switch-row input:checked+.ios-switch::after{transform:translateX(18px);background:#fff1c0}
.setting-switches{display:grid;gap:6px}
.setting-segment,.account-segment{position:static;display:flex;align-items:center;flex:none;gap:5px;width:fit-content;margin:0;padding:0;border:0;background:none}
.setting-segment button,.account-segment button{flex:none;min-height:22px;padding:2px 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--dim);font:inherit;font-size:11px;line-height:1.3;white-space:nowrap}
.setting-segment button.on,.account-segment button.on{border-color:var(--gold2);background:none;color:var(--gold);font-weight:700;box-shadow:none}
.setting-pane{display:grid;gap:6px}
.account-section{display:grid;gap:7px;margin-bottom:8px}
.account-nav-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.support-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:36px;padding:7px 12px;border:1px solid #ee879a;border-radius:5px;background:linear-gradient(180deg,#63323a 0%,#351b22 100%);color:#ffe9ed;font:700 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.4px;box-shadow:inset 0 1px 0 #fff3,0 2px 7px #0006,0 0 8px #f37c9426;cursor:pointer;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.support-button span{font-size:14px;line-height:1;text-shadow:0 0 7px #ff9aab88}
.support-button:hover{border-color:#ffb2c0;background:linear-gradient(180deg,#80414d 0%,#48242d 100%);box-shadow:inset 0 1px 0 #fff5,0 3px 10px #0008,0 0 10px #f37c9440}
.support-button:active{transform:translateY(1px);background:linear-gradient(180deg,#512a32 0%,#2c171d 100%)}
.support-button:focus-visible{outline:2px solid #ffc5cf;outline-offset:2px}
.support-dialog{width:min(100%,460px);margin:0 auto;text-align:center}
.support-heading{display:flex;align-items:center;justify-content:center;gap:11px;margin:4px 36px 14px;color:#ffe9ed}
.support-heading>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e98498;border-radius:50%;background:linear-gradient(145deg,#63323a,#351b22);color:#ffd5dc;font-size:20px;box-shadow:0 0 14px #f37c9430}
.support-heading div{text-align:left}
.support-heading small{display:block;margin-bottom:2px;color:#e9aab6;font:600 9px/1.2 var(--font);letter-spacing:1.2px}
.support-heading h3{margin:0;color:#ffe9ed;font-size:18px}
.support-message{min-height:6em;margin:0 auto 14px;color:#f5eee8;font-size:14px;font-weight:600;line-height:1.75}
.support-word{display:inline-block;animation:support-word-appear .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes support-word-appear{from{opacity:0;transform:translateY(4px);filter:blur(1px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.support-qr{width:min(100%,320px);margin:0 auto 14px;padding:7px;border:1px solid #f3c6d0;border-radius:12px;background:#fff;box-shadow:0 8px 24px #0005;opacity:0;transform:translateY(24px) scale(.97);transition:opacity 1.8s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.support-qr.is-visible{opacity:1;transform:translateY(0) scale(1)}
.support-qr img{display:block;width:100%;max-height:min(44vh,340px);object-fit:contain;border-radius:7px}
.support-actions{justify-content:center;margin-top:12px}
@media(prefers-reduced-motion:reduce){.support-button,.support-qr{transition:none}.support-word{animation:none}}
.account-pane{display:grid;gap:6px}
.setting-font-row{display:grid;grid-template-columns:max-content 120px;align-items:center;gap:12px;width:fit-content}
.setting-font-row select{width:120px;min-width:0}
.difficulty-setting{display:grid;gap:5px;margin:4px 0 8px}
.difficulty-segment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:100%;padding:3px;border:1px solid var(--line2);border-radius:7px;background:#101713}
.difficulty-option{min-width:0;min-height:30px;padding:4px 3px;border:1px solid transparent;border-radius:5px;color:var(--dim);font-size:11px;line-height:1.2;white-space:nowrap}
.difficulty-option.on{border-color:var(--gold2);background:linear-gradient(180deg,#796333,#3e321d);color:#fff0c2;font-weight:700;box-shadow:inset 0 1px #fff3,0 1px 3px #0008}
.difficulty-description{font-size:10.5px;line-height:1.35}
.save-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:5px 0 8px}
.save-action-row .btn{width:100%;min-width:0;padding-inline:6px;font-size:12px;white-space:nowrap}
.save-method-label{margin:10px 8px 4px;color:var(--gold);font-weight:600}
.character-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
.character-actions .btn{min-width:0;padding:6px 3px;font-size:11px;white-space:nowrap}
.auto-config{display:grid;gap:8px;max-width:760px;margin:0 auto;padding-top:2px}
.auto-section{padding:7px 9px 8px;border:1px solid #7e6634;border-radius:9px;background:linear-gradient(180deg,#171a13,#10140f);box-shadow:inset 0 1px 0 #fff1,0 2px 4px #0005}
.auto-section h4{margin:0 0 4px;padding:0 3px 3px;border-bottom:1px solid #80672d;color:#f0cc68;font-size:14px;line-height:1.2}
.auto-section .ios-switch-row{min-height:31px;padding:1px 2px}
.auto-section .ios-switch-row>span:first-child{min-width:0;line-height:1.2}
.auto-section small{display:block;margin:4px 2px 0;color:var(--dim);font-size:10.5px;line-height:1.35}
.auto-range{display:grid;grid-template-columns:minmax(82px,.65fr) minmax(0,1.7fr);gap:8px;align-items:center;margin:4px 2px}
.auto-range>span{color:var(--text)}
.auto-range [role="group"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.auto-range button{min-height:31px;padding:4px 8px;border:1px solid #8e7139;border-radius:7px;background:linear-gradient(180deg,#201c13,#11120f);color:var(--text)}
.auto-range button[aria-pressed="true"]{border-color:#f2cf69;background:radial-gradient(ellipse at center,#6c5520 0%,#30240d 72%);color:#ffe27e;box-shadow:0 0 8px #e9c64f77,inset 0 0 0 1px #ffe49c66}
.auto-skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:5px auto 0;max-width:470px}
.auto-skill{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-width:0;cursor:pointer;text-align:center}
.auto-skill>img,.auto-skill-empty{display:grid;place-items:center;width:48px;height:48px;max-width:100%;border:1px solid #bd9749;border-radius:50%;background:radial-gradient(#164a38,#06130e 72%);object-fit:contain;box-shadow:0 1px 3px #0008}
.auto-skill.empty{opacity:.45;cursor:default}
.auto-skill>small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.auto-skill input{position:absolute;width:1px;height:1px;opacity:0}
.auto-mini-switch{position:relative;display:block;width:38px;height:20px;border:1px solid #60675e;border-radius:999px;background:#303833;transition:background .18s ease,border-color .18s ease}
.auto-mini-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#c9cec7;box-shadow:0 1px 3px #0008;transition:transform .18s ease,background .18s ease}
.auto-skill input:checked+.auto-mini-switch{border-color:#e6c67a;background:#806126;box-shadow:0 0 6px #e6c67a66}
.auto-skill input:checked+.auto-mini-switch::after{transform:translateX(18px);background:#fff1c0}
.auto-threshold{display:grid;grid-template-columns:minmax(0,1fr) minmax(94px,30%);gap:8px;align-items:center}
.auto-stepper{display:grid;grid-template-columns:28px minmax(30px,1fr) 28px;align-items:center;overflow:hidden;border:1px solid #9a7939;border-radius:999px;background:#17160f;text-align:center}
.auto-stepper button{height:27px;border:0;background:linear-gradient(180deg,#594724,#31240f);color:#ffe08a;font-size:17px;line-height:1}
.auto-stepper span{font-variant-numeric:tabular-nums;white-space:nowrap}
.auto-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:3px 0 0 12px}
.auto-checks .ios-switch-row{font-size:11px}
.auto-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}
.auto-footer .btn{flex:0 0 auto}
@media(max-width:520px){
  .auto-config{gap:6px}
  .auto-section{padding:6px 7px}
  .auto-section h4{font-size:13px}
  .auto-section .ios-switch-row{font-size:12px;gap:7px}
  .auto-range{grid-template-columns:74px minmax(0,1fr);gap:5px;font-size:12px}
  .auto-range button{padding:4px 3px;font-size:12px}
  .auto-skill-grid{gap:3px}
  .auto-skill>img,.auto-skill-empty{width:42px;height:42px}
  .auto-threshold{grid-template-columns:minmax(0,1fr) 96px;gap:5px}
  .auto-checks{margin-left:3px;gap:2px}
  .auto-checks .ios-switch-row{font-size:10px}
}
.tab{height:100%;overflow-y:auto;padding:10px 10px 16px}
.tab.tab-entering,.gift-content-entering{animation:tab-enter-wuxia .28s cubic-bezier(.2,.75,.25,1) both}
@keyframes tab-enter-wuxia{0%{opacity:0;transform:translateY(8px);filter:brightness(.92)}65%{opacity:1;transform:translateY(-1px);filter:brightness(1.06)}100%{opacity:1;transform:translateY(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.tab.tab-entering,.gift-content-entering{animation:none}}
h3{font:400 14px var(--font);color:var(--gold);margin:12px 0 6px;display:flex;justify-content:space-between;align-items:baseline}
h3 small{font:12px var(--font);color:var(--dim)}
#mBody>h3{gap:8px;padding-right:38px}
.attr-heading{align-items:center;gap:6px;white-space:nowrap}
.attr-heading-controls{display:inline-flex;align-items:center;gap:4px}
.attr-heading-controls small{white-space:nowrap}
.attr-heading-controls .attr-respec,.attr-heading-controls .attr-suggest{display:inline-grid;place-items:center;height:26px;min-height:26px;border-radius:5px;font-size:12px;line-height:1}
.attr-heading-controls .attr-respec{width:28px;padding:0;border:1px solid #a55;color:#f88;background:#2e2222;font-size:16px;font-weight:700}
.attr-heading-controls .attr-respec:disabled{opacity:.35;cursor:default}
.attr-heading-controls .attr-suggest{padding:0 8px;border:1px solid var(--gold2);color:var(--gold);background:#26332d}
.attr-heading-controls .attr-suggest:hover{border-color:var(--gold);background:#334137}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.books{display:flex;flex-direction:column;gap:6px}
.book-row{display:flex;align-items:center;gap:8px}
.book-row img{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.book-row .book-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.book-row .book-info small{font-size:11px;white-space:nowrap}
.char-power-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.char-power-row>small{font-size:11px;white-space:nowrap}
.char-title-row{display:flex;align-items:center;gap:8px;min-width:0;margin-top:4px}
.char-actions-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.btn.title-count-btn{padding:3px 5px;border-color:#bd984a;border-radius:4px;color:#f1d27f;background:linear-gradient(180deg,#574728 0%,#29261b 100%);box-shadow:inset 0 0 0 1px #e7c56b33,0 1px 3px #0008;font-size:10px;line-height:1;letter-spacing:.1px}
.btn.title-count-btn:hover:not(:disabled){border-color:#f0d286;color:#fff2c9;background:linear-gradient(180deg,#6a5731 0%,#332d1d 100%)}
.char-title-worn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.char-title-worn b{white-space:nowrap}
.row{display:flex;gap:6px;align-items:center}
.btn{min-height:34px;padding:7px 16px;border:1px solid #a8864a;border-radius:6px;color:#f3e5c2;
  background:linear-gradient(180deg,#ffffff18 0%,transparent 48%,#0004 100%),linear-gradient(180deg,#665334 0%,#403321 52%,#2a2319 100%);
  box-shadow:inset 0 1px 0 #fff4,inset 0 -1px 0 #0008,0 2px 4px #0007;text-shadow:0 1px 2px #000;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,filter .12s ease}
.btn:hover:not(:disabled){border-color:#f0d286;color:#fff2c9;filter:brightness(1.1);box-shadow:inset 0 1px 0 #fff6,0 0 0 1px #e6c67a33,0 3px 7px #0009;transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #0009,inset 0 1px 0 #fff2}
.btn.sm{min-height:27px;padding:4px 10px;font-size:12px}
.btn.sm.detail-count-btn{min-height:20px;padding:2px 5px;border-color:#a8864a;border-radius:3px;color:#e8cb7b;background:#080d0b;box-shadow:inset 0 0 0 1px #b9913826;font-size:10px;line-height:1;white-space:nowrap}
.btn.sm.detail-count-btn:hover:not(:disabled){border-color:#f0d286;color:#fff2c9;background:#151a15;box-shadow:inset 0 0 0 1px #e7c56b55,0 1px 3px #0008;filter:none;transform:none}
.btn.sm.title-count-btn{min-height:20px;padding:2px 5px;border-radius:3px;font-size:10px;line-height:1;white-space:nowrap}
.btn.on{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px #e6c67a55,0 0 8px #e6c67a33}
.btn.red{border-color:#9b5140;background:linear-gradient(180deg,#71392e 0%,#4d241c 52%,#321710 100%);color:#ffe1d3}
.btn.red:hover:not(:disabled){border-color:#e28a6f;filter:brightness(1.1)}
.btn.soft-red{border-color:#86524a;background:linear-gradient(180deg,#352824 0%,#29201e 100%);color:#e6b5a9}
.btn.soft-red:hover:not(:disabled){border-color:#b97869;background:linear-gradient(180deg,#49302b 0%,#332422 100%)}
.btn[disabled]{opacity:.48;box-shadow:inset 0 1px 0 #fff2,0 1px 2px #0006}
.btnrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center} .btnrow .btn{flex:0 1 auto}
.sp{flex:1}
.boss{color:#ff9a5a} .up{color:#9fe36a} .bad{color:#ff7b62}
.stagectl{display:flex;justify-content:space-between;align-items:center;gap:8px}
.log{max-height:150px;overflow:auto;font-size:12px;background:#0b100e;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.log div{padding:1px 0;border-bottom:1px solid #16201c}
.zlist{display:grid;gap:4px}
.zrow{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);text-align:left}
.zrow span{color:var(--dim);font-size:12px} .zrow.cur{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)} .zrow.lock b{color:var(--dim)}

.eqgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.slot{aspect-ratio:1;border:1px dashed var(--line2);border-radius:6px;display:grid;place-items:center;font-size:11px;color:var(--dim);text-align:center}
.attr{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;align-items:center;gap:8px;padding:3px 0}
.attr.editing{grid-template-columns:minmax(0,1fr) auto 122px}
.attr .pm{justify-content:flex-end}
.attr b{color:var(--gold)}
#t-char .attr-point-input{box-sizing:border-box;width:52px;height:26px;min-height:26px;padding:2px 4px;text-align:center;font-size:11px;line-height:1}
.attr-apply{width:28px;height:26px;border:1px solid #5b9b6b;border-radius:5px;background:#203d29;color:#a9f0b1;font-weight:700}
.attr-apply:hover:not(:disabled){border-color:#8cdaa0;background:#2c5738}
.attr-edit{width:28px;height:26px;border:1px solid var(--line2);border-radius:5px;background:#202a25;color:var(--dim);font-weight:700}
.attr-edit:hover{border-color:var(--gold2);color:var(--gold)}
.attr .pm .attr-cancel{width:34px;height:26px;padding:0 2px;border:1px solid #8c6255;border-radius:5px;background:#302321;color:#efb9a9;font-size:9px}
.plus{width:28px;height:26px;border-radius:5px;border:1px solid var(--gold2);color:var(--gold);font-weight:700;background:#26332d}
.stats{display:grid;grid-template-columns:minmax(max-content,1fr) auto;gap:3px 10px;font-size:13px}
.stats>span:nth-of-type(odd){white-space:nowrap}
.stats>span:nth-of-type(even){color:var(--gold);text-align:right}
.stats-main{grid-column:1/-1;display:grid;gap:1px}
.stats-main>b{font-weight:400;color:var(--dim)}
.stats-main>span{color:var(--gold);text-align:right}

.invbar{display:flex;flex-direction:column;gap:6px;align-items:stretch;margin-bottom:8px;font-size:12px}
.inv-capacity{display:flex;align-items:center;gap:8px;min-width:0}
.inv-capacity>.sp{flex:1 1 auto}
.inv-capacity>.btn{display:flex;flex:none;align-items:center;justify-content:center;min-height:38px;white-space:nowrap}
.inv-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.inv-actions>.btn{display:flex;flex:0 1 auto;align-items:center;justify-content:center;text-align:center;min-height:38px;white-space:nowrap}
.inv-tools{display:flex;align-items:center;gap:7px;margin:0 0 5px;color:var(--dim);font-size:11px}
.inv-tools>span{flex:none}
.inv-tools>.ui-select{flex:1;width:auto;min-width:0}
.inv-tools .ui-select-trigger{min-height:30px;padding:4px 8px;font-size:11px}
.inv-tools .btn{flex:none;min-height:30px;padding:4px 8px;font-size:10px}
.donkho-options{display:grid;gap:4px;margin-top:6px}
.donkho-options .loot-check{width:100%;min-height:28px}
.donkho-options .loot-filter-field{display:grid;grid-template-columns:1fr 112px;align-items:center;gap:8px;margin-top:4px;color:var(--dim);font-size:11px}
.donkho-options .loot-filter-field select,.donkho-options .loot-filter-field input[type="number"]{box-sizing:border-box;width:100%;min-height:30px;padding:4px 7px;font-size:11px}
.dk-level-controls{display:flex;align-items:center;gap:4px;min-width:0}
.dk-level-controls input[type="number"]{flex:1;min-width:0}
.dk-level-apply{flex:none;width:28px;height:30px;padding:0;border:1px solid #5b9b6b;border-radius:5px;background:#203d29;color:#a9f0b1;font-weight:700}
.dk-level-apply:hover{border-color:#8cdaa0;background:#2c5738}
.donkho-table{width:100%;border-collapse:collapse;margin:8px 0}
.donkho-table th,.donkho-table td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.donkho-table th{color:var(--dim);font-weight:400}
.donkho-table td:last-child{text-align:right}
@media(max-width:640px){
  .invbar{gap:6px}
  .inv-capacity{font-size:12px}
  .inv-capacity #bExpandInv{min-height:36px;padding:5px 9px;font-size:10px}
  .inv-actions{align-items:stretch}
  .inv-actions>.btn{box-sizing:border-box;flex:1 1 70px;width:auto;min-width:70px;height:auto;min-height:38px;padding:4px 5px;font-size:10px;line-height:1.1;white-space:normal}
}
input:not([type="checkbox"]):not([type="range"]):not([type="file"]),select,textarea{color-scheme:dark;min-width:0;min-height:34px;padding:6px 10px;border:1px solid #46594f;border-radius:6px;background:linear-gradient(180deg,#18211d 0%,#101713 100%);color:var(--text);font:13px/1.4 var(--font);box-shadow:inset 0 1px 3px #0008;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}
input:not([type="checkbox"]):not([type="range"]):not([type="file"]):hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:#718575}
input:not([type="checkbox"]):not([type="range"]):not([type="file"]):disabled,select:disabled,textarea:disabled{border-color:#354139;background:#151b18;color:#7d887f;box-shadow:none;opacity:.62;cursor:not-allowed}
#worldChat .wc-input{min-height:0;padding:0 7px;border:1px solid #e0d6ad55;border-radius:3px;background:rgba(0,0,0,.05);color:#f3ead3;font:11px var(--font);box-shadow:none;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
#worldChat .wc-input:hover:not(:disabled){border-color:#e0d6ad55}
#worldChat .wc-panel.wc-idle .wc-input{border-color:transparent;background:transparent;box-shadow:none;outline:none}
input::placeholder,textarea::placeholder{color:#879389;opacity:1}
select{appearance:none;-webkit-appearance:none;width:100%;padding-right:32px;background-color:#101713;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6c67a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),linear-gradient(180deg,#18211d 0%,#101713 100%);background-repeat:no-repeat;background-position:right 10px center,center;background-size:14px 14px,100% 100%;cursor:pointer}
select option{background:#111915;color:var(--text)}
.ui-select{position:relative;display:block;min-width:0}
.ui-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;width:100%;min-width:0;min-height:34px;padding:6px 10px;border:1px solid #46594f;border-radius:6px;background:linear-gradient(180deg,#18211d 0%,#101713 100%);color:var(--text);font:13px/1.4 var(--font);text-align:left;box-shadow:inset 0 1px 3px #0008;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}
.ui-select-trigger:hover,.ui-select.is-open .ui-select-trigger{border-color:#a8864a;box-shadow:inset 0 1px 3px #0008,0 0 0 1px #e6c67a22}
.ui-select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-trigger>i{flex:none;width:7px;height:7px;margin:0 2px 4px;border-right:1.5px solid #e6c67a;border-bottom:1.5px solid #e6c67a;transform:rotate(45deg);transition:transform .14s ease}
.ui-select.is-open .ui-select-trigger>i{margin-bottom:-3px;transform:rotate(225deg)}
.ui-select-menu{display:grid;align-content:start;gap:2px;overflow:auto;overscroll-behavior:contain;padding:4px;border:1px solid #927847;border-radius:7px;background:linear-gradient(180deg,#17211c,#0d1310);box-shadow:0 8px 24px #000c,inset 0 1px #ffffff12;scrollbar-width:thin;scrollbar-color:#66736b transparent}
.ui-select-menu[hidden]{display:none}
.ui-select-option{display:flex;align-items:center;width:100%;min-height:32px;padding:5px 8px;border:1px solid transparent;border-radius:4px;background:transparent;color:#d8d0bd;font:11px/1.3 var(--font);text-align:left;cursor:pointer;touch-action:manipulation}
.ui-select-option:hover,.ui-select-option:focus-visible{outline:none;border-color:#887044;background:#30291c;color:#fff0bf}
.ui-select-option.is-selected{border-color:#8c7243;background:linear-gradient(90deg,#42351e,#28251b);color:#f3d98e;box-shadow:inset 2px 0 #e6c67a}
textarea{display:block;width:100%;min-height:76px;resize:vertical}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.chip2 input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:none;width:15px;height:15px;margin:0;border:1px solid #718175;border-radius:4px;background:linear-gradient(180deg,#131b17,#0b100e);display:inline-grid;place-content:center;cursor:pointer;box-shadow:inset 0 1px 2px #0009}
.chip2 input[type="checkbox"]::before{content:"";width:5px;height:8px;border:solid #182016;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .12s ease;margin-top:-2px}
.chip2 input[type="checkbox"]:checked{border-color:#f0d286;background:linear-gradient(180deg,#f1d278,#b58a36);box-shadow:0 0 6px #e6c67a55}
.chip2 input[type="checkbox"]:checked::before{transform:rotate(45deg) scale(1)}
.chip2 input[type="checkbox"]:disabled{opacity:.5;cursor:not-allowed}
input[type="range"]{appearance:none;-webkit-appearance:none;flex:1;min-width:72px;width:100%;height:24px;padding:0;border:0;border-radius:0;background:transparent;accent-color:var(--gold);cursor:pointer;box-shadow:none}
input[type="range"]::-webkit-slider-runnable-track{height:7px;border:1px solid #44564c;border-radius:8px;background:linear-gradient(180deg,#111713,#202b24);box-shadow:inset 0 1px 2px #000a}
input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-7px;border:2px solid #f0d286;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0b8,#d4a94f 58%,#75521d 100%);box-shadow:0 0 7px #e6c67a77,0 2px 3px #000a}
input[type="range"]::-moz-range-track{height:7px;border:1px solid #44564c;border-radius:8px;background:linear-gradient(180deg,#111713,#202b24);box-shadow:inset 0 1px 2px #000a}
input[type="range"]::-moz-range-progress{height:7px;border-radius:8px;background:linear-gradient(90deg,#97712c,#f0d286)}
input[type="range"]::-moz-range-thumb{width:15px;height:15px;border:2px solid #f0d286;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0b8,#d4a94f 58%,#75521d 100%);box-shadow:0 0 7px #e6c67a77,0 2px 3px #000a}
.row input[type="range"]{width:auto}
.invbar select{width:auto}
.invbar #bStash.inv-drop-ready,.invbar #bSellAll.inv-drop-ready{position:relative;isolation:isolate;z-index:2;color:#8b978e;border-color:#77633d;background:linear-gradient(180deg,#1a211d 0%,#111714 100%);box-shadow:inset 0 1px 0 #ffffff0a;text-shadow:none}
.invbar #bStash.inv-drop-ready::after,.invbar #bSellAll.inv-drop-ready::after{content:"";position:absolute;inset:-2px;border:2px dashed #e6c67a;border-radius:8px;box-shadow:0 0 5px #f2cb6e66;pointer-events:none;z-index:3}
.invbar #bSellAll.inv-drop-ready{border-color:#75483d}
.invbar #bSellAll.inv-drop-ready::after{border-color:#e78368;box-shadow:0 0 5px #e5795d66}
.invbar #bStash.inv-drop-hover,.invbar #bSellAll.inv-drop-hover{transform:none;color:#f3e5c2;border-color:#e6c67a;background:linear-gradient(180deg,#393322 0%,#282317 100%);filter:brightness(1.12);box-shadow:inset 0 0 0 1px #fff5,0 0 14px #e6c67aaa;text-shadow:0 1px 2px #000}
.invbar #bSellAll.inv-drop-hover{border-color:#e28a6f;background:linear-gradient(180deg,#39231f 0%,#281915 100%);box-shadow:inset 0 0 0 1px #fff5,0 0 14px #e5795daa}
.invbar #bStash.inv-drop-ready:hover:not(:disabled),.invbar #bSellAll.inv-drop-ready:hover:not(:disabled),.invbar #bStash.inv-drop-ready:active:not(:disabled),.invbar #bSellAll.inv-drop-ready:active:not(:disabled){transform:none}
.invgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
#t-inv .invgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:3px;border:1px solid #554e3c;border-radius:3px;background:linear-gradient(180deg,#10120f,#0b0d0b)}
#t-inv .inv-empty-slot{border-color:#4b4b43;border-radius:1px;background:linear-gradient(180deg,#0b0d0b,#080908);box-shadow:inset 0 0 0 1px #0008;pointer-events:auto}
.inv-context-menu{position:fixed;z-index:10030;display:grid;gap:3px;width:max-content;min-width:174px;max-width:min(240px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:6px;border:1px solid #a8864a;border-radius:6px;background:linear-gradient(155deg,#20271f 0%,#111713 58%,#0a0e0c 100%);box-shadow:0 8px 24px #000c,inset 0 1px 0 #fff2,inset 0 0 0 1px #0008;color:var(--text);font:11px/1.35 var(--font)}
.inv-context-title{overflow:hidden;padding:3px 6px 6px;border-bottom:1px solid #a8864a66;color:var(--gold);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.inv-context-action{display:flex;align-items:center;width:100%;min-height:30px;padding:5px 8px;border:1px solid transparent;border-radius:4px;background:linear-gradient(180deg,#252a21,#171c17);color:#e8dec7;font:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.inv-context-action:hover,.inv-context-action:focus-visible{outline:none;border-color:#d0ae61;background:linear-gradient(180deg,#423820,#2a2519);color:#fff1bd;box-shadow:inset 0 1px 0 #fff3,0 0 7px #d7b65b35}
.inv-context-action.danger{border-color:#73443a;background:linear-gradient(180deg,#38231f,#211512);color:#ffd0b7}
.inv-context-action.danger:hover,.inv-context-action.danger:focus-visible{border-color:#d17759;background:linear-gradient(180deg,#563026,#341b17);color:#ffe2ce}
.inv-context-action.share{border-color:#77643f;color:#f0d99f}
.inv-context-action:disabled{opacity:.42;cursor:default;filter:saturate(.55)}
.potion-inv-cell{border-color:#82a7a1;background:radial-gradient(ellipse 82% 42% at 50% 112%,rgba(100,181,170,.2),transparent 60%),linear-gradient(180deg,#121b1a,#0c1012);cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.potion-inv-cell:hover{border-color:#b4d7cf;box-shadow:inset 0 0 8px #7bb7ac33,0 0 7px #7bb7ac33}
@media(max-width:600px){.invgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.potion-info{display:flex;align-items:center;gap:12px}.potion-info>img{width:54px;height:54px;object-fit:contain;image-rendering:auto}
.it{--item-glow:rgba(190,181,159,.17);--item-glow-soft:rgba(110,104,91,.08);position:relative;aspect-ratio:1;width:100%;border:1px solid var(--line2);border-radius:5px;background:radial-gradient(ellipse 82% 42% at 50% 112%,var(--item-glow) 0%,var(--item-glow-soft) 48%,transparent 100%),linear-gradient(180deg,#101419 0%,#0c1012 70%,#141416 100%);display:grid;place-items:center;overflow:hidden}
.it img{position:relative;z-index:1;max-width:88%;max-height:88%;image-rendering:auto;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;pointer-events:none}
.inv-reorder-hint{margin:-3px 0 6px}.inv-reorder-cell{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}.inv-reorder-cell.dragging{opacity:.42}.inv-reorder-cell.inv-reorder-target,#t-inv .inv-empty-slot.inv-reorder-target{outline:2px solid var(--gold);outline-offset:-2px;box-shadow:inset 0 0 14px #d5a84255,0 0 8px #d5a84266}
#t-inv .inv-reorder-cell{cursor:default}
.it i{position:absolute;right:2px;bottom:0;font:10px var(--font);color:var(--dim)}
.it em{position:absolute;left:2px;top:0;font:400 11px var(--font);color:#7f7}
.stash-draggable{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
#stInv .stash-draggable,#stBox .stash-draggable{cursor:default}
.stash-draggable img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.stash-draggable.dragging{opacity:.42}
.stash-draggable.stash-reorder-target{outline:2px solid var(--gold);outline-offset:-2px;box-shadow:inset 0 0 14px #d5a84255,0 0 8px #d5a84266}
.stash-empty-slot{border-style:dashed;border-color:#34443b;background:radial-gradient(ellipse 82% 42% at 50% 112%,rgba(185,134,52,.1) 0%,rgba(131,94,37,.06) 48%,transparent 100%),linear-gradient(180deg,#101419 0%,#0c1012 70%,#14120e 100%);pointer-events:none}
#stInv,#stBox{border-radius:6px;transition:background-color .12s ease,box-shadow .12s ease}
#stInv.stash-drop-active,#stBox.stash-drop-active{background:#d3ad4b12;box-shadow:inset 0 0 0 2px var(--gold)}
.stash-drag-ghost{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,-50%);opacity:.88;filter:drop-shadow(0 5px 10px #000b)}
.stash-drag-ghost>.it{width:100%;height:100%;box-sizing:border-box}
.it.r1{--item-glow:rgba(83,196,99,.26);--item-glow-soft:rgba(45,120,57,.13);border-color:#58b86b;box-shadow:inset 0 0 8px rgba(58,134,72,.4)}
.it.r2{--item-glow:rgba(255,204,72,.27);--item-glow-soft:rgba(153,111,35,.13);border-color:#ffd24a;box-shadow:inset 0 0 8px #a88420}
.it.r3{--item-glow:rgba(194,116,255,.24);--item-glow-soft:rgba(105,57,157,.13);border-color:#c77bff;box-shadow:inset 0 0 10px #7a3ab0}
.it.r4{--item-glow:rgba(255,155,56,.26);--item-glow-soft:rgba(151,79,27,.14)}
.it.r5{--item-glow:rgba(151,215,238,.24);--item-glow-soft:rgba(72,120,146,.13)}
.it.goldset,.idet .pic.goldset{isolation:isolate}
@property --gold-ray-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --gold-ray-angle-reverse{syntax:"<angle>";inherits:false;initial-value:0deg}
.it.goldset::after,.idet .pic.goldset::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--gold-ray-angle,0deg),transparent 0deg 288deg,rgba(255,187,56,.12) 303deg,rgba(255,202,83,.72) 321deg,#fff3ba 331deg,#ffb52e 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--gold-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(255,187,56,.12) 303deg,rgba(255,202,83,.72) 321deg,#fff3ba 331deg,#ffb52e 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #ffc34a99);opacity:.92;pointer-events:none;z-index:3;animation:goldset-sweep 3.2s linear infinite}
@keyframes goldset-sweep{to{--gold-ray-angle:1turn;--gold-ray-angle-reverse:1turn}}
@media(prefers-reduced-motion:reduce){.it.goldset::after,.idet .pic.goldset::after{animation:none}}
.it.platinaset,.idet .pic.platinaset{isolation:isolate}
@property --plat-ray-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --plat-ray-angle-reverse{syntax:"<angle>";inherits:false;initial-value:0deg}
.it.platinaset::after,.idet .pic.platinaset::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--plat-ray-angle,0deg),transparent 0deg 288deg,rgba(45,210,255,.12) 303deg,rgba(86,220,255,.78) 321deg,#fff9a6 331deg,#45cfff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--plat-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(45,210,255,.12) 303deg,rgba(86,220,255,.78) 321deg,#fff9a6 331deg,#45cfff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #5bdfffaa);opacity:.94;pointer-events:none;z-index:3;animation:platinaset-sweep 3.2s linear infinite}
@keyframes platinaset-sweep{to{--plat-ray-angle:1turn;--plat-ray-angle-reverse:1turn}}
@media(prefers-reduced-motion:reduce){.it.platinaset::after,.idet .pic.platinaset::after{animation:none}}
.idet h4.platina-name{-webkit-text-stroke:.35px #1833d7;text-shadow:-.8px 0 #1833d7,.8px 0 #1833d7,0 -.8px #1833d7,0 .8px #1833d7,0 0 3px #315cff}
.it.magicitem,.idet .pic.magicitem{isolation:isolate}
@property --magic-ray-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --magic-ray-angle-reverse{syntax:"<angle>";inherits:false;initial-value:0deg}
.it.magicitem::after,.idet .pic.magicitem::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--magic-ray-angle,0deg),transparent 0deg 288deg,rgba(67,145,255,.1) 303deg,rgba(82,174,255,.78) 321deg,#d9f6ff 331deg,#459bff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--magic-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(67,145,255,.1) 303deg,rgba(82,174,255,.78) 321deg,#d9f6ff 331deg,#459bff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #419dff99);opacity:.92;pointer-events:none;z-index:3;animation:magicitem-sweep 7s linear infinite}
@keyframes magicitem-sweep{to{--magic-ray-angle:1turn;--magic-ray-angle-reverse:1turn}}
@media(prefers-reduced-motion:reduce){.it.magicitem::after,.idet .pic.magicitem::after{animation:none}}
.it.purpleitem,.idet .pic.purpleitem{isolation:isolate}
.it.purpleitem::after,.idet .pic.purpleitem::after{content:"";position:absolute;inset:1px;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--purple-ray-angle,0deg),transparent 0deg 288deg,rgba(178,75,255,.12) 303deg,rgba(196,115,255,.82) 321deg,#ffe5ff 331deg,#a64dff 340deg,transparent 352deg 360deg),conic-gradient(from calc(var(--purple-ray-angle-reverse,0deg) + 180deg),transparent 0deg 288deg,rgba(178,75,255,.12) 303deg,rgba(196,115,255,.82) 321deg,#ffe5ff 331deg,#a64dff 340deg,transparent 352deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:drop-shadow(0 0 2px #ba65ffbb);opacity:.94;pointer-events:none;z-index:3;animation:purpleitem-sweep 3.2s linear infinite}
@keyframes purpleitem-sweep{to{--purple-ray-angle:1turn;--purple-ray-angle-reverse:1turn}}
@media(prefers-reduced-motion:reduce){.it.purpleitem::after,.idet .pic.purpleitem::after{animation:none}}
.it.bad{filter:grayscale(.8)} .it.bad i{color:#f66}

/* Vien chay trong hanh trang mac dinh tat; co the bat cho Hoang Kim / Bach Kim trong tuy chon giao dien. */
.it.goldset::after,.it.platinaset::after,.it.magicitem::after,.it.purpleitem::after{display:none;animation:none}
body.inv-border-glow #t-inv .it.goldset::after{display:block;animation:goldset-sweep 3.2s linear infinite}
body.inv-border-glow #t-inv .it.platinaset::after{display:block;animation:platinaset-sweep 3.2s linear infinite}
body.inv-border-glow #t-inv .it.purpleitem::after{display:block;animation:purpleitem-sweep 3.2s linear infinite}
.eqgrid .it.goldset::after{display:block;animation:goldset-sweep 3.2s linear infinite}
.eqgrid .it.platinaset::after{display:block;animation:platinaset-sweep 3.2s linear infinite}
.eqgrid .it.purpleitem::after{display:block;animation:purpleitem-sweep 3.2s linear infinite}
.eqgrid .it.magicitem::after{display:block;animation:magicitem-sweep 7s linear infinite}
@media(prefers-reduced-motion:reduce){body.inv-border-glow #t-inv .it.goldset::after,body.inv-border-glow #t-inv .it.platinaset::after,.eqgrid .it.goldset::after,.eqgrid .it.platinaset::after,.eqgrid .it.magicitem::after{animation:none}}

.skl{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);margin-bottom:5px}
.skl.lock{opacity:.5} .skl.main{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.skl .sic{width:40px;height:40px;border-radius:5px;border:1px solid var(--line2)}
.skl .info small{display:block;color:var(--dim);font-size:11px}
.skl .lvl{color:var(--gold);font-size:12px}
.tag{font-size:10px;padding:1px 5px;border-radius:3px;background:#2a3a33;color:var(--dim)} .tag.attack{background:#4a2a1f;color:#ffb38a}

#tabs{display:flex;justify-content:center;align-items:stretch;gap:8px;background:#0b100e;border-top:1px solid var(--gold2);padding:4px 8px calc(4px + var(--safe-b))}
#tabs button{position:relative;flex:0 1 144px;min-width:88px;max-width:156px;padding:25px 8px 6px;font-size:11px;line-height:1.1;color:var(--dim);text-align:center;white-space:nowrap;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0}
#tabs button.on{color:var(--gold);box-shadow:inset 0 2px 0 var(--gold)}
.dot{position:absolute;top:6px;right:12%;width:7px;height:7px;border-radius:50%;background:#f55;display:none} .dot.on{display:block}

#modal{position:absolute;inset:0;background:#000b;display:grid;place-items:center;z-index:10;padding:12px}
#modal.modal-entering{animation:modal-overlay-enter .2s ease-out both}
#modal.modal-entering .mbox{animation:modal-box-enter .28s cubic-bezier(.2,.75,.25,1) both}
@keyframes modal-overlay-enter{from{opacity:0}to{opacity:1}}
@keyframes modal-box-enter{0%{opacity:0;transform:translateY(12px) scale(.985);filter:brightness(.88)}70%{opacity:1;transform:translateY(-1px) scale(1);filter:brightness(1.05)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){#modal.modal-entering,#modal.modal-entering .mbox{animation:none}}
.mbox{position:relative;width:100%;max-height:92%;overflow:auto;background:var(--panel);border:1px solid var(--gold2);border-radius:8px;padding:14px}
.mx{position:absolute;right:6px;top:6px;z-index:2;display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;padding:0;border:1px solid var(--line2);border-radius:50%;background:#0b100ecc;color:var(--dim);font-size:16px;line-height:1;touch-action:manipulation}
.desc{color:var(--dim);font-size:13px;margin:4px 0 8px}
.item-segment{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:min(calc(100% - 52px),420px);margin:20px 52px 12px 0;padding:3px;border:1px solid var(--line2);border-radius:10px;background:#0b100e}
.item-segment button{min-height:34px;padding:6px 12px;border:1px solid transparent;border-radius:7px;color:var(--dim);font:inherit;white-space:nowrap}
.item-segment button.on{border-color:var(--gold2);background:linear-gradient(180deg,#554425 0%,#302517 100%);color:var(--gold);box-shadow:inset 0 1px 0 #fff3}
.idet{display:flex;gap:10px;align-items:center}
.idet .pic{position:relative;box-sizing:border-box;flex:0 0 56px;width:56px;height:56px;overflow:hidden;border:1px solid var(--line2);border-radius:6px;display:grid;place-items:center;background:#0c1210}
.idet .pic img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.idet h4{font:400 15px var(--font)}
.item-lock-btn{display:inline-flex;align-items:center;gap:5px}.item-lock-icon{display:block;width:18px;height:18px;object-fit:contain;image-rendering:pixelated;-webkit-user-drag:none;user-select:none}
.sl{margin:8px 0;font-size:13px} .sl .b{color:#ded9ca} .sl .m{color:#f0cf56} .sl .h{color:#6d756f} .sl .h.on{color:#8fe08a} .sl .tone-green{color:#78d77a} .sl .tone-blue{color:#8fb8ff} .sl .tone-gold{color:#f0cf56} .sl .h.on.tone-blue{color:#8fb8ff} .sl .h.on.tone-gold{color:#f0cf56} .sl .r{color:var(--dim);font-size:12px} .sl .set-active{color:#8fe08a;font-size:12px}
.shared-item-lines>div{padding:1px 0;color:#ded9ca}
.it b.s5{position:absolute;left:3px;bottom:3px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1px #000}
.cmp{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;opacity:.85}
.slotlist{display:grid;gap:8px}
.slotrow{display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:center;padding:8px;border:1px solid var(--line2);border-radius:6px;background:var(--panel2)}
.slotrow.empty,.slotrow.del{grid-template-columns:1fr auto auto}
.slotrow img{width:44px;height:54px;object-fit:contain}
.slotrow small{display:block;color:var(--dim);font-size:11px}
.slotrow.del{border-color:#c44}
.facpick{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.facpick button{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;text-align:left;padding:6px;border:1px solid var(--line2);border-radius:6px;background:var(--panel2);box-shadow:inset 3px 0 0 var(--c)}
.facpick img{grid-row:1/3;width:48px;height:60px;object-fit:contain}
.facpick b{font-family:var(--font);color:var(--gold)} .facpick small{color:var(--c)}
#toast{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);background:#000d;border:1px solid var(--gold2);padding:6px 12px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:11}
#toast.on{opacity:1}
.lootf{display:grid;gap:6px;font-size:13px} .lootf select{width:auto;display:inline-block} .lootf input[type="number"]{width:92px;display:inline-block}
.loot-filter-field .ui-select{width:100%}
.loot-filter-field .ui-select-trigger{min-height:34px;font-size:12px}
.dtabs{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0} .dtabs button{padding:4px 10px;border:1px solid var(--line2);border-radius:14px;font-size:12px} .dtabs button.on{border-color:var(--gold);color:var(--gold)}
/* Mobile: 17 tab Phần thưởng wrap thành hàng méo (5/5/5/2, phải hàng
   gần trống) — đều thành lưới 6 cột ô bằng nhau, mỗi hàng đầy "cân đối" */
@media(max-width:520px){.dtabs{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.dtabs button{padding:4px 2px;font-size:10.5px;text-align:center;line-height:1.25}}
.shoplist{display:grid;gap:4px;max-height:55vh;overflow:auto}
.shoprow{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;text-align:left;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.shoprow img{width:36px;height:36px;object-fit:contain} .shoprow small{display:block;color:var(--dim);font-size:11px} .shoprow em{font-style:normal;color:var(--gold);font-size:12px}
.shoprow.bad{opacity:.55} .shoprow.own{border-color:var(--gold2)}
.shop-potion-bulk{min-height:40px;margin:6px 0;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.shop-potion-bulk>span:first-of-type{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25}
.shop-potion-bulk small{color:var(--dim);font-size:10px}
.chips{display:flex;flex-wrap:wrap;gap:4px} .chip2{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border:1px solid var(--line2);border-radius:12px;font-size:12px;background:#0b100e}
.loot-panel{display:grid;gap:9px;margin:12px 0 8px;padding:10px;border:1px solid #8d7549;border-radius:8px;background:radial-gradient(ellipse at 0 0,#b88b3820,transparent 48%),linear-gradient(145deg,#18211c,#101613 72%);box-shadow:inset 0 1px #ffffff0a}
.auto-config>#autoLootPanel>.loot-panel{margin:0}
.loot-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.loot-panel-head h3{margin:0;color:var(--gold);font-size:15px}.loot-panel-head small{display:block;margin-top:2px;color:var(--dim);font-size:11px}.loot-bag-state{flex:none;padding:4px 7px;border:1px solid var(--line2);border-radius:12px;background:#0b100e;color:#ddd1af;font-size:10px}
.loot-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.loot-mode button{display:grid;gap:2px;min-height:48px;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:#0c1210;text-align:left}.loot-mode button b{color:#ddd5c1;font-size:12px}.loot-mode button small{color:var(--dim);font-size:10px;line-height:1.25}.loot-mode button.on{border-color:var(--gold);background:linear-gradient(140deg,#43371f,#1a211b);box-shadow:inset 0 0 0 1px #e6c67a22}.loot-mode button.on b{color:#f1d58f}
.loot-summary{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#0b100e;color:var(--dim);font-size:11px}.loot-summary>span b{color:#d5c9ad}.loot-summary.has-match>span:first-child b{color:#9be18b}.loot-auto-toggle{position:relative;display:flex;align-items:center;gap:5px;color:var(--text);cursor:pointer;white-space:nowrap}.loot-auto-toggle input{width:16px;height:16px;margin:0;accent-color:#9bd67a}.loot-auto-toggle i{display:none}
.loot-kind-toggles{display:flex;flex-wrap:wrap;gap:6px}.loot-check{display:inline-flex;align-items:flex-start;gap:6px;min-height:30px;padding:5px 7px;border:1px solid var(--line2);border-radius:5px;background:#0c1210;color:#ded6c3;font-size:11px;line-height:1.3;cursor:pointer}.loot-check input{flex:none;width:15px;height:15px;margin:0;accent-color:var(--gold)}.loot-mode-help{color:var(--dim);font-size:11px;line-height:1.45}
.loot-advanced{border-top:1px solid var(--line);padding-top:7px}.loot-advanced>summary{color:#dbc68d;font-size:11px;cursor:pointer;list-style-position:inside}.loot-advanced-body{margin-top:7px;padding:8px;border:1px solid var(--line);border-radius:6px;background:#0d1310}.loot-filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.loot-filter-field{display:grid;min-width:0;gap:4px;color:#d6c8a7;font-size:11px}.loot-filter-field>span{white-space:nowrap}.loot-filter-row select,.loot-filter-row input[type="number"]{box-sizing:border-box;width:100%;min-width:0}.loot-advanced-body>.dim,.loot-advanced-body>div>small{display:block;margin:3px 0 4px;font-size:10px}.loot-set-rule{display:flex;margin:3px 0}.loot-advanced-body #bLootClear{min-height:32px}
.ground-loot-section{display:grid;gap:6px;padding-top:7px;border-top:1px solid var(--line)}.ground-loot-section>header{display:flex;align-items:center;justify-content:space-between;color:#e6d7b4;font-size:12px}.ground-loot-section>header span{color:var(--dim);font-size:10px}.ground-loot-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.ground-loot-tabs::-webkit-scrollbar{display:none}.ground-loot-tabs button{flex:none;padding:4px 7px;border:1px solid var(--line2);border-radius:12px;color:var(--dim);font-size:10px;white-space:nowrap}.ground-loot-tabs button.on{border-color:var(--gold);background:#3b301b;color:#f1d58f}
.ground-loot-list{display:grid;gap:4px;max-height:190px;overflow:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:#66736b transparent}.ground-loot-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:7px;align-items:center;min-height:48px;padding:4px 5px;border:1px solid var(--line);border-radius:6px;background:#0b100e}.ground-loot-row.is-match{border-left:2px solid #80c875}.ground-loot-row.is-skipped{opacity:.78}.ground-loot-row.is-target{border-color:var(--gold);box-shadow:0 0 7px #e6c67a33}.ground-loot-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--rarity);border-radius:5px;background:radial-gradient(circle,#263029,#101511);color:var(--rarity);font-size:22px}.ground-loot-icon img{width:29px;height:29px;object-fit:contain;image-rendering:auto}.ground-loot-copy{display:grid;min-width:0;gap:1px}.ground-loot-copy b{overflow:hidden;color:#efe6d3;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.ground-loot-copy small{overflow:hidden;color:var(--dim);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.ground-loot-copy .ground-loot-verdict{color:#9be18b}.is-skipped .ground-loot-copy .ground-loot-verdict{color:#c2a99e}.ground-pick{min-width:54px;min-height:34px;padding:4px 6px;font-size:10px;white-space:nowrap}.ground-loot-empty{padding:12px 8px;border:1px dashed var(--line2);border-radius:6px;color:var(--dim);font-size:11px;text-align:center}.ground-loot-section>.dim{font-size:10px;line-height:1.45}.loot-material-note{font-size:10px;line-height:1.4}
.auto-loot-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.auto-loot-state{padding:3px 7px;border:1px solid var(--line2);border-radius:12px;color:#dfc89a;font-size:11px}.auto-loot-state.is-on{border-color:#66875c;color:#a9e28b;background:#20301f}
@media(max-width:420px){.loot-panel{padding:8px}.loot-summary{grid-template-columns:1fr 1fr}.loot-auto-toggle{grid-column:1/-1;padding-top:3px;border-top:1px solid var(--line)}.ground-loot-row{grid-template-columns:32px minmax(0,1fr) auto;gap:5px;padding:4px}.ground-loot-icon{width:30px;height:30px}.ground-loot-icon img{width:26px;height:26px}.ground-pick{min-width:48px;padding:4px;font-size:9px}}
/* dieu khien: nut che do, o ky nang, thuoc, the do dia phu */
.chip{position:absolute;right:8px;top:34px;z-index:4;font-size:11px;padding:3px 9px;border-radius:12px;border:1px solid var(--gold2);background:#000a;color:var(--gold)}
#inBtn{display:none;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:3px 10px;font-size:12px;line-height:1}
#inBtn .input-mode-icon{display:block;flex:0 0 20px;width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 2px #0009)}
.chip.on{background:#3a2a10;box-shadow:0 0 8px #e6c67a66}
#ctrlBtn.autotoggle{display:flex;align-items:center;gap:7px;min-height:28px;padding:4px 6px 4px 10px;border-radius:16px;color:#d7ccb1;white-space:nowrap}
#autoControls{position:absolute;top:14px;right:8px;z-index:4;display:flex;align-items:center;gap:6px}
#autoSettingsBtn{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:1px solid var(--gold);border-radius:50%;background:radial-gradient(#3a2f1c,#120d06);color:#fff0bf;box-shadow:0 2px 5px #000a;cursor:pointer;touch-action:manipulation;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
#autoSettingsBtn img{display:block;width:12px;height:12px;object-fit:contain}
#autoSettingsBtn:hover{border-color:#ffe08a;box-shadow:0 0 9px #e6c67a88}
#autoSettingsBtn:active{transform:scale(.92)}
#ctrlBtn.autotoggle{position:relative;right:auto;top:auto;z-index:auto}
#ctrlBtn.autotoggle.on{border-color:#e6c67a;background:linear-gradient(180deg,#4a3818,#231a0b);color:#ffe9ae;box-shadow:0 0 7px #e6c67a44}
#ctrlBtn .ios-switch{flex:0 0 30px;width:30px;height:18px;padding:1px;display:flex;align-items:center;border:1px solid #586159;border-radius:10px;background:#303833;transition:background .18s ease,border-color .18s ease}
#ctrlBtn .ios-switch i{display:block;width:14px;height:14px;border-radius:50%;background:#d5d8d2;box-shadow:0 1px 2px #0008;transition:transform .18s ease,background .18s ease}
#ctrlBtn[aria-checked="true"] .ios-switch{border-color:#e6c67a;background:#8b6c2e;box-shadow:0 0 7px #e6c67a55,inset 0 0 0 1px #fff2}
#ctrlBtn[aria-checked="true"] .ios-switch i{transform:translateX(12px);background:#fff1c0}
#pad{position:absolute;right:8px;left:auto;bottom:8px;width:152px;height:auto;z-index:5;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;pointer-events:none}
.pbtn{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold2);background:#0c120f center/cover no-repeat;overflow:hidden;pointer-events:auto;touch-action:none;box-shadow:0 2px 6px #000b}
.pbtn i{position:absolute;inset:0;background:center/cover no-repeat}
.pbtn b{position:absolute;right:3px;bottom:0;font-size:9px;color:#fff;text-shadow:0 0 2px #000}
.pbtn.empty{border-style:dashed;opacity:.5} .pbtn.cur{border-color:#ffe07a;box-shadow:0 0 10px #ffd24a}
.pbtn:active{transform:scale(.92)}
.pbtn.pot{width:38px;height:38px;margin-top:6px;overflow:visible} .pbtn.pot .potion-icon{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;z-index:0;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}.pbtn.pot .potion-icon[hidden]{display:none}.pbtn.pot .potion-count{position:absolute;right:-7px;top:-7px;bottom:auto;z-index:4;display:grid;place-items:center;box-sizing:border-box;width:17px;height:17px;padding:0;border:1px solid #ead393;border-radius:50%;background:radial-gradient(circle at 35% 28%,#465146,#17211b 72%);color:#fff3c8;font:600 8px/1 var(--font);text-align:center;text-shadow:0 1px 2px #000;box-shadow:0 1px 4px #000c,0 0 3px #e6c67a55;pointer-events:none}.pbtn.pot .potion-count[hidden]{display:none}.pbtn.pot span{position:absolute;inset:auto 0 1px;z-index:2;display:grid;place-items:center;font:400 8px/1.05 var(--font);color:#fff;text-shadow:0 0 3px #000;text-align:center;background:linear-gradient(transparent,#0008)}
.pbtn.pot .cd{border-radius:50%;overflow:hidden}
.pbtn.hp{background:radial-gradient(#b3342a,#3a0c08)} .pbtn.mp{background:radial-gradient(#3a6ad0,#0c1a40)} .pbtn.tp{background:radial-gradient(#c9a23a,#3a2a08)}
#pad .pbtn.ride{flex:0 0 24px;width:24px;height:24px;margin:14px 0 0;padding:0;border:1px solid #d9bb68;border-radius:50%;background:radial-gradient(circle,#424b43,#151b17);color:#fff;display:grid;place-items:center;overflow:hidden;font:700 12px/1 sans-serif;box-shadow:0 1px 4px #000b,0 0 3px #e6c67a55;touch-action:manipulation}
#pad .pbtn.ride img{display:block;width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 1px 1px #000a);pointer-events:none}
#pad .pbtn.pot.tp{overflow:hidden}
#pad .pbtn.pot.tp span{inset:0;z-index:2;border-radius:50%;background:none;font-size:7px;line-height:1.05}
.pbtn .cd{position:absolute;inset:0;background:conic-gradient(#000b var(--p,0%),transparent 0);z-index:1}
#townBar{position:absolute;left:8px;right:8px;top:64px;z-index:5;display:flex;gap:6px;align-items:center;padding:6px 8px;background:#000c;border:1px solid var(--gold2);border-radius:6px}
#townBar b{flex:1;color:var(--gold);font-family:var(--font)}
.skl .slots{display:flex;gap:3px;grid-column:2/5} .skl .slots button{font-size:10px;padding:1px 6px;border:1px solid var(--line2);border-radius:4px}
.skl .slots button.on{border-color:var(--gold);color:var(--gold)}

/* Hop thoai dung nen toi va vien gon; bo khung anh co hoa van JX de noi dung de doc hon. */
.mbox{border:1px solid var(--line2);border-radius:12px;background-color:var(--panel);background-image:linear-gradient(135deg,rgba(21,29,26,.82),rgba(12,18,16,.88)),url('ui/modal-jade-texture.webp?v=20261004-v2');background-size:cover;background-position:center;box-shadow:0 16px 48px #000a,inset 0 1px 0 #ffffff0a}
#modal.item-preview-modal{background:rgba(0,0,0,.46)}
#modal.item-preview-modal .mbox{background-color:rgba(14,23,19,.56);background-image:linear-gradient(135deg,rgba(27,42,35,.74),rgba(10,17,14,.7));-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-color:rgba(112,145,123,.72);box-shadow:0 16px 48px #0008,inset 0 1px 0 #d3ffe20d}
#modal.item-preview-modal .item-segment{background:rgba(7,13,10,.62)}
#modal.item-preview-modal .idet .pic{background:rgba(8,14,12,.58)}
#modal.item-tooltip-preview{z-index:30;display:flex;align-items:flex-start;justify-content:flex-end;padding:clamp(12px,12vh,100px) clamp(12px,2.5vw,42px) 12px;background:transparent;pointer-events:none}
#modal.item-tooltip-preview .mbox{width:min(100%,620px);max-height:calc(100dvh - 16px);padding:14px;background-color:#101a15;background-image:linear-gradient(135deg,rgba(22,35,28,.98),rgba(9,16,12,.97));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-color:rgba(112,145,123,.78);box-shadow:0 12px 36px #0008,inset 0 1px 0 #d3ffe20d;pointer-events:auto}
#modal.item-tooltip-preview.chat-item-tooltip .mbox,#modal.item-tooltip-preview.inventory-item-tooltip .mbox{position:fixed;left:var(--chat-tooltip-left,8px);top:var(--chat-tooltip-top,8px)}
#modal.item-tooltip-preview.chat-item-tooltip.modal-entering .mbox,#modal.item-tooltip-preview.inventory-item-tooltip.modal-entering .mbox{animation:none}
#modal.item-tooltip-preview .idet .pic{background:#0a120e}
@media(max-width:640px){#modal.item-tooltip-preview{justify-content:center;padding:calc(10px + var(--safe-t)) 10px 10px}#modal.item-tooltip-preview .mbox{width:100%;max-height:calc(100dvh - var(--safe-t) - 20px)}}
.auto-panel-head{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:0 0 7px;border-bottom:1px solid var(--line2)}
.auto-panel-head .btn{flex:none}
.auto-panel-head h3{flex:1;justify-content:center;margin:0;font-size:16px}
#tabs{background:linear-gradient(180deg,#1a2521,#0f1613)}
#tabs button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:color .15s ease,background .15s ease,box-shadow .15s ease}
#tabs button:hover{color:var(--text);background:#ffffff08}
#tabs button.on{color:#fff3cc;background:linear-gradient(180deg,#b98d3b,#806020);border-color:#f0d286;border-bottom:1px solid #c3973d;border-radius:9px;
  box-shadow:inset 0 1px 0 #fff4c688,inset 0 -2px 0 #49330f88,0 0 12px #e6c67a55}
#tabs button:active{background:linear-gradient(180deg,#c59a42,#906d26);border-color:#fff0b0}
#tabs button::before{content:"";position:absolute;left:50%;top:3px;width:24px;height:24px;transform:translateX(-50%);background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 1px 2px #000);transition:transform .15s ease,filter .15s ease}
#tabs button.on::before{transform:translateX(-50%) translateY(-1px);filter:drop-shadow(0 0 4px #ffe59acc)}
#tabs button[data-t=log]::before{background-image:url(ui/nav/world.png?v=20261005-v1)} #tabs button[data-t=char]::before{background-image:url(ui/nav/character.png?v=20261005-v1)}
#tabs button[data-t=skill]::before{background-image:url(ui/nav/skills.png?v=20261005-v1)} #tabs button[data-t=inv]::before{background-image:url(ui/nav/inventory.png?v=20261005-v1)}
#tabs button[data-t=more]::before{background-image:url(ui/nav/more.png?v=20261005-v1)}
#tabs .dot{top:3px;right:auto;left:calc(50% + 11px);width:6px;height:6px;box-shadow:0 0 5px #ff5544aa}
#pad .pbtn.sk{background:url(ui/slot.png?v=20261005-v1) center / 100% 100%,radial-gradient(#26302b,#0b100e)}
#pad .pbtn.sk{overflow:visible}#pad .pbtn.sk i{border-radius:50%;overflow:hidden}#pad .pbtn.sk>b{right:-3px;top:-7px;bottom:auto;z-index:4;font-size:10px;line-height:1;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000;-webkit-text-stroke:1px #000;paint-order:stroke fill;pointer-events:none}
#pad .pbtn.sk.empty{background:radial-gradient(#1b2420,#0b100e);border-style:solid;border-color:#736b4b;opacity:.58}
.facpick button{position:relative}
.s5b{position:absolute;right:4px;top:4px;width:28px;height:28px;background-size:200% 100%;background-position:0 0;filter:drop-shadow(0 0 2px #000)}
.facpick button:hover .s5b{background-position:100% 0}

/* ======== Chieu cao that cua man hinh (Safari / thanh cong cu dien thoai) + che do thu gon ======== */
html,body{overscroll-behavior:none}
#app{height:100vh;height:var(--app-h,100dvh)}
#tabs{position:relative;z-index:6;touch-action:manipulation}
#tabs button{touch-action:manipulation}
#compactBtn{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#26302b,#0b100e);color:var(--gold);font-size:15px;line-height:30px}
body.compact #panel,body.compact #tabs{display:none!important}
body.compact #battle{flex:1 1 auto}
body.compact #compactBtn{background:radial-gradient(#4a3a18,#1a1206);box-shadow:0 0 6px #e6c67a88}

/* ==== Man hinh ngang (landscape): san dau toan man hinh, bang thong tin ben phai ==== */
@media (orientation:landscape){
  .hero-mark{display:flex;align-items:center;gap:8px;flex:none;width:auto}
  #app{width:100vw;display:grid;grid-template-columns:1fr min(38vw,340px);grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "battle panel" "tabs panel"}
  #top{grid-area:top} #battle{grid-area:battle} #panel{grid-area:panel;border-top:0;border-left:1px solid var(--gold2)} #tabs{grid-area:tabs}
  #pad{bottom:52px}
  body.compact #app{grid-template-columns:1fr;grid-template-areas:"top" "battle" "tabs"}
}

/* IBM Plex Mono 400 cho toan bo game (khong dung dam, dung mau / co chu de nhan manh) */
html,body,button,input,select,textarea{font-family:var(--font)}
b,strong,h1,h2,h3,h4,th{font-weight:400}

/* nut doi chuot / joystick: chi hien tren may tinh man hinh ngang */
#inBtn{display:none;position:absolute;right:8px;top:70px;z-index:22}
body.deskland #inBtn{display:inline-flex}
body.sv #inBtn{top:44px}

.cmp2{margin:6px 0;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:#0b100e}
.cmpv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.cp{color:#7fe07f}.cn{color:#ff7a6a}
.reqbad{margin-top:6px;color:#ff9a8a;font-size:12px}
.reqnote{margin-top:6px;color:#e8c66a;font-size:12px}

#inBtn{right:auto!important;left:8px;top:auto!important;bottom:188px}

/* giao dien di dong nho di 20%: ung dung rong / cao 1,25 lan roi thu nho 0,8 (uiScale trong render.js).
   position:fixed de #app ngoai luong binh thuong -> body khong co scrollable overflow,
   tranh trinh duyet tu cuon trang lam xep game + modal len tren, de trong duoi man hinh. */
body.mob #app{position:fixed;top:0;left:0;transform:scale(.8);transform-origin:0 0;width:125vw!important;height:calc(var(--app-h,100dvh)*1.25)!important;margin:0!important;max-width:none}

/* cong / rut diem / thong tin */
.pm{display:inline-flex;gap:4px} .pm button{width:28px}
.pm .stash-mat-action{width:auto;min-width:58px;padding-left:6px;padding-right:6px;white-space:nowrap;flex:0 0 auto}
.pm.build-actions{flex-shrink:0} .pm.build-actions button{width:auto;min-width:48px;white-space:nowrap;padding-left:8px;padding-right:8px}
.minus{width:28px;height:26px;border-radius:5px;border:1px solid #a55;color:#f88;background:#2e2222;font-weight:700}
.minus:disabled{opacity:.35}
.skinfo{width:28px;height:26px;border-radius:5px;border:1px solid var(--line2);color:var(--dim);background:#1b2420;font-style:italic}
.skl .slots{grid-column:2/5}

/* co chu chinh duoc (the Khac > Tro nang): ap dung cho bang thong tin, the, hop thoai */
#panel,#modal .mbox,#tabs,#toast{zoom:var(--fs,1)}
.todo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;padding:6px 8px;border:1px solid var(--gold2);border-radius:6px;background:#1a1f16}
.todo b{color:var(--gold);font-size:12px;margin-right:2px}
.todochip{cursor:pointer;border:1px solid var(--gold2);background:#26301f;color:var(--text)}
.codex .card.lock{opacity:.55}
*:focus-visible{outline:none!important}

/* Desktop landscape: keep the game frame from becoming a panoramic strip on
   ultrawide or very short windows. */
@media (orientation:landscape) and (min-width:900px) and (hover:hover) and (pointer:fine){
  #app{width:min(100vw,2400px,max(240dvh,1344px))}
}
@media (orientation:landscape) and (max-height:560px) and (hover:hover) and (pointer:fine){
  html,body{height:auto;min-height:100vh;overflow-x:hidden;overflow-y:auto}
  #app{height:max(var(--app-h,100dvh),560px);min-height:560px}
}

/* Keep dialogs readable on desktop; forge rows use intrinsic button widths. */
#modal .mbox{width:min(100%,960px)}
.forge-actions{justify-content:flex-start}
.forge-actions>.btn{flex:0 0 auto;min-width:144px;max-width:100%}
.forge-pool{align-items:flex-start}
.forge-pool>.btn{flex:0 1 auto;min-width:0;max-width:100%;white-space:normal;text-align:left}
.forge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.forge-row>small{min-width:0}
.forge-row>.btn{flex:0 0 auto;min-width:130px;max-width:100%}
@media (max-width:520px){
  .forge-row{grid-template-columns:1fr}
  .forge-row>.btn{justify-self:start}
}
@media (max-width:640px){
  #tabs{gap:2px;padding-left:4px;padding-right:4px}
  #tabs button{flex:1 1 0;min-width:0;max-width:none;padding-left:1px;padding-right:1px;font-size:10px}
}
@media (max-width:520px){
  #hud{grid-template-columns:minmax(0,1fr);gap:2px}
  #hud .bar.xp{grid-column:auto}
}
@media (max-width:420px){
  #top{gap:7px;padding-right:8px;padding-left:8px}
  .topmid .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;margin-bottom:4px}
  .hero-identity{grid-column:1/-1}
  #stageLbl{grid-column:1;grid-row:2;border-left:2px solid #a8864a;padding-left:6px;font-size:8px;text-align:left}
  .top-power{grid-column:2;grid-row:2}
}
@media (min-width:700px){
  #hud{grid-template-columns:repeat(3,minmax(0,1fr))}
  #hud .bar.xp{grid-column:auto}
  #hud .bar.hp{order:1}
  #hud .bar.mp{order:2}
  #hud .bar.xp{order:3}
}

/* Thần Mã Các: danh sách sưu tầm, đổi và thuần dưỡng danh mã */
.tm-intro{display:flex;align-items:center;gap:12px;margin:4px 0 10px;padding:12px;border:1px solid #9b7b3d;border-radius:10px;background:radial-gradient(ellipse at 15% 0%,#86612d44,transparent 55%),linear-gradient(135deg,#1c2921,#101713)}
.tm-seal{display:grid;place-items:center;flex:0 0 48px;height:48px;border:1px solid #e6c67a88;border-radius:50%;background:radial-gradient(circle,#61502d,#171b15 72%);font-size:26px;box-shadow:0 0 18px #e6c67a22}
.tm-intro h3{margin:0 0 4px;color:#f3d68c}.tm-intro p{margin:0;color:var(--dim);font-size:11px;line-height:1.5}
.tm-progress,.tm-how,.tm-training{margin:8px 0;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:#101713}
.tm-progress>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}.tm-progress b,.tm-how b{color:#f1d486}.tm-progress small,.tm-how small{display:block;color:var(--dim);font-size:10px;line-height:1.5}
.tm-xp{height:8px;overflow:hidden;border:1px solid #75613a;border-radius:8px;background:#090e0b}.tm-xp i{display:block;height:100%;background:linear-gradient(90deg,#a77a30,#f4d47e);box-shadow:0 0 8px #e9bd5c77;transition:width .25s ease}
.tm-how{display:grid;gap:4px;border-color:#6f613b;background:linear-gradient(110deg,#242417,#111713)}.tm-how span{font-size:11px;line-height:1.55}
.tm-training{display:flex;align-items:center;justify-content:space-between;gap:12px}.tm-training>div:first-child{min-width:0;flex:1}.tm-training b,.tm-training small{display:block}.tm-training b{color:#f3d68c}.tm-training small{margin-top:4px;color:var(--dim);font-size:10px}.tm-training .tm-xp{margin-top:6px}.tm-training .btnrow{flex-wrap:nowrap}.tm-catalog{padding-bottom:8px}.tm-tier-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px;padding-bottom:5px;border-bottom:1px solid #796338}.tm-tier-heading small{color:var(--dim)}
.tm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tm-card{display:flex;min-width:0;flex-direction:column;gap:8px;padding:9px;border:1px solid #65583c;border-radius:9px;background:linear-gradient(145deg,#202821,#101612 78%);box-shadow:inset 0 1px #ffffff09;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.tm-card:hover{border-color:#c6a653;box-shadow:0 4px 14px #0006,inset 0 1px #ffffff0d;transform:translateY(-1px)}.tm-card.tier-2{border-color:#8b713b}.tm-card.tier-3{border-color:#aa8138;background:linear-gradient(145deg,#302817,#111612 78%)}.tm-card.tier-4{border-color:#d7ad50;background:radial-gradient(ellipse at 5% 0%,#bb913c22,transparent 48%),linear-gradient(145deg,#352b18,#111612 78%);box-shadow:inset 0 0 18px #e6c67a0d}.tm-card.owned{box-shadow:inset 0 0 0 1px #e6c67a25,0 0 10px #e6c67a0a}.tm-card.locked{opacity:.7}
.tm-card-top{display:flex;gap:9px;align-items:center;min-width:0}.tm-portrait{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;overflow:hidden;border:1px solid #94753e;border-radius:8px;background:radial-gradient(circle,#45412b,#111612 72%);color:#e4c678;font-size:25px}.tm-portrait img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 3px #0009)}.tm-card-title{display:grid;min-width:0;gap:3px}.tm-card-title small{color:#d6b75f;font-size:9px}.tm-card-title b{color:#ffe6a3;font-size:12px;line-height:1.35}.tm-card-title span{color:var(--dim);font-size:9px;line-height:1.35}.tm-effects{display:grid;gap:3px;padding:6px 7px;border-radius:6px;background:#080d0bcc}.tm-effect{color:#ded7c5;font-size:9px;line-height:1.4}.tm-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}.tm-card-bottom small{color:var(--dim);font-size:9px;line-height:1.4}.tm-card-bottom .btn{flex:none;white-space:nowrap}.tm-item-level{display:block;margin-top:4px;color:#e8cb7b!important;font-size:10px}
@media(max-width:620px){.tm-grid{grid-template-columns:1fr}.tm-card{padding:10px}.tm-card-title b{font-size:13px}.tm-effect{font-size:10px}.tm-card-bottom small{font-size:10px}}
@media(max-width:520px){.tm-training{align-items:stretch;flex-direction:column}.tm-training .btnrow{justify-content:flex-start}.tm-intro{align-items:flex-start}.tm-progress>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}}

/* v1.0.5: khóa đồ và hàng nút nhanh Giang hồ */
.it .lk{position:absolute;left:1px;bottom:0;font-size:10px;text-decoration:none;line-height:1}
.qbar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 8px}
.qb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;padding:4px 2px;border-radius:10px;border:1px solid var(--line2);background:#0c1210;color:var(--gold)}
.qb-icon{display:grid;width:30px;height:30px;place-items:center;flex:none}.qb-icon img{display:block;width:100%;height:100%;object-fit:contain}
.qb small{font-size:9.5px;color:#cfc4a8}
.qb em{position:absolute;top:2px;right:4px;min-width:14px;padding:0 3px;border-radius:7px;background:#c4372a;color:#fff;font-size:10px;font-style:normal;line-height:14px;text-align:center}

/* =============================================================
   Phần riêng của port này — các tính năng bản mình có, bản gốc không có
   (tab Đồng hành, Bảng thử nghiệm, Boss Thế Giới, Quay Sò, cụm nút trái,
   ô nhập tên, giao diện chọn pet). Thêm vào cuối để đè style bản gốc.
   ============================================================= */
/* Nhập tên nhân vật (modal đặt tên) */
input.nameinp{background:#0b100e;color:var(--text);border:1px solid var(--line2);border-radius:5px;padding:10px;font:14px var(--font);width:100%;margin-top:6px}
/* Tab Đồng hành (thứ 6) — bản gốc chỉ có 5 tab */
#tabs button[data-t=pet]::before{background-image:none;content:"🐾";font-size:16px;line-height:24px;filter:none;transform:none}
#tabs button[data-t=pet].on::before{transform:none;filter:none}
/* Nút Đồng hành + Bảng thử nghiệm trên thanh đầu */
#petChip{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#26302b,#0b100e);color:var(--gold);font-size:13px;line-height:30px}
#petChip small{position:absolute;right:-4px;bottom:-5px;font-size:8px;color:var(--gold);background:#0b100e;border:1px solid var(--gold2);border-radius:8px;padding:0 3px;line-height:12px}
#adminQuickBtn{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold2);background:radial-gradient(#3a2f1c,#120d06);font-size:14px;line-height:30px;cursor:pointer}
#adminQuickBtn:hover{border-color:#ffeb99;box-shadow:0 0 8px rgba(255,215,0,.5)}
/* Nút Boss Thế Giới: gọn bên phải sân đấu, ngay dưới cụm bản đồ mini */
#wbBtn{right:8px;left:auto;top:170px;bottom:auto}
/* #svBtn/#rotBtn da bo khoi san (Luyen Cong o hang nut nhanh, Xoay chieu trong Cai dat Auto);
   #ctrlBtn la cong tac iOS trong #autoControls goc phai — khong ep vi tri nhu cu */
body.sv #wbBtn{display:none!important}
/* (Đồng hành giờ mở modal riêng pet-card-modal — #t-pet đã bỏ từ 2.6.9,
   rule .petpick cũ ở đây là dead code, xóa để 2 giao diện tách biệt hẳn) */
.peGroup h4{margin:8px 0 4px;font-size:13px} .slotrow.petrow{grid-template-columns:1fr;text-align:left} .slotrow.petrow span{font-size:13px}
.teamrow{display:grid;grid-template-columns:88px 1fr;gap:8px;align-items:center;padding:4px 0} .teamrow span{color:var(--dim);font-size:12px} .teamrow select{width:100%}
/* Kỹ năng Đồng hành theo loài (rewards.ts: petSkillRows/petRoleTags) */
.petskills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:6px 0 10px}
.petskill{padding:5px 7px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.petskill-head{display:flex;align-items:center;gap:7px;min-height:34px}
.petskill-head img{width:34px;height:34px;flex:none;object-fit:contain;image-rendering:pixelated;border-radius:4px;background:#101713}
.petskill b,.petskill small{display:block}
.petskill b{font-size:11px;color:var(--gold)}
.petskill small{margin-top:2px;color:var(--dim);font-size:10px;line-height:1.35}
.petskill.lock{opacity:.58}
.pet-role-tags{display:flex;flex-wrap:wrap;gap:2px}
.pet-role-tag{display:inline-flex;align-items:center;padding:1px 4px;border:1px solid var(--line2);border-radius:8px;background:#24332b;color:#c9e5b9;font-size:8px;line-height:1.35;white-space:nowrap}
/* Boss Thế Giới + Quay Sò (worldboss.ts) */
.chip.pulse{animation:wbpulse 1.1s ease-in-out infinite}
@keyframes wbpulse{50%{transform:scale(1.07)}}
#wbHud{position:absolute;top:42px;left:50%;transform:translateX(-50%);z-index:4;text-align:center;pointer-events:none;background:#000a;border:1px solid var(--gold2);border-radius:8px;padding:3px 10px;color:var(--gold);font-size:11px}
#wbHud b{font-size:12px;color:#ff8a5a}
#wbHud .wbHp{width:170px;height:6px;margin:3px auto 2px;border:1px solid #8a5a2a;border-radius:3px;background:#2a1008;overflow:hidden}
#wbHud .wbHp i{display:block;height:100%;background:linear-gradient(#e04a3a,#a02a1a)}
#wbHud small{display:block;color:var(--dim);font-size:10px}
/* Bánh quay kieu Bach Bao Ruong: 20 o quanh vien */
.soBoard{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;background:linear-gradient(#8a3a18,#5e240e);border:2px solid #c8842e;border-radius:10px;padding:6px;margin:6px 0}
.soCell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#241208;border:1px solid #8a5a2a;border-radius:6px;font-size:15px;line-height:1;transition:transform .12s,box-shadow .12s}
.soCell small{font-size:7px;letter-spacing:-.5px}
.soCell.t3{border-color:#7a4a9a}
.soCell.t4{border-color:#b5762a}
.soCell.t5{border-color:#a34a3a}
.soCell.cur{background:#4a2c10;border-color:#ffd24a;box-shadow:0 0 7px #ffd24a88;transform:scale(1.07)}
.soCell.land{background:#6a4a08;border-color:#fff;transform:scale(1.14)}
.soHole{visibility:hidden;aspect-ratio:1}
.soCenter{position:absolute;left:13%;right:13%;top:26%;bottom:26%;background:#140b06e8;border:2px solid #c8842e;border-radius:8px;padding:3px 6px;display:flex;flex-direction:column;overflow:hidden;pointer-events:none}
.soCenter h4{margin:1px 0 2px;font-size:11.5px;color:#ffd24a;text-align:center;letter-spacing:1px}
.soLog{flex:1;overflow:hidden;font-size:10.5px;line-height:1.55}
.soLog div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soTrays{display:flex;gap:8px;justify-content:center;margin:2px 0 6px}
.soTray{flex:1;display:flex;align-items:center;gap:6px;padding:5px 8px;border:1.5px solid #8a5a2a;border-radius:18px;background:linear-gradient(#33210f,#20130a);font-size:12px}
.soTray span{font-size:16px}
.soTray small{color:var(--dim);font-size:10px;flex:1}
.soTray b{color:#ffd24a}
.soTray.bump{animation:sobump .45s ease}
@keyframes sobump{30%{transform:scale(1.12);border-color:#ffd24a}}

/* Bua loi / bua hai / vong sang (skillsys.ts) */
.tag.buff{background:#1f3a24;color:#9fe36a}
.tag.curse{background:#3a1f3a;color:#d38bff}
.tag.aura{background:#173a38;color:#7fe3d0}
/* Ten nhan vat: ten phai xep dong tren (khoi phuc rule bi mat khi doi skin) */
#heroName small{display:block;font-size:9px;font-weight:400;color:var(--dim);line-height:1.15;letter-spacing:.5px}

/* Modal co khoa (chon nhan vat / chon mon phai / dat ten): khong cho dong nen an nut X
   (truoc day nut van hien nhung an khong co tac dung -> nguoi choi tuong hong) */
#modal[data-locked="1"] .mx{display:none}
/* An thanh cuon (WebView/desktop hien scrollbar co dinh lam xau giao dien; van cuon bang ban xe chuot / cam keo) */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}


/* Thu thach nhan vat (depth.ts): cac the chon luat khi tao nhan vat */
.challenges{display:grid;gap:6px}
.challenges .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}

/* Nhật ký console (consolelog.ts) */
.lg-view{max-height:52vh;overflow:auto;margin:8px 0;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:#070b09;font:11px/1.5 var(--font);white-space:pre-wrap;word-break:break-word}
.lg-line{padding:1px 0;border-bottom:1px solid #121a15}
.lg-t{color:#6d756f}

/* ====== Ho so nhan vat (chat the gioi — bam ten de xem) ====== */
#modal.world-player-profile .mbox{box-sizing:border-box;background-color:#0e1713b8;background-image:linear-gradient(135deg,#1b2a23d1,#0a110ed6);border-color:#70917bc7;width:min(92vw,760px);max-height:min(86dvh,760px);padding:14px}
.world-profile-heading{border-bottom:1px solid var(--line2);align-items:center;min-height:46px;padding:0 42px 10px 6px;display:flex}
.world-profile-heading h3{color:#ead7a0;margin:0;font-size:clamp(16px,2.4vw,22px);line-height:1.25}
.world-profile-meta{color:#a9b0a7;flex-wrap:wrap;align-items:center;gap:7px;margin-top:3px;font-size:clamp(11px,1.7vw,15px);display:flex}
.world-profile-challenge{color:#70b4ff}
.world-profile-stats{color:#e8dfc6;padding:10px 4px 13px;font-size:clamp(12px,1.8vw,17px);line-height:1.4}
.world-profile-stats i{color:#99a39a;padding:0 4px;font-style:normal}
.world-profile-stats small{color:#99a39a;font-size:.82em}
.world-profile-equip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px;max-width:620px;margin:0 auto;padding:0 4px 4px;display:grid}
.world-profile-slot{color:#9fa99e;text-align:center;align-content:start;justify-items:center;gap:4px;min-width:0;font-size:clamp(10px,1.5vw,14px);display:grid}
.world-profile-slot>span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}
.world-profile-item,.world-profile-empty{box-sizing:border-box;aspect-ratio:1;border-radius:2px;width:min(100%,112px)}
.world-profile-item{border-color:var(--line2);cursor:pointer;touch-action:manipulation;padding:2px}
.world-profile-item:hover,.world-profile-item:focus-visible{outline-offset:2px;outline:2px solid #ead080}
.world-profile-item img{max-width:88%;max-height:88%}
.world-profile-item em{color:#ffd24a;text-shadow:0 1px 3px #000,0 0 3px #000;font-weight:700;top:auto;bottom:1px;left:3px}
.world-profile-item i{color:#aeb7aa;text-shadow:0 1px 3px #000;font-size:clamp(10px,1.6vw,14px);bottom:1px;right:3px}
.world-profile-item .s5{z-index:2;top:auto;bottom:5px;left:4px}
.world-profile-item .lk{z-index:3;text-shadow:0 1px 3px #000;font-size:12px;text-decoration:none;position:absolute;top:0;right:2px}
#modal.world-player-profile .world-profile-item .lk{border-radius:0;width:auto;height:auto;line-height:1;display:block;inset:0 2px auto auto}
.world-profile-empty{color:#59665c;background:#080e0b66;border:1px dashed #526057;place-items:center;font-size:20px;display:grid}
@media(max-width:560px){.world-profile-equip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 5px}}

/* ====== Vượt cấp quái (thách Bố Y — stagectl) ====== */
.stagectl-overlevel{color:#b5beb3;font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;margin-left:1px;padding:0;font-size:10px;line-height:1;display:inline-flex}
.stagectl-overlevel:focus-visible{outline-offset:3px;border-radius:3px;outline:2px solid #8bc995}
.stagectl-switch{box-sizing:border-box;background:#29342c;border:1px solid #4b594e;border-radius:999px;align-items:center;width:27px;height:16px;padding:2px;display:inline-flex;position:relative;box-shadow:inset 0 1px 2px #0008}
.stagectl-switch i{background:#d2d6d0;border-radius:50%;width:10px;height:10px;transition:transform .16s;display:block;box-shadow:0 1px 2px #0008}
.stagectl-overlevel[aria-checked=true]{color:#b9ecc1}
.stagectl-overlevel[aria-checked=true] .stagectl-switch{background:#27653a;border-color:#58a66b}
.stagectl-overlevel[aria-checked=true] .stagectl-switch i{background:#f4fff5;transform:translate(11px)}
/* ==== TỶ VÕ TRƯỜNG (port từ volam.vinarpg.com — đấu trường mô phỏng) ==== */
.tyvo-panel { color:#efe8d5; gap:9px; display:grid }
.tyvo-heading { background:radial-gradient(at 12% 0,#c89d4828,#0000 55%),linear-gradient(135deg,#202a22,#111713 78%); border:1px solid #a17b3d; border-radius:11px; justify-content:space-between; align-items:center; gap:12px; padding:12px; display:flex; box-shadow:inset 0 1px #ffffff0a }
.tyvo-heading h3 { color:#ffe5a0; letter-spacing:.02em; margin:2px 0 3px; font-size:18px }
.tyvo-heading p { color:#c0b9a7; margin:0; font-size:10px; line-height:1.45 }
.tyvo-eyebrow { color:#d4b568; letter-spacing:.14em; font-size:8px; font-weight:700 }
.tyvo-currency { background:#080d0bcc; border:1px solid #a88442; border-radius:8px; flex:none; justify-items:end; gap:3px; min-width:76px; padding:7px 9px; display:grid }
.tyvo-currency small { color:#c5ad72; letter-spacing:.12em; font-size:8px }
.tyvo-currency b { color:#ffe09a; font-variant-numeric:tabular-nums; font-size:18px }
.tyvo-reset-line { color:#b9b29f; justify-content:space-between; align-items:center; gap:8px; padding:0 2px; font-size:9px; display:flex }
.tyvo-reset-line b { color:#e6ce8e }
.tyvo-reset-line small { color:#899489; flex:none; font-size:9px }
.tyvo-mode-switch { background:#0b110e; border:1px solid #344339; border-radius:9px; grid-template-columns:1fr 1fr; gap:5px; padding:4px; display:grid }
.tyvo-mode-switch button { color:#aaa999; background:0 0; border:1px solid #0000; border-radius:7px; min-height:32px; padding:5px 7px; font-size:10px; font-weight:700; line-height:1.25 }
.tyvo-mode-switch button.on { color:#ffe4a0; background:linear-gradient(135deg,#3b321e,#20251d); border-color:#907440; box-shadow:inset 0 1px #ffffff0b }
.tyvo-opponent-card { background:linear-gradient(120deg,#1b291e,#101713 72%); border:1px solid #556549; border-radius:9px; align-items:center; gap:10px; padding:10px; display:flex }
.tyvo-opponent-medal { color:#ffe19a; background:radial-gradient(circle,#5c4a27,#151a14 72%); border:1px solid #bd9b53; border-radius:50%; flex:none; place-items:center; width:39px; height:39px; font-size:19px; display:grid; box-shadow:0 0 14px #d5aa4c20 }
.tyvo-opponent-copy { flex:1; gap:3px; min-width:0; display:grid }
.tyvo-opponent-copy small { color:#c9aa5b; letter-spacing:.1em; font-size:8px }
.tyvo-opponent-copy b { color:#f4e5bd; text-overflow:ellipsis; white-space:nowrap; font-size:11px; overflow:hidden }
.tyvo-opponent-copy span { color:#9fa595; font-size:9px }
.tyvo-reroll { color:#d8c17b; background:#101812; border:1px solid #65735d; border-radius:50%; flex:none; width:29px; height:29px; min-height:0; padding:0; font-size:19px; line-height:1 }
.tyvo-reroll:hover { background:#2c2b1e; border-color:#d2b462 }
.tyvo-progress { background:#0e1511; border:1px solid #3d4b3e; border-radius:8px; gap:6px; padding:9px 10px; display:grid }
.tyvo-progress>div:first-child { color:#9da594; justify-content:space-between; gap:8px; font-size:9px; display:flex }
.tyvo-progress>div:first-child b { color:#e5d4a3; text-align:right; font-size:10px }
.tyvo-progress-track { background:#080c09; border:1px solid #625431; border-radius:7px; height:6px; overflow:hidden }
.tyvo-progress-track i { border-radius:inherit; background:linear-gradient(90deg,#9c762d,#f0d07b); height:100%; transition:width .2s; display:block; box-shadow:0 0 9px #e8c76c55 }
.tyvo-progress>small { color:#8e9989; font-size:8px }
.tyvo-difficulty { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; display:grid }
.tyvo-difficulty button { color:#aeb3a3; text-align:center; background:#0d1410; border:1px solid #344238; border-radius:8px; gap:4px; min-width:0; padding:7px 4px; display:grid }
.tyvo-difficulty button b { font-size:9px }
.tyvo-difficulty button small { color:#899284; white-space:nowrap; font-size:8px }
.tyvo-difficulty button.on { color:#ffe3a0; background:linear-gradient(145deg,#312a1b,#171d17); border-color:#ab8742; box-shadow:inset 0 0 0 1px #e6c66b15 }
.tyvo-difficulty button.on small { color:#d6bf7a }
.tyvo-start-row { justify-content:space-between; align-items:center; gap:8px; padding:2px 1px; display:flex }
.tyvo-start-row>span { color:#a4aa9a; font-size:9px }
.tyvo-start-row .btn { min-width:106px }
.tyvo-rule { background:#a987470d; border-left:2px solid #a98747; border-radius:0 7px 7px 0; gap:3px; padding:8px 9px; display:grid }
.tyvo-rule b { color:#d9c17b; font-size:9px }
.tyvo-rule span { color:#9fa595; font-size:9px; line-height:1.45 }
.tyvo-active-card { background:linear-gradient(110deg,#1d2a1e,#101712); border:1px solid #627247; border-radius:9px; align-items:center; gap:9px; padding:10px; display:flex }
.tyvo-active-card>div { flex:1; gap:3px; min-width:0; display:grid }
.tyvo-active-card small { color:#cbb462; letter-spacing:.07em; font-size:8px }
.tyvo-active-card b { color:#f2e2bc; text-overflow:ellipsis; white-space:nowrap; font-size:10px; overflow:hidden }
.tyvo-active-card span:not(.tyvo-live-dot) { color:#a5ad9a; font-size:9px }
.tyvo-live-dot { background:#83d16c; border-radius:50%; flex:none; width:9px; height:9px; animation:1.8s ease-in-out infinite tyvo-pulse; box-shadow:0 0 0 4px #83d16c20,0 0 10px #83d16c70 }
@keyframes tyvo-pulse {
    50% { box-shadow:0 0 0 6px #83d16c12,0 0 4px #83d16c35 }
}
.tyvo-history { background:#0d1410; border:1px solid #334138; border-radius:8px; overflow:hidden }
.tyvo-history summary { color:#c8bd9a; cursor:pointer; justify-content:space-between; padding:8px 9px; font-size:9px; list-style:none; display:flex }
.tyvo-history summary::-webkit-details-marker { display:none }
.tyvo-history>div { gap:1px; padding:0 8px 6px; display:grid }
.tyvo-history-row { border-top:1px solid #ffffff0b; grid-template-columns:35px minmax(0,1fr); gap:2px 6px; padding:5px 1px; display:grid }
.tyvo-history-row>b { color:#d8d2c2; text-overflow:ellipsis; white-space:nowrap; font-size:9px; overflow:hidden }
.tyvo-history-row>small { color:#879083; grid-column:2; font-size:8px }
.tyvo-history-result { grid-row:span 2; font-size:8px }
.tyvo-shop-head { border-bottom:1px solid #544932; justify-content:space-between; align-items:center; margin-top:2px; padding-bottom:4px; display:flex }
.tyvo-shop-head b { color:#e7d9b0; font-size:10px }
.tyvo-shop-head small { color:#838d81; font-size:8px }
.tyvo-shop-row { border-bottom:1px solid #ffffff0a; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; padding:5px 1px; display:grid }
.tyvo-shop-row>span { color:#c8c4b3; font-size:9px }
.tyvo-shop-row>small { color:#d8bd70; white-space:nowrap; font-size:8px }
.tyvo-shop-row .btn { min-width:46px }
.tyvo-hud { z-index:7; text-align:center; pointer-events:auto; background:linear-gradient(135deg,#101812eb,#080d0be8); border:1px solid #d1b36b99; border-radius:9px; gap:4px; width:min(330px,100% - 120px); padding:8px 10px; display:grid; position:absolute; top:9px; left:50%; transform:translate(-50%); box-shadow:0 5px 18px #0008,inset 0 1px #ffffff0a }
.tyvo-hud-kicker { color:#d4b568; letter-spacing:.12em; font-size:7px; font-weight:700 }
.tyvo-hud>b { color:#f7e9c4; text-overflow:ellipsis; white-space:nowrap; font-size:10px; overflow:hidden }
.tyvo-hud-meta,.tyvo-round-clock { color:#aeb5a4; font-size:8px }
.tyvo-round-clock b { color:#f0d489; font-variant-numeric:tabular-nums; margin-left:4px; font-size:13px }
.tyvo-hud-stop { color:#f0b4a3; background:#351e1a; border:1px solid #815146; border-radius:12px; justify-self:center; min-height:21px; padding:2px 10px; font-size:8px }
body.tyvo-active #bg { filter:saturate(.8)brightness(.9); background-image:radial-gradient(at 50% 48%,#826d3b44 0%,#273027d9 35%,#080e0c 86%)!important }
body.tyvo-active #battle:after { background:radial-gradient(at 50% 48%,#0000 36%,#0008 100%) }
body.tyvo-active #worldChat { display:none!important }
@media (width<=420px) {
    .tyvo-heading { padding:10px }
    .tyvo-heading h3 { font-size:16px }
    .tyvo-currency { min-width:64px; padding:6px 7px }
    .tyvo-currency b { font-size:16px }
    .tyvo-reset-line { flex-direction:column; align-items:flex-start; gap:2px }
    .tyvo-start-row>span { max-width:54% }
    .tyvo-difficulty button { padding:6px 2px }
    .tyvo-hud { width:min(270px,100% - 90px); top:7px }
    .tyvo-hud-kicker { font-size:6.5px }
}
body.mobile-landscape.tyvo-active .tyvo-hud { top:calc(var(--mobile-top) + 106px) }

/* Bảng xếp hạng (BXH) trong khung chat thế giới — port upstream game.BHLuGkwx.css */
.world-rank-board{color:#e8dfc6;flex-direction:column;flex:1;min-width:0;min-height:0;font-size:clamp(11px,1.5vw,14px);display:flex}
.world-rank-header{border-bottom:1px solid #d6c88c66;flex:none;justify-content:center;align-items:center;min-height:32px;display:flex}
.world-rank-header h3{color:#eadfbe;text-align:center;margin:0;font-size:clamp(15px,2vw,20px)}
.world-rank-tabs{background:#090d0b99;border:1px solid #d6c88c55;flex:none;gap:2px;margin:8px 0 7px;padding:2px;display:flex}
.world-rank-modes{background:#090d0b99;border:1px solid #8d9b8a55;border-radius:6px;flex:none;align-self:flex-start;gap:2px;margin:-2px 0 7px;padding:2px;display:flex}
.world-rank-filter{color:#d8d1bb;flex:none;align-items:center;gap:10px;margin-bottom:7px;display:flex}
.world-rank-filter>label{flex:none}
.world-rank-self{color:#f0cf69}
.world-rank-filter select{color:#e8dfc6;min-width:100px;min-height:32px;font:inherit;background:#0b110e;border:1px solid #cbbb7966;border-radius:5px;flex:1;padding:4px 9px}
.world-rank-table-wrap{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#81907866 transparent;border:1px solid #8d88765c;flex:1;min-height:0;overflow:auto}
.world-rank-table{border-collapse:collapse;table-layout:fixed;width:100%}
.world-rank-table th,.world-rank-table td{text-align:left;overflow-wrap:anywhere;border:1px solid #77746652;height:31px;padding:5px 9px}
.world-rank-table th{z-index:1;color:#e6d9b2;background:#171e19;font-weight:600;position:sticky;top:0}
.world-rank-table th:first-child,.world-rank-table td:first-child{width:54px}
.world-rank-table th:nth-child(2),.world-rank-table td:nth-child(2){width:34%}
.world-rank-table th:nth-child(3),.world-rank-table td:nth-child(3){width:40%}
.world-rank-table td{color:#e8dfc6}
.world-rank-table tbody tr:hover{background:#e7d69a0b}
.world-rank-name{color:#83db83;max-width:100%;font:inherit;text-align:left;overflow-wrap:anywhere;background:0 0;border:0;padding:0}
.world-rank-name:hover,.world-rank-name:focus-visible{color:#b5f3a2;-webkit-text-decoration:underline #d8bc5b;text-decoration:underline #d8bc5b}
.world-rank-message{text-align:center!important;color:#a4ad9f!important}
.world-rank-foot{color:#9da69a;flex:none;padding:6px 2px 0;font-size:.84em}
.rank-tab{color:#aaa894;min-height:29px;font-size:inherit;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:4px;padding:4px 13px}
.rank-tab.active{color:#ffe08a;background:linear-gradient(#5a5b46,#373d31);border-color:#c4b47766;box-shadow:inset 0 -2px #e3c86b}
.rank-mode{color:#aab1a6;min-height:25px;font:inherit;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:4px;padding:3px 10px;font-size:.9em}
.rank-mode.active{color:#e8dfc6;background:linear-gradient(#34483c,#1c2b23);border-color:#8ca29177;box-shadow:inset 0 -2px #94b49a}
@media (max-width:640px){
#modal.world-leaderboard-modal{padding:6px}
#modal.world-leaderboard-modal .mbox{width:96vw;max-height:calc(88dvh - var(--safe-t));padding:8px}
.world-rank-tabs{margin:6px 0;padding:1px}
.rank-tab{min-height:27px;padding:3px 7px;font-size:10px}
.world-rank-modes{margin:-2px 0 6px;padding:1px}
.rank-mode{min-height:23px;padding:2px 8px;font-size:10px}
.world-rank-filter{gap:6px;font-size:10px}
.world-rank-filter select{min-width:76px;min-height:29px}
.world-rank-table th,.world-rank-table td{height:28px;padding:4px 6px}
.world-rank-table th:first-child,.world-rank-table td:first-child{width:36px}
.world-rank-table th:nth-child(2),.world-rank-table td:nth-child(2){width:33%}
.world-rank-table th:nth-child(3),.world-rank-table td:nth-child(3){width:37%}
}

/* ---------- Hoat dong giang ho + Ky Tran Cac (port nguon v107) ---------- */
#modal.giang-ho-event-modal .mbox{ width:min(calc(100% / var(--fs,1)),900px);max-height:min(calc((100dvh - 32px) / var(--fs,1)),840px);background:#101a15 radial-gradient(at 0 0,#c4a1540c,#0000 55%);border:1px solid #8e7849;border-radius:14px;flex-direction:column;padding:0;display:flex;overflow:hidden;box-shadow:0 24px 80px #000b,inset 0 1px #eadbb118 }
#modal.giang-ho-event-modal #mBody{ flex:1;min-height:0;display:flex;overflow:hidden }
#modal.giang-ho-event-modal #mClose{ z-index:2;color:#99aa90;background:#0d1710;border-color:#82947a44;width:28px;height:28px;font-size:15px;top:13px;right:13px }
.event-shell{ color:#dfdfcf;flex-direction:column;flex:1;min-width:0;min-height:0;font-size:12px;line-height:1.5;display:flex }
.event-eyebrow{ color:#bda66b;letter-spacing:.13em;font-size:9px;font-weight:600;line-height:1.5;display:block }
.event-heading{ background:linear-gradient(120deg,#b79d4610,#0000 70%);border-bottom:1px solid #c8a76022;flex:none;justify-content:space-between;align-items:center;gap:18px;padding:15px 60px 12px 24px;display:flex }
.event-heading-copy{ min-width:0 }
.event-heading h3{ color:#f1e2b7;margin:3px 0 4px;font-family:Georgia,Times New Roman,serif;font-size:25px;font-weight:600;line-height:1.15 }
.event-heading p{ color:#889d8e;margin:0;font-size:10px }
.event-wallet{ flex:none;gap:18px;display:flex }
.event-wallet>div{ align-items:center;gap:7px;display:flex }
.event-wallet img{ object-fit:contain;width:24px;height:23px }
.event-wallet span{ gap:1px;display:grid }
.event-wallet b{ color:#ecd18c;font-variant-numeric:tabular-nums;font-size:13px;line-height:1.3 }
.event-wallet small{ color:#90a192;font-size:9px }
.event-tabs{ background:#0a120e44;border-bottom:1px solid #c8a76022;flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:8px 24px;display:grid }
.event-tabs button{ color:#92a496;background:0 0;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:9px;min-width:0;min-height:38px;padding:5px 10px;font-size:12px;transition:background .15s,border-color .15s,color .15s;display:flex }
.event-tabs img{ object-fit:contain;opacity:.65;width:25px;height:25px }
.event-tabs button:hover{ color:#eadaba;background:#a9bdab0b }
.event-tabs button.on{ color:#f2d99a;background:linear-gradient(110deg,#c8a14b20,#b4964010);border-color:#bda36177;box-shadow:inset 0 1px #ead79f0a }
.event-tabs button.on img{ opacity:1 }
.event-content{ overscroll-behavior:contain;scrollbar-color:#665c3a #101a15;scrollbar-width:thin;flex:1;min-height:0;padding:20px 24px 24px;overflow:auto }
.event-footer{ background:#0c1511;border-top:1px solid #c8a76022;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;display:flex }
.event-footer>span{ color:#809286;font-size:9px }
.event-shell .btn{ min-height:36px;text-shadow:none;white-space:normal;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:8px 13px;font-size:11px;transition:background .15s,border-color .15s;display:inline-flex }
.event-shell .btn.event-primary{ color:#101a13;background:linear-gradient(#b49349,#927033);border-color:#c2a053;font-weight:700;box-shadow:inset 0 1px #f9e3ac4d,0 3px 8px #0003 }
.event-shell .btn.event-primary:hover:not(:disabled){ filter:none;background:linear-gradient(#ceac5c,#a5833f);transform:none;box-shadow:inset 0 1px #f9e3ac4d,0 3px 8px #0003 }
.event-shell .btn.event-secondary{ color:#d9c78f;background:#1b271d;border-color:#64734c77;box-shadow:inset 0 1px #ffffff08 }
.event-secondary img{ object-fit:contain;width:18px;height:17px }
.event-shell .btn:disabled{ opacity:1;color:#82907b;box-shadow:none;background:#28302366;border-color:#62705b44 }
.event-shell .btn.event-claimed{ color:#a8c8a7;background:#35523733;border-color:#68936755;font-size:10px }
.event-section-head{ justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;display:flex }
.event-section-head h4{ color:#eedfba;margin:3px 0 0;font-family:Georgia,Times New Roman,serif;font-size:21px;font-weight:600;line-height:1.2 }
.event-tag{ color:#aabc9e;background:#8094740a;border:1px solid #a5b29330;border-radius:4px;flex:none;padding:4px 7px;font-size:9px;line-height:1.4;display:inline-block }
.event-intro{ color:#94a494;margin:0 0 17px;font-size:11px }
.event-note{ color:#a1af99;margin:12px 0 0;font-size:11px;line-height:1.65 }
.event-active{ background:#29412c44;border:1px solid #81a96b66;border-radius:8px;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;display:flex }
.event-active>div{ flex:1;gap:2px;min-width:0;display:grid }
.event-active small{ color:#abcb8e;letter-spacing:.1em;font-size:8px }
.event-active b{ color:#e2e7bf;font-size:12px }
.event-active span:not(.event-live-dot){ color:#98ae93;font-size:10px }
.event-live-dot{ background:#a2d488;border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 0 4px #a2d48818 }
.event-rules{ color:#95a58e;border-top:1px solid #8e9d852c;margin-top:18px;padding-top:12px;font-size:10px }
.event-rules summary{ color:#b2bda2;cursor:pointer;width:fit-content }
.event-rules p{ max-width:720px;margin:10px 0 0;line-height:1.8 }
.dungeon-card header .event-tag{ padding:3px 5px;font-size:8px }
.event-reward-tile{ align-items:center;gap:8px;min-width:0;display:flex }
.event-reward-tile img{ object-fit:contain;flex:none;width:29px;height:29px }
.event-reward-tile>div{ gap:2px;min-width:0;display:grid }
.event-reward-tile b{ color:#ddd2a2;font-size:11px;line-height:1.35 }
.event-reward-tile small{ color:#8b9e8b;font-size:8px }
.event-feature{ background:radial-gradient(at 84% 36%,#b89c3628,#0000 56%),linear-gradient(125deg,#293526,#142019);border:1px solid #9d895652;border-radius:10px;flex-direction:column;min-width:0;padding:18px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #eadeae0b }
.event-feature-art{ object-fit:contain;filter:drop-shadow(0 7px 10px #0006);pointer-events:none;width:132px;height:132px;position:absolute;top:25px;right:15px }
.event-feature-copy{ z-index:1;padding-right:125px;position:relative }
.event-feature h4{ color:#f4df9f;text-wrap:balance;margin:7px 0 8px;font-family:Georgia,Times New Roman,serif;font-size:32px;font-weight:600;line-height:1.15 }
.event-feature-meta{ color:#cad3b7;align-items:center;gap:8px;font-size:10px;display:flex }
.event-feature-meta>img{ object-fit:contain;width:28px;height:28px;image-rendering:pixelated }
.event-feature-meta>span{ gap:3px;display:grid }
.event-feature-meta small{ color:#8c9c83;font-size:9px }
.event-feature-facts{ flex-wrap:wrap;gap:7px;margin-top:12px;display:flex }
.event-feature-facts>span{ color:#bcbf96;white-space:nowrap;background:#0c160d44;border:1px solid #b6a97022;border-radius:4px;padding:4px 6px;font-size:9px }
.event-feature-actions{ align-items:center;gap:12px;margin-top:auto;padding-top:16px;display:flex;position:relative }
.event-feature-actions .btn{ min-width:134px }
.event-feature-actions>span{ color:#99aa8b;font-size:10px }
.event-feature-actions>span b{ color:#e4d193 }
.event-rank-seal{ clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);color:#ceb779;text-shadow:0 1px 2px #0008;background:linear-gradient(140deg,#82693777,#52482744);flex:none;place-items:center;width:35px;height:40px;font-family:Georgia,Times New Roman,serif;font-size:23px;font-weight:700;display:grid }
.event-rank-seal.earned{ color:#fce7ae;background:linear-gradient(140deg,#ae8b43,#695424) }
.wb-reward-section .event-section-head{ margin-bottom:14px }
.event-ranks{ grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid }
.event-rank{ background:#17231a;border:1px solid #74876838;border-radius:8px;flex-direction:column;min-width:0;display:flex;overflow:hidden }
.event-rank header{ align-items:center;gap:9px;padding:14px 12px 10px;display:flex }
.event-rank header>div{ gap:3px;display:grid }
.event-rank header b{ color:#d5d8b9;font-size:13px;font-weight:500 }
.event-rank header small{ color:#97aa91;font-size:9px }
.event-rank ul{ color:#b1bea3;gap:7px;margin:0;padding:13px 12px 14px;font-size:11px;line-height:1.5;list-style:none;display:grid }
.event-rank li:before{ content:"·";color:#738263;margin-right:5px }
.event-rank li.rank-rare{ color:#d4bd7d }
.event-rank.on{ background:linear-gradient(155deg,#303820,#1b291b);border-color:#c0a35588;box-shadow:inset 0 0 0 1px #c0a3550a }
.event-rank.on .rank-current{ color:#e1ca85;background:#a88b371a;border-color:#bba05744 }
.boat-feature .event-feature-art{ width:140px;height:140px;top:25px }
.event-feature-copy>p{ color:#9ab19b;margin:0;font-size:10px;line-height:1.7 }
.boat-rewards .event-reward-tile{ background:#17271d;border:1px solid #75886233;border-radius:7px;padding:14px }
.boat-rewards .event-reward-tile img{ width:34px;height:34px }
.boat-rewards .event-reward-tile b{ font-size:13px }
.event-shop{ grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid }
.event-shop-row{ background:#17271d;border:1px solid #71836144;border-radius:8px;flex-direction:column;min-width:0;padding:15px;display:flex }
.event-shop-item-head{ align-items:center;gap:12px;display:flex }
.event-shop-item-head>img{ object-fit:contain;flex:none;width:40px;height:40px }
.event-shop-item-head>div{ gap:5px;min-width:0;display:grid }
.event-shop-item-head b{ color:#e5d5a4;font-size:12px }
.event-shop-item-head small{ color:#819e82;font-size:9px }
.event-shop-row>p{ color:#98ab92;margin:12px 0 15px;font-size:10px;line-height:1.65 }
.event-shop-row .btnrow{ justify-content:space-between;gap:8px;margin-top:auto }
.event-shop-row .btnrow .event-primary{ flex:1 }
.event-shop-stock{ color:#899f7f;font-size:9px }
.event-exchange{ background:linear-gradient(120deg,#39321b55,#19271a66);border:1px solid #a38d454a;border-radius:8px;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px;padding:14px;display:flex }
.event-exchange>div{ align-items:center;gap:10px;display:flex }
.event-exchange img{ object-fit:contain;width:32px;height:32px }
.event-exchange span{ gap:4px;display:grid }
.event-exchange b{ color:#dfcf96;font-size:12px }
.event-exchange small{ color:#8ea087;font-size:9px }
.event-exchange .btnrow{ flex:none;margin:0 }
.event-heading{ gap:12px;padding:18px 48px 15px 18px }
.event-heading h3{ font-size:23px }
.event-wallet{ gap:10px }
.event-wallet img{ width:20px;height:20px }
.event-wallet b{ font-size:11px }
.event-tabs{ padding:10px 18px }
.event-content{ padding:18px }
.event-footer{ padding:10px 18px }
.event-ranks{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.event-feature{ padding:16px }
.event-feature-copy{ padding-right:0 }
.event-feature-art{ opacity:.3;width:96px;height:96px;top:23px;right:8px }
.event-feature h4{ font-size:28px }
.event-feature-actions{ flex-wrap:wrap;gap:9px }
.event-feature-actions .btn{ min-width:110px }
#modal.giang-ho-event-modal{ padding:8px }
#modal.giang-ho-event-modal .mbox{ max-height:calc((100dvh - 20px) / var(--fs,1));border-radius:11px }
.event-heading{ flex-wrap:wrap;align-items:flex-start;gap:12px;padding:17px 16px 13px }
.event-heading-copy{ padding-right:32px }
.event-heading h3{ font-size:23px }
.event-heading p{ font-size:9px }
.event-wallet{ gap:18px;width:100% }
.event-wallet>div{ gap:6px }
.event-wallet span{ align-items:baseline;gap:5px;display:flex }
.event-wallet b{ font-size:11px }
.event-wallet small{ font-size:8px }
.event-wallet img{ width:17px;height:17px }
.event-tabs{ gap:3px;padding:8px 12px }
.event-tabs button{ gap:5px;min-height:41px;padding:5px 4px;font-size:10px }
.event-tabs img{ width:23px;height:23px }
.event-content{ padding:16px 13px 18px }
.event-footer{ gap:8px;padding:10px 13px }
.event-footer>span{ max-width:43%;font-size:8px }
.event-footer .btn{ min-height:33px;padding:7px 9px;font-size:10px }
.event-section-head{ align-items:flex-start;gap:8px }
.event-section-head h4{ font-size:20px }
.event-section-head .event-tag{ text-align:right;flex:0 auto;max-width:110px;font-size:8px }
.event-section-head .btn{ min-height:32px;padding:7px 9px;font-size:9px }
.event-eyebrow{ font-size:8px }
.event-intro{ font-size:9px;line-height:1.7 }
.dungeon-grid,.event-shop{ grid-template-columns:minmax(0,1fr);gap:11px }
.event-feature{ padding:17px }
.event-feature-art{ opacity:1;width:112px;height:112px;top:13px;right:12px }
.event-feature-copy{ padding-right:105px }
.event-feature h4{ margin:7px 0 8px;font-size:27px }
.event-feature-meta>img{ width:22px;height:28px }
.event-feature-facts{ gap:5px;margin-top:11px }
.event-feature-facts>span{ padding:4px 5px;font-size:8px }
.event-feature-actions{ flex-wrap:nowrap;justify-content:space-between;padding-top:15px }
.event-feature-actions .btn{ min-width:138px;min-height:36px;font-size:11px }
.event-feature-actions>span{ font-size:9px }
.wb-record-head .event-rank-seal{ width:31px;height:36px;font-size:22px;position:absolute;top:0;right:0 }
.event-ranks{ gap:9px }
.event-rank header{ gap:8px;padding:12px 10px 9px }
.event-rank header .event-rank-seal{ width:29px;height:34px;font-size:21px }
.event-rank ul{ gap:6px;padding:11px 10px;font-size:10px }
.event-note,.event-rules{ font-size:10px }
.boat-feature .event-feature-art{ opacity:1;width:125px;height:125px;top:8px;right:9px }
.boat-rewards .event-reward-tile{ gap:6px;padding:11px }
.boat-rewards .event-reward-tile img{ width:26px;height:26px }
.boat-rewards .event-reward-tile b{ font-size:11px }
.boat-rewards .event-reward-tile small{ font-size:7.5px }
.event-exchange{ flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px }
.event-exchange .btnrow{ width:100% }
.event-exchange .btn{ flex:1;font-size:9px }
.event-shop-row{ padding:14px }
.event-active{ gap:10px;padding:10px }
.event-active b{ font-size:10px }
.event-active span:not(.event-live-dot){ font-size:8px }
.event-active .btn{ min-height:30px;padding:5px 8px;font-size:9px }
.event-tabs button,.dungeon-card,.event-shell .btn{ transition:none }
/* hub 4 tab: luoi tab 4 cot */
.event-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
/* KTC + pho ban do minh viet */
.ktc-knb{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:12px;border:1px solid #c8a76033;border-radius:8px;background:#0b120e}
.ktc-knb img{width:34px;height:34px;object-fit:contain}
.ktc-knb span{display:grid;flex:1;gap:2px}
.ktc-knb b{color:#ffe08a;font-size:13px}
.ktc-knb small{color:#98a397;font-size:10px}
.ktc-item{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:6px;border:1px solid #2c3b35;border-radius:8px;background:#151d1a}
.ktc-item>img{width:30px;height:30px;object-fit:contain;flex:none}
.ktc-item-mid{display:grid;gap:2px;flex:1;min-width:0}
.ktc-item-mid b{color:#e9e2d0;font-size:12px}
.ktc-item-mid small{color:#98a397;font-size:10px;line-height:1.45}
.ktc-have{color:#9fe36a}
.ktc-item-act{display:grid;gap:4px;justify-items:stretch}
.ktc-note{display:block;margin-top:8px}
.dg-card{padding:10px 12px;margin-bottom:8px;border:1px solid #2c3b35;border-radius:8px;background:#151d1a}
.dg-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.dg-card-head b{color:#f2d99a;font-size:13px}
.dg-card-head small{color:#98a397;font-size:9px;white-space:nowrap}
.dg-rewards{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.dg-rewards span{padding:2px 7px;border:1px solid #4a5f5566;border-radius:5px;background:#0b110e;color:#d8d1bb;font-size:9px}
.dg-card footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}
.dg-card footer span{color:#98a397;font-size:10px}
.dg-rules{color:#95a58e;font-size:10px;margin-top:10px}
#top .gold.knb{margin-left:6px}

/* Lĩnh ngộ 90 */
.lk90-row{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:5px;border:1px solid #2c3b35;border-radius:8px;background:#151d1a}
.lk90-mid{display:grid;gap:2px;flex:1;min-width:0}
.lk90-mid b{color:#e9e2d0;font-size:12px}
.lk90-on{color:#9fe36a;font-size:10px}
/* Tab Khác 2.6.17: giảm trong suốt khung chat (nguồn cChatTransparency) */
body.chat-transparency #worldChat{opacity:.72}
body.chat-transparency #worldChat:hover{opacity:1}

/* ---------- Che do treo may (AFK) — port nguon v119 ---------- */
#afk{z-index:80;cursor:pointer;text-align:center;touch-action:manipulation;background:radial-gradient(#0f1b15e0,#030705f5);place-items:center;padding:20px;display:grid;position:absolute;inset:0}
#afk .afkbox{background:linear-gradient(145deg,#1c2922ed,#0d1511f2);border:1px solid #a8864a;border-radius:14px;justify-items:center;gap:12px;width:min(100%,360px);padding:28px 22px;display:grid;box-shadow:0 12px 40px #000a,inset 0 1px #ffffff16}
#afk .afkic{color:#e6c67a;border:1px solid #e6c67a;border-radius:50%;place-items:center;width:54px;height:54px;font-size:28px;display:grid}
#afk .afkbox>b{color:#f2d58f;letter-spacing:.08em;font-size:18px}
#afk .afkst{color:var(--text);line-height:1.9}
#afk .afkst b{color:#f2d58f}
#afk .afkbox small{color:var(--dim);margin-top:4px}
.afk-saver-toggle{min-height:32px;box-shadow:none;color:#f1d489;white-space:nowrap;background:0 0;border:0;border-radius:0;flex:0 auto;padding:2px 0;font-size:11px}
.afk-actions{flex-wrap:nowrap;justify-content:space-between;width:100%}

/* ---------- bk90-picker: modal Dùng Võ Lâm Mật Tịch (nguồn v119) ---------- */
#modal.bk90-skill-modal .mbox{box-sizing:border-box;background-color:#101a15;background-image:radial-gradient(at 8% 0,#c19b481f,#0000 42%),linear-gradient(145deg,#18251efa,#090f0cfc);border-color:#6f927c;width:min(100%,820px);max-height:min(90%,760px);padding:18px;box-shadow:0 18px 55px #000b,inset 0 1px #ffffff0c}
.bk90-picker{gap:12px;display:grid}
.bk90-picker-head{border-bottom:1px solid #71816b55;justify-content:space-between;align-items:center;gap:16px;padding:0 42px 10px 0;display:flex}
.bk90-picker-head h3{color:#f3d68c;margin:0 0 5px;font-size:17px}
.bk90-picker-head p{color:#adb9ad;margin:0;font-size:11px;line-height:1.5}
.bk90-book-count{background:linear-gradient(145deg,#292417,#111612);border:1px solid #8a713b;border-radius:8px;flex:none;grid-template-columns:34px auto;align-items:center;gap:0 7px;min-width:84px;padding:6px 9px;display:grid;box-shadow:inset 0 1px #fff1}
.bk90-book-count img{object-fit:contain;image-rendering:auto;grid-row:span 2;width:32px;height:32px}
.bk90-book-count b{color:#f4d57f;font-size:13px;line-height:1.1}
.bk90-book-count small{color:#aeb6a8;font-size:9px}
.bk90-picker-summary{color:#aeb8aa;letter-spacing:.2px;align-items:center;gap:5px;font-size:10px;display:flex}
.bk90-picker-summary span{color:#9be19a;font-size:13px;font-weight:700}
.bk90-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}
.bk90-skill-card{background:linear-gradient(145deg,#1d2b23f0,#101814fa);border:1px solid #384a40;border-radius:9px;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;min-height:70px;padding:9px;transition:border-color .16s,background .16s,box-shadow .16s;display:grid;box-shadow:inset 0 1px #ffffff08}
.bk90-skill-card.is-ready{background:linear-gradient(145deg,#302a1bd1,#121914fa);border-color:#85713d;box-shadow:inset 0 0 0 1px #e0bd5e12}
.bk90-skill-card.is-ready:hover{border-color:#dfbd65;box-shadow:inset 0 0 0 1px #e0bd5e24,0 3px 12px #0005}
.bk90-skill-card.is-training{background:linear-gradient(145deg,#1c3022eb,#0f1712fa);border-color:#557b57;box-shadow:inset 0 0 0 1px #7dd18412}
.bk90-skill-card.is-training:hover{border-color:#8bc58d;box-shadow:inset 0 0 0 1px #7dd18424,0 3px 12px #0005}
.bk90-skill-card.is-locked{opacity:.76}
.bk90-skill-icon{box-sizing:border-box;object-fit:contain;width:44px;height:44px;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #0008);background:radial-gradient(circle at 50% 35%,#34493d,#101713 76%);border:1px solid #52685b;border-radius:8px;padding:4px;display:grid}
.bk90-skill-icon-fallback{color:#e4c678;place-items:center;font-size:22px}
.bk90-skill-info>b{color:#f1e5c5;text-overflow:ellipsis;font-size:12px;line-height:1.35;overflow:hidden}
.bk90-skill-info>small{color:#8f9e91;font-size:9px;line-height:1.35}
.bk90-skill-status{color:#aab8a9;background:#0d1511;border:1px solid #46564b;border-radius:10px;justify-self:start;padding:2px 6px;font-size:9px;line-height:1.35}
.is-ready .bk90-skill-status{color:#9be19a;background:#102017;border-color:#4d8054}
.is-training .bk90-skill-status{color:#a8dca9;background:#102017;border-color:#4d8054}
.is-learned .bk90-skill-status{color:#b4c5b7;border-color:#4b6455}
.is-locked .bk90-skill-status{color:#dfbd72;border-color:#65543a}
.bk90-skill-action{white-space:nowrap;justify-items:center;gap:1px;min-width:112px;min-height:42px;padding:5px 9px;display:grid}
.bk90-skill-action span{font-size:11px;font-weight:700}
.bk90-skill-action small{color:#e4c987;font-size:9px;line-height:1.15}
.bk90-empty{color:#aeb8aa;text-align:center;border:1px dashed #546459;border-radius:8px;grid-column:1/-1;margin:0;padding:18px}
@media(max-width:640px){
#modal.bk90-skill-modal .mbox{max-height:calc(100% - 12px);padding:14px}
.bk90-skill-grid{grid-template-columns:minmax(0,1fr)}
.bk90-picker-head{gap:8px;padding-right:38px}
.bk90-picker-head p{max-width:38ch}
.bk90-picker-head{align-items:flex-start}
.bk90-picker-head h3{font-size:14px}
.bk90-book-count{grid-template-columns:28px auto;min-width:68px;padding:5px 6px}
.bk90-book-count img{width:27px;height:27px}}

/* ---------- trang thành tựu + danh hiệu (nguồn v119) ---------- */
.achievement-page{gap:9px;display:grid}
.achievement-overview{background:radial-gradient(at 0 0,#b8953a28,#0000 58%),linear-gradient(135deg,#22291f,#101713);border:1px solid #806b3e;border-radius:10px;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;display:grid;box-shadow:inset 0 1px #ffffff0a}
.achievement-overview-sigil{color:#f3d47e;text-shadow:0 0 9px #f3d47e66;background:radial-gradient(circle,#594925,#1b2119 72%);border:1px solid #b99952;border-radius:50%;place-items:center;width:40px;height:40px;font-size:23px;display:grid}
.achievement-overview-copy{gap:4px;min-width:0;display:grid}
.achievement-overview-copy>small,.achievement-current-title small{color:#bba66e;letter-spacing:.1em;font-size:8px;font-weight:700}
.achievement-overview-copy>b{color:#f1e4c2;font-size:13px}
.achievement-overview-copy>b>span{color:#92998b;font-size:11px;font-weight:400}
.achievement-progress{background:#080d0a;border:1px solid #615534;border-radius:5px;height:5px;overflow:hidden}
.achievement-progress>i{border-radius:inherit;background:linear-gradient(90deg,#8b6d2e,#f0d27c);height:100%;transition:width .25s;display:block;box-shadow:0 0 8px #e7c66766}
.achievement-percent{color:#f0d27c;font-variant-numeric:tabular-nums;font-size:19px}
.achievement-percent small{font-size:10px}
.achievement-current-title{background:linear-gradient(110deg,#17231b,#111713);border:1px solid #35483c;border-radius:8px;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;display:flex}
.achievement-current-title>span{gap:3px;min-width:0;display:grid}
.achievement-current-title>span>b{color:#a9b4a8;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}
.achievement-current-title>span>b.is-wearing{color:#f0d27c}
.achievement-title-count{text-align:right;flex:none}
.achievement-title-count>b{color:#d5c58e;font-variant-numeric:tabular-nums;font-size:11px}
.achievement-intro{color:var(--dim);margin:0;font-size:10px;line-height:1.4}
.achievement-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:7px;display:grid}
.achievement-card{background:linear-gradient(145deg,#1c2821,#111713 76%);border:1px solid #384a40;border-radius:9px;align-content:start;gap:7px;min-width:0;padding:10px;display:grid;box-shadow:inset 0 1px #ffffff08}
.achievement-card.is-earned{background:radial-gradient(at 100% 0,#a07e3120,#0000 54%),linear-gradient(145deg,#24271d,#111713 76%);border-color:#75633d}
.achievement-card.is-locked{background:linear-gradient(145deg,#19211c,#101512 76%);border-color:#344139}
.achievement-card-head{justify-content:space-between;align-items:center;gap:8px;display:flex}
.achievement-card-seal{color:#788579;font-variant-numeric:tabular-nums;background:#121a15;border:1px solid #48574a;border-radius:50%;place-items:center;width:23px;height:23px;font-size:9px;display:grid}
.achievement-card.is-earned .achievement-card-seal{color:#f0d27c;background:radial-gradient(circle,#554622,#201f17);border-color:#aa8a45;font-size:13px}
.achievement-card-state{color:#879387;letter-spacing:.07em;border:1px solid #3d4d42;border-radius:10px;padding:3px 7px;font-size:8px;font-weight:700}
.achievement-card.is-earned .achievement-card-state{color:#c8d28d;background:#293021;border-color:#5e633e}
.achievement-card>h4{color:#e9e0cb;margin:0;font-size:12px;font-weight:600;line-height:1.35}
.achievement-card.is-earned>h4{color:#f2e6c7}
.achievement-reward{background:#090f0c66;border-radius:6px;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 7px;display:flex}
.achievement-reward>small{color:#818d81;letter-spacing:.08em;flex:none;font-size:7px;font-weight:700}
.achievement-reward>b{color:#d1c7ad;text-align:right;font-size:9px;font-weight:500}
.achievement-title-line{border-top:1px solid #ffffff12;align-items:center;gap:7px;min-width:0;padding-top:6px;display:flex}
.achievement-title-sigil{color:#e7ca76;background:#2b271b;border:1px solid #79653d;border-radius:6px;flex:none;place-items:center;width:25px;height:25px;font-size:13px;display:grid}
.achievement-title-copy{gap:2px;min-width:0;display:grid}
.achievement-title-copy>small{color:#849084;letter-spacing:.05em;font-size:7px}
.achievement-title-copy>b{text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}
.achievement-card-foot{justify-content:flex-end;align-items:center;min-height:27px;display:flex}
.achievement-title-action{min-width:96px}
.achievement-title-locked{color:#7e897e;font-size:8px}
.achievement-how-to{background:#090f0c55;border-left:2px solid #806b3e;border-radius:0 5px 5px 0;gap:3px;padding:6px 7px;display:grid}
.achievement-how-to>small{color:#bba66e;letter-spacing:.08em;font-size:7px;font-weight:700}
.achievement-how-to>span{color:#b7beb3;font-size:9px;line-height:1.45}

/* ---------- modal chi tiết kỹ năng (nguồn O_ v107) ---------- */
.skill-detail{gap:10px;min-width:0;display:grid}
.skill-detail-header{justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding-right:40px;display:flex}
.skill-detail-identity{align-items:center;gap:10px;min-width:0;display:flex}
.skill-detail-identity>h3{color:#f0cf7a;text-overflow:ellipsis;min-width:0;margin:0;font-size:17px;line-height:1.3;overflow:hidden}
.skill-detail-icon{object-fit:contain;width:42px;height:42px;image-rendering:pixelated;background:radial-gradient(circle at 50% 35%,#39483a,#101713 76%);border:1px solid #76663e;border-radius:8px;flex:none;padding:3px;display:block;box-shadow:inset 0 1px #fff2,0 2px 5px #0008}
.skill-detail-icon-fallback{color:#e7cd7f;place-items:center;font-size:21px;display:grid}
.skill-detail-level{color:#c1ccbf;font-variant-numeric:tabular-nums;white-space:nowrap;background:#101813;border:1px solid #45574b;border-radius:7px;flex:none;padding:5px 8px;font-size:11px}
.skill-detail-desc{color:#b9c2b5;background:linear-gradient(90deg,#b3923d18,#b3923d05 72%,#0000);border-left:2px solid #c4a45b;border-radius:0 7px 7px 0;margin:0;padding:9px 11px;font-size:12px;line-height:1.5}
.skill-detail-facts{flex-wrap:wrap;align-items:stretch;gap:6px;display:flex}
.skill-detail-kind,.skill-detail-fact{color:#c3cec2;background:linear-gradient(145deg,#1b2922,#111915);border:1px solid #405248;border-radius:7px;align-items:center;gap:7px;min-height:34px;padding:5px 9px;font-size:11px;line-height:1.25;display:flex}
.skill-detail-kind{color:#f0d58b;background:linear-gradient(145deg,#342d1c,#1b1b14);border-color:#786638;justify-content:center;font-weight:700}
.skill-detail-kind.is-attack{color:#f0b496;background:linear-gradient(145deg,#39261f,#1c1714);border-color:#815340}
.skill-detail-kind.is-passive{color:#cdb9ee;background:linear-gradient(145deg,#2b2438,#18151f);border-color:#62527b}
.skill-detail-fact{align-content:center;gap:2px;display:grid}
.skill-detail-fact small{color:#839287;letter-spacing:.7px;text-transform:uppercase;font-size:8px}
.skill-detail-fact>b{color:#e5e6d9;font-size:11px;font-weight:600}
.skill-detail-fact.is-limit>b{white-space:nowrap}
.skill-detail-fact.is-limit>b>i{color:#aeb8aa;font-size:9px;font-style:normal;font-weight:400}
.skill-detail-fact>i{color:#e5a77d;font-size:9px;font-style:normal}
.skill-level-card{background:linear-gradient(145deg,#19231d,#101713);border:1px solid #435349;border-radius:8px;gap:5px;margin:0;padding:9px 11px;display:grid}
.skill-level-card.is-next{background:linear-gradient(145deg,#272419,#121713);border-color:#675c3a}
.skill-level-head{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;gap:10px;padding-bottom:5px;display:flex}
.skill-level-head>b{color:#eee5cc;font-size:11px;font-weight:600}
.skill-level-head>span{color:#e1c879;font-variant-numeric:tabular-nums;flex:none;font-size:9px}
.skill-effect-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:16px;display:grid}
.skill-effect-row{color:#c7d0c2;border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:baseline;gap:10px;min-width:0;padding:4px 0;font-size:10px;line-height:1.35;display:flex}
.skill-effect-row>span{min-width:0}
.skill-effect-row>b{color:#9fe2a0;font-variant-numeric:tabular-nums;text-align:right;flex:none;font-size:10px;font-weight:600}
.skill-effect-empty{color:var(--dim);padding:3px 0;font-size:10px}
.skill-damage-support{border-top:1px solid #ffffff12;gap:3px;margin-top:5px;padding-top:7px;display:grid}
.skill-damage-support>h4{color:#d5decf;margin:0 0 3px;font-size:11px;font-weight:600}
.skill-damage-row{color:#9fe2a0;border-bottom:1px solid #ffffff0a;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:4px 0;font-size:11px;line-height:1.4;display:grid}
.skill-damage-link{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere;background:0 0;border:0;padding:0;display:block}
.skill-damage-link:hover{text-underline-offset:3px;text-decoration:underline}
.skill-damage-link:focus-visible{outline-offset:3px;border-radius:2px;outline:1px solid #d8c47a}
.skill-damage-row>b{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.skill-damage-row>small{color:#97aa96;grid-column:1/-1;font-size:9px}
.skill-damage-row.is-inactive{color:#8a9789}
.skill-damage-name{overflow-wrap:anywhere;min-width:0}
.skill-damage-incoming{margin-top:2px}
.skill-damage-group{gap:2px;display:grid}
.skill-damage-group+.skill-damage-group{border-top:1px solid #ffffff12;margin-top:6px;padding-top:8px}
.skill-damage-group-head{color:#d5decf;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;line-height:1.4;display:flex}
.skill-damage-group-head>b{overflow-wrap:anywhere;min-width:0;font-weight:500}
.skill-damage-group-head>span{color:#9fe2a0;font-variant-numeric:tabular-nums;flex:none;font-weight:600}
.skill-damage-note{color:#97a594;margin:2px 0 4px;font-size:9px;line-height:1.45}
.skill-damage-preview{margin-top:4px}
.skill-damage-preview>summary{color:#96a593;cursor:pointer;font-size:10px;line-height:1.5}

/* ---------- Bảng thử nghiệm: tạo vật phẩm theo ý (nguồn v119) ---------- */
.admin-item-form{gap:9px;display:grid}
.admin-item-form h3{color:var(--gold);margin:0;font-size:16px}
.admin-item-form .desc{color:var(--dim);margin:3px 0 0;font-size:11px;line-height:1.4}
.admin-item-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}
.admin-item-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}
.admin-item-field{color:#d9ceb3;align-content:start;gap:4px;min-width:0;font-size:11px;display:grid}
.admin-item-field select,.admin-item-field input{width:100%;min-width:0;min-height:32px;padding:5px 8px;font-size:11px}
.admin-item-section-title{color:var(--gold);margin-bottom:5px;font-size:12px;display:block}
.admin-item-affixes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}
.admin-item-affix{min-width:0;color:var(--dim);grid-template-columns:42px minmax(0,1fr);align-items:center;gap:5px;font-size:10px;display:grid}
.admin-item-affix-controls{grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:4px;min-width:0;display:grid}
.admin-item-affix-controls select{width:100%;min-width:0;min-height:30px;padding:4px 26px 4px 7px;font-size:10px}
.admin-item-affix-controls input[type=number]{width:64px;min-width:0;min-height:30px;padding:4px 5px;font-size:10px}
.admin-item-preview{border:1px solid var(--line);background:#0d1410;border-radius:6px;align-items:center;gap:8px;min-height:48px;padding:6px 8px;display:flex}
.admin-item-preview img{object-fit:contain;width:36px;height:36px;image-rendering:pixelated;flex:none}

/* ==== Thế Giới: nút Map Local / PK trong header cạnh tên nhân vật (2.6.25 —
   markup + màu lấy y nguyên nguồn .mp-status/.pk-status, data-state local/ok/error/wait
   và pk-off/pk-on/pk-kill) ==== */
.mp-status{color:#e1c477;white-space:nowrap;cursor:pointer;background:#18180f;border:1px solid #74633d;border-radius:8px;flex:none;padding:1px 4px;font-family:inherit;font-size:8px;line-height:1.35}
.mp-status[data-state=ok]{color:#a8dca9;background:#102017;border-color:#47794d}
.mp-status[data-state=error]{color:#ff9c8b;background:#241310;border-color:#875046}
.mp-status[data-state=local]{color:#b5d9e5;background:#111c22;border-color:#58717d}
.mp-status[data-state=wait]{color:#e1c477;background:#18180f;border-color:#74633d}
.mp-status.pk-status[data-state=pk-on]{color:#ff9d89;background:#2b1511;border-color:#a64b3e}
.mp-status.pk-status[data-state=pk-kill]{color:#ff6359;background:#37110e;border-color:#d43b32}
.mp-status.pk-status[data-state=pk-off]{color:#a9b49f;background:#111710;border-color:#596257}
.mp-status.pk-status:disabled{opacity:.55;cursor:not-allowed}
.mp-status:focus-visible{outline-offset:2px;outline:2px solid #f1d37c}