* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

html,
		body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--carpet-color);
	color: var(--text-main);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
		input {
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	outline: 0;
}

button {
	cursor: default;
}

.home-page::-webkit-scrollbar,
.tool-roll::-webkit-scrollbar {
	display: none;
}


.player-one-widget {
	width: -webkit-fill-available;
	margin: 3.125vw;
	position: relative;
	display: flex;
	align-items: center;
	gap: 3.125vw;
	z-index: 8;
	color: var(--deep-carpet-color);
	height: fit-content;
	isolation: isolate;
	flex-shrink: 0;
}

.player-one-widget::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
	border-radius: 3.125vw;
	z-index: -1;
}

.player-one-widget::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff6b;
	clip-path: var(--squircle);
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
}

.player-one-avatar {
	width: 18.75vw;
	height: 18.75vw;
	margin: 3.125vw 0 3.125vw 3.125vw;
	background: #ffffff6b;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: -0.15625vw 0.3125vw 0.625vw rgba(0,0,0,0.30), inset 0 0 2.5vw rgb(255 255 255 / 60%);
	flex-shrink: 0;
	transition: transform 0.18s ease, filter 0.18s ease;
}

.player-one-avatar:active {
	transform: scale(0.94);
	filter: brightness(1.08);
}

.player-one-avatar .material-symbols-outlined {
	font-size: 10vw;
	color: var(--player-one-color);
	text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.18);
}

.player-one-info {
	margin: 3.125vw 3.125vw 3.125vw 0;
	background: #ffffff8f;
	clip-path: var(--squircle);
	display: flex;
	align-items: center;
	font-size: 3.125vw;
	line-height: 4.375vw;
	gap: 1.5625vw;
	height: -webkit-fill-available;
	width: calc(100% - 28.125vw);
}

.player-one-info strong {
	font-size: 4.0625vw;
	font-weight: 900;
	line-height: 5.625vw;
	color: var(--deep-carpet-color);
	padding: 0 0 0 3.75vw;
	width: 100%;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player-one-info em {
	width: fit-content;
	padding: 0 3.125vw 0 1.875vw;
	display: flex;
	align-items: center;
	gap: 1.5625vw;
	background: #ffffff8f;
	clip-path: var(--squircle);
	font-style: normal;
	color: #62974d;
	height: -webkit-fill-available;
	margin: 3.125vw 3.125vw 3.125vw 0;
	min-width: fit-content;
}

.player-one-info em .material-symbols-outlined {
	font-size: 6.25vw;
	color: #ff9800;
	text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.16);
}

.player-one-info b {
	font-size: 4.0625vw;
}

.pseudo-board-shell {
	width: var(--board-size);
	height: var(--board-size);
	position: relative;
	z-index: 80;
	flex-shrink: 0;
	margin: auto 3.125vw;
}


.pseudo-board {
	width: var(--board-size);
	height: var(--board-size);
	display: grid;
	grid-template-columns: repeat(3, var(--block-size));
	grid-template-rows: repeat(3, var(--block-size));
	gap: var(--block-gap);
	position: relative;
	overflow: visible;
	isolation: isolate;
}

.pseudo-block {
	width: var(--block-size);
	height: var(--block-size);
	display: grid;
	grid-template-columns: repeat(3, var(--cell-size));
	grid-template-rows: repeat(3, var(--cell-size));
	gap: var(--cell-gap);
	position: relative;
	overflow: visible;
}

.pseudo-board.has-active .pseudo-cell:not(.is-active) {
	opacity: 0.94;
}

.pseudo-cell.is-block-peer {
	background: var(--district-highlight);
	opacity: 1;
}

.pseudo-cell.is-row-peer,
		.pseudo-cell.is-column-peer,
		.pseudo-cell.is-peer,
		.pseudo-cell.is-block-peer.is-row-peer,
		.pseudo-cell.is-block-peer.is-column-peer {
	background: #ffda66;
	opacity: 1;
}

.pseudo-cell.is-same-number {
	background: #e8ffd9;
	opacity: 1;
}

