/**
 * Theory "Vương Quốc Cờ Nhí" — ROYAL skin (lớp CSS chrome).
 *
 * Mọi rule namespace dưới `.is-royal` (gate-off = 0 đổi → parity-safe).
 * KHÔNG chạm `.ck-study-board`/`cg-board`/geometry bàn cờ (chỉ chrome).
 * Chất illustrated = CSS gold-bevel/parchment + background PNG scene + bàn/quân
 * theme-12 + mascot + accent. Honor prefers-reduced-motion; nút lớn/contrast AA.
 */

@import url("../theory-game/tokens.css");

:root {
    --ck-royal-cream: #fef9e7;
    --ck-royal-parchment: #f7edc8;
    --ck-royal-parchment-hi: #fffdf3;
    --ck-royal-gold: #f6c945;
    --ck-royal-gold-hi: #ffe79a;
    --ck-royal-gold-deep: #b9821f;
    --ck-royal-blue: #2f68c9;
    --ck-royal-blue-hi: #5b93e6;
    --ck-royal-blue-deep: #1c3f86;
    --ck-royal-red: #e2564d;
    --ck-royal-red-deep: #b1322c;
    --ck-royal-green: #5aa64a;
    --ck-royal-sky: #8fd0f7;
    --ck-royal-ink: #23324d;
    --ck-royal-border: #e0b64a;
    --ck-royal-shadow: 0 10px 24px -8px rgba(28, 63, 134, 0.4);
    --ck-royal-radius: 18px;
    /* Bevel dùng lại cho panel/nút (viền vàng nổi khối) */
    --ck-royal-frame:
        0 0 0 3px var(--ck-royal-gold-deep),
        0 0 0 6px var(--ck-royal-gold),
        inset 0 2px 0 rgba(255, 255, 255, 0.7),
        inset 0 -6px 14px rgba(160, 110, 20, 0.18);

    /* ===================== DESIGN-SYSTEM tokens (đồng nhất 2026-07-07) =====================
       1 nguồn sự thật cho radius/bevel/press/nút-theo-vai-trò. Mọi class nút/khung/pill ở
       lobby/reward/map CONSUME token này (không hardcode hex) → đổi 1 chỗ, đồng bộ mọi màn. */
    /* Radius scale */
    --ck-royal-radius-btn: 999px;
    --ck-royal-radius-sm: 12px;
    --ck-royal-radius-panel: 18px;   /* = --ck-royal-radius */
    --ck-royal-radius-lg: 26px;
    /* Bevel dày (thẻ reward) */
    --ck-royal-frame-thick:
        0 0 0 4px var(--ck-royal-gold-deep),
        0 0 0 8px var(--ck-royal-gold),
        inset 0 3px 0 rgba(255, 255, 255, 0.7);
    /* Press (bevel lún) — gộp 3/4/5px về 1 */
    --ck-royal-press-depth: 4px;
    --ck-royal-press-travel: 3px;
    /* Type nút */
    --ck-royal-weight: 900;
    --ck-royal-border-btn: 3px;
    --ck-royal-text-stroke: rgba(10, 30, 80, 0.5);
    /* Shade token hoá (trước raw hex rải rác) */
    --ck-royal-red-hi: #f2766c;
    --ck-royal-red-deepest: #7e211c;
    --ck-royal-green-hi: #6fc95a;
    --ck-royal-green-mid: #4e9a3e;
    --ck-royal-green-deep: #2f6a23;
    /* Nút theo VAI TRÒ (semantic): gradient + màu press-shade */
    --ck-royal-btn-primary: linear-gradient(180deg, var(--ck-royal-blue-hi), var(--ck-royal-blue));
    --ck-royal-btn-primary-shade: var(--ck-royal-blue-deep);
    --ck-royal-btn-success: linear-gradient(180deg, var(--ck-royal-green-hi), var(--ck-royal-green-mid));
    --ck-royal-btn-success-shade: var(--ck-royal-green-deep);
    --ck-royal-btn-danger: linear-gradient(180deg, var(--ck-royal-red-hi), var(--ck-royal-red) 55%, var(--ck-royal-red-deep));
    --ck-royal-btn-danger-shade: var(--ck-royal-red-deepest);
    --ck-royal-btn-secondary: linear-gradient(180deg, var(--ck-royal-gold-hi), var(--ck-royal-gold));
    --ck-royal-btn-secondary-shade: var(--ck-royal-gold-deep);
}

