:root{
  --bg:#070A12;
  --panel: rgba(255,255,255,.05);   /* ez legyen itt, ne később */
  --border: rgba(255,255,255,.14);  /* ez legyen itt, ne később */
  --text:#EEF3FF;
  --muted:#B7C2E6;                  /* ez legyen itt, ne később */

  --c1a:#14B8FF; --c1b:#2B6CFF;
  --c2a:#28D7A5; --c2b:#58F0C7;
  --c3a:#8B5CF6; --c3b:#EC4899;
  --c4a:#FB7185; --c4b:#F59E0B;

  --good:#34D399;
  --bad:#FB7185;

  /* Mode accent alap */
  --accent: rgba(20,184,255,.95);
  --accentSoft: rgba(20,184,255,.18);
  --accentBorder: rgba(20,184,255,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  background: radial-gradient(900px 600px at 20% 10%, rgba(20,184,255,.18), transparent 60%),
              radial-gradient(900px 700px at 85% 30%, rgba(139,92,246,.16), transparent 55%),
              radial-gradient(1100px 800px at 30% 95%, rgba(52,211,153,.10), transparent 60%),
              var(--bg);
  color:var(--text);
}

.bgGlow{
  position:fixed; inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(20,184,255,.08), rgba(139,92,246,.08), rgba(34,197,94,.05));
  mix-blend-mode: screen;
  opacity:.55;
}

.app{max-width:1100px;margin:0 auto;padding:22px}

.glass{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  backdrop-filter: blur(12px);
}

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

.brand{display:flex;gap:12px;align-items:center}
.spark{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
}
.brandTitle{font-weight:850;font-size:18px;letter-spacing:.2px}
.brandSub{color:var(--muted);font-size:13px;margin-top:2px}

.topControls{display:flex;gap:12px;align-items:end;flex-wrap:wrap}

.panel{margin-top:16px;padding:18px}
.h1{margin:8px 0 14px;font-size:28px}
.h2{margin:10px 0 10px;font-size:18px}
.h3{margin:0 0 8px;font-size:16px}

.field{display:flex;flex-direction:column;gap:6px;min-width:220px}
.fieldLabel{font-size:12px;color:var(--muted)}
.select, .input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.08);
  color:var(--text);
  outline:none;
}

/* ===== Select legördülő javítás ===== */

/* maga a select */
select{
  color: var(--text);
  background-color: #1b2336;   /* fix sötét háttér */
}

/* opciók */
select option{
  background-color: #1b2336;    /* sötét lista háttér */
  color: #eef3ff;              /* világos betű */
}

/* Windows / Chrome kompatibilitás */
select:focus{
  background-color: #1b2336;
}

.modeGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 860px){ .modeGrid{grid-template-columns: 1fr} }

.modeCard{
  border:1px solid transparent;
  border-radius:16px;
  padding:16px;
  text-align:left;
  cursor:pointer;
  color:var(--text);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .2s ease;
}
.modeCard:hover{transform: translateY(-1px); filter: brightness(1.05)}
.modeCard:disabled{opacity:.5; cursor:not-allowed; filter:none; transform:none}

.c1{background: linear-gradient(90deg, rgba(20,184,255,.90), rgba(43,108,255,.90))}
.c2{background: linear-gradient(90deg, rgba(40,215,165,.90), rgba(88,240,199,.90))}
.c3{background: linear-gradient(90deg, rgba(139,92,246,.92), rgba(236,72,153,.88))}
.c4{background: linear-gradient(90deg, rgba(251,113,133,.92), rgba(245,158,11,.88))}

.modeTitle{font-weight:850;font-size:18px;margin-bottom:4px}
.modeDesc{opacity:.92; font-size:13px; line-height:1.35}

.settings{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.settingsTitle{font-weight:800;margin-bottom:10px}
.settingsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:end;
}
@media (max-width: 860px){ .settingsGrid{grid-template-columns: 1fr} }

.rangeRow{display:flex;gap:10px;align-items:center}
.range{width:100%}
.checkRow{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
.checkRow input{transform: scale(1.05)}

.settingsActions{margin-top:12px;display:flex;justify-content:flex-end}

.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.btn.primary{
  border-color: rgba(20,184,255,.55);
  background: rgba(20,184,255,.18);
}
.btn.ghost{background: transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

.pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.15);
  color: var(--muted);
  font-size:13px;
}

