/* ==========================================================
   écris.hu — francia szótanulás
   Vizuális alap: francia iskolai vonalas füzet (cahier Seyès)
   ========================================================== */

:root{
  --paper:        #FCFBF8;
  --paper-deep:   #F2F0EA;
  --ink:          #16255C;
  --ink-soft:     #5A6288;
  --ink-faint:    #9AA0BC;
  --rule:         #CFCBEC;
  --rule-faint:   #E9E7F7;
  --margin:       #E0526E;
  --ok:           #1F7A55;
  --ok-bg:        #E9F5EF;
  --near:         #9A6B12;
  --near-bg:      #FAF2DF;
  --no:           #C0364F;
  --no-bg:        #FBECEF;

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #FFFFFF 0%, var(--paper-deep) 100%);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- keret ---------- */

.sheet{
  max-width:820px;
  margin:0 auto;
  min-height:100%;
  padding:24px 20px 40px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.topbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}

.brand{
  font-family:var(--display);
  font-size:30px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
}
.brand-mark{ color:var(--margin); }

.meter{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- a lap ---------- */

.card{
  position:relative;
  flex:1;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to bottom, var(--rule-faint) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--rule)       0 1px, transparent 1px 32px);
  background-position:0 40px, 0 40px;
  border:1px solid #E4E1D8;
  border-radius:var(--r);
  box-shadow:0 1px 0 #FFF inset, 0 14px 40px -28px rgba(22,37,92,.5);
  overflow:hidden;
}

.card-margin{
  position:absolute;
  top:0; bottom:0; left:44px;
  width:1px;
  background:var(--margin);
  opacity:.5;
}

.card-body{
  position:relative;
  padding:36px 34px 40px 68px;
  animation:rise .34s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* ---------- tipográfia ---------- */

.eyebrow{
  margin:0 0 22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--margin);
}

.stage-title{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(30px,5vw,42px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
}

.lede{
  margin:0 0 28px;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:15px;
}

.task-label{
  margin:0 0 6px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.hu-word{
  margin:0 0 30px;
  font-family:var(--display);
  font-size:clamp(38px,7vw,58px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.015em;
}

.hint{
  margin:0 0 32px;
  font-family:var(--mono);
  font-size:clamp(19px,3.4vw,24px);
  letter-spacing:.08em;
  color:var(--ink-soft);
  word-break:break-word;
}

.note{
  margin:16px 0 0;
  font-size:13px;
  color:var(--ink-faint);
  min-height:1.4em;
}

/* ---------- táblák (képgombok) ---------- */

.plates{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:32px;
}

.plate{
  position:relative;
  min-width:104px;
  padding:16px 20px 14px;
  background:#FFF;
  border:1px solid var(--rule);
  border-radius:var(--r);
  cursor:pointer;
  text-align:left;
  font-family:var(--mono);
  color:var(--ink);
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.plate:hover:not(:disabled){
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:0 8px 20px -14px rgba(22,37,92,.7);
}
.plate .plate-kicker{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.plate .plate-no{
  display:block;
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
}
.plate:disabled{
  cursor:default;
  color:var(--ink-faint);
  border-style:dashed;
  border-color:var(--rule);
  background:transparent;
}
.plate:disabled .plate-no{ text-decoration:line-through; text-decoration-color:var(--margin); }
.plate:disabled::after{
  content:"lezárva";
  position:absolute;
  right:10px; bottom:8px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--margin);
}
.plate.is-sealing{ animation:seal .38s ease both; }
@keyframes seal{
  40%{ transform:scale(.965); }
  100%{ transform:none; }
}

/* ---------- beviteli mező ---------- */

.answer{
  display:block;
  width:100%;
  max-width:520px;
  margin:0 0 30px;
  padding:6px 2px 10px;
  background:transparent;
  border:0;
  border-bottom:2px solid var(--rule);
  border-radius:0;
  font-family:var(--display);
  font-size:clamp(26px,4.4vw,34px);
  font-weight:600;
  color:var(--ink);
  outline:none;
  transition:border-color .16s;
}
.answer::placeholder{
  color:var(--ink-faint);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
}
.answer:focus{ border-bottom-color:var(--margin); }
.answer:disabled{ color:var(--ink-soft); }

/* ---------- gombok ---------- */

.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.btn{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  padding:13px 24px;
  border-radius:var(--r);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, opacity .16s;
}
.btn:disabled{ opacity:.38; cursor:not-allowed; }

.btn-primary{ background:var(--ink); color:#FFF; }
.btn-primary:hover:not(:disabled){ background:#0E1943; }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#FFF; }

.btn-close{ background:var(--margin); color:#FFF; }
.btn-close:hover{ background:#C33F58; }

:focus-visible{ outline:2px solid var(--margin); outline-offset:3px; }

/* ---------- értékelés ---------- */

.verdict{
  margin-top:28px;
  padding:16px 18px;
  border-left:3px solid var(--ink);
  border-radius:0 var(--r) var(--r) 0;
  font-size:15px;
  animation:rise .22s ease both;
}
.verdict strong{ display:block; font-size:16px; margin-bottom:2px; }
.verdict .solution{
  font-family:var(--display);
  font-size:26px;
  font-weight:600;
  display:block;
  margin-top:8px;
}
.verdict.is-ok  { background:var(--ok-bg);   border-left-color:var(--ok);   color:var(--ok); }
.verdict.is-near{ background:var(--near-bg); border-left-color:var(--near); color:var(--near); }
.verdict.is-no  { background:var(--no-bg);   border-left-color:var(--no);   color:var(--no); }

/* ---------- lábléc ---------- */

.foot{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
}

/* ---------- teljes képernyős tábla ---------- */

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  background:#E8E6DF;   /* világos háttér: az átlátszó hátterű PNG-k is olvashatók maradnak */
  display:flex;
  flex-direction:column;
  animation:fade .16s ease both;
}
/* A [hidden] attribútum önmagában nem győzné le a display:flex szabályt. */
.modal[hidden]{ display:none; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }

.modal-stage{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

/* A kép majdnem a teljes képernyőt kitölti, arányhelyesen, élesen. */
.plate-img{
  width:96vw;
  height:calc(100vh - 84px);
  object-fit:contain;
  image-rendering:auto;
  image-rendering:high-quality;
}

.modal-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--ink);
}
.modal-id{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9AA3CF;
}
.modal-bar .btn-close{ background:var(--margin); color:#FFF; }

/* ---------- mobil ---------- */

@media (max-width:640px){
  .sheet{ padding:16px 12px 28px; }
  .card-margin{ left:26px; }
  .card-body{ padding:26px 20px 30px 42px; }
  .plate{ min-width:88px; padding:12px 16px 12px; }
  .actions .btn{ flex:1 1 auto; text-align:center; }
  .plate-img{ height:calc(100vh - 76px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}