/* ======================================================================
   GLOBAL OPTIONS
   These rules apply to the entire HTML document unless overridden.
   ====================================================================== */
html {
    color-scheme: dark;
}
body {
    background: #000;					/* Sets the entire site background colour */
    color: #fff;						/* Sets default text colour */
    font-family: Verdana, Arial, sans-serif;	/* Sets the global font */
    font-size: 15px;					/* Sets the font size for all text, unless overruled below */
    margin: 2px 20px 20px 20px;			/* Adds spacing around whole site - top, left, bottom, right */
}
.redirect-msg {
    font-weight: bold;					/* Sets font weight for redirect messages in index.html */
}
.page {
    max-width: 1064px;					/* Limits page content width */
    margin: 0 auto;						/* Horizontally centres the content box */
    padding: 20px;						/* Adds inner spacing inside the content box */
    background-color: #111;				/* Sets background colour for the content box */
    border: 1px solid #333;				/* Creates border and sets colour around content box */
    border-radius: 10px;				/* Slightly rounded corners around content box */
    box-shadow: 0 0 10px #000;			/* Creates subtle shadow to lift the content box visually */
	overflow: auto;						/* THIS makes .page wrap around floats */
}
/* ======================================================================
   MAIN SITE & FURTHER READING HEADER IMAGES
   Left and right image at the top of main, and further reading pages.
   ====================================================================== */
.header-left {
    float: left;						/* Positions the image on the left side */
    margin-right: 10px;					/* Vertical gap between image and heading */
    margin-bottom: 110px;				/* Vertical gap below the image */
}
.header-right {
    float: right;						/* Positions the image on the right side */
    margin-left: 10px;					/* Space between left side of image and text */
    margin-bottom: 10px;				/* Vertical gap below the image */
}
/* ======================================================================
   HEADER IMAGES & GAME TITLE FOR GAME REVIEW PAGES ONLY
   The tape image & text, instructions image & text, box art and title.
   ====================================================================== */
.game-header-left {
    float: left;						/* Positions tape and instructions on the left side */
    text-align: center;					/* Centres images and text inside this block */
}
.game-header-right {
    float: right;						/* Positions box art on the right side */
    margin-left: 20px;					/* Gap between image and text */
    margin-bottom: 10px;				/* Gap below the image */
	height: 350px;						/* Box art height */
	border: 0px solid #fff;				/* Optional border round box art */
}
.game-header-right-load {
    float: right;						/* Positions load page box art on the right side */
	height: 350px;						/* Load page box art height */
	border: 0px solid #fff;				/* Optional border round load page box art */
}
.game-header-right-smaller {
    float: right;						/* Positions box art on the right side */
    margin-left: 20px;					/* Gap between image and text */
    margin-bottom: 10px;				/* Gap below the image */
	height: 250px;						/* Use for games without box art that use load screen */
	border: 0px solid #fff;				/* Optional border round box art */
}
/* TAPE IMAGE */
.game-header-left .tape-img {
    display: block;						/* Makes the tape image behave like a block element */
    margin-bottom: 6px;					/* Adjustable gap between tape image and title */
	border: 0px;						/* prevents white border on older browsers */
}
.game-header-left .tape-label {
    font-size: 12px;					/* Font size of tape image text */
    display: block;						/* Forces the text onto its own line */
    margin-bottom: 20px;				/* Adjustable gap between tape image label and instructions images */
}
.game-header-left .tape-label::after {
    content: 'Load Game';				/* Sets the label for the tape image */
}
/* INSTRUCTIONS IMAGE */
.game-header-left .instructions-img {
    display: block;						/* Makes the instructions image behave like a block element */
    margin-bottom: 4px;					/* Adjustable gap between instructions image and title */
	border: 0px;						/* prevents white border on older browsers */
}
.game-header-left .instructions-label {
    font-size: 12px;					/* Font size of instructions image text */
    display: block;						/* Forces the text onto its own line */
    margin-bottom: 50px;				/* Adjustable gap below Instructions label and intro section under it */
}
.game-header-left .instructions-label::after {
    content: 'Instructions';			/* Sets the label for the instructions image */
}
/* GAME TITLE & HEADER INFO TABLE */
.game-title {
    display: inline-block;				/* De-fuckupifier for heading! */
    margin-top: 0;						/* Margin above the title */
    margin-bottom: 20px;				/* Margin below the title */
	padding-left: 61px;					/* Left/right position of game title */
}
.game-title-load {
    display: inline-block;				/* De-fuckupifier for load page heading! */
    margin-top: 0;						/* Margin above the title */
    margin-bottom: 20px;				/* Margin below the title */
}
.info-header {
	padding-left: 57px;					/* Left/right position of header info table */
}
/* ======================================================================
   HEADINGS
   Controls spacing and size of all heading levels.
   h1 and h2 for normal use
   h3 and h4 for headings with sub heading directly underneath.
   ====================================================================== */