.pseudo-cell.is-player-one {
	background: #ffda66;
	color: #ffffff;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}


.pseudo-cell.is-given {
	background: #f6ce66;
	color: #000;
	text-shadow: none;
	filter: grayscale(1) hue-rotate(45deg) invert(1);
	opacity: 0.6;
}

.pseudo-cell.is-given.is-active {
	background: #f6ce66;
	color: #000;
	text-shadow: none;
	filter: grayscale(1) hue-rotate(45deg) invert(1);
	opacity: 0.6;
	backdrop-filter: blur(0.625vw);
	box-shadow: 0.3125vw 0.625vw 1.5625vw rgb(255 255 255);
}

.pseudo-cell.is-player-one.is-active {
	background: #8cdeff96;
	color: hsl(0deg 0% 100%);
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
	backdrop-filter: blur(0.625vw);
}


.pseudo-cell.is-leaving {
	z-index: 70;
	animation: scaleDownTile 0.3s ease-out both;
}

.pseudo-cell.is-wrong {
	animation: pseudoShake 0.24s ease both;
}

.pseudo-cell.is-flash {
	animation: pseudoFlash 0.42s ease both;
}

.pseudo-footer {
	height: var(--footer-height);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 12;
	pointer-events: none;
	margin: auto 3.125vw 3.125vw;
	position: relative;
	width: -webkit-fill-available;
}


.pseudo-controls {
	width: var(--board-size);
	height: var(--footer-height);
	display: grid;
	grid-template-columns: calc((var(--key-size) * 3) + (var(--key-gap) * 2)) var(--hub-size) calc((var(--key-size) * 3) + (var(--key-gap) * 2));
	gap: var(--controls-gap);
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.pseudo-dpad,
		.pseudo-numpad {
	display: grid;
	grid-template-columns: repeat(3, var(--key-size));
	grid-template-rows: repeat(3, var(--key-size));
	gap: var(--key-gap);
}

.pseudo-spacer {
	width: var(--key-size);
	height: var(--key-size);
}

.pseudo-key {
	position: relative;
	width: var(--key-size);
	height: var(--key-size);
	border: none;
	background: transparent;
	color: #fff;
	text-shadow: -0.15625vw -0.15625vw 0.625vw rgb(0 0 0 / 50%);
	font-size: 4.6875vw;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	transition: transform 0.18s ease, filter 0.18s ease;
}

.pseudo-key::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 15%);
	border-radius: 3.125vw;
	z-index: -1;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pseudo-key::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff4d;
	clip-path: var(--squircle);
	z-index: -1;
	box-shadow: inset 0 0 1vw rgb(255 255 255 / 40%);
}

.pseudo-key:active::after,
		.pseudo-key.key-sink::after {
	background: #ffffff99;
}

.pseudo-key:active::before,
		.pseudo-key.key-sink::before {
	transform: translateY(0.625vw) scale(0.985);
	box-shadow: -0.078125vw 0.078125vw 0.3125vw rgb(0 0 0 / 12%);
}

.pseudo-key:active {
	transform: scale(0.94);
	filter: brightness(1.08);
}

.pseudo-key.erase::before,
		.pseudo-key.erase::after {
	border-radius: 50%;
	clip-path: none;
}

.pseudo-key .material-symbols-outlined {
	font-size: 4.375vw;
	line-height: 1;
	color: #fff;
	text-shadow: -0.15625vw -0.15625vw 0.625vw rgb(0 0 0 / 50%);
}

.pseudo-hub {
	width: var(--hub-size);
	height: var(--hub-size);
	border: none;
	border-radius: 50%;
	background: #ffffff6b;
	box-shadow: -0.15625vw 0.3125vw 0.625vw rgb(0 0 0 / 30%), inset 0 0 2.5vw rgb(255 255 255 / 60%);
	color: #fff;
	text-shadow: -0.15625vw -0.15625vw 0.625vw rgb(0 0 0 / 50%);
	font-size: 5vw;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: auto;
	transition: transform 0.18s ease, filter 0.18s ease;
}

.pseudo-hub:active {
	transform: scale(0.94);
}

.pseudo-hub.is-bouncing {
	animation: hubBounce 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}

.toast-pipeline-hub {
	position: fixed;
	bottom: calc(var(--footer-height) + 7.8125vw);
	left: 50%;
	transform: translate(-50%, 25vw);
	height: 12.5vw;
	width: auto;
	min-width: 46.875vw;
	max-width: 87.5vw;
	background: rgb(0 0 0 / 85%);
	color: #ffffff;
	font-size: 3.75vw;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 6.25vw;
	z-index: 200;
	pointer-events: none;
	clip-path: var(--squircle);
	box-shadow: 0 0.9375vw 2.5vw rgb(0 0 0 / 30%);
	transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2), opacity 0.25s ease, visibility 0.25s ease;
	text-align: center;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
}

.toast-pipeline-hub.active {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible;
}

