/* =============================================================
   หลักสัมพันธ์ไทย — ธีมห้องฉาย (หลวงพี่สั่ง ๑๐ ต.ค. ๒๕๖๙)
   โทเค็นคัดมาจาก app/css/study-cinema.css (หน้านี้อยู่ใน pali/ จึงเก็บสำเนาไว้เอง — ห้าม @import ข้ามไป)
   สี = ความหมาย ใช้ทั้งหน้า:
     ชื่อสัมพันธ์ = ขาวตัวใหญ่ · แปลว่า = ทอง · คำบาลี = คราม
     คำเชื่อม: ของ ชมพู · ใน ฟ้า · เข้ากับ เขียว · ปล่อย เทาเส้นประ
   การ์ดทุกใบมีกรอบรอบทั้งใบ (ไม่ใช้แถบขอบซ้าย/ขอบบน) · ตัวอักษรอ่าน ≥ 14px
   สไตล์ทั้งหมดอยู่ใต้ .rl-page / #app ไม่แตะเมนูบน (.pt-topnav-scope)
   ============================================================= */
:root {
	--bg: #0a0f1e; --bg2: #0f1730; --panel: #131c38; --card: #18223f;
	--line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .16);
	--ink: #f3f6ff; --muted: #aab4d0; --dim: #8f9aba;
	--gold: #f5bf45; --mean: #fcd34d; --pali: #c7d2fe; --green: #34d399; --rose: #fb7185;
	--c-of: #f9a8d4; --c-in: #7dd3fc; --c-join: #6ee7b7; --c-free: #cbd5e1;
	--card-line: rgba(165, 180, 252, .2);
	--toolbar-h: 72px;
}

[v-cloak] { display: none; }

