/* Shared styles for the content pages. Each page shows its content in a framed,
   scrolling panel in the middle of the animated background (stage.css / stage.js). */

body {margin: 0}
/* The panel: same size and look as the old content frame. Fixed in the middle,
   scrolls on its own, so the background around it never moves. */
#panel {position: fixed; inset: 0; margin: auto; width: 60vw; max-width: 900px; height: 80vh;
	border: 5px solid #000000; overflow: auto; overscroll-behavior: contain; container-type: inline-size;
	background: #555555 url(cogs.jpg) no-repeat center / calc(600px * var(--zoom, 1))}
/* Phones and other small screens: the panel fills the screen */
@media (max-width: 700px), (max-height: 500px) {
	#panel {width: calc(100vw - 26px); max-width: none; height: calc(100dvh - 26px)}
}
/* The content keeps the old 600px design proportions: fit.js sets --zoom from the panel width */
#content {zoom: var(--zoom, 1); margin: 15px}	/* margin, not padding: merges with the first heading's margin, as the old page margin did */

/* Letter spacing for all buttons: change this one value (0 = normal) */
:root {--btn-spacing: 2px}

@font-face {font-family: "Bearpaw"; src: url(fonts/BEARPAW_.ttf) format("truetype");}

/* "< MAIN" button back to the menu (replaces the old back.jpg image) */
a.mainbtn {float: left; padding: 10px calc(10px - var(--btn-spacing)) 3px 10px; letter-spacing: var(--btn-spacing); border: 1px solid #ffffff;	/* more on top: capitals leave the space below unused */
	font: normal 46px/.55 Bearpaw, verdana, sans-serif; color: #ffffff; text-decoration: none;
	transition: background-color .15s}	/* no fixed size: the text plus padding sets the box */
a.mainbtn:hover, a.mainbtn:focus-visible {background-color: #000000}
a.mainbtn {margin-bottom: 20px}			/* space between the button and the heading below it */
a.mainbtn + br + br + br {clear: left}	/* heading starts below the button, so it stays centred */
a.mainbtn .arrows {font: bold .5em/0 verdana, sans-serif; vertical-align: .12em; letter-spacing: -1px}	/* Bearpaw draws < as soft curves */

/* Text buttons (replace the old armory/ref/easy/medium/hard guide images) */
a.btn {display: inline-block; min-width: calc(195px + 12 * var(--btn-spacing));	/* fits MEDIUM GUIDE (12 chars) */
	padding: 10px calc(10px - var(--btn-spacing)) 3px 10px; letter-spacing: var(--btn-spacing); border: 2px solid #ffffff; background-color: #aaaaaa;
	font: normal 46px/.55 Bearpaw, verdana, sans-serif; color: #ffffff; text-decoration: none; text-align: center;
	transition: background-color .15s}
a.btn:hover, a.btn:focus-visible {background-color: #000000}

/* Tables keep their old quirks-mode behaviour of not inheriting font settings
   (the page text sits inside a 12px H1, but table text was always normal size) */
table {white-space: normal; line-height: normal; font-weight: normal; font-size: medium;
	font-variant: normal; font-style: normal; text-align: start}
/* ...and two more old table habits: no top margin on a cell's first element,
   and no extra line height under images that sit alone in a cell (fit.js marks those) */
td > :first-child, th > :first-child {margin-top: 0}
.imgcell {line-height: 0}

/* Narrow panel (phones): a little more room for the content */
@container (max-width: 500px) {
	#content {margin: 8px}
	table {font-size: 13px}
	td, th {overflow-wrap: anywhere}	/* long words may break so wide tables still fit */
	.mobile-hide {display: none}	/* Producer and Comments columns (marked by fit.js) */
}