/* ---------- host controls (shared by /host and the board's «خيارات» panel) ---------- */
.hc { display: flex; flex-direction: column; gap: .6em; font-size: 16px; height: 100%; }
.hc .btn { min-height: 2.55em; font-size: 1.15em; border-radius: .7em; padding: 0 .6em; line-height: 1.2; }
.hc-row { display: flex; gap: .6em; }
.hc-row > .btn { flex: 1; min-width: 0; }
.hc-row.sm .btn { font-size: 1.02em; min-height: 2.75em; }
.hc .btn:disabled { opacity: .28; filter: grayscale(.7); }

.hc-status {
  min-height: 2.9em; display: flex; align-items: center; padding: .4em 1em; border-radius: .8em;
  background: var(--panel-2); font-weight: 700; font-size: 1.1em; line-height: 1.35; border-inline-start: .35em solid var(--muted);
}
.hc-status.t-red { border-color: var(--red); background: #3A1730; }
.hc-status.t-green { border-color: var(--green); background: #12352E; }
.hc-status.t-open { border-color: var(--gold); }

.hc-card { background: var(--cream); color: var(--ink); border-radius: 1em; padding: .75em 1em .85em; display: flex; flex-direction: column; gap: .45em; flex: 1 1 auto; min-height: 11em; }
.hc-card-top { display: flex; align-items: center; gap: .6em; }
.hc-letter {
  font-family: var(--display); font-weight: 800; font-size: 2.3em; line-height: 1; width: 1.45em; height: 1.45em;
  display: grid; place-items: center; background: var(--ink); color: var(--white);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.hc-chip { background: var(--ink); color: var(--cream); padding: .18em .7em; border-radius: 99px; font-size: .9em; font-weight: 600; }
.hc-rem { margin-inline-start: auto; font-size: .88em; color: #5A6280; font-weight: 600; }
.hc-q { margin: 0; font-size: 1.35em; font-weight: 700; line-height: 1.5; flex: 1; overflow: auto; }
.hc-q.empty { color: #7A819C; font-weight: 600; font-size: 1.15em; }
.hc-a { display: flex; align-items: baseline; gap: .6em; background: #FFF0B8; border-radius: .6em; padding: .45em .8em; font-size: 1.3em; }
.hc-a-k { font-size: .7em; font-weight: 700; color: #7A5A00; }
.hc-a b { font-weight: 700; }
.hc-a.hold { background: var(--ink); color: var(--cream); cursor: pointer; user-select: none; -webkit-user-select: none; }
.hc-a.hold b, .hc-a.hold .hc-a-k { display: none; }
.hc-a.hold::before { content: '✋ اضغط مطولاً لعرض الإجابة لك وحدك'; font-size: .72em; font-weight: 600; }
.hc-a.hold.reveal { background: #FFF0B8; color: var(--ink); }
.hc-a.hold.reveal::before { content: none; }
.hc-a.hold.reveal b, .hc-a.hold.reveal .hc-a-k { display: inline; }

.hc .hc-open { min-height: 2.4em; font-size: 1.4em; }
.btn.ok.as-red { background: var(--red); }

.hc-seg { display: flex; align-items: center; gap: .4em; background: var(--panel-2); border-radius: .8em; padding: .3em; }
.hc-seg span { font-size: .95em; color: var(--muted); font-weight: 600; padding: 0 .6em; white-space: nowrap; }
.hc-seg button { flex: 1; min-height: 2.35em; border: 0; border-radius: .6em; background: transparent; color: var(--white); font-size: 1.05em; font-weight: 700; }
.hc-seg button.on { background: var(--gold); color: #1B1A0E; }
.hc-seg button.p-red.on { background: var(--red); color: #fff; }
.hc-seg button.p-green.on { background: var(--green); color: #fff; }
.btn.pulse { animation: btnPulse 1.1s ease-in-out infinite; }
@keyframes btnPulse { 50% { filter: brightness(1.18); transform: scale(1.02); } }

/* ---------- /host page (iPad 1180×820, also fine on the Flip) ---------- */
body.host { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.host-top { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: var(--panel); border-bottom: 2px solid var(--line); flex: 0 0 auto; }
.host-top h1 { margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; }
.host-top h1 small { color: var(--muted); font-weight: 600; font-size: 15px; margin-inline-start: 6px; }
.host-top .round { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--gold); white-space: nowrap; }
.host-top .score { display: flex; gap: 8px; margin-inline-start: auto; }
.host-top .score span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.host-top .score small { font-size: 13px; font-weight: 600; opacity: .85; margin-inline-start: 6px; padding-inline-start: 8px; border-inline-start: 1px solid #ffffff55; }
.host-top .score .g { background: var(--green); }
.host-top .score .r { background: var(--red); }
.host-main { flex: 1; display: grid; grid-template-columns: minmax(440px, 40%) 1fr; gap: 16px; padding: 14px 16px 16px; min-height: 0; }
.host-ctrl { min-height: 0; }
.host-board { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; background: var(--panel); }
.host-board .hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #0A1433dd; padding: 5px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; pointer-events: none; white-space: nowrap; }
.host-board .boardbox { position: absolute; inset: 0; }
.host-lock { position: fixed; inset: 0; background: var(--bg); display: none; align-items: center; justify-content: center; z-index: 70; }
.host-lock.show { display: flex; }
@media (max-height: 760px) { .hc { font-size: 14.5px; } }
@media (max-width: 900px) {
  body.host { overflow: auto; height: auto; }
  .host-main { grid-template-columns: 1fr; }
  .host-board { height: 70vw; }
}
.hc-chip.hc-tick { background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.hc-chip.hc-tick.hurry { background: var(--red); }