.slider-val-readout,
		.cost-value,
		.gamekit-pill-readout {
	background: rgb(255 255 255 / 48%);
	clip-path: var(--squircle);
	padding: 1.25vw 2.5vw;
	font-size: 3.125vw;
	font-weight: 900;
	font-style: normal;
	display: flex;
	align-items: center;
	gap: 1.25vw;
	min-height: 8.75vw;
}




.puzzle-card-meta,
		.run-card-meta {
	font-size: 2.8125vw;
	line-height: 3.75vw;
	opacity: 0.75;
	font-weight: 700;
}

.tooltip-confirm {
	position: fixed;
	left: 50%;
	bottom: calc(var(--footer-height) + 24vw);
	transform: translateX(-50%);
	z-index: 250;
	background: rgb(0 0 0 / 88%);
	color: #ffffff;
	clip-path: var(--squircle);
	padding: 3.125vw 5vw;
	font-size: 3.4375vw;
	font-weight: 900;
	box-shadow: 0 0.9375vw 2.5vw rgb(0 0 0 / 30%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.tooltip-confirm.active {
	opacity: 1;
	visibility: visible;
}

.score-fly,
		.reject-fall {
	position: fixed;
	left: var(--fly-left);
	top: var(--fly-top);
	z-index: 300;
	pointer-events: none;
	font-weight: 900;
	font-size: 6.25vw;
	line-height: 1;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.score-fly {
	color: #ffffff;
	animation: scoreFly 0.72s ease-out both;
}

.home-page::-webkit-scrollbar,
.accordion-scroll-wrapper::-webkit-scrollbar,
.lead-accordion-body::-webkit-scrollbar {
	display: none;
}

.pseudo-clue-card h2 {
	font-size: 7.5vw;
	line-height: 8.4375vw;
	font-weight: 900;
}

.pseudo-clue-card p {
	font-size: 3.75vw;
	font-weight: 800;
	line-height: 5.625vw;
	text-align: center;
	opacity: 0.78;
}

.accordion-scroll-wrapper,
		.tool-roll {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden auto;
	display: flex;
	flex-flow: column;
	gap: 3.125vw;
	padding: 3.125vw 0;
	margin: 0;
}




body, .main-view, .clue-view {
	background: var(--carpet-color);
	height: 100svh;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	position: relative;
	flex-shrink: 0;
}

.tool-roll,
		.accordion-scroll-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden auto;
	display: flex;
	flex-flow: column;
	gap: 3.125vw;
	padding: 3.125vw 0;
	margin: 0;
}

.tool-roll::-webkit-scrollbar,
		.accordion-scroll-wrapper::-webkit-scrollbar,
		.lead-accordion-body::-webkit-scrollbar,
		.puzzle-picker-carousel::-webkit-scrollbar,
		.runs-in-play-carousel::-webkit-scrollbar {
	display: none;
}

.lead-head-icon {
	width: 9.375vw;
	height: 9.375vw;
	min-width: 9.375vw;
	min-height: 9.375vw;
	display: flex;
	align-items: center;
	justify-content: center;
	clip-path: var(--squircle);
	background: #ffffff8f;
	color: var(--deep-carpet-color);
	font-size: 5.625vw;
	font-weight: 900;
	text-shadow: none;
	box-shadow: none;
	font-style: normal;
	flex-shrink: 0;
}

.lead-head-count,
.lead-tokens-count,
#mistakeReadout {
	background: #ffffff8f;
	clip-path: var(--squircle);
	padding: 0 3.125vw;
	min-height: 9.375vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 2.5vw 0 auto;
	color: var(--deep-carpet-color);
	font-size: 3.4375vw;
	font-weight: 900;
	text-shadow: none;
	width: fit-content;
	min-width: 9.375vw;
	border-radius: 0;
	box-shadow: none;
	font-style: normal;
	flex-shrink: 0;
}

.sheet-row::before {
	content: "";
	position: absolute;
	width: 100%;
	min-height: 100%;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 15%);
	border-radius: 3.125vw;
	z-index: -1;
}

.sheet-row::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: 100%;
	background: #ffffff6b;
	clip-path: var(--squircle);
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
}

.points-total-box {
	min-height: 34.375vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25vw;
	color: #fff;
	width: -webkit-fill-available;
	margin: 0 3.125vw;
	background: #00000024;
	clip-path: var(--squircle);
	flex-flow: column;
	font-weight: 800;
}

.lead-empty {
	background: #ffffff5c;
	clip-path: var(--squircle);
	padding: 3.125vw;
	margin: 0 3.125vw;
	font-size: 3.4375vw;
	font-weight: 700;
	line-height: 4.6875vw;
	color: var(--deep-carpet-color);
}

