mobile

frontend/src/routes/QuizPage.tsx

@@ -14,6 +14,7 @@ export default function QuizPage() {
   const [index, setIndex] = useState(0);
   const [feedback, setFeedback] = useState<"correct" | "wrong" | null>(null);
   const [score, setScore] = useState({ correct: 0, total: 0 });
+  const [layersOpen, setLayersOpen] = useState(false);
 
   const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
   const selectStructure = useAtlasStore((s) => s.selectStructure);
@@ -70,15 +71,41 @@ export default function QuizPage() {
   }
 
   return (
-    <div className="h-full grid grid-cols-[280px_1fr]">
-      <aside className="border-r border-white/10 bg-panel p-3 flex flex-col gap-4 min-h-0">
+    <div className="h-full relative md:grid md:grid-cols-[280px_1fr]">
+      <aside
+        className={`fixed md:static inset-y-0 left-0 z-30 w-[86vw] max-w-[300px] md:w-auto
+          border-r border-white/10 bg-panel p-3 flex flex-col gap-4 min-h-0 overflow-y-auto
+          transition-transform duration-200 md:translate-x-0
+          ${layersOpen ? "translate-x-0" : "-translate-x-full"}`}
+      >
+        <button
+          onClick={() => setLayersOpen(false)}
+          className="md:hidden self-end text-slate-400 hover:text-white text-sm px-2 py-1"
+          aria-label="Fechar painel"
+        >
+          ✕ Fechar
+        </button>
         <LayerToggle />
       </aside>
 
-      <div className="relative">
+      {layersOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 md:hidden"
+          onClick={() => setLayersOpen(false)}
+        />
+      )}
+
+      <div className="relative h-full min-h-0">
         <Scene bySlug={bySlug} />
 
-        <div className="absolute top-3 left-1/2 -translate-x-1/2 bg-panel/95 border border-white/10 rounded-lg px-5 py-3 text-center shadow-lg max-w-md">
+        <button
+          onClick={() => setLayersOpen(true)}
+          className="md:hidden absolute top-3 left-3 z-10 bg-panel/90 border border-white/10 rounded-lg px-3 py-2 text-xs shadow-lg"
+        >
+          ☰ Camadas
+        </button>
+
+        <div className="absolute top-3 left-1/2 -translate-x-1/2 bg-panel/95 border border-white/10 rounded-lg px-3 py-2.5 sm:px-5 sm:py-3 text-center shadow-lg w-[80vw] sm:w-auto sm:max-w-md">
           {!current ? (
             <p className="text-sm text-slate-300">
               Nenhuma estrutura pendente de revisão agora. 🎉
@@ -88,7 +115,7 @@ export default function QuizPage() {
               <p className="text-xs text-slate-400 uppercase tracking-wide mb-1">
                 Onde fica esta estrutura?
               </p>
-              <p className="text-lg font-semibold text-white">{current.namePt}</p>
+              <p className="text-base sm:text-lg font-semibold text-white">{current.namePt}</p>
               <p className="text-xs text-slate-500 mb-2">{current.system.namePt}</p>
 
               {feedback === "correct" && (
@@ -102,14 +129,14 @@ export default function QuizPage() {
                 {feedback ? (
                   <button
                     onClick={next}
-                    className="text-sm px-3 py-1 rounded bg-accent text-white"
+                    className="text-sm px-3 py-1.5 rounded bg-accent text-white"
                   >
                     Próxima
                   </button>
                 ) : (
                   <button
                     onClick={giveUp}
-                    className="text-sm px-3 py-1 rounded bg-white/10 text-slate-200"
+                    className="text-sm px-3 py-1.5 rounded bg-white/10 text-slate-200"
                   >
                     Mostrar resposta
                   </button>