/* ===== Màn vào game (js/entry.js): Đăng nhập · Chọn nhân vật · Tạo nhân vật · Hướng dẫn =====
   Phủ kín #app (nên co giãn theo khung Mobile), dưới lớp hộp thoại UI kit (39) để UI.confirm hiện lên trên.
   Phong cách Material phẳng như UI kit: nút viên thuốc 34px, thẻ bo 14–16px, Amber là màu nhấn. */
.en{position:absolute;inset:0;z-index:38;overflow:hidden;color:var(--k-text);font-family:var(--font);background:#0d1210}
html.en-on #bb,html.en-on #jxBuffs{visibility:hidden}
.en-bg{position:absolute;inset:-20px;background:#0d1210 url(../img/entry_bg.jpg) center/cover no-repeat}
.en-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(13,18,16,.35),rgba(13,18,16,.92))}
.en-wrap{position:relative;height:100%;display:flex;flex-direction:column;padding:calc(14px + var(--safe-t,0px)) 16px calc(10px + env(safe-area-inset-bottom,0px));gap:12px;overflow-y:auto;overscroll-behavior:contain}
.en-top{display:flex;align-items:center;gap:10px;min-height:40px;flex-shrink:0}
.en-logo{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.en-logo b{font:700 22px/1.1 var(--font);letter-spacing:.3px;color:var(--k-acc-lt);text-shadow:0 2px 12px rgba(255,193,7,.25)}
.en-logo small{font-size:11.5px;color:var(--k-dim);padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.07)}
.en-acc{display:flex;align-items:center;gap:8px;min-width:0}
.en-chip{display:inline-flex;align-items:center;gap:6px;max-width:150px;font-size:12.5px;color:#dfe7e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-chip svg{width:16px;height:16px;fill:var(--k-dim);flex:none}
.en .k-iconbtn.en-ib{width:34px;height:34px;flex:none}
.en .k-iconbtn.en-ib svg{width:18px;height:18px}
.en-main{flex:1 0 auto;display:flex;flex-direction:column;gap:14px;width:100%;max-width:1040px;margin:0 auto}
.en-foot{flex-shrink:0;text-align:center;font-size:11px;color:var(--k-faint)}
.en-card{background:rgba(27,34,32,.92);border-radius:16px;box-shadow:inset 0 0 0 1px var(--k-line),0 10px 30px rgba(0,0,0,.45);padding:18px}
.en-dim{margin:0;color:var(--k-dim);font-size:12.5px;line-height:1.5}
.en-err{margin:0;min-height:16px;color:var(--k-danger);font-size:12px}
.en-h{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 15.5px var(--font);color:#f4f8f5}
.en .en-in{box-sizing:border-box;width:100%;height:var(--k-ctl);padding:0 16px!important;border:0!important;border-image:none!important;border-radius:999px!important;
  background:var(--k-input)!important;box-shadow:inset 0 0 0 1px var(--k-line2);color:var(--k-text)!important;font:500 14px var(--font)!important;outline:none!important;appearance:none}
.en .en-in:focus{box-shadow:inset 0 0 0 2px var(--k-acc)}
.en .k-btn{height:var(--k-ctl)}

/* 1. Đăng nhập */
.en-login{align-self:center;margin:auto 0;width:min(380px,100%);box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
.en-login h2{margin:0;font:600 20px var(--font)}
.en-login .k-btn{width:100%}
.en-av{align-self:center;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:700 24px var(--font);color:var(--k-on-acc);background:var(--k-acc);box-shadow:0 4px 16px rgba(255,193,7,.3)}
.en-hi{margin:4px 0 0;color:var(--k-dim);font-size:13px}

/* 2. Chọn nhân vật */
.en-v-chars,.en-v-create{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.en-slots{display:flex;flex-direction:column;gap:10px}
.en-slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(27,34,32,.92);box-shadow:inset 0 0 0 1px var(--k-line);cursor:pointer;transition:box-shadow .15s,background-color .15s;outline:none}
.en-slot:hover{background:rgba(42,52,48,.95)}
.en-slot:focus-visible{box-shadow:inset 0 0 0 2px var(--k-acc-lt)}
.en-slot.on{box-shadow:inset 0 0 0 2px var(--k-acc);background:rgba(42,52,48,.95)}
.en-slot.empty{cursor:default;background:rgba(27,34,32,.6);box-shadow:inset 0 0 0 1px var(--k-line2)}
.en-pt{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--k-input);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--fc,#888) 60%,transparent);overflow:hidden}
.en-pt img{max-width:44px;max-height:40px;image-rendering:auto}
.en-plus{box-shadow:inset 0 0 0 1px var(--k-line2)}
.en-plus svg{width:22px;height:22px;fill:var(--k-dim)}
.en-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.en-st b{font:600 14.5px/1.3 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-st small{font-size:12px;color:var(--k-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-st i{font-style:normal;font-weight:600}
.en-st em{font-style:normal;color:var(--k-danger)}
.en-ago{color:var(--k-faint)!important}
.en-act{flex:none;display:flex;align-items:center;gap:6px}
.en .en-del:hover{color:var(--k-danger);box-shadow:inset 0 0 0 1px var(--k-danger)}
.en-pv{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.en-pv h2{margin:0;font:600 19px var(--font)}
.en-pvt p{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:#dfe7e2}
.en-pvt i{font-style:normal;font-weight:600}
.en-el{width:18px;height:18px;flex:none}
.en-cv{width:180px;height:220px;border-radius:14px;background:radial-gradient(60% 40% at 50% 85%,color-mix(in srgb,var(--fc,#ffc107) 22%,transparent),transparent 70%)}
.en-pva{display:flex;gap:8px;width:100%;justify-content:center}
.en-pva .k-btn{flex:1;max-width:220px}
.en-pv0{justify-content:center;min-height:120px}
.en-v-chars>.en-pv{display:none}   /* màn hẹp: nút nằm ngay trên thẻ, không cần cột xem trước */

/* 3. Tạo nhân vật */
.en-fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.en-fac{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:0;border-radius:14px;background:rgba(27,34,32,.92);box-shadow:inset 0 0 0 1px var(--k-line);color:var(--k-text);cursor:pointer;font-family:var(--font);transition:box-shadow .15s,background-color .15s}
.en-fac:hover{background:rgba(42,52,48,.95)}
.en-fac.on{box-shadow:inset 0 0 0 2px var(--fc);background:color-mix(in srgb,var(--fc) 12%,rgba(27,34,32,.95))}
.en-fac b{font:600 12px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.en-fac small{font-size:10.5px;color:var(--k-dim)}
.en-fi{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--k-input);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--fc) 55%,transparent)}
.en-fi img{max-width:40px;max-height:36px}
.en-fel{position:absolute;right:-4px;bottom:-3px;width:17px;height:17px}
.en-fac.lock{cursor:not-allowed}
.en-fac.lock .en-fi img,.en-fac.lock .en-fel{filter:grayscale(1) brightness(.6)}
.en-fac.lock b{color:var(--k-faint)}
.en-lk{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.35)}
.en-lk svg{width:18px;height:18px;fill:#cfd8d3}
.en-note{margin-top:10px}
.en-v-create>.en-pv{margin-top:14px}
.en-v-create .en-pv .en-in,.en-v-create .en-pv .k-btn{width:min(320px,100%)}
.en-v-create .en-pv .en-err{width:min(320px,100%)}

/* màn hẹp (dưới ~400px): lưới phái 5 → 4 cột chật, giữ 5 nhưng thu ảnh */
html.nu-xs .en-fi{width:40px;height:40px}
html.nu-xs .en-fi img{max-width:34px;max-height:30px}
html.nu-narrow .en-cv{width:140px;height:170px}
html.nu-narrow .en-v-create .en-pv{padding:14px}
html.nu-narrow .en-slot .en-act .k-btn{padding:0 14px}

/* rộng (PC, khung ≥ 760px): hai cột — danh sách / lưới phái bên trái, xem trước bên phải */
.en-wide .en-wrap{padding:22px 32px 14px}
.en-wide .en-logo b{font-size:26px}
.en-wide .en-v-chars,.en-wide .en-v-create{grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:24px;align-items:start;margin-top:auto;margin-bottom:auto}
.en-wide .en-v-chars>.en-pv{display:flex;align-self:stretch;justify-content:center}
.en-wide .en-slot .en-act .k-btn{display:none}   /* Vào game nằm ở cột xem trước */
.en-wide .en-slot .en-del{display:none}
.en-wide .en-slot.empty .en-act .k-btn{display:inline-flex}
.en-wide .en-slot{padding:12px 14px;min-height:64px}
.en-wide .en-v-create>.en-pv{margin-top:0;align-self:stretch;justify-content:center}
.en-wide .en-cv{width:200px;height:250px}
.en-wide .en-fgrid{gap:10px}
.en-wide .en-fac{padding:12px 6px}
.en-wide .en-fi{width:58px;height:58px}
.en-wide .en-fi img{max-width:50px;max-height:46px}

/* Hướng dẫn (UI kit, id "tut") */
.en-tb{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 4px 0}
.en-tic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--k-acc-tone);color:var(--k-acc-lt)}
.en-tic svg{width:28px;height:28px;fill:currentColor}
.en-tb h3{border:0;padding:0;margin:4px 0 0;font:600 16px var(--font);color:#f4f8f5}
.en-tb p{margin:0;font-size:13.5px;line-height:1.55;color:#dfe7e2}
.en-dots{display:flex;gap:6px;margin-top:6px}
.en-dots i{width:7px;height:7px;border-radius:50%;background:var(--k-line2)}
.en-dots i.on{width:18px;border-radius:999px;background:var(--k-acc)}
/* khung sáng quanh vùng đang nói tới; hộp thoại né sang nửa còn lại */
.en-ring{position:absolute;z-index:41;pointer-events:none;border-radius:16px;box-shadow:0 0 0 2px var(--k-acc),0 0 0 6px rgba(255,193,7,.25),0 0 24px rgba(255,193,7,.45);animation:enRing 1.6s ease-in-out infinite}
.en-ring[hidden]{display:none}
@keyframes enRing{50%{box-shadow:0 0 0 2px var(--k-acc-lt),0 0 0 10px rgba(255,193,7,.12),0 0 30px rgba(255,193,7,.55)}}
@media (prefers-reduced-motion:reduce){.en-ring{animation:none}}
.k-wrap.en-tup{place-items:start center!important;padding:18px 16px!important}
.k-wrap.en-tdn{place-items:end center!important;padding:18px 16px!important}
.k-layer.k-narrow .k-wrap.en-tup .k-dialog,.k-layer.k-narrow .k-wrap.en-tdn .k-dialog{border-radius:var(--k-r-dlg)}
.k-wrap.en-tup .k-scrim,.k-wrap.en-tdn .k-scrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(4,7,6,.35)}
/* bỏ kiểu h3 / h2 cũ của jx2.css (gạch chân vàng, chữ 13px) */
.en h2,.en h3{border:0;padding:0;justify-content:normal}
/* rộng: khối nội dung căn giữa theo chiều dọc */
.en-wide .en-main{flex:0 0 auto;margin:auto}
/* hẹp: khối xem trước khi tạo nhân vật thành một hàng — người giấy bên trái, tên + nút bên phải (ít phải cuộn) */
.en:not(.en-wide) .en-v-create>.en-pv{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"cv t" "cv in" "cv err" "cv btn";column-gap:12px;row-gap:6px;align-items:center;text-align:left;padding:12px 14px}
.en:not(.en-wide) .en-v-create>.en-pv .en-cv{grid-area:cv;width:112px;height:150px}
.en:not(.en-wide) .en-v-create>.en-pv .en-pvt{grid-area:t}
.en:not(.en-wide) .en-v-create>.en-pv .en-pvt p{justify-content:flex-start}
.en:not(.en-wide) .en-v-create>.en-pv .en-pvt h2{font-size:17px}
.en:not(.en-wide) .en-v-create>.en-pv .en-in{grid-area:in;width:100%}
.en:not(.en-wide) .en-v-create>.en-pv .en-err{grid-area:err;width:100%;min-height:0}
.en:not(.en-wide) .en-v-create>.en-pv .k-btn{grid-area:btn;width:100%}
.en:not(.en-wide) .en-v-create>.en-pv .en-err:empty{display:none}
.en:not(.en-wide) .en-fac{padding:8px 2px}
.en:not(.en-wide) .en-fac b{font-size:11px}
.en:not(.en-wide) .en-fac small{font-size:10px}
.en:not(.en-wide) .en-fgrid{gap:6px}

/* lưu trữ đám mây: chọn Tạo / Đăng nhập, mã khôi phục, trạng thái đang kết nối */
.en-login .k-seg{align-self:stretch;display:flex}
.en-login .k-seg button{flex:1}
.en .en-in.en-mono,.en-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace!important;letter-spacing:1px}
.en-code{padding:14px 10px;border-radius:14px;background:var(--k-input);box-shadow:inset 0 0 0 1px var(--k-acc);color:var(--k-acc-lt);font-size:20px;font-weight:700;letter-spacing:2px;user-select:all;word-break:break-all}
.en-codebox .k-btn svg{width:16px;height:16px;fill:currentColor}
.en-av2{background:var(--k-acc-tone);color:var(--k-acc-lt);box-shadow:none}
.en-av2 svg{width:28px;height:28px;fill:currentColor}
.en-bz{font-style:normal;color:#ffb74d!important}
.en-note{display:flex;align-items:center;gap:6px}
.en-ic{width:16px;height:16px;fill:var(--k-dim);flex:none}
.en-busy .en-wrap{pointer-events:none}
.en-load{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px;padding:0 18px;height:40px;border-radius:999px;background:rgba(27,34,32,.96);box-shadow:inset 0 0 0 1px var(--k-line2),0 8px 24px rgba(0,0,0,.5);font-size:13px;white-space:nowrap}
.en-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--k-line2);border-top-color:var(--k-acc);animation:enSpin .8s linear infinite}
@keyframes enSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.en-spin{animation-duration:2s}}
.en-foot{line-height:1.5}
.en-by{color:var(--k-dim)}
.en-small{font-size:11.5px;margin-top:2px}