:root {
	--board-color: #a16f65;
	--carpet-hue: 233.79deg;
	--carpet-sat: 15.34%;
	--carpet-light: 37.06%;
	--carpet-color: #50536d;
	--carpet-symbol: hsl(233.79 15.34% 70% / 1);
	--deep-carpet-color: hsl(233.79deg 15.34% 40% / 1);
	--carpet-ink: hsl(233.79deg 15.34% 30%);
	--active-highlight: #ffda66;
	--district-highlight: #ffe3ec;
	--text-main: #2b262d;
	--player-one-color: #89484b;
	--squircle: shape(from 0 7.5vw, curve to 7.5vw 0 with 0 0 / 0 0, hline to calc(100% - 7.5vw), curve to 100% 7.5vw with 100% 0 / 100% 0, vline to calc(100% - 7.5vw), curve to calc(100% - 7.5vw) 100% with 100% 100% / 100% 100%, hline to 7.5vw, curve to 0 calc(100% - 7.5vw) with 0 100% / 0 100%, close);
	--page-gap: 3.125vw;
	--board-size: 93.75vw;
	--block-gap: 1.5625vw;
	--cell-gap: 0.625vw;
	--block-size: calc((var(--board-size) - (var(--block-gap) * 2)) / 3);
	--cell-size: calc((var(--block-size) - (var(--cell-gap) * 2)) / 3);
	--footer-height: 37.5vw;
	--key-size: 10.9375vw;
	--key-gap: 1.5625vw;
	--hub-size: 15.625vw;
	--controls-gap: 3.125vw;
	--darker-text: hsl(233.79deg 15.34% 24% / 1);
}

body {
	background: var(--carpet-color);
}

.home-page {
	position: absolute;
	inset: 0;
	width: 100vw;
	height: 100svh;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	z-index: 2;
	background: transparent;
	pointer-events: none;
}

.clue-over,
		.tool-over {
	flex: 0 0 87.5vw;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	pointer-events: none;
}

.main-view::before,
		.main-view::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.1875vw;
	height: 9.375vw;
	background: rgb(255 218 102);
	border-radius: 6.25vw;
	pointer-events: none;
	z-index: 50;
}

.tool-roll::-webkit-scrollbar,
		.home-page::-webkit-scrollbar,
		.lead-small::-webkit-scrollbar,
		.puzzle-picker-carousel::-webkit-scrollbar,
		.runs-in-play-carousel::-webkit-scrollbar {
	display: none;
}

.pseudo-clue-card {
	position: relative;
	width: -webkit-fill-available;
	min-height: 62.5vw;
	margin: 18.75vw 15.625vw 3.125vw 3.125vw;
	padding: 6.25vw 3.125vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3.125vw;
	color: var(--deep-carpet-color);
	isolation: isolate;
}

.pseudo-clue-card::before {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
	border-radius: 3.125vw;
	z-index: -1;
	pointer-events: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.pseudo-clue-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff6b;
	clip-path: var(--squircle);
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
	z-index: -1;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.pseudo-clue-orb {
	position: absolute;
	top: -12.5vw;
	left: 50%;
	transform: translateX(-50%);
	width: 28.125vw;
	height: 28.125vw;
	border-radius: 50%;
	background: var(--carpet-color);
	border: 2.5vw solid var(--carpet-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 2.5vw rgb(255 255 255 / 60%);
}

.pseudo-clue-orb .material-symbols-outlined {
	font-size: 12.5vw;
	color: #fff;
	text-shadow: 0.15625vw 0.15625vw 1.5625vw #00000070;
}

.lead-accordion {
	position: relative;
	width: -webkit-fill-available;
	margin: 0 3.125vw;
	color: var(--text-main);
	isolation: isolate;
	flex-shrink: 0;
}

.lead-accordion:last-child {
	margin-bottom: 3.125vw;
}

.lead-accordion::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
	border-radius: 3.125vw;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.lead-accordion::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff6b;
	clip-path: var(--squircle);
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
	z-index: -1;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

.lead-accordion-head {
	width: auto;
	min-height: 14.0625vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.1875vw;
	margin: 0 3.125vw;
	font-size: 3.75vw;
	font-weight: 800;
	color: var(--darker-text);
	text-align: left;
}

.lead-head-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}




.sheet-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3.75vw;
	font-weight: 600;
	color: #333333;
	padding: 0 4.6875vw;
}

.sheet-label-top {
	height: 9.375vw;
	line-height: 9.375vw;
	margin: 3.125vw 0 0;
	display: flex;
}