/* ===================== COMPONENT: nút / pill / icon / frame (dùng chung) =====================
   Recipe CHỈ set màu/bevel/radius/border/weight/press — KHÔNG set width/height/padding/font-size
   (giữ per-screen: lobby=cqw, reward=em, map=inherit). Class màn (.lp-cta…) consume token cùng. */
.is-royal .ck-royal-btn,
.ck-journey.is-royal .ck-royal-btn {
    border-radius: var(--ck-royal-radius-btn);
    border: var(--ck-royal-border-btn) solid var(--ck-royal-gold);
    font-weight: var(--ck-royal-weight);
    color: #fff;
    -webkit-text-stroke: 0.8px var(--ck-royal-text-stroke);
    paint-order: stroke fill;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.1s ease;
}
.is-royal .ck-royal-btn--primary   { background: var(--ck-royal-btn-primary);   box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-primary-shade),   0 8px 16px -6px rgba(28,63,134,.5); }
.is-royal .ck-royal-btn--success   { background: var(--ck-royal-btn-success);   box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-success-shade),   0 8px 16px -6px rgba(40,120,30,.45); }
.is-royal .ck-royal-btn--danger    { background: var(--ck-royal-btn-danger);    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-danger-shade), 0 8px 16px -6px rgba(150,40,35,.5); text-shadow: 0 2px 3px rgba(120,20,20,.5); }
.is-royal .ck-royal-btn--secondary { background: var(--ck-royal-btn-secondary); color: var(--ck-royal-blue-deep); -webkit-text-stroke-color: rgba(120,90,20,.35); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-secondary-shade), 0 6px 12px -6px rgba(160,110,20,.4); }
.is-royal .ck-royal-btn:active,
.ck-journey.is-royal .ck-royal-btn:active { transform: translateY(var(--ck-royal-press-travel)) scale(0.97); filter: brightness(.98); }
.is-royal .ck-royal-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* R1 (polish-mockup): states + variants bổ sung — 1 chuẩn nút MỌI màn. */
.is-royal .ck-royal-btn:focus-visible,
.ck-journey.is-royal .ck-royal-btn:focus-visible {
    outline: 3px solid var(--ck-royal-gold);
    outline-offset: 3px;
}
.is-royal .ck-royal-btn[disabled],
.is-royal .ck-royal-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: saturate(0.6);
}
/* CTA đỏ to — 1 cái/màn (mockup: nút đỏ trung tâm) */
.is-royal .ck-royal-btn--cta {
    background: var(--ck-royal-btn-danger);
    font-size: 1.15em;
    padding: 0.7em 2.2em;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-danger-shade), 0 10px 20px -6px rgba(150,40,35,.55);
    text-shadow: 0 2px 3px rgba(120,20,20,.5);
}
/* Icon vuông (rail/nav) */
.is-royal .ck-royal-btn--square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    padding: 0;
}
/* 9-slice hook: khung gen (slot frame_pill_*) đè bg/border qua style inline. */
.is-royal .ck-royal-btn.ck9 { border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
    .is-royal .ck-royal-btn, .ck-journey.is-royal .ck-royal-btn { transition: none; }
    .is-royal .ck-royal-btn:hover { transform: none; }
}

