/* ---- שני מצבים: "ים" בהיר (ברירת מחדל) ו-"לילה" כהה ---- */
/* הצבעים נבחרו כך שכל טקסט עובר את יחס הניגודיות של WCAG 2.1 AA
   (4.5:1 לטקסט רגיל, 3:1 לטקסט גדול) — נמדד, לא באומדן. */
:root,
:root[data-theme="ocean"] {
  color-scheme: light;
  --surface: #e9f4fa;
  --surface-raised: #ffffff;
  --surface-key: #cfe4f0;
  --border: #b3d2e4;
  --text: #10303f;
  --text-muted: #4d7488;
  --ink: #14202a;
  --correct: #1c7a6d;
  --present: #eeaa2e;
  --absent: #5e7686;
  --on-correct: #ffffff;
  --on-present: var(--ink);
  --on-absent: #ffffff;
  --accent: #17699b;
  --accent-strong: #11527a;
  --on-accent: #ffffff;
  --focus: #0b3f60;
  --shadow: 0 2px 8px rgba(16, 48, 63, 0.1);
}

:root[data-theme="night"] {
  color-scheme: dark;
  --surface: #12141a;
  --surface-raised: #1b1e26;
  /* מקש שלא נוסה בהיר יותר ממקש שנפסל, כמו בוורדל המקורי */
  --surface-key: #4a5162;
  --border: #2c313c;
  --text: #eef1f6;
  --text-muted: #98a0b0;
  --ink: #14202a;
  --correct: #1c7a6d;
  --present: #d9a017;
  --absent: #2f333d;
  --on-correct: #ffffff;
  --on-present: var(--ink);
  --on-absent: #ffffff;
  --accent: #5a8ae6;
  --accent-strong: #4c7dd8;
  --on-accent: var(--ink);
  --focus: #9dc1ff;
  --shadow: none;
}

/* ---- אפשרויות הנגישות: כל אחת מהן משנה באמת את מה שמצויר ---- */

/* ניגודיות מוגברת: זוג צבעים שנשאר מובחן גם בעיוורון צבעים אדום-ירוק */
:root[data-contrast="on"] {
  --correct: #0f5ea8;
  --present: #a85000;
  --absent: #3d4650;
  --on-correct: #ffffff;
  --on-present: #ffffff;
  --on-absent: #ffffff;
  --border: currentColor;
  --text-muted: var(--text);
}

/* גודל טקסט */
html { font-size: 16px; }
:root[data-text-size="1"] { font-size: 18px; }
:root[data-text-size="2"] { font-size: 21px; }

/* ללא צבע: כל העמוד עובר לגווני אפור — רקעים, כפתורים ולוח.
   התוצאה נקראת מהצורות ומהבהירות בלבד. */