h1 {
    clear: left;						/* Forces h1 below the left-floating header image */
    font-size: 26px;					/* Font size for all main headings */
    margin-top: 10px;					/* Space above h1 */
    margin-bottom: 35px;				/* Space below h1 */
}
h2 {
    font-size: 18px;					/* Section subheading font size */
    margin-top: 0;						/* Keeps h2 tight to the GIF above it */
    margin-bottom: 10px;				/* Space below h2 */
}
h3 {
    clear: left;						/* Same float-clearing behaviour as h1 */
    font-size: 26px;					/* Same size as h1 (intentional) */
    margin-top: 10px;					/* Space above h3 */
    margin-bottom: 5px;					/* Smaller gap below h3 */
}
h4 {
    font-size: 14px;					/* Sub heading font size */
    margin-top: 0;						/* Tight to GIF above */
    margin-bottom: 38px;				/* Larger gap below h4 */
}
/* ======================================================================
   INTRO PARAGRAPH
   Boldens only the intro section paragraphs.
   ====================================================================== */
.intro p {
    font-weight: bold;					/* Makes intro section bold */
}
/* ======================================================================
   PARAGRAPHS (normal pages)
   ====================================================================== */
p {
    line-height: 21px;					/* Comfortable spacing for main content */
}
/* ======================================================================
   LINKS
   Applies to all standard hyperlinks.
   ====================================================================== */
a:link,
a:visited {
    color: #fff;						/* White links */
    text-decoration: none;				/* Removes underline */
    font-weight: bold;					/* Bold links */
}
a:hover {
    text-decoration: underline;			/* Underline on hover */
}
a.game {
    font-size: 12px;					/* Sets size of fonts in iframes */
}
.link-list a {
    margin-right: 4px;					/* Space between inline links */
}
/* ======================================================================
   IFRAME LINE HEIGHT
   Adjust line spacing inside iframes
   ====================================================================== */
.frame-body,
.frame-body p,
.frame-body li {
    line-height: 18px;					/* Line spacing inside iframes */
}
/* ======================================================================
   FLOATING IMAGES
   Used for GIF Elders and screenshots/photos etc.
   ====================================================================== */
.float-left {
    float: left;						/* Floats image left */
    margin-right: 15px;					/* Space between image and text */
    margin-bottom: 10px;				/* Space below image */
    border: 0px solid transparent;		/* Stabilises layout */
    padding-top: 0px;					/* space above the image */
}
.float-right {
    float: right;						/* Floats image right */
    margin-left: 10px;					/* Space between image and text */
    border: 0px solid transparent;		/* Stabilises layout */
    padding-top: 0px;					/* space above the image */
}
/* ======================================================================
   SECTION WRAPPERS
   Adds spacing between sections and draws a divider between them.
   To change gap between sections you need to adjust
   margin-top (both) and top: calc to the same number.
   To remove, keep margin-top: ??px; and remove everything else.
   Section2 is for pages where you don't want the divider.
   ====================================================================== */
.section + .section {
    margin-top: 80px;					/* Gap above each new section */
    position: relative;					/* Allows the fade line to be positioned inside this gap */
}
/* This draws the fade line BETWEEN sections, centred horizontally.
   The line sits halfway inside the margin gap above. */
.section + .section::before {
    content: "";						/* Creates the divider element */
    position: absolute;					/* Positions it relative to the section gap */
    top: calc(-80px / 2);				/* Places the line exactly in the middle of the gap */
    height: 2px;						/* Thickness of the divider */
    width: 80%;							/* Divider length (adjust as needed) */
    margin: 0 auto;						/* Centres the divider horizontally */
    left: 0;							/* Ensures centring works inside the section width */
    right: 0;
/* Fading line effect: transparent → light grey → transparent */
    background: linear-gradient(
        to right,
        transparent,
        #e0e0e0,
        transparent
    );
}
/* For pages with no divider required */
.section2 + .section2 {
    margin-top: 60px;					/* Gap above each new section */
}
/* ======================================================================
   UTILITIES
   ====================================================================== */
.clear {
    clear: both;						/* Forces next element below floats */
}
/* ======================================================================
   FOOTER
   ====================================================================== */
.footer {
    text-align: right;					/* Aligns footer text right */
    font-size: 12px;					/* Footer text size */
    margin-top: 80px;					/* Space above footer */
	color: #888;						/* Colour of footer text */
    opacity: 1.0;						/* Optional transparency, 1.0 is none */
}
.footer-meta::after {					/* Alter last updated date */
    content: " | Updated Aug 2026";
}
/* ======================================================================
   BACK LINK
   ====================================================================== */
