/* Lớp component kiểu Gameboy phiêu lưu (người dùng 21/10/2026: "UI phong cách claude tối giản như hiện tại, component phong cách
   gameboy phiêu lưu"; khởi đầu từ nút "Đã đọc"). Khung trang (thanh bên, thanh trên, chữ bài) vẫn là site-kit + theme.css; tệp này
   chỉ đổi component: khung Mục tiêu, mục Khi đi thi / Tóm tắt, câu hỏi, đáp án, trang trước/sau, khối code, nút.
   Nạp SAU theme.css ở mọi wiki, và trong ứng dụng /app/ (scripts/app.mjs chèn link) nên chỉ dựa vào biến của site-kit.
   Ô pixel --P = 2px. Khung: lớp ::before ghép nhiều dải màu (linear-gradient) thành hình chữ nhật bo bậc thang (lớn 4-2-1-1 ô,
   nhỏ 2-1 ô như nút "Đã đọc"), viền --px-b, nền --px-f; bóng pixel lệch --px-d bằng drop-shadow nên ôm đúng bậc thang.
   Nút nhỏ: viền 4 box-shadow (góc khía một ô). Chuyển động dùng steps() cho nhịp máy chơi game; --motion 0 thì đứng yên. */
:root {
  --P: 2px;
  --gb-bg: oklch(.89 .085 124); --gb-ink: oklch(.36 .075 140); --gb-hi: oklch(.78 .14 82);
  --gb-gold: oklch(.80 .135 84); --gb-gold-hi: oklch(.95 .07 96); --gb-gold-lo: oklch(.60 .12 68);
  --bad: oklch(.62 .135 33); --bad-ink: oklch(.53 .14 33);
  --px-ink: var(--text);
  --px-soft: color-mix(in oklab, var(--text) 28%, var(--bg));
  --px-shade: color-mix(in oklab, var(--text) 18%, var(--bg));
}
:root[data-theme="dark"] {
  --gb-bg: oklch(.40 .065 138); --gb-ink: oklch(.90 .09 122); --gb-hi: oklch(.84 .13 85);
  --bad: oklch(.70 .11 35); --bad-ink: oklch(.77 .10 38);
  --px-ink: color-mix(in oklab, var(--text) 82%, var(--bg));
  --px-soft: color-mix(in oklab, var(--text) 30%, var(--bg));
  --px-shade: color-mix(in oklab, #000 42%, var(--bg));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --gb-bg: oklch(.40 .065 138); --gb-ink: oklch(.90 .09 122); --gb-hi: oklch(.84 .13 85);
  --bad: oklch(.70 .11 35); --bad-ink: oklch(.77 .10 38);
  --px-ink: color-mix(in oklab, var(--text) 82%, var(--bg));
  --px-soft: color-mix(in oklab, var(--text) 30%, var(--bg));
  --px-shade: color-mix(in oklab, #000 42%, var(--bg));
} }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0 !important; } }

