/* Style reset & base */
:root {
    /* Hai font đều có subset vietnamese; dự phòng bằng font hệ thống đủ dấu.
       Baloo 2 dùng cho tiêu đề, con số, nút bấm — nét bo tròn mập mạp.
       Nunito dùng cho chữ chạy — cùng họ bo tròn nhưng dễ đọc ở cỡ nhỏ. */
    --font-display: 'Baloo 2', 'Nunito', 'Helvetica Neue', Arial, system-ui, sans-serif;
    --font-main: 'Nunito', 'Helvetica Neue', Arial, 'Segoe UI', system-ui, sans-serif;

    --bg-primary: #0a0b1e;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-border: rgba(255, 255, 255, 0.1);
    --text-color: #ffffff;
    --text-muted: #8a8dbe;

    --primary-color: #ff3366;
    --secondary-color: #00f0ff;

    --glow-blue: rgba(0, 240, 255, 0.4);
    --glow-purple: rgba(186, 85, 211, 0.4);
    --glow-green: rgba(57, 255, 20, 0.4);
    --glow-red: rgba(255, 51, 102, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-color);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Background Gradients & Shimmer */
.bg-gradient-shimmer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at 20% 30%, rgba(255, 51, 102, 0.15), transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(0, 240, 255, 0.15), transparent 40%),
                linear-gradient(135deg, #050515 0%, #101030 100%);
    background-size: 200% 200%;
    animation: shimmerBg 20s ease infinite;
}

@keyframes shimmerBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Main Container Layout */
.game-container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Header */
.game-header {
    text-align: center;
    margin-bottom: 10px;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ff3366, #ff9933, #00f0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.logo-text span { font-weight: 400; }

.tagline {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 400;
    margin-top: 5px;
}

/* Main Grid & Panels */
.game-main {
    display: grid;
    grid-template-columns: 280px 520px 300px;
    gap: 30px;
    width: 100%;
    justify-content: center;
    align-items: start;
}

/* Glassmorphism Cards */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    padding: 20px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover { border-color: rgba(255, 255, 255, 0.15); }

/* Sidebar Stats & Pulses */
.game-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-card {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
    pointer-events: none;
}

.stat-card:hover::before {
    transform: translateX(100%);
    transition: transform 1s;
}

.pulse-blue { box-shadow: 0 0 15px rgba(0, 240, 255, 0.05); }
.pulse-blue:hover { box-shadow: 0 0 25px var(--glow-blue); border-color: var(--secondary-color); }
.pulse-purple { box-shadow: 0 0 15px rgba(186, 85, 211, 0.05); }
.pulse-purple:hover { box-shadow: 0 0 25px var(--glow-purple); border-color: #ba55d3; }
.pulse-green { box-shadow: 0 0 15px rgba(57, 255, 20, 0.05); }
.pulse-green:hover { box-shadow: 0 0 25px var(--glow-green); border-color: #39ff14; }

.stat-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.stat-label i { margin-right: 6px; }

.stat-value {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.2s ease;
}

.stat-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 5px;
}

.progress-bar-container {
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #39ff14, #00f0ff);
    width: 0%;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.6);
}

/* Stars */
.star-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 1.1rem;
}

.star-row.big { font-size: 2rem; gap: 16px; margin: 5px 0; }

.star {
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

.star.active {
    color: #ffd700;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.8);
}

.star.pop-star { animation: starPop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.6); }

@keyframes starPop {
    0% { transform: scale(0.2) rotate(-40deg); opacity: 0; }
    60% { transform: scale(1.35) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

/* Objectives */
.objectives-card { text-align: left; }

.objective-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.objective {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.3s ease;
}

.objective-icon { font-size: 1.6rem; line-height: 1; }

.objective-count {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.objective-count b { color: #fff; font-weight: 800; }

.objective-check {
    margin-left: auto;
    color: #39ff14;
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

.objective.done {
    background: rgba(57, 255, 20, 0.12);
    border-color: rgba(57, 255, 20, 0.4);
}

.objective.done .objective-check { opacity: 1; transform: scale(1); }

.objective.bump { animation: objectiveBump 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5); }

@keyframes objectiveBump {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); background: rgba(255, 255, 255, 0.14); }
    100% { transform: scale(1); }
}

.legend-frost { box-shadow: 0 0 10px rgba(190, 240, 255, 0.7); }
.legend-crate { box-shadow: 0 0 10px rgba(201, 139, 75, 0.7); }
.legend-harvest { box-shadow: 0 0 10px rgba(255, 200, 60, 0.7); }
.legend-gravity { box-shadow: 0 0 10px rgba(123, 237, 159, 0.7); }

/* Colors for Icons */
.text-gold { color: #ffd700; }
.text-purple { color: #ba55d3; }
.text-green { color: #39ff14; }
.text-red { color: #ff3366; }

/* ===================== BOARD ===================== */
.board-area { display: flex; justify-content: center; }

.board-wrapper {
    padding: 10px;
    background: rgba(5, 5, 20, 0.6);
    position: relative;
}

.board-grid {
    position: relative;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    touch-action: none;
    --cell: 56px;
    --step: 62px;
}

.cell-layer,
.tile-layer,
.popup-layer,
.fx-canvas {
    position: absolute;
    inset: 0;
}

.popup-layer, .fx-canvas { pointer-events: none; }
.fx-canvas { z-index: 5; }
.popup-layer { z-index: 6; }

.cell-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cell);
    height: var(--cell);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* ---------- Băng phủ ô ----------
   Lớp băng nằm ở phần tử con: .cell-bg đã dùng transform để định vị nên
   không thể gắn thêm animation transform lên chính nó. */
.frost-face {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.frost-face.frost-1,
.frost-face.frost-2 {
    opacity: 1;
    background:
        linear-gradient(135deg, rgba(190, 240, 255, 0.34), rgba(120, 200, 255, 0.16)),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(190, 240, 255, 0.55);
    box-shadow: inset 0 0 14px rgba(190, 240, 255, 0.45);
}

/* Băng dày: viền kép + sáng hơn hẳn để phân biệt ngay với băng một lớp */
.frost-face.frost-2 {
    background:
        linear-gradient(135deg, rgba(225, 250, 255, 0.75), rgba(120, 195, 255, 0.5)),
        rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.5),
        inset 0 0 20px rgba(210, 248, 255, 0.8),
        0 0 16px rgba(150, 220, 255, 0.5);
}

/* vân nứt trên mặt băng */
.frost-face.frost-1::before,
.frost-face.frost-2::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
        linear-gradient(60deg, transparent 46%, rgba(255, 255, 255, 0.75) 47%, transparent 49%),
        linear-gradient(-40deg, transparent 62%, rgba(255, 255, 255, 0.55) 63%, transparent 65%);
    opacity: 0.8;
}

.frost-face.frost-2::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(20deg, transparent 30%, rgba(255, 255, 255, 0.6) 31%, transparent 33%);
}

.frost-face.frost-crack { animation: frostCrack 0.45s ease-out; }

@keyframes frostCrack {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.16); filter: brightness(2.4); }
    60% { transform: scale(0.96); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Board Tiles — .tile chỉ giữ transform vị trí, mọi hiệu ứng scale nằm ở .fruit-inner */
.tile {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cell);
    height: var(--cell);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    will-change: transform;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.22, 1.05, 0.36, 1);
    transition-duration: 0ms;
    z-index: 2;
}

.fruit-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.4),
                filter 0.2s ease,
                box-shadow 0.2s ease;
    line-height: 1;
}

.tile:hover { z-index: 8; }
.tile:hover .fruit-inner {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.1);
    filter: brightness(1.15);
}

.tile.selected { z-index: 20; }
/* nhân đôi class để thắng animation của các quả đặc biệt khai báo bên dưới */
.tile.selected.selected .fruit-inner {
    transform: scale(1.12);
    background: rgba(0, 240, 255, 0.18);
    border-color: var(--secondary-color);
    animation: pulseSelection 0.9s infinite alternate ease-in-out;
}

@keyframes pulseSelection {
    0% { box-shadow: 0 0 8px var(--glow-blue); }
    100% { box-shadow: 0 0 22px 4px var(--glow-blue); }
}

/* Gợi ý nước đi */
.tile.hint.hint .fruit-inner { animation: hintBounce 0.85s infinite ease-in-out; }

@keyframes hintBounce {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { transform: scale(1.14); box-shadow: 0 0 18px rgba(255, 215, 0, 0.7); }
}

/* Tráo không hợp lệ */
.tile.nudge.nudge .fruit-inner { animation: nudgeShake 0.3s ease; }

@keyframes nudgeShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-6deg); }
    75% { transform: translateX(4px) rotate(6deg); }
}

/* Xuất hiện lần đầu */
.tile.spawn-in.spawn-in .fruit-inner { animation: spawnIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.5) backwards; }

@keyframes spawnIn {
    0% { transform: scale(0) rotate(-90deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Rơi xuống — hơi nảy nhẹ khi chạm đáy */
.tile.falling.falling .fruit-inner { animation: fallSquash 0.5s ease-out; }

@keyframes fallSquash {
    0%, 70% { transform: scaleY(1) scaleX(1); }
    82% { transform: scaleY(0.84) scaleX(1.12); }
    92% { transform: scaleY(1.06) scaleX(0.96); }
    100% { transform: scaleY(1) scaleX(1); }
}

/* Nổ */
.tile.pop { z-index: 15; pointer-events: none; }
.tile.pop.pop .fruit-inner { animation: popOut 0.3s cubic-bezier(0.32, 0, 0.67, 0) forwards; }

@keyframes popOut {
    0% { transform: scale(1); opacity: 1; }
    35% { transform: scale(1.45) rotate(12deg); filter: brightness(2.4) saturate(1.6); }
    100% { transform: scale(0) rotate(30deg); opacity: 0; }
}

/* Nâng cấp thành quả đặc biệt */
.tile.upgrade.upgrade .fruit-inner { animation: upgradePulse 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.6); }

@keyframes upgradePulse {
    0% { transform: scale(0.5) rotate(-180deg); filter: brightness(3); }
    60% { transform: scale(1.35) rotate(10deg); filter: brightness(1.6); }
    100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

/* Trộn bàn cờ */
.tile.shuffling.shuffling .fruit-inner { animation: shuffleSpin 0.5s ease-in-out; }

@keyframes shuffleSpin {
    0% { transform: scale(1) rotate(0); }
    50% { transform: scale(0.55) rotate(180deg); opacity: 0.4; }
    100% { transform: scale(1) rotate(360deg); }
}

/* ---------- Hoa quả đặc biệt ---------- */
.tile.sp-lineH .fruit-inner,
.tile.sp-lineV .fruit-inner {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 14px var(--fruit-color, #fff), inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.tile.sp-lineH .fruit-inner::before,
.tile.sp-lineH .fruit-inner::after,
.tile.sp-lineV .fruit-inner::before,
.tile.sp-lineV .fruit-inner::after {
    content: '';
    position: absolute;
    border-radius: 4px;
    opacity: 0.9;
    box-shadow: 0 0 10px 2px var(--fruit-color, #fff);
    animation: stripeGlow 1.2s infinite alternate ease-in-out;
}

.tile.sp-lineH .fruit-inner::before,
.tile.sp-lineH .fruit-inner::after {
    left: 2%; right: 2%; height: 6px;
    background: linear-gradient(90deg, transparent, #fff 25%, #fff 75%, transparent);
}
.tile.sp-lineH .fruit-inner::before { top: 14%; }
.tile.sp-lineH .fruit-inner::after { bottom: 14%; }

.tile.sp-lineV .fruit-inner::before,
.tile.sp-lineV .fruit-inner::after {
    top: 2%; bottom: 2%; width: 6px;
    background: linear-gradient(180deg, transparent, #fff 25%, #fff 75%, transparent);
}
.tile.sp-lineV .fruit-inner::before { left: 14%; }
.tile.sp-lineV .fruit-inner::after { right: 14%; }

@keyframes stripeGlow {
    0% { opacity: 0.45; }
    100% { opacity: 1; }
}

.tile.sp-bomb .fruit-inner {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.35), rgba(255, 100, 0, 0.15));
    border-color: rgba(255, 200, 60, 0.7);
    box-shadow: 0 0 16px rgba(255, 170, 40, 0.75), inset 0 0 14px rgba(255, 220, 120, 0.4);
    animation: bombPulse 1s infinite alternate ease-in-out;
}

.tile.sp-bomb .fruit-inner::after {
    content: '';
    position: absolute;
    inset: 8%;
    border: 2px dashed rgba(255, 235, 150, 0.85);
    border-radius: 50%;
    animation: bombSpin 4s linear infinite;
}

@keyframes bombPulse {
    0% { box-shadow: 0 0 10px rgba(255, 170, 40, 0.5), inset 0 0 10px rgba(255, 220, 120, 0.3); }
    100% { box-shadow: 0 0 24px 4px rgba(255, 170, 40, 0.9), inset 0 0 16px rgba(255, 220, 120, 0.6); }
}

@keyframes bombSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

.tile.sp-rainbow .fruit-inner {
    /* đĩa tối ở giữa để emoji cầu vồng luôn nổi bật trên nền gradient */
    background:
        radial-gradient(circle at 50% 50%, rgba(6, 6, 22, 0.95) 0 44%, rgba(255, 255, 255, 0.55) 45% 48%, rgba(8, 8, 26, 0) 50%),
        conic-gradient(from 0deg, #ff4d6d, #ff9f43, #ffd93d, #7bed9f, #00f0ff, #b06cff, #ff4d6d);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.4);
    animation: rainbowSpin 4s linear infinite;
}

/* chỉ đổi màu, không dùng transform để không phá hiệu ứng scale khi hover/chọn */
@keyframes rainbowSpin {
    from { filter: hue-rotate(0deg) brightness(1.05) saturate(1.2); }
    to { filter: hue-rotate(360deg) brightness(1.05) saturate(1.2); }
}

/* ---------- Thùng gỗ & dừa ---------- */
.tile.is-crate { cursor: not-allowed; }

.tile.is-crate .fruit-inner {
    background: linear-gradient(150deg, rgba(201, 139, 75, 0.5), rgba(120, 74, 35, 0.55));
    border-color: rgba(226, 178, 118, 0.7);
    box-shadow: inset 0 0 12px rgba(80, 44, 15, 0.6);
}

.tile.is-crate .fruit-inner::before {
    content: '';
    position: absolute;
    inset: 12%;
    border: 2px solid rgba(226, 178, 118, 0.45);
    border-radius: 4px;
}

.tile.is-crate:hover .fruit-inner { transform: none; filter: none; }

.tile.is-harvest { cursor: not-allowed; z-index: 4; }

.tile.is-harvest .fruit-inner {
    background: radial-gradient(circle at 50% 40%, rgba(255, 217, 61, 0.35), rgba(139, 90, 43, 0.4));
    border-color: rgba(255, 217, 61, 0.75);
    box-shadow: 0 0 18px rgba(255, 200, 60, 0.55), inset 0 0 12px rgba(255, 220, 120, 0.35);
    animation: harvestGlow 1.4s infinite alternate ease-in-out;
}

.tile.is-harvest:hover .fruit-inner { transform: none; }

@keyframes harvestGlow {
    0% { box-shadow: 0 0 10px rgba(255, 200, 60, 0.4), inset 0 0 8px rgba(255, 220, 120, 0.25); }
    100% { box-shadow: 0 0 26px 5px rgba(255, 200, 60, 0.85), inset 0 0 16px rgba(255, 220, 120, 0.55); }
}

/* ---------- Chỉ báo trọng lực ---------- */
.gravity-badge {
    font-family: var(--font-display);
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.18);
    transition: all 0.3s ease;
}

.gravity-badge.is-up {
    color: #ffd93d;
    background: rgba(255, 217, 61, 0.12);
    border-color: rgba(255, 217, 61, 0.45);
    box-shadow: 0 0 16px rgba(255, 217, 61, 0.25);
}

.gravity-badge.hidden { display: none; }

/* nháy sáng cả bàn cờ khi vừa đảo chiều */
.board-grid.flip-down,
.board-grid.flip-up { animation: gravityPulse 0.6s ease-out; }

@keyframes gravityPulse {
    0% { box-shadow: inset 0 0 0 rgba(0, 240, 255, 0); }
    35% { box-shadow: inset 0 0 60px rgba(0, 240, 255, 0.55); }
    100% { box-shadow: inset 0 0 0 rgba(0, 240, 255, 0); }
}

/* Điểm bay lên */
.score-pop {
    font-family: var(--font-display);
    position: absolute;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: 1.3rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8);
    animation: scoreFloat 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    white-space: nowrap;
    pointer-events: none;
}

.score-pop.big {
    font-size: 1.9rem;
    color: #ffd93d;
    text-shadow: 0 0 16px rgba(255, 200, 60, 1), 0 2px 8px rgba(0, 0, 0, 0.8);
}

@keyframes scoreFloat {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    25% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -180%) scale(0.95); opacity: 0; }
}

/* Combo banner */
.combo-banner {
    font-family: var(--font-display);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffd93d, #ff9f43, #ff3366);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}

.combo-banner.show { animation: comboPop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* biến thể cho thông báo đảo trọng lực */
.combo-banner.gravity {
    background: linear-gradient(135deg, #00f0ff, #7bed9f, #b06cff);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 2.1rem;
}

@keyframes comboPop {
    0% { transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); opacity: 0; }
    25% { transform: translate(-50%, -50%) scale(1.25) rotate(4deg); opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    100% { transform: translate(-50%, -110%) scale(0.9); opacity: 0; }
}

/* Rung bàn cờ */
.shake-small { animation: shakeSmall 0.32s ease; }
.shake-big { animation: shakeBig 0.5s ease; }

@keyframes shakeSmall {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-4px, 2px); }
    50% { transform: translate(4px, -2px); }
    75% { transform: translate(-2px, 3px); }
}

@keyframes shakeBig {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    15% { transform: translate(-9px, 5px) rotate(-0.6deg); }
    30% { transform: translate(9px, -6px) rotate(0.6deg); }
    45% { transform: translate(-7px, -4px) rotate(-0.4deg); }
    60% { transform: translate(7px, 5px) rotate(0.4deg); }
    80% { transform: translate(-3px, 2px) rotate(0); }
}

/* Buttons and Controls */
.game-controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn {
    border: none;
    border-radius: 16px;
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: var(--font-display);
    letter-spacing: 0.3px;
}

.btn-primary {
    background: linear-gradient(135deg, #ff3366, #ff007f);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 51, 102, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 51, 102, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-muted { opacity: 0.55; }
.glass-btn { backdrop-filter: blur(10px); }

/* Guide Card */
.guide-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-color);
}

.guide-card ul {
    list-style: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guide-card li {
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}

.guide-card li::before {
    content: '•';
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    top: -2px;
}

.guide-card b { color: #fff; }

/* Legend cho quả đặc biệt */
.special-list li { padding-left: 0; display: flex; gap: 10px; align-items: flex-start; }
.special-list li::before { content: none; }

.legend-badge {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-h { box-shadow: 0 0 10px rgba(0, 240, 255, 0.6); color: #00f0ff; }
.legend-v { box-shadow: 0 0 10px rgba(186, 85, 211, 0.6); color: #d580ff; }
.legend-bomb { box-shadow: 0 0 10px rgba(255, 170, 40, 0.7); }
.legend-rainbow {
    background: conic-gradient(from 0deg, #ff4d6d, #ffd93d, #7bed9f, #00f0ff, #b06cff, #ff4d6d);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Modals Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 5, 20, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.modal-content {
    max-width: 400px;
    width: 100%;
    text-align: center;
    padding: 40px 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.wide { max-width: 560px; }
.modal-content .btn { width: 100%; }

.modal-icon { font-size: 4rem; margin-bottom: 10px; }
.modal-content h2 { font-size: 2.2rem; font-weight: 800; }
    font-family: var(--font-display);
.modal-content p { color: var(--text-muted); }

.modal-stats {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 6px 0;
}

.intro-goals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 6px 0;
}

.intro-goal {
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-weight: 700;
    font-size: 1.1rem;
}

.intro-goal span { font-size: 1.6rem; }

/* Bản đồ màn chơi */
.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 12px;
    width: 100%;
    margin: 10px 0;
}

.level-node {
    font-family: var(--font-display);
    aspect-ratio: 1;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(160deg, rgba(0, 240, 255, 0.16), rgba(186, 85, 211, 0.16));
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.4), box-shadow 0.2s ease;
}

.level-node:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.3);
}

.level-node.locked {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    cursor: not-allowed;
}

.level-node.locked:hover { transform: none; box-shadow: none; }

.level-num { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
    font-family: var(--font-display);

.level-icons {
    font-size: 0.72rem;
    letter-spacing: 1px;
    line-height: 1;
    opacity: 0.95;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.level-stars {
    display: flex;
    gap: 3px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
}

.level-stars .on { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); }

/* Pop-in animation */
.pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

@keyframes popIn {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsive queries */
@media (max-width: 1150px) {
    .game-main {
        grid-template-columns: 1fr 1fr;
        max-width: 820px;
    }
    .board-area {
        grid-column: 1 / -1;
        order: -1;
    }
}

@media (max-width: 768px) {
    .game-main {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 6px;
    }

    .game-container { padding: 12px; }
    .logo-text { font-size: 2.2rem; }
    .stat-value { font-size: 2.2rem; }
    .combo-banner { font-size: 1.9rem; }

    .game-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .objectives-card { grid-column: 1 / -1; }
    .objective-list { flex-direction: row; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-gradient-shimmer { animation: none; }
    .combo-banner.show,
    .tile.spawn-in.spawn-in .fruit-inner,
    .tile.falling.falling .fruit-inner { animation-duration: 0.01s; }
}

/* Nhắc trước cơ chế đặc biệt trong màn giới thiệu */
.intro-goal.is-warning {
    font-size: 0.95rem;
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.1);
    border-color: rgba(0, 240, 255, 0.35);
}

/* Huy hiệu chế độ thử màn — chỉ hiện khi chủ game bật ?dev=1 */
.dev-badge {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    padding: 8px 14px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0a0b1e;
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    box-shadow: 0 4px 16px rgba(255, 200, 60, 0.45);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.dev-badge.hidden { display: none; }

/* ===================== BẢNG VÀNG ===================== */
.score-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
    max-height: 46vh;
    overflow-y: auto;
    padding-right: 4px;
}

.score-empty {
    padding: 24px 0;
    color: var(--text-muted);
}

.score-row {
    display: grid;
    grid-template-columns: 38px 1fr auto auto;
    grid-template-areas: 'medal name meta points' 'medal date date points';
    align-items: center;
    gap: 2px 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.score-row:hover { transform: translateX(3px); }

.score-medal {
    grid-area: medal;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
}

.score-rank {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.score-name {
    grid-area: name;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-meta {
    grid-area: meta;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.score-points {
    grid-area: points;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffd93d;
    font-variant-numeric: tabular-nums;
}

.score-date {
    grid-area: date;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.75;
}

/* Huy chương Vàng, Bạc, Đồng cho ba hạng đầu */
.score-row.top-1 {
    background: linear-gradient(100deg, rgba(255, 215, 0, 0.18), rgba(255, 255, 255, 0.04));
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
}
.score-row.top-2 {
    background: linear-gradient(100deg, rgba(200, 210, 225, 0.16), rgba(255, 255, 255, 0.04));
    border-color: rgba(200, 210, 225, 0.45);
}
.score-row.top-3 {
    background: linear-gradient(100deg, rgba(205, 127, 50, 0.16), rgba(255, 255, 255, 0.04));
    border-color: rgba(205, 127, 50, 0.45);
}

/* Dòng vừa ghi danh xong thì nháy lên cho dễ thấy */
.score-row.is-new { animation: scoreHighlight 1.6s ease-out; }

@keyframes scoreHighlight {
    0% { transform: scale(0.94); box-shadow: 0 0 0 rgba(0, 240, 255, 0); }
    25% { transform: scale(1.03); box-shadow: 0 0 26px rgba(0, 240, 255, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(0, 240, 255, 0); }
}

/* ===================== GHI DANH ===================== */
.record-box {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.35);
    animation: recordAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}

.record-box.hidden { display: none; }

@keyframes recordAppear {
    0% { transform: translateY(14px) scale(0.94); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.record-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: #ffd93d;
    margin-bottom: 10px;
}

.record-form { display: flex; gap: 8px; }

.record-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.record-input::placeholder { color: rgba(255, 255, 255, 0.35); }

.record-input:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18);
}

.record-form .btn { width: auto; padding: 12px 20px; white-space: nowrap; }

.record-done {
    font-family: var(--font-display);
    font-weight: 700;
    color: #39ff14;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: recordAppear 0.4s ease-out;
}

/* ===================== CHIA SẺ ===================== */
.share-box { width: 100%; }

.share-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.share-btn {
    flex: 1 1 auto;
    min-width: 104px;
    padding: 11px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.share-btn:hover:not([disabled]) { transform: translateY(-2px); }
.share-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.share-native {
    background: linear-gradient(135deg, #39ff14, #00c853);
    color: #05210a;
    border-color: transparent;
}
.share-native:hover { box-shadow: 0 6px 18px rgba(57, 255, 20, 0.4); }

.share-fb { background: #1877f2; border-color: transparent; }
.share-fb:hover:not([disabled]) { box-shadow: 0 6px 18px rgba(24, 119, 242, 0.5); }

.share-x { background: #000; border-color: rgba(255, 255, 255, 0.25); }
.share-x:hover { box-shadow: 0 6px 18px rgba(255, 255, 255, 0.22); }

.share-copy:hover { background: rgba(255, 255, 255, 0.15); }

/* ===================== THÔNG BÁO NỔI ===================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 24px);
    z-index: 300;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    color: #05210a;
    background: linear-gradient(135deg, #39ff14, #00e5a0);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.toast.warn {
    color: #2a1500;
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
}

}

/* Unified Top Navigation Bar */
.unified-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 25, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 99;
}

.unified-nav .brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unified-nav .brand-icon {
    font-size: 1.6rem;
    color: #ff3366;
    text-shadow: 0 0 10px rgba(255, 51, 102, 0.5);
}

.unified-nav .brand-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ffffff, #8888aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.unified-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}



.unified-nav .btn {
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: none !important;
    transform: none !important;
}

.unified-nav .btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-1px) !important;
}

.unified-nav .btn-home {
    background: linear-gradient(135deg, #00f0ff, #0072ff) !important;
    border-color: #00f0ff !important;
    color: #050515 !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3) !important;
}

.unified-nav .btn-home:hover {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5) !important;
    color: #ffffff !important;
}
@media (max-width: 600px) {
    .unified-nav {
        padding: 10px 16px;
    }
    .unified-nav .brand-title {
        font-size: 1.1rem;
    }
    .unified-nav .btn span {
        display: none;
    }
    .unified-nav .btn {
        padding: 8px;
    }
}