/* Imported from RomeHTMLOutput/index.html; original preserved. */
/* --- COZY RETRO PALETTE --- */
		:root {
			--bg-color: #1b0f0a;
			--text-color: #e8dcc4;
			--gold-main: #d9b15f;
			--gold-light: #ffeebb;
			--gold-border: #b88a4a;
			--brown-border: #6b3d18;
			--overlay-bg: #110906;
		}

		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			min-height: 100%;
			background: var(--bg-color);
			color: var(--text-color);
			font-family: Georgia, serif;

			overflow-y: auto;
			overflow-x: hidden;
		}
		
		.page-wrapper {
			width: 100%;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			padding-top: 20px;
			padding-bottom: 40px;
		}

		#header, #footer {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "Rome Pixel", monospace;
			letter-spacing: 2px;
			color: var(--gold-main);
			text-shadow: 0 0 8px #000;
			padding: 5px 0;
		}

		#header {
			border-bottom: 3px solid var(--gold-border);
			font-size: 4rem;
		}

		#footer {
			border-top: 3px solid var(--gold-border);
			margin-top: 40px;
			font-size: 2.4rem;
			gap: 20px;
			flex-wrap: wrap;
		}

		/* --- GAME CONTAINER --- */
		#game-wrapper {
			aspect-ratio: 16 / 9;
			width: min(95vw, 170vh);
			height: auto;
			position: relative;
			
			background: black;
			border: 5px solid var(--brown-border);
			box-shadow: 0 0 0 7px var(--gold-border) inset, 0 0 60px rgba(0,0,0,0.7);
			box-sizing: content-box !important;
			overflow: hidden; 
			margin-top: 20px;
		}

		#canvas {
			position: absolute;
			top: 7px;
			left: 7px;
			width: calc(100% - 14px);
			height: calc(100% - 14px);
			display: block;
			outline: none;
			image-rendering: pixelated;
			z-index: 10;
		}

		#game-placeholder {
			position: absolute;
			inset: 7px;
			background: #140a04;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 1;
			color: #5c3a21;
			font-family: "Rome Pixel", monospace;
			pointer-events: none;
		}
		#game-placeholder h2 { font-size: 2rem; opacity: 0.6; margin: 0;}

		/* --- RESPONSIVE --- */
		@media (max-aspect-ratio: 9/16) {
			#game-wrapper {
				aspect-ratio: 9 / 16;
				width: min(90vw, 140vh);
			}
		}
		
		@media (aspect-ratio < 1/1) {
			#game-wrapper {
				aspect-ratio: 9 / 16;
				width: min(95vw, 50vh);
			}
		}

		/* --- LOADING OVERLAY --- */
		#status {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(20,10,4,0.92);
			visibility: hidden;
			border: 2px solid var(--gold-border);
			z-index: 99; 
		}

		#status-splash {
			max-width: 40%;
			max-height: 40%;
			image-rendering: pixelated;
			margin-bottom: 25px;
			min-width: 100px; min-height: 100px;
		}

		#status-progress {
			width: 50%;
			height: 10px;
			background: #333;
			border: 1px solid var(--gold-border);
		}
		#status-progress::-webkit-progress-value {
			background: var(--gold-main);
		}

		/* --- FOOTER LINKS --- */
		#footer a {
			color: var(--gold-main);
			text-decoration: none;
			transition: text-shadow 0.2s ease, color 0.2s ease;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		#footer a:hover {
			color: var(--gold-light);
			text-shadow: 0 0 12px var(--gold-main), 0 0 20px var(--gold-border);
			cursor: pointer;
		}
		
		#footer i { font-size: 0.9em; }
		.footer-sep { color: #8c6b38; font-size: 1rem; }

		/* --- CHANGELOG OVERLAY STRUCTURE --- */
		#changelog-overlay {
			position: absolute;
			top: 7px;
			left: 7px;
			width: calc(100% - 14px);
			height: calc(100% - 14px);
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			
			background: var(--overlay-bg);
			border: 5px solid var(--brown-border);
			box-shadow: 0 0 0 7px var(--gold-border) inset, 0 0 60px rgba(0,0,0,0.7);
			z-index: 100;
			padding: 0;
			box-sizing: border-box;
		}

		#changelog-content {
			width: 100%;
			height: 100%;
			max-width: 900px;
			overflow-y: auto;
			padding: 20px 30px;
			box-sizing: border-box;
			color: var(--text-color);
		}

		/* Custom Scrollbar */
		#changelog-content::-webkit-scrollbar { width: 12px; }
		#changelog-content::-webkit-scrollbar-track { background: #110906; border-left: 1px solid #4b2c17; }
		#changelog-content::-webkit-scrollbar-thumb { background-color: var(--gold-border); border: 2px solid var(--brown-border); border-radius: 6px; }
		#changelog-content::-webkit-scrollbar-thumb:hover { background-color: var(--gold-main); }

		#hide-changelog {
			position: absolute;
			top: 20px;
			right: 25px;
			z-index: 101;
			font-family: "Rome Pixel", monospace;
			font-size: 1.5rem;
			letter-spacing: 1px;
			color: var(--gold-main);
			text-shadow: 0 0 8px #000;
			padding: 5px 10px;
			border: 2px solid var(--gold-border);
			background: #3a220f;
			border-radius: 8px;
			text-decoration: none;
			transition: all 0.2s ease;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		#hide-changelog:hover {
			color: var(--gold-light);
			background: #4b2c17;
			text-shadow: 0 0 12px var(--gold-main), 0 0 20px var(--gold-border);
			box-shadow: 0 0 15px var(--gold-border);
		}

		/* --- RESTORED PATCH NOTE CONTENT STYLES --- */
		/* These were missing in the previous update! */

		#changelog-content h1 {
			font-family: "Rome Pixel", monospace;
			font-size: 3.4rem;
			letter-spacing: 3px;
			color: var(--gold-main);
			text-shadow: 0 0 12px #000;
			border-bottom: 2px solid var(--brown-border);
			padding-bottom: 10px;
			margin: 0 0 20px 0;
			text-align: center;
		}

		.patch-entry {
			margin-bottom: 30px;
			border-bottom: 1px solid #4b2c17;
			padding-bottom: 20px;
		}
		.patch-entry:last-child {
			border-bottom: none;
			margin-bottom: 0;
		}

		.patch-entry h2 {
			font-family: "Rome Pixel", monospace;
			font-size: 2.5rem;
			letter-spacing: 2px;
			color: var(--text-color);
			margin: 0 0 15px 0;
		}

		.patch-entry ul {
			list-style-type: none;
			padding-left: 10px;
            margin-bottom: 0;
		}

		.patch-entry li {
			font-family: Georgia, serif;
			font-size: 1.3rem;
			line-height: 1.6;
			margin-bottom: 10px;
			padding-left: 30px;
			position: relative;
            color: var(--text-color);
		}
        .patch-entry li:last-child { margin-bottom: 0; }

		/* Custom bullet point */
		.patch-entry li::before {
			content: '•';
			color: var(--gold-main);
			font-size: 1.5rem;
			position: absolute;
			left: 0;
			top: -2px;
		}

		/* Tags */
		.tag {
			font-family: "Rome Pixel", monospace;
			font-size: 0.9rem;
			padding: 2px 6px;
			border-radius: 4px;
			margin-right: 8px;
			color: #000;
            display: inline-block;
            line-height: 1.2;
            vertical-align: middle;
		}
		.tag-new { background-color: #a3d95f; }
		.tag-fix { background-color: #d97b5f; }
		.tag-balance { background-color: #5f9ed9; }
		.tag-qol { background-color: #cda34f; }
		.tag-internal { background-color: #b062b5; }

		.patch-description {
			font-size: 1.1rem;
			font-style: italic;
			color: #b8a99a;
			text-align: left;
			margin-top: -10px;
			margin-bottom: 15px;
			padding-left: 10px;
		}
	
/* Current web release integration. */
@font-face { font-family: "Rome Pixel"; src: url("pixel.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { height: 100%; }
.page-wrapper { height: 100vh; height: 100dvh; min-height: 400px; padding: 0; gap: 8px; }
#header { flex: 0 0 auto; font-size: clamp(18px, 2.3vw, 28px); padding: 10px; }
#game-wrapper { flex: 1 1 auto; min-height: 240px; width: 94%; aspect-ratio: auto; margin: 0; box-sizing: border-box !important; }
#canvas { image-rendering: auto; }
#footer { flex: 0 0 auto; margin: 0; padding: 8px 12px; font-size: 15px; line-height: 1.4; letter-spacing: 1px; gap: 10px; }
#footer button { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border: 0; padding: 3px; cursor: pointer; }
/* Save feedback must not resize the flex game area and clear its canvas.
   Reserve room for every status, including before the first save. */
#browser-save-status { flex: 0 0 auto; inline-size: 16em; block-size: calc(1.4em + 6px); white-space: nowrap; }
#browser-save-status[hidden] { display: block; visibility: hidden; }
#footer button:hover, #footer a:hover { color: var(--gold-light); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
#status { visibility: visible; inset: 7px; border: 0; gap: 18px; text-align: center; padding: 20px; }
#status[hidden] { display: none; }
#status-splash { object-fit: contain; max-width: min(65%, 360px); max-height: 40%; min-width: 0; min-height: 0; margin: 0; }
#status-progress { width: min(80%, 650px); accent-color: var(--gold-main); }
#status-message { color: var(--text-color); font: 18px Georgia, serif; white-space: pre-wrap; }
#retry, #hide-changelog { font: 18px "Rome Pixel", monospace; color: var(--gold-main); background: #3a220f; border: 2px solid var(--gold-border); padding: 9px 14px; cursor: pointer; }
#retry[hidden] { display: none; }
#changelog-overlay { position: fixed; inset: 0; margin: auto; width: min(900px, 94vw); height: min(800px, 86vh); max-height: 86dvh; color: var(--text-color); }
#changelog-overlay[open] { display: flex; }
#changelog-overlay::backdrop { background: #000b; }
#changelog-content { padding-top: 75px; }
#hide-changelog { top: 14px; right: 18px; }
.build-label { color: #b8a99a; font: 12px Georgia, serif; letter-spacing: 0; }
#game-wrapper:fullscreen { width: 100%; height: 100%; margin: 0; border: 0; }
#game-wrapper:fullscreen #canvas { inset: 0; width: 100%; height: 100%; }
@media (max-width: 600px) {
  .page-wrapper { gap: 4px; }
  #header { font-size: 18px; padding: 8px; }
  #game-wrapper { width: 100%; }
  #footer { font-size: 12px; gap: 7px; }
  .footer-sep { display: none; }
  #changelog-content { padding: 65px 18px 20px; }
  #changelog-content h1 { font-size: 26px; }
  .patch-entry h2 { font-size: 22px; }
  .patch-entry li { font-size: 18px; }
}