/* ===== EasyWord – Verbs Practice (Balanced + Glass background) ===== */
:root{
  --text:#3f2b21; --muted:#7b6a5f;
  --paper:#fff7f2cc;              /* paper שקוף מעט */
  --white:#ffffff;                /* שימוש פנימי לגרדיאנטים */
  --peach:#f8b487; --peach-600:#f39a62;
  --good:#1f9d55; --bad:#dc2626;
  --stroke:#f3e2d8cc;             /* קו דק שקוף */
  --ring:rgba(248,180,135,.28);

  /* שכבות זכוכית */
  --glass: rgba(255,255,255,.84);
  --glass-strong: rgba(255,255,255,.92);
  --glass-soft: rgba(255,255,255,.76);
  --glass-alt: rgba(255,249,244,.78);
}

/* ===== Background from PHP ===== */
.vp-page{ position:relative; }
.vp-page::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--vp-bg, none) center top / cover no-repeat fixed;
}
@media (max-width:1023px){
  .vp-page::before{ background-attachment:scroll; background-position:center top; }
}

/* ===== Layout ===== */
.vp-wrap{ max-width: 900px; margin: 8px auto 24px; padding: 0 12px }

/* ===== Glass helpers ===== */
.glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  backdrop-filter: saturate(120%) blur(4px);
}

/* ===== Header bubble ===== */
.vp-header-bubble{
  max-width: 820px; margin: 6px auto 10px; padding: 14px 16px;
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-align:center; direction:ltr;
  backdrop-filter: saturate(120%) blur(3.5px);
}
.vp-title{ margin:0 0 6px; font-size:34px; line-height:1.18; color:var(--text); font-family:"Playfair Display",serif }
.vp-sub{ margin:0; color:var(--muted); font-size:14px }

/* ===== Top bar ===== */
.vp-bar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 8px 10px; margin: 0 0 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
  direction:ltr;
  backdrop-filter: saturate(120%) blur(4px);
}
.tense-box{ display:flex; gap:6px; flex-wrap:wrap }
.tense-pill{
  border:1px solid var(--stroke);
  background: var(--glass-strong);
  padding:6px 10px; border-radius:999px;
  cursor:pointer; font-weight:700; font-size:13px;
  backdrop-filter: saturate(120%) blur(3px);
}
.tense-pill.active, .tense-pill:hover{ background: var(--paper); border-color: var(--peach) }
.vp-fixed-buttons{ display:flex; gap:6px }
.vp-utility-btn{
  border:1px solid var(--stroke); background: var(--glass-strong);
  padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:700; font-size:13px;
  backdrop-filter: saturate(120%) blur(3px);
}
.vp-utility-btn.hint{
  background: linear-gradient(180deg, var(--peach), var(--peach-600));
  color:#fff; border-color:transparent; backdrop-filter:none;
}

/* ===== Cards (glass) ===== */
.vp-card{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:12px; margin:10px 0; direction:ltr;
  backdrop-filter: saturate(120%) blur(4px);
}

/* Question */
.q-head{ display:grid; gap:4px; align-items:center; justify-items:center; text-align:center }
.q-title{ font-size: clamp(22px, 2.6vw, 28px); font-weight:800; color:var(--text) }
.verb-badge{
  display:inline-block; font-size:12px; color:#444;
  background: var(--glass-strong); border:1px dashed var(--stroke);
  border-radius:999px; padding:5px 8px; width:max-content; backdrop-filter: blur(3px)
}
.q-sub{ color:var(--muted); font-size:13px }

