/* ==========================================================================
   Bé Ghép Hình Giỏi (#301) - giao diện mới của /tro-choi-ghep-hinh
   - Nền trời + đồi cỏ đổi màu theo bạn thú của từng cấp (biến --sg-* đặt trên #sg-wrap bằng JS).
   - Bảng gỗ có lỗ phát sáng, mảnh ghép khối 3D (hình khối + chữ), bạn thú đồng hành, popup đọc chữ.
   - Class mới đều có tiền tố .sg- nhưng KHÔNG dùng lại .sg-block/.sg-note/.sg-chars/.sg-score-pill
     (public/css/game-navy.css còn rule cũ cho các class đó, sẽ đè màu trên nền sáng).
   Logic: public/js/shape-game.js
   ========================================================================== */

#sg-wrap {
    --sg-sky1: #BFE8FF; --sg-sky2: #E6F7FF; --sg-sky3: #FFF2CC;
    --sg-hill1: #A8E08F; --sg-hill2: #7BCB72;
    --sg-accent: #7C5CFF; --sg-accent-d: #5B3FD6; --sg-ink: #3B2A6B; --sg-line: #D9CCFF;
    --sgp: clamp(56px, calc((min(100vw, 560px) - 78px) / 4), 92px);
    position: relative; isolation: isolate; width: 100%; min-height: 100%; box-sizing: border-box; padding: 12px 14px 18px;
    display: flex; flex-direction: column; overflow: hidden; color: var(--sg-ink);
    background: linear-gradient(180deg, var(--sg-sky1) 0%, var(--sg-sky2) 55%, var(--sg-sky3) 100%);
    font-family: 'Baloo 2', 'Nunito', 'Arial Rounded MT Bold', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    transition: background .5s;
}
#sg-wrap *, #sg-wrap *::before, #sg-wrap *::after { box-sizing: border-box; }
#sg-wrap button { font-family: inherit; color: inherit; }

