/* tic-theme.css — the site's brand layer over Bootstrap 5.3.8 (stage 4,
   §18: BS3 → BS5 re-type). Palette and look carry over from the BS3-era
   rules; the comment below is the TIC-80 16-color source, kept verbatim:
BLACK      = 0, -- #1a1c2c
DARK_RED   = 1, -- #5d275d
DARK_BLUE  = 2, -- #b13e53
DARK_GRAY  = 3, -- #ef7d57
BROWN      = 4, -- #ffcd75
GREEN      = 5, -- #a7f070
RED        = 6, -- #38b764
GRAY       = 7, -- #257179
BLUE       = 8, -- #29366f
ORANGE     = 9, -- #3b5dc9
LIGHT_BLUE = 10, -- #41a6f6
LIGHT_GREEN= 11, -- #73eff7
PEACH      = 12, -- #f4f4f4
CYAN       = 13, -- #94b0c2
YELLOW     = 14, -- #566c86
WHITE      = 15, -- #333c57
*/

@font-face {
	font-family: "04b03Regular";
	src: url("/fonts/434.ttf");
	/* swap shows the fallback immediately and swaps once the pixel font
	   arrives — no invisible text, and the swap is preloaded away in the
	   layout <head> (§23 flash-of-unstyled-text fix). */
	font-display: swap;
}

:root {
	--brand-bg: #333c57;
	--brand-fg: #f4f4f4;
	--brand-muted: #94b0c2;
	--brand-deep: #566c86;
	--brand-link: #41a6f6;
	--brand-link-hover: #73eff7;
	--brand-danger: #b13e53;
	--brand-success: #38b764;

	/* BS5 defaults re-pointed at the brand (components consume these
	   variables, so the palette lands everywhere at once). */
	--bs-body-bg: var(--brand-bg);
	--bs-body-color: var(--brand-fg);
	--bs-body-font-family: "04b03Regular", "Courier New", ui-monospace, monospace;
	--bs-body-font-size: 1.25rem; /* 20px, like the reference rules */
	--bs-link-color: var(--brand-link);
	--bs-link-hover-color: var(--brand-link-hover);
	--bs-heading-color: var(--brand-fg);
	--bs-secondary-color: var(--brand-muted);
	--bs-emphasis-color: var(--brand-fg);
	--bs-danger: var(--brand-danger);
	--bs-danger-text-emphasis: var(--brand-danger);
}

html {
	position: relative;
	min-height: 100%;
}

body {
	background-color: var(--brand-bg);
	margin-bottom: 84px; /* room for the absolutely-placed footer */
}

h1, h2, h3, h4, h5, h6 {
	color: var(--brand-fg);
}

/* BS3 heading scale (§18 retype): BS5 headings are fluid and drift from
   the reference look; pin the BS3 sizes the site was designed with. */
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

/* The line under a section heading. Bootstrap leaves it 1rem from its
   neighbours, which under a 30px h2 puts it 8px below the text — close
   enough that it reads as an underline of the heading rather than as the
   line closing the section. Margins collapse, so 2rem here is 2rem from
   whatever sits above and below. */
hr {
	border: 0;
	border-top: 4px solid var(--brand-deep);
	opacity: 1;
	margin: 2rem 0;
}

a, a:hover, a:active { color: var(--brand-link); }
a:hover { color: var(--brand-link-hover); }

.text-body-secondary, .text-muted {
	color: var(--brand-muted) !important;
	word-wrap: break-word;
}

/* ---- site chrome (internal/pages layout) ---- */

/* the navbar sits directly on the content now (the old top hr is gone) —
   give the body a little top air */
.site-body { margin-top: 24px; }

.site-nav {
	background-color: var(--brand-muted);
	/* No vertical padding: the nav links fill the bar's full height so the
	   active tab reads as a tab, not a floating button (reference look). */
	padding: 0;
	/* The link's horizontal padding comes from Bootstrap's
	   --bs-navbar-nav-link-padding-x (0.5rem = 8px by default — too tight);
	   widen it here so the tabs don't crowd their text. */
	--bs-navbar-nav-link-padding-x: 1.25rem;
}