/* Icon minh hoạ inline — cỡ theo font container (em/cqw), canh baseline, không đội chữ. */
.is-royal .ck-royal-ico,
.ck-journey.is-royal .ck-royal-ico {
    height: 1em;
    width: auto;
    flex: 0 0 auto;
    vertical-align: -0.15em;
    object-fit: contain;
}

/* ============================ SHELL / NỀN ============================ */
/* Nền màn = scene illustrated (mỗi màn set --ck-royal-scene qua background image;
   mặc định gradient trời hoàng gia để không trắng khi thiếu ảnh). */
.is-royal.ck-theories-viewer-shell,
.is-royal .ck-theories-viewer-shell {
    /* Veil kem mờ (trên) → cảnh minh hoạ (giữa) → gradient trời (fallback dưới).
       Veil giữ bàn cờ + panel đọc rõ trên màn dày; lobby override riêng nên
       không dính veil này. */
    background:
        linear-gradient(180deg, rgba(255, 253, 243, .5), rgba(255, 253, 243, .34)),
        var(--ck-royal-scene, none),
        linear-gradient(180deg, #bfe4fb 0%, #dff1fd 42%, #eef7e4 100%) !important;
    background-size: cover, cover, cover !important;
    background-position: center, center top, center !important;
    background-attachment: fixed, fixed, fixed !important;
    font-family: 'Inter', 'Baloo 2', system-ui, sans-serif;
}
.is-royal .ck-financial-header { border: 0; background: transparent; }
.is-royal .ck-financial-title {
    color: var(--ck-royal-ink);
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
    font-weight: 900;
}
.is-royal .ck-financial-chip {
    background: linear-gradient(180deg, var(--ck-royal-blue-hi), var(--ck-royal-blue));
    color: #fff;
    border: 2px solid var(--ck-royal-gold);
    box-shadow: var(--ck-royal-shadow);
    font-weight: 800;
}

/* ============================ PANEL parchment ======================== */
.is-royal .ck-study-panel,
.is-royal .ck-study-section,
.is-royal .ck-study-picker-panel,
.is-royal .ck-financial-card {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment)) !important;
    border: 0 !important;
    border-radius: var(--ck-royal-radius) !important;
    box-shadow: var(--ck-royal-frame), var(--ck-royal-shadow) !important;
    color: var(--ck-royal-ink);
}
.is-royal .ck-study-section-title {
    color: var(--ck-royal-blue-deep);
    font-weight: 900;
    letter-spacing: .2px;
}
.is-royal .ck-study-section-title::before {
    /* huy hiệu nhỏ trước tiêu đề section */
    content: "◆";
    color: var(--ck-royal-gold-deep);
    margin-right: 6px;
    font-size: .8em;
}

/* ============================ NÚT (button) ========================== */
/* Nút chính: xanh hoàng gia viền vàng, bevel, press lún. */
/* PRIMARY (xanh) — consume token role. */
.is-royal .ck-theories-btn,
.is-royal .ck-study-control-btn,
.is-royal .ck-ex-check,
.is-royal .ck-cta {
    background: var(--ck-royal-btn-primary) !important;
    color: #fff !important;
    border: var(--ck-royal-border-btn) solid var(--ck-royal-gold) !important;
    border-radius: var(--ck-royal-radius-btn) !important;
    font-weight: var(--ck-royal-weight) !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .45),
        0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-primary-shade),
        0 8px 16px -6px rgba(28, 63, 134, .5) !important;
    text-shadow: 0 1px 2px rgba(10, 25, 60, .5);
    transition: transform .08s ease, box-shadow .08s ease;
}
.is-royal .ck-theories-btn:hover,
.is-royal .ck-study-control-btn:hover { filter: brightness(1.06); }
.is-royal .ck-theories-btn:active,
.is-royal .ck-study-control-btn:active,
.is-royal .ck-ex-check:active {
    transform: translateY(var(--ck-royal-press-travel));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .35),
        0 1px 0 var(--ck-royal-btn-primary-shade) !important;
}
/* SECONDARY (parchment/gold) — nút phụ (soft) + item danh sách. */
.is-royal .ck-theories-btn--soft,
.is-royal .ck-study-item-btn {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment)) !important;
    color: var(--ck-royal-ink) !important;
    border: var(--ck-royal-border-btn) solid var(--ck-royal-gold) !important;
    border-radius: var(--ck-royal-radius-btn) !important;
    font-weight: var(--ck-royal-weight) !important;
    text-shadow: none;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-secondary-shade), 0 6px 12px -6px rgba(160,110,20,.4) !important;
}
.is-royal .ck-study-item-btn.is-active {
    background: var(--ck-royal-btn-secondary) !important;
    color: var(--ck-royal-blue-deep) !important;
}
/* DANGER (đỏ) — mua khoá / CTA nổi. */
.is-royal .ck-theories-btn--buy,
.is-royal .ck-theories-btn--video-primary {
    background: var(--ck-royal-btn-danger) !important;
    border-color: var(--ck-royal-gold) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 var(--ck-royal-press-depth) 0 var(--ck-royal-btn-danger-shade), 0 8px 16px -6px rgba(150,40,35,.5) !important;
}

