/* ===========================================================
   DEFENSIVE RESET — neutralises theme/page-builder global styles
   =========================================================== */
.fr-game button{ all: unset; box-sizing: border-box !important; cursor: pointer; }
.fr-game img{ max-width: none !important; border: none !important; box-shadow: none !important; vertical-align: top !important; }
.fr-game, .fr-game *{ box-sizing: border-box !important; }
.fr-player-overlay{ display: none; }

.fr-game{
	--fr-peach-top: #f9d9ae;
	--fr-peach-bottom: #f3bd83;
	--fr-ink: #2c3a42;
	--fr-wood-dark: #3c2a1c;
	--fr-wood-mid: #6b4a30;
	--fr-wood-light: #8a6740;
	--fr-green: #4caf6d;
	--fr-red: #e0524a;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--fr-ink);
	max-width: 620px;
	margin: 0 auto;
}

/* ---------------- launch card ---------------- */
.fr-launch-card{
	background: linear-gradient(180deg, var(--fr-peach-top), var(--fr-peach-bottom));
	border-radius: 16px;
	padding: 36px 28px;
	text-align: center;
	box-shadow: 0 10px 26px rgba(60,42,28,0.18);
	border: 2px solid rgba(60,42,28,0.12);
}
.fr-launch-thumb{
	width: 78px; height: 78px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	display: flex; align-items: center; justify-content: center;
	color: var(--fr-wood-mid);
}
.fr-launch-title{ font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.fr-launch-sub{ font-size: 14px; color: rgba(44,58,66,0.75); margin: 0 0 20px; }
.fr-game .fr-play-btn{
	display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(180deg, var(--fr-wood-light), var(--fr-wood-mid));
	color: #fff; font-weight: 700; font-size: 15px;
	padding: 12px 26px; border-radius: 999px;
	box-shadow: 0 4px 0 var(--fr-wood-dark), 0 8px 16px rgba(0,0,0,0.2);
	transition: transform 0.12s ease;
}
.fr-play-btn:hover{ transform: translateY(-2px); }
.fr-play-btn:active{ transform: translateY(1px); box-shadow: 0 2px 0 var(--fr-wood-dark); }

/* ---------------- fullscreen player overlay ---------------- */
.fr-player-overlay{
	position: fixed !important; inset: 0 !important; z-index: 999990 !important;
	background: linear-gradient(180deg, var(--fr-peach-top) 0%, var(--fr-peach-bottom) 100%) !important;
	flex-direction: column !important;
	padding: 22px 5vw 40px !important;
	overflow-y: auto !important;
}
.fr-player-overlay.open{ display: flex !important; }

.fr-game .fr-close-btn{
	position: absolute; top: 14px; right: 16px;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(60,42,28,0.14);
	color: var(--fr-ink); font-size: 20px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	z-index: 5;
}
.fr-close-btn:hover{ background: rgba(60,42,28,0.24); }

.fr-topbar{
	display: flex; align-items: center; gap: 18px;
	justify-content: flex-end;
	padding-right: 46px;
	margin-bottom: 6px;
}
.fr-score{ font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 6px; }
.fr-score-num{ display: inline-block; }
.fr-score-num.bump{ animation: fr-score-bump 0.45s ease; }
.fr-score-icon-wrap.bump{ animation: fr-icon-bump 0.45s ease; }
@keyframes fr-score-bump{
	0%   { transform: scale(1); }
	35%  { transform: scale(1.5); color: var(--fr-green); }
	100% { transform: scale(1); }
}
@keyframes fr-icon-bump{
	0%   { transform: scale(1); }
	35%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* ---------------- score "nut" fill gauge ---------------- */
.fr-score-icon-wrap{
	--pct: 0%;
	position: relative;
	width: 26px; height: 26px;
	flex: 0 0 auto;
}
.fr-nut-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.fr-nut-svg ellipse{ fill: currentColor; }
.fr-nut-bg{ color: #8a6740; }
.fr-nut-fill{
	color: #f0b429;
	clip-path: inset( calc(100% - var(--pct)) 0 0 0 );
	transition: clip-path 0.5s ease;
}
.fr-progress{ font-weight: 800; font-size: 17px; min-width: 52px; text-align: center; }

.fr-timer-badge{
	--pct: 0%;
	width: 26px; height: 26px; border-radius: 50%;
	background: #c7c7c7;
	flex: 0 0 auto;
	transition: background 0.4s ease;
}
.fr-timer-badge.active{
	background: conic-gradient(var(--fr-green) var(--pct), #c7c7c7 0);
}

.fr-heading{
	text-align: center;
	font-size: 24px; font-weight: 800;
	margin: 6px 0 22px;
	min-height: 30px;
}

.fr-stage{
	flex: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	gap: 22px;
	max-width: 520px;
	margin: 0 auto;
	width: 100%;
}

/* ---------------- countdown ---------------- */
.fr-countdown{
	font-size: 92px; font-weight: 800; color: var(--fr-ink);
	margin-top: 60px;
	animation: fr-pop 0.35s ease;
}
@keyframes fr-pop{ from{ transform: scale(0.6); opacity:0; } to{ transform: scale(1); opacity:1; } }

/* ---------------- photo frame ---------------- */
.fr-photo-frame{
	position: relative;
	width: min(320px, 78vw);
	aspect-ratio: 1 / 1;
	padding: 14px;
	background: linear-gradient(145deg, var(--fr-wood-light), var(--fr-wood-dark));
	border-radius: 6px;
	box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.fr-photo-frame::before{
	content: "";
	position: absolute; inset: 8px;
	border: 10px solid #fbe8cf;
	border-radius: 2px;
	pointer-events: none;
}
.fr-photo-frame img{
	width: 100%; height: 100%; object-fit: cover;
	display: block;
	position: relative;
	padding: 10px;
	background: #fbe8cf;
}

.fr-mark{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fr-mark::after{ content: ""; width: 62%; height: 62%; opacity: 0; transform: scale(0.6); transition: none; }
.fr-mark.show-check::after{
	content: "\2713";
	opacity: 1; transform: scale(1);
	font-size: 220px; line-height: 1; color: var(--fr-green);
	font-weight: 900;
	text-shadow: 0 0 0 var(--fr-green);
	animation: fr-mark-in 0.28s ease;
}
.fr-mark.show-cross::after{
	content: "\2716";
	opacity: 1; transform: scale(1);
	font-size: 190px; line-height: 1; color: var(--fr-red);
	font-weight: 900;
	animation: fr-mark-in 0.28s ease;
}
@keyframes fr-mark-in{ from{ transform: scale(0.4); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

/* ---------------- nameplate (memorize phase) ---------------- */
.fr-nameplate{
	background: linear-gradient(180deg, var(--fr-wood-mid), var(--fr-wood-dark));
	border: 3px solid var(--fr-wood-light);
	border-radius: 8px;
	padding: 16px 34px;
	color: #fff;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 1px;
	text-align: center;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -3px 6px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.18);
}

/* ---------------- quiz answer options ---------------- */
.fr-options{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	width: 100%;
	max-width: 420px;
}
.fr-game .fr-option{
	position: relative;
	background: linear-gradient(180deg, var(--fr-wood-light), var(--fr-wood-mid));
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.4px;
	padding: 16px 10px;
	border-radius: 999px;
	text-align: center;
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -4px 8px rgba(0,0,0,0.3), 0 4px 0 rgba(0,0,0,0.15);
	transition: transform 0.1s ease;
}
.fr-option:not(:disabled):hover{ transform: translateY(-2px); }
.fr-option:disabled{ cursor: default; }
.fr-option.correct{
	background: linear-gradient(180deg, #6bc98a, var(--fr-green));
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 0 0 3px rgba(76,175,109,0.4);
}
.fr-option.wrong{
	background: linear-gradient(180deg, #ec756c, var(--fr-red));
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 0 0 3px rgba(224,82,74,0.35);
}

/* ---------------- loading / error ---------------- */
.fr-loading, .fr-error{
	margin-top: 60px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: var(--fr-ink);
}
.fr-error{ color: var(--fr-red); }

/* ---------------- results screen ---------------- */
.fr-results{
	background: #fff;
	border-radius: 20px;
	padding: 42px 30px;
	text-align: center;
	max-width: 400px;
	margin: 30px auto 0;
	box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}
.fr-stars{ margin-bottom: 18px; }
.fr-star{ font-size: 34px; color: #d8d8d8; margin: 0 3px; }
.fr-star.filled{ color: #d99a2b; }
.fr-results-text{ font-size: 16px; color: var(--fr-ink); margin: 0 0 26px; line-height: 1.5; }
.fr-game .fr-play-again-btn{
	display: inline-block;
	background: linear-gradient(180deg, #6bc98a, var(--fr-green));
	color: #fff; font-weight: 700; font-size: 16px;
	padding: 13px 34px; border-radius: 999px;
	box-shadow: 0 4px 0 #388a54, 0 8px 16px rgba(0,0,0,0.18);
}
.fr-play-again-btn:hover{ transform: translateY(-2px); }

/* ---------------- small screens ---------------- */
@media (max-width: 480px){
	.fr-heading{ font-size: 19px; }
	.fr-countdown{ font-size: 70px; }
	.fr-nameplate{ font-size: 20px; padding: 13px 22px; }
	.fr-option{ font-size: 13px; padding: 14px 8px; }
}