/* ธีมมืด + สีชมพู TikTok */
:root {
    --tt-pink: #fe2c55;
    --tt-pink-dark: #d81f45;
    --tt-cyan: #25f4ee;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0f0f12;
    --bs-body-font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-link-color: #ff6b88;
    --bs-link-color-rgb: 255, 107, 136;
    --bs-link-hover-color: var(--tt-pink);
    --bs-link-hover-color-rgb: 254, 44, 85;
}

.tt-accent { color: var(--tt-pink); }
.tt-navbar { background: #16161b; }
.tt-navbar .nav-link.active { color: var(--tt-pink); font-weight: 500; }

.btn-tt {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tt-pink);
    --bs-btn-border-color: var(--tt-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-pink-dark);
    --bs-btn-hover-border-color: var(--tt-pink-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b9183a;
    --bs-btn-active-border-color: #b9183a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tt-pink);
    --bs-btn-disabled-border-color: var(--tt-pink);
    --bs-btn-focus-shadow-rgb: 254, 44, 85;
}
.btn-outline-tt {
    --bs-btn-color: var(--tt-pink);
    --bs-btn-border-color: var(--tt-pink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tt-pink);
    --bs-btn-hover-border-color: var(--tt-pink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tt-pink-dark);
    --bs-btn-active-border-color: var(--tt-pink-dark);
    --bs-btn-focus-shadow-rgb: 254, 44, 85;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--tt-pink);
    box-shadow: 0 0 0 .25rem rgba(254, 44, 85, .25);
}
.form-check-input:checked { background-color: var(--tt-pink); border-color: var(--tt-pink); }

