/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
	--color-parchment:      #C2B189;
	--color-parchment-dark: #8a7a59;
	--color-ink:            #332918;
	--color-ink-dark:       #2a1a08;
	--color-btn:            #96917B;
	--color-bg:             #43463d;
	--color-win:            #1a8a1a;
	--color-lose:           #8a1a1a;
	--color-warn:           #8a6a00;
}

/* ============================================================
   RESET
   ============================================================ */
* {
	margin: 0;
	padding: 0;
	font-family: arial;
	box-sizing: border-box;
}

::-webkit-scrollbar {
	display: none;
}

html {
	background-color: var(--color-bg);
}

li {
	float: left;
	list-style: none;
	width: 140px;
}

/* ============================================================
   MAP LAYERS
   ============================================================ */
#lines,
#gameboard,
#gfxlayer,
#bigmap,
#barback {
	position: absolute;
	top: 0;
	left: 0;
	width: 3300px;
	height: 2400px;
}

#gameboard { top: 15px; overflow: hidden; }
#gfxlayer  { z-index: 0; }
#uilayer   { z-index: 2; }

#maptransform {
	position: absolute;
	top: 0;
	left: 0;
	width: 3300px;
	height: 2400px;
	transform-origin: top left;
}

#zoomindicator {
	position: fixed;
	bottom: 270px;
	left: 20px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: bold;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s;
	z-index: 15;
}

#zoomindicator.visible {
	opacity: 1;
}

#barback {
	height: 15px;
	background-color: #000;
	z-index: 0;
}

/* ============================================================
   MENUBAR
   ============================================================ */
#menubar {
	position: fixed;
	top: -75px;
	left: 0;
	width: 100%;
	height: 90px;
	opacity: 0.9;
	z-index: 10;

	& button {
		color: var(--color-btn);
		cursor: pointer;
		font-size: 10px;
		font-weight: bold;
		height: 50px;
		margin: 10px;
		width: 70px;
		text-align: center;
		background-image: url(images/backbar.png);
		text-shadow: 2px 2px 2px #000;

		&:hover { color: #fff; }

		&.activebutton {
			color: #fff;
			outline: 1px solid #fff;
			outline-offset: 0;
		}
	}

	& #menubuttons,
	& #menuhandleup,
	& #menuhandledown {
		position: absolute;
		height: 75px;
		top: 15px;
		left: 0;
		background-color: #000;
		text-align: center;
		width: 100%;
	}

	& #menubuttons {
		background-image: url(images/backbar.png);
		border-bottom: 1px solid var(--color-btn);
                display:flex;
	}

	& #menuhandledown,
	& #menuhandleup {
		background-color: #f00;
		font-size: 12px;
		font-weight: bold;
		height: 15px;
		line-height: 15px;
		top: 75px;
		cursor: pointer;
		opacity: 0.8;
		color: #fff;
	}

	& #menuhandleup {
		top: 0;
		width: 100%;
	}

	& .buttonleft {
		float: left;
		margin-left: 10px;
	}

	& .buttonright {
		position: absolute;
                right: 0px;
                margin-right: 30px;
	}
}

/* ============================================================
   NUMDING (area labels + battle icons)
   ============================================================ */
div.numding {
	position: absolute;
	background-color: #fff;
	opacity: 0.8;
	text-align: center;
	padding: 0 4px;
	height: 15px;
	line-height: 15px;
	color: #000;
	z-index: 2;
	font-family: verdana, arial;
	font-size: 10px;
	border-radius: 10px;
	box-shadow: 2px 2px 0 #707070;
	min-width: 48px;

	& .losses {
		position: absolute;
		background-color: #a00;
		color: #fff;
		font-weight: bold;
		opacity: 1;
		width: 48px;
		text-align: center;
		height: 15px;
		left: 0;
		bottom: -15px;
	}

	& img.battleimg {
		left: 50%;
		position: absolute;
		top: -7px;
		transform: translate(-50%, 0);
	}
}

/* ============================================================
   SIDEBOX
   ============================================================ */