/* Answers */
.answers{ display:grid; gap:8px; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top:8px }
.answer{
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background: var(--glass-strong);
  cursor:pointer; font-weight:800;
  font-size: clamp(18px, 2.6vw, 22px);
  text-align:center; box-shadow:0 3px 9px rgba(0,0,0,.06);
  transition:transform .05s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: saturate(120%) blur(3px);
}
.answer:hover{ background: var(--paper) }
.answer:active{ transform:translateY(1px) }
.answer.selected.ok{ border-color: rgba(31,157,85,.6); background:#ecfdf5 }
.answer.selected.bad{ border-color: rgba(220,38,38,.6); background:#fef2f2 }

/* Actions */
.actions{ display:flex; gap:6px; justify-content:center; margin-top:6px }
.btn{
  border:none; cursor:pointer; border-radius:9px; padding:7px 12px;
  font-weight:700; font-size:13px;
  background: var(--glass-strong);
  box-shadow:0 0 0 1px var(--stroke) inset;
  backdrop-filter: saturate(120%) blur(3px);
}
.btn.primary{
  background:linear-gradient(180deg, var(--peach), var(--peach-600));
  color:#fff; box-shadow:none; backdrop-filter:none;
}
.btn.large{ padding:9px 14px }

/* Status */
.status{ min-height:16px; text-align:center; color:var(--muted); margin-top:4px; font-size:12px }

/* ===== Cheat-sheet (glass) ===== */
.sheet-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.sheet-title{ font-weight:800; color:var(--text); font-size:15px }
.sheet-badge{
  background: var(--glass-strong); border:1px dashed var(--stroke);
  border-radius:999px; padding:5px 8px; color:#444; font-size:12px; backdrop-filter: blur(3px)
}
.sheet-note{ text-align:center; color:var(--muted); margin:6px auto 0; font-size:12px }

#sheetTable{
  width:100%; border-collapse:separate; border-spacing:0; direction:ltr; text-align:left;
  font-size:13.5px;
}
#sheetTable thead th{
  text-align:left; background: var(--glass-alt); border:1px solid var(--stroke);
  padding:7px 9px; font-weight:800; backdrop-filter: blur(3px);
  border-top-left-radius:10px; border-top-right-radius:10px;
}
#sheetTable tbody td{
  border:1px solid var(--stroke); padding:7px 9px; background: var(--glass-strong);
  backdrop-filter: blur(3px);
}
#sheetTable tbody tr:nth-child(even) td{ background: var(--glass) }

/* ===== Modals (glass) ===== */
.vp-modal{ position:fixed; inset:0; display:none; z-index:9999 }
.vp-modal.show{ display:block }
.vp-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.28); backdrop-filter: blur(2px) }
.vp-modal-dialog{
  position:relative; margin:6vh auto 0;
  max-width:min(580px, 92vw);
  background: var(--glass-strong);
  border-radius:12px; padding:12px;
  border:1px solid var(--stroke);
  box-shadow:0 22px 60px rgba(0,0,0,.24);
  backdrop-filter: saturate(120%) blur(6px);
}
.vp-modal-title{ margin:0 0 6px; color:var(--text); text-align:left; font-size:18px }
.vp-modal-close{
  position:absolute; top:8px; right:8px;
  border:1px solid var(--stroke); background: var(--glass);
  border-radius:8px; padding:5px 7px; cursor:pointer; font-size:12px;
  backdrop-filter: blur(2px);
}
.vp-modal-body{ display:grid; gap:6px; direction:ltr }
.vp-line{ padding:9px 10px; border-radius:8px; background: var(--glass); font-size:15px; backdrop-filter: blur(2px) }
.vp-badge.ok{
  display:none; background:#ecfdf5; color:#166534; border:1px solid #bbf7d0;
  border-radius:999px; padding:4px 6px; width:max-content; margin-bottom:6px; font-size:12px
}
.vp-modal-actions{ display:flex; justify-content:space-between; gap:6px; margin-top:6px }

/* Voice chooser */
.vp-voice-dialog{ max-width:min(430px, 92vw) }
.vp-voice-list{ display:grid; gap:6px }
.vp-voice-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--stroke); border-radius:9px; padding:7px 9px;
  background: var(--glass); backdrop-filter: blur(3px)
}
.vp-voice-row .meta .name{ font-weight:800; font-size:13px }
.vp-voice-row .meta .lang{ color:var(--muted); font-size:11px }
.vp-voice-row .mini{
  border:1px solid var(--stroke); background: var(--glass-strong);
  border-radius:8px; padding:5px 8px; cursor:pointer; font-weight:700; font-size:12px;
  backdrop-filter: blur(2px)
}
.vp-voice-row .mini.primary{ background:linear-gradient(180deg, var(--peach), var(--peach-600)); color:#fff; border-color:transparent; backdrop-filter:none }

/* Focus ring */
.tense-pill:focus, .vp-utility-btn:focus, .answer:focus, .btn:focus, .vp-modal-close:focus, .vp-voice-row .mini:focus{
  outline:none; box-shadow:0 0 0 3px var(--ring);
}

/* Mobile */
@media (max-width:780px){
  .vp-title{ font-size:28px }
  .answers{ grid-template-columns: 1fr }
  .answer{ font-size:18px; padding:11px }
}