/* ===== LUỒNG MỚI =====
   Vòng quay may mắn dùng preset (theme_mode = 'preset'): nền trang theo preset và
   2 kiểu hiển thị mới Lật bài (.lsg-cards) / Nhấn giữ (.lsg-slider, .lsg-hold).
   Bản cho người chơi của CMS public/backend/css/luckyspin/game-preview.css — sửa
   giao diện ở đây thì nhớ sửa preview bên CMS cho khớp.
   Màu lấy từ biến --lsg-* do LuckySpinView đặt theo theme (features/lucky-spin/theme.ts). */

/* .lsg-root là stacking context riêng (isolation) để lớp nền cố định .lsg-page-bg
   (z-index -1) nằm trên nền .page/.game-page của sự kiện — các nền đó có !important
   và một số theme sự kiện ẩn luôn .page:before, nên không vẽ nền lên chúng được. */
.lsg-root {
    position: relative;
    isolation: isolate;
    color: var(--lsg-text, #fff);
    font-family: var(--font-inter), Inter, 'Be Vietnam Pro', sans-serif;
}
.lsg-root button { font-family: inherit; }
/* Lớp chạm trong suốt của ios-haptics (features/lucky_spin/haptics.ts): nằm trên viền,
   hiệu ứng của nút để ngón tay luôn chạm vào nó (iPhone mới rung). */
.lsg-root [data-haptic-trigger] { z-index: 10; }

/* Trang preset không có bottom nav: bỏ khoảng chừa của .game-page .page-main để
   cột nội dung cao đúng một màn hình, vòng quay canh giữa theo chiều cao. */
.game-page .page-main:has(> .lsg-root) { margin-bottom: 0; }

/* Cao đúng màn hình thiết bị. .page (style.min.css) có min-height: 100vh: trên Safari iOS
   100vh là chiều cao khi thanh địa chỉ ẩn, nên lúc thanh hiện trang dài hơn màn hình và
   cuộn được dù bên dưới không có gì. dvh = chiều cao đang nhìn thấy thật. */
html.lsg-doc .game-page { min-height: 100vh; min-height: 100dvh; }
/* Nền .page của sự kiện (ảnh xanh nhạt, theme sự kiện có !important) lộ ra ở vùng ngoài
   lớp nền cố định .lsg-page-bg: dải trên (thanh trạng thái) và dưới (thanh công cụ Safari)
   khi cuộn. Tô chính .page bằng nền game (--lsg-doc-page-bg = pageBackground của preset). */
html.lsg-doc .page.game-page {
    background: var(--lsg-doc-page-bg, #03161b) !important;
}
html.lsg-doc .page.game-page::before,
html.lsg-doc .page.game-page::after { display: none !important; }
/* Class lsg-doc do LuckySpinPresetLayout gắn lên <html>: tô html/body bằng màu nền dưới
   của game thay cho nền xám của sự kiện (lộ ra ở vùng kéo nảy, dưới thanh công cụ Safari),
   và tắt kéo nảy của trang. */
html.lsg-doc,
html.lsg-doc body {
    background: var(--lsg-doc-bg, #03161b) !important;
    overscroll-behavior: none;
}
/* Điện thoại dựng đứng: game luôn vừa đúng một màn hình nên khoá luôn cuộn trang. Safari iOS
   hay dôi vài px so với màn hình (thanh địa chỉ co/giãn, safe-area, làm tròn dvh) và hiện
   thanh cuộn dù bên dưới trống. Popup (luật, lịch sử) có vùng cuộn riêng nên không ảnh hưởng.
   Máy tính / xoay ngang vẫn cuộn bình thường vì màn hình thấp có thể không đủ chỗ. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
    html.lsg-doc,
    html.lsg-doc body {
        overflow: hidden;
    }
    html.lsg-doc .game-page {
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
}

.lsg-page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ls-page-bg);
    pointer-events: none;
}

.lsg-column {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 32px;
}

/* Có header sự kiện (.header cố định, cao var(--header-height) = 3.125rem): .page-main bị
   đẩy xuống đúng chừng đó (style.min.css `.header ~ .page-main { margin-top }`), nên cột
   game phải ngắn đi tương ứng thì tổng vẫn đúng một màn hình, không cuộn thừa. */
.header ~ .page-main .lsg-column {
    min-height: calc(100vh - var(--header-height, 3.125rem));
    min-height: calc(100dvh - var(--header-height, 3.125rem));
}

/* ---------- Thanh trên: quay lại | thể lệ, lịch sử ---------- */
.lsg-topbar { display: flex; align-items: center; gap: 10px; }
.lsg-grow { flex: 1 1 auto; }
.lsg-ico {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lsg-text, #fff);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(11.7px);
    backdrop-filter: blur(11.7px);
    box-shadow: inset 5px -4px 5.5px rgba(214, 214, 214, .08);
    cursor: pointer;
}
/* Viền nút theo Figma: border 1px, border-image 178.75deg (trắng .66 -> xám 0).
   border-image không bo tròn nên vẽ bằng lớp ::after + mask (vòng giữa border-box và
   content-box, content-box tự bo theo border-radius). Như thiết kế, viền dày ở trên,
   mỏng dần hai bên và mất hẳn ở đáy: padding 1.5px trên / 1px hai bên / 0 dưới, cộng
   gradient mờ dần từ trên xuống. Dùng chung cho mọi nút của game. */
.lsg-ico::after,
.lsg-btn::after,
.lsg-hold::after,
.lsg-close::after,
.lsg-dialog-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px 1px 0;
    background: linear-gradient(178.75deg, rgba(255, 255, 255, .66) -36.79%, rgba(153, 153, 153, 0) 132.22%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
.lsg-ico:hover { color: var(--lsg-text, #fff); filter: brightness(1.15); }

.lsg-logo { margin: 10px auto 18px; text-align: center; }
.lsg-logo img { display: inline-block; max-width: 86%; max-height: 72px; object-fit: contain; }

.lsg-status { margin: 40px 0; text-align: center; font-size: 16px; font-weight: 600; }

/* Màn chơi chiếm phần còn lại của cột, nội dung canh giữa theo chiều cao. */
.lsg-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 12px;
    -webkit-user-select: none;
    user-select: none;
}

/* Lật bài và nhấn giữ: như vòng quay, màn chơi chiếm đúng phần còn lại của cột (flex-basis 0
   + size container, nội dung không đẩy cao thêm) rồi các khối bên trong tự co theo chiều cao
   (cqh = chiều cao màn chơi) -> trang không bao giờ cao hơn màn hình, không cuộn thừa. */
.lsg-stage--cards,
.lsg-stage--slide {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
}

/* ---------- Vòng quay ----------
   Khung theo Figma (điện thoại 393px): nhóm 380px (#wheelOfFortune), vành kính 326.9px.
   Vành là ẢNH KHUNG (.wheel-2): theme overlay_image, trống thì spin-default.png (@3x của
   spin-default.svg do Figma xuất 335x335, vành ngoài 326.9, lỗ giữa 261.5). Ảnh khung chiếm 88.16% nhóm (lệch vào
   5.92%) để vành ngoài đúng 326.9/380; các ô quà vừa lỗ giữa (PRESET_WHEEL_RADIUS 0.69).
   Giới hạn theo chiều cao để màn thấp vẫn thấy nút Quay. */
/* Vòng quay rộng hơn cột (100vw - 12px > 100vw - 32px do padding 16px): bỏ margin auto
   của spin_game.css, vì khi phần tử tràn khung flex thì margin auto thành 0 và vòng
   quay dạt sang phải. Không có margin ngang thì align-items: center tràn đều 2 bên. */
.lsg-stage #wheelOfFortune {
    flex: 0 0 auto;
    /* Kích thước nhóm vòng quay. Vành nhìn thấy = 86.03% nhóm (ảnh khung lệch vào 7%).
       - Điện thoại: vành ~80% bề ngang màn hình -> nhóm = 80vw / .8603 (~93vw).
       - Máy tính: tối đa 488px (vành 420px).
       - Không cao hơn phần còn lại của màn hình: cqh = chiều cao .lsg-stage--wheel (trừ
         khoảng chừa đáy), chừa mép trên 1dvh + khối nút Quay ~137px (gap 14 + đệm 24 +
         nút 45 + gap 10 + dòng lượt tới 2 dòng 42); chỉ tính phần vành vì 7% trên/dưới được kéo
         bằng margin âm bên dưới -> cả trang không bao giờ cao hơn màn hình. */
    --lsg-wof-size: max(200px, min(calc(80vw / .8603), 488px, calc((100cqh - 1dvh - 137px) / .8603)));
    width: var(--lsg-wof-size);
    max-width: none;
    margin: calc(1dvh - var(--lsg-wof-size) * .07) 0 calc(var(--lsg-wof-size) * -.07);
    overflow: visible;
    border-radius: 50%;
}
.lsg-stage #wheelOfFortune .wheel-1 { position: relative; z-index: 2; }
/* Ảnh khung nằm trên các ô (viền sáng phía trong ôm mép ô), dưới nút giữa. */
.lsg-stage #wheelOfFortune .wheel-2 {
    z-index: 2;
    inset: 5.92%;
    width: auto;
    height: auto;
    background: center / contain no-repeat;
    pointer-events: none;
}
.lsg-stage #wheelOfFortune #btnSpin {
    z-index: 3;
    width: 22%;
    height: 22%;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
}
/* Nút giữa không dùng thuộc tính disabled (Safari iOS tô kiểu riêng cho nút disabled làm
   nhoè lớp làm mờ + ảnh): đang quay / hết lượt thì JS gắn data-locked, chỉ chặn chạm,
   giữ nguyên hình. appearance/opacity đặt rõ để không ăn kiểu nút mặc định của iOS. */
.lsg-stage #wheelOfFortune #btnSpin {
    -webkit-appearance: none;
    appearance: none;
    opacity: 1;
    -webkit-tap-highlight-color: transparent;
}
.lsg-stage #wheelOfFortune #btnSpin[data-locked] { pointer-events: none; cursor: default; }
.lsg-stage #wheelOfFortune #btnSpin:disabled { filter: none; opacity: 1; }

/* Nút mặc định button-spin.png (62x82, tâm nút tròn ở y=52, mũi kim phía trên).
   Ảnh bán trong suốt và hiệu ứng làm mờ nền (background blur) của Figma không xuất
   vào ảnh được: vẽ lớp làm mờ bằng ::before (đúng vòng tròn r=29.1 của nút) rồi đặt
   ảnh lên trên bằng ::after. Đẩy nút lên 63.4% để tâm nút trùng tâm vòng quay. */
.lsg-stage #wheelOfFortune #btnSpin.is-knob {
    width: 19%;
    height: auto;
    aspect-ratio: 62 / 82;
    background: none;
    transform: translate(-50%, -63.4%);
}
.lsg-stage #wheelOfFortune #btnSpin.is-knob::before,
.lsg-stage #wheelOfFortune #btnSpin.is-knob::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.lsg-stage #wheelOfFortune #btnSpin.is-knob::before {
    left: 0;
    top: 27.9%;
    width: 93.9%;
    height: 71%;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(8.4px);
    backdrop-filter: blur(8.4px);
}
.lsg-stage #wheelOfFortune #btnSpin.is-knob::after {
    inset: 0;
    background: url('/frontend/images/button-spin.png') center / 100% 100% no-repeat;
}