/* Điều khiển bàn cờ: nút TRÒN vàng-xanh (icon giữ nguyên) */
.is-royal .ck-study-controls .ck-study-control-btn {
    border-radius: 999px !important;
    min-width: 44px; min-height: 44px;
}

/* ---- Nút điều khiển = ẢNH nút tròn làm sẵn (sheet_03 theory_learning) ----
   Giữ nguyên <button> + click handler (KHÔNG đụng JS); chỉ thay chrome CSS bằng
   PNG nền + ẩn glyph FA. `play`/`analysis` GIỮ glyph (play cần toggle ▶/⏸ ở JS,
   analysis chưa có asset hợp). PNG đã có đĩa xanh + viền vàng nên gỡ hết
   background/border/shadow CSS. */
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="first"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="prev"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="next"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="last"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-prev"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-next"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="flip"],
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="toggle-move-tree"] {
    background: transparent none center / contain no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 0 !important;
    width: 46px; height: 46px; min-width: 46px; min-height: 46px;
}
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="first"]  { background-image: url("../img/theory/kingdom/v1/ctrl/skip-prev.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="prev"]   { background-image: url("../img/theory/kingdom/v1/ctrl/back.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="next"]   { background-image: url("../img/theory/kingdom/v1/ctrl/fwd.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="last"]   { background-image: url("../img/theory/kingdom/v1/ctrl/skip-next.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-prev"] { background-image: url("../img/theory/kingdom/v1/ctrl/back.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-next"] { background-image: url("../img/theory/kingdom/v1/ctrl/fwd.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="flip"]   { background-image: url("../img/theory/kingdom/v1/ctrl/shuffle.png") !important; }
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="toggle-move-tree"] { background-image: url("../img/theory/kingdom/v1/ctrl/list.png") !important; }
/* Ẩn glyph FA bên trong các nút đã PNG-hoá (giữ aria-label cho screen-reader) */
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="first"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="prev"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="next"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="last"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-prev"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-next"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="flip"] i,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="toggle-move-tree"] i { display: none !important; }
/* Nhấn nút PNG: lún nhẹ, không sinh shadow-box (nền trong suốt) */
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="first"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="prev"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="next"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="last"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-prev"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="theory-next"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="flip"]:active,
.is-royal .ck-study-controls .ck-study-control-btn[data-study-control="toggle-move-tree"]:active {
    transform: translateY(2px) scale(.96);
    box-shadow: none !important;
}

/* ---- BỎ nút không phù hợp cho trẻ (theo yêu cầu) ----
   • chế độ sáng/tối (dark-mode) • toàn màn/zoom (focus-mode + mini-board fs).
   Ẩn trong scope .is-royal → non-royal vẫn giữ (parity-safe). */
