/* Everything outside the board: splash, menu, sheets, store, results. */

/* -------------------------------------------------------------- splash */

.preloader-scene {
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.preloader-crown {
	width: 78px;
	animation: crown-bob 1.6s ease-in-out infinite;
}

.preloader-title {
	font-size: 30px;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
}

.preloader-loading {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--ink-muted);
	animation: pulse 1.4s ease-in-out infinite;
}

@keyframes crown-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

@keyframes pulse {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

/* ---------------------------------------------------------------- menu */

/*
 * Measured off a 1179px-wide capture: the stats strip at the top, the wordmark
 * starting 13.7% down, five plain text entries on a 194px pitch through the
 * middle, and the sound toggle near the bottom.
 */
.main-scene {
	container-type: inline-size;
	align-items: center;
	padding-top: calc(10px + env(safe-area-inset-top));
	padding-bottom: calc(6px + env(safe-area-inset-bottom));
	padding-left: 0;
	padding-right: 0;
}

.main-menu {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7.3cqw;
	width: 100%;
}

/* Plain text, no rules and no fill -- the original has nothing but the words. */
.menu-entry {
	padding: 0;
	border: none;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 9.2cqw;
	line-height: 1;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.12s ease;
}

.menu-entry:active,
.menu-entry:hover { color: var(--orange); }

.main-scene .sound-button {
	position: static;
	margin-bottom: 8%;
	padding: 3cqw;
}

.main-scene .sound-icon {
	width: 12cqw;
	height: auto;
	opacity: 1;
}

/* -------------------------------------------------- stacked sheet screens */

.sheet-scene {
	justify-content: center;
	padding: var(--gutter);
}

.sheet {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	background: var(--paper);
	border: 1px solid var(--panel-line);
	border-radius: var(--radius);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.sheet.tall {
	height: 100%;
}

.sheet-title {
	padding: 20px 16px 6px;
	text-align: center;
	font-size: 18px;
	letter-spacing: 0.26em;
	text-indent: 0.26em;
}

.sheet-subtitle {
	margin: 0 0 12px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--ink-muted);
}

.sheet-body {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--panel-line);
	min-height: 0;
}

.sheet-body.scroll {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sheet .sound-button {
	position: static;
	align-self: center;
	padding: 12px;
}

.lang-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var(--panel-line);
}

.lang-button {
	min-width: 54px;
	padding: 8px 0;
	border: 1px solid var(--panel-line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink-muted);
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.2em;
	cursor: pointer;
}

.lang-button.active {
	background: var(--orange);
	border-color: var(--orange);
	color: var(--paper);
}

/* --------------------------------------------------------- leaderboard */

.leaderboard-list {
	padding: 8px 0;
}

.empty-state {
	padding: 48px 20px;
	text-align: center;
}

.empty-title {
	margin: 0 0 8px;
	font-size: 15px;
	letter-spacing: 0.24em;
	color: var(--ink-muted);
}

.empty-hint {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
	opacity: 0.7;
}

.leaderboard-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--panel-line);
	font-size: 14px;
}

.leaderboard-row .rank { color: var(--orange); min-width: 34px; }
.leaderboard-row .name { flex: 1; }

.leaderboard-own {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-top: 1px solid var(--panel-line);
	background: var(--panel);
	font-size: 13px;
	letter-spacing: 0.18em;
}

/* -------------------------------------------------------- achievements */

.achievement-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-line);
}

.achievement-icon {
	width: 42px;
	height: 42px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.35;
}

.achievement-row.unlocked .achievement-icon {
	filter: none;
	opacity: 1;
}

.achievement-text {
	flex: 1;
	min-width: 0;
}

.achievement-title {
	font-size: 13px;
	letter-spacing: 0.18em;
}

.achievement-desc {
	margin: 2px 0 6px;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}

.progress {
	height: 3px;
	background: var(--panel);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--orange);
	transition: width 0.3s ease;
}

.achievement-state {
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--ink-muted);
	min-width: 56px;
	text-align: right;
}

.achievement-row.unlocked .achievement-state {
	color: var(--orange);
}

/* ---------------------------------------------------------------- store */

.store-bank {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-bottom: 12px;
	font-size: 15px;
}

.store-bank img {
	width: 18px;
	height: 18px;
}

.store-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 12px;
}

.store-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--panel);
	cursor: pointer;
	font: inherit;
}

.store-tile.owned { background: #e9e9ea; }

.store-tile.selected {
	background: var(--paper);
	border-color: var(--orange);
}

.store-crown {
	width: 58%;
	object-fit: contain;
}

.store-tile.locked .store-crown {
	width: 38%;
	opacity: 0.45;
}

.store-price {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--ink-muted);
}

.store-price img {
	width: 13px;
	height: 13px;
}

/* -------------------------------------------------------------- warning */

.warning-scene {
	align-items: center;
	justify-content: center;
	background: rgba(26, 26, 26, 0.45);
}

.warning-box {
	width: 100%;
	max-width: 300px;
	padding: 26px 0 0;
	background: var(--paper);
	border-radius: var(--radius);
	text-align: center;
	overflow: hidden;
}

.warning-line1 {
	margin: 0 0 4px;
	font-size: 16px;
	letter-spacing: 0.16em;
}

.warning-line2 {
	margin: 0 0 22px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
}

/* -------------------------------------------------------------- results */

.result-scene {
	align-items: center;
	justify-content: space-between;
	padding-top: calc(36px + env(safe-area-inset-top));
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 26px 0;
	background: var(--panel);
}

.result-crown {
	width: 86px;
	object-fit: contain;
	animation: crown-drop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes crown-drop {
	from { transform: translateY(-40px) scale(0.7); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.result-score {
	font-size: 58px;
	letter-spacing: 0.04em;
}

.result-flag {
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--orange);
}

.result-flag.muted { color: var(--ink-muted); }

.result-share-text {
	margin: 14px 0 0;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--ink);
}

.result-actions {
	width: 100%;
	border-top: 1px solid var(--panel-line);
}

/* -------------------------------------------------------------- credits */

.credits-scene {
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.96);
}

.credits-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.credits-crown { width: 56px; }

.credits-line {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
}

.credits-line.small { font-size: 10px; letter-spacing: 0.24em; }

.credits-logo {
	width: 96px;
	object-fit: contain;
	opacity: 0.75;
}

.leaderboard-row .score { color: var(--ink); }