:root{
  --linen:#F3EADA;
  --linen-2:#E7DAC3;
  --clay:#A9503A;
  --clay-dark:#8A3E2B;
  --ink:#2A2622;
  --sand:#E8DCC8;
  --olive:#6E7B4E;
  --teal:#2E7F8C;
  --sun:#E8952F;
  --night:#18140F;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--ink);
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:none;
}
button{font-family:inherit;}

#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--night);}

/* ---------------- HUD ---------------- */
.hud{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;
  background:linear-gradient(180deg,rgba(24,20,15,.96),rgba(24,20,15,.86));
  color:var(--linen);
  direction:ltr;
  border-bottom:1px solid rgba(243,234,218,.12);
  z-index:5;
}
.hud-cluster{display:flex;align-items:center;gap:8px;min-width:0;}
.hud-cluster.right{gap:6px;}

.radar-wrap{
  position:relative;width:70px;height:70px;border-radius:50%;
  border:2px solid rgba(243,234,218,.5);
  box-shadow:0 0 0 2px rgba(24,20,15,.55),inset 0 0 14px rgba(0,0,0,.55);
  overflow:visible;flex:0 0 auto;background:#2b3a2f;
  padding:0;cursor:pointer;
  transition:transform .12s ease,border-color .15s ease;
}
.radar-wrap:active{transform:scale(.94);border-color:rgba(240,178,60,.9);}
.radar-wrap:focus-visible{outline:2px solid #F0B23C;outline-offset:3px;}
#radar{width:100%;height:100%;display:block;border-radius:50%;}
.radar-badge{
  position:absolute;bottom:-3px;inset-inline-end:-3px;
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;
  background:#F0B23C;color:#241F19;
  border:1.5px solid rgba(24,20,15,.8);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  pointer-events:none;
}

.hud-col{display:flex;flex-direction:column;gap:4px;min-width:0;}
.stars{display:flex;gap:2px;line-height:1;}
.stars i{
  font-style:normal;font-size:15px;color:rgba(243,234,218,.22);
  transition:color .18s ease,transform .18s ease;
}
.stars i.on{color:#F0B23C;text-shadow:0 0 8px rgba(240,178,60,.7);transform:scale(1.08);}

.meters{display:flex;flex-direction:column;gap:3px;}
.meter{
  width:96px;height:6px;border-radius:99px;overflow:hidden;
  background:rgba(243,234,218,.16);
}
.meter span{display:block;height:100%;width:100%;border-radius:99px;transition:width .2s ease;}
.meter.hp span{background:linear-gradient(90deg,#C0392B,#E4735A);}
.meter.ar span{background:linear-gradient(90deg,#2E7F8C,#5EC0CB);}

.wpn{display:flex;gap:6px;align-items:center;font-size:11px;color:rgba(243,234,218,.8);}
.wpn #wpnAmmo{font-weight:700;color:var(--linen);}

.chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(243,234,218,.1);border:1px solid rgba(243,234,218,.18);
  border-radius:10px;padding:3px 8px;min-width:52px;
}
.chip-k{font-size:9px;letter-spacing:.02em;color:rgba(243,234,218,.62);}
.chip-v{font-size:14px;font-weight:700;color:var(--linen);line-height:1.15;}

.icon-btn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(243,234,218,.12);border:1px solid rgba(243,234,218,.2);
  color:var(--linen);cursor:pointer;transition:transform .1s ease,background .15s;
}
.icon-btn:active{transform:scale(.93);background:rgba(243,234,218,.26);}

/* ---------------- STAGE ---------------- */
#stage{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:#E8DCC8;touch-action:none;
}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

.objective{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(24,20,15,.78);color:var(--linen);
  border:1px solid rgba(243,234,218,.25);
  padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;
  max-width:88%;text-align:center;z-index:4;pointer-events:none;
  backdrop-filter:blur(6px);
}
.objective.hidden{display:none;}

.toasts{
  position:absolute;left:0;right:0;bottom:10px;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.toast{
  background:rgba(24,20,15,.86);color:var(--linen);
  border-inline-start:3px solid var(--sun);
  border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:600;
  max-width:90%;animation:toastIn .24s ease-out;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.crosshair{
  position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border:2px solid rgba(243,234,218,.85);border-radius:50%;z-index:4;pointer-events:none;
  box-shadow:0 0 0 2px rgba(24,20,15,.4);
}
.crosshair.hidden{display:none;}
.crosshair::after{content:'';position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#F0B23C;border-radius:50%;}

/* ---------------- OVERLAYS ---------------- */
.overlay{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:12px;overflow-y:auto;
  background:rgba(20,17,13,.88);
  backdrop-filter:blur(7px);
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.overlay.hidden{display:none !important;}
.over-overlay{padding-top:104px;padding-bottom:16px;}

.panel{
  width:100%;max-width:430px;margin:auto;
  background:var(--linen);color:var(--ink);
  border-radius:20px;padding:16px;
  border:1px solid rgba(169,80,58,.28);
  box-shadow:0 20px 46px rgba(0,0,0,.5);
}
.panel.small{max-width:390px;}
.panel h1{font-size:22px;font-weight:800;margin:0;line-height:1.25;}
.panel h2{font-size:18px;font-weight:800;margin:0 0 10px;}
.tagline{margin:2px 0 0;font-size:12px;color:#7A6A57;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.brand-mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(160deg,#F2A65A,#D96A6A);flex:0 0 auto;
  box-shadow:0 6px 14px rgba(217,106,106,.35);
}
.section-title{font-size:12px;font-weight:700;color:#8A7461;margin:12px 0 6px;}

.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.hero-card{
  border:2px solid transparent;border-radius:14px;padding:8px 4px 7px;
  background:#EADFCB;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .12s ease,border-color .15s ease,background .15s ease;
}
.hero-card:active{transform:scale(.96);}
.hero-card.sel{border-color:var(--clay);background:#F6EEE0;}
.hero-swatch{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,var(--c1) 0 42%,var(--c2) 43% 100%);
  border:2px solid rgba(42,38,34,.15);
}
.hero-name{font-size:13px;font-weight:800;}
.hero-tag{font-size:9.5px;color:#7A6A57;text-align:center;line-height:1.25;}
.hero-bio{font-size:11.5px;color:#6D5C4A;margin:8px 0 4px;line-height:1.5;min-height:34px;}

.btn-primary{
  width:100%;margin-top:10px;padding:13px;border:none;border-radius:14px;
  background:var(--clay);color:#FFF6EA;font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 18px rgba(169,80,58,.35);
  transition:transform .1s ease,background .15s ease;
}
.btn-primary:active{transform:scale(.975);background:var(--clay-dark);}
.btn-row{display:flex;gap:8px;margin-top:8px;}
.btn-ghost{
  flex:1;padding:10px 6px;border-radius:12px;cursor:pointer;
  background:transparent;border:1.5px solid rgba(169,80,58,.4);color:var(--clay);
  font-size:12.5px;font-weight:700;transition:background .15s,transform .1s;
}
.btn-ghost:active{transform:scale(.97);background:rgba(169,80,58,.1);}
.btn-ghost.wide{width:100%;margin-top:8px;}
.best{font-size:12px;color:#7A6A57;text-align:center;margin:10px 0 0;}
.best b{color:var(--clay);}
.note{font-size:11px;color:#8A7461;text-align:center;margin:8px 0 0;line-height:1.5;}
.hidden{display:none !important;}

.seg{display:flex;gap:6px;background:#E4D7BF;padding:4px;border-radius:12px;}
.seg button{
  flex:1;padding:9px 4px;border-radius:9px;border:none;background:transparent;
  color:#6D5C4A;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s;
}
.seg button.on{background:var(--linen);color:var(--clay);box-shadow:0 2px 6px rgba(0,0,0,.12);}

.over-reason{font-size:14px;font-weight:700;color:var(--clay);text-align:center;margin:0 0 6px;}
.score-big{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:2px 0 2px;}
.score-big span{font-size:44px;font-weight:800;color:var(--ink);line-height:1;}
.score-big small{font-size:13px;color:#8A7461;}

.board-body{max-height:44vh;overflow-y:auto;margin-top:4px;}
.board-row{
  display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:10px;font-size:13px;
  border-bottom:1px solid rgba(169,80,58,.14);
}
.board-row.you{background:rgba(169,80,58,.1);font-weight:800;}
.board-row .rk{width:24px;color:#8A7461;font-weight:700;font-size:12px;}
.board-row .hd{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.board-row .sc{font-weight:800;color:var(--clay);}

.limits-list{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.9;color:#5C4E40;}
.limits-list li{margin-bottom:2px;}

/* ---------------- CONTROLS DOCK ---------------- */
.dock{
  flex:0 0 auto;
  --a:clamp(50px,min(15vh,17vw),68px);
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:6px clamp(14px,5vw,52px);
  background:linear-gradient(180deg,rgba(24,20,15,.94),rgba(18,15,12,.99));
  border-top:1px solid rgba(243,234,218,.1);
  touch-action:none;z-index:6;min-height:0;
}
.joy-area{display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;}
.joy{
  width:calc(var(--a)*1.66);height:calc(var(--a)*1.66);border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 45%,rgba(243,234,218,.16),rgba(243,234,218,.05));
  border:1.5px solid rgba(243,234,218,.28);
  touch-action:none;display:grid;place-items:center;
}
.joy-cross{
  position:absolute;inset:14%;border-radius:50%;
  border:1px dashed rgba(243,234,218,.18);
}
.joy-knob{
  width:calc(var(--a)*0.72);height:calc(var(--a)*0.72);border-radius:50%;
  background:radial-gradient(circle at 42% 34%,#F6EAD6,#C9B79B 70%,#A48E6E);
  box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 -2px 6px rgba(0,0,0,.25);
  transform:translate3d(0,0,0);will-change:transform;pointer-events:none;
}
.action-area{
  display:grid;grid-template-columns:repeat(2,var(--a));grid-auto-rows:var(--a);
  gap:8px;justify-items:center;align-items:center;flex:0 0 auto;
}
.act-btn{
  width:var(--a);height:var(--a);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(243,234,218,.1);
  border:1.5px solid rgba(243,234,218,.34);
  color:var(--linen);
  transition:transform .09s ease,background .15s ease;
  touch-action:none;
}
.act-btn.small{background:rgba(243,234,218,.07);color:rgba(243,234,218,.92);}
.act-btn:active,.act-btn.pressed{transform:scale(.9);background:rgba(243,234,218,.3);}
.act-btn.fire{
  background:linear-gradient(160deg,#C4583D,#8A3E2B);
  border-color:rgba(255,214,180,.6);
  box-shadow:0 8px 20px rgba(138,62,43,.5),inset 0 0 0 3px rgba(255,228,196,.14);
  color:#FFF4E2;
}
.act-btn.fire:active{background:linear-gradient(160deg,#D96A4A,#A9503A);}

@media (max-width:400px){
  .radar-wrap{width:62px;height:62px;}
  .meter{width:78px;}
  .chip{min-width:46px;padding:2px 6px;}
  .chip-v{font-size:13px;}
}
@media (max-height:520px){
  .brand{margin-bottom:8px;gap:8px;}
  .brand-mark{width:38px;height:38px;font-size:20px;border-radius:11px;}
  .panel{padding:12px;border-radius:16px;}
  .panel h1{font-size:18px;}
  .panel h2{font-size:16px;margin-bottom:6px;}
  .section-title{margin:8px 0 4px;}
  .heroes{gap:6px;}
  .hero-card{padding:6px 3px;}
  .hero-swatch{width:28px;height:28px;}
  .hero-name{font-size:12px;}
  .hero-tag{font-size:9px;}
  .hero-bio{min-height:0;font-size:11px;margin:6px 0 0;}
  .btn-primary{padding:11px;font-size:15px;margin-top:8px;}
  .best{margin-top:6px;}
  .over-overlay{padding-top:92px;}
}
/* ---------------- MAP ---------------- */
.map-overlay{background:rgba(16,13,10,.94);backdrop-filter:blur(8px);}
.map-sheet{
  width:100%;max-width:520px;margin:auto;
  background:var(--linen);color:var(--ink);
  border-radius:20px;padding:12px;
  border:1px solid rgba(169,80,58,.3);
  box-shadow:0 20px 46px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:10px;
}
.map-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.map-head h2{font-size:18px;font-weight:800;margin:0;color:var(--ink);}
.map-seg{background:#E4D7BF;padding:3px;border-radius:11px;flex:0 0 auto;}
.map-seg button{font-size:11.5px;padding:7px 10px;border-radius:8px;white-space:nowrap;}
.map-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;background:#E8DCC8;
  border:1.5px solid rgba(42,38,34,.22);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.18);
}
#bigmap{width:100%;height:100%;display:block;touch-action:manipulation;}
.map-north{
  position:absolute;top:8px;inset-inline-start:8px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  background:rgba(24,20,15,.8);color:var(--linen);
  border:1px solid rgba(243,234,218,.35);
}
.map-info{font-size:12.5px;color:#6D5C4A;text-align:center;margin:0;line-height:1.5;}
.map-legend{
  display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;
  font-size:11px;color:#5C4E40;
}
.map-legend span{display:inline-flex;align-items:center;gap:4px;}
.map-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
@media (max-height:560px){
  .map-sheet{padding:10px;gap:8px;border-radius:16px;}
  .map-head h2{font-size:16px;}
  .map-canvas-wrap{max-height:46vh;aspect-ratio:auto;}
  .map-info{font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
@media print{body{display:none;}}