/* Bố cục vòng quay theo thiết kế: logo ngay dưới thanh trên, vòng quay sát dưới logo,
   nút Quay ở khoảng 3/4 chiều cao màn hình (đáy chừa ~14vh). */
/* Đáy dòng "Bạn có xx lượt quay" ở ~83% chiều cao như thiết kế (cột còn padding đáy 32px). */
/* Màn vòng quay chiếm đúng phần còn lại của cột (flex-basis 0 + size container, nội dung
   không đẩy cao thêm) để vòng quay tự co theo chiều cao (xem width của #wheelOfFortune).
   dvh thay vh: trên Safari iOS vh là chiều cao khi thanh địa chỉ ẩn -> cao hơn màn hình. */
.lsg-stage--wheel {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
    justify-content: flex-start;
    margin-bottom: 0;
    /* Chừa đáy ít lại (trước 17dvh) để vòng quay to được ~80% bề ngang. */
    padding-bottom: max(0px, calc(8dvh - 32px));
    margin-top: 3%;
}
.lsg-stage.lsg-stage--wheel .lsg-footer { margin-top: 10%; padding-top: 24px; }
.btn-back-spin { display:none; }

.lsg-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    text-align: center;
}
.lsg-stage .lsg-footer { margin-top: 20%; }

.lsg-note { font-size: 14px; font-weight: 600; text-align: center; }
.lsg-hint {
    min-height: 42px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}