#sidebox {
	position: fixed;
	min-width: 300px;
	min-height: 174px;
	opacity: 0.95;
	display: none;
	background-image: url(images/paper.png);
	background-size: 100% 100%;
	cursor: move;
	padding: 5px;
	z-index: 5;

	& .armygfx {
		position: absolute;
		top: 10px;
		right: 5px;
		width: 115px;
		height: 65px;
	}

	& .army {
		right: 45px;
		top: 10px;
	}
        
        & .combatcard .army {
            right:unset;
            left: 0;
            top: 0;
	}

	& .unitname {
		font-weight: bold;
		position: absolute;
		right: 0;
		text-align: center;
		top: 4px;
		width: 143px;
		font-size: 17px;
		font-family: "Times New Roman";
	}

	& .unitstats {
		position: absolute;
		left: 10px;
		top: 8px;
		width: 146px;
	}

	& .unitstats2 {
		position: absolute;
		right: 0;
		bottom: 8px;
		width: 138px;
	}

	& .unitstats ul,
	& .unitstats2 ul {
		display: flex;
		height: 18px;
	}

	& .unitstats ul { height: 22px; }

	& .unitinfo {
		font-size: 12px;

		& li {
			position: relative;

			& div {
				position: absolute;
				height: 15px;
				opacity: 0.8;
				z-index: 0;
				top: 0;
				left: 0;
			}
		}

		& li.statname {
			width: 58px;
			line-height: 15px;
		}

		& .unitstats2 li.statname { width: 52px; }

		& li.statval {
			width: 80px;
			line-height: 15px;

			& div.posstat {
				background-image: url('images/stars5.png');
				background-repeat: no-repeat;
				background-position: left center;
				opacity: 1;
			}

			& div.negstat {
				background-image: url('images/starsneg.png');
				background-repeat: no-repeat;
				background-size: auto 13px;
				background-position: left center;
				opacity: 1;
			}
		}
	}

	& .combatbox {
            font-weight: bold;
            font-variant: all-small-caps;
            
		& .btlheader {
			font-size: 11px;
			opacity: 0.65;
			margin: 0 0 6px 2px;
		}

		& .btlfightsep {
			font-size: 10px;
			font-weight: bold;
			opacity: 0.5;
			text-align: center;
			border-top: 1px solid rgba(0,0,0,0.15);
			margin: 6px 0 4px;
			padding-top: 4px;
			letter-spacing: 0.05em;
			text-transform: uppercase;
		}

		& .combatreport {
			display: flex;
			align-items: flex-start;
			margin-bottom: 6px;
		}

		& .combatcard {
			flex: 1;
			text-align: center;
			min-width: 0;
                        
                    &  .carddata {
                        display: flex;
                    }
		}

		& .cardtop {
			height: 4px;
			border-radius: 2px;
			margin-bottom: 4px;
		}

		& .cardsprite {
			position: relative;
			width: 48px;
			height: 48px;
		}

		& .cardname {
			font-size: 10px;
			opacity: 0.8;
			margin: 3px 0 1px;
			line-height: 1.3;
			word-break: break-word;
		}

		& .cardresult {
			font-size: 11px;
			font-weight: bold;
			margin: 2px 0;
			&.win  { color: #2a7a2a; }
			&.lose { color: #aa2222; }
		}

		& .cardnum {
			font-size: 12px;
			line-height: 1.6;
			& .numlabel { opacity: 0.65; font-size: 10px; }
			& .numval   { font-weight: bold; }
			& .lostval  { color: #aa2222; }
			& .fortval  { color: #8a5c00; }
		}

		& .vsding {
			width: 26px;
			text-align: center;
			padding-top: 36px;
			font-weight: bold;
			font-size: 11px;
			flex-shrink: 0;
			opacity: 0.7;
                        transform: translate(9px, 0);
		}

		& .btlterrain {
			border-top: 1px solid rgba(0,0,0,0.15);
			padding-top: 5px;
			margin-top: 2px;
			font-size: 11px;
		}

		& .btlterheader {
			display: flex;
			align-items: center;
			margin-bottom: 3px;
			gap: 3px;
			& .btlterlab  { width: 58px; }
			& .btlterunit { flex: 1; opacity: 0.65; font-style: italic; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
			& .btltervsep { width: 22px; }
		}

		& .btlterrow {
			display: flex;
			align-items: center;
			margin: 2px 0;
			& .btlterlab  { width: 58px; opacity: 0.7; flex-shrink: 0; }
			& .btltervsep { width: 22px; text-align: center; opacity: 0.4; font-size: 9px; flex-shrink: 0; }
                        & div.posstat {
				background-image: url('images/stars5.png');
				background-repeat: no-repeat;
				background-position: left center;
				opacity: 1;
                                height: 10px;
			}

			& div.negstat {
				background-image: url('images/starsneg.png');
				background-repeat: no-repeat;
				background-size: auto 13px;
				background-position: left center;
				opacity: 1;
                                height: 10px;
			}
                        & .btlterStatContainer {
                            width: 90px;
                            margin-right: 25px;
                        }
		}
	}

	& .stathead {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 2px;
		text-align: left;
	}

	& .statdot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 3px;
		vertical-align: middle;
		opacity: 0.85;
	}

	& .seasonstat {
		display: inline-block;
		width: 16px;
		height: 14px;
		vertical-align: middle;
		background-image: url('images/seasonsicons.png');
		background-repeat: no-repeat;
		background-size: auto 14px;
		margin-right: 2px;
	}

	& .statnum {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 10px;
		font-weight: bold;
		color: var(--color-ink);
		line-height: 15px;
	}
}

/* ============================================================
   SEASON ICON
   ============================================================ */
.seasonicon {
	background-image: url('images/seasons.png');
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 75px;
	width: 75px;
	line-height: 75px;
	text-align: center;
	color: #444238;
	font-weight: bold;
	overflow: hidden;
	cursor: pointer;

	&.season0 { background-position:  -75px 0; }
	&.season1 { background-position: -150px 0; }
	&.season2 { background-position: -225px 0; }
	&.season3 { background-position: -300px 0; color: #b9b398; }
}

/* ============================================================
   RECRUIT BAR
   ============================================================ */
#recruitbarbottom {
	height: 50px;
	width: 365px;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	background-image: url('images/recruitbarbottom.png');
	background-repeat: no-repeat;
}

#recruitbartop {
	top: 0;
	left: 0;
	height: 50px;
	width: 25px;
	background-image: url('images/recruitbartop.png');
	background-repeat: no-repeat;
}

/* ============================================================
   KING / FORT
   ============================================================ */
.king {
	height: 16px;
	width: 48px;
	position: absolute;
	left: 50%;
	top: -16px;
	background-image: url(images/crown.gif);
	z-index: 4;
	transform: translate(-50%, 0);
}

.fort,
.fortb {
	height: 27px;
	width: 60px;
	position: absolute;
	left: -6px;
	top: -10px;
	z-index: 2;
}

.fort  { background-image: url('images/wallw.png'); }
.fortb { background-image: url('images/wallb.png'); }

/* ============================================================
   MESSAGE BOX
   ============================================================ */
#messagebox {
    background-image: url(images/messagepaper.png);
    background-size: 100% 100%;
    color: var(--color-ink);
    cursor: pointer;
    min-height: 500px;
    padding: 25px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 800px;
    font-size: 16px;
    z-index: 20;
    overflow-y: auto;
    max-height: 80vh;
    filter: drop-shadow(5px 5px 7px #00000060);

	& .rephead {
		font-family: "Times New Roman", serif;
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		color: var(--color-ink-dark);
		margin-bottom: 14px;
		border-bottom: 1px solid var(--color-parchment-dark);
		padding-bottom: 8px;
		letter-spacing: 1px;
	}

	& .repstats {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 14px;
		background: rgba(0, 0, 0, 0.08);
		padding: 10px;
		border: 1px solid var(--color-parchment-dark);
	}

	& .repstat {
		flex: 1 1 160px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		padding: 3px 8px;
		border-right: 1px solid rgba(138, 122, 89, 0.4);

		&:last-child { border-right: none; }
	}

	& .replabel { font-weight: bold; opacity: 0.75; }
	& .repval   { font-weight: bold; font-size: 16px; }

	& .repmsg {
		margin: 8px 0;
		padding: 8px 12px;
		font-size: 15px;
		border-left: 4px solid var(--color-parchment-dark);
		background: rgba(0, 0, 0, 0.06);

		&.repwin  { border-left-color: var(--color-win);  color: #0a4a0a; }
		&.replose { border-left-color: var(--color-lose); color: #4a0a0a; }
		&.repwarn { border-left-color: var(--color-warn); color: #4a3800; }
	}

	& .repclose {
		text-align: center;
		opacity: 0.4;
		font-size: 12px;
		margin-top: 20px;
	}

	& .showcode {
		font-family: monospace;
		font-weight: bold;
		color: #000;
	}

	& .chartrow {
		display: flex;
		flex-wrap: no-wrap;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 12px;
                justify-content: space-between;
	}

	    & .chartding {
                flex-shrink: 0;
                min-height: 160px;
                margin-bottom: 10px;
                position: relative;
                width: 250px;
                min-width: 200px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
    
		& h3 { font-size: 24px; opacity: 0.9; text-align: center; }
		& h4 { font-size: 12px; opacity: 0.9; text-align: center; }
		& img { display: block; }
	}
}

/* ============================================================
   TERRAIN TILES
   ============================================================ */
.terrain {
	background-image: url(images/terrain3.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	position: absolute;
	height: 134px;
	width: 164px;
	opacity: 0.5;

	&.terrain0 { background-position:    0  0; }
	&.terrain1 { background-position: -164px 0; }
	&.terrain2 { background-position: -328px 0; }
	&.terrain3 { background-position: -492px 0; }
	&.terrain4 { background-position: -656px 0; }
	&.terrain5 { background-position: -820px 0; }
}

.terrainleft  { bottom: 5px; left: 10px; }
.terrainright { bottom: 5px; right: 2px; }

.terrainhead {
	color: #463823;
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
	opacity: 0.9;
	text-align: center;
}

/* ============================================================
   ARMY / MILITIA SPRITES
   ============================================================ */
div.army,
div.militia {
	background-image: url('images/armies.png');
	background-repeat: no-repeat;
	position: absolute;
	height: 48px;
	width: 48px;
}

div.militia { background-image: url('images/militias.png'); }

div.army0  { background-position:    0     0; }
div.army1  { background-position:  -48px   0; }
div.army2  { background-position:  -96px   0; }
div.army3  { background-position: -144px   0; }
div.army4  { background-position: -192px   0; }
div.army5  { background-position: -240px   0; }
div.army6  { background-position: -288px   0; }
div.army7  { background-position: -336px   0; }
div.army8  { background-position:    0   -48px; }
div.army9  { background-position:  -48px -48px; }
div.army10 { background-position:  -96px -48px; }
div.army11 { background-position: -144px -48px; }
div.army12 { background-position: -192px -48px; }
div.army13 { background-position: -240px -48px; }
div.army14 { background-position: -288px -48px; }
div.army15 { background-position: -336px -48px; }
div.army16 { background-position:    0   -96px; }
div.army17 { background-position:  -48px -96px; }
div.army18 { background-position:  -96px -96px; }
div.army19 { background-position: -144px -96px; }
div.army20 { background-position: -192px -96px; }
div.army21 { background-position: -240px -96px; }
div.army22 { background-position: -288px -96px; }
div.army23 { background-position: -336px -96px; }
div.army24 { background-position:    0  -144px; }
div.army25 { background-position:  -48px -144px; }
div.army26 { background-position:  -96px -144px; }
div.army27 { background-position: -144px -144px; }
div.army28 { background-position: -192px -144px; }
div.army29 { background-position: -240px -144px; }
div.army30 { background-position: -288px -144px; }
div.army31 { background-position: -336px -144px; }
div.army32 { background-position:    0  -192px; }
div.army33 { background-position:  -48px -192px; }
div.army34 { background-position:  -96px -192px; }
div.army35 { background-position: -144px -192px; }
div.army36 { background-position: -192px -192px; }
div.army37 { background-position: -240px -192px; }
div.army38 { background-position: -288px -192px; }
div.army39 { background-position: -336px -192px; }
div.army40 { background-position:    0  -240px; }
div.army41 { background-position:  -48px -240px; }
div.army42 { background-position:  -96px -240px; }
div.army43 { background-position: -144px -240px; }
div.army44 { background-position: -192px -240px; }
div.army45 { background-position: -240px -240px; }
div.army46 { background-position: -288px -240px; }
div.army47 { background-position: -336px -240px; }
div.army48 { background-position:    0  -288px; }
div.army49 { background-position:  -48px -288px; }

/* ============================================================
   AUDIO CONTROLS
   ============================================================ */
#audiocontrols {
	display: flex;
	flex-direction: column;
	gap: 6px;
        padding:6px;
}

.audiorow {
	display: flex;
	align-items: center;
	gap: 5px;
}

#soundbutton,
#musicbutton {	
	background-repeat: no-repeat;
	height: 16px;
	width: 21px;
	cursor: pointer;
	flex-shrink: 0;
}

#soundbutton {
        background-image: url('images/sound.png');
	&.soundon  { background-position: 0    0; }
	&.soundoff { background-position: 0 -16px; }
}

#musicbutton {
        background-image: url('images/music.png');
	&.musicon  { background-position: 0    0; }
	&.musicoff { background-position: 0 -16px; }
}

.audiorow input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 72px;
	height: 4px;
	background: var(--color-parchment-dark);
	border-radius: 2px;
	cursor: pointer;
	outline: none;

	&::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 11px;
		height: 11px;
		background: var(--color-parchment);
		border-radius: 50%;
		cursor: pointer;
	}

	&::-moz-range-thumb {
		width: 11px;
		height: 11px;
		background: var(--color-parchment);
		border-radius: 50%;
		cursor: pointer;
		border: none;
	}
}