.back-link {
    margin: 0;							/* Removes default margins */
    padding: 0;							/* Removes default padding */
    margin-top: 60px;					/* Space above back link */
    font-weight: bold;					/* Bold text */
}
.back-link a::after {
    content: "Go Back";					/* Changes label for back link on some pages */
}
/* ======================================================================
   IMAGES WITH CAPTIONS
   ====================================================================== */
.photo-block-left {
    float: left;						/* Floats photo left */
    margin-right: 10px;					/* Space between photo and text */
    text-align: left;					/* Text alignment */
}
.photo-block-right {
    float: right;						/* Floats photo right */
    margin-left: 10px;					/* Left margin */
    text-align: right;					/* Text alignment */
}
.caption {
    font-size: 12px;					/* Caption text size */
    line-height: 18px;					/* Caption spacing */
    margin-top: 5px;					/* Space above caption */
	margin-bottom: 5px;					/* Space below caption */
}
/* ======================================================================
   LIST STYLES
   ====================================================================== */
.section ul {
    list-style: none;					/* Removes default bullets */
    padding-left: 0;					/* Removes default indent */
}
.section li {
    position: relative;					/* allows absolute bullet positioning */
    padding-left: 1.2em;				/* indent text so wrapped lines align */
}
.section li::before {
    content: "•";						/* Inserts custom bullet */
    position: absolute;					/* bullet should not push the text around */
    left: 0;							/* bullet sits at the left edge */
	top: 0;								/* bullet sits at the top edge */
}
/* ======================================================================
   ZXSA MODERN LAYOUT (REPLACES FRAMESET)
   zxsa-wrapper width should equal equal zxsa-frame & zxsa-main width
   unless you want to offset the page layout for better centreing.
   ====================================================================== */
/* Remove body margins ONLY on the new layout page */
body.zxsa-layout {
    margin: 0;							/* Remove browser default margins */
    padding: 0;							/* Remove browser default padding */
}
/* Outer wrapper: fixed-width block, centred, full height */
.zxsa-wrapper {
    max-width: 1284px;						/* Should equal zxsa-frame & zxsa-main width */
    height: 100vh;						/* Full viewport height */
    margin: 0 auto;						/* Centre horizontally */
    display: flex;						/* Left + main area side-by-side */
    flex-direction: row;				/* row-reverse=iframe right, row=iframe left */
    overflow: hidden;					/* Prevent scrollbars on wrapper */
}
/* navigation iframe */
.zxsa-frame {
    width: 220px;						/* Fixed width for navigation iframe*/
    height: 100vh;						/* Full height */
    border: none;						/* Remove iframe border */
    overflow: hidden;					/* Prevent scrollbars inside iframe */
}
/* Main area: top + bottom stacked */
.zxsa-main {
    width: 1064px;						/* Main area width, must be 40px over what you require */
    height: 100vh;						/* Full height */
    display: flex;						/* Stack top + bottom vertically */
    flex-direction: column;
    overflow: hidden;					/* Prevent scrollbars on container */
}
/* Top bar iframe */
.zxsa-top {
    height: 50px;						/* Fixed height for top navigation bar */
    border: none;						/* Remove iframe border */
    overflow: hidden;					/* Prevent scrollbars inside top iframe */
}
/* Main content iframe container */
.zxsa-bottom {
    flex: 1;							/* Fill remaining vertical space */
    overflow: hidden;					/* Container itself never scrolls */
}
/* All iframes default to no scrollbars */
iframe {
    width: 100%;						/* Fill container width */
    height: 100%;						/* Fill container height */
    border: none;						/* Remove borders */
    overflow: hidden;					/* Default: no scrollbars */
}
/* Only the main content iframe scrolls */
.zxsa-bottom iframe {
    overflow-y: auto !important;		/* Allow vertical scrolling */
    overflow-x: hidden !important;		/* Prevent horizontal scrolling */
}
/* Top iframe never scrolls */
.zxsa-top iframe {
    overflow: hidden !important;		/* Force no scrollbars */
}
/* ======================================================================
   FIX: .page normally forces scrollbars — disable inside iframe layout
   ====================================================================== */
body.zxsa-layout .page {
    overflow: visible !important;		/* Prevent .page from forcing scrollbars */
}
/* ======================================================================
   TOP FRAME FIX — prevents scrollbars in zxsa_frame_top.html
   ====================================================================== */
body.zxsa-topframe {
    margin: 0 !important;				/* Remove global body margins */
    padding: 0 !important;				/* Remove global body padding */
    overflow: hidden !important;		/* Prevent scrollbars */
}
/* Remove margins/padding from everything inside the top iframe */
body.zxsa-topframe * {
    margin: 0 !important;				/* Remove element margins */
    padding: 0 !important;				/* Remove element padding */
    line-height: 50px;					/* Vertically centre text inside 50px iframe */
}