/*
 * Food Picker — front-end UI.
 * Clean, editorial layout (NYT-ish) on a glassy surface. Light + dark (OS
 * default + in-app toggle). The widget is a FIXED phone-screen frame so it
 * never resizes between modes and maps 1:1 to the future native app.
 */

.fp-app {
	/* Light theme (default) */
	--ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--serif: "Fraunces", Georgia, "Times New Roman", serif;

	--fg: #17161c;
	--muted: #6c6b78;
	--bg-grad: linear-gradient( 170deg, #fdf4ee 0%, #f2eef6 55%, #ecf3f4 100% );
	--frame-border: rgba( 0, 0, 0, 0.06 );
	--glass: rgba( 255, 255, 255, 0.5 );
	--glass-2: rgba( 255, 255, 255, 0.62 );
	--glass-hover: rgba( 255, 255, 255, 0.9 );
	--glass-border: rgba( 255, 255, 255, 0.7 );
	--sheet-bg: rgba( 255, 255, 255, 0.82 );
	--sheet-shadow: rgba( 40, 30, 60, 0.22 );
	--scrim: rgba( 25, 18, 35, 0.28 );
	--shadow: 0 24px 60px rgba( 40, 30, 60, 0.16 );

	--accent: #ff5a4d;
	--accent-soft-bg: rgba( 255, 90, 77, 0.14 );
	--accent-soft-fg: #d63a2c;
	--pos: #12b76a;
	--pos-bg: rgba( 18, 183, 106, 0.14 );
	--pos-fg: #0a8a4f;
	--neg: #e0453a;
	--neg-bg: rgba( 224, 69, 58, 0.14 );

	color: var(--fg);
	font-family: var(--ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.4;
}

.fp-app[data-theme="dark"],
.fp-app:not( [data-theme="light"] ) {
	/* placeholder — real dark tokens applied below via specific selectors */
}

.fp-app[data-theme="dark"] {
	--fg: #ffffff;
	--muted: #a2a0ad;
	--bg-grad: linear-gradient( 170deg, #1b1622 0%, #15141c 55%, #111218 100% );
	--frame-border: rgba( 255, 255, 255, 0.09 );
	--glass: rgba( 255, 255, 255, 0.07 );
	--glass-2: rgba( 255, 255, 255, 0.1 );
	--glass-hover: rgba( 255, 255, 255, 0.17 );
	--glass-border: rgba( 255, 255, 255, 0.12 );
	--sheet-bg: rgba( 32, 29, 40, 0.82 );
	--sheet-shadow: rgba( 0, 0, 0, 0.55 );
	--scrim: rgba( 0, 0, 0, 0.5 );
	--shadow: 0 24px 70px rgba( 0, 0, 0, 0.55 );
	--accent-soft-bg: rgba( 255, 90, 77, 0.22 );
	--accent-soft-fg: #ff8f83;
	--pos-bg: rgba( 18, 183, 106, 0.2 );
	--pos-fg: #4ade80;
	--neg-bg: rgba( 224, 69, 58, 0.2 );
}

@media ( prefers-color-scheme: dark ) {
	.fp-app:not( [data-theme="light"] ) {
		--fg: #ffffff;
		--muted: #a2a0ad;
		--bg-grad: linear-gradient( 170deg, #1b1622 0%, #15141c 55%, #111218 100% );
		--frame-border: rgba( 255, 255, 255, 0.09 );
		--glass: rgba( 255, 255, 255, 0.07 );
		--glass-2: rgba( 255, 255, 255, 0.1 );
		--glass-hover: rgba( 255, 255, 255, 0.17 );
		--glass-border: rgba( 255, 255, 255, 0.12 );
		--sheet-bg: rgba( 32, 29, 40, 0.82 );
		--sheet-shadow: rgba( 0, 0, 0, 0.55 );
		--scrim: rgba( 0, 0, 0, 0.5 );
		--shadow: 0 24px 70px rgba( 0, 0, 0, 0.55 );
		--accent-soft-bg: rgba( 255, 90, 77, 0.22 );
		--accent-soft-fg: #ff8f83;
		--pos-bg: rgba( 18, 183, 106, 0.2 );
		--pos-fg: #4ade80;
		--neg-bg: rgba( 224, 69, 58, 0.2 );
	}
}

.fp-app *,
.fp-app *::before,
.fp-app *::after { box-sizing: border-box; }

/* ---------- fixed phone frame ---------- */
.fp-root {
	position: relative;
	width: 100%;
	max-width: 400px;
	height: min( 760px, 84vh );
	min-height: 560px;
	margin: 1.5em auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 30px;
	background: var(--bg-grad);
	border: 1px solid var(--frame-border);
	box-shadow: var(--shadow);
}

/* ---------- top bar ---------- */
.fp-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 22px 20px 8px;
}

.fp-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1.06;
	letter-spacing: -0.005em;
	margin: 0;
	max-width: 74%;
}

.fp-topbar-actions { display: flex; gap: 6px; flex-shrink: 0; }

.fp-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
	transition: background 0.15s ease;
}

.fp-icon-btn:hover { background: var(--glass-hover); }

/* ---------- tabs (scrollable, editorial underline) ---------- */
.fp-tabs {
	display: flex;
	gap: 18px;
	padding: 8px 20px 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.fp-tabs::-webkit-scrollbar { display: none; }

.fp-tab {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--muted);
	padding: 6px 2px 12px;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	cursor: pointer;
	position: relative;
	transition: color 0.15s ease;
}

.fp-tab:hover { color: var(--fg); }
.fp-tab.is-active { color: var(--fg); }

.fp-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 3px;
	border-radius: 3px;
	background: var(--accent);
}