/* ---------- khung pixel ---------- */
/* :where() giữ độ ưu tiên 0 để luật riêng của từng component (màu viền, nền, bóng) luôn thắng phần chung này. */
:where(.callout, .quiz, .theory .t-sec.is-example, .theory .t-sec.is-exam, .theory .t-sec.is-summary, .pager-link, .qz-sub, .quiz-opt) {
  --px-b: var(--px-ink); --px-f: var(--surface); --px-s: var(--px-shade); --px-d: var(--P);
  position: relative; isolation: isolate; border-color: transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
:where(.callout, .quiz, .theory .t-sec.is-example, .theory .t-sec.is-exam, .theory .t-sec.is-summary, .pager-link, .qz-sub)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 4) var(--P) / calc(100% - var(--P) * 8) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 2) calc(var(--P) * 2) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-f) 0 0) var(--P) calc(var(--P) * 4) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 8),
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 4) 0 / calc(100% - var(--P) * 8) 100%,
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 2) var(--P) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-b) 0 0) var(--P) calc(var(--P) * 2) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-b) 0 0) 0 calc(var(--P) * 4) / 100% calc(100% - var(--P) * 8);
  background-repeat: no-repeat;
  filter: drop-shadow(var(--px-d) var(--px-d) 0 var(--px-s));
  transition: filter calc(90ms * var(--motion, 1)) steps(2);
}
.quiz-opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--px-f) 0 0) calc(var(--P) * 2) var(--P) / calc(100% - var(--P) * 4) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-f) 0 0) var(--P) calc(var(--P) * 2) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 4),
    linear-gradient(var(--px-b) 0 0) calc(var(--P) * 2) 0 / calc(100% - var(--P) * 4) 100%,
    linear-gradient(var(--px-b) 0 0) var(--P) var(--P) / calc(100% - var(--P) * 2) calc(100% - var(--P) * 2),
    linear-gradient(var(--px-b) 0 0) 0 calc(var(--P) * 2) / 100% calc(100% - var(--P) * 4);
  background-repeat: no-repeat;
  filter: drop-shadow(var(--px-d) var(--px-d) 0 var(--px-s));
  transition: filter calc(90ms * var(--motion, 1)) steps(2);
}

/* Nhãn kiểu hộp thoại game: chữ mono in hoa thưa, mũi tên pixel ▶ phía trước. */
.callout-title, .quiz-label {
  display: flex; align-items: center; gap: 9px;
  font: 700 11.5px/1.3 var(--mono) !important; letter-spacing: .12em !important; text-transform: uppercase;
}
.callout-title::before, .quiz-label::before {
  content: ""; flex: none; width: 6px; height: 10px; background: currentColor;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
}
/* Đường kẻ trong khung: chấm pixel 2px. */
.quiz-why, .quiz-src {
  border-top: 0 !important;
  background: repeating-linear-gradient(90deg, var(--px-soft) 0 var(--P), transparent var(--P) calc(var(--P) * 3)) 0 0 / 100% var(--P) no-repeat;
}

