/* ============================================================
   فريدة — نظام التصميم المشترك (هوية تكاتف: زيتوني وعاجي ولمسات ذهبية)
   القيم منسوخة من متغيرات بوابة تكاتف الفعلية — لا ألوان مخمّنة.
   ============================================================ */
:root {
  --warm: #F6F4EF;
  --ivory: #E8E3D6;
  --ink: #2D2D2B;
  --ink-60: rgba(45, 45, 43, .6);
  --olive: #7A826D;
  --olive-d: #57604A;
  --sand: #CBB89A;
  --sand-d: #7A6440;
  --clay: #8C4A3A;
  --line: rgba(45, 45, 43, .11);
  --r: 18px;
  --r-sm: 13px;
  --r-lg: 22px;
  --pad: 20px;
  --kufi: "Thmanyah Display", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --sans: "Thmanyah Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --salt: "Thmanyah Salt", "Thmanyah Display", var(--kufi);
  /* حالات الإجابات — لا نعتمد على اللون وحده (رموز نصية مرافقة دائمًا) */
  --st-unique: #57604A;
  --st-dup: #8C4A3A;
  --st-wrong: #96372A;
  --st-review: #7A6440;
  --st-none: rgba(45, 45, 43, .45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--warm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: break-word;
  direction: rtl;
}
h1, h2, h3, .kufi { font-family: var(--kufi); font-weight: 600; line-height: 1.5; margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.wrap { max-width: 560px; margin: 0 auto; padding: var(--pad); }
.wrap.wide { max-width: 1080px; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad);
  margin-bottom: 14px;
}

.brand-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.brand-head img { height: 44px; width: auto; }
.brand-head .ttl b { display: block; font-family: var(--kufi); font-size: 17px; }
.brand-head .ttl span { font-size: 12.5px; color: var(--ink-60); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-sm);
  background: var(--olive-d); color: #fff;
  font-family: var(--kufi); font-size: 15px; font-weight: 600;
  padding: 12px 22px; cursor: pointer; width: 100%;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--olive-d); border: 1.5px solid var(--olive-d); }
.btn.sand { background: var(--sand-d); }
.btn.clay { background: var(--clay); }
.btn.sm { width: auto; padding: 8px 16px; font-size: 13.5px; }

.inp {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; padding: 12px 14px; font-size: 16px;
}
.inp:focus { outline: none; border-color: var(--olive); }
label.fld { display: block; font-family: var(--kufi); font-size: 13.5px; margin: 10px 0 6px; color: var(--ink-60); }

