:root{ --bg1:#0b1030; --bg2:#15103f; --fg:#eaf2ff; --muted:#b9c6ff; --accent1:#7cfeff; --accent2:#ff72e1; --border: rgba(255,255,255,.16); --shadow: 0 20px 50px rgba(0,0,0,.35); }
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.6 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:radial-gradient(1200px 800px at -20% -20%, rgba(124,254,255,.15), transparent 60%), radial-gradient(1200px 800px at 130% 130%, rgba(255,114,225,.15), transparent 60%), linear-gradient(160deg, var(--bg1), var(--bg2));min-height:100%;overflow:auto;}
a{color:var(--accent1);text-decoration:none}
a:hover{text-decoration:underline}
header{width:min(1100px,95%); margin:16px auto 6px; display:flex; align-items:center; gap:12px; justify-content:space-between; position:relative; z-index: 50;}
.brand{font-weight:800; font-size:clamp(18px, 3vw, 26px)}
.topnav{display:flex; gap:10px; flex-wrap:wrap}
.topnav a{padding:8px 10px; border-radius:12px; border:1px solid var(--border);}
.menuBtn{display:none; padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--fg);}
@media (max-width:760px){
  .menuBtn{display:inline-flex}
  .topnav{display:none; flex-direction:column; gap:6px; position:absolute; right:2.5%; top:54px; padding:10px; background:#0b1030e6; border:1px solid var(--border); border-radius:12px; z-index: 9999;}
  .topnav.open{display:flex}
  body.menu-open main, body.menu-open .card, body.menu-open .card *{ pointer-events:none; }
  body.menu-open .topnav, body.menu-open header, body.menu-open .menuBtn{ pointer-events:auto; }
}
main{ width:min(1100px,95%); margin:10px auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.cardWrap{ width:100%; display:grid; place-items:center; }
.card{ width:min(780px, 92vw); height: min(70vh, 540px); border-radius:22px; position:relative; perspective: 1200px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border); box-shadow: var(--shadow); }
.flashInner{ position:absolute; inset:0; border-radius:22px; transform-style:preserve-3d; transition: transform .7s ease; }
.flashInner.flipped{ transform: rotateY(180deg); }
.face{ position:absolute; inset:0; padding:22px; border-radius:22px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:auto; background: linear-gradient(180deg, rgba(9,16,36,.95), rgba(9,16,36,.88)); }
.front .title{ font-size: clamp(20px, 4.2vw, 38px); font-weight:800; }
.back{ transform: rotateY(180deg); }
.back .phraseSmall{ font-size:clamp(11px,2.2vw,14px); opacity:.8; margin-bottom:8px }
.back .meaning{ font-size:clamp(18px,3.8vw,28px); font-weight:700; }
.controlsRow{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px; margin-top:10px; }
.searchBox{ flex:1; position:relative; }
.searchBox input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.2); color:var(--fg); }
.suggest{ position:absolute; left:0; right:0; top:110%; background:#0b1030; border:1px solid var(--border); border-radius:12px; max-height:240px; overflow:auto; z-index:100; display:none; }
.suggest.open{ display:block; }
.suggest div{ padding:8px 10px; cursor:pointer; }
.suggest div:hover{ background:rgba(255,255,255,.06) }
.sideArrows{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:0 6px; z-index: 3; }
.sideArrows button{ pointer-events:auto; border:none; background:rgba(0,0,0,.35); color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.controlsBottom{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.btn{ padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:transparent; color:var(--fg); cursor:pointer; }
.btn.primary{ background:linear-gradient(90deg, var(--accent2), var(--accent1)); color:#06121f; font-weight:800; border:none; }
footer{ width:min(1100px,95%); margin:0 auto 20px; opacity:.8; }
.modal{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.5); z-index:20000; }
.modal.open{ display:grid; place-items:center; }
.modalCard{ width:min(900px, 92vw); max-height:80vh; overflow:auto; background:#0b1030; border:1px solid var(--border); border-radius:18px; padding:14px; }
.modalCard h3{ margin:6px 0 10px 6px; }
.listGrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.listGrid a{ display:block; padding:8px 10px; border:1px solid var(--border); border-radius:12px; color:var(--fg); text-decoration:none; }
.listGrid a:hover{ background:rgba(255,255,255,.06); }

/* HOME responsiveness */
.homeGrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:center; width:100%; }
@media (max-width:900px){ .homeGrid{ grid-template-columns:1fr; } .homeGrid .card{ height:320px; } }

/* QUIZ */
.qMeta{ position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin:0 0 12px; border-bottom:1px solid rgba(255,255,255,.14); background: rgba(8,12,32,.85); backdrop-filter: blur(6px); font-weight:700; }
.qFeedback{ margin:6px 0 12px; font-weight:800; text-align:center; }
.qFeedback.ok{ color:#44e1a9 } .qFeedback.no{ color:#ff9aa2 }
.qPrompt{ font-size:clamp(16px, 2.2vw, 22px); font-weight:700; text-align:center; }
.qStem{ font-size:clamp(18px, 2.8vw, 28px); font-weight:800; text-align:center; margin-top:6px }
.choices{ display:grid; grid-template-columns:1fr; gap:12px; width:min(900px, 100%); margin:12px auto; }
.choice{ width:100%; background:transparent; border:2px solid rgba(255,255,255,.18); border-radius:14px; padding:14px 16px; text-align:left; font-size:clamp(14px, 2.2vw, 18px); transition: transform .06s ease, border-color .15s ease, box-shadow .15s ease; color: var(--fg); }
.choice:hover{ transform: translateY(-1px); border-color:rgba(124,254,255,.6); box-shadow:0 0 0 4px rgba(124,254,255,.12); }
.choice:focus-visible{ outline:3px solid rgba(124,254,255,.8); outline-offset:2px; }
.choice.correct{ border-color:rgba(64,210,140,.85) !important; box-shadow:0 0 0 4px rgba(64,210,140,.18); }
.choice.wrong{   border-color:rgba(244,67,54,.8)  !important; box-shadow:0 0 0 4px rgba(244,67,54,.14); }
.controls{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Card pages: no page scroll */
.page-fit body, .page-fit main{ overflow:hidden; }

/* --- FIX: Keep ALL buttons clickable when hamburger menu is open on mobile --- */
@media (max-width:760px){
  body.menu-open main .controlsRow .btn,
  body.menu-open main .controlsBottom .btn{
    pointer-events:auto;
  }
}