/*
 * Shadows of War 2 theme.
 *
 * Loads after leaderboard.css and overrides its tokens, so the widget picks up
 * the game's look without leaderboard.css being touched - pull a newer widget
 * and this file still wins.
 *
 * Values come from the game's own stylesheet. Where a name appears in a comment
 * below (--ui-bg, --ui-green, ...) it is the variable this was taken from, so a
 * change over there can be traced to here.
 *
 * ---------------------------------------------------------------------------
 * Fonts
 * ---------------------------------------------------------------------------
 *
 * NORD-Medium.ttf and NORD-Light.ttf ship next to this file, so the widget
 * renders in the game's face with no extra step. They are licensed from
 * Designova (https://designovafonts.com/licensing) - fine to carry in a private
 * repository, but if this repository is ever made public they must be removed
 * from git and dropped into assets/ at deploy time instead, which is exactly
 * what that mount is for.
 *
 * The Content-Security-Policy allows font-src 'self', so a local file works and
 * a CDN does not. If the files go missing the widget falls back to the system
 * UI font - it looks wrong, but nothing breaks.
 *
 * NORD is an all-caps face: lowercase input renders as capitals, and the
 * numeral one is a bare stem much like a capital I. Both are true of the game's
 * own UI, so the leaderboard matches it. If the digits ever need to be
 * unambiguous, point --font-numeric at another face and only the table changes.
 */

@font-face {
	font-family: "NORD-Medium";
	src: url("NORD-Medium.ttf") format("truetype");
	font-display: swap;
}

@font-face {
	font-family: "NORD-Light";
	src: url("NORD-Light.ttf") format("truetype");
	font-display: swap;
}

:root {
	--font: "NORD-Medium", system-ui, -apple-system, sans-serif;
	/* The game uses the light weight for body copy - its message of the day -
	   so the widget's low-emphasis text follows suit. */
	--font-light: "NORD-Light", system-ui, -apple-system, sans-serif;
	--font-numeric: "NORD-Medium", ui-monospace, system-ui, sans-serif;

	/* Panels. --ui-bg is the game's stats panel, --ui-bg-dark its buttons. */
	--bg: rgb(23, 30, 39);
	--panel: #273442;
	--panel-alt: rgb(23, 30, 39);

	/* The rules between rows read as thin light lines over the slate panel,
	   which semi-transparent white matches more closely than the game's opaque
	   --ui-border-muted (that one is for slider tracks on a lighter ground). */
	--border: rgba(255, 255, 255, 0.22);

	--text: #fff;
	--text-dim: rgba(255, 255, 255, 0.66);

	/* --ui-green. Used for the score figure, focus rings and the submit button. */
	--accent: #6ea526;
	--accent-soft: rgba(110, 165, 38, 0.16);
	--accent-flash: rgba(110, 165, 38, 0.42);

	/* The game's --ui-red (#780D1E) is a fill, not a text colour - as error text
	   on the slate panel it is close to unreadable. This is the same hue lifted
	   to a legible lightness. */
	--danger: #e2596d;

	/* Medal tones pulled toward the game's muted, slightly earthy palette; the
	   stock bright gold sat badly next to the green. */
	--gold: #c9a227;
	--silver: #c3cdd6;
	--bronze: #b07a44;

	/* The game has square corners throughout - panels, buttons, inputs. */
	--radius: 0px;
	--pad: 16px;
}

/* Light theme is not part of the game's look. The tokens are left alone rather
   than deleted so ?theme=light still produces something readable if it is ever
   opened outside the game. */

/* ------------------------------------------------------------------ panel -- */

.board {
	border: 1px solid rgba(255, 255, 255, 0.10);
}

/* The game heads its panels with an uppercase title between two rules. */
.board__head {
	border-bottom: 1px solid var(--border);
	padding-bottom: 10px;
}

.board__title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
}

.board__foot {
	border-top: 1px solid var(--border);
	padding-top: 10px;
}

/* ------------------------------------------------------------------ table -- */

.table th {
	letter-spacing: 0.08em;
}

/* The side badge is a chip in a UI with no rounded corners anywhere else. */
.side {
	border-radius: 0;
	letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------- controls -- */

/*
 * Buttons follow #mbutton: dark fill, green label, no border, and a green glow
 * plus a small lift on hover. The press displacement matches the game's
 * translateY(1px) scale(0.98).
 */
.button {
	background: rgb(23, 30, 39);
	color: var(--accent);
	border: none;
	border-radius: 0;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition:
		opacity 180ms ease-out,
		box-shadow 180ms ease-out,
		transform 120ms ease-out,
		filter 180ms ease-out;
}

.button:hover:not(:disabled) {
	opacity: 0.75;
	transform: translateY(-1px);
	filter: brightness(1.15);
	box-shadow: 0 0 8px rgba(110, 165, 38, 0.35);
	border-color: transparent;
}

.button:active:not(:disabled) {
	transform: translateY(1px) scale(0.98);
	filter: brightness(0.9);
}

.button:disabled {
	opacity: 0.3;
	background: #000;
	filter: grayscale(0.35);
}

/* The submit button is the one green fill on screen, matching the game's
   checked-checkbox treatment: green ground, dark glyph. */
.button--primary {
	background: var(--accent);
	color: rgb(23, 30, 39);
	opacity: 1;
}

.button--primary:hover:not(:disabled) {
	opacity: 1;
	box-shadow: 0 0 8px rgba(110, 165, 38, 0.45);
}

/* The name field follows #chatwrite: panel fill, white rule, green text, and a
   green rule with a glow on focus. */
.submit__input {
	background: #273442;
	border: 1px solid var(--text);
	border-radius: 0;
	color: var(--accent);
	transition:
		border-color 120ms ease-out,
		box-shadow 120ms ease-out;
}

.submit__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.submit__input:focus,
.submit__input:focus-visible {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 8px rgba(110, 165, 38, 0.35);
}

/* The game focuses with a thin white outline rather than a coloured ring. */
.button:focus-visible,
.row:focus-visible {
	outline: 1px solid var(--text);
	outline-offset: 2px;
}

.submit {
	border-radius: 0;
}

.submit__title,
.submit__label {
	letter-spacing: 0.08em;
}

.breakdown {
	border-radius: 0;
}