.is-royal .ck-study-control-btn[data-study-control="dark-mode"],
.is-royal .ck-study-control-btn[data-study-control="focus-mode"],
.is-royal .ckmb-fs-btn { display: none !important; }

/* ---- Nút chrome fullscreen (loa 🔊 / cài đặt ⚙️ / về sảnh 🏠) → tông ROYAL ----
   Trước: trắng + viền xám → lạc tông. Nay: parchment + viền vàng + bevel, đồng bộ
   turn-pill / mission panel / nút đáp án. (Nút chỉ hiện trong html.ck-fs-mode.) */
.is-royal .ckfx-fs-controls .ckfx-fs-btn,
.is-royal .ckmb-map-btn {
    background: var(--ck-royal-btn-primary) !important;   /* xanh hoàng gia (khớp mockup) */
    border: 3px solid var(--ck-royal-gold) !important;
    border-radius: 13px !important;                        /* vuông-bo như mockup, không tròn */
    color: #fff !important;
    font-size: 18px !important; line-height: 1 !important;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .4),
        0 3px 0 var(--ck-royal-btn-primary-shade),
        0 6px 13px -6px rgba(28, 63, 134, .55) !important;
    transition: transform .08s ease, filter .12s ease;
}
.is-royal .ckfx-fs-controls .ckfx-fs-btn i,
.is-royal .ckmb-map-btn i { color: #fff; }
.is-royal .ckfx-fs-controls .ckfx-fs-btn:hover,
.is-royal .ckmb-map-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.is-royal .ckfx-fs-controls .ckfx-fs-btn:active,
.is-royal .ckmb-map-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--ck-royal-gold-deep) !important;
}

/* ============================ TABS / picker ========================= */
.is-royal .ck-study-tabs { background: transparent; }
.is-royal .ck-study-tab-btn {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment));
    color: var(--ck-royal-blue-deep);
    border: 2px solid var(--ck-royal-gold);
    border-radius: 999px;
    font-weight: 800;
}
.is-royal .ck-study-tab-btn.is-active {
    background: linear-gradient(180deg, var(--ck-royal-blue-hi), var(--ck-royal-blue));
    color: #fff;
    box-shadow: inset 0 -3px 8px rgba(10,30,80,.35);
}
.is-royal .ck-study-menu-toggle {
    background: linear-gradient(180deg, var(--ck-royal-gold-hi), var(--ck-royal-gold));
    border: 2px solid var(--ck-royal-gold-deep);
    border-radius: 12px;
    color: var(--ck-royal-blue-deep);
}

/* ============================ MOVE TREE / games ==================== */
.is-royal .ck-move-tree { background: rgba(255, 253, 243, .6); border-radius: 12px; }
.is-royal .ck-study-empty { color: #8a7a4e; }
.is-royal .ck-game-list .ck-game-item,
.is-royal .ck-game-list [data-game-index] {
    border-color: var(--ck-royal-gold) !important;
}

/* ============================ side-to-move + status =============== */
.is-royal .ck-study-status {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment));
    border: 2px solid var(--ck-royal-gold);
    border-radius: 12px;
    color: var(--ck-royal-ink);
    font-weight: 700;
}

/* ==================== "Bài tập" mission box — Cú GIÁO SƯ trình bày ==========
   Cú nhô ở góc phải-trên panel (thay vai companion của mascot Tí Tốt). Câu hỏi /
   vùng đáp án dài → TỰ CUỘN (không tràn), giữ hướng dẫn + nút bấm thấy được. */