/* ============================================================
   MANUAL BUTTON + PANEL
   ============================================================ */
#manualbutton {
	border: 1px solid #C4B388;
	border-radius: 10px;
	bottom: 2px;
	color: #C4B388;
	cursor: pointer;
	font-weight: bold;
	left: 1px;
	position: absolute;
	text-align: center;
	padding: 0 5px;

	&:hover {
		background-color: #C4B388;
		color: #454239;
	}
}

#manual {
	background-color: var(--color-parchment);
	border: 1px solid #000;
	border-radius: 20px;
	max-height: 600px;
	left: 20px;
	padding: 20px;
	position: fixed;
	top: 91px;
	width: 800px;
	z-index: 100;
	display: none;
	overflow: auto;
	font-size: 11px;

	& ul {
		margin-left: 10px;
		margin-bottom: 10px;
		font-weight: bold;
		cursor: pointer;

		&:hover { color: #fff; }
	}

	& li {
		margin-left: 10px;
		font-weight: normal;
		width: 760px;
		cursor: default;
		color: #000;
		margin-bottom: 10px;
	}
}

.subheadbig {
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	font-size: 16px;
}

.ulclosed li { display: none; }

/* ============================================================
   MINIMAP
   ============================================================ */
#minimap {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 330px;
	height: 240px;
	background-image: url('images/tinymap1.png');
	background-repeat: no-repeat;
	background-color: #222;
	box-shadow: 5px 5px 7px #00000060;

	& canvas {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.65;
		width: 330px;
		height: 240px;
	}
}

