/* ============================================================ css/cockpit.css — BUỒNG LÁI CỦA CON: tông đèn + khung thẻ ID. Nạp SAU css/common.css và TRƯỚC css/.css ở những trang có buồng lái (dashboard · profile · shop). Tên món khai ở js/cosmetics.js, GIÁ ở server. ⚠️ GHI ĐÈ Ở `:root[data-cockpit=…]`, KHÔNG ở `body`: biến màu của dự án khai ở `:root`, nên chỗ ghi đè phải cùng cấp mới thắng mà KHÔNG cần `!important`. (`js/cosmetics.js` gán thuộc tính đó lên ``.) ⚠️ CHỈ ĐỔI MÀU, KHÔNG ĐỔI BỐ CỤC. Một tông đèn làm dịch một khối là một món trang trí phá giao diện — và nó sẽ phá ở đúng trang trẻ dùng nhiều nhất. ⚠️ TÔNG MẶC ĐỊNH KHÔNG KHAI Ở ĐÂY. `cockpit-cyan` chính là màu gốc trong css/common.css + css/dashboard.css; khai lại là hai nơi giữ một màu, và ngày đổi màu thương hiệu thì bản ở đây nói màu cũ. ============================================================ */ /* ───────── TÔNG ĐÈN BUỒNG LÁI ───────── ⚠️ PHẢI KHAI CẢ `--neon-rgb`/`--neon-hi-rgb`, KHÔNG CHỈ 4 BIẾN MÀU. `css/dashboard.css` dùng `rgba(, alpha)` cho viền, bốn góc neon và mọi quầng sáng — mà `rgba()` không nhận màu dạng hex, nên nó không đi qua `--accent` được. Thiếu hai biến này thì đổi đèn xong **chỉ chữ và nút đổi màu, còn cả bộ viền/góc/quầng vẫn cyan** — chủ dự án bắt được đúng chuyện đó 13/08/2026. Thêm tông mới thì khai đủ SÁU biến. Hai biến này là thứ dashboard/profile dùng cho mọi vệt sáng, viền và gradient (đo được: `--accent` xuất hiện ở cả HUD, nút, đèn LED và vòng cấp độ). */ :root[data-cockpit="cockpit-amber"]{ --accent:#ffcf6b; --accent-2:#ff9d5c; --cyan:#ffcf6b; --purple:#ff9d5c; --neon-rgb:255,207,107; --neon-hi-rgb:255,230,173; } :root[data-cockpit="cockpit-violet"]{ --accent:#c084fc; --accent-2:#7c5cff; --cyan:#c084fc; --purple:#7c5cff; --neon-rgb:192,132,252; --neon-hi-rgb:233,213,255; } :root[data-cockpit="cockpit-mint"]{ --accent:#63e6a8; --accent-2:#38bdf8; --cyan:#63e6a8; --purple:#38bdf8; --neon-rgb:99,230,168; --neon-hi-rgb:182,245,216; } :root[data-cockpit="cockpit-rose"]{ --accent:#ff9db4; --accent-2:#c084fc; --cyan:#ff9db4; --purple:#c084fc; --neon-rgb:255,157,180; --neon-hi-rgb:255,208,220; } /* ───────── KHUNG THẺ ID ───────── Áp lên `.ava-frame` (select.html) và `.avatar-ring .shot` (profile.html). Chỉ đổi viền và quầng sáng — KHÔNG đổi kích cỡ, vì ảnh nhân vật đã được canh theo `--z`. ⚠️ `.avatar-ring .shot` KHÔNG có `border` nào ở css/profile.css (đã đọc, không đoán), nên chỉ đặt `border-color` là **không hiện gì**. Phải khai cả bề dày — đúng loại lỗi "có CSS không chứng minh được người dùng thấy gì". Bề dày để 2px cho khớp `.ava-frame` của select.html. */ :root:not([data-frame="frame-steel"]) .avatar-ring .shot{border:2px solid transparent;} :root[data-frame="frame-gold"] .ava-frame, :root[data-frame="frame-gold"] .avatar-ring .shot{ border-color:rgba(255,207,107,.9); box-shadow:0 0 26px -6px rgba(255,207,107,.75), inset 0 0 18px -8px rgba(255,207,107,.6); } :root[data-frame="frame-nebula"] .ava-frame, :root[data-frame="frame-nebula"] .avatar-ring .shot{ border-color:rgba(192,132,252,.9); box-shadow:0 0 28px -6px rgba(192,132,252,.8), inset 0 0 20px -8px rgba(56,189,248,.55); } :root[data-frame="frame-ice"] .ava-frame, :root[data-frame="frame-ice"] .avatar-ring .shot{ border-color:rgba(190,232,255,.92); box-shadow:0 0 26px -6px rgba(190,232,255,.8), inset 0 0 18px -8px rgba(120,200,255,.6); } /* ═════════ HÌNH DÁN BẢNG ĐIỀU KHIỂN (thêm 13/08/2026) ═════════ Loại món đầu tiên là một VẬT, không phải một màu. Tông đèn và khung thẻ chỉ đổi màu sẵn có, nên trẻ mua rồi vẫn khó chỉ ra "món của con nằm ở đâu"; một hình dán thì chỉ được đúng chỗ. ⚠️⚠️ DÁN VÀO BẢNG TÊN TÀU (`.ship-id`) LÀM MỘT Ô CỦA HÀNG FLEX — ĐỂ BỐ CỤC TỰ CHỪA CHỖ, KHÔNG PHỦ LÊN GÌ CẢ. Bản đầu treo nó ở mép trên bảng Thống Kê (`position:absolute; bottom:calc(100% - 20px)`) và **số đo bác bỏ**: trên 1440×900 nó chồng 202px² vào `.sh-right`, còn trên 390×844 thì bảng Thống Kê nằm sát mép trên nên hình dán rơi ra **NGOÀI khung nhìn (y = −16)** và đè 3.009px² lên header dính. Đi tìm một "khoảng trống" trong bố cục chảy là cách chắc chắn có ngày hết chỗ ở một khổ máy nào đó; để flex chia chỗ thì **không thể chồng**, đúng lối "bảo đảm bằng cấu tạo" của mê cung luôn giải được. ⚠️ CHƯA DÁN GÌ THÌ `display:none`, KHÔNG PHẢI Ô TRONG SUỐT. Là ô flex nên một hộp rỗng vẫn ăn `gap` 11px + bề rộng của nó — tức chọn "chưa dán gì" mà bảng tên tàu vẫn giãn ra một khoảng không ai hiểu vì sao. ⚠️ MỘT BIẾN `--d` QUYẾT CỠ, mọi nét vẽ tính theo nó. Cùng một hình phải sống ở hai cỡ rất khác nhau (28px trên bảng tên tàu · 44px ở ô xem trước); gõ cứng px thì hình ở ô xem trước tràn ra ngoài, mà đó lại là chỗ trẻ nhìn để quyết định tiêu tiền — ô xem trước khác món nhận được là một lời nói sai. ⚠️ `pointer-events:none` VẪN BẮT BUỘC dù nay nó không phủ lên ai: `.ship-id` nằm trong header, cạnh nút Về / chip avatar / nút Đăng xuất. Cùng bài học `.ver-badge` và `#loader` — một lớp trang trí nuốt cú bấm là lỗi mà người dùng chỉ tưởng mình bấm trượt. ⚠️ VẼ BẰNG CSS, KHÔNG THÊM FILE ẢNH. Kho ảnh đã qua một đợt cắt 96% (72,4 MB → 2,79 MB); thêm 4 PNG cho 4 món trang trí là đi ngược đúng việc đó. Và ảnh gốc thì chủ dự án đặt vào, không phải tôi tự sinh. ⚠️ MỖI HÌNH MỘT MÀU RIÊNG, KHÔNG lấy `var(--accent)`. Lấy theo tông đèn thì đổi đèn là hình dán đổi màu theo — hai món trở thành một, và trẻ mất đúng cái cảm giác "hai thứ này con tự phối". Màu để hơi trong nên nằm được trên mọi tông. Một khai báo phục vụ CẢ HAI chỗ: hình dán thật trên dashboard (`.decal`) và ô xem trước ở cửa hàng (`.cos-sw--decal-*`). Tách hai bản là sớm muộn ô xem trước khác thứ trẻ nhận được — đúng lỗi "hai nguồn sự thật cho một bố cục" của thẻ khoe. ⚠️⚠️ KHAI CHUNG MỘT BỘ RULE VẪN KHÔNG ĐỦ — ĐỘ ƯU TIÊN PHẢI BẰNG NHAU. Trước 22/08/2026 rule nền dùng `.cos-sw[class*="cos-sw--decal-"]::after` (0,2,1) trong khi rule riêng của từng hình dán là `.cos-sw--decal-comet::after` (0,1,1) → **rule nền THẮNG và `transform` riêng của từng hình bị bỏ**, nên ba trong bốn hình dán (comet −16° · orbit −18° · ringed −16°) xem trước KHÔNG nghiêng trong khi trên tàu thì nghiêng. Im lặng tuyệt đối: cả hai rule đọc ra đều hợp lệ, chỉ RENDER rồi so `getComputedStyle` mới thấy. Vì thế mọi rule riêng phải viết `.cos-sw.cos-sw--decal-*` — **thêm hình dán mới thì viết đúng khuôn đó**, `scratchpad/probe_decal_match.py` canh chuyện này. ⚠️ Và mọi độ dài phải tính theo `--d`. `--d` là 32px trên tàu, 44px ở ô xem trước, nên một giá trị `px` tuyệt đối là hai kích cỡ khác nhau về tỉ lệ. */ .decal{ /* 32px = đúng chiều cao logo astroQ (`--logo-h`) đứng cạnh, nên hàng không cao thêm một pixel nào — đã đo ở cả 7 khổ màn. Bản 28px thì hình đọc ra hơi nhỏ. */ --d:32px; display:none;position:relative;flex:none; width:var(--d);height:var(--d); pointer-events:none; /* ⚠️ KHÔNG xoay hộp ở đây. Bản trước để `transform:rotate(-8deg)` cho sticker nghiêng "dán hơi lệch" cho có chất — nhưng ô xem trước ở cửa hàng KHÔNG có góc đó (không thể thêm: `.cos-sw` có viền và nền riêng, xoay cả hộp là xoay luôn viền), nên hai chỗ vẽ ra hai hình. Chủ dự án chơi thật và báo đúng chuyện đó (22/08/2026). Một món trang trí nghiêng 8° không đáng bằng việc ô xem trước nói thật về thứ trẻ sắp mua. */ } /* Có khai `data-decal` VÀ không phải "chưa dán gì" thì mới hiện. Đòi cả hai vế: trang nào không nạp `js/cosmetics.js` thì không có thuộc tính đó, và ở đó `:not(...)` một mình sẽ khớp → hiện ra một hộp rỗng 28px không ai hiểu là gì. */ :root[data-decal]:not([data-decal="decal-none"]) .decal{display:block;} .cos-sw[class*="cos-sw--decal-"]{--d:44px;position:relative;overflow:hidden;} /* Hai lớp vẽ, canh giữa hộp. Canh giữa + mọi cỡ tính theo `--d` nên cùng một hình dùng được ở bảng tên tàu (28px) và ô xem trước (44px) mà không méo. */ .decal::before,.decal::after, .cos-sw[class*="cos-sw--decal-"]::before, .cos-sw[class*="cos-sw--decal-"]::after{ content:"";position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); } /* ── Chưa dán gì: ô xem trước phải NÓI RA là trống, không để một ô đen ── Một ô trống không có dấu hiệu gì đọc ra thành "ảnh tải hỏng". */ .cos-sw--decal-none{ background:rgba(148,163,184,.07); border-style:dashed;border-color:rgba(148,163,184,.4); } /* ── Sao Chổi Bay: đầu sáng + đuôi thót dần ── Đuôi là dải mờ dần về phía sau, KHÔNG phải một thanh đặc: bài học vệt lửa ở ARCADE-01 và vệt sao ở màn warp — dải đặc đọc ra thành vệt bẩn, không ra luồng. */ :root[data-decal="decal-comet"] .decal::before, .cos-sw.cos-sw--decal-comet::before{ width:calc(var(--d)*.3);height:calc(var(--d)*.3);border-radius:50%; margin-left:calc(var(--d)*.23); background:radial-gradient(circle at 38% 34%,#fff,#8fd8ff 44%,#38bdf8 78%); box-shadow:0 0 calc(var(--d)*.24) calc(var(--d)*-.03) rgba(56,189,248,.95); } /* ⚠️ ĐUÔI LÀ TAM GIÁC THÓT DẦN, KHÔNG PHẢI THANH BO TRÒN — soi ảnh chụp thì bản thanh `border-radius:999px` cao đều đọc ra thành **một cái thanh có đầu tròn** (như núm trượt), không ra sao chổi. Mắt nhận ra sao chổi nhờ đuôi LOE ra từ đầu rồi tan, nên phải là hình thót. Cùng bài học "đọc sai nghĩa" của bộ icon sticker: vẽ đúng ý mà sai hình thì người xem hiểu ra một đồ vật khác. */ :root[data-decal="decal-comet"] .decal::after, .cos-sw.cos-sw--decal-comet::after{ width:calc(var(--d)*.66);height:calc(var(--d)*.34); margin-left:calc(var(--d)*-.13); background:linear-gradient(90deg,rgba(56,189,248,0),rgba(143,216,255,.95)); clip-path:polygon(0 50%,100% 6%,100% 94%); transform:translate(-50%,-50%) rotate(-16deg); } /* ── Vòng Quỹ Đạo: hành tinh nhỏ + đường quỹ đạo nét đứt ── */ :root[data-decal="decal-orbit"] .decal::before, .cos-sw.cos-sw--decal-orbit::before{ width:calc(var(--d)*.29);height:calc(var(--d)*.29);border-radius:50%; background:radial-gradient(circle at 36% 32%,#ffe6ad,#ffcf6b 52%,#e0a63c); box-shadow:0 0 calc(var(--d)*.2) calc(var(--d)*-.06) rgba(255,207,107,.9); } :root[data-decal="decal-orbit"] .decal::after, .cos-sw.cos-sw--decal-orbit::after{ width:calc(var(--d)*.84);height:calc(var(--d)*.4);border-radius:50%; border:max(1px, calc(var(--d)*.047)) dashed rgba(190,232,255,.8); transform:translate(-50%,-50%) rotate(-18deg); } /* ── Hành Tinh Có Vành ── Vành là ellipse ĐI QUA hành tinh (nằm sau đĩa ở nửa trên, trước ở nửa dưới thì phải cắt hình — quá tốn cho một món trang trí). Ở cỡ này mắt vẫn đọc ra "hành tinh có vành", nên giữ đơn giản. */ :root[data-decal="decal-ringed"] .decal::before, .cos-sw.cos-sw--decal-ringed::before{ width:calc(var(--d)*.46);height:calc(var(--d)*.46);border-radius:50%; background:radial-gradient(circle at 34% 30%,#e9d5ff,#c084fc 50%,#7c5cff); box-shadow:0 0 calc(var(--d)*.23) calc(var(--d)*-.09) rgba(192,132,252,.95); } :root[data-decal="decal-ringed"] .decal::after, .cos-sw.cos-sw--decal-ringed::after{ width:calc(var(--d)*.86);height:calc(var(--d)*.29);border-radius:50%; border:max(1px, calc(var(--d)*.062)) solid rgba(255,207,107,.92); transform:translate(-50%,-50%) rotate(-16deg); } /* ── Chùm Sao Nhỏ: hai ngôi sao bốn cánh ── Sao bốn cánh vẽ bằng `clip-path`, KHÔNG bằng hai thanh chéo chồng nhau: chỗ giao của hai thanh cho ra một ô vuông sáng ở giữa, và mắt đọc nó thành DẤU CỘNG chứ không ra ngôi sao — cùng họ với bảy lỗi "đọc sai nghĩa" của bộ icon sticker. */ :root[data-decal="decal-stars"] .decal::before, .cos-sw.cos-sw--decal-stars::before{ width:calc(var(--d)*.54);height:calc(var(--d)*.54); margin:calc(var(--d)*-.09) 0 0 calc(var(--d)*-.13); background:linear-gradient(140deg,#fff,#bee8ff); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); filter:drop-shadow(0 0 calc(var(--d)*.16) rgba(190,232,255,.95)); } :root[data-decal="decal-stars"] .decal::after, .cos-sw.cos-sw--decal-stars::after{ width:calc(var(--d)*.3);height:calc(var(--d)*.3); margin:calc(var(--d)*.16) 0 0 calc(var(--d)*.23); background:linear-gradient(140deg,#fff,#ffcf6b); clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); filter:drop-shadow(0 0 calc(var(--d)*.13) rgba(255,207,107,.9)); } /* ───────── TÊN PHI THUYỀN (dashboard) ───────── Chưa đặt tên thì KHÔNG hiện khối này (JS gắn `hidden`) — một dòng trống có nhãn đọc ra như chỗ bị lỗi. */ .ship-name{ font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em; color:var(--accent);text-transform:uppercase;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:min(46vw,260px); } .ship-name[hidden]{display:none;} /* ───────── Ô XEM TRƯỚC (dùng ở cửa hàng và ở hồ sơ) ───────── Xem trước bằng CLASS chứ không bằng style inline do JS sinh: quy tắc 1 mục 2. */ .cos-sw{width:100%;height:52px;border-radius:12px;border:1px solid var(--brd,rgba(148,163,184,.28));} .cos-sw--cockpit-cyan {background:linear-gradient(120deg,#38bdf8,#8f7bff);} .cos-sw--cockpit-amber {background:linear-gradient(120deg,#ffcf6b,#ff9d5c);} .cos-sw--cockpit-violet{background:linear-gradient(120deg,#c084fc,#7c5cff);} .cos-sw--cockpit-mint {background:linear-gradient(120deg,#63e6a8,#38bdf8);} .cos-sw--cockpit-rose {background:linear-gradient(120deg,#ff9db4,#c084fc);} .cos-sw--frame-steel {background:radial-gradient(circle at 50% 45%,#1b2540 58%,transparent 59%), linear-gradient(120deg,#94a3b8,#64748b);} .cos-sw--frame-gold {background:radial-gradient(circle at 50% 45%,#1b2540 58%,transparent 59%), linear-gradient(120deg,#ffcf6b,#e0a63c);} .cos-sw--frame-nebula {background:radial-gradient(circle at 50% 45%,#1b2540 58%,transparent 59%), linear-gradient(120deg,#c084fc,#38bdf8);} .cos-sw--frame-ice {background:radial-gradient(circle at 50% 45%,#1b2540 58%,transparent 59%), linear-gradient(120deg,#bee8ff,#7cc4ff);}