/* thin divider under the tabs */
.fp-subbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 20px 10px;
	border-top: 1px solid var(--frame-border);
}

.fp-filters-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	padding: 8px 15px;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 14px );
	backdrop-filter: blur( 14px );
}

.fp-filters-btn:hover { background: var(--glass-hover); }
.fp-filters-ico { display: inline-flex; }
.fp-count { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* ---------- content + stage ---------- */
.fp-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 14px 20px 22px;
}

.fp-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* ---------- wheel ---------- */
.fp-wheel-wrap { position: relative; margin: 0 auto; }

.fp-wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	z-index: 2;
}

.fp-pointer {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-bottom: 22px solid var(--accent);
	z-index: 6;
	filter: drop-shadow( 0 -2px 4px rgba( 0, 0, 0, 0.4 ) );
}

.fp-spin-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	border: 4px solid rgba( 255, 255, 255, 0.92 );
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: 1.05rem;
	cursor: pointer;
	z-index: 4;
	box-shadow: 0 8px 22px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.12s ease, filter 0.15s ease;
}

.fp-spin-center:hover:not( :disabled ) { transform: translate( -50%, -50% ) scale( 1.06 ); filter: brightness( 1.05 ); }
.fp-spin-center:active:not( :disabled ) { transform: translate( -50%, -50% ) scale( 0.94 ); }
.fp-spin-center:disabled { opacity: 0.6; }

.fp-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 4px solid var(--glass-2);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: fp-spin 0.8s linear infinite;
	z-index: 5;
}

@keyframes fp-spin { to { transform: rotate( 360deg ); } }

/* ---------- primary button ---------- */
.fp-big-btn {
	border: 0;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 15px 30px;
	border-radius: 16px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba( 255, 90, 77, 0.35 );
	transition: transform 0.1s ease, filter 0.15s ease;
}

.fp-big-btn:hover:not( :disabled ) { filter: brightness( 1.05 ); }
.fp-big-btn:active:not( :disabled ) { transform: scale( 0.97 ); }
.fp-big-btn:disabled { opacity: 0.45; box-shadow: none; cursor: default; }

/* ---------- "Pick for Me" slot reel ---------- */
.fp-instant {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 100%;
	padding: 12px 4px;
}
.fp-instant .fp-big-btn { width: 100%; max-width: 320px; }