/* ---------- khung Mục tiêu, ghi chú ---------- */
.callout { padding: 18px 22px 8px; }
.callout-goal { --px-f: color-mix(in oklab, var(--accent) 7%, var(--surface)); --px-s: var(--accent); }
.callout-goal .callout-title { color: var(--accent-ink); }
.callout-trap { --px-f: color-mix(in oklab, var(--accent) 12%, var(--surface)); --px-b: var(--accent-ink); }
.callout-tip, .callout-note { --px-b: var(--px-soft); --px-d: 0px; }
:root[data-theme="dark"] .callout-goal { --px-s: color-mix(in oklab, var(--accent) 55%, #000); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .callout-goal { --px-s: color-mix(in oklab, var(--accent) 55%, #000); } }

/* ---------- mục Ví dụ, Khi đi thi, Tóm tắt: bảng nền ngả, viền nhạt, không bóng ---------- */
.theory .t-sec:is(.is-example, .is-exam, .is-summary) { --px-b: var(--px-soft); --px-f: var(--bg-side); --px-d: 0px; padding: 6px 26px 4px; }

/* ---------- câu hỏi ---------- */
.quiz { padding: 20px 22px; }
.quiz-label { color: var(--accent-ink); }
/* Đáp án: khung nhỏ nét nhạt; rê chuột: nét đậm, nhấc lên, hiện bóng; bấm: lún xuống như phím. */
.quiz-opt { --px-b: var(--px-soft); --px-f: var(--bg); --px-d: 0px; padding: 10px 14px; transition: transform calc(90ms * var(--motion, 1)) steps(2), opacity calc(150ms * var(--motion, 1)); }
@media (hover: hover) { .quiz:not(.is-answered) .quiz-opt:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.quiz:not(.is-answered) .quiz-opt:active { --px-b: var(--px-ink); --px-d: 0px; transform: translate(var(--P), var(--P)); }
.quiz-opt:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* Phím chữ cái: ô vuông khía góc như nút máy chơi game. */
.quiz-key {
  display: inline-grid; place-items: center; align-self: flex-start; flex: none; width: 22px; height: 22px; min-width: 0; margin: 1px 2px 0;
  font: 700 11px/1 var(--mono) !important; color: var(--text-2) !important; background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft);
}
.quiz-text { padding-top: 1px; }
/* Đúng: màn xanh Gameboy, nảy lên; sai: cam đỏ dịu, rung hai nhịp. */
.quiz-opt.is-right { --px-b: var(--gb-ink); --px-f: var(--gb-bg); --px-s: color-mix(in oklab, var(--gb-ink) 40%, var(--bg)); --px-d: var(--P); color: var(--gb-ink); opacity: 1 !important; }
.quiz-opt.is-right .quiz-key { background: var(--gb-ink); color: var(--gb-bg) !important; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--gb-ink), 0 var(--P) 0 0 var(--gb-ink), calc(-1 * var(--P)) 0 0 0 var(--gb-ink), var(--P) 0 0 0 var(--gb-ink); }
.quiz-opt.is-wrong { --px-b: var(--bad-ink); --px-f: color-mix(in oklab, var(--bad) 13%, var(--bg)); color: var(--text); opacity: 1 !important; }
.quiz-opt.is-wrong .quiz-key { background: var(--bad-ink); color: var(--bg) !important; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--bad-ink), 0 var(--P) 0 0 var(--bad-ink), calc(-1 * var(--P)) 0 0 0 var(--bad-ink), var(--P) 0 0 0 var(--bad-ink); }
.quiz-opt.is-right.is-chosen { animation: px-pop calc(320ms * var(--motion, 1)) steps(4); }
.quiz-opt.is-wrong { animation: px-shake calc(300ms * var(--motion, 1)) steps(6); }
@keyframes px-pop { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } 70% { transform: translateY(1px); } }
@keyframes px-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.quiz-why, .quiz-src { padding-top: 14px; }
.quiz:has(.quiz-opt.is-chosen.is-right) .quiz-verdict { color: var(--gb-ink); }
.quiz:has(.quiz-opt.is-chosen.is-wrong) .quiz-verdict { color: var(--bad-ink); }

/* ---------- trang trước / sau ---------- */
.pager-link { --px-b: var(--px-soft); --px-d: 0px; padding: 16px 18px; transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .pager-link:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.pager-link:active { --px-b: var(--px-ink); --px-d: 0px; transform: translate(var(--P), var(--P)); }

/* ---------- khối code: viền pixel nhạt (góc khía), nút vuông ---------- */
.code, .theory .t-code { border: 0 !important; border-radius: 0 !important; margin-left: var(--P); margin-right: var(--P);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.theory pre.out { border: 0 !important; border-radius: 0 !important; margin-left: var(--P); margin-right: var(--P);
  box-shadow: 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.theory .t-code.has-out { margin-bottom: var(--P); }
.tool, .run-btn { border-radius: 0 !important; }
.run-btn { height: 26px; margin: 0 var(--P); padding: 0 10px 0 8px; font: 700 12px/1 var(--mono); letter-spacing: .04em;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 currentColor, 0 var(--P) 0 0 currentColor, calc(-1 * var(--P)) 0 0 0 currentColor, var(--P) 0 0 0 currentColor;
  transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .run-btn:hover { background: color-mix(in oklab, currentColor 12%, transparent); } }
.run-btn:active { transform: translate(var(--P), var(--P)); }

/* ---------- nút chung (ứng dụng, thanh trên) ---------- */
.btn, .anim-play { margin: var(--P); }
.btn, .acct, .anim-play {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-b, var(--px-ink)), 0 var(--P) 0 0 var(--px-b, var(--px-ink)), calc(-1 * var(--P)) 0 0 0 var(--px-b, var(--px-ink)), var(--P) 0 0 0 var(--px-b, var(--px-ink)),
    var(--P) calc(var(--P) * 2) 0 0 var(--px-shade);
  transition: transform calc(90ms * var(--motion, 1)) steps(2);
}
.acct { --px-b: var(--px-soft); box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-b), 0 var(--P) 0 0 var(--px-b), calc(-1 * var(--P)) 0 0 0 var(--px-b), var(--P) 0 0 0 var(--px-b); }
@media (hover: hover) { .btn:not(:disabled):hover, .anim-play:hover { transform: translateY(calc(-1 * var(--P))); } .acct:hover { --px-b: var(--px-ink); } }
.btn:not(:disabled):active, .anim-play:active { transform: translate(var(--P), var(--P)); box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); }
.btn.is-primary { --px-b: var(--px-ink); }
.search-box { border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft) !important; }
.search-box:focus-within { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink) !important; }
.tab.is-active::after { height: 4px; border-radius: 0; bottom: 0; }

