/* ui.css — مكوّنات الواجهة: قوائم، أزرار، HUD، عصا، أزرار فعل، بطاقة فوز. */

/* ---------- أزرار عامة ---------- */
.btn {
  pointer-events: auto;
  min-height: var(--tap);
  padding: 14px 22px;
  border: none; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font-size: 17px; font-weight: 800;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(2px) scale(.98); box-shadow: var(--shadow-sm); }
.btn.big { min-height: var(--tap-lg); font-size: 20px; width: 100%; }
.btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-d)); color: #fff; }
.btn-primary:active { filter: brightness(.96); }
.btn-ghost { background: rgba(255,255,255,.55); color: var(--ink); box-shadow: var(--shadow-sm); }

.icon-btn {
  pointer-events: auto;
  width: var(--tap); height: var(--tap);
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.75); color: var(--ink);
  font-size: 22px; cursor: pointer; box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { transform: scale(.92); }
.icon-btn.back { font-size: 30px; position: absolute; top: 14px; inset-inline-start: 14px; }

/* ---------- شاشة تحميل ---------- */
.loading-box { text-align: center; display: grid; gap: 16px; justify-items: center; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 5px solid rgba(255,255,255,.5); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

/* ---------- القائمة ---------- */
.menu-card {
  position: relative;
  width: min(440px, 100%); text-align: center;
  background: rgba(255,255,255,.66); backdrop-filter: blur(10px);
  border-radius: 28px; padding: 32px 24px;
  box-shadow: var(--shadow-lg);
}
.logo {
  font-size: 64px; font-weight: 900; line-height: 1;
  color: var(--accent); letter-spacing: -1px;
  text-shadow: 0 4px 0 rgba(255,255,255,.9), 0 8px 16px rgba(226,62,132,.4);
}
.logo.big { font-size: 54px; }
.logo .bang { color: var(--accent2); display: inline-block; animation: wobble 1.4s ease-in-out infinite; }
.tagline { color: var(--ink-soft); margin: 10px 0 22px; font-weight: 600; }
.menu-buttons { display: grid; gap: 12px; }
.sound-toggle { position: absolute; top: 12px; inset-inline-end: 12px; }

/* ---------- إعداد ---------- */
.setup-card {
  position: relative;
  width: min(460px, 100%);
  background: rgba(255,255,255,.78); backdrop-filter: blur(10px);
  border-radius: 24px; padding: 56px 22px 24px;
  box-shadow: var(--shadow-lg);
  max-height: 100%; overflow-y: auto;
  /* تمكين التمرير باللمس داخل البطاقة (body عليه touch-action:none لمنع التكبير) */
  touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.setup-card h2 { text-align: center; margin-bottom: 18px; font-size: 24px; }
.field { margin-bottom: 22px; }
.field > label { display: block; font-weight: 800; margin-bottom: 10px; }

.seg { display: flex; gap: 8px; background: rgba(40,48,74,.07); padding: 6px; border-radius: 16px; }
.seg-btn {
  flex: 1; min-height: 50px; border: none; border-radius: 12px;
  background: transparent; font-size: 20px; font-weight: 800; color: var(--ink-soft);
  cursor: pointer; transition: all .12s ease;
}
.seg-btn.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }

.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.char-cell {
  aspect-ratio: 1; border-radius: 18px; border: 3px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: transform .1s ease, border-color .12s ease;
}
.char-cell .ch-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.char-cell:active { transform: scale(.95); }
.char-cell.active { border-color: #fff; box-shadow: 0 0 0 3px var(--accent), var(--shadow); transform: translateY(-2px); }
.char-cell .face {
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.9); margin-bottom: 18%;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.06);
  position: relative;
}
.char-cell .face::before, .char-cell .face::after {
  content: ""; position: absolute; top: 38%; width: 16%; height: 22%;
  background: var(--ink); border-radius: 50%;
}
.char-cell .face::before { inset-inline-start: 24%; }
.char-cell .face::after { inset-inline-end: 24%; }
.char-cell .nm { position: absolute; top: 6px; inset-inline: 0; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.25); }