.site-nav .nav-link {
	font-size: 24px;
	color: var(--brand-bg);
	border-radius: 0;
	padding-top: .75rem;
	padding-bottom: .75rem;
	white-space: nowrap;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
	color: var(--brand-fg);
	background-color: transparent;
}

.site-nav .nav-link.active {
	background-color: var(--brand-bg);
	color: var(--brand-muted);
}

/* phones: the 24px tab bar overflows a phone viewport. Portrait (<576px)
   is tightest; landscape (<768px) is wider but still too narrow for 24px.
   Both shrink to a compact single row (the links never wrap mid-word). */
@media (max-width: 575.98px) {
	.site-nav {
		/* 0.3rem: with the <3 entry the 360px row has no slack at 0.4rem */
		--bs-navbar-nav-link-padding-x: 0.3rem;
	}
	.site-nav .nav-link {
		/* 12px: the bell + <3 + name overflow 360-390px phones at 14px (measured) */
		font-size: 12px;
		padding-top: .5rem;
		padding-bottom: .5rem;
	}
}
@media (min-width: 576px) and (max-width: 767.98px) {
	.site-nav {
		/* 0.4rem: the member row overflows the 540px container at 0.6rem */
		--bs-navbar-nav-link-padding-x: 0.4rem;
	}
	.site-nav .nav-link {
		font-size: 17px;
		padding-top: .6rem;
		padding-bottom: .6rem;
	}
}
/* tablets: the 24px bar only fits a 720px container with tighter gaps now
   that the member row carries the bell, the <3 entry and the name */
@media (min-width: 768px) and (max-width: 991.98px) {
	.site-nav {
		--bs-navbar-nav-link-padding-x: 0.5rem;
	}
}

.site-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 84px;
}

/* ---- components ---- */

.btn {
	border: 0;
	border-radius: 0;
	font-size: 20px;
	background-color: var(--brand-muted);
	color: var(--brand-bg);
}

.btn:hover, .btn:focus {
	background-color: var(--brand-fg);
	color: var(--brand-bg);
}

.btn-lg { font-size: 24px; }

/* the reference's .btn-default is the plain .btn at title size
   (views/home.ejs VIEW ALL...; BS3-era rule, re-typed) */
.btn-default { font-size: 24px; }

/* The destructive actions (self-service-deletion). There is no reference
   .btn-danger to re-type, so this is the theme's own: the palette's red,
   and .btn-default's size — a danger button a size smaller than the Cancel
   beside it reads as a mistake rather than as a warning. Without this rule
   `btn-danger` is Bootstrap's variant on the theme's flat .btn, which is
   to say no colour at all and the wrong size. */
.btn-danger {
	font-size: 24px;
	background-color: var(--brand-danger);
	color: var(--brand-fg);
}

.btn-danger:hover, .btn-danger:focus {
	background-color: var(--brand-fg);
	color: var(--brand-danger);
}

/* A block that destroys something: the cartridge confirmation and the
   account deletion on the profile. The rule down the side marks it before a
   word is read, and the button that does the destroying is the one control
   that carries the colour — the fields around it stay ordinary, because a
   form whose every part is red cannot show which part acts, and the
   headings stay white for the same reason: a red one competes with the
   button for the eye instead of pointing at it. */
.danger-zone {
	border-left: 4px solid var(--brand-danger);
	padding-left: 1.25rem;
	margin: 2.5rem 0;
}


.btn-link {
	color: var(--brand-fg);
	background-color: var(--brand-bg);
	text-decoration: none;
}

.btn-link:hover {
	color: var(--brand-fg);
	background-color: var(--brand-deep);
}

.form-control {
	background-color: var(--brand-deep);
	border: 4px solid var(--brand-muted);
	border-radius: 0;
	font-size: 20px;
	padding: 6px 10px;
	height: 46px;
	color: var(--brand-fg);
}

