/* Classic beige/brown parchment look, desktop-first, simple responsive. */
:root {
  --parchment: #f4e4bc;
  --parchment-dark: #e3d5b3;
  --brown: #7d510f;
  --brown-dark: #603000;
  --border: #c9a769;
  --red: #a02020;
  --green: #2a6a2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  background: #4a3b22 url('') repeat;
  background-color: #4a3b22;
}

a { color: var(--brown); }
a:hover { color: var(--brown-dark); }

h2, h3, h4 { color: var(--brown-dark); margin: 0.8em 0 0.4em; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--brown-dark);
  color: var(--parchment);
  padding: 6px 12px;
  border-bottom: 3px solid var(--border);
}
.topbar a { color: var(--parchment); }
.topbar-res { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.res b { font-weight: bold; }
.incoming {
  background: var(--red);
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.village-switch { position: relative; font-weight: bold; }
.village-switch summary { cursor: pointer; list-style: none; }
.village-switch ul {
  position: absolute;
  z-index: 20;
  background: var(--parchment);
  border: 2px solid var(--border);
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  min-width: 260px;
}
.village-switch ul a { color: var(--brown-dark); text-decoration: none; display: block; padding: 3px 6px; }
.village-switch ul li.active a, .village-switch ul a:hover { background: var(--parchment-dark); }

.wrap { display: flex; max-width: 1200px; margin: 0 auto; gap: 10px; padding: 10px; }

.sidenav {
  flex: 0 0 180px;
  background: var(--parchment);
  border: 2px solid var(--border);
  border-radius: 4px;
  align-self: flex-start;
}
.sidenav ul { list-style: none; margin: 0; padding: 4px; }
.sidenav a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  text-decoration: none;
  color: var(--brown-dark);
  border-bottom: 1px solid var(--parchment-dark);
}
.sidenav li:last-child a { border-bottom: none; }
.sidenav li.active a, .sidenav a:hover { background: var(--parchment-dark); font-weight: bold; }
.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 11px;
}

.content {
  flex: 1;
  background: var(--parchment);
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 10px 16px 20px;
  min-width: 0;
  overflow-x: auto;
}

