🎄 Christmas Blackjack 🎁

* { box-sizing: border-box; margin: 0; padding: 0; }
body, html {
font-family: Georgia, ‘Times New Roman’, serif;
min-height: 100vh;
background: radial-gradient(ellipse at center, #1a472a 0%, #0d2818 70%, #071810 100%);
}
button { border: none; background: none; font-family: inherit; cursor: pointer; }

“`
.container {
position: relative;
z-index: 10;
max-width: 900px;
margin: 0 auto;
padding: 32px 16px;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.gold-text {
background: linear-gradient(135deg, #d4a574 0%, #c9a227 25%, #f4e4bc 50%, #c9a227 75%, #d4a574 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

header { text-align: center; margin-bottom: 32px; }
header .tree { font-size: 48px; margin-bottom: 8px; animation: float 3s ease-in-out infinite; }
header h1 { font-family: Georgia, serif; font-size: 36px; font-weight: 900; margin-bottom: 8px; }
header p { color: rgba(255,255,255,0.6); font-size: 18px; }

.screen { flex: 1; display: none; flex-direction: column; }
.screen.active { display: flex; }

.menu-title { text-align: center; color: white; font-family: Georgia, serif; font-size: 24px; margin-bottom: 32px; }
.players-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; justify-items: center; max-width: 520px; margin: 0 auto; }
@media (min-width: 640px) { .players-grid { grid-template-columns: repeat(4, 1fr); } }

.player-btn {
position: relative; padding: 4px; border-radius: 16px; background: rgba(255,255,255,0.1); transition: all 0.3s;
}
.player-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }
.player-img {
width: 80px; height: 80px; border-radius: 12px; object-fit: cover; display: block;
background: linear-gradient(135deg, #c9a227, #d4a574);
}
.player-btn .name {
position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: bold;
background: rgba(17,24,39,0.95); color: white; white-space: nowrap;
}

.panel {
background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); border-radius: 24px;
padding: 32px; max-width: 440px; width: 100%; margin: 0 auto; text-align: center;
}
.panel .avatar {
width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
margin: 0 auto 16px; box-shadow: 0 0 0 4px rgba(245,158,11,0.5);
background: linear-gradient(135deg, #c9a227, #d4a574);
}
.panel h2 { font-family: Georgia, serif; font-size: 24px; color: white; font-weight: bold; margin-bottom: 8px; }
.panel .subtitle { color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.panel .chips-label { color: #fbbf24; font-family: Georgia, serif; font-size: 18px; margin-bottom: 8px; }
.panel .chips-value { font-size: 48px; font-family: Georgia, serif; font-weight: 900; margin-bottom: 24px; }
.panel .bet-label { color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.bet-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.bet-btn {
padding: 12px 20px; border-radius: 12px; font-weight: bold; transition: all 0.3s;
background: rgba(255,255,255,0.1); color: white;
}
.bet-btn.active { background: linear-gradient(135deg, #f59e0b, #eab308); color: black; transform: scale(1.1); }

.btn {
padding: 16px 32px; border-radius: 16px; font-family: Georgia, serif;
font-weight: bold; font-size: 18px; color: white; transition: all 0.3s;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
}
.btn:hover { transform: scale(1.05); }
.btn-green { background: linear-gradient(135deg, #16a34a, #059669); }
.btn-blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.btn-amber { background: linear-gradient(135deg, #d97706, #ea580c); }
.btn-festive { background: linear-gradient(135deg, #b91c1c, #15803d); }
.btn-ghost { background: rgba(255,255,255,0.1); font-family: Georgia, serif; font-size: 16px; padding: 12px 24px; }
.btn-full { width: 100%; }

.back-link { margin-top: 24px; background: none; color: rgba(255,255,255,0.5); font-size: 16px; }
.back-link:hover { color: white; }

.chip-display {
position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.5);
backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 999px; color: white;
}
.chip-display .amount { color: #fbbf24; font-weight: bold; }
.chip-display .bet { color: rgba(255,255,255,0.5); margin-left: 8px; }

.hands-area { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.hand { text-align: center; }
.hand-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.hand-label span { color: rgba(255,255,255,0.7); font-size: 18px; }
.hand-total {
margin-left: 8px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: bold;
background: rgba(255,255,255,0.2); color: white;
}
.hand-total.blackjack { background: linear-gradient(135deg, #eab308, #f59e0b); color: black; }
.hand-total.bust { background: #dc2626; }

.cards { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.card {
width: 72px; height: 100px; border-radius: 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.2);
animation: dealCard 0.5s ease-out forwards;
}
.card.front { background: linear-gradient(135deg, #f9fafb, #ffffff); border: 1px solid #e5e7eb; }
.card.back { background: linear-gradient(135deg, #7f1d1d, #991b1b, #7f1d1d); border: 2px solid #b91c1c; }
.card .rank { font-size: 18px; font-weight: bold; }
.card .suit { font-size: 28px; }
.card.red .rank, .card.red .suit { color: #dc2626; }
.card.black .rank, .card.black .suit { color: #111827; }
.card .hidden-icon { font-size: 36px; opacity: 0.6; }

.divider { height: 1px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); }

.action-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }

.result-msg {
display: inline-block; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
padding: 12px 24px; border-radius: 16px; margin-bottom: 24px;
}
.result-msg .text { font-size: 24px; font-family: Georgia, serif; font-weight: bold; color: white; }
.result-msg .chips { color: #fbbf24; margin-top: 4px; }

.prizes-title { color: white; font-family: Georgia, serif; font-size: 20px; margin-bottom: 16px; }
.prizes-grid { display: grid; gap: 12px; max-width: 680px; margin: 0 auto; }
.prize-card {
position: relative; padding: 16px; border-radius: 16px; text-align: left; width: 100%;
background: rgba(255,255,255,0.1); transition: all 0.3s; display: flex; align-items: flex-start; gap: 16px;
}
.prize-card:hover { background: rgba(255,255,255,0.15); }
.prize-card.selected { background: linear-gradient(135deg, #16a34a, #15803d); box-shadow: 0 0 0 4px #4ade80; }
.prize-card .icon { font-size: 36px; flex-shrink: 0; }
.prize-card .info { flex: 1; min-width: 0; }
.prize-card .name { color: white; font-family: Georgia, serif; font-weight: bold; font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
.prize-card .desc { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prize-card .selected-badge { background: white; color: #15803d; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: bold; }

.prize-actions { display: flex; justify-content: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }

.claimed-icon { font-size: 56px; margin-bottom: 16px; }
.claimed-prize {
background: rgba(255,255,255,0.1); border-radius: 16px; padding: 24px;
margin-bottom: 24px; border: 1px solid rgba(34,197,94,0.3);
}
.claimed-prize .icon { font-size: 44px; margin-bottom: 12px; }
.claimed-prize .name { font-family: Georgia, serif; font-size: 20px; color: white; font-weight: bold; margin-bottom: 8px; }
.claimed-prize .desc { color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.order-note { color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.view-link { display: block; margin-bottom: 16px; color: #fbbf24; text-decoration: underline; }

footer { text-align: center; margin-top: 32px; color: rgba(255,255,255,0.3); font-size: 14px; }

.snow-container { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.snowflake {
position: absolute; background: white; border-radius: 50%; opacity: 0;
animation: snow linear infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes dealCard {
0% { transform: translateY(-80px) rotate(-15deg); opacity: 0; }
100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes snow {
0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse { animation: pulse 2s ease-in-out infinite; }
“`

var PLAYERS = [
{ id: ‘bek’, name: ‘Bek’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/bek-medium.jpeg’ },
{ id: ‘reece’, name: ‘Reece’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/reece-medium.jpeg’ },
{ id: ‘greg’, name: ‘Greg’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/img_8647.jpeg’ },
{ id: ‘ari’, name: ‘Ari’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/ari-medium.jpeg’ },
{ id: ‘les’, name: ‘Les’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/les.jpg’ },
{ id: ‘tim’, name: ‘Tim’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/tim.jpg’ },
{ id: ‘erika’, name: ‘Erika’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/erika.jpg’ },
{ id: ‘jess’, name: ‘Jess’, avatar: ‘https://thisisjordanpayne.com/wp-content/uploads/2025/12/img_3859.jpeg’ },
];

var PRIZES = [
{ id: 1, name: “Create Your Own Reel Viewer”, description: “Custom photo slides in a retro viewfinder – upload 7 photos to create your reel”, url: “https://www.uncommongoods.com/product/create-your-own-reel-viewer”, icon: “📷” },
{ id: 2, name: “Retro Point & Shoot Camera Phone Converter”, description: “Turn your smartphone into a vintage-style film camera”, url: “https://www.uncommongoods.com/product/retro-point-shoot-camera-phone-converter”, icon: “📸” },
{ id: 3, name: “Glass Topper Cocktail Smoker”, description: “Create smoke-infused cocktails at home with wood chips and torch”, url: “https://www.uncommongoods.com/product/glass-topper-cocktail-smoker”, icon: “🍸” },
{ id: 4, name: “Ancient Rocks Whiskey Stones”, description: “940-million-year-old stones to chill drinks without dilution”, url: “https://www.uncommongoods.com/product/ancient-rocks-prehistoric-whiskey-stones”, icon: “🥃” },
{ id: 5, name: “Grow Your Own Mushroom Kit”, description: “Harvest gourmet oyster mushrooms at home in just 10 days”, url: “https://www.uncommongoods.com/product/grow-your-own-mushroom-garden”, icon: “🍄” },
{ id: 6, name: “Whiskey Making Kit”, description: “Craft your own flavored whiskey with botanicals and wood chips”, url: “https://www.uncommongoods.com/product/whiskey-making-kit”, icon: “🥃” },
{ id: 7, name: “Personalized Star Map”, description: “Custom night sky print from any special date and location”, url: “https://www.uncommongoods.com/product/personalized-star-map”, icon: “⭐” },
{ id: 8, name: “DIY Hot Sauce Kit”, description: “Everything you need to craft custom hot sauce blends at home”, url: “https://www.uncommongoods.com/product/make-your-own-hot-sauce-kit”, icon: “🌶️” },
{ id: 9, name: “Birthstone Wine Stopper”, description: “Handblown glass stopper with embedded birthstone crystal”, url: “https://www.uncommongoods.com/product/birthstone-wine-stopper”, icon: “🍷” },
{ id: 10, name: “Tea Drops Sampler”, description: “Organic pressed tea that dissolves in hot water – no bags needed”, url: “https://www.uncommongoods.com/product/tea-drops-sampler”, icon: “🍵” },
{ id: 11, name: “Indoor S’mores Fire Pit”, description: “Tabletop fire pit for making s’mores indoors safely”, url: “https://www.uncommongoods.com/product/indoor-smores-fire-pit”, icon: “🔥” },
{ id: 12, name: “Craft Beer Making Kit”, description: “Brew your own small-batch craft beer at home”, url: “https://www.uncommongoods.com/product/craft-beer-making-kit”, icon: “🍺” },
{ id: 13, name: “Personalized Soundwave Art”, description: “Your voice or favorite song turned into visual soundwave art”, url: “https://www.uncommongoods.com/product/personalized-soundwave-art-print”, icon: “🎵” },
{ id: 14, name: “Pickle Making Kit”, description: “Everything to pickle your own cucumbers, vegetables, or fruits”, url: “https://www.uncommongoods.com/product/pickle-making-kit”, icon: “🥒” },
{ id: 15, name: “Grow Your Own Bonsai Kit”, description: “Seeds and supplies to grow miniature bonsai trees from scratch”, url: “https://www.uncommongoods.com/product/grow-your-own-bonsai-kit”, icon: “🌳” },
{ id: 16, name: “Coffee Joulies”, description: “Stainless steel beans that cool coffee to perfect temp and keep it there”, url: “https://www.uncommongoods.com/product/coffee-joulies”, icon: “☕” },
];

var SUITS = [‘♠’, ‘♥’, ‘♦’, ‘♣’];
var RANKS = [‘A’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ’10’, ‘J’, ‘Q’, ‘K’];

var currentPlayer = null;
var deck = [];
var playerHand = [];
var dealerHand = [];
var chips = 100;
var bet = 25;
var selectedPrize = null;
var availablePrizes = [];

function shuffle(array) {
var arr = array.slice();
for (var i = arr.length – 1; i > 0; i–) {
var j = Math.floor(Math.random() * (i + 1));
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}

function createDeck() {
var d = [];
for (var s = 0; s < SUITS.length; s++) {
for (var r = 0; r < RANKS.length; r++) {
d.push({ suit: SUITS[s], rank: RANKS[r] });
}
}
return shuffle(d.concat(d.slice()));
}

function getCardValue(card) {
if (card.rank === 'J' || card.rank === 'Q' || card.rank === 'K') return 10;
if (card.rank === 'A') return 11;
return parseInt(card.rank);
}

function calculateHand(cards) {
var total = 0, aces = 0;
for (var i = 0; i 21 && aces > 0) { total -= 10; aces–; }
return total;
}

function isBlackjack(cards) {
return cards.length === 2 && calculateHand(cards) === 21;
}

function renderCard(card, hidden, delay) {
var isRed = card && (card.suit === ‘♥’ || card.suit === ‘♦’);
var div = document.createElement(‘div’);
div.className = ‘card ‘ + (hidden ? ‘back’ : ‘front’) + ‘ ‘ + (isRed ? ‘red’ : ‘black’);
div.style.animationDelay = delay + ‘ms’;
if (hidden) {
div.innerHTML = ‘

‘;
} else {
div.innerHTML = ‘

‘;
}
return div;
}

function renderCards(container, cards, hideFirst) {
container.innerHTML = ”;
for (var i = 0; i 21 ? ‘ bust’ : ”));
}

function showScreen(name) {
var screens = document.querySelectorAll(‘.screen’);
for (var i = 0; i < screens.length; i++) {
screens[i].classList.remove('active');
}
document.getElementById(name + 'Screen').classList.add('active');
}

function createSnow() {
var container = document.getElementById('snow');
for (var i = 0; i < 25; i++) {
var flake = document.createElement('div');
flake.className = 'snowflake';
var size = 4 + Math.random() * 5;
flake.style.width = size + 'px';
flake.style.height = size + 'px';
flake.style.left = Math.random() * 100 + '%';
flake.style.animationDuration = (10 + Math.random() * 10) + 's';
flake.style.animationDelay = Math.random() * 12 + 's';
container.appendChild(flake);
}
}

function renderPlayers() {
var grid = document.getElementById('playersGrid');
grid.innerHTML = '';
for (var i = 0; i < PLAYERS.length; i++) {
(function(player) {
var btn = document.createElement('button');
btn.className = 'player-btn';
btn.onclick = function() { selectPlayer(player); };

var img = document.createElement('img');
img.className = 'player-img';
img.alt = player.name;
img.src = player.avatar;

var nameSpan = document.createElement('span');
nameSpan.className = 'name';
nameSpan.textContent = player.name;

btn.appendChild(img);
btn.appendChild(nameSpan);
grid.appendChild(btn);
})(PLAYERS[i]);
}
}

function randomizePrizes() {
availablePrizes = shuffle(PRIZES).slice(0, 6);
selectedPrize = null;
}

function selectPlayer(player) {
currentPlayer = player;
chips = 100;
bet = 25;
selectedPrize = null;
randomizePrizes();

document.getElementById('bettingAvatar').src = player.avatar;
document.getElementById('bettingName').textContent = player.name + "'s Turn";
updateBettingScreen();
showScreen('betting');
}

function updateBettingScreen() {
document.getElementById('bettingChips').textContent = chips;

var btns = document.getElementById('betButtons');
btns.innerHTML = '';
var amounts = [10, 25, 50, 100];
for (var i = 0; i < amounts.length; i++) {
(function(amount) {
if (amount 21) {
document.getElementById(‘actionButtons’).style.display = ‘none’;
setTimeout(function() { endHand(); }, 500);
}
}

function stand() {
document.getElementById(‘actionButtons’).style.display = ‘none’;
revealDealer();
}

function revealDealer() {
renderCards(document.getElementById(‘dealerCards’), dealerHand, false);
updateTotal(document.getElementById(‘dealerTotal’), dealerHand, false);

if (calculateHand(dealerHand) 21) {
chips -= bet;
message = ‘💥 Bust! Better luck next hand.’;
} else if (dTotal > 21) {
chips += bet;
message = ‘🎉 Dealer busts! You win!’;
won = true;
} else if (pBJ && !dBJ) {
chips += Math.floor(bet * 1.5);
message = ‘✨ BLACKJACK! You win 3:2!’;
won = true;
} else if (dBJ && !pBJ) {
chips -= bet;
message = ‘😔 Dealer has Blackjack.’;
} else if (pTotal > dTotal) {
chips += bet;
message = ‘🎉 You win!’;
won = true;
} else if (dTotal > pTotal) {
chips -= bet;
message = ‘😔 Dealer wins.’;
} else {
message = ‘🤝 Push! Bet returned.’;
}

if (chips < 0) chips = 0;
showResult(message, won);
}

function showResult(message, won) {
renderCards(document.getElementById('resultDealerCards'), dealerHand, false);
renderCards(document.getElementById('resultPlayerCards'), playerHand, false);
updateTotal(document.getElementById('resultDealerTotal'), dealerHand, false);
updateTotal(document.getElementById('resultPlayerTotal'), playerHand, false);
document.getElementById('resultPlayerLabel').textContent = currentPlayer.name;
document.getElementById('resultMessage').textContent = message;
document.getElementById('resultChips').textContent = chips;

document.getElementById('winContent').style.display = won ? 'block' : 'none';
document.getElementById('loseContent').style.display = won ? 'none' : 'block';
document.getElementById('spotChips').style.display = chips < 10 ? 'inline' : 'none';
document.getElementById('claimBtn').style.display = 'none';
selectedPrize = null;

if (won) renderPrizes();

showScreen('result');
}

function renderPrizes() {
var grid = document.getElementById('prizesGrid');
grid.innerHTML = '';
for (var i = 0; i < availablePrizes.length; i++) {
(function(prize) {
var btn = document.createElement('button');
btn.className = 'prize-card' + (selectedPrize && selectedPrize.id === prize.id ? ' selected' : '');
btn.onclick = function() { selectPrizeItem(prize); };
btn.innerHTML = '

‘ +
‘

‘;
grid.appendChild(btn);
})(availablePrizes[i]);
}
}

function selectPrizeItem(prize) {
selectedPrize = prize;
document.getElementById(‘claimBtn’).style.display = ‘inline-block’;
renderPrizes();
}

function tryDifferentPrizes() {
randomizePrizes();
if (chips < 10) chips = 100;
updateBettingScreen();
showScreen('betting');
}

function playAgain() {
if (chips < 10) chips = 100;
updateBettingScreen();
showScreen('betting');
}

function claimPrize() {
if (!selectedPrize) return;

document.getElementById('claimedTitle').textContent = 'Congratulations, ' + currentPlayer.name + '!';
document.getElementById('claimedIcon').textContent = selectedPrize.icon;
document.getElementById('claimedName').textContent = selectedPrize.name;
document.getElementById('claimedDesc').textContent = selectedPrize.description;
document.getElementById('claimedLink').href = selectedPrize.url;

showScreen('claimed');
}

function backToMenu() {
currentPlayer = null;
selectedPrize = null;
playerHand = [];
dealerHand = [];
showScreen('menu');
}

createSnow();
renderPlayers();