.lsg-stage .lsg-hint {
    min-height: unset;
    margin-top: 10%;
}

.lsg-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lsg-text, #fff);
    font: inherit;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Quà: ảnh + tên ---------- */
.lsg-prize-img {
    display: block;
    width: 46%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 8px;
    background: center / contain no-repeat;
}
.lsg-prize-img.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}
.lsg-prize-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---------- Nút Quay (vòng quay dùng preset) ---------- */
/* Theo Figma: nền #002C4957, viền 1px gradient 178.75deg (trắng .66 → xám 0), cùng kiểu
   kính mờ với nút góc .lsg-ico. Màu nền/viền cố định theo thiết kế, preset chỉ đổi màu chữ. */
.lsg-btn {
    position: relative;
    min-width: 150px;
    padding: 12px 26px;
    border-radius: 10px;
    border: 0;
    background: rgba(0, 44, 73, .34);
    -webkit-backdrop-filter: blur(11.7px);
    backdrop-filter: blur(11.7px);
    box-shadow: inset 5px -4px 5.5px rgba(214, 214, 214, .08);
    color: var(--lsg-btn-text);
    font: 700 16px/1.3 var(--font-inter), Inter, sans-serif;
    cursor: pointer;
    transition: filter .15s;
}
.lsg-btn:hover { filter: brightness(1.15); }
/* Hết lượt / vòng quay chưa sẵn sàng: nút xám như thiết kế. pointer-events: none để không
   nhận chạm (kể cả lớp chạm rung iOS bên trong nút, không thì vẫn rung như bấm được). */