table.data {
  border-collapse: collapse;
  width: 100%;
  background: #fff8e7;
  margin: 6px 0 12px;
}
table.data th, table.data td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: middle;
}
table.data th { background: var(--parchment-dark); color: var(--brown-dark); }
table.data tr.unread td { font-weight: bold; background: #fdf3d1; }
table.data tr.hostile td { background: #f6d5d5; }
table.info th { width: 140px; }

.muted { color: #7a6a4a; }
.ok { color: var(--green); font-weight: bold; }
.locked { color: var(--red); }
.loss { color: var(--red); }

button, .btn {
  background: linear-gradient(#d9b96b, #b58a3f);
  border: 1px solid var(--brown);
  border-radius: 3px;
  color: var(--brown-dark);
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: linear-gradient(#e6c67b, #c1954a); }
button.danger, .btn.danger { background: linear-gradient(#d98a6b, #b54a3f); color: #fff; }
.btn.active { outline: 2px solid var(--brown-dark); }

input[type=text], input[type=password], input[type=number], select, textarea {
  border: 1px solid var(--border);
  background: #fffdf5;
  padding: 3px 6px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
}
input.coord { width: 64px; }
input.count { width: 70px; }
input.res-input { width: 90px; }
textarea { width: 100%; max-width: 600px; }

form.inline { display: inline; }
form.stacked label { display: block; margin: 8px 0; }
form.stacked input[type=text], form.stacked input[type=password] { width: 260px; }
form.inline-row { margin: 4px 0; }

.flash { padding: 6px 10px; margin: 8px 0; border-radius: 4px; }
.flash-error { background: #f6d5d5; border: 1px solid var(--red); color: var(--red); }
.flash-ok { background: #d9ecd9; border: 1px solid var(--green); color: var(--green); }

.auth-box {
  max-width: 360px;
  margin: 60px auto;
  background: var(--parchment);
  border: 3px solid var(--border);
  border-radius: 6px;
  padding: 16px 24px 24px;
}
.auth-box label { display: block; margin: 10px 0; }
.auth-box input { width: 100%; }
.game-title { text-align: center; color: var(--parchment); }
.bare-wrap { padding: 10px; }

/* Map */
.map-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.map-grid { border-collapse: collapse; user-select: none; }
.map-grid td.tile {
  width: 36px; height: 36px;
  border: 1px solid #b5a173;
  background: #9cb36b; /* grass */
  position: relative;
  text-align: center;
  padding: 0;
}
.tile-coord { font-size: 8px; color: #6b7a4a; }
.tile-link { display: block; width: 100%; height: 100%; position: relative; }
/* Village glyph on the map: ownership color shows through an SVG mask. */
.tile-dot {
  display: block;
  width: 26px; height: 26px;
  margin: 5px auto;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5,20.5 v-10.5 h1.5 v-2 h1 v2 h1.3 v-2 h1 v2 h1.2 v-4 h1.5 v-2 h1.2 v2 h1.6 v-2 h1.2 v2 h1.5 v4 h1.2 v-2 h1 v2 h1.3 v-2 h1 v2 h1.5 v10.5 z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5,20.5 v-10.5 h1.5 v-2 h1 v2 h1.3 v-2 h1 v2 h1.2 v-4 h1.5 v-2 h1.2 v2 h1.6 v-2 h1.2 v2 h1.5 v4 h1.2 v-2 h1 v2 h1.3 v-2 h1 v2 h1.5 v10.5 z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tile-own .tile-dot { background: #a88908; }
.tile-tribe .tile-dot { background: #1d4fa8; }
.tile-player .tile-dot { background: #8a1f1f; }
.tile-barbarian .tile-dot { background: #5f5f5f; }
.tile-tip {
  display: none;
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 105%;
  transform: translateX(-50%);
  background: #2b2115;
  color: var(--parchment);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11px;
}
.tile-link:hover .tile-tip { display: block; }
.map-legend .legend {
  display: inline-block;
  width: 16px; height: 16px;
  margin: 0 4px 0 12px;
  vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5,20.5 v-10.5 h1.5 v-2 h1 v2 h1.3 v-2 h1 v2 h1.2 v-4 h1.5 v-2 h1.2 v2 h1.6 v-2 h1.2 v2 h1.5 v4 h1.2 v-2 h1 v2 h1.3 v-2 h1 v2 h1.5 v10.5 z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5,20.5 v-10.5 h1.5 v-2 h1 v2 h1.3 v-2 h1 v2 h1.2 v-4 h1.5 v-2 h1.2 v2 h1.6 v-2 h1.2 v2 h1.5 v4 h1.2 v-2 h1 v2 h1.3 v-2 h1 v2 h1.5 v10.5 z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.legend.tile-own { background: #a88908; }
.legend.tile-tribe { background: #1d4fa8; }
.legend.tile-player { background: #8a1f1f; }
.legend.tile-barbarian { background: #5f5f5f; }
#map-wrap { cursor: grab; overflow: auto; }
#map-wrap.dragging { cursor: grabbing; }

/* SVG sprite icons (own artwork in /static/icons.svg, no copyrighted assets) */
.icon {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: -4px;
}
.topbar .icon, .costs .icon, .sidenav .icon, .map-legend .icon {
  width: 15px; height: 15px;
  vertical-align: -3px;
}
.sidenav .icon { flex: none; }
.costs { white-space: nowrap; }
.data.buildings td:first-child, .data.units td:first-child { white-space: nowrap; }
.icon-lg { width: 26px; height: 26px; vertical-align: -7px; }
.login-logo { width: 72px; height: 72px; display: block; margin: 0 auto 8px; }

.sim-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.sim-cols > div { flex: 1; min-width: 220px; }

.report-body table.report-army { border-collapse: collapse; margin: 6px 0; }
.report-body table.report-army th, .report-body table.report-army td {
  border: 1px solid var(--border); padding: 3px 8px; text-align: center;
}
.message-body { white-space: pre-wrap; background: #fff8e7; border: 1px solid var(--border); padding: 8px; border-radius: 4px; }
.forum-post { margin-bottom: 12px; }

/* Simple responsive: nav collapses above content on small screens */
@media (max-width: 760px) {
  .wrap { flex-direction: column; }
  .sidenav { flex: none; width: 100%; }
  .sidenav ul { display: flex; flex-wrap: wrap; }
  .sidenav a { border-bottom: none; }
}