/* ---------- danh sách kiểu menu game: rê chuột vào dòng thì hiện con trỏ pixel ▶ bên trái ---------- */
:is(.phases .phase, .qz-level-head, .row) { position: relative; border-radius: 0 !important; }
:is(.phases .phase, .qz-level-head, .row)::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: -16px; width: 6px; height: 10px; margin-top: -5px; background: var(--accent); opacity: 0;
  clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px);
}
@media (hover: hover) { :is(.phases .phase, .qz-level-head, .row):hover::before { opacity: 1; animation: px-nudge calc(600ms * var(--motion, 1)) steps(1) infinite; } }
:is(.phases .phase, .qz-level-head, .row):focus-visible::before { opacity: 1; }
@keyframes px-nudge { 50% { transform: translateX(2px); } }
[dir="rtl"] :is(.phases .phase, .qz-level-head, .row)::before { transform: scaleX(-1); animation: none; }

/* ---------- bài tập CP: ô đánh dấu pixel (vuông rỗng / vuông có dấu tích) ---------- */
.pr-check > svg { display: none; }
.pr-check::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.pr.is-done .pr-check { color: var(--gb-ink); }
.pr.is-done .pr-check::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8zM1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M0 0h9v1H0zM0 8h9v1H0zM0 1h1v7H0zM8 1h1v7H8zM1 4h1v1H1zM2 5h1v1H2zM3 6h1v1H3zM4 5h1v1H4zM5 4h1v1H5zM6 3h1v1H6zM7 2h1v1H7z'/%3E%3C/svg%3E"); }

/* ---------- hình mô phỏng CP: nút, ô nhập, nhãn nguồn vuông viền pixel ---------- */
.vz-btn, .vz-f input[type=text], .vz-f input[type=number], .theory .ref-src {
  border: 0 !important; border-radius: 0 !important; margin: var(--P);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }
.vz-btn { font: 700 12px/1 var(--mono); transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .vz-btn:hover { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); transform: translateY(calc(-1 * var(--P))); } }
.vz-btn:active { transform: translate(var(--P), var(--P)); }
.vz-btn.is-on { box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--accent), 0 var(--P) 0 0 var(--accent), calc(-1 * var(--P)) 0 0 0 var(--accent), var(--P) 0 0 0 var(--accent); }
.vz-f input:focus-visible { outline: 0; box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--accent), 0 var(--P) 0 0 var(--accent), calc(-1 * var(--P)) 0 0 0 var(--accent), var(--P) 0 0 0 var(--accent); }