.slider-val-readout {
	font-weight: inherit;
	color: inherit;
	font-size: inherit;
	text-align: right;
	margin: 0 0 0 0.9375vw;
	background: none;
	clip-path: none;
	padding: 0;
	min-height: unset;
}

.premium-slider {
	width: -webkit-fill-available;
	height: 2.5vw;
	background: #00000024;
	clip-path: none;
	padding: 0;
	-webkit-appearance: none;
	border-radius: 1.25vw;
	outline: none;
	margin: 0 3.125vw 3.75vw;
}

.premium-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 6.25vw;
	height: 6.25vw;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	border: 0.9375vw solid var(--carpet-color);
}

.hue-slider {
	background: linear-gradient(to right, #a16f65, #65a18d, #658ea1, #8a65a1, #a16f65);
}

.switch-input {
	display: none;
}

.switch-label {
	position: relative;
	width: 15.625vw;
	border-radius: 9.375vw;
	transition: background-color 0.25s;
	height: fit-content;
	display: flex;
	background-color: #00000024;
	margin: 0 2.34375vw;
	border: 1.25vw solid #0000;
}

.switch-label::after {
	content: "";
	position: relative;
	aspect-ratio: 1/1;
	height: 6.875vw;
	background-color: #ffffff;
	border-radius: 50%;
	transition: margin 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2), transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 0 0.9375vw rgb(0 0 0 / 50%);
	margin: 0;
}

.switch-input:checked + .switch-label {
	background-color: var(--carpet-color);
}

.switch-input:checked + .switch-label::after {
	margin: 0 0 0 50%;
}

.switch-label:active::after {
	transform: scale(0.9);
}

.cta-button::before {
	content: "";
	position: absolute;
	width: 100%;
	min-height: 100%;
	pointer-events: none;
	border-radius: 3.125vw;
	z-index: -1;
}

.cta-button:active {
	transform: scale(0.985) translateY(0.3125vw);
}

.cta-button-danger::after,
		.cta-button-start-over::after {
	background: #b54545;
}

.trick-token-box {
	background-color: #00000024;
	width: -webkit-fill-available;
	height: fit-content;
	clip-path: var(--squircle);
	display: flex;
	flex-flow: column;
	margin: 0 3.125vw;
	position: relative;
	gap: 3.125vw;
}

.trick-token-title .material-symbols-outlined {
	font-size: 9.375vw;
	color: #fff;
	text-shadow: 0.15625vw 0.15625vw 1.5625vw #00000070;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.25vw 0 0;
}

.points-total-explainer-node {
	width: -webkit-fill-available;
	background: #ffffff3b;
	clip-path: var(--squircle);
	box-shadow: inset 0 0 1.5625vw rgba(255,255,255,0.4);
	margin: 0 3.125vw;
	padding: 4.6875vw;
	font-size: 3.75vw;
	line-height: 5.3125vw;
	font-weight: 700;
	color: var(--deep-carpet-color);
	text-align: center;
}

.run-pressure-node {
	width: -webkit-fill-available;
	margin: 0 3.125vw 3.125vw;
	background: #00000024;
	clip-path: var(--squircle);
	padding: 3.125vw;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5625vw;
	text-align: center;
	color: #fff;
	font-weight: 900;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.run-pressure-node span {
	font-size: 3.125vw;
	opacity: 0.9;
}

.run-pressure-node strong {
	display: block;
	font-size: 5vw;
	line-height: 6.25vw;
}

.lead-small {
	font-size: 3.125vw;
	font-weight: 600;
	line-height: 4.6875vw;
	color: #2b262dcc;
	max-height: 125vw;
	overflow: hidden auto;
	display: flex;
	flex-flow: column;
	gap: 1.5625vw;
	clip-path: var(--squircle);
	margin: 0 3.125vw;
}

.word-score-head {
	width: -webkit-fill-available;
	min-height: 10.9375vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3.125vw;
	padding: 0 3.125vw;
	background: #ffffff8f;
	clip-path: var(--squircle);
	color: var(--deep-carpet-color);
	font-size: 3.75vw;
	font-weight: 900;
	line-height: 4.6875vw;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 55%);
}

.word-score-head span:first-child {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.word-score-head span:last-child {
	min-height: 7.8125vw;
	min-width: 10.9375vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2.5vw;
	clip-path: var(--squircle);
	background: var(--active-highlight);
	color: #fff;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.puzzle-picker-card::before,
		.run-card::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 30%);
	border-radius: 3.125vw;
	z-index: -1;
}