.lsg-btn:disabled,
.lsg-btn:disabled:hover {
    background: rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .45);
    filter: none;
    cursor: default;
    pointer-events: none;
}
.lsg-btn.is-busy { filter: brightness(1.35) saturate(1.3); cursor: default; }

/* ---------- Lật bài ---------- */
.lsg-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin-top: 10%;
}
.lsg-cards--12 { max-width: 330px; }
/* Vừa chiều cao màn chơi: số hàng R (6 thẻ = 2, 9 = 3, 12 = 4), ô vuông s = (bề ngang - 20px) / 3
   nên cần R*s + (R-1)*10px <= chiều cao còn lại. Chiều cao còn lại = 100cqh trừ: lề trên của
   lưới và của dòng nút/gợi ý (10% + 10% bề ngang = 20cqw), dòng nút/gợi ý .lsg-cards-cta (46px),
   dòng lượt (tới 2 dòng 42px) và 2 khoảng gap 15px = 118px. Màn đủ cao thì bị chặn bởi
   100% / max-width. */
.lsg-cards--6 { --lsg-rows: 2; }
.lsg-cards--9 { --lsg-rows: 3; }
.lsg-cards--12 { --lsg-rows: 4; }
.lsg-stage--cards .lsg-cards {
    width: min(100%, max(150px, calc(3 * ((100cqh - 20cqw - 118px - (var(--lsg-rows, 3) - 1) * 10px) / var(--lsg-rows, 3)) + 20px)));
}

.lsg-card {
    padding: 0;
    border: 0;
    background: none;
    aspect-ratio: 1 / 1;
    perspective: 700px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lsg-cards.is-picked .lsg-card { cursor: default; }
/* Game đã kết thúc / chưa bắt đầu: thẻ hiện nhưng không bấm được (kể cả hover, lớp chạm rung iOS). */
.lsg-cards.is-locked .lsg-card { pointer-events: none; cursor: default; }

.lsg-card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
/* backdrop-filter: blur(20.5px) của Figma đặt ở khung thẻ, KHÔNG ở mặt thẻ: trên mặt thẻ
   nó làm phẳng 3D, lật bị lộ mặt sau. Thẻ đang mở/đã lật thì bỏ để không còn ô mờ
   đứng yên phía sau thẻ đang xoay. */
.lsg-card { border-radius: 12px; }
.lsg-card:not(.is-flipped):not(.is-loading) {
    -webkit-backdrop-filter: blur(20.5px);
    backdrop-filter: blur(20.5px);
}
.lsg-cards:not(.is-picked) .lsg-card:hover .lsg-card-back { filter: brightness(1.12); }
/* ---- Hiệu ứng lật (3 nhịp) ----
   1. Chọn thẻ (đang gọi API): thẻ nhấc lên, rung nhẹ, vệt sáng quét qua mặt úp; các thẻ
      khác lùi xuống và mờ đi để dồn chú ý.
   2. Lật: thẻ phóng to, lật qua quá 180° rồi nảy về (cảm giác có quán tính).
   3. Lộ quà: tia sáng xoay + quầng sáng bung sau thẻ, hạt lấp lánh bắn ra, ảnh quà nảy. */
/* transition của .lsg-card: xem phần "Luồng chơi lật bài" (kèm translate lúc xáo). */
.lsg-cards.is-picked .lsg-card:not(.is-chosen) { opacity: .38; transform: scale(.92); filter: saturate(.5); }
.lsg-card.is-chosen { position: relative; z-index: 5; }

.lsg-card.is-loading .lsg-card-inner { animation: lsg-charge .7s ease-in-out infinite; }
.lsg-card.is-flipped .lsg-card-inner { animation: lsg-flip .9s cubic-bezier(.25, .8, .3, 1) forwards; }

@keyframes lsg-charge {
    0%, 100% { transform: translateY(-6px) scale(1.08) rotateZ(-1.5deg); }
    50%      { transform: translateY(-9px) scale(1.1) rotateZ(1.5deg); }
}
@keyframes lsg-flip {
    0%   { transform: translateY(-6px) scale(1.08) rotateY(0deg); }
    40%  { transform: translateY(-14px) scale(1.32) rotateY(110deg); }
    70%  { transform: translateY(-6px) scale(1.16) rotateY(196deg); }
    85%  { transform: translateY(0) scale(1.14) rotateY(174deg); }
    100% { transform: translateY(0) scale(1.15) rotateY(180deg); }
}

/* Vệt sáng quét qua mặt úp lúc đang mở. */
.lsg-card-back::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%) -150% 0 / 250% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
}
.lsg-card.is-loading .lsg-card-back::before { opacity: 1; animation: lsg-shine .9s ease-in-out infinite; }
@keyframes lsg-shine { to { background-position: 150% 0; } }