.hint code { font-size: 12px; }

/* ---------- أونلاين ---------- */
.online-actions { display: grid; gap: 14px; }
.or { text-align: center; color: var(--ink-soft); font-weight: 700; }
.join-row { display: flex; gap: 8px; }
.join-row input {
  flex: 1; min-height: var(--tap); border: 2px solid rgba(40,48,74,.15);
  border-radius: 14px; text-align: center; font-size: 24px; font-weight: 900;
  letter-spacing: 6px; text-transform: uppercase; color: var(--ink); background: #fff;
}
/* حالة «الكود جاهز» — الإدخال وزر الانضمام يصيران أخضر */
.join-row input.ready { border-color: var(--good); background: #effff8; color: var(--good); }
.join-row .btn.ready { background: linear-gradient(180deg, #4fe0a0, #2bbd82); color: #fff; box-shadow: 0 0 0 3px rgba(62,201,139,.35), var(--shadow); }
.join-row .btn:not(.ready) { opacity: .6; }
.code-ok { color: var(--good); font-weight: 800; font-size: 13px; text-align: center; margin-top: 6px; min-height: 18px; }
.lobby-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 20px; border-radius: 10px; background: rgba(255,255,255,.7); box-shadow: var(--shadow-sm); margin: 0 2px; vertical-align: middle; }
.room-status { text-align: center; margin-top: 14px; font-weight: 800; min-height: 24px; }
.room-status .code { font-size: 40px; letter-spacing: 10px; color: var(--accent); }
.net-note { margin-top: 16px; line-height: 1.6; }

/* ---------- كيف ألعب ---------- */
.howto-list { display: grid; gap: 12px; margin: 4px 0 18px; padding-inline-start: 4px; }
.howto-list li { list-style: none; line-height: 1.6; background: rgba(255,255,255,.6); padding: 10px 14px; border-radius: 12px; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 15; display: none; }
.hud.active { display: block; }
.hud .icon-btn { pointer-events: auto; }
.hud-top {
  position: absolute; top: calc(var(--safe-t) + 10px);
  inset-inline: calc(var(--safe-r) + 10px) calc(var(--safe-l) + 10px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.round-info { display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.6); padding: 6px 12px; border-radius: 20px; box-shadow: var(--shadow-sm); }
.pip { width: 14px; height: 14px; border-radius: 50%; background: rgba(40,48,74,.18); }
.pip.win { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.round-num { font-weight: 900; font-size: 14px; }

/* عمود علوي: شارات النسبة ثم مؤقّت الصندوق — يمنع تداخل السطرين (يتكدّسان رأسياً) */
.hud-stack {
  position: absolute; top: calc(var(--safe-t) + 60px); inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 8px; pointer-events: none;
}
/* زرّ كتم الصوت في منتصف الأعلى (وسط الشاشة) */
.hud-top .sound-toggle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
/* شارات النسبة في الأعلى (تحت شريط الجولة) كي لا تتداخل مع أزرار التحكّم بالأسفل */
.percent-bar {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; align-items: flex-start;
  pointer-events: none;
}
.drop-timer {
  font-size: 13px; font-weight: 800; color: var(--ink);
  background: rgba(255,255,255,.72); padding: 3px 14px; border-radius: 14px;
  box-shadow: var(--shadow-sm); white-space: nowrap; transition: color .2s, background .2s;
}
.drop-timer.soon { color: #ff7b2e; background: rgba(255,236,210,.92); }
.drop-timer.ready { color: #1f9d54; background: rgba(214,247,224,.95); animation: dropPulse 1s ease infinite; }

/* في 2v2: لا يلتفّ الصندوقان رأسياً (يبقى فريق يمين وفريق يسار مهما اتّسعت الشارات) */
.percent-bar.team { flex-wrap: nowrap; gap: 6px; align-items: flex-start; }

/* تجميع الفِرَق في 2v2: إطار ملوّن + عنوان فوق شارتي الفريق */
.team-group {
  display: flex; align-items: flex-start; gap: 4px; padding: 3px 5px 4px;
  border-radius: 14px; background: rgba(255,255,255,.32);
  border: 2px solid var(--tc, #888); position: relative; margin-top: 9px;
}
.team-label {
  position: absolute; top: -10px; inset-inline: 0; text-align: center;
  font-size: 10px; font-weight: 900; color: var(--tc, #444);
  text-shadow: 0 1px 2px rgba(255,255,255,.85); white-space: nowrap;
}
/* شارات أصغر داخل الفِرَق كي يتّسع الصندوقان جنباً إلى جنب */
.team-group .pbadge { min-width: 46px; padding: 3px 4px 4px; border-bottom-width: 3px; }
.team-group .pbadge .pname { font-size: 10px; }
.team-group .pbadge .ppct { font-size: 16px; }
.team-group .pbadge .pstat { font-size: 9px; gap: 4px; }
.team-group .pbadge .pgear { font-size: 11px; min-height: 13px; }

.pbadge {
  min-width: 64px; text-align: center; padding: 4px 8px 6px;
  background: rgba(255,255,255,.78); border-radius: 14px; box-shadow: var(--shadow-sm);
  border-bottom: 4px solid var(--pc, #888); transition: transform .1s ease;
}
.pbadge.out { opacity: .4; filter: grayscale(.6); }
.pbadge .pname { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.pbadge .ppct { font-size: 22px; font-weight: 900; line-height: 1; color: var(--pc, #444); transition: color .2s ease, text-shadow .2s ease; }
.pbadge .pstat { font-size: 10px; font-weight: 800; color: var(--ink-soft); display: flex; gap: 6px; justify-content: center; margin-top: 1px; }
.pbadge .pgear { font-size: 13px; min-height: 16px; }
.pbadge.bump { animation: badgeBump .22s ease; }

/* درامية النسبة: ساخن (≥70%) ثم خطر (≥115%) — لون أدفأ ثم أحمر نابض */
.pbadge.hot { border-bottom-color: #ff9f43; }
.pbadge.hot .ppct { color: #ff7b2e; }
.pbadge.danger { border-bottom-color: #ff2e2e; box-shadow: 0 0 0 2px rgba(255,60,60,.55), var(--shadow-sm); }
.pbadge.danger .ppct { color: #ff2424; text-shadow: 0 0 10px rgba(255,60,60,.75); animation: pctDanger .5s ease-in-out infinite; }

.center-banner {
  position: absolute; top: 38%; inset-inline: 0; text-align: center;
  font-size: 76px; font-weight: 900; color: #fff;
  text-shadow: 0 4px 0 var(--accent-d), 0 10px 24px rgba(0,0,0,.3);
  pointer-events: none; opacity: 0;
}
.center-banner.show { animation: bannerPop .6s ease; }
.center-banner.sd { color: var(--danger); text-shadow: 0 4px 0 #a01010, 0 0 30px rgba(255,80,80,.7); }
/* مقدّمة الجولة بإيقاع: عدّ تنازلي قوي ثم «قاتل!» */
.center-banner.count { font-size: 128px; color: #fff; text-shadow: 0 5px 0 var(--accent-d), 0 0 34px rgba(255,255,255,.6); }
.center-banner.count.show { animation: countPop .62s cubic-bezier(.2,.9,.25,1); }
.center-banner.fight { color: var(--accent2); font-size: 104px; letter-spacing: 2px; text-shadow: 0 5px 0 #1f7a52, 0 0 40px rgba(120,255,180,.7), 0 10px 26px rgba(0,0,0,.3); }
.center-banner.fight.show { animation: fightPop .72s cubic-bezier(.18,.9,.2,1); }
/* لحظة «طاح!» — أكبر وأذهب وأكثر دراما */
.center-banner.ko {
  color: var(--warn); font-size: 112px; letter-spacing: 2px;
  text-shadow: 0 5px 0 #c77f00, 0 0 44px rgba(255,190,80,.9), 0 12px 30px rgba(0,0,0,.35);
}
.center-banner.ko.show { animation: koPop .9s cubic-bezier(.18,.9,.2,1); }


/* ---------- التحكم ---------- */
.controls { position: absolute; inset: 0; pointer-events: none; z-index: 16; display: none; }
.controls.active { display: block; }

/* التحكّم فيزيائي دائماً (لا ينعكس بالـRTL): العصا يسار، الأزرار يمين. */
.joystick {
  position: absolute; bottom: calc(var(--safe-b) + 26px); left: calc(var(--safe-l) + 18px);
  width: clamp(112px, 32vw, 140px); height: clamp(112px, 32vw, 140px);
  pointer-events: auto; touch-action: none;
}
.joy-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,.18));
  border: 3px solid rgba(255,255,255,.55); box-shadow: var(--shadow-sm);
}
.joy-knob {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px;
  margin: -28px 0 0 -28px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #e9eefc);
  box-shadow: var(--shadow); transition: opacity .15s;
}

/* عنقود أزرار مرتّب (لا تداخل): ضربة كبيرة بالزاوية + قفز/صدّ/قدرة/اندفاع بفجوات واضحة */
.action-cluster {
  position: absolute; bottom: calc(var(--safe-b) + 16px); right: calc(var(--safe-r) + 12px);
  width: 232px; height: 192px; pointer-events: none;
  transform: scale(var(--ctl-scale, 1)); transform-origin: bottom right;
}
.act-btn {
  position: absolute; pointer-events: auto; touch-action: none;
  width: 64px; height: 64px; border-radius: 50%;
  border: none; font-size: 28px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pop), var(--shadow); transition: transform .06s ease, filter .1s ease;
  -webkit-user-select: none; user-select: none;
}
.act-btn:active, .act-btn.pressed { transform: translateY(3px) scale(.94); filter: brightness(1.12); }
.act-btn.attack  { right: 8px;   bottom: 8px;   width: 84px; height: 84px; font-size: 36px; background: linear-gradient(180deg,#ff7a9c,#e23e84); }
.act-btn.jump    { right: 100px; bottom: 16px;  background: linear-gradient(180deg,#8ee08a,#3fa05a); }
.act-btn.shield  { right: 22px;  bottom: 100px; background: linear-gradient(180deg,#5bb8f0,#2f7bb0); }
.act-btn.ability { right: 104px; bottom: 104px; background: linear-gradient(180deg,#b08cff,#7a4ed9); overflow: hidden; }
.act-btn.dash    { right: 172px; bottom: 58px;  width: 54px; height: 54px; font-size: 22px; background: linear-gradient(180deg,#9fb3c8,#5b6488); }

/* زر القدرة: حلقة كولداون (تعتيم يتقلّص مع الشحن) + توهّج عند الجاهزية */
.act-btn.ability .emoji { position: relative; z-index: 2; }
.act-btn.ability::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: conic-gradient(from -90deg, rgba(20,16,40,0) var(--cd,0%), rgba(18,14,36,.62) 0);
}
.act-btn.ability.ready::after { background: rgba(255,255,255,0); }
.act-btn.ability.ready { box-shadow: 0 0 0 3px rgba(255,240,170,.95), var(--shadow-pop), var(--shadow); }
.act-btn.ability .charge {
  position: absolute; bottom: -2px; right: -2px; z-index: 3;
  min-width: 20px; height: 20px; border-radius: 10px; background: #fff; color: var(--ink);
  font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.act-btn.ability.empty { filter: grayscale(.7) brightness(.8); }

/* زر إضافة البوتات (أونلاين) */
.online-toggle { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 700; color: var(--ink-soft); margin: 6px 0; cursor: pointer; }
.online-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }

/* منتقي الساحات في الإعداد */
.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.map-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 14px; border: 2px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7); cursor: pointer; transition: transform .08s, border-color .1s;
}
.map-cell .map-ico { font-size: 26px; line-height: 1; }
.map-cell .map-nm { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.map-cell.active { border-color: var(--accent); background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- بطاقة الفائز ---------- */
.winner-card {
  position: relative; width: min(420px, 100%); text-align: center;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-radius: 28px; padding: 30px 24px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.winner-avatar {
  width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--pc, var(--accent)); position: relative;
  box-shadow: var(--shadow); animation: winnerPop .6s ease both;
}
.winner-avatar::before, .winner-avatar::after {
  content: ""; position: absolute; top: 40%; width: 16px; height: 24px; background: #fff; border-radius: 50%;
}
.winner-avatar::before { left: 32%; } .winner-avatar::after { right: 32%; }
.winner-avatar .mouth { position: absolute; bottom: 24%; left: 50%; transform: translateX(-50%); width: 34px; height: 18px; border-radius: 0 0 20px 20px; background: var(--ink); }
#winner-title { font-size: 22px; color: var(--ink-soft); }
.winner-name { font-size: 40px; font-weight: 900; color: var(--accent); margin: 4px 0 20px; }
.end-buttons { display: grid; gap: 10px; }
.crown { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 40px; animation: crownDrop .7s ease both; }

/* ---------- إيقاف ---------- */
.pause-card { width: min(320px,100%); text-align: center; background:#fff; border-radius: 24px; padding: 28px 22px; display: grid; gap: 12px; box-shadow: var(--shadow-lg); }
.pause-card h2 { margin-bottom: 6px; }

/* ---------- الإعدادات ---------- */
.settings-card { width: min(360px, 100%); text-align: right; }
.set-row { display: grid; gap: 8px; margin: 4px 0 10px; text-align: right; }
.set-row label { font-weight: 800; color: var(--ink-soft); display: flex; justify-content: space-between; }
.set-row label span { color: var(--accent); font-weight: 900; }
.set-row input[type="range"] { width: 100%; height: 30px; accent-color: var(--accent); pointer-events: auto; touch-action: pan-x; }

/* ---------- شاشة عريضة (لاندسكيب/ديسكتوب) ---------- */
@media (min-width: 760px) and (orientation: landscape) {
  .center-banner { font-size: 96px; }
}
/* جوالات متوسّطة: صغّر عنقود الأزرار قليلاً */
@media (max-width: 430px) {
  :root { --ctl-scale: .92; }
}
/* جوالات صغيرة */
@media (max-width: 360px) {
  .logo { font-size: 52px; }
  :root { --ctl-scale: .82; }
}
/* ارتفاع قصير (لاندسكيب الجوال): صغّر التحكّم كي لا يزاحم الشاشة */
@media (max-height: 460px) {
  :root { --ctl-scale: .8; }
  .joystick { width: clamp(96px, 26vh, 120px); height: clamp(96px, 26vh, 120px); bottom: calc(var(--safe-b) + 14px); }

  /* لاندسكيب + لوحة مفاتيح مفتوحة (كتابة كود الغرفة): كانت تحجب زر «انضم» ولا
     يمكن تمرير الصفحة (body ثابت). نجعل شاشة الأونلاين نفسها قابلة للتمرير من
     الأعلى مع مساحة سفلية، فيظهر الزر بالتمرير بدل الاضطرار لقلب الجوال. */
  #screen-online {
    align-items: flex-start;
    overflow-y: auto; touch-action: pan-y;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  #screen-online .setup-card { max-height: none; padding-bottom: 45vh; }
}