.is-royal .ck-practice-side {
    position: relative;
    overflow: visible;
}
.is-royal .ck-practice-side::before {
    content: "";
    position: absolute;
    /* Cú NHÔ trên mép phải panel — nhỏ lại + cao hơn để KHÔNG đè chữ tiêu đề /
       hướng dẫn (trước width 140 + top -62 dip ~78px vào panel, che "…theo thứ tự"). */
    top: -52px;
    right: 8px;
    width: clamp(72px, 18%, 104px);
    aspect-ratio: 1;
    background: url("../img/theory/kingdom/v1/mascot/owl-teacher.png") center / contain no-repeat;
    filter: drop-shadow(0 6px 6px rgba(10, 30, 80, .38));
    z-index: 6;
    pointer-events: none;
    animation: ck-owl-peek 3.4s ease-in-out infinite;
}
/* R9: mission card ĐÃ có Cú riêng trong head (mockup 05) — tắt Cú nhô cũ
   (2 con Cú + đè lên RoyalTopHud mới ở góc phải trên). */
.is-royal .ck-practice-side.is-mission-card::before { display: none; }
/* Chừa lề phải cho HÀNG TRÊN (tiêu đề "Bài tập" + hướng dẫn) để chữ KHÔNG chạy dưới
   Cú. Feedback + nút đáp án nằm dưới vùng Cú nên không cần. */
.is-royal .ck-practice-side > .ck-study-section-title,
.is-royal .ck-practice-side > .ck-practice-question {
    padding-right: 96px;
}
/* NỀN GAMEPLAY (scene lâu đài gameplay.png) cho fullscreen royal — thắng --ckfs-bg
   (test course có thể bơm bg phẳng làm mất scene). */
html.ck-fs-mode .is-royal .ck-study-app .ck-study-main {
    background:
        linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)),
        url("../img/theory/kingdom/v1/backgrounds/gameplay.png") center / cover fixed no-repeat !important;
}
/* Bàn ngồi TRỰC TIẾP trên scene — bỏ hộp kem + VÒNG SÁNG lượt (amber/tím) + viền
   vàng thừa quanh khung bàn (xấu trên scene; tín hiệu lượt đã có ở pill + chip). */
html.ck-fs-mode .is-royal .ck-study-board-wrap,
html.ck-fs-mode .is-royal .ck-study-board-wrap.is-turn-white,
html.ck-fs-mode .is-royal .ck-study-board-wrap.is-turn-black,
html.ck-fs-mode .is-royal .ck-study-board-wrap::before,
html.ck-fs-mode .is-royal .ck-study-board-wrap::after {
    background: none !important; box-shadow: none !important; outline: 0 !important; border: 0 !important;
}
html.ck-fs-mode .is-royal .ck-study-app .ck-study-main { box-shadow: none !important; }

/* Fullscreen: panel + practice-side cho phép owl TRÀN lên trên (không bị cắt).
   Panel rộng 36vw nên bài tập hiếm khi cần cuộn. */
html.ck-fs-mode .is-royal .ck-study-right,
html.ck-fs-mode .is-royal .ck-practice-side { overflow: visible !important; }
html.ck-fs-mode .is-royal .ck-practice-question { max-height: none; }
html.ck-fs-mode .is-royal .ck-exercise-host { max-height: 46vh; }
@keyframes ck-owl-peek {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-5px) rotate(3deg); }
}
.is-royal .ck-practice-question { max-height: 30vh; overflow-y: auto; }
.is-royal .ck-exercise-host { max-height: 42vh; overflow-y: auto; }

/* Ẩn mascot Tí Tốt (quân Tốt) trên MÀN BOARD royal (practice/TOC/theory) — Cú ở
   mission box thay vai companion. Map (.ck-journey) GIỮ Tí Tốt hướng dẫn hành trình. */
body:has(.ck-theories-viewer-shell.is-royal) .ckms { display: none !important; }

/* Ẩn cảnh KẸO quanh bàn (nấm/bóng bay/cỏ — theory-board-scene) trên royal: không hợp
   chủ đề vương quốc. Khung bàn theme-12 (gold + khiên) đã đủ royal; muốn cảnh royal
   riêng → gắn qua theme-slot board_scene sau. */
.is-royal .ck-board-scene { display: none !important; }

