:root {
	--bg: #141110;
	--bg-2: #1c1714;
	--panel: #221c17;
	--line: rgba(215, 177, 127, .14);
	--text: #f2ece3;
	--muted: #ad9f8d;
	--wood: #d7b17f;
	--wood-2: #a07c50;
	--red: #d9463d;
	--red-dark: #7d2620;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Outfit", system-ui, sans-serif; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.script { font-family: "Waiting for the Sunrise", cursive; font-weight: 400; color: var(--wood); line-height: 1; }

/* ---------- Nav ---------- */
nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(20, 17, 16, .85);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.brand span { font-family: "Waiting for the Sunrise", cursive; font-size: 26px; color: var(--wood); }
nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: 15px; }
nav ul a { text-decoration: none; color: var(--muted); }
nav ul a:hover { color: var(--wood); }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	background:
		radial-gradient(ellipse at 70% 40%, rgba(255, 140, 50, .14), transparent 60%),
		linear-gradient(rgba(20,17,16,.75), rgba(20,17,16,.97)),
		url("../Assets/plywood.jpg") center / cover;
	padding: 80px 0 96px;
	overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.eyebrow { color: var(--wood-2); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.hero h1 { font-size: clamp(56px, 7vw, 92px); margin: 12px 0 18px; }
.lede { font-size: 19px; color: var(--muted); max-width: 440px; margin: 0 0 32px; }
.daily-card {
	display: flex; align-items: center; gap: 14px;
	max-width: 440px; margin-top: 20px; padding: 12px 16px 12px 12px;
	border-radius: 16px; text-decoration: none;
	background: rgba(34, 28, 23, .85); border: 1px solid var(--line);
	transition: border-color .15s, transform .15s;
}
.daily-card:hover { border-color: var(--wood-2); transform: translateY(-2px); }
.daily-card-disc {
	flex: none; width: 40px; height: 40px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #f07a70, var(--red) 55%, var(--red-dark));
	box-shadow: 0 3px 0 #4e1511;
}
.daily-card-text { flex: 1; min-width: 0; }
.daily-card-text small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.daily-card-text b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-card-cta { flex: none; font-weight: 700; color: var(--wood); }
.daily-card.played .daily-card-cta { color: var(--muted); font-weight: 600; }
.nav-daily {
	display: none; text-decoration: none; font-weight: 600; font-size: 15px;
	padding: 7px 14px; border-radius: 999px; background: var(--red); color: #fff;
	box-shadow: 0 2px 0 var(--red-dark);
}
/* Mini Games page: a quiet outline button, so the board is what catches the eye */
.nav-daily.nav-app { background: none; color: var(--wood); border: 1px solid var(--wood-2); box-shadow: none; padding: 6px 13px; font-size: 14px; }
/* The app is Android only (class set in the page head) */
.ios .nav-app { display: none !important; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; color: var(--muted); font-size: 14px; }
.hero-meta b { color: var(--text); font-weight: 600; }
.hero-meta a { color: var(--wood); }
.phone {
	background: #0d0d0d;
	border-radius: 34px;
	padding: 12px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 2px #333;
	transform: rotate(-2deg);
	animation: phone-land .9s cubic-bezier(.2,.9,.3,1.2) both;
}
/* Match the gameplay video's 1920x864 size so nothing is cropped */
.phone video { display: block; width: 100%; aspect-ratio: 1920 / 864; object-fit: cover; border-radius: 24px; background: #000; }
@keyframes phone-land {
	from { opacity: 0; transform: translateY(40px) rotate(-6deg); }
	to { opacity: 1; transform: rotate(-2deg); }
}

.play-btn {
	display: inline-flex; align-items: center; gap: 12px;
	background: #000; color: #fff; text-decoration: none;
	border: 1px solid #555; border-radius: 12px;
	padding: 10px 20px 10px 14px;
	transition: transform .15s, border-color .15s;
}
.play-btn:hover { transform: translateY(-2px); border-color: var(--wood); }
.play-btn img { width: 30px; height: 30px; }
.play-btn small { display: block; font-size: 11px; opacity: .75; letter-spacing: .05em; }
.play-btn strong { display: block; font-size: 20px; line-height: 1.1; font-weight: 500; }

/* ---------- Quick stats ---------- */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.chip { padding: 28px 24px; border-left: 1px solid var(--line); }
.chip:first-child { border-left: 0; }
.chip b { display: block; font-size: 28px; font-weight: 800; color: var(--wood); line-height: 1.1; }
.chip span { color: var(--muted); font-size: 15px; }

/* ---------- Try a shot ---------- */
.try {
	padding: 96px 0;
	background: radial-gradient(ellipse at 70% 50%, rgba(255, 150, 60, .07), transparent 60%);
}
/* Desktop: what you need while shooting on the left, the board with its score strip under it on
   the right, rules and instructions below the left column. Phones stack it in the same order. */
.try-grid {
	display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 56px;
	grid-template-areas: "head board" "copy board" "help board";
	grid-template-rows: auto auto 1fr;
}
.try-head { grid-area: head; }
.try-copy { grid-area: copy; }
.try-help { grid-area: help; }
.try-grid .board-col { grid-area: board; align-self: start; max-width: 520px; width: 100%; margin: 0 auto; }
/* One compact row under the board: three numbers, then the icon buttons */
.board-col .scoreboard { flex-wrap: nowrap; gap: 8px; margin-top: 14px; }
.board-col .stat { flex: 1; min-width: 0; }
.board-col .ghost-btn { padding: 0 14px; font-size: 18px; }
.board-col .ghost-btn .btn-label { display: none; }
/* "Add to your home screen" card, under the score strip (phones only) */
.install-card {
	display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 4px 12px;
	margin-top: 12px; padding: 10px 8px 10px 12px; border-radius: 14px;
	background: var(--panel); border: 1px solid var(--line);
}
.install-card > img { border-radius: 10px; }
.install-text b { display: block; font-size: 15px; }
.install-text span { color: var(--muted); font-size: 13px; }
.install-btn { padding: 8px 16px; font-size: 14px; }
.install-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.install-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.try .install-how { grid-column: 1 / -1; margin: 4px 0 2px; font-size: 14px; color: var(--text); max-width: none; }
.try h2 { font-size: clamp(44px, 5.5vw, 64px); margin: 0 0 16px; }
.try p { color: var(--muted); font-size: 17px; margin: 0 0 20px; max-width: 440px; }
.mode-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 20px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.mode-tab {
	position: relative; border: 0; border-radius: 999px; padding: 8px 16px;
	background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.mode-tab:hover { color: var(--text); }
.mode-tab[aria-selected="true"] { background: var(--wood); color: #20160e; }
/* Trick shot level picker */
.levels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin: 0 0 16px; max-width: 440px; }
.lvl {
	display: grid; justify-items: center; align-content: center; gap: 0; min-height: 44px; padding: 4px 0;
	border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--text);
	font: inherit; font-weight: 700; font-size: 14px; line-height: 1.1; cursor: pointer;
}
.lvl:hover:not(:disabled) { border-color: var(--wood-2); }
.lvl:disabled { opacity: .45; cursor: default; font-size: 11px; }
/* "cleared", not "done": .done is the results card on the board */
.lvl.cleared { background: rgba(215, 177, 127, .1); }
.lvl.selected { border-color: var(--wood); box-shadow: 0 0 0 1px var(--wood); }
.lvl-s { font-size: 9px; color: #f5b942; letter-spacing: 0; min-height: 10px; }
.new-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
/* Last 7 days */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; max-width: 440px; }
.day {
	display: grid; justify-items: center; gap: 1px; padding: 7px 2px; border-radius: 12px;
	background: var(--panel); border: 1px solid var(--line); color: var(--muted);
	font: inherit; cursor: pointer; line-height: 1.2;
}
.day:hover { border-color: var(--wood-2); }
.day .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.day .dnum { font-size: 11px; opacity: .7; }
.day .dres { font-weight: 800; font-size: 14px; color: var(--wood); }
.day:not(.played) .dres { font-weight: 600; font-size: 12px; color: var(--text); }
.day.played { background: rgba(215, 177, 127, .1); }
.day.today .dow { color: var(--text); font-weight: 700; }
.day.selected { border-color: var(--wood); box-shadow: 0 0 0 1px var(--wood); }
.try .daily-date { font-size: 15px; color: var(--muted); font-weight: 500; }
.try .daily-title { margin: 0 0 4px; font-size: 20px; color: var(--text); }
.try .daily-title b { font-weight: 800; }
.try .daily-rules { font-size: 15px; }
.try .trick-stars { font-size: 14px; color: var(--wood); margin-top: -8px; }
.rules-copy { margin-bottom: 8px; }
.try .daily-tip { font-size: 14px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--wood); font: inherit; text-decoration: underline; cursor: pointer; }
.try .daily-next { font-size: 14px; color: var(--wood); margin-top: -8px; }
/* Results table */
.results { position: relative; margin: 0 0 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; max-width: 520px; }
.results summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.results summary span { color: var(--muted); font-weight: 500; }
/* The ⓘ legend for the shot icons */
.info-btn {
	display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: 1px;
	border-radius: 50%; border: 1px solid var(--muted); background: none; color: var(--muted);
	font: italic 700 11px/1 Georgia, "Times New Roman", serif; text-transform: none; cursor: pointer;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--text); border-color: var(--wood); }