/* Mặt quà sau khi lật: viền sáng ấm, ảnh quà nảy lên, tên quà hiện sau. */
.lsg-card.is-flipped .lsg-card-front {
    box-shadow: 0 0 4px rgba(0, 0, 0, .25), inset 3px -5px 16.4px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 226, 160, .5);
}
.lsg-card.is-flipped .lsg-card-front .lsg-prize-img { animation: lsg-prize-pop .6s cubic-bezier(.3, 1.6, .5, 1) .5s both; }
.lsg-card.is-flipped .lsg-card-front .lsg-prize-label { animation: lsg-fade-up .4s ease-out .75s both; }
@keyframes lsg-prize-pop { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes lsg-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Lớp trang trí sau thẻ (z-index -1 trong .is-chosen). */
.lsg-card-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lsg-card-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lsg-card-rays {
    position: absolute;
    inset: -75%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0deg 6deg, transparent 6deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 16%, transparent 62%);
    mask: radial-gradient(circle, #000 16%, transparent 62%);
    animation: lsg-rays-in .6s ease-out .35s both, lsg-rays-spin 10s linear infinite;
}
.lsg-card-glow {
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 236, 190, .85) 0, rgba(255, 214, 140, .35) 35%, transparent 65%);
    animation: lsg-glow 1.2s ease-out .35s both;
}
.lsg-spark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255, 230, 160, .9);
    opacity: 0;
    animation: lsg-spark .9s ease-out calc(.4s + var(--t, 0ms)) forwards;
}
@keyframes lsg-rays-in { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
@keyframes lsg-rays-spin { to { rotate: 360deg; } }
@keyframes lsg-glow {
    0%   { opacity: 0; transform: scale(.4); }
    35%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: .55; transform: scale(1); }
}
@keyframes lsg-spark {
    0%   { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.2); }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lsg-card.is-loading .lsg-card-inner,
    .lsg-card.is-loading .lsg-card-back::before { animation: none; }
    .lsg-card.is-flipped .lsg-card-inner { animation: none; transform: rotateY(180deg); }
    .lsg-card-fx,
    .lsg-card-sparks { display: none; }
}

/* Ô thẻ theo Figma: nền gradient xám 50%, viền 1px gradient (vẽ bằng ::after + mask vì
   border-image không bo tròn), bóng ngoài 0 0 4 #00000040, bóng trong 3 -5 16.4 #00000073.
   Màu cố định theo thiết kế, không theo card_color/card_border của preset; có ảnh mặt
   úp (card_back_image) thì ảnh thay nền gradient. */