.puzzle-picker-card::after,
		.run-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #ffffff6b;
	clip-path: var(--squircle);
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
}

.puzzle-card-title,
		.run-card-title {
	font-size: 5vw;
	font-weight: 800;
	line-height: 5.625vw;
	color: var(--deep-carpet-color);
	text-align: center;
	margin: 0 3.125vw;
}

.puzzle-card-meta,
		.run-card-meta,
		.puzzle-card-status {
	font-size: 3.4375vw;
	font-weight: 700;
	line-height: 4.6875vw;
	color: #62974d;
	margin: 0 3.125vw;
	text-align: center;
}

.puzzle-card-accordion {
	width: -webkit-fill-available;
	margin: 0 3.125vw;
	font-size: 3.4375vw;
	font-weight: 700;
	line-height: 4.6875vw;
	color: var(--deep-carpet-color);
	text-align: center;
}

.gamekit-pill-readout {
	width: fit-content;
	padding: 0 2.5vw;
	display: inline-flex;
	align-items: center;
	gap: 0.9375vw;
	background: #ffffff8f;
	clip-path: var(--squircle);
	font-style: normal;
	color: var(--darker-text);
	height: 9.375vw;
	min-width: fit-content;
	justify-content: center;
	margin: 0 0 0 auto;
	min-height: 7.8125vw;
	font-size: 3.4375vw;
}

.gamekit-pill-readout .material-symbols-outlined {
	font-size: 5vw;
	color: #ff9800;
	text-shadow: 0 0.3125vw 0.625vw rgba(0,0,0,0.16);
}


.carpet-symbol {
	position: absolute;
	font-size: var(--symbol-size);
	font-weight: 900;
	color: var(--carpet-symbol);
	opacity: 0.4;
	text-shadow: none;
	transform: rotate(var(--symbol-rotate));
	line-height: 1;
	will-change: auto;
}

.tool-roll {
	position: relative;
	z-index: 2;
	width: -webkit-fill-available;
	height: 100%;
	overflow: hidden auto;
	display: flex;
	flex-flow: column;
	gap: 3.125vw;
	padding: 3.125vw 0 0;
	margin: 0 0 3.125vw 12.5vw;
}

.puzzle-picker-carousel,
		.runs-in-play-carousel {
	width: -webkit-fill-available;
	display: flex;
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 3.125vw;
	gap: 3.125vw;
	padding: 0 3.125vw;
	overscroll-behavior-x: contain;
	min-height: fit-content;
	justify-content: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
}

.puzzle-picker-card,
		.run-card {
	scroll-snap-align: center;
	scroll-snap-stop: always;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.125vw;
	padding: 3.125vw 0;
	color: var(--text-main);
	min-height: fit-content;
	min-width: 75vw;
	width: 75vw;
	background: transparent;
	isolation: isolate;
}

.puzzle-thumb span {
	background: #ffffff;
	min-width: 0;
	min-height: 0;
}

.puzzle-thumb span.mini-given {
	background: #f6ce66;
	filter: grayscale(1) hue-rotate(45deg) invert(1);
	opacity: 0.6;
}

.puzzle-thumb span.mini-solved {
	background: #ffda66;
	filter: none;
	opacity: 1;
}

.scorecard-clock .material-symbols-outlined {
	font-size: 7.5vw;
}

.reject-fall {
	color: #ffefef;
	animation: rejectPopcorn 1.15s cubic-bezier(.18,.83,.25,1) forwards;
	position: fixed;
	left: var(--fly-left);
	top: var(--fly-top);
	z-index: 999;
	font-size: 8.75vw;
	font-weight: 900;
	text-shadow: 0.15625vw 0.3125vw 0.625vw rgb(0 0 0 / 45%);
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.7);
}

.pseudo-cell {
	width: var(--cell-size);
	height: var(--cell-size);
	border: 0;
	border-radius: 0;
	background: #ffffff;
	color: var(--carpet-color);
	font-size: 5vw;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	transform: scale(1);
	transition: transform 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.16), background-color 0.15s ease, opacity 0.25s ease, color 0.15s ease, filter 0.15s ease;
	box-shadow: none;
	text-shadow: none;
	will-change: auto;
}

.pseudo-cell.is-active {
	z-index: 90;
	background: #ffffff;
	color: var(--carpet-color);
	transform: scale(1.7);
	box-shadow: 0.3125vw 0.625vw 1.5625vw rgb(0 0 0 / 70%);
	animation: safeWobble 0.35s ease-in-out forwards;
	opacity: 1;
	will-change: transform;
}

