:root{
  --sand:#E8C79A; --sand-d:#C79A5A; --gold:#D4AF37; --gold-l:#F2D57E;
  --blue:#1B3A6B; --turq:#30B4A8; --red:#9B1B30; --ink:#2A1B0E;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;font-family:'Vazirmatn',sans-serif;}
body{
  background:
    radial-gradient(circle at 30% 20%, #F0D9A8, transparent 60%),
    linear-gradient(160deg,#D9B67A 0%, #C79A5A 55%, #A87840 100%);
  color:var(--ink);user-select:none;
}
#game-wrap{position:fixed;inset:0;display:flex;flex-direction:column;}

/* HUD */
#hud{
  position:absolute;top:0;left:0;right:0;height:52px;z-index:20;
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:linear-gradient(180deg,rgba(42,27,14,0.92),rgba(42,27,14,0.75));
  border-bottom:3px solid var(--gold);
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
}
.palace-badge{
  display:flex;align-items:center;gap:4px;background:var(--blue);
  color:var(--gold-l);padding:4px 10px;border-radius:20px;font-weight:800;
  border:2px solid var(--gold);font-size:15px;
}
.crown{color:var(--gold-l);font-size:16px;}
.res{
  display:flex;align-items:center;gap:5px;background:rgba(255,255,255,0.08);
  padding:5px 10px;border-radius:16px;font-weight:800;font-size:14px;color:#fff;
  border:1px solid rgba(242,213,126,0.4);
}
.res .ico{font-size:15px;}
.res.gold .ico{color:var(--gold-l);}
.res.water .ico{color:var(--turq);}
.res.gem .ico{color:#B577E0;}
.sound{
  margin-inline-start:auto;background:rgba(255,255,255,0.1);border:1px solid var(--gold);
  color:var(--gold-l);width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;
}
.sound.on{background:var(--turq);color:#fff;}

canvas{display:block;flex:1;touch-action:none;}

/* Controls (bottom tabs) */
#controls{
  position:absolute;bottom:0;left:0;right:0;z-index:20;
  display:flex;background:linear-gradient(0deg,rgba(42,27,14,0.96),rgba(42,27,14,0.85));
  border-top:3px solid var(--gold);
}
.tab{
  flex:1;padding:12px 4px;background:none;border:none;color:var(--sand);
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
  border-inline-start:1px solid rgba(242,213,126,0.15);transition:.2s;
}
.tab:first-child{border:none;}
.tab.active{background:linear-gradient(0deg,var(--red),rgba(155,27,48,0.5));color:var(--gold-l);font-weight:800;}

/* Panel */
#panel{
  position:absolute;bottom:52px;left:0;right:0;z-index:19;max-height:58%;
  background:linear-gradient(180deg,#F3E2C0,#E8C79A);
  border-top:4px solid var(--gold);border-radius:16px 16px 0 0;
  box-shadow:0 -6px 20px rgba(0,0,0,0.35);overflow-y:auto;
  animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.panel-head{
  position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:var(--blue);color:var(--gold-l);
  font-weight:800;font-size:16px;font-family:'Amiri',serif;
}
#panelClose{background:none;border:none;color:var(--gold-l);font-size:20px;cursor:pointer;}
#panelBody{padding:12px;}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.shop-card{
  background:#FFF7E6;border:2px solid var(--sand-d);border-radius:12px;
  padding:8px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.shop-card.special{border-color:var(--gold);background:linear-gradient(180deg,#FFF3D0,#FFE7A8);}
.mini-build{
  width:44px;height:40px;margin:0 auto 4px;border-radius:6px;
  background:var(--bc);position:relative;
}
.mini-build::before{
  content:'';position:absolute;top:-14px;left:0;right:0;height:20px;
  background:var(--dc);border-radius:50% 50% 0 0;
}
.troop-face{font-size:32px;line-height:44px;}
.sc-name{font-weight:800;font-size:13px;color:var(--ink);margin:2px 0;}
.sc-cost{font-size:12px;color:var(--red);font-weight:700;min-height:16px;}
.sc-sub{font-size:11px;color:#6a5030;}
.sc-btn{
  margin-top:5px;width:100%;padding:6px;border:none;border-radius:8px;
  background:linear-gradient(180deg,var(--turq),#1B8C82);color:#fff;
  font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
}
.sc-btn.dis{background:#B0A088;cursor:not-allowed;opacity:.7;}
.hint{margin-top:10px;font-size:12px;color:#6a5030;text-align:center;font-style:italic;}

.queue-title{margin:12px 0 6px;font-weight:800;color:var(--blue);}
.queue{display:flex;flex-direction:column;gap:6px;}
.qitem{display:flex;align-items:center;gap:8px;background:#FFF7E6;padding:6px 10px;border-radius:8px;font-size:13px;}
.qbar{flex:1;height:8px;background:#D9C4A0;border-radius:4px;overflow:hidden;}
.qbar>div{height:100%;background:var(--turq);transition:width .3s;}

.info-panel{max-width:420px;margin:0 auto;}
.info-row{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px dashed var(--sand-d);font-size:14px;}
.info-row b{color:var(--blue);font-weight:800;}
.big-btn{
  margin-top:12px;width:100%;padding:12px;border:none;border-radius:10px;
  background:linear-gradient(180deg,var(--red),#6E1123);color:var(--gold-l);
  font-family:inherit;font-weight:800;font-size:16px;cursor:pointer;
  box-shadow:0 3px 0 #4a0c17;
}
.big-btn.dis{background:#B0A088;box-shadow:0 3px 0 #8a7a60;color:#eee;}
.big-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #4a0c17;}
.danger-btn{
  margin-top:14px;width:100%;padding:9px;border:2px solid var(--red);border-radius:8px;
  background:none;color:var(--red);font-family:inherit;font-weight:700;cursor:pointer;
}
.attack-panel{max-width:420px;margin:0 auto;text-align:center;}
.attack-panel p{font-size:13px;color:#5a4020;margin:6px 0 12px;}
.army-preview{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px;}
.army-preview span{background:#FFF7E6;border:1px solid var(--sand-d);padding:5px 10px;border-radius:16px;font-weight:800;}
.army-preview i{color:#8a7a60;}

/* Battle HUD */
#battle-hud{
  position:absolute;top:52px;left:0;right:0;z-index:18;
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  background:linear-gradient(180deg,rgba(155,27,48,0.9),rgba(155,27,48,0.6));
  color:var(--gold-l);font-weight:800;
}
.battle-stars{font-size:18px;letter-spacing:2px;}
.battle-pct{margin-inline-start:auto;}
.end-btn{background:var(--ink);color:var(--gold-l);border:1px solid var(--gold);padding:6px 14px;border-radius:8px;font-family:inherit;font-weight:800;cursor:pointer;}

#deployBar{
  position:absolute;bottom:0;left:0;right:0;z-index:20;
  display:flex;gap:8px;padding:10px;overflow-x:auto;
  background:linear-gradient(0deg,rgba(42,27,14,0.96),rgba(42,27,14,0.8));
  border-top:3px solid var(--gold);
}
.dep{
  min-width:56px;height:56px;border-radius:12px;border:2px solid var(--sand-d);
  background:#FFF7E6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
}
.dep.sel{border-color:var(--turq);box-shadow:0 0 0 3px rgba(48,180,168,0.4);}
.dep:disabled{opacity:.4;}
.dep .de{font-size:24px;}
.dep .dn{font-size:12px;font-weight:800;color:var(--red);}

/* Toast */
#toast-wrap{position:absolute;top:60px;left:0;right:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;}
.toast{
  background:var(--ink);color:var(--gold-l);padding:8px 18px;border-radius:20px;
  font-weight:700;font-size:14px;border:1px solid var(--gold);
  box-shadow:0 3px 10px rgba(0,0,0,0.4);animation:pop .3s ease;
}
.toast.out{opacity:0;transition:opacity .4s;}
@keyframes pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}

/* Modal */
#modal{position:fixed;inset:0;z-index:50;background:rgba(42,27,14,0.7);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-card{
  background:linear-gradient(180deg,#F3E2C0,#E8C79A);border:4px solid var(--gold);
  border-radius:16px;padding:22px;max-width:340px;text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
#modalBody{font-size:15px;line-height:1.7;color:var(--ink);}
#modalBody b{color:var(--red);font-size:18px;font-family:'Amiri',serif;}
#modalClose{
  margin-top:16px;padding:10px 28px;border:none;border-radius:10px;
  background:linear-gradient(180deg,var(--turq),#1B8C82);color:#fff;
  font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 3px 0 #146a62;
}

/* Footer */
#footer{position:absolute;bottom:56px;left:8px;z-index:5;pointer-events:auto;}
#footer a{color:rgba(42,27,14,0.5);font-size:11px;text-decoration:none;}
#footer a:hover{color:var(--red);}

.hidden{display:none!important;}
</parameter>