.lsg-card-face {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: linear-gradient(216.48deg, rgba(99, 99, 99, .5) 19.11%, rgba(193, 193, 193, .5) 45.86%, rgba(206, 206, 206, .5) 78.55%) center / cover no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25), inset 3px -5px 16.4px rgba(0, 0, 0, .45);
    transition: filter .15s;
}
.lsg-card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(210deg, rgba(255, 255, 255, .48) -29.52%, rgba(153, 153, 153, 0) 113.27%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
.lsg-card-front {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: var(--lsg-text, #fff);
}
/* Mặt quà: ảnh chiếm tới 50% chiều cao lá, tên quà dài (2–3 dòng) thì ảnh tự co lại nhường
   chỗ (ảnh là nền contain nên co theo khung) nhưng không nhỏ hơn 30%; tên quá 3 dòng thì cắt
   "…"; cỡ chữ theo bề ngang lá (cqi, .lsg-card là size container) — không tràn ra ngoài lá kể
   cả khi lá nhỏ (PC màn thấp, lưới 12 lá). */
.lsg-card { container-type: size; }
.lsg-card-front { gap: 4px; padding: 8px 6px; }
.lsg-card-front .lsg-prize-img {
    flex: 0 1 50%;
    width: 100%;
    min-height: 30%;
    aspect-ratio: auto;
    margin: 0;
}
.lsg-card-front .lsg-prize-label {
    flex: none;
    max-width: 100%;
    font-size: clamp(9px, 10cqi, 12px);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* ---- Luồng chơi lật bài (CardFlipStage, nhịp ở features/lucky_spin/cards.ts) ----
   Quà ngửa trên lá (.is-faceup) → "Bắt đầu chơi": úp lần lượt từng lá (--fd = độ trễ của lá)
   → gom thành xấp giữa lưới → xáo riffle 2 lần (chia đôi xấp sang hai bên rồi đan lại) →
   chia từng lá về các ô. Mỗi lá dời bằng translate theo số ô --dx/--dy (một ô = bề rộng lá +
   gap 10px), nghiêng --rot; --move = thời lượng của nhịp, transition-delay (inline) = lúc lá
   bắt đầu chạy. → chọn lá → lật → "Chơi tiếp": úp lá đó lại (.is-unflip) rồi xáo, chia lại. */
.lsg-cards .lsg-card {
    translate: calc(var(--dx, 0) * (100% + 10px)) calc(var(--dy, 0) * (100% + 10px));
    rotate: var(--rot, 0deg);
    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .45s ease,
        translate var(--move, .38s) cubic-bezier(.3, .7, .25, 1),
        rotate var(--move, .38s) ease-out;
}
.lsg-card-inner { transition-delay: var(--fd, 0ms); }
.lsg-card.is-faceup .lsg-card-inner { transform: rotateY(180deg); }
/* Lá đang trong xấp / đang bay: bóng đổ rõ hơn để thấy các lá chồng lên nhau. */
.lsg-cards.is-moving .lsg-card .lsg-card-back {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 3px -5px 16.4px rgba(0, 0, 0, .45);
}
/* Đang lật úp / xáo / úp lại: bỏ lớp làm mờ khung lá (đứng yên phía sau lá đang xoay/trượt). */
.lsg-cards.is-hiding .lsg-card,
.lsg-cards.is-shuffling .lsg-card,
.lsg-card.is-unflip {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.lsg-cards.is-shuffling .lsg-card { cursor: default; pointer-events: none; }
.lsg-card.is-unflip .lsg-card-inner { animation: lsg-unflip .5s ease-in-out forwards; }
@keyframes lsg-unflip {
    from { transform: translateY(0) scale(1.15) rotateY(180deg); }
    to   { transform: none; }
}

/* Chưa đăng nhập: nút "Đăng nhập để chơi" nằm giữa lưới bài úp. */
.lsg-cards .lsg-cards-login {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    min-width: 0;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

/* Dòng dưới lưới: nút "Bắt đầu chơi" / "Chơi tiếp" hoặc dòng gợi ý; giữ cao cố định để
   lưới không nhảy khi đổi qua lại. */
.lsg-cards-cta {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    margin-top: 10%;
}
.lsg-cards-cta .lsg-hint { min-height: 0; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .lsg-cards .lsg-card { transition: none; }
    .lsg-card.is-unflip .lsg-card-inner { animation: none; }
}

/* ---------- Nhấn giữ ---------- */
/* Rộng bằng màn hình (tối đa 640px) để thẻ hai bên chạy ra sát mép như thiết kế;
   .lsg-stage canh giữa nên phần tràn chia đều hai bên. */
.lsg-slider {
    position: relative;
    flex: 0 0 auto;
    width: min(100vw, 640px);
    /* Tối đa 300px; màn thấp thì co lại: 100cqh trừ lề trên 5% (5cqw), lề trên của khối nút 20%
       (20cqw), 2 gap 30px, mũi tên 32px, nút giữ 48px, gap 10px, dòng lượt (tới 2 dòng) 42px. */
    --lsg-slider-h: clamp(170px, calc(100cqh - 25cqw - 162px), 300px);
    height: var(--lsg-slider-h, 300px);
    overflow: hidden;
    margin-top: 5%;
}
.lsg-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Vị trí mặc định (căn giữa) khi chưa có JS xếp ô, VD HTML server vừa render. */
    transform: translate(-50%, -50%);
    /* Ô cao = rộng * 1.02: màn thấp thì ô nhỏ theo ô trượt để không bị cắt. */
    width: min(58%, calc(var(--lsg-slider-h, 300px) * .94));
    max-width: 270px;
    aspect-ratio: 1 / 1.02;
    box-sizing: border-box;
    padding: 20px 12px 14px;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(208.43deg, rgba(214, 214, 214, .49) 4.79%, rgba(208, 208, 208, .41) 93.75%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 22px rgba(0, 0, 0, .14);
    will-change: transform;
}
/* Viền gradient theo Figma (vẽ bằng mask vì border-image không bo tròn). */
.lsg-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(200.52deg, rgba(255, 255, 255, .59) 5.73%, rgba(153, 153, 153, 0) 93.08%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
.lsg-slide:not(.is-center) { opacity: .75; }
.lsg-slide .lsg-prize-label { font-size: 15px; margin-top: 20px; }
.lsg-slider.is-win .lsg-slide.is-center { animation: lsg-win 1.1s ease-in-out 2; }

@keyframes lsg-win {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.55), 0 0 30px rgba(255,255,255,.45); }
}

.lsg-arrows { display: flex; gap: 26px; }
.lsg-arrow {
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--lsg-text, #fff);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.lsg-hold {
    position: relative;
    width: 86%;
    max-width: 340px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--lsg-btn-bg);
    color: var(--lsg-btn-text);
    cursor: pointer;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* Viền gradient + bóng trong theo Figma, nằm trên thanh tiến trình. */
.lsg-hold { border: 0; box-shadow: inset 5px -4px 5.5px rgba(214, 214, 214, .08); }
/* Khoá (game kết thúc / chưa bắt đầu): xám như nút Quay bị vô hiệu, không nhận chạm. */
.lsg-hold.is-locked {
    background: rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .45);
    pointer-events: none;
    cursor: default;
}
.lsg-hold::after { z-index: 2; }
.lsg-hold-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--lsg-prog-from, rgba(0, 68, 255, 0)) 0%, var(--lsg-prog-to, #00edb5) 100%);
}
.lsg-hold-fill.is-reset { transition: width .5s ease-out; }
.lsg-hold-text {
    position: relative;
    font: 700 15px/48px var(--font-inter), Inter, sans-serif;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* =====================================================================
   Popup: thể lệ, lịch sử quay, chi tiết quà (sheet) và trúng thưởng/thông báo
   (dialog). Điện thoại: sheet phủ toàn màn hình; máy tính: hộp giữa màn hình.
   ===================================================================== */
.lsg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-inter), Inter, 'Be Vietnam Pro', sans-serif;
    animation: lsg-fade .2s ease-out;
}
.lsg-overlay.is-center { align-items: center; padding: 20px; }

@keyframes lsg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lsg-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.lsg-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(180deg, rgba(40, 70, 120, .55), rgba(8, 18, 28, .78));
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
}
@media all and (min-width: 769px) {
    .lsg-overlay:not(.is-center) { align-items: center; padding: 24px; }
    .lsg-sheet {
        width: 440px;
        height: min(780px, 90vh);
        border-radius: 34px;
        border: 1px solid rgba(255, 255, 255, .18);
        box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
        overflow: hidden;
        animation: lsg-pop .22s ease-out;
    }
}