html { -webkit-text-size-adjust: 100%; }
body.rl-page {
	margin: 0; min-height: 100vh;
	background: var(--bg); color: var(--ink);
	font-family: 'Sarabun', system-ui, sans-serif; font-size: 16px; line-height: 1.6;
	overflow-x: hidden;
}
/* reset เฉพาะในแอป — ห่อ :where() ให้ความเจาะจงต่ำ คลาสของหน้าจึงชนะเสมอ */
:where(#app), :where(#app) *, :where(#app) *::before, :where(#app) *::after { box-sizing: border-box; }
:where(#app) :where(h1, h2, h3, h4, p, dl, dd, ul) { margin: 0; }
:where(#app) ul { padding: 0; list-style: none; }
:where(#app) button { font: inherit; color: inherit; cursor: pointer; }
:where(#app) img { max-width: 100%; }
:where(#app) mark { background: rgba(245, 191, 69, .32); color: inherit; border-radius: 4px; padding: 0 .08em; }
#app :is(button, a, input, [role="tab"], [role="radio"]):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rl-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .rl-wrap { padding: 0 1.5rem; } }

/* ── ปุ่ม ───────────────────────────────────────────── */
.rl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	min-height: 52px; padding: .5rem 1.35rem; border-radius: 12px; border: 1.5px solid transparent;
	font-size: 1rem; font-weight: 800; line-height: 1.3; text-decoration: none; white-space: nowrap;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rl-btn:active { transform: scale(.97); }
.rl-btn-main { background: #fff; color: var(--bg); }
@media (hover: hover) { .rl-btn-main:hover { background: var(--gold); } }
.rl-btn-ghost { background: rgba(255, 255, 255, .1); border-color: var(--line2); color: #fff; }
.rl-btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.rl-btn-ghost i { color: var(--gold); }
.rl-btn-sm { min-height: 44px; padding: .35rem 1rem; font-size: .95rem; }
.rl-btn-block { width: 100%; }
.rl-btn-stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.rl-btn-stack small { font-size: .875rem; font-weight: 700; color: #4b5576; }
.rl-btn-stack > span { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.rl-btn kbd { margin-left: .2rem; padding: .05rem .4rem; border-radius: 6px; border: 1px solid currentColor; font: inherit; font-size: .875rem; font-weight: 700; opacity: .6; }
@media (hover: none) { .rl-btn kbd { display: none; } }

/* ── ป้ายคำเชื่อม (สี = ชนิดคำเชื่อม) ─────────────────── */
.rl-conn {
	--c: var(--c-free);
	display: inline-flex; align-items: center; min-height: 28px; padding: .05rem .7rem; border-radius: 999px;
	border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
	background: color-mix(in srgb, var(--c) 14%, transparent);
	color: var(--c); font-size: .9rem; font-weight: 800; line-height: 1.4; white-space: nowrap;
}
.rl-conn.is-of { --c: var(--c-of); }
.rl-conn.is-in { --c: var(--c-in); }
.rl-conn.is-join { --c: var(--c-join); }
.rl-conn.is-free { --c: var(--c-free); border-style: dashed; background: transparent; }
.rl-conn.is-lg { min-height: 34px; padding: .1rem .95rem; font-size: 1.05rem; white-space: normal; }

/* ── ป้ายใหญ่ ───────────────────────────────────────── */
.rl-bill { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
.rl-bill-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.rl-bill::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(10, 15, 30, .96) 0%, rgba(10, 15, 30, .84) 30%, rgba(10, 15, 30, .25) 58%, rgba(10, 15, 30, 0) 100%),
		linear-gradient(0deg, var(--bg) 0%, rgba(10, 15, 30, .65) 18%, rgba(10, 15, 30, 0) 44%);
}
.rl-bill-inner { min-height: clamp(500px, 70vh, 620px); display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1rem; padding-top: 3rem; padding-bottom: 2rem; }
.rl-bill-copy { max-width: 590px; display: flex; flex-direction: column; gap: .7rem; }
.rl-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 800; color: var(--muted); }
.rl-eyebrow i { color: var(--gold); }
.rl-title { font-size: clamp(2.3rem, 4.8vw, 3.6rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }
.rl-title span { color: var(--gold); }
.rl-desc { max-width: 540px; font-size: 1.05rem; line-height: 1.8; color: #d7deef; }
.rl-desc b { font-weight: 800; }
.rl-desc .k-name { color: #fff; }
.rl-desc .k-conn { color: var(--c-in); }
.rl-desc .k-mean { color: var(--mean); }
.rl-stats { display: flex; flex-wrap: wrap; gap: .45rem; }
.rl-stats li { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line2); color: #dbe2f5; font-size: .95rem; font-weight: 700; backdrop-filter: blur(6px); }
.rl-stats strong { color: #fff; font-size: 1.1rem; font-weight: 800; }
.rl-stats i { color: var(--gold); }
.rl-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .35rem ; }

.rl-legend { align-self: flex-start; max-width: 590px; padding: .8rem 1rem .9rem; border-radius: 16px; background: rgba(15, 23, 48, .82); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.rl-legend-head { margin-bottom: .55rem ; font-size: .9rem; font-weight: 700; color: var(--muted); }
.rl-legend-head b { color: var(--c-in); }
.rl-legend ul { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.rl-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.rl-legend-n { color: var(--muted); font-size: .9rem; font-weight: 700; }
.rl-legend-n::after { content: " หลัก"; }

/* ── แถบควบคุม ──────────────────────────────────────── */
.rl-toolbar { z-index: 30; background: rgba(10, 15, 30, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rl-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; min-height: var(--toolbar-h); padding-top: .6rem; padding-bottom: .6rem; }
.rl-modes { display: inline-flex; flex: none; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); }
.rl-modes button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.15rem; border: 0; border-radius: 10px; background: transparent; color: #dbe2f5; font-size: 1rem; font-weight: 800; }
.rl-modes button i { color: var(--gold); }
.rl-modes button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rl-modes button[aria-selected="true"] { background: #fff; color: var(--bg); }
.rl-modes button[aria-selected="true"] i { color: var(--bg); }

.rl-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 560px; }
.rl-search > i { position: absolute; left: 1rem; color: var(--dim); pointer-events: none; }
.rl-search input {
	width: 100%; min-height: 48px; padding: .5rem 3rem .5rem 2.7rem; border-radius: 12px;
	border: 1.5px solid var(--line2); background: rgba(255, 255, 255, .06); color: #fff;
	font: inherit; font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.rl-search input::placeholder { color: var(--dim); }
.rl-search input:focus { border-color: var(--gold); background: rgba(255, 255, 255, .09); }
.rl-search input::-webkit-search-cancel-button { display: none; }
.rl-search-x { position: absolute; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
.rl-search-x:hover { color: #fff; }

.rl-favbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1rem; margin-left: auto; border-radius: 12px; border: 1.5px solid rgba(245, 191, 69, .45); background: rgba(245, 191, 69, .08); color: #fde68a; font-size: 1rem; font-weight: 800; }
.rl-favbtn i { color: var(--gold); }
.rl-favbtn:hover { background: rgba(245, 191, 69, .16); }
.rl-favbtn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #3b2600; }
.rl-favbtn[aria-pressed="true"] i { color: #3b2600; }
.rl-favbtn-n { min-width: 26px; padding: 0 .45rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .9rem; text-align: center; }
.rl-favbtn[aria-pressed="true"] .rl-favbtn-n { background: rgba(59, 38, 0, .15); }
.rl-toolbar-note { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .95rem; font-weight: 700; }
.rl-toolbar-note i { color: var(--gold); }

/* ── ชิปหมวด (จอเล็ก) ───────────────────────────────── */
.rl-chipbar { position: sticky; top: 0; z-index: 29; background: rgba(10, 15, 30, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.rl-chips { display: flex; gap: .5rem; padding: .55rem 1rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rl-chips::-webkit-scrollbar { display: none; }
.rl-chip { display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 44px; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .06); color: #dbe2f5; font-size: .95rem; font-weight: 800; white-space: nowrap; }
.rl-chip:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.rl-chip-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: rgba(245, 191, 69, .2); color: var(--gold); font-size: .875rem; }
.rl-chip-n { padding: 0 .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--muted); font-size: .875rem; font-weight: 700; }
.rl-chip[aria-current="true"] { background: #fff; border-color: #fff; color: var(--bg); }
.rl-chip[aria-current="true"] .rl-chip-no { background: var(--bg); color: #fff; }
.rl-chip[aria-current="true"] .rl-chip-n { background: rgba(10, 15, 30, .1); color: var(--bg); }

/* ── โหมดเรียน: สารบัญ + รายการ ─────────────────────── */
.rl-study-grid { display: block; padding-top: 1.5rem; padding-bottom: 3rem; }
.rl-side { display: none; }
.rl-main { min-width: 0; scroll-margin-top: calc(var(--toolbar-h) + 1rem); }

.rl-side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .35rem .55rem; color: var(--muted); font-size: .9rem; font-weight: 800; }
.rl-side-head span { color: var(--dim); }
.rl-cat {
	display: flex; align-items: flex-start; gap: .7rem; width: 100%; min-height: 48px; padding: .6rem .7rem; margin-bottom: .35rem;
	border-radius: 12px; border: 1px solid transparent; background: transparent; color: #dbe2f5; text-align: left;
	transition: background-color .15s ease, border-color .15s ease;
}
.rl-cat:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.rl-cat-no { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(245, 191, 69, .16); color: var(--gold); font-size: .9rem; font-weight: 800; }
.rl-cat-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .1rem; padding-top: .1rem; }
.rl-cat-name { font-size: 1rem; font-weight: 800; line-height: 1.35; color: #fff; }
.rl-cat-detail { font-size: .875rem; line-height: 1.45; color: var(--dim); }
.rl-cat-n { flex: none; margin-top: .2rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .875rem; font-weight: 700; }
.rl-cat[aria-current="true"] { background: #fff; border-color: #fff; }
.rl-cat[aria-current="true"] .rl-cat-name { color: var(--bg); }
.rl-cat[aria-current="true"] .rl-cat-detail { color: #4b5576; }
.rl-cat[aria-current="true"] .rl-cat-no { background: var(--bg); color: #fff; }
.rl-cat[aria-current="true"] .rl-cat-n { background: rgba(10, 15, 30, .1); color: var(--bg); }

/* หัวรายการ */
.rl-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem 1.1rem; margin-bottom: 1.4rem; }
.rl-head-no { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #e11d48, #881337); color: #fff; font-size: 1.6rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.rl-head-no.is-search, .rl-head-no.is-all { background: linear-gradient(135deg, #4f46e5, #312e81); font-size: 1.25rem; }
.rl-head-no.is-fav { background: linear-gradient(135deg, #f5bf45, #b45309); color: #3b2600; font-size: 1.25rem; }
.rl-head-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.rl-head-kicker { color: var(--muted); font-size: .9rem; font-weight: 700; }
.rl-head h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.rl-head-detail { color: #d7deef; font-size: 1.02rem; line-height: 1.6; }
.rl-head-conns { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .45rem ; }
.rl-head-conns li { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.rl-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.rl-head-count { color: var(--muted); font-size: .95rem; font-weight: 700; }
.rl-head-count strong { color: #fff; font-size: 1.5rem; font-weight: 800; }

/* กลุ่ม (ดูข้ามหมวด) */
.rl-group + .rl-group { margin-top: 2rem; }
.rl-group-head { margin-bottom: .8rem ; }
.rl-group-head button { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .2rem; border: 0; background: none; color: #fff; font-size: 1.15rem; font-weight: 800; text-align: left; }
.rl-group-head button:hover { color: var(--gold); }
.rl-group-no { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(245, 191, 69, .16); color: var(--gold); font-size: .9rem; }
.rl-group-n { padding: 0 .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .875rem; font-weight: 700; }
.rl-group-head i { color: var(--dim); font-size: .875rem; }

/* ── การ์ดหลักสัมพันธ์: หนึ่งหลักต่อหนึ่งใบ กรอบรอบทั้งใบ ── */
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.rl-card {
	display: flex; flex-direction: column; min-width: 0; padding: .85rem 1.15rem 1.15rem; border-radius: 16px;
	border: 1.5px solid var(--card-line);
	background: linear-gradient(180deg, rgba(99, 102, 241, .08) 0%, transparent 45%), var(--card);
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .85);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rl-card:hover { border-color: rgba(165, 180, 252, .42); box-shadow: 0 18px 38px -20px rgba(0, 0, 0, .95); }
.rl-card.is-fav { border-color: rgba(245, 191, 69, .5); }
.rl-card-top { display: flex; align-items: center; gap: .55rem; margin-right: -.6rem; }
.rl-card-no { display: grid; place-items: center; flex: none; min-width: 28px; height: 28px; padding: 0 .3rem; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: .875rem; font-weight: 800; }
.rl-card-label { flex: 1; color: var(--dim); font-size: .875rem; font-weight: 700; }
.rl-star { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--dim); font-size: 1.2rem; transition: color .15s ease, background-color .15s ease, transform .15s ease; }
.rl-star:hover { background: rgba(245, 191, 69, .12); color: var(--gold); }
.rl-star:active { transform: scale(.88); }
.rl-star[aria-pressed="true"] { color: var(--gold); }
.rl-name { margin: .1rem 0 .85rem ; color: #fff; font-size: 1.65rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }

.rl-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem .9rem; align-items: baseline; }
.rl-row { display: contents; }
.rl-rows dt { color: var(--dim); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.rl-rows dd { min-width: 0; overflow-wrap: anywhere; }
.rl-mean { color: var(--mean); font-size: 1.3rem; font-weight: 800; line-height: 1.45; }
.rl-detail { color: #d7deef; font-size: 1rem; line-height: 1.6; }
.rl-pali { color: var(--pali); font-size: 1.12rem; font-weight: 800; line-height: 1.5; }
.rl-name-sm { color: #fff; font-size: 1.15rem; font-weight: 800; }

/* ว่าง */
.rl-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 3rem 1.25rem; border-radius: 18px; border: 1.5px solid var(--card-line); background: var(--card); text-align: center; }
.rl-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .3rem; border-radius: 999px; background: rgba(165, 180, 252, .14); color: var(--pali); font-size: 1.5rem; }
.rl-empty-icon.is-gold { background: rgba(245, 191, 69, .14); color: var(--gold); }
.rl-empty-title { color: #fff; font-size: 1.2rem; font-weight: 800; }
.rl-empty-sub { max-width: 30rem; margin-bottom: .6rem ; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.rl-empty-sub i { color: var(--gold); }

/* ก่อน/ถัดไป */
.rl-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 2rem; }
.rl-pager-btn { display: flex; align-items: center; gap: .8rem; min-height: 68px; padding: .6rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--line2); background: rgba(255, 255, 255, .06); color: #fff; text-align: left; transition: background-color .15s ease, border-color .15s ease; }
.rl-pager-btn > span { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.35; }
.rl-pager-btn small { color: var(--muted); font-size: .875rem; font-weight: 700; }
.rl-pager-btn > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; font-weight: 800; }
.rl-pager-btn i { color: var(--gold); }
.rl-pager-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.rl-pager-btn.is-next { justify-content: flex-end; text-align: right; }
.rl-pager-btn.is-next:not(:disabled) { background: #fff; border-color: #fff; color: var(--bg); }
.rl-pager-btn.is-next:not(:disabled) small { color: #4b5576; }
.rl-pager-btn.is-next:not(:disabled) i { color: var(--bg); }
@media (hover: hover) { .rl-pager-btn.is-next:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); } }
.rl-pager-btn:disabled { cursor: default; opacity: .5; }

/* ── โหมดเล่น ───────────────────────────────────────── */
.rl-play { padding-top: 1.8rem; padding-bottom: 3rem; }
.rl-setup-head { margin-bottom: 1.2rem; }
.rl-setup-head h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.3; }
.rl-setup-head p { margin-top: .2rem ; color: var(--muted); font-size: 1rem; }
.rl-qmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.8rem; }
.rl-qmode { position: relative; display: flex; flex-direction: column; gap: .15rem; min-height: 64px; padding: .75rem 1rem; border-radius: 14px; border: 1.5px solid var(--line2); background: rgba(255, 255, 255, .05); text-align: left; transition: border-color .15s ease, background-color .15s ease; }
.rl-qmode:hover { background: rgba(255, 255, 255, .09); }
.rl-qmode-title { color: #fff; font-size: 1.1rem; font-weight: 800; }
.rl-qmode-sub { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.rl-qmode[aria-checked="true"] { border-color: var(--gold); background: rgba(245, 191, 69, .12); }
.rl-qmode[aria-checked="true"] .rl-qmode-title { color: var(--gold); }
.rl-qmode[aria-checked="true"]::after { content: "\f00c"; position: absolute; top: .7rem; right: .8rem; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); }

.rl-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: .9rem; }
.rl-deck { display: flex; align-items: center; gap: .9rem; min-height: 88px; padding: .9rem 1rem; border-radius: 16px; border: 1.5px solid var(--card-line); background: var(--card); text-align: left; transition: border-color .2s ease, transform .25s cubic-bezier(.25, 1, .5, 1); }
@media (hover: hover) { .rl-deck:hover { border-color: var(--gold); transform: translateY(-2px); } }
.rl-deck-no { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #e11d48, #881337); color: #fff; font-size: 1.25rem; font-weight: 800; }
.rl-deck-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .15rem; }
.rl-deck-name { color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1.35; }
.rl-deck-detail { color: var(--dim); font-size: .875rem; line-height: 1.45; }
.rl-deck-n { align-self: flex-start; margin-top: .2rem; padding: 0 .55rem; border-radius: 999px; background: rgba(245, 191, 69, .14); color: var(--gold); font-size: .875rem; font-weight: 800; }
.rl-deck-play { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--bg); font-size: .95rem; }
.rl-deck-play i { margin-left: 2px; }
@media (hover: hover) { .rl-deck:hover .rl-deck-play { background: var(--gold); } }

/* การ์ดคำถาม */
.rl-game, .rl-done { max-width: 760px; margin: 0 auto; }
.rl-game-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.rl-iconbtn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line2); background: rgba(255, 255, 255, .06); color: #fff; }
.rl-iconbtn:hover { background: rgba(255, 255, 255, .14); }
.rl-game-meta { display: flex; flex: 1; min-width: 0; flex-direction: column; line-height: 1.35; }
.rl-game-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .9rem; font-weight: 700; }
.rl-game-pos { color: #fff; font-size: 1rem; font-weight: 700; }
.rl-game-pos strong { font-size: 1.15rem; }
.rl-game-score { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .4); color: #a7f3d0; font-size: .95rem; font-weight: 800; }
.rl-track { height: 8px; margin-bottom: 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rl-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--green)); transition: width .4s ease; }

.rl-flash { display: flex; flex-direction: column; align-items: center; min-height: 300px; padding: 1.6rem 1.4rem 1.5rem; border-radius: 20px; border: 1.5px solid var(--card-line); background: radial-gradient(120% 80% at 50% 0%, rgba(99, 102, 241, .16) 0%, transparent 60%), var(--card); text-align: center; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .95); }
.rl-flash-label { color: var(--muted); font-size: .95rem; font-weight: 700; }
.rl-flash-label span { color: #fff; }
.rl-flash-q { display: flex; flex: 1; align-items: center; justify-content: center; margin: 1rem 0 .4rem ; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.rl-flash-q.is-meaning { color: #fff; font-size: clamp(2.1rem, 6vw, 2.9rem); }
.rl-flash-q.is-pali_to_meaning { color: var(--pali); font-size: clamp(2rem, 6vw, 2.7rem); }
.rl-flash-q.is-reverse_meaning { color: var(--mean); font-size: clamp(1.6rem, 4.6vw, 2.2rem); }
.rl-flash-detail { color: #d7deef; font-size: 1.05rem; line-height: 1.6; }

.rl-answer { width: 100%; margin-top: 1.3rem; padding: 1rem 1.1rem 1.1rem; border-radius: 16px; border: 1.5px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .07); text-align: left; animation: rlin .25s ease; }
.rl-answer-label { display: inline-flex; align-items: center; gap: .4rem; color: #6ee7b7; font-size: .9rem; font-weight: 800; }
.rl-answer-main { margin: .25rem 0 .8rem ; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.rl-answer-main.is-name { color: #fff; font-size: clamp(1.8rem, 5vw, 2.3rem); }
.rl-answer-main.is-mean { color: var(--mean); font-size: clamp(1.4rem, 4vw, 1.8rem); }
.rl-rows.is-compact { gap: .45rem .9rem; padding-top: .75rem; border-top: 1px solid var(--line); }
@keyframes rlin { from { opacity: 0; transform: translateY(6px); } }

.rl-game-actions { display: flex; gap: .7rem; margin-top: 1rem; }
.rl-game-actions .rl-btn { flex: 1; min-height: 56px; font-size: 1.08rem; }
.rl-btn-no { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .6); color: #fecdd3; }
.rl-btn-no:hover { background: rgba(251, 113, 133, .2); }
.rl-btn-yes { background: #10b981; border-color: #10b981; color: #fff; }
.rl-btn-yes:hover { background: #059669; border-color: #059669; }

/* จบเกม */
.rl-done { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2.2rem 1.3rem; border-radius: 20px; border: 1.5px solid rgba(245, 191, 69, .45); background: radial-gradient(120% 80% at 50% 0%, rgba(245, 191, 69, .14) 0%, transparent 60%), var(--card); text-align: center; }
.rl-done-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 999px; background: rgba(245, 191, 69, .16); color: var(--gold); font-size: 1.7rem; }
.rl-done h2 { margin-top: .4rem ; color: #fff; font-size: 1.8rem; font-weight: 800; }
.rl-done-cat { color: var(--muted); font-size: 1rem; font-weight: 700; }
.rl-done-pct { color: var(--gold); font-size: 4rem; font-weight: 800; line-height: 1.1; }
.rl-done-pct small { font-size: 2rem; }
.rl-done-score { color: #d7deef; font-size: 1.05rem; }
.rl-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }

/* ── ส่วนท้าย ───────────────────────────────────────── */
.rl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: 2.6rem; border-top: 1px solid var(--line); }
.rl-source { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.rl-source i { color: var(--gold); }

/* ── SweetAlert2 บนพื้นเข้ม ─────────────────────────── */
body .swal2-popup.rl-swal { background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: 18px; font-family: 'Sarabun', sans-serif; }
.rl-swal .swal2-title { color: #fff; font-weight: 800; }
.rl-swal .swal2-html-container { color: var(--muted); font-size: 1.05rem; }
.rl-swal .swal2-actions { gap: .6rem; }
.rl-swal-ok, .rl-swal-cancel { min-height: 48px; padding: .4rem 1.3rem; border-radius: 12px; border: 1.5px solid transparent; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; }
.rl-swal-cancel { background: #fff; color: var(--bg); }
.rl-swal-cancel:hover { background: var(--gold); }
.rl-swal-ok { background: rgba(251, 113, 133, .1); border-color: rgba(251, 113, 133, .6); color: #fecdd3; }
.rl-swal-ok:hover { background: rgba(251, 113, 133, .2); }
.rl-swal :is(.rl-swal-ok, .rl-swal-cancel):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
body .swal2-popup.rl-swal-toast { padding: .6rem 1rem; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); }
.rl-swal-toast .swal2-title { font-size: 1rem; }

/* ── จอใหญ่: แถบควบคุมติดหัว + สารบัญหมวดด้านซ้าย ───── */
@media (min-width: 1024px) {
	.rl-toolbar { position: sticky; top: 0; }
	.rl-chipbar { display: none; }
	.rl-study-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; padding-top: 2rem; }
	.rl-side {
		display: block; position: sticky; top: calc(var(--toolbar-h) + 1rem); align-self: start;
		max-height: calc(100vh - var(--toolbar-h) - 2rem); overflow-y: auto; padding: .9rem .6rem .6rem;
		border-radius: 18px; border: 1.5px solid var(--card-line); background: var(--bg2);
		scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent;
	}
}

/* ── จอเล็ก ─────────────────────────────────────────── */
@media (max-width: 760px) {
	.rl-qmodes { grid-template-columns: minmax(0, 1fr); }
	.rl-pager { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.rl-bill-art { height: 270px; bottom: auto; object-position: 46% 30%; }
	.rl-bill::before { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) calc(100% - 270px), rgba(10, 15, 30, .5) calc(100% - 150px), rgba(10, 15, 30, 0) calc(100% - 60px)); }
	.rl-bill-inner { min-height: 0; padding-top: 12.5rem; padding-bottom: 1.4rem; gap: 1rem; }
	.rl-title { font-size: 2.3rem; }
	.rl-desc { font-size: 1rem; }
	.rl-actions .rl-btn { width: 100%; }
	.rl-btn-main { justify-content: flex-start; }
	.rl-legend { align-self: stretch; }

	.rl-toolbar-inner { gap: .55rem; }
	.rl-search { order: 3; flex-basis: 100%; max-width: none; }
	.rl-modes button { padding: 0 1rem; }

	.rl-study-grid { padding-top: 1.1rem; }
	.rl-head { gap: .7rem .9rem; margin-bottom: 1.1rem; }
	.rl-head-no { width: 48px; height: 48px; font-size: 1.35rem; border-radius: 14px; }
	.rl-head-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
	.rl-card { padding: .75rem 1rem 1rem; }
	.rl-name { font-size: 1.5rem; }
	.rl-flash { min-height: 260px; padding: 1.3rem 1rem; }
	.rl-done-actions .rl-btn { width: 100%; }
	.rl-foot .rl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	#app *, #app *::before, #app *::after { transition: none !important; animation: none !important; }
}