/* ---------- trắc nghiệm trong ứng dụng (/app/#/quiz) ---------- */
.qz-sub { --px-b: var(--px-soft); --px-d: 0px; transition: transform calc(90ms * var(--motion, 1)) steps(2); }
@media (hover: hover) { .qz-sub:hover { --px-b: var(--px-ink); --px-d: var(--P); transform: translateY(calc(-1 * var(--P))); } }
.qz-bar { height: 10px; border-radius: 0; margin-left: var(--P); margin-right: var(--P); background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink); }
.qz-bar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, color-mix(in oklab, var(--accent) 65%, #000) 6px 8px); transition: width calc(200ms * var(--motion, 1)) steps(4); }
.qz-cell { border: 0 !important; border-radius: 0 !important; margin: var(--P); background: var(--surface);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); font-family: var(--mono); }
.qz-cell.is-done { background: var(--active); }
.qz-cell.is-right { background: var(--gb-bg) !important; color: var(--gb-ink) !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--gb-ink), 0 var(--P) 0 0 var(--gb-ink), calc(-1 * var(--P)) 0 0 0 var(--gb-ink), var(--P) 0 0 0 var(--gb-ink); }
.qz-cell.is-wrong { background: color-mix(in oklab, var(--bad) 13%, var(--bg)) !important; color: var(--text) !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--bad-ink), 0 var(--P) 0 0 var(--bad-ink), calc(-1 * var(--P)) 0 0 0 var(--bad-ink), var(--P) 0 0 0 var(--bad-ink); }
.qz-cell.is-current { outline: 0 !important; color: var(--text);
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-ink), 0 var(--P) 0 0 var(--px-ink), calc(-1 * var(--P)) 0 0 0 var(--px-ink), var(--P) 0 0 0 var(--px-ink), var(--P) calc(var(--P) * 2) 0 0 var(--accent); }
.qz-code { border-radius: 0; }
.quiz-learn-kind { border: 0 !important; border-radius: 0 !important; margin: var(--P); font-family: var(--mono) !important; letter-spacing: .1em !important;
  box-shadow: 0 calc(-1 * var(--P)) 0 0 var(--px-soft), 0 var(--P) 0 0 var(--px-soft), calc(-1 * var(--P)) 0 0 0 var(--px-soft), var(--P) 0 0 0 var(--px-soft); }

/* ---------- nút "Đã đọc" ---------- */
/* Khung pixel bo bậc thang 2-1 ô (viền vẽ bằng drop-shadow trên lớp .mark-frame, nền cắt theo --mk-clip), bấm thì lún như phím
   máy chơi game; đã đọc thì nền xanh màn Gameboy, dấu tích pixel. Lúc đánh dấu (achieve() trong site.js): nút nảy, cúp vàng pixel
   bật lên thẳng cột giữa phía trên nút, hạt pixel bung từ cúp (người dùng 21/10/2026: chỉ cần cúp, không chữ, đặt giữa trên nút). */
.mark {
  --mk-b: var(--px-ink); --mk-bg: var(--surface); --mk-ink: var(--text-2); --mk-s: var(--px-shade);
  --mk-clip: polygon(0 calc(var(--P) * 2), var(--P) calc(var(--P) * 2), var(--P) var(--P), calc(var(--P) * 2) var(--P), calc(var(--P) * 2) 0,
    calc(100% - var(--P) * 2) 0, calc(100% - var(--P) * 2) var(--P), calc(100% - var(--P)) var(--P), calc(100% - var(--P)) calc(var(--P) * 2),
    100% calc(var(--P) * 2), 100% calc(100% - var(--P) * 2), calc(100% - var(--P)) calc(100% - var(--P) * 2), calc(100% - var(--P)) calc(100% - var(--P)),
    calc(100% - var(--P) * 2) calc(100% - var(--P)), calc(100% - var(--P) * 2) 100%, calc(var(--P) * 2) 100%, calc(var(--P) * 2) calc(100% - var(--P)),
    var(--P) calc(100% - var(--P)), var(--P) calc(100% - var(--P) * 2), 0 calc(100% - var(--P) * 2));
  position: relative; isolation: isolate; gap: 8px; height: 32px; padding: 0 14px 0 12px; border: 0; border-radius: 0; background: none;
  color: var(--mk-ink); font-weight: 600; letter-spacing: .01em;
  transition: transform calc(90ms * var(--motion, 1)) steps(2), color calc(90ms * var(--motion, 1)) steps(2);
}
.mark .mark-frame { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(var(--P) 0 0 var(--mk-b)) drop-shadow(calc(-1 * var(--P)) 0 0 var(--mk-b)) drop-shadow(0 var(--P) 0 var(--mk-b))
    drop-shadow(0 calc(-1 * var(--P)) 0 var(--mk-b)) drop-shadow(var(--P) var(--P) 0 var(--mk-s)); }