:root[data-mono="on"] {
  --surface: #f4f4f4;
  --surface-raised: #ffffff;
  --surface-key: #e2e2e2;
  --border: #8f8f8f;
  --text: #111111;
  --text-muted: #3d3d3d;
  --correct: #1f1f1f;
  --present: #6b6b6b;
  --absent: #d6d6d6;
  --on-correct: #ffffff;
  --on-present: #ffffff;
  --on-absent: #1f1f1f;
  --accent: #1f1f1f;
  --accent-strong: #000000;
  --on-accent: #ffffff;
  --focus: #000000;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

:root[data-mono="on"][data-theme="night"] {
  --surface: #0d0d0d;
  --surface-raised: #191919;
  --surface-key: #3c3c3c;
  --border: #5c5c5c;
  --text: #f5f5f5;
  --text-muted: #c9c9c9;
  --correct: #f2f2f2;
  --present: #9a9a9a;
  --absent: #262626;
  --on-correct: #101010;
  --on-present: #101010;
  --on-absent: #f2f2f2;
  --accent: #f2f2f2;
  --accent-strong: #ffffff;
  --on-accent: #101010;
  --focus: #ffffff;
  --shadow: none;
}

/* גופן קריא: אותיות פתוחות יותר, בלי צורות דקיקות.
   הלוח והמקלדת נשארים בגופן המשחק — שם צורת האות היא חלק מהמשחק. */
:root[data-font="on"] body,
:root[data-font="on"] button,
:root[data-font="on"] input {
  font-family: Verdana, Tahoma, "Arial Hebrew", Arial, sans-serif;
  letter-spacing: 0.01em;
}

:root[data-font="on"] .tile,
:root[data-font="on"] .key {
  font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  letter-spacing: normal;
}

/* ריווח מוגדל (WCAG 1.4.12) — על טקסט קריאה בלבד, לא על הלוח והמקלדת,
   שם ריווח נוסף היה מרחיב את השורות מעבר לרוחב המסך */
:root[data-spacing="on"] p,
:root[data-spacing="on"] li,
:root[data-spacing="on"] .hint,
:root[data-spacing="on"] .legal,
:root[data-spacing="on"] .field,
:root[data-spacing="on"] .status-label,
:root[data-spacing="on"] .answer-note,
:root[data-spacing="on"] .option-row,
:root[data-spacing="on"] .modal-card h2,
:root[data-spacing="on"] .modal-card h3 {
  line-height: 1.9;
  letter-spacing: 0.09em;
  word-spacing: 0.12em;
}

:root[data-spacing="on"] p { margin-bottom: 1.4em; }

/* הדגשת קישורים */
:root[data-links="on"] a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

/* סמן עכבר גדול */
:root[data-cursor="on"],
:root[data-cursor="on"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 8 38 16 30 22 44 30 40 24 27 36 27Z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto;
}

/* צמצום אנימציות לפי בחירת המשתמש, לא רק לפי הגדרת המערכת */
:root[data-motion="on"] *,
:root[data-motion="on"] *::before,
:root[data-motion="on"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ---- בסיס ---- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 16px);
  overflow-x: hidden;
  background: var(--surface);
  color: var(--text);
  font-family: "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* גודל המשבצת נגזר גם מרוחב המסך וגם מגובהו, כדי שכל המשחק ייכנס במסך אחד */
.board,
.tile {
  /* המספר האחרון הוא מה שכל השאר תופס לגובה — נמדד במכשירים אמיתיים,
     כדי שהמשחק כולו ייכנס במסך אחד בלי גלילה */
  --tile-size: min(62px, calc((100vw - 88px) / 5), calc((100svh - 508px) / 6));
}

/* ---- סרגל עליון ---- */
.top-bar {
  width: min(560px, 100%);
  padding: 10px 14px calc(10px + env(safe-area-inset-top)) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.top-bar-side { display: flex; align-items: center; gap: 8px; }

/* "יציאה" יושב ליד המתג, ושתי הפעולות למטה נמתחות על כל הרוחב */
.header-button {
  font: inherit;
  font-size: clamp(0.75rem, 3vw, 0.88rem);
  font-weight: 600;
  min-height: 34px;
  padding: 7px 14px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  white-space: nowrap;
}

.header-button:hover { border-color: var(--accent); }
.header-button[hidden] { display: none; }

/* שורת פעולות רחבה, כדי שהכפתורים יהיו נוחים לאצבע גם בטלפון */
.action-bar {
  display: flex;
  gap: 8px;
  width: min(560px, 100%);
  padding: 0 12px;
}

.action-bar[hidden] { display: none; }

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-height: 46px;
  padding: 8px 6px;
  font: inherit;
  font-size: clamp(0.78rem, 3.4vw, 0.9rem);
  font-weight: 600;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.action-button:hover { border-color: var(--accent); }
.action-button:active { transform: scale(0.97); }

/* הלוגו והשם על אותו קו: אותו גובה, אותו מרכז אנכי */
.title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  line-height: 1;
  white-space: nowrap;
}

.app-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--accent);
}

.app-logo .icon { width: 1.35em; height: 1.35em; }
.title-mark { color: var(--text-muted); font-weight: 400; }

