:root{
  --ink:#172317;
  --panel:rgba(18,31,21,.92);
  --gold:#e1bf68;
  --cream:#f4e6b9;
  --line:rgba(226,194,104,.25);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#152c1e;font-family:Tahoma,Arial,sans-serif;color:#fff}
button{font:inherit}
#game-shell{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at top,#1f4a34 0,#143121 58%,#102819 100%)}
#game{display:block;width:100%;height:100%;cursor:grab}
#game.dragging{cursor:grabbing}
.hud{position:absolute;z-index:5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top-hud{top:18px;left:50%;transform:translateX(-50%);width:min(1220px,calc(100% - 34px));height:76px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,31,21,.95),rgba(20,35,23,.88));border-radius:20px;box-shadow:0 16px 38px rgba(0,0,0,.26);display:flex;align-items:center;gap:22px;padding:10px 14px;direction:rtl}
.brand{min-width:190px;height:54px;border-radius:15px;background:linear-gradient(135deg,#263522,#111b13);border:1px solid rgba(226,194,104,.2);display:flex;align-items:center;gap:12px;padding:7px 11px}
.brand-crown{width:38px;height:38px;border-radius:12px;background:#3c3a1e;color:#f1d474;display:grid;place-items:center;font-size:23px}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}
.brand-copy strong{color:#f3d983;font-size:22px}
.brand-copy span{font-size:11px;color:#c7cfb6;margin-top:5px}
.resources{display:flex;gap:8px;flex:1;justify-content:center}
.resource{min-width:108px;height:50px;border-radius:14px;background:#101b13;border:1px solid rgba(255,255,255,.05);display:grid;grid-template-columns:17px 1fr;grid-template-rows:25px 15px;column-gap:4px;padding:6px 10px;align-items:center}
.resource .dot{width:9px;height:9px;border-radius:50%;grid-row:1/3;box-shadow:0 0 10px currentColor}
.resource b{font-size:15px;color:#f4e4ad;line-height:1}.resource small{font-size:10px;color:#91a086;line-height:1}
.dot.gold{background:#d8ae47;color:#d8ae47}.dot.wheat{background:#d4c56a;color:#d4c56a}.dot.wood{background:#9a693f;color:#9a693f}.dot.stone{background:#8d9992;color:#8d9992}
.actions{display:flex;gap:8px;min-width:260px;justify-content:flex-start}
button{border:1px solid rgba(235,206,125,.18);background:#33432e;color:#f6ebc9;border-radius:12px;padding:11px 16px;cursor:pointer;transition:.18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
button:hover{transform:translateY(-1px);filter:brightness(1.08)}
button.primary{background:linear-gradient(180deg,#6a6740,#4a492f);border-color:rgba(236,205,113,.34);color:#fff0bb;font-weight:700}
button.wide{width:100%}.ghost{background:rgba(255,255,255,.05)}
.village-card{top:114px;right:24px;width:300px;background:linear-gradient(180deg,rgba(18,30,20,.96),rgba(24,38,26,.92));border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.village-card h2{margin:6px 0 6px;color:#f1d47b;font-size:24px}.village-card p{margin:0 0 16px;color:#b9c6ad;font-size:13px}.relation{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(226,194,104,.12);color:#e6cc7f;font-size:11px}.icon-btn{position:absolute;left:12px;top:12px;padding:3px 9px;font-size:22px;background:transparent;border:0;color:#aab6a1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0 18px}.stats div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:9px 8px;text-align:center}.stats small{display:block;color:#8fa089;font-size:10px;margin-bottom:4px}.stats b{font-size:14px;color:#f0e3b3}
.build-panel{bottom:20px;left:50%;transform:translateX(-50%);width:min(860px,calc(100% - 30px));background:linear-gradient(180deg,rgba(16,27,18,.96),rgba(18,31,21,.9));border:1px solid var(--line);border-radius:20px;padding:12px 14px;box-shadow:0 18px 44px rgba(0,0,0,.3)}
.build-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.build-head>div{display:flex;flex-direction:column}.build-head strong{color:#f2d77f;font-size:16px}.build-head span{color:#87977f;font-size:10px;margin-top:3px}.build-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.build-grid button{display:grid;grid-template-columns:40px 1fr;grid-template-rows:20px 16px;text-align:right;align-items:center;background:#293a29;padding:8px 10px}.build-grid .symbol{grid-row:1/3;width:34px;height:34px;border-radius:10px;background:#3a4935;color:#e8ca6f;display:grid;place-items:center;font-size:18px}.build-grid b{font-size:12px}.build-grid small{font-size:9px;color:#91a08a}.build-grid button.active{outline:2px solid rgba(225,191,104,.75);background:#394d34}
.map-help{bottom:16px;left:50%;transform:translateX(-50%);background:rgba(22,31,21,.72);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 14px;display:flex;gap:10px;align-items:center;color:#e1d7b9;font-size:11px}.map-help i{width:4px;height:4px;border-radius:50%;background:#9b8a59}
.toast{position:absolute;z-index:9;left:50%;top:106px;transform:translate(-50%,-16px);background:#17251a;border:1px solid rgba(226,194,104,.25);color:#f0e4bf;border-radius:12px;padding:10px 16px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.version{position:absolute;right:12px;bottom:8px;color:rgba(255,255,255,.35);font-size:9px;z-index:4}.hidden{display:none!important}
@media(max-width:900px){.resources .resource{min-width:77px}.actions{min-width:auto}.top-hud{gap:8px}.brand{min-width:150px}.brand-copy strong{font-size:17px}.actions button{padding:9px 10px}.build-grid{grid-template-columns:repeat(2,1fr)}}