.card { background: #17171c; border-color: #2a2a31; }
.card-header { background: #1d1d23; font-weight: 500; }

/* สถานะการเชื่อมต่อ */
.status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #6c757d; margin-right: .35rem; }
.status-dot.on { background: #20c997; box-shadow: 0 0 8px #20c997; }
.status-dot.wait { background: #ffc107; animation: blink 1s infinite; }
.status-dot.off { background: #6c757d; }
.status-dot.down { background: var(--tt-pink); }
@keyframes blink { 50% { opacity: .3; } }

/* รูปโปรไฟล์ */
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #2a2a31; flex-shrink: 0; }
.avatar-sm { width: 24px; height: 24px; }
.gift-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }

/* ฟีดเหตุการณ์ */
.feed { max-height: 560px; overflow-y: auto; }
.feed .list-group-item { background: transparent; border-color: #26262c; }
.feed .ev-test { background: rgba(255, 193, 7, .06); }
.feed .ev-new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: rgba(254, 44, 85, .25); } to { background: transparent; } }

.stat-badge { font-weight: 400; }

/* เลขเวอร์ชันข้างโลโก้ */
.tt-version {
    display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px;
    font-size: .7rem; font-weight: 500; vertical-align: middle; letter-spacing: .02em;
    color: #ff8aa1; background: rgba(254, 44, 85, .12); border: 1px solid rgba(254, 44, 85, .35);
}

/* โซนหน้าหลัก: หัวข้อมีเลขวงกลม */
.zone-num {
    display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
    margin-right: .45rem; border-radius: 50%; background: var(--tt-pink); color: #fff;
    font-size: .85rem; font-weight: 700; vertical-align: middle;
}
.zone-head { font-size: 1.05rem; padding-top: .7rem; padding-bottom: .7rem; }
.zone-title { font-size: 1.15rem; font-weight: 500; margin-bottom: .75rem; }

/* สถานะการเชื่อมต่อแบบตัวใหญ่ */
.conn-status { display: flex; align-items: center; gap: .6rem; }
.conn-status .status-dot { width: 1rem; height: 1rem; margin: 0; }
.conn-text { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }

/* เสียงพลุ */
.vol-pct { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.vol-mute { width: 3.2rem; height: 3.2rem; font-size: 1.4rem; border-radius: 50%; }
.vol-step { width: 2.4rem; font-size: 1.2rem; line-height: 1; padding: .3rem 0; }
.tt-range { accent-color: var(--tt-pink); }
.tt-range::-webkit-slider-thumb { background: var(--tt-pink); }
.tt-range::-moz-range-thumb { background: var(--tt-pink); }

/* การ์ด overlay */
.overlay-card { border-color: #33333b; transition: border-color .15s; }
.overlay-card:hover { border-color: rgba(254, 44, 85, .55); }
.ov-icon { font-size: 1.8rem; line-height: 1; }
/* หน้าตั้งค่าพลุ (customize-firework.php) */
.fw-row { display: grid; grid-template-columns: 9.5rem 1fr 3.2rem; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.fw-row label { font-size: .92rem; }
.fw-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fw-files { max-height: 220px; overflow-y: auto; border: 1px solid #2a2a31; border-radius: .5rem; padding: .35rem .6rem; background: #131317; }
.fw-file { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; min-width: 0; }
.fw-file .form-check-label { flex: 1; min-width: 0; font-size: .88rem; }
.fw-play { text-decoration: none; color: var(--tt-pink); }
.fw-preview-card { position: sticky; top: calc(60px + 1rem); }   /* 60px = แถบบนที่ติดจอ */
.fw-preview { aspect-ratio: 4 / 3; border-radius: .6rem; overflow: hidden; border: 1px solid #2a2a31;
    background: repeating-conic-gradient(#1c1c22 0% 25%, #16161b 0% 50%) 50% / 24px 24px; }
/* color-scheme: normal = ตรงกับหน้า overlay → iframe โปร่งใส (ถ้าไม่ตรง เบราว์เซอร์จะทาพื้นขาวทับ) */
.fw-preview iframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: normal; }
.fw-savebar { position: sticky; bottom: 0; z-index: 5; margin-top: 1.5rem; padding: .75rem 0; background: rgba(15, 15, 18, .92);
    border-top: 1px solid #2a2a31; backdrop-filter: blur(6px); }
@media (max-width: 575px) { .fw-row { grid-template-columns: 1fr 3.2rem; } .fw-row label { grid-column: 1 / -1; } }

/* ⚙ ปุ่มตั้งค่าบนการ์ด overlay */
.ov-gear { width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; font-size: 1.15rem; line-height: 2.05rem; flex-shrink: 0; }
.ov-gear:hover { color: #fff; background: var(--tt-pink); border-color: var(--tt-pink); }
.overlay-soon { border-style: dashed; background: transparent; }
/* กรอบตัวอย่างสดของ overlay (พื้นตาราง = โปร่งใส เหมือนหน้า preview.html)
   color-scheme ต้องตรงกับหน้า overlay (light) ไม่งั้น Chrome จะทาพื้น iframe เป็นสีขาวทึบ เพราะแดชบอร์ดเป็นธีมมืด */
.ov-variant-frame {
    width: 100%; aspect-ratio: 4 / 3; border: 1px solid #33333b; border-radius: .5rem;
    background: repeating-conic-gradient(#191922 0% 25%, #22222d 0% 50%) 50% / 26px 26px;
    color-scheme: light;
}
.overlay-soon:hover { border-color: #33333b; }
.color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0006; vertical-align: middle; }
.color-item .form-control-color { width: 3.2rem; flex: 0 0 3.2rem; padding: .2rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.text-tt { color: var(--tt-pink) !important; }

/* ส่วนท้าย: ชื่อโปรแกรม / เวอร์ชัน / ลิขสิทธิ์ */
.tt-footer { line-height: 1.7; }
.tt-footer-brand { font-size: 1rem; font-weight: 700; }

/* ปุ่มติดตั้งแอป (PWA) มุมขวาล่าง */
.pwa-install { position: fixed; right: 1rem; bottom: 1rem; z-index: 1500; border-radius: 999px; padding: .65rem 1.2rem;
    font-weight: 600; box-shadow: 0 8px 24px rgba(254, 44, 85, .45); }

/* ---------- เมนูซ้าย (lib/layout.php) ---------- */
.tt-navbar.sticky-top { z-index: 1030; }
.tt-topnav .dropdown-menu { position: absolute; }     /* navbar ไม่ยุบ → dropdown ลอยเหมือนเดิม */
.tt-side-toggle { width: 2.4rem; height: 2.4rem; padding: 0; font-size: 1.2rem; line-height: 1; }
.tt-shell { display: flex; align-items: stretch; min-height: calc(100vh - 60px); }
.tt-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tt-main > main { flex: 1 0 auto; }
.tt-side { --bs-offcanvas-width: 260px; --bs-offcanvas-bg: #121216; }
.tt-side .offcanvas-body { display: flex; padding: .9rem .6rem; }
.tt-side-nav .nav-link {
    display: flex; align-items: center; gap: .65rem; padding: .62rem .8rem; margin-bottom: .15rem;
    border-radius: .6rem; color: var(--bs-body-color); font-weight: 500; transition: background .12s, color .12s;
}
.tt-side-nav .nav-link:hover { background: #1f1f26; color: #fff; }
.tt-side-nav .nav-link.active { background: rgba(254, 44, 85, .14); color: #ff8aa1; box-shadow: inset 3px 0 0 var(--tt-pink); }
.tt-side-ico { width: 1.5rem; text-align: center; font-size: 1.1rem; }
.tt-side-sep { height: 1px; background: #26262c; margin: .55rem .5rem; }
@media (min-width: 992px) {
    .tt-side { width: 236px; flex: 0 0 236px; border-right: 1px solid #23232a; background: #121216; }
    .tt-side .offcanvas-body { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
}

/* 📌 ปุ่มปักหมุดบนการ์ด overlay */
.ov-pin {
    width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; flex-shrink: 0; font-size: 1rem; line-height: 2.05rem;
    border: 1px solid #3a3a44; filter: grayscale(1); opacity: .55; transition: opacity .15s, filter .15s, background .15s;
}
.ov-pin:hover { opacity: 1; filter: none; border-color: var(--tt-pink); }
.ov-pin.on { opacity: 1; filter: none; background: rgba(254, 44, 85, .16); border-color: var(--tt-pink); }
.overlay-card.is-pinned { border-color: rgba(254, 44, 85, .4); }
.ov-col { transition: opacity .25s, transform .25s; }
.ov-col.ov-leaving { opacity: 0; transform: scale(.96); }
/* ข้อความผลลัพธ์ลอย (หน้าไม่มี #testResult ของตัวเอง) */
.ov-toast:not(:empty) { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1600; max-width: 92vw;
    padding: .55rem .9rem; border-radius: .6rem; background: #1d1d23; border: 1px solid #33333b; box-shadow: 0 8px 24px #0008; }
.ov-tools { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex-shrink: 0; }
.ov-tools > * { margin-left: 0 !important; }
@media (max-width: 1199.98px) {
    .overlay-card .ov-head .ov-tools { order: 3; }
    .overlay-card .ov-head .ov-pin { width: 2.4rem; height: 2.4rem; line-height: 2.25rem; }
}
/* จอมือถือ: แถบบนบรรทัดเดียว (ซ่อนเลขเวอร์ชัน · ชื่อยาวตัด …) */
@media (max-width: 575.98px) {
    .tt-navbar .container-fluid { flex-wrap: nowrap; }
    .tt-navbar .navbar-brand { font-size: 1.05rem; margin-right: .25rem; white-space: nowrap; }
    .tt-navbar .navbar-brand .tt-version { display: none; }
    .tt-topnav { gap: .25rem !important; }
    .tt-topnav .nav-link.dropdown-toggle { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ป้ายสถานะไลฟ์ข้างกระดิ่ง (assets/live-status.js) */
.tt-live-pill {
    display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem; border-radius: 999px; font-size: .82rem;
    font-weight: 600; text-decoration: none; white-space: nowrap; max-width: 15rem; overflow: hidden; text-overflow: ellipsis;
    color: #c9c9d1; background: #1f1f26; border: 1px solid #33333b;
}
.tt-live-pill:hover { color: #fff; border-color: #55555f; }
.tt-live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #6c757d; flex-shrink: 0; }
.tt-live-pill.on { color: #fff; background: rgba(254, 44, 85, .18); border-color: var(--tt-pink); }
.tt-live-pill.on .tt-live-dot { background: var(--tt-pink); box-shadow: 0 0 8px var(--tt-pink); animation: blink 1.2s infinite; }
.tt-live-pill.wait { color: #ffd76a; border-color: rgba(255, 193, 7, .45); }
.tt-live-pill.wait .tt-live-dot { background: #ffc107; animation: blink 1s infinite; }
.tt-live-pill.down { color: #ff8aa1; border-color: rgba(254, 44, 85, .45); }
.tt-live-pill.down .tt-live-dot { background: var(--tt-pink); }
@media (max-width: 575.98px) {
    .tt-live-pill { padding: .28rem .5rem; max-width: 6.5rem; }
}

/* หน้าเริ่ม Live: สรุปไลฟ์รอบนี้ */
.live-stat { background: #17171c; border: 1px solid #2a2a31; border-radius: .7rem; padding: .6rem .8rem; height: 100%; }
.ls-label { font-size: .8rem; color: var(--bs-secondary-color); }
.ls-val { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
@media (max-width: 575.98px) {
    .tt-navbar .navbar-brand { font-size: .95rem; }
    .tt-topnav .mb-who-txt { display: none; }            /* จอมือถือ: เหลือไอคอน (ชื่อ/วันคงเหลือดูในเมนูบัญชี) */
    .tt-topnav .mb-who { padding-left: .2rem; padding-right: .2rem; }
    .tt-live-pill { max-width: 5.6rem; font-size: .75rem; }
}

/* Free: การ์ดที่ยังไม่ได้ปักหมุด = ใช้ไม่ได้ (ซ่อนลิงก์/ปุ่มคัดลอก/เปิดหน้า/อัปเดต · หน้า overlay เองก็ล็อก) */
.ov-locked .ov-link, .ov-locked .ov-open, .ov-locked .ov-reload, .ov-locked .ov-reload-msg,
.ov-locked [data-copy], .ov-locked [data-copy-target] { display: none !important; }
.ov-locked .ov-head h3::after { content: " 🔒"; font-size: .85em; }

/* หน้าซื้อ: ตารางเทียบสิทธิ์ Free / Premium */
.plan-compare .table { --bs-table-bg: transparent; }
.plan-compare th, .plan-compare td { padding: .55rem .9rem; }
.plan-compare .is-pro { background: rgba(254, 44, 85, .07); font-weight: 500; }
.plan-compare thead .is-mine { box-shadow: inset 0 -3px 0 var(--tt-pink); }
.qr-note { max-width: 220px; margin-left: auto; margin-right: auto; }

/* แจ้งเตือนลอยมุมขวาบน (assets/overlay-cards.js floatToast) */
.ov-toasts { position: fixed; top: 72px; right: 16px; z-index: 1600; display: flex; flex-direction: column; gap: .5rem;
    width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.ov-toast-item { pointer-events: auto; display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem .7rem .95rem; border-radius: .7rem;
    background: rgba(29, 29, 35, .96); border: 1px solid #3a3a44; border-left: 4px solid #6c757d; box-shadow: 0 12px 30px #000a;
    font-size: .9rem; backdrop-filter: blur(6px); animation: ovToastIn .25s ease-out; transition: opacity .25s, transform .25s; }
.ov-toast-item .ov-toast-body { flex: 1; min-width: 0; }
.ov-toast-item .btn-close { flex-shrink: 0; font-size: .7rem; margin-top: .2rem; }
.ov-toast-item.ok { border-left-color: #20c997; }
.ov-toast-item.warn { border-left-color: #ffc107; color: #ffe08a; }
.ov-toast-item.err { border-left-color: var(--tt-pink); }
.ov-toast-item.out { opacity: 0; transform: translateX(24px); }
@keyframes ovToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ov-locked .card-body { cursor: pointer; }

/* Overlay browser: native touch scrolling, mouse dragging and keyboard navigation. */
.ov-grid { display:flex; flex-wrap:nowrap; gap:16px; margin:0; padding:4px 0 16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; align-items:flex-start; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#fe2c55 #22222a; }
.ov-grid > .ov-col { flex:0 0 calc((100% - 32px)/3); width:calc((100% - 32px)/3); min-width:0; max-width:none; padding:0; margin:0; scroll-snap-align:start; }
.ov-grid.is-dragging { scroll-snap-type:none; cursor:grabbing; user-select:none; }
.ov-grid.is-dragging iframe { pointer-events:none; }
.ov-col,.overlay-card,.overlay-card .card-body,.ov-summary,.ov-detail { min-width:0; }
.overlay-card .card-body { padding:16px; }
.overlay-card .ov-head { flex-wrap:nowrap; min-height:56px; gap:8px; }
.overlay-card .ov-head h3 { flex:1; min-width:0; font-size:1.05rem; line-height:1.5; overflow-wrap:anywhere; }
.ov-tools { flex-shrink:0; }
.ov-pin { min-width:44px; min-height:44px; }
.ov-summary { display:flex; flex-direction:column; }
.ov-summary > p { min-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ov-variant-frame { display:block; height:auto; flex:none; min-width:0; pointer-events:none; }
.ov-tests-d { display:block; }
.ov-test-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ov-test-grid > :last-child:nth-child(odd) { grid-column:1/-1; }
[data-test] { position:relative; min-width:0; min-height:48px; white-space:normal; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.ov-test-label { display:block; padding:4px 0; }
[data-test].active .ov-test-label { visibility:hidden; }
.ov-combo-count { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; padding:4px; font-weight:700; }
.ov-detail { display:none; flex-direction:column; gap:8px; padding-top:12px; margin-top:12px; border-top:1px solid #33333b; }
.overlay-card.open .ov-detail { display:flex; }
.ov-settings-toggle { width:100%; min-height:44px; margin-top:8px; display:flex; justify-content:space-between; align-items:center; }
.ov-settings-toggle[aria-expanded="true"] { border-color:var(--tt-pink); color:#fff; }
.ov-detail .ov-gear { width:auto; height:auto; min-height:44px; line-height:normal; padding:10px; border-radius:8px; text-align:center; }
.ov-link { flex-wrap:nowrap; min-width:0; }
.ov-link .form-control { min-width:0; }
.ov-carousel-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ov-carousel-tools .btn { min-height:44px; }
.ov-carousel-hint { flex:1 1 160px; font-size:.85rem; color:var(--bs-secondary-color); }
.ov-carousel-count { min-width:4rem; text-align:center; font-variant-numeric:tabular-nums; }
.ov-editor .tx-slots { display:none; }
.overlay-card.open .ov-editor .tx-slots { display:flex; }
.tr-ctl,.tw-ctl { min-width:0; }
.tr-duration { flex-wrap:wrap; }
.tr-duration select { flex:1; min-width:100px; }
.tr-actions,.tw-actions { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tr-actions .btn,.tw-actions .btn { min-height:44px; min-width:0; white-space:normal; }
.tr-actions [data-tr-act="start"],.tw-actions [data-tw-act="start"] { grid-column:1/-1; font-weight:700; }
.tw-actions select { width:100%!important; grid-column:1/-1; min-height:44px; }
.tr-ctl [data-tr-status],.tw-ctl [data-tw="phase"] { padding:8px; background:#111116; border-radius:8px; overflow-wrap:anywhere; }
.ov-summary > .d-flex > .btn { flex:1; min-height:44px; white-space:normal; }

@media(max-width:1199.98px) { .ov-grid > .ov-col { flex-basis:calc((100% - 32px)/2); width:calc((100% - 32px)/2); } .ov-grid > .ov-soon-col { display:none; } }
@media(max-width:767.98px) {
    .ov-grid > .ov-col { flex-basis:92%; width:92%; }
    .overlay-card .card-body { padding:14px; }
    .ov-filter > .form-control { max-width:none!important; flex-basis:100%; }
    .ov-filter .btn-group { width:100%; display:flex; }
    .ov-filter .btn-group .btn { flex:1; min-width:0; padding:10px 6px; font-size:.8rem; }
    .ov-filter > a { width:100%; }
    .tt-navbar .navbar-brand { min-width:0; overflow:hidden; text-overflow:ellipsis; }
    .tt-navbar .container-fluid { gap:4px; }
    .tt-topnav { flex-shrink:0; }
    .tg-btns { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .tg-btns .btn { min-width:0!important; min-height:48px; white-space:normal; }
    .tg-team,.tg-team.t2 { flex-direction:column!important; text-align:center!important; }
    .tg-name { max-width:100%; font-size:.95rem!important; }
    .tg-score { font-size:1.6rem!important; overflow-wrap:anywhere; }
    .tg-teams { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important; gap:8px!important; }
    .tr-ctl .form-select,.tw-ctl .form-select,.tr-ctl .form-control { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .ov-grid { scroll-behavior:auto; } }

.ov-settings-toggle { display:flex; }
.ov-grid:focus-visible { outline:2px solid var(--tt-cyan); outline-offset:4px; }
.ov-carousel-tools[hidden] { display:none; }
@media(max-width:575.98px) { .ov-link { flex-wrap:wrap; gap:8px; } .ov-link .form-control { flex-basis:100%; width:100%; border-radius:6px!important; } .ov-link .btn { width:100%; min-height:44px; border-radius:6px!important; } }

[data-test] { height:56px; min-height:56px; }
.ov-test-label { padding:0 2px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media(max-width:767.98px) {
    .ov-carousel-tools { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px 44px; gap:8px; }
    .ov-carousel-hint { grid-column:1/-1; }
    .ov-carousel-tools .ov-carousel-count { min-width:0; }
    .ov-carousel-tools [data-all-settings] { font-size:.75rem; padding-inline:6px; }
    .ov-carousel-tools [data-prev],.ov-carousel-tools [data-next] { padding-inline:0; }
}

.ov-carousel-count { white-space:nowrap; font-size:.8rem; }
@media(max-width:767.98px) { .ov-carousel-tools { grid-template-columns:minmax(0,1fr) 44px 52px 44px; } }

.overlay-card .ov-head { display:flex; align-items:center; }
.ov-description { min-height:4.5em; margin:8px 0 12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ov-preview-label,.ov-test-heading { font-size:.8rem; color:var(--bs-secondary-color); margin-bottom:6px; }
.ov-preview-surface { margin-bottom:14px; }
.ov-preview-surface .ov-variant-frame { margin:0; }
.ov-test-section { margin-bottom:12px; }
.overlay-card > .card-body > .ov-tools { width:100%; margin-top:8px; }

/* Compact test row and two-row game controls. */
.overlay-card .ov-test-grid { display:flex; flex-wrap:nowrap; gap:6px; }
.overlay-card .ov-test-grid [data-test] { flex:1 1 0; min-width:0; height:34px; min-height:34px; padding:4px; font-size:.75rem; }
.overlay-card .ov-test-label { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0; }
.overlay-card .ov-head .ov-gear { width:34px; height:34px; min-width:34px; padding:0; line-height:32px; border-radius:50%; }
.game-compact { padding:10px!important; }
.game-primary { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:8px; }
.game-primary > *,.game-time { min-width:0; }
.game-primary .btn,.game-primary .form-select { width:100%; min-height:36px; height:36px; font-size:.8rem; }
.game-secondary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-top:8px; margin-top:8px; border-top:1px solid #383840; }
.game-secondary .btn { min-width:0; height:34px; padding:4px 2px; font-size:.72rem; white-space:nowrap; }
.game-error:empty { display:none; }
.game-error:not(:empty) { margin-top:6px; }
@media(max-width:575.98px) { .overlay-card .ov-test-grid [data-test] { font-size:.66rem; padding-inline:2px; } .game-primary .form-select { font-size:16px; } }

/* Desktop uses the original multi-row grid; swiping is for mobile/tablet. */
@media(min-width:1200px) {
    .ov-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; align-items:stretch; }
    .ov-grid > .ov-col { width:100%; max-width:100%; scroll-snap-align:none; }
    .ov-carousel-tools { justify-content:flex-end; }
    .ov-carousel-hint,.ov-carousel-count,.ov-carousel-tools [data-prev],.ov-carousel-tools [data-next] { display:none; }
}