.muted { color: var(--ink-60); font-size: 13px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row .grow { flex: 1; }
.hidden { display: none !important; }

/* شارة الحرف الكبيرة */
.letter-badge {
  width: 108px; height: 108px; margin: 10px auto;
  display: grid; place-items: center;
  background: var(--olive-d); color: var(--ivory);
  border-radius: 28px; font-family: var(--kufi);
  font-size: 58px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(87, 96, 74, .28);
}
.cat-chip {
  display: inline-block; background: var(--ivory); color: var(--sand-d);
  border-radius: 999px; padding: 3px 16px; font-family: var(--kufi);
  font-size: 14px; font-weight: 700;
}

/* المؤقت */
.timer {
  font-family: var(--kufi); font-size: 40px; font-weight: 700;
  text-align: center; color: var(--olive-d);
  font-variant-numeric: tabular-nums;
}
.timer.warn { color: var(--clay); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.timerbar { height: 7px; border-radius: 99px; background: var(--ivory); overflow: hidden; margin: 6px 0 2px; }
.timerbar i { display: block; height: 100%; background: var(--olive); border-radius: 99px; transition: width 1s linear; }
.timerbar.warn i { background: var(--clay); }

/* شبكة الدرجات */
.wagers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.wager {
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font-family: var(--kufi); font-size: 19px; font-weight: 700;
  padding: 10px 0; cursor: pointer; text-align: center; color: var(--ink);
  transition: all .12s;
}
.wager.sel { background: var(--olive-d); color: #fff; border-color: var(--olive-d); }
.wager[disabled] { opacity: .25; cursor: not-allowed; text-decoration: line-through; }
.wagers.final { grid-template-columns: repeat(3, 1fr); }
.wagers.final .wager { font-size: 24px; padding: 16px 0; }

/* حالات الإجابة */
.st { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 12px; font-size: 12.5px; font-weight: 700; font-family: var(--kufi); color: #fff; }
.st.unique { background: var(--st-unique); }
.st.dup { background: var(--st-dup); }
.st.wrong { background: var(--st-wrong); }
.st.review { background: var(--st-review); }
.st.none { background: var(--st-none); }
.delta { font-family: var(--kufi); font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.pos { color: var(--st-unique); }
.delta.neg { color: var(--st-wrong); }

/* الترتيب */
.standings { width: 100%; border-collapse: collapse; }
.standings th { font-family: var(--kufi); font-size: 12.5px; color: var(--ink-60); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.standings td { padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.standings tr.me td { background: var(--ivory); }
.standings .rank { font-family: var(--kufi); font-weight: 700; width: 44px; }
.standings .score { font-family: var(--kufi); font-weight: 700; font-variant-numeric: tabular-nums; }
.standings .score.neg { color: var(--st-wrong); }
tr.moved-up td { animation: rowup .8s ease; }
@keyframes rowup { from { background: rgba(122, 130, 109, .25); } }

/* رمز الغرفة */
.roomcode {
  font-family: var(--kufi); font-size: 42px; font-weight: 700;
  letter-spacing: .35em; text-align: center; color: var(--olive-d);
  direction: ltr; padding-left: 0; padding-right: .35em;
}

/* حالة الاتصال */
.conn { position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 50; background: var(--clay); color: #fff; border-radius: 999px; padding: 5px 16px; font-size: 12.5px; font-family: var(--kufi); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

.toast { position: fixed; bottom: 16px; inset-inline-end: 16px; z-index: 60; background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 10px 18px; font-size: 13.5px; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 82vw; }
.toast.show { opacity: 1; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--st-none); }
.dot.on { background: var(--st-unique); }

/* واجهة العرض على التلفاز */
body.screen { font-size: 19px; }
body.screen .wrap { max-width: 1500px; }
body.screen .letter-badge { width: 190px; height: 190px; font-size: 110px; border-radius: 44px; }
body.screen .timer { font-size: 88px; }
body.screen h1 { font-size: 44px; }
body.screen .roomcode { font-size: 88px; }

@media (max-width: 420px) {
  .wagers { grid-template-columns: repeat(4, 1fr); }
  .letter-badge { width: 92px; height: 92px; font-size: 48px; }
}

/* ===== توقيع «تصميم وتنفيذ» — عبدالملك بن محمد ===== */
.ft-foot{display:flex;justify-content:flex-start;align-items:center;margin-top:18px;padding:12px 2px 6px;border-top:1px solid var(--line);color:var(--ink-60)}
.ft-credit{position:relative}
#ft-credit-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:4px 2px;cursor:pointer;color:inherit;width:auto}
.ft-credit-label{font-size:12.5px;opacity:.75;padding-inline-end:10px;border-inline-end:1px solid rgba(122,100,64,.35);line-height:1.2}
.ft-sig{display:block;height:46px;width:auto;transition:filter .2s,transform .2s}
#ft-credit-btn:hover .ft-sig,#ft-credit-btn[aria-expanded="true"] .ft-sig{filter:drop-shadow(0 0 6px rgba(203,184,154,.75));transform:translateY(-1px)}
.ft-card{position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;width:max-content;max-width:calc(100vw - 32px);background:#fffdf8;color:#1d2925;border:1px solid #e3c994;border-radius:16px;padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.28);z-index:5;line-height:1.6}
.ft-card[hidden]{display:none}
.ft-card-role{display:block;font-size:12px;color:#8a6420;margin-bottom:4px}
.ft-card strong{display:block;font-size:16.5px;line-height:1.5}
.ft-card a{display:inline-block;margin-top:6px;font-size:14px;color:inherit;text-decoration:none;border-bottom:1px dashed #b88938;overflow-wrap:anywhere}
/* شاشة العرض: توقيع صغير ثابت في الزاوية بلا بطاقة */
.ft-credit.ft-mini{position:fixed;bottom:10px;inset-inline-end:16px;display:inline-flex;align-items:center;gap:8px;opacity:.55;pointer-events:none;color:var(--ink-60);z-index:1}
.ft-mini .ft-credit-label{font-size:12px;opacity:1}
.ft-mini .ft-sig{height:28px}