.fp-slot {
	width: 100%;
	max-width: 300px;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	background: var(--glass);
	border: 1px solid var(--glass-border);
	box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.14 );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.fp-slot-img {
	flex: 1;
	min-height: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--glass-2);
}
.fp-slot-img.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.6rem;
	opacity: 0.5;
}
.fp-slot-name {
	flex: 0 0 auto;
	padding: 12px 16px;
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--fg);
}
.fp-slot-idle {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	opacity: 0.5;
}
.fp-slot-hint { color: var(--muted); font-family: var(--ui); font-size: 0.95rem; font-weight: 500; }
.fp-slot.is-win { animation: fp-slot-pop 0.4s cubic-bezier( 0.34, 1.56, 0.5, 1 ); }
.fp-slot.is-win .fp-slot-name { color: var(--accent); }
@keyframes fp-slot-pop {
	0% { transform: scale( 0.9 ); }
	60% { transform: scale( 1.05 ); }
	100% { transform: scale( 1 ); }
}

/* ---------- glass bottom sheet ---------- */
.fp-modal {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 20;
}

.fp-modal[hidden] { display: none; }

.fp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--scrim);
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fp-modal.is-open .fp-modal-backdrop { opacity: 1; }

.fp-modal-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-height: 92%;
	overflow-y: auto;
	background: var(--sheet-bg);
	-webkit-backdrop-filter: blur( 30px ) saturate( 1.6 );
	backdrop-filter: blur( 30px ) saturate( 1.6 );
	border-top: 1px solid var(--glass-border);
	border-radius: 26px 26px 0 0;
	padding: 6px 22px 26px;
	text-align: center;
	box-shadow: 0 -16px 50px var(--sheet-shadow);
	transform: translateY( 101% );
	transition: transform 0.4s cubic-bezier( 0.32, 0.72, 0, 1 );
}

.fp-modal.is-open .fp-modal-card { transform: translateY( 0 ); }

/* Winning-logo flip: hold the sheet hidden at its final position until the
   logo has flown up and landed, then fade it in under the hero. */
.fp-modal.fp-flip-hold .fp-modal-card { transition: none; opacity: 0; }
.fp-modal.fp-flip-hold .fp-modal-backdrop { transition: none; opacity: 0; }
.fp-modal.fp-flip-reveal .fp-modal-card { opacity: 1; transition: opacity 0.28s ease; }
.fp-modal.fp-flip-reveal .fp-modal-backdrop { opacity: 1; transition: opacity 0.28s ease; }

.fp-modal-grab {
	width: 40px;
	height: 5px;
	border-radius: 999px;
	background: var(--glass-hover);
	margin: 8px auto 14px;
}

.fp-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	background: var(--glass-2);
	color: var(--fg);
	font-size: 1.4rem;
	line-height: 1;
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}

.fp-modal-close:hover { background: var(--glass-hover); }

/* ---------- filters sheet ---------- */
.fp-sheet-body { text-align: left; }
.fp-sheet-title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; margin: 4px 0 16px; }

.fp-filters { display: block; }
.fp-fsection { margin-bottom: 18px; }
.fp-fsection:last-child { margin-bottom: 0; }

.fp-flabel {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-bottom: 10px;
}

.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.fp-chip {
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	padding: 9px 15px;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 0.88rem;
	transition: background 0.15s ease, transform 0.1s ease;
}

.fp-chip:hover { background: var(--glass-hover); }
.fp-chip:active { transform: scale( 0.96 ); }
.fp-chip.is-on { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: transparent; }

.fp-seg { display: inline-flex; background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 12px; padding: 3px; gap: 2px; }
.fp-seg-btn { border: 0; background: transparent; color: var(--muted); padding: 7px 15px; border-radius: 9px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.83rem; }
.fp-seg-btn.is-on { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }

.fp-sheet-done { width: 100%; margin-top: 20px; }

/* ---------- result sheet ---------- */
.fp-result-hero {
	height: 190px;
	margin: 0 -22px 6px;
	background-size: cover;
	background-position: center;
	background-color: var(--glass-2);
}

.fp-result-body { text-align: center; }

.fp-result-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--accent-soft-fg);
	margin-top: 8px;
}

.fp-result-name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 2rem;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 6px 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.fp-result-meta { color: var(--muted); font-size: 0.95rem; font-weight: 500; }

