:root{
  --content:#edd9ad; --panel:#f5ecd4; --panelHead:#e7d3a0;
  --border:#a2833f; --border2:#c3a465; --ink:#4a3720; --muted:#8a7448;
  --accent:#6b3d17; --good:#3f7a24; --bad:#9d2318;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Verdana,Geneva,sans-serif;font-size:13px;color:var(--ink);background:#6f6244}
img{-webkit-user-drag:none;user-select:none}
a{cursor:pointer;text-decoration:none;color:inherit}

/* Seitliche Hintergrundbilder + 950px Content */
.side{position:fixed;top:0;bottom:0;width:calc((100% - 950px)/2);background-position:center top;background-size:cover;z-index:0}
.side.left{left:0;background-image:url("../img/side_villages.png")}
.side.right{right:0;background-image:url("../img/side_map.png")}
.content{position:relative;z-index:1;width:950px;margin:0 auto;min-height:100vh;background:var(--content);box-shadow:0 0 20px rgba(0,0,0,.4)}
.page{padding:12px}
@media(max-width:950px){.content{width:100%}.side{display:none}}

/* Login */
.lbox{background:var(--panel);border:1px solid var(--border);border-radius:3px;padding:16px;margin:12px 0}
.lbox h3{margin:0 0 8px;color:var(--accent);font-family:Georgia,serif}
.lbox input{display:block;width:100%;padding:9px;margin:6px 0;border:1px solid var(--border);border-radius:3px;background:#fff}
.lbox button{padding:9px 14px;background:var(--panelHead);border:1px solid var(--border);border-radius:3px;font-weight:bold;width:100%;margin-top:4px}
.lbox button.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.err{background:#f6d9d5;border:1px solid var(--bad);color:var(--bad);padding:8px 12px;border-radius:3px;margin:10px 0}

/* Menü + Ressourcen */
.menubar{display:flex;gap:2px;background:linear-gradient(#f0e3bd,#e2ce97);border-bottom:2px solid var(--border);padding:4px 8px;flex-wrap:wrap}
.menu-item{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;color:var(--accent);font-weight:bold}
.menu-item img{width:24px;height:24px;object-fit:contain}
.menu-item:hover{background:rgba(255,255,255,.45)}
.menu-item.active{background:var(--panel);border:1px solid var(--border);border-bottom:none}
.subbar{display:flex;align-items:center;gap:12px;background:#efe2bd;border-bottom:1px solid var(--border);padding:5px 10px;flex-wrap:wrap}
.village-tag{font-weight:bold;font-family:Georgia,serif;border:1px solid var(--border);background:#f5ecd4;padding:3px 10px;border-radius:3px}
.resources{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.res{display:flex;align-items:center;gap:4px;background:#f5ecd4;border:1px solid var(--border2);padding:2px 8px;border-radius:3px}
.res img{width:18px;height:18px}
.res b{min-width:30px;text-align:right}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:3px;margin-bottom:12px;overflow:hidden}
.panel-head{background:linear-gradient(#e7d3a0,#dcc588);padding:6px 12px;font-weight:bold;font-family:Georgia,serif;color:var(--accent);border-bottom:1px solid var(--border)}

/* Dorf */
.village-view{position:relative;background:#c7d39a}
.village-bg{width:100%;display:block}
.markers .marker{position:absolute;transform:translate(-50%,-50%);text-align:center}
.markers .marker img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.markers .badge{display:inline-block;min-width:16px;margin-top:-8px;background:#3a6b28;color:#fff;font-size:11px;font-weight:bold;line-height:16px;padding:0 5px;border-radius:9px;border:1px solid #24451a}
.markers .marker.empty img{filter:grayscale(1) opacity(.55)}
.markers .marker.empty .badge{background:#8a7448;border-color:#5e4d2c}
.prod{padding:10px 14px;line-height:1.9}
.prod img{width:16px;height:16px;vertical-align:middle}

/* Bautabelle */
.btable{width:100%;border-collapse:collapse}
.btable th{background:linear-gradient(#e7d3a0,#dcc588);color:var(--accent);text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);font-family:Georgia,serif;font-size:12px}
.btable td{padding:7px 10px;border-bottom:1px solid #e3d6b2;vertical-align:middle}
.btable tr:hover td{background:#efe2bd}
.bname{display:flex;align-items:center;gap:9px;font-weight:bold}
.bname img{width:34px;height:34px;object-fit:contain}
.bname em{font-weight:normal;color:var(--muted);font-size:12px}
.c{display:inline-flex;align-items:center;gap:3px;margin-right:8px;font-size:12px}
.c img{width:14px;height:14px}
.note{color:var(--muted);font-style:italic;font-size:12px}
.build{padding:6px 12px;background:var(--accent);color:#fff;border:none;border-radius:3px;font-weight:bold}
.build:disabled{background:#b9a884}
.cancel{padding:5px 10px;background:#8a2c1c;color:#fff;border:none;border-radius:3px;font-weight:bold}

/* Karte */
.mapnav{padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mapnav input{padding:5px;border:1px solid var(--border);border-radius:3px}
.mapnav button,.navbtn{padding:6px 12px;background:var(--panelHead);border:1px solid var(--border);border-radius:3px;font-weight:bold}
.mapgrid{--n:21;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0;background:#6f8f4a;padding:6px;max-width:640px;margin:0 auto;border:2px solid var(--border)}
.cell{aspect-ratio:1;position:relative;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.cell.grass{background-image:url("../img/tile_grass.png")}
.cell.forest{background-image:url("../img/tile_forest.png")}
.cell.water{background-image:url("../img/tile_water.png")}
.cell.mountain{background-image:url("../img/tile_mountain.png")}
.cell .vimg{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));z-index:2}
.cell:hover .tip{display:block}
.tip{display:none;position:absolute;bottom:108%;left:50%;transform:translateX(-50%);background:#3a2a17;color:#fff;padding:3px 6px;border-radius:3px;font-size:11px;white-space:nowrap;z-index:9}
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:10px;color:var(--muted);font-size:12px}
.legend span{display:flex;align-items:center;gap:5px}
.legend .lg{width:14px;height:14px;border:1px solid var(--border);border-radius:2px;display:inline-block}
.lg.grass{background:#8fae5a}.lg.forest{background:#4f6f33}.lg.water{background:#5a86b0}
.lg.mountain{background:#8a8073}.lg.me{background:#b53020}.lg.other{background:#8a5a2a}