/* ==================== "Lượt Trắng / Đen" — turn gem royal =====================
   Bỏ candy (viền cam / tím than + pawn-mặt) → pill parchment(Trắng)/xanh(Đen) viền
   vàng + orb GEM 2 tông (đồng bộ gem trên khung, và với việc đã bỏ mascot Tốt). */
.is-royal .ck-turn-gem {
    border: 2px solid var(--ck-royal-gold) !important;
    box-shadow: var(--ck-royal-shadow) !important;
    font-family: 'Inter', 'Baloo 2', sans-serif;
}
.is-royal .ck-turn-gem.is-white {
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment)) !important;
    border-color: var(--ck-royal-gold) !important;
}
.is-royal .ck-turn-gem.is-white .ck-turn-gem-label { color: var(--ck-royal-blue-deep) !important; }
.is-royal .ck-turn-gem.is-black {
    background: linear-gradient(180deg, var(--ck-royal-blue-hi), var(--ck-royal-blue-deep)) !important;
    border-color: var(--ck-royal-gold) !important;
}
.is-royal .ck-turn-gem.is-black .ck-turn-gem-label { color: #fff !important; }
/* Orb = chip quân Tốt THẬT (sheet_03 side-to-move: 007 trắng / 011 đen) — PNG đã
   có khung vàng + đĩa nên gỡ hết border/shadow/gradient CSS, chỉ đặt ảnh. */
.is-royal .ck-turn-gem-orb {
    background: transparent none no-repeat center / contain !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
}
.is-royal .ck-turn-gem.is-white .ck-turn-gem-orb { background-image: url("../img/theory/kingdom/v1/icon/turn-white.png") !important; }
.is-royal .ck-turn-gem.is-black .ck-turn-gem-orb { background-image: url("../img/theory/kingdom/v1/icon/turn-black.png") !important; }

/* ==================== Nút đáp án trắc nghiệm (.ck-ex-option) — royal ==========
   Bỏ trắng/xám neutral → parchment viền vàng; state giữ NGHĨA: selected=xanh,
   đúng=xanh-lá (success), sai=đỏ (danger) — đồng bộ hệ màu vai trò. */
.is-royal .ck-ex-option {
    border: 2px solid var(--ck-royal-gold) !important;
    border-radius: var(--ck-royal-radius-sm) !important;
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment)) !important;
    color: var(--ck-royal-ink) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--ck-royal-gold-deep) !important;
}
.is-royal .ck-ex-option:hover:not(:disabled) {
    filter: brightness(1.03);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--ck-royal-gold-deep), 0 0 10px rgba(246, 201, 69, .6) !important;
}
.is-royal .ck-ex-option.is-selected {
    background: var(--ck-royal-btn-primary) !important;
    color: #fff !important;
    border-color: var(--ck-royal-gold) !important;
}
.is-royal .ck-ex-option.is-correct {
    background: var(--ck-royal-btn-success) !important;
    color: #fff !important;
    border-color: var(--ck-royal-gold) !important;
}
.is-royal .ck-ex-option.is-wrong {
    background: var(--ck-royal-btn-danger) !important;
    color: #fff !important;
    border-color: var(--ck-royal-gold) !important;
}

/* ==================== Hộp phản hồi (.ck-practice-notice) — royal ==============
   Parchment viền vàng + BURST Đúng/Sai (sheet_05 017/018) làm tín hiệu nhanh cho
   trẻ. Burst là ::before (an toàn: JS set textContent, không đè pseudo). */
