/*
 * Village overview (graphical scene and classic list), building pages,
 * reports. The scene positions come from overview.css of the original
 * and refer to a 600x418 background.
 */

/* ---- Content boxes on the right (modern look) ---- */
.obox { margin: 0 0 8px; border: 1px solid var(--brown); background: var(--paper2); border-radius: 4px; overflow: hidden; }
.obox-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 2px 6px; font-weight: bold; color: #fff2d8;
	background: linear-gradient(#8a5a2b, #5a3512);
	border-radius: 3px 3px 0 0; text-shadow: 1px 1px 0 #000;
}
.obox-head a.obox-toggle {
	color: #fff2d8; font-weight: bold; width: 14px; height: 14px; line-height: 12px;
	text-align: center; border: 1px solid #fff2d8; border-radius: 2px; font-size: 8pt;
}
.obox-body { padding: 3px 5px; }
.obox.collapsed .obox-body { display: none; }
.obox table { width: 100%; }
.obox td { background: transparent; padding: 1px 3px; }

/* ---- Graphical village scene ---- */
.scene-wrap { width: 600px; max-width: 100%; }
.scene-title {
	padding: 2px 8px; font-weight: bold; color: #fff2d8;
	background: linear-gradient(#8a5a2b, #5a3512);
	border: 1px solid var(--brown); border-bottom: 0;
	border-radius: 4px 4px 0 0; text-shadow: 1px 1px 0 #000;
}
.scene-frame { border: 1px solid var(--brown); background: var(--paper); overflow: hidden; }
.scene { position: relative; width: 600px; height: 418px; transform-origin: 0 0; }
.scene img { position: absolute; }
.scene img.bg { left: 0; top: 0; width: 600px; height: 418px; }
.scene img.empty { left: 0; top: 0; width: 600px; height: 418px; z-index: 4; }
.scene .npc { z-index: 2; }

/* Building placement (z-index 1 for wall and farm, 2 for the rest) */
.p_main { left: 291px; top: 107px; z-index: 2; }
.p_main_flag { left: 291px; top: 67px; z-index: 2; }
.p_place { left: 319px; top: 208px; z-index: 2; }
.p_wood { left: 480px; top: 332px; z-index: 2; }
.p_stone { left: 8px; top: 305px; z-index: 2; }
.p_iron { left: 10px; top: 9px; z-index: 2; }
.p_statue { left: 257px; top: 230px; z-index: 2; }
.p_wall { left: 13px; top: 2px; z-index: 1; }
.p_farm { left: 450px; top: 0; z-index: 1; }
.p_farm_field { right: 0; top: 106px; z-index: 2; }
.p_hide { left: 245px; top: 69px; z-index: 2; }
.p_storage { left: 105px; top: 125px; z-index: 2; }
.p_market { left: 211px; top: 127px; z-index: 2; }
.p_barracks { left: 386px; top: 216px; z-index: 2; }
.p_stable { left: 65px; top: 207px; z-index: 2; }
.p_garage { left: 287px; top: 280px; z-index: 2; }
.p_church { left: 391px; top: 99px; z-index: 2; }
.p_church_f { left: 390px; top: 99px; z-index: 2; }
.p_snob { left: 159px; top: 63px; z-index: 2; }
.p_smith { left: 185px; top: 269px; z-index: 2; }
.p_watchtower { left: 520px; top: 130px; z-index: 2; }
.npc_conversation { left: 222px; top: 245px; }
.npc_guard { left: 177px; top: 192px; }
.npc_juggler { left: 210px; top: 225px; }
.npc_farmer { left: 558px; top: 66px; }
.smith_anim { left: 174px; top: 322px; z-index: 3; }

/* Level badges (green in the current game, blue at night) */
.scene .lvl {
	position: absolute; z-index: 5;
	min-width: 18px; height: 18px; padding: 0 4px; line-height: 16px;
	text-align: center; font-weight: bold; font-size: 8pt; color: #fff;
	background: #5c8f2c; border: 1px solid #2c4a12; border-radius: 4px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}
.scene .lvl:hover { background: #7ab23d; color: #fff; }
.scene.night .lvl { background: #202060; border-color: #101040; }
.l_main { left: 310px; top: 55px; }
.l_place { left: 354px; top: 188px; }
.l_wood { left: 550px; top: 323px; }
.l_stone { left: 100px; top: 395px; }
.l_iron { left: 29px; top: 0; }
.l_statue { left: 245px; top: 215px; }
.l_wall { left: 440px; top: 316px; }
.l_farm { left: 450px; top: 0; }
.l_hide { left: 245px; top: 48px; }
.l_storage { left: 100px; top: 120px; }
.l_market { left: 260px; top: 117px; }
.l_barracks { left: 482px; top: 227px; }
.l_stable { left: 65px; top: 196px; }
.l_garage { left: 370px; top: 340px; }
.l_church, .l_church_f { left: 480px; top: 150px; }
.l_snob { left: 168px; top: 63px; }
.l_smith { left: 205px; top: 258px; }
.l_watchtower { left: 545px; top: 118px; }
.scene-links { display: flex; justify-content: space-between; margin: 2px 0 4px; font-size: 8pt; }
.overview-cols { display: flex; gap: 20px; align-items: flex-start; }
/* The side column may shrink below its content; the boxes clip
   instead of pushing the page into a horizontal scroll */
.overview-side { flex: 1 1 200px; min-width: 0; }
.obox .cmd-time { text-align: right; white-space: nowrap; }
.obox .cmd-time small { display: block; }

/* ---- Building pages ---- */
.bld-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.bld-head img { flex: 0 0 auto; }
.unit-desc { display: flex; gap: 10px; align-items: flex-start; }

/* ---- Reports ---- */
.report-cats td { width: 120px; }
.report-view { width: 100%; max-width: 560px; }
.report-body { border: 1px solid #000; padding: 4px; min-height: 160px; background: var(--paper2); }
table.luck { border: 1px solid #000; border-spacing: 0; }
table.luck td { padding: 0; height: 12px; }
table.luck td.bad { background: #c33 var(--bg-luck-bad, none); border-right: 1px solid #000; }
table.luck td.good { background: #3a3 var(--bg-luck-good, none); }
#attack_info_att, #attack_info_def, #attack_results { border: 1px solid var(--border); width: 100%; }

/* ---- Classic overview / legacy grid kept for the toggle ---- */
.village-view { display: none; }

/* -- Ported original screens: market, mail, ranking, village list -- */

/* Left mode column (td.selected marks the active mode) */
table.vis.side-menu td { padding: 3px 6px; }

/* Mail view: action row and white message body like the original */
table.vis.mail-actions { margin: 0 auto 6px; }
form.inline { display: inline; margin: 0; }
input.linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--link);
	font-weight: bold;
	cursor: pointer;
}
input.linkbtn:hover { text-decoration: underline; }
td.mail-body {
	background: #fff;
	border: 1px solid #000;
	height: 160px;
	vertical-align: top;
	padding: 4px;
}

/* Market: offer ratio coloured like the original rgb() cell */
.ratio { display: inline-block; min-width: 40px; text-align: center; }
.ratio.good { background: #b6e8a4; }
.ratio.bad { background: #f5b8a8; }

/* Village list: icon columns of the combined overview */
table.vis.combined th { text-align: center; }
table.vis.combined td { white-space: nowrap; }
table.vis.combined td.hidden { color: var(--muted); }

/* Ranking: page links below the table */
table.vis.pages td { text-align: center; }

/* Academy: the recruit table needs the width, the coin box the rest */
.snob-cols > :first-child { flex: 1 1 500px; }
.snob-cols > :last-child { flex: 0 1 310px; }

/* Simulator: unit table and conditions side by side, each as wide
   as its content; on narrow screens they stack (see .cols) */
.sim-cols { align-items: flex-start; }
.sim-cols > table { flex: 0 0 auto; width: auto; }
.sim-units input.small, .sim-opts input.small { width: 60px; }
.sim-result td.warn { color: var(--warn); font-weight: bold; }

/* World statistics (screen=stats): label column left, figures right,
   the troops as a grid of icon cells like the original */
.stat-table { width: auto; }
.stat-table th { text-align: left; white-space: nowrap; vertical-align: top; padding: 4px 12px 4px 6px; }
.stat-table td { padding: 3px 6px; }
.stat-res { display: flex; flex-direction: column; gap: 4px; }
.stat-res span {
	display: inline-flex; align-items: center; gap: 4px;
	width: 120px; padding: 1px 6px;
	background: var(--paper2); border: 1px solid #cdb98e;
}
.stat-grid { display: grid; grid-template-columns: repeat(3, 58px); gap: 4px; }
.stat-cell {
	text-align: center; padding: 3px 2px; font-size: 8pt;
	background: var(--paper2); border: 1px solid #cdb98e;
}
.stat-cell img { width: 18px; height: 18px; }

/* Unit page (screen=info_unit): portrait and text left, values right */
.unit-info > div { flex: 1 1 260px; }
.unit-info .unit-pic { width: 70px; vertical-align: top; }
.unit-info .unit-desc { vertical-align: top; }
.unit-stats th { text-align: left; white-space: nowrap; padding-right: 12px; }
.unit-stats img { vertical-align: middle; }