.fp-badge {
	font-size: 0.64rem;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fp-open { background: var(--pos-bg); color: var(--pos-fg); }
.fp-closed { background: var(--neg-bg); color: var(--neg); }
.fp-sponsored { background: rgba( 120, 150, 255, 0.18 ); color: #6d86e0; }
.fp-app[data-theme="dark"] .fp-sponsored { color: #9db2ff; }

/* Favorite heart — floats over the sheet corner (icon only) */
.fp-fav-icon {
	position: absolute;
	top: 12px;
	left: 14px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.32 );
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	transition: transform 0.12s ease, color 0.15s ease;
}

.fp-fav-icon:hover { transform: scale( 1.1 ); }
.fp-fav-icon.is-on { color: #ff5a6a; }

.fp-result-actions {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fp-result-actions-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.fp-lets-go { display: block; width: 100%; text-decoration: none; text-align: center; box-sizing: border-box; }

.fp-ghost-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--fg);
	font-family: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 12px 20px;
	border: 1px solid var(--glass-border);
	border-radius: 14px;
	background: var(--glass-2);
	cursor: pointer;
}

.fp-ghost-btn:hover { background: var(--glass-hover); }

.fp-error { color: var(--neg); font-weight: 600; padding: 20px 0; }

/* Deferred check-in banner (shown on return, within 90 min) */
.fp-ci-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: var(--accent-soft-bg);
	border: 1px solid var(--glass-border);
}

.fp-ci-text { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--fg); text-align: left; }
.fp-ci-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.fp-ci-go {
	border: 0;
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: 0.82rem;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.fp-ci-x {
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 1.2rem;
	line-height: 1;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
}

.fp-ci-x:hover { background: var(--glass-hover); color: var(--fg); }

/* vote controls */
.fp-result-body .fp-vote { margin-top: 16px; display: flex; gap: 10px; justify-content: center; }

.fp-vote-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	padding: 10px 18px;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	transition: background 0.15s ease;
}

