/* ═══ Esm-Famil (اسم و فامیل) ═════════════════════════════════════════════════════════════════════════════ */

.board-wrapper:has(.ef-wrap) { align-items: flex-start; } /* the box is as tall as its content, so the page can scroll to the bottom of it */
.ef-wrap { width: 100%; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ef-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: var(--nx-surface-2, rgba(255, 255, 255, 0.05)); border: 1px solid var(--nx-border, rgba(255, 255, 255, 0.1)); position: relative; overflow: hidden; }
.ef-round { font-weight: 700; color: var(--nx-text-2, #a3aec8); font-size: 13px; }
.ef-letter { font: 900 54px/1 var(--font-fa, system-ui), system-ui, sans-serif; min-width: 76px; height: 76px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(135deg, #5b8dee, #9d4edd); color: #fff; box-shadow: 0 10px 24px -8px rgba(91, 141, 238, 0.6); animation: ef-pop 360ms cubic-bezier(0.23, 1, 0.32, 1); }
.ef-clock { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.ef-clock-low { color: #ff8a80; animation: ef-blink 0.8s ease-in-out infinite; }
.ef-bar { position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.08); }
.ef-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5ee0a0, #ffd54f, #ef5350); background-size: 300% 100%; transition: width 0.3s linear; }

.ef-players { display: flex; flex-wrap: wrap; gap: 6px; }
.ef-chip { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--nx-border, rgba(255, 255, 255, 0.12)); border-inline-start: 4px solid var(--seat-colour, #888); background: var(--nx-surface-2, rgba(10, 14, 22, 0.8)); font-size: 12.5px; }
.ef-chip-name { font-weight: 700; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-chip-info { color: var(--nx-text-2, #a3aec8); font-variant-numeric: tabular-nums; }
.ef-chip-full { box-shadow: 0 0 0 2px #66bb6a; }
.ef-chip-stop { box-shadow: 0 0 0 2px #ffd54f; }
.ef-banner { font-weight: 700; text-align: center; min-height: 22px; direction: auto; }

.ef-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ef-field { display: flex; flex-direction: column; gap: 4px; }
.ef-label { font-weight: 700; font-size: 13px; color: var(--nx-text-2, #a3aec8); direction: auto; }
.ef-input { width: 100%; min-height: 46px; padding: 8px 12px; font-size: 18px; border-radius: 12px; border: 2px solid var(--nx-border, rgba(255, 255, 255, 0.16)); background: var(--nx-surface, rgba(255, 255, 255, 0.05)); color: inherit; transition: border-color 140ms ease-out; }
.ef-input:focus { outline: none; border-color: #5b8dee; }
.ef-ok { border-color: #66bb6a; }
.ef-bad { border-color: #ef5350; }
.ef-input:disabled { opacity: 0.7; }
.ef-stop { align-self: center; min-height: 48px; padding: 0 28px; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.ef-main { display: flex; flex-direction: column; gap: 10px; }
.ef-hint { margin: 0; text-align: center; font-size: 12px; color: var(--text-muted, #8d98b8); direction: auto; }

.ef-review { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ef-cat { border: 1px solid var(--nx-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; padding: 8px 10px; background: var(--nx-surface-2, rgba(255, 255, 255, 0.04)); }
.ef-cat h4 { margin: 0 0 6px; font-size: 14px; direction: auto; }
.ef-ans { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--nx-border, rgba(255, 255, 255, 0.07)); min-height: 34px; }
.ef-ans-who { flex: 0 0 76px; font-size: 11.5px; color: var(--nx-text-2, #a3aec8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-ans-text { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ef-empty { opacity: 0.4; font-weight: 400; }
.ef-out { text-decoration: line-through; opacity: 0.55; color: #ef9a9a; }
.ef-flag { font-size: 11px; color: #ff8a80; font-style: normal; white-space: nowrap; }
.ef-votes { font-size: 11px; color: var(--nx-text-2, #a3aec8); }
.ef-rej { min-height: 32px; min-width: 38px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border-radius: 10px; }
.ef-rej-on { background: #c62828; border-color: #c62828; color: #fff; }
.ef-done { align-self: center; min-height: 46px; padding: 0 26px; display: inline-flex; align-items: center; gap: 8px; }

.ef-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--nx-border, rgba(255, 255, 255, 0.12)); -webkit-overflow-scrolling: touch; }
.ef-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.ef-tbl th, .ef-tbl td { padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--nx-border, rgba(255, 255, 255, 0.08)); white-space: nowrap; }
.ef-tbl th { color: var(--nx-text-2, #a3aec8); font-size: 12px; }
.ef-who { text-align: start !important; font-weight: 700; position: sticky; inset-inline-start: 0; background: var(--nx-surface, #11172a); }
.ef-cell { min-width: 70px; line-height: 1.25; }
.ef-cell-w { display: block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ef-cell b { color: #81c784; font-size: 12px; }
.ef-cell-off b { color: #ef9a9a; }
.ef-cell-off .ef-cell-w { opacity: 0.5; text-decoration: line-through; }
.ef-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.ef-grand { color: #ffd54f; }
.ef-mine .ef-who { color: #ffd54f; }
.ef-next { margin-top: 8px; }

@keyframes ef-pop { from { transform: scale(0.4) rotate(-12deg); opacity: 0; } }
@keyframes ef-blink { 50% { opacity: 0.55; } }
@media (max-width: 560px) {
  .ef-grid { grid-template-columns: 1fr; gap: 8px; }
  .ef-letter { font-size: 42px; min-width: 62px; height: 62px; border-radius: 16px; }
  .ef-head { gap: 10px; padding: 8px 12px; }
  .ef-clock { font-size: 20px; }
  .ef-review { grid-template-columns: 1fr; }
  .ef-input { font-size: 17px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ef-letter, .ef-clock-low { animation: none; } .ef-bar i { transition: none; } }

/* the form is longer than the screen on a phone: leave room under it for the fixed bottom bar, or Stop could never be tapped.
   (The room is inside the game's own box: Firefox ignores the bottom padding of a scrolling flex container.) */
@media (max-width: 900px) { .ef-wrap { padding-bottom: calc(76px + var(--safe-b, 0px)); } }