body::before,
.main-carpet::before,
.surface-carpet::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgb(255 255 255 / 7%) 0 0.3125vw, transparent 0.3125vw 9.375vw),
		repeating-linear-gradient(90deg, rgb(255 255 255 / 7%) 0 0.3125vw, transparent 0.3125vw 9.375vw);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

.math-carpet {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.surface-carpet,
.main-carpet {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.clue-view {
	width: 100vw;
	flex-basis: 87.5vw;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	overflow: hidden auto;
	pointer-events: auto;
	z-index: 1;
	position: relative;
	inset: 0;
	height: 100svh;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--carpet-color);
}

.main-view {
	width: 100vw;
	flex-basis: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--carpet-color);
	box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000099, 0.3125vw 0.3125vw 0.9375vw #00000099;
	z-index: 4;
	flex: 0 0 100vw;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	justify-content: flex-start;
	pointer-events: auto;
	position: relative;
	overflow: visible;
	padding: 0;
	isolation: isolate;
}

.main-view::before {
	content: "";
	position: absolute;
	left: -1.25vw;
	top: 50%;
	transform: translateY(-50%);
	width: 2.1875vw;
	height: 9.375vw;
	background: var(--active-highlight);
	border-radius: 6.25vw;
	z-index: 40;
	pointer-events: none;
	box-shadow: -0.3125vw -0.3125vw 0.9375vw #00000055;
}

.main-view::after {
	right: -1.25vw;
	box-shadow: 0.3125vw -0.3125vw 0.9375vw #00000055;
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.1875vw;
	height: 9.375vw;
	background: var(--active-highlight);
	border-radius: 6.25vw;
	z-index: 40;
	pointer-events: none;
}

.player-one-widget,
.pseudo-board-shell {
	position: relative;
	z-index: 2;
}

.sheet-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 14.0625vw;
	position: relative;
	gap: 3.125vw;
	margin: 0 3.125vw;
	color: var(--deep-carpet-color);
	flex-flow: row nowrap;
	background: transparent;
	clip-path: none;
	width: -webkit-fill-available;
}


.sheet-row-column-view {
	min-height: fit-content;
	flex-flow: column;
	align-items: stretch;
	gap: 1.5625vw;
}

.puzzle-thumb {
	width: -webkit-fill-available;
	height: auto;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(9, 1fr);
	gap: 0.625vw;
	aspect-ratio: 1/1;
	margin: 0 3.125vw;
	clip-path: var(--squircle);
	background: transparent;
	position: relative;
	overflow: hidden;
	border-radius: 3.125vw;
	padding: 0;
	min-height: fit-content;
}

.card-button-capsule {
	display: flex;
	justify-content: space-between;
	position: relative;
	gap: 3.125vw;
	margin: 0 3.125vw;
	min-height: fit-content;
	flex-flow: column;
	align-items: stretch;
	width: -webkit-fill-available;
	height: auto;
	isolation: isolate;
}

.card-button-capsule::before {
	content: "";
	position: absolute;
	width: 100%;
	min-height: 100%;
	pointer-events: none;
	box-shadow: -0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 35%);
	border-radius: 3.125vw;
	z-index: -2;
}

.card-button-capsule::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: 100%;
	background: #ffffff6b;
	clip-path: var(--squircle);
	z-index: -1;
	pointer-events: none;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 100%);
}

.cta-button {
	color: #fff;
	font-size: 3.75vw;
	justify-content: center;
	min-height: 14.0625vw;
	margin: 3.125vw;
	display: flex;
	width: -webkit-fill-available;
	align-items: center;
	font-weight: 400;
	text-shadow: none;
	position: relative;
	z-index: 1;
	height: auto;
}

.cta-button::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: 100%;
	background: var(--carpet-color);
	clip-path: var(--squircle);
	pointer-events: none;
	z-index: -1;
}

.cta-button-text {
	pointer-events: none;
	z-index: 1;
	font-size: 4.375vw;
	font-weight: 400;
	text-shadow: none;
}