/* Cuộn ẩn thanh cuộn; nội dung mờ dần ở mép trên và dưới (chỗ nút đóng) thay cho
   thanh cuộn mặc định. */
.lsg-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 30px), transparent calc(100% - 84px));
    mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 30px), transparent calc(100% - 84px));
    padding: 75px 22px 112px;
    /* Nội dung ngắn (chi tiết quà, thể lệ ngắn...) canh giữa theo chiều cao: margin auto ở khối
       đầu/cuối. Nội dung dài hơn khung thì auto = 0 nên vẫn bắt đầu từ trên và cuộn bình
       thường (không bị cắt mất phần đầu như justify-content: center). */
    display: flex;
    flex-direction: column;
}
.lsg-sheet-body > :first-child { margin-top: auto; }
.lsg-sheet-body > :last-child { margin-bottom: auto; }
/* Webview của app (?is_mobile=1, .page-embedded): không có header web, app đã có thanh tiêu đề
   riêng nên không cần chừa 75px phía trên như bản web. */
.page-embedded .lsg-sheet-body { padding-top: 32px; }
/* Lịch sử quay là danh sách: luôn bắt đầu từ trên dù ít dòng. */
.lsg-sheet-body:has(> .lsg-history) > :first-child { margin-top: 0; }
.lsg-sheet-title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.lsg-sheet-body h1 {
    font-size: 22px;
}
.lsg-sheet-body h3 {
    font-size: 18px;
}
.lsg-close {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 0; /* viền gradient: ::after chung của các nút */
    -webkit-backdrop-filter: blur(11.7px);
    backdrop-filter: blur(11.7px);
    box-shadow: inset 5px -4px 5.5px rgba(214, 214, 214, .08), 0 8px 24px rgba(0, 0, 0, .3);
    cursor: pointer;
}

