:root {
  --radius:14px;
  --purple:#7c3aed; --purple-t:#a78bfa; --purple-bg:#1a1028;
  --px:clamp(14px,4vw,40px); --py:clamp(12px,2vh,22px);
}
html, body {
  height:100%; height:100dvh;
  background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  overscroll-behavior:none; -webkit-text-size-adjust:100%;
}
body { display:flex; justify-content:center; }

#app {
  width:100%; max-width:680px;
  height:100dvh;
  display:flex; flex-direction:column;
  padding:
    calc(var(--safe-top) + var(--py))
    calc(var(--safe-right) + var(--px))
    calc(var(--safe-bottom) + var(--py))
    calc(var(--safe-left) + var(--px));
  overflow:hidden;
}

/* topbar */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:clamp(8px,1.5vh,16px); flex-shrink:0; }
.back-btn { display:flex; align-items:center; gap:8px; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.back-icon { width:32px; height:32px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--muted); }
.back-btn:active .back-icon { background:var(--bg3); color:var(--text); }
.back-label { font-size:clamp(10px,1.4vw,12px); font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.card-counter { font-size:clamp(12px,1.5vw,14px); font-weight:700; color:var(--muted); }
.card-counter b { color:var(--text); }
.auth-indicator { margin-left:auto; font-size:clamp(10px,1.2vw,12px); color:var(--muted); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* progress */
.progress-wrap { height:3px; background:var(--border); border-radius:2px; margin-bottom:clamp(8px,1.5vh,16px); overflow:hidden; flex-shrink:0; }
.progress-bar  { height:100%; background:var(--purple-t); border-radius:2px; transition:width 0.4s ease; width:0%; }

/* filter tabs */
.tabs { display:flex; gap:8px; margin-bottom:clamp(8px,1.5vh,16px); overflow-x:auto; flex-shrink:0; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab {
  background:var(--bg2); border:1px solid var(--border); border-radius:20px;
  padding:6px 14px; font-size:clamp(11px,1.4vw,13px); font-weight:600; color:var(--muted);
  cursor:pointer; white-space:nowrap; flex-shrink:0; -webkit-tap-highlight-color:transparent;
  transition:border-color 0.15s,color 0.15s,background 0.15s;
}
.tab.active { border-color:var(--purple-t); color:var(--purple-t); background:var(--purple-bg); }
.tab:active { background:var(--bg3); }

/* main content area — fills all remaining height */
#main {
  flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;
}

/* card container */
.card-wrap {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  perspective:1200px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* flip card — fills card-wrap completely */
.card-3d {
  flex:1; min-height:0;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.card-3d.flipped { transform:rotateY(180deg); }

.card-face {
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:clamp(20px,4vw,36px);
  text-align:center; overflow-y:auto;
}
.card-front { background:var(--bg2); border:1.5px solid var(--purple-t); }
.card-back  { background:var(--purple-bg); border:1.5px solid var(--purple-t); transform:rotateY(180deg); }

.card-hint {
  position:absolute; top:14px; right:14px;
  font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:var(--purple-t); opacity:0.6; pointer-events:none;
}
.card-term {
  font-size:clamp(22px,5vw,36px); font-weight:800; color:var(--text);
  line-height:1.2; margin-bottom:8px;
}
.card-category {
  font-size:clamp(10px,1.3vw,12px); font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--purple-t); opacity:0.7;
}
.card-def {
  font-size:clamp(14px,1.8vw,17px); color:var(--text); line-height:1.65; max-width:520px;
}

/* swipe hint + nav — always at bottom, never pushed out */
.swipe-hint { text-align:center; font-size:clamp(11px,1.3vw,13px); color:var(--muted); margin-top:8px; flex-shrink:0; opacity:0.5; }

.nav-row { display:flex; gap:10px; margin-top:clamp(8px,1.5vh,14px); flex-shrink:0; }
.nav-btn {
  flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:clamp(13px,2vh,18px); font-size:clamp(13px,1.5vw,15px); font-weight:700;
  color:var(--muted); cursor:pointer; text-align:center;
  transition:background 0.12s,color 0.12s,border-color 0.12s; -webkit-tap-highlight-color:transparent;
}
.nav-btn:active { background:var(--bg3); }
.nav-btn.next { background:var(--purple); border-color:var(--purple); color:#fff; }
.nav-btn.next:active { background:#6d28d9; }
.nav-btn.shuffle { flex:0 0 auto; padding-left:18px; padding-right:18px; font-size:clamp(16px,2vw,20px); }
.nav-btn:disabled { opacity:0.3; cursor:default; }

/* state */
.state-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:14px; text-align:center; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--purple-t); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* done screen */
#done { display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
#done.active { display:flex; }
.done-emoji { font-size:56px; }
.done-title { font-size:clamp(20px,4vw,28px); font-weight:800; color:var(--text); }
.done-sub   { font-size:clamp(13px,1.8vw,16px); color:var(--muted); }
.btn-restart { background:var(--purple); color:#fff; border:none; border-radius:var(--radius); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:16px 32px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.btn-restart:active { background:#6d28d9; }