.scorecard-clock {
	width: -webkit-fill-available;
	min-height: 14.0625vw;
	margin: 0 3.125vw 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5625vw;
	clip-path: var(--squircle);
	background: #00000024;
	color: #ffffff;
	font-size: 5vw;
	font-weight: 900;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.points-total-box strong {
	font-size: 8.125vw;
	line-height: 12.5vw;
	color: #fff;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.score-drop-count {
	width: -webkit-fill-available;
	min-height: 14.0625vw;
	border: none;
	outline: none;
	clip-path: var(--squircle);
	background: #ffffff8f;
	color: var(--deep-carpet-color);
	font-size: 5vw;
	font-weight: 800;
	text-align: center;
	box-shadow: inset 0 0 1.5625vw rgb(255 255 255 / 60%);
	margin: 3.125vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.points-total-box span {
	font-size: 8.75vw;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15625vw;
	text-shadow: 0.15625vw 0.15625vw 0.625vw rgb(0 0 0 / 32%);
}

.horizontal-divider {
	width: -webkit-fill-available;
	min-height: 0.625vw;
	position: relative;
	margin: 0 3.125vw;
	background: linear-gradient(90deg, #0000, #ffffff87, #0000);
}

.trick-token-title {
	font-size: 8.75vw;
	font-weight: 900;
	color: #ffffff;
	text-shadow: 0.15625vw 0.15625vw 0.5vw rgba(0,0,0,0.2);
	margin: 3.125vw 3.125vw 0;
	display: flex;
	min-height: 12.5vw;
	justify-content: center;
	align-items: center;
	width: -webkit-fill-available;
	gap: 1.5625vw;
}

.lead-accordion-body {
	display: flex;
	flex-flow: column;
	gap: 3.125vw;
	height: 0;
	overflow: hidden;
	margin: 0;
	opacity: 0;
	transition: height 0.28s ease, opacity 0.2s ease, margin 0.2s ease;
	max-height: -webkit-fill-available;
	contain: layout paint;
}

.lead-accordion.open .lead-accordion-body {
	opacity: 1;
	margin: 0 0 3.125vw;
}

@keyframes hubBounce {
			0% { transform: scale(1); }
			42% { transform: scale(1.13); }
			70% { transform: scale(0.96); }
			100% { transform: scale(1); }
		}

@keyframes safeWobble {
			0% { transform: scale(1) rotate(0deg); }
			30% { transform: scale(1.7) rotate(-2deg); }
			65% { transform: scale(1.58) rotate(1.5deg); }
			100% { transform: scale(1.7) rotate(0deg); }
		}

@keyframes scaleDownTile {
			0% { transform: scale(1.7) rotate(0deg); }
			100% { transform: scale(1) rotate(0deg); }
		}

@keyframes pseudoShake {
			0% { transform: translateX(0) scale(1.05); }
			25% { transform: translateX(-0.9375vw) scale(1.05); }
			50% { transform: translateX(0.9375vw) scale(1.05); }
			75% { transform: translateX(-0.625vw) scale(1.05); }
			100% { transform: translateX(0) scale(1); }
		}

@keyframes pseudoFlash {
			0% { filter: brightness(1); }
			42% { filter: brightness(1.35) saturate(1.25); }
			100% { filter: brightness(1); }
		}

@keyframes scoreFly {
			0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
			18% { opacity: 1; transform: translate(-50%, -68%) scale(1.12); }
			100% { opacity: 0; transform: translate(-50%, -210%) scale(0.96); }
		}

@keyframes rejectFall {
			0% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
			30% { opacity: 1; transform: translate(-45%, 8vh) scale(0.96) rotate(-10deg); }
			100% { opacity: 0; transform: translate(-35%, 86vh) scale(0.62) rotate(28deg); }
		}

@keyframes rejectPopcorn {
	0% { transform: translate(-50%, -50%) scale(0.72) rotate(0deg); opacity: 1; }
	14% { transform: translate(calc(-50% + (var(--reject-x) * 0.18)), calc(-50% - var(--reject-hop))) scale(1.08) rotate(calc(var(--reject-rotate) * 0.25)); opacity: 1; }
	36% { transform: translate(calc(-50% + (var(--reject-x) * 0.46)), calc(-50% + 2vh)) scale(1.24) rotate(calc(var(--reject-rotate) * 0.55)); opacity: 0.98; }
	62% { transform: translate(calc(-50% + (var(--reject-x) * 0.72)), 42vh) scale(1.42) rotate(calc(var(--reject-rotate) * 0.82)); opacity: 0.82; }
	100% { transform: translate(calc(-50% + var(--reject-x)), 110vh) scale(1.62) rotate(var(--reject-rotate)); opacity: 0; }
	}

	.puzzle-picker-card,
	.run-card,
	.play-puzzle-btn,
	.puzzle-thumb {
		-webkit-tap-highlight-color: transparent;
	}

	.puzzle-picker-card:active,
	.run-card:active {
		transform: none;
		filter: none;
	}

	.puzzle-picker-card.selected::after {
		background: #ffffff82;
	}