.form-control:focus {
	background-color: var(--brand-deep);
	border-color: var(--brand-link);
	color: var(--brand-fg);
	box-shadow: none;
}

.form-control::placeholder { color: var(--brand-muted); opacity: 1; }
.form-label { color: var(--brand-fg); font-size: 20px; }

/* The rule under the last row of a table is Bootstrap's cell border, and it
   looks exactly like the theme's section `hr` while meaning something else
   entirely — the end of the data, not the end of the section. A table that
   needs a line under it gets a real one; this removes the impostor. */
.table > tbody > tr:last-child > td {
	border-bottom: 0;
}

/* the upload form's file input: the browser's "Choose file" button is a
   faint grey by default — restyle it on the brand palette and lift the
   selected file name off the deep backing */
.form-control[type="file"] {
	padding: 6px;
	height: auto;
}
.form-control[type="file"]::file-selector-button {
	background-color: var(--brand-muted);
	color: var(--brand-bg);
	border: 0;
	border-radius: 0;
	padding: 6px 12px;
	margin-right: 10px;
	font: inherit;
	cursor: pointer;
}

.alert {
	border: 0;
	border-radius: 0;
	padding: 20px;
	color: var(--brand-fg);
}

.alert.error, .alert-danger { background-color: var(--brand-danger); }
.alert.success, .alert-success { background-color: var(--brand-success); }

/* the category blurb sits under the pills — give it breathing room */
.catalog-blurb { margin-top: 20px; }

/* catalog pills (the reference's nav-pills category tabs) */
.nav-pills { font-size: 24px; }
.nav-pills .nav-link { color: var(--brand-fg); border-radius: 0; padding: .4rem .9rem; }
.nav-pills .nav-link:hover, .nav-pills .nav-link:focus { color: var(--brand-fg); }
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover { background-color: var(--brand-fg); color: var(--brand-bg); }

/* the sort row under the category pills (play.ejs nav-small): the
   reference sets these to 20px against the pills' 24px */
.nav-pills.nav-small { font-size: 20px; margin-bottom: 24px; }
.nav-pills.nav-small .nav-link { padding: .2rem .7rem; }

/* pixelated covers and logo (thumb grid, cards) */
img.pixelated {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}

/* avatars are stored as 16x16 sprites (internal/avatar, roadmap §16)
   and shown 4-8x up — scale them sharp, not smooth (dev tree, card
   comments) */
img[src^="/img/users/"] {
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

/* catalog cards (views/thumb.ejs): .cart spaces every card (the
   reference's 60px), .cover-card is its .thumbnail look on a custom
   class — border frame + muted backing so covers sit on the dark ground */
.cart { margin-bottom: 60px; }

.cover-card {
	border: 4px solid var(--brand-muted);
	border-radius: 0;
	padding: 0;
	background-color: var(--brand-muted);
}

.cover-card a { display: block; line-height: 0; }

.stub { color: var(--brand-muted); }

/* catalog search & grid tails (stage 4b, §12/§20): the no-JS search form
   above the grid, the no-results marker and the end-of-feed block */
.catalog-search { max-width: 420px; margin: 0 0 30px; }
.catalog-more-wrap { margin: 10px 0 30px; }
.catalog-more.loading { opacity: .7; pointer-events: none; }
.no-results, .catalog-end { margin: 30px 0; }

/* avatar editor (profile page, #12): the 256x256 canvas holds the 16x16
   sprite at x16 (16px per sprite pixel); the palette bar is the 16
   Sweetie16 colors. Both render sharp, not smoothed. */
.avatar-editor { margin-bottom: 24px; }
.avatar-preview { margin-bottom: 10px; }
#avatar-canvas {
	width: 256px;
	height: 256px;
	image-rendering: pixelated;
	background: #1a1c2c;
	border: 4px solid var(--brand-muted);
	cursor: pointer;
}
#avatar-palette {
	width: 256px;
	height: 16px;
	image-rendering: pixelated;
	cursor: pointer;
}

/* a value inside a muted line reads darker than its label: the date
   client.js fills in, and the language the card states */