.mark .mark-frame::before { content: ''; position: absolute; inset: 0; background: var(--mk-bg); clip-path: var(--mk-clip); }
.mark .px { width: 14px; height: 14px; flex: none; fill: currentColor; shape-rendering: crispEdges; }
.mark:hover { background: none; transform: translateY(calc(-1 * var(--P))); }
.mark:active { transform: translate(var(--P), var(--P)); }
.mark:active .mark-frame { filter: drop-shadow(var(--P) 0 0 var(--mk-b)) drop-shadow(calc(-1 * var(--P)) 0 0 var(--mk-b))
  drop-shadow(0 var(--P) 0 var(--mk-b)) drop-shadow(0 calc(-1 * var(--P)) 0 var(--mk-b)); }
.mark.is-done { --mk-b: var(--gb-ink); --mk-bg: var(--gb-bg); --mk-ink: var(--gb-ink); --mk-s: color-mix(in oklab, var(--gb-ink) 40%, var(--bg));
  color: var(--gb-ink); border-color: transparent; background: none; }
.mark.is-pop { animation: mk-pop calc(360ms * var(--motion, 1)) steps(4); }
@keyframes mk-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
/* Cúp 16 × 13 ô, mỗi ô 2px: tâm cúp và tâm nút nằm trên cùng một cột dọc. Cúp nằm sau mặt nút (z-index -2 trong nút) nên trồi lên
   từ sau nút như vật phẩm bật ra khỏi khối "?", nảy, lơ lửng, rồi nhấp nháy tắt như vật phẩm trong game. */
.mark-cup { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: -2; width: 32px; height: 26px; margin-left: -16px; pointer-events: none;
  animation: mk-cup calc(1.9s * var(--motion, 1)) forwards, mk-blink calc(1.9s * var(--motion, 1)) step-end forwards; }
.mark-cup svg { display: block; width: 32px; height: 26px; shape-rendering: crispEdges; }
.mark-cup .c-i { fill: var(--gb-ink); }
.mark-cup .c-y { fill: var(--gb-gold); }
.mark-cup .c-h { fill: var(--gb-gold-hi); }
.mark-cup .c-s { fill: var(--gb-gold-lo); }
@keyframes mk-cup {
  0% { transform: translateY(34px); animation-timing-function: steps(4); }
  14% { transform: translateY(-6px); animation-timing-function: steps(1); }
  20% { transform: translateY(0); animation-timing-function: steps(1); }
  38% { transform: translateY(-2px); animation-timing-function: steps(1); }
  54% { transform: translateY(0); animation-timing-function: steps(1); }
  70% { transform: translateY(-2px); animation-timing-function: steps(1); }
  100% { transform: translateY(-2px); }
}
@keyframes mk-blink { 0%, 74% { opacity: 1; } 76%, 84%, 92%, 100% { opacity: 0; } 80%, 88% { opacity: 1; } }
.mark-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.mark-burst i { position: absolute; width: 4px; height: 4px; margin: -2px; background: var(--gb-ink); opacity: 0;
  animation: mk-burst calc(560ms * var(--motion, 1)) calc(270ms * var(--motion, 1)) steps(6) forwards; }
.mark-burst i:nth-child(2n) { background: var(--gb-gold); }
@keyframes mk-burst { from { transform: rotate(var(--a)) translateX(16px); opacity: 1; } to { transform: rotate(var(--a)) translateX(40px); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }