🤖 Cannot save fiddle

[dangyt2407-svg]

Error code

ERRW:1.0:K1.0:AS

Were you logged in?

Yes

Your username (if logged in)

nguoilienxo

Your HTML

<h1>🏮 Xuân Bính Ngọ 2026 🏮<br><span style="color: var(--vang); font-size: 1.5rem;">Lì Xì Đại Cát</span></h1>

<div class="grid">
    <div class="lixi" onclick="openGame(0)"><span class="han">福</span><span class="viet">Phúc</span></div>
    <div class="lixi" onclick="openGame(1)"><span class="han">祿</span><span class="viet">Lộc</span></div>
    <div class="lixi" onclick="openGame(2)"><span class="han">壽</span><span class="viet">Thọ</span></div>
    <div class="lixi" onclick="openGame(3)"><span class="han">智</span><span class="viet">Trí</span></div>
    <div class="lixi" onclick="openGame(4)"><span class="han">喜</span><span class="viet">Hỷ</span></div>
    <div class="lixi" onclick="openGame(5)"><span class="han">安</span><span class="viet">An</span></div>
    <div class="lixi" onclick="openGame(6)"><span class="han">財</span><span class="viet">Tài</span></div>
    <div class="lixi" onclick="openGame(7)"><span class="han">忍</span><span class="viet">Nhẫn</span></div>
    <div class="lixi" onclick="openGame(8)"><span class="han">成</span><span class="viet">Thành</span></div>
</div>

<div id="game-modal" class="overlay">
    <h2 id="quest-text" style="color: var(--vang); margin-bottom: 10px; text-shadow: 1px 1px #000;">...</h2>
    <div class="char-box">
        <span id="char-icon" style="margin-top: -20px;">👤</span>
        <span id="char-name-label" class="char-name">Ẩn danh</span>
    </div>
    <div class="needs-list" id="needs-display">Đang đợi...</div>
    <div class="excitement-label">Thanh Hưng Phấn</div>
    <div class="progress-bar"><div id="fill"></div></div>
    <div class="gift-actions">
        <button class="gift-btn" onclick="give('🍑')">🍑</button>
        <button class="gift-btn" onclick="give('🧸')">🧸</button>
        <button class="gift-btn" onclick="give('🧧')">🧧</button>
        <button class="gift-btn" onclick="give('🌸')">🌸</button>
        <button class="gift-btn" onclick="give('🫔')">🫔</button>
        <button class="gift-btn" onclick="give('❤️')">❤️</button>
        <button class="gift-btn" onclick="give('🃏')">🃏</button>
        <button class="gift-btn" onclick="give('🎆')">🎆</button>
        <button class="gift-btn" onclick="give('🍎')">🍎</button>
    </div>
</div>

<div id="res-modal" class="overlay">
    <div class="scroll" id="scroll-box">
        <h3 id="scroll-title" style="margin: 0; color: #b30000; font-size: 1.5rem;">📜 DI CHIẾU 📜</h3>
        <h1 id="r-han" style="color:var(--do); margin:10px 0; font-size: 50px;"></h1>
        <h2 id="r-title" style="margin:0; font-family:'Dancing Script'; color: #8b4513;"></h2>
        <hr id="scroll-hr" style="border: 1px dashed #d4af37;">
        <p id="r-wish"></p>
        <p id="hy-count-info" style="font-size: 0.9rem; color: #b30000; font-weight: bold;"></p>
        <button class="btn-close" onclick="closeRes()">Lãnh Chỉ & Nhận Lộc!</button>
    </div>
</div>

Your JavaScript

let score = 0; let target = 3; let currentIdx = -1;
let hyCount = 0; let currentNeeds = [];
const giftPool = ['🍑', '🧸', '🧧', '🌸', '🫔', '❤️', '🃏', '🎆', '🍎'];
const chars = [
    { i: "👦", n: "Vũ" }, { i: "👶", n: "Minh" }, { i: "🧒", n: "Bảo" },
    { i: "🧑", n: "Huy" }, { i: "😎", n: "Bách" }, { i: "👧", n: "Vi" }, { i: "👩", n: "Hà" }
];

const data = [
    { h: "福", t: "Phúc Mãn Đường", w: ["🏮 Phúc như Đông Hải, thọ tỷ Nam Sơn. Gia đình êm ấm!", "🏮 Phúc lộc đầy nhà, năm mới vạn sự hanh thông!", "🏮 Một chữ Phúc cho năm mới bình an, vạn điều như ý!"]},
    { h: "祿", t: "Lộc Tấn Vinh Hoa", w: ["💰 Tiền vào như nước sông Đà, tiền ra nhỏ giọt!", "💰 Công danh rạng rỡ, sự nghiệp thăng hoa, tiền đầy túi!", "💰 Lộc lá đầy nhà, mua sắm thả ga nhé!"]},
    { h: "壽", t: "Thọ Tỷ Nam Sơn", w: ["🛡️ Sức khỏe dẻo dai, bách niên giai lão!", "🛡️ Thân thể cường tráng, không lo ốm đau!", "🛡️ Luôn tràn đầy năng lượng chinh phục mọi thử thách!"]},
    { h: "智", t: "Trí Tuệ Minh", w: ["🧠 IQ thăng tiến, học một hiểu mười!", "🧠 Trí tuệ sáng láng, giúp bạn dẫn đầu!", "🧠 Mọi bài toán khó đều có lời giải hay!"]},
    { h: "喜", t: "Hỷ Khí Lâm Môn", w: ["💖 Tin vui gõ cửa liên tục, tình duyên thắm thiết!", "💖 Vạn sự như ý, tỷ sự như mơ!", "💖 Một năm ngập tràn tiếng cười và niềm vui!"]},
    { h: "安", t: "An Khang Thịnh Vượng", w: ["🍃 Một năm bình an, tâm hồn thanh thản!", "🍃 Sóng gió dừng sau cánh cửa, trả lại bình yên!", "🍃 Ngủ ngon mỗi tối, thức dậy với nụ cười!"]},
    { h: "財", t: "Tài Lộc Hanh Thông", w: ["💎 Tài năng phát tiết, làm đâu thắng đó!", "💎 Tiền bạc rủng rỉnh, sự nghiệp rạng danh!", "💎 Trở thành ngôi sao sáng nhất trong mắt mọi người!"]},
    { h: "忍", t: "Nhẫn Để Thành Công", w: ["🌟 Lòng kiên định như đá, ý chí vững như đồng!", "🌟 Nhẫn nại hôm nay là trái ngọt cho ngày mai!", "🌟 Vượt qua khó khăn để chạm tới vinh quang!"]},
    { h: "成", t: "Công Thành Danh Toại", w: ["🚀 Mã đáo thành công, vạn sự viên mãn!", "🚀 Mọi dự định ấp ủ đều đạt kết quả vượt mong đợi!", "🚀 Năm mới tỏa sáng rực rỡ nhất!"]}
];