.is-royal .ck-practice-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 2px solid var(--ck-royal-gold) !important;
    border-radius: var(--ck-royal-radius-sm) !important;
    background: linear-gradient(180deg, var(--ck-royal-parchment-hi), var(--ck-royal-parchment)) !important;
    color: var(--ck-royal-ink) !important;
    font-weight: 700 !important;
}
.is-royal .ck-practice-notice.is-success {
    background: linear-gradient(180deg, #eafbe4, #d6f3c9) !important;
    border-color: var(--ck-royal-green-mid) !important;
    color: var(--ck-royal-green-deep) !important;
}
.is-royal .ck-practice-notice.is-error {
    background: linear-gradient(180deg, #ffeceb, #ffd9d5) !important;
    border-color: var(--ck-royal-red-hi) !important;
    color: var(--ck-royal-red-deepest) !important;
}
.is-royal .ck-practice-notice.is-success::before,
.is-royal .ck-practice-notice.is-error::before {
    content: "";
    flex: 0 0 auto;
    width: 30px; height: 30px;
    background: center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(30, 40, 80, .25));
    animation: ckNoticeBurstPop .32s cubic-bezier(.2, 1.3, .5, 1) both;
}
.is-royal .ck-practice-notice.is-success::before { background-image: url("../img/theory/kingdom/v1/ctrl/fb-correct.png"); }
.is-royal .ck-practice-notice.is-error::before   { background-image: url("../img/theory/kingdom/v1/ctrl/fb-wrong.png"); }
@keyframes ckNoticeBurstPop {
    0%   { transform: scale(.3) rotate(-12deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .is-royal .ck-practice-notice.is-success::before,
    .is-royal .ck-practice-notice.is-error::before { animation: none; }
}

/* ============================ R5: MISSION CARD (spec 13/mockup 05) ==
   Chrome trang trí quanh panel bài tập royal — khung NAVY viền vàng + tab
   khiên + Cú giáo sư + bubble nhiệm vụ + 2 ô đúng/sai. Element data-study-role
   giữ nguyên contract viewer. */
.is-royal .ck-practice-side.is-mission-card {
    position: relative;
    padding: 22px 14px 12px;
    background: linear-gradient(180deg, #1e3a6e, #16305c);
    border: 3px solid var(--ck-royal-gold, #f6c945);
    border-radius: 18px;
    box-shadow: 0 0 0 2px var(--ck-royal-gold-deep, #b9821f), 0 10px 24px -10px rgba(10, 22, 60, .6);
}
.is-royal .ck-mission-tab {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ck-royal-gold, #f6c945), #d9a92c);
    color: #5c430b;
    font-weight: 900;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 0 0 2px var(--ck-royal-gold-deep, #b9821f), 0 3px 7px rgba(20, 30, 70, .4);
    white-space: nowrap;
}
.is-royal .ck-mission-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
}
.is-royal .ck-mission-owl {
    flex: 0 0 auto;
    width: clamp(44px, 4.4vw, 60px);
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35));
}
.is-royal .ck-practice-side.is-mission-card .ck-mission-bubble {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 9px 12px;
    border-radius: 4px 14px 14px 14px;
    background: rgba(255, 253, 243, .97);
    border: 2px solid var(--ck-royal-gold, #f6c945);
    color: var(--ck-royal-ink, #23324d);
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(10, 20, 50, .35);
}
.is-royal .ck-practice-side.is-mission-card .ck-practice-turn { color: #dbe7ff; font-weight: 800; }
.is-royal .ck-mission-score {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 2px dashed rgba(246, 201, 69, .45);
}
.is-royal .ck-mission-score > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 13px;
    border-radius: 999px;
    background: rgba(255, 253, 243, .93);
    border: 2px solid var(--ck-royal-gold, #f6c945);
    font-weight: 900;
    font-size: .88rem;
    color: var(--ck-royal-ink, #23324d);
}
.is-royal .ck-mission-score-ok b { color: #2f6a23; }
.is-royal .ck-mission-score-no b { color: #b03535; }

/* ============================ A11y / reduced motion =============== */
@media (prefers-reduced-motion: reduce) {
    .is-royal .ck-theories-btn,
    .is-royal .ck-study-control-btn,
    .is-royal .ck-practice-side::before { transition: none !important; animation: none !important; }
}