/* ===== Axie Rift — playful Axie UI ===== */ /* Baloo 2 — chữ hiển thị cho RIÊNG mặt Khế Ước Ragoon và những chỗ mang art Axie. Vì sao lại là nó: mặt chữ hiển thị trong gói starter chính chủ của Axie (axieinfinity/godot-axie-starter-3d) là Lilita One, mà Lilita One chỉ có latin + latin-ext — "Khế Ước" hiện ra thành "Kh c". Baloo 2 cùng chất mập-tròn ấy và CÓ bộ dấu tiếng Việt. Ba khối tách theo unicode-range như Google Fonts cắt sẵn: máy chỉ tải phần chữ nó thật sự gặp, và ba khối phải có unicode-range — bỏ đi thì khối cuối nuốt hết, mà khối cuối chỉ chứa mấy chữ có dấu. KHÔNG dùng nó cho thân bài và tiêu đề bảng: đã gỡ Baloo 2 khỏi --font-display một lần vì chữ bo tròn kiểu hoạt hình đặt trên khung thép đinh tán là hai ngôn ngữ hình ảnh chửi nhau. Chỗ nó hợp là chỗ có con Axie đứng cạnh. */ @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/baloo-2-latin-ext-700-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/baloo-2-vietnamese-700-normal.woff2) format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url(fonts/baloo-2-latin-ext-800-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Baloo 2'; font-style:normal; font-weight:800; font-display:swap; src:url(fonts/baloo-2-vietnamese-800-normal.woff2) format('woff2'); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } :root { --font-chi: 'Baloo 2', 'Be Vietnam Pro', 'Segoe UI', sans-serif; --bg-deep: #10122a; /* ⚠ ĐỔI TỪ XANH NAVY SANG ĐÁ TỐI — đây là đổi TÔNG cả giao diện, không phải một chỗ. Bản cũ dùng #262c58/#14163a: xanh navy đặc, đúng gu bảng điều khiển hiện đại nhưng chọi hẳn với ngôn ngữ hình ảnh MU S6, vốn là đá tối / da thuộc với viền vàng đồng chảy. Hai màu dưới đây giữ nguyên độ sáng (nên chữ vẫn đủ tương phản) mà xoay hue về nâu-đá, và hạ độ đục xuống ~0,88 để nhìn thấy cảnh phía sau — bảng nay là một tấm kính đá, không phải một hộp kín. */ --bg-panel-1: rgba(46,39,29,.90); --bg-panel-2: rgba(22,18,13,.94); --vien-dong: rgba(198,158,74,.62); --vien-dong-manh: #c69e4a; --cell: rgba(255,232,190,.07); --cell-hover: rgba(255,232,190,.16); --border: rgba(198,158,74,.42); --border-strong: rgba(198,158,74,.72); --border-faint: rgba(198,158,74,.2); --text-bright: #f6f1e6; /* Chữ mờ ngả ẤM. Xám-lam trên nền đá nâu đọc ra là "chữ bị bạc màu"; cùng độ sáng nhưng xoay hue về be thì nó nằm vào bảng màu thay vì chọi lại. */ --text-dim: #b3a68a; --text-dimmer: #9c907c; /* ══ BỘ BA RGB CHO DA MU S6 ══ Khai bộ ba (không kèm alpha) để mọi chỗ dùng lại với độ trong riêng: rgba(var(--rgb-vang),.24). Trước đây mỗi chỗ tự chép một mã màu xanh, nên khi đổi tông sang đồng thì token ngoài đổi mà ~89 chỗ bên trong bảng vẫn xanh — cửa sổ cứ xanh tím dù khung đã đồng. ⚠ KHÔNG dùng ba token này cho thang độ hiếm (.giai-1..7, .item-ic.ic-g2..g7). Thang đó là xám → lục → LAM → LAM NHẠT → tím → cam → đỏ; hai bậc lam nằm đúng vào đám màu vừa đổi, nhưng chúng mang NGHĨA (đọc độ hiếm ở đâu cũng vậy), không phải màu trang trí. */ --rgb-da: 38,32,24; /* nền ô/nút: đá tối ngả nâu, thay xanh navy 30,32,64 */ --rgb-vang: 255,206,110; /* rê chuột · đang chọn · hào quang — vai của xanh cũ */ --rgb-dong: 198,158,74; /* chỉ viền: sợi tóc mảnh trong ô */ /* MÀU NHẤN LÀ VÀNG ĐỒNG, KHÔNG PHẢI XANH. Trong MU S6 thứ đang bấm được / đang chọn thì ánh vàng; xanh lam để dành riêng cho viên Mana và cho hai bậc lam của thang độ hiếm. Hai token này chảy vào 48 chỗ, nên đổi ở đây là đổi cả giao diện — cố ý. --accent-light KHÔNG trùng --gold (#ffd76a): --gold là vàng rực để hô con số và dấu nhiệm vụ, còn cái này là vàng nhạt để đọc thành CHỮ dài mà không chói. */ --accent: #c9a24d; --accent-light: #f0d69a; --accent-glow: rgba(var(--rgb-vang),.4); --orange: #ffb15c; --gold: #ffd76a; --mint: #7ec850; --pink: #ff8fcf; --purple: #b18cff; --red: #ff6b6b; /* Baloo 2 đã gỡ: đó là bộ chữ bo tròn kiểu hoạt hình, và nó đang làm tiêu đề cho những khung thép có đinh tán — hai ngôn ngữ hình ảnh đối nghịch nằm chồng lên nhau trong cùng một bảng. Di sản của dòng chú thích "playful Axie UI" ở đầu file. Be Vietnam Pro đã có sẵn 4 độ đậm, nên đổi sang nó không tốn thêm file nào — mà còn xoá được 12 khối @font-face và 3 file woff2. */ --font-display: 'Be Vietnam Pro', 'Segoe UI', sans-serif; /* Dải chữ sáng. Trước đây có NĂM sắc gần như trùng nhau cùng tồn tại — #f5f7ff #eef2ff #e4ebff #f5eee5 #efe4d5, chênh nhau 12 tới 79 trên thang 765. Không ai cố ý chọn năm mức chữ sáng; đó là trôi dạt qua nhiều đợt sửa. Nay còn ba, và #f5f7ff gộp vào --text-bright (chênh 12/765 — mắt không tách được). #efe4d5 CỐ Ý để nguyên: nó chênh 32 so với --text-soft, đủ để nhìn ra, nên gộp nó là quyết định thẩm mỹ chứ không phải dọn dẹp. */ --text-body: #ece6d9; --text-soft: #f5eee5; /* Cặp màu "tab đang chọn" — nền sáng đặc + chữ tối. Dùng ở .bang-tab.on và .mst-tabs button.active; hai chỗ này PHẢI khớp nhau, nếu không thì trong cùng một bảng có hai cách hiểu thế nào là tab đang mở (đúng cái lỗi đợt 3 vừa sửa). Một nguồn thì không lệch được. */ --tab-on-1: #ffd76a; --tab-on-2: #c9922f; --on-light: #0d1220; /* Thang cỡ chữ. Chỉ gom những cỡ ĐÃ nằm đúng nấc — không nắn 10.5/11.5/12.5 về nấc gần nhất, vì đó là ĐỔI THIẾT KẾ chứ không phải dọn dẹp (92 chỗ đang dùng cỡ nửa pixel). */ --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-lg: 13px; --fs-xl: 16px; --fs-2xl: 20px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } /* Ô điều khiển của biểu mẫu KHÔNG kế thừa bộ chữ — trình duyệt gán riêng cho chúng một bộ mặc định (Arial trên Chromium). Nên dù cả game chỉ còn một bộ chữ, nút ✕, ô nhập số lượng và các nút +/Max trong bảng Nhân Vật vẫn hiện bằng Arial. 14 luật rải rác trong file này đã phải tự viết `font-family:inherit` để chống lại chuyện đó; đặt một luật gốc thì không luật mới nào còn quên được nữa. */ button, input, select, textarea { font-family:inherit; } html,body { width:100%; height:100%; overflow:hidden; background:var(--bg-deep); font-family: 'Be Vietnam Pro', 'Segoe UI', sans-serif; user-select:none; } /* width/height 100% là BẮT BUỘC, không thừa: canvas là phần tử thay thế, có kích thước nội tại lấy từ thuộc tính width/height. Chỉ `inset:0` thôi thì nó vẫn vẽ đúng bằng kích thước bộ đệm — nên khi hạ độ nét (xem RES trong game.js) canvas co lại thật, để hở nền quanh mép. */ #game { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; } .hidden { display:none !important; } /* HUD */ #hud { position:fixed; inset:0; pointer-events:none; z-index:10; } #hud-left { position:absolute; top:10px; left:10px; width:min(238px,40vw); } #hud-name { color:var(--text-bright); font-size:12.5px; letter-spacing:.3px; text-shadow:0 1px 3px #000; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── KHUNG CHÂN DUNG ──────────────────────────────────────────────────────────────────── Chân dung · tên · cấp · Sinh Lực · Mana, gom trong MỘT tấm. Trước đây góc này chỉ có một dòng chữ trần nằm đè lên tranh nền, còn hai thanh thì ở tận đáy màn hình dưới dạng viên cầu — tức muốn biết mình còn bao nhiêu máu thì mắt phải rời khỏi chỗ đang đánh nhau, đi xuống mép dưới, rồi quay lên. Tấm nền đục vì cùng lý do đã ghi ở #bottom-hud: nền map đổi sáng-tối theo chỗ đang đứng, nên chữ trần thì lúc đọc được lúc không. */ #chan-dung { pointer-events:auto; display:flex; gap:7px; align-items:center; padding:5px 8px 5px 5px; border-radius:9px; margin-bottom:5px; background:linear-gradient(180deg, rgba(42,34,24,.86), rgba(15,12,8,.93)); border:1px solid rgba(198,158,74,.42); box-shadow:0 6px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,231,180,.10); } /* Ô vuông, KHÔNG tròn: 16 con Axie có tỉ lệ rộng/cao từ 1,07 tới 1,52 nên khuôn tròn cắt mất tai/sừng/càng của con bè — mà đó đúng là phần làm người ta nhận ra con vật của mình. */ #cd-khung { position:relative; flex:none; width:44px; height:44px; border-radius:7px; overflow:hidden; background:radial-gradient(circle at 42% 30%, #46392a, #17120b 78%); border:2px solid rgba(198,158,74,.62); box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 7px rgba(0,0,0,.55); } #cd-ava, #cd-lop { position:absolute; inset:0; width:100%; height:100%; display:block; } #cd-lop { object-fit:cover; object-position:center top; } #cd-phai { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } #cd-dau { display:flex; align-items:baseline; gap:5px; } #cd-dau #hud-name { flex:1; min-width:0; } /* Cấp là thứ NGƯỜI KHÁC hỏi và bản thân liếc liên tục, nên nó quay lại HUD sau một đợt bị dọn sang bảng Nhân Vật. Để RIÊNG một thẻ, không nhồi vào chuỗi tên: dòng tên đã mang danh hiệu, dấu điểm chưa cộng và cờ TỘI ÁC — thêm cấp vào đó là nó dài tới mức phải cắt bớt đúng cái tên. `test_hudv` vẫn gác chuyện "tên không được nhồi lớp/cấp", và nó vẫn đúng. */ #hud-lv { flex:none; color:var(--gold); font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.4px; text-shadow:0 1px 3px #000; } /* Hai thanh: nền TỐI ĐỤC + vạch chia, không phải khối màu trơn. Vạch chia cho mắt đọc ra "còn mấy phần" mà không cần đọc số — đúng việc mà một thanh máu phải làm trong lúc đánh. */ .cd-thanh { position:relative; height:11px; border-radius:3px; overflow:hidden; background:rgba(8,6,4,.82); border:1px solid rgba(0,0,0,.65); box-shadow:inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,231,180,.07); } .cd-thanh .fill { display:block; height:100%; width:100%; transition:width .18s; } .cd-thanh span { position:absolute; inset:0; text-align:center; line-height:11px; font-size:9px; font-weight:700; color:#fff; text-shadow:0 1px 2px #000, 0 0 5px rgba(0,0,0,.9); font-variant-numeric:tabular-nums; letter-spacing:.2px; } .cd-thanh::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, transparent 0 24%, rgba(0,0,0,.42) 24% calc(24% + 1px)); } .cd-hp .fill { background:linear-gradient(180deg,#ff8fa0,#e8324f 55%,#8a1226); } .cd-qi .fill { background:linear-gradient(180deg,#9ed4ff,#2f6fe0 55%,#122f72); } .bar { position:relative; height:16px; margin-bottom:4px; background:rgba(10,10,26,.72); border:1px solid rgba(229,211,186,.4); border-radius:999px; overflow:hidden; } .bar .fill { height:100%; width:100%; transition:width .18s; } .bar span { position:absolute; inset:0; font-size:var(--fs-xs); line-height:16px; text-align:center; color:#fff; text-shadow:0 1px 2px #000; letter-spacing:.5px; } .bar.xp { height:10px; } .bar.xp span { line-height:10px; font-size:8px; } .bar.xp .fill { background:linear-gradient(180deg,#ffd76a,#e8a83a); } #hud-right { position:absolute; top:12px; right:12px; text-align:right; pointer-events:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; } #hud-right > * { pointer-events:auto; } /* Ví — ba ô NẰM NGANG: Lumen · Ấn Giao Kết · Shard. Ba loại này là ba loại DUY NHẤT thường trực trên HUD; mọi loại còn lại xem ở Túi Đồ → Vật Liệu (ô Lumen bấm vào là mở thẳng tới đó). Có nền vì trước đây dòng số trần nằm đè lên tranh vẽ: ở 1280×720 nó chồng lên nhãn "Thợ Rèn · Lò Rèn Hoàng Gia" 55,5×12px. */ #hud-vi { display:flex; gap:4px; align-items:stretch; } .vi-o { display:flex; align-items:center; gap:5px; cursor:pointer; background:rgba(18,20,44,.78); border:1px solid var(--border-faint); border-radius:999px; padding:4px 11px 5px; font-family:inherit; color:var(--text-bright); box-shadow:inset 0 1px 0 rgba(226,235,255,.12), 0 2px 8px rgba(0,0,0,.45); transition:background .16s ease-out, border-color .16s ease-out; } .vi-o:hover { background:rgba(var(--rgb-vang),.24); border-color:var(--border-strong); } .vi-o i { font-style:normal; font-size:var(--fs-md); line-height:1; } /* tabular-nums: Lumen cộng số lẻ mỗi khung trong Tụ Linh Trận — chữ số biến thiên bề rộng làm cả ô rung. min-width giữ mép trái đứng yên từ "0" tới "9.999.999.999". */ .vi-o b { font-variant-numeric:tabular-nums; font-weight:600; font-size:var(--fs-md); text-shadow:0 1px 3px #000; min-width:34px; text-align:right; } .vi-lumen i { color:var(--gold); } .vi-lumen b { min-width:74px; font-size:var(--fs-lg); } .vi-ve i { color:var(--accent-light); } .vi-shard i { color:var(--purple); } @media (prefers-reduced-motion: reduce){ .vi-o { transition:none; } } /* Quầy Shard — mỗi dòng: biểu tượng · tên + mô tả · số đang có · nút giá */ .shard-row { display:grid; grid-template-columns:26px 1fr auto auto; align-items:center; gap:9px; padding:8px 4px; border-bottom:1px solid var(--border-faint); } .shard-row:last-of-type { border-bottom:none; } .shard-ico { font-style:normal; font-size:var(--fs-xl); text-align:center; } .shard-ten { display:flex; flex-direction:column; gap:2px; font-size:var(--fs-md); } .shard-ten em { font-style:normal; font-size:var(--fs-xs); color:var(--text-dim); } .shard-dong { font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; } /* Nút viên thuốc — nay chỉ còn PK và TỰ ĐÁNH ở góc trên phải. Cụm nút vuông cạnh viên đá Máu/Mana đã dọn hẳn: menu hệ thống chuyển sang cột dọc mép trái (#menu-cot). */ .hbtn { pointer-events:auto; background:rgba(var(--rgb-da),.88); color:var(--text-body); border:1px solid var(--border); padding:6px 13px; margin-left:5px; border-radius:999px; font-family:inherit; font-size:var(--fs-md); font-weight:600; cursor:pointer; } .hbtn:hover { background:rgba(var(--rgb-vang),.28); border-color:var(--border-strong); } /* ══ CỘT MENU HỆ THỐNG — dọc sát mép phải, thu gọn được ══ Khung icon theo đúng công thức MU S6: ô vuông nền kim loại tối, viền vàng đồng mảnh, góc bo nhẹ. Tranh bên trong đã tự mang nền + viền (bộ ic_*.png), nên nút KHÔNG vẽ nền riêng — vẽ thêm là khung lồng khung. Nút chỉ lo ba trạng thái: thường · rê chuột · đang mở. */ /* ⚠ DỌC MÉP TRÁI, KHÔNG PHẢI MÉP PHẢI — và đó là chuyện chỗ trống, không phải gu. Mép phải đã kín: ví ba loại tiền, nút PK/TỰ ĐÁNH, bản đồ thu nhỏ, bảng theo dõi nhiệm vụ. Đặt cột menu vào đó là nó nằm đè lên bảng nhiệm vụ (đã thấy đúng vậy ở ảnh chụp đầu tiên). Mép trái chỉ có cụm tên + đồng hồ ở sát đỉnh, từ đó xuống dưới trống trơn. */ /* ── MENU HỆ THỐNG: NẰM TRÊN THANH CHIẾN ĐẤU ─────────────────────────────────────────── Chặng thứ tư, và là chặng chủ dự án chốt bằng ảnh mẫu: menu là một CỤM Ô trên chính thanh dưới, sau vạch ngăn — đúng lối mấy game MU/kiếm hiệp bày (một hàng ô liền, chia cụm bằng vạch, chứ không phải mấy tấm rời quanh màn hình). Ba chặng trước và lý do bỏ, giữ lại để đừng đi vòng: cột dọc mép TRÁI (chắn giữa màn, là thứ duy nhất ở sườn trái) → hàng ngang đáy PHẢI (vẫn là khối đứng riêng) → trong cột phải (đồng nhất, nhưng lưới 4 cột trong bề ngang 180px thì ô phải bé hơn ô chiêu, đọc ra hai thứ khác loại). ⚠ NÚT THU GỌN `#mc-thu` ĐÃ GỠ. Trên thanh chiến đấu nó là một cái chốt lạc cỡ, và ai lỡ thu một lần thì không còn đường mở lại bằng chuột — `SETTINGS.menuCot` cũ còn trong bản lưu nên phần nối trong game.js phải CHỦ ĐỘNG bỏ qua nó, xem ghi chú tại chỗ. */ #menu-cot { position:relative; display:flex; align-items:center; pointer-events:auto; } /* Cụm TRÁI — cùng luật bày với #mc-list, chỉ khác chỗ đứng. Khai chung một quy tắc để hai bên không bao giờ lệch cỡ hay lệch lề: thanh cân đối là chuyện của HAI cụm, sửa một bên thôi là cân đối biến mất mà không ai thấy ngay. */ #mc-trai, #mc-list { display:flex; flex-direction:row; align-items:center; gap:4px; } #mc-trai { pointer-events:auto; } /* Nút chỉ có ký hiệu chữ (Tổ Đội · Hảo Hữu): đè cỡ chữ 11px của .mc-btn, vốn viết cho nhãn chứ không cho biểu tượng. */ .mc-chu { font-size:17px; line-height:1; color:#f2d493; text-shadow:0 0 6px rgba(255,206,110,.35), 0 1px 2px rgba(0,0,0,.8); } .mc-chu:hover { color:#ffe9b0; } .mc-chu.on { color:#ffd76a; box-shadow:inset 0 0 0 1px var(--gold), 0 0 9px rgba(255,206,110,.55); } /* ⚠ 30px — NHỎ HƠN ô chiêu (40px), và đây là lượt sửa THỨ HAI của cùng một dòng. Bản trước để 40px với lý do "lệch cỡ thì đọc ra hai thanh dán vào nhau". Lý do đó nghe hợp lý nhưng SAI so với chính ảnh mẫu: trong ảnh MU chủ dự án gửi, icon hai bên rõ ràng nhỏ hơn ô chiêu — và đó mới là thứ giữ cho thanh GỌN. Chủ dự án nhìn ảnh chụp và gọi đúng tên: *"sao nó dài quá vậy, UI bên hình mẫu gọn lắm mà"*. Đo được: 22 ô cùng 40px ⇒ thanh dài 865px = 54% bề ngang màn 1600. Hạ 9 ô menu xuống 30px (cùng lúc siết lề và khe) ⇒ còn ~750px = 47%. Và lệch cỡ KHÔNG làm mất tính "một thanh": tấm nền liền + vạch ngăn mới là thứ gom cụm. Ngược lại, cùng cỡ với ô chiêu là nói dối về vai trò — ô chiêu bấm lúc đánh nhau, ô menu thì không bao giờ. `tests/test_thanhcum.js §7` gác chiều này (nhỏ hơn, và có sàn đọc được). */ .mc-btn { position:relative; width:30px; height:30px; padding:0; cursor:pointer; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:inherit; color:var(--gold); font-size:11px; font-weight:700; background:rgb(62,51,36); border:2px solid var(--border-strong); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); } .mc-btn:active { transform:scale(.94); } .mc-btn img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); transition:filter .14s, transform .14s; } /* Nhãn chữ chỉ hiện lúc rê chuột — cột phải gọn, mà vẫn không bắt người chơi đoán icon. */ /* Nhãn bật lên TRÊN. Ở cột dọc nó nằm bên phải được, nhưng xếp ngang thì bên phải là nút kế tiếp — nhãn sẽ che đúng cái nút người ta đang định bấm. */ .mc-btn span { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; padding:3px 9px; border-radius:4px; opacity:0; pointer-events:none; background:rgba(12,10,8,.94); border:1px solid rgba(198,158,74,.5); color:#f0e2c0; font-size:11.5px; font-weight:600; transition:opacity .12s; } .mc-btn:hover span { opacity:1; } .mc-btn:hover img { transform:scale(1.06); filter:drop-shadow(0 0 7px rgba(255,206,110,.75)); } /* ĐANG MỞ — quầng vàng nhạt, đúng cách MU báo một cửa đang bật. */ .mc-btn.on img { filter:drop-shadow(0 0 9px rgba(255,206,110,.95)) brightness(1.12); } /* KHOÁ — xám hẳn + ổ khoá nhỏ góc dưới-phải. Mờ suông thì đọc ra như đang tải. */ .mc-btn.khoa { cursor:not-allowed; } .mc-btn.khoa img { filter:grayscale(1) brightness(.5); } .mc-btn.khoa::after { content:'🔒'; position:absolute; right:0; bottom:0; font-size:9px; line-height:1; text-shadow:0 1px 2px #000; } .mc-menu { font-size:19px; line-height:1; height:30px; width:30px; border-radius:6px; background:linear-gradient(180deg,rgba(38,32,22,.94),rgba(18,15,10,.96)); box-shadow:inset 0 0 0 1px rgba(198,158,74,.5); } .mc-menu:hover { box-shadow:inset 0 0 0 1px var(--gold); color:#ffe9b0; } #mc-drop { position:absolute; right:0; bottom:calc(100% + 8px); display:flex; flex-direction:column; gap:3px; min-width:200px; padding:6px; border-radius:6px; background:linear-gradient(180deg,rgba(28,23,16,.97),rgba(14,11,8,.98)); box-shadow:inset 0 0 0 1px rgba(198,158,74,.55), 0 8px 24px rgba(0,0,0,.7); } #mc-drop button { display:flex; align-items:center; gap:8px; padding:6px 9px; cursor:pointer; background:none; border:none; border-radius:4px; color:#e8dcc0; font-family:inherit; font-size:12px; font-weight:600; text-align:left; } #mc-drop button:hover { background:rgba(198,158,74,.2); color:#fff3d6; } #mc-drop button img { width:22px; height:22px; object-fit:contain; } /* THU GỌN — cả cột biến mất, chỉ còn cái mũi tên làm tab kéo ra lại. */ /* Quest tracker — nằm trong luồng cột phải, dưới minimap */ /* ── NHẬT KÝ NHIỆM VỤ CẮM TRONG CỘT ──────────────────────────────────────────────────── `.bang-cam` gỡ hết thuộc tính của một cửa sổ nổi ra khỏi `.panel`: hết `position:fixed`, hết canh giữa màn, hết bề rộng riêng, hết bóng đổ và đinh tán. Giữ nguyên class `.panel` là cố ý — phần vẽ (`moBang`, `.bang-tieu`, `.bang-tabs`, `.ql-row`) dùng chung với mọi bảng khác, và chép một bộ luật thứ hai cho riêng nó là mở đường cho hai bên lệch nhau. */ .panel.bang-cam { position:static; transform:none; width:100%; box-sizing:border-box; max-height:none; overflow:visible; z-index:auto; background:rgba(8,6,4,.6); border:1px solid rgba(0,0,0,.5); border-left:3px solid var(--gold); border-radius:6px; padding:6px 7px; box-shadow:none; } .panel.bang-cam .bang-tieu { font-size:12px; margin:0 0 5px; padding:0; border:none; } .panel.bang-cam .bang-tabs { gap:2px; margin-bottom:5px; } .panel.bang-cam .bang-tab { font-size:9.5px; padding:2px 5px; } .panel.bang-cam .ql-row { font-size:10.5px; line-height:1.45; } .panel.bang-cam .ql-ch { font-size:10.5px; } /* Thu gọn giấu THÂN, chừa lại thanh tiêu đề + hàng tab + nút — nếu giấu cả khối thì nút mở lại cũng biến mất cùng, và không còn cách nào mở bằng chuột. */ .panel.bang-cam.ql-thu > *:not(.bang-tieu):not(.bang-tabs):not(#btn-questtracker) { display:none; } #btn-questtracker { pointer-events:auto; width:100%; text-align:center; background:linear-gradient(180deg, rgba(70,57,38,.95), rgba(28,22,14,.95)); color:#f0dcb0; border:1px solid rgba(198,158,74,.45); border-radius:5px; box-shadow:inset 0 1px 0 rgba(255,231,180,.12); padding:2px 8px; margin-bottom:5px; font-family:inherit; font-size:9.5px; font-weight:600; cursor:pointer; } #btn-questtracker:hover { border-color:var(--gold); color:#fff3d4; } #quest-tracker.qt-closed { display:none; } #quest-tracker { width:100%; box-sizing:border-box; max-height:34vh; overflow-y:auto; color:var(--text-soft); font-size:10.5px; line-height:1.45; text-align:left; } #quest-tracker .q-title { color:var(--accent-light); font-size:var(--fs-lg); margin-bottom:2px; font-weight:700; } #quest-tracker .q-done { color:#8fd18f; } /* Mục Tiêu Hôm Nay — checklist nhỏ dưới quest tracker */ #quest-tracker .q-daily { margin-top:8px; padding-top:6px; border-top:1px dashed rgba(126,200,80,.35); } #quest-tracker .q-daily .q-title { color:var(--mint); font-size:var(--fs-md); } #quest-tracker .q-daily-row { font-size:var(--fs-sm); color:#eaddca; display:flex; justify-content:space-between; gap:6px; } #quest-tracker .q-daily-row.done { color:#8fd18f; opacity:.85; } #quest-tracker .q-daily-row b { color:var(--gold); font-weight:600; } /* Thanh dưới cùng kiểu MU Online: viên Máu (đỏ)/Mana (xanh) hình cầu 2 đầu + thanh kỹ năng dàn ngang giữa + viền sáng theo % máu chạy dọc mép dưới màn hình. */ /* ⚠ TẤM NỀN LIỀN, không phải mấy ô rời nổi trên mặt đất. Trước bản này #bottom-hud trong suốt hoàn toàn, nên nền map lọt qua giữa hai viên đá và giữa các cụm nút: độ tương phản của thanh đổi theo chỗ đang đứng — đá sáng ở thị trấn thì khung đồng nhạt biến mất, cỏ tối thì lại rõ. MU đặt cả thanh trên MỘT tấm kim loại chính vì lý do đó. `pointer-events` đổi none → auto theo: đã có tấm đặc thì bấm vào nó không được lọt xuống dưới bắt nhân vật chạy tới. Các nút con vốn đã tự khai auto nên không đổi gì thêm. `bottom` 12 → 24: thanh EXP nằm ở bottom:6 cao 13 (tức chiếm 6..19) và trước đây cắt ngang đáy các ô chiêu. Nay nó nằm gọn DƯỚI tấm nền, thành một làn riêng. */ /* ⚠ CỠ Ô LÀ 40px, KHÔNG PHẢI 56. Chủ dự án đưa ảnh mẫu và chốt "thu nhỏ lại": ở 56px, chín ô cộng lề chiếm 560px giữa mép dưới màn hình — một dải chắn ngang đúng chỗ người chơi đang nhìn để đánh nhau. Mẫu MU/kiếm hiệp để ô quanh 32-36px và bù lại bằng KHUNG rõ nét chứ không bằng bề mặt to. Xuống 40px thì cả thanh còn ~430px, và icon vẫn đọc được vì tranh vốn vẽ ở 112px. */ #bottom-hud { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:11; display:flex; align-items:center; gap:6px; pointer-events:auto; padding:4px 7px; border-radius:10px; background:linear-gradient(180deg, rgba(42,34,24,.84), rgba(15,12,8,.92)); border:1px solid rgba(198,158,74,.40); box-shadow:0 8px 24px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,231,180,.10), inset 0 -1px 0 rgba(0,0,0,.55); } #skillbar { display:flex; gap:5px; pointer-events:auto; } /* Khung ĐẬM cho MỌI ô, không riêng bốn ô chiêu. Trước đây `--border` (đồng, alpha .42) đủ đọc trên icon nền tối, nhưng ô Space dùng `basic.png` — một nắm đấm trắng kem trên nền SÁNG — nên khung nhạt chìm hẳn vào ảnh: nút bấm nhiều nhất game lại là nút duy nhất trông không có khung. Thêm một vành tối phía trong để ảnh sáng nào cũng có mép. */ .skill { position:relative; width:40px; height:40px; border-radius:6px; cursor:pointer; /* ⚠ NỀN Ô PHẢI ĐỤC VÀ SÁNG HƠN TẤM NỀN. Trước khi có tấm nền, ô để .88 và 12% còn lại là nền map SÁNG lọt qua — nó vô tình soi sáng mấy tấm icon vốn tối. Dựng tấm nền tối phía sau là mất nguồn sáng chùa đó, chụp ra thấy cả tám icon xỉn hẳn đi. Nay ô tự mang nền riêng, đục hẳn và sáng hơn tấm nền một bậc, nên icon đọc GIỐNG NHAU ở mọi map thay vì đổi theo chỗ đang đứng — đó mới là thứ tấm nền sinh ra để làm. ⚠ Giữ là MÀU, đừng đổi thành gradient: `background-image` được gán thẳng bằng JS cho ô có icon, mà gradient cũng là background-image — khai gradient ở đây là icon đè mất nó. */ background:rgb(62,51,36); border:2px solid var(--border-strong); color:var(--text-body); font-family:inherit; overflow:hidden; /* CHỈ một nét tối 1px sát khung. Bản đầu thêm `inset 0 0 10px rgba(0,0,0,.45)` cho "có chiều sâu" — chụp ra thì nó dìm hẳn cả tám icon, đọc còn khó hơn lúc chưa sửa. Thứ làm ảnh sáng có mép là cái nét 1px, không phải vùng tối lan vào giữa. */ box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); } .skill .sk-ico { display:block; font-size:17px; line-height:26px; } /* PHÍM TẮT phải đọc được giữa lúc đánh nhau. Bản cũ là chữ 9px mờ .7 nằm dưới đáy ô, trên nền icon — gần như vô hình, mà đây lại là thứ dạy người chơi bỏ chuột ra mà gõ phím. Nay là một con tem ở góc trên-trái, có nền tối riêng nên không phụ thuộc icon bên dưới sáng hay tối. */ /* ⚠ MỘT rule duy nhất cho .sk-key, và PHẢI khai đủ bốn cạnh. Trước đây có HAI rule cùng selector cách nhau 450 dòng: cái ở dưới khai `bottom:1px; right:3px`. Thêm `top`+`left` vào cái ở trên là bốn cạnh cùng được đặt — mà một phần tử absolute đặt đủ bốn cạnh với kích thước auto thì bị KÉO GIÃN phủ kín ô. Cái nền đen .78 của con tem hoá ra một tấm phủ lên toàn bộ icon: đo được độ sáng ô chiêu tụt 79,1 → 22,7, tức tối đi hơn ba lần, mà nhìn thì chỉ thấy "icon hơi tối" chứ không ra nguyên nhân. Cùng một họ với lỗi `.sk-so` đã sửa hôm nay: một selector, hai chỗ khai. */ .skill .sk-key { position:absolute; left:1px; top:1px; right:auto; bottom:auto; z-index:3; font-size:9px; font-weight:700; line-height:1; letter-spacing:.2px; padding:1px 3px; border-radius:3px; opacity:1; background:rgba(6,5,3,.78); color:#f3e3bb; text-shadow:0 1px 2px #000; } /* Vạch màu theo NGUYÊN TỐ của chiêu. Bốn ô chiêu của Dark Knight đều là nét trắng trên nền xanh — cùng một tông, nên giữa trận không phân biệt được ô 2 với ô 3. Không tô đè lên tranh (đó là art thật, xem Quy tắc số 3), mà thêm MỘT kênh màu nữa quanh ô. */ .skill.sk-he { border-color:var(--sk-he); box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--sk-he) 45%, transparent), 0 0 9px color-mix(in srgb, var(--sk-he) 40%, transparent); } .skill .sk-cd { position:absolute; left:0; bottom:0; width:100%; height:0%; background:rgba(0,0,0,.65); pointer-events:none; } .skill.locked { opacity:.38; filter:grayscale(.8); } /* Ô CHIÊU TRỐNG — khung vàng NÉT ĐỨT + dấu cộng, không phải ô mờ. Ô mờ đọc ra y hệt ô "đang tải" hoặc ô hỏng, nên người chơi tưởng game lỗi thay vì hiểu là chỗ này còn để trống. Nét đứt là quy ước "thả vào đây" mà mọi game bày ô đồ đều dùng. */ .skill.sk-empty { background:rgba(20,17,12,.55); border:2px dashed rgba(198,158,74,.6); color:rgba(240,214,150,.8); opacity:1; filter:none; } .skill.sk-empty .sk-ico { font-size:16px; line-height:26px; opacity:.85; } .skill.sk-empty:hover { border-color:var(--gold); background:rgba(58,46,28,.6); box-shadow:0 0 10px rgba(255,206,110,.35); } /* Vạch ngăn NHÓM trong thanh chiêu: chiêu | vật phẩm | trợ thủ. Cùng một hàng nhưng ba việc khác nhau, và trong lúc đánh nhau người ta tìm theo CỤM chứ không đếm từng ô. */ .sk-vach { width:2px; height:24px; align-self:center; flex:none; border-radius:1px; background:linear-gradient(180deg,transparent,rgba(198,158,74,.55),transparent); } /* ⚠ HAI Ô THUỐC KHÔNG CÓ KHUNG — cố ý, và đây là chỗ khác hẳn bốn ô chiêu. Ô chiêu cần khung vì nó mang thêm ba tín hiệu đè lên nhau: vạch màu nguyên tố (`.sk-he`), lớp che hồi chiêu (`.sk-cd`), và trạng thái khoá. Khung là chỗ treo mấy thứ đó. Ô thuốc không có cái nào trong ba — nó chỉ có một cái bình và một con số. Cho nó khung đồng giống ô chiêu là nói với mắt rằng "đây cũng là một chiêu", trong khi hàng ngang đã có tới tám khung vàng rồi. Bỏ khung đi thì bình thuốc tự tách ra thành một NHÓM khác mà không tốn thêm một vạch ngăn nào. Icon nới 74% → 100%: không còn khung để chừa lề, mà để nguyên cỡ cũ thì cái bình bé lại trong một ô trống, đọc ra như ô hỏng. */ .sk-vat { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; background-size:100%; background-position:center; background-repeat:no-repeat; background-color:transparent; border:none; box-shadow:none; } /* Không có khung thì phải có cách khác báo "bấm được". Sáng lên khi rê chuột là đủ, và nó không thêm một pixel hình nào vào thanh. */ .sk-vat:hover { filter:brightness(1.18); } /* Hai bình đổi sang art Axie Land (`land-items/Items/Potion`): đỏ = máu, xanh = năng lượng — đúng hai thứ hai ô này làm, cùng một tay vẽ với art trang bị vừa nối. Tấm cũ `ic_binhmau` / `ic_lomana` là tranh chibi sinh ngoài, lạc tông với phần còn lại của thanh. */ #sk-thuoc { background-image:url(assets/items/it_mau.png); } #sk-mana { background-image:url(assets/items/it_mana.png); } .sk-so { position:absolute; right:2px; bottom:1px; font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000, 0 0 6px rgba(0,0,0,.9); font-variant-numeric:tabular-nums; } .sk-vat.het { filter:grayscale(1) brightness(.55); } .sk-vat.het .sk-so { color:#ff8f8f; } /* TRỢ THỦ — chỗ của Mu Helper: ngay cạnh thanh chiêu, không nằm lẫn trong menu hệ thống. */ .sk-troly.on { border-color:var(--gold); box-shadow:0 0 12px rgba(255,206,110,.6), inset 0 0 12px rgba(255,206,110,.2); } .sk-troly.on .sk-ico { animation:troly-quay 3.4s linear infinite; } @keyframes troly-quay { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .sk-troly.on .sk-ico { animation:none; } } .skill:active { transform:scale(.94); } .skill.flash { box-shadow:0 0 14px var(--accent-glow); } /* Viền sáng theo % máu, chạy dọc mép dưới cùng màn hình */ #hp-accent-bar { position:fixed; left:0; right:0; bottom:0; height:4px; z-index:11; background:rgba(0,0,0,.55); pointer-events:none; } #hp-accent-fill { height:100%; width:100%; background:linear-gradient(90deg,#7a0f22,#e8425f,#ff9fae); box-shadow:0 0 8px rgba(232,66,95,.7); transition:width .18s; } /* Joystick */ /* Nhật ký chiến đấu — góc dưới trái, thay cho số sát thương/thông báo bay rối mắt lúc AUTO đánh nhiều quái cùng lúc; dòng mới nhất nằm trên cùng, cuộn được, tự bỏ dòng cũ khi đầy */ #combat-log-wrap.an { display:none; } /* ⚠ BÊN PHẢI, KHÔNG BÊN TRÁI — và sườn trái để TRỐNG CÓ CHỦ Ý. Chủ dự án chốt: chỗ đó dành cho khung chat người-với-người khi có tầng realtime (Giai đoạn 1 mới có bóng người, chưa có chat — xem docs/THIET_KE_ONLINE.md). Đừng "tận dụng" sườn trái cho thứ khác rồi tới lúc làm chat lại phải dọn lần nữa. Bề ngang bằng đúng `#cot-phai` (190px) để hai khối xếp thành MỘT cột: lệch bề ngang thì đọc ra hai thứ dán cạnh nhau, đúng bài học của thanh EXP. */ #combat-log-wrap { position:fixed; right:12px; bottom:96px; width:190px; z-index:11; pointer-events:auto; } #cl-dau { display:flex; align-items:center; justify-content:space-between; gap:6px; white-space:nowrap; padding:3px 7px; border-radius:7px 7px 0 0; font-size:10.5px; font-weight:700; color:var(--gold); letter-spacing:.3px; background:linear-gradient(180deg, rgba(42,34,24,.92), rgba(20,16,11,.94)); border:1px solid rgba(198,158,74,.42); border-bottom:none; } #cl-dau button { background:none; border:none; color:var(--gold); cursor:pointer; font-size:11px; padding:0 2px; line-height:1; } #cl-dau button:hover { color:#ffe9b0; } #cl-dau i { font-style:normal; } #btn-combatlog { pointer-events:auto; width:100%; display:flex; justify-content:space-between; align-items:center; background:rgba(var(--rgb-da),.88); color:var(--text-body); border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 10px; margin-bottom:4px; font-family:inherit; font-size:var(--fs-md); font-weight:600; cursor:pointer; } #btn-combatlog:hover { background:rgba(var(--rgb-vang),.28); border-color:var(--border-strong); } #combat-log.cl-closed { display:none; } #combat-log { max-height:22vh; overflow-y:auto; background:rgba(18,20,44,.7); border:1px solid var(--border-faint); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:6px 9px; font-size:11.5px; line-height:1.55; } #combat-log .cl-row { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.92; } #combat-log .cl-row:first-child { opacity:1; } /* Panels */ /* ── KHUNG KIM LOẠI CHẠM NỔI ── Bảng cũ là hình chữ nhật bo tròn phẳng, đặt cạnh icon trang bị (vốn đã có vành kim loại, chỉ hổ phách và đinh tán) thì lệch hẳn tông. Khung này dùng ĐÚNG ngôn ngữ hình đó, phóng to lên cỡ bảng: vành ngoài tối, gờ sáng ở mép trên-trái và gờ tối ở mép dưới-phải để tạo khối, một chỉ hổ phách chạy bên trong, rồi lòng bảng lõm xuống. Làm bằng box-shadow nhiều lớp chứ không phải ảnh nền — không thêm file, co giãn theo mọi cỡ, và không dùng blur (dự án cấm). */ .panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:20; width:min(520px,94vw); max-height:86vh; overflow-y:auto; /* Bốn đinh tán vẽ bằng radial-gradient đặt ở bốn góc — box-shadow không nhận offset theo %, nên mẹo pseudo-element không dựng được đinh ở góc phải. */ background: /* Đinh tán nằm GỌN trong vành 10px (tâm cách mép 5px), không lấn ra ngoài như bản trước */ radial-gradient(circle 3px at 5px 5px, #fffaf0 0%, #d8bd85 38%, #2a2010 100%) no-repeat, radial-gradient(circle 3px at calc(100% - 5px) 5px, #fffaf0 0%, #d8bd85 38%, #2a2010 100%) no-repeat, radial-gradient(circle 3px at 5px calc(100% - 5px), #fffaf0 0%, #d8bd85 38%, #2a2010 100%) no-repeat, radial-gradient(circle 3px at calc(100% - 5px) calc(100% - 5px), #fffaf0 0%, #d8bd85 38%, #2a2010 100%) no-repeat, linear-gradient(170deg,var(--bg-panel-1),var(--bg-panel-2)) padding-box, /* Vành kim loại: chóa sáng ở mép trên-trái → thân thép → gần đen ở mép dưới-phải, rồi một vệt sáng hẹp ở chính góc dưới-phải cho ra cảm giác mép cuốn. Bản đầu chạy từ sáng sang sáng nên ra một dải xám phẳng, không thành khối. */ linear-gradient(145deg, #fff4dc 0%, #e8cf9a 5%, #b8975a 13%, /* chóa sáng mép trên-trái */ #8f7038 26%, #6b5228 42%, /* THÂN ĐỒNG — phải đủ rộng và đủ sáng, không thì cả vành chìm vào nền và chỉ còn là viền dày */ #43331a 60%, #241b0e 78%, /* đổ tối dần xuống dưới-phải */ #5c4623 92%, #d4b478 100%) border-box; /* vệt sáng mép cuốn ở góc dưới-phải */ background-origin: border-box; border:10px solid transparent; border-radius:var(--r-lg); padding:16px 18px; color:var(--text-body); box-shadow: inset 0 0 0 1px rgba(0,0,6,.9), /* rãnh tối tách vành khỏi lòng bảng */ inset 0 0 0 2px rgba(255,177,92,.34), /* chỉ hổ phách, cùng ngôn ngữ với icon trang bị */ inset 0 2px 0 rgba(255,238,200,.20), /* gờ sáng mép trên — nguồn sáng ở trên */ inset 0 -2px 0 rgba(0,0,0,.6), /* gờ tối mép dưới */ inset 0 8px 22px rgba(0,0,0,.5), /* lòng bảng lõm xuống */ 0 3px 0 rgba(0,0,0,.6), /* chân khung dày lên */ 0 16px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,4,.9); } /* nét viền ngoài tách khỏi nền */ /* Tiêu đề bảng ngồi trên một thanh khắc chìm, ngăn với phần thân. Trước đây đây là bộ chọn CON TRỰC TIẾP `.panel > h3`, nên tám màn có

nằm sâu hơn một tầng (sáu tab của khung Nhân Vật viết vào #char-content, Lò Hỗn Độn viết vào #forge-content, hội thoại NPC bọc trong một hàng riêng) mất thanh khắc chìm — cùng một game mà mở túi đồ ra một kiểu tiêu đề, nói chuyện với NPC ra kiểu khác. Nay gắn theo CLASS do moBang() phát ra, nên sâu bao nhiêu tầng cũng đúng, và cũng không thể có hai thanh chồng nhau vì chỉ moBang() mới phát class này. */ .panel h3.bang-tieu { display:flex; align-items:center; gap:10px; margin:-4px -6px 10px; padding:8px 10px; border-radius:var(--r-sm); background:linear-gradient(180deg, rgba(0,0,8,.5), rgba(0,0,8,.18)); box-shadow:inset 0 1px 0 rgba(0,0,0,.6), inset 0 -1px 0 rgba(226,235,255,.16), inset 0 0 0 1px rgba(255,177,92,.14); } /* Trang Bị + Túi Đồ mở cùng lúc (xem togglePanel trong game.js) — trên màn hình đủ rộng, tách 2 bên để kéo-thả đồ từ Túi Đồ sang ô Trang Bị được (cả 2 phải cùng có mặt trên DOM). */ @media (min-width:1000px){ #panel-inv { left:30%; width:min(440px,42vw); } #panel-bag { left:71%; width:min(440px,42vw); } /* Mở CẢ Nhân Vật lẫn Trang Bị (phím C và V nay không loại nhau) ⇒ ba bảng, ba cột. Không có nhánh này thì bảng Nhân Vật nằm giữa màn hình và bị Trang Bị đè lên. Ba cột KHÔNG chia đều: bảng Trang Bị chỉ có hình nhân vật với mười ô nên hẹp là đủ, còn Túi Đồ phải chứa lưới 8 cột cộng hàng nút — cho nó 360px như hai bảng kia thì chữ hướng dẫn bị bóp thành một cột dọc một chữ mỗi dòng. `left` ở đây là TÂM bảng (transform translate -50%), nên mỗi mốc = lề trái + nửa bề ngang. */ body.bang-ba-cot #panel-char { left:17.5%; width:min(360px,25vw); } body.bang-ba-cot #panel-inv { left:47%; width:min(345px,24vw); } body.bang-ba-cot #panel-bag { left:79%; width:min(440px,30vw); } } .panel h3 { font-family:var(--font-display); font-weight:700; color:var(--accent-light); letter-spacing:.5px; margin-bottom:10px; font-size:18px; border-bottom:1px solid var(--border-faint); padding-bottom:6px; } .panel .close-x { position:absolute; top:6px; right:8px; background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:999px; width:34px; height:34px; line-height:1; z-index:2; color:var(--text-body); font-size:18px; cursor:pointer; } .panel .close-x:hover { background:rgba(255,107,107,.55); color:#fff; } .attr-row, .stat-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 2px; font-size:var(--fs-lg); border-bottom:1px dashed var(--border-faint); } /* ── DÒNG CHỈ SỐ: nửa trái co được, nửa phải thì không ───────────────────────────────────── Nửa trái mang tên + mô tả (dài ngắn tuỳ chỉ số), nửa phải là cụm điều khiển cố định: số · ô nhập · + · Max. Trước đây cả hai đều là trơn nên trình duyệt tự do bẻ dòng chỗ nào cũng được — mô tả dài như "Giảm sát thương nhận vào" là đẩy nút Max rơi xuống dòng riêng, mỗi dòng chỉ số vỡ một kiểu. `min-width:0` là bắt buộc: không có nó thì ô flex không chịu hẹp hơn nội dung và nửa trái vẫn ép vỡ nửa phải. */ .attr-row .attr-ten { flex:1 1 auto; min-width:0; } .attr-row .attr-mo { opacity:.6; font-size:11px; } .attr-row .attr-sao { color:var(--gold); font-size:10.5px; } .attr-row .attr-dieu { flex:0 0 auto; display:flex; align-items:center; gap:5px; white-space:nowrap; } /* Số căn phải trên một bề ngang cố định ⇒ hàng đơn vị của cả năm dòng thẳng cột. tabular-nums giữ mọi chữ số cùng bề ngang, không thì 1 hẹp hơn 8 và cột lại lệch. */ /* Ô GIÁ TRỊ bề ngang CỐ ĐỊNH, dồn phải. Phần "(5+6)" chỉ hiện khi có điểm cộng thêm, nên nếu không bọc lại thì dòng nào thiếu nó sẽ hẹp hơn và cả cụm trôi sang phải — đo được Linh Lực lệch 36px so với bốn dòng kia. Bọc vào một ô cố định thì ô nhập · + · Max của cả năm dòng bắt đầu đúng một mốc. */ /* Ô GIÁ TRỊ bề ngang CỐ ĐỊNH, và CON SỐ mới là thứ neo cột — không phải cả ô. Dồn phải cả ô thì dòng nào thiếu phần "(5+6)" sẽ đẩy con số ra tận mép (đo được Linh Lực lệch 35px). Nên: ô đứng yên, con số chiếm 30px đầu dồn phải, phần cộng thêm chảy ra sau. Vậy hàng đơn vị của cả năm dòng nằm đúng một mốc dù có hay không có điểm cộng. */ .attr-row .attr-gt { flex:0 0 84px; display:inline-flex; align-items:baseline; gap:4px; } .attr-row .attr-so { flex:0 0 30px; text-align:right; font-variant-numeric:tabular-nums; } .attr-row .attr-them { color:var(--accent); font-size:11px; font-variant-numeric:tabular-nums; } .attr-row .plus-btn { width:26px; height:26px; border-radius:999px; border:1px solid var(--accent); background:rgba(var(--rgb-vang),.18); color:var(--accent-light); font-size:var(--fs-xl); cursor:pointer; } .attr-row .plus-btn:disabled { opacity:.3; cursor:default; } .attr-row .attr-qty { width:38px; height:24px; border-radius:6px; border:1px solid var(--border-faint); background:rgba(10,14,26,.6); color:var(--text-body); font-size:var(--fs-md); text-align:center; margin-right:2px; } .attr-row .attr-qty:disabled { opacity:.3; } .attr-row .max-btn { width:auto; border-radius:6px; padding:0 8px; font-size:var(--fs-sm); } .stat-sec { margin-top:10px; color:var(--text-dim); font-size:var(--fs-md); letter-spacing:1px; font-weight:600; } .slot-row, .inv-item { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; margin:4px 0; background:var(--cell); border-radius:var(--r-sm); border:1px solid var(--border-faint); cursor:pointer; font-size:12.5px; } .slot-row:hover, .inv-item:hover { background:var(--cell-hover); } .slot-row .s-name, .inv-item .s-name { flex:1; } /* Trang Bị — lưới paperdoll 12 ô (thay danh sách dọc), kéo-thả từ Túi Đồ để mặc */ /* ═══ Bảng trang bị kiểu MU/Diablo: người đứng giữa, ô đồ hai bên ═══ */ /* Lưới trang bị kiểu MU: ba cột ô LỚN, không có hình nhân vật chen giữa. Ô to hẳn ra thì mới phân biệt được cây trượng với cây gậy — ở 58px của bản cũ chúng ra cùng một vệt. `minmax(0,1fr)` chứ không `1fr`: ô có ảnh bên trong, mà `1fr` lấy kích thước tối thiểu theo nội dung nên một icon rộng là cột đó phình ra và cả lưới lệch. */ .eq-doll { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; max-width:300px; margin:2px auto 8px; } /* Dây chuyền và hai nhẫn là ô NHỎ — trong MU chúng cũng nhỏ hơn giáp, và nhờ vậy nhìn lướt là biết ngay đâu là trang sức, đâu là giáp. Bọc một tầng để ô con co lại mà ô lưới vẫn đủ. */ .eq-small { display:flex; align-items:center; justify-content:center; } .eq-small .eq-slot { width:62%; aspect-ratio:1; } /* Hai nhẫn chung một ô lưới, nằm cạnh nhau — mỗi cái hẹp lại để cả cặp vừa đúng bề ngang cột. */ .eq-doi { gap:6px; } .eq-doi .eq-slot { width:46%; } .eq-hole { } .eq-fig { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:var(--r-md); border:1px solid var(--border-faint); padding:6px 4px 4px; min-height:0; background:radial-gradient(ellipse at 50% 34%, rgba(var(--rgb-vang),.10), rgba(10,11,24,.55) 72%); } .eq-fig img { flex:1 1 auto; min-height:0; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); } .eq-fig-cap { text-align:center; line-height:1.35; margin-top:2px; } .eq-fig-cap b { display:block; font-size:12.5px; letter-spacing:.3px; } .eq-fig-cap span { display:block; font-size:10.5px; color:var(--text-dim); } @media (max-width:720px){ .eq-doll { gap:6px; max-width:246px; } } .eq-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:280px; margin:0 auto 4px; } .eq-slot { position:relative; aspect-ratio:1; border-radius:var(--r-md); border:1.5px dashed var(--border-faint); display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--cell); transition:background .12s,border-color .12s; } .eq-slot:hover { background:var(--cell-hover); } .eq-slot.filled { border-style:solid; border-color:var(--border); } .eq-slot .item-ic { width:100%; height:100%; border:none; background:transparent; box-shadow:none; } .eq-slot .item-ic img { width:76%; height:76%; } .eq-slot .eq-empty { font-size:var(--fs-xs); opacity:.4; text-align:center; padding:4px; line-height:1.3; } .eq-slot .eq-plus { position:absolute; top:2px; right:5px; font-size:var(--fs-xs); color:var(--accent-light); text-shadow:0 1px 2px #000; } .eq-slot.drag-over, .forge-drop-zone.drag-over { border-color:var(--accent-light); box-shadow:0 0 10px rgba(var(--rgb-vang),.5); background:rgba(var(--rgb-vang),.15); } /* Tứ Châu — viên ngọc kéo được thả vào ô món đồ trong Rèn Luyện */ .jewel-drag { display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--border-faint); cursor:grab; font-size:var(--fs-sm); text-align:center; background:var(--cell); line-height:1.5; } .jewel-drag:active { cursor:grabbing; } .jewel-drag[draggable="false"] { opacity:.35; cursor:not-allowed; } .forge-drop-zone { width:56px; height:56px; border-radius:var(--r-md); border:1.5px dashed var(--border-faint); transition:box-shadow .12s,border-color .12s,background .12s; } /* Màu chữ theo GIAI (1..7). Hệ phẩm Phàm/Tinh/Linh/Thần/Chí Tôn đã gỡ — các lớp .r0..r4 cũ đi cùng nó. Bảy màu dưới đây khớp GIAI_MAU trong game.js, sửa một bên phải sửa bên kia. */ .g1{color:#b9c2e6}.g2{color:#5fc96e}.g3{color:#5ea0e8}.g4{color:#7ecbff} .g5{color:var(--purple)}.g6{color:var(--orange)}.g7{color:#ff6b6b} .item-tip { font-size:var(--fs-sm); opacity:.85; line-height:1.5; margin-top:2px; } .mini-btn { background:rgba(var(--rgb-vang),.2); color:var(--accent-light); border:1px solid var(--accent); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit; margin-left:6px;} .mini-btn:hover { background:rgba(var(--rgb-vang),.4); } .mini-btn:disabled { opacity:.35; cursor:default; } /* Forge */ .forge-lines { background:var(--cell); border:1px solid var(--border-faint); border-radius:var(--r-md); padding:10px 12px; margin:10px 0; font-size:12.5px; line-height:1.7; } .forge-actions { text-align:center; margin-top:10px; } #forge-msg { text-align:center; min-height:18px; font-size:12.5px; margin-top:8px; } /* Mount & Dantian panels */ .mount-img { display:block; width:min(230px,58vw); margin:6px auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); } .mount-name { text-align:center; font-size:17px; letter-spacing:1px; margin:4px 0; font-weight:700; } .tier-pips { text-align:center; letter-spacing:4px; font-size:var(--fs-lg); margin-bottom:8px; } .realm-ring { text-align:center; margin:8px 0; } .realm-ring .realm-name { font-size:19px; letter-spacing:2px; color:var(--accent-light); font-weight:700; } .bonus-list { background:rgba(var(--rgb-vang),.08); border:1px solid rgba(var(--rgb-vang),.3); border-radius:var(--r-md); padding:8px 12px; font-size:12.5px; line-height:1.7; margin:8px 0; } .next-tier { border:1px dashed rgba(255,215,106,.45); border-radius:var(--r-md); padding:8px 12px; margin-top:8px; font-size:12.5px; } /* Bảng Đại Thành (mastery) — lưới biểu tượng kiểu Master Skill Tree của MU: mỗi nút là một ô hình có khung, số điểm ở góc, các rank nối nhau bằng mũi tên. */ .mst-head { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11.5px; color:var(--text-dim); padding:0 2px 8px; font-variant-numeric:tabular-nums; } .mst-head .mst-pts { color:var(--gold); font-size:15px; } .mst-tabs { display:flex; gap:4px; margin-bottom:8px; } /* Bảng con trong tab Đại Thành. Nó KHÁC .bang-tab thật — ba dòng chồng nhau (biểu tượng, tên, số điểm đã dùng) và chia đều chiều ngang — nên không gộp được vào một lớp. Nhưng nó phải NÓI CÙNG MỘT NGÔN NGỮ: cùng nền, cùng viền, cùng bo góc --r-sm, và nhất là cùng kiểu "đang chọn" (nền sáng đặc, chữ tối). Trước đây trạng thái chọn của nó là nền xanh trong suốt chữ xanh — ngược hẳn .bang-tab, nên trong cùng một bảng có hai cách hiểu thế nào là "tab đang mở". */ .mst-tabs button { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(var(--rgb-da),.7); color:var(--text-dim); border:1px solid var(--border-faint); border-radius:var(--r-sm); padding:6px 2px; font-size:15px; cursor:pointer; transition:background 140ms ease-out, color 140ms ease-out; } .mst-tabs button span { font-size:10.5px; font-weight:600; letter-spacing:.3px; } .mst-tabs button i { font-style:normal; font-size:var(--fs-xs); color:var(--gold); font-variant-numeric:tabular-nums; } .mst-tabs button.active { background:linear-gradient(180deg,var(--tab-on-1),var(--tab-on-2)); color:var(--on-light); border-color:var(--tab-on-1); } .mst-tabs button.active i { color:#7a5200; } /* hổ phách trên nền sáng thì mất hút — giữ chất hổ phách, chỉ hạ độ sáng */ .mst-tabs button:hover { background:rgba(var(--rgb-vang),.12); color:#dbe6ff; } .mst-tabs button.active:hover { background:linear-gradient(180deg,var(--tab-on-1),var(--tab-on-2)); color:var(--on-light); } .mst-note { font-size:var(--fs-sm); color:var(--orange); line-height:1.5; margin-bottom:8px; } /* Đầu bảng: hai nhánh và số điểm đang nuôi mỗi bên — người chơi phải thấy mình đang nghiêng về đâu TRƯỚC khi bấm, không phải sau khi đã tiêu điểm. */ .mst-nhanh { display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:4px; } .mst-nhanh s { text-decoration:none; font-size:10px; color:var(--text-dim); letter-spacing:.6px; } .mst-nh { display:flex; align-items:baseline; gap:5px; padding:3px 10px; border-radius:999px; border:1px solid rgba(var(--rgb-vang),.22); background:rgba(var(--rgb-vang),.05); } .mst-nh i { font-style:normal; font-size:11px; font-weight:600; color:var(--text-body); } .mst-nh b { font-size:var(--fs-sm); color:var(--gold); font-variant-numeric:tabular-nums; } .mst-nh.da { border-color:rgba(var(--rgb-vang),.7); background:rgba(var(--rgb-vang),.14); } .mst-nh.da i { color:var(--accent-light); } .mst-tree { display:flex; flex-direction:column; align-items:center; gap:2px; } .mst-link { color:#dfcaac; font-size:var(--fs-sm); line-height:1; opacity:.55; display:flex; justify-content:center; } /* Hai mũi tên của một hàng hai nhánh phải rơi đúng trên hai cột ô (76px + 10px khe). */ .mst-link s { display:inline-block; width:76px; text-decoration:none; } .mst-row { display:flex; justify-content:center; align-items:flex-start; gap:10px; flex-wrap:wrap; padding:6px 4px; } /* Hàng chốt: hai nút đỉnh loại trừ nhau — vẽ hẳn dấu rẽ đôi giữa chúng. */ .mst-row.chot { gap:4px; } .mst-hoac { align-self:center; font-size:9px; line-height:1.15; font-weight:700; text-align:center; letter-spacing:.5px; color:var(--orange); padding:4px 5px; border-radius:6px; border:1px dashed rgba(var(--rgb-cam),.55); background:rgba(var(--rgb-cam),.08); } .mst-cell.khoa img { filter:grayscale(1) brightness(.38); } .mst-cell.khoa .mst-c-name { color:var(--text-dim); } .mst-lock { width:100%; text-align:center; font-size:10.5px; color:var(--text-dim); } .mst-cell { position:relative; width:76px; padding:0; background:none; border:0; font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; } .mst-cell:disabled { cursor:default; } .mst-cell img { width:56px; height:56px; border-radius:8px; display:block; filter:grayscale(.85) brightness(.6); transition:filter .18s, transform .18s; } .mst-cell.on img { filter:none; } .mst-cell.full img { filter:none; box-shadow:0 0 10px rgba(var(--rgb-vang),.5); } .mst-cell:not(:disabled):hover img { transform:translateY(-2px); filter:none; } /* Ô đếm điểm nằm GÓC DƯỚI-PHẢI của hình, có nền tối riêng — đặt chồng thẳng lên hình như bản đầu thì con số ăn mất chính cái hình mà nó đang chú thích. */ .mst-c-pt { position:absolute; top:38px; right:7px; font-style:normal; font-size:var(--fs-sm); font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; line-height:1; padding:2px 4px; border-radius:5px; background:rgba(8,7,13,.86); border:1px solid rgba(198,158,74,.55); } .mst-c-pt span { font-size:8.5px; color:var(--text-body); opacity:.7; } .mst-cell.full .mst-c-pt { color:var(--accent-light); border-color:rgba(var(--rgb-vang),.6); } .mst-c-name { font-size:10.5px; font-weight:600; color:var(--text-body); line-height:1.2; text-align:center; max-width:76px; } .mst-cell.full .mst-c-name { color:var(--accent-light); } .mst-c-bar { display:block; width:56px; height:3px; border-radius:999px; background:rgba(10,10,26,.72); overflow:hidden; } .mst-c-bar s { display:block; height:100%; text-decoration:none; background:linear-gradient(180deg,#dcc4a1,#c0965a); transition:width .18s; } .mst-help { text-align:center; font-size:10.5px; color:var(--text-dim); margin:8px 0 4px; } @media (prefers-reduced-motion: reduce){ .mst-cell img, .mst-c-bar s { transition:none; } .mst-cell:not(:disabled):hover img { transform:none; } } #mount-msg, #dantian-msg { text-align:center; min-height:18px; font-size:12.5px; margin-top:8px; } /* Sect select */ /* Neo ĐÁY chứ không canh giữa. Canh giữa thì khối chọn lớp trôi lên đúng chỗ cây thế giới — thứ đắt nhất trong bức tranh — và cả bức chỉ còn là mặt đất tối phía dưới. (Hai màn kia đè lại: .man-server canh giữa, .man-cho canh giữa + dồn phải.) */ #sect-select { position:fixed; inset:0; z-index:30; display:flex; align-items:flex-end; justify-content:center; background:transparent; overflow-y:auto; } /* nền là canvas #title-fx nằm phía sau */ /* Hoạt cảnh mở đầu nằm DƯỚI khối chọn lớp, phủ kín màn hình */ #title-fx { position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } #sect-select .ss-inner { position:relative; z-index:1; } /* Chữ vẫn cần nền để đọc được, nhưng một HỘP bo góc đặt lên một bức tranh thì lập tức thành cái hộp — mắt đọc ra cái khung trước khi đọc ra cảnh. Thay bằng một vầng mờ hình bầu dục, đậm ở giữa và TAN HẲN trước khi tới mép: không có đường viền nào để mà nhìn thấy. */ #sect-select .ss-inner { background:none; border-radius:0; max-width:900px; } /* Màn mờ nằm ở #sect-select chứ không ở .ss-inner: khối trong chỉ rộng 900px, đặt vầng mờ vào đó là nó có MÉP — và một cái mép dọc chạy suốt màn hình thì mắt đọc ra ngay cái hộp. */ /* ⚠ CÁC NẤC PHẢI CHUYỂN DẦN. Bản cũ có hai nấc sát nhau (trong suốt ở 46%, rồi .72 ở 62%) — trên nền núi vẽ tay mờ mịt thì không ai thấy, nhưng nền nay là tranh có chi tiết đều khắp khung, và chỗ nấc gấp hiện ra thành một ĐƯỜNG KẺ NGANG chạy suốt bề rộng màn hình. Nền cũng đã được dìm sẵn trong canvas (nenPhu), nên lớp này chỉ còn phải lo phần đáy. */ #sect-select::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(5,7,20,.30) 0%, rgba(5,7,20,.05) 22%, rgba(5,7,20,0) 44%, rgba(4,5,16,.22) 64%, rgba(3,4,12,.58) 84%, rgba(3,4,12,.78) 100%); } /* Màn TẠO NHÂN VẬT cần đáy tối hơn hẳn: dưới hàng thẻ còn bảng chi tiết lớp, ô nhập tên và nút — bốn khối chữ chồng lên nhau, mà nửa dưới của cảnh Lunacia là bãi cỏ sáng. Ba màn dùng chung một khối HTML nên phân biệt bằng cờ: không man-cho, không man-server = màn tạo. */ #sect-select:not(.man-cho):not(.man-server)::before { background:linear-gradient(180deg, rgba(5,7,20,.32) 0%, rgba(5,7,20,.05) 18%, rgba(5,7,20,0) 38%, rgba(4,5,16,.46) 58%, rgba(3,4,12,.88) 76%, rgba(3,4,12,.95) 100%); } /* Dòng dẫn duy nhất còn lại: nhỏ, giãn chữ, không phát sáng — chú thích cho bức tranh, không phải tiêu đề. Ghim lên đỉnh màn hình chứ không để trong dòng chảy: trong dòng chảy thì nó nằm ngay trong dải sáng nhất của cảnh và chìm mất. */ #sect-select .ss-inner h2, #sect-select .ss-sub { position:fixed; left:0; right:0; z-index:3; margin:0; padding:0 16px; text-align:center; pointer-events:none; text-shadow:0 1px 12px rgba(4,5,16,.95), 0 0 30px rgba(4,5,16,.8); } #sect-select .ss-inner h2 { top:20px; font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#dccab1; } #sect-select .ss-sub { top:44px; color:#b1a38f; font-size:12.5px; line-height:1.55; } /* Giảm chuyển động KHÔNG có nghĩa là gỡ mất nền. Luật cũ ẩn hẳn canvas, tức người bật tuỳ chọn đó nhận một trang đen trơn. Nay titleStart() vẽ đúng một khung rồi dừng — cảnh vẫn ở đó, chỉ là không nhúc nhích. Xem titleItDong() trong game.js. */ /* ── CHỌN MÁY CHỦ ──────────────────────────────────────────────────────────── Nhịp của MU: tên game chiếm hẳn phần trên, cụm máy chủ nằm thành một hàng bên dưới. Chữ dựng bằng gradient kim loại lạnh — đó là thứ làm nên cái logo MU, không phải font nào cả: một dải sáng ở trên, một vệt tối ở giữa thân chữ, rồi sáng lại ở chân. */ #sv-pick { display:flex; flex-direction:column; align-items:center; gap:0; margin:0 auto 8px; } /* Màn chọn máy chủ canh GIỮA, không neo đáy. Neo đáy là luật của sân khấu chọn lớp — ở đó năm nhân vật phải đứng trên bệ đất nên khối chữ buộc phải tụt xuống. Màn này không có sân khấu nào, dồn xuống đáy chỉ làm nó trông như bị rơi. */ #sect-select.man-server { align-items:center; } #sect-select.man-server .ss-inner { padding-bottom:26px; } /* gap .34em: hai chữ phải TÁCH ra. Để .14em thì chân chữ E và bụng chữ R chạm nhau và mắt đọc thành một từ "AXIERIFT" — đo trên ảnh dựng thật mới thấy, trong mã thì không. */ .sv-logo { display:flex; align-items:baseline; gap:.34em; line-height:1; font-family:var(--font-display); font-weight:700; letter-spacing:.02em; margin-bottom:6px; } .sv-logo span { background:linear-gradient(180deg,#ffffff 4%,#eadfce 26%,#887862 50%,#bdad96 56%,#f2f6ff 76%,#ac9c85 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(var(--rgb-vang),.35)); } .sv-logo-a { font-size:clamp(38px,7vw,66px); } .sv-logo-b { font-size:clamp(38px,7vw,66px); letter-spacing:.10em; } .sv-nhan { font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color:#b1a38f; margin-bottom:14px; } .sv-hang { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } /* Nút máy chủ: khối chữ nhật thấp, viền mảnh — cố ý giống nút xám của MU chứ không phải thẻ bo tròn của phần còn lại trong game. Đây là màn KHÁC, và nó nên thấy khác. */ .sv-nut { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:194px; padding:11px 14px 9px; cursor:pointer; text-align:left; background:linear-gradient(180deg, rgba(61,50,35,.92), rgba(14,16,38,.94)); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-body); transition:border-color .15s, transform .12s, box-shadow .15s; } .sv-nut:hover { transform:translateY(-2px); border-color:var(--border-strong); } .sv-nut.on { border-color:var(--accent-light); box-shadow:0 0 12px rgba(var(--rgb-vang),.28); } .sv-ten { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-bright); } .sv-nut.on .sv-ten { color:var(--accent-light); } .sv-mo { font-size:11px; color:var(--text-dim); line-height:1.4; } .sv-tt { font-size:10.5px; color:var(--text-dim); letter-spacing:.03em; } /* Thay cho thanh "Tiếp nhận %" đã gỡ — nói đúng trạng thái thay vì bịa một con số. */ .sv-off { display:inline-block; margin-top:6px; color:#8fa8b8; } /* Nói thẳng đây là nghi thức chứ không phải máy chủ thật — người chơi tưởng có người khác trong đó rồi đi tìm mới là thứ đáng trách. */ /* Nút đổi máy chủ nằm lẫn trong dòng chú thích dưới danh sách nhân vật — nó là lối đi phụ, không đáng chiếm một nút to. */ .sv-doi { background:none; border:none; padding:0; cursor:pointer; font:inherit; font-size:inherit; color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; } .sv-doi:hover { color:var(--accent-light); } .sv-doi b { color:var(--text-body); font-weight:600; } .sv-ghi { display:block; margin-top:14px; font-size:10.5px; color:#968875; font-style:normal; } @media (max-width:720px){ .sv-nut { min-width:0; flex:1 1 44%; } } /* (đã gỡ cùng lớp thứ sáu — không còn nghi lễ chọn lớp trong game) */ .ss-inner { text-align:center; padding:26px 16px; max-width:720px; } #sect-select .ss-inner { padding-bottom:34px; } .ss-inner h1 { font-family:var(--font-display); font-weight:700; color:var(--accent-light); font-size:clamp(30px,6vw,50px); letter-spacing:2px; } .ss-inner h2 { color:var(--text-dim); font-size:clamp(13px,2.4vw,18px); letter-spacing:3px; font-weight:600; margin-top:6px; } .ss-sub { color:#b1a38f; font-size:var(--fs-lg); margin:14px 0 24px; } #sect-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; } .sect-card { background:linear-gradient(170deg,rgba(234,220,201,.08),rgba(234,220,201,.02)); border:2px solid var(--border-faint); border-radius:var(--r-lg); padding:18px 12px; cursor:pointer; color:var(--text-body); transition:all .15s; } .sect-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 8px 26px rgba(var(--rgb-vang),.3); } .sect-card .glyph { font-size:38px; margin-bottom:8px; } .sect-card .portrait { width:100%; height:150px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); margin-bottom:6px; } .skill.has-img { background-size:cover; background-position:center; } .skill.has-img .sk-ico { display:none; } .char-portrait { display:block; width:142px; margin:0 auto 6px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); } .sect-card .s-title { font-size:17px; letter-spacing:.5px; margin-bottom:4px; font-weight:700; } .sect-card .s-role { font-size:var(--fs-sm); color:var(--text-dim); margin-bottom:8px; } .sect-card .s-desc { font-size:11.5px; line-height:1.55; opacity:.85; } #max-mode { display:inline-block; margin-top:22px; color:var(--text-dim); font-size:var(--fs-lg); cursor:pointer; } #max-mode input { accent-color:var(--accent); margin-right:6px; vertical-align:-2px; } #max-mode-intro { display:block; margin-top:14px; color:var(--text-dim); font-size:var(--fs-lg); cursor:pointer; text-align:center; } #max-mode-intro input { accent-color:var(--accent); margin-right:6px; vertical-align:-2px; } .big-btn { margin-top:26px; background:linear-gradient(180deg,#d2b388,#c0965a); border:none; color:#fff; padding:13px 36px; font-size:var(--fs-xl); font-weight:700; letter-spacing:1px; border-radius:999px; cursor:pointer; font-family:inherit; box-shadow:0 4px 0 #a2783d, 0 6px 16px rgba(192,150,90,.4); transition:transform .1s; } .big-btn:hover { filter:brightness(1.08); } .big-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #a2783d, 0 2px 8px rgba(192,150,90,.4); } /* Thẻ lựa chọn (draft cards, evo path, boss form...) — khác .big-btn: viền + nền mờ thay vì fill đặc, để phân biệt rõ "chọn 1 trong nhiều" với nút hành động chính (Bắt Đầu, Dừng Lại...) */ .choice-card { background:rgba(var(--rgb-vang),.14); border:2px solid var(--border); color:var(--text-body); border-radius:var(--r-lg); padding:14px 16px; font-family:inherit; cursor:pointer; transition:all .15s; } .choice-card:hover { background:rgba(var(--rgb-vang),.28); border-color:var(--accent); transform:translateY(-2px); } /* Overlay */ #overlay { position:fixed; inset:0; z-index:40; background:rgba(8,9,22,.82); display:flex; align-items:center; justify-content:center; } #overlay-inner { text-align:center; color:var(--text-body); padding:30px; max-width:560px; } #overlay-inner h2 { font-family:var(--font-display); font-weight:700; color:var(--accent-light); letter-spacing:1px; font-size:28px; margin-bottom:14px; } #overlay-inner p { font-size:14px; line-height:1.8; margin-bottom:20px; } /* ── Lò Hỗn Loạn: cảnh ghép đồ kiểu MU Online — bỏ đồ vào, yêu tinh tung quả cầu, rồi bung kết quả ── */ /* ══ SÂN LÒ — cỗ máy yêu tinh nằm NGAY TRONG bảng Lò Hỗn Độn ══ Không còn overlay toàn màn hình bật lên sau cú bấm: con yêu tinh phải tung đồ SẴN, trước khi người chơi bấm, thì mới có cái để nhìn mà canh nhịp. Vòng tung do CSS lo (infinite), JS chỉ đếm — xem khối SÂN LÒ trong game.js. */ .lo-san { position:relative; height:132px; display:flex; align-items:flex-end; justify-content:center; gap:18px; margin:2px 0 4px; border-radius:var(--r-md); overflow:hidden; background:radial-gradient(ellipse at 50% 118%, rgba(255,177,92,.16), rgba(10,10,26,.5) 62%); box-shadow:inset 0 0 0 1px rgba(var(--rgb-dong),.18); } .lo-khay { display:flex; gap:7px; align-items:flex-end; z-index:1; padding-bottom:14px; } .lo-mon { position:relative; font-size:20px; line-height:1; } .lo-yeutinh { font-size:44px; line-height:1; transform-origin:bottom center; padding-bottom:10px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)); } .lo-cau { position:absolute; width:18px; height:18px; border-radius:50%; left:50%; bottom:66px; margin-left:50px; background:radial-gradient(circle at 35% 30%, #fff, var(--oc,#ffd76a) 55%, transparent 78%); box-shadow:0 0 14px 4px var(--oc,#ffd76a); opacity:.25; } .lo-ra { position:absolute; left:50%; bottom:22px; margin-left:-19px; opacity:0; transform:scale(0); z-index:2; } .lo-nhip { position:absolute; top:6px; right:10px; font-size:11px; opacity:.62; display:flex; gap:6px; align-items:baseline; } .lo-nhip b { font-size:15px; font-variant-numeric:tabular-nums; color:var(--oc,#ffd76a); } .lo-loi { font-size:11.5px; opacity:.78; text-align:center; min-height:16px; margin-bottom:6px; } /* ĐANG TUNG — trạng thái mặc định khi khay đã khớp một công thức chạy được. */ .lo-san.lo-tung .lo-cau { opacity:1; animation:chaos-orb-toss .55s ease-in-out infinite; } .lo-san.lo-tung .lo-yeutinh { animation:chaos-goblin-toss .55s ease-in-out infinite; } @keyframes chaos-goblin-toss { 0%,100% { transform:translateY(0) rotate(-4deg); } 50% { transform:translateY(-9px) rotate(4deg); } } @keyframes chaos-orb-toss { 0% { transform:translateY(0) scale(.9); } 50% { transform:translateY(-40px) scale(1.15); } 100% { transform:translateY(0) scale(.9); } } /* NÍN THỞ — yêu tinh đã chộp quả cầu, ôm khư khư, run lên. */ .lo-san.lo-khui .lo-cau { opacity:1; animation:lo-cau-nen 1.15s ease-in forwards; } .lo-san.lo-khui .lo-yeutinh { animation:lo-run .16s ease-in-out infinite; } @keyframes lo-cau-nen { 0% { transform:translateY(0) scale(1); } 100% { transform:translateY(14px) scale(.55); filter:brightness(1.9); } } @keyframes lo-run { 0%,100% { transform:translateX(-1.5px) rotate(-1.5deg); } 50% { transform:translateX(1.5px) rotate(1.5deg); } } /* THẮNG / BẠI */ .lo-san.lo-thang .lo-cau { animation:chaos-orb-burst .5s ease forwards; } @keyframes chaos-orb-burst { 0% { transform:scale(1); opacity:1; } 60% { transform:scale(2.8); opacity:.9; box-shadow:0 0 40px 18px var(--oc,#ffd76a); } 100% { transform:scale(3.2); opacity:0; } } .lo-san.lo-thang .lo-yeutinh { animation:chaos-goblin-cheer .6s ease; } @keyframes chaos-goblin-cheer { 0%,100% { transform:translateY(0) rotate(0); } 40% { transform:translateY(-15px) rotate(-10deg); } } .lo-san.lo-thang .lo-mon { animation:chaos-slot-fade .45s ease forwards; } @keyframes chaos-slot-fade { to { transform:translateY(-14px) scale(.3); opacity:0; } } .lo-san.lo-thang .lo-ra { animation:chaos-result-pop .55s ease .25s forwards; } @keyframes chaos-result-pop { 0% { opacity:0; transform:scale(0); } 65% { opacity:1; transform:scale(1.25); } 100% { opacity:1; transform:scale(1); } } .lo-san.lo-thang { animation:lo-sang .7s ease; } @keyframes lo-sang { 0% { box-shadow:inset 0 0 0 1px rgba(var(--rgb-dong),.18); } 35% { box-shadow:inset 0 0 40px 6px var(--oc,#ffd76a), inset 0 0 0 1px var(--oc,#ffd76a); } 100% { box-shadow:inset 0 0 0 1px rgba(var(--rgb-dong),.18); } } .lo-san.lo-bai .lo-cau { animation:chaos-orb-die .5s ease forwards; } @keyframes chaos-orb-die { to { filter:grayscale(1) brightness(.4); transform:scale(.6); opacity:.35; } } .lo-san.lo-bai .lo-yeutinh { animation:chaos-goblin-shrug .6s ease; } @keyframes chaos-goblin-shrug { 0%,100% { transform:rotate(0); } 30%,70% { transform:rotate(-9deg); } 50% { transform:rotate(9deg); } } .lo-san.lo-bai .lo-mon { animation:chaos-slot-crumble .65s ease forwards; } @keyframes chaos-slot-crumble { to { transform:translateY(28px) rotate(18deg) scale(.4); opacity:0; filter:grayscale(1); } } .lo-san.lo-bai { animation:lo-do .5s ease; } @keyframes lo-do { 0%,100% { box-shadow:inset 0 0 0 1px rgba(var(--rgb-dong),.18); } 40% { box-shadow:inset 0 0 34px 6px rgba(255,107,107,.55), inset 0 0 0 1px rgba(255,107,107,.8); } } /* Máy đứng im khi khay chưa khớp công thức nào — quả cầu chỉ âm ỉ. */ .lo-san.lo-cho .lo-yeutinh { opacity:.55; filter:grayscale(.5) drop-shadow(0 4px 6px rgba(0,0,0,.5)); } @media (prefers-reduced-motion: reduce){ .lo-san .lo-cau, .lo-san .lo-yeutinh, .lo-san .lo-mon, .lo-san .lo-ra, .lo-san { animation:none !important; } .lo-san.lo-tung .lo-cau, .lo-san.lo-khui .lo-cau { opacity:1; } .lo-san.lo-thang .lo-ra { opacity:1; transform:scale(1); } } .chaos-go i { font-style:normal; font-size:10.5px; opacity:.6; margin-left:6px; padding:1px 5px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); } /* ── Khung phẩm chất + ấn giai cho icon trang bị (Drop v2.0) ── */ .item-ic { position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-sm); border:1.5px solid rgba(233,218,197,.45); background:rgba(10,10,26,.35); flex:0 0 auto; } .item-ic img { width:82%; height:82%; object-fit:contain; pointer-events:none; } .item-ic.ic-g2 { border-color:rgba(95,201,110,.7); box-shadow:0 0 6px rgba(95,201,110,.25); } .item-ic.ic-g3 { border-color:rgba(94,160,232,.8); box-shadow:0 0 7px rgba(94,160,232,.3); } .item-ic.ic-g4 { border-color:rgba(126,203,255,.85); box-shadow:0 0 8px rgba(126,203,255,.32); } .item-ic.ic-g5 { border-color:rgba(177,140,255,.85); box-shadow:0 0 8px rgba(177,140,255,.35); } .item-ic.ic-g6 { border-color:rgba(255,177,92,.95); box-shadow:0 0 10px rgba(255,177,92,.45); } .item-ic.ic-g7 { border-color:rgba(255,107,107,1); box-shadow:0 0 12px rgba(255,107,107,.5); } .ic-giai { position:absolute; bottom:-4px; right:-4px; font-style:normal; font-size:8.5px; font-weight:700; line-height:1; padding:2px 4px; border-radius:6px; color:#2f2518; background:linear-gradient(180deg,#dcc4a1,#cead7d); box-shadow:0 1px 3px rgba(0,0,0,.5); letter-spacing:.5px; } .bag-cell .item-ic, .bag-mon .item-ic { width:100%; height:100%; border:none; background:transparent; box-shadow:none; } /* Tranh món nằm TRÊN lưới ô con (.bc-luoi định vị tuyệt đối nên mặc định vẽ đè lên nội dung tĩnh). */ .bag-mon .item-ic { position:relative; z-index:1; } .bag-cell .item-ic img, .bag-mon .item-ic img { width:82%; height:82%; } /* ── Thanh thoại boss vùng (cốt truyện Trụ Khoá) ── */ #boss-talk { position:fixed; left:50%; bottom:86px; transform:translateX(-50%); z-index:15; max-width:min(560px, 88vw); pointer-events:none; text-align:center; background:linear-gradient(180deg, rgba(24,10,20,.88), rgba(10,5,10,.92)); border:1px solid rgba(255,143,207,.5); border-radius:var(--r-md); padding:10px 18px; box-shadow:0 4px 24px rgba(0,0,0,.6), inset 0 0 18px rgba(255,107,107,.15); animation:btIn .35s ease; } @keyframes btIn { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%); } } #boss-talk .bt-name { display:block; font-family:var(--font-display); font-weight:700; color:var(--red); letter-spacing:.5px; font-size:var(--fs-lg); margin-bottom:3px; } #boss-talk .bt-line { font-family:'Be Vietnam Pro',sans-serif; font-style:italic; color:#f2e6ec; font-size:13.5px; line-height:1.55; } /* ── Playtest cheat console (chỉ TEST_MODE ?test=1) ── */ #cheat-console { position:fixed; top:14px; left:14px; z-index:70; width:380px; background:rgba(8,10,20,.93); border:1px solid rgba(220,196,162,.4); border-radius:var(--r-md); padding:8px 10px; font-family:ui-monospace, Consolas, monospace; font-size:var(--fs-md); color:#f2e9dc; box-shadow:0 6px 24px rgba(0,0,0,.6); } #cheat-log div { line-height:1.55; white-space:pre-wrap; } #cheat-input { width:100%; margin-top:6px; background:rgba(255,255,255,.08); border:1px solid rgba(220,196,162,.35); border-radius:var(--r-sm); color:#fff; padding:6px 8px; font-family:inherit; font-size:var(--fs-md); outline:none; box-sizing:border-box; } /* Quest dialog list */ .qd-quest { background:var(--cell); border:1px solid var(--border-faint); border-radius:var(--r-md); padding:12px; margin:8px 0; text-align:left; font-size:var(--fs-lg); line-height:1.6; } .qd-quest .q-name { color:var(--accent-light); font-size:14px; margin-bottom:4px; font-weight:700; } .qd-quest .q-rew { color:var(--mint); font-size:11.5px; margin-top:6px; } @media (max-width:720px){ /* Thanh dưới là MỘT hàng flex không co, không cuộn ngang được: ở khổ 390px thì mấy ô cuối (trong đó có ✋ NHẶT ĐỒ — không bàn phím thì đó là đường DUY NHẤT nhặt đồ dưới đất) rơi hẳn ra ngoài mép. Cho hai viên đá đứng riêng một hàng, thanh chiêu chiếm trọn hàng dưới và TỰ XUỐNG DÒNG. Vạch ngăn nhóm ẩn đi: nó chỉ là dấu phân cụm, còn ở khổ hẹp nó cắt nhầm chỗ xuống dòng và đẩy thêm một ô ra ngoài. */ #bottom-hud { gap:6px; bottom:8px; max-width:100vw; width:100vw; flex-wrap:wrap; justify-content:center; } #skillbar { gap:5px; flex:1 1 100%; flex-wrap:wrap; justify-content:center; max-width:100vw; } .sk-vach { display:none; } .skill { width:42px; height:42px; } .skill .sk-ico { font-size:17px; line-height:26px; } #hud-left { width:min(280px,38vw); } #quest-tracker { font-size:var(--fs-sm); max-height:34vh; overflow-y:auto; } #quest-tracker .q-daily { display:none; } #minimap { width:150px; height:110px; } #combat-log-wrap { bottom:104px; width:min(170px,44vw); right:8px; } #combat-log { font-size:10.5px; max-height:16vh; } } /* ===== v2: HUD mở rộng ===== */ #hud-time { font-size:11.5px; text-shadow:0 1px 3px #000; margin-top:3px; letter-spacing:.5px; color:var(--pink); background:rgba(18,20,44,.4); border:1px solid rgba(var(--rgb-vang),.3); border-radius:999px; padding:2px 9px; display:inline-block; } #hud-buff { color:var(--orange); font-size:11.5px; text-shadow:0 1px 3px #000; margin-top:2px; letter-spacing:.5px; } #hud-loidon { color:var(--gold); font-size:11.5px; text-shadow:0 1px 3px #000; margin-top:2px; letter-spacing:.5px; } #hud-name.toiac { color:#ff5a4a; } #hud-map { position:absolute; top:12px; left:50%; transform:translateX(-50%); text-align:center; color:var(--text-bright); font-size:14px; letter-spacing:.5px; text-shadow:0 1px 3px #000; font-weight:600; } #hud-map .zone-badge { display:inline-block; margin-left:8px; font-size:10.5px; padding:2px 9px; border-radius:999px; border:1px solid; letter-spacing:.5px; vertical-align:2px; } #btn-pk { margin-top:4px; display:block; margin-left:auto; } #btn-pk.pk-on { background:rgba(232,66,95,.85); color:#ffd9e0; border-color:var(--red); } #btn-pk.pk-off { opacity:.85; } #btn-auto { margin-top:4px; display:block; margin-left:auto; } #btn-auto.auto-on { background:rgba(46,150,110,.9); color:#d0ffe8; border-color:#6ae8b0; box-shadow:0 0 8px rgba(106,232,180,.5); animation:autoPulse 1.6s ease-in-out infinite; } #btn-auto.auto-off { opacity:.85; } @keyframes autoPulse { 0%,100%{ box-shadow:0 0 4px rgba(106,232,180,.35); } 50%{ box-shadow:0 0 12px rgba(106,232,180,.75); } } /* Taskbar kỹ năng */ #skillbar { align-items:flex-end; } .skill .sk-ico { pointer-events:none; } .skill.sk-empty .sk-ico { opacity:.4; font-size:22px; } /* Tab trong khung Nhân Vật */ /* MỘT kiểu tab cho cả game. Trước đây có BA: .char-tabs button (bo 999px), .chaos-tab (bo 14px), và .mini-btn.danger ở Nhật Ký + Cài Đặt — kiểu thứ ba sai về nghĩa, vì .danger là viền đỏ dùng cho nút PHÁ HUỶ, nên tab chưa chọn trông y hệt nút "XÓA SAVE". */ .bang-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px; justify-content:flex-start; } /* flex-grow 0: bảng Nhân Vật có sáu tab, hàng đầu chứa được năm nên tab thứ sáu xuống hàng — để nó co giãn thì nó phình ra chiếm trọn chiều ngang, trông như một cái nút lạc chứ không phải một tab. Rộng theo chữ, canh trái, xuống hàng thì xuống cho tự nhiên. */ .bang-tab { flex:0 1 auto; min-width:66px; padding:7px 9px; font-family:inherit; font-size:var(--fs-md); font-weight:600; cursor:pointer; border-radius:var(--r-sm); background:rgba(var(--rgb-da),.7); color:var(--text-dim); border:1px solid var(--border-faint); transition:background 140ms ease-out, color 140ms ease-out; } .bang-tab:hover { background:rgba(var(--rgb-vang),.12); color:#dbe6ff; } .bang-tab.on { background:linear-gradient(180deg,var(--tab-on-1),var(--tab-on-2)); color:var(--on-light); border-color:var(--tab-on-1); font-weight:700; } .bang-tab.khoa { opacity:.42; cursor:not-allowed; } .bang-tab.khoa:hover { background:rgba(var(--rgb-da),.7); color:var(--text-dim); } .bang-tab i { font-style:normal; font-size:var(--fs-xs); opacity:.75; } /* Hàng tab CON của tab mẹ: thụt vào, nhỏ hơn một nấc, và có một vạch nối lên hàng trên để mắt đọc ra quan hệ cha-con chứ không tưởng là hai hàng ngang hàng nhau. */ .bang-tabs-con { margin:-5px 0 11px 12px; padding-left:10px; gap:4px; border-left:2px solid var(--border-faint); } .bang-tabs-con .bang-tab { font-size:11.5px; padding:5px 8px; min-width:0; } .bang-dong { font-weight:400; font-size:12.5px; color:var(--text-dim); margin-left:8px; letter-spacing:0; } /* Túi đồ dạng lưới có hình */ .bag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:8px; margin-top:8px; } .bag-cell { position:relative; aspect-ratio:1; border-radius:var(--r-md); cursor:pointer; background:var(--cell); border:1px solid var(--border-faint); display:flex; align-items:center; justify-content:center; flex-direction:column; } .bag-cell:hover { background:var(--cell-hover); } .bag-cell img { width:78%; height:78%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .bag-cell .bc-plus, .bag-mon .bc-plus { position:absolute; top:2px; right:5px; font-size:var(--fs-xs); color:var(--accent-light); text-shadow:0 1px 2px #000; font-weight:700; } .bag-cell .bc-name { position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:9px; color:var(--text-body); text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; } .bag-cell.sel { border-color:var(--accent-light); box-shadow:0 0 10px rgba(var(--rgb-vang),.45); } .bag-cell.giai-1 { border-color:rgba(185,194,230,.5); } .bag-cell.giai-2 { border-color:rgba(95,201,110,.65); } .bag-cell.giai-3 { border-color:rgba(94,160,232,.7); } .bag-cell.giai-4 { border-color:rgba(126,203,255,.72); } .bag-cell.giai-5 { border-color:rgba(177,140,255,.75); } .bag-cell.giai-6 { border-color:rgba(255,177,92,.85); } .bag-cell.giai-7 { border-color:rgba(255,107,107,.95); } .mat-row { display:flex; align-items:center; gap:10px; padding:5px 2px; font-size:12.5px; border-bottom:1px dashed var(--border-faint); } .mat-row img { width:30px; height:30px; object-fit:contain; } /* Vật liệu quý / tiền tệ dạng lưới icon có hình + số + tooltip (thay cho list chữ dài) */ .mat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:7px; margin:6px 0 4px; } .mat-cell { position:relative; aspect-ratio:1; border-radius:var(--r-md); cursor:default; background:var(--cell); border:1px solid var(--border-faint); display:flex; align-items:center; justify-content:center; transition:background .12s,border-color .12s; } .mat-cell:hover { background:var(--cell-hover); border-color:rgba(var(--rgb-vang),.55); } .mat-cell img { width:70%; height:70%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); } .mat-cell .mc-glyph { font-size:var(--fs-xl); pointer-events:none; } .mat-cell .mc-count { position:absolute; bottom:1px; right:3px; font-size:var(--fs-xs); font-weight:700; text-shadow:0 1px 2px #000; pointer-events:none; } .slot-icon { width:34px; height:34px; object-fit:contain; margin-right:8px; vertical-align:middle; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); } .slot-row .s-name { display:flex; align-items:center; } /* Panel Bản Đồ */ .map-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; margin:6px 0; background:var(--cell); border-radius:var(--r-sm); border:1px solid var(--border-faint); font-size:12.5px; } .map-row .m-name { font-size:14px; color:var(--accent-light); letter-spacing:.5px; font-weight:700; } .map-row .m-desc { font-size:var(--fs-sm); opacity:.75; margin-top:3px; line-height:1.5; } .map-row .m-side { text-align:right; min-width:110px; } .zone-badge { display:inline-block; font-size:10.5px; padding:2px 9px; border-radius:999px; border:1px solid; } /* Panel Kỹ Năng */ .skill-row { display:flex; align-items:center; gap:8px; padding:5px 6px; margin:3px 0; background:var(--cell); border:1px solid var(--border-faint); border-radius:var(--r-sm); } .skill-row img, .skill-row .sk-glyph { width:34px; height:34px; border-radius:var(--r-sm); object-fit:cover; background:rgba(var(--rgb-da),.8); border:1px solid var(--border-faint); text-align:center; line-height:32px; font-size:var(--fs-xl); flex:none; } .skill-row .sk-info { flex:1; font-size:var(--fs-md); min-width:0; } .skill-row .sk-info .sk-desc { font-size:10.5px; opacity:.7; margin-top:1px; line-height:1.35; } /* ── Định Hình Chimera: thanh cấp, bốn ô Cốt, kho Cốt ── */ .chi-nuoi { background:var(--cell); border:1px solid var(--border-faint); border-radius:var(--r-sm); padding:10px 12px; margin:4px 0 8px; } .chi-lvhang { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13.5px; } .chi-tran { font-size:var(--fs-sm); color:var(--text-dim); } .chi-dat { margin-left:auto; font-size:11.5px; color:var(--mint); } .chi-thanh { height:7px; background:rgba(10,12,28,.75); border-radius:999px; overflow:hidden; margin:6px 0 4px; border:1px solid var(--border-faint); } .chi-thanh i { display:block; height:100%; border-radius:999px; transition:width 180ms ease-out; } .chi-lvphu { font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; } .cot-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:6px; } .cot-o { background:var(--cell); border:1px solid var(--border-faint); border-radius:var(--r-sm); padding:9px 10px; font-size:11.5px; display:flex; flex-direction:column; gap:2px; } .cot-o.trong { opacity:.5; } .cot-o > b { font-size:12.5px; } .cot-o > span { font-size:10.5px; } .cot-o > i { font-size:10.5px; color:var(--text-dimmer); font-style:normal; } .cot-glyph { font-size:17px; line-height:1; } .cot-chinh { margin-top:3px; font-size:11.5px; color:var(--text-bright); } .cot-phu { font-size:10.5px; color:var(--text-dim); } .cot-o .mini-btn { margin-top:6px; align-self:flex-start; font-size:10.5px; padding:2px 9px; } .cot-bo { margin-top:6px; font-size:11.5px; line-height:1.5; color:var(--gold); border-left:2px solid var(--gold); padding-left:9px; } /* Hộp thoại nhiều trang — lần gặp đầu của bảy người dẫn chương */ .npc-trang { font-size:14px; line-height:1.75; color:var(--text-bright); padding:4px 2px 12px; min-height:96px; } .npc-nhac { font-size:var(--fs-md); line-height:1.6; color:var(--orange); font-style:italic; border-left:2px solid var(--border); padding:0 0 10px 10px; margin-bottom:4px; } .npc-trang-nav { display:flex; align-items:center; gap:8px; justify-content:flex-end; border-top:1px solid var(--border-faint); padding-top:10px; flex-wrap:wrap; } .npc-trang-so { margin-right:auto; font-size:var(--fs-sm); color:var(--text-dimmer); font-variant-numeric:tabular-nums; } /* Ô Chimera — DẢI 16 khung nhịp thở xếp 8 cột × 2 hàng, không phải một tấm ảnh. Chạy bằng hai animation steps() lồng nhau: một cái nhảy cột trong 0,889s, một cái nhảy hàng ở nhịp chậm gấp đôi, nên hết một vòng cột là sang hàng — đúng 16 khung trong 1,778s, khớp CHI_THO_FPS = 9. --w/--h do chiO34() ghi vào thẻ vì mỗi con một tỉ lệ ô riêng. */ .skill-row i.chi-anh { display:block; flex:0 0 auto; width:var(--w); height:var(--h); border:2px solid; border-radius:var(--r-sm); background:rgba(18,20,44,.9) var(--sh) no-repeat 0 0; background-size:calc(var(--w) * 8) calc(var(--h) * 2); animation:chi-tho-x .889s steps(8) infinite, chi-tho-y 1.778s steps(2) infinite; } @keyframes chi-tho-x { from { background-position-x:0 } to { background-position-x:calc(var(--w) * -8) } } @keyframes chi-tho-y { from { background-position-y:0 } to { background-position-y:calc(var(--h) * -2) } } @media (prefers-reduced-motion: reduce) { .skill-row i.chi-anh { animation:none } } /* Huy hiệu lớp Axie chính chủ — dải 9 ô 48px, thứ tự khớp LOP_DAI trong game.js. */ .lop-hd { display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:3px; background:url(assets/ui/lop.webp) no-repeat; background-size:calc(13px * 9) 13px; background-position:calc(var(--i) * -13px) 0; } .skill-row .assign-btns { display:flex; gap:3px; } .skill-row .assign-btns button { width:24px; height:24px; font-size:var(--fs-sm); padding:0; margin:0; } .skill-row.locked { opacity:.5; } /* NPC ảnh trong game vẽ bằng canvas — CSS cho dialog */ .npc-shop-row { display:flex; justify-content:space-between; align-items:center; padding:7px 4px; border-bottom:1px dashed var(--border-faint); font-size:12.5px; } /* ── TIỆM ── hàng bày là MÓN THẬT: icon, viền theo phẩm, giá, rê chuột ra đủ chỉ số */ .shop-quote { font-size:12.5px; color:var(--text-dim); line-height:1.6; margin-bottom:6px; } .shop-purse { font-size:11.5px; color:var(--text-dim); margin-bottom:8px; padding:4px 8px; background:rgba(0,0,10,.3); border-radius:var(--r-sm); border:1px solid var(--border-faint); } .shop-purse b { color:var(--gold); } .shop-hint { font-size:var(--fs-sm); color:var(--text-dimmer); margin:2px 0 6px; } .shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:8px; margin-bottom:4px; } .shop-cell { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px 6px; border-radius:var(--r-md); background:var(--cell); border:1px solid var(--border-faint); transition:background .12s,border-color .12s; } .shop-cell:hover { background:var(--cell-hover); } .shop-cell.locked { opacity:.55; } .shop-cell.giai-1 { border-color:rgba(185,194,230,.5); } .shop-cell.giai-2 { border-color:rgba(95,201,110,.65); } .shop-cell.giai-3 { border-color:rgba(94,160,232,.7); } .shop-cell.giai-4 { border-color:rgba(126,203,255,.72); } .shop-cell.giai-5 { border-color:rgba(177,140,255,.75); } .shop-cell.giai-6 { border-color:rgba(255,177,92,.85); } .shop-cell.giai-7 { border-color:rgba(255,107,107,.95); } .shop-cell .sc-ic { position:relative; width:54px; height:54px; display:flex; align-items:center; justify-content:center; } .shop-cell .sc-ic img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); } .shop-cell .sc-name { font-size:10.5px; font-weight:700; text-align:center; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .shop-cell .sc-meta { font-size:9.5px; color:#b6a791; text-align:center; } .shop-cell .sc-meta b { color:#f2e9dc; } .shop-cell .sc-buy { width:100%; margin-top:2px; padding:4px 0; font-size:var(--fs-sm); font-weight:700; cursor:pointer; border-radius:var(--r-sm); color:#ffe9a8; background:rgba(255,177,92,.14); border:1px solid rgba(255,177,92,.5); } .shop-cell .sc-buy:hover { background:rgba(255,177,92,.26); } .shop-cell .sc-buy.off { color:#7a7a86; background:rgba(60,60,70,.3); border-color:rgba(120,120,135,.3); cursor:not-allowed; } .shop-cell.sold { align-items:center; justify-content:center; min-height:118px; border-style:dashed; border-color:rgba(120,120,135,.28); background:rgba(0,0,10,.22); } .shop-cell .sc-sold { font-size:var(--fs-sm); color:#6a6a78; letter-spacing:1px; } .shop-row { display:flex; align-items:center; gap:9px; padding:7px 4px; border-bottom:1px dashed var(--border-faint); font-size:12.5px; } .shop-row.rare { border-color:rgba(176,138,232,.55); } .shop-row .sr-ic { flex:0 0 26px; width:26px; text-align:center; font-size:var(--fs-xl); } .shop-row .sr-ic .sr-img { width:26px; height:26px; object-fit:contain; margin:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); } /* Icon vật phẩm tiêu hao vẽ bằng canvas — dùng chung ở tiệm, túi đồ, bảng kỹ năng */ .consum-ic { width:34px; height:34px; object-fit:contain; flex:0 0 34px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); } .consum-ic.sm { width:24px; height:24px; flex:0 0 24px; } /* Ngăn Ngọc — mỗi loại một hàng: túi ⇄ kho, gửi/rút */ .ngoc-grid { display:flex; flex-direction:column; gap:3px; margin-top:4px; } .ngoc-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:var(--r-sm); background:var(--cell); border:1px solid var(--border-faint); } .ngoc-row .ng-name { flex:1; font-size:var(--fs-md); font-weight:700; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ngoc-row .ng-num { font-size:var(--fs-sm); color:#b6a791; white-space:nowrap; font-variant-numeric:tabular-nums; } .ngoc-row .ng-num b { color:#f2e9dc; } .ngoc-row .mini-btn { padding:2px 8px; font-size:var(--fs-md); } .shop-row .sr-body { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; } .shop-row .sr-desc { font-size:var(--fs-sm); opacity:.7; line-height:1.4; } .shop-row .sr-stat { font-size:var(--fs-sm); color:#d2b68d; line-height:1.4; } /* Đập Ngọc — khe ngọc trong bảng rèn */ .gem-socket { display:flex; gap:10px; align-items:center; margin:8px 0; padding:8px 10px; background:rgba(0,0,10,.35); border:1px solid rgba(255,143,207,.35); border-radius:var(--r-md); } .gem-socket img { width:40px; height:40px; flex:0 0 40px; image-rendering:auto; filter:drop-shadow(0 0 6px rgba(255,143,207,.5)); } /* Lò Hỗn Độn — danh sách trang bị Phá Thiên Kiếp */ /* ── Cốt truyện dẫn nhập ── */ #intro-story { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px 0; background:radial-gradient(ellipse at 50% 40%, rgba(84,68,46,.34) 0%, rgba(53,41,25,.62) 55%, rgba(8,9,22,.86) 100%); } #intro-story.hidden { display:none; } .is-inner { max-width:640px; width:92%; margin:auto; } .is-frame { border:1px solid rgba(var(--rgb-vang),.4); border-radius:var(--r-lg); padding:38px 44px; background:linear-gradient(160deg, rgba(84,68,46,.92), rgba(48,38,24,.95)); box-shadow:0 0 60px rgba(var(--rgb-vang),.12), inset 0 0 40px rgba(0,0,0,.4); } .is-page { font-family:'Be Vietnam Pro', sans-serif; font-size:17px; line-height:2.05; color:var(--text-body); min-height:240px; animation:isFade .9s ease; white-space:pre-line; } .is-page b { color:var(--accent-light); } .is-page .is-title { font-family:var(--font-display); font-weight:700; display:block; text-align:center; font-size:26px; color:var(--accent-light); letter-spacing:1px; margin-bottom:18px; } .is-page i { color:var(--text-dim); } @keyframes isFade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } .is-nav { display:flex; justify-content:space-between; align-items:center; margin-top:22px; } .is-skip { background:none; border:none; color:var(--text-dimmer); cursor:pointer; font-size:var(--fs-lg); font-family:inherit; } .is-skip:hover { color:#eaddca; } /* ── Hướng dẫn tân thủ ── */ #tut-hint { position:fixed; left:50%; bottom:118px; transform:translateX(-50%); z-index:15; /* dưới .panel (20): thẻ hướng dẫn từng vẽ đè lên bảng Chọn Trận, Đại Thành, Sự Kiện */ max-width:480px; padding:10px 16px; border-radius:var(--r-md); font-size:13.5px; line-height:1.6; color:var(--text-bright); background:rgba(50,41,28,.92); border:1px solid var(--accent); box-shadow:0 4px 18px rgba(0,0,0,.5), 0 0 14px rgba(var(--rgb-vang),.25); } #tut-hint.hidden { display:none; } #tut-hint b { color:var(--gold); } #tut-hint .tut-x { float:right; margin-left:12px; cursor:pointer; color:var(--text-dimmer); font-size:var(--fs-md); } #tut-hint .tut-x:hover { color:var(--accent-light); } #tut-hint .tut-step { display:block; font-size:var(--fs-sm); color:var(--accent); letter-spacing:2px; margin-bottom:2px; } @media (max-width:720px){ .bag-grid { grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); } .bang-tab { min-width:60px; font-size:var(--fs-sm); padding:6px 7px; } /* Stack hud-map below hud-left/hud-right instead of centering it between them — at this width there's no horizontal room for 3 top-bar columns side by side (this is the LAST #hud-map rule in the file so it's the one that actually wins the cascade). */ #hud-map { position:absolute; top:172px; left:50%; transform:translateX(-50%); max-width:90vw; font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #tut-hint { max-width:88vw; bottom:175px; font-size:12.5px; } .is-frame { padding:24px 20px; } } /* Danh hiệu picker */ .title-row { transition: background .15s, transform .15s; } .title-row:hover { background: rgba(var(--rgb-vang),.16) !important; transform: translateX(2px); } .title-row.equipped { box-shadow: 0 0 10px rgba(var(--rgb-vang),.3) inset; } /* ── Minimap — trong luồng cột phải, kèm nút ẩn/hiện ── */ /* ── CỘT PHẢI: bản đồ nhỏ + hàng nút + bảng nhiệm vụ, MỘT tấm ────────────────────────── Cùng bảng màu với khung chân dung và thanh chiến đấu, nên ba khối HUD đọc ra là một bộ chứ không phải ba thứ nhặt từ ba chỗ. */ #cot-phai { pointer-events:auto; margin-top:5px; width:190px; padding:5px; border-radius:9px; display:flex; flex-direction:column; gap:5px; background:linear-gradient(180deg, rgba(42,34,24,.86), rgba(15,12,8,.93)); border:1px solid rgba(198,158,74,.42); box-shadow:0 6px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,231,180,.10); } #minimap-wrap { position:relative; line-height:0; } /* Canvas giữ nguyên 200×146 điểm ảnh THẬT, chỉ thu bằng CSS — nên bản đồ nhỏ lại mà còn NÉT HƠN trước (nhiều điểm ảnh hơn trên cùng một diện tích), không phải mờ đi. */ #minimap { display:block; width:180px; height:131px; border-radius:6px; background:rgba(8,6,4,.86); border:1px solid rgba(0,0,0,.6); box-shadow:inset 0 0 0 1px rgba(198,158,74,.35); pointer-events:auto; cursor:pointer; } #mm-nut { display:flex; gap:4px; } .cp-nut { flex:1; min-width:0; cursor:pointer; pointer-events:auto; font-family:inherit; font-size:9.5px; line-height:1.4; padding:3px 1px; border-radius:5px; white-space:nowrap; color:#f0dcb0; background:linear-gradient(180deg, rgba(70,57,38,.95), rgba(28,22,14,.95)); border:1px solid rgba(198,158,74,.45); box-shadow:inset 0 1px 0 rgba(255,231,180,.12), 0 1px 3px rgba(0,0,0,.5); } .cp-nut:hover { background:linear-gradient(180deg, rgba(96,78,50,.95), rgba(44,35,21,.95)); border-color:var(--gold); color:#fff3d4; } .cp-nut:active { transform:translateY(1px); } /* Bản đồ đang ẩn: nút đổi CHỮ chứ không chỉ mờ đi. Mờ đi thì nó đọc ra "nút này hỏng"; đổi chữ mới nói được đây là một công tắc và nó đang ở nấc nào. Chữ do JS ghi (drawMinimap). */ #btn-minimap.off { color:var(--text-dimmer); border-color:var(--border-faint); } /* ── Cài đặt ── */ .set-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 2px; border-bottom:1px dashed var(--border-faint); font-size:var(--fs-lg); } .set-row b { color:var(--accent-light); min-width:26px; text-align:right; } .set-row input[type=range] { flex:1; accent-color:var(--accent); height:4px; cursor:pointer; } /* .danger CHỈ dành cho nút phá huỷ (xoá save). Trạng thái TẮT của công tắc dùng .tat — trước đây cả hai chung một class, nên nút "TẮT" của mọi cài đặt trông y hệt nút xoá dữ liệu. */ .mini-btn.danger { border-color:var(--red); color:#ff8f8f; } .mini-btn.danger:hover { background:rgba(255,107,107,.25); } .mini-btn.tat { background:rgba(var(--rgb-da),.7); border-color:var(--border-faint); color:var(--text-dimmer); } .mini-btn.tat:hover { background:rgba(var(--rgb-vang),.12); color:var(--text-dim); } /* ── BẢNG HƯỚNG DẪN (F6) ───────────────────────────────────────────────────── Rộng hơn bảng thường (520px) vì nội dung là HAI CỘT chữ, không phải một danh sách dọc: ép vào 520px thì mỗi dòng xuống hàng giữa chừng và bảng dài gấp đôi màn hình. Dưới 760px màn hình thì lưới tự về một cột — đó là việc của auto-fill, không phải của một điểm ngắt chép tay. */ #panel-help { width:min(720px,94vw); } .hd-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1px 18px; } /* ⚠ LƯỚI, KHÔNG PHẢI FLEX. Con tem phím rộng theo chữ của nó ('R' hẹp, 'Chuột phải' rộng gấp ba), nên xếp bằng flex thì mô tả mỗi dòng bắt đầu ở một chỗ khác nhau — mắt mất hẳn cái mép thẳng để trượt dọc, mà cả bảng này sinh ra là để quét mắt. Ô CỐ ĐỊNH thì mép chữ thẳng hàng trong khi con tem vẫn ôm sát chữ của nó. */ .hd-hang { display:grid; grid-template-columns:88px 1fr; align-items:baseline; gap:9px; padding:5px 2px; border-bottom:1px dashed var(--border-faint); font-size:var(--fs-md); color:var(--text-body); } /* Mặt phím phải ĐỌC RA LÀ MỘT CÁI PHÍM, không phải một chữ in đậm. Cả bảng này là để người chơi quét mắt tìm phím, nên cột trái phải bắt mắt trước cột phải — rộng cố định để mọi mô tả thẳng hàng, chứ hàng chữ gãy so le thì mắt phải đọc từng dòng một. */ .hd-phim { justify-self:start; text-align:center; white-space:nowrap; font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; line-height:1.5; padding:1px 7px; border-radius:5px; color:#f3e3bb; background:linear-gradient(180deg, rgba(70,57,38,.95), rgba(30,24,15,.95)); border:1px solid rgba(198,158,74,.55); box-shadow:0 1px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,231,180,.14); } /* ---------- P1: nhiệm vụ theo vùng ---------- */ .map-locked { border-style: dashed !important; opacity: .8; background: rgba(0,0,10,.15); } .ql-ch { font-family:var(--font-display); font-weight:700; color:var(--accent-light); margin:10px 0 4px; padding-top:8px; border-top:1px dashed rgba(var(--rgb-vang),.35); font-size:14px; } .ql-row { font-size:12.5px; padding:3px 2px; line-height:1.5; color:var(--text-soft); } .ql-cur { background:rgba(var(--rgb-vang),.14); border-radius:var(--r-sm); padding:4px 6px; } .q-side { margin-top:6px; padding-top:4px; border-top:1px dashed rgba(var(--rgb-vang),.25); font-size:var(--fs-sm); } /* ═══════════ THẺ TIÊN DUYÊN ═══════════ */ /* KHÔNG dùng align-items:center ở đây. Kèm overflow:auto thì phần nội dung tràn ra PHÍA TRÊN nằm ngoài vùng cuộn và vĩnh viễn không tới được — đo được: phần tử con top = -184px ở 1366×768 và -434px ở 390×844, tiêu đề "Thẻ Tiên Duyên" cùng đoạn hướng dẫn chọn 3 thẻ đều không cách nào đọc được. margin:auto trên phần tử con canh giữa mà vẫn cuộn được cả hai đầu. */ /* trait list trong panel Nhân vật */ .trait-row { display:flex; align-items:center; gap:8px; padding:5px 4px; border-bottom:1px dashed var(--border-faint); font-size:12.5px; } .trait-row .t-glyph { font-size:var(--fs-xl); } .trait-row .t-name { font-weight:700; letter-spacing:.5px; } .trait-row .t-desc { opacity:.7; font-size:var(--fs-sm); margin-left:auto; text-align:right; } /* ── Sổ Kỹ Năng ── */ .vh-learn-btn{ border-color:var(--gold) !important; color:var(--gold) !important; font-weight:bold; } .vh-learn-btn:disabled{ border-color:#766c5e !important; color:#766c5e !important; } /* ── Thẻ Tiên Duyên: 16 thẻ úp, lật cùng lúc & chọn 3 (MU-Axie: viền/hào quang vàng thay cho xanh-lam của bản trước, đọc gần với gem/Wing MU hơn) ── */ /* Lật cả bàn cùng lúc: mỗi thẻ nhận animation-delay riêng (đặt qua JS theo chỉ số) để tạo hiệu ứng một làn sóng lật liên tiếp thay vì bật hiện tức thì cả 16 ô cùng lúc — dễ nhìn & giống MU hơn. */ /* Đặt tên nhân vật — màn Quẻ Tiên Thiên */ .char-name{ color:var(--accent-light); font-weight:700; } /* GDD Đợt 2 B3: Nhắc Việc Bấm Ngay */ #hint-toast{ position:fixed; right:14px; bottom:132px; z-index:35; max-width:300px; background:rgba(20,22,46,.93); border:1px solid rgba(var(--rgb-vang),.55); border-radius:var(--r-md); padding:10px 12px; font-size:12.5px; color:var(--text-body); line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,.5); } #hint-toast .hint-btn{ margin-top:8px; background:linear-gradient(180deg,#d2b388,#c0965a); border:none; color:#fff; font-weight:700; border-radius:999px; padding:6px 16px; font-size:12.5px; cursor:pointer; } #hint-toast .hint-btn:hover{ filter:brightness(1.15); } @media (max-width:720px){ /* Must come after the base #hint-toast rule above to actually win the cascade — a same-specificity rule earlier in the file (inside the other @media block) loses to this. */ #hint-toast { bottom:350px; right:8px; left:8px; max-width:none; } } /* GDD Đợt 2 B2: nút Tới Ngay trong tracker (hud cha đang pointer-events:none) */ #quest-tracker{ pointer-events:auto; } /* Banner "đích khác vùng" — bấm thẳng để dịch chuyển, khỏi cần biết phím M */ /* z-index PHẢI thấp hơn .panel (20): banner nổi ở top:96px, còn bảng bắt đầu từ top:54px, nên ở 36 nó nằm đè đúng hàng tab — "Rèn Luyện · Thú Chiến · Tẩy Tủy · Tấn Chức" vừa không nhìn thấy vừa không bấm được. */ #quest-compass-banner{ position:fixed; top:96px; left:50%; transform:translateX(-50%); z-index:15; max-width:min(90vw,460px); background:rgba(20,25,40,.85); border:1px solid rgba(var(--rgb-vang),.6); border-radius:999px; padding:6px 8px 6px 16px; font-size:12.5px; color:var(--accent-light); display:flex; align-items:center; gap:10px; box-shadow:0 6px 18px rgba(0,0,0,.5); white-space:nowrap; } #quest-compass-banner span{ overflow:hidden; text-overflow:ellipsis; } #quest-compass-banner button{ background:linear-gradient(180deg,#d2b388,#c0965a); border:none; color:#fff; font-weight:700; border-radius:999px; padding:5px 14px; font-size:var(--fs-md); cursor:pointer; flex:none; } #quest-compass-banner button:hover{ filter:brightness(1.15); } @media (max-width:720px){ #quest-compass-banner{ top:132px; max-width:94vw; } } /* ═══════════ LÒ HỖN ĐỘN — cỗ máy kết hợp (thay bảng rèn chữ cũ) ═══════════ */ .chaos-bank { display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:11.5px; color:#efe4d5; padding:7px 10px; margin-bottom:9px; background:rgba(10,14,28,.55); border:1px solid var(--border); border-radius:var(--r-md); } .chaos-bank span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; } .chaos-sec { font-size:10.5px; letter-spacing:1.1px; font-weight:700; color:#ceb899; text-transform:uppercase; margin:10px 0 5px; padding-bottom:3px; border-bottom:1px solid var(--border); } .chaos-sub { float:right; font-weight:400; letter-spacing:0; text-transform:none; opacity:.6; font-size:10.5px; } /* khay: lưới 5×2 kiểu ô đặt đồ */ .chaos-tray { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:7px; max-width:308px; margin:0 auto; background:radial-gradient(circle at 50% 0%,rgba(var(--rgb-vang),.10),rgba(6,9,20,.72)); border:1px solid rgba(var(--rgb-vang),.30); border-radius:var(--r-md); } .chaos-cell { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.028); border:1px solid var(--border); border-radius:5px; } .chaos-cell.full { cursor:pointer; background:rgba(var(--rgb-vang),.10); border-color:rgba(var(--rgb-vang),.45); } .chaos-cell.full:hover { background:rgba(255,107,107,.16); border-color:#ff8f6b; } .chaos-cell.bag { cursor:pointer; } .chaos-cell.bag:hover { background:rgba(var(--rgb-vang),.14); border-color:rgba(var(--rgb-vang),.55); } .chaos-cell.bag.on { background:rgba(var(--rgb-vang),.24); border-color:var(--tab-on-1); box-shadow:0 0 0 1px rgba(143,208,255,.4) inset; } .chaos-ic { width:82%; height:82%; object-fit:contain; } .chaos-plus { position:absolute; right:2px; bottom:1px; font-size:9.5px; color:#ffe9a8; text-shadow:0 1px 2px #000; pointer-events:none; } .chaos-gem { font-size:19px; line-height:1; text-shadow:0 0 8px currentColor; } .chaos-tray-bar { display:flex; justify-content:space-between; align-items:center; max-width:308px; margin:5px auto 0; } .chaos-jewels { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; max-width:308px; margin:7px auto 0; } .chaos-jw { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; font-size:var(--fs-sm); color:#efe4d5; cursor:pointer; background:rgba(255,255,255,.03); border:1px solid var(--jc,#dcc4a1); border-radius:var(--r-md); opacity:.9; } .chaos-jw:hover:not(:disabled) { background:color-mix(in srgb,var(--jc) 16%,transparent); } .chaos-jw:disabled { opacity:.28; cursor:not-allowed; } /* danh sách công thức + chi tiết */ .chaos-reclist { display:flex; flex-wrap:wrap; gap:5px; } .chaos-rec { display:flex; align-items:center; gap:6px; padding:6px 10px; font-size:var(--fs-md); cursor:pointer; color:#efe4d5; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--r-md); } .chaos-rec:hover { border-color:rgba(var(--rgb-vang),.6); } .chaos-rec.on { background:rgba(var(--rgb-vang),.16); border-color:var(--tab-on-1); color:#eaf3ff; } .chaos-rec.dim { opacity:.5; } .chaos-rec em { font-style:normal; font-weight:700; font-size:var(--fs-sm); } .chaos-detail { margin-top:9px; padding:10px 12px; background:rgba(10,14,28,.5); border:1px solid rgba(var(--rgb-vang),.28); border-radius:var(--r-md); } .chaos-title { font-size:var(--fs-lg); font-weight:700; color:#eaf3ff; margin-bottom:3px; } .chaos-rate { font-size:12.5px; margin-bottom:8px; } .chaos-costs { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; } .chaos-cost { display:flex; justify-content:space-between; gap:10px; font-size:11.5px; padding:3px 7px; background:rgba(255,255,255,.028); border-radius:4px; color:#eadfce; } .chaos-cost b { color:#8fd18f; font-weight:600; white-space:nowrap; } .chaos-cost.bad { background:rgba(255,90,74,.10); } .chaos-cost.bad b { color:#ff8f7a; } .chaos-warn { font-size:11.5px; line-height:1.55; color:#e8c88a; padding:6px 9px; margin-bottom:8px; background:rgba(232,176,74,.08); border-left:2px solid rgba(232,176,74,.6); border-radius:0 4px 4px 0; } .chaos-warn.danger { color:#ff9a8a; background:rgba(255,58,58,.10); border-left-color:#ff5a4a; } .chaos-warn.royal { color:#9fd0ff; background:rgba(var(--rgb-vang),.09); border-left-color:var(--accent-light); } .chaos-charm { display:block; font-size:11.5px; color:#e5d3b9; cursor:pointer; margin-bottom:8px; } .chaos-go { width:100%; padding:11px; font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:1.2px; cursor:pointer; color:var(--on-light); border:none; border-radius:var(--r-md); background:linear-gradient(180deg,#ffd98a,#e8a83a); box-shadow:0 2px 0 #a8761f, 0 0 18px rgba(255,200,90,.25); } .chaos-go:hover:not(:disabled) { background:linear-gradient(180deg,#ffe6a8,#f0b850); } .chaos-go:active:not(:disabled) { transform:translateY(2px); box-shadow:0 0 0 #a8761f; } .chaos-go:disabled { cursor:not-allowed; color:#a79c8b; background:rgba(255,255,255,.06); box-shadow:none; } .chaos-msg { min-height:17px; margin-top:7px; font-size:var(--fs-md); text-align:center; } .chaos-setpick { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; } .chaos-empty { padding:10px; font-size:var(--fs-md); line-height:1.6; color:#c4b39b; background:rgba(255,255,255,.025); border:1px dashed var(--border); border-radius:var(--r-md); } .chaos-bag { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; max-height:148px; overflow-y:auto; padding:7px; background:rgba(6,9,20,.5); border:1px solid var(--border); border-radius:var(--r-md); } /* ── Túi đồ: hàng nút trên cùng + chú giải + ô đồ ─────────────────────────── */ /* ══════════ TÚI ĐỒ DẠNG LƯỚI — mỗi món chiếm một khối ô ══════════════════════════════ Hai lớp CHỒNG KHÍT: `.bag-nen` là mặt lưới ô trống, `.bag-mon-lop` nằm đè lên, cùng một grid-template nên hai lớp tự canh nhau — không phải tính một toạ độ pixel nào. Món đồ dùng grid-column/row span để chiếm đúng khối ô của nó. */ .bag-luoi { position:relative; margin-top:8px; } .bag-nen, .bag-mon-lop { display:grid; gap:3px; grid-template-columns:repeat(var(--cols), 1fr); grid-template-rows:repeat(var(--rows), 1fr); } .bag-nen .bag-o { aspect-ratio:1; border-radius:var(--r-sm); background:rgba(18,20,44,.55); border:1px solid var(--border-faint); box-shadow:inset 0 1px 0 rgba(226,235,255,.05); } .bag-mon-lop { position:absolute; inset:0; pointer-events:none; } .bag-mon { position:relative; pointer-events:auto; cursor:pointer; border-radius:var(--r-sm); border:1px solid var(--border); background:rgba(var(--rgb-da),.9); overflow:visible; display:flex; align-items:center; justify-content:center; transition:background .14s ease-out, border-color .14s ease-out, transform .14s ease-out; } .bag-mon:hover { background:rgba(var(--rgb-vang),.24); border-color:var(--border-strong); z-index:2; } .bag-mon img { width:84%; height:84%; object-fit:contain; pointer-events:none; } .bag-mon.giai-1 { border-color:rgba(185,194,230,.5); } .bag-mon.giai-2 { border-color:rgba(95,201,110,.65); } .bag-mon.giai-3 { border-color:rgba(94,160,232,.7); } .bag-mon.giai-4 { border-color:rgba(126,203,255,.72); } .bag-mon.giai-5 { border-color:rgba(177,140,255,.75); } .bag-mon.giai-6 { border-color:rgba(255,177,92,.85); } .bag-mon.giai-7 { border-color:rgba(255,107,107,.95); } /* Ô CON TRONG KHỐI MÓN — cái làm túi MU khác một danh sách có ảnh. Người chơi MU đọc món đồ bằng SỐ Ô nó ăn: cái nón là bốn ô, cây trượng là sáu, đôi cánh là sáu nằm ngang. Nếu khối chỉ là một hình chữ nhật trơn thì thông tin đó biến mất — mắt chỉ thấy "một món to". Nên vẽ lại đúng những đường chia bên trong khối. Lưới con dùng CÙNG gap 3px với .bag-nen, nên các đường chia nằm khít mạch nền: kéo món đi chỗ khác thì khối vẫn ăn khớp từng ô một, không lệch nửa mạch. */ .bag-mon .bc-luoi { position:absolute; inset:0; display:grid; gap:3px; pointer-events:none; grid-template-columns:repeat(var(--w), 1fr); grid-template-rows:repeat(var(--h), 1fr); } .bag-mon .bc-luoi u { border:1px solid rgba(var(--rgb-dong),.16); border-radius:var(--r-sm); box-shadow:inset 0 1px 0 rgba(226,235,255,.04); } .bag-mon:hover .bc-luoi u { border-color:rgba(var(--rgb-dong),.3); } /* Giá ngọc: cầm một viên rồi bấm thẳng vào món — thao tác của MU */ .ngoc-bar { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:7px 0 2px; padding:6px 8px; border:1px solid var(--border-faint); border-radius:var(--r-sm); background:rgba(18,20,44,.5); } .ngoc-nut { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit; padding:4px 11px 5px; border-radius:999px; color:var(--text-bright); background:rgba(var(--rgb-da),.9); border:1px solid var(--nc); transition:background .14s ease-out, box-shadow .14s ease-out; } .ngoc-nut:hover:not(:disabled) { background:color-mix(in srgb, var(--nc) 22%, transparent); } .ngoc-nut.on { background:color-mix(in srgb, var(--nc) 30%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--nc) 45%, transparent), 0 0 14px color-mix(in srgb, var(--nc) 40%, transparent); } .ngoc-nut:disabled { opacity:1; color:var(--text-dimmer); border-color:var(--border-faint); cursor:default; } .ngoc-nut .ngoc-vien { font-size:var(--fs-lg); line-height:1; } .ngoc-nut b { font-variant-numeric:tabular-nums; } .ngoc-huong { flex:1; min-width:180px; text-align:right; font-style:normal; font-size:11px; color:var(--text-dim); } /* Đang cầm ngọc: món ép được thì sáng lên, món không ép được thì mờ đi — người chơi thấy ngay chỗ nào bấm có nghĩa, khỏi phải bấm thử từng cái rồi đọc câu từ chối. */ .bag-mon.ngoc-nhan { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 12px rgba(255,215,106,.4); } .bag-mon.ngoc-chan { opacity:.35; filter:grayscale(.6); cursor:not-allowed; } .bag-mon.vua-ep { animation:ngoc-nhay .6s ease-out; } .bag-mon.vua-xit { animation:ngoc-rung .5s ease-out; } @keyframes ngoc-nhay { 0% { box-shadow:0 0 0 3px #fff, 0 0 30px #fff; transform:scale(1.1); } 40% { box-shadow:0 0 0 2px var(--gold), 0 0 20px rgba(255,215,106,.7); transform:scale(1.03); } 100% { box-shadow:none; transform:scale(1); } } @keyframes ngoc-rung { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-4px); } 45% { transform:translateX(4px); } 70% { transform:translateX(-2px); } } /* Lớp phủ hoạt ảnh ép ngọc — nằm ngoài bảng Túi Đồ nên bảng vẽ lại cũng không cắt ngang nó */ #ngoc-fx { position:fixed; inset:0; z-index:9000; pointer-events:none; } #ngoc-fx i { position:absolute; display:block; } .ngoc-bay { font-size:26px; line-height:1; text-shadow:0 0 12px currentColor; transform:translate(-50%,-50%); } .ngoc-no { width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:3px solid var(--nc); animation:ngoc-no .55s ease-out forwards; } .ngoc-loe { border-radius:var(--r-sm); animation:ngoc-loe .6s ease-out forwards; } @keyframes ngoc-loe { 0% { background:#fff; box-shadow:0 0 34px 12px var(--nc), inset 0 0 20px #fff; opacity:1; transform:scale(1.14); } 30% { background:color-mix(in srgb, var(--nc) 70%, #fff); box-shadow:0 0 24px 6px var(--nc); opacity:.85; transform:scale(1.06); } 100% { background:transparent; box-shadow:0 0 0 0 var(--nc); opacity:0; transform:scale(1); } } @keyframes ngoc-no { 0% { transform:scale(.3); opacity:1; box-shadow:0 0 26px 10px var(--nc); } 100% { transform:scale(6.5); opacity:0; box-shadow:0 0 0 0 var(--nc); } } .ngoc-tia { width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; animation:ngoc-tia .5s ease-out forwards; } @keyframes ngoc-tia { 0% { transform:translate(0,0) scale(1.6); opacity:1; } 100% { transform:translate(var(--tx), var(--ty)) scale(.2); opacity:0; } } .ngoc-so { font-size:34px; font-weight:800; letter-spacing:.5px; text-shadow:0 2px 6px #000, 0 0 16px currentColor; transform:translate(-50%,-50%); animation:ngoc-so .85s cubic-bezier(.2,1.5,.4,1) forwards; } .ngoc-so.xit { animation-name:ngoc-so-xit; } @keyframes ngoc-so { 0% { transform:translate(-50%,-50%) scale(.2); opacity:0; } 35% { transform:translate(-50%,-90%) scale(1.5); opacity:1; } 100% { transform:translate(-50%,-190%) scale(1.1); opacity:0; } } @keyframes ngoc-so-xit { 0% { transform:translate(-50%,-50%) scale(1.3); opacity:1; } 100% { transform:translate(-50%,30%) scale(.8); opacity:0; } } @media (prefers-reduced-motion: reduce){ .bag-mon, .ngoc-nut { transition:none; } .bag-mon.vua-ep, .bag-mon.vua-xit { animation:none; } .ngoc-bay, .ngoc-no, .ngoc-loe, .ngoc-tia, .ngoc-so { animation-duration:.01s; } } .bag-bar { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-bottom:7px; font-size:11.5px; color:var(--text-dim); } .bag-bar label { display:inline-flex; align-items:center; gap:4px; cursor:pointer; } /* .bag-legend đã bỏ — ba ký hiệu ▲ ◆ 🔒 nay do thẻ rê chuột giải nghĩa */ .bag-cell { position:relative; } .bag-cell.locked, .bag-mon.locked { opacity:.42; filter:grayscale(.7); cursor:not-allowed; } .bag-cell .bc-up, .bag-cell .bc-sg, .bag-cell .bc-lock, .bag-cell .bc-more, .bag-mon .bc-up, .bag-mon .bc-sg, .bag-mon .bc-lock, .bag-mon .bc-more { position:absolute; font-style:normal; font-weight:700; text-shadow:0 1px 2px #000; pointer-events:none; } .bag-cell .bc-up, .bag-mon .bc-up { bottom:0; left:2px; color:#6ae88a; font-size:var(--fs-sm); } .bag-cell .bc-sg { bottom:0; right:2px; color:var(--gold); font-size:var(--fs-sm); } .bag-cell .bc-lock, .bag-mon .bc-lock { top:1px; left:2px; font-size:var(--fs-xs); } .bag-cell .bc-more, .bag-mon .bc-more { top:-3px; right:2px; color:#c9b889; font-size:var(--fs-md); cursor:pointer; pointer-events:auto; } /* Dòng Hoàn Hảo — khối riêng, không trộn vào dãy dòng thường */ .exc-block { margin-top:6px; padding:6px 9px; border-left:2px solid #ffd76a; border-radius:0 4px 4px 0; background:rgba(255,215,106,.09); font-size:11.5px; line-height:1.6; } .exc-block b { display:block; color:var(--gold); font-size:10.5px; letter-spacing:.8px; margin-bottom:2px; } .exc-block span { display:block; color:#f0e2bc; } /* ═══ Thẻ vật phẩm khi rê chuột — dạng hộp hẹp một cột của MU ═══ Hộp cố ý HẸP (208px) và chữ nhỏ: thẻ đồ trong MU đọc lướt trong nửa giây, không phải một bảng thông số. Mọi câu văn dài đã bị cắt; chênh lệch in ngay cạnh con số. */ .itip { position:fixed; z-index:9000; pointer-events:none; color:#e6eaf4; font-family:'Be Vietnam Pro','Segoe UI',sans-serif; } .itip-wrap { display:flex; gap:6px; align-items:flex-start; } .itip-card { width:208px; background:rgba(9,8,16,.96); border:1px solid var(--rc); border-radius:6px; box-shadow:0 8px 26px rgba(0,0,0,.65); font-size:11.5px; line-height:1.5; overflow:hidden; } .itip-tag { font-size:9px; letter-spacing:.09em; text-align:center; padding:2px 0; background:var(--rc); color:#0a0812; font-weight:700; } .itip-top { padding:8px 9px 6px; text-align:center; border-bottom:1px solid rgba(255,255,255,.09); height:108px; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; } .itip-top .item-ic { width:46px; height:46px; border:none; background:transparent; box-shadow:none; margin-bottom:3px; } .itip-top .item-ic img { width:100%; height:100%; } .itip-name { font-weight:700; font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .itip-name em { font-style:normal; color:var(--accent-light); } .itip-sub { font-size:var(--fs-xs); color:#b4ab9e; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .itip-sec { padding:5px 9px; border-bottom:1px solid rgba(255,255,255,.07); } .itip-sec:last-child { border-bottom:none; } .itip-row { display:flex; align-items:baseline; gap:5px; } .itip-row span:first-child { flex:1; color:#a8b0c4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .itip-row b { font-weight:600; } .itip-row.lost { opacity:.5; } .itip-d { font-style:normal; font-size:var(--fs-xs); font-weight:700; min-width:38px; text-align:right; } .itip-d.up { color:#6ae88a; } .itip-d.dn { color:#ff7a6a; } .itip-sec.req { font-size:10.5px; color:#8c94a8; } .itip-sec.req.bad { color:#ff7a6a; opacity:1; } .itip-sec.exc { color:var(--gold); } .itip-sec.awk { color:#f39c3d; } .itip-sec.sig { border-left:3px solid var(--sc); } .itip-sec.sig b { color:var(--sc); } .itip-sec.sig div { color:#a8b0c4; font-size:10.5px; margin-top:1px; } .itip-sec.sig.off { opacity:.55; } .itip-foot { margin-top:6px; display:flex; flex-direction:column; gap:1px; background:rgba(9,8,16,.96); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:5px 9px; font-size:var(--fs-sm); font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.65); } .bag-bar .bag-tip { flex:1; text-align:right; font-style:normal; font-size:10.5px; opacity:.5; } /* Thanh dọn hàng loạt — dùng chung cho túi và kho */ .don-lb { color:var(--text-dim); } .don-sel { background:#12142c; color:var(--text-body); border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-size:11.5px; font-family:inherit; } .don-sel:focus { border-color:var(--accent-light); outline:none; } .bag-act { margin-top:10px; font-size:var(--fs-lg); } /* ═══ Thanh EXP dưới đáy màn hình — đúng chỗ MU đặt nó ═══ Trước đây nó nằm góc trên trái, kẹp giữa dòng tên dài ba dòng và dòng Instinct. */ /* ⚠ NEO VÀO #bottom-hud, KHÔNG neo vào khung nhìn. `left:0; right:0` trên một con của thanh ⇒ bề ngang EXP **bằng đúng** bề ngang thanh, ở mọi khổ màn và với mọi số ô, mãi mãi. Bản cũ `position:fixed` + `width:min(520px,62vw)` là một con số rời hẳn: ở màn 1600 nó ra 520px nằm cạnh một thanh 756px — hai vật cùng căn giữa mà khác bề ngang thì đọc ra hai thứ chồng hờ lên nhau, chứ không ra một khối. Chủ dự án gọi đúng tên và nó chữa luôn cảm giác "thanh dài quá": có một đường chân cùng bề ngang thì cái thanh mới có hình dạng. `top: calc(100% + 3px)` — nằm DƯỚI thanh, không cắt ngang ô chiêu (test_thanhchien §3). */ #xp-strip { position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:1; pointer-events:none; } #xp-strip .bar.xp { height:9px; } #xp-strip .bar.xp span { line-height:9px; font-size:8px; } /* Dấu "còn điểm chưa cộng" cạnh tên — thứ duy nhất của bảng V cần liếc giữa trận */ #hud-name .hud-free { color:#0d0a16; background:#ffd76a; border-radius:8px; padding:0 6px; font-size:var(--fs-sm); font-weight:700; text-shadow:none; } /* Bảng nhân vật thứ hai (#panel-vstat) đã gỡ — nó in trùng nội dung với tab Thông Tin. Bảy quy tắc .vs-* đi theo nó, không còn phần tử nào mang các lớp đó. */ /* Tầng Sâu — nút rút lui, đặt nổi bật vì đó là QUYẾT ĐỊNH của cả chế độ */ /* top:150px chứ không phải 84px — chỗ đó là banner dẫn nhiệm vụ, đè lên nhau đọc không ra */ /* Dạt sang phải: ở giữa-trên nó che hẳn dòng tiêu đề zoneBanner "TẦNG n/20". Cột phải từ ~200px trở xuống là chỗ trống duy nhất còn lại (minimap kết thúc quanh 190px). */ #deep-leave { position:fixed; right:14px; top:268px; /* 206px đè lên minimap — #hud-right kết thúc ở 257px (đo bằng getBoundingClientRect) */ z-index:60; background:linear-gradient(180deg,#2a6a3a,#1d4a2a); color:#d8ffe0; cursor:pointer; border:1px solid #6ae88a; border-radius:9px; padding:7px 18px; font-size:var(--fs-lg); font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,.5); font-family:inherit; letter-spacing:.02em; } #deep-leave:hover { background:linear-gradient(180deg,#357f47,#245a33); } #deep-leave i { font-style:normal; font-weight:400; font-size:var(--fs-sm); opacity:.75; margin-left:6px; } /* ═══════════ LỚP PHỦ TOÀN MÀN HÌNH (thay cho fillRect(0,0,W,H) mỗi khung) ═══════════ z-index 10: trên canvas (#game), dưới mọi thứ của HUD (#bottom-hud là 11). */ .fx-layer { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:0; transition:opacity .12s linear; } #fx-vignette.on { opacity:1; background:radial-gradient(ellipse at 50% 50%, rgba(24,16,8,0) 44%, rgba(24,16,8,.16) 88%); } #fx-dark.on { opacity:1; background:radial-gradient(ellipse at 50% 50%, rgba(10,8,14,0) 28%, rgba(10,8,14,.62) 75%); } #fx-sky { transition:opacity .3s linear, background .5s linear; } /* Dải nắng nghiêng. mix-blend-mode:screen cho đúng cảm giác "ánh sáng cộng vào", nhưng ở đây nó chạy trên tầng ghép ảnh của trình duyệt chứ không phải trong lượt vẽ canvas. */ /* ── VẾT NỨT TRÊN TRỜI ──────────────────────────────────────────────────────────────── Trước đây "vết nứt rộng thêm" được vẽ trong vòng lặp bằng một ctx.fillRect phủ kín màn hình với rgba(8,6,20,≤0.18) — tức là nó làm màn hình TỐI ĐI chứ không hề vẽ ra vết nứt nào, và ở trần 0.18 thì không ai nhận ra nếu không có bản đối chiếu đặt cạnh. Nay nó là một vật thể thật, neo ở mép trên, dựng bằng clip-path; năm nấc chỉ khác nhau ba biến. Sau khi chuyển tiếp chạy xong, chi phí vẽ mỗi khung bằng 0 — cùng lý do đã đẩy fx-hurt/fx-low ra khỏi canvas. */ #fx-crack { position:fixed; top:0; left:29%; width:var(--nw,0); height:var(--nh,0); opacity:var(--no,0); background:linear-gradient(180deg, rgba(255,196,120,.85) 0%, rgba(255,132,74,.52) 30%, rgba(206,62,92,.24) 62%, rgba(206,62,92,0) 100%); /* Đường gãy khúc, KHÔNG đối xứng — vết nứt thì lệch và giật, còn một hình nêm cân đối hai bên thì mắt đọc ra là một cột ánh sáng. Mười đỉnh, hai mép không soi gương nhau. */ clip-path:polygon(44% 0%, 52% 0%, 66% 21%, 55% 34%, 71% 55%, 61% 72%, 74% 100%, 47% 100%, 38% 70%, 49% 52%, 33% 31%, 41% 18%); filter:drop-shadow(0 0 9px rgba(255,150,80,.6)); transition:width 2.4s ease-out, height 2.4s ease-out, opacity 2.4s ease-out; pointer-events:none; z-index:9; } /* Lệch hẳn sang trái và dừng trong dải trời. Đặt giữa màn thì nó nằm đúng sau lưng nhân vật — người chơi dành cả ván nhìn vào chỗ đó, và một vệt sáng cao 64vh ngay sau lưng là thứ tranh chỗ với trận đánh chứ không phải nền trời. */ /* Bề rộng ở đây là bề rộng của KHUNG, không phải của vết nứt: clip-path chỉ giữ lại khoảng 40% giữa khung, rồi còn bẻ gãy khúc nữa. Bản đầu đặt nấc 1-2 ở 34/56px, tức là vết nứt thật chỉ còn hơn hai chục điểm ảnh — chụp màn ra rồi soi cũng không thấy. Nấc đầu phải ĐỦ ĐỂ NHẬN RA, vì nó là lần đầu người chơi được báo rằng thế giới vừa đổi. */ #fx-crack[data-tru="1"] { --nw:52px; --nh:14vh; --no:.42; } #fx-crack[data-tru="2"] { --nw:82px; --nh:21vh; --no:.54; } #fx-crack[data-tru="3"] { --nw:112px; --nh:28vh; --no:.64; } #fx-crack[data-tru="4"] { --nw:138px; --nh:34vh; --no:.72; } #fx-crack[data-tru="5"] { --nw:170px; --nh:42vh; --no:.84; } /* ⚠ SỐ NẤC PHẢI KHỚP RUNE_TONG. Bảng xương sống đi từ 5 (Năm Trụ Khoá) lên 7 (Bảy Rune Cổ), và bộ chọn `[data-tru="N"]` khớp CHÍNH XÁC — nên hai nấc cuối thiếu ở đây là `--nw` không được khai, `getComputedStyle` trả chuỗi rỗng, parseFloat ra NaN, và lớp vết nứt TỤT VỀ 0 đúng ở hai nấc cuối cùng của cả ván chơi. Không có lỗi nào trên console. test_dot4 đọc số nấc từ RUNE_TONG nên nó bắt được — đổi RUNE_CO thì chạy lại bài đó. */ #fx-crack[data-tru="6"] { --nw:198px; --nh:49vh; --no:.90; } #fx-crack[data-tru="7"] { --nw:224px; --nh:56vh; --no:.96; } /* Nấc cuối vẫn hiện, chỉ bỏ đoạn chuyển tiếp — người tắt hiệu ứng chuyển động vẫn phải ĐỌC ĐƯỢC trạng thái thế giới, chứ không phải bị giấu mất một nửa cốt truyện. */ @media (prefers-reduced-motion: reduce){ #fx-crack { transition:none; } } #fx-rays { overflow:hidden; } #fx-rays.on { opacity:1; } #fx-rays i { position:absolute; top:-12%; left:-60%; width:260%; height:130%; display:block; mix-blend-mode:screen; transform:rotate(14deg); background:repeating-linear-gradient(78deg, rgba(255,240,190,0) 0px, rgba(255,240,190,0) 120px, rgba(255,240,190,.13) 150px, rgba(255,240,190,.13) 196px, rgba(255,240,190,0) 236px, rgba(255,240,190,0) 340px); animation:fxRayDrift 90s linear infinite; } @keyframes fxRayDrift { from { transform:rotate(14deg) translateX(0); } to { transform:rotate(14deg) translateX(340px); } } @media (prefers-reduced-motion: reduce){ #fx-rays i { animation:none; } } #fx-hurt { background:radial-gradient(ellipse at 50% 50%, rgba(200,30,20,0) 30%, rgba(200,30,20,.35) 75%); transition:opacity .08s linear; } #fx-low { background:radial-gradient(ellipse at 50% 50%, rgba(190,16,16,0) 34%, rgba(190,16,16,.32) 78%); transition:opacity .25s linear; } /* ═══════════ TẠO NHÂN VẬT — kiểu MU Online ═══════════ Màn cũ là 16 lá bài thái cực/bát quái để roll vận mệnh. Nay: chọn lớp, gõ tên, vào game. */ /* Chân dung NPC nay nằm TRONG thanh tiêu đề khắc chìm (xem npcHead → moBang), nên luật bám theo chính lớp .npc-face chứ không theo hàng .npc-head cũ — hàng đó không còn được dựng ra. */ .npc-face { width:52px; height:52px; flex:0 0 52px; object-fit:contain; border-radius:var(--r-md); background:rgba(10,14,32,.55); border:1.5px solid var(--border); padding:2px; } @media (max-width:1000px){ .npc-face { width:40px; height:40px; flex-basis:40px; } } #art-view { position:fixed; inset:0; z-index:9000; background:rgba(4,4,10,.94); display:flex; align-items:center; justify-content:center; cursor:pointer; } #art-view .av-in { display:flex; align-items:center; gap:24px; padding:20px; } #art-view img { height:82vh; width:auto; } #art-view .av-chibi { height:52vh; } #art-view .av-cap { position:fixed; bottom:20px; left:0; right:0; text-align:center; font-size:15px; font-weight:700; color:var(--text-soft); letter-spacing:.4px; } #art-view .av-cap span { font-size:var(--fs-md); font-weight:400; color:var(--text-dim); } #cc-splash { position:fixed; left:1vw; top:50%; transform:translateY(-50%) scale(.97); height:auto; width:24vw; max-width:340px; z-index:12; pointer-events:none; opacity:0; transition:opacity 180ms ease-out, transform 180ms ease-out; } #cc-splash.on { opacity:1; transform:translateY(-50%) scale(1); } /* Màn hình hẹp: giấu tranh nhân vật ở màn tạo mới. Trước đây khối này còn ôm thêm một bản SAO CHÉP y nguyên 14 dòng ngay phía trên (npc-head, #art-view, #cc-splash) — chép nhầm vào trong vỏ @media, giá trị giống hệt nên không lộ ra thành lỗi nhìn thấy được, chỉ là CSS chết. */ @media (max-width:1240px){ #cc-splash { display:none; } } /* ── Năm ô nhân vật (màn chờ) ───────────────────────────────────────────────── Danh sách dọc chứ không phải lưới: mỗi dòng phải đọc được TÊN, CẤP, LỚP và NƠI ĐANG ĐỨNG trong một lượt mắt — đó là thứ người chơi dùng để phân biệt năm nhân vật của chính mình. Nút xoá nằm ngay trên dòng, và bấm nó KHÔNG xoá ngay: dòng đổi thành câu hỏi lại có tên và cấp của nhân vật, vì hộp confirm() của trình duyệt không nói được hai thứ đó. */ #cc-slots { display:flex; flex-direction:column; gap:8px; max-width:520px; margin:18px auto 6px; } #cc-slots-note { font-size:var(--fs-sm); color:var(--text-dimmer); margin-bottom:10px; letter-spacing:.3px; } .cc-slot { position:relative; display:flex; align-items:center; gap:12px; text-align:left; padding:8px 44px 8px 10px; border:1.5px solid var(--border-faint); border-radius:var(--r-md); background:rgba(53,41,25,.62); cursor:pointer; transition:border-color .18s ease, transform .18s ease; } .cc-slot:hover { border-color:var(--border-strong); transform:translateY(-2px); } .cc-slot.sel { border-color:var(--accent-light); box-shadow:0 0 18px rgba(var(--rgb-vang),.35); background:linear-gradient(180deg, rgba(var(--rgb-vang),.18), rgba(20,22,58,.72)); } .cc-slot-art { width:52px; height:auto; flex:0 0 52px; image-rendering:auto; } .cc-slot-txt { flex:1 1 auto; min-width:0; } .cc-slot-nm { font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--text-bright); letter-spacing:.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cc-slot-sub { font-size:var(--fs-md); color:var(--text-soft); margin-top:2px; } .cc-slot-loc { font-size:var(--fs-sm); color:var(--text-dimmer); margin-top:2px; } .cc-slot.empty { justify-content:center; padding:14px; border-style:dashed; color:var(--text-dim); } .cc-slot.empty .cc-slot-nm { font-size:var(--fs-md); font-weight:400; color:var(--text-dim); } .cc-slot-add { font-size:var(--fs-xl); color:var(--accent-light); margin-right:6px; } .cc-slot-del { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:1px solid var(--border-faint); border-radius:var(--r-sm); background:rgba(10,11,24,.6); color:var(--text-dimmer); font-size:var(--fs-md); line-height:1; cursor:pointer; } .cc-slot-del:hover { border-color:var(--red); color:var(--red); background:rgba(60,16,20,.7); } .cc-slot.hoi-xoa { cursor:default; padding:10px; border-color:var(--red); background:rgba(48,14,18,.72); } .cc-slot.hoi-xoa .cc-slot-txt { min-width:0; } .cc-slot.hoi-xoa:hover { transform:none; border-color:var(--red); } .cc-slot.hoi-xoa .cc-slot-nm { color:#ffc4c4; } .cc-slot-yes, .cc-slot-no { border-radius:var(--r-sm); padding:6px 12px; font-size:var(--fs-md); white-space:nowrap; font-weight:600; cursor:pointer; letter-spacing:.3px; } .cc-slot-yes { border:1px solid var(--red); background:rgba(120,30,36,.85); color:#ffd8d8; } .cc-slot-yes:hover { background:var(--red); color:var(--on-light); } .cc-slot-no { border:1px solid var(--border); background:rgba(var(--rgb-da),.9); color:var(--text-soft); } .cc-slot-no:hover { background:rgba(var(--rgb-vang),.28); } /* Màn chọn lớp là MỘT SÂN KHẤU, không phải năm cái thẻ rời. Năm nhân vật đứng chung trên một bệ đất, sau lưng là cảnh Lunacia — đó là bố cục của màn chọn nhân vật trong MU. Cảnh vẽ ở canvas (#title-fx) vì nó phủ cả màn. Còn VẦNG TỐI và BỆ ĐỨNG thì dán thẳng vào #cc-classes bằng ::after và ::before: chúng phải đứng yên SO VỚI GÓT CHÂN, mà gót chân thì trôi theo bố cục dòng chảy của .ss-inner. Neo vào canvas là mỗi cỡ cửa sổ lại lệch một kiểu; neo vào chính hàng thẻ thì cả ba đi cùng nhau, khỏi cần một dòng JS nào canh lại. Mép trên bệ đứng canh đúng vào gót chân: ảnh thẻ cao 300 đơn vị, gót ở 252, thu về bề rộng 118 px ⇒ gót nằm cách đỉnh ảnh 124 px, cộng 10 px đệm trên của thẻ là 134 px. Sân khấu chỉ hiện khi hàng thẻ hiện — tức chỉ trong lúc tạo nhân vật. Ở màn danh sách nhân vật, hàng thẻ bị ẩn nên bệ đứng biến mất theo, chỉ còn cảnh Lunacia. */ /* PHÁ KHUNG .ss-inner (rộng 900px). Hàng thẻ nay là art anh hùng vẽ tay chứ không phải hình chibi phẳng: ở bề rộng 820px mỗi thẻ chỉ được 164px, nhân vật cao 146px, và ở cỡ đó thì giáp nhiều lớp với hoa văn vàng chỉ còn là một vệt tối — đúng thứ bộ art này sinh ra để tránh. 1180px cho mỗi thẻ 236px, nhân vật cao 206px: đọc được mặt, đọc được vũ khí. */ #cc-classes { position:relative; z-index:0; isolation:isolate; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:16px auto 12px; width:min(1300px, 96vw); max-width:none; left:50%; transform:translateX(-50%); } /* TÁN RỪNG (assets/title/rung.webp) ĐÃ GỠ. Nó là một dải cây tối vẽ cho cảnh núi đêm cũ; trên nền Lunacia mới nó cắt ngang bức tranh thành hai nửa và mang tông xám-lục chọi hẳn với xanh ngọc của cảnh. Nay chỉ còn một vầng tối hắt sau lưng hàng thẻ — đủ để năm bóng người tách khỏi nền, không thêm một bức tranh thứ hai vào khung. */ #cc-classes::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:100vw; top:-70px; height:290px; z-index:0; pointer-events:none; background:radial-gradient(54% 74% at 50% 74%, rgba(5,9,24,.62) 0%, rgba(5,9,24,.30) 52%, rgba(5,9,24,0) 100%), var(--den); } /* Đèn sân khấu: một vệt sáng ấm hắt lên từ mặt đất. Vầng tối ở ::after dìm nền phía sau, mà ba trong năm lớp cũng mặc đồ tối — không có vệt sáng này thì họ chỉ còn là những vệt lờ mờ. */ #cc-classes { --den:radial-gradient(58% 100% at 50% 100%, rgba(226,207,179,.20) 0%, rgba(226,207,179,.07) 45%, rgba(226,207,179,0) 100%); } #cc-detail { position:relative; z-index:2; } /* BỆ ĐỨNG — tràn hết bề ngang cửa sổ; nó là thứ nhân vật ĐỨNG LÊN nên mép trên phải trùng đúng gót chân, không xê một điểm ảnh nào. BỆ ĐỨNG — nay cắt từ CHÍNH lớp mặt đất của cảnh Lunacia (tools/title/nuong_nen_axie.py), thay cho dải đá cuội xám ấm `san_da.webp` vẽ cho cảnh núi đêm cũ. Bệ và nền là một bức nên không có cách nào lệch tông. Mép trên tấm ảnh là đường cỏ, và nó phải trùng đúng gót chân — top:179px giữ nguyên như cũ, đừng đổi nếu chưa đo lại gót. */ #cc-classes::before { content:''; position:absolute; left:50%; transform:translateX(-50%); width:100vw; top:179px; height:112px; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(6,7,20,0) 48%, rgba(6,7,20,.92) 100%), url(assets/title/lunacia/san.webp) center top / 100vw auto no-repeat; filter:brightness(1.02) saturate(1.02); /* Làm mờ 7% trên cùng: mép cắt của tấm ảnh là một ĐƯỜNG THẲNG chạy suốt bề rộng màn hình, mà cảnh phía sau thì không có đường nào thẳng như thế. Tan dần vào là hết đường kẻ. */ -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 7%); mask-image:linear-gradient(180deg, transparent 0%, #000 7%); } /* Bóng đổ dưới chân: không có nó thì nhân vật lơ lửng ngay trên nền đá chứ không đứng lên nó. */ .cc-card::before { content:''; position:absolute; left:50%; transform:translateX(-50%); top:204px; width:104px; height:20px; border-radius:50%; z-index:-1; background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 72%); pointer-events:none; } .cc-card { position:relative; z-index:2; border:none; border-radius:var(--r-md); padding:10px 4px 12px; cursor:pointer; background:none; transition:box-shadow .25s, transform .14s; text-align:center; } .cc-card:hover { transform:translateY(-3px); } /* Đang chọn thì sáng lên bằng QUẦNG DƯỚI CHÂN, không phải viền hộp — hộp thì lại thành thẻ. */ .cc-card.sel::after { content:''; position:absolute; left:50%; transform:translateX(-50%); top:199px; width:132px; height:32px; border-radius:50%; z-index:-1; background:radial-gradient(ellipse at center, rgba(var(--rgb-vang),.55), rgba(var(--rgb-vang),0) 70%); } .cc-card.sel .cc-nm { text-shadow:0 0 12px rgba(var(--rgb-vang),.7); } /* 118px bề ngang ⇒ ảnh cao 147px, gót ở 124px tính từ đỉnh ảnh. Đệm dưới đẩy tên lớp xuống quá mép dưới bệ đứng (gót +96px) — tên đè lên mặt đất thì cả sân khấu thành một cái nhãn. */ .cc-card /* 157px chứ không 118px: tranh lớp nay đóng trên canvas rộng 320 thay vì 240 (áo choàng và vũ khí của bộ art anh hùng xoè rộng hơn hình chibi cũ nhiều). 118 × 320/240 = 157 — nới ĐÚNG theo tỉ lệ canvas thì gót chân vẫn rơi vào 134px như cũ, nên bệ đứng, bóng đổ và quầng chọn không phải canh lại. Cột thẻ rộng 820/5 = 164px nên 157 vẫn lọt. */ .cc-art { display:block; width:100%; max-width:250px; height:auto; margin:0 auto 64px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)); transition:filter .22s ease, transform .22s ease; } /* ══ ĐANG CHỌN LỚP NÀO — đọc được mà KHÔNG cần viền hộp ══ Quầng dưới chân một mình là không đủ: chụp hai ảnh trước/sau khi bấm Dark Wizard thì HÌNH NHÂN VẬT không đổi một điểm ảnh nào, chỉ cái tên đổi màu và một quầng nhỏ dưới chân. Trên màn 1600px với năm nhân vật đứng cạnh nhau thì không ai đọc ra mình đang chọn ai. Chữa bằng TƯƠNG PHẢN chứ không thêm khung: bốn lớp còn lại xám bớt và tối đi, lớp đang chọn sáng lên và to ra một chút. Giữ đúng chủ ý cũ ghi ở .cc-card.sel::after — "hộp thì lại thành thẻ", nên ở đây không có hộp nào. ⚠ Phóng to lấy gốc ở GÓT CHÂN (134px, xem chú thích bề ngang thẻ phía trên), không lấy tâm: lấy tâm thì nhân vật nhấc khỏi phiến đá và thành ra đang lơ lửng. */ #cc-classes.da-chon .cc-card:not(.sel) .cc-art { filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)) saturate(.42) brightness(.60); } #cc-classes.da-chon .cc-card:not(.sel) .cc-nm, #cc-classes.da-chon .cc-card:not(.sel) .cc-tag { opacity:.45; } .cc-card.sel .cc-art { filter:drop-shadow(0 9px 18px rgba(0,0,0,.7)) brightness(1.10) saturate(1.06); transform:scale(1.07); transform-origin:50% 134px; } @media (prefers-reduced-motion:reduce){ .cc-art { transition:none; } } /* Tên lớp là thứ người chơi đọc đầu tiên — cho nó cỡ của một cái TÊN, không phải một nhãn phụ. Dòng vai trò trước đây 10,5px và gãy làm ba dòng lệch nhau giữa năm thẻ; nới cỡ, giãn dòng và khoá hai dòng để năm thẻ cao bằng nhau. */ .cc-card .cc-nm { font-family:var(--font-display); font-size:15.5px; font-weight:700; letter-spacing:.4px; margin-top:4px; } .cc-card .cc-tag { font-size:11.5px; color:var(--text-soft); margin-top:4px; line-height:1.45; min-height:34px; padding:0 2px; } .cc-detail { max-width:640px; margin:0 auto 14px; min-height:52px; font-size:12.5px; color:var(--text-soft); line-height:1.6; padding:10px 14px; border-radius:var(--r-md); border:1px solid var(--border-faint); background:rgba(14,15,32,.5); } .cc-detail .cc-skills { margin-top:5px; font-size:11.5px; color:var(--text-dim); } .cc-name { display:flex; gap:8px; align-items:center; justify-content:center; margin:4px auto 6px; flex-wrap:wrap; } .cc-name label { font-size:12.5px; color:var(--text-dim); letter-spacing:.5px; } .cc-name input { background:rgba(10,11,24,.75); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-bright); font:600 14px/1.4 inherit; padding:9px 13px; width:min(300px,68vw); text-align:center; } .cc-name input:focus { outline:none; border-color:var(--accent-light); box-shadow:0 0 10px rgba(var(--rgb-vang),.35); } .cc-name button { background:rgba(var(--rgb-da),.9); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-body); font-size:var(--fs-xl); width:40px; height:40px; cursor:pointer; } .cc-name button:hover { background:rgba(var(--rgb-vang),.28); } .cc-warn { min-height:17px; font-size:11.5px; color:var(--orange); margin-bottom:8px; } #btn-create[disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.5); } @media (max-width:720px){ #cc-classes { grid-template-columns:repeat(3,1fr); gap:8px; max-width:100%; } .cc-card .cc-art { max-width:82px; } .cc-card .cc-tag { display:none; } .cc-detail { font-size:var(--fs-md); } } /* Box Kundun — kéo ra màn hình để ném */ .box-row { cursor: grab; } .box-row:active { cursor: grabbing; } .box-row:hover { border-color: var(--accent-light); background: rgba(var(--rgb-vang),.12); } /* ═══ Khế Ước Ragoon — lớp phủ hoạt ảnh quay ═══ */ #gacha-wrap { position:fixed; inset:0; z-index:200; background:#04040a; } #gacha-wrap.hidden { display:none; } #gacha-cv { display:block; width:100%; height:100%; } #gacha-skip { position:absolute; right:16px; bottom:14px; font-size:11.5px; color:var(--text-dim); background:rgba(8,9,22,.72); border:1px solid var(--border); border-radius:999px; padding:4px 12px; pointer-events:none; } .ku-banner { border:1px solid var(--border-strong); border-radius:6px; padding:12px 14px; margin-bottom:10px; background:linear-gradient(180deg, rgba(var(--rgb-da),.9), rgba(18,20,44,.9)); } .ku-banner h4 { margin:0 0 4px; font-size:16px; color:var(--gold); font-family:var(--font-chi); letter-spacing:.2px; } .ku-bd { font-size:11.5px; color:var(--text-dim); margin-top:6px; line-height:1.6; } .ku-bd b { color:var(--accent-light); } .ku-ke { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .ku-ke span { font-size:var(--fs-sm); border:1px solid var(--border); border-radius:999px; padding:2px 9px; } /* ═══ Sân khấu ở màn danh sách nhân vật ═══ Năm thẻ lớp là chuyện của màn TẠO nhân vật. Ở màn chờ, hàng thẻ đó đã ẩn nên mặt tiền trống hẳn — chỉ còn cảnh Lunacia và một cột ô nhân vật. Đây là chỗ đặt được sân khấu mà không phá thứ gì: xem ccHeroVe() trong game.js. Chiều cao dùng clamp thay vì một số cứng: màn 720p và màn 1440p mà cùng 470px thì cái thứ hai nhìn như dán tem. 50vh giữ tỉ lệ so với cảnh, hai đầu kẹp lại cho khỏi quá lố. */ /* Sân khấu neo GÓC DƯỚI TRÁI và chiếm hẳn nửa màn. Bản trước nó là một tấm PNG một người, nhét vào khe 260px bên trái cột ô nhân vật đặt giữa màn — đủ cho một hiệp sĩ đứng, không đủ cho năm lớp đứng thành hàng. Nay cột ô dồn sang phải (#sect-select.man-cho) và sân khấu lấy chỗ trống bên trái. Hào quang vàng của bản cũ đã bỏ: trong khung nay có tới mười bóng hình (năm lớp + năm Axie), một vầng sáng ôm cả khung chỉ làm chúng dính vào nhau thành một mảng. */ #cc-hero { position:fixed; bottom:0; left:0; /* Thấp và RỘNG, không cao và hẹp. Nhân vật thật chỉ cao 159 điểm ảnh trong kho art, nên khung cao nửa màn hình chỉ để trống hai phần ba — mà nới người cho đầy khung là kéo nhoè (xem CC_PHONG_TRAN trong game.js). */ height:clamp(230px, 38vh, 360px); width:auto; max-width:64vw; z-index:1; pointer-events:none; user-select:none; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)); animation:hero-in .9s ease-out both; } /* MÀN CHỜ — cột ô nhân vật dồn sang phải, nhường nửa trái cho sân khấu. Canh giữa theo chiều dọc chứ không neo đáy: neo đáy là luật của màn TẠO nhân vật, nơi năm thẻ phải đứng đúng trên bệ đất. Ở đây không có bệ nào, dồn xuống đáy chỉ làm cột ô trông như bị rơi. */ #sect-select.man-cho { align-items:center; justify-content:flex-end; } #sect-select.man-cho .ss-inner { padding-right:clamp(16px, 6vw, 96px); padding-bottom:26px; } /* Bóng đổ dưới chân nay vẽ TRONG canvas (ccVeBong) — mỗi bóng hình một vũng riêng, đặt đúng dưới gót nó. Một vũng CSS cố định thì chỉ đúng khi trong khung có đúng một người đứng đúng một chỗ, mà khung này có lúc sáu bóng hình. */ @keyframes hero-in { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } } @media (prefers-reduced-motion:reduce){ #cc-hero { animation:none } } /* Màn hẹp: cột ô nhân vật rộng 520px nằm giữa, tranh cao 340px rộng chừng 270px — dưới 1080px là hai thứ chạm nhau. Ẩn hẳn còn hơn để nó thò một nửa ra sau danh sách. */ /* Màn hẹp: cột ô rộng 520px, sân khấu rộng chừng 0,9×chiều cao — dưới 1080px là hai thứ chồng nhau. Trả cột về giữa và ẩn sân khấu, còn hơn để nó thò một nửa ra sau danh sách. */ @media (max-width:1080px){ #cc-hero { display:none } #sect-select.man-cho { justify-content:center } #sect-select.man-cho .ss-inner { padding-right:16px } } /* Năm thông số bắt buộc của mọi chiêu — xem CLAUDE.md · Quy ước kỹ năng. Xếp thành lưới để người chơi so hai chiêu theo cột, không phải dò trong một dòng chữ dài. ⚠ TÊN CLASS PHẢI KHÁC `.sk-so`. Lưới này từng mang đúng tên đó, mà `.sk-so` là ô ĐẾM LỌ THUỐC ở thanh dưới (dòng ~309) nên nó khai `position:absolute; right:3px; bottom:2px`. Khối dưới đây chỉ đè `display`, KHÔNG đè `position` — nên cả bốn lưới thông số bị bứt khỏi dòng chảy và rơi về cùng một góc bảng, in đè lên nhau: đo được 4 phần tử ở (919,961) (911,961) (865,961) (912,961), tức 0/4 chiêu đọc được thông số. Không ném lỗi, không ai thấy, sống rất lâu. Đừng gộp lại hai cái tên. */ .skill-row .sk-thongso { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px 10px; margin:3px 0 2px; font-size:10.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; } .skill-row .sk-thongso b { color:var(--accent-light); font-weight:600; } /* ══ C · CỬA SỔ KIỂU MU: kéo được · thu gọn được · nhớ chỗ ══ */ .bang-tieu { cursor:grab; user-select:none; } .panel.dang-keo .bang-tieu { cursor:grabbing; } /* Bảng đã bị kéo: bỏ căn giữa, toạ độ do JS ghi thẳng vào left/top. */ .panel.da-keo { transform:none; } /* THU GỌN — chỉ còn thanh tiêu đề. max-height 0 không dùng được vì tiêu đề phải ở lại, nên giấu mọi con TRỪ tiêu đề và hai cái nút góc. */ .panel.thu { max-height:none; overflow:visible; padding-bottom:0; } .panel.thu > *:not(.bang-tieu):not(.close-x):not(.bang-thu) { display:none !important; } .bang-thu { position:absolute; top:8px; right:38px; width:24px; height:24px; padding:0; cursor:pointer; background:rgba(20,17,12,.8); color:var(--gold); border:1px solid var(--vien-dong); border-radius:4px; font-size:14px; line-height:1; font-family:inherit; } .bang-thu:hover { border-color:var(--vien-dong-manh); background:rgba(58,46,28,.9); } /* Cụm "Tự động" trong Túi Đồ — hai công tắc đặt-một-lần thu vào một chỗ mở ra được, để hàng trên cùng chỉ còn nút bấm thật. Mở ra thì hai ô đánh dấu xuống dòng ngay dưới. */ .bag-auto { position:relative; } .bag-auto > summary { list-style:none; cursor:pointer; user-select:none; font-size:var(--fs-xs); color:var(--text-soft); padding:3px 8px; border-radius:999px; border:1px solid var(--border-faint); background:rgba(0,0,0,.18); } .bag-auto > summary::-webkit-details-marker { display:none; } .bag-auto > summary:hover { color:var(--text-bright); border-color:var(--border); } .bag-auto[open] > summary { color:var(--text-bright); border-color:var(--border-strong); } .bag-auto[open] { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ⚠ Luật có sẵn `.bag-bar label { display:inline-flex }` (xem trên) ĐÈ LÊN cơ chế ẩn của
: đặt display thẳng lên con của một details đang ĐÓNG thì trình duyệt vẫn vẽ nó. Đo được: đóng hay mở cụm cũng cao đúng 21px và hai ô đánh dấu đều hiện — thu gọn xong mà không thu được gì. Phải chặn tường minh, đừng trông vào mặc định của thẻ. */ .bag-auto:not([open]) label { display:none; } .bag-auto[open] label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════════════════════════════ MÀN CHỜ KIỂU AXIE — khối này CỐ Ý đè lên các kiểu chung, và chỉ trong #sect-select ───────────────────────────────────────────────────────────────────────────────────── Chủ dự án chốt: màn chờ phải mang hơi hướng Axie rõ nhất có thể. Nền nay là art chính chủ (cảnh Lunacia tách lớp từ axie-origins-asset-kit) và trong khung có năm con Axie đứng — nhưng nếu khung giao diện vẫn là viền vàng mảnh kiểu MU thì cả màn thành hai ngôn ngữ hình ảnh chửi nhau, đúng cái lỗi từng mắc khi đặt Baloo 2 lên khung thép đinh tán. Ngôn ngữ của Axie Origins, rút gọn còn ba điều: bo góc TO, viền TỐI dày, và một GỜ DƯỚI đặc (không phải đổ bóng mờ) làm mọi thứ trông như nút bấm dày có bề dày thật. ⚠ CHỈ trong #sect-select. Phần còn lại của game vẫn là MU — Quy tắc số 1 không đổi, và đây là ngoại lệ có phạm vi, không phải một đợt đổi tông toàn cục. ⚠ Baloo 2 (--font-chi) dùng cho LOGO và NÚT LỚN của màn này. Luật cũ ("chỉ dùng ở chỗ có con Axie đứng cạnh") sinh ra vì chữ bo tròn kiểu hoạt hình đặt trên khung thép đinh tán là hai ngôn ngữ chửi nhau — ở đây khung đã là khung Axie bo tròn, nên chữ và khung nói cùng một thứ tiếng. Đừng đổi ngược về --font-display mà không đổi luôn cả khung. ═════════════════════════════════════════════════════════════════════════════════════ */ #sect-select { --ax-than: linear-gradient(180deg, rgba(48,63,112,.90), rgba(20,27,54,.94)); --ax-vien: rgba(8,12,28,.92); --ax-go: rgba(6,9,22,.85); /* gờ dưới — màu đặc, không phải bóng mờ */ --ax-lap: inset 0 1px 0 rgba(186,220,255,.20); --ax-vang: linear-gradient(180deg, #ffd98a, #eaa94a 52%, #d9902f); } /* ── Ô nhân vật ── */ #sect-select .cc-slot { gap:11px; padding:9px 46px 9px 10px; border:2px solid var(--ax-vien); border-radius:16px; background:var(--ax-than); box-shadow:0 4px 0 var(--ax-go), var(--ax-lap); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; } #sect-select .cc-slot:hover { transform:translateY(-2px); border-color:rgba(120,190,230,.75); box-shadow:0 6px 0 var(--ax-go), var(--ax-lap); } #sect-select .cc-slot.sel { border-color:#7fd4e8; background:linear-gradient(180deg, rgba(70,104,158,.92), rgba(24,36,70,.95)); box-shadow:0 4px 0 var(--ax-go), 0 0 22px rgba(127,212,232,.34), var(--ax-lap); } #sect-select .cc-slot.empty { padding:13px; border-style:dashed; border-color:rgba(140,178,220,.34); background:rgba(14,20,42,.55); box-shadow:none; } #sect-select .cc-slot.empty:hover { border-color:rgba(180,222,255,.62); box-shadow:none; } /* Chân dung: ô vuông bo góc, cắt lấy ĐẦU VÀ VAI. `pick_*.webp` là tranh cả người cao 300px — thu nguyên bức vào 48px thì đầu chỉ còn 7px, không phân biệt nổi lớp nào. Nên phóng ảnh lên 150px trong một khung 48px có overflow:hidden, rồi trượt lên cho đúng tầm đầu (đo trên art: đầu nằm ở dải y 17..70 của khổ 300, tức 8..35 sau khi thu về 150 — trượt lên 4px là vừa). */ #sect-select .cc-slot-anh { position:relative; flex:0 0 48px; width:48px; height:48px; overflow:hidden; border-radius:13px; border:2px solid rgba(10,14,32,.9); background:radial-gradient(70% 70% at 50% 30%, rgba(72,102,160,.75), rgba(10,15,34,.9)); } /* Ảnh nay là CHÂN DUNG VUÔNG cắt sẵn từ dải khung nhân vật thật (ccLopIcon) — đã là đầu và vai rồi, nên phủ kín ô là xong. Bản trước nhét nguyên bức `pick_*` cao 300px vào đây rồi phóng lên 150px và trượt lên để lấy phần đầu; nay không cần mẹo đó nữa. */ #sect-select .cc-slot-art { position:absolute; inset:0; width:100%; height:100%; max-width:none; } #sect-select .cc-slot-del { right:9px; width:26px; height:26px; border-radius:9px; border:2px solid rgba(10,14,32,.8); background:rgba(16,22,46,.85); } #sect-select .cc-slot.hoi-xoa { border-color:var(--red); background:rgba(56,20,30,.88); box-shadow:0 4px 0 rgba(28,6,12,.8), var(--ax-lap); } #sect-select .cc-slot-yes, #sect-select .cc-slot-no { border-radius:11px; border-width:2px; } /* ── Nút lớn ── */ #sect-select .big-btn { border-radius:16px; padding:12px 30px; letter-spacing:.4px; font-family:var(--font-chi); font-size:18px; background:var(--ax-vang); color:#3c2408; border:2px solid rgba(92,52,10,.85); box-shadow:0 5px 0 #a1671f, 0 8px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,246,222,.6); text-shadow:0 1px 0 rgba(255,240,206,.5); } #sect-select .big-btn:active { transform:translateY(4px); box-shadow:0 1px 0 #a1671f, 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,246,222,.6); } #sect-select #btn-newchar, #sect-select #cc-back { background:linear-gradient(180deg, rgba(60,80,132,.95), rgba(26,36,70,.96)); color:var(--text-bright); border-color:rgba(8,12,28,.9); opacity:1; box-shadow:0 5px 0 var(--ax-go), 0 8px 16px rgba(0,0,0,.36), var(--ax-lap); text-shadow:0 1px 2px rgba(0,0,0,.5); } #sect-select #btn-newchar:active, #sect-select #cc-back:active { box-shadow:0 1px 0 var(--ax-go), 0 2px 8px rgba(0,0,0,.36), var(--ax-lap); } /* ── Chọn máy chủ ── */ #sect-select .sv-nut { border:2px solid var(--ax-vien); border-radius:16px; background:var(--ax-than); box-shadow:0 4px 0 var(--ax-go), var(--ax-lap); } #sect-select .sv-nut:hover { border-color:rgba(120,190,230,.75); box-shadow:0 6px 0 var(--ax-go), var(--ax-lap); } #sect-select .sv-nut.on { border-color:#7fd4e8; box-shadow:0 4px 0 var(--ax-go), 0 0 20px rgba(127,212,232,.32), var(--ax-lap); } #sect-select .sv-nut.on .sv-ten { color:#bdf0ff; } /* Logo: đây là chỗ DUY NHẤT trong màn dùng Baloo 2, và nó hợp lệ theo đúng luật đã ghi — "chỉ dùng ở chỗ có con Axie đứng cạnh". Trong khung này có năm con. Dải kim loại lạnh của bản cũ đổi sang vàng ấm + nét viền tối dày: logo Axie đọc được bằng ĐƯỜNG BAO trước khi đọc bằng màu, mà một dải chuyển màu mảnh thì không có đường bao nào. */ #sect-select .sv-logo { font-family:var(--font-chi); font-weight:800; gap:.50em; } #sect-select .sv-logo span { background:linear-gradient(180deg,#fff6df 6%,#ffd98a 42%,#f0a93f 62%,#ffe7b4 96%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:3.5px rgba(10,14,30,.92); paint-order:stroke fill; filter:drop-shadow(0 4px 0 rgba(8,11,26,.55)) drop-shadow(0 0 26px rgba(255,190,90,.34)); } /* ═══ BẢNG BẢN ĐỒ HAI TAB — bố cục "bản đồ trái · danh sách phải" ═══ */ /* Khuôn lấy từ bảng bản đồ của dòng MMO nhìn xuống. Panel rộng ra để lọt tấm 660px; ở màn hẹp thì xếp dọc, vì bóp tấm bản đồ nhỏ hơn nữa là mất hết nhãn tên vùng. */ /* ⚠ `.panel` khai `width: min(520px,94vw)` — `max-width` KHÔNG đè được `width`. Bản đầu chỉ đặt max-width nên bảng vẫn 520px và tấm bản đồ 660px bị CẮT CỤT bên phải, mất hẳn cột danh sách. */ #panel-map { width: min(1060px, 96vw); max-width: none; } .bd-hai { display: flex; gap: 12px; align-items: flex-start; } /* `flex: 0 0 auto` khoá cứng bề ngang nên canvas không co được dù đã có max-width:100% */ /* `flex: 1 1 auto` thì tấm bản đồ ăn hết chỗ và cột danh sách bị bóp còn một chữ mỗi dòng. Cho bản đồ CO ĐƯỢC nhưng không GIÃN, và chừa sàn cứng cho cột phải. */ .bd-trai { flex: 0 1 660px; min-width: 0; } .bd-trai canvas { display: block; border: 2px solid #6b5c3c; border-radius: 4px; background: #241f16; box-shadow: inset 0 0 26px rgba(0,0,0,.6); max-width: 100%; height: auto; } .bd-chu { font-size: 10.5px; opacity: .6; margin-top: 5px; text-align: center; } .bd-phai { flex: 1 0 312px; min-width: 300px; } .bd-cuon { max-height: 500px; overflow-y: auto; padding-right: 4px; } .bd-ten { font-size: 15px; font-weight: 700; } .bd-phu { font-size: 11px; opacity: .7; margin-bottom: 6px; } .bd-ds { display: flex; flex-wrap: wrap; gap: 4px; max-height: 168px; overflow-y: auto; } .bd-npc { font: 11px "Be Vietnam Pro", sans-serif; color: #f0e2bd; cursor: pointer; background: rgba(107,92,60,.22); border: 1px solid #6b5c3c; border-radius: 3px; padding: 3px 7px; } .bd-npc:hover { background: rgba(226,196,128,.28); color: #fff6df; } .bd-loc-hang { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; } .bd-loc { font-size: 11px; opacity: .85; cursor: pointer; user-select: none; } .bd-loc input { vertical-align: -1px; margin-right: 3px; cursor: pointer; } @media (max-width: 1000px) { .bd-hai { flex-direction: column; } .bd-phai { width: 100%; } } /* ═══ Thẻ TRUYỀN TỐNG — bấm một vùng thì đọc trước, đi sau ═══ */ .tt-nen { position: absolute; inset: 0; background: rgba(8,6,3,.55); z-index: 4; border-radius: 4px; } .tt-hop { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; width: 320px; background: linear-gradient(170deg, #2b2418, #1b160e); border: 2px solid #6b5c3c; border-radius: 5px; box-shadow: 0 10px 34px rgba(0,0,0,.7); } .tt-tieu { font-family: var(--font-display); font-size: 15px; color: #ffe9a8; text-align: center; padding: 7px 0 6px; border-bottom: 1px solid #6b5c3c; position: relative; } .tt-x { position: absolute; top: 4px; right: 6px; width: 20px; height: 20px; line-height: 1; background: rgba(0,0,0,.3); border: 1px solid #6b5c3c; color: #d8c8a0; border-radius: 3px; cursor: pointer; } .tt-x:hover { background: rgba(255,107,107,.5); color: #fff; } .tt-than { padding: 9px 12px 4px; font-size: 12px; } .tt-hang { display: flex; gap: 8px; margin-bottom: 4px; align-items: baseline; } .tt-k { flex: 0 0 92px; color: #9c8e6e; } .tt-v { flex: 1 1 0; color: #f0e2bd; } .tt-canh { margin: 6px 0 2px; font-size: 11.5px; color: #f0a03a; line-height: 1.35; } .tt-nut { display: flex; gap: 6px; justify-content: center; padding: 8px 10px 10px; } .tt-nut .mini-btn:disabled { opacity: .4; cursor: not-allowed; } /* ═══ TỔ ĐỘI & BẠN BÈ ═══ */ #panel-friend, #panel-party { width: min(560px, 94vw); } .bb-trong { padding: 22px 14px; text-align: center; font-size: 12.5px; color: #9c8e6e; line-height: 1.6; } .bb-ds { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; padding-right: 3px; } .bb-dong { display: flex; align-items: center; gap: 9px; padding: 6px 8px; background: rgba(107,92,60,.14); border: 1px solid rgba(107,92,60,.55); border-radius: 4px; } .bb-dong:hover { background: rgba(226,196,128,.16); } .bb-av { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; border: 1px solid #6b5c3c; flex: 0 0 auto; } .bb-av-trong { display: flex; align-items: center; justify-content: center; color: #6b5c3c; background: rgba(0,0,0,.3); } .bb-giua { flex: 1 1 0; min-width: 0; } .bb-ten { font-size: 13px; color: #f0e2bd; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-phu { font-size: 10.5px; color: #9c8e6e; } .bb-tt { color: #ff9ec4; } .bb-nut { display: flex; gap: 4px; flex: 0 0 auto; } .bb-xam { font-size: 11px; color: #6a6255; } .bb-muc { font-size: 11.5px; color: #9aa8d4; margin: 8px 0 4px; } .bb-chu { font-size: 10.5px; color: #8a8275; margin-top: 8px; line-height: 1.5; } .bb-timhang { display: flex; gap: 6px; margin-bottom: 8px; } .bb-timhang input { flex: 1 1 0; background: rgba(0,0,0,.35); border: 1px solid #6a5a3a; border-radius: 5px; color: #e4ebff; padding: 6px 8px; font-size: 12.5px; outline: none; } .td-dau { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 11.5px; margin-bottom: 8px; } .td-buff { color: #8fd18f; } .td-trangthai { color: #9c8e6e; } .td-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .td-o { min-height: 62px; border: 1px solid #6b5c3c; border-radius: 4px; padding: 7px 9px; background: rgba(107,92,60,.12); } .td-toi { border-color: #7ecbff; background: rgba(76,141,255,.12); } .td-trong { display: flex; align-items: center; justify-content: center; border-style: dashed; opacity: .45; } .td-o-ten { font-size: 13px; color: #f0e2bd; font-weight: 600; } .td-o-phu { font-size: 10.5px; color: #9c8e6e; } .td-o-vai { font-size: 10.5px; color: #7ecbff; margin-top: 2px; } .td-o-cho { font-size: 11.5px; color: #8a8275; } .td-chua { margin-top: 9px; font-size: 11.5px; color: #f0a03a; line-height: 1.55; } .td-cai { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; } .td-nut { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; } .td-nut .mini-btn:disabled { opacity: .4; cursor: not-allowed; } /* ═══════════ BẢNG KỸ NĂNG KIỂU CÂY ═══════════ Hai cột: CÂY biểu tượng nối bằng mũi tên bên trái, khung ĐỌC CHI TIẾT bên phải — đúng bố cục ảnh mẫu chủ dự án đưa. Panel rộng min(520px,94vw) nên 280 + 8 + phần còn lại vừa khít. ⚠ Cột cây có bề rộng CỐ ĐỊNH bằng đúng 4×KN_COT trong game.js. Hai con số phải khớp nhau, nếu không thì mũi tên SVG (vẽ theo KN_COT) trỏ lệch khỏi ô. */ .kn-goc { display:flex; justify-content:flex-end; margin:-4px 0 8px; } .kn-wrap { display:flex; gap:8px; align-items:flex-start; } .kn-cay { position:relative; flex:0 0 auto; } .kn-day { position:absolute; left:0; top:0; pointer-events:none; } /* Tiêu đề nhóm của tab Khác — ảnh mẫu chủ dự án đưa có hai nhãn ("Hành vi" · "Học tập") đứng trên hai lưới ô. Nó nằm tuyệt đối trong CÙNG hệ toạ độ với ô, chỗ đứng do knY() chừa ra. ⚠ `right:0` + `min-width:0` cho vế mô tả co lại được: không có chúng thì dòng mô tả đẩy nhãn rộng ra quá khung cây, và khung chi tiết bên phải bị bóp — cùng cái bẫy `min-width:auto` đã dẫm ở dải bị động chung ngay dưới. */ .kn-nhom { position:absolute; left:0; right:0; display:flex; align-items:baseline; gap:6px; min-width:0; pointer-events:none; } .kn-nhom b { font-size:11px; color:var(--vang); letter-spacing:.3px; white-space:nowrap; } .kn-nhom::after { content:''; flex:1 1 auto; min-width:0; height:1px; align-self:center; background:linear-gradient(90deg, rgba(var(--rgb-vang),.42), transparent); } .kn-o { position:absolute; width:44px; padding:0; border-radius:var(--r-sm); cursor:pointer; background:rgba(var(--rgb-da),.55); border:1px solid var(--border-faint); display:flex; flex-direction:column; align-items:center; font-family:inherit; transition:border-color 140ms ease-out, transform 140ms ease-out; } .kn-o img { width:40px; height:40px; border-radius:5px; display:block; margin:1px; } .kn-o:hover { transform:translateY(-2px); border-color:rgba(var(--rgb-vang),.7); } .kn-o.chon { border-color:#7df9ff; box-shadow:0 0 0 1px #7df9ff, 0 0 9px rgba(125,249,255,.45); } .kn-o.khoa img { filter:grayscale(1) brightness(.45); } .kn-o.khoa .kn-lv { color:var(--text-dim); } /* Dấu + xanh ở góc — tín hiệu "nâng được ngay". Nó phải nằm ĐÈ lên mép ô chứ không đẩy ô rộng ra, nếu không 16 ô lệch lưới và mũi tên trỏ sai. */ .kn-cong { position:absolute; left:-3px; top:-4px; font-style:normal; font-size:13px; font-weight:700; line-height:1; color:#5fc96e; text-shadow:0 0 3px #06210c,0 1px 0 #06210c; } .kn-lv { display:block; font-size:10px; line-height:1.35; color:var(--gold); font-variant-numeric:tabular-nums; } /* Ô TRỐNG — cố ý vẽ thô, viền đứt, để không ai tưởng đó là một kỹ năng đã gán. */ .kn-trong { height:44px; border-style:dashed; border-color:rgba(var(--rgb-vang),.28); background:rgba(0,0,0,.22); justify-content:center; } .kn-trong span { font-size:17px; color:rgba(var(--rgb-vang),.4); line-height:1; } .kn-trong:hover { transform:none; } .kn-ct { flex:1 1 auto; min-width:0; padding:7px 8px; border-radius:var(--r-sm); background:rgba(0,0,0,.26); border:1px solid var(--border-faint); } .kn-ct-trong { font-size:10.5px; color:var(--text-dim); line-height:1.6; } .kn-ct-dau { display:flex; gap:7px; align-items:center; margin-bottom:5px; } .kn-ct-dau img { width:38px; height:38px; border-radius:5px; flex:0 0 auto; } .kn-ct-dau div { min-width:0; } .kn-ct-dau b { display:block; font-size:13px; color:var(--accent-light); line-height:1.25; } .kn-ct-dau span { font-size:10.5px; color:var(--gold); } .kn-ct-tt { font-size:10.5px; margin-bottom:6px; } .kn-ct-tt.ok { color:#7ec850; } .kn-ct-tt.no { color:var(--orange); } .kn-d { font-size:10.5px; color:var(--text-body); line-height:1.5; margin-bottom:3px; } .kn-d > span { color:var(--text-dim); } .kn-d i { font-style:normal; color:var(--text-dim); } .kn-d b.ok { color:#7ec850; } .kn-d b.no { color:#ff6b6b; } .kn-mo { color:var(--text-dim); } /* Thanh TIẾN ĐỘ trong khung chi tiết. ⚠ Tên cũ là `.kn-bar` và nó từng bị một phép đổi tên hàng loạt cuỗm mất khi thêm hàng bốn ô — đổi sang `.kn-tien` để hai thứ không còn tên giống nhau nữa. Lỗi đó không ném gì, chỉ lộ ra khi chụp màn hình. */ .kn-tien { position:relative; height:11px; border-radius:999px; margin:2px 0 6px; background:rgba(0,0,0,.45); border:1px solid var(--border-faint); overflow:hidden; } .kn-tien s { display:block; height:100%; text-decoration:none; background:linear-gradient(90deg,#3a6fd8,#7ecbff); } .kn-tien em { position:absolute; inset:0; font-style:normal; font-size:8.5px; line-height:11px; text-align:center; color:#dbe6ff; text-shadow:0 1px 0 #000; } .kn-vach { font-size:10px; letter-spacing:1px; color:var(--gold); text-align:center; margin:7px 0 5px; border-top:1px solid rgba(var(--rgb-vang),.25); padding-top:5px; } .kn-sach { font-size:10px; color:var(--orange); margin:5px 0 0; line-height:1.4; } .kn-nut { display:flex; justify-content:center; gap:6px; margin-top:7px; } .kn-nang { min-width:96px; border-color:#7ec850; color:#7ec850; font-weight:700; } .kn-nang.mo { opacity:.42; border-color:var(--border-faint); color:var(--text-dim); } /* Trục thứ hai của một chiêu — điểm tiềm năng. Màu lam ĐÚNG bằng màu bộ đếm điểm trong bảng Nhân Vật: hai chỗ nói về cùng một túi điểm thì phải cùng một màu. */ .kn-tn { min-width:96px; border-color:#7ecbff; color:#7ecbff; font-weight:700; } .kn-tn.mo { opacity:.42; border-color:var(--border-faint); color:var(--text-dim); } /* Hai nút hàng dưới: dùng Sách Kỹ Năng (nâng thẳng 1 cấp) và gán phím Space. Chúng từng nằm trong `upBtnHtml()` ở danh sách chiêu; danh sách đã thành cây nên chúng dọn về khung chi tiết. Cùng bề rộng tối thiểu với hai nút trên để hai hàng xếp thành lưới 2×2, không so le. */ .kn-sachnut { min-width:96px; border-color:var(--orange); color:var(--orange); font-weight:700; } .kn-sachnut.mo { opacity:.42; border-color:var(--border-faint); color:var(--text-dim); } .kn-space { min-width:96px; border-color:#b9a6ff; color:#b9a6ff; font-weight:700; } .kn-space.mo { opacity:.42; border-color:var(--border-faint); color:var(--text-dim); } .kn-space.dang { border-color:#7df9ff; color:#7df9ff; box-shadow:0 0 7px rgba(125,249,255,.34); } .kn-chan { font-size:9.5px; color:var(--text-dim); line-height:1.45; margin-top:7px; border-top:1px solid rgba(255,255,255,.07); padding-top:5px; } .kn-ghi { font-size:9.5px; color:var(--text-dim); line-height:1.5; margin-top:8px; } @media (prefers-reduced-motion: reduce) { .kn-o, .kn-o:hover { transition:none; transform:none; } } /* ── Thanh chiêu 4 ô trong bảng Kỹ Năng (kéo thả) ── ⚠ KHÔNG đặt tên `.kn-bar` — tên đó đã là thanh tiến độ cao 11px trong khung chi tiết, đặt trùng là hàng bốn ô bẹp dí mà không có gì báo lỗi. */ .kn-thanh { margin:0 0 9px; padding:7px 8px; border-radius:var(--r-sm); background:rgba(0,0,0,.24); border:1px solid var(--border-faint); } .kn-thanh-t { font-size:9.5px; color:var(--text-dim); margin-bottom:5px; } .kn-thanh-o { display:flex; gap:7px; } .kn-thanh-d { font-size:9.5px; color:var(--text-dim); line-height:1.5; margin-top:6px; } .kn-thanh-d b { color:var(--gold); } .kn-bo { position:relative; width:44px; height:44px; border-radius:var(--r-sm); background:rgba(var(--rgb-da),.55); border:1px solid var(--border-faint); display:flex; align-items:center; justify-content:center; } .kn-bo img { width:40px; height:40px; border-radius:5px; display:block; } .kn-bo.trong { border-style:dashed; border-color:rgba(var(--rgb-vang),.3); } .kn-bo.trong span { font-size:17px; color:rgba(var(--rgb-vang),.42); line-height:1; } .kn-bo.bd { border-color:rgba(160,255,233,.55); } .kn-bo i { position:absolute; left:2px; top:0; font-style:normal; font-size:9px; font-weight:700; color:var(--gold); text-shadow:0 1px 0 #000; } .kn-bo u { position:absolute; right:2px; top:0; text-decoration:none; font-size:10px; color:#a0ffe9; text-shadow:0 1px 0 #000; } .kn-bo s { position:absolute; left:0; right:0; bottom:-1px; text-decoration:none; font-size:8px; text-align:center; color:#ff9a6a; text-shadow:0 1px 0 #000; } /* Ô đang nhận thả — viền xanh lá, cùng màu dấu + "nâng được" của cây. */ .kn-bo.sk-nhan, #skillbar .sk-slot.sk-nhan { outline:2px solid #5fc96e; outline-offset:1px; } /* ═══ MENU HỆ THỐNG (F6) — một cái SẢNH: ba ô đếm tiền + lưới nút ═══════════════════════ Khuôn lấy từ ảnh mẫu MU chủ dự án gửi (hàng WCoinC/WCoinP/GoblintP rồi tới lưới hai cột). Nút to và thưa là CHỦ Ý: đây là cửa mở một lần rồi đi, không phải thanh bấm liên tục — ngược hẳn với ô chiêu 40px trên thanh dưới. */ #panel-help { width:min(470px,94vw); } .sys-vi { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; padding:7px 10px; margin-bottom:10px; border-radius:7px; font-size:11.5px; color:var(--text-dim); background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(198,158,74,.28); } .sys-vi i { font-style:normal; } .sys-luoi { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .sys-nut { display:flex; align-items:center; gap:9px; padding:11px 12px; cursor:pointer; border-radius:7px; font-family:inherit; font-size:12.5px; font-weight:600; text-align:left; color:#e8dcc0; background:linear-gradient(180deg,rgba(38,32,22,.94),rgba(18,15,10,.96)); border:1px solid rgba(198,158,74,.42); } .sys-nut:hover { border-color:var(--gold); color:#fff3d6; } .sys-nut:active { transform:scale(.97); } .sys-nut i { font-style:normal; font-size:17px; color:var(--gold); line-height:1; } .sys-nut span { flex:1; white-space:nowrap; } .sys-nut kbd { font-family:inherit; font-size:9.5px; padding:1px 5px; border-radius:3px; color:var(--text-dim); background:rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px rgba(198,158,74,.3); } /* ═══ NGÂN HÀNG NGỌC (N) ═══════════════════════════════════════════════════════════════ Một HÀNG mỗi loại: tranh thật · tên + số trong túi · năm nút gửi · số đang cất · nút rút. ⚠ Icon 34px chứ không 24: sáu viên xếp dọc thì hình là thứ phân biệt hàng, không phải chữ. */ #panel-ngocbank { width:min(500px,94vw); } .nb-list { display:flex; flex-direction:column; gap:4px; } .nb-row { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(198,158,74,.16); } .nb-ic { width:34px; height:34px; object-fit:contain; flex:0 0 34px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)); } .nb-ten { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; } .nb-ten b { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nb-ten span { font-size:10px; color:var(--text-dim); } .nb-nut { display:flex; gap:3px; flex:0 0 auto; } .nb-b { font-family:inherit; font-size:10px; font-weight:700; padding:3px 6px; min-width:26px; border-radius:4px; cursor:pointer; color:#e8dcc0; background:linear-gradient(180deg,rgba(40,33,23,.95),rgba(19,16,11,.96)); border:1px solid rgba(198,158,74,.45); } .nb-b:hover:not(:disabled) { border-color:var(--gold); color:#fff3d6; } .nb-b:disabled { opacity:.3; cursor:not-allowed; } .nb-kho { flex:0 0 40px; text-align:right; font-size:13px; font-weight:700; } .nb-rut { flex:0 0 auto; } .nb-chan { display:flex; align-items:center; gap:12px; margin-top:10px; font-size:11.5px; color:var(--text-dim); } .nb-note { margin-top:8px; font-size:10.5px; line-height:1.55; color:var(--text-dim); } #panel-nhat { width:min(440px,94vw); } /* ── Tab KHÁC: dải bị động chung dưới cây ───────────────────────────────────── Bốn hiệu ứng này đến từ Ascension/trang bị/cổ thư nên không nằm trong VOHOC_DEFS, tức không có ô cây nào để đứng. Giữ chúng ở đây thay vì xoá — chúng là thứ duy nhất nói cho người chơi biết mấy hiệu ứng kia từ đâu ra. */ .kn-phu { margin-top: 8px; border-top: 1px solid #2a3350; padding-top: 7px; } .kn-phu-t { font-size: 10.5px; color: #9aa8d4; margin-bottom: 5px; } .kn-phu-o { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } /* ⚠ `min-width: 0` là thứ BẮT BUỘC ở đây. Ô lưới/flex mặc định `min-width: auto` nên nó KHÔNG co xuống dưới bề rộng nội dung — `text-overflow: ellipsis` vì thế vô hiệu và hai ô cột phải tràn hẳn ra ngoài khung bảng. Chỉ nhìn ảnh chụp mới thấy. */ .kn-phu-1 { display: flex; align-items: baseline; gap: 5px; font-size: 10.5px; min-width: 0; background: #171d31; border: 1px solid #2a3350; border-radius: 5px; padding: 5px 7px; } .kn-phu-1 b { color: #a0ffe9; font-size: 11px; white-space: nowrap; } .kn-phu-1 > span:last-child { color: #8f9ec4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } .kn-phu-1.mo { opacity: .5; } .kn-phu-1.mo b { color: #8a8a8a; } .kn-phu-g { color: #5fc96e; } .kn-tt { font-size: 10.5px; color: #9aa8d4; padding: 0 2px 6px; } /* ═══════════ MÀN TẢI ═══════════ Màn đầu tiên người chơi thấy. Trước bản này không có nó: cảnh Lunacia mười lớp lắp dần ngay trước mắt, trời trước núi sau nhân vật cuối — trên mạng chậm trông như trang hỏng. ⚠ THANH CÂN THEO BYTE THẬT (data/taitro.js), không theo đồng hồ. Xem taiTroChay() trong game.js. Một thanh chạy theo setTimeout là đúng thứ dự án này đã gỡ một lần ở màn máy chủ. Khung thép vát cạnh, KHÔNG bo tròn: ngoại lệ art kiểu Axie chỉ mở trong #sect-select, và màn này không phải chỗ đó. Riêng cái LOGO thì dùng chung một cách vẽ với màn chờ — nó là cùng một logo, hiện cách nhau chưa tới một giây, ra hai kiểu là mắt đọc thành hai game. */ #preload { position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 34%, #131a34 0%, #0a0d1e 52%, #05060f 100%); transition:opacity .34s ease; } #preload.xong { opacity:0; pointer-events:none; } #preload.tat { display:none; } .pl-inner { display:flex; flex-direction:column; align-items:center; width:min(460px, 82vw); } /* Cùng một cách vẽ chữ với logo màn chờ — xem khối MÀN CHỜ KIỂU AXIE ở cuối tệp. */ #preload .sv-logo { font-family:var(--font-chi); font-weight:800; gap:.50em; margin-bottom:26px; } #preload .sv-logo span { background:linear-gradient(180deg,#fff6df 6%,#ffd98a 42%,#f0a93f 62%,#ffe7b4 96%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:3.5px rgba(10,14,30,.92); paint-order:stroke fill; filter:drop-shadow(0 4px 0 rgba(8,11,26,.55)) drop-shadow(0 0 26px rgba(255,190,90,.34)); } /* Rãnh thanh: vát bốn góc bằng clip-path chứ không bo tròn — cùng ngôn ngữ hình với khung thép đinh tán của HUD. Viền vẽ bằng một lớp nền thứ hai để clip-path không cắt mất nét. */ .pl-bar { position:relative; width:100%; height:16px; overflow:hidden; background:linear-gradient(180deg, #05070f, #0d1122); box-shadow:inset 0 0 0 1px rgba(198,158,74,.34), inset 0 2px 6px rgba(0,0,0,.8); clip-path:polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); } #pl-fill { display:block; height:100%; width:0; background:linear-gradient(180deg, #ffe9b8 0%, #f2bd62 46%, #d9902c 54%, #ffdf9f 100%); box-shadow:0 0 12px rgba(255,196,104,.45); transition:width .18s linear; } .pl-hang { display:flex; justify-content:space-between; align-items:baseline; width:100%; margin-top:9px; } #pl-nhom { font-size:12px; color:var(--text-dim); letter-spacing:.06em; } #pl-pct { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--accent-light); } .pl-byte { width:100%; margin-top:3px; font-size:10.5px; color:#6f6754; letter-spacing:.04em; } /* Mẹo chơi — mẹo THẬT, rút từ cơ chế đang chạy. Một dòng mẹo bịa ở màn tải là thứ người chơi thử ngay trong mười phút đầu rồi phát hiện ra là sai. */ .pl-tip { margin-top:30px; min-height:34px; max-width:400px; text-align:center; font-size:12px; line-height:1.6; color:#8d8570; } @media (prefers-reduced-motion: reduce){ #pl-fill { transition:none; } } /* ═══ HỆ THỐNG SỰ KIỆN — LƯỚI CÓ CỘT ═════════════════════════════════════════════════════ Khuôn lấy từ ảnh mẫu MU chủ dự án gửi: hàng tiêu đề đặc màu, rồi các hàng sọc xen kẽ, mỗi cột thẳng lối. Cái được của lưới nằm ở CỘT THỜI GIAN: bảy con số đếm ngược xếp thẳng hàng thì mắt quét một phát là ra "cái nào tới trước", còn bảy câu văn xuôi thì phải đọc hết. ⚠ MÀU thì KHÔNG chép: ảnh mẫu dùng thanh tiêu đề đỏ cam chói, đặt vào khung thép đinh tán của game này là hai ngôn ngữ hình ảnh chửi nhau (cùng lý do Baloo 2 bị gỡ khỏi `--font-display`). Dùng vàng `--gold` đang có — giữ HÌNH DẠNG, đổi bảng màu. */ /* ⚠ Lớp phủ dùng CHUNG `#overlay-inner` (max-width 560px) cho mọi màn — Bại Trận, Thăng Cấp, Kết Mở… Nới bằng `:has()` chứ ĐỪNG gắn một class vào `#overlay-inner` trong `openEventBoard`: `lopPhuMo()` trả về đúng một phần tử ấy và mọi chỗ gọi khác chỉ ghi đè `innerHTML`, không ai xoá class — nên cái class đó sẽ ở lại và nới rộng mọi lớp phủ sau đó, trong im lặng. `:has()` tự hết hiệu lực ngay khi nội dung đổi, nên không có trạng thái nào để mà quên. */ #overlay-inner:has(.sk-bang) { max-width:min(940px, 95vw); } .sk-bang { display:flex; flex-direction:column; gap:3px; margin:10px 0 4px; max-height:min(56vh, 520px); overflow-y:auto; overflow-x:auto; } /* Một khai báo lưới DUY NHẤT, dùng chung cho hàng tiêu đề và mọi hàng dữ liệu — hai bảng cột riêng là bảo đảm chúng lệch nhau ngay lần đầu ai đó sửa một bên. */ .sk-dau, .sk-hang { display:grid; grid-template-columns:34px minmax(150px,1.5fr) minmax(110px,1fr) minmax(190px,2.1fr) minmax(104px,.9fr) 82px; align-items:center; gap:8px; min-width:680px; } .sk-dau { position:sticky; top:0; z-index:2; padding:5px 8px; border-radius:5px; font-family:var(--font-display); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(180deg, var(--gold), #b8863a); box-shadow:0 2px 6px rgba(0,0,0,.5); } /* ⚠ HÀNG TIÊU ĐỀ DÙNG CHUNG TÊN LỚP VỚI Ô DỮ LIỆU (`sk-noi`, `sk-lich`, `sk-di`…) vì cả hai sinh ra từ cùng bảng `SK_COT` — đó là chủ ý, một bảng cột thì không lệch được. Nhưng nó nghĩa là MÀU của ô chảy ngược lên tiêu đề: ảnh chụp đầu tiên ra "NƠI DIỄN RA" và "LỊCH TRÌNH" xám mờ trên nền vàng (gần như không đọc được), và ô "THAM GIA" thì mọc hẳn ra một cái NÚT nền đen — vì `sk-di` là lớp của nút bấm. Nên `!important` ở đây không phải lười: nó là chỗ duy nhất chặn được dòng chảy đó mà không phải đẻ ra bảng cột thứ hai. */ .sk-dau span { text-align:center; color:#1a1408 !important; font-size:10.5px !important; font-weight:700; background:none !important; border:none !important; padding:0 !important; white-space:nowrap; } .sk-dau .sk-ten, .sk-dau .sk-noi, .sk-dau .sk-lich { text-align:left; } .sk-hang { padding:6px 8px; border-radius:5px; font-size:12px; text-align:left; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(198,158,74,.13); } .sk-hang:nth-child(odd) { background:rgba(255,255,255,.065); } /* Hàng ĐANG DIỄN RA phải nhảy ra khỏi bảng bằng cái nhìn đầu tiên — đó là cả lý do chủ dự án muốn cái bảng này ("người chơi mới biết đang là sự kiện gì"). */ .sk-hang.sk-live { background:rgba(127,224,138,.10); box-shadow:inset 0 0 0 1px rgba(127,224,138,.55); } .sk-hang .sk-tt { text-align:center; color:var(--text-dim); font-size:11px; } /* Cho tên XUỐNG DÒNG, đừng cắt cụt: bản đầu ăn mất đuôi thành "Truy Nã Lệnh & Mục Tiêu Ng…", mà một cái bảng cắt mất tên sự kiện thì hỏng đúng việc nó sinh ra để làm. */ .sk-hang .sk-ten { font-weight:600; color:#e8dcc0; line-height:1.35; } .sk-hang .sk-ten i { font-style:normal; margin-right:3px; } .sk-hang .sk-noi { color:var(--text-dim); line-height:1.35; } /* Dãy giờ là cột DÀI nhất — cho nó xuống dòng thay vì cắt cụt, vì một lịch trình cụt mất mấy mốc cuối thì tệ hơn hẳn một hàng cao thêm vài pixel. */ .sk-hang .sk-lich { color:#b9ae90; font-size:11px; line-height:1.45; } .sk-hang .sk-tg { text-align:center; white-space:nowrap; } .sk-hang .sk-di-o { text-align:center; } .sk-di { font-family:inherit; font-size:10.5px; font-weight:700; padding:4px 9px; cursor:pointer; border-radius:4px; color:#e8dcc0; white-space:nowrap; background:linear-gradient(180deg,rgba(40,33,23,.95),rgba(19,16,11,.96)); border:1px solid rgba(198,158,74,.45); } .sk-di:hover { border-color:var(--gold); color:#fff3d6; } .sk-di-live { color:#0f1a10; border-color:#7fe08a; background:linear-gradient(180deg,#9df0a8,#5cbf6c); } .sk-ghi { margin-top:8px; font-size:10.5px; line-height:1.55; color:var(--text-dim); } @media (max-width:760px){ .sk-bang { max-height:48vh; } } /* ══ CHAT ══════════════════════════════════════════════════════════════════════════════ Góc dưới-TRÁI. Nhật ký chiến đấu ở góc phải là thanh chạy một dòng; chat thì phải ĐỌC ĐƯỢC, nên nó xuống dòng (`white-space:pre-wrap`) và `word-break` để một chuỗi dài không ai gõ cách vẫn không đẩy ngang khung. */ #chat-wrap { position:fixed; left:12px; bottom:96px; width:min(320px,34vw); z-index:11; pointer-events:auto; font-size:12px; } #chat-wrap.hidden { display:none; } #chat-tabs { display:flex; align-items:center; gap:4px; margin-bottom:3px; } .chat-tab { font:inherit; padding:1px 8px; border-radius:4px; cursor:pointer; background:rgba(18,20,44,.72); color:#9aa3c7; border:1px solid var(--border-faint); } .chat-tab.on { color:#ffe6a6; border-color:#6a5a2e; background:rgba(40,34,18,.85); } #chat-trangthai { flex:1; color:#7f88ab; font-size:10.5px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #chat-thu { background:rgba(18,20,44,.72); color:#9aa3c7; border:1px solid var(--border-faint); border-radius:4px; cursor:pointer; padding:0 5px; } #chat-log { max-height:22vh; overflow-y:auto; background:rgba(18,20,44,.7); border:1px solid var(--border-faint); border-radius:5px; padding:4px 6px; } #chat-log.cl-closed, #chat-input.cl-closed { display:none; } #chat-log .ch-row { white-space:pre-wrap; word-break:break-word; line-height:1.35; margin:1px 0; } #chat-log .ch-ten { font-weight:700; } #chat-input { width:100%; margin-top:3px; box-sizing:border-box; font:inherit; background:rgba(10,12,30,.9); color:#e8ecff; padding:3px 6px; border:1px solid var(--border-faint); border-radius:5px; } #chat-input:disabled { opacity:.55; cursor:not-allowed; } @media (max-width:820px){ #chat-wrap { bottom:104px; width:min(240px,52vw); left:8px; font-size:11px; } #chat-log { max-height:16vh; } }