function playSound(freq, type) {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = type; osc.frequency.setValueAtTime(freq, ctx.currentTime);
    gain.gain.setValueAtTime(0.1, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
    osc.connect(gain); gain.connect(ctx.destination);
    osc.start(); osc.stop(ctx.currentTime + 0.5);
}

function burstIcons(icon) {
    const corners = [{ x: 0, y: window.innerHeight }, { x: window.innerWidth, y: window.innerHeight }];
    for(let i=0; i<100; i++) {
        const corner = corners[i % 2];
        const el = document.createElement('div');
        el.className = 'burst-icon';
        el.innerText = icon;
        el.style.left = corner.x + 'px';
        el.style.top = corner.y + 'px';
        const tx = (i % 2 === 0 ? 1 : -1) * (Math.random() * 600 + 100);
        const ty = -(Math.random() * 800 + 300);
        el.style.setProperty('--tx', `${tx}px`);
        el.style.setProperty('--ty', `${ty}px`);
        document.body.appendChild(el);
        setTimeout(() => el.remove(), 3000);
    }
}

function openGame(idx) {
    currentIdx = idx; score = 0;
    let charObj = chars[Math.floor(Math.random() * chars.length)];
    if (charObj.n === "Bách") currentNeeds = ["❤️", "❤️", "❤️"];
    else {
        currentNeeds = [];
        for(let i=0; i<3; i++) currentNeeds.push(giftPool[Math.floor(Math.random() * giftPool.length)]);
    }
    document.getElementById('char-icon').innerText = charObj.i;
    document.getElementById('char-name-label').innerText = charObj.n;
    document.getElementById('quest-text').innerText = charObj.n + " đang muốn vài thứ...";
    updateNeedsDisplay();
    document.getElementById('fill').style.width = '0%';
    document.getElementById('game-modal').style.display = 'flex';
}

function updateNeedsDisplay() {
    let html = "";
    currentNeeds.forEach((n, idx) => {
        let opacity = idx < score ? "0.3" : "1";
        html += `<span style="opacity: ${opacity}; margin: 0 5px;">${n}</span>`;
    });
    document.getElementById('needs-display').innerHTML = html;
}

function give(gift) {
    if(gift === currentNeeds[score]) {
        score++;
        playSound(400 + score * 100, 'sine');
        document.getElementById('fill').style.width = (score/target)*100 + '%';
        updateNeedsDisplay();
        if(score >= target) {
            burstIcons(gift);
            document.getElementById('char-icon').innerText = "😍";
            setTimeout(win, 3000);
        }
    } else {
        playSound(150, 'square');
        alert("Hihi món này tui hổng có cần nè!");
    }
}

function win() {
    document.getElementById('game-modal').style.display = 'none';
    const box = document.getElementById('scroll-box');
    const title = document.getElementById('scroll-title');
    const hr = document.getElementById('scroll-hr');
    const wishArea = document.getElementById('r-wish');
    box.classList.remove('thanh-chi');
    title.innerText = "📜 DI CHIẾU 📜";
    hr.style.borderColor = "#d4af37";

    if(currentIdx === 4) { 
        hyCount++;
        if(hyCount >= 4) {
            box.classList.add('thanh-chi');
            title.innerText = "✨ THÁNH CHỈ ✨";
            hr.style.borderColor = "#b30000";
            document.getElementById('r-han').innerText = "喜";
            document.getElementById('r-title').innerText = "Lời Tỏ Tình Từ Bách";
            wishArea.innerHTML = `
                <div style="font-style: italic; color: #b30000; font-weight: bold; margin-bottom: 10px;">
                    "Trăm năm trong cõi người ta,<br>Bách thì chỉ muốn một nhà với Phương."
                </div>
                (thật ra bách thích phương nhìu lắm luôn á nhiều như trái đất này nè, nhưng bách ko nói thoi, sơ phương ko thích bách á)
            `;
            document.getElementById('res-modal').style.display = 'flex';
            playSound(600, 'triangle');
            return;
        }

Your CSS

:root { 
    --do: #b30000; 
    --vang: #ffd700; 
    --nen-tet: url('https://www.transparenttextures.com/patterns/oriental-tiles.png');
    --canh-dao: url('https://png.pngtree.com/png-vector/20221213/ourmid/pngtree-cherry-blossom-flowers-branch-vector-png-image_6521575.png');
    --nen-game: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
}

body {
    margin: 0; 
    background: #8a0d0d var(--nen-tet);
    background-color: #ce1f1f;
    font-family: 'Patrick Hand', cursive; color: white;
    display: flex; flex-direction: column; align-items: center; overflow: hidden; height: 100vh;
    position: relative;
}

body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--canh-dao); background-repeat: no-repeat;
    background-size: 400px; background-position: top right;
    opacity: 0.6; pointer-events: none; z-index: 1;
}

h1 { font-family: 'Dancing Script'; font-size: 2.3rem; color: var(--vang); margin: 15px 0 5px; text-shadow: 2px 2px #000; text-align: center; z-index: 10; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; z-index: 10; }
.lixi {
    width: 95px; height: 135px; background: linear-gradient(145deg, #b30000, #ff0000); 
    border: 3px solid var(--vang); border-radius: 12px; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.5); position: relative;
}
.lixi:active { transform: scale(0.9) rotate(5deg); }
.han { font-family: 'Noto Serif TC'; font-size: 35px; color: var(--vang); text-shadow: 1px 1px 2px #000; }
.viet { font-size: 15px; color: #fff; font-weight: bold; }

.overlay { 
    position: fixed; inset: 0; 
    background: rgba(138, 13, 13, 0.98) var(--nen-tet);
    display: none; flex-direction: column; align-items: center; justify-content: center; 
    z-index: 100; animation: fadeIn 0.3s; 
}

#game-modal { background: #8a0d0d var(--nen-game); }

.char-box { 
    font-size: 80px; width: 160px; height: 160px; background: #fff; 
    border-radius: 50%; display: flex; flex-direction: column; align-items: center; 
    justify-content: center; border: 5px solid var(--vang); margin-bottom: 10px; 
    box-shadow: 0 0 25px var(--vang); position: relative; 
}
.char-name { font-size: 1.2rem; color: var(--do); font-weight: bold; position: absolute; bottom: 10px; }

.needs-list { font-size: 1.5rem; margin-bottom: 5px; background: rgba(0,0,0,0.3); padding: 5px 15px; border-radius: 20px; border: 1px solid var(--vang); }

.excitement-label { font-size: 1rem; color: var(--vang); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.progress-bar { width: 260px; height: 25px; background: #222; border-radius: 20px; border: 3px solid var(--vang); overflow: hidden; margin-bottom: 15px; box-shadow: inset 0 0 10px #000; }
#fill { 
    width: 0%; height: 100%; 
    background: linear-gradient(90deg, #ff0000, #ffde59, #00ff00, #ff00ff, #ff0000); 
    background-size: 200% 100%;
    animation: moveGradient 2s linear infinite;
    transition: width 0.4s ease;
}
@keyframes moveGradient { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

.gift-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gift-btn { 
    padding: 10px; background: #fff; border-radius: 15px; border: 2px solid var(--vang); 
    font-size: 2rem; cursor: pointer; box-shadow: 0 4px 0 #b38f00; transition: 0.1s;
}
.gift-btn:active { transform: translateY(2px); box-shadow: none; }

.scroll { 
    background: #fdf5e6; 
    background-image: linear-gradient(to right, #d4af37 2%, transparent 5%, transparent 95%, #d4af37 98%);
    color: #333; padding: 40px 30px; border: 4px solid #d4af37; border-radius: 5px; 
    text-align: center; width: 80%; max-width: 400px; box-shadow: 0 0 30px rgba(0,0,0,0.7);
    position: relative; transition: 0.5s;
}
.scroll::before, .scroll::after {
    content: ""; position: absolute; height: 110%; width: 20px; 
    background: #8b4513; top: -5%; border-radius: 5px; border: 2px solid #d4af37;
}
.scroll::before { left: -10px; }
.scroll::after { right: -10px; }

.scroll.thanh-chi {
    background: #ffd700; 
    background-image: linear-gradient(to right, #b38f00 2%, transparent 5%, transparent 95%, #b38f00 98%);
    border-color: #b38f00;
}
.scroll.thanh-chi h3 { color: #b30000 !important; font-weight: 900; }

#r-wish { font-family: 'Noto Serif TC'; font-size: 1.1rem; line-height: 1.8; text-align: center; }
.btn-close { margin-top: 20px; padding: 12px 25px; background: var(--do); color: white; border: 2px solid var(--vang); border-radius: 8px; cursor: pointer; font-family: 'Patrick Hand'; font-size: 1.1rem; }

.burst-icon {
    position: fixed; pointer-events: none; font-size: 2.5rem; z-index: 1000;
    animation: burst 3s forwards cubic-bezier(0.1, 0.5, 0.3, 1);
}
@keyframes burst {
    0% { transform: translate(0, 0) scale(0.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(720deg); opacity: 0; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }