// Shared UI theme tokens. Import this into a component's .razor.scss with `@import "Theme.scss";`
// so the font (and palette) are defined in ONE place. To change the UI font everywhere, edit $font.
$font: "m6x11plus";

// Monospaced, used for digit runs that
// want fixed-width cells — leaderboard times/scores, score tallies, the replay clock — so columns
// line up and numbers don't jitter as they change. $font stays the default for prose and names.
$font-mono: "m6x11plus";

// Game palette (matches the original BudgetBoy swatches).
$white: #f8f5e6;   // game WHITE  (248,245,230)
$black: #3a404c;   // game BLACK  (58,64,76)
$player-name: #f4f0c7;

// Web links (workshop author credit): a muted blue, brighter on hover. Judged in OKLCH like the
// rest of the palette (L≈0.70 / C≈0.08 / H≈250), not a saturated browser blue.
$link: #7fa6cc;
$link-hover: #a9c8e6;

// Score outcomes: victories read bright and warm; incomplete runs stay muted.
$score-victory: #f0df80;
$score-non-victory: #8f9068;

// Hard offset shadow under the square letterbox buttons. Plain dark-with-alpha so it reads on
// both the dark in-game letterbox and the light rolled menu backgrounds.
$square-btn-shadow: rgba( 0, 0, 0, 0.45 );

// s&box requires mouse-down and mouse-up to resolve to the exact same panel before emitting a
// click. Button contents are presentation only, so keep labels, icons and badges from becoming
// separate hit targets as animated or pressed buttons move beneath the cursor.
button > * {
	pointer-events: none;
}

// Square 72px letterbox icon button (gear, home, test-play, …) — ONE shared look for every
// screen: dark body, accent border, a 40×40 hand-editable pixel-art icon (drawn white, coloured
// via background-tint), and a hard drop shadow. On press the face sinks INTO the shadow: the
// translate + the remaining shadow offset always sum to the resting 6px, so the shadow's outer
// edge stays put and only the face moves (same trick as the title menu's text buttons).
// Per-screen rules add ONLY position and accent colours (border-color / .img background-tint).
.square-btn {
	width: 72px;
	height: 72px;
	justify-content: center;
	align-items: center;
	pointer-events: all;
	cursor: blank-hand;
	background-color: rgba( $black, 0.6 );
	border: 4px solid $white;
	border-radius: 0;
	box-shadow: 6px 6px 0 $square-btn-shadow;
	transition: background-color 0.1s ease;

	.img {
		width: 40px;
		height: 40px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		image-rendering: pixelated;
		background-tint: $white;
	}

	&:hover {
		background-color: rgba( $black, 0.9 );
	}

	&:active {
		transform: translate( 2px, 2px );
		box-shadow: 4px 4px 0 $square-btn-shadow;
	}

	// Icon images: 40×40 white-on-transparent PNGs in Assets/ui/icons, one class per glyph.
	&.i-home .img { background-image: url( "ui/icons/icon_home.png" ); }
	&.i-edit .img { background-image: url( "ui/icons/icon_edit.png" ); }
	&.i-gear .img { background-image: url( "ui/icons/icon_gear.png" ); }
	&.i-close .img { background-image: url( "ui/icons/icon_close.png" ); }
	&.i-reload .img { background-image: url( "ui/icons/icon_reload.png" ); }
	&.i-restart .img { background-image: url( "ui/icons/icon_restart.png" ); }
	&.i-back .img { background-image: url( "ui/icons/icon_back.png" ); }
	&.i-play .img { background-image: url( "ui/icons/icon_play.png" ); }
	&.i-browse .img { background-image: url( "ui/icons/icon_browse.png" ); }
	&.i-clear .img { background-image: url( "ui/icons/icon_clear.png" ); }
	&.i-share .img { background-image: url( "ui/icons/icon_share.png" ); }
	&.i-import .img { background-image: url( "ui/icons/icon_import.png" ); }
	&.i-gif .img { background-image: url( "ui/icons/icon_gif.png" ); }
	&.i-help .img { background-image: url( "ui/icons/icon_help.png" ); }
	&.i-heart .img { background-image: url( "ui/icons/icon_heart.png" ); }
	&.i-heart-outline .img { background-image: url( "ui/icons/icon_heart_outline.png" ); }
	&.i-check .img { background-image: url( "ui/icons/icon_check.png" ); }
	&.i-trophy .img { background-image: url( "ui/icons/icon_trophy.png" ); }
	&.i-thumbsup .img { background-image: url( "ui/icons/icon_thumbsup.png" ); }
	&.i-replay .img { background-image: url( "ui/icons/icon_replay.png" ); }
	&.i-arrow-left .img { background-image: url( "ui/icons/icon_arrow_left.png" ); }
	&.i-arrow-right .img { background-image: url( "ui/icons/icon_arrow_right.png" ); }
}