/* Base reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

/* Design tokens */
:root {
 --bg-dark: #181a1b;
 --bg-mid: #2b2f31;
 --bg-light: #ffffff;
 --surface: #f7f7f7;

 --text-dark: #222222;
 --text-mid: #bbbbbb;
 --text-light: #ffffff;

 --link: #00aaff;
 --primary: #007bff;
 --primary-hover: #0056b3;
 --accent: #0062cc;
 --accent-hover: #004a99;

 --border: #e2e2e2;
 --border-dark: #333;
 --disclaimer-bg: #fff9c4;
 --disclaimer-border: #f0e68c;
}

/* Galaxy canvas sits behind content */
#galaxy {
 position: fixed;
 inset:0;
 width:100%;
 height:100%;
 z-index:0;
 pointer-events:none;
 display:block;
}

/* Starfield canvas sits behind content */
#starfield {
 position: fixed;
 inset:0;
 width:100%;
 height:100%;
 z-index:0;
 pointer-events: none;
 display: block;
}

/* Ensure main site chrome is above canvases */
.site-header, .site-footer, main, #game-container { position: relative; z-index:1; }

/* Shared header/footer */
.site-header { background: var(--bg-mid); color: var(--text-light); }
.site-footer { background: var(--bg-mid); color: var(--text-light); }

.site-header-inner,
.site-footer-inner {
 max-width:1100px;
 margin:0 auto;
 padding:12px 16px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap:12px;
 flex-wrap: wrap;
}

.site-title { font-size:1.1rem; font-weight:700; }
.site-header a:not(.btn) { color: var(--link); text-decoration: none; }
.site-header a:not(.btn):hover { text-decoration: underline; }

.site-footer a { color: var(--link); text-decoration: none; font-weight:600; }
.site-footer a:hover { text-decoration: underline; }

/* Buttons (match fullscreen button) */
.btn {
 display: inline-block;
 padding:10px 20px;
 font-size:16px;
 border: none;
 background-color: var(--primary);
 color: var(--text-light);
 cursor: pointer;
 border-radius:6px;
 text-decoration: none;
 font-weight:400;
 transition: background-color .15s ease;
}
.btn:hover { background: var(--primary-hover); }

/* Ensure header buttons keep white text and no underline */
.site-header .btn,
.site-header .btn:visited { color: var(--text-light); text-decoration: none;}

/* Page layout */
main { 
 max-width:900px; 
 margin:2rem auto; 
 border-radius:12px; /* translucent background to let starfield show through; defaults below per theme */ 
 background: rgba(255,255,255,0.85); 
 border:1px solid rgba(0,0,0,0.06); 
 backdrop-filter: blur(1.5px); 
 -webkit-backdrop-filter: blur(1.5px); 
}

/* Main page (light theme by default) */
body.main-page {
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 line-height:1.6;
 color: var(--text-dark);
 background: var(--bg-light);
}
body.main-page main { padding:2rem 1.25rem; }

/* Section separation (light) */
body.main-page main section + section { margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--border); }

/* Typography colors (light) */
body.main-page h2, body.main-page h3 { color: #111; }
body.main-page p, body.main-page li { color: #333; }

.main-page header .subtitle { color: #666; margin-top:0.25rem; }
.main-page header .tagline { font-style: italic; color: #444; margin-top:0.25rem; }

.main-page h1, .main-page h2, .main-page h3 { line-height:1.2; }
.main-page h1 { margin-top:0; }

.main-page hr { border: none; border-top:1px solid var(--border); margin:2rem 0; }
.main-page ul { margin:0.5rem 0 1rem 1.25rem; }

.main-page .disclaimer {
 background: var(--disclaimer-bg);
 border:1px solid var(--disclaimer-border);
 padding:1rem;
 margin-top:2rem;
}

/* Dark theme for main page */
body.main-page.dark { background: var(--bg-dark); color: var(--text-light); }
body.main-page.dark main { 
 padding:2rem 1.25rem; 
 /* slightly translucent dark surface so starfield shows through */
 background: rgba(12,13,14,0.7);
 border:1px solid rgba(255,255,255,0.04);
 backdrop-filter: blur(1.5px);
 -webkit-backdrop-filter: blur(1.5px);
}
body.main-page.dark a { color: var(--link); }
/* Make sure header button remains white in all states (overrides generic link color) */
body.main-page .site-header .btn:link,
body.main-page .site-header .btn:visited,
body.main-page .site-header .btn:hover,
body.main-page .site-header .btn:active { color: var(--text-light) !important; text-decoration: none; }

body.main-page.dark .tagline { color: var(--text-mid); }
body.main-page.dark hr { border-top:1px solid var(--border-dark); }
body.main-page.dark .disclaimer { background: var(--bg-mid); border:1px solid #3a3f41; }

/* Section separation (dark) */
body.main-page.dark main section + section { margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--border-dark); }

/* Typography colors (dark) */
body.main-page.dark h1, body.main-page.dark h2, body.main-page.dark h3 { color: #e6e6e6; }
body.main-page.dark p, body.main-page.dark li { color: #cfcfcf; }

/* Game page */
body.game-page {
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 background: var(--bg-dark);
 color: var(--text-light);
 text-align: center;
 min-height:100vh;
 display: flex;
 flex-direction: column;
}

#game-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:12px;
 padding:20px 16px;
}

/* Make the frame responsive */
#game-frame {
 width:100%;
 max-width:1200px;
 height: clamp(480px,70vh,820px);
 border: none;
 background: #000;
}

/* Footer spacing on game page so it sticks to bottom when content is short */
body.game-page .site-footer { margin-top: auto; }

/* Final safety: header button text is always white regardless of link rules */
.site-header .btn:link,
.site-header .btn:visited,
.site-header .btn:hover,
.site-header .btn:active { color: var(--text-light); text-decoration: none; }