.primary-button,
.tab,
.key,
.close-button {
  font: inherit;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.tab:hover,
.key:hover { border-color: var(--accent); }

.primary-button {
  display: block;
  margin: 4px auto 0;
  min-width: 190px;
  padding: 12px 20px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* סימון פוקוס אחיד לכל דבר שאפשר להגיע אליו במקלדת (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* מיכל עם tabindex="-1" מקבל פוקוס רק מהקוד, כדי להעביר את קורא המסך לאזור
   החדש. הוא לא יעד ניווט, ולכן אין לו טבעת פוקוס: בלי זה כל מסך המשחק מוקף
   בקו כחול בכל כניסה למשחק. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

.primary-button:hover { background: var(--accent-strong); }

/* ---- מתג בהיר / כהה ---- */
/* הידית והאייקונים מחושבים מאותם משתנים, ולכן ממורכזים בכל גודל */
.mode-switch {
  --knob-size: 26px;
  --knob-gap: 3px;
  --switch-width: 62px;
  --switch-height: 32px;
  --travel: calc(var(--switch-width) - var(--knob-size) - 2 * var(--knob-gap) - 2px);

  position: relative;
  flex: 0 0 auto;
  width: var(--switch-width);
  height: var(--switch-height);
  padding: 0;
  background: var(--surface-key);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

/* שני האייקונים תמיד גלויים, בדיוק בשתי העמדות של הידית */
.mode-switch-icon {
  position: absolute;
  z-index: 1;
  top: var(--knob-gap);
  width: var(--knob-size);
  height: var(--knob-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 320ms ease;
}

.mode-switch-icon[data-icon="sun"] { inset-inline-start: var(--knob-gap); }
.mode-switch-icon[data-icon="moon"] { inset-inline-start: calc(var(--knob-gap) + var(--travel)); }
.mode-switch-icon .icon { width: 60%; height: 60%; }

:root[data-theme="ocean"] .mode-switch-icon[data-icon="sun"],
:root[data-theme="night"] .mode-switch-icon[data-icon="moon"] { color: var(--accent); }

.mode-switch-knob {
  position: absolute;
  z-index: 0;
  top: var(--knob-gap);
  inset-inline-start: var(--knob-gap);
  width: var(--knob-size);
  height: var(--knob-size);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 320ms cubic-bezier(0.34, 0.8, 0.36, 1);
}

.mode-switch:hover { border-color: var(--accent); }
.mode-switch:hover .mode-switch-knob { border-color: var(--accent); }
.mode-switch:active .mode-switch-knob { transform-origin: center; scale: 0.94; }
.close-button:hover { border-color: var(--accent); }

/* במצב כהה הידית מחליקה שמאלה, אל האייקון של הירח */
:root[data-theme="night"] .mode-switch-knob { transform: translateX(calc(-1 * var(--travel))); }

/* מעבר רך בין המצבים במקום קפיצה */
body,
.card,
.tile,
.key,
.action-button,
.header-button,
.mode-switch,
.mode-switch-knob,
.status-chip,
.modal-card,
.toast,
.field input,
.stat-cell {
  transition: background-color 340ms ease, border-color 340ms ease, color 340ms ease;
}

.mode-switch-knob {
  transition: transform 320ms cubic-bezier(0.34, 0.8, 0.36, 1),
              background-color 340ms ease, border-color 340ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body, .card, .tile, .key, .action-button, .mode-switch, .mode-switch-knob,
  .status-chip, .modal-card, .toast, .field input, .stat-cell { transition: none; }
}

/* ---- מסך כניסה ---- */
.card {
  width: min(360px, 92vw);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { flex: 1; background: transparent; }
.tab.is-active { background: var(--surface-key); border-color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 0.9rem; }

.field input {
  font-size: 16px; /* מונע זום אוטומטי ב-iOS */
  padding: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* .field sets display:flex, which would otherwise beat the hidden attribute. */
.field[hidden] { display: none; }

/* כפתור "הצג סיסמה" יושב בתוך השדה עצמו, בקצה (בעברית — משמאל) */
.field-row { position: relative; display: flex; }
.field-row input { flex: 1; min-width: 0; padding-inline-end: 46px; }

.reveal-button {
  position: absolute;
  inset-inline-end: 5px;
  inset-block: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

.reveal-button:hover { color: var(--text); }
.reveal-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* הסבר על הסיסמה — מתחת לשני שדות הסיסמה, מיושר לתחילת השורה */
.field-hint {
  margin: -6px 0 14px;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: start;
}

.field-hint[hidden] { display: none; }

/* ---- מה שגורם לכרטיס להרגיש חי: היררכיה, מצבים ותנועה קצרה ---- */

/* הכרטיס נכנס פנימה במקום להופיע פתאום */
.auth { animation: card-in 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* הלשונית הפעילה נושאת משקל אמיתי, לא רק מסגרת אחרת */
.tab { transition: background-color 160ms ease, border-color 160ms ease; }
.tab:hover { background: var(--surface); }
.tab.is-active { font-weight: 700; }

/* השדה שבפוקוס מסמן את עצמו גם בכותרת שלו */
.field input:hover { border-color: var(--text-muted); }
.field:focus-within > span:first-child { color: var(--accent-strong); font-weight: 600; }

/* מהיר לאינטראקציה, איטי למעבר בין מצבי התצוגה */
.field input { transition: background-color 340ms ease, border-color 160ms ease, color 340ms ease; }

.reveal-button { transition: color 140ms ease, background-color 140ms ease, transform 120ms ease; }
.reveal-button:hover { color: var(--text); background: var(--surface-key); }
.reveal-button:active { transform: scale(0.92); }

/* הכפתור הראשי הוא העוגן של הכרטיס — ברוחב מלא, לא צף באמצע */
.primary-button {
  width: 100%;
  min-width: 0;
  margin: 18px 0 0;
  padding: 13px 20px;
  font-weight: 700;
  transition: background-color 160ms ease, transform 120ms ease;
}

.primary-button:active { transform: translateY(1px); }

.primary-button:disabled {
  background: var(--absent);
  border-color: var(--absent);
  color: var(--on-absent);
  cursor: progress;
}

/* ---- חלון ההגדרות ---- */
.settings-block { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.settings-block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.settings-block[hidden] { display: none; }
.settings-block h3 { margin: 0 0 10px; font-size: 0.95rem; }
.settings-block .field { margin-bottom: 10px; }
.settings-block .action-button { width: 100%; margin-top: 4px; }
.settings-block .field-hint { margin: -4px 0 10px; }

.settings-note {
  min-height: 1.2em;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: start;
}

.settings-note.is-error { color: #d1544f; }

/* כותרת הכרטיס: שורת-על קטנה, כותרת גדולה, ומשפט הסבר */
.card-eyebrow {
  margin: -4px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
}

.card-heading {
  margin: 0 0 4px;
  font-size: 1.6rem;
  line-height: 1.15;
  text-align: center;
}

.card-subtitle {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* כפתורי הספקים — נערמים, ולכן הוספת ספק נוסף לא משנה את הפריסה.
   הבלוק עצמו flex, אחרת כפתור <button> לא נמתח לרוחב כמו קישורי <a>. */
#provider-block { display: flex; flex-direction: column; gap: 8px; }
.providers { display: flex; flex-direction: column; gap: 8px; }

.provider-button {
  /* A <button> does not inherit the page font; the <a> siblings do. Without
     this the passkey button renders in the browser's own font, a size off. */
  font: inherit;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.provider-button:hover { background: var(--surface); border-color: var(--accent); }
.provider-button:active { transform: translateY(1px); }
.brand-icon { flex: none; }
#provider-block[hidden] { display: none; }

/* מפריד "או" בין הספקים לטופס הסיסמה */
.or-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.or-line::before,
.or-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .auth { animation: none; }
  .tab, .reveal-button, .primary-button, .provider-button { transition: none; }
  .reveal-button:active, .primary-button:active, .provider-button:active { transform: none; }
}

.form-error { min-height: 1.2em; margin: 10px 0 0; color: #d1544f; font-size: 0.9rem; }
/* אותו מקום, אבל לא בצבע של תקלה — הודעה שאינה כישלון */
.form-error.is-note { color: var(--text-muted); }
.hint { color: var(--text-muted); font-size: 0.8rem; text-align: center; }

/* ---- מסך המשחק ---- */
#game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2vh, 16px);
  width: 100%;
}

/* חייב לגבור על display:flex, אחרת מסך המשחק מציץ מאחורי מסך הכניסה */
#game-screen[hidden] { display: none; }

.status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  width: min(560px, 100%);
  padding: 0 12px;
}

/* גופן רחב או ריווח מוגדל: הצ'יפים נשברים לשתי שורות במקום לגלוש הצידה */
:root[data-font="on"] .status-chip,
:root[data-spacing="on"] .status-chip { flex: 1 1 40%; }

/* כל צ'יפ: הערך למעלה, הסבר קטן מתחתיו, הכול ממורכז */
.status-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
}

.status-value {
  font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.status-label {
  font-size: clamp(0.58rem, 2.4vw, 0.7rem);
  color: var(--text-muted);
  white-space: nowrap;
}

.icon { display: block; flex: 0 0 auto; }

.board { display: grid; gap: 8px; }
.board-row { display: grid; grid-template-columns: repeat(5, var(--tile-size)); gap: 8px; }

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile-size);
  height: var(--tile-size);
  /* אותו מראה אות כמו במקלדת — משקל 600, לא כבד */
  font-size: calc(var(--tile-size) * 0.52);
  font-weight: 600;
  line-height: 1;
  background: var(--surface-raised);
  border: 2px solid var(--border);
  border-radius: calc(var(--tile-size) * 0.18);
  transition: border-color 140ms ease, transform 140ms ease,
              background-color 340ms ease, color 340ms ease;
}

/* משבצת ריקה שקטה יותר, כדי שהאותיות שכן נכתבו יבלטו */
.tile:not(.is-filled):not(.is-typed) { border-color: var(--border); opacity: 0.72; }

/* האות שנכתבה עכשיו */
.tile.is-typed {
  border-color: var(--accent);
  border-width: 2.5px;
  transform: translateY(-1px);
}

/* המשבצת הבאה בתור — סימון עדין של "כאן תיכתב האות הבאה" */
.tile.is-caret {
  border-color: var(--accent);
  border-style: dashed;
  opacity: 1;
}

.tile.is-filled {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.tile.correct { background: var(--correct); color: var(--on-correct); }
.tile.present { background: var(--present); color: var(--on-present); }
.tile.absent { background: var(--absent); color: var(--on-absent); }

/* סימני צורה: אפשר לקרוא את התוצאה בלי להבחין בין הצבעים */
:root[data-marks="on"] .tile.is-filled,
:root[data-marks="on"] .key.correct,
:root[data-marks="on"] .key.present,
:root[data-marks="on"] .key.absent { position: relative; }

:root[data-marks="on"] .tile.is-filled::after,
:root[data-marks="on"] .key.correct::after,
:root[data-marks="on"] .key.present::after,
:root[data-marks="on"] .key.absent::after {
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
}

:root[data-marks="on"] .tile.correct::after,
:root[data-marks="on"] .key.correct::after { content: "✓"; }

:root[data-marks="on"] .tile.present::after,
:root[data-marks="on"] .key.present::after { content: "○"; }

:root[data-marks="on"] .tile.absent::after,
:root[data-marks="on"] .key.absent::after { content: "×"; }

/* קפיצה קצרה על האות שנכתבה עכשיו; היפוך רק על השורה שנשלחה */
.tile.is-popping { animation: pop 130ms ease-out; }
.tile.is-revealing { animation: flip 420ms ease both; }

@keyframes pop {
  0% { transform: scale(0.88); }
  60% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-popping,
  .tile.is-revealing { animation: none; }
}

.answer-note { margin: 0; padding: 0 12px; font-size: 1rem; font-weight: 600; text-align: center; }

/* ---- מקלדת ---- */
.keyboard {
  display: grid;
  gap: 8px;
  width: min(460px, 100%);
  padding: 0 14px 6px;
}

.keyboard-row { display: flex; justify-content: center; gap: 8px; }

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 58px;
  min-height: 46px;
  padding: 6px 2px;
  background: var(--surface-key);
  border-radius: 10px;
  font-size: clamp(1rem, 4.4vw, 1.15rem);
  font-weight: 600;
  text-align: center;
}

.key-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1.3 1 0;
  max-width: 68px;
}

.key.correct { background: var(--correct); border-color: var(--correct); color: var(--on-correct); }
.key.present { background: var(--present); border-color: var(--present); color: var(--on-present); }
.key.absent { background: var(--absent); border-color: var(--absent); color: var(--on-absent); }

/* ---- הודעות וחלונות ---- */
.toast {
  position: fixed;
  top: 28%;
  max-width: 88vw;
  padding: 10px 18px;
  background: var(--text);
  color: var(--surface);
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50; /* אחרת הכותרת מכסה את כפתור הסגירה של תפריט הצד */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.55);
}

.modal[hidden] { display: none; }

.modal-card {
  width: min(460px, 100%);
  max-height: 88svh;
  overflow-y: auto;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.modal-card h2 { margin: 0; font-size: 1.1rem; }
.modal-card h3 { margin: 18px 0 8px; font-size: 0.9rem; color: var(--text-muted); }

.close-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
}

.stat-cell {
  padding: 8px 4px;
  text-align: center;
  background: var(--surface);
  border-radius: 8px;
}
.stat-cell strong { display: block; font-size: clamp(1.1rem, 5vw, 1.5rem); }
.stat-cell span { font-size: 0.72rem; color: var(--text-muted); }

.distribution { display: grid; gap: 6px; }
.distribution-row { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 8px; }

.distribution-bar {
  padding: 3px 8px;
  background: var(--accent);
  border-radius: 4px;
  color: var(--on-accent);
  font-size: 0.8rem;
  text-align: start;
}

.distribution-bar.is-empty { background: var(--absent); }

.leaderboard { display: grid; gap: 4px; }

.leaderboard-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px 38px 46px 52px;
  gap: 4px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.72rem, 3vw, 0.85rem);
}

.leaderboard-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-head { color: var(--text-muted); font-size: 0.7rem; }
.leaderboard-row.is-top { font-weight: 600; }
.leaderboard-row.is-me { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 6px; }

/* ---- כותרת תחתונה ועמוד המידע המשפטי ---- */
/* הפוטר תמיד צמוד לתחתית המסך, עם רווח קטן מהקצה — בכל גודל מסך */
.site-footer {
  margin-top: auto;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
}

.site-footer p { margin: 0; }
.footer-credit { margin-top: 2px; opacity: 0.9; }

.modal-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---- חלון אפשרויות הנגישות ---- */
.options { display: grid; gap: 12px; }

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
}

.option-toggle { cursor: pointer; }
.option-toggle:hover,
.option-reset:hover,
.option-choice:hover { border-color: var(--accent); }
.option-reset:active,
.option-choice:active { transform: scale(0.98); }

.option-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}

.option-choices { display: flex; gap: 6px; }

.option-choice {
  padding: 8px 10px;
  min-height: 40px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.option-choice.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.option-reset {
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.legal a,
.hint a { color: var(--accent); }

/* קישורי הפוטר באותו צבע רך של שורת הקרדיט; מצב "הדגשת קישורים"
   בתפריט הנגישות עדיין מדגיש אותם כרגיל */
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--accent); }

.legal {
  width: min(760px, 100%);
  padding: 0 18px 40px;
  line-height: 1.7;
}

.legal h2 {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 1.25rem;
}

.legal h3 { margin-top: 22px; font-size: 1rem; }
.legal ul { padding-inline-start: 20px; }
.legal li { margin-bottom: 8px; }
.legal code { padding: 1px 5px; background: var(--surface-key); border-radius: 4px; font-size: 0.9em; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 0; font-weight: 600; }

.legal-note {
  padding: 10px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
}

.header-button { display: inline-flex; align-items: center; text-decoration: none; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}

.icon-button:hover { border-color: var(--accent); }

/* קישור דילוג: מוסתר עד שמגיעים אליו במקלדת (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 60;
  padding: 10px 16px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 160ms ease;
}

.skip-link:focus { top: 0; }

.shortcuts {
  margin: 8px 0 0;
  padding-inline-start: 18px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.9;
}

.shortcuts kbd {
  padding: 1px 6px;
  color: var(--text);
  background: var(--surface-key);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.85em;
}

/* ---- תפריט צד ---- */
.modal.drawer {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.modal.drawer .modal-card {
  width: min(330px, 86vw);
  max-height: 100svh;
  height: 100svh;
  border-radius: 0;
  border-block: none;
  border-inline-start: none;
}

/* האנימציה רצה רק ברגע הפתיחה, לא בכל שינוי הגדרה בזמן שהתפריט פתוח */
.modal.drawer.is-opening .modal-card { animation: drawer-in 240ms ease; }

@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

/* מסכים רחבים יותר מקבלים גופנים גדולים יותר, ולכן צריכים עוד מקום */
@media (min-width: 380px) {
  .board,
  .tile { --tile-size: min(62px, calc((100vw - 88px) / 5), calc((100svh - 536px) / 6)); }
}

/* ---- מסכים צרים ---- */
@media (max-width: 380px) {
  .top-bar { padding: 8px 10px; }
  .action-bar { gap: 6px; padding: 0 10px; }
  .action-button { min-height: 44px; }
  .keyboard { gap: 7px; padding: 0 10px 12px; }
  .keyboard-row { gap: 7px; }
  .key { min-height: 44px; }
}

/* ---- טאבלט ומחשב: הכול גדל, כי יש גם רוחב וגם גובה ---- */
@media (min-width: 700px) and (min-height: 700px) {
  .board,
  .tile { --tile-size: min(70px, calc((100vw - 88px) / 5), calc((100svh - 580px) / 6)); }

  .top-bar,
  .action-bar,
  .status-bar { width: min(660px, 100%); }

  .top-bar { padding: 14px 18px; }
  .title { font-size: 1.55rem; gap: 10px; }
  .mode-switch { --switch-width: 74px; --switch-height: 36px; --knob-size: 30px; }

  .action-button { min-height: 48px; font-size: 0.98rem; border-radius: 14px; }
  .status-chip { padding: 7px 6px; border-radius: 14px; }
  .status-value { font-size: 1.05rem; }
  .status-label { font-size: 0.78rem; }

  .board,
  .board-row { gap: 10px; }

  .keyboard { width: min(640px, 100%); gap: 10px; padding: 0 16px 18px; }
  .keyboard-row { gap: 10px; }
  .key { max-width: 84px; min-height: 46px; font-size: 1.15rem; border-radius: 12px; }
  .key-action { max-width: 96px; }
  .answer-note { font-size: 1.15rem; }
  .modal-card { padding: 22px; }
}

/* מסך גבוה במיוחד: אפשר להרשות לוח ומקלדת גדולים יותר */
@media (min-width: 700px) and (min-height: 880px) {
  .board,
  .tile { --tile-size: min(80px, calc((100vw - 88px) / 5), calc((100svh - 634px) / 6)); }

  .action-button { min-height: 54px; font-size: 1rem; }
  .status-chip { padding: 9px 6px; }
  .key { min-height: 56px; font-size: 1.35rem; }
}

/* ---- טלפון: מסך צר, גם כשהוא גבוה ----
   הכללים לפי גובה שמתחת נכתבו לטלפונים נמוכים, אבל טלפון מודרני הוא צר וארוך
   (390x844), ולכן לא נתפס בהם כלל — ומקבל את הריווח של מסך גדול. התוצאה: רבע
   מהמסך הלך על סרגלים, והלוח עצמו קיבל שליש. כאן מצמצמים לפי רוחב. */
@media (max-width: 480px) {
  .top-bar { padding: 7px 12px calc(7px + env(safe-area-inset-top)) 12px; }
  .title { font-size: clamp(0.95rem, 4vw, 1.2rem); }

  .action-bar { gap: 6px; padding: 0 10px; }
  .action-button { min-height: 40px; padding: 6px 4px; font-size: 0.82rem; }

  /* ארבעה צ'יפים בשורה אחת נותנים 89px לכל אחד ב-390px מסך, ו"05:49:29" עם
     "למילה הבאה" לא נכנסים שם — הקופסה נשארת במקום והטקסט שבתוכה נחתך. שניים
     בשורה: כל צ'יפ מקבל פי שניים רוחב, וזה נכון בכל דפדפן ובכל גופן. */
  .status-bar { gap: 6px; padding: 0 10px; }
  .status-chip { padding: 4px 8px; }
  .status-value { font-size: 0.9rem; line-height: 1.3; }
  .status-label { font-size: 0.66rem; line-height: 1.2; }

  /* הסדר בטלפון: מילת היום, ניחושים שנותרו, ואז למילה הבאה ורצף חולקים שורה.
     שני הראשונים הם מה שמסתכלים עליו, ולכן הם מקבלים שורה שלמה. הסדר ב-HTML
     שונה (מילת היום, רצף, ניחושים, שעון) ולכן משתמשים ב-order. */
  .status-chip:nth-child(1) { flex: 1 1 100%; order: 1; }
  .status-chip:nth-child(3) { flex: 1 1 100%; order: 2; }
  .status-chip:nth-child(4) { flex: 1 1 calc(50% - 6px); order: 3; }
  .status-chip:nth-child(2) { flex: 1 1 calc(50% - 6px); order: 4; }

  .site-footer { padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .footer-links, .footer-credit { font-size: 0.72rem; line-height: 1.5; }

  /* שתי שורות צ'יפים גבוהות יותר משורה אחת, והרווח של 16px בין שישה אזורים
     אוכל עוד ~80px. מצמצמים את שניהם, אחרת הדף מתחיל לגלול. */
  body { gap: 8px; }

  /* המשבצות הן המשחק, ולכן הן מקבלות את כל מה שאפשר לפנות. */
  .board,
  .board-row { gap: 6px; }
  .keyboard,
  .keyboard-row { gap: 5px; }

  /* הפוטר עולה 47px בכל מסך משחק — כשישית מגובה הלוח. בזמן משחק הוא מוסתר
     בטלפון בלבד; הקישורים המשפטיים נשארים במסך הכניסה, ו"הצהרת הנגישות
     המלאה" זמינה תמיד מכפתור הנגישות שבסרגל העליון. */
  #game-screen:not([hidden]) ~ .site-footer { display: none; }

  .board,
  .tile { --tile-size: min(72px, calc((100vw - 60px) / 5), calc((100svh - 528px) / 6)); }

  /* auto-fit היה פורש ארבעה תאים בשורה ומשאיר את החמישי לבד עם חור לצידו.
     שתיים בשורה, והאחרון נמתח על כל הרוחב במקום להיראות כמו טעות. */
  .stats-summary { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .modal-card { padding: 16px; }
}

/* ---- טלפון קטן: אין מקום לשתי שורות צ'יפים ----
   חייב לבוא אחרי הבלוק של 480px, אחרת הכלל של שניים-בשורה גובר עליו.
   כל שורה שנחסכת כאן היא שורת משבצות שהלוח מקבל, והגופנים נמדדו כדי
   ש"02.08.2026" ו"ניחושים נותרו" ייכנסו ברוחב הצר ולא ייחתכו. */
@media (max-width: 380px) {
  .status-bar { gap: 4px; padding: 0 8px; }
  .status-chip { flex: 1 1 0; padding: 3px 3px; }
  .status-value { font-size: 0.72rem; line-height: 1.25; }
  .status-label { font-size: 0.54rem; line-height: 1.15; }
}

/* ---- טלפון עם מסך נמוך: מכווצים את מה שמסביב כדי להשאיר לוח גדול ---- */
@media (max-height: 720px) {
  .board,
  .tile { --tile-size: min(62px, calc((100vw - 88px) / 5), calc((100svh - 476px) / 6)); }

  .top-bar { padding: 6px 12px calc(6px + env(safe-area-inset-top)) 12px; }
  .action-button { min-height: 40px; }

  .status-chip { flex-direction: row; gap: 5px; padding: 3px 9px; }
  .status-label { font-size: 0.65rem; }
  .status-value { font-size: 0.8rem; }

  /* 44px הוא גודל מטרה מינימלי לאצבע — לא יורדים מתחתיו */
  .key { min-height: 44px; }
  .keyboard { gap: 6px; }
  .keyboard-row { gap: 6px; }
}

/* ---- מסך נמוך (טלפון בלנדסקייפ) ---- */
@media (max-height: 620px) {
  .board, .tile { --tile-size: min(44px, calc((100vw - 72px) / 5)); }
  .key { padding: 8px 2px; }
  .keyboard { padding-bottom: 8px; }
  body { gap: 6px; }
}