.lsg-empty { text-align: center; opacity: .75; }

/* Thể lệ: nội dung HTML do CMS soạn. */
.lsg-rule { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.lsg-rule p { margin: 0 0 .9em; }
.lsg-rule img { max-width: 100%; height: auto; }
.lsg-rule a { color: #fff; text-decoration: underline; }

/* Lịch sử quay */
.lsg-history { display: flex; flex-direction: column; gap: 18px; }
.lsg-history-item {
    display: flex;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.lsg-history-thumb {
    flex: 0 0 66px;
    height: 66px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.lsg-history-thumb img { width: 70%; height: 70%; object-fit: contain; }
.lsg-history-item.is-lose .lsg-history-thumb img { filter: grayscale(1); opacity: .7; }
.lsg-history-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lsg-history-title,
.lsg-history-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.lsg-history-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.lsg-history-desc { font-size: 13px; line-height: 1.4; opacity: .72; }
.lsg-history-meta { display: flex; justify-content: flex-end; gap: 10px; font-size: 11px; opacity: .85; }
.lsg-history-meta .is-claimed { color: #3ee08f; }
.lsg-history-meta .is-unclaimed { color: #ff5b5b; }

/* Chi tiết quà: ảnh → thông tin → mã nhận quà */
.lsg-detail { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.lsg-prize-glow {
    display: block;
    width: 150px;
    max-width: 60%;
    aspect-ratio: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, .35)) drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}
.lsg-detail-name { margin: 4px 0 0; font-size: 24px; font-weight: 700; color: #fff; }
.lsg-detail-text { margin: 0; font-size: 14px; line-height: 1.5; opacity: .85; }
.lsg-detail-note { margin: 0; font-size: 12px; opacity: .7; }.lsg-qr {
    margin-top: 10px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(140, 150, 255, .55), rgba(80, 90, 220, .45));
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 0 40px rgba(120, 130, 255, .35);
}
.lsg-qr img { display: block; width: 200px; max-width: 60vw; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 10px; background: #fff; }
.lsg-voucher { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lsg-voucher-code { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.lsg-voucher-copy {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: 600 13px/1.3 var(--font-inter), Inter, sans-serif;
    cursor: pointer;
}

/* Dialog trúng thưởng / thông báo */
.lsg-dialog {
    width: min(380px, 100%);
    box-sizing: border-box;
    padding: 24px 20px 20px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(62, 72, 80, .82), rgba(16, 24, 28, .9));
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 70px rgba(0, 0, 0, .5);
    animation: lsg-pop .22s ease-out;
}
.lsg-dialog-title { font-size: 16px; font-weight: 600; }
.lsg-dialog-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0 20px; }
.lsg-dialog-btn {
    position: relative;
    width: 100%;
    height: 54px;
    border-radius: 16px;
    border: 0; /* viền gradient: ::after chung của các nút */
    background: rgba(10, 32, 44, .75);
    color: #fff;
    font: 700 16px/1 var(--font-inter), Inter, sans-serif;
    -webkit-backdrop-filter: blur(11.7px);
    backdrop-filter: blur(11.7px);
    box-shadow: inset 5px -4px 5.5px rgba(214, 214, 214, .08);
    cursor: pointer;
}
.lsg-dialog-btn:hover { filter: brightness(1.2); }
.lsg-win-img { padding: 0; border: 0; background: none; cursor: pointer; display: flex; justify-content: center; width: 100%; }
.lsg-win-img .lsg-prize-glow { width: 170px; animation: lsg-float 2.4s ease-in-out infinite; }
.lsg-win-name { font-size: 26px; font-weight: 700; line-height: 1.25; }
.lsg-win-hint { font-size: 12px; opacity: .7; }
.lsg-notice { margin: 0; font-size: 16px; line-height: 1.5; }

@keyframes lsg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.lsg-sheet-body::-webkit-scrollbar { display: none; }