/* ============================================================
   SETUP SCREEN
   ============================================================ */
#setupscreen {
	position: fixed;
	inset: 0;
	display: flex;
	z-index: 1000;
}

/* Left hero panel — swap background-image to menu_hero.jpg when ready */
#setup-hero {
	flex: 0 0 60%;
	position: relative;
	background: #0a0a0a url('images/menu_hero2.jpg') left / cover no-repeat;

	/* Gradient fade from transparent on the left into the dark panel on the right */
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(0,0,0,0.15) 30%, rgba(13,13,13,0.92) 100%);
	}
}

/* Right control panel */
#setup-panel {
	flex: 0 0 40%;
	background: #0d0d0d;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 52px;
	color: var(--color-parchment);
	font-family: "Times New Roman", serif;
	overflow-y: auto;
}

#setupscreen h1 {
	font-size: 36px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-parchment);
	margin-bottom: 8px;
}

#setupscreen h2 {
	font-size: 11px;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: var(--color-parchment-dark);
	font-weight: normal;
	margin-bottom: 48px;
	opacity: 0.75;
}

#setupscreen button {
	background: transparent;
	border: 1px solid var(--color-parchment-dark);
	color: var(--color-parchment);
	cursor: pointer;
	font-size: 12px;
	font-family: "Times New Roman", serif;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 15px 24px;
	width: 100%;
	margin: 5px 0;
	transition: background 0.25s, color 0.25s, box-shadow 0.25s;

	&:hover {
		background: var(--color-parchment);
		color: #111;
		box-shadow: 0 0 28px rgba(194, 177, 137, 0.3);
	}
}

.setup-divider {
	height: 1px;
	background: var(--color-parchment-dark);
	opacity: 0.3;
	margin: 32px 0 24px;
}

.setup-load-label {
	font-size: 10px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--color-parchment-dark);
	opacity: 0.6;
	margin-bottom: 12px;
}

#setupscreen .continue-row {
	display: flex;
	gap: 8px;

	& select {
		flex: 1;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(138, 122, 89, 0.4);
		color: var(--color-parchment);
		font-size: 13px;
		padding: 11px 30px 11px 12px;
		font-family: "Times New Roman", serif;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238a7a59' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 11px center;

		& option { background: #1a1a1a; }
	}

	& button {
		width: auto;
		padding: 11px 22px;
		margin: 0;
		letter-spacing: 2px;
	}
}

#setupError {
	color: #f44;
	font-size: 12px;
	margin-top: 8px;
	display: none;
	letter-spacing: 1px;
}

.setup-footer {
	margin-top: 40px;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-parchment-dark);
	opacity: 0.35;
	text-align: center;
}

/* ============================================================
   CANVAS / MAP TILES
   ============================================================ */
.canvas {
	width: 500px;
	height: 500px;
	float: left;
}

.canvasend   { width: 300px; }
.canvasbottom { height: 400px; float: left; }