.date, .lang { color: var(--brand-deep); }
.tiny-label { font-size: 16px; }

td { padding-right: 24px; }
tr { vertical-align: top; }
p { margin: 20px 0; }

/* card page (stage 4, /play/{id}/{slug}): the inline styles of the
   reference player.ejs/cart.ejs re-typed as classes (§18) */
#game-border { width: 100%; overflow: hidden; }
#game-cover { width: 100%; height: 100%; background-color: #1a1c2c; cursor: pointer; text-align: center; color: #fff; display: flex; justify-content: center; align-items: center; }
#game-cover .game-cover-img { width: 100%; height: 100%; opacity: .2; }
#canvas { width: 100%; height: 100%; image-rendering: pixelated; display: none; }
.click-to-play { font-size: 34px; position: absolute; }
/* The full-screen player page (player-layout.html): the box is the whole window, and the player sizes its own picture in it. */
body.player { margin: 0; background: #1a1c2c; }
body.player #game-border { width: 100%; height: 100vh; height: 100dvh; }
.comments { table-layout: fixed; width: 100%; }
.comment-user { width: 150px; text-align: center; word-wrap: break-word; }
.comment-text { word-wrap: break-word; }

/* The member feed (/notifications, ADR-0008): the collapsed likers' avatar
   strip, the read watermark's divider, and the rows' air. Its comment rows
   are the card's comments table exactly (150px author column, avatar and
   name centred) — but table-layout: fixed sizes the columns by the table's
   FIRST row, and a feed's first row is usually a like row spanning both,
   which came out as two equal columns. The colgroup pins the author column
   whatever the first row is. */
.feed-avatar { vertical-align: middle; }
.feed-divider td { padding-top: 24px; }
.comments-user-col { width: 150px; }
.feed-like td { padding-top: 12px; padding-bottom: 24px; }

/* /learn documentation (stage 4, §19): the goldmark output of the
   engine's learn.md inside the shared chrome. The doc keeps the site's
   pixel font (code included) and layers inline syntax colors on top; its
   markdown tables (RAM/VRAM maps, command/API listings) take their
   borders and header tint from the same palette as the rest of the site —
   no new colors. */
.learn {
	font-family: "04b03Regular", "Courier New", ui-monospace, monospace;
	font-size: 1.25rem; /* the pixel font reads best at the site's body size */
	line-height: 1.6;
	color: var(--brand-fg);
}
.learn h1, .learn h2, .learn h3, .learn h4, .learn h5, .learn h6 {
	color: var(--brand-fg);
}
.learn pre {
	background: #1a1c2c;
	border: 1px solid var(--brand-deep);
	padding: 12px;
	overflow-x: auto;
	font-family: inherit; /* pixel code, matching the rest of the doc */
}
.learn code {
	font-family: inherit; /* pixel, not Bootstrap's monospace reboot */
	font-size: inherit;
	color: var(--brand-fg); /* default token = FG; the syntax spans below override */
}
.learn pre code { color: var(--brand-fg); }
/* inline-code syntax colors — the TIC-80 editor theme (palette indices):
   STRING=4 (#ffcd75), NUMBER=11 (#73eff7), API=5 (#a7f070), SIGN=13
   (#94b0c2). KEYWORD=3 and COMMENT=14 are unused: the console help has
   no language keywords or comments. */
.learn .syntax-string  { color: #ffcd75; }
.learn .syntax-number  { color: #73eff7; }
.learn .syntax-api     { color: #a7f070; }
.learn .syntax-sign    { color: #94b0c2; }
.learn table {
	border-collapse: collapse;
	width: auto; /* fit the content, not the whole column */
	margin: 20px 0;
}
.learn th, .learn td {
	border: 4px solid var(--brand-deep); /* gray grid, as before */
	padding: 6px 12px;
	text-align: left;
	vertical-align: top;
}
.learn th {
	background-color: var(--brand-deep);
	color: var(--brand-fg);
}
.learn img { max-width: 100%; }