Bourbon Selector Puzzle • Bourbon Fortune Wheel
:root {
–bg-deep-blue: #050b20;
–bg-emerald: #0c423c;
–tile-off: #0a1533;
–tile-on: #33ffb8;
–tile-border: #66ffe0;
–tile-text: #021020;
–accent-gold: #f7c948;
–accent-soft: #a2fff0;
–wheel-border: #ffffff;
–button-bg: #1f8f78;
–button-bg-hover: #28b395;
–button-text: #ffffff;
–text-main: #f5f7ff;
–text-muted: #c9d2ff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
background: radial-gradient(circle at top, #132a70 0, #050b20 40%, #020512 100%);
color: var(–text-main);
padding: 20px 10px;
}
.game-shell {
max-width: 1100px;
margin: 0 auto;
background: radial-gradient(circle at top, #19385e 0, #050b20 55%, #020512 100%);
border-radius: 18px;
border: 2px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
padding: 20px;
}
@media (min-width: 768px) {
.game-shell {
padding: 32px 40px;
}
}
.game-header {
text-align: center;
margin-bottom: 28px;
}
.game-badge {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #1f8f78, #27b6ff);
color: var(–text-main);
margin-bottom: 10px;
}
.game-title {
font-size: 1.8rem;
line-height: 1.15;
margin-bottom: 8px;
color: #ffffff;
text-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
}
.game-subtitle {
font-size: 0.93rem;
color: var(–text-muted);
max-width: 640px;
margin: 0 auto;
}
.layout-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 30px;
}
@media (min-width: 900px) {
.layout-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 28px;
}
}
/* Puzzle board */
.puzzle-panel {
background: radial-gradient(circle at top left, #29658a 0, #051229 45%, #010713 100%);
border-radius: 16px;
padding: 18px 16px 18px;
border: 1px solid rgba(163, 255, 243, 0.35);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
position: relative;
overflow: hidden;
}
.panel-title {
font-size: 1rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
color: var(–accent-soft);
}
.panel-title span {
color: var(–accent-gold);
}
.board-rows {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 18px;
}
.board-row {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: nowrap;
}
.board-tile {
width: 34px;
height: 44px;
border-radius: 6px;
border: 2px solid var(–tile-border);
background: radial-gradient(circle at top, #0f2b60 0, var(–tile-off) 50%, #02061a 100%);
box-shadow:
0 0 8px rgba(9, 255, 197, 0.65),
inset 0 0 10px rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
color: transparent;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.board-tile.space {
border-color: transparent;
background: transparent;
box-shadow: none;
width: 16px;
}
.board-tile.revealed {
background: radial-gradient(circle at top, #8effe1 0, var(–tile-on) 55%, #1be5a3 100%);
color: var(–tile-text);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
.board-tile.revealed::after {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 40%);
opacity: 0.7;
pointer-events: none;
}
.board-helper {
font-size: 0.8rem;
color: var(–text-muted);
text-align: center;
margin-bottom: 10px;
}
.puzzle-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.puzzle-button {
border: none;
border-radius: 999px;
padding: 9px 18px;
font-size: 0.9rem;
font-weight: 600;
background: linear-gradient(135deg, var(–button-bg), #2bb7ff);
color: var(–button-text);
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
text-align: center;
white-space: normal;
}
.puzzle-button:hover {
background: linear-gradient(135deg, var(–button-bg-hover), #35d1ff);
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}
.puzzle-button:active {
transform: translateY(0);
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.55);
}
/* Wheel panel */
.wheel-panel {
background: radial-gradient(circle at top right, #206b58 0, #031921 45%, #01080c 100%);
border-radius: 16px;
padding: 18px 16px 16px;
border: 1px solid rgba(255, 215, 128, 0.45);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
position: relative;
overflow: hidden;
}
.wheel-layout {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.wheel-wrapper {
position: relative;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
border: 6px solid var(–wheel-border);
background:
radial-gradient(circle at center, #111 0, #0b1825 38%, #000 40%, #111 60%, #000 100%),
conic-gradient(
from 0deg,
#ff4d5c 0 15deg,
#ffb347 15deg 30deg,
#ffe761 30deg 45deg,
#7dffb3 45deg 60deg,
#6ef1ff 60deg 75deg,
#759bff 75deg 90deg,
#ff7ff0 90deg 105deg,
#ff4d5c 105deg 120deg,
#ffb347 120deg 135deg,
#ffe761 135deg 150deg,
#7dffb3 150deg 165deg,
#6ef1ff 165deg 180deg,
#759bff 180deg 195deg,
#ff7ff0 195deg 210deg,
#ff4d5c 210deg 225deg,
#ffb347 225deg 240deg,
#ffe761 240deg 255deg,
#7dffb3 255deg 270deg,
#6ef1ff 270deg 285deg,
#759bff 285deg 300deg,
#ff7ff0 300deg 315deg,
#ff4d5c 315deg 330deg,
#ffb347 330deg 345deg,
#ffe761 345deg 360deg
);
box-shadow:
0 0 20px rgba(255, 255, 255, 0.25),
0 20px 35px rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 4s cubic-bezier(0.12, 0.01, 0.08, 1);
}
.wheel-center {
width: 82px;
height: 82px;
border-radius: 50%;
background: radial-gradient(circle at top, #ffe761 0, #f0a034 55%, #7d4c00 100%);
border: 4px solid rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #3c1b00;
box-shadow:
0 0 8px rgba(255, 255, 255, 0.7),
inset 0 0 8px rgba(0, 0, 0, 0.85);
padding: 10px;
}
.wheel-pointer {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 26px solid #ffe761;
filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7));
}
.wheel-shadow {
position: absolute;
inset: auto 16px -6px 16px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.7), transparent 70%);
opacity: 0.9;
pointer-events: none;
}
.spin-button {
margin-top: 4px;
}
.clue-box {
background: rgba(0, 0, 0, 0.4);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 10px 12px;
font-size: 0.9rem;
color: var(–text-muted);
text-align: left;
max-width: 380px;
}
.clue-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(–accent-soft);
margin-bottom: 4px;
}
/* Flavor and answer section */
.info-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 20px;
margin-top: 8px;
align-items: flex-start;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.info-grid {
grid-template-columns: 1fr;
}
}
.info-panel {
background: radial-gradient(circle at bottom, #13313c 0, #020814 70%);
border-radius: 14px;
padding: 14px 16px;
border: 1px solid rgba(162, 255, 240, 0.28);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.75);
}
.info-heading {
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 8px;
color: var(–accent-soft);
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.flavor-pill {
font-size: 0.8rem;
padding: 4px 9px;
border-radius: 999px;
background: rgba(12, 169, 138, 0.18);
border: 1px solid rgba(194, 255, 244, 0.5);
color: var(–accent-soft);
backdrop-filter: blur(6px);
}
.info-body {
font-size: 0.9rem;
color: var(–text-muted);
line-height: 1.5;
}
.answer-panel {
margin-top: 12px;
text-align: center;
display: none;
}
.answer-panel.visible {
display: block;
}
.answer-label {
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–accent-gold);
margin-bottom: 4px;
}
.answer-name {
font-size: 1.2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 6px;
}
.answer-subtext {
font-size: 0.9rem;
color: var(–text-muted);
margin-bottom: 10px;
}
.answer-link {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #ffb347, #ffe761);
color: #3d2200;
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8);
transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
white-space: normal;
}
.answer-link:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85);
}
.answer-link:active {
transform: translateY(0);
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.75);
}
Puzzle board bourbon answer
Click reveal to flip tiles just like the letter board on your favorite game show.
Reveal a letter
Solve puzzle and show bottle
Clue wheel spin for hints
Spin for a bourbon clue
Spin result
Spin the wheel for tasting notes, proof and backstory hints about this pour.
Flavor profile
This Kentucky single barrel bourbon comes from the Wild Turkey team and is known for a rich,
full style. Expect warm oak and vanilla at the start, then caramel and spice, with touches of
mint and cinnamon in the background. The finish leans long, earthy and smooth.
Caramel
Rye spice
Tobacco
Leather
Butter toffee
Mint
Cinnamon
Earthy finish
Stats to help your guess
This bourbon is bottled at 50.5 percent ABV and comes from an eight year single barrel
program at Wild Turkey in Kentucky. The mash bill uses a high corn base with rye and malted
barley and the spirit rests in number four alligator char new oak barrels.
Country: United States
Region: Kentucky
Style: Single barrel bourbon
Proof: 101
The bourbon behind the board
Wild Turkey Kentucky Spirit Single Barrel Bourbon
Use this as the answer key for your puzzle or send players to explore the bottle
once they solve the board.
View the bottle details on Flaviar
(function () {
const tiles = Array.from(document.querySelectorAll(“.board-tile”))
.filter(tile => !tile.classList.contains(“space”));
const revealButton = document.getElementById(“revealLetterBtn”);
const solveButton = document.getElementById(“solvePuzzleBtn”);
const answerPanel = document.getElementById(“answerPanel”);
const wheel = document.getElementById(“fortuneWheel”);
const spinButton = document.getElementById(“spinBtn”);
const clueBox = document.getElementById(“clueBox”);
const clueLabel = document.getElementById(“clueLabel”);
const clueText = document.getElementById(“clueText”);
let spinning = false;
let currentRotation = 0;
const clues = [
{
label: “Strength hint”,
text: “Your mystery bourbon clocks in at 50.5 percent ABV, so expect a full and focused sip.”
},
{
label: “Age hint”,
text: “Think of an eight year program of single barrels resting in number four alligator char oak.”
},
{
label: “Flavor hint”,
text: “Caramel, tobacco, leather and butter toffee show up, with mint and cinnamon on the back end.”
},
{
label: “Origin hint”,
text: “Look to Kentucky and a famous hill where a turkey once ruled the label.”
},
{
label: “Style hint”,
text: “This is a straight bourbon from one barrel at a time, not a blend of multiple casks.”
},
{
label: “Family hint”,
text: “Two generations of Russell distillers keep an eye on this one.”
}
];
function revealRandomTile() {
const hiddenTiles = tiles.filter(tile => !tile.classList.contains(“revealed”));
if (!hiddenTiles.length) {
return;
}
const pick = hiddenTiles[Math.floor(Math.random() * hiddenTiles.length)];
pick.textContent = pick.dataset.letter || “”;
pick.classList.add(“revealed”);
}
function revealAllTiles() {
tiles.forEach(tile => {
if (!tile.classList.contains(“space”)) {
tile.textContent = tile.dataset.letter || “”;
tile.classList.add(“revealed”);
}
});
}
revealButton.addEventListener(“click”, function () {
revealRandomTile();
});
solveButton.addEventListener(“click”, function () {
revealAllTiles();
answerPanel.classList.add(“visible”);
answerPanel.scrollIntoView({ behavior: “smooth”, block: “center” });
});
function spinWheel() {
if (spinning) return;
spinning = true;
const spinAmount = 720 + Math.floor(Math.random() * 1440);
currentRotation = (currentRotation + spinAmount) % 3600;
wheel.style.transform = “rotate(” + currentRotation + “deg)”;
setTimeout(function () {
spinning = false;
const clue = clues[Math.floor(Math.random() * clues.length)];
clueLabel.textContent = clue.label;
clueText.textContent = clue.text;
}, 4100);
}
spinButton.addEventListener(“click”, spinWheel);
})();
Bourbon Selector 