.info-btn:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.info-pop {
	position: absolute; z-index: 5; width: 240px; max-width: calc(100% - 16px); padding: 12px 14px; border-radius: 12px;
	background: var(--bg); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 14px;
}
.info-pop ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; color: var(--muted); }
.info-pop li span { display: inline-block; width: 26px; }
.results-scroll { max-height: 260px; overflow: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.results-table th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 6px 6px 0; position: sticky; top: 0; background: var(--panel); }
.results-table td { padding: 7px 6px 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.results-table td:nth-child(3) { white-space: nowrap; letter-spacing: 1px; }
.results-table .late { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.try .results-note { font-size: 12px; margin: 10px 0 14px; }
.how { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.how li { display: flex; gap: 12px; align-items: baseline; }
.how li span { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--wood); }
.try .note { font-size: 14px; margin: -12px 0 24px; padding-left: 12px; border-left: 2px solid var(--line); }
.scoreboard { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 96px; }
.stat small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.lbl-short { display: none; }
.stat b { font-size: 26px; font-weight: 800; color: var(--wood); }
.ghost-btn .btn-label { margin-left: 6px; }
.ghost-btn { display: inline-flex; align-items: center; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 12px; padding: 0 16px; font: inherit; cursor: pointer; min-height: 44px; }
.ghost-btn:hover { color: var(--text); border-color: var(--wood-2); }

.board-wrap { position: relative; max-width: 520px; width: 100%; margin: 0 auto; aspect-ratio: 1; }
.board-wrap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
/* Vertical swipes scroll the page; touches on the disc are handled in crokinole.js */
#board { touch-action: pan-y; cursor: grab; }
#board.aiming { cursor: grabbing; }
.toast {
	position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
	font-family: "Waiting for the Sunrise", cursive; font-size: clamp(40px, 9vw, 72px); color: #fff;
	text-shadow: 0 3px 14px rgba(0,0,0,.7); pointer-events: none; opacity: 0; white-space: nowrap;
}
.toast.show { animation: toast 1.1s ease-out forwards; }
@keyframes toast {
	0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
	25% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
	75% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}
.done {
	position: absolute; inset: 12%; border-radius: 50%;
	display: none; place-items: center; text-align: center;
	background: rgba(20, 17, 16, .88); backdrop-filter: blur(3px);
	padding: 24px;
}
.done.show { display: grid; }
.done h3 { font-size: clamp(30px, 6vw, 44px); margin: 0; }
.done p { margin: 8px 0 16px; color: var(--muted); font-size: 15px; }
.done .play-btn { padding: 8px 16px 8px 12px; }
.done .play-btn strong { font-size: 17px; }
.done .done-emoji { margin: 6px 0 0; font-size: 20px; letter-spacing: 2px; color: var(--text); font-weight: 700; }
.share-btn {
	display: inline-block; border: 0; border-radius: 999px; padding: 10px 22px;
	background: var(--red); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
	box-shadow: 0 3px 0 var(--red-dark);
}
.share-btn:hover { filter: brightness(1.1); }
.done-actions { display: grid; justify-items: center; gap: 2px; }
.done .again { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* ---------- Home: daily challenge preview ---------- */
.daily-home { padding: 96px 0; background: radial-gradient(ellipse at 75% 50%, rgba(255, 150, 60, .08), transparent 60%); }
.daily-home-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.daily-home h2 { font-size: clamp(44px, 5.5vw, 64px); margin: 0 0 12px; }
.daily-home-lede { color: var(--muted); font-size: 17px; margin: 0 0 20px; max-width: 480px; }
.daily-home-today { padding: 14px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); max-width: 480px; margin-bottom: 16px; }
.daily-home-today small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.daily-home-today b { font-size: 20px; }
.daily-home-today p { margin: 2px 0 0; color: var(--muted); }
.daily-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 480px; margin-bottom: 12px; }
.daily-stats div { text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.daily-stats b { display: block; font-size: 24px; font-weight: 800; color: var(--wood); line-height: 1.1; }
.daily-stats small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.daily-home .week { max-width: 480px; }
a.day { text-decoration: none; }
.daily-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.daily-home-actions .share-btn { text-decoration: none; padding: 12px 24px; }
/* Other mini games, under the daily */
.more-games { margin-top: 28px; max-width: 480px; }
.more-games > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-card {
	display: grid; align-content: start; gap: 2px; padding: 12px; border-radius: 14px;
	background: var(--panel); border: 1px solid var(--line); text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.more-card:hover { border-color: var(--wood-2); transform: translateY(-2px); }
.more-card b { font-size: 15px; }
.more-card span:not(.more-icon) { color: var(--muted); font-size: 13px; line-height: 1.35; }
.more-card em { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--wood); }
.more-icon { width: 26px; height: 26px; border-radius: 50%; margin-bottom: 6px; }
.more-icon.gold { background: radial-gradient(circle at 35% 30%, #fff1b8, #e5b03c 55%, #8a5a10); box-shadow: 0 2px 0 #5c3c0a; }
.more-icon.red { background: radial-gradient(circle at 35% 30%, #f07a70, var(--red) 55%, var(--red-dark)); box-shadow: 0 2px 0 #4e1511; }
.more-icon.hole { background: radial-gradient(circle, #0b0806 45%, #2b1b10 70%, #e4cba4 72%); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.daily-home-board { display: block; max-width: 440px; width: 100%; margin: 0 auto; border-radius: 50%; transition: transform .2s; }
.daily-home-board:hover { transform: scale(1.02) rotate(-1deg); }
.daily-home-board canvas { display: block; width: 100%; height: auto; }

/* ---------- Play page ---------- */
.play-main { padding-top: 48px; }
.play-main h1 { font-size: clamp(48px, 6vw, 72px); margin: 0 0 16px; }
.app-promo { padding: 0 0 72px; }
.app-promo-card {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 20px 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
}
.app-promo-card > img { border-radius: 14px; }
.app-promo-text { flex: 1; min-width: 220px; }
.app-promo-text b { font-size: 19px; }
.app-promo-text p { margin: 4px 0 0; color: var(--muted); }
.app-promo-links { color: var(--muted); margin: 16px 0 0; }
.app-promo-links a { color: var(--wood); }

/* ---------- Play page: about the mini games ---------- */
.about-games { padding: 24px 0 72px; }
.about-games h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 0 0 8px; text-wrap: balance; }
.about-lede { color: var(--muted); font-size: 17px; max-width: 68ch; margin: 0 0 28px; }
.about-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; }
.about-grid > div { padding: 18px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.about-grid h3 { margin: 0 0 6px; font-size: 18px; }
.about-grid p { margin: 0; color: var(--muted); }
.about-faq-title { margin-bottom: 16px !important; }

/* ---------- Feature rows ---------- */
.rows { padding: 96px 0; display: grid; gap: 96px; }
.feat { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.feat.flip { grid-template-columns: 1fr 1.3fr; }
.feat.flip .media { order: 2; }
.media { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.media img { display: block; width: 100%; height: auto; }
.kicker { color: var(--red); font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.feat h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; margin: 8px 0 14px; font-weight: 800; }
.feat p { color: var(--muted); margin: 0 0 16px; font-size: 17px; }
.feat ul { list-style: none; padding: 0; margin: 0; }
.feat li { padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--line); }
.feat li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 2px 0 var(--red-dark); }

/* ---------- How to play ---------- */
.rules { padding: 96px 0; margin-top: 96px; background: var(--bg-2); border-block: 1px solid var(--line); }
.rules-head { text-align: center; margin-bottom: 56px; }
.rules-head h2 { font-size: clamp(44px, 5.5vw, 64px); margin: 0 0 12px; }
.rules-head p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 17px; }
.rules-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
/* min-width: 0 stops the canvas's pixel size from stretching the grid columns */
.rules-grid > *, .try .wrap > * { min-width: 0; }
.rules-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rules-caption { min-height: 3.2em; margin: 0; text-align: center; color: var(--text); font-size: 17px; }
.rules-controls { display: flex; justify-content: center; gap: 10px; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 10px; }
.step {
	position: relative; display: block; width: 100%; text-align: left;
	padding: 16px 18px 16px 66px; border-radius: 16px;
	background: transparent; border: 1px solid transparent; color: inherit; font: inherit;
	cursor: pointer; transition: background .2s, border-color .2s;
	counter-increment: step;
}
.step::before {
	content: counter(step);
	position: absolute; left: 16px; top: 16px;
	width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; color: #fff;
	background: radial-gradient(circle at 35% 30%, #555, #1d1d1d 55%, #000);
	box-shadow: 0 3px 0 #000;
	transition: background .2s, box-shadow .2s;
}
.step:hover { background: rgba(255,255,255,.03); }
.step.active { background: var(--panel); border-color: var(--line); }
.step.active::before {
	background: radial-gradient(circle at 35% 30%, #f07a70, var(--red) 55%, var(--red-dark));
	box-shadow: 0 3px 0 #4e1511;
}
.step:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.step-title { display: block; font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.step-text { display: block; color: var(--muted); }
.history { margin-top: 56px; padding: 22px 26px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
.history b { color: var(--text); }

/* ---------- Reviews ---------- */
.reviews { padding: 0 0 96px; }
.reviews-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.reviews-head h2 { font-size: clamp(44px, 5.5vw, 64px); margin: 0; }
.rating { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.rating:hover .rating-meta { color: var(--text); }
.rating-num { font-size: 48px; font-weight: 800; color: var(--wood); line-height: 1; }
.rating-meta { display: block; color: var(--muted); font-size: 14px; }
/* Gold stars drawn over grey ones, filled to --r out of 5 */
.stars { --size: 18px; position: relative; display: inline-block; width: max-content;font-size: var(--size); line-height: 1; letter-spacing: 2px; color: rgba(255,255,255,.18); }
.stars::before { content: "★★★★★"; }
.stars::after {
	content: "★★★★★"; position: absolute; left: 0; top: 0;
	width: calc(var(--r) / 5 * 100%); overflow: hidden; white-space: nowrap;
	color: #f5b942;
}
.rating .stars { --size: 22px; }
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.review {
	margin: 0; padding: 22px; border-radius: 16px;
	background: var(--panel); border: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 12px;
}
.review blockquote { margin: 0; flex: 1; color: var(--text); }
.review figcaption { color: var(--muted); font-size: 14px; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 96px; }
.faq h2 { font-size: clamp(44px, 5.5vw, 64px); margin: 0 0 24px; }
.faq-list { display: grid; gap: 10px; max-width: 820px; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--wood); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 18px; color: var(--muted); }
.try .eyebrow { margin-bottom: 6px; }

/* ---------- Finale: the flick ---------- */
.finale {
	--d: clamp(48px, 9vw, 72px);
	position: relative; overflow: hidden;
	height: clamp(560px, 80vh, 720px);
	background:
		radial-gradient(circle at 50% 50%,
			transparent 0 calc(var(--d) * 2.6),
			rgba(30,20,12,.55) calc(var(--d) * 2.6) calc(var(--d) * 2.6 + 2px),
			transparent calc(var(--d) * 2.6 + 2px) calc(var(--d) * 5.2),
			rgba(30,20,12,.55) calc(var(--d) * 5.2) calc(var(--d) * 5.2 + 2px),
			transparent calc(var(--d) * 5.2 + 2px)),
		radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.18), rgba(70,40,15,.35) 75%),
		url("../Assets/plywood.jpg") center / 600px;
}
.finale::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: linear-gradient(var(--bg), transparent 18%, transparent 82%, var(--bg));
}
.finale .hole {
	position: absolute; left: 50%; top: 50%;
	width: calc(var(--d) * 1.15); height: calc(var(--d) * 1.15);
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle, #0b0806 55%, #2b1b10);
	box-shadow: inset 0 6px 14px rgba(0,0,0,.9), 0 0 0 3px #3b2414;
}
.finale .peg {
	position: absolute; width: calc(var(--d) * .22); height: calc(var(--d) * .22); border-radius: 50%;
	background: #1a1a1a; box-shadow: 1px 3px 0 rgba(0,0,0,.4); transform: translate(-50%, -50%);
}
.finale .disc {
	position: absolute; left: 50%; top: 50%; z-index: 2;
	width: var(--d); height: var(--d); border-radius: 50%;
	display: grid; place-items: center;
	color: #fff; font-weight: 800; font-size: calc(var(--d) * .27);
	background: radial-gradient(circle at 35% 30%, #555, #1d1d1d 55%, #000);
	box-shadow: 0 5px 0 #000, 0 10px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.06);
}
.finale .disc.red {
	background: radial-gradient(circle at 35% 30%, #f07a70, var(--red) 55%, var(--red-dark));
	box-shadow: 0 5px 0 #4e1511, 0 10px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.1);
}
/* Without JS (or with reduced motion) the shooter sits in the hole and the black discs rest to the sides */
.finale .disc.red { transform: translate(-50%, -50%) scale(.8); filter: brightness(.65); }
.finale .disc[data-i="0"] { transform: translate(-50%, -50%) translate(-36vw, 40%); }
.finale .disc[data-i="1"] { transform: translate(-50%, -50%) translate(0, -100vh); }  /* knocked off the top */
.finale .disc[data-i="2"] { transform: translate(-50%, -50%) translate(36vw, 40%); }
.finale-copy { position: absolute; left: 0; right: 0; z-index: 3; text-align: center; padding: 0 16px; }
.finale-copy.top { top: 9%; }
.finale-copy.bottom { bottom: 9%; }
.finale-copy h2 { font-size: clamp(44px, 7vw, 80px); color: #2b1a0e; text-shadow: 0 1px 0 rgba(255,255,255,.35); margin: 0; }
.finale-copy p { margin: 6px 0 0; color: #4a3322; font-weight: 500; }
.reveal { transition: opacity .6s ease, transform .6s ease; }
.armed .reveal { opacity: 0; transform: translateY(12px); }
.armed.played .reveal { opacity: 1; transform: none; }
.flick-again {
	position: absolute; right: 16px; bottom: 16px; z-index: 4;
	background: rgba(20,17,16,.7); color: #e9dccb; border: 0; border-radius: 999px;
	padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.flick-again:hover { background: rgba(20,17,16,.9); }
.flick-score {
	position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
	font-family: "Waiting for the Sunrise", cursive; font-size: calc(var(--d) * .9);
	color: #fff; text-shadow: 0 3px 12px rgba(0,0,0,.6); opacity: 0;
	transform: translate(-50%, -50%);
}

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 28px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
footer .social { display: flex; gap: 18px; }
footer .social a { text-decoration: none; }
footer .social a:hover { color: var(--text); }
.other {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 6px 14px 6px 6px; border-radius: 999px;
	background: var(--panel); border: 1px solid var(--line);
	text-decoration: none; color: var(--muted);
}
.other:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.other .ic { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #4f7cff, #7b4dff); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
.other b { color: var(--text); font-weight: 600; }

@media (min-width: 861px) and (max-width: 1100px) {
	.about-grid { grid-template-columns: 1fr 1fr; }
	.review-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.wrap { padding: 0 16px; }
	nav ul { display: none; }
	.hero { padding: 48px 0 64px; }
	.hero .wrap { grid-template-columns: 1fr; gap: 40px; }
	.phone { border-radius: 26px; padding: 8px; }
	.phone video { border-radius: 18px; }
	.chips { grid-template-columns: 1fr 1fr; }
	.chip:nth-child(3) { border-left: 0; }
	.chip:nth-child(n+3) { border-top: 1px solid var(--line); }
	.try { padding: 56px 0; }
	.rules-grid { grid-template-columns: 1fr; gap: 32px; }
	.nav-daily { display: inline-block; }
	/* Phones: title and tabs, then the board and score strip right away so the disc you shoot is on
	   the first screen, then the puzzle, the install card and the instructions */
	.try-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "board" "stats" "copy" "install" "help"; grid-template-rows: none; }
	.try-grid .board-col { display: contents; }
	.try-grid .board-wrap { grid-area: board; max-width: min(520px, calc(100vh - 230px)); max-width: min(520px, calc(100svh - 230px)); min-width: 240px; }
	.try-grid .scoreboard { grid-area: stats; }
	.try-grid .install-card { grid-area: install; margin: 0 0 4px; }
	.try-copy { margin-top: 16px; }
	.play-main .eyebrow { display: none; }
	.try h2 { margin-bottom: 12px; }
	/* Four modes: two rows of two on phones */
	.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; width: 100%; margin-bottom: 14px; }
	.mode-tab { border-radius: 12px; padding: 9px 8px; }
	.levels { gap: 4px; max-width: none; }
	.try p { margin-bottom: 10px; font-size: 16px; }
	.try .daily-rules, .try .daily-tip { font-size: 14px; }
	.try .daily-next { margin-top: 0; }
	.week { gap: 4px; max-width: none; }
	.day { padding: 6px 0; border-radius: 10px; }
	.day .dow { font-size: 10px; }
	.results-table { font-size: 13px; }
	.board-col .scoreboard { gap: 6px; margin-top: 12px; }
	.stat { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 10px; }
	.stat small { font-size: 10px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.stat b { font-size: 20px; }
	.lbl-long { display: none; }
	.lbl-short { display: inline; }
	.ghost-btn { padding: 0 12px; }
	.ghost-btn .btn-label { display: none; }
	.try-help { margin-top: 20px; }
	.try .note { margin-top: 0; }
	/* Results card gets more room on a small board */
	.done { inset: 5%; padding: 16px; }
	.done h3 { font-size: 30px; }
	.done p { margin: 6px 0 10px; font-size: 14px; }
	.done .done-emoji { font-size: 18px; }
	.feat, .feat.flip { grid-template-columns: 1fr; gap: 24px; }
	.feat.flip .media { order: 0; }
	.rows { padding: 64px 0; gap: 64px; }
	.rules { padding: 64px 0; margin-top: 64px; }
	.daily-home { padding: 56px 0; }
	.daily-home-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.daily-home-board { order: -1; max-width: 300px; }
	.daily-stats b { font-size: 20px; }
	.more-card { padding: 10px; }
	.more-card span:not(.more-icon) { font-size: 12px; }
	.play-main { padding-top: 12px; }
	.play-main h1 { font-size: 40px; margin-bottom: 6px; line-height: 1.1; }
	.app-promo { padding-bottom: 56px; }
	.about-games { padding-bottom: 56px; }
	.about-grid { grid-template-columns: minmax(0, 1fr); }
	.app-promo-card { padding: 16px; }
	.reviews { padding-bottom: 64px; }
	.faq { padding-bottom: 64px; }
	.review-grid { grid-template-columns: 1fr; }
	.step { padding-left: 62px; }
}

/* Phones wide enough for the four mode tabs in one row, which leaves the score strip on the first screen too */
@media (min-width: 370px) and (max-width: 860px) {
	.mode-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mode-tab { padding: 9px 2px; font-size: 14px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.phone { animation: none; }
}