.fp-vote-btn:hover { background: var(--glass-hover); }
.fp-vote-ico { display: inline-flex; }
.fp-vote-count { min-width: 0.6em; }
.fp-up.is-on { background: var(--pos); color: #fff; border-color: transparent; }
.fp-down.is-on { background: var(--neg); color: #fff; border-color: transparent; }

/* favorite + check-in */
.fp-engage { margin-top: 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.fp-fav,
.fp-checkin {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	padding: 10px 16px;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.86rem;
	transition: background 0.15s ease;
}

.fp-fav:hover,
.fp-checkin:hover { background: var(--glass-hover); }
.fp-fav-ico { font-size: 1.1rem; line-height: 1; }
.fp-fav.is-on { background: var(--neg-bg); color: var(--neg); border-color: transparent; }
.fp-checkin.is-done { background: var(--pos-bg); color: var(--pos-fg); border-color: transparent; cursor: default; }

/* ---------- My Stats ---------- */
.fp-stats-body { text-align: center; }
.fp-stat-tiles { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 10px; margin: 18px 0; }
.fp-stat-tile { background: var(--glass-2); border: 1px solid var(--glass-border); border-radius: 16px; padding: 14px 6px; text-align: center; }
.fp-stat-tile b { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 700; }
.fp-stat-tile span { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.fp-stat-facts { color: var(--muted); font-size: 0.9rem; margin: 8px 0; display: flex; flex-direction: column; gap: 5px; }
.fp-badge-head { margin: 18px 0 10px; font-weight: 800; font-size: 0.95rem; text-align: left; }
.fp-badge-grid { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 8px; }

.fp-badge-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-radius: 12px;
	background: var(--glass-2);
	font-size: 0.82rem;
	font-weight: 600;
	opacity: 0.45;
	text-align: left;
}

.fp-badge-chip.is-earned { opacity: 1; background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.fp-badge-ico { font-size: 1.1rem; }

/* ---------- toast ---------- */
.fp-toast {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translate( -50%, 8px );
	z-index: 30;
	background: var(--fg);
	color: #fff;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.35 );
}

.fp-app[data-theme="dark"] .fp-toast,
.fp-app:not( [data-theme="light"] ) .fp-toast { color: #17161c; }
@media ( prefers-color-scheme: dark ) { .fp-app:not( [data-theme="light"] ) .fp-toast { color: #17161c; } }
.fp-toast.is-on { opacity: 1; transform: translate( -50%, 0 ); }

/* ---------- multiplayer ---------- */
.fp-cs { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 340px; margin: 0 auto; }
.fp-cs-pitch { text-align: center; color: var(--muted); font-size: 0.98rem; font-weight: 500; }
.fp-cs-row { display: flex; gap: 8px; width: 100%; justify-content: center; flex-wrap: wrap; }

.fp-cs-name,
.fp-cs-code-in,
.fp-vote-add-sel {
	padding: 12px 16px;
	border: 1px solid var(--glass-border);
	border-radius: 12px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--glass-2);
	color: var(--fg);
	min-width: 0;
}

.fp-cs-name::placeholder,
.fp-cs-code-in::placeholder { color: var(--muted); }
.fp-cs-name { flex: 1; max-width: 190px; }
.fp-cs-name-full { width: 100%; max-width: 260px; text-align: center; }
.fp-cs-code-in { flex: 1; max-width: 150px; text-transform: uppercase; letter-spacing: 0.12em; }

.fp-cs-actions-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fp-cs-choose { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 260px; }
.fp-cs-choose .fp-big-btn { width: 100%; }
.fp-cs-joinbtn { width: 100%; justify-content: center; }

/* Logo flip transition (wheel slice → sheet hero) */
.fp-flip {
	position: absolute;
	z-index: 25;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	background-color: var(--glass-2);
	box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.4 );
	transform-origin: center center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
}

.fp-cs-join {
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	color: var(--fg);
	font-family: inherit;
	font-weight: 800;
	padding: 11px 20px;
	border-radius: 12px;
	cursor: pointer;
}

.fp-cs-join:hover { background: var(--glass-hover); }

.fp-cs-code {
	font-family: var(--serif);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	padding: 12px 18px 12px 30px;
	background: var(--glass-2);
	border: 1px solid var(--glass-border);
	border-radius: 16px;
}

.fp-cs-wait { color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.fp-cs-spin { width: 16px; height: 16px; border: 3px solid var(--glass-2); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: fp-spin 0.8s linear infinite; }
.fp-cs-cancel { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.fp-cs-cancel:hover { color: var(--fg); }
.fp-cs-progress { color: var(--muted); font-size: 0.85rem; text-align: center; }
.fp-cs-hint { color: var(--muted); font-size: 0.75rem; }
.fp-cs-picked { font-weight: 700; }

.fp-cs-card {
	width: 100%;
	border-radius: 20px;
	background: var(--glass-2);
	border: 1px solid var(--glass-border);
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	position: relative;
	box-shadow: 0 18px 44px var(--sheet-shadow);
	-webkit-backdrop-filter: blur( 16px );
	backdrop-filter: blur( 16px );
}

.fp-cs-card.is-dragging { cursor: grabbing; }
.fp-cs-card.lean-right { box-shadow: 0 18px 44px rgba( 18, 183, 106, 0.5 ); }
.fp-cs-card.lean-left { box-shadow: 0 18px 44px rgba( 224, 69, 58, 0.5 ); }

.fp-cs-card-img { height: 175px; background-size: cover; background-position: center; background-color: var(--glass); }
.fp-cs-card-body { padding: 16px 18px 20px; text-align: center; }
.fp-cs-card-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fp-cs-card-meta { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

.fp-cs-actions { display: flex; gap: 28px; }

.fp-cs-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	background: var(--glass-2);
	font-size: 1.5rem;
	cursor: pointer;
	transition: transform 0.1s ease;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.15 );
}

.fp-cs-btn:hover:not( :disabled ) { transform: scale( 1.1 ); }
.fp-cs-btn:disabled { opacity: 0.5; }
.fp-cs-no { color: var(--neg); }
.fp-cs-yes { color: var(--pos); }

/* Group Vote board */
.fp-cs.fp-vote { max-width: 380px; }
.fp-vote-head { display: flex; align-items: center; gap: 10px; justify-content: center; }
.fp-cs-code-sm { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.18em; padding-left: 0.18em; }
.fp-vote-add-sel { flex: 1; max-width: 240px; }
.fp-vote-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.fp-vote-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.fp-vote-score { min-width: 36px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--muted); }
.fp-vote-score.pos { color: var(--pos-fg); }
.fp-vote-score.neg { color: var(--neg); }
.fp-vote-info { flex: 1; min-width: 0; text-align: left; }
.fp-vote-name { font-weight: 700; font-size: 0.98rem; }
.fp-vote-meta { color: var(--muted); font-size: 0.8rem; }
.fp-vote-btns { display: flex; flex-direction: column; gap: 3px; }
.fp-vote-mini { width: 32px; height: 26px; border: 0; background: var(--glass-hover); color: var(--muted); border-radius: 8px; cursor: pointer; line-height: 1; font-size: 0.7rem; }
.fp-vote-mini.is-up { background: var(--pos); color: #fff; }
.fp-vote-mini.is-down { background: var(--neg); color: #fff; }

/* keyboard focus */
.fp-app button:focus-visible,
.fp-app a:focus-visible,
.fp-app select:focus-visible,
.fp-app input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media ( max-width: 420px ) {
	.fp-stat-tiles { grid-template-columns: repeat( 2, 1fr ); }
}

/*
 * ===================================================================
 * Restaurant page info card + boost form (inline in themed article
 * content) — self-contained, light/dark adaptive.
 * ===================================================================
 */
.fp-rcard {
	--c-bg: #ffffff;
	--c-fg: #17181c;
	--c-muted: #6b7076;
	--c-line: #e6e7ea;
	--c-accent: #ff5a4d;
	margin: 1.5em 0;
	padding: 22px;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	background: var(--c-bg);
	color: var(--c-fg);
	font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.fp-rcard-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fp-rcard .fp-badge { font-weight: 700; }
.fp-rcard .fp-open { background: #e6f4ea; color: #1a7f37; }
.fp-rcard .fp-closed { background: #fbeaea; color: #b32d2e; }
.fp-price, .fp-tag { background: #f0f0f2; color: #454850; }
.fp-note { background: #fcf3e2; color: #8a5a12; }

.fp-rcard-links { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fp-rcard-link { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.fp-rcard-link:hover { color: var(--c-accent); }

.fp-rcard-h { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.fp-rcard-hours { width: auto; border-collapse: collapse; font-size: 0.92rem; }
.fp-rcard-hours th, .fp-rcard-hours td { text-align: left; padding: 3px 16px 3px 0; border: 0; }
.fp-rcard-hours th { font-weight: 600; }
.fp-rcard-hours .fp-today th, .fp-rcard-hours .fp-today td { color: var(--c-accent); font-weight: 700; }
.fp-rcard-vary { color: var(--c-muted); font-size: 0.8rem; margin: 8px 0 0; }

.fp-rcard-cta { margin-top: 18px; }
.fp-rcard .fp-big-btn { display: inline-block; text-decoration: none; background: var(--c-accent); color: #fff; box-shadow: none; }

.fp-boost { margin-top: 18px; border-top: 1px solid var(--c-line); padding-top: 14px; }
.fp-boost summary { cursor: pointer; font-weight: 700; }
.fp-boost-desc { color: var(--c-muted); font-size: 0.88rem; margin: 10px 0; }
.fp-boost-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fp-boost-form label { font-size: 0.9rem; font-weight: 600; }
.fp-boost-form input[type="number"] { width: 70px; padding: 6px 8px; border: 1.5px solid var(--c-line); border-radius: 8px; }
.fp-boost-btn { font-size: 0.95rem; padding: 10px 22px; }
.fp-boost-notice { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: #f0f0f2; font-weight: 600; }
.fp-boost-ok { background: #e6f4ea; color: #1a7f37; }
.fp-boost-err { background: #fbeaea; color: #b32d2e; }

@media ( prefers-color-scheme: dark ) {
	.fp-rcard {
		--c-bg: #1a1b20;
		--c-fg: #ececee;
		--c-muted: #9aa0a6;
		--c-line: #31323a;
	}
	.fp-price, .fp-tag { background: #2a2b32; color: #c9ccd2; }
	.fp-note { background: rgba( 219, 166, 23, 0.15 ); color: #e3b341; }
	.fp-rcard .fp-open { background: rgba( 26, 127, 55, 0.2 ); color: #4ade80; }
	.fp-rcard .fp-closed { background: rgba( 179, 45, 46, 0.2 ); color: #f87171; }
	.fp-boost-notice { background: #26262b; }
}