.gameTop{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.crumbs{display:flex;gap:10px;align-items:center}
.stats{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.questionText{margin:0 0 14px;line-height:1.45;color:var(--text)}

.answers{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
@media (max-width: 860px){ .answers{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 520px){ .answers{grid-template-columns: 1fr} }

.answerBtn{
  padding:16px 16px;                 /* nagyobb belső tér */
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color:var(--text);
  cursor:pointer;
  text-align:left;                   /* hosszú szövegnél jobb */
  line-height:1.45;

  white-space: normal;               /* ne legyen egysoros */
  overflow: visible;                 /* ne vágjon le */
  text-overflow: unset;

  min-height:64px;                   /* ne legyen túl lapos */
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}

.answerBtn:hover{background:rgba(255,255,255,.08)}
.answerBtn:active{transform: translateY(1px)}
.answerBtn.selected{border-color: rgba(20,184,255,.60); background: rgba(20,184,255,.12)}
.answerBtn.correct{border-color: rgba(52,211,153,.75); background: rgba(52,211,153,.14)}
.answerBtn.wrong{border-color: rgba(251,113,133,.75); background: rgba(251,113,133,.14)}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.feedback{margin-top:12px;color:var(--muted);min-height:20px}

.results{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.barFill{height:100%;width:0%; background: rgba(52,211,153,.55)}



/* a game panel belseje kapjon több “levegőt” */
.panel{ padding: 20px; }

/* --- Feladat sor (nagyon gyors értelmezés) --- */
.taskRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 6px 0 14px;
}
.taskBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.10);
  font-weight:800;
  font-size:13px;
}
.taskText{
  color: var(--muted);
  font-size:14px;
}

/* --- Kiemelt prompt kártya: ez legyen a fókusz --- */
/* .promptTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:8px;
  color: rgba(238,243,255,.95);
}
.promptIcon{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

.promptText{
  margin:0;
  font-size:18px;         
  line-height:1.5;
  color: rgba(238,243,255,.98);
} */

/* A régi questionText-et hagyhatod, de most már a promptText dolgozik */
.questionText{ color: var(--text); }

/* --- Válasz gombok: picit “világosabb”, barátibb --- */
.answerBtn{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.answerBtn:hover{ background: rgba(255,255,255,.10); }

/* Opcionális: a válaszok blokk kapjon kis távolságot a prompttól */
.answers{ margin-top: 14px; }

/* ===== Mode kiválasztás kiemelése (HOME) ===== */
.modeCard{
  position: relative;
  outline: none;
}

.modeCard.picked{
  transform: translateY(-1px);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
}

/* fénygyűrű + pipajel */
.modeCard.picked::after{
  content:"✓";
  position:absolute;
  top:12px; right:12px;
  width:30px; height:30px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:900;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.95);
}

/* kicsit erősebb keret, hogy egyértelmű legyen a választás */
.modeCard.picked{
  border: 1px solid rgba(255,255,255,.28);
}



/* Pill-ek, gomb fókusz, kijelölés stb. a mód színével */
.pill.accent{
  border-color: var(--accentBorder);
  background: color-mix(in srgb, var(--accentSoft) 70%, rgba(0,0,0,.12));
  color: rgba(238,243,255,.92);
}

/* kiválasztott válasz kerete legyen a mód színe */
.answerBtn.selected{
  border-color: var(--accentBorder);
  background: var(--accentSoft);
}

/* primary gombot is finoman színezzük a módhoz (game-ben főleg) */
.btn.primary{
  border-color: var(--accentBorder);
  background: var(--accentSoft);
}

/* progress bar “jó” része lehet mód-színű (ha ezt szeretnéd) */
.barFill{
  background: var(--accent);
  opacity: .55;
}

/* Prompt kártya tetején egy vékony “accent csík” */
/* ===== Kiemelt meghatározás kártya (fókusz) ===== */
.promptCard{
  border-radius: 18px;
  padding: 22px;

  /* határozott háttér – NEM áttetsző */
  background: #162033;

  /* vastagabb, tiszta keret */
  border: 2px solid var(--accent);

  /* valódi kiemelő árnyék */
  box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    0 0 0 4px rgba(20,184,255,.15);

  margin-bottom: 18px;
}

/* bal oldali fókusz sáv vastagabb */
.promptCard::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:8px;
  background: var(--accent);
  opacity: .95;
}

/* erősebb spotlight a szöveg alá */
.promptCard::after{
  content:"";
  position:absolute;
  inset:-60px;
  background: radial-gradient(650px 280px at 30% 35%, var(--accentSoft), transparent 62%);
  opacity: 1;
  pointer-events:none;
}
.promptCard > *{ position: relative; z-index: 1; }

.promptText{
  margin:0;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(238,243,255,.98);
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}

.promptTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing:.2px;
  margin-bottom:10px;
  color: rgba(238,243,255,.98);
}



.promptText::before{
  content:"“";
  margin-right: 6px;
  opacity: .35;
  font-weight: 900;
  font-size: 22px;
}
.promptText::after{
  content:"”";
  margin-left: 6px;
  opacity: .35;
  font-weight: 900;
  font-size: 22px;
}
/* ===== MATCH mód ===== */
#matchWrap{ margin-top: 14px; }

.matchHint{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.matchText{ color: var(--muted); font-size: 13px; }

.matchGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 860px){
  .matchGrid{ grid-template-columns: 1fr; }
}

.matchColTitle{
  font-weight:900;
  font-size:13px;
  color: rgba(238,243,255,.90);
  margin: 4px 0 8px;
}

.matchCol{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.matchCard{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  cursor:pointer;
  user-select:none;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.matchCard:hover{ background: rgba(255,255,255,.10); }
.matchCard:active{ transform: translateY(1px); }

.matchCard.selected{
  border-color: var(--accentBorder);
  background: var(--accentSoft);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

.matchCard.matched{
  opacity: 1;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  position: relative;
  filter: saturate(.95);
}

/* nagy, jól látható pipa */
.matchCard.matched::after{
  content:"🔗";
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:900;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  color: rgba(238,243,255,.95);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Ha szeretnéd: párosított elem szélén accent csík */
.matchCard.matched::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius:14px 0 0 14px;
  background: var(--accent);
  opacity:.65;
}

.matchCard.correct{
  border-color: rgba(52,211,153,.75);
  background: rgba(52,211,153,.14);
}
.matchCard.wrong{
  border-color: rgba(251,113,133,.75);
  background: rgba(251,113,133,.14);
}

.matchCard{
  position: relative;
  padding-left: 16px;
}

.matchCard::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:14px 0 0 14px;
  background: transparent;
  transition: background .2s ease;
}

.matchCard.hasColor::before{
  background: var(--pairColor);
}

.clozeTerm{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--accent);
}

.clozeDefinition{
  font-size: 17px;
  line-height: 1.55;
}