/* Nền cảnh: mây + đồi cỏ */
/* z-index -1 + isolation trên #sg-wrap: nền nằm dưới banner/gợi ý khách nhưng vẫn trên màu nền của wrap */
.sg-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; filter: saturate(.75); }
.sg-sun { position: absolute; right: -44px; top: -44px; width: 210px; height: 210px; border-radius: 50%;
    background: radial-gradient(circle, #FFFBD9 0%, #FFE680 28%, rgba(255,230,128,.55) 44%, rgba(255,230,128,0) 70%); animation: sg-sun 6s ease-in-out infinite; opacity: .75; }
.sg-rainbow { position: absolute; left: -10%; bottom: 9%; width: min(82%, 980px); opacity: .18; }
@media (min-width: 700px) { .sg-rainbow { left: 50%; transform: translateX(-50%); } }
.sg-cloud { position: absolute; left: -170px; fill: #fff; opacity: .6; filter: drop-shadow(0 6px 6px rgba(80,120,180,.12)); animation: sg-drift linear infinite; }
.sg-cloud.c1 { top: 6%; width: 120px; animation-duration: 70s; animation-delay: -18s; }
.sg-cloud.c2 { top: 19%; width: 86px; animation-duration: 95s; animation-delay: -60s; opacity: .5; }
.sg-cloud.c3 { top: 31%; width: 104px; animation-duration: 82s; animation-delay: -34s; opacity: .45; }
.sg-sp { display: none; position: absolute; width: 14px; height: 14px; background: #fff; opacity: .0; animation: sg-twinkle 3.4s ease-in-out infinite;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.sg-sp.s1 { left: 12%; top: 14%; } .sg-sp.s2 { left: 74%; top: 27%; width: 10px; height: 10px; animation-delay: -1.1s; } .sg-sp.s3 { left: 42%; top: 9%; width: 11px; height: 11px; animation-delay: -2.2s; }
.sg-sp.s4 { left: 88%; top: 45%; animation-delay: -.6s; } .sg-sp.s5 { left: 6%; top: 40%; width: 10px; height: 10px; animation-delay: -1.8s; }
.sg-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 26%; max-height: 210px; display: block; opacity: .8; }
/* Màn rộng (máy tính): đồi kéo giãn theo chiều ngang (preserveAspectRatio=none) nên cây/hoa sẽ méo -> ẩn đi, chỉ còn các lớp đồi mềm. */
@media (min-width: 700px) { .sg-hills .tr, .sg-hills .fl, .sg-hills .fl2 { display: none; } }
/* #336: quầng sáng trắng sau khu chơi để bảng ghép/khay nổi lên khỏi nền cảnh */
#sg-wrap::before { content: ""; position: absolute; left: 50%; top: 44%; width: 130%; height: 62%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,0) 100%); }
.sg-hills .hf { fill: #CDEFC0; fill: color-mix(in srgb, var(--sg-hill1) 50%, #fff); transition: fill .5s; }
.sg-hills .h1 { fill: var(--sg-hill1); transition: fill .5s; }
.sg-hills .h2 { fill: var(--sg-hill2); transition: fill .5s; }
.sg-hills .tr circle { fill: #3FB86F; fill: color-mix(in srgb, var(--sg-hill2) 55%, #1E8F4E); }
.sg-hills .fl circle { fill: #fff; } .sg-hills .fl2 circle { fill: #FFD84A; }

/* Các khối thông báo (khách hết lượt, chưa xác thực email...) */
.sg-lockcard { position: relative; z-index: 1; max-width: 440px; margin: 24px auto; padding: 22px 20px; border-radius: 26px; background: #fff; color: #3B2A6B;
    box-shadow: 0 7px 0 rgba(150,120,190,.28), 0 16px 26px rgba(120,90,160,.22); text-align: center; }
.sg-hint-note { position: relative; z-index: 1; margin: 0 0 8px; font-size: 13px; color: #5b4a8a; }
.sg-hint-note a { color: #7c3aed; font-weight: 700; text-decoration: underline; }

.sg-app { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 560px; margin: 0 auto; min-height: 0; }
.sg-screen { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; animation: sg-in .3s ease both; }

/* ---------- Nút tròn / thanh trên ---------- */
.sg-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-right: var(--gl-fab-w, 8.5rem); }
.sg-roundbtn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; background: #fff; cursor: pointer;
    box-shadow: 0 4px 0 rgba(120,90,190,.28); display: flex; align-items: center; justify-content: center; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.sg-roundbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(120,90,190,.28); }
.sg-roundbtn svg { width: 26px; height: 26px; }
.sg-stars { flex: 1 1 130px; min-width: 130px; max-width: 220px; height: 48px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(120,90,190,.28);
    display: flex; align-items: center; justify-content: center; gap: 4px; }
.sg-stars svg { width: 26px; height: 26px; transition: transform .3s; }
.sg-stars svg.pop { animation: sg-starpop .6s cubic-bezier(.3,1.6,.5,1); }

/* ---------- Bạn thú + bong bóng đề bài ---------- */
.sg-top { display: flex; align-items: flex-end; gap: 12px; }
.sg-mascot { flex: none; width: 112px; height: 128px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); transform-origin: 50% 100%; animation: sg-bob 3.2s ease-in-out infinite; }
.sg-mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sg-mascot.happy { animation: sg-hop .6s ease 2; }
.sg-mascot.oops { animation: sg-tilt .7s ease; }
.sg-mascot.point { animation: sg-point 1s ease-in-out infinite; }
.sg-bubble { position: relative; flex: 1; min-width: 0; margin-bottom: 10px; padding: 10px 12px; border-radius: 22px; background: #fff; border: 3px solid var(--sg-line);
    box-shadow: 0 5px 0 rgba(120,90,190,.2); display: flex; align-items: center; gap: 10px; }
.sg-bubble::before { content: ""; position: absolute; left: -9px; bottom: 24px; width: 14px; height: 14px; background: #fff; border-left: 3px solid var(--sg-line); border-bottom: 3px solid var(--sg-line); transform: rotate(45deg); }
.sg-bubble.pulse { animation: sg-pulse .8s ease 2; }
.sg-bubble-icon { flex: none; width: 40px; height: 44px; }
.sg-bubble-icon svg { width: 100%; height: 100%; overflow: visible; }
#sg-ask { flex: 1; min-width: 0; font-size: clamp(16px, 4.6vw, 19px); font-weight: 700; line-height: 1.15; color: #4C1D95; }
.sg-listen { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--sg-accent); box-shadow: 0 3px 0 var(--sg-accent-d);
    display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.sg-listen svg { width: 24px; height: 24px; }

/* ---------- Bảng gỗ + lỗ ---------- */
.sg-stage { position: relative; flex: 1; min-height: 140px; display: flex; align-items: center; justify-content: center; }
#sg-board { position: relative; width: min(318px, 100%); height: clamp(166px, 27vh, 232px); border-radius: 30px; border: 5px solid #A9743F;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 2px, transparent 2px 24px), linear-gradient(#E8B075, #CF925A);
    box-shadow: inset 0 6px 12px rgba(255,255,255,.25), 0 8px 0 #8F6236, 0 16px 22px rgba(60,40,10,.28); display: flex; align-items: center; justify-content: center; }
#sg-board i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #A9743F; box-shadow: inset 0 2px 0 rgba(255,255,255,.3); }
#sg-board i:nth-child(1) { left: 14px; top: 14px; } #sg-board i:nth-child(2) { right: 14px; top: 14px; }
#sg-board i:nth-child(3) { left: 14px; bottom: 14px; } #sg-board i:nth-child(4) { right: 14px; bottom: 14px; }
#sg-hole { width: calc(var(--sgp) * 1.5); height: calc(var(--sgp) * 1.5 * 1.12); flex: none; }
#sg-hole svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 10px rgba(255,214,90,.85)); animation: sg-glow 2s ease-in-out infinite; }
#sg-hole.ok svg { animation: sg-holeok .8s ease; }

/* Chữ: cùng phông ở lỗ và ở mảnh để hình khớp nhau */
.sg-glyph { font-family: 'Baloo 2', 'Nunito', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif; font-weight: 800; font-size: 96px; stroke-linejoin: round; }

/* ---------- Khay mảnh ghép ---------- */
#sg-tray { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px 14px; min-height: calc(var(--sgp) * 1.12 + 28px);
    border-radius: 30px; background: rgba(255,255,255,.8); box-shadow: inset 0 3px 8px rgba(80,90,170,.18); }
.sg-slot { position: relative; flex: none; width: var(--sgp); height: calc(var(--sgp) * 1.12); }
.sg-piece { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; will-change: transform; transition: transform .32s cubic-bezier(.3,1.35,.5,1); }
.sg-piece:focus-visible { outline: 4px solid var(--sg-accent); outline-offset: 2px; border-radius: 16px; }
.sg-piece.sg-drag { cursor: grabbing; transition: none; z-index: 50; }
.sg-piece.sg-fly { z-index: 50; transition: transform .3s cubic-bezier(.4,.1,.3,1); }
.sg-pc-in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; animation: sg-float 2.6s ease-in-out infinite; filter: drop-shadow(0 6px 3px rgba(40,25,10,.28)); }
.sg-piece.sg-drag .sg-pc-in, .sg-piece.sg-fly .sg-pc-in { animation: none; }
.sg-pc-in svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.sg-piece.sg-hint .sg-pc-in { animation: sg-wiggle .7s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,200,61,.95)) drop-shadow(0 6px 3px rgba(40,25,10,.28)); }
.sg-piece.sg-landed { pointer-events: none; }

/* Hiệu ứng pháo giấy (đặt fixed theo toạ độ màn hình) */
.sg-confetti { position: fixed; z-index: 9500; pointer-events: none; width: 10px; height: 14px; border-radius: 3px; animation: sg-conf 1s cubic-bezier(.2,.7,.3,1) forwards; }

/* ---------- Màn chọn trò chơi ---------- */
.sg-menu-head { display: flex; align-items: center; gap: 10px; padding-right: var(--gl-fab-w, 8.5rem); }
.sg-menu-head .sg-mascot { width: 64px; height: 74px; animation: none; }
.sg-menu-title { margin: 0; font-size: 28px; line-height: 1; font-weight: 800; }
.sg-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: auto 0; }   /* căn giữa giữa tiêu đề và dải bạn thú */
.sg-mode { border: 0; padding: 10px 10px 12px; border-radius: 30px; background: #fff; cursor: pointer; box-shadow: 0 6px 0 rgba(120,90,190,.22);
    display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; -webkit-tap-highlight-color: transparent; transition: transform .12s; }
.sg-mode:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(120,90,190,.22); }
.sg-mode-art { width: 100%; height: 150px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sg-mode-art .mini { width: 62px; height: 70px; }
.sg-mode-art .mini svg { width: 100%; height: 100%; overflow: visible; }
.sg-mode-art .mini:nth-child(1) { transform: rotate(-7deg); } .sg-mode-art .mini:nth-child(2) { transform: rotate(6deg) translateY(6px); }
.sg-mode-name { font-size: 24px; font-weight: 800; line-height: 1; }
.sg-new { position: absolute; right: 8px; top: 6px; z-index: 2; padding: 1px 12px; border-radius: 999px; background: #FF4F7B; color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #B82B52; }
.sg-comp-box { padding: 12px 14px 14px; border-radius: 28px; background: rgba(255,255,255,.85); box-shadow: 0 5px 0 rgba(120,90,190,.18); display: flex; flex-direction: column; gap: 10px; }
.sg-comp-title { font-size: 20px; font-weight: 800; line-height: 1; }
.sg-comp-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sg-comp { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; background: #EAE4F5; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.sg-comp svg { width: 40px; height: 40px; }
.sg-comp.on { box-shadow: 0 0 0 3px var(--sg-accent); }
.sg-comp:disabled { cursor: default; }
.sg-comp.lock svg { width: 22px; height: 22px; }

/* ---------- Popup / màn thưởng ---------- */
/* Hai lớp này được gắn thẳng vào <body> (phủ cả màn hình) nên KHÔNG thừa hưởng font/biến màu của #sg-wrap:
   font đặt lại ở đây, còn biến --sg-* do JS đặt lên từng lớp (themeVars trong shape-game.js). */
.sg-ov, .sg-reward { font-family: 'Baloo 2', 'Nunito', 'Arial Rounded MT Bold', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sg-accent: #7C5CFF; --sg-accent-d: #5B3FD6; }
.sg-ov *, .sg-reward *, .sg-ov *::before, .sg-reward *::before { box-sizing: border-box; }
.sg-ov button, .sg-reward button { font-family: inherit; color: inherit; }
.sg-ov .sg-bigbtn, .sg-reward .sg-bigbtn, .sg-ov .sg-listen { color: #fff; }   /* đặt sau để thắng rule color:inherit ở trên */
.sg-ov { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: rgba(42,20,86,.58); animation: sg-fade .25s ease both; }
.sg-card { position: relative; width: 100%; max-width: 340px; margin: auto; padding: 74px 18px 18px; border-radius: 40px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: 0 8px 0 rgba(190,130,80,.35), 0 24px 40px rgba(20,8,50,.4); animation: sg-pop .4s cubic-bezier(.3,1.5,.5,1) both; color: #3B2A6B; }
.sg-card-mascot { position: absolute; left: 50%; top: -74px; width: 130px; height: 150px; margin-left: -65px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation: sg-hop .7s ease 2; transform-origin: 50% 100%; }
.sg-card-mascot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sg-card h2 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1; color: #E2527B; }
.sg-bigletter { position: relative; width: 190px; height: 196px; display: flex; align-items: center; justify-content: center; }
.sg-bigletter::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,90,.75) 0%, rgba(255,214,90,.25) 55%, rgba(255,214,90,0) 72%); }
.sg-bigletter svg { position: relative; width: 168px; height: 188px; overflow: visible; animation: sg-pop .5s .1s cubic-bezier(.3,1.6,.5,1) both; }
.sg-readline { font-size: 23px; font-weight: 800; line-height: 1.1; text-align: center; color: #4C1D95; }
.sg-wordrow { width: 100%; padding: 10px 14px; border-radius: 26px; background: #FFF3E6; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sg-wordpic { width: 70px; height: 70px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #FFD7B0; display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1; }
.sg-word { font-size: 46px; font-weight: 800; line-height: 1; color: #4C1D95; white-space: nowrap; }
.sg-word b { color: var(--sg-accent); text-shadow: 0 3px 0 rgba(0,0,0,.15); }
.sg-bigbtn { width: 100%; height: 64px; border: 0; border-radius: 24px; background: var(--sg-accent); color: #fff; font-size: 28px; font-weight: 800; cursor: pointer; padding: 0;
    box-shadow: 0 6px 0 var(--sg-accent-d); display: flex; align-items: center; justify-content: center; gap: 12px; -webkit-tap-highlight-color: transparent; }
.sg-bigbtn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--sg-accent-d); }
.sg-bigbtn svg { width: 28px; height: 28px; }

.sg-reward { position: fixed; inset: 0; z-index: 9400; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 18px 26px; overflow-y: auto; animation: sg-fade .3s ease both;
    background: linear-gradient(180deg, #FFF0B8 0%, #FFE6D5 50%, #FFDDEB 100%); color: #3B2A6B; }
.sg-reward > * { width: 100%; max-width: 420px; }
.sg-spacer { flex: 1 1 0; min-height: 0; }   /* hai khoảng đệm trên/dưới để nội dung màn thưởng nằm giữa, nút ở đáy */
.sg-rays { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(255,255,255,.55) 0 8deg, transparent 8deg 24deg); }
.sg-reward h2 { margin: 0; text-align: center; font-size: 46px; font-weight: 800; line-height: 1; color: #E2527B; text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(226,82,123,.2); }
.sg-reward-sub { text-align: center; font-size: 20px; font-weight: 700; color: #7A6AA8; margin-top: -4px; }
.sg-bigstars { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sg-bigstars svg { width: 40px; height: 40px; animation: sg-starpop .7s cubic-bezier(.3,1.6,.5,1) both; }
.sg-bigstars svg:nth-child(3) { width: 52px; height: 52px; }
.sg-reward-hero { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 2px; }
.sg-reward-hero .sg-mascot { width: 140px; height: 162px; animation: sg-hop .8s ease infinite; }
.sg-sticker { width: 150px; padding: 12px; border-radius: 26px; background: #fff; transform: rotate(5deg); box-shadow: 0 6px 0 rgba(180,110,130,.3), 0 16px 24px rgba(180,110,130,.25);
    display: flex; flex-direction: column; align-items: center; gap: 4px; animation: sg-pop .6s .2s cubic-bezier(.3,1.5,.5,1) both; }
.sg-sticker svg { width: 104px; height: 104px; }
.sg-sticker span { font-size: 20px; font-weight: 800; line-height: 1; color: var(--sg-accent); }
.sg-stickrow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 26px; background: rgba(255,255,255,.8); }
.sg-stk { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 3px #FFD7B0; }
.sg-stk svg { width: 42px; height: 42px; }
.sg-stk.empty { background: transparent; box-shadow: none; border: 3px dashed #D9CCE6; font-size: 22px; font-weight: 800; color: #D9CCE6; }
.sg-reward-foot { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
.sg-reward-foot .sg-roundbtn { width: 68px; height: 68px; border-radius: 24px; }
.sg-reward-foot .sg-roundbtn svg { width: 30px; height: 30px; }
.sg-reward-foot .sg-bigbtn { flex: 1; }

/* ---------- Hoạt hình ---------- */
@keyframes sg-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 340px)); } }
@keyframes sg-sun { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes sg-twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: .95; transform: scale(1.1) rotate(25deg); } }
@keyframes sg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sg-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-16px) scale(.96, 1.05); } 55% { transform: translateY(0) scale(1.06, .94); } }
@keyframes sg-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }
@keyframes sg-point { 0%, 100% { transform: rotate(0) translateX(0); } 50% { transform: rotate(4deg) translateX(5px); } }
@keyframes sg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sg-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-7deg) scale(1.08); } 75% { transform: rotate(7deg) scale(1.08); } }
@keyframes sg-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,214,90,.55)); } 50% { filter: drop-shadow(0 0 16px rgba(255,214,90,1)); } }
@keyframes sg-holeok { 0% { filter: drop-shadow(0 0 8px rgba(255,214,90,.8)); } 40% { filter: drop-shadow(0 0 30px rgba(255,235,120,1)) brightness(1.25); } 100% { filter: drop-shadow(0 0 12px rgba(255,214,90,.9)); } }
@keyframes sg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sg-starpop { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes sg-conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sg-mascot, .sg-pc-in, #sg-hole svg, .sg-piece.sg-hint .sg-pc-in, .sg-reward-hero .sg-mascot, .sg-card-mascot { animation: none !important; }
    .sg-confetti { display: none; }
    .sg-cloud, .sg-sun, .sg-sp { animation: none !important; }
    .sg-cloud.c1 { left: 8%; } .sg-cloud.c2 { left: 60%; } .sg-cloud.c3 { left: 30%; }
}

/* Màn hình thấp (điện thoại xoay ngang...): thu nhỏ để vẫn gọn */
@media (max-height: 640px) {
    #sg-wrap { --sgp: clamp(46px, calc((min(100vw, 560px) - 78px) / 4), 66px); padding-top: 8px; padding-bottom: 10px; }
    .sg-mascot { width: 76px; height: 88px; }
    .sg-screen { gap: 8px; }
    #sg-board { height: clamp(130px, 30vh, 180px); }
    .sg-mode-art { height: 100px; }
    .sg-mode-art .mini { width: 44px; height: 50px; }
    .sg-reward-hero .sg-mascot { width: 100px; height: 116px; }
    .sg-card { padding-top: 60px; }
    .sg-card-mascot { width: 100px; height: 116px; margin-left: -50px; top: -58px; }
    .sg-bigletter { width: 130px; height: 134px; }
    .sg-bigletter svg { width: 116px; height: 128px; }
}
@media (min-width: 720px) {
    #sg-wrap { --sgp: 92px; }
    .sg-mascot { width: 140px; height: 160px; }
}

/* ==========================================================================
   (#302) Ghép bóng + Tranh 4 mảnh + chọn mảnh bằng cách chạm
   ========================================================================== */
.sg-holes { display: flex; align-items: center; justify-content: center; }
.sg-holes.row { gap: 10px; --shd: min(calc(var(--sgp) * 1.15), 92px); }
.sg-shd, .sg-cell { position: relative; flex: none; transition: box-shadow .3s, background .3s; }
/* Ghép bóng (#329): bảng sáng như tấm thẻ giấy chấm bi thay cho bảng gỗ; ô bóng là hõm lavender nhạt, bóng đổ xanh-tím đậm hơn nền nên nổi rõ */
#sg-board.multi { border: 4px solid var(--sg-line); border-radius: 32px;
    background: radial-gradient(rgba(124,92,255,.10) 2.2px, transparent 2.8px) 0 0 / 20px 20px, linear-gradient(#FFFFFF, #F3EEFF);
    box-shadow: inset 0 0 0 3px #fff, 0 7px 0 rgba(120,90,190,.28), 0 16px 22px rgba(80,60,150,.2); }
#sg-board.multi i { display: none; }
.sg-shd { width: var(--shd); height: var(--shd); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 35%, #F4F0FF, #DCD3F5); box-shadow: inset 0 5px 9px rgba(90,70,150,.28), 0 2px 0 #fff; }
.sg-shd svg.sg-sil { width: 78%; height: 78%; display: block; opacity: .9; }
.sg-shd.ok { background: radial-gradient(circle, #FFF6C9, #FFE27A); box-shadow: 0 0 18px 4px rgba(255,214,90,.8); }
.sg-shd.ok svg.sg-sil { opacity: 0; }
.sg-hint-hole { animation: sg-holepulse .8s ease-in-out infinite; }
@keyframes sg-holepulse { 0%, 100% { box-shadow: inset 0 5px 9px rgba(90,70,150,.28), 0 0 0 0 rgba(255,200,61,0); } 50% { box-shadow: inset 0 5px 9px rgba(90,70,150,.28), 0 0 0 6px rgba(255,200,61,.95); } }

/* tranh 4 mảnh */
#sg-board.pz { width: auto; min-width: 0; height: auto; padding: 18px; }
.sg-holes.grid { display: grid; grid-template-columns: repeat(2, auto); gap: 3px; --cell: clamp(60px, 13.5vh, 112px); }
.sg-cell { width: calc(var(--cell) * .865); height: var(--cell); border-radius: 14px; overflow: hidden; background: rgba(120,76,30,.45); box-shadow: inset 0 3px 6px rgba(70,38,8,.3); }
.sg-cell svg { width: 100%; height: 100%; display: block; opacity: .28; filter: grayscale(1) brightness(1.3); }
.sg-cell.ok { box-shadow: 0 0 14px 3px rgba(255,226,110,.85); }
.sg-cell.ok svg { opacity: 0; }
.sg-pz { position: relative; width: 92%; aspect-ratio: 64 / 74; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.22), inset 0 0 0 3px rgba(255,255,255,.75); }
.sg-pc-in .sg-pz svg, .sg-pz svg { width: 100%; height: 100%; display: block; overflow: hidden; }

/* mảnh đang được chọn (chạm mảnh rồi chạm lỗ) */
.sg-piece.sg-sel .sg-pc-in { animation: none; transform: translateY(-9px) scale(1.1); filter: drop-shadow(0 0 10px var(--sg-accent)) drop-shadow(0 8px 4px rgba(40,25,10,.3)); }
.sg-bubble-icon .sg-bem { font-size: 30px; line-height: 44px; display: block; text-align: center; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* hình minh hoạ ở menu */
.sg-arte { width: 66px; height: 66px; }
.sg-arte svg { width: 100%; height: 100%; display: block; }
.sg-arte svg.sg-sil { opacity: .4; }
.sg-artpz { display: grid; grid-template-columns: repeat(2, auto); gap: 3px; }
.sg-artpz .sg-pz { width: 52px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) { .sg-hint-hole { animation: none !important; } }
@media (max-height: 640px) {
    .sg-holes.grid { --cell: clamp(54px, 12vh, 84px); }
    #sg-board.pz { padding: 12px; }
    .sg-arte { width: 46px; height: 46px; }
    .sg-artpz .sg-pz { width: 36px; }
}


/* ==========================================================================
   v8 - Màn chọn 4 chế độ VỪA MÀN HÌNH, không phải cuộn (trước đây ảnh ô chế độ cao cố định 150px nên điện thoại 640-780px bị tràn, dải bạn thú rớt xuống đáy)
   Chiều cao ảnh ô chế độ co theo chiều cao vùng game (--gl-vh do layout game đặt; thiếu thì dùng 100dvh): (vh - phần cố định) / 2 hàng, chặn 56-150px.
   "Phần cố định" = hàng hạng tài khoản + đầu menu (mascot + tiêu đề) + tên/đệm 2 ô + khung bạn thú + lề; nếu sửa các khối đó thì chỉnh lại hằng số 330px.
   ========================================================================== */
.sg-topbar { position: relative; z-index: 3; flex: none; min-height: 30px; margin: 0 0 6px; padding-right: var(--gl-fab-w, 8.5rem); }
.sg-modes { --sg-art-h: clamp(56px, calc((var(--gl-vh, 100dvh) - 330px) / 2), 150px); gap: clamp(8px, 1.6dvh, 14px); }
.sg-mode-art { height: var(--sg-art-h); }
.sg-mode-art .mini { height: min(70px, 84%); width: auto; aspect-ratio: 62 / 70; }
.sg-arte { width: auto; height: min(66px, 84%); aspect-ratio: 1 / 1; }
.sg-artpz .sg-pz { width: clamp(30px, calc(var(--sg-art-h) * .36), 52px); }
@media (max-height: 740px) {
    .sg-menu-head .sg-mascot { width: 52px; height: 60px; }
    .sg-menu-title { font-size: 24px; }
    .sg-mode { padding: 8px 8px 9px; gap: 6px; border-radius: 26px; }
    .sg-mode-name { font-size: 20px; }
    .sg-new { font-size: 12px; padding: 0 9px; top: 4px; right: 6px; }
    .sg-comp-box { padding: 8px 12px 10px; gap: 8px; border-radius: 24px; }
    .sg-comp-title { font-size: 17px; }
    .sg-comp { width: 40px; height: 40px; }
    .sg-comp svg { width: 34px